| 1 |
- {"version":3,"file":"VSkeletonLoader.mjs","names":["useBackgroundColor","makeDimensionProps","useDimension","makeElevationProps","useElevation","useLocale","makeThemeProps","provideTheme","computed","toRef","genericComponent","propsFactory","useRender","wrapInArray","rootTypes","actions","article","avatar","button","card","chip","divider","heading","image","paragraph","sentences","subtitle","table","text","genBone","type","children","arguments","length","undefined","_createVNode","genBones","bone","split","Array","from","map","genStructure","includes","mapBones","push","bones","replace","makeVSkeletonLoaderProps","boilerplate","Boolean","color","String","loading","loadingText","default","VSkeletonLoader","name","props","setup","_ref","slots","backgroundColorClasses","backgroundColorStyles","dimensionStyles","elevationClasses","themeClasses","t","items","join","isLoading","value"],"sources":["../../../src/labs/VSkeletonLoader/VSkeletonLoader.tsx"],"sourcesContent":["// Styles\nimport './VSkeletonLoader.sass'\n\n// Composables\nimport { useBackgroundColor } from '@/composables/color'\nimport { makeDimensionProps, useDimension } from '@/composables/dimensions'\nimport { makeElevationProps, useElevation } from '@/composables/elevation'\nimport { useLocale } from '@/composables/locale'\nimport { makeThemeProps, provideTheme } from '@/composables/theme'\n\n// Utilities\nimport { computed, toRef } from 'vue'\nimport { genericComponent, propsFactory, useRender, wrapInArray } from '@/util'\n\n// Types\nimport type { PropType, VNode } from 'vue'\n\ntype VSkeletonBone<T> = T | VSkeletonBone<T>[]\n\nexport type VSkeletonBones = VSkeletonBone<VNode>\nexport type VSkeletonLoaderType = keyof typeof rootTypes\n\nexport const rootTypes = {\n actions: 'button@2',\n article: 'heading, paragraph',\n avatar: 'avatar',\n button: 'button',\n card: 'image, heading',\n 'card-avatar': 'image, list-item-avatar',\n chip: 'chip',\n 'date-picker': 'list-item, heading, divider, date-picker-options, date-picker-days, actions',\n 'date-picker-options': 'text, avatar@2',\n 'date-picker-days': 'avatar@28',\n divider: 'divider',\n heading: 'heading',\n image: 'image',\n 'list-item': 'text',\n 'list-item-avatar': 'avatar, text',\n 'list-item-two-line': 'sentences',\n 'list-item-avatar-two-line': 'avatar, sentences',\n 'list-item-three-line': 'paragraph',\n 'list-item-avatar-three-line': 'avatar, paragraph',\n paragraph: 'text@3',\n sentences: 'text@2',\n subtitle: 'text',\n table: 'table-heading, table-thead, table-tbody, table-tfoot',\n 'table-heading': 'chip, text',\n 'table-thead': 'heading@6',\n 'table-tbody': 'table-row-divider@6',\n 'table-row-divider': 'table-row, divider',\n 'table-row': 'text@6',\n 'table-tfoot': 'text@2, avatar@2',\n text: 'text',\n} as const\n\nfunction genBone (type: string, children: VSkeletonBones = []) {\n return (\n <div\n class={[\n 'v-skeleton-loader__bone',\n `v-skeleton-loader__${type}`,\n ]}\n >\n { children }\n </div>\n )\n}\n\nfunction genBones (bone: string) {\n // e.g. 'text@3'\n const [type, length] = bone.split('@') as [VSkeletonLoaderType, number]\n\n // Generate a length array based upon\n // value after @ in the bone string\n return Array.from({ length }).map(() => genStructure(type))\n}\n\nfunction genStructure (type?: string): VSkeletonBones {\n let children: VSkeletonBones = []\n\n if (!type) return children\n\n // TODO: figure out a better way to type this\n const bone = (rootTypes as Record<string, string>)[type]\n\n // End of recursion, do nothing\n /* eslint-disable-next-line no-empty, brace-style */\n if (type === bone) {}\n // Array of values - e.g. 'heading, paragraph, text@2'\n else if (type.includes(',')) return mapBones(type)\n // Array of values - e.g. 'paragraph@4'\n else if (type.includes('@')) return genBones(type)\n // Array of values - e.g. 'card@2'\n else if (bone.includes(',')) children = mapBones(bone)\n // Array of values - e.g. 'list-item@2'\n else if (bone.includes('@')) children = genBones(bone)\n // Single value - e.g. 'card-heading'\n else if (bone) children.push(genStructure(bone))\n\n return [genBone(type, children)]\n}\n\nfunction mapBones (bones: string) {\n // Remove spaces and return array of structures\n return bones.replace(/\\s/g, '').split(',').map(genStructure)\n}\n\nexport const makeVSkeletonLoaderProps = propsFactory({\n boilerplate: Boolean,\n color: String,\n loading: Boolean,\n loadingText: {\n type: String,\n default: '$vuetify.loading',\n },\n type: {\n type: [String, Array] as PropType<string | readonly string[]>,\n default: 'image',\n },\n\n ...makeDimensionProps(),\n ...makeElevationProps(),\n ...makeThemeProps(),\n}, 'VSkeletonLoader')\n\nexport const VSkeletonLoader = genericComponent()({\n name: 'VSkeletonLoader',\n\n props: makeVSkeletonLoaderProps(),\n\n setup (props, { slots }) {\n const { backgroundColorClasses, backgroundColorStyles } = useBackgroundColor(toRef(props, 'color'))\n const { dimensionStyles } = useDimension(props)\n const { elevationClasses } = useElevation(props)\n const { themeClasses } = provideTheme(props)\n const { t } = useLocale()\n\n const items = computed(() => genStructure(wrapInArray(props.type).join(',')))\n\n useRender(() => {\n const isLoading = !slots.default || props.loading\n\n return (\n <div\n class={[\n 'v-skeleton-loader',\n {\n 'v-skeleton-loader--boilerplate': props.boilerplate,\n },\n themeClasses.value,\n backgroundColorClasses.value,\n elevationClasses.value,\n ]}\n style={[\n backgroundColorStyles.value,\n isLoading ? dimensionStyles.value : {},\n ]}\n aria-busy={ !props.boilerplate ? isLoading : undefined }\n aria-live={ !props.boilerplate ? 'polite' : undefined }\n aria-label={ !props.boilerplate ? t(props.loadingText) : undefined }\n role={ !props.boilerplate ? 'alert' : undefined }\n >\n { isLoading ? items.value : slots.default?.() }\n </div>\n )\n })\n\n return {}\n },\n})\n\nexport type VSkeletonLoader = InstanceType<typeof VSkeletonLoader>\n"],"mappings":"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"}
|
