@fesjs/fes-design/es/skeleton/skeleton.js

fes-design for PC

import { defineComponent, computed, mergeProps, createVNode, Fragment } from 'vue';
import { useTheme } from '../_theme/useTheme';
import getPrefixCls from '../_util/getPrefixCls';
import { pxfy } from '../_util/utils';
import { getSlot } from '../_util/vnode';

const prefixCls = getPrefixCls('skeleton');
const skeletonProps = {
  text: Boolean,
  round: Boolean,
  circle: Boolean,
  height: [String, Number],
  width: [String, Number],
  size: String,
  repeat: {
    type: Number,
    default: 1
  },
  animated: {
    type: Boolean,
    default: true
  },
  sharp: {
    type: Boolean,
    default: true
  }
};
var skeleton = defineComponent({
  name: 'FSkeleton',
  inheritAttrs: false,
  props: skeletonProps,
  setup(props) {
    useTheme();
    const style = computed(() => {
      const {
        circle,
        width,
        height
      } = props;
      const mergedWidth = circle ? width !== null && width !== void 0 ? width : height : width;
      const mergedHeight = circle ? height !== null && height !== void 0 ? height : width : height;
      return {
        width: pxfy(mergedWidth),
        height: pxfy(mergedHeight)
      };
    });
    const classes = computed(() => {
      const {
        circle,
        sharp,
        round,
        size,
        text,
        animated
      } = props;
      return [prefixCls, text && `is-text`, circle && `is-circle`, sharp && `is-sharp`, round && `is-round`, size && `is-size-${size}`, animated && `is-animated`];
    });
    return {
      prefixCls,
      style,
      classes
    };
  },
  render() {
    const {
      repeat,
      style,
      $attrs,
      classes,
      $slots
    } = this;
    const slotDefault = $slots.default ? getSlot(this.$slots, 'default') : null;
    const mergeAttrs = mergeProps({
      class: classes,
      style
    }, $attrs);
    const renderChild = () => createVNode("div", {
      "class": mergeAttrs.class,
      "style": mergeAttrs.style
    }, [slotDefault]);
    return repeat <= 1 ? renderChild() : createVNode(Fragment, null, [[...Array(repeat)].map(() => [renderChild()])]);
  }
});

export { skeleton as default, skeletonProps };