@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.r5I_hKLX.cjs

@@ -0,0 +1,222 @@
+'use strict';
+
+const vue = require('vue');
+const exportHelper = require('./components.DUidQ77e.cjs');
+
+const gridBreakpoints = ["xs", "sm", "md", "lg", "xl"];
+const gridBreakpointsMinWidth = {
+  sm: 768,
+  md: 992,
+  lg: 1200,
+  xl: 1920
+};
+const gridContextKey = Symbol("qm-grid");
+function normalizeGutter(gutter) {
+  if (typeof gutter === "number")
+    return { base: [gutter, gutter], bps: {} };
+  if (Array.isArray(gutter))
+    return { base: [gutter[0] ?? 0, gutter[1] ?? 0], bps: {} };
+  const bps = {};
+  for (const bp of ["sm", "md", "lg", "xl"]) {
+    if (gutter[bp] != null)
+      bps[bp] = gutter[bp];
+  }
+  return { base: [gutter.xs ?? 0, gutter.xs ?? 0], bps };
+}
+function resolveGutter(normalized, isActive) {
+  for (const bp of ["xl", "lg", "md", "sm"]) {
+    const value = normalized.bps[bp];
+    if (value != null && isActive(bp))
+      return [value, value];
+  }
+  return normalized.base;
+}
+const gridProps = {
+  /** 栅格间距（px）：number 双向一致；[number, number] 为 [水平, 垂直]；对象为响应式断点值 */
+  gutter: { type: [Number, Array, Object], default: 0 },
+  /** 水平对齐：start / end / center / space-around / space-between / space-evenly */
+  justify: { type: String, default: "start" },
+  /** 垂直对齐：top / middle / bottom */
+  align: { type: String, default: "top" },
+  /** 自定义元素标签（默认 div，如 ul/section 等） */
+  tag: { type: String, default: "div" },
+  /** 总栏数（默认 24） */
+  cols: { type: Number, default: 24 }
+};
+const gridItemProps = {
+  /** 占用栏数（相对总栏数） */
+  span: { type: Number, default: 24 },
+  /** 左侧偏移栏数（等于同值 span 的宽度） */
+  offset: { type: Number, default: 0 },
+  /** 向右移动栏数 */
+  push: { type: Number, default: 0 },
+  /** 向左移动栏数 */
+  pull: { type: Number, default: 0 },
+  /** 覆盖父级总栏数（不传继承 Grid.cols） */
+  cols: { type: Number, default: void 0 },
+  /** xs 断点（<768px）：栅格数或 { span?, offset? } 对象 */
+  xs: { type: [Number, Object], default: void 0 },
+  /** sm 断点（≥768px）：栅格数或 { span?, offset? } 对象 */
+  sm: { type: [Number, Object], default: void 0 },
+  /** md 断点（≥992px）：栅格数或 { span?, offset? } 对象 */
+  md: { type: [Number, Object], default: void 0 },
+  /** lg 断点（≥1200px）：栅格数或 { span?, offset? } 对象 */
+  lg: { type: [Number, Object], default: void 0 },
+  /** xl 断点（≥1920px）：栅格数或 { span?, offset? } 对象 */
+  xl: { type: [Number, Object], default: void 0 },
+  /** 自定义元素标签（默认 div） */
+  tag: { type: String, default: "div" }
+};
+
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "QmGrid" },
+  __name: "grid",
+  props: gridProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const gutter = vue.computed(() => normalizeGutter(props.gutter));
+    const activeGutter = vue.ref([0, 0]);
+    let clearMediaListeners;
+    function isBreakpointActive(bp) {
+      if (typeof window === "undefined")
+        return false;
+      return window.matchMedia(`(min-width: ${gridBreakpointsMinWidth[bp]}px)`).matches;
+    }
+    vue.watch(
+      gutter,
+      (g) => {
+        clearMediaListeners?.();
+        clearMediaListeners = void 0;
+        const hasBps = Object.keys(g.bps).length > 0;
+        if (typeof window === "undefined" || !hasBps) {
+          activeGutter.value = resolveGutter(g, () => false);
+          return;
+        }
+        const sync = () => {
+          activeGutter.value = resolveGutter(g, isBreakpointActive);
+        };
+        const mqls = ["sm", "md", "lg", "xl"].filter((bp) => g.bps[bp] != null).map((bp) => window.matchMedia(`(min-width: ${gridBreakpointsMinWidth[bp]}px)`));
+        mqls.forEach((mql) => mql.addEventListener("change", sync));
+        clearMediaListeners = () => mqls.forEach((mql) => mql.removeEventListener("change", sync));
+        sync();
+      },
+      { immediate: true }
+    );
+    vue.onBeforeUnmount(() => {
+      clearMediaListeners?.();
+    });
+    const context = vue.computed(() => ({
+      cols: props.cols,
+      gutter: activeGutter.value
+    }));
+    vue.provide(gridContextKey, context);
+    const justifyMap = {
+      "start": "flex-start",
+      "end": "flex-end",
+      "center": "center",
+      "space-around": "space-around",
+      "space-between": "space-between",
+      "space-evenly": "space-evenly"
+    };
+    const alignMap = {
+      top: "flex-start",
+      middle: "center",
+      bottom: "flex-end"
+    };
+    const rootStyle = vue.computed(() => ({
+      // 水平 gutter：组件 Token --qm-grid-gap 行内覆盖（gutter=0 时显式 0px 抵消语义默认值）
+      "--qm-grid-gap": `${activeGutter.value[0]}px`,
+      "justify-content": justifyMap[props.justify],
+      "align-items": alignMap[props.align],
+      // 垂直 gutter：根负边距抵消 item 纵向内距
+      "margin-top": activeGutter.value[1] ? `-${activeGutter.value[1] / 2}px` : void 0,
+      "margin-bottom": activeGutter.value[1] ? `-${activeGutter.value[1] / 2}px` : void 0
+    }));
+    const __returned__ = { props, gutter, activeGutter, get clearMediaListeners() {
+      return clearMediaListeners;
+    }, set clearMediaListeners(v) {
+      clearMediaListeners = v;
+    }, isBreakpointActive, context, justifyMap, alignMap, rootStyle };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+	return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($setup.props.tag), {
+		class: "qm-grid",
+		style: vue.normalizeStyle($setup.rootStyle),
+		"data-qm": "grid"
+	}, {
+		default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+		_: 3
+	}, 8, ["style"]);
+}
+const Grid = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\grid\\grid.vue"]]);
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "QmGridItem" },
+  __name: "grid-item",
+  props: gridItemProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const context = vue.inject(gridContextKey, null);
+    const cols = vue.computed(() => props.cols ?? context?.value.cols ?? 24);
+    const gutter = vue.computed(() => context?.value.gutter ?? [0, 0]);
+    function breakpointVars(bp, value) {
+      if (value == null)
+        return {};
+      if (typeof value === "number")
+        return { [`--qm-col-span-${bp}`]: String(value) };
+      const vars = {};
+      if (value.span != null)
+        vars[`--qm-col-span-${bp}`] = String(value.span);
+      if (value.offset != null)
+        vars[`--qm-col-offset-${bp}`] = String(value.offset);
+      return vars;
+    }
+    const itemStyle = vue.computed(() => ({
+      "--qm-col-cols": String(cols.value),
+      "--qm-col-span": String(props.span),
+      "--qm-col-offset": String(props.offset ?? 0),
+      "--qm-col-push": String(props.push ?? 0),
+      "--qm-col-pull": String(props.pull ?? 0),
+      ...breakpointVars("xs", props.xs),
+      ...breakpointVars("sm", props.sm),
+      ...breakpointVars("md", props.md),
+      ...breakpointVars("lg", props.lg),
+      ...breakpointVars("xl", props.xl),
+      "padding-left": `${gutter.value[0] / 2}px`,
+      "padding-right": `${gutter.value[0] / 2}px`,
+      "padding-top": `${gutter.value[1] / 2}px`,
+      "padding-bottom": `${gutter.value[1] / 2}px`
+    }));
+    const __returned__ = { props, context, cols, gutter, breakpointVars, itemStyle };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($setup.props.tag), {
+		class: "qm-grid-item",
+		style: vue.normalizeStyle($setup.itemStyle),
+		"data-qm": "grid-item"
+	}, {
+		default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+		_: 3
+	}, 8, ["style"]);
+}
+const gridItem = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\grid\\grid-item.vue"]]);
+
+exports.Grid = Grid;
+exports.gridBreakpoints = gridBreakpoints;
+exports.gridBreakpointsMinWidth = gridBreakpointsMinWidth;
+exports.gridContextKey = gridContextKey;
+exports.gridItem = gridItem;
+exports.gridItemProps = gridItemProps;
+exports.gridProps = gridProps;
+exports.normalizeGutter = normalizeGutter;
+exports.resolveGutter = resolveGutter;

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

