@skeletonizer/vue 1.0.0 → 1.1.0

package/README.md

@@ -131,9 +131,10 @@ setTimeout(() => {
 ```
 
 ### Color Scheme
-Generally speaking, you shouldn't need to adjust the color scheme of the skeletonized component in most cases. However, should you need to, the color scheme of the skeletonized views can be customized by providing the `:color-scheme` property to the `<skeletonizer-skeleton>`.
+Generally speaking, you shouldn't need to adjust the color scheme of the skeletonized component in most cases. However, should you need to, the color scheme of the skeletonized views can be customized by providing the `:color-schema` property to the `<skeletonizer-skeleton>`.
+
+For more details about the `:color-schema` property, see the [colorSchema](/packages/utils/README.md#colorschema) section.
 
-For more details about the `:color-scheme` property, see the [colorScheme](/packages/utils/README.md#colorscheme) section.
 
 ## Contributing
 For Vue adapter-specific contributions, run the following commands to get started:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skeletonizer/vue",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "The way to skeletonize your Vue.js components",
   "author": "Luka Varga",
   "license": "MIT",
@@ -22,7 +22,7 @@
     ".": {
       "import": "./dist/skeletonizer-vue.mjs",
       "require": "./dist/skeletonizer-vue.umd.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/src/lib/index.d.ts"
     },
     "./dist/*.css": "./dist/*.css"
   },
@@ -46,37 +46,39 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "style-lint": "stylelint '**/*.?(css|scss|vue)' --color",
     "style-lintfix": "stylelint '**/*.?(css|scss|vue)' --color --fix",
-    "lint": "eslint --ext .ts,.vue,.js src/ && npm run style-lint",
-    "lintfix": "npm run style-lintfix && eslint --ext .ts,.vue,.js src/ --fix",
+    "lint": "eslint src/ && npm run style-lint",
+    "lintfix": "npm run style-lintfix && eslint src/ --fix",
     "lint-staged": "lint-staged"
   },
   "peerDependencies": {
+    "@skeletonizer/utils": "^1.1.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {
+    "@skeletonizer/utils": "^1.1.0",
     "@tsconfig/node18": "^2.0.1",
-    "@types/jsdom": "^21.1.6",
-    "@types/node": "^20.12.3",
+    "@types/jsdom": "^21.1.7",
+    "@types/node": "^20.17.5",
     "@vitejs/plugin-vue": "^5.1.4",
-    "@vitest/browser": "2.1.2",
+    "@vitest/browser": "2.1.4",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
-    "eslint-plugin-vue": "^9.24.0",
-    "jsdom": "^24.0.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "jsdom": "^25.0.1",
     "npm-run-all": "^4.1.5",
-    "sass": "^1.72.0",
-    "typescript": "^5.4.3",
-    "vite": "^5.4.8",
-    "vite-plugin-dts": "^4.2.3",
-    "vitest": "2.1.2",
-    "vue": "^3.5.11",
-    "vue-eslint-parser": "^9.4.2",
-    "vue-tsc": "^2.1.6",
-    "webdriverio": "^9.1.2"
+    "sass": "^1.80.5",
+    "typescript": "~5.5.4",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "2.1.4",
+    "vue": "^3.5.12",
+    "vue-eslint-parser": "^9.4.3",
+    "vue-tsc": "^2.1.10",
+    "webdriverio": "^9.2.8"
   },
   "lint-staged": {
     "**/*.{scss,css}": "stylelint --fix",
     "**/*.{ts,js,.vue}": "eslint --fix"
   },
-  "gitHead": "b991aef461188aebee063efb7df47e70c58b0772"
+  "gitHead": "1cc1b5c8a71f0f2490f555edf700c238a64df3d1"
 }

package/dist/components/SkeletonizerSkeleton.vue.d.ts

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

package/dist/index.css

@@ -1 +0,0 @@
-[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/index.d.ts

@@ -1,4 +0,0 @@
-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/skeletonizer-vue.mjs

@@ -1,53 +0,0 @@
-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

@@ -1,2 +0,0 @@
-(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"})});