Merge pull request #69 from tmg0/feat/better-type

Feat/better type
tmg0 · May 27, 2024 · d61a4a3 · d61a4a3
2 parents 06eb5c9 + 56f0ceb
commit d61a4a3
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 141 deletions.
diff --git a/src/components/hero-provider.tsx b/src/components/hero-provider.tsx
@@ -1,19 +1,6 @@
 import { type ExtractPropTypes, type PropType, defineComponent, ref } from 'vue'
 import { type HeroContext, useProvideHeroContext } from '../composables/use-hero-context'
-
-interface Transition {
-  delay: number
-  repeat: number
-  repeatDelay: number
-  repeatType: 'loop' | 'mirror' | 'reverse'
-  type: 'spring' | 'keyframes'
-  stiffness: number
-  damping: number
-  mass: number
-  bounce: number
-  duration: number
-  ease: string
-}
+import type { Transition } from '../types'
 
 const props = {
   transition: { type: Object as PropType<Partial<Transition>>, default: undefined },

diff --git a/src/components/hero.tsx b/src/components/hero.tsx
@@ -1,129 +1,6 @@
 import { type ExtractPropTypes, type PropType, defineComponent, ref } from 'vue'
 import { useHero } from '../composables/use-hero'
-
-interface Transition {
-  delay: number
-  repeat: number
-  repeatDelay: number
-  repeatType: 'loop' | 'mirror' | 'reverse'
-  type: 'spring' | 'keyframes'
-  stiffness: number
-  damping: number
-  mass: number
-  bounce: number
-  duration: number
-  ease: string
-}
-
-type HTMLTag =
-  | 'a'
-  | 'abbr'
-  | 'address'
-  | 'area'
-  | 'article'
-  | 'aside'
-  | 'audio'
-  | 'b'
-  | 'base'
-  | 'bdi'
-  | 'bdo'
-  | 'blockquote'
-  | 'body'
-  | 'br'
-  | 'button'
-  | 'canvas'
-  | 'caption'
-  | 'cite'
-  | 'code'
-  | 'col'
-  | 'colgroup'
-  | 'data'
-  | 'datalist'
-  | 'dd'
-  | 'del'
-  | 'details'
-  | 'dfn'
-  | 'dialog'
-  | 'div'
-  | 'dl'
-  | 'dt'
-  | 'em'
-  | 'embed'
-  | 'fieldset'
-  | 'figcaption'
-  | 'figure'
-  | 'footer'
-  | 'form'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'head'
-  | 'header'
-  | 'hr'
-  | 'html'
-  | 'i'
-  | 'iframe'
-  | 'img'
-  | 'input'
-  | 'ins'
-  | 'kbd'
-  | 'label'
-  | 'legend'
-  | 'li'
-  | 'link'
-  | 'main'
-  | 'map'
-  | 'mark'
-  | 'meta'
-  | 'meter'
-  | 'nav'
-  | 'noscript'
-  | 'object'
-  | 'ol'
-  | 'optgroup'
-  | 'option'
-  | 'output'
-  | 'p'
-  | 'picture'
-  | 'pre'
-  | 'progress'
-  | 'q'
-  | 'rp'
-  | 'rt'
-  | 'ruby'
-  | 's'
-  | 'samp'
-  | 'script'
-  | 'section'
-  | 'select'
-  | 'small'
-  | 'source'
-  | 'span'
-  | 'strong'
-  | 'style'
-  | 'sub'
-  | 'summary'
-  | 'sup'
-  | 'table'
-  | 'tbody'
-  | 'td'
-  | 'template'
-  | 'textarea'
-  | 'tfoot'
-  | 'th'
-  | 'thead'
-  | 'time'
-  | 'title'
-  | 'tr'
-  | 'track'
-  | 'u'
-  | 'ul'
-  | 'var'
-  | 'video'
-  | 'wbr'
+import type { HTMLTag, Transition } from '../types'
 
 const props = {
   as: { type: String as PropType<HTMLTag>, default: 'div' },

diff --git a/src/composables/use-hero.ts b/src/composables/use-hero.ts
@@ -5,12 +5,14 @@ import { defu } from 'defu'
 import omit from 'lodash.omit'
 import type { HeroProps } from '../components/hero'
 import { useHeroContext } from '../composables/use-hero-context'
+import type { Transition } from '../types'
 
 export type UseHeroProps = Omit<HeroProps, 'as'>
 
 export const defaultTransition = {
-  type: 'keyframes',
-  duration: 300,
+  type: 'spring',
+  stiffness: 600,
+  damping: 35,
 }
 
 export function useHero(domRef: Ref<any>, props: UseHeroProps) {
@@ -58,7 +60,7 @@ export function useHero(domRef: Ref<any>, props: UseHeroProps) {
 
     motionInstance = useMotion(domRef, {
       initial: omit(initial, props.ignore),
-      enter: omit(enter, props.ignore),
+      enter: omit(enter, props.ignore) as Transition,
     })
   })
 

diff --git a/src/types.ts b/src/types.ts
@@ -0,0 +1,133 @@
+export interface SpringTransition {
+  delay: number
+  repeat: number
+  repeatDelay: number
+  repeatType: 'loop' | 'mirror' | 'reverse'
+  type: 'spring'
+  stiffness: number
+  damping: number
+  mass: number
+  bounce: number
+  ease: string
+}
+
+export interface KeyframesTransition {
+  delay: number
+  repeat: number
+  repeatDelay: number
+  repeatType: 'loop' | 'mirror' | 'reverse'
+  type: 'keyframes'
+  duration: number
+}
+
+export type Transition = SpringTransition | KeyframesTransition
+
+export type HTMLTag =
+  | 'a'
+  | 'abbr'
+  | 'address'
+  | 'area'
+  | 'article'
+  | 'aside'
+  | 'audio'
+  | 'b'
+  | 'base'
+  | 'bdi'
+  | 'bdo'
+  | 'blockquote'
+  | 'body'
+  | 'br'
+  | 'button'
+  | 'canvas'
+  | 'caption'
+  | 'cite'
+  | 'code'
+  | 'col'
+  | 'colgroup'
+  | 'data'
+  | 'datalist'
+  | 'dd'
+  | 'del'
+  | 'details'
+  | 'dfn'
+  | 'dialog'
+  | 'div'
+  | 'dl'
+  | 'dt'
+  | 'em'
+  | 'embed'
+  | 'fieldset'
+  | 'figcaption'
+  | 'figure'
+  | 'footer'
+  | 'form'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'head'
+  | 'header'
+  | 'hr'
+  | 'html'
+  | 'i'
+  | 'iframe'
+  | 'img'
+  | 'input'
+  | 'ins'
+  | 'kbd'
+  | 'label'
+  | 'legend'
+  | 'li'
+  | 'link'
+  | 'main'
+  | 'map'
+  | 'mark'
+  | 'meta'
+  | 'meter'
+  | 'nav'
+  | 'noscript'
+  | 'object'
+  | 'ol'
+  | 'optgroup'
+  | 'option'
+  | 'output'
+  | 'p'
+  | 'picture'
+  | 'pre'
+  | 'progress'
+  | 'q'
+  | 'rp'
+  | 'rt'
+  | 'ruby'
+  | 's'
+  | 'samp'
+  | 'script'
+  | 'section'
+  | 'select'
+  | 'small'
+  | 'source'
+  | 'span'
+  | 'strong'
+  | 'style'
+  | 'sub'
+  | 'summary'
+  | 'sup'
+  | 'table'
+  | 'tbody'
+  | 'td'
+  | 'template'
+  | 'textarea'
+  | 'tfoot'
+  | 'th'
+  | 'thead'
+  | 'time'
+  | 'title'
+  | 'tr'
+  | 'track'
+  | 'u'
+  | 'ul'
+  | 'var'
+  | 'video'
+  | 'wbr'