@skeletonizer/vue 0.0.22-alpha.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -197
- package/dist/skeletonizer-vue.umd.js +2 -1
- package/package.json +4 -3
- /package/dist/{style.css → index.css} +0 -0
package/README.md
CHANGED
|
@@ -8,12 +8,13 @@ To install the package, run the following command:
|
|
|
8
8
|
`@skeletonizer/vue` is always used in conjunction with `@skeletonizer/utils`. The `@skeletonizer/utils` package provides the core functionality for creating skeletonized views, while the `@skeletonizer/vue` package provides the Vue-specific functionality. **The versions should always match**.
|
|
9
9
|
|
|
10
10
|
## main.ts
|
|
11
|
-
In your `main.ts` file (where you do `createApp`), you need to install the `SkeletonizerPlugin
|
|
11
|
+
In your `main.ts` file (where you do `createApp`), you need to install the `SkeletonizerPlugin` and import the css needed for the plugin. The plugin provides the `SkeletonizerSkeleton` component and directive that will be used in your Vue components.
|
|
12
12
|
|
|
13
13
|
```typescript
|
|
14
14
|
import { createApp } from 'vue';
|
|
15
15
|
import App from './App.vue';
|
|
16
16
|
import { SkeletonizerPlugin } from '@skeletonizer/vue';
|
|
17
|
+
import '@skeletonizer/vue/dist/index.css';
|
|
17
18
|
|
|
18
19
|
createApp(App)
|
|
19
20
|
.use(SkeletonizerPlugin)
|
|
@@ -21,20 +22,32 @@ createApp(App)
|
|
|
21
22
|
```
|
|
22
23
|
|
|
23
24
|
## Component Adjustments
|
|
24
|
-
Generally speaking, all you need to do to use the skeletonizer in the template, is to wrap the part of the template you wish to skeletonize in the `<skeletonizer-skeleton>` component.
|
|
25
|
-
|
|
25
|
+
Generally speaking, all you need to do to use the skeletonizer in the template, is to wrap the part of the template you wish to skeletonize in the `<skeletonizer-skeleton>` component. Additionally, you will need to pass the following to `skeletonizer-skeleton`:
|
|
26
|
+
- `v-slot="{ scope }"`
|
|
27
|
+
- `:config="skeletonizer.skeletonConfig"`
|
|
28
|
+
- `:show-skeleton="skeletonizer.showSkeleton"`
|
|
29
|
+
- `:scope="{ foo, bar }"`
|
|
30
|
+
|
|
31
|
+
All the data that you wish to access in the skeletonized part of the template must be provided in the `:scope` and accessed through the `skeletonizer.proxy(scope)` method, except the data that you provide and is available even whilst the data is being loaded (ie. `:show-skeleton="true"`). For example, if you have a `message` prop that you wish to be skeletonized, you'll need to pass it to the `:scope` object and access it through the `skeletonizer.proxy(scope).message` method.
|
|
26
32
|
|
|
27
33
|
As far as the template goes, it essentially means transforming the code from this:
|
|
28
34
|
```html
|
|
29
35
|
<div>{{ somePropOrMethodCallAvailableAsync }}</div>
|
|
36
|
+
<div>{{ otherAsyncProp }}</div>
|
|
30
37
|
<div>{{ someAlreadyHardCodedOrInputBoundPropAvailableSync }} </div>
|
|
31
38
|
```
|
|
32
39
|
|
|
33
40
|
into this:
|
|
34
41
|
|
|
35
42
|
```html
|
|
36
|
-
<skeletonizer-skeleton
|
|
37
|
-
|
|
43
|
+
<skeletonizer-skeleton
|
|
44
|
+
v-slot="{ scope }"
|
|
45
|
+
:config="skeletonizer.skeletonConfig"
|
|
46
|
+
:show-skeleton="skeletonizer.showSkeleton"
|
|
47
|
+
:scope="{ somePropOrMethodCallAvailableAsync, otherAsyncProp }"
|
|
48
|
+
>
|
|
49
|
+
<div>{{ skeletonizer.proxy(scope).somePropOrMethodCallAvailableAsync }}</div>
|
|
50
|
+
<div>{{ skeletonizer.proxy(scope).otherAsyncProp }}</div>
|
|
38
51
|
<div>{{ someAlreadyHardCodedOrInputBoundPropAvailableSync }} </div>
|
|
39
52
|
</skeletonizer-skeleton>
|
|
40
53
|
```
|
|
@@ -42,20 +55,14 @@ into this:
|
|
|
42
55
|
As long as the shape of the properties you access within the skeleton part of the template matches the shape of the data you provide in the `scope` and `skeletonConfig` properties, the skeletonized view will be in sync with the actual view, regardless of changes to the design.
|
|
43
56
|
|
|
44
57
|
## Usage
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
If you wish to use Skeletonizer in a standalone component, you need to add `SkeletonizerSkeletonComponent` in the imports of the component.
|
|
48
|
-
The usage in a component that is a part of a module is the same as the standalone component, but you need to add `SkeletonizerSkeletonComponent` in the imports of the **module** where the component is declared.
|
|
49
|
-
|
|
50
|
-
Every component that uses Skeletonizer should extend `SkeletonAbstractComponent`, which is available in `@skeletonizer/utils`.
|
|
51
|
-
The `SkeletonAbstractComponent` requires you to pass a type argument that represents the data model of the **part(s) of the component that you intend to skeletonize**.
|
|
52
|
-
It also requires you to implement the `skeletonConfig` (type validated against the type argument you pass to `SkeletonAbstractComponent`) and `showSkeleton` properties which must be passed to the `SkeletonizerSkeletonComponent` as inputs.
|
|
53
|
-
By extending the `SkeletonAbstractComponent`, you also get access to the `proxy` method via which you can (type) safely access props and methods **within the skeletonized part of the current component**.
|
|
58
|
+
Every component that uses Skeletonizer should use `SkeletonizerComponentComposable`, which is available in `@skeletonizer/vue`. Both the component and the `SkeletonizerComponentComposable` are type-safe - if the shape of `schemaGenerator` returned object does not match the shape of type generic you pass to `SkeletonizerComponentComposable`, you will get a type error. You will also get an error if you fail to pass the same shape to the `:scope` input bound property of `skeletonizer-skeleton` component. While Vue has made noticeable strides in type safety, it is still lacking a bit compared to eg. Angular. Therefor, you may still need to run a `npm run type-check` command (which, in a standard vue/vite project, executes `vue-tsc --noEmit -p tsconfig.vitest.json --composite false`) if you wish to get the extra type safety.
|
|
54
59
|
|
|
55
|
-
|
|
56
|
-
|
|
60
|
+
You can use multiple separate, independently skeletonized parts within the same component. In that case, you can:
|
|
61
|
+
- provide separate `:scope`, `:show-skeleton` and `:config` properties for each `skeletonizer-skeleton` component. For easier maintenance, it is still recommended that you prefix (or suffix) all of the referenced composables with `skeletonizer` (eg. `profileSkeletonizer`, or `skeletonizerUsersList`) to make it clear that they are part of the skeletonized view. In that case, you should obviously access each `.proxy` method with the corresponding composables (eg. `profileSkeletonizer.proxy(scope)`).
|
|
62
|
+
- provide the same `:scope` and `:config` property to all `skeletonizer-skeleton` components, with separate `:show-skeleton` properties for each `skeletonizer-skeleton` component.
|
|
57
63
|
|
|
58
|
-
|
|
64
|
+
In the skeletonized part of the template, you **must** access the data through the `skeletonizerFoo.proxy(scope)` method.
|
|
65
|
+
You can think of `skeletonizerFoo.proxy(scope)` in the same way as you would think of `this` in a class method. The only difference is that when using `skeletonizerFoo.proxy(scope)`, the content-projected template will use the mocked values when the `showSkeleton` is `true`, and resolved values when `showSkeleton` is `false` - all while maintaining the type safety.
|
|
59
66
|
|
|
60
67
|
For more details about the `SchemaItem` property, see the [SchemaItem](/packages/utils/README.md#schemaitem) section.
|
|
61
68
|
|
|
@@ -63,10 +70,11 @@ For more details about the `skeletonConfig` property, see the [TSchemaConfig](/p
|
|
|
63
70
|
|
|
64
71
|
|
|
65
72
|
```typescript
|
|
66
|
-
|
|
67
|
-
import {
|
|
68
|
-
import { SchemaItem
|
|
69
|
-
import {
|
|
73
|
+
// <script setup lang="ts">
|
|
74
|
+
import { SkeletonizerComponentComposable, SkeletonizerSkeleton } from '@skeletonizer/vue';
|
|
75
|
+
import { SchemaItem } from '@skeletonizer/utils';
|
|
76
|
+
import { type Ref, ref } from 'vue';
|
|
77
|
+
import assetImgUrl from '@/assets/logo.svg';
|
|
70
78
|
|
|
71
79
|
interface IResource {
|
|
72
80
|
title: string;
|
|
@@ -75,200 +83,67 @@ interface IResource {
|
|
|
75
83
|
}
|
|
76
84
|
|
|
77
85
|
// the svgs are just for the sake of the example
|
|
78
|
-
const
|
|
79
|
-
|
|
80
|
-
|
|
86
|
+
const supportSvg: string = `
|
|
87
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
|
88
|
+
<path
|
|
89
|
+
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
|
90
|
+
/>
|
|
91
|
+
</svg>
|
|
92
|
+
`;
|
|
81
93
|
|
|
82
94
|
const loadingSvg: string = '<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner{transform-origin:center;animation:spinner .75s linear infinite}@keyframes spinner{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}</style><g class="spinner"><circle cx="12" cy="2.5" r="1.5" opacity=".14"/><circle cx="16.75" cy="3.77" r="1.5" opacity=".29"/><circle cx="20.23" cy="7.25" r="1.5" opacity=".43"/><circle cx="21.50" cy="12.00" r="1.5" opacity=".57"/><circle cx="20.23" cy="16.75" r="1.5" opacity=".71"/><circle cx="16.75" cy="20.23" r="1.5" opacity=".86"/><circle cx="12" cy="21.5" r="1.5"/></g></svg>';
|
|
83
95
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
<a *ngFor="let resource of proxy(context).resources" target="_blank" rel="noopener" [href]="resource.link">
|
|
96
|
-
<div [innerHTML]="sanitizer.bypassSecurityTrustHtml(resource.svg)"></div>
|
|
97
|
-
<span>{{ resource.title }}</span>
|
|
98
|
-
</a>
|
|
99
|
-
</ng-template>
|
|
100
|
-
</skeletonizer-skeleton>
|
|
101
|
-
`,
|
|
102
|
-
styleUrls: ['./my-component.component.scss'],
|
|
103
|
-
// for standalone components, otherwise add SkeletonizerSkeletonComponent to the module imports of the module where MyComponent is declared
|
|
104
|
-
// standalone: true,
|
|
105
|
-
// imports: [SkeletonizerSkeletonComponent, NgFor], // ngFor is just for the sake of the example where the *ngFor is used in the template
|
|
106
|
-
})
|
|
107
|
-
export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> implements OnInit {
|
|
108
|
-
public pageTitle: string = 'Some prop that we do not wish to skeletonize, but wish to use in the view nonetheless';
|
|
109
|
-
public otherPropWeWantToUseInSkeletonizedPart: string = 'angular';
|
|
110
|
-
|
|
111
|
-
public resources: IResource[] = [];
|
|
112
|
-
public showSkeleton: boolean = true;
|
|
113
|
-
|
|
114
|
-
public readonly skeletonConfig: TSchemaConfig<TSkeletonizedPart> = {
|
|
115
|
-
repeat: 1,
|
|
96
|
+
const pageTitle: string = 'Some prop that we do not wish to skeletonize, but wish to use in the view nonetheless';
|
|
97
|
+
const message: Ref<string> = ref('vue');
|
|
98
|
+
const resources: Ref<IResource[]> = ref([]);
|
|
99
|
+
|
|
100
|
+
type TSkeletonized = { message: string, resources: IResource[] };
|
|
101
|
+
|
|
102
|
+
// if you call this const eg. `skeletonizerFoo`, you should access the skeletonized props in the template with `skeletonizerFoo.proxy(scope).someProp`
|
|
103
|
+
// if you need multiple separate skeletonized parts, you should create multiple separate composables using `SkeletonizerComponentComposable.generate` and provide separate `:scope`, `:show-skeleton` and `:config` properties for each `skeletonizer-skeleton` component.
|
|
104
|
+
const skeletonizer: SkeletonizerComponentComposable<TSkeletonized> = SkeletonizerComponentComposable.generate<TSkeletonized>(
|
|
105
|
+
{
|
|
106
|
+
repeat: 3,
|
|
116
107
|
schemaGenerator: () => ({
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
link: new SchemaItem().identical('https://www.google.com'),
|
|
108
|
+
message: new SchemaItem().words(5),
|
|
109
|
+
resources: Array.from({ length: 3 }, () => ({
|
|
110
|
+
title: new SchemaItem().words(2),
|
|
111
|
+
link: new SchemaItem().identical('https://vuejs.org/'),
|
|
122
112
|
svg: new SchemaItem().identical(loadingSvg),
|
|
123
|
-
}))
|
|
113
|
+
}))
|
|
124
114
|
}),
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
public readonly sanitizer: DomSanitizer,
|
|
129
|
-
) {
|
|
130
|
-
super();
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
public ngOnInit(): void {
|
|
134
|
-
// simulate loading data
|
|
135
|
-
setTimeout(() => {
|
|
136
|
-
this.resources = [
|
|
137
|
-
{
|
|
138
|
-
title: 'Mocked Resolved Resource #1',
|
|
139
|
-
link: 'https://github.com/lukaVarga/skeletonizer/tree/main/packages/angular/projects/skeletonizer',
|
|
140
|
-
svg: learnNgSvg,
|
|
141
|
-
},
|
|
142
|
-
{
|
|
143
|
-
title: 'Mocked Resolved Resource #2',
|
|
144
|
-
link: 'https://github.com/lukaVarga/skeletonizer/tree/main',
|
|
145
|
-
svg: cliDocsSvg,
|
|
146
|
-
},
|
|
147
|
-
];
|
|
148
|
-
|
|
149
|
-
this.otherPropWeWantToUseInSkeletonizedPart = 'loaded title'
|
|
150
|
-
|
|
151
|
-
this.showSkeleton = false;
|
|
152
|
-
}, Math.max(3_000, Math.random() * 10_000));
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
You can also skeletonize multiple independent parts (ie. parts for which the data gets loaded independently of each-other) of the same component by using the `<skeletonizer-skeleton>` multiple times in the template. Each `skeletonizer-skeleton` component should, in this case, receive its own `showSkeleton` input property, while the `config` and the `scope` can be shared for all of them. That way, the config is defined in a single place and all skeletonized parts enjoy the same level of type safety via the known `proxy(context)` method.
|
|
158
|
-
You can also provide separate config and scope for each `skeletonizer-skeleton` component if needed, although it is recommended that you do not extend `SkeletonAbstractComponent` in this case, and you will need to provide your own (separate) `proxy`-like methods for each of the skeletonized parts of the component to maintain the same level of type safety in the template.
|
|
159
|
-
|
|
160
|
-
```typescript
|
|
161
|
-
import { Component } from '@angular/core';
|
|
162
|
-
import { SkeletonizerSkeletonComponent } from '@skeletonizer/angular';
|
|
163
|
-
import { SchemaItem, SkeletonAbstractComponent, TSchemaConfig } from '@skeletonizer/utils';
|
|
164
|
-
import { DomSanitizer } from '@angular/platform-browser';
|
|
115
|
+
},
|
|
116
|
+
true,
|
|
117
|
+
);
|
|
165
118
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
link: string;
|
|
169
|
-
svg: string;
|
|
170
|
-
}
|
|
119
|
+
setTimeout(() => {
|
|
120
|
+
message.value = 'Async update of message';
|
|
171
121
|
|
|
172
|
-
|
|
173
|
-
|
|
122
|
+
resources.value = [
|
|
123
|
+
{ title: 'Vue', link: 'https://vuejs.org/', svg: assetImgUrl },
|
|
124
|
+
{ title: 'Vite', link: 'https://vitejs.dev/', svg: supportSvg },
|
|
125
|
+
];
|
|
174
126
|
|
|
175
|
-
|
|
127
|
+
skeletonizer.showSkeleton = false;
|
|
128
|
+
}, 5000 * Math.random());
|
|
176
129
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
@Component({
|
|
180
|
-
selector: 'my-component',
|
|
181
|
-
template: `
|
|
182
|
-
<h2>{{ pageTitle }}</h2>
|
|
183
|
-
|
|
184
|
-
<skeletonizer-skeleton [showSkeleton]="showSkeleton" [config]="skeletonConfig" [scope]="{ resources, otherPropWeWantToUseInSkeletonizedPart }">
|
|
185
|
-
<ng-template let-context>
|
|
186
|
-
<div class="card-container">
|
|
187
|
-
<a *ngFor="let resource of proxy(context).resources" class="card" target="_blank" rel="noopener" [href]="resource.link">
|
|
188
|
-
<div [innerHTML]="sanitizer.bypassSecurityTrustHtml(resource.svg)"></div>
|
|
189
|
-
<span>{{ resource.title }}</span>
|
|
190
|
-
</a>
|
|
191
|
-
</div>
|
|
192
|
-
</ng-template>
|
|
193
|
-
</skeletonizer-skeleton>
|
|
194
|
-
|
|
195
|
-
<skeletonizer-skeleton [showSkeleton]="showOtherSkeleton" [config]="skeletonConfig" [scope]="{ resources, otherPropWeWantToUseInSkeletonizedPart }">
|
|
196
|
-
<ng-template let-context>
|
|
197
|
-
<span>{{ proxy(context).otherPropWeWantToUseInSkeletonizedPart }}</span>
|
|
198
|
-
</ng-template>
|
|
199
|
-
</skeletonizer-skeleton>
|
|
200
|
-
`,
|
|
201
|
-
styleUrls: ['./my-component.component.scss'],
|
|
202
|
-
// for standalone components, otherwise add SkeletonizerSkeletonComponent to the module imports of the module where MyComponent is declared
|
|
203
|
-
// standalone: true,
|
|
204
|
-
// imports: [SkeletonizerSkeletonComponent, NgFor], // ngFor is just for the sake of the example where the *ngFor is used in the template
|
|
205
|
-
})
|
|
206
|
-
export class MyComponent extends SkeletonAbstractComponent<TSkeletonizedPart> implements OnInit {
|
|
207
|
-
public pageTitle: string = 'Some prop that we do not wish to skeletonize, but wish to use in the view nonetheless';
|
|
208
|
-
public otherPropWeWantToUseInSkeletonizedPart: string = 'angular';
|
|
209
|
-
|
|
210
|
-
public resources: IResource[] = [];
|
|
211
|
-
public showSkeleton: boolean = true;
|
|
212
|
-
|
|
213
|
-
public readonly skeletonConfig: TSchemaConfig<TSkeletonizedPart> = {
|
|
214
|
-
repeat: 1,
|
|
215
|
-
schemaGenerator: () => ({
|
|
216
|
-
otherPropWeWantToUseInSkeletonizedPart: new SchemaItem<string>().words(3),
|
|
217
|
-
// Array.from({ length: 5 }, () => ({ ... })) is just a simple way of creating an array of 5 objects - you could also hardcode the array if you wanted to
|
|
218
|
-
resources: Array.from({ length: 5 }, () => ({
|
|
219
|
-
title: new SchemaItem<string>().words(3),
|
|
220
|
-
link: new SchemaItem().identical('https://www.google.com'),
|
|
221
|
-
svg: new SchemaItem().identical(loadingSvg),
|
|
222
|
-
})),
|
|
223
|
-
}),
|
|
224
|
-
};
|
|
225
|
-
|
|
226
|
-
public constructor(
|
|
227
|
-
public readonly sanitizer: DomSanitizer,
|
|
228
|
-
) {
|
|
229
|
-
super();
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
public ngOnInit(): void {
|
|
233
|
-
setTimeout(() => {
|
|
234
|
-
this.resources = [
|
|
235
|
-
{
|
|
236
|
-
title: 'Mocked Resolved Resource #1',
|
|
237
|
-
link: 'https://github.com/lukaVarga/skeletonizer/tree/main/packages/angular/projects/skeletonizer',
|
|
238
|
-
svg: learnNgSvg,
|
|
239
|
-
},
|
|
240
|
-
{
|
|
241
|
-
title: 'Mocked Resolved Resource #2',
|
|
242
|
-
link: 'https://github.com/lukaVarga/skeletonizer/tree/main',
|
|
243
|
-
svg: cliDocsSvg,
|
|
244
|
-
},
|
|
245
|
-
];
|
|
246
|
-
|
|
247
|
-
this.showSkeleton = false;
|
|
248
|
-
}, Math.max(3_000, Math.random() * 10_000));
|
|
249
|
-
|
|
250
|
-
setTimeout(() => {
|
|
251
|
-
this.showOtherSkeleton = false;
|
|
252
|
-
}, Math.max(6_000, Math.random() * 10_000));
|
|
253
|
-
}
|
|
254
|
-
}
|
|
130
|
+
// </script>
|
|
255
131
|
```
|
|
256
132
|
|
|
257
133
|
### Color Scheme
|
|
258
|
-
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 `
|
|
134
|
+
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>`.
|
|
259
135
|
|
|
260
|
-
For more details about the `
|
|
136
|
+
For more details about the `:color-scheme` property, see the [colorScheme](/packages/utils/README.md#colorscheme) section.
|
|
261
137
|
|
|
262
138
|
## Contributing
|
|
263
|
-
For
|
|
139
|
+
For Vue adapter-specific contributions, run the following commands to get started:
|
|
264
140
|
- `npm install`
|
|
265
|
-
- adjust the code in the `packages/
|
|
266
|
-
-
|
|
267
|
-
-
|
|
268
|
-
-
|
|
269
|
-
- update readme file in the `packages/angular` directory
|
|
141
|
+
- adjust the code in the `packages/vue` directory
|
|
142
|
+
- adjust the code in the `packages/vue/src/showcase` directory to make sure the changes can easily be seen in the example app
|
|
143
|
+
- `npm run dev` in the `packages/vue` directory to start the example app
|
|
144
|
+
- update readme file in the `packages/vue` directory
|
|
270
145
|
|
|
271
|
-
Before submitting a pull request, make sure to run the following commands in `packages/
|
|
146
|
+
Before submitting a pull request, make sure to run the following commands in `packages/vue` directory:
|
|
272
147
|
- `npm run lint`
|
|
273
148
|
- `npm run type-check`
|
|
274
149
|
- `npm run coverage`
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
(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";
|
|
1
|
+
(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)}}
|
|
2
|
+
`,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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skeletonizer/vue",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"description": "The way to skeletonize your Vue.js components",
|
|
5
5
|
"author": "Luka Varga",
|
|
6
6
|
"license": "MIT",
|
|
@@ -23,7 +23,8 @@
|
|
|
23
23
|
"import": "./dist/skeletonizer-vue.mjs",
|
|
24
24
|
"require": "./dist/skeletonizer-vue.umd.js",
|
|
25
25
|
"types": "./dist/index.d.ts"
|
|
26
|
-
}
|
|
26
|
+
},
|
|
27
|
+
"./dist/*.css": "./dist/*.css"
|
|
27
28
|
},
|
|
28
29
|
"types": "./dist/index.d.ts",
|
|
29
30
|
"files": [
|
|
@@ -77,5 +78,5 @@
|
|
|
77
78
|
"**/*.{scss,css}": "stylelint --fix",
|
|
78
79
|
"**/*.{ts,js,.vue}": "eslint --fix"
|
|
79
80
|
},
|
|
80
|
-
"gitHead": "
|
|
81
|
+
"gitHead": "b991aef461188aebee063efb7df47e70c58b0772"
|
|
81
82
|
}
|
|
File without changes
|