@qingmingmu/components 0.1.0-beta.0

package/es/shared/components.CwRwwkrw.mjs

@@ -0,0 +1,397 @@
+import { computed, ref, watch, defineComponent, toRef, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, normalizeStyle, Fragment, renderList, withModifiers, toDisplayString } from 'vue';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+const sliderProps = {
+  /** 受控值（v-model）：单值 number；range 模式为 [low, high] */
+  modelValue: {
+    type: [Number, Array],
+    default: 0
+  },
+  /** 最小值 */
+  min: { type: Number, default: 0 },
+  /** 最大值 */
+  max: { type: Number, default: 100 },
+  /** 步长（>0 生效；拖拽/键盘均按步长吸附） */
+  step: { type: Number, default: 1 },
+  /** 范围选择（双滑块，值类型为数组） */
+  range: { type: Boolean, default: false },
+  /** 禁用态：视觉 + 行为（不可拖拽/点击/键盘） */
+  disabled: { type: Boolean, default: false },
+  /** 拖拽/悬停/聚焦时显示值提示 */
+  showTooltip: { type: Boolean, default: true },
+  /** 刻度标记 { value: label } */
+  marks: { type: Object, default: () => ({}) }
+};
+
+function countDecimals(value) {
+  return (String(value).split(".")[1] || "").length;
+}
+function clamp(value, min, max) {
+  const lo = Math.min(min, max);
+  const hi = Math.max(min, max);
+  return Math.min(Math.max(value, lo), hi);
+}
+function snapToStep(value, min, max, step) {
+  if (step <= 0)
+    return clamp(value, min, max);
+  const decimals = countDecimals(step);
+  const factor = 10 ** decimals;
+  const stepped = Math.round((value - min) / step) * step + min;
+  return Math.round(clamp(stepped, min, max) * factor) / factor;
+}
+function normalizeValue(value, min, max, range) {
+  const [a, b] = Array.isArray(value) ? [value[0], value[1]] : [value, value];
+  const lo = clamp(a, min, max);
+  const hi = clamp(b, min, max);
+  if (!range)
+    return [lo, lo];
+  return [Math.min(lo, hi), Math.max(lo, hi)];
+}
+function useSlider(options) {
+  const { modelValue, min, max, step, range, disabled, marks, trackRef, emitUpdate, emitChange } = options;
+  const isRange = computed(() => range.value);
+  const inner = ref(
+    normalizeValue(modelValue.value, min.value, max.value, range.value)
+  );
+  watch(modelValue, (v) => {
+    inner.value = normalizeValue(v, min.value, max.value, range.value);
+  });
+  const values = computed(() => inner.value);
+  const draggingIndex = ref(-1);
+  const draggingValue = ref(null);
+  function percentOf(value) {
+    if (max.value === min.value)
+      return 0;
+    return (value - min.value) / (max.value - min.value) * 100;
+  }
+  const rangeStyle = computed(() => {
+    const [lo, hi] = inner.value;
+    if (isRange.value) {
+      const left = percentOf(lo);
+      return { left: `${left}%`, width: `${percentOf(hi) - left}%` };
+    }
+    return { left: "0%", width: `${percentOf(hi)}%` };
+  });
+  function knobStyle(index) {
+    return { left: `${percentOf(inner.value[index])}%` };
+  }
+  const marksList = computed(
+    () => Object.entries(marks.value).map(([key, label]) => ({ value: Number(key), label })).filter((m) => m.value >= min.value && m.value <= max.value).sort((a, b) => a.value - b.value).map((m) => ({ ...m, percent: percentOf(m.value) }))
+  );
+  function setValues(next, commit) {
+    inner.value = next;
+    const value = isRange.value ? [next[0], next[1]] : next[0];
+    emitUpdate(value);
+    if (commit)
+      emitChange(value);
+  }
+  function onMouseMove(event) {
+    const idx = draggingIndex.value;
+    if (idx < 0)
+      return;
+    const track = trackRef.value;
+    if (!track)
+      return;
+    const rect = track.getBoundingClientRect();
+    if (rect.width === 0)
+      return;
+    const ratio = (event.clientX - rect.left) / rect.width;
+    const raw = min.value + ratio * (max.value - min.value);
+    const snapped = snapToStep(raw, min.value, max.value, step.value);
+    const [lo, hi] = inner.value;
+    const next = [...inner.value];
+    if (isRange.value) {
+      next[0] = Math.min(idx === 0 ? snapped : lo, hi);
+      next[1] = Math.max(idx === 1 ? snapped : hi, lo);
+    } else {
+      next[0] = snapped;
+      next[1] = snapped;
+    }
+    setValues(next, false);
+    draggingValue.value = idx === 0 ? next[0] : next[1];
+  }
+  function onMouseUp() {
+    if (draggingIndex.value < 0)
+      return;
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+    const finalValue = draggingValue.value;
+    draggingIndex.value = -1;
+    draggingValue.value = null;
+    if (finalValue !== null) {
+      const value = isRange.value ? [...inner.value] : inner.value[0];
+      emitChange(value);
+    }
+  }
+  function startDrag(index) {
+    draggingIndex.value = index;
+    draggingValue.value = inner.value[index];
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+  }
+  function handleKnobMouseDown(index, event) {
+    if (disabled.value)
+      return;
+    event.preventDefault();
+    startDrag(index);
+  }
+  function handleTrackMouseDown(event) {
+    if (disabled.value)
+      return;
+    const track = trackRef.value;
+    if (!track)
+      return;
+    const rect = track.getBoundingClientRect();
+    if (rect.width === 0)
+      return;
+    const ratio = (event.clientX - rect.left) / rect.width;
+    const raw = min.value + ratio * (max.value - min.value);
+    const snapped = snapToStep(raw, min.value, max.value, step.value);
+    let index = 0;
+    if (isRange.value) {
+      const [lo, hi] = inner.value;
+      index = Math.abs(snapped - lo) <= Math.abs(snapped - hi) ? 0 : 1;
+      const next = [...inner.value];
+      next[0] = Math.min(index === 0 ? snapped : lo, hi);
+      next[1] = Math.max(index === 1 ? snapped : hi, lo);
+      setValues(next, false);
+    } else {
+      setValues([snapped, snapped], false);
+    }
+    startDrag(index);
+  }
+  function handleKnobKeydown(index, event) {
+    if (disabled.value)
+      return;
+    const key = event.key;
+    let target;
+    const current = inner.value[index];
+    if (key === "ArrowRight" || key === "ArrowUp")
+      target = snapToStep(current + step.value, min.value, max.value, step.value);
+    else if (key === "ArrowLeft" || key === "ArrowDown")
+      target = snapToStep(current - step.value, min.value, max.value, step.value);
+    else if (key === "Home")
+      target = min.value;
+    else if (key === "End")
+      target = max.value;
+    else return;
+    event.preventDefault();
+    const [lo, hi] = inner.value;
+    const next = [...inner.value];
+    if (isRange.value) {
+      next[0] = Math.min(index === 0 ? target : lo, hi);
+      next[1] = Math.max(index === 1 ? target : hi, lo);
+    } else {
+      next[0] = target;
+      next[1] = target;
+    }
+    setValues(next, true);
+  }
+  function dispose() {
+    document.removeEventListener("mousemove", onMouseMove);
+    document.removeEventListener("mouseup", onMouseUp);
+  }
+  return {
+    isRange,
+    values,
+    draggingIndex,
+    draggingValue,
+    percentOf,
+    rangeStyle,
+    knobStyle,
+    marksList,
+    handleTrackMouseDown,
+    handleKnobMouseDown,
+    handleKnobKeydown,
+    dispose
+  };
+}
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmSlider" },
+  __name: "slider",
+  props: sliderProps,
+  emits: ["update:modelValue", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    __expose();
+    const props = __props;
+    const emit = __emit;
+    const trackRef = ref(null);
+    const slider = useSlider({
+      modelValue: toRef(props, "modelValue"),
+      min: toRef(props, "min"),
+      max: toRef(props, "max"),
+      step: toRef(props, "step"),
+      range: toRef(props, "range"),
+      disabled: toRef(props, "disabled"),
+      marks: toRef(props, "marks"),
+      trackRef,
+      emitUpdate: (value) => emit("update:modelValue", value),
+      emitChange: (value) => emit("change", value)
+    });
+    const {
+      isRange,
+      values,
+      draggingIndex,
+      draggingValue,
+      rangeStyle,
+      knobStyle,
+      marksList,
+      handleTrackMouseDown,
+      handleKnobMouseDown,
+      handleKnobKeydown,
+      dispose
+    } = slider;
+    onBeforeUnmount(() => dispose());
+    const thumbs = computed(() => isRange.value ? [0, 1] : [0]);
+    const rootClass = computed(() => [
+      "qm-slider",
+      {
+        "qm-slider--range": isRange.value,
+        "qm-slider--disabled": props.disabled,
+        "qm-slider--dragging": draggingIndex.value >= 0
+      }
+    ]);
+    function thumbValue(index) {
+      return draggingIndex.value === index && draggingValue.value !== null ? draggingValue.value : values.value[index];
+    }
+    function ariaNow(index) {
+      return draggingIndex.value === index && draggingValue.value !== null ? draggingValue.value : values.value[index];
+    }
+    const __returned__ = { props, emit, trackRef, slider, isRange, values, draggingIndex, draggingValue, rangeStyle, knobStyle, marksList, handleTrackMouseDown, handleKnobMouseDown, handleKnobKeydown, dispose, thumbs, rootClass, thumbValue, ariaNow };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = [
+	"tabindex",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-disabled",
+	"onMousedown",
+	"onKeydown"
+];
+const _hoisted_2 = {
+	key: 0,
+	class: "qm-slider__tooltip",
+	"aria-hidden": "true"
+};
+const _hoisted_3 = {
+	key: 0,
+	class: "qm-slider__marks",
+	"aria-hidden": "true"
+};
+const _hoisted_4 = { class: "qm-slider__mark-label" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock(
+		"div",
+		{
+			class: normalizeClass($setup.rootClass),
+			"data-qm": "slider"
+		},
+		[
+			createCommentVNode(" 轨道：点击跳转 + 拖拽坐标基准 "),
+			createElementVNode(
+				"div",
+				{
+					ref: "trackRef",
+					class: "qm-slider__track",
+					onMousedown: _cache[0] || (_cache[0] = (...args) => $setup.handleTrackMouseDown && $setup.handleTrackMouseDown(...args))
+				},
+				[
+					_cache[1] || (_cache[1] = createElementVNode(
+						"div",
+						{
+							class: "qm-slider__rail",
+							"aria-hidden": "true"
+						},
+						null,
+						-1
+						/* CACHED */
+					)),
+					createElementVNode(
+						"div",
+						{
+							class: "qm-slider__range",
+							style: normalizeStyle($setup.rangeStyle),
+							"aria-hidden": "true"
+						},
+						null,
+						4
+						/* STYLE */
+					),
+					createCommentVNode(" 滑块（单值 1 个 / 范围 2 个） "),
+					(openBlock(true), createElementBlock(
+						Fragment,
+						null,
+						renderList($setup.thumbs, (index) => {
+							return openBlock(), createElementBlock("div", {
+								key: index,
+								class: normalizeClass(["qm-slider__knob", { "qm-slider__knob--dragging": $setup.draggingIndex === index }]),
+								style: normalizeStyle($setup.knobStyle(index)),
+								role: "slider",
+								tabindex: _ctx.disabled ? -1 : 0,
+								"aria-valuemin": _ctx.min,
+								"aria-valuemax": _ctx.max,
+								"aria-valuenow": $setup.ariaNow(index),
+								"aria-orientation": "horizontal",
+								"aria-disabled": _ctx.disabled || undefined,
+								onMousedown: withModifiers(($event) => $setup.handleKnobMouseDown(index, $event), ["stop"]),
+								onKeydown: ($event) => $setup.handleKnobKeydown(index, $event)
+							}, [_ctx.showTooltip ? (openBlock(), createElementBlock(
+								"span",
+								_hoisted_2,
+								toDisplayString($setup.thumbValue(index)),
+								1
+								/* TEXT */
+							)) : createCommentVNode("v-if", true)], 46, _hoisted_1);
+						}),
+						128
+						/* KEYED_FRAGMENT */
+					))
+				],
+				544
+				/* NEED_HYDRATION, NEED_PATCH */
+			),
+			createCommentVNode(" 刻度标记 "),
+			$setup.marksList.length ? (openBlock(), createElementBlock("div", _hoisted_3, [(openBlock(true), createElementBlock(
+				Fragment,
+				null,
+				renderList($setup.marksList, (mark) => {
+					return openBlock(), createElementBlock(
+						"span",
+						{
+							key: mark.value,
+							class: "qm-slider__mark",
+							style: normalizeStyle({ left: `${mark.percent}%` })
+						},
+						[_cache[2] || (_cache[2] = createElementVNode(
+							"span",
+							{ class: "qm-slider__mark-dot" },
+							null,
+							-1
+							/* CACHED */
+						)), createElementVNode(
+							"span",
+							_hoisted_4,
+							toDisplayString(mark.label),
+							1
+							/* TEXT */
+						)],
+						4
+						/* STYLE */
+					);
+				}),
+				128
+				/* KEYED_FRAGMENT */
+			))])) : createCommentVNode("v-if", true)
+		],
+		2
+		/* CLASS */
+	);
+}
+const Slider = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\slider\\slider.vue"]]);
+
+export { Slider as S, countDecimals as a, snapToStep as b, clamp as c, normalizeValue as n, sliderProps as s, useSlider as u };

package/es/shared/components.CxFKLC0I.mjs

@@ -0,0 +1,68 @@
+import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, normalizeStyle, renderSlot, createCommentVNode, createVNode, createTextVNode, toDisplayString } from 'vue';
+import { I as Icon } from './components.D3on6_fI.mjs';
+import { _ as _export_sfc } from './components.pcqpp-6-.mjs';
+
+const emptyProps = {
+  /** 描述文案（默认插槽可覆盖） */
+  description: { type: String, default: "\u6682\u65E0\u6570\u636E" },
+  /** 图标尺寸（px） */
+  imageSize: { type: Number, default: 64 }
+};
+
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "QmEmpty" },
+  __name: "empty",
+  props: emptyProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const imageStyle = computed(() => ({
+      width: `${props.imageSize}px`,
+      height: `${props.imageSize}px`
+    }));
+    const __returned__ = { props, imageStyle, get QmIcon() {
+      return Icon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = {
+	class: "qm-empty",
+	"data-qm": "empty"
+};
+const _hoisted_2 = {
+	key: 0,
+	class: "qm-empty__description"
+};
+const _hoisted_3 = {
+	key: 1,
+	class: "qm-empty__footer"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	return openBlock(), createElementBlock("div", _hoisted_1, [
+		createElementVNode(
+			"div",
+			{
+				class: "qm-empty__image",
+				style: normalizeStyle($setup.imageStyle)
+			},
+			[renderSlot(_ctx.$slots, "image", {}, () => [createCommentVNode(" 统一走 QmIcon 图标体系：默认空态语义图标（inbox），尺寸跟随 imageSize "), createVNode($setup["QmIcon"], {
+				name: "inbox",
+				style: normalizeStyle({ fontSize: `${_ctx.imageSize}px` })
+			}, null, 8, ["style"])])],
+			4
+			/* STYLE */
+		),
+		_ctx.$slots.default || _ctx.description ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(
+			toDisplayString(_ctx.description),
+			1
+			/* TEXT */
+		)])])) : createCommentVNode("v-if", true),
+		_ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "footer")])) : createCommentVNode("v-if", true)
+	]);
+}
+const Empty = /*#__PURE__*/ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "F:\\软件开发\\青冥组件系统\\packages\\components\\src\\components\\empty\\empty.vue"]]);
+
+export { Empty as E, emptyProps as e };