@luanlu/mk-motion 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luanlu/mk-motion",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A lightweight, modern frontend animation library",
   "type": "module",
   "main": "./dist/mk-motion.umd.cjs",
@@ -17,10 +17,17 @@
         "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"
+      }
+    }
   },
   "files": [
-    "dist"
+    "dist",
+    "src/vue"
   ],
   "publishConfig": {
     "access": "public"
@@ -49,9 +56,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/vue/alert.ts

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,32 @@
+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/button.ts

@@ -0,0 +1,35 @@
+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: {
+
+
+  },
+
+  setup(props, { emit, slots }) {
+    const container = ref<HTMLDivElement>()
+    let instance: ReturnType<typeof createButton> | null = null
+
+    const create = () => {
+      if (!container.value) return
+      instance?.destroy()
+      instance = createButton(container.value, {
+
+
+
+      })
+    }
+
+    onMounted(create)
+
+    watch(() => props.timeout, (v) => instance?.setTimeout(v))
+    watch(() => props.loading, (v) => instance?.setLoading(v))
+    watch(() => props.disabled, (v) => instance?.setDisabled(v))
+    onUnmounted(() => instance?.destroy())
+
+    return () => h('div', { ref: container })
+  },
+})

package/src/vue/card.ts

@@ -0,0 +1,33 @@
+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: {
+
+
+  },
+
+  setup(props, { emit, slots }) {
+    const container = ref<HTMLDivElement>()
+    let instance: ReturnType<typeof createCard> | null = null
+
+    const create = () => {
+      if (!container.value) return
+      instance?.destroy()
+      instance = createCard(container.value, {
+
+
+
+      })
+    }
+
+    onMounted(create)
+
+    watch(() => props.loading, (v) => instance?.setLoading(v))
+    onUnmounted(() => instance?.destroy())
+
+    return () => h('div', { ref: container })
+  },
+})

package/src/vue/checkbox.ts

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,33 @@
+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/dialog.ts

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

package/src/vue/divider.ts

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,33 @@
+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/index.ts

@@ -0,0 +1,28 @@
+export { MkAlert } from './alert.js'
+export { MkAvatar } from './avatar.js'
+export { MkBreadcrumb } from './breadcrumb.js'
+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'

package/src/vue/input.ts

@@ -0,0 +1,32 @@
+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: {
+
+
+  },
+
+  setup(props, { emit, slots }) {
+    const container = ref<HTMLDivElement>()
+    let instance: ReturnType<typeof createInput> | null = null
+
+    const create = () => {
+      if (!container.value) return
+      instance?.destroy()
+      instance = createInput(container.value, {
+
+
+
+      })
+    }
+
+    onMounted(create)
+
+    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/menu.ts

@@ -0,0 +1,33 @@
+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/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/popover.ts

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,33 @@
+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/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/row.ts

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,33 @@
+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/slider.ts

@@ -0,0 +1,42 @@
+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: {
+    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'],
+  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('change', v)
+          emit('update:modelValue', v)
+        },
+      })
+    })
+
+    watch(() => props.modelValue, (v) => {
+      if (instance) instance.value = v
+    })
+
+    onUnmounted(() => instance?.destroy())
+
+    return () => h('div', { ref: container })
+  },
+})

package/src/vue/space.ts

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,33 @@
+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/switch.ts

@@ -0,0 +1,32 @@
+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: {
+
+
+  },
+
+  setup(props, { emit, slots }) {
+    const container = ref<HTMLDivElement>()
+    let instance: ReturnType<typeof createSwitch> | null = null
+
+    const create = () => {
+      if (!container.value) return
+      instance?.destroy()
+      instance = createSwitch(container.value, {
+
+
+
+      })
+    }
+
+    onMounted(create)
+
+    onUnmounted(() => instance?.destroy())
+
+    return () => h('div', { ref: container })
+  },
+})

package/src/vue/table.ts

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,34 @@
+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 })
+  },
+})