@katlux/toolkit 0.1.0-beta.1 → 0.1.0-beta.2

package/dist/runtime/components/KCheckbox/KCheckbox.logic.d.ts

@@ -0,0 +1,28 @@
+import { type PropType } from 'vue';
+export interface KCheckboxProps {
+    disabled?: boolean;
+    value?: any;
+}
+/**
+ * KCheckbox Logic Composable
+ *
+ * Contains all business logic for the KCheckbox component
+ */
+export declare function useKCheckboxLogic(props: KCheckboxProps, model: any): {
+    isDisabled: import("vue").ComputedRef<boolean | undefined>;
+    checkboxValue: import("vue").ComputedRef<any>;
+    model: any;
+};
+/**
+ * Default props for KCheckbox
+ */
+export declare const KCheckboxDefaultProps: {
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    value: {
+        type: PropType<any>;
+        default: undefined;
+    };
+};

package/dist/runtime/components/KCheckbox/KCheckbox.logic.js

@@ -0,0 +1,20 @@
+import { computed } from "vue";
+export function useKCheckboxLogic(props, model) {
+  const isDisabled = computed(() => props.disabled);
+  const checkboxValue = computed(() => props.value);
+  return {
+    isDisabled,
+    checkboxValue,
+    model
+  };
+}
+export const KCheckboxDefaultProps = {
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: [String, Number, Boolean, Object],
+    default: void 0
+  }
+};

package/dist/runtime/components/KCombobox/KCombobox.global.d.vue.ts

