qidian-vue-ui 2.0.30 → 2.0.31

package/dist/components/config-provider/index.d.ts

@@ -16,6 +16,9 @@ export declare const QdConfigProvider: import("vue").DefineComponent<{
         loading?: {
             text?: string;
         };
+        serviceSelect?: {
+            createText?: string;
+        };
         timeFormat?: {
             seconds?: string;
             minutes?: string;
@@ -157,6 +160,9 @@ export declare const QdConfigProvider: import("vue").DefineComponent<{
         loading?: {
             text?: string;
         };
+        serviceSelect?: {
+            createText?: string;
+        };
         timeFormat?: {
             seconds?: string;
             minutes?: string;
@@ -283,6 +289,9 @@ export declare const QdConfigProvider: import("vue").DefineComponent<{
         loading?: {
             text?: string;
         };
+        serviceSelect?: {
+            createText?: string;
+        };
         timeFormat?: {
             seconds?: string;
             minutes?: string;

package/dist/components/config-provider/types.d.ts

@@ -33,6 +33,9 @@ export interface QdConfigProviderProps {
         loading?: {
             text?: string;
         };
+        serviceSelect?: {
+            createText?: string;
+        };
         timeFormat?: {
             seconds?: string;
             minutes?: string;

package/dist/components/config-provider/useConfig.d.ts

@@ -4,6 +4,9 @@ export declare function useConfig<T extends keyof NonNullable<QdConfigProviderPr
         loading?: {
             text?: string;
         };
+        serviceSelect?: {
+            createText?: string;
+        };
         timeFormat?: {
             seconds?: string;
             minutes?: string;
@@ -128,6 +131,9 @@ export declare function useConfig<T extends keyof NonNullable<QdConfigProviderPr
         loading?: {
             text?: string;
         };
+        serviceSelect?: {
+            createText?: string;
+        };
         timeFormat?: {
             seconds?: string;
             minutes?: string;
@@ -252,6 +258,9 @@ export declare function useConfig<T extends keyof NonNullable<QdConfigProviderPr
         loading?: {
             text?: string;
         };
+        serviceSelect?: {
+            createText?: string;
+        };
         timeFormat?: {
             seconds?: string;
             minutes?: string;
@@ -377,6 +386,9 @@ export declare function useConfig<T extends keyof NonNullable<QdConfigProviderPr
         loading?: {
             text?: string;
         };
+        serviceSelect?: {
+            createText?: string;
+        };
         timeFormat?: {
             seconds?: string;
             minutes?: string;

package/dist/components/service-select/index.css

@@ -1,4 +1,4 @@
-.qd-service-select__load[data-v-b5b98d92] {
+.qd-service-select__load[data-v-d3c475ee] {
   width: 100%;
   border-top: 1px solid var(--td-component-stroke);
   padding: 6px;

package/dist/components/service-select/index.vue.mjs

@@ -1,8 +1,10 @@
+import './index2.css'
 import './index.css'
 import _sfc_main from "./index.vue2.mjs";
 /* empty css            */
+/* empty css            */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.mjs";
-const QdServiceSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b5b98d92"]]);
+const QdServiceSelect = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d3c475ee"]]);
 export {
   QdServiceSelect as default
 };

package/dist/components/service-select/index.vue2.mjs

@@ -1,3 +1,4 @@
+import './index2.css'
 import './index.css'
 import { defineComponent, mergeDefaults, computed, ref, unref, watch, onMounted, onActivated, onDeactivated, createBlock, openBlock, mergeProps, isRef, createSlots, withCtx, renderSlot, createCommentVNode, renderList, normalizeProps, guardReactiveProps } from "vue";
 import { useVModels } from "../../node_modules/.pnpm/@vueuse_core@14.2.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.mjs";
@@ -148,9 +149,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
     });
-    const { t } = useConfig("loading");
+    const { t: loadingT } = useConfig("loading");
+    const { t: serviceSelectT } = useConfig("serviceSelect");
     const search = ref("");
+    const searchPending = ref(false);
     const autofocus = ref(false);
+    const createOptionText = computed(() => JSON.stringify(serviceSelectT("createText")));
     let autoOpenedOnce = false;
     const reProps = computed(() => {
       const {
@@ -174,18 +178,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         options: inOptions,
         valueLabel: valueLabel2,
         popupProps,
+        creatable,
         filterable,
         filter,
         autofocus: autofocus2,
         onSearch,
+        onInputChange,
         onPopupVisibleChange,
         onFocus,
+        onCreate,
         onChange,
         ...selectOptions
       } = props;
       const mergedManual = manual ?? unref(pagination) !== false;
       const rePopupProps = {
         ...popupProps,
+        overlayClassName: ["qd-service-select__popup", popupProps?.overlayClassName],
+        overlayStyle: (triggerElement, popupElement) => ({
+          ...typeof popupProps?.overlayStyle === "function" ? popupProps.overlayStyle(triggerElement, popupElement) : popupProps?.overlayStyle,
+          "--qd-service-select-create-text": createOptionText.value
+        }),
         onScrollToBottom: (context) => {
           popupProps?.onScrollToBottom?.(context);
           if (loading.value || noMore.value) return;
@@ -198,6 +210,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (!service) return;
         refresh();
       };
+      const reOnInputChange = (value, context) => {
+        onInputChange?.(value, context);
+        search.value = String(value ?? "").trim();
+        searchPending.value = !!service && !!search.value;
+      };
       const reOnPopupVisibleChange = (visible, context) => {
         onPopupVisibleChange?.(visible, context);
         if (!service || loading.value) return;
@@ -213,6 +230,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           popupVisible.value = true;
         }
       };
+      const reOnCreate = (value) => {
+        if (!reCreatable.value) return;
+        onCreate?.(value);
+      };
       const reOnChange = (value, context) => {
         onChange?.(value, context);
         const { selectOptions: selectOptions2 } = reProps.value;
@@ -244,14 +265,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         defaultSelectFirst,
         fillOptions,
         convStr,
+        creatable,
         selectOptions: {
           ...selectOptions,
           filterable: reFilterable,
           filter: reFilter,
           popupProps: rePopupProps,
           onSearch: reOnSearch,
+          onInputChange: reOnInputChange,
           onPopupVisibleChange: reOnPopupVisibleChange,
           onFocus: reOnFocus,
+          onCreate: reOnCreate,
           onChange: reOnChange
         },
         serviceOptions: {
@@ -301,6 +325,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       onBefore: () => {
         reProps.value.serviceOptions.onBefore?.();
       },
+      onAfter: () => {
+        searchPending.value = false;
+        reProps.value.serviceOptions.onAfter?.();
+      },
       onSuccess: (res) => {
         reProps.value.serviceOptions.onSuccess?.(res);
         const list = data.value?.list || [];
@@ -322,6 +350,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     });
     const selectLoad = computed(() => reProps.value.externalLoad || firstLoad.value);
+    const reCreatable = computed(() => {
+      if (!reProps.value.creatable || !reProps.value.selectOptions.filterable || selectLoad.value || loading.value || searchPending.value) {
+        return false;
+      }
+      const value = search.value;
+      if (!value) return false;
+      const labelKey = reProps.value.selectOptions.keys?.label || qdServiceSelectKeys.label;
+      return !options.value?.some(
+        (option) => String(option[labelKey] ?? "").trim() === value
+      );
+    });
     function handleFilter(filterWords, option) {
       if (!filterWords) return true;
       if ("value" in option) {
@@ -335,6 +374,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const value = filterWords.trim().toLowerCase();
       return option.label.toLowerCase().includes(value);
     }
+    function getSelectedOptions(value) {
+      const values = Array.isArray(value) ? value : [value];
+      const valueKey = reProps.value.selectOptions.keys?.value || qdServiceSelectKeys.value;
+      return (options.value || []).filter(
+        (option) => values.some(
+          (item) => typeof item === "object" && item !== null ? item[valueKey] === option[valueKey] : item === option[valueKey]
+        )
+      );
+    }
+    function handleKeydownCapture(event) {
+      if (event.key !== "Enter" || event.isComposing || !reCreatable.value) return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      const value = search.value;
+      const { multiple, onEnter, onCreate, onChange } = reProps.value.selectOptions;
+      const currentValue = reModelValue.value;
+      const selectedOptions = getSelectedOptions(currentValue);
+      const nextValue = multiple ? [...Array.isArray(currentValue) ? currentValue : [], value] : value;
+      onEnter?.({ inputValue: value, e: event, value: currentValue });
+      onCreate?.(value);
+      reModelValue.value = nextValue;
+      onChange?.(nextValue, { selectedOptions, trigger: "check", e: event });
+      popupVisible.value = false;
+    }
     function setAutoSelectedWatch() {
       if (!reProps.value.defaultSelectFirst) return;
       unWatchAutoSelected = watch(options, setDefaultSelectFirst, { immediate: true });
@@ -409,13 +472,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         ...reProps.value.selectOptions,
         ..._ctx.$slots.default ? {} : { options: unref(options) }
+      }, {
+        creatable: reCreatable.value,
+        onKeydownCapture: handleKeydownCapture
       }), createSlots({
         "panel-bottom-content": withCtx(() => [
           unref(loading) && !unref(firstLoad) ? (openBlock(), createBlock(unref(Loading), {
             key: 0,
             class: "qd-service-select__load",
             size: "small",
-            text: unref(t)("text")
+            text: unref(loadingT)("text")
           }, null, 8, ["text"])) : _ctx.$slots["panel-bottom-content"] ? renderSlot(_ctx.$slots, "panel-bottom-content", { key: 1 }, void 0, true) : createCommentVNode("", true)
         ]),
         default: withCtx(() => [
@@ -433,7 +499,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ])
           };
         })
-      ]), 1040, ["modelValue", "input", "popup-visible", "autofocus", "loading"]);
+      ]), 1040, ["modelValue", "input", "popup-visible", "autofocus", "loading", "creatable"]);
     };
   }
 });

package/dist/components/service-select/index2.css

@@ -0,0 +1,6 @@
+.qd-service-select__popup .t-select__create-option--special > span::before {
+  content: var(--qd-service-select-create-text) '“';
+}
+.qd-service-select__popup .t-select__create-option--special > span::after {
+  content: '”';
+}

package/dist/locales/en-US.d.ts

@@ -265,6 +265,9 @@ declare const _default: {
     loading: {
         text: string;
     };
+    serviceSelect: {
+        createText: string;
+    };
     timeFormat: {
         seconds: string;
         minutes: string;

package/dist/locales/en-US.mjs

@@ -4,6 +4,9 @@ const enUS = merge(enUS$1, {
   loading: {
     text: "loading"
   },
+  serviceSelect: {
+    createText: "Create "
+  },
   timeFormat: {
     seconds: "Seconds",
     minutes: "Minutes",

package/dist/locales/zh-CN.d.ts

@@ -265,6 +265,9 @@ declare const _default: {
     loading: {
         text: string;
     };
+    serviceSelect: {
+        createText: string;
+    };
     timeFormat: {
         seconds: string;
         minutes: string;

package/dist/locales/zh-CN.mjs

@@ -4,6 +4,9 @@ const zhCN = merge(zhCN$1, {
   loading: {
     text: "加载中"
   },
+  serviceSelect: {
+    createText: "创建"
+  },
   timeFormat: {
     seconds: "秒",
     minutes: "分钟",

package/dist/locales/zh-TW.d.ts

@@ -265,6 +265,9 @@ declare const _default: {
     loading: {
         text: string;
     };
+    serviceSelect: {
+        createText: string;
+    };
     timeFormat: {
         seconds: string;
         minutes: string;

package/dist/locales/zh-TW.mjs

@@ -4,6 +4,9 @@ const zhTW = merge(zhTW$1, {
   loading: {
     text: "載入中"
   },
+  serviceSelect: {
+    createText: "建立"
+  },
   timeFormat: {
     seconds: "秒",
     minutes: "分鐘",

package/dist/styles/index.css

@@ -174,9 +174,12 @@ p {
 .t-table__cell--title {
   justify-content: space-between;
 }
-.t-table__body > tr > td .t-input__extra {
+.t-table__body > tr > td > .t-form__item:last-child {
+  margin-bottom: 0 !important;
+}
+.t-table__body > tr > td > .t-form__item:last-child .t-form__controls > .t-input__extra {
   position: initial;
-  text-align: left;
+  bottom: auto;
 }
 .t-table__content tbody > tr:last-child:not(.t-table__empty-row) > td,
 .t-table__content tfoot > tr:last-child > td {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qidian-vue-ui",
-  "version": "2.0.30",
+  "version": "2.0.31",
   "description": "基于 TDesign 的 QiDian Vue UI 组件库",
   "author": "qidian",
   "license": "MIT",