chore: alinhar projeto às regras do agent
This commit is contained in:
parent
86d451efa1
commit
51a48eee70
36 changed files with 485 additions and 208 deletions
|
|
@ -1,16 +1,42 @@
|
|||
<template>
|
||||
<EliOlaMundo />
|
||||
|
||||
<v-container class="py-6">
|
||||
<h1 class="text-h5 mb-4">Playground — eli-vue</h1>
|
||||
|
||||
<v-tabs v-model="aba" color="primary" density="comfortable">
|
||||
<v-tab value="botao">Botão</v-tab>
|
||||
<v-tab value="indicador">Indicador</v-tab>
|
||||
<v-tab value="campo">Campo</v-tab>
|
||||
<v-tab value="ola_mundo">Demo</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-divider class="my-4" />
|
||||
|
||||
<BotaoPlayground v-if="aba === 'botao'" />
|
||||
<IndicadorPlayground v-else-if="aba === 'indicador'" />
|
||||
<CampoPlayground v-else-if="aba === 'campo'" />
|
||||
<OlaMundoPlayground v-else />
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { EliOlaMundo } from '@/componentes/EliOlaMundo'
|
||||
import BotaoPlayground from "./botao.playground.vue";
|
||||
import IndicadorPlayground from "./indicador.playground.vue";
|
||||
import CampoPlayground from "./campo.playground.vue";
|
||||
import OlaMundoPlayground from "./ola_mundo.playground.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
EliOlaMundo,
|
||||
BotaoPlayground,
|
||||
IndicadorPlayground,
|
||||
CampoPlayground,
|
||||
OlaMundoPlayground,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
aba: "botao" as "botao" | "indicador" | "campo" | "ola_mundo",
|
||||
};
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
45
src/playground/botao.playground.vue
Normal file
45
src/playground/botao.playground.vue
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<section class="stack">
|
||||
<h2>EliBotao</h2>
|
||||
|
||||
<div class="row">
|
||||
<EliBotao @click="contador++">Primário (clicks: {{ contador }})</EliBotao>
|
||||
<EliBotao variant="outlined">Outlined</EliBotao>
|
||||
<EliBotao variant="text">Text</EliBotao>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<EliBotao :disabled="true">Desabilitado</EliBotao>
|
||||
<EliBotao :loading="true">Carregando</EliBotao>
|
||||
<EliBotao color="success">Success</EliBotao>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { EliBotao } from "@/componentes/botao";
|
||||
|
||||
export default defineComponent({
|
||||
name: "BotaoPlayground",
|
||||
components: { EliBotao },
|
||||
setup() {
|
||||
const contador = ref(0);
|
||||
return { contador };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stack {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
123
src/playground/campo.playground.vue
Normal file
123
src/playground/campo.playground.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<section class="stack">
|
||||
<h2>EliInput (campo)</h2>
|
||||
|
||||
<div class="grid">
|
||||
<EliInput v-model="nome" label="Nome" placeholder="Digite seu nome" />
|
||||
<EliInput v-model="telefone" type="telefone" label="Telefone" />
|
||||
<EliInput v-model="documento" type="cpfCnpj" label="CPF / CNPJ" />
|
||||
|
||||
<EliInput v-model="idade" type="numericoInteiro" label="Idade" />
|
||||
<EliInput v-model="valor" type="numericoMoeda" label="Valor" />
|
||||
<EliInput v-model="cep" type="cep" label="CEP" placeholder="00000-000" />
|
||||
|
||||
<EliInput
|
||||
v-model="estado"
|
||||
type="select"
|
||||
label="Estado"
|
||||
multiple
|
||||
:options="[
|
||||
{ label: 'São Paulo', value: 'SP' },
|
||||
{ label: 'Rio de Janeiro', value: 'RJ' },
|
||||
]"
|
||||
/>
|
||||
|
||||
<EliInput
|
||||
v-model="cor"
|
||||
type="radio"
|
||||
label="Cor favorita"
|
||||
:options="[
|
||||
{ label: 'Azul', value: 'azul' },
|
||||
{ label: 'Verde', value: 'verde' },
|
||||
]"
|
||||
/>
|
||||
|
||||
<EliInput
|
||||
v-model="habilidades"
|
||||
type="checkbox"
|
||||
label="Habilidades"
|
||||
:options="[
|
||||
{ label: 'Vue', value: 'vue' },
|
||||
{ label: 'React', value: 'react' },
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<pre class="debug">{{ debug }}</pre>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref } from "vue";
|
||||
import { EliInput } from "@/componentes/campo";
|
||||
|
||||
type Cor = "azul" | "verde" | null;
|
||||
type Habilidade = "vue" | "react";
|
||||
|
||||
export default defineComponent({
|
||||
name: "CampoPlayground",
|
||||
components: { EliInput },
|
||||
setup() {
|
||||
const nome = ref("");
|
||||
const telefone = ref("");
|
||||
const documento = ref("");
|
||||
const idade = ref("");
|
||||
const valor = ref("");
|
||||
const cep = ref("");
|
||||
const estado = ref<string[]>([]);
|
||||
const cor = ref<Cor>(null);
|
||||
const habilidades = ref<Habilidade[]>([]);
|
||||
|
||||
const debug = computed(() =>
|
||||
JSON.stringify(
|
||||
{
|
||||
nome: nome.value,
|
||||
telefone: telefone.value,
|
||||
documento: documento.value,
|
||||
idade: idade.value,
|
||||
valor: valor.value,
|
||||
cep: cep.value,
|
||||
estado: estado.value,
|
||||
cor: cor.value,
|
||||
habilidades: habilidades.value,
|
||||
},
|
||||
null,
|
||||
2
|
||||
)
|
||||
);
|
||||
|
||||
return {
|
||||
nome,
|
||||
telefone,
|
||||
documento,
|
||||
idade,
|
||||
valor,
|
||||
cep,
|
||||
estado,
|
||||
cor,
|
||||
habilidades,
|
||||
debug,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stack {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
}
|
||||
|
||||
.debug {
|
||||
padding: 12px;
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
border-radius: 8px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
65
src/playground/indicador.playground.vue
Normal file
65
src/playground/indicador.playground.vue
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<section class="stack">
|
||||
<h2>EliBadge (indicador)</h2>
|
||||
|
||||
<div class="row">
|
||||
<EliBadge badge="3">
|
||||
<v-icon>mdi-bell</v-icon>
|
||||
</EliBadge>
|
||||
|
||||
<EliBadge badge="Novo" radius="pill" color="success">
|
||||
<span class="chip">Mensagens</span>
|
||||
</EliBadge>
|
||||
|
||||
<EliBadge dot :visible="true" color="error">
|
||||
<v-icon>mdi-email</v-icon>
|
||||
</EliBadge>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<EliBadge badge="99+" :visible="mostrar" radius="12px">
|
||||
<span class="chip">Toggle visible</span>
|
||||
</EliBadge>
|
||||
|
||||
<EliBotao variant="outlined" @click="mostrar = !mostrar">
|
||||
Alternar visible ({{ mostrar ? "mostrando" : "oculto" }})
|
||||
</EliBotao>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from "vue";
|
||||
import { EliBadge } from "@/componentes/indicador";
|
||||
import { EliBotao } from "@/componentes/botao";
|
||||
|
||||
export default defineComponent({
|
||||
name: "IndicadorPlayground",
|
||||
components: { EliBadge, EliBotao },
|
||||
setup() {
|
||||
const mostrar = ref(true);
|
||||
return { mostrar };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stack {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
padding: 6px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
</style>
|
||||
34
src/playground/ola_mundo.playground.vue
Normal file
34
src/playground/ola_mundo.playground.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<section class="stack">
|
||||
<h2>EliOlaMundo</h2>
|
||||
<p class="muted">
|
||||
Demo integrada (útil para smoke-test visual). Para testes específicos,
|
||||
prefira os playgrounds de <code>EliBotao</code>, <code>EliInput</code> e
|
||||
<code>EliBadge</code>.
|
||||
</p>
|
||||
|
||||
<EliOlaMundo />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { EliOlaMundo } from "@/componentes/ola_mundo";
|
||||
|
||||
export default defineComponent({
|
||||
name: "OlaMundoPlayground",
|
||||
components: { EliOlaMundo },
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.stack {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.muted {
|
||||
opacity: 0.75;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue