yc-pro-components 0.0.20 → 0.0.21

package/es/components/index.mjs

@@ -21,7 +21,7 @@ export { PlusLayout } from './layout/index.mjs';
 export { PlusCheckCard } from './check-card/index.mjs';
 export { PlusCheckCardGroup } from './check-card-group/index.mjs';
 export { YcConfigProvider as ReConfigProvider, YcConfigProvider } from './yc-config-provider/index.mjs';
-export { RePlusPage, YcPlusPage } from './yc-plus-page/index.mjs';
+export { RePlusPage, YcPlusPage, YcTableHeaderFilterCell } from './yc-plus-page/index.mjs';
 export { RePlusTree, YcPlusTree } from './yc-plus-tree/index.mjs';
 export { ReDialog, YcDialog } from './yc-dialog/index.mjs';
 export { ReDrawer, YcDrawer } from './yc-drawer/index.mjs';
@@ -41,6 +41,8 @@ export { YcDownloadDialogWithInstall } from './yc-download-dialog/index.mjs';
 export { YcTabsWithFilterWithInstall } from './yc-tabs-with-filter/index.mjs';
 export { DEFAULT_CDN_CONFIG, DEFAULT_YC_CONFIG, YC_CONFIG_KEY } from './yc-config-provider/src/type.mjs';
 export { useYcAuth, useYcCdn, useYcCdnUrl, useYcComponentConfig, useYcConfig, useYcPerms, useYcShowPageSearch, useYcTranslate } from './yc-config-provider/src/useYcConfig.mjs';
+export { useHeaderFilter } from './yc-plus-page/src/use-header-filter.mjs';
+export { DEFAULT_OPERATORS, NO_VALUE_OPERATORS, OPERATOR_CATALOG, OPERATOR_LABELS } from './yc-plus-page/src/constants.mjs';
 export { default as ReSelectV2, default as YcSelectV2 } from './yc-select-v2/src/index.vue.mjs';
 export { findNodeById, findNodeByPath, findNodePosition, insertAsChild, insertAsSibling, insertNodeAtPosition, removeNode, reorderNodeChildren, reorderSiblingNodes } from './yc-plus-tree/src/treeDataUtils.mjs';
 export { SIZE_MAP } from './yc-dialog/src/type.mjs';

package/es/components/yc-plus-page/index.d.ts

@@ -1,8 +1,12 @@
 import { default as YcPlusPageComponent } from './src/index.vue';
 import { DefineComponent } from 'vue';
 
-export type { YcPlusPageProps } from './src/type';
+export type { YcPlusPageProps, FieldCatalogItem, FieldCatalog, OperatorOption, HeaderFilterConfig, ColumnHeaderFilterConfig, HeaderFilterPayload, HeaderFilterResetPayload, FilterItem, HeaderFiltersState, OrderByItem, RequestResponse } from './src/type';
+export { useHeaderFilter } from './src/use-header-filter';
+export type { UseHeaderFilterOptions, UseHeaderFilterReturn } from './src/use-header-filter';
+export { OPERATOR_CATALOG, OPERATOR_LABELS, NO_VALUE_OPERATORS, DEFAULT_OPERATORS } from './src/constants';
 export type YcPlusPageInstance = InstanceType<typeof YcPlusPageComponent>;
 export declare const YcPlusPage: DefineComponent;
+export declare const YcTableHeaderFilterCell: DefineComponent;
 export declare const RePlusPage: DefineComponent;
 export type { YcPlusPageProps as RePlusPageProps } from './src/type';

package/es/components/yc-plus-page/index.mjs

@@ -1,6 +1,10 @@
 import YcPlusPageComponent from './src/index.vue.mjs';
+import YcTableHeaderFilterCellComponent from './src/header-filter-cell.vue.mjs';
+export { useHeaderFilter } from './src/use-header-filter.mjs';
+export { DEFAULT_OPERATORS, NO_VALUE_OPERATORS, OPERATOR_CATALOG, OPERATOR_LABELS } from './src/constants.mjs';
 
 const YcPlusPage = YcPlusPageComponent;
+const YcTableHeaderFilterCell = YcTableHeaderFilterCellComponent;
 const RePlusPage = YcPlusPageComponent;
 
-export { RePlusPage, YcPlusPage };
+export { RePlusPage, YcPlusPage, YcTableHeaderFilterCell };

