@luanlu/mk-motion 1.1.0 → 1.2.1

package/src/transitions/loading.ts

@@ -0,0 +1,95 @@
+export interface LoadingOptions {
+  size?: number
+  color?: string
+  thickness?: number
+}
+
+const DEFAULT_LOADING: Required<LoadingOptions> = {
+  size: 40,
+  color: '#38bdf8',
+  thickness: 3,
+}
+
+/**
+ * 在元素上显示 Element Plus 风格的加载旋转器
+ */
+export function showLoading(
+  element: HTMLElement | string,
+  options: LoadingOptions = {}
+): () => void {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('showLoading: element not found')
+
+  const opts = { ...DEFAULT_LOADING, ...options }
+
+  el.style.position = 'relative'
+
+  const mask = document.createElement('div')
+  mask.className = 'mk-loading-mask'
+  mask.style.cssText = `
+    position: absolute;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+    border-radius: inherit;
+  `
+
+  const spinner = document.createElement('div')
+  spinner.className = 'mk-transition mk-spin'
+  spinner.style.cssText = `
+    width: ${opts.size}px;
+    height: ${opts.size}px;
+    border: ${opts.thickness}px solid rgba(255,255,255,0.1);
+    border-top-color: ${opts.color};
+    border-radius: 50%;
+  `
+
+  mask.appendChild(spinner)
+  el.appendChild(mask)
+
+  return () => {
+    mask.remove()
+  }
+}
+
+/**
+ * 创建全屏加载
+ */
+export function fullscreenLoading(options: LoadingOptions = {}): () => void {
+  const opts = { ...DEFAULT_LOADING, ...options }
+
+  const mask = document.createElement('div')
+  mask.style.cssText = `
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+  `
+
+  const spinner = document.createElement('div')
+  spinner.className = 'mk-transition mk-spin'
+  spinner.style.cssText = `
+    width: ${opts.size}px;
+    height: ${opts.size}px;
+    border: ${opts.thickness}px solid rgba(255,255,255,0.15);
+    border-top-color: ${opts.color};
+    border-radius: 50%;
+  `
+
+  mask.appendChild(spinner)
+  document.body.appendChild(mask)
+
+  return () => {
+    mask.remove()
+  }
+}

package/src/transitions/parallax.ts

@@ -0,0 +1,60 @@
+export interface ParallaxOptions {
+  speed?: number           // 视差速度，0.1~1
+  direction?: 'vertical' | 'horizontal'
+}
+
+const DEFAULT_PARALLAX: Required<ParallaxOptions> = {
+  speed: 0.3,
+  direction: 'vertical',
+}
+
+/**
+ * 给元素添加视差滚动效果
+ */
+export function parallax(
+  element: HTMLElement | string,
+  options: ParallaxOptions = {}
+): () => void {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('parallax: element not found')
+
+  const opts = { ...DEFAULT_PARALLAX, ...options }
+
+  const onScroll = () => {
+    const rect = el.getBoundingClientRect()
+    const windowHeight = window.innerHeight
+    const centerOffset = (rect.top + rect.height / 2 - windowHeight / 2)
+    const offset = centerOffset * opts.speed
+
+    if (opts.direction === 'vertical') {
+      el.style.transform = `translateY(${offset}px)`
+    } else {
+      el.style.transform = `translateX(${offset}px)`
+    }
+  }
+
+  window.addEventListener('scroll', onScroll, { passive: true })
+  onScroll()
+
+  return () => {
+    window.removeEventListener('scroll', onScroll)
+    el.style.transform = ''
+  }
+}
+
+/**
+ * 批量给多个元素添加视差，支持不同速度
+ */
+export function parallaxGroup(
+  items: Array<{ selector: string; speed?: number; direction?: 'vertical' | 'horizontal' }>
+): () => void {
+  const cleaners = items.map((item) =>
+    parallax(item.selector, { speed: item.speed, direction: item.direction })
+  )
+
+  return () => cleaners.forEach((fn) => fn())
+}