@@ -0,0 +1,99 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    dataProvider: {
+        type: PropType<import("@katlux/providers").ADataProvider>;
+        required: boolean;
+    };
+    closeOnSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxSelectedDisplay: {
+        type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visibleFields: {
+        type: PropType<Array<String>>;
+        default: null;
+    };
+    labelField: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    modelValue: {
+        type: PropType<import("./KCombobox.logic.js").ComboboxItem | import("./KCombobox.logic.js").ComboboxItem[] | null>;
+        default: null;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    dataProvider: {
+        type: PropType<import("@katlux/providers").ADataProvider>;
+        required: boolean;
+    };
+    closeOnSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxSelectedDisplay: {
+        type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visibleFields: {
+        type: PropType<Array<String>>;
+        default: null;
+    };
+    labelField: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    modelValue: {
+        type: PropType<import("./KCombobox.logic.js").ComboboxItem | import("./KCombobox.logic.js").ComboboxItem[] | null>;
+        default: null;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null) => any) | undefined;
+}>, {
+    disabled: boolean;
+    modelValue: any;
+    searchbox: boolean;
+    placeholder: string;
+    dataProvider: any;
+    closeOnSelect: boolean;
+    multiSelect: boolean;
+    maxSelectedDisplay: string | number | boolean;
+    visibleFields: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KCombobox/KCombobox.global.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { useKComboboxLogic, KComboboxDefaultProps } from "./KCombobox.logic";
+import { usePresetComponent } from "../../composables/usePresetComponent";
+import { computed } from "vue";
+import KComboboxDefault from "../../presets/default/components/KCombobox/KCombobox.vue";
+const props = defineProps(KComboboxDefaultProps);
+const emit = defineEmits(["update:modelValue"]);
+const {
+  selectedItems,
+  isOptionsOpen,
+  searchtext,
+  selectItem,
+  isSelected,
+  getSelectedContent,
+  toggleDropdown,
+  closeDropdown,
+  filteredOptions,
+  loading
+} = useKComboboxLogic(props, emit);
+const presetComponent = usePresetComponent("KCombobox", KComboboxDefault);
+const templateProps = computed(() => ({
+  disabled: props.disabled,
+  isOptionsOpen: isOptionsOpen.value,
+  labelField: props.labelField,
+  placeholder: props.placeholder,
+  searchbox: props.searchbox,
+  searchtext: searchtext.value,
+  filteredOptions: filteredOptions.value,
+  getSelectedContent,
+  toggleDropdown,
+  closeDropdown,
+  selectItem,
+  isSelected,
+  loading: loading.value
+}));
+function updateSearchText(val) {
+  searchtext.value = val;
+}
+</script>
+
+<template lang="pug">
+component(:is="presetComponent" v-bind="templateProps" @update:searchtext="updateSearchText")
+</template>

package/dist/runtime/components/KCombobox/KCombobox.global.vue.d.ts

@@ -0,0 +1,99 @@
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    dataProvider: {
+        type: PropType<import("@katlux/providers").ADataProvider>;
+        required: boolean;
+    };
+    closeOnSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxSelectedDisplay: {
+        type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visibleFields: {
+        type: PropType<Array<String>>;
+        default: null;
+    };
+    labelField: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    modelValue: {
+        type: PropType<import("./KCombobox.logic.js").ComboboxItem | import("./KCombobox.logic.js").ComboboxItem[] | null>;
+        default: null;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    dataProvider: {
+        type: PropType<import("@katlux/providers").ADataProvider>;
+        required: boolean;
+    };
+    closeOnSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiSelect: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    maxSelectedDisplay: {
+        type: (BooleanConstructor | NumberConstructor | StringConstructor)[];
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    searchbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visibleFields: {
+        type: PropType<Array<String>>;
+        default: null;
+    };
+    labelField: {
+        type: StringConstructor;
+        required: boolean;
+    };
+    modelValue: {
+        type: PropType<import("./KCombobox.logic.js").ComboboxItem | import("./KCombobox.logic.js").ComboboxItem[] | null>;
+        default: null;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: import("@katlux/providers").TDataRow | import("@katlux/providers").TDataRow[] | null) => any) | undefined;
+}>, {
+    disabled: boolean;
+    modelValue: any;
+    searchbox: boolean;
+    placeholder: string;
+    dataProvider: any;
+    closeOnSelect: boolean;
+    multiSelect: boolean;
+    maxSelectedDisplay: string | number | boolean;
+    visibleFields: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KCombobox/KCombobox.logic.js

@@ -0,0 +1,140 @@
+import {
+  EDataFilterOperator
+} from "@katlux/providers";
+import { ref, watch, computed, onMounted } from "vue";
+export const KComboboxDefaultProps = {
+  dataProvider: {
+    type: Object,
+    required: true
+  },
+  closeOnSelect: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  multiSelect: {
+    type: Boolean,
+    default: false
+  },
+  maxSelectedDisplay: {
+    type: [Number, String, Boolean],
+    default: false
+  },
+  placeholder: {
+    type: String,
+    default: "select"
+  },
+  searchbox: {
+    type: Boolean,
+    default: false
+  },
+  visibleFields: {
+    type: Array,
+    default: null
+  },
+  labelField: {
+    type: String,
+    required: true
+  },
+  modelValue: {
+    type: [Object, Array],
+    default: null
+  }
+};
+export function useKComboboxLogic(props, emit) {
+  const selectedItems = ref(null);
+  const isOptionsOpen = ref(false);
+  const searchtext = ref("");
+  function selectItem(option) {
+    if (props.multiSelect) {
+      if (isSelected(option)) {
+        selectedItems.value = selectedItems.value?.filter(
+          (item) => item[props.labelField] !== option[props.labelField]
+        ) || null;
+      } else {
+        selectedItems.value = [...selectedItems.value || [], option];
+      }
+    } else {
+      selectedItems.value = [option];
+    }
+    isOptionsOpen.value = !props.closeOnSelect;
+    if (props.multiSelect) {
+      emit("update:modelValue", selectedItems.value);
+    } else {
+      emit("update:modelValue", selectedItems.value?.[0] || null);
+    }
+  }
+  function isSelected(option) {
+    return selectedItems.value?.some((item) => item[props.labelField] === option[props.labelField]);
+  }
+  function getSelectedContent() {
+    if (selectedItems.value && selectedItems.value.length > 0)
+      if (props.multiSelect) {
+        if (!props.maxSelectedDisplay) return selectedItems.value;
+        else if (selectedItems.value.length <= Number(props.maxSelectedDisplay)) {
+          return selectedItems.value;
+        } else {
+          const maxDisplay = selectedItems.value.slice(
+            0,
+            Number(props.maxSelectedDisplay)
+          );
+          maxDisplay.push({
+            [props.labelField]: "+" + String(
+              selectedItems.value.length - Number(props.maxSelectedDisplay)
+            )
+          });
+          return maxDisplay;
+        }
+      } else return selectedItems.value;
+    else return [];
+  }
+  function toggleDropdown() {
+    if (props.disabled) return;
+    isOptionsOpen.value = !isOptionsOpen.value;
+  }
+  function closeDropdown() {
+    isOptionsOpen.value = false;
+    searchtext.value = "";
+  }
+  watch(
+    () => searchtext.value,
+    (newText) => {
+      const filter = {
+        operator: EDataFilterOperator.In,
+        field: { [props.labelField]: newText.trim().toLowerCase() },
+        active: newText.trim().toLowerCase() != ""
+      };
+      props.dataProvider.filter.value = filter;
+    }
+  );
+  const filteredOptions = computed(() => {
+    return props.dataProvider.pageData.value;
+  });
+  onMounted(() => {
+    selectedItems.value = Array.isArray(props.modelValue) ? props.modelValue : props.modelValue ? [props.modelValue] : null;
+    if (props.searchbox) {
+      props.dataProvider.filter.value = null;
+    }
+  });
+  watch(
+    () => props.modelValue,
+    (newSelected) => {
+      selectedItems.value = Array.isArray(newSelected) ? newSelected : newSelected ? [newSelected] : null;
+    }
+  );
+  return {
+    selectedItems,
+    isOptionsOpen,
+    searchtext,
+    selectItem,
+    isSelected,
+    getSelectedContent,
+    toggleDropdown,
+    closeDropdown,
+    filteredOptions,
+    loading: props.dataProvider.loading
+  };
+}

package/dist/runtime/components/KContextMenu/KContextMenu.global.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KContextMenu/KContextMenu.global.vue

@@ -0,0 +1,9 @@
+<script setup>
+import { usePresetComponent } from "../../composables/usePresetComponent";
+import KContextMenuDefault from "../../presets/default/components/KContextMenu/KContextMenu.vue";
+const presetComponent = usePresetComponent("KContextMenu", KContextMenuDefault);
+</script>
+
+<template lang="pug">
+component(:is="presetComponent")
+</template>

package/dist/runtime/components/KContextMenu/KContextMenu.global.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KContextMenu/KContextMenu.logic.d.ts

@@ -0,0 +1,4 @@
+export interface KContextMenuProps {
+}
+export declare const KContextMenuDefaultProps: {};
+export declare function useKContextMenuLogic(): {};

package/dist/runtime/components/KContextMenu/KContextMenu.logic.js

@@ -0,0 +1,4 @@
+export const KContextMenuDefaultProps = {};
+export function useKContextMenuLogic() {
+  return {};
+}

package/dist/runtime/components/KDatatable/KDataIterator.global.d.vue.ts

@@ -0,0 +1,23 @@
+import { ADataProvider } from '@katlux/providers';
+import type { IKDatatableAction } from '@katlux/providers';
+interface Props {
+    dataProvider: ADataProvider;
+    visibleFields?: Array<string> | null;
+    rowActions?: IKDatatableAction[];
+    bulkActions?: IKDatatableAction[];
+    loading?: boolean;
+    search?: string;
+    itemsPerPage?: number;
+    page?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    search: string;
+    loading: boolean;
+    bulkActions: IKDatatableAction[];
+    visibleFields: Array<string> | null;
+    rowActions: IKDatatableAction[];
+    itemsPerPage: number;
+    page: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KDatatable/KDataIterator.global.vue

@@ -0,0 +1,53 @@
+<script setup>
+import { useKDataIteratorLogic, KDataIteratorDefaultProps } from "./KDataIterator.logic";
+import { usePresetComponent } from "../../composables/usePresetComponent";
+import { computed, useSlots } from "vue";
+import KDataIteratorDefault from "../../presets/default/components/KDataIterator/KDataIterator.vue";
+import { ADataProvider } from "@katlux/providers";
+const props = defineProps({
+  dataProvider: { type: Object, required: true },
+  visibleFields: { type: [Array, null], required: false, default: null },
+  rowActions: { type: Array, required: false, default: () => [] },
+  bulkActions: { type: Array, required: false, default: () => [] },
+  loading: { type: Boolean, required: false, default: false },
+  search: { type: String, required: false, default: "" },
+  itemsPerPage: { type: Number, required: false, default: 10 },
+  page: { type: Number, required: false, default: 1 }
+});
+const { selectedRows, selectAll } = useKDataIteratorLogic(props);
+const slots = useSlots();
+const mergedSlots = computed(() => ({
+  ...slots
+}));
+const presetComponent = usePresetComponent("KDataIterator", KDataIteratorDefault);
+const templateProps = computed(() => ({
+  dataProvider: props.dataProvider,
+  visibleFields: props.visibleFields,
+  rowActions: props.rowActions,
+  bulkActions: props.bulkActions,
+  selectedRows: selectedRows.value,
+  selectAll: selectAll.value,
+  loading: props.loading,
+  search: props.search,
+  itemsPerPage: props.itemsPerPage,
+  page: props.page,
+  slots: mergedSlots.value
+}));
+const updateSelectedRows = (val) => {
+  selectedRows.value = val;
+};
+const updateSelectAll = (val) => {
+  selectAll.value = val;
+};
+</script>
+
+<template lang="pug">
+component(
+	:is="presetComponent" 
+	v-bind="templateProps"
+	@update:selectedRows="updateSelectedRows"
+	@update:selectAll="updateSelectAll"
+)
+	template(v-for="(_, slot) in $slots" #[slot]="scope")
+		slot(:name="slot" v-bind="scope")
+</template>

package/dist/runtime/components/KDatatable/KDataIterator.global.vue.d.ts

@@ -0,0 +1,23 @@
+import { ADataProvider } from '@katlux/providers';
+import type { IKDatatableAction } from '@katlux/providers';
+interface Props {
+    dataProvider: ADataProvider;
+    visibleFields?: Array<string> | null;
+    rowActions?: IKDatatableAction[];
+    bulkActions?: IKDatatableAction[];
+    loading?: boolean;
+    search?: string;
+    itemsPerPage?: number;
+    page?: number;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    search: string;
+    loading: boolean;
+    bulkActions: IKDatatableAction[];
+    visibleFields: Array<string> | null;
+    rowActions: IKDatatableAction[];
+    itemsPerPage: number;
+    page: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KDatatable/KDataIterator.logic.js

@@ -0,0 +1,37 @@
+import { watch } from "vue";
+export const KDataIteratorDefaultProps = {
+  visibleFields: null,
+  loading: false,
+  search: "",
+  itemsPerPage: 10,
+  page: 1
+};
+export function useKDataIteratorLogic(props) {
+  const selectedRows = props.dataProvider.selectedRows;
+  const selectAll = props.dataProvider.selectAll;
+  watch(selectAll, (newVal) => {
+    if (newVal === false) {
+      selectedRows.value = [];
+    } else {
+      selectedRows.value = [...props.dataProvider.pageData.value || []];
+    }
+  });
+  watch(() => props.search, (newVal) => {
+    if (newVal !== void 0) {
+    }
+  });
+  watch(() => props.itemsPerPage, (newVal) => {
+    if (newVal !== void 0 && newVal !== props.dataProvider.pageSize.value) {
+      props.dataProvider.setPageSize(newVal);
+    }
+  });
+  watch(() => props.page, (newVal) => {
+    if (newVal !== void 0 && newVal !== props.dataProvider.currentPage.value) {
+      props.dataProvider.setCurrentPage(newVal);
+    }
+  });
+  return {
+    selectedRows,
+    selectAll
+  };
+}

package/dist/runtime/components/KDatatable/KDatatable.global.d.vue.ts

@@ -0,0 +1,23 @@
+import { ADataProvider } from '@katlux/providers';
+import type { IKDatatableAction } from '@katlux/providers';
+interface Props {
+    dataProvider: ADataProvider;
+    visibleFields: Array<string> | null;
+    rowActions?: Array<IKDatatableAction>;
+    bulkActions?: Array<IKDatatableAction>;
+    cellSlots?: Record<string, any>;
+    headerSlots?: Record<string, any>;
+    columnHeaders?: Record<string, string>;
+    columnWidths?: Record<string, string>;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    bulkActions: Array<IKDatatableAction>;
+    visibleFields: Array<string> | null;
+    rowActions: Array<IKDatatableAction>;
+    cellSlots: Record<string, any>;
+    headerSlots: Record<string, any>;
+    columnHeaders: Record<string, string>;
+    columnWidths: Record<string, string>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/KDatatable/KDatatable.global.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { useKDatatableLogic, KDatatableDefaultProps } from "./KDatatable.logic";
+import { usePresetComponent } from "../../composables/usePresetComponent";
+import { computed, useSlots } from "vue";
+import DatatableDefault from "../../presets/default/components/KDatatable/KDatatable.vue";
+import { ADataProvider } from "@katlux/providers";
+const props = defineProps({
+  dataProvider: { type: Object, required: true },
+  visibleFields: { type: [Array, null], required: true, default: null },
+  rowActions: { type: Array, required: false, default: () => [] },
+  bulkActions: { type: Array, required: false, default: () => [] },
+  cellSlots: { type: Object, required: false, default: void 0 },
+  headerSlots: { type: Object, required: false, default: void 0 },
+  columnHeaders: { type: Object, required: false, default: void 0 },
+  columnWidths: { type: Object, required: false, default: void 0 }
+});
+const { selectedRows, selectAll } = useKDatatableLogic(props);
+const presetComponent = usePresetComponent("KDatatable", DatatableDefault);
+const slots = useSlots();
+const mergedCellSlots = computed(() => ({
+  ...slots,
+  ...props.cellSlots || {}
+}));
+const templateProps = computed(() => ({
+  dataProvider: props.dataProvider,
+  visibleFields: props.visibleFields,
+  rowActions: props.rowActions,
+  bulkActions: props.bulkActions,
+  selectedRows: selectedRows.value,
+  selectAll: selectAll.value,
+  cellSlots: mergedCellSlots.value,
+  headerSlots: props.headerSlots,
+  columnHeaders: props.columnHeaders,
+  columnWidths: props.columnWidths
+}));
+const updateSelectedRows = (val) => {
+  selectedRows.value = val;
+};
+const updateSelectAll = (val) => {
+  selectAll.value = val;
+};
+</script>
+
+<template lang="pug">
+component(:is="presetComponent" v-bind="templateProps" @update:selectedRows="updateSelectedRows" @update:selectAll="updateSelectAll")
+</template>