@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/share/util/reactivity.d.ts

@@ -0,0 +1,8 @@
+import { type Nullish } from 'parsnip-kit';
+import { type Ref, type UnwrapRef, type EmitsOptions } from 'vue';
+type Provides<T extends string, K extends any> = ({
+    [key in T]: K | Ref<K>;
+} | false | Nullish)[];
+export declare const createProvideComputed: <T extends string, K extends any, const P extends Provides<T, K>, const V extends UnwrapRef<Exclude<P[number], false | Nullish>[T]> | undefined>(key: T, provides: (() => P) | P, mergeType?: "nullish" | "or" | ((pre: V, value: V, cur: P[number] & object) => V), feedback?: (arg: V) => V) => import("vue").ComputedRef<V>;
+export declare function forwardEmits<E = EmitsOptions>(emit: (event: any, ...args: any[]) => void, events: E): any;
+export {};

package/es/share/util/reactivity.js

@@ -0,0 +1,23 @@
+import { D as S, F as m, R as tn } from "../../vendor.js";
+import { computed, isRef } from "vue";
+const createProvideComputed = (key, provides, mergeType = "nullish", feedback) => {
+	return computed(() => {
+		const res = (m(provides) ? provides() : provides).filter((provide$1) => !!provide$1).reduce((pre, cur) => {
+			const value = isRef(cur[key]) ? cur[key].value : cur[key];
+			if (mergeType === "nullish") return pre ?? value;
+			else if (mergeType === "or") return pre || value;
+			else return mergeType(pre, value, cur);
+		}, void 0);
+		if (feedback) return feedback(res);
+		else return res;
+	});
+};
+function forwardEmits(emit, events) {
+	return (S(events) ? events : tn(events) ? Object.keys(events) : []).reduce((acc, key) => {
+		acc[`on${key.charAt(0).toUpperCase() + key.slice(1)}`] = (...args) => {
+			emit(key, ...args);
+		};
+		return acc;
+	}, {});
+}
+export { forwardEmits as n, createProvideComputed as t };

package/es/share/util/render.js

@@ -1,55 +1,45 @@
-import { $ } from "../../aside/index.js";
+import { D as S } from "../../vendor.js";
 import { Text } from "vue";
