@luanlu/mk-motion 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luanlu/mk-motion",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A lightweight, modern frontend animation library",
   "type": "module",
   "main": "./dist/mk-motion.umd.cjs",
@@ -23,11 +23,25 @@
         "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",
-    "src/vue"
+    "src/vue",
+    "src/nuxt",
+    "src/vite"
   ],
   "publishConfig": {
     "access": "public"

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

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

package/src/vue/dialog.ts

@@ -1,33 +1,85 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createDialog } from '../components/dialog/dialog.js'
-import type { DialogOptions } from '../components/dialog/dialog.js'
+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 container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createDialog> | null = null
+    const visible = ref(props.modelValue)
+    const overlayRef = ref<HTMLDivElement>()
+
+    watch(() => props.modelValue, (v) => {
+      visible.value = v
+    })
 
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createDialog(container.value, {
+    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()
     }
 
-    onMounted(create)
+    const onKeydown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close()
+    }
 
-    watch(() => props.timeout, (v) => instance?.setTimeout(v))
-    onUnmounted(() => instance?.destroy())
+    onMounted(() => {
+      if (props.modelValue) visible.value = true
+    })
 
-    return () => h('div', { ref: container })
+    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

@@ -1,28 +1,11 @@
-export { MkAlert } from './alert.js'
-export { MkAvatar } from './avatar.js'
-export { MkBreadcrumb } from './breadcrumb.js'
+// Components
 export { MkButton } from './button.js'
 export { MkCard } from './card.js'
-export { MkCheckbox } from './checkbox.js'
-export { MkCollapse } from './collapse.js'
 export { MkDialog } from './dialog.js'
-export { MkDivider } from './divider.js'
-export { MkDrawer } from './drawer.js'
-export { MkEmpty } from './empty.js'
 export { MkInput } from './input.js'
-export { useMkLoading } from './loading.js'
-export { MkMenu } from './menu.js'
-export { useMkMessage } from './message.js'
-export { MkPopover } from './popover.js'
-export { MkProgress } from './progress.js'
 export { MkRadio } from './radio.js'
-export { MkRow } from './row.js'
-export { MkSelect } from './select.js'
 export { MkSlider } from './slider.js'
-export { MkSpace } from './space.js'
-export { MkSteps } from './steps.js'
 export { MkSwitch } from './switch.js'
-export { MkTable } from './table.js'
-export { MkTabs } from './tabs.js'
-export { MkTag } from './tag.js'
-export { MkTooltip } from './tooltip.js'
+
+// Composables
+export { useMkTheme, useMkMotion, useMkLoading, useMkMessage } from './composables/index.js'

package/src/vue/input.ts

@@ -5,25 +5,49 @@ 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 },
   },
-
-  setup(props, { emit, slots }) {
+  emits: ['update:modelValue', 'enter', 'focus', 'blur'],
+  setup(props, { emit }) {
     const container = ref<HTMLDivElement>()
     let instance: ReturnType<typeof createInput> | null = null
 
-    const create = () => {
+    onMounted(() => {
       if (!container.value) return
-      instance?.destroy()
       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
+      }
+    })
 
-    onMounted(create)
+    watch(() => props.disabled, (v) => {
+      if (instance) instance.input.disabled = v
+    })
 
     onUnmounted(() => instance?.destroy())
 

package/src/vue/slider.ts

@@ -5,13 +5,13 @@ 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 },
-    modelValue: { type: Number, default: 0 },
     showValue: { type: Boolean, default: true },
   },
-  emits: ['change', 'update:modelValue'],
+  emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
     const container = ref<HTMLDivElement>()
     let instance: InstanceType<typeof MkSliderClass> | null = null
@@ -25,14 +25,32 @@ export const MkSlider = defineComponent({
         value: props.modelValue,
         showValue: props.showValue,
         onChange: (v) => {
-          emit('change', v)
           emit('update:modelValue', v)
+          emit('change', v)
         },
       })
     })
 
     watch(() => props.modelValue, (v) => {
-      if (instance) instance.value = 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())

package/src/vue/switch.ts

@@ -5,11 +5,13 @@ 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: '' },
   },
-
-  setup(props, { emit, slots }) {
+  emits: ['update:modelValue', 'change'],
+  setup(props, { emit }) {
     const container = ref<HTMLDivElement>()
     let instance: ReturnType<typeof createSwitch> | null = null
 
@@ -17,16 +19,21 @@ export const MkSwitch = defineComponent({
       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 })
+    return () => h('div', { ref: container, style: 'display:inline-block' })
   },
 })

package/src/vue/alert.ts

