From ef0631f7885dce681f475f27a62aa33778968162 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Thu, 14 Dec 2023 00:42:51 +0600
Subject: [PATCH] spin-loader

---
 src/components/DxhSpinLoader.vue              | 73 +++++++++++++++++++
 .../__tests__/DxhSpinLoader.spec.ts           | 42 +++++++++++
 src/index.ts                                  |  3 +-
 3 files changed, 117 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DxhSpinLoader.vue
 create mode 100644 src/components/__tests__/DxhSpinLoader.spec.ts

diff --git a/src/components/DxhSpinLoader.vue b/src/components/DxhSpinLoader.vue
new file mode 100644
index 0000000..f12d2ca
--- /dev/null
+++ b/src/components/DxhSpinLoader.vue
@@ -0,0 +1,73 @@
+<template>
+  <svg :width="width" :height="height" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g class="spinnerAnimation">
+      <circle v-for="(circle, index) in circles" :key="index" v-bind="circle" />
+    </g>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const { height, width, color } = defineProps<{
+  height?: number
+  width?: number
+  color?: string
+}>()
+
+const circles = ref([
+  { cx: 12, cy: 2.5, r: 1.5, opacity: 0.14, fill: color },
+  { cx: 16.75, cy: 3.77, r: 1.5, opacity: 0.29, fill: color },
+  { cx: 20.23, cy: 7.25, r: 1.5, opacity: 0.43, fill: color },
+  { cx: 21.5, cy: 12, r: 1.5, opacity: 0.57, fill: color },
+  { cx: 20.23, cy: 16.75, r: 1.5, opacity: 0.71, fill: color },
+  { cx: 16.75, cy: 20.23, r: 1.5, opacity: 0.86, fill: color },
+  { cx: 12, cy: 21.5, r: 1.5, fill: color }
+])
+</script>
+
+<style scoped>
+.spinnerAnimation {
+  transform-origin: center;
+  animation: spinner 0.75s step-end infinite;
+}
+
+@keyframes spinner {
+  8.3% {
+    transform: rotate(30deg);
+  }
+  16.6% {
+    transform: rotate(60deg);
+  }
+  25% {
+    transform: rotate(90deg);
+  }
+  33.3% {
+    transform: rotate(120deg);
+  }
+  41.6% {
+    transform: rotate(150deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  58.3% {
+    transform: rotate(210deg);
+  }
+  66.6% {
+    transform: rotate(240deg);
+  }
+  75% {
+    transform: rotate(270deg);
+  }
+  83.3% {
+    transform: rotate(300deg);
+  }
+  91.6% {
+    transform: rotate(330deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
diff --git a/src/components/__tests__/DxhSpinLoader.spec.ts b/src/components/__tests__/DxhSpinLoader.spec.ts
new file mode 100644
index 0000000..a7738e8
--- /dev/null
+++ b/src/components/__tests__/DxhSpinLoader.spec.ts
@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Spinner from '../DxhSpinLoader.Vue'
+
+describe('Spinner.vue', () => {
+  it('renders the spinner with correct props', () => {
+    const wrapper = mount(Spinner, {
+      props: {
+        height: '24',
+        width: '24',
+        color: 'blue'
+      }
+    })
+
+    expect(wrapper.find('svg').attributes('width')).toBe('24')
+    expect(wrapper.find('svg').attributes('height')).toBe('24')
+
+    const circles = wrapper.findAll('circle')
+    expect(circles).toHaveLength(7)
+
+    expect(circles[0].attributes()).not.toEqual({
+      cx: '12',
+      cy: '2.5',
+      r: '1.5',
+      opacity: '0.14',
+      fill: 'blue'
+    })
+  })
+
+  it('applies the spinner animation', async () => {
+    const wrapper = mount(Spinner, {
+      props: {
+        height: '24',
+        width: '24',
+        color: 'blue'
+      }
+    })
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.spinnerAnimation').exists()).toBe(true)
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..be1329e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 import DButton from "./components/DButton.vue"
 import DInput from "./components/DInput.vue"
+import DxhSpinLoader from './components/DxhSpinLoader.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DInput, DxhSpinLoader }
\ No newline at end of file