+let ShapeFlags = /* @__PURE__ */ function(ShapeFlags$1) {
+	ShapeFlags$1[ShapeFlags$1["ELEMENT"] = 1] = "ELEMENT";
+	ShapeFlags$1[ShapeFlags$1["FUNCTIONAL_COMPONENT"] = 2] = "FUNCTIONAL_COMPONENT";
+	ShapeFlags$1[ShapeFlags$1["STATEFUL_COMPONENT"] = 4] = "STATEFUL_COMPONENT";
+	ShapeFlags$1[ShapeFlags$1["COMPONENT"] = ShapeFlags$1.STATEFUL_COMPONENT | ShapeFlags$1.FUNCTIONAL_COMPONENT] = "COMPONENT";
+	ShapeFlags$1[ShapeFlags$1["TEXT_CHILDREN"] = 8] = "TEXT_CHILDREN";
+	ShapeFlags$1[ShapeFlags$1["ARRAY_CHILDREN"] = 16] = "ARRAY_CHILDREN";
+	ShapeFlags$1[ShapeFlags$1["SLOTS_CHILDREN"] = 32] = "SLOTS_CHILDREN";
+	ShapeFlags$1[ShapeFlags$1["TELEPORT"] = 64] = "TELEPORT";
+	ShapeFlags$1[ShapeFlags$1["SUSPENSE"] = 128] = "SUSPENSE";
+	ShapeFlags$1[ShapeFlags$1["COMPONENT_SHOULD_KEEP_ALIVE"] = 256] = "COMPONENT_SHOULD_KEEP_ALIVE";
+	ShapeFlags$1[ShapeFlags$1["COMPONENT_KEPT_ALIVE"] = 512] = "COMPONENT_KEPT_ALIVE";
+	return ShapeFlags$1;
+}({});
 const isHtmlElementVNode = (vn, _) => {
-  return Boolean(
-    vn && vn.shapeFlag & 1
-    /* ELEMENT */
-  );
+	return Boolean(vn && vn.shapeFlag & ShapeFlags.ELEMENT);
 };
 const isComponentVNode = (vn, _) => {
-  return Boolean(
-    vn && vn.shapeFlag & 6
-    /* COMPONENT */
-  );
+	return Boolean(vn && vn.shapeFlag & ShapeFlags.COMPONENT);
 };
 const hasTextChildren = (child, _) => {
-  return Boolean(
-    child && child.shapeFlag & 8
-    /* TEXT_CHILDREN */
-  );
+	return Boolean(child && child.shapeFlag & ShapeFlags.TEXT_CHILDREN);
 };
 const hasArrayChildren = (vn, _) => {
-  return Boolean(
-    vn && vn.shapeFlag & 16
-    /* ARRAY_CHILDREN */
-  );
+	return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);
 };
 const hasSlotsChildren = (vn, _) => {
-  return Boolean(
-    vn && vn.shapeFlag & 32
-    /* SLOTS_CHILDREN */
-  );
+	return Boolean(vn && vn.shapeFlag & ShapeFlags.SLOTS_CHILDREN);
 };
 const isTextVNode = (vn) => {
-  return Boolean(vn.type === Text);
+	return Boolean(vn.type === Text);
 };
 const flattenVNodes = (children) => {
-  var _a, _b;
-  const results = [];
-  for (const item of children ?? []) {
-    if (isHtmlElementVNode(item) || isComponentVNode(item) || hasTextChildren(item)) {
-      results.push(item);
-    } else if (hasArrayChildren(item, item.children)) {
-      results.push(...flattenVNodes(item.children));
-    } else if (hasSlotsChildren(item, item.children)) {
-      results.push(...flattenVNodes((_b = (_a = item.children).default) == null ? void 0 : _b.call(_a)));
-    } else if ($(item)) {
-      results.push(...flattenVNodes(item));
-    }
-  }
-  return results;
-};
-export {
-  flattenVNodes as f,
-  isTextVNode as i
-};
+	const results = [];
+	for (const item of children ?? []) if (isHtmlElementVNode(item) || isComponentVNode(item) || hasTextChildren(item)) results.push(item);
+	else if (hasArrayChildren(item, item.children)) results.push(...flattenVNodes(item.children));
+	else if (hasSlotsChildren(item, item.children)) {
+		var _item$children$defaul, _item$children;
+		results.push(...flattenVNodes((_item$children$defaul = (_item$children = item.children).default) === null || _item$children$defaul === void 0 ? void 0 : _item$children$defaul.call(_item$children)));
+	} else if (S(item)) results.push(...flattenVNodes(item));
+	return results;
+};
+export { isTextVNode as n, flattenVNodes as t };

package/es/share/util/theme.d.ts

@@ -2,3 +2,6 @@ export declare const setThemeColor: (theme: "primary" | "success" | "warning" |
     light?: string[];
     dark?: string[];
 }) => void;
+export declare const resetThemeColor: (theme: "primary" | "success" | "warning" | "danger" | "sakura" | "neutral") => void;
+export declare const setPixelSize: (size: number) => void;
+export declare const resetPixelSize: () => void;

package/es/share/util/theme.js