@@ -1,32 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createAlert } from '../components/alert/alert.js'
-import type { AlertOptions } from '../components/alert/alert.js'
-
-export const MkAlert = defineComponent({
-  name: 'MkAlert',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createAlert> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createAlert(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/avatar.ts

@@ -1,34 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createAvatar } from '../components/avatar/avatar.js'
-import type { AvatarOptions } from '../components/avatar/avatar.js'
-
-export const MkAvatar = defineComponent({
-  name: 'MkAvatar',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createAvatar> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createAvatar(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    watch(() => props.src, (v) => instance?.setSrc(v))
-    watch(() => props.text, (v) => instance?.setText(v))
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/breadcrumb.ts

@@ -1,32 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createBreadcrumb } from '../components/breadcrumb/breadcrumb.js'
-import type { BreadcrumbOptions } from '../components/breadcrumb/breadcrumb.js'
-
-export const MkBreadcrumb = defineComponent({
-  name: 'MkBreadcrumb',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createBreadcrumb> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createBreadcrumb(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/checkbox.ts

@@ -1,32 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createCheckbox } from '../components/form/checkbox.js'
-import type { CheckboxOptions } from '../components/form/checkbox.js'
-
-export const MkCheckbox = defineComponent({
-  name: 'MkCheckbox',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createCheckbox> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createCheckbox(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/collapse.ts

@@ -1,33 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createCollapse } from '../components/collapse/collapse.js'
-import type { CollapsePanelOptions } from '../components/collapse/collapse.js'
-
-export const MkCollapse = defineComponent({
-  name: 'MkCollapse',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createCollapse> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createCollapse(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    watch(() => props.activeKeys, (v) => instance?.setActiveKeys(v))
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/divider.ts

@@ -1,32 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createDivider } from '../components/layout/divider.js'
-import type { DividerOptions } from '../components/layout/divider.js'
-
-export const MkDivider = defineComponent({
-  name: 'MkDivider',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createDivider> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createDivider(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/drawer.ts

@@ -1,33 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createDrawer } from '../components/drawer/drawer.js'
-import type { DrawerOptions } from '../components/drawer/drawer.js'
-
-export const MkDrawer = defineComponent({
-  name: 'MkDrawer',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createDrawer> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createDrawer(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    watch(() => props.timeout, (v) => instance?.setTimeout(v))
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/empty.ts

@@ -1,33 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createEmpty } from '../components/empty/empty.js'
-import type { EmptyOptions } from '../components/empty/empty.js'
-
-export const MkEmpty = defineComponent({
-  name: 'MkEmpty',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createEmpty> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createEmpty(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    watch(() => props.description, (v) => instance?.setDescription(v))
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/menu.ts

@@ -1,33 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createMenu } from '../components/menu/menu.js'
-import type { MenuOptions } from '../components/menu/menu.js'
-
-export const MkMenu = defineComponent({
-  name: 'MkMenu',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createMenu> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createMenu(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    watch(() => props.upKeyboard, (v) => instance?.setupKeyboard(v))
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/popover.ts

@@ -1,34 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createPopover } from '../components/popover/popover.js'
-import type { PopoverOptions } from '../components/popover/popover.js'
-
-export const MkPopover = defineComponent({
-  name: 'MkPopover',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createPopover> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createPopover(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    watch(() => props.timeout, (v) => instance?.setTimeout(v))
-    watch(() => props.content, (v) => instance?.setContent(v))
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/progress.ts

@@ -1,33 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createProgress } from '../components/progress/progress.js'
-import type { ProgressOptions } from '../components/progress/progress.js'
-
-export const MkProgress = defineComponent({
-  name: 'MkProgress',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createProgress> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createProgress(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    watch(() => props.percent, (v) => instance?.setPercent(v))
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/row.ts

@@ -1,32 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createRow } from '../components/layout/row.js'
-import type { RowOptions } from '../components/layout/row.js'
-
-export const MkRow = defineComponent({
-  name: 'MkRow',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createRow> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createRow(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/select.ts

@@ -1,33 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createSelect } from '../components/form/select.js'
-import type { SelectOptions } from '../components/form/select.js'
-
-export const MkSelect = defineComponent({
-  name: 'MkSelect',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createSelect> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createSelect(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    watch(() => props.value, (v) => instance?.setValue(v))
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/space.ts

@@ -1,32 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createSpace } from '../components/layout/space.js'
-import type { SpaceOptions } from '../components/layout/space.js'
-
-export const MkSpace = defineComponent({
-  name: 'MkSpace',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createSpace> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createSpace(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/steps.ts

@@ -1,33 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createSteps } from '../components/steps/steps.js'
-import type { StepsOptions } from '../components/steps/steps.js'
-
-export const MkSteps = defineComponent({
-  name: 'MkSteps',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createSteps> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createSteps(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    watch(() => props.current, (v) => instance?.setCurrent(v))
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/table.ts

@@ -1,33 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createTable } from '../components/table/table.js'
-import type { TableOptions } from '../components/table/table.js'
-
-export const MkTable = defineComponent({
-  name: 'MkTable',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createTable> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createTable(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    watch(() => props.data, (v) => instance?.setData(v))
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/tabs.ts

@@ -1,33 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createTabs } from '../components/tabs/tabs.js'
-import type { TabsOptions } from '../components/tabs/tabs.js'
-
-export const MkTabs = defineComponent({
-  name: 'MkTabs',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createTabs> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createTabs(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    watch(() => props.active, (v) => instance?.setActive(v))
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/tag.ts

@@ -1,33 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createTag } from '../components/tag/tag.js'
-import type { TagOptions } from '../components/tag/tag.js'
-
-export const MkTag = defineComponent({
-  name: 'MkTag',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createTag> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createTag(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    watch(() => props.text, (v) => instance?.setText(v))
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})

package/src/vue/tooltip.ts

@@ -1,34 +0,0 @@
-import { defineComponent, h, ref, onMounted, onUnmounted, watch } from 'vue'
-import { createTooltip } from '../components/tooltip/tooltip.js'
-import type { TooltipOptions } from '../components/tooltip/tooltip.js'
-
-export const MkTooltip = defineComponent({
-  name: 'MkTooltip',
-  props: {
-
-
-  },
-
-  setup(props, { emit, slots }) {
-    const container = ref<HTMLDivElement>()
-    let instance: ReturnType<typeof createTooltip> | null = null
-
-    const create = () => {
-      if (!container.value) return
-      instance?.destroy()
-      instance = createTooltip(container.value, {
-
-
-
-      })
-    }
-
-    onMounted(create)
-
-    watch(() => props.tooltipContent, (v) => instance?.setTooltipContent(v))
-    watch(() => props.timeout, (v) => instance?.setTimeout(v))
-    onUnmounted(() => instance?.destroy())
-
-    return () => h('div', { ref: container })
-  },
-})