@pixelium/web-vue 0.0.2 → 0.0.3-beta

package/es/switch/type.d.ts

@@ -0,0 +1,133 @@
+export type SwitchProps = {
+    /**
+     * @property {boolean | null} [modelValue=undefined]
+     * @version 0.0.3
+     */
+    modelValue?: boolean | null;
+    /**
+     * @property {boolean | null} [defaultValue=undefined]
+     * @version 0.0.3
+     */
+    defaultValue?: boolean | null;
+    /**
+     * @property {'round' | 'rect'} [shape='round']
+     * @version 0.0.3
+     */
+    shape?: 'round' | 'rect' | 'default';
+    /**
+     * @property {'small' | 'medium' | 'large'} [size='medium']
+     * @version 0.0.3
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * @property {boolean} [readonly=false]
+     * @version 0.0.3
+     */
+    readonly?: boolean;
+    /**
+     * @property {boolean} [disabled=false]
+     * @version 0.0.3
+     */
+    disabled?: boolean;
+    /**
+     * @property {boolean} [loading=false]
+     * @version 0.0.3
+     */
+    loading?: boolean;
+    /**
+     * @property {string} [activeTip]
+     * @version 0.0.3
+     */
+    activeTip?: string;
+    /**
+     * @property {string} [inactiveTip]
+     * @version 0.0.3
+     */
+    inactiveTip?: string;
+    /**
+     * @property {string} [activeLabel]
+     * @version 0.0.3
+     */
+    activeLabel?: string;
+    /**
+     * @property {string} [inactiveLabel]
+     * @version 0.0.3
+     */
+    inactiveLabel?: string;
+    /**
+     * @property {string} [activeColor]
+     * @version 0.0.3
+     */
+    activeColor?: string;
+    /**
+     * @property {string} [inactiveColor]
+     * @version 0.0.3
+     */
+    inactiveColor?: string;
+};
+export type SwitchEvents = {
+    /**
+     * @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
+     * @version 0.0.3
+     * @param {FocusEvent} event
+     */
+    focus: [event: FocusEvent];
+    /**
+     * @event blur
+     * @version 0.0.3
+     * @param {FocusEvent} event
+     */
+    blur: [event: FocusEvent];
+};
+export type SwitchSlots = {
+    /**
+     * @slot active-tip
+     * @version 0.0.3
+     */
+    'active-tip': {};
+    /**
+     * @slot inactive-tip
+     * @version 0.0.3
+     */
+    'inactive-tip': {};
+    /**
+     * @slot active-label
+     * @version 0.0.3
+     */
+    'active-label': {};
+    /**
+     * @slot inactive-label
+     * @version 0.0.3
+     */
+    'inactive-label': {};
+    /**
+     * @slot active-icon
+     * @version 0.0.3
+     */
+    'active-icon': {};
+    /**
+     * @slot inactive-icon
+     * @version 0.0.3
+     */
+    'inactive-icon': {};
+};

package/es/tag/draw.d.ts

@@ -1,6 +1,6 @@
 import type { RgbaColor } from '../share/type';
 import type { TagProps } from './type';
-export declare function getBackgroundColor(disabled: boolean, type: TagProps['variant'], theme: TagProps['theme'], palette: RgbaColor[] | null): RgbaColor;
-export declare function getBorderColor(disabled: boolean, type: TagProps['variant'], theme: TagProps['theme'], palette: RgbaColor[] | null): RgbaColor;
+export declare function getBackgroundColor(disabled: boolean, type: TagProps['variant'], theme: TagProps['theme'], palette: RgbaColor[] | null): RgbaColor | null;
+export declare function getBorderColor(disabled: boolean, type: TagProps['variant'], theme: TagProps['theme'], palette: RgbaColor[] | null): RgbaColor | null;
 export declare const drawBorder: (ctx: CanvasRenderingContext2D, width: number, height: number, center: [number, number][], borderRadius: number[], rad: [number, number][], borderColor: RgbaColor, pixelSize: number) => void;
 export declare const getTextColorWithPalette: (palette: RgbaColor[] | null, type: TagProps["variant"], disabled: boolean) => string | undefined;

package/es/tag/draw.js

