@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.DD-6M8N-.d.ts

@@ -0,0 +1,314 @@
+import { InjectionKey, PropType, Ref, ComputedRef, defineComponent, useId, ref, computed, provide, watch, nextTick, onBeforeUnmount, openBlock, createElementBlock, Fragment, createCommentVNode, createElementVNode, normalizeClass, renderSlot, createBlock, Teleport, normalizeStyle, inject, withKeys, withModifiers } from 'vue';
+import { u as usePositioning } from './components.4UjasbrA.js';
+import { _ as _export_sfc } from './components.OJRSZE6i.js';
+
+/**
+ * QmDropdown 组件类型定义（导航 + 桌面端 task）
+ * 类型先行：command 为菜单项命令标识（字符串或数字）。
+ */
+/** 菜单项命令标识 */
+type DropdownKey = string | number;
+/** 触发方式 */
+type DropdownTrigger = 'click' | 'hover';
+/** 弹出位置（bottom-start 与 bottom 同为左对齐，bottom-end 右对齐） */
+type DropdownPlacement = 'bottom' | 'top' | 'bottom-start' | 'bottom-end';
+/** props 声明 */
+declare const dropdownProps: {
+    /** 触发方式 */
+    readonly trigger: {
+        readonly type: PropType<DropdownTrigger>;
+        readonly default: "hover";
+    };
+    /** 弹出位置 */
+    readonly placement: {
+        readonly type: PropType<DropdownPlacement>;
+        readonly default: "bottom";
+    };
+    /** 禁用（不展开、不响应触发） */
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 点击菜单项后是否自动关闭 */
+    readonly hideOnClick: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+};
+/** emits 声明 */
+interface DropdownEmits {
+    /** 点击菜单项时触发，携带命令 key */
+    command: [key: DropdownKey];
+    /** 展开/收起变化 */
+    visibleChange: [visible: boolean];
+}
+/** 下拉上下文（provide/inject 供 QmDropdownItem 冒泡 command 到父级） */
+interface DropdownContext {
+    /** 点击菜单项：父级统一 emit command + 按 hideOnClick 关闭 */
+    emitCommand: (key: DropdownKey) => void;
+}
+/** 注入键 */
+declare const DROPDOWN_CONTEXT_KEY: InjectionKey<DropdownContext>;
+
+/**
+ * useDropdown 行为层（导航 + 桌面端 task）
+ *
+ * 职责（与视图解耦，可独立单测）：
+ * - 显隐状态：非受控内部状态，统一由 setOpen 收敛（disabled 短路）；
+ * - 触发管理：click 切换 / hover 悬停（带延迟防抖，移到面板不关闭）；
+ * - 关闭契约：点击外部（document mousedown 捕获）、Esc；
+ * - 无泄漏契约：定时器与 document 监听在 hide / dispose 时清理。
+ *
+ * 定位计算不在本层（dropdown.vue 组合：Teleport + fixed + 视口钳制）。
+ */
+
+/** hover 展开延迟（ms）：避免快速划过时闪烁 */
+declare const HOVER_OPEN_DELAY = 80;
+/** hover 关闭延迟（ms）：从触发器移到面板的窗口，期间取消关闭 */
+declare const HOVER_CLOSE_DELAY = 100;
+interface UseDropdownOptions {
+    /** 触发方式 */
+    trigger: Ref<DropdownTrigger>;
+    /** 禁用 */
+    disabled: Ref<boolean>;
+    /** 触发器元素（外部点击判定 + 面板包含判定） */
+    triggerRef: Ref<HTMLElement | null>;
+    /** 弹出面板元素（Teleport 挂载后） */
+    panelRef: Ref<HTMLElement | null>;
+    /** 显隐变化回调 */
+    emitVisibleChange: (visible: boolean) => void;
+}
+interface UseDropdownReturn {
+    /** 当前是否展开 */
+    open: ComputedRef<boolean>;
+    /** 展开 */
+    show: () => void;
+    /** 关闭 */
+    hide: () => void;
+    /** 切换 */
+    toggle: () => void;
+    onTriggerClick: () => void;
+    onTriggerMouseenter: () => void;
+    onTriggerMouseleave: () => void;
+    onPanelMouseenter: () => void;
+    onPanelMouseleave: () => void;
+    /** 卸载清理 */
+    dispose: () => void;
+}
+declare function useDropdown(options: UseDropdownOptions): UseDropdownReturn;
+
+var _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmDropdown" },
+  __name: "dropdown",
+  props: dropdownProps,
+  emits: ["command", "visibleChange"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const uid = useId();
+    const panelId = `qm-dropdown-panel-${uid}`;
+    const triggerRef = ref(null);
+    const panelRef = ref(null);
+    const trigger = computed(() => props.trigger);
+    const disabled = computed(() => props.disabled);
+    const dropdown = useDropdown({
+      trigger,
+      disabled,
+      triggerRef,
+      panelRef,
+      emitVisibleChange: (visible) => emit("visibleChange", visible)
+    });
+    const { open, hide } = dropdown;
+    const context = {
+      emitCommand: (key) => {
+        emit("command", key);
+        if (props.hideOnClick)
+          hide();
+      }
+    };
+    provide(DROPDOWN_CONTEXT_KEY, context);
+    const placementRef = computed(() => props.placement);
+    const {
+      positionStyle,
+      updatePosition,
+      startAutoReposition,
+      stopAutoReposition,
+      dispose: disposePositioning
+    } = usePositioning({
+      triggerRef,
+      panelRef,
+      placement: placementRef,
+      offset: 4,
+      flip: true
+    });
+    watch(
+      open,
+      (val) => {
+        if (val) {
+          void updatePosition();
+          startAutoReposition();
+        } else {
+          stopAutoReposition();
+        }
+      },
+      { flush: "post" }
+    );
+    watch(
+      open,
+      async (val) => {
+        if (!val)
+          return;
+        await nextTick();
+        focusFirstItem();
+      },
+      { flush: "post" }
+    );
+    watch(open, (val) => {
+      if (!val)
+        restoreFocus();
+    });
+    function focusableItems() {
+      const panel = panelRef.value;
+      if (!panel)
+        return [];
+      return [...panel.querySelectorAll('.qm-dropdown-item:not([aria-disabled="true"])')];
+    }
+    function focusFirstItem() {
+      const items = focusableItems();
+      items[0]?.focus();
+    }
+    function restoreFocus() {
+      const panel = panelRef.value;
+      const active = document.activeElement;
+      if (panel && active && panel.contains(active))
+        triggerRef.value?.focus();
+    }
+    function onPanelKeydown(event) {
+      const items = focusableItems();
+      if (!items.length)
+        return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        const current = document.activeElement;
+        let index = current ? items.indexOf(current) : -1;
+        const dir = event.key === "ArrowDown" ? 1 : -1;
+        index = index < 0 ? dir > 0 ? 0 : items.length - 1 : (index + dir + items.length) % items.length;
+        items[index]?.focus();
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        hide();
+      }
+    }
+    onBeforeUnmount(() => {
+      disposePositioning();
+      dropdown.dispose();
+    });
+    const __returned__ = { props, emit, uid, panelId, triggerRef, panelRef, trigger, disabled, dropdown, open, hide, context, placementRef, positionStyle, updatePosition, startAutoReposition, stopAutoReposition, disposePositioning, focusableItems, focusFirstItem, restoreFocus, onPanelKeydown };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1$1 = [
+	"tabindex",
+	"aria-expanded",
+	"aria-controls",
+	"aria-disabled"
+];
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		Fragment,
+		null,
+		[
+			createCommentVNode(" 触发器（default 插槽） "),
+			createElementVNode("span", {
+				ref: "triggerRef",
+				class: normalizeClass(["qm-dropdown", { "qm-dropdown--disabled": $setup.disabled }]),
+				role: "button",
+				tabindex: $setup.disabled ? -1 : 0,
+				"aria-haspopup": true,
+				"aria-expanded": $setup.open,
+				"aria-controls": $setup.open ? $setup.panelId : undefined,
+				"aria-disabled": $setup.disabled || undefined,
+				onClick: _cache[0] || (_cache[0] = (...args) => $setup.dropdown.onTriggerClick && $setup.dropdown.onTriggerClick(...args)),
+				onMouseenter: _cache[1] || (_cache[1] = (...args) => $setup.dropdown.onTriggerMouseenter && $setup.dropdown.onTriggerMouseenter(...args)),
+				onMouseleave: _cache[2] || (_cache[2] = (...args) => $setup.dropdown.onTriggerMouseleave && $setup.dropdown.onTriggerMouseleave(...args))
+			}, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$1),
+			createCommentVNode(" 下拉面板（Teleport 到 body，fixed 定位） "),
+			(openBlock(), createBlock(Teleport, { to: "body" }, [$setup.open ? (openBlock(), createElementBlock(
+				"div",
+				{
+					key: 0,
+					id: $setup.panelId,
+					ref: "panelRef",
+					class: "qm-dropdown__panel",
+					style: normalizeStyle($setup.positionStyle),
+					role: "menu",
+					onMouseenter: _cache[3] || (_cache[3] = (...args) => $setup.dropdown.onPanelMouseenter && $setup.dropdown.onPanelMouseenter(...args)),
+					onMouseleave: _cache[4] || (_cache[4] = (...args) => $setup.dropdown.onPanelMouseleave && $setup.dropdown.onPanelMouseleave(...args)),
+					onKeydown: $setup.onPanelKeydown
+				},
+				[renderSlot(_ctx.$slots, "dropdown")],
+				36
+				/* STYLE, NEED_HYDRATION */
+			)) : createCommentVNode("v-if", true)]))
+		],
+		64
+		/* STABLE_FRAGMENT */
+	);
+}
+var Dropdown = /*#__PURE__*/ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\dropdown\\dropdown.vue"]]);
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmDropdownItem" },
+  __name: "dropdown-item",
+  props: {
+    /** 菜单项命令标识（command 事件携带值） */
+    command: { type: [String, Number], default: "" },
+    /** 禁用 */
+    disabled: { type: Boolean, default: false },
+    /** 上方显示分隔线 */
+    divided: { type: Boolean, default: false }
+  },
+  emits: ["command"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const context = inject(DROPDOWN_CONTEXT_KEY, void 0);
+    function onClick() {
+      if (props.disabled)
+        return;
+      emit("command", props.command);
+      context?.emitCommand?.(props.command);
+    }
+    const __returned__ = { props, emit, context, onClick };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = [
+	"aria-disabled",
+	"tabindex",
+	"onKeydown"
+];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", {
+		class: normalizeClass(["qm-dropdown-item", {
+			"qm-dropdown-item--disabled": $props.disabled,
+			"qm-dropdown-item--divided": $props.divided
+		}]),
+		"data-qm": "dropdown-item",
+		role: "menuitem",
+		"aria-disabled": $props.disabled || undefined,
+		tabindex: $props.disabled ? -1 : 0,
+		onClick: $setup.onClick,
+		onKeydown: [withKeys(withModifiers($setup.onClick, ["prevent"]), ["enter"]), withKeys(withModifiers($setup.onClick, ["prevent"]), ["space"])]
+	}, [renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
+}
+var dropdownItem = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\dropdown\\dropdown-item.vue"]]);
+
+export { DROPDOWN_CONTEXT_KEY as D, HOVER_CLOSE_DELAY as H, HOVER_OPEN_DELAY as f, Dropdown as g, dropdownItem as h, dropdownProps as j, useDropdown as u };
+export type { UseDropdownOptions as U, DropdownContext as a, DropdownEmits as b, DropdownKey as c, DropdownPlacement as d, DropdownTrigger as e, UseDropdownReturn as i };

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

