@manohub/ui 0.6.1 → 0.7.1

package/dist/components/steps/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, createVNode, Fragment } from "vue";
+import { defineComponent, computed, createVNode, mergeProps, Fragment } from "vue";
 import { Icon } from "@manohub/icon";
 const Steps = /* @__PURE__ */ defineComponent({
   name: "Steps",
@@ -22,27 +22,81 @@ const Steps = /* @__PURE__ */ defineComponent({
     size: {
       type: String,
       default: "md"
+    },
+    /**
+     * 步骤可点：点某步即切到该步（**节点与标题整块**都是点击区）。
+     *
+     * 缺省 `false` —— 规范未演示跳步，件不凭空长交互。开了之后：
+     * - 步渲染成**原生 `<button type="button">`** ⇒ 键盘 Tab/Enter 可达、`:focus-visible` 有焦点环。
+     *   不要再靠 `title` 插槽自绘可点元素：那会嵌进 `<button>` 形成嵌套交互，且拿不到键盘支持；
+     * - 「哪几步能跳」由 `canJump` 决定（缺省全可跳）；
+     * - 点击发 `update:current`（可写 `v-model:current`）与 `onChange`。
+     *
+     * ⚠️ 「跳转前验证」写在**渲染期**（`disabled`），不要写成点击时的事件拦截 —— 见文件头。
+     */
+    clickable: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 跳转验证：**能不能跳到第 `index` 步**（第二参是当前步）。缺省全可跳。
+     *
+     * 返回 `false` 的步会被画成禁用态（置灰 + `not-allowed`）、拦掉点击、**也不进键盘序列** ——
+     * 判定跑在**渲染期**，不是「点了再拦」（那样只能得到「看着可点、点了没反应」）。
+     * 需要异步验证才能决定能不能跳时，把结果先存进状态、再据此返回。
+     *
+     * ⚠️ 它只回答「能不能跳」。若某一步是「本身不可用」（不论从哪来），也用它统一表达 ——
+     * 本件不另设行级 `disabled`，免得同一条规则散在两处。
+     */
+    canJump: {
+      type: Function,
+      default: void 0
+    },
+    /** 点击换步（`clickable` 档下生效）；`prevIndex` 为点击前的当前步 */
+    onChange: {
+      type: Function,
+      default: void 0
     }
   },
+  emits: {
+    "update:current": (index) => true
+  },
   slots: Object,
   setup(props, {
     slots,
-    attrs
+    attrs,
+    emit
   }) {
+    const jumpable = computed(() => props.steps.map((_, index) => props.canJump?.(index, props.current) ?? true));
+    const selectStep = (index) => {
+      if (!jumpable.value[index]) return;
+      emit("update:current", index);
+      props.onChange?.(index, props.current);
+    };
+    const stepAction = (index) => props.clickable ? {
+      type: "button",
+      disabled: !jumpable.value[index],
+      onClick: () => selectStep(index)
+    } : {};
     return () => {
+      const PartTag = props.clickable ? "button" : props.variant === "bar" ? "span" : "div";
       const root = ["mh-steps", props.size === "md" ? "" : `mh-steps--${props.size}`, attrs.class].filter(Boolean).join(" ");
       const style = attrs.style;
       if (props.variant === "bar") {
         return createVNode("div", {
           "class": ["mh-steps__bar", attrs.class].filter(Boolean).join(" "),
           "style": style
-        }, [props.steps.map((step, index) => createVNode("span", {
+        }, [props.steps.map((step, index) => createVNode(PartTag, mergeProps({
           "key": `${step.title}-${index}`,
-          "class": ["mh-steps__seg", index === props.current ? "mh-steps__seg--active" : ""].filter(Boolean).join(" ")
-        }, [createVNode("span", null, [index + 1]), slots.title ? slots.title({
-          item: step,
-          index
-        }) : step.title]))]);
+          "class": ["mh-steps__seg", index === props.current ? "mh-steps__seg--active" : "", props.clickable ? "mh-steps__seg--clickable" : "", props.clickable && !jumpable.value[index] ? "mh-steps__seg--disabled" : ""].filter(Boolean).join(" "),
+          "aria-current": index === props.current ? "step" : void 0
+        }, stepAction(index)), {
+          default: () => [createVNode("span", null, [index + 1]), slots.title ? slots.title({
+            item: step,
+            index,
+            disabled: !jumpable.value[index]
+          }) : step.title]
+        }))]);
       }
       return createVNode("div", {
         "class": root,
@@ -57,24 +111,28 @@ const Steps = /* @__PURE__ */ defineComponent({
             // 连线在「步 index-1 之后」：当前步之后那一段才转蓝
             index - 1 === props.current ? "mh-steps__connector--active" : ""
           ].filter(Boolean).join(" ")
-        }, null) : null, createVNode("div", {
-          "class": ["mh-steps__step", state].filter(Boolean).join(" ")
-        }, [createVNode("span", {
-          "class": "mh-steps__node"
-        }, [index < props.current ? createVNode(Icon, {
-          "name": "check",
-          "class": "mh-steps__node-icon",
-          "size": 16
-        }, null) : step.icon ? createVNode(Icon, {
-          "name": step.icon,
-          "class": "mh-steps__node-icon",
-          "size": 16
-        }, null) : index + 1]), createVNode("span", {
-          "class": "mh-steps__title"
-        }, [slots.title ? slots.title({
-          item: step,
-          index
-        }) : step.title])])]);
+        }, null) : null, createVNode(PartTag, mergeProps({
+          "class": ["mh-steps__step", state, props.clickable ? "mh-steps__step--clickable" : "", props.clickable && !jumpable.value[index] ? "mh-steps__step--disabled" : ""].filter(Boolean).join(" "),
+          "aria-current": index === props.current ? "step" : void 0
+        }, stepAction(index)), {
+          default: () => [createVNode("span", {
+            "class": "mh-steps__node"
+          }, [index < props.current ? createVNode(Icon, {
+            "name": "check",
+            "class": "mh-steps__node-icon",
+            "size": 16
+          }, null) : step.icon ? createVNode(Icon, {
+            "name": step.icon,
+            "class": "mh-steps__node-icon",
+            "size": 16
+          }, null) : index + 1]), createVNode("span", {
+            "class": "mh-steps__title"
+          }, [slots.title ? slots.title({
+            item: step,
+            index,
+            disabled: !jumpable.value[index]
+          }) : step.title])]
+        })]);
       })]);
     };
   }

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

