vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 6.6 kB
Source Map (JSON)
{"version":3,"file":"skeleton.cjs","sources":["../../../components/skeleton/skeleton.tsx"],"sourcesContent":["import { Icon } from '@/components/icon'\n\nimport { computed, defineComponent, inject, renderSlot } from 'vue'\n\nimport { createIconProp, useIcons, useNameHelper, useProps } from '@vexip-ui/config'\nimport { skeletonProps } from './props'\nimport { GROUP_STATE } from './symbol'\n\nexport default defineComponent({\n name: 'Skeleton',\n inheritAttrs: false,\n props: skeletonProps,\n setup(_props, { attrs, slots }) {\n const props = useProps('skeleton', _props, {\n size: null,\n width: null,\n height: null,\n repeat: {\n default: 1,\n validator: (value: number) => value > 0,\n },\n tag: 'div',\n activated: null,\n image: false,\n imageIcon: createIconProp(),\n iconScale: 4,\n round: null,\n circle: null,\n block: null,\n spread: 0,\n loading: null,\n })\n\n const groupState = inject(GROUP_STATE, {} as any)\n\n const nh = useNameHelper('skeleton')\n const icons = useIcons()\n\n const activated = computed(() => {\n return props.activated ?? groupState.activated ?? false\n })\n const round = computed(() => {\n return props.round ?? groupState.round ?? false\n })\n const circle = computed(() => {\n return props.circle ?? groupState.circle ?? false\n })\n const block = computed(() => {\n return props.block ?? groupState.block ?? false\n })\n const loading = computed(() => {\n return props.loading ?? groupState.loading ?? true\n })\n const tag = computed(() => {\n return props.tag || groupState.itemTag || 'div'\n })\n const className = computed(() => {\n return {\n [nh.b()]: true,\n [nh.bs('vars')]: true,\n [nh.bm('inherit')]: Object.keys(groupState).length || props.inherit,\n [nh.bm(props.size)]: props.size ?? groupState?.size,\n [nh.bm('block')]: block.value,\n [nh.bm('image')]: props.image,\n [nh.bm('round')]: round.value && !circle.value,\n [nh.bm('circle')]: circle.value,\n [nh.bm('activated')]: activated.value,\n }\n })\n const style = computed(() => {\n const style: Record<string, string> = {}\n\n if (props.width !== null) {\n style[nh.cv('width')] = parseSize(props.width)\n }\n\n if (props.height !== null) {\n style[nh.cv('height')] = parseSize(props.height)\n }\n\n if (props.spread) {\n style[nh.cv('spread')] = parseSize(props.spread)\n }\n\n return style\n })\n\n function parseSize(value: string | number) {\n if (typeof value === 'number') {\n return `${value}px`\n }\n\n value = value.trim()\n\n if (/\\d$/.test(value)) {\n return `${value}px`\n }\n\n return value\n }\n\n function renderSkeleton() {\n const Wrapper = tag.value || 'div'\n\n return (\n <Wrapper\n {...attrs}\n class={[className.value, attrs.class]}\n style={[style.value, attrs.style]}\n >\n {props.image ? (\n <Icon\n {...icons.value.image}\n icon={props.imageIcon || icons.value.image.icon}\n scale={props.iconScale}\n ></Icon>\n ) : null}\n </Wrapper>\n )\n }\n\n return () => {\n if (!loading.value) {\n return renderSlot(slots, 'default')\n }\n\n if (props.repeat > 1) {\n return Array.from({ length: props.repeat }, () => renderSkeleton())\n }\n\n return renderSkeleton()\n }\n },\n})\n"],"names":["defineComponent","name","inheritAttrs","props","skeletonProps","setup","_props","attrs","slots","useProps","size","width","height","repeat","default","validator","value","tag","activated","image","imageIcon","createIconProp","iconScale","round","circle","block","spread","loading","groupState","inject","GROUP_STATE","nh","useNameHelper","icons","useIcons","computed","itemTag","className","b","bs","bm","Object","keys","length","inherit","style","cv","parseSize","trim","test","renderSkeleton","Wrapper","_createVNode","_mergeProps","class","Icon","icon","Array","from","renderSlot"],"mappings":"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"}