winbox-ui-next/es/spin/spin.js

We Design Vue 2.0: A Vue.js 3 UI Library

import { defineComponent, computed, createVNode, Fragment, cloneVNode } from "vue";
import { getPrefixCls } from "../_utils/global-config.js";
import IconLoading from "../icon/icon-loading/index.js";
import DotLoading from "./dot-loading.js";
import { getFirstComponent } from "../_utils/vue-utils.js";
var _Spin = defineComponent({
  name: "Spin",
  props: {
    size: {
      type: Number
    },
    loading: Boolean,
    dot: Boolean,
    tip: String
  },
  setup(props, {
    slots,
    attrs
  }) {
    const prefixCls = getPrefixCls("spin");
    const cls = computed(() => [prefixCls, {
      [`${prefixCls}-loading`]: props.loading,
      [`${prefixCls}-with-tip`]: props.tip && !slots.default
    }]);
    const renderIcon = () => {
      if (slots.icon) {
        const iconVNode = getFirstComponent(slots.icon());
        if (iconVNode) {
          return cloneVNode(iconVNode, {
            spin: true
          });
        }
      }
      if (slots.element) {
        return slots.element();
      }
      if (props.dot) {
        return createVNode(DotLoading, {
          "size": props.size
        }, null);
      }
      return createVNode(IconLoading, {
        "spin": true
      }, null);
    };
    const renderSpinIcon = () => {
      const style = props.size ? {
        fontSize: `${props.size}px`
      } : void 0;
      return createVNode(Fragment, null, [createVNode("div", {
        "class": `${prefixCls}-icon`,
        "style": style
      }, [renderIcon()]), props.tip && createVNode("div", {
        "class": `${prefixCls}-tip`
      }, [props.tip])]);
    };
    return () => createVNode("div", {
      "class": cls.value
    }, [slots.default ? createVNode(Fragment, null, [slots.default(), props.loading && createVNode("div", {
      "class": `${prefixCls}-mask`
    }, [createVNode("div", {
      "class": `${prefixCls}-mask-icon`
    }, [renderSpinIcon()])])]) : renderSpinIcon()]);
  }
});
export { _Spin as default };