@@ -13,8 +13,22 @@ import type { ControlSize } from '../control-size';
  * - 选中态三源等价：原生 `:checked` / 组件下发 `data-state` / 静态档 `.is-checked`；
  * - `labelPosition` 用 flex `order` 翻转，**不改 DOM 顺序** —— 否则那条 `~` 兄弟规则立刻失效。
  *
+ * ## 与 `Form.Item` 的关系（**同一个词别写两遍**）
+ *
+ * `label` 是**控件自己的文案** —— 它长在根 `<label>` 里，**点它也切换开关**；
+ * 而 `Form.Item` 的 `label` 是**字段名**（点它只是聚焦控件）。两者不是一回事。
+ *
+ * 所以放进表单行时**不要再传一次**：字段名归 `Form.Item`，开关只放控件本身。
+ *
+ * - 正确：`<Form.Item label="启用"><Switch v-model={on} /></Form.Item>`
+ * - 错误：`<Form.Item label="启用"><Switch v-model={on} label="启用" /></Form.Item>`
+ *   —— 同一行会显示成「启用 启用 （开关）」，同一个词出现两遍。
+ *
+ * 只有**没有表单行**的场合（表格行内 / 工具栏 / 设置面板）才需要 `label` 自己带文字；
+ * 那种场景若要把文字放到开关右侧，给 `labelPosition="right"`。
+ *
  * @example
- * <Switch modelValue={on} label="启用" onChange={(v) => (on = v)} />
+ * <Switch modelValue={on} onChange={(v) => (on = v)} />
  *
  * @example 轨道内文案 + 尺寸 + 加载
  * <Switch v-model={auto} checkedText="开" uncheckedText="关" size="lg" loading={saving} />
