@manohub/ui 0.6.0

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

@@ -0,0 +1,179 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import type { ControlSize } from '../control-size';
+export interface TabsOption {
+    /** 项文字 */
+    label: string;
+    /** 项值（受控值就是它） */
+    value: string | number;
+    /** 禁用项：不可选 */
+    disabled?: boolean;
+    /** 单项可关（`closable` 打开时用它例外掉某些项） */
+    closable?: boolean;
+}
+export type TabsValue = string | number;
+/** 页签形态：`line` 下划线指示条 / `card` 选项卡（与内容区连成一体） */
+export type TabsType = 'line' | 'card';
+/**
+ * 页签条（**自绘**；下划线或选项卡两种形态 + 三档尺寸 + 居中 + 可关闭 + 可新增 + 「更多」收纳）。
+ *
+ * ## 与 `Tabset` / `Capsule` 的分工（三者都能"切换"，判据在**可见形态**）
+ *
+ * - 本件：**页签条**（`line` 下划线 / `card` 选项卡，页面级分区切换）—— 就是这一族的皮肤；
+ * - `Capsule`：胶囊/分段按钮（块状选中底），用于筛选项那种"按钮感"切换；
+ * - `Tabset`：**骨架**（把某组互斥项与面板显隐接起来），它不含皮肤 —— 把本件塞进它的 `selector` 插槽即可。
+ *
+ * ## 指示条为什么不是一个滑块
+ *
+ * 每个项的指示条是它自己的伪元素、常驻但未选时 `opacity:0; scale:.75` —— "滑过去"的观感来自这两个属性的
+ * 过渡。做成一条共享滑块要 JS 量位置，且首帧会跳。**别在页签区加轨线**（会扣走区高 1px，规范明确警告）。
+ * （`card` 档不画指示条：选中由底色与顶边表达。）
+ *
+ * ## 超过一屏的页签怎么放
+ *
+ * 给 `more` 插槽即出「更多 ▾」页签 + 操作层浮层（原生 popover，零 JS 开合）；哪些页签收进"更多"由调用方
+ * 决定 —— 收多久、收哪些是业务判断，不是皮肤能定的。
+ *
+ * @example 基本
+ * <Tabs :options="[{label:'全部',value:'all'},{label:'进行中',value:'doing'}]" v-model:value="current" />
+ *
+ * @example 选项卡形态 + 可关闭可新增
+ * <Tabs type="card" closable addable :options="tabs" v-model:value="current"
+ *   :on-close="remove" :on-add="add" />
+ */
+export declare const Tabs: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<TabsOption[]>;
+        required: true;
+    };
+    /** 受控选中值；不传即非受控（由 `defaultValue` 起） */
+    value: {
+        type: PropType<TabsValue | undefined>;
+        default: undefined;
+    };
+    /** 非受控初始选中值，缺省第一项 */
+    defaultValue: {
+        type: PropType<TabsValue | undefined>;
+        default: undefined;
+    };
+    /** 选中变化回调（受控与非受控都会调） */
+    onChange: {
+        type: PropType<(value: TabsValue) => void>;
+        default: undefined;
+    };
+    /** 形态：`line` 下划线 / `card` 选项卡 */
+    type: {
+        type: PropType<TabsType>;
+        default: string;
+    };
+    /** 整体居中（页签少、要撑满整行时用） */
+    centered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档（24 / 32 / 40，只覆盖令牌） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 每项带关闭位（单项可用 `option.closable` 覆写） */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尾部「新增」按钮 */
+    addable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 「更多」页签的文字 */
+    moreLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 关闭某项（只回调，**不从 `options` 里删** —— 数据归调用方） */
+    onClose: {
+        type: PropType<(value: TabsValue) => void>;
+        default: undefined;
+    };
+    /** 点新增（只回调） */
+    onAdd: {
+        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<{
+    options: {
+        type: PropType<TabsOption[]>;
+        required: true;
+    };
+    /** 受控选中值；不传即非受控（由 `defaultValue` 起） */
+    value: {
+        type: PropType<TabsValue | undefined>;
+        default: undefined;
+    };
+    /** 非受控初始选中值，缺省第一项 */
+    defaultValue: {
+        type: PropType<TabsValue | undefined>;
+        default: undefined;
+    };
+    /** 选中变化回调（受控与非受控都会调） */
+    onChange: {
+        type: PropType<(value: TabsValue) => void>;
+        default: undefined;
+    };
+    /** 形态：`line` 下划线 / `card` 选项卡 */
+    type: {
+        type: PropType<TabsType>;
+        default: string;
+    };
+    /** 整体居中（页签少、要撑满整行时用） */
+    centered: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档（24 / 32 / 40，只覆盖令牌） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 每项带关闭位（单项可用 `option.closable` 覆写） */
+    closable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尾部「新增」按钮 */
+    addable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 「更多」页签的文字 */
+    moreLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 关闭某项（只回调，**不从 `options` 里删** —— 数据归调用方） */
+    onClose: {
+        type: PropType<(value: TabsValue) => void>;
+        default: undefined;
+    };
+    /** 点新增（只回调） */
+    onAdd: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: ControlSize;
+    value: TabsValue | undefined;
+    type: TabsType;
+    onChange: (value: TabsValue) => void;
+    onClose: (value: TabsValue) => void;
+    defaultValue: TabsValue | undefined;
+    closable: boolean;
+    centered: boolean;
+    addable: boolean;
+    moreLabel: string;
+    onAdd: () => void;
+}, SlotsType<{
+    more?: (context: {
+        options: TabsOption[];
+    }) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/tabs/index.js

@@ -0,0 +1,153 @@
+import { defineComponent, ref, computed, createVNode, Fragment, mergeProps } from "vue";
+import { Icon } from "@manohub/icon";
+const Tabs = /* @__PURE__ */ defineComponent({
+  name: "Tabs",
+  inheritAttrs: false,
+  props: {
+    options: {
+      type: Array,
+      required: true
+    },
+    /** 受控选中值；不传即非受控（由 `defaultValue` 起） */
+    value: {
+      type: [String, Number],
+      default: void 0
+    },
+    /** 非受控初始选中值，缺省第一项 */
+    defaultValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    /** 选中变化回调（受控与非受控都会调） */
+    onChange: {
+      type: Function,
+      default: void 0
+    },
+    /** 形态：`line` 下划线 / `card` 选项卡 */
+    type: {
+      type: String,
+      default: "line"
+    },
+    /** 整体居中（页签少、要撑满整行时用） */
+    centered: {
+      type: Boolean,
+      default: false
+    },
+    /** 尺寸档（24 / 32 / 40，只覆盖令牌） */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** 每项带关闭位（单项可用 `option.closable` 覆写） */
+    closable: {
+      type: Boolean,
+      default: false
+    },
+    /** 尾部「新增」按钮 */
+    addable: {
+      type: Boolean,
+      default: false
+    },
+    /** 「更多」页签的文字 */
+    moreLabel: {
+      type: String,
+      default: "更多"
+    },
+    /** 关闭某项（只回调，**不从 `options` 里删** —— 数据归调用方） */
+    onClose: {
+      type: Function,
+      default: void 0
+    },
+    /** 点新增（只回调） */
+    onAdd: {
+      type: Function,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const innerValue = ref(props.value ?? props.defaultValue ?? props.options[0]?.value);
+    const current = computed(() => props.value ?? innerValue.value);
+    const moreId = `mh-tabs-${Math.random().toString(36).slice(2, 10)}`;
+    const select = (value) => {
+      const target = props.options.find((option) => option.value === value);
+      if (target?.disabled) return;
+      if (props.value === void 0) innerValue.value = value;
+      props.onChange?.(value);
+    };
+    const isClosable = (option) => option.closable ?? props.closable;
+    return () => createVNode("nav", {
+      "class": [
+        "mh-tabs",
+        /* `mh-popup-host` 是操作层展开转向的**宿主标记**（popup.css 靠它 :has 反推面板开合）：
+           没有它，「更多」的 caret 展开时不会翻向 —— 与 Select / Tooltip 同一分工。 */
+        "mh-popup-host",
+        props.type === "card" ? "mh-tabs--card" : "",
+        props.centered ? "mh-tabs--centered" : "",
+        props.size === "md" ? "" : `mh-tabs--${props.size}`,
+        attrs.class
+      ].filter(Boolean).join(" "),
+      "style": attrs.style,
+      "role": "tablist"
+    }, [props.options.map((option) => {
+      const active = option.value === current.value;
+      return createVNode("button", {
+        "key": option.value,
+        "type": "button",
+        "role": "tab",
+        "class": ["mh-tabs__tab", active ? "is-selected" : "", option.disabled ? "is-disabled" : ""].filter(Boolean).join(" "),
+        "data-state": active ? "active" : "inactive",
+        "aria-selected": active,
+        "disabled": option.disabled,
+        "onClick": () => select(option.value)
+      }, [option.label, isClosable(option) && !option.disabled ? (
+        /* 关闭位不是 `<button>`：页签自己是按钮，按钮里嵌按钮是非法 HTML。
+           用 `role="button"` + `stopPropagation` 表达同样的语义与行为。 */
+        createVNode("span", {
+          "class": "mh-tabs__close",
+          "role": "button",
+          "tabindex": -1,
+          "aria-label": `关闭${option.label}`,
+          "onClick": (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            props.onClose?.(option.value);
+          }
+        }, [createVNode(Icon, {
+          "name": "close"
+        }, null)])
+      ) : null]);
+    }), props.addable ? createVNode("button", {
+      "type": "button",
+      "class": "mh-tabs__add",
+      "aria-label": "新增页签",
+      "onClick": () => props.onAdd?.()
+    }, [createVNode(Icon, {
+      "name": "plus"
+    }, null)]) : null, slots.more ? createVNode(Fragment, null, [createVNode("button", mergeProps({
+      "type": "button",
+      "class": "mh-tabs__tab mh-tabs__tab--more",
+      "data-state": "inactive"
+    }, {
+      popovertarget: moreId
+    }), [props.moreLabel, createVNode(Icon, {
+      "name": "chevron-down",
+      "class": "mh-popup-caret"
+    }, null)]), createVNode("div", mergeProps({
+      "id": moreId,
+      "class": "mh-popup",
+      "data-side": "bottom",
+      "data-align": "end"
+    }, {
+      popover: "auto"
+    }), [slots.more({
+      options: props.options
+    })])]) : null]);
+  }
+});
+export {
+  Tabs
+};

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

@@ -0,0 +1,105 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+export interface TabsetOption {
+    /** 项文字 */
+    label: string;
+    /** 项值（受控值就是它） */
+    value: string | number;
+    /** 禁用项：不可选（原生 radio 路径下方向键会跳过） */
+    disabled?: boolean;
+}
+export interface TabsetProps {
+    /** 轨道项（顺序即「第 n 项 ↔ 第 n 块面板」的档位表） */
+    options: TabsetOption[];
+    /** 受控选中值；不传即非受控（由 `defaultValue` 起） */
+    value?: string | number;
+    /** 非受控初始选中值，缺省第一项 */
+    defaultValue?: string | number;
+    /** 选中变化回调（受控与非受控都会调） */
+    onChange?: (value: string | number) => void;
+}
+/**
+ * 面板切换（**操作层骨架 + 组件路径显隐**）。
+ *
+ * ## 它是什么
+ * 把「一组互斥选项」与「按顺序排列的面板」接起来：第 n 个选项对应第 n 块面板。
+ * 骨架（根、面板组、档位表）在操作层 `styles/operations/tabset.css`，本件负责：
+ * 受控值、面板包装与显隐、把 `select` 交给选择控件。
+ *
+ * ## 两条显隐路径（结论一致，不冲突）
+ * - **原生路径**（推荐）：选择控件用**原生 radio**（如 `Capsule`）→ 操作层的档位表
+ *   `:has(input:nth-of-type(n):checked)` 直接显隐，**零 JS**；
+ * - **组件路径**：控件不是 radio 时，本件按受控值给非选中面板下发 `hidden`。
+ * 两条路径都由同一个值驱动，故同时成立不会互相打架。
+ *
+ * ## 与皮肤零互指
+ * 本件不认识任何选择控件的类名 —— 轨道由 `selector` 插槽提供（作用域参数 `{ value, options, select }`），
+ * 放胶囊、分段按钮、单选卡片都行；面板内容由默认插槽按 `options` 顺序给出。
+ *
+ * @example 胶囊 + 面板（`Capsule` 提供原生 radio，故走零 JS 路径）
+ * <Tabset :options="tabs" v-model:value="current">
+ *   {{
+ *     selector: ({ value, select }) => <Capsule :options="tabs" modelValue={value} onChange={select} />,
+ *     default: () => [
+ *       <Card key="all">全部：15 条</Card>,
+ *       <Card key="doing">进行中：3 条</Card>,
+ *     ],
+ *   }}
+ * </Tabset>
+ */
+export declare const Tabset: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<TabsetOption[]>;
+        required: true;
+    };
+    value: {
+        type: PropType<string | number | undefined>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<string | number | undefined>;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<(value: string | number) => void>;
+        default: undefined;
+    };
+    /** 惰性档：只有激活的面板才渲染（切走即卸载），用于面板很重（图表 / 大表格）的场景 */
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    options: {
+        type: PropType<TabsetOption[]>;
+        required: true;
+    };
+    value: {
+        type: PropType<string | number | undefined>;
+        default: undefined;
+    };
+    defaultValue: {
+        type: PropType<string | number | undefined>;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<(value: string | number) => void>;
+        default: undefined;
+    };
+    /** 惰性档：只有激活的面板才渲染（切走即卸载），用于面板很重（图表 / 大表格）的场景 */
+    lazy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    value: string | number | undefined;
+    onChange: (value: string | number) => void;
+    defaultValue: string | number | undefined;
+    lazy: boolean;
+}, SlotsType<{
+    default?: () => VNodeChild;
+    selector?: (context: {
+        value: string | number | undefined;
+        options: TabsetOption[];
+        select: (value: string | number) => void;
+    }) => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/tabset/index.js

@@ -0,0 +1,68 @@
+import { defineComponent, ref, computed, createVNode } from "vue";
+const Tabset = /* @__PURE__ */ defineComponent({
+  name: "Tabset",
+  inheritAttrs: false,
+  props: {
+    options: {
+      type: Array,
+      required: true
+    },
+    value: {
+      type: [String, Number],
+      default: void 0
+    },
+    defaultValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    onChange: {
+      type: Function,
+      default: void 0
+    },
+    /** 惰性档：只有激活的面板才渲染（切走即卸载），用于面板很重（图表 / 大表格）的场景 */
+    lazy: {
+      type: Boolean,
+      default: false
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    const innerValue = ref(props.value ?? props.defaultValue ?? props.options[0]?.value);
+    const current = computed(() => props.value ?? innerValue.value);
+    const select = (value) => {
+      const target = props.options.find((option) => option.value === value);
+      if (target?.disabled) return;
+      if (props.value === void 0) innerValue.value = value;
+      props.onChange?.(value);
+    };
+    const panels = () => {
+      const children = slots.default?.();
+      const list = Array.isArray(children) ? children : children ? [children] : [];
+      return list.map((child, index) => {
+        const option = props.options[index];
+        const active = option !== void 0 && option.value === current.value;
+        if (props.lazy && !active) return null;
+        return createVNode("div", {
+          "class": "mh-tabset-panel",
+          "hidden": !active
+        }, [child]);
+      });
+    };
+    return () => createVNode("div", {
+      "class": ["mh-tabset", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [slots.selector?.({
+      value: current.value,
+      options: props.options,
+      select
+    }), createVNode("div", {
+      "class": "mh-tabset-panels"
+    }, [panels()])]);
+  }
+});
+export {
+  Tabset
+};