qidian-vue-ui 2.0.33 → 2.0.34

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

@@ -105,6 +105,9 @@ export declare const QdConfigProvider: import("vue").DefineComponent<{
         table?: Omit<NonNullable<NonNullable<import("tdesign-vue-next").TdConfigProviderProps["globalConfig"]>["table"]>, "size"> & {
             size?: import("..").QdServiceTableProps["size"];
             bordered?: boolean;
+            filterItemInputPlaceholder?: string;
+            filterItemSearchPlaceholder?: string;
+            filterItemAllText?: string;
         };
         wrapper?: {
             attach?: import("..").QdDialogProps["attach"];
@@ -249,6 +252,9 @@ export declare const QdConfigProvider: import("vue").DefineComponent<{
         table?: Omit<NonNullable<NonNullable<import("tdesign-vue-next").TdConfigProviderProps["globalConfig"]>["table"]>, "size"> & {
             size?: import("..").QdServiceTableProps["size"];
             bordered?: boolean;
+            filterItemInputPlaceholder?: string;
+            filterItemSearchPlaceholder?: string;
+            filterItemAllText?: string;
         };
         wrapper?: {
             attach?: import("..").QdDialogProps["attach"];
@@ -378,6 +384,9 @@ export declare const QdConfigProvider: import("vue").DefineComponent<{
         table?: Omit<NonNullable<NonNullable<import("tdesign-vue-next").TdConfigProviderProps["globalConfig"]>["table"]>, "size"> & {
             size?: import("..").QdServiceTableProps["size"];
             bordered?: boolean;
+            filterItemInputPlaceholder?: string;
+            filterItemSearchPlaceholder?: string;
+            filterItemAllText?: string;
         };
         wrapper?: {
             attach?: import("..").QdDialogProps["attach"];

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

@@ -122,6 +122,9 @@ export interface QdConfigProviderProps {
         table?: Omit<NonNullable<NonNullable<TdConfigProviderProps['globalConfig']>['table']>, 'size'> & {
             size?: QdServiceTableProps['size'];
             bordered?: boolean;
+            filterItemInputPlaceholder?: string;
+            filterItemSearchPlaceholder?: string;
+            filterItemAllText?: string;
         };
         wrapper?: {
             attach?: QdDialogProps['attach'];

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

@@ -93,6 +93,9 @@ export declare function useConfig<T extends keyof NonNullable<QdConfigProviderPr
         table?: Omit<NonNullable<NonNullable<import("tdesign-vue-next").TdConfigProviderProps["globalConfig"]>["table"]>, "size"> & {
             size?: import("..").QdServiceTableProps["size"];
             bordered?: boolean;
+            filterItemInputPlaceholder?: string;
+            filterItemSearchPlaceholder?: string;
+            filterItemAllText?: string;
         };
         wrapper?: {
             attach?: import("..").QdDialogProps["attach"];
@@ -220,6 +223,9 @@ export declare function useConfig<T extends keyof NonNullable<QdConfigProviderPr
         table?: Omit<NonNullable<NonNullable<import("tdesign-vue-next").TdConfigProviderProps["globalConfig"]>["table"]>, "size"> & {
             size?: import("..").QdServiceTableProps["size"];
             bordered?: boolean;
+            filterItemInputPlaceholder?: string;
+            filterItemSearchPlaceholder?: string;
+            filterItemAllText?: string;
         };
         wrapper?: {
             attach?: import("..").QdDialogProps["attach"];
@@ -347,6 +353,9 @@ export declare function useConfig<T extends keyof NonNullable<QdConfigProviderPr
         table?: Omit<NonNullable<NonNullable<import("tdesign-vue-next").TdConfigProviderProps["globalConfig"]>["table"]>, "size"> & {
             size?: import("..").QdServiceTableProps["size"];
             bordered?: boolean;
+            filterItemInputPlaceholder?: string;
+            filterItemSearchPlaceholder?: string;
+            filterItemAllText?: string;
         };
         wrapper?: {
             attach?: import("..").QdDialogProps["attach"];
@@ -475,6 +484,9 @@ export declare function useConfig<T extends keyof NonNullable<QdConfigProviderPr
         table?: Omit<NonNullable<NonNullable<import("tdesign-vue-next").TdConfigProviderProps["globalConfig"]>["table"]>, "size"> & {
             size?: import("..").QdServiceTableProps["size"];
             bordered?: boolean;
+            filterItemInputPlaceholder?: string;
+            filterItemSearchPlaceholder?: string;
+            filterItemAllText?: string;
         };
         wrapper?: {
             attach?: import("..").QdDialogProps["attach"];

package/dist/components/service/table/filter-item.d.ts

@@ -0,0 +1,50 @@
+import type { PropType, VNodeChild } from 'vue';
+import type { QdServiceTableFilterOption } from './types';
+type FilterValue = string | number | Array<string | number> | null;
+type FilterOption = QdServiceTableFilterOption & {
+    render?: () => VNodeChild;
+};
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<FilterOption[]>;
+        default: () => never[];
+    };
+    type: {
+        type: PropType<"single" | "multiple">;
+        default: string;
+    };
+    value: {
+        type: PropType<FilterValue>;
+    };
+    showConfirmAndReset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onChange: {
+        type: PropType<(value: FilterValue) => void>;
+    };
+}>, () => JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<FilterOption[]>;
+        default: () => never[];
+    };
+    type: {
+        type: PropType<"single" | "multiple">;
+        default: string;
+    };
+    value: {
+        type: PropType<FilterValue>;
+    };
+    showConfirmAndReset: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onChange: {
+        type: PropType<(value: FilterValue) => void>;
+    };
+}>> & Readonly<{}>, {
+    type: "multiple" | "single";
+    options: FilterOption[];
+    showConfirmAndReset: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/service/table/filter-item.mjs

@@ -0,0 +1,170 @@
+import { defineComponent, ref, computed, createVNode, onMounted, onBeforeUnmount } from "vue";
+import { SearchIcon } from "tdesign-icons-vue-next";
+import { Input, Checkbox, Radio } from "tdesign-vue-next";
+import { useConfig } from "../../config-provider/useConfig.mjs";
+const FilterOptionContent = /* @__PURE__ */ defineComponent({
+  props: {
+    render: {
+      type: Function,
+      required: true
+    },
+    onTextChange: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props) {
+    const content = ref();
+    let observer;
+    function syncText() {
+      props.onTextChange(content.value?.textContent?.trim() ?? "");
+    }
+    onMounted(() => {
+      syncText();
+      observer = new MutationObserver(syncText);
+      if (content.value) observer.observe(content.value, {
+        characterData: true,
+        childList: true,
+        subtree: true
+      });
+    });
+    onBeforeUnmount(() => observer?.disconnect());
+    return () => createVNode("span", {
+      "ref": content,
+      "class": "qd-service-table-filter-item__cell",
+      "inert": true
+    }, [props.render()]);
+  }
+});
+const QdServiceTableFilterItem = /* @__PURE__ */ defineComponent({
+  name: "QdServiceTableFilterItem",
+  props: {
+    options: {
+      type: Array,
+      default: () => []
+    },
+    type: {
+      type: String,
+      default: "multiple"
+    },
+    value: {
+      type: [String, Number, Array]
+    },
+    showConfirmAndReset: {
+      type: Boolean,
+      default: true
+    },
+    onChange: {
+      type: Function
+    }
+  },
+  setup(props) {
+    const {
+      t
+    } = useConfig("table");
+    const keyword = ref("");
+    const renderedTexts = ref(/* @__PURE__ */ new Map());
+    const selectedValues = computed(() => {
+      if (props.type === "multiple") return Array.isArray(props.value) ? props.value : [];
+      return props.value === "" || props.value === void 0 ? [] : [props.value];
+    });
+    const allSelected = computed(() => props.type === "multiple" && props.value !== null && (!selectedValues.value.length || props.options.every((option) => selectedValues.value.includes(option.value))));
+    const filteredOptions = computed(() => {
+      const keywords = keyword.value.trim().toLowerCase().split(/\s+/).filter(Boolean);
+      if (!keywords.length) return props.options;
+      return props.options.filter((option) => {
+        const label = (renderedTexts.value.get(option.value) || option.label).toLowerCase();
+        return keywords.some((item) => label.includes(item));
+      });
+    });
+    const totalCount = computed(() => props.options.reduce((total, option) => total + (option.count ?? 0), 0));
+    const selectedCount = computed(() => {
+      if (props.value === null) return 0;
+      if (allSelected.value || !selectedValues.value.length) return totalCount.value;
+      return props.options.reduce((total, option) => selectedValues.value.includes(option.value) ? total + (option.count ?? 0) : total, 0);
+    });
+    function selectAll() {
+      props.onChange?.(props.type === "multiple" ? [] : "");
+    }
+    function selectOption(value, checked) {
+      if (props.type === "single") {
+        props.onChange?.(value);
+        return;
+      }
+      const current = allSelected.value ? props.options.map((option) => option.value) : selectedValues.value;
+      const next = checked ? [.../* @__PURE__ */ new Set([...current, value])] : current.filter((item) => item !== value);
+      if (!next.length) {
+        if (!props.showConfirmAndReset) return;
+        props.onChange?.(null);
+        return;
+      }
+      const valueAllSelected = props.options.every((option) => next.includes(option.value));
+      props.onChange?.(valueAllSelected ? [] : next);
+    }
+    function renderOption(option) {
+      if (!option.render) return option.label;
+      return createVNode(FilterOptionContent, {
+        "render": option.render,
+        "onTextChange": (text) => {
+          option.label = text || option.label;
+          renderedTexts.value.set(option.value, text);
+        }
+      }, null);
+    }
+    function isOptionDisabled(option) {
+      if (option.disabled) return true;
+      if (props.showConfirmAndReset || allSelected.value) return false;
+      return selectedValues.value.length === 1 && selectedValues.value.includes(option.value);
+    }
+    return () => createVNode("div", {
+      "class": "qd-service-table-filter-item"
+    }, [createVNode("div", {
+      "class": "qd-service-table-filter-item__search"
+    }, [createVNode(Input, {
+      "modelValue": keyword.value,
+      "onUpdate:modelValue": ($event) => keyword.value = $event,
+      "clearable": true,
+      "placeholder": t("filterItemSearchPlaceholder"),
+      "prefixIcon": () => createVNode(SearchIcon, null, null)
+    }, null)]), createVNode("div", {
+      "class": "qd-service-table-filter-item__all"
+    }, [props.type === "multiple" ? createVNode(Checkbox, {
+      "checked": allSelected.value,
+      "onChange": selectAll
+    }, {
+      default: () => [t("filterItemAllText"), createVNode("span", {
+        "class": "qd-service-table-filter-item__count"
+      }, [`(${selectedCount.value}/${totalCount.value})`])]
+    }) : createVNode(Radio, {
+      "checked": !selectedValues.value.length,
+      "onChange": selectAll
+    }, {
+      default: () => [t("filterItemAllText"), createVNode("span", {
+        "class": "qd-service-table-filter-item__count"
+      }, [`(${selectedCount.value}/${totalCount.value})`])]
+    })]), createVNode("div", {
+      "class": "qd-service-table-filter-item__options"
+    }, [filteredOptions.value.map((option) => props.type === "multiple" ? createVNode(Checkbox, {
+      "key": option.value,
+      "checked": allSelected.value || selectedValues.value.includes(option.value),
+      "disabled": isOptionDisabled(option),
+      "onChange": (checked) => selectOption(option.value, checked)
+    }, {
+      default: () => [renderOption(option), createVNode("span", {
+        "class": "qd-service-table-filter-item__count"
+      }, [`(${option.count ?? 0})`])]
+    }) : createVNode(Radio, {
+      "key": option.value,
+      "checked": selectedValues.value.includes(option.value),
+      "disabled": option.disabled,
+      "onChange": () => selectOption(option.value, true)
+    }, {
+      default: () => [renderOption(option), createVNode("span", {
+        "class": "qd-service-table-filter-item__count"
+      }, [`(${option.count ?? 0})`])]
+    }))])]);
+  }
+});
+export {
+  QdServiceTableFilterItem as default
+};

package/dist/components/service/table/index.css

@@ -1,88 +1,156 @@
-.qd-service-table[data-v-92206ee3] {
+.qd-service-table[data-v-1793b265] {
   height: 100%;
   display: flex;
   flex-direction: column;
 }
-.qd-service-table[data-v-92206ee3] >  .t-table__content {
+.qd-service-table[data-v-1793b265] >  .t-table__content {
   flex: 1;
 }
-.qd-service-table--mini[data-v-92206ee3] {
+.qd-service-table--mini[data-v-1793b265] {
   font: var(--td-font-body-small);
 }
-.qd-service-table--mini[data-v-92206ee3] th,
-.qd-service-table--mini[data-v-92206ee3] tr:not(.t-table__expanded-row) > td {
+.qd-service-table--mini[data-v-1793b265] th,
+.qd-service-table--mini[data-v-1793b265] tr:not(.t-table__expanded-row) > td {
   padding: var(--td-comp-paddingTB-xxs) var(--td-comp-paddingLR-xxs);
   line-height: var(--td-line-height-body-small);
 }
-.qd-service-table--mini[data-v-92206ee3] .t-table__row-full-element {
+.qd-service-table--mini[data-v-1793b265] .t-table__row-full-element {
   padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-s);
 }
-.qd-service-table--hide-empty-image[data-v-92206ee3] .t-table__empty {
+.qd-service-table--hide-empty-image[data-v-1793b265] .t-table__empty {
   min-height: auto;
 }
-.qd-service-table--hide-empty-image[data-v-92206ee3] .t-table__empty .t-empty {
+.qd-service-table--hide-empty-image[data-v-1793b265] .t-table__empty .t-empty {
   padding: 0 !important;
 }
-.qd-service-table--hide-empty-image[data-v-92206ee3] .t-table__empty .t-empty__image {
+.qd-service-table--hide-empty-image[data-v-1793b265] .t-table__empty .t-empty__image {
   display: none;
 }
-.qd-service-table--hide-empty-image[data-v-92206ee3] .t-table__empty .t-empty__title {
+.qd-service-table--hide-empty-image[data-v-1793b265] .t-table__empty .t-empty__title {
   margin-top: 0;
 }
-.qd-service-table[data-v-92206ee3] .t-table__tree-col:not(:has(.t-table__tree-op-icon)) {
+.qd-service-table[data-v-1793b265] .t-table__tree-col:not(:has(.t-table__tree-op-icon)) {
   margin-left: calc(var(--td-font-size-body-large) + var(--td-comp-margin-s));
 }
-.qd-service-table[data-v-92206ee3] .t-table__tree-leaf-node .t-table__tree-op-icon:empty {
+.qd-service-table[data-v-1793b265] .t-table__tree-leaf-node .t-table__tree-op-icon:empty {
   width: calc(var(--td-font-size-body-large) + var(--td-comp-margin-s));
 }
-.qd-service-table[data-v-92206ee3] .t-affix > .t-table__affixed-header-elm-wrap,
-.qd-service-table[data-v-92206ee3] .t-affix > .t-table__scrollbar--obvious {
-  transform: var(--v48c62e9a);
+.qd-service-table[data-v-1793b265] .t-affix > .t-table__affixed-header-elm-wrap,
+.qd-service-table[data-v-1793b265] .t-affix > .t-table__scrollbar--obvious {
+  transform: var(--c120d096);
 }
-.qd-service-table--horizontal-bar-static[data-v-92206ee3] .t-table__scrollbar--obvious {
+.qd-service-table--horizontal-bar-static[data-v-1793b265] .t-table__scrollbar--obvious {
   visibility: hidden;
   pointer-events: none;
 }
-.qd-service-table[data-v-92206ee3]  .t-table__expanded-row .qd-service-table--horizontal-bar-static > div:has(> div > .t-table__scrollbar--obvious) {
+.qd-service-table[data-v-1793b265]  .t-table__expanded-row .qd-service-table--horizontal-bar-static > div:has(> div > .t-table__scrollbar--obvious) {
   display: none;
 }
-.qd-service-table[data-v-92206ee3] .t-table__expanded-row > td {
+.qd-service-table[data-v-1793b265] .t-table__expanded-row > td {
   height: 0;
 }
-.qd-service-table[data-v-92206ee3] .t-table__affixed-header-elm-wrap {
+.qd-service-table[data-v-1793b265] .t-table__affixed-header-elm-wrap {
   height: auto !important;
 }
-.qd-service-table[data-v-92206ee3] .t-table__affixed-header-elm {
+.qd-service-table[data-v-1793b265] .t-table__affixed-header-elm {
   position: relative;
   scrollbar-width: none;
 }
-.qd-service-table[data-v-92206ee3] .t-table__affixed-header-elm::-webkit-scrollbar {
+.qd-service-table[data-v-1793b265] .t-table__affixed-header-elm::-webkit-scrollbar {
   display: none;
   width: 0;
   height: 0;
 }
-.qd-service-table[data-v-92206ee3] .t-table__virtual-scroll-cursor + table {
+.qd-service-table[data-v-1793b265] .t-table__virtual-scroll-cursor + table {
   border-collapse: separate;
 }
-.qd-service-table[data-v-92206ee3] .t-table__expanded-row-inner {
+.qd-service-table[data-v-1793b265] .t-table__expanded-row-inner {
   display: block;
   position: sticky;
   left: 0;
-  width: var(--v442c3de2) !important;
+  width: var(--b49a0b2c) !important;
 }
-.qd-service-table[data-v-92206ee3] .t-table__cell-wrap > .t-form__controls > .t-form__controls-content > *:not(.t-switch):not(.t-tag):not(.t-icon):not(.qd-file-icon) {
+.qd-service-table[data-v-1793b265] .t-table__cell-wrap > .t-form__controls > .t-form__controls-content > *:not(.t-switch):not(.t-tag):not(.t-icon):not(.qd-file-icon) {
   width: 100%;
 }
-.qd-service-table[data-v-92206ee3] .qd-service-table__non-editable-col {
+.qd-service-table[data-v-1793b265] .qd-service-table__non-editable-col {
   background-color: color-mix(in srgb, var(--td-bg-color-component) 50%, transparent);
 }
-.qd-service-table[data-v-92206ee3]  .qd-service-table__non-editable-col:is(
+.qd-service-table[data-v-1793b265]  .qd-service-table__non-editable-col:is(
         .t-table__cell--fixed-left,
         .t-table__cell--fixed-right
       ) {
   background-color: inherit;
   background-image: linear-gradient(color-mix(in srgb, var(--td-bg-color-secondarycontainer) 50%, transparent), color-mix(in srgb, var(--td-bg-color-secondarycontainer) 50%, transparent));
 }
-.qd-service-table--disable-horizontal-scroll[data-v-92206ee3] colgroup > col {
+.qd-service-table--disable-horizontal-scroll[data-v-1793b265] colgroup > col {
   width: auto !important;
 }
+.qd-service-table[data-v-1793b265] .t-table__filter-pop-content-inner {
+  padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s) 0;
+}
+.qd-service-table[data-v-1793b265] .t-table__filter-pop-content-inner:has(.qd-service-table-filter-item) {
+  padding: 0;
+}
+.qd-service-table[data-v-1793b265]  .t-table__filter-pop-content-inner:has(
+        .qd-service-table-filter-input,
+        .qd-service-table-filter-custom
+      ) {
+  padding-bottom: var(--td-comp-paddingTB-s);
+}
+.qd-service-table[data-v-1793b265] .t-table__filter--bottom-buttons {
+  padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s);
+}
+.qd-service-table--mini[data-v-1793b265] .t-table__filter-pop-content-inner {
+  padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-xs) 0;
+}
+.qd-service-table--mini[data-v-1793b265] .t-table__filter--bottom-buttons {
+  padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-xs);
+}
+.qd-service-table--mini[data-v-1793b265] .t-table__filter-pop-content-inner:has(.qd-service-table-filter-item) {
+  padding: 0;
+}
+.qd-service-table--mini[data-v-1793b265]  .t-table__filter-pop-content-inner:has(
+          .qd-service-table-filter-input,
+          .qd-service-table-filter-custom
+        ) {
+  padding-bottom: var(--td-comp-paddingTB-xs);
+}
+.qd-service-table[data-v-1793b265] .qd-service-table-filter-item {
+  width: 266px;
+}
+.qd-service-table[data-v-1793b265] .qd-service-table-filter-item__search,
+.qd-service-table[data-v-1793b265] .qd-service-table-filter-item__all,
+.qd-service-table[data-v-1793b265] .qd-service-table-filter-item__options {
+  padding: var(--td-comp-paddingTB-s) var(--td-comp-paddingLR-s) 0;
+}
+.qd-service-table[data-v-1793b265] .qd-service-table-filter-item__all {
+  padding: 0 var(--td-comp-paddingLR-s);
+  border-bottom: 1px solid var(--td-component-stroke);
+}
+.qd-service-table[data-v-1793b265] .qd-service-table-filter-item__options {
+  display: flex;
+  flex-direction: column;
+  height: 206px;
+  padding: 0 var(--td-comp-paddingLR-s);
+  overflow-y: auto;
+}
+.qd-service-table[data-v-1793b265] .qd-service-table-filter-item__count {
+  margin-left: var(--td-comp-margin-xs);
+  color: var(--td-text-color-placeholder);
+}
+.qd-service-table[data-v-1793b265] .qd-service-table-filter-item__cell {
+  pointer-events: none;
+}
+.qd-service-table[data-v-1793b265] .qd-service-table-filter-item .t-checkbox__label,
+.qd-service-table[data-v-1793b265] .qd-service-table-filter-item .t-radio__label {
+  display: inline-flex;
+  align-items: center;
+}
+.qd-service-table--mini[data-v-1793b265] .qd-service-table-filter-item__search {
+  padding: var(--td-comp-paddingTB-xs) var(--td-comp-paddingLR-xs) 0;
+}
+.qd-service-table--mini[data-v-1793b265] .qd-service-table-filter-item__all,
+.qd-service-table--mini[data-v-1793b265] .qd-service-table-filter-item__options {
+  padding: 0 var(--td-comp-paddingLR-xs);
+}

package/dist/components/service/table/index.d.ts

@@ -1,2 +1,2 @@
 export { default as QdServiceTable } from './index.vue';
-export type { QdServiceTableCol, QdServiceTableFormItem, QdServiceTableInstanceFunctions, QdServiceTableProps, QdServiceTableScroll, QdServiceTableSubmitRowContext, QdServiceTableSubmitTableContext, QdServiceTableValidateParams, QdServiceTableValidateRowContext, QdServiceTableValidateTableContext } from './types';
+export type { QdServiceTableCol, QdServiceTableFilterItem, QdServiceTableFilterOption, QdServiceTableFormItem, QdServiceTableInstanceFunctions, QdServiceTableProps, QdServiceTableScroll, QdServiceTableSubmitRowContext, QdServiceTableSubmitTableContext, QdServiceTableValidateParams, QdServiceTableValidateRowContext, QdServiceTableValidateTableContext } from './types';

package/dist/components/service/table/index.vue.mjs

@@ -2,7 +2,7 @@ import './index.css'
 import _sfc_main from "./index.vue2.mjs";
 /* empty css            */
 import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const QdServiceTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-92206ee3"]]);
+const QdServiceTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1793b265"]]);
 export {
   QdServiceTable as default
 };

package/dist/components/service/table/index.vue2.mjs

@@ -1,7 +1,7 @@
 import './index.css'
-import { defineComponent, mergeDefaults, useCssVars, computed, ref, useSlots, useTemplateRef, shallowRef, inject, getCurrentInstance, reactive, createVNode, watch, nextTick, onMounted, onActivated, onDeactivated, onBeforeUnmount, withDirectives, createBlock, openBlock, resolveDynamicComponent, unref, mergeProps, isRef, createSlots, withCtx, renderList, renderSlot, normalizeProps, guardReactiveProps, render, h } from "vue";
+import { defineComponent, mergeDefaults, useCssVars, computed, ref, useSlots, useTemplateRef, shallowRef, inject, getCurrentInstance, reactive, createVNode, watch, nextTick, onMounted, onActivated, onDeactivated, onBeforeUnmount, withDirectives, createBlock, openBlock, resolveDynamicComponent, unref, mergeProps, isRef, createSlots, withCtx, renderList, renderSlot, normalizeProps, guardReactiveProps, h, render } from "vue";
 import { useVModels, useElementSize, useElementBounding, useIntersectionObserver } from "../../../node_modules/.pnpm/@vueuse_core@14.2.0_vue@3.5.26_typescript@5.9.3_/node_modules/@vueuse/core/dist/index.mjs";
-import { useActivated, useTimer, easyCopy, isEmpty, suspectedWrapperPromise, getScrollEl, useServicePagination, createExposeProxy, resizeDirective } from "qidian-shared";
+import { useActivated, useTimer, useServicePagination, easyCopy, isEmpty, suspectedWrapperPromise, getScrollEl, createExposeProxy, resizeDirective } from "qidian-shared";
 import { LoadingIcon, AddRectangleIcon, MinusRectangleIcon } from "tdesign-icons-vue-next";
 import { EnhancedTable, Table, Empty } from "tdesign-vue-next";
 import { validate } from "tdesign-vue-next/es/form/utils/form-model.mjs";
@@ -10,9 +10,11 @@ import { getTransformOffset } from "../../../utils/tools.mjs";
 import { useConfig } from "../../config-provider/useConfig.mjs";
 import { resolveQdFormItemOptions, getQdFormComponentName } from "../../form/utils.mjs";
 import QdServiceTableEditCell from "./edit-cell.mjs";
+import QdServiceTableFilterItem from "./filter-item.mjs";
 import { qdServiceTableTreeConfig, qdServiceTableProps, getSortParams } from "./props.mjs";
 import { PROVIDE_FORM_ADD_BEFORE_SUBMIT_QUEUE } from "../../form/config.mjs";
 import get from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/get.mjs";
+import _sfc_main$1 from "../../config-renderer/index.vue.mjs";
 import QdForm from "../../form/index.vue.mjs";
 import set from "../../../node_modules/.pnpm/lodash-es@4.17.21/node_modules/lodash-es/set.mjs";
 const defaultMinWidth = 80;
@@ -325,8 +327,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     emit: __emit
   }) {
     useCssVars((_ctx) => ({
-      "v48c62e9a": affixedHeaderTransform.value,
-      "v442c3de2": expandedRowWidth.value
+      "c120d096": affixedHeaderTransform.value,
+      "b49a0b2c": expandedRowWidth.value
     }));
     const props = __props;
     const emit = __emit;
@@ -495,7 +497,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let affixRefreshRafId = 0;
     let animatingAncestorCleanup = null;
     const adaptedColumns = computed(() => {
-      const columns = wrapFormItemColumns(props.columns || []);
+      const columns = wrapColumns(props.columns || []);
       const selectType = props.selectType;
       if (!selectType) return columns;
       const selectIdx = columns.findIndex((item) => item.type === "single" || item.type === "multiple");
@@ -515,6 +517,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return columns;
     });
+    const displayData = computed(() => {
+      if (props.onFilterChange) return data.value;
+      if (props.service && props.pagination !== false) return data.value;
+      const activeFilters = getActiveFilterEntries();
+      if (!activeFilters.length) return data.value;
+      return data.value.filter((row) => activeFilters.every(({
+        colKey,
+        type,
+        value
+      }) => {
+        const rowValue = get(row, colKey);
+        if (type === "input") {
+          return String(rowValue ?? "").toLowerCase().includes(String(value).toLowerCase());
+        }
+        if (Array.isArray(value)) return value.includes(rowValue);
+        return rowValue === value;
+      }));
+    });
     const {
       stop: tableContentStop,
       pause: tableContentPause,
@@ -550,7 +570,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         columnControllerVisible: columnControllerVisible2,
         displayColumns: displayColumns2,
         expandedRowKeys: expandedRowKeys2,
-        filterValue: filterValue2,
+        filterValue: inFilterValue,
         sort: sort2,
         searchData: _searchData,
         expandedTreeNodes: expandedTreeNodes2,
@@ -582,6 +602,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const reTableOptions = tableOptions;
       const onValidate = reTableOptions.onValidate;
       const onRowValidate = reTableOptions.onRowValidate;
+      const onFilterChange = reTableOptions.onFilterChange;
       reTableOptions.onValidate = (context) => {
         replaceTableValidationErrors(context.result);
         onValidate?.(context);
@@ -590,6 +611,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         syncCellValidationErrors(context.result);
         onRowValidate?.(context);
       };
+      reTableOptions.onFilterChange = (value, context) => {
+        if (filterValue) filterValue.value = value;
+        onFilterChange?.(value, context);
+        if (onFilterChange) return;
+        if (!service || pagination === false) return;
+        changeCurrent(1);
+      };
       const expandedRow = reTableOptions.expandedRow;
       if (expandedRow) {
         reTableOptions.expandedRow = (h2, context) => expandedRow(h2, {
@@ -838,7 +866,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           columnControllerVisible: columnControllerVisible2,
           displayColumns: displayColumns2,
           expandedRowKeys: expandedRowKeys2,
-          filterValue: filterValue2,
+          filterValue: inFilterValue,
           sort: sort2,
           expandedTreeNodes: expandedTreeNodes2
         }
@@ -955,7 +983,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     async function transformServiceParams(params) {
       const mergedParams = {
         ...params,
-        ...searchData.value
+        ...searchData.value,
+        ...getActiveFilterParams()
       };
       if (props.transformParams) return props.transformParams(mergedParams);
       return mergedParams;
@@ -1654,20 +1683,186 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         rowData: row ? easyCopy(row) : void 0
       };
     }
-    function wrapFormItemColumns(columns) {
+    function isActiveFilterValue(value) {
+      if (Array.isArray(value)) return value.length > 0;
+      return value !== void 0 && value !== null && value !== "";
+    }
+    function getActiveFilterParams() {
+      return Object.fromEntries(Object.entries(filterValue?.value ?? {}).filter(([, value]) => isActiveFilterValue(value)));
+    }
+    function getFilterColumns(columns) {
+      return columns.flatMap((column) => column.children ? getFilterColumns(column.children) : column.colKey ? [column] : []);
+    }
+    function getActiveFilterEntries() {
+      const values = filterValue?.value ?? {};
+      return getFilterColumns(props.columns || []).flatMap((column) => {
+        if (!column.colKey) return [];
+        const value = values[column.colKey];
+        if (!isActiveFilterValue(value)) return [];
+        const filterItem = column.filterItem === true ? {} : column.filterItem;
+        const type = column.filter?.type ?? (filterItem?.component ? void 0 : filterItem?.type);
+        return [{
+          colKey: column.colKey,
+          type,
+          value
+        }];
+      });
+    }
+    function resolveFilterOptions(column, configuredOptions, reuseCell = true) {
+      const counts = /* @__PURE__ */ new Map();
+      const firstRows = /* @__PURE__ */ new Map();
+      const colKey = column.colKey;
+      data.value.forEach((row, rowIndex) => {
+        const value = colKey ? get(row, colKey) : void 0;
+        if (typeof value !== "string" && typeof value !== "number") return;
+        if (value === "") return;
+        counts.set(value, (counts.get(value) ?? 0) + 1);
+        if (!firstRows.has(value)) firstRows.set(value, {
+          row,
+          rowIndex
+        });
+      });
+      if (configuredOptions) {
+        return configuredOptions.map((option) => ({
+          ...option,
+          count: option.count ?? counts.get(option.value) ?? 0
+        }));
+      }
+      const colIndex = getFilterColumns(props.columns || []).indexOf(column);
+      return [...counts].map(([value, count]) => {
+        const firstRow = firstRows.get(value);
+        return {
+          label: String(value),
+          value,
+          count,
+          ...reuseCell && firstRow ? {
+            render: () => renderDisplayCell(h, column, {
+              ...firstRow,
+              col: column,
+              colIndex
+            })
+          } : {}
+        };
+      });
+    }
+    function createConfigFilterComponent(component) {
+      return /* @__PURE__ */ defineComponent({
+        inheritAttrs: false,
+        setup(_, {
+          attrs
+        }) {
+          return () => {
+            const filterAttrs = Object.fromEntries(Object.entries(attrs).filter(([, value]) => value !== void 0));
+            return h(_sfc_main$1, {
+              config: component,
+              ...filterAttrs,
+              class: ["qd-service-table-filter-custom", filterAttrs.class]
+            });
+          };
+        }
+      });
+    }
+    function resolveColumnFilter(column, filterItem, filter) {
+      const config = filterItem === true ? {} : filterItem;
+      const {
+        component,
+        options,
+        reuseCell = true,
+        type = "multiple",
+        props: filterProps,
+        ...filterOptions
+      } = config;
+      let generatedFilter;
+      if (component) {
+        generatedFilter = {
+          resetValue: "",
+          showConfirmAndReset: true,
+          ...filterOptions,
+          props: filterProps,
+          component: createConfigFilterComponent(component)
+        };
+      } else if (type === "input") {
+        generatedFilter = {
+          resetValue: "",
+          showConfirmAndReset: true,
+          ...filterOptions,
+          props: {
+            placeholder: tableT("filterItemInputPlaceholder"),
+            ...filterProps,
+            class: "qd-service-table-filter-input"
+          },
+          type
+        };
+      } else {
+        const resolvedOptions = resolveFilterOptions(column, options, reuseCell);
+        generatedFilter = {
+          resetValue: type === "multiple" ? [] : "",
+          showConfirmAndReset: true,
+          ...filterOptions,
+          list: resolvedOptions,
+          props: {
+            ...filterProps,
+            options: resolvedOptions,
+            type
+          },
+          component: QdServiceTableFilterItem,
+          ...type === "multiple" ? {
+            confirmDisabled: (value) => value === null
+          } : {},
+          ...!options && reuseCell ? {
+            renderFilterValue: (_h, {
+              value
+            }) => {
+              const values = Array.isArray(value) ? value : [value];
+              return values.map((item, index) => {
+                const option = resolvedOptions.find((option2) => option2.value === item);
+                const content = option?.render?.() ?? option?.label ?? String(item);
+                return [index ? "，" : null, h("span", {
+                  class: "qd-service-table-filter-item__cell",
+                  inert: true
+                }, [content])];
+              });
+            }
+          } : {}
+        };
+      }
+      const resolvedFilter = {
+        ...generatedFilter,
+        ...filter,
+        props: {
+          ...generatedFilter.props,
+          ...filter?.props
+        }
+      };
+      if (resolvedFilter.component === QdServiceTableFilterItem) {
+        resolvedFilter.props = {
+          ...resolvedFilter.props,
+          showConfirmAndReset: resolvedFilter.showConfirmAndReset !== false
+        };
+      }
+      return resolvedFilter;
+    }
+    function wrapColumns(columns) {
       return columns.map((column) => {
         const {
           children,
+          filter,
+          filterItem,
           formItem,
           ...tableColumn
         } = column;
         const reColumn = {
           ...tableColumn,
+          ...filterItem ? {
+            filter: resolveColumnFilter(column, filterItem, filter)
+          } : {
+            filter
+          },
           ...formItem ? {
             formItem
           } : {},
           ...children ? {
-            children: wrapFormItemColumns(children)
+            children: wrapColumns(children)
           } : {}
         };
         const columnClassName = reColumn.className === void 0 ? [] : Array.isArray(reColumn.className) ? reColumn.className : [reColumn.className];
@@ -2120,7 +2315,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "on-sort-change": reOnSortChange,
         columns: autoWidthColumns.value,
         loading: tableLoad.value,
-        data: unref(data),
+        data: displayData.value,
         pagination: rePagination.value
       }), createSlots({
         empty: withCtx(() => [createVNode(unref(Empty), mergeProps({

package/dist/components/service/table/types.d.ts

@@ -1,5 +1,6 @@
 import type { ServicePageParams, ServicePageRes, ServicePagination, ServicePaginationOptions, useServicePagination } from 'qidian-shared';
-import type { BaseTableCellParams, EnhancedTableInstanceFunctions, ErrorListObjectType, PrimaryTableInstanceFunctions, TableErrorListMap, TableRowData, TableRowValue, TableTreeNodeExpandOptions, TdEmptyProps, TdEnhancedTableProps, TNode } from 'tdesign-vue-next';
+import type { BaseTableCellParams, EnhancedTableInstanceFunctions, ErrorListObjectType, OptionData, PrimaryTableInstanceFunctions, TableColumnFilter, TableErrorListMap, TableRowData, TableRowValue, TableTreeNodeExpandOptions, TdEmptyProps, TdEnhancedTableProps, TNode } from 'tdesign-vue-next';
+import type { QdComponentConfig } from '../../config-renderer';
 import type { QdFormItemProps } from '../../form';
 type TDesignServiceTableCol<D extends TableRowData> = NonNullable<TdEnhancedTableProps<D>['columns']>[number];
 export type QdServiceTableScroll = NonNullable<TdEnhancedTableProps['scroll']> & {
@@ -9,8 +10,20 @@ export type QdServiceTableScroll = NonNullable<TdEnhancedTableProps['scroll']> &
 export interface QdServiceTableCol<D extends TableRowData = TableRowData> extends Omit<TDesignServiceTableCol<D>, 'children' | 'foot'> {
     children?: QdServiceTableCol<D>[];
     foot?: string | TNode<BaseTableCellParams<D>>;
+    filterItem?: true | QdServiceTableFilterItem;
     formItem?: QdServiceTableFormItem;
 }
+export interface QdServiceTableFilterOption extends OptionData {
+    label: string;
+    value: NonNullable<OptionData['value']>;
+    count?: number;
+}
+export interface QdServiceTableFilterItem extends Omit<TableColumnFilter, 'component' | 'list' | 'type'> {
+    component?: QdComponentConfig;
+    options?: QdServiceTableFilterOption[];
+    reuseCell?: boolean;
+    type?: 'input' | 'single' | 'multiple';
+}
 export type QdServiceTableFormItem = Omit<QdFormItemProps, 'name' | 'label' | 'context' | 'col' | 'row' | 'labelWidth' | 'labelAlign'> & {
     lazy?: boolean;
     virtualValidateRender?: boolean;

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

@@ -350,6 +350,11 @@ declare const _default: {
         uploadText: string;
         inputText: string;
     };
+    table: {
+        filterItemInputPlaceholder: string;
+        filterItemSearchPlaceholder: string;
+        filterItemAllText: string;
+    };
     columnsController: {
         titleText: string;
         columnNameText: string;

package/dist/locales/en-US.mjs

@@ -92,6 +92,11 @@ const enUS = merge(enUS$1, {
     uploadText: "Please upload",
     inputText: "Please enter"
   },
+  table: {
+    filterItemInputPlaceholder: "Enter keywords to filter",
+    filterItemSearchPlaceholder: "Search; separate keywords with spaces",
+    filterItemAllText: "All"
+  },
   columnsController: {
     titleText: "Column Configuration",
     columnNameText: "Column Name",

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

@@ -350,6 +350,11 @@ declare const _default: {
         uploadText: string;
         inputText: string;
     };
+    table: {
+        filterItemInputPlaceholder: string;
+        filterItemSearchPlaceholder: string;
+        filterItemAllText: string;
+    };
     columnsController: {
         titleText: string;
         columnNameText: string;

package/dist/locales/zh-CN.mjs

@@ -89,6 +89,11 @@ const zhCN = merge(zhCN$1, {
     uploadText: "请上传",
     inputText: "请输入"
   },
+  table: {
+    filterItemInputPlaceholder: "输入关键词过滤",
+    filterItemSearchPlaceholder: "搜索，支持用空格分隔多个关键词",
+    filterItemAllText: "全部"
+  },
   columnsController: {
     titleText: "列配置",
     columnNameText: "列名",

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

@@ -350,6 +350,11 @@ declare const _default: {
         uploadText: string;
         inputText: string;
     };
+    table: {
+        filterItemInputPlaceholder: string;
+        filterItemSearchPlaceholder: string;
+        filterItemAllText: string;
+    };
     columnsController: {
         titleText: string;
         columnNameText: string;

package/dist/locales/zh-TW.mjs

@@ -89,6 +89,11 @@ const zhTW = merge(zhTW$1, {
     uploadText: "請上傳",
     inputText: "請輸入"
   },
+  table: {
+    filterItemInputPlaceholder: "輸入關鍵詞過濾",
+    filterItemSearchPlaceholder: "搜尋，支援用空格分隔多個關鍵詞",
+    filterItemAllText: "全部"
+  },
   columnsController: {
     titleText: "列配置",
     columnNameText: "列名",

package/package.json

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