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

XDesign Component for vue-next

{"version":3,"file":"loading.mjs","sources":["../../src/loading/loading.tsx"],"sourcesContent":["import { defineComponent, ref, computed, watch, onMounted, toRefs, CSSProperties, Teleport } from 'vue';\nimport GradientIcon from './icon/gradient';\nimport { addClass, removeClass } from '../utils/dom';\nimport { renderTNodeJSX, renderContent } from '../utils/render-tnode';\nimport props from './props';\n\nimport { usePrefixClass, useCommonClassName } from '../hooks/useConfig';\nimport useTeleport from '../hooks/useTeleport';\n\nconst useComponentClassName = () => {\n  return {\n    name: usePrefixClass('loading'),\n    centerClass: usePrefixClass('loading--center'),\n    fullscreenClass: usePrefixClass('loading__fullscreen'),\n    lockClass: usePrefixClass('loading--lock'),\n    overlayClass: usePrefixClass('loading__overlay'),\n    relativeClass: usePrefixClass('loading__parent'),\n    fullClass: usePrefixClass('loading--full'),\n    inheritColorClass: usePrefixClass('loading--inherit-color'),\n  };\n};\n\nexport default defineComponent({\n  name: 'XLoading',\n  inheritAttrs: false,\n  props,\n  setup(props, { slots }) {\n    const delayShowLoading = ref(false);\n\n    const { name, centerClass, fullscreenClass, lockClass, overlayClass, relativeClass, fullClass, inheritColorClass } =\n      useComponentClassName();\n\n    const classPrefix = usePrefixClass();\n    const { SIZE } = useCommonClassName();\n\n    const countDelay = () => {\n      delayShowLoading.value = false;\n      const timer = setTimeout(() => {\n        delayShowLoading.value = true;\n        clearTimeout(timer);\n      }, props.delay);\n    };\n    // teleport容器\n    const teleportElement = useTeleport(() => props.attach);\n    // 延时计时是否完成。用于控制延时计时结束前不能显示加载态\n    const delayCounted = computed(() => Boolean(!props.delay || (props.delay && delayShowLoading.value)));\n\n    // loading style\n    const styles = computed(() => {\n      const styles: CSSProperties = {};\n      if (props.zIndex !== undefined) {\n        styles.zIndex = props.zIndex;\n      }\n      if (!['small', 'medium', 'large'].includes(props.size)) {\n        styles['font-size'] = props.size;\n      }\n      return styles;\n    });\n\n    const hasContent = computed(() => Boolean(props.default || slots.default || props.content || slots.content));\n    const lockFullscreen = computed(() => props.preventScrollThrough && props.fullscreen);\n    const showText = computed(() => Boolean(props.text || slots.text));\n    const showWrapLoading = computed(() => hasContent.value && props.loading && delayCounted.value);\n    const showFullScreenLoading = computed(() => props.fullscreen && props.loading && delayCounted.value);\n    const showNormalLoading = computed(() => props.attach && props.loading && delayCounted.value);\n    const showAttachedLoading = computed(() => props.attach && props.loading && delayCounted.value);\n    const classes = computed(() => {\n      const baseClasses = [\n        centerClass.value,\n        SIZE.value[props.size],\n        { [inheritColorClass.value]: props.inheritColor },\n      ];\n      const fullScreenClasses = [name.value, fullscreenClass.value, centerClass.value, overlayClass.value];\n\n      return {\n        baseClasses,\n        attachClasses: baseClasses.concat([name.value, fullClass.value, { [overlayClass.value]: props.showOverlay }]),\n        withContentClasses: baseClasses.concat([\n          name.value,\n          fullClass.value,\n          {\n            [overlayClass.value]: props.showOverlay,\n          },\n        ]),\n        fullScreenClasses,\n        normalClasses: baseClasses.concat([name.value]),\n      };\n    });\n\n    const { loading } = toRefs(props);\n\n    watch([loading], ([isLoading]) => {\n      if (isLoading) {\n        countDelay();\n        lockFullscreen.value && addClass(document.body, lockClass.value);\n      } else {\n        lockFullscreen.value && removeClass(document.body, lockClass.value);\n      }\n    });\n\n    onMounted(() => {\n      props.delay && countDelay();\n    });\n\n    return {\n      classPrefix,\n      relativeClass,\n      delayShowLoading,\n      styles,\n      showText,\n      hasContent,\n      classes,\n      lockFullscreen,\n      showWrapLoading,\n      showNormalLoading,\n      showFullScreenLoading,\n      showAttachedLoading,\n      teleportElement,\n    };\n  },\n  render() {\n    const { fullScreenClasses, baseClasses, withContentClasses, attachClasses, normalClasses } = this.classes;\n\n    const defaultIndicator = <GradientIcon size={this.size} />;\n    const indicator = this.loading && renderTNodeJSX(this, 'indicator', defaultIndicator);\n    const text = this.showText && <div class={`${this.classPrefix}-loading__text`}>{renderTNodeJSX(this, 'text')}</div>;\n\n    // full screen loading\n    if (this.fullscreen) {\n      if (!this.showFullScreenLoading || !this.loading) return null;\n      return (\n        <Teleport disabled={!this.attach || !this.teleportElement} to={this.teleportElement}>\n          <div class={fullScreenClasses} style={this.styles} {...this.$attrs}>\n            <div class={baseClasses}>\n              {indicator}\n              {text}\n            </div>\n          </div>\n        </Teleport>\n      );\n    }\n\n    // Loading is wrapping a HTMLElement.\n    if (this.hasContent) {\n      return (\n        <div class={this.relativeClass} {...this.$attrs}>\n          {renderContent(this, 'default', 'content')}\n          {this.showWrapLoading && (\n            <div class={withContentClasses} style={this.styles}>\n              {indicator}\n              {text}\n            </div>\n          )}\n        </div>\n      );\n    }\n\n    // transfer parent node\n    if (this.attach) {\n      if (!this.showAttachedLoading || !this.loading) return null;\n      return (\n        <Teleport disabled={!this.attach || !this.teleportElement} to={this.teleportElement}>\n          <div class={attachClasses} style={this.styles} {...this.$attrs}>\n            {indicator}\n            {text}\n          </div>\n        </Teleport>\n      );\n    }\n\n    // Normal Loading without overlay or content\n    return this.loading ? (\n      <div class={normalClasses} style={this.styles} {...this.$attrs}>\n        {indicator}\n        {text}\n      </div>\n    ) : null;\n  },\n});\n"],"names":["name","centerClass","fullscreenClass","lockClass","overlayClass","relativeClass","fullClass","inheritAttrs","props","setup","styles","baseClasses","fullScreenClasses","watch","isLoading","countDelay","lockFullscreen","onMounted","classPrefix","delayShowLoading","showText","hasContent","classes","showWrapLoading","showNormalLoading","showFullScreenLoading","showAttachedLoading","teleportElement","_createVNode","_mergeProps"],"mappings":"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"}