@datametria/vue-components 2.2.0 → 2.3.0

package/src/components/DatametriaInput.vue

@@ -1,102 +1,265 @@
 <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 class="datametria-input" :class="inputWrapperClasses">
+    <div v-if="$slots.prepend" class="datametria-input__prepend">
+      <slot name="prepend" />
+    </div>
+
+    <div class="datametria-input__inner">
+      <span v-if="$slots.prefix || prefixIcon" class="datametria-input__prefix">
+        <slot name="prefix">
+          <span v-if="prefixIcon">{{ prefixIcon }}</span>
+        </slot>
+      </span>
+
+      <input
+        ref="inputRef"
+        v-model="inputValue"
+        :type="type"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :maxlength="maxlength"
+        :class="inputClasses"
+        @input="handleInput"
+        @change="handleChange"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+
+      <span v-if="showClear || $slots.suffix || suffixIcon" class="datametria-input__suffix">
+        <button
+          v-if="showClear"
+          class="datametria-input__clear"
+          @click="handleClear"
+          type="button"
+        >
+          ×
+        </button>
+        <slot name="suffix">
+          <span v-if="suffixIcon">{{ suffixIcon }}</span>
+        </slot>
+      </span>
+    </div>
+
+    <div v-if="$slots.append" class="datametria-input__append">
+      <slot name="append" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed, watch } from 'vue'
+
+/**
+ * DatametriaInput - Input de texto com validação e slots
+ * 
+ * @component
+ * @example
+ * <DatametriaInput v-model="value" placeholder="Digite algo" />
+ */
 
 interface Props {
-  modelValue?: string | number
-  label?: string
+  /** Valor do input */
+  modelValue: string | number
+  /** Tipo do input */
+  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url'
+  /** Placeholder */
   placeholder?: string
-  errorMessage?: string
+  /** Input desabilitado */
   disabled?: boolean
-  required?: boolean
+  /** Input somente leitura */
+  readonly?: boolean
+  /** Botão de limpar */
+  clearable?: boolean
+  /** Comprimento máximo */
+  maxlength?: number
+  /** Ícone prefixo */
+  prefixIcon?: string
+  /** Ícone sufixo */
+  suffixIcon?: string
+  /** Tamanho */
+  size?: 'small' | 'default' | 'large'
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  modelValue: '',
+  type: 'text',
+  placeholder: '',
   disabled: false,
-  required: false
+  readonly: false,
+  clearable: false,
+  size: 'default'
 })
 
-defineEmits<{
-  'update:modelValue': [value: string]
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number]
+  'input': [value: string | number]
+  'change': [value: string | number]
+  'focus': [event: FocusEvent]
+  'blur': [event: FocusEvent]
+  'clear': []
 }>()
 
-const inputId = computed(() => `input-${Math.random().toString(36).substr(2, 9)}`)
+const inputRef = ref<HTMLInputElement>()
+const isFocused = ref(false)
 
