build
This commit is contained in:
parent
8a5596e860
commit
57325f6744
100 changed files with 16153 additions and 4623 deletions
|
|
@ -27,14 +27,14 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import BotaoPlayground from "./botao.playground.vue";
|
||||
import IndicadorPlayground from "./indicador.playground.vue";
|
||||
import CartaoPlayground from "./cartao.playground.vue";
|
||||
import EntradasPlayground from "./entradas.playground.vue";
|
||||
import DataHoraPlayground from "./data_hora.playground.vue";
|
||||
import TabelaPlayground from "./tabela.playground.vue";
|
||||
import OlaMundoPlayground from "./ola_mundo.playground.vue";
|
||||
import { defineComponent } from "vue"
|
||||
import BotaoPlayground from "./botao.playground.vue"
|
||||
import CartaoPlayground from "./cartao.playground.vue"
|
||||
import DataHoraPlayground from "./data_hora.playground.vue"
|
||||
import EntradasPlayground from "./entradas.playground.vue"
|
||||
import IndicadorPlayground from "./indicador.playground.vue"
|
||||
import OlaMundoPlayground from "./ola_mundo.playground.vue"
|
||||
import TabelaPlayground from "./tabela.playground.vue"
|
||||
|
||||
type AbaPlayground =
|
||||
| "botao"
|
||||
|
|
@ -43,7 +43,7 @@ type AbaPlayground =
|
|||
| "entradas"
|
||||
| "data_hora"
|
||||
| "tabela"
|
||||
| "ola_mundo";
|
||||
| "ola_mundo"
|
||||
|
||||
const mapaHashParaAba: Record<string, AbaPlayground> = {
|
||||
botao: "botao",
|
||||
|
|
@ -53,7 +53,7 @@ const mapaHashParaAba: Record<string, AbaPlayground> = {
|
|||
"data-hora": "data_hora",
|
||||
tabela: "tabela",
|
||||
demo: "ola_mundo",
|
||||
};
|
||||
}
|
||||
|
||||
const mapaAbaParaHash: Record<AbaPlayground, string> = {
|
||||
botao: "botao",
|
||||
|
|
@ -63,7 +63,7 @@ const mapaAbaParaHash: Record<AbaPlayground, string> = {
|
|||
data_hora: "data-hora",
|
||||
tabela: "tabela",
|
||||
ola_mundo: "demo",
|
||||
};
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "App",
|
||||
|
|
@ -85,61 +85,67 @@ export default defineComponent({
|
|||
body: "",
|
||||
},
|
||||
googleSansCheck: "(checando...)" as string,
|
||||
};
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.sincronizarAbaComHash();
|
||||
window.addEventListener("hashchange", this.sincronizarAbaComHash);
|
||||
this.sincronizarAbaComHash()
|
||||
window.addEventListener("hashchange", this.sincronizarAbaComHash)
|
||||
|
||||
// Coleta variáveis de fonte e confirma carregamento via FontFaceSet.
|
||||
this.fontVars.eli = getComputedStyle(document.documentElement).getPropertyValue("--eli-font-family").trim();
|
||||
this.fontVars.v = getComputedStyle(document.documentElement).getPropertyValue("--v-font-family").trim();
|
||||
this.fontVars.body = getComputedStyle(document.body).fontFamily;
|
||||
this.fontVars.eli = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--eli-font-family")
|
||||
.trim()
|
||||
this.fontVars.v = getComputedStyle(document.documentElement)
|
||||
.getPropertyValue("--v-font-family")
|
||||
.trim()
|
||||
this.fontVars.body = getComputedStyle(document.body).fontFamily
|
||||
|
||||
// Espera fonts carregarem e então checa se o navegador considera Google Sans disponível
|
||||
// (isso não garante 100% que TODOS pesos/estilos foram baixados, mas confirma que a face existe/foi carregada)
|
||||
document.fonts.ready
|
||||
.then(() => {
|
||||
this.googleSansCheck = String(document.fonts.check('12px "Google Sans"'));
|
||||
this.googleSansCheck = String(
|
||||
document.fonts.check('12px "Google Sans"'),
|
||||
)
|
||||
// atualiza body depois do load, pois pode mudar após o font-face carregar
|
||||
this.fontVars.body = getComputedStyle(document.body).fontFamily;
|
||||
this.fontVars.body = getComputedStyle(document.body).fontFamily
|
||||
})
|
||||
.catch(() => {
|
||||
this.googleSansCheck = "erro";
|
||||
});
|
||||
this.googleSansCheck = "erro"
|
||||
})
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener("hashchange", this.sincronizarAbaComHash);
|
||||
window.removeEventListener("hashchange", this.sincronizarAbaComHash)
|
||||
},
|
||||
watch: {
|
||||
aba() {
|
||||
this.sincronizarHashComAba();
|
||||
this.sincronizarHashComAba()
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
normalizarHash() {
|
||||
const valor = window.location.hash.replace(/^#\/?/, "").trim();
|
||||
return valor;
|
||||
const valor = window.location.hash.replace(/^#\/?/, "").trim()
|
||||
return valor
|
||||
},
|
||||
sincronizarAbaComHash() {
|
||||
const hash = this.normalizarHash();
|
||||
const hash = this.normalizarHash()
|
||||
|
||||
const aba = mapaHashParaAba[hash] ?? "botao";
|
||||
const aba = mapaHashParaAba[hash] ?? "botao"
|
||||
|
||||
if (this.aba !== aba) {
|
||||
this.aba = aba;
|
||||
this.aba = aba
|
||||
}
|
||||
|
||||
// Se a URL estiver vazia/fora do padrão, normalizamos.
|
||||
this.sincronizarHashComAba();
|
||||
this.sincronizarHashComAba()
|
||||
},
|
||||
sincronizarHashComAba() {
|
||||
const destino = `#/${mapaAbaParaHash[this.aba]}`;
|
||||
const destino = `#/${mapaAbaParaHash[this.aba]}`
|
||||
|
||||
if (window.location.hash !== destino) {
|
||||
window.location.hash = destino;
|
||||
window.location.hash = destino
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -17,17 +17,17 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { EliBotao } from "@/componentes/botao";
|
||||
import { defineComponent, ref } from "vue"
|
||||
import { EliBotao } from "@/componentes/botao"
|
||||
|
||||
export default defineComponent({
|
||||
name: "BotaoPlayground",
|
||||
components: { EliBotao },
|
||||
setup() {
|
||||
const contador = ref(0);
|
||||
return { contador };
|
||||
const contador = ref(0)
|
||||
return { contador }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -44,32 +44,32 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { EliBadge } from "@/componentes/indicador";
|
||||
import { EliBotao } from "@/componentes/botao";
|
||||
import { EliEntradaTexto } from "@/componentes/EliEntrada";
|
||||
import { EliCartao } from "@/componentes/cartao";
|
||||
import type { CartaoStatus } from "@/tipos";
|
||||
import { defineComponent, ref } from "vue"
|
||||
import { EliBotao } from "@/componentes/botao"
|
||||
import { EliCartao } from "@/componentes/cartao"
|
||||
import { EliEntradaTexto } from "@/componentes/EliEntrada"
|
||||
import { EliBadge } from "@/componentes/indicador"
|
||||
import type { CartaoStatus } from "@/tipos"
|
||||
|
||||
type Card = {
|
||||
id: string;
|
||||
titulo: string;
|
||||
cliente: string;
|
||||
valor: string;
|
||||
vencimento: string;
|
||||
};
|
||||
id: string
|
||||
titulo: string
|
||||
cliente: string
|
||||
valor: string
|
||||
vencimento: string
|
||||
}
|
||||
|
||||
type Coluna = {
|
||||
status: CartaoStatus;
|
||||
titulo: string;
|
||||
itens: Card[];
|
||||
};
|
||||
status: CartaoStatus
|
||||
titulo: string
|
||||
itens: Card[]
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "CartaoPlayground",
|
||||
components: { EliBadge, EliBotao, EliEntradaTexto, EliCartao },
|
||||
setup() {
|
||||
const filtro = ref("");
|
||||
const filtro = ref("")
|
||||
|
||||
const colunas = ref<Coluna[]>([
|
||||
{
|
||||
|
|
@ -116,14 +116,14 @@ export default defineComponent({
|
|||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
])
|
||||
|
||||
function itensFiltrados(itens: Card[]) {
|
||||
const q = filtro.value.trim().toLowerCase();
|
||||
if (!q) return itens;
|
||||
const q = filtro.value.trim().toLowerCase()
|
||||
if (!q) return itens
|
||||
return itens.filter((i) =>
|
||||
`${i.titulo} ${i.cliente} ${i.valor}`.toLowerCase().includes(q)
|
||||
);
|
||||
`${i.titulo} ${i.cliente} ${i.valor}`.toLowerCase().includes(q),
|
||||
)
|
||||
}
|
||||
|
||||
function criar() {
|
||||
|
|
@ -134,7 +134,7 @@ export default defineComponent({
|
|||
cliente: "(definir)",
|
||||
valor: "R$ 0,00",
|
||||
vencimento: "--/--/----",
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function abrir(_item: Card) {
|
||||
|
|
@ -145,9 +145,9 @@ export default defineComponent({
|
|||
// Abrir modal/rota de edição
|
||||
}
|
||||
|
||||
return { filtro, colunas, itensFiltrados, criar, abrir, editar };
|
||||
return { filtro, colunas, itensFiltrados, criar, abrir, editar }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -98,34 +98,34 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref } from "vue";
|
||||
import { EliEntradaDataHora } from "@/componentes/EliEntrada";
|
||||
import { VDivider } from "vuetify/components";
|
||||
import { computed, defineComponent, ref } from "vue"
|
||||
import { VDivider } from "vuetify/components"
|
||||
import { EliEntradaDataHora } from "@/componentes/EliEntrada"
|
||||
|
||||
export default defineComponent({
|
||||
name: "DataHoraPlayground",
|
||||
components: { EliEntradaDataHora, VDivider },
|
||||
setup() {
|
||||
const dataHora = ref<string | null>("2026-01-09T13:15:00-03:00");
|
||||
const dataHora = ref<string | null>("2026-01-09T13:15:00-03:00")
|
||||
|
||||
const somenteData = ref<string | null>("2026-01-09T00:00:00-03:00");
|
||||
const somenteData = ref<string | null>("2026-01-09T00:00:00-03:00")
|
||||
|
||||
// Valor vindo do backend em UTC/Z (exibir local, manter como UTC no estado)
|
||||
const dataHoraUtcEntrada = ref<string | null>("2026-01-09T16:15:00Z");
|
||||
const dataHoraUtcEntrada = ref<string | null>("2026-01-09T16:15:00Z")
|
||||
|
||||
// Exemplo com min/max
|
||||
const min = ref("2026-01-09T08:00:00-03:00");
|
||||
const max = ref("2026-01-09T18:00:00-03:00");
|
||||
const dataHoraComLimite = ref<string | null>("2026-01-09T09:00:00-03:00");
|
||||
const min = ref("2026-01-09T08:00:00-03:00")
|
||||
const max = ref("2026-01-09T18:00:00-03:00")
|
||||
const dataHoraComLimite = ref<string | null>("2026-01-09T09:00:00-03:00")
|
||||
|
||||
// Obrigatório (mostra erro quando null)
|
||||
const dataHoraObrigatoria = ref<string | null>(null);
|
||||
const dataHoraObrigatoria = ref<string | null>(null)
|
||||
|
||||
// Desabilitado
|
||||
const dataHoraDesabilitado = ref<string | null>("2026-01-09T10:30:00-03:00");
|
||||
const dataHoraDesabilitado = ref<string | null>("2026-01-09T10:30:00-03:00")
|
||||
|
||||
// Saída: sempre ISO com offset local
|
||||
const dataHoraUtcEmitida = ref<string | null>("2026-01-09T16:15:00Z");
|
||||
const dataHoraUtcEmitida = ref<string | null>("2026-01-09T16:15:00Z")
|
||||
|
||||
const debug = computed(() =>
|
||||
JSON.stringify(
|
||||
|
|
@ -141,9 +141,9 @@ export default defineComponent({
|
|||
max: max.value,
|
||||
},
|
||||
null,
|
||||
2
|
||||
)
|
||||
);
|
||||
2,
|
||||
),
|
||||
)
|
||||
|
||||
return {
|
||||
dataHora,
|
||||
|
|
@ -156,9 +156,9 @@ export default defineComponent({
|
|||
dataHoraDesabilitado,
|
||||
dataHoraUtcEmitida,
|
||||
debug,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -112,8 +112,13 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { EliEntradaNumero, EliEntradaParagrafo, EliEntradaSelecao, EliEntradaTexto } from "../index";
|
||||
import { defineComponent } from "vue"
|
||||
import {
|
||||
EliEntradaNumero,
|
||||
EliEntradaParagrafo,
|
||||
EliEntradaSelecao,
|
||||
EliEntradaTexto,
|
||||
} from "../index"
|
||||
|
||||
export default defineComponent({
|
||||
name: "EntradasPlayground",
|
||||
|
|
@ -126,12 +131,12 @@ export default defineComponent({
|
|||
methods: {
|
||||
async itensCategorias() {
|
||||
// Exemplo async (simula consulta)
|
||||
await new Promise((r) => setTimeout(r, 600));
|
||||
await new Promise((r) => setTimeout(r, 600))
|
||||
return [
|
||||
{ chave: "a", rotulo: "Categoria A" },
|
||||
{ chave: "b", rotulo: "Categoria B" },
|
||||
{ chave: "c", rotulo: "Categoria C" },
|
||||
];
|
||||
]
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
|
@ -141,7 +146,7 @@ export default defineComponent({
|
|||
selecao: null as string | null,
|
||||
numero: null as number | null,
|
||||
numeroDecimal: null as number | null,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -29,18 +29,18 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { EliBadge } from "@/componentes/indicador";
|
||||
import { EliBotao } from "@/componentes/botao";
|
||||
import { defineComponent, ref } from "vue"
|
||||
import { EliBotao } from "@/componentes/botao"
|
||||
import { EliBadge } from "@/componentes/indicador"
|
||||
|
||||
export default defineComponent({
|
||||
name: "IndicadorPlayground",
|
||||
components: { EliBadge, EliBotao },
|
||||
setup() {
|
||||
const mostrar = ref(true);
|
||||
return { mostrar };
|
||||
const mostrar = ref(true)
|
||||
return { mostrar }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
import { createApp } from "vue";
|
||||
import App from "./App.vue";
|
||||
import { createApp } from "vue"
|
||||
import App from "./App.vue"
|
||||
|
||||
// Vuetify
|
||||
import "vuetify/styles";
|
||||
import "@mdi/font/css/materialdesignicons.css";
|
||||
import { createVuetify } from "vuetify";
|
||||
import * as components from "vuetify/components";
|
||||
import * as directives from "vuetify/directives";
|
||||
import "vuetify/styles"
|
||||
import "@mdi/font/css/materialdesignicons.css"
|
||||
import { createVuetify } from "vuetify"
|
||||
import * as components from "vuetify/components"
|
||||
import * as directives from "vuetify/directives"
|
||||
|
||||
// Estilos globais da lib (font-face + variáveis de fonte)
|
||||
// Importamos DEPOIS do Vuetify para garantir que `--v-font-family` seja sobrescrito.
|
||||
import "../styles/eli-vue-fonts.css";
|
||||
import "../styles/eli-vue-fonts.css"
|
||||
|
||||
const themeDefault = {
|
||||
dark: false,
|
||||
|
|
@ -152,7 +152,7 @@ const themeDefault = {
|
|||
"cyan-800": "#055160",
|
||||
"cyan-900": "#032830",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const vuetify = createVuetify({
|
||||
components,
|
||||
|
|
@ -163,19 +163,32 @@ const vuetify = createVuetify({
|
|||
themeDefault,
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const app = createApp(App);
|
||||
const app = createApp(App)
|
||||
|
||||
// Debug rápido: confirma fonte efetiva no playground (ver no DevTools console)
|
||||
// Observação: isso é só para o playground, não afeta o build da lib.
|
||||
if (import.meta.env.DEV) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("[eli-vue] --v-font-family:", getComputedStyle(document.documentElement).getPropertyValue("--v-font-family"));
|
||||
console.log(
|
||||
"[eli-vue] --v-font-family:",
|
||||
getComputedStyle(document.documentElement).getPropertyValue(
|
||||
"--v-font-family",
|
||||
),
|
||||
)
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("[eli-vue] --eli-font-family:", getComputedStyle(document.documentElement).getPropertyValue("--eli-font-family"));
|
||||
console.log(
|
||||
"[eli-vue] --eli-font-family:",
|
||||
getComputedStyle(document.documentElement).getPropertyValue(
|
||||
"--eli-font-family",
|
||||
),
|
||||
)
|
||||
// eslint-disable-next-line no-console
|
||||
console.log("[eli-vue] body font-family:", getComputedStyle(document.body).fontFamily);
|
||||
console.log(
|
||||
"[eli-vue] body font-family:",
|
||||
getComputedStyle(document.body).fontFamily,
|
||||
)
|
||||
}
|
||||
|
||||
app.use(vuetify).mount("#app");
|
||||
app.use(vuetify).mount("#app")
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { EliOlaMundo } from "@/componentes/ola_mundo";
|
||||
import { defineComponent } from "vue"
|
||||
import { EliOlaMundo } from "@/componentes/ola_mundo"
|
||||
|
||||
export default defineComponent({
|
||||
name: "OlaMundoPlayground",
|
||||
components: { EliOlaMundo },
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -12,25 +12,25 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { codigosResposta } from "p-respostas";
|
||||
import { BadgeCheck, Eye, Pencil, Plus, Trash2 } from "lucide-vue-next";
|
||||
import { celulaTabela, EliTabela } from "@/componentes/EliTabela";
|
||||
import type { ComponenteEntrada } from "@/componentes/EliEntrada/tiposEntradas";
|
||||
import type { tipoEliTabelaConsulta } from "@/componentes/EliTabela";
|
||||
import type { tipoFiltro } from "@/componentes/EliTabela/types-eli-tabela";
|
||||
import { BadgeCheck, Eye, Pencil, Plus, Trash2 } from "lucide-vue-next"
|
||||
import { codigosResposta } from "p-respostas"
|
||||
import { defineComponent, ref } from "vue"
|
||||
import type { ComponenteEntrada } from "@/componentes/EliEntrada/tiposEntradas"
|
||||
import type { tipoEliTabelaConsulta } from "@/componentes/EliTabela"
|
||||
import { celulaTabela, EliTabela } from "@/componentes/EliTabela"
|
||||
import type { tipoFiltro } from "@/componentes/EliTabela/types-eli-tabela"
|
||||
|
||||
type Linha = {
|
||||
empreendedor: string;
|
||||
empreendimento: string;
|
||||
documento: string;
|
||||
email: string;
|
||||
telefone: string;
|
||||
faturamento: number;
|
||||
peso_kg: number;
|
||||
criado_em: string;
|
||||
atualizado_em: string;
|
||||
};
|
||||
empreendedor: string
|
||||
empreendimento: string
|
||||
documento: string
|
||||
email: string
|
||||
telefone: string
|
||||
faturamento: number
|
||||
peso_kg: number
|
||||
criado_em: string
|
||||
atualizado_em: string
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: "TabelaPlayground",
|
||||
|
|
@ -42,7 +42,7 @@ export default defineComponent({
|
|||
cor: "#2563eb",
|
||||
rotulo: "Detalhes",
|
||||
acao: (linha) => {
|
||||
console.log("Visualizar detalhes de", linha.empreendedor);
|
||||
console.log("Visualizar detalhes de", linha.empreendedor)
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
@ -50,18 +50,19 @@ export default defineComponent({
|
|||
cor: "#dc2626",
|
||||
rotulo: "Remover",
|
||||
acao: (linha) => {
|
||||
console.log("Remover cadastro de", linha.empreendedor);
|
||||
console.log("Remover cadastro de", linha.empreendedor)
|
||||
},
|
||||
exibir: (linha) => !linha.empreendimento.toLowerCase().includes("café"),
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
const linhasPadrao = ref<Linha[]>([
|
||||
{
|
||||
empreendedor: "Maria Silva",
|
||||
empreendimento: "Doces da Maria",
|
||||
documento: "12.345.678/0001-90",
|
||||
email: "contato.comercial.super.longo@doces-da-maria-exemplo-muito-grande.com.br",
|
||||
email:
|
||||
"contato.comercial.super.longo@doces-da-maria-exemplo-muito-grande.com.br",
|
||||
telefone: "(11) 91234-5678",
|
||||
faturamento: 12500.5,
|
||||
peso_kg: 12.4,
|
||||
|
|
@ -288,14 +289,16 @@ export default defineComponent({
|
|||
criado_em: "2026-01-01T09:00:00-03:00",
|
||||
atualizado_em: "2026-01-17T09:30:00-03:00",
|
||||
},
|
||||
]);
|
||||
])
|
||||
|
||||
// Incrementamos a chave para forçar o EliTabela a recarregar a consulta.
|
||||
// (Como o componente não expõe um método público de refresh)
|
||||
const versaoTabelaOk = ref(0);
|
||||
const versaoTabelaOk = ref(0)
|
||||
|
||||
function adicionarLinha() {
|
||||
const proximo = linhasPadrao.value.length + 1;
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
function adicionarLinha(params?: any) {
|
||||
if (params) console.log("Adicionar Linha, parametros:", params)
|
||||
const proximo = linhasPadrao.value.length + 1
|
||||
|
||||
linhasPadrao.value.unshift({
|
||||
empreendedor: `Novo Empreendedor ${proximo}`,
|
||||
|
|
@ -307,42 +310,47 @@ export default defineComponent({
|
|||
peso_kg: 0,
|
||||
criado_em: new Date().toISOString(),
|
||||
atualizado_em: new Date().toISOString(),
|
||||
});
|
||||
})
|
||||
|
||||
versaoTabelaOk.value++;
|
||||
versaoTabelaOk.value++
|
||||
}
|
||||
|
||||
|
||||
const filtrarPorBusca = (linhas: Linha[], texto?: string) => {
|
||||
const termo = texto?.trim().toLowerCase();
|
||||
const termo = texto?.trim().toLowerCase()
|
||||
if (!termo) {
|
||||
return [...linhas];
|
||||
return [...linhas]
|
||||
}
|
||||
|
||||
return linhas.filter((linha) => {
|
||||
const campos = [linha.empreendedor, linha.empreendimento];
|
||||
return campos.some((valor) => valor.toLowerCase().includes(termo));
|
||||
});
|
||||
};
|
||||
const campos = [linha.empreendedor, linha.empreendimento]
|
||||
return campos.some((valor) => valor.toLowerCase().includes(termo))
|
||||
})
|
||||
}
|
||||
|
||||
const compararOperador = (operador: string, valorLinha: any, valorFiltro: any): boolean => {
|
||||
const compararOperador = (
|
||||
operador: string,
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
valorLinha: any,
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
valorFiltro: any,
|
||||
): boolean => {
|
||||
switch (operador) {
|
||||
case "=":
|
||||
return valorLinha == valorFiltro;
|
||||
return valorLinha == valorFiltro
|
||||
case "!=":
|
||||
return valorLinha != valorFiltro;
|
||||
return valorLinha != valorFiltro
|
||||
case ">":
|
||||
return Number(valorLinha) > Number(valorFiltro);
|
||||
return Number(valorLinha) > Number(valorFiltro)
|
||||
case ">=":
|
||||
return Number(valorLinha) >= Number(valorFiltro);
|
||||
return Number(valorLinha) >= Number(valorFiltro)
|
||||
case "<":
|
||||
return Number(valorLinha) < Number(valorFiltro);
|
||||
return Number(valorLinha) < Number(valorFiltro)
|
||||
case "<=":
|
||||
return Number(valorLinha) <= Number(valorFiltro);
|
||||
return Number(valorLinha) <= Number(valorFiltro)
|
||||
case "like": {
|
||||
const a = String(valorLinha ?? "").toLowerCase();
|
||||
const b = String(valorFiltro ?? "").toLowerCase();
|
||||
return a.includes(b);
|
||||
const a = String(valorLinha ?? "").toLowerCase()
|
||||
const b = String(valorFiltro ?? "").toLowerCase()
|
||||
return a.includes(b)
|
||||
}
|
||||
case "in": {
|
||||
const arr = Array.isArray(valorFiltro)
|
||||
|
|
@ -350,93 +358,129 @@ export default defineComponent({
|
|||
: String(valorFiltro ?? "")
|
||||
.split(",")
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
return arr.includes(String(valorLinha));
|
||||
.filter(Boolean)
|
||||
return arr.includes(String(valorLinha))
|
||||
}
|
||||
case "isNull":
|
||||
return valorLinha === null || valorLinha === undefined || valorLinha === "";
|
||||
return (
|
||||
valorLinha === null || valorLinha === undefined || valorLinha === ""
|
||||
)
|
||||
default:
|
||||
return true;
|
||||
return true
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const filtrarPorFiltrosAvancados = (linhas: Linha[], filtros?: tipoFiltro[]) => {
|
||||
const lista = [...linhas];
|
||||
if (!filtros?.length) return lista;
|
||||
const filtrarPorFiltrosAvancados = (
|
||||
linhas: Linha[],
|
||||
filtros?: tipoFiltro[],
|
||||
) => {
|
||||
const lista = [...linhas]
|
||||
if (!filtros?.length) return lista
|
||||
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
return lista.filter((linha: any) => {
|
||||
return filtros.every((f) => {
|
||||
const vLinha = linha?.[String((f as any).coluna)];
|
||||
return compararOperador(String((f as any).operador), vLinha, (f as any).valor);
|
||||
});
|
||||
});
|
||||
};
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
const vLinha = linha?.[String((f as any).coluna)]
|
||||
return compararOperador(
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
String((f as any).operador),
|
||||
vLinha,
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
(f as any).valor,
|
||||
)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const ordenarLinhas = (linhas: Linha[], parametros?: { coluna_ordem?: keyof Linha; direcao_ordem?: "asc" | "desc" }) => {
|
||||
if (!parametros?.coluna_ordem) return [...linhas];
|
||||
const ordenarLinhas = (
|
||||
linhas: Linha[],
|
||||
parametros?: {
|
||||
coluna_ordem?: keyof Linha
|
||||
direcao_ordem?: "asc" | "desc"
|
||||
},
|
||||
) => {
|
||||
if (!parametros?.coluna_ordem) return [...linhas]
|
||||
|
||||
const direcao = parametros.direcao_ordem ?? "asc";
|
||||
const chave = parametros.coluna_ordem;
|
||||
const multiplicador = direcao === "asc" ? 1 : -1;
|
||||
const direcao = parametros.direcao_ordem ?? "asc"
|
||||
const chave = parametros.coluna_ordem
|
||||
const multiplicador = direcao === "asc" ? 1 : -1
|
||||
|
||||
return [...linhas].sort((a, b) => {
|
||||
const valorA = a[chave];
|
||||
const valorB = b[chave];
|
||||
const valorA = a[chave]
|
||||
const valorB = b[chave]
|
||||
|
||||
return (
|
||||
multiplicador *
|
||||
String(valorA ?? "").localeCompare(String(valorB ?? ""), "pt-BR", {
|
||||
sensitivity: "base",
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
const tabelaOk: tipoEliTabelaConsulta<Linha> = {
|
||||
nome: 'Exemplo',
|
||||
nome: "Exemplo",
|
||||
registros_por_consulta: 10,
|
||||
mostrarCaixaDeBusca: true,
|
||||
acoesTabela: [
|
||||
{
|
||||
posicao: "superior",
|
||||
icone: Plus,
|
||||
cor: "#16a34a",
|
||||
rotulo: "Novo",
|
||||
rotulo: "Novo (Superior)",
|
||||
acao: adicionarLinha,
|
||||
},
|
||||
{
|
||||
posicao: "inferior",
|
||||
icone: Plus,
|
||||
cor: "#2563eb",
|
||||
rotulo: "Novo (Inferior)",
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
acao: (params: any) => {
|
||||
console.log("Ação inferior clicada com params:", params)
|
||||
adicionarLinha(params)
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
colunas: [
|
||||
{
|
||||
rotulo: "Empreendedor",
|
||||
celula: (l) => celulaTabela('textoSimples', { texto: l.empreendedor }),
|
||||
celula: (l) =>
|
||||
celulaTabela("textoSimples", { texto: l.empreendedor }),
|
||||
coluna_ordem: "empreendedor",
|
||||
visivel: true,
|
||||
},
|
||||
{
|
||||
rotulo: "Empreendimento",
|
||||
celula: (l) => celulaTabela('textoSimples', { texto: l.empreendimento }),
|
||||
celula: (l) =>
|
||||
celulaTabela("textoSimples", { texto: l.empreendimento }),
|
||||
coluna_ordem: "empreendimento",
|
||||
visivel: true,
|
||||
},
|
||||
{
|
||||
rotulo: "Documento",
|
||||
celula: (l) => celulaTabela('textoSimples', { texto: l.documento }),
|
||||
celula: (l) => celulaTabela("textoSimples", { texto: l.documento }),
|
||||
coluna_ordem: "documento",
|
||||
visivel: false,
|
||||
},
|
||||
{
|
||||
rotulo: "E-mail",
|
||||
celula: (l) => celulaTabela('textoTruncado', {
|
||||
texto: l.email, acao: () => {
|
||||
// Exemplo de ação: poderia abrir detalhes
|
||||
alert(`Clicou em ${l.email}`);
|
||||
}
|
||||
}),
|
||||
celula: (l) =>
|
||||
celulaTabela("textoTruncado", {
|
||||
texto: l.email,
|
||||
acao: () => {
|
||||
// Exemplo de ação: poderia abrir detalhes
|
||||
alert(`Clicou em ${l.email}`)
|
||||
},
|
||||
}),
|
||||
coluna_ordem: "email",
|
||||
visivel: true,
|
||||
},
|
||||
{
|
||||
rotulo: "Telefone",
|
||||
celula: (l) => celulaTabela('textoSimples', { texto: l.telefone }),
|
||||
celula: (l) => celulaTabela("textoSimples", { texto: l.telefone }),
|
||||
coluna_ordem: "telefone",
|
||||
visivel: true,
|
||||
},
|
||||
|
|
@ -447,7 +491,8 @@ export default defineComponent({
|
|||
numero: l.faturamento,
|
||||
prefixo: "R$",
|
||||
// Exemplo de ação (clicável)
|
||||
acao: () => alert(`Faturamento de ${l.empreendedor}: R$ ${l.faturamento}`),
|
||||
acao: () =>
|
||||
alert(`Faturamento de ${l.empreendedor}: R$ ${l.faturamento}`),
|
||||
}),
|
||||
visivel: true,
|
||||
},
|
||||
|
|
@ -475,7 +520,7 @@ export default defineComponent({
|
|||
cor: "primary",
|
||||
icone: Pencil,
|
||||
acao: () => {
|
||||
alert(`Editar ${l.empreendedor}`);
|
||||
alert(`Editar ${l.empreendedor}`)
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
@ -508,39 +553,46 @@ export default defineComponent({
|
|||
coluna: "empreendedor",
|
||||
operador: "like",
|
||||
entrada: ["texto", { rotulo: "Empreendedor" }] as ComponenteEntrada,
|
||||
|
||||
},
|
||||
{
|
||||
coluna: "documento",
|
||||
operador: "like",
|
||||
entrada: ["texto", { rotulo: "Documento", formato: "cpfCnpj" }] as ComponenteEntrada,
|
||||
|
||||
entrada: [
|
||||
"texto",
|
||||
{ rotulo: "Documento", formato: "cpfCnpj" },
|
||||
] as ComponenteEntrada,
|
||||
},
|
||||
{
|
||||
coluna: "email",
|
||||
operador: "like",
|
||||
entrada: ["texto", { rotulo: "E-mail", formato: "email" }] as ComponenteEntrada,
|
||||
|
||||
entrada: [
|
||||
"texto",
|
||||
{ rotulo: "E-mail", formato: "email" },
|
||||
] as ComponenteEntrada,
|
||||
},
|
||||
],
|
||||
consulta: async (parametrosConsulta) => {
|
||||
// Agora a EliTabela envia paginação/ordenação/busca OU filtros avançados para a consulta.
|
||||
// (busca tem prioridade; quando existe texto_busca, filtros não vêm no payload)
|
||||
|
||||
const limite = Math.max(1, Number(parametrosConsulta?.limit ?? 10));
|
||||
const offset = Math.max(0, Number(parametrosConsulta?.offSet ?? 0));
|
||||
const limite = Math.max(1, Number(parametrosConsulta?.limit ?? 10))
|
||||
const offset = Math.max(0, Number(parametrosConsulta?.offSet ?? 0))
|
||||
|
||||
// 1) filtra (busca OU filtro avançado)
|
||||
const base = [...linhasPadrao.value];
|
||||
const base = [...linhasPadrao.value]
|
||||
const filtradas = parametrosConsulta?.texto_busca
|
||||
? filtrarPorBusca(base, parametrosConsulta.texto_busca)
|
||||
: filtrarPorFiltrosAvancados(base, (parametrosConsulta as any)?.filtros);
|
||||
: filtrarPorFiltrosAvancados(
|
||||
base,
|
||||
// biome-ignore lint/suspicious/noExplicitAny: playground
|
||||
(parametrosConsulta as any)?.filtros,
|
||||
)
|
||||
|
||||
// 2) ordena
|
||||
const ordenadas = ordenarLinhas(filtradas, parametrosConsulta);
|
||||
const ordenadas = ordenarLinhas(filtradas, parametrosConsulta)
|
||||
|
||||
// 3) pagina
|
||||
const valores = ordenadas.slice(offset, offset + limite);
|
||||
const valores = ordenadas.slice(offset, offset + limite)
|
||||
|
||||
return {
|
||||
cod: codigosResposta.sucesso,
|
||||
|
|
@ -551,9 +603,9 @@ export default defineComponent({
|
|||
quantidade: ordenadas.length,
|
||||
valores,
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const tabelaVazia: tipoEliTabelaConsulta<Linha> = {
|
||||
nome: "Exemplo",
|
||||
|
|
@ -570,11 +622,11 @@ export default defineComponent({
|
|||
quantidade: 0,
|
||||
valores: [],
|
||||
},
|
||||
};
|
||||
}
|
||||
},
|
||||
mensagemVazio: "Nada para mostrar aqui.",
|
||||
acoesLinha: acoesLinha,
|
||||
};
|
||||
}
|
||||
|
||||
const tabelaErro: tipoEliTabelaConsulta<Linha> = {
|
||||
nome: "Exemplo",
|
||||
|
|
@ -589,13 +641,13 @@ export default defineComponent({
|
|||
eErro: true,
|
||||
mensagem: "Falha ao buscar dados",
|
||||
valor: undefined,
|
||||
};
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return { tabelaOk, tabelaVazia, tabelaErro, versaoTabelaOk };
|
||||
return { tabelaOk, tabelaVazia, tabelaErro, versaoTabelaOk }
|
||||
},
|
||||
});
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue