ct-component-plus 2.1.10 → 2.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "2.1.10",
+  "version": "2.2.0",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "cingta-icon": "^2.1.6",
-    "element-plus": "2.11.0",
+    "element-plus": "~2.4.4",
     "vue": "^3.2.47"
   },
   "devDependencies": {

package/packages/components/cascader/src/cascader.vue

@@ -5,6 +5,7 @@
       ns.b(),
       ns.is('disabled', disabled),
       ns.is('filterable', filterable),
+      componentId,
     ]"
     v-model="showValue"
     :props="propsShow"
@@ -41,6 +42,7 @@ const serviceConfig = inject("$ctServiceConfig");
 
 const ns = useNamespace("cascader");
 const cascaderRef = ref(null);
+const componentId = `ct-cascader-${Math.random().toString(36).slice(2)}`;
 const checkedText = ref("");
 const propsShow = computed(() => {
   return {
@@ -73,6 +75,19 @@ watch(showValue, async (newValue) => {
     });
     props.cbs.change(dataList, cascaderRef.value);
   }
+  if (propsShow.value.multiple && props.filterable) {
+    await nextTick();
+
+    // 如果组件内部没找到，尝试在文档中通过类名查找（作为最后的兜底，注意可能会影响页面上其他同类组件，所以最好通过el限制范围，如果el也拿不到才用document）
+    const targetInput = document.querySelector(
+      `.${componentId} .el-cascader__search-input`
+    );
+
+    if (targetInput) {
+      targetInput.value = "";
+      targetInput.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  }
 });
 const popperClassShow = computed(() => {
   let popperClass = ns.e("dropdown");

package/packages/components/date-picker/src/date-picker.vue

@@ -2,14 +2,12 @@
   <el-date-picker
     :class="[ns.b()]"
     v-model="showValue"
-    :name="componentName"
     :value-format="valueFormat"
     :range-separator="rangeSeparator"
     :clear-icon="clearIcon"
     :prefix-icon="prefixIcon"
     :unlink-panels="unlinkPanels"
-    v-bind="rawAttr"
-  >
+    v-bind="rawAttr">
     <template #default="cell">
       <slot v-bind="cell"></slot>
     </template>
@@ -26,15 +24,6 @@ const emit = defineEmits(datePickerEmits);
 const attr = useAttrs();
 const ns = useNamespace("date-picker");
 
-const componentName = computed(() => {
-  const rawType = props.rawAttr?.type || attr.type;
-  if (isArray(props.name)) return props.name;
-  if (rawType && rawType.includes("range")) {
-    return props.name ? [props.name, props.name] : [];
-  }
-  return props.name;
-});
-
 const showValue = computed({
   get() {
     return props.modelValue;

package/packages/components/date-picker/src/index.js

@@ -1,6 +1,6 @@
-import { buriedParamsKey, searchComponentProps } from "../../../hooks";
-import clearIcon from "./clear-icon.vue";
-import dateIcon from "./date-icon.vue";
+import { buriedParamsKey, searchComponentProps } from '../../../hooks';
+import clearIcon from './clear-icon.vue';
+import dateIcon from './date-icon.vue';
 
 export const datePickerEmits = ["update:modelValue", buriedParamsKey];
 export const datePickerProps = {
@@ -8,31 +8,27 @@ export const datePickerProps = {
   modelValue: [Date, Number, String, Array],
   valueFormat: {
     type: String,
-    default: "x",
+    default: 'x'
   },
   addTimestamp: [Number, String, Array, Function],
   rangeSeparator: {
     type: String,
-    default: "至",
+    default: '至',
   },
   clearIcon: {
     type: [String, Object],
     default() {
-      return clearIcon;
-    },
+      return clearIcon
+    }
   },
   prefixIcon: {
     type: [String, Object],
     default() {
-      return dateIcon;
-    },
+      return dateIcon
+    }
   },
   unlinkPanels: {
     type: Boolean,
-    default: true,
-  },
-  name: {
-    type: [String, Array],
-    default: "",
-  },
-};
+    default: true
+  }
+}

package/packages/components/index.js

@@ -3,9 +3,7 @@ import radio from './radio';
 import checkbox from './checkbox';
 import input from './input';
 import inputRange from './input-range';
-import numberInputRange from './number-input-range';
 import select from './select';
-import pagingSelect from './paging-select';
 import yearSelect from './year-select';
 import datePicker from './date-picker';
 import cascader from './cascader';
@@ -36,9 +34,7 @@ const components = [
   checkbox,
   input,
   inputRange,
-  numberInputRange,
   select,
-  pagingSelect,
   yearSelect,
   datePicker,
   cascader,
@@ -83,4 +79,4 @@ export default {
   install
 }
 export { CtMessage }
-export * from 'element-plus'
+export * from 'element-plus'

package/packages/components/input/src/input.vue

@@ -62,7 +62,7 @@ defineExpose({
   ref: inputRef,
 });
 </script>
-<style lang="less">
+<style lang='less'>
 .ct-input {
   @R: .ct-input;
   --ct-input-focus-color: var(--ct-color-primary);
@@ -104,4 +104,4 @@ defineExpose({
     }
   }
 }
-</style>
+</style>

package/packages/components/search-box/index.js

@@ -1,13 +1,11 @@
-import CtSearchBox from "./src/search-box.vue";
+import CtSearchBox from './src/search-box.vue';
 
-import CtInput from "../input";
-import CtSelect from "../select";
-import CtDatePicker from "../date-picker";
-import CtCascader from "../cascader";
-import CtYearSelect from "../year-select";
-import CtRadio from "../radio";
-import CtNumberInputRange from "../number-input-range";
-import CtPagingSelect from "../paging-select";
+import CtInput from '../input';
+import CtSelect from '../select';
+import CtDatePicker from '../date-picker';
+import CtCascader from '../cascader';
+import CtYearSelect from '../year-select';
+import CtRadio from '../radio';
 
 export const searchComponents = {
   CtInput,
@@ -15,17 +13,15 @@ export const searchComponents = {
   CtDatePicker,
   CtCascader,
   CtYearSelect,
-  CtRadio,
-  CtNumberInputRange,
-  CtPagingSelect,
-};
+  CtRadio
+}
 
 /* istanbul ignore next */
 CtSearchBox.install = function (Vue) {
-  Vue.component("CtSearchBox", CtSearchBox);
+  Vue.component('CtSearchBox', CtSearchBox);
   // for (const key in searchComponents) {
   //   Vue.component(key, searchComponents[key]);
   // }
 };
 
-export default CtSearchBox;
+export default CtSearchBox;

package/packages/components/search-box/src/search-box.vue

@@ -98,7 +98,7 @@ const judgeIsHideLabelTooltip = (item) => {
 
 const clickItem = (item) => {
   emit("clickItem", item);
-};
+}
 const getComponentClass = (item) => {
   const classList = [];
   if (item.componentClass) {
@@ -117,16 +117,8 @@ const getComponentStyle = (item) => {
   return style;
 };
 const componentAll = computed(() => {
-  const {
-    CtInput,
-    CtSelect,
-    CtDatePicker,
-    CtCascader,
-    CtYearSelect,
-    CtRadio,
-    CtNumberInputRange,
-    CtPagingSelect,
-  } = searchComponents;
+  const { CtInput, CtSelect, CtDatePicker, CtCascader, CtYearSelect, CtRadio } =
+    searchComponents;
   const componentMap = {
     0: CtInput,
     1: CtSelect,
@@ -135,8 +127,6 @@ const componentAll = computed(() => {
     12: CtYearSelect,
     13: "div",
     20: CtRadio,
-    21: CtNumberInputRange,
-    22: CtPagingSelect,
     ...userDefinedSearchComponent,
   };
   return componentMap;
@@ -249,8 +239,7 @@ onMounted(() => {});
       }
       .el-input__wrapper,
       .el-select__wrapper,
-      .ct-year-select__wrapper,
-      .ct-number-input-range__wrapper {
+      .ct-year-select__wrapper {
         --el-select-input-focus-border-color: var(
           --ct-search-box-inner-border-color
         );

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

@@ -5,14 +5,14 @@
     :class="[ns.b(), ns.is('multiple', multiple)]"
     v-model="valueModel"
     collapse-tags
-    v-bind="bindAttrs"
+    v-bind="rawAttr"
     :multiple="multiple"
     :filterable="filterable"
     :clear-icon="clearIcon"
     :suffix-icon="suffixIcon"
     :fit-input-width="fitInputWidth"
     :select-text="selectText"
-    :popper-class="popperClass"
+    :popper-class="ns.e('popper')"
     @focus="showSearchPrefix"
     @blur="hideSearchPrefix"
     @click="focusSearchInput"
@@ -35,7 +35,7 @@
           </template>
         </el-input>
       </div>
-      <div :class="[ns.e('select')]" v-if="!bindAttrs.multipleLimit">
+      <div :class="[ns.e('select')]" v-if="!rawAttr.multipleLimit">
         <span :class="[ns.e('select-title')]">
           <span v-if="!keyword">已选{{ selectLength }}项</span>
           <span v-else>检索结果</span>
@@ -74,12 +74,6 @@
   </el-select>
 </template>
 
-<script>
-export default {
-  inheritAttrs: false,
-};
-</script>
-
 <script setup>
 import {
   onMounted,
@@ -89,7 +83,6 @@ import {
   inject,
   watchEffect,
   nextTick,
-  useAttrs,
 } from "vue";
 import { selectEmits, selectProps } from "./index";
 import { useNamespace, useBuriedParams, useCheckedAll } from "../../../hooks";
@@ -111,70 +104,15 @@ const emit = defineEmits(selectEmits);
 // };
 const ns = useNamespace("select");
 const optionsByApi = ref([]);
-
-const EMPTY_VALUE = "___CT_EMPTY_STRING___";
-const attrs = useAttrs();
-
-const bindAttrs = computed(() => {
-  const merged = { ...attrs, ...props.rawAttr };
-  // 剔除已在组件内部显式处理的属性，避免 v-bind 覆盖或冲突
-  delete merged["popper-class"];
-  delete merged["popperClass"];
-
-  if (merged.onChange) {
-    const original = merged.onChange;
-    merged.onChange = (val) => {
-      let realVal = val;
-      if (Array.isArray(val)) {
-        realVal = val.map((v) => (v === EMPTY_VALUE ? "" : v));
-      } else {
-        if (realVal === EMPTY_VALUE) realVal = "";
-      }
-      original(realVal);
-    };
-  }
-  return merged;
-});
-
 const showOptions = computed(() => {
-  const opts = optionsByApi.value.length ? optionsByApi.value : props.options;
-  return opts.map((item) => {
-    if (item.value === "") {
-      return { ...item, value: EMPTY_VALUE };
-    }
-    return item;
-  });
+  return optionsByApi.value.length ? optionsByApi.value : props.options;
 });
 const valueModel = computed({
   get() {
-    const val = props.modelValue;
-    const hasEmptyOption = showOptions.value.some(
-      (item) => item.value === EMPTY_VALUE
-    );
-    if (props.multiple) {
-      if (Array.isArray(val)) {
-        return val.map((v) => {
-          if (v === "") {
-            return hasEmptyOption ? EMPTY_VALUE : "";
-          }
-          return v;
-        });
-      }
-      return [];
-    }
-    if (val === "") {
-      return hasEmptyOption ? EMPTY_VALUE : "";
-    }
-    return val ?? "";
+    return props.modelValue || (props.multiple ? [] : props.modelValue);
   },
   set(newValue) {
-    let emitVal = newValue;
-    if (Array.isArray(emitVal)) {
-      emitVal = emitVal.map((v) => (v === EMPTY_VALUE ? "" : v));
-    } else {
-      if (emitVal === EMPTY_VALUE) emitVal = "";
-    }
-    emit("update:modelValue", emitVal);
+    emit("update:modelValue", newValue);
   },
 });
 const keyword = ref("");
@@ -217,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(() => {
@@ -227,14 +165,6 @@ const emptyText = computed(() => {
     ? props.noMatchText || "暂无匹配数据"
     : props.noDataText || "暂无数据";
 });
-
-const popperClass = computed(() => {
-  const defaultClass = ns.e("popper");
-  const merged = { ...attrs, ...props.rawAttr };
-  const userClass = merged["popper-class"] || merged["popperClass"] || "";
-  return `${defaultClass} ${userClass}`.trim();
-});
-
 const getUseLabel = (label) => {
   return typeof label === "string" ? label : String(label);
 };
@@ -253,10 +183,7 @@ watch(
 watchEffect(async () => {
   // 输入框过滤，触发的事件
   let arr = showOptions.value.filter((item) => {
-    return (
-      item.label &&
-      item.label.toLowerCase().includes(keyword.value.toLowerCase())
-    );
+    return item.label && item.label.includes(keyword.value);
   });
   const cbs = props.cbs || {};
   if (isFunction(cbs.filterCallback)) {
@@ -431,21 +358,7 @@ defineExpose({
 </script>
 <style lang="less">
 .ct-select {
-  &.el-select {
-    position: relative;
-    width: 214px;
-    &__selected-item {
-      &:nth-child(1) {
-        display: none;
-      }
-      &:nth-child(2) {
-        display: none;
-      }
-      &:nth-child(3) {
-        display: flex;
-      }
-    }
-  }
+  width: 214px;
   &__top {
     padding: 0 16px;
     font-size: var(--ct-font-size);
@@ -494,7 +407,7 @@ defineExpose({
     z-index: 3;
     right: var(--ct-component-inner-padding);
     top: 50%;
-    height: calc(var(--ct-component-size) - 8px);
+    height: calc(var(--ct-component-size) - 2px);
     transform: translateY(-50%);
     background-color: #fff;
   }
@@ -506,25 +419,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;
-      pointer-events: none;
-    }
-    .el-select__placeholder.is-transparent {
-      display: block;
-    }
-    .el-select__selected-item {
-      display: none;
-    }
+    // &::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>

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

@@ -1,13 +1,13 @@
-import { buriedParamsKey, searchComponentProps } from "../../../hooks";
+import { buriedParamsKey, searchComponentProps } from '../../../hooks';
 
 export const yearSelectEmits = [
   "update:modelValue",
   buriedParamsKey,
-  "change",
-  "changeSelect",
-  "visible-change",
-  "blur",
-  "focus",
+  'change',
+  'change-select',
+  'visible-change',
+  'blur',
+  'focus'
 ];
 export const yearSelectProps = {
   ...searchComponentProps,
@@ -15,7 +15,7 @@ export const yearSelectProps = {
   disabled: Boolean,
   multiple: {
     type: Boolean,
-    default: true,
+    default: true
   },
   startPlaceholder: String,
   endPlaceholder: String,
@@ -42,4 +42,4 @@ export const yearSelectProps = {
     type: [String, Object],
     default: "至",
   },
-};
+}

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

@@ -135,12 +135,9 @@ const getYearList = () => {
   }
   yearList.value = yearArr;
 };
-watch(
-  () => props.range,
-  () => {
-    getYearList();
-  }
-);
+watch(() => props.range, () => {
+  getYearList();
+})
 const filterHandleE = (str) => {
   //处理结束年
   if (judgeYear(str) && judgeRange(str)) {
@@ -210,7 +207,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;
@@ -276,15 +273,5 @@ 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>