@manohub/ui 0.6.0

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

@@ -0,0 +1,252 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+import type { ControlSize } from '../control-size';
+import { type InputStatus } from '../input';
+export interface SelectOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+    /** 分组标题用的标记（内部判别用，消费方不必写） */
+    options?: never;
+}
+/** 分组选项（`{ label: '进行中', options: [...] }`，组内选项与平铺选项同构） */
+export interface SelectOptionGroup {
+    label: string;
+    options: SelectOption[];
+}
+export type SelectItem = SelectOption | SelectOptionGroup;
+export type SelectValue = string | number | Array<string | number>;
+/**
+ * 选择器（**自绘**，不封装 farris）。
+ *
+ * ## 触发器复用的是输入框的「触发器形态」（不自绘框）
+ *
+ * 触发器由 `<Input as="button">` 渲染 —— 框 / 内距 / 边 / 圆角 / 字号 / hover / 聚焦 / 禁用 /
+ * 校验色（红·黄）/ **内建清除位** / **右侧图标位**全部来自输入面与它的表壳，本件只提供值 / 标签的排版。
+ * 好处是「像输入框」这件事只剩一份规格（改输入框即自动跟随），且清除与右侧图标不必再自绘一套。
+ * 三条落点各有其处：`class` → 表壳（显式锚 + 本件对壳的微调）、`controlClass` → 壳内控件（本件排版类）、
+ * `controlAttrs` → 控件上的原生语义与键盘契约（`popovertarget` / `aria-*` / `keydown`）。
+ * 触发器仍是原生 `<button>`（`popovertarget` 只认 button），故零 JS 开合与隐式锚路径不变；
+ * 面板改挂 `mh-popup--anchored`：锚显式钉在**表壳**上 —— 否则隐式锚会缩成壳内控件，
+ * 面板不再与整件同宽（`anchor-size(width)` 取的是锚的宽）。
+ *
+ * ## 浮层边界（与「popup 只给零 JS 面」的取舍一致）
+ *
+ * 面板走**原生 popover**：`<button popovertarget>` + `<div popover>`，开合 / Esc / 点外部关闭 /
+ * 顶层渲染 / 定位档全部由浏览器与 `styles/operations/popup.css` 承担，本件**不实现**第二套浮层行为
+ * （不做 JS 定位、不做 resize 监听）。本件只补原生做不到的：选中值回填、多选数组的增删与收纳、
+ * 搜索过滤与「创建」项、以及键盘的下拉导航（↑↓ 移动高亮行）。
+ *
+ * ## 状态三源等价
+ *
+ * 选中行 = `[data-state='selected']`（组件下发）/ 原生 `input:checked`（静态页零 JS 路径）/
+ * `.is-selected`（规格冻结档），样式层只写一份声明。
+ *
+ * @example 单选
+ * <Select options={opts} modelValue={v} placeholder="请选择" onChange={setV} />
+ *
+ * @example 多选（超出 maxTagCount 收纳成「其他 n 项」）
+ * <Select multiple maxTagCount={2} options={opts} modelValue={list} onChange={setList} />
+ *
+ * @example 分组 + 搜索 + 可创建
+ * <Select searchable allowCreate multiple options={grouped} modelValue={list} onChange={setList} />
+ */
+export declare const Select: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    /** 选项表（平铺项与分组项可混用） */
+    options: {
+        type: PropType<SelectItem[]>;
+        default: () => never[];
+    };
+    /** 受控值（多选时是数组） */
+    modelValue: {
+        type: PropType<SelectValue | undefined>;
+        default: undefined;
+    };
+    /** 非受控初始值 */
+    defaultValue: {
+        type: PropType<SelectValue | undefined>;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 多选（值变数组，选中项渲染成标签） */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 多选时最多显示几个标签，其余收纳（0 = 不限） */
+    maxTagCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 收纳标签的文案（`{count}` 会被替换成条数）；缺省「其他 n 项」 */
+    maxTagPlaceholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 搜索：`true` 强制开；不给时选项多于 8 条自动开 */
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 自定义过滤（缺省按 `label.includes(keyword)`） */
+    filterOption: {
+        type: PropType<(option: SelectOption, keyword: string) => boolean>;
+        default: undefined;
+    };
+    /** 可创建：搜索词无命中时出现「创建 xxx」（仅多选有意义） */
+    allowCreate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档（24 / 28 / 32） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 校验状态（红 / 黄；与 Input 同一词表） */
+    status: {
+        type: PropType<InputStatus>;
+        default: undefined;
+    };
+    /** 加载中（面板里出一行提示，不渲染选项） */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    emptyText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 值变更回调；参数为新值（多选为数组） */
+    onChange: {
+        type: PropType<(v: SelectValue) => void>;
+        default: undefined;
+    };
+    /** 搜索词变更（用于远程搜索：拿到关键词自己去换 options） */
+    onSearch: {
+        type: PropType<(keyword: string) => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (v: SelectValue) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 选项表（平铺项与分组项可混用） */
+    options: {
+        type: PropType<SelectItem[]>;
+        default: () => never[];
+    };
+    /** 受控值（多选时是数组） */
+    modelValue: {
+        type: PropType<SelectValue | undefined>;
+        default: undefined;
+    };
+    /** 非受控初始值 */
+    defaultValue: {
+        type: PropType<SelectValue | undefined>;
+        default: undefined;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 多选（值变数组，选中项渲染成标签） */
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 多选时最多显示几个标签，其余收纳（0 = 不限） */
+    maxTagCount: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** 收纳标签的文案（`{count}` 会被替换成条数）；缺省「其他 n 项」 */
+    maxTagPlaceholder: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 搜索：`true` 强制开；不给时选项多于 8 条自动开 */
+    searchable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 自定义过滤（缺省按 `label.includes(keyword)`） */
+    filterOption: {
+        type: PropType<(option: SelectOption, keyword: string) => boolean>;
+        default: undefined;
+    };
+    /** 可创建：搜索词无命中时出现「创建 xxx」（仅多选有意义） */
+    allowCreate: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 尺寸档（24 / 28 / 32） */
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    /** 校验状态（红 / 黄；与 Input 同一词表） */
+    status: {
+        type: PropType<InputStatus>;
+        default: undefined;
+    };
+    /** 加载中（面板里出一行提示，不渲染选项） */
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    emptyText: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 值变更回调；参数为新值（多选为数组） */
+    onChange: {
+        type: PropType<(v: SelectValue) => void>;
+        default: undefined;
+    };
+    /** 搜索词变更（用于远程搜索：拿到关键词自己去换 options） */
+    onSearch: {
+        type: PropType<(keyword: string) => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((v: SelectValue) => any) | undefined;
+}>, {
+    size: ControlSize;
+    multiple: boolean;
+    disabled: boolean;
+    onChange: (v: SelectValue) => void;
+    loading: boolean;
+    options: SelectItem[];
+    defaultValue: SelectValue | undefined;
+    placeholder: string;
+    modelValue: SelectValue | undefined;
+    status: InputStatus;
+    clearable: boolean;
+    onSearch: (keyword: string) => void;
+    maxTagCount: number;
+    maxTagPlaceholder: string;
+    searchable: boolean;
+    filterOption: (option: SelectOption, keyword: string) => boolean;
+    allowCreate: boolean;
+    emptyText: string;
+}, SlotsType<{
+    empty?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/select/index.js

@@ -0,0 +1,281 @@
+import { defineComponent, ref, computed, createVNode, Fragment, mergeProps, createTextVNode } from "vue";
+import { Icon } from "@manohub/icon";
+import { Input } from "../input/index.js";
+const isGroup = (item) => Array.isArray(item.options);
+const Select = /* @__PURE__ */ defineComponent({
+  name: "Select",
+  inheritAttrs: false,
+  props: {
+    /** 选项表（平铺项与分组项可混用） */
+    options: {
+      type: Array,
+      default: () => []
+    },
+    /** 受控值（多选时是数组） */
+    modelValue: {
+      type: [String, Number, Array],
+      default: void 0
+    },
+    /** 非受控初始值 */
+    defaultValue: {
+      type: [String, Number, Array],
+      default: void 0
+    },
+    placeholder: {
+      type: String,
+      default: "请选择"
+    },
+    /** 多选（值变数组，选中项渲染成标签） */
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    /** 多选时最多显示几个标签，其余收纳（0 = 不限） */
+    maxTagCount: {
+      type: Number,
+      default: 3
+    },
+    /** 收纳标签的文案（`{count}` 会被替换成条数）；缺省「其他 n 项」 */
+    maxTagPlaceholder: {
+      type: String,
+      default: void 0
+    },
+    /** 搜索：`true` 强制开；不给时选项多于 8 条自动开 */
+    searchable: {
+      type: Boolean,
+      default: false
+    },
+    /** 自定义过滤（缺省按 `label.includes(keyword)`） */
+    filterOption: {
+      type: Function,
+      default: void 0
+    },
+    /** 可创建：搜索词无命中时出现「创建 xxx」（仅多选有意义） */
+    allowCreate: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** 尺寸档（24 / 28 / 32） */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** 校验状态（红 / 黄；与 Input 同一词表） */
+    status: {
+      type: String,
+      default: void 0
+    },
+    /** 加载中（面板里出一行提示，不渲染选项） */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    emptyText: {
+      type: String,
+      default: "暂无数据"
+    },
+    /** 值变更回调；参数为新值（多选为数组） */
+    onChange: {
+      type: Function,
+      default: void 0
+    },
+    /** 搜索词变更（用于远程搜索：拿到关键词自己去换 options） */
+    onSearch: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": (v) => true
+  },
+  slots: Object,
+  setup(props, {
+    emit,
+    slots,
+    attrs
+  }) {
+    const panelId = `mh-select-${Math.random().toString(36).slice(2, 10)}`;
+    const panelRef = ref(null);
+    const inner = ref(props.defaultValue);
+    const keyword = ref("");
+    const current = computed(() => props.modelValue ?? inner.value);
+    const selectedValues = computed(() => {
+      const value = current.value;
+      if (value === void 0 || value === null || value === "") return [];
+      return Array.isArray(value) ? value : [value];
+    });
+    const flatOptions = computed(() => {
+      const list = [];
+      for (const item of props.options) {
+        if (isGroup(item)) list.push(...item.options);
+        else list.push(item);
+      }
+      return list;
+    });
+    const selectedOptions = computed(() => flatOptions.value.filter((option) => selectedValues.value.includes(option.value)));
+    const showSearch = computed(() => props.searchable || flatOptions.value.length > 8);
+    const matched = (option, kw) => props.filterOption ? props.filterOption(option, kw) : option.label.includes(kw);
+    const visibleOptions = computed(() => {
+      const kw = keyword.value;
+      if (!kw) return props.options;
+      const result = [];
+      for (const item of props.options) {
+        if (isGroup(item)) {
+          const kept = item.options.filter((option) => matched(option, kw));
+          if (kept.length) result.push({
+            label: item.label,
+            options: kept
+          });
+        } else if (matched(item, kw)) {
+          result.push(item);
+        }
+      }
+      return result;
+    });
+    const creatable = computed(() => props.allowCreate && props.multiple && !!keyword.value && !flatOptions.value.some((option) => option.label === keyword.value));
+    const visibleTags = computed(() => props.maxTagCount > 0 ? selectedOptions.value.slice(0, props.maxTagCount) : selectedOptions.value);
+    const foldedCount = computed(() => selectedOptions.value.length - visibleTags.value.length);
+    const foldText = computed(() => props.maxTagPlaceholder ? props.maxTagPlaceholder.replace("{count}", String(foldedCount.value)) : `其他 ${foldedCount.value} 项`);
+    const commit = (value) => {
+      if (props.modelValue === void 0) inner.value = value;
+      emit("update:modelValue", value);
+      props.onChange?.(value);
+    };
+    const hidePanel = () => panelRef.value?.hidePopover?.();
+    const pick = (option) => {
+      if (option.disabled) return;
+      if (props.multiple) {
+        const next = selectedValues.value.includes(option.value) ? selectedValues.value.filter((value) => value !== option.value) : [...selectedValues.value, option.value];
+        commit(next);
+        return;
+      }
+      commit(option.value);
+      hidePanel();
+    };
+    const createFromKeyword = () => {
+      const value = keyword.value.trim();
+      if (!value) return;
+      commit([...selectedValues.value, value]);
+      keyword.value = "";
+    };
+    const clear = () => commit(props.multiple ? [] : "");
+    const optionEls = () => panelRef.value ? [...panelRef.value.querySelectorAll(".mh-select__option")].filter((el) => !el.disabled) : [];
+    const moveFocus = (step) => {
+      const items = optionEls();
+      if (!items.length) return;
+      const at = items.indexOf(document.activeElement);
+      const next = at < 0 ? step > 0 ? 0 : items.length - 1 : (at + step + items.length) % items.length;
+      items[next].focus();
+    };
+    const onTriggerKeydown = (event) => {
+      if (event.key === "Delete" && props.clearable) clear();
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (!props.disabled) {
+          panelRef.value?.showPopover?.();
+          requestAnimationFrame(() => moveFocus(event.key === "ArrowDown" ? 0 : -1));
+        }
+      }
+    };
+    const onPanelKeydown = (event) => {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        moveFocus(event.key === "ArrowDown" ? 1 : -1);
+      }
+    };
+    const renderOption = (option) => createVNode("button", {
+      "key": String(option.value),
+      "type": "button",
+      "class": ["mh-select__option", option.disabled ? "is-disabled" : ""].filter(Boolean).join(" "),
+      "data-state": selectedValues.value.includes(option.value) ? "selected" : "unselected",
+      "disabled": option.disabled,
+      "role": "option",
+      "aria-selected": selectedValues.value.includes(option.value) ? "true" : "false",
+      "onClick": () => pick(option)
+    }, [option.label]);
+    return () => {
+      const hasValue = selectedValues.value.length > 0;
+      return createVNode("div", {
+        "class": ["mh-popup-host", attrs.class].filter(Boolean).join(" "),
+        "style": attrs.style
+      }, [createVNode(Input, {
+        "as": "button",
+        "size": props.size,
+        "status": props.status,
+        "disabled": props.disabled,
+        "clearable": props.clearable,
+        "hasValue": hasValue,
+        "class": "mh-popup-anchor mh-select-host",
+        "controlClass": ["mh-select", props.multiple ? "mh-select--multiple" : "", props.size === "md" ? "" : `mh-select--${props.size}`].filter(Boolean).join(" "),
+        "controlAttrs": {
+          popovertarget: panelId,
+          "aria-haspopup": "listbox",
+          "aria-expanded": "false",
+          onKeydown: onTriggerKeydown
+        },
+        "onChange": clear
+      }, {
+        default: () => props.multiple ? createVNode(Fragment, null, [visibleTags.value.map((option) => createVNode("span", {
+          "key": String(option.value),
+          "class": "mh-select__chip"
+        }, [option.label])), foldedCount.value > 0 ? createVNode("span", {
+          "class": "mh-select__chip mh-select__chip--fold"
+        }, [foldText.value]) : null, !hasValue ? createVNode("span", {
+          "class": "mh-select__value mh-select__value--placeholder"
+        }, [props.placeholder]) : null]) : createVNode("span", {
+          "class": ["mh-select__value", hasValue ? "" : "mh-select__value--placeholder"].filter(Boolean).join(" ")
+        }, [selectedOptions.value[0]?.label ?? props.placeholder]),
+        /* 箭头沿用输入框的右侧图标位（本次不开放自定义入口） */
+        suffix: () => createVNode(Icon, {
+          "name": "chevron-down",
+          "class": "mh-select__caret mh-popup-caret"
+        }, null)
+      }), createVNode("div", mergeProps({
+        "ref": panelRef,
+        "id": panelId
+      }, {
+        popover: "auto"
+      }, {
+        "class": "mh-popup mh-select__panel mh-popup--anchored",
+        "data-side": "bottom",
+        "data-align": "start",
+        "role": "listbox",
+        "onKeydown": onPanelKeydown
+      }), [showSearch.value ? createVNode("div", {
+        "class": "mh-select__search"
+      }, [createVNode("input", {
+        "class": "mh-input",
+        "value": keyword.value,
+        "placeholder": "搜索",
+        "onInput": (event) => {
+          keyword.value = event.target.value;
+          props.onSearch?.(keyword.value);
+        }
+      }, null)]) : null, props.loading ? createVNode("span", {
+        "class": "mh-select__option mh-select__option--hint"
+      }, [createTextVNode("加载中…")]) : visibleOptions.value.length === 0 && !creatable.value ? slots.empty ? slots.empty() : createVNode("span", {
+        "class": "mh-select__option mh-select__option--empty"
+      }, [props.emptyText]) : createVNode(Fragment, null, [visibleOptions.value.map((item, index) => isGroup(item) ? createVNode("div", {
+        "key": `group-${index}`,
+        "class": "mh-select__group"
+      }, [createVNode("span", {
+        "class": "mh-select__group-label"
+      }, [item.label]), item.options.map((option) => renderOption(option))]) : renderOption(item)), creatable.value ? createVNode("button", {
+        "type": "button",
+        "class": "mh-select__option mh-select__add",
+        "onClick": createFromKeyword
+      }, [createTextVNode("创建「"), keyword.value.trim(), createTextVNode("」")]) : null])])]);
+    };
+  }
+});
+export {
+  Select
+};

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

@@ -0,0 +1,88 @@
+import { type PropType, type SlotsType, type VNodeChild } from 'vue';
+export interface SkeletonProps {
+    /** 行数（缺省 1；行间距由样式层的 `--ui-skeleton-gap` 给） */
+    rows?: number;
+    /** 块状档：给一段区间的占位（高由内容/`height` 决定，不再按行高定尺） */
+    block?: boolean;
+    /** 行宽（缺省 100%；传数字按 px） */
+    width?: string | number;
+    /** 行高（缺省与行高一致；传数字按 px） */
+    height?: string | number;
+    /** 胶囊档：圆角取满（标签 / 头像 / 次按钮的占位） */
+    round?: boolean;
+    /** 是否开启微光动画（缺省开；静态摆样、截图与打印时关掉） */
+    active?: boolean;
+}
+/**
+ * 骨架屏（骨架行 / 列表骨架 / 块状骨架）。
+ *
+ * 微光动画与色值在本包**只有一份**（`styles/components/skeleton.css` 的 `--ui-skeleton-*` 与
+ * `@keyframes mh-skeleton-shimmer`），`QueryState` 的加载态复用它 —— 别处不要再写一份
+ * （两处各写一份必然漂，同一屏会出现两种呼吸节奏）。
+ *
+ * @example 列表骨架（5 行）
+ * <Skeleton :rows="5" />
+ *
+ * @example 卡片体占位
+ * <Skeleton block height={120} />
+ */
+export declare const Skeleton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    rows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    height: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    round: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    rows: {
+        type: NumberConstructor;
+        default: number;
+    };
+    block: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    width: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    height: {
+        type: PropType<string | number>;
+        default: undefined;
+    };
+    round: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    round: boolean;
+    block: boolean;
+    active: boolean;
+    width: string | number;
+    height: string | number;
+    rows: number;
+}, SlotsType<{
+    default?: () => VNodeChild;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/skeleton/index.js

@@ -0,0 +1,56 @@
+import { defineComponent, createVNode } from "vue";
+const Skeleton = /* @__PURE__ */ defineComponent({
+  name: "Skeleton",
+  inheritAttrs: false,
+  props: {
+    rows: {
+      type: Number,
+      default: 1
+    },
+    block: {
+      type: Boolean,
+      default: false
+    },
+    width: {
+      type: [String, Number],
+      default: void 0
+    },
+    height: {
+      type: [String, Number],
+      default: void 0
+    },
+    round: {
+      type: Boolean,
+      default: false
+    },
+    active: {
+      type: Boolean,
+      default: true
+    }
+  },
+  slots: Object,
+  setup(props, {
+    attrs
+  }) {
+    const px = (value) => value === void 0 ? void 0 : typeof value === "number" ? `${value}px` : value;
+    return () => {
+      const style = {};
+      if (px(props.width)) style.width = px(props.width);
+      if (px(props.height)) style.height = px(props.height);
+      const count = props.block ? 1 : Math.max(1, Math.floor(props.rows));
+      return createVNode("div", {
+        "class": ["mh-skeleton-list", props.active ? "" : "mh-skeleton-list--static", attrs.class].filter(Boolean).join(" "),
+        "style": attrs.style
+      }, [Array.from({
+        length: count
+      }, (_, index) => createVNode("div", {
+        "key": index,
+        "class": ["mh-skeleton", props.block ? "mh-skeleton--block" : "", props.round ? "mh-skeleton--round" : ""].filter(Boolean).join(" "),
+        "style": style
+      }, null))]);
+    };
+  }
+});
+export {
+  Skeleton
+};