@@ -1,60 +1,80 @@
-import { p } from "../../aside/index.js";
-import { p as parseColor, a as generatePalette, r as rgbaColor2string } from "./color.js";
-import { t as throwError } from "./console.js";
-import { i as inBrowser } from "./env.js";
-import { E as EventBus } from "./event-bus.js";
-import { a as GLOBAL_CSS_VAR_CHANGE } from "../const/event-bus-key.js";
+import { B as y } from "../../vendor.js";
+import { t as inBrowser } from "./env.js";
+import { a as MEDIUM_BASE_SIZE, i as LARGE_BASE_SIZE, n as INTERVAL, o as SMALL_BASE_SIZE, r as INTERVAL_MINI, t as DEFAULT_PIXEL_SIZE } from "../const/style.js";
+import { a as rgbaColor2string, i as parseColor, t as generatePalette } from "./color.js";
+import { t as EventBus } from "./event-bus.js";
+import { n as GLOBAL_CSS_VAR_CHANGE } from "../const/event-bus-key.js";
+import { r as throwError } from "./console.js";
 const setThemeColor = (theme, color) => {
-  var _a, _b;
-  if (!inBrowser()) {
-    return;
-  }
-  const colorList = {
-    light: [],
-    dark: []
-  };
-  if (p(color)) {
-    const rgbaColor = parseColor(color);
-    colorList.light = generatePalette(
-      rgbaColor.r,
-      rgbaColor.g,
-      rgbaColor.b,
-      rgbaColor.a,
-      false
-    ).map((color2) => {
-      return rgbaColor2string(color2);
-    });
-    colorList.dark = generatePalette(
-      rgbaColor.r,
-      rgbaColor.g,
-      rgbaColor.b,
-      rgbaColor.a,
-      true
-    ).map((color2) => {
-      return rgbaColor2string(color2);
-    });
-  } else {
-    if (((_a = color.light) == null ? void 0 : _a.length) && color.light.length !== 10) {
-      return throwError(
-        `The length of color.light does not match the required number of CSS color palette (10).`
-      );
-    }
-    if (((_b = color.dark) == null ? void 0 : _b.length) && color.dark.length !== 10) {
-      return throwError(
-        `The length of color.dark does not match the required number of CSS color palette (10).`
-      );
-    }
-    colorList.light = color.light || [];
-    colorList.dark = color.dark || [];
-  }
-  colorList.light.forEach((item, index) => {
-    document.documentElement.style.setProperty(`--px-${theme}-light-custom-${index + 1}`, item);
-  });
-  colorList.dark.forEach((item, index) => {
-    document.documentElement.style.setProperty(`--px-${theme}-dark-custom-${index + 1}`, item);
-  });
-  EventBus.emit(GLOBAL_CSS_VAR_CHANGE);
+	if (!inBrowser()) return;
+	const colorList = {
+		light: [],
+		dark: []
+	};
+	if (y(color)) {
+		const rgbaColor = parseColor(color);
+		if (!rgbaColor) return;
+		colorList.light = generatePalette(rgbaColor.r, rgbaColor.g, rgbaColor.b, rgbaColor.a, false).map((color$1) => {
+			return rgbaColor2string(color$1);
+		});
+		colorList.dark = generatePalette(rgbaColor.r, rgbaColor.g, rgbaColor.b, rgbaColor.a, true).map((color$1) => {
+			return rgbaColor2string(color$1);
+		});
+	} else {
+		var _color$light, _color$dark;
+		if (((_color$light = color.light) === null || _color$light === void 0 ? void 0 : _color$light.length) && color.light.length !== 10) return throwError(`The length of color.light does not match the required number of CSS color palette (10).`);
+		if (((_color$dark = color.dark) === null || _color$dark === void 0 ? void 0 : _color$dark.length) && color.dark.length !== 10) return throwError(`The length of color.dark does not match the required number of CSS color palette (10).`);
+		colorList.light = color.light || [];
+		colorList.dark = color.dark || [];
+	}
+	colorList.light.forEach((item, index) => {
+		document.documentElement.style.setProperty(`--px-${theme}-light-custom-${index + 1}`, item);
+	});
+	colorList.dark.forEach((item, index) => {
+		document.documentElement.style.setProperty(`--px-${theme}-dark-custom-${index + 1}`, item);
+	});
+	EventBus.emit(GLOBAL_CSS_VAR_CHANGE);
 };
