@extclp/vexip-ui/es/components/progress/progress.vue2.mjs.map

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

{"version":3,"file":"progress.vue2.mjs","sources":["../../../components/progress/progress.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { Bubble } from '@/components/bubble'\r\nimport { Renderer } from '@/components/renderer'\r\n\r\nimport { computed } from 'vue'\r\n\r\nimport { createStateProp, useNameHelper, useProps } from '@vexip-ui/config'\r\nimport { callIfFunc, toFixed } from '@vexip-ui/utils'\r\nimport { progressProps } from './props'\r\nimport { infoTypes } from './symbol'\r\n\r\nimport type { CSSProperties } from 'vue'\r\n\r\ndefineOptions({ name: 'Progress' })\r\n\r\nconst _props = defineProps(progressProps)\r\nconst props = useProps('progress', _props, {\r\n  percentage: {\r\n    default: 0,\r\n    validator: value => value >= 0 && value <= 100,\r\n    static: true,\r\n  },\r\n  state: createStateProp(),\r\n  strokeWidth: 8,\r\n  infoType: {\r\n    default: 'outside',\r\n    validator: value => infoTypes.includes(value),\r\n  },\r\n  precision: 2,\r\n  activated: false,\r\n  strokeColor: {\r\n    default: null,\r\n    validator: value => !(Array.isArray(value) && (!value[0] || !value[1])),\r\n  },\r\n  slots: () => ({}),\r\n})\r\n\r\nconst nh = useNameHelper('progress')\r\n\r\nconst className = computed(() => {\r\n  return [\r\n    nh.b(),\r\n    nh.bs('vars'),\r\n    nh.bm(`info-${props.infoType}`),\r\n    {\r\n      [nh.bm('inherit')]: props.inherit,\r\n      [nh.bm(props.state)]: props.state !== 'default',\r\n      [nh.bm('activated')]: props.activated,\r\n    },\r\n  ]\r\n})\r\nconst style = computed(() => {\r\n  return { [nh.cv('percentage')]: props.percentage }\r\n})\r\nconst trackStyle = computed(() => {\r\n  return {\r\n    height: `${props.strokeWidth}px`,\r\n    borderRadius: `${props.strokeWidth}px`,\r\n  }\r\n})\r\nconst fillerStyle = computed(() => {\r\n  const style: CSSProperties = {\r\n    borderRadius: `${props.strokeWidth}px`,\r\n  }\r\n\r\n  const strokeColor = callIfFunc(props.strokeColor, props.percentage)\r\n\r\n  if (typeof strokeColor === 'string') {\r\n    style.backgroundColor = strokeColor\r\n  } else if (Array.isArray(strokeColor)) {\r\n    style.backgroundImage = `linear-gradient(to right, ${strokeColor[0]} 0%, ${strokeColor[1]} 100%)`\r\n  }\r\n\r\n  return style\r\n})\r\nconst useBubble = computed(() => {\r\n  return props.infoType.includes('bubble')\r\n})\r\nconst bubbleType = computed(() => {\r\n  if (useBubble.value) {\r\n    return props.infoType.split('-').pop() === 'bottom' ? 'bottom' : 'top'\r\n  }\r\n\r\n  return 'top'\r\n})\r\nconst bubbleStyle = computed(() => {\r\n  if (!useBubble.value) return {}\r\n\r\n  const type = bubbleType.value === 'top' ? 'bottom' : 'top'\r\n\r\n  return {\r\n    [type]: `${props.strokeWidth}px`,\r\n  }\r\n})\r\nconst percentValue = computed(() => toFixed(props.percentage, props.precision))\r\n\r\ndefineExpose({ percentValue })\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    :class=\"className\"\r\n    :style=\"style\"\r\n    role=\"progressbar\"\r\n    :aria-valuenow=\"percentValue\"\r\n    :aria-valuetext=\"`${percentValue}%`\"\r\n    aria-valuemin=\"0\"\r\n    aria-valuemax=\"100\"\r\n  >\r\n    <div :class=\"nh.be('track')\" :style=\"trackStyle\">\r\n      <div :class=\"nh.be('filler')\" :style=\"fillerStyle\"></div>\r\n      <div v-if=\"props.infoType === 'inside'\" :class=\"nh.be('info')\">\r\n        <slot>\r\n          <Renderer :renderer=\"props.slots.default\">\r\n            <span :class=\"nh.be('percentage')\">\r\n              {{ `${percentValue}%` }}\r\n            </span>\r\n          </Renderer>\r\n        </slot>\r\n      </div>\r\n    </div>\r\n    <div v-if=\"useBubble\" :class=\"nh.be('reference')\">\r\n      <Bubble\r\n        inherit\r\n        :class=\"nh.be('bubble')\"\r\n        :style=\"bubbleStyle\"\r\n        :placement=\"bubbleType\"\r\n        :content-class=\"nh.be('info')\"\r\n      >\r\n        <slot>\r\n          <Renderer :renderer=\"props.slots.default\">\r\n            <span :class=\"nh.be('percentage')\">\r\n              {{ `${percentValue}%` }}\r\n            </span>\r\n          </Renderer>\r\n        </slot>\r\n      </Bubble>\r\n    </div>\r\n    <div v-else-if=\"props.infoType === 'outside'\" :class=\"nh.be('info')\">\r\n      <slot>\r\n        <Renderer :renderer=\"props.slots.default\">\r\n          <span :class=\"nh.be('percentage')\">\r\n            {{ `${percentValue}%` }}\r\n          </span>\r\n        </Renderer>\r\n      </slot>\r\n    </div>\r\n  </div>\r\n</template>\r\n"],"names":["props","useProps","__props","value","createStateProp","infoTypes","nh","useNameHelper","className","computed","style","trackStyle","fillerStyle","strokeColor","callIfFunc","useBubble","bubbleType","bubbleStyle","percentValue","toFixed","__expose","_createElementBlock","_createElementVNode","_normalizeClass","_unref","_renderSlot","_ctx","_createVNode","Renderer","Bubble"],"mappings":"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"}