@veltra/desktop 1.0.0

package/dist/components/pop-confirm/pop-confirm.vue.d.ts

@@ -0,0 +1,33 @@
+import { TipDirection } from "../../types/tip.js";
+import { PopConfirmProps } from "../../types/pop-confirm.js";
+import * as _$vue from "vue";
+
+//#region src/components/pop-confirm/pop-confirm.vue.d.ts
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+  reference?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<PopConfirmProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
+  confirm: () => any;
+  cancel: () => any;
+}, string, _$vue.PublicProps, Readonly<PopConfirmProps> & Readonly<{
+  onConfirm?: (() => any) | undefined;
+  onCancel?: (() => any) | undefined;
+}>, {
+  icon: _$vue.Component;
+  trigger: "hover" | "click";
+  direction: TipDirection;
+  iconColor: string;
+  confirmText: string;
+  cancelText: string;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=pop-confirm.vue.d.ts.map

package/dist/components/pop-confirm/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/pop-confirm/style.js

@@ -0,0 +1 @@
+import "./style2.css";

package/dist/components/pop-confirm/style2.css

@@ -0,0 +1,52 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-pop-confirm--main {
+  max-width: 200px;
+  width: max-content;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-pop-confirm--icon {
+  margin-right: 8px;
+  color: var(--u-color-warning);
+}
+.u-pop-confirm--small {
+  font-size: var(--u-font-size-main-small);
+  margin-bottom: var(--u-gap-small);
+}
+.u-pop-confirm--default {
+  font-size: var(--u-font-size-main-default);
+  margin-bottom: var(--u-gap-default);
+}
+.u-pop-confirm--large {
+  font-size: var(--u-font-size-main-large);
+  margin-bottom: var(--u-gap-large);
+}
+.u-pop-confirm--action {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-pop-confirm--action i {
+  display: block;
+  visibility: hidden;
+  width: 6px;
+}

package/dist/components/progress/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./progress.vue.js";

package/dist/components/progress/progress.js

@@ -0,0 +1,99 @@
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, guardReactiveProps, normalizeClass, normalizeProps, normalizeStyle, openBlock, renderSlot, toDisplayString, unref } from "vue";
+import { n } from "@cat-kit/core";
+import { bem, withUnit } from "@veltra/utils";
+//#region src/components/progress/progress.vue
+const _hoisted_1 = { viewBox: "0 0 100 100" };
+const _hoisted_2 = [
+	"stroke",
+	"stroke-dasharray",
+	"stroke-linecap"
+];
+const r = 44;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "Progress",
+	__name: "progress",
+	props: {
+		type: {
+			type: [String, Function],
+			default: "primary"
+		},
+		size: {},
+		percentage: {},
+		circle: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const cls = bem("progress");
+		const percentage = computed(() => {
+			return n(props.percentage ?? 0).range(0, 100);
+		});
+		const type = computed(() => {
+			const { type } = props;
+			return typeof type === "function" ? type(percentage.value) : type;
+		});
+		const className = computed(() => {
+			return [
+				cls.b,
+				bem.is("circle", props.circle),
+				cls.m(type.value)
+			];
+		});
+		/** 描边 */
+		const stroke = computed(() => {
+			return `var(--color-${type.value})`;
+		});
+		const c = 2 * Math.PI * r;
+		const offset = c / 4;
+		/** 圆周 */
+		const dashArray = computed(() => {
+			const dashLen = c * percentage.value / 100;
+			return `${dashLen}, ${c - dashLen}`;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(className.value) }, [createCommentVNode(" 条形进度条 "), !__props.circle ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: normalizeClass(unref(cls).e("bar-wrap"))
+			}, [createElementVNode("div", {
+				class: normalizeClass(unref(cls).e("bar")),
+				style: normalizeStyle({ width: percentage.value + "%" })
+			}, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+				percentage: percentage.value,
+				type: type.value
+			})), () => [createTextVNode(toDisplayString(percentage.value) + "%", 1)])], 6)], 2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" 环形进度条 "), createElementVNode("div", {
+				class: normalizeClass(unref(cls).e("circle")),
+				style: normalizeStyle({
+					height: unref(withUnit)(__props.size, "px"),
+					width: unref(withUnit)(__props.size, "px")
+				})
+			}, [(openBlock(), createElementBlock("svg", _hoisted_1, [createElementVNode("circle", {
+				cx: "50",
+				cy: "50",
+				r,
+				fill: "none",
+				stroke: "#f5f8fa",
+				"stroke-width": "8"
+			}), createElementVNode("circle", {
+				class: normalizeClass(unref(cls).e("circle-ring")),
+				cx: "50",
+				cy: "50",
+				r,
+				fill: "none",
+				stroke: stroke.value,
+				"stroke-width": "8",
+				"stroke-dasharray": dashArray.value,
+				"stroke-dashoffset": offset,
+				"stroke-linecap": percentage.value === 0 ? void 0 : "round"
+			}, null, 10, _hoisted_2)])), createElementVNode("div", { class: normalizeClass(unref(cls).e("circle-content")) }, [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps({
+				percentage: percentage.value,
+				type: type.value
+			})), () => [createTextVNode(toDisplayString(percentage.value) + "% ", 1)])], 2)], 6)], 2112))], 2);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=progress.js.map

