@pixelium/web-vue 0.0.2 → 0.0.3-beta

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

package/es/input-number/index.css

@@ -1,13 +1,5 @@
-div.px-input-number {
-  font-size: var(--text-size);
-}
 .px-input-number {
   --input-number-size: var(--px-medium-size);
-  --px-medium-padding-x: var(--px-interval-2);
-  --px-large-padding-x: var(--px-interval-3);
-  --px-small-padding-x: var(--px-interval-2);
-  --padding-x-size: var(--px-medium-padding-x);
-  --text-size: var(--px-medium-font-size);
   z-index: 0;
   position: relative;
   background-color: transparent;
@@ -16,15 +8,9 @@ div.px-input-number {
   border-style: solid;
   color: var(--px-neutral-10);
   display: flex;
-  padding: 0 var(--padding-x-size);
   box-sizing: border-box;
   height: var(--input-number-size);
-}
-.px-input-number__inner {
-  padding-right: calc(var(--padding-x-size) + 1px + 1 * var(--px-bit));
-}
-.px-input-number__inner:last-child {
-  padding-right: var(--padding-x-size);
+  transition: 0.25s;
 }
 .px-input-number-inner {
   height: 100%;
@@ -32,8 +18,7 @@ div.px-input-number {
   background-color: transparent;
   box-sizing: border-box;
   width: 100%;
-  font-size: var(--text-size);
-  line-height: var(--px-line-height);
+  line-height: 1.5;
   font-family: var(--px-font);
   padding: 0;
 }
@@ -49,14 +34,94 @@ div.px-input-number {
   opacity: 1;
 }
 .px-input-number__large {
-  --padding-x-size: var(--px-large-padding-x);
-  --text-size: var(--px-large-font-size);
   --input-number-size: var(--px-large-size);
 }
 .px-input-number__small {
-  --padding-x-size: var(--px-small-padding-x);
   --input-number-size: var(--px-small-size);
-  --text-size: var(--px-small-font-size);
+}
+.px-input-number.px-input-number__small {
+  padding-right: 8px;
+  padding-left: 8px;
+  font-size: 12px;
+}
+.px-input-number.px-input-number__small .px-input-number-inner {
+  font-size: 12px;
+}
+.px-input-number.px-input-number__small.px-input-number__inner {
+  padding-right: calc(8px + 1px + 1 * var(--px-bit));
+}
+.px-input-number.px-input-number__small.px-input-number__inner:last-child {
+  padding-right: 8px;
+}
+.px-input-number.px-input-number__small .px-input-number-close-wrapper .px-input-number-icon-placeholder {
+  width: 12px;
+  height: 12px;
+}
+.px-input-number.px-input-number__small .px-input-number-close-wrapper .px-input-number-icon {
+  width: 12px;
+  height: 12px;
+}
+.px-input-number.px-input-number__small .px-input-number-setting-prefix-wrapper .px-input-number-icon,
+.px-input-number.px-input-number__small .px-input-number-setting-suffix-wrapper .px-input-number-icon,
+.px-input-number.px-input-number__small .px-input-number-loading-wrapper .px-input-number-icon {
+  width: 12px;
+  height: 12px;
+}
+.px-input-number.px-input-number__medium {
+  padding-right: 8px;
+  padding-left: 8px;
+  font-size: 14px;
+}
+.px-input-number.px-input-number__medium .px-input-number-inner {
+  font-size: 14px;
+}
+.px-input-number.px-input-number__medium.px-input-number__inner {
+  padding-right: calc(8px + 1px + 1 * var(--px-bit));
+}
+.px-input-number.px-input-number__medium.px-input-number__inner:last-child {
+  padding-right: 8px;
+}
+.px-input-number.px-input-number__medium .px-input-number-close-wrapper .px-input-number-icon-placeholder {
+  width: 14px;
+  height: 14px;
+}
+.px-input-number.px-input-number__medium .px-input-number-close-wrapper .px-input-number-icon {
+  width: 14px;
+  height: 14px;
+}
+.px-input-number.px-input-number__medium .px-input-number-setting-prefix-wrapper .px-input-number-icon,
+.px-input-number.px-input-number__medium .px-input-number-setting-suffix-wrapper .px-input-number-icon,
+.px-input-number.px-input-number__medium .px-input-number-loading-wrapper .px-input-number-icon {
+  width: 14px;
+  height: 14px;
+}
+.px-input-number.px-input-number__large {
+  padding-right: 12px;
+  padding-left: 12px;
+  font-size: 15px;
+}
+.px-input-number.px-input-number__large .px-input-number-inner {
+  font-size: 15px;
+}
+.px-input-number.px-input-number__large.px-input-number__inner {
+  padding-right: calc(12px + 1px + 1 * var(--px-bit));
+}
+.px-input-number.px-input-number__large.px-input-number__inner:last-child {
+  padding-right: 12px;
+}
+.px-input-number.px-input-number__large .px-input-number-close-wrapper .px-input-number-icon-placeholder {
+  width: 15px;
+  height: 15px;
+}
+.px-input-number.px-input-number__large .px-input-number-close-wrapper .px-input-number-icon {
+  width: 15px;
+  height: 15px;
+}
+.px-input-number.px-input-number__large .px-input-number-setting-prefix-wrapper .px-input-number-icon,
+.px-input-number.px-input-number__large .px-input-number-setting-suffix-wrapper .px-input-number-icon,
+.px-input-number.px-input-number__large .px-input-number-loading-wrapper .px-input-number-icon {
+  width: 15px;
+  height: 15px;
 }
 .px-input-number__disabled {
   cursor: not-allowed;
@@ -77,21 +142,15 @@ div.px-input-number {
 }
 .px-input-number-setting-prefix-wrapper,
 .px-input-number-prefix-wrapper {
-  margin-right: var(--px-interval-2);
+  margin-right: 8px;
 }
 .px-input-number-setting-suffix-wrapper,
 .px-input-number-suffix-wrapper,
 .px-input-number-loading-wrapper,
 .px-input-number-close-wrapper {
-  margin-left: var(--px-interval-2);
-}
-.px-input-number-close-wrapper .px-input-number-icon-placeholder {
-  width: var(--text-size);
-  height: var(--text-size);
+  margin-left: 8px;
 }
 .px-input-number-close-wrapper .px-input-number-icon {
-  width: var(--text-size);
-  height: var(--text-size);
   cursor: pointer;
   fill: var(--px-neutral-8);
   transition: 0.25s;
@@ -103,8 +162,6 @@ div.px-input-number {
   fill: var(--px-neutral-9);
 }
 .px-input-number-loading-wrapper .px-input-number-icon {
-  width: var(--text-size);
-  height: var(--text-size);
   fill: var(--px-primary-6);
 }
 .px-input-number-prefix-wrapper,
@@ -114,11 +171,9 @@ div.px-input-number {
 .px-input-number-setting-prefix-wrapper .px-input-number-icon,
 .px-input-number-setting-suffix-wrapper .px-input-number-icon {
   cursor: pointer;
-  width: var(--text-size);
-  height: var(--text-size);
   fill: var(--px-neutral-8);
   transition: 0.25s;
-  margin-right: var(--px-interval-2);
+  margin-right: 8px;
 }
 .px-input-number-setting-prefix-wrapper .px-input-number-icon:hover,
 .px-input-number-setting-suffix-wrapper .px-input-number-icon:hover {
@@ -144,7 +199,7 @@ div.px-input-number {
 .px-input-number-setting-prefix-wrapper__reverse .px-input-number-icon,
 .px-input-number-setting-suffix-wrapper__reverse .px-input-number-icon {
   margin-right: 0;
-  margin-left: var(--px-interval-2);
+  margin-left: 8px;
 }
 .px-input-number-setting-prefix-wrapper__reverse .px-input-number-icon:last-of-type,
 .px-input-number-setting-suffix-wrapper__reverse .px-input-number-icon:last-of-type {

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

@@ -1,35 +1,28 @@
-import type { InputNumberProps } from './type';
-declare var __VLS_1: {}, __VLS_52: {};
+import type { InputNumberExpose, InputNumberProps } from './type';
+declare var __VLS_1: {}, __VLS_60: {};
 type __VLS_Slots = {} & {
     prefix?: (props: typeof __VLS_1) => any;
 } & {
-    suffix?: (props: typeof __VLS_52) => any;
+    suffix?: (props: typeof __VLS_60) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<InputNumberProps, {
-    focus: () => void;
-    blur: () => void;
-    clear: () => Promise<void>;
-    select: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    input: (value: number, e: Event) => any;
-    change: (value: number, e?: Event | undefined) => any;
+declare const __VLS_component: import("vue").DefineComponent<InputNumberProps, InputNumberExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: (value: number) => any;
+    change: (value: number, e?: Event | undefined) => any;
     blur: (e: FocusEvent) => any;
+    input: (value: number, e: Event) => any;
     focus: (e: FocusEvent) => any;
     "update:modelValue": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<InputNumberProps> & Readonly<{
-    onInput?: ((value: number, e: Event) => any) | undefined;
-    onChange?: ((value: number, e?: Event | undefined) => any) | undefined;
     onClear?: ((value: number) => any) | undefined;
+    onChange?: ((value: number, e?: Event | undefined) => any) | undefined;
     onBlur?: ((e: FocusEvent) => any) | undefined;
+    onInput?: ((value: number, e: Event) => any) | undefined;
     onFocus?: ((e: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
-    shape: "default" | "round";
-    size: "medium" | "large" | "small";
     disabled: boolean;
-    loading: boolean;
     readonly: boolean;
+    loading: boolean;
     clearable: boolean;
     status: "success" | "warning" | "error" | "normal";
     max: number;