@rastr/vue 0.0.0-stage → 0.1.0-beta.1

package/dist/index.cjs

@@ -0,0 +1,973 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  RsColumn: () => RsColumn,
+  RsFilterBuilder: () => RsFilterBuilder,
+  RsGrid: () => RsGrid,
+  RsSavedViews: () => RsSavedViews,
+  actionsColumn: () => import_grid2.actionsColumn,
+  and: () => import_core4.and,
+  cond: () => import_core4.cond,
+  createArrayDataSource: () => import_core4.createArrayDataSource,
+  createRemoteExport: () => import_core5.createRemoteExport,
+  createSavedViews: () => import_core5.createSavedViews,
+  createVueCellRenderer: () => createVueCellRenderer,
+  createVueHeaderRenderer: () => createVueHeaderRenderer,
+  custom: () => import_grid2.custom,
+  defineColumns: () => defineColumns,
+  editActionsColumn: () => import_grid2.editActionsColumn,
+  not: () => import_core4.not,
+  or: () => import_core4.or,
+  pattern: () => import_grid2.pattern,
+  range: () => import_grid2.range,
+  required: () => import_grid2.required,
+  rowNumberColumn: () => import_grid2.rowNumberColumn
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/RsGrid.ts
+var import_core3 = require("@rastr/core");
+var import_grid = require("@rastr/grid");
+var import_vue5 = require("vue");
+
+// src/cell-renderer.ts
+var import_vue = require("vue");
+function toSlotProps(ctx) {
+  return {
+    row: ctx.row,
+    value: ctx.value,
+    text: ctx.text,
+    key: ctx.key,
+    column: ctx.column,
+    get rowIndex() {
+      return ctx.rowIndex;
+    }
+  };
+}
+var CellHost = (0, import_vue.defineComponent)({
+  name: "RsCell",
+  props: {
+    state: { type: Object, required: true },
+    getSlot: { type: Function, required: true }
+  },
+  setup(props) {
+    return () => props.getSlot()?.(props.state.value) ?? null;
+  }
+});
+function slotAppContext(parent) {
+  const provides = parent.provides;
+  return { ...parent.appContext, provides };
+}
+function mountSlot(container, getSlot, initial, appContext) {
+  const state = (0, import_vue.shallowRef)(initial);
+  const vnode = (0, import_vue.createVNode)(CellHost, { state, getSlot });
+  vnode.appContext = appContext;
+  (0, import_vue.render)(vnode, container);
+  return {
+    update(next) {
+      state.value = next;
+    },
+    dispose() {
+      (0, import_vue.render)(null, container);
+    }
+  };
+}
+function createVueCellRenderer(getSlot, parent) {
+  const appContext = slotAppContext(parent);
+  return (container, ctx) => {
+    const mounted = mountSlot(container, getSlot, toSlotProps(ctx), appContext);
+    return {
+      update: (next) => mounted.update(toSlotProps(next)),
+      dispose: () => mounted.dispose()
+    };
+  };
+}
+function createVueHeaderRenderer(getSlot, parent) {
+  const appContext = slotAppContext(parent);
+  return (container, ctx) => mountSlot(container, getSlot, { column: ctx.column, caption: ctx.caption }, appContext).dispose;
+}
+
+// src/edit-renderer.ts
+var FOCUSABLE = 'input, select, textarea, button, [contenteditable="true"], [tabindex]:not([tabindex="-1"])';
+function createVueEditRenderer(getSlot, parent) {
+  const appContext = slotAppContext(parent);
+  return (container, ctx) => {
+    const props = (value) => ({
+      row: ctx.row,
+      value,
+      column: ctx.column,
+      setValue,
+      commit: ctx.commit,
+      cancel: ctx.cancel
+    });
+    const setValue = (value) => {
+      ctx.setValue(value);
+      mounted.update(props(value));
+    };
+    const mounted = mountSlot(container, getSlot, props(ctx.value), appContext);
+    return {
+      focus: () => container.querySelector(FOCUSABLE)?.focus(),
+      dispose: () => mounted.dispose()
+    };
+  };
+}
+
+// src/RsColumn.ts
+var import_vue2 = require("vue");
+var optionalBoolean = { type: Boolean, default: void 0 };
+var RsColumn = (0, import_vue2.defineComponent)({
+  name: "RsColumn",
+  props: {
+    field: { type: String, required: true },
+    caption: String,
+    dataType: String,
+    visible: optionalBoolean,
+    width: [Number, String],
+    minWidth: [Number, String],
+    pinned: String,
+    align: String,
+    sortable: optionalBoolean,
+    filterable: optionalBoolean,
+    searchable: optionalBoolean,
+    headerFilter: optionalBoolean,
+    resizable: optionalBoolean,
+    reorderable: optionalBoolean,
+    lookup: Array,
+    format: [Object, Function],
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    value: Function,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    sortValue: Function,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cellClass: Function,
+    toFilter: Function,
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    editable: { type: [Boolean, Function], default: void 0 },
+    validate: Array,
+    /** Total summaries of the column: 'sum', 'avg', 'min', 'max', 'count' or a custom one. */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    summary: Array,
+    summaryFormat: Function,
+    /** On a narrow grid the lowest priority hides first. */
+    hidingPriority: [Number, String]
+  },
+  setup() {
+    return () => null;
+  }
+});
+var RS_COLUMN_BOOLEAN_PROPS = /* @__PURE__ */ new Set([
+  "visible",
+  "sortable",
+  "filterable",
+  "searchable",
+  "headerFilter",
+  "resizable",
+  "reorderable"
+]);
+var RS_COLUMN_NUMBER_PROPS = /* @__PURE__ */ new Set(["width", "minWidth", "hidingPriority"]);
+
+// src/options.ts
+var import_core = require("@rastr/core");
+function toPersistence(prop) {
+  if (prop === void 0) return void 0;
+  if (typeof prop !== "string") return { key: prop.key, storage: prop.storage };
+  const separator = prop.indexOf(":");
+  const kind = prop.slice(0, separator);
+  const key = prop.slice(separator + 1);
+  if (kind !== "local" && kind !== "session" || key === "") {
+    throw new import_core.RastrError("vue/state-storage", `Invalid stateStorage "${prop}"; use "local:<key>", "session:<key>" or { key, storage }`);
+  }
+  return { key, storage: (0, import_core.createWebStorage)(kind) };
+}
+function toStoreOptions(props, columns, carriedState) {
+  const configured = toPersistence(props.stateStorage);
+  const persistence = configured && carriedState ? { ...configured, restore: false } : configured;
+  const initialState = carriedState || props.initialState ? { ...props.initialState, ...carriedState } : void 0;
+  return {
+    columns,
+    dataSource: props.dataSource,
+    keyField: props.keyField,
+    ...props.selectionMode ? { selectionMode: props.selectionMode } : {},
+    ...props.pageSize ? { pageSize: props.pageSize } : {},
+    ...props.paging === false ? { pagingEnabled: false } : {},
+    ...props.scrolling ? { scrolling: props.scrolling } : {},
+    ...props.blockSize ? { blockSize: props.blockSize } : {},
+    ...initialState ? { initialState } : {},
+    ...persistence ? { persistence } : {}
+  };
+}
+
+// src/RsSavedViews.ts
+var import_core2 = require("@rastr/core");
+var import_controls = require("@rastr/controls");
+var import_vue4 = require("vue");
+
+// src/RsFilterBuilder.ts
+var import_filter_builder = require("@rastr/filter-builder");
+var import_vue3 = require("vue");
+var RsFilterBuilder = (0, import_vue3.defineComponent)({
+  name: "RsFilterBuilder",
+  props: {
+    modelValue: { type: Object, default: null },
+    columns: { type: Array, required: true },
+    loadValues: Function,
+    locale: String,
+    messages: Object
+  },
+  emits: {
+    "update:modelValue": (value) => value !== void 0
+  },
+  setup(props, { emit, expose }) {
+    const host = (0, import_vue3.ref)(null);
+    let builder = null;
+    const create = () => {
+      if (!host.value) return;
+      builder?.destroy();
+      builder = (0, import_filter_builder.createFilterBuilder)(host.value, {
+        columns: (0, import_vue3.toRaw)(props.columns),
+        value: props.modelValue ? (0, import_vue3.toRaw)(props.modelValue) : null,
+        onChange: (value) => emit("update:modelValue", value),
+        ...props.locale ? { locale: props.locale } : {},
+        ...props.messages ? { messages: props.messages } : {},
+        ...props.loadValues ? { loadValues: props.loadValues } : {}
+      });
+    };
+    expose({ flush: () => builder?.flush() });
+    (0, import_vue3.onMounted)(create);
+    (0, import_vue3.onBeforeUnmount)(() => {
+      builder?.destroy();
+      builder = null;
+    });
+    (0, import_vue3.watch)(
+      () => props.modelValue,
+      (value) => builder?.setValue(value ? (0, import_vue3.toRaw)(value) : null)
+    );
+    (0, import_vue3.watch)(() => [props.columns, props.locale, props.messages], create);
+    return () => (0, import_vue3.h)("div", { ref: host, class: "rs-vue-filter-builder" });
+  }
+});
+
+// src/RsSavedViews.ts
+var MESSAGES = {
+  cs: {
+    view: "Pohled",
+    noView: "(bez pohledu)",
+    newView: "Nov\xFD pohled",
+    edit: "Upravit",
+    remove: "Smazat",
+    name: "N\xE1zev",
+    isDefault: "V\xFDchoz\xED",
+    save: "Ulo\u017Eit",
+    cancel: "Zru\u0161it",
+    confirmRemove: "Smazat pohled \u201E{name}\u201C?"
+  },
+  en: {
+    view: "View",
+    noView: "(no view)",
+    newView: "New view",
+    edit: "Edit",
+    remove: "Delete",
+    name: "Name",
+    isDefault: "Default",
+    save: "Save",
+    cancel: "Cancel",
+    confirmRemove: 'Delete view "{name}"?'
+  }
+};
+var RsSavedViews = (0, import_vue4.defineComponent)({
+  name: "RsSavedViews",
+  props: {
+    views: { type: Object, required: true },
+    store: { type: Object, required: true },
+    columns: { type: Array, required: true },
+    /** Asked before a view is deleted; defaults to window.confirm. */
+    confirm: Function,
+    locale: String,
+    messages: Object
+  },
+  setup(props) {
+    const text = () => ({ ...MESSAGES[props.locale?.toLowerCase().startsWith("en") ? "en" : "cs"], ...props.messages });
+    const snapshot = (0, import_vue4.shallowRef)(props.views.getSnapshot());
+    let unsubscribe = props.views.subscribe((next) => snapshot.value = next);
+    (0, import_vue4.watch)(
+      () => props.views,
+      (views) => {
+        unsubscribe();
+        snapshot.value = views.getSnapshot();
+        unsubscribe = views.subscribe((next) => snapshot.value = next);
+      }
+    );
+    (0, import_vue4.onBeforeUnmount)(() => unsubscribe());
+    let picker = null;
+    let shownOptions = "";
+    const pickerHost = (0, import_vue4.ref)(null);
+    const syncPicker = () => {
+      if (!picker) return;
+      const t = text();
+      const options = [
+        { value: "", label: t.noView },
+        ...snapshot.value.views.map((view) => ({
+          value: view.id,
+          label: view.name,
+          ...(0, import_core2.isSavedView)(view) ? {} : { disabled: true, title: view.invalid }
+        }))
+      ];
+      const key = JSON.stringify(options);
+      if (key !== shownOptions) {
+        shownOptions = key;
+        picker.setOptions(options);
+      }
+      picker.setValue(snapshot.value.currentId ?? "");
+      picker.setLabel(t.view);
+    };
+    (0, import_vue4.onMounted)(() => {
+      picker = (0, import_controls.createSelect)({
+        options: [],
+        value: "",
+        label: text().view,
+        className: "rs-fb__select",
+        onChange: (id) => {
+          if (id) props.views.apply(id);
+        }
+      });
+      pickerHost.value?.append(picker.element);
+      syncPicker();
+    });
+    (0, import_vue4.onBeforeUnmount)(() => picker?.destroy());
+    (0, import_vue4.watch)(() => [snapshot.value, props.locale, props.messages], syncPicker);
+    const dialog = (0, import_vue4.ref)(null);
+    const builder = (0, import_vue4.ref)(null);
+    const editingId = (0, import_vue4.ref)(null);
+    const name = (0, import_vue4.ref)("");
+    const isDefault = (0, import_vue4.ref)(false);
+    const filter = (0, import_vue4.shallowRef)(null);
+    const error = (0, import_vue4.ref)("");
+    const open = (0, import_vue4.ref)(false);
+    const current = () => {
+      const view = snapshot.value.views.find((v) => v.id === snapshot.value.currentId);
+      return view && (0, import_core2.isSavedView)(view) ? view : void 0;
+    };
+    const show = (view) => {
+      editingId.value = view?.id ?? null;
+      name.value = view?.name ?? "";
+      isDefault.value = view?.isDefault ?? false;
+      filter.value = props.store.getSnapshot().state.filter;
+      error.value = "";
+      open.value = true;
+      const el = dialog.value;
+      if (el && typeof el.showModal === "function") el.showModal();
+      else el?.setAttribute("open", "");
+    };
+    const close = () => {
+      open.value = false;
+      const el = dialog.value;
+      if (el && typeof el.close === "function") el.close();
+      else el?.removeAttribute("open");
+    };
+    const save = async () => {
+      if (name.value.trim() === "") return;
+      builder.value?.flush();
+      props.store.dispatch({ type: "setFilter", filter: filter.value });
+      try {
+        await props.views.saveCurrent({ ...editingId.value ? { id: editingId.value } : {}, name: name.value.trim(), isDefault: isDefault.value });
+        close();
+      } catch (reason) {
+        error.value = reason instanceof Error ? reason.message : String(reason);
+      }
+    };
+    const remove = async () => {
+      const view = current();
+      if (!view) return;
+      const message = text().confirmRemove.replace("{name}", view.name);
+      const confirmed = props.confirm ? await props.confirm(message) : window.confirm(message);
+      if (!confirmed) return;
+      try {
+        await props.views.remove(view.id);
+      } catch {
+      }
+    };
+    const describe = (reason) => reason instanceof Error ? reason.message : String(reason);
+    const loadValues = (field, search) => props.store.loadDistinct(field, { search });
+    return () => {
+      const t = text();
+      return (0, import_vue4.h)("div", { class: "rs-fb rs-fb__views" }, [
+        // Host of the picker (a controls select appended on mount).
+        (0, import_vue4.h)("span", { ref: pickerHost, style: "display: contents" }),
+        (0, import_vue4.h)("button", { type: "button", class: "rs-fb__btn rs-fb__add", onClick: () => show(void 0) }, t.newView),
+        (0, import_vue4.h)("button", { type: "button", class: "rs-fb__btn", disabled: !current(), onClick: () => show(current()) }, t.edit),
+        (0, import_vue4.h)("button", { type: "button", class: "rs-fb__btn rs-fb__danger", disabled: !current(), onClick: () => void remove() }, t.remove),
+        // Failed list loads and deletes; save errors are shown in the dialog.
+        snapshot.value.status === "error" && !open.value ? (0, import_vue4.h)("p", { class: "rs-fb__error", role: "alert" }, describe(snapshot.value.error)) : null,
+        (0, import_vue4.h)("dialog", { ref: dialog, class: "rs-fb rs-fb__dialog", onClose: () => open.value = false }, [
+          (0, import_vue4.h)("label", { class: "rs-fb__field-label" }, [
+            t.name,
+            (0, import_vue4.h)("input", {
+              class: "rs-fb__input",
+              name: "name",
+              value: name.value,
+              onInput: (event) => name.value = event.target.value
+            })
+          ]),
+          (0, import_vue4.h)("label", { class: "rs-fb__negate" }, [
+            (0, import_vue4.h)("input", {
+              class: "rs-fb__check",
+              type: "checkbox",
+              name: "isDefault",
+              checked: isDefault.value,
+              onChange: (event) => isDefault.value = event.target.checked
+            }),
+            t.isDefault
+          ]),
+          // The builder is mounted only while the dialog is open, over the grid's current filter.
+          open.value ? (0, import_vue4.h)(RsFilterBuilder, {
+            ref: builder,
+            modelValue: filter.value,
+            "onUpdate:modelValue": (value) => filter.value = value,
+            columns: (0, import_vue4.toRaw)(props.columns),
+            loadValues,
+            ...props.locale ? { locale: props.locale } : {}
+          }) : null,
+          error.value ? (0, import_vue4.h)("p", { class: "rs-fb__error", role: "alert" }, error.value) : null,
+          (0, import_vue4.h)("div", { class: "rs-fb__dialog-actions" }, [
+            (0, import_vue4.h)("button", { type: "button", class: "rs-fb__btn", onClick: close }, t.cancel),
+            (0, import_vue4.h)("button", { type: "button", class: "rs-fb__btn rs-fb__primary", onClick: () => void save() }, t.save)
+          ])
+        ])
+      ]);
+    };
+  }
+});
+
+// src/RsGrid.ts
+var optionalBoolean2 = { type: Boolean, default: void 0 };
+var EXPORT_FORMATS = ["xlsx", "csv", "pdf"];
+var rsGridProps = {
+  dataSource: Object,
+  keyField: String,
+  store: Object,
+  columns: Array,
+  selectionMode: String,
+  pageSize: Number,
+  paging: optionalBoolean2,
+  scrolling: String,
+  blockSize: Number,
+  stateStorage: [String, Object],
+  initialState: Object,
+  /** v-model:state */
+  state: Object,
+  showCheckboxes: optionalBoolean2,
+  filterRow: optionalBoolean2,
+  headerFilter: optionalBoolean2,
+  columnChooser: optionalBoolean2,
+  pager: { type: [Boolean, Object], default: void 0 },
+  toolbar: optionalBoolean2,
+  rowClass: Function,
+  height: String,
+  locale: String,
+  messages: Object,
+  theme: String,
+  density: String,
+  /** Editing; only the mode is structural, callbacks are read when called (inline objects are fine). */
+  editing: Object,
+  /** Drag handle column; onReorder, canDrag and sortField are read from the latest props on every move. */
+  rowReorder: Object,
+  /** Caption rows above the column headers (bands follow their columns when they move). */
+  headerBands: Array,
+  /** Renders only the body cells in view; 'auto' (default) from 50 data columns. */
+  columnVirtualization: { type: [Boolean, String], default: void 0 },
+  /** Rows that get a detail toggle (with the #detail slot); defaults to all rows. Read on every render of a row. */
+  detailCanExpand: Function,
+  /** Storage of the user's saved views; shows the view picker in the toolbar (unless #toolbar-start is used). */
+  savedViews: Object,
+  /** { fileName, sheetName, title, maxRows, formats: { xlsx: () => import('@rastr/export-xlsx'), … } } */
+  export: Object
+};
+function readChildColumns(nodes) {
+  const columns = [];
+  const slotMap = /* @__PURE__ */ new Map();
+  const visit = (node) => {
+    if (Array.isArray(node)) {
+      node.forEach(visit);
+      return;
+    }
+    const vnode = node && typeof node === "object" ? node : null;
+    if (!vnode) return;
+    if (vnode.type === import_vue5.Fragment) {
+      visit(vnode.children);
+      return;
+    }
+    if (vnode.type !== RsColumn) return;
+    const column = {};
+    for (const [rawKey, rawValue] of Object.entries(vnode.props ?? {})) {
+      const key = (0, import_vue5.camelize)(rawKey);
+      if (RS_COLUMN_BOOLEAN_PROPS.has(key)) column[key] = rawValue === "" || rawValue === true || rawValue === "true";
+      else if (key === "editable") column[key] = typeof rawValue === "function" ? rawValue : rawValue === "" || rawValue === true || rawValue === "true";
+      else if (RS_COLUMN_NUMBER_PROPS.has(key)) column[key] = Number(rawValue);
+      else column[key] = rawValue;
+    }
+    const children = vnode.children ?? {};
+    columns.push(column);
+    const slots = {};
+    for (const name of ["cell", "header", "edit"]) {
+      const slot = children[name];
+      if (slot) slots[name] = slot;
+    }
+    slotMap.set(String(column["field"]), slots);
+  };
+  visit(nodes);
+  if (columns.length === 0) return null;
+  const signature = JSON.stringify(columns.map((c, i) => [c, slotMap.has(c.field) ? Object.keys(slotMap.get(c.field)) : [], i]));
+  return { columns, slots: slotMap, signature };
+}
+function placeNewColumns(states, definitions, previous) {
+  const known = new Set(previous.map((c) => c.field));
+  const result = states.filter((c) => known.has(c.field));
+  definitions.forEach((definition, index) => {
+    if (known.has(definition.field)) return;
+    const state = states.find((c) => c.field === definition.field);
+    if (!state) return;
+    const before = definitions.slice(0, index).reverse().find((d) => result.some((r) => r.field === d.field))?.field;
+    const at = before === void 0 ? 0 : result.findIndex((r) => r.field === before) + 1;
+    result.splice(at, 0, state);
+  });
+  return result;
+}
+var identities = /* @__PURE__ */ new WeakMap();
+var nextIdentity = 0;
+function identity(value) {
+  let id = identities.get(value);
+  if (id === void 0) {
+    id = ++nextIdentity;
+    identities.set(value, id);
+  }
+  return id;
+}
+function structuralSignature(values) {
+  return JSON.stringify(
+    values,
+    (_key, value) => typeof value === "function" ? `fn#${identity(value)}` : value
+  );
+}
+var RsGrid = (0, import_vue5.defineComponent)({
+  name: "RsGrid",
+  props: rsGridProps,
+  emits: {
+    rowClick: (payload) => payload !== void 0,
+    rowDblClick: (payload) => payload !== void 0,
+    rowActivate: (payload) => payload !== void 0,
+    focusedRowChange: (payload) => payload !== void 0,
+    selectionChange: (keys, selection) => keys !== void 0 && selection !== void 0,
+    stateChange: (state) => state !== void 0,
+    loadError: (error) => error !== void 0 || error === void 0,
+    "update:state": (state) => state !== void 0,
+    copy: (result) => result !== void 0,
+    saveError: (payload) => payload !== void 0,
+    exportError: (error) => error !== void 0 || error === void 0,
+    reorderError: (payload) => payload !== void 0,
+    detailToggle: (payload) => payload !== void 0
+  },
+  slots: Object,
+  setup(props, { slots, emit, expose }) {
+    const instance = (0, import_vue5.getCurrentInstance)();
+    const host = (0, import_vue5.ref)(null);
+    let store = null;
+    let ownsStore = false;
+    let grid = null;
+    let currentColumns = [];
+    let unsubscribe = null;
+    let children = null;
+    let rebuildQueued = false;
+    let mounted = false;
+    let warnedMissingSource = false;
+    const toolbarTarget = () => {
+      const el = document.createElement("div");
+      el.style.display = "contents";
+      return el;
+    };
+    const toolbarStart = toolbarTarget();
+    const toolbarEnd = toolbarTarget();
+    const views = (0, import_vue5.shallowRef)(null);
+    const showViews = () => !!props.savedViews && !slots["toolbar-start"];
+    const requireStore = () => {
+      if (!store) throw new import_core3.RastrError("vue/not-mounted", "RsGrid is not mounted yet");
+      return store;
+    };
+    const baseColumns = () => props.columns ?? children?.columns ?? [];
+    const resolveColumns = () => baseColumns().map((column) => {
+      const field = column.field;
+      const cellSlot = () => slots[`cell-${field}`] ?? children?.slots.get(field)?.cell;
+      const headerSlot = () => children?.slots.get(field)?.header;
+      const editSlot = () => slots[`edit-${field}`] ?? children?.slots.get(field)?.edit;
+      return {
+        ...column,
+        // An editor slot makes the column editable unless editable says otherwise.
+        ...editSlot() ? { editor: createVueEditRenderer(editSlot, instance), editable: column.editable ?? true } : {},
+        ...cellSlot() ? { cellRenderer: createVueCellRenderer(cellSlot, instance) } : {},
+        ...headerSlot() ? { headerRenderer: createVueHeaderRenderer(headerSlot, instance) } : {}
+      };
+    });
+    const viewOptions = (columns, gridStore) => {
+      const options = { store: gridStore, columns };
+      const keys = [
+        "showCheckboxes",
+        "filterRow",
+        "headerFilter",
+        "columnChooser",
+        "pager",
+        "rowClass",
+        "height",
+        "locale",
+        "messages",
+        "theme",
+        "density",
+        "headerBands",
+        "columnVirtualization"
+      ];
+      for (const key of keys) {
+        if (props[key] !== void 0) options[key] = props[key];
+      }
+      options["onCopy"] = (result) => emit("copy", result);
+      if (props.editing) options["editing"] = latestEditing(props.editing.mode);
+      if (props.rowReorder) options["rowReorder"] = latestReorder();
+      if (detailSlot()) options["detail"] = detailOptions();
+      if (availableFormats().length > 0) options["export"] = latestExport(availableFormats());
+      if (instance.vnode.props?.["onExportError"]) options["onExportError"] = (error) => emit("exportError", error);
+      if (props.toolbar === false) options["toolbar"] = false;
+      else {
+        options["toolbar"] = {
+          ...slots["toolbar-start"] || showViews() ? { start: toolbarStart } : {},
+          ...slots["toolbar-end"] ? { end: toolbarEnd } : {}
+        };
+      }
+      return options;
+    };
+    const availableFormats = () => {
+      const settings = props.export;
+      const server = settings?.server ? settings.serverFormats ?? EXPORT_FORMATS : [];
+      return EXPORT_FORMATS.filter((format) => !!settings?.formats?.[format] || server.includes(format));
+    };
+    const latestExport = (formats) => ({
+      get fileName() {
+        return props.export?.fileName;
+      },
+      get sheetName() {
+        return props.export?.sheetName;
+      },
+      get title() {
+        return props.export?.title;
+      },
+      get maxRows() {
+        return props.export?.maxRows;
+      },
+      get pdf() {
+        return props.export?.pdf;
+      },
+      formats: Object.fromEntries(
+        formats.filter((format) => !!props.export?.formats?.[format]).map((format) => [format, () => props.export.formats[format]()])
+      ),
+      ...props.export?.server ? {
+        server: (request) => props.export.server(request),
+        serverFormats: formats.filter((format) => (props.export?.serverFormats ?? EXPORT_FORMATS).includes(format))
+      } : {}
+    });
+    const latestEditing = (mode) => ({
+      mode,
+      onSave: async (changes) => props.editing?.onSave(changes),
+      allowDelete: (row) => {
+        const allow = props.editing?.allowDelete;
+        return typeof allow === "function" ? allow(row) : allow === true;
+      },
+      confirmDelete: async (row) => props.editing?.confirmDelete ? props.editing.confirmDelete(row) : true
+    });
+    const detailSlot = () => slots.detail;
+    const detailOptions = () => {
+      const appContext = slotAppContext(instance);
+      return {
+        render(container, ctx) {
+          const mounted2 = mountSlot(container, detailSlot, { row: ctx.row, key: ctx.key }, appContext);
+          return { update: (next) => mounted2.update({ row: next.row, key: next.key }), dispose: () => mounted2.dispose() };
+        },
+        canExpand: (row) => props.detailCanExpand?.(row) ?? true
+      };
+    };
+    const latestReorder = () => ({
+      onReorder: (event) => props.rowReorder?.onReorder(event),
+      canDrag: (row) => props.rowReorder?.canDrag?.(row) ?? true,
+      get sortField() {
+        return props.rowReorder?.sortField;
+      }
+    });
+    const emitState = (state) => {
+      emit("stateChange", state);
+      emit("update:state", state);
+    };
+    const watchStore = (gridStore) => {
+      let last = gridStore.getSnapshot();
+      return gridStore.subscribe((snapshot) => {
+        const previous = last;
+        last = snapshot;
+        if (snapshot.state !== previous.state) emitState(snapshot.state);
+        if (snapshot.state.selection !== previous.state.selection) {
+          const selection = snapshot.state.selection;
+          emit("selectionChange", selection.mode === "include" ? selection.keys : [], selection);
+        }
+        if (snapshot.status === "error" && snapshot.error !== previous.error) emit("loadError", snapshot.error);
+      });
+    };
+    const build = (carriedState) => {
+      if (!host.value) return;
+      const columns = resolveColumns();
+      if (props.store) {
+        store = props.store;
+        ownsStore = false;
+      } else {
+        if (!props.dataSource || !props.keyField) {
+          if (!warnedMissingSource) {
+            warnedMissingSource = true;
+            console.warn("[rastr] RsGrid is waiting for a store or a dataSource with keyField");
+          }
+          return;
+        }
+        store = (0, import_core3.createGridStore)(
+          toStoreOptions(
+            {
+              dataSource: props.dataSource,
+              keyField: props.keyField,
+              selectionMode: props.selectionMode,
+              pageSize: props.pageSize,
+              paging: props.paging,
+              scrolling: props.scrolling,
+              blockSize: props.blockSize,
+              stateStorage: props.stateStorage,
+              initialState: props.state ?? props.initialState
+            },
+            columns,
+            carriedState
+          )
+        );
+        ownsStore = true;
+      }
+      unsubscribe = watchStore(store);
+      currentColumns = columns;
+      grid = (0, import_grid.createGrid)(host.value, viewOptions(columns, store));
+      grid.on("rowClick", (payload) => emit("rowClick", payload));
+      grid.on("rowDblClick", (payload) => emit("rowDblClick", payload));
+      grid.on("rowActivate", (payload) => emit("rowActivate", payload));
+      grid.on("focusedRowChange", (payload) => emit("focusedRowChange", payload));
+      grid.on("saveError", (payload) => emit("saveError", payload));
+      grid.on("detailToggle", (payload) => emit("detailToggle", payload));
+      if (instance.vnode.props?.["onReorderError"]) grid.on("reorderError", (payload) => emit("reorderError", payload));
+      if (props.savedViews) {
+        const controller = (0, import_core3.createSavedViews)(store, baseColumns(), props.savedViews);
+        views.value = controller;
+        if (!carriedState && !store.restored) void controller.applyDefault();
+        else void controller.reload();
+      }
+    };
+    const teardown = () => {
+      views.value?.destroy();
+      views.value = null;
+      grid?.destroy();
+      grid = null;
+      unsubscribe?.();
+      unsubscribe = null;
+      if (ownsStore) store?.destroy();
+      store = null;
+    };
+    const rebuild = () => {
+      if (!mounted) return;
+      if (!store) {
+        build();
+        if (store) emit("update:state", store.getSnapshot().state);
+        return;
+      }
+      const previous = store.getSnapshot().state;
+      const columns = baseColumns();
+      const restored = (0, import_core3.deserializeState)((0, import_core3.serializeState)(previous), columns);
+      const carried = restored ? {
+        ...restored,
+        ...restored.columns ? { columns: placeNewColumns(restored.columns, columns, previous.columns) } : {},
+        paging: { pageSize: previous.paging.pageSize, pageIndex: previous.paging.pageIndex }
+      } : void 0;
+      teardown();
+      build(carried);
+      if (store) emitState(store.getSnapshot().state);
+    };
+    const queueRebuild = () => {
+      if (rebuildQueued || !mounted) return;
+      rebuildQueued = true;
+      void (0, import_vue5.nextTick)(() => {
+        rebuildQueued = false;
+        rebuild();
+      });
+    };
+    (0, import_vue5.onMounted)(() => {
+      mounted = true;
+      build();
+      if (store) emit("update:state", store.getSnapshot().state);
+    });
+    (0, import_vue5.onBeforeUnmount)(() => {
+      mounted = false;
+      teardown();
+    });
+    (0, import_vue5.watch)(
+      () => structuralSignature([
+        props.columns,
+        props.dataSource,
+        props.keyField,
+        props.store,
+        props.scrolling ?? null,
+        props.blockSize ?? null,
+        props.selectionMode,
+        props.locale,
+        props.messages,
+        props.filterRow,
+        props.headerFilter,
+        props.columnChooser,
+        props.pager,
+        props.showCheckboxes,
+        props.toolbar,
+        props.editing?.mode ?? null,
+        props.rowReorder ? "reorder" : null,
+        props.headerBands ?? null,
+        props.columnVirtualization ?? null,
+        // The detail column comes and goes with the slot.
+        detailSlot() ? "detail" : null,
+        props.savedViews ? `views#${identity(props.savedViews)}` : null,
+        // Only the set of formats changes the toolbar; names and loaders are read when exporting.
+        availableFormats().join(",")
+      ]),
+      (next, previous) => {
+        if (next !== previous) queueRebuild();
+      }
+    );
+    (0, import_vue5.watch)(
+      () => props.state,
+      (next) => {
+        const raw = next ? (0, import_vue5.toRaw)(next) : void 0;
+        if (raw && store && raw !== store.getSnapshot().state) store.dispatch({ type: "replaceState", state: raw });
+      }
+    );
+    (0, import_vue5.watch)(
+      () => [props.theme, props.density, props.rowClass, props.height],
+      ([theme, density, rowClass, height]) => grid?.setOptions({ theme, density, rowClass, height })
+    );
+    const api = {
+      get store() {
+        return requireStore();
+      },
+      refresh: () => requireStore().reload(),
+      setFilter: (filter) => requireStore().dispatch({ type: "setFilter", filter }),
+      setColumnFilter: (field, filter) => requireStore().dispatch({ type: "setColumnFilter", field, filter }),
+      clearFilters() {
+        requireStore().dispatch({ type: "setFilter", filter: null });
+        requireStore().dispatch({ type: "setSearch", search: "" });
+      },
+      getState: () => requireStore().getSnapshot().state,
+      getSelectedKeys() {
+        const selection = requireStore().getSnapshot().state.selection;
+        if (selection.mode === "exclude") {
+          throw new import_core3.RastrError("vue/selection-all", "All rows are selected; use getSelection() to read the exclusion list");
+        }
+        return selection.keys;
+      },
+      getSelection: () => requireStore().getSnapshot().state.selection,
+      getSelectedRows() {
+        const gridStore = requireStore();
+        const { rows, state } = gridStore.getSnapshot();
+        return rows.filter((row) => (0, import_core3.isSelected)(state.selection, gridStore.getRowKey(row)));
+      },
+      selectAll: () => requireStore().dispatch({ type: "selectAll" }),
+      clearSelection: () => requireStore().dispatch({ type: "clearSelection" }),
+      focusRow: (key) => grid?.focusRow(key),
+      expandDetail: (key) => grid?.expandDetail(key),
+      collapseDetail: (key) => grid?.collapseDetail(key),
+      isDetailExpanded: (key) => grid?.isDetailExpanded(key) ?? false,
+      scrollToIndex: (index) => grid?.scrollToIndex(index),
+      export: (format) => grid?.export(format) ?? Promise.resolve(),
+      get savedViews() {
+        return views.value;
+      },
+      get columns() {
+        return currentColumns;
+      }
+    };
+    expose(api);
+    return () => {
+      const declared = readChildColumns(slots.default?.({}));
+      if (declared && props.columns) {
+        throw new import_core3.RastrError("vue/columns-twice", "RsGrid got both the columns prop and RsColumn children; use one of them");
+      }
+      const changed = (declared?.signature ?? "") !== (children?.signature ?? "");
+      children = declared;
+      if (changed) queueRebuild();
+      const nodes = [(0, import_vue5.h)("div", { ref: host })];
+      const start = slots["toolbar-start"];
+      const end = slots["toolbar-end"];
+      if (start) nodes.push((0, import_vue5.h)(import_vue5.Teleport, { to: toolbarStart }, start()));
+      else if (showViews() && views.value && store) {
+        nodes.push(
+          (0, import_vue5.h)(import_vue5.Teleport, { to: toolbarStart }, [
+            (0, import_vue5.h)(RsSavedViews, { views: views.value, store, columns: baseColumns(), ...props.locale ? { locale: props.locale } : {} })
+          ])
+        );
+      }
+      if (end) nodes.push((0, import_vue5.h)(import_vue5.Teleport, { to: toolbarEnd }, end()));
+      return (0, import_vue5.h)("div", { class: "rs-vue" }, nodes);
+    };
+  }
+});
+
+// src/define-columns.ts
+function defineColumns(columns) {
+  return columns;
+}
+
+// src/index.ts
+var import_core4 = require("@rastr/core");
+var import_core5 = require("@rastr/core");
+var import_grid2 = require("@rastr/grid");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RsColumn,
+  RsFilterBuilder,
+  RsGrid,
+  RsSavedViews,
+  actionsColumn,
+  and,
+  cond,
+  createArrayDataSource,
+  createRemoteExport,
+  createSavedViews,
+  createVueCellRenderer,
+  createVueHeaderRenderer,
+  custom,
+  defineColumns,
+  editActionsColumn,
+  not,
+  or,
+  pattern,
+  range,
+  required,
+  rowNumberColumn
+});
+//# sourceMappingURL=index.cjs.map