From 4703f9c4d5e3902d0fc389d447aa9a7da2e2dd4a Mon Sep 17 00:00:00 2001 From: Dominik Pschenitschni Date: Wed, 29 Mar 2023 13:31:20 +0200 Subject: [PATCH] fix: has-pseudo-class polyfill --- env.d.ts | 10 +++++ package.json | 4 +- pnpm-lock.yaml | 59 ++++++-------------------- src/components/input/fancycheckbox.vue | 33 +++++++------- src/histoire.setup.ts | 1 + src/polyfills.ts | 6 ++- vite.config.ts | 1 + 7 files changed, 50 insertions(+), 64 deletions(-) diff --git a/env.d.ts b/env.d.ts index adf078af2..1c43ec1ed 100644 --- a/env.d.ts +++ b/env.d.ts @@ -3,6 +3,16 @@ /// /// +declare module 'postcss-focus-within/browser' { + import focusWithinInit from 'postcss-focus-within/browser' + export default focusWithinInit +} + +declare module 'css-has-pseudo/browser' { + import cssHasPseudo from 'css-has-pseudo/browser' + export default cssHasPseudo +} + interface ImportMetaEnv { readonly VITE_IS_ONLINE: boolean } diff --git a/package.json b/package.json index 998df3805..896db3f16 100644 --- a/package.json +++ b/package.json @@ -72,7 +72,6 @@ "flatpickr": "4.6.13", "flexsearch": "0.7.31", "floating-vue": "2.0.0-beta.20", - "focus-within": "3.0.2", "highlight.js": "11.7.0", "is-touch-device": "1.0.1", "klona": "2.0.6", @@ -102,7 +101,6 @@ "@types/codemirror": "5.60.7", "@types/dompurify": "3.0.0", "@types/flexsearch": "0.7.3", - "@types/focus-within": "1.0.1", "@types/lodash.debounce": "4.0.7", "@types/marked": "4.0.8", "@types/node": "18.15.11", @@ -117,6 +115,7 @@ "autoprefixer": "10.4.14", "browserslist": "4.21.5", "caniuse-lite": "1.0.30001470", + "css-has-pseudo": "5.0.2", "csstype": "3.1.1", "cypress": "12.9.0", "esbuild": "0.17.14", @@ -128,6 +127,7 @@ "postcss": "8.4.21", "postcss-easing-gradients": "3.0.1", "postcss-easings": "3.0.1", + "postcss-focus-within": "7.0.2", "postcss-preset-env": "8.2.0", "rollup": "3.20.2", "rollup-plugin-visualizer": "5.9.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b7542ed55..e1a042e82 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -87,9 +87,6 @@ dependencies: floating-vue: specifier: 2.0.0-beta.20 version: 2.0.0-beta.20(vue@3.2.47) - focus-within: - specifier: 3.0.2 - version: 3.0.2 highlight.js: specifier: 11.7.0 version: 11.7.0 @@ -173,9 +170,6 @@ devDependencies: '@types/flexsearch': specifier: 0.7.3 version: 0.7.3 - '@types/focus-within': - specifier: 1.0.1 - version: 1.0.1 '@types/lodash.debounce': specifier: 4.0.7 version: 4.0.7 @@ -218,6 +212,9 @@ devDependencies: caniuse-lite: specifier: 1.0.30001470 version: 1.0.30001470 + css-has-pseudo: + specifier: 5.0.2 + version: 5.0.2(postcss@8.4.21) csstype: specifier: 3.1.1 version: 3.1.1 @@ -251,6 +248,9 @@ devDependencies: postcss-easings: specifier: 3.0.1 version: 3.0.1(postcss@8.4.21) + postcss-focus-within: + specifier: 7.0.2 + version: 7.0.2(postcss@8.4.21) postcss-preset-env: specifier: 8.2.0 version: 8.2.0(postcss@8.4.21) @@ -2245,7 +2245,7 @@ packages: eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 dependencies: eslint: 8.37.0 - eslint-visitor-keys: 3.3.0 + eslint-visitor-keys: 3.4.0 dev: true /@eslint-community/regexpp@4.4.0: @@ -3900,10 +3900,6 @@ packages: resolution: {integrity: sha512-HXwADeHEP4exXkCIwy2n1+i0f1ilP1ETQOH5KDOugjkTFZPntWo0Gr8stZOaebkxsdx+k0X/K6obU/+it07ocg==} dev: true - /@types/focus-within@1.0.1: - resolution: {integrity: sha512-ClIiYA9fOJUcZzb8nQXlvwta5obDHd5aQw4I2L/b1lvFSPXXImgiN7ueRVfMlIEkpAvc22hMjbu3g3RiPzZEUQ==} - dev: true - /@types/fs-extra@9.0.13: resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==} dependencies: @@ -4224,7 +4220,7 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: '@typescript-eslint/types': 5.57.0 - eslint-visitor-keys: 3.3.0 + eslint-visitor-keys: 3.4.0 dev: true /@vercel/nft@0.22.1(supports-color@9.2.1): @@ -5977,7 +5973,7 @@ packages: dev: true /concat-map@0.0.1: - resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} + resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=} dev: true /concordance@5.0.4: @@ -7255,11 +7251,6 @@ packages: engines: {node: '>=4'} dev: false - /eslint-visitor-keys@3.3.0: - resolution: {integrity: sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==} - engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - dev: true - /eslint-visitor-keys@3.4.0: resolution: {integrity: sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -7323,15 +7314,6 @@ packages: eslint-visitor-keys: 1.3.0 dev: false - /espree@9.4.0: - resolution: {integrity: sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==} - engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} - dependencies: - acorn: 8.8.2 - acorn-jsx: 5.3.2(acorn@8.8.2) - eslint-visitor-keys: 3.3.0 - dev: true - /espree@9.5.1: resolution: {integrity: sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -7346,13 +7328,6 @@ packages: engines: {node: '>=4'} hasBin: true - /esquery@1.4.0: - resolution: {integrity: sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==} - engines: {node: '>=0.10'} - dependencies: - estraverse: 5.3.0 - dev: true - /esquery@1.4.2: resolution: {integrity: sha512-JVSoLdTlTDkmjFmab7H/9SL9qGSyjElT3myyKp7krqjVFQCDLmj1QFaCLRFBszBKI0XVZaiiXvuPIX3ZwHe1Ng==} engines: {node: '>=0.10'} @@ -7990,14 +7965,6 @@ packages: resolution: {integrity: sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==} dev: true - /focus-within@3.0.2: - resolution: {integrity: sha512-TMn2sLUwi02dSPElXFPyzBkiQN+Xo1oYta5Jd2zC54MQoBOCMht6xar7gJgw5a9+GtFxkG9c2k4ptI6cU37soA==} - engines: {node: '>=6.0.0'} - hasBin: true - dependencies: - postcss: 7.0.39 - dev: false - /folder-walker@3.2.0: resolution: {integrity: sha512-VjAQdSLsl6AkpZNyrQJfO7BXLo4chnStqb055bumZMbRUPpVuPN3a4ktsnRCmrFZjtMlYLkyXiR5rAs4WOpC4Q==} dependencies: @@ -11627,6 +11594,7 @@ packages: /picocolors@0.2.1: resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==} + dev: true /picocolors@1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} @@ -12126,6 +12094,7 @@ packages: dependencies: picocolors: 0.2.1 source-map: 0.6.1 + dev: true /postcss@8.4.21: resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==} @@ -14666,9 +14635,9 @@ packages: debug: 4.3.4(supports-color@9.2.1) eslint: 8.37.0 eslint-scope: 7.1.1 - eslint-visitor-keys: 3.3.0 - espree: 9.4.0 - esquery: 1.4.0 + eslint-visitor-keys: 3.4.0 + espree: 9.5.1 + esquery: 1.4.2 lodash: 4.17.21 semver: 7.3.8 transitivePeerDependencies: diff --git a/src/components/input/fancycheckbox.vue b/src/components/input/fancycheckbox.vue index a54491c29..b8e16680c 100644 --- a/src/components/input/fancycheckbox.vue +++ b/src/components/input/fancycheckbox.vue @@ -10,7 +10,7 @@ @update:model-value="value => emit('update:modelValue', value)" > - + @@ -58,33 +58,36 @@ const emit = defineEmits<{ padding-left: .5rem; } -.fancycheckbox__icon { - --stroke-color: #c8ccd4; +.fancycheckbox__icon:deep() { position: relative; z-index: 1; - stroke: var(--stroke-color); + stroke: var(--stroke-color, #c8ccd4); transform: translate3d(0, 0, 0); transition: all 0.2s ease; - :deep(path) { - // stroke-dasharray: 60; - transition: all 0.2s linear, color 0.2s ease; - } - - :deep(polyline) { - // stroke-dasharray: 22; - // stroke-dashoffset: 66; + path, + polyline { transition: all 0.2s linear, color 0.2s ease; } } -.fancycheckbox:not(:has(input:disabled)):hover .fancycheckbox__icon { +.fancycheckbox:not(:has(input:disabled)):hover .fancycheckbox__icon, +.fancycheckbox:has(input:checked) .fancycheckbox__icon { --stroke-color: var(--primary); } + -.fancycheckbox:has(input:checked) .fancycheckbox__icon:deep() { - --stroke-color: var(--primary); +