@datametria/vue-components 1.1.1

package/src/components/DatametriaSwitch.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="dm-switch">
+    <label class="dm-switch__label">
+      <input
+        type="checkbox"
+        class="dm-switch__input"
+        :checked="modelValue"
+        :disabled="disabled"
+        :aria-label="ariaLabel"
+        :aria-checked="modelValue"
+        role="switch"
+        @change="handleChange"
+      />
+      <span class="dm-switch__track">
+        <span class="dm-switch__thumb"></span>
+      </span>
+      <span v-if="label" class="dm-switch__text">{{ label }}</span>
+    </label>
+    <p v-if="error" class="dm-switch__error">{{ error }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue?: boolean
+  label?: string
+  disabled?: boolean
+  error?: string
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  disabled: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+
+const handleChange = (event: Event) => {
+  if (!props.disabled) {
+    emit('update:modelValue', (event.target as HTMLInputElement).checked)
+  }
+}
+</script>
+
+<style scoped>
+.dm-switch {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dm-space-1);
+}
+
+.dm-switch__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dm-space-3);
+  cursor: pointer;
+  min-height: 44px;
+  padding: var(--dm-space-2);
+  user-select: none;
+}
+
+.dm-switch__label:has(.dm-switch__input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.dm-switch__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.dm-switch__track {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: var(--dm-gray-300);
+  border-radius: 12px;
+  transition: var(--dm-transition);
+  flex-shrink: 0;
+}
+
+.dm-switch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: var(--dm-white);
+  border-radius: 50%;
+  transition: var(--dm-transition);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.dm-switch__input:checked + .dm-switch__track {
+  background: var(--dm-primary);
+}
+
+.dm-switch__input:checked + .dm-switch__track .dm-switch__thumb {
+  transform: translateX(20px);
+}
+
+.dm-switch__input:focus-visible + .dm-switch__track {
+  outline: var(--dm-focus-ring);
+  outline-offset: 2px;
+}
+
+.dm-switch__input:disabled + .dm-switch__track {
+  background: var(--dm-gray-200);
+}
+
+.dm-switch__text {
+  color: var(--dm-text-primary);
+  font-size: var(--dm-text-base);
+  line-height: 1.5;
+}
+
+.dm-switch__error {
+  color: var(--dm-error);
+  font-size: var(--dm-text-sm);
+  margin: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-switch__track {
+    background: var(--dm-gray-700);
+  }
+
+  .dm-switch__input:disabled + .dm-switch__track {
+    background: var(--dm-gray-800);
+  }
+}
+</style>

package/src/components/DatametriaTable.vue

@@ -0,0 +1,105 @@
+<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: #f9fafb;
+  border-bottom: 2px solid #e5e7eb;
+}
+
+.datametria-table__th {
+  padding: 0.75rem 1rem;
+  text-align: left;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #374151;
+}
+
+.datametria-table__tbody {
+  background: white;
+}
+
+.datametria-table__tr {
+  border-bottom: 1px solid #e5e7eb;
+  transition: background 0.2s;
+}
+
+.datametria-table__tr:hover {
+  background: #f9fafb;
+}
+
+.datametria-table__td {
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  color: #111827;
+}
+
+.datametria-table__empty {
+  padding: 3rem;
+  text-align: center;
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+</style>

package/src/components/DatametriaTabs.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="dm-tabs">
+    <div class="dm-tabs__header" role="tablist" :aria-label="ariaLabel">
+      <button
+        v-for="(tab, index) in tabs"
+        :key="index"
+        :id="`tab-${index}`"
+        class="dm-tabs__tab"
+        :class="{ 'dm-tabs__tab--active': activeTab === index }"
+        role="tab"
+        :aria-selected="activeTab === index"
+        :aria-controls="`panel-${index}`"
+        :tabindex="activeTab === index ? 0 : -1"
+        @click="selectTab(index)"
+        @keydown="handleKeydown($event, index)"
+      >
+        {{ tab }}
+      </button>
+      <div
+        class="dm-tabs__indicator"
+        :style="{ transform: `translateX(${activeTab * 100}%)` }"
+      ></div>
+    </div>
+    <div class="dm-tabs__panels">
+      <div
+        v-for="(_, index) in tabs"
+        :key="index"
+        :id="`panel-${index}`"
+        class="dm-tabs__panel"
+        :class="{ 'dm-tabs__panel--active': activeTab === index }"
+        role="tabpanel"
+        :aria-labelledby="`tab-${index}`"
+        :hidden="activeTab !== index"
+      >
+        <slot :name="`panel-${index}`"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface Props {
+  tabs: string[]
+  modelValue?: number
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  ariaLabel: 'Tabs'
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [index: number]
+}>()
+
+const activeTab = ref(props.modelValue)
+
+watch(() => props.modelValue, (newValue) => {
+  activeTab.value = newValue
+})
+
+const selectTab = (index: number) => {
+  activeTab.value = index
+  emit('update:modelValue', index)
+}
+
+const handleKeydown = (event: KeyboardEvent, index: number) => {
+  let newIndex = index
+
+  switch (event.key) {
+    case 'ArrowLeft':
+      event.preventDefault()
+      newIndex = index > 0 ? index - 1 : props.tabs.length - 1
+      break
+    case 'ArrowRight':
+      event.preventDefault()
+      newIndex = index < props.tabs.length - 1 ? index + 1 : 0
+      break
+    case 'Home':
+      event.preventDefault()
+      newIndex = 0
+      break
+    case 'End':
+      event.preventDefault()
+      newIndex = props.tabs.length - 1
+      break
+    default:
+      return
+  }
+
+  selectTab(newIndex)
+  document.getElementById(`tab-${newIndex}`)?.focus()
+}
+</script>
+
+<style scoped>
+.dm-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.dm-tabs__header {
+  display: flex;
+  position: relative;
+  border-bottom: 2px solid var(--dm-gray-200);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.dm-tabs__header::-webkit-scrollbar {
+  display: none;
+}
+
+.dm-tabs__tab {
+  flex: 1;
+  min-width: max-content;
+  padding: var(--dm-space-3) var(--dm-space-4);
+  border: none;
+  background: transparent;
+  color: var(--dm-text-secondary);
+  font-size: var(--dm-text-base);
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--dm-transition);
+  position: relative;
+  white-space: nowrap;
+}
+
+.dm-tabs__tab:hover {
+  color: var(--dm-text-primary);
+}
+
+.dm-tabs__tab:focus-visible {
+  outline: var(--dm-focus-ring);
+  outline-offset: -2px;
+}
+
+.dm-tabs__tab--active {
+  color: var(--dm-primary);
+}
+
+.dm-tabs__indicator {
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: calc(100% / var(--tab-count, 1));
+  height: 2px;
+  background: var(--dm-primary);
+  transition: transform 0.3s ease;
+}
+
+.dm-tabs__panels {
+  padding: var(--dm-space-4);
+}
+
+.dm-tabs__panel {
+  display: none;
+}
+
+.dm-tabs__panel--active {
+  display: block;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-tabs__header {
+    border-bottom-color: var(--dm-gray-700);
+  }
+
+  .dm-tabs__tab {
+    color: var(--dm-gray-400);
+  }
+
+  .dm-tabs__tab:hover {
+    color: var(--dm-white);
+  }
+}
+</style>

package/src/components/DatametriaTextarea.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="dm-textarea">
+    <label v-if="label" :for="inputId" class="dm-textarea__label">
+      {{ label }}
+      <span v-if="required" class="dm-textarea__required">*</span>
+    </label>
+    <textarea
+      :id="inputId"
+      v-model="internalValue"
+      class="dm-textarea__input"
+      :class="{ 'dm-textarea__input--error': error }"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="required"
+      :rows="rows"
+      :maxlength="maxLength"
+      :aria-label="ariaLabel"
+      :aria-describedby="error ? `${inputId}-error` : undefined"
+      :aria-invalid="!!error"
+      @input="handleInput"
+    />
+    <div v-if="maxLength || error" class="dm-textarea__footer">
+      <p v-if="error" :id="`${inputId}-error`" class="dm-textarea__error">{{ error }}</p>
+      <span v-if="maxLength" class="dm-textarea__counter">
+        {{ internalValue?.length || 0 }}/{{ maxLength }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface Props {
+  modelValue?: string
+  label?: string
+  placeholder?: string
+  disabled?: boolean
+  required?: boolean
+  error?: string
+  rows?: number
+  maxLength?: number
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  disabled: false,
+  required: false,
+  rows: 4
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const inputId = `dm-textarea-${Math.random().toString(36).substr(2, 9)}`
+const internalValue = ref(props.modelValue)
+
+watch(() => props.modelValue, (newValue) => {
+  internalValue.value = newValue
+})
+
+const handleInput = () => {
+  emit('update:modelValue', internalValue.value || '')
+}
+</script>
+
+<style scoped>
+.dm-textarea {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dm-space-2);
+}
+
+.dm-textarea__label {
+  color: var(--dm-text-primary);
+  font-size: var(--dm-text-sm);
+  font-weight: 500;
+}
+
+.dm-textarea__required {
+  color: var(--dm-error);
+}
+
+.dm-textarea__input {
+  width: 100%;
+  padding: var(--dm-space-3);
+  border: 1px solid var(--dm-gray-300);
+  border-radius: var(--dm-radius);
+  font-size: var(--dm-text-base);
+  color: var(--dm-text-primary);
+  background: var(--dm-white);
+  transition: var(--dm-transition);
+  resize: vertical;
+  font-family: inherit;
+  line-height: 1.5;
+}
+
+.dm-textarea__input::placeholder {
+  color: var(--dm-gray-400);
+}
+
+.dm-textarea__input:hover:not(:disabled) {
+  border-color: var(--dm-gray-400);
+}
+
+.dm-textarea__input:focus {
+  outline: var(--dm-focus-ring);
+  outline-offset: 0;
+  border-color: var(--dm-primary);
+}
+
+.dm-textarea__input:disabled {
+  background: var(--dm-gray-100);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.dm-textarea__input--error {
+  border-color: var(--dm-error);
+}
+
+.dm-textarea__input--error:focus {
+  outline-color: var(--dm-error);
+}
+
+.dm-textarea__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--dm-space-2);
+}
+
+.dm-textarea__error {
+  color: var(--dm-error);
+  font-size: var(--dm-text-sm);
+  margin: 0;
+  flex: 1;
+}
+
+.dm-textarea__counter {
+  color: var(--dm-gray-500);
+  font-size: var(--dm-text-sm);
+  white-space: nowrap;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-textarea__input {
+    background: var(--dm-gray-800);
+    border-color: var(--dm-gray-600);
+    color: var(--dm-white);
+  }
+
+  .dm-textarea__input:disabled {
+    background: var(--dm-gray-900);
+  }
+}
+</style>