@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/popup-content/type.d.ts

@@ -13,6 +13,7 @@ export type PopupContentProps = {
     borderRadius?: number;
     widthEqual?: boolean;
     contentStyle?: CSSProperties;
+    destroyOnHide?: boolean;
 };
 export type PopupContentEvents = {
     contentMouseenter: [e: MouseEvent];

package/es/popup-trigger/index.d.ts

@@ -7,15 +7,21 @@ declare const _default: import("vue").DefineComponent<PopupTriggerProps, {
         [key: string]: any;
     }> | null>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (e: MouseEvent) => any;
+    close: (e: MouseEvent | TouchEvent) => any;
+    drag: (event: MouseEvent | TouchEvent) => any;
     open: (node: VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>, e: MouseEvent) => any;
+    dragStart: (event: MouseEvent | TouchEvent) => any;
+    dragEnd: (event: MouseEvent | TouchEvent) => any;
 }, string, import("vue").PublicProps, Readonly<PopupTriggerProps> & Readonly<{
-    onClose?: ((e: MouseEvent) => any) | undefined;
+    onClose?: ((e: MouseEvent | TouchEvent) => any) | undefined;
+    onDrag?: ((event: MouseEvent | TouchEvent) => any) | undefined;
     onOpen?: ((node: VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>, e: MouseEvent) => any) | undefined;
+    onDragStart?: ((event: MouseEvent | TouchEvent) => any) | undefined;
+    onDragEnd?: ((event: MouseEvent | TouchEvent) => any) | undefined;
 }>, {
     trigger: "hover" | "click";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/es/popup-trigger/index.js

@@ -1,97 +1,124 @@
 import './css.js'
-import { defineComponent, shallowRef, useSlots, createVNode, Fragment, cloneVNode, mergeProps } from "vue";
-import { f as flattenVNodes, i as isTextVNode } from "../share/util/render.js";
-import { u as useClickOutsideListener } from "../share/hook/use-click-outside-listener.js";
-import { i as inBrowser } from "../share/util/env.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "PopupTrigger"
-  },
-  __name: "index",
-  props: {
-    trigger: {
-      default: "hover"
-    },
-    disabled: {
-      type: Boolean
-    }
-  },
-  emits: ["close", "open"],
-  setup(__props, {
-    expose: __expose,
-    emit: __emit
-  }) {
-    const props = __props;
-    const emits = __emit;
-    const currentTrigger = shallowRef(null);
-    async function openHandler(node, e) {
-      if (inBrowser()) {
-        if (node.el instanceof HTMLElement) {
-          currentTrigger.value = node;
-        } else {
-          currentTrigger.value = null;
-        }
-      }
-      if (props.disabled) {
-        return;
-      }
-      emits("open", node, e);
-    }
-    async function closeHandler(e) {
-      if (props.disabled) {
-        return;
-      }
-      emits("close", e);
-    }
-    const slots = useSlots();
-    const clickOutsideHandler = (event) => {
-      if (props.trigger === "click") {
-        closeHandler(event);
-      }
-    };
-    useClickOutsideListener(currentTrigger, clickOutsideHandler);
-    const firstVNodeRef = shallowRef(null);
-    __expose({
-      firstVNode: firstVNodeRef
-    });
-    return () => {
-      var _a;
-      const children = flattenVNodes(((_a = slots.default) == null ? void 0 : _a.call(slots)) || []);
-      return createVNode(Fragment, null, [children.map((child, index) => {
-        if (isTextVNode(child)) {
-          const node = props.trigger === "click" ? createVNode("span", {
-            "onClick": (e) => openHandler(node, e)
-          }, [child]) : createVNode("span", {
-            "onMouseenter": (e) => openHandler(node, e),
-            "onMouseleave": (e) => closeHandler(e)
-          }, [child]);
-          if (index === 0) {
-            firstVNodeRef.value = node;
-            if (!currentTrigger.value) {
-              currentTrigger.value = node;
-            }
-          }
-          return node;
-        } else {
-          const clone = cloneVNode(child, mergeProps(child.props || {}, props.trigger === "click" ? {
-            onClick: (e) => openHandler(clone, e)
-          } : {
-            onMouseenter: (e) => openHandler(clone, e),
-            onMouseleave: (e) => closeHandler(e)
-          }));
-          clone.ref = child.ref;
-          if (index === 0) {
-            firstVNodeRef.value = clone;
-            if (!currentTrigger.value) {
-              currentTrigger.value = clone;
-            }
-          }
-          return clone;
-        }
-      })]);
-    };
-  }
+import { F as m } from "../vendor.js";
+import { r as GET_ELEMENT_RENDERED } from "../share/const/index.js";
+import { t as inBrowser } from "../share/util/env.js";
+import { n as isTextVNode, t as flattenVNodes } from "../share/util/render.js";
+import { t as useClickOutsideListener } from "../share/hook/use-click-outside-listener.js";
+import { r as checkMouseInsideElementFromEvent } from "../share/util/dom.js";
+import { Fragment, cloneVNode, createVNode, defineComponent, ref, shallowRef, useSlots } from "vue";
+var popup_trigger_default = /* @__PURE__ */ defineComponent({
+	name: "PopupTrigger",
+	__name: "index",
+	props: {
+		trigger: { default: "hover" },
+		disabled: { type: Boolean }
+	},
+	emits: [
+		"close",
+		"open",
+		"drag",
+		"dragStart",
+		"dragEnd"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const currentTrigger = shallowRef(null);
+		async function openHandler(node, e) {
+			if (inBrowser()) {
+				let triggerEl = null;
+				if (node.el instanceof HTMLElement || node.el instanceof SVGElement) triggerEl = node.el;
+				else {
+					var _node$component;
+					const getElFunc = (_node$component = node.component) === null || _node$component === void 0 || (_node$component = _node$component.exposed) === null || _node$component === void 0 ? void 0 : _node$component[GET_ELEMENT_RENDERED];
+					if (m(getElFunc)) {
+						const el = getElFunc();
+						if (el instanceof HTMLElement || el instanceof SVGElement) triggerEl = el;
+					}
+				}
+				currentTrigger.value = triggerEl;
+			}
+			if (props.disabled) return;
+			emits("open", node, e);
+		}
+		const dragging = ref(false);
+		async function closeHandler(e) {
+			if (props.disabled) return;
+			if (dragging.value) return;
+			emits("close", e);
+		}
+		const slots = useSlots();
+		const clickOutsideHandler = (event) => {
+			if (props.trigger === "click") closeHandler(event);
+		};
+		useClickOutsideListener(currentTrigger, clickOutsideHandler);
+		const firstVNodeRef = shallowRef(null);
+		__expose({ firstVNode: firstVNodeRef });
+		function handleDrag(e) {
+			emits("drag", e);
+		}
+		function stopDrag(e) {
+			dragging.value = false;
+			if (!currentTrigger.value) closeHandler(e);
+			else {
+				const el = currentTrigger.value;
+				if (!(el instanceof HTMLElement) && !(el instanceof SVGElement)) closeHandler(e);
+				else if (!checkMouseInsideElementFromEvent(el, e)) closeHandler(e);
+			}
+			document.removeEventListener("mousemove", handleDrag);
+			document.removeEventListener("mouseup", stopDrag);
+			document.removeEventListener("touchmove", handleDrag);
+			document.removeEventListener("touchend", stopDrag);
+			emits("dragEnd", e);
+		}
+		const startDrag = (e) => {
+			dragging.value = true;
+			document.addEventListener("mousemove", handleDrag);
+			document.addEventListener("mouseup", stopDrag);
+			document.addEventListener("touchmove", handleDrag);
+			document.addEventListener("touchend", stopDrag);
+			emits("dragStart", e);
+		};
+		const initCurrentTrigger = (e) => {
+			if (currentTrigger.value) return;
+			if (e instanceof HTMLElement || e instanceof SVGElement) currentTrigger.value = e;
+		};
+		return () => {
+			var _slots$default;
+			return createVNode(Fragment, null, [flattenVNodes(((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)) || []).map((child, index) => {
+				if (isTextVNode(child)) {
+					const node = props.trigger === "click" ? createVNode("span", {
+						"onClick": (e) => openHandler(node, e),
+						"onMousedown": startDrag,
+						"onTouchstartPassive": startDrag,
+						"ref": initCurrentTrigger
+					}, [child]) : createVNode("span", {
+						"onMouseenter": (e) => openHandler(node, e),
+						"onMouseleave": (e) => closeHandler(e),
+						"onMousedown": startDrag,
+						"onTouchstartPassive": startDrag,
+						"ref": initCurrentTrigger
+					}, [child]);
+					if (index === 0) firstVNodeRef.value = node;
+					return node;
+				} else {
+					const clone = cloneVNode(child, props.trigger === "click" ? {
+						onClick: (e) => openHandler(clone, e),
+						onMousedown: startDrag,
+						onTouchstart: startDrag,
+						ref: initCurrentTrigger
+					} : {
+						onMouseenter: (e) => openHandler(clone, e),
+						onMouseleave: (e) => closeHandler(e),
+						onMousedown: startDrag,
+						onTouchstart: startDrag,
+						ref: initCurrentTrigger
+					}, true);
+					if (index === 0) firstVNodeRef.value = clone;
+					return clone;
+				}
+			})]);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { popup_trigger_default as t };

package/es/popup-trigger/type.d.ts

@@ -4,6 +4,9 @@ export type PopupTriggerProps = {
     disabled?: boolean;
 };
 export type PopupTriggerEmits = {
-    close: [e: MouseEvent];
+    close: [e: TouchEvent | MouseEvent];
     open: [node: VNode, e: MouseEvent];
+    drag: [event: TouchEvent | MouseEvent];
+    dragStart: [event: TouchEvent | MouseEvent];
+    dragEnd: [event: TouchEvent | MouseEvent];
 };

package/es/popup-wrapper/css.js

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

package/es/popup-wrapper/index.css

@@ -0,0 +1,14 @@
+.px-popup-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.px-popup-wrapper__fixed {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+.px-popup-wrapper__fixed > * {
+  pointer-events: auto;
+}

package/es/popup-wrapper/index.d.ts

@@ -0,0 +1,18 @@
+import type { PopupWrapperProps } from './type';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<PopupWrapperProps, {
+    updateRenderState: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PopupWrapperProps> & Readonly<{}>, {
+    root: HTMLElement | string;
+    destroyOnHide: 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;
+    };
+};

package/es/popup-wrapper/index.js

@@ -0,0 +1,67 @@
+import './css.js'
+import { g as A } from "../vendor.js";
+import { t as useZIndex } from "../share/hook/use-z-index.js";
+import { Teleport, createBlock, createCommentVNode, createElementBlock, defineComponent, mergeProps, nextTick, onMounted, openBlock, ref, renderSlot, unref, vShow, watch, withDirectives } from "vue";
+var popup_wrapper_default = /* @__PURE__ */ defineComponent({
+	name: "PopupWrapper",
+	__name: "index",
+	props: {
+		visible: { type: Boolean },
+		defaultVisible: { type: Boolean },
+		zIndex: null,
+		root: { default: "body" },
+		closeDelay: null,
+		position: null,
+		destroyOnHide: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const [currentZIndex, next, release] = useZIndex("popup");
+		const innerVisible = ref(!!props.visible);
+		let timer;
+		const processVisible = (value) => {
+			if (timer) {
+				clearTimeout(timer);
+				timer = void 0;
+			}
+			if (value) {
+				innerVisible.value = true;
+				next();
+			} else {
+				release();
+				if (A(props.closeDelay)) timer = setTimeout(() => {
+					innerVisible.value = false;
+				}, props.closeDelay);
+				else innerVisible.value = false;
+			}
+		};
+		watch(() => props.visible, (val) => {
+			processVisible(!!val);
+		});
+		__expose({ updateRenderState: () => {
+			nextTick(() => {
+				processVisible(!!props.visible);
+			});
+		} });
+		onMounted(() => {
+			nextTick(() => {
+				processVisible(!!props.visible);
+			});
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: props.root || "body" }, [(__props.destroyOnHide !== false ? innerVisible.value : true) ? withDirectives((openBlock(), createElementBlock("div", mergeProps({
+				key: 0,
+				class: {
+					pixelium: true,
+					"px-popup-wrapper": true,
+					"px-popup-wrapper__fixed": props.position === "fixed"
+				},
+				style: { zIndex: props.zIndex ?? unref(currentZIndex) }
+			}, _ctx.$attrs), [renderSlot(_ctx.$slots, "default")], 16)), [[vShow, __props.destroyOnHide === false ? innerVisible.value : true]]) : createCommentVNode("v-if", true)], 8, ["to"]);
+		};
+	}
+});
+export { popup_wrapper_default as t };

package/es/popup-wrapper/type.d.ts

@@ -0,0 +1,9 @@
+export type PopupWrapperProps = {
+    visible?: boolean | null;
+    defaultVisible?: boolean | null;
+    zIndex?: number;
+    root?: HTMLElement | string;
+    closeDelay?: number;
+    position?: 'absolute' | 'fixed';
+    destroyOnHide?: boolean;
+};

package/es/radio/css.js

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

package/es/radio/draw.d.ts

@@ -0,0 +1,4 @@
+export declare const drawPixelTriangle: (ctx: CanvasRenderingContext2D, width: number, height: number, color: string, pixelSize: number) => void;
+export declare const drawMaskedPixelTriangle: (ctx: CanvasRenderingContext2D, width: number, height: number, color: string, pixelSize: number) => void;
+export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: string, pixelSize: number) => void;
+export declare const drawRadioCircleMark: (ctx: CanvasRenderingContext2D, size: number, color: string, pixelSize: number) => void;

package/es/radio/draw.js

@@ -0,0 +1,47 @@
+import { c as SQRT3 } from "../share/const/index.js";
+import { n as INTERVAL } from "../share/const/style.js";
+import { a as drawCircle, d as roundToPixel, o as drawSmoothCircle, s as floodFill } from "../share/util/plot.js";
+import { i as parseColor } from "../share/util/color.js";
+const drawPixelTriangle = (ctx, width, height, color, pixelSize) => {
+	ctx.fillStyle = color;
+	const size = roundToPixel(Math.min(width, height), pixelSize);
+	const x = Math.round((width - size * SQRT3 / 2) / 2 + pixelSize / 2);
+	const y = Math.round((height - size) / 2);
+	let cur = size;
+	let times = 0;
+	let preHeight = -1;
+	const step = pixelSize * Math.SQRT2;
+	while (cur >= 0) {
+		let h = roundToPixel(cur, pixelSize);
+		if (preHeight > pixelSize && h === 0) {
+			h = pixelSize;
+			cur = -1;
+		}
+		ctx.fillRect(x + times * pixelSize, y + Math.round((size - h) / 2), pixelSize, h);
+		cur -= step;
+		times++;
+		preHeight = h;
+	}
+};
+const drawMaskedPixelTriangle = (ctx, width, height, color, pixelSize) => {
+	drawPixelTriangle(ctx, width, height, color, pixelSize);
+	for (let x = 0; x <= width; x += 2) ctx.clearRect(x, 0, 1, height);
+	for (let y = 0; y < height; y += 2) ctx.clearRect(0, y, width, 1);
+};
+const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize) => {
+	ctx.fillStyle = borderColor;
+	for (let i = 0; i < 4; i++) if (borderRadius[i] > pixelSize) drawCircle(ctx, center[i][0], center[i][1], borderRadius[i], rad[i][0], rad[i][1], pixelSize);
+	if (center[1][0] + pixelSize > center[0][0]) ctx.fillRect(center[0][0], 0, center[1][0] - center[0][0] + pixelSize, pixelSize);
+	if (center[2][1] + pixelSize > center[1][1]) ctx.fillRect(width - pixelSize, center[1][1], pixelSize, center[2][1] - center[1][1] + pixelSize);
+	if (center[3][0] < center[2][0] + pixelSize) ctx.fillRect(center[3][0], height - pixelSize, center[2][0] - center[3][0] + pixelSize, pixelSize);
+	if (center[3][1] + pixelSize > center[0][1]) ctx.fillRect(0, center[0][1], pixelSize, center[3][1] - center[0][1] + pixelSize);
+};
+const drawRadioCircleMark = (ctx, size, color, pixelSize) => {
+	ctx.fillStyle = color;
+	drawSmoothCircle(ctx, size / 2 - pixelSize / 2, size / 2 - pixelSize / 2, Math.round((size - pixelSize / 2) / 2 - 8), 0, Math.PI * 2, pixelSize);
+	const fillStart = Math.ceil(size / 2 - pixelSize / 2) + 1;
+	const rgbaColor = color ? parseColor(color) : null;
+	if (rgbaColor) floodFill(ctx, fillStart, fillStart, rgbaColor);
+	ctx.fillRect(fillStart, fillStart, pixelSize, pixelSize);
+};
+export { drawRadioCircleMark as i, drawMaskedPixelTriangle as n, drawPixelTriangle as r, drawBorder as t };

package/es/radio/index.d.ts

@@ -0,0 +1,30 @@
+import type { RadioProps } from './type';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<RadioProps, {}, {}, {}, {}, 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<RadioProps> & 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;
+    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/radio/index.js

@@ -0,0 +1,190 @@
+import './css.js'
+import { t as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
+import { i as canvasPreprocess, l as getBorderRadius, n as calcPixelSize, s as floodFill, t as calcBorderCornerCenter } from "../share/util/plot.js";
+import { i as parseColor, r as getGlobalThemeColorString } 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 { c as RADIO_GROUP_PROVIDE, 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 { i as drawRadioCircleMark, n as drawMaskedPixelTriangle, r as drawPixelTriangle, t as drawBorder } from "./draw.js";
+import { createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, nextTick, normalizeClass, onMounted, openBlock, ref, renderSlot, toDisplayString, unref, watch, withModifiers } from "vue";
+var _hoisted_1 = [
+	"value",
+	"checked",
+	"disabled"
+];
+var radio_default = /* @__PURE__ */ defineComponent({
+	name: "Radio",
+	__name: "index",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultValue: {
+			type: Boolean,
+			default: void 0
+		},
+		variant: null,
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		label: null,
+		value: null,
+		size: null
+	},
+	emits: [
+		"update:modelValue",
+		"input",
+		"change",
+		"focus",
+		"blur"
+	],
+	setup(__props, { emit: __emit }) {
+		const canvasWrapperRef = ref(null);
+		const canvasRef = ref(null);
+		const props = __props;
+		const emits = __emit;
+		const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
+			defaultField: "defaultValue",
+			transform: (val) => !!val
+		});
+		const formItemProvide = inject(FORM_ITEM_PROVIDE, void 0);
+		const radioGroupProvide = inject(RADIO_GROUP_PROVIDE, void 0);
+		const sizeComputed = createProvideComputed("size", () => [
+			radioGroupProvide,
+			props.size && props,
+			formItemProvide,
+			props
+		], "nullish", (val) => val || "medium");
+		const disabledComputed = createProvideComputed("disabled", [
+			radioGroupProvide,
+			formItemProvide,
+			props
+		], "or");
+		const readonlyComputed = createProvideComputed("readonly", [
+			radioGroupProvide,
+			formItemProvide,
+			props
+		], "or");
+		const variantComputed = createProvideComputed("variant", [radioGroupProvide, props], "nullish", (val) => val || "normal");
+		if (radioGroupProvide) {
+			watch(() => radioGroupProvide.modelValue.value, (newValue) => {
+				modelValue.value = newValue === props.value;
+			}, { immediate: true });
+			watch(modelValue, (newValue) => {
+				if (!radioGroupProvide || !newValue) return;
+				radioGroupProvide.updateValue(props.value);
+			});
+		}
+		const hoverFlag = ref(false);
+		const mouseenterHandler = () => {
+			hoverFlag.value = true;
+		};
+		const mouseleaveHandler = () => {
+			hoverFlag.value = false;
+		};
+		const focusFlag = ref(false);
+		const focusHandler = (e) => {
+			focusFlag.value = true;
+			emits("focus", e);
+		};
+		const blurHandler = (e) => {
+			focusFlag.value = false;
+			emits("blur", e);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.blurHandler();
+		};
+		const handleChange = (event) => {
+			const target = event.target;
+			emits("change", target.checked, event);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		const inputHandler = async (e) => {
+			const newValue = e.target.checked;
+			modelValue.value = newValue;
+			emits("input", newValue, e);
+			await updateModelValue(newValue);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.inputHandler();
+		};
+		const darkMode = useDarkMode();
+		const pixelSize = calcPixelSize();
+		const drawPixel = () => {
+			const preprocessData = canvasPreprocess(canvasWrapperRef, canvasRef);
+			if (!preprocessData) return;
+			const { ctx, width, height, canvas } = preprocessData;
+			ctx.clearRect(0, 0, width, height);
+			const backgroundColor = getGlobalThemeColorString("neutral", 1);
+			const mainColor = modelValue.value ? disabledComputed.value ? getGlobalThemeColorString("primary", 2) : hoverFlag.value && !readonlyComputed.value ? getGlobalThemeColorString("primary", 5) : getGlobalThemeColorString("primary", 6) : disabledComputed.value ? getGlobalThemeColorString("neutral", 8) : hoverFlag.value && !readonlyComputed.value ? getGlobalThemeColorString("primary", 5) : getGlobalThemeColorString("neutral", 10);
+			if (variantComputed.value === "retro") if (modelValue.value) drawPixelTriangle(ctx, width, height, mainColor, pixelSize);
+			else drawMaskedPixelTriangle(ctx, width, height, mainColor, pixelSize);
+			else {
+				const borderRadius = getBorderRadius(canvas, pixelSize, void 0, "round", void 0, false, false, false);
+				drawBorder(ctx, width, height, calcBorderCornerCenter(borderRadius, width, height, pixelSize), borderRadius, BORDER_CORNER_RAD_RANGE, mainColor, pixelSize);
+				const size = Math.min(width, height);
+				const fillStart = Math.ceil(size / 2 - pixelSize / 2) + 1;
+				if (backgroundColor) floodFill(ctx, fillStart, fillStart, parseColor(backgroundColor));
+				if (modelValue.value) drawRadioCircleMark(ctx, size, mainColor, pixelSize);
+			}
+		};
+		onMounted(() => {
+			nextTick(() => {
+				drawPixel();
+			});
+		});
+		watch([
+			disabledComputed,
+			readonlyComputed,
+			modelValue,
+			darkMode,
+			hoverFlag,
+			variantComputed,
+			sizeComputed
+		], () => {
+			drawPixel();
+		});
+		useResizeObserver(canvasWrapperRef, drawPixel);
+		useWatchGlobalCssVal(drawPixel);
+		useTransitionEnd(canvasWrapperRef, drawPixel);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("label", {
+				class: normalizeClass(["pixelium px-radio", {
+					"px-radio__disabled": unref(disabledComputed),
+					"px-radio__readonly": unref(readonlyComputed),
+					"px-radio__checked": unref(modelValue),
+					[`px-radio__${unref(variantComputed)}`]: unref(variantComputed),
+					[`px-radio__${unref(sizeComputed)}`]: unref(sizeComputed)
+				}]),
+				ref: "radioRef",
+				onMouseenter: mouseenterHandler,
+				onMouseleave: mouseleaveHandler
+			}, [createElementVNode("div", {
+				class: normalizeClass(["px-radio-canvas-wrapper", { "px-animation__blink": focusFlag.value && !unref(disabledComputed) && !unref(readonlyComputed) && unref(variantComputed) === "retro" }]),
+				ref_key: "canvasWrapperRef",
+				ref: canvasWrapperRef
+			}, [createElementVNode("input", {
+				type: "radio",
+				value: props.value,
+				class: "px-radio__input",
+				checked: !!unref(modelValue),
+				onInput: withModifiers(inputHandler, ["stop"]),
+				onChange: withModifiers(handleChange, ["stop"]),
+				onFocus: focusHandler,
+				onBlur: blurHandler,
+				disabled: unref(disabledComputed) || unref(readonlyComputed)
+			}, null, 40, _hoisted_1), createElementVNode("canvas", {
+				ref_key: "canvasRef",
+				ref: canvasRef,
+				class: "px-radio-canvas"
+			}, null, 512)], 2), renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString(props.label), 1)])], 34);
+		};
+	}
+});
+export { radio_default as t };