@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.By4TdR07.d.ts

@@ -0,0 +1,327 @@
+import { PropType, InjectionKey, Ref, ComputedRef, defineComponent, toRef, computed, openBlock, createElementBlock, withModifiers, normalizeClass, renderSlot, useId, onMounted, normalizeStyle, createCommentVNode, createTextVNode, toDisplayString, createElementVNode } from 'vue';
+import { _ as _export_sfc } from './components.OJRSZE6i.js';
+
+/**
+ * QmForm / QmFormItem 组件类型定义（组件体系设计 §6.4：类型先行）
+ * 04-T11：标签布局（left/right/top）/ 行内 / 禁用 / 校验规则 / validate/reset/clear
+ */
+
+/** 标签位置 */
+type FormLabelPosition = 'left' | 'right' | 'top';
+/**
+ * 校验规则项（async-validator 风格子集）：
+ * - required：非空（undefined/null/空串/空数组）；
+ * - type：email / number / string；
+ * - min/max：字符串/数组长度；
+ * - pattern：正则匹配；
+ * - validator：自定义函数（支持 callback 风格与返回值风格，均可异步）。
+ */
+interface FormItemRule {
+    required?: boolean;
+    message?: string;
+    type?: 'email' | 'number' | 'string';
+    min?: number;
+    max?: number;
+    pattern?: RegExp;
+    validator?: (rule: FormItemRule, value: unknown, callback: (error?: Error | string | boolean | null) => void) => void | boolean | string | Error | Promise<boolean | string | Error | void>;
+    /** 触发时机（预留：当前 validate() 全量校验） */
+    trigger?: string | string[];
+}
+/** 校验规则表：prop → 规则数组 */
+type FormRules = Record<string, FormItemRule[]>;
+/** QmForm props 声明 */
+declare const formProps: {
+    /** 表单数据对象（QmFormItem 通过 prop 名取值） */
+    readonly model: {
+        readonly type: PropType<Record<string, unknown>>;
+        readonly default: () => {};
+    };
+    /** 标签宽度（string 原样 / number 转 px；空串时走 CSS Token --qm-form-label-width） */
+    readonly labelWidth: {
+        readonly type: PropType<string | number>;
+        readonly default: "";
+    };
+    /** 标签位置：left / right / top */
+    readonly labelPosition: {
+        readonly type: PropType<FormLabelPosition>;
+        readonly default: "right";
+    };
+    /** 行内表单（Item 横排） */
+    readonly inline: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 整表单禁用（视觉降权 + 交互提示，具体控件禁用需各自传入 disabled） */
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 校验规则表 */
+    readonly rules: {
+        readonly type: PropType<FormRules>;
+        readonly default: () => {};
+    };
+};
+/** QmFormItem props 声明 */
+declare const formItemProps: {
+    /** 标签文案 */
+    readonly label: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 字段名（从 form.model 取值 + 匹配 form.rules） */
+    readonly prop: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 必填标记（红 * + 必填校验；与 rules 中的 required 等效） */
+    readonly required: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+/** QmForm emits 声明 */
+interface FormEmits {
+    /** 提交时触发（已 preventDefault，可自行异步处理） */
+    submit: [event: Event];
+}
+
+/**
+ * useForm 行为层（04-T11）
+ *
+ * 职责（与视图解耦，可独立单测）：
+ * - 纯校验函数：validateRule / validateValue（required / type / min-max 长度 / pattern / validator）；
+ * - 表单上下文 provide/inject：model / rules / 布局 / disabled / 字段注册表；
+ * - useFormItem：从 form.model 按 prop 取值、合并（required + rules）校验、错误态维护、
+ *   resetField（回写 initialModel 快照）/ clearValidate；
+ * - 初始值快照：QmForm 挂载时深拷贝 model，作为 resetFields 基准。
+ */
+
+/** 是否为空值（undefined / null / 空串 / 空数组） */
+declare function isEmptyValue(value: unknown): boolean;
+/** 单条规则校验 → 错误文案（通过返回 null） */
+declare function validateRule(rule: FormItemRule, value: unknown): Promise<string | null>;
+/** 值 × 规则数组 → 错误文案列表（逐条收集，全部通过为空数组） */
+declare function validateValue(value: unknown, rules: FormItemRule[]): Promise<string[]>;
+/** 注册到表单的字段项（由 QmFormItem 提供） */
+interface FormFieldItem {
+    /** 字段名（getter 动态跟随 props.prop） */
+    prop: string;
+    validate: () => Promise<boolean>;
+    resetField: () => void;
+    clearValidate: () => void;
+}
+interface FormContext {
+    model: Ref<Record<string, unknown>>;
+    rules: Ref<FormRules>;
+    labelWidth: Ref<string | number>;
+    labelPosition: Ref<FormLabelPosition>;
+    inline: Ref<boolean>;
+    disabled: Ref<boolean>;
+    /** 初始值快照（resetFields 基准，挂载时深拷贝） */
+    initialModel: Record<string, unknown>;
+    fields: Ref<FormFieldItem[]>;
+    addField: (field: FormFieldItem) => void;
+    removeField: (field: FormFieldItem) => void;
+}
+/** provide/inject key */
+declare const FORM_KEY: InjectionKey<FormContext>;
+/**
+ * 深拷贝快照（resetFields 基准）：
+ * model 可能为 Vue 响应式代理 → 先 toRaw 解包；structuredClone 失败（含函数等非结构化数据）降级浅拷贝。
+ */
+declare function snapshotModel(model: Record<string, unknown>): Record<string, unknown>;
+interface UseFormProvideOptions {
+    model: Ref<Record<string, unknown>>;
+    rules: Ref<FormRules>;
+    labelWidth: Ref<string | number>;
+    labelPosition: Ref<FormLabelPosition>;
+    inline: Ref<boolean>;
+    disabled: Ref<boolean>;
+}
+declare function useFormProvide(options: UseFormProvideOptions): FormContext;
+interface UseFormItemOptions {
+    label: Ref<string>;
+    prop: Ref<string>;
+    required: Ref<boolean>;
+}
+interface UseFormItemReturn {
+    /** 表单上下文（不在 QmForm 内为 undefined） */
+    form: FormContext | undefined;
+    /** 当前字段值（form.model[prop]） */
+    value: ComputedRef<unknown>;
+    /** 错误文案（空串 = 无错误） */
+    errorMessage: Ref<string>;
+    /** 生效规则（required prop 合并进 rules） */
+    rules: ComputedRef<FormItemRule[]>;
+    /** 是否展示必填星标 */
+    showRequired: ComputedRef<boolean>;
+    /** 标签宽度样式（top 布局 / 空 labelWidth 时返回 undefined 走 CSS Token） */
+    labelStyle: ComputedRef<Record<string, string> | undefined>;
+    /** 校验当前字段（错误写入 errorMessage） */
+    validate: () => Promise<boolean>;
+    /** 重置字段值（回写初始快照）+ 清除错误 */
+    resetField: () => void;
+    /** 仅清除错误 */
+    clearValidate: () => void;
+    /** 注册到表单（onMounted 调用） */
+    registerSelf: () => void;
+}
+declare function useFormItem(options: UseFormItemOptions): UseFormItemReturn;
+
+var _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmForm" },
+  __name: "form",
+  props: formProps,
+  emits: ["submit"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const formCtx = useFormProvide({
+      model: toRef(props, "model"),
+      rules: toRef(props, "rules"),
+      labelWidth: toRef(props, "labelWidth"),
+      labelPosition: toRef(props, "labelPosition"),
+      inline: toRef(props, "inline"),
+      disabled: toRef(props, "disabled")
+    });
+    const rootClass = computed(() => [
+      "qm-form",
+      `qm-form--${props.labelPosition}`,
+      {
+        "qm-form--inline": props.inline,
+        "qm-form--disabled": props.disabled
+      }
+    ]);
+    async function validate() {
+      const results = await Promise.all(formCtx.fields.value.map((field) => field.validate()));
+      return results.every(Boolean);
+    }
+    function validateField(prop) {
+      const field = formCtx.fields.value.find((f) => f.prop === prop);
+      if (!field) {
+        const message = `[QmForm] validateField: \u672A\u627E\u5230\u5B57\u6BB5 "${prop}"\uFF08\u8BF7\u786E\u8BA4 form-item \u7684 prop \u4E0E rules/model \u4E00\u81F4\uFF09`;
+        console.warn(message);
+        return Promise.reject(new Error(message));
+      }
+      return field.validate();
+    }
+    function resetFields() {
+      formCtx.fields.value.forEach((field) => field.resetField());
+    }
+    function clearValidate() {
+      formCtx.fields.value.forEach((field) => field.clearValidate());
+    }
+    function onSubmit(event) {
+      emit("submit", event);
+    }
+    __expose({ validate, validateField, resetFields, clearValidate });
+    const __returned__ = { props, emit, formCtx, rootClass, validate, validateField, resetFields, clearValidate, onSubmit };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"form",
+		{
+			class: normalizeClass($setup.rootClass),
+			"data-qm": "form",
+			onSubmit: withModifiers($setup.onSubmit, ["prevent"])
+		},
+		[renderSlot(_ctx.$slots, "default")],
+		34
+		/* CLASS, NEED_HYDRATION */
+	);
+}
+var Form = /*#__PURE__*/ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\form\\form.vue"]]);
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmFormItem" },
+  __name: "form-item",
+  props: formItemProps,
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const controlId = `qm-form-item-control-${useId()}`;
+    const labelId = `qm-form-item-label-${useId()}`;
+    const {
+      errorMessage,
+      showRequired,
+      labelStyle,
+      validate,
+      resetField,
+      clearValidate,
+      registerSelf
+    } = useFormItem({
+      label: toRef(props, "label"),
+      prop: toRef(props, "prop"),
+      required: toRef(props, "required")
+    });
+    onMounted(registerSelf);
+    const rootClass = computed(() => [
+      "qm-form-item",
+      {
+        "qm-form-item--error": Boolean(errorMessage.value),
+        "qm-form-item--required": showRequired.value
+      }
+    ]);
+    __expose({ validate, resetField, clearValidate });
+    const __returned__ = { props, controlId, labelId, errorMessage, showRequired, labelStyle, validate, resetField, clearValidate, registerSelf, rootClass };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = {
+	key: 0,
+	class: "qm-form-item__asterisk",
+	"aria-hidden": "true"
+};
+const _hoisted_2 = { class: "qm-form-item__content" };
+const _hoisted_3 = {
+	key: 0,
+	class: "qm-form-item__error",
+	role: "alert"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"div",
+		{
+			class: normalizeClass($setup.rootClass),
+			"data-qm": "form-item"
+		},
+		[_ctx.label || $setup.showRequired ? (openBlock(), createElementBlock(
+			"label",
+			{
+				key: 0,
+				id: $setup.labelId,
+				for: $setup.controlId,
+				class: "qm-form-item__label",
+				style: normalizeStyle($setup.labelStyle)
+			},
+			[$setup.showRequired ? (openBlock(), createElementBlock("span", _hoisted_1, "*")) : createCommentVNode("v-if", true), createTextVNode(
+				" " + toDisplayString(_ctx.label),
+				1
+				/* TEXT */
+			)],
+			4
+			/* STYLE */
+		)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {
+			id: $setup.controlId,
+			ariaLabelledby: $setup.labelId
+		}), $setup.errorMessage ? (openBlock(), createElementBlock(
+			"div",
+			_hoisted_3,
+			toDisplayString($setup.errorMessage),
+			1
+			/* TEXT */
+		)) : createCommentVNode("v-if", true)])],
+		2
+		/* CLASS */
+	);
+}
+var formItem = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\form\\form-item.vue"]]);
+
+export { FORM_KEY as F, Form as g, formItem as h, formItemProps as k, formProps as l, isEmptyValue as m, useFormProvide as n, validateValue as o, snapshotModel as s, useFormItem as u, validateRule as v };
+export type { UseFormItemOptions as U, FormContext as a, FormEmits as b, FormFieldItem as c, FormItemRule as d, FormLabelPosition as e, FormRules as f, UseFormItemReturn as i, UseFormProvideOptions as j };

