@pixelium/web-vue 0.0.2 → 0.0.3-beta

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

@@ -82,10 +82,10 @@ export type InputNumberProps = {
      */
     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-tag/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-tag/draw.js

@@ -1,49 +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]) {
-    const width2 = inner && !last ? center[1][0] - center[0][0] + pixelSize / 2 + 1 : center[1][0] - center[0][0] + pixelSize;
-    ctx.fillRect(center[0][0], 0, width2, 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) {
-    const width2 = inner && !last ? center[2][0] - center[3][0] + pixelSize / 2 : center[2][0] - center[3][0] + pixelSize;
-    ctx.fillRect(center[3][0], height - pixelSize, width2, 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 / 2 + 1, 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-tag/index.css

@@ -1,13 +1,5 @@
-div.px-input-tag {
-  font-size: var(--text-size);
-}
 .px-input-tag {
   --input-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,37 +8,124 @@ div.px-input-tag {
   border-style: solid;
   color: var(--px-neutral-10);
   display: flex;
-  padding: 0 var(--padding-x-size);
   box-sizing: border-box;
   cursor: text;
+  transition: 0.25s;
+}
+.px-input-tag.px-input-tag__small {
+  padding-right: 8px;
+  padding-left: 8px;
+  font-size: 12px;
+}
+.px-input-tag.px-input-tag__small .px-input-tag-inner {
+  font-size: 12px;
+}
+.px-input-tag.px-input-tag__small.px-input-tag__inner {
+  padding-right: calc(8px + 1px + 1 * var(--px-bit));
+}
+.px-input-tag.px-input-tag__small.px-input-tag__inner:last-child {
+  padding-right: 8px;
+}
+.px-input-tag.px-input-tag__small .px-input-tag-content {
+  min-height: 20px;
+}
+.px-input-tag.px-input-tag__small .px-input-tag-inner {
+  height: 20px;
+}
+.px-input-tag.px-input-tag__small .px-input-tag-close-wrapper .px-input-tag-icon-placeholder {
+  width: 12px;
+  height: 12px;
+}
+.px-input-tag.px-input-tag__small .px-input-tag-close-wrapper .px-input-tag-icon {
+  width: 12px;
+  height: 12px;
+}
+.px-input-tag.px-input-tag__small .px-input-tag-loading-wrapper .px-input-tag-icon {
+  width: 12px;
+  height: 12px;
+}
+.px-input-tag.px-input-tag__medium {
+  padding-right: 8px;
+  padding-left: 8px;
+  font-size: 14px;
+}
+.px-input-tag.px-input-tag__medium .px-input-tag-inner {
+  font-size: 14px;
+}
+.px-input-tag.px-input-tag__medium.px-input-tag__inner {
+  padding-right: calc(8px + 1px + 1 * var(--px-bit));
 }
-.px-input-tag__inner {
-  padding-right: calc(var(--padding-x-size) + 1px + 1 * var(--px-bit));
+.px-input-tag.px-input-tag__medium.px-input-tag__inner:last-child {
+  padding-right: 8px;
 }
-.px-input-tag__inner:last-child {
-  padding-right: var(--padding-x-size);
+.px-input-tag.px-input-tag__medium .px-input-tag-content {
+  min-height: 28px;
+}
+.px-input-tag.px-input-tag__medium .px-input-tag-inner {
+  height: 28px;
+}
+.px-input-tag.px-input-tag__medium .px-input-tag-close-wrapper .px-input-tag-icon-placeholder {
+  width: 14px;
+  height: 14px;
+}
+.px-input-tag.px-input-tag__medium .px-input-tag-close-wrapper .px-input-tag-icon {
+  width: 14px;
+  height: 14px;
+}
+.px-input-tag.px-input-tag__medium .px-input-tag-loading-wrapper .px-input-tag-icon {
+  width: 14px;
+  height: 14px;
+}
+.px-input-tag.px-input-tag__large {
+  padding-right: 12px;
+  padding-left: 12px;
+  font-size: 15px;
+}
+.px-input-tag.px-input-tag__large .px-input-tag-inner {
+  font-size: 15px;
+}
+.px-input-tag.px-input-tag__large.px-input-tag__inner {
+  padding-right: calc(12px + 1px + 1 * var(--px-bit));
+}
+.px-input-tag.px-input-tag__large.px-input-tag__inner:last-child {
+  padding-right: 12px;
+}
+.px-input-tag.px-input-tag__large .px-input-tag-content {
+  min-height: 36px;
+}
+.px-input-tag.px-input-tag__large .px-input-tag-inner {
+  height: 36px;
+}
+.px-input-tag.px-input-tag__large .px-input-tag-close-wrapper .px-input-tag-icon-placeholder {
+  width: 15px;
+  height: 15px;
+}
+.px-input-tag.px-input-tag__large .px-input-tag-close-wrapper .px-input-tag-icon {
+  width: 15px;
+  height: 15px;
+}
+.px-input-tag.px-input-tag__large .px-input-tag-loading-wrapper .px-input-tag-icon {
+  width: 15px;
+  height: 15px;
 }
 .px-input-tag-content {
-  min-height: calc(var(--input-size) - var(--px-bit) * 2);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   width: 100%;
 }
 .px-input-tag-content .px-tag {
-  margin-right: var(--px-interval-2);
+  margin-right: 8px;
   margin-top: 1px;
   margin-bottom: 1px;
 }
 .px-input-tag-inner {
-  height: calc(var(--input-size) - var(--px-bit) * 2);
   border: 0;
   background-color: transparent;
   box-sizing: border-box;
   flex: 1;
-  font-size: var(--text-size);
-  line-height: var(--px-line-height);
-  font-family: 'Fusion Pixel Zh_hans', sans-serif;
+  line-height: 1.5;
+  font-family: var(--px-font);
   padding: 0;
 }
 .px-input-tag-inner:focus-visible {
@@ -61,14 +140,10 @@ div.px-input-tag {
   opacity: 1;
 }
 .px-input-tag__large {
-  --padding-x-size: var(--px-large-padding-x);
-  --text-size: var(--px-large-font-size);
   --input-size: var(--px-large-size);
 }
 .px-input-tag__small {
-  --padding-x-size: var(--px-small-padding-x);
   --input-size: var(--px-small-size);
-  --text-size: var(--px-small-font-size);
 }
 .px-input-tag__small .px-input-tag-content .px-tag {
   margin-top: 0px;
@@ -90,20 +165,14 @@ div.px-input-tag {
   align-items: center;
 }
 .px-input-tag-prefix-wrapper {
-  margin-right: var(--px-interval-2);
+  margin-right: 8px;
 }
 .px-input-tag-suffix-wrapper,
 .px-input-tag-loading-wrapper,
 .px-input-tag-close-wrapper {
-  margin-left: var(--px-interval-2);
-}
-.px-input-tag-close-wrapper .px-input-tag-icon-placeholder {
-  width: var(--text-size);
-  height: var(--text-size);
+  margin-left: 8px;
 }
 .px-input-tag-close-wrapper .px-input-tag-icon {
-  width: var(--text-size);
-  height: var(--text-size);
   cursor: pointer;
   fill: var(--px-neutral-8);
   transition: 0.25s;
@@ -115,8 +184,6 @@ div.px-input-tag {
   fill: var(--px-neutral-9);
 }
 .px-input-tag-loading-wrapper .px-input-tag-icon {
-  width: var(--text-size);
-  height: var(--text-size);
   fill: var(--px-primary-6);
 }
 .px-input-tag-prefix-wrapper,

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

@@ -1,4 +1,4 @@
-import type { InputTagProps } from './type';
+import type { InputTagExpose, InputTagProps } from './type';
 declare var __VLS_1: {}, __VLS_10: {
     tag: string;
     index: number;
@@ -25,15 +25,11 @@ type __VLS_Slots = {} & {
 } & {
     suffix?: (props: typeof __VLS_51) => any;
 };
-declare const __VLS_component: import("vue").DefineComponent<InputTagProps, {
-    focus: () => void;
-    blur: () => void;
-    clear: () => Promise<void>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    input: (value: string, e: Event) => any;
-    change: (value: string[]) => any;
+declare const __VLS_component: import("vue").DefineComponent<InputTagProps, InputTagExpose, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     clear: (value: string[]) => any;
+    change: (value: string[]) => any;
     blur: (e: FocusEvent) => any;
+    input: (value: string, e: Event) => any;
     focus: (e: FocusEvent) => any;
     "update:modelValue": (value: string[]) => any;
     tagAdd: (value: string, e: KeyboardEvent) => any;
@@ -41,10 +37,10 @@ declare const __VLS_component: import("vue").DefineComponent<InputTagProps, {
     "update:inputValue": (value: string) => any;
     inputChange: (value: string, e?: Event | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<InputTagProps> & Readonly<{
-    onInput?: ((value: string, e: Event) => any) | undefined;
-    onChange?: ((value: string[]) => any) | undefined;
     onClear?: ((value: string[]) => any) | undefined;
+    onChange?: ((value: string[]) => any) | undefined;
     onBlur?: ((e: FocusEvent) => any) | undefined;
+    onInput?: ((value: string, e: Event) => any) | undefined;
     onFocus?: ((e: FocusEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
     onTagAdd?: ((value: string, e: KeyboardEvent) => any) | undefined;
@@ -52,11 +48,9 @@ declare const __VLS_component: import("vue").DefineComponent<InputTagProps, {
     "onUpdate:inputValue"?: ((value: string) => any) | undefined;
     onInputChange?: ((value: string, e?: Event | undefined) => any) | undefined;
 }>, {
-    shape: "default" | "round";
-    size: "medium" | "large" | "small";
     disabled: boolean;
-    loading: boolean;
     readonly: boolean;
+    loading: boolean;
     clearable: boolean;
     status: "success" | "warning" | "error" | "normal";
     collapseTags: boolean;