@manohub/ui 0.7.0 → 0.8.0

package/dist/components/tabset/index.js

@@ -1,75 +0,0 @@
-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
-    }
-  },
-  /* 同 `Tabs`：受控值必须 emit 回 `update:value`，否则 `v-model:value="current"` 静默失效
-     （受控时内部状态不更新、外部又收不到 ⇒ 点选项毫无反应）。 */
-  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 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 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
-};

package/dist/styles/components/tabs.tokens.css

@@ -1,30 +0,0 @@
-/**
- * tabs —— 单件令牌（**基础值**）。
- *
- * 本件自己的几何 / 尺寸 / 色彩槽位；只服务本件，故不随主题进 `@manohub/theme`。
- *
- * ## 抽出说明
- * 本文件从面文件里抽出（原先混写在 `tabs.css` 顶部）：这些是**基础值**，锚在
- * `[data-manohub-ui]` —— 跨包唯一作用域锚，由入口层无条件写在应用容器上，因此**任何落在
- * 容器里的分件都取得到值**，不再依赖「声明在某个组件根类上」这条脆弱假设
- * （历史症状：跨件消费的 `--ui-*-group-*` 取不到值，组内间距变 0）。
- *
- * ⚠️ `.mh-<件>--<档>` 这类**档位改写**留在面文件的修饰符块里 —— 它们靠「同一元素上两个
- * 选择器改写同一个令牌」生效，搬到本文件会让档位失效。
- * ⚠️ 新增组件要登记两处：本文件 + `src/styles/index.css`（见其文件头「五处齐备」）。
- */
-[data-manohub-ui] {
-  /* 单件令牌 */
-  --ui-tabs-height: var(--ui-control-height-md); /* 标准控件高 32 */
-  --ui-tabs-gap: 30px; /* 项间距（规范实测） */
-  --ui-tabs-font-size: var(--ui-font-body);
-  --ui-tabs-text: var(--ui-base-content); /* 规范未选档 #446a9f（偏蓝的正文色），本仓取正文色 */
-  --ui-tabs-text-hover: var(--ui-primary-hover); /* 规范 #529dff */
-  --ui-tabs-text-active: var(--ui-primary); /* 规范 #4e94ff */
-  --ui-tabs-text-disabled: var(--ui-base-content-subtle); /* 规范 Te07 */
-  --ui-tabs-indicator: var(--ui-primary);
-  --ui-tabs-indicator-gap: 3px; /* 指示条与文字的留白 */
-  --ui-tabs-indicator-height: 3px;
-  --ui-tabs-indicator-radius: var(--ui-radius-full);
-  --ui-tabs-card-padding-x: var(--ui-space-4);
-}

package/dist/styles/operations/tabset.css

@@ -1,57 +0,0 @@
-/**
- * 操作层 · 面板切换（把「一组同名 radio + 对应面板」接起来；零 JS，**只给操作、不给面**）。
- *
- * 出处：`@aihub/theme` 的 `playground/components/tabset.css`。
- * 映射：`--mh-*` → `--ui-*`；类名加 `.mh-` 前缀。
- *
- * 与折叠 / 浮层同一路数：本层只做三件事 —— ① 根（条带 → 面板的呼吸位）② 面板钩子与默认收起
- * ③ 档位表（第 n 个开关 ↔ 第 n 个面板）。
- * 开关的隐身与焦点环**归皮肤族**（谁家的选择控件谁自己画：胶囊见 `styles/components/capsule.css`），
- * 本层不碰 —— 这样同一层能伺候任意选择控件（胶囊 / 分段按钮 / 单选卡片 / 向导步骤），换皮肤不必动本文件。
- *
- * **与皮肤零互指**（两层连接点全部走原生元素，谁都不引用对方的类）：
- *   · 皮肤键在 `input:checked + <自家项>`（原生路径）与 `[data-state='active']`（组件路径）上；
- *   · 本层只认 `input` 与面板的**顺序**，不认任何皮肤类名。
- *
- * 结构契约（开关与项平级相邻、开关在前；面板组顺序与开关**一一对应**）：
- *   <div class="mh-tabset">
- *     <div class="[皮肤：轨道/选择控件]">
- *       <input type="radio" name="t1" id="t1a" checked>
- *       <label class="[皮肤项]" for="t1a">全部</label>
- *       <input type="radio" name="t1" id="t1b">
- *       <label class="[皮肤项]" for="t1b">进行中</label>
- *     </div>
- *     <div class="mh-tabset-panels">
- *       <section class="mh-tabset-panel [皮肤类]">…</section>
- *     </div>
- *   </div>
- *
- * 禁写（与折叠 / 浮层同款）：底 / 边 / 圆角 / 内距 / 宽高 / 字号 / 阴影 —— 写了就顶掉皮肤族属性面。
- * 面板的面与几何由皮肤族给（卡片一类），本层只写「哪一个显形」与根上的呼吸位。
- */
-
-/* ===== 操作根：选择控件在上、面板在下 ===== */
-.mh-tabset {
-  display: flex;
-  flex-direction: column;
-  gap: var(--ui-space-4); /* 控件 → 面板的呼吸位 12px */
-}
-
-/* ===== 面板显隐：档位表（上限 8 档） ===== */
-/* 第 n 个开关 ↔ 第 n 个面板。写不出通式：CSS 没有「按被勾选开关的序号去选同序面板」的选择器
-   （树的缩进档位表同一路数）。超过 8 个请扩表，或改走组件路径由 JS 下发 hidden。
-   注：`input:nth-of-type(n)` 按「同一父级里的第 n 个 input」计数 —— 故开关须集中在同一个轨道容器内。 */
-.mh-tabset-panel {
-  display: none;
-}
-
-.mh-tabset:has(input:nth-of-type(1):checked) .mh-tabset-panels > :nth-child(1),
-.mh-tabset:has(input:nth-of-type(2):checked) .mh-tabset-panels > :nth-child(2),
-.mh-tabset:has(input:nth-of-type(3):checked) .mh-tabset-panels > :nth-child(3),
-.mh-tabset:has(input:nth-of-type(4):checked) .mh-tabset-panels > :nth-child(4),
-.mh-tabset:has(input:nth-of-type(5):checked) .mh-tabset-panels > :nth-child(5),
-.mh-tabset:has(input:nth-of-type(6):checked) .mh-tabset-panels > :nth-child(6),
-.mh-tabset:has(input:nth-of-type(7):checked) .mh-tabset-panels > :nth-child(7),
-.mh-tabset:has(input:nth-of-type(8):checked) .mh-tabset-panels > :nth-child(8) {
-  display: block;
-}