package/es/components/yc-plus-page/src/constants.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 表头筛选相关常量
+ */
+/**
+ * 操作符目录 - 按字段类型分组
+ */
+export declare const OPERATOR_CATALOG: Record<string, string[]>;
+/**
+ * 操作符中文映射
+ */
+export declare const OPERATOR_LABELS: Record<string, string>;
+/**
+ * 不需要输入值的操作符
+ */
+export declare const NO_VALUE_OPERATORS: string[];
+/**
+ * 默认操作符
+ */
+export declare const DEFAULT_OPERATORS: {
+    label: string;
+    code: string;
+}[];

package/es/components/yc-plus-page/src/constants.mjs

@@ -0,0 +1,41 @@
+const OPERATOR_CATALOG = {
+  string: ["=", "!=", "like", "not like", "in", "not in"],
+  number: ["=", "!=", ">", ">=", "<", "<=", "in", "not in", "between"],
+  date: ["=", ">", ">=", "<", "<=", "between"],
+  boolean: ["is true", "is false", "is null", "is not null"],
+  nullable: ["is null", "is not null"],
+  json: ["contains", "not contains", "is null", "is not null"]
+};
+const OPERATOR_LABELS = {
+  // 通用
+  "=": "\u7B49\u4E8E",
+  "!=": "\u4E0D\u7B49\u4E8E",
+  ">": "\u5927\u4E8E",
+  ">=": "\u5927\u4E8E\u7B49\u4E8E",
+  "<": "\u5C0F\u4E8E",
+  "<=": "\u5C0F\u4E8E\u7B49\u4E8E",
+  like: "\u5305\u542B",
+  "not like": "\u4E0D\u5305\u542B",
+  in: "\u5C5E\u4E8E",
+  "not in": "\u4E0D\u5C5E\u4E8E",
+  between: "\u4ECB\u4E8E",
+  "is null": "\u4E3A\u7A7A",
+  "is not null": "\u4E0D\u4E3A\u7A7A",
+  // 布尔专用
+  "is true": "\u4E3A\u771F",
+  "is false": "\u4E3A\u5047",
+  // JSON 专用
+  contains: "\u5305\u542B\u952E\u503C",
+  "not contains": "\u4E0D\u5305\u542B\u952E\u503C"
+};
+const NO_VALUE_OPERATORS = [
+  "empty",
+  "not_empty",
+  "is null",
+  "is not null",
+  "is true",
+  "is false"
+];
+const DEFAULT_OPERATORS = [{ label: OPERATOR_LABELS["="] || "=", code: "=" }];
+
+export { DEFAULT_OPERATORS, NO_VALUE_OPERATORS, OPERATOR_CATALOG, OPERATOR_LABELS };

package/es/components/yc-plus-page/src/header-filter-cell.vue.d.ts

