ct-component-plus 0.0.48 → 0.0.50

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "0.0.48",
+  "version": "0.0.50",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [

package/packages/components/select/src/select.vue

@@ -14,11 +14,13 @@
     :select-text="selectText"
     :popper-class="ns.e('popper')"
     @focus="showSearchPrefix"
-    @blur="hideSearchPrefix">
+    @blur="hideSearchPrefix"
+  >
     <template #prefix>
       <div
         :class="[ns.e('filterable-icon')]"
-        v-if="filterable && !valueModel && showSearch">
+        v-if="filterable && !valueModel && showSearch"
+      >
         <ct-icon name="search_line"></ct-icon>
       </div>
       <slot name="prefix"></slot>
@@ -51,7 +53,8 @@
           :key="item.value"
           :label="item.label"
           :value="item.value"
-          :disabled="item.disabled">
+          :disabled="item.disabled"
+        >
           <slot name="option" :item="item" :index="index">
             <span :title="selectTooltip ? item.label : undefined">{{
               item.label
@@ -70,7 +73,15 @@
 </template>
 
 <script setup>
-import { onMounted, computed, ref, watch, inject, watchEffect } from "vue";
+import {
+  onMounted,
+  computed,
+  ref,
+  watch,
+  inject,
+  watchEffect,
+  nextTick,
+} from "vue";
 import { selectEmits, selectProps } from "./index";
 import { useNamespace, useBuriedParams, useCheckedAll } from "../../../hooks";
 import { isFunction, isArray } from "../../../utils";
@@ -128,14 +139,24 @@ const selectObj = computed({
   },
 });
 const selectText = computed(() => {
-  if (!props.multiple) return "";
-  if (
-    showOptions.value.length &&
-    showOptions.value.length === valueModel.value.length
-  )
-    return props.selectAllText;
-  const cnt = props.connectors;
-  return selectObj.value.map((item) => item.label).join(cnt);
+  let result = "";
+  if (!props.multiple) {
+    return result;
+  } else {
+    if (
+      showOptions.value.length &&
+      showOptions.value.length === valueModel.value.length
+    ) {
+      result = props.selectAllText;
+    } else {
+      const cnt = props.connectors;
+      result = selectObj.value.map((item) => item.label).join(cnt);
+    }
+  }
+  nextTick(() => {
+    selectRef.value.$refs.reference.input.value = result;
+  });
+  return result;
 });
 const emptyText = computed(() => {
   return showOptions.value.length
@@ -150,6 +171,11 @@ watch(
   () => selectText.value,
   (newVal) => {
     selectRef.value.selectedLabel = newVal;
+    // if (props.multiple) {
+    //   nextTick(() => {
+    //     selectRef.value.$refs.reference.input.value = newVal;
+    //   })
+    // }
   }
 );
 watchEffect(async () => {
@@ -363,18 +389,18 @@ defineExpose({
     color: var(--ct-color-grey-sub);
   }
   &.is-multiple {
-    &::after {
-      content: attr(select-text);
-      position: absolute;
-      left: var(--ct-component-inner-padding);
-      right: calc(var(--ct-component-inner-padding) * 2);
-      top: 50%;
-      transform: translateY(-50%);
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      cursor: pointer;
-    }
+    // &::after {
+    //   content: attr(select-text);
+    //   position: absolute;
+    //   left: var(--ct-component-inner-padding);
+    //   right: calc(var(--ct-component-inner-padding) * 2);
+    //   top: 50%;
+    //   transform: translateY(-50%);
+    //   text-overflow: ellipsis;
+    //   overflow: hidden;
+    //   white-space: nowrap;
+    //   cursor: pointer;
+    // }
   }
 }
 </style>