package/dist/components/progress/progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.js","names":[],"sources":["../../../src/components/progress/progress.vue"],"sourcesContent":["<template>\n  <div :class=\"className\">\n    <!-- 条形进度条 -->\n    <div :class=\"cls.e('bar-wrap')\" v-if=\"!circle\">\n      <div :class=\"cls.e('bar')\" :style=\"{ width: percentage + '%' }\">\n        <slot v-bind=\"{ percentage, type }\">{{ percentage }}%</slot>\n      </div>\n    </div>\n\n    <!-- 环形进度条 -->\n    <div\n      v-else\n      :class=\"cls.e('circle')\"\n      :style=\"{ height: withUnit(size, 'px'), width: withUnit(size, 'px') }\"\n    >\n      <svg viewBox=\"0 0 100 100\">\n        <circle cx=\"50\" cy=\"50\" :r=\"r\" fill=\"none\" stroke=\"#f5f8fa\" stroke-width=\"8\" />\n        <circle\n          :class=\"cls.e('circle-ring')\"\n          cx=\"50\"\n          cy=\"50\"\n          :r=\"r\"\n          fill=\"none\"\n          :stroke=\"stroke\"\n          stroke-width=\"8\"\n          :stroke-dasharray=\"dashArray\"\n          :stroke-dashoffset=\"offset\"\n          :stroke-linecap=\"percentage === 0 ? undefined : 'round'\"\n        />\n      </svg>\n\n      <div :class=\"cls.e('circle-content')\">\n        <slot v-bind=\"{ percentage, type }\"> {{ percentage }}% </slot>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { n } from '@cat-kit/core'\nimport { bem, withUnit } from '@veltra/utils'\nimport { computed } from 'vue'\n\nimport type { ProgressProps, ColorType } from '../../types'\n\ndefineOptions({\n  name: 'Progress'\n})\n\nconst props = withDefaults(defineProps<ProgressProps>(), {\n  type: 'primary',\n  circle: false\n})\n\ndefineSlots<{\n  default: (props: {\n    /** 进度百分比 */\n    percentage: number\n    /** 样式类型 */\n    type: ColorType\n  }) => any\n}>()\n\nconst cls = bem('progress')\n\nconst percentage = computed(() => {\n  return n(props.percentage ?? 0).range(0, 100)\n})\n\nconst type = computed<ColorType>(() => {\n  const { type } = props\n  return typeof type === 'function' ? type(percentage.value) : type\n})\n\nconst className = computed(() => {\n  return [cls.b, bem.is('circle', props.circle), cls.m(type.value)]\n})\n\n/** 描边 */\nconst stroke = computed(() => {\n  return `var(--color-${type.value})`\n})\n\nconst r = 44\nconst c = 2 * Math.PI * r\nconst offset = c / 4\n\n/** 圆周 */\nconst dashArray = computed(() => {\n  const dashLen = (c * percentage.value) / 100\n  return `${dashLen}, ${c - dashLen}`\n})\n</script>\n"],"mappings":";;;;;;;;;;AAmFA,MAAM,IAAI;;;;;;;;;;;;;;;;;EAlCV,MAAM,QAAQ;EAcd,MAAM,MAAM,IAAI,WAAU;EAE1B,MAAM,aAAa,eAAe;AAChC,UAAO,EAAE,MAAM,cAAc,EAAE,CAAC,MAAM,GAAG,IAAG;IAC7C;EAED,MAAM,OAAO,eAA0B;GACrC,MAAM,EAAE,SAAS;AACjB,UAAO,OAAO,SAAS,aAAa,KAAK,WAAW,MAAM,GAAG;IAC9D;EAED,MAAM,YAAY,eAAe;AAC/B,UAAO;IAAC,IAAI;IAAG,IAAI,GAAG,UAAU,MAAM,OAAO;IAAE,IAAI,EAAE,KAAK,MAAM;IAAA;IACjE;;EAGD,MAAM,SAAS,eAAe;AAC5B,UAAO,eAAe,KAAK,MAAM;IAClC;EAGD,MAAM,IAAI,IAAI,KAAK,KAAK;EACxB,MAAM,SAAS,IAAI;;EAGnB,MAAM,YAAY,eAAe;GAC/B,MAAM,UAAW,IAAI,WAAW,QAAS;AACzC,UAAO,GAAG,QAAQ,IAAI,IAAI;IAC3B;;uBA1FC,mBAkCM,OAAA,EAlCA,OAAK,eAAE,UAAA,MAAS,EAAA,EAAA,CACpB,mBAAA,UAAc,EAAA,CACyB,QAAA,UAAA,WAAA,EAAvC,mBAIM,OAAA;;IAJA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,WAAA,CAAA;OAChB,mBAEM,OAAA;IAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,MAAA,CAAA;IAAU,OAAK,eAAA,EAAA,OAAW,WAAA,QAAU,KAAA,CAAA;OACpD,WAA4D,KAAA,QAAA,WAAA,eAAA,mBAAA;IAAA,YAA5C,WAAA;IAAU,MAAE,KAAA;IAAI,CAAA,CAAA,QAA4B,CAAA,gBAAA,gBAArB,WAAA,MAAU,GAAG,KAAC,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,KAAA,WAAA,EAKzD,mBAwBM,UAAA,EAAA,KAAA,GAAA,EAAA,CAzBN,mBAAA,UAAc,EACd,mBAwBM,OAAA;IAtBH,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,SAAA,CAAA;IACZ,OAAK,eAAA;KAAA,QAAY,MAAA,SAAQ,CAAC,QAAA,MAAI,KAAA;KAAA,OAAgB,MAAA,SAAQ,CAAC,QAAA,MAAI,KAAA;KAAA,CAAA;qBAE5D,mBAcM,OAdN,YAcM,CAbJ,mBAA+E,UAAA;IAAvE,IAAG;IAAK,IAAG;IAAS;IAAG,MAAK;IAAO,QAAO;IAAU,gBAAa;OACzE,mBAWE,UAAA;IAVC,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,cAAA,CAAA;IACb,IAAG;IACH,IAAG;IACC;IACJ,MAAK;IACJ,QAAQ,OAAA;IACT,gBAAa;IACZ,oBAAkB,UAAA;IAClB,qBAAmB;IACnB,kBAAgB,WAAA,UAAU,IAAS,KAAA,IAAS;gCAIjD,mBAEM,OAAA,EAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,iBAAA,CAAA,EAAA,EAAA,CAChB,WAA8D,KAAA,QAAA,WAAA,eAAA,mBAAA;IAAA,YAA9C,WAAA;IAAU,MAAE,KAAA;IAAI,CAAA,CAAA,QAA8B,CAAA,gBAAA,gBAAtB,WAAA,MAAU,GAAG,MAAE,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,EAAA"}

