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

package/es/radio/style.css

@@ -0,0 +1,73 @@
+.px-radio-canvas {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  pointer-events: none;
+}
+.px-radio {
+  --radio-size: var(--px-medium-compat-size);
+  --text-color: var(--px-neutral-10);
+  background-color: transparent;
+  color: var(--text-color);
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  transition: 0.25s;
+  z-index: 0;
+  cursor: pointer;
+}
+.px-radio.px-radio {
+  font-size: 14px;
+}
+.px-radio__large {
+  --radio-size: var(--px-large-compat-size);
+  font-size: 15px;
+}
+.px-radio__large .px-radio-canvas-wrapper {
+  margin-right: 12px;
+}
+.px-radio__small {
+  --radio-size: var(--px-small-compat-size);
+  font-size: 12px;
+}
+.px-radio__small .px-radio-canvas-wrapper {
+  margin-right: 4px;
+}
+.px-radio__input {
+  height: 0;
+  width: 0;
+  margin: 0;
+  position: absolute;
+}
+.px-radio__readonly {
+  cursor: default;
+}
+.px-radio__disabled {
+  cursor: not-allowed;
+}
+.px-radio-canvas-wrapper {
+  box-sizing: border-box;
+  border-color: transparent;
+  border-width: var(--px-bit);
+  border-style: solid;
+  background-color: transparent;
+  width: var(--radio-size);
+  height: var(--radio-size);
+  position: relative;
+  display: flex;
+  align-items: center;
+  margin-right: 8px;
+  transition: 0.25s;
+}
+.px-radio__checked {
+  --text-color: var(--px-primary-6);
+}
+.px-radio__disabled {
+  cursor: not-allowed;
+  --text-color: var(--px-neutral-8);
+}
+.px-radio__disabled.px-radio__checked {
+  --text-color: var(--px-primary-2);
+}

package/es/radio/type.d.ts

@@ -0,0 +1,76 @@
+export type RadioProps = {
+    /**
+     * @property {boolean | null} [modelValue]
+     * @version 0.0.3
+     */
+    modelValue?: boolean | null;
+    /**
+     * @property {boolean | null} [defaultValue]
+     * @version 0.0.3
+     */
+    defaultValue?: boolean | null;
+    /**
+     * @property {'normal' | 'retro'} [variant='normal']
+     * @version 0.0.3
+     */
+    variant?: 'normal' | 'retro';
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.3
+     */
+    disabled?: boolean;
+    /**
+     * @property {boolean} [readonly=false]
+     * @version 0.0.3
+     */
+    readonly?: boolean;
+    /**
+     * @property {string} [label]
+     * @version 0.0.3
+     */
+    label?: string;
+    /**
+     * @property {any} [value]
+     * @version 0.0.3
+     */
+    value?: any;
+    /**
+     * @property {'medium' | 'large' | 'small'} [size='medium']
+     * @version 0.0.3
+     */
+    size?: 'medium' | 'large' | 'small';
+};
+export type RadioEvents = {
+    /**
+     * @event update:modelValue
+     * @version 0.0.3
+     * @param {boolean} value
+     */
+    'update:modelValue': [value: boolean];
+    /**
+     * @event input
+     * @version 0.0.3
+     * @param {boolean} value
+     * @param {InputEvent} event
+     */
+    input: [value: boolean, event: InputEvent];
+    /**
+     * @event change
+     * @version 0.0.3
+     * @param {boolean} value
+     * @param {Event} event
+     */
+    change: [value: boolean, event: Event];
+    /**
+     * @event focus
+     * @param {FocusEvent} event
+     * @version 0.0.3
+     */
+    focus: [event: FocusEvent];
+    /**
+     * @event blur
+     * @param {FocusEvent} event
+     * @version 0.0.3
+     */
+    blur: [event: FocusEvent];
+};

package/es/radio-group/css.js

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

package/es/radio-group/index.css

@@ -0,0 +1,20 @@
+div.px-radio-group {
+  font-size: 0;
+}
+.px-radio-group {
+  display: inline-block;
+}
+.px-radio-group-inner {
+  display: inline-flex;
+  flex-wrap: wrap;
+  margin: -8px;
+}
+.px-radio-group-inner > * {
+  margin: 8px;
+}
+.px-radio-group__vertical {
+  display: inline-block;
+}
+.px-radio-group__vertical > .px-radio-group-inner {
+  flex-direction: column;
+}

