@manohub/app-kit 0.2.7 → 0.2.8

package/CONTRACT.md

@@ -168,6 +168,8 @@ import { AppShell, AppPanel, AppTable, AppButton, notify } from '@manohub/app-ki
   - `AppPanel.Header.padding` = 内建头那一行的内距；走 `header` 插槽（整行替换）时会把自定义头
     **包一层**只带内距的 div —— 头内部的几何仍归消费方，组件不碰。
   - 四件缺省都**不落任何行内 style**（DOM 与没有这个维度时一致）。
+  - 同一套口径与实现在**表单**上也有一份（§4.7 `AppForm.padding`）：弹窗 / 抽屉里的表单自带内距，
+    同样不必挂「只写 padding」的应用侧类 —— 两处的实现是同一个 `part-padding` 模块，改一处两处同变。
 - **只给「区域」用**：区块标题（没有区域级筛选/操作、内容也不自己滚）用 `AppSection`（§4.11）。
   拿本件当「带标题的卡片」用，会把区域头的高度与 Body 的滚动契约带进不需要它的地方。
 
@@ -241,6 +243,11 @@ import { AppShell, AppPanel, AppTable, AppButton, notify } from '@manohub/app-ki
   label 宽度固定为 `labelWidth`：对齐与宽度都属于组件，应用侧不要写 CSS 去改。
 - `labelWidth`（px，缺省 120）与 `controlWidth`（px，缺省撑满）都可写在 `AppForm` 上（下发给每个 Item），
   Item 上再写则覆盖表单级。
+- **容器内距用 `padding`（px 数字 / `{ y, x }`）**：与 §4.3 `AppPanel` 是**同一口径同一实现** ——
+  `padding={16}` 四边同值、`padding={{ y: 16, x: 20 }}` 上下 / 左右分别给（只给 `y` 时不覆盖你 `style` 里的左右内距）。
+  **缺省 0**（表单贴容器边）：页面里的表单在 `AppPanel.Body` 里，内距由那块给；**弹窗 / 抽屉里没有别的容器**
+  给内距，就用表单自带的 `padding={{ y: 16, x: 20 }}` —— 不要为此给表单挂一个「只写 padding」的应用侧类，
+  也不要在外面套一层只为加内距的 div。
 - **表单太宽时的两条杠杆（可叠加）**：
   ① **限宽** —— 表单级或逐行给 `controlWidth`（如 360）封住控件列，输入框不会被拉成长条；
   ② **分列** —— `columns={2}` 让行并排：**上限 2 列**，窄容器自动回落成一列（与 §4.12 的栅格同一公式，

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

@@ -1,4 +1,7 @@
 import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import { type AppPadding } from './part-padding';