package/dist/components/progress/progress.vue.d.ts

@@ -0,0 +1,25 @@
+import { ProgressProps } from "../../types/progress.js";
+import { index_d_exports } from "../../types/index.js";
+import * as _$vue from "vue";
+
+//#region src/components/progress/progress.vue.d.ts
+type __VLS_Slots = {
+  default: (props: {
+    /** 进度百分比 */percentage: number; /** 样式类型 */
+    type: index_d_exports.ColorType;
+  }) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<ProgressProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ProgressProps> & Readonly<{}>, {
+  type: index_d_exports.ColorType | ((percentage: number) => index_d_exports.ColorType);
+  circle: boolean;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=progress.vue.d.ts.map

package/dist/components/progress/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/progress/style.js

@@ -0,0 +1 @@
+import "./style2.css";

package/dist/components/progress/style2.css

@@ -0,0 +1,77 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-progress__bar-wrap {
+  height: 1.3em;
+  background-color: var(--u-bg-color-hover);
+  border-radius: 1.3em;
+  overflow: hidden;
+}
+.u-progress__bar {
+  height: 100%;
+  color: var(--u-text-color-white);
+  overflow: hidden;
+  transition: width 0.4s cubic-bezier(0.25, 0.1, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-progress__circle {
+  width: 100px;
+  height: 100px;
+  position: relative;
+}
+.u-progress__circle > svg {
+  width: 100%;
+  height: 100%;
+}
+.u-progress__circle-content {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-progress__circle-ring {
+  transition: stroke-dasharray 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+.u-progress--primary .u-progress__bar {
+  background-color: var(--u-color-primary);
+}
+.u-progress--success .u-progress__bar {
+  background-color: var(--u-color-success);
+}
+.u-progress--warning .u-progress__bar {
+  background-color: var(--u-color-warning);
+}
+.u-progress--danger .u-progress__bar {
+  background-color: var(--u-color-danger);
+}
+.u-progress--info .u-progress__bar {
+  background-color: var(--u-color-info);
+}
+.u-progress--disabled .u-progress__bar {
+  background-color: var(--u-color-disabled);
+}
+.u-progress--default .u-progress__bar {
+  background-color: var(--u-color-default);
+}

package/dist/components/progress-nodes/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./progress-nodes.vue.js";

package/dist/components/progress-nodes/progress-nodes.js

@@ -0,0 +1,134 @@
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, renderList, renderSlot, shallowRef, toDisplayString, toRefs, unref, useTemplateRef, watch } from "vue";
+import { o } from "@cat-kit/core";
+import { bem } from "@veltra/utils";
+import { useDrag, useResizeObserver } from "@veltra/compositions";
+//#region src/components/progress-nodes/progress-nodes.vue
+const _hoisted_1 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "ProgressNodes",
+	__name: "progress-nodes",
+	props: {
+		modelValue: {},
+		nodes: {},
+		check: {},
+		colorType: { default: "primary" },
+		maxWidth: {},
+		labelKey: { default: "label" },
+		valueKey: { default: "value" }
+	},
+	emits: ["click", "update:modelValue"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { nodes } = toRefs(props);
+		const cls = bem("progress-nodes");
+		const containerRef = useTemplateRef("container");
+		const isDragging = shallowRef(false);
+		const isScrollable = shallowRef(false);
+		const showMaskStart = shallowRef(false);
+		const showMaskEnd = shallowRef(false);
+		const className = computed(() => [
+			cls.b,
+			cls.m(props.colorType),
+			bem.is("scrollable", isScrollable.value),
+			bem.is("dragging", isDragging.value),
+			bem.is("mask-start", showMaskStart.value),
+			bem.is("mask-end", showMaskEnd.value)
+		]);
+		const containerStyle = computed(() => {
+			const style = {};
+			const maxWidth = toCssSize(props.maxWidth);
+			if (maxWidth) style.maxWidth = maxWidth;
+			return style;
+		});
+		let startScrollLeft = 0;
+		useDrag({
+			target: containerRef,
+			onDragStart() {
+				if (!isScrollable.value) return;
+				const container = containerRef.value;
+				if (!container) return;
+				isDragging.value = true;
+				startScrollLeft = container.scrollLeft;
+			},
+			onDrag({ x }) {
+				if (!isScrollable.value) return;
+				const container = containerRef.value;
+				if (!container) return;
+				container.scrollLeft = startScrollLeft - x;
+			},
+			onDragEnd() {
+				isDragging.value = false;
+			}
+		});
+		useResizeObserver({
+			targets: containerRef,
+			onResize: checkScroll
+		});
+		watch(nodes, () => {
+			nextTick(checkScroll);
+		}, { deep: true });
+		function checkScroll() {
+			const container = containerRef.value;
+			if (!container) return;
+			const { scrollLeft, scrollWidth, clientWidth } = container;
+			isScrollable.value = scrollWidth > clientWidth + 1;
+			showMaskStart.value = scrollLeft > 0;
+			showMaskEnd.value = scrollLeft + clientWidth < scrollWidth - 1;
+		}
+		function isChecked(node, index) {
+			return props.check?.(node, index) ?? false;
+		}
+		function isActive(node) {
+			const value = o(node).get(props.valueKey);
+			return props.modelValue === value;
+		}
+		function getLabel(node) {
+			return o(node).get(props.labelKey);
+		}
+		function handleClick(node, index) {
+			emit("update:modelValue", o(node).get(props.valueKey));
+			emit("click", node, index);
+		}
+		function toCssSize(value) {
+			if (value === void 0) return void 0;
+			return typeof value === "number" ? `${value}px` : value;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				ref: "container",
+				class: normalizeClass(className.value),
+				style: normalizeStyle(containerStyle.value),
+				onScroll: checkScroll
+			}, [createElementVNode("ul", { class: normalizeClass(unref(cls).e("list")) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(nodes), (node, index) => {
+				return openBlock(), createElementBlock("li", {
+					key: node.key ?? index,
+					class: normalizeClass([
+						unref(cls).e("item"),
+						unref(bem).is("checked", isChecked(node, index)),
+						unref(bem).is("active", isActive(node))
+					]),
+					onClick: ($event) => handleClick(node, index)
+				}, [createElementVNode("div", { class: normalizeClass(unref(cls).e("node")) }, [
+					createCommentVNode(" 虚线连接 "),
+					index !== unref(nodes).length - 1 ? (openBlock(), createElementBlock("div", {
+						key: 0,
+						class: normalizeClass(unref(cls).e("link"))
+					}, null, 2)) : createCommentVNode("v-if", true),
+					createCommentVNode(" 节点圆点 "),
+					createElementVNode("span", { class: normalizeClass(unref(cls).e("dot")) }, [renderSlot(_ctx.$slots, "icon", {
+						node,
+						index
+					})], 2)
+				], 2), createElementVNode("div", { class: normalizeClass(unref(cls).e("label")) }, [renderSlot(_ctx.$slots, "default", {
+					node,
+					index
+				}, () => [createTextVNode(toDisplayString(getLabel(node)), 1)])], 2)], 10, _hoisted_1);
+			}), 128))], 2)], 38);
+		};
+	}
+});
+//#endregion
+export { _sfc_main as default };
+
+//# sourceMappingURL=progress-nodes.js.map

