@teammodlr/ui-kit 2.1.1 → 2.1.3

package/src/components/table/Table.vue

@@ -6,13 +6,26 @@
             :class="tableComputedClasses"
         >
             <TableHeadRow>
+                <TableHead
+                    v-if="modelValue"
+                    scope="col"
+                    :width="20"
+                >
+                    <MCheckbox 
+                        :checked="indeterminate || selected.length === items.length" 
+                        :indeterminate="indeterminate"
+                        @change="onChange"
+                    />
+                </TableHead>
                 <TableHead
                     v-for="(header, index) in headers"
                     :key="index"
                     :width="header.width"
                     :style="{textAlign: header.align}"
                 >
-                    {{ header.name }}
+                    <slot :name="`${header.key}-header`">
+                        {{ header.name }}
+                    </slot>
                 </TableHead>
             </TableHeadRow>
             <TableBody>
@@ -22,11 +35,19 @@
                     :key="index"
                     #default="{ onHover }"
                 >
+                    <TableCell
+                        v-if="modelValue"
+                        >
+                        <MCheckbox 
+                            v-model="selected"
+                            :value="item"
+                            @click.stop
+                        />
+                    </TableCell>
                     <TableCell
                         v-for="(header, index) in headers"
                         :key="index"
                         :style="{ textAlign: header.align}"
-                        @click.self="$emit('onClick', item)"
                     >
                         <slot :name="header.key" :item="item" :onHover="onHover">
                             {{//@ts-ignore
@@ -45,14 +66,17 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType } from 'vue';
+import { computed, defineComponent, type PropType, toRaw } from 'vue';
 import type { TableHeadItem } from './types';
 import TableHeadRow from './TableHeadRow.vue';
 import TableHead from './TableHead.vue';
 import TableBody from './TableBody.vue';
 import TableRow from './TableRow.vue';
 import TableCell from './TableCell.vue';
+import MCheckbox from '../checkbox/Checkbox.vue';
+
 import * as style from "./style";
+import { indeterminate } from '../checkbox/style';
 
 export default defineComponent({
     name: "Table",
@@ -61,13 +85,17 @@ export default defineComponent({
         TableHead,
         TableBody,
         TableRow,
-        TableCell
+        TableCell,
+        MCheckbox
     },
     emits: [
-        'update:sort',
-        'onClick'
+        'update:modelValue',
     ],
     props: {
+        modelValue: {
+            type: Array,
+            default: null
+        },
         headers: {
             type: Array as PropType<Array<TableHeadItem>>,
             default: () => [],
@@ -89,7 +117,7 @@ export default defineComponent({
             default: false
         },
     },
-    setup(props) {
+    setup(props, { emit, attrs }) {
 
         const wrapperComputedClasses = computed(() => {
             return [
@@ -111,9 +139,59 @@ export default defineComponent({
             ]
         });
 
+        const selected = computed({
+            get() {
+                return props.modelValue;
+            }, 
+            set(value) {
+                emit('update:modelValue', value);
+            }
+        });
+
+        const indeterminate = computed(() => {
+            return selected.value && selected.value.length > 0 && selected.value.length < props.items.length;
+        });
+
+        function compare (a: any, z: any) {
+            return a === z;
+        }
+
+        function onSelect (row: any) {
+            
+            if (!attrs.onSelect) {
+                selected.value.push(row);
+                return;
+            }
+
+            // @ts-ignore
+            attrs.onSelect(row);
+        }
+
+        function selectAllRows() {
+            props.items.forEach((row: any) => {
+                if (selected.value.some((item) => compare(toRaw(item), toRaw(row)))) {
+                    return
+                }
+
+                onSelect(row);
+            });
+        }
+
+        function onChange (event: any) {
+            if (event.target.checked) {
+                selectAllRows();
+            } else {
+                selected.value = [];
+            }
+        }
+
         return {
             wrapperComputedClasses,
-            tableComputedClasses
+            tableComputedClasses,
+            selected,
+            indeterminate,
+            onChange,
+            onSelect
         }
     }
 })

package/src/components/table/examples/basic.vue

@@ -26,6 +26,11 @@ import { ref } from "vue";
 import type { TableHeadItem } from "../types";
 
 let headers = ref<TableHeadItem[]>([
+    {
+        name: "ID",
+        key: "id",
+        width: 50
+    },
     {
         name: "Name",
         key: "name",
@@ -42,13 +47,13 @@ let headers = ref<TableHeadItem[]>([
     }
 ]);
 
-let items = ref([
-    ...Array.from({ length: 30 }, () => ({
+let items = [
+    ...Array.from({ length: 30 }, (v, i) => ({
+        id: i,
         name: "John Doe",
         age: 4
     }))
-
-]);
+];
 
 const handleClick = (item: any) => {
     console.log(item);

package/src/components/table/examples/index.stories.ts

@@ -1,7 +1,9 @@
 import MTable from "../Table.vue";
 import MButton from "../../button/Button.vue";
 import {
-    MTableBasic, MTableEmpty
+    MTableBasic,
+    MTableEmpty,
+    MTableSelected
 } from "./index";
 
 import {
@@ -18,3 +20,4 @@ export default {
 
 export const Basic = createStory(MTableBasic);
 export const Empty = createStory(MTableEmpty);
+export const Selected = createStory(MTableSelected);

package/src/components/table/examples/index.ts

@@ -1,2 +1,3 @@
 export { default as MTableBasic } from './basic.vue';
 export { default as MTableEmpty } from './empty.vue';
+export { default as MTableSelected } from './selected.vue';

package/src/components/table/examples/selected.vue

@@ -0,0 +1,68 @@
+<template>
+    <MTable 
+        :headers="headers"
+        :items="items"
+        @onClick="handleClick"
+        v-model="selected"
+    >
+        <template #name-header="{ item }">
+            Custom header slot if need be
+        </template>
+        <template #actions="{ item, onHover }">
+            {{ onHover }}
+            <MButton
+                color="blue"
+                secondary
+                size="sm"
+            >
+                Edit - {{ item.name }}
+            </MButton>
+        </template>
+
+        <template #empty>
+            Nothing here
+        </template>
+    </MTable>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { TableHeadItem } from "../types";
+
+let headers = ref<TableHeadItem[]>([
+    {
+        name: "ID",
+        key: "id",
+        width: 50
+    },
+    {
+        name: "Name",
+        key: "name",
+        width: 200
+    },
+    {
+        name: "Age",
+        key: "age",
+    },
+    {
+        name: "Actions",
+        key: "actions",
+        align: "right"
+    }
+]);
+
+let items = [
+    ...Array.from({ length: 30 }, (v, i) => ({
+        id: i,
+        name: "John Doe",
+        age: 4
+    }))
+];
+
+let selected = ref([items[0]]);
+
+const handleClick = (item: any) => {
+    console.log(item);
+}
+
+</script>

package/src/composables/useInput.ts

@@ -117,7 +117,7 @@ useInput.emits = (withListeners: boolean = true): string[] => {
 }
 
 useInput.props = () => ({
-    modelValue: [String, Number, Boolean, Object, Array] as PropType<string | number | boolean | object | any[] | undefined>,
+    modelValue: [String, Number, Boolean, Object, Array] as PropType<string | number | boolean | object | Array<any> | any[] | undefined>,
     name: String,
     readonly: Boolean,
     required: Boolean,