diff --git a/playgrounds/vue3/src/App.vue b/playgrounds/vue3/src/App.vue index 6bd81e7..fea88e0 100644 --- a/playgrounds/vue3/src/App.vue +++ b/playgrounds/vue3/src/App.vue @@ -7,7 +7,7 @@ import { reactive, ref, version, watch } from 'vue' const numberRollRef = ref>() const options = reactive({ start: { - value: 123, + value: 132, type: 'number', }, end: { @@ -19,7 +19,7 @@ const options = reactive({ type: 'number', }, transitionDelay: { - value: '0', + value: '0.5s', type: 'text', }, transitionDuration: { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a80d5b3..48af8fc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3,13 +3,10 @@ lockfileVersion: '6.0' dependencies: '@vue/composition-api': specifier: ^1.7.1 - version: 1.7.1(vue@2.0.0) - '@vueuse/core': - specifier: ^10.1.2 - version: 10.1.2(vue@3.3.4) + version: 1.7.1(vue@3.3.4) vue-demi: specifier: ^0.14.5 - version: 0.14.5(vue@3.3.4) + version: 0.14.5(@vue/composition-api@1.7.1)(vue@3.3.4) devDependencies: '@lvjiaxuan/eslint-plugin': @@ -797,10 +794,6 @@ packages: resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==} dev: true - /@types/web-bluetooth@0.0.17: - resolution: {integrity: sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA==} - dev: false - /@typescript-eslint/eslint-plugin@5.59.6(@typescript-eslint/parser@5.59.6)(eslint@8.41.0)(typescript@5.0.4): resolution: {integrity: sha512-sXtOgJNEuRU5RLwPUb1jxtToZbgvq3M6FPpY4QENxoOggK+UpTxUBpj6tD8+Qh2g46Pi9We87E+eHnUw8YcGsw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -1154,12 +1147,12 @@ packages: '@vue/compiler-dom': 3.3.4 '@vue/shared': 3.3.4 - /@vue/composition-api@1.7.1(vue@2.0.0): + /@vue/composition-api@1.7.1(vue@3.3.4): resolution: {integrity: sha512-xDWoEtxGXhH9Ku3ROYX/rzhcpt4v31hpPU5zF3UeVC/qxA3dChmqU8zvTUYoKh3j7rzpNsoFOwqsWG7XPMlaFA==} peerDependencies: vue: '>= 2.5 < 2.7' dependencies: - vue: 2.0.0 + vue: 3.3.4 dev: false /@vue/eslint-config-typescript@11.0.3(eslint-plugin-vue@9.13.0)(eslint@8.41.0)(typescript@5.0.4): @@ -1226,29 +1219,6 @@ packages: resolution: {integrity: sha512-CPuIReonid9+zOG/CGTT05FXrPYATEqoDGNrEaqS4hwcw5BUNM2FguC0mOwJD4Jr16UpRVl9N0pY3P+srIbqmg==} dev: true - /@vueuse/core@10.1.2(vue@3.3.4): - resolution: {integrity: sha512-roNn8WuerI56A5uiTyF/TEYX0Y+VKlhZAF94unUfdhbDUI+NfwQMn4FUnUscIRUhv3344qvAghopU4bzLPNFlA==} - dependencies: - '@types/web-bluetooth': 0.0.17 - '@vueuse/metadata': 10.1.2 - '@vueuse/shared': 10.1.2(vue@3.3.4) - vue-demi: 0.14.5(vue@3.3.4) - transitivePeerDependencies: - - vue - dev: false - - /@vueuse/metadata@10.1.2: - resolution: {integrity: sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==} - dev: false - - /@vueuse/shared@10.1.2(vue@3.3.4): - resolution: {integrity: sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==} - dependencies: - vue-demi: 0.14.5(vue@3.3.4) - transitivePeerDependencies: - - vue - dev: false - /acorn-jsx@5.3.2(acorn@8.8.2): resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} peerDependencies: @@ -2894,7 +2864,7 @@ packages: fsevents: 2.3.2 dev: true - /vue-demi@0.14.5(vue@3.3.4): + /vue-demi@0.14.5(@vue/composition-api@1.7.1)(vue@3.3.4): resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==} engines: {node: '>=12'} hasBin: true @@ -2906,6 +2876,7 @@ packages: '@vue/composition-api': optional: true dependencies: + '@vue/composition-api': 1.7.1(vue@3.3.4) vue: 3.3.4 dev: false @@ -2927,10 +2898,6 @@ packages: - supports-color dev: true - /vue@2.0.0: - resolution: {integrity: sha512-R3ofC6v51hVoSJ7t/lVg6RURSLZAcrf8pabotpFZVqaVEB6s7D+GFFobm/6HXQJU9P7/pNq43ZVFEQdt7PK6YQ==} - dev: false - /vue@3.3.4: resolution: {integrity: sha512-VTyEYn3yvIeY1Py0WaYGZsXnz3y5UnGi62GjVEqvEGPl6nxbOrCXbVOTQWBEJUqAyTUk2uJ5JLVnYJ6ZzGbrSw==} dependencies: diff --git a/src/index.ts b/src/index.ts index 634df65..dbed25d 100644 --- a/src/index.ts +++ b/src/index.ts @@ -84,8 +84,6 @@ export default defineComponent({ .padStart(+props.totalLength, '0') .split('') .forEach((number, idx) => setItemTranslateY(idx, +number)) - // isColorTransparent.value = false - console.log(itemTranslateYs.value) } const endNumberWithPadding = computed(() => props.end.toString().padStart(+props.totalLength, '0')) @@ -94,7 +92,6 @@ export default defineComponent({ endNumberWithPadding.value.split('').forEach((number, idx) => setItemTranslateY(idx, +number)) } - const isColorTransparent = ref(true) // { color: 'transparent' } const vueNumberRollRef = ref(null) const itemHeightNumber = computed(() => (vueNumberRollRef.value?.children[0]?.children[0]?.children[0] as HTMLElement)?.offsetHeight ?? 0) @@ -109,14 +106,29 @@ export default defineComponent({ } } + const isInitialized = ref(false) + const stop = watch(itemHeightNumber, _itemHeightNumber => { + if (_itemHeightNumber > 0) { + stop() + init() + // void nextTick(() => window.requestAnimationFrame(() => isInitialized.value = true)) + setTimeout(() => isInitialized.value = true) + } + }) watch([ - itemHeightNumber, () => props.start, () => props.totalLength, () => props.reverseRollDirection, ], init, { immediate: true }) - onMounted(() => props.immediate && roll()) + onMounted(() => { + if (props.immediate) { + const stop = watch(isInitialized, _isInitialized => { + stop() + _isInitialized && roll() + }) + } + }) // These two methods were set at methods, working as an alias, for the lack of Intellisense. expose({ roll, reset: init }) @@ -135,7 +147,7 @@ export default defineComponent({ itemTranslateYs.value.map((_, index) => h( 'li', { - class: `${ props.itemClass } transition-property-transform box-border mt0 mb0`, + class: `${ props.itemClass } mt0 mb0`, style: { height: itemHeightNumber.value.toString() + 'px' }, }, [ @@ -145,11 +157,11 @@ export default defineComponent({ class: 'flex-(~ justify-center items-center box-border)', style: [ itemTranslateYs.value[index], - { + isInitialized.value ? { 'transition-duration': props.transitionDuration, 'transition-timing-function': props.transitionTimingFunction, 'transition-delay': props.transitionDelay, - }, + } : {}, ], }, [ ...new Array(10) ].map((_, index) => h(