@qingmingmu/components 0.1.0-beta.0

package/es/components/progress/style.css

@@ -0,0 +1,72 @@
+.qm-progress {
+  display: inline-flex;
+  gap: var(--qm-progress-gap);
+  align-items: center;
+}
+.qm-progress--line {
+  width: 100%;
+}
+.qm-progress__track {
+  flex: 1;
+  height: var(--qm-progress-height);
+  overflow: hidden;
+  background-color: var(--qm-progress-bg);
+  border-radius: var(--qm-progress-border-radius);
+}
+.qm-progress__bar {
+  height: 100%;
+  background-color: var(--qm-progress-track-bg);
+  border-radius: var(--qm-progress-border-radius);
+  transition: width var(--qm-progress-transition) ease;
+}
+.qm-progress__text {
+  font-size: var(--qm-progress-text-font-size);
+  color: var(--qm-progress-text-color);
+  white-space: nowrap;
+}
+.qm-progress--circle {
+  display: inline-flex;
+}
+.qm-progress__circle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--qm-progress-circle-size);
+  height: var(--qm-progress-circle-size);
+}
+.qm-progress__circle-svg {
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+.qm-progress__circle-track {
+  stroke: var(--qm-progress-bg);
+}
+.qm-progress__circle-bar {
+  stroke: var(--qm-progress-track-bg);
+  transition: stroke-dashoffset var(--qm-progress-transition) ease;
+}
+.qm-progress__circle-text {
+  position: absolute;
+  font-size: var(--qm-progress-text-font-size);
+  color: var(--qm-progress-text-color);
+}
+.qm-progress--success .qm-progress__bar {
+  background-color: var(--qm-progress-color-success);
+}
+.qm-progress--success .qm-progress__circle-bar {
+  stroke: var(--qm-progress-color-success);
+}
+.qm-progress--warning .qm-progress__bar {
+  background-color: var(--qm-progress-color-warning);
+}
+.qm-progress--warning .qm-progress__circle-bar {
+  stroke: var(--qm-progress-color-warning);
+}
+.qm-progress--error .qm-progress__bar {
+  background-color: var(--qm-progress-color-error);
+}
+.qm-progress--error .qm-progress__circle-bar {
+  stroke: var(--qm-progress-color-error);
+}

package/es/components/radio/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const radioGroup = require('../../shared/components.BxOtwzkp.cjs');
+require('vue');
+require('../../shared/components.DUidQ77e.cjs');
+
+
+
+exports.QmRadioGroup = radioGroup.radioGroup;
+exports.RADIO_GROUP_KEY = radioGroup.RADIO_GROUP_KEY;
+exports.default = radioGroup.Radio;
+exports.findNextEnabledIndex = radioGroup.findNextEnabledIndex;
+exports.isNextKey = radioGroup.isNextKey;
+exports.isPrevKey = radioGroup.isPrevKey;
+exports.radioGroupProps = radioGroup.radioGroupProps;
+exports.radioProps = radioGroup.radioProps;
+exports.useRadioGroup = radioGroup.useRadioGroup;
+exports.useRadioItem = radioGroup.useRadioItem;

package/es/components/radio/index.d.cts

@@ -0,0 +1,8 @@
+import { QmRadio as Radio } from '../../index.cjs';
+export { r as QmRadioGroup, a as RADIO_GROUP_KEY, b as RadioDirection, c as RadioEmits, d as RadioGroupContext, e as RadioGroupEmits, f as RadioItem, g as RadioSize, h as RadioValue, U as UseRadioGroupOptions, i as UseRadioItemOptions, j as UseRadioItemReturn, k as findNextEnabledIndex, l as isNextKey, m as isPrevKey, n as radioGroupProps, o as radioProps, u as useRadioGroup, p as useRadioItem } from '../../shared/components.Bn206h5z.cjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.cjs';
+
+
+
+export = Radio;

package/es/components/radio/index.d.mts

@@ -0,0 +1,8 @@
+import { R as Radio } from '../../shared/components.dIJZSGar.mjs';
+export { r as QmRadioGroup, a as RADIO_GROUP_KEY, b as RadioDirection, c as RadioEmits, d as RadioGroupContext, e as RadioGroupEmits, f as RadioItem, g as RadioSize, h as RadioValue, U as UseRadioGroupOptions, i as UseRadioItemOptions, j as UseRadioItemReturn, k as findNextEnabledIndex, l as isNextKey, m as isPrevKey, n as radioGroupProps, o as radioProps, u as useRadioGroup, p as useRadioItem } from '../../shared/components.dIJZSGar.mjs';
+import 'vue';
+import '../../shared/components.OJRSZE6i.mjs';
+
+
+
+export { Radio as default };

package/es/components/radio/index.d.ts

@@ -0,0 +1,8 @@
+import { QmRadio as Radio } from '../../index.js';
+export { r as QmRadioGroup, a as RADIO_GROUP_KEY, b as RadioDirection, c as RadioEmits, d as RadioGroupContext, e as RadioGroupEmits, f as RadioItem, g as RadioSize, h as RadioValue, U as UseRadioGroupOptions, i as UseRadioItemOptions, j as UseRadioItemReturn, k as findNextEnabledIndex, l as isNextKey, m as isPrevKey, n as radioGroupProps, o as radioProps, u as useRadioGroup, p as useRadioItem } from '../../shared/components.B4MHkqZP.js';
+import 'vue';
+import '../../shared/components.OJRSZE6i.js';
+
+
+
+export = Radio;

package/es/components/radio/index.mjs

@@ -0,0 +1,8 @@
+import { R as Radio } from '../../shared/components.BL34tX_n.mjs';
+export { r as QmRadioGroup, a as RADIO_GROUP_KEY, f as findNextEnabledIndex, i as isNextKey, b as isPrevKey, c as radioGroupProps, d as radioProps, u as useRadioGroup, e as useRadioItem } from '../../shared/components.BL34tX_n.mjs';
+import 'vue';
+import '../../shared/components.pcqpp-6-.mjs';
+
+
+
+export { Radio as default };

package/es/components/radio/style/index.js

@@ -0,0 +1,4 @@
+// 样式入口（组件体系设计 §6.4）：import 编译产物 CSS。
+// 发布形态：与 es/components/radio/style.css 同目录，由 resolver 按需注入；
+// 源码开发场景由 Vite 直接编译 index.scss（play 沙箱）。
+import './style.css'

package/es/components/radio/style.css

@@ -0,0 +1,109 @@
+@charset "UTF-8";
+.qm-radio {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  gap: var(--qm-radio-gap);
+  align-items: center;
+  padding: 2px 0;
+  font-size: var(--qm-radio-label-font-size);
+  color: var(--qm-radio-label-color);
+  cursor: pointer;
+  user-select: none;
+  /* ===== 原生 input：视觉隐藏但覆盖整个 label，保留聚焦/点击/键盘 ===== */
+}
+.qm-radio__original {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  cursor: inherit;
+  outline: none;
+  border: none;
+  opacity: 0;
+}
+.qm-radio {
+  /* ===== 自定义圆点（选中态纯色填满，无内点） ===== */
+}
+.qm-radio__dot {
+  position: relative;
+  z-index: 0;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--qm-radio-size-medium);
+  height: var(--qm-radio-size-medium);
+  background-color: var(--qm-radio-bg);
+  border: 1px solid var(--qm-radio-border);
+  border-radius: var(--qm-radio-border-radius);
+  transition: background-color var(--qm-radio-transition) ease, border-color var(--qm-radio-transition) ease, box-shadow var(--qm-radio-transition) ease;
+}
+.qm-radio {
+  /* ===== 文案 ===== */
+}
+.qm-radio__label {
+  min-width: 0;
+  line-height: 1.4;
+  white-space: nowrap;
+}
+.qm-radio {
+  /* ===== hover（未选中）：边框加深 ===== */
+}
+.qm-radio:hover:not(.qm-radio--disabled, .qm-radio--checked) .qm-radio__dot {
+  border-color: var(--qm-radio-hover-border);
+}
+.qm-radio {
+  /* ===== 选中态：填充主色 + 天青晕染环（青冥品牌意象，纯色填满无内点） ===== */
+}
+.qm-radio--checked .qm-radio__dot {
+  background-color: var(--qm-radio-checked-bg);
+  border-color: var(--qm-radio-checked-border);
+  box-shadow: var(--qm-radio-checked-ring);
+}
+.qm-radio {
+  /* ===== 焦点环（input focus-visible 时相邻 dot 显示） ===== */
+}
+.qm-radio__original:focus-visible ~ .qm-radio__dot {
+  box-shadow: var(--qm-radio-focus-ring);
+}
+.qm-radio {
+  /* ===== 禁用 ===== */
+}
+.qm-radio--disabled {
+  color: var(--qm-radio-disabled-color);
+  cursor: not-allowed;
+}
+.qm-radio--disabled .qm-radio__dot {
+  background-color: var(--qm-radio-disabled-bg);
+  border-color: var(--qm-radio-border);
+}
+.qm-radio {
+  /* ===== 尺寸修饰符 ===== */
+}
+.qm-radio--small .qm-radio__dot {
+  width: var(--qm-radio-size-small);
+  height: var(--qm-radio-size-small);
+}
+.qm-radio--large .qm-radio__dot {
+  width: var(--qm-radio-size-large);
+  height: var(--qm-radio-size-large);
+}
+
+/* ============================================================
+ *  QmRadioGroup（组容器）
+ * ============================================================ */
+.qm-radio-group {
+  display: inline-flex;
+  flex-flow: row wrap;
+  gap: var(--qm-radio-group-gap);
+  align-items: center;
+}
+.qm-radio-group--vertical {
+  flex-flow: column nowrap;
+  gap: var(--qm-radio-group-gap-vertical);
+}