package/es/radio-group/index.d.ts

@@ -0,0 +1,23 @@
+import type { RadioGroupProps } from './type';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<RadioGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (value: any) => any;
+    "update:modelValue": (value: any) => any;
+}, string, import("vue").PublicProps, Readonly<RadioGroupProps> & Readonly<{
+    onChange?: ((value: any) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: any) => any) | undefined;
+}>, {
+    disabled: boolean;
+    readonly: boolean;
+    direction: "horizontal" | "vertical";
+}, {}, {}, {}, 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-group/index.js

@@ -0,0 +1,77 @@
+import './css.js'
+import { B as y } from "../vendor.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 useControlledMode } from "../share/hook/use-controlled-mode.js";
+import { t as radio_default } from "../radio/index.js";
+import { Fragment, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, defineComponent, inject, normalizeClass, openBlock, provide, renderList, renderSlot, toDisplayString, toRef, unref, withCtx } from "vue";
+var _hoisted_1 = { class: "px-radio-group-inner" };
+var radio_group_default = /* @__PURE__ */ defineComponent({
+	name: "RadioGroup",
+	__name: "index",
+	props: {
+		modelValue: null,
+		defaultValue: null,
+		variant: null,
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		direction: { default: "horizontal" },
+		options: null,
+		size: null
+	},
+	emits: ["update:modelValue", "change"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const formItemProvide = inject(FORM_ITEM_PROVIDE, void 0);
+		const disabledComputed = createProvideComputed("disabled", [formItemProvide, props], "or");
+		const readonlyComputed = createProvideComputed("readonly", [formItemProvide, props], "or");
+		const [modelValue, updateModelValue] = useControlledMode("modelValue", props, emits, {
+			transform: (val) => {
+				return val;
+			},
+			defaultField: "defaultValue"
+		});
+		const sizeComputed = createProvideComputed("size", () => [
+			props.size && props,
+			formItemProvide,
+			props
+		], "nullish", (val) => val || "medium");
+		const getKey = (option) => {
+			if (y(option)) return option;
+			else return option.key ?? option.value;
+		};
+		const updateValue = (value) => {
+			updateModelValue(value);
+			emits("change", value);
+			formItemProvide === null || formItemProvide === void 0 || formItemProvide.changeHandler();
+		};
+		provide(RADIO_GROUP_PROVIDE, {
+			variant: toRef(props, "variant"),
+			size: sizeComputed,
+			modelValue,
+			disabled: disabledComputed,
+			readonly: readonlyComputed,
+			updateValue
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["pixelium px-radio-group", { [`px-radio-group__${props.direction}`]: props.direction }]) }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, () => [props.options ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(props.options, (option) => {
+				return openBlock(), createBlock(radio_default, {
+					key: getKey(option),
+					value: unref(y)(option) ? option : option.value,
+					disabled: unref(y)(option) ? false : option.disabled
+				}, {
+					default: withCtx(() => [createTextVNode(toDisplayString(unref(y)(option) ? option : option.label), 1)]),
+					_: 2
+				}, 1032, ["value", "disabled"]);
+			}), 128)) : createCommentVNode("v-if", true)])])], 2);
+		};
+	}
+});
+export { radio_group_default as t };

package/es/radio-group/type.d.ts