package/dist/components/progress-nodes/progress-nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-nodes.js","names":[],"sources":["../../../src/components/progress-nodes/progress-nodes.vue"],"sourcesContent":["<template>\n  <div ref=\"container\" :class=\"className\" :style=\"containerStyle\" @scroll=\"checkScroll\">\n    <ul :class=\"cls.e('list')\">\n      <li\n        v-for=\"(node, index) in nodes\"\n        :key=\"node.key ?? index\"\n        :class=\"[\n          cls.e('item'),\n          bem.is('checked', isChecked(node, index)),\n          bem.is('active', isActive(node))\n        ]\"\n        @click=\"handleClick(node, index)\"\n      >\n        <div :class=\"cls.e('node')\">\n          <!-- 虚线连接 -->\n          <div v-if=\"index !== nodes.length - 1\" :class=\"cls.e('link')\"></div>\n\n          <!-- 节点圆点 -->\n          <span :class=\"cls.e('dot')\">\n            <slot name=\"icon\" :node=\"node\" :index=\"index\" />\n          </span>\n        </div>\n\n        <div :class=\"cls.e('label')\">\n          <slot :node=\"node\" :index=\"index\">\n            {{ getLabel(node) }}\n          </slot>\n        </div>\n      </li>\n    </ul>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { o } from '@cat-kit/core'\nimport { useDrag, useResizeObserver } from '@veltra/compositions'\nimport { bem } from '@veltra/utils'\nimport { computed, shallowRef, toRefs, useTemplateRef, watch, nextTick } from 'vue'\n\nimport type { ProgressNodesProps, ProgressNodesEmits } from '../../types'\n\ndefineOptions({\n  name: 'ProgressNodes'\n})\n\nconst props = withDefaults(defineProps<ProgressNodesProps>(), {\n  colorType: 'primary',\n  labelKey: 'label',\n  valueKey: 'value'\n})\n\nconst emit = defineEmits<ProgressNodesEmits>()\n\nconst { nodes } = toRefs(props)\n\nconst cls = bem('progress-nodes')\nconst containerRef = useTemplateRef('container')\nconst isDragging = shallowRef(false)\nconst isScrollable = shallowRef(false)\nconst showMaskStart = shallowRef(false)\nconst showMaskEnd = shallowRef(false)\n\nconst className = computed(() => [\n  cls.b,\n  cls.m(props.colorType),\n  bem.is('scrollable', isScrollable.value),\n  bem.is('dragging', isDragging.value),\n  bem.is('mask-start', showMaskStart.value),\n  bem.is('mask-end', showMaskEnd.value)\n])\n\nconst containerStyle = computed(() => {\n  const style: Record<string, string> = {}\n  const maxWidth = toCssSize(props.maxWidth)\n  if (maxWidth) style.maxWidth = maxWidth\n  return style\n})\n\nlet startScrollLeft = 0\n\nuseDrag({\n  target: containerRef,\n  onDragStart() {\n    if (!isScrollable.value) return\n    const container = containerRef.value\n    if (!container) return\n    isDragging.value = true\n    startScrollLeft = container.scrollLeft\n  },\n  onDrag({ x }) {\n    if (!isScrollable.value) return\n    const container = containerRef.value\n    if (!container) return\n    container.scrollLeft = startScrollLeft - x\n  },\n  onDragEnd() {\n    isDragging.value = false\n  }\n})\n\nuseResizeObserver({\n  targets: containerRef,\n  onResize: checkScroll\n})\n\nwatch(\n  nodes,\n  () => {\n    nextTick(checkScroll)\n  },\n  { deep: true }\n)\n\nfunction checkScroll() {\n  const container = containerRef.value\n  if (!container) return\n\n  const { scrollLeft, scrollWidth, clientWidth } = container\n  isScrollable.value = scrollWidth > clientWidth + 1\n  showMaskStart.value = scrollLeft > 0\n  showMaskEnd.value = scrollLeft + clientWidth < scrollWidth - 1\n}\n\nfunction isChecked(node: Record<string, any>, index: number) {\n  return props.check?.(node, index) ?? false\n}\n\nfunction isActive(node: Record<string, any>) {\n  const value = o(node).get(props.valueKey)\n  return props.modelValue === value\n}\n\nfunction getLabel(node: Record<string, any>) {\n  return o(node).get(props.labelKey)\n}\n\nfunction handleClick(node: Record<string, any>, index: number) {\n  const value = o(node).get(props.valueKey)\n  emit('update:modelValue', value)\n  emit('click', node, index)\n}\n\nfunction toCssSize(value?: number | string) {\n  if (value === undefined) return undefined\n  return typeof value === 'number' ? `${value}px` : value\n}\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA6CA,MAAM,QAAQ;EAMd,MAAM,OAAO;EAEb,MAAM,EAAE,UAAU,OAAO,MAAK;EAE9B,MAAM,MAAM,IAAI,iBAAgB;EAChC,MAAM,eAAe,eAAe,YAAW;EAC/C,MAAM,aAAa,WAAW,MAAK;EACnC,MAAM,eAAe,WAAW,MAAK;EACrC,MAAM,gBAAgB,WAAW,MAAK;EACtC,MAAM,cAAc,WAAW,MAAK;EAEpC,MAAM,YAAY,eAAe;GAC/B,IAAI;GACJ,IAAI,EAAE,MAAM,UAAU;GACtB,IAAI,GAAG,cAAc,aAAa,MAAM;GACxC,IAAI,GAAG,YAAY,WAAW,MAAM;GACpC,IAAI,GAAG,cAAc,cAAc,MAAM;GACzC,IAAI,GAAG,YAAY,YAAY,MAAK;GACrC,CAAA;EAED,MAAM,iBAAiB,eAAe;GACpC,MAAM,QAAgC,EAAC;GACvC,MAAM,WAAW,UAAU,MAAM,SAAQ;AACzC,OAAI,SAAU,OAAM,WAAW;AAC/B,UAAO;IACR;EAED,IAAI,kBAAkB;AAEtB,UAAQ;GACN,QAAQ;GACR,cAAc;AACZ,QAAI,CAAC,aAAa,MAAO;IACzB,MAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAChB,eAAW,QAAQ;AACnB,sBAAkB,UAAU;;GAE9B,OAAO,EAAE,KAAK;AACZ,QAAI,CAAC,aAAa,MAAO;IACzB,MAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAChB,cAAU,aAAa,kBAAkB;;GAE3C,YAAY;AACV,eAAW,QAAQ;;GAEtB,CAAA;AAED,oBAAkB;GAChB,SAAS;GACT,UAAU;GACX,CAAA;AAED,QACE,aACM;AACJ,YAAS,YAAW;KAEtB,EAAE,MAAM,MAAK,CACf;EAEA,SAAS,cAAc;GACrB,MAAM,YAAY,aAAa;AAC/B,OAAI,CAAC,UAAW;GAEhB,MAAM,EAAE,YAAY,aAAa,gBAAgB;AACjD,gBAAa,QAAQ,cAAc,cAAc;AACjD,iBAAc,QAAQ,aAAa;AACnC,eAAY,QAAQ,aAAa,cAAc,cAAc;;EAG/D,SAAS,UAAU,MAA2B,OAAe;AAC3D,UAAO,MAAM,QAAQ,MAAM,MAAM,IAAI;;EAGvC,SAAS,SAAS,MAA2B;GAC3C,MAAM,QAAQ,EAAE,KAAK,CAAC,IAAI,MAAM,SAAQ;AACxC,UAAO,MAAM,eAAe;;EAG9B,SAAS,SAAS,MAA2B;AAC3C,UAAO,EAAE,KAAK,CAAC,IAAI,MAAM,SAAQ;;EAGnC,SAAS,YAAY,MAA2B,OAAe;AAE7D,QAAK,qBADS,EAAE,KAAK,CAAC,IAAI,MAAM,SAAQ,CACT;AAC/B,QAAK,SAAS,MAAM,MAAK;;EAG3B,SAAS,UAAU,OAAyB;AAC1C,OAAI,UAAU,KAAA,EAAW,QAAO,KAAA;AAChC,UAAO,OAAO,UAAU,WAAW,GAAG,MAAM,MAAM;;;uBA/IlD,mBA6BM,OAAA;IA7BD,KAAI;IAAa,OAAK,eAAE,UAAA,MAAS;IAAG,OAAK,eAAE,eAAA,MAAc;IAAG,UAAQ;OACvE,mBA2BK,MAAA,EA3BA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA,EAAA,EAAA,EAAA,UAAA,KAAA,EACf,mBAyBK,UAAA,MAAA,WAxBqB,MAAA,MAAK,GAArB,MAAM,UAAK;wBADrB,mBAyBK,MAAA;KAvBF,KAAK,KAAK,OAAO;KACjB,OAAK,eAAA;MAAc,MAAA,IAAG,CAAC,EAAC,OAAA;MAAoB,MAAA,IAAG,CAAC,GAAE,WAAY,UAAU,MAAM,MAAK,CAAA;MAAc,MAAA,IAAG,CAAC,GAAE,UAAW,SAAS,KAAI,CAAA;;KAK/H,UAAK,WAAE,YAAY,MAAM,MAAK;QAE/B,mBAQM,OAAA,EARA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA,EAAA,EAAA;KAChB,mBAAA,SAAa;KACF,UAAU,MAAA,MAAK,CAAC,SAAM,KAAA,WAAA,EAAjC,mBAAoE,OAAA;;MAA5B,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,OAAA,CAAA;;KAEpD,mBAAA,SAAa;KACb,mBAEO,QAAA,EAFA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,MAAA,CAAA,EAAA,EAAA,CACjB,WAAgD,KAAA,QAAA,QAAA;MAAvB;MAAc;;WAI3C,mBAIM,OAAA,EAJA,OAAK,eAAE,MAAA,IAAG,CAAC,EAAC,QAAA,CAAA,EAAA,EAAA,CAChB,WAEO,KAAA,QAAA,WAAA;KAFM;KAAc;aAEpB,CAAA,gBAAA,gBADF,SAAS,KAAI,CAAA,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,EAAA,IAAA,WAAA"}

