vexip-ui/lib/components/loading/loading.vue2.cjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"loading.vue2.cjs","sources":["../../../components/loading/loading.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref } from 'vue'\n\nimport { useNameHelper } from '@vexip-ui/config'\nimport { useRtl } from '@vexip-ui/hooks'\nimport { boundRange } from '@vexip-ui/utils'\n\nimport type { LoadingOptions, LoadingPosition, LoadingState } from './symbol'\n\ndefineOptions({ name: 'Loading' })\n\nconst nh = useNameHelper('loading')\nconst { isRtl } = useRtl()\nconst visible = ref(false)\nconst strokeWidth = ref(2)\nconst state = ref<LoadingState>('default')\nconst position = ref<LoadingPosition>('top')\nconst percent = ref(0)\n\nlet maxPercent = 95\n\nconst className = computed(() => {\n  return {\n    [nh.b()]: true,\n    [nh.bs('vars')]: true,\n    [nh.bm(state.value)]: state.value !== 'default',\n  }\n})\n\nconst style = computed(() => {\n  return {\n    [position.value]: '0',\n    height: `${strokeWidth.value}px`,\n  }\n})\n\nconst fillerStyle = computed(() => {\n  return {\n    transform: `translateX(${((isRtl.value ? -1 : 1) * (percent.value - 100)) / 2}%) scaleX(${\n      percent.value / 100\n    })`,\n  }\n})\n\nlet timer: ReturnType<typeof setTimeout>\nlet interval: ReturnType<typeof setInterval>\nlet rafId: ReturnType<typeof requestAnimationFrame>\n\ndefineExpose({ visible, percent, startLoading })\n\nonBeforeUnmount(() => {\n  clearTimeout(timer)\n  clearInterval(interval)\n  cancelAnimationFrame(rafId)\n})\n\nfunction startLoading(options: LoadingOptions) {\n  if (percent.value === 100) {\n    clearTimeout(timer)\n\n    visible.value = false\n    percent.value = 0\n    state.value = 'default'\n    strokeWidth.value = 2\n    position.value = 'top'\n  }\n\n  clearInterval(interval)\n\n  const setLoading = () => {\n    percent.value = boundRange(options.percent, 0, 100)\n    state.value = options.state ?? state.value\n    strokeWidth.value = boundRange(options.strokeWidth ?? 2, 1, 10)\n    position.value = options.position ?? position.value\n    maxPercent = boundRange(options.maxPercent ?? 95, percent.value, 95)\n\n    if (percent.value === 100) {\n      timer = setTimeout(() => {\n        visible.value = false\n      }, 500)\n    } else {\n      interval = setInterval(() => {\n        percent.value += Math.floor(Math.random() * 3 + 1)\n\n        if (percent.value >= maxPercent) {\n          percent.value = maxPercent\n          clearInterval(interval)\n        }\n      }, 500)\n    }\n  }\n\n  maxPercent = 95\n\n  rafId = requestAnimationFrame(() => {\n    if (visible.value) {\n      setLoading()\n    } else {\n      visible.value = true\n      rafId = requestAnimationFrame(setLoading)\n    }\n  })\n}\n</script>\n\n<template>\n  <Transition :name=\"nh.ns('fade')\" appear>\n    <div\n      v-show=\"visible\"\n      :class=\"className\"\n      role=\"progressbar\"\n      :style=\"style\"\n      :aria-valuenow=\"percent\"\n      aria-valuemin=\"0\"\n      aria-valuemax=\"100\"\n    >\n      <div :class=\"nh.be('filler')\" :style=\"fillerStyle\"></div>\n    </div>\n  </Transition>\n</template>\n"],"names":["nh","useNameHelper","isRtl","useRtl","visible","ref","strokeWidth","state","position","percent","maxPercent","className","computed","style","fillerStyle","timer","interval","rafId","__expose","startLoading","onBeforeUnmount","options","setLoading","boundRange","_createBlock","_Transition","_unref","_createElementVNode","_normalizeClass"],"mappings":"yNAWM,MAAAA,EAAKC,gBAAc,SAAS,EAC5B,CAAE,MAAAC,CAAM,EAAIC,SAAO,EACnBC,EAAUC,MAAI,EAAK,EACnBC,EAAcD,MAAI,CAAC,EACnBE,EAAQF,MAAkB,SAAS,EACnCG,EAAWH,MAAqB,KAAK,EACrCI,EAAUJ,MAAI,CAAC,EAErB,IAAIK,EAAa,GAEX,MAAAC,EAAYC,EAAAA,SAAS,KAClB,CACL,CAACZ,EAAG,EAAE,CAAC,EAAG,GACV,CAACA,EAAG,GAAG,MAAM,CAAC,EAAG,GACjB,CAACA,EAAG,GAAGO,EAAM,KAAK,CAAC,EAAGA,EAAM,QAAU,SACxC,EACD,EAEKM,EAAQD,EAAAA,SAAS,KACd,CACL,CAACJ,EAAS,KAAK,EAAG,IAClB,OAAQ,GAAGF,EAAY,KAAK,IAC9B,EACD,EAEKQ,EAAcF,EAAAA,SAAS,KACpB,CACL,UAAW,eAAgBV,EAAM,MAAQ,GAAK,IAAMO,EAAQ,MAAQ,KAAQ,CAAC,aAC3EA,EAAQ,MAAQ,GAClB,GACF,EACD,EAEG,IAAAM,EACAC,EACAC,EAEJC,EAAa,CAAE,QAAAd,EAAS,QAAAK,EAAS,aAAAU,CAAA,CAAc,EAE/CC,EAAAA,gBAAgB,IAAM,CACpB,aAAaL,CAAK,EAClB,cAAcC,CAAQ,EACtB,qBAAqBC,CAAK,CAAA,CAC3B,EAED,SAASE,EAAaE,EAAyB,CACzCZ,EAAQ,QAAU,MACpB,aAAaM,CAAK,EAElBX,EAAQ,MAAQ,GAChBK,EAAQ,MAAQ,EAChBF,EAAM,MAAQ,UACdD,EAAY,MAAQ,EACpBE,EAAS,MAAQ,OAGnB,cAAcQ,CAAQ,EAEtB,MAAMM,EAAa,IAAM,CACvBb,EAAQ,MAAQc,EAAA,WAAWF,EAAQ,QAAS,EAAG,GAAG,EAC5Cd,EAAA,MAAQc,EAAQ,OAASd,EAAM,MACrCD,EAAY,MAAQiB,aAAWF,EAAQ,aAAe,EAAG,EAAG,EAAE,EACrDb,EAAA,MAAQa,EAAQ,UAAYb,EAAS,MAC9CE,EAAaa,aAAWF,EAAQ,YAAc,GAAIZ,EAAQ,MAAO,EAAE,EAE/DA,EAAQ,QAAU,IACpBM,EAAQ,WAAW,IAAM,CACvBX,EAAQ,MAAQ,IACf,GAAG,EAENY,EAAW,YAAY,IAAM,CAC3BP,EAAQ,OAAS,KAAK,MAAM,KAAK,OAAO,EAAI,EAAI,CAAC,EAE7CA,EAAQ,OAASC,IACnBD,EAAQ,MAAQC,EAChB,cAAcM,CAAQ,IAEvB,GAAG,CAEV,EAEaN,EAAA,GAEbO,EAAQ,sBAAsB,IAAM,CAC9Bb,EAAQ,MACCkB,EAAA,GAEXlB,EAAQ,MAAQ,GAChBa,EAAQ,sBAAsBK,CAAU,EAC1C,CACD,CAAA,6BAKDE,EAAA,YAYaC,aAAA,CAZA,KAAMC,EAAAA,MAAE1B,CAAA,EAAC,GAAE,MAAA,EAAU,OAAA,EAAA,qBAChC,IAUM,kBAVN2B,qBAUM,MAAA,CARH,uBAAOhB,EAAS,KAAA,EACjB,KAAK,cACJ,uBAAOE,EAAK,KAAA,EACZ,gBAAeJ,EAAO,MACvB,gBAAc,IACd,gBAAc,KAAA,GAEdkB,EAAAA,mBAAyD,MAAA,CAAnD,MAAKC,EAAE,eAAAF,EAAA,MAAE1B,CAAA,EAAC,GAAE,QAAA,CAAA,EAAa,uBAAOc,EAAW,KAAA,4BARzCV,EAAO,KAAA"}