@@ -0,0 +1,77 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { Option } from '../share/type';
+export interface RadioGroupOption<T = any> extends Option<T> {
+    disabled?: boolean;
+    key?: string | number | symbol;
+}
+export type RadioGroupProps = {
+    /**
+     * @property {any} [modelValue]
+     * @version 0.0.3
+     */
+    modelValue?: any;
+    /**
+     * @property {any} [defaultValue]
+     * @version 0.0.3
+     */
+    defaultValue?: any;
+    /**
+     * @property {'normal' | 'retro'} [variant]
+     * @version 0.0.3
+     */
+    variant?: 'normal' | 'retro';
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.3
+     */
+    disabled?: boolean;
+    /**
+     * @property {boolean} [readonly=false]
+     * @version 0.0.3
+     */
+    readonly?: boolean;
+    /**
+     * @property {'horizontal' | 'vertical'} [direction='horizontal']
+     * @version 0.0.3
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * @property {(RadioGroupOption | string)[]} [options]
+     * @version 0.0.3
+     */
+    options?: (RadioGroupOption | string)[];
+    /**
+     * @property {'medium' | 'large' | 'small'} [size]
+     * @version 0.0.3
+     */
+    size?: 'medium' | 'large' | 'small';
+};
+export interface RadioGroupProvide {
+    variant: Ref<'normal' | 'retro' | undefined>;
+    size: ComputedRef<'medium' | 'large' | 'small' | undefined>;
+    modelValue: Ref<any>;
+    disabled: ComputedRef<boolean | undefined>;
+    readonly: ComputedRef<boolean | undefined>;
+    updateValue: (value: any) => void;
+}
+export type RadioGroupSlots = {
+    /**
+     * @slot default
+     * @version 0.0.3
+     */
+    default: {};
+};
+export type RadioGroupEvents = {
+    /**
+     * @event update:modelValue
+     * @version 0.0.3
+     * @param {any} value
+     */
+    'update:modelValue': [value: any];
+    /**
+     * @event change
+     * @version 0.0.3
+     * @param {any} value
+     */
+    change: [value: any];
+};

package/es/row/index.js

@@ -1,72 +1,58 @@
 import './css.js'
-import { defineComponent, computed, provide, createElementBlock, openBlock, createElementVNode, normalizeStyle, normalizeClass, renderSlot } from "vue";
-import { k, G as Gn } from "../aside/index.js";
-import { u as useScreenWidth } from "../share/hook/use-screen-width.js";
-const _hoisted_1 = { class: "pixelium px-row" };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Row"
-  },
-  __name: "index",
-  props: {
-    gutter: { default: 0 },
-    justify: { default: "start" },
-    align: { default: "start" },
-    wrap: { type: Boolean, default: true }
-  },
-  setup(__props) {
-    const props = __props;
-    const [widthType] = useScreenWidth();
-    const gutterComputed = computed(() => {
-      if (k(props.gutter)) {
-        return {
-          x: props.gutter,
-          y: props.gutter
-        };
-      }
-      if ("x" in props.gutter || "y" in props.gutter) {
-        return {
-          x: props.gutter.x || 0,
-          y: props.gutter.y || 0
-        };
-      }
-      const currentGutter = props.gutter[widthType.value];
-      if (k(currentGutter)) {
-        return {
-          x: currentGutter,
-          y: currentGutter
-        };
-      }
-      return Gn({ x: 0, y: 0 }, currentGutter);
-    });
-    provide("px-row-provide", gutterComputed);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode(
-          "div",
-          {
-            class: normalizeClass(["px-row-inner", {
-              [`px-row__justify-${props.justify}`]: true,
-              [`px-row__align-${props.align}`]: true,
-              [`px-row__wrap`]: !!props.wrap
-            }]),
-            style: normalizeStyle({
-              marginLeft: gutterComputed.value ? -gutterComputed.value.x / 2 + "px" : void 0,
-              marginRight: gutterComputed.value ? -gutterComputed.value.x / 2 + "px" : void 0,
-              marginTop: gutterComputed.value ? -gutterComputed.value.y / 2 + "px" : void 0,
-              marginBottom: gutterComputed.value ? -gutterComputed.value.y / 2 + "px" : void 0
-            })
-          },
-          [
-            renderSlot(_ctx.$slots, "default")
-          ],
-          6
-          /* CLASS, STYLE */
-        )
-      ]);
-    };
-  }
+import { g as A, w as Qn } from "../vendor.js";
+import { t as useScreenWidth } from "../share/hook/use-screen-width.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, provide, renderSlot } from "vue";
+var _hoisted_1 = { class: "pixelium px-row" };
+var row_default = /* @__PURE__ */ defineComponent({
+	name: "Row",
+	__name: "index",
+	props: {
+		gutter: { default: 0 },
+		justify: { default: "start" },
+		align: { default: "start" },
+		wrap: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const [widthType] = useScreenWidth();
+		const gutterComputed = computed(() => {
+			if (A(props.gutter)) return {
+				x: props.gutter,
+				y: props.gutter
+			};
+			if ("x" in props.gutter || "y" in props.gutter) return {
+				x: props.gutter.x || 0,
+				y: props.gutter.y || 0
+			};
+			const currentGutter = props.gutter[widthType.value];
+			if (A(currentGutter)) return {
+				x: currentGutter,
+				y: currentGutter
+			};
+			return Qn({
+				x: 0,
+				y: 0
+			}, currentGutter);
+		});
+		provide("px-row-provide", gutterComputed);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", {
+				class: normalizeClass(["px-row-inner", {
+					[`px-row__justify-${props.justify}`]: true,
+					[`px-row__align-${props.align}`]: true,
+					[`px-row__wrap`]: !!props.wrap
+				}]),
+				style: normalizeStyle({
+					marginLeft: gutterComputed.value ? -gutterComputed.value.x / 2 + "px" : void 0,
+					marginRight: gutterComputed.value ? -gutterComputed.value.x / 2 + "px" : void 0,
+					marginTop: gutterComputed.value ? -gutterComputed.value.y / 2 + "px" : void 0,
+					marginBottom: gutterComputed.value ? -gutterComputed.value.y / 2 + "px" : void 0
+				})
+			}, [renderSlot(_ctx.$slots, "default")], 6)]);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { row_default as t };