package/es/shared/components.BzO68qwA.d.mts

@@ -0,0 +1,95 @@
+import { PropType, defineComponent, computed, openBlock, createElementBlock, normalizeClass, renderSlot, toDisplayString, createCommentVNode } from 'vue';
+import { _ as _export_sfc } from './components.OJRSZE6i.mjs';
+
+/**
+ * QmBadge 组件类型定义（组件体系设计 §6.4：类型先行）
+ * 基础-05：徽标，绝对定位角标；value/max 封顶 / dot 圆点 / hidden 隐藏 / type 语义类型。
+ */
+
+/** 徽标语义类型（当前共享 --qm-badge-* 单色 Token 族，供主题层扩展） */
+type BadgeType = 'primary' | 'success' | 'warning' | 'error';
+/** props 声明（纯类型 + 默认值，供 SFC 与文档复用） */
+declare const badgeProps: {
+    /** 显示值：number 参与 max 封顶；string 原样展示 */
+    readonly value: {
+        readonly type: PropType<string | number>;
+        readonly default: "";
+    };
+    /** 最大值封顶：number 且 value > max 时显示 max+ */
+    readonly max: {
+        readonly type: NumberConstructor;
+        readonly default: 99;
+    };
+    /** 圆点模式：不显示数字 */
+    readonly dot: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 隐藏徽标 */
+    readonly hidden: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 语义类型：primary / success / warning / error */
+    readonly type: {
+        readonly type: PropType<BadgeType>;
+        readonly default: "error";
+    };
+};
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmBadge" },
+  __name: "badge",
+  props: badgeProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const visible = computed(() => {
+      if (props.hidden)
+        return false;
+      if (props.dot)
+        return true;
+      return props.value !== "" && props.value !== null && props.value !== void 0;
+    });
+    const displayValue = computed(() => {
+      if (props.dot)
+        return "";
+      if (typeof props.value === "number" && props.max != null && props.value > props.max)
+        return `${props.max}+`;
+      return String(props.value);
+    });
+    const typeClass = computed(() => `qm-badge--${props.type}`);
+    const __returned__ = { props, visible, displayValue, typeClass };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"span",
+		{
+			class: normalizeClass(["qm-badge", [$setup.typeClass, {
+				"qm-badge--fixed": _ctx.$slots.default,
+				"qm-badge--dot": _ctx.dot
+			}]]),
+			"data-qm": "badge"
+		},
+		[renderSlot(_ctx.$slots, "default"), $setup.visible ? (openBlock(), createElementBlock(
+			"sup",
+			{
+				key: 0,
+				class: normalizeClass(["qm-badge__content", { "qm-badge__content--dot": _ctx.dot }])
+			},
+			toDisplayString($setup.displayValue),
+			3
+			/* TEXT, CLASS */
+		)) : createCommentVNode("v-if", true)],
+		2
+		/* CLASS */
+	);
+}
+var Badge = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\badge\\badge.vue"]]);
+
+export { Badge as a, badgeProps as b };
+export type { BadgeType as B };

