@groupteknology/vuno 1.0.0 → 2.0.0

package/dist/runtime/app/components/Table/Table.vue

@@ -0,0 +1,483 @@
+<script setup>
+import { computed, useId, useTemplateRef } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import { cn } from "#vuno/utils/theme";
+import Badge from "#vuno/components/Badge/Badge.vue";
+import Button from "#vuno/components/Button/Button.vue";
+import Checkbox from "#vuno/components/FieldCheckbox/internal/Checkbox/Checkbox.vue";
+import FieldSearch from "#vuno/components/FieldSearch/FieldSearch.vue";
+import Form from "#vuno/components/Form/Form.vue";
+import ControlShell from "#vuno/components/internal/ControlShell/ControlShell.vue";
+import Menu from "#vuno/components/Menu/Menu.vue";
+import Pagination from "#vuno/components/Pagination/Pagination.vue";
+import Slideover from "#vuno/components/Slideover/Slideover.vue";
+import State from "#vuno/components/State/State.vue";
+import { resolveColumnValue } from "./internal/column";
+import TableCell from "./internal/TableCell/TableCell.vue";
+import { useVunoTable } from "./internal/useVunoTable";
+import { useVunoTableSelection } from "./internal/useVunoTableSelection";
+defineOptions({ name: "VunoTable" });
+const query = defineModel("query", { type: Object, ...{ required: true } });
+const selection = defineModel("selection", { type: Array, ...{ default: () => [] } });
+const props = defineProps({
+  data: { type: Array, required: true },
+  definition: { type: Object, required: true },
+  failure: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  radius: { type: String, required: false },
+  total: { type: Number, required: false },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["rowClick"]);
+defineSlots();
+const total = computed(() => props.total ?? 0);
+const hasFailure = computed(() => Boolean(props.failure));
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme(
+  "table",
+  () => props.ui,
+  () => ({ radius: props.radius })
+);
+const table = useVunoTable({
+  query,
+  selection,
+  definition: () => props.definition,
+  total: () => total.value
+});
+const { activeFilters, applyFilters, clearFilters, clearQuery, clearSelection, columns, filtersDefinition, filtersOpen, filterState, getRowId, goToPage, isFiltered, pageSizes, paginated, rangeEnd, rangeStart, removeFilter, search, searchable, setPageSize, sortDirectionFor, toggleSort } = table;
+const searchField = useTemplateRef("searchField");
+const rows = computed(() => hasFailure.value ? [] : props.data);
+const footerId = useId();
+const skippable = computed(() => rows.value.length > 3 && total.value > 0 && !hasFailure.value);
+const columnCount = computed(() => Math.max(columns.value.length + (props.definition.selectable ? 1 : 0), 1));
+const { allSelected, isSelected, rowLabel, someSelected, toggleAll, toggleRow } = useVunoTableSelection({
+  columns,
+  getRowId,
+  selection,
+  definition: () => props.definition,
+  rowName: () => messages.value.row,
+  rows: () => rows.value
+});
+function ariaSortFor(key) {
+  const column = columns.value.find((item) => item.key === key);
+  if (!column?.sortable) return void 0;
+  const direction = sortDirectionFor(key);
+  if (direction === "asc") return "ascending";
+  if (direction === "desc") return "descending";
+  return "none";
+}
+function clearSearch() {
+  table.clearSearch();
+  searchField.value?.focus();
+}
+function updateSearch(value) {
+  if (value === "") {
+    clearSearch();
+    return;
+  }
+  search.value = value ?? "";
+}
+function sortIcon(key) {
+  const direction = sortDirectionFor(key);
+  if (direction === "asc") return icons.value.sortAsc;
+  if (direction === "desc") return icons.value.sortDesc;
+  return icons.value.sort;
+}
+defineExpose({
+  clearFilters,
+  clearQuery,
+  clearSearch,
+  clearSelection,
+  goToPage
+});
+</script>
+
+<template>
+    <div :class="ui.root">
+        <div
+            v-if="searchable || (props.definition.filters?.length ?? 0) > 0 || $slots.toolbar"
+            :class="ui.toolbar"
+        >
+            <FieldSearch
+                v-if="searchable"
+                ref="searchField"
+                :modelValue="search"
+                :placeholder="props.definition.searchPlaceholder ?? messages.searchPlaceholder"
+                :ui="{ root: ui.search }"
+                @update:model-value="updateSearch"
+            />
+
+            <div :class="ui.toolbarActions">
+                <Button
+                    v-if="(props.definition.filters?.length ?? 0) > 0"
+                    color="neutral"
+                    :icon="icons.filter"
+                    :label="messages.filters"
+                    variant="outline"
+                    @click="filtersOpen = true"
+                >
+                    <!-- `UButton` no admite `badge`: el contador va en el slot. -->
+                    <template
+                        v-if="activeFilters.length > 0"
+                        #trailing
+                    >
+                        <Badge
+                            color="primary"
+                            :label="String(activeFilters.length)"
+                            size="sm"
+                            variant="solid"
+                        />
+                    </template>
+                </Button>
+
+                <slot
+                    name="toolbar"
+                    :query="query"
+                />
+            </div>
+        </div>
+
+        <div
+            v-if="props.definition.selectable && selection.length > 0"
+            :class="ui.selection"
+        >
+            <slot
+                :clear="clearSelection"
+                :count="selection.length"
+                :keys="selection"
+                name="selection"
+            >
+                <span>{{ selection.length }} {{ selection.length === 1 ? messages.rowSelected : messages.rowsSelected }}</span>
+                <Button
+                    color="neutral"
+                    :label="messages.clearSelection"
+                    size="xs"
+                    variant="ghost"
+                    @click="clearSelection"
+                />
+            </slot>
+        </div>
+
+        <div
+            v-if="activeFilters.length > 0"
+            :class="ui.chips"
+        >
+            <Badge
+                v-for="filter in activeFilters"
+                :key="filter.name"
+                color="neutral"
+                variant="subtle"
+            >
+                <span>{{ filter.label }}: {{ filter.value }}</span>
+                <Button
+                    :aria-label="`${messages.clearFilters}: ${filter.label}`"
+                    color="neutral"
+                    :icon="icons.fileRemove"
+                    size="xs"
+                    variant="link"
+                    @click="removeFilter(filter.name)"
+                />
+            </Badge>
+
+            <Button
+                color="neutral"
+                :label="messages.clearFilters"
+                size="xs"
+                variant="ghost"
+                @click="clearFilters"
+            />
+        </div>
+
+        <!-- El panel comparte el `<dialog>` nativo de `VModal`: así hereda el
+             foco, el portal y la capa superior sin mezclar geometrías. -->
+        <Slideover
+            v-model:open="filtersOpen"
+            position="end"
+            :title="messages.filtersTitle"
+        >
+            <template #body>
+                <Form
+                    v-model:state="filterState"
+                    :definition="filtersDefinition"
+                    :ui="{ sections: ui.filtersBody }"
+                />
+            </template>
+
+            <template #footer>
+                <div :class="ui.filtersFooter">
+                    <Button
+                        color="neutral"
+                        :label="messages.clearFilters"
+                        variant="ghost"
+                        @click="clearFilters"
+                    />
+                    <Button
+                        :label="messages.applyFilters"
+                        @click="applyFilters"
+                    />
+                </div>
+            </template>
+        </Slideover>
+
+        <!--
+            La tabla se pinta aquí y no la pinta `UTable`. Lo único que aportaba
+            era el `rowSelection`, y esa ya no es la fuente de verdad: lo es
+            `selection`, la lista de claves que sale por `v-model:selection`. El
+            `Record<string, boolean>` existía solo para hablar con TanStack, que
+            además corría con su motor apagado —`manualPagination` y
+            `manualSorting`—, porque quien pagina y ordena es el servidor.
+
+            El marco va en el contenedor, que es quien tiene el desplazamiento
+            horizontal: en la `<table>` obligaría a `border-separate` y con eso
+            el navegador deja de pintar las líneas entre filas.
+        -->
+        <a
+            v-if="skippable"
+            :class="ui.skip"
+            :href="`#${footerId}`"
+            >{{ messages.skipTable }}</a
+        >
+
+        <div
+            :class="ui.tableRoot"
+            tabindex="0"
+        >
+            <table :class="ui.table">
+                <thead :class="ui.thead">
+                    <tr :class="ui.headRow">
+                        <th
+                            v-if="props.definition.selectable"
+                            :class="[ui.th, ui.selectCell]"
+                            scope="col"
+                        >
+                            <Checkbox
+                                :aria-label="messages.selectAll"
+                                :indeterminate="someSelected"
+                                :modelValue="allSelected"
+                                @update:model-value="(checked) => toggleAll(checked === true)"
+                            />
+                        </th>
+
+                        <!--
+                            `aria-sort` lo pone la tabla y no lo ponía `UTable`:
+                            sin él, quien no ve la pantalla oye el nombre de la
+                            columna y el botón, pero no por cuál está ordenada la
+                            lista ni en qué sentido. Es una mejora, no paridad.
+                        -->
+                        <th
+                            v-for="item in columns"
+                            :key="item.key"
+                            :aria-sort="ariaSortFor(item.key)"
+                            :class="cn(ui.th, item.headerClass)"
+                            scope="col"
+                        >
+                            <Button
+                                v-if="item.sortable"
+                                color="neutral"
+                                :icon="sortIcon(item.key)"
+                                :label="item.label"
+                                size="xs"
+                                trailing
+                                :ui="{ base: ui.sortButton }"
+                                variant="ghost"
+                                @click="toggleSort(item.key)"
+                            />
+                            <span v-else>{{ item.label }}</span>
+                        </th>
+                    </tr>
+                </thead>
+
+                <tbody :class="ui.tbody">
+                    <tr
+                        v-for="(row, index) in rows"
+                        :key="getRowId(row)"
+                        :class="ui.tr"
+                        :data-selected="isSelected(row) ? 'true' : void 0"
+                        @click="emit('rowClick', row)"
+                    >
+                        <!-- `stop` en la casilla: marcar una fila no es abrirla. -->
+                        <td
+                            v-if="props.definition.selectable"
+                            :class="[ui.td, ui.selectCell]"
+                            @click.stop
+                        >
+                            <!-- El nombre lleva dentro el de la fila: sin eso, veinte casillas se llaman igual. -->
+                            <Checkbox
+                                :aria-label="`${messages.selectRow} ${rowLabel(row, index)}`"
+                                :modelValue="isSelected(row)"
+                                @update:model-value="(checked) => toggleRow(row, checked === true)"
+                            />
+                        </td>
+
+                        <td
+                            v-for="item in columns"
+                            :key="item.key"
+                            :class="cn(ui.td, item.cellClass)"
+                        >
+                            <Menu
+                                v-if="item.column.type === 'actions'"
+                                :items="
+  item.column.actions.filter((action) => !action.hidden?.(row)).map((action) => ({
+    onSelect: () => action.onSelect(row),
+    color: action.color,
+    disabled: action.disabled?.(row) ?? false,
+    icon: action.icon,
+    label: action.label,
+    separator: action.separator
+  }))
+"
+                            >
+                                <Button
+                                    :aria-label="`${messages.rowActions} ${rowLabel(row, index)}`"
+                                    color="neutral"
+                                    :icon="icons.actions"
+                                    size="xs"
+                                    variant="ghost"
+                                />
+                            </Menu>
+
+                            <slot
+                                v-else
+                                :name="`cell-${item.key}`"
+                                :row="row"
+                                :value="resolveColumnValue(item.column, row)"
+                            >
+                                <TableCell
+                                    :column="item.column"
+                                    :row="row"
+                                />
+                            </slot>
+                        </td>
+                    </tr>
+
+                    <tr v-if="rows.length === 0">
+                        <td
+                            :class="ui.emptyCell"
+                            :colspan="columnCount"
+                        >
+                            <!-- Un fallo y una lista vacía no son lo mismo: el
+                                 primero ofrece reintentar, el segundo invita a
+                                 crear el primero. -->
+                            <State
+                                v-if="props.failure"
+                                :failure="props.failure"
+                                tone="failure"
+                            />
+
+                            <!-- Cargando y sin filas todavía no es «no hay
+                                 nada»: decirlo antes de tiempo hace parpadear
+                                 la tabla en cada cambio. -->
+                            <div v-else-if="props.loading" />
+
+                            <!-- Con `total` por encima de cero y sin filas, lo
+                                 que falta es la página, no los datos. Se corrige
+                                 sola arriba; entretanto no se afirma que no
+                                 haya nada. -->
+                            <div v-else-if="total > 0" />
+
+                            <!-- Buscando o filtrando, «no hay nada» sería falso:
+                                 lo que no hay es nada que case. Lo primero
+                                 invita a crear el primer registro y lo segundo
+                                 a quitar el filtro. -->
+                            <slot
+                                v-else-if="isFiltered"
+                                :clear="clearQuery"
+                                name="no-matches"
+                            >
+                                <State
+                                    :hint="messages.noMatchesHint"
+                                    :icon="icons.noMatches"
+                                    :title="messages.noMatches"
+                                >
+                                    <template #actions>
+                                        <slot
+                                            :clear="clearQuery"
+                                            name="no-matches-actions"
+                                        >
+                                            <Button
+                                                color="neutral"
+                                                :label="messages.clearQuery"
+                                                variant="outline"
+                                                @click="clearQuery"
+                                            />
+                                        </slot>
+                                    </template>
+                                </State>
+                            </slot>
+
+                            <slot
+                                v-else
+                                name="empty"
+                            >
+                                <State
+                                    :hint="props.definition.empty?.hint"
+                                    :icon="props.definition.empty?.icon"
+                                    :title="props.definition.empty?.title"
+                                >
+                                    <template #actions>
+                                        <slot name="empty-actions" />
+                                    </template>
+                                </State>
+                            </slot>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div
+            v-if="total > 0 && !hasFailure"
+            :id="footerId"
+            :class="ui.footer"
+            tabindex="-1"
+        >
+            <div :class="ui.meta">
+                <span v-if="paginated">{{ messages.showing }} {{ rangeStart }}–{{ rangeEnd }} {{ messages.of }} {{ total }}</span>
+
+                <!-- Sin paginar, un rango «1–30 de 30» sugiere que hay más. -->
+                <span v-else>{{ total }} {{ messages.results }}</span>
+
+                <!--
+                    Un `<select>` nativo y no un combobox: son cinco números sin
+                    búsqueda ni selección múltiple, y el navegador ya resuelve
+                    el teclado, el foco y la lista —en el móvil, con su propia
+                    rueda—. La caja la pone `ControlShell` para que se vea como
+                    los demás controles.
+
+                    El ancho va por `ui` porque pelea con el `w-full` del tema;
+                    puesto como `class` sobre el componente convivirían los dos.
+                -->
+
+                <ControlShell
+                    v-if="paginated"
+                    size="xs"
+                    :ui="{ root: ui.pageSizeControl }"
+                >
+                    <select
+                        :aria-label="messages.pageSize"
+                        :class="ui.pageSizeSelect"
+                        :value="query.pageSize"
+                        @change="(event) => setPageSize(Number(event.target.value))"
+                    >
+                        <option
+                            v-for="size in pageSizes"
+                            :key="size"
+                            :value="size"
+                        >
+                            {{ size }}
+                        </option>
+                    </select>
+                </ControlShell>
+            </div>
+
+            <Pagination
+                v-if="paginated"
+                :page="query.page"
+                :pageSize="query.pageSize"
+                :total="total"
+                @update:page="goToPage"
+            />
+        </div>
+    </div>
+</template>

package/dist/runtime/app/components/Table/Table.vue.d.ts

@@ -0,0 +1,80 @@
+import type { VunoRadius } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+import type { VunoTableDefinition, VunoTableFailure, VunoTableQuery, VunoTableRow } from '#vuno/types/table';
+declare const __VLS_export: <TRow extends VunoTableRow>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
+        data: TRow[];
+        definition: VunoTableDefinition<TRow>;
+        /**
+         * Fallo de la consulta. Sin esto, un error se pintaría como «no hay
+         * resultados» y la tabla afirmaría que no hay nada cuando en realidad
+         * no se pudo saber.
+         */
+        failure?: VunoTableFailure;
+        loading?: boolean;
+        /** La curvatura. Sin valor, la que traiga el tema. */
+        radius?: VunoRadius;
+        /** Total de filas en servidor, no las de la página actual. */
+        total?: number;
+        ui?: VunoUi<"table">;
+    } & {
+        /**
+             * Estado de consulta. El consumidor lo observa y devuelve `data` y `total`.
+             *
+             * Es obligatorio a propósito: la tabla no trae datos por sí misma, así que
+             * un estado interno avanzaría de página sin que nadie pidiera la siguiente
+             * —el pie diría «11-20» mientras se siguen viendo las filas 1-10—. Dónde
+             * vive ese estado lo decide `useTableQuery`: un `ref` normal o la
+             * query string.
+             */
+        query: VunoTableQuery;
+        /** Claves de las filas seleccionadas, no las filas: con paginación en servidor las de otras páginas no están cargadas. */
+        selection?: (number | string)[];
+    }) & {
+        onRowClick?: ((row: TRow) => any) | undefined;
+        "onUpdate:query"?: ((value: VunoTableQuery) => any) | undefined;
+        "onUpdate:selection"?: ((value: (string | number)[]) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        clearFilters: () => void;
+        clearQuery: () => void;
+        clearSearch: () => void;
+        clearSelection: () => void;
+        goToPage: (page: number) => void;
+    }>) => void;
+    attrs: any;
+    slots: {
+        [key: `cell-${string}`]: (props: {
+            row: TRow;
+            value: unknown;
+        }) => unknown;
+        empty?: () => unknown;
+        'empty-actions'?: () => unknown;
+        'no-matches'?: (props: {
+            clear: () => void;
+        }) => unknown;
+        'no-matches-actions'?: (props: {
+            clear: () => void;
+        }) => unknown;
+        selection?: (props: {
+            count: number;
+            keys: (number | string)[];
+            clear: () => void;
+        }) => unknown;
+        toolbar?: (props: {
+            query: VunoTableQuery;
+        }) => unknown;
+    };
+    emit: ((evt: "rowClick", row: TRow) => void) & (((event: "update:query", value: VunoTableQuery) => void) & ((event: "update:selection", value: (string | number)[]) => void));
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/app/components/Table/internal/CellBadge/CellBadge.d.vue.ts

