@qingmingmu/components 0.1.0-beta.0

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

@@ -0,0 +1,82 @@
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, normalizeStyle, renderSlot, createCommentVNode, createVNode, createTextVNode, toDisplayString } from 'vue';
+import { a as Icon } from './components.b5GjJzDh.cjs';
+import { _ as _export_sfc } from './components.OJRSZE6i.cjs';
+
+/**
+ * QmEmpty 组件类型定义（03-数据展示）
+ * 空状态：图标 / 描述 / 操作区
+ */
+declare const emptyProps: {
+    /** 描述文案（默认插槽可覆盖） */
+    readonly description: {
+        readonly type: StringConstructor;
+        readonly default: "暂无数据";
+    };
+    /** 图标尺寸（px） */
+    readonly imageSize: {
+        readonly type: NumberConstructor;
+        readonly default: 64;
+    };
+};
+/** emits 声明（空状态无事件） */
+interface EmptyEmits {
+}
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmEmpty" },
+  __name: "empty",
+  props: emptyProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const imageStyle = computed(() => ({
+      width: `${props.imageSize}px`,
+      height: `${props.imageSize}px`
+    }));
+    const __returned__ = { props, imageStyle, get QmIcon() {
+      return Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = {
+	class: "qm-empty",
+	"data-qm": "empty"
+};
+const _hoisted_2 = {
+	key: 0,
+	class: "qm-empty__description"
+};
+const _hoisted_3 = {
+	key: 1,
+	class: "qm-empty__footer"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", _hoisted_1, [
+		createElementVNode(
+			"div",
+			{
+				class: "qm-empty__image",
+				style: normalizeStyle($setup.imageStyle)
+			},
+			[renderSlot(_ctx.$slots, "image", {}, () => [createCommentVNode(" 统一走 QmIcon 图标体系：默认空态语义图标（inbox），尺寸跟随 imageSize "), createVNode($setup["QmIcon"], {
+				name: "inbox",
+				style: normalizeStyle({ fontSize: `${_ctx.imageSize}px` })
+			}, null, 8, ["style"])])],
+			4
+			/* STYLE */
+		),
+		_ctx.$slots.default || _ctx.description ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(
+			toDisplayString(_ctx.description),
+			1
+			/* TEXT */
+		)])])) : createCommentVNode("v-if", true),
+		_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("v-if", true)
+	]);
+}
+var Empty = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\empty\\empty.vue"]]);
+
+export { Empty as a, emptyProps as e };
+export type { EmptyEmits as E };

package/es/shared/components.CtUfYC-G.cjs

