@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.Bm5Cu9W3.mjs

@@ -0,0 +1,358 @@
+import { ref, provide, inject, computed, onBeforeUnmount, toRaw, defineComponent, toRef, openBlock, createElementBlock, withModifiers, normalizeClass, renderSlot, useId, onMounted, normalizeStyle, createCommentVNode, createTextVNode, toDisplayString, createElementVNode } from 'vue';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+const formProps = {
+  /** 表单数据对象（QmFormItem 通过 prop 名取值） */
+  model: {
+    type: Object,
+    default: () => ({})
+  },
+  /** 标签宽度（string 原样 / number 转 px；空串时走 CSS Token --qm-form-label-width） */
+  labelWidth: { type: [String, Number], default: "" },
+  /** 标签位置：left / right / top */
+  labelPosition: { type: String, default: "right" },
+  /** 行内表单（Item 横排） */
+  inline: { type: Boolean, default: false },
+  /** 整表单禁用（视觉降权 + 交互提示，具体控件禁用需各自传入 disabled） */
+  disabled: { type: Boolean, default: false },
+  /** 校验规则表 */
+  rules: { type: Object, default: () => ({}) }
+};
+const formItemProps = {
+  /** 标签文案 */
+  label: { type: String, default: "" },
+  /** 字段名（从 form.model 取值 + 匹配 form.rules） */
+  prop: { type: String, default: "" },
+  /** 必填标记（红 * + 必填校验；与 rules 中的 required 等效） */
+  required: { type: Boolean, default: false }
+};
+
+function isEmptyValue(value) {
+  return value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0;
+}
+const EMAIL_RE = /^[^\s@]+@[^\s@][^\s.@]*\.[^\s@]+$/;
+function lengthOf(value) {
+  return typeof value === "string" || Array.isArray(value) ? value.length : void 0;
+}
+function validateRule(rule, value) {
+  if (rule.required && isEmptyValue(value))
+    return Promise.resolve(rule.message || "\u8BE5\u5B57\u6BB5\u4E3A\u5FC5\u586B\u9879");
+  if (isEmptyValue(value))
+    return Promise.resolve(null);
+  if (rule.type === "email" && !EMAIL_RE.test(String(value)))
+    return Promise.resolve(rule.message || "\u90AE\u7BB1\u683C\u5F0F\u4E0D\u6B63\u786E");
+  if (rule.type === "number" && typeof value !== "number" && Number.isNaN(Number(value)))
+    return Promise.resolve(rule.message || "\u8BF7\u8F93\u5165\u6570\u5B57");
+  const len = lengthOf(value);
+  if (rule.min !== void 0 && len !== void 0 && len < rule.min)
+    return Promise.resolve(rule.message || `\u957F\u5EA6\u4E0D\u80FD\u5C0F\u4E8E ${rule.min}`);
+  if (rule.max !== void 0 && len !== void 0 && len > rule.max)
+    return Promise.resolve(rule.message || `\u957F\u5EA6\u4E0D\u80FD\u5927\u4E8E ${rule.max}`);
+  if (rule.pattern && !rule.pattern.test(String(value)))
+    return Promise.resolve(rule.message || "\u683C\u5F0F\u4E0D\u6B63\u786E");
+  if (rule.validator)
+    return validateValidator(rule, value);
+  return Promise.resolve(null);
+}
+function validateValidator(rule, value) {
+  return new Promise((resolve) => {
+    let settled = false;
+    const done = (err) => {
+      if (settled)
+        return;
+      settled = true;
+      if (err instanceof Error)
+        resolve(err.message);
+      else if (typeof err === "string")
+        resolve(err);
+      else if (typeof err === "boolean")
+        resolve(err ? null : rule.message || "\u6821\u9A8C\u672A\u901A\u8FC7");
+      else resolve(null);
+    };
+    let ret;
+    try {
+      ret = rule.validator(rule, value, done);
+    } catch (error) {
+      done(error);
+      return;
+    }
+    if (ret !== void 0 && ret !== null) {
+      if (ret instanceof Promise)
+        ret.then(done, (error) => done(error));
+      else done(ret);
+    }
+  });
+}
+async function validateValue(value, rules) {
+  const errors = [];
+  for (const rule of rules) {
+    const message = await validateRule(rule, value);
+    if (message)
+      errors.push(message);
+  }
+  return errors;
+}
+const FORM_KEY = Symbol("qm-form");
+function snapshotModel(model) {
+  const raw = toRaw(model);
+  try {
+    return structuredClone(raw);
+  } catch {
+    return { ...raw };
+  }
+}
+function useFormProvide(options) {
+  const { model, rules, labelWidth, labelPosition, inline, disabled } = options;
+  const fields = ref([]);
+  const initialModel = snapshotModel(model.value);
+  function addField(field) {
+    if (!fields.value.includes(field))
+      fields.value.push(field);
+  }
+  function removeField(field) {
+    const idx = fields.value.indexOf(field);
+    if (idx >= 0)
+      fields.value.splice(idx, 1);
+  }
+  const ctx = {
+    model,
+    rules,
+    labelWidth,
+    labelPosition,
+    inline,
+    disabled,
+    initialModel,
+    fields,
+    addField,
+    removeField
+  };
+  provide(FORM_KEY, ctx);
+  return ctx;
+}
+function useFormItem(options) {
+  const { label, prop, required } = options;
+  const form = inject(FORM_KEY, void 0);
+  const errorMessage = ref("");
+  const value = computed(() => {
+    if (!form || !prop.value)
+      return void 0;
+    return form.model.value[prop.value];
+  });
+  const rules = computed(() => {
+    const merged = [];
+    if (required.value)
+      merged.push({ required: true, message: `${label.value || prop.value}\u4E3A\u5FC5\u586B\u9879` });
+    merged.push(...form?.rules.value[prop.value] ?? []);
+    return merged;
+  });
+  const showRequired = computed(
+    () => required.value || rules.value.some((rule) => rule.required)
+  );
+  const labelStyle = computed(() => {
+    if (!form || form.labelPosition.value === "top")
+      return void 0;
+    const width = form.labelWidth.value;
+    if (width === "" || width === void 0)
+      return void 0;
+    return { width: typeof width === "number" ? `${width}px` : width };
+  });
+  async function validate() {
+    if (!form || !prop.value) {
+      errorMessage.value = "";
+      return true;
+    }
+    const errors = await validateValue(value.value, rules.value);
+    errorMessage.value = errors[0] ?? "";
+    return errors.length === 0;
+  }
+  function clearValidate() {
+    errorMessage.value = "";
+  }
+  function resetField() {
+    if (form && prop.value && prop.value in form.initialModel)
+      form.model.value[prop.value] = form.initialModel[prop.value];
+    clearValidate();
+  }
+  const field = {
+    get prop() {
+      return prop.value;
+    },
+    validate,
+    resetField,
+    clearValidate
+  };
+  function registerSelf() {
+    form?.addField(field);
+  }
+  onBeforeUnmount(() => {
+    form?.removeField(field);
+  });
+  return {
+    form,
+    value,
+    errorMessage,
+    rules,
+    showRequired,
+    labelStyle,
+    validate,
+    resetField,
+    clearValidate,
+    registerSelf
+  };
+}
+
+const _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 */
+	);
+}
+const Form = /*#__PURE__*/ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\form\\form.vue"]]);
+
+const _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 */
+	);
+}
+const 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 a, formItemProps as b, formProps as c, useFormProvide as d, validateValue as e, formItem as f, isEmptyValue as i, snapshotModel as s, useFormItem as u, validateRule as v };

package/es/shared/components.BmII0Zi4.d.cts

@@ -0,0 +1,109 @@
+import { PropType, defineComponent, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, createCommentVNode } from 'vue';
+import { a as Icon } from './components.b5GjJzDh.cjs';
+import { _ as _export_sfc } from './components.OJRSZE6i.cjs';
+
+/**
+ * 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 };