savor-ui 0.32.0 → 0.33.1

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 
 
+## [0.33.1](https://gitee.com/mach552/savor-ui/compare/v0.33.0...v0.33.1) (2026-10-08)
+
+
+### Bug Fixes
+
+* **theme:** 修复仅设置 `lightTheme` 时暗色主题色未跟随自动生成 ([2207663](https://gitee.com/mach552/savor-ui/commits/220766393cab22de1b00d6820b99a277abfc6a62))
+
+# [0.33.0](https://gitee.com/mach552/savor-ui/compare/v0.32.0...v0.33.0) (2026-09-21)
+
+
+### Features
+
+* **slider:** 新增滑块组件 ([47dcd36](https://gitee.com/mach552/savor-ui/commits/47dcd36493b1950cc75f4ab2ff96709adaf688ec))
+
 # [0.32.0](https://gitee.com/mach552/savor-ui/compare/v0.31.1...v0.32.0) (2026-09-02)
 
 

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

@@ -52,6 +52,7 @@ export * from './src/scrollbar';
 export * from './src/segmented';
 export * from './src/select';
 export * from './src/skeleton';
+export * from './src/slider';
 export * from './src/slider-verify';
 export * from './src/space';
 export * from './src/split';

package/dist/es/components/index.mjs

@@ -76,6 +76,7 @@ import "./src/pagination/index.mjs";
 import "./src/panel/index.mjs";
 import "./src/progress/index.mjs";
 import "./src/skeleton/index.mjs";
+import "./src/slider/index.mjs";
 import "./src/slider-verify/index.mjs";
 import "./src/split/types.mjs";
 import "./src/split/index.mjs";

package/dist/es/components/src/slider/index.d.ts

@@ -0,0 +1,33 @@
+import { PublicProps, VNode, Plugin } from 'vue';
+export declare const SSlider: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: {
+    attrs: any;
+    slots: {};
+    emit: (((evt: "input", value: number | [number, number]) => void) & ((evt: "change", value: number | [number, number]) => void)) & ((event: "update:modelValue", value: number | [number, number]) => void);
+}, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: PublicProps & {
+        modelValue?: number | [number, number] | undefined;
+        defaultValue?: number | [number, number] | undefined;
+        min?: number | undefined;
+        max?: number | undefined;
+        step?: number | undefined;
+        vertical?: boolean | undefined;
+        range?: boolean | undefined;
+        disabled?: boolean | undefined;
+        tooltip?: boolean | undefined;
+        marks?: Record<number, string> | undefined;
+        format?: ((value: number) => string | number) | undefined;
+        size?: "mini" | "small" | "medium" | "large" | undefined;
+        onInput?: ((value: number | [number, number]) => any) | undefined;
+        onChange?: ((value: number | [number, number]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: number | [number, number]) => any) | undefined;
+    } & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (((evt: "input", value: number | [number, number]) => void) & ((evt: "change", value: number | [number, number]) => void)) & ((event: "update:modelValue", value: number | [number, number]) => void);
+}>) => VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+}) & Plugin;
+export * from './types';

package/dist/es/components/src/slider/index.mjs

@@ -0,0 +1,7 @@
+import { withInstall as e } from "../../../utils/src/install.mjs";
+import "../../../utils/index.mjs";
+import t from "./slider.vue.mjs";
+//#region ../components/src/slider/index.ts
+var n = e(t);
+//#endregion
+export { n as SSlider };

package/dist/es/components/src/slider/slider.d.ts