package/es/select/draw.d.ts

@@ -1,2 +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, inner: boolean, first: boolean, last: boolean) => void;
+export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: RgbaColor, pixelSize: number, inner: boolean, first: boolean, last: boolean, nextIsTextButton: boolean) => void;

package/es/select/draw.js

@@ -1,52 +1,27 @@
-import { d as drawCircle } from "../share/util/plot.js";
-import { r as rgbaColor2string } from "../share/util/color.js";
-const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, inner, first, last) => {
-  ctx.fillStyle = rgbaColor2string(borderColor);
-  for (let i = 0; i < 4; i++) {
-    if (borderRadius[i] <= pixelSize) {
-      continue;
-    }
-    if (i === 1 || i === 2 ? inner && last || !inner : true) {
-      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] && (inner && last || !inner)) {
-    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] && !(inner && !first)) {
-    ctx.fillRect(0, center[0][1], pixelSize, center[3][1] - center[0][1] + pixelSize);
-  }
-  if (inner && !first) {
-    ctx.fillRect(pixelSize / 2, 0, pixelSize / 2, height);
-  }
-  if (inner && !last) {
-    ctx.fillRect(width - 2 * pixelSize - 1, 0, pixelSize, height);
-  }
-};
-export {
-  drawBorder as d
+import { a as drawCircle } from "../share/util/plot.js";
+import { a as rgbaColor2string } from "../share/util/color.js";
+const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, inner, first, last, nextIsTextButton) => {
+	ctx.fillStyle = rgbaColor2string(borderColor);
+	for (let i = 0; i < 4; i++) if (borderRadius[i] > pixelSize) {
+		if (i === 1 || i === 2 ? inner && last || !inner : true) 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]) {
+		let length = center[1][0] - center[0][0] + pixelSize;
+		if (inner && !last) length -= pixelSize;
+		ctx.fillRect(center[0][0], 0, length, pixelSize);
+	}
+	if (center[2][1] + pixelSize > center[1][1] && (inner && last || !inner)) ctx.fillRect(width - pixelSize, center[1][1], 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;
+		if (inner && !last) length -= pixelSize;
+		ctx.fillRect(center[3][0], height - pixelSize, length, pixelSize);
+	}
+	if ((!inner || first) && center[3][1] + pixelSize > center[0][1]) ctx.fillRect(0, center[0][1], pixelSize, center[3][1] - center[0][1] + pixelSize);
+	if (inner && !first) ctx.fillRect(pixelSize / 2, 0, pixelSize / 2, height);
+	if (inner && !last) {
+		let length = pixelSize;
+		if (nextIsTextButton) length /= 2;
+		ctx.fillRect(width - 2 * pixelSize - 1, 0, length, height);
+	}
 };
+export { drawBorder as t };