docs: add select doc api

packages/docs/docs/.vitepress/docs/documentation/components/input.md

@@ -53,13 +53,13 @@ props :
     - name: border
       type: Boolean
       values: true | false
-      description: Change the type of input (html values).
+      description: Change input to bottom border style
       default: "false"
       usageUrl: input#border
     - name: shadow
       type: Boolean
       values: true | false
-      description: Change the style of the input.
+      description: Add a shadow to the input.
       default: "false"
       usageUrl: input#shadow
     - name: iconAfter
@@ -78,7 +78,7 @@ slots :
     - name: icon
       type: slot
       values:
-      description: Add an icon to the alert.
+      description: Add an icon to the input.
       default: 
       usageUrl: input#icon
     - name: message

packages/docs/docs/.vitepress/docs/documentation/components/select.md

@@ -1,3 +1,87 @@
+---
+prev: Switch
+next: Avatar
+props : 
+    - name: color
+      type: String
+      values: Vuesax Colors | RGB | HEX
+      description: Change the color of the select.
+      default: primary
+      usageUrl: select#color
+    - name: disabled
+      type: Boolean
+      values: true | false
+      description: Determine if the select is in the disabled status.
+      default: "false"
+      usageUrl: select#default
+    - name: loading
+      type: Boolean
+      values: true | false
+      description: Determine if the select has a loading animation and is disabled.
+      default: "false"
+      usageUrl: select#loading
+    - name: modelValue
+      type: String
+      values: String
+      description: Determine the value of the select.
+      usageUrl: select#default
+    - name: placeholder
+      type: String
+      values: String
+      description: Add a placeholder to the select.
+      usageUrl: select#label
+    - name: label	
+      type: String
+      values: String
+      description: Add a label to the select.
+      usageUrl: select#label
+    - name: label-placeholder	
+      type: String
+      values: String
+      description: Add a placeholder that when in focus or with value becomes a label.
+      usageUrl: select#label
+    - name: filter
+      type: Boolean
+      values: true | false
+      description: Add the functionality to filter the select options.
+      default: "false"
+      usageUrl: select#filter
+    - name: multiple
+      type: Boolean
+      values: true | false
+      description: Add the functionality of being able to select several options from a select.
+      default: "false"
+      usageUrl: select#multiple
+    - name: status
+      type: String
+      values: Vuesax Colors
+      description: Change the status of the select to the color provided.	
+      usageUrl: select#status
+    - name: block
+      type: Boolean
+      values: true | false
+      description: Change the width of the button to fill the parent element.
+      default: "false"
+    - name: disabled
+      type: Boolean
+      values: true | false
+      description: Determine if the select is in the disabled status.
+      default: "false"
+slots : 
+    - name: message-{color}
+      type: slot
+      values:
+      description: Add a message below the select.
+      default: 
+      usageUrl: select#message
+    - name: noData
+      type: slot
+      values:
+      description: Customize the element that is displayed when there is no data after filtering.
+      default: 
+      usageUrl: select#filter
+---
+
 # Select
 
 <card>
@@ -12,7 +96,7 @@ Add a select element with the `vs-select` component and the `vs-option` sub comp
 
 ## Color
 
-Change the color of the component with the `color` property, the allowed values ​​are the main colors of vuesax and the colors (**RGB** and **HEX**)
+Change the color of the select with the `color` property, the allowed values ​​are the main colors of vuesax and the colors (**RGB** and **HEX**)
 
 </card>
 
