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

package/es/option-list/index.js

@@ -1,169 +1,101 @@
 import './css.js'
-import { defineComponent, createElementBlock, openBlock, Fragment, renderList, unref, normalizeClass, renderSlot, createTextVNode, toDisplayString, createElementVNode } from "vue";
-import { p, d } from "../aside/index.js";
-import { G as GROUP_OPTION_TYPE } from "../share/const/index.js";
-const _hoisted_1 = { class: "px-option-list" };
-const _hoisted_2 = ["onClick"];
-const _hoisted_3 = ["onClick"];
-const _hoisted_4 = {
-  key: 2,
-  class: "px-option-list-item-group"
-};
-const _hoisted_5 = { class: "px-option-list-item-group-label" };
-const _hoisted_6 = ["onClick"];
-const _hoisted_7 = ["onClick"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "OptionList"
-  },
-  __name: "index",
-  props: {
-    options: { default: () => [] },
-    activeValues: { default: () => [] }
-  },
-  emits: ["select"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const selectHandler = (value, e) => {
-      emits("select", value, value, e);
-    };
-    const selectObjectHandler = (option, e) => {
-      if (option.disabled) {
-        return;
-      }
-      emits("select", option.value, option, e);
-    };
-    const getKey = (option) => {
-      if (p(option)) {
-        return option;
-      } else if ("type" in option && option.type === GROUP_OPTION_TYPE) {
-        return option.key;
-      } else {
-        return option.label;
-      }
-    };
-    const checkActive = (option) => {
-      if (!props.activeValues.length) {
-        return false;
-      }
-      if (p(option)) {
-        return props.activeValues.includes(option);
-      }
-      return props.activeValues.includes(option.value);
-    };
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("ul", _hoisted_1, [
-        (openBlock(true), createElementBlock(
-          Fragment,
-          null,
-          renderList(props.options, (item) => {
-            return openBlock(), createElementBlock(
-              Fragment,
-              {
-                key: getKey(item)
-              },
-              [
-                unref(p)(item) ? (openBlock(), createElementBlock("li", {
-                  key: 0,
-                  class: normalizeClass(["px-option-list-item", {
-                    "px-option-list-item__active": checkActive(item)
-                  }]),
-                  onClick: (e) => selectHandler(item, e)
-                }, [
-                  renderSlot(_ctx.$slots, "option", { option: item }, () => [
-                    createTextVNode(
-                      toDisplayString(item),
-                      1
-                      /* TEXT */
-                    )
-                  ])
-                ], 10, _hoisted_2)) : unref(d)(item) && !("type" in item && item.type === unref(GROUP_OPTION_TYPE)) ? (openBlock(), createElementBlock("li", {
-                  key: 1,
-                  class: normalizeClass(["px-option-list-item", {
-                    "px-option-list-item__disabled": item.disabled,
-                    "px-option-list-item__active": checkActive(item)
-                  }]),
-                  onClick: (e) => selectObjectHandler(item, e)
-                }, [
-                  renderSlot(_ctx.$slots, "option", { option: item }, () => [
-                    createTextVNode(
-                      toDisplayString(item.label),
-                      1
-                      /* TEXT */
-                    )
-                  ])
-                ], 10, _hoisted_3)) : (openBlock(), createElementBlock("li", _hoisted_4, [
-                  createElementVNode("div", _hoisted_5, [
-                    renderSlot(_ctx.$slots, "group-label", { option: item }, () => [
-                      createTextVNode(
-                        toDisplayString(item.label),
-                        1
-                        /* TEXT */
-                      )
-                    ])
-                  ]),
-                  (openBlock(true), createElementBlock(
-                    Fragment,
-                    null,
-                    renderList(item.children, (child) => {
-                      return openBlock(), createElementBlock(
-                        Fragment,
-                        {
-                          key: getKey(child)
-                        },
-                        [
-                          unref(p)(child) ? (openBlock(), createElementBlock("li", {
-                            key: 0,
-                            class: normalizeClass(["px-option-list-item", {
-                              "px-option-list-item__active": checkActive(child)
-                            }]),
-                            onClick: (e) => selectHandler(child, e)
-                          }, [
-                            renderSlot(_ctx.$slots, "option", { option: child }, () => [
-                              createTextVNode(
-                                toDisplayString(child),
-                                1
-                                /* TEXT */
-                              )
-                            ])
-                          ], 10, _hoisted_6)) : (openBlock(), createElementBlock("li", {
-                            key: 1,
-                            class: normalizeClass(["px-option-list-item", {
-                              "px-option-list-item__disabled": child.disabled,
-                              "px-option-list-item__active": checkActive(child)
-                            }]),
-                            onClick: (e) => selectObjectHandler(child, e)
-                          }, [
-                            renderSlot(_ctx.$slots, "option", { option: child }, () => [
-                              createTextVNode(
-                                toDisplayString(child.label),
-                                1
-                                /* TEXT */
-                              )
-                            ])
-                          ], 10, _hoisted_7))
-                        ],
-                        64
-                        /* STABLE_FRAGMENT */
-                      );
-                    }),
-                    128
-                    /* KEYED_FRAGMENT */
-                  ))
-                ]))
-              ],
-              64
-              /* STABLE_FRAGMENT */
-            );
-          }),
-          128
-          /* KEYED_FRAGMENT */
-        ))
-      ]);
-    };
-  }
+import { A as d, B as y } from "../vendor.js";
+import { i as GROUP_OPTION_TYPE } from "../share/const/index.js";
+import { t as virtual_list_default } from "../virtual-list/index.js";
+import { createVNode, defineComponent, getCurrentInstance, mergeProps, useSlots, withScopeId } from "vue";
+var option_list_default = /* @__PURE__ */ defineComponent({
+	name: "OptionList",
+	__name: "index",
+	props: {
+		options: { default: () => [] },
+		activeValues: { default: () => [] },
+		virtualScroll: {
+			type: Boolean,
+			default: false
+		},
+		virtualListProps: null
+	},
+	emits: ["select"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const selectHandler = (value, e) => {
+			emits("select", value, value, e);
+		};
+		const selectObjectHandler = (option, e) => {
+			if (option.disabled) return;
+			emits("select", option.value, option, e);
+		};
+		const isOptionListOption = (item) => {
+			return d(item) && !("type" in item && item.type === "group");
+		};
+		const getKey = (option) => {
+			if (y(option)) return option;
+			else if (isOptionListOption(option)) return option.key ?? option.value;
+			else return option.key;
+		};
+		const checkActive = (option) => {
+			if (!props.activeValues.length) return false;
+			if (y(option)) return props.activeValues.includes(option);
+			return props.activeValues.includes(option.value);
+		};
+		const slots = useSlots();
+		const renderItem = (item, child = false) => {
+			const key = getKey(item);
+			if (y(item)) return {
+				el: createVNode("li", {
+					"tabindex": 0,
+					"key": key,
+					"class": {
+						"px-option-list-item": true,
+						"px-option-list-item__active": checkActive(item),
+						"px-option-list-item__child": child
+					},
+					"onClick": (e) => selectHandler(item, e)
+				}, [slots.option ? slots.option({ option: item }) : item]),
+				key
+			};
+			else if (isOptionListOption(item)) return {
+				el: createVNode("li", {
+					"tabindex": item.disabled ? -1 : 0,
+					"key": key,
+					"class": {
+						"px-option-list-item": true,
+						"px-option-list-item__disabled": item.disabled,
+						"px-option-list-item__active": checkActive(item),
+						"px-option-list-item__child": child
+					},
+					"onClick": (e) => selectObjectHandler(item, e)
+				}, [slots.option ? slots.option({ option: item }) : item.label]),
+				key
+			};
+			else return [{
+				el: createVNode("li", {
+					"class": "px-option-list-item-group",
+					"key": key
+				}, [createVNode("div", { "class": "px-option-list-item-group-label" }, [slots["group-label"] ? slots["group-label"]({ option: item }) : item.label])]),
+				key
+			}, ...item.children.map((child$1) => renderItem(child$1, true))];
+		};
+		const renderList$1 = () => {
+			const list = [];
+			props.options.map((item) => renderItem(item)).forEach((rendered) => {
+				if (Array.isArray(rendered)) rendered.forEach((r) => list.push(r));
+				else list.push(rendered);
+			});
+			return createVNode("ul", { "class": "px-option-list" }, [!props.virtualScroll ? list.map((item) => item.el) : createVNode(virtual_list_default, mergeProps({
+				"class": "px-option-list-virtual-list",
+				"list": list.map((item) => ({
+					render: () => item.el,
+					key: item.key
+				}))
+			}, props.virtualListProps), null)]);
+		};
+		const instance = getCurrentInstance();
+		return () => {
+			const scopeId = instance === null || instance === void 0 ? void 0 : instance.vnode.scopeId;
+			return scopeId ? withScopeId(scopeId)(renderList$1)() : renderList$1();
+		};
+	}
 });
