@manohub/app-kit 0.1.0

package/dist/components/app-form.js

@@ -0,0 +1,159 @@
+import { defineComponent, provide, toRef, createVNode, inject, createTextVNode } from "vue";
+import { AppSection } from "./app-section.js";
+const FORM_LABEL_WIDTH = /* @__PURE__ */ Symbol("ak-form-label-width");
+const FORM_CONTROL_WIDTH = /* @__PURE__ */ Symbol("ak-form-control-width");
+const FORM_LABEL_ALIGN = /* @__PURE__ */ Symbol("ak-form-label-align");
+const FORM_TEXT_EMPTY = "—";
+const AppFormItem = /* @__PURE__ */ defineComponent({
+  name: "AppFormItem",
+  inheritAttrs: false,
+  props: {
+    label: {
+      type: String,
+      default: void 0
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: String,
+      default: ""
+    },
+    hint: {
+      type: String,
+      default: ""
+    },
+    labelWidth: {
+      type: Number,
+      default: void 0
+    },
+    labelAlign: {
+      type: String,
+      default: void 0
+    },
+    controlWidth: {
+      type: Number,
+      default: void 0
+    },
+    fullWidth: {
+      type: Boolean,
+      default: false
+    },
+    /** `undefined` 与「传了空串」必须区分：前者走插槽（控件形态），后者是「值为空的只读行」 */
+    text: {
+      type: String,
+      default: void 0
+    },
+    /** 只读展示行（label 弱化，内容走插槽）：用于控件位是徽标 / 链接这类非文本的只读内容 */
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const inheritedLabelWidth = inject(FORM_LABEL_WIDTH, void 0);
+    const inheritedLabelAlign = inject(FORM_LABEL_ALIGN, void 0);
+    const inheritedControlWidth = inject(FORM_CONTROL_WIDTH, void 0);
+    return () => {
+      const labelWidth = props.labelWidth ?? inheritedLabelWidth?.value;
+      const labelAlign = props.labelAlign ?? inheritedLabelAlign?.value;
+      const controlWidth = props.controlWidth ?? inheritedControlWidth?.value;
+      const styles = [attrs.style, labelWidth ? {
+        "--ak-form-label-width": `${labelWidth}px`
+      } : null].filter(Boolean);
+      const showLabel = !!props.label || props.required;
+      const hasText = props.text !== void 0;
+      const textIsEmpty = hasText && !props.text.trim();
+      const isReadonlyRow = hasText || props.readonly;
+      return createVNode("div", {
+        "class": [
+          "ak-form-item",
+          props.error ? "is-invalid" : "",
+          props.fullWidth ? "ak-form-item--full" : "",
+          // 右对齐是基类默认值，只有左对齐需要额外的修饰类（两处都挂会让「谁胜出」依赖源码顺序）
+          labelAlign === "left" ? "ak-form-item--label-left" : "",
+          // 只读展示行：label 降一档为次要色，与值拉开层级（样式见 `.ak-form-item--readonly .ak-form-item__label`）
+          isReadonlyRow ? "ak-form-item--readonly" : "",
+          attrs.class
+        ].filter(Boolean).join(" "),
+        "data-invalid": props.error ? "true" : "false",
+        "style": styles
+      }, [showLabel ? createVNode("label", {
+        "class": "ak-form-item__label"
+      }, [props.required ? createVNode("span", {
+        "class": "ak-form-item__required"
+      }, [createTextVNode("*")]) : null, createVNode("span", {
+        "class": "ak-form-item__label-text"
+      }, [props.label])]) : null, createVNode("div", {
+        "class": "ak-form-item__control",
+        "style": controlWidth ? {
+          maxWidth: `${controlWidth}px`
+        } : void 0
+      }, [hasText ? (
+        /*
+         * 只读文本形态（摘要 / 详情行）：控件位直接渲染业务值，占位与换行规则都在组件里
+         * —— 应用侧不再自绘 label/value 表格（那套几何与表单行迟早会漂开）。
+         */
+        createVNode("div", {
+          "class": "ak-form-item__text",
+          "data-empty": textIsEmpty ? "true" : "false"
+        }, [textIsEmpty ? FORM_TEXT_EMPTY : props.text])
+      ) : slots.default?.(), props.error ? createVNode("div", {
+        "class": "ak-form-item__error"
+      }, [props.error]) : null, props.hint ? createVNode("div", {
+        "class": "ak-form-item__hint"
+      }, [props.hint]) : null])]);
+    };
+  }
+});
+const AppFormRoot = /* @__PURE__ */ defineComponent({
+  name: "AppForm",
+  inheritAttrs: false,
+  props: {
+    /** 表单级 label 列宽（px）；`AppForm.Item` 的 `labelWidth` 优先级更高 */
+    labelWidth: {
+      type: Number,
+      default: void 0
+    },
+    /** 表单级 label 对齐；`AppForm.Item` 的 `labelAlign` 优先级更高 */
+    labelAlign: {
+      type: String,
+      default: void 0
+    },
+    /** 表单级控件列宽上限（px）；`AppForm.Item` 的 `controlWidth` 优先级更高 */
+    controlWidth: {
+      type: Number,
+      default: void 0
+    },
+    /** 列数：1（逐行，默认）/ 2（容器够宽才并排，窄了自动回落一列） */
+    columns: {
+      type: Number,
+      default: 1
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    provide(FORM_LABEL_WIDTH, toRef(props, "labelWidth"));
+    provide(FORM_LABEL_ALIGN, toRef(props, "labelAlign"));
+    provide(FORM_CONTROL_WIDTH, toRef(props, "controlWidth"));
+    return () => createVNode("div", {
+      "class": ["ak-form", props.columns === 2 ? "ak-form--two-column" : "", attrs.class].filter(Boolean).join(" ")
+    }, [slots.default?.()]);
+  }
+});
+const AppForm = Object.assign(AppFormRoot, {
+  Item: AppFormItem,
+  Section: AppSection
+});
+export {
+  AppForm,
+  AppFormItem
+};

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

@@ -0,0 +1,78 @@
+import { type PropType } from 'vue';
+/**
+ * 分页器（封装 farris FPagination）。
+ *
+ * 契约：**page 统一 0 基**（对齐后端分页参数），内部 +1 翻译 farris 的 1 基 currentPage。
+ * pageSize 切换时独立回调，翻页语义归消费方（现状惯例：切 pageSize 后回第 0 页）。
+ *
+ * @example
+ * <AppPagination page={page} pageSize={pageSize} total={total}
+ *   onPageChange={(p) => (page = p)}
+ *   onPageSizeChange={(s) => { pageSize = s; page = 0 }} />
+ */
+export declare const AppPagination: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 0 基页码 */
+    page: {
+        type: NumberConstructor;
+        required: true;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    total: {
+        type: NumberConstructor;
+        required: true;
+    };
+    pageSizeOptions: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    showInfo: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onPageChange: {
+        type: PropType<(page: number) => void>;
+        default: undefined;
+    };
+    onPageSizeChange: {
+        type: PropType<(pageSize: number) => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 0 基页码 */
+    page: {
+        type: NumberConstructor;
+        required: true;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    total: {
+        type: NumberConstructor;
+        required: true;
+    };
+    pageSizeOptions: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
+    showInfo: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    onPageChange: {
+        type: PropType<(page: number) => void>;
+        default: undefined;
+    };
+    onPageSizeChange: {
+        type: PropType<(pageSize: number) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    pageSizeOptions: number[];
+    showInfo: boolean;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/app-pagination.js

@@ -0,0 +1,57 @@
+import { defineComponent, createVNode } from "vue";
+import { FPagination } from "@farris/ui-vue";
+const AppPagination = /* @__PURE__ */ defineComponent({
+  name: "AppPagination",
+  inheritAttrs: false,
+  props: {
+    /** 0 基页码 */
+    page: {
+      type: Number,
+      required: true
+    },
+    pageSize: {
+      type: Number,
+      required: true
+    },
+    total: {
+      type: Number,
+      required: true
+    },
+    pageSizeOptions: {
+      type: Array,
+      default: () => [10, 20, 50]
+    },
+    showInfo: {
+      type: Boolean,
+      default: true
+    },
+    onPageChange: {
+      type: Function,
+      default: void 0
+    },
+    onPageSizeChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(props, {
+    attrs
+  }) {
+    return () => createVNode("div", {
+      "class": ["ak-pagination", attrs.class].filter(Boolean).join(" ")
+    }, [createVNode(FPagination, {
+      "currentPage": props.page + 1,
+      "totalItems": props.total,
+      "pageSize": props.pageSize,
+      "pageList": props.pageSizeOptions,
+      "showPageList": true,
+      "showGoButton": false,
+      "showPageInfo": props.showInfo,
+      "onUpdate:currentPage": (newPage) => props.onPageChange?.(newPage - 1),
+      "onUpdate:pageSize": (newSize) => props.onPageSizeChange?.(newSize)
+    }, null)]);
+  }
+});
+export {
+  AppPagination
+};