@pixelium/web-vue 0.0.2-fix → 0.0.3-alpha

package/es/spin/index.js

@@ -1,104 +1,74 @@
 import './css.js'
-import { defineComponent, useSlots, computed, createElementBlock, openBlock, normalizeStyle, normalizeClass, unref, renderSlot, createCommentVNode, createBlock, createElementVNode, createVNode } from "vue";
-import { C as COVER_Z_INDEX } from "../share/const/index.js";
-import { _ as _sfc_main$1 } from "../mask/index.js";
-import { S as SpinnerThirdSolid } from "../auto-complete/index.js";
-import { k, p } from "../aside/index.js";
-const _hoisted_1 = { class: "px-spin-content" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Spin"
-  },
-  __name: "index",
-  props: {
-    loading: { type: Boolean, default: void 0 },
-    size: { default: "medium" },
-    maskColor: null,
-    maskStep: { default: 1 },
-    maskLineWidth: { default: 2 },
-    maskGrid: { type: Boolean, default: true },
-    zIndex: { default: COVER_Z_INDEX }
-  },
-  setup(__props) {
-    const props = __props;
-    const slots = useSlots();
-    const sizeValue = computed(() => {
-      return k(props.size) ? `${props.size}px` : void 0;
-    });
-    const loadingComputed = computed(() => {
-      return slots.default ? !!props.loading : props.loading !== false;
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(["pixelium px-spin", {
-            [`px-spin__${props.size}`]: unref(p)(props.size)
-          }]),
-          style: normalizeStyle({
-            minWidth: sizeValue.value,
-            minHeight: sizeValue.value
-          })
-        },
-        [
-          renderSlot(_ctx.$slots, "default"),
-          loadingComputed.value ? (openBlock(), createElementBlock(
-            "div",
-            {
-              key: 0,
-              class: "px-spin-cover",
-              style: normalizeStyle({
-                zIndex: props.zIndex
-              })
-            },
-            [
-              unref(slots).default ? (openBlock(), createBlock(_sfc_main$1, {
-                key: 0,
-                "z-index": 0,
-                color: props.maskColor,
-                step: props.maskStep,
-                "line-width": props.maskLineWidth,
-                grid: props.maskGrid
-              }, null, 8, ["color", "step", "line-width", "grid"])) : createCommentVNode("v-if", true),
-              createElementVNode("div", _hoisted_1, [
-                createElementVNode(
-                  "div",
-                  {
-                    class: normalizeClass(["px-spin-icon-wrapper", {
-                      "px-spin-icon-wrapper__last": !unref(slots).description,
-                      [`px-spin-icon-wrapper__${props.size}`]: unref(p)(props.size)
-                    }]),
-                    style: normalizeStyle({
-                      fontSize: sizeValue.value
-                    })
-                  },
-                  [
-                    renderSlot(_ctx.$slots, "icon", {}, () => [
-                      createVNode(unref(SpinnerThirdSolid), {
-                        class: "px-spin-icon px-animation__loading",
-                        style: normalizeStyle({
-                          width: sizeValue.value,
-                          height: sizeValue.value
-                        })
-                      }, null, 8, ["style"])
-                    ])
-                  ],
-                  6
-                  /* CLASS, STYLE */
-                ),
-                renderSlot(_ctx.$slots, "description")
-              ])
-            ],
-            4
-            /* STYLE */
-          )) : createCommentVNode("v-if", true)
-        ],
-        6
-        /* CLASS, STYLE */
-      );
-    };
-  }
+import { B as y, V as spinner_third_solid_default, g as A } from "../vendor.js";
+import { n as COVER_Z_INDEX } from "../share/const/index.js";
+import { t as mask_default } from "../mask/index.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, renderSlot, unref, useSlots } from "vue";
+var _hoisted_1 = { class: "px-spin-content" };
+var spin_default = /* @__PURE__ */ defineComponent({
+	name: "Spin",
+	__name: "index",
+	props: {
+		loading: {
+			type: Boolean,
+			default: void 0
+		},
+		size: { default: "medium" },
+		maskProps: null,
+		zIndex: { default: 20 },
+		maskColor: null,
+		maskStep: { default: 1 },
+		maskLineWidth: { default: 2 },
+		maskGrid: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const slots = useSlots();
+		const sizeValue = computed(() => {
+			return A(props.size) ? `${props.size}px` : void 0;
+		});
+		const loadingComputed = computed(() => {
+			return slots.default ? !!props.loading : props.loading !== false;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["pixelium px-spin", { [`px-spin__${props.size}`]: unref(y)(props.size) }]),
+				style: normalizeStyle({
+					minWidth: sizeValue.value,
+					minHeight: sizeValue.value
+				})
+			}, [renderSlot(_ctx.$slots, "default"), loadingComputed.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				class: "px-spin-cover",
+				style: normalizeStyle({ zIndex: props.zIndex })
+			}, [unref(slots).default ? (openBlock(), createBlock(mask_default, mergeProps({
+				key: 0,
+				"z-index": 0,
+				color: props.maskColor,
+				step: props.maskStep,
+				"line-width": props.maskLineWidth,
+				grid: props.maskGrid
+			}, props.maskProps), null, 16, [
+				"color",
+				"step",
+				"line-width",
+				"grid"
+			])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_1, [createElementVNode("div", {
+				class: normalizeClass(["px-spin-icon-wrapper", {
+					"px-spin-icon-wrapper__last": !unref(slots).description,
+					[`px-spin-icon-wrapper__${props.size}`]: unref(y)(props.size)
+				}]),
+				style: normalizeStyle({ fontSize: sizeValue.value })
+			}, [renderSlot(_ctx.$slots, "icon", {}, () => [createVNode(unref(spinner_third_solid_default), {
+				class: "px-spin-icon px-animation__loading",
+				style: normalizeStyle({
+					width: sizeValue.value,
+					height: sizeValue.value
+				})
+			}, null, 8, ["style"])])], 6), renderSlot(_ctx.$slots, "description")])], 4)) : createCommentVNode("v-if", true)], 6);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { spin_default as t };

