@manohub/app-kit 0.1.0

package/dist/components/app-table.js

@@ -0,0 +1,479 @@
+import { defineComponent, ref, computed, watch, nextTick, onMounted, onBeforeUnmount, createVNode, mergeProps } from "vue";
+import { FDataGrid } from "@farris/ui-vue";
+import { AppQueryState } from "../atoms/app-query-state.js";
+const RESIZE_DEBOUNCE_MS = 150;
+function unwrapRow(row) {
+  const wrapper = row ?? {};
+  const item = "raw" in wrapper ? wrapper.raw : wrapper;
+  const index = typeof item?.__fv_data_index__ === "number" ? item.__fv_data_index__ : 0;
+  return {
+    item,
+    index
+  };
+}
+const SOURCE_ROW_KEY = "__ak_source_row__";
+function toBusinessRow(item) {
+  const record = item;
+  return record && typeof record === "object" && SOURCE_ROW_KEY in record ? record[SOURCE_ROW_KEY] : item;
+}
+const AppTable = /* @__PURE__ */ defineComponent({
+  name: "AppTable",
+  inheritAttrs: false,
+  props: {
+    rows: {
+      type: Array,
+      required: true
+    },
+    columns: {
+      type: Array,
+      required: true
+    },
+    rowKey: {
+      type: String,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /*
+     * truthy 即触发错误态；type 用构造器数组承载 unknown（`type: null` 在 vue-tsc 下被推断为 undefined）。
+     *
+     * **顺序有硬约束：`String` 必须排在 `Boolean` 前面。** Vue 的 prop 布尔转换规则是
+     * 「Boolean 在类型数组里比 String 靠前时，空字符串会被转成 true」—— 顺序写反时
+     * `error={loadError.value}` 在**成功态**（值为 `''`）会被判成 `true`，表格永远显示「加载失败」，
+     * 数据行根本渲染不出来（真实踩过：接口返回 200 + `[]` 仍报加载失败）。
+     */
+    error: {
+      type: [String, Boolean, Object, Number, Array],
+      default: void 0
+    },
+    empty: {
+      type: String,
+      default: "暂无数据"
+    },
+    emptyDescription: {
+      type: String,
+      default: void 0
+    },
+    /** 错误态标题（默认「加载失败」）；错误原文会自动作为副文案显示 */
+    errorTitle: {
+      type: String,
+      default: "加载失败"
+    },
+    /** 空态操作按钮（如「新建」）；与 `onEmptyAction` 同时传才渲染 */
+    emptyActionText: {
+      type: String,
+      default: void 0
+    },
+    onEmptyAction: {
+      type: Function,
+      default: void 0
+    },
+    /** 错误态操作按钮（如「重试」）；与 `onErrorAction` 同时传才渲染 */
+    errorActionText: {
+      type: String,
+      default: void 0
+    },
+    onErrorAction: {
+      type: Function,
+      default: void 0
+    },
+    skeletonRows: {
+      type: Number,
+      default: 6
+    },
+    rowNumber: {
+      type: [Boolean, Object],
+      default: false
+    },
+    rowHeight: {
+      type: Number,
+      default: void 0
+    },
+    headerHeight: {
+      type: Number,
+      default: void 0
+    },
+    stripe: {
+      type: Boolean,
+      default: void 0
+    },
+    framed: {
+      type: Boolean,
+      default: false
+    },
+    // 任意类型载体：type 用构造器数组（`PropType<unknown>` 在本仓 vue-tsc 下退化为 undefined）；
+    // `String` 同样必须排在 `Boolean` 前（理由见上面 `error` 的说明）
+    refreshKey: {
+      type: [String, Boolean, Object, Number, Array],
+      default: void 0
+    },
+    selection: {
+      type: [Boolean, Object],
+      default: false
+    },
+    rowHighlightKey: {
+      type: String,
+      default: void 0
+    },
+    rowClass: {
+      type: Function,
+      default: void 0
+    },
+    onRowClick: {
+      type: Function,
+      default: void 0
+    },
+    onRowDoubleClick: {
+      type: Function,
+      default: void 0
+    },
+    tableKey: {
+      type: [String, Number],
+      default: void 0
+    },
+    onContainerResize: {
+      type: Function,
+      default: void 0
+    },
+    resizePollInterval: {
+      type: Number,
+      default: void 0
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    const gridRef = ref(null);
+    const flatRows = computed(() => props.rows.map((row) => {
+      const copy = {
+        ...row
+      };
+      Object.defineProperty(copy, SOURCE_ROW_KEY, {
+        value: row,
+        enumerable: false,
+        configurable: true
+      });
+      return copy;
+    }));
+    watch(flatRows, (items) => {
+      void nextTick(() => {
+        gridRef.value?.updateDataSource?.(items);
+      });
+    });
+    const selectionConfig = computed(() => props.selection ? {
+      mode: "multiple",
+      ...props.selection
+    } : null);
+    const isControlled = computed(() => selectionConfig.value?.selected !== void 0);
+    const internalSelected = ref(/* @__PURE__ */ new Set());
+    const rowId = (row) => String(row?.[props.rowKey] ?? "");
+    const canSelect = (row) => selectionConfig.value?.selectable ? selectionConfig.value.selectable(row) : true;
+    const selectedIds = computed(() => isControlled.value ? new Set(selectionConfig.value?.selected ?? []) : internalSelected.value);
+    watch(() => props.rows, (rows) => {
+      if (isControlled.value) return;
+      const existing = new Set(rows.map((row) => rowId(row)));
+      const kept = [...internalSelected.value].filter((id) => existing.has(id));
+      if (kept.length !== internalSelected.value.size) internalSelected.value = new Set(kept);
+    });
+    watch(() => [...selectedIds.value].sort().join("
"), () => {
+      void nextTick(() => {
+        gridRef.value?.updateDataSource?.(flatRows.value);
+      });
+    });
+    watch(() => props.refreshKey, () => {
+      void nextTick(() => {
+        gridRef.value?.updateDataSource?.(flatRows.value);
+      });
+    }, {
+      deep: true
+    });
+    const pageSelectableRows = computed(() => {
+      const cfg = selectionConfig.value;
+      if (!cfg || cfg.mode === "single") return [];
+      return props.rows.filter((row) => canSelect(row));
+    });
+    const allPageSelected = computed(() => pageSelectableRows.value.length > 0 && pageSelectableRows.value.every((row) => selectedIds.value.has(rowId(row))));
+    const somePageSelected = computed(() => pageSelectableRows.value.some((row) => selectedIds.value.has(rowId(row))));
+    const toggleIds = (ids) => {
+      const cfg = selectionConfig.value;
+      if (!cfg || ids.length === 0) return;
+      if (isControlled.value) {
+        cfg.onSelectedChange?.(ids);
+        return;
+      }
+      const next = new Set(internalSelected.value);
+      for (const id of ids) {
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+      }
+      internalSelected.value = next;
+      cfg.onSelectedChange?.([...next]);
+    };
+    const handleToggleRow = (row) => {
+      const cfg = selectionConfig.value;
+      if (!cfg || !canSelect(row)) return;
+      const id = rowId(row);
+      if (cfg.mode !== "single") {
+        toggleIds([id]);
+        return;
+      }
+      const current = [...selectedIds.value];
+      if (current.length === 1 && current[0] === id) return;
+      if (isControlled.value) {
+        cfg.onSelectedChange?.([...current.filter((it) => it !== id), id]);
+        return;
+      }
+      internalSelected.value = /* @__PURE__ */ new Set([id]);
+      cfg.onSelectedChange?.([id]);
+    };
+    const renderSelectCell = (_cell, row) => {
+      const cfg = selectionConfig.value;
+      if (!cfg) return null;
+      const item = toBusinessRow(unwrapRow(row).item);
+      const selectable = canSelect(item);
+      return createVNode("label", {
+        "class": selectable ? "ak-table-check" : "ak-table-check is-disabled"
+      }, [createVNode("input", {
+        "type": cfg.mode === "single" ? "radio" : "checkbox",
+        "checked": selectedIds.value.has(rowId(item)),
+        "disabled": !selectable,
+        "onChange": () => handleToggleRow(item)
+      }, null)]);
+    };
+    const renderSelectAllHeader = () => {
+      if (selectionConfig.value?.mode === "single") return null;
+      const selectable = pageSelectableRows.value.length > 0;
+      return createVNode("label", {
+        "class": selectable ? "ak-table-check" : "ak-table-check is-disabled"
+      }, [createVNode("input", {
+        "type": "checkbox",
+        "checked": allPageSelected.value,
+        "disabled": !selectable,
+        "ref": (el) => {
+          const input = el;
+          if (input) input.indeterminate = somePageSelected.value && !allPageSelected.value;
+        },
+        "onChange": () => {
+          const cfg = selectionConfig.value;
+          if (!cfg) return;
+          if (cfg.onSelectAll) {
+            cfg.onSelectAll(pageSelectableRows.value);
+            return;
+          }
+          const targetSelected = !allPageSelected.value;
+          const ids = pageSelectableRows.value.map((row) => rowId(row)).filter((id) => selectedIds.value.has(id) !== targetSelected);
+          toggleIds(ids);
+        }
+      }, null)]);
+    };
+    const farrisColumns = computed(() => {
+      const columns = props.columns.map((col) => {
+        const column = {
+          field: col.key,
+          dataType: "string",
+          width: col.width ?? 120,
+          resizable: true
+        };
+        if (typeof col.title === "function") {
+          column.title = "";
+          column.headerFormatter = col.title;
+        } else {
+          column.title = col.title;
+        }
+        if (col.align) {
+          column.align = {
+            left: "left",
+            center: "center",
+            right: "right"
+          }[col.align];
+        }
+        if (col.render) {
+          column.columnTemplate = (_cell, row) => {
+            const {
+              item,
+              index
+            } = unwrapRow(row);
+            return col.render(toBusinessRow(item), index);
+          };
+        }
+        return column;
+      });
+      if (selectionConfig.value) {
+        columns.unshift({
+          field: "__select",
+          title: "",
+          dataType: "string",
+          width: 44,
+          resizable: false,
+          columnTemplate: renderSelectCell,
+          headerFormatter: renderSelectAllHeader
+        });
+      }
+      return columns;
+    });
+    const passThroughAttrs = computed(() => {
+      const out = {
+        customClass: [
+          attrs.class,
+          "ak-table",
+          props.framed ? "ak-table--framed" : "",
+          /* 表头高度按需开启：只有传了 headerHeight 才挂类 + 下发变量，
+             不传的消费方与以前完全一致（bridge 规则不生效） */
+          props.headerHeight ? "ak-table--custom-header" : ""
+        ].filter(Boolean).join(" ")
+      };
+      const style = {
+        ...attrs.style ?? {}
+      };
+      if (props.headerHeight) style["--ak-table-header-height"] = `${props.headerHeight}px`;
+      if (Object.keys(style).length > 0) out.style = style;
+      return out;
+    });
+    const rowNumberOption = computed(() => {
+      if (props.rowNumber === false) return void 0;
+      if (props.rowNumber === true) return {
+        enable: true,
+        width: 60
+      };
+      return {
+        enable: true,
+        heading: props.rowNumber.heading,
+        width: props.rowNumber.width ?? 60
+      };
+    });
+    const hostRef = ref(null);
+    const needsHost = computed(() => !!props.onContainerResize || !!props.resizePollInterval);
+    let observer = null;
+    let pollTimer = null;
+    let debounceTimer = null;
+    let lastWidth = 0;
+    const flushResize = () => {
+      if (debounceTimer) return;
+      debounceTimer = setTimeout(() => {
+        debounceTimer = null;
+        const width = hostRef.value?.clientWidth ?? 0;
+        if (width > 0 && width !== lastWidth) {
+          lastWidth = width;
+          props.onContainerResize?.(width);
+        }
+      }, RESIZE_DEBOUNCE_MS);
+    };
+    onMounted(() => {
+      if (props.resizePollInterval && props.resizePollInterval > 0) {
+        pollTimer = setInterval(flushResize, props.resizePollInterval);
+      }
+    });
+    watch(hostRef, (el) => {
+      observer?.disconnect();
+      observer = null;
+      if (!el) return;
+      lastWidth = el.clientWidth;
+      if (typeof ResizeObserver !== "undefined") {
+        observer = new ResizeObserver(flushResize);
+        observer.observe(el);
+      }
+    });
+    watch([() => props.rowHighlightKey, flatRows], async () => {
+      if (!props.rowHighlightKey || !gridRef.value?.selectItemByIds) return;
+      await nextTick();
+      gridRef.value.selectItemByIds([props.rowHighlightKey]);
+    }, {
+      flush: "post"
+    });
+    onBeforeUnmount(() => {
+      observer?.disconnect();
+      observer = null;
+      if (pollTimer) {
+        clearInterval(pollTimer);
+        pollTimer = null;
+      }
+      if (debounceTimer) {
+        clearTimeout(debounceTimer);
+        debounceTimer = null;
+      }
+    });
+    return () => {
+      if (props.loading) {
+        return createVNode(AppQueryState, {
+          "loading": true,
+          "skeletonRows": props.skeletonRows,
+          "skeletonRowHeight": 40
+        }, null);
+      }
+      if (props.error) {
+        return createVNode(AppQueryState, {
+          "error": props.error,
+          "errorTitle": props.errorTitle,
+          "errorDescription": typeof props.error === "string" ? props.error : void 0,
+          "errorActionText": props.errorActionText,
+          "onErrorAction": props.onErrorAction
+        }, null);
+      }
+      if (props.rows.length === 0) {
+        return createVNode(AppQueryState, {
+          "empty": props.empty ?? "暂无数据",
+          "emptyDescription": props.emptyDescription,
+          "emptyActionText": props.emptyActionText,
+          "onEmptyAction": props.onEmptyAction
+        }, null);
+      }
+      const grid = createVNode(FDataGrid, mergeProps({
+        "key": props.tableKey,
+        "ref": gridRef,
+        "data": flatRows.value,
+        "columns": farrisColumns.value,
+        "idField": props.rowKey,
+        "showHeader": true,
+        "fit": true,
+        "rowNumber": rowNumberOption.value,
+        "showStripe": props.stripe,
+        "rowOption": props.rowHeight || props.rowClass ? {
+          height: props.rowHeight,
+          showHovering: true,
+          wrapContent: false,
+          customRowStyle: props.rowClass ? (raw) => {
+            const cls = props.rowClass(toBusinessRow(unwrapRow(raw).item));
+            if (cls === void 0) return void 0;
+            return {
+              class: typeof cls === "string" ? {
+                [cls]: true
+              } : cls
+            };
+          } : void 0
+        } : void 0,
+        "columnOption": {
+          fitColumns: true,
+          resizeColumn: true,
+          fitMode: "percentage"
+        },
+        "selection": {
+          // 行高亮（rowHighlightKey）需要上游的「行选中」开关为真才染色，
+          // 但所有「列」的显示开关保持关闭 —— 得到的是染行、不加列。
+          enabelSelectRow: !!props.rowHighlightKey,
+          enableSelectRow: !!props.rowHighlightKey,
+          multiSelect: false,
+          showCheckbox: false,
+          showSelectAll: false,
+          showSelection: false
+        },
+        "selectionValues": props.rowHighlightKey ? [props.rowHighlightKey] : void 0
+      }, passThroughAttrs.value, {
+        "onClickRow": (_index, raw) => {
+          props.onRowClick?.(toBusinessRow(unwrapRow(raw).item));
+        },
+        "onDoubleClickRow": (_index, raw) => {
+          props.onRowDoubleClick?.(toBusinessRow(unwrapRow(raw).item));
+        }
+      }), null);
+      return needsHost.value ? createVNode("div", {
+        "ref": hostRef,
+        "class": "ak-table-host"
+      }, [grid]) : grid;
+    };
+  }
+});
+export {
+  AppTable
+};

package/dist/components/app-tabs.d.ts

@@ -0,0 +1,58 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+export interface AppTabItem {
+    /** 页签标识，同时用作插槽名（`v-slots={{ [key]: () => ... }}`） */
+    key: string;
+    label: string;
+}
+/**
+ * 页签（封装 farris FTabs + FTabPage）。
+ *
+ * 对外只给 `items` + 受控 `modelValue`（当前 key），页签内容按 `item.key` 取同名插槽；
+ * farris 的 `activeId` / `onUpdate:activeId` / `fill` 等写法在内部翻译。
+ *
+ * @example
+ * <AppTabs modelValue={activeTab} items={[{ key: 'overview', label: '概览' }, { key: 'tools', label: '工具' }]}
+ *   v-slots={{ overview: () => <Overview />, tools: () => <Tools /> }}
+ *   onChange={(key) => (activeTab = key)} />
+ */
+export declare const AppTabs: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        required: true;
+    };
+    items: {
+        type: PropType<AppTabItem[]>;
+        default: () => never[];
+    };
+    /** 撑满容器高度（farris fill，抽屉/面板内需要） */
+    fill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onChange: {
+        type: PropType<(key: string) => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        required: true;
+    };
+    items: {
+        type: PropType<AppTabItem[]>;
+        default: () => never[];
+    };
+    /** 撑满容器高度（farris fill，抽屉/面板内需要） */
+    fill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onChange: {
+        type: PropType<(key: string) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    fill: boolean;
+    onChange: (key: string) => void;
+    items: AppTabItem[];
+}, SlotsType<Record<string, (() => VNodeChild) | undefined>>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/app-tabs.js

@@ -0,0 +1,54 @@
+import { defineComponent, createVNode, isVNode } from "vue";
+import { FTabs, FTabPage } from "@farris/ui-vue";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const AppTabs = /* @__PURE__ */ defineComponent({
+  name: "AppTabs",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: String,
+      required: true
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    /** 撑满容器高度（farris fill，抽屉/面板内需要） */
+    fill: {
+      type: Boolean,
+      default: true
+    },
+    onChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => {
+      let _slot;
+      return createVNode(FTabs, {
+        "activeId": props.modelValue,
+        "fill": props.fill,
+        "customClass": attrs.class,
+        "onUpdate:activeId": (key) => props.onChange?.(key)
+      }, _isSlot(_slot = props.items.map((item) => createVNode(FTabPage, {
+        "id": item.key,
+        "title": item.label,
+        "key": item.key
+      }, {
+        default: () => [slots[item.key]?.()]
+      }))) ? _slot : {
+        default: () => [_slot]
+      });
+    };
+  }
+});
+export {
+  AppTabs
+};