@manohub/ui 0.10.3 → 0.10.5

package/dist/components/filter/index.d.ts

@@ -13,6 +13,18 @@ export type FilterValues = Record<string, FilterValue>;
  * 会显示占位文案）—— 两条路子的最终视觉一致，见 `docs/components/filter.md`。
  */
 export declare const FILTER_ALL = "all";
+/**
+ * 筛选时机：
+ *
+ * - `manual`（缺省）：值变化只回写快照（`onChange`），查询由**回车 / 「筛选」按钮**显式触发
+ *   （`onQuery`）—— 适合「几个字段填完再查」的条件区；
+ * - `auto`：值变化即查询（发 `onQuery`）—— 适合「改即查」的轻量条件区。
+ *   此时**同一次变化不再发 `onChange`**（一个变化只对应一个事件，消费方两处都接也不会查两遍），
+ *   且操作区默认不渲染（见 `showReset`）。
+ *
+ * 两种时机下**值变化都会发 `update:modelValue`**（`v-model` 落地不受时机影响）。
+ */
+export type FilterTrigger = 'manual' | 'auto';
 /**
  * 筛选字段的作用域插槽：控件由消费方渲染，本件交出**归一后**的当前值。
  *
@@ -56,11 +68,19 @@ export interface FilterProps {
     queryText?: string;
     /** 「重置」按钮文案 */
     resetText?: string;
-    /** 是否渲染「重置」按钮（缺省渲染） */
+    /**
+     * 是否渲染「重置」按钮 —— **两档的缺省口径不同**（故本项缺省是 `undefined` 而非 `true`）：
+     * `manual` 缺省渲染（`:show-reset="false"` 才隐藏）；`auto` 缺省**不**渲染（显式传 `true` 才留一颗）。
+     */
     showReset?: boolean;
-    /** 条件值变化（快照已归一） */
+    /**
+     * 筛选时机：`manual`（缺省）值变化只回写、查询靠「筛选」按钮 / 字段区回车；
+     * `auto` 值变化**即**查询，且操作区默认不渲染（详见组件说明「筛选时机」一节）。
+     */
+    trigger?: FilterTrigger;
+    /** 条件值变化（快照已归一）。**`auto` 下不发** —— 同一次变化改走 `onQuery` */
     onChange?: (values: FilterValues) => void;
-    /** 「筛选」按钮 / 字段区回车（回车只作用于输入框，且不认浮层里的输入） */
+    /** 「筛选」按钮 / 字段区回车（回车只作用于输入框，且不认浮层里的输入）；**`auto` 下由值变化触发** */
     onQuery?: (values: FilterValues) => void;
     /** 「重置」按钮：全部条件清空（**不再触发 `onChange`**，避免与重置回调双触发） */
     onReset?: (values: FilterValues) => void;
@@ -175,9 +195,24 @@ export declare const Filter: {
             type: StringConstructor;
             default: string;
         };
