@hostlink/nuxt-light 1.27.7 → 1.28.0

package/dist/runtime/components/l-table.vue

@@ -1,562 +1,446 @@
-<script setup lang="ts">
-import { useQuasar, QTable, Dialog } from 'quasar';
-import type { QTableColumn, QTableProps } from 'quasar';
-
-import { ref, computed, onMounted, useSlots, watch, } from "vue";
-import { useLight, GQLFieldBuilder, model } from '../';
-import { toQuery } from '@hostlink/light';
-import { collect } from "#imports"
-import { useI18n } from 'vue-i18n';
-
-const $q = useQuasar();
-const { t } = useI18n();
-
-
-const minimized = defineModel<boolean>("minimized", { default: false })
-const maximized = defineModel<boolean>("maximized", { default: false })
-
-// extends QTableColumn
-export interface LTableColumn extends QTableColumn {
-    searchable?: boolean,
-    searchType?: string,
-    searchOptions?: Array<any> | Function,
-    searchMultiple?: boolean,
-    gqlField?: string | Array<string> | Object,
-    backgroundColor?: string | Function,
-    searchMethod?: string
-}
-
-
-const errors = ref<InstanceType<any>>([
-]);
-
-
-export type LTableProps = QTableProps & {
-    columns?: Array<LTableColumn>,
-    actions?: Array<string>,
-    sortBy?: string | null | undefined,
-    rowKey?: string,
-    modelName?: string | null | undefined,
-    searchable?: boolean | null | undefined,
-    selected?: Array<any>,
-    maximizable?: boolean,
-    minimizable?: boolean,
-    onRequestData?: (request: LTableRequest) => void
-    addComponent?: Dialog
-    addComponentProps?: any,
-    rows?: Array<any>,
-}
-
-
-const props = withDefaults(defineProps<LTableProps>(), {
-    actions: () => [],
-    rowsPerPageLabel: "Records per page:",
-    selection: "none",
-    rowsPerPageOptions: () => [5, 10, 20, 50, 100, 0],
-    pagination: () => {
-        return {
-            sortBy: null,
-            descending: true,
-            page: 1,
-            rowsPerPage: 10,
-        }
-    },
-    fullscreen: false,
-    searchable: false,
-    maximizable: false,
-    minimizable: false,
-    selected: () => [],
-    loadingLabel: "Loading...",
-    noDataLabel: "No data available",
-    dark: undefined,
-    dense: undefined,
-    bordered: undefined,
-    flat: undefined
-});
-
-
-const isServerSide = (props.rows == undefined);
-
-
-const light = useLight();
-
-const pagination = ref(props.pagination);
-
-if (props.rowsPerPageOptions[0] == 0) {
-    pagination.value.rowsPerPage = 0;
-}
-
-//apply all aligns to the columns 
-props.columns?.forEach((col) => {
-    if (!col.align) {
-        col.align = "left";
-    }
-    if (!col.field && col.name) {
-        col.field = col.name
-    }
-
-    col.label = t(col.label)
-})
-
-if (props.columns) {
-    for (let i = 0; i < props.columns.length; i++) {
-        if (props.columns[i].searchOptions) {
-            let opts = props.columns[i].searchOptions;
-            if (typeof opts == "function") {
-                props.columns[i].searchOptions = await opts();
-            }
-
-
-        }
-    }
-}
-
-export interface LTableRequest {
-    sort: string,
-    fields: Array<string>,
-    gql: {
-        __args: {
-            filters: any,
-            sort: string
-        },
-        data: {
-            __args: {
-                limit: number
-            },
-            [key: string]: any
-        },
-        meta: {
-            total: boolean,
-            key: boolean,
-            name: boolean
-        }
-    },
-    offset: number,
-    limit: number,
-    loadData: (model: string, filters: any, fields: Array<any>) => void,
-    loadObjects: (model: string, filters: any, fields: Array<any>) => void,
-    setData: (data: { data: Array<{ data: any }>, meta: { total: Number, key: string, name: string } }) => void,
-}
-
-const emits = defineEmits<{
-    "request-data": [p: LTableRequest],
-    "update:selected": [p: Array<any>]
-    "delete": [p: any],
-}>()
-
-
-const loading = ref(false);
-
-let activeEdit = false;
-let actionView = false;
-let actionDelete = false;
-if (props.actions.length > 0) {
-    actionView = props.actions.includes("view");
-    activeEdit = props.actions.includes("edit");
-    actionDelete = props.actions.includes("delete");
-}
-
-
-
-if (props.sortBy) {
-    let [sortBy, descending] = props.sortBy.split(":");
-    pagination.value.sortBy = sortBy;
-    pagination.value.descending = descending == "desc";
-}
-
-const hasSearch = computed(() => {
-    return props.columns?.some((col) => {
-        return col.searchable;
-    })
-})
-
-const table = ref<InstanceType<typeof QTable>>();
-
-const filters = ref<InstanceType<any>>({});
-const rows = ref<InstanceType<any>>(props.rows);
-if (rows.value == undefined) {
-    rows.value = [];
-}
-
-onMounted(() => {
-    table.value && table.value.requestServerInteraction();
-})
-
-
-let primaryKey = ref(props.rowKey);
-const modelName = ref(props.modelName);
-
-
-const validateData = () => {
-    if (primaryKey.value == null) return;
-
-    if (props.actions.includes("edit")) {
-        if (rows.value.length > 0) {
-            //get first row
-            let row = rows.value[0];
-            //check has primary key
-
-            if (!row[primaryKey.value]) {
-                errors.value.push("[edit] Primary key not found in the data");
-            }
-        }
-    }
-
-    if (props.actions.includes("delete")) {
-        if (rows.value.length > 0) {
-            //get first row
-            let row = rows.value[0];
-            //check has primary key
-
-            if (!row[primaryKey.value]) {
-                errors.value.push("[delete] Primary key not found in the data");
-            }
-        }
-    }
-
-}
-
-const onLocalRequest = async (p: any) => {
-    if (!isServerSide) return;
-
-
-    let sort = "";
-    if (p.pagination.sortBy) {
-        sort = p.pagination.sortBy + ":" + (p.pagination.descending ? "desc" : "asc");
-    }
-
-    //fields
-    const builder = GQLFieldBuilder();
-    if (props.rowKey) {
-        builder.add(props.rowKey);
-    }
-
-    props.columns?.forEach((col) => {
-        if (col.gqlField) {
-            builder.add(col.gqlField);
-            return;
-        }
-
-        if (!col.name) return;
-        if (col.name.startsWith("_")) {
-            return;
-        }
-        builder.add(col.name);
-
-    });
-
-    if (actionView) {
-        builder.add("canView");
-    }
-
-    if (actionDelete) {
-        builder.add("canDelete");
-    }
-
-    if (activeEdit) {
-        builder.add("canUpdate");
-    }
-
-
-    const callback: LTableRequest = {
-        sort: sort,
-        fields: builder.get(),
-        offset: (p.pagination.page - 1) * p.pagination.rowsPerPage,
-        limit: p.pagination.rowsPerPage,
-        gql: {
-            __args: {
-                filters: getFilterValue(),
-                sort: sort
-            },
-            data: {
-                __args: {
-                    limit: p.pagination.rowsPerPage,
-                    offset: (p.pagination.page - 1) * p.pagination.rowsPerPage
-                },
-                ...toQuery(builder.get())
-            },
-            meta: {
-                total: true,
-                key: true,
-                name: true
-            }
-        },
-        setData(data: { data: Array<{ data: any }>, meta: { total: number, key: string, name: string } }) {
-            rows.value = data.data;
-            primaryKey.value = data.meta.key;
-            modelName.value = data.meta.name;
-            pagination.value.rowsNumber = data.meta.total;
-
-            pagination.value.page = p.pagination.page;
-            pagination.value.sortBy = p.pagination.sortBy;
-            pagination.value.descending = p.pagination.descending;
-            pagination.value.rowsPerPage = p.pagination.rowsPerPage;
-
-            loading.value = false;
-
-            validateData();
-        },
-        loadObjects(model: string, filters: any = null, fields: Array<any> = []) {
-            return this.loadData(model, filters, fields);
-        },
-        async loadData(model: string, filters: any = null, fields: Array<any> = []) {
-            fields.forEach((f) => {
-                builder.add(f);
-            })
-
-            let localFilters = getFilterValue();
-            if (filters) {
-                localFilters = {
-                    ...localFilters,
-                    ...filters
-                }
-            }
-            loading.value = true;
-
-            try {
-                let c = collect(model, builder.get())
-
-                if (localFilters) {
-                    for (let [key, value] of Object.entries(localFilters)) {
-                        if (typeof value == "object") {
-                            if (value.contains) {
-                                c = c.whereContains(key, value.contains);
-                            }
-                            if (value.between) {
-                                c = c.whereBetween(key, value.between);
-                            }
-                        } else {
-                            c = c.where(key, value);
-                        }
-                    }
-                }
-
-                if (sort) {
-                    if (sort.split(":")[1] == "asc") {
-                        c = c.sortBy(sort.split(":")[0]);
-                    } else {
-                        c = c.sortByDesc(sort.split(":")[0]);
-                    }
-                }
-
-
-                if (p.pagination.rowsPerPage != 0) {
-                    c = c.forPage(p.pagination.page, p.pagination.rowsPerPage);
-                }
-
-
-                const data = await c.all();
-                const allData = {
-                    data,
-                    meta: c.meta
-                }
-
-                this.setData(allData);
-            } catch (e: any) {
-                quasar.dialog({
-                    message: e,
-                    color: "negative"
-                })
-                this.setData({ data: [], meta: { total: 0, key: "", name: "" } });
-
-            }
-        }
-    }
-
-
-    loading.value = true;
-    //emits("request", p);
-    emits("request-data", callback);
-
-}
-
-const getFilterValue = () => {
-    let f: any = {};
-
-    props.columns?.forEach((col) => {
-        if (col.searchable) {
-            if (filters.value[col.name] !== null && filters.value[col.name] !== "" && filters.value[col.name] !== undefined) {
-
-                if (col.searchType == "number") {
-                    f[col.name] = filters.value[col.name]
-                } else if (col.searchType == "date") {
-                    if (filters.value[col.name].from) {
-                        f[col.name] = {
-                            between: [filters.value[col.name].from, filters.value[col.name].to]
-                        }
-                    }
-                } else if (col.searchType == "select") {
-                    f[col.name] = filters.value[col.name]
-
-                } else {
-
-                    if (col.searchMethod == "equals") {
-                        f[col.name] = filters.value[col.name]
-                    } else {
-                        f[col.name] = {
-                            contains: filters.value[col.name]
-                        }
-                    }
-                }
-            }
-        }
-    });
-    return f;
-}
-
-
-const onFilters = () => {
-
-    //clone the filters
-    onLocalRequest({
-        pagination: {
-            page: 1,
-            rowsPerPage: props.pagination.rowsPerPage,
-            sortBy: props.pagination.sortBy,
-            descending: props.pagination.descending
-        }
-    })
-}
-
-const slots = useSlots();
-
-const ss = Object.entries(slots).map(([key, value]) => {
-    return key;
-});
-
-const quasar = useQuasar();
-const onDelete = async (id: any) => {
-    if (modelName.value == null) return;
-
-    try {
-        await model(modelName.value).delete(id);
-    } catch (e: any) {
-        quasar.notify({
-            message: e.message,
-            color: "negative"
-        })
-        return;
-    }
-    // refresh the table
-    if (table.value) {
-        table.value.requestServerInteraction();
-    }
-
-    emits("delete", id);
-}
-
-const attrs = computed(() => {
-    const a = { ...light.styles.table, ...Object.fromEntries(Object.entries(props).filter(([key, value]) => value !== undefined)) };
-
-    return {
-        ...a,
-        loadingLabel: t(props.loadingLabel),
-        noDataLabel: t(props.noDataLabel),
-        rowsPerPageOptions: props.rowsPerPageOptions,
-        rowsPerPageLabel: t(props.rowsPerPageLabel),
-        selection: props.selection,
-        rowKey: props.rowKey,
-    }
-});
-
-const filter = ref('');
-
-const toColumns = props.columns?.filter((col: any) => {
-    return col.to;
-}).map((col: any) => {
-    col.slot_name = 'body-cell-' + col.name;
-    return col;
-
-})
-/* 
-const filterFn = (val, update, abort) {
-    update(() => {
-        const needle = val.toLocaleLowerCase()
-        options.value = stringOptions.filter(v => v.toLocaleLowerCase().indexOf(needle) > -1)
-    })
-},
- */
-
-const isDark = computed(() => {
-    return light.theme == "dark";
-})
-
-const hasRowExpand = computed(() => {
-    return ss.indexOf("row-expand") >= 0;
-})
-
-const hasActions = computed(() => {
-    return props.actions.length > 0;
-})
-
-const getCellStyle = (col: any, row: any) => {
-    const style: any = col.cellStyle ?? {};
-    if (col.backgroundColor) {
-        if (typeof col.backgroundColor == "function") {
-            style.backgroundColor = col.backgroundColor(row);
-        } else {
-            style.backgroundColor = col.backgroundColor;
-        }
-
-    }
-    return style;
-}
-
-const getCellClass = (col: any, row: any) => {
-    const cl: any = [];
-
-    if (col.cellClass) {
-        if (typeof col.cellClass == "function") {
-            cl.push(col.cellClass(row));
-        } else {
-            cl.push(col.cellClass);
-        }
-
-    }
-    return cl;
-}
-
-const localSelected = computed({
-    get() {
-        return props.selected;
-    },
-    set(val) {
-        emits("update:selected", val);
-    }
-});
-
-watch(() => props.rows, (val) => {
-    rows.value = val;
-});
-
-const computedColumns = computed(() => {
-    return props.columns;
-})
-
-
-function requestServerInteraction() {
-    table.value && table.value.requestServerInteraction();
-}
-
-defineExpose({
-    requestServerInteraction
-})
-
-const onAdd = () => {
-    if (!props.addComponent) return;
-
-    $q.dialog({
-        component: props.addComponent,
-        componentProps: props.addComponentProps,
-
-    }).onOk(() => {
-        requestServerInteraction();
-    })
-}
-</script>
-
-
-<template>
+<script setup>
+import { useQuasar, QTable, Dialog } from "quasar";
+import { ref, computed, onMounted, useSlots, watch } from "vue";
+import { useLight, GQLFieldBuilder, model } from "../";
+import { toQuery } from "@hostlink/light";
+import { collect } from "#imports";
+import { useI18n } from "vue-i18n";
+const $q = useQuasar();
+const { t } = useI18n();
+const minimized = defineModel("minimized", { type: Boolean, ...{ default: false } });
+const maximized = defineModel("maximized", { type: Boolean, ...{ default: false } });
+const errors = ref([]);
+const props = defineProps({
+  fullscreen: { type: Boolean, required: false, skipCheck: true, default: false },
+  noRouteFullscreenExit: { type: Boolean, required: false, skipCheck: true },
+  rows: { type: Array, required: false },
+  rowKey: { type: [String, Function], required: false },
+  virtualScroll: { type: Boolean, required: false, skipCheck: true },
+  virtualScrollTarget: { type: null, required: false },
+  virtualScrollSliceSize: { type: null, required: false },
+  virtualScrollSliceRatioBefore: { type: null, required: false },
+  virtualScrollSliceRatioAfter: { type: null, required: false },
+  virtualScrollItemSize: { type: null, required: false },
+  virtualScrollStickySizeStart: { type: null, required: false },
+  virtualScrollStickySizeEnd: { type: null, required: false },
+  tableColspan: { type: null, required: false },
+  color: { type: null, required: false },
+  iconFirstPage: { type: null, required: false },
+  iconPrevPage: { type: null, required: false },
+  iconNextPage: { type: null, required: false },
+  iconLastPage: { type: null, required: false },
+  grid: { type: Boolean, required: false, skipCheck: true },
+  gridHeader: { type: Boolean, required: false, skipCheck: true },
+  dense: { type: Boolean, required: false, skipCheck: true, default: void 0 },
+  columns: { type: Array, required: false },
+  visibleColumns: { type: null, required: false },
+  loading: { type: Boolean, required: false, skipCheck: true },
+  title: { type: null, required: false },
+  hideHeader: { type: Boolean, required: false, skipCheck: true },
+  hideBottom: { type: Boolean, required: false, skipCheck: true },
+  hideSelectedBanner: { type: Boolean, required: false, skipCheck: true },
+  hideNoData: { type: Boolean, required: false, skipCheck: true },
+  hidePagination: { type: Boolean, required: false, skipCheck: true },
+  dark: { type: [Boolean, null], required: false, skipCheck: true, default: void 0 },
+  flat: { type: Boolean, required: false, skipCheck: true, default: void 0 },
+  bordered: { type: Boolean, required: false, skipCheck: true, default: void 0 },
+  square: { type: Boolean, required: false, skipCheck: true },
+  separator: { type: null, required: false },
+  wrapCells: { type: Boolean, required: false, skipCheck: true },
+  binaryStateSort: { type: Boolean, required: false, skipCheck: true },
+  columnSortOrder: { type: null, required: false },
+  noDataLabel: { type: null, required: false, default: "No data available" },
+  noResultsLabel: { type: null, required: false },
+  loadingLabel: { type: null, required: false, default: "Loading..." },
+  selectedRowsLabel: { type: Function, required: false, skipCheck: true },
+  rowsPerPageLabel: { type: null, required: false, default: "Records per page:" },
+  paginationLabel: { type: Function, required: false, skipCheck: true },
+  tableStyle: { type: null, required: false },
+  tableClass: { type: null, required: false },
+  tableHeaderStyle: { type: null, required: false },
+  tableHeaderClass: { type: null, required: false },
+  cardContainerStyle: { type: null, required: false },
+  cardContainerClass: { type: null, required: false },
+  cardStyle: { type: null, required: false },
+  cardClass: { type: null, required: false },
+  titleClass: { type: null, required: false },
+  filter: { type: null, required: false },
+  filterMethod: { type: Function, required: false, skipCheck: true },
+  pagination: { type: null, required: false, default: () => {
+    return {
+      sortBy: null,
+      descending: true,
+      page: 1,
+      rowsPerPage: 10
+    };
+  } },
+  rowsPerPageOptions: { type: null, required: false, default: () => [5, 10, 20, 50, 100, 0] },
+  selection: { type: null, required: false, default: "none" },
+  selected: { type: Array, required: false, default: () => [] },
+  expanded: { type: null, required: false },
+  sortMethod: { type: Function, required: false, skipCheck: true },
+  onFullscreen: { type: Function, required: false },
+  "onUpdate:fullscreen": { type: Function, required: false },
+  onRowClick: { type: Function, required: false },
+  onRowDblclick: { type: Function, required: false },
+  onRowContextmenu: { type: Function, required: false },
+  onRequest: { type: Function, required: false },
+  onSelection: { type: Function, required: false },
+  "onUpdate:pagination": { type: Function, required: false },
+  "onUpdate:selected": { type: Function, required: false },
+  "onUpdate:expanded": { type: Function, required: false },
+  onVirtualScroll: { type: Function, required: false },
+  actions: { type: Array, required: false, default: () => [] },
+  sortBy: { type: null, required: false },
+  modelName: { type: null, required: false },
+  searchable: { type: [Boolean, null], required: false, skipCheck: true, default: false },
+  maximizable: { type: Boolean, required: false, default: false },
+  minimizable: { type: Boolean, required: false, default: false },
+  onRequestData: { type: Function, required: false },
+  addComponent: { type: Object, required: false },
+  addComponentProps: { type: null, required: false }
+});
+const isServerSide = props.rows == void 0;
+const light = useLight();
+const pagination = ref(props.pagination);
+if (props.rowsPerPageOptions[0] == 0) {
+  pagination.value.rowsPerPage = 0;
+}
+props.columns?.forEach((col) => {
+  if (!col.align) {
+    col.align = "left";
+  }
+  if (!col.field && col.name) {
+    col.field = col.name;
+  }
+  col.label = t(col.label);
+});
+if (props.columns) {
+  for (let i = 0; i < props.columns.length; i++) {
+    if (props.columns[i].searchOptions) {
+      let opts = props.columns[i].searchOptions;
+      if (typeof opts == "function") {
+        props.columns[i].searchOptions = await opts();
+      }
+    }
+  }
+}
+const emits = defineEmits(["request-data", "update:selected", "delete"]);
+const loading = ref(false);
+let activeEdit = false;
+let actionView = false;
+let actionDelete = false;
+if (props.actions.length > 0) {
+  actionView = props.actions.includes("view");
+  activeEdit = props.actions.includes("edit");
+  actionDelete = props.actions.includes("delete");
+}
+if (props.sortBy) {
+  let [sortBy, descending] = props.sortBy.split(":");
+  pagination.value.sortBy = sortBy;
+  pagination.value.descending = descending == "desc";
+}
+const hasSearch = computed(() => {
+  return props.columns?.some((col) => {
+    return col.searchable;
+  });
+});
+const table = ref();
+const filters = ref({});
+const rows = ref(props.rows);
+if (rows.value == void 0) {
+  rows.value = [];
+}
+onMounted(() => {
+  table.value && table.value.requestServerInteraction();
+});
+let primaryKey = ref(props.rowKey);
+const modelName = ref(props.modelName);
+const validateData = () => {
+  if (primaryKey.value == null) return;
+  if (props.actions.includes("edit")) {
+    if (rows.value.length > 0) {
+      let row = rows.value[0];
+      if (!row[primaryKey.value]) {
+        errors.value.push("[edit] Primary key not found in the data");
+      }
+    }
+  }
+  if (props.actions.includes("delete")) {
+    if (rows.value.length > 0) {
+      let row = rows.value[0];
+      if (!row[primaryKey.value]) {
+        errors.value.push("[delete] Primary key not found in the data");
+      }
+    }
+  }
+};
+const onLocalRequest = async (p) => {
+  if (!isServerSide) return;
+  let sort = "";
+  if (p.pagination.sortBy) {
+    sort = p.pagination.sortBy + ":" + (p.pagination.descending ? "desc" : "asc");
+  }
+  const builder = GQLFieldBuilder();
+  if (props.rowKey) {
+    builder.add(props.rowKey);
+  }
+  props.columns?.forEach((col) => {
+    if (col.gqlField) {
+      builder.add(col.gqlField);
+      return;
+    }
+    if (!col.name) return;
+    if (col.name.startsWith("_")) {
+      return;
+    }
+    builder.add(col.name);
+  });
+  if (actionView) {
+    builder.add("canView");
+  }
+  if (actionDelete) {
+    builder.add("canDelete");
+  }
+  if (activeEdit) {
+    builder.add("canUpdate");
+  }
+  const callback = {
+    sort,
+    fields: builder.get(),
+    offset: (p.pagination.page - 1) * p.pagination.rowsPerPage,
+    limit: p.pagination.rowsPerPage,
+    gql: {
+      __args: {
+        filters: getFilterValue(),
+        sort
+      },
+      data: {
+        __args: {
+          limit: p.pagination.rowsPerPage,
+          offset: (p.pagination.page - 1) * p.pagination.rowsPerPage
+        },
+        ...toQuery(builder.get())
+      },
+      meta: {
+        total: true,
+        key: true,
+        name: true
+      }
+    },
+    setData(data) {
+      rows.value = data.data;
+      primaryKey.value = data.meta.key;
+      modelName.value = data.meta.name;
+      pagination.value.rowsNumber = data.meta.total;
+      pagination.value.page = p.pagination.page;
+      pagination.value.sortBy = p.pagination.sortBy;
+      pagination.value.descending = p.pagination.descending;
+      pagination.value.rowsPerPage = p.pagination.rowsPerPage;
+      loading.value = false;
+      validateData();
+    },
+    loadObjects(model2, filters2 = null, fields = []) {
+      return this.loadData(model2, filters2, fields);
+    },
+    async loadData(model2, filters2 = null, fields = []) {
+      fields.forEach((f) => {
+        builder.add(f);
+      });
+      let localFilters = getFilterValue();
+      if (filters2) {
+        localFilters = {
+          ...localFilters,
+          ...filters2
+        };
+      }
+      loading.value = true;
+      try {
+        let c = collect(model2, builder.get());
+        if (localFilters) {
+          for (let [key, value] of Object.entries(localFilters)) {
+            if (typeof value == "object") {
+              if (value.contains) {
+                c = c.whereContains(key, value.contains);
+              }
+              if (value.between) {
+                c = c.whereBetween(key, value.between);
+              }
+            } else {
+              c = c.where(key, value);
+            }
+          }
+        }
+        if (sort) {
+          if (sort.split(":")[1] == "asc") {
+            c = c.sortBy(sort.split(":")[0]);
+          } else {
+            c = c.sortByDesc(sort.split(":")[0]);
+          }
+        }
+        if (p.pagination.rowsPerPage != 0) {
+          c = c.forPage(p.pagination.page, p.pagination.rowsPerPage);
+        }
+        const data = await c.all();
+        const allData = {
+          data,
+          meta: c.meta
+        };
+        this.setData(allData);
+      } catch (e) {
+        quasar.dialog({
+          message: e,
+          color: "negative"
+        });
+        this.setData({ data: [], meta: { total: 0, key: "", name: "" } });
+      }
+    }
+  };
+  loading.value = true;
+  emits("request-data", callback);
+};
+const getFilterValue = () => {
+  let f = {};
+  props.columns?.forEach((col) => {
+    if (col.searchable) {
+      if (filters.value[col.name] !== null && filters.value[col.name] !== "" && filters.value[col.name] !== void 0) {
+        if (col.searchType == "number") {
+          f[col.name] = filters.value[col.name];
+        } else if (col.searchType == "date") {
+          if (filters.value[col.name].from) {
+            f[col.name] = {
+              between: [filters.value[col.name].from, filters.value[col.name].to]
+            };
+          }
+        } else if (col.searchType == "select") {
+          f[col.name] = filters.value[col.name];
+        } else {
+          if (col.searchMethod == "equals") {
+            f[col.name] = filters.value[col.name];
+          } else {
+            f[col.name] = {
+              contains: filters.value[col.name]
+            };
+          }
+        }
+      }
+    }
+  });
+  return f;
+};
+const onFilters = () => {
+  onLocalRequest({
+    pagination: {
+      page: 1,
+      rowsPerPage: props.pagination.rowsPerPage,
+      sortBy: props.pagination.sortBy,
+      descending: props.pagination.descending
+    }
+  });
+};
+const slots = useSlots();
+const ss = Object.entries(slots).map(([key, value]) => {
+  return key;
+});
+const quasar = useQuasar();
+const onDelete = async (id) => {
+  if (modelName.value == null) return;
+  try {
+    await model(modelName.value).delete(id);
+  } catch (e) {
+    quasar.notify({
+      message: e.message,
+      color: "negative"
+    });
+    return;
+  }
+  if (table.value) {
+    table.value.requestServerInteraction();
+  }
+  emits("delete", id);
+};
+const attrs = computed(() => {
+  const a = { ...light.styles.table, ...Object.fromEntries(Object.entries(props).filter(([key, value]) => value !== void 0)) };
+  return {
+    ...a,
+    loadingLabel: t(props.loadingLabel),
+    noDataLabel: t(props.noDataLabel),
+    rowsPerPageOptions: props.rowsPerPageOptions,
+    rowsPerPageLabel: t(props.rowsPerPageLabel),
+    selection: props.selection,
+    rowKey: props.rowKey
+  };
+});
+const filter = ref("");
+const toColumns = props.columns?.filter((col) => {
+  return col.to;
+}).map((col) => {
+  col.slot_name = "body-cell-" + col.name;
+  return col;
+});
+const isDark = computed(() => {
+  return light.theme == "dark";
+});
+const hasRowExpand = computed(() => {
+  return ss.indexOf("row-expand") >= 0;
+});
+const hasActions = computed(() => {
+  return props.actions.length > 0;
+});
+const getCellStyle = (col, row) => {
+  const style = col.cellStyle ?? {};
+  if (col.backgroundColor) {
+    if (typeof col.backgroundColor == "function") {
+      style.backgroundColor = col.backgroundColor(row);
+    } else {
+      style.backgroundColor = col.backgroundColor;
+    }
+  }
+  return style;
+};
+const getCellClass = (col, row) => {
+  const cl = [];
+  if (col.cellClass) {
+    if (typeof col.cellClass == "function") {
+      cl.push(col.cellClass(row));
+    } else {
+      cl.push(col.cellClass);
+    }
+  }
+  return cl;
+};
+const localSelected = computed({
+  get() {
+    return props.selected;
+  },
+  set(val) {
+    emits("update:selected", val);
+  }
+});
+watch(() => props.rows, (val) => {
+  rows.value = val;
+});
+const computedColumns = computed(() => {
+  return props.columns;
+});
+function requestServerInteraction() {
+  table.value && table.value.requestServerInteraction();
+}
+defineExpose({
+  requestServerInteraction
+});
+const onAdd = () => {
+  if (!props.addComponent) return;
+  $q.dialog({
+    component: props.addComponent,
+    componentProps: props.addComponentProps
+  }).onOk(() => {
+    requestServerInteraction();
+  });
+};
+</script>
+
+<template>
     <l-card v-bind="attrs" :maximizable="maximizable" :minimizable="minimizable" :title="title"
         v-model:minimized="minimized" v-model:maximized="maximized">
 
@@ -717,4 +601,4 @@ const onAdd = () => {
             </template>
         </q-table>
     </l-card>
-</template>
+</template>