vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor #6826 - For ImageCompare

pull/6829/head
Mert Sincan 2024-11-21 14:06:11 +00:00
parent ca8c4b2ca9
commit 7246898598
4 changed files with 41 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
packages/primevue/src/imagecompare/ImageCompare.vue
View File

@ -7,49 +7,19 @@
</template> </template>
<script> <script>
import { $dt } from '@primeuix/styled';
import { setCSSProperty } from '@primeuix/utils/dom';
import BaseImageCompare from './BaseImageCompare.vue'; import BaseImageCompare from './BaseImageCompare.vue';
export default { export default {
name: 'ImageCompare', name: 'ImageCompare',
extends: BaseImageCompare, extends: BaseImageCompare,
mutationObserver: null,
data() {
return {
isRTL: false
};
},
beforeUnmount() {
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
},
mounted() {
this.updateDirection();
this.observeDirectionChanges();
},
methods: { methods: {
onSlide(event) { onSlide(event) {
const value = event.target.value; const value = event.target.value;
const image = event.target.previousElementSibling; const image = event.target.previousElementSibling;
if (this.isRTL) { setCSSProperty(image, $dt('imagecompare.scope.x').name, `${value}%`);
image.style.clipPath = `polygon(${100 - value}% 0, 100% 0, 100% 100%, ${100 - value}% 100%)`;
} else {
image.style.clipPath = `polygon(0 0, ${value}% 0, ${value}% 100%, 0 100%)`;
}
},
updateDirection() {
this.isRTL = !!this.$el.closest('[dir="rtl"]');
},
observeDirectionChanges() {
const targetNode = document.documentElement;
const config = { attributes: true, attributeFilter: ['dir'] };
this.mutationObserver = new MutationObserver(() => {
this.updateDirection();
});
this.mutationObserver.observe(targetNode, config);
} }
} }
}; };

4
packages/primevue/src/imagecompare/style/ImageCompareStyle.js
View File

