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

fes-design for PC

import { defineComponent, ref, watch, onBeforeUnmount, computed, createVNode } from 'vue';
import LoadingOutlined from '../icon/LoadingOutlined';
import getPrefixCls from '../_util/getPrefixCls';
import { useTheme } from '../_theme/useTheme';

const prefixCls = getPrefixCls('spin');
const spinProps = {
  size: {
    type: String,
    default: 'middle'
  },
  description: {
    type: String
  },
  stroke: {
    type: String
  },
  delay: {
    type: Number,
    default: 0
  },
  show: {
    type: Boolean,
    default: true
  }
};
var spin = defineComponent({
  name: 'FSpin',
  props: spinProps,
  setup(props, _ref) {
    let {
      slots
    } = _ref;
    useTheme();
    const isShow = ref(props.show);
    let showTimer;
    function clearTimers() {
      clearTimeout(showTimer);
    }
    const hide = () => {
      isShow.value = false;
    };
    const show = () => {
      if (props.delay) {
        showTimer = setTimeout(() => {
          isShow.value = true;
        }, props.delay);
      } else {
        isShow.value = true;
      }
    };
    const toggleState = value => {
      clearTimers();
      if (!value) {
        hide();
      } else {
        show();
      }
    };
    watch(() => props.show, toggleState);
    onBeforeUnmount(() => {
      clearTimers();
    });
    const style = computed(() => {
      const o = {};
      if (props.stroke) {
        o.color = props.stroke;
      }
      return o;
    });
    const renderIcon = () => {
      var _slots$icon;
      return ((_slots$icon = slots.icon) === null || _slots$icon === void 0 ? void 0 : _slots$icon.call(slots)) || createVNode(LoadingOutlined, null, null);
    };
    const renderDesc = () => {
      var _slots$description;
      if (!slots.description && !props.description) {
        return null;
      }
      return createVNode("span", {
        "class": `${prefixCls}-description`
      }, [((_slots$description = slots.description) === null || _slots$description === void 0 ? void 0 : _slots$description.call(slots)) || props.description]);
    };
    const renderSpin = () => createVNode("div", {
      "class": `${prefixCls} is-size-${props.size}`,
      "style": style.value
    }, [renderIcon()]);
    return () => {
      var _slots$default;
      if (!slots.default) {
        return isShow.value ? renderSpin() : null;
      }
      return createVNode("div", {
        "class": `${prefixCls}-container ${isShow.value ? 'is-spinning' : ''}`
      }, [createVNode("div", {
        "class": `${prefixCls}-content`
      }, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]), createVNode("div", {
        "class": `${prefixCls}-wrapper`
      }, [renderSpin(), renderDesc()])]);
    };
  }
});

export { spin as default, spinProps };