@luanlu/mk-motion 1.1.0 → 1.2.1

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 })
-  },
-})