@datametria/vue-components 1.1.1

package/src/components/DatametriaButton.vue

@@ -0,0 +1,157 @@
+<template>
+  <button
+    :class="buttonClasses"
+    :disabled="disabled || loading"
+    :type="type"
+    :aria-busy="loading"
+    :aria-disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <span v-if="loading" class="spinner" role="status" aria-label="Carregando"></span>
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ButtonVariant, ButtonSize } from '../types'
+
+interface Props {
+  variant?: ButtonVariant
+  size?: ButtonSize
+  disabled?: boolean
+  loading?: boolean
+  fullWidth?: boolean
+  type?: 'button' | 'submit' | 'reset'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: ButtonVariant.PRIMARY,
+  size: ButtonSize.MD,
+  disabled: false,
+  loading: false,
+  fullWidth: false,
+  type: 'button'
+})
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const buttonClasses = computed(() => {
+  return [
+    'datametria-button',
+    `datametria-button--${props.variant}`,
+    `datametria-button--${props.size}`,
+    {
+      'datametria-button--full-width': props.fullWidth,
+      'datametria-button--loading': props.loading,
+      'datametria-button--disabled': props.disabled
+    }
+  ]
+})
+</script>
+
+<style scoped>
+.datametria-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  border-radius: var(--dm-radius);
+  transition: var(--dm-transition);
+  cursor: pointer;
+  border: 1px solid transparent;
+  font-family: var(--dm-font-sans, -apple-system, sans-serif);
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.datametria-button--primary {
+  background: var(--dm-primary);
+  color: white;
+}
+
+.datametria-button--primary:hover:not(:disabled) {
+  background: #005ba3;
+}
+
+.datametria-button--primary:focus-visible {
+  outline: none;
+  box-shadow: var(--dm-focus-ring);
+}
+
+.datametria-button--secondary {
+  background: var(--dm-secondary);
+  color: white;
+}
+
+.datametria-button--secondary:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(75, 0, 120, 0.1);
+}
+
+.datametria-button--outline {
+  background: transparent;
+  border-color: var(--dm-primary);
+  color: var(--dm-primary);
+}
+
+.datametria-button--outline:focus-visible {
+  outline: none;
+  box-shadow: var(--dm-focus-ring);
+}
+
+.datametria-button--ghost {
+  background: transparent;
+  color: #0072CE;
+}
+
+.datametria-button--sm {
+  padding: var(--dm-space-2) var(--dm-space-4);
+  font-size: var(--dm-text-sm);
+  min-height: 2rem;
+}
+
+.datametria-button--md {
+  padding: var(--dm-space-3) calc(var(--dm-space-4) * 1.5);
+  font-size: var(--dm-text-base);
+  min-height: 2.5rem;
+}
+
+.datametria-button--lg {
+  padding: var(--dm-space-4) calc(var(--dm-space-4) * 2);
+  font-size: var(--dm-text-lg);
+  min-height: 3rem;
+}
+
+@media (max-width: 640px) {
+  .datametria-button--sm { min-height: 2.25rem; }
+  .datametria-button--md { min-height: 2.75rem; }
+  .datametria-button--lg { min-height: 3.25rem; }
+}
+
+.datametria-button--full-width {
+  width: 100%;
+}
+
+.datametria-button--disabled,
+.datametria-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  margin-right: 0.5rem;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>

package/src/components/DatametriaCard.vue

