@mekari/pixel3-image 0.0.7-dev.5

package/dist/index.js

@@ -0,0 +1,375 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  MpImage: () => MpImage
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/image.tsx
+var import_vue2 = require("vue");
+var import_vue3 = require("vue");
+var import_pixel3_spinner = require("@mekari/pixel3-spinner");
+var import_patterns = require("@mekari/pixel3-styled-system/patterns");
+
+// src/modules/image.props.ts
+var imageProps = {
+  id: {
+    type: String,
+    default: ""
+  },
+  src: {
+    type: String,
+    default: ""
+  },
+  alt: {
+    type: String,
+    default: ""
+  },
+  layout: {
+    type: String,
+    default: "intrinsic"
+  },
+  width: {
+    type: Number,
+    default: 0
+  },
+  height: {
+    type: Number,
+    default: 0
+  },
+  sizes: {
+    type: String,
+    default: ""
+  },
+  srcPlaceholder: {
+    type: String,
+    default: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+  },
+  srcset: {
+    type: String,
+    default: ""
+  },
+  typeSrcset: {
+    type: String,
+    default: ""
+  },
+  mediaSrcset: {
+    type: String,
+    default: ""
+  },
+  maxSrcset: {
+    type: Number,
+    default: 5
+  },
+  objectFit: {
+    type: String,
+    default: "fill"
+  },
+  objectPosition: {
+    type: String,
+    default: ""
+  },
+  errorText: {
+    type: String,
+    default: "Failed load image"
+  },
+  isLazy: {
+    type: Boolean,
+    default: true
+  },
+  isShowLoading: {
+    type: Boolean,
+    default: true
+  }
+};
+
+// src/modules/image.hooks.ts
+var import_vue = require("vue");
+var import_pixel3_utils = require("@mekari/pixel3-utils");
+function useImage(props, emit) {
+  const {
+    id,
+    src,
+    alt,
+    srcPlaceholder,
+    srcset,
+    typeSrcset,
+    mediaSrcset,
+    layout,
+    width,
+    height,
+    sizes,
+    objectFit,
+    objectPosition,
+    errorText,
+    isLazy,
+    isShowLoading
+  } = (0, import_vue.toRefs)(props);
+  const intersected = (0, import_vue.ref)(false);
+  const loaded = (0, import_vue.ref)(false);
+  const failed = (0, import_vue.ref)(false);
+  const imageWrapperNode = (0, import_vue.ref)();
+  const imgNode = (0, import_vue.ref)();
+  const {
+    stop: disableIntersectionObserver
+  } = (0, import_pixel3_utils.useIntersectionObserver)(imageWrapperNode, ([{
+    isIntersecting
+  }]) => {
+    if (isIntersecting) {
+      intersected.value = true;
+      emit("intersect", getId);
+    }
+  });
+  const getId = id.value || (0, import_pixel3_utils.getUniqueId)("", "image").value;
+  const isVisible = (0, import_vue.computed)(() => {
+    return intersected.value || !isLazy.value;
+  });
+  const isLoading = (0, import_vue.computed)(() => {
+    return isShowLoading.value && isVisible.value && !loaded.value && !failed.value;
+  });
+  const srcImage = (0, import_vue.computed)(() => {
+    return isVisible.value && src.value ? src.value : srcPlaceholder.value;
+  });
+  const srcsetImage = (0, import_vue.computed)(() => {
+    return isVisible.value && srcset.value ? srcset.value : void 0;
+  });
+  const sizerSvg = (0, import_vue.computed)(() => {
+    if (layout.value !== "intrinsic") {
+      return "";
+    }
+    const backgroundColor = !intersected.value ? "background-color:#ffffff;" : "";
+    return `<svg 
+      width="${width.value}" 
+      height="${height.value}" 
+      xmlns="http://www.w3.org/2000/svg"
+      style="${backgroundColor}"
+    >
+      <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">${errorText.value}</text>
+    </svg>`;
+  });
+  const sizerStyle = (0, import_vue.computed)(() => {
+    let style;
+    if (layout.value === "responsive") {
+      const quotient = height.value / width.value;
+      const paddingTop = isNaN(quotient) ? "100%" : `${quotient * 100}%`;
+      style = {
+        display: "block",
+        boxSizing: "border-box",
+        paddingTop
+      };
+    } else if (layout.value === "intrinsic") {
+      style = {
+        boxSizing: "border-box",
+        display: "block",
+        maxWidth: "100%"
+      };
+    }
+    return style;
+  });
+  const wrapperStyle = (0, import_vue.computed)(() => {
+    let style = {};
+    if (layout.value === "responsive") {
+      style = {
+        position: "relative",
+        display: "block",
+        overflow: "hidden",
+        boxSizing: "border-box",
+        margin: 0
+      };
+    } else if (layout.value === "intrinsic") {
+      style = {
+        position: "relative",
+        display: "inline-block",
+        overflow: "hidden",
+        boxSizing: "border-box",
+        maxWidth: "100%",
+        margin: 0
+      };
+    } else if (layout.value === "fixed") {
+      style = {
+        position: "relative",
+        display: "inline-block",
+        overflow: "hidden",
+        boxSizing: "border-box",
+        width: `${width.value}px`,
+        height: `${height.value}px`
+      };
+    } else if (layout.value === "fill") {
+      style = {
+        position: "absolute",
+        display: "block",
+        overflow: "hidden",
+        boxSizing: "border-box",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        margin: 0
+      };
+    }
+    return style;
+  });
+  const rootAttrs = (0, import_vue.computed)(() => {
+    return {
+      "data-pixel-component": "MpImage",
+      ref: imageWrapperNode,
+      id: getId,
+      style: {
+        ...wrapperStyle.value
+      }
+    };
+  });
+  const sizerAttrs = (0, import_vue.computed)(() => {
+    return {
+      style: {
+        ...sizerStyle.value
+      }
+    };
+  });
+  const imgSizerAttrs = (0, import_vue.computed)(() => {
+    return {
+      src: `data:image/svg+xml;base64,${toBase64(sizerSvg.value)}`,
+      alt: "",
+      ariaHidden: true,
+      style: {
+        maxWidth: "100%",
+        display: "block",
+        border: "none",
+        margin: 0,
+        padding: 0
+      }
+    };
+  });
+  const sourceAttrs = (0, import_vue.computed)(() => {
+    return {
+      srcset: srcsetImage.value,
+      type: typeSrcset.value,
+      media: mediaSrcset.value
+    };
+  });
+  const imgAttrs = (0, import_vue.computed)(() => {
+    return {
+      ref: imgNode,
+      alt: alt.value ? alt.value : void 0,
+      src: srcImage.value ? srcImage.value : void 0,
+      sizes: sizes.value ? sizes.value : void 0,
+      decoding: "async",
+      // eslint-disable-next-line
+      style: {
+        position: "absolute",
+        display: "block",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        boxSizing: "border-box",
+        padding: 0,
+        border: "none",
+        margin: "auto",
+        width: "0",
+        height: "0",
+        minWidth: "100%",
+        maxWidth: "100%",
+        minHeight: "100%",
+        maxHeight: "100%",
+        objectFit: objectFit.value ? objectFit.value : void 0,
+        objectPosition: objectPosition.value ? objectPosition.value : void 0
+      },
+      onLoad: handleLoad,
+      onError: handleError
+    };
+  });
+  function toBase64(str) {
+    console.log("STR", str);
+    if (typeof window === "undefined") {
+      return Buffer.from(str).toString("base64");
+    } else {
+      return window.btoa(str);
+    }
+  }
+  __name(toBase64, "toBase64");
+  function handleLoad() {
+    if (imgNode.value && imgNode.value.getAttribute("src") !== srcPlaceholder.value && !loaded.value) {
+      loaded.value = true;
+      emit("load", getId);
+    }
+  }
+  __name(handleLoad, "handleLoad");
+  function handleError(e) {
+    emit("error", getId, e);
+    failed.value = true;
+  }
+  __name(handleError, "handleError");
+  (0, import_vue.onUnmounted)(() => {
+    disableIntersectionObserver();
+  });
+  return {
+    rootAttrs,
+    sizerAttrs,
+    imgSizerAttrs,
+    sourceAttrs,
+    imgAttrs,
+    isLoading,
+    sizerStyle,
+    sizerSvg
+  };
+}
+__name(useImage, "useImage");
+
+// src/image.tsx
+var MpImage = (0, import_vue3.defineComponent)({
+  name: "MpImage",
+  props: imageProps,
+  emits: ["intersect", "load", "error"],
+  setup(props, {
+    slots,
+    emit
+  }) {
+    const {
+      rootAttrs,
+      sizerAttrs,
+      imgSizerAttrs,
+      sourceAttrs,
+      imgAttrs,
+      isLoading,
+      sizerStyle
+    } = useImage(props, emit);
+    return () => {
+      const children = slots.default && slots.default();
+      return (0, import_vue2.createVNode)("div", rootAttrs.value, [isLoading.value && (0, import_vue2.createVNode)("div", {
+        "class": (0, import_patterns.flex)({
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: "1",
+          position: "absolute",
+          width: "full",
+          height: "full"
+        })
+      }, [children ? children : (0, import_vue2.createVNode)(import_pixel3_spinner.MpSpinner, null, null)]), sizerStyle.value && (0, import_vue2.createVNode)("div", sizerAttrs.value, [(0, import_vue2.createVNode)("img", imgSizerAttrs.value, null)]), (0, import_vue2.createVNode)("picture", null, [(0, import_vue2.createVNode)("source", sourceAttrs.value, null), (0, import_vue2.createVNode)("img", imgAttrs.value, null)])]);
+    };
+  }
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MpImage
+});

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import {
+  MpImage
+} from "./chunk-LQRQ2LTW.mjs";
+import "./chunk-MC3PU33I.mjs";
+import "./chunk-DPFH2SO2.mjs";
+import "./chunk-QZ7VFGWC.mjs";
+export {
+  MpImage
+};

