fix(collapsible): nuxt refresh page error (#224)

oku-ui · Jul 19, 2023 · 1ae2e0a · 1ae2e0a
1 parent fb33249
commit 1ae2e0a
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 7 deletions.
diff --git 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
@@ -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<Record<string, string>>()
 
-    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
@@ -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
@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <CollapsibleDemo allshow />
+  </div>
+</template>
diff --git 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',
+  },
 ]
 </script>
 

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml