From 1ae2e0ac493e7cf5ffb2dae5118849978f015312 Mon Sep 17 00:00:00 2001 From: Mehmet Date: Wed, 19 Jul 2023 22:46:58 +0300 Subject: [PATCH] fix(collapsible): nuxt refresh page error (#224) --- packages/components/collapsible/package.json | 2 +- .../collapsible/src/collapsibleContentImpl.ts | 10 ++++++---- playground/nuxt3/package.json | 1 + playground/nuxt3/pages/collapsible.vue | 5 +++++ playground/nuxt3/pages/index.vue | 4 ++++ pnpm-lock.yaml | 7 +++++-- 6 files changed, 22 insertions(+), 7 deletions(-) create mode 100644 playground/nuxt3/pages/collapsible.vue diff --git a/packages/components/collapsible/package.json b/packages/components/collapsible/package.json index 47eabc473..e5f39a657 100644 --- a/packages/components/collapsible/package.json +++ b/packages/components/collapsible/package.json @@ -1,7 +1,7 @@ { "name": "@oku-ui/collapsible", "type": "module", - "version": "0.2.3", + "version": "0.2.4", "license": "MIT", "source": "src/index.ts", "funding": "https://github.com/sponsors/productdevbook", diff --git a/packages/components/collapsible/src/collapsibleContentImpl.ts b/packages/components/collapsible/src/collapsibleContentImpl.ts index 4d87dc0e8..8c098baa3 100644 --- a/packages/components/collapsible/src/collapsibleContentImpl.ts +++ b/packages/components/collapsible/src/collapsibleContentImpl.ts @@ -1,5 +1,5 @@ import type { PropType, Ref } from 'vue' -import { computed, defineComponent, h, nextTick, ref, toRefs, watch, watchEffect } from 'vue' +import { computed, defineComponent, h, nextTick, onMounted, ref, toRefs, watch, watchEffect } from 'vue' import type { ElementType, MergeProps, PrimitiveProps, RefElement } from '@oku-ui/primitive' import type { Scope } from '@oku-ui/provide' import { Primitive } from '@oku-ui/primitive' @@ -46,9 +46,11 @@ const CollapsibleContentImpl = defineComponent({ const isMountAnimationPreventedRef = ref(isOpen.value) const originalStylesRef = ref>() - watchEffect(async (onCleanup) => { - const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.value = false)) - onCleanup(() => cancelAnimationFrame(rAF)) + onMounted(() => { + watchEffect(async (onCleanup) => { + const rAF = requestAnimationFrame(() => (isMountAnimationPreventedRef.value = false)) + onCleanup(() => cancelAnimationFrame(rAF)) + }) }) watch([isOpen, isPresent], async () => { diff --git a/playground/nuxt3/package.json b/playground/nuxt3/package.json index b9638d9d7..8a3a7cb47 100644 --- a/playground/nuxt3/package.json +++ b/playground/nuxt3/package.json @@ -14,6 +14,7 @@ "@oku-ui/aspect-ratio": "workspace:^", "@oku-ui/avatar": "workspace:^", "@oku-ui/checkbox": "workspace:^", + "@oku-ui/collapsible": "workspace:^", "@oku-ui/label": "workspace:^", "@oku-ui/progress": "workspace:^", "@oku-ui/separator": "workspace:^" diff --git a/playground/nuxt3/pages/collapsible.vue b/playground/nuxt3/pages/collapsible.vue new file mode 100644 index 000000000..7e6be09bd --- /dev/null +++ b/playground/nuxt3/pages/collapsible.vue @@ -0,0 +1,5 @@ + diff --git a/playground/nuxt3/pages/index.vue b/playground/nuxt3/pages/index.vue index 45c6ff15c..55687ac98 100644 --- a/playground/nuxt3/pages/index.vue +++ b/playground/nuxt3/pages/index.vue @@ -36,6 +36,10 @@ const pages: Page[] = [ name: 'OkuPopper', path: '/popper', }, + { + name: 'OkuCollapsible', + path: '/collapsible', + }, ] diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cd6166966..347cdb31d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -165,7 +165,7 @@ importers: version: 1.2.1 vite: specifier: 4.3.5 - version: 4.3.5(@types/node@18.16.19) + version: 4.3.5(@types/node@18.16.18) vite-plugin-dts: specifier: ^3.3.0 version: 3.3.0(rollup@3.21.0)(typescript@5.1.6)(vite@4.3.5) @@ -483,6 +483,9 @@ importers: '@oku-ui/checkbox': specifier: workspace:^ version: link:../../packages/components/checkbox + '@oku-ui/collapsible': + specifier: workspace:^ + version: link:../../packages/components/collapsible '@oku-ui/label': specifier: workspace:^ version: link:../../packages/components/label @@ -547,7 +550,7 @@ importers: version: 0.25.1(rollup@3.21.0)(vue@3.3.4) vite: specifier: 4.3.5 - version: 4.3.5(@types/node@18.16.19) + version: 4.3.5(@types/node@18.16.18) vue-tsc: specifier: ^1.8.5 version: 1.8.5(typescript@5.1.6)