WIP

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

@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="T, K extends keyof T">
 import { computed, useTemplateRef } from "vue";
+import { FIcon } from "@fkui/vue";
 import { type FTableCellApi } from "./f-table-api";
 import { type NormalizedTableColumnCheckbox } from "./table-column";
 
@@ -14,6 +15,10 @@
     return value.length > 0 ? value : undefined;
 });
 
+const checked = computed(() => {
+    return Boolean(column.checked(row));
+});
+
 function onChange(e: Event): void {
     const checked = (e.target as HTMLInputElement).checked;
     column.update(row, checked, !checked);
@@ -25,16 +30,10 @@
 
 <template>
     <td v-if="column.editable(row)" class="table-ng__cell table-ng__cell--checkbox">
-        <input
-            ref="target"
-            :checked="Boolean(column.checked(row))"
-            type="checkbox"
-            :aria-label
-            tabindex="-1"
-            @change="onChange"
-        />
+        <input ref="target" :checked type="checkbox" :aria-label tabindex="-1" @change="onChange" />
     </td>
     <td v-else ref="target" tabindex="-1" class="table-ng__cell table-ng__cell--checkbox">
-        <input :checked="Boolean(column.checked(row))" type="checkbox" :aria-label />
+        <f-icon v-if="checked" :aria-label name="success"></f-icon>
+        <span v-else class="sr-only">{{ ariaLabel }}</span>
     </td>
 </template>

packages/vue-labs/src/components/FTable/examples/FTableExample.vue

@@ -43,6 +43,22 @@ const columns = defineTableColumns<Row>([
         label: (row) => `Välj rad ${row.id}`,
         editable: true,
     },
+    {
+        type: "checkbox",
+        header: "Status",
+        key: "aktiv",
+        size: "shrink",
+        label(row) {
+            if (row.aktiv) {
+                return `Rad ${row.id} är klar`;
+            } else {
+                return `Rad ${row.id} är inte klar`;
+            }
+        },
+        editable(row) {
+            return row.id === "1";
+        },
+    },
     {
         type: "text",
         header: "Formatterad text",
@@ -55,7 +71,7 @@ const columns = defineTableColumns<Row>([
     {
         type: "text",
         header: "Redigerbar text",
-        editable: true,
+
         key: "level",
         label: (row) => `Text för rad ${row.id}`,
         value(row) {
@@ -66,7 +82,10 @@ const columns = defineTableColumns<Row>([
         },
         validation: {
             required: {},
-            maxLength: { length: 5 },
+            maxLength: { length: 55 },
+        },
+        editable(row) {
+            return row.id === "2";
         },
     },
     {
@@ -95,7 +114,9 @@ const columns = defineTableColumns<Row>([
         key: "animal",
         label: (row) => `Djur för rad ${row.id}`,
         options: selectFieldOptions,
-        editable: true,
+        editable(row) {
+            return row.id === "3";
+        },
     },
     {
         header: "Render function",