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