@datametria/vue-components 2.1.1 → 2.3.0

package/src/components/DatametriaBreadcrumb.vue

@@ -1,32 +1,27 @@
 <template>
-  <nav class="dm-breadcrumb" aria-label="Breadcrumb">
-    <ol class="dm-breadcrumb__list">
+  <nav class="datametria-breadcrumb" aria-label="Breadcrumb">
+    <ol class="datametria-breadcrumb__list">
       <li
         v-for="(item, index) in items"
         :key="index"
-        class="dm-breadcrumb__item"
+        class="datametria-breadcrumb__item"
+        :class="{ 'is-last': index === items.length - 1 }"
       >
-        <a
-          v-if="item.href && index < items.length - 1"
-          :href="item.href"
-          class="dm-breadcrumb__link"
-          @click="handleClick($event, item, index)"
-        >
-          {{ item.label }}
-        </a>
-        <span
-          v-else
-          class="dm-breadcrumb__current"
+        <component
+          :is="item.to ? 'router-link' : 'span'"
+          :to="item.to"
+          class="datametria-breadcrumb__link"
+          :class="{ 'is-active': index === items.length - 1 }"
           :aria-current="index === items.length - 1 ? 'page' : undefined"
         >
           {{ item.label }}
-        </span>
+        </component>
         <span
           v-if="index < items.length - 1"
-          class="dm-breadcrumb__separator"
+          class="datametria-breadcrumb__separator"
           aria-hidden="true"
         >
-          {{ separator }}
+          <slot name="separator">{{ separator }}</slot>
         </span>
       </li>
     </ol>
@@ -34,111 +29,102 @@
 </template>
 
 <script setup lang="ts">
-interface BreadcrumbItem {
+import { withDefaults } from 'vue'
+
+/**
+ * DatametriaBreadcrumb - Componente de navegação breadcrumb
+ * 
+ * @component
+ * @example
+ * <DatametriaBreadcrumb 
+ *   :items="[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'Produtos', to: '/produtos' },
+ *     { label: 'Detalhes' }
+ *   ]"
+ *   separator="/"
+ * />
+ */
+
+export interface BreadcrumbItem {
+  /** Label do item */
   label: string
-  href?: string
+  /** Rota do Vue Router (opcional) */
+  to?: string | { name: string; params?: Record<string, any> }
 }
 
 interface Props {
+  /** Array de itens do breadcrumb */
   items: BreadcrumbItem[]
+  /** Separador entre itens */
   separator?: string
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   separator: '/'
 })
-
-const emit = defineEmits<{
-  click: [item: BreadcrumbItem, index: number]
-}>()
-
-const handleClick = (_event: Event, item: BreadcrumbItem, index: number) => {
-  emit('click', item, index)
-}
 </script>
 
 <style scoped>