-export {
-  _sfc_main as _
-};
+export { option_list_default as t };

package/es/option-list/type.d.ts

@@ -1,6 +1,8 @@
 import type { GroupOption, Option } from '../share/type';
-export interface OptionListOption extends Option<any> {
+import type { VirtualListProps } from '../virtual-list/type';
+export interface OptionListOption<T = any> extends Option<T> {
     disabled?: boolean;
+    key?: string | number | symbol;
 }
 export interface OptionListGroupOption extends GroupOption {
     label: string;
@@ -10,6 +12,8 @@ export interface OptionListGroupOption extends GroupOption {
 export type OptionListProps = {
     options?: (string | OptionListOption | OptionListGroupOption)[];
     activeValues?: any[];
+    virtualScroll?: boolean;
+    virtualListProps?: Omit<VirtualListProps, 'list' | 'fixedHeight'>;
 };
 export type OptionListEvent = {
     select: [value: any, option: OptionListOption | string, e: MouseEvent];

package/es/pixelate/pixel.d.ts

@@ -0,0 +1,5 @@
+export interface PixelateOptions {
+    palette?: string[];
+    background?: string;
+}
+export declare function pixelateImage(imageSource: HTMLImageElement | string, pixelSize: number, options?: PixelateOptions, onProgress?: (progress: number) => void): Promise<ImageData | null>;

package/es/pixelate/pixel.js

@@ -0,0 +1,70 @@
+import { t as inBrowser } from "../share/util/env.js";
+import { i as parseColor } from "../share/util/color.js";
+import { t as createError } from "../share/util/console.js";
+import { t as WorkerWrapper } from "../index.js";
+async function pixelateImage(imageSource, pixelSize, options, onProgress) {
+	if (!inBrowser()) return Promise.resolve(null);
+	const paletteResolved = (options === null || options === void 0 ? void 0 : options.palette) ? options.palette.map((color) => parseColor(color)) : [];
+	const background = (options === null || options === void 0 ? void 0 : options.background) ? parseColor(options.background) : {
+		r: 255,
+		g: 255,
+		b: 255,
+		a: 255
+	};
+	const imageData = await loadImageAndGetData(imageSource);
+	const worker = new WorkerWrapper();
+	return new Promise((resolve, reject) => {
+		worker.onmessage = (e) => {
+			const { type, imageData: imageData$1, progress, error } = e.data;
+			switch (type) {
+				case "progress":
+					onProgress === null || onProgress === void 0 || onProgress(progress);
+					break;
+				case "complete":
+					worker.terminate();
+					resolve(imageData$1);
+					break;
+				case "error":
+					worker.terminate();
+					reject(createError(error));
+					break;
+			}
+		};
+		worker.onerror = (error) => {
+			worker.terminate();
+			reject(createError(`Worker error: ${error.message}`));
+		};
+		worker.postMessage({
+			imageData,
+			pixelSize,
+			palette: paletteResolved,
+			background
+		});
+	});
+}
+async function loadImageAndGetData(imageSource) {
+	return new Promise((resolve, reject) => {
+		const img = imageSource instanceof HTMLImageElement ? imageSource : new Image();
+		const extractData = () => {
+			try {
+				const canvas = new OffscreenCanvas(img.width, img.height);
+				const ctx = canvas.getContext("2d");
+				if (!ctx) {
+					reject(createError("Cannot get Canvas context"));
+					return;
+				}
+				ctx.drawImage(img, 0, 0);
+				resolve(ctx.getImageData(0, 0, canvas.width, canvas.height));
+			} catch (error) {
+				reject(error);
+			}
+		};
+		if (!(imageSource instanceof HTMLImageElement)) {
+			img.crossOrigin = "anonymous";
+			img.onload = extractData;
+			img.onerror = () => reject(createError("Image loading failed"));
+			img.src = imageSource;
+		} else extractData();
+	});
+}
+export { pixelateImage as t };

package/es/pixelate/pixelate.worker.d.ts

@@ -0,0 +1 @@
+export {};

package/es/popover/index.d.ts

@@ -1,7 +1,6 @@
-import { nextTick, type VNode } from 'vue';
 import type { PopoverProps } from './type';
 declare const _default: import("vue").DefineComponent<PopoverProps, {
-    triggerContent: import("vue").ShallowRef<({
+    readonly triggerContent: ({
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: {
@@ -13,11 +12,12 @@ declare const _default: import("vue").DefineComponent<PopoverProps, {
             readonly variant?: "dark" | "light" | undefined;
             readonly arrow?: boolean | undefined;
             readonly zIndex?: number | undefined;
-            readonly target?: (HTMLElement | VNode | null) | undefined;
+            readonly target?: (HTMLElement | import("vue").VNode | null) | undefined;
             readonly root?: (HTMLElement | string) | undefined;
             readonly borderRadius?: number | undefined;
             readonly widthEqual?: boolean | undefined;
             readonly contentStyle?: import("vue").CSSProperties | undefined;
+            readonly destroyOnHide?: boolean | undefined;
             readonly onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
             readonly onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
@@ -52,6 +52,7 @@ declare const _default: import("vue").DefineComponent<PopoverProps, {
             visible: boolean | null;
             arrow: boolean;
             widthEqual: boolean;
+            destroyOnHide: boolean;
         }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -70,7 +71,7 @@ declare const _default: import("vue").DefineComponent<PopoverProps, {
             errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
         };
         $forceUpdate: () => void;
-        $nextTick: typeof nextTick;
+        $nextTick: typeof import("vue").nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, ((cleanupFn: () => void) => void)]) => any : (...args: [any, any, ((cleanupFn: () => void) => void)]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
     } & Readonly<{
         variant: "dark" | "light";
@@ -80,113 +81,25 @@ declare const _default: import("vue").DefineComponent<PopoverProps, {
         visible: boolean | null;
         arrow: boolean;
         widthEqual: boolean;
+        destroyOnHide: boolean;
     }> & Omit<Readonly<import("../popup-content/type.ts").PopupContentProps> & Readonly<{
         onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
         onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
-    }>, "content" | ("variant" | "placement" | "root" | "offset" | "visible" | "arrow" | "widthEqual") | "updateRenderState"> & import("vue").ShallowUnwrapRef<{
+    }>, "content" | "updateRenderState" | ("variant" | "placement" | "root" | "offset" | "visible" | "arrow" | "widthEqual" | "destroyOnHide")> & import("vue").ShallowUnwrapRef<{
         updateRenderState: () => void;
         content: import("vue").ShallowRef<HTMLDivElement | null, HTMLDivElement | null>;
     }> & {} & import("vue").ComponentCustomProperties & {} & {
         $slots: {
             content?: (props: {}) => any;
         };
-    }) | undefined, ({
-        $: import("vue").ComponentInternalInstance;
-        $data: {};
-        $props: {
-            readonly content?: string | undefined;
-            readonly visible?: boolean | null | undefined;
-            readonly defaultVisible?: boolean | null | undefined;
-            readonly placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | undefined;
-            readonly offset?: number | undefined;
-            readonly variant?: "dark" | "light" | undefined;
-            readonly arrow?: boolean | undefined;
-            readonly zIndex?: number | undefined;
-            readonly target?: (HTMLElement | VNode | null) | undefined;
-            readonly root?: (HTMLElement | string) | undefined;
-            readonly borderRadius?: number | undefined;
-            readonly widthEqual?: boolean | undefined;
-            readonly contentStyle?: import("vue").CSSProperties | undefined;
-            readonly onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
-            readonly onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
-        $attrs: {
-            [x: string]: unknown;
-        };
-        $refs: {
-            [x: string]: unknown;
-        };
-        $slots: Readonly<{
-            [name: string]: import("vue").Slot<any> | undefined;
-        }>;
-        $root: import("vue").ComponentPublicInstance | null;
-        $parent: import("vue").ComponentPublicInstance | null;
-        $host: Element | null;
-        $emit: ((event: "contentMouseenter", e: MouseEvent) => void) & ((event: "contentMouseleave", e: MouseEvent) => void);
-        $el: any;
-        $options: import("vue").ComponentOptionsBase<Readonly<import("../popup-content/type.ts").PopupContentProps> & Readonly<{
-            onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
-            onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
-        }>, {
-            updateRenderState: () => void;
-            content: import("vue").ShallowRef<HTMLDivElement | null, HTMLDivElement | null>;
-        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            contentMouseenter: (e: MouseEvent) => any;
-            contentMouseleave: (e: MouseEvent) => any;
-        }, string, {
-            variant: "dark" | "light";
-            placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
-            root: HTMLElement | string;
-            offset: number;
-            visible: boolean | null;
-            arrow: boolean;
-            widthEqual: boolean;
-        }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & {
-            beforeCreate?: (() => void) | (() => void)[];
-            created?: (() => void) | (() => void)[];
-            beforeMount?: (() => void) | (() => void)[];
-            mounted?: (() => void) | (() => void)[];
-            beforeUpdate?: (() => void) | (() => void)[];
-            updated?: (() => void) | (() => void)[];
-            activated?: (() => void) | (() => void)[];
-            deactivated?: (() => void) | (() => void)[];
-            beforeDestroy?: (() => void) | (() => void)[];
-            beforeUnmount?: (() => void) | (() => void)[];
-            destroyed?: (() => void) | (() => void)[];
-            unmounted?: (() => void) | (() => void)[];
-            renderTracked?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-            renderTriggered?: ((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[];
-            errorCaptured?: ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance | null, info: string) => boolean | void)[];
-        };
-        $forceUpdate: () => void;
-        $nextTick: typeof nextTick;
-        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, ((cleanupFn: () => void) => void)]) => any : (...args: [any, any, ((cleanupFn: () => void) => void)]) => any, options?: import("vue").WatchOptions): import("vue").WatchStopHandle;
-    } & Readonly<{
-        variant: "dark" | "light";
-        placement: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
-        root: HTMLElement | string;
-        offset: number;
-        visible: boolean | null;
-        arrow: boolean;
-        widthEqual: boolean;
-    }> & Omit<Readonly<import("../popup-content/type.ts").PopupContentProps> & Readonly<{
-        onContentMouseenter?: ((e: MouseEvent) => any) | undefined;
-        onContentMouseleave?: ((e: MouseEvent) => any) | undefined;
-    }>, "content" | ("variant" | "placement" | "root" | "offset" | "visible" | "arrow" | "widthEqual") | "updateRenderState"> & import("vue").ShallowUnwrapRef<{
-        updateRenderState: () => void;
-        content: import("vue").ShallowRef<HTMLDivElement | null, HTMLDivElement | null>;
-    }> & {} & import("vue").ComponentCustomProperties & {} & {
-        $slots: {
-            content?: (props: {}) => any;
-        };
-    }) | undefined>;
-    updateRenderState: () => void;
+    }) | undefined;
+    updateRenderState(): void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    close: (e: MouseEvent) => any;
+    close: (e: MouseEvent | TouchEvent) => any;
     open: (e: MouseEvent) => any;
     "update:visible": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
-    onClose?: ((e: MouseEvent) => any) | undefined;
+    onClose?: ((e: MouseEvent | TouchEvent) => any) | undefined;
     onOpen?: ((e: MouseEvent) => any) | undefined;
     "onUpdate:visible"?: ((value: boolean) => any) | undefined;
 }>, {
@@ -196,8 +109,9 @@ declare const _default: import("vue").DefineComponent<PopoverProps, {
     offset: number;
     visible: boolean | null;
     defaultVisible: boolean | null;
+    trigger: "hover" | "click";
     arrow: boolean;
     widthEqual: boolean;
-    trigger: "hover" | "click";
+    destroyOnHide: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;