@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/slider/util.d.ts

@@ -0,0 +1,37 @@
+import { type Nullish } from 'parsnip-kit';
+import type { LooseRequired, RemoveUndefinedFromFields } from '../share/type';
+import type { SliderProps } from './type';
+import { type ShallowRef } from 'vue';
+export declare function clampValue(value: number, props: RemoveUndefinedFromFields<LooseRequired<SliderProps>, 'min' | 'max'>): number;
+export declare const transformModelValue: (value: number | [number, number] | Nullish, props: RemoveUndefinedFromFields<LooseRequired<SliderProps>, "min" | "max">, emits: (evt: "update:modelValue", value: number | [number, number]) => void) => number | [number, number];
+export declare const getTargetThumbEl: (e: MouseEvent | TouchEvent, direction: SliderProps["direction"], thumbStartRef: ShallowRef<HTMLDivElement | null>, thumbEndRef: ShallowRef<HTMLDivElement | null>) => {
+    thumbEl: HTMLDivElement | null;
+    targetType: "start";
+} | {
+    thumbEl: HTMLDivElement | null;
+    targetType: "end";
+};
+export declare const calcValueFromEvent: (e: MouseEvent | TouchEvent, sliderEl: HTMLDivElement, thumbEl: HTMLDivElement, valueRange: number, props: RemoveUndefinedFromFields<LooseRequired<SliderProps>, "min" | "max">) => number;
+export declare const calcThumbLeft: (value: number, sliderRect: {
+    width: number;
+    height: number;
+}, thumbRect: {
+    width: number;
+    height: number;
+}, valueRange: number, props: RemoveUndefinedFromFields<LooseRequired<SliderProps>, "min" | "max">) => number;
+export declare const updateMarkPoints: (rect: {
+    width: number;
+    height: number;
+}, valueRange: number, props: RemoveUndefinedFromFields<LooseRequired<SliderProps>, "min" | "max">) => ({
+    value: number;
+    left: number;
+    markLeft: number;
+    label?: undefined;
+} | {
+    value: number;
+    label: string | undefined;
+    left: number;
+    markLeft: number;
+})[];
+export declare const getRangeValue: (modelValue: SliderProps["modelValue"], index: 0 | 1, props: RemoveUndefinedFromFields<LooseRequired<SliderProps>, "min" | "max">) => number | null | undefined;
+export declare const getSingleValue: (modelValue: SliderProps["modelValue"]) => number | null | undefined;

package/es/slider/util.js