package/es/spin/type.d.ts

@@ -1,3 +1,4 @@
+import type { MaskProps } from '../mask/type';
 export type SpinProps = {
     /**
      * @property {boolean} [loading]
@@ -9,6 +10,16 @@ export type SpinProps = {
      * @version 0.0.2
      */
     size?: 'medium' | 'large' | 'small' | number;
+    /**
+     * @property {Omit<MaskProps, 'zIndex'>} [maskProps]
+     * @version 0.0.3
+     */
+    maskProps?: Omit<MaskProps, 'zIndex'>;
+    /**
+     * @property {number} [zIndex=20]
+     * @version 0.0.2
+     */
+    zIndex?: number;
     /**
      * @property {string} [maskColor]
      * @version 0.0.2
@@ -29,11 +40,6 @@ export type SpinProps = {
      * @version 0.0.2
      */
     maskGrid?: boolean;
-    /**
-     * @property {number} [zIndex=20]
-     * @version 0.0.2
-     */
-    zIndex?: number;
 };
 export type SpinSlots = {
     /**

package/es/switch/css.js

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

package/es/switch/draw.d.ts

@@ -0,0 +1,2 @@
+import type { RgbaColor } from '../share/type';
+export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: RgbaColor, pixelSize: number, paddingX?: number, paddingY?: number, small?: boolean, smooth?: boolean) => void;

package/es/switch/draw.js

@@ -0,0 +1,18 @@
+import { a as drawCircle, o as drawSmoothCircle } from "../share/util/plot.js";
+import { a as rgbaColor2string } from "../share/util/color.js";
+const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, paddingX = 0, paddingY = 0, small = false, smooth = false) => {
+	ctx.fillStyle = rgbaColor2string(borderColor);
+	for (let i = 0; i < 4; i++) if (borderRadius[i] > pixelSize || small && borderRadius[i] === pixelSize) if (!smooth) drawCircle(ctx, center[i][0] + paddingX, center[i][1] + paddingY, borderRadius[i], rad[i][0], rad[i][1], pixelSize);
+	else drawSmoothCircle(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]) {
+		let length = center[1][0] - center[0][0] + pixelSize;
+		ctx.fillRect(center[0][0] + paddingX, paddingY, length, 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) {
+		let length = center[2][0] - center[3][0] + pixelSize;
+		ctx.fillRect(center[3][0] + paddingX, height - pixelSize + paddingY, length, pixelSize);
+	}
+	if (center[3][1] + pixelSize > center[0][1]) ctx.fillRect(paddingX, center[0][1] + paddingY, pixelSize, center[3][1] - center[0][1] + pixelSize);
+};
+export { drawBorder as t };

package/es/switch/index.css

@@ -0,0 +1,121 @@
+.px-switch-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  pointer-events: none;
+}
+.px-switch {
+  --switch-height: var(--px-medium-compat-size);
+  --switch-width: calc(var(--switch-height) * 2);
+  --text-color: var(--px-neutral-10);
+  --switch-button-size: calc(var(--switch-height) - 8px);
+  --icon-size: calc(var(--switch-button-size) - 4px - 2px);
+  min-height: var(--switch-height);
+  min-width: var(--switch-width);
+  background-color: transparent;
+  color: var(--text-color);
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  transition: 0.25s;
+  z-index: 0;
+  cursor: pointer;
+}
+.px-switch.px-switch__small {
+  font-size: 12px;
+}
+.px-switch.px-switch__medium {
+  font-size: 14px;
+}
+.px-switch.px-switch__large {
+  font-size: 15px;
+}
+.px-switch__active .px-switch-canvas-wrapper {
+  padding-left: 8px;
+  padding-right: calc(var(--switch-button-size) + 4px + 2px);
+}
+.px-switch__inactive .px-switch-canvas-wrapper {
+  padding-right: 8px;
+  padding-left: calc(var(--switch-button-size) + 4px + 2px);
+}
+.px-switch-canvas-wrapper {
+  transition: 0.25s;
+  box-sizing: border-box;
+  border-color: transparent;
+  border-width: var(--px-bit);
+  border-style: solid;
+  min-width: var(--switch-width);
+  height: var(--switch-height);
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.px-switch__small {
+  --switch-height: var(--px-small-compat-size);
+}
+.px-switch__large {
+  --switch-height: var(--px-large-compat-size);
+}
+.px-switch-inner {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  margin: 0;
+}
+.px-switch__readonly {
+  cursor: auto;
+}
+.px-switch__disabled {
+  cursor: not-allowed;
+}
+.px-switch-button {
+  position: absolute;
+  height: var(--switch-button-size);
+  width: var(--switch-button-size);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 50%;
+  transform: translateY(-50%);
+  user-select: none;
+  font-size: var(--icon-size);
+}
+.px-switch-button .px-switch-icon {
+  width: 1em;
+  height: 1em;
+}
+.px-switch-prefix-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
+.px-switch-prefix-wrapper__on {
+  color: var(--px-primary-6);
+}
+.px-switch-suffix-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  margin-left: 4px;
+}
+.px-switch-suffix-wrapper__on {
+  color: var(--px-primary-6);
+}
+.px-switch-active-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--px-neutral-1);
+  user-select: none;
+}
+.px-switch-inactive-wrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--px-neutral-1);
+  user-select: none;
+}

package/es/switch/index.d.ts

@@ -0,0 +1,42 @@
+import type { SwitchProps } from './type';
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
+type __VLS_Slots = {} & {
+    'inactive-label'?: (props: typeof __VLS_1) => any;
+} & {
+    'active-tip'?: (props: typeof __VLS_3) => any;
+} & {
+    'inactive-tip'?: (props: typeof __VLS_5) => any;
+} & {
+    'active-icon'?: (props: typeof __VLS_12) => any;
+} & {
+    'inactive-icon'?: (props: typeof __VLS_14) => any;
+} & {
+    'active-label'?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<SwitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: boolean, event: Event) => any;
+    blur: (event: FocusEvent) => any;
+    input: (value: boolean, event: InputEvent) => any;
+    focus: (event: FocusEvent) => any;
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<SwitchProps> & Readonly<{
+    onChange?: ((value: boolean, event: Event) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onInput?: ((value: boolean, event: InputEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    disabled: boolean;
+    readonly: boolean;
+    shape: "round" | "rect" | "default";
+    loading: boolean;
+    modelValue: boolean | null;
+    defaultValue: boolean | null;
+}, {}, {}, {}, 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;
+    };
+};

package/es/switch/index.js

@@ -0,0 +1,259 @@
+import './css.js'
+import { V as spinner_third_solid_default } from "../vendor.js";
+import { l as TRANSPARENT_RGBA_COLOR_OBJECT, t as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
+import { t as inBrowser } from "../share/util/env.js";
+import { n as INTERVAL } from "../share/const/style.js";
+import { i as canvasPreprocess, l as getBorderRadius, n as calcPixelSize, o as drawSmoothCircle, s as floodFill, t as calcBorderCornerCenter } from "../share/util/plot.js";
+import { a as rgbaColor2string, i as parseColor, n as getGlobalThemeColor } from "../share/util/color.js";
+import { t as useDarkMode } from "../share/hook/use-dark-mode.js";
+import { t as useResizeObserver } from "../share/hook/use-resize-observer.js";
+import { t as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { i as FORM_ITEM_PROVIDE } from "../share/const/provide-key.js";
+import { t as createProvideComputed } from "../share/util/reactivity.js";
+import { t as useTransitionEnd } from "../share/hook/use-transition-end.js";
+import { t as useControlledMode } from "../share/hook/use-controlled-mode.js";
+import { t as drawBorder } from "./draw.js";
+import { t as useSmoothTransition } from "../share/hook/use-smooth-transition.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, shallowRef, toDisplayString, unref, useSlots, watch, withModifiers } from "vue";
+var _hoisted_1 = {
+	key: 0,
+	class: "px-switch-active-wrapper"
+};
+var _hoisted_2 = {
+	key: 1,
+	class: "px-switch-inactive-wrapper"
+};
+var _hoisted_3 = ["disabled", "checked"];
+var MID_PROGRESS = .5;
+var ANIMATION_DURATION = 250;
+var switch_default = /* @__PURE__ */ defineComponent({
+	name: "Switch",
+	__name: "index",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultValue: {
+			type: Boolean,
+			default: void 0
+		},
+		shape: { default: "round" },
+		size: null,
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		activeTip: null,
+		inactiveTip: null,
+		activeLabel: null,
+		inactiveLabel: null,
+		activeColor: null,
+		inactiveColor: null
+	},
+	emits: [
+		"update:modelValue",
+		"input",
+		"change",
+		"focus",
+		"blur"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const slots = useSlots();
+		const darkMode = useDarkMode();
+		const canvasRef = shallowRef(null);
+		const buttonCanvasRef = shallowRef(null);
+		const switchButtonRef = shallowRef(null);
+		const canvasWrapperRef = shallowRef(null);
+		const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
+			defaultField: "defaultValue",
+			transform(nextValue) {
+				return !!nextValue;
+			}
+		});
+		const formItemProvide = inject(FORM_ITEM_PROVIDE, void 0);
+		const disabledComputed = createProvideComputed("disabled", [formItemProvide, props], "or");
+		const readonlyComputed = createProvideComputed("readonly", [formItemProvide, props], "or");
+		const sizeComputed = createProvideComputed("size", () => [
+			props.size && props,
+			formItemProvide,
+			props
+		], "nullish", (val) => val || "medium");
+		const [progress, play] = useSmoothTransition(ANIMATION_DURATION, modelValue.value ? 1 : 0);
+		const inputHandler = async (e) => {
+			const newValue = e.target.checked;
+			modelValue.value = newValue;
+			emits("input", newValue, e);
+			await updateModelValue(newValue);
+			play(modelValue.value ? "forward" : "backward");
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.inputHandler();
+		};
+		const changeHandler = (e) => {
+			const target = e.target;
+			emits("change", target.checked, e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const blurHandler = (e) => {
+			emits("blur", e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.blurHandler();
+		};
+		const focusHandler = (e) => {
+			emits("focus", e);
+		};
+		onMounted(() => {
+			nextTick(() => {
+				drawPixel();
+				updateIconLeft();
+			});
+		});
+		const updateSize = () => {
+			if (!canvasWrapperRef.value) return;
+			size.value = [canvasWrapperRef.value.clientWidth, canvasWrapperRef.value.clientHeight];
+		};
+		const size = ref([0, 0]);
+		const updateIconLeft = () => {
+			if (size.value[0] === 0 || size.value[1] === 0) return 0;
+			const pixelSize = calcPixelSize();
+			const intervalSize = 4;
+			const sliceHeight = size.value[1] + 2 * pixelSize - intervalSize * 2;
+			const start = intervalSize / 2;
+			iconLeft.value = start + (size.value[0] - sliceHeight - intervalSize / 2 - start) * progress.value;
+		};
+		const iconLeft = ref(0);
+		const getMainColor = () => {
+			if (!inBrowser()) return TRANSPARENT_RGBA_COLOR_OBJECT;
+			return progress.value > MID_PROGRESS ? props.activeColor ? parseColor(props.activeColor) : disabledComputed.value ? getGlobalThemeColor("primary", 2) : getGlobalThemeColor("primary", 6) : props.inactiveColor ? parseColor(props.inactiveColor) : disabledComputed.value ? getGlobalThemeColor("neutral", 6) : getGlobalThemeColor("neutral", 8);
+		};
+		const iconColor = computed(() => {
+			const color = getMainColor();
+			return color ? rgbaColor2string(color) : void 0;
+		});
+		watch([
+			size,
+			progress,
+			sizeComputed
+		], () => {
+			updateIconLeft();
+		}, { deep: true });
+		watch([
+			darkMode,
+			progress,
+			sizeComputed,
+			() => props.shape,
+			disabledComputed,
+			() => props.activeColor,
+			() => props.inactiveColor,
+			iconLeft
+		], () => {
+			drawPixel();
+		});
+		const drawButton = () => {
+			const buttonPreprocessData = canvasPreprocess(switchButtonRef, buttonCanvasRef);
+			if (!buttonPreprocessData) return;
+			const { ctx, width, height } = buttonPreprocessData;
+			const size$1 = Math.min(width, height);
+			const pixelSize = calcPixelSize();
+			const sliceColor = getGlobalThemeColor("neutral", 1);
+			if (!sliceColor) return;
+			ctx.fillStyle = rgbaColor2string(sliceColor);
+			const radius = Math.round(size$1 / 2 - pixelSize / 2);
+			if (props.shape === "round") drawSmoothCircle(ctx, radius, radius, radius, 0, Math.PI * 2, pixelSize);
+			else ctx.fillRect(0, 0, size$1, size$1);
+			floodFill(ctx, Math.round(radius + 1), Math.round(radius + 1), sliceColor);
+		};
+		const drawPixel = () => {
+			const preprocessData = canvasPreprocess(canvasWrapperRef, canvasRef);
+			if (!preprocessData) return;
+			const { ctx, width, height, canvas } = preprocessData;
+			const pixelSize = calcPixelSize();
+			const borderRadius = getBorderRadius(canvas, pixelSize, void 0, props.shape, "medium", false, false, false);
+			const backgroundColor = getMainColor();
+			const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
+			const rad = BORDER_CORNER_RAD_RANGE;
+			if (backgroundColor) {
+				drawBorder(ctx, width, height, center, borderRadius, rad, backgroundColor, pixelSize, 0, 0, sizeComputed.value === "small" && props.shape === "round");
+				floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
+			}
+			drawButton();
+		};
+		const refresh = () => {
+			drawPixel();
+			updateSize();
+		};
+		useResizeObserver(canvasWrapperRef, refresh);
+		useWatchGlobalCssVal(refresh);
+		useTransitionEnd(canvasWrapperRef, refresh);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", {
+				class: normalizeClass(["pixelium px-switch", {
+					[`px-switch__${unref(sizeComputed)}`]: unref(sizeComputed),
+					[`px-switch__readonly`]: unref(readonlyComputed),
+					[`px-switch__disabled`]: unref(disabledComputed),
+					[`px-switch__active`]: unref(progress) > MID_PROGRESS,
+					[`px-switch__inactive`]: unref(progress) <= MID_PROGRESS
+				}]),
+				ref: "switchRef"
+			}, [
+				unref(slots)["inactive-label"] || props.inactiveLabel ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["px-switch-prefix-wrapper", { "px-switch-prefix-wrapper__on": unref(progress) <= MID_PROGRESS }])
+				}, [renderSlot(_ctx.$slots, "inactive-label", {}, () => [createTextVNode(toDisplayString(props.inactiveLabel), 1)])], 2)) : createCommentVNode("v-if", true),
+				createElementVNode("div", {
+					class: "px-switch-canvas-wrapper",
+					ref_key: "canvasWrapperRef",
+					ref: canvasWrapperRef
+				}, [
+					(unref(slots)["active-tip"] || props.activeTip) && unref(progress) > MID_PROGRESS ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "active-tip", {}, () => [createTextVNode(toDisplayString(props.activeTip), 1)])])) : createCommentVNode("v-if", true),
+					(unref(slots)["inactive-tip"] || props.inactiveTip) && unref(progress) <= MID_PROGRESS ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "inactive-tip", {}, () => [createTextVNode(toDisplayString(props.inactiveTip), 1)])])) : createCommentVNode("v-if", true),
+					createElementVNode("canvas", {
+						ref_key: "canvasRef",
+						ref: canvasRef,
+						class: "px-switch-canvas"
+					}, null, 512),
+					createElementVNode("div", {
+						class: "px-switch-button",
+						ref_key: "switchButtonRef",
+						ref: switchButtonRef,
+						style: normalizeStyle({
+							left: `${iconLeft.value}px`,
+							fill: iconColor.value,
+							color: iconColor.value
+						})
+					}, [props.loading ? (openBlock(), createBlock(unref(spinner_third_solid_default), {
+						key: 0,
+						class: "px-switch-icon px-animation__loading"
+					})) : unref(progress) > MID_PROGRESS ? renderSlot(_ctx.$slots, "active-icon", { key: 1 }) : renderSlot(_ctx.$slots, "inactive-icon", { key: 2 }), createElementVNode("canvas", {
+						ref_key: "buttonCanvasRef",
+						ref: buttonCanvasRef,
+						class: "px-switch-canvas"
+					}, null, 512)], 4)
+				], 512),
+				unref(slots)["active-label"] || props.activeLabel ? (openBlock(), createElementBlock("div", {
+					key: 1,
+					class: normalizeClass(["px-switch-suffix-wrapper", { "px-switch-suffix-wrapper__on": unref(progress) > MID_PROGRESS }])
+				}, [renderSlot(_ctx.$slots, "active-label", {}, () => [createTextVNode(toDisplayString(props.activeLabel), 1)])], 2)) : createCommentVNode("v-if", true),
+				createElementVNode("input", {
+					type: "checkbox",
+					class: "px-switch-inner",
+					disabled: unref(disabledComputed) || unref(readonlyComputed),
+					checked: !!unref(modelValue),
+					onFocus: focusHandler,
+					onBlur: blurHandler,
+					onInput: withModifiers(inputHandler, ["stop"]),
+					onChange: withModifiers(changeHandler, ["stop"])
+				}, null, 40, _hoisted_3)
+			], 2);
+		};
+	}
+});
+export { switch_default as t };