| 1 | <template> |
| 2 | <div class="border-border divide-border grid grid-cols-4 divide-x rounded-md border"> |
| 3 | <n-tooltip v-for="flag in includeFlags" :key="flag.key" class="px-2! py-1!"> |
| 4 | <template #trigger> |
| 5 | <div |
| 6 | class="flex flex-col items-center justify-center" |
| 7 | :class="size === 'large' ? 'gap-1 px-2 py-2.5' : 'gap-0 px-1 py-0.5'" |
| 8 | > |
| 9 | <span :class="size === 'large' ? 'text-sm' : 'text-xs'"> |
| 10 | {{ flag.shortLabel }} |
| 11 | </span> |
| 12 | <Icon |
| 13 | :name="config[flag.key] ? 'carbon:checkmark' : 'carbon:close'" |
| 14 | :class="config[flag.key] ? 'text-success' : 'text-error'" |
| 15 | /> |
| 16 | </div> |
| 17 | </template> |
| 18 | <span :class="size === 'large' ? 'text-sm' : 'text-xs'">{{ flag.label }}</span> |
| 19 | </n-tooltip> |
| 20 | </div> |
| 21 | </template> |
| 22 | |
| 23 | <script setup lang="ts"> |
| 24 | import type { GitHubAuditConfig } from "@/types/githubAudit.d" |
| 25 | import { NTooltip } from "naive-ui" |
| 26 | import Icon from "@/components/common/Icon.vue" |
| 27 | |
| 28 | type IncludeFlagKey = "include_archived_repos" | "include_members" | "include_repos" | "include_workflows" |
| 29 | |
| 30 | type FlagSize = "small" | "large" |
| 31 | |
| 32 | withDefaults( |
| 33 | defineProps<{ |
| 34 | config: GitHubAuditConfig |
| 35 | size?: FlagSize |
| 36 | }>(), |
| 37 | { size: "small" } |
| 38 | ) |
| 39 | |
| 40 | const includeFlags: { key: IncludeFlagKey; shortLabel: string; label: string }[] = [ |
| 41 | { key: "include_archived_repos", shortLabel: "A", label: "Include archived repos" }, |
| 42 | { key: "include_members", shortLabel: "M", label: "Include members" }, |
| 43 | { key: "include_repos", shortLabel: "R", label: "Include repos" }, |
| 44 | { key: "include_workflows", shortLabel: "W", label: "Include workflows" } |
| 45 | ] |
| 46 | </script> |