-const inputClasses = computed(() => [
-  'datametria-input__field',
-  {
-    'datametria-input__field--error': props.errorMessage,
-    'datametria-input__field--disabled': props.disabled
-  }
-])
+const inputValue = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+})
+
+const showClear = computed(() => {
+  return props.clearable && !props.disabled && !props.readonly && inputValue.value
+})
+
+const inputWrapperClasses = computed(() => ({
+  'datametria-input--disabled': props.disabled,
+  'datametria-input--focused': isFocused.value,
+  [`datametria-input--${props.size}`]: props.size !== 'default'
+}))
+
+const inputClasses = computed(() => 'datametria-input__field')
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emit('input', target.value)
+}
+
+const handleChange = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  emit('change', target.value)
+}
+
+const handleFocus = (event: FocusEvent) => {
+  isFocused.value = true
+  emit('focus', event)
+}
+
+const handleBlur = (event: FocusEvent) => {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+const handleClear = () => {
+  emit('update:modelValue', '')
+  emit('clear')
+  inputRef.value?.focus()
+}
+
+defineExpose({
+  focus: () => inputRef.value?.focus(),
+  blur: () => inputRef.value?.blur()
+})
 </script>
 
 <style scoped>
 .datametria-input {
-  display: flex;
-  flex-direction: column;
-  gap: var(--dm-spacing-2, 0.5rem);
+  display: inline-flex;
+  width: 100%;
+  font-size: 14px;
 }
 
-.datametria-input__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-input__inner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  background: var(--color-background, #ffffff);
+  border: 1px solid var(--color-border, #d1d5db);
+  border-radius: 6px;
+  transition: all 0.2s;
 }
 
-.datametria-input__required {
-  color: var(--dm-error, #ef4444);
+.datametria-input__inner:hover {
+  border-color: var(--color-primary, #3b82f6);
 }
 
-.datametria-input__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);
-  transition: all 0.2s;
+.datametria-input--focused .datametria-input__inner {
+  border-color: var(--color-primary, #3b82f6);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
-.datametria-input__field:focus {
-  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-input--disabled .datametria-input__inner {
+  background: var(--color-background-disabled, #f3f4f6);
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
-.datametria-input__field--error {
-  border-color: var(--dm-error, #ef4444);
+.datametria-input__field {
+  flex: 1;
+  width: 100%;
+  padding: 8px 12px;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--color-text-primary, #1f2937);
+  font-size: inherit;
 }
 
-.datametria-input__field--disabled {
-  background: var(--dm-neutral-100, #f3f4f6);
+.datametria-input__field:disabled {
   cursor: not-allowed;
 }
 
-.datametria-input__error {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-error, #ef4444);
-  margin: 0;
+.datametria-input__prefix,
+.datametria-input__suffix {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 8px;
+  color: var(--color-text-secondary, #6b7280);
+}
+
+.datametria-input__clear {
+  background: none;
+  border: none;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--color-text-secondary, #6b7280);
+  cursor: pointer;
+  padding: 0 4px;
+  transition: color 0.2s;
+}
+
+.datametria-input__clear:hover {
+  color: var(--color-text-primary, #1f2937);
+}
+
+.datametria-input__prepend,
+.datametria-input__append {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 12px;
+  background: var(--color-background-secondary, #f9fafb);
+  border: 1px solid var(--color-border, #d1d5db);
+  white-space: nowrap;
+}
+
+.datametria-input__prepend {
+  border-right: none;
+  border-radius: 6px 0 0 6px;
+}
+
+.datametria-input__append {
+  border-left: none;
+  border-radius: 0 6px 6px 0;
+}
+
+.datametria-input--small .datametria-input__field {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.datametria-input--large .datametria-input__field {
+  padding: 12px 16px;
+  font-size: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .datametria-input__inner {
+    background: var(--color-background, #1f2937);
+    border-color: var(--color-border, #374151);
+  }
+
+  .datametria-input__field {
+    color: var(--color-text-primary, #f9fafb);
+  }
 }
 </style>

package/src/components/DatametriaPagination.vue

@@ -0,0 +1,373 @@
+<template>
+  <div class="datametria-pagination" :class="classes">
+    <template v-for="item in layoutItems" :key="item">
+      <!-- Total -->
+      <span v-if="item === 'total'" class="datametria-pagination__total">
+        Total: {{ total }}
+      </span>
+
+      <!-- Sizes -->
+      <select
+        v-if="item === 'sizes'"
+        v-model="currentPageSize"
+        class="datametria-pagination__sizes"
+        :disabled="disabled"
+        @change="handleSizeChange"
+      >
+        <option v-for="size in pageSizes" :key="size" :value="size">
+          {{ size }} / página
+        </option>
+      </select>
+
+      <!-- Prev -->
+      <button
+        v-if="item === 'prev'"
+        class="datametria-pagination__btn"
+        :disabled="currentPage === 1 || disabled"
+        @click="handlePrev"
+      >
+        <span class="datametria-pagination__icon">‹</span>
+      </button>
+
+      <!-- Pager -->
+      <ul v-if="item === 'pager'" class="datametria-pagination__pager">
+        <li
+          v-for="page in pagerList"
+          :key="page"
+          class="datametria-pagination__number"
+          :class="{
+            'is-active': page === currentPage,
+            'is-disabled': disabled
+          }"
+          @click="handlePageClick(page)"
+        >
+          {{ page === '...' ? '•••' : page }}
+        </li>
+      </ul>
+
+      <!-- Next -->
+      <button
+        v-if="item === 'next'"
+        class="datametria-pagination__btn"
+        :disabled="currentPage === totalPages || disabled"
+        @click="handleNext"
+      >
+        <span class="datametria-pagination__icon">›</span>
+      </button>
+
+      <!-- Jumper -->
+      <span v-if="item === 'jumper'" class="datametria-pagination__jumper">
+        Ir para
+        <input
+          v-model.number="jumpPage"
+          type="number"
+          min="1"
+          :max="totalPages"
+          :disabled="disabled"
+          @keyup.enter="handleJump"
+        />
+      </span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+
+interface Props {
+  modelValue?: number
+  total?: number
+  pageSize?: number
+  pageSizes?: number[]
+  layout?: string
+  pagerCount?: number
+  disabled?: boolean
+  small?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 1,
+  total: 0,
+  pageSize: 10,
+  pageSizes: () => [10, 20, 30, 50, 100],
+  layout: 'prev, pager, next',
+  pagerCount: 7,
+  disabled: false,
+  small: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number]
+  'size-change': [size: number]
+  'current-change': [page: number]
+}>()
+
+const currentPage = ref(props.modelValue)
+const currentPageSize = ref(props.pageSize)
+const jumpPage = ref<number | ''>('')
+
+const totalPages = computed(() => Math.ceil(props.total / currentPageSize.value) || 1)
+
+const layoutItems = computed(() => {
+  return props.layout.split(',').map(item => item.trim())
+})
+
+const pagerList = computed(() => {
+  const pages: (number | string)[] = []
+  const count = props.pagerCount
+  const half = Math.floor(count / 2)
+
+  if (totalPages.value <= count) {
+    for (let i = 1; i <= totalPages.value; i++) {
+      pages.push(i)
+    }
+  } else {
+    if (currentPage.value <= half + 1) {
+      for (let i = 1; i <= count - 2; i++) {
+        pages.push(i)
+      }
+      pages.push('...')
+      pages.push(totalPages.value)
+    } else if (currentPage.value >= totalPages.value - half) {
+      pages.push(1)
+      pages.push('...')
+      for (let i = totalPages.value - count + 3; i <= totalPages.value; i++) {
+        pages.push(i)
+      }
+    } else {
+      pages.push(1)
+      pages.push('...')
+      for (let i = currentPage.value - half + 2; i <= currentPage.value + half - 2; i++) {
+        pages.push(i)
+      }
+      pages.push('...')
+      pages.push(totalPages.value)
+    }
+  }
+
+  return pages
+})
+
+const classes = computed(() => ({
+  'is-small': props.small,
+  'is-disabled': props.disabled
+}))
+
+watch(() => props.modelValue, (val) => {
+  currentPage.value = val
+})
+
+watch(() => props.pageSize, (val) => {
+  currentPageSize.value = val
+})
+
+const handlePrev = () => {
+  if (currentPage.value > 1) {
+    changePage(currentPage.value - 1)
+  }
+}
+
+const handleNext = () => {
+  if (currentPage.value < totalPages.value) {
+    changePage(currentPage.value + 1)
+  }
+}
+
+const handlePageClick = (page: number | string) => {
+  if (page === '...' || props.disabled) return
+  changePage(page as number)
+}
+
+const handleSizeChange = () => {
+  const newPage = Math.min(currentPage.value, Math.ceil(props.total / currentPageSize.value))
+  changePage(newPage)
+  emit('size-change', currentPageSize.value)
+}
+
+const handleJump = () => {
+  if (jumpPage.value && jumpPage.value >= 1 && jumpPage.value <= totalPages.value) {
+    changePage(jumpPage.value)
+    jumpPage.value = ''
+  }
+}
+
+const changePage = (page: number) => {
+  if (page === currentPage.value) return
+  currentPage.value = page
+  emit('update:modelValue', page)
+  emit('current-change', page)
+}
+</script>
+
+<style scoped>
+.datametria-pagination {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--datametria-text-primary, #303133);
+}
+
+.datametria-pagination.is-small {
+  font-size: 12px;
+}
+
+.datametria-pagination.is-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.datametria-pagination__total {
+  color: var(--datametria-text-secondary, #606266);
+}
+
+.datametria-pagination__sizes {
+  width: 120px;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  background: var(--datametria-bg-color, #ffffff);
+  color: var(--datametria-text-primary, #303133);
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.datametria-pagination__sizes:hover:not(:disabled) {
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-pagination__sizes:focus {
+  outline: none;
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-pagination__sizes:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.datametria-pagination__btn {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  background: var(--datametria-bg-color, #ffffff);
+  color: var(--datametria-text-primary, #303133);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.datametria-pagination__btn:hover:not(:disabled) {
+  color: var(--datametria-primary-color, #0072ce);
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-pagination__btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.datametria-pagination__icon {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.datametria-pagination__pager {
+  display: flex;
+  gap: 4px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.datametria-pagination__number {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  background: var(--datametria-bg-color, #ffffff);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.datametria-pagination__number:hover:not(.is-active):not(.is-disabled) {
+  color: var(--datametria-primary-color, #0072ce);
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-pagination__number.is-active {
+  color: #ffffff;
+  background: var(--datametria-primary-color, #0072ce);
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-pagination__number.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.datametria-pagination__jumper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--datametria-text-secondary, #606266);
+}
+
+.datametria-pagination__jumper input {
+  width: 60px;
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--datametria-border-color, #dcdfe6);
+  border-radius: 4px;
+  text-align: center;
+  font-size: 14px;
+}
+
+.datametria-pagination__jumper input:focus {
+  outline: none;
+  border-color: var(--datametria-primary-color, #0072ce);
+}
+
+.datametria-pagination__jumper input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .datametria-pagination {
+    color: var(--datametria-text-primary, #e5eaf3);
+  }
+
+  .datametria-pagination__total,
+  .datametria-pagination__jumper {
+    color: var(--datametria-text-secondary, #a3a6ad);
+  }
+
+  .datametria-pagination__btn,
+  .datametria-pagination__number {
+    border-color: var(--datametria-border-color, #4c4d4f);
+    background: var(--datametria-bg-color, #1d1e1f);
+    color: var(--datametria-text-primary, #e5eaf3);
+  }
+
+  .datametria-pagination__jumper input {
+    border-color: var(--datametria-border-color, #4c4d4f);
+    background: var(--datametria-bg-color, #1d1e1f);
+    color: var(--datametria-text-primary, #e5eaf3);
+  }
+
+  .datametria-pagination__sizes {
+    border-color: var(--datametria-border-color, #4c4d4f);
+    background: var(--datametria-bg-color, #1d1e1f);
+    color: var(--datametria-text-primary, #e5eaf3);
+  }
+}
+</style>