@@ -0,0 +1,256 @@
+'use strict';
+
+const vue = require('vue');
+const exportHelper = require('./components.DUidQ77e.cjs');
+
+const splitterProps = {
+  /** 分栏方向：horizontal 左右 / vertical 上下 */
+  direction: { type: String, default: "horizontal" },
+  /** 各面板百分比（合计 100）；缺省/不匹配时均分；受控：外部变更会同步内部 */
+  sizes: { type: Array, default: () => [] },
+  /** 面板最小百分比：number 全局；number[] 逐面板 */
+  minSize: { type: [Number, Array], default: 10 }
+};
+
+function normalizeSizes(list, count) {
+  if (count <= 0)
+    return [];
+  const valid = Array.isArray(list) && list.length === count && list.every((n) => Number.isFinite(n) && n >= 0);
+  if (!valid) {
+    const base = 100 / count;
+    return Array.from({ length: count }, () => base);
+  }
+  const total = list.reduce((a, b) => a + b, 0);
+  if (total <= 0)
+    return Array.from({ length: count }, () => 100 / count);
+  return list.map((n) => n / total * 100);
+}
+const KEY_STEP = 5;
+function useSplitter(options) {
+  const { direction, sizes, minSize, panelCount, onResize } = options;
+  const inner = vue.ref([]);
+  const dragging = vue.ref(false);
+  const activeBar = vue.ref(-1);
+  function minOf(index) {
+    if (Array.isArray(minSize.value))
+      return minSize.value[index] ?? 10;
+    return minSize.value;
+  }
+  vue.watch(
+    panelCount,
+    (count) => {
+      inner.value = count > 0 ? normalizeSizes(sizes.value, count) : [];
+    },
+    { immediate: true }
+  );
+  vue.watch(sizes, (list) => {
+    if (panelCount.value > 0 && list.length > 0)
+      inner.value = normalizeSizes(list, panelCount.value);
+  });
+  function applyDeltaToBase(index, delta, base) {
+    const left = base[index];
+    const right = base[index + 1];
+    if (left == null || right == null)
+      return;
+    const maxDelta = left - Math.min(minOf(index), left);
+    const minDelta = -(right - Math.min(minOf(index + 1), right));
+    const clamped = Math.min(Math.max(delta, minDelta), maxDelta);
+    const next = [...base];
+    next[index] = left + clamped;
+    next[index + 1] = right - clamped;
+    inner.value = next;
+  }
+  function applyDelta(index, delta) {
+    applyDeltaToBase(index, delta, inner.value);
+  }
+  let containerSize = 0;
+  let startClient = 0;
+  let startSizes = [];
+  function onDragMove(event) {
+    if (!dragging.value || activeBar.value < 0)
+      return;
+    const client = direction.value === "horizontal" ? event.clientX : event.clientY;
+    const delta = (client - startClient) / containerSize * 100;
+    applyDeltaToBase(activeBar.value, delta, startSizes);
+  }
+  function endDrag() {
+    if (!dragging.value)
+      return;
+    dragging.value = false;
+    activeBar.value = -1;
+    window.removeEventListener("mousemove", onDragMove);
+    window.removeEventListener("mouseup", endDrag);
+    onResize([...inner.value]);
+  }
+  function beginDrag(index, event) {
+    if (index < 0 || index >= inner.value.length - 1)
+      return;
+    const root = event.currentTarget.parentElement;
+    if (!root)
+      return;
+    const rect = root.getBoundingClientRect();
+    containerSize = direction.value === "horizontal" ? rect.width : rect.height;
+    if (containerSize <= 0)
+      return;
+    startClient = direction.value === "horizontal" ? event.clientX : event.clientY;
+    startSizes = [...inner.value];
+    dragging.value = true;
+    activeBar.value = index;
+    window.addEventListener("mousemove", onDragMove);
+    window.addEventListener("mouseup", endDrag);
+    event.preventDefault();
+  }
+  function handleBarKeydown(index, event) {
+    if (index < 0 || index >= inner.value.length - 1)
+      return;
+    const isHorizontal = direction.value === "horizontal";
+    const back = isHorizontal ? event.key === "ArrowLeft" : event.key === "ArrowUp";
+    const forward = isHorizontal ? event.key === "ArrowRight" : event.key === "ArrowDown";
+    if (!back && !forward)
+      return;
+    event.preventDefault();
+    applyDelta(index, (forward ? 1 : -1) * KEY_STEP);
+    onResize([...inner.value]);
+  }
+  function dispose() {
+    window.removeEventListener("mousemove", onDragMove);
+    window.removeEventListener("mouseup", endDrag);
+  }
+  return { sizes: inner, dragging, activeBar, beginDrag, handleBarKeydown, dispose };
+}
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "QmSplitter" },
+  __name: "splitter",
+  props: splitterProps,
+  emits: ["resize"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const slots = vue.useSlots();
+    function getPanels() {
+      return (slots.default?.() ?? []).flat().filter((v) => v && typeof v === "object" && "type" in v && v.type !== vue.Comment);
+    }
+    let panelsCache = null;
+    const panelCount = vue.ref(0);
+    function renderPanels() {
+      if (panelsCache === null)
+        panelsCache = getPanels();
+      return panelsCache;
+    }
+    function syncPanels() {
+      panelsCache = null;
+      panelCount.value = renderPanels().length;
+    }
+    vue.onMounted(syncPanels);
+    vue.onBeforeUpdate(syncPanels);
+    const splitter = useSplitter({
+      direction: vue.computed(() => props.direction),
+      sizes: vue.computed(() => props.sizes),
+      minSize: vue.computed(() => props.minSize),
+      panelCount,
+      onResize: (sizes) => emit("resize", sizes)
+    });
+    vue.onUnmounted(() => {
+      splitter.dispose();
+    });
+    function panelStyle(index) {
+      const size = splitter.sizes.value[index];
+      return { flexBasis: size != null ? `${size}%` : void 0 };
+    }
+    function barAria(index) {
+      const min = Array.isArray(props.minSize) ? props.minSize[index] ?? 10 : props.minSize;
+      const minR = Array.isArray(props.minSize) ? props.minSize[index + 1] ?? 10 : props.minSize;
+      return {
+        "aria-valuemin": Math.round(min),
+        "aria-valuemax": Math.round(100 - minR)
+      };
+    }
+    const PanelRenderer = vue.defineComponent({
+      name: "QmSplitterPanelRenderer",
+      props: { node: { type: Object, required: true } },
+      setup(renderProps) {
+        return () => renderProps.node;
+      }
+    });
+    const rootClass = vue.computed(() => [
+      `qm-splitter--${props.direction}`,
+      { "qm-splitter--dragging": splitter.dragging.value }
+    ]);
+    const __returned__ = { props, emit, slots, getPanels, get panelsCache() {
+      return panelsCache;
+    }, set panelsCache(v) {
+      panelsCache = v;
+    }, panelCount, renderPanels, syncPanels, splitter, panelStyle, barAria, PanelRenderer, rootClass };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = [
+	"aria-orientation",
+	"aria-valuenow",
+	"onMousedown",
+	"onKeydown"
+];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return vue.openBlock(), vue.createElementBlock(
+		"div",
+		{
+			class: vue.normalizeClass(["qm-splitter", $setup.rootClass]),
+			"data-qm": "splitter"
+		},
+		[(vue.openBlock(true), vue.createElementBlock(
+			vue.Fragment,
+			null,
+			vue.renderList($setup.renderPanels(), (panel, index) => {
+				return vue.openBlock(), vue.createElementBlock(
+					vue.Fragment,
+					{ key: index },
+					[vue.createElementVNode(
+						"div",
+						{
+							class: "qm-splitter__panel",
+							style: vue.normalizeStyle($setup.panelStyle(index))
+						},
+						[vue.createVNode($setup["PanelRenderer"], { node: panel }, null, 8, ["node"])],
+						4
+						/* STYLE */
+					), index < $setup.renderPanels().length - 1 ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+						key: 0,
+						class: "qm-splitter__bar",
+						role: "separator",
+						"aria-orientation": _ctx.direction,
+						"aria-valuenow": Math.round($setup.splitter.sizes.value[index] ?? 0)
+					}, { ref_for: true }, $setup.barAria(index), {
+						tabindex: 0,
+						onMousedown: ($event) => $setup.splitter.beginDrag(index, $event),
+						onKeydown: ($event) => $setup.splitter.handleBarKeydown(index, $event)
+					}), [..._cache[0] || (_cache[0] = [vue.createElementVNode(
+						"span",
+						{
+							class: "qm-splitter__bar-handle",
+							"aria-hidden": "true"
+						},
+						null,
+						-1
+						/* CACHED */
+					)])], 16, _hoisted_1)) : vue.createCommentVNode("v-if", true)],
+					64
+					/* STABLE_FRAGMENT */
+				);
+			}),
+			128
+			/* KEYED_FRAGMENT */
+		))],
+		2
+		/* CLASS */
+	);
+}
+const Splitter = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\splitter\\splitter.vue"]]);
+
+exports.Splitter = Splitter;
+exports.normalizeSizes = normalizeSizes;
+exports.splitterProps = splitterProps;
+exports.useSplitter = useSplitter;

