@qingmingmu/components 0.1.0-beta.0

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

@@ -0,0 +1,73 @@
+import { PropType, defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, normalizeStyle, createCommentVNode } from 'vue';
+import { _ as _export_sfc } from './components.OJRSZE6i.js';
+
+/**
+ * QmAppLayout 组件类型定义（桌面端 task）
+ * 类型先行：桌面应用整体骨架（TitleBar + Sidebar + Content），flex 布局，无 Electron 依赖。
+ */
+/** 侧边栏宽度：数字按 px 处理，字符串原样透传（如 '240px' / '20rem'） */
+type SidebarWidth = string | number;
+/** props 声明 */
+declare const appLayoutProps: {
+    /** 侧边栏宽度（数字 px 或任意 CSS 长度字符串） */
+    readonly sidebarWidth: {
+        readonly type: PropType<SidebarWidth>;
+        readonly default: 220;
+    };
+    /** 是否折叠侧边栏（宽度收为 0，内容隐藏） */
+    readonly collapsed: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+/** 归一化侧边栏宽度为 CSS 长度值 */
+declare function normalizeSidebarWidth(width: SidebarWidth): string;
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmAppLayout" },
+  __name: "app-layout",
+  props: appLayoutProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const slots = useSlots();
+    const hasSidebar = computed(() => Boolean(slots.sidebar));
+    const sidebarStyle = computed(() => {
+      const width = props.collapsed ? "0px" : normalizeSidebarWidth(props.sidebarWidth);
+      return { width };
+    });
+    const __returned__ = { props, slots, hasSidebar, sidebarStyle };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = { class: "qm-app-layout__titlebar" };
+const _hoisted_2 = { class: "qm-app-layout__body" };
+const _hoisted_3 = { class: "qm-app-layout__content" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"div",
+		{
+			class: normalizeClass(["qm-app-layout", { "qm-app-layout--collapsed": _ctx.collapsed }]),
+			"data-qm": "app-layout"
+		},
+		[createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "titlebar")]), createElementVNode("div", _hoisted_2, [$setup.hasSidebar ? (openBlock(), createElementBlock(
+			"aside",
+			{
+				key: 0,
+				class: "qm-app-layout__sidebar",
+				style: normalizeStyle($setup.sidebarStyle)
+			},
+			[renderSlot(_ctx.$slots, "sidebar")],
+			4
+			/* STYLE */
+		)) : createCommentVNode("v-if", true), createElementVNode("main", _hoisted_3, [renderSlot(_ctx.$slots, "default")])])],
+		2
+		/* CLASS */
+	);
+}
+var AppLayout = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\app-layout\\app-layout.vue"]]);
+
+export { AppLayout as A, appLayoutProps as a, normalizeSidebarWidth as n };
+export type { SidebarWidth as S };

package/es/shared/components.Dz2FXew2.cjs

@@ -0,0 +1,371 @@
+'use strict';
+
+const vue = require('vue');
+const usePositioning = require('./components.CUxPJ0rN.cjs');
+const exportHelper = require('./components.DUidQ77e.cjs');
+
+const dropdownProps = {
+  /** 触发方式 */
+  trigger: { type: String, default: "hover" },
+  /** 弹出位置 */
+  placement: { type: String, default: "bottom" },
+  /** 禁用（不展开、不响应触发） */
+  disabled: { type: Boolean, default: false },
+  /** 点击菜单项后是否自动关闭 */
+  hideOnClick: { type: Boolean, default: true }
+};
+const DROPDOWN_CONTEXT_KEY = Symbol("qm-dropdown-context");
+
+const HOVER_OPEN_DELAY = 80;
+const HOVER_CLOSE_DELAY = 100;
+function useDropdown(options) {
+  const { trigger, disabled, triggerRef, panelRef, emitVisibleChange } = options;
+  const innerOpen = vue.ref(false);
+  const open = vue.computed(() => 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;
+    innerOpen.value = value;
+    emitVisibleChange(value);
+  }
+  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 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,
+    onPanelMouseenter,
+    onPanelMouseleave,
+    dispose
+  };
+}
+
+const _sfc_main$1 = /* @__PURE__ */ vue.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 = vue.useId();
+    const panelId = `qm-dropdown-panel-${uid}`;
+    const triggerRef = vue.ref(null);
+    const panelRef = vue.ref(null);
+    const trigger = vue.computed(() => props.trigger);
+    const disabled = vue.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();
+      }
+    };
+    vue.provide(DROPDOWN_CONTEXT_KEY, context);
+    const placementRef = vue.computed(() => props.placement);
+    const {
+      positionStyle,
+      updatePosition,
+      startAutoReposition,
+      stopAutoReposition,
+      dispose: disposePositioning
+    } = usePositioning.usePositioning({
+      triggerRef,
+      panelRef,
+      placement: placementRef,
+      offset: 4,
+      flip: true
+    });
+    vue.watch(
+      open,
+      (val) => {
+        if (val) {
+          void updatePosition();
+          startAutoReposition();
+        } else {
+          stopAutoReposition();
+        }
+      },
+      { flush: "post" }
+    );
+    vue.watch(
+      open,
+      async (val) => {
+        if (!val)
+          return;
+        await vue.nextTick();
+        focusFirstItem();
+      },
+      { flush: "post" }
+    );
+    vue.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();
+      }
+    }
+    vue.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 vue.openBlock(), vue.createElementBlock(
+		vue.Fragment,
+		null,
+		[
+			vue.createCommentVNode(" 触发器（default 插槽） "),
+			vue.createElementVNode("span", {
+				ref: "triggerRef",
+				class: vue.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))
+			}, [vue.renderSlot(_ctx.$slots, "default")], 42, _hoisted_1$1),
+			vue.createCommentVNode(" 下拉面板（Teleport 到 body，fixed 定位） "),
+			(vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [$setup.open ? (vue.openBlock(), vue.createElementBlock(
+				"div",
+				{
+					key: 0,
+					id: $setup.panelId,
+					ref: "panelRef",
+					class: "qm-dropdown__panel",
+					style: vue.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
+				},
+				[vue.renderSlot(_ctx.$slots, "dropdown")],
+				36
+				/* STYLE, NEED_HYDRATION */
+			)) : vue.createCommentVNode("v-if", true)]))
+		],
+		64
+		/* STABLE_FRAGMENT */
+	);
+}
+const Dropdown = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\dropdown\\dropdown.vue"]]);
+
+const _sfc_main = /* @__PURE__ */ vue.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 = vue.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 vue.openBlock(), vue.createElementBlock("div", {
+		class: vue.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: [vue.withKeys(vue.withModifiers($setup.onClick, ["prevent"]), ["enter"]), vue.withKeys(vue.withModifiers($setup.onClick, ["prevent"]), ["space"])]
+	}, [vue.renderSlot(_ctx.$slots, "default")], 42, _hoisted_1);
+}
+const dropdownItem = /*#__PURE__*/ exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\dropdown\\dropdown-item.vue"]]);
+
+exports.DROPDOWN_CONTEXT_KEY = DROPDOWN_CONTEXT_KEY;
+exports.Dropdown = Dropdown;
+exports.HOVER_CLOSE_DELAY = HOVER_CLOSE_DELAY;
+exports.HOVER_OPEN_DELAY = HOVER_OPEN_DELAY;
+exports.dropdownItem = dropdownItem;
+exports.dropdownProps = dropdownProps;
+exports.useDropdown = useDropdown;