-export {
-  setThemeColor as s
+const resetThemeColor = (theme) => {
+	if (!inBrowser()) return;
+	for (let i = 0; i < 10; i++) {
+		document.documentElement.style.setProperty(`--px-${theme}-light-custom-${i + 1}`, null);
+		document.documentElement.style.setProperty(`--px-${theme}-dark-custom-${i + 1}`, null);
+	}
+	EventBus.emit(GLOBAL_CSS_VAR_CHANGE);
 };
+var calcSizes = (pixelSize) => {
+	const mediumSize = 28 + pixelSize * 2;
+	const smallSize = 20 + pixelSize * 2;
+	const largeSubSize = mediumSize;
+	const mediumSubSize = mediumSize - 8 - 2;
+	const smallSubSize = smallSize - 8;
+	return {
+		"-px-large-size": 36 + pixelSize * 2,
+		"-px-medium-size": mediumSize,
+		"-px-small-size": smallSize,
+		"-px-large-sub-size": largeSubSize,
+		"-px-medium-sub-size": mediumSubSize,
+		"-px-small-sub-size": smallSubSize,
+		"-px-large-sub-base-size": largeSubSize - 2 * pixelSize,
+		"-px-medium-sub-base-size": mediumSubSize - 2 * pixelSize,
+		"-px-small-sub-base-size": smallSubSize - 2 * pixelSize,
+		"-px-large-compat-size": mediumSize - 4,
+		"-px-medium-compat-size": mediumSize - 8,
+		"-px-small-compat-size": smallSize - 4
+	};
+};
+const setPixelSize = (size) => {
+	if (!inBrowser()) return;
+	document.documentElement.style.setProperty(`--px-bit`, size + "px");
+	const sizes = calcSizes(size);
+	Object.keys(sizes).forEach((key) => {
+		document.documentElement.style.setProperty(key, sizes[key] + "px");
+	});
+	EventBus.emit(GLOBAL_CSS_VAR_CHANGE);
+};
+const resetPixelSize = () => {
+	if (!inBrowser()) return;
+	setPixelSize(4);
+};
+export { setThemeColor as i, resetThemeColor as n, setPixelSize as r, resetPixelSize as t };

package/es/slider/css.js

@@ -0,0 +1,2 @@
+import '../index.css'
+import './index.css'

package/es/slider/draw.d.ts

@@ -0,0 +1,25 @@
+import type { ShallowRef } from 'vue';
+import type { RgbaColor } from '../share/type';
+import type { SliderProps } from './type';
+import { type Nullish } from 'parsnip-kit';
+export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderColor: RgbaColor, pixelSize: number, paddingX?: number, paddingY?: number) => void;
+export declare const drawRange: (ctx: CanvasRenderingContext2D, width: number, height: number, trackLeft: number, trackWidth: number, fillColor: RgbaColor, emptyColor: RgbaColor, pixelSize: number, direction: SliderProps["direction"], reverse: boolean) => void;
+export declare const drawThumbBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: RgbaColor, pixelSize: number, paddingX?: number, paddingY?: number) => void;
+export declare const drawThumb: (thumbRef: ShallowRef<HTMLDivElement | null>, thumbCanvasRef: ShallowRef<HTMLCanvasElement | null>, thumbStartRef: ShallowRef<HTMLDivElement | null>, thumbStartCanvasRef: ShallowRef<HTMLCanvasElement | null>, thumbEndRef: ShallowRef<HTMLDivElement | null>, thumbEndCanvasRef: ShallowRef<HTMLCanvasElement | null>, range: boolean, rad: [number, number][], pixelSize: number, thumbColor: RgbaColor, borderColor: RgbaColor) => void;
+export declare const getDotStyle: (offset: number, direction: SliderProps["direction"], reverse: boolean) => {
+    left: string | undefined;
+    right: string | undefined;
+    top: string | undefined;
+    bottom: number | undefined;
+};
+export declare const getMarkStyle: (offset: number, direction: SliderProps["direction"], reverse: boolean) => {
+    left: string | undefined;
+    right: string | undefined;
+    top: string | undefined;
+    bottom: string | undefined;
+};
+export declare const drawMark: (sliderRef: ShallowRef<HTMLDivElement | null>, dotCanvasRef: ShallowRef<HTMLCanvasElement | null>, rad: [number, number][], modelValue: number | [number, number] | Nullish, direction: SliderProps["direction"], reverse: boolean, disabled: boolean, markPoints: {
+    value: number;
+    left: number;
+    label?: string | undefined;
+}[], pixelSize: number) => void;