@@ -25,7 +39,12 @@ export declare const Switch: import("vue").DefineComponent<import("vue").Extract
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 开关文字（复杂内容走默认插槽） */
+    /**
+     * 开关**自己的文案**（点它也切换；复杂内容走默认插槽）。
+     *
+     * ⚠️ 放进 `Form.Item` 时**不要传** —— 字段名由 `Form.Item` 的 `label` 给，
+     * 两处写同一个词会显示成「启用 启用 （开关）」。独立使用（表格行内 / 工具栏 / 设置面板）才用它。
+     */
     label: {
         type: StringConstructor;
         default: undefined;
@@ -44,7 +63,7 @@ export declare const Switch: import("vue").DefineComponent<import("vue").Extract
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 文字相对开关的位置（缺省在左；表单里常放右） */
+    /** 文字相对开关的位置（缺省在左）—— 表单行内一般不传 `label`，这条主要服务独立使用的场景 */
     labelPosition: {
         type: PropType<"left" | "right">;
         default: string;
@@ -82,7 +101,12 @@ export declare const Switch: import("vue").DefineComponent<import("vue").Extract
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 开关文字（复杂内容走默认插槽） */
+    /**
+     * 开关**自己的文案**（点它也切换；复杂内容走默认插槽）。
+     *
+     * ⚠️ 放进 `Form.Item` 时**不要传** —— 字段名由 `Form.Item` 的 `label` 给，
+     * 两处写同一个词会显示成「启用 启用 （开关）」。独立使用（表格行内 / 工具栏 / 设置面板）才用它。
+     */
     label: {
         type: StringConstructor;
         default: undefined;
@@ -101,7 +125,7 @@ export declare const Switch: import("vue").DefineComponent<import("vue").Extract
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 文字相对开关的位置（缺省在左；表单里常放右） */
+    /** 文字相对开关的位置（缺省在左）—— 表单行内一般不传 `label`，这条主要服务独立使用的场景 */
     labelPosition: {
         type: PropType<"left" | "right">;
         default: string;

package/dist/components/switch/index.js

@@ -8,7 +8,12 @@ const Switch = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: false
     },
-    /** 开关文字（复杂内容走默认插槽） */
+    /**
+     * 开关**自己的文案**（点它也切换；复杂内容走默认插槽）。
+     *
+     * ⚠️ 放进 `Form.Item` 时**不要传** —— 字段名由 `Form.Item` 的 `label` 给，
+     * 两处写同一个词会显示成「启用 启用 （开关）」。独立使用（表格行内 / 工具栏 / 设置面板）才用它。
+     */
     label: {
       type: String,
       default: void 0
@@ -27,7 +32,7 @@ const Switch = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: false
     },
-    /** 文字相对开关的位置（缺省在左；表单里常放右） */
+    /** 文字相对开关的位置（缺省在左）—— 表单行内一般不传 `label`，这条主要服务独立使用的场景 */
     labelPosition: {
       type: String,
       default: "left"
@@ -76,6 +81,7 @@ const Switch = /* @__PURE__ */ defineComponent({
     };
     return () => createVNode("label", {
       "class": ["mh-switch", resolvedSize.value === "md" ? "" : `mh-switch--${resolvedSize.value}`, props.form ? "mh-switch--form" : "", hasTrackText.value ? "mh-switch--with-text" : "", props.labelPosition === "right" ? "mh-switch--label-right" : "", props.loading ? "is-loading" : "", props.disabled ? "is-disabled" : "", props.modelValue ? "is-checked" : "", attrs.class].filter(Boolean).join(" "),
+      "data-inline-control": "true",
       "style": attrs.style
     }, [createVNode("input", {
       "class": "mh-switch__input",

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

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

package/dist/components/tabbar/index.js

@@ -0,0 +1,161 @@
+import { defineComponent, ref, computed, createVNode, Fragment, mergeProps } from "vue";
+import { Icon } from "@manohub/icon";
+const TabBar = /* @__PURE__ */ defineComponent({
+  name: "TabBar",
+  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
+    }
+  },
+  /* 受控值必须 emit 回 `update:value`，否则 `v-model:value="x"` 是**静默失效**的：
+     受控时 `props.value !== undefined` ⇒ 内部状态不更新，而外部又收不到新值 ⇒ 点 tab 毫无反应
+     （不报错、不警告）。本件 0.6.x 就漏了这条 —— 文档示例教 `v-model:value` 却点了不动。 */
+  emits: {
+    "update:value": (value) => true
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs,
+    emit
+  }) {
+    const innerValue = ref(props.value ?? props.defaultValue ?? props.options[0]?.value);
+    const current = computed(() => props.value ?? innerValue.value);
+    const moreId = `mh-tabbar-${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;
+      emit("update:value", value);
+      props.onChange?.(value);
+    };
+    const isClosable = (option) => option.closable ?? props.closable;
+    return () => createVNode("nav", {
+      "class": [
+        "mh-tabbar",
+        /* `mh-popup-host` 是操作层展开转向的**宿主标记**（popup.css 靠它 :has 反推面板开合）：
+           没有它，「更多」的 caret 展开时不会翻向 —— 与 Select / Tooltip 同一分工。 */
+        "mh-popup-host",
+        props.type === "card" ? "mh-tabbar--card" : "",
+        props.centered ? "mh-tabbar--centered" : "",
+        props.size === "md" ? "" : `mh-tabbar--${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-tabbar__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-tabbar__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-tabbar__add",
+      "aria-label": "新增页签",
+      "onClick": () => props.onAdd?.()
+    }, [createVNode(Icon, {
+      "name": "plus"
+    }, null)]) : null, slots.more ? createVNode(Fragment, null, [createVNode("button", mergeProps({
+      "type": "button",
+      "class": "mh-tabbar__tab mh-tabbar__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 {
+  TabBar
+};