@@ -0,0 +1,130 @@
+import { D as S, P as ke, T as R, _ as E, g as A, j as en } from "../vendor.js";
+import { i as fixedNumber } from "../share/util/common.js";
+import { n as calcPixelSize } from "../share/util/plot.js";
+import "vue";
+function clampValue(value, props) {
+	const step = props.step;
+	if (!step || R(step)) return ke(A(props.precision) ? fixedNumber(value, props.precision) : value, props.min, props.max);
+	const marks = props.marks;
+	if (!(marks === null || marks === void 0 ? void 0 : marks.length)) if (!A(step)) return ke(A(props.precision) ? fixedNumber(value, props.precision) : value, props.min, props.max);
+	else {
+		let valueWithStep = Math.round((value - props.min) / step) * step + props.min;
+		if (valueWithStep < props.min) valueWithStep = Math.ceil((value - props.min) / step) * step + props.min;
+		if (valueWithStep > props.max) valueWithStep = Math.floor((value - props.min) / step) * step + props.min;
+		return A(props.precision) ? fixedNumber(valueWithStep, props.precision) : valueWithStep;
+	}
+	const markValues = marks.map((mark) => A(mark) ? mark : mark.value).filter((e) => e >= props.min && e <= props.max);
+	let closestStepPoint;
+	if (A(step)) if (value <= props.min) closestStepPoint = props.min;
+	else if (value >= props.max) closestStepPoint = props.max;
+	else {
+		const offset = value - props.min;
+		const factor = Math.floor(offset / step);
+		const candidate1 = props.min + factor * step;
+		const candidate2 = candidate1 + step;
+		const validCandidates = [candidate1];
+		if (candidate2 <= props.max) validCandidates.push(candidate2);
+		closestStepPoint = validCandidates.reduce((prev, curr) => {
+			const d1 = Math.abs(prev - value);
+			const d2 = Math.abs(curr - value);
+			return d2 < d1 || d2 === d1 && curr < prev ? curr : prev;
+		});
+	}
+	const candidates = markValues;
+	if (!en(closestStepPoint)) candidates.push(A(props.precision) ? fixedNumber(closestStepPoint, props.precision) : closestStepPoint);
+	return candidates.reduce((closest, curr) => {
+		const d1 = Math.abs(closest - value);
+		const d2 = Math.abs(curr - value);
+		return d2 < d1 || d2 === d1 && curr < closest ? curr : closest;
+	});
+}
+const transformModelValue = (value, props, emits) => {
+	if (E(value)) return props.range ? [clampValue(props.min, props), clampValue(props.min, props)] : clampValue(props.min, props);
+	if (props.range) if (A(value)) {
+		const nextValue = [clampValue(props.min, props), clampValue(value, props)];
+		if (nextValue[1] !== value) emits("update:modelValue", nextValue);
+		return nextValue;
+	} else {
+		const nextValue = value.map((e) => clampValue(e, props));
+		if (nextValue[0] !== value[0] || nextValue[1] !== value[1]) emits("update:modelValue", nextValue);
+		return nextValue;
+	}
+	else if (A(value)) {
+		const nextValue = clampValue(value, props);
+		if (nextValue !== value) emits("update:modelValue", nextValue);
+		return nextValue;
+	} else {
+		const nextValue = clampValue(value[1], props);
+		if (nextValue !== value[1]) emits("update:modelValue", nextValue);
+		return nextValue;
+	}
+};
+const getTargetThumbEl = (e, direction, thumbStartRef, thumbEndRef) => {
+	const clientX = e.clientX;
+	const clientY = e.clientY;
+	if ((thumbStartRef.value ? direction === "horizontal" ? Math.abs(clientX - thumbStartRef.value.getBoundingClientRect().left) : Math.abs(clientY - thumbStartRef.value.getBoundingClientRect().top) : Infinity) <= (thumbEndRef.value ? direction === "horizontal" ? Math.abs(clientX - thumbEndRef.value.getBoundingClientRect().left) : Math.abs(clientY - thumbEndRef.value.getBoundingClientRect().top) : Infinity)) return {
+		thumbEl: thumbStartRef.value,
+		targetType: "start"
+	};
+	else return {
+		thumbEl: thumbEndRef.value,
+		targetType: "end"
+	};
+};
+const calcValueFromEvent = (e, sliderEl, thumbEl, valueRange, props) => {
+	const sliderRect = sliderEl.getBoundingClientRect();
+	const thumbRect = thumbEl.getBoundingClientRect();
+	let clientOffset;
+	if (e instanceof MouseEvent) clientOffset = props.direction === "horizontal" ? e.clientX : e.clientY;
+	else clientOffset = props.direction === "horizontal" ? e.touches[0].clientX : e.touches[0].clientY;
+	const padding = props.direction === "horizontal" ? Math.round(thumbRect.width / 2) : Math.round(thumbRect.height / 2);
+	const startBorder = props.direction === "horizontal" ? sliderRect.left + padding : sliderRect.top + padding;
+	const endBorder = props.direction === "horizontal" ? sliderRect.right - padding : sliderRect.bottom - padding;
+	const areaWidth = props.direction === "horizontal" ? sliderRect.width - thumbRect.width : sliderRect.height - thumbRect.height;
+	let percentage = (ke(clientOffset, startBorder, endBorder) - startBorder) / areaWidth;
+	if (props.direction === "vertical") percentage = 1 - percentage;
+	if (props.reverse) percentage = 1 - percentage;
+	return clampValue(props.min + percentage * valueRange, props);
+};
+const calcThumbLeft = (value, sliderRect, thumbRect, valueRange, props) => {
+	const areaWidth = props.direction === "horizontal" ? sliderRect.width - thumbRect.width : sliderRect.height - thumbRect.height;
+	let left = valueRange > 0 ? ke((value - props.min) / valueRange * areaWidth, 0, areaWidth) : 0;
+	if (props.reverse) left = areaWidth - left;
+	const pixelSize = calcPixelSize();
+	return left - pixelSize;
+};
+const updateMarkPoints = (rect, valueRange, props) => {
+	var _props$marks;
+	if (!((_props$marks = props.marks) === null || _props$marks === void 0 ? void 0 : _props$marks.length)) return [];
+	const pixelSize = calcPixelSize();
+	const dotSize = props.direction === "horizontal" ? rect.height : rect.width;
+	const width = props.direction === "horizontal" ? rect.width - dotSize - pixelSize * 2 : rect.height - dotSize - pixelSize * 2;
+	return props.marks.filter((mark) => {
+		if (A(mark)) return mark >= props.min && mark <= props.max;
+		else return mark.value >= props.min && mark.value <= props.max;
+	}).map((mark) => {
+		if (A(mark)) {
+			const left = valueRange > 0 ? width * (mark - props.min) / valueRange : 0;
+			return {
+				value: mark,
+				left: Math.round(left),
+				markLeft: Math.round(left + Math.round(dotSize / 2))
+			};
+		} else {
+			const left = valueRange > 0 ? width * (mark.value - props.min) / valueRange : 0;
+			return {
+				value: mark.value,
+				label: mark.label,
+				left: Math.round(left),
+				markLeft: Math.round(left + Math.round(dotSize / 2))
+			};
+		}
+	});
+};
+const getRangeValue = (modelValue, index, props) => {
+	return !S(modelValue) ? index === 0 ? clampValue(props.min, props) : modelValue : modelValue[index];
+};
+const getSingleValue = (modelValue) => {
+	return !S(modelValue) ? modelValue : modelValue[1];
+};
+export { getSingleValue as a, updateMarkPoints as c, getRangeValue as i, calcValueFromEvent as n, getTargetThumbEl as o, clampValue as r, transformModelValue as s, calcThumbLeft as t };