package/dist/metafile-cjs.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/image.props.ts":{"bytes":1864,"imports":[],"format":"esm"},"src/modules/image.hooks.ts":{"bytes":6253,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/image.tsx":{"bytes":1422,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/patterns","kind":"import-statement","external":true},{"path":"src/modules/image.props.ts","kind":"import-statement","original":"./modules/image.props"},{"path":"src/modules/image.hooks.ts","kind":"import-statement","original":"./modules/image.hooks"}],"format":"esm"},"src/index.ts":{"bytes":119,"imports":[{"path":"src/image.tsx","kind":"import-statement","original":"./image"}],"format":"esm"},"src/modules/image.type.ts":{"bytes":240,"imports":[],"format":"esm"}},"outputs":{"dist/image.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/patterns","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/image.tsx","inputs":{"src/image.tsx":{"bytesInOutput":1539},"src/modules/image.props.ts":{"bytesInOutput":1028},"src/modules/image.hooks.ts":{"bytesInOutput":6144}},"bytes":9799},"dist/index.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-spinner","kind":"require-call","external":true},{"path":"@mekari/pixel3-styled-system/patterns","kind":"require-call","external":true},{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":119},"src/image.tsx":{"bytesInOutput":1414},"src/modules/image.props.ts":{"bytesInOutput":1028},"src/modules/image.hooks.ts":{"bytesInOutput":6144}},"bytes":9810},"dist/modules/image.hooks.js":{"imports":[{"path":"vue","kind":"require-call","external":true},{"path":"@mekari/pixel3-utils","kind":"require-call","external":true}],"exports":[],"entryPoint":"src/modules/image.hooks.ts","inputs":{"src/modules/image.hooks.ts":{"bytesInOutput":6289}},"bytes":7311},"dist/modules/image.props.js":{"imports":[],"exports":[],"entryPoint":"src/modules/image.props.ts","inputs":{"src/modules/image.props.ts":{"bytesInOutput":1255}},"bytes":2202},"dist/modules/image.type.js":{"imports":[],"exports":[],"entryPoint":"src/modules/image.type.ts","inputs":{"src/modules/image.type.ts":{"bytesInOutput":80}},"bytes":781}}}

