@luanlu/mk-motion 1.0.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luanlu/mk-motion",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "A lightweight, modern frontend animation library",
   "type": "module",
   "main": "./dist/mk-motion.umd.cjs",
@@ -17,10 +17,31 @@
         "default": "./dist/mk-motion.umd.cjs"
       }
     },
-    "./css": "./dist/style.css"
+    "./css": "./dist/style.css",
+    "./vue": {
+      "import": {
+        "types": "./src/vue/index.ts",
+        "default": "./src/vue/index.ts"
+      }
+    },
+    "./nuxt": {
+      "import": {
+        "types": "./src/nuxt/module.ts",
+        "default": "./src/nuxt/module.ts"
+      }
+    },
+    "./vite": {
+      "import": {
+        "types": "./src/vite/plugin.ts",
+        "default": "./src/vite/plugin.ts"
+      }
+    }
   },
   "files": [
-    "dist"
+    "dist",
+    "src/vue",
+    "src/nuxt",
+    "src/vite"
   ],
   "publishConfig": {
     "access": "public"
@@ -49,9 +70,13 @@
     "url": "https://github.com/luanluuu/mk-motion/issues"
   },
   "homepage": "https://github.com/luanluuu/mk-motion#readme",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
   "devDependencies": {
     "typescript": "^5.4.0",
     "vite": "^5.2.0",
-    "vite-plugin-dts": "^3.8.0"
+    "vite-plugin-dts": "^3.8.0",
+    "vue": "^3.5.0"
   }
 }

package/src/nuxt/module.ts

@@ -0,0 +1,46 @@
+import { defineNuxtModule, addComponent, addImportsDir, createResolver } from '@nuxt/kit'
+
+export interface ModuleOptions {
+  prefix?: string
+}
+
+export default defineNuxtModule<ModuleOptions>({
+  meta: {
+    name: 'mk-motion',
+    configKey: 'mkMotion',
+    compatibility: {
+      nuxt: '^3.0.0',
+    },
+  },
+  defaults: {
+    prefix: 'Mk',
+  },
+  setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url)
+    const runtimeDir = resolver.resolve('./runtime')
+
+    // Auto-import components from src/vue/
+    const components = [
+      'Button',
+      'Card',
+      'Dialog',
+      'Input',
+      'Radio',
+      'Slider',
+      'Switch',
+    ]
+
+    for (const name of components) {
+      addComponent({
+        name: `${options.prefix}${name}`,
+        filePath: resolver.resolve('../../vue', `${name.toLowerCase()}.ts`),
+      })
+    }
+
+    // Auto-import composables
+    addImportsDir(resolver.resolve('../../vue/composables'))
+
+    // Inject CSS
+    nuxt.options.css.push('@luanlu/mk-motion/css')
+  },
+})

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

@@ -0,0 +1,54 @@
+import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
+import { createButton } from '../components/button/button.js'
+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.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, style: 'display:inline-block' })
+  },
+})

package/src/vue/card.ts

@@ -0,0 +1,53 @@
+import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
+import { createCard } from '../components/card/card.js'
+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, { 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())
+
+    return () => h('div', { ref: container })
+  },
+})

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 }
+}

package/src/vue/dialog.ts