package/dist/components/progress-nodes/progress-nodes.vue.d.ts

@@ -0,0 +1,38 @@
+import { ProgressNodesProps } from "../../types/progress-nodes.js";
+import * as _$vue from "vue";
+import * as _$_veltra_utils0 from "@veltra/utils";
+
+//#region src/components/progress-nodes/progress-nodes.vue.d.ts
+declare var __VLS_1: {
+    node: Record<string, any>;
+    index: number;
+  }, __VLS_3: {
+    node: Record<string, any>;
+    index: number;
+  };
+type __VLS_Slots = {} & {
+  icon?: (props: typeof __VLS_1) => any;
+} & {
+  default?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: _$vue.DefineComponent<ProgressNodesProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
+  click: (node: Record<string, any>, index: number) => any;
+  "update:modelValue": (value: string | number) => any;
+}, string, _$vue.PublicProps, Readonly<ProgressNodesProps> & Readonly<{
+  onClick?: ((node: Record<string, any>, index: number) => any) | undefined;
+  "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+}>, {
+  labelKey: string;
+  valueKey: string;
+  colorType: _$_veltra_utils0.ColorType;
+}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };
+//# sourceMappingURL=progress-nodes.vue.d.ts.map

package/dist/components/progress-nodes/style.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/components/progress-nodes/style.js