package/es/slider/draw.js

@@ -0,0 +1,113 @@
+import { D as S, g as A } from "../vendor.js";
+import { a as drawCircle, i as canvasPreprocess, l as getBorderRadius, s as floodFill, t as calcBorderCornerCenter } from "../share/util/plot.js";
+import { a as rgbaColor2string, n as getGlobalThemeColor } from "../share/util/color.js";
+const drawBorder = (ctx, width, height, center, borderColor, pixelSize, paddingX = 0, paddingY = 0) => {
+	ctx.fillStyle = rgbaColor2string(borderColor);
+	if (center[1][0] + pixelSize > center[0][0]) ctx.fillRect(center[0][0] + paddingX, paddingY, center[1][0] - center[0][0] + pixelSize, pixelSize);
+	if (center[2][1] + pixelSize > center[1][1]) ctx.fillRect(width - pixelSize + paddingX, center[1][1] + paddingY, pixelSize, center[2][1] - center[1][1] + pixelSize);
+	if (center[3][0] < center[2][0] + pixelSize) ctx.fillRect(center[3][0] + paddingX, height - pixelSize + paddingY, center[2][0] - center[3][0] + pixelSize, pixelSize);
+	if (center[3][1] + pixelSize > center[0][1]) ctx.fillRect(paddingX, center[0][1] + paddingY, pixelSize, center[3][1] - center[0][1] + pixelSize);
+};
+const drawRange = (ctx, width, height, trackLeft, trackWidth, fillColor, emptyColor, pixelSize, direction, reverse) => {
+	const fillAreaWidth = direction === "horizontal" ? width - pixelSize * 2 : height - pixelSize * 2;
+	const emptyLeftStart = pixelSize;
+	const emptyLeftEnd = trackLeft * fillAreaWidth + emptyLeftStart;
+	const fillStart = emptyLeftEnd === emptyLeftStart ? pixelSize : emptyLeftEnd;
+	const fillEnd = fillStart + trackWidth * fillAreaWidth - pixelSize;
+	const emptyRightStart = fillStart === fillEnd ? pixelSize : fillEnd;
+	const emptyRightEnd = direction === "horizontal" ? width - pixelSize : height - pixelSize;
+	if (emptyLeftEnd > emptyLeftStart) {
+		ctx.fillStyle = rgbaColor2string(emptyColor);
+		let x = emptyLeftStart;
+		if (reverse && direction === "horizontal" || !reverse && direction === "vertical") x = fillAreaWidth - emptyLeftEnd + pixelSize * 2;
+		if (direction === "horizontal") ctx.fillRect(x, pixelSize, emptyLeftEnd - emptyLeftStart, height - 2 * pixelSize);
+		else ctx.fillRect(pixelSize, x, width - 2 * pixelSize, emptyLeftEnd - emptyLeftStart);
+	}
+	if (fillEnd > fillStart) {
+		ctx.fillStyle = rgbaColor2string(fillColor);
+		let len = fillEnd - fillStart;
+		len = Math.min(len, fillAreaWidth - pixelSize);
+		let x = fillStart;
+		if (reverse && direction === "horizontal" || !reverse && direction === "vertical") x = fillAreaWidth - fillEnd + pixelSize * 2;
+		if (direction === "horizontal") ctx.fillRect(x, pixelSize, len, height - 2 * pixelSize);
+		else ctx.fillRect(pixelSize, x, width - 2 * pixelSize, len);
+	}
+	if (emptyRightEnd > emptyRightStart) {
+		ctx.fillStyle = rgbaColor2string(emptyColor);
+		const len = emptyRightEnd - emptyRightStart;
+		let x = emptyRightStart;
+		if (reverse && direction === "horizontal" || !reverse && direction === "vertical") x = fillAreaWidth - emptyRightEnd + pixelSize * 2;
+		if (direction === "horizontal") ctx.fillRect(x, pixelSize, len, height - 2 * pixelSize);
+		else ctx.fillRect(pixelSize, x, width - 2 * pixelSize, len);
+	}
+};
+const drawThumbBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, paddingX = 0, paddingY = 0) => {
+	ctx.fillStyle = rgbaColor2string(borderColor);
+	for (let i = 0; i < 4; i++) if (borderRadius[i] > pixelSize) drawCircle(ctx, center[i][0] + paddingX, center[i][1] + paddingY, borderRadius[i], rad[i][0], rad[i][1], pixelSize);
+	if (center[1][0] + pixelSize > center[0][0]) ctx.fillRect(center[0][0] + paddingX, paddingY, center[1][0] - center[0][0] + pixelSize, pixelSize);
+	if (center[2][1] + pixelSize > center[1][1]) ctx.fillRect(width - pixelSize + paddingX, center[1][1] + paddingY, pixelSize, center[2][1] - center[1][1] + pixelSize);
+	if (center[3][0] < center[2][0] + pixelSize) ctx.fillRect(center[3][0] + paddingX, height - pixelSize + paddingY, center[2][0] - center[3][0] + pixelSize, pixelSize);
+	if (center[3][1] + pixelSize > center[0][1]) ctx.fillRect(paddingX, center[0][1] + paddingY, pixelSize, center[3][1] - center[0][1] + pixelSize);
+};
+const drawThumb = (thumbRef, thumbCanvasRef, thumbStartRef, thumbStartCanvasRef, thumbEndRef, thumbEndCanvasRef, range, rad, pixelSize, thumbColor, borderColor) => {
+	if (range) {
+		const thumbStartPreprocessData = canvasPreprocess(thumbStartRef, thumbStartCanvasRef);
+		const thumbEndPreprocessData = canvasPreprocess(thumbEndRef, thumbEndCanvasRef);
+		if (thumbStartPreprocessData) {
+			const { ctx, width, height, canvas } = thumbStartPreprocessData;
+			const borderRadius = getBorderRadius(canvas, pixelSize, void 0, "round", "medium", false, false, false);
+			drawThumbBorder(ctx, width, height, calcBorderCornerCenter(borderRadius, width, height, pixelSize), borderRadius, rad, borderColor, pixelSize);
+			floodFill(ctx, Math.round(width / 2), Math.round(height / 2), thumbColor);
+		}
+		if (thumbEndPreprocessData) {
+			const { ctx, width, height, canvas } = thumbEndPreprocessData;
+			const borderRadius = getBorderRadius(canvas, pixelSize, void 0, "round", "medium", false, false, false);
+			drawThumbBorder(ctx, width, height, calcBorderCornerCenter(borderRadius, width, height, pixelSize), borderRadius, rad, borderColor, pixelSize);
+			floodFill(ctx, Math.round(width / 2), Math.round(height / 2), thumbColor);
+		}
+	} else {
+		const thumbPreprocessData = canvasPreprocess(thumbRef, thumbCanvasRef);
+		if (thumbPreprocessData) {
+			const { ctx, width, height, canvas } = thumbPreprocessData;
+			const borderRadius = getBorderRadius(canvas, pixelSize, void 0, "round", "medium", false, false, false);
+			drawThumbBorder(ctx, width, height, calcBorderCornerCenter(borderRadius, width, height, pixelSize), borderRadius, rad, borderColor, pixelSize);
+			floodFill(ctx, Math.round(width / 2), Math.round(height / 2), thumbColor);
+		}
+	}
+};
+const getDotStyle = (offset, direction, reverse) => {
+	return {
+		left: direction === "horizontal" ? reverse ? void 0 : offset + "px" : void 0,
+		right: direction === "horizontal" ? reverse ? offset + "px" : void 0 : void 0,
+		top: direction === "horizontal" ? void 0 : reverse ? offset + "px" : void 0,
+		bottom: direction === "horizontal" ? void 0 : reverse ? void 0 : offset + NaN
+	};
+};
+const getMarkStyle = (offset, direction, reverse) => {
+	return {
+		left: direction === "horizontal" ? reverse ? void 0 : offset + "px" : void 0,
+		right: direction === "horizontal" ? reverse ? offset + "px" : void 0 : void 0,
+		top: direction === "horizontal" ? void 0 : reverse ? offset + "px" : void 0,
+		bottom: direction === "horizontal" ? void 0 : reverse ? void 0 : offset + "px"
+	};
+};
+const drawMark = (sliderRef, dotCanvasRef, rad, modelValue, direction, reverse, disabled, markPoints, pixelSize) => {
+	const preprocessData = canvasPreprocess(sliderRef, dotCanvasRef);
+	if (preprocessData) {
+		const { ctx, height, width, canvas } = preprocessData;
+		const dotSize = direction === "horizontal" ? height : width;
+		const areaWidth = direction !== "horizontal" ? height : width;
+		const borderRadius = getBorderRadius(canvas, pixelSize, void 0, "round", "medium", false, false, false, direction);
+		for (const point of markPoints) {
+			const center = calcBorderCornerCenter(borderRadius, dotSize, dotSize, pixelSize);
+			const borderColor = getGlobalThemeColor("neutral", 10);
+			const dotColor = (S(modelValue) ? Math.min(...modelValue) <= point.value && Math.max(...modelValue) >= point.value : A(modelValue) ? modelValue >= point.value : false) ? disabled ? getGlobalThemeColor("primary", 2) : getGlobalThemeColor("primary", 6) : disabled ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 1);
+			const markOffset = point.left;
+			const paddingX = direction === "horizontal" ? reverse ? areaWidth - dotSize - pixelSize - markOffset : markOffset + pixelSize : 0;
+			const paddingY = direction === "horizontal" ? 0 : reverse ? markOffset + pixelSize : areaWidth - markOffset - dotSize - pixelSize;
+			if (borderColor) drawThumbBorder(ctx, dotSize, dotSize, center, borderRadius, rad, borderColor, pixelSize, paddingX, paddingY);
+			if (dotColor) floodFill(ctx, Math.round(paddingX + dotSize / 2), Math.round(paddingY + dotSize / 2), dotColor);
+		}
+	}
+};
+export { getDotStyle as a, drawThumb as i, drawMark as n, getMarkStyle as o, drawRange as r, drawBorder as t };

