@datametria/vue-components 1.1.1

package/src/components/DatametriaDivider.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="dm-divider"
+    :class="[`dm-divider--${orientation}`, { 'dm-divider--dashed': dashed }]"
+    :role="orientation === 'horizontal' ? 'separator' : undefined"
+    :aria-orientation="orientation"
+  >
+    <span v-if="$slots.default || label" class="dm-divider__label">
+      <slot>{{ label }}</slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  orientation?: 'horizontal' | 'vertical'
+  dashed?: boolean
+  label?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  orientation: 'horizontal',
+  dashed: false
+})
+</script>
+
+<style scoped>
+.dm-divider {
+  display: flex;
+  align-items: center;
+  color: var(--dm-text-secondary);
+  font-size: var(--dm-text-sm);
+}
+
+.dm-divider--horizontal {
+  width: 100%;
+  margin: var(--dm-space-4) 0;
+}
+
+.dm-divider--horizontal::before,
+.dm-divider--horizontal::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--dm-gray-300);
+}
+
+.dm-divider--horizontal .dm-divider__label {
+  padding: 0 var(--dm-space-3);
+}
+
+.dm-divider--vertical {
+  height: 100%;
+  flex-direction: column;
+  margin: 0 var(--dm-space-4);
+}
+
+.dm-divider--vertical::before,
+.dm-divider--vertical::after {
+  content: '';
+  flex: 1;
+  width: 1px;
+  background: var(--dm-gray-300);
+}
+
+.dm-divider--vertical .dm-divider__label {
+  padding: var(--dm-space-3) 0;
+}
+
+.dm-divider--dashed::before,
+.dm-divider--dashed::after {
+  background: none;
+  border-top: 1px dashed var(--dm-gray-300);
+}
+
+.dm-divider--vertical.dm-divider--dashed::before,
+.dm-divider--vertical.dm-divider--dashed::after {
+  border-top: none;
+  border-left: 1px dashed var(--dm-gray-300);
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-divider--horizontal::before,
+  .dm-divider--horizontal::after,
+  .dm-divider--vertical::before,
+  .dm-divider--vertical::after {
+    background: var(--dm-gray-700);
+  }
+
+  .dm-divider--dashed::before,
+  .dm-divider--dashed::after {
+    border-color: var(--dm-gray-700);
+  }
+
+  .dm-divider--vertical.dm-divider--dashed::before,
+  .dm-divider--vertical.dm-divider--dashed::after {
+    border-color: var(--dm-gray-700);
+  }
+}
+</style>

