@skeletonizer/vue 1.1.0 → 1.1.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Luka Varga
+Copyright (c) 2024 Luka Varga
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/index.css

@@ -0,0 +1 @@
+[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)}}

package/dist/skeletonizer-vue.mjs

@@ -0,0 +1,53 @@
+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: {},
+    showSkeleton: { type: Boolean },
+    scope: {},
+    colorSchema: {}
+  },
+  setup(n) {
+    const e = n, t = l(new h());
+    return S(
+      e.config,
+      (o) => {
+        t.config = o, t.setupModels();
+      },
+      { immediate: !0 }
+    ), (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
+        })
+      ])), [
+        [a, e.colorSchema]
+      ])), 128)) : i(o.$slots, "default", {
+        key: 1,
+        scope: e.scope
+      });
+    };
+  }
+});
+class c extends w {
+  constructor(e, t) {
+    super(), this.skeletonConfig = e, this.showSkeleton = t;
+  }
+  static generate(e, t) {
+    return l(new c(e, t));
+  }
+}
+const B = {
+  install: (n) => {
+    n.component("SkeletonizerSkeleton", g), n.directive("skeletonize", (e, t) => {
+      z.skeletonizeProjectedTemplate(e, t.value);
+    });
+  }
+};
+export {
+  c as SkeletonizerComponentComposable,
+  B as SkeletonizerPlugin,
+  g as SkeletonizerSkeleton
+};

package/dist/skeletonizer-vue.umd.js

@@ -0,0 +1,2 @@
+(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)}}
+/*$vite$:1*/`,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/dist/src/lib/components/SkeletonizerSkeleton.vue.d.ts

@@ -0,0 +1,34 @@
+import { ISkeletonizerColorSchema, TSchemaConfig } from '@skeletonizer/utils';
+import { UnwrapRef } from 'vue';
+declare const _default: <TSkeletonScopeObject extends object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & {
+        config: TSchemaConfig<TSkeletonScopeObject>;
+        showSkeleton: boolean;
+        scope: TSkeletonScopeObject;
+        colorSchema?: ISkeletonizerColorSchema;
+    }> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: Readonly<{
+        default?: (props: {
+            scope: TSkeletonScopeObject | UnwrapRef<TSkeletonScopeObject>;
+        }) => {
+            scope: TSkeletonScopeObject | UnwrapRef<TSkeletonScopeObject>;
+        };
+    }> & {
+        default?: (props: {
+            scope: TSkeletonScopeObject | UnwrapRef<TSkeletonScopeObject>;
+        }) => {
+            scope: TSkeletonScopeObject | UnwrapRef<TSkeletonScopeObject>;
+        };
+    };
+    emit: {};
+}>) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/src/lib/composables/skeletonizer.component.composable.d.ts

@@ -0,0 +1,8 @@
+import { SkeletonAbstractComponent, TSchemaConfig } from '@skeletonizer/utils';
+import { UnwrapNestedRefs } from 'vue';
+export declare class SkeletonizerComponentComposable<T extends object> extends SkeletonAbstractComponent<T> {
+    skeletonConfig: TSchemaConfig<T>;
+    showSkeleton: boolean;
+    private constructor();
+    static generate<T extends object>(skeletonConfig: TSchemaConfig<T>, showSkeleton: boolean): UnwrapNestedRefs<SkeletonizerComponentComposable<T>>;
+}

package/dist/src/lib/index.d.ts

@@ -0,0 +1,4 @@
+import { default as SkeletonizerSkeleton } from './components/SkeletonizerSkeleton.vue';
+import { SkeletonizerComponentComposable } from './composables/skeletonizer.component.composable';
+import { default as SkeletonizerPlugin } from './main';
+export { SkeletonizerSkeleton, SkeletonizerComponentComposable, SkeletonizerPlugin };

package/dist/src/lib/main.d.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue';
+declare const _default: {
+    install: (app: App) => void;
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonizer/vue",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "The way to skeletonize your Vue.js components",
   "author": "Luka Varga",
   "license": "MIT",
@@ -55,7 +55,7 @@
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@skeletonizer/utils": "^1.1.0",
+    "@skeletonizer/utils": "^1.1.2",
     "@tsconfig/node18": "^2.0.1",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.17.5",
@@ -80,5 +80,5 @@
     "**/*.{scss,css}": "stylelint --fix",
     "**/*.{ts,js,.vue}": "eslint --fix"
   },
-  "gitHead": "1cc1b5c8a71f0f2490f555edf700c238a64df3d1"
+  "gitHead": "5a9e8a309e8b9ac0649d1b84612389291920aff3"
 }