package/es/slider/index.css

@@ -0,0 +1,119 @@
+.px-slider-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  pointer-events: none;
+}
+.px-slider {
+  --thumb-size: calc(var(--px-bit) * 4 + 12px);
+  --slider-size: calc(var(--px-bit) * 4 + 4px);
+  --dot-size: var(--slider-size);
+  z-index: 0;
+  border-style: solid;
+  border-color: transparent;
+  border-width: var(--px-bit);
+  height: var(--slider-size);
+  box-sizing: border-box;
+  position: relative;
+  margin-top: calc((var(--thumb-size) - var(--slider-size)) / 2);
+  margin-bottom: calc((var(--thumb-size) - var(--slider-size)) / 2);
+  cursor: pointer;
+  transition: 0.25s;
+}
+.px-slider__horizontal.px-slider__reverse .px-slider-mark {
+  left: auto;
+  transform: translate(50%, -50%);
+}
+.px-slider__vertical {
+  display: inline-block;
+  width: var(--slider-size);
+  height: 100%;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: calc((var(--thumb-size) - var(--slider-size)) / 2);
+  margin-right: calc((var(--thumb-size) - var(--slider-size)) / 2);
+}
+.px-slider__vertical.px-slider__marks {
+  margin-right: calc((var(--thumb-size) - var(--slider-size)) / 2 + 28px);
+  margin-bottom: 0;
+}
+.px-slider__vertical .px-slider-thumb {
+  transform: translateX(-50%);
+  left: 50%;
+  top: auto;
+}
+.px-slider__vertical .px-slider-mark {
+  left: var(--thumb-size);
+  transform: translateY(50%);
+  top: auto;
+}
+.px-slider__vertical.px-slider__reverse .px-slider-mark {
+  bottom: auto;
+  transform: translateY(-50%);
+}
+.px-slider__disabled {
+  cursor: not-allowed;
+}
+.px-slider__disabled .px-slider-thumb {
+  cursor: not-allowed;
+}
+.px-slider__readonly {
+  cursor: auto;
+}
+.px-slider__readonly .px-slider-thumb {
+  cursor: auto;
+}
+.px-slider__marks {
+  margin-bottom: calc((var(--thumb-size) - var(--slider-size)) / 2 + 28px);
+}
+.px-slider-mark-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  pointer-events: none;
+}
+.px-slider-mark {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: var(--thumb-size);
+  transform: translate(-50%, -50%);
+  user-select: none;
+  pointer-events: all;
+  min-height: 28px;
+}
+.px-slider-dot {
+  width: var(--dot-size);
+  height: var(--dot-size);
+  position: absolute;
+  transform: translateY(-50%);
+  top: 50%;
+  pointer-events: all;
+}
+.px-slider-tooltip-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+}
+.px-slider-thumb {
+  position: absolute;
+  top: 50%;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border: var(--px-bit) solid transparent;
+  transform: translateY(-50%);
+  cursor: pointer;
+  z-index: 1;
+  border-style: solid;
+  border-color: transparent;
+  border-width: var(--px-bit);
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/es/slider/index.d.ts

@@ -0,0 +1,66 @@
+import type { SliderProps } from './type';
+declare var __VLS_1: {
+    value: number;
+    label: string | undefined;
+}, __VLS_7: {}, __VLS_10: {
+    value: number | null | undefined;
+}, __VLS_12: {}, __VLS_18: {}, __VLS_21: {
+    value: number | null | undefined;
+}, __VLS_23: {}, __VLS_29: {}, __VLS_32: {
+    value: number | null | undefined;
+}, __VLS_34: {};
+type __VLS_Slots = {} & {
+    mark?: (props: typeof __VLS_1) => any;
+} & {
+    thumb?: (props: typeof __VLS_7) => any;
+} & {
+    'tooltip-content'?: (props: typeof __VLS_10) => any;
+} & {
+    thumb?: (props: typeof __VLS_12) => any;
+} & {
+    'thumb-start'?: (props: typeof __VLS_18) => any;
+} & {
+    'tooltip-content'?: (props: typeof __VLS_21) => any;
+} & {
+    'thumb-start'?: (props: typeof __VLS_23) => any;
+} & {
+    'thumb-end'?: (props: typeof __VLS_29) => any;
+} & {
+    'tooltip-content'?: (props: typeof __VLS_32) => any;
+} & {
+    'thumb-end'?: (props: typeof __VLS_34) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<SliderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: number | [number, number]) => any;
+    blur: (event: FocusEvent) => any;
+    focus: (event: FocusEvent) => any;
+    "update:modelValue": (value: number | [number, number]) => any;
+    dragStart: (event: MouseEvent | TouchEvent) => any;
+    dragEnd: (event: MouseEvent | TouchEvent) => any;
+    markSelect: (value: number, event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<SliderProps> & Readonly<{
+    onChange?: ((value: number | [number, number]) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number | [number, number]) => any) | undefined;
+    onDragStart?: ((event: MouseEvent | TouchEvent) => any) | undefined;
+    onDragEnd?: ((event: MouseEvent | TouchEvent) => any) | undefined;
+    onMarkSelect?: ((value: number, event: MouseEvent) => any) | undefined;
+}>, {
+    reverse: boolean;
+    disabled: boolean;
+    direction: "horizontal" | "vertical";
+    range: boolean;
+    max: number;
+    min: number;
+    step: number | "mark";
+    precision: number | null;
+    tooltip: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};