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

package/es/input/type.d.ts

@@ -46,10 +46,10 @@ export type InputProps = {
      */
     size?: 'medium' | 'large' | 'small';
     /**
-     * @property {'default' | 'round'} [shape='default']
-     * @version 0.0.2
+     * @property {'rect' | 'round'} [shape='rect']
+     * @version 0.0.3
      */
-    shape?: 'default' | 'round';
+    shape?: 'rect' | 'round' | 'default';
     /**
      * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
      * @version 0.0.2

package/es/input-group/index.css

@@ -1,5 +1,4 @@
 .px-input-group {
-  height: var(--button-size);
   display: inline-flex;
   align-items: start;
   position: relative;

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

@@ -4,9 +4,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<InputGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupProps> & Readonly<{}>, {
-    shape: "default" | "round";
-    size: "medium" | "large" | "small";
     disabled: boolean;
+    readonly: boolean;
+    shape: "rect" | "round" | "default";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/es/input-group/index.js

@@ -1,40 +1,69 @@
 import './css.js'
-import { defineComponent, provide, createElementBlock, openBlock, renderSlot } from "vue";
-import { e as emitParentUpdate } from "../share/hook/use-index-of-children.js";
-import { I as INPUT_GROUP_UPDATE } from "../share/const/event-bus-key.js";
-import { I as INPUT_GROUP_PROVIDE } from "../share/const/provide-key.js";
-const _hoisted_1 = {
-  class: "pixelium px-input-group",
-  ref: "slotWrapper"
+import { i as INPUT_GROUP_UPDATE } from "../share/const/event-bus-key.js";
+import { t as emitParentUpdate } from "../share/hook/use-index-of-children.js";
+import { a as FORM_PROVIDE, i as FORM_ITEM_PROVIDE, s as INPUT_GROUP_PROVIDE } from "../share/const/provide-key.js";
+import { t as createProvideComputed } from "../share/util/reactivity.js";
+import { createElementBlock, defineComponent, inject, openBlock, provide, ref, renderSlot, toRefs } from "vue";
+var _hoisted_1 = {
+	class: "pixelium px-input-group",
+	ref: "slotWrapper"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "InputGroup"
-  },
-  __name: "index",
-  props: {
-    borderRadius: null,
-    shape: { default: "default" },
-    size: { default: "medium" },
-    disabled: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    const props = __props;
-    provide(INPUT_GROUP_PROVIDE, props);
-    emitParentUpdate(INPUT_GROUP_UPDATE);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        _hoisted_1,
-        [
-          renderSlot(_ctx.$slots, "default")
-        ],
-        512
-        /* NEED_PATCH */
-      );
-    };
-  }
+var input_group_default = /* @__PURE__ */ defineComponent({
+	name: "InputGroup",
+	__name: "index",
+	props: {
+		borderRadius: null,
+		shape: { default: "rect" },
+		size: null,
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const formProvide = inject(FORM_PROVIDE);
+		const formItemProvide = inject(FORM_ITEM_PROVIDE);
+		const disabledComputed = createProvideComputed("disabled", [
+			formItemProvide,
+			formProvide,
+			props
+		], "or");
+		const readonlyComputed = createProvideComputed("readonly", [
+			formItemProvide,
+			formProvide,
+			props
+		], "or");
+		const sizeComputed = createProvideComputed("size", () => [
+			props.size && props,
+			formItemProvide,
+			formProvide,
+			props
+		], "nullish", (val) => val || "medium");
+		const childrenInfo = ref([]);
+		provide(INPUT_GROUP_PROVIDE, {
+			...toRefs(props),
+			disabled: disabledComputed,
+			size: sizeComputed,
+			readonly: readonlyComputed,
+			collectChildrenInfo: (info) => {
+				const idx = childrenInfo.value.findIndex((e) => e.id === info.id);
+				if (idx >= 0) childrenInfo.value[idx] = info;
+				else childrenInfo.value.push(info);
+			},
+			removeChildrenInfo: (id) => {
+				childrenInfo.value = childrenInfo.value.filter((e) => e.id != id);
+			},
+			childrenInfo
+		});
+		emitParentUpdate(INPUT_GROUP_UPDATE);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")], 512);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { input_group_default as t };

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

@@ -1,4 +1,6 @@
-import type { NumberOrPercentage } from '../share/type';
+import type { Ref, ToRefs } from 'vue';
+import type { LooseRequired, NumberOrPercentage } from '../share/type';
+import type { ChildrenInfo } from '../button-group/type';
 export type InputGroupProps = {
     /**
      * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
@@ -6,10 +8,10 @@ export type InputGroupProps = {
      */
     borderRadius?: NumberOrPercentage | NumberOrPercentage[];
     /**
-     * @property {'default' | 'round'} [shape='default']
-     * @version 0.0.2
+     * @property {'rect' | 'round'} [shape='rect']
+     * @version 0.0.3
      */
-    shape?: 'default' | 'round';
+    shape?: 'rect' | 'round' | 'default';
     /**
      * @property {'medium' | 'large' | 'small'} [size='medium']
      * @version 0.0.2
@@ -20,6 +22,11 @@ export type InputGroupProps = {
      * @version 0.0.2
      */
     disabled?: boolean;
+    /**
+     * @property {boolean} [readonly=false]
+     * @version 0.0.3
+     */
+    readonly?: boolean;
 };
 export type InputGroupSlots = {
     /**
@@ -28,3 +35,8 @@ export type InputGroupSlots = {
      */
     default: {};
 };
+export type InputGroupProvide = ToRefs<LooseRequired<InputGroupProps>> & {
+    childrenInfo: Ref<ChildrenInfo[]>;
+    collectChildrenInfo: (info: ChildrenInfo) => void;
+    removeChildrenInfo: (id: string) => void;
+};

package/es/input-group-label/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/input-group-label/draw.js

@@ -1,52 +1,27 @@
-import { r as rgbaColor2string } from "../share/util/color.js";
-import { d as drawCircle } from "../share/util/plot.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) {
-      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
-    );
-  }
-  const flag = inner && !first;
-  if (!flag && 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) {
-    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 };

package/es/input-group-label/index.css

@@ -6,20 +6,10 @@
   z-index: -1;
   pointer-events: none;
 }
