Refactor #6826 - For ImageCompare
Mert Sincan
parent
ca8c4b2ca9
commit
7246898598
|
|
@ -7,49 +7,19 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { $dt } from '@primeuix/styled';
|
||||
import { setCSSProperty } from '@primeuix/utils/dom';
|
||||
import BaseImageCompare from './BaseImageCompare.vue';
|
||||
|
||||
export default {
|
||||
name: 'ImageCompare',
|
||||
extends: BaseImageCompare,
|
||||
mutationObserver: null,
|
||||
data() {
|
||||
return {
|
||||
isRTL: false
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.mutationObserver) {
|
||||
this.mutationObserver.disconnect();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.updateDirection();
|
||||
this.observeDirectionChanges();
|
||||
},
|
||||
methods: {
|
||||
onSlide(event) {
|
||||
const value = event.target.value;
|
||||
const image = event.target.previousElementSibling;
|
||||
|
||||
if (this.isRTL) {
|
||||
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);
|
||||
setCSSProperty(image, $dt('imagecompare.scope.x').name, `${value}%`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ const theme = ({ dt }) => `
|
|||
}
|
||||
|
||||
.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 {
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@ catalogs:
|
|||
specifier: ^0.0.2
|
||||
version: 0.0.2
|
||||
'@primeuix/styled':
|
||||
specifier: ^0.3.1
|
||||
version: 0.3.1
|
||||
specifier: ^0.3.2
|
||||
version: 0.3.2
|
||||
'@primeuix/utils':
|
||||
specifier: ^0.3.1
|
||||
version: 0.3.1
|
||||
specifier: ^0.3.2
|
||||
version: 0.3.2
|
||||
|
||||
importers:
|
||||
|
||||
|
|
@ -166,10 +166,10 @@ importers:
|
|||
dependencies:
|
||||
'@primeuix/styled':
|
||||
specifier: 'catalog:'
|
||||
version: 0.3.1
|
||||
version: 0.3.2
|
||||
'@primeuix/utils':
|
||||
specifier: 'catalog:'
|
||||
version: 0.3.1
|
||||
version: 0.3.2
|
||||
vue:
|
||||
specifier: ^3.3.0
|
||||
version: 3.5.13(typescript@5.6.3)
|
||||
|
|
@ -182,7 +182,7 @@ importers:
|
|||
version: 0.0.2
|
||||
'@primeuix/utils':
|
||||
specifier: 'catalog:'
|
||||
version: 0.3.1
|
||||
version: 0.3.2
|
||||
'@primevue/core':
|
||||
specifier: workspace:*
|
||||
version: link:../core
|
||||
|
|
@ -192,7 +192,7 @@ importers:
|
|||
dependencies:
|
||||
'@primeuix/utils':
|
||||
specifier: 'catalog:'
|
||||
version: 0.3.1
|
||||
version: 0.3.2
|
||||
'@primevue/core':
|
||||
specifier: workspace:*
|
||||
version: link:../core
|
||||
|
|
@ -212,10 +212,10 @@ importers:
|
|||
version: 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
|
||||
'@primeuix/styled':
|
||||
specifier: 'catalog:'
|
||||
version: 0.3.1
|
||||
version: 0.3.2
|
||||
'@primeuix/utils':
|
||||
specifier: 'catalog:'
|
||||
version: 0.3.1
|
||||
version: 0.3.2
|
||||
'@primevue/auto-import-resolver':
|
||||
specifier: workspace:*
|
||||
version: link:../auto-import-resolver
|
||||
|
|
@ -234,7 +234,7 @@ importers:
|
|||
devDependencies:
|
||||
'@nuxt/devtools':
|
||||
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':
|
||||
specifier: ^0.2.0
|
||||
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)
|
||||
'@nuxt/test-utils':
|
||||
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':
|
||||
specifier: workspace:*
|
||||
version: link:../themes
|
||||
|
|
@ -270,10 +270,10 @@ importers:
|
|||
dependencies:
|
||||
'@primeuix/styled':
|
||||
specifier: 'catalog:'
|
||||
version: 0.3.1
|
||||
version: 0.3.2
|
||||
'@primeuix/utils':
|
||||
specifier: 'catalog:'
|
||||
version: 0.3.1
|
||||
version: 0.3.2
|
||||
'@primevue/core':
|
||||
specifier: workspace:*
|
||||
version: link:../core
|
||||
|
|
@ -293,7 +293,7 @@ importers:
|
|||
dependencies:
|
||||
'@primeuix/styled':
|
||||
specifier: 'catalog:'
|
||||
version: 0.3.1
|
||||
version: 0.3.2
|
||||
publishDirectory: dist
|
||||
|
||||
packages:
|
||||
|
|
@ -1982,12 +1982,12 @@ packages:
|
|||
resolution: {integrity: sha512-DpecPQd/Qf/kav4LKCaIeGuT3AkwhJzuHCkLANTVlN/zBvo8KIj3OZHsCkm0zlIMVVnaJdtx1ULNlRQdudef+A==}
|
||||
engines: {node: '>=12.11.0'}
|
||||
|
||||
'@primeuix/styled@0.3.1':
|
||||
resolution: {integrity: sha512-MIPtektNrFwEKJU0qXrguoultADtxMC39ghwXIGP3DR3zsB7vWk6VhJ1Mo7TxgWsVi3kHnh6g5v9X50eMFcBHw==}
|
||||
'@primeuix/styled@0.3.2':
|
||||
resolution: {integrity: sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==}
|
||||
engines: {node: '>=12.11.0'}
|
||||
|
||||
'@primeuix/utils@0.3.1':
|
||||
resolution: {integrity: sha512-KFJ8FylTX2j3AN6AvkF8JGSUNb7Dtqz1T5mlZnINDb6bwW+/V/d5wISiMEdhzdso69mmOX7IlYUDsj0w0pvxvA==}
|
||||
'@primeuix/utils@0.3.2':
|
||||
resolution: {integrity: sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==}
|
||||
engines: {node: '>=12.11.0'}
|
||||
|
||||
'@redocly/ajv@8.11.2':
|
||||
|
|
@ -8099,13 +8099,12 @@ snapshots:
|
|||
|
||||
'@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:
|
||||
'@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)
|
||||
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)
|
||||
vite: 5.4.11(@types/node@18.19.64)(terser@5.36.0)
|
||||
transitivePeerDependencies:
|
||||
- magicast
|
||||
- rollup
|
||||
|
|
@ -8124,10 +8123,10 @@ snapshots:
|
|||
rc9: 2.1.2
|
||||
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:
|
||||
'@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/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
|
||||
birpc: 0.2.19
|
||||
|
|
@ -8158,9 +8157,8 @@ snapshots:
|
|||
simple-git: 3.27.0
|
||||
sirv: 2.0.4
|
||||
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@5.4.11(@types/node@18.19.64)(terser@5.36.0))
|
||||
vite-plugin-vue-inspector: 3.7.2(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-vue-inspector: 3.7.2
|
||||
wait-on: 7.2.0
|
||||
which: 3.0.1
|
||||
ws: 8.18.0
|
||||
|
|
@ -8436,7 +8434,7 @@ snapshots:
|
|||
- rollup
|
||||
- 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:
|
||||
'@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)
|
||||
|
|
@ -8462,8 +8460,7 @@ snapshots:
|
|||
ufo: 1.5.4
|
||||
unenv: 1.10.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)(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))
|
||||
vue: 3.5.13(typescript@5.6.3)
|
||||
vue-router: 4.4.5(vue@3.5.13(typescript@5.6.3))
|
||||
optionalDependencies:
|
||||
|
|
@ -8666,13 +8663,13 @@ snapshots:
|
|||
|
||||
'@primeuix/forms@0.0.2':
|
||||
dependencies:
|
||||
'@primeuix/utils': 0.3.1
|
||||
'@primeuix/utils': 0.3.2
|
||||
|
||||
'@primeuix/styled@0.3.1':
|
||||
'@primeuix/styled@0.3.2':
|
||||
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':
|
||||
dependencies:
|
||||
|
|
@ -13815,7 +13812,7 @@ snapshots:
|
|||
optionator: 0.9.4
|
||||
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:
|
||||
'@antfu/utils': 0.7.10
|
||||
'@rollup/pluginutils': 5.1.3(rollup@4.27.3)
|
||||
|
|
@ -13825,14 +13822,13 @@ snapshots:
|
|||
open: 9.1.0
|
||||
picocolors: 1.1.1
|
||||
sirv: 2.0.4
|
||||
vite: 5.4.11(@types/node@18.19.64)(terser@5.36.0)
|
||||
optionalDependencies:
|
||||
'@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.27.3)
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- 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:
|
||||
'@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
|
||||
kolorist: 1.8.0
|
||||
magic-string: 0.30.13
|
||||
vite: 5.4.11(@types/node@18.19.64)(terser@5.36.0)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
|
|
@ -13880,9 +13875,9 @@ snapshots:
|
|||
fsevents: 2.3.3
|
||||
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:
|
||||
'@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:
|
||||
- '@cucumber/cucumber'
|
||||
- '@jest/globals'
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@ packages:
|
|||
- 'apps/*'
|
||||
|
||||
catalog:
|
||||
'@primeuix/styled': ^0.3.1
|
||||
'@primeuix/utils': ^0.3.1
|
||||
'@primeuix/styled': ^0.3.2
|
||||
'@primeuix/utils': ^0.3.2
|
||||
'@primeuix/forms': ^0.0.2
|
||||
|
|
|
|||
Loading…
Reference in New Issue