package/es/components/row/index.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const gridItem = require('../../shared/components.r5I_hKLX.cjs');
+require('vue');
+require('../../shared/components.DUidQ77e.cjs');
+
+
+
+exports.QmGrid = gridItem.Grid;
+exports.QmGridItem = gridItem.gridItem;
+exports.QmRow = gridItem.Grid;
+exports.default = gridItem.Grid;
+exports.gridBreakpoints = gridItem.gridBreakpoints;
+exports.gridBreakpointsMinWidth = gridItem.gridBreakpointsMinWidth;
+exports.gridContextKey = gridItem.gridContextKey;
+exports.gridItemProps = gridItem.gridItemProps;
+exports.gridProps = gridItem.gridProps;
+exports.normalizeGutter = gridItem.normalizeGutter;
+exports.resolveGutter = gridItem.resolveGutter;

package/es/components/row/index.d.cts

@@ -0,0 +1,287 @@
+import { PropType, InjectionKey, ComputedRef, defineComponent, computed, ref, watch, onBeforeUnmount, provide, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, withCtx, renderSlot, inject } from 'vue';
+import { _ as _export_sfc } from '../../shared/components.OJRSZE6i.cjs';
+
+/**
+ * QmGrid / QmGridItem 组件类型定义（组件体系设计 §6.4：类型先行）
+ * 布局-02：24 栏弹性栅格（对照 Element Plus Row/Col 属性清单自查修复）：
+ * - QmGrid：gutter（数字 / [水平, 垂直] / 响应式对象 {xs,sm,md,lg,xl}）
+ *   | justify（start/end/center/space-around/space-between/space-evenly）
+ *   | align（top/middle/bottom）| tag（自定义元素标签）| cols（总栏数，默认 24）；
+ * - QmGridItem：span / offset / push / pull / cols（可覆盖父级总栏数）
+ *   + 响应式断点 xs/sm/md/lg/xl（数字或 { span?, offset? } 对象，断点值同 Element Plus：
+ *   xs<768，sm≥768，md≥992，lg≥1200，xl≥1920），经 provide/inject 共享 Grid 上下文；
+ * - row shim 为兼容入口，重导出自本模块（勿改）。
+ */
+
+/** 水平对齐（justify-content 语义，含 space-evenly） */
+type GridJustify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
+/** 垂直对齐（align-items 语义） */
+type GridAlign = 'top' | 'middle' | 'bottom';
+/** 响应式断点标识（与 Element Plus 一致：xs/sm/md/lg/xl） */
+declare const gridBreakpoints: readonly ["xs", "sm", "md", "lg", "xl"];
+type GridBreakpoint = (typeof gridBreakpoints)[number];
+/** 断点最小宽度（px，与 Element Plus 一致） */
+declare const gridBreakpointsMinWidth: Record<Exclude<GridBreakpoint, 'xs'>, number>;
+/** 栅格间距：number 双向一致；[number, number] 为 [水平, 垂直]；对象为响应式断点值（水平=垂直） */
+type GridGutter = number | [number, number] | Partial<Record<GridBreakpoint, number>>;
+/** 断点栅格值：number（span）或 { span?, offset? } 对象 */
+type GridColSize = number | {
+    span?: number;
+    offset?: number;
+};
+/** Grid → GridItem 共享上下文 */
+interface GridContext {
+    /** 总栏数（默认 24） */
+    cols: number;
+    /** 当前生效栅格间距 [水平, 垂直]（px，响应式对象时随断点切换） */
+    gutter: [number, number];
+}
+/** provide/inject 键（ComputedRef：随 props 响应式更新） */
+declare const gridContextKey: InjectionKey<ComputedRef<GridContext>>;
+/**
+ * gutter 归一化：number → [n, n]；数组 → [h, v]；响应式对象 → 各断点值（h=v=值，xs 为基准）
+ */
+declare function normalizeGutter(gutter: GridGutter): {
+    base: [number, number];
+    bps: Partial<Record<GridBreakpoint, number>>;
+};
+/**
+ * 解析当前激活 gutter：从大到小匹配断点（≥ 断点最小宽度生效），无匹配回退基准值
+ * @param normalized normalizeGutter 的产物
+ * @param isActive 断点是否激活（由调用方注入 matchMedia 判定，便于测试）
+ */
+declare function resolveGutter(normalized: ReturnType<typeof normalizeGutter>, isActive: (bp: Exclude<GridBreakpoint, 'xs'>) => boolean): [number, number];
+/** QmGrid props 声明 */
+declare const gridProps: {
+    /** 栅格间距（px）：number 双向一致；[number, number] 为 [水平, 垂直]；对象为响应式断点值 */
+    readonly gutter: {
+        readonly type: PropType<GridGutter>;
+        readonly default: 0;
+    };
+    /** 水平对齐：start / end / center / space-around / space-between / space-evenly */
+    readonly justify: {
+        readonly type: PropType<GridJustify>;
+        readonly default: "start";
+    };
+    /** 垂直对齐：top / middle / bottom */
+    readonly align: {
+        readonly type: PropType<GridAlign>;
+        readonly default: "top";
+    };
+    /** 自定义元素标签（默认 div，如 ul/section 等） */
+    readonly tag: {
+        readonly type: StringConstructor;
+        readonly default: "div";
+    };
+    /** 总栏数（默认 24） */
+    readonly cols: {
+        readonly type: NumberConstructor;
+        readonly default: 24;
+    };
+};
+/** QmGridItem props 声明 */
+declare const gridItemProps: {
+    /** 占用栏数（相对总栏数） */
+    readonly span: {
+        readonly type: NumberConstructor;
+        readonly default: 24;
+    };
+    /** 左侧偏移栏数（等于同值 span 的宽度） */
+    readonly offset: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    /** 向右移动栏数 */
+    readonly push: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    /** 向左移动栏数 */
+    readonly pull: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    /** 覆盖父级总栏数（不传继承 Grid.cols） */
+    readonly cols: {
+        readonly type: NumberConstructor;
+        readonly default: undefined;
+    };
+    /** xs 断点（<768px）：栅格数或 { span?, offset? } 对象 */
+    readonly xs: {
+        readonly type: PropType<GridColSize>;
+        readonly default: undefined;
+    };
+    /** sm 断点（≥768px）：栅格数或 { span?, offset? } 对象 */
+    readonly sm: {
+        readonly type: PropType<GridColSize>;
+        readonly default: undefined;
+    };
+    /** md 断点（≥992px）：栅格数或 { span?, offset? } 对象 */
+    readonly md: {
+        readonly type: PropType<GridColSize>;
+        readonly default: undefined;
+    };
+    /** lg 断点（≥1200px）：栅格数或 { span?, offset? } 对象 */
+    readonly lg: {
+        readonly type: PropType<GridColSize>;
+        readonly default: undefined;
+    };
+    /** xl 断点（≥1920px）：栅格数或 { span?, offset? } 对象 */
+    readonly xl: {
+        readonly type: PropType<GridColSize>;
+        readonly default: undefined;
+    };
+    /** 自定义元素标签（默认 div） */
+    readonly tag: {
+        readonly type: StringConstructor;
+        readonly default: "div";
+    };
+};
+
+var _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmGrid" },
+  __name: "grid",
+  props: gridProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const gutter = computed(() => normalizeGutter(props.gutter));
+    const activeGutter = ref([0, 0]);
+    let clearMediaListeners;
+    function isBreakpointActive(bp) {
+      if (typeof window === "undefined")
+        return false;
+      return window.matchMedia(`(min-width: ${gridBreakpointsMinWidth[bp]}px)`).matches;
+    }
+    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 }
+    );
+    onBeforeUnmount(() => {
+      clearMediaListeners?.();
+    });
+    const context = computed(() => ({
+      cols: props.cols,
+      gutter: activeGutter.value
+    }));
+    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 = 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 openBlock(), createBlock(resolveDynamicComponent($setup.props.tag), {
+		class: "qm-grid",
+		style: normalizeStyle($setup.rootStyle),
+		"data-qm": "grid"
+	}, {
+		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+		_: 3
+	}, 8, ["style"]);
+}
+var Grid = /*#__PURE__*/ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\grid\\grid.vue"]]);
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmGridItem" },
+  __name: "grid-item",
+  props: gridItemProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const context = inject(gridContextKey, null);
+    const cols = computed(() => props.cols ?? context?.value.cols ?? 24);
+    const gutter = 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 = 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 openBlock(), createBlock(resolveDynamicComponent($setup.props.tag), {
+		class: "qm-grid-item",
+		style: normalizeStyle($setup.itemStyle),
+		"data-qm": "grid-item"
+	}, {
+		default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+		_: 3
+	}, 8, ["style"]);
+}
+var gridItem = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\grid\\grid-item.vue"]]);
+
+// @ts-ignore
+export = Grid;
+export { Grid as QmGrid, gridItem as QmGridItem, Grid as QmRow, gridBreakpoints, gridBreakpointsMinWidth, gridContextKey, gridItemProps, gridProps, normalizeGutter, resolveGutter };
+export type { GridAlign, GridBreakpoint, GridColSize, GridContext, GridGutter, GridJustify };