@datametria/vue-components 1.1.2 → 1.2.0

package/src/components/DatametriaButton.vue

@@ -1,157 +1,165 @@
-<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>
+<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'
+})
+
+// Validação em desenvolvimento
+if (process.env.NODE_ENV === 'development') {
+  const validVariants = Object.values(ButtonVariant)
+  if (!validVariants.includes(props.variant)) {
+    console.warn(`[DatametriaButton] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
+  }
+}
+
+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/DatametriaChip.vue

@@ -1,149 +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>
+<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'
+  closable?: boolean
+  clickable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  closable: false,
+  clickable: false
+})
+
+// Validação em desenvolvimento
+if (process.env.NODE_ENV === 'development') {
+  const validVariants = ['primary', 'secondary', 'success', 'warning', 'error']
+  if (!validVariants.includes(props.variant)) {
+    console.warn(`[DatametriaChip] Invalid variant "${props.variant}". Valid options: ${validVariants.join(', ')}`)
+  }
+}
+
+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--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;
+}
+
+
+</style>