@@ -28,7 +112,7 @@ Add a label to the select easily with the `label` property, you can also add a `
 
 ## Group
 
-Group options within the select with the sub-component `vs-option-group`, as the required slot is the `title` to add a title to the item group
+Group options within the select with the sub-component `VsOptionGroup`, as the required slot is the `title` to add a title to the item group
 
 </card>
 
@@ -64,11 +148,7 @@ Add a loading animation to the select with the `loading` property, this property
 
 ## Status
 
-Change the style of the component to the color passed in the `status` property, the allowed colors are only the main ones of vuesax
-
-:::tip
-This property can be used to indicate a missing field to the user or when something is ready.
-:::
+Change the style of the select to the color passed in the `status` property, the allowed colors are only the main ones of vuesax
 
 </card>
 

packages/docs/docs/.vitepress/docs/documentation/components/sidebar.md

@@ -161,7 +161,7 @@ You can define if the sidebar is visible or hidden with the `visible` property,
 
 ## Position Right
 
-Change the position of the sidebar to the right and its animation with the `right` property
+You can use the `right` property to change the sidebar to a right-handed layout
 
 </card>
 

packages/docs/docs/.vitepress/docs/zh/documentation/components/select.md

@@ -1,3 +1,81 @@
+---
+prev: Switch
+next: Avatar
+props : 
+    - name: color
+      type: String
+      values: Vuesax Colors | RGB | HEX
+      description: 更改选择器的颜色
+      default: primary
+      usageUrl: select#color
+    - name: disabled
+      type: Boolean
+      values: true | false
+      description: 确定选择器是否处于禁用状态
+      default: "false"
+    - name: loading
+      type: Boolean
+      values: true | false
+      description: 确定选择器是否展示加载动画并已禁用
+      default: "false"
+      usageUrl: select#loading
+    - name: modelValue
+      type: String
+      values: String
+      description: 确定选择器的值
+      usageUrl: select#default
+    - name: placeholder
+      type: String
+      values: String
+      description: 在选择器中添加占位符。
+      usageUrl: select#label
+    - name: label	
+      type: String
+      values: String
+      description: 在选择器中添加标签。
+      usageUrl: select#label
+    - name: label-placeholder	
+      type: String
+      values: String
+      description: 添加一个占位符，当处于聚焦状态或有数值时，占位符就会变成一个标签
+      usageUrl: select#label
+    - name: filter
+      type: Boolean
+      values: true | false
+      description: 添加过滤选择器选项的功能
+      default: "false"
+      usageUrl: select#filter
+    - name: multiple
+      type: Boolean
+      values: true | false
+      description: 增加从选择器中选择多个选项的功能
+      default: "false"
+      usageUrl: select#multiple
+    - name: status
+      type: String
+      values: Vuesax Colors
+      description: 将选择器的状态更改为所提供的颜色
+      usageUrl: select#status
+    - name: block
+      type: Boolean
+      values: true | false
+      description: 更改按钮的宽度，以填充父元素
+      default: "false"
+slots : 
+    - name: message-{color}
+      type: slot
+      values:
+      description: 在选择下器方添加一条提示信息
+      default: 
+      usageUrl: select#message
+    - name: noData
+      type: slot
+      values:
+      description: 自定义过滤后无数据时显示的元素
+      default: 
+      usageUrl: select#filter
+---
+
 # Select 选择器
 
 <card>

packages/docs/docs/.vitepress/theme/global-components/template/Select/Default.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="center">
-    <VsSelect v-model="value" placeholder="Select">
+    <VsSelect v-model="value" placeholder="Select" disabled>
       <VsOption label="Vuesax" value="1"></VsOption>
       <VsOption label="Vue" value="2"></VsOption>
       <VsOption label="Javascript" value="3"></VsOption>

packages/vuesax/src/components/select/base/Select.tsx

@@ -90,7 +90,6 @@ const Select = defineComponent({
     const placeholderRef = ref<HTMLElement>()
     const contentRef = ref<HTMLElement>()
 
-    const uids: SelectProvider['uids'] = ref([])
     const selectedLabel = ref<Pick<Option, 'label' | 'value'>[] | string>()
     const isOptionsShow = ref(false)
     const isFilterActive = ref(false)
@@ -332,8 +331,8 @@ const Select = defineComponent({
     const isNoData = computed(
       () =>
         childOptions.value.filter(
-          (option) => !option.hiddenOptionGroup || !option.hiddenOption
-        ).length === 0
+          (option) => option.hiddenOptionGroup || option.hiddenOption
+        ).length === childOptions.value.length
     )
 
     const handleResize = () => {
@@ -426,7 +425,6 @@ const Select = defineComponent({
       textFilter,
       multiple: toRef(props, 'multiple'),
       onClickOption,
-      uids,
       hoverOption,
       childOptions,
       isTargetSelect,

packages/vuesax/src/components/select/base/style.scss

@@ -144,7 +144,6 @@
 
   &.top {
     &.show-options {
-
       .vs-select__input,
       .vs-select__chips {
         border-radius: 0px 0px 12px 12px !important;
@@ -182,7 +181,9 @@
       border-radius: 12px 12px 0px 0px;
       background: -color("background");
       box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, -var(shadow-opacity));
-      transition: all 0.25s ease, height 0s;
+      transition:
+        all 0.25s ease,
+        height 0s;
       border: 2px solid transparent;
       color: -color("text", 1);
     }
@@ -192,7 +193,9 @@
       background: -color("background");
       box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, -var(shadow-opacity));
       transform: translate(0, -4px);
-      transition: all 0.25s ease, height 0s;
+      transition:
+        all 0.25s ease,
+        height 0s;
 
       &:after {
         opacity: 0;
@@ -220,7 +223,9 @@
     border: 2px solid transparent;
     border-radius: 12px;
     cursor: pointer;
-    transition: all 0.25s ease, height 0s;
+    transition:
+      all 0.25s ease,
+      height 0s;
     background: -color("gray-2");
     color: -color("text");
     min-height: 38px;
@@ -244,7 +249,7 @@
       transform: translate(0, -4px);
       transition: all 0.25s ease;
 
-      ~.vs-select__label--placeholder {
+      ~ .vs-select__label--placeholder {
         opacity: 1;
         visibility: visible;
         pointer-events: auto;
@@ -258,14 +263,17 @@
       background: -color("background");
       box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, -var(shadow-opacity));
 
-      ~.vs-select__label {
+      ~ .vs-select__label {
         margin-top: -4px;
       }
 
-      ~.vs-icon-arrow {
+      ~ .vs-icon-arrow {
         margin-top: -6px;
       }
     }
+    &:disabled {
+      cursor: not-allowed;
+    }
   }
 
   &__chips {
@@ -284,7 +292,9 @@
     justify-content: flex-start;
     flex-wrap: wrap;
     padding: 5px;
-    transition: all 0.25s ease, height 0s;
+    transition:
+      all 0.25s ease,
+      height 0s;
     padding-right: 26px;
 
     &:focus {
@@ -300,7 +310,7 @@
       box-shadow: 0px 5px 25px -4px rgba(0, 0, 0, -var(shadow-opacity));
       transition: all 0.25s ease;
 
-      ~.vs-icon-arrow {
+      ~ .vs-icon-arrow {
         margin-top: -6px;
         transition: all 0.25s ease;
       }
@@ -530,7 +540,7 @@
       content: "";
     }
 
-    &~.vs-icon-arrow {
+    & ~ .vs-icon-arrow {
       opacity: 0 !important;
     }
   }
@@ -541,7 +551,7 @@
     padding: 0px 7px;
     transition: all 0.25s ease;
     overflow: hidden;
-    color: -color(color)
+    color: -color(color);
   }
 }
 
@@ -565,4 +575,4 @@
       }
     }
   }
-}
+}