From 553f334e66bdd662b88ed546795b39b59c32be09 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Wed, 14 Feb 2024 23:26:00 +0100
Subject: [PATCH] Added VueUiMiniLoader component

---
 README.md                             |   3 +-
 package-lock.json                     |   4 +-
 package.json                          |   2 +-
 src/App.vue                           |  41 ++++++++
 src/components/vue-ui-mini-loader.vue | 134 ++++++++++++++++++++++++++
 src/default_configs.json              |  21 ++++
 types/vue-data-ui.d.ts                |  26 +++++
 7 files changed, 227 insertions(+), 4 deletions(-)
 create mode 100644 src/components/vue-ui-mini-loader.vue

diff --git a/README.md b/README.md
index f5b81b44..7cd5795b 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@
 ![GitHub issues](https://img.shields.io/github/issues/graphieros/vue-data-ui)
 ![NPM](https://img.shields.io/npm/l/vue-data-ui)
 ![npm](https://img.shields.io/npm/dt/vue-data-ui)
-![Static Badge](https://img.shields.io/badge/components-36-green)
+![Static Badge](https://img.shields.io/badge/components-37-green)
 
 [Interactive documentation](https://vue-data-ui.graphieros.com/)
 
@@ -70,6 +70,7 @@ Available components:
 - [VueUiAnnotator](https://vue-data-ui.graphieros.com/docs#vue-ui-annotator)
 - [VueUiIcon](https://vue-data-ui.graphieros.com/docs#vue-ui-icon)
 - [VueUiDigits](https://vue-data-ui.graphieros.com/docs#vue-ui-digits)
+- [VueUiMiniLoader](https://vue-data-ui.graphieros.com/docs#vue-ui-mini-loader)
 
 # Installation
 ```
diff --git a/package-lock.json b/package-lock.json
index 3835bf07..afa1569c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "1.9.89",
+  "version": "1.9.90",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "1.9.89",
+      "version": "1.9.90",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index 44114e58..bb766d36 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.89",
+  "version": "1.9.90",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/App.vue b/src/App.vue
index f99830c1..dbdaf28a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -48,6 +48,7 @@ import DigitsTest from "./components/vue-ui-digits.vue";
 import MoleculeTest from './components/vue-ui-molecule.vue';
 import DonutEvolutionTest from "./components/vue-ui-donut-evolution.vue";
 import TableSparklineTest from "./components/vue-ui-table-sparkline.vue";
+import MiniLoaderTest from "./components/vue-ui-mini-loader.vue";
 
 const dataset = ref([
   {
@@ -3831,6 +3832,28 @@ const moodRadarConfig = ref({
     },
   ])
 
+  const miniLoaderConfig = ref({
+    type: "bar",
+    onion: {
+      gutterColor: "#CCCCCC",
+      gutterOpacity: 0.3,
+      gutterBlur: 0.2,
+      trackHueRotate: 360,
+      trackBlur: 2,
+      trackColor: "#42d392"
+    },
+    line: {
+      color: "#42d392",
+      blur: 1,
+      hueRotate: 360
+    },
+    bar: {
+      color: "#42d392",
+      blur: 1,
+      hueRotate: 360
+    }
+  })
+
 </script>
 
 <template>
@@ -3931,6 +3954,24 @@ const moodRadarConfig = ref({
       </template>
       </Box>
 
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_mini_loader)">
+        <template #title>
+          <!-- <BaseIcon name="chartTable"/> -->
+          VueUiMiniLoader
+        </template>
+        <template #info>
+        </template>
+        <template #dev>
+          <MiniLoaderTest :config="miniLoaderConfig" />
+        </template>
+        <!-- <template #prod>
+          <VueUiTableSparkline :dataset="tableSparklineDataset"/>
+        </template> -->
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_mini_loader }}
+        </template>
+      </Box>
+
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_table_sparkline)">
         <template #title>
           <BaseIcon name="chartTable"/>
diff --git a/src/components/vue-ui-mini-loader.vue b/src/components/vue-ui-mini-loader.vue
new file mode 100644
index 00000000..2d33da55
--- /dev/null
+++ b/src/components/vue-ui-mini-loader.vue
@@ -0,0 +1,134 @@
+<script setup>
+import { ref, computed, nextTick } from "vue";
+import { 
+    createUid, 
+    palette, 
+} from '../lib';
+import { useNestedProp } from "../useNestedProp";
+import mainConfig from "../default_configs.json";
+
+const props = defineProps({
+    config: {
+        type: Object,
+        default() {
+            return {}
+        }
+    },
+    dataset: {
+        type: Array,
+        default() {
+            return []
+        }
+    },
+});
+
+const uid = ref(createUid());
+
+const defaultConfig = ref(mainConfig.vue_ui_mini_loader);
+
+const loaderConfig = computed(() => {
+    return useNestedProp({
+        userConfig: props.config,
+        defaultConfig: defaultConfig.value
+    });
+});
+
+const viewBox = ref({
+    onion: "-10 -10 84 84",
+    line: "-10 -10 112 84",
+    bar: "-10 -10 106 84"
+})
+
+const onionStyle = computed(() => {
+    return {
+        gutter: `stroke:${loaderConfig.value.onion.gutterColor};opacity:${loaderConfig.value.onion.gutterOpacity};`,
+        gutterBlur: `filter:blur(${loaderConfig.value.onion.gutterBlur}px);`
+    }
+})
+
+const trackBlur = computed(() => `blur(${loaderConfig.value.onion.trackBlur}px) hue-rotate(${loaderConfig.value.onion.trackHueRotate}deg)`);
+
+const lineBlur = computed(() => `blur(${loaderConfig.value.line.blur}px) hue-rotate(${loaderConfig.value.line.hueRotate}deg)`);
+
+const barBlur = computed(() => `blur(${loaderConfig.value.bar.blur}px) hue-rotate(${loaderConfig.value.bar.hueRotate}deg)`);
+
+</script>
+
+<template>
+    <svg :viewBox="viewBox[loaderConfig.type]" style="background: transparent" width="100%">
+        <g v-if="loaderConfig.type === 'onion'">        
+            <path d="M 3 32 C 3 45 12 62 32 62 A 1 1 0 0 0 32 3" stroke="black" stroke-width="4" fill="none" stroke-linecap="round" :style="onionStyle.gutter + onionStyle.gutterBlur"/>
+            <path d="M 13 32 C 13 39 19 52 32 52 A 1 1 0 0 0 32 13" stroke="black" stroke-width="4" fill="none" stroke-linecap="round" :style="onionStyle.gutter + onionStyle.gutterBlur"/>
+            <path d="M 23 32 C 23 37 26.5 41 32 41 A 1 1 0 0 0 32 25" stroke="black" stroke-width="4" fill="none" stroke-linecap="round" :style="onionStyle.gutter + onionStyle.gutterBlur"/>
+
+            <path d="M 3 32 C 3 45 12 62 32 62 A 1 1 0 0 0 32 3" :stroke="loaderConfig.onion.trackColor" stroke-width="4" fill="none" stroke-linecap="round" class="onion-animated"/>
+            <path d="M 13 32 C 13 39 19 52 32 52 A 1 1 0 0 0 32 13" :stroke="loaderConfig.onion.trackColor" stroke-width="4" fill="none" stroke-linecap="round" class="onion-animated"/>
+            <path d="M 23 32 C 23 37 26.5 41 32 41 A 1 1 0 0 0 32 25" :stroke="loaderConfig.onion.trackColor" stroke-width="4" fill="none" stroke-linecap="round" class="onion-animated"/>
+        </g>
+        <g v-if="loaderConfig.type === 'line'">
+            <path d="M 3 62 C 6 57 6 48 11 45 C 16 44 17 53 22 52 C 27 49 25 32 30 31 C 34 29 37 47 42 47 C 46 47 45 38 49 36 C 53 34 56 45 61 45 C 66 45 65 24 69 24 C 73 22 75 35 79 34 C 84 34 83 11 91 5" :stroke="loaderConfig.line.color" stroke-width="4" fill="none" stroke-linecap="round" class="line-animated"/>
+        </g>
+        <g v-if="loaderConfig.type === 'bar'">
+            <path d="M 3 62 L 3 44 M 12 62 L 12 49 M 21 62 L 21 37 M 30 62 L 30 29 M 39 62 L 39 43 M 48 62 L 48 16 M 57 62 L 57 24 M 66 62 L 66 35 M 75 62 L 75 20 M 84 62 L 84 5" :stroke="loaderConfig.bar.color" stroke-width="4" fill="none" stroke-linecap="round" class="bar-animated"/>
+        </g>
+    </svg>
+</template>
+
+<style scoped>
+
+path.onion-animated {
+    stroke-dasharray: 0;
+    stroke-dashoffset: 0;
+    animation: onion-groove infinite cubic-bezier(.53,.15,.57,.93) 3s;
+}
+
+@keyframes onion-groove {
+    from {
+        stroke-dasharray: 160;
+        stroke-dashoffset: -140;
+        filter: blur(0px);
+    }
+    to {
+        stroke-dasharray: 160;
+        stroke-dashoffset: 0;
+        filter: v-bind(trackBlur);
+    }
+}
+path.line-animated {
+    stroke-dasharray: 0;
+    stroke-dashoffset: 0;
+    animation: line-funk infinite cubic-bezier(.53,.15,.57,.93) 3s;
+}
+
+@keyframes line-funk {
+    from {
+        stroke-dasharray: 300;
+        stroke-dashoffset: 300;
+        filter: blur(0px);
+    }
+    to {
+        stroke-dasharray: 300;
+        stroke-dashoffset: 100;
+        filter: v-bind(lineBlur);
+    }
+}
+
+path.bar-animated {
+    stroke-dasharray: 0;
+    stroke-dashoffset: 0;
+    animation: bar-jazz infinite cubic-bezier(.53,.15,.57,.93) 3s;
+}
+
+@keyframes bar-jazz {
+    from {
+        stroke-dasharray: 60;
+        stroke-dashoffset: 60;
+        filter: blur(0px);
+    }
+    to {
+        stroke-dasharray: 60;
+        stroke-dashoffset: 0;
+        filter: v-bind(barBlur);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/default_configs.json b/src/default_configs.json
index 59309893..6852a9e8 100644
--- a/src/default_configs.json
+++ b/src/default_configs.json
@@ -3080,5 +3080,26 @@
         "userOptions": {
             "show": true
         }
+    },
+    "vue_ui_mini_loader": {
+        "type": "onion",
+        "onion": {
+            "gutterColor": "#CCCCCC",
+            "gutterOpacity": 0,
+            "gutterBlur": 0,
+            "trackHueRotate": 20,
+            "trackBlur": 5,
+            "trackColor": "#42d392"
+        },
+        "line": {
+            "color": "#42d392",
+            "blur": 1,
+            "hueRotate": 20
+        },
+        "bar": {
+            "color": "#42d392",
+            "blur": 1,
+            "hueRotate": 20
+        }
     }
 }
\ No newline at end of file
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index b073e4d9..ff160eae 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -5,6 +5,32 @@ declare module 'vue-data-ui' {
         [key: string]: unknown;
     }
 
+    export type VueUiMiniLoaderConfig = {
+        type?: "line" | "bar" | "onion";
+        onion?: {
+            gutterColor?: string;
+            gutterOpacity?: number;
+            gutterBlur?: number;
+            trackHueRotate?: number;
+            trackBlur?: number;
+            trackColor?: string;
+        };
+        line?: {
+            color?: string;
+            blur?: number;
+            hueRotate?: number;
+        };
+        bar?: {
+            color?: string;
+            blur?: number;
+            hueRotate?: number;
+        }
+    }
+
+    export const VueUiMiniLoader: DefineComponent<{
+        config?: VueUiMiniLoaderConfig;
+    }>
+
     export const Arrow: DefineComponent<{
         markerEnd?: boolean,
         markerSize?: number,