refactor: standardize checkbox component

Author: magdielcardoso

web/src/components/applications/DomainsPanel.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
 import BaseModal from "../ui/BaseModal.vue";
+import Checkbox from "../ui/Checkbox.vue";
 import { api, RequestError } from "../../composables/useApi";
 import { useToast } from "../../composables/useToast";
 
@@ -111,8 +112,8 @@ onMounted(load);
         <label v-if="props.services.length">Serviço<select v-model="serviceName" required><option v-for="service in props.services" :key="service" :value="service">{{ service }}</option></select></label>
         <label v-else>Serviço<input v-model="serviceName" required placeholder="web" /></label>
         <label>Porta<input v-model.number="targetPort" type="number" min="1" max="65535" required /></label>
-        <label class="checkbox"><input v-model="httpsEnabled" type="checkbox" /> HTTPS automático</label>
-        <label class="checkbox"><input v-model="redirectHttps" type="checkbox" /> Redirecionar HTTP</label>
+        <Checkbox v-model="httpsEnabled" label="HTTPS automático" />
+        <Checkbox v-model="redirectHttps" label="Redirecionar HTTP" />
       </form>
       <template #footer><button class="secondary" type="button" :disabled="saving" @click="addOpen = false">Cancelar</button><button class="primary" form="add-domain-form" type="submit" :disabled="saving">{{ saving ? "Salvando…" : "Adicionar domínio" }}</button></template>
     </BaseModal>
@@ -124,7 +125,7 @@ onMounted(load);
 .domain-form { display: grid; grid-template-columns: minmax(220px, 1.5fr) minmax(140px, 1fr) 110px; gap: 14px; align-items: end; }
 .domain-form label { display: grid; gap: 7px; color: #b9bec9; font-size: 12px; }
 .domain-form input, .domain-form select { min-width: 0; border: 1px solid #343842; border-radius: 7px; padding: 10px 11px; background: #17191e; color: #e7e9ee; }
-.domain-form .checkbox { display: flex; align-items: center; gap: 7px; }
+.domain-form .checkbox { display: flex; align-items: center; gap: 7px; font-size: 14px; line-height: 1.2; }
 .domain-form .checkbox input { accent-color: #e8f55b; }
 .domain-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
 .domain-list li { display: grid; gap: 10px; padding: 16px; border: 1px solid #2a2d34; border-radius: 10px; background: #17191e; }

web/src/components/applications/EnvironmentVariablesEditor.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
+import Checkbox from "../ui/Checkbox.vue";
 type Variable = {
   key: string;
   value: string;
@@ -46,9 +47,7 @@ function valueFor(item: DetectedVariable) { return props.modelValue.find((variab
         placeholder="Valor"
         :type="draft.secret ? 'password' : 'text'"
       />
-      <label class="check"
-        ><input v-model="draft.secret" type="checkbox" /> Secret</label
-      >
+      <Checkbox v-model="draft.secret" label="Secret" />
       <button class="secondary" type="button" @click="add">Adicionar</button>
     </div>
     <p v-if="!modelValue.length" class="muted">Nenhuma variável configurada.</p>

web/src/components/applications/LogsPanel.vue

@@ -2,6 +2,7 @@
 import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
 import { api } from "../../composables/useApi";
 import { useToast } from "../../composables/useToast";
+import Checkbox from "../ui/Checkbox.vue";
 
 const props = defineProps<{ applicationId: number }>();
 const toast = useToast();
@@ -55,7 +56,7 @@ onUnmounted(stopFollowing);
 <template>
   <section class="logs-panel">
     <div class="section-head"><div><p class="kicker">LOGS</p><h2>Saída operacional</h2><p class="muted">{{ connected ? "Conectado em tempo real" : "Histórico do serviço" }}</p></div><div class="log-actions"><button class="ghost" type="button" :disabled="!logs" @click="copyLogs">Copiar</button><button class="ghost" type="button" :disabled="!logs" @click="downloadLogs">Baixar</button><button class="ghost" type="button" :disabled="!logs" @click="logs = ''">Limpar</button><button class="secondary" type="button" :class="{ active: following }" @click="toggleFollowing">{{ following ? "Pausar" : "Acompanhar" }}</button></div></div>
-    <div class="logs-toolbar"><label>Serviço<select v-model="service"><option v-for="item in services" :key="item" :value="item">{{ item }}</option></select></label><label>Linhas<select v-model.number="tail"><option :value="100">100</option><option :value="500">500</option><option :value="1000">1000</option></select></label><label>Buscar<input v-model="query" type="search" placeholder="Filtrar linhas" /></label><label class="checkbox"><input v-model="autoScroll" type="checkbox" /> Auto-scroll</label><button class="ghost" type="button" @click="loadLogs">Atualizar</button></div>
+    <div class="logs-toolbar"><label>Serviço<select v-model="service"><option v-for="item in services" :key="item" :value="item">{{ item }}</option></select></label><label>Linhas<select v-model.number="tail"><option :value="100">100</option><option :value="500">500</option><option :value="1000">1000</option></select></label><label>Buscar<input v-model="query" type="search" placeholder="Filtrar linhas" /></label><Checkbox v-model="autoScroll" label="Auto-scroll" /><button class="ghost" type="button" @click="loadLogs">Atualizar</button></div>
     <pre ref="viewer" class="logs-viewer" :aria-busy="loading">{{ (logs.split("\n").filter((line) => !query || line.toLowerCase().includes(query.toLowerCase())).join("\n")) || "Nenhum log disponível para este serviço." }}</pre>
   </section>
 </template>

web/src/components/ui/Checkbox.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+defineProps<{
+  modelValue: boolean;
+  label: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{ "update:modelValue": [value: boolean] }>();
+</script>
+
+<template>
+  <label class="checkbox-control" :class="{ disabled }">
+    <input
+      type="checkbox"
+      :checked="modelValue"
+      :disabled="disabled"
+      @change="emit('update:modelValue', ($event.target as HTMLInputElement).checked)"
+    />
+    <span>{{ label }}</span>
+  </label>
+</template>
+
+<style scoped>
+.checkbox-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  color: #b9bec9;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1.2;
+}
+.checkbox-control.disabled { cursor: not-allowed; opacity: 0.55; }
+.checkbox-control input {
+  appearance: none;
+  width: 48px;
+  height: 48px;
+  flex: 0 0 48px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid #454a55;
+  border-radius: 7px;
+  background: #191c21;
+  cursor: inherit;
+}
+.checkbox-control input:checked {
+  border-color: #e8f55b;
+  background-color: #e8f55b;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4L19 6' fill='none' stroke='%23151616' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 23px;
+}
+.checkbox-control input:focus-visible {
+  outline: 2px solid #e8f55b;
+  outline-offset: -2px;
+}
+</style>