fix bugs.

chizukicn · Feb 9, 2023 · 5367af8 · 5367af8
1 parent 5be8c20
commit 5367af8
Show file tree

Hide file tree

Showing 11 changed files with 1,035 additions and 510 deletions.
diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
     "typescript": "^4.8.4",
-    "unbuild": "^0.9.4",
+    "unbuild": "^1.1.1",
     "vitest": "^0.24.0"
   }
 }
diff --git a/packages/hoci/package.json b/packages/hoci/package.json
@@ -8,21 +8,14 @@
   "files": [
     "dist/"
   ],
-  "exports": {
-    ".": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.cjs"
-    },
-    "./package.json": "./package.json"
-  },
   "scripts": {
     "build": "unbuild",
     "stub": "unbuild --stub"
   },
   "author": "chizuki",
   "license": "MIT",
   "dependencies": {
-    "@vueuse/core": "^9.1.0",
+    "@vueuse/core": "^9.12.0",
     "maybe-types": "^0.0.3"
   },
   "devDependencies": {

diff --git a/packages/hoci/src/components/selection/constants.ts b/packages/hoci/src/components/selection/constants.ts
@@ -1,4 +1,5 @@
 import type { MaybeRef } from "@vueuse/core";
+import { MaybePromise } from "maybe-types";
 import type { InjectionKey, Ref } from "vue";
 import type { ActivateEvent, ClassType, ElementLike } from "../../types";
 
@@ -19,7 +20,7 @@ export const ItemOptionsSymbol = Symbol("[hi-selection]options");
 
 export const ActivateEventSymbol: InjectionKey<Ref<ActivateEvent>> = Symbol("[hi-selection]activate-event");
 
-export const ChangeActiveSymbol: InjectionKey<(_: any) => boolean> = Symbol("[hi-selection]change-active");
+export const ChangeActiveSymbol: InjectionKey<(_: any) => MaybePromise<void>> = Symbol("[hi-selection]change-active");
 
 export const IsActiveSymbol: InjectionKey<(_: any) => boolean> = Symbol("[hi-selection]is-active");
 

diff --git a/packages/hoci/src/components/selection/item.ts b/packages/hoci/src/components/selection/item.ts
@@ -66,7 +66,7 @@ export const useSelectionItem = defineHookComponent({
 
     const isActive = inject(IsActiveSymbol, () => false);
 
-    const changeActive = inject(ChangeActiveSymbol, () => false);
+    const changeActive = inject(ChangeActiveSymbol, () => {});
 
     const activeClass = computed(() => inject(ActiveClassSymbol)?.value ?? "active");
     const unactiveClass = computed(() => inject(UnactiveSymbol)?.value ?? "unactive");

diff --git a/packages/hoci/src/components/selection/list.ts b/packages/hoci/src/components/selection/list.ts
@@ -1,5 +1,5 @@
-import { isDefined, syncRef } from "@vueuse/core";
-import type { PropType } from "vue";
+import { isDefined, syncRef, watchOnce } from "@vueuse/core";
+import { nextTick, PropType, watch } from "vue";
 import { computed, defineComponent, h, provide, reactive, renderSlot } from "vue";
 import type { ActivateEvent } from "../../types";
 import { classPropType, labelPropType, valuePropType } from "../../constants";
@@ -86,11 +86,7 @@ export 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));
       }
     });
 
@@ -100,7 +96,6 @@ export const useSelectionList = defineHookComponent({
       },
       set(val) {
         emit("update:modelValue", val);
-        emit("change", val);
       }
     });
 
@@ -129,7 +124,8 @@ export const useSelectionList = defineHookComponent({
       return actives.includes(value);
     }
 
-    function changeActive(option: any) {
+    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);
@@ -144,6 +140,8 @@ export const useSelectionList = defineHookComponent({
           actives.splice(0, actives.length, option);
         }
       }
+      await nextTick();
+      stopWatch();
     }
 
     provide(IsActiveSymbol, isActive);

diff --git a/packages/hoci/src/components/switch.ts b/packages/hoci/src/components/switch.ts
@@ -53,15 +53,14 @@ export const useSwitch = defineHookComponent({
       set(val) {
         checked.value = val;
         emit("update:modelValue", val);
-        emit("change", val);
       }
     });
 
     const toggle = function (value?: any) {
-      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);
       }
     };
 

