classcard-ui 0.2.1476 → 0.2.1477

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.1476",
+  "version": "0.2.1477",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CLinearProgressBar/CLinearProgressBar.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex items-center gap-3">
+    <div
+      :class="'h-1 w-full overflow-hidden rounded-full bg-gray-200 ' + customClasses"
+      role="progressbar"
+      :aria-valuemin="0"
+      :aria-valuemax="max"
+      :aria-valuenow="percentage"
+      :aria-label="ariaLabel"
+    >
+      <div
+        class="h-full origin-left rounded-full transition-transform duration-300"
+        :class="fillColorClass"
+        :style="{ transform: 'scaleX(' + (percentage / max) + ')' }"
+      />
+    </div>
+
+    <span class="text-sm text-gray-500">
+      {{ percentage + "%" }}
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CLinearProgressBar",
+  props: {
+    max: { type: Number, default: 100 },
+    ariaLabel: { type: String, default: "Progress" },
+    fillColorClass: { type: String, default: "bg-gray-900" },
+    customClasses: { type: String, default: "" },
+    percentage: { type: Number, default: 0 },
+  },
+};
+</script>

package/src/components/CLinearProgressBar/index.js

@@ -0,0 +1,3 @@
+import CLinearProgressBar from './CLinearProgressBar.vue'
+
+export default CLinearProgressBar

package/src/components/index.js

@@ -1,5 +1,6 @@
 export { default as CAlerts } from "./CAlerts";
 export { default as CAnchorTabs } from "./CAnchorTabs";
+export { default as CLinearProgressBar } from "./CLinearProgressBar";
 export { default as CAnchorTag } from "./CAnchorTag";
 export { default as CAvatar } from "./CAvatar";
 export { default as CAvatarGroup } from "./CAvatarGroup";

package/src/stories/CLinearProgressBar.stories.js

@@ -0,0 +1,22 @@
+import CLinearProgressBar from "../components/CLinearProgressBar/CLinearProgressBar.vue";
+import "./utils.css";
+
+export default {
+  title: "CLinearProgressBar",
+  component: CLinearProgressBar,
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { CLinearProgressBar },
+  template: '<c-linear-progress-bar v-bind="$props" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  max: 100,
+  ariaLabel: "Progress",
+  fillColorClass: "bg-gray-900",
+  customClasses: "",
+  percentage: 50,
+};