maz-ui 4.0.0-alpha.2 → 4.0.0-alpha.4

package/dist/chunks/MazTable.vue_vue_type_style_index_0_scoped_4101f1d3_lang.Ctmf2NVE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MazTable.vue_vue_type_style_index_0_scoped_4101f1d3_lang.Ctmf2NVE.cjs","sources":["../../src/components/MazTable.vue"],"sourcesContent":["<script lang=\"ts\">\n/* eslint-disable import/first */\nexport interface HeadersEnriched {\n  label: string\n  key?: string\n  sortable?: boolean\n  hidden?: boolean\n  srOnly?: boolean\n  width?: string\n  maxWidth?: string\n  classes?: ThHTMLAttributes['class']\n  scope?: ThHTMLAttributes['scope']\n  align?: ThHTMLAttributes['align']\n  rowspan?: ThHTMLAttributes['rowspan']\n  colspan?: ThHTMLAttributes['colspan']\n  headers?: ThHTMLAttributes['headers']\n}\n\ntype HeadersNormalized = HeadersEnriched & {\n  thHeaders?: ThHTMLAttributes['headers']\n  sorted?: 'ASC' | 'DESC'\n}\n\nexport type Row<T extends Row<T>> = Record<string, any> & {\n  selected?: boolean\n  action?: (row: T) => unknown\n  classes?: HTMLAttributes['class']\n}\n\nexport type Header = string | HeadersEnriched\n\nexport interface MazTableTranslations {\n  searchByAllLabel?: string\n  searchByPlaceholder?: string\n  searchPlaceholder?: string\n  paginationAllLabel?: string\n  noResults?: string\n  actionHeader?: string\n  paginationRowsPerPage?: string\n  paginationOf?: string\n}\n\nexport interface MazTableProps<T extends Row<T>> {\n  /** class of the table element */\n  tableClass?: HTMLAttributes['class']\n  /** style of the table element */\n  tableStyle?: StyleValue\n  /** v-model of the table - list of selected rows */\n  modelValue?: (string | boolean | number)[]\n  /**\n   * size of the table\n   * @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'`\n   * @default `'md'`\n   */\n  size?: Size\n  /**\n   * Size of the search inputs\n   * @values `'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'mini'`\n   */\n  inputSize?: Size\n  /** title of the table */\n  title?: string\n  /** headers of the table */\n  headers?: Header[]\n  /** allow sort feature to all columns */\n  sortable?: boolean\n  /** align all headers */\n  headersAlign?: ThHTMLAttributes['align']\n  /** rows of the table - type: `Record<string, string | boolean | number>[]` ; */\n  rows?: T[]\n  /** add hover effect on rows */\n  hoverable?: boolean\n  /** enable search feature into the table header */\n  search?: boolean\n  /** disabled search in rows - useful to filtering data yourself or make search request to server */\n  noSearchInRow?: boolean\n  /** placeholder of the search input */\n  searchPlaceholder?: string\n  /** Disabled search by column (remove select input \"search by\") */\n  noSearchBy?: boolean\n  /** placeholder of the search by select */\n  searchByPlaceholder?: string\n  /** label of the search by of all options */\n  searchByAllLabel?: string\n  /** search query in input */\n  searchQuery?: string\n  /** add background color to odd rows */\n  backgroundOdd?: boolean\n  /** add background color to even rows */\n  backgroundEven?: boolean\n  /** add shodow to the table */\n  elevation?: boolean\n  /** no divider between rows */\n  divider?: boolean\n  /** caption of the table */\n  caption?: string\n  /**\n   * caption side\n   * @values `'top' | 'bottom'`\n   */\n  captionSide?: 'top' | 'bottom'\n  /** add pagination into the table footer */\n  pagination?: boolean\n  /** current page of pagination */\n  page?: number\n  /** number of items per page */\n  pageSize?: number\n  /** pages count */\n  totalPages?: number\n  /** label of the pagination all option */\n  paginationAllLabel?: string\n  /** no paginate rows - useful to make paginate request with your server */\n  noPaginateRows?: boolean\n  /** total number of items */\n  totalItems?: number\n  /** loading state */\n  loading?: boolean\n  /** Enable selection of rows */\n  selectable?: boolean\n  /** Enable selection of rows - key of the selected row */\n  selectedKey?: string\n  /**\n   * table layout\n   * @values `'auto' | 'fixed'`\n   */\n  tableLayout?: 'auto' | 'fixed'\n  /** color of the loading bar */\n  color?: Color\n  /**\n   * translations\n   * @default `{ searchByAllLabel: 'All', searchByPlaceholder: 'Search by', searchPlaceholder: 'Search', paginationAllLabel: 'All', noResults: 'No results' }`\n   * @type {Translations}\n   */\n  translations?: MazTableTranslations\n  /**\n   * Size radius of the component's border\n   * @values `'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'`\n   * @default 'lg'\n   */\n  roundedSize?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'\n  /**\n   * Enable scrollable on table\n   * @default `false`\n   */\n  scrollable?: boolean\n}\n\nexport interface MazTableProvide {\n  size: Ref<Size>\n  hoverable: Ref<boolean>\n  backgroundEven: Ref<boolean>\n  backgroundOdd: Ref<boolean>\n}\n\nexport const mazTableKey = 'maz-table' as const\n</script>\n\n<script lang=\"ts\" setup generic=\"T extends Row<T>\">\nimport type { MazSelectOption } from '@components/MazSelect.vue'\nimport type { Color, Size } from '@components/types'\n\nimport {\n  computed,\n  defineAsyncComponent,\n  type HTMLAttributes,\n  onBeforeMount,\n  provide,\n  type Ref,\n  ref,\n  type StyleValue,\n  type ThHTMLAttributes,\n  toRefs,\n  useSlots,\n  watch,\n} from 'vue'\n\nconst props = withDefaults(defineProps<MazTableProps<T>>(), {\n  tableClass: undefined,\n  tableStyle: undefined,\n  modelValue: undefined,\n  title: undefined,\n  size: 'md',\n  rows: undefined,\n  searchQuery: undefined,\n  headers: undefined,\n  headersAlign: 'left',\n  caption: undefined,\n  page: 1,\n  pageSize: 20,\n  totalItems: undefined,\n  selectedKey: undefined,\n  captionSide: 'bottom',\n  tableLayout: undefined,\n  searchPlaceholder: 'Search',\n  searchByPlaceholder: 'Search by',\n  searchByAllLabel: 'All',\n  paginationAllLabel: 'All',\n  color: 'primary',\n  totalPages: undefined,\n  roundedSize: 'lg',\n  scrollable: false,\n})\nconst emits = defineEmits<{\n  /**\n   * emitted when a row is selected\n   * @property {(Row | string | number | boolean)[]} value list of selected rows (if selectedKey is defined, it will be the value of the selectedKey of the row)\n   */\n  (event: 'update:model-value', value: (Row<T> | string | number | boolean)[] | undefined): void\n  /**\n   * emitted when enter a value in the search input\n   * @property {string} searchQuery search query\n   */\n  (event: 'update:search-query', searchQuery: string | undefined): void\n  /**\n   * emitted when the current page of the pagination change\n   * @property {number} page current page\n   */\n  (event: 'update:page', page: number): void\n  /**\n   * emitted when the page size of the pagination change\n   * @property {number} pageSize current page size\n   */\n  (event: 'update:page-size', pageSize: number): void\n}>()\n\nconst MazBtn = defineAsyncComponent(() => import('@components/MazBtn.vue'))\nconst MazCheckbox = defineAsyncComponent(() => import('@components/MazCheckbox.vue'))\nconst MazInput = defineAsyncComponent(() => import('@components/MazInput.vue'))\nconst MazLoadingBar = defineAsyncComponent(() => import('@components/MazLoadingBar.vue'))\nconst MazSelect = defineAsyncComponent(() => import('@components/MazSelect.vue'))\nconst MazTableCell = defineAsyncComponent(() => import('@components/MazTableCell.vue'))\nconst MazTableRow = defineAsyncComponent(() => import('@components/MazTableRow.vue'))\nconst MazTableTitle = defineAsyncComponent(() => import('@components/MazTableTitle.vue'))\n\nconst ArrowIcon = defineAsyncComponent(() => import('@icons/arrow-up.svg'))\nconst ChevronDoubleIcon = defineAsyncComponent(() => import('@icons/chevron-double-left.svg'))\nconst ChevronIcon = defineAsyncComponent(() => import('@icons/chevron-left.svg'))\nconst SearchIcon = defineAsyncComponent(() => import('@icons/magnifying-glass.svg'))\n\nconst defaultTranslations: Required<MazTableTranslations> = {\n  noResults: 'No results',\n  actionHeader: 'Actions',\n  searchByAllLabel: 'All',\n  searchByPlaceholder: 'Search by',\n  searchPlaceholder: 'Search',\n  paginationAllLabel: 'All',\n  paginationRowsPerPage: 'Rows per page',\n  paginationOf: 'of',\n}\n\nconst t = computed<Required<MazTableTranslations>>(() => {\n  const { translations, searchByAllLabel, searchByPlaceholder, searchPlaceholder, paginationAllLabel } = props\n\n  return {\n    ...defaultTranslations,\n    ...translations,\n    searchByAllLabel,\n    searchByPlaceholder,\n    searchPlaceholder,\n    paginationAllLabel,\n  }\n})\n\nconst hasDivider = computed<boolean>(\n  () => props.divider && !props.backgroundEven && !props.backgroundOdd,\n)\n\nconst { size, hoverable, backgroundEven, backgroundOdd } = toRefs(props)\n\nprovide<MazTableProvide>(mazTableKey, {\n  size,\n  hoverable,\n  backgroundEven,\n  backgroundOdd,\n})\n\nconst rowsNormalized = ref<T[]>(getNormalizedRows())\n\nconst isSelectable = computed<boolean>(() => props.selectable || !!props.selectedKey)\n\nconst currentPage = ref(props.page)\nwatch(\n  () => props.page,\n  (value) => {\n    currentPage.value = value\n  },\n)\nconst currentPageModel = computed({\n  get: () => currentPage.value,\n  set: (value) => {\n    currentPage.value = value\n    emits('update:page', value)\n  },\n})\n\nconst pageSizeOptions = computed<MazSelectOption[]>(() => [\n  { label: t.value.paginationAllLabel, value: Number.POSITIVE_INFINITY },\n  { label: 5, value: 5 },\n  { label: 10, value: 10 },\n  { label: 20, value: 20 },\n  { label: 50, value: 50 },\n  { label: 100, value: 100 },\n  { label: 200, value: 200 },\n])\nconst pageSizeModelInternal = ref(props.pageSize)\nwatch(\n  () => props.pageSize,\n  (value) => {\n    pageSizeModelInternal.value = value\n  },\n)\nconst pageSizeModel = computed({\n  get: () => pageSizeModelInternal.value,\n  set: (value) => {\n    pageSizeModelInternal.value = value\n    emits('update:page-size', value)\n  },\n})\n\nconst totalPagesInternal = computed(() => {\n  return props.totalPages\n    ?? (pageSizeModel.value === Number.POSITIVE_INFINITY || !props.rows?.length)\n    ? 1\n    : Math.ceil(props.rows.length / pageSizeModel.value)\n})\n\nfunction firstPage() {\n  currentPageModel.value = 1\n}\nfunction lastPage() {\n  currentPageModel.value = totalPagesInternal.value\n}\n\nfunction previousPage() {\n  currentPageModel.value = currentPageModel.value - 1\n}\nfunction nextPage() {\n  currentPageModel.value = currentPageModel.value + 1\n}\n\nconst rowsOfPage = computed(() => {\n  if (\n    !props.pagination\n    || props.noPaginateRows\n    || pageSizeModel.value === Number.POSITIVE_INFINITY\n  ) {\n    return rowsNormalized.value\n  }\n\n  const start = (currentPage.value - 1) * pageSizeModel.value\n  const end = start + pageSizeModel.value\n\n  return rowsNormalized.value.slice(start, end)\n})\n\nwatch(\n  () => [props.rows, props.modelValue],\n  () => {\n    rowsNormalized.value = getNormalizedRows()\n  },\n)\n\nconst sortedColumnIndex = ref<number>()\nconst sortType = ref<'ASC' | 'DESC'>()\n\nconst headersNormalized = ref<HeadersNormalized[]>(getNormalizedHeaders())\n\nconst searchByKey = ref<string>()\nconst searchByOptions = computed<MazSelectOption[]>(() => [\n  { label: props.searchByAllLabel, value: null },\n  ...headersNormalized.value.map((header) => {\n    return {\n      label: header.label,\n      value: header.key,\n    }\n  }),\n])\n\nconst searchQueryModelInternal = ref(props.searchQuery)\nwatch(\n  () => props.searchQuery,\n  (value) => {\n    searchQueryModelInternal.value = value\n  },\n)\nconst searchQueryModel = computed({\n  get: () => searchQueryModelInternal.value,\n  set: (value) => {\n    searchQueryModelInternal.value = value\n    emits('update:search-query', value)\n  },\n})\n\nfunction getSortedRows(rows: T[]) {\n  return [...rows].sort((a, b) => {\n    if (sortedColumnIndex.value === undefined || sortType.value === undefined)\n      return 0\n\n    const aValue = a[headersNormalized.value[sortedColumnIndex.value].key as string]\n    const bValue = b[headersNormalized.value[sortedColumnIndex.value].key as string]\n\n    // Comparez les valeurs en fonction du type de données\n    if (typeof aValue === 'string' && typeof bValue === 'string') {\n      return sortType.value === 'ASC'\n        ? aValue.localeCompare(bValue)\n        : bValue.localeCompare(aValue)\n    }\n    else {\n      return sortType.value === 'ASC' ? aValue - bValue : bValue - aValue\n    }\n  })\n}\n\nfunction getFilteredRows(rows: T[]) {\n  if (props.noSearchInRow || typeof searchQueryModel.value !== 'string')\n    return rowsOfPage.value\n\n  const query = searchQueryModel.value.toLowerCase()\n\n  return [...rows].filter((row) => {\n    if (searchByKey.value) {\n      return String(row[searchByKey.value]).toLowerCase().includes(query)\n    }\n\n    return Object.values(row).some((value) => {\n      if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {\n        return String(value).toLowerCase().includes(query)\n      }\n\n      return false\n    })\n  })\n}\n\nconst rowsFiltered = computed<T[]>(() => {\n  const filteredResults = getFilteredRows(rowsOfPage.value as T[])\n\n  return getSortedRows(filteredResults as T[])\n})\n\nconst slots = useSlots()\n\nconst hasHeader = computed<boolean>(() => props.search || !!props.title || !!slots.title)\nconst hasFooter = computed<boolean>(() => props.pagination)\n\nfunction getNormalizedHeaders(): HeadersNormalized[] {\n  return (\n    props.headers?.map(header =>\n      typeof header === 'string'\n        ? { label: header, align: props.headersAlign }\n        : { align: props.headersAlign, thHeaders: header.headers, ...header },\n    ) ?? []\n  )\n}\n\nfunction getNormalizedRows(): T[] {\n  return (\n    props.rows?.map(row => ({\n      selected: props.modelValue?.includes(props.selectedKey ? row[props.selectedKey] : row),\n      ...row,\n    })) ?? []\n  )\n}\n\nfunction sortColumn(columnIndex: number) {\n  if (columnIndex === sortedColumnIndex.value) {\n    const sortTypeValue = sortType.value === 'DESC' ? 'ASC' : undefined\n    sortType.value\n        = sortType.value === undefined ? 'DESC' : sortTypeValue\n  }\n  else {\n    sortType.value = 'DESC'\n  }\n  sortedColumnIndex.value = sortType.value === undefined ? undefined : columnIndex\n}\n\nconst allSelected = computed<boolean>({\n  get: () => {\n    return rowsFiltered.value.every(row => row.selected) ?? false\n  },\n  set: selectAll,\n})\n\nfunction selectAll(value: boolean) {\n  for (const row of rowsFiltered.value) {\n    row.selected = value\n  }\n\n  emitValues()\n}\n\nfunction selectRow(value: boolean, index: number) {\n  rowsFiltered.value[index].selected = value\n\n  emitValues()\n}\n\nfunction emitValues(selectedRows?: (T | string | number | boolean)[]) {\n  selectedRows = selectedRows ?? getSelectedRows()\n\n  const rows = selectedRows?.length ? selectedRows : undefined\n\n  emits('update:model-value', rows)\n}\n\nfunction getSelectedRows(): (T | string | number | boolean)[] {\n  // if (props.selectedKey === undefined) {\n  //   return\n  // }\n\n  return rowsFiltered.value\n    .filter(row => row.selected)\n    .map(row => (props.selectedKey ? row[props.selectedKey] : row))\n}\n\nonBeforeMount(() => {\n  const selectedRows = getSelectedRows()\n\n  if (selectedRows?.length) {\n    emitValues(selectedRows)\n  }\n})\n</script>\n\n<template>\n  <div class=\"m-table m-reset-css\" :class=\"{ '--has-header': hasHeader }\">\n    <div v-if=\"hasHeader\" class=\"m-table-header\">\n      <div v-if=\"title || $slots.title\" class=\"m-table-spacer\">\n        <slot name=\"title\">\n          <span class=\"m-table-header-title\">\n            {{ title }}\n          </span>\n        </slot>\n      </div>\n\n      <div v-if=\"search\" class=\"m-table-header-search\">\n        <MazSelect\n          v-if=\"!noSearchBy\"\n          v-model=\"searchByKey\"\n          :rounded-size\n          :color\n          :style=\"{ width: '8rem' }\"\n          :placeholder=\"t.searchByPlaceholder\"\n          :size=\"inputSize ?? size\"\n          :options=\"searchByOptions\"\n        />\n        <MazInput\n          v-model=\"searchQueryModel\"\n          :size=\"inputSize ?? size\"\n          :rounded-size\n          :color\n          :debounce=\"300\"\n          :placeholder=\"t.searchPlaceholder\"\n          :left-icon=\"SearchIcon\"\n        />\n      </div>\n    </div>\n    <div\n      class=\"m-table-wrapper\" :class=\"[`--rounded-${roundedSize}`, {\n        '--scrollable': scrollable,\n      }]\"\n    >\n      <table\n        :class=\"[{ '--elevation': elevation, '--has-layout': tableLayout }, tableClass]\"\n        :style=\"tableStyle\"\n      >\n        <caption v-if=\"caption || $slots.caption\">\n          <!--\n            @slot caption - add caption on top or bottom of the table\n          -->\n          <slot name=\"caption\">\n            {{ caption }}\n          </slot>\n        </caption>\n\n        <thead v-if=\"headersNormalized\">\n          <!--\n            @slot thead - content in thead element\n          -->\n          <slot name=\"thead\">\n            <MazTableRow no-hoverable>\n              <MazTableTitle\n                v-if=\"isSelectable\"\n                align=\"left\"\n                :class=\"`--${size}`\"\n                class=\"m-table-select-column\"\n              >\n                <MazCheckbox v-model=\"allSelected\" size=\"sm\" />\n              </MazTableTitle>\n              <MazTableTitle\n                v-for=\"(header, columnIndex) in headersNormalized\"\n                :key=\"columnIndex\"\n                :scope=\"header.scope\"\n                :align=\"header.align\"\n                :rowspan=\"header.rowspan\"\n                :colspan=\"header.colspan\"\n                :headers=\"header.thHeaders\"\n                :style=\"{ width: header.width, textAlign: header.align }\"\n                class=\"maz-group\"\n                :class=\"[\n                  { '--hidden': header.hidden, '--sortable': header.sortable ?? sortable },\n                  header.classes,\n                  `--${size}`,\n                ]\"\n                @click=\"(header.sortable ?? sortable) && sortColumn(columnIndex)\"\n              >\n                <span :class=\"{ 'maz-sr-only': header.srOnly }\">\n                  <!--\n                  @slot header - replace column header\n                    @binding {Object} header - header data\n                    @binding {String} label - header label\n                -->\n                  <slot name=\"header\" :header=\"header\" :label=\"header.label\">\n                    <!--\n                      @slot header-label-{key} - replace column header label\n                        @binding {Object} header - header data\n                        @binding {String} label - header label\n                    -->\n                    <slot :name=\"`header-label-${header.key}`\" :header=\"header\" :label=\"header.label\">\n                      {{ header.label }}\n                    </slot>\n\n                    <div v-if=\"header.sortable ?? sortable\" class=\"m-table-sort-icon-wrapper\">\n                      <ArrowIcon\n                        class=\"m-table-sort-icon maz-hidden group-hover:maz-block\"\n                        :class=\"{\n                          '--sorted': columnIndex === sortedColumnIndex,\n                          '--up': sortType === 'DESC',\n                          '--down': sortType === 'ASC',\n                        }\"\n                      />\n                    </div>\n                  </slot>\n                </span>\n              </MazTableTitle>\n              <MazTableTitle v-if=\"$slots.actions\" align=\"left\" :class=\"`--${size}`\">\n                <!--\n                  @slot actions-header - replace text of actions header\n                -->\n                <slot name=\"actions-header\">\n                  {{ t.actionHeader }}\n                </slot>\n              </MazTableTitle>\n            </MazTableRow>\n          </slot>\n        </thead>\n\n        <MazLoadingBar v-if=\"loading\" :color=\"color\" class=\"!maz-absolute\" />\n\n        <tbody :class=\"{ '--divider': hasDivider }\">\n          <slot>\n            <template v-if=\"rowsFiltered.length > 0\">\n              <MazTableRow\n                v-for=\"(row, rowIndex) in rowsFiltered\"\n                :key=\"rowIndex\"\n                :class=\"row.classes\"\n                @click=\"row.action && row.action(row)\"\n              >\n                <MazTableCell v-if=\"isSelectable\" class=\"m-table-select-column\">\n                  <!--\n                    @slot select - replace checkbox component\n                      @binding {Object} row - row data\n                      @binding {Boolean} selected - if selected or not\n                  -->\n                  <slot name=\"select\" :row=\"row\" :selected=\"row.selected\">\n                    <MazCheckbox\n                      size=\"sm\"\n                      :model-value=\"row.selected\"\n                      @update:model-value=\"selectRow($event, rowIndex)\"\n                    />\n                  </slot>\n                </MazTableCell>\n                <MazTableCell\n                  v-for=\"({ key, align, classes }, dataIndex) in headersNormalized\"\n                  :key=\"dataIndex\"\n                  :align=\"align\"\n                  :class=\"classes\"\n                >\n                  <!--\n                    @slot cell - replace all row cells\n                      @binding {Object} row - row data\n                      @binding {Boolean} value - cell value\n                  -->\n                  <slot v-if=\"key\" name=\"cell\" :row=\"row\" :value=\"row[key]\">\n                    <!--\n                      @slot cell-{key} - replace row cells of column\n                        @binding {Object} row - row data\n                        @binding {Boolean} value - cell value\n                    -->\n                    <slot :name=\"`cell-${key}`\" :row=\"row\" :value=\"row[key]\">\n                      {{ row[key] }}\n                    </slot>\n                  </slot>\n                </MazTableCell>\n                <MazTableCell v-if=\"$slots.actions\">\n                  <!--\n                    @slot actions - will add actions column\n                      @binding {Object} row - row data\n                  -->\n                  <slot name=\"actions\" :row=\"row\" />\n                </MazTableCell>\n              </MazTableRow>\n            </template>\n            <template v-else>\n              <MazTableRow>\n                <MazTableCell\n                  :colspan=\"\n                    headersNormalized.length + (isSelectable ? 1 : 0) + ($slots.actions ? 1 : 0)\n                  \"\n                >\n                  <!--\n                    @slot no-results - replace no results\n                  -->\n                  <slot name=\"no-results\">\n                    <p class=\"maz-text-center maz-text-muted\">\n                      <!--\n                        @slot no-results-text - replace no results test only\n                      -->\n                      <slot name=\"no-results-text\">\n                        {{ t.noResults }}\n                      </slot>\n                    </p>\n                  </slot>\n                </MazTableCell>\n              </MazTableRow>\n            </template>\n          </slot>\n        </tbody>\n      </table>\n    </div>\n\n    <div v-if=\"hasFooter\" class=\"m-table-footer\">\n      <div class=\"m-table-spacer\" />\n\n      <div v-if=\"pagination\" class=\"m-table-footer-pagination\">\n        <div class=\"m-table-footer-pagination-items-per-page\">\n          <span class=\"maz-hidden maz-text-sm tab-s:maz-block\"> {{ t.paginationRowsPerPage }} </span>\n          <MazSelect\n            v-model=\"pageSizeModel\"\n            :options=\"pageSizeOptions\"\n            :rounded-size\n            :size=\"inputSize ?? size\"\n            :color=\"color\"\n            list-position=\"top\"\n            :style=\"{ width: '5rem' }\"\n          />\n        </div>\n\n        <span v-if=\"totalPagesInternal\" class=\"maz-whitespace-nowrap maz-text-sm\">\n          {{ currentPageModel }} - {{ rowsFiltered.length }} {{ t.paginationOf }} {{ totalPagesInternal }}\n        </span>\n\n        <div class=\"m-table-footer-pagination-buttons\">\n          <MazBtn\n            :disabled=\"currentPageModel === 1\"\n            :size=\"inputSize ?? size\"\n            color=\"transparent\"\n            :rounded-size\n            no-elevation\n            @click=\"firstPage\"\n          >\n            <ChevronDoubleIcon class=\"maz-text-base\" />\n          </MazBtn>\n\n          <MazBtn\n            :disabled=\"currentPageModel === 1\"\n            :size=\"inputSize ?? size\"\n            color=\"transparent\"\n            :rounded-size\n            no-elevation\n            @click=\"previousPage\"\n          >\n            <ChevronIcon class=\"maz-text-base\" />\n          </MazBtn>\n          <MazBtn\n            :disabled=\"currentPageModel === totalPagesInternal\"\n            :size=\"inputSize ?? size\"\n            color=\"transparent\"\n            :rounded-size\n            no-elevation\n            @click=\"nextPage\"\n          >\n            <ChevronIcon class=\"maz-rotate-180 maz-text-base\" />\n          </MazBtn>\n\n          <MazBtn\n            :disabled=\"currentPageModel === totalPagesInternal\"\n            :size=\"inputSize ?? size\"\n            color=\"transparent\"\n            :rounded-size\n            no-elevation\n            @click=\"lastPage\"\n          >\n            <ChevronDoubleIcon class=\"maz-rotate-180 maz-text-base\" />\n          </MazBtn>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"postcss\" scoped>\n  .m-table {\n  @apply maz-relative maz-max-w-full;\n\n  &-header {\n    @apply maz-flex maz-max-w-full maz-items-center maz-justify-between maz-gap-2 maz-bg-color maz-py-2;\n\n    &-search {\n      @apply maz-flex maz-items-center maz-gap-2;\n    }\n\n    &-title {\n      @apply maz-font-semibold;\n    }\n  }\n\n  &-footer {\n    @apply maz-flex maz-max-w-full maz-justify-between maz-gap-2 maz-bg-color maz-p-2;\n\n    &-pagination {\n      @apply maz-flex maz-items-center maz-gap-4;\n\n      &-buttons {\n        @apply maz-flex maz-items-center maz-gap-1;\n      }\n\n      &-items-per-page {\n        @apply maz-flex maz-items-center maz-gap-1;\n      }\n    }\n  }\n\n  &-wrapper {\n    @apply maz-border maz-border-solid maz-border-color-light;\n\n    &.--scrollable {\n      @apply maz-overflow-auto;\n    }\n\n    &:not(.--rounded-none) {\n      @apply maz-rounded-xl;\n    }\n\n    &.--rounded-sm {\n      @apply maz-rounded-sm;\n\n      table {\n        @apply maz-rounded-sm;\n\n        thead tr:hover:first-child {\n          @apply maz-rounded-b-sm;\n\n          th:first-child {\n            @apply maz-rounded-tl-sm;\n          }\n\n          th:last-child {\n            @apply maz-rounded-tr-sm;\n          }\n        }\n\n        tbody tr:hover:last-child {\n          @apply maz-rounded-b-sm;\n\n          td:first-child {\n            @apply maz-rounded-bl-sm;\n          }\n\n          td:last-child {\n            @apply maz-rounded-br-sm;\n          }\n        }\n      }\n    }\n\n    &.--rounded-md {\n      @apply maz-rounded-md;\n\n      table {\n        @apply maz-rounded-md;\n\n        thead tr:hover:first-child {\n          @apply maz-rounded-b-md;\n\n          th:first-child {\n            @apply maz-rounded-tl-md;\n          }\n\n          th:last-child {\n            @apply maz-rounded-tr-md;\n          }\n        }\n\n        tbody tr:hover:last-child {\n          @apply maz-rounded-b-md;\n\n          td:first-child {\n            @apply maz-rounded-bl-md;\n          }\n\n          td:last-child {\n            @apply maz-rounded-br-md;\n          }\n        }\n      }\n    }\n\n    &.--rounded-lg {\n      @apply maz-rounded-lg;\n\n      table {\n        @apply maz-rounded-lg;\n\n        thead tr:hover:first-child {\n          @apply maz-rounded-b-lg;\n\n          th:first-child {\n            @apply maz-rounded-tl-lg;\n          }\n\n          th:last-child {\n            @apply maz-rounded-tr-lg;\n          }\n        }\n\n        tbody tr:hover:last-child {\n          @apply maz-rounded-b-lg;\n\n          td:first-child {\n            @apply maz-rounded-bl-lg;\n          }\n\n          td:last-child {\n            @apply maz-rounded-br-lg;\n          }\n        }\n      }\n    }\n\n    &.--rounded-xl {\n      @apply maz-rounded-xl;\n\n      table {\n        @apply maz-rounded-xl;\n\n        thead tr:hover:first-child {\n          @apply maz-rounded-b-xl;\n\n          th:first-child {\n            @apply maz-rounded-tl-xl;\n          }\n\n          th:last-child {\n            @apply maz-rounded-tr-xl;\n          }\n        }\n\n        tbody tr:hover:last-child {\n          @apply maz-rounded-b-xl;\n\n          td:first-child {\n            @apply maz-rounded-bl-xl;\n          }\n\n          td:last-child {\n            @apply maz-rounded-br-xl;\n          }\n        }\n      }\n    }\n  }\n\n  &.--has-header {\n    @apply maz-rounded;\n  }\n\n  &:not(.--has-header) {\n    table {\n      @apply maz-rounded;\n    }\n  }\n\n  table {\n    @apply maz-table maz-w-full maz-border-collapse maz-bg-color;\n\n    table-layout: v-bind('tableLayout');\n\n    &.--has-layout {\n      @apply maz-w-full;\n    }\n\n    &.--elevation {\n      @apply maz-elevation;\n    }\n\n    & .m-table-select-column {\n      @apply maz-w-[2.9rem];\n    }\n\n    caption {\n      @apply maz-p-3;\n\n      caption-side: v-bind('captionSide');\n    }\n\n    thead {\n      @apply maz-break-all maz-border-b maz-border-color-light;\n\n      th {\n        @apply maz-gap-2 maz-break-all maz-font-normal maz-text-muted maz-tracking-tight;\n\n        &.--hidden {\n          @apply maz-hidden;\n        }\n\n        &.--sortable {\n          @apply maz-cursor-pointer hover:maz-bg-color-dark;\n        }\n\n        &.--xl {\n          @apply maz-px-5 maz-py-5 maz-text-lg;\n        }\n\n        &.--lg {\n          @apply maz-px-4 maz-py-4 maz-text-base;\n        }\n\n        &.--md {\n          @apply maz-px-3 maz-py-3 maz-text-sm;\n        }\n\n        &.--sm {\n          @apply maz-px-2 maz-py-2 maz-text-xs;\n        }\n\n        &.--xs {\n          @apply maz-px-1 maz-py-1 maz-text-xs;\n        }\n\n        &.--mini {\n          @apply maz-px-0.5 maz-py-0.5 maz-text-xs;\n        }\n\n        span {\n          @apply maz-inline-flex maz-items-center maz-gap-1;\n\n          .m-table-sort-icon-wrapper {\n            @apply maz-h-4 maz-w-4;\n          }\n\n          .m-table-sort-icon {\n            @apply maz-text-muted maz-transition-transform maz-duration-300 maz-ease-out;\n\n            &.--sorted {\n              @apply maz-block maz-text-normal;\n\n              &.--up {\n                @apply maz-rotate-0;\n              }\n\n              &.--down {\n                @apply maz-rotate-180;\n              }\n            }\n          }\n        }\n      }\n    }\n\n    tbody {\n      &.--divider {\n        @apply maz-divide-y maz-divide-color-light;\n      }\n    }\n  }\n}\n</style>\n"],"names":["mazTableKey","props","__props","emits","__emit","MazBtn","defineAsyncComponent","MazCheckbox","MazInput","MazLoadingBar","MazSelect","MazTableCell","MazTableRow","MazTableTitle","ArrowIcon","ChevronDoubleIcon","ChevronIcon","SearchIcon","defaultTranslations","t","computed","translations","searchByAllLabel","searchByPlaceholder","searchPlaceholder","paginationAllLabel","hasDivider","size","hoverable","backgroundEven","backgroundOdd","toRefs","provide","rowsNormalized","ref","getNormalizedRows","isSelectable","currentPage","watch","value","currentPageModel","pageSizeOptions","pageSizeModelInternal","pageSizeModel","totalPagesInternal","_a","firstPage","lastPage","previousPage","nextPage","rowsOfPage","start","end","sortedColumnIndex","sortType","headersNormalized","getNormalizedHeaders","searchByKey","searchByOptions","header","searchQueryModelInternal","searchQueryModel","getSortedRows","rows","a","b","aValue","bValue","getFilteredRows","query","row","rowsFiltered","filteredResults","slots","useSlots","hasHeader","hasFooter","sortColumn","columnIndex","sortTypeValue","allSelected","selectAll","emitValues","selectRow","index","selectedRows","getSelectedRows","onBeforeMount"],"mappings":"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"}

package/dist/chunks/MazTable.vue_vue_type_style_index_0_scoped_4101f1d3_lang.Dwkx-V96.mjs

@@ -0,0 +1,534 @@
+import { defineComponent as Ne, useCssVars as we, defineAsyncComponent as m, computed as d, toRefs as Le, provide as Me, ref as k, watch as E, useSlots as Te, onBeforeMount as Oe, openBlock as s, createElementBlock as p, normalizeClass as g, renderSlot as v, createElementVNode as h, toDisplayString as y, createCommentVNode as r, createBlock as S, unref as t, createVNode as i, normalizeStyle as le, createTextVNode as I, withCtx as c, Fragment as q, renderList as Y } from "vue";
+import '../assets/MazTable.D06R_2nI.css';const Ee = {
+  key: 0,
+  class: "m-table-header"
+}, Re = {
+  key: 0,
+  class: "m-table-spacer"
+}, Ke = { class: "m-table-header-title" }, De = {
+  key: 1,
+  class: "m-table-header-search"
+}, Fe = { key: 0 }, He = { key: 1 }, Ue = {
+  key: 0,
+  class: "m-table-sort-icon-wrapper"
+}, Qe = { class: "maz-text-center maz-text-muted" }, qe = {
+  key: 1,
+  class: "m-table-footer"
+}, Ye = {
+  key: 0,
+  class: "m-table-footer-pagination"
+}, je = { class: "m-table-footer-pagination-items-per-page" }, Ge = { class: "maz-hidden maz-text-sm tab-s:maz-block" }, Je = {
+  key: 0,
+  class: "maz-whitespace-nowrap maz-text-sm"
+}, We = { class: "m-table-footer-pagination-buttons" }, Xe = "maz-table", _e = /* @__PURE__ */ Ne({
+  __name: "MazTable",
+  props: {
+    tableClass: { default: void 0 },
+    tableStyle: { type: [Boolean, null, String, Object, Array], default: void 0 },
+    modelValue: { default: void 0 },
+    size: { default: "md" },
+    inputSize: {},
+    title: { default: void 0 },
+    headers: { default: void 0 },
+    sortable: { type: Boolean },
+    headersAlign: { default: "left" },
+    rows: { default: void 0 },
+    hoverable: { type: Boolean },
+    search: { type: Boolean },
+    noSearchInRow: { type: Boolean },
+    searchPlaceholder: { default: "Search" },
+    noSearchBy: { type: Boolean },
+    searchByPlaceholder: { default: "Search by" },
+    searchByAllLabel: { default: "All" },
+    searchQuery: { default: void 0 },
+    backgroundOdd: { type: Boolean },
+    backgroundEven: { type: Boolean },
+    elevation: { type: Boolean },
+    divider: { type: Boolean },
+    caption: { default: void 0 },
+    captionSide: { default: "bottom" },
+    pagination: { type: Boolean },
+    page: { default: 1 },
+    pageSize: { default: 20 },
+    totalPages: { default: void 0 },
+    paginationAllLabel: { default: "All" },
+    noPaginateRows: { type: Boolean },
+    totalItems: { default: void 0 },
+    loading: { type: Boolean },
+    selectable: { type: Boolean },
+    selectedKey: { default: void 0 },
+    tableLayout: { default: void 0 },
+    color: { default: "primary" },
+    translations: {},
+    roundedSize: { default: "lg" },
+    scrollable: { type: Boolean, default: !1 }
+  },
+  emits: ["update:model-value", "update:search-query", "update:page", "update:page-size"],
+  setup(ae, { emit: te }) {
+    we((e) => ({
+      "4dfec98a": e.tableLayout,
+      "54e27d62": e.captionSide
+    }));
+    const o = ae, N = te, w = m(() => import("../components/MazBtn.mjs")), j = m(() => import("../components/MazCheckbox.mjs")), oe = m(() => import("../components/MazInput.mjs")), se = m(() => import("../components/MazLoadingBar.mjs")), G = m(() => import("../components/MazSelect.mjs")), L = m(() => import("../components/MazTableCell.mjs")), R = m(() => import("../components/MazTableRow.mjs")), K = m(() => import("../components/MazTableTitle.mjs")), ne = m(() => import("./arrow-up.HdMpMK4c.mjs")), J = m(() => import("./chevron-double-left.C1WkQBYN.mjs")), W = m(() => import("./chevron-left.njfuF_Vt.mjs")), ue = m(() => import("./magnifying-glass.6EkSEo-G.mjs")), re = {
+      noResults: "No results",
+      actionHeader: "Actions",
+      searchByAllLabel: "All",
+      searchByPlaceholder: "Search by",
+      searchPlaceholder: "Search",
+      paginationAllLabel: "All",
+      paginationRowsPerPage: "Rows per page",
+      paginationOf: "of"
+    }, C = d(() => {
+      const { translations: e, searchByAllLabel: a, searchByPlaceholder: l, searchPlaceholder: n, paginationAllLabel: u } = o;
+      return {
+        ...re,
+        ...e,
+        searchByAllLabel: a,
+        searchByPlaceholder: l,
+        searchPlaceholder: n,
+        paginationAllLabel: u
+      };
+    }), ie = d(
+      () => o.divider && !o.backgroundEven && !o.backgroundOdd
+    ), { size: b, hoverable: de, backgroundEven: ce, backgroundOdd: pe } = Le(o);
+    Me(Xe, {
+      size: b,
+      hoverable: de,
+      backgroundEven: ce,
+      backgroundOdd: pe
+    });
+    const D = k(_()), F = d(() => o.selectable || !!o.selectedKey), M = k(o.page);
+    E(
+      () => o.page,
+      (e) => {
+        M.value = e;
+      }
+    );
+    const f = d({
+      get: () => M.value,
+      set: (e) => {
+        M.value = e, N("update:page", e);
+      }
+    }), ve = d(() => [
+      { label: C.value.paginationAllLabel, value: Number.POSITIVE_INFINITY },
+      { label: 5, value: 5 },
+      { label: 10, value: 10 },
+      { label: 20, value: 20 },
+      { label: 50, value: 50 },
+      { label: 100, value: 100 },
+      { label: 200, value: 200 }
+    ]), H = k(o.pageSize);
+    E(
+      () => o.pageSize,
+      (e) => {
+        H.value = e;
+      }
+    );
+    const B = d({
+      get: () => H.value,
+      set: (e) => {
+        H.value = e, N("update:page-size", e);
+      }
+    }), A = d(() => {
+      var e;
+      return o.totalPages ?? (B.value === Number.POSITIVE_INFINITY || !((e = o.rows) != null && e.length)) ? 1 : Math.ceil(o.rows.length / B.value);
+    });
+    function me() {
+      f.value = 1;
+    }
+    function be() {
+      f.value = A.value;
+    }
+    function fe() {
+      f.value = f.value - 1;
+    }
+    function ge() {
+      f.value = f.value + 1;
+    }
+    const X = d(() => {
+      if (!o.pagination || o.noPaginateRows || B.value === Number.POSITIVE_INFINITY)
+        return D.value;
+      const e = (M.value - 1) * B.value, a = e + B.value;
+      return D.value.slice(e, a);
+    });
+    E(
+      () => [o.rows, o.modelValue],
+      () => {
+        D.value = _();
+      }
+    );
+    const $ = k(), z = k(), V = k(Ce()), T = k(), ye = d(() => [
+      { label: o.searchByAllLabel, value: null },
+      ...V.value.map((e) => ({
+        label: e.label,
+        value: e.key
+      }))
+    ]), U = k(o.searchQuery);
+    E(
+      () => o.searchQuery,
+      (e) => {
+        U.value = e;
+      }
+    );
+    const O = d({
+      get: () => U.value,
+      set: (e) => {
+        U.value = e, N("update:search-query", e);
+      }
+    });
+    function ze(e) {
+      return [...e].sort((a, l) => {
+        if ($.value === void 0 || z.value === void 0)
+          return 0;
+        const n = a[V.value[$.value].key], u = l[V.value[$.value].key];
+        return typeof n == "string" && typeof u == "string" ? z.value === "ASC" ? n.localeCompare(u) : u.localeCompare(n) : z.value === "ASC" ? n - u : u - n;
+      });
+    }
+    function he(e) {
+      if (o.noSearchInRow || typeof O.value != "string")
+        return X.value;
+      const a = O.value.toLowerCase();
+      return [...e].filter((l) => T.value ? String(l[T.value]).toLowerCase().includes(a) : Object.values(l).some((n) => typeof n == "string" || typeof n == "number" || typeof n == "boolean" ? String(n).toLowerCase().includes(a) : !1));
+    }
+    const P = d(() => {
+      const e = he(X.value);
+      return ze(e);
+    }), Se = Te(), Z = d(() => o.search || !!o.title || !!Se.title), ke = d(() => o.pagination);
+    function Ce() {
+      var e;
+      return ((e = o.headers) == null ? void 0 : e.map(
+        (a) => typeof a == "string" ? { label: a, align: o.headersAlign } : { align: o.headersAlign, thHeaders: a.headers, ...a }
+      )) ?? [];
+    }
+    function _() {
+      var e;
+      return ((e = o.rows) == null ? void 0 : e.map((a) => {
+        var l;
+        return {
+          selected: (l = o.modelValue) == null ? void 0 : l.includes(o.selectedKey ? a[o.selectedKey] : a),
+          ...a
+        };
+      })) ?? [];
+    }
+    function Be(e) {
+      if (e === $.value) {
+        const a = z.value === "DESC" ? "ASC" : void 0;
+        z.value = z.value === void 0 ? "DESC" : a;
+      } else
+        z.value = "DESC";
+      $.value = z.value === void 0 ? void 0 : e;
+    }
+    const x = d({
+      get: () => P.value.every((e) => e.selected) ?? !1,
+      set: Ve
+    });
+    function Ve(e) {
+      for (const a of P.value)
+        a.selected = e;
+      Q();
+    }
+    function Pe(e, a) {
+      P.value[a].selected = e, Q();
+    }
+    function Q(e) {
+      e = e ?? ee();
+      const a = e != null && e.length ? e : void 0;
+      N("update:model-value", a);
+    }
+    function ee() {
+      return P.value.filter((e) => e.selected).map((e) => o.selectedKey ? e[o.selectedKey] : e);
+    }
+    return Oe(() => {
+      const e = ee();
+      e != null && e.length && Q(e);
+    }), (e, a) => (s(), p("div", {
+      class: g(["m-table m-reset-css", { "--has-header": Z.value }])
+    }, [
+      Z.value ? (s(), p("div", Ee, [
+        e.title || e.$slots.title ? (s(), p("div", Re, [
+          v(e.$slots, "title", {}, () => [
+            h("span", Ke, y(e.title), 1)
+          ], !0)
+        ])) : r("", !0),
+        e.search ? (s(), p("div", De, [
+          e.noSearchBy ? r("", !0) : (s(), S(t(G), {
+            key: 0,
+            modelValue: T.value,
+            "onUpdate:modelValue": a[0] || (a[0] = (l) => T.value = l),
+            "rounded-size": e.roundedSize,
+            color: e.color,
+            style: { width: "8rem" },
+            placeholder: C.value.searchByPlaceholder,
+            size: e.inputSize ?? t(b),
+            options: ye.value
+          }, null, 8, ["modelValue", "rounded-size", "color", "placeholder", "size", "options"])),
+          i(t(oe), {
+            modelValue: O.value,
+            "onUpdate:modelValue": a[1] || (a[1] = (l) => O.value = l),
+            size: e.inputSize ?? t(b),
+            "rounded-size": e.roundedSize,
+            color: e.color,
+            debounce: 300,
+            placeholder: C.value.searchPlaceholder,
+            "left-icon": t(ue)
+          }, null, 8, ["modelValue", "size", "rounded-size", "color", "placeholder", "left-icon"])
+        ])) : r("", !0)
+      ])) : r("", !0),
+      h("div", {
+        class: g(["m-table-wrapper", [`--rounded-${e.roundedSize}`, {
+          "--scrollable": e.scrollable
+        }]])
+      }, [
+        h("table", {
+          class: g([{ "--elevation": e.elevation, "--has-layout": e.tableLayout }, e.tableClass]),
+          style: le(e.tableStyle)
+        }, [
+          e.caption || e.$slots.caption ? (s(), p("caption", Fe, [
+            v(e.$slots, "caption", {}, () => [
+              I(y(e.caption), 1)
+            ], !0)
+          ])) : r("", !0),
+          V.value ? (s(), p("thead", He, [
+            v(e.$slots, "thead", {}, () => [
+              i(t(R), { "no-hoverable": "" }, {
+                default: c(() => [
+                  F.value ? (s(), S(t(K), {
+                    key: 0,
+                    align: "left",
+                    class: g([`--${t(b)}`, "m-table-select-column"])
+                  }, {
+                    default: c(() => [
+                      i(t(j), {
+                        modelValue: x.value,
+                        "onUpdate:modelValue": a[2] || (a[2] = (l) => x.value = l),
+                        size: "sm"
+                      }, null, 8, ["modelValue"])
+                    ]),
+                    _: 1
+                  }, 8, ["class"])) : r("", !0),
+                  (s(!0), p(q, null, Y(V.value, (l, n) => (s(), S(t(K), {
+                    key: n,
+                    scope: l.scope,
+                    align: l.align,
+                    rowspan: l.rowspan,
+                    colspan: l.colspan,
+                    headers: l.thHeaders,
+                    style: le({ width: l.width, textAlign: l.align }),
+                    class: g(["maz-group", [
+                      { "--hidden": l.hidden, "--sortable": l.sortable ?? e.sortable },
+                      l.classes,
+                      `--${t(b)}`
+                    ]]),
+                    onClick: (u) => (l.sortable ?? e.sortable) && Be(n)
+                  }, {
+                    default: c(() => [
+                      h("span", {
+                        class: g({ "maz-sr-only": l.srOnly })
+                      }, [
+                        v(e.$slots, "header", {
+                          header: l,
+                          label: l.label
+                        }, () => [
+                          v(e.$slots, `header-label-${l.key}`, {
+                            header: l,
+                            label: l.label
+                          }, () => [
+                            I(y(l.label), 1)
+                          ], !0),
+                          l.sortable ?? e.sortable ? (s(), p("div", Ue, [
+                            i(t(ne), {
+                              class: g(["m-table-sort-icon maz-hidden group-hover:maz-block", {
+                                "--sorted": n === $.value,
+                                "--up": z.value === "DESC",
+                                "--down": z.value === "ASC"
+                              }])
+                            }, null, 8, ["class"])
+                          ])) : r("", !0)
+                        ], !0)
+                      ], 2)
+                    ]),
+                    _: 2
+                  }, 1032, ["scope", "align", "rowspan", "colspan", "headers", "style", "class", "onClick"]))), 128)),
+                  e.$slots.actions ? (s(), S(t(K), {
+                    key: 1,
+                    align: "left",
+                    class: g(`--${t(b)}`)
+                  }, {
+                    default: c(() => [
+                      v(e.$slots, "actions-header", {}, () => [
+                        I(y(C.value.actionHeader), 1)
+                      ], !0)
+                    ]),
+                    _: 3
+                  }, 8, ["class"])) : r("", !0)
+                ]),
+                _: 3
+              })
+            ], !0)
+          ])) : r("", !0),
+          e.loading ? (s(), S(t(se), {
+            key: 2,
+            color: e.color,
+            class: "!maz-absolute"
+          }, null, 8, ["color"])) : r("", !0),
+          h("tbody", {
+            class: g({ "--divider": ie.value })
+          }, [
+            v(e.$slots, "default", {}, () => [
+              P.value.length > 0 ? (s(!0), p(q, { key: 0 }, Y(P.value, (l, n) => (s(), S(t(R), {
+                key: n,
+                class: g(l.classes),
+                onClick: (u) => l.action && l.action(l)
+              }, {
+                default: c(() => [
+                  F.value ? (s(), S(t(L), {
+                    key: 0,
+                    class: "m-table-select-column"
+                  }, {
+                    default: c(() => [
+                      v(e.$slots, "select", {
+                        row: l,
+                        selected: l.selected
+                      }, () => [
+                        i(t(j), {
+                          size: "sm",
+                          "model-value": l.selected,
+                          "onUpdate:modelValue": (u) => Pe(u, n)
+                        }, null, 8, ["model-value", "onUpdate:modelValue"])
+                      ], !0)
+                    ]),
+                    _: 2
+                  }, 1024)) : r("", !0),
+                  (s(!0), p(q, null, Y(V.value, ({ key: u, align: $e, classes: Ae }, Ie) => (s(), S(t(L), {
+                    key: Ie,
+                    align: $e,
+                    class: g(Ae)
+                  }, {
+                    default: c(() => [
+                      u ? v(e.$slots, "cell", {
+                        key: 0,
+                        row: l,
+                        value: l[u]
+                      }, () => [
+                        v(e.$slots, `cell-${u}`, {
+                          row: l,
+                          value: l[u]
+                        }, () => [
+                          I(y(l[u]), 1)
+                        ], !0)
+                      ], !0) : r("", !0)
+                    ]),
+                    _: 2
+                  }, 1032, ["align", "class"]))), 128)),
+                  e.$slots.actions ? (s(), S(t(L), { key: 1 }, {
+                    default: c(() => [
+                      v(e.$slots, "actions", { row: l }, void 0, !0)
+                    ]),
+                    _: 2
+                  }, 1024)) : r("", !0)
+                ]),
+                _: 2
+              }, 1032, ["class", "onClick"]))), 128)) : (s(), S(t(R), { key: 1 }, {
+                default: c(() => [
+                  i(t(L), {
+                    colspan: V.value.length + (F.value ? 1 : 0) + (e.$slots.actions ? 1 : 0)
+                  }, {
+                    default: c(() => [
+                      v(e.$slots, "no-results", {}, () => [
+                        h("p", Qe, [
+                          v(e.$slots, "no-results-text", {}, () => [
+                            I(y(C.value.noResults), 1)
+                          ], !0)
+                        ])
+                      ], !0)
+                    ]),
+                    _: 3
+                  }, 8, ["colspan"])
+                ]),
+                _: 3
+              }))
+            ], !0)
+          ], 2)
+        ], 6)
+      ], 2),
+      ke.value ? (s(), p("div", qe, [
+        a[4] || (a[4] = h("div", { class: "m-table-spacer" }, null, -1)),
+        e.pagination ? (s(), p("div", Ye, [
+          h("div", je, [
+            h("span", Ge, y(C.value.paginationRowsPerPage), 1),
+            i(t(G), {
+              modelValue: B.value,
+              "onUpdate:modelValue": a[3] || (a[3] = (l) => B.value = l),
+              options: ve.value,
+              "rounded-size": e.roundedSize,
+              size: e.inputSize ?? t(b),
+              color: e.color,
+              "list-position": "top",
+              style: { width: "5rem" }
+            }, null, 8, ["modelValue", "options", "rounded-size", "size", "color"])
+          ]),
+          A.value ? (s(), p("span", Je, y(f.value) + " - " + y(P.value.length) + " " + y(C.value.paginationOf) + " " + y(A.value), 1)) : r("", !0),
+          h("div", We, [
+            i(t(w), {
+              disabled: f.value === 1,
+              size: e.inputSize ?? t(b),
+              color: "transparent",
+              "rounded-size": e.roundedSize,
+              "no-elevation": "",
+              onClick: me
+            }, {
+              default: c(() => [
+                i(t(J), { class: "maz-text-base" })
+              ]),
+              _: 1
+            }, 8, ["disabled", "size", "rounded-size"]),
+            i(t(w), {
+              disabled: f.value === 1,
+              size: e.inputSize ?? t(b),
+              color: "transparent",
+              "rounded-size": e.roundedSize,
+              "no-elevation": "",
+              onClick: fe
+            }, {
+              default: c(() => [
+                i(t(W), { class: "maz-text-base" })
+              ]),
+              _: 1
+            }, 8, ["disabled", "size", "rounded-size"]),
+            i(t(w), {
+              disabled: f.value === A.value,
+              size: e.inputSize ?? t(b),
+              color: "transparent",
+              "rounded-size": e.roundedSize,
+              "no-elevation": "",
+              onClick: ge
+            }, {
+              default: c(() => [
+                i(t(W), { class: "maz-rotate-180 maz-text-base" })
+              ]),
+              _: 1
+            }, 8, ["disabled", "size", "rounded-size"]),
+            i(t(w), {
+              disabled: f.value === A.value,
+              size: e.inputSize ?? t(b),
+              color: "transparent",
+              "rounded-size": e.roundedSize,
+              "no-elevation": "",
+              onClick: be
+            }, {
+              default: c(() => [
+                i(t(J), { class: "maz-rotate-180 maz-text-base" })
+              ]),
+              _: 1
+            }, 8, ["disabled", "size", "rounded-size"])
+          ])
+        ])) : r("", !0)
+      ])) : r("", !0)
+    ], 2));
+  }
+});
+export {
+  _e as _,
+  Xe as m
+};
+//# sourceMappingURL=MazTable.vue_vue_type_style_index_0_scoped_4101f1d3_lang.Dwkx-V96.mjs.map