xdesign-vue-next/es/skeleton/skeleton.mjs.map

XDesign Component for vue-next

{"version":3,"file":"skeleton.mjs","sources":["../../src/skeleton/skeleton.tsx"],"sourcesContent":["import { h, defineComponent, ref, watch } from 'vue';\nimport isNumber from 'lodash/isNumber';\nimport isFunction from 'lodash/isFunction';\nimport props from './props';\nimport { SkeletonRowCol, SkeletonRowColObj, TdSkeletonProps } from './type';\nimport { usePrefixClass } from '../hooks/useConfig';\nimport { useContent } from '../hooks/tnode';\nimport isArray from 'lodash/isArray';\n\nconst ThemeMap: Record<TdSkeletonProps['theme'], SkeletonRowCol> = {\n  text: [1],\n  avatar: [{ type: 'circle', size: '56px' }],\n  paragraph: [1, 1, { width: '70%' }],\n  'avatar-text': [[{ type: 'circle' }, { type: 'text', height: '32px' }]],\n  tab: [{ height: '30px' }, { height: '200px' }],\n  article: [\n    { type: 'rect', height: '30px', width: '100%' },\n    { type: 'rect', height: '200px', width: '100%' },\n    [\n      { type: 'text', height: '30px' },\n      { type: 'text', height: '30px' },\n      { type: 'text', height: '30px' },\n    ],\n    [\n      { type: 'text', height: '30px' },\n      { type: 'text', height: '30px' },\n    ],\n    [\n      { type: 'text', height: '30px' },\n      { type: 'text', height: '30px' },\n    ],\n    [\n      { type: 'text', height: '30px' },\n      { type: 'text', height: '30px' },\n    ],\n  ],\n};\n\nconst getColItemStyle = (obj: SkeletonRowColObj) => {\n  const styleName = ['width', 'height', 'marginRight', 'marginLeft', 'margin', 'size', 'background', 'backgroundColor'];\n  const style = Object.create(null);\n  styleName.forEach((name) => {\n    if (name in obj) {\n      const px = isNumber(obj[name]) ? `${obj[name]}px` : obj[name];\n      if (name === 'size') {\n        [style.width, style.height] = [px, px];\n      } else {\n        style[name] = px;\n      }\n    }\n  });\n  return style;\n};\n\nexport default defineComponent({\n  name: 'XSkeleton',\n\n  props: { ...props },\n\n  setup(props, { slots }) {\n    const isShow = ref(false);\n    const COMPONENT_NAME = usePrefixClass('skeleton');\n    const renderContent = useContent();\n    const getColItemClass = (obj: SkeletonRowColObj) => [\n      `${COMPONENT_NAME.value}__col`,\n      `${COMPONENT_NAME.value}--type-${obj.type || 'text'}`,\n      { [`${COMPONENT_NAME.value}--animation-${props.animation}`]: props.animation },\n    ];\n\n    const renderCols = (_cols: Number | SkeletonRowColObj | Array<SkeletonRowColObj>) => {\n      let cols: Array<SkeletonRowColObj> = [];\n      if (isArray(_cols)) {\n        cols = _cols;\n      } else if (isNumber(_cols)) {\n        cols = new Array(_cols).fill({ type: 'text' });\n      } else {\n        cols = [_cols as SkeletonRowColObj];\n      }\n      return cols.map((obj) => (\n        <div class={getColItemClass(obj)} style={getColItemStyle(obj)}>\n          {isFunction(obj.content) ? obj.content(h) : obj.content}\n        </div>\n      ));\n    };\n\n    const renderRowCol = (_rowCol?: SkeletonRowCol) => {\n      const rowCol: SkeletonRowCol = _rowCol || props.rowCol;\n\n      const getBlockClass = () => [`${COMPONENT_NAME.value}__row`];\n\n      return rowCol.map((item) => <div class={getBlockClass()}>{renderCols(item)}</div>);\n    };\n\n    watch(\n      () => props.loading,\n      (val) => {\n        if (!val || props.delay === 0) {\n          isShow.value = val;\n          return;\n        }\n        setTimeout(() => {\n          isShow.value = val;\n        }, props.delay);\n      },\n      { immediate: true },\n    );\n\n    return () => {\n      const content = renderContent('default', 'content');\n\n      if (slots.default && !isShow.value) {\n        return <div>{content}</div>;\n      }\n\n      if (!isShow.value) {\n        return;\n      }\n\n      const children = [];\n      if (props.theme) {\n        children.push(renderRowCol(ThemeMap[props.theme]));\n      }\n      if (props.rowCol) {\n        children.push(renderRowCol(props.rowCol));\n      }\n      if (!props.theme && !props.rowCol) {\n        // 什么都不传时，传入默认 rowCol\n        children.push(renderRowCol([1, 1, 1, { width: '70%' }]));\n      }\n\n      return <div class={COMPONENT_NAME.value}>{children}</div>;\n    };\n  },\n});\n"],"names":["avatar","type","size","paragraph","width","height","tab","article","styleName","style","name","props","setup","isArray","cols","isNumber","_createVNode","isFunction","watch","setTimeout","immediate","children"],"mappings":"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"}