Feat: add epic-spinners component (epicmaxco#891)

* feat: add routes

* feat: update Spinners component

* build: bump epic-spinners to v2.0.0

package.json

@@ -24,6 +24,7 @@
     "@gtm-support/vue-gtm": "^1.6.0",
     "axios": "^0.27.2",
     "chart.js": "^3.8.0",
+    "epic-spinners": "^2.0.0",
     "flag-icons": "^6.6.4",
     "ionicons": "^4.6.3",
     "leaflet": "^1.8.0",

src/components/sidebar/NavigationRoutes.ts

@@ -153,10 +153,10 @@ export default {
           name: 'spacing',
           displayName: 'menu.spacing',
         },
-        // {
-        //   name: "spinners",
-        //   displayName: "menu.spinners",
-        // },
+        {
+          name: 'spinners',
+          displayName: 'menu.spinners',
+        },
         {
           name: 'tabs',
           displayName: 'menu.tabs',

src/pages/admin/ui/route.ts

@@ -73,11 +73,11 @@ export default {
         },
       ],
     },
-    // {
-    //   name: "spinners",
-    //   path: "spinners",
-    //   component: () => import("../../../pages/admin/ui/spinners/Spinners.vue"),
-    // },
+    {
+      name: 'spinners',
+      path: 'spinners',
+      component: () => import('../../../pages/admin/ui/spinners/Spinners.vue'),
+    },
     {
       name: 'grid',
       path: 'grid',

src/pages/admin/ui/spinners/Spinners.vue

@@ -8,8 +8,8 @@
             <span class="shrink pr-3 spinners__size-smaller">A</span>
             <va-slider
               v-model="config.size"
-              value-visible
-              :label-value="`${config.size}px`"
+              track-label-visible
+              :track-label="`${config.size}px`"
               :min="sliderSize.min"
               :max="sliderSize.max"
             />
@@ -18,7 +18,12 @@
 
           <div class="d-flex flex xs12 lg4 align--center">
             <va-icon-slower class="shrink pr-3 spinners__duration-slower" />
-            <va-slider v-model="currentDuration" value-visible :min="sliderDuration.min" :max="sliderDuration.max" />
+            <va-slider
+              v-model="config.duration"
+              track-label-visible
+              :min="sliderDuration.min"
+              :max="sliderDuration.max"
+            />
             <va-icon-faster class="shrink pl-3 spinners__duration-faster" />
           </div>
 
@@ -35,10 +40,14 @@
           <div v-for="item in group" :key="item" class="flex sm6 xs12 lg3">
             <div class="text--center pb-4">
               <div class="flex-center spinner-box">
-                <component :is="item" :animation-duration="speed" :color="computedSpinnersColor" :size="config.size">
-                </component>
+                <component
+                  :is="getComponent(item)"
+                  :animation-duration="config.duration"
+                  :color="computedSpinnersColor"
+                  :size="config.size"
+                />
               </div>
-              <div>{{ t(item) }}</div>
+              <div>{{ item }}</div>
             </div>
           </div>
         </div>
@@ -48,26 +57,25 @@
 </template>
 
 <script setup lang="ts">
-  /**
-   * HIDDEN FROM THE ADMIN! SEE src/components/sidebar/NavigationRoutes.ts AND src/pages/admin/ui/route.ts TO REVEAL.
-   * ALSO INSTALL THE DEPENDENCY "epic-spinners": "^1.1.0" (OR HIGHER WHEN IT'S UPDATED)!
-   */
-
-  // import * as spinners from 'epic-spinners'
   import { computed, ref } from 'vue'
   import { useI18n } from 'vue-i18n'
   import { useColors } from 'vuestic-ui'
+  import * as spinners from 'epic-spinners'
+
   import VaIconFaster from '../../../../components/icons/VaIconFaster.vue'
   import VaIconSlower from '../../../../components/icons/VaIconSlower.vue'
 
+  type SpinnersItems = keyof typeof spinners
+
+  const { t } = useI18n()
+  const { getColor } = useColors()
+
   const config = ref({
-    size: 80,
+    size: 70,
     group: 4,
-    duration: 1500,
+    duration: 2000,
   })
 
-  const currentDuration = ref(1500)
-
   const spinnersColor = ref('primary')
 
   const sliderSize = ref({
@@ -78,38 +86,26 @@
 
   const sliderDuration = ref({
     min: 1000,
-    max: 2000,
+    max: 3000,
   })
 
-  const { t } = useI18n()
-  const { getColor } = useColors()
+  const computedSpinnersColor = computed(() => getColor(spinnersColor.value))
 
-  const computedSpinnersColor = computed(() => {
-    return getColor(spinnersColor.value)
-  })
+  const groups = computed(() => groupItems(Object.keys(spinners) as SpinnersItems[], config.value.group))
 
-  const speed = computed(() => {
-    return sliderDuration.value.min + sliderDuration.value.max - currentDuration.value
-  })
+  const paletteArray = computed(() => ['primary', 'success', 'danger', 'warning', 'dark'])
 
-  const groups = computed(() => {
-    // return groupItems(Object.keys(spinners), config.value.group)
-    return []
-  })
+  function groupItems(items: SpinnersItems[], groupSize: number) {
+    const grouped = []
 
-  const paletteArray = computed(() => {
-    return ['primary', 'success', 'danger', 'warning', 'dark']
-  })
+    for (let i = 0; i < items.length; i += groupSize) {
+      grouped.push(items.slice(i, i + groupSize))
+    }
+
+    return grouped
+  }
 
-  // function groupItems(items: never[], groupSize: number) {
-  //   const grouped = []
-  //
-  //   for (let i = 0; i < items.length; i += groupSize) {
-  //     grouped.push(items.slice(i, i + groupSize))
-  //   }
-  //
-  //   return grouped
-  // }
+  const getComponent = (item: SpinnersItems) => spinners[item]
 </script>
 
 <style lang="scss">

yarn.lock

@@ -1615,6 +1615,11 @@ emoji-regex@^9.2.2:
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+epic-spinners@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/epic-spinners/-/epic-spinners-2.0.0.tgz"
+  integrity sha512-nU7xF7NoXrObmIGdXYwj1hfE3EH3jDVQ8oi1S5wG0yutrQILMJ3Xs0ZQEdGIjBQnFveDrAs/61m8/vm5SMvObA==
+
 es5-ext@^0.10.35, es5-ext@^0.10.50, es5-ext@~0.10.14:
   version "0.10.61"
   resolved "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.61.tgz"