@manohub/app-kit 0.1.0

package/dist/atoms/app-query-state.d.ts

@@ -0,0 +1,191 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+/** 三态种类（插画 / 操作区插槽会收到它，便于按状态给不同内容） */
+export type AppQueryStateKind = 'empty' | 'error';
+export interface AppQueryStateProps {
+    /** 加载中 → 骨架屏 */
+    loading?: boolean;
+    /** 错误态（truthy 即触发） */
+    error?: unknown;
+    /** 空态：true 用默认文案，string 作为空态标题 */
+    empty?: boolean | string;
+    /** 空态副文案 */
+    emptyDescription?: string;
+    /** 错误态标题（默认「加载失败」） */
+    errorTitle?: string;
+    /** 错误态副文案 */
+    errorDescription?: string;
+    /** 自定义插画资源 URL（不传用内建插画；整幅自定义图形请用 `illustration` 插槽） */
+    illustration?: string;
+    /** 空态操作按钮（如「新建」）；与 `onEmptyAction` 同时传才渲染 */
+    emptyActionText?: string;
+    onEmptyAction?: () => void;
+    /** 错误态操作按钮（如「重试」）；与 `onErrorAction` 同时传才渲染 */
+    errorActionText?: string;
+    onErrorAction?: () => void;
+    /** 骨架屏条数 */
+    skeletonRows?: number;
+    /** 骨架屏条高（px） */
+    skeletonRowHeight?: number;
+}
+/**
+ * loading / empty / error 三态容器（自建，替代各 app 手拼的 empty-state + skeleton）。
+ *
+ * 三态互斥，优先级 loading > error > empty > default 插槽。
+ *
+ * ## 视觉构成（三态非加载态一致）
+ *
+ * **插画 → 主文案 → 副文案 → 操作区**，整块垂直居中、留白由令牌给（`.ak-state`）。
+ * 插画默认取内建件（空态「＋」/ 错误态「！」同族箱体），可用 `illustration` 属性换成图片资源、
+ * 或用 `illustration` 插槽整幅自定义；操作区同理有 `actions` 插槽。
+ *
+ * 文案 props 可覆盖（i18n 由消费方传 t() 结果；app-kit 统一 i18n 内置文案后续批次接入）。
+ *
+ * @example 空态带 CTA、错误态带重试
+ * <AppQueryState
+ *   loading={isLoading}
+ *   error={loadError.value}
+ *   errorActionText={t('common.retry')}
+ *   onErrorAction={() => reload()}
+ *   empty={topics.length === 0}
+ *   empty={t('topic.empty')}
+ *   emptyDescription={t('topic.emptyDescription')}
+ *   emptyActionText={t('topic.create')}
+ *   onEmptyAction={() => openCreate()}>
+ *   <TopicGrid topics={topics} />
+ * </AppQueryState>
+ */
+export declare const AppQueryState: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    empty: {
+        type: PropType<boolean | string>;
+        default: boolean;
+    };
+    emptyDescription: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    errorTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    errorDescription: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    illustration: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    emptyActionText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onEmptyAction: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    errorActionText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onErrorAction: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    skeletonRows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    skeletonRowHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => string | number | boolean | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | import("vue").VNodeArrayChildren | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    error: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    empty: {
+        type: PropType<boolean | string>;
+        default: boolean;
+    };
+    emptyDescription: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    errorTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    errorDescription: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    illustration: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    emptyActionText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onEmptyAction: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    errorActionText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onErrorAction: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+    skeletonRows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    skeletonRowHeight: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    loading: boolean;
+    error: any;
+    empty: string | boolean;
+    emptyDescription: string;
+    errorTitle: string;
+    errorDescription: string;
+    illustration: string;
+    emptyActionText: string;
+    onEmptyAction: () => void;
+    errorActionText: string;
+    onErrorAction: () => void;
+    skeletonRows: number;
+    skeletonRowHeight: number;
+}, SlotsType<{
+    default?: () => VNodeChild;
+    empty?: () => VNodeChild;
+    error?: () => VNodeChild;
+    /** 自定义插画；入参为当前状态种类 */
+    illustration?: (ctx: {
+        kind: AppQueryStateKind;
+    }) => VNodeChild;
+    /** 自定义操作区（按钮组）；不传则按 *ActionText / on*Action 渲染单个主按钮 */
+    actions?: (ctx: {
+        kind: AppQueryStateKind;
+    }) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/atoms/app-query-state.js

@@ -0,0 +1,161 @@
+import { defineComponent, createVNode, Fragment, isVNode } from "vue";
+import { AppButton } from "./app-button.js";
+import { AppStateIllustrationError, AppStateIllustrationEmpty } from "./state-illustration.js";
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const AppQueryState = /* @__PURE__ */ defineComponent({
+  name: "AppQueryState",
+  inheritAttrs: false,
+  props: {
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /*
+     * truthy 即触发错误态；type 用构造器数组承载 unknown（`type: null` 在 vue-tsc 下被推断为 undefined）。
+     * **`String` 必须排在 `Boolean` 前**：否则 Vue 的布尔转换会把空字符串 `''` 转成 `true`，
+     * 成功态（`error={''}`）也会被判成错误态。
+     */
+    error: {
+      type: [String, Boolean, Object, Number, Array],
+      default: void 0
+    },
+    empty: {
+      type: [Boolean, String],
+      default: false
+    },
+    emptyDescription: {
+      type: String,
+      default: void 0
+    },
+    errorTitle: {
+      type: String,
+      default: "加载失败"
+    },
+    errorDescription: {
+      type: String,
+      default: void 0
+    },
+    illustration: {
+      type: String,
+      default: void 0
+    },
+    emptyActionText: {
+      type: String,
+      default: void 0
+    },
+    onEmptyAction: {
+      type: Function,
+      default: void 0
+    },
+    errorActionText: {
+      type: String,
+      default: void 0
+    },
+    onErrorAction: {
+      type: Function,
+      default: void 0
+    },
+    skeletonRows: {
+      type: Number,
+      default: 6
+    },
+    skeletonRowHeight: {
+      type: Number,
+      default: 40
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const renderIllustration = (kind) => {
+      if (slots.illustration) {
+        return slots.illustration({
+          kind
+        });
+      }
+      if (props.illustration) {
+        return createVNode("img", {
+          "class": "ak-state-illustration",
+          "src": props.illustration,
+          "alt": ""
+        }, null);
+      }
+      return kind === "error" ? createVNode(AppStateIllustrationError, null, null) : createVNode(AppStateIllustrationEmpty, null, null);
+    };
+    const renderActions = (kind, actionText, onAction) => {
+      if (slots.actions) {
+        return slots.actions({
+          kind
+        });
+      }
+      if (!actionText || !onAction) {
+        return null;
+      }
+      return createVNode(AppButton, {
+        "tone": "primary",
+        "onClick": onAction
+      }, _isSlot(actionText) ? actionText : {
+        default: () => [actionText]
+      });
+    };
+    const renderState = (config) => {
+      const actions = renderActions(config.kind, config.actionText, config.onAction);
+      return createVNode("div", {
+        "class": "ak-state",
+        "style": attrs.style
+      }, [config.slotFn ? config.slotFn() : createVNode(Fragment, null, [renderIllustration(config.kind), createVNode("p", {
+        "class": "ak-state-title"
+      }, [config.title]), config.description ? createVNode("p", {
+        "class": "ak-state-description"
+      }, [config.description]) : null, actions ? createVNode("div", {
+        "class": "ak-state-actions"
+      }, [actions]) : null])]);
+    };
+    return () => {
+      if (props.loading) {
+        return createVNode("div", {
+          "class": "ak-state"
+        }, [createVNode("div", {
+          "class": "ak-state-skeletons"
+        }, [Array.from({
+          length: props.skeletonRows
+        }).map((_, i) => createVNode("div", {
+          "key": i,
+          "class": "ak-skeleton-block",
+          "style": {
+            height: `${props.skeletonRowHeight}px`
+          }
+        }, null))])]);
+      }
+      if (props.error) {
+        return renderState({
+          kind: "error",
+          title: props.errorTitle,
+          description: props.errorDescription,
+          slotFn: slots.error,
+          actionText: props.errorActionText,
+          onAction: props.onErrorAction
+        });
+      }
+      if (props.empty) {
+        const title = typeof props.empty === "string" ? props.empty : "暂无数据";
+        return renderState({
+          kind: "empty",
+          title,
+          description: props.emptyDescription,
+          slotFn: slots.empty,
+          actionText: props.emptyActionText,
+          onAction: props.onEmptyAction
+        });
+      }
+      return slots.default?.() ?? null;
+    };
+  }
+});
+export {
+  AppQueryState
+};

package/dist/atoms/app-radio-card.d.ts

@@ -0,0 +1,80 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+export type AppRadioCardValue = string | number;
+export interface AppRadioCardItem {
+    /** 选项值（业务值，与 `modelValue` 同域） */
+    value: AppRadioCardValue;
+    /** 选项名（卡片标题） */
+    label: string;
+    /** 选项说明（卡片第二段文字，可缺省） */
+    description?: string;
+    /** 单项禁用 */
+    disabled?: boolean;
+}
+/**
+ * 卡片式单选组（**自建**，不封装 farris）：一个选项一张卡片，整卡可点。
+ *
+ * 为什么不封装：farris 没有卡片形态的单选件（`f-radio-button` 是按钮组、`custom-radio` 是原生圆点），
+ * 页面上原先各自自绘 `.xxx-card-option`（只有布局没有视觉，护栏收走视觉后就「没生效」），
+ * 故按「缺件处置流程」自建。
+ *
+ * 实现要点：
+ * - 真实 `<input type="radio">` 负责可访问性与键盘（同 `name` 成组 ⇒ 方向键即换选），视觉自绘；
+ * - 状态走 `data-state`（`checked` / `unchecked`）协议，与 `AppCheckbox` / `AppTable` 自绘选择列一致；
+ * - `name` 每实例唯一（手写固定名会让同页两组卡片互相串选）。
+ *
+ * @example
+ * <AppRadioCard modelValue={form.type}
+ *   items={[{ value: 'A', label: '值映射设置', description: '手工维护来源/目标向量' },
+ *           { value: 'B', label: '数据库表', description: '绑定 msu 与数据对象' }]}
+ *   onChange={(v) => (form.type = v)} />
+ */
+export declare const AppRadioCard: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 受控值（与 `items[].value` 同域） */
+    modelValue: {
+        type: PropType<AppRadioCardValue | null>;
+        default: null;
+    };
+    items: {
+        type: PropType<AppRadioCardItem[]>;
+        default: () => never[];
+    };
+    /** 整组禁用（与单项 `disabled` 叠加） */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onChange: {
+        type: PropType<(value: AppRadioCardValue) => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (value: AppRadioCardValue) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 受控值（与 `items[].value` 同域） */
+    modelValue: {
+        type: PropType<AppRadioCardValue | null>;
+        default: null;
+    };
+    items: {
+        type: PropType<AppRadioCardItem[]>;
+        default: () => never[];
+    };
+    /** 整组禁用（与单项 `disabled` 叠加） */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onChange: {
+        type: PropType<(value: AppRadioCardValue) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: AppRadioCardValue) => any) | undefined;
+}>, {
+    onChange: (value: AppRadioCardValue) => void;
+    disabled: boolean;
+    modelValue: AppRadioCardValue | null;
+    items: AppRadioCardItem[];
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/atoms/app-radio-card.js

@@ -0,0 +1,72 @@
+import { defineComponent, createVNode } from "vue";
+const AppRadioCard = /* @__PURE__ */ defineComponent({
+  name: "AppRadioCard",
+  inheritAttrs: false,
+  props: {
+    /** 受控值（与 `items[].value` 同域） */
+    modelValue: {
+      type: [String, Number],
+      default: null
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    /** 整组禁用（与单项 `disabled` 叠加） */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    onChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": (value) => true
+  },
+  slots: Object,
+  setup(props, {
+    emit,
+    attrs
+  }) {
+    const groupName = `ak-radio-card-${Math.random().toString(36).slice(2, 10)}`;
+    const handleChange = (value) => {
+      emit("update:modelValue", value);
+      props.onChange?.(value);
+    };
+    return () => createVNode("div", {
+      "class": ["ak-radio-card", attrs.class].filter(Boolean).join(" "),
+      "role": "radiogroup"
+    }, [props.items.map((item) => {
+      const isDisabled = props.disabled || !!item.disabled;
+      const isChecked = props.modelValue === item.value;
+      return createVNode("label", {
+        "class": "ak-radio-card__item",
+        "key": String(item.value),
+        "data-state": isChecked ? "checked" : "unchecked",
+        "data-disabled": isDisabled ? "true" : "false"
+      }, [createVNode("input", {
+        "class": "ak-radio-card__input",
+        "type": "radio",
+        "name": groupName,
+        "value": String(item.value),
+        "checked": isChecked,
+        "disabled": isDisabled,
+        "onChange": () => handleChange(item.value)
+      }, null), createVNode("span", {
+        "class": "ak-radio-card__radio",
+        "aria-hidden": "true"
+      }, null), createVNode("span", {
+        "class": "ak-radio-card__body"
+      }, [createVNode("span", {
+        "class": "ak-radio-card__label"
+      }, [item.label]), item.description ? createVNode("span", {
+        "class": "ak-radio-card__desc"
+      }, [item.description]) : null])]);
+    })]);
+  }
+});
+export {
+  AppRadioCard
+};

package/dist/atoms/app-search-box.d.ts

@@ -0,0 +1,80 @@
+import { type PropType } from 'vue';
+/**
+ * 搜索框（封装 farris FSearchBox）。
+ *
+ * 吃掉两个 farris 坑：
+ * 1. **清空图标只改 `modelValue`、不触发 `clickButton`** —— 本仓 repository 原为此在应用侧
+ *    加 watch 兜底；此处内部识别「由非空变空」并补发 `onClear`，应用侧不再需要该 watch。
+ * 2. 回车不会触发搜索（`clickButton` 只绑按钮）—— 内部在容器上监听 Enter 并补发 `onSearch`
+ *    （事件从内部 input 冒泡，原 repository 也是这么绕的）。
+ *
+ * @example
+ * <AppSearchBox modelValue={keyword} placeholder="搜索名称"
+ *   onChange={(v) => (keyword = v)}
+ *   onSearch={(v) => applyFilter(v)}
+ *   onClear={() => applyFilter('')} />
+ */
+export declare const AppSearchBox: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 值变化（含清空前的中间态）；实时上抛 */
+    onChange: {
+        type: PropType<(value: string) => void>;
+        default: undefined;
+    };
+    /** 搜索触发（点搜索按钮 / 回车） */
+    onSearch: {
+        type: PropType<(value: string) => void>;
+        default: undefined;
+    };
+    /** 清空（由非空变空时补发，替代应用侧的 watch 兜底） */
+    onClear: {
+        type: PropType<() => 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;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 值变化（含清空前的中间态）；实时上抛 */
+    onChange: {
+        type: PropType<(value: string) => void>;
+        default: undefined;
+    };
+    /** 搜索触发（点搜索按钮 / 回车） */
+    onSearch: {
+        type: PropType<(value: string) => void>;
+        default: undefined;
+    };
+    /** 清空（由非空变空时补发，替代应用侧的 watch 兜底） */
+    onClear: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    onChange: (value: string) => void;
+    disabled: boolean;
+    modelValue: string;
+    placeholder: string;
+    onSearch: (value: string) => void;
+    onClear: () => void;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/atoms/app-search-box.js

@@ -0,0 +1,64 @@
+import { defineComponent, createVNode } from "vue";
+import { FSearchBox } from "@farris/ui-vue";
+const AppSearchBox = /* @__PURE__ */ defineComponent({
+  name: "AppSearchBox",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** 值变化（含清空前的中间态）；实时上抛 */
+    onChange: {
+      type: Function,
+      default: void 0
+    },
+    /** 搜索触发（点搜索按钮 / 回车） */
+    onSearch: {
+      type: Function,
+      default: void 0
+    },
+    /** 清空（由非空变空时补发，替代应用侧的 watch 兜底） */
+    onClear: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    const handleUpdate = (value) => {
+      const next = value ?? "";
+      const cleared = next === "" && props.modelValue !== "";
+      props.onChange?.(next);
+      if (cleared) props.onClear?.();
+    };
+    return () => createVNode("div", {
+      "class": ["ak-searchbox", attrs.class].filter(Boolean).join(" "),
+      "onKeydown": (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          props.onSearch?.(props.modelValue);
+        }
+      }
+    }, [createVNode(FSearchBox, {
+      "modelValue": props.modelValue,
+      "placeholder": props.placeholder,
+      "disabled": props.disabled,
+      "showDropdown": false,
+      "onUpdate:modelValue": handleUpdate,
+      "onClickButton": () => props.onSearch?.(props.modelValue)
+    }, null)]);
+  }
+});
+export {
+  AppSearchBox
+};