@datametria/vue-components 2.1.1 → 2.3.0

package/src/components/DatametriaRadio.vue

@@ -1,33 +1,35 @@
 <template>
-  <div class="dm-radio">
-    <label class="dm-radio__label">
+  <label
+    class="datametria-radio"
+    :class="{
+      'is-checked': isChecked,
+      'is-disabled': disabled
+    }"
+  >
+    <span class="datametria-radio__input">
       <input
+        ref="inputRef"
         type="radio"
-        class="dm-radio__input"
-        :value="value"
-        :checked="modelValue === value"
+        :checked="isChecked"
         :disabled="disabled"
-        :name="name"
-        :aria-label="ariaLabel"
-        :aria-describedby="error ? `${name}-error` : undefined"
+        :value="modelValue"
         @change="handleChange"
       />
-      <span class="dm-radio__checkmark"></span>
-      <span v-if="label" class="dm-radio__text">{{ label }}</span>
-    </label>
-    <p v-if="error" :id="`${name}-error`" class="dm-radio__error">{{ error }}</p>
-  </div>
+      <span class="datametria-radio__inner"></span>
+    </span>
+    <span v-if="label || $slots.default" class="datametria-radio__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </label>
 </template>
 
 <script setup lang="ts">
+import { ref, computed, inject } from 'vue'
+
 interface Props {
   modelValue?: string | number | boolean
-  value: string | number | boolean
   label?: string
-  name?: string
   disabled?: boolean
-  error?: string
-  ariaLabel?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -36,103 +38,112 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<{
   'update:modelValue': [value: string | number | boolean]
+  change: [value: string | number | boolean]
 }>()
 
+const inputRef = ref<HTMLInputElement>()
+const radioGroup = inject<any>('radioGroup', null)
+
+const isChecked = computed(() => {
+  if (radioGroup) {
+    return radioGroup.modelValue.value === props.modelValue
+  }
+  return false
+})
+
 const handleChange = () => {
-  if (!props.disabled) {
-    emit('update:modelValue', props.value)
+  if (props.disabled) return
+
+  if (radioGroup) {
+    radioGroup.updateValue(props.modelValue)
   }
+  
+  emit('update:modelValue', props.modelValue!)
+  emit('change', props.modelValue!)
 }
+
+defineExpose({
+  inputRef
+})
 </script>
 
 <style scoped>
-.dm-radio {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dm-spacing-1, 0.25rem);
-}
-
-.dm-radio__label {
+.datametria-radio {
   display: inline-flex;
   align-items: center;
-  gap: var(--dm-spacing-2, 0.5rem);
   cursor: pointer;
-  min-height: 44px;
-  padding: var(--dm-spacing-2, 0.5rem);
   user-select: none;
+  font-size: var(--dm-font-size-base, 14px);
+  color: var(--dm-text-primary, #333);
 }
 
-.dm-radio__label:has(.dm-radio__input:disabled) {
+.datametria-radio.is-disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
 
-.dm-radio__input {
+.datametria-radio__input {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+}
+
+.datametria-radio__input input {
   position: absolute;
   opacity: 0;
-  width: 0;
-  height: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  z-index: 1;
 }
 
-.dm-radio__checkmark {
-  position: relative;
-  width: 20px;
-  height: 20px;
-  border: 2px solid var(--dm-neutral-400, #9ca3af);
+.datametria-radio__input input:disabled {
+  cursor: not-allowed;
+}
+
+.datametria-radio__inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--dm-border-color, #dcdfe6);
   border-radius: 50%;
-  background: white;
+  background-color: var(--dm-bg-color, #fff);
   transition: all 0.2s;
-  flex-shrink: 0;
 }
 
-.dm-radio__input:checked + .dm-radio__checkmark {
-  border-color: var(--dm-primary, #0072CE);
-  background: var(--dm-primary, #0072CE);
+.datametria-radio.is-checked .datametria-radio__inner {
+  border-color: var(--dm-color-primary, #0072ce);
 }
 
-.dm-radio__input:checked + .dm-radio__checkmark::after {
+.datametria-radio.is-checked .datametria-radio__inner::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background: white;
-}
-
-.dm-radio__input:focus-visible + .dm-radio__checkmark {
-  outline: 2px solid var(--dm-primary, #0072CE);
-  outline-offset: 2px;
-}
-
-.dm-radio__input:disabled + .dm-radio__checkmark {
-  background: var(--dm-neutral-100, #f3f4f6);
-  border-color: var(--dm-neutral-300, #d1d5db);
-}
-
-.dm-radio__text {
-  color: var(--dm-neutral-900, #111827);
-  font-size: var(--dm-font-size-base, 1rem);
-  line-height: 1.5;
+  background-color: var(--dm-color-primary, #0072ce);
+  transform: translate(-50%, -50%);
 }
 
-.dm-radio__error {
-  color: var(--dm-error, #ef4444);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  margin: 0;
+.datametria-radio__label {
+  margin-left: 8px;
+  line-height: 1;
 }
 
+/* Dark mode */
 @media (prefers-color-scheme: dark) {
-  .dm-radio__checkmark {
-    background: var(--dm-neutral-800, #1f2937);
-    border-color: var(--dm-neutral-600, #4b5563);
+  .datametria-radio {
+    color: var(--dm-text-primary-dark, #e0e0e0);
   }
 
-  .dm-radio__input:disabled + .dm-radio__checkmark {
-    background: var(--dm-neutral-900, #111827);
-    border-color: var(--dm-neutral-700, #374151);
+  .datametria-radio__inner {
+    border-color: var(--dm-border-color-dark, #4a4a4a);
+    background-color: var(--dm-bg-color-dark, #1e1e1e);
   }
 }
 </style>

package/src/components/DatametriaRadioGroup.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="datametria-radio-group" role="radiogroup">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide, computed } from 'vue'
+
+interface Props {
+  modelValue?: string | number | boolean
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number | boolean]
+  change: [value: string | number | boolean]
+}>()
+
+const updateValue = (value: string | number | boolean) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+provide('radioGroup', {
+  modelValue: computed(() => props.modelValue),
+  disabled: computed(() => props.disabled),
+  updateValue
+})
+</script>
+
+<style scoped>
+.datametria-radio-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+</style>

package/src/components/DatametriaResult.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="datametria-result" :class="classes">
+    <div class="datametria-result__icon">
+      <slot name="icon">
+        <svg v-if="status === 'success'" viewBox="0 0 48 48" fill="none">
+          <path d="M24 4C12.96 4 4 12.96 4 24s8.96 20 20 20 20-8.96 20-20S35.04 4 24 4zm-4 30L10 24l2.83-2.83L20 28.34l15.17-15.17L38 16 20 34z" fill="currentColor"/>
+        </svg>
+        <svg v-else-if="status === 'warning'" viewBox="0 0 48 48" fill="none">
+          <path d="M2 42h44L24 4 2 42zm24-6h-4v-4h4v4zm0-8h-4v-8h4v8z" fill="currentColor"/>
+        </svg>
+        <svg v-else-if="status === 'error'" viewBox="0 0 48 48" fill="none">
+          <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm10 27.17L31.17 34 24 26.83 16.83 34 14 31.17 21.17 24 14 16.83 16.83 14 24 21.17 31.17 14 34 16.83 26.83 24 34 31.17z" fill="currentColor"/>
+        </svg>
+        <svg v-else viewBox="0 0 48 48" fill="none">
+          <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm2 30h-4v-4h4v4zm0-8h-4V14h4v12z" fill="currentColor"/>
+        </svg>
+      </slot>
+    </div>
+
+    <div class="datametria-result__title">
+      <slot name="title">
+        <p>{{ title }}</p>
+      </slot>
+    </div>
+
+    <div v-if="subtitle || $slots.subtitle" class="datametria-result__subtitle">
+      <slot name="subtitle">
+        <p>{{ subtitle }}</p>
+      </slot>
+    </div>
+
+    <div v-if="$slots.extra" class="datametria-result__extra">
+      <slot name="extra" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type ResultStatus = 'success' | 'warning' | 'error' | 'info'
+
+interface Props {
+  status?: ResultStatus
+  title?: string
+  subtitle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  status: 'info',
+  title: '',
+  subtitle: ''
+})
+
+const classes = computed(() => ({
+  [`datametria-result--${props.status}`]: true
+}))
+</script>
+
+<style scoped>
+.datametria-result {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 32px;
+  text-align: center;
+}
+
+.datametria-result__icon {
+  width: 72px;
+  height: 72px;
+  margin-bottom: 24px;
+}
+
+.datametria-result__icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+.datametria-result--success .datametria-result__icon {
+  color: var(--datametria-success-color, #67c23a);
+}
+
+.datametria-result--warning .datametria-result__icon {
+  color: var(--datametria-warning-color, #e6a23c);
+}
+
+.datametria-result--error .datametria-result__icon {
+  color: var(--datametria-error-color, #f56c6c);
+}
+
+.datametria-result--info .datametria-result__icon {
+  color: var(--datametria-info-color, #909399);
+}
+
+.datametria-result__title {
+  margin-bottom: 12px;
+  font-size: 20px;
+  font-weight: 500;
+  color: var(--datametria-text-primary, #303133);
+  line-height: 1.3;
+}
+
+.datametria-result__title p {
+  margin: 0;
+}
+
+.datametria-result__subtitle {
+  margin-bottom: 24px;
+  font-size: 14px;
+  color: var(--datametria-text-secondary, #606266);
+  line-height: 1.5;
+}
+
+.datametria-result__subtitle p {
+  margin: 0;
+}
+
+.datametria-result__extra {
+  margin-top: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .datametria-result__title {
+    color: var(--datametria-text-primary, #e5eaf3);
+  }
+
+  .datametria-result__subtitle {
+    color: var(--datametria-text-secondary, #a3a6ad);
+  }
+}
+</style>

package/src/components/DatametriaSelect.vue

@@ -1,112 +1,217 @@
 <template>
-  <div class="datametria-select">
-    <label v-if="label" :for="selectId" class="datametria-select__label">
-      {{ label }}
-      <span v-if="required" class="datametria-select__required">*</span>
-    </label>
+  <div class="datametria-select" :class="{ 'is-disabled': disabled }">
+    <div class="datametria-select__trigger" @click="toggleDropdown">
+      <span v-if="displayValue" class="datametria-select__value">{{ displayValue }}</span>
+      <span v-else class="datametria-select__placeholder">{{ placeholder }}</span>
+      <span class="datametria-select__arrow">▼</span>
+    </div>
     
-    <select
-      :id="selectId"
-      :value="modelValue"
-      :disabled="disabled"
-      :required="required"
-      :class="selectClasses"
-      @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
-    >
-      <option v-if="placeholder" value="" disabled>{{ placeholder }}</option>
-      <option v-for="option in options" :key="option.value" :value="option.value">
-        {{ option.label }}
-      </option>
-    </select>
-    
-    <p v-if="errorMessage" class="datametria-select__error">{{ errorMessage }}</p>
+    <Teleport to="body">
+      <div v-if="isOpen" class="datametria-select__dropdown" :style="dropdownStyle">
+        <input
+          v-if="filterable"
+          v-model="filterText"
+          class="datametria-select__filter"
+          placeholder="Buscar..."
+          @click.stop
+        />
+        <div class="datametria-select__options">
+          <div
+            v-for="option in filteredOptions"
+            :key="option.value"
+            class="datametria-select__option"
+            :class="{ 'is-selected': isSelected(option.value) }"
+            @click="handleSelect(option)"
+          >
+            {{ option.label }}
+          </div>
+          <div v-if="filteredOptions.length === 0" class="datametria-select__empty">
+            Nenhum resultado
+          </div>
+        </div>
+      </div>
+    </Teleport>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
 
-interface Option {
-  value: string | number
+interface SelectOption {
   label: string
+  value: any
+  disabled?: boolean
 }
 
 interface Props {
-  modelValue?: string | number
-  options: Option[]
-  label?: string
+  modelValue: any | any[]
+  options: SelectOption[]
   placeholder?: string
-  errorMessage?: string
   disabled?: boolean
-  required?: boolean
+  clearable?: boolean
+  filterable?: boolean
+  multiple?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
+  placeholder: 'Selecione',
   disabled: false,
-  required: false
+  clearable: false,
+  filterable: false,
+  multiple: false
 })
 
-defineEmits<{
-  'update:modelValue': [value: string]
+const emit = defineEmits<{
+  'update:modelValue': [value: any]
+  'change': [value: any]
 }>()
 
-const selectId = computed(() => `select-${Math.random().toString(36).substr(2, 9)}`)
+const isOpen = ref(false)
+const filterText = ref('')
+const dropdownStyle = ref({})
+
+const displayValue = computed(() => {
+  if (props.multiple && Array.isArray(props.modelValue)) {
+    const labels = props.modelValue.map(v => 
+      props.options.find(o => o.value === v)?.label
+    ).filter(Boolean)
+    return labels.join(', ')
+  }
+  return props.options.find(o => o.value === props.modelValue)?.label || ''
+})
+
+const filteredOptions = computed(() => {
+  if (!props.filterable || !filterText.value) return props.options
+  return props.options.filter(o => 
+    o.label.toLowerCase().includes(filterText.value.toLowerCase())
+  )
+})
+
+const isSelected = (value: any) => {
+  if (props.multiple && Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(value)
+  }
+  return props.modelValue === value
+}
 
-const selectClasses = computed(() => [
-  'datametria-select__field',
-  {
-    'datametria-select__field--error': props.errorMessage,
-    'datametria-select__field--disabled': props.disabled
+const toggleDropdown = () => {
+  if (!props.disabled) {
+    isOpen.value = !isOpen.value
   }
-])
+}
+
+const handleSelect = (option: SelectOption) => {
+  if (props.multiple) {
+    const current = Array.isArray(props.modelValue) ? [...props.modelValue] : []
+    const index = current.indexOf(option.value)
+    if (index > -1) {
+      current.splice(index, 1)
+    } else {
+      current.push(option.value)
+    }
+    emit('update:modelValue', current)
+    emit('change', current)
+  } else {
+    emit('update:modelValue', option.value)
+    emit('change', option.value)
+    isOpen.value = false
+  }
+}
+
+const handleClickOutside = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+  if (!target.closest('.datametria-select')) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
 </script>
 
 <style scoped>
 .datametria-select {
+  position: relative;
+  width: 100%;
+}
+
+.datametria-select__trigger {
   display: flex;
-  flex-direction: column;
-  gap: var(--dm-spacing-2, 0.5rem);
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border: 1px solid var(--color-border, #d1d5db);
+  border-radius: 6px;
+  background: var(--color-background, #fff);
+  cursor: pointer;
+  transition: all 0.2s;
 }
 
-.datametria-select__label {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  font-weight: var(--dm-font-weight-medium, 500);
-  color: var(--dm-neutral-700, #374151);
+.datametria-select__trigger:hover {
+  border-color: var(--color-primary, #3b82f6);
 }
 
-.datametria-select__required {
-  color: var(--dm-error, #ef4444);
+.is-disabled .datametria-select__trigger {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
-.datametria-select__field {
-  padding: var(--dm-spacing-3, 0.75rem);
-  border: 1px solid var(--dm-neutral-300, #d1d5db);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  font-size: var(--dm-font-size-base, 1rem);
-  background: white;
-  cursor: pointer;
-  transition: all 0.2s;
+.datametria-select__placeholder {
+  color: var(--color-text-secondary, #9ca3af);
 }
 
-.datametria-select__field:focus {
+.datametria-select__arrow {
+  font-size: 12px;
+  transition: transform 0.2s;
+}
+
+.datametria-select__dropdown {
+  position: fixed;
+  z-index: 2000;
+  background: var(--color-background, #fff);
+  border: 1px solid var(--color-border, #d1d5db);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  max-height: 300px;
+  overflow: hidden;
+}
+
+.datametria-select__filter {
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  border-bottom: 1px solid var(--color-border, #d1d5db);
   outline: none;
-  border-color: var(--dm-primary, #0072CE);
-  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary, #0072CE) 10%, transparent);
 }
 
-.datametria-select__field--error {
-  border-color: var(--dm-error, #ef4444);
+.datametria-select__options {
+  max-height: 250px;
+  overflow-y: auto;
 }
 
-.datametria-select__field--disabled {
-  background: var(--dm-neutral-100, #f3f4f6);
-  cursor: not-allowed;
+.datametria-select__option {
+  padding: 8px 12px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.datametria-select__option:hover {
+  background: var(--color-background-hover, #f3f4f6);
+}
+
+.datametria-select__option.is-selected {
+  background: var(--color-primary-light, #dbeafe);
+  color: var(--color-primary, #3b82f6);
 }
 
-.datametria-select__error {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-error, #ef4444);
-  margin: 0;
+.datametria-select__empty {
+  padding: 16px;
+  text-align: center;
+  color: var(--color-text-secondary, #9ca3af);
 }
 </style>