element-plus/es/components/loading/src/createLoadingComponent.mjs.map

A Component Library for Vue 3

{"version":3,"file":"createLoadingComponent.mjs","sources":["../../../../../../packages/components/loading/src/createLoadingComponent.ts"],"sourcesContent":["import {\n  createVNode,\n  h,\n  reactive,\n  ref,\n  render,\n  toRefs,\n  Transition,\n  vShow,\n  withCtx,\n  withDirectives,\n} from 'vue'\nimport { removeClass } from '@element-plus/utils/dom'\n\nimport type { VNode } from 'vue'\nimport type { Nullable } from '@element-plus/utils/types'\nimport type {\n  ILoadingCreateComponentParams,\n  ILoadingInstance,\n} from './loading.type'\n\nexport function createLoadingComponent({\n  options,\n  globalLoadingOption,\n}: ILoadingCreateComponentParams): ILoadingInstance {\n  let vm: VNode = null\n  let afterLeaveTimer: Nullable<number> = null\n\n  const afterLeaveFlag = ref(false)\n  const data = reactive({\n    ...options,\n    originalPosition: '',\n    originalOverflow: '',\n    visible: false,\n  })\n\n  function setText(text: string) {\n    data.text = text\n  }\n\n  function destroySelf() {\n    const target = data.parent\n    if (!target.vLoadingAddClassList) {\n      let loadingNumber: number | string = target.getAttribute('loading-number')\n      loadingNumber = Number.parseInt(loadingNumber) - 1\n      if (!loadingNumber) {\n        removeClass(target, 'el-loading-parent--relative')\n        target.removeAttribute('loading-number')\n      } else {\n        target.setAttribute('loading-number', loadingNumber.toString())\n      }\n      removeClass(target, 'el-loading-parent--hidden')\n    }\n    if (vm.el && vm.el.parentNode) {\n      vm.el.parentNode.removeChild(vm.el)\n    }\n  }\n\n  function close() {\n    const target = data.parent\n    target.vLoadingAddClassList = null\n    if (data.fullscreen) {\n      globalLoadingOption.fullscreenLoading = undefined\n    }\n    afterLeaveFlag.value = true\n    clearTimeout(afterLeaveTimer)\n\n    afterLeaveTimer = window.setTimeout(() => {\n      if (afterLeaveFlag.value) {\n        afterLeaveFlag.value = false\n        destroySelf()\n      }\n    }, 400)\n    data.visible = false\n  }\n\n  function handleAfterLeave() {\n    if (!afterLeaveFlag.value) return\n    afterLeaveFlag.value = false\n    destroySelf()\n  }\n\n  const componentSetupConfig = {\n    ...toRefs(data),\n    setText,\n    close,\n    handleAfterLeave,\n  }\n\n  const elLoadingComponent = {\n    name: 'ElLoading',\n    setup() {\n      return componentSetupConfig\n    },\n    render() {\n      const svg = this.spinner || this.svg\n      const spinner = h(\n        'svg',\n        {\n          class: 'circular',\n          viewBox: this.svgViewBox ? this.svgViewBox : '25 25 50 50',\n          ...(svg ? { innerHTML: svg } : {}),\n        },\n        [\n          h('circle', {\n            class: 'path',\n            cx: '50',\n            cy: '50',\n            r: '20',\n            fill: 'none',\n          }),\n        ]\n      )\n\n      const spinnerText = h('p', { class: 'el-loading-text' }, [this.text])\n\n      return h(\n        Transition,\n        {\n          name: 'el-loading-fade',\n          onAfterLeave: this.handleAfterLeave,\n        },\n        {\n          default: withCtx(() => [\n            withDirectives(\n              createVNode(\n                'div',\n                {\n                  style: {\n                    backgroundColor: this.background || '',\n                  },\n                  class: [\n                    'el-loading-mask',\n                    this.customClass,\n                    this.fullscreen ? 'is-fullscreen' : '',\n                  ],\n                },\n                [\n                  h(\n                    'div',\n                    {\n                      class: 'el-loading-spinner',\n                    },\n                    [spinner, this.text ? spinnerText : null]\n                  ),\n                ]\n              ),\n              [[vShow, this.visible]]\n            ),\n          ]),\n        }\n      )\n    },\n  }\n\n  vm = createVNode(elLoadingComponent)\n\n  render(vm, document.createElement('div'))\n\n  return {\n    ...componentSetupConfig,\n    vm,\n    get $el() {\n      return vm.el as HTMLElement\n    },\n  }\n}\n"],"names":[],"mappings":";;;gCAqBuC;AAAA,EACrC;AAAA,EACA;AAAA,GACkD;AAClD,MAAI,KAAY;AAChB,MAAI,kBAAoC;AAExC,QAAM,iBAAiB,IAAI;AAC3B,QAAM,OAAO,SAAS;AAAA,OACjB;AAAA,IACH,kBAAkB;AAAA,IAClB,kBAAkB;AAAA,IAClB,SAAS;AAAA;AAGX,mBAAiB,MAAc;AAC7B,SAAK,OAAO;AAAA;AAGd,yBAAuB;AACrB,UAAM,SAAS,KAAK;AACpB,QAAI,CAAC,OAAO,sBAAsB;AAChC,UAAI,gBAAiC,OAAO,aAAa;AACzD,sBAAgB,OAAO,SAAS,iBAAiB;AACjD,UAAI,CAAC,eAAe;AAClB,oBAAY,QAAQ;AACpB,eAAO,gBAAgB;AAAA,aAClB;AACL,eAAO,aAAa,kBAAkB,cAAc;AAAA;AAEtD,kBAAY,QAAQ;AAAA;AAEtB,QAAI,GAAG,MAAM,GAAG,GAAG,YAAY;AAC7B,SAAG,GAAG,WAAW,YAAY,GAAG;AAAA;AAAA;AAIpC,mBAAiB;AACf,UAAM,SAAS,KAAK;AACpB,WAAO,uBAAuB;AAC9B,QAAI,KAAK,YAAY;AACnB,0BAAoB,oBAAoB;AAAA;AAE1C,mBAAe,QAAQ;AACvB,iBAAa;AAEb,sBAAkB,OAAO,WAAW,MAAM;AACxC,UAAI,eAAe,OAAO;AACxB,uBAAe,QAAQ;AACvB;AAAA;AAAA,OAED;AACH,SAAK,UAAU;AAAA;AAGjB,8BAA4B;AAC1B,QAAI,CAAC,eAAe;AAAO;AAC3B,mBAAe,QAAQ;AACvB;AAAA;AAGF,QAAM,uBAAuB;AAAA,OACxB,OAAO;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA;AAGF,QAAM,qBAAqB;AAAA,IACzB,MAAM;AAAA,IACN,QAAQ;AACN,aAAO;AAAA;AAAA,IAET,SAAS;AACP,YAAM,MAAM,KAAK,WAAW,KAAK;AACjC,YAAM,UAAU,EACd,OACA;AAAA,QACE,OAAO;AAAA,QACP,SAAS,KAAK,aAAa,KAAK,aAAa;AAAA,WACzC,MAAM,EAAE,WAAW,QAAQ;AAAA,SAEjC;AAAA,QACE,EAAE,UAAU;AAAA,UACV,OAAO;AAAA,UACP,IAAI;AAAA,UACJ,IAAI;AAAA,UACJ,GAAG;AAAA,UACH,MAAM;AAAA;AAAA;AAKZ,YAAM,cAAc,EAAE,KAAK,EAAE,OAAO,qBAAqB,CAAC,KAAK;AAE/D,aAAO,EACL,YACA;AAAA,QACE,MAAM;AAAA,QACN,cAAc,KAAK;AAAA,SAErB;AAAA,QACE,SAAS,QAAQ,MAAM;AAAA,UACrB,eACE,YACE,OACA;AAAA,YACE,OAAO;AAAA,cACL,iBAAiB,KAAK,cAAc;AAAA;AAAA,YAEtC,OAAO;AAAA,cACL;AAAA,cACA,KAAK;AAAA,cACL,KAAK,aAAa,kBAAkB;AAAA;AAAA,aAGxC;AAAA,YACE,EACE,OACA;AAAA,cACE,OAAO;AAAA,eAET,CAAC,SAAS,KAAK,OAAO,cAAc;AAAA,cAI1C,CAAC,CAAC,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAQ1B,OAAK,YAAY;AAEjB,SAAO,IAAI,SAAS,cAAc;AAElC,SAAO;AAAA,OACF;AAAA,IACH;AAAA,QACI,MAAM;AACR,aAAO,GAAG;AAAA;AAAA;AAAA;;;;"}