hoci 0.0.4 → 0.0.6

package/dist/index.cjs

@@ -86,7 +86,8 @@ const useSelectionItem = defineHookComponent({
       vue.onDeactivated(() => remove());
     }
     const isActive = vue.inject(IsActiveSymbol, () => false);
-    const changeActive = vue.inject(ChangeActiveSymbol, () => 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";
@@ -129,18 +130,45 @@ const HiItem = vue.defineComponent({
   }
 });
 
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 const selectionListProps = defineHookProps({
   tag: {
     type: String,
     default: "div"
   },
   modelValue: {
-    type: valuePropType
+    type: valuePropType,
+    default: () => null
   },
+  /**
+   * 选中时的 class
+   */
   activeClass: {
     type: classPropType,
-    default: ""
+    default: "active"
   },
+  /**
+   *  每个选项的 class
+   */
   itemClass: {
     type: classPropType,
     default: ""
@@ -152,15 +180,22 @@ const selectionListProps = defineHookProps({
   label: {
     type: labelPropType
   },
+  /**
+   *  多选模式
+   */
   multiple: {
     type: [Boolean, Number],
     default: () => false
   },
+  /**
+   * 可清除
+   */
   clearable: {
     type: Boolean
   },
   defaultValue: {
-    type: valuePropType
+    type: valuePropType,
+    default: () => null
   },
   activateEvent: {
     type: String,
@@ -175,7 +210,7 @@ const useSelectionList = defineHookComponent({
     var _a;
     const options = vue.reactive([]);
     function toArray(value) {
-      if (value === void 0) {
+      if (!core.isDefined(value)) {
         return [];
       }
       if (props.multiple && Array.isArray(value)) {
@@ -189,11 +224,7 @@ const useSelectionList = defineHookComponent({
         return props.multiple ? actives : actives[0];
       },
       set(val) {
-        if (props.multiple) {
-          actives.splice(0, actives.length, ...toArray(val));
-        } else {
-          actives.splice(0, actives.length, val);
-        }
+        actives.splice(0, actives.length, ...toArray(val));
       }
     });
     const modelValue = vue.computed({
@@ -203,7 +234,6 @@ const useSelectionList = defineHookComponent({
       },
       set(val) {
         emit("update:modelValue", val);
-        emit("change", val);
       }
     });
     core.syncRef(currentValue, modelValue, { immediate: true, deep: true });
@@ -225,20 +255,25 @@ const useSelectionList = defineHookComponent({
       return actives.includes(value);
     }
     function changeActive(option) {
-      if (isActive(option)) {
-        if (props.multiple || props.clearable) {
-          actives.splice(actives.indexOf(option), 1);
-        }
-      } else {
-        if (props.multiple) {
-          const limit = typeof props.multiple === "number" ? props.multiple : Infinity;
-          if (actives.length < limit) {
-            actives.push(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);
           }
         } else {
-          actives.splice(0, actives.length, option);
+          if (props.multiple) {
+            const limit = typeof props.multiple === "number" ? props.multiple : Infinity;
+            if (actives.length < limit) {
+              actives.push(option);
+            }
+          } else {
+            actives.splice(0, actives.length, option);
+          }
         }
-      }
+        yield vue.nextTick();
+        stopWatch();
+      });
     }
     vue.provide(IsActiveSymbol, isActive);
     vue.provide(ChangeActiveSymbol, changeActive);
@@ -333,14 +368,13 @@ const useSwitch = defineHookComponent({
       set(val) {
         checked.value = val;
         emit("update:modelValue", val);
-        emit("change", val);
       }
     });
     const toggle = function(value) {
-      if (typeof value === "boolean") {
-        modelValue.value = value;
-      } else {
-        modelValue.value = !modelValue.value;
+      const oldValue = modelValue.value;
+      const newValue = typeof value === "boolean" ? value : !oldValue;
+      if (newValue !== oldValue) {
+        emit("change", newValue);
       }
     };
     const switchClass = vue.computed(() => {

package/dist/index.d.ts

@@ -132,6 +132,7 @@ declare const selectionListProps: {
     };
     modelValue: {
         type: PropType<any>;
+        default: () => null;
     };
     /**
      * 选中时的 class
@@ -169,6 +170,7 @@ declare const selectionListProps: {
     };
     defaultValue: {
         type: PropType<any>;
+        default: () => null;
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
@@ -185,7 +187,7 @@ declare const useSelectionList: HookComponent<{
     }[];
     actives: any[];
     isActive: (value: any) => boolean;
-    changeActive: (option: any) => void;
+    changeActive: (option: any) => Promise<void>;
     renderItem: () => ElementLike;
     render: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
         [key: string]: any;
@@ -197,6 +199,7 @@ declare const useSelectionList: HookComponent<{
     };
     modelValue: {
         type: PropType<any>;
+        default: () => null;
     };
     /**
      * 选中时的 class
@@ -234,6 +237,7 @@ declare const useSelectionList: HookComponent<{
     };
     defaultValue: {
         type: PropType<any>;
+        default: () => null;
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
@@ -246,6 +250,7 @@ declare const useSelectionList: HookComponent<{
     };
     modelValue: {
         type: PropType<any>;
+        default: () => null;
     };
     /**
      * 选中时的 class
@@ -283,6 +288,7 @@ declare const useSelectionList: HookComponent<{
     };
     defaultValue: {
         type: PropType<any>;
+        default: () => null;
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
@@ -296,6 +302,7 @@ declare const HiSelection: vue.DefineComponent<{
     };
     modelValue: {
         type: PropType<any>;
+        default: () => null;
     };
     /**
      * 选中时的 class
@@ -333,6 +340,7 @@ declare const HiSelection: vue.DefineComponent<{
     };
     defaultValue: {
         type: PropType<any>;
+        default: () => null;
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
@@ -347,6 +355,7 @@ declare const HiSelection: vue.DefineComponent<{
     };
     modelValue: {
         type: PropType<any>;
+        default: () => null;
     };
     /**
      * 选中时的 class
@@ -384,6 +393,7 @@ declare const HiSelection: vue.DefineComponent<{
     };
     defaultValue: {
         type: PropType<any>;
+        default: () => null;
     };
     activateEvent: {
         type: PropType<ActivateEvent>;
@@ -397,7 +407,9 @@ declare const HiSelection: vue.DefineComponent<{
 }, {
     activateEvent: ActivateEvent;
     itemClass: string | string[];
+    modelValue: any;
     multiple: number | boolean;
+    defaultValue: any;
     tag: string;
     activeClass: string | string[];
     unactiveClass: string | string[];
@@ -544,8 +556,8 @@ declare const HiSwitch: vue.DefineComponent<{
 }, {
     activateEvent: ActivateEvent;
     class: string | string[];
-    tag: string;
     modelValue: boolean;
+    tag: string;
     activeClass: string | string[];
     unactiveClass: string | string[];
 }>;

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-import { reactiveComputed, resolveRef, syncRef } from '@vueuse/core';
-import { defineComponent, h, capitalize, inject, watch, onDeactivated, computed, renderSlot, reactive, provide, ref } from 'vue';
+import { reactiveComputed, resolveRef, syncRef, isDefined } from '@vueuse/core';
+import { defineComponent, h, capitalize, inject, watch, onDeactivated, computed, renderSlot, reactive, provide, nextTick, ref } from 'vue';
 
 function defineHookProps(props) {
   return props;
@@ -84,7 +84,8 @@ const useSelectionItem = defineHookComponent({
       onDeactivated(() => remove());
     }
     const isActive = inject(IsActiveSymbol, () => false);
-    const changeActive = inject(ChangeActiveSymbol, () => false);
+    const changeActive = inject(ChangeActiveSymbol, () => {
+    });
     const activeClass = computed(() => {
       var _a, _b;
       return (_b = (_a = inject(ActiveClassSymbol)) == null ? void 0 : _a.value) != null ? _b : "active";
@@ -127,18 +128,45 @@ const HiItem = defineComponent({
   }
 });
 
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 const selectionListProps = defineHookProps({
   tag: {
     type: String,
     default: "div"
   },
   modelValue: {
-    type: valuePropType
+    type: valuePropType,
+    default: () => null
   },
+  /**
+   * 选中时的 class
+   */
   activeClass: {
     type: classPropType,
-    default: ""
+    default: "active"
   },
+  /**
+   *  每个选项的 class
+   */
   itemClass: {
     type: classPropType,
     default: ""
@@ -150,15 +178,22 @@ const selectionListProps = defineHookProps({
   label: {
     type: labelPropType
   },
+  /**
+   *  多选模式
+   */
   multiple: {
     type: [Boolean, Number],
     default: () => false
   },
+  /**
+   * 可清除
+   */
   clearable: {
     type: Boolean
   },
   defaultValue: {
-    type: valuePropType
+    type: valuePropType,
+    default: () => null
   },
   activateEvent: {
     type: String,
@@ -173,7 +208,7 @@ const useSelectionList = defineHookComponent({
     var _a;
     const options = reactive([]);
     function toArray(value) {
-      if (value === void 0) {
+      if (!isDefined(value)) {
         return [];
       }
       if (props.multiple && Array.isArray(value)) {
@@ -187,11 +222,7 @@ const useSelectionList = defineHookComponent({
         return props.multiple ? actives : actives[0];
       },
       set(val) {
-        if (props.multiple) {
-          actives.splice(0, actives.length, ...toArray(val));
-        } else {
-          actives.splice(0, actives.length, val);
-        }
+        actives.splice(0, actives.length, ...toArray(val));
       }
     });
     const modelValue = computed({
@@ -201,7 +232,6 @@ const useSelectionList = defineHookComponent({
       },
       set(val) {
         emit("update:modelValue", val);
-        emit("change", val);
       }
     });
     syncRef(currentValue, modelValue, { immediate: true, deep: true });
@@ -223,20 +253,25 @@ const useSelectionList = defineHookComponent({
       return actives.includes(value);
     }
     function changeActive(option) {
-      if (isActive(option)) {
-        if (props.multiple || props.clearable) {
-          actives.splice(actives.indexOf(option), 1);
-        }
-      } else {
-        if (props.multiple) {
-          const limit = typeof props.multiple === "number" ? props.multiple : Infinity;
-          if (actives.length < limit) {
-            actives.push(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);
           }
         } else {
-          actives.splice(0, actives.length, option);
+          if (props.multiple) {
+            const limit = typeof props.multiple === "number" ? props.multiple : Infinity;
+            if (actives.length < limit) {
+              actives.push(option);
+            }
+          } else {
+            actives.splice(0, actives.length, option);
+          }
         }
-      }
+        yield nextTick();
+        stopWatch();
+      });
     }
     provide(IsActiveSymbol, isActive);
     provide(ChangeActiveSymbol, changeActive);
@@ -331,14 +366,13 @@ const useSwitch = defineHookComponent({
       set(val) {
         checked.value = val;
         emit("update:modelValue", val);
-        emit("change", val);
       }
     });
     const toggle = function(value) {
-      if (typeof value === "boolean") {
-        modelValue.value = value;
-      } else {
-        modelValue.value = !modelValue.value;
+      const oldValue = modelValue.value;
+      const newValue = typeof value === "boolean" ? value : !oldValue;
+      if (newValue !== oldValue) {
+        emit("change", newValue);
       }
     };
     const switchClass = computed(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoci",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",
@@ -8,17 +8,10 @@
   "files": [
     "dist/"
   ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs"
-    },
-    "./package.json": "./package.json"
-  },
   "author": "chizuki",
   "license": "MIT",
   "dependencies": {
-    "@vueuse/core": "^9.1.0",
+    "@vueuse/core": "^9.12.0",
     "maybe-types": "^0.0.3"
   },
   "devDependencies": {