package/es/space/index.css

@@ -1,8 +1,3 @@
-.px-space {
-  --px-medium-interval: var(--px-interval-2);
-  --px-large-interval: var(--px-interval-3);
-  --px-small-interval: var(--px-interval-1);
-}
 .px-space__inline {
   display: inline-block;
 }
@@ -41,40 +36,40 @@
 }
 .px-space-inner {
   display: flex;
-  margin-top: calc(-1 * var(--px-medium-interval) / 2);
-  margin-bottom: calc(-1 * var(--px-medium-interval) / 2);
-  margin-left: calc(-1 * var(--px-medium-interval) / 2);
-  margin-right: calc(-1 * var(--px-medium-interval) / 2);
+  margin-top: -4px;
+  margin-bottom: -4px;
+  margin-left: -4px;
+  margin-right: -4px;
 }
 .px-space-inner .px-space-item {
-  margin-top: calc(var(--px-medium-interval) / 2);
-  margin-bottom: calc(var(--px-medium-interval) / 2);
-  margin-left: calc(var(--px-medium-interval) / 2);
-  margin-right: calc(var(--px-medium-interval) / 2);
+  margin-top: 4px;
+  margin-bottom: 4px;
+  margin-left: 4px;
+  margin-right: 4px;
 }
 .px-space-inner.px-space__small {
-  margin-top: calc(-1 * var(--px-small-interval) / 2);
-  margin-bottom: calc(-1 * var(--px-small-interval) / 2);
-  margin-left: calc(-1 * var(--px-small-interval) / 2);
-  margin-right: calc(-1 * var(--px-small-interval) / 2);
+  margin-top: -2px;
+  margin-bottom: -2px;
+  margin-left: -2px;
+  margin-right: -2px;
 }
 .px-space-inner.px-space__small .px-space-item {
-  margin-top: calc(var(--px-small-interval) / 2);
-  margin-bottom: calc(var(--px-small-interval) / 2);
-  margin-left: calc(var(--px-small-interval) / 2);
-  margin-right: calc(var(--px-small-interval) / 2);
+  margin-top: 2px;
+  margin-bottom: 2px;
+  margin-left: 2px;
+  margin-right: 2px;
 }
 .px-space-inner.px-space__large {
-  margin-top: calc(-1 * var(--px-large-interval) / 2);
-  margin-bottom: calc(-1 * var(--px-large-interval) / 2);
-  margin-left: calc(-1 * var(--px-large-interval) / 2);
-  margin-right: calc(-1 * var(--px-large-interval) / 2);
+  margin-top: -6px;
+  margin-bottom: -6px;
+  margin-left: -6px;
+  margin-right: -6px;
 }
 .px-space-inner.px-space__large .px-space-item {
-  margin-top: calc(var(--px-large-interval) / 2);
-  margin-bottom: calc(var(--px-large-interval) / 2);
-  margin-left: calc(var(--px-large-interval) / 2);
-  margin-right: calc(var(--px-large-interval) / 2);
+  margin-top: 6px;
+  margin-bottom: 6px;
+  margin-left: 6px;
+  margin-right: 6px;
 }
 .px-space__wrap {
   flex-wrap: wrap;

package/es/space/index.js

@@ -1,99 +1,75 @@
 import './css.js'
-import { defineComponent, computed, useSlots, createVNode, Fragment } from "vue";
-import { f as flattenVNodes } from "../share/util/render.js";
-import { k } from "../aside/index.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Space"
-  },
-  __name: "index",
-  props: {
-    margin: {
-      default: "medium"
-    },
-    direction: {
-      default: "horizontal"
-    },
-    justify: {
-      default: "start"
-    },
-    align: null,
-    wrap: {
-      type: Boolean,
-      default: true
-    },
-    inline: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(__props) {
-    const props = __props;
-    const alignComputed = computed(() => {
-      if (props.align) {
-        return props.align;
-      }
-      return props.direction === "horizontal" ? "center" : "stretch";
-    });
-    const slots = useSlots();
-    const marginComputed = computed(() => {
-      if (!props.margin || props.margin === "small" || props.margin === "medium" || props.margin === "large") {
-        return;
-      }
-      if (k(props.margin)) {
-        return {
-          x: props.margin,
-          y: props.margin
-        };
-      }
-      if ("x" in props.margin || "y" in props.margin) {
-        const x = k(props.margin.x) ? props.margin.x : 0;
-        const y = k(props.margin.y) ? props.margin.y : 0;
-        return {
-          x,
-          y
-        };
-      }
-    });
-    return () => {
-      var _a;
-      const children = flattenVNodes(((_a = slots.default) == null ? void 0 : _a.call(slots)) || []);
-      return createVNode("div", {
-        "class": {
-          pixelium: true,
-          "px-space": true,
-          [`px-space__inline`]: !!props.inline
-        }
-      }, [createVNode("div", {
-        "class": {
-          "px-space-inner": true,
-          [`px-space__small`]: props.margin === "small",
-          [`px-space__large`]: props.margin === "large",
-          [`px-space__justify-${props.justify}`]: true,
-          [`px-space__align-${alignComputed.value}`]: true,
-          [`px-space__${props.direction}`]: true,
-          [`px-space__wrap`]: !!props.wrap
-        },
-        "style": {
-          marginTop: marginComputed.value ? -marginComputed.value.y / 2 + "px" : void 0,
-          marginBottom: marginComputed.value ? -marginComputed.value.y / 2 + "px" : void 0,
-          marginLeft: marginComputed.value ? -marginComputed.value.x / 2 + "px" : void 0,
-          marginRight: marginComputed.value ? -marginComputed.value.x / 2 + "px" : void 0
-        }
-      }, [children.map((child, index) => createVNode(Fragment, {
-        "key": child.key || `px-space-item-${index}`
-      }, [createVNode("div", {
-        "class": "px-space-item",
-        "style": {
-          marginTop: marginComputed.value ? marginComputed.value.y / 2 + "px" : void 0,
-          marginBottom: marginComputed.value ? marginComputed.value.y / 2 + "px" : void 0,
-          marginLeft: marginComputed.value ? marginComputed.value.x / 2 + "px" : void 0,
-          marginRight: marginComputed.value ? marginComputed.value.x / 2 + "px" : void 0
-        }
-      }, [child])]))])]);
-    };
-  }
+import { g as A } from "../vendor.js";
+import { t as flattenVNodes } from "../share/util/render.js";
+import { Fragment, computed, createVNode, defineComponent, useSlots } from "vue";
+var space_default = /* @__PURE__ */ defineComponent({
+	name: "Space",
+	__name: "index",
+	props: {
+		margin: { default: "medium" },
+		direction: { default: "horizontal" },
+		justify: { default: "start" },
+		align: null,
+		wrap: {
+			type: Boolean,
+			default: true
+		},
+		inline: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const alignComputed = computed(() => {
+			if (props.align) return props.align;
+			return props.direction === "horizontal" ? "center" : "stretch";
+		});
+		const slots = useSlots();
+		const marginComputed = computed(() => {
+			if (!props.margin || props.margin === "small" || props.margin === "medium" || props.margin === "large") return;
+			if (A(props.margin)) return {
+				x: props.margin,
+				y: props.margin
+			};
+			if ("x" in props.margin || "y" in props.margin) return {
+				x: A(props.margin.x) ? props.margin.x : 0,
+				y: A(props.margin.y) ? props.margin.y : 0
+			};
+		});
+		return () => {
+			var _slots$default;
+			const children = flattenVNodes(((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)) || []);
+			return createVNode("div", { "class": {
+				pixelium: true,
+				"px-space": true,
+				[`px-space__inline`]: !!props.inline
+			} }, [createVNode("div", {
+				"class": {
+					"px-space-inner": true,
+					[`px-space__small`]: props.margin === "small",
+					[`px-space__large`]: props.margin === "large",
+					[`px-space__justify-${props.justify}`]: true,
+					[`px-space__align-${alignComputed.value}`]: true,
+					[`px-space__${props.direction}`]: true,
+					[`px-space__wrap`]: !!props.wrap
+				},
+				"style": {
+					marginTop: marginComputed.value ? -marginComputed.value.y / 2 + "px" : void 0,
+					marginBottom: marginComputed.value ? -marginComputed.value.y / 2 + "px" : void 0,
+					marginLeft: marginComputed.value ? -marginComputed.value.x / 2 + "px" : void 0,
+					marginRight: marginComputed.value ? -marginComputed.value.x / 2 + "px" : void 0
+				}
+			}, [children.map((child, index) => createVNode(Fragment, { "key": child.key || `px-space-item-${index}` }, [createVNode("div", {
+				"class": "px-space-item",
+				"style": {
+					marginTop: marginComputed.value ? marginComputed.value.y / 2 + "px" : void 0,
+					marginBottom: marginComputed.value ? marginComputed.value.y / 2 + "px" : void 0,
+					marginLeft: marginComputed.value ? marginComputed.value.x / 2 + "px" : void 0,
+					marginRight: marginComputed.value ? marginComputed.value.x / 2 + "px" : void 0
+				}
+			}, [child])]))])]);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { space_default as t };

package/es/spin/index.css

@@ -1,16 +1,17 @@
 .px-spin {
   position: relative;
   display: inline-block;
-  min-height: var(--px-medium-base-size);
-  min-width: var(--px-medium-base-size);
+  min-height: 28px;
+  min-width: 28px;
+  transition: 0.25s;
 }
 .px-spin__small {
-  min-height: var(--px-small-base-size);
-  min-width: var(--px-small-base-size);
+  min-height: 20px;
+  min-width: 20px;
 }
 .px-spin__large {
-  min-height: var(--px-large-base-size);
-  min-width: var(--px-large-base-size);
+  min-height: 36px;
+  min-width: 36px;
 }
 .px-spin-cover {
   position: absolute;
@@ -33,34 +34,34 @@
   justify-content: center;
   align-items: center;
   color: var(--px-primary-6);
-  font-size: var(--px-large-font-size);
+  font-size: 15px;
 }
 .px-spin-icon-wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-bottom: var(--px-interval-2);
-  font-size: var(--px-medium-base-size);
+  margin-bottom: 8px;
+  font-size: 28px;
 }
 .px-spin-icon-wrapper__last {
   margin-bottom: 0;
 }
 .px-spin-icon-wrapper .px-spin-icon {
-  height: var(--px-medium-base-size);
-  width: var(--px-medium-base-size);
+  height: 28px;
+  width: 28px;
   fill: var(--px-primary-6);
 }
 .px-spin-icon-wrapper__small {
-  font-size: var(--px-small-base-size);
+  font-size: 20px;
 }
 .px-spin-icon-wrapper__small .px-spin-icon {
-  height: var(--px-small-base-size);
-  width: var(--px-small-base-size);
+  height: 20px;
+  width: 20px;
 }
 .px-spin-icon-wrapper__large {
-  font-size: var(--px-large-base-size);
+  font-size: 36px;
 }
 .px-spin-icon-wrapper__large .px-spin-icon {
-  height: var(--px-large-base-size);
-  width: var(--px-large-base-size);
+  height: 36px;
+  width: 36px;
 }