+        /**
+         * 是否渲染「重置」按钮。**缺省值随时机而变**（故本 prop 缺省是 `undefined`，不是 `true`）：
+         *
+         * - `trigger="manual"`（缺省）：缺省**渲染**（只有显式 `:show-reset="false"` 才隐藏）；
+         * - `trigger="auto"`：缺省**不渲染** —— 自动模式下操作区整块让位给字段，
+         *   要留一颗重置按钮就得**显式**写 `show-reset`。
+         *
+         * 自动模式下一键清空的另一条路是各字段自带的清除位（控件自己的 `clearable`），
+         * 或页面级入口（`Form.Header` 的 `extra` 一侧）。
+         */
         showReset: {
             type: BooleanConstructor;
-            default: boolean;
+            default: undefined;
+        };
+        /** 筛选时机：`manual`（缺省，回车 / 「筛选」按钮查询）/ `auto`（值变化即查询，操作区默认不渲染） */
+        trigger: {
+            type: PropType<FilterTrigger>;
+            default: string;
         };
         onChange: {
             type: PropType<(values: FilterValues) => void>;
@@ -202,6 +237,7 @@ export declare const Filter: {
         defaultValue: FilterValues;
         modelValue: FilterValues;
         description: string;
+        trigger: FilterTrigger;
         labelWidth: number;
         queryText: string;
         resetText: string;
@@ -245,9 +281,24 @@ export declare const Filter: {
             type: StringConstructor;
             default: string;
         };
+        /**
+         * 是否渲染「重置」按钮。**缺省值随时机而变**（故本 prop 缺省是 `undefined`，不是 `true`）：
+         *
+         * - `trigger="manual"`（缺省）：缺省**渲染**（只有显式 `:show-reset="false"` 才隐藏）；
+         * - `trigger="auto"`：缺省**不渲染** —— 自动模式下操作区整块让位给字段，
+         *   要留一颗重置按钮就得**显式**写 `show-reset`。
+         *
+         * 自动模式下一键清空的另一条路是各字段自带的清除位（控件自己的 `clearable`），
+         * 或页面级入口（`Form.Header` 的 `extra` 一侧）。
+         */
         showReset: {
             type: BooleanConstructor;
-            default: boolean;
+            default: undefined;
+        };
+        /** 筛选时机：`manual`（缺省，回车 / 「筛选」按钮查询）/ `auto`（值变化即查询，操作区默认不渲染） */
+        trigger: {
+            type: PropType<FilterTrigger>;
+            default: string;
         };
         onChange: {
             type: PropType<(values: FilterValues) => void>;
@@ -270,6 +321,7 @@ export declare const Filter: {
         defaultValue: FilterValues;
         modelValue: FilterValues;
         description: string;
+        trigger: FilterTrigger;
         labelWidth: number;
         queryText: string;
         resetText: string;
@@ -308,9 +360,24 @@ export declare const Filter: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * 是否渲染「重置」按钮。**缺省值随时机而变**（故本 prop 缺省是 `undefined`，不是 `true`）：
+     *
+     * - `trigger="manual"`（缺省）：缺省**渲染**（只有显式 `:show-reset="false"` 才隐藏）；
+     * - `trigger="auto"`：缺省**不渲染** —— 自动模式下操作区整块让位给字段，
+     *   要留一颗重置按钮就得**显式**写 `show-reset`。
+     *
+     * 自动模式下一键清空的另一条路是各字段自带的清除位（控件自己的 `clearable`），
+     * 或页面级入口（`Form.Header` 的 `extra` 一侧）。
+     */
     showReset: {
         type: BooleanConstructor;
-        default: boolean;
+        default: undefined;
+    };
+    /** 筛选时机：`manual`（缺省，回车 / 「筛选」按钮查询）/ `auto`（值变化即查询，操作区默认不渲染） */
+    trigger: {
+        type: PropType<FilterTrigger>;
+        default: string;
     };
     onChange: {
         type: PropType<(values: FilterValues) => void>;
@@ -335,6 +402,7 @@ export declare const Filter: {
     defaultValue: FilterValues;
     modelValue: FilterValues;
     description: string;
+    trigger: FilterTrigger;
     labelWidth: number;
     queryText: string;
     resetText: string;

package/dist/components/filter/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, createVNode, ref, h, Fragment } from "vue";
+import { defineComponent, createVNode, ref, computed, h, Fragment } from "vue";
 import { Button } from "../button/index.js";
 import { FormItem, Form } from "../form/index.js";
 const FILTER_ALL = "all";
@@ -50,9 +50,24 @@ const FilterRoot = /* @__PURE__ */ defineComponent({
       type: String,
       default: "重置"
     },
+    /**
+     * 是否渲染「重置」按钮。**缺省值随时机而变**（故本 prop 缺省是 `undefined`，不是 `true`）：
+     *
+     * - `trigger="manual"`（缺省）：缺省**渲染**（只有显式 `:show-reset="false"` 才隐藏）；
+     * - `trigger="auto"`：缺省**不渲染** —— 自动模式下操作区整块让位给字段，
+     *   要留一颗重置按钮就得**显式**写 `show-reset`。
+     *
+     * 自动模式下一键清空的另一条路是各字段自带的清除位（控件自己的 `clearable`），
+     * 或页面级入口（`Form.Header` 的 `extra` 一侧）。
+     */
     showReset: {
       type: Boolean,
-      default: true
+      default: void 0
+    },
+    /** 筛选时机：`manual`（缺省，回车 / 「筛选」按钮查询）/ `auto`（值变化即查询，操作区默认不渲染） */
+    trigger: {
+      type: String,
+      default: "manual"
     },
     onChange: {
       type: Function,
@@ -82,6 +97,10 @@ const FilterRoot = /* @__PURE__ */ defineComponent({
       if (clearing) return;
       const snapshot2 = normalizeValues(values);
       emit("update:modelValue", snapshot2);
+      if (props.trigger === "auto") {
+        props.onQuery?.(snapshot2);
+        return;
+      }
       props.onChange?.(snapshot2);
     };
     const snapshot = () => normalizeValues(formRef.value?.getValues());
@@ -101,12 +120,14 @@ const FilterRoot = /* @__PURE__ */ defineComponent({
       event.preventDefault();
       query();
     };
-    const renderActions = () => createVNode(Fragment, null, [createVNode(Button, {
+    const showResetButton = computed(() => props.trigger === "auto" ? props.showReset === true : props.showReset !== false);
+    const hasActions = computed(() => props.trigger === "manual" || showResetButton.value);
+    const renderActions = () => createVNode(Fragment, null, [props.trigger === "manual" ? createVNode(Button, {
       "variant": "primary",
       "onClick": query
     }, {
       default: () => props.queryText
-    }), props.showReset ? createVNode(Button, {
+    }) : null, showResetButton.value ? createVNode(Button, {
       "variant": "secondary",
       "onClick": reset
     }, {
@@ -126,12 +147,19 @@ const FilterRoot = /* @__PURE__ */ defineComponent({
       default: () => {
         const raw = slots.default?.();
         const fields = Array.isArray(raw) ? raw : raw == null ? [] : [raw];
-        return [h(Form.Header, {
-          title: props.title,
-          description: props.description
-        }, {
-          extra: renderActions
-        }), ...fields];
+        return [h(
+          Form.Header,
+          {
+            title: props.title,
+            description: props.description
+          },
+          /* 没有任何按钮时**不传** `extra`：`Form.Header` 认的是「插槽有没有传」，
+             传一个渲染成空的 slot 仍会撑出一行（右端空容器 + 一档行距），
+             且三样都没有时整块还会照常占位。 */
+          hasActions.value ? {
+            extra: renderActions
+          } : {}
+        ), ...fields];
       }
     });
   }

package/dist/components/tabs/index.d.ts

@@ -1,4 +1,5 @@
 import { type PropType, type SlotsType, type VNode, type VNodeChild } from 'vue';
+import type { ControlSize } from '../control-size';
 /** 轨道项：`Tabs` 从 `TabPanel` 提取（写了面板时）或由 `options` 直接给（老写法） */
 export interface TabsOption {
     /** 项文字 */
@@ -19,6 +20,16 @@ export interface TabsProps {
     onChange?: (value: string | number) => void;
     /** 惰性档：只有激活的面板才渲染（切走即卸载），用于面板很重（图表 / 大表格）的场景 */
     lazy?: boolean;
+    /**
+     * 尺寸档（`sm` / `md` / `lg`，缺省 `md`）—— 管**两件事**：
+     *
+     * 1. **骨架的呼吸位**：`控件 → 面板` 的 `gap`（`4 / 8 / 12px`）。这一条**与皮肤无关** ——
+     *    传了 `selector` 自定义控件时同样生效（间距归骨架，控件长什么样归皮肤）；
+     * 2. **缺省皮肤的尺寸档**：原样透传给 `TabBar`（高度 `24 / 32 / 40` + 同级字号）。
+     *    换了皮肤则这一条不生效：控件的尺寸归你放进来的那个控件自己管
+     *    （`Capsule` / 分段按钮各有自己的 `size`），本件不代它加类。
+     */
+    size?: ControlSize;
 }
 /** 一块面板的信息（本件只承载这些，自己不画任何东西） */
 export interface TabPanelProps {
@@ -110,6 +121,9 @@ export declare const TabPanel: import("vue").DefineComponent<import("vue").Extra
  * - 传插槽则整块替换：放 `Capsule`（胶囊）、按钮族的分段形态、单选卡片都行，
  *   作用域参数 `{ value, options, select }` 把值、项（已含从 `TabPanel` 提取的那些）与选中回调
  *   递出来。本件不认识任何选择控件的类名 —— **控制器与骨架零互指**，换皮肤不必动本件。
+ * - 尺寸档 `size` 管两件事：① 骨架的呼吸位（`.mh-tabs` 的 `gap`，4 / 8 / 12px，**与皮肤无关**）；
+ *   ② 缺省皮肤 `TabBar` 的高与字号（24 / 32 / 40）。换了皮肤则第 ② 条不生效 ——
+ *   控件尺寸归你的控件自己管，本件不代它加类。
  *
  * ## 显隐只有一条路径
  * 本件按受控值给非选中面板下发 `hidden`，**与控件形态无关**（是不是原生 radio 都一样）。
@@ -157,6 +171,11 @@ export declare const Tabs: import("vue").DefineComponent<import("vue").ExtractPr
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 缺省皮肤的尺寸档（`sm` / `md` / `lg`）；口径见 `TabsProps.size` */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:value': (value: string | number) => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -180,9 +199,15 @@ export declare const Tabs: import("vue").DefineComponent<import("vue").ExtractPr
         type: BooleanConstructor;
         default: boolean;
     };
+    /** 缺省皮肤的尺寸档（`sm` / `md` / `lg`）；口径见 `TabsProps.size` */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
 }>> & Readonly<{
     "onUpdate:value"?: ((value: string | number) => any) | undefined;
 }>, {
+    size: ControlSize;
     value: string | number | undefined;
     onChange: (value: string | number) => void;
     options: TabsOption[];

package/dist/components/tabs/index.js

@@ -55,6 +55,11 @@ const Tabs = /* @__PURE__ */ defineComponent({
     lazy: {
       type: Boolean,
       default: false
+    },
+    /** 缺省皮肤的尺寸档（`sm` / `md` / `lg`）；口径见 `TabsProps.size` */
+    size: {
+      type: String,
+      default: "md"
     }
   },
   /* 同 `TabBar`：受控值必须 emit 回 `update:value`，否则 `v-model:value="current"` 静默失效
@@ -107,7 +112,12 @@ const Tabs = /* @__PURE__ */ defineComponent({
         }, [node]);
       });
       return createVNode("div", {
-        "class": ["mh-tabs", attrs.class].filter(Boolean).join(" "),
+        "class": [
+          "mh-tabs",
+          /* `md` 缺省不发类（与 `TabBar` 同口径）：骨架的呼吸位 `gap` 靠这个档位类改写 */
+          props.size === "md" ? "" : `mh-tabs--${props.size}`,
+          attrs.class
+        ].filter(Boolean).join(" "),
         "style": attrs.style
       }, [slots.selector ? slots.selector({
         value: current,
@@ -116,6 +126,7 @@ const Tabs = /* @__PURE__ */ defineComponent({
       }) : createVNode(TabBar, {
         "options": items,
         "value": current,
+        "size": props.size,
         "onChange": select
       }, null), createVNode("div", {
         "class": "mh-tabs-panels"

package/dist/index.d.ts

@@ -39,7 +39,7 @@ export { Switch } from './components/switch';
 export { Capsule, type CapsuleOption, type CapsuleShape } from './components/capsule';
 export { Form, type FormProps, type FormHeaderProps, type FormItemProps, type FormValues, type FormItemSlotScope, type FormItemAlign, type FormLabelAlign, type FormColumns, type FormPadding, type FormCompound, } from './components/form';
 export { Checkbox, type CheckboxOption, type CheckboxCompound, type CheckboxCompoundType, } from './components/checkbox';
-export { Filter, FilterItem, FILTER_ALL, normalizeFilterValue, type FilterValue, type FilterValues, type FilterProps, type FilterItemProps, type FilterItemSlotScope, type FilterCompound, } from './components/filter';
+export { Filter, FilterItem, FILTER_ALL, normalizeFilterValue, type FilterValue, type FilterValues, type FilterProps, type FilterItemProps, type FilterItemSlotScope, type FilterTrigger, type FilterCompound, } from './components/filter';
 export { Notice, type NoticeTone } from './components/notice';
 export { Notification, type NotificationTone, } from './components/notification';
 export { Dialog, type DialogWidth } from './components/dialog';

package/dist/styles/components/capsule.css

@@ -19,9 +19,17 @@
  *
  * **与 `Tabs` 的判据**：`Tabs` 是操作层的**骨架**（只给根、面板组与收起态，不带面），
  * 面可由本件或按钮族的分段形态担任；本件是**带自己轨道与选中胶囊的轻量选择控件**。
+ *
+ * **轨道按内容宽收缩，不被父级拉宽**（缺省档口径的第二半）—— `align-self: flex-start` 就是为这条而写：
+ * 父级若是**列向弹性**（典型是 `Tabs` 的根 `.mh-tabs`），交叉轴缺省 `stretch` 会把唯一的子项拉成通栏，
+ * 轨道底随之变成一条长胶囊（实测：内容 112px 的轨道被拉到 638px）；`TabBar` 同样被拉满，但它规范里
+ * 第 1 条就是「不画轨线」，没有底色，肉眼看不出来。要**主动**撑满仍然走 `block` 档 —— 那条
+ * `width: 100%` 是显式宽度，`align-self` 管不着它（撑满与否只由 `block` 决定）。
  */
 .mh-capsule {
   display: inline-flex;
+  /* 缺省不吃父级交叉轴的拉伸（理由见上）；`align-self` 只对弹性子项生效，独立使用无副作用 */
+  align-self: flex-start;
   align-items: center;
   gap: 0; /* 胶囊相邻无间隙 */
   min-height: var(--ui-capsule-height);

package/dist/styles/components/form.css

@@ -169,7 +169,13 @@
   display: inline-flex;
   align-items: center;
   flex: 0 0 auto;
-  line-height: 1;
+  /* 行盒归零（`font-size: 0` + `line-height: 0`）：`Tooltip` 的宿主里还夹着一层 **inline 的锚点
+     span**（`.mh-popup-anchor`），它会给内含的 `inline-flex` 触发器生成行盒 —— 行盒按基线对齐，
+     于是宿主比图标高出一个 descender 间隙（实测 16px 图标 ⇒ 宿主 17px）。宿主再把这 17px 在
+     label 行里居中，图标中线就比文字中线高 0.5px。归零后宿主高度 === 图标高度，中线才重合。
+     图标 svg 不受影响（它自带尺寸，不读字号）。 */
+  font-size: 0;
+  line-height: 0;
 }
 
 /* 触发器（问号按钮）：`reset` 不代消费方归零控件外观，故边 / 底 / 内距三项自备。
@@ -182,29 +188,18 @@
   padding: 0;
   border: none;
   background: transparent;
-  color: var(--ui-base-content-muted);
+  /* 静止：**浅灰**（`subtle`，同计数器档）；滑过 / 键盘聚焦转**正文色（黑）** ——
+     从 muted(#666) 起手的那版与 hover 后的 content(#1a1a1a) 只差一档，视觉上几乎看不出交互。 */
+  color: var(--ui-base-content-subtle);
   cursor: help;
 }
 
-.mh-form-item__tip-btn:hover,
-.mh-form-item__tip-btn:focus-visible {
+.mh-form-item__tip-btn:hover {
   color: var(--ui-base-content);
 }
 
-/* 键盘可达：气泡显形靠操作层的宿主 `:focus-within` 档，这里只管**焦点可见**（主色环）。 */
 
-.mh-form-item__tip-btn:focus-visible {
-  outline: 2px solid var(--ui-primary);
-  outline-offset: 2px;
-}
 
-/* 图标尺寸：常规图标一律取全局图标档。`<Icon>` 的宽高是**属性**，面层能覆盖；
-   不写就会静默落到组件默认的 16（口径见 `contract-icon-direction.spec.ts`）。 */
-
-.mh-form-item__tip-btn > svg {
-  width: var(--ui-font-icon);
-  height: var(--ui-font-icon);
-}
 
 /* label 对齐：基类默认右对齐（贴控件列，`labelAlign` 缺省档）；
    `labelAlign="left"` 时挂这个修饰类改成左对齐 —— 只给「非默认值」挂类，避免两段声明争胜出顺序。

package/dist/styles/components/input.css

@@ -479,7 +479,12 @@
 }
 .mh-input__wrap:has(> .mh-input--textarea) > .mh-input__counter {
   position: absolute;
-  right: var(--ui-input-padding-x);
+  /* 右让位一个「拖拽角」：多行是 `resize: vertical`（`.mh-input--textarea`），浏览器于是在框的
+     右下角画一枚原生拖拽柄（Chromium 约 16px 见方），与计数器**同角重叠**——实测截图里
+     `0/1024` 与手柄叠在一起。故计数器在同一行内右移整一档令牌（`--ui-space-4` = 16px）：
+     `bottom` 不动，底部留白口径（见上方 padding-bottom 规则）不受影响。
+     不同平台的手柄宽略有差异（Firefox 略窄），此处取整档、不按浏览器分支。 */
+  right: calc(var(--ui-input-padding-x) + var(--ui-space-4));
   bottom: var(--ui-space-1);
 }
 

package/dist/styles/operations/tabs.css

@@ -40,11 +40,20 @@
  * 面板的面与几何由皮肤族给（卡片一类）；本层只写「收起态」「弹性链」与根上的呼吸位。
  */
 
-/* ===== 一、操作根：选择控件在上、面板在下 ===== */
+/* ===== 一、操作根：选择控件在上、面板在下 =====
+   呼吸位（`gap`）随 `size` 档走：档位由组件在根上出 `mh-tabs--sm` / `mh-tabs--lg`
+   （`md` 缺省不发类，与 `TabBar` 同口径）。skin 只决定控件长什么样，控件与面板之间的
+   间距归骨架 —— 故本档**与皮肤无关**，传了 `selector` 自定义控件时同样生效。 */
 .mh-tabs {
   display: flex;
   flex-direction: column;
-  gap: var(--ui-space-4); /* 控件 → 面板的呼吸位 12px */
+  gap: var(--ui-space-2); /* md（缺省）：8px */
+}
+.mh-tabs--sm {
+  gap: var(--ui-space-1); /* sm：4px */
+}
+.mh-tabs--lg {
+  gap: var(--ui-space-3); /* lg：12px */
 }
 
 /* ===== 二、弹性链：面板组 → 面板 =====

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manohub/ui",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "private": false,
   "type": "module",
   "description": "AIHub 自绘组件层：不依赖 farris 的手写 Vue TSX 组件 + 自带令牌层（Farris 规范视觉 · daisyUI 式语义令牌 · shadcn 式 API 词汇）。",
@@ -46,7 +46,7 @@
     "vue": "^3.5.0"
   },
   "dependencies": {
-    "@manohub/icon": "^0.10.3"
+    "@manohub/icon": "^0.10.5"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",