@manohub/ui 0.6.0

package/dist/components/radio/index.js

@@ -0,0 +1,250 @@
+import { defineComponent, createVNode, ref, computed } from "vue";
+const Radio = /* @__PURE__ */ defineComponent({
+  name: "Radio",
+  inheritAttrs: false,
+  props: {
+    value: {
+      type: [String, Number],
+      required: true
+    },
+    label: {
+      type: String,
+      default: void 0
+    },
+    name: {
+      type: String,
+      default: void 0
+    },
+    checked: {
+      type: Boolean,
+      default: void 0
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    /** 自动聚焦 */
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    onChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  slots: Object,
+  setup(props, {
+    slots,
+    attrs
+  }) {
+    return () => createVNode("label", {
+      "class": ["mh-radio", props.size === "md" ? "" : `mh-radio--${props.size}`, props.disabled ? "is-disabled" : void 0, attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [createVNode("input", {
+      "class": "mh-radio__input",
+      "type": "radio",
+      "name": props.name,
+      "value": props.value,
+      "checked": props.checked,
+      "disabled": props.disabled,
+      "autofocus": props.autofocus,
+      "onChange": () => props.onChange?.(props.value)
+    }, null), createVNode("span", {
+      "class": "mh-radio__box",
+      "data-state": props.checked ? "checked" : "unchecked"
+    }, null), createVNode("span", {
+      "class": "mh-radio__label"
+    }, [slots.default ? slots.default() : props.label])]);
+  }
+});
+function useGroupValue(props, firstSelectable, isBlocked, report) {
+  const inner = ref(props.defaultValue);
+  const current = computed(() => props.modelValue ?? inner.value ?? firstSelectable());
+  const select = (value) => {
+    if (isBlocked(value)) return;
+    if (props.modelValue === void 0) inner.value = value;
+    report(value);
+  };
+  return {
+    current,
+    select
+  };
+}
+const RadioGroup = /* @__PURE__ */ defineComponent({
+  name: "RadioGroup",
+  inheritAttrs: false,
+  props: {
+    options: {
+      type: Array,
+      default: void 0
+    },
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    defaultValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    name: {
+      type: String,
+      default: void 0
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    onChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": (value) => true
+  },
+  slots: Object,
+  setup(props, {
+    emit,
+    slots,
+    attrs
+  }) {
+    const fallbackName = `mh-radio-${Math.random().toString(36).slice(2, 10)}`;
+    const {
+      current,
+      select
+    } = useGroupValue(
+      props,
+      // 缺省值：第一个**可选项**（跳过禁用项）
+      () => props.options?.find((option) => !option.disabled)?.value,
+      (value) => props.disabled || !!props.options?.find((option) => option.value === value)?.disabled,
+      (value) => {
+        emit("update:modelValue", value);
+        props.onChange?.(value);
+      }
+    );
+    return () => createVNode("div", {
+      "class": ["mh-radio-group", props.vertical ? "mh-radio-group--vertical" : void 0, attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [slots.default ? slots.default({
+      value: current.value,
+      select
+    }) : props.options?.map((option) => createVNode(Radio, {
+      "key": String(option.value),
+      "name": props.name ?? fallbackName,
+      "value": option.value,
+      "label": option.label,
+      "checked": option.value === current.value,
+      "disabled": props.disabled || option.disabled,
+      "size": props.size,
+      "onChange": select
+    }, null))]);
+  }
+});
+const RadioCard = /* @__PURE__ */ defineComponent({
+  name: "RadioCard",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    defaultValue: {
+      type: [String, Number],
+      default: void 0
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    /** 每行几个（>1 时走等宽网格；缺省 1 列堆叠） */
+    columns: {
+      type: Number,
+      default: 1
+    },
+    /** 整组禁用（与单项 `disabled` 叠加） */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    onChange: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": (value) => true
+  },
+  setup(props, {
+    emit,
+    attrs
+  }) {
+    const groupName = `mh-radio-card-${Math.random().toString(36).slice(2, 10)}`;
+    const {
+      current,
+      select
+    } = useGroupValue(
+      props,
+      // 缺省值：第一个**可选项**（跳过禁用项）
+      () => props.items.find((item) => !item.disabled)?.value,
+      (value) => props.disabled || !!props.items.find((item) => item.value === value)?.disabled,
+      (value) => {
+        emit("update:modelValue", value);
+        props.onChange?.(value);
+      }
+    );
+    return () => createVNode("div", {
+      "class": ["mh-radio-card", props.columns > 1 ? "mh-radio-card--grid" : "", attrs.class].filter(Boolean).join(" "),
+      "style": props.columns > 1 ? {
+        ...attrs.style,
+        "--ui-radio-card-columns": String(props.columns)
+      } : attrs.style,
+      "role": "radiogroup"
+    }, [props.items.map((item) => {
+      const isDisabled = props.disabled || !!item.disabled;
+      const isChecked = current.value === item.value;
+      return createVNode("label", {
+        "class": "mh-radio-card__item",
+        "key": String(item.value),
+        "data-state": isChecked ? "checked" : "unchecked",
+        "data-disabled": isDisabled ? "true" : "false"
+      }, [createVNode("input", {
+        "class": "mh-radio-card__input",
+        "type": "radio",
+        "name": groupName,
+        "value": String(item.value),
+        "checked": isChecked,
+        "disabled": isDisabled,
+        "onChange": () => select(item.value)
+      }, null), createVNode("span", {
+        "class": "mh-radio-card__radio",
+        "aria-hidden": "true"
+      }, null), createVNode("span", {
+        "class": "mh-radio-card__body"
+      }, [createVNode("span", {
+        "class": "mh-radio-card__label"
+      }, [item.label]), item.description ? createVNode("span", {
+        "class": "mh-radio-card__desc"
+      }, [item.description]) : null])]);
+    })]);
+  }
+});
+Object.assign(Radio, {
+  Group: RadioGroup,
+  Card: RadioCard
+});
+export {
+  Radio
+};

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

@@ -0,0 +1,167 @@
+import { type PropType } from 'vue';
+import type { ControlSize } from '../control-size';
+export interface SearchProps {
+    /** 受控值 */
+    modelValue?: string;
+    /** 非受控初始值 */
+    defaultValue?: string;
+    /** 占位文案（缺省「请输入关键字」） */
+    placeholder?: string;
+    /** 尺寸档（输入框与按钮同档，不会出现一高一矮） */
+    size?: ControlSize;
+    disabled?: boolean;
+    /** 有内容时显示清除位（缺省开） */
+    clearable?: boolean;
+    /** 搜索中：按钮进加载态并吞掉重复点击 */
+    loading?: boolean;
+    /** 搜索按钮文案；**不传即纯图标按钮**（窄工具条里的形态） */
+    searchText?: string;
+    /** 值变更回调（每次输入都调，含清空） */
+    onChange?: (value: string) => void;
+    /** 搜索触发（点搜索按钮 / 输入框内回车） */
+    onSearch?: (value: string) => void;
+    /** 清空回调（**由非空变空**时补发一次，值变化由 `onChange` 走） */
+    onClear?: () => void;
+}
+/**
+ * 搜索框（**自绘**；输入框 + 搜索触发位的组合件）。
+ *
+ * ## 为什么不是 `Input` 的一个档，而是单独一件
+ *
+ * 搜索语义有两件 `Input` 不该背的事：
+ * ① **触发是显式的**（回车与点按钮都算一次「搜索」，与「值变了」不是同一件事）——
+ *    调用方要的是「提交时查一次」，而不是「每敲一个字查一次」；
+ * ② **清空是一个独立事件**（由非空变空时补发 `onClear`）——这是上游控件长期的坑
+ *    （清空只改值、不发触发），每处调用都自己写 watch 兜底。
+ * 本件把这两条收进一处：`onChange` 管值、`onSearch` / `onClear` 管动作。
+ *
+ * ## 复用而不是重画
+ *
+ * 输入框那一段**就是本包的 `Input`**（框、内距、清除位、聚焦态、禁用态、`aria-invalid`
+ * 全部沿用输入框面），本件只加「一行里怎么摆」与搜索按钮 —— 不另写一份输入框几何
+ * （两份几何必然在改令牌时漂开）。
+ *
+ * ## 受控口径（与全库同款）
+ *
+ * 传 `modelValue` 即受控（`update:modelValue` 与 `onChange` 双走），不传即非受控（由 `defaultValue` 起）。
+ *
+ * @example 最简（图标按钮）
+ * <Search modelValue={kw} onChange={setKw} onSearch={apply} />
+ *
+ * @example 带文案的搜索按钮 + 清空动作
+ * <Search
+ *   modelValue={kw}
+ *   placeholder="搜索技能名称"
+ *   search-text="搜索"
+ *   onChange={setKw}
+ *   onSearch={apply}
+ *   onClear={() => apply('')}
+ * />
+ */
+export declare const Search: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<(value: string) => void>;
+        default: undefined;
+    };
+    onSearch: {
+        type: PropType<(value: string) => void>;
+        default: undefined;
+    };
+    onClear: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:modelValue': (value: string) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    defaultValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    size: {
+        type: PropType<ControlSize>;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    clearable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    searchText: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    onChange: {
+        type: PropType<(value: string) => void>;
+        default: undefined;
+    };
+    onSearch: {
+        type: PropType<(value: string) => void>;
+        default: undefined;
+    };
+    onClear: {
+        type: PropType<() => void>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {
+    size: ControlSize;
+    disabled: boolean;
+    onChange: (value: string) => void;
+    loading: boolean;
+    defaultValue: string;
+    placeholder: string;
+    modelValue: string;
+    clearable: boolean;
+    searchText: string;
+    onSearch: (value: string) => void;
+    onClear: () => void;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/search/index.js

@@ -0,0 +1,105 @@
+import { defineComponent, ref, computed, createVNode } from "vue";
+import { Icon } from "@manohub/icon";
+import { Button } from "../button/index.js";
+import { Input } from "../input/index.js";
+const Search = /* @__PURE__ */ defineComponent({
+  name: "Search",
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: String,
+      default: void 0
+    },
+    defaultValue: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: "请输入关键字"
+    },
+    size: {
+      type: String,
+      default: "md"
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    searchText: {
+      type: String,
+      default: void 0
+    },
+    onChange: {
+      type: Function,
+      default: void 0
+    },
+    onSearch: {
+      type: Function,
+      default: void 0
+    },
+    onClear: {
+      type: Function,
+      default: void 0
+    }
+  },
+  emits: {
+    "update:modelValue": (value) => true
+  },
+  setup(props, {
+    emit,
+    attrs
+  }) {
+    const inner = ref(props.defaultValue);
+    const current = computed(() => props.modelValue ?? inner.value);
+    const commit = (value) => {
+      const next = value ?? "";
+      const cleared = next === "" && current.value !== "";
+      if (props.modelValue === void 0) inner.value = next;
+      emit("update:modelValue", next);
+      props.onChange?.(next);
+      if (cleared) props.onClear?.();
+    };
+    const search = () => props.onSearch?.(current.value ?? "");
+    return () => createVNode("div", {
+      "class": ["mh-search", attrs.class].filter(Boolean).join(" "),
+      "style": attrs.style
+    }, [createVNode(Input, {
+      "class": "mh-search__input",
+      "modelValue": current.value,
+      "size": props.size,
+      "disabled": props.disabled,
+      "placeholder": props.placeholder,
+      "clearable": props.clearable,
+      "onChange": commit,
+      "onEnter": search
+    }, {
+      prefix: () => createVNode(Icon, {
+        "name": "search"
+      }, null)
+    }), createVNode(Button, {
+      "class": "mh-search__btn",
+      "variant": props.searchText ? "primary" : "icon",
+      "size": props.size,
+      "icon": "search",
+      "disabled": props.disabled,
+      "loading": props.loading,
+      "title": props.searchText ? void 0 : "搜索",
+      "aria-label": props.searchText ? void 0 : "搜索",
+      "onClick": search
+    }, {
+      default: () => props.searchText
+    })]);
+  }
+});
+export {
+  Search
+};