@@ -0,0 +1 @@
+import "./style2.css";

package/dist/components/progress-nodes/style2.css

@@ -0,0 +1,161 @@
+@charset "UTF-8";
+/** flex布局 */
+/**
+* 设置css变量
+* 参数1:变量前缀
+* 参数2: 一个由值组成的列表或者由key, value组成的map
+* css-var(height, (
+*   large: 40px
+*   default: 32px
+*   small: 24px
+* ))
+* 生成的css变量:
+* --u-height-large: 40px;
+* --u-height-default: 32px;
+* --u-height-small: 24px;
+*/
+/** 暗色：data-theme 与系统偏好，与 UITheme.injectBuiltInThemes 选择器策略一致 */
+.u-progress-nodes {
+  --checked-color: var(--u-color-primary);
+  --node-color: var(--u-text-color-placeholder);
+  --dot-size: 14px;
+  position: relative;
+  color: var(--node-color);
+  overflow: auto;
+  cursor: default;
+  scrollbar-width: none;
+}
+.u-progress-nodes::-webkit-scrollbar {
+  display: none;
+}
+.u-progress-nodes.is-scrollable {
+  cursor: grab;
+}
+.u-progress-nodes.is-dragging {
+  cursor: grabbing;
+}
+.u-progress-nodes--primary {
+  --checked-color: var(--u-color-primary);
+}
+.u-progress-nodes--success {
+  --checked-color: var(--u-color-success);
+}
+.u-progress-nodes--warning {
+  --checked-color: var(--u-color-warning);
+}
+.u-progress-nodes--danger {
+  --checked-color: var(--u-color-danger);
+}
+.u-progress-nodes--info {
+  --checked-color: var(--u-color-info);
+}
+.u-progress-nodes--disabled {
+  --checked-color: var(--u-color-disabled);
+}
+.u-progress-nodes--default {
+  --checked-color: var(--u-color-default);
+}
+.u-progress-nodes__list {
+  position: relative;
+  display: flex;
+  padding: 0;
+  margin: 0;
+}
+.u-progress-nodes__item {
+  font-weight: 600;
+  color: inherit;
+  flex: 0 0 auto;
+  transition: background-color 0.2s, color 0.2s;
+  border-radius: var(--u-radius-base);
+}
+.u-progress-nodes__item:hover .u-progress-nodes__dot {
+  border-color: var(--u-text-color-second);
+}
+.u-progress-nodes__item:hover .u-progress-nodes__label {
+  color: var(--u-text-color-primary);
+}
+.u-progress-nodes__node {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.u-progress-nodes__link {
+  position: absolute;
+  border-style: dashed;
+  border-color: var(--u-border-color);
+}
+.u-progress-nodes__dot {
+  position: relative;
+  width: var(--dot-size);
+  height: var(--dot-size);
+  border: 2px solid currentColor;
+  border-radius: 50%;
+  background-color: var(--u-bg-color-top);
+  box-sizing: border-box;
+  transition: background-color 0.2s, border-color 0.2s;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: nowrap;
+}
+.u-progress-nodes__dot > * {
+  font-size: 10px;
+}
+.u-progress-nodes__label {
+  font-size: var(--u-font-size-assist-small);
+  color: var(--u-text-color-second);
+  transition: color 0.2s;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.u-progress-nodes .u-progress-nodes__item.is-checked {
+  color: var(--checked-color);
+}
+.u-progress-nodes .u-progress-nodes__item.is-checked .u-progress-nodes__dot {
+  background-color: var(--checked-color);
+  border-color: var(--checked-color);
+}
+.u-progress-nodes .u-progress-nodes__item.is-checked .u-progress-nodes__label {
+  color: var(--checked-color);
+}
+.u-progress-nodes .u-progress-nodes__item.is-active {
+  isolation: isolate;
+  background-color: var(--u-bg-color-hover);
+  border-radius: var(--u-radius-default);
+}
+.u-progress-nodes.is-mask-start {
+  mask-image: linear-gradient(90deg, transparent, #000 30px);
+}
+.u-progress-nodes.is-mask-end {
+  mask-image: linear-gradient(270deg, transparent, #000 30px);
+}
+.u-progress-nodes.is-mask-start.is-mask-end {
+  mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent);
+}
+.u-progress-nodes__list {
+  flex-direction: row;
+  align-items: flex-start;
+}
+.u-progress-nodes__item {
+  min-width: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  padding: 4px;
+  gap: 2px;
+}
+.u-progress-nodes__node {
+  width: 100%;
+}
+.u-progress-nodes__link {
+  width: calc(100% - var(--dot-size) + 24px);
+  height: 0;
+  border-width: 1px 0 0 0;
+  left: calc(50% + var(--dot-size) / 2);
+  top: 50%;
+  transform: translateY(-50%);
+}

package/dist/components/radio/index.d.ts

@@ -0,0 +1 @@
+import { _default } from "./radio.vue.js";