@pixelium/web-vue 0.0.2 → 0.0.3-alpha

package/es/button/index.d.ts

@@ -6,12 +6,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
-    shape: "default" | "round" | "circle" | "square";
-    size: "medium" | "large" | "small";
     disabled: boolean;
     loading: boolean;
-    variant: "primary" | "plain" | "text" | "outline";
-    theme: "primary" | "sakura" | "success" | "warning" | "danger" | "info";
     block: boolean;
     nativeType: "button" | "submit" | "reset";
     autofocus: boolean;

package/es/button/index.js

@@ -1,258 +1,232 @@
 import './css.js'
-import { defineComponent, getCurrentInstance, ref, inject, computed, useSlots, shallowRef, onMounted, nextTick, watch, createElementBlock, openBlock, normalizeStyle, normalizeClass, createElementVNode, createCommentVNode, renderSlot, unref, createBlock } from "vue";
-import { S as SpinnerThirdSolid } from "../auto-complete/index.js";
-import { a as canvasPreprocess, c as calcPixelSize, g as getBorderRadius, b as calcBorderCornerCenter, f as floodFill } from "../share/util/plot.js";
-import { p as parseColor, a as generatePalette } from "../share/util/color.js";
-import { _ as _sfc_main$1 } from "../button-group/index.js";
-import { _ as _sfc_main$2 } from "../input-group/index.js";
-import { g as getTextColorWithPalette, a as getBorderColor, d as drawGradient, b as drawBorder, c as getBackgroundColor } 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 { B as BUTTON_GROUP_UPDATE, I as INPUT_GROUP_UPDATE } from "../share/const/event-bus-key.js";
-import { B as BUTTON_GROUP_PROVIDE, I as INPUT_GROUP_PROVIDE } from "../share/const/provide-key.js";
-import { B as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
-const _hoisted_1 = ["disabled", "type", "autofocus"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "Button"
-  },
-  __name: "index",
-  props: {
-    borderRadius: null,
-    shape: { default: "default" },
-    size: { default: "medium" },
-    disabled: { type: Boolean, default: false },
-    loading: { type: Boolean, default: false },
-    variant: { default: "primary" },
-    theme: { default: "primary" },
-    color: null,
-    block: { type: Boolean, default: false },
-    nativeType: { default: "button" },
-    autofocus: { type: Boolean, default: false }
-  },
-  setup(__props) {
-    var _a, _b;
-    const props = __props;
-    const instance = getCurrentInstance();
-    const innerButtonGroup = ref(((_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.type) === _sfc_main$1);
-    const innerInputGroup = ref(((_b = instance == null ? void 0 : instance.parent) == null ? void 0 : _b.type) === _sfc_main$2);
-    const [_, first, last] = innerButtonGroup.value ? useIndexOfChildren(BUTTON_GROUP_UPDATE) : innerInputGroup.value ? useIndexOfChildren(INPUT_GROUP_UPDATE) : [ref(0), ref(false), ref(false)];
-    const buttonGroupProps = inject(BUTTON_GROUP_PROVIDE);
-    const inputGroupProps = inject(INPUT_GROUP_PROVIDE);
-    const borderRadiusComputed = computed(() => {
-      return innerButtonGroup.value && buttonGroupProps ? buttonGroupProps.borderRadius : innerInputGroup.value && inputGroupProps ? inputGroupProps.borderRadius : props.borderRadius;
-    });
-    const typeComputed = computed(() => {
-      return innerButtonGroup.value && buttonGroupProps ? buttonGroupProps.variant || props.variant : props.variant;
-    });
-    const sizeComputed = computed(() => {
-      return innerButtonGroup.value && buttonGroupProps ? buttonGroupProps.size : innerInputGroup.value && inputGroupProps ? inputGroupProps.size : props.size;
-    });
-    const shapeComputed = computed(() => {
-      return innerButtonGroup.value && buttonGroupProps ? buttonGroupProps.shape : innerInputGroup.value && inputGroupProps ? inputGroupProps.shape : props.shape;
-    });
-    const disabledComputed = computed(() => {
-      return innerButtonGroup.value && buttonGroupProps ? buttonGroupProps.disabled || props.disabled : innerInputGroup.value && inputGroupProps ? inputGroupProps.disabled || props.disabled : props.disabled;
-    });
-    const loadingComputed = computed(() => {
-      return innerButtonGroup.value && buttonGroupProps ? buttonGroupProps.loading || props.loading : props.loading;
-    });
-    const slots = useSlots();
-    const hoverFlag = ref(false);
-    const activeFlag = ref(false);
-    const toggleHover = (value) => {
-      hoverFlag.value = value;
-    };
-    const toggleActive = (value) => {
-      activeFlag.value = value;
-    };
-    const darkMode = useDarkMode();
-    const canvasRef = shallowRef(null);
-    const buttonRef = shallowRef(null);
-    onMounted(() => {
-      nextTick(() => {
-        drawPixel();
-      });
-    });
-    const palette = computed(() => {
-      if (!props.color) return null;
-      const color = parseColor(props.color);
-      const palette2 = generatePalette(color.r, color.g, color.b, color.a, darkMode.value);
-      return palette2;
-    });
-    const textColor = computed(() => {
-      return getTextColorWithPalette(
-        palette.value,
-        typeComputed.value,
-        disabledComputed.value,
-        loadingComputed.value,
-        hoverFlag.value,
-        activeFlag.value
-      );
-    });
-    watch(
-      [
-        borderRadiusComputed,
-        shapeComputed,
-        disabledComputed,
-        loadingComputed,
-        typeComputed,
-        () => props.theme,
-        palette,
-        hoverFlag,
-        activeFlag,
-        darkMode
-      ],
-      () => {
-        drawPixel();
-      }
-    );
-    watch([first, last], () => {
-      drawPixel();
-    });
-    const drawPixel = () => {
-      const preprocessData = canvasPreprocess(buttonRef, canvasRef);
-      if (!preprocessData) {
-        return;
-      }
-      const pixelSize = calcPixelSize();
-      const { ctx, width, height, canvas } = preprocessData;
-      const borderRadius = getBorderRadius(
-        canvas,
-        pixelSize,
-        borderRadiusComputed.value,
-        shapeComputed.value,
-        sizeComputed.value || "medium",
-        innerButtonGroup.value || innerInputGroup.value,
-        first.value,
-        last.value
-      );
-      const borderColor = getBorderColor(
-        disabledComputed.value,
-        loadingComputed.value,
-        typeComputed.value,
-        props.theme,
-        palette.value,
-        hoverFlag.value,
-        activeFlag.value
-      );
-      const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
-      const rad = BORDER_CORNER_RAD_RANGE;
-      if (typeComputed.value === "primary") {
-        drawGradient(
-          ctx,
-          width,
-          height,
-          center,
-          borderRadius,
-          rad,
-          pixelSize,
-          disabledComputed.value,
-          loadingComputed.value,
-          props.theme,
-          palette.value,
-          innerButtonGroup.value || innerInputGroup.value,
-          first.value,
-          last.value,
-          hoverFlag.value,
-          activeFlag.value
-        );
-      }
-      drawBorder(
-        ctx,
-        width,
-        height,
-        center,
-        borderRadius,
-        rad,
-        borderColor,
-        pixelSize,
-        typeComputed.value,
-        innerButtonGroup.value || innerInputGroup.value,
-        first.value,
-        last.value
-      );
-      const backgroundColor = getBackgroundColor(
-        disabledComputed.value,
-        loadingComputed.value,
-        typeComputed.value,
-        props.theme,
-        palette.value,
-        hoverFlag.value,
-        activeFlag.value
-      );
-      floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
-    };
-    useResizeObserver(buttonRef, drawPixel);
-    useWatchGlobalCssVal(drawPixel);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("button", {
-        disabled: disabledComputed.value || loadingComputed.value,
-        class: normalizeClass(["pixelium px-button", {
-          "px-button__block": !(innerButtonGroup.value || innerInputGroup.value) && !!props.block,
-          "px-button__circle": shapeComputed.value === "circle",
-          "px-button__square": shapeComputed.value === "square",
-          "px-button__loading": loadingComputed.value,
-          "px-button__large": sizeComputed.value === "large",
-          "px-button__small": sizeComputed.value === "small",
-          "px-button__outline": typeComputed.value === "outline",
-          "px-button__plain": typeComputed.value === "plain",
-          "px-button__text": typeComputed.value === "text",
-          "px-button__disabled": disabledComputed.value,
-          "px-button__custom": palette.value,
-          "px-button__inner": innerButtonGroup.value || innerInputGroup.value,
-          [`px-button__${props.theme || "primary"}`]: true
-        }]),
-        style: normalizeStyle({
-          color: textColor.value
-        }),
-        ref_key: "buttonRef",
-        ref: buttonRef,
-        onMouseenter: _cache[0] || (_cache[0] = ($event) => toggleHover(true)),
-        onMouseleave: _cache[1] || (_cache[1] = ($event) => toggleHover(false)),
-        onMousedown: _cache[2] || (_cache[2] = ($event) => toggleActive(true)),
-        onMouseup: _cache[3] || (_cache[3] = ($event) => toggleActive(false)),
-        type: props.nativeType,
-        autofocus: props.autofocus
-      }, [
-        createElementVNode(
-          "canvas",
-          {
-            ref_key: "canvasRef",
-            ref: canvasRef,
-            class: "px-button-canvas"
-          },
-          null,
-          512
-          /* NEED_PATCH */
-        ),
-        unref(slots).icon || loadingComputed.value ? (openBlock(), createElementBlock(
-          "div",
-          {
-            key: 0,
-            class: normalizeClass(["px-button-icon-wrapper", {
-              "px-button-icon-wrapper__last": !unref(slots).default
-            }])
-          },
-          [
-            loadingComputed.value ? (openBlock(), createBlock(unref(SpinnerThirdSolid), {
-              key: 0,
-              class: "px-button-icon px-animation__loading",
-              style: normalizeStyle({
-                fill: textColor.value
-              })
-            }, null, 8, ["style"])) : renderSlot(_ctx.$slots, "icon", { key: 1 })
-          ],
-          2
-          /* CLASS */
-        )) : createCommentVNode("v-if", true),
-        renderSlot(_ctx.$slots, "default")
-      ], 46, _hoisted_1);
-    };
-  }
+import { V as spinner_third_solid_default } from "../vendor.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, t as generatePalette } from "../share/util/color.js";
+import { a as getTextColorWithPalette, i as getBorderColor, n as drawGradient, r as getBackgroundColor, t as drawBorder } from "./draw.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, t as BUTTON_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 { a as FORM_PROVIDE, i as FORM_ITEM_PROVIDE, s as INPUT_GROUP_PROVIDE, t as BUTTON_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 { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, inject, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, shallowRef, unref, useId, useSlots, watch } from "vue";
+var _hoisted_1 = [
+	"disabled",
+	"type",
+	"autofocus"
+];
+var button_default = /* @__PURE__ */ defineComponent({
+	name: "Button",
+	__name: "index",
+	props: {
+		borderRadius: null,
+		shape: null,
+		size: null,
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		loading: {
+			type: Boolean,
+			default: false
+		},
+		variant: null,
+		theme: null,
+		color: null,
+		block: {
+			type: Boolean,
+			default: false
+		},
+		nativeType: { default: "button" },
+		autofocus: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(__props) {
+		var _instance$parent, _instance$parent2;
+		const props = __props;
+		const instance = getCurrentInstance();
+		const innerButtonGroup = ref((instance === null || instance === void 0 || (_instance$parent = instance.parent) === null || _instance$parent === void 0 ? void 0 : _instance$parent.type.name) === "ButtonGroup");
+		const innerInputGroup = ref((instance === null || instance === void 0 || (_instance$parent2 = instance.parent) === null || _instance$parent2 === void 0 ? void 0 : _instance$parent2.type.name) === "InputGroup");
+		const [index, first, last] = innerButtonGroup.value ? useIndexOfChildren(BUTTON_GROUP_UPDATE) : innerInputGroup.value ? useIndexOfChildren(INPUT_GROUP_UPDATE) : [
+			ref(0),
+			ref(false),
+			ref(false)
+		];
+		const buttonGroupProvide = inject(BUTTON_GROUP_PROVIDE, void 0);
+		const inputGroupProvide = inject(INPUT_GROUP_PROVIDE, void 0);
+		const formProps = inject(FORM_PROVIDE, void 0);
+		const formItemProvide = inject(FORM_ITEM_PROVIDE, void 0);
+		const borderRadiusComputed = createProvideComputed("borderRadius", [
+			innerButtonGroup.value && buttonGroupProvide,
+			innerInputGroup.value && inputGroupProvide,
+			props
+		]);
+		const typeComputed = createProvideComputed("variant", [innerButtonGroup.value && buttonGroupProvide, props], "nullish", (val) => val || "primary");
+		const sizeComputed = createProvideComputed("size", () => [
+			innerButtonGroup.value && buttonGroupProvide,
+			innerInputGroup.value && inputGroupProvide,
+			props.size && props,
+			formItemProvide,
+			formProps,
+			props
+		], "nullish", (val) => val || "medium");
+		const shapeComputed = createProvideComputed("shape", [
+			innerButtonGroup.value && buttonGroupProvide,
+			innerInputGroup.value && inputGroupProvide,
+			props
+		], "nullish", (val) => val || "rect");
+		const themeComputed = createProvideComputed("theme", [innerButtonGroup.value && buttonGroupProvide, props], "nullish", (val) => val || "primary");
+		const disabledComputed = createProvideComputed("disabled", [
+			innerButtonGroup.value && buttonGroupProvide,
+			innerInputGroup.value && inputGroupProvide,
+			formItemProvide,
+			formProps,
+			props
+		], (pre, value, cur) => {
+			return pre || value || "readonly" in cur && cur["readonly"].value;
+		});
+		const loadingComputed = createProvideComputed("loading", [innerButtonGroup.value && buttonGroupProvide, props], "or");
+		const slots = useSlots();
+		const hoverFlag = ref(false);
+		const activeFlag = ref(false);
+		const toggleHover = (value) => {
+			hoverFlag.value = value;
+		};
+		const toggleActive = (value) => {
+			activeFlag.value = value;
+		};
+		const darkMode = useDarkMode();
+		const canvasRef = shallowRef(null);
+		const buttonRef = shallowRef(null);
+		const id = useId();
+		onMounted(() => {
+			nextTick(() => {
+				drawPixel();
+				if (innerButtonGroup.value) buttonGroupProvide === null || buttonGroupProvide === void 0 || buttonGroupProvide.collectChildrenInfo({
+					id,
+					variant: typeComputed.value,
+					index: index.value
+				});
+				if (innerInputGroup.value) inputGroupProvide === null || inputGroupProvide === void 0 || inputGroupProvide.collectChildrenInfo({
+					id,
+					variant: typeComputed.value,
+					index: index.value
+				});
+			});
+		});
+		onBeforeUnmount(() => {
+			if (innerButtonGroup.value) buttonGroupProvide === null || buttonGroupProvide === void 0 || buttonGroupProvide.removeChildrenInfo(id);
+			if (innerInputGroup.value) inputGroupProvide === null || inputGroupProvide === void 0 || inputGroupProvide.removeChildrenInfo(id);
+		});
+		watch([typeComputed, index], () => {
+			if (innerButtonGroup.value) buttonGroupProvide === null || buttonGroupProvide === void 0 || buttonGroupProvide.collectChildrenInfo({
+				id,
+				variant: typeComputed.value,
+				index: index.value
+			});
+			if (innerInputGroup.value) inputGroupProvide === null || inputGroupProvide === void 0 || inputGroupProvide.collectChildrenInfo({
+				id,
+				variant: typeComputed.value,
+				index: index.value
+			});
+		});
+		const nextIsTextButton = computed(() => {
+			if (index.value >= 0) {
+				var _buttonGroupProvide$c, _inputGroupProvide$ch;
+				return innerButtonGroup.value ? !!((buttonGroupProvide === null || buttonGroupProvide === void 0 || (_buttonGroupProvide$c = buttonGroupProvide.childrenInfo.value.find((e) => e.index === index.value + 1)) === null || _buttonGroupProvide$c === void 0 ? void 0 : _buttonGroupProvide$c.variant) === "text") : 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 palette = computed(() => {
+			if (!props.color) return null;
+			const color = parseColor(props.color);
+			if (!color) return null;
+			return generatePalette(color.r, color.g, color.b, color.a, darkMode.value);
+		});
+		const textColor = computed(() => {
+			return getTextColorWithPalette(palette.value, typeComputed.value, !!disabledComputed.value, !!loadingComputed.value, hoverFlag.value, activeFlag.value);
+		});
+		watch([
+			borderRadiusComputed,
+			shapeComputed,
+			disabledComputed,
+			loadingComputed,
+			typeComputed,
+			themeComputed,
+			palette,
+			hoverFlag,
+			activeFlag,
+			darkMode,
+			nextIsTextButton
+		], () => {
+			drawPixel();
+		});
+		watch([first, last], () => {
+			drawPixel();
+		});
+		const drawPixel = () => {
+			const preprocessData = canvasPreprocess(buttonRef, canvasRef);
+			if (!preprocessData) return;
+			const pixelSize = calcPixelSize();
+			const { ctx, width, height, canvas } = preprocessData;
+			const borderRadius = getBorderRadius(canvas, pixelSize, borderRadiusComputed.value, shapeComputed.value || "rect", sizeComputed.value || "medium", innerButtonGroup.value || innerInputGroup.value, first.value, last.value);
+			const borderColor = getBorderColor(!!disabledComputed.value, !!loadingComputed.value, typeComputed.value || "primary", themeComputed.value || "primary", palette.value, hoverFlag.value, activeFlag.value);
+			const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
+			const rad = BORDER_CORNER_RAD_RANGE;
+			if (!typeComputed.value || typeComputed.value === "primary") drawGradient(ctx, width, height, center, borderRadius, rad, pixelSize, !!disabledComputed.value, !!loadingComputed.value, themeComputed.value, palette.value, innerButtonGroup.value || innerInputGroup.value, first.value, last.value, hoverFlag.value, activeFlag.value);
+			if (borderColor) drawBorder(ctx, width, height, center, borderRadius, rad, borderColor, pixelSize, typeComputed.value || "primary", innerButtonGroup.value || innerInputGroup.value, first.value, last.value, nextIsTextButton.value);
+			const backgroundColor = getBackgroundColor(!!disabledComputed.value, !!loadingComputed.value, typeComputed.value || "primary", themeComputed.value || "primary", palette.value, hoverFlag.value, activeFlag.value);
+			if (backgroundColor) floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
+		};
+		useResizeObserver(buttonRef, drawPixel);
+		useWatchGlobalCssVal(drawPixel);
+		useTransitionEnd(buttonRef, drawPixel);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("button", {
+				disabled: unref(disabledComputed) || unref(loadingComputed),
+				class: normalizeClass(["pixelium px-button", {
+					"px-button__block": !(innerButtonGroup.value || innerInputGroup.value) && !!props.block,
+					[`px-button__${unref(shapeComputed)}`]: unref(shapeComputed),
+					"px-button__loading": unref(loadingComputed),
+					[`px-button__${unref(sizeComputed)}`]: unref(sizeComputed),
+					"px-button__outline": unref(typeComputed) === "outline",
+					"px-button__plain": unref(typeComputed) === "plain",
+					"px-button__text": unref(typeComputed) === "text",
+					"px-button__disabled": unref(disabledComputed),
+					"px-button__custom": palette.value,
+					"px-button__inner": innerButtonGroup.value || innerInputGroup.value,
+					[`px-button__${unref(themeComputed) || "primary"}`]: true
+				}]),
+				style: normalizeStyle({ color: textColor.value }),
+				ref_key: "buttonRef",
+				ref: buttonRef,
+				onMouseenter: _cache[0] || (_cache[0] = ($event) => toggleHover(true)),
+				onMouseleave: _cache[1] || (_cache[1] = ($event) => toggleHover(false)),
+				onMousedown: _cache[2] || (_cache[2] = ($event) => toggleActive(true)),
+				onMouseup: _cache[3] || (_cache[3] = ($event) => toggleActive(false)),
+				type: props.nativeType,
+				autofocus: props.autofocus
+			}, [
+				createElementVNode("canvas", {
+					ref_key: "canvasRef",
+					ref: canvasRef,
+					class: "px-button-canvas"
+				}, null, 512),
+				unref(slots).icon || unref(loadingComputed) ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					class: normalizeClass(["px-button-icon-wrapper", { "px-button-icon-wrapper__last": !unref(slots).default }])
+				}, [unref(loadingComputed) ? (openBlock(), createBlock(unref(spinner_third_solid_default), {
+					key: 0,
+					class: "px-button-icon px-animation__loading",
+					style: normalizeStyle({ fill: textColor.value })
+				}, null, 8, ["style"])) : renderSlot(_ctx.$slots, "icon", { key: 1 })], 2)) : createCommentVNode("v-if", true),
+				renderSlot(_ctx.$slots, "default")
+			], 46, _hoisted_1);
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { button_default as t };

package/es/button/type.d.ts

@@ -6,10 +6,10 @@ export type ButtonProps = {
      */
     borderRadius?: NumberOrPercentage | NumberOrPercentage[];
     /**
-     * @property {'default' | 'round' | 'circle' | 'square'} [shape='default']
-     * @version 0.0.0-beta
+     * @property {'rect' | 'round' | 'circle' | 'square'} [shape='rect']
+     * @version 0.0.3
      */
-    shape?: 'default' | 'round' | 'circle' | 'square';
+    shape?: 'rect' | 'round' | 'circle' | 'square' | 'default';
     /**
      * @property {'medium' | 'large' | 'small'} [size='medium']
      * @version 0.0.0-beta

package/es/button-group/index.css

@@ -1,7 +1,4 @@
 .px-button-group {
-  --padding-y-size: 6px;
-  --padding-x-size: 12px;
-  height: var(--button-size);
   display: inline-flex;
   align-items: center;
   position: relative;

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

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