refactor: motion some changes (#33)

* feat: change the motion file

* feat: add useId

packages/vue/playground/src/App.vue

@@ -1,60 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { Motion } from '@oku-ui/motion'
-
-const rotate = ref(10)
+import Animation from './components/Animation.vue'
 </script>
 
 <template>
-  <Motion
-    :animate="{
-      rotate: `${rotate}deg`,
-      backgroundColor: 'var(--yellow)',
-    }" :transition="{
-      duration: 1,
-      rotate: { duration: 2 },
-    }"
-  />
-
-  <div
-    :style="{
-      marginTop: '50px',
-    }"
-  >
-    <button @click="rotate += 20">
-      Rotate
-    </button>
-  </div>
-
-  <Motion
-    :initial="{ opacity: 0, x: -50 }" :in-view="{
-      opacity: 1,
-      x: 0,
-      transition: {
-        delay: 0.5,
-        easing: [0.17, 0.55, 0.55, 1],
-        duration: 0.9,
-      },
-    }"
-  >
-    <p>
-      Lorem Ipsum
-    </p>
-  </Motion>
+  <Animation />
 </template>
 
 <style>
-body {
-  padding: 100px;
-}
-
-:root {
-  --yellow: #000
-}
-
-div {
-  width: 100px;
-  height: 100px;
-  border-radius: 10px;
-}
 </style>

packages/vue/playground/src/components/Animation.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { Motion } from '@oku-ui/motion'
+</script>
+
+<template>
+  <Motion
+    class="box"
+    :animate="{
+      x: 10,
+      backgroundColor: '#000',
+      boxShadow: '10px 10px 0 rgba(0, 2, 0, 0.2)',
+      position: 'fixed',
+      // transitionEnd: { display: 'none' },
+    }"
+  />
+</template>
+
+<style scoped>
+  .box{
+    width: 300px;
+    height: 300px;
+  }
+</style>

packages/vue/playground/src/components/Demo1.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Motion } from '@oku-ui/motion'
+
+const rotate = ref(10)
+</script>
+
+<template>
+  <Motion
+    :animate="{
+      rotate: `${rotate}deg`,
+      backgroundColor: 'var(--yellow)',
+    }" :transition="{
+      duration: 1,
+      rotate: { duration: 2 },
+    }"
+  />
+
+  <div
+    :style="{
+      marginTop: '50px',
+    }"
+  >
+    <button @click="rotate += 20">
+      Rotate
+    </button>
+  </div>
+
+  <Motion
+    :initial="{ opacity: 0, x: -50 }" :in-view="{
+      opacity: 1,
+      x: 0,
+      transition: {
+        delay: 0.5,
+        easing: [0.17, 0.55, 0.55, 1],
+        duration: 0.9,
+      },
+    }"
+  >
+    <p>
+      Lorem Ipsum
+    </p>
+  </Motion>
+</template>
+
+<style>
+body {
+  padding: 100px;
+}
+
+:root {
+  --yellow: #000
+}
+
+div {
+  width: 100px;
+  height: 100px;
+  border-radius: 10px;
+}
+</style>

packages/vue/src/component/Motion.vue → packages/vue/src/components/Motion.vue

@@ -51,17 +51,20 @@ const state = createMotionState(
   parentState,
 )
 
-provide(contextId, state)
-
-onMounted(() => {
-  const unmount = state.mount(root.value!)
+function updateState() {
   state.update({
     ...props,
     initial: props.initial === true
       ? undefined
       : props.initial,
   })
+}
+
+provide(contextId, state)
 
+onMounted(() => {
+  const unmount = state.mount(root.value!)
+  updateState()
   return unmount
 })
 
@@ -85,12 +88,7 @@ onUpdated(() => {
       style.set(root.value, key, styles[key])
   }
 
-  state.update({
-    ...props,
-    initial: props.initial === true
-      ? undefined
-      : props.initial,
-  })
+  updateState()
 })
 
 const initialStyles = createStyles(state.getTarget())

packages/vue/src/context.ts

@@ -1,5 +1,6 @@
 export const contextId = 'motion-state'
 export const presenceId = 'motion-presence'
+export const prefix = 'oku-motion'
 
 export interface PresenceState {
   initial?: boolean | undefined

packages/vue/src/hooks/useId.ts

@@ -0,0 +1,15 @@
+import { ref } from 'vue'
+import { prefix } from '../context'
+
+let count = 0
+
+function useId(deterministicId?: string): string {
+  const id = ref<string | undefined>()
+
+  if (!deterministicId)
+    id.value = id.value ?? String(count++)
+
+  return deterministicId || (id.value ? `${prefix}-${id.value}` : '')
+}
+
+export { useId }

packages/vue/src/hooks/useMotion.ts

@@ -0,0 +1 @@
+export function useMotion() {}

packages/vue/src/index.ts

@@ -1,5 +1,5 @@
-export { default as Motion } from './component/Motion.vue'
-export { default as Presence } from './component/Presence.vue'
-export { default as PresenceGroup } from './component/PresenceGroup.vue'
+export { default as Motion } from './components/Motion.vue'
+export { default as Presence } from './components/Presence.vue'
+export { default as PresenceGroup } from './components/PresenceGroup.vue'
 
 export * from '@motionone/dom'