@fewangsit/wangsvue-fats 1.0.1-alpha.65 → 1.0.1-alpha.66

package/imagecompressor/index.es.js

@@ -1,29 +1,29 @@
-import { defineComponent as ke, mergeModels as re, inject as Ce, onMounted as Be, onUnmounted as Pe, ref as w, shallowRef as S, useModel as Me, reactive as Ue, computed as oe, watch as N, createElementBlock as f, openBlock as n, Fragment as V, createVNode as m, normalizeClass as y, withCtx as O, createElementVNode as h, createCommentVNode as c, createBlock as I, renderList as Fe, unref as $ } from "vue";
+import { defineComponent as Ce, mergeModels as oe, inject as Be, onMounted as Pe, onUnmounted as Me, ref as w, shallowRef as A, useModel as Ue, reactive as Fe, computed as J, watch as N, createElementBlock as f, openBlock as n, Fragment as V, createVNode as m, normalizeClass as y, withCtx as O, createElementVNode as h, createCommentVNode as c, createBlock as I, renderList as ze, unref as S } from "vue";
 import { g as Ae } from "../dialogprintqr/index.es.js";
 import { r as Se } from "../vendor/base64toblob/base64toblob.es.js";
 import { u as $e } from "../vendor/vee-validate/dist/vee-validate.esm.es.js";
 import { f as Re } from "../vendor/vue-advanced-cropper/dist/index.esm-bundler.es.js";
-import { u as ze } from "../plugins/WangsVue.es.js";
-import { g as De, a as Le } from "../utils/genPlaceholder.util.es.js";
-import { _ as Ne } from "../image/index.es.js";
-import { _ as R } from "../button/index.es.js";
-import { _ as Ve } from "../buttonradio/index.es.js";
-import { _ as Ee } from "../dialog/index.es.js";
-import { _ as Te } from "../dialogconfirm/index.es.js";
-import { _ as je } from "../fieldwrapper/index.es.js";
+import { u as De } from "../plugins/WangsVue.es.js";
+import { g as Le, a as Ne } from "../utils/genPlaceholder.util.es.js";
+import { _ as Ve } from "../image/index.es.js";
+import { _ as $ } from "../button/index.es.js";
+import { _ as Ee } from "../buttonradio/index.es.js";
+import { _ as Te } from "../dialog/index.es.js";
+import { _ as je } from "../dialogconfirm/index.es.js";
+import { _ as Oe } from "../fieldwrapper/index.es.js";
 import { _ as q } from "../icon/index.es.js";
-import { _ as Oe } from "../invisiblefield/index.es.js";
-import { _ as qe } from "../validatormessage/index.es.js";
-import { B as xe } from "../backgroundimagecropper/index.es.js";
+import { _ as qe } from "../invisiblefield/index.es.js";
+import { _ as xe } from "../validatormessage/index.es.js";
+import { B as Ke } from "../backgroundimagecropper/index.es.js";
 import { _ as se } from "../imageinputinfo/index.es.js";
 /* empty css                                           */
