@htlkg/components 0.0.2 → 0.0.4

package/dist/filterHelpers-DgRyoYSa.js

@@ -0,0 +1,1386 @@
+import { defineComponent, ref, computed, createBlock, openBlock, unref, createElementBlock, toDisplayString, Fragment, renderList, renderSlot, createTextVNode, toRef, watch } from "vue";
+import { uiTable, uiSelectMultiple, uiSelect, uiChart } from "@hotelinking/ui";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
+import { u as useTable } from "./useTable-DutR1gkg.js";
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "Table",
+  props: {
+    items: {},
+    header: {},
+    loading: { type: Boolean, default: false },
+    currentPage: { default: 1 },
+    totalPages: { default: 1 },
+    totalItems: { default: 0 },
+    pageSize: { default: 10 },
+    orderedBy: { default: "" },
+    orderDirection: { default: "asc" },
+    actions: {},
+    selectAllItemsModal: {},
+    resetSelected: { type: Boolean, default: false },
+    smartFilterCategories: {},
+    filterLiterals: { default: () => ({
+      filters: "Smart Filters",
+      contains: "contains",
+      is: "is",
+      and: "and",
+      or: "or",
+      deleteAll: "Delete All",
+      filter: "Filter"
+    }) },
+    filters: {},
+    tableActionsDropdown: {},
+    tableActionButtons: {},
+    noResults: {},
+    hiddenColumns: {}
+  },
+  emits: ["update:currentPage", "update:pageSize", "update:selected", "update:orderedBy", "update:orderDirection", "update:resetSelected", "table-action", "table-action-selected", "table-action-button-clicked", "smart-filters-sent", "smart-filters-cleared", "smart-filter-deleted", "custom-emit", "modal-action", "select-all-items", "deselect-all-items", "no-results-action", "no-results-option-selected", "columns-visibility-changed", "order-by", "change-page", "change-page-size"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const internalHiddenColumns = ref(props.hiddenColumns || []);
+    const selectedItemIds = ref(/* @__PURE__ */ new Set());
+    const pageSizeOptions = computed(() => [
+      { name: "10", value: "10", active: props.pageSize === 10 },
+      { name: "25", value: "25", active: props.pageSize === 25 },
+      { name: "50", value: "50", active: props.pageSize === 50 },
+      { name: "100", value: "100", active: props.pageSize === 100 }
+    ]);
+    function handleOrderBy(event) {
+      emit("update:orderedBy", event.value);
+      emit("update:orderDirection", event.orderDirection);
+      emit("order-by", event);
+    }
+    function handleChangePage(page) {
+      emit("update:currentPage", page);
+      emit("change-page", page);
+    }
+    function handleChangePageSize(size) {
+      const numSize = typeof size === "string" ? Number(size) : size;
+      emit("update:pageSize", numSize);
+      emit("change-page-size", size);
+      emit("update:currentPage", 1);
+    }
+    function handleTableAction(data) {
+      selectedItemIds.value = new Set(data.items);
+      updateSelectedItems();
+      emit("table-action", data);
+    }
+    function handleTableActionSelected(item) {
+      emit("table-action-selected", item);
+    }
+    function handleTableActionButtonClicked(data) {
+      emit("table-action-button-clicked", data);
+    }
+    function handleSmartFiltersSent(filters2) {
+      emit("smart-filters-sent", filters2);
+    }
+    function handleSmartFiltersCleared() {
+      emit("smart-filters-cleared");
+    }
+    function handleSmartFilterDeleted(index) {
+      emit("smart-filter-deleted", index);
+    }
+    function handleCustomEmit(data) {
+      emit("custom-emit", data);
+    }
+    function handleColumnsVisibilityChanged(event) {
+      if (event.hidden) {
+        if (!internalHiddenColumns.value.includes(event.index)) {
+          internalHiddenColumns.value.push(event.index);
+        }
+      } else {
+        const index = internalHiddenColumns.value.indexOf(event.index);
+        if (index > -1) {
+          internalHiddenColumns.value.splice(index, 1);
+        }
+      }
+      emit("columns-visibility-changed", event);
+    }
+    function handleModalAction(data) {
+      emit("modal-action", data);
+    }
+    function handleSelectAllItems() {
+      selectedItemIds.value = new Set(props.items.map((item) => item.id));
+      updateSelectedItems();
+      emit("select-all-items");
+    }
+    function handleDeselectAllItems() {
+      selectedItemIds.value.clear();
+      updateSelectedItems();
+      emit("deselect-all-items");
+    }
+    function handleNoResultsAction(action) {
+      emit("no-results-action", action);
+    }
+    function handleNoResultsOptionSelected(item) {
+      emit("no-results-option-selected", item);
+    }
+    function handleSelectedItemsDeleted() {
+      emit("update:resetSelected", false);
+    }
+    function updateSelectedItems() {
+      const selected = props.items.filter((item) => item.id && selectedItemIds.value.has(item.id));
+      emit("update:selected", selected);
+    }
+    __expose({
+      clearSelection: () => {
+        emit("update:resetSelected", true);
+        selectedItemIds.value.clear();
+        updateSelectedItems();
+      },
+      getHiddenColumns: () => internalHiddenColumns.value,
+      getSelectedItems: () => Array.from(selectedItemIds.value),
+      getSelectedItemsData: () => props.items.filter((item) => item.id && selectedItemIds.value.has(item.id))
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(uiTable), {
+        loading: __props.loading,
+        header: __props.header,
+        items: __props.items,
+        "ordered-by": __props.orderedBy,
+        "order-direction": __props.orderDirection,
+        actions: __props.actions,
+        "hidden-columns": internalHiddenColumns.value,
+        "reset-selected": __props.resetSelected,
+        "select-all-items-modal": __props.selectAllItemsModal,
+        "smart-filter-categories": __props.smartFilterCategories,
+        "filter-literals": __props.filterLiterals,
+        filters: __props.filters,
+        "table-actions-dropdown": __props.tableActionsDropdown,
+        "table-action-buttons": __props.tableActionButtons,
+        "pagination-current": __props.currentPage,
+        "pagination-total": __props.totalPages,
+        "pagination-total-items": __props.totalItems,
+        "page-size-options": pageSizeOptions.value,
+        "current-page-size": __props.pageSize,
+        "no-results": __props.noResults,
+        onOrderBy: handleOrderBy,
+        onTableAction: handleTableAction,
+        onTableActionSelected: handleTableActionSelected,
+        onTableActionButtonClicked: handleTableActionButtonClicked,
+        onSmartFiltersSent: handleSmartFiltersSent,
+        onSmartFiltersCleared: handleSmartFiltersCleared,
+        onSmartFilterDeleted: handleSmartFilterDeleted,
+        onChangePage: handleChangePage,
+        onChangePageSize: handleChangePageSize,
+        onCustomEmit: handleCustomEmit,
+        onColumnsVisibilityChanged: handleColumnsVisibilityChanged,
+        onSelectedItemsDeleted: handleSelectedItemsDeleted,
+        onModalAction: handleModalAction,
+        onSelectAllItems: handleSelectAllItems,
+        onDeselectAllItems: handleDeselectAllItems,
+        onNoResultsAction: handleNoResultsAction,
+        onNoResultsOptionSelected: handleNoResultsOptionSelected
+      }, null, 8, ["loading", "header", "items", "ordered-by", "order-direction", "actions", "hidden-columns", "reset-selected", "select-all-items-modal", "smart-filter-categories", "filter-literals", "filters", "table-actions-dropdown", "table-action-buttons", "pagination-current", "pagination-total", "pagination-total-items", "page-size-options", "current-page-size", "no-results"]);
+    };
+  }
+});
+const Table = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-80c477af"]]);
+const _hoisted_1 = { class: "w-full" };
+const _hoisted_2 = {
+  key: 0,
+  class: "p-8 text-center text-gray-600"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "p-8 text-center text-gray-600"
+};
+const _hoisted_4 = {
+  key: 2,
+  class: "flex flex-col gap-2"
+};
+const _hoisted_5 = ["onClick"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "DataList",
+  props: {
+    items: {},
+    loading: { type: Boolean, default: false },
+    emptyMessage: { default: "No items to display" }
+  },
+  emits: ["item-click"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    __expose({
+      getItems: () => props.items
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        __props.loading ? (openBlock(), createElementBlock("div", _hoisted_2, " Loading... ")) : __props.items.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_3, toDisplayString(__props.emptyMessage), 1)) : (openBlock(), createElementBlock("div", _hoisted_4, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: index,
+              class: "p-4 border border-gray-200 rounded-md cursor-pointer hover:bg-gray-50 transition-colors",
+              onClick: ($event) => emit("item-click", item)
+            }, [
+              renderSlot(_ctx.$slots, "default", {
+                item,
+                index
+              }, () => [
+                createTextVNode(toDisplayString(JSON.stringify(item)), 1)
+              ])
+            ], 8, _hoisted_5);
+          }), 128))
+        ]))
+      ]);
+    };
+  }
+});
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "SearchableSelect",
+  props: {
+    options: {},
+    modelValue: { default: null },
+    labelKey: { default: "label" },
+    valueKey: { default: "id" },
+    placeholder: { default: "Select an option" },
+    label: { default: "" },
+    error: { default: "" },
+    color: { default: "gray" },
+    loading: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    requiredText: { default: "" },
+    multiple: { type: Boolean, default: false }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const transformedItems = computed(() => {
+      return props.options.map((option) => ({
+        id: String(option[props.valueKey]),
+        name: String(option[props.labelKey]),
+        label: option.label ? String(option.label) : void 0
+      }));
+    });
+    const selectedItem = computed(() => {
+      if (props.multiple || !props.modelValue) {
+        return { id: "", name: "", label: void 0 };
+      }
+      const value = props.modelValue;
+      return {
+        id: String(value[props.valueKey]),
+        name: String(value[props.labelKey]),
+        label: value.label ? String(value.label) : void 0
+      };
+    });
+    const selectedItems = computed(() => {
+      if (!props.multiple || !props.modelValue) return [];
+      const values = Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue];
+      return values.map((value) => ({
+        id: String(value[props.valueKey]),
+        name: String(value[props.labelKey]),
+        label: value.label ? String(value.label) : void 0
+      }));
+    });
+    function handleSelectChange(selected) {
+      if (props.multiple) {
+        const originalValues = selected.map((item) => {
+          return props.options.find((opt) => String(opt[props.valueKey]) === item.id);
+        }).filter(Boolean);
+        emit("update:modelValue", originalValues);
+        emit("change", originalValues);
+      } else {
+        const originalValue = props.options.find((opt) => String(opt[props.valueKey]) === selected.id);
+        emit("update:modelValue", originalValue || null);
+        emit("change", originalValue || null);
+      }
+    }
+    __expose({
+      getSelected: () => props.modelValue
+    });
+    return (_ctx, _cache) => {
+      return __props.multiple ? (openBlock(), createBlock(unref(uiSelectMultiple), {
+        key: 0,
+        items: transformedItems.value,
+        label: __props.label,
+        placeholder: __props.placeholder,
+        error: __props.error,
+        color: __props.color,
+        select: selectedItems.value,
+        loading: __props.loading,
+        disabled: __props.disabled,
+        "required-text": __props.requiredText,
+        onSelectChanged: handleSelectChange
+      }, null, 8, ["items", "label", "placeholder", "error", "color", "select", "loading", "disabled", "required-text"])) : (openBlock(), createBlock(unref(uiSelect), {
+        key: 1,
+        items: transformedItems.value,
+        label: __props.label,
+        placeholder: __props.placeholder,
+        error: __props.error,
+        color: __props.color,
+        select: selectedItem.value,
+        loading: __props.loading,
+        disabled: __props.disabled,
+        "required-text": __props.requiredText,
+        onSelectChanged: handleSelectChange
+      }, null, 8, ["items", "label", "placeholder", "error", "color", "select", "loading", "disabled", "required-text"]));
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "Chart",
+  props: {
+    id: {},
+    title: {},
+    series: {},
+    type: { default: "line" },
+    options: {},
+    loading: { type: Boolean, default: false },
+    empty: { type: Boolean, default: false },
+    range: {},
+    horizontal: { type: Boolean, default: false },
+    stacked: { type: Boolean, default: false },
+    height: {},
+    labels: {},
+    dates: {},
+    isNps: { type: Boolean, default: false },
+    npsLiterals: {},
+    annotations: {}
+  },
+  emits: ["range-selected", "chart-updated", "data-point-selection", "maximize"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    function handleRangeSelected(data) {
+      emit("range-selected", data);
+    }
+    function handleChartUpdated() {
+      emit("chart-updated");
+    }
+    function handleDataPointSelection(data) {
+      emit("data-point-selection", data);
+    }
+    function handleMaximizeChart(chartId) {
+      emit("maximize", chartId);
+    }
+    function refresh() {
+      emit("chart-updated");
+    }
+    function getChartId() {
+      return props.id;
+    }
+    __expose({
+      refresh,
+      getChartId
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(uiChart), {
+        id: __props.id,
+        title: __props.title,
+        type: __props.type,
+        series: __props.series,
+        options: __props.options,
+        loading: __props.loading,
+        empty: __props.empty,
+        range: __props.range,
+        horizontal: __props.horizontal,
+        stacked: __props.stacked,
+        height: __props.height,
+        labels: __props.labels,
+        dates: __props.dates,
+        isNps: __props.isNps,
+        npsLiterals: __props.npsLiterals,
+        annotations: __props.annotations,
+        onSelectedRange: handleRangeSelected,
+        onChartUpdated: handleChartUpdated,
+        onDataPointSelection: handleDataPointSelection,
+        onMaximizeChart: handleMaximizeChart
+      }, null, 8, ["id", "title", "type", "series", "options", "loading", "empty", "range", "horizontal", "stacked", "height", "labels", "dates", "isNps", "npsLiterals", "annotations"]);
+    };
+  }
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "DataTable",
+  props: {
+    items: {},
+    columns: {},
+    filters: {},
+    initialFilters: {},
+    loading: { type: Boolean, default: false },
+    pageSize: { default: 10 },
+    currentPage: { default: 1 },
+    totalPages: { default: 1 },
+    totalItems: { default: 0 },
+    idKey: { default: "id" },
+    actions: {},
+    selectable: { type: Boolean, default: false },
+    bulkActions: {},
+    noResults: {},
+    defaultSortKey: {},
+    defaultSortOrder: { default: "asc" },
+    syncUrl: { type: Boolean, default: false }
+  },
+  emits: ["action", "bulkAction", "selection", "rowClick", "customEmit", "pageChange", "sortChange", "filterChange"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    function updateUrl(params) {
+      if (typeof window === "undefined") return;
+      const url = new URL(window.location.href);
+      Object.entries(params).forEach(([key, value]) => {
+        if (value !== void 0 && value !== "") {
+          url.searchParams.set(key, value);
+        } else {
+          url.searchParams.delete(key);
+        }
+      });
+      window.location.href = url.toString();
+    }
+    function handlePageChange(page) {
+      if (props.syncUrl) {
+        emit("pageChange", page);
+        updateUrl({ page: String(page) });
+      } else {
+        table.handlePageChange(page);
+      }
+    }
+    function handlePageSizeChange(size) {
+      if (props.syncUrl) {
+        updateUrl({ pageSize: String(size), page: "1" });
+      } else {
+        table.handlePageSizeChange(size);
+      }
+    }
+    function handleOrderBy(event) {
+      if (props.syncUrl) {
+        emit("sortChange", event.value, event.orderDirection);
+        updateUrl({ sortKey: event.value, sortOrder: event.orderDirection, page: "1" });
+      } else {
+        table.handleOrderBy(event);
+      }
+    }
+    function extractFilterValue(value) {
+      if (value === void 0 || value === null || value === "") {
+        return void 0;
+      }
+      if (typeof value === "object" && value !== null && "id" in value) {
+        return String(value.id);
+      }
+      return String(value);
+    }
+    function handleFiltersApplied(filters2) {
+      if (props.syncUrl) {
+        const filterParams = { page: "1" };
+        if (filters2 && typeof filters2 === "object" && "filters" in filters2 && Array.isArray(filters2.filters)) {
+          filters2.filters.forEach((f) => {
+            const extractedValue = extractFilterValue(f.value);
+            if (extractedValue !== void 0) {
+              filterParams[f.name] = extractedValue;
+            }
+          });
+        } else if (Array.isArray(filters2)) {
+          filters2.forEach((f) => {
+            const key = f.category || f.name;
+            const extractedValue = extractFilterValue(f.value);
+            if (key && extractedValue !== void 0) {
+              filterParams[key] = extractedValue;
+            }
+          });
+        } else if (filters2 && typeof filters2 === "object") {
+          Object.entries(filters2).forEach(([key, value]) => {
+            if (key === "logicOperator" || key === "filters") return;
+            const extractedValue = extractFilterValue(value);
+            if (extractedValue !== void 0) {
+              filterParams[key] = extractedValue;
+            }
+          });
+        }
+        emit("filterChange", filterParams);
+        updateUrl(filterParams);
+      } else {
+        table.handleSmartFiltersApplied(filters2);
+      }
+    }
+    function handleFiltersCleared() {
+      if (props.syncUrl) {
+        if (typeof window === "undefined") return;
+        const url = new URL(window.location.href);
+        const keysToRemove = [];
+        url.searchParams.forEach((_, key) => {
+          if (!["page", "pageSize", "sortKey", "sortOrder"].includes(key)) {
+            keysToRemove.push(key);
+          }
+        });
+        keysToRemove.forEach((key) => url.searchParams.delete(key));
+        url.searchParams.set("page", "1");
+        window.location.href = url.toString();
+      } else {
+        table.handleSmartFiltersCleared();
+      }
+    }
+    function handleFilterDeleted(index) {
+      if (props.syncUrl) {
+        handleFiltersCleared();
+      } else {
+        table.handleSmartFilterDeleted(index);
+      }
+    }
+    const table = useTable({
+      items: toRef(() => props.items),
+      pageSize: props.pageSize,
+      sortKey: props.defaultSortKey ?? "",
+      sortOrder: props.defaultSortOrder,
+      idKey: props.idKey
+    });
+    const tableHeader = computed(
+      () => props.columns.map((col) => ({
+        name: col.key,
+        label: col.label,
+        sortable: col.sortable !== false,
+        width: col.width
+      }))
+    );
+    const tableItems = computed(() => {
+      const itemsToRender = props.syncUrl ? props.items : table.paginatedItems.value;
+      return itemsToRender.map((item, itemIndex) => ({
+        id: item[props.idKey],
+        row: props.columns.map((col) => {
+          if (col.render) {
+            return col.render(item, itemIndex);
+          }
+          const value = item[col.key];
+          return formatCellValue(value, col.type);
+        }),
+        // Store original item for action handlers
+        _originalData: item
+      }));
+    });
+    const filterCategories = computed(
+      () => {
+        var _a;
+        return ((_a = props.filters) == null ? void 0 : _a.map((f) => ({
+          id: f.key,
+          name: f.label,
+          componentType: mapFilterType(f.type),
+          defaultProps: buildFilterProps(f)
+        }))) ?? [];
+      }
+    );
+    const initialTableFilters = computed(() => {
+      if (!props.initialFilters || !props.filters) return void 0;
+      const filterEntries = Object.entries(props.initialFilters).filter(
+        ([, value]) => value !== void 0 && value !== null && value !== ""
+      );
+      if (filterEntries.length === 0) return void 0;
+      return {
+        logicOperator: "and",
+        filters: filterEntries.map(([key, value]) => {
+          var _a;
+          const filterDef = (_a = props.filters) == null ? void 0 : _a.find((f) => f.key === key);
+          return {
+            name: key,
+            label: (filterDef == null ? void 0 : filterDef.label) ?? key,
+            type: filterDef ? mapFilterType(filterDef.type) : "uiInput",
+            value: String(value)
+          };
+        })
+      };
+    });
+    const rowActions = computed(() => {
+      if (!props.actions || props.actions.length === 0) return void 0;
+      return props.actions.map((action) => {
+        if (typeof action === "string") {
+          return { name: action, id: action };
+        }
+        return { name: action.label, id: action.id };
+      });
+    });
+    const bulkActionButtons = computed(() => {
+      if (!props.bulkActions || !props.selectable) return void 0;
+      return props.bulkActions.map((action) => ({
+        text: action.label,
+        id: action.id,
+        color: action.variant === "danger" ? "red" : action.variant === "warning" ? "yellow" : "blue",
+        icon: action.icon
+      }));
+    });
+    const selectAllModal = computed(() => {
+      if (!props.selectable) return void 0;
+      return {
+        title: "Select All Items",
+        message: `Select all ${table.totalItems.value} items?`,
+        cancelText: "Select page only",
+        confirmText: "Select all"
+      };
+    });
+    function formatCellValue(value, type) {
+      if (value === null || value === void 0) return "";
+      switch (type) {
+        case "date":
+          if (value instanceof Date) {
+            return value.toLocaleDateString();
+          }
+          if (typeof value === "string") {
+            return new Date(value).toLocaleDateString();
+          }
+          return value;
+        case "number":
+          return typeof value === "number" ? value.toLocaleString() : value;
+        case "badge":
+          return { content: value, type: "badge" };
+        case "tag":
+          return { content: value, type: "tag" };
+        default:
+          return value;
+      }
+    }
+    function mapFilterType(type) {
+      switch (type) {
+        case "select":
+          return "uiSelect";
+        default:
+          return "uiInput";
+      }
+    }
+    function buildFilterProps(filter) {
+      const defaultProps = {};
+      if (filter.placeholder) {
+        defaultProps.placeholder = filter.placeholder;
+      }
+      if (filter.type === "select" && filter.options) {
+        defaultProps.items = filter.options.map((opt, index) => ({
+          id: String(index),
+          name: String(opt.value),
+          // This is what gets used as filter value
+          label: opt.label
+          // This is what gets displayed
+        }));
+      }
+      if (filter.type === "number") {
+        defaultProps.type = "number";
+      }
+      return defaultProps;
+    }
+    function handleTableAction(data) {
+      const itemId = data.items[0];
+      const tableItem = tableItems.value.find((ti) => ti.id === itemId);
+      if (tableItem && tableItem._originalData) {
+        emit("action", data.action, tableItem._originalData);
+      }
+    }
+    function handleBulkActionClick(data) {
+      emit("bulkAction", data.id, table.selectedItems.value);
+    }
+    function handleCustomEmit(data) {
+      emit("customEmit", data);
+    }
+    watch(
+      () => table.selectedItems.value,
+      (items) => {
+        emit("selection", items);
+      },
+      { deep: true }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Table, {
+        header: tableHeader.value,
+        items: tableItems.value,
+        loading: __props.loading,
+        "current-page": __props.syncUrl ? __props.currentPage : unref(table).currentPage.value,
+        "total-pages": __props.syncUrl ? __props.totalPages : unref(table).totalPages.value,
+        "total-items": __props.syncUrl ? __props.totalItems : unref(table).totalItems.value,
+        "page-size": __props.syncUrl ? __props.pageSize : unref(table).pageSize.value,
+        "ordered-by": __props.defaultSortKey ?? unref(table).sortKey.value,
+        "order-direction": __props.defaultSortOrder ?? unref(table).sortOrder.value,
+        "smart-filter-categories": filterCategories.value,
+        filters: initialTableFilters.value,
+        "hidden-columns": unref(table).hiddenColumns.value,
+        "reset-selected": unref(table).resetSelected.value,
+        actions: rowActions.value,
+        "select-all-items-modal": selectAllModal.value,
+        "table-action-buttons": bulkActionButtons.value,
+        "no-results": __props.noResults,
+        onChangePage: handlePageChange,
+        onChangePageSize: handlePageSizeChange,
+        onOrderBy: handleOrderBy,
+        onSmartFiltersSent: handleFiltersApplied,
+        onSmartFiltersCleared: handleFiltersCleared,
+        onSmartFilterDeleted: handleFilterDeleted,
+        onColumnsVisibilityChanged: unref(table).handleColumnsVisibilityChanged,
+        onModalAction: unref(table).handleModalAction,
+        onTableAction: handleTableAction,
+        onTableActionButtonClicked: handleBulkActionClick,
+        onCustomEmit: handleCustomEmit
+      }, null, 8, ["header", "items", "loading", "current-page", "total-pages", "total-items", "page-size", "ordered-by", "order-direction", "smart-filter-categories", "filters", "hidden-columns", "reset-selected", "actions", "select-all-items-modal", "table-action-buttons", "no-results", "onColumnsVisibilityChanged", "onModalAction"]);
+    };
+  }
+});
+const columns = {
+  /**
+   * Simple text column
+   *
+   * @example
+   * columns.text('name', 'Name')
+   */
+  text: (key, label, options) => ({
+    key,
+    label,
+    type: "text",
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    width: options == null ? void 0 : options.width
+  }),
+  /**
+   * Number column with locale formatting
+   *
+   * @example
+   * columns.number('amount', 'Amount')
+   * columns.number('price', 'Price', { prefix: '$', decimals: 2 })
+   */
+  number: (key, label, options) => ({
+    key,
+    label,
+    type: "number",
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => {
+      const value = item[key];
+      if (value === null || value === void 0) return "";
+      const formatted = (options == null ? void 0 : options.decimals) !== void 0 ? Number(value).toLocaleString(void 0, {
+        minimumFractionDigits: options.decimals,
+        maximumFractionDigits: options.decimals
+      }) : Number(value).toLocaleString();
+      return `${(options == null ? void 0 : options.prefix) ?? ""}${formatted}${(options == null ? void 0 : options.suffix) ?? ""}`;
+    }
+  }),
+  /**
+   * Date column with formatting
+   *
+   * @example
+   * columns.date('createdAt', 'Created')
+   * columns.date('updatedAt', 'Updated', { format: 'long' })
+   */
+  date: (key, label, options) => ({
+    key,
+    label,
+    type: "date",
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => {
+      const value = item[key];
+      if (!value) return "";
+      const date = value instanceof Date ? value : new Date(value);
+      if (Number.isNaN(date.getTime())) return "";
+      const formatOptions = {
+        short: { dateStyle: "short" },
+        medium: { dateStyle: "medium" },
+        long: { dateStyle: "long" },
+        full: { dateStyle: "full" }
+      }[(options == null ? void 0 : options.format) ?? "medium"];
+      return date.toLocaleDateString(options == null ? void 0 : options.locale, formatOptions);
+    }
+  }),
+  /**
+   * DateTime column with formatting
+   *
+   * @example
+   * columns.dateTime('createdAt', 'Created At')
+   */
+  dateTime: (key, label, options) => ({
+    key,
+    label,
+    type: "date",
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => {
+      const value = item[key];
+      if (!value) return "";
+      const date = value instanceof Date ? value : new Date(value);
+      if (Number.isNaN(date.getTime())) return "";
+      return date.toLocaleString(options == null ? void 0 : options.locale, {
+        dateStyle: "medium",
+        timeStyle: "short"
+      });
+    }
+  }),
+  /**
+   * Tag column with optional color function
+   *
+   * @example
+   * columns.tag('status', 'Status')
+   * columns.tag('status', 'Status', (item) => item.active ? 'green' : 'red')
+   */
+  tag: (key, label, colorFn, options) => ({
+    key,
+    label,
+    type: "tag",
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => {
+      const value = item[key];
+      return {
+        content: value,
+        color: (colorFn == null ? void 0 : colorFn(item)) ?? "gray",
+        type: "tag"
+      };
+    }
+  }),
+  /**
+   * Badge column (numeric badge style)
+   *
+   * @example
+   * columns.badge('count', 'Count')
+   * columns.badge('brandCount', 'Brands')
+   */
+  badge: (key, label, options) => ({
+    key,
+    label,
+    type: "badge",
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => ({
+      content: item[key],
+      type: "badge"
+    })
+  }),
+  /**
+   * Boolean column rendered as tag
+   *
+   * @example
+   * columns.boolean('active', 'Active')
+   * columns.boolean('verified', 'Verified', { trueLabel: 'Yes', falseLabel: 'No' })
+   */
+  boolean: (key, label, options) => ({
+    key,
+    label,
+    type: "tag",
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => {
+      const value = Boolean(item[key]);
+      return {
+        content: value ? (options == null ? void 0 : options.trueLabel) ?? "Yes" : (options == null ? void 0 : options.falseLabel) ?? "No",
+        color: value ? (options == null ? void 0 : options.trueColor) ?? "green" : (options == null ? void 0 : options.falseColor) ?? "red",
+        type: "tag"
+      };
+    }
+  }),
+  /**
+   * Email column (renders as link)
+   *
+   * @example
+   * columns.email('email', 'Email')
+   */
+  email: (key, label, options) => ({
+    key,
+    label,
+    type: "text",
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => ({
+      content: item[key],
+      type: "link",
+      href: `mailto:${item[key]}`
+    })
+  }),
+  /**
+   * Actions column (row actions)
+   *
+   * @example
+   * columns.actions(['view', 'edit', 'delete'])
+   */
+  actions: (actions) => ({
+    key: "_actions",
+    label: "",
+    sortable: false,
+    render: () => actions
+  }),
+  /**
+   * Custom render column
+   *
+   * @example
+   * columns.custom('fullName', 'Name', (item) => `${item.firstName} ${item.lastName}`)
+   */
+  custom: (key, label, render, options) => ({
+    key,
+    label,
+    sortable: (options == null ? void 0 : options.sortable) ?? false,
+    width: options == null ? void 0 : options.width,
+    render
+  }),
+  /**
+   * Truncated text column
+   *
+   * @example
+   * columns.truncate('description', 'Description', 50)
+   */
+  truncate: (key, label, maxLength, options) => ({
+    key,
+    label,
+    type: "text",
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => {
+      const value = String(item[key] ?? "");
+      if (value.length <= maxLength) return value;
+      return `${value.substring(0, maxLength)}...`;
+    }
+  }),
+  /**
+   * Image column
+   *
+   * @example
+   * columns.image('avatar', 'Avatar', { size: 32 })
+   */
+  image: (key, label, options) => ({
+    key,
+    label,
+    sortable: false,
+    render: (item) => ({
+      content: item[key] || (options == null ? void 0 : options.fallback),
+      type: "image",
+      size: (options == null ? void 0 : options.size) ?? 32
+    })
+  }),
+  /**
+   * Progress column
+   *
+   * @example
+   * columns.progress('completion', 'Progress')
+   */
+  progress: (key, label, options) => ({
+    key,
+    label,
+    type: "number",
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => ({
+      content: item[key],
+      type: "progress",
+      max: (options == null ? void 0 : options.max) ?? 100
+    })
+  }),
+  /**
+   * Clickable link column that emits an action
+   *
+   * @example
+   * // Simple link with action
+   * columns.link('name', 'Campaign Name', (item) => ({
+   *   action: 'view',
+   *   data: { id: item.id }
+   * }))
+   *
+   * // Link with custom emit handler in parent
+   * columns.link('title', 'Title', (item) => ({
+   *   action: 'openDetails',
+   *   data: item
+   * }))
+   */
+  link: (key, label, emitConfig, options) => ({
+    key,
+    label,
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    width: options == null ? void 0 : options.width,
+    render: (item) => ({
+      content: item[key],
+      type: "link",
+      emits: emitConfig(item)
+    })
+  }),
+  /**
+   * Link to external URL
+   *
+   * @example
+   * columns.externalLink('website', 'Website')
+   * columns.externalLink('url', 'URL', { newTab: true })
+   */
+  externalLink: (key, label, options) => ({
+    key,
+    label,
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => {
+      const url = item[key];
+      const display = (options == null ? void 0 : options.displayKey) ? item[options.displayKey] : url;
+      return {
+        content: display,
+        type: "link",
+        href: url,
+        target: (options == null ? void 0 : options.newTab) ? "_blank" : void 0
+      };
+    }
+  }),
+  /**
+   * Relative time column (e.g., "2 hours ago")
+   *
+   * @example
+   * columns.relativeTime('updatedAt', 'Last Updated')
+   */
+  relativeTime: (key, label, options) => ({
+    key,
+    label,
+    type: "date",
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => {
+      const value = item[key];
+      if (!value) return "";
+      const date = value instanceof Date ? value : new Date(value);
+      if (Number.isNaN(date.getTime())) return "";
+      const now = /* @__PURE__ */ new Date();
+      const diffMs = now.getTime() - date.getTime();
+      const diffSecs = Math.floor(diffMs / 1e3);
+      const diffMins = Math.floor(diffSecs / 60);
+      const diffHours = Math.floor(diffMins / 60);
+      const diffDays = Math.floor(diffHours / 24);
+      if (diffSecs < 60) return "Just now";
+      if (diffMins < 60) return `${diffMins}m ago`;
+      if (diffHours < 24) return `${diffHours}h ago`;
+      if (diffDays < 7) return `${diffDays}d ago`;
+      return date.toLocaleDateString(options == null ? void 0 : options.locale);
+    }
+  }),
+  /**
+   * User/Avatar column with name and optional subtitle
+   *
+   * @example
+   * columns.user('assignee', 'Assigned To', { avatarKey: 'avatar', subtitleKey: 'email' })
+   */
+  user: (key, label, options) => ({
+    key,
+    label,
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => ({
+      content: item[key],
+      type: "guest",
+      avatar: (options == null ? void 0 : options.avatarKey) ? item[options.avatarKey] : void 0,
+      subtitle: (options == null ? void 0 : options.subtitleKey) ? item[options.subtitleKey] : void 0
+    })
+  }),
+  /**
+   * Currency column with formatting
+   *
+   * @example
+   * columns.currency('amount', 'Total', { currency: 'EUR' })
+   * columns.currency('price', 'Price', { currency: 'USD', locale: 'en-US' })
+   */
+  currency: (key, label, options) => ({
+    key,
+    label,
+    type: "number",
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => {
+      const value = item[key];
+      if (value === null || value === void 0) return "";
+      return new Intl.NumberFormat((options == null ? void 0 : options.locale) ?? "en-US", {
+        style: "currency",
+        currency: (options == null ? void 0 : options.currency) ?? "EUR"
+      }).format(Number(value));
+    }
+  }),
+  /**
+   * Percentage column
+   *
+   * @example
+   * columns.percentage('openRate', 'Open Rate')
+   * columns.percentage('completion', 'Progress', { decimals: 0 })
+   */
+  percentage: (key, label, options) => ({
+    key,
+    label,
+    type: "number",
+    sortable: (options == null ? void 0 : options.sortable) ?? true,
+    render: (item) => {
+      const value = item[key];
+      if (value === null || value === void 0) return "";
+      const numValue = (options == null ? void 0 : options.multiply) ? Number(value) * 100 : Number(value);
+      return `${numValue.toFixed((options == null ? void 0 : options.decimals) ?? 1)}%`;
+    }
+  })
+};
+const statusColors = {
+  active: "green",
+  inactive: "gray",
+  pending: "yellow",
+  approved: "green",
+  rejected: "red",
+  draft: "gray",
+  published: "green",
+  archived: "gray",
+  error: "red",
+  success: "green",
+  warning: "yellow",
+  info: "blue"
+};
+function getStatusColor(status) {
+  return statusColors[status == null ? void 0 : status.toLowerCase()] ?? "gray";
+}
+function createStatusColorFn(key) {
+  return (item) => getStatusColor(String(item[key]));
+}
+const statusOptions = [
+  { label: "Active", value: "active" },
+  { label: "Inactive", value: "inactive" },
+  { label: "Pending", value: "pending" },
+  { label: "Archived", value: "archived" }
+];
+const booleanOptions = [
+  { label: "Yes", value: "true" },
+  { label: "No", value: "false" }
+];
+const filters = {
+  /**
+   * Text search filter
+   *
+   * @example
+   * filters.text('name', 'Name')
+   * filters.text('email', 'Email', 'Search by email address...')
+   */
+  text: (key, label, placeholder) => ({
+    key,
+    label,
+    type: "text",
+    placeholder: placeholder ?? `Search by ${label.toLowerCase()}...`
+  }),
+  /**
+   * Select dropdown filter
+   *
+   * @example
+   * filters.select('role', 'Role', [
+   *   { label: 'Admin', value: 'admin' },
+   *   { label: 'User', value: 'user' },
+   * ])
+   */
+  select: (key, label, options) => ({
+    key,
+    label,
+    type: "select",
+    options
+  }),
+  /**
+   * Status filter with common status options
+   *
+   * @example
+   * filters.status()
+   * filters.status('state', 'State')
+   * filters.status('status', 'Status', [
+   *   { label: 'Active', value: 'active' },
+   *   { label: 'Draft', value: 'draft' },
+   * ])
+   */
+  status: (key = "status", label = "Status", options) => ({
+    key,
+    label,
+    type: "select",
+    options: options ?? statusOptions
+  }),
+  /**
+   * Boolean (Yes/No) filter
+   *
+   * @example
+   * filters.boolean('verified', 'Verified')
+   * filters.boolean('active', 'Active', 'Enabled', 'Disabled')
+   */
+  boolean: (key, label, trueLabel = "Yes", falseLabel = "No") => ({
+    key,
+    label,
+    type: "select",
+    options: [
+      { label: trueLabel, value: "true" },
+      { label: falseLabel, value: "false" }
+    ]
+  }),
+  /**
+   * Number filter
+   *
+   * @example
+   * filters.number('age', 'Age')
+   * filters.number('amount', 'Amount', 'Enter amount...')
+   */
+  number: (key, label, placeholder) => ({
+    key,
+    label,
+    type: "number",
+    placeholder: placeholder ?? `Enter ${label.toLowerCase()}...`
+  }),
+  /**
+   * Date filter
+   *
+   * @example
+   * filters.date('createdAt', 'Created Date')
+   */
+  date: (key, label) => ({
+    key,
+    label,
+    type: "date"
+  }),
+  /**
+   * Date range filter
+   *
+   * @example
+   * filters.dateRange('createdAt', 'Created')
+   */
+  dateRange: (key, label) => ({
+    key,
+    label,
+    type: "dateRange"
+  }),
+  /**
+   * Role filter with common role options
+   *
+   * @example
+   * filters.role()
+   * filters.role('userRole', 'User Role')
+   */
+  role: (key = "role", label = "Role", options) => ({
+    key,
+    label,
+    type: "select",
+    options: options ?? [
+      { label: "Admin", value: "admin" },
+      { label: "Manager", value: "manager" },
+      { label: "User", value: "user" },
+      { label: "Guest", value: "guest" }
+    ]
+  }),
+  /**
+   * Type filter (generic entity type)
+   *
+   * @example
+   * filters.type('campaignType', 'Type', [
+   *   { label: 'Email', value: 'email' },
+   *   { label: 'SMS', value: 'sms' },
+   * ])
+   */
+  type: (key, label, options) => ({
+    key,
+    label,
+    type: "select",
+    options
+  }),
+  /**
+   * Priority filter
+   *
+   * @example
+   * filters.priority()
+   * filters.priority('urgency', 'Urgency')
+   */
+  priority: (key = "priority", label = "Priority") => ({
+    key,
+    label,
+    type: "select",
+    options: [
+      { label: "Low", value: "low" },
+      { label: "Medium", value: "medium" },
+      { label: "High", value: "high" },
+      { label: "Critical", value: "critical" }
+    ]
+  }),
+  /**
+   * Category filter from dynamic options
+   *
+   * @example
+   * // From array of objects
+   * filters.fromData('categoryId', 'Category', categories, 'name', 'id')
+   */
+  fromData: (key, label, data, labelKey, valueKey) => ({
+    key,
+    label,
+    type: "select",
+    options: data.map((item) => ({
+      label: String(item[labelKey]),
+      value: item[valueKey]
+    }))
+  }),
+  /**
+   * Enum filter from TypeScript enum
+   *
+   * @example
+   * enum Status { Active = 'active', Inactive = 'inactive' }
+   * filters.fromEnum('status', 'Status', Status)
+   */
+  fromEnum: (key, label, enumObj) => ({
+    key,
+    label,
+    type: "select",
+    options: Object.entries(enumObj).filter(([k]) => Number.isNaN(Number(k))).map(([enumKey, enumValue]) => ({
+      label: enumKey.replace(/([A-Z])/g, " $1").trim(),
+      // Convert camelCase to Title Case
+      value: enumValue
+    }))
+  })
+};
+function createFilterGroup(config) {
+  const result = [];
+  if (config.search) {
+    config.search.forEach((field) => {
+      result.push(filters.text(field, field.charAt(0).toUpperCase() + field.slice(1)));
+    });
+  }
+  if (config.status) {
+    if (typeof config.status === "boolean") {
+      result.push(filters.status());
+    } else {
+      result.push(filters.status(config.status.key, config.status.label, config.status.options));
+    }
+  }
+  if (config.dateRange) {
+    result.push(filters.dateRange(config.dateRange, "Date Range"));
+  }
+  if (config.custom) {
+    result.push(...config.custom);
+  }
+  return result;
+}
+const filterPresets = {
+  /**
+   * Filters for user/account tables
+   */
+  users: () => [
+    filters.text("name", "Name"),
+    filters.text("email", "Email"),
+    filters.role(),
+    filters.status()
+  ],
+  /**
+   * Filters for campaign tables
+   */
+  campaigns: () => [
+    filters.text("name", "Campaign Name"),
+    filters.status("status", "Status", [
+      { label: "Active", value: "active" },
+      { label: "Draft", value: "draft" },
+      { label: "Completed", value: "completed" },
+      { label: "Archived", value: "archived" },
+      { label: "Failed", value: "failed" }
+    ]),
+    filters.dateRange("createdAt", "Created Date")
+  ],
+  /**
+   * Filters for contact tables
+   */
+  contacts: () => [
+    filters.text("name", "Name"),
+    filters.text("email", "Email"),
+    filters.text("phone", "Phone"),
+    filters.status()
+  ],
+  /**
+   * Filters for booking/reservation tables
+   */
+  bookings: () => [
+    filters.text("guestName", "Guest Name"),
+    filters.text("confirmationNumber", "Confirmation #"),
+    filters.status("status", "Status", [
+      { label: "Confirmed", value: "confirmed" },
+      { label: "Pending", value: "pending" },
+      { label: "Cancelled", value: "cancelled" },
+      { label: "Completed", value: "completed" }
+    ]),
+    filters.dateRange("checkIn", "Check-in Date")
+  ],
+  /**
+   * Filters for audit/log tables
+   */
+  auditLogs: () => [
+    filters.text("action", "Action"),
+    filters.text("user", "User"),
+    filters.dateRange("timestamp", "Date")
+  ]
+};
+export {
+  Table as T,
+  _sfc_main$3 as _,
+  _sfc_main$2 as a,
+  _sfc_main$1 as b,
+  _sfc_main as c,
+  columns as d,
+  createStatusColorFn as e,
+  filters as f,
+  getStatusColor as g,
+  filterPresets as h,
+  createFilterGroup as i,
+  statusOptions as j,
+  booleanOptions as k,
+  statusColors as s
+};
+//# sourceMappingURL=filterHelpers-DgRyoYSa.js.map