|
| 1 | +import type { Directive, Plugin } from 'vue'; |
| 2 | +import { createVueDefaultPage, createPlugin, publicPropsKeys } from './core'; |
| 3 | +import type { DirectiveOptions, Options, Value } from './types'; |
| 4 | +import { omit, pick } from 'lodash'; |
| 5 | + |
| 6 | +export type VdpLoading = DirectiveOptions<'loading'>; |
| 7 | +export type VdpSkeleton = DirectiveOptions<'skeleton'>; |
| 8 | +export type VdpSkeletonList = DirectiveOptions<'skeletonList'>; |
| 9 | +export type VdpSkeletonAvatar = DirectiveOptions<'skeletonAvatar'>; |
| 10 | +export type VdpError = DirectiveOptions<'error'>; |
| 11 | +export type VdpEmpty = DirectiveOptions<'empty'>; |
| 12 | + |
| 13 | +export const vdpLoading = createPlugin('loading'); |
| 14 | +export const vdpSkeleton = createPlugin('skeleton'); |
| 15 | +export const vdpSkeletonAvatar = createPlugin('skeleton-avatar'); |
| 16 | +export const vdpSkeletonList = createPlugin('skeleton-list'); |
| 17 | +export const vdpError = createPlugin('error'); |
| 18 | +export const vdpEmpty = createPlugin('empty'); |
| 19 | + |
| 20 | +const names = [ |
| 21 | + 'loading', |
| 22 | + 'skeleton', |
| 23 | + 'skeletonAvatar', |
| 24 | + 'skeletonList', |
| 25 | + 'error', |
| 26 | + 'empty', |
| 27 | +] as const; |
| 28 | +export const vueDefaultPage: Plugin<[options?: Options]> = { |
| 29 | + install(app, options = {}) { |
| 30 | + names.forEach((name) => { |
| 31 | + const other = omit(options, publicPropsKeys)[name] ?? {}; |
| 32 | + const { enable, ...otherOptions } = |
| 33 | + typeof other === 'boolean' ? { enable: other } : other; |
| 34 | + const isEnable = |
| 35 | + enable ?? !['skeletonAvatar', 'skeletonList'].includes(name); |
| 36 | + if (!isEnable) return; |
| 37 | + app.directive( |
| 38 | + name, |
| 39 | + createVueDefaultPage(name, { |
| 40 | + ...pick(options, publicPropsKeys), |
| 41 | + ...otherOptions, |
| 42 | + }) |
| 43 | + ); |
| 44 | + }); |
| 45 | + }, |
| 46 | +}; |
| 47 | + |
| 48 | +export { |
| 49 | + type Options as VueDefaultPage, |
| 50 | + type Value as VdpValue, |
| 51 | + vueDefaultPage as default, |
| 52 | + createVueDefaultPage, |
| 53 | +}; |
| 54 | + |
| 55 | +declare module 'vue' { |
| 56 | + interface ComponentCustomProperties { |
| 57 | + vLoading: Directive<any, boolean>; |
| 58 | + vSkeleton: Directive<any, boolean>; |
| 59 | + vError: Directive<any, Value<'error'>>; |
| 60 | + vEmpty: Directive<any, boolean>; |
| 61 | + } |
| 62 | +} |
0 commit comments