@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.D4HPwnpE.mjs

@@ -0,0 +1,363 @@
+import { ref, computed, watch, defineComponent, useId, provide, nextTick, onBeforeUnmount, openBlock, createElementBlock, Fragment, createCommentVNode, createElementVNode, normalizeClass, renderSlot, createBlock, Teleport, normalizeStyle, inject, withKeys, withModifiers } from 'vue';
+import { u as usePositioning } from './components.DqdBSuxX.mjs';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+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 = ref(false);
+  const open = 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();
+  }
+  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__ */ 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 */
+	);
+}
+const Dropdown = /*#__PURE__*/ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\dropdown\\dropdown.vue"]]);
+
+const _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);
+}
+const 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 a, Dropdown as b, dropdownProps as c, dropdownItem as d, useDropdown as u };

package/es/shared/components.D4Yu07Ov.mjs

@@ -0,0 +1,251 @@
+import { ref, watch, defineComponent, useSlots, onMounted, onBeforeUpdate, computed, onUnmounted, Comment, openBlock, createElementBlock, normalizeClass, Fragment, renderList, createElementVNode, normalizeStyle, createVNode, mergeProps, createCommentVNode } from 'vue';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+const splitterProps = {
+  /** 分栏方向：horizontal 左右 / vertical 上下 */
+  direction: { type: String, default: "horizontal" },
+  /** 各面板百分比（合计 100）；缺省/不匹配时均分；受控：外部变更会同步内部 */
+  sizes: { type: Array, default: () => [] },
+  /** 面板最小百分比：number 全局；number[] 逐面板 */
+  minSize: { type: [Number, Array], default: 10 }
+};
+
+function normalizeSizes(list, count) {
+  if (count <= 0)
+    return [];
+  const valid = Array.isArray(list) && list.length === count && list.every((n) => Number.isFinite(n) && n >= 0);
+  if (!valid) {
+    const base = 100 / count;
+    return Array.from({ length: count }, () => base);
+  }
+  const total = list.reduce((a, b) => a + b, 0);
+  if (total <= 0)
+    return Array.from({ length: count }, () => 100 / count);
+  return list.map((n) => n / total * 100);
+}
+const KEY_STEP = 5;
+function useSplitter(options) {
+  const { direction, sizes, minSize, panelCount, onResize } = options;
+  const inner = ref([]);
+  const dragging = ref(false);
+  const activeBar = ref(-1);
+  function minOf(index) {
+    if (Array.isArray(minSize.value))
+      return minSize.value[index] ?? 10;
+    return minSize.value;
+  }
+  watch(
+    panelCount,
+    (count) => {
+      inner.value = count > 0 ? normalizeSizes(sizes.value, count) : [];
+    },
+    { immediate: true }
+  );
+  watch(sizes, (list) => {
+    if (panelCount.value > 0 && list.length > 0)
+      inner.value = normalizeSizes(list, panelCount.value);
+  });
+  function applyDeltaToBase(index, delta, base) {
+    const left = base[index];
+    const right = base[index + 1];
+    if (left == null || right == null)
+      return;
+    const maxDelta = left - Math.min(minOf(index), left);
+    const minDelta = -(right - Math.min(minOf(index + 1), right));
+    const clamped = Math.min(Math.max(delta, minDelta), maxDelta);
+    const next = [...base];
+    next[index] = left + clamped;
+    next[index + 1] = right - clamped;
+    inner.value = next;
+  }
+  function applyDelta(index, delta) {
+    applyDeltaToBase(index, delta, inner.value);
+  }
+  let containerSize = 0;
+  let startClient = 0;
+  let startSizes = [];
+  function onDragMove(event) {
+    if (!dragging.value || activeBar.value < 0)
+      return;
+    const client = direction.value === "horizontal" ? event.clientX : event.clientY;
+    const delta = (client - startClient) / containerSize * 100;
+    applyDeltaToBase(activeBar.value, delta, startSizes);
+  }
+  function endDrag() {
+    if (!dragging.value)
+      return;
+    dragging.value = false;
+    activeBar.value = -1;
+    window.removeEventListener("mousemove", onDragMove);
+    window.removeEventListener("mouseup", endDrag);
+    onResize([...inner.value]);
+  }
+  function beginDrag(index, event) {
+    if (index < 0 || index >= inner.value.length - 1)
+      return;
+    const root = event.currentTarget.parentElement;
+    if (!root)
+      return;
+    const rect = root.getBoundingClientRect();
+    containerSize = direction.value === "horizontal" ? rect.width : rect.height;
+    if (containerSize <= 0)
+      return;
+    startClient = direction.value === "horizontal" ? event.clientX : event.clientY;
+    startSizes = [...inner.value];
+    dragging.value = true;
+    activeBar.value = index;
+    window.addEventListener("mousemove", onDragMove);
+    window.addEventListener("mouseup", endDrag);
+    event.preventDefault();
+  }
+  function handleBarKeydown(index, event) {
+    if (index < 0 || index >= inner.value.length - 1)
+      return;
+    const isHorizontal = direction.value === "horizontal";
+    const back = isHorizontal ? event.key === "ArrowLeft" : event.key === "ArrowUp";
+    const forward = isHorizontal ? event.key === "ArrowRight" : event.key === "ArrowDown";
+    if (!back && !forward)
+      return;
+    event.preventDefault();
+    applyDelta(index, (forward ? 1 : -1) * KEY_STEP);
+    onResize([...inner.value]);
+  }
+  function dispose() {
+    window.removeEventListener("mousemove", onDragMove);
+    window.removeEventListener("mouseup", endDrag);
+  }
+  return { sizes: inner, dragging, activeBar, beginDrag, handleBarKeydown, dispose };
+}
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmSplitter" },
+  __name: "splitter",
+  props: splitterProps,
+  emits: ["resize"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const slots = useSlots();
+    function getPanels() {
+      return (slots.default?.() ?? []).flat().filter((v) => v && typeof v === "object" && "type" in v && v.type !== Comment);
+    }
+    let panelsCache = null;
+    const panelCount = ref(0);
+    function renderPanels() {
+      if (panelsCache === null)
+        panelsCache = getPanels();
+      return panelsCache;
+    }
+    function syncPanels() {
+      panelsCache = null;
+      panelCount.value = renderPanels().length;
+    }
+    onMounted(syncPanels);
+    onBeforeUpdate(syncPanels);
+    const splitter = useSplitter({
+      direction: computed(() => props.direction),
+      sizes: computed(() => props.sizes),
+      minSize: computed(() => props.minSize),
+      panelCount,
+      onResize: (sizes) => emit("resize", sizes)
+    });
+    onUnmounted(() => {
+      splitter.dispose();
+    });
+    function panelStyle(index) {
+      const size = splitter.sizes.value[index];
+      return { flexBasis: size != null ? `${size}%` : void 0 };
+    }
+    function barAria(index) {
+      const min = Array.isArray(props.minSize) ? props.minSize[index] ?? 10 : props.minSize;
+      const minR = Array.isArray(props.minSize) ? props.minSize[index + 1] ?? 10 : props.minSize;
+      return {
+        "aria-valuemin": Math.round(min),
+        "aria-valuemax": Math.round(100 - minR)
+      };
+    }
+    const PanelRenderer = defineComponent({
+      name: "QmSplitterPanelRenderer",
+      props: { node: { type: Object, required: true } },
+      setup(renderProps) {
+        return () => renderProps.node;
+      }
+    });
+    const rootClass = computed(() => [
+      `qm-splitter--${props.direction}`,
+      { "qm-splitter--dragging": splitter.dragging.value }
+    ]);
+    const __returned__ = { props, emit, slots, getPanels, get panelsCache() {
+      return panelsCache;
+    }, set panelsCache(v) {
+      panelsCache = v;
+    }, panelCount, renderPanels, syncPanels, splitter, panelStyle, barAria, PanelRenderer, rootClass };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = [
+	"aria-orientation",
+	"aria-valuenow",
+	"onMousedown",
+	"onKeydown"
+];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"div",
+		{
+			class: normalizeClass(["qm-splitter", $setup.rootClass]),
+			"data-qm": "splitter"
+		},
+		[(openBlock(true), createElementBlock(
+			Fragment,
+			null,
+			renderList($setup.renderPanels(), (panel, index) => {
+				return openBlock(), createElementBlock(
+					Fragment,
+					{ key: index },
+					[createElementVNode(
+						"div",
+						{
+							class: "qm-splitter__panel",
+							style: normalizeStyle($setup.panelStyle(index))
+						},
+						[createVNode($setup["PanelRenderer"], { node: panel }, null, 8, ["node"])],
+						4
+						/* STYLE */
+					), index < $setup.renderPanels().length - 1 ? (openBlock(), createElementBlock("div", mergeProps({
+						key: 0,
+						class: "qm-splitter__bar",
+						role: "separator",
+						"aria-orientation": _ctx.direction,
+						"aria-valuenow": Math.round($setup.splitter.sizes.value[index] ?? 0)
+					}, { ref_for: true }, $setup.barAria(index), {
+						tabindex: 0,
+						onMousedown: ($event) => $setup.splitter.beginDrag(index, $event),
+						onKeydown: ($event) => $setup.splitter.handleBarKeydown(index, $event)
+					}), [..._cache[0] || (_cache[0] = [createElementVNode(
+						"span",
+						{
+							class: "qm-splitter__bar-handle",
+							"aria-hidden": "true"
+						},
+						null,
+						-1
+						/* CACHED */
+					)])], 16, _hoisted_1)) : createCommentVNode("v-if", true)],
+					64
+					/* STABLE_FRAGMENT */
+				);
+			}),
+			128
+			/* KEYED_FRAGMENT */
+		))],
+		2
+		/* CLASS */
+	);
+}
+const Splitter = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\splitter\\splitter.vue"]]);
+
+export { Splitter as S, normalizeSizes as n, splitterProps as s, useSplitter as u };