@@ -0,0 +1,72 @@
+<template>
+  <div :class="cardClasses">
+    <div v-if="title || $slots.header" class="datametria-card__header">
+      <slot name="header">
+        <h3 class="datametria-card__title">{{ title }}</h3>
+      </slot>
+    </div>
+    
+    <div class="datametria-card__content">
+      <slot />
+    </div>
+    
+    <div v-if="$slots.footer" class="datametria-card__footer">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  title?: string
+  padding?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  padding: true
+})
+
+const cardClasses = computed(() => [
+  'datametria-card',
+  {
+    'datametria-card--no-padding': !props.padding
+  }
+])
+</script>
+
+<style scoped>
+.datametria-card {
+  background: white;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+.datametria-card__header {
+  padding: 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.datametria-card__title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #111827;
+}
+
+.datametria-card__content {
+  padding: 1.5rem;
+}
+
+.datametria-card--no-padding .datametria-card__content {
+  padding: 0;
+}
+
+.datametria-card__footer {
+  padding: 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  background: #f9fafb;
+}
+</style>

package/src/components/DatametriaCheckbox.vue

@@ -0,0 +1,82 @@
+<template>
+  <label class="datametria-checkbox">
+    <input
+      type="checkbox"
+      :checked="modelValue"
+      :disabled="disabled"
+      class="datametria-checkbox__input"
+      @change="$emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+    />
+    <span class="datametria-checkbox__checkmark"></span>
+    <span v-if="label" class="datametria-checkbox__label">{{ label }}</span>
+  </label>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue?: boolean
+  label?: string
+  disabled?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  disabled: false
+})
+
+defineEmits<{
+  'update:modelValue': [value: boolean]
+}>()
+</script>
+
+<style scoped>
+.datametria-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.datametria-checkbox__input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.datametria-checkbox__checkmark {
+  position: relative;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 2px solid #d1d5db;
+  border-radius: 0.25rem;
+  transition: all 0.2s;
+}
+
+.datametria-checkbox__input:checked ~ .datametria-checkbox__checkmark {
+  background: #0072CE;
+  border-color: #0072CE;
+}
+
+.datametria-checkbox__input:checked ~ .datametria-checkbox__checkmark::after {
+  content: '';
+  position: absolute;
+  left: 0.375rem;
+  top: 0.125rem;
+  width: 0.375rem;
+  height: 0.625rem;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.datametria-checkbox__input:disabled ~ .datametria-checkbox__checkmark {
+  background: #f3f4f6;
+  cursor: not-allowed;
+}
+
+.datametria-checkbox__label {
+  font-size: 0.875rem;
+  color: #374151;
+}
+</style>

package/src/components/DatametriaChip.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    class="dm-chip"
+    :class="[`dm-chip--${variant}`, { 'dm-chip--clickable': clickable }]"
+    :role="clickable ? 'button' : undefined"
+    :tabindex="clickable ? 0 : undefined"
+    @click="handleClick"
+    @keydown.enter="handleClick"
+    @keydown.space.prevent="handleClick"
+  >
+    <span v-if="$slots.icon" class="dm-chip__icon">
+      <slot name="icon"></slot>
+    </span>
+    <span class="dm-chip__label">
+      <slot>{{ label }}</slot>
+    </span>
+    <button
+      v-if="closable"
+      class="dm-chip__close"
+      @click.stop="handleClose"
+      aria-label="Remover"
+      type="button"
+    >×</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  label?: string
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'default'
+  closable?: boolean
+  clickable?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  variant: 'default',
+  closable: false,
+  clickable: false
+})
+
+const emit = defineEmits<{
+  click: []
+  close: []
+}>()
+
+const handleClick = () => {
+  emit('click')
+}
+
+const handleClose = () => {
+  emit('close')
+}
+</script>
+
+<style scoped>
+.dm-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dm-space-2);
+  padding: var(--dm-space-2) var(--dm-space-3);
+  border-radius: 16px;
+  font-size: var(--dm-text-sm);
+  font-weight: 500;
+  user-select: none;
+  transition: var(--dm-transition);
+}
+
+.dm-chip--clickable {
+  cursor: pointer;
+}
+
+.dm-chip--clickable:hover {
+  opacity: 0.8;
+}
+
+.dm-chip--clickable:focus-visible {
+  outline: var(--dm-focus-ring);
+  outline-offset: 2px;
+}
+
+.dm-chip--default {
+  background: var(--dm-gray-200);
+  color: var(--dm-gray-900);
+}
+
+.dm-chip--primary {
+  background: var(--dm-primary-light, rgba(0, 114, 206, 0.1));
+  color: var(--dm-primary);
+}
+
+.dm-chip--secondary {
+  background: var(--dm-secondary-light, rgba(75, 0, 120, 0.1));
+  color: var(--dm-secondary);
+}
+
+.dm-chip--success {
+  background: var(--dm-success-light, rgba(34, 197, 94, 0.1));
+  color: var(--dm-success);
+}
+
+.dm-chip--warning {
+  background: var(--dm-warning-light, rgba(251, 191, 36, 0.2));
+  color: var(--dm-warning-dark, #92400e);
+}
+
+.dm-chip--error {
+  background: var(--dm-error-light, rgba(239, 68, 68, 0.1));
+  color: var(--dm-error);
+}
+
+.dm-chip__icon {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+}
+
+.dm-chip__label {
+  line-height: 1.5;
+}
+
+.dm-chip__close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: var(--dm-transition);
+  padding: 0;
+  margin: 0;
+}
+
+.dm-chip__close:hover {
+  opacity: 1;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-chip--default {
+    background: var(--dm-gray-700);
+    color: var(--dm-white);
+  }
+}
+</style>

