@datametria/vue-components 2.3.0 → 2.4.0

package/src/components/DatametriaEmpty.vue

@@ -1,153 +1,157 @@
-<template>
-  <div class="datametria-empty" role="status" aria-live="polite">
-    <div class="datametria-empty__image">
-      <slot name="image">
-        <svg
-          v-if="imageType === 'no-data'"
-          class="datametria-empty__svg"
-          viewBox="0 0 200 200"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle cx="100" cy="100" r="80" fill="#f0f0f0" />
-          <path d="M70 90 Q100 70 130 90" stroke="#999" stroke-width="3" fill="none" />
-          <circle cx="80" cy="85" r="8" fill="#999" />
-          <circle cx="120" cy="85" r="8" fill="#999" />
-          <path d="M70 130 Q100 150 130 130" stroke="#999" stroke-width="3" fill="none" />
-        </svg>
-        <svg
-          v-else-if="imageType === 'no-results'"
-          class="datametria-empty__svg"
-          viewBox="0 0 200 200"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle cx="80" cy="80" r="50" fill="none" stroke="#999" stroke-width="4" />
-          <line x1="120" y1="120" x2="160" y2="160" stroke="#999" stroke-width="4" stroke-linecap="round" />
-          <line x1="60" y1="60" x2="100" y2="100" stroke="#e74c3c" stroke-width="3" />
-          <line x1="100" y1="60" x2="60" y2="100" stroke="#e74c3c" stroke-width="3" />
-        </svg>
-        <svg
-          v-else-if="imageType === 'error'"
-          class="datametria-empty__svg"
-          viewBox="0 0 200 200"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle cx="100" cy="100" r="80" fill="#fee" stroke="#e74c3c" stroke-width="3" />
-          <line x1="70" y1="70" x2="130" y2="130" stroke="#e74c3c" stroke-width="4" stroke-linecap="round" />
-          <line x1="130" y1="70" x2="70" y2="130" stroke="#e74c3c" stroke-width="4" stroke-linecap="round" />
-        </svg>
-        <img
-          v-else-if="image"
-          :src="image"
-          :alt="imageAlt"
-          class="datametria-empty__custom-image"
-        />
-      </slot>
-    </div>
-
-    <div class="datametria-empty__description">
-      <slot name="description">
-        <p v-if="description" class="datametria-empty__text">{{ description }}</p>
-      </slot>
-    </div>
-
-    <div v-if="$slots.default" class="datametria-empty__actions">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  description?: string
-  image?: string
-  imageAlt?: string
-  imageType?: 'no-data' | 'no-results' | 'error'
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  description: '',
-  image: '',
-  imageAlt: 'Empty state',
-  imageType: 'no-data'
-})
-
-const imageType = computed(() => {
-  if (props.image) return null
-  return props.imageType
-})
-</script>
-
-<style scoped>
-.datametria-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: var(--dm-spacing-xl, 48px) var(--dm-spacing-lg, 24px);
-  text-align: center;
-  min-height: 300px;
-}
-
-.datametria-empty__image {
-  margin-bottom: var(--dm-spacing-lg, 24px);
-}
-
-.datametria-empty__svg {
-  width: 200px;
-  height: 200px;
-  opacity: 0.8;
-}
-
-.datametria-empty__custom-image {
-  max-width: 200px;
-  max-height: 200px;
-  object-fit: contain;
-}
-
-.datametria-empty__description {
-  margin-bottom: var(--dm-spacing-md, 16px);
-}
-
-.datametria-empty__text {
-  color: var(--dm-color-text-secondary, #666);
-  font-size: var(--dm-font-size-base, 14px);
-  line-height: 1.6;
-  margin: 0;
-  max-width: 400px;
-}
-
-.datametria-empty__actions {
-  margin-top: var(--dm-spacing-md, 16px);
-}
-
-@media (prefers-color-scheme: dark) {
-  .datametria-empty__text {
-    color: var(--dm-color-text-secondary-dark, #999);
-  }
-
-  .datametria-empty__svg circle[fill="#f0f0f0"] {
-    fill: #2a2a2a;
+<template>
+  <div class="datametria-empty" role="status" aria-live="polite">
+    <div class="datametria-empty__image">
+      <slot name="image">
+        <svg
+          v-if="imageType === 'no-data'"
+          class="datametria-empty__svg"
+          viewBox="0 0 200 200"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="100" cy="100" r="80" fill="#f0f0f0" />
+          <path d="M70 90 Q100 70 130 90" stroke="#999" stroke-width="3" fill="none" />
+          <circle cx="80" cy="85" r="8" fill="#999" />
+          <circle cx="120" cy="85" r="8" fill="#999" />
+          <path d="M70 130 Q100 150 130 130" stroke="#999" stroke-width="3" fill="none" />
+        </svg>
+        <svg
+          v-else-if="imageType === 'no-results'"
+          class="datametria-empty__svg"
+          viewBox="0 0 200 200"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="80" cy="80" r="50" fill="none" stroke="#999" stroke-width="4" />
+          <line x1="120" y1="120" x2="160" y2="160" stroke="#999" stroke-width="4" stroke-linecap="round" />
+          <line x1="60" y1="60" x2="100" y2="100" stroke="#e74c3c" stroke-width="3" />
+          <line x1="100" y1="60" x2="60" y2="100" stroke="#e74c3c" stroke-width="3" />
+        </svg>
+        <svg
+          v-else-if="imageType === 'error'"
+          class="datametria-empty__svg"
+          viewBox="0 0 200 200"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="100" cy="100" r="80" fill="#fee" stroke="#e74c3c" stroke-width="3" />
+          <line x1="70" y1="70" x2="130" y2="130" stroke="#e74c3c" stroke-width="4" stroke-linecap="round" />
+          <line x1="130" y1="70" x2="70" y2="130" stroke="#e74c3c" stroke-width="4" stroke-linecap="round" />
+        </svg>
+        <img
+          v-else-if="image"
+          :src="image"
+          :alt="imageAlt"
+          class="datametria-empty__custom-image"
+        />
+      </slot>
+    </div>
+
+    <div class="datametria-empty__description">
+      <slot name="description">
+        <p v-if="description" class="datametria-empty__text">{{ description }}</p>
+      </slot>
+    </div>
+
+    <div v-if="$slots.default" class="datametria-empty__actions">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  description?: string
+  image?: string
+  imageAlt?: string
+  imageType?: 'no-data' | 'no-results' | 'error'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  description: '',
+  image: '',
+  imageAlt: 'Empty state',
+  imageType: 'no-data'
+})
+
+const imageType = computed(() => {
+  if (props.image) return null
+  return props.imageType
+})
+</script>
+
+<style scoped>
+.datametria-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--dm-spacing-xl, 48px) var(--dm-spacing-lg, 24px);
+  text-align: center;
+  min-height: 300px;
+}
+
+.datametria-empty__image {
+  margin-bottom: var(--dm-spacing-lg, 24px);
+}
+
+.datametria-empty__svg {
+  width: 200px;
+  height: 200px;
+  opacity: 0.8;
+}
+
+.datametria-empty__custom-image {
+  max-width: 200px;
+  max-height: 200px;
+  object-fit: contain;
+}
+
+.datametria-empty__description {
+  margin-bottom: var(--dm-spacing-md, 16px);
+}
+
+.datametria-empty__text {
+  color: var(--dm-color-text-secondary, #666);
+  font-size: var(--dm-font-size-base, 14px);
+  line-height: 1.6;
+  margin: 0;
+  max-width: 400px;
+}
+
+.datametria-empty__actions {
+  margin-top: var(--dm-spacing-md, 16px);
+}
+
+@media (prefers-color-scheme: dark) {
+  .datametria-empty__text {
+    color: var(--dm-color-text-secondary-dark, #999);
   }
 
-  .datametria-empty__svg circle[fill="#fee"] {
-    fill: #3a2020;
-  }
-}
-
-@media (max-width: 768px) {
-  .datametria-empty {
-    padding: var(--dm-spacing-lg, 24px) var(--dm-spacing-md, 16px);
-    min-height: 250px;
-  }
-
-  .datametria-empty__svg,
-  .datametria-empty__custom-image {
-    width: 150px;
-    height: 150px;
-    max-width: 150px;
-    max-height: 150px;
-  }
-}
-</style>
+[data-theme="dark"] .datametria-empty__text {
+color: var(--dm-color-text-secondary-dark, #999);
+}
+
+  .datametria-empty__svg circle[fill="#f0f0f0"] {
+    fill: #2a2a2a;
+  }
+
+  .datametria-empty__svg circle[fill="#fee"] {
+    fill: #3a2020;
+  }
+}
+
+@media (max-width: 768px) {
+  .datametria-empty {
+    padding: var(--dm-spacing-lg, 24px) var(--dm-spacing-md, 16px);
+    min-height: 250px;
+  }
+
+  .datametria-empty__svg,
+  .datametria-empty__custom-image {
+    width: 150px;
+    height: 150px;
+    max-width: 150px;
+    max-height: 150px;
+  }
+}
+</style>