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

package/es/auto-complete/type.d.ts

@@ -1,12 +1,9 @@
+import type { OptionListGroupOption, OptionListOption } from '../option-list/type';
 import type { NumberOrPercentage } from '../share/type';
-import type { GroupOption, Option } from '../share/type';
-export interface AutoCompleteOption extends Option<string> {
-    value: string;
-    disabled?: boolean;
+import type { VirtualListProps } from '../virtual-list/type';
+export interface AutoCompleteOption extends OptionListOption<string> {
 }
-export interface AutoCompleteGroupOption extends GroupOption {
-    label: string;
-    key: string | number | symbol;
+export interface AutoCompleteGroupOption extends OptionListGroupOption {
     children: (AutoCompleteOption | string)[];
 }
 export type AutoCompleteProps = {
@@ -50,6 +47,16 @@ export type AutoCompleteProps = {
      * @version 0.0.2
      */
     loading?: boolean;
+    /**
+     * @property {'medium' | 'large' | 'small'} [size='medium']
+     * @version 0.0.2
+     */
+    size?: 'medium' | 'large' | 'small';
+    /**
+     * @property {'rect' | 'round'} [shape='rect']
+     * @version 0.0.3
+     */
+    shape?: 'rect' | 'round' | 'default';
     /**
      * @property {boolean} [showPopoverEmpty=false]
      * @version 0.0.2
@@ -71,15 +78,15 @@ export type AutoCompleteProps = {
      */
     append?: boolean;
     /**
-     * @property {'medium' | 'large' | 'small'} [size='medium']
-     * @version 0.0.2
+     * @property {boolean} [virtualScroll=false]
+     * @version 0.0.3
      */
-    size?: 'medium' | 'large' | 'small';
+    virtualScroll?: boolean;
     /**
-     * @property {'default' | 'round'} [shape='default']
-     * @version 0.0.2
+     * @property {Omit<VirtualListProps, 'list' | 'fixedHeight'>} [virtualListProps]
+     * @version 0.0.3
      */
-    shape?: 'default' | 'round';
+    virtualListProps?: Omit<VirtualListProps, 'list' | 'fixedHeight'>;
     /**
      * @property {NumberOrPercentage | NumberOrPercentage[]} [borderRadius]
      * @version 0.0.2
@@ -95,6 +102,11 @@ export type AutoCompleteProps = {
      * @version 0.0.2
      */
     autofocus?: boolean;
+    /**
+     * @property {boolean} [optionsDestroyOnHide=false]
+     * @version 0.0.3
+     */
+    optionsDestroyOnHide?: boolean;
 };
 export type AutoCompleteEvents = {
     /**

package/es/avatar/css.js

@@ -0,0 +1,2 @@
+import '../index.css'
+import './index.css'

package/es/avatar/draw.d.ts

@@ -0,0 +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) => void;

package/es/avatar/draw.js

@@ -0,0 +1,11 @@
+import { o as drawSmoothCircle } from "../share/util/plot.js";
+import { a as rgbaColor2string } from "../share/util/color.js";
+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) drawSmoothCircle(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);
+};
+export { drawBorder as t };

package/es/avatar/index.css

@@ -0,0 +1,49 @@
+.px-avatar {
+  --avatar-size: var(--px-medium-size);
+  --text-color: var(--px-neutral-1);
+  background-color: transparent;
+  border-color: transparent;
+  border-width: var(--px-bit);
+  border-style: solid;
+  display: inline-block;
+  position: relative;
+  color: var(--text-color);
+  user-select: none;
+  transition: 0.25s;
+  z-index: 0;
+  box-sizing: border-box;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+}
+.px-avatar.px-avatar {
+  font-size: 14px;
+}
+.px-avatar__large {
+  --avatar-size: var(--px-large-size);
+  font-size: 15px;
+}
+.px-avatar__small {
+  --avatar-size: var(--px-small-size);
+  font-size: 12px;
+}
+.px-avatar-canvas,
+.px-avatar-inner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+.px-avatar-canvas {
+  z-index: -1;
+}
+.px-avatar-inner {
+  z-index: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  border-width: 0;
+  overflow: hidden;
+}

package/es/avatar/index.d.ts

@@ -0,0 +1,15 @@
+import type { AvatarProps } from './type';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
+    bordered: boolean;
+}, {}, {}, {}, 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 & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/avatar/index.js

@@ -0,0 +1,110 @@
+import './css.js'
+import { B as y, g as A } from "../vendor.js";
+import { t as BORDER_CORNER_RAD_RANGE } from "../share/const/index.js";
+import { o as offsetOutward } from "../share/util/common.js";
+import { c as floodFillEdge, i as canvasPreprocess, l as getBorderRadius, n as calcPixelSize, s as floodFill, t as calcBorderCornerCenter, u as outerEdgePoints } 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 { t as useWatchGlobalCssVal } from "../share/hook/use-watch-global-css-var.js";
+import { t as useTransitionEnd } from "../share/hook/use-transition-end.js";
+import { t as drawBorder } from "./draw.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, shallowRef, unref, watch } from "vue";
+var avatar_default = /* @__PURE__ */ defineComponent({
+	name: "Avatar",
+	__name: "index",
+	props: {
+		shape: null,
+		size: null,
+		bordered: {
+			type: Boolean,
+			default: false
+		},
+		backgroundColor: null,
+		borderColor: null
+	},
+	setup(__props) {
+		const props = __props;
+		const sizeComputed = computed(() => {
+			return props.size ?? "medium";
+		});
+		const shapeComputed = computed(() => {
+			return props.shape ?? "circle";
+		});
+		const hoverFlag = ref(false);
+		const activeFlag = ref(false);
+		const darkMode = useDarkMode();
+		const canvasRef = shallowRef(null);
+		const avatarRef = shallowRef(null);
+		onMounted(() => {
+			nextTick(() => {
+				drawPixel();
+			});
+		});
+		watch([
+			() => props.bordered,
+			shapeComputed,
+			sizeComputed,
+			hoverFlag,
+			activeFlag,
+			darkMode,
+			() => props.backgroundColor,
+			() => props.borderColor
+		], () => {
+			drawPixel();
+		});
+		const polygon = ref("");
+		const drawPixel = () => {
+			const preprocessData = canvasPreprocess(avatarRef, canvasRef);
+			if (!preprocessData) return;
+			const pixelSize = calcPixelSize();
+			const { ctx, width, height, canvas } = preprocessData;
+			const borderRadius = getBorderRadius(canvas, pixelSize, void 0, shapeComputed.value, void 0, false, false, false);
+			const backgroundColor = props.backgroundColor && parseColor(props.backgroundColor) || getGlobalThemeColor("neutral", 7);
+			const borderColor = props.bordered ? props.borderColor && parseColor(props.borderColor) || getGlobalThemeColor("neutral", 10) : backgroundColor;
+			const center = calcBorderCornerCenter(borderRadius, width, height, pixelSize);
+			const rad = BORDER_CORNER_RAD_RANGE;
+			if (borderColor) drawBorder(ctx, width, height, center, borderRadius, rad, borderColor, pixelSize);
+			let dots = props.bordered ? backgroundColor ? floodFillEdge(ctx, Math.round(width / 2 + pixelSize / 2), Math.round(height / 2 + pixelSize / 2), backgroundColor) : [] : outerEdgePoints(ctx);
+			if (dots.length) {
+				dots.push(dots.at(-1));
+				dots = offsetOutward([Math.round(width / 2), Math.round(height / 2)], dots, pixelSize / 4).map((e) => {
+					return [e[0] + .5, e[1] + .5];
+				});
+				polygon.value = dots.map((e) => {
+					return `${e[0]}px ${e[1]}px`;
+				}).join(",");
+			} else polygon.value = "";
+			if (backgroundColor) floodFill(ctx, Math.round(width / 2), Math.round(height / 2), backgroundColor);
+		};
+		useResizeObserver(avatarRef, drawPixel);
+		useWatchGlobalCssVal(drawPixel);
+		useTransitionEnd(avatarRef, drawPixel);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["pixelium px-avatar", {
+					[`px-avatar__${sizeComputed.value}`]: unref(y)(sizeComputed.value),
+					[`px-avatar__${shapeComputed.value}`]: true
+				}]),
+				style: normalizeStyle({
+					height: unref(A)(sizeComputed.value) ? `${sizeComputed.value}px` : void 0,
+					width: unref(A)(sizeComputed.value) ? `${sizeComputed.value}px` : void 0
+				}),
+				ref_key: "avatarRef",
+				ref: avatarRef
+			}, [createElementVNode("canvas", {
+				ref_key: "canvasRef",
+				ref: canvasRef,
+				class: "px-avatar-canvas"
+			}, null, 512), createElementVNode("div", {
+				class: "px-avatar-inner",
+				style: normalizeStyle({
+					height: unref(A)(sizeComputed.value) ? `${sizeComputed.value}px` : void 0,
+					width: unref(A)(sizeComputed.value) ? `${sizeComputed.value}px` : void 0,
+					clipPath: polygon.value ? `polygon(${polygon.value})` : void 0
+				})
+			}, [renderSlot(_ctx.$slots, "default")], 4)], 6);
+		};
+	}
+});
+export { avatar_default as t };

package/es/avatar/type.d.ts

@@ -0,0 +1,34 @@
+export type AvatarProps = {
+    /**
+     * @property {'circle' | 'square''} [shape='circle']
+     * @version 0.0.3
+     */
+    shape?: 'circle' | 'square';
+    /**
+     * @property {'medium' | 'large' | 'small' | number} [size='medium']
+     * @version 0.0.3
+     */
+    size?: 'medium' | 'large' | 'small' | number;
+    /**
+     * @property {boolean} [bordered=false]
+     * @version 0.0.3
+     */
+    bordered?: boolean;
+    /**
+     * @property {string} [backgroundColor]
+     * @version 0.0.3
+     */
+    backgroundColor?: string;
+    /**
+     * @property {string} [borderColor]
+     * @version 0.0.3
+     */
+    borderColor?: string;
+};
+export type AvatarSlots = {
+    /**
+     * @slot default
+     * @version 0.0.3
+     */
+    default: {};
+};

package/es/button/draw.d.ts

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