@@ -0,0 +1,5 @@
+import type { VunoTableCellProps } from '#vuno/types/table';
+type __VLS_Props = VunoTableCellProps<'badge'>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Table/internal/CellBadge/CellBadge.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { computed } from "vue";
+import Badge from "#vuno/components/Badge/Badge.vue";
+defineOptions({ name: "VunoCellBadge" });
+const props = defineProps({
+  column: { type: null, required: true },
+  row: { type: Object, required: true },
+  value: { type: null, required: true }
+});
+const text = computed(() => props.value === null || props.value === void 0 ? "" : String(props.value));
+const badge = computed(() => {
+  const entry = props.column.map?.[text.value];
+  return {
+    color: entry?.color ?? props.column.color ?? "neutral",
+    label: entry?.label ?? text.value
+  };
+});
+</script>
+
+<template>
+    <Badge
+        :color="badge.color"
+        :label="badge.label"
+        variant="subtle"
+    />
+</template>

package/dist/runtime/app/components/Table/internal/CellBadge/CellBadge.vue.d.ts

@@ -0,0 +1,5 @@
+import type { VunoTableCellProps } from '#vuno/types/table';
+type __VLS_Props = VunoTableCellProps<'badge'>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Table/internal/CellBoolean/CellBoolean.d.vue.ts

