@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.BRHYPvpL.mjs

@@ -0,0 +1,76 @@
+import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, createCommentVNode } from 'vue';
+import { I as Icon } from './components.D3on6_fI.mjs';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+const tagProps = {
+  /** 语义类型：default / primary / success / warning / error */
+  type: { type: String, default: "default" },
+  /** 尺寸：small / medium / large */
+  size: { type: String, default: "medium" },
+  /** 可关闭：显示关闭按钮，点击 emit close */
+  closable: { type: Boolean, default: false },
+  /** 胶囊圆角 */
+  round: { type: Boolean, default: false },
+  /** 主题效果：light / dark / plain */
+  effect: { type: String, default: "light" }
+};
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmTag" },
+  __name: "tag",
+  props: tagProps,
+  emits: ["close"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const modifierClass = computed(() => {
+      const classes = [
+        `qm-tag--${props.type}`,
+        `qm-tag--${props.size}`,
+        `qm-tag--${props.effect}`
+      ];
+      if (props.round)
+        classes.push("qm-tag--round");
+      if (props.closable)
+        classes.push("qm-tag--closable");
+      return classes;
+    });
+    function handleClose() {
+      emit("close");
+    }
+    const __returned__ = { props, emit, modifierClass, handleClose, get QmIcon() {
+      return Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = { class: "qm-tag__content" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"span",
+		{
+			class: normalizeClass(["qm-tag", $setup.modifierClass]),
+			"data-qm": "tag"
+		},
+		[createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), _ctx.closable ? (openBlock(), createElementBlock("button", {
+			key: 0,
+			type: "button",
+			class: "qm-tag__close",
+			"aria-label": "关闭",
+			tabindex: "-1",
+			onClick: $setup.handleClose
+		}, [createVNode($setup["QmIcon"], {
+			name: "close",
+			class: "qm-tag__close-icon",
+			style: { "font-size": "12px" }
+		})])) : createCommentVNode("v-if", true)],
+		2
+		/* CLASS */
+	);
+}
+const Tag = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\tag\\tag.vue"]]);
+
+export { Tag as T, tagProps as t };

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

@@ -0,0 +1,192 @@
+import { PropType, Ref, ComputedRef, defineComponent, toRef, computed, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, createElementVNode, createVNode } from 'vue';
+import { a as Icon } from './components.DCuPins-.mjs';
+import { _ as _export_sfc } from './components.OJRSZE6i.mjs';
+
+/**
+ * QmSwitch 组件类型定义（组件体系设计 §6.4：类型先行）
+ * 03-T8：开关切换、三档尺寸、禁用、加载态、自定义文字、自定义值、键盘导航
+ */
+
+/** 开关尺寸（§6.3：尺寸枚举统一 small | medium | large） */
+type SwitchSize = 'small' | 'medium' | 'large';
+/** 开关值：boolean / string / number（自定义值通过 activeValue/inactiveValue 映射） */
+type SwitchValue = string | number | boolean;
+/** props 声明（纯类型 + 默认值，供 SFC 与命令式 API 复用） */
+declare const switchProps: {
+    /** 受控值（v-model）；未传即非受控（组件内自维护） */
+    readonly modelValue: {
+        readonly type: PropType<SwitchValue>;
+        readonly default: false;
+    };
+    /** 禁用态：视觉 + 行为（不可点击/键盘），aria-disabled */
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 加载态：禁用点击 + 滑块内旋转图标（SVG currentColor）+ aria-busy="true" */
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 尺寸：small / medium / large */
+    readonly size: {
+        readonly type: PropType<SwitchSize>;
+        readonly default: "medium";
+    };
+    /** 开启态文字（轨道内，随状态切换显示） */
+    readonly activeText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 关闭态文字（轨道内，随状态切换显示） */
+    readonly inactiveText: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    /** 开启时的值（默认 true；支持 string/number/boolean 自定义值） */
+    readonly activeValue: {
+        readonly type: PropType<SwitchValue>;
+        readonly default: true;
+    };
+    /** 关闭时的值（默认 false；支持 string/number/boolean 自定义值） */
+    readonly inactiveValue: {
+        readonly type: PropType<SwitchValue>;
+        readonly default: false;
+    };
+};
+/** emits 声明 */
+interface SwitchEmits {
+    /** 值同步（v-model） */
+    'update:modelValue': [value: SwitchValue];
+    /** 切换时触发（携带当前值，为 activeValue 或 inactiveValue） */
+    'change': [value: SwitchValue];
+}
+
+/**
+ * useSwitch 行为层（03-T8 §3.2 / §4）
+ *
+ * 职责（与视图解耦，可独立单测）：
+ * - 开启/关闭状态派生（当前值 === activeValue）；
+ * - 双模式：内部状态即时反馈 + 外部 modelValue 变更同步（受控/非受控统一）；
+ * - 切换逻辑 + 禁用/加载守卫（disabled 或 loading 时不切换）；
+ * - 值映射：emit 的是 activeValue / inactiveValue 而非固定 boolean；
+ * - 键盘契约（WAI-ARIA switch 模式）：Space / Enter 切换。
+ */
+
+interface UseSwitchOptions {
+    /** 受控值（props.modelValue） */
+    modelValue: Ref<SwitchValue>;
+    /** 禁用 */
+    disabled: Ref<boolean>;
+    /** 加载态（与 disabled 同等守卫：不可切换） */
+    loading: Ref<boolean>;
+    /** 开启时的值 */
+    activeValue: Ref<SwitchValue>;
+    /** 关闭时的值 */
+    inactiveValue: Ref<SwitchValue>;
+    emitUpdate: (value: SwitchValue) => void;
+    emitChange: (value: SwitchValue) => void;
+}
+interface UseSwitchReturn {
+    /** 是否开启（当前值 === activeValue） */
+    checked: ComputedRef<boolean>;
+    /** 是否可交互（!disabled && !loading） */
+    interactive: ComputedRef<boolean>;
+    /** 切换：开启↔关闭，emit 对应 activeValue / inactiveValue */
+    toggle: () => void;
+    /** 键盘：Space / Enter 切换（preventDefault 避免 Space 滚动页面） */
+    handleKeydown: (event: KeyboardEvent) => void;
+}
+declare function useSwitch(options: UseSwitchOptions): UseSwitchReturn;
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmSwitch" },
+  __name: "switch",
+  props: switchProps,
+  emits: ["update:modelValue", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const modelValue = toRef(props, "modelValue");
+    const disabled = toRef(props, "disabled");
+    const loading = toRef(props, "loading");
+    const activeValue = toRef(props, "activeValue");
+    const inactiveValue = toRef(props, "inactiveValue");
+    const sw = useSwitch({
+      modelValue,
+      disabled,
+      loading,
+      activeValue,
+      inactiveValue,
+      emitUpdate: (value) => emit("update:modelValue", value),
+      emitChange: (value) => emit("change", value)
+    });
+    const { checked, interactive } = sw;
+    const text = computed(() => checked.value ? props.activeText : props.inactiveText);
+    const hasText = computed(() => Boolean(props.activeText || props.inactiveText));
+    const modifierClass = computed(() => {
+      const classes = [`qm-switch--${props.size}`];
+      if (checked.value)
+        classes.push("qm-switch--checked");
+      if (props.disabled)
+        classes.push("qm-switch--disabled");
+      if (props.loading)
+        classes.push("qm-switch--loading");
+      if (hasText.value)
+        classes.push("qm-switch--text");
+      return classes;
+    });
+    const __returned__ = { props, emit, modelValue, disabled, loading, activeValue, inactiveValue, sw, checked, interactive, text, hasText, modifierClass, get QmIcon() {
+      return Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = [
+	"aria-checked",
+	"aria-disabled",
+	"aria-busy",
+	"aria-label",
+	"tabindex"
+];
+const _hoisted_2 = {
+	key: 0,
+	class: "qm-switch__text"
+};
+const _hoisted_3 = {
+	class: "qm-switch__knob",
+	"aria-hidden": "true"
+};
+const _hoisted_4 = {
+	key: 0,
+	class: "qm-switch__loading-icon"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass(["qm-switch", $setup.modifierClass]),
+		role: "switch",
+		"aria-checked": $setup.checked,
+		"aria-disabled": $setup.disabled || undefined,
+		"aria-busy": $setup.loading || undefined,
+		"aria-label": $setup.text || undefined,
+		tabindex: $setup.interactive ? 0 : -1,
+		onClick: _cache[0] || (_cache[0] = (...args) => $setup.sw.toggle && $setup.sw.toggle(...args)),
+		onKeydown: _cache[1] || (_cache[1] = (...args) => $setup.sw.handleKeydown && $setup.sw.handleKeydown(...args))
+	}, [$setup.text ? (openBlock(), createElementBlock(
+		"span",
+		_hoisted_2,
+		toDisplayString($setup.text),
+		1
+		/* TEXT */
+	)) : createCommentVNode("v-if", true), createElementVNode("span", _hoisted_3, [$setup.loading ? (openBlock(), createElementBlock("span", _hoisted_4, [createVNode($setup["QmIcon"], {
+		name: "loading",
+		style: { "font-size": "12px" }
+	})])) : createCommentVNode("v-if", true)])], 42, _hoisted_1);
+}
+var Switch = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\switch\\switch.vue"]]);
+
+export { Switch as S, switchProps as s, useSwitch as u };
+export type { UseSwitchOptions as U, SwitchEmits as a, SwitchSize as b, SwitchValue as c, UseSwitchReturn as d };

package/es/shared/components.BUx4k59U.cjs

@@ -0,0 +1,332 @@
+'use strict';
+
+const vue = require('vue');
+const usePositioning = require('./components.CUxPJ0rN.cjs');
+const exportHelper = require('./components.DUidQ77e.cjs');
+
+const popoverProps = {
+  /** 标题文案（也可用 title 插槽覆盖） */
+  title: { type: String, default: "" },
+  /** 弹出位置：top/bottom/left/right，默认 bottom */
+  placement: { type: String, default: "bottom" },
+  /** 触发方式，默认 click */
+  trigger: { type: String, default: "click" },
+  /** 禁用整个触发器（不展开） */
+  disabled: { type: Boolean, default: false },
+  /** 是否显示连接箭头，默认 true */
+  showArrow: { type: Boolean, default: true },
+  /** 自定义宽度（CSS 宽度字符串，如 '240px'）；缺省走 min/max-width Token */
+  width: { type: String, default: "" },
+  /** Teleport 挂载目标，默认 body */
+  appendTo: { type: String, default: "body" },
+  /** 受控显隐（v-model:visible）；未传即非受控，组件内自维护 */
+  visible: { type: Boolean, default: void 0 }
+};
+
+const HOVER_OPEN_DELAY = 80;
+const HOVER_CLOSE_DELAY = 100;
+function usePopover(options) {
+  const { visible, trigger, disabled, triggerRef, panelRef, emitUpdate, emitShow, emitHide } = options;
+  const innerOpen = vue.ref(false);
+  const isControlled = vue.computed(() => visible.value !== void 0);
+  const open = vue.computed(
+    () => isControlled.value ? Boolean(visible.value) : innerOpen.value
+  );
+  let hoverOpenTimer = null;
+  let hoverCloseTimer = null;
+  function clearHoverTimers() {
+    if (hoverOpenTimer !== null) {
+      clearTimeout(hoverOpenTimer);
+      hoverOpenTimer = null;
+    }
+    if (hoverCloseTimer !== null) {
+      clearTimeout(hoverCloseTimer);
+      hoverCloseTimer = null;
+    }
+  }
+  function setOpen(value) {
+    if (value && disabled.value)
+      return;
+    if (open.value === value)
+      return;
+    if (isControlled.value) {
+      emitUpdate(value);
+    } else {
+      innerOpen.value = value;
+    }
+    if (value)
+      emitShow();
+    else emitHide();
+  }
+  function show() {
+    clearHoverTimers();
+    setOpen(true);
+  }
+  function hide() {
+    clearHoverTimers();
+    setOpen(false);
+  }
+  function toggle() {
+    clearHoverTimers();
+    if (open.value)
+      hide();
+    else show();
+  }
+  function onTriggerClick() {
+    if (trigger.value !== "click")
+      return;
+    toggle();
+  }
+  function onTriggerMouseenter() {
+    if (trigger.value !== "hover")
+      return;
+    if (hoverCloseTimer !== null) {
+      clearTimeout(hoverCloseTimer);
+      hoverCloseTimer = null;
+    }
+    if (open.value)
+      return;
+    hoverOpenTimer = setTimeout(() => {
+      hoverOpenTimer = null;
+      show();
+    }, HOVER_OPEN_DELAY);
+  }
+  function onTriggerMouseleave() {
+    if (trigger.value !== "hover")
+      return;
+    scheduleClose();
+  }
+  function onTriggerFocus() {
+    if (trigger.value !== "focus")
+      return;
+    show();
+  }
+  function onTriggerBlur() {
+    if (trigger.value !== "focus")
+      return;
+    hide();
+  }
+  function onPanelMouseenter() {
+    if (trigger.value !== "hover")
+      return;
+    if (hoverCloseTimer !== null) {
+      clearTimeout(hoverCloseTimer);
+      hoverCloseTimer = null;
+    }
+  }
+  function onPanelMouseleave() {
+    if (trigger.value !== "hover")
+      return;
+    scheduleClose();
+  }
+  function scheduleClose() {
+    if (hoverOpenTimer !== null) {
+      clearTimeout(hoverOpenTimer);
+      hoverOpenTimer = null;
+    }
+    if (!open.value)
+      return;
+    hoverCloseTimer = setTimeout(() => {
+      hoverCloseTimer = null;
+      hide();
+    }, HOVER_CLOSE_DELAY);
+  }
+  function onDocumentMousedown(event) {
+    const target = event.target;
+    if (!target)
+      return;
+    if (triggerRef.value?.contains(target) || panelRef.value?.contains(target))
+      return;
+    hide();
+  }
+  function onDocumentKeydown(event) {
+    if (event.key === "Escape" && open.value)
+      hide();
+  }
+  vue.watch(
+    open,
+    (val) => {
+      if (val) {
+        document.addEventListener("mousedown", onDocumentMousedown, true);
+        document.addEventListener("keydown", onDocumentKeydown, true);
+      } else {
+        document.removeEventListener("mousedown", onDocumentMousedown, true);
+        document.removeEventListener("keydown", onDocumentKeydown, true);
+      }
+    },
+    { immediate: true }
+  );
+  function dispose() {
+    clearHoverTimers();
+    document.removeEventListener("mousedown", onDocumentMousedown, true);
+    document.removeEventListener("keydown", onDocumentKeydown, true);
+  }
+  return {
+    open,
+    show,
+    hide,
+    toggle,
+    onTriggerClick,
+    onTriggerMouseenter,
+    onTriggerMouseleave,
+    onTriggerFocus,
+    onTriggerBlur,
+    onPanelMouseenter,
+    onPanelMouseleave,
+    dispose
+  };
+}
+
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "QmPopover" },
+  __name: "popover",
+  props: popoverProps,
+  emits: ["update:visible", "show", "hide"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const uid = vue.useId();
+    const panelId = `qm-popover-panel-${uid}`;
+    const headerId = `qm-popover-header-${uid}`;
+    const triggerRef = vue.ref(null);
+    const panelRef = vue.ref(null);
+    const popoverSlots = vue.useSlots();
+    const visibleRef = vue.computed(() => props.visible);
+    const triggerMode = vue.computed(() => props.trigger);
+    const disabled = vue.computed(() => props.disabled);
+    const popover = usePopover({
+      visible: visibleRef,
+      trigger: triggerMode,
+      disabled,
+      triggerRef,
+      panelRef,
+      emitUpdate: (value) => emit("update:visible", value),
+      emitShow: () => emit("show"),
+      emitHide: () => emit("hide")
+    });
+    const { open } = popover;
+    const placementRef = vue.computed(() => props.placement);
+    const {
+      positionStyle,
+      updatePosition,
+      startAutoReposition,
+      stopAutoReposition,
+      dispose: disposePositioning
+    } = usePositioning.usePositioning({
+      triggerRef,
+      panelRef,
+      placement: placementRef,
+      offset: 10,
+      // --qm-popover-offset
+      flip: true
+    });
+    const cardStyle = vue.computed(() => {
+      const style = { ...positionStyle.value };
+      if (props.width)
+        style.width = props.width;
+      return style;
+    });
+    const hasHeader = vue.computed(() => Boolean(props.title) || Boolean(popoverSlots.title));
+    vue.watch(
+      open,
+      (val) => {
+        if (val) {
+          void updatePosition();
+          startAutoReposition();
+        } else {
+          stopAutoReposition();
+        }
+      },
+      { flush: "post" }
+    );
+    vue.onMounted(() => {
+      if (open.value)
+        void updatePosition();
+    });
+    vue.onBeforeUnmount(() => {
+      stopAutoReposition();
+      disposePositioning();
+      popover.dispose();
+    });
+    const __returned__ = { props, emit, uid, panelId, headerId, triggerRef, panelRef, popoverSlots, visibleRef, triggerMode, disabled, popover, open, placementRef, positionStyle, updatePosition, startAutoReposition, stopAutoReposition, disposePositioning, cardStyle, hasHeader };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = [
+	"tabindex",
+	"aria-expanded",
+	"aria-controls",
+	"aria-disabled"
+];
+const _hoisted_2 = ["aria-labelledby", "aria-label"];
+const _hoisted_3 = {
+	key: 0,
+	class: "qm-popover__arrow",
+	"aria-hidden": "true"
+};
+const _hoisted_4 = { class: "qm-popover__body" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return vue.openBlock(), vue.createElementBlock(
+		vue.Fragment,
+		null,
+		[
+			vue.createCommentVNode(" 触发器（default 插槽）；包装承担 button 语义以合法携带 aria-expanded/controls "),
+			vue.createElementVNode("span", {
+				ref: "triggerRef",
+				class: vue.normalizeClass(["qm-popover__trigger", { "qm-popover__trigger--disabled": $setup.disabled }]),
+				role: "button",
+				tabindex: $setup.disabled ? -1 : 0,
+				"aria-expanded": $setup.open,
+				"aria-controls": $setup.open ? $setup.panelId : undefined,
+				"aria-haspopup": "true",
+				"aria-disabled": $setup.disabled || undefined,
+				onClick: _cache[0] || (_cache[0] = (...args) => $setup.popover.onTriggerClick && $setup.popover.onTriggerClick(...args)),
+				onMouseenter: _cache[1] || (_cache[1] = (...args) => $setup.popover.onTriggerMouseenter && $setup.popover.onTriggerMouseenter(...args)),
+				onMouseleave: _cache[2] || (_cache[2] = (...args) => $setup.popover.onTriggerMouseleave && $setup.popover.onTriggerMouseleave(...args)),
+				onFocus: _cache[3] || (_cache[3] = (...args) => $setup.popover.onTriggerFocus && $setup.popover.onTriggerFocus(...args)),
+				onBlur: _cache[4] || (_cache[4] = (...args) => $setup.popover.onTriggerBlur && $setup.popover.onTriggerBlur(...args))
+			}, [vue.renderSlot(_ctx.$slots, "default")], 42, _hoisted_1),
+			vue.createCommentVNode(" 浮层卡片（Teleport 到 appendTo，fixed 定位） "),
+			(vue.openBlock(), vue.createBlock(vue.Teleport, { to: _ctx.appendTo }, [vue.createVNode(vue.Transition, { name: "qm-popover" }, {
+				default: vue.withCtx(() => [$setup.open ? (vue.openBlock(), vue.createElementBlock("div", {
+					key: 0,
+					id: $setup.panelId,
+					ref: "panelRef",
+					class: vue.normalizeClass(["qm-popover", [`qm-popover--${_ctx.placement}`, { "qm-popover--no-arrow": !_ctx.showArrow }]]),
+					style: vue.normalizeStyle($setup.cardStyle),
+					role: "dialog",
+					"aria-modal": "false",
+					"aria-labelledby": $setup.hasHeader ? $setup.headerId : undefined,
+					"aria-label": $setup.hasHeader ? undefined : "弹出卡片",
+					onMouseenter: _cache[5] || (_cache[5] = (...args) => $setup.popover.onPanelMouseenter && $setup.popover.onPanelMouseenter(...args)),
+					onMouseleave: _cache[6] || (_cache[6] = (...args) => $setup.popover.onPanelMouseleave && $setup.popover.onPanelMouseleave(...args))
+				}, [
+					_ctx.showArrow ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3)) : vue.createCommentVNode("v-if", true),
+					$setup.hasHeader ? (vue.openBlock(), vue.createElementBlock("div", {
+						key: 1,
+						id: $setup.headerId,
+						class: "qm-popover__header"
+					}, [vue.renderSlot(_ctx.$slots, "title", {}, () => [vue.createTextVNode(
+						vue.toDisplayString(_ctx.title),
+						1
+						/* TEXT */
+					)])])) : vue.createCommentVNode("v-if", true),
+					vue.createElementVNode("div", _hoisted_4, [vue.renderSlot(_ctx.$slots, "content")])
+				], 46, _hoisted_2)) : vue.createCommentVNode("v-if", true)]),
+				_: 3
+			})], 8, ["to"]))
+		],
+		64
+		/* STABLE_FRAGMENT */
+	);
+}
+const Popover = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\popover\\popover.vue"]]);
+
+exports.HOVER_CLOSE_DELAY = HOVER_CLOSE_DELAY;
+exports.HOVER_OPEN_DELAY = HOVER_OPEN_DELAY;
+exports.Popover = Popover;
+exports.popoverProps = popoverProps;
+exports.usePopover = usePopover;