@@ -0,0 +1,26 @@
+import { SliderProps } from './types';
+import { PublicProps, VNode } from 'vue';
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: PublicProps & __VLS_PrettifyLocal<(SliderProps & {
+        modelValue?: number | [number, number];
+    }) & {
+        onInput?: ((value: number | [number, number]) => any) | undefined;
+        onChange?: ((value: number | [number, number]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: number | [number, number]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (((evt: "input", value: number | [number, number]) => void) & ((evt: "change", value: number | [number, number]) => void)) & ((event: "update:modelValue", value: number | [number, number]) => void);
+}>) => VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/es/components/src/slider/slider.vue.mjs

@@ -0,0 +1,156 @@
+import { useNamespace as e } from "../../../hooks/src/use-namespace.mjs";
+import "../../../hooks/index.mjs";
+import { useFormItem as t } from "../form/use-form-item.mjs";
+import { child as n, computed as r, createFor as i, createIf as ee, createInvoker as a, createTemplateRefSetter as te, defineVaporComponent as o, delegateEvents as s, mergeModels as c, next as l, on as u, ref as d, renderEffect as f, setAttr as p, setClass as m, setInsertionState as h, setProp as g, setStyle as _, setText as v, template as y, toDisplayString as b, toRefs as x, txt as S, unref as C, useModel as ne, useTemplateRef as re, withModifiers as ie } from "vue";
+//#region ../components/src/slider/slider.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var w = y("<div>"), T = y("<div> "), E = y("<div role=slider>"), D = y("<div><div></div><div></div>", 1);
+s("keydown", "pointerdown");
+var O = /*@__PURE__*/ o({
+	name: "SSlider",
+	__name: "slider",
+	props: /*@__PURE__*/ c({
+		modelValue: {},
+		defaultValue: { default: void 0 },
+		min: { default: 0 },
+		max: { default: 100 },
+		step: { default: 1 },
+		vertical: {
+			type: Boolean,
+			default: !1
+		},
+		range: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		tooltip: {
+			type: Boolean,
+			default: !0
+		},
+		marks: {},
+		format: {
+			type: Function,
+			default: void 0
+		},
+		size: { default: "medium" }
+	}, {
+		modelValue: { default: void 0 },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ c(["input", "change"], ["update:modelValue"]),
+	setup(o, { emit: s }) {
+		let c = o, y = s, O = e("slider"), { size: k } = x(c), { mergedSize: A } = t({ size: k }), j = ne(o, "modelValue"), M = re("trackRef");
+		j.value === void 0 && (j.value = c.defaultValue === void 0 ? c.range ? [c.min, c.max] : c.min : c.defaultValue);
+		let N = r(() => c.range || Array.isArray(j.value)), ae = r(() => N.value ? [0, 1] : [0]), P = r(() => {
+			let e = j.value;
+			return N.value ? Array.isArray(e) ? [e[0] ?? c.min, e[1] ?? c.max] : [c.min, c.max] : [typeof e == "number" ? e : c.min];
+		}), F = r(() => P.value.map((e) => (e - c.min) / (c.max - c.min || 1) * 100)), oe = r(() => {
+			let e = `${c.step}`, t = e.indexOf(".");
+			return t === -1 ? 0 : e.length - t - 1;
+		}), I = (e) => {
+			let t = Math.min(Math.max(e, c.min), c.max);
+			if (!c.step) return t;
+			let n = c.min + Math.round((t - c.min) / c.step) * c.step;
+			return Number(Number(n).toFixed(oe.value));
+		}, L = (e) => {
+			let t = M.value.getBoundingClientRect(), n = c.vertical ? 1 - (e.clientY - t.top) / (t.height || 1) : (e.clientX - t.left) / (t.width || 1);
+			return I(c.min + Math.min(Math.max(n, 0), 1) * (c.max - c.min));
+		}, R = (e, t) => {
+			if (N.value) {
+				let [n, r] = P.value, i = e === 0 ? [Math.min(t, r), r] : [n, Math.max(t, n)];
+				j.value = i, y("input", i);
+			} else j.value = t, y("input", t);
+		}, z = d(!1), B = d(null), V = d(null), H = (e) => {
+			!z.value || B.value === null || R(B.value, L(e));
+		}, U = () => {
+			z.value && (z.value = !1, B.value = null, document.removeEventListener("pointermove", H), document.removeEventListener("pointerup", U), y("change", j.value));
+		}, W = (e, t) => {
+			if (c.disabled || !M.value) return;
+			e.preventDefault();
+			let n = t;
+			if (n === null) {
+				let t = L(e);
+				n = N.value ? Math.abs(t - P.value[0]) <= Math.abs(t - P.value[1]) ? 0 : 1 : 0;
+			}
+			B.value = n, z.value = !0, R(n, L(e)), document.addEventListener("pointermove", H), document.addEventListener("pointerup", U);
+		}, G = (e) => W(e, null), K = (e, t) => W(e, t), se = (e, t) => {
+			if (c.disabled) return;
+			let { key: n } = e;
+			if (n === "Home" || n === "End") {
+				e.preventDefault(), R(t, n === "Home" ? c.min : c.max), y("change", j.value);
+				return;
+			}
+			let r = n === "ArrowRight" || n === "ArrowUp" ? c.step : n === "ArrowLeft" || n === "ArrowDown" ? -c.step : 0;
+			r && (e.preventDefault(), R(t, P.value[t] + r), y("change", j.value));
+		}, ce = r(() => c.vertical ? N.value ? {
+			bottom: `${F.value[0]}%`,
+			height: `${F.value[1] - F.value[0]}%`
+		} : {
+			bottom: "0%",
+			height: `${F.value[0]}%`
+		} : N.value ? {
+			left: `${F.value[0]}%`,
+			width: `${F.value[1] - F.value[0]}%`
+		} : {
+			left: "0%",
+			width: `${F.value[0]}%`
+		}), le = (e) => c.vertical ? { bottom: `${F.value[e]}%` } : { left: `${F.value[e]}%` }, q = r(() => {
+			let e = /* @__PURE__ */ new Map();
+			if (c.step > 1) for (let t = 1;; t++) {
+				let n = I(c.min + t * c.step);
+				if (n >= c.max) break;
+				e.set(n, void 0);
+			}
+			for (let t of Object.keys(c.marks || {})) {
+				let n = I(Number(t));
+				n >= c.min && n <= c.max && e.set(n, c.marks[Number(t)]);
+			}
+			let t = c.max - c.min || 1;
+			return Array.from(e.entries()).map(([e, n]) => ({
+				value: e,
+				percent: (e - c.min) / t * 100,
+				label: n
+			}));
+		}), ue = r(() => q.value.filter((e) => e.label !== void 0)), de = r(() => q.value.filter((e) => e.value > c.min && e.value < c.max)), J = (e) => c.vertical ? { bottom: `${e}%` } : { left: `${e}%` }, fe = (e) => !c.tooltip || c.disabled ? !1 : z.value && B.value === e || V.value === e, Y = (e) => {
+			let t = P.value[e];
+			return String(c.format ? c.format(t) : t);
+		}, X = te(), Z = D(), Q = n(Z), $ = l(Q, 1);
+		return f(() => {
+			let e = C(O);
+			m(Z, [
+				e.b(),
+				e.m(C(A)),
+				e.is("vertical", o.vertical),
+				e.is("disabled", o.disabled),
+				e.is("range", o.range)
+			]), m(Q, [e.e("rail")]), m($, [e.e("fill")]), _($, ce.value);
+		}), h(Z, null, 2), i(() => de.value, (e) => {
+			let t = w();
+			return f(() => {
+				m(t, [C(O).e("mark")]), _(t, J(e.value.percent));
+			}), t;
+		}, (e) => `mark-${e.value}`, 8), h(Z, null, 3), i(() => ue.value, (e) => {
+			let t = T(), n = S(t);
+			return f(() => {
+				let r = e.value;
+				m(t, [C(O).e("mark-label")]), _(t, J(r.percent)), v(n, b(r.label));
+			}), t;
+		}, (e) => `mark-label-${e.value}`, 8), h(Z, null, 4), i(() => ae.value, (e) => {
+			let t = E();
+			return f(() => {
+				let n = C(O), r = e.value, i = o.disabled;
+				m(t, [n.e("handle"), n.is("active", z.value && B.value === r)]), _(t, le(r)), g(t, "tabindex", i ? -1 : 0), p(t, "aria-valuemin", o.min), p(t, "aria-valuemax", o.max), p(t, "aria-valuenow", P.value[r]), p(t, "aria-valuetext", Y(r)), p(t, "aria-orientation", o.vertical ? "vertical" : "horizontal"), p(t, "aria-disabled", i);
+			}), h(t, null, 0), ee(() => fe(e.value), () => {
+				let t = T(), n = S(t);
+				return f(() => {
+					m(t, [C(O).e("tooltip")]), v(n, b(Y(e.value)));
+				}), t;
+			}), u(t, "pointerdown", ie((t) => K(t, e.value), ["stop"])), t.$evtkeydown = a((t) => se(t, e.value)), u(t, "mouseenter", () => V.value = e.value), u(t, "mouseleave", () => V.value = null), t;
+		}, (e) => e, 8), Z.$evtpointerdown = a(G), X(Z, M, null, "trackRef"), Z;
+	}
+});
+//#endregion
+export { O as default };

package/dist/es/components/src/slider/types.d.ts

@@ -0,0 +1,48 @@
+export interface SliderProps {
+    /** 滑块值（v-model），range 时为 [起始值, 结束值] */
+    modelValue?: number | [number, number];
+    /** 默认值 */
+    defaultValue?: number | [number, number];
+    /** 最小值
+     * @default 0
+     */
+    min?: number;
+    /** 最大值
+     * @default 100
+     */
+    max?: number;
+    /** 步长
+     * @default 1
+     */
+    step?: number;
+    /** 是否竖向
+     * @default false
+     */
+    vertical?: boolean;
+    /** 是否为范围选择（双滑块）
+     * @default false
+     */
+    range?: boolean;
+    /** 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /** 是否显示 tooltip
+     * @default true
+     */
+    tooltip?: boolean;
+    /** 刻度标记，key 为位置值，value 为标签文本 */
+    marks?: Record<number, string>;
+    /** tooltip 内容格式化函数 */
+    format?: (value: number) => string | number;
+    /** 尺寸
+     * @default medium
+     */
+    size?: "mini" | "small" | "medium" | "large";
+}
+export interface SliderEmits {
+    /** 拖动或点击轨道时持续触发 */
+    input: [value: number | [number, number]];
+    /** 一次拖动/点击/键盘操作结束时触发 */
+    change: [value: number | [number, number]];
+}

package/dist/es/core/components.mjs

@@ -55,25 +55,26 @@ import { SPagination as xe } from "../components/src/pagination/index.mjs";
 import { SPanel as Se } from "../components/src/panel/index.mjs";
 import { SProgress as Ce } from "../components/src/progress/index.mjs";
 import { SSkeleton as we } from "../components/src/skeleton/index.mjs";
-import { SSliderVerify as Te } from "../components/src/slider-verify/index.mjs";
-import { SSplit as Ee, SSplitPane as De } from "../components/src/split/index.mjs";
-import { SStatistic as Oe } from "../components/src/statistic/index.mjs";
-import { SSteps as ke } from "../components/src/steps/index.mjs";
-import { SSwitch as Ae } from "../components/src/switch/index.mjs";
-import { STable as je } from "../components/src/table/index.mjs";
-import { STextarea as Me } from "../components/src/textarea/index.mjs";
-import { STree as Ne } from "../components/src/tree/index.mjs";
-import { STransfer as Pe } from "../components/src/transfer/index.mjs";
-import { STimeline as Fe, STimelineItem as Ie } from "../components/src/timeline/index.mjs";
-import { STreeSelect as Le } from "../components/src/tree-select/index.mjs";
-import { SUpload as Re } from "../components/src/upload/index.mjs";
-import { SVirtualList as ze } from "../components/src/virtual-list/index.mjs";
-import { SWaterfall as Be } from "../components/src/waterfall/index.mjs";
-import { SWatermark as Ve } from "../components/src/watermark/index.mjs";
-import { SWheel as He } from "../components/src/wheel/index.mjs";
+import { SSlider as Te } from "../components/src/slider/index.mjs";
+import { SSliderVerify as Ee } from "../components/src/slider-verify/index.mjs";
+import { SSplit as De, SSplitPane as Oe } from "../components/src/split/index.mjs";
+import { SStatistic as ke } from "../components/src/statistic/index.mjs";
+import { SSteps as Ae } from "../components/src/steps/index.mjs";
+import { SSwitch as je } from "../components/src/switch/index.mjs";
+import { STable as Me } from "../components/src/table/index.mjs";
+import { STextarea as Ne } from "../components/src/textarea/index.mjs";
+import { STree as Pe } from "../components/src/tree/index.mjs";
+import { STransfer as Fe } from "../components/src/transfer/index.mjs";
+import { STimeline as Ie, STimelineItem as Le } from "../components/src/timeline/index.mjs";
+import { STreeSelect as Re } from "../components/src/tree-select/index.mjs";
+import { SUpload as ze } from "../components/src/upload/index.mjs";
+import { SVirtualList as Be } from "../components/src/virtual-list/index.mjs";
+import { SWaterfall as Ve } from "../components/src/waterfall/index.mjs";
+import { SWatermark as He } from "../components/src/watermark/index.mjs";
+import { SWheel as Ue } from "../components/src/wheel/index.mjs";
 import "../components/index.mjs";
 //#region components.ts
-var Ue = [
+var We = [
 	e,
 	t,
 	f,
@@ -145,32 +146,33 @@ var Ue = [
 	D,
 	we,
 	Te,
-	_e,
 	Ee,
+	_e,
 	De,
 	Oe,
-	me,
 	ke,
+	me,
 	Ae,
-	J,
 	je,
+	J,
+	Me,
 	Y,
 	X,
 	ve,
 	v,
-	Me,
-	Fe,
+	Ne,
 	Ie,
+	Le,
 	a,
-	Pe,
+	Fe,
 	k,
-	Ne,
-	Le,
+	Pe,
 	Re,
 	ze,
 	Be,
 	Ve,
-	He
+	He,
+	Ue
 ];
 //#endregion
-export { Ue as default };
+export { We as default };

package/dist/es/core/global.d.ts

@@ -69,6 +69,7 @@ declare module "vue" {
     SSegmented: (typeof import("savor-ui"))["SSegmented"];
     SSelect: (typeof import("savor-ui"))["SSelect"];
     SSkeleton: (typeof import("savor-ui"))["SSkeleton"];
+    SSlider: (typeof import("savor-ui"))["SSlider"];
     SSliderVerify: (typeof import("savor-ui"))["SSliderVerify"];
     SSpace: (typeof import("savor-ui"))["SSpace"];
     SSplit: (typeof import("savor-ui"))["SSplit"];

package/dist/es/core/index.mjs

@@ -75,30 +75,31 @@ import { SPagination as We } from "../components/src/pagination/index.mjs";
 import { SPanel as Ge } from "../components/src/panel/index.mjs";
 import { SProgress as Ke } from "../components/src/progress/index.mjs";
 import { SSkeleton as qe } from "../components/src/skeleton/index.mjs";
-import { SSliderVerify as Je } from "../components/src/slider-verify/index.mjs";
-import { splitContextKey as Ye } from "../components/src/split/types.mjs";
-import { SSplit as Xe, SSplitPane as Ze } from "../components/src/split/index.mjs";
-import { SStatistic as Qe } from "../components/src/statistic/index.mjs";
-import { SSteps as $e } from "../components/src/steps/index.mjs";
-import { SSwitch as et } from "../components/src/switch/index.mjs";
-import { tableContextKey as tt } from "../components/src/table/types.mjs";
-import { STable as nt } from "../components/src/table/index.mjs";
-import { STextarea as rt } from "../components/src/textarea/index.mjs";
-import { treeContextKey as it } from "../components/src/tree/types.mjs";
-import { STree as at } from "../components/src/tree/index.mjs";
-import { STransfer as ot } from "../components/src/transfer/index.mjs";
-import { timelineContextKey as st } from "../components/src/timeline/types.mjs";
-import { STimeline as ct, STimelineItem as lt } from "../components/src/timeline/index.mjs";
-import { STreeSelect as ut } from "../components/src/tree-select/index.mjs";
-import { SUpload as dt } from "../components/src/upload/index.mjs";
-import { SVirtualList as ft } from "../components/src/virtual-list/index.mjs";
-import { SWaterfall as pt } from "../components/src/waterfall/index.mjs";
-import { SWatermark as mt } from "../components/src/watermark/index.mjs";
-import { SWheel as ht } from "../components/src/wheel/index.mjs";
+import { SSlider as Je } from "../components/src/slider/index.mjs";
+import { SSliderVerify as Ye } from "../components/src/slider-verify/index.mjs";
+import { splitContextKey as Xe } from "../components/src/split/types.mjs";
+import { SSplit as Ze, SSplitPane as Qe } from "../components/src/split/index.mjs";
+import { SStatistic as $e } from "../components/src/statistic/index.mjs";
+import { SSteps as et } from "../components/src/steps/index.mjs";
+import { SSwitch as tt } from "../components/src/switch/index.mjs";
+import { tableContextKey as nt } from "../components/src/table/types.mjs";
+import { STable as rt } from "../components/src/table/index.mjs";
+import { STextarea as it } from "../components/src/textarea/index.mjs";
+import { treeContextKey as at } from "../components/src/tree/types.mjs";
+import { STree as ot } from "../components/src/tree/index.mjs";
+import { STransfer as st } from "../components/src/transfer/index.mjs";
+import { timelineContextKey as ct } from "../components/src/timeline/types.mjs";
+import { STimeline as lt, STimelineItem as ut } from "../components/src/timeline/index.mjs";
+import { STreeSelect as dt } from "../components/src/tree-select/index.mjs";
+import { SUpload as ft } from "../components/src/upload/index.mjs";
+import { SVirtualList as pt } from "../components/src/virtual-list/index.mjs";
+import { SWaterfall as mt } from "../components/src/waterfall/index.mjs";
+import { SWatermark as ht } from "../components/src/watermark/index.mjs";
+import { SWheel as gt } from "../components/src/wheel/index.mjs";
 import "../components/index.mjs";
-import gt from "./components.mjs";
-import _t from "dayjs";
+import _t from "./components.mjs";
+import vt from "dayjs";
 //#region index.ts
-var vt = e(gt);
+var yt = e(_t);
 //#endregion
-export { t as SAlert, r as SAnchor, i as SAnchorLink, y as SAutoComplete, x as SAvatar, S as SAvatarGroup, _ as SBackTop, C as SBadge, w as SButton, T as SButtonGroup, D as SCard, O as SCarousel, I as SCascader, L as SChatList, R as SChatSender, j as SCheckbox, M as SCheckboxGroup, V as SCollapse, H as SCollapseItem, W as SColorPicker, l as SConfigProvider, G as SDatePicker, K as SDatetimePicker, J as SDescriptions, Y as SDescriptionsItem, X as SDivider, $ as SDoption, Z as SDrawer, ee as SDropdown, te as SDsubmenu, k as SEmpty, ne as SExpandCard, f as SForm, p as SFormItem, re as SGalleria, ae as SGrid, oe as SGridItem, se as SHighlight, h as SIcon, fe as SIconSelect, me as SImage, he as SImageGroup, ge as SImagePreview, m as SInput, _e as SInputGroup, ve as SInputNumber, ye as SInputTag, xe as SLayout, Se as SLayoutAside, Ce as SLayoutContent, we as SLayoutFooter, Te as SLayoutHeader, Ee as SLink, De as SList, je as SMenu, Me as SMenuGroup, Ne as SMenuItem, Ie as SMeterGroup, Re as SModal, He as SOverflowList, We as SPagination, Ge as SPanel, u as SPopover, Ke as SProgress, P as SRadio, F as SRadioGroup, v as SScrollbar, U as SSegmented, Ue as SSelect, qe as SSkeleton, Je as SSliderVerify, ze as SSpace, Xe as SSplit, Ze as SSplitPane, Qe as SStatistic, $e as SSteps, Pe as SSubMenu, et as SSwitch, le as STab, ue as STabPane, nt as STable, de as STabs, Ve as STag, E as SText, rt as STextarea, ct as STimeline, lt as STimelineItem, d as STooltip, ot as STransfer, z as STransition, at as STree, ut as STreeSelect, dt as SUpload, ft as SVirtualList, pt as SWaterfall, mt as SWatermark, ht as SWheel, n as anchorContextKey, b as avatarGroupContextKey, g as buttonGroupContextKey, A as checkboxGroupContextKey, B as collapseContextKey, c as configProviderContextKey, _t as dayjs, vt as default, q as descriptionsContextKey, Q as dropdownContextKey, a as formContextKey, o as formItemContextKey, s as formItemStatusContextKey, ie as gridContextKey, pe as imageGroupContextKey, Oe as menuContextKey, ke as menuLevelContextKey, N as radioGroupContextKey, Ye as splitContextKey, Ae as subMenuContextKey, tt as tableContextKey, ce as tabsContextKey, st as timelineContextKey, it as treeContextKey, be as useLayer, Fe as useMessage, Le as useModal, Be as useNotification };
+export { t as SAlert, r as SAnchor, i as SAnchorLink, y as SAutoComplete, x as SAvatar, S as SAvatarGroup, _ as SBackTop, C as SBadge, w as SButton, T as SButtonGroup, D as SCard, O as SCarousel, I as SCascader, L as SChatList, R as SChatSender, j as SCheckbox, M as SCheckboxGroup, V as SCollapse, H as SCollapseItem, W as SColorPicker, l as SConfigProvider, G as SDatePicker, K as SDatetimePicker, J as SDescriptions, Y as SDescriptionsItem, X as SDivider, $ as SDoption, Z as SDrawer, ee as SDropdown, te as SDsubmenu, k as SEmpty, ne as SExpandCard, f as SForm, p as SFormItem, re as SGalleria, ae as SGrid, oe as SGridItem, se as SHighlight, h as SIcon, fe as SIconSelect, me as SImage, he as SImageGroup, ge as SImagePreview, m as SInput, _e as SInputGroup, ve as SInputNumber, ye as SInputTag, xe as SLayout, Se as SLayoutAside, Ce as SLayoutContent, we as SLayoutFooter, Te as SLayoutHeader, Ee as SLink, De as SList, je as SMenu, Me as SMenuGroup, Ne as SMenuItem, Ie as SMeterGroup, Re as SModal, He as SOverflowList, We as SPagination, Ge as SPanel, u as SPopover, Ke as SProgress, P as SRadio, F as SRadioGroup, v as SScrollbar, U as SSegmented, Ue as SSelect, qe as SSkeleton, Je as SSlider, Ye as SSliderVerify, ze as SSpace, Ze as SSplit, Qe as SSplitPane, $e as SStatistic, et as SSteps, Pe as SSubMenu, tt as SSwitch, le as STab, ue as STabPane, rt as STable, de as STabs, Ve as STag, E as SText, it as STextarea, lt as STimeline, ut as STimelineItem, d as STooltip, st as STransfer, z as STransition, ot as STree, dt as STreeSelect, ft as SUpload, pt as SVirtualList, mt as SWaterfall, ht as SWatermark, gt as SWheel, n as anchorContextKey, b as avatarGroupContextKey, g as buttonGroupContextKey, A as checkboxGroupContextKey, B as collapseContextKey, c as configProviderContextKey, vt as dayjs, yt as default, q as descriptionsContextKey, Q as dropdownContextKey, a as formContextKey, o as formItemContextKey, s as formItemStatusContextKey, ie as gridContextKey, pe as imageGroupContextKey, Oe as menuContextKey, ke as menuLevelContextKey, N as radioGroupContextKey, Xe as splitContextKey, Ae as subMenuContextKey, nt as tableContextKey, ce as tabsContextKey, ct as timelineContextKey, at as treeContextKey, be as useLayer, Fe as useMessage, Le as useModal, Be as useNotification };

package/dist/es/theme/components/index.scss

@@ -52,6 +52,7 @@
 @use "segmented.scss";
 @use "select.scss";
 @use "skeleton.scss";
+@use "slider.scss";
 @use "slider-verify.scss";
 @use "space.scss";
 @use "split.scss";

package/dist/es/theme/components/slider.scss

@@ -0,0 +1,203 @@
+@use "../mixins/function.scss" as *;
+@use "../mixins/mixins.scss" as *;
+@use "../common/var.scss" as *;
+
+@include b(slider) {
+  --s-slider-rail-size: 4px;
+  --s-slider-handle-size: 14px;
+
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  height: 32px;
+  cursor: pointer;
+  touch-action: none;
+  outline: none;
+
+  @include e(rail) {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: var(--s-slider-rail-size);
+    transform: translateY(-50%);
+    background-color: getCssVar("color", "fill-2");
+    border-radius: getCssVar("radius", "round");
+  }
+
+  @include e(fill) {
+    position: absolute;
+    top: 50%;
+    height: var(--s-slider-rail-size);
+    transform: translateY(-50%);
+    background-color: getCssVar("color", "primary-6");
+    border-radius: getCssVar("radius", "round");
+  }
+
+  @include e(handle) {
+    position: absolute;
+    top: 50%;
+    width: var(--s-slider-handle-size);
+    height: var(--s-slider-handle-size);
+    transform: translate(-50%, -50%);
+    background-color: getCssVar("color", "bg-3");
+    border: 2px solid getCssVar("color", "primary-6");
+    border-radius: getCssVar("radius", "circle");
+    box-sizing: border-box;
+    cursor: grab;
+    outline: none;
+    transition: box-shadow 0.2s getCssVar("bezier", "1");
+
+    &:hover,
+    &:focus-visible {
+      box-shadow: 0 0 0 4px getCssVar("color", "primary-3");
+    }
+
+    @include when(active) {
+      box-shadow: 0 0 0 4px getCssVar("color", "primary-3");
+    }
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  @include e(mark) {
+    position: absolute;
+    top: 50%;
+    width: var(--s-slider-rail-size);
+    height: var(--s-slider-rail-size);
+    transform: translate(-50%, -50%);
+    background-color: getCssVar("color", "bg-3");
+    pointer-events: none;
+  }
+
+  @include e(mark-label) {
+    position: absolute;
+    top: calc(50% + (var(--s-slider-rail-size) / 2) + 4px);
+    transform: translateX(-50%);
+    font-size: getCssVar("font-size", "mini");
+    line-height: 1.5715;
+    color: getCssVar("color", "text-2");
+    white-space: nowrap;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  @include e(tooltip) {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: #373739;
+    color: #fff;
+    font-size: getCssVar("font-size", "mini");
+    line-height: 1.5715;
+    padding: 2px 8px;
+    border-radius: getCssVar("radius", "small");
+    white-space: nowrap;
+    pointer-events: none;
+    z-index: 1;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 4px solid transparent;
+      border-top-color: #373739;
+    }
+  }
+
+  @include when(disabled) {
+    cursor: not-allowed;
+
+    @include be(slider, fill) {
+      background-color: getCssVar("color", "primary-3");
+    }
+
+    @include be(slider, handle) {
+      border-color: getCssVar("color", "primary-3");
+      cursor: not-allowed;
+
+      &:hover {
+        box-shadow: none;
+      }
+    }
+  }
+
+  @include when(vertical) {
+    width: 32px;
+    height: 100%;
+
+    @include be(slider, rail) {
+      left: 50%;
+      right: auto;
+      top: 0;
+      bottom: 0;
+      width: var(--s-slider-rail-size);
+      height: auto;
+      transform: translateX(-50%);
+    }
+
+    @include be(slider, fill) {
+      left: 50%;
+      top: auto;
+      bottom: 0;
+      width: var(--s-slider-rail-size);
+      height: auto;
+      transform: translateX(-50%);
+    }
+
+    @include be(slider, handle) {
+      left: 50%;
+      top: auto;
+      transform: translate(-50%, 50%);
+    }
+
+    @include be(slider, mark) {
+      top: auto;
+      left: 50%;
+      transform: translate(-50%, 50%);
+    }
+
+    @include be(slider, mark-label) {
+      top: auto;
+      bottom: 0;
+      left: calc(50% + (var(--s-slider-rail-size) / 2) + 4px);
+      transform: translateY(50%);
+    }
+
+    @include be(slider, tooltip) {
+      bottom: auto;
+      left: calc(100% + 8px);
+      top: 50%;
+      transform: translateY(-50%);
+
+      &::after {
+        top: 50%;
+        left: auto;
+        right: 100%;
+        transform: translateY(-50%);
+        border-top-color: transparent;
+        border-right-color: #373739;
+      }
+    }
+  }
+
+  @include m(mini) {
+    --s-slider-rail-size: 2px;
+    --s-slider-handle-size: 10px;
+  }
+
+  @include m(small) {
+    --s-slider-rail-size: 3px;
+    --s-slider-handle-size: 12px;
+  }
+
+  @include m(large) {
+    --s-slider-rail-size: 6px;
+    --s-slider-handle-size: 18px;
+  }
+}

package/dist/es/utils/src/theme/themeMap.d.ts

@@ -2,7 +2,8 @@ import { ThemeTokens } from './types';
 type ThemeMode = "light" | "dark";
 export declare const lightTheme: ThemeTokens;
 export declare const darkTheme: ThemeTokens;
-export declare function resolveThemeTokens(overrides?: Partial<ThemeTokens>, mode?: ThemeMode): ThemeTokens;
-export declare function tokensToCssVars(tokens: ThemeTokens, mode?: ThemeMode): Record<string, string>;
-export declare function initTheme(light?: Partial<ThemeTokens>, dark?: Partial<ThemeTokens>): void;
+export declare const resolveThemeTokens: (overrides?: Partial<ThemeTokens>, mode?: ThemeMode) => ThemeTokens;
+export declare const tokensToCssVars: (tokens: ThemeTokens, mode?: ThemeMode) => Record<string, string>;
+export declare const injectOrUpdateStyle: (id: string, selector: string, declarations: Record<string, string>) => void;
+export declare const initTheme: (light?: Partial<ThemeTokens>, dark?: Partial<ThemeTokens>) => void;
 export {};

package/dist/es/utils/src/theme/themeMap.mjs

@@ -92,30 +92,41 @@ var t = "s", n = [
 	"colorWarning",
 	"colorDanger",
 	"colorInfo"
-]);
-function o(e) {
-	return e.replace(/[A-Z]/g, (e) => "-" + e.toLowerCase()).replace(/([a-zA-Z])(\d)/g, "$1-$2").replace(/^-/, "");
-}
-function s(e, t = "light") {
-	return {
-		...t === "light" ? r : i,
-		...e
-	};
-}
-function c(r, i = "light") {
-	let s = {};
-	for (let [c, l] of Object.entries(r)) if (a.has(c)) {
-		let r = `--${t}-${o(c)}`, a = e(l, { theme: i === "dark" ? "dark" : "default" });
-		for (let e = 0; e < n.length; e++) s[`${r}-${n[e]}`] = a[e];
-	} else s[`--${t}-${o(c)}`] = l;
-	return s;
-}
-function l(e, t, n) {
+]), o = new Set([
+	...n.map((e) => `colorFill${e}`),
+	"colorText1",
+	"colorText2",
+	"colorText3",
+	"colorBg1",
+	"colorBg2",
+	"colorBg3",
+	"shadow1",
+	"shadow2",
+	"shadow3"
+]), s = (e) => {
+	if (!e) return {};
+	let t = {};
+	for (let [n, r] of Object.entries(e)) o.has(n) || (t[n] = r);
+	return t;
+}, c = (e) => e.replace(/[A-Z]/g, (e) => "-" + e.toLowerCase()).replace(/([a-zA-Z])(\d)/g, "$1-$2").replace(/^-/, ""), l = (e, t = "light") => ({
+	...t === "light" ? r : i,
+	...e
+}), u = (r, i = "light") => {
+	let o = {};
+	for (let [s, l] of Object.entries(r)) if (a.has(s)) {
+		let r = `--${t}-${c(s)}`, a = e(l, { theme: i === "dark" ? "dark" : "default" });
+		for (let e = 0; e < n.length; e++) o[`${r}-${n[e]}`] = a[e];
+	} else o[`--${t}-${c(s)}`] = l;
+	return o;
+}, d = (e, t, n) => {
 	let r = document.getElementById(e);
 	r || (r = document.createElement("style"), r.id = e, document.head.appendChild(r)), r.textContent = `${t} {\n${Object.entries(n).map(([e, t]) => `  ${e}: ${t};`).join("\n")}\n}`;
-}
-function u(e, t) {
-	l("root-light-theme", ":root", c(s(e, "light"), "light")), l("root-dark-theme", "html.dark", c(s(t, "dark"), "dark"));
-}
+}, f = (e, t) => {
+	let n = {
+		...s(e),
+		...t
+	};
+	d("root-light-theme", ":root", u(l(e, "light"), "light")), d("root-dark-theme", "html.dark", u(l(n, "dark"), "dark"));
+};
 //#endregion
-export { i as darkTheme, u as initTheme, r as lightTheme, s as resolveThemeTokens, c as tokensToCssVars };
+export { i as darkTheme, f as initTheme, r as lightTheme, l as resolveThemeTokens, u as tokensToCssVars };

package/dist/json/vetur-attributes.json

@@ -2150,6 +2150,55 @@
   "s-skeleton/exclude": {
     "description": "排除的选择器列表（匹配的元素及其子元素不生成骨架）"
   },
+  "s-slider/input": {
+    "description": "拖动或点击轨道时持续触发"
+  },
+  "s-slider/change": {
+    "description": "一次拖动/点击/键盘操作结束时触发"
+  },
+  "s-slider/modelValue": {
+    "description": "滑块值（v-model），range 时为 [起始值, 结束值]"
+  },
+  "s-slider/defaultValue": {
+    "description": "默认值"
+  },
+  "s-slider/min": {
+    "description": "最小值",
+    "type": "number"
+  },
+  "s-slider/max": {
+    "description": "最大值",
+    "type": "number"
+  },
+  "s-slider/step": {
+    "description": "步长",
+    "type": "number"
+  },
+  "s-slider/vertical": {
+    "description": "是否竖向",
+    "type": "boolean"
+  },
+  "s-slider/range": {
+    "description": "是否为范围选择（双滑块）",
+    "type": "boolean"
+  },
+  "s-slider/disabled": {
+    "description": "是否禁用",
+    "type": "boolean"
+  },
+  "s-slider/tooltip": {
+    "description": "是否显示 tooltip",
+    "type": "boolean"
+  },
+  "s-slider/marks": {
+    "description": "刻度标记，key 为位置值，value 为标签文本"
+  },
+  "s-slider/format": {
+    "description": "tooltip 内容格式化函数"
+  },
+  "s-slider/size": {
+    "description": "尺寸"
+  },
   "s-slider-verify/result": {
     "description": "是否通过验证（v-model:result）",
     "type": "boolean"

package/dist/json/vetur-tags.json

@@ -892,6 +892,24 @@
       "exclude"
     ]
   },
+  "s-slider": {
+    "attributes": [
+      "input",
+      "change",
+      "modelValue",
+      "defaultValue",
+      "min",
+      "max",
+      "step",
+      "vertical",
+      "range",
+      "disabled",
+      "tooltip",
+      "marks",
+      "format",
+      "size"
+    ]
+  },
   "s-slider-verify": {
     "attributes": [
       "result",

package/dist/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "savor-ui",
-  "version": "0.31.1",
+  "version": "0.33.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",
@@ -5586,6 +5586,118 @@
             }
           ]
         },
+        {
+          "name": "s-slider",
+          "attributes": [
+            {
+              "name": "modelValue",
+              "description": "滑块值（v-model），range 时为 [起始值, 结束值]",
+              "value": {
+                "type": "number | [number, number]",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "defaultValue",
+              "description": "默认值",
+              "value": {
+                "type": "number | [number, number]",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "min",
+              "description": "最小值",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "max",
+              "description": "最大值",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "step",
+              "description": "步长",
+              "value": {
+                "type": "number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "vertical",
+              "description": "是否竖向",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "range",
+              "description": "是否为范围选择（双滑块）",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "disabled",
+              "description": "是否禁用",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "tooltip",
+              "description": "是否显示 tooltip",
+              "value": {
+                "type": "boolean",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "marks",
+              "description": "刻度标记，key 为位置值，value 为标签文本",
+              "value": {
+                "type": "Record<number, string>",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "format",
+              "description": "tooltip 内容格式化函数",
+              "value": {
+                "type": "(value: number) => string | number",
+                "kind": "expression"
+              }
+            },
+            {
+              "name": "size",
+              "description": "尺寸",
+              "value": {
+                "type": "mini | small | medium | large",
+                "kind": "expression"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "input",
+              "description": "拖动或点击轨道时持续触发"
+            },
+            {
+              "name": "change",
+              "description": "一次拖动/点击/键盘操作结束时触发"
+            }
+          ],
+          "slots": []
+        },
         {
           "name": "s-slider-verify",
           "attributes": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "savor-ui",
-  "version": "0.32.0",
+  "version": "0.33.1",
   "description": "A Vue3 Components Library",
   "keywords": [
     "component library",