package/src/transitions/shimmer.ts

@@ -0,0 +1,105 @@
+export interface ShimmerOptions {
+  duration?: number        //  shimmer 循环周期
+  color?: string           //  shimmer 颜色
+  angle?: number           //  角度 deg
+}
+
+const DEFAULT_SHIMMER: Required<ShimmerOptions> = {
+  duration: 1500,
+  color: 'rgba(255,255,255,0.25)',
+  angle: 100,
+}
+
+/**
+ * 给元素添加骨架屏 shimmer 效果
+ */
+export function shimmer(
+  element: HTMLElement | string,
+  options: ShimmerOptions = {}
+): () => void {
+  const el =
+    typeof element === 'string'
+      ? document.querySelector<HTMLElement>(element)!
+      : element
+
+  if (!el) throw new Error('shimmer: element not found')
+
+  const opts = { ...DEFAULT_SHIMMER, ...options }
+
+  el.style.background = '#1e293b'
+  el.style.position = 'relative'
+  el.style.overflow = 'hidden'
+
+  const shimmerEl = document.createElement('div')
+  shimmerEl.style.cssText = `
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(${opts.angle}deg, transparent 30%, ${opts.color} 50%, transparent 70%);
+    background-size: 200% 100%;
+    animation: mk-shimmer ${opts.duration}ms infinite linear;
+    pointer-events: none;
+  `
+
+  // 检查是否已有 shimmer keyframes
+  if (!document.getElementById('mk-shimmer-style')) {
+    const style = document.createElement('style')
+    style.id = 'mk-shimmer-style'
+    style.textContent = `
+      @keyframes mk-shimmer {
+        0% { background-position: 200% 0; }
+        100% { background-position: -200% 0; }
+      }
+    `
+    document.head.appendChild(style)
+  }
+
+  el.appendChild(shimmerEl)
+
+  return () => {
+    shimmerEl.remove()
+    el.style.background = ''
+    el.style.position = ''
+    el.style.overflow = ''
+  }
+}
+
+/**
+ * 骨架屏预设：生成若干 shimmer 占位条
+ */
+export function skeleton(
+  container: HTMLElement | string,
+  lines: number = 3,
+  options?: ShimmerOptions
+): () => void {
+  const el =
+    typeof container === 'string'
+      ? document.querySelector<HTMLElement>(container)!
+      : container
+
+  if (!el) throw new Error('skeleton: container not found')
+
+  const original = el.innerHTML
+  el.innerHTML = ''
+  el.style.display = 'flex'
+  el.style.flexDirection = 'column'
+  el.style.gap = '12px'
+
+  const cleaners: (() => void)[] = []
+
+  for (let i = 0; i < lines; i++) {
+    const line = document.createElement('div')
+    line.style.height = i === 0 ? '24px' : '16px'
+    line.style.width = i === lines - 1 ? '60%' : '100%'
+    line.style.borderRadius = '4px'
+    el.appendChild(line)
+    cleaners.push(shimmer(line, options))
+  }
+
+  return () => {
+    cleaners.forEach((fn) => fn())
+    el.innerHTML = original
+    el.style.display = ''
+    el.style.flexDirection = ''
+    el.style.gap = ''
+  }
+}

package/src/transitions/toast.ts