@@ -0,0 +1,75 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, renderSlot, normalizeClass, toDisplayString, createBlock, createCommentVNode } from 'vue';
+import { W as WindowControls } from './components.BwmjBLGS.mjs';
+import { _ as _export_sfc } from './components.OJRSZE6i.mjs';
+
+/**
+ * QmTitleBar 组件类型定义（桌面端 task）
+ * 类型先行：frameless 窗口标题栏，纯展示 + 拖拽区，无 Electron 依赖。
+ */
+/** props 声明 */
+declare const titleBarProps: {
+    /** 窗口标题（未提供 center 插槽时居中显示） */
+    readonly title: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 是否在右侧渲染 QmWindowControls */
+    readonly showControls: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    /**
+     * center 区是否参与窗口拖拽（P2-20）：
+     * 默认 true（整栏可拖拽）；置 false 时 center 区加 no-drag，供交互内容（输入框/按钮等）逃逸，
+     * 并移除 data-tauri-drag-region（Tauri 环境同样生效）。
+     */
+    readonly centerDrag: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+};
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmTitleBar" },
+  __name: "title-bar",
+  props: titleBarProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const __returned__ = { props, QmWindowControls: WindowControls };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = {
+	class: "qm-title-bar",
+	"data-qm": "title-bar",
+	"data-tauri-drag-region": ""
+};
+const _hoisted_2 = { class: "qm-title-bar__left" };
+const _hoisted_3 = ["data-tauri-drag-region"];
+const _hoisted_4 = {
+	class: "qm-title-bar__title",
+	"data-tauri-drag-region": ""
+};
+const _hoisted_5 = { class: "qm-title-bar__right" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("header", _hoisted_1, [
+		createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")]),
+		createElementVNode("div", {
+			class: normalizeClass(["qm-title-bar__center", { "qm-title-bar__center--no-drag": !$setup.props.centerDrag }]),
+			"data-tauri-drag-region": $setup.props.centerDrag ? "" : undefined
+		}, [renderSlot(_ctx.$slots, "center", {}, () => [createElementVNode(
+			"span",
+			_hoisted_4,
+			toDisplayString(_ctx.title),
+			1
+			/* TEXT */
+		)])], 10, _hoisted_3),
+		createElementVNode("div", _hoisted_5, [renderSlot(_ctx.$slots, "right"), _ctx.showControls ? (openBlock(), createBlock($setup["QmWindowControls"], { key: 0 })) : createCommentVNode("v-if", true)])
+	]);
+}
+var TitleBar = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\title-bar\\title-bar.vue"]]);
+
+export { TitleBar as T, titleBarProps as t };

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

