docs: animation tweaks

BobbieGoede · BobbieGoede · commit 7663732a9591 · 2025-03-09T01:31:09.000+01:00
diff --git a/docs/components/content/ProseA.vue b/docs/components/content/ProseA.vue
@@ -1,7 +1,9 @@
 <template>
   <Motion
-    :initial="{ y: '1em', opacity: 0 }"
-    :visible-once="{ y: '0em', opacity: 1 }"
+    :initial="{ y: '0em', opacity: 1, scaleY: 1.15, scaleX: 0.95, transition: {damping:5,mass:1 } }"
+    :visible-once="{ y: '0em', opacity: 1,rotate: 0, scaleY: 1, scaleX: 1, transition: {damping:5,mass:1 } }"
+    :hovered="{scaleY: 1.05, scaleX: 1.05, rotate: -0.25, transition: {damping:5,mass:1 }}"
+    :tapped="{scaleY: 0.95, scaleX:0.95, rotate: 0.25, transition: {damping:5,mass:1 }}"
     is="span"
     style="display: inline-block"
   >
diff --git a/docs/components/content/ProseCode.vue b/docs/components/content/ProseCode.vue
@@ -1,8 +1,8 @@
 <template>
   <Motion
     is="code"
-    :initial="{ y: 100, opacity: 0 }"
-    :visible-once="{ y: 0, opacity: 1 }"
+    :initial="{ y: 100, opacity: 0, transition: { mass: .1, damping: 10 } }"
+    :visible-once="{ y: 0, opacity: 1, transition: { mass: .1, damping: 10 } }"
     ><slot
   /></Motion>
 </template>
diff --git a/docs/components/content/ProseH1.vue b/docs/components/content/ProseH1.vue
@@ -1,8 +1,8 @@
 <template>
   <Motion
     is="h1"
-    :initial="{ y: 100, opacity: 0 }"
-    :visible-once="{ y: 0, opacity: 1 }"
+    :initial="{ y: 100, opacity: 0, transition: { mass: .85, damping: 10 } }"
+    :visible-once="{ y: 0, opacity: 1, transition: { mass: .85, damping: 10 } }"
     ><slot
   /></Motion>
 </template>
diff --git a/docs/components/content/ProseH2.vue b/docs/components/content/ProseH2.vue
@@ -1,8 +1,8 @@
 <template>
   <Motion
     is="h2"
-    :initial="{ y: 100, opacity: 0 }"
-    :visible-once="{ y: 0, opacity: 1 }"
+    :initial="{ y: 100, opacity: 0, transition: { mass: .75, damping: 10 } }"
+    :visible-once="{ y: 0, opacity: 1, transition: { mass: .75, damping: 10 } }"
     ><slot
   /></Motion>
 </template>
diff --git a/docs/components/content/ProseH3.vue b/docs/components/content/ProseH3.vue
@@ -1,8 +1,8 @@
 <template>
   <Motion
     is="h3"
-    :initial="{ y: 100, opacity: 0 }"
-    :visible-once="{ y: 0, opacity: 1 }"
+    :initial="{ y: 100, opacity: 0, transition: { mass: .25, damping: 10 } }"
+    :visible-once="{ y: 0, opacity: 1, transition: { mass: .25, damping: 10 } }"
     ><slot
   /></Motion>
 </template>
diff --git a/docs/components/content/ProseH4.vue b/docs/components/content/ProseH4.vue
@@ -1,8 +1,8 @@
 <template>
   <Motion
     is="h4"
-    :initial="{ y: 100, opacity: 0 }"
-    :visible-once="{ y: 0, opacity: 1 }"
+    :initial="{ y: 100, opacity: 0, transition: { mass: .25, damping: 10 } }"
+    :visible-once="{ y: 0, opacity: 1, transition: { mass: .25, damping: 10 } }"
     ><slot
   /></Motion>
 </template>
diff --git a/docs/components/content/ProseH5.vue b/docs/components/content/ProseH5.vue
@@ -1,8 +1,8 @@
 <template>
   <Motion
     is="h5"
-    :initial="{ y: 100, opacity: 0 }"
-    :visible-once="{ y: 0, opacity: 1 }"
+    :initial="{ y: 100, opacity: 0, transition: { mass: .25, damping: 10 } }"
+    :visible-once="{ y: 0, opacity: 1, transition: { mass: .25, damping: 10 } }"
     ><slot
   /></Motion>
 </template>
diff --git a/docs/components/content/ProseP.vue b/docs/components/content/ProseP.vue
@@ -1,8 +1,8 @@
 <template>
   <Motion
     is="p"
-    :initial="{ y: 100, opacity: 0 }"
-    :visible-once="{ y: 0, opacity: 1 }"
+    :initial="{ y: 100, opacity: 0, transition: { mass: .5, damping: 10 } }"
+    :visible-once="{ y: 0, opacity: 1, transition: { mass: .5, damping: 10 } }"
     ><slot
   /></Motion>
 </template>