@@ -0,0 +1,151 @@
+export interface ToastOptions {
+  duration?: number        // 显示时长
+  type?: 'info' | 'success' | 'warning' | 'error'
+  position?: 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left'
+}
+
+const DEFAULT_TOAST: Required<ToastOptions> = {
+  duration: 3000,
+  type: 'info',
+  position: 'top',
+}
+
+const TYPE_COLORS: Record<string, { bg: string; icon: string }> = {
+  info:    { bg: '#38bdf8', icon: 'ℹ️' },
+  success: { bg: '#34d399', icon: '✅' },
+  warning: { bg: '#fbbf24', icon: '⚠️' },
+  error:   { bg: '#f87171', icon: '❌' },
+}
+
+const POSITION_STYLES: Record<string, string> = {
+  top:          'top:20px;left:50%;transform:translateX(-50%)',
+  'top-right':  'top:20px;right:20px',
+  'top-left':   'top:20px;left:20px',
+  bottom:       'bottom:20px;left:50%;transform:translateX(-50%)',
+  'bottom-right':'bottom:20px;right:20px',
+  'bottom-left':'bottom:20px;left:20px',
+}
+
+/**
+ * 显示一条 Toast 消息（类似 Element Plus Message）
+ */
+export function toast(message: string, options: ToastOptions = {}): () => void {
+  const opts = { ...DEFAULT_TOAST, ...options }
+  const color = TYPE_COLORS[opts.type]
+  const pos = POSITION_STYLES[opts.position]
+
+  const el = document.createElement('div')
+  el.style.cssText = `
+    position: fixed;
+    ${pos};
+    background: ${color.bg};
+    color: #fff;
+    padding: 12px 20px;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    z-index: 9999;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+    opacity: 0;
+    transform: translateY(-20px);
+    transition: all 0.3s ease;
+    pointer-events: none;
+  `
+  el.innerHTML = `<span>${color.icon}</span><span>${message}</span>`
+  document.body.appendChild(el)
+
+  requestAnimationFrame(() => {
+    el.style.opacity = '1'
+    el.style.transform = opts.position.startsWith('bottom')
+      ? 'translateY(0)'
+      : 'translateY(0)'
+  })
+
+  const timer = setTimeout(() => {
+    el.style.opacity = '0'
+    el.style.transform = opts.position.startsWith('bottom')
+      ? 'translateY(20px)'
+      : 'translateY(-20px)'
+    setTimeout(() => el.remove(), 300)
+  }, opts.duration)
+
+  return () => {
+    clearTimeout(timer)
+    el.remove()
+  }
+}
+
+/**
+ * 显示成功消息
+ */
+export function toastSuccess(message: string, options?: Omit<ToastOptions, 'type'>): () => void {
+  return toast(message, { ...options, type: 'success' })
+}
+
+/**
+ * 显示错误消息
+ */
+export function toastError(message: string, options?: Omit<ToastOptions, 'type'>): () => void {
+  return toast(message, { ...options, type: 'error' })
+}
+
+/**
+ * 显示警告消息
+ */
+export function toastWarning(message: string, options?: Omit<ToastOptions, 'type'>): () => void {
+  return toast(message, { ...options, type: 'warning' })
+}
+
+/**
+ * 显示通知（类似 Element Plus Notification，带标题）
+ */
+export function notify(
+  title: string,
+  message: string,
+  options: ToastOptions = {}
+): () => void {
+  const opts = { ...DEFAULT_TOAST, ...options }
+  const color = TYPE_COLORS[opts.type]
+  const pos = POSITION_STYLES[opts.position]
+
+  const el = document.createElement('div')
+  el.style.cssText = `
+    position: fixed;
+    ${pos};
+    background: #1e293b;
+    border-left: 4px solid ${color.bg};
+    color: #e2e8f0;
+    padding: 16px 20px;
+    border-radius: 8px;
+    font-size: 0.9rem;
+    z-index: 9999;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+    min-width: 280px;
+    opacity: 0;
+    transform: translateX(30px);
+    transition: all 0.3s ease;
+  `
+  el.innerHTML = `
+    <div style="font-weight:600;margin-bottom:4px;color:${color.bg};">${color.icon} ${title}</div>
+    <div style="color:#94a3b8;font-size:0.85rem;">${message}</div>
+  `
+  document.body.appendChild(el)
+
+  requestAnimationFrame(() => {
+    el.style.opacity = '1'
+    el.style.transform = 'translateX(0)'
+  })
+
+  const timer = setTimeout(() => {
+    el.style.opacity = '0'
+    el.style.transform = 'translateX(30px)'
+    setTimeout(() => el.remove(), 300)
+  }, opts.duration)
+
+  return () => {
+    clearTimeout(timer)
+    el.remove()
+  }
+}

