refactor: make select all th cell clickabel (refs SFKUI-76050)

Author: MCFK

packages/vue-labs/src/components/FTable/ITableHeaderSelectable.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed, useTemplateRef } from "vue";
+import { assertRef } from "@fkui/logic";
 import { useTranslate } from "@fkui/vue";
+import { activateCell } from "./FTable.logic";
 import { type FTableCellApi } from "./f-table-api";
 
 const { selectable, state } = defineProps<{ selectable: "single" | "multi"; state: boolean | "indeterminate" }>();
@@ -20,16 +22,25 @@ const ariaLabel = computed(() => {
         ? $t("fkui.ftable.select-all.aria-label", "Välj alla rader")
         : $t("fkui.ftable.unselect-all.aria-label", "Avmarkera alla rader");
 });
+const inputRef = useTemplateRef("input");
 if (selectable === "multi") {
-    const inputRef = useTemplateRef("input");
     expose.tabstopEl = inputRef;
 }
 
+function onClick(e: Event): void {
+    if (selectable !== "multi") {
+        return;
+    }
+    e.stopPropagation();
+    assertRef(inputRef);
+    activateCell(inputRef.value, { focus: true });
+    emit("toggle");
+}
 defineExpose(expose);
 </script>
 
 <template>
-    <th scope="col" class="table-ng__column table-ng__column--selectable">
+    <th scope="col" class="table-ng__column table-ng__column--selectable" @click="onClick">
         <input
             v-if="selectable === 'multi'"
             ref="input"
@@ -38,7 +49,7 @@ defineExpose(expose);
             type="checkbox"
             :aria-label
             tabindex="-1"
-            @change="emit('toggle')"
+            @click="onClick"
         />
     </th>
 </template>