-div.px-input-group-label {
-  font-size: var(--text-size);
-}
 .px-input-group-label {
   --input-group-label-size: var(--px-medium-size);
-  --px-medium-padding-x: var(--px-interval-3);
-  --px-large-padding-x: var(--px-interval-4);
-  --px-small-padding-x: var(--px-interval-2);
-  --padding-x-size: var(--px-medium-padding-x);
   --text-color: var(--px-neutral-10);
-  --text-size: var(--px-medium-font-size);
   height: var(--input-group-label-size);
-  padding-left: var(--padding-x-size);
-  padding-right: var(--padding-x-size);
   background-color: transparent;
   border-color: transparent;
   border-width: var(--px-bit);
@@ -29,22 +19,43 @@ div.px-input-group-label {
   color: var(--text-color);
   transition: 0.25s;
   z-index: 0;
-  font-size: var(--text-size);
-}
-.px-input-group-label__inner {
-  transition: none;
-  padding-right: calc(var(--padding-x-size) + 1px + 1 * var(--px-bit));
-}
-.px-input-group-label__inner:last-child {
-  padding-right: var(--padding-x-size);
 }
 .px-input-group-label__large {
-  --padding-x-size: var(--px-large-padding-x);
   --input-group-label-size: var(--px-large-size);
-  --text-size: var(--px-large-font-size);
 }
 .px-input-group-label__small {
-  --padding-x-size: var(--px-small-padding-x);
   --input-group-label-size: var(--px-small-size);
-  --text-size: var(--px-small-font-size);
+}
+.px-input-group-label.px-input-group-label__small {
+  padding-right: 8px;
+  padding-left: 8px;
+  font-size: 12px;
+}
+.px-input-group-label.px-input-group-label__small.px-input-group-label__inner {
+  padding-right: calc(8px + 1px + 1 * var(--px-bit));
+}
+.px-input-group-label.px-input-group-label__small.px-input-group-label__inner:last-child {
+  padding-right: 8px;
+}
+.px-input-group-label.px-input-group-label__medium {
+  padding-right: 12px;
+  padding-left: 12px;
+  font-size: 14px;
+}
+.px-input-group-label.px-input-group-label__medium.px-input-group-label__inner {
+  padding-right: calc(12px + 1px + 1 * var(--px-bit));
+}
+.px-input-group-label.px-input-group-label__medium.px-input-group-label__inner:last-child {
+  padding-right: 12px;
+}
+.px-input-group-label.px-input-group-label__large {
+  padding-right: 16px;
+  padding-left: 16px;
+  font-size: 15px;
+}
+.px-input-group-label.px-input-group-label__large.px-input-group-label__inner {
+  padding-right: calc(16px + 1px + 1 * var(--px-bit));
+}
+.px-input-group-label.px-input-group-label__large.px-input-group-label__inner:last-child {
+  padding-right: 16px;
 }

package/es/input-group-label/index.d.ts

@@ -3,10 +3,7 @@ declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<InputGroupLabelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupLabelProps> & Readonly<{}>, {
-    shape: "default" | "round";
-    size: "medium" | "large" | "small";
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import("vue").DefineComponent<InputGroupLabelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InputGroupLabelProps> & Readonly<{}>, {}, {}, {}, {}, 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 & {

package/es/input-group-label/index.js

@@ -1,129 +1,106 @@
 import './css.js'
-import { defineComponent, getCurrentInstance, ref, inject, computed, shallowRef, onMounted, nextTick, watch, createElementBlock, openBlock, normalizeClass, createElementVNode, renderSlot } from "vue";
-import { a as canvasPreprocess, c as calcPixelSize, g as getBorderRadius, b as calcBorderCornerCenter, f as floodFill } from "../share/util/plot.js";
-import { g as getGlobalThemeColor, p as parseColor } from "../share/util/color.js";
-import { _ as _sfc_main$1 } from "../input-group/index.js";
-import { d as drawBorder } from "./draw.js";
-import { u as useDarkMode } from "../share/hook/use-dark-mode.js";
-import { u as useResizeObserver } from "../share/hook/use-resize-observer.js";
-import { u as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
-import { u as useIndexOfChildren } from "../share/hook/use-index-of-children.js";
-import { I as INPUT_GROUP_UPDATE } from "../share/const/event-bus-key.js";
-import { I as INPUT_GROUP_PROVIDE } from "../share/const/provide-key.js";
-import { B as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "InputGroupLabel"
-  },
-  __name: "index",
-  props: {
-    backgroundColor: null,
-    borderRadius: null,
-    shape: { default: "default" },
-    size: { default: "medium" }
-  },
-  setup(__props) {
-    var _a;
-    const props = __props;
-    const instance = getCurrentInstance();
-    const innerInputGroup = ref(((_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.type) === _sfc_main$1);
-    const [_, first, last] = innerInputGroup.value ? useIndexOfChildren(INPUT_GROUP_UPDATE) : [ref(0), ref(false), ref(false)];
-    const inputGroupProps = inject(INPUT_GROUP_PROVIDE);
-    const borderRadiusComputed = computed(() => {
-      return innerInputGroup.value && inputGroupProps ? inputGroupProps.borderRadius : props.borderRadius;
-    });
-    const sizeComputed = computed(() => {
-      return innerInputGroup.value && inputGroupProps ? inputGroupProps.size : props.size;
-    });
-    const shapeComputed = computed(() => {
-      return innerInputGroup.value && inputGroupProps ? inputGroupProps.shape : props.shape;
-    });
-    const hoverFlag = ref(false);
-    const activeFlag = ref(false);
-    const darkMode = useDarkMode();
-    const canvasRef = shallowRef(null);
-    const labelRef = shallowRef(null);
-    onMounted(() => {
-      nextTick(() => {
-        drawPixel();
-      });
-    });
-    watch([borderRadiusComputed, shapeComputed, hoverFlag, activeFlag, darkMode], () => {
-      drawPixel();
-    });
-    watch([first, last], () => {
-      drawPixel();
-    });
-    const drawPixel = () => {
-      const preprocessData = canvasPreprocess(labelRef, canvasRef);
-      if (!preprocessData) {
-        return;
-      }
-      const { ctx, width, height, canvas } = preprocessData;
-      const pixelSize = calcPixelSize();
-      const borderRadius = getBorderRadius(
-        canvas,
-        pixelSize,
-        borderRadiusComputed.value,
-        shapeComputed.value,
-        sizeComputed.value || "medium",
-        innerInputGroup.value,
-        first.value,
-        last.value
-      );
-      const borderColor = getGlobalThemeColor("neutral", 10);
-      const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
-      const rad = BORDER_CORNER_RAD_RANGE;
-      drawBorder(
-        ctx,
-        width,
-        height,
-        center,
-        borderRadius,
-        rad,
-        borderColor,
-        pixelSize,
-        innerInputGroup.value,
-        first.value,
-        last.value
-      );
-      const backgroundColor = props.backgroundColor ? parseColor(props.backgroundColor) : getGlobalThemeColor("neutral", 3);
-      floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
-    };
-    useResizeObserver(labelRef, drawPixel);
-    useWatchGlobalCssVal(drawPixel);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(["pixelium px-input-group-label", {
-            "px-input-group-label__large": sizeComputed.value === "large",
-            "px-input-group-label__small": sizeComputed.value === "small",
-            "px-input-group-label__inner": innerInputGroup.value
-          }]),
-          ref_key: "labelRef",
-          ref: labelRef
-        },
-        [
-          createElementVNode(
-            "canvas",
-            {
-              ref_key: "canvasRef",
-              ref: canvasRef,
-              class: "px-input-group-label-canvas"
-            },
-            null,
-            512
-            /* NEED_PATCH */
-          ),
-          renderSlot(_ctx.$slots, "default")
-        ],
-        2
-        /* CLASS */
-      );
-    };
-  }
+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, 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 { i as INPUT_GROUP_UPDATE } from "../share/const/event-bus-key.js";
+import { t as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { n as useIndexOfChildren } from "../share/hook/use-index-of-children.js";
+import { i as FORM_ITEM_PROVIDE, s as INPUT_GROUP_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 drawBorder } from "./draw.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, inject, nextTick, normalizeClass, onMounted, openBlock, ref, renderSlot, shallowRef, unref, watch } from "vue";
+var input_group_label_default = /* @__PURE__ */ defineComponent({
+	name: "InputGroupLabel",
+	__name: "index",
+	props: {
+		backgroundColor: null,
+		borderRadius: null,
+		shape: null,
+		size: null
+	},
+	setup(__props) {
+		var _instance$parent;
+		const props = __props;
+		const instance = getCurrentInstance();
+		const innerInputGroup = ref((instance === null || instance === void 0 || (_instance$parent = instance.parent) === null || _instance$parent === void 0 ? void 0 : _instance$parent.type.name) === "InputGroup");
+		const [index, first, last] = innerInputGroup.value ? useIndexOfChildren(INPUT_GROUP_UPDATE) : [
+			ref(0),
+			ref(false),
+			ref(false)
+		];
+		const inputGroupProvide = inject(INPUT_GROUP_PROVIDE);
+		const formItemProvide = inject(FORM_ITEM_PROVIDE);
+		const borderRadiusComputed = createProvideComputed("borderRadius", [innerInputGroup.value && inputGroupProvide, props]);
+		const sizeComputed = createProvideComputed("size", () => [
+			innerInputGroup.value && inputGroupProvide,
+			props.size && props,
+			formItemProvide,
+			props
+		], "nullish", (val) => val || "medium");
+		const shapeComputed = createProvideComputed("shape", [innerInputGroup.value && inputGroupProvide, props], "nullish", (val) => val || "rect");
+		const nextIsTextButton = computed(() => {
+			if (index.value >= 0) {
+				var _inputGroupProvide$ch;
+				return innerInputGroup.value ? !!((inputGroupProvide === null || inputGroupProvide === void 0 || (_inputGroupProvide$ch = inputGroupProvide.childrenInfo.value.find((e) => e.index === index.value + 1)) === null || _inputGroupProvide$ch === void 0 ? void 0 : _inputGroupProvide$ch.variant) === "text") : false;
+			} else return false;
+		});
+		const hoverFlag = ref(false);
+		const activeFlag = ref(false);
+		const darkMode = useDarkMode();
+		const canvasRef = shallowRef(null);
+		const labelRef = shallowRef(null);
+		onMounted(() => {
+			nextTick(() => {
+				drawPixel();
+			});
+		});
+		watch([
+			borderRadiusComputed,
+			shapeComputed,
+			hoverFlag,
+			activeFlag,
+			darkMode,
+			() => props.backgroundColor,
+			nextIsTextButton
+		], () => {
+			drawPixel();
+		});
+		watch([first, last], () => {
+			drawPixel();
+		});
+		const drawPixel = () => {
+			const preprocessData = canvasPreprocess(labelRef, canvasRef);
+			if (!preprocessData) return;
+			const { ctx, width, height, canvas } = preprocessData;
+			const pixelSize = calcPixelSize();
+			const borderRadius = getBorderRadius(canvas, pixelSize, borderRadiusComputed.value, shapeComputed.value, sizeComputed.value || "medium", innerInputGroup.value, first.value, last.value);
+			const borderColor = getGlobalThemeColor("neutral", 10);
+			const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
+			const rad = BORDER_CORNER_RAD_RANGE;
+			if (borderColor) drawBorder(ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, innerInputGroup.value, first.value, last.value, nextIsTextButton.value);
+			const backgroundColor = props.backgroundColor && parseColor(props.backgroundColor) || getGlobalThemeColor("neutral", 3);
+			if (backgroundColor) floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
+		};
+		useResizeObserver(labelRef, drawPixel);
+		useWatchGlobalCssVal(drawPixel);
+		useTransitionEnd(labelRef, drawPixel);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["pixelium px-input-group-label", {
+					[`px-input-group-label__${unref(sizeComputed)}`]: unref(sizeComputed),
+					"px-input-group-label__inner": innerInputGroup.value
+				}]),
+				ref_key: "labelRef",
+				ref: labelRef
+			}, [createElementVNode("canvas", {
+				ref_key: "canvasRef",
+				ref: canvasRef,
+				class: "px-input-group-label-canvas"
+			}, null, 512), renderSlot(_ctx.$slots, "default")], 2);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { input_group_label_default as t };

package/es/input-group-label/type.d.ts

@@ -11,10 +11,10 @@ export type InputGroupLabelProps = {
      */
     borderRadius?: NumberOrPercentage | NumberOrPercentage[];
     /**
-     * @property {'default' | 'round'} [shape='default']
-     * @version 0.0.2
+     * @property {'rect' | 'round'} [shape='rect']
+     * @version 0.0.3
      */
-    shape?: 'default' | 'round';
+    shape?: 'rect' | 'round' | 'default';
     /**
      * @property {'medium' | 'large' | 'small'} [size='medium']
      * @version 0.0.2

package/es/input-number/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;