digivue/loading/index.mjs

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

import { unblockBodyScroll, addClass, hasCSSAnimation } from '@digivue/utils/dom';
import { ZIndex, blockBodyScroll } from '@digivue/utils';
import BaseComponent from '@digivue/core/basecomponent';
import LoadingStyle from 'digivue/loading/style';
import Icon from 'digivue/icon';
import { resolveComponent, createBlock, openBlock, Teleport, createElementBlock, createCommentVNode, mergeProps, renderSlot, createVNode } from 'vue';

var script$1 = {
  name: 'BaseLoading',
  "extends": BaseComponent,
  props: {
    blocked: {
      type: Boolean,
      "default": false
    },
    fullScreen: {
      type: Boolean,
      "default": false
    },
    baseZIndex: {
      type: Number,
      "default": 0
    },
    autoZIndex: {
      type: Boolean,
      "default": true
    }
  },
  style: LoadingStyle,
  provide: function provide() {
    return {
      $pcLoading: this,
      $parentInstance: this
    };
  }
};

var script = {
  name: 'Loading',
  "extends": script$1,
  inheritAttrs: false,
  emits: ['block', 'unblock'],
  mask: null,
  data: function data() {
    return {
      isBlocked: false
    };
  },
  watch: {
    blocked: function blocked(newValue) {
      if (newValue === true) this.block();else this.unblock();
    }
  },
  mounted: function mounted() {
    if (this.blocked) {
      this.block();
    }
  },
  methods: {
    block: function block() {
      var _this = this;
      this.isBlocked = true;
      this.$nextTick(function () {
        ZIndex.set('modal', _this.$refs.loadingScreen, _this.baseZIndex + _this.$primevue.config.zIndex.modal);
        document.activeElement.blur();
        blockBodyScroll();
        _this.$emit('block');
      });
    },
    unblock: function unblock() {
      var _this2 = this;
      addClass(this.$refs.loadingScreen, 'p-overlay-mask-leave');
      if (hasCSSAnimation(this.$refs.loadingScreen) > 0) {
        this.$refs.loadingScreen.addEventListener('animationend', function () {
          _this2.removeMask();
        });
      } else {
        this.removeMask();
      }
    },
    removeMask: function removeMask() {
      ZIndex.clear(this.$refs.loadingScreen);
      unblockBodyScroll();
      this.isBlocked = false;
      this.$emit('unblock');
    }
  },
  components: {
    Icon: Icon
  }
};

function render(_ctx, _cache, $props, $setup, $data, $options) {
  var _component_Icon = resolveComponent("Icon");
  return openBlock(), createBlock(Teleport, {
    to: "body"
  }, [$data.isBlocked ? (openBlock(), createElementBlock("div", mergeProps({
    key: 0,
    ref: "loadingScreen",
    "aria-busy": "true",
    "class": _ctx.cx('root')
  }, _ctx.ptmi('root')), [renderSlot(_ctx.$slots, "default", {}, function () {
    return [createVNode(_component_Icon, {
      icon: "arrows-rotate",
      "icon-style": "far",
      spin: ""
    })];
  })], 16)) : createCommentVNode("", true)]);
}

script.render = render;

export { script as default };
//# sourceMappingURL=index.mjs.map