Merge pull request #54 from devforth/afcl

add progress bar to afcl

Author: ivictbor

adminforth/documentation/docs/tutorial/03-Customization/14-afcl.md

@@ -531,6 +531,47 @@ If there is less then `pageSize` rows, pagination will not be shown.
 </div>
 
 
+## ProgressBar
+
+<div class="split-screen" >
+  <div>
+  ```html
+   <ProgressBar
+    :currentValue="2600"
+    :minValue="0"
+    :maxValue="5000"
+    />
+  ```
+  </div>
+  <div>
+  ![ProgressBar](image-81.png)
+  </div>
+</div>
+
+### Custom labels
+
+Custom labels in the ProgressBar component allow you to customize the text displayed on the left and right sides of the progress bar. You can also customize the format of the value and the progress text.
+
+<div class="split-screen" >
+  <div>
+  ```html
+  <ProgressBar
+    :currentValue="1070"
+    :minValue="0"
+    :maxValue="5000"
+    :leftLabel="'Level 2'"
+    :rightLabel="'Level 3'"
+    :formatter="(value: number) => `${value} points`"
+    :progressFormatter="(value: number, percentage: number) => `${value} done`"
+  />
+  ```
+  </div>
+  <div>
+  ![ProgressBar](image-80.png)
+  </div>
+</div>
+
+
 ## Bar Chart
 
 Under the hood AdminForth uses MIT-licensed [ApexCharts](https://apexcharts.com/). It has very rich variety of options, you can pass

adminforth/documentation/docs/tutorial/03-Customization/image-55.png

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/foreign-inline-list",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "description": "AdminForth plugin for adding list of children items to the parent item show page",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

adminforth/documentation/docs/tutorial/03-Customization/image-56.png

@@ -0,0 +1,57 @@
+<template>
+  <div class="relative mt-4 lg:mt-10 w-full max-w-[700px] bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
+    <span class="absolute -top-6 left-0 text-sm text-gray-500">{{ leftLabel }}</span>
+    <span class="absolute -top-6 right-0 text-sm text-gray-500">{{ rightLabel }}</span>
+    <div 
+      class="bg-lightPrimary dark:bg-darkPrimary h-2.5 rounded-full" 
+      :style="{ width: `${percentage}%` }"
+    ></div>
+    <template v-if="showValues">
+      <span class="absolute top-4 left-0 text-sm text-gray-500">{{ formatValue(minValue) }}</span>
+      <span v-if="showProgress" class="absolute top-4 right-1/2 translate-x-1/2 text-sm text-gray-500">{{ progressText }}</span>
+      <span class="absolute top-4 right-0 text-sm text-gray-500">{{ formatValue(maxValue) }}</span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  currentValue: number
+  minValue?: number
+  maxValue?: number
+  leftLabel?: string
+  rightLabel?: string
+  formatter?: (value: number) => string
+  progressFormatter?: (value: number, percentage: number) => string
+  showLabels?: boolean
+  showValues: boolean
+  showProgress: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  minValue: 0,
+  maxValue: 100,
+  formatter: (value: number) => `${value}`,
+  progressFormatter: (value: number, percentage: number) => `${value}`,
+  showValues: true,
+  showProgress: true
+})
+
+const percentage = computed((): number => {
+  const min = props.minValue
+  const max = props.maxValue
+  return Math.round(((props.currentValue - min) / (max - min)) * 100)
+})
+
+const progressText = computed((): string => {
+  const formatter = props.progressFormatter
+  return formatter(props.currentValue, percentage.value)
+})
+
+const formatValue = (value: number): string => {
+  const formatter = props.formatter
+  return formatter(value)
+}
+</script>

adminforth/documentation/docs/tutorial/03-Customization/image-80.png

@@ -13,6 +13,6 @@ export { default as AreaChart } from './AreaChart.vue';
 export { default as BarChart } from './BarChart.vue';
 export { default as PieChart } from './PieChart.vue';
 export { default as Table } from './Table.vue';
-
+export { default as ProgressBar } from './ProgressBar.vue';