@datametria/vue-components 2.3.1 → 2.4.1

package/src/components/DatametriaSwitch.vue

@@ -1,143 +1,147 @@
-<template>
-  <button
-    type="button"
-    role="switch"
-    class="datametria-switch"
-    :class="{
-      'is-checked': modelValue,
-      'is-disabled': disabled,
-      'is-loading': loading
-    }"
-    :aria-checked="modelValue"
-    :disabled="disabled || loading"
-    @click="handleClick"
-  >
-    <span class="datametria-switch__core" :style="coreStyle">
-      <span v-if="loading" class="datametria-switch__loading">
-        <span class="spinner"></span>
-      </span>
-    </span>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-
-interface Props {
-  modelValue?: boolean
-  disabled?: boolean
-  loading?: boolean
-  activeColor?: string
-  inactiveColor?: string
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  modelValue: false,
-  disabled: false,
-  loading: false,
-  activeColor: '#0072ce',
-  inactiveColor: '#dcdfe6'
-})
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean]
-  change: [value: boolean]
-}>()
-
-const coreStyle = computed(() => ({
-  backgroundColor: props.modelValue ? props.activeColor : props.inactiveColor
-}))
-
-const handleClick = () => {
-  if (props.disabled || props.loading) return
-  const newValue = !props.modelValue
-  emit('update:modelValue', newValue)
-  emit('change', newValue)
-}
-</script>
-
-<style scoped>
-.datametria-switch {
-  display: inline-flex;
-  align-items: center;
-  position: relative;
-  font-size: 14px;
-  line-height: 20px;
-  height: 20px;
-  vertical-align: middle;
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  padding: 0;
-}
-
-.datametria-switch.is-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.datametria-switch.is-loading {
-  cursor: not-allowed;
-}
-
-.datametria-switch__core {
-  display: inline-block;
-  position: relative;
-  width: 40px;
-  height: 20px;
-  border-radius: 10px;
-  transition: background-color 0.3s;
-}
-
-.datametria-switch__core::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background-color: #fff;
-  transition: transform 0.3s;
-}
-
-.datametria-switch.is-checked .datametria-switch__core::after {
-  transform: translateX(20px);
-}
-
-.datametria-switch__loading {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.spinner {
-  width: 12px;
-  height: 12px;
-  border: 2px solid #fff;
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: spin 0.6s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
-.datametria-switch:focus-visible {
-  outline: 2px solid var(--dm-color-primary, #0072ce);
-  outline-offset: 2px;
-  border-radius: 10px;
-}
-
-/* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .datametria-switch__core {
-    background-color: var(--dm-bg-color-dark, #1e1e1e);
+<template>
+  <button
+    type="button"
+    role="switch"
+    class="datametria-switch"
+    :class="{
+      'is-checked': modelValue,
+      'is-disabled': disabled,
+      'is-loading': loading
+    }"
+    :aria-checked="modelValue"
+    :disabled="disabled || loading"
+    @click="handleClick"
+  >
+    <span class="datametria-switch__core" :style="coreStyle">
+      <span v-if="loading" class="datametria-switch__loading">
+        <span class="spinner"></span>
+      </span>
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: boolean
+  disabled?: boolean
+  loading?: boolean
+  activeColor?: string
+  inactiveColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  disabled: false,
+  loading: false,
+  activeColor: '#0072ce',
+  inactiveColor: '#dcdfe6'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  change: [value: boolean]
+}>()
+
+const coreStyle = computed(() => ({
+  backgroundColor: props.modelValue ? props.activeColor : props.inactiveColor
+}))
+
+const handleClick = () => {
+  if (props.disabled || props.loading) return
+  const newValue = !props.modelValue
+  emit('update:modelValue', newValue)
+  emit('change', newValue)
+}
+</script>
+
+<style scoped>
+.datametria-switch {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  font-size: 14px;
+  line-height: 20px;
+  height: 20px;
+  vertical-align: middle;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+}
+
+.datametria-switch.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.datametria-switch.is-loading {
+  cursor: not-allowed;
+}
+
+.datametria-switch__core {
+  display: inline-block;
+  position: relative;
+  width: 40px;
+  height: 20px;
+  border-radius: 10px;
+  transition: background-color 0.3s;
+}
+
+.datametria-switch__core::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #fff;
+  transition: transform 0.3s;
+}
+
+.datametria-switch.is-checked .datametria-switch__core::after {
+  transform: translateX(20px);
+}
+
+.datametria-switch__loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner {
+  width: 12px;
+  height: 12px;
+  border: 2px solid #fff;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.datametria-switch:focus-visible {
+  outline: 2px solid var(--dm-primary, #0072ce);
+  outline-offset: 2px;
+  border-radius: 10px;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .datametria-switch__core {
+    background-color: var(--dm-bg-color-dark, #1e1e1e);
   }
-}
-</style>
+
+[data-theme="dark"] .datametria-switch__core {
+background-color: var(--dm-bg-color-dark, #1e1e1e);
+}
+}
+</style>

package/src/components/DatametriaTabPane.vue

@@ -1,82 +1,100 @@
-<template>
-  <div
-    :id="id"
-    class="datametria-tab-pane"
-    :class="{ 'is-active': active }"
-    role="tabpanel"
-    :aria-labelledby="ariaLabelledby"
-    :hidden="!active"
-  >
-    <slot v-if="lazy ? (active || wasActive) : true"></slot>
-  </div>
-</template>
+<template>
+  <div
+    :id="id"
+    class="datametria-tab-pane"
+    :class="{ 'is-active': active }"
+    role="tabpanel"
+    :aria-labelledby="ariaLabelledby"
+    :hidden="!active"
+  >
+    <slot v-if="lazy ? (active || wasActive) : true"></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, inject, onMounted, onBeforeUnmount, computed } from 'vue'
+
+interface Props {
+  label: string
+  name?: string
+  disabled?: boolean
+  lazy?: boolean
+  icon?: string
+  badge?: string | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+  lazy: false
+})
+
+const tabsContext = inject<any>('datametriaTabs', null)
+const wasActive = ref(false)
+
+const active = computed(() => {
+  if (!tabsContext) return false
+  return tabsContext.activePane.value === (props.name || props.label)
+})
+
+const id = computed(() => {
+  const name = props.name || props.label
+  return `pane-${name.replace(/\s+/g, '-').toLowerCase()}`
+})
+
+const ariaLabelledby = computed(() => {
+  const name = props.name || props.label
+  return `tab-${name.replace(/\s+/g, '-').toLowerCase()}`
+})
+
+watch(active, (isActive) => {
+  if (isActive) {
+    wasActive.value = true
+  }
+})
+
+onMounted(() => {
+  if (tabsContext) {
+    tabsContext.registerPane({
+      label: props.label,
+      name: props.name || props.label,
+      disabled: props.disabled,
+      icon: props.icon,
+      badge: props.badge
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  if (tabsContext) {
+    tabsContext.unregisterPane(props.name || props.label)
+  }
+})
+</script>
+
+<style scoped>
+.datametria-tab-pane {
+  display: none;
+}
+
+.datametria-tab-pane.is-active {
+  display: block;
+}
 
-<script setup lang="ts">
-import { ref, watch, inject, onMounted, onBeforeUnmount, computed } from 'vue'
+/* Dark Mode Support - Hybrid Approach */
 
-interface Props {
-  label: string
-  name?: string
-  disabled?: boolean
-  lazy?: boolean
-  icon?: string
-  badge?: string | number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  disabled: false,
-  lazy: false
-})
-
-const tabsContext = inject<any>('datametriaTabs', null)
-const wasActive = ref(false)
-
-const active = computed(() => {
-  if (!tabsContext) return false
-  return tabsContext.activePane.value === (props.name || props.label)
-})
-
-const id = computed(() => {
-  const name = props.name || props.label
-  return `pane-${name.replace(/\s+/g, '-').toLowerCase()}`
-})
-
-const ariaLabelledby = computed(() => {
-  const name = props.name || props.label
-  return `tab-${name.replace(/\s+/g, '-').toLowerCase()}`
-})
-
-watch(active, (isActive) => {
-  if (isActive) {
-    wasActive.value = true
-  }
-})
-
-onMounted(() => {
-  if (tabsContext) {
-    tabsContext.registerPane({
-      label: props.label,
-      name: props.name || props.label,
-      disabled: props.disabled,
-      icon: props.icon,
-      badge: props.badge
-    })
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .datametria-tab-pane {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
   }
-})
-
-onBeforeUnmount(() => {
-  if (tabsContext) {
-    tabsContext.unregisterPane(props.name || props.label)
-  }
-})
-</script>
-
-<style scoped>
-.datametria-tab-pane {
-  display: none;
 }
 
-.datametria-tab-pane.is-active {
-  display: block;
+/* Controle manual via useTheme() */
+[data-theme="dark"] .datametria-tab-pane {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>

package/src/components/DatametriaTable.vue

@@ -1,105 +1,123 @@
-<template>
-  <div class="datametria-table">
-    <table class="datametria-table__table">
-      <thead class="datametria-table__thead">
-        <tr>
-          <th
-            v-for="column in columns"
-            :key="column.key"
-            class="datametria-table__th"
-            :style="{ width: column.width }"
-          >
-            {{ column.label }}
-          </th>
-        </tr>
-      </thead>
-      <tbody class="datametria-table__tbody">
-        <tr
-          v-for="(row, index) in data"
-          :key="index"
-          class="datametria-table__tr"
-        >
-          <td
-            v-for="column in columns"
-            :key="column.key"
-            class="datametria-table__td"
-          >
-            <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]">
-              {{ row[column.key] }}
-            </slot>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-    
-    <div v-if="data.length === 0" class="datametria-table__empty">
-      <slot name="empty">Nenhum dado disponível</slot>
-    </div>
-  </div>
-</template>
+<template>
+  <div class="datametria-table">
+    <table class="datametria-table__table">
+      <thead class="datametria-table__thead">
+        <tr>
+          <th
+            v-for="column in columns"
+            :key="column.key"
+            class="datametria-table__th"
+            :style="{ width: column.width }"
+          >
+            {{ column.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody class="datametria-table__tbody">
+        <tr
+          v-for="(row, index) in data"
+          :key="index"
+          class="datametria-table__tr"
+        >
+          <td
+            v-for="column in columns"
+            :key="column.key"
+            class="datametria-table__td"
+          >
+            <slot :name="`cell-${column.key}`" :row="row" :value="row[column.key]">
+              {{ row[column.key] }}
+            </slot>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    
+    <div v-if="data.length === 0" class="datametria-table__empty">
+      <slot name="empty">Nenhum dado disponível</slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Column {
+  key: string
+  label: string
+  width?: string
+}
+
+interface Props {
+  columns: Column[]
+  data: Record<string, any>[]
+}
+
+defineProps<Props>()
+</script>
+
+<style scoped>
+.datametria-table {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.datametria-table__table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.datametria-table__thead {
+  background: var(--dm-neutral-50, #f9fafb);
+  border-bottom: 2px solid var(--dm-neutral-200, #e5e7eb);
+}
+
+.datametria-table__th {
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
+  text-align: left;
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  font-weight: var(--dm-font-weight-semibold, 600);
+  color: var(--dm-neutral-700, #374151);
+}
+
+.datametria-table__tbody {
+  background: white;
+}
+
+.datametria-table__tr {
+  border-bottom: 1px solid var(--dm-neutral-200, #e5e7eb);
+  transition: background 0.2s;
+}
+
+.datametria-table__tr:hover {
+  background: var(--dm-neutral-50, #f9fafb);
+}
+
+.datametria-table__td {
+  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+  color: var(--dm-neutral-900, #111827);
+}
+
+.datametria-table__empty {
+  padding: var(--dm-spacing-12, 3rem);
+  text-align: center;
+  color: var(--dm-neutral-500, #6b7280);
+  font-size: var(--dm-font-size-sm, 0.875rem);
+}
 
-<script setup lang="ts">
-interface Column {
-  key: string
-  label: string
-  width?: string
-}
-
-interface Props {
-  columns: Column[]
-  data: Record<string, any>[]
-}
-
-defineProps<Props>()
-</script>
-
-<style scoped>
-.datametria-table {
-  width: 100%;
-  overflow-x: auto;
-}
-
-.datametria-table__table {
-  width: 100%;
-  border-collapse: collapse;
-}
-
-.datametria-table__thead {
-  background: var(--dm-neutral-50, #f9fafb);
-  border-bottom: 2px solid var(--dm-neutral-200, #e5e7eb);
-}
-
-.datametria-table__th {
-  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
-  text-align: left;
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  font-weight: var(--dm-font-weight-semibold, 600);
-  color: var(--dm-neutral-700, #374151);
-}
-
-.datametria-table__tbody {
-  background: white;
-}
-
-.datametria-table__tr {
-  border-bottom: 1px solid var(--dm-neutral-200, #e5e7eb);
-  transition: background 0.2s;
-}
-
-.datametria-table__tr:hover {
-  background: var(--dm-neutral-50, #f9fafb);
-}
+/* Dark Mode Support - Hybrid Approach */
 
-.datametria-table__td {
-  padding: var(--dm-spacing-3, 0.75rem) var(--dm-spacing-4, 1rem);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-900, #111827);
+/* Fallback automático (sem JS) */
+@media (prefers-color-scheme: dark) {
+  .datametria-table {
+    background: var(--dm-bg-color-dark, #1e1e1e);
+    color: var(--dm-text-primary-dark, #e0e0e0);
+    border-color: var(--dm-border-color-dark, #404040);
+  }
 }
 
-.datametria-table__empty {
-  padding: var(--dm-spacing-12, 3rem);
-  text-align: center;
-  color: var(--dm-neutral-500, #6b7280);
-  font-size: var(--dm-font-size-sm, 0.875rem);
+/* Controle manual via useTheme() */
+[data-theme="dark"] .datametria-table {
+  background: var(--dm-bg-color-dark, #1e1e1e);
+  color: var(--dm-text-primary-dark, #e0e0e0);
+  border-color: var(--dm-border-color-dark, #404040);
 }
-</style>
+</style>