@@ -0,0 +1,85 @@
+import { defineComponent, h, ref, watch, onMounted, onUnmounted, Teleport, Transition } from 'vue'
+
+export const MkDialog = defineComponent({
+  name: 'MkDialog',
+  props: {
+    modelValue: { type: Boolean, default: false },
+    title: { type: String, default: '' },
+    showClose: { type: Boolean, default: true },
+    showCancel: { type: Boolean, default: true },
+    center: { type: Boolean, default: false },
+    cancelText: { type: String, default: '取消' },
+    confirmText: { type: String, default: '确定' },
+  },
+  emits: ['update:modelValue', 'confirm', 'cancel', 'close'],
+  setup(props, { emit, slots }) {
+    const visible = ref(props.modelValue)
+    const overlayRef = ref<HTMLDivElement>()
+
+    watch(() => props.modelValue, (v) => {
+      visible.value = v
+    })
+
+    const close = () => {
+      visible.value = false
+      emit('update:modelValue', false)
+      emit('close')
+    }
+
+    const onConfirm = () => {
+      emit('confirm')
+      close()
+    }
+
+    const onCancel = () => {
+      emit('cancel')
+      close()
+    }
+
+    const onOverlayClick = (e: MouseEvent) => {
+      if (e.target === overlayRef.value) close()
+    }
+
+    const onKeydown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close()
+    }
+
+    onMounted(() => {
+      if (props.modelValue) visible.value = true
+    })
+
+    return () => h(Teleport, { to: 'body' }, [
+      h(Transition, { name: 'mk-dialog' }, {
+        default: () => visible.value
+          ? h('div', {
+              ref: overlayRef,
+              class: 'mk-dialog-overlay',
+              tabindex: -1,
+              onClick: onOverlayClick,
+              onKeydown,
+            }, [
+              h('div', {
+                class: ['mk-dialog', { 'is-center': props.center }],
+                role: 'dialog',
+                'aria-modal': 'true',
+              }, [
+                h('div', { class: 'mk-dialog__header' }, [
+                  h('span', { class: 'mk-dialog__title' }, props.title),
+                  props.showClose
+                    ? h('span', { class: 'mk-dialog__close', onClick: close }, '✕')
+                    : null,
+                ]),
+                h('div', { class: 'mk-dialog__body' }, slots.default?.()),
+                h('div', { class: 'mk-dialog__footer' }, [
+                  props.showCancel
+                    ? h('button', { class: 'mk-button', onClick: onCancel }, props.cancelText)
+                    : null,
+                  h('button', { class: 'mk-button mk-button--primary', onClick: onConfirm }, props.confirmText),
+                ]),
+              ]),
+            ])
+          : null,
+      }),
+    ])
+  },
+})

package/src/vue/index.ts

@@ -0,0 +1,11 @@
+// Components
+export { MkButton } from './button.js'
+export { MkCard } from './card.js'
+export { MkDialog } from './dialog.js'
+export { MkInput } from './input.js'
+export { MkRadio } from './radio.js'
+export { MkSlider } from './slider.js'
+export { MkSwitch } from './switch.js'
+
+// Composables
+export { useMkTheme, useMkMotion, useMkLoading, useMkMessage } from './composables/index.js'

package/src/vue/input.ts

@@ -0,0 +1,56 @@
+import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
+import { createInput } from '../components/input/input.js'
+import type { InputOptions } from '../components/input/input.js'
+
+export const MkInput = defineComponent({
+  name: 'MkInput',
+  props: {
+    modelValue: { type: String, default: '' },
+    type: { type: String, default: 'text' },
+    placeholder: { type: String, default: '' },
+    disabled: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
+    showPassword: { type: Boolean, default: false },
+    maxlength: { type: Number, default: undefined },
+    rows: { type: Number, default: undefined },
+    motion: { type: Object as () => InputOptions['motion'], default: undefined },
+  },
+  emits: ['update:modelValue', 'enter', 'focus', 'blur'],
+  setup(props, { emit }) {
+    const container = ref<HTMLDivElement>()
+    let instance: ReturnType<typeof createInput> | null = null
+
+    onMounted(() => {
+      if (!container.value) return
+      instance = createInput(container.value, {
+        type: props.type as InputOptions['type'],
+        placeholder: props.placeholder,
+        value: props.modelValue,
+        disabled: props.disabled,
+        clearable: props.clearable,
+        showPassword: props.showPassword,
+        maxlength: props.maxlength,
+        rows: props.rows,
+        motion: props.motion,
+        onInput: (v) => emit('update:modelValue', v),
+        onEnter: (v) => emit('enter', v),
+        onFocus: () => emit('focus'),
+        onBlur: () => emit('blur'),
+      })
+    })
+
+    watch(() => props.modelValue, (v) => {
+      if (instance && instance.input.value !== v) {
+        instance.input.value = v
+      }
+    })
+
+    watch(() => props.disabled, (v) => {
+      if (instance) instance.input.disabled = v
+    })
+
+    onUnmounted(() => instance?.destroy())
+
+    return () => h('div', { ref: container })
+  },
+})

package/src/vue/loading.ts

@@ -0,0 +1,23 @@
+import { showLoading, showFullscreenLoading } from '../components/loading/loading.js'
+import type { LoadingOptions } from '../components/loading/loading.js'
+
+export function useMkLoading() {
+  let cleanup: (() => void) | null = null
+
+  const start = (options: LoadingOptions = {}) => {
+    cleanup?.()
+    cleanup = showLoading(options)
+  }
+
+  const startFullscreen = (text?: string) => {
+    cleanup?.()
+    cleanup = showFullscreenLoading(text)
+  }
+
+  const stop = () => {
+    cleanup?.()
+    cleanup = null
+  }
+
+  return { start, startFullscreen, stop }
+}

