ci: vue/use

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.9-alpha.1",
+  "version": "0.3.9-alpha.2",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
@@ -37,9 +37,9 @@
     "vue": "^3.2.31"
   },
   "dependencies": {
-    "@layui/hooks-vue": "^0.1.7",
     "@layui/icons-vue": "^1.0.7",
     "@layui/layer-vue": "^1.3.5",
+    "@vueuse/core": "^7.6.2",
     "async-validator": "^4.0.7",
     "countup.js": "^2.0.8",
     "evtd": "^0.2.3",

src/component/colorPicker/index.vue

@@ -131,7 +131,6 @@ let blue = ref(0);
 let alpha = ref(1);
 
 onMounted(() => {
-  console.log(props.modelValue)
   let { r, g, b, a } = parseColor(props.modelValue);
   red.value = r;
   green.value = g;

src/component/dropdown/index.vue

@@ -5,20 +5,23 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { provide, ref, watch } from "vue";
+import { provide, ref, watch } from "vue"
-import { useClickOutside } from "@layui/hooks-vue";
+import { onClickOutside } from "@vueuse/core"
 
 export interface LayDropdownProps {
   trigger?: string;
 }
 
 const dropdownRef = ref<null | HTMLElement>(null);
-const isClickOutside = useClickOutside(dropdownRef);
 
 const props = withDefaults(defineProps<LayDropdownProps>(), {
   trigger: "click",
 });
 
+onClickOutside(dropdownRef, (event) => {
+   openState.value = false;
+})
+
 const openState = ref(false);
 
 const open = function () {
@@ -33,12 +36,6 @@ const toggle = function () {
   openState.value = !openState.value;
 };
 
-watch(isClickOutside, () => {
-  if (isClickOutside.value) {
-    openState.value = false;
-  }
-});
-
 provide("openState", openState);
 
 defineExpose({ open, hide, toggle });

src/component/menuItem/index.vue

@@ -13,11 +13,8 @@ export interface LayMenuItemProps {
 }
 
 const slots = useSlots();
-
 const props = defineProps<LayMenuItemProps>();
-
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
-
 const selectHandle = function () {
   selectedKey.value = props.id;
 };

src/component/select/index.vue

@@ -17,7 +17,7 @@ import {
   toRefs,
   Ref,
 } from "vue";
-import { useClickOutside } from "@layui/hooks-vue";
+import { onClickOutside } from "@vueuse/core";
 import { SelectItem } from "../../types";
 
 export interface LaySelectProps {
@@ -31,13 +31,10 @@ export interface LaySelectProps {
 }
 
 const selectRef = ref<null | HTMLElement>(null);
-const isClickOutside = useClickOutside(selectRef);
 
-watch(isClickOutside, () => {
+onClickOutside(selectRef, (event) => {
-  if (isClickOutside.value) {
+  openState.value = false;
-    openState.value = false;
+})
-  }
-});
 
 const props = withDefaults(defineProps<LaySelectProps>(), {
   modelValue: null,