@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.BL34tX_n.mjs

@@ -0,0 +1,338 @@
+import { shallowRef, provide, inject, ref, watch, computed, onBeforeUnmount, defineComponent, toRef, onMounted, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+const radioProps = {
+  /** 受控值：单独使用即自身选中态；组模式下由 QmRadioGroup 注入，勿直传 */
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
+  /** 选项值（组模式下用于选中比对；必填） */
+  value: {
+    type: [String, Number, Boolean],
+    required: true
+  },
+  /** 禁用单项（整组禁用由 group.disabled 统一接管） */
+  disabled: { type: Boolean, default: false },
+  /** 标签文案（缺省时回退默认插槽内容） */
+  label: { type: String, default: "" },
+  /** 尺寸：缺省回退组 size，再回退 medium */
+  size: {
+    type: String,
+    default: void 0
+  },
+  /** 原生 name：组模式下由 group 注入以共享浏览器原生单选行为 */
+  name: { type: String, default: "" }
+};
+const radioGroupProps = {
+  /** 受控值（v-model）：选中项的 value */
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
+  /** 整组禁用 */
+  disabled: { type: Boolean, default: false },
+  /** 统一尺寸（子项未单独指定时回退到此） */
+  size: { type: String, default: "medium" },
+  /** 排列方向 */
+  direction: {
+    type: String,
+    default: "horizontal"
+  },
+  /** 原生 name：组内所有 QmRadio 共享，确保浏览器原生单选行为 */
+  name: { type: String, default: "" }
+};
+
+const RADIO_GROUP_KEY = Symbol("qm-radio-group");
+function findNextEnabledIndex(items, fromIndex, delta) {
+  const len = items.length;
+  if (len === 0)
+    return -1;
+  let i = fromIndex;
+  for (let step = 0; step < len; step++) {
+    i = (i + delta + len) % len;
+    if (!items[i].disabled.value)
+      return i;
+  }
+  return -1;
+}
+function isNextKey(key) {
+  return key === "ArrowDown" || key === "ArrowRight";
+}
+function isPrevKey(key) {
+  return key === "ArrowUp" || key === "ArrowLeft";
+}
+function useRadioGroup(options) {
+  const { modelValue, disabled, size, name, emitUpdate, emitChange } = options;
+  const items = shallowRef([]);
+  function register(item) {
+    if (!items.value.includes(item))
+      items.value.push(item);
+  }
+  function unregister(item) {
+    const idx = items.value.indexOf(item);
+    if (idx >= 0)
+      items.value.splice(idx, 1);
+  }
+  function select(value) {
+    if (disabled.value)
+      return;
+    if (modelValue.value === value)
+      return;
+    emitUpdate(value);
+    emitChange(value);
+  }
+  function onItemKeydown(item, event) {
+    if (disabled.value || item.disabled.value)
+      return;
+    const key = event.key;
+    let delta = 0;
+    if (isNextKey(key))
+      delta = 1;
+    else if (isPrevKey(key))
+      delta = -1;
+    else return;
+    event.preventDefault();
+    const fromIndex = items.value.indexOf(item);
+    const nextIndex = findNextEnabledIndex(items.value, fromIndex, delta);
+    if (nextIndex < 0)
+      return;
+    const next = items.value[nextIndex];
+    if (!next)
+      return;
+    select(next.value);
+    next.el.value?.focus();
+  }
+  const ctx = {
+    modelValue,
+    disabled,
+    size,
+    name,
+    items,
+    select,
+    register,
+    unregister,
+    onItemKeydown
+  };
+  provide(RADIO_GROUP_KEY, ctx);
+  return ctx;
+}
+function useRadioItem(options) {
+  const { value, disabled, size, name, modelValue, el, emitUpdate, emitChange } = options;
+  const group = inject(RADIO_GROUP_KEY, void 0);
+  const innerValue = ref(modelValue.value);
+  watch(modelValue, (val) => innerValue.value = val);
+  const inGroup = computed(() => Boolean(group));
+  const currentValue = computed(() => {
+    if (group)
+      return group.modelValue.value;
+    return modelValue.value ?? innerValue.value;
+  });
+  const checked = computed(() => currentValue.value === value.value);
+  const isDisabled = computed(() => (group ? group.disabled.value : false) || disabled.value);
+  const effectiveSize = computed(() => {
+    if (size.value)
+      return size.value;
+    if (group)
+      return group.size.value;
+    return "medium";
+  });
+  const effectiveName = computed(() => {
+    if (group && group.name.value)
+      return group.name.value;
+    return name.value;
+  });
+  const tabindex = computed(() => {
+    if (isDisabled.value)
+      return -1;
+    if (group)
+      return checked.value ? 0 : -1;
+    return 0;
+  });
+  function check() {
+    if (isDisabled.value)
+      return;
+    if (group) {
+      group.select(value.value);
+      return;
+    }
+    if (checked.value)
+      return;
+    emitUpdate(value.value);
+    emitChange(value.value);
+    innerValue.value = value.value;
+  }
+  const itemRef = {
+    get value() {
+      return value.value;
+    },
+    disabled,
+    el
+  };
+  function onKeydown(event) {
+    if (isDisabled.value)
+      return;
+    if (group && (isNextKey(event.key) || isPrevKey(event.key))) {
+      group.onItemKeydown(itemRef, event);
+      return;
+    }
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      check();
+    }
+  }
+  function registerSelf() {
+    group?.register(itemRef);
+  }
+  onBeforeUnmount(() => {
+    group?.unregister(itemRef);
+  });
+  return {
+    inGroup,
+    checked,
+    isDisabled,
+    effectiveSize,
+    effectiveName,
+    tabindex,
+    check,
+    onKeydown,
+    registerSelf
+  };
+}
+
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmRadio" },
+  __name: "radio",
+  props: radioProps,
+  emits: ["update:modelValue", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const rootRef = ref(null);
+    const inputRef = ref(null);
+    const item = useRadioItem({
+      value: toRef(props, "value"),
+      disabled: toRef(props, "disabled"),
+      size: toRef(props, "size"),
+      name: toRef(props, "name"),
+      modelValue: toRef(props, "modelValue"),
+      el: rootRef,
+      emitUpdate: (value) => emit("update:modelValue", value),
+      emitChange: (value) => emit("change", value)
+    });
+    const { checked, isDisabled, effectiveSize, effectiveName, tabindex, check, onKeydown } = item;
+    const rootClass = computed(() => [
+      "qm-radio",
+      `qm-radio--${effectiveSize.value}`,
+      {
+        "qm-radio--checked": checked.value,
+        "qm-radio--disabled": isDisabled.value
+      }
+    ]);
+    function onChange() {
+      check();
+    }
+    onMounted(() => {
+      item.registerSelf();
+    });
+    const __returned__ = { props, emit, rootRef, inputRef, item, checked, isDisabled, effectiveSize, effectiveName, tabindex, check, onKeydown, rootClass, onChange };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1$1 = [
+	"name",
+	"value",
+	"checked",
+	"disabled",
+	"tabindex",
+	"aria-checked"
+];
+const _hoisted_2 = { class: "qm-radio__label" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"label",
+		{
+			ref: "rootRef",
+			class: normalizeClass($setup.rootClass)
+		},
+		[
+			createCommentVNode(" 原生 radio：视觉隐藏但覆盖整个 label，保留聚焦/点击/键盘可访问性 "),
+			createElementVNode("input", {
+				ref: "inputRef",
+				class: "qm-radio__original",
+				type: "radio",
+				name: $setup.effectiveName,
+				value: _ctx.value,
+				checked: $setup.checked,
+				disabled: $setup.isDisabled,
+				tabindex: $setup.tabindex,
+				"aria-checked": $setup.checked,
+				onChange: $setup.onChange,
+				onKeydown: _cache[0] || (_cache[0] = (...args) => $setup.onKeydown && $setup.onKeydown(...args))
+			}, null, 40, _hoisted_1$1),
+			createCommentVNode(" 自定义圆点（视觉层，aria-hidden 避免与原生 input 语义重复；选中态纯色填满） "),
+			_cache[1] || (_cache[1] = createElementVNode(
+				"span",
+				{
+					class: "qm-radio__dot",
+					"aria-hidden": "true"
+				},
+				null,
+				-1
+				/* CACHED */
+			)),
+			createCommentVNode(" 文案 "),
+			createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(
+				toDisplayString(_ctx.label),
+				1
+				/* TEXT */
+			)])])
+		],
+		2
+		/* CLASS */
+	);
+}
+const Radio = /*#__PURE__*/ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\radio\\radio.vue"]]);
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmRadioGroup" },
+  __name: "radio-group",
+  props: radioGroupProps,
+  emits: ["update:modelValue", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    useRadioGroup({
+      modelValue: toRef(props, "modelValue"),
+      disabled: toRef(props, "disabled"),
+      size: toRef(props, "size"),
+      name: toRef(props, "name"),
+      emitUpdate: (value) => emit("update:modelValue", value),
+      emitChange: (value) => emit("change", value)
+    });
+    const rootClass = computed(() => [
+      "qm-radio-group",
+      `qm-radio-group--${props.direction}`,
+      { "qm-radio-group--disabled": props.disabled }
+    ]);
+    const __returned__ = { props, emit, rootClass };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = ["aria-disabled"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass($setup.rootClass),
+		role: "radiogroup",
+		"aria-disabled": _ctx.disabled || undefined
+	}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
+}
+const radioGroup = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\radio\\radio-group.vue"]]);
+
+export { Radio as R, RADIO_GROUP_KEY as a, isPrevKey as b, radioGroupProps as c, radioProps as d, useRadioItem as e, findNextEnabledIndex as f, isNextKey as i, radioGroup as r, useRadioGroup as u };

