feat: Progress bar component (refs #DH-1010) (#36)

src/components/BuiInput/BuiInput.vue

@@ -37,7 +37,7 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
 import { twMerge } from 'tailwind-merge'
-import RequiredIcon from '@/components/CommonElements/RequiredIcon.vue'
+import RequiredIcon from '../CommonElements/RequiredIcon.vue'
 
 type ValidationStatus = 'success' | 'error'
 interface InputProps {

src/components/BuiProgress/BuiProgress.story.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import BuiProgress from './BuiProgress.vue'
+import BuiButton from '../BuiButton/BuiButton.vue'
+import { ref } from 'vue'
+
+const model = ref(1)
+</script>
+
+<template>
+  <Story title="BuiProgress" autoPropsDisabled :layout="{ type: 'grid', width: '400px' }">
+    <Variant title="Default">
+      <div class="p-2">
+        <BuiProgress :value="60" label="Task progress" />
+      </div>
+    </Variant>
+    <Variant title="Full">
+      <div class="p-2">
+        <BuiProgress :value="100" label="Task progress" />
+      </div>
+    </Variant>
+    <Variant title="Zero">
+      <div class="p-2">
+        <BuiProgress :value="0" label="Task progress" />
+      </div>
+    </Variant>
+    <Variant title="Custom">
+      <div class="p-2">
+        <BuiProgress :min-value="1" :value="3" :max-value="5" suffix="" label="1-5 scale" />
+      </div>
+    </Variant>
+    <Variant title="No value">
+      <div class="p-2">
+        <BuiProgress :is-value-shown="false" :value="40" label="Task progress" />
+      </div>
+    </Variant>
+    <Variant title="Dynamic">
+      <div class="p-2">
+        <BuiProgress :value="model" label="Task progress" />
+        <div class="flex gap-8 mt-8">
+          <BuiButton @click="model -= 10">-10</BuiButton>
+          <BuiButton @click="model += 10">+10</BuiButton>
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

src/components/BuiProgress/BuiProgress.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface ProgressBarProps {
+  label?: string
+  maxValue?: number
+  minValue?: number
+  suffix?: string
+  value: number
+  isValueShown?: boolean
+}
+
+const props = withDefaults(defineProps<ProgressBarProps>(), {
+  label: 'Progress:',
+  maxValue: 100,
+  minValue: 0,
+  suffix: '%',
+  isValueShown: true
+})
+
+const scalePercent = computed(() => {
+  if (
+    typeof props.minValue !== 'number' ||
+    typeof props.maxValue !== 'number' ||
+    props.minValue < 0 ||
+    props.minValue > props.maxValue ||
+    props.maxValue < 0
+  ) {
+    return 0
+  }
+  if (props.value <= props.minValue) {
+    return 0
+  }
+  if (props.value >= props.maxValue) {
+    return 100
+  }
+  return Math.round(((props.value - props.minValue) * 100) / (props.maxValue - props.minValue))
+})
+
+const scaleWidthClass = computed(() => {
+  return { width: scalePercent.value + '%', 'min-width': scalePercent.value + '%' }
+})
+</script>
+
+<template>
+  <div>
+    <div class="flex text-base font-semibold leading-6 justify-center items-center mb-3">
+      {{ label }}
+    </div>
+    <div
+      v-if="isValueShown"
+      class="flex justify-center items-center py-1 font-semibold leading-6 text-[14px]"
+    >
+      {{ `${value}${suffix}` }}
+    </div>
+    <div class="flex items-center max-w-full w-full h-[21px] min-h-[21px] relative">
+      <div class="flex flex-row z-1 absolute left-0 top-0 w-full min-w-full h-[21px] max-h-[21px]">
+        <div
+          class="h-[21px] max-h-[21px] w-[6px] min-w-[6px] rounded-left-cap bg-primary-500/[.2]"
+        ></div>
+        <div class="w-full h-[21px] flex-1 relative bg-primary-500/[.2]"></div>
+        <div class="h-[21px] w-[6px] max-w-[6px] rounded-right-cap bg-primary-500/[.2]"></div>
+      </div>
+
+      <div class="flex flex-row z-2" :style="scaleWidthClass">
+        <div
+          v-show="scalePercent > 0"
+          class="h-[21px] w-[6px] max-w-[6px] rounded-left-cap bg-primary-500/[.6]"
+        ></div>
+        <div
+          v-show="scalePercent > 0"
+          class="h-[21px] flex-1 -mr-[3px] relative bg-primary-500/[.6]"
+        ></div>
+        <div class="h-[21px] w-[6px] max-w-[6px] ellips bg-primary-500"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.ellips {
+  border-radius: 100%;
+}
+.rounded-left-cap {
+  border-radius: 100% 0 0 100%;
+}
+
+.rounded-right-cap {
+  border-radius: 0 100% 100% 0;
+}
+</style>

src/index.ts

@@ -18,3 +18,4 @@ export { default as BuiTableFooter } from './components/BuiTable/BuiTableFooter.
 export { default as BuiTableHead } from './components/BuiTable/BuiTableHead.vue'
 export { default as BuiTableHeadCell } from './components/BuiTable/BuiTableHeadCell.vue'
 export { default as BuiTableRow } from './components/BuiTable/BuiTableRow.vue'
+export { default as BuiProgressBar } from './components/BuiProgress/BuiProgress.vue'