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

package/es/image/css.js

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

package/es/image/index.css

@@ -0,0 +1,69 @@
+div.px-image {
+  font-size: 0;
+}
+.px-image {
+  display: inline-block;
+  position: relative;
+  transition: 0.25s all;
+}
+.px-image-previewable {
+  cursor: pointer;
+}
+.px-image-preview {
+  transition: 0.25s;
+  width: 100%;
+  height: 100%;
+}
+.px-image-preview-enter-to,
+.px-image-preview-leave-from {
+  opacity: 1;
+}
+.px-image-preview-enter-from,
+.px-image-preview-leave-to {
+  opacity: 0;
+}
+.px-image-preview-close {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  cursor: pointer;
+  top: 16px;
+  right: 16px;
+  fill: var(--px-neutral-10);
+  transition: fill 0.25s;
+}
+.px-image-preview-close:hover {
+  fill: var(--px-neutral-8);
+}
+.px-image-preview-close:active {
+  fill: var(--px-neutral-9);
+}
+.px-image-fallback {
+  font-size: var(--px-medium-font-size);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+.px-image .px-image-img {
+  width: 100%;
+  height: 100%;
+}
+.px-image__fill .px-image-img {
+  object-fit: fill;
+}
+.px-image__contain .px-image-img {
+  object-fit: contain;
+}
+.px-image__cover .px-image-img {
+  object-fit: cover;
+}
+.px-image__none .px-image-img {
+  object-fit: none;
+}
+.px-image__scale-down .px-image-img {
+  object-fit: scale-down;
+}

package/es/image/index.d.ts

@@ -0,0 +1,35 @@
+import type { ImageProps } from './type';
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    placeholder?: (props: typeof __VLS_1) => any;
+} & {
+    error?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<ImageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (img: HTMLImageElement, error: string | Event) => any;
+    close: (event: MouseEvent) => any;
+    load: (img: HTMLImageElement, event: Event) => any;
+    loading: (img: HTMLImageElement) => any;
+    preview: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<ImageProps> & Readonly<{
+    onError?: ((img: HTMLImageElement, error: string | Event) => any) | undefined;
+    onClose?: ((event: MouseEvent) => any) | undefined;
+    onLoad?: ((img: HTMLImageElement, event: Event) => any) | undefined;
+    onLoading?: ((img: HTMLImageElement) => any) | undefined;
+    onPreview?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    loading: "eager" | "lazy";
+    objectFit: "fill" | "contain" | "cover" | "none" | "scale-down";
+    lazy: boolean;
+    rootMargin: number | [number, number];
+    previewable: boolean;
+    referrerpolicy: string;
+    crossorigin: "anonymous" | "use-credentials" | "";
+}, {}, {}, {}, 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/image/index.js

@@ -0,0 +1,199 @@
+import './css.js'
+import { r as times_default } from "../vendor.js";
+import { t as popup_wrapper_default } from "../popup-wrapper/index.js";
+import { t as calculateZoomedSize } from "../share/util/dom.js";
+import { t as mask_default } from "../mask/index.js";
+import { t as useLazyLoad } from "../share/hook/use-lazy-load.js";
+import { t as useWindowResizeListener } from "../share/hook/use-window-resize-listener.js";
+import { Transition, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, shallowRef, unref, useSlots, watch, withCtx } from "vue";
+var _hoisted_1 = [
+	"src",
+	"srcset",
+	"alt",
+	"data-src",
+	"data-srcset",
+	"data-loaded",
+	"data-error",
+	"loading",
+	"referrerpolicy",
+	"crossorigin"
+];
+var _hoisted_2 = {
+	key: 0,
+	class: "px-image-fallback"
+};
+var _hoisted_3 = {
+	key: 0,
+	class: "px-image-preview"
+};
+var _hoisted_4 = [
+	"src",
+	"srcset",
+	"alt",
+	"referrerpolicy",
+	"crossorigin"
+];
+var ANIMATION_DURATION = 250;
+var image_default = /* @__PURE__ */ defineComponent({
+	name: "Image",
+	__name: "index",
+	props: {
+		src: null,
+		srcset: null,
+		alt: null,
+		objectFit: { default: "fill" },
+		loading: { default: "eager" },
+		lazy: {
+			type: Boolean,
+			default: false
+		},
+		root: null,
+		rootMargin: { default: () => [100, 200] },
+		previewable: {
+			type: Boolean,
+			default: false
+		},
+		maskProps: null,
+		popupWrapperProps: null,
+		zoomOptions: null,
+		referrerpolicy: { default: "no-referrer" },
+		crossorigin: { default: "" }
+	},
+	emits: [
+		"load",
+		"error",
+		"loading",
+		"preview",
+		"close"
+	],
+	setup(__props, { emit: __emit }) {
+		const slots = useSlots();
+		const props = __props;
+		const curSrc = ref(props.lazy ? void 0 : props.src);
+		const curSrcset = ref(props.lazy ? void 0 : props.srcset);
+		const loadFailed = ref(false);
+		const loaded = ref(false);
+		const previewVisible = ref(false);
+		const imgRef = shallowRef(null);
+		const emits = __emit;
+		useLazyLoad(imgRef, {
+			root: props.root,
+			rootMargin: props.rootMargin,
+			onError: (img, error) => {
+				loadFailed.value = true;
+				loaded.value = false;
+				emits("error", img, error);
+			},
+			onLoading: (img) => {
+				emits("loading", img);
+			},
+			onLoad: () => {
+				curSrc.value = props.src;
+				curSrcset.value = props.srcset;
+			}
+		});
+		const loadHandler = (event) => {
+			if (imgRef.value) {
+				loaded.value = true;
+				loadFailed.value = false;
+				emits("load", imgRef.value, event);
+			}
+		};
+		const errorHandler = (error) => {
+			loadFailed.value = true;
+			loaded.value = false;
+			if (imgRef.value) emits("error", imgRef.value, error);
+		};
+		const previewStyle = ref({
+			width: 0,
+			height: 0,
+			top: 0,
+			left: 0
+		});
+		const clickHandler = (e) => {
+			if (!(loaded.value && props.previewable) || !imgRef.value) return;
+			previewStyle.value = calculateZoomedSize(imgRef.value);
+			previewVisible.value = true;
+			emits("preview", e);
+		};
+		useWindowResizeListener(() => {
+			if (!(loaded.value && props.previewable) || !imgRef.value || !previewVisible.value) return;
+			previewStyle.value = calculateZoomedSize(imgRef.value, props.zoomOptions);
+		});
+		const closeHandler = (e) => {
+			previewVisible.value = false;
+			emits("close", e);
+		};
+		watch(() => props.src, (val) => {
+			if (loaded.value) curSrc.value = val;
+			else if (!props.lazy) curSrc.value = val;
+		});
+		watch(() => props.srcset, (val) => {
+			if (loaded.value) curSrcset.value = val;
+			else if (!props.lazy) curSrcset.value = val;
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(["pixelium px-image", {
+					[`px-image__${props.objectFit}`]: !!props.objectFit,
+					"px-image-previewable": loaded.value && props.previewable
+				}]),
+				onClick: clickHandler
+			}, [
+				createElementVNode("img", {
+					src: curSrc.value,
+					srcset: curSrcset.value,
+					alt: props.alt,
+					"data-src": props.lazy ? props.src : void 0,
+					"data-srcset": props.lazy ? props.srcset : void 0,
+					"data-loaded": props.lazy ? loaded.value : void 0,
+					"data-error": props.lazy ? loadFailed.value : void 0,
+					loading: props.lazy ? void 0 : props.loading,
+					referrerpolicy: props.referrerpolicy,
+					crossorigin: props.crossorigin,
+					style: normalizeStyle({ visibility: loadFailed.value || !curSrc.value && !curSrcset.value ? "hidden" : void 0 }),
+					class: "px-image-img",
+					ref_key: "imgRef",
+					ref: imgRef,
+					onLoad: loadHandler,
+					onError: errorHandler
+				}, null, 44, _hoisted_1),
+				unref(slots).placeholder || unref(slots).error ? (openBlock(), createElementBlock("div", _hoisted_2, [!loaded.value && !loadFailed.value ? renderSlot(_ctx.$slots, "placeholder", { key: 0 }) : createCommentVNode("v-if", true), loadFailed.value ? renderSlot(_ctx.$slots, "error", { key: 1 }) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true),
+				props.previewable ? (openBlock(), createBlock(popup_wrapper_default, mergeProps({
+					key: 1,
+					visible: previewVisible.value,
+					position: "fixed",
+					"close-delay": ANIMATION_DURATION
+				}, props.popupWrapperProps), {
+					default: withCtx(() => [createVNode(Transition, { name: "px-image-preview" }, {
+						default: withCtx(() => [previewVisible.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+							createVNode(mask_default, mergeProps({ "z-index": 0 }, __props.maskProps, { onClick: closeHandler }), null, 16),
+							createVNode(unref(times_default), {
+								"z-index": "0",
+								onClick: closeHandler,
+								class: "px-image-preview-close"
+							}),
+							createElementVNode("img", {
+								"z-index": "0",
+								src: curSrc.value,
+								srcset: curSrcset.value,
+								alt: props.alt,
+								referrerpolicy: props.referrerpolicy,
+								crossorigin: props.crossorigin,
+								class: "px-image-preview-img",
+								style: normalizeStyle({
+									width: `${previewStyle.value.width}px`,
+									height: `${previewStyle.value.height}px`,
+									transform: `translate(${previewStyle.value.left}px, ${previewStyle.value.top}px)`
+								})
+							}, null, 12, _hoisted_4)
+						])) : createCommentVNode("v-if", true)]),
+						_: 1
+					})]),
+					_: 1
+				}, 16, ["visible"])) : createCommentVNode("v-if", true)
+			], 2);
+		};
+	}
+});
+export { image_default as t };