package/src/components/DatametriaFileUpload.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="dm-file-upload">
+    <label v-if="label" class="dm-file-upload__label">
+      {{ label }}
+      <span v-if="required" class="dm-file-upload__required">*</span>
+    </label>
+    <div
+      class="dm-file-upload__dropzone"
+      :class="{ 'dm-file-upload--dragging': isDragOver, 'dm-file-upload__dropzone--dragover': isDragOver, 'dm-file-upload__dropzone--error': error }"
+      @dragover.prevent="handleDragOver"
+      @dragleave.prevent="handleDragLeave"
+      @drop.prevent="handleDrop"
+      @click="triggerFileInput"
+    >
+      <input
+        ref="fileInput"
+        type="file"
+        class="dm-file-upload__input"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="disabled"
+        :required="required"
+        @change="handleFileChange"
+      />
+      <div class="dm-file-upload__content">
+        <svg class="dm-file-upload__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        <p class="dm-file-upload__text">
+          <span class="dm-file-upload__text--primary">Clique para selecionar</span>
+          ou arraste arquivos aqui
+        </p>
+        <p v-if="accept" class="dm-file-upload__hint">{{ accept }}</p>
+      </div>
+    </div>
+    <div v-if="selectedFiles.length" class="dm-file-upload__files">
+      <div v-for="(file, index) in selectedFiles" :key="index" class="dm-file-upload__file">
+        <span class="dm-file-upload__filename">{{ file.name }}</span>
+        <span class="dm-file-upload__filesize">{{ formatFileSize(file.size) }}</span>
+        <button
+          type="button"
+          class="dm-file-upload__remove"
+          @click="removeFile(index)"
+          aria-label="Remover arquivo"
+        >×</button>
+      </div>
+    </div>
+    <p v-if="error" class="dm-file-upload__error">{{ error }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  modelValue?: File[]
+  label?: string
+  accept?: string
+  multiple?: boolean
+  disabled?: boolean
+  required?: boolean
+  error?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  multiple: false,
+  disabled: false,
+  required: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [files: File[]]
+}>()
+
+const fileInput = ref<HTMLInputElement>()
+const selectedFiles = ref<File[]>(props.modelValue)
+const isDragOver = ref(false)
+
+const triggerFileInput = () => {
+  if (!props.disabled) {
+    fileInput.value?.click()
+  }
+}
+
+const handleFileChange = (event: Event) => {
+  const files = Array.from((event.target as HTMLInputElement).files || [])
+  updateFiles(files)
+}
+
+const handleDragOver = () => {
+  if (!props.disabled) {
+    isDragOver.value = true
+  }
+}
+
+const handleDragLeave = () => {
+  isDragOver.value = false
+}
+
+const handleDrop = (event: DragEvent) => {
+  isDragOver.value = false
+  if (!props.disabled) {
+    const files = Array.from(event.dataTransfer?.files || [])
+    updateFiles(files)
+  }
+}
+
+const updateFiles = (files: File[]) => {
+  selectedFiles.value = props.multiple ? [...selectedFiles.value, ...files] : files
+  emit('update:modelValue', selectedFiles.value)
+}
+
+const removeFile = (index: number) => {
+  selectedFiles.value.splice(index, 1)
+  emit('update:modelValue', selectedFiles.value)
+}
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`
+}
+</script>
+
+<style scoped>
+.dm-file-upload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dm-space-2);
+}
+
+.dm-file-upload__label {
+  color: var(--dm-text-primary);
+  font-size: var(--dm-text-sm);
+  font-weight: 500;
+}
+
+.dm-file-upload__required {
+  color: var(--dm-error);
+}
+
+.dm-file-upload__dropzone {
+  border: 2px dashed var(--dm-gray-300);
+  border-radius: var(--dm-radius);
+  padding: var(--dm-space-6);
+  text-align: center;
+  cursor: pointer;
+  transition: var(--dm-transition);
+  background: var(--dm-white);
+}
+
+.dm-file-upload__dropzone:hover {
+  border-color: var(--dm-primary);
+  background: var(--dm-gray-50);
+}
+
+.dm-file-upload__dropzone--dragover {
+  border-color: var(--dm-primary);
+  background: var(--dm-primary-light, rgba(0, 114, 206, 0.1));
+}
+
+.dm-file-upload__dropzone--error {
+  border-color: var(--dm-error);
+}
+
+.dm-file-upload__input {
+  display: none;
+}
+
+.dm-file-upload__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--dm-space-2);
+}
+
+.dm-file-upload__icon {
+  width: 48px;
+  height: 48px;
+  color: var(--dm-gray-400);
+}
+
+.dm-file-upload__text {
+  color: var(--dm-text-secondary);
+  font-size: var(--dm-text-sm);
+  margin: 0;
+}
+
+.dm-file-upload__text--primary {
+  color: var(--dm-primary);
+  font-weight: 500;
+}
+
+.dm-file-upload__hint {
+  color: var(--dm-gray-500);
+  font-size: var(--dm-text-xs);
+  margin: 0;
+}
+
+.dm-file-upload__files {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dm-space-2);
+}
+
+.dm-file-upload__file {
+  display: flex;
+  align-items: center;
+  gap: var(--dm-space-2);
+  padding: var(--dm-space-2) var(--dm-space-3);
+  background: var(--dm-gray-50);
+  border-radius: var(--dm-radius);
+}
+
+.dm-file-upload__filename {
+  flex: 1;
+  font-size: var(--dm-text-sm);
+  color: var(--dm-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.dm-file-upload__filesize {
+  font-size: var(--dm-text-xs);
+  color: var(--dm-gray-500);
+}
+
+.dm-file-upload__remove {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  color: var(--dm-gray-500);
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  transition: var(--dm-transition);
+}
+
+.dm-file-upload__remove:hover {
+  color: var(--dm-error);
+}
+
+.dm-file-upload__error {
+  color: var(--dm-error);
+  font-size: var(--dm-text-sm);
+  margin: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-file-upload__dropzone {
+    background: var(--dm-gray-800);
+    border-color: var(--dm-gray-600);
+  }
+
+  .dm-file-upload__dropzone:hover {
+    background: var(--dm-gray-700);
+  }
+
+  .dm-file-upload__file {
+    background: var(--dm-gray-700);
+  }
+}
+</style>

package/src/components/DatametriaGrid.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="dm-grid"
+    :style="{
+      '--dm-grid-cols': cols,
+      '--dm-grid-gap': gap
+    }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  cols?: number | string
+  gap?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  cols: 12,
+  gap: 'var(--dm-space-4)'
+})
+</script>
+
+<style scoped>
+.dm-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--dm-grid-cols, 12), 1fr);
+  gap: var(--dm-grid-gap, var(--dm-space-4));
+}
+
+@media (max-width: 1024px) {
+  .dm-grid {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  }
+}
+
+@media (max-width: 640px) {
+  .dm-grid {
+    grid-template-columns: 1fr;
+    gap: var(--dm-space-3);
+  }
+}
+</style>

package/src/components/DatametriaInput.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="datametria-input">
+    <label v-if="label" :for="inputId" class="datametria-input__label">
+      {{ label }}
+      <span v-if="required" class="datametria-input__required">*</span>
+    </label>
+    
+    <input
+      :id="inputId"
+      :value="modelValue"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :required="required"
+      :class="inputClasses"
+      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+    />
+    
+    <p v-if="errorMessage" class="datametria-input__error">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  modelValue?: string | number
+  label?: string
+  placeholder?: string
+  errorMessage?: string
+  disabled?: boolean
+  required?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  disabled: false,
+  required: false
+})
+
+defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const inputId = computed(() => `input-${Math.random().toString(36).substr(2, 9)}`)
+
+const inputClasses = computed(() => [
+  'datametria-input__field',
+  {
+    'datametria-input__field--error': props.errorMessage,
+    'datametria-input__field--disabled': props.disabled
+  }
+])
+</script>
+
+<style scoped>
+.datametria-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.datametria-input__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.datametria-input__required {
+  color: #ef4444;
+}
+
+.datametria-input__field {
+  padding: 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 1rem;
+  transition: all 0.2s;
+}
+
+.datametria-input__field:focus {
+  outline: none;
+  border-color: #0072CE;
+  box-shadow: 0 0 0 3px rgba(0, 114, 206, 0.1);
+}
+
+.datametria-input__field--error {
+  border-color: #ef4444;
+}
+
+.datametria-input__field--disabled {
+  background: #f3f4f6;
+  cursor: not-allowed;
+}
+
+.datametria-input__error {
+  font-size: 0.875rem;
+  color: #ef4444;
+  margin: 0;
+}
+</style>

package/src/components/DatametriaModal.vue

@@ -0,0 +1,135 @@
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="modelValue" class="datametria-modal" @click.self="handleClose">
+        <div class="datametria-modal__content" :style="{ maxWidth: size }">
+          <div v-if="title || $slots.header" class="datametria-modal__header">
+            <slot name="header">
+              <h3 class="datametria-modal__title">{{ title }}</h3>
+            </slot>
+            <button
+              v-if="closable"
+              class="datametria-modal__close"
+              @click="handleClose"
+            >
+              ×
+            </button>
+          </div>
+          
+          <div class="datametria-modal__body">
+            <slot />
+          </div>
+          
+          <div v-if="$slots.footer" class="datametria-modal__footer">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue: boolean
+  title?: string
+  size?: string
+  closable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: '32rem',
+  closable: true
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  close: []
+}>()
+
+const handleClose = () => {
+  if (props.closable) {
+    emit('update:modelValue', false)
+    emit('close')
+  }
+}
+</script>
+
+<style scoped>
+.datametria-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  padding: 1rem;
+}
+
+.datametria-modal__content {
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-height: 90vh;
+  overflow: auto;
+}
+
+.datametria-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.datametria-modal__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.datametria-modal__close {
+  background: none;
+  border: none;
+  font-size: 2rem;
+  line-height: 1;
+  cursor: pointer;
+  color: #6b7280;
+  padding: 0;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  transition: all 0.2s;
+}
+
+.datametria-modal__close:hover {
+  background: #f3f4f6;
+  color: #111827;
+}
+
+.datametria-modal__body {
+  padding: 1.5rem;
+}
+
+.datametria-modal__footer {
+  padding: 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.3s;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+</style>