xdesign-vue-next/es/loading/loading.mjs

XDesign Component for vue-next

/**
 * xdesign v1.0.6
 * (c) 2023 xdesign
 * @license MIT
 */

import { _ as _slicedToArray } from '../_chunks/dep-32d4c595.mjs';
import { _ as _defineProperty } from '../_chunks/dep-f9e836af.mjs';
import { defineComponent, ref, computed, toRefs, watch, onMounted, createVNode, Teleport, mergeProps } from 'vue';
import GradientIcon from './icon/gradient.mjs';
import { addClass, removeClass } from '../utils/dom.mjs';
import { renderTNodeJSX, renderContent } from '../utils/render-tnode.mjs';
import props from './props.mjs';
import { usePrefixClass, useCommonClassName } from '../hooks/useConfig.mjs';
import useTeleport from '../hooks/useTeleport.mjs';
import '../_chunks/dep-89b966f4.mjs';
import '../_chunks/dep-82805301.mjs';
import '../_common/js/loading/circle-adapter.mjs';
import '../_common/js/utils/set-style.mjs';
import '../_common/js/utils/helper.mjs';
import '../_chunks/dep-5bec687c.mjs';
import '../_chunks/dep-53e379cd.mjs';
import '../_chunks/dep-11fa9c2c.mjs';
import '../_chunks/dep-10a947a6.mjs';
import '../_chunks/dep-b75d8d74.mjs';
import '../_chunks/dep-a95026f2.mjs';
import '../_chunks/dep-068e912d.mjs';
import '../_chunks/dep-addc2a84.mjs';
import '../_chunks/dep-5a2ce53e.mjs';
import '../_chunks/dep-1bae6a97.mjs';
import '../_chunks/dep-23f91684.mjs';
import '../_chunks/dep-1cc1c24f.mjs';
import '../_chunks/dep-6ad18815.mjs';
import '../utils/easing.mjs';
import '../_chunks/dep-9d7ebc32.mjs';
import '../_chunks/dep-69963a8c.mjs';
import '../_chunks/dep-6e7b37b8.mjs';
import '../_chunks/dep-e1ab85c5.mjs';
import '../_chunks/dep-5f0e0453.mjs';
import '../_chunks/dep-db381ece.mjs';
import '../_chunks/dep-5755c21c.mjs';
import '../_chunks/dep-8d1c9a23.mjs';
import '../_chunks/dep-dafada74.mjs';
import '../_chunks/dep-0e832fc7.mjs';
import '../_chunks/dep-a628549d.mjs';
import '../_chunks/dep-4903a8a8.mjs';
import '../_chunks/dep-7dcfa37a.mjs';
import '../_chunks/dep-f4eba04c.mjs';
import '../_chunks/dep-735bcd0d.mjs';
import '../_chunks/dep-765678ef.mjs';
import '../_chunks/dep-8db27830.mjs';
import '../_chunks/dep-ae4bffa5.mjs';
import '../config-provider/useConfig.mjs';
import '../_chunks/dep-91ac8f71.mjs';
import '../_chunks/dep-c4737535.mjs';
import '../_chunks/dep-81c83986.mjs';
import '../_chunks/dep-6aa0223b.mjs';
import '../_chunks/dep-7f239c43.mjs';
import '../_chunks/dep-6f04869e.mjs';
import '../_chunks/dep-d32fbbb3.mjs';
import '../_chunks/dep-71f84cf2.mjs';
import '../_chunks/dep-03412fab.mjs';
import '../_chunks/dep-205ff58d.mjs';
import '../_chunks/dep-b09f48fa.mjs';
import '../_chunks/dep-26bf361a.mjs';
import '../_chunks/dep-3ec3335a.mjs';
import '../_chunks/dep-ed4e7c50.mjs';
import '../_chunks/dep-a666b9ad.mjs';
import '../_common/js/global-config/default-config.mjs';
import '../_common/js/global-config/locale/en_US.mjs';
import '../config-provider/type.mjs';

