fix(selection): emit change event.

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

package.json

@@ -34,18 +34,18 @@
     ]
   },
   "devDependencies": {
-    "@curev/eslint-config": "^0.0.4",
-    "@types/node": "^18.6.0",
+    "@curev/eslint-config": "^0.0.7",
+    "@types/node": "^18.13.0",
     "bumpp": "^8.2.1",
     "chokidar": "^3.5.3",
-    "eslint": "^8.27.0",
+    "eslint": "^8.34.0",
     "esno": "^0.16.3",
-    "husky": "^8.0.1",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.1.2",
+    "prettier": "^2.8.4",
     "rimraf": "^3.0.2",
-    "typescript": "^4.8.4",
+    "typescript": "^4.9.5",
     "unbuild": "^1.1.1",
-    "vitest": "^0.24.0"
+    "vitest": "^0.24.5"
   }
 }

packages/hoci/build.config.ts

@@ -1,5 +1,5 @@
+import fs from "fs";
 import { defineBuildConfig } from "unbuild";
-import fs from "fs"
 
 export default defineBuildConfig({
   entries: ["src/index"],
@@ -8,8 +8,8 @@ export default defineBuildConfig({
   declaration: true,
   failOnWarn: false,
   hooks: {
-    "rollup:done": async (options) => {
-      await fs.promises.rename("dist/index.mjs", "dist/index.esm.js")
+    "rollup:done": async () => {
+      await fs.promises.rename("dist/index.mjs", "dist/index.esm.js");
     }
   },
   rollup: {
@@ -18,7 +18,7 @@ export default defineBuildConfig({
       respectExternal: false
     },
     esbuild: {
-      target: "es2015",
+      target: "es2015"
 
     }
   }

packages/hoci/src/components/selection/constants.ts

@@ -1,5 +1,5 @@
 import type { MaybeRef } from "@vueuse/core";
-import { MaybePromise } from "maybe-types";
+import type { MaybePromise } from "maybe-types";
 import type { InjectionKey, Ref } from "vue";
 import type { ActivateEvent, ClassType, ElementLike } from "../../types";
 

packages/hoci/src/components/selection/list.ts

@@ -1,5 +1,5 @@
-import { isDefined, syncRef, watchOnce } from "@vueuse/core";
-import { nextTick, PropType, watch } from "vue";
+import { isDefined, syncRef } from "@vueuse/core";
+import type { PropType } from "vue";
 import { computed, defineComponent, h, provide, reactive, renderSlot } from "vue";
 import type { ActivateEvent } from "../../types";
 import { classPropType, labelPropType, valuePropType } from "../../constants";
@@ -120,28 +120,30 @@ export const useSelectionList = defineHookComponent({
 
     provide(ActivateEventSymbol, computed(() => props.activateEvent));
 
+    const emitChange = () => emit("change", currentValue.value);
+
     function isActive(value: any) {
       return actives.includes(value);
     }
 
     async function changeActive(option: any) {
-      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();
         }
       }
-      await nextTick();
-      stopWatch();
     }
 
     provide(IsActiveSymbol, isActive);

packages/hoci/src/components/switch.ts

@@ -58,8 +58,8 @@ export const useSwitch = defineHookComponent({
 
     const toggle = function (value?: any) {
       const oldValue = modelValue.value;
-      const newValue = typeof value ==="boolean" ? value : !oldValue;
-      if(newValue !== oldValue){
+      const newValue = typeof value === "boolean" ? value : !oldValue;
+      if (newValue !== oldValue) {
         emit("change", newValue);
       }
     };

playground/.gitignore

@@ -0,0 +1 @@
+components.d.ts

playground/package.json

@@ -21,7 +21,7 @@
         "rollup-plugin-visualizer": "^5.8.3",
         "sass": "^1.55.0",
         "typescript": "^4.8.4",
-        "unplugin-vue-components": "^0.22.8",
+        "unplugin-vue-components": "^0.23.0",
         "vite": "^4.1.1",
         "vite-plugin-inspect": "^0.7.15",
         "vite-plugin-windicss": "^1.8.10",

playground/src/app.vue

@@ -1,39 +1,39 @@
 <script lang="tsx">
-import { defineComponent, reactive, ref } from "vue";
-import { HiItem, HiSelection, HiSwitch } from "hoci";
+  import { defineComponent, reactive, ref } from "vue";
+  import { HiItem, HiSelection, HiSwitch } from "hoci";
 
-export default defineComponent(() => {
-  const selectedIndex = ref(2);
-  const logs = ref<string[]>([]);
+  export default defineComponent(() => {
+    const selectedIndex = ref(2);
+    const logs = ref<string[]>([]);
 
-  const selectionState = reactive({
-    multiple: false,
-    clearable: false
-  })
+    const selectionState = reactive({
+      multiple: false,
+      clearable: false
+    });
 
-  function log(...args: any[]) {
-    logs.value.push(args.map(r => {
-      if (typeof r === "object") {
-        return JSON.stringify(r);
-      }
-      return r;
-    }).join(" "));
+    function log(...args: any[]) {
+      logs.value.push(args.map(r => {
+        if (typeof r === "object") {
+          return JSON.stringify(r);
+        }
+        return r;
+      }).join(" "));
 
-    // eslint-disable-next-line no-console
-    console.log(...args);
-  }
+      // eslint-disable-next-line no-console
+      console.log(...args);
+    }
 
-  function handleChange(index: number) {
-    log("change", JSON.stringify(index));
-    selectedIndex.value = index;
-  }
+    function handleChange(index: number) {
+      log("change", JSON.stringify(index));
+      selectedIndex.value = index;
+    }
 
-  function clearLog() {
-    logs.value.length =0;
-  }
+    function clearLog() {
+      logs.value.length = 0;
+    }
 
-  return () => {
-    return <div class="w-full p-4">
+    return () => {
+      return <div class="w-full p-4">
       <HiSelection {...selectionState} activateEvent="click" onChange={handleChange} v-model={selectedIndex.value} tag="div" itemClass="duration-300 cursor-pointer px-2 py-1" class="flex space-x-4 items-center" activeClass="text-white bg-hex-f00">
         <HiItem value={1}>Item 1</HiItem>
         <HiItem value={2}>Item 2</HiItem>
@@ -53,6 +53,6 @@ export default defineComponent(() => {
         {logs.value.map((log, index) => <div class="h-5 leading-5" key={index}>{log}</div>)}
       </div>
     </div>;
-  };
-});
+    };
+  });
 </script>

playground/vite.config.ts

@@ -1,12 +1,12 @@
+import path from "path";
 import vue from "@vitejs/plugin-vue";
 import jsx from "@vitejs/plugin-vue-jsx";
 import visualizer from "rollup-plugin-visualizer";
-import uncomponents from "unplugin-vue-components";
+import uncomponents from "unplugin-vue-components/vite";
 
 import type { Plugin } from "vite";
 import { defineConfig } from "vite";
 import windicss from "vite-plugin-windicss";
-import path from "path"
 
 export default defineConfig({
   server: {
@@ -16,9 +16,9 @@ export default defineConfig({
       strict: false
     }
   },
-  resolve:{
-    alias:{
-      hoci:path.resolve(__dirname,"../packages/hoci/src/index.ts")
+  resolve: {
+    alias: {
+      hoci: path.resolve(__dirname, "../packages/hoci/src/index.ts")
     }
   },
 
@@ -31,7 +31,7 @@ export default defineConfig({
       gzipSize: true,
       brotliSize: true
     }) as Plugin,
-    uncomponents.vite({
+    uncomponents({
       resolvers: []
     })
   ]