+/** 表单内距：与 `AppPanelPadding` **同一口径同一实现**（`number` = 四边同值；`{ y, x }` = 上下 / 左右分别给） */
+export type AppFormPadding = AppPadding;
 /** label 列的水平对齐：`right`（默认，与 farris / 主流水平表单一致）或 `left` */
 export type AppFormLabelAlign = 'left' | 'right';
 export interface AppFormProps {
@@ -24,6 +27,14 @@ export interface AppFormProps {
      * 在对应 `AppForm.Item` 上给 `fullWidth`，否则会被压成半宽。
      */
     columns?: 1 | 2;
+    /**
+     * 表单内距（**px 数字**，与 `AppPanel` 同一口径）：`number` = 四边同值；`{ y, x }` = 上下 / 左右分别给。
+     *
+     * **缺省 0**：表单贴容器边，内距由所在容器给（页面里的表单在 `AppPanel.Body` 里，那块自带内距）。
+     * 弹窗 / 抽屉里没有别的容器给内距时用它自带 —— 如 `padding={{ y: 16, x: 20 }}`，
+     * 这样就不必再给表单挂一个「只写 padding」的应用侧类。
+     */
+    padding?: AppFormPadding;
 }
 export interface AppFormItemProps {
     /**
@@ -85,9 +96,15 @@ export interface AppFormItemProps {
  *   `--ui-form-column-min`（默认 320），所以窄容器会**自动回落成一列**，不需要消费方写媒体查询。
  *   两列下「整块内容」记得 `fullWidth`。
  *
- * `AppForm.Item` 是唯一入口（`AppForm` 只承载表单级设置与行间距/列数），
+ * `AppForm.Item` 是唯一入口（`AppForm` 只承载表单级设置、行间距/列数与容器内距），
  * 控件从默认插槽进，因此输入框 / 下拉 / 文本域 / 自绘分组卡片共用同一个容器。
  *
+ * ## 容器内距（`padding`）
+ *
+ * 与 `AppPanel` **同一口径同一实现**（`src/components/part-padding.ts`）：`number` 四边同值、
+ * `{ y, x }` 上下 / 左右分别给，缺省 0（贴容器边）。页面里的表单在 `AppPanel.Body` 里、内距由那块给；
+ * **弹窗 / 抽屉里没有别的容器**给内距，就用表单自带的 `padding={{ y: 16, x: 20 }}`。
+ *
  * ## 静态表单（摘要 / 详情）
  *
  * `AppForm.Item` 传 `text` 即切成**只读文本行**，三类行可以在同一个表单里混排 ——
@@ -253,7 +270,13 @@ export declare const AppForm: {
             type: PropType<1 | 2>;
             default: number;
         };
+        /** 表单内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边（弹窗 / 抽屉里常用它自带内距） */
+        padding: {
+            type: PropType<AppFormPadding>;
+            default: undefined;
+        };
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+        padding: AppPadding;
         columns: 1 | 2;
         labelWidth: number;
         labelAlign: AppFormLabelAlign;
@@ -288,7 +311,13 @@ export declare const AppForm: {
             type: PropType<1 | 2>;
             default: number;
         };
+        /** 表单内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边（弹窗 / 抽屉里常用它自带内距） */
+        padding: {
+            type: PropType<AppFormPadding>;
+            default: undefined;
+        };
     }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
+        padding: AppPadding;
         columns: 1 | 2;
         labelWidth: number;
         labelAlign: AppFormLabelAlign;
@@ -318,7 +347,13 @@ export declare const AppForm: {
         type: PropType<1 | 2>;
         default: number;
     };
+    /** 表单内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边（弹窗 / 抽屉里常用它自带内距） */
+    padding: {
+        type: PropType<AppFormPadding>;
+        default: undefined;
+    };
 }>> & Readonly<{}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
+    padding: AppPadding;
     columns: 1 | 2;
     labelWidth: number;
     labelAlign: AppFormLabelAlign;

package/dist/components/app-form.js

@@ -1,5 +1,6 @@
 import { defineComponent, provide, toRef, createVNode, inject, createTextVNode } from "vue";
 import { AppSection } from "./app-section.js";
+import { mergePartStyle } from "./part-padding.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");
@@ -134,6 +135,11 @@ const AppFormRoot = /* @__PURE__ */ defineComponent({
     columns: {
       type: Number,
       default: 1
+    },
+    /** 表单内距（px 数字，或 `{ y, x }`）；缺省 0 = 贴容器边（弹窗 / 抽屉里常用它自带内距） */
+    padding: {
+      type: [Number, Object],
+      default: void 0
     }
   },
   slots: Object,
@@ -145,7 +151,8 @@ const AppFormRoot = /* @__PURE__ */ defineComponent({
     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(" ")
+      "class": ["ak-form", props.columns === 2 ? "ak-form--two-column" : "", attrs.class].filter(Boolean).join(" "),
+      "style": mergePartStyle(attrs.style, props.padding)
     }, [slots.default?.()]);
   }
 });

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

@@ -1,4 +1,5 @@
 import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import { type AppPadding } from './part-padding';
 /**
  * 区域容器（页面内分区）—— 与 `AppShell` 的分工：
  *
@@ -85,11 +86,8 @@ export interface AppPanelProps {
      */
     padding?: AppPanelPadding;
 }
