@extclp/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\">\r\nimport { computed, onBeforeUnmount, ref } from 'vue'\r\n\r\nimport { useNameHelper } from '@vexip-ui/config'\r\nimport { useRtl } from '@vexip-ui/hooks'\r\nimport { boundRange } from '@vexip-ui/utils'\r\n\r\nimport type { LoadingOptions, LoadingPosition, LoadingState } from './symbol'\r\n\r\ndefineOptions({ name: 'Loading' })\r\n\r\nconst nh = useNameHelper('loading')\r\nconst { isRtl } = useRtl()\r\nconst visible = ref(false)\r\nconst strokeWidth = ref(2)\r\nconst state = ref<LoadingState>('default')\r\nconst position = ref<LoadingPosition>('top')\r\nconst percent = ref(0)\r\n\r\nlet maxPercent = 95\r\n\r\nconst className = computed(() => {\r\n  return {\r\n    [nh.b()]: true,\r\n    [nh.bs('vars')]: true,\r\n    [nh.bm(state.value)]: state.value !== 'default',\r\n  }\r\n})\r\n\r\nconst style = computed(() => {\r\n  return {\r\n    [position.value]: '0',\r\n    height: `${strokeWidth.value}px`,\r\n  }\r\n})\r\n\r\nconst fillerStyle = computed(() => {\r\n  return {\r\n    transform: `translateX(${((isRtl.value ? -1 : 1) * (percent.value - 100)) / 2}%) scaleX(${\r\n      percent.value / 100\r\n    })`,\r\n  }\r\n})\r\n\r\nlet timer: ReturnType<typeof setTimeout>\r\nlet interval: ReturnType<typeof setInterval>\r\nlet rafId: ReturnType<typeof requestAnimationFrame>\r\n\r\ndefineExpose({ visible, percent, startLoading })\r\n\r\nonBeforeUnmount(() => {\r\n  clearTimeout(timer)\r\n  clearInterval(interval)\r\n  cancelAnimationFrame(rafId)\r\n})\r\n\r\nfunction startLoading(options: LoadingOptions) {\r\n  if (percent.value === 100) {\r\n    clearTimeout(timer)\r\n\r\n    visible.value = false\r\n    percent.value = 0\r\n    state.value = 'default'\r\n    strokeWidth.value = 2\r\n    position.value = 'top'\r\n  }\r\n\r\n  clearInterval(interval)\r\n\r\n  const setLoading = () => {\r\n    percent.value = boundRange(options.percent, 0, 100)\r\n    state.value = options.state ?? state.value\r\n    strokeWidth.value = boundRange(options.strokeWidth ?? 2, 1, 10)\r\n    position.value = options.position ?? position.value\r\n    maxPercent = boundRange(options.maxPercent ?? 95, percent.value, 95)\r\n\r\n    if (percent.value === 100) {\r\n      timer = setTimeout(() => {\r\n        visible.value = false\r\n      }, 500)\r\n    } else {\r\n      interval = setInterval(() => {\r\n        percent.value += Math.floor(Math.random() * 3 + 1)\r\n\r\n        if (percent.value >= maxPercent) {\r\n          percent.value = maxPercent\r\n          clearInterval(interval)\r\n        }\r\n      }, 500)\r\n    }\r\n  }\r\n\r\n  maxPercent = 95\r\n\r\n  rafId = requestAnimationFrame(() => {\r\n    if (visible.value) {\r\n      setLoading()\r\n    } else {\r\n      visible.value = true\r\n      rafId = requestAnimationFrame(setLoading)\r\n    }\r\n  })\r\n}\r\n</script>\r\n\r\n<template>\r\n  <Transition :name=\"nh.ns('fade')\" appear>\r\n    <div\r\n      v-show=\"visible\"\r\n      :class=\"className\"\r\n      role=\"progressbar\"\r\n      :style=\"style\"\r\n      :aria-valuenow=\"percent\"\r\n      aria-valuemin=\"0\"\r\n      aria-valuemax=\"100\"\r\n    >\r\n      <div :class=\"nh.be('filler')\" :style=\"fillerStyle\"></div>\r\n    </div>\r\n  </Transition>\r\n</template>\r\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;;;;;;"}