package/src/types.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: string
+  export default content
+}

package/src/vite/plugin.ts

@@ -0,0 +1,45 @@
+import type { Plugin } from 'vite'
+
+export interface MkMotionOptions {
+  components?: string[]
+  motion?: boolean
+  theme?: 'dark' | 'light' | 'auto'
+}
+
+export function mkMotion(options: MkMotionOptions = {}): Plugin {
+  const components = options.components || [
+    'Button', 'Card', 'Dialog', 'Input', 'Radio', 'Slider', 'Switch',
+  ]
+
+  const cssImports: string[] = []
+  if (options.theme === 'dark') {
+    cssImports.push(`import '@luanlu/mk-motion/css'`)
+  }
+
+  return {
+    name: 'mk-motion',
+    enforce: 'pre',
+    transform(code, id) {
+      // Only process Vue SFC script blocks
+      if (!id.endsWith('.vue')) return code
+
+      // If component is used but not imported, add auto-import
+      const used = components.filter((name) => {
+        const tag = `Mk${name}`
+        return code.includes(`<${tag}`) || code.includes(`<${tag} `)
+      })
+
+      if (used.length === 0) return code
+
+      const imports = used
+        .map((name) => `import { Mk${name} } from '@luanlu/mk-motion/vue'`)
+        .join('\n')
+
+      if (code.includes('import { ' + used.map((n) => `Mk${n}`).join(', ') + ' }')) {
+        return code
+      }
+
+      return imports + '\n' + code
+    },
+  }
+}

package/src/vue/button.ts

@@ -5,31 +5,50 @@ import type { ButtonOptions } from '../components/button/button.js'
 export const MkButton = defineComponent({
   name: 'MkButton',
   props: {
-
-
+    type: { type: String as () => ButtonOptions['type'], default: 'default' },
+    size: { type: String as () => ButtonOptions['size'], default: 'default' },
+    plain: { type: Boolean, default: false },
+    round: { type: Boolean, default: false },
+    circle: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    icon: { type: String, default: '' },
+    motion: { type: Object as () => ButtonOptions['motion'], default: undefined },
   },
-
+  emits: ['click'],
   setup(props, { emit, slots }) {
     const container = ref<HTMLDivElement>()
     let instance: ReturnType<typeof createButton> | null = null
 
+    const getText = () => {
+      const slotContent = slots.default?.()[0]?.children
+      return (typeof slotContent === 'string' ? slotContent : '') || ''
+    }
+
     const create = () => {
       if (!container.value) return
       instance?.destroy()
       instance = createButton(container.value, {
-
-
-
+        type: props.type,
+        size: props.size,
+        plain: props.plain,
+        round: props.round,
+        circle: props.circle,
+        disabled: props.disabled,
+        loading: props.loading,
+        text: getText(),
+        icon: props.icon || undefined,
+        motion: props.motion,
+        onClick: (e) => emit('click', e),
       })
     }
 
     onMounted(create)
-
-    watch(() => props.timeout, (v) => instance?.setTimeout(v))
+    watch(() => [props.type, props.size, props.plain, props.round, props.circle, props.icon, props.motion], create, { deep: true })
     watch(() => props.loading, (v) => instance?.setLoading(v))
     watch(() => props.disabled, (v) => instance?.setDisabled(v))
     onUnmounted(() => instance?.destroy())
 
-    return () => h('div', { ref: container })
+    return () => h('div', { ref: container, style: 'display:inline-block' })
   },
 })

package/src/vue/card.ts