package/dist/metafile-esm.json

@@ -0,0 +1 @@
+{"inputs":{"src/modules/image.props.ts":{"bytes":1864,"imports":[],"format":"esm"},"src/modules/image.hooks.ts":{"bytes":6253,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true},{"path":"<runtime>","kind":"import-statement","external":true}],"format":"esm"},"src/image.tsx":{"bytes":1422,"imports":[{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/patterns","kind":"import-statement","external":true},{"path":"src/modules/image.props.ts","kind":"import-statement","original":"./modules/image.props"},{"path":"src/modules/image.hooks.ts","kind":"import-statement","original":"./modules/image.hooks"}],"format":"esm"},"src/index.ts":{"bytes":119,"imports":[{"path":"src/image.tsx","kind":"import-statement","original":"./image"}],"format":"esm"},"src/modules/image.type.ts":{"bytes":240,"imports":[],"format":"esm"}},"outputs":{"dist/image.mjs":{"imports":[{"path":"dist/chunk-LQRQ2LTW.mjs","kind":"import-statement"},{"path":"dist/chunk-MC3PU33I.mjs","kind":"import-statement"},{"path":"dist/chunk-DPFH2SO2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpImage"],"entryPoint":"src/image.tsx","inputs":{},"bytes":165},"dist/index.mjs":{"imports":[{"path":"dist/chunk-LQRQ2LTW.mjs","kind":"import-statement"},{"path":"dist/chunk-MC3PU33I.mjs","kind":"import-statement"},{"path":"dist/chunk-DPFH2SO2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["MpImage"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":0}},"bytes":165},"dist/chunk-LQRQ2LTW.mjs":{"imports":[{"path":"dist/chunk-MC3PU33I.mjs","kind":"import-statement"},{"path":"dist/chunk-DPFH2SO2.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-spinner","kind":"import-statement","external":true},{"path":"@mekari/pixel3-styled-system/patterns","kind":"import-statement","external":true}],"exports":["MpImage"],"inputs":{"src/image.tsx":{"bytesInOutput":1227}},"bytes":1372},"dist/modules/image.hooks.mjs":{"imports":[{"path":"dist/chunk-MC3PU33I.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["useImage"],"entryPoint":"src/modules/image.hooks.ts","inputs":{},"bytes":107},"dist/chunk-MC3PU33I.mjs":{"imports":[{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"},{"path":"vue","kind":"import-statement","external":true},{"path":"@mekari/pixel3-utils","kind":"import-statement","external":true}],"exports":["useImage"],"inputs":{"src/modules/image.hooks.ts":{"bytesInOutput":5833}},"bytes":5937},"dist/modules/image.props.mjs":{"imports":[{"path":"dist/chunk-DPFH2SO2.mjs","kind":"import-statement"},{"path":"dist/chunk-QZ7VFGWC.mjs","kind":"import-statement"}],"exports":["imageEmit","imageProps"],"entryPoint":"src/modules/image.props.ts","inputs":{},"bytes":137},"dist/chunk-DPFH2SO2.mjs":{"imports":[],"exports":["imageEmit","imageProps"],"inputs":{"src/modules/image.props.ts":{"bytesInOutput":1076}},"bytes":1145},"dist/chunk-QZ7VFGWC.mjs":{"imports":[],"exports":["__name"],"inputs":{},"bytes":151},"dist/modules/image.type.mjs":{"imports":[],"exports":[],"entryPoint":"src/modules/image.type.ts","inputs":{"src/modules/image.type.ts":{"bytesInOutput":0}},"bytes":0}}}

package/dist/modules/image.hooks.d.mts

@@ -0,0 +1,76 @@
+import { ImageObjectFit } from './image.type.mjs';
+import * as vue from 'vue';
+import { ImageProps, ImageEmit } from './image.props.mjs';
+
+declare function useImage(props: ImageProps, emit: ImageEmit): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        ref: vue.Ref<any>;
+        id: string | undefined;
+        style: {};
+    }>;
+    sizerAttrs: vue.ComputedRef<{
+        style: {};
+    }>;
+    imgSizerAttrs: vue.ComputedRef<{
+        src: string;
+        alt: string;
+        ariaHidden: boolean;
+        style: {
+            maxWidth: string;
+            display: string;
+            border: string;
+            margin: number;
+            padding: number;
+        };
+    }>;
+    sourceAttrs: vue.ComputedRef<{
+        srcset: string | undefined;
+        type: string;
+        media: string;
+    }>;
+    imgAttrs: vue.ComputedRef<{
+        ref: vue.Ref<any>;
+        alt: string | undefined;
+        src: string | undefined;
+        sizes: string | undefined;
+        decoding: "async";
+        style: {
+            position: "absolute";
+            display: string;
+            top: number;
+            left: number;
+            bottom: number;
+            right: number;
+            boxSizing: "border-box";
+            padding: number;
+            border: string;
+            margin: string;
+            width: string;
+            height: string;
+            minWidth: string;
+            maxWidth: string;
+            minHeight: string;
+            maxHeight: string;
+            objectFit: ImageObjectFit | undefined;
+            objectPosition: string | undefined;
+        };
+        onLoad: () => void;
+        onError: (e: Event) => void;
+    }>;
+    isLoading: vue.ComputedRef<boolean>;
+    sizerStyle: vue.ComputedRef<{
+        display: string;
+        boxSizing: string;
+        paddingTop: string;
+        maxWidth?: undefined;
+    } | {
+        boxSizing: string;
+        display: string;
+        maxWidth: string;
+        paddingTop?: undefined;
+    } | undefined>;
+    sizerSvg: vue.ComputedRef<string>;
+};
+
+export { useImage };

package/dist/modules/image.hooks.d.ts

@@ -0,0 +1,76 @@
+import { ImageObjectFit } from './image.type.js';
+import * as vue from 'vue';
+import { ImageProps, ImageEmit } from './image.props.js';
+
+declare function useImage(props: ImageProps, emit: ImageEmit): {
+    rootAttrs: vue.ComputedRef<{
+        'data-pixel-component': string;
+        ref: vue.Ref<any>;
+        id: string | undefined;
+        style: {};
+    }>;
+    sizerAttrs: vue.ComputedRef<{
+        style: {};
+    }>;
+    imgSizerAttrs: vue.ComputedRef<{
+        src: string;
+        alt: string;
+        ariaHidden: boolean;
+        style: {
+            maxWidth: string;
+            display: string;
+            border: string;
+            margin: number;
+            padding: number;
+        };
+    }>;
+    sourceAttrs: vue.ComputedRef<{
+        srcset: string | undefined;
+        type: string;
+        media: string;
+    }>;
+    imgAttrs: vue.ComputedRef<{
+        ref: vue.Ref<any>;
+        alt: string | undefined;
+        src: string | undefined;
+        sizes: string | undefined;
+        decoding: "async";
+        style: {
+            position: "absolute";
+            display: string;
+            top: number;
+            left: number;
+            bottom: number;
+            right: number;
+            boxSizing: "border-box";
+            padding: number;
+            border: string;
+            margin: string;
+            width: string;
+            height: string;
+            minWidth: string;
+            maxWidth: string;
+            minHeight: string;
+            maxHeight: string;
+            objectFit: ImageObjectFit | undefined;
+            objectPosition: string | undefined;
+        };
+        onLoad: () => void;
+        onError: (e: Event) => void;
+    }>;
+    isLoading: vue.ComputedRef<boolean>;
+    sizerStyle: vue.ComputedRef<{
+        display: string;
+        boxSizing: string;
+        paddingTop: string;
+        maxWidth?: undefined;
+    } | {
+        boxSizing: string;
+        display: string;
+        maxWidth: string;
+        paddingTop?: undefined;
+    } | undefined>;
+    sizerSvg: vue.ComputedRef<string>;
+};
+
+export { useImage };