package/es/shared/components.BzcvYRS3.d.mts

@@ -0,0 +1,109 @@
+import { PropType, defineComponent, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, createCommentVNode } from 'vue';
+import { a as Icon } from './components.DCuPins-.mjs';
+import { _ as _export_sfc } from './components.OJRSZE6i.mjs';
+
+/**
+ * QmTag 组件类型定义（组件体系设计 §6.4：类型先行）
+ * 基础-03：标签，语义色 / 三档尺寸 / 可关闭 / 胶囊圆角 / 三种主题效果（light|dark|plain）。
+ */
+
+/** 标签语义类型 */
+type TagType = 'default' | 'primary' | 'success' | 'warning' | 'error';
+/** 标签尺寸（§6.3：尺寸枚举统一 small | medium | large） */
+type TagSize = 'small' | 'medium' | 'large';
+/** 标签主题效果：light 浅底 / dark 实底 / plain 描边透明底 */
+type TagEffect = 'light' | 'dark' | 'plain';
+/** props 声明（纯类型 + 默认值，供 SFC 与文档复用） */
+declare const tagProps: {
+    /** 语义类型：default / primary / success / warning / error */
+    readonly type: {
+        readonly type: PropType<TagType>;
+        readonly default: "default";
+    };
+    /** 尺寸：small / medium / large */
+    readonly size: {
+        readonly type: PropType<TagSize>;
+        readonly default: "medium";
+    };
+    /** 可关闭：显示关闭按钮，点击 emit close */
+    readonly closable: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 胶囊圆角 */
+    readonly round: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 主题效果：light / dark / plain */
+    readonly effect: {
+        readonly type: PropType<TagEffect>;
+        readonly default: "light";
+    };
+};
+/** emits 声明 */
+interface TagEmits {
+    /** 点击关闭按钮时触发（是否移除由父级决定） */
+    close: [];
+}
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmTag" },
+  __name: "tag",
+  props: tagProps,
+  emits: ["close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const modifierClass = computed(() => {
+      const classes = [
+        `qm-tag--${props.type}`,
+        `qm-tag--${props.size}`,
+        `qm-tag--${props.effect}`
+      ];
+      if (props.round)
+        classes.push("qm-tag--round");
+      if (props.closable)
+        classes.push("qm-tag--closable");
+      return classes;
+    });
+    function handleClose() {
+      emit("close");
+    }
+    const __returned__ = { props, emit, modifierClass, handleClose, get QmIcon() {
+      return Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = { class: "qm-tag__content" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"span",
+		{
+			class: normalizeClass(["qm-tag", $setup.modifierClass]),
+			"data-qm": "tag"
+		},
+		[createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), _ctx.closable ? (openBlock(), createElementBlock("button", {
+			key: 0,
+			type: "button",
+			class: "qm-tag__close",
+			"aria-label": "关闭",
+			tabindex: "-1",
+			onClick: $setup.handleClose
+		}, [createVNode($setup["QmIcon"], {
+			name: "close",
+			class: "qm-tag__close-icon",
+			style: { "font-size": "12px" }
+		})])) : createCommentVNode("v-if", true)],
+		2
+		/* CLASS */
+	);
+}
+var Tag = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\tag\\tag.vue"]]);
+
+export { Tag as T, tagProps as t };
+export type { TagEffect as a, TagEmits as b, TagSize as c, TagType as d };