ct-component-plus 2.1.5 → 2.1.7

package/package.json

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

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

@@ -2,12 +2,14 @@
   <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>
@@ -24,6 +26,15 @@ 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,27 +8,31 @@ 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
-  }
-}
+    default: true,
+  },
+  name: {
+    type: [String, Array],
+    default: "",
+  },
+};

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

@@ -5,7 +5,7 @@
     :class="[ns.b(), ns.is('multiple', multiple)]"
     v-model="valueModel"
     collapse-tags
-    v-bind="rawAttr"
+    v-bind="bindAttrs"
     :multiple="multiple"
     :filterable="filterable"
     :clear-icon="clearIcon"
@@ -35,7 +35,7 @@
           </template>
         </el-input>
       </div>
-      <div :class="[ns.e('select')]" v-if="!rawAttr.multipleLimit">
+      <div :class="[ns.e('select')]" v-if="!bindAttrs.multipleLimit">
         <span :class="[ns.e('select-title')]">
           <span v-if="!keyword">已选{{ selectLength }}项</span>
           <span v-else>检索结果</span>
@@ -74,6 +74,12 @@
   </el-select>
 </template>
 
+<script>
+export default {
+  inheritAttrs: false,
+};
+</script>
+
 <script setup>
 import {
   onMounted,
@@ -83,6 +89,7 @@ import {
   inject,
   watchEffect,
   nextTick,
+  useAttrs,
 } from "vue";
 import { selectEmits, selectProps } from "./index";
 import { useNamespace, useBuriedParams, useCheckedAll } from "../../../hooks";
@@ -104,15 +111,66 @@ 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 };
+  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(() => {
-  return optionsByApi.value.length ? optionsByApi.value : props.options;
+  const opts = optionsByApi.value.length ? optionsByApi.value : props.options;
+  return opts.map((item) => {
+    if (item.value === "") {
+      return { ...item, value: EMPTY_VALUE };
+    }
+    return item;
+  });
 });
 const valueModel = computed({
   get() {
-    return props.modelValue || (props.multiple ? [] : props.modelValue);
+    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 ?? "";
   },
   set(newValue) {
-    emit("update:modelValue", 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);
   },
 });
 const keyword = ref("");

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',
-  'change-select',
-  'visible-change',
-  'blur',
-  'focus'
+  "change",
+  "changeSelect",
+  "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: "至",
   },
-}
+};