-.dm-breadcrumb {
-  display: block;
+.datametria-breadcrumb {
+  font-size: 14px;
+  line-height: 1;
 }
 
-.dm-breadcrumb__list {
+.datametria-breadcrumb__list {
   display: flex;
-  flex-wrap: wrap;
   align-items: center;
-  gap: var(--dm-spacing-2, 0.5rem);
   list-style: none;
   margin: 0;
   padding: 0;
+  flex-wrap: wrap;
 }
 
-.dm-breadcrumb__item {
+.datametria-breadcrumb__item {
   display: flex;
   align-items: center;
-  gap: var(--dm-spacing-2, 0.5rem);
 }
 
-.dm-breadcrumb__link {
-  color: var(--dm-primary, #0072CE);
+.datametria-breadcrumb__link {
+  color: var(--datametria-text-secondary, #606266);
   text-decoration: none;
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  transition: all 0.2s;
-  padding: var(--dm-spacing-1, 0.25rem) var(--dm-spacing-2, 0.5rem);
-  border-radius: var(--dm-radius-md, 0.375rem);
-  min-height: 32px;
-  display: inline-flex;
-  align-items: center;
+  transition: color 0.2s;
+  font-weight: 400;
 }
 
-.dm-breadcrumb__link:hover {
-  text-decoration: underline;
-  background: var(--dm-neutral-100, #f3f4f6);
+.datametria-breadcrumb__link:not(.is-active):hover {
+  color: var(--datametria-primary, #0072ce);
+  cursor: pointer;
 }
 
-.dm-breadcrumb__link:focus-visible {
-  outline: 2px solid var(--dm-primary, #0072CE);
-  outline-offset: 2px;
+.datametria-breadcrumb__link.is-active {
+  color: var(--datametria-text-primary, #303133);
+  font-weight: 500;
+  cursor: default;
 }
 
-.dm-breadcrumb__current {
-  color: var(--dm-neutral-900, #111827);
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  font-weight: var(--dm-font-weight-medium, 500);
-  padding: var(--dm-spacing-1, 0.25rem) var(--dm-spacing-2, 0.5rem);
-}
-
-.dm-breadcrumb__separator {
-  color: var(--dm-neutral-400, #9ca3af);
-  font-size: var(--dm-font-size-sm, 0.875rem);
+.datametria-breadcrumb__separator {
+  margin: 0 8px;
+  color: var(--datametria-text-placeholder, #c0c4cc);
   user-select: none;
 }
 
-@media (max-width: 640px) {
-  .dm-breadcrumb__list {
-    gap: var(--dm-spacing-1, 0.25rem);
-  }
-
-  .dm-breadcrumb__item {
-    gap: var(--dm-spacing-1, 0.25rem);
-  }
-
-  .dm-breadcrumb__link,
-  .dm-breadcrumb__current {
-    font-size: var(--dm-font-size-xs, 0.75rem);
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .datametria-breadcrumb__link {
+    color: var(--datametria-text-secondary-dark, #909399);
   }
-}
 
-@media (prefers-color-scheme: dark) {
-  .dm-breadcrumb__link:hover {
-    background: var(--dm-neutral-800, #1f2937);
+  .datametria-breadcrumb__link:not(.is-active):hover {
+    color: var(--datametria-primary-dark, #409eff);
   }
 
-  .dm-breadcrumb__current {
-    color: white;
+  .datametria-breadcrumb__link.is-active {
+    color: var(--datametria-text-primary-dark, #e5eaf3);
   }
 
-  .dm-breadcrumb__separator {
-    color: var(--dm-neutral-600, #4b5563);
+  .datametria-breadcrumb__separator {
+    color: var(--datametria-text-placeholder-dark, #606266);
   }
 }
 </style>

package/src/components/DatametriaCheckbox.vue

@@ -1,82 +1,195 @@
 <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
+    class="datametria-checkbox"
+    :class="{
+      'is-checked': isChecked,
+      'is-disabled': disabled,
+      'is-indeterminate': indeterminate
+    }"
+  >
+    <span class="datametria-checkbox__input">
+      <input
+        ref="inputRef"
+        type="checkbox"
+        :checked="isChecked"
+        :disabled="disabled"
+        :indeterminate="indeterminate"
+        @change="handleChange"
+      />
+      <span class="datametria-checkbox__inner"></span>
+    </span>
+    <span v-if="label || $slots.default" class="datametria-checkbox__label">
+      <slot>{{ label }}</slot>
+    </span>
   </label>
 </template>
 
 <script setup lang="ts">
+import { ref, computed, watch, inject } from 'vue'
+
 interface Props {
-  modelValue?: boolean
+  modelValue?: boolean | string | number
   label?: string
   disabled?: boolean
+  indeterminate?: boolean
+  trueValue?: boolean | string | number
+  falseValue?: boolean | string | number
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
-  disabled: false
+  disabled: false,
+  indeterminate: false,
+  trueValue: true,
+  falseValue: false
 })
 
-defineEmits<{
-  'update:modelValue': [value: boolean]
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean | string | number | (string | number)[]]
+  change: [value: boolean | string | number | (string | number)[]]
 }>()
+
+const inputRef = ref<HTMLInputElement>()
+const checkboxGroup = inject<any>('checkboxGroup', null)
+
+const isChecked = computed(() => {
+  if (checkboxGroup) {
+    return checkboxGroup.modelValue.value.includes(props.modelValue)
+  }
+  return props.modelValue === props.trueValue
+})
+
+const handleChange = (e: Event) => {
+  if (props.disabled) return
+
+  const target = e.target as HTMLInputElement
+  const checked = target.checked
+
+  if (checkboxGroup) {
+    const value = [...checkboxGroup.modelValue.value]
+    if (checked) {
+      value.push(props.modelValue)
+    } else {
+      const index = value.indexOf(props.modelValue)
+      if (index > -1) value.splice(index, 1)
+    }
+    checkboxGroup.updateValue(value)
+    emit('update:modelValue', value)
+    emit('change', value)
+  } else {
+    const newValue = checked ? props.trueValue : props.falseValue
+    emit('update:modelValue', newValue)
+    emit('change', newValue)
+  }
+}
+
+watch(() => props.indeterminate, (val) => {
+  if (inputRef.value) {
+    inputRef.value.indeterminate = val
+  }
+}, { immediate: true })
+
+defineExpose({
+  inputRef
+})
 </script>
 
 <style scoped>
 .datametria-checkbox {
   display: inline-flex;
   align-items: center;
-  gap: var(--dm-spacing-2, 0.5rem);
   cursor: pointer;
   user-select: none;
+  font-size: var(--dm-font-size-base, 14px);
+  color: var(--dm-text-primary, #333);
+}
+
+.datametria-checkbox.is-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .datametria-checkbox__input {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+}
+
+.datametria-checkbox__input input {
   position: absolute;
   opacity: 0;
+  width: 100%;
+  height: 100%;
   cursor: pointer;
+  z-index: 1;
 }
 
-.datametria-checkbox__checkmark {
-  position: relative;
-  width: 1.25rem;
-  height: 1.25rem;
-  border: 2px solid var(--dm-neutral-300, #d1d5db);
-  border-radius: var(--dm-radius-sm, 0.25rem);
+.datametria-checkbox__input input:disabled {
+  cursor: not-allowed;
+}
+
+.datametria-checkbox__inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--dm-border-color, #dcdfe6);
+  border-radius: var(--dm-border-radius-small, 2px);
+  background-color: var(--dm-bg-color, #fff);
   transition: all 0.2s;
 }
 
-.datametria-checkbox__input:checked ~ .datametria-checkbox__checkmark {
-  background: var(--dm-primary, #0072CE);
-  border-color: var(--dm-primary, #0072CE);
+.datametria-checkbox.is-checked .datametria-checkbox__inner {
+  background-color: var(--dm-color-primary, #0072ce);
+  border-color: var(--dm-color-primary, #0072ce);
 }
 
-.datametria-checkbox__input:checked ~ .datametria-checkbox__checkmark::after {
+.datametria-checkbox.is-checked .datametria-checkbox__inner::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;
+  top: 2px;
+  left: 5px;
+  width: 4px;
+  height: 8px;
+  border: 2px solid #fff;
+  border-top: 0;
+  border-left: 0;
   transform: rotate(45deg);
 }
 
-.datametria-checkbox__input:disabled ~ .datametria-checkbox__checkmark {
-  background: var(--dm-neutral-100, #f3f4f6);
-  cursor: not-allowed;
+.datametria-checkbox.is-indeterminate .datametria-checkbox__inner {
+  background-color: var(--dm-color-primary, #0072ce);
+  border-color: var(--dm-color-primary, #0072ce);
+}
+
+.datametria-checkbox.is-indeterminate .datametria-checkbox__inner::after {
+  content: '';
+  position: absolute;
+  top: 6px;
+  left: 3px;
+  width: 8px;
+  height: 2px;
+  background-color: #fff;
+  transform: none;
+  border: none;
 }
 
 .datametria-checkbox__label {
-  font-size: var(--dm-font-size-sm, 0.875rem);
-  color: var(--dm-neutral-700, #374151);
+  margin-left: 8px;
+  line-height: 1;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .datametria-checkbox {
+    color: var(--dm-text-primary-dark, #e0e0e0);
+  }
+
+  .datametria-checkbox__inner {
+    border-color: var(--dm-border-color-dark, #4a4a4a);
+    background-color: var(--dm-bg-color-dark, #1e1e1e);
+  }
 }
 </style>

package/src/components/DatametriaCheckboxGroup.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="datametria-checkbox-group" role="group">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide, computed } from 'vue'
+
+interface Props {
+  modelValue?: (string | number)[]
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => [],
+  disabled: false
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: (string | number)[]]
+  change: [value: (string | number)[]]
+}>()
+
+const updateValue = (value: (string | number)[]) => {
+  emit('update:modelValue', value)
+  emit('change', value)
+}
+
+provide('checkboxGroup', {
+  modelValue: computed(() => props.modelValue),
+  disabled: computed(() => props.disabled),
+  updateValue
+})
+</script>
+
+<style scoped>
+.datametria-checkbox-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+</style>