Add progress component

Author: romanslonov

docs/.vuepress/config.js

@@ -26,6 +26,7 @@ module.exports = {
           'components/button',
           'components/checkbox',
           'components/checkbox-group',
+          'components/progress',
           'components/radio',
           'components/radio-group',
           'components/spinner',

docs/components/progress.md

@@ -0,0 +1,52 @@
+# Progress
+Simple progress component showing progress.
+
+
+## Example
+
+<div class="p-3 border rounded-2 my-3 flex flex-column">
+  <!-- Indeterminated -->
+  <v-progress class="mb-5"></v-progress>
+  
+  <!-- Determinated -->
+  <v-progress class="mb-3" :progress="progress" type="determinate"></v-progress>
+  
+  <div>
+    <v-button size="2" :disabled="progress === 0" @click.native="decrease">-</v-button>
+    <v-button size="2" :disabled="progress === 100" @click.native="increase">+</v-button>
+  </div>
+</div>
+
+```html
+<!-- Indeterminate -->
+<v-progress />
+  
+<!-- Determinate -->
+<v-progress :progress="progress" type="determinate"></v-progress>
+```
+
+## Props
+Name       | Type     | Description | Default
+---------- | -------- | ----------- | ---------
+type       | String   | Type of progress bar [ 'determinate', 'indeterminate'] | 'determinate'
+appearance | String   | Appearance of progress bar  | 'primary'
+
+<script>
+export default {
+  data() {
+    return { progress: 10 };
+  },
+  methods: {
+    increase() {
+      if (this.progress < 100) {
+        this.progress = this.progress + 5;
+      }
+    },
+    decrease() {
+      if (this.progress > 0) {
+        this.progress = this.progress - 5;
+      }
+    },
+  },
+};
+</script>

package-lock.json

@@ -18,7 +18,7 @@
     "test:unit": "vue-cli-service test:unit"
   },
   "devDependencies": {
-    "@modulist/css": "0.0.7",
+    "@modulist/css": "0.0.9",
     "@vue/cli-plugin-babel": "^3.5.0",
     "@vue/cli-plugin-eslint": "^3.5.0",
     "@vue/cli-plugin-unit-jest": "^3.5.0",

package.json

@@ -0,0 +1,8 @@
+import Progress from './main.vue';
+
+// eslint-disable-next-line func-names
+Progress.install = function (Vue) {
+  Vue.component('VProgress', Progress);
+};
+
+export default Progress;

src/components/Progress/index.js

@@ -0,0 +1,60 @@
+<template>
+  <div class="progress" :class="classes">
+    <div
+      class="progress__bar"
+      role="progressbar"
+
+      :aria-valuemax="100"
+      :aria-valuemin="0"
+      :aria-valuenow="moderatedProgress"
+      :style="{ 'width': `${moderatedProgress}%` }"
+
+      v-if="type === 'determinate'"
+    ></div>
+
+    <div
+      class="progress__bar"
+      role="progressbar"
+
+      :aria-valuemax="100"
+      :aria-valuemin="0"
+
+      v-else
+    ></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'VProgress',
+  props: {
+    type: {
+      type: String,
+      default: 'indeterminate',
+      validator(type) {
+        return ['indeterminate', 'determinate'].indexOf(type) > -1;
+      },
+    },
+    progress: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    classes() {
+      return [
+        `progress--${this.type}`,
+      ];
+    },
+    moderatedProgress() {
+      if (this.progress < 0) {
+        return 0;
+      }
+      if (this.progress > 100) {
+        return 100;
+      }
+      return this.progress;
+    },
+  },
+};
+</script>

src/components/Progress/main.vue

@@ -4,6 +4,7 @@ export { default as VBadge } from './Badge';
 export { default as VButton } from './Button';
 export { default as VCheckbox } from './Checkbox';
 export { default as VCheckboxGroup } from './CheckboxGroup';
+export { default as VProgress } from './Progress';
 export { default as VRadio } from './Radio';
 export { default as VRadioGroup } from './RadioGroup';
 export { default as VSpinner } from './Spinner';