hoci 0.0.6 → 0.0.8

package/dist/index.cjs

@@ -3,6 +3,25 @@
 const core = require('@vueuse/core');
 const vue = require('vue');
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function defineHookProps(props) {
   return props;
 }
@@ -11,13 +30,73 @@ function defineHookEmits(emits) {
 }
 function defineHookComponent(options) {
   return (props, context) => {
-    const p = props instanceof Function ? core.reactiveComputed(() => props()) : props;
-    return options.setup(p, context);
+    const p = withDefaults(
+      isFunction(props) ? core.reactiveComputed(() => props()) : props,
+      options.props
+    );
+    const rs = options.setup(p, context);
+    return __spreadProps(__spreadValues({}, rs), { $props: p });
   };
 }
+function isFunction(value) {
+  return typeof value === "function";
+}
+function withDefaults(props, propsOptions) {
+  if (Array.isArray(propsOptions)) {
+    return props;
+  }
+  const rs = {};
+  const options = propsOptions;
+  for (const key in options) {
+    const k = key;
+    const opt = options[k];
+    if (opt === null) {
+      continue;
+    }
+    if (typeof opt === "function") {
+      if (isExtends(opt, Boolean)) {
+        rs[key] = false;
+      }
+      continue;
+    }
+    if (Array.isArray(opt)) {
+      if (opt.some((e) => isExtends(e, Boolean))) {
+        rs[key] = false;
+      }
+      continue;
+    }
+    if (isFunction(opt.default)) {
+      rs[key] = opt.default(props);
+    } else if (opt.default !== void 0) {
+      rs[key] = opt.default;
+    }
+  }
+  return __spreadValues(__spreadValues({}, rs), props);
+}
+function isExtends(types, value) {
+  if (Array.isArray(types)) {
+    return types.some((e) => isExtends(e, value));
+  }
+  return value === types;
+}
+function normalizeClass(value) {
+  if (Array.isArray(value)) {
+    return value.join(" ");
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  return Object.keys(value).filter((e) => !!value[e]).join(" ");
+}
 
-const valuePropType = [String, Number, Object, Boolean, null];
-const classPropType = [String, Array];
+const valuePropType = [
+  String,
+  Number,
+  Object,
+  Boolean,
+  null
+];
+const classPropType = [String, Array, Object];
 const labelPropType = [String, Function];
 
 const InitSymbol = Symbol("[hi-selection]init");
@@ -88,17 +167,23 @@ const useSelectionItem = defineHookComponent({
     const isActive = vue.inject(IsActiveSymbol, () => false);
     const changeActive = vue.inject(ChangeActiveSymbol, () => {
     });
-    const activeClass = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = vue.inject(ActiveClassSymbol)) == null ? void 0 : _a.value) != null ? _b : "active";
-    });
-    const unactiveClass = vue.computed(() => {
-      var _a, _b;
-      return (_b = (_a = vue.inject(UnactiveSymbol)) == null ? void 0 : _a.value) != null ? _b : "unactive";
-    });
+    const activeClass = vue.computed(
+      () => {
+        var _a, _b;
+        return (_b = (_a = vue.inject(ActiveClassSymbol)) == null ? void 0 : _a.value) != null ? _b : "active";
+      }
+    );
+    const unactiveClass = vue.computed(
+      () => {
+        var _a, _b;
+        return (_b = (_a = vue.inject(UnactiveSymbol)) == null ? void 0 : _a.value) != null ? _b : "unactive";
+      }
+    );
     const itemClass = vue.computed(() => {
       var _a, _b;
-      return [(_b = (_a = vue.inject(ItemClassSymbol)) == null ? void 0 : _a.value) != null ? _b : ""].concat(isActive(props.value) ? activeClass.value : unactiveClass.value);
+      return [(_b = (_a = vue.inject(ItemClassSymbol)) == null ? void 0 : _a.value) != null ? _b : ""].concat(
+        isActive(props.value) ? activeClass.value : unactiveClass.value
+      );
     });
     const activateEvent = core.resolveRef(() => {
       var _a, _b;
@@ -122,11 +207,18 @@ const HiItem = vue.defineComponent({
   name: "HiItem",
   props: selectionItemProps,
   setup(props, context) {
-    const { render, activate, itemClass, activateEvent } = useSelectionItem(props, context);
-    return () => vue.h("div", {
-      class: itemClass.value,
-      [`on${vue.capitalize(activateEvent.value)}`]: activate
-    }, render());
+    const { render, activate, itemClass, activateEvent } = useSelectionItem(
+      props,
+      context
+    );
+    return () => vue.h(
+      "div",
+      {
+        class: itemClass.value,
+        [`on${vue.capitalize(activateEvent.value)}`]: activate
+      },
+      render()
+    );
   }
 });
 
@@ -202,7 +294,12 @@ const selectionListProps = defineHookProps({
     default: () => "click"
   }
 });
-const selectionListEmits = defineHookEmits(["update:modelValue", "change", "load", "unload"]);
+const selectionListEmits = defineHookEmits([
+  "update:modelValue",
+  "change",
+  "load",
+  "unload"
+]);
 const useSelectionList = defineHookComponent({
   props: selectionListProps,
   emits: selectionListEmits,
@@ -218,7 +315,9 @@ const useSelectionList = defineHookComponent({
       }
       return [value];
     }
-    const actives = vue.reactive([...toArray((_a = props.modelValue) != null ? _a : props.defaultValue)]);
+    const actives = vue.reactive([
+      ...toArray((_a = props.modelValue) != null ? _a : props.defaultValue)
+    ]);
     const currentValue = vue.computed({
       get() {
         return props.multiple ? actives : actives[0];
@@ -239,40 +338,47 @@ const useSelectionList = defineHookComponent({
     core.syncRef(currentValue, modelValue, { immediate: true, deep: true });
     vue.provide(
       ActiveClassSymbol,
-      vue.computed(() => props.activeClass)
+      vue.computed(() => normalizeClass(props.activeClass))
     );
     vue.provide(
       UnactiveSymbol,
-      vue.computed(() => props.unactiveClass)
+      vue.computed(() => normalizeClass(props.unactiveClass))
     );
     vue.provide(
       ItemClassSymbol,
-      vue.computed(() => props.itemClass)
+      vue.computed(() => normalizeClass(props.itemClass))
+    );
+    vue.provide(
+      ItemLabelSymbol,
+      vue.computed(() => props.label)
+    );
+    vue.provide(
+      ActivateEventSymbol,
+      vue.computed(() => props.activateEvent)
     );
-    vue.provide(ItemLabelSymbol, vue.computed(() => props.label));
-    vue.provide(ActivateEventSymbol, vue.computed(() => props.activateEvent));
+    const emitChange = () => emit("change", currentValue.value);
     function isActive(value) {
       return actives.includes(value);
     }
     function changeActive(option) {
       return __async(this, null, function* () {
-        const stopWatch = vue.watch(currentValue, (val) => emit("change", val), { deep: true });
         if (isActive(option)) {
           if (props.multiple || props.clearable) {
             actives.splice(actives.indexOf(option), 1);
+            emitChange();
           }
         } else {
           if (props.multiple) {
             const limit = typeof props.multiple === "number" ? props.multiple : Infinity;
             if (actives.length < limit) {
               actives.push(option);
+              emitChange();
             }
           } else {
             actives.splice(0, actives.length, option);
+            emitChange();
           }
         }
-        yield vue.nextTick();
-        stopWatch();
       });
     }
     vue.provide(IsActiveSymbol, isActive);
@@ -346,39 +452,42 @@ const switchProps = defineHookProps({
   tag: {
     type: String,
     default: "div"
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  disabledClass: {
+    type: classPropType,
+    default: ""
   }
 });
 const switchEmits = defineHookEmits(["update:modelValue", "change"]);
 const useSwitch = defineHookComponent({
   props: switchProps,
   emits: switchEmits,
-  setup(props, { emit }) {
-    const checked = vue.ref(!!props.modelValue);
-    vue.watch(
-      () => props.modelValue,
-      (val) => {
-        checked.value = !!val;
-      }
-    );
-    const modelValue = vue.computed({
-      get() {
-        var _a;
-        return !!((_a = props.modelValue) != null ? _a : checked.value);
-      },
-      set(val) {
-        checked.value = val;
-        emit("update:modelValue", val);
-      }
+  setup(props, context) {
+    const modelValue = core.useVModel(props, "modelValue", context.emit, {
+      passive: true,
+      defaultValue: false
     });
     const toggle = function(value) {
+      if (props.disabled) {
+        return;
+      }
       const oldValue = modelValue.value;
       const newValue = typeof value === "boolean" ? value : !oldValue;
       if (newValue !== oldValue) {
-        emit("change", newValue);
+        modelValue.value = newValue;
+        context.emit("change", newValue);
       }
     };
     const switchClass = vue.computed(() => {
-      return [props.class, modelValue.value ? props.activeClass : props.unactiveClass];
+      return [
+        props.class,
+        modelValue.value ? props.activeClass : props.unactiveClass,
+        props.disabled ? props.disabledClass : ""
+      ];
     });
     return {
       toggle,
@@ -395,10 +504,14 @@ const HiSwitch = vue.defineComponent({
     const { slots } = context;
     const { switchClass, toggle } = useSwitch(props, context);
     return () => {
-      return vue.h(props.tag, {
-        class: switchClass.value,
-        [`on${vue.capitalize(props.activateEvent)}`]: toggle
-      }, vue.renderSlot(slots, "default"));
+      return vue.h(
+        props.tag,
+        {
+          class: switchClass.value,
+          [`on${vue.capitalize(props.activateEvent)}`]: toggle
+        },
+        vue.renderSlot(slots, "default")
+      );
     };
   }
 });
@@ -409,6 +522,8 @@ exports.HiSwitch = HiSwitch;
 exports.defineHookComponent = defineHookComponent;
 exports.defineHookEmits = defineHookEmits;
 exports.defineHookProps = defineHookProps;
+exports.isExtends = isExtends;
+exports.normalizeClass = normalizeClass;
 exports.selectionItemProps = selectionItemProps;
 exports.selectionListEmits = selectionListEmits;
 exports.selectionListProps = selectionListProps;

package/dist/index.d.ts

@@ -1,20 +1,24 @@
-import * as vue from 'vue';
-import { EmitsOptions, ComponentPropsOptions, ExtractPropTypes, SetupContext, PropType } from 'vue';
 import { MaybeFunction } from 'maybe-types';
+import * as vue from 'vue';
+import { EmitsOptions, ComponentPropsOptions, ExtractPropTypes, SetupContext, ExtractDefaultPropTypes, ComponentObjectPropsOptions, PropType } from 'vue';
+
+type ClassType = string | string[] | Record<string, any>;
+type ActivateEvent = "click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu" | "touchstart" | "touchend";
+type ElementLike = JSX.Element | string | ElementLike[];
 
-interface HookComponentOptions<R, E = EmitsOptions, EE extends string = string, P = ComponentPropsOptions, D extends Record<string, unknown> = ExtractPropTypes<P>> {
+interface HookComponentOptions<R, E = EmitsOptions, EE extends string = string, P = ComponentPropsOptions, D = ExtractPropTypes<P>> {
     props?: P;
     emits?: E | EE[];
     setup: (props: D, context: SetupContext<E>) => R;
 }
-type HookComponent<R, E = EmitsOptions, P = ComponentPropsOptions, D extends Record<string, unknown> = ExtractPropTypes<P>> = (props: MaybeFunction<D>, context: SetupContext<E>) => R;
-declare function defineHookProps<P = ComponentPropsOptions>(props: P): P;
-declare function defineHookEmits<E, EE extends string = string>(emits: E | EE[]): E | EE[];
-declare function defineHookComponent<R, E = EmitsOptions, EE extends string = string, P = ComponentPropsOptions, D extends Record<string, unknown> = ExtractPropTypes<P>>(options: HookComponentOptions<R, E, EE, P, D>): HookComponent<R, E, P, D>;
-
-type ClassType = string | string[];
-type ActivateEvent = "click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu" | "touchstart" | "touchend";
-type ElementLike = JSX.Element | string | ElementLike[];
+type HookComponent<R, E = EmitsOptions, P = ComponentPropsOptions, D = ExtractPropTypes<P>, Defaults = ExtractDefaultPropTypes<P>> = (props: MaybeFunction<Partial<Defaults> & Omit<D, keyof Defaults>>, context: SetupContext<E>) => R & {
+    $props: D;
+};
+declare function defineHookProps<P extends ComponentObjectPropsOptions = ComponentObjectPropsOptions>(props: P): P;
+declare function defineHookEmits<E extends EmitsOptions = EmitsOptions, EE extends string = string>(emits: E | EE[]): E | EE[];
+declare function defineHookComponent<R, E = EmitsOptions, EE extends string = string, P = ComponentPropsOptions, D = ExtractPropTypes<P>, Defaults = ExtractDefaultPropTypes<P>>(options: HookComponentOptions<R, E, EE, P, D>): HookComponent<R, E, P, D, Defaults>;
+declare function isExtends(types: PropType<any>, value: PropType<any>): boolean;
+declare function normalizeClass(value: ClassType): string;
 
 declare const selectionItemProps: {
     value: {
@@ -32,7 +36,7 @@ declare const selectionItemProps: {
         type: PropType<string | number | symbol>;
     };
     activateEvent: {
-        type: PropType<"click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu">;
+        type: PropType<ActivateEvent>;
     };
 };
 declare const useSelectionItem: HookComponent<{
@@ -61,7 +65,7 @@ declare const useSelectionItem: HookComponent<{
         type: PropType<string | number | symbol>;
     };
     activateEvent: {
-        type: PropType<"click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu">;
+        type: PropType<ActivateEvent>;
     };
 }, vue.ExtractPropTypes<{
     value: {
@@ -79,9 +83,12 @@ declare const useSelectionItem: HookComponent<{
         type: PropType<string | number | symbol>;
     };
     activateEvent: {
-        type: PropType<"click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu">;
+        type: PropType<ActivateEvent>;
     };
-}>>;
+}>, {
+    value: any;
+    keepAlive: boolean;
+}>;
 declare const HiItem: vue.DefineComponent<{
     value: {
         type: PropType<any>;
@@ -98,7 +105,7 @@ declare const HiItem: vue.DefineComponent<{
         type: PropType<string | number | symbol>;
     };
     activateEvent: {
-        type: PropType<"click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu">;
+        type: PropType<ActivateEvent>;
     };
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
@@ -118,11 +125,11 @@ declare const HiItem: vue.DefineComponent<{
         type: PropType<string | number | symbol>;
     };
     activateEvent: {
-        type: PropType<"click" | "mouseenter" | "mousedown" | "mouseup" | "dblclick" | "contextmenu">;
+        type: PropType<ActivateEvent>;
     };
 }>>, {
-    keepAlive: boolean;
     value: any;
+    keepAlive: boolean;
 }>;
 
 declare const selectionListProps: {
@@ -138,18 +145,18 @@ declare const selectionListProps: {
      * 选中时的 class
      */
     activeClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     /**
      *  每个选项的 class
      */
     itemClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     unactiveClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     label: {
@@ -205,18 +212,18 @@ declare const useSelectionList: HookComponent<{
      * 选中时的 class
      */
     activeClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     /**
      *  每个选项的 class
      */
     itemClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     unactiveClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     label: {
@@ -256,18 +263,18 @@ declare const useSelectionList: HookComponent<{
      * 选中时的 class
      */
     activeClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     /**
      *  每个选项的 class
      */
     itemClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     unactiveClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     label: {
@@ -294,7 +301,17 @@ declare const useSelectionList: HookComponent<{
         type: PropType<ActivateEvent>;
         default: () => "click";
     };
-}>>;
+}>, {
+    activateEvent: ActivateEvent;
+    itemClass: string | string[] | Record<string, boolean>;
+    tag: string;
+    modelValue: any;
+    activeClass: string | string[] | Record<string, boolean>;
+    unactiveClass: string | string[] | Record<string, boolean>;
+    multiple: number | boolean;
+    clearable: boolean;
+    defaultValue: any;
+}>;
 declare const HiSelection: vue.DefineComponent<{
     tag: {
         type: StringConstructor;
@@ -308,18 +325,18 @@ declare const HiSelection: vue.DefineComponent<{
      * 选中时的 class
      */
     activeClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     /**
      *  每个选项的 class
      */
     itemClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     unactiveClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     label: {
@@ -361,18 +378,18 @@ declare const HiSelection: vue.DefineComponent<{
      * 选中时的 class
      */
     activeClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     /**
      *  每个选项的 class
      */
     itemClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     unactiveClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     label: {
@@ -406,14 +423,14 @@ declare const HiSelection: vue.DefineComponent<{
     onUnload?: ((...args: any[]) => any) | undefined;
 }, {
     activateEvent: ActivateEvent;
-    itemClass: string | string[];
+    itemClass: string | string[] | Record<string, boolean>;
+    tag: string;
     modelValue: any;
+    activeClass: string | string[] | Record<string, boolean>;
+    unactiveClass: string | string[] | Record<string, boolean>;
     multiple: number | boolean;
-    defaultValue: any;
-    tag: string;
-    activeClass: string | string[];
-    unactiveClass: string | string[];
     clearable: boolean;
+    defaultValue: any;
 }>;
 
 declare const switchProps: {
@@ -422,15 +439,15 @@ declare const switchProps: {
         default: boolean;
     };
     class: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     activeClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     unactiveClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     activateEvent: {
@@ -441,27 +458,35 @@ declare const switchProps: {
         type: StringConstructor;
         default: string;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledClass: {
+        type: PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
 };
 declare const switchEmits: ("update:modelValue" | "change")[];
 declare const useSwitch: HookComponent<{
     toggle: (value?: any) => void;
-    modelValue: vue.WritableComputedRef<boolean>;
-    switchClass: vue.ComputedRef<(string | string[])[]>;
+    modelValue: vue.Ref<boolean> | vue.WritableComputedRef<boolean>;
+    switchClass: vue.ComputedRef<(string | string[] | Record<string, boolean>)[]>;
 }, ("update:modelValue" | "change")[], {
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
     };
     class: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     activeClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     unactiveClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     activateEvent: {
@@ -472,21 +497,29 @@ declare const useSwitch: HookComponent<{
         type: StringConstructor;
         default: string;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledClass: {
+        type: PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
 }, vue.ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
     };
     class: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     activeClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     unactiveClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     activateEvent: {
@@ -497,22 +530,39 @@ declare const useSwitch: HookComponent<{
         type: StringConstructor;
         default: string;
     };
-}>>;
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledClass: {
+        type: PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
+}>, {
+    activateEvent: ActivateEvent;
+    class: string | string[] | Record<string, boolean>;
+    tag: string;
+    modelValue: boolean;
+    activeClass: string | string[] | Record<string, boolean>;
+    unactiveClass: string | string[] | Record<string, boolean>;
+    disabled: boolean;
+    disabledClass: string | string[] | Record<string, boolean>;
+}>;
 declare const HiSwitch: vue.DefineComponent<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
     };
     class: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     activeClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     unactiveClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     activateEvent: {
@@ -523,6 +573,14 @@ declare const HiSwitch: vue.DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledClass: {
+        type: PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
 }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
@@ -531,15 +589,15 @@ declare const HiSwitch: vue.DefineComponent<{
         default: boolean;
     };
     class: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     activeClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     unactiveClass: {
-        type: PropType<string | string[]>;
+        type: PropType<string | string[] | Record<string, boolean>>;
         default: string;
     };
     activateEvent: {
@@ -550,16 +608,26 @@ declare const HiSwitch: vue.DefineComponent<{
         type: StringConstructor;
         default: string;
     };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabledClass: {
+        type: PropType<string | string[] | Record<string, boolean>>;
+        default: string;
+    };
 }>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
 }, {
     activateEvent: ActivateEvent;
-    class: string | string[];
-    modelValue: boolean;
+    class: string | string[] | Record<string, boolean>;
     tag: string;
-    activeClass: string | string[];
-    unactiveClass: string | string[];
+    modelValue: boolean;
+    activeClass: string | string[] | Record<string, boolean>;
+    unactiveClass: string | string[] | Record<string, boolean>;
+    disabled: boolean;
+    disabledClass: string | string[] | Record<string, boolean>;
 }>;
 
-export { HiItem, HiSelection, HiSwitch, HookComponent, HookComponentOptions, defineHookComponent, defineHookEmits, defineHookProps, selectionItemProps, selectionListEmits, selectionListProps, switchEmits, switchProps, useSelectionItem, useSelectionList, useSwitch };
+export { HiItem, HiSelection, HiSwitch, HookComponent, HookComponentOptions, defineHookComponent, defineHookEmits, defineHookProps, isExtends, normalizeClass, selectionItemProps, selectionListEmits, selectionListProps, switchEmits, switchProps, useSelectionItem, useSelectionList, useSwitch };

package/dist/index.esm.js

@@ -1,6 +1,25 @@
-import { reactiveComputed, resolveRef, syncRef, isDefined } from '@vueuse/core';
-import { defineComponent, h, capitalize, inject, watch, onDeactivated, computed, renderSlot, reactive, provide, nextTick, ref } from 'vue';
+import { reactiveComputed, resolveRef, syncRef, isDefined, useVModel } from '@vueuse/core';
+import { defineComponent, h, capitalize, inject, watch, onDeactivated, computed, renderSlot, reactive, provide } from 'vue';
 
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function defineHookProps(props) {
   return props;
 }
@@ -9,13 +28,73 @@ function defineHookEmits(emits) {
 }
 function defineHookComponent(options) {
   return (props, context) => {
-    const p = props instanceof Function ? reactiveComputed(() => props()) : props;
-    return options.setup(p, context);
+    const p = withDefaults(
+      isFunction(props) ? reactiveComputed(() => props()) : props,
+      options.props
+    );
+    const rs = options.setup(p, context);
+    return __spreadProps(__spreadValues({}, rs), { $props: p });
   };
 }
+function isFunction(value) {
+  return typeof value === "function";
+}
+function withDefaults(props, propsOptions) {
+  if (Array.isArray(propsOptions)) {
+    return props;
+  }
+  const rs = {};
+  const options = propsOptions;
+  for (const key in options) {
+    const k = key;
+    const opt = options[k];
+    if (opt === null) {
+      continue;
+    }
+    if (typeof opt === "function") {
+      if (isExtends(opt, Boolean)) {
+        rs[key] = false;
+      }
+      continue;
+    }
+    if (Array.isArray(opt)) {
+      if (opt.some((e) => isExtends(e, Boolean))) {
+        rs[key] = false;
+      }
+      continue;
+    }
+    if (isFunction(opt.default)) {
+      rs[key] = opt.default(props);
+    } else if (opt.default !== void 0) {
+      rs[key] = opt.default;
+    }
+  }
+  return __spreadValues(__spreadValues({}, rs), props);
+}
+function isExtends(types, value) {
+  if (Array.isArray(types)) {
+    return types.some((e) => isExtends(e, value));
+  }
+  return value === types;
+}
+function normalizeClass(value) {
+  if (Array.isArray(value)) {
+    return value.join(" ");
+  }
+  if (typeof value === "string") {
+    return value;
+  }
+  return Object.keys(value).filter((e) => !!value[e]).join(" ");
+}
 
-const valuePropType = [String, Number, Object, Boolean, null];
-const classPropType = [String, Array];
+const valuePropType = [
+  String,
+  Number,
+  Object,
+  Boolean,
+  null
+];
+const classPropType = [String, Array, Object];
 const labelPropType = [String, Function];
 
 const InitSymbol = Symbol("[hi-selection]init");
@@ -86,17 +165,23 @@ const useSelectionItem = defineHookComponent({
     const isActive = inject(IsActiveSymbol, () => false);
     const changeActive = inject(ChangeActiveSymbol, () => {
     });
-    const activeClass = computed(() => {
-      var _a, _b;
-      return (_b = (_a = inject(ActiveClassSymbol)) == null ? void 0 : _a.value) != null ? _b : "active";
-    });
-    const unactiveClass = computed(() => {
-      var _a, _b;
-      return (_b = (_a = inject(UnactiveSymbol)) == null ? void 0 : _a.value) != null ? _b : "unactive";
-    });
+    const activeClass = computed(
+      () => {
+        var _a, _b;
+        return (_b = (_a = inject(ActiveClassSymbol)) == null ? void 0 : _a.value) != null ? _b : "active";
+      }
+    );
+    const unactiveClass = computed(
+      () => {
+        var _a, _b;
+        return (_b = (_a = inject(UnactiveSymbol)) == null ? void 0 : _a.value) != null ? _b : "unactive";
+      }
+    );
     const itemClass = computed(() => {
       var _a, _b;
-      return [(_b = (_a = inject(ItemClassSymbol)) == null ? void 0 : _a.value) != null ? _b : ""].concat(isActive(props.value) ? activeClass.value : unactiveClass.value);
+      return [(_b = (_a = inject(ItemClassSymbol)) == null ? void 0 : _a.value) != null ? _b : ""].concat(
+        isActive(props.value) ? activeClass.value : unactiveClass.value
+      );
     });
     const activateEvent = resolveRef(() => {
       var _a, _b;
@@ -120,11 +205,18 @@ const HiItem = defineComponent({
   name: "HiItem",
   props: selectionItemProps,
   setup(props, context) {
-    const { render, activate, itemClass, activateEvent } = useSelectionItem(props, context);
-    return () => h("div", {
-      class: itemClass.value,
-      [`on${capitalize(activateEvent.value)}`]: activate
-    }, render());
+    const { render, activate, itemClass, activateEvent } = useSelectionItem(
+      props,
+      context
+    );
+    return () => h(
+      "div",
+      {
+        class: itemClass.value,
+        [`on${capitalize(activateEvent.value)}`]: activate
+      },
+      render()
+    );
   }
 });
 
@@ -200,7 +292,12 @@ const selectionListProps = defineHookProps({
     default: () => "click"
   }
 });
-const selectionListEmits = defineHookEmits(["update:modelValue", "change", "load", "unload"]);
+const selectionListEmits = defineHookEmits([
+  "update:modelValue",
+  "change",
+  "load",
+  "unload"
+]);
 const useSelectionList = defineHookComponent({
   props: selectionListProps,
   emits: selectionListEmits,
@@ -216,7 +313,9 @@ const useSelectionList = defineHookComponent({
       }
       return [value];
     }
-    const actives = reactive([...toArray((_a = props.modelValue) != null ? _a : props.defaultValue)]);
+    const actives = reactive([
+      ...toArray((_a = props.modelValue) != null ? _a : props.defaultValue)
+    ]);
     const currentValue = computed({
       get() {
         return props.multiple ? actives : actives[0];
@@ -237,40 +336,47 @@ const useSelectionList = defineHookComponent({
     syncRef(currentValue, modelValue, { immediate: true, deep: true });
     provide(
       ActiveClassSymbol,
-      computed(() => props.activeClass)
+      computed(() => normalizeClass(props.activeClass))
     );
     provide(
       UnactiveSymbol,
-      computed(() => props.unactiveClass)
+      computed(() => normalizeClass(props.unactiveClass))
     );
     provide(
       ItemClassSymbol,
-      computed(() => props.itemClass)
+      computed(() => normalizeClass(props.itemClass))
+    );
+    provide(
+      ItemLabelSymbol,
+      computed(() => props.label)
+    );
+    provide(
+      ActivateEventSymbol,
+      computed(() => props.activateEvent)
     );
-    provide(ItemLabelSymbol, computed(() => props.label));
-    provide(ActivateEventSymbol, computed(() => props.activateEvent));
+    const emitChange = () => emit("change", currentValue.value);
     function isActive(value) {
       return actives.includes(value);
     }
     function changeActive(option) {
       return __async(this, null, function* () {
-        const stopWatch = watch(currentValue, (val) => emit("change", val), { deep: true });
         if (isActive(option)) {
           if (props.multiple || props.clearable) {
             actives.splice(actives.indexOf(option), 1);
+            emitChange();
           }
         } else {
           if (props.multiple) {
             const limit = typeof props.multiple === "number" ? props.multiple : Infinity;
             if (actives.length < limit) {
               actives.push(option);
+              emitChange();
             }
           } else {
             actives.splice(0, actives.length, option);
+            emitChange();
           }
         }
-        yield nextTick();
-        stopWatch();
       });
     }
     provide(IsActiveSymbol, isActive);
@@ -344,39 +450,42 @@ const switchProps = defineHookProps({
   tag: {
     type: String,
     default: "div"
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  disabledClass: {
+    type: classPropType,
+    default: ""
   }
 });
 const switchEmits = defineHookEmits(["update:modelValue", "change"]);
 const useSwitch = defineHookComponent({
   props: switchProps,
   emits: switchEmits,
-  setup(props, { emit }) {
-    const checked = ref(!!props.modelValue);
-    watch(
-      () => props.modelValue,
-      (val) => {
-        checked.value = !!val;
-      }
-    );
-    const modelValue = computed({
-      get() {
-        var _a;
-        return !!((_a = props.modelValue) != null ? _a : checked.value);
-      },
-      set(val) {
-        checked.value = val;
-        emit("update:modelValue", val);
-      }
+  setup(props, context) {
+    const modelValue = useVModel(props, "modelValue", context.emit, {
+      passive: true,
+      defaultValue: false
     });
     const toggle = function(value) {
+      if (props.disabled) {
+        return;
+      }
       const oldValue = modelValue.value;
       const newValue = typeof value === "boolean" ? value : !oldValue;
       if (newValue !== oldValue) {
-        emit("change", newValue);
+        modelValue.value = newValue;
+        context.emit("change", newValue);
       }
     };
     const switchClass = computed(() => {
-      return [props.class, modelValue.value ? props.activeClass : props.unactiveClass];
+      return [
+        props.class,
+        modelValue.value ? props.activeClass : props.unactiveClass,
+        props.disabled ? props.disabledClass : ""
+      ];
     });
     return {
       toggle,
@@ -393,12 +502,16 @@ const HiSwitch = defineComponent({
     const { slots } = context;
     const { switchClass, toggle } = useSwitch(props, context);
     return () => {
-      return h(props.tag, {
-        class: switchClass.value,
-        [`on${capitalize(props.activateEvent)}`]: toggle
-      }, renderSlot(slots, "default"));
+      return h(
+        props.tag,
+        {
+          class: switchClass.value,
+          [`on${capitalize(props.activateEvent)}`]: toggle
+        },
+        renderSlot(slots, "default")
+      );
     };
   }
 });
 
-export { HiItem, HiSelection, HiSwitch, defineHookComponent, defineHookEmits, defineHookProps, selectionItemProps, selectionListEmits, selectionListProps, switchEmits, switchProps, useSelectionItem, useSelectionList, useSwitch };
+export { HiItem, HiSelection, HiSwitch, defineHookComponent, defineHookEmits, defineHookProps, isExtends, normalizeClass, selectionItemProps, selectionListEmits, selectionListProps, switchEmits, switchProps, useSelectionItem, useSelectionList, useSwitch };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoci",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -14,7 +14,7 @@
     "@vueuse/core": "^9.12.0",
     "maybe-types": "^0.0.3"
   },
-  "devDependencies": {
+  "peerDependencies": {
     "vue": "^3.2.31"
   },
   "scripts": {