@ -15,11 +15,11 @@ const theme = ({ dt }) => `
} }
.p-imagecompare img + img { .p-imagecompare img + img {
clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); clip-path: polygon(0 0, ${dt('imagecompare.scope.x', '50%')} 0, ${dt('imagecompare.scope.x', '50%')} 100%, 0 100%);
} }
.p-imagecompare:dir(rtl) img + img { .p-imagecompare:dir(rtl) img + img {
clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%); clip-path: polygon(calc(100% - ${dt('imagecompare.scope.x', '50%')}) 0, 100% 0, 100% 100%, calc(100% - ${dt('imagecompare.scope.x', '50%')}) 100%);
} }
.p-imagecompare-slider { .p-imagecompare-slider {

73
pnpm-lock.yaml
View File

@ -10,11 +10,11 @@ catalogs:
specifier: ^0.0.2 specifier: ^0.0.2
version: 0.0.2 version: 0.0.2
'@primeuix/styled': '@primeuix/styled':
specifier: ^0.3.1 specifier: ^0.3.2
version: 0.3.1 version: 0.3.2
'@primeuix/utils': '@primeuix/utils':
specifier: ^0.3.1 specifier: ^0.3.2
version: 0.3.1 version: 0.3.2
importers: importers:
@ -166,10 +166,10 @@ importers:
dependencies: dependencies:
'@primeuix/styled': '@primeuix/styled':
specifier: 'catalog:' specifier: 'catalog:'
version: 0.3.1 version: 0.3.2
'@primeuix/utils': '@primeuix/utils':
specifier: 'catalog:' specifier: 'catalog:'
version: 0.3.1 version: 0.3.2
vue: vue:
specifier: ^3.3.0 specifier: ^3.3.0
version: 3.5.13(typescript@5.6.3) version: 3.5.13(typescript@5.6.3)
@ -182,7 +182,7 @@ importers:
version: 0.0.2 version: 0.0.2
'@primeuix/utils': '@primeuix/utils':
specifier: 'catalog:' specifier: 'catalog:'
version: 0.3.1 version: 0.3.2
'@primevue/core': '@primevue/core':
specifier: workspace:* specifier: workspace:*
version: link:../core version: link:../core
@ -192,7 +192,7 @@ importers:
dependencies: dependencies:
'@primeuix/utils': '@primeuix/utils':
specifier: 'catalog:' specifier: 'catalog:'
version: 0.3.1 version: 0.3.2
'@primevue/core': '@primevue/core':
specifier: workspace:* specifier: workspace:*
version: link:../core version: link:../core
@ -212,10 +212,10 @@ importers:
version: 3.14.1592(magicast@0.3.5)(rollup@4.27.3) version: 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
'@primeuix/styled': '@primeuix/styled':
specifier: 'catalog:' specifier: 'catalog:'
version: 0.3.1 version: 0.3.2
'@primeuix/utils': '@primeuix/utils':
specifier: 'catalog:' specifier: 'catalog:'
version: 0.3.1 version: 0.3.2
'@primevue/auto-import-resolver': '@primevue/auto-import-resolver':
specifier: workspace:* specifier: workspace:*
version: link:../auto-import-resolver version: link:../auto-import-resolver
@ -234,7 +234,7 @@ importers:
devDependencies: devDependencies:
'@nuxt/devtools': '@nuxt/devtools':
specifier: ^0.8.5 specifier: ^0.8.5
version: 0.8.5(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0)) version: 0.8.5(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)
'@nuxt/eslint-config': '@nuxt/eslint-config':
specifier: ^0.2.0 specifier: ^0.2.0
version: 0.2.0(eslint@8.57.1) version: 0.2.0(eslint@8.57.1)
@ -246,7 +246,7 @@ importers:
version: 3.14.1592(magicast@0.3.5)(rollup@4.27.3) version: 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
'@nuxt/test-utils': '@nuxt/test-utils':
specifier: ^3.7.3 specifier: ^3.7.3
version: 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)) version: 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
'@primevue/themes': '@primevue/themes':
specifier: workspace:* specifier: workspace:*
version: link:../themes version: link:../themes
@ -270,10 +270,10 @@ importers:
dependencies: dependencies:
'@primeuix/styled': '@primeuix/styled':
specifier: 'catalog:' specifier: 'catalog:'
version: 0.3.1 version: 0.3.2
'@primeuix/utils': '@primeuix/utils':
specifier: 'catalog:' specifier: 'catalog:'
version: 0.3.1 version: 0.3.2
'@primevue/core': '@primevue/core':
specifier: workspace:* specifier: workspace:*
version: link:../core version: link:../core
@ -293,7 +293,7 @@ importers:
dependencies: dependencies:
'@primeuix/styled': '@primeuix/styled':
specifier: 'catalog:' specifier: 'catalog:'
version: 0.3.1 version: 0.3.2
publishDirectory: dist publishDirectory: dist
packages: packages:
@ -1982,12 +1982,12 @@ packages:
resolution: {integrity: sha512-DpecPQd/Qf/kav4LKCaIeGuT3AkwhJzuHCkLANTVlN/zBvo8KIj3OZHsCkm0zlIMVVnaJdtx1ULNlRQdudef+A==} resolution: {integrity: sha512-DpecPQd/Qf/kav4LKCaIeGuT3AkwhJzuHCkLANTVlN/zBvo8KIj3OZHsCkm0zlIMVVnaJdtx1ULNlRQdudef+A==}
engines: {node: '>=12.11.0'} engines: {node: '>=12.11.0'}
'@primeuix/styled@0.3.1': '@primeuix/styled@0.3.2':
resolution: {integrity: sha512-MIPtektNrFwEKJU0qXrguoultADtxMC39ghwXIGP3DR3zsB7vWk6VhJ1Mo7TxgWsVi3kHnh6g5v9X50eMFcBHw==} resolution: {integrity: sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==}
engines: {node: '>=12.11.0'} engines: {node: '>=12.11.0'}
'@primeuix/utils@0.3.1': '@primeuix/utils@0.3.2':
resolution: {integrity: sha512-KFJ8FylTX2j3AN6AvkF8JGSUNb7Dtqz1T5mlZnINDb6bwW+/V/d5wISiMEdhzdso69mmOX7IlYUDsj0w0pvxvA==} resolution: {integrity: sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==}
engines: {node: '>=12.11.0'} engines: {node: '>=12.11.0'}
'@redocly/ajv@8.11.2': '@redocly/ajv@8.11.2':
@ -8099,13 +8099,12 @@ snapshots:
'@nuxt/devalue@2.0.2': {} '@nuxt/devalue@2.0.2': {}
'@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))': '@nuxt/devtools-kit@0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)':
dependencies: dependencies:
'@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3) '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
'@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@4.27.3) '@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
execa: 7.2.0 execa: 7.2.0
nuxt: 3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3) nuxt: 3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3)
vite: 5.4.11(@types/node@18.19.64)(terser@5.36.0)
transitivePeerDependencies: transitivePeerDependencies:
- magicast - magicast
- rollup - rollup
@ -8124,10 +8123,10 @@ snapshots:
rc9: 2.1.2 rc9: 2.1.2
semver: 7.6.3 semver: 7.6.3
'@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))': '@nuxt/devtools@0.8.5(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)':
dependencies: dependencies:
'@antfu/utils': 0.7.10 '@antfu/utils': 0.7.10
'@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0)) '@nuxt/devtools-kit': 0.8.5(magicast@0.3.5)(nuxt@3.3.2(@types/node@18.19.64)(encoding@0.1.13)(eslint@8.57.1)(ioredis@5.4.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.27.3)(terser@5.36.0)(typescript@5.6.3))(rollup@4.27.3)
'@nuxt/devtools-wizard': 0.8.5 '@nuxt/devtools-wizard': 0.8.5
'@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3) '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
birpc: 0.2.19 birpc: 0.2.19
@ -8158,9 +8157,8 @@ snapshots:
simple-git: 3.27.0 simple-git: 3.27.0
sirv: 2.0.4 sirv: 2.0.4
unimport: 3.13.2(rollup@4.27.3) unimport: 3.13.2(rollup@4.27.3)
vite: 5.4.11(@types/node@18.19.64)(terser@5.36.0) vite-plugin-inspect: 0.7.42(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.27.3))(rollup@4.27.3)
vite-plugin-inspect: 0.7.42(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.27.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0)) vite-plugin-vue-inspector: 3.7.2
vite-plugin-vue-inspector: 3.7.2(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))
wait-on: 7.2.0 wait-on: 7.2.0
which: 3.0.1 which: 3.0.1
ws: 8.18.0 ws: 8.18.0
@ -8436,7 +8434,7 @@ snapshots:
- rollup - rollup
- supports-color - supports-color
'@nuxt/test-utils@3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))': '@nuxt/test-utils@3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))':
dependencies: dependencies:
'@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3) '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
'@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@4.27.3) '@nuxt/schema': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
@ -8462,8 +8460,7 @@ snapshots:
ufo: 1.5.4 ufo: 1.5.4
unenv: 1.10.0 unenv: 1.10.0
unplugin: 1.16.0 unplugin: 1.16.0
vite: 5.4.11(@types/node@18.19.64)(terser@5.36.0) vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
vitest-environment-nuxt: 1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
vue: 3.5.13(typescript@5.6.3) vue: 3.5.13(typescript@5.6.3)
vue-router: 4.4.5(vue@3.5.13(typescript@5.6.3)) vue-router: 4.4.5(vue@3.5.13(typescript@5.6.3))
optionalDependencies: optionalDependencies:
@ -8666,13 +8663,13 @@ snapshots:
'@primeuix/forms@0.0.2': '@primeuix/forms@0.0.2':
dependencies: dependencies:
'@primeuix/utils': 0.3.1 '@primeuix/utils': 0.3.2
'@primeuix/styled@0.3.1': '@primeuix/styled@0.3.2':
dependencies: dependencies:
'@primeuix/utils': 0.3.1 '@primeuix/utils': 0.3.2
'@primeuix/utils@0.3.1': {} '@primeuix/utils@0.3.2': {}
'@redocly/ajv@8.11.2': '@redocly/ajv@8.11.2':
dependencies: dependencies:
@ -13815,7 +13812,7 @@ snapshots:
optionator: 0.9.4 optionator: 0.9.4
typescript: 5.6.3 typescript: 5.6.3
vite-plugin-inspect@0.7.42(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.27.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0)): vite-plugin-inspect@0.7.42(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.27.3))(rollup@4.27.3):
dependencies: dependencies:
'@antfu/utils': 0.7.10 '@antfu/utils': 0.7.10
'@rollup/pluginutils': 5.1.3(rollup@4.27.3) '@rollup/pluginutils': 5.1.3(rollup@4.27.3)
@ -13825,14 +13822,13 @@ snapshots:
open: 9.1.0 open: 9.1.0
picocolors: 1.1.1 picocolors: 1.1.1
sirv: 2.0.4 sirv: 2.0.4
vite: 5.4.11(@types/node@18.19.64)(terser@5.36.0)
optionalDependencies: optionalDependencies:
'@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3) '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
transitivePeerDependencies: transitivePeerDependencies:
- rollup - rollup
- supports-color - supports-color
vite-plugin-vue-inspector@3.7.2(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0)): vite-plugin-vue-inspector@3.7.2:
dependencies: dependencies:
'@babel/core': 7.26.0 '@babel/core': 7.26.0
'@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.0) '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.26.0)
@ -13843,7 +13839,6 @@ snapshots:
'@vue/compiler-dom': 3.5.13 '@vue/compiler-dom': 3.5.13
kolorist: 1.8.0 kolorist: 1.8.0
magic-string: 0.30.13 magic-string: 0.30.13
vite: 5.4.11(@types/node@18.19.64)(terser@5.36.0)
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
@ -13880,9 +13875,9 @@ snapshots:
fsevents: 2.3.3 fsevents: 2.3.3
terser: 5.36.0 terser: 5.36.0
vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)): vitest-environment-nuxt@1.0.1(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)):
dependencies: dependencies:
'@nuxt/test-utils': 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vite@5.4.11(@types/node@18.19.64)(terser@5.36.0))(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3)) '@nuxt/test-utils': 3.14.4(@vue/test-utils@2.4.6)(h3@1.13.0)(magicast@0.3.5)(nitropack@2.10.4(encoding@0.1.13)(typescript@5.6.3))(rollup@4.27.3)(vitest@1.6.0(@types/node@18.19.64)(terser@5.36.0))(vue-router@4.4.5(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
transitivePeerDependencies: transitivePeerDependencies:
- '@cucumber/cucumber' - '@cucumber/cucumber'
- '@jest/globals' - '@jest/globals'

4
pnpm-workspace.yaml
View File

@ -3,6 +3,6 @@ packages:
- 'apps/*' - 'apps/*'
catalog: catalog:
'@primeuix/styled': ^0.3.1 '@primeuix/styled': ^0.3.2
'@primeuix/utils': ^0.3.1 '@primeuix/utils': ^0.3.2
'@primeuix/forms': ^0.0.2 '@primeuix/forms': ^0.0.2