package/src/vue/message.ts

@@ -0,0 +1,11 @@
+import { message, messageSuccess, messageError, messageWarning } from '../components/message/message.js'
+import type { MessageOptions } from '../components/message/message.js'
+
+export function useMkMessage() {
+  return {
+    show: message,
+    success: messageSuccess,
+    error: messageError,
+    warning: messageWarning,
+  }
+}

package/src/vue/radio.ts

@@ -0,0 +1,37 @@
+import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
+import { MkRadio as MkRadioClass } from '../components/form/radio.js'
+import type { RadioOptions } from '../components/form/radio.js'
+
+export const MkRadio = defineComponent({
+  name: 'MkRadio',
+  props: {
+    label: { type: String, default: '' },
+    value: { type: [String, Number], required: true },
+    checked: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    const container = ref<HTMLDivElement>()
+    let instance: InstanceType<typeof MkRadioClass> | null = null
+
+    const create = () => {
+      if (!container.value) return
+      instance?.destroy()
+      instance = new MkRadioClass(container.value, {
+        label: props.label,
+        value: props.value,
+        checked: props.checked,
+        disabled: props.disabled,
+        onChange: (v) => emit('change', v),
+      })
+    }
+
+    onMounted(create)
+    watch(() => props.checked, (v) => instance?.setChecked(v))
+    watch(() => [props.label, props.value, props.disabled], create, { deep: true })
+    onUnmounted(() => instance?.destroy())
+
+    return () => h('div', { ref: container })
+  },
+})

package/src/vue/slider.ts

@@ -0,0 +1,60 @@
+import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
+import { MkSlider as MkSliderClass } from '../components/form/slider.js'
+import type { SliderOptions } from '../components/form/slider.js'
+
+export const MkSlider = defineComponent({
+  name: 'MkSlider',
+  props: {
+    modelValue: { type: Number, default: 0 },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+    showValue: { type: Boolean, default: true },
+  },
+  emits: ['update:modelValue', 'change'],
+  setup(props, { emit }) {
+    const container = ref<HTMLDivElement>()
+    let instance: InstanceType<typeof MkSliderClass> | null = null
+
+    onMounted(() => {
+      if (!container.value) return
+      instance = new MkSliderClass(container.value, {
+        min: props.min,
+        max: props.max,
+        step: props.step,
+        value: props.modelValue,
+        showValue: props.showValue,
+        onChange: (v) => {
+          emit('update:modelValue', v)
+          emit('change', v)
+        },
+      })
+    })
+
+    watch(() => props.modelValue, (v) => {
+      if (instance && instance.value !== v) {
+        instance.value = v
+      }
+    })
+
+    watch(() => [props.min, props.max, props.step], () => {
+      if (!container.value) return
+      instance?.destroy()
+      instance = new MkSliderClass(container.value, {
+        min: props.min,
+        max: props.max,
+        step: props.step,
+        value: props.modelValue,
+        showValue: props.showValue,
+        onChange: (v) => {
+          emit('update:modelValue', v)
+          emit('change', v)
+        },
+      })
+    })
+
+    onUnmounted(() => instance?.destroy())
+
+    return () => h('div', { ref: container })
+  },
+})

package/src/vue/switch.ts

@@ -0,0 +1,39 @@
+import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
+import { createSwitch } from '../components/switch/switch.js'
+import type { SwitchOptions } from '../components/switch/switch.js'
+
+export const MkSwitch = defineComponent({
+  name: 'MkSwitch',
+  props: {
+    modelValue: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    activeText: { type: String, default: '' },
+    inactiveText: { type: String, default: '' },
+  },
+  emits: ['update:modelValue', 'change'],
+  setup(props, { emit }) {
+    const container = ref<HTMLDivElement>()
+    let instance: ReturnType<typeof createSwitch> | null = null
+
+    const create = () => {
+      if (!container.value) return
+      instance?.destroy()
+      instance = createSwitch(container.value, {
+        value: props.modelValue,
+        disabled: props.disabled,
+        activeText: props.activeText,
+        inactiveText: props.inactiveText,
+        onChange: (v) => {
+          emit('update:modelValue', v)
+          emit('change', v)
+        },
+      })
+    }
+
+    onMounted(create)
+    watch(() => [props.modelValue, props.disabled, props.activeText, props.inactiveText], create, { deep: true })
+    onUnmounted(() => instance?.destroy())
+
+    return () => h('div', { ref: container, style: 'display:inline-block' })
+  },
+})