@@ -0,0 +1,126 @@
+import { PropType, defineComponent, openBlock, createElementBlock, createElementVNode, createVNode, createBlock } from 'vue';
+import { a as Icon } from './components.C6sLxXPo.js';
+import { _ as _export_sfc } from './components.OJRSZE6i.js';
+
+/**
+ * QmWindowControls 组件类型定义（桌面端 task）
+ * 类型先行：窗口控制动作（最小化 / 最大化/还原 / 关闭）。
+ */
+/** 窗口控制动作 */
+type WindowAction = 'minimize' | 'maximize' | 'close';
+/** props 声明 */
+declare const windowControlsProps: {
+    /** 最小化回调（undefined 时降级 Electron bridge，均无则静默空操作） */
+    readonly onMinimize: {
+        readonly type: PropType<(() => void) | undefined>;
+        readonly default: undefined;
+    };
+    /** 最大化/还原回调 */
+    readonly onMaximize: {
+        readonly type: PropType<(() => void) | undefined>;
+        readonly default: undefined;
+    };
+    /** 关闭回调 */
+    readonly onClose: {
+        readonly type: PropType<(() => void) | undefined>;
+        readonly default: undefined;
+    };
+    /** 是否已最大化（切换最大化/还原图标） */
+    readonly maximized: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+/** emits 声明 */
+interface WindowControlsEmits {
+    minimize: [];
+    maximize: [];
+    close: [];
+}
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmWindowControls" },
+  __name: "window-controls",
+  props: windowControlsProps,
+  emits: ["minimize", "maximize", "close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    function getQingmingApi() {
+      if (typeof window === "undefined")
+        return void 0;
+      return window.qingmingAPI;
+    }
+    function invoke(action) {
+      const handlers = {
+        minimize: props.onMinimize,
+        maximize: props.onMaximize,
+        close: props.onClose
+      };
+      if (!handlers[action])
+        getQingmingApi()?.window?.[action]?.();
+      if (action === "minimize")
+        emit("minimize");
+      else if (action === "maximize")
+        emit("maximize");
+      else emit("close");
+    }
+    const __returned__ = { props, emit, getQingmingApi, invoke, get QmIcon() {
+      return Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = {
+	class: "qm-window-controls",
+	"data-qm": "window-controls",
+	role: "group",
+	"aria-label": "窗口控制"
+};
+const _hoisted_2 = ["aria-label", "title"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", _hoisted_1, [
+		createElementVNode("button", {
+			type: "button",
+			class: "qm-window-controls__button",
+			"aria-label": "最小化",
+			title: "最小化",
+			onClick: _cache[0] || (_cache[0] = ($event) => $setup.invoke("minimize"))
+		}, [createVNode($setup["QmIcon"], {
+			name: "minimize",
+			class: "qm-window-controls__icon"
+		})]),
+		createElementVNode("button", {
+			type: "button",
+			class: "qm-window-controls__button",
+			"aria-label": _ctx.maximized ? "还原" : "最大化",
+			title: _ctx.maximized ? "还原" : "最大化",
+			onClick: _cache[1] || (_cache[1] = ($event) => $setup.invoke("maximize"))
+		}, [!_ctx.maximized ? (openBlock(), createBlock($setup["QmIcon"], {
+			key: 0,
+			name: "maximize",
+			class: "qm-window-controls__icon"
+		})) : (openBlock(), createBlock($setup["QmIcon"], {
+			key: 1,
+			name: "minimize",
+			class: "qm-window-controls__icon"
+		}))], 8, _hoisted_2),
+		createElementVNode("button", {
+			type: "button",
+			class: "qm-window-controls__button qm-window-controls__button--close",
+			"aria-label": "关闭",
+			title: "关闭",
+			onClick: _cache[2] || (_cache[2] = ($event) => $setup.invoke("close"))
+		}, [createVNode($setup["QmIcon"], {
+			name: "close",
+			class: "qm-window-controls__icon"
+		})])
+	]);
+}
+var WindowControls = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\window-controls\\window-controls.vue"]]);
+
+export { WindowControls as W, windowControlsProps as w };
+export type { WindowAction as a, WindowControlsEmits as b };