package/es/shared/components.CtZrM_rh.mjs

@@ -0,0 +1,58 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, renderSlot } from 'vue';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+const spaceProps = {
+  /** 排列方向：horizontal / vertical */
+  direction: { type: String, default: "horizontal" },
+  /** 间距：small / medium / large（消费分档 Token）；number 自定义（px） */
+  size: { type: [String, Number], default: "medium" },
+  /** 自动换行（换行后行距走 --qm-space-wrap-gap） */
+  wrap: { type: Boolean, default: false },
+  /** 垂直对齐：start / end / center / baseline */
+  align: { type: String, default: "center" },
+  /** 填满：子元素 flex: 1 均分 */
+  fill: { type: Boolean, default: false }
+};
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmSpace" },
+  __name: "space",
+  props: spaceProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const enumSize = computed(
+      () => props.size === "small" || props.size === "medium" || props.size === "large" ? props.size : null
+    );
+    const modifierClass = computed(() => {
+      const classes = [`qm-space--${props.direction}`, `qm-space--align-${props.align}`];
+      if (enumSize.value) classes.push(`qm-space--${enumSize.value}`);
+      if (props.wrap) classes.push("qm-space--wrap");
+      if (props.fill) classes.push("qm-space--fill");
+      return classes;
+    });
+    const rootStyle = computed(() => ({
+      gap: typeof props.size === "number" ? `${props.size}px` : void 0
+    }));
+    const __returned__ = { props, enumSize, modifierClass, rootStyle };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"div",
+		{
+			class: normalizeClass(["qm-space", $setup.modifierClass]),
+			style: normalizeStyle($setup.rootStyle),
+			"data-qm": "space"
+		},
+		[renderSlot(_ctx.$slots, "default")],
+		6
+		/* CLASS, STYLE */
+	);
+}
+const Space = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\space\\space.vue"]]);
+
+export { Space as S, spaceProps as s };