package/es/image/type.d.ts

@@ -0,0 +1,126 @@
+import type { MaskProps } from '../mask/type';
+export type ImageProps = {
+    /**
+     * @property {string} [src]
+     * @version 0.0.3
+     */
+    src?: string;
+    /**
+     * @property {string} [srcset]
+     * @version 0.0.3
+     */
+    srcset?: string;
+    /**
+     * @property {string} [alt]
+     * @version 0.0.3
+     */
+    alt?: string;
+    /**
+     * @property {'fill' | 'contain' | 'cover' | 'none' | 'scale-down'} [objectFit='fill']
+     * @version 0.0.3
+     */
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    /**
+     * @property {'eager' | 'lazy'} [loading='eager']
+     * @version 0.0.3
+     */
+    loading?: 'eager' | 'lazy';
+    /**
+     * @property {boolean} [lazy=false]
+     * @version 0.0.3
+     */
+    lazy?: boolean;
+    /**
+     * @property {HTMLElement | string} [root]
+     * @version 0.0.3
+     */
+    root?: HTMLElement | string;
+    /**
+     * @property {number | [number, number]} [rootMargin=[100, 200]]
+     * @version 0.0.3
+     */
+    rootMargin?: number | [number, number];
+    /**
+     * @property {boolean} [previewable=false]
+     * @version 0.0.3
+     */
+    previewable?: boolean;
+    /**
+     * @property {Omit<MaskProps, 'zIndex'>} [maskProps]
+     * @version 0.0.3
+     */
+    maskProps?: Omit<MaskProps, 'zIndex'>;
+    /**
+     * @property {{ zIndex: number, root: HTMLElement | string }} [popupWrapperProps]
+     * @version 0.0.3
+     */
+    popupWrapperProps?: {
+        zIndex: number;
+        root: HTMLElement | string;
+    };
+    /**
+     * @property {{ maxWidth?: number, maxHeight?: number, margin?: number}} [popupWrapperProps={ margin: 32, maxWidth: Infinity, maxHeight: Infinity }]
+     * @version 0.0.3
+     */
+    zoomOptions?: {
+        maxWidth?: number;
+        maxHeight?: number;
+        margin?: number;
+    };
+    /**
+     * @property {string} [referrerpolicy='no-referrer']
+     * @version 0.0.3
+     */
+    referrerpolicy?: string;
+    /**
+     * @property {'anonymous' | 'use-credentials' | ''} [crossorigin='']
+     * @version 0.0.3
+     */
+    crossorigin?: 'anonymous' | 'use-credentials' | '';
+};
+export type ImageEvents = {
+    /**
+     * @event load
+     * @param {HTMLImageElement} img
+     * @param {Event} event
+     * @version 0.0.3
+     */
+    load: [img: HTMLImageElement, event: Event];
+    /**
+     * @event error
+     * @param {HTMLImageElement} img
+     * @param {string | Event} error
+     * @version 0.0.3
+     */
+    error: [img: HTMLImageElement, error: string | Event];
+    /**
+     * @event loading
+     * @param {HTMLImageElement} img
+     * @version 0.0.3
+     */
+    loading: [img: HTMLImageElement];
+    /**
+     * @event preview
+     * @param {MouseEvent} event
+     * @version 0.0.3
+     */
+    preview: [event: MouseEvent];
+    /**
+     * @event close
+     * @param {MouseEvent} event
+     * @version 0.0.3
+     */
+    close: [event: MouseEvent];
+};
+export type ImageSlots = {
+    /**
+     * @slot placeholder
+     * @version 0.0.3
+     */
+    placeholder: {};
+    /**
+     * @slot error
+     * @version 0.0.3
+     */
+    error: {};
+};