bkp

src/components/eli/EliTabela/EliTabelaCaixaDeBusca.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="eli-tabela__busca">
+    <div class="eli-tabela__busca-input-wrapper">
+      <input
+        id="eli-tabela-busca"
+        v-model="texto"
+        type="search"
+        class="eli-tabela__busca-input"
+        placeholder="Digite termos para filtrar"
+        @keyup.enter="emitirBusca"
+      />
+      <button
+        type="button"
+        class="eli-tabela__busca-botao"
+        @click="emitirBusca"
+      >
+        Buscar
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from "vue";
+
+export default defineComponent({
+  name: "EliTabelaCaixaDeBusca",
+  props: {
+    modelo: {
+      type: String,
+      required: false,
+      default: "",
+    },
+  },
+  emits: {
+    buscar(valor: string) {
+      return typeof valor === "string";
+    },
+  },
+  setup(props, { emit }) {
+    /**
+     * Estado local da entrada para que o usuário possa digitar livremente antes
+     * de disparar uma nova consulta.
+     */
+    const texto = ref(props.modelo ?? "");
+
+    watch(
+      () => props.modelo,
+      (novo) => {
+        if (novo !== undefined && novo !== texto.value) {
+          texto.value = novo;
+        }
+      }
+    );
+
+    function emitirBusca() {
+      emit("buscar", texto.value.trim());
+    }
+
+    return { texto, emitirBusca };
+  },
+});
+</script>
+
+<style scoped>
+.eli-tabela__busca {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+
+.eli-tabela__busca-input-wrapper {
+  display: inline-flex;
+  align-items: stretch;
+  border-radius: 9999px;
+  border: 1px solid rgba(15, 23, 42, 0.15);
+  overflow: hidden;
+  background: #fff;
+}
+
+.eli-tabela__busca-input {
+  padding: 6px 12px;
+  border: none;
+  outline: none;
+  font-size: 0.875rem;
+  color: rgba(15, 23, 42, 0.85);
+}
+
+.eli-tabela__busca-input::placeholder {
+  color: rgba(107, 114, 128, 0.85);
+}
+
+.eli-tabela__busca-botao {
+  border: none;
+  background: rgba(37, 99, 235, 0.12);
+  color: rgba(37, 99, 235, 0.95);
+  padding: 0 12px;
+  cursor: pointer;
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.eli-tabela__busca-botao:hover,
+.eli-tabela__busca-botao:focus-visible {
+  background: rgba(37, 99, 235, 0.2);
+  color: rgba(37, 99, 235, 1);
+}
+
+.eli-tabela__busca-botao:focus-visible {
+  outline: 2px solid rgba(37, 99, 235, 0.35);
+  outline-offset: 2px;
+}
+</style>