@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.CRZMSxSQ.mjs

@@ -0,0 +1,77 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, Fragment, renderList, renderSlot } from 'vue';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+const skeletonProps = {
+  /** 是否加载中：false 时渲染默认插槽（真实内容） */
+  loading: { type: Boolean, default: true },
+  /** 段落行数（至少 1 行） */
+  rows: { type: Number, default: 3 },
+  /** 是否显示头像占位 */
+  avatar: { type: Boolean, default: false },
+  /** 是否开启动画（渐变 shimmer） */
+  animated: { type: Boolean, default: true }
+};
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmSkeleton" },
+  __name: "skeleton",
+  props: skeletonProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const rowCount = computed(() => Math.max(1, Math.floor(props.rows)));
+    const modifierClass = computed(() => ({
+      "qm-skeleton--animated": props.animated,
+      "qm-skeleton--avatar": props.avatar
+    }));
+    const __returned__ = { props, rowCount, modifierClass };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = {
+	key: 0,
+	class: "qm-skeleton__avatar",
+	"aria-hidden": "true"
+};
+const _hoisted_2 = {
+	class: "qm-skeleton__paragraph",
+	"aria-hidden": "true"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return _ctx.loading ? (openBlock(), createElementBlock(
+		"div",
+		{
+			key: 0,
+			class: normalizeClass(["qm-skeleton", $setup.modifierClass]),
+			"data-qm": "skeleton",
+			role: "status",
+			"aria-busy": "true",
+			"aria-live": "polite"
+		},
+		[_ctx.avatar ? (openBlock(), createElementBlock("div", _hoisted_1)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(
+			Fragment,
+			null,
+			renderList($setup.rowCount, (i) => {
+				return openBlock(), createElementBlock(
+					"div",
+					{
+						key: i,
+						class: normalizeClass(["qm-skeleton__row", { "qm-skeleton__row--short": i === $setup.rowCount && $setup.rowCount > 1 }])
+					},
+					null,
+					2
+					/* CLASS */
+				);
+			}),
+			128
+			/* KEYED_FRAGMENT */
+		))])],
+		2
+		/* CLASS */
+	)) : renderSlot(_ctx.$slots, "default", {}, undefined, undefined, 1);
+}
+const Skeleton = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\skeleton\\skeleton.vue"]]);
+
+export { Skeleton as S, skeletonProps as s };

package/es/shared/components.CRtd1JMp.cjs

@@ -0,0 +1,86 @@
+'use strict';
+
+const vue = require('vue');
+const icons = require('@qingmingmu/icons');
+const exportHelper = require('./components.DUidQ77e.cjs');
+
+const iconProps = {
+  /** 图标名（来自 @qingmingmu/icons 的 iconNames）；为空时渲染插槽或空 */
+  name: { type: String, default: "" },
+  /** 尺寸：small | medium | large 走分档 Token；string/number 自定义（number 按 px） */
+  size: {
+    type: [String, Number],
+    default: "medium"
+  },
+  /** 颜色（默认继承 --qm-icon-color） */
+  color: { type: String, default: "" },
+  /** 单色模式：多色图标强制降级为单色（通道色覆盖为 currentColor，随 --qm-icon-color） */
+  mono: { type: Boolean, default: false }
+};
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "QmIcon" },
+  __name: "icon",
+  props: iconProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const enumSize = vue.computed(
+      () => props.size === "small" || props.size === "medium" || props.size === "large" ? props.size : null
+    );
+    const customFontSize = vue.computed(() => {
+      if (enumSize.value)
+        return void 0;
+      if (typeof props.size === "number")
+        return `${props.size}px`;
+      return props.size || void 0;
+    });
+    const iconComp = vue.computed(() => {
+      if (!props.name)
+        return null;
+      return icons.iconMap[props.name] ?? null;
+    });
+    const isMulticolor = vue.computed(
+      () => !!props.name && icons.multicolorIconNames.includes(props.name)
+    );
+    const rootStyle = vue.computed(() => ({
+      fontSize: customFontSize.value,
+      color: props.color || void 0
+    }));
+    const modifierClass = vue.computed(() => {
+      const classes = [];
+      if (enumSize.value)
+        classes.push(`qm-icon--${enumSize.value}`);
+      if (props.mono)
+        classes.push("qm-icon--mono");
+      else if (isMulticolor.value)
+        classes.push("qm-icon--multicolor");
+      return classes;
+    });
+    const __returned__ = { props, enumSize, customFontSize, iconComp, isMulticolor, rootStyle, modifierClass };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return vue.openBlock(), vue.createElementBlock(
+		"span",
+		{
+			class: vue.normalizeClass(["qm-icon", $setup.modifierClass]),
+			style: vue.normalizeStyle($setup.rootStyle),
+			"data-qm": "icon",
+			"aria-hidden": "true"
+		},
+		[_ctx.$slots.default ? vue.renderSlot(_ctx.$slots, "default", {}, undefined, undefined, 0) : $setup.iconComp ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($setup.iconComp), {
+			key: 1,
+			size: "1em"
+		})) : vue.createCommentVNode("v-if", true)],
+		6
+		/* CLASS, STYLE */
+	);
+}
+const Icon = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\icon\\icon.vue"]]);
+
+exports.Icon = Icon;
+exports.iconProps = iconProps;

package/es/shared/components.CTP-w8Dp.d.mts

@@ -0,0 +1,85 @@
+import { PropType, defineComponent, onMounted, openBlock, createElementBlock, normalizeClass, createBlock } from 'vue';
+import { useTheme } from '@qingmingmu/hooks';
+import { a as Icon } from './components.DCuPins-.mjs';
+import { _ as _export_sfc } from './components.OJRSZE6i.mjs';
+
+/**
+ * QmThemeToggle 组件类型定义（桌面端 task）
+ * 类型先行：纯前端主题切换按钮，联动 @qingmingmu/hooks useTheme。
+ */
+/** 初始主题模式 */
+type ThemeToggleMode = 'light' | 'dark' | 'system';
+/** 按钮尺寸 */
+type ThemeToggleSize = 'small' | 'medium' | 'large';
+/** props 声明 */
+declare const themeToggleProps: {
+    /** 初始主题模式（挂载时应用一次；缺省跟随 useTheme 单例） */
+    readonly mode: {
+        readonly type: PropType<ThemeToggleMode>;
+        readonly default: undefined;
+    };
+    /** 按钮尺寸 */
+    readonly size: {
+        readonly type: PropType<ThemeToggleSize>;
+        readonly default: "medium";
+    };
+};
+/** emits 声明 */
+interface ThemeToggleEmits {
+    /** 切换后的主题（'light' | 'dark'） */
+    change: [mode: 'light' | 'dark'];
+}
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmThemeToggle" },
+  __name: "theme-toggle",
+  props: themeToggleProps,
+  emits: ["change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const { isDark, setStyle } = useTheme();
+    onMounted(() => {
+      if (props.mode) {
+        if (props.mode === "system")
+          setStyle("system");
+        else setStyle(props.mode === "dark" ? "black" : "white");
+      }
+    });
+    function toggle() {
+      const next = isDark.value ? "white" : "black";
+      setStyle(next);
+      emit("change", next === "black" ? "dark" : "light");
+    }
+    const __returned__ = { props, emit, isDark, setStyle, toggle, get QmIcon() {
+      return Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = ["aria-label", "title"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("button", {
+		type: "button",
+		class: normalizeClass(["qm-theme-toggle", `qm-theme-toggle--${_ctx.size}`]),
+		"data-qm": "theme-toggle",
+		"aria-label": $setup.isDark ? "切换到亮色模式" : "切换到暗色模式",
+		title: $setup.isDark ? "切换到亮色模式" : "切换到暗色模式",
+		onClick: $setup.toggle
+	}, [$setup.isDark ? (openBlock(), createBlock($setup["QmIcon"], {
+		key: 0,
+		name: "sun",
+		class: "qm-theme-toggle__icon"
+	})) : (openBlock(), createBlock($setup["QmIcon"], {
+		key: 1,
+		name: "moon",
+		class: "qm-theme-toggle__icon"
+	}))], 10, _hoisted_1);
+}
+var ThemeToggle = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\theme-toggle\\theme-toggle.vue"]]);
+
+export { ThemeToggle as T, themeToggleProps as t };
+export type { ThemeToggleEmits as a, ThemeToggleMode as b, ThemeToggleSize as c };

package/es/shared/components.CUxPJ0rN.cjs

@@ -0,0 +1,177 @@
+'use strict';
+
+const vue = require('vue');
+
+function splitPlacement(placement) {
+  if (placement === "top-start" || placement === "top-end" || placement === "bottom-start" || placement === "bottom-end") {
+    const [base, align] = placement.split("-");
+    return { base, align };
+  }
+  return { base: placement, align: null };
+}
+function placementName(base, align) {
+  return align ? `${base}-${align}` : base;
+}
+function computePosition(triggerRect, panelSize, viewportSize, placement, offset = 4, flip = true) {
+  const { base, align } = splitPlacement(placement);
+  const leftFor = (isEnd) => isEnd ? triggerRect.right - panelSize.width : triggerRect.left;
+  switch (base) {
+    case "bottom": {
+      const fitsDown = triggerRect.bottom + offset + panelSize.height <= viewportSize.height;
+      if (flip && !fitsDown) {
+        return {
+          top: triggerRect.top - offset - panelSize.height,
+          left: leftFor(align === "end"),
+          placement: placementName("top", align),
+          flipped: true
+        };
+      }
+      return {
+        top: triggerRect.bottom + offset,
+        left: leftFor(align === "end"),
+        placement: placementName("bottom", align),
+        flipped: false
+      };
+    }
+    case "top": {
+      const fitsUp = triggerRect.top - offset - panelSize.height >= 0;
+      if (flip && !fitsUp) {
+        return {
+          top: triggerRect.bottom + offset,
+          left: leftFor(align === "end"),
+          placement: placementName("bottom", align),
+          flipped: true
+        };
+      }
+      return {
+        top: triggerRect.top - offset - panelSize.height,
+        left: leftFor(align === "end"),
+        placement: placementName("top", align),
+        flipped: false
+      };
+    }
+    case "right": {
+      const fitsRight = triggerRect.right + offset + panelSize.width <= viewportSize.width;
+      if (flip && !fitsRight) {
+        return {
+          top: triggerRect.top,
+          left: triggerRect.left - offset - panelSize.width,
+          placement: "left",
+          flipped: true
+        };
+      }
+      return {
+        top: triggerRect.top,
+        left: triggerRect.right + offset,
+        placement: "right",
+        flipped: false
+      };
+    }
+    case "left": {
+      const fitsLeft = triggerRect.left - offset - panelSize.width >= 0;
+      if (flip && !fitsLeft) {
+        return {
+          top: triggerRect.top,
+          left: triggerRect.right + offset,
+          placement: "right",
+          flipped: true
+        };
+      }
+      return {
+        top: triggerRect.top,
+        left: triggerRect.left - offset - panelSize.width,
+        placement: "left",
+        flipped: false
+      };
+    }
+  }
+}
+const MAX_RETRY = 10;
+function usePositioning(options) {
+  const {
+    triggerRef,
+    panelRef,
+    placement,
+    offset = 4,
+    flip = true,
+    matchTriggerWidth = false
+  } = options;
+  const positionStyle = vue.ref({
+    position: "fixed",
+    visibility: "hidden"
+  });
+  const actualPlacement = vue.ref(placement.value);
+  let retryCount = 0;
+  let disposed = false;
+  let pendingRaf = null;
+  function onViewportChange() {
+    void updatePosition();
+  }
+  function cancelPendingRaf() {
+    if (pendingRaf !== null) {
+      cancelAnimationFrame(pendingRaf);
+      pendingRaf = null;
+    }
+  }
+  async function updatePosition() {
+    if (disposed)
+      return;
+    await vue.nextTick();
+    if (disposed)
+      return;
+    const trigger = triggerRef.value;
+    const panel = panelRef.value;
+    if (!trigger || !panel) {
+      if (retryCount < MAX_RETRY) {
+        retryCount += 1;
+        cancelPendingRaf();
+        pendingRaf = requestAnimationFrame(() => {
+          pendingRaf = null;
+          void updatePosition();
+        });
+      }
+      return;
+    }
+    retryCount = 0;
+    const rect = trigger.getBoundingClientRect();
+    const panelSize = { width: panel.offsetWidth, height: panel.offsetHeight };
+    const viewportSize = {
+      width: typeof window === "undefined" ? 0 : window.innerWidth,
+      height: typeof window === "undefined" ? 0 : window.innerHeight
+    };
+    const pos = computePosition(rect, panelSize, viewportSize, placement.value, offset, flip);
+    actualPlacement.value = pos.placement;
+    const style = {
+      position: "fixed",
+      top: `${pos.top}px`,
+      left: `${pos.left}px`,
+      visibility: "visible"
+    };
+    if (matchTriggerWidth)
+      style.width = `${rect.width}px`;
+    positionStyle.value = style;
+  }
+  function startAutoReposition() {
+    window.addEventListener("scroll", onViewportChange, true);
+    window.addEventListener("resize", onViewportChange, true);
+  }
+  function stopAutoReposition() {
+    window.removeEventListener("scroll", onViewportChange, true);
+    window.removeEventListener("resize", onViewportChange, true);
+  }
+  function dispose() {
+    disposed = true;
+    cancelPendingRaf();
+    stopAutoReposition();
+  }
+  return {
+    positionStyle,
+    actualPlacement,
+    updatePosition,
+    startAutoReposition,
+    stopAutoReposition,
+    dispose
+  };
+}
+
+exports.usePositioning = usePositioning;