ct-component-plus 2.0.2 → 2.0.3

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "2.0.2",
+  "version": "2.0.3",
+  "description": "兼容下拉多选时的选中置顶逻辑",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [
@@ -16,8 +17,7 @@
   },
   "dependencies": {
     "cingta-icon": "^2.1.6",
-    "element-plus": "~2.12.0",
-    "publish": "^0.6.0",
+    "element-plus": "2.5.0",
     "vue": "^3.2.47"
   },
   "devDependencies": {

package/packages/components/select/src/index.js

@@ -1,6 +1,6 @@
-import { buriedParamsKey, searchComponentProps } from '../../../hooks';
-import arrowDown from './arrow-down.vue';
-import clearIcon from './clear-icon.vue';
+import { buriedParamsKey, searchComponentProps } from "../../../hooks";
+import arrowDown from "./arrow-down.vue";
+import clearIcon from "./clear-icon.vue";
 
 export const selectEmits = ["update:modelValue", buriedParamsKey];
 export const selectProps = {
@@ -10,8 +10,8 @@ export const selectProps = {
   options: {
     type: Array,
     default() {
-      return []
-    }
+      return [];
+    },
   },
   filterable: Boolean,
   api: String,
@@ -20,16 +20,16 @@ export const selectProps = {
   mapObj: {
     type: Object,
     default() {
-      return {}
-    }
+      return {};
+    },
   },
   selectAllText: {
     type: String,
-    default: '全部'
+    default: "全部",
   },
   connectors: {
     type: String,
-    default: '、'
+    default: "、",
   },
   fitInputWidth: {
     type: Boolean,
@@ -38,15 +38,20 @@ export const selectProps = {
   clearIcon: {
     type: [String, Object],
     default() {
-      return clearIcon
-    }
+      return clearIcon;
+    },
   },
   suffixIcon: {
     type: [String, Object],
     default() {
-      return arrowDown
-    }
+      return arrowDown;
+    },
   },
   noMatchText: String,
   noDataText: String,
-}
+  // 是否保持原始 options 顺序（用于一些情况下不想让多选时“已选项置顶”逻辑）
+  keepOrder: {
+    type: Boolean,
+    default: false,
+  },
+};

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

@@ -155,9 +155,9 @@ const selectText = computed(() => {
       result = selectObj.value.map((item) => item.label).join(cnt);
     }
   }
-  nextTick(() => {
-    selectRef.value.$refs.reference.input.value = result;
-  });
+  // nextTick(() => {
+  //   selectRef.value.$refs.reference.input.value = result;
+  // });
   return result;
 });
 const emptyText = computed(() => {
@@ -178,7 +178,7 @@ watch(
     //     selectRef.value.$refs.reference.input.value = newVal;
     //   })
     // }
-  }
+  },
 );
 watchEffect(async () => {
   // 输入框过滤，触发的事件
@@ -191,7 +191,7 @@ watchEffect(async () => {
       const filterCallbackHandle = await cbs.filterCallback(
         keyword.value,
         showOptions.value,
-        valueModel
+        valueModel,
       );
       if (filterCallbackHandle === false) return;
       arr = filterCallbackHandle || arr;
@@ -208,8 +208,9 @@ watchEffect(async () => {
 
 const optionsRef = ref(null);
 //针对多选时，已选的项要排在整个列表的最前面
+// 当 keepOrder 为 true 时，不做置顶，保持原有顺序（用于层级选择等场景）
 const handleListSort = (val) => {
-  if (props.multiple) {
+  if (props.multiple && !props.keepOrder) {
     if (val) {
       const selectedSet = new Set(valueModel.value);
       filterOptions.value = [
@@ -271,7 +272,7 @@ const watchServiceHandle = async () => {
     try {
       const defineSearchHandle = await cbs.defineSearch(
         optionsByApi,
-        valueModel
+        valueModel,
       );
       if (defineSearchHandle === false) return;
       if (defineSearchHandle) {
@@ -292,7 +293,7 @@ watch(
   },
   {
     immediate: true,
-  }
+  },
 );
 const checkedAll = useCheckedAll(filterOptions, valueModel, {
   onCheckedAll: (falg) => {
@@ -358,7 +359,9 @@ defineExpose({
 </script>
 <style lang="less">
 .ct-select {
-  width: 214px;
+  &.el-select {
+    width: 214px;
+  }
   &__top {
     padding: 0 16px;
     font-size: var(--ct-font-size);
@@ -407,7 +410,7 @@ defineExpose({
     z-index: 3;
     right: var(--ct-component-inner-padding);
     top: 50%;
-    height: calc(var(--ct-component-size) - 2px);
+    height: calc(var(--ct-component-size) - 8px);
     transform: translateY(-50%);
     background-color: #fff;
   }
@@ -419,18 +422,24 @@ 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;
+    }
+    .el-select__placeholder.is-transparent {
+      display: block;
+    }
+    .el-select__selected-item {
+      display: none;
+    }
   }
 }
 </style>

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

@@ -135,9 +135,12 @@ const getYearList = () => {
   }
   yearList.value = yearArr;
 };
-watch(() => props.range, () => {
-  getYearList();
-})
+watch(
+  () => props.range,
+  () => {
+    getYearList();
+  }
+);
 const filterHandleE = (str) => {
   //处理结束年
   if (judgeYear(str) && judgeRange(str)) {
@@ -207,7 +210,7 @@ onMounted(() => {
   getYearList();
 });
 </script>
-<style lang='less'>
+<style lang="less">
 .ct-year-select {
   --el-select-input-focus-border-color: transparent;
   --ct-year-select-select-inner-box-shadow: none;
@@ -273,5 +276,15 @@ onMounted(() => {
       }
     }
   }
+  .el-select__wrapper {
+    padding: 1px 12px;
+    min-height: 30px;
+    box-shadow: var(--ct-year-select-select-inner-box-shadow);
+    &.is-focused,
+    &.is-hovering:not(.is-focused),
+    &.is-disabled {
+      box-shadow: var(--ct-year-select-select-inner-box-shadow);
+    }
+  }
 }
-</style>
+</style>