-/** 面板（及其三件）的内距：`number` = 四边同值；`{ y, x }` = 上下 / 左右分别给（缺哪边不落哪边） */
-export type AppPanelPadding = number | {
-    y?: number;
-    x?: number;
-};
+/** 面板（及其三件）的内距：与 `AppForm` / `AppPanel` 共用一套口径（`number` = 四边同值；`{ y, x }` 分别给） */
+export type AppPanelPadding = AppPadding;
 /** 面板标题行（区域级）：标题 + 本区域筛选位(toolbar) + 本区域操作位(actions) */
 export declare const AppPanelHeader: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     /**
@@ -143,7 +141,7 @@ export declare const AppPanelHeader: import("vue").DefineComponent<import("vue")
     title: string;
     toolbar: any;
     actions: any;
-    padding: AppPanelPadding;
+    padding: AppPadding;
 }, SlotsType<{
     header?: () => VNodeChild;
     toolbar?: () => VNodeChild;
@@ -171,7 +169,7 @@ export declare const AppPanelBody: import("vue").DefineComponent<import("vue").E
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    padding: AppPanelPadding;
+    padding: AppPadding;
 }, SlotsType<{
     default?: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -194,7 +192,7 @@ export declare const AppPanelFooter: import("vue").DefineComponent<import("vue")
         default: undefined;
     };
 }>> & Readonly<{}>, {
-    padding: AppPanelPadding;
+    padding: AppPadding;
 }, SlotsType<{
     default?: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -228,7 +226,7 @@ export declare const AppPanel: {
         title: string;
         toolbar: any;
         actions: any;
-        padding: AppPanelPadding;
+        padding: AppPadding;
     }, true, {}, SlotsType<{
         default?: () => VNodeChild;
         header?: () => VNodeChild;
@@ -266,7 +264,7 @@ export declare const AppPanel: {
         title: string;
         toolbar: any;
         actions: any;
-        padding: AppPanelPadding;
+        padding: AppPadding;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -296,7 +294,7 @@ export declare const AppPanel: {
     title: string;
     toolbar: any;
     actions: any;
-    padding: AppPanelPadding;
+    padding: AppPadding;
 }, {}, string, SlotsType<{
     default?: () => VNodeChild;
     header?: () => VNodeChild;
@@ -355,7 +353,7 @@ export declare const AppPanel: {
         title: string;
         toolbar: any;
         actions: any;
-        padding: AppPanelPadding;
+        padding: AppPadding;
     }, SlotsType<{
         header?: () => VNodeChild;
         toolbar?: () => VNodeChild;
@@ -374,7 +372,7 @@ export declare const AppPanel: {
             default: undefined;
         };
     }>> & Readonly<{}>, {
-        padding: AppPanelPadding;
+        padding: AppPadding;
     }, SlotsType<{
         default?: () => VNodeChild;
     }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -391,7 +389,7 @@ export declare const AppPanel: {
             default: undefined;
         };
     }>> & Readonly<{}>, {
-        padding: AppPanelPadding;
+        padding: AppPadding;
     }, SlotsType<{
         default?: () => VNodeChild;
     }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/app-panel.js

@@ -1,25 +1,5 @@
 import { defineComponent, createVNode, h } from "vue";
-function panelPaddingStyle(padding) {
-  if (padding === void 0) return void 0;
-  if (typeof padding === "number") return {
-    padding: `${padding}px`
-  };
-  const style = {};
-  if (padding.y !== void 0) {
-    style.paddingTop = `${padding.y}px`;
-    style.paddingBottom = `${padding.y}px`;
-  }
-  if (padding.x !== void 0) {
-    style.paddingLeft = `${padding.x}px`;
-    style.paddingRight = `${padding.x}px`;
-  }
-  return style;
-}
-function mergePartStyle(attrsStyle, padding) {
-  const paddingStyle = panelPaddingStyle(padding);
-  if (paddingStyle === void 0) return attrsStyle;
-  return [attrsStyle, paddingStyle];
-}
+import { mergePartStyle, partPaddingStyle } from "./part-padding.js";
 const AppPanelHeader = /* @__PURE__ */ defineComponent({
   name: "AppPanelHeader",
   inheritAttrs: false,
@@ -63,7 +43,7 @@ const AppPanelHeader = /* @__PURE__ */ defineComponent({
       const actions = renderSlotValue(slots.actions, props.actions);
       if (slots.header) {
         const custom = slots.header();
-        const paddingStyle = panelPaddingStyle(props.padding);
+        const paddingStyle = partPaddingStyle(props.padding);
         return paddingStyle === void 0 ? custom : createVNode("div", {
           "style": paddingStyle
         }, [custom]);

package/dist/components/part-padding.d.ts

@@ -0,0 +1,27 @@
+import type { StyleValue } from 'vue';
+/**
+ * 骨架件的**内距**口径（`AppPanel` 及其三件、`AppForm` 共用同一套）。
+ *
+ * - `number` → 四边同值（`padding={16}`）；
+ * - `{ y, x }` → 上下 / 左右分别给（`{ y: 12, x: 20 }`，弹窗里的容器常用 —— 与 Shell 的页面左右内距同档），
+ *   **缺哪边就不落哪边的声明**（只给 `y` 时不覆盖消费方在 `style` 里写的左右内距）。
+ *
+ * 为什么是 px 数字而不是 CSS 字符串：几何值在本仓是**设计基准**，不跟根字号
+ * （与 `AppForm.labelWidth` / `AppTable.rowHeight` 同口径）；要写自适应内距的场合请走 `class`。
+ */
+export type AppPadding = number | {
+    y?: number;
+    x?: number;
+};
+/**
+ * 内距 → 行内样式。缺省（`undefined`）时返回 `undefined`：**不额外产生 style 属性**，
+ * DOM 与「没有这个维度」时完全一致。
+ */
+export declare function partPaddingStyle(padding: AppPadding | undefined): StyleValue | undefined;
+/**
+ * 合并「消费方给的 `style`」与「内距行内样式」：两者都可能有，内距排在后面
+ * —— 同一属性以组件的 `padding` 为准（消费方要覆盖就用 `class` 里更具体的规则）。
+ *
+ * 不给 `padding` 时**原样返回消费方的 style**（含 `undefined`）。
+ */
+export declare function mergePartStyle(attrsStyle: unknown, padding: AppPadding | undefined): StyleValue | undefined;

package/dist/components/part-padding.js

@@ -0,0 +1,23 @@
+function partPaddingStyle(padding) {
+  if (padding === void 0) return void 0;
+  if (typeof padding === "number") return { padding: `${padding}px` };
+  const style = {};
+  if (padding.y !== void 0) {
+    style.paddingTop = `${padding.y}px`;
+    style.paddingBottom = `${padding.y}px`;
+  }
+  if (padding.x !== void 0) {
+    style.paddingLeft = `${padding.x}px`;
+    style.paddingRight = `${padding.x}px`;
+  }
+  return style;
+}
+function mergePartStyle(attrsStyle, padding) {
+  const paddingStyle = partPaddingStyle(padding);
+  if (paddingStyle === void 0) return attrsStyle;
+  return [attrsStyle, paddingStyle];
+}
+export {
+  mergePartStyle,
+  partPaddingStyle
+};

package/dist/index.d.ts

@@ -26,7 +26,7 @@ export { AppBadge, type AppBadgeTone, type AppBadgeShape, type AppBadgeSize, typ
 export { AppDialog } from './components/app-dialog';
 export { AppDrawer } from './components/app-drawer';
 export { AppTabs, type AppTabItem } from './components/app-tabs';
-export { AppForm, type AppFormProps, type AppFormItemProps, type AppFormLabelAlign, type AppFormCompound, } from './components/app-form';
+export { AppForm, type AppFormProps, type AppFormItemProps, type AppFormLabelAlign, type AppFormPadding, type AppFormCompound, } from './components/app-form';
 export { AppSection, type AppSectionProps } from './components/app-section';
 export { AppLayout, type AppLayoutGap, type AppLayoutAlign, type AppLayoutJustify, type AppLayoutColumns, type AppLayoutSpan, } from './atoms/app-layout';
 export { AppSteps, type AppStepItem } from './components/app-steps';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manohub/app-kit",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "private": false,
   "type": "module",
   "description": "子应用统一骨架层：入口编排（createSubApp）、布局契约（AppShell）、页面组件、原子件、服务、样式底座。farris 被收敛在本包内部，对外只暴露标准 API。",
@@ -63,7 +63,7 @@
   },
   "dependencies": {
     "@farris/ui-vue": "^1.8.4",
-    "@manohub/icon": "^0.2.7"
+    "@manohub/icon": "^0.2.8"
   },
   "devDependencies": {
     "@tanstack/vue-query": "catalog:",