@datametria/vue-components 2.2.0 → 2.3.0

package/src/components/DatametriaEmpty.vue

@@ -0,0 +1,153 @@
+<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;
+  }
+
+  .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>

package/src/components/DatametriaForm.vue

@@ -0,0 +1,160 @@
+<template>
+  <form
+    class="datametria-form"
+    :class="{
+      [`datametria-form--label-${labelPosition}`]: labelPosition,
+      'datametria-form--inline': inline
+    }"
+    @submit.prevent="handleSubmit"
+  >
+    <slot></slot>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { provide, reactive, ref } from 'vue'
+
+interface Props {
+  model?: Record<string, any>
+  rules?: Record<string, any>
+  labelWidth?: string
+  labelPosition?: 'left' | 'right' | 'top'
+  inline?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  model: () => ({}),
+  rules: () => ({}),
+  labelPosition: 'right',
+  inline: false
+})
+
+const emit = defineEmits<{
+  validate: [valid: boolean, errors: Record<string, string[]>]
+  submit: [model: Record<string, any>]
+}>()
+
+const fields = reactive<Map<string, any>>(new Map())
+const errors = ref<Record<string, string[]>>({})
+
+const registerField = (field: any) => {
+  fields.set(field.prop, field)
+}
+
+const unregisterField = (prop: string) => {
+  fields.delete(prop)
+}
+
+const validate = async (): Promise<boolean> => {
+  const validationPromises: Promise<boolean>[] = []
+  const newErrors: Record<string, string[]> = {}
+
+  fields.forEach((field) => {
+    validationPromises.push(
+      field.validate().then((valid: boolean) => {
+        if (!valid && field.errorMessage) {
+          newErrors[field.prop] = [field.errorMessage]
+        }
+        return valid
+      })
+    )
+  })
+
+  const results = await Promise.all(validationPromises)
+  const isValid = results.every((result) => result)
+  
+  errors.value = newErrors
+  emit('validate', isValid, newErrors)
+  
+  return isValid
+}
+
+const validateField = async (prop: string): Promise<boolean> => {
+  const field = fields.get(prop)
+  if (!field) return true
+  
+  const valid = await field.validate()
+  if (!valid && field.errorMessage) {
+    errors.value[prop] = [field.errorMessage]
+  } else {
+    delete errors.value[prop]
+  }
+  
+  return valid
+}
+
+const resetFields = () => {
+  fields.forEach((field) => {
+    field.reset()
+  })
+  errors.value = {}
+}
+
+const clearValidate = (props?: string | string[]) => {
+  if (!props) {
+    errors.value = {}
+    fields.forEach((field) => field.clearValidate())
+    return
+  }
+
+  const propsArray = Array.isArray(props) ? props : [props]
+  propsArray.forEach((prop) => {
+    delete errors.value[prop]
+    const field = fields.get(prop)
+    if (field) field.clearValidate()
+  })
+}
+
+const handleSubmit = async () => {
+  const valid = await validate()
+  if (valid) {
+    emit('submit', props.model)
+  }
+}
+
+provide('datametriaForm', {
+  model: props.model,
+  rules: props.rules,
+  labelWidth: props.labelWidth,
+  labelPosition: props.labelPosition,
+  registerField,
+  unregisterField,
+  validateField
+})
+
+defineExpose({
+  validate,
+  validateField,
+  resetFields,
+  clearValidate
+})
+</script>
+
+<style scoped>
+.datametria-form {
+  font-size: var(--dm-font-size-base, 14px);
+}
+
+.datametria-form--inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.datametria-form--label-left :deep(.datametria-form-item__label) {
+  text-align: left;
+}
+
+.datametria-form--label-right :deep(.datametria-form-item__label) {
+  text-align: right;
+}
+
+.datametria-form--label-top :deep(.datametria-form-item) {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.datametria-form--label-top :deep(.datametria-form-item__label) {
+  margin-bottom: 8px;
+}
+</style>

package/src/components/DatametriaFormItem.vue

@@ -0,0 +1,181 @@
+<template>
+  <div
+    class="datametria-form-item"
+    :class="{
+      'is-error': errorMessage,
+      'is-required': isRequired
+    }"
+  >
+    <label
+      v-if="label"
+      class="datametria-form-item__label"
+      :style="labelStyle"
+    >
+      {{ label }}
+    </label>
+    <div class="datametria-form-item__content">
+      <slot></slot>
+      <transition name="fade">
+        <div v-if="errorMessage" class="datametria-form-item__error">
+          {{ errorMessage }}
+        </div>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, inject, onMounted, onBeforeUnmount, watch } from 'vue'
+import { useValidation } from '../composables/useValidation'
+
+interface Props {
+  prop?: string
+  label?: string
+  rules?: any[]
+  required?: boolean
+}
+
+const props = defineProps<Props>()
+
+const form = inject<any>('datametriaForm', null)
+const errorMessage = ref('')
+
+const isRequired = computed(() => {
+  if (props.required) return true
+  if (!props.rules) return false
+  return props.rules.some((rule: any) => rule.required)
+})
+
+const labelStyle = computed(() => {
+  if (!form?.labelWidth) return {}
+  return { width: form.labelWidth }
+})
+
+const modelValue = computed(() => {
+  if (!form?.model || !props.prop) return undefined
+  return form.model[props.prop]
+})
+
+const validate = async (): Promise<boolean> => {
+  if (!props.prop || !props.rules) return true
+
+  const validation = useValidation()
+  const errors: string[] = []
+  
+  for (const rule of props.rules) {
+    if (rule.required && !validation.required(modelValue.value)) {
+      errors.push(rule.message || 'Campo obrigatório')
+      break
+    }
+  }
+
+  if (errors.length > 0) {
+    errorMessage.value = errors[0]
+    return false
+  }
+
+  errorMessage.value = ''
+  return true
+}
+
+const reset = () => {
+  errorMessage.value = ''
+  if (form?.model && props.prop) {
+    form.model[props.prop] = undefined
+  }
+}
+
+const clearValidate = () => {
+  errorMessage.value = ''
+}
+
+watch(modelValue, () => {
+  if (errorMessage.value) {
+    validate()
+  }
+})
+
+onMounted(() => {
+  if (form && props.prop) {
+    form.registerField({
+      prop: props.prop,
+      validate,
+      reset,
+      clearValidate,
+      get errorMessage() {
+        return errorMessage.value
+      }
+    })
+  }
+})
+
+onBeforeUnmount(() => {
+  if (form && props.prop) {
+    form.unregisterField(props.prop)
+  }
+})
+
+defineExpose({
+  validate,
+  reset,
+  clearValidate,
+  errorMessage
+})
+</script>
+
+<style scoped>
+.datametria-form-item {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 18px;
+}
+
+.datametria-form-item__label {
+  flex-shrink: 0;
+  padding-right: 12px;
+  line-height: 32px;
+  color: var(--dm-text-primary, #333);
+  font-size: var(--dm-font-size-base, 14px);
+}
+
+.datametria-form-item.is-required .datametria-form-item__label::before {
+  content: '*';
+  color: var(--dm-color-danger, #f56c6c);
+  margin-right: 4px;
+}
+
+.datametria-form-item__content {
+  flex: 1;
+  position: relative;
+}
+
+.datametria-form-item__error {
+  color: var(--dm-color-danger, #f56c6c);
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+}
+
+.datametria-form-item.is-error :deep(input),
+.datametria-form-item.is-error :deep(textarea),
+.datametria-form-item.is-error :deep(select) {
+  border-color: var(--dm-color-danger, #f56c6c);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .datametria-form-item__label {
+    color: var(--dm-text-primary-dark, #e0e0e0);
+  }
+}
+</style>