var useComponentClassName = function useComponentClassName() {
  return {
    name: usePrefixClass("loading"),
    centerClass: usePrefixClass("loading--center"),
    fullscreenClass: usePrefixClass("loading__fullscreen"),
    lockClass: usePrefixClass("loading--lock"),
    overlayClass: usePrefixClass("loading__overlay"),
    relativeClass: usePrefixClass("loading__parent"),
    fullClass: usePrefixClass("loading--full"),
    inheritColorClass: usePrefixClass("loading--inherit-color")
  };
};
var _Loading = defineComponent({
  name: "XLoading",
  inheritAttrs: false,
  props: props,
  setup: function setup(props2, _ref) {
    var slots = _ref.slots;
    var delayShowLoading = ref(false);
    var _useComponentClassNam = useComponentClassName(),
      name = _useComponentClassNam.name,
      centerClass = _useComponentClassNam.centerClass,
      fullscreenClass = _useComponentClassNam.fullscreenClass,
      lockClass = _useComponentClassNam.lockClass,
      overlayClass = _useComponentClassNam.overlayClass,
      relativeClass = _useComponentClassNam.relativeClass,
      fullClass = _useComponentClassNam.fullClass,
      inheritColorClass = _useComponentClassNam.inheritColorClass;
    var classPrefix = usePrefixClass();
    var _useCommonClassName = useCommonClassName(),
      SIZE = _useCommonClassName.SIZE;
    var countDelay = function countDelay() {
      delayShowLoading.value = false;
      var timer = setTimeout(function () {
        delayShowLoading.value = true;
        clearTimeout(timer);
      }, props2.delay);
    };
    var teleportElement = useTeleport(function () {
      return props2.attach;
    });
    var delayCounted = computed(function () {
      return Boolean(!props2.delay || props2.delay && delayShowLoading.value);
    });
    var styles = computed(function () {
      var styles2 = {};
      if (props2.zIndex !== void 0) {
        styles2.zIndex = props2.zIndex;
      }
      if (!["small", "medium", "large"].includes(props2.size)) {
        styles2["font-size"] = props2.size;
      }
      return styles2;
    });
    var hasContent = computed(function () {
      return Boolean(props2["default"] || slots["default"] || props2.content || slots.content);
    });
    var lockFullscreen = computed(function () {
      return props2.preventScrollThrough && props2.fullscreen;
    });
    var showText = computed(function () {
      return Boolean(props2.text || slots.text);
    });
    var showWrapLoading = computed(function () {
      return hasContent.value && props2.loading && delayCounted.value;
    });
    var showFullScreenLoading = computed(function () {
      return props2.fullscreen && props2.loading && delayCounted.value;
    });
    var showNormalLoading = computed(function () {
      return props2.attach && props2.loading && delayCounted.value;
    });
    var showAttachedLoading = computed(function () {
      return props2.attach && props2.loading && delayCounted.value;
    });
    var classes = computed(function () {
      var baseClasses = [centerClass.value, SIZE.value[props2.size], _defineProperty({}, inheritColorClass.value, props2.inheritColor)];
      var fullScreenClasses = [name.value, fullscreenClass.value, centerClass.value, overlayClass.value];
      return {
        baseClasses: baseClasses,
        attachClasses: baseClasses.concat([name.value, fullClass.value, _defineProperty({}, overlayClass.value, props2.showOverlay)]),
        withContentClasses: baseClasses.concat([name.value, fullClass.value, _defineProperty({}, overlayClass.value, props2.showOverlay)]),
        fullScreenClasses: fullScreenClasses,
        normalClasses: baseClasses.concat([name.value])
      };
    });
    var _toRefs = toRefs(props2),
      loading = _toRefs.loading;
    watch([loading], function (_ref5) {
      var _ref6 = _slicedToArray(_ref5, 1),
        isLoading = _ref6[0];
      if (isLoading) {
        countDelay();
        lockFullscreen.value && addClass(document.body, lockClass.value);
      } else {
        lockFullscreen.value && removeClass(document.body, lockClass.value);
      }
    });
    onMounted(function () {
      props2.delay && countDelay();
    });
    return {
      classPrefix: classPrefix,
      relativeClass: relativeClass,
      delayShowLoading: delayShowLoading,
      styles: styles,
      showText: showText,
      hasContent: hasContent,
      classes: classes,
      lockFullscreen: lockFullscreen,
      showWrapLoading: showWrapLoading,
      showNormalLoading: showNormalLoading,
      showFullScreenLoading: showFullScreenLoading,
      showAttachedLoading: showAttachedLoading,
      teleportElement: teleportElement
    };
  },
  render: function render() {
    var _this = this;
    var _this$classes = this.classes,
      fullScreenClasses = _this$classes.fullScreenClasses,
      baseClasses = _this$classes.baseClasses,
      withContentClasses = _this$classes.withContentClasses,
      attachClasses = _this$classes.attachClasses,
      normalClasses = _this$classes.normalClasses;
    var defaultIndicator = createVNode(GradientIcon, {
      "size": this.size
    }, null);
    var indicator = this.loading && renderTNodeJSX(this, "indicator", defaultIndicator);
    var text = this.showText && createVNode("div", {
      "class": "".concat(this.classPrefix, "-loading__text")
    }, [renderTNodeJSX(this, "text")]);
    if (this.fullscreen) {
      if (!this.showFullScreenLoading || !this.loading) return null;
      return createVNode(Teleport, {
        "disabled": !this.attach || !this.teleportElement,
        "to": this.teleportElement
      }, {
        "default": function _default() {
          return [createVNode("div", mergeProps({
            "class": fullScreenClasses,
            "style": _this.styles
          }, _this.$attrs), [createVNode("div", {
            "class": baseClasses
          }, [indicator, text])])];
        }
      });
    }
    if (this.hasContent) {
      return createVNode("div", mergeProps({
        "class": this.relativeClass
      }, this.$attrs), [renderContent(this, "default", "content"), this.showWrapLoading && createVNode("div", {
        "class": withContentClasses,
        "style": this.styles
      }, [indicator, text])]);
    }
    if (this.attach) {
      if (!this.showAttachedLoading || !this.loading) return null;
      return createVNode(Teleport, {
        "disabled": !this.attach || !this.teleportElement,
        "to": this.teleportElement
      }, {
        "default": function _default() {
          return [createVNode("div", mergeProps({
            "class": attachClasses,
            "style": _this.styles
          }, _this.$attrs), [indicator, text])];
        }
      });
    }
    return this.loading ? createVNode("div", mergeProps({
      "class": normalClasses,
      "style": this.styles
    }, this.$attrs), [indicator, text]) : null;
  }
});

export { _Loading as default };
//# sourceMappingURL=loading.mjs.map