@skeletonizer/vue 0.0.17-alpha.0 → 0.0.18-alpha.0

package/dist/skeletonizer-vue.mjs

@@ -1,678 +1,6 @@
-import { defineComponent as z, reactive as T, watch as C, resolveDirective as x, openBlock as f, createElementBlock as b, Fragment as I, renderList as N, withDirectives as P, renderSlot as y } from "vue";
-var M = (i, e, t) => {
-  if (!e.has(i))
-    throw TypeError("Cannot " + t);
-}, q = (i, e, t) => (M(i, e, "read from private field"), t ? t.call(i) : e.get(i)), E = (i, e, t) => {
-  if (e.has(i))
-    throw TypeError("Cannot add the same private member more than once");
-  e instanceof WeakSet ? e.add(i) : e.set(i, t);
-}, n = (i, e, t, s) => (M(i, e, "write to private field"), s ? s.call(i, t) : e.set(i, t), t);
-const k = [
-  "Lorem",
-  "ipsum",
-  "dolor",
-  "sit",
-  "amet,",
-  "consectetur",
-  "adipiscing",
-  "elit.",
-  "Mauris",
-  "posuere",
-  "tincidunt",
-  "purus,",
-  "id",
-  "laoreet",
-  "mauris",
-  "cursus",
-  "nec.",
-  "Quisque",
-  "id",
-  "ante",
-  "id",
-  "tellus",
-  "aliquam",
-  "pulvinar",
-  "eget",
-  "eu",
-  "dolor.",
-  "Donec",
-  "egestas",
-  "dapibus",
-  "massa,",
-  "vel",
-  "finibus",
-  "lectus",
-  "congue",
-  "eu.",
-  "Morbi",
-  "quis",
-  "erat",
-  "condimentum,",
-  "molestie",
-  "ex",
-  "a,",
-  "sollicitudin",
-  "metus.",
-  "Vestibulum",
-  "orci",
-  "metus,",
-  "sagittis",
-  "a",
-  "sagittis",
-  "a,",
-  "varius",
-  "id",
-  "diam.",
-  "Cras",
-  "egestas",
-  "eros",
-  "vestibulum,",
-  "tempus",
-  "ipsum",
-  "pellentesque,",
-  "dictum",
-  "justo.",
-  "Quisque",
-  "sed",
-  "justo",
-  "metus.",
-  "Suspendisse",
-  "id",
-  "felis",
-  "vitae",
-  "nunc",
-  "auctor",
-  "tristique",
-  "eu",
-  "sit",
-  "amet",
-  "mi.",
-  "Ut",
-  "luctus",
-  "posuere",
-  "viverra.",
-  "Nunc",
-  "sed",
-  "augue",
-  "a",
-  "velit",
-  "sodales",
-  "iaculis.",
-  "Sed",
-  "at",
-  "arcu",
-  "non",
-  "massa",
-  "hendrerit",
-  "scelerisque.",
-  "Nunc",
-  "commodo",
-  "vulputate",
-  "vestibulum.",
-  "Duis",
-  "ut",
-  "leo",
-  "nisi.",
-  "Mauris",
-  "dignissim",
-  "quis",
-  "sem",
-  "non",
-  "blandit.",
-  "Suspendisse",
-  "id",
-  "elit",
-  "eget",
-  "leo",
-  "efficitur",
-  "maximus.",
-  "Ut",
-  "eu",
-  "auctor",
-  "ligula.",
-  "Nulla",
-  "in",
-  "leo",
-  "luctus,",
-  "tempor",
-  "justo",
-  "vitae,",
-  "condimentum",
-  "massa.",
-  "Quisque",
-  "venenatis",
-  "elementum",
-  "posuere.",
-  "Sed",
-  "bibendum",
-  "bibendum",
-  "enim,",
-  "in",
-  "faucibus",
-  "ante.",
-  "Aliquam",
-  "pretium",
-  "sapien",
-  "ac",
-  "eleifend",
-  "suscipit.",
-  "Duis",
-  "lacinia",
-  "justo",
-  "quis",
-  "diam",
-  "elementum,",
-  "vitae",
-  "fringilla",
-  "lectus",
-  "faucibus.",
-  "Integer",
-  "dictum",
-  "commodo",
-  "diam",
-  "a",
-  "tempus.",
-  "Aenean",
-  "elementum",
-  "egestas",
-  "quam,",
-  "eget",
-  "feugiat",
-  "ligula",
-  "imperdiet",
-  "vitae.",
-  "Morbi",
-  "mattis",
-  "dui",
-  "sed",
-  "elementum",
-  "mollis.",
-  "In",
-  "interdum",
-  "viverra",
-  "urna,",
-  "at",
-  "scelerisque",
-  "sapien.",
-  "Sed",
-  "molestie",
-  "blandit",
-  "risus",
-  "nec",
-  "ornare.",
-  "Integer",
-  "pharetra",
-  "massa",
-  "purus,",
-  "ut",
-  "fringilla",
-  "augue",
-  "sollicitudin",
-  "in.",
-  "Pellentesque",
-  "eu",
-  "leo",
-  "pharetra,",
-  "hendrerit",
-  "lectus",
-  "id,",
-  "dapibus",
-  "ipsum.",
-  "Quisque",
-  "tincidunt",
-  "euismod",
-  "venenatis.",
-  "Sed",
-  "lacus",
-  "ex,",
-  "pulvinar",
-  "at",
-  "dui",
-  "vitae,",
-  "condimentum",
-  "rutrum",
-  "eros.",
-  "Nunc",
-  "viverra",
-  "cursus",
-  "ante,",
-  "ac",
-  "dapibus",
-  "ligula",
-  "volutpat",
-  "nec.",
-  "Integer",
-  "commodo",
-  "in",
-  "tortor",
-  "eget",
-  "aliquet.",
-  "Nam",
-  "bibendum",
-  "lectus",
-  "vitae",
-  "ligula",
-  "interdum",
-  "scelerisque.",
-  "Morbi",
-  "sit",
-  "amet",
-  "augue",
-  "diam.",
-  "Etiam",
-  "purus",
-  "lorem,",
-  "sodales",
-  "sed",
-  "sodales",
-  "ac,",
-  "dignissim",
-  "a",
-  "tellus.",
-  "Nunc",
-  "vehicula",
-  "nibh",
-  "in",
-  "erat",
-  "rhoncus",
-  "ullamcorper.",
-  "Orci",
-  "varius",
-  "natoque",
-  "penatibus",
-  "et",
-  "magnis",
-  "dis",
-  "parturient",
-  "montes,",
-  "nascetur",
-  "ridiculus",
-  "mus.",
-  "Aliquam",
-  "augue",
-  "nunc,",
-  "fringilla",
-  "at",
-  "dictum",
-  "quis,",
-  "luctus",
-  "sit",
-  "amet",
-  "nisl.",
-  "Nam",
-  "lectus",
-  "felis,",
-  "egestas",
-  "nec",
-  "lacinia",
-  "non,",
-  "auctor",
-  "eget",
-  "lorem.",
-  "Nunc",
-  "vel",
-  "velit",
-  "quis",
-  "magna",
-  "hendrerit",
-  "volutpat",
-  "in",
-  "nec",
-  "leo.",
-  "Aenean",
-  "tempor",
-  "lectus",
-  "tortor,",
-  "nec",
-  "bibendum",
-  "elit",
-  "aliquam",
-  "at.",
-  "In",
-  "id",
-  "libero",
-  "tincidunt,",
-  "interdum",
-  "libero",
-  "sit",
-  "amet,",
-  "gravida",
-  "est.",
-  "Morbi",
-  "ut",
-  "ipsum",
-  "enim.",
-  "Duis",
-  "vel",
-  "posuere",
-  "ante.",
-  "Praesent",
-  "sollicitudin",
-  "lacus",
-  "sit",
-  "amet",
-  "luctus",
-  "euismod.",
-  "Phasellus",
-  "lorem",
-  "elit,",
-  "auctor",
-  "sed",
-  "risus",
-  "a,",
-  "faucibus",
-  "tempor",
-  "lacus.",
-  "Integer",
-  "id",
-  "tellus",
-  "ut",
-  "eros",
-  "congue",
-  "ornare.",
-  "Cras",
-  "vitae",
-  "ornare",
-  "sem.",
-  "Cras",
-  "tincidunt",
-  "arcu",
-  "efficitur",
-  "mauris",
-  "molestie,",
-  "eu",
-  "eleifend",
-  "eros",
-  "mattis.",
-  "Integer",
-  "id",
-  "diam",
-  "mauris.",
-  "Duis",
-  "suscipit",
-  "enim",
-  "risus,",
-  "non",
-  "dignissim",
-  "nulla",
-  "imperdiet",
-  "hendrerit.",
-  "Vestibulum",
-  "sed",
-  "dignissim",
-  "erat.",
-  "Aliquam",
-  "erat",
-  "volutpat.",
-  "Nunc",
-  "mattis",
-  "auctor",
-  "justo,",
-  "non",
-  "fringilla",
-  "dolor",
-  "blandit",
-  "a.",
-  "Donec",
-  "et",
-  "velit",
-  "tristique",
-  "lacus",
-  "varius",
-  "aliquam.",
-  "Praesent",
-  "ac",
-  "molestie",
-  "quam,",
-  "vitae",
-  "scelerisque",
-  "tellus.",
-  "Praesent",
-  "eleifend",
-  "sed",
-  "diam",
-  "in",
-  "gravida.",
-  "Donec",
-  "tristique",
-  "sapien",
-  "ante,",
-  "in",
-  "egestas",
-  "diam",
-  "porta",
-  "ac.",
-  "Proin",
-  "ac",
-  "justo",
-  "eleifend,",
-  "consequat",
-  "ante",
-  "vitae,",
-  "laoreet",
-  "augue.",
-  "Mauris",
-  "scelerisque",
-  "arcu",
-  "dolor,",
-  "quis",
-  "lobortis",
-  "risus",
-  "pellentesque",
-  "eu.",
-  "Praesent",
-  "in",
-  "enim",
-  "a",
-  "elit",
-  "feugiat",
-  "dapibus.",
-  "Duis",
-  "quis",
-  "bibendum",
-  "mi.",
-  "Vestibulum",
-  "lacinia,",
-  "sem",
-  "at",
-  "efficitur",
-  "volutpat,",
-  "velit",
-  "ligula",
-  "vulputate",
-  "nisi,",
-  "sit",
-  "amet",
-  "dapibus",
-  "risus",
-  "metus",
-  "sed",
-  "est.",
-  "Sed",
-  "in",
-  "venenatis",
-  "ante.",
-  "Pellentesque",
-  "vel",
-  "ipsum",
-  "pharetra,",
-  "efficitur",
-  "quam",
-  "ut,",
-  "hendrerit",
-  "dolor."
-];
-var l = /* @__PURE__ */ ((i) => (i.Text = "text", i.Input = "input", i.Image = "image", i.Video = "video", i.WrapperElement = "wrapper-element", i))(l || {}), v = /* @__PURE__ */ ((i) => (i.PrimaryColor = "rgba(100, 100, 100, .6)", i.SecondaryColor = "rgba(100, 100, 100, .3)", i))(v || {});
-class g {
-  static daysInMs(e) {
-    return e * 24 * 60 * 60 * 1e3;
-  }
-  static dateBetween(e, t) {
-    return new Date(e.getTime() + Math.random() * (t.getTime() - e.getTime()));
-  }
-}
-let w = 0;
-var r;
-class L {
-  constructor() {
-    E(this, r, void 0);
-  }
-  get value() {
-    return q(this, r);
-  }
-  words(e) {
-    this.assertType();
-    let t = "", s = 0;
-    for (; s < e; )
-      t += this.randomLoremWord() + " ", s++;
-    return n(this, r, t.trim()), this;
-  }
-  paragraphs(e) {
-    this.assertType();
-    let t = "", s = 0;
-    const c = 50;
-    for (; s < e; ) {
-      const u = c - Math.round(c * Math.random() * 0.2) * (Math.random() < 0.5 ? -1 : 1);
-      t += this.words(u).value, s !== e - 1 && (t += `
-`), s++;
-    }
-    return n(this, r, t), this;
-  }
-  number(e = 0, t = 1e3) {
-    return this.assertType(), n(this, r, Math.ceil(Math.random() * (t - e)) + e), this;
-  }
-  multiply(e) {
-    return this.assertType(), n(this, r, q(this, r) * e), this;
-  }
-  date(e = {}) {
-    this.assertType();
-    let t = e.max ?? /* @__PURE__ */ new Date("2100-01-01"), s = e.min ?? /* @__PURE__ */ new Date("1970-01-01");
-    return e.isFuture ? s = new Date(Date.now() + g.daysInMs(1)) : e.isPast && (t = new Date(Date.now() - g.daysInMs(1))), n(this, r, g.dateBetween(s, t)), this;
-  }
-  uuid() {
-    return w++, this.assertType(), n(this, r, w), this;
-  }
-  boolean() {
-    return this.assertType(), n(this, r, Math.random() <= 0.5), this;
-  }
-  symbol(e = 0) {
-    return this.assertType(), n(this, r, Symbol(e)), this;
-  }
-  identical(e) {
-    return this.assertType(), n(this, r, e), this;
-  }
-  assertType() {
-  }
-  randomLoremWord() {
-    const e = Math.floor(Math.random() * k.length);
-    return k[e] ?? "lorem";
-  }
-}
-r = /* @__PURE__ */ new WeakMap();
-class p {
-  constructor(e) {
-    this.generator = e, this.viewModel = this.generator(), this.val = p.modelToValue(this.viewModel);
-  }
-  get value() {
-    return this.val;
-  }
-  static modelToValue(e) {
-    if (e instanceof L)
-      return e.value;
-    if (Array.isArray(e))
-      return e.map(this.modelToValue);
-    {
-      const t = {};
-      return Object.keys(e).forEach((s) => {
-        t[s] = p.modelToValue(
-          e[s]
-        );
-      }), t;
-    }
-  }
-}
-class j {
-  // when accessing skeletonized component properties / methods from within the view, they should be accessed via proxy method
-  // this is necessary to ensure:
-  // - that all properties / methods accessed from within skeletonized part of the view are a part of skeletonSchema
-  // - that typescript understands correct type of each property / method accessed from within the skeletonized part of the view
-  proxy(e) {
-    return e instanceof p ? e.value : e;
-  }
-}
-class V {
-  constructor() {
-    this.config = null, this.viewModels = [];
-  }
-  // the method should be called from within specific packages whenever the adapter component's config changes
-  setupModels() {
-    if (this.config) {
-      const e = this.config.schemaGenerator;
-      this.viewModels = Array.from({ length: this.config.repeat }, () => new p(e));
-    }
-  }
-}
-const S = class o {
-  static skeletonizeProjectedTemplate(e, t) {
-    const s = (t == null ? void 0 : t.primaryColor) ?? v.PrimaryColor, c = (t == null ? void 0 : t.secondaryColor) ?? v.SecondaryColor;
-    e.setAttribute(
-      "style",
-      `--skeletonizer-primary-color: ${s}; --skeletonizer-secondary-color: ${c};`
-    ), Array.from(e.querySelectorAll("*:not(svg, [data-skeletonizer])")).forEach((u) => {
-      const h = [
-        "br",
-        "b",
-        "strong",
-        "i",
-        "em",
-        "mark",
-        "small",
-        "del",
-        "ins",
-        "sub",
-        "sup"
-      ], m = Array.from(u.childNodes).map((a) => a.nodeName.toLowerCase()).filter((a) => !h.includes(a)), D = m.length > 0 && m.some((a) => a !== m[0]);
-      u.childNodes.forEach((a) => {
-        switch (a.nodeName.toLowerCase()) {
-          case "#text": {
-            if (this.assertAs(a), a.wholeText.trim())
-              if (D) {
-                const d = document.createElement("span");
-                d.innerText = a.cloneNode().wholeText, d.innerText.length && a.replaceWith(
-                  o.skeletonizedSpanGenerator(d.innerText, l.Text)
-                );
-              } else {
-                const d = o.skeletonizedSpanGenerator(u.innerHTML, l.Text);
-                u.innerHTML = d.outerHTML;
-              }
-            break;
-          }
-          case "input": {
-            a.setAttribute(o.dataAttr, l.Input);
-            break;
-          }
-          case "img": {
-            a.setAttribute(o.dataAttr, l.Image);
-            break;
-          }
-          case "video": {
-            a.setAttribute(o.dataAttr, l.Video);
-            break;
-          }
-        }
-      });
-    }), e.setAttribute(o.dataAttr, l.WrapperElement);
-  }
-  static skeletonizedSpanGenerator(e, t) {
-    const s = document.createElement("span");
-    return s.innerHTML = e, s.setAttribute(o.dataAttr, t), s;
-  }
-  static assertAs(e) {
-  }
-};
-S.dataAttr = "data-skeletonizer";
-let W = S;
-const B = /* @__PURE__ */ z({
+import { defineComponent as m, reactive as l, watch as S, resolveDirective as u, openBlock as r, createElementBlock as s, Fragment as d, renderList as v, withDirectives as f, renderSlot as i } from "vue";
+import { SkeletonAdapterComponent as h, SkeletonAbstractComponent as w, SkeletonDirective as z } from "@skeletonizer/utils";
+const g = /* @__PURE__ */ m({
   __name: "SkeletonizerSkeleton",
   props: {
     config: {},
@@ -680,46 +8,46 @@ const B = /* @__PURE__ */ z({
     scope: {},
     colorSchema: {}
   },
-  setup(i) {
-    const e = i, t = T(new V());
-    return C(
+  setup(n) {
+    const e = n, t = l(new h());
+    return S(
       e.config,
-      (s) => {
-        t.config = s, t.setupModels();
+      (o) => {
+        t.config = o, t.setupModels();
       },
       { immediate: !0 }
-    ), (s, c) => {
-      const u = x("skeletonize");
-      return s.showSkeleton ? (f(!0), b(I, { key: 0 }, N(t.viewModels, (h, m) => P((f(), b("div", { key: m }, [
-        y(s.$slots, "default", {
-          scope: h.value
+    ), (o, y) => {
+      const a = u("skeletonize");
+      return o.showSkeleton ? (r(!0), s(d, { key: 0 }, v(t.viewModels, (k, p) => f((r(), s("div", { key: p }, [
+        i(o.$slots, "default", {
+          scope: k.value
         })
       ])), [
-        [u, e.colorSchema]
-      ])), 128)) : y(s.$slots, "default", {
+        [a, e.colorSchema]
+      ])), 128)) : i(o.$slots, "default", {
         key: 1,
         scope: e.scope
       });
     };
   }
 });
-class A extends j {
+class c extends w {
   constructor(e, t) {
     super(), this.skeletonConfig = e, this.showSkeleton = t;
   }
   static generate(e, t) {
-    return T(new A(e, t));
+    return l(new c(e, t));
   }
 }
-const H = {
-  install: (i) => {
-    i.component("SkeletonizerSkeleton", B), i.directive("skeletonize", (e, t) => {
-      W.skeletonizeProjectedTemplate(e, t.value);
+const B = {
+  install: (n) => {
+    n.component("SkeletonizerSkeleton", g), n.directive("skeletonize", (e, t) => {
+      z.skeletonizeProjectedTemplate(e, t.value);
     });
   }
 };
 export {
-  A as SkeletonizerComponentComposable,
-  H as SkeletonizerPlugin,
-  B as SkeletonizerSkeleton
+  c as SkeletonizerComponentComposable,
+  B as SkeletonizerPlugin,
+  g as SkeletonizerSkeleton
 };

package/dist/skeletonizer-vue.umd.js

@@ -1,3 +1,2 @@
-(function(o,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],r):(o=typeof globalThis<"u"?globalThis:o||self,r(o.SkeletonizerVue={},o.Vue))})(this,function(o,r){"use strict";var y=document.createElement("style");y.textContent=`[data-skeletonizer=wrapper-element]{--skeletonizer-text-background: rgba(0, 0, 0, .2);display:contents;filter:grayscale(100%);pointer-events:none}[data-skeletonizer=wrapper-element] *{pointer-events:none}[data-skeletonizer=wrapper-element] [data-skeletonizer=text]{animation:text-animation 2s infinite ease-in-out;background:var(--skeletonizer-primary-color);border-radius:50px;color:#0000!important}@keyframes text-animation{0%{background:var(--skeletonizer-primary-color)}50%{background:var(--skeletonizer-secondary-color)}to{background:var(--skeletonizer-primary-color)}}
-`,document.head.appendChild(y);var q=(i,e,t)=>{if(!e.has(i))throw TypeError("Cannot "+t)},w=(i,e,t)=>(q(i,e,"read from private field"),t?t.call(i):e.get(i)),A=(i,e,t)=>{if(e.has(i))throw TypeError("Cannot add the same private member more than once");e instanceof WeakSet?e.add(i):e.set(i,t)},u=(i,e,t,s)=>(q(i,e,"write to private field"),s?s.call(i,t):e.set(i,t),t);const T=["Lorem","ipsum","dolor","sit","amet,","consectetur","adipiscing","elit.","Mauris","posuere","tincidunt","purus,","id","laoreet","mauris","cursus","nec.","Quisque","id","ante","id","tellus","aliquam","pulvinar","eget","eu","dolor.","Donec","egestas","dapibus","massa,","vel","finibus","lectus","congue","eu.","Morbi","quis","erat","condimentum,","molestie","ex","a,","sollicitudin","metus.","Vestibulum","orci","metus,","sagittis","a","sagittis","a,","varius","id","diam.","Cras","egestas","eros","vestibulum,","tempus","ipsum","pellentesque,","dictum","justo.","Quisque","sed","justo","metus.","Suspendisse","id","felis","vitae","nunc","auctor","tristique","eu","sit","amet","mi.","Ut","luctus","posuere","viverra.","Nunc","sed","augue","a","velit","sodales","iaculis.","Sed","at","arcu","non","massa","hendrerit","scelerisque.","Nunc","commodo","vulputate","vestibulum.","Duis","ut","leo","nisi.","Mauris","dignissim","quis","sem","non","blandit.","Suspendisse","id","elit","eget","leo","efficitur","maximus.","Ut","eu","auctor","ligula.","Nulla","in","leo","luctus,","tempor","justo","vitae,","condimentum","massa.","Quisque","venenatis","elementum","posuere.","Sed","bibendum","bibendum","enim,","in","faucibus","ante.","Aliquam","pretium","sapien","ac","eleifend","suscipit.","Duis","lacinia","justo","quis","diam","elementum,","vitae","fringilla","lectus","faucibus.","Integer","dictum","commodo","diam","a","tempus.","Aenean","elementum","egestas","quam,","eget","feugiat","ligula","imperdiet","vitae.","Morbi","mattis","dui","sed","elementum","mollis.","In","interdum","viverra","urna,","at","scelerisque","sapien.","Sed","molestie","blandit","risus","nec","ornare.","Integer","pharetra","massa","purus,","ut","fringilla","augue","sollicitudin","in.","Pellentesque","eu","leo","pharetra,","hendrerit","lectus","id,","dapibus","ipsum.","Quisque","tincidunt","euismod","venenatis.","Sed","lacus","ex,","pulvinar","at","dui","vitae,","condimentum","rutrum","eros.","Nunc","viverra","cursus","ante,","ac","dapibus","ligula","volutpat","nec.","Integer","commodo","in","tortor","eget","aliquet.","Nam","bibendum","lectus","vitae","ligula","interdum","scelerisque.","Morbi","sit","amet","augue","diam.","Etiam","purus","lorem,","sodales","sed","sodales","ac,","dignissim","a","tellus.","Nunc","vehicula","nibh","in","erat","rhoncus","ullamcorper.","Orci","varius","natoque","penatibus","et","magnis","dis","parturient","montes,","nascetur","ridiculus","mus.","Aliquam","augue","nunc,","fringilla","at","dictum","quis,","luctus","sit","amet","nisl.","Nam","lectus","felis,","egestas","nec","lacinia","non,","auctor","eget","lorem.","Nunc","vel","velit","quis","magna","hendrerit","volutpat","in","nec","leo.","Aenean","tempor","lectus","tortor,","nec","bibendum","elit","aliquam","at.","In","id","libero","tincidunt,","interdum","libero","sit","amet,","gravida","est.","Morbi","ut","ipsum","enim.","Duis","vel","posuere","ante.","Praesent","sollicitudin","lacus","sit","amet","luctus","euismod.","Phasellus","lorem","elit,","auctor","sed","risus","a,","faucibus","tempor","lacus.","Integer","id","tellus","ut","eros","congue","ornare.","Cras","vitae","ornare","sem.","Cras","tincidunt","arcu","efficitur","mauris","molestie,","eu","eleifend","eros","mattis.","Integer","id","diam","mauris.","Duis","suscipit","enim","risus,","non","dignissim","nulla","imperdiet","hendrerit.","Vestibulum","sed","dignissim","erat.","Aliquam","erat","volutpat.","Nunc","mattis","auctor","justo,","non","fringilla","dolor","blandit","a.","Donec","et","velit","tristique","lacus","varius","aliquam.","Praesent","ac","molestie","quam,","vitae","scelerisque","tellus.","Praesent","eleifend","sed","diam","in","gravida.","Donec","tristique","sapien","ante,","in","egestas","diam","porta","ac.","Proin","ac","justo","eleifend,","consequat","ante","vitae,","laoreet","augue.","Mauris","scelerisque","arcu","dolor,","quis","lobortis","risus","pellentesque","eu.","Praesent","in","enim","a","elit","feugiat","dapibus.","Duis","quis","bibendum","mi.","Vestibulum","lacinia,","sem","at","efficitur","volutpat,","velit","ligula","vulputate","nisi,","sit","amet","dapibus","risus","metus","sed","est.","Sed","in","venenatis","ante.","Pellentesque","vel","ipsum","pharetra,","efficitur","quam","ut,","hendrerit","dolor."];var m=(i=>(i.Text="text",i.Input="input",i.Image="image",i.Video="video",i.WrapperElement="wrapper-element",i))(m||{}),v=(i=>(i.PrimaryColor="rgba(100, 100, 100, .6)",i.SecondaryColor="rgba(100, 100, 100, .3)",i))(v||{});class f{static daysInMs(e){return e*24*60*60*1e3}static dateBetween(e,t){return new Date(e.getTime()+Math.random()*(t.getTime()-e.getTime()))}}let M=0;var n;class x{constructor(){A(this,n,void 0)}get value(){return w(this,n)}words(e){this.assertType();let t="",s=0;for(;s<e;)t+=this.randomLoremWord()+" ",s++;return u(this,n,t.trim()),this}paragraphs(e){this.assertType();let t="",s=0;const p=50;for(;s<e;){const l=p-Math.round(p*Math.random()*.2)*(Math.random()<.5?-1:1);t+=this.words(l).value,s!==e-1&&(t+=`
-`),s++}return u(this,n,t),this}number(e=0,t=1e3){return this.assertType(),u(this,n,Math.ceil(Math.random()*(t-e))+e),this}multiply(e){return this.assertType(),u(this,n,w(this,n)*e),this}date(e={}){this.assertType();let t=e.max??new Date("2100-01-01"),s=e.min??new Date("1970-01-01");return e.isFuture?s=new Date(Date.now()+f.daysInMs(1)):e.isPast&&(t=new Date(Date.now()-f.daysInMs(1))),u(this,n,f.dateBetween(s,t)),this}uuid(){return M++,this.assertType(),u(this,n,M),this}boolean(){return this.assertType(),u(this,n,Math.random()<=.5),this}symbol(e=0){return this.assertType(),u(this,n,Symbol(e)),this}identical(e){return this.assertType(),u(this,n,e),this}assertType(){}randomLoremWord(){const e=Math.floor(Math.random()*T.length);return T[e]??"lorem"}}n=new WeakMap;class d{constructor(e){this.generator=e,this.viewModel=this.generator(),this.val=d.modelToValue(this.viewModel)}get value(){return this.val}static modelToValue(e){if(e instanceof x)return e.value;if(Array.isArray(e))return e.map(this.modelToValue);{const t={};return Object.keys(e).forEach(s=>{t[s]=d.modelToValue(e[s])}),t}}}class C{proxy(e){return e instanceof d?e.value:e}}class D{constructor(){this.config=null,this.viewModels=[]}setupModels(){if(this.config){const e=this.config.schemaGenerator;this.viewModels=Array.from({length:this.config.repeat},()=>new d(e))}}}const S=class c{static skeletonizeProjectedTemplate(e,t){const s=(t==null?void 0:t.primaryColor)??v.PrimaryColor,p=(t==null?void 0:t.secondaryColor)??v.SecondaryColor;e.setAttribute("style",`--skeletonizer-primary-color: ${s}; --skeletonizer-secondary-color: ${p};`),Array.from(e.querySelectorAll("*:not(svg, [data-skeletonizer])")).forEach(l=>{const k=["br","b","strong","i","em","mark","small","del","ins","sub","sup"],h=Array.from(l.childNodes).map(a=>a.nodeName.toLowerCase()).filter(a=>!k.includes(a)),N=h.length>0&&h.some(a=>a!==h[0]);l.childNodes.forEach(a=>{switch(a.nodeName.toLowerCase()){case"#text":{if(this.assertAs(a),a.wholeText.trim())if(N){const g=document.createElement("span");g.innerText=a.cloneNode().wholeText,g.innerText.length&&a.replaceWith(c.skeletonizedSpanGenerator(g.innerText,m.Text))}else{const g=c.skeletonizedSpanGenerator(l.innerHTML,m.Text);l.innerHTML=g.outerHTML}break}case"input":{a.setAttribute(c.dataAttr,m.Input);break}case"img":{a.setAttribute(c.dataAttr,m.Image);break}case"video":{a.setAttribute(c.dataAttr,m.Video);break}}})}),e.setAttribute(c.dataAttr,m.WrapperElement)}static skeletonizedSpanGenerator(e,t){const s=document.createElement("span");return s.innerHTML=e,s.setAttribute(c.dataAttr,t),s}static assertAs(e){}};S.dataAttr="data-skeletonizer";let I=S;const z=r.defineComponent({__name:"SkeletonizerSkeleton",props:{config:{},showSkeleton:{type:Boolean},scope:{},colorSchema:{}},setup(i){const e=i,t=r.reactive(new D);return r.watch(e.config,s=>{t.config=s,t.setupModels()},{immediate:!0}),(s,p)=>{const l=r.resolveDirective("skeletonize");return s.showSkeleton?(r.openBlock(!0),r.createElementBlock(r.Fragment,{key:0},r.renderList(t.viewModels,(k,h)=>r.withDirectives((r.openBlock(),r.createElementBlock("div",{key:h},[r.renderSlot(s.$slots,"default",{scope:k.value})])),[[l,e.colorSchema]])),128)):r.renderSlot(s.$slots,"default",{key:1,scope:e.scope})}}});class b extends C{constructor(e,t){super(),this.skeletonConfig=e,this.showSkeleton=t}static generate(e,t){return r.reactive(new b(e,t))}}const P={install:i=>{i.component("SkeletonizerSkeleton",z),i.directive("skeletonize",(e,t)=>{I.skeletonizeProjectedTemplate(e,t.value)})}};o.SkeletonizerComponentComposable=b,o.SkeletonizerPlugin=P,o.SkeletonizerSkeleton=z,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@skeletonizer/utils")):typeof define=="function"&&define.amd?define(["exports","vue","@skeletonizer/utils"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.SkeletonizerVue={},t.Vue,t.SkeletonizerUtils))})(this,function(t,e,l){"use strict";var a=document.createElement("style");a.textContent=`[data-skeletonizer=wrapper-element]{--skeletonizer-text-background: rgba(0, 0, 0, .2);display:contents;filter:grayscale(100%);pointer-events:none}[data-skeletonizer=wrapper-element] *{pointer-events:none}[data-skeletonizer=wrapper-element] [data-skeletonizer=text]{animation:text-animation 2s infinite ease-in-out;background:var(--skeletonizer-primary-color);border-radius:50px;color:#0000!important}@keyframes text-animation{0%{background:var(--skeletonizer-primary-color)}50%{background:var(--skeletonizer-secondary-color)}to{background:var(--skeletonizer-primary-color)}}
+`,document.head.appendChild(a);const c=e.defineComponent({__name:"SkeletonizerSkeleton",props:{config:{},showSkeleton:{type:Boolean},scope:{},colorSchema:{}},setup(i){const n=i,o=e.reactive(new l.SkeletonAdapterComponent);return e.watch(n.config,r=>{o.config=r,o.setupModels()},{immediate:!0}),(r,u)=>{const d=e.resolveDirective("skeletonize");return r.showSkeleton?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(o.viewModels,(p,m)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:m},[e.renderSlot(r.$slots,"default",{scope:p.value})])),[[d,n.colorSchema]])),128)):e.renderSlot(r.$slots,"default",{key:1,scope:n.scope})}}});class s extends l.SkeletonAbstractComponent{constructor(n,o){super(),this.skeletonConfig=n,this.showSkeleton=o}static generate(n,o){return e.reactive(new s(n,o))}}const k={install:i=>{i.component("SkeletonizerSkeleton",c),i.directive("skeletonize",(n,o)=>{l.SkeletonDirective.skeletonizeProjectedTemplate(n,o.value)})}};t.SkeletonizerComponentComposable=s,t.SkeletonizerPlugin=k,t.SkeletonizerSkeleton=c,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonizer/vue",
-  "version": "0.0.17-alpha.0",
+  "version": "0.0.18-alpha.0",
   "description": "The way to skeletonize your Vue.js components",
   "author": "Luka Varga",
   "license": "MIT",
@@ -78,5 +78,5 @@
     "**/*.{scss,css}": "stylelint --fix",
     "**/*.{ts,js,.vue}": "eslint --fix"
   },
-  "gitHead": "0515cda9f5aa78ea76f86a2a2f72fc8c04688277"
+  "gitHead": "df7b44bcab02f415fbae5d3676de5df2b5011d05"
 }