✨(component): update

package/component/src/component/select/index.vue

@@ -6,13 +6,11 @@ export default {
 
 <script setup lang="ts">
 import "./index.less";
-import { provide, computed, WritableComputedRef, ref } from "vue";
+import { provide, computed, WritableComputedRef, ref, Ref, useSlots, onMounted, VNode, Component } from "vue";
 import LayInput from "../input/index.vue";
 import LayTagInput from "../tagInput/index.vue";
 import LayDropdown from "../dropdown/index.vue";
-import LaySelectOption, {
-  LaySelectOptionProps,
-} from "../selectOption/index.vue";
+import LaySelectOption, { LaySelectOptionProps } from "../selectOption/index.vue";
 
 export interface LaySelectProps {
   name?: string;
@@ -41,9 +39,29 @@ const props = withDefaults(defineProps<LaySelectProps>(), {
   allowClear: false,
 });
 
+const slots = useSlots();
 const emits = defineEmits<SelectEmits>();
-
 const searchValue = ref("");
+const openState: Ref<boolean> = ref(false);
+const selectedItem: Ref<any> = ref([]);
+const options = ref<any>([]);
+
+onMounted(() => {
+    if(slots.default) {
+      getOption(slots.default());
+    }
+})
+
+const getOption = function (nodes: VNode[]) {
+  nodes?.map((item: VNode) => {
+    let component = item.type as Component;
+    if (component.name === LaySelectOption.name) {
+      options.value.push(item.props);
+    } else {
+      getOption(item.children as VNode[]);
+    }
+  });
+};
 
 const selectedValue = computed({
   get() {
@@ -59,19 +77,27 @@ const multiple = computed(() => {
   return props.multiple;
 });
 
+provide("selectedItem", selectedItem);
+provide("openState", openState);
 provide("selectedValue", selectedValue);
 provide("searchValue", searchValue);
 provide("multiple", multiple);
 </script>
 
 <template>
+  可选项: {{ options }}
+  选中值: {{ selectedValue }}
   <div class="layui-select">
-    <lay-dropdown update-at-scroll>
+    <lay-dropdown
+      :disabled="disabled"     
+      :update-at-scroll = "true"  
+      @show="openState = true"
+      @hide="openState = false">
       <lay-tag-input
         v-if="multiple"
         v-model="selectedValue"
+        :allow-clear="allowClear"
         :disabledInput="true"
-        :allow-clear="true"
       >
         <template #suffix>
           <lay-icon type="layui-icon-triangle-d"></lay-icon>
@@ -81,7 +107,7 @@ provide("multiple", multiple);
         v-else
         v-model="selectedValue"
         :placeholder="placeholder"
-        :allow-clear="true"
+        :allow-clear="allowClear"
       >
         <template #suffix>
           <lay-icon type="layui-icon-triangle-d"></lay-icon>
@@ -109,4 +135,4 @@ provide("multiple", multiple);
       </template>
     </lay-dropdown>
   </div>
-</template>
+</template>

package/component/src/component/selectOption/index.vue

@@ -6,7 +6,15 @@ export default {
 
 <script setup lang="ts">
 import LayCheckbox from "../checkbox/index.vue";
-import { computed, ComputedRef, inject, WritableComputedRef, Ref } from "vue";
+import {
+  computed,
+  ComputedRef,
+  inject,
+  WritableComputedRef,
+  Ref,
+  onMounted,
+} from "vue";
+import { arrayExpression } from "@babel/types";
 
 export interface LaySelectOptionProps {
   label: string;
@@ -21,15 +29,17 @@ const props = withDefaults(defineProps<LaySelectOptionProps>(), {
   label: "",
 });
 
-const selectedValue: WritableComputedRef<any> = inject(
-  "selectedValue"
-) as WritableComputedRef<any>;
+const selectedItem: Ref<any> = inject("selectedItem") as Ref<any>;
+const openState: Ref<boolean> = inject("openState") as Ref<boolean>;
+const selectedValue: WritableComputedRef<any> = inject("selectedValue") as WritableComputedRef<any>;
 const searchValue: Ref<string> = inject("searchValue") as Ref<string>;
 const multiple: ComputedRef = inject("multiple") as ComputedRef;
 
 const handleSelect = () => {
   if (!multiple.value) {
+    openState.value = false;
     selectedValue.value = props.value;
+    select();
   }
 };
 
@@ -41,12 +51,45 @@ const selected = computed(() => {
   }
 });
 
+const select = () => {
+
+    const info = {
+      label: props.label,
+      value: props.value,
+      dispabled: props.disabled,
+      keyword: props.keyword,
+    };
+
+    if (multiple.value) {
+      if (Array.isArray(selectedItem.value)) {
+        if (notChecked.value) selectedItem.value.push(info);
+      } else {
+        selectedItem.value = [info];
+      }
+    } else {
+      selectedItem.value = info;
+    }
+
+}
+
 const display = computed(() => {
   return (
     props.keyword.indexOf(searchValue.value) > -1 ||
     props.label.indexOf(searchValue.value) > -1
   );
 });
+
+const notChecked = computed(() => {
+  return (
+    selectedItem.value.find((item: any) => {
+      return item.value === props.value;
+    }) === undefined
+  );
+});
+
+onMounted(() => {
+  selected.value && select();
+});
 </script>
 
 <template>

package/document-component/src/view/index.vue

@@ -32,7 +32,7 @@
           >
           <span
             >{{ t("home.download") }}：<em class="site-showdowns"
-              >26,491</em
+              >29,424</em
             ></span
           >
         </div>