@shoprenter/sr-styleguide 1.2.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoprenter/sr-styleguide",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "description": "",
   "main": "./src/index.js",
   "files": [

package/src/components/breadcrumbs/SrBreadcrumbs/SrBreadcrumbs.vue

@@ -22,7 +22,6 @@ export default {
     computed: {
         breadcrumbs () {
             try {
-                console.log(this.$route.meta.breadcrumbs)
                 const lastIndex = this.$route.meta.breadcrumbs.length - 1
                 return this.$route.meta.breadcrumbs.map((breadcrumb, index) => ({
                     ...breadcrumb,

package/src/components/icons/flags/SrBulgariaFlag.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path fill="#00966e" d="M1 11H31V21H1z"></path>
+    <path d="M5,4H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z" fill="#fff"></path>
+    <path d="M5,20H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z" transform="rotate(180 16 24)"
+          fill="#d62612"></path>
+    <path
+        d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z"
+        opacity=".15"></path>
+    <path d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
+          fill="#fff" opacity=".2"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'SrBulgariaFlag'
+}
+</script>

package/src/components/icons/flags/SrCzechFlag.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <!-- White top half -->
+    <rect x="1" y="4" width="30" height="12" fill="#ffffff"/>
+
+    <!-- Red bottom half -->
+    <rect x="1" y="16" width="30" height="12" fill="#d7141a"/>
+
+    <!-- Blue triangle -->
+    <path d="M1 4 L17 16 L1 28 Z" fill="#11457e"/>
+
+    <!-- Rounded border -->
+    <path
+        d="M5,4H27c2.209,0,4,1.791,4,4V24c0,2.209-1.791,4-4,4H5c-2.209,0-4-1.791-4-4V8c0-2.209,1.791-4,4-4Z"
+        fill="none"
+        stroke="#000"
+        stroke-opacity="0.15"/>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'SrCzechFlag'
+}
+</script>

package/src/components/icons/flags/SrFranceFlag.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path fill="#fff" d="M10 4H22V28H10z"></path>
+    <path d="M5,4h6V28H5c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z" fill="#092050"></path>
+    <path d="M25,4h6V28h-6c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z" transform="rotate(180 26 16)"
+          fill="#be2a2c"></path>
+    <path
+        d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z"
+        opacity=".15"></path>
+    <path d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
+          fill="#fff" opacity=".2"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'SrFranceFlag'
+}
+</script>

package/src/components/icons/flags/SrItalyFlag.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path fill="#fff" d="M10 4H22V28H10z"></path>
+    <path d="M5,4h6V28H5c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z" fill="#41914d"></path>
+    <path d="M25,4h6V28h-6c-2.208,0-4-1.792-4-4V8c0-2.208,1.792-4,4-4Z" transform="rotate(180 26 16)"
+          fill="#bf393b"></path>
+    <path
+        d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z"
+        opacity=".15"></path>
+    <path d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
+          fill="#fff" opacity=".2"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'SrItalyFlag'
+}
+</script>

package/src/components/icons/flags/SrPolandFlag.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path d="M5,4H27c2.208,0,4,1.792,4,4v8H1v-8c0-2.208,1.792-4,4-4Z" fill="#fff"></path>
+    <path d="M1,16H31v8c0,2.208-1.792,4-4,4H5c-2.208,0-4-1.792-4-4v-8Z" fill="#dc143c"></path>
+    <path
+        d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z"
+        opacity=".15"></path>
+    <path d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
+          fill="#fff" opacity=".2"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'SrPolandFlag'
+}
+</script>

package/src/components/icons/flags/SrSlovakiaFlag.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path fill="#204c9e" d="M1 11H31V21H1z"></path>
+    <path d="M5,4H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z" fill="#fff"></path>
+    <path d="M5,20H27c2.208,0,4,1.792,4,4v4H1v-4c0-2.208,1.792-4,4-4Z" transform="rotate(180 16 24)"
+          fill="#db362f"></path>
+    <path
+        d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z"
+        opacity=".15"></path>
+    <path d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
+          fill="#fff" opacity=".2"></path>
+    <path
+        d="M15.65,10.232s.178,1.784,.178,5.353c-.025,3.645-2.751,5.49-4.752,6.46-2.001-.97-4.726-2.815-4.752-6.46,0-3.569,.178-5.353,.178-5.353H15.65Z"
+        fill="#db362f"></path>
+    <path
+        d="M10.673,19.945v-4.462c-1.511,0-1.94,.134-2.392,.27,.042-.456,.042-.915,0-1.371,.452,.137,.881,.27,2.392,.27v-1.24c-.477,0-1.135,.019-1.892,.277,.043-.457,.043-.917,0-1.374,.757,.254,1.415,.274,1.892,.274,0-.359-.111-1.132-.251-1.772,.436,.039,.874,.039,1.31,0-.14,.639-.251,1.412-.251,1.772,.477,0,1.135-.019,1.892-.274-.043,.457-.043,.917,0,1.374-.757-.258-1.415-.277-1.892-.277v1.24c1.511,0,1.94-.134,2.392-.27-.042,.456-.042,.915,0,1.371-.452-.137-.881-.27-2.392-.27v4.462h-.808Z"
+        fill="#fff"></path>
+    <path
+        d="M15.65,10.232s.178,1.784,.178,5.353c-.025,3.645-2.751,5.49-4.752,6.46-2.001-.97-4.726-2.815-4.752-6.46,0-3.569,.178-5.353,.178-5.353H15.65Z"
+        fill="none"></path>
+    <path
+        d="M11.076,22.044c1.241-.602,2.761-1.542,3.742-3.038-.007-.014-.011-.031-.017-.045-.56-1.184-1.576-1.367-2.268-.409-.089-.209-.191-.399-.304-.565-.805-1.181-1.973-.929-2.609,.565-.287-.397-.645-.614-1.014-.614-.518,0-.973,.424-1.268,1.072,.982,1.494,2.499,2.432,3.739,3.034Z"
+        fill="#204c9e"></path>
+    <path
+        d="M11.076,22.235l-.075-.036c-1.348-.654-2.385-1.395-3.169-2.266-1.103-1.225-1.668-2.687-1.679-4.347,0-3.537,.177-5.353,.179-5.371l.015-.155H15.806l.015,.155c.002,.018,.179,1.834,.179,5.37-.012,1.661-.577,3.123-1.679,4.348-.785,.871-1.821,1.613-3.169,2.266l-.075,.036ZM6.66,10.404c-.041,.505-.164,2.246-.164,5.181,.011,1.572,.546,2.958,1.591,4.118,.74,.822,1.718,1.526,2.989,2.151,1.271-.625,2.249-1.329,2.989-2.151,1.045-1.16,1.58-2.546,1.591-4.119,0-2.934-.122-4.675-.164-5.18H6.66Z"
+        fill="#fff"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'SrSlovakiaFlag'
+}
+</script>

package/src/components/icons/flags/SrSpainFlag.vue

@@ -0,0 +1,31 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path fill="#f1c142" d="M1 10H31V22H1z"></path>
+    <path d="M5,4H27c2.208,0,4,1.792,4,4v3H1v-3c0-2.208,1.792-4,4-4Z" fill="#a0251e"></path>
+    <path d="M5,21H27c2.208,0,4,1.792,4,4v3H1v-3c0-2.208,1.792-4,4-4Z" transform="rotate(180 16 24.5)"
+          fill="#a0251e"></path>
+    <path
+        d="M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z"
+        opacity=".15"></path>
+    <path d="M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z"
+          fill="#fff" opacity=".2"></path>
+    <path
+        d="M12.614,13.091c.066-.031,.055-.14-.016-.157,.057-.047,.02-.15-.055-.148,.04-.057-.012-.144-.082-.13,.021-.062-.042-.127-.104-.105,.01-.068-.071-.119-.127-.081,.004-.068-.081-.112-.134-.069-.01-.071-.11-.095-.15-.035-.014-.068-.111-.087-.149-.028-.027-.055-.114-.057-.144-.004-.03-.047-.107-.045-.136,.002-.018-.028-.057-.044-.09-.034,.009-.065-.066-.115-.122-.082,.002-.07-.087-.111-.138-.064-.013-.064-.103-.087-.144-.036-.02-.063-.114-.075-.148-.017-.036-.056-.129-.042-.147,.022-.041-.055-.135-.031-.146,.036-.011-.008-.023-.014-.037-.016,.006-.008,.01-.016,.015-.025h.002c.058-.107,.004-.256-.106-.298v-.098h.099v-.154h-.099v-.101h-.151v.101h-.099v.154h.099v.096c-.113,.04-.169,.191-.11,.299h.002c.004,.008,.009,.017,.014,.024-.015,.002-.029,.008-.04,.017-.011-.067-.106-.091-.146-.036-.018-.064-.111-.078-.147-.022-.034-.057-.128-.046-.148,.017-.041-.052-.131-.028-.144,.036-.051-.047-.139-.006-.138,.064-.056-.033-.131,.017-.122,.082-.034-.01-.072,.006-.091,.034-.029-.047-.106-.049-.136-.002-.03-.054-.117-.051-.143,.004-.037-.059-.135-.04-.149,.028-.039-.06-.14-.037-.15,.035-.053-.043-.138,0-.134,.069-.056-.038-.137,.013-.127,.081-.062-.021-.125,.044-.104,.105-.05-.009-.096,.033-.096,.084h0c0,.017,.005,.033,.014,.047-.075-.002-.111,.101-.055,.148-.071,.017-.082,.125-.016,.157-.061,.035-.047,.138,.022,.154-.013,.015-.021,.034-.021,.055h0c0,.042,.03,.077,.069,.084-.023,.048,.009,.11,.06,.118-.013,.03-.012,.073-.012,.106,.09-.019,.2,.006,.239,.11-.015,.068,.065,.156,.138,.146,.06,.085,.133,.165,.251,.197-.021,.093,.064,.093,.123,.118-.013,.016-.043,.063-.055,.081,.024,.013,.087,.041,.113,.051,.005,.019,.004,.028,.004,.031,.091,.501,2.534,.502,2.616-.001v-.002s.004,.003,.004,.004c0-.003-.001-.011,.004-.031l.118-.042-.062-.09c.056-.028,.145-.025,.123-.119,.119-.032,.193-.112,.253-.198,.073,.01,.153-.078,.138-.146,.039-.104,.15-.129,.239-.11,0-.035,.002-.078-.013-.109,.044-.014,.07-.071,.049-.115,.062-.009,.091-.093,.048-.139,.069-.016,.083-.12,.022-.154Zm-.296-.114c0,.049-.012,.098-.034,.141-.198-.137-.477-.238-.694-.214-.002-.009-.006-.017-.011-.024,0,0,0-.001,0-.002,.064-.021,.074-.12,.015-.153,0,0,0,0,0,0,.048-.032,.045-.113-.005-.141,.328-.039,.728,.09,.728,.393Zm-.956-.275c0,.063-.02,.124-.054,.175-.274-.059-.412-.169-.717-.185-.007-.082-.005-.171-.011-.254,.246-.19,.81-.062,.783,.264Zm-1.191-.164c-.002,.05-.003,.102-.007,.151-.302,.013-.449,.122-.719,.185-.26-.406,.415-.676,.73-.436-.002,.033-.005,.067-.004,.101Zm-1.046,.117c0,.028,.014,.053,.034,.069,0,0,0,0,0,0-.058,.033-.049,.132,.015,.152,0,0,0,.001,0,.002-.005,.007-.008,.015-.011,.024-.219-.024-.495,.067-.698,.206-.155-.377,.323-.576,.698-.525-.023,.015-.039,.041-.039,.072Zm3.065-.115s0,0,0,0c0,0,0,0,0,0,0,0,0,0,0,0Zm-3.113,1.798v.002s-.002,0-.003,.002c0-.001,.002-.003,.003-.003Z"
+        fill="#9b8028"></path>
+    <path
+        d="M14.133,16.856c.275-.65,.201-.508-.319-.787v-.873c.149-.099-.094-.121,.05-.235h.072v-.339h-.99v.339h.075c.136,.102-.091,.146,.05,.235v.76c-.524-.007-.771,.066-.679,.576h.039s0,0,0,0l.016,.036c.14-.063,.372-.107,.624-.119v.224c-.384,.029-.42,.608,0,.8v1.291c-.053,.017-.069,.089-.024,.123,.007,.065-.058,.092-.113,.083,0,.026,0,.237,0,.269-.044,.024-.113,.03-.17,.028v.108s0,0,0,0v.107s0,0,0,0v.107s0,0,0,0v.108s0,0,0,0v.186c.459-.068,.895-.068,1.353,0v-.616c-.057,.002-.124-.004-.17-.028,0-.033,0-.241,0-.268-.054,.008-.118-.017-.113-.081,.048-.033,.034-.108-.021-.126v-.932c.038,.017,.073,.035,.105,.053-.105,.119-.092,.326,.031,.429l.057-.053c.222-.329,.396-.743-.193-.896v-.35c.177-.019,.289-.074,.319-.158Z"
+        fill="#9b8028"></path>
+    <path
+        d="M8.36,16.058c-.153-.062-.39-.098-.653-.102v-.76c.094-.041,.034-.115-.013-.159,.02-.038,.092-.057,.056-.115h.043v-.261h-.912v.261h.039c-.037,.059,.039,.078,.057,.115-.047,.042-.108,.118-.014,.159v.873c-.644,.133-.611,.748,0,.945v.35c-.59,.154-.415,.567-.193,.896l.057,.053c.123-.103,.136-.31,.031-.429,.032-.018,.067-.036,.105-.053v.932c-.055,.018-.069,.093-.021,.126,.005,.064-.059,.089-.113,.081,0,.026,0,.236,0,.268-.045,.024-.113,.031-.17,.028v.401h0v.215c.459-.068,.895-.068,1.352,0v-.186s0,0,0,0v-.108s0,0,0,0v-.107s0,0,0,0v-.107s0,0,0,0v-.108c-.056,.002-.124-.004-.169-.028,0-.033,0-.241,0-.269-.055,.008-.119-.018-.113-.083,.045-.034,.03-.107-.024-.124v-1.29c.421-.192,.383-.772,0-.8v-.224c.575,.035,.796,.314,.653-.392Z"
+        fill="#9b8028"></path>
+    <path
+        d="M12.531,14.533h-4.28l.003,2.572v1.485c0,.432,.226,.822,.591,1.019,.473,.252,1.024,.391,1.552,.391s1.064-.135,1.544-.391c.364-.197,.591-.587,.591-1.019v-4.057Z"
+        fill="#a0251e"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+    name: 'SrSpainFlag'
+}
+</script>

package/src/components/progress-indicators/SrFinitePreloader/SrFinitePreloader.vue

@@ -0,0 +1,26 @@
+<template>
+  <v-progress-circular
+      color="primary"
+      class="text-center"
+      :size="size"
+      v-bind="$attrs"
+      :value="percentage"
+      v-on="$listeners">
+      {{ percentage }}%
+  </v-progress-circular>
+</template>
+
+<script>
+export default {
+    name: 'SrFinitePreloader',
+    inheritAttrs: false,
+    props: {
+        size: {
+            default: 200
+        },
+        percentage: {
+            default: 0
+        }
+    }
+}
+</script>

package/src/components/progress-indicators/SrFiniteProgressBar/SrFiniteProgressBar.scss

@@ -0,0 +1,3 @@
+.sr-finite-progress-bar span.percentage {
+  text-shadow: 0px 0px 2px var(--sr-dark-grey);
+}

package/src/components/progress-indicators/SrFiniteProgressBar/SrFiniteProgressBar.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-progress-linear
+      v-bind="$attrs"
+      v-on="$listeners"
+      color="success"
+      class="sr-finite-progress-bar"
+      striped
+      :height="height"
+      rounded
+      :value="percentage"
+      background-color="var(--sr-light-grey)">
+    <span class="white--text caption font-weight-bold percentage">{{ percentage }}%</span>
+  </v-progress-linear>
+</template>
+
+<script>
+export default {
+    name: 'SrFiniteProgressBar',
+    inheritAttrs: false,
+    props: {
+        percentage: {
+            default: 0
+        },
+        height: {
+            default: 21
+        }
+    }
+}
+</script>

package/src/components/progress-indicators/SrInfinitePreloader/SrInfinitePreloader.vue

@@ -0,0 +1,22 @@
+<template>
+  <v-progress-circular
+      indeterminate
+      color="primary"
+      class="text-center"
+      :size="size"
+      v-bind="$attrs"
+      v-on="$listeners"
+  />
+</template>
+
+<script>
+export default {
+    name: 'SrInfinitePreloader',
+    inheritAttrs: false,
+    props: {
+        size: {
+            default: 200
+        }
+    }
+}
+</script>

package/src/components/tabs/SrLanguageTab/adminLanguages.js

@@ -5,6 +5,13 @@ import SrCroatiaFlag from '../../icons/flags/SrCroatiaFlag.vue'
 import SrRomaniaFlag from '../../icons/flags/SrRomaniaFlag.vue'
 import SrSerbiaFlag from '../../icons/flags/SrSerbiaFlag.vue'
 import SrSloveniaFlag from '../../icons/flags/SrSloveniaFlag.vue'
+import SrBulgariaFlag from '../../icons/flags/SrBulgariaFlag.vue'
+import SrCzechFlag from '../../icons/flags/SrCzechFlag.vue'
+import SrFranceFlag from '../../icons/flags/SrFranceFlag.vue'
+import SrItalyFlag from '../../icons/flags/SrItalyFlag.vue'
+import SrPolandFlag from '../../icons/flags/SrPolandFlag.vue'
+import SrSlovakiaFlag from '../../icons/flags/SrSlovakiaFlag.vue'
+import SrSpainFlag from '../../icons/flags/SrSpainFlag.vue'
 
 const adminLanguageList = [
     {
@@ -41,6 +48,41 @@ const adminLanguageList = [
         code: 'sl',
         icon: SrSloveniaFlag,
         text: 'Slovenian'
+    },
+    {
+        code: 'bg',
+        icon: SrBulgariaFlag,
+        text: 'Bulgarian'
+    },
+    {
+        code: 'cs',
+        icon: SrCzechFlag,
+        text: 'Czech'
+    },
+    {
+        code: 'fr',
+        icon: SrFranceFlag,
+        text: 'French'
+    },
+    {
+        code: 'it',
+        icon: SrItalyFlag,
+        text: 'Italian'
+    },
+    {
+        code: 'pl',
+        icon: SrPolandFlag,
+        text: 'Polish'
+    },
+    {
+        code: 'sk',
+        icon: SrSlovakiaFlag,
+        text: 'Slovak'
+    },
+    {
+        code: 'es',
+        icon: SrSpainFlag,
+        text: 'Spanish'
     }
 ]
 

package/src/plugins/component-library/index.js

@@ -7,7 +7,7 @@ import SrTables from './library/SrTables'
 import SrPagination from './library/SrPagination'
 import SrAppContainers from './library/SrAppContainers'
 import SrAlerts from './library/SrAlerts'
-import SrMilestoneIndicators from './library/SrMilestoneIndicators'
+import SrProgressIndicators from './library/SrProgressIndicators'
 import SrTabs from './library/SrTabs'
 import SrBreadcrumbs from './library/SrBreadcrumbs'
 
@@ -22,7 +22,7 @@ export default {
         Vue.use(SrAlerts)
         Vue.use(SrPagination)
         Vue.use(SrAppContainers)
-        Vue.use(SrMilestoneIndicators)
+        Vue.use(SrProgressIndicators)
         Vue.use(SrTabs)
         Vue.use(SrBreadcrumbs)
     }

package/src/plugins/component-library/library/SrProgressIndicators.js

@@ -0,0 +1,17 @@
+import SrProgressBarStep
+    from '../../../components/progress-indicators/multi-step-progress-bar/SrProgressBarStep/SrProgressBarStep.vue'
+import SrMultiStepProgressBar
+    from '../../../components/progress-indicators/multi-step-progress-bar/SrMultiStepProgressBar/SrMultiStepProgressBar.vue'
+import SrInfinitePreloader from '../../../components/progress-indicators/SrInfinitePreloader/SrInfinitePreloader.vue'
+import SrFinitePreloader from '../../../components/progress-indicators/SrFinitePreloader/SrFinitePreloader.vue'
+import SrFiniteProgressBar from '../../../components/progress-indicators/SrFiniteProgressBar/SrFiniteProgressBar.vue'
+
+export default {
+    install (Vue, options = {}) {
+        Vue.component('SrMultiStepProgressBar', SrMultiStepProgressBar)
+        Vue.component('SrProgressBarStep', SrProgressBarStep)
+        Vue.component('SrInfinitePreloader', SrInfinitePreloader)
+        Vue.component('SrFinitePreloader', SrFinitePreloader)
+        Vue.component('SrFiniteProgressBar', SrFiniteProgressBar)
+    }
+}

package/src/plugins/component-library/library/SrMilestoneIndicators.js

@@ -1,11 +0,0 @@
-import SrProgressBarStep
-    from '../../../components/milestone-indicators/multi-step-progress-bar/SrProgressBarStep/SrProgressBarStep.vue'
-import SrMultiStepProgressBar
-    from '../../../components/milestone-indicators/multi-step-progress-bar/SrMultiStepProgressBar/SrMultiStepProgressBar.vue'
-
-export default {
-    install (Vue, options = {}) {
-        Vue.component('SrMultiStepProgressBar', SrMultiStepProgressBar)
-        Vue.component('SrProgressBarStep', SrProgressBarStep)
-    }
-}