vexip-ui/es/components/loading/loading.vue2.mjs.map

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

{"version":3,"file":"loading.vue2.mjs","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":";;;;;;;;AAWM,UAAAA,IAAKC,EAAc,SAAS,GAC5B,EAAE,OAAAC,EAAM,IAAIC,EAAO,GACnBC,IAAUC,EAAI,EAAK,GACnBC,IAAcD,EAAI,CAAC,GACnBE,IAAQF,EAAkB,SAAS,GACnCG,IAAWH,EAAqB,KAAK,GACrCI,IAAUJ,EAAI,CAAC;AAErB,QAAIK,IAAa;AAEX,UAAAC,IAAYC,EAAS,OAClB;AAAA,MACL,CAACZ,EAAG,EAAE,CAAC,GAAG;AAAA,MACV,CAACA,EAAG,GAAG,MAAM,CAAC,GAAG;AAAA,MACjB,CAACA,EAAG,GAAGO,EAAM,KAAK,CAAC,GAAGA,EAAM,UAAU;AAAA,IACxC,EACD,GAEKM,IAAQD,EAAS,OACd;AAAA,MACL,CAACJ,EAAS,KAAK,GAAG;AAAA,MAClB,QAAQ,GAAGF,EAAY,KAAK;AAAA,IAC9B,EACD,GAEKQ,IAAcF,EAAS,OACpB;AAAA,MACL,WAAW,eAAgBV,EAAM,QAAQ,KAAK,MAAMO,EAAQ,QAAQ,OAAQ,CAAC,aAC3EA,EAAQ,QAAQ,GAClB;AAAA,IACF,EACD;AAEG,QAAAM,GACAC,GACAC;AAEJ,IAAAC,EAAa,EAAE,SAAAd,GAAS,SAAAK,GAAS,cAAAU,EAAA,CAAc,GAE/CC,EAAgB,MAAM;AACpB,mBAAaL,CAAK,GAClB,cAAcC,CAAQ,GACtB,qBAAqBC,CAAK;AAAA,IAAA,CAC3B;AAED,aAASE,EAAaE,GAAyB;AACzC,MAAAZ,EAAQ,UAAU,QACpB,aAAaM,CAAK,GAElBX,EAAQ,QAAQ,IAChBK,EAAQ,QAAQ,GAChBF,EAAM,QAAQ,WACdD,EAAY,QAAQ,GACpBE,EAAS,QAAQ,QAGnB,cAAcQ,CAAQ;AAEtB,YAAMM,IAAa,MAAM;AACvB,QAAAb,EAAQ,QAAQc,EAAWF,EAAQ,SAAS,GAAG,GAAG,GAC5Cd,EAAA,QAAQc,EAAQ,SAASd,EAAM,OACrCD,EAAY,QAAQiB,EAAWF,EAAQ,eAAe,GAAG,GAAG,EAAE,GACrDb,EAAA,QAAQa,EAAQ,YAAYb,EAAS,OAC9CE,IAAaa,EAAWF,EAAQ,cAAc,IAAIZ,EAAQ,OAAO,EAAE,GAE/DA,EAAQ,UAAU,MACpBM,IAAQ,WAAW,MAAM;AACvB,UAAAX,EAAQ,QAAQ;AAAA,WACf,GAAG,IAENY,IAAW,YAAY,MAAM;AAC3B,UAAAP,EAAQ,SAAS,KAAK,MAAM,KAAK,OAAO,IAAI,IAAI,CAAC,GAE7CA,EAAQ,SAASC,MACnBD,EAAQ,QAAQC,GAChB,cAAcM,CAAQ;AAAA,WAEvB,GAAG;AAAA,MAEV;AAEa,MAAAN,IAAA,IAEbO,IAAQ,sBAAsB,MAAM;AAClC,QAAIb,EAAQ,QACCkB,EAAA,KAEXlB,EAAQ,QAAQ,IAChBa,IAAQ,sBAAsBK,CAAU;AAAA,MAC1C,CACD;AAAA,IAAA;2BAKDE,EAYaC,GAAA;AAAA,MAZA,MAAMC,EAAE1B,CAAA,EAAC,GAAE,MAAA;AAAA,MAAU,QAAA;AAAA,IAAA;iBAChC,MAUM;AAAA,UAVN2B,EAUM,OAAA;AAAA,UARH,SAAOhB,EAAS,KAAA;AAAA,UACjB,MAAK;AAAA,UACJ,SAAOE,EAAK,KAAA;AAAA,UACZ,iBAAeJ,EAAO;AAAA,UACvB,iBAAc;AAAA,UACd,iBAAc;AAAA,QAAA;UAEdkB,EAAyD,OAAA;AAAA,YAAnD,OAAKC,EAAEF,EAAE1B,CAAA,EAAC,GAAE,QAAA,CAAA;AAAA,YAAa,SAAOc,EAAW,KAAA;AAAA;;cARzCV,EAAO,KAAA;AAAA;;;;;;"}