@@ -0,0 +1,85 @@
+import { DefineComponent, ComponentOptionsMixin, PublicProps, ExtractPropTypes, PropType } from 'vue';
+import { OperatorOption, OrderByItem, FilterItem } from './type';
+import { PlusColumn } from 'yc-pro-components/es/types/plus';
+
+interface Props {
+    /** 列标签 */
+    label: string;
+    /** 列配置 */
+    column: PlusColumn;
+    /** 操作符列表 */
+    operators?: OperatorOption[];
+    /** 当前筛选状态 */
+    filters?: FilterItem[];
+    /** 当前排序状态 */
+    orderBy?: OrderByItem[];
+    /** 是否禁用筛选（仅显示排序） */
+    disableFilter?: boolean;
+    /** 自定义渲染 reference */
+    referenceRenderer?: () => unknown;
+}
+declare const _default: DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    operators: () => never[];
+    filters: () => never[];
+    orderBy: () => never[];
+    disableFilter: boolean;
+    referenceRenderer: undefined;
+}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    reset: (payload: {
+        column: PlusColumn;
+        op: string;
+    }) => void;
+    confirm: (payload: {
+        column: PlusColumn;
+        op: string;
+        value?: string | undefined;
+    }) => void;
+    sortChange: (payload: {
+        field: string;
+        direction?: "desc" | "asc" | undefined;
+    }) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
+    operators: () => never[];
+    filters: () => never[];
+    orderBy: () => never[];
+    disableFilter: boolean;
+    referenceRenderer: undefined;
+}>>> & {
+    onReset?: ((payload: {
+        column: PlusColumn;
+        op: string;
+    }) => any) | undefined;
+    onConfirm?: ((payload: {
+        column: PlusColumn;
+        op: string;
+        value?: string | undefined;
+    }) => any) | undefined;
+    onSortChange?: ((payload: {
+        field: string;
+        direction?: "desc" | "asc" | undefined;
+    }) => any) | undefined;
+}, {
+    filters: FilterItem[];
+    orderBy: OrderByItem[];
+    operators: OperatorOption[];
+    disableFilter: boolean;
+    referenceRenderer: () => unknown;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/es/components/yc-plus-page/src/header-filter-cell.vue.mjs

@@ -0,0 +1,6 @@
+import _sfc_main from './header-filter-cell.vue2.mjs';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+var YcTableHeaderFilterCellComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-87ce6807"], ["__file", "header-filter-cell.vue"]]);
+
+export { YcTableHeaderFilterCellComponent as default };

package/es/components/yc-plus-page/src/header-filter-cell.vue2.mjs

@@ -0,0 +1,354 @@
+import { defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, createCommentVNode, createElementVNode, withModifiers, createBlock, resolveDynamicComponent, Fragment, createTextVNode, toDisplayString, createVNode, unref, withCtx, renderList, normalizeStyle, h } from 'vue';
+import { ElIcon, ElPopover, ElButton, ElTimePicker, ElTimeSelect, ElDatePicker, ElInput } from 'element-plus';
+import { CaretTop, CaretBottom, Filter } from '@element-plus/icons-vue';
+import { NO_VALUE_OPERATORS } from './constants.mjs';
+
+const _hoisted_1 = {
+  class: "yc-header-filter-cell__sort",
+  style: {
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "center",
+    lineHeight: 1
+  }
+};
+const _hoisted_2 = {
+  class: "yc-header-filter-cell__content",
+  style: {
+    display: "flex",
+    flexDirection: "column",
+    padding: "8px",
+    minWidth: "180px",
+    gap: "6px"
+  }
+};
+const _hoisted_3 = { class: "yc-header-filter-cell__operators" };
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = { key: 0 };
+const _hoisted_6 = {
+  class: "yc-header-filter-cell__actions",
+  style: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginTop: "6px"
+  }
+};
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "YcTableHeaderFilterCell"
+  },
+  __name: "header-filter-cell",
+  props: {
+    label: {},
+    column: {},
+    operators: { default: () => [] },
+    filters: { default: () => [] },
+    orderBy: { default: () => [] },
+    disableFilter: { type: Boolean, default: false },
+    referenceRenderer: { type: Function, default: void 0 }
+  },
+  emits: ["confirm", "reset", "sortChange"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const state = reactive({
+      selectedOp: "=",
+      inputVal: ""
+    });
+    const popVisible = ref(false);
+    const wrapperElRef = ref(null);
+    const operatorsList = computed(() => props.operators);
+    watch(
+      operatorsList,
+      (list) => {
+        var _a;
+        const firstCode = (_a = list == null ? void 0 : list[0]) == null ? void 0 : _a.code;
+        if (!Array.isArray(list)) return;
+        if (!list.some((op) => op.code === state.selectedOp)) {
+          state.selectedOp = firstCode != null ? firstCode : "=";
+        }
+      },
+      { immediate: true }
+    );
+    const fieldRef = computed(() => {
+      var _a;
+      return String(((_a = props.column) == null ? void 0 : _a.prop) || "");
+    });
+    const isActive = computed(() => {
+      var _a, _b;
+      const field = fieldRef.value;
+      return (_b = (_a = props.filters) == null ? void 0 : _a.some((i) => String(i.field) === field)) != null ? _b : false;
+    });
+    const isAscActive = computed(
+      () => {
+        var _a;
+        return (_a = props.orderBy) == null ? void 0 : _a.some((i) => i.field === fieldRef.value && i.direction === "asc");
+      }
+    );
+    const isDescActive = computed(
+      () => {
+        var _a;
+        return (_a = props.orderBy) == null ? void 0 : _a.some((i) => i.field === fieldRef.value && i.direction === "desc");
+      }
+    );
+    const onDocPointerOrClick = (e) => {
+      if (!popVisible.value) return;
+      const target = e.target;
+      const wrapper = wrapperElRef.value;
+      if (target && ((wrapper == null ? void 0 : wrapper.contains(target)) || target.closest(".yc-header-filter-pop"))) return;
+      popVisible.value = false;
+    };
+    onMounted(() => {
+      window.addEventListener("pointerdown", onDocPointerOrClick, true);
+      window.addEventListener("click", onDocPointerOrClick, true);
+    });
+    onBeforeUnmount(() => {
+      window.removeEventListener("pointerdown", onDocPointerOrClick, true);
+      window.removeEventListener("click", onDocPointerOrClick, true);
+    });
+    const handleSelect = (op) => {
+      state.selectedOp = op.code;
+    };
+    const handleReset = () => {
+      state.inputVal = "";
+      emit("reset", { column: props.column, op: state.selectedOp });
+      popVisible.value = false;
+    };
+    const handleConfirm = () => {
+      emit("confirm", {
+        column: props.column,
+        op: state.selectedOp,
+        value: state.inputVal
+      });
+      popVisible.value = false;
+    };
+    const toggleAsc = () => {
+      const field = fieldRef.value;
+      emit("sortChange", { field, direction: isAscActive.value ? void 0 : "asc" });
+    };
+    const toggleDesc = () => {
+      const field = fieldRef.value;
+      emit("sortChange", { field, direction: isDescActive.value ? void 0 : "desc" });
+    };
+    const cycleSort = () => {
+      const field = fieldRef.value;
+      if (!field) return;
+      if (isDescActive.value) {
+        emit("sortChange", { field, direction: "asc" });
+      } else if (isAscActive.value) {
+        emit("sortChange", { field, direction: void 0 });
+      } else {
+        emit("sortChange", { field, direction: "desc" });
+      }
+    };
+    const needValueInput = computed(() => {
+      return !NO_VALUE_OPERATORS.includes(state.selectedOp);
+    });
+    const renderValueField = () => {
+      var _a, _b, _c, _d, _e;
+      if (!needValueInput.value) return null;
+      const vt = String(((_a = props.column) == null ? void 0 : _a.valueType) || "").toLowerCase();
+      const fp = ((_b = props.column) == null ? void 0 : _b.fieldProps) || {};
+      if (vt === "time-picker") {
+        return h(ElTimePicker, {
+          ...fp,
+          format: (_c = fp == null ? void 0 : fp.format) != null ? _c : "HH:mm:ss",
+          valueFormat: (_d = fp == null ? void 0 : fp.valueFormat) != null ? _d : "HH:mm:ss",
+          modelValue: state.inputVal,
+          "onUpdate:modelValue": (v) => state.inputVal = String(v != null ? v : ""),
+          style: "margin-top: 4px; width: 100%"
+        });
+      }
+      if (vt === "time-select") {
+        return h(ElTimeSelect, {
+          ...fp,
+          modelValue: state.inputVal,
+          "onUpdate:modelValue": (v) => {
+            const raw = String(v != null ? v : "");
+            const nv = raw && /^\d{2}:\d{2}$/.test(raw) ? `${raw}:00` : raw;
+            state.inputVal = nv;
+          },
+          style: "margin-top: 4px; width: 100%"
+        });
+      }
+      if (vt === "date-picker") {
+        return h(ElDatePicker, {
+          ...fp,
+          valueFormat: (_e = fp == null ? void 0 : fp.valueFormat) != null ? _e : "YYYY-MM-DD HH:mm:ss",
+          modelValue: state.inputVal,
+          "onUpdate:modelValue": (v) => {
+            const nv = Array.isArray(v) ? v.join(",") : String(v != null ? v : "");
+            state.inputVal = nv;
+          },
+          style: "margin-top: 4px; width: 100%"
+        });
+      }
+      return h(ElInput, {
+        modelValue: state.inputVal,
+        "onUpdate:modelValue": (v) => state.inputVal = v,
+        placeholder: "",
+        style: "margin-top: 4px; width: 100%"
+      });
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          ref_key: "wrapperElRef",
+          ref: wrapperElRef,
+          class: "yc-header-filter-cell",
+          style: {
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "6px",
+            cursor: "default"
+          }
+        },
+        [
+          createCommentVNode(" \u6807\u7B7E\u5185\u5BB9 "),
+          createElementVNode("span", {
+            class: "yc-header-filter-cell__label",
+            style: {
+              userSelect: "none",
+              cursor: "pointer"
+            },
+            onClick: withModifiers(cycleSort, ["stop"])
+          }, [
+            _ctx.referenceRenderer ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.referenceRenderer), { key: 0 })) : (openBlock(), createElementBlock(
+              Fragment,
+              { key: 1 },
+              [
+                createTextVNode(
+                  toDisplayString(_ctx.label),
+                  1
+                  /* TEXT */
+                )
+              ],
+              64
+              /* STABLE_FRAGMENT */
+            ))
+          ]),
+          createCommentVNode(" \u6392\u5E8F\u56FE\u6807 "),
+          createElementVNode("span", _hoisted_1, [
+            createVNode(unref(ElIcon), {
+              size: 12,
+              color: isAscActive.value ? "var(--el-color-primary)" : "var(--el-text-color-secondary)",
+              style: { cursor: "pointer" },
+              onClick: withModifiers(toggleAsc, ["stop"])
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(CaretTop))
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["color"]),
+            createVNode(unref(ElIcon), {
+              size: 12,
+              color: isDescActive.value ? "var(--el-color-primary)" : "var(--el-text-color-secondary)",
+              style: { cursor: "pointer", marginTop: "-5px" },
+              onClick: withModifiers(toggleDesc, ["stop"])
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(CaretBottom))
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["color"])
+          ]),
+          createCommentVNode(" \u7B5B\u9009\u56FE\u6807\u548C\u5F39\u7A97 "),
+          !_ctx.disableFilter ? (openBlock(), createBlock(unref(ElPopover), {
+            key: 0,
+            trigger: "click",
+            placement: "bottom-start",
+            width: 220,
+            visible: popVisible.value,
+            "popper-class": "yc-header-filter-pop",
+            "popper-style": { zIndex: 4e3 }
+          }, {
+            reference: withCtx(() => [
+              createVNode(unref(ElIcon), {
+                size: 16,
+                color: isActive.value ? "var(--el-color-primary)" : "var(--el-text-color-secondary)",
+                style: { cursor: "pointer" },
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => popVisible.value = !popVisible.value, ["stop"]))
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(Filter))
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["color"])
+            ]),
+            default: withCtx(() => [
+              createElementVNode("div", _hoisted_2, [
+                createCommentVNode(" \u64CD\u4F5C\u7B26\u5217\u8868 "),
+                createElementVNode("div", _hoisted_3, [
+                  (openBlock(true), createElementBlock(
+                    Fragment,
+                    null,
+                    renderList(operatorsList.value, (op) => {
+                      return openBlock(), createElementBlock("div", {
+                        key: op.code,
+                        class: "yc-header-filter-cell__operator-item",
+                        style: normalizeStyle({
+                          display: "flex",
+                          justifyContent: "space-between",
+                          alignItems: "center",
+                          padding: "6px 8px",
+                          borderRadius: "4px",
+                          background: state.selectedOp === op.code ? "var(--el-color-primary-light-9)" : "transparent",
+                          color: state.selectedOp === op.code ? "var(--el-color-primary)" : "inherit",
+                          cursor: "pointer"
+                        }),
+                        onClick: ($event) => handleSelect(op)
+                      }, [
+                        createElementVNode(
+                          "span",
+                          null,
+                          toDisplayString(op.label),
+                          1
+                          /* TEXT */
+                        ),
+                        state.selectedOp === op.code ? (openBlock(), createElementBlock("span", _hoisted_5, "\u2713")) : createCommentVNode("v-if", true)
+                      ], 12, _hoisted_4);
+                    }),
+                    128
+                    /* KEYED_FRAGMENT */
+                  ))
+                ]),
+                createCommentVNode(" \u503C\u8F93\u5165 "),
+                needValueInput.value ? (openBlock(), createBlock(resolveDynamicComponent(renderValueField), { key: 0 })) : createCommentVNode("v-if", true),
+                createCommentVNode(" \u64CD\u4F5C\u6309\u94AE "),
+                createElementVNode("div", _hoisted_6, [
+                  createVNode(unref(ElButton), { onClick: handleReset }, {
+                    default: withCtx(() => [
+                      createTextVNode("\u91CD\u7F6E")
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  }),
+                  createVNode(unref(ElButton), {
+                    type: "primary",
+                    onClick: handleConfirm
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode("\u786E\u5B9A")
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ])
+              ])
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["visible"])) : createCommentVNode("v-if", true)
+        ],
+        512
+        /* NEED_PATCH */
+      );
+    };
+  }
+});
+
+export { _sfc_main as default };