yc-pro-components 0.0.47 → 0.0.49

package/lib/components/yc-plus-page/src/header-filter-cell.vue2.js

@@ -12,7 +12,8 @@ var useYcConfig = require('../../yc-config-provider/src/useYcConfig.js');
 
 const _hoisted_1 = { class: "yc-header-filter-cell__label-text" };
 const _hoisted_2 = { class: "yc-header-filter-cell__label-text" };
-const _hoisted_3 = {
+const _hoisted_3 = { style: { cursor: "pointer", display: "inline-flex", alignItems: "center" } };
+const _hoisted_4 = {
   class: "yc-header-filter-cell__content",
   style: {
     display: "flex",
@@ -22,10 +23,10 @@ const _hoisted_3 = {
     gap: "4px"
   }
 };
-const _hoisted_4 = { class: "yc-header-filter-cell__operators" };
-const _hoisted_5 = ["onClick"];
-const _hoisted_6 = { key: 0 };
-const _hoisted_7 = {
+const _hoisted_5 = { class: "yc-header-filter-cell__operators" };
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = { key: 0 };
+const _hoisted_8 = {
   class: "yc-header-filter-cell__actions",
   style: {
     display: "flex",
@@ -53,7 +54,6 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const emit = __emit;
     const { getCdnUrl } = useYcConfig.useYcCdnUrl();
     const filterIconUrl = vue.computed(() => getCdnUrl("images", "table_filter_icon.svg"));
-    const sortIconUrl = vue.computed(() => getCdnUrl("images", "table_sort_icon.svg"));
     const state = vue.reactive({
       selectedOp: "=",
       inputVal: ""
@@ -197,6 +197,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
         modelValue: state.inputVal,
         "onUpdate:modelValue": (v) => state.inputVal = v,
         placeholder: "",
+        maxlength: 50,
         style: "margin-top: 4px; width: 100%"
       });
     };
@@ -212,14 +213,22 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             alignItems: "center",
             gap: "4px",
             cursor: "default"
-          }
+          },
+          onMousedown: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+          }, ["stop"])),
+          onClick: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+          }, ["stop"]))
         },
         [
+          vue.createCommentVNode(" @mousedown.stop / @click.stop \u963B\u6B62 el-table <th> \u7684 handleHeaderClick \u548C\u5217 resize \u4E8B\u4EF6\u7A7F\u900F "),
           vue.createCommentVNode(" \u6807\u7B7E\u5185\u5BB9 "),
           vue.createElementVNode(
             "span",
             {
-              class: vue.normalizeClass(["yc-header-filter-cell__label", { "yc-header-filter-cell__label--ellipsis": shouldShowEllipsis.value }]),
+              class: vue.normalizeClass(["yc-header-filter-cell__label", {
+                "yc-header-filter-cell__label--ellipsis": shouldShowEllipsis.value,
+                "yc-header-filter-cell__label--active": isAscActive.value || isDescActive.value || isActive.value
+              }]),
               style: {
                 userSelect: "none",
                 cursor: "pointer"
@@ -318,19 +327,35 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             class: "yc-header-filter-cell__sort",
             style: {
               display: "inline-flex",
+              flexDirection: "column",
               alignItems: "center",
-              cursor: "pointer"
+              cursor: "pointer",
+              lineHeight: 1
             },
             onClick: vue.withModifiers(cycleSort, ["stop"])
           }, [
-            vue.createVNode(vue.unref(index$1.default), {
-              src: sortIconUrl.value,
-              size: 14,
-              class: vue.normalizeClass({
-                "yc-header-filter-cell__sort-icon--asc": isAscActive.value,
-                "yc-header-filter-cell__sort-icon--desc": isDescActive.value
-              })
-            }, null, 8, ["src", "class"])
+            vue.createCommentVNode(" \u5347\u5E8F\u7BAD\u5934\uFF1A\u6FC0\u6D3B\u65F6\u9AD8\u4EAE "),
+            vue.createVNode(vue.unref(elementPlus.ElIcon), {
+              size: 10,
+              style: vue.normalizeStyle({ color: isAscActive.value ? "var(--el-color-primary)" : "var(--el-text-color-placeholder)", marginBottom: "-4px" })
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(ElementPlusIconsVue.CaretTop))
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["style"]),
+            vue.createCommentVNode(" \u964D\u5E8F\u7BAD\u5934\uFF1A\u6FC0\u6D3B\u65F6\u9AD8\u4EAE "),
+            vue.createVNode(vue.unref(elementPlus.ElIcon), {
+              size: 10,
+              style: vue.normalizeStyle({ color: isDescActive.value ? "var(--el-color-primary)" : "var(--el-text-color-placeholder)" })
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(vue.unref(ElementPlusIconsVue.CaretBottom))
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["style"])
           ]),
           vue.createCommentVNode(" \u7B5B\u9009\u56FE\u6807\u548C\u5F39\u7A97 "),
           !_ctx.disableFilter ? (vue.openBlock(), vue.createBlock(vue.unref(elementPlus.ElPopover), {
@@ -339,25 +364,24 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             placement: "bottom-start",
             width: 220,
             visible: popVisible.value,
+            "onUpdate:visible": _cache[0] || (_cache[0] = ($event) => popVisible.value = $event),
             "popper-class": "yc-header-filter-pop",
             "popper-style": { zIndex: 4e3 }
           }, {
             reference: vue.withCtx(() => [
-              vue.createElementVNode("span", {
-                style: { cursor: "pointer", display: "inline-flex", alignItems: "center" },
-                onClick: _cache[0] || (_cache[0] = vue.withModifiers(($event) => popVisible.value = !popVisible.value, ["stop"]))
-              }, [
+              vue.createElementVNode("span", _hoisted_3, [
                 vue.createVNode(vue.unref(index$1.default), {
                   src: filterIconUrl.value,
                   size: 14,
+                  color: isActive.value ? "var(--el-color-primary)" : "currentColor",
                   class: vue.normalizeClass({ "yc-header-filter-cell__filter-icon--active": isActive.value })
-                }, null, 8, ["src", "class"])
+                }, null, 8, ["src", "color", "class"])
               ])
             ]),
             default: vue.withCtx(() => [
-              vue.createElementVNode("div", _hoisted_3, [
+              vue.createElementVNode("div", _hoisted_4, [
                 vue.createCommentVNode(" \u64CD\u4F5C\u7B26\u5217\u8868 "),
-                vue.createElementVNode("div", _hoisted_4, [
+                vue.createElementVNode("div", _hoisted_5, [
                   (vue.openBlock(true), vue.createElementBlock(
                     vue.Fragment,
                     null,
@@ -384,8 +408,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                           1
                           /* TEXT */
                         ),
-                        state.selectedOp === op.code ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, "\u2713")) : vue.createCommentVNode("v-if", true)
-                      ], 12, _hoisted_5);
+                        state.selectedOp === op.code ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, "\u2713")) : vue.createCommentVNode("v-if", true)
+                      ], 12, _hoisted_6);
                     }),
                     128
                     /* KEYED_FRAGMENT */
@@ -394,7 +418,7 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createCommentVNode(" \u503C\u8F93\u5165 "),
                 needValueInput.value ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(renderValueField), { key: 0 })) : vue.createCommentVNode("v-if", true),
                 vue.createCommentVNode(" \u64CD\u4F5C\u6309\u94AE "),
-                vue.createElementVNode("div", _hoisted_7, [
+                vue.createElementVNode("div", _hoisted_8, [
                   vue.createVNode(vue.unref(elementPlus.ElButton), { onClick: handleReset }, {
                     default: vue.withCtx(() => [
                       vue.createTextVNode("\u91CD\u7F6E")
@@ -419,8 +443,8 @@ var _sfc_main = /* @__PURE__ */ vue.defineComponent({
             /* STABLE */
           }, 8, ["visible"])) : vue.createCommentVNode("v-if", true)
         ],
-        512
-        /* NEED_PATCH */
+        544
+        /* NEED_HYDRATION, NEED_PATCH */
       );
     };
   }

package/lib/components/yc-plus-page/src/use-local-header-filter.d.ts

@@ -0,0 +1,93 @@
+import { HeaderFiltersState, OrderByItem, OperatorOption, HeaderFilterPayload, HeaderFilterResetPayload } from './type';
+import { Ref, ComputedRef } from 'vue';
+
+/**
+ * 可筛选列配置
+ */
+export interface LocalFilterColumnConfig {
+    /** 列字段名（对应 el-table-column 的 prop） */
+    prop: string;
+    /** 字段类型，决定可用的操作符集合，默认 'string' */
+    type?: 'string' | 'number' | 'date' | 'boolean';
+}
+/**
+ * useLocalHeaderFilter 配置项
+ */
+export interface UseLocalHeaderFilterOptions {
+    /** 需要启用筛选的列配置，未配置的列不显示筛选 */
+    filterableColumns?: LocalFilterColumnConfig[];
+}
+/**
+ * useLocalHeaderFilter 返回值
+ */
+export interface UseLocalHeaderFilterReturn<T> {
+    /** 经过筛选和排序后的数据，绑定到表格的 :data */
+    filteredData: ComputedRef<T[]>;
+    /** 当前筛选状态，传给 YcTableHeaderFilterCell 的 :filters */
+    headerFiltersState: HeaderFiltersState;
+    /** 当前排序状态，传给 YcTableHeaderFilterCell 的 :order-by */
+    orderByState: OrderByItem[];
+    /** 筛选确认处理，传给 YcTableHeaderFilterCell 的 @confirm */
+    handleFilterConfirm: (payload: HeaderFilterPayload) => void;
+    /** 筛选重置处理，传给 YcTableHeaderFilterCell 的 @reset */
+    handleFilterReset: (payload: HeaderFilterResetPayload) => void;
+    /** 排序切换处理，传给 YcTableHeaderFilterCell 的 @sort-change */
+    handleSortChange: (payload: {
+        field: string;
+        direction?: 'asc' | 'desc';
+    }) => void;
+    /** 根据 prop 获取操作符列表，传给 YcTableHeaderFilterCell 的 :operators */
+    getOpsByProp: (prop: string) => OperatorOption[];
+    /** 重置所有筛选和排序 */
+    resetAllFilters: () => void;
+    /** 是否有激活的筛选条件 */
+    hasActiveFilters: ComputedRef<boolean>;
+}
+/**
+ * 本地数据表头筛选组合式函数
+ *
+ * @param data - 响应式数据源
+ * @param options - 可筛选列配置
+ *
+ * @example
+ * ```ts
+ * import { useLocalHeaderFilter, YcTableHeaderFilterCell } from 'yc-pro-components'
+ *
+ * const {
+ *   filteredData,
+ *   headerFiltersState,
+ *   orderByState,
+ *   handleFilterConfirm,
+ *   handleFilterReset,
+ *   handleSortChange,
+ *   getOpsByProp
+ * } = useLocalHeaderFilter(tableData, {
+ *   filterableColumns: [
+ *     { prop: 'userName', type: 'string' },
+ *     { prop: 'realShortName', type: 'string' },
+ *     { prop: 'weight', type: 'number' }
+ *   ]
+ * })
+ * ```
+ *
+ * 模板中配合 el-table 使用：
+ * ```vue
+ * <el-table :data="filteredData">
+ *   <el-table-column prop="userName">
+ *     <template #header>
+ *       <YcTableHeaderFilterCell
+ *         label="客户名称"
+ *         :column="{ prop: 'userName' }"
+ *         :operators="getOpsByProp('userName')"
+ *         :filters="headerFiltersState.filters"
+ *         :order-by="orderByState"
+ *         @confirm="handleFilterConfirm"
+ *         @reset="handleFilterReset"
+ *         @sort-change="handleSortChange"
+ *       />
+ *     </template>
+ *   </el-table-column>
+ * </el-table>
+ * ```
+ */
+export declare function useLocalHeaderFilter<T = Record<string, unknown>>(data: Ref<T[]> | ComputedRef<T[]>, options?: UseLocalHeaderFilterOptions): UseLocalHeaderFilterReturn<T>;

package/lib/components/yc-plus-page/src/use-local-header-filter.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var vue = require('vue');
+var useHeaderFilter = require('./use-header-filter.js');
+
+function compareValues(a, b) {
+  if (a == null && b == null) return 0;
+  if (a == null) return -1;
+  if (b == null) return 1;
+  const numA = Number(a);
+  const numB = Number(b);
+  if (!isNaN(numA) && !isNaN(numB)) return numA - numB;
+  return String(a).localeCompare(String(b), "zh-CN");
+}
+function matchFilter(value, op, filterValue) {
+  const strValue = String(value != null ? value : "").toLowerCase();
+  const strFilter = String(filterValue != null ? filterValue : "").toLowerCase();
+  switch (op) {
+    case "=":
+      return strValue === strFilter;
+    case "!=":
+      return strValue !== strFilter;
+    case "like":
+      return strValue.includes(strFilter);
+    case "not like":
+      return !strValue.includes(strFilter);
+    case ">":
+      return Number(value) > Number(filterValue);
+    case ">=":
+      return Number(value) >= Number(filterValue);
+    case "<":
+      return Number(value) < Number(filterValue);
+    case "<=":
+      return Number(value) <= Number(filterValue);
+    case "is null":
+    case "empty":
+      return value == null || strValue === "";
+    case "is not null":
+    case "not_empty":
+      return value != null && strValue !== "";
+    case "in": {
+      const set = strFilter.split(",").map((s) => s.trim().toLowerCase());
+      return set.includes(strValue);
+    }
+    case "not in": {
+      const set = strFilter.split(",").map((s) => s.trim().toLowerCase());
+      return !set.includes(strValue);
+    }
+    case "between": {
+      let parts = strFilter.split(",").map((s) => Number(s.trim()));
+      if (parts.length < 2 || isNaN(parts[0]) || isNaN(parts[1])) {
+        const hyphenMatch = strFilter.match(/^(-?\d+(?:\.\d+)?)-(-?\d+(?:\.\d+)?)$/);
+        if (hyphenMatch) {
+          parts = [Number(hyphenMatch[1]), Number(hyphenMatch[2])];
+        }
+      }
+      const num = Number(value);
+      return parts.length === 2 && !isNaN(num) && !isNaN(parts[0]) && !isNaN(parts[1]) && num >= parts[0] && num <= parts[1];
+    }
+    case "is true":
+      return value === true || strValue === "true" || strValue === "1";
+    case "is false":
+      return value === false || strValue === "false" || strValue === "0";
+    default:
+      return true;
+  }
+}
+function useLocalHeaderFilter(data, options) {
+  const fieldCatalog = vue.computed(() => {
+    const cols = options == null ? void 0 : options.filterableColumns;
+    if (!(cols == null ? void 0 : cols.length)) return {};
+    const catalog = {};
+    for (const col of cols) {
+      catalog[col.prop] = {
+        type: col.type || "string",
+        filter: true,
+        allowedField: col.prop
+      };
+    }
+    return catalog;
+  });
+  const {
+    headerFiltersState,
+    orderByState,
+    upsertHeaderFilter,
+    removeHeaderFilter,
+    setOrderBy,
+    getOpsByProp,
+    isEnabled: _isEnabled
+  } = useHeaderFilter.useHeaderFilter({
+    headerFilterConfig: () => ({
+      enabled: true,
+      fieldCatalog: fieldCatalog.value
+    }),
+    hideHeaderFilter: () => false
+  });
+  const filteredData = vue.computed(() => {
+    let result = [...vue.unref(data) || []];
+    if (headerFiltersState.filters.length > 0) {
+      result = result.filter((row) => {
+        const record = row;
+        return headerFiltersState.filters.every(
+          (filter) => matchFilter(record[filter.field], filter.op, filter.value)
+        );
+      });
+    }
+    if (orderByState.length > 0) {
+      result.sort((a, b) => {
+        const recA = a;
+        const recB = b;
+        for (const order of orderByState) {
+          const cmp = compareValues(recA[order.field], recB[order.field]);
+          if (cmp !== 0) return order.direction === "asc" ? cmp : -cmp;
+        }
+        return 0;
+      });
+    }
+    return result;
+  });
+  const handleFilterConfirm = (payload) => {
+    var _a;
+    const field = String(((_a = payload.column) == null ? void 0 : _a.prop) || "");
+    upsertHeaderFilter(field, payload.op, payload.value);
+  };
+  const handleFilterReset = (payload) => {
+    var _a;
+    const field = String(((_a = payload.column) == null ? void 0 : _a.prop) || "");
+    removeHeaderFilter(field);
+  };
+  const handleSortChange = (payload) => {
+    setOrderBy(payload.field, payload.direction);
+  };
+  const resetAllFilters = () => {
+    headerFiltersState.filters.splice(0);
+    orderByState.splice(0);
+  };
+  const hasActiveFilters = vue.computed(() => {
+    return headerFiltersState.filters.length > 0 || orderByState.length > 0;
+  });
+  return {
+    filteredData,
+    headerFiltersState,
+    orderByState,
+    handleFilterConfirm,
+    handleFilterReset,
+    handleSortChange,
+    getOpsByProp,
+    resetAllFilters,
+    hasActiveFilters
+  };
+}
+
+exports.useLocalHeaderFilter = useLocalHeaderFilter;