@@ -0,0 +1,5 @@
+import type { VunoTableCellProps } from '#vuno/types/table';
+type __VLS_Props = VunoTableCellProps<'boolean'>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Table/internal/CellBoolean/CellBoolean.theme.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Las celdas de la tabla. Estaban fuera del tema: el color del sí y del no
+ * y el ancho al que se corta un texto se decidían en el componente, así que
+ * un proyecto no tenía dónde cambiar lo primero que suele querer cambiar.
+ */
+export declare const cellBooleanTheme: Record<"cellBoolean", {
+    readonly slots: {
+        readonly icon: "";
+        readonly label: "";
+    };
+    readonly variants: {
+        readonly value: {
+            readonly false: {
+                readonly icon: "text-vuno-muted";
+            };
+            readonly true: {
+                readonly icon: "text-vuno-success";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/Table/internal/CellBoolean/CellBoolean.theme.js

@@ -0,0 +1,11 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const cellBooleanTheme = defineTheme("cellBoolean", {
+  slots: { icon: "", label: "" },
+  /* El color sale de la variante y no de la plantilla. */
+  variants: {
+    value: {
+      false: { icon: "text-vuno-muted" },
+      true: { icon: "text-vuno-success" }
+    }
+  }
+});

package/dist/runtime/app/components/Table/internal/CellBoolean/CellBoolean.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { computed } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/components/Icon/Icon.vue";
+defineOptions({ name: "VunoCellBoolean" });
+const props = defineProps({
+  column: { type: null, required: true },
+  row: { type: Object, required: true },
+  value: { type: null, required: true }
+});
+const icons = useIcons();
+const messages = useMessages();
+const label = computed(() => props.value ? props.column.trueLabel : props.column.falseLabel);
+const accessibleLabel = computed(() => label.value || (props.value ? messages.value.booleanTrue : messages.value.booleanFalse));
+const ui = useTheme("cellBoolean", void 0, () => ({ value: props.value ? "true" : "false" }));
+</script>
+
+<template>
+    <span
+        v-if="label"
+        :class="ui.label"
+        >{{ label }}</span
+    >
+
+    <template v-else>
+        <Icon
+            :class="ui.icon"
+            :name="props.value ? icons.booleanTrue : icons.booleanFalse"
+        />
+        <span class="sr-only">{{ accessibleLabel }}</span>
+    </template>
+</template>