@skeletonizer/vue 1.0.0 → 1.1.1

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/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/dist/skeletonizer-vue.umd.js

@@ -1,2 +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)}}
-`,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"})});
+/*$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/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.0.0",
+  "version": "1.1.1",
   "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.1",
     "@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": "a0b3a5c3b3d12cec97f9bf22830437ce1166c2a3"
 }

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];
-} & {};