@@ -0,0 +1,86 @@
+import { PropType, defineComponent, computed, openBlock, createElementBlock, normalizeStyle, normalizeClass, renderSlot } from 'vue';
+import { _ as _export_sfc } from './components.OJRSZE6i.mjs';
+
+/**
+ * QmSpace 组件类型定义（组件体系设计 §6.4：类型先行）
+ * 布局-03：flex 间距容器，子元素间自动 gap；方向 / 间距 / 换行 / 对齐 / 填满。
+ */
+
+/** 排列方向 */
+type SpaceDirection = 'horizontal' | 'vertical';
+/** 间距档位（§6.3：尺寸枚举统一 small | medium | large）+ 自定义 number */
+type SpaceSize = 'small' | 'medium' | 'large';
+/** 垂直对齐（align-items 语义） */
+type SpaceAlign = 'start' | 'end' | 'center' | 'baseline';
+/** props 声明（纯类型 + 默认值，供 SFC 与文档复用） */
+declare const spaceProps: {
+    /** 排列方向：horizontal / vertical */
+    readonly direction: {
+        readonly type: PropType<SpaceDirection>;
+        readonly default: "horizontal";
+    };
+    /** 间距：small / medium / large（消费分档 Token）；number 自定义（px） */
+    readonly size: {
+        readonly type: PropType<SpaceSize | number>;
+        readonly default: "medium";
+    };
+    /** 自动换行（换行后行距走 --qm-space-wrap-gap） */
+    readonly wrap: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    /** 垂直对齐：start / end / center / baseline */
+    readonly align: {
+        readonly type: PropType<SpaceAlign>;
+        readonly default: "center";
+    };
+    /** 填满：子元素 flex: 1 均分 */
+    readonly fill: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+
+var _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 */
+	);
+}
+var 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 };
+export type { SpaceAlign as a, SpaceDirection as b, SpaceSize as c };