@@ -1,135 +1,88 @@
-import { T as TRANSPARENT_RGBA_COLOR_OBJECT } from "../share/const/index.js";
-import { r as rgbaColor2string, g as getGlobalThemeColor } from "../share/util/color.js";
-import { d as drawCircle } from "../share/util/plot.js";
+import { l as TRANSPARENT_RGBA_COLOR_OBJECT } from "../share/const/index.js";
+import { a as drawCircle } from "../share/util/plot.js";
+import { a as rgbaColor2string, n as getGlobalThemeColor } from "../share/util/color.js";
 function getBackgroundColor(disabled, type, theme = "primary", palette) {
-  if (palette) {
-    switch (type) {
-      case "outline":
-        return TRANSPARENT_RGBA_COLOR_OBJECT;
-      case "plain":
-        if (disabled) return palette[0];
-        return palette[0];
-      default:
-        if (disabled) return palette[1];
-        return palette[5];
-    }
-  } else if (theme !== "info") {
-    switch (type) {
-      case "outline":
-        return TRANSPARENT_RGBA_COLOR_OBJECT;
-      case "plain":
-        if (disabled) return getGlobalThemeColor(theme, 1);
-        return getGlobalThemeColor(theme, 1);
-      default:
-        if (disabled) return getGlobalThemeColor(theme, 2);
-        return getGlobalThemeColor(theme, 6);
-    }
-  } else {
-    switch (type) {
-      case "outline":
-        return TRANSPARENT_RGBA_COLOR_OBJECT;
-      case "plain":
-        if (disabled) return getGlobalThemeColor("neutral", 1);
-        return getGlobalThemeColor("neutral", 1);
-      default:
-        if (disabled) return getGlobalThemeColor("neutral", 7);
-        return getGlobalThemeColor("neutral", 8);
-    }
-  }
+	if (palette) switch (type) {
+		case "outline": return TRANSPARENT_RGBA_COLOR_OBJECT;
+		case "plain":
+			if (disabled) return palette[0];
+			return palette[0];
+		default:
+			if (disabled) return palette[1];
+			return palette[5];
+	}
+	else if (theme !== "info") switch (type) {
+		case "outline": return TRANSPARENT_RGBA_COLOR_OBJECT;
+		case "plain":
+			if (disabled) return getGlobalThemeColor(theme, 1);
+			return getGlobalThemeColor(theme, 1);
+		default:
+			if (disabled) return getGlobalThemeColor(theme, 2);
+			return getGlobalThemeColor(theme, 6);
+	}
+	else switch (type) {
+		case "outline": return TRANSPARENT_RGBA_COLOR_OBJECT;
+		case "plain":
+			if (disabled) return getGlobalThemeColor("neutral", 1);
+			return getGlobalThemeColor("neutral", 1);
+		default:
+			if (disabled) return getGlobalThemeColor("neutral", 7);
+			return getGlobalThemeColor("neutral", 8);
+	}
 }
 function getBorderColor(disabled, type, theme = "primary", palette) {
-  if (palette) {
-    switch (type) {
-      case "plain":
-        if (disabled) return palette[1];
-        return palette[1];
-      case "outline":
-        if (disabled) return palette[0];
-        return palette[5];
-      default:
-        if (disabled) return palette[0];
-        return palette[4];
-    }
-  } else if (theme !== "info") {
-    switch (type) {
-      case "plain":
-        if (disabled) return getGlobalThemeColor(theme, 2);
-        return getGlobalThemeColor(theme, 2);
-      case "outline":
-        if (disabled) return getGlobalThemeColor(theme, 1);
-        return getGlobalThemeColor(theme, 6);
-      default:
-        if (disabled) return getGlobalThemeColor(theme, 1);
-        return getGlobalThemeColor(theme, 5);
-    }
-  } else {
-    switch (type) {
-      case "plain":
-        if (disabled) return getGlobalThemeColor("neutral", 5);
-        return getGlobalThemeColor("neutral", 7);
-      case "outline":
-        if (disabled) return getGlobalThemeColor("neutral", 7);
-        return getGlobalThemeColor("neutral", 9);
-    }
-    return disabled ? getGlobalThemeColor("neutral", 5) : getGlobalThemeColor("neutral", 7);
-  }
+	if (palette) switch (type) {
+		case "plain":
+			if (disabled) return palette[1];
+			return palette[1];
+		case "outline":
+			if (disabled) return palette[0];
+			return palette[5];
+		default:
+			if (disabled) return palette[0];
+			return palette[4];
+	}
+	else if (theme !== "info") switch (type) {
+		case "plain":
+			if (disabled) return getGlobalThemeColor(theme, 2);
+			return getGlobalThemeColor(theme, 2);
+		case "outline":
+			if (disabled) return getGlobalThemeColor(theme, 1);
+			return getGlobalThemeColor(theme, 6);
+		default:
+			if (disabled) return getGlobalThemeColor(theme, 1);
+			return getGlobalThemeColor(theme, 5);
+	}
+	else {
+		switch (type) {
+			case "plain":
+				if (disabled) return getGlobalThemeColor("neutral", 5);
+				return getGlobalThemeColor("neutral", 7);
+			case "outline":
+				if (disabled) return getGlobalThemeColor("neutral", 7);
+				return getGlobalThemeColor("neutral", 9);
+		}
+		return disabled ? getGlobalThemeColor("neutral", 5) : getGlobalThemeColor("neutral", 7);
+	}
 }
 const drawBorder = (ctx, width, height, center, borderRadius, rad, borderColor, pixelSize) => {
-  ctx.fillStyle = rgbaColor2string(borderColor);
-  for (let i = 0; i < 4; i++) {
-    if (borderRadius[i] > pixelSize) {
-      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]) {
-    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]) {
-    ctx.fillRect(0, center[0][1], pixelSize, center[3][1] - center[0][1] + pixelSize);
-  }
+	ctx.fillStyle = rgbaColor2string(borderColor);
+	for (let i = 0; i < 4; i++) if (borderRadius[i] > pixelSize) 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]) 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]) ctx.fillRect(0, center[0][1], pixelSize, center[3][1] - center[0][1] + pixelSize);
 };
 const getTextColorWithPalette = (palette, type, disabled) => {
-  if (!palette || type === "primary") return void 0;
-  if (disabled) {
-    if (type === "plain") return rgbaColor2string(palette[2]);
-    return rgbaColor2string(palette[1]);
-  }
-  switch (type) {
-    case "outline":
-      return rgbaColor2string(palette[5]);
-    case "plain":
-      return rgbaColor2string(palette[5]);
-    default:
-      return void 0;
-  }
-};
-export {
-  getBorderColor as a,
-  getBackgroundColor as b,
-  drawBorder as d,
-  getTextColorWithPalette as g
+	if (!palette || type === "primary") return void 0;
+	if (disabled) {
+		if (type === "plain") return rgbaColor2string(palette[2]);
+		return rgbaColor2string(palette[1]);
+	}
+	switch (type) {
+		case "outline": return rgbaColor2string(palette[5]);
+		case "plain": return rgbaColor2string(palette[5]);
+		default: return;
+	}
 };