-var Ke = Se();
-const He = /* @__PURE__ */ Ae(Ke), We = {
+var He = Se();
+const We = /* @__PURE__ */ Ae(He), Ge = {
   key: 1,
   class: "flex gap-1 items-start"
-}, Ge = ["id", "multiple"], Je = ["for"], va = /* @__PURE__ */ ke({
+}, Je = ["id", "multiple"], Qe = ["for"], fa = /* @__PURE__ */ Ce({
   __name: "ImageCompressor",
-  props: /* @__PURE__ */ re({
+  props: /* @__PURE__ */ oe({
     initialName: {},
     multiple: { type: Boolean },
     defaultImage: {},
@@ -51,12 +51,12 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
     defaultImage: { default: 0 },
     defaultImageModifiers: {}
   }),
-  emits: /* @__PURE__ */ re(["apply", "applyProp", "update:defaultImage", "update:fieldValue", "delete"], ["update:defaultImage"]),
-  setup(J, { expose: ie, emit: ne }) {
-    const ue = Ce("preset", {}).image, l = J, k = ne, { locale: E } = ze("ImageCompressor");
-    Be(async () => {
-      fe(), M();
-    }), Pe(() => {
+  emits: /* @__PURE__ */ oe(["apply", "applyProp", "update:defaultImage", "update:fieldValue", "delete"], ["update:defaultImage"]),
+  setup(Q, { expose: ie, emit: ne }) {
+    const ue = Be("preset", {}).image, l = Q, k = ne, { locale: E } = De("ImageCompressor");
+    Pe(async () => {
+      ge(), M();
+    }), Me(() => {
       F(0), F(1);
     });
     const v = w([
@@ -68,12 +68,19 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
         src: null,
         type: null
       }
-    ]), me = Le(), x = w(), C = w(), s = w([]), Q = w(), X = S(0), K = w(), z = w(), d = S(), T = Me(J, "defaultImage"), i = Ue({
+    ]), me = Ne(), x = w(), C = w(), s = w([]), X = w(), Y = A(0), K = w(), R = w(), d = A(), T = Ue(Q, "defaultImage"), i = Fe({
       value: l.multiple ? [] : void 0
-    }), B = S(!1), b = S(), de = S(0), g = S(!1), H = w([!1, !1]), P = oe(() => `image/${l.fileType}`), W = (e) => typeof s.value[e] == "string" && s.value[e].includes("data:image/png;base64"), M = async () => {
+    }), B = A(!1), b = A(), de = A(0), g = A(!1), H = w([!1, !1]), P = J(() => `image/${l.fileType}`), W = (e) => typeof s.value[e] == "string" && s.value[e].includes("data:image/png;base64"), pe = J(() => {
+      const e = {
+        big: 125,
+        medium: 80,
+        small: 30
+      };
+      return l.type === "inline-table" ? e.small : e[l.imagePreviewSize] || e.small;
+    }), M = async () => {
       var e, a;
-      (e = l.imagePreviewUrl) != null && e.length ? s.value = Array.isArray(l.imagePreviewUrl) ? l.imagePreviewUrl : [l.imagePreviewUrl] : Array.isArray(l.compressedBlob) ? s.value = l.compressedBlob : l.compressedBlob ? s.value = [l.compressedBlob] : l.initialName ? (x.value = De(l.initialName, 125, me), s.value = [(a = x.value) == null ? void 0 : a.toDataURL()]) : s.value = [], l.imagePreviewUrl ? i.value = l.imagePreviewUrl : l.initialName && (i.value = await pe()), k("applyProp");
-    }, pe = async () => new Promise((e) => {
+      (e = l.imagePreviewUrl) != null && e.length ? s.value = Array.isArray(l.imagePreviewUrl) ? l.imagePreviewUrl : [l.imagePreviewUrl] : Array.isArray(l.compressedBlob) ? s.value = l.compressedBlob : l.compressedBlob ? s.value = [l.compressedBlob] : l.initialName ? (x.value = Le(l.initialName, 125, me), s.value = [(a = x.value) == null ? void 0 : a.toDataURL()]) : s.value = [], l.imagePreviewUrl ? i.value = l.imagePreviewUrl : l.initialName && (i.value = await ce()), k("applyProp");
+    }, ce = async () => new Promise((e) => {
       var a;
       (a = x.value) == null || a.toBlob((r) => {
         e(
@@ -84,8 +91,8 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
       });
     }), U = (e = !1) => {
       var a;
-      l.disabled || (e && (d.value = 1), (a = Q.value) == null || a.click());
-    }, ce = async (e) => {
+      l.disabled || (e && (d.value = 1), (a = X.value) == null || a.click());
+    }, ve = async (e) => {
       const { files: a } = e.target, r = Array.from(a ?? []).slice(
         0,
         s.value.length ? 1 : 2
@@ -93,37 +100,37 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
       for (const [t, u] of r.entries())
         try {
           const o = d.value ?? t;
-          await ve(u, o);
+          await fe(u, o);
         } catch (o) {
           console.error("Error loading image:", o);
         } finally {
           d.value = void 0;
         }
-    }, ve = async (e, a) => {
+    }, fe = async (e, a) => {
       const r = (u) => u.includes("image"), t = (u) => u > 1e6;
       return new Promise((u, o) => {
-        var D, A;
+        var D, z;
         if (e)
-          if (Y(a), !r(e.type))
+          if (Z(a), !r(e.type))
             B.value = !0, b.value = typeof l.validatorMessage != "string" && ((D = l.validatorMessage) != null && D.invalidFormat) ? l.validatorMessage.invalidFormat : "Tipe file harus berupa gambar!", M(), g.value = !1, F(a), o("Tipe file harus berupa gambar!");
           else if (t(e.size))
-            B.value = !0, b.value = typeof l.validatorMessage != "string" && ((A = l.validatorMessage) != null && A.exceed) ? l.validatorMessage.exceed : "Ukuran gambar terlalu besar! Maks. 1 MB", M(), g.value = !1, F(a), o("Ukuran gambar terlalu besar! Maks. 1 MB");
+            B.value = !0, b.value = typeof l.validatorMessage != "string" && ((z = l.validatorMessage) != null && z.exceed) ? l.validatorMessage.exceed : "Ukuran gambar terlalu besar! Maks. 1 MB", M(), g.value = !1, F(a), o("Ukuran gambar terlalu besar! Maks. 1 MB");
           else {
             F(a);
             const j = URL.createObjectURL(e), p = new FileReader();
             p.onload = (L) => {
-              var te;
-              v.value[a].src = j, v.value[a].type = ge(
-                (te = L == null ? void 0 : L.target) == null ? void 0 : te.result,
+              var re;
+              v.value[a].src = j, v.value[a].type = ye(
+                (re = L == null ? void 0 : L.target) == null ? void 0 : re.result,
                 e.type
               );
             }, p.onerror = (L) => {
               console.error("🚀 ~ returnnewPromise ~ e:", L);
             }, p.readAsArrayBuffer(e), d.value == null && (d.value = a), g.value || (g.value = !0), B.value = !1, b.value = void 0;
           }
-        de.value += 1, z.value = u;
+        de.value += 1, R.value = u;
       });
-    }, fe = () => {
+    }, ge = () => {
       l.useValidator && Object.assign(
         i,
         $e(l.fieldName, (e) => {
@@ -131,12 +138,12 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
           return !e && l.mandatory ? typeof l.validatorMessage != "string" && ((a = l.validatorMessage) != null && a.empty) ? l.validatorMessage.empty : (l.label ?? "Photo") + " must be uploaded" : l.invalid && l.validatorMessage ? l.validatorMessage : b.value ? b.value : !0;
         })
       );
-    }, Y = (e) => {
+    }, Z = (e) => {
       v.value[e] = {
         src: null,
         type: null
       };
-    }, ge = (e, a = null) => {
+    }, ye = (e, a = null) => {
       if (e) {
         const r = new Uint8Array(e).subarray(0, 4);
         let t = "";
@@ -158,45 +165,45 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
         }
       }
       return null;
-    }, Z = (e) => {
-      const a = He(e.split(",")[1], P.value);
+    }, _ = (e) => {
+      const a = We(e.split(",")[1], P.value);
       return window.URL.createObjectURL(a);
-    }, ye = async (e, a) => {
+    }, be = async (e, a) => {
       const r = await fetch(e).then((t) => t.blob());
       return new File([r], a, { type: P.value });
-    }, be = async () => {
+    }, we = async () => {
       const e = d.value ?? 0;
       try {
-        await we(e);
+        await he(e);
       } catch (a) {
         console.error(a);
       }
-      _();
-    }, _ = () => {
+      ee();
+    }, ee = () => {
       var e;
-      g.value = !1, (e = z.value) == null || e.call(z), z.value = void 0;
-    }, we = async (e) => {
+      g.value = !1, (e = R.value) == null || e.call(R), R.value = void 0;
+    }, he = async (e) => {
       if (K.value) {
         const a = K.value.getResult();
         if (a.canvas) {
           const r = a.canvas.toDataURL(P.value);
-          await he(r, e);
+          await Ie(r, e);
         }
       }
-    }, he = async (e, a) => {
+    }, Ie = async (e, a) => {
       try {
         C.value = document.createElement("canvas");
         const r = C.value.getContext("2d"), t = new Image();
         t.src = e, await t.decode();
         const u = 80 / 100, o = t.width * u, D = t.height * u;
         C.value.setAttribute("width", o.toString()), C.value.setAttribute("height", D.toString()), r && r.drawImage(t, 0, 0, o, D);
-        const A = C.value.toDataURL(P.value, 0.95), j = Date.now() + `.${l.fileType}`, p = {
+        const z = C.value.toDataURL(P.value, 0.95), j = Date.now() + `.${l.fileType}`, p = {
           canvas: C.value,
           compressed: {
-            blob: Z(A),
-            base64: A,
+            blob: _(z),
+            base64: z,
             fileName: j,
-            file: await ye(Z(A), j),
+            file: await be(_(z), j),
             size: "",
             type: P.value
           },
@@ -208,17 +215,17 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
       }
     }, F = (e) => {
       v.value[e].src && URL.revokeObjectURL(v.value[e].src);
-    }, ee = (e) => {
+    }, ae = (e) => {
       l.confirmOnDelete ? H.value[e] = !0 : l.emitDeleteFn ? k("delete", G, e) : G(e);
     }, G = (e = 0) => {
       B.value = !1, b.value = void 0, s.value = s.value.toSpliced(e, 1), F(e), v.value[e] = { src: null, type: null }, v.value = [v.value[+!e], v.value[e]], d.value = 0, T.value = 0, l.confirmOnDelete || k("delete"), l.multiple && Array.isArray(i.value) ? i.value = i.value.toSpliced(e, 1) : i.handleReset && i.handleReset();
-    }, ae = (e) => {
+    }, le = (e) => {
       var r;
       const a = (r = s.value[e]) == null ? void 0 : r.toString();
-      d.value = e, a != null && a.includes("blob") ? (d.value = e, g.value = !0) : (Y(e), U());
-    }, Ie = () => {
+      d.value = e, a != null && a.includes("blob") ? (d.value = e, g.value = !0) : (Z(e), U());
+    }, ke = () => {
       U();
-    }, le = oe(() => navigator.userAgent.includes("Chrome"));
+    }, te = J(() => navigator.userAgent.includes("Chrome"));
     return N(
       () => i.value,
       (e) => {
@@ -227,7 +234,7 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
     ), N(b, (e) => {
       e && i.setErrors && i.setErrors(e);
     }), N(g, (e) => {
-      e || X.value++;
+      e || Y.value++;
     }), N(
       () => l.initialName,
       () => {
@@ -240,7 +247,7 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
       },
       { once: !0 }
     ), ie({ assignPreviewImagesFromProp: M }), (e, a) => (n(), f(V, null, [
-      m(je, {
+      m(Oe, {
         class: y([{ "!w-max": !l.multiple, "!w-full": l.multiple }]),
         info: l.fieldInfo,
         label: l.label,
@@ -259,7 +266,7 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
             ]),
             "data-wv-section": "wrapper"
           }, [
-            s.value.length ? (n(!0), f(V, { key: 0 }, Fe(s.value, (r, t) => {
+            s.value.length ? (n(!0), f(V, { key: 0 }, ze(s.value, (r, t) => {
               var u;
               return n(), f("div", {
                 key: t,
@@ -292,17 +299,18 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
                     ]),
                     "data-wv-section": "image-wrapper"
                   }, [
-                    m(Ne, {
+                    m(Ve, {
                       class: y([{ "w-[30px] h-[30px]": e.type === "inline-table" }, "transition-opacity duration-300"]),
                       rounded: e.rounded,
-                      size: e.type === "normal" ? e.imagePreviewSize : "small",
                       src: r,
+                      "thumbnail-size": pe.value,
+                      "use-default-size": !1,
                       "data-wv-section": "preview-image"
-                    }, null, 8, ["class", "rounded", "size", "src"]),
+                    }, null, 8, ["class", "rounded", "src", "thumbnail-size"]),
                     W(t) ? (n(), f("button", {
                       key: 0,
                       class: y([
-                        (u = $(ue)) == null ? void 0 : u.button.class,
+                        (u = S(ue)) == null ? void 0 : u.button.class,
                         "hover:bg-opacity-0 rounded-lg opacity-0"
                       ]),
                       onClick: a[0] || (a[0] = (o) => U(!1)),
@@ -326,16 +334,16 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
                       "data-wv-section": "preview-buttons"
                     }, [
                       e.type === "normal" ? (n(), f(V, { key: 0 }, [
-                        m(R, {
-                          onClick: (o) => ae(t),
+                        m($, {
+                          onClick: (o) => le(t),
                           class: "!py-0 !px-1 !h-max",
                           icon: "pencil",
                           label: "Edit",
                           text: ""
                         }, null, 8, ["onClick"]),
-                        e.useDeleteButton ? (n(), I(R, {
+                        e.useDeleteButton ? (n(), I($, {
                           key: 0,
-                          onClick: (o) => ee(t),
+                          onClick: (o) => ae(t),
                           class: "!py-0 !px-1 !h-max",
                           icon: "delete-bin",
                           label: "Delete",
@@ -344,20 +352,20 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
                         }, null, 8, ["onClick"])) : c("", !0)
                       ], 64)) : (n(), f(V, { key: 1 }, [
                         m(q, {
-                          onClick: (o) => ae(t),
+                          onClick: (o) => le(t),
                           class: "text-xs p-0.5 rounded-xs mr-1",
                           icon: "pencil",
                           severity: "primary"
                         }, null, 8, ["onClick"]),
                         m(q, {
-                          onClick: (o) => ee(t),
+                          onClick: (o) => ae(t),
                           class: "text-xs p-0.5 rounded-xs",
                           icon: "delete-bin",
                           severity: "danger"
                         }, null, 8, ["onClick"])
                       ], 64))
                     ], 2),
-                    m(Te, {
+                    m(je, {
                       visible: H.value[t],
                       "onUpdate:visible": (o) => H.value[t] = o,
                       closable: !1,
@@ -377,7 +385,7 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
                   onAddPhoto: a[2] || (a[2] = (o) => U(!0))
                 }, {
                   default: O(() => [
-                    s.value.length === 2 && l.multiple ? (n(), I(Ve, {
+                    s.value.length === 2 && l.multiple ? (n(), I(Ee, {
                       key: 0,
                       modelValue: T.value,
                       "onUpdate:modelValue": a[1] || (a[1] = (o) => T.value = o),
@@ -388,7 +396,7 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
                   ]),
                   _: 2
                 }, 1032, ["custom-requirements", "show-add-button", "show-info"])) : c("", !0),
-                e.multiple && s.value.length == 1 && e.type === "inline-table" ? (n(), I(R, {
+                e.multiple && s.value.length == 1 && e.type === "inline-table" ? (n(), I($, {
                   key: 1,
                   onClick: a[3] || (a[3] = (o) => U(!0)),
                   icon: "add",
@@ -396,7 +404,7 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
                   text: ""
                 })) : c("", !0)
               ], 2);
-            }), 128)) : e.type != "inline-table" ? (n(), f("div", We, [
+            }), 128)) : e.type != "inline-table" ? (n(), f("div", Ge, [
               h("button", {
                 class: y([
                   {
@@ -408,8 +416,8 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
                   "ring-inset",
                   "cursor-pointer",
                   {
-                    "ring-1": !le.value,
-                    "ring-[0.5px]": le.value
+                    "ring-1": !te.value,
+                    "ring-[0.5px]": te.value
                   },
                   { "rounded-full": e.rounded, "rounded-lg": !e.rounded },
                   {
@@ -440,16 +448,16 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
           ], 2),
           (n(), f("input", {
             id: e.fieldName,
-            key: X.value,
+            key: Y.value,
             ref_key: "inputImageFile",
-            ref: Q,
+            ref: X,
             multiple: l.multiple && !s.value.length,
-            onChange: ce,
+            onChange: ve,
             accept: "image/*",
             class: "hidden",
             "data-wv-section": "hidden-image-input",
             type: "file"
-          }, null, 40, Ge)),
+          }, null, 40, Je)),
           e.type === "inline-table" && !s.value.length ? (n(), f("label", {
             key: 0,
             for: e.fieldName,
@@ -457,13 +465,13 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
           }, a[6] || (a[6] = [
             h("span", { class: "inline-flex items-center text-body-medium rounded-bl rounded-tl bg-general-50 px-3 h-[26px] border-[0.5px] border-general-200" }, " Browse ", -1),
             h("span", { class: "inline-flex items-center text-body-medium !text-general-200 !font-light rounded-br rounded-tr px-3 h-[26px] leading-4 border-[0.5px] border-l-0 border-general-200" }, " Select File ", -1)
-          ]), 8, Je)) : c("", !0),
-          e.showValidatorMessage ? (n(), I(qe, {
+          ]), 8, Qe)) : c("", !0),
+          e.showValidatorMessage ? (n(), I(xe, {
             key: 1,
             format: !1,
             message: i.errorMessage ?? b.value
           }, null, 8, ["message"])) : c("", !0),
-          l.multiple ? (n(), I(Oe, {
+          l.multiple ? (n(), I(qe, {
             key: 2,
             value: T.value ? "secondImage" : "firstImage",
             "field-name": "defaultImage"
@@ -471,11 +479,11 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
         ]),
         _: 1
       }, 8, ["class", "info", "label", "mandatory"]),
-      m(Ee, {
+      m(Te, {
         visible: g.value,
         "onUpdate:visible": a[5] || (a[5] = (r) => g.value = r),
         draggable: !1,
-        header: $(E).cropDialogHeader,
+        header: S(E).cropDialogHeader,
         class: "w-max max-w-[98vw] min-w-[min(500px,98vw)] !max-h-[94vh]",
         "content-class": "overflow-hidden overflow-y-auto min-h-[100px]",
         "data-wv-section": "dialog-cropper",
@@ -483,36 +491,36 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
         modal: ""
       }, {
         footer: O(() => [
-          m(R, {
-            label: $(E).cancelCropLabel,
-            onClick: _,
+          m($, {
+            label: S(E).cancelCropLabel,
+            onClick: ee,
             "data-wv-section": "cancel-crop",
             severity: "secondary",
             text: "",
             type: "button"
           }, null, 8, ["label"]),
-          m(R, {
-            label: $(E).changeImageLabel,
-            onClick: Ie,
+          m($, {
+            label: S(E).changeImageLabel,
+            onClick: ke,
             "data-wv-section": "change-image-button",
             text: "",
             type: "button"
           }, null, 8, ["label"]),
-          m(R, {
-            label: $(E).applyCropLabel,
-            onClick: be,
+          m($, {
+            label: S(E).applyCropLabel,
+            onClick: we,
             "data-wv-section": "apply-image-button",
             severity: "success",
             type: "button"
           }, null, 8, ["label"])
         ]),
         default: O(() => [
-          d.value != null ? (n(), I($(Re), {
+          d.value != null ? (n(), I(S(Re), {
             key: 0,
             ref_key: "vueAdvanceCropper",
             ref: K,
             "auto-zoom": !1,
-            "background-wrapper-component": xe,
+            "background-wrapper-component": Ke,
             src: v.value[d.value].src,
             class: "upload-example-cropper h-400",
             "foreground-class": "h-400",
@@ -525,5 +533,5 @@ const He = /* @__PURE__ */ Ae(Ke), We = {
   }
 });
 export {
-  va as _
+  fa as _
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fewangsit/wangsvue-fats",
-  "version": "1.0.1-alpha.65",
+  "version": "1.0.1-alpha.66",
   "author": "Wangsit FE Developer",
   "description": "Fixed Asset Tagsamurai VueJS Component Library",
   "type": "module",