package/src/components/DatametriaContainer.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="dm-container"
+    :class="[`dm-container--${size}`, { 'dm-container--fluid': fluid }]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  fluid?: boolean
+}
+
+withDefaults(defineProps<Props>(), {
+  size: 'lg',
+  fluid: false
+})
+</script>
+
+<style scoped>
+.dm-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: var(--dm-space-4);
+  padding-right: var(--dm-space-4);
+}
+
+.dm-container--sm {
+  max-width: 640px;
+}
+
+.dm-container--md {
+  max-width: 768px;
+}
+
+.dm-container--lg {
+  max-width: 1024px;
+}
+
+.dm-container--xl {
+  max-width: 1280px;
+}
+
+.dm-container--fluid {
+  max-width: 100%;
+}
+
+@media (max-width: 640px) {
+  .dm-container {
+    padding-left: var(--dm-space-3);
+    padding-right: var(--dm-space-3);
+  }
+}
+</style>

package/src/components/DatametriaDatePicker.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="dm-datepicker">
+    <label v-if="label" :for="inputId" class="dm-datepicker__label">
+      {{ label }}
+      <span v-if="required" class="dm-datepicker__required">*</span>
+    </label>
+    <div class="dm-datepicker__wrapper">
+      <input
+        :id="inputId"
+        type="date"
+        v-model="internalValue"
+        class="dm-datepicker__input"
+        :class="{ 'dm-datepicker__input--error': error }"
+        :disabled="disabled"
+        :required="required"
+        :min="min"
+        :max="max"
+        :aria-label="ariaLabel"
+        :aria-describedby="error ? `${inputId}-error` : undefined"
+        :aria-invalid="!!error"
+        @change="handleChange"
+      />
+    </div>
+    <p v-if="error" :id="`${inputId}-error`" class="dm-datepicker__error">{{ error }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface Props {
+  modelValue?: string
+  label?: string
+  disabled?: boolean
+  required?: boolean
+  error?: string
+  min?: string
+  max?: string
+  ariaLabel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  disabled: false,
+  required: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const inputId = `dm-datepicker-${Math.random().toString(36).substr(2, 9)}`
+const internalValue = ref(props.modelValue)
+
+watch(() => props.modelValue, (newValue) => {
+  internalValue.value = newValue
+})
+
+const handleChange = () => {
+  emit('update:modelValue', internalValue.value)
+}
+</script>
+
+<style scoped>
+.dm-datepicker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dm-space-2);
+}
+
+.dm-datepicker__label {
+  color: var(--dm-text-primary);
+  font-size: var(--dm-text-sm);
+  font-weight: 500;
+}
+
+.dm-datepicker__required {
+  color: var(--dm-error);
+}
+
+.dm-datepicker__wrapper {
+  position: relative;
+}
+
+.dm-datepicker__input {
+  width: 100%;
+  min-height: 44px;
+  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);
+  font-family: inherit;
+}
+
+.dm-datepicker__input:hover:not(:disabled) {
+  border-color: var(--dm-gray-400);
+}
+
+.dm-datepicker__input:focus {
+  outline: var(--dm-focus-ring);
+  outline-offset: 0;
+  border-color: var(--dm-primary);
+}
+
+.dm-datepicker__input:disabled {
+  background: var(--dm-gray-100);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.dm-datepicker__input--error {
+  border-color: var(--dm-error);
+}
+
+.dm-datepicker__input--error:focus {
+  outline-color: var(--dm-error);
+}
+
+.dm-datepicker__error {
+  color: var(--dm-error);
+  font-size: var(--dm-text-sm);
+  margin: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  .dm-datepicker__input {
+    background: var(--dm-gray-800);
+    border-color: var(--dm-gray-600);
+    color: var(--dm-white);
+    color-scheme: dark;
+  }
+
+  .dm-datepicker__input:disabled {
+    background: var(--dm-gray-900);
+  }
+}
+</style>