+export { getTextColorWithPalette as i, getBackgroundColor as n, getBorderColor as r, drawBorder as t };

package/es/tag/index.css

@@ -7,39 +7,57 @@
   pointer-events: none;
 }
 span.px-tag {
-  font-size: var(--text-size);
+  line-height: var(--px-medium-sub-base-size);
 }
 .px-tag {
-  --tag-size: calc(var(--px-medium-size) - var(--px-bit) * 2 - 2px);
-  --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);
+  --tag-size: var(--px-medium-sub-size);
   --text-color: var(--px-neutral-1);
-  --text-size: var(--px-medium-font-size);
-  height: var(--tag-size);
-  padding-left: var(--padding-x-size);
-  padding-right: var(--padding-x-size);
+  min-height: var(--tag-size);
+  box-sizing: border-box;
   background-color: transparent;
-  border-color: transparent;
-  border-width: var(--px-bit);
   display: inline-flex;
   align-items: center;
   position: relative;
   color: var(--text-color);
   transition: 0.25s;
   z-index: 0;
-  font-size: var(--text-size);
+  word-break: break-word;
+  border-color: transparent;
+  border-width: var(--px-bit);
+  border-style: solid;
+}
+.px-tag.px-tag__small {
+  padding-right: 8px;
+  padding-left: 8px;
+  font-size: 12px;
+}
+.px-tag.px-tag__small .px-tag-icon-wrapper {
+  height: 8px;
+  width: 8px;
+}
+.px-tag.px-tag__medium {
+  padding-right: 8px;
+  padding-left: 8px;
+  font-size: 14px;
+}
+.px-tag.px-tag__medium .px-tag-icon-wrapper {
+  height: 10px;
+  width: 10px;
+}
+.px-tag.px-tag__large {
+  padding-right: 12px;
+  padding-left: 12px;
+  font-size: 15px;
+}
+.px-tag.px-tag__large .px-tag-icon-wrapper {
+  height: 11px;
+  width: 11px;
 }
 .px-tag__large {
-  --padding-x-size: var(--px-large-padding-x);
-  --tag-size: calc(var(--px-medium-size));
-  --text-size: var(--px-medium-font-size);
+  --tag-size: var(--px-large-sub-size);
 }
 .px-tag__small {
-  --padding-x-size: var(--px-small-padding-x);
-  --tag-size: calc(var(--px-small-size) - var(--px-bit) * 2);
-  --text-size: var(--px-small-font-size);
+  --tag-size: var(--px-small-sub-size);
 }
 .px-tag.px-tag__disabled {
   cursor: not-allowed;
@@ -48,13 +66,11 @@ span.px-tag {
   cursor: not-allowed;
 }
 .px-tag-icon-wrapper {
-  margin-left: var(--px-interval-1);
+  margin-left: 4px;
   display: flex;
   align-items: center;
 }
 .px-tag-icon-wrapper .px-tag-icon {
-  height: calc(var(--text-size) - 4px);
-  width: calc(var(--text-size) - 4px);
   fill: var(--text-color);
   cursor: pointer;
 }

package/es/tag/index.d.ts

@@ -8,11 +8,11 @@ declare const __VLS_component: import("vue").DefineComponent<TagProps, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<TagProps> & Readonly<{
     onClose?: ((e: MouseEvent) => any) | undefined;
 }>, {
-    shape: "default" | "round";
     size: "medium" | "large" | "small";
-    disabled: boolean;
     variant: "primary" | "plain" | "outline";
     theme: "primary" | "sakura" | "success" | "warning" | "danger" | "info";
+    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;