package/es/shared/components.BMUce5Uz.cjs

@@ -0,0 +1,226 @@
+'use strict';
+
+const vue = require('vue');
+const exportHelper = require('./components.DUidQ77e.cjs');
+
+const tableProps = {
+  /** 表格数据 */
+  data: { type: Array, default: () => [] },
+  /** 列配置（prop/label/width/slotName），与默认插槽 QmTableColumn 二选一 */
+  columns: { type: Array, default: () => [] },
+  /** 是否显示边框 */
+  border: { type: Boolean, default: false },
+  /** 斑马纹 */
+  stripe: { type: Boolean, default: false },
+  /** 行 hover 高亮 */
+  hover: { type: Boolean, default: true },
+  /** 空态文案（empty 插槽可覆盖） */
+  emptyText: { type: String, default: "\u6682\u65E0\u6570\u636E" },
+  /** 行唯一标识字段（用于 :key；缺省用索引） */
+  rowKey: { type: String, default: "" }
+};
+const tableColumnContextKey = Symbol("qm-table-column");
+
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "QmTable" },
+  __name: "table",
+  props: tableProps,
+  emits: ["rowClick"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const registeredColumns = vue.reactive([]);
+    vue.provide(tableColumnContextKey, {
+      register: (col) => {
+        registeredColumns.push(col);
+      },
+      unregister: (col) => {
+        const i = registeredColumns.indexOf(col);
+        if (i >= 0)
+          registeredColumns.splice(i, 1);
+      }
+    });
+    const columns = vue.computed(
+      () => props.columns.length > 0 ? props.columns : registeredColumns
+    );
+    const modifierClass = vue.computed(() => ({
+      "qm-table--border": props.border,
+      "qm-table--stripe": props.stripe,
+      "qm-table--hover": props.hover
+    }));
+    function columnWidthStyle(col) {
+      if (!col.width)
+        return void 0;
+      return { width: typeof col.width === "number" ? `${col.width}px` : col.width };
+    }
+    function rowKeyOf(row, index) {
+      if (props.rowKey && row[props.rowKey] != null)
+        return String(row[props.rowKey]);
+      return index;
+    }
+    function onRowClick(row, index) {
+      emit("rowClick", row, index);
+    }
+    const __returned__ = { props, emit, registeredColumns, columns, modifierClass, columnWidthStyle, rowKeyOf, onRowClick };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = {
+	key: 0,
+	class: "qm-table__inner"
+};
+const _hoisted_2 = { class: "qm-table__head" };
+const _hoisted_3 = { class: "qm-table__head-row" };
+const _hoisted_4 = { class: "qm-table__body" };
+const _hoisted_5 = ["onClick"];
+const _hoisted_6 = {
+	key: 1,
+	class: "qm-table__empty"
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+	return vue.openBlock(), vue.createElementBlock(
+		"div",
+		{
+			class: vue.normalizeClass(["qm-table", $setup.modifierClass]),
+			"data-qm": "table"
+		},
+		[
+			_ctx.data.length ? (vue.openBlock(), vue.createElementBlock("table", _hoisted_1, [vue.createElementVNode("thead", _hoisted_2, [vue.createElementVNode("tr", _hoisted_3, [(vue.openBlock(true), vue.createElementBlock(
+				vue.Fragment,
+				null,
+				vue.renderList($setup.columns, (col) => {
+					return vue.openBlock(), vue.createElementBlock(
+						"th",
+						{
+							key: col.prop,
+							class: "qm-table__cell qm-table__cell--head",
+							style: vue.normalizeStyle($setup.columnWidthStyle(col)),
+							scope: "col"
+						},
+						vue.toDisplayString(col.label),
+						5
+						/* TEXT, STYLE */
+					);
+				}),
+				128
+				/* KEYED_FRAGMENT */
+			))])]), vue.createElementVNode("tbody", _hoisted_4, [(vue.openBlock(true), vue.createElementBlock(
+				vue.Fragment,
+				null,
+				vue.renderList(_ctx.data, (row, index) => {
+					return vue.openBlock(), vue.createElementBlock("tr", {
+						key: $setup.rowKeyOf(row, index),
+						class: "qm-table__row",
+						onClick: ($event) => $setup.onRowClick(row, index)
+					}, [(vue.openBlock(true), vue.createElementBlock(
+						vue.Fragment,
+						null,
+						vue.renderList($setup.columns, (col) => {
+							return vue.openBlock(), vue.createElementBlock(
+								"td",
+								{
+									key: col.prop,
+									class: "qm-table__cell",
+									style: vue.normalizeStyle($setup.columnWidthStyle(col))
+								},
+								[col.slotName && _ctx.$slots[col.slotName] ? vue.renderSlot(_ctx.$slots, col.slotName, {
+									row,
+									column: col,
+									index
+								}, undefined, undefined, 0) : (vue.openBlock(), vue.createElementBlock(
+									vue.Fragment,
+									{ key: 1 },
+									[vue.createTextVNode(
+										vue.toDisplayString(row[col.prop]),
+										1
+										/* TEXT */
+									)],
+									64
+									/* STABLE_FRAGMENT */
+								))],
+								4
+								/* STYLE */
+							);
+						}),
+						128
+						/* KEYED_FRAGMENT */
+					))], 8, _hoisted_5);
+				}),
+				128
+				/* KEYED_FRAGMENT */
+			))])])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [vue.renderSlot(_ctx.$slots, "empty", {}, () => [vue.createTextVNode(
+				vue.toDisplayString(_ctx.emptyText),
+				1
+				/* TEXT */
+			)])])),
+			vue.createCommentVNode(" QmTableColumn 子项挂载点（renderless，仅向父级注册列配置） "),
+			vue.renderSlot(_ctx.$slots, "default")
+		],
+		2
+		/* CLASS */
+	);
+}
+const Table = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\table\\table.vue"]]);
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "QmTableColumn" },
+  __name: "table-column",
+  props: {
+    /** 数据字段名（行对象取值键） */
+    prop: { type: String, required: true },
+    /** 列标题 */
+    label: { type: String, default: "" },
+    /** 列宽（number → px，string 原样） */
+    width: { type: [String, Number], default: void 0 },
+    /** 自定义单元格渲染：对应具名插槽 */
+    slotName: { type: String, default: "" }
+  },
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const context = vue.inject(tableColumnContextKey, null);
+    const state = vue.reactive({
+      prop: props.prop,
+      label: props.label,
+      width: props.width,
+      slotName: props.slotName
+    });
+    vue.onMounted(() => {
+      context?.register(state);
+    });
+    vue.onBeforeUnmount(() => {
+      context?.unregister(state);
+    });
+    vue.watch(
+      () => [props.prop, props.label, props.width, props.slotName],
+      () => {
+        state.prop = props.prop;
+        state.label = props.label;
+        state.width = props.width;
+        state.slotName = props.slotName;
+      }
+    );
+    const __returned__ = { props, context, state };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return vue.openBlock(), vue.createElementBlock(
+		vue.Fragment,
+		null,
+		[vue.createCommentVNode(" renderless：仅注册列配置；v-if=false 保证模板根节点合法且不渲染 DOM "), vue.createCommentVNode("v-if", true)],
+		2112
+		/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+	);
+}
+const tableColumn = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\table\\table-column.vue"]]);
+
+exports.Table = Table;
+exports.tableColumn = tableColumn;
+exports.tableColumnContextKey = tableColumnContextKey;
+exports.tableProps = tableProps;