diff --git a/docs/components/content/ProsePre.vue b/docs/components/content/ProsePre.vue
@@ -1,8 +1,8 @@
 <template>
   <Motion
     is="pre"
-    :initial="{ y: 100, opacity: 0 }"
-    :visible-once="{ y: 0, opacity: 1 }"
+    :initial="{ y: 100, opacity: 0, transition: { mass: .1, damping: 10 } }"
+    :visible-once="{ y: 0, opacity: 1, transition: { mass: .1, damping: 10 } }"
     :class="$props.class"
     ><slot
   /></Motion>
diff --git a/docs/components/content/ProseUl.ts b/docs/components/content/ProseUl.ts
@@ -20,7 +20,7 @@ export default defineComponent({
           node.props['visible-once'] ??= {
             x: 0,
             opacity: 1,
-            transition: { delay: 100 * i },
+            transition: { delay: 50 * i },
           }
 
           // @ts-expect-error type conflict but seems to work fine
diff --git a/docs/components/global/CodeGroup.vue b/docs/components/global/CodeGroup.vue
@@ -0,0 +1,74 @@
+<template>
+  <div :class="ui.wrapper" v-bind="attrs">
+    <div :class="ui.header">
+      <Motion
+        is="button"
+        :initial="{scaleY: 1, scaleX: 1, transition: {damping:5,mass:.25 }}"
+        :hovered="{scaleY: 1.15, scaleX: .9, transition: {damping:5,mass:.25 }}"
+        :tapped="{scaleY: .5, scaleX:1.15, transition: {damping:5,mass:.25 }}"
+        v-for="(tab, index) in tabs"
+        :key="index"
+        tabindex="-1"
+        :class="[ui.tab.base, selectedIndex === index ? ui.tab.active : ui.tab.inactive]"
+        @click="selectedIndex = index"
+      >
+        <ProseCodeIcon :icon="tab.icon" :filename="tab.label" :class="ui.tab.icon.base" />
+        <span>{{ tab.label }}</span>
+      </Motion>
+    </div>
+
+    <component :is="selectedTab?.component" :key="selectedIndex" hide-header />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+
+const config = {
+  wrapper: 'relative [&>div:last-child]:!my-0 [&>div:last-child]:!static my-5',
+  header: 'flex items-center gap-1 border border-gray-200 dark:border-gray-700 border-b-0 rounded-t-md overflow-hidden p-2',
+  tab: {
+    base: 'px-2 py-1.5 focus:outline-none text-gray-700 dark:text-gray-200 text-sm rounded-md flex items-center gap-1.5',
+    active: 'bg-gray-100 dark:bg-gray-800',
+    inactive: 'hover:bg-gray-50 dark:hover:bg-gray-800/50',
+    icon: {
+      base: ''
+    }
+  }
+}
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const props = defineProps({
+  class: {
+    type: [String, Object, Array] as PropType<any>,
+    default: undefined
+  }
+})
+
+const slots = useSlots()
+const { ui, attrs } = useUI('content.codeGroup', undefined, config, toRef(props, 'class'), true)
+
+const selectedIndex = ref(0)
+defineExpose({ selectedIndex })
+
+function transformSlot (slot: any, index: number) {
+  if (typeof slot.type === 'symbol') {
+    return slot.children?.map(transformSlot)
+  }
+
+  return {
+    label: slot.props?.filename || slot.props?.label || `${index}`,
+    icon: slot.props?.icon,
+    component: slot
+  }
+}
+
+// Computed
+
+const tabs = computed(() => slots.default?.()?.flatMap(transformSlot).filter(Boolean) || [])
+
+const selectedTab = computed(() => tabs.value.find((_, index) => index === selectedIndex.value))
+</script>
diff --git a/docs/pages/docs/[...slug].vue b/docs/pages/docs/[...slug].vue
@@ -52,8 +52,8 @@ const UPageHeaderComponent = resolveComponent('UPageHeader')
   <UPage>
     <Motion
       :is="UPageHeaderComponent"
-      :initial="{ y: 100, opacity: 0 }"
-      :visible-once="{ y: 0, opacity: 1 }"
+      :initial="{ y: 100, opacity: 0, transition: { mass: .25, damping: 10 } }"
+    :visible-once="{ y: 0, opacity: 1, transition: { mass: .25, damping: 10 } }"
       :title="page.title"
       :description="page.description"
       :links="page.links"

Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ export default defineComponent({`
`20`	`20`	`node.props['visible-once'] ??= {`
`21`	`21`	`x: 0,`
`22`	`22`	`opacity: 1,`
`23`		`- transition: { delay: 100 * i },`
	`23`	`+ transition: { delay: 50 * i },`
`24`	`24`	`}`
`25`	`25`
`26`	`26`	`// @ts-expect-error type conflict but seems to work fine`