diff --git a/playground/package.json b/playground/package.json
@@ -1,37 +1,37 @@
 {
-  "name": "playground",
-  "private": true,
-  "version": "0.0.1",
-  "description": "",
-  "dependencies": {
-      "hoci":"workspace:*",
-      "axios": "^0.27.2",
-      "dayjs": "^1.11.4",
-      "element-plus": "^2.2.18",
-      "jquery": "^3.6.0",
-      "query-string": "^7.1.1",
-      "vue": "^3.2.31",
-      "vue-router": "^4.1.2"
-  },
-  "devDependencies": {
-      "@types/jquery": "^3.5.14",
-      "@vitejs/plugin-vue": "^3.0.1",
-      "@vitejs/plugin-vue-jsx": "^2.0.0",
-      "compression": "^1.7.4",
-      "rollup-plugin-visualizer": "^5.8.3",
-      "sass": "^1.55.0",
-      "typescript": "^4.8.4",
-      "unplugin-vue-components": "^0.22.8",
-      "vite": "^3.1.8",
-      "vite-plugin-inspect": "^0.6.0",
-      "vite-plugin-windicss": "^1.8.7",
-      "windicss": "^3.5.6"
-  },
-  "scripts": {
-      "dev": "vite",
-      "preview": "vite preview",
-      "build": "vite build"
-  },
-  "author": "chizuki",
-  "license": "MIT"
+    "name": "playground",
+    "private": true,
+    "version": "0.0.1",
+    "description": "",
+    "dependencies": {
+        "axios": "^0.27.2",
+        "dayjs": "^1.11.4",
+        "element-plus": "^2.2.18",
+        "hoci": "workspace:*",
+        "jquery": "^3.6.0",
+        "query-string": "^7.1.1",
+        "vue": "^3.2.31",
+        "vue-router": "^4.1.2"
+    },
+    "devDependencies": {
+        "@types/jquery": "^3.5.14",
+        "@vitejs/plugin-vue": "^4.0.0",
+        "@vitejs/plugin-vue-jsx": "^3.0.0",
+        "compression": "^1.7.4",
+        "rollup-plugin-visualizer": "^5.8.3",
+        "sass": "^1.55.0",
+        "typescript": "^4.8.4",
+        "unplugin-vue-components": "^0.22.8",
+        "vite": "^4.1.1",
+        "vite-plugin-inspect": "^0.7.15",
+        "vite-plugin-windicss": "^1.8.10",
+        "windicss": "^3.5.6"
+    },
+    "scripts": {
+        "dev": "vite",
+        "preview": "vite preview",
+        "build": "vite build"
+    },
+    "author": "chizuki",
+    "license": "MIT"
 }
diff --git a/playground/src/app.vue b/playground/src/app.vue
@@ -1,44 +1,58 @@
 <script lang="tsx">
-  import { defineComponent, 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[]>([]);
 
-    function log(...args: any[]) {
-      logs.value.push(args.map(r => {
-        if (typeof r === "object") {
-          return JSON.stringify(r);
-        }
-        return r;
-      }).join(" "));
+  const selectionState = reactive({
+    multiple: false,
+    clearable: false
+  })
 
-      // eslint-disable-next-line no-console
-      console.log(...args);
-    }
+  function log(...args: any[]) {
+    logs.value.push(args.map(r => {
+      if (typeof r === "object") {
+        return JSON.stringify(r);
+      }
+      return r;
+    }).join(" "));
 
-    function handleChange(index: number) {
-      log("change", JSON.stringify(index));
-      selectedIndex.value = index;
-    }
+    // eslint-disable-next-line no-console
+    console.log(...args);
+  }
 
-    const isChecked = ref(true);
-    return () => {
-      return <div class="w-full p-4">
-        <HiSelection activateEvent="click" onChange={handleChange} v-model={selectedIndex.value} tag="div" itemClass="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>
-          <HiItem value={3}>Item 3</HiItem>
-        </HiSelection>
-        <HiSwitch v-model={isChecked.value} class="mt-4 select-none" activeClass="text-hex-f00">Switch</HiSwitch>
-        <div>当前选择:{selectedIndex.value}</div>
-        <div class="mt-4"></div>
-          <div>Console:</div>
-          <div class="mt-2">
-            {logs.value.map((log, index) => <div key={index}>{log}</div>)}
-          </div>
-      </div>;
-    };
-  });
+  function handleChange(index: number) {
+    log("change", JSON.stringify(index));
+    selectedIndex.value = index;
+  }
+
+  function clearLog() {
+    logs.value.length =0;
+  }
+
+  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>
+        <HiItem value={3}>Item 3</HiItem>
+      </HiSelection>
+      <div class="flex space-x-4 items-center">
+        <HiSwitch tag="span" v-model={selectionState.multiple} class="cursor-pointer mt-4 duration-200 select-none" activeClass="text-hex-f00">Multiple</HiSwitch>
+        <HiSwitch tag="span" v-model={selectionState.clearable} class="cursor-pointer mt-4 duration-200 select-none" activeClass="text-hex-f00">Clearable</HiSwitch>
+      </div>
+      <div>Selected:{selectedIndex.value}</div>
+      <div class="mt-4"></div>
+      <div class="flex justify-between items-center">
+        <div>Console: </div>
+        <button onClick={clearLog} class="border-solid border-1 border-gray-50">Clear</button>
+      </div>
+      <div class="bg-gray-500 h-100 mt-2 text-white px-4 overflow-y-auto">
+        {logs.value.map((log, index) => <div class="h-5 leading-5" key={index}>{log}</div>)}
+      </div>
+    </div>;
+  };
+});
 </script>
diff --git a/playground/vite.config.ts b/playground/vite.config.ts
@@ -6,6 +6,7 @@ import uncomponents from "unplugin-vue-components";
 import type { Plugin } from "vite";
 import { defineConfig } from "vite";
 import windicss from "vite-plugin-windicss";
+import path from "path"
 
 export default defineConfig({
   server: {
@@ -15,11 +16,12 @@ export default defineConfig({
       strict: false
     }
   },
-  resolve: {
-    alias: {
-      hoci: "@fs/../../packages/hoci/src/index.ts"
+  resolve:{
+    alias:{
+      hoci:path.resolve(__dirname,"../packages/hoci/src/index.ts")
     }
   },
+
   plugins: [
     vue(),
     jsx(),
@@ -29,14 +31,6 @@ export default defineConfig({
       gzipSize: true,
       brotliSize: true
     }) as Plugin,
-    {
-      name: "jiti",
-      resolveId(id: string) {
-        if (id.startsWith("file:///")) {
-          return id.slice(8);
-        }
-      }
-    } as Plugin,
     uncomponents.vite({
       resolvers: []
     })