@@ -5,26 +5,46 @@ import type { CardOptions } from '../components/card/card.js'
 export const MkCard = defineComponent({
   name: 'MkCard',
   props: {
-
-
+    shadow: { type: String as () => CardOptions['shadow'], default: undefined },
+    loading: { type: Boolean, default: false },
+    image: { type: String, default: '' },
+    motion: { type: Object as () => CardOptions['motion'], default: undefined },
   },
-
-  setup(props, { emit, slots }) {
+  setup(props, { slots }) {
     const container = ref<HTMLDivElement>()
     let instance: ReturnType<typeof createCard> | null = null
 
+    const getTitle = () => {
+      const slot = slots.header?.()[0]?.children
+      return typeof slot === 'string' ? slot : ''
+    }
+
+    const getBody = () => {
+      const slot = slots.default?.()[0]?.children
+      return typeof slot === 'string' ? slot : ''
+    }
+
+    const getFooter = () => {
+      const slot = slots.footer?.()[0]?.children
+      return typeof slot === 'string' ? slot : ''
+    }
+
     const create = () => {
       if (!container.value) return
       instance?.destroy()
       instance = createCard(container.value, {
-
-
-
+        title: getTitle(),
+        body: getBody(),
+        footer: getFooter(),
+        image: props.image || undefined,
+        shadow: props.shadow,
+        loading: props.loading,
+        motion: props.motion,
       })
     }
 
     onMounted(create)
-
+    watch(() => [props.shadow, props.image, props.loading, props.motion], create, { deep: true })
     watch(() => props.loading, (v) => instance?.setLoading(v))
     onUnmounted(() => instance?.destroy())
 

package/src/vue/composables/index.ts

@@ -0,0 +1,4 @@
+export { useMkTheme } from './useTheme.js'
+export { useMkMotion } from './useMotion.js'
+export { useMkLoading } from './useLoading.js'
+export { useMkMessage } from './useMessage.js'

package/src/vue/composables/useLoading.ts

@@ -0,0 +1,12 @@
+import {
+  showLoading,
+  showFullscreenLoading,
+} from '../../components/loading/loading.js'
+import type { LoadingOptions } from '../../components/loading/loading.js'
+
+export function useMkLoading() {
+  return {
+    showLoading: (options?: LoadingOptions) => showLoading(options),
+    showFullscreenLoading: (text?: string) => showFullscreenLoading(text),
+  }
+}

package/src/vue/composables/useMessage.ts

@@ -0,0 +1,16 @@
+import {
+  message,
+  messageSuccess,
+  messageError,
+  messageWarning,
+} from '../../components/message/message.js'
+import type { MessageOptions } from '../../components/message/message.js'
+
+export function useMkMessage() {
+  return {
+    message: (msg: string, options?: MessageOptions) => message(msg, options),
+    messageSuccess: (msg: string, options?: Omit<MessageOptions, 'type'>) => messageSuccess(msg, options),
+    messageError: (msg: string, options?: Omit<MessageOptions, 'type'>) => messageError(msg, options),
+    messageWarning: (msg: string, options?: Omit<MessageOptions, 'type'>) => messageWarning(msg, options),
+  }
+}

package/src/vue/composables/useMotion.ts

@@ -0,0 +1,19 @@
+import { onMounted, onUnmounted } from 'vue'
+import type { Ref } from 'vue'
+import { Animator } from '../../core/animator.js'
+import type { MotionOptions } from '../../motion/component-motion.js'
+
+export function useMkMotion(elRef: Ref<HTMLElement | undefined>, _options?: MotionOptions) {
+  let animator: Animator | null = null
+  onMounted(() => {
+    if (!elRef.value) return
+    animator = new Animator(elRef.value)
+  })
+  onUnmounted(() => {
+    animator?.reset()
+  })
+  return {
+    animate: (name: string, opts?: any) => animator?.animate(name, opts),
+    reset: () => animator?.reset(),
+  }
+}

package/src/vue/composables/useTheme.ts

@@ -0,0 +1,12 @@
+import { ref } from 'vue'
+
+const isDark = ref(false)
+
+export function useMkTheme() {
+  const setTheme = (dark: boolean) => {
+    isDark.value = dark
+    document.documentElement.setAttribute('data-mk-theme', dark ? 'dark' : 'light')
+  }
+  const toggle = () => setTheme(!isDark.value)
+  return { isDark, setTheme, toggle }
+}