@datametria/vue-components 2.3.1 → 2.4.0

package/src/components/DatametriaSpinner.vue

@@ -1,112 +1,116 @@
-<template>
-  <div
-    class="dm-spinner"
-    :class="[`dm-spinner--${size}`, `dm-spinner--${variant}`]"
-    role="status"
-    :aria-label="ariaLabel"
-  >
-    <svg class="dm-spinner__svg" viewBox="0 0 50 50">
-      <circle
-        class="dm-spinner__circle"
-        cx="25"
-        cy="25"
-        r="20"
-        fill="none"
-        stroke-width="4"
-      ></circle>
-    </svg>
-    <span v-if="label" class="dm-spinner__label">{{ label }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  size?: 'sm' | 'md' | 'lg'
-  variant?: 'primary' | 'secondary' | 'white'
-  label?: string
-  ariaLabel?: string
-}
-
-withDefaults(defineProps<Props>(), {
-  size: 'md',
-  variant: 'primary',
-  ariaLabel: 'Carregando'
-})
-</script>
-
-<style scoped>
-.dm-spinner {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--dm-spacing-2, 0.5rem);
-}
-
-.dm-spinner__svg {
-  animation: dm-spinner-rotate 2s linear infinite;
-}
-
-.dm-spinner--sm .dm-spinner__svg {
-  width: 20px;
-  height: 20px;
-}
-
-.dm-spinner--md .dm-spinner__svg {
-  width: 40px;
-  height: 40px;
-}
-
-.dm-spinner--lg .dm-spinner__svg {
-  width: 60px;
-  height: 60px;
-}
-
-.dm-spinner__circle {
-  stroke-linecap: round;
-  animation: dm-spinner-dash 1.5s ease-in-out infinite;
-}
-
-.dm-spinner--primary .dm-spinner__circle {
-  stroke: var(--dm-primary, #0072CE);
-}
-
-.dm-spinner--secondary .dm-spinner__circle {
-  stroke: var(--dm-secondary, #4B0078);
-}
-
-.dm-spinner--white .dm-spinner__circle {
-  stroke: var(--dm-neutral-50, #ffffff);
-}
-
-.dm-spinner__label {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-600, #4b5563);
-}
-
-@keyframes dm-spinner-rotate {
-  100% {
-    transform: rotate(360deg);
+<template>
+  <div
+    class="dm-spinner"
+    :class="[`dm-spinner--${size}`, `dm-spinner--${variant}`]"
+    role="status"
+    :aria-label="ariaLabel"
+  >
+    <svg class="dm-spinner__svg" viewBox="0 0 50 50">
+      <circle
+        class="dm-spinner__circle"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="4"
+      ></circle>
+    </svg>
+    <span v-if="label" class="dm-spinner__label">{{ label }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  size?: 'sm' | 'md' | 'lg'
+  variant?: 'primary' | 'secondary' | 'white'
+  label?: string
+  ariaLabel?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'md',
+  variant: 'primary',
+  ariaLabel: 'Carregando'
+})
+</script>
+
+<style scoped>
+.dm-spinner {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--dm-spacing-2, 0.5rem);
+}
+
+.dm-spinner__svg {
+  animation: dm-spinner-rotate 2s linear infinite;
+}
+
+.dm-spinner--sm .dm-spinner__svg {
+  width: 20px;
+  height: 20px;
+}
+
+.dm-spinner--md .dm-spinner__svg {
+  width: 40px;
+  height: 40px;
+}
+
+.dm-spinner--lg .dm-spinner__svg {
+  width: 60px;
+  height: 60px;
+}
+
+.dm-spinner__circle {
+  stroke-linecap: round;
+  animation: dm-spinner-dash 1.5s ease-in-out infinite;
+}
+
+.dm-spinner--primary .dm-spinner__circle {
+  stroke: var(--dm-primary, #0072CE);
+}
+
+.dm-spinner--secondary .dm-spinner__circle {
+  stroke: var(--dm-secondary, #4B0078);
+}
+
+.dm-spinner--white .dm-spinner__circle {
+  stroke: var(--dm-neutral-50, #ffffff);
+}
+
+.dm-spinner__label {
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-neutral-600, #4b5563);
+}
+
+@keyframes dm-spinner-rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dm-spinner-dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-spinner__label {
+    color: var(--dm-neutral-400, #9ca3af);
   }
-}
 
-@keyframes dm-spinner-dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .dm-spinner__label {
-    color: var(--dm-neutral-400, #9ca3af);
-  }
-}
-</style>
+[data-theme="dark"] .dm-spinner__label {
+color: var(--dm-neutral-400, #9ca3af);
+}
+}
+</style>