@revolist/svelte-datagrid
Version:
Svelte DataGrid Spreadsheet component with native cell render support
405 lines (404 loc) • 17.4 kB
JavaScript
import { defineCustomElements } from "@revolist/revogrid/loader";
import "svelte/internal/disclose-version";
import "svelte/internal/flags/legacy";
import * as $ from "svelte/internal/client";
import { createEventDispatcher, flushSync, getAllContexts, mount, onMount, unmount } from "svelte";
export * from "@revolist/revogrid/loader";
//#region lib/components/RevoGrid.ts
var root = $.from_html(`<revo-grid><!></revo-grid>`, 2);
function RevoGrid($$anchor, $$props) {
$.push($$props, false);
let __ref = $.mutable_source();
let __mounted = $.mutable_source(false);
const dispatch = createEventDispatcher();
let rowHeaders = $.prop($$props, "rowHeaders", 8, void 0);
let frameSize = $.prop($$props, "frameSize", 8, void 0);
let rowSize = $.prop($$props, "rowSize", 8, void 0);
let colSize = $.prop($$props, "colSize", 8, void 0);
let range = $.prop($$props, "range", 8, void 0);
let readonly = $.prop($$props, "readonly", 8, void 0);
let resize = $.prop($$props, "resize", 8, void 0);
let noHorizontalScrollTransfer = $.prop($$props, "noHorizontalScrollTransfer", 8, void 0);
let canFocus = $.prop($$props, "canFocus", 8, void 0);
let useClipboard = $.prop($$props, "useClipboard", 8, void 0);
let columns = $.prop($$props, "columns", 8, void 0);
let source = $.prop($$props, "source", 8, void 0);
let pinnedTopSource = $.prop($$props, "pinnedTopSource", 8, void 0);
let pinnedBottomSource = $.prop($$props, "pinnedBottomSource", 8, void 0);
let rowDefinitions = $.prop($$props, "rowDefinitions", 8, void 0);
let editors = $.prop($$props, "editors", 8, void 0);
let applyOnClose = $.prop($$props, "applyOnClose", 8, void 0);
let plugins = $.prop($$props, "plugins", 8, void 0);
let columnTypes = $.prop($$props, "columnTypes", 8, void 0);
let theme = $.prop($$props, "theme", 8, void 0);
let rowClass = $.prop($$props, "rowClass", 8, void 0);
let autoSizeColumn = $.prop($$props, "autoSizeColumn", 8, void 0);
let filter = $.prop($$props, "filter", 8, void 0);
let sorting = $.prop($$props, "sorting", 8, void 0);
let focusTemplate = $.prop($$props, "focusTemplate", 8, void 0);
let canMoveColumns = $.prop($$props, "canMoveColumns", 8, void 0);
let trimmedRows = $.prop($$props, "trimmedRows", 8, void 0);
let exporting = $.prop($$props, "exporting", 8, void 0);
let grouping = $.prop($$props, "grouping", 8, void 0);
let stretch = $.prop($$props, "stretch", 8, void 0);
let additionalData = $.prop($$props, "additionalData", 8, void 0);
let disableVirtualX = $.prop($$props, "disableVirtualX", 8, void 0);
let virtualX = $.prop($$props, "virtualX", 8, void 0);
let disableVirtualY = $.prop($$props, "disableVirtualY", 8, void 0);
let hideAttribution = $.prop($$props, "hideAttribution", 8, void 0);
let jobsBeforeRender = $.prop($$props, "jobsBeforeRender", 8, void 0);
let registerVNode = $.prop($$props, "registerVNode", 8, void 0);
let accessible = $.prop($$props, "accessible", 8, void 0);
let rtl = $.prop($$props, "rtl", 8, void 0);
let canDrag = $.prop($$props, "canDrag", 8, void 0);
const refresh = (...args) => $.get(__ref).refresh(...args);
const setDataAt = (...args) => $.get(__ref).setDataAt(...args);
const scrollToRow = (...args) => $.get(__ref).scrollToRow(...args);
const scrollToColumnIndex = (...args) => $.get(__ref).scrollToColumnIndex(...args);
const scrollToColumnProp = (...args) => $.get(__ref).scrollToColumnProp(...args);
const updateColumns = (...args) => $.get(__ref).updateColumns(...args);
const addTrimmed = (...args) => $.get(__ref).addTrimmed(...args);
const scrollToCoordinate = (...args) => $.get(__ref).scrollToCoordinate(...args);
const setCellEdit = (...args) => $.get(__ref).setCellEdit(...args);
const setCellsFocus = (...args) => $.get(__ref).setCellsFocus(...args);
const getSource = (...args) => $.get(__ref).getSource(...args);
const getVisibleSource = (...args) => $.get(__ref).getVisibleSource(...args);
const getSourceStore = (...args) => $.get(__ref).getSourceStore(...args);
const getColumnStore = (...args) => $.get(__ref).getColumnStore(...args);
const updateColumnSorting = (...args) => $.get(__ref).updateColumnSorting(...args);
const clearSorting = (...args) => $.get(__ref).clearSorting(...args);
const getColumns = (...args) => $.get(__ref).getColumns(...args);
const clearFocus = (...args) => $.get(__ref).clearFocus(...args);
const getPlugins = (...args) => $.get(__ref).getPlugins(...args);
const getFocused = (...args) => $.get(__ref).getFocused(...args);
const getContentSize = (...args) => $.get(__ref).getContentSize(...args);
const getSelectedRange = (...args) => $.get(__ref).getSelectedRange(...args);
const refreshExtraElements = (...args) => $.get(__ref).refreshExtraElements(...args);
const getProviders = (...args) => $.get(__ref).getProviders(...args);
const getWebComponent = () => $.get(__ref);
onMount(() => {
$.set(__mounted, true);
});
const setProp = (prop, value) => {
if ($.get(__ref)) $.mutate(__ref, $.get(__ref)[prop] = value);
};
const onEvent = (e) => {
e.stopPropagation();
dispatch(e.type, e.detail);
};
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(columns())), () => {
if ($.get(__mounted)) setProp("columns", columns());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(source())), () => {
if ($.get(__mounted)) setProp("source", source());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(pinnedTopSource())), () => {
if ($.get(__mounted)) setProp("pinnedTopSource", pinnedTopSource());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(pinnedBottomSource())), () => {
if ($.get(__mounted)) setProp("pinnedBottomSource", pinnedBottomSource());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(rowDefinitions())), () => {
if ($.get(__mounted)) setProp("rowDefinitions", rowDefinitions());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(editors())), () => {
if ($.get(__mounted)) setProp("editors", editors());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(plugins())), () => {
if ($.get(__mounted)) setProp("plugins", plugins());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(columnTypes())), () => {
if ($.get(__mounted)) setProp("columnTypes", columnTypes());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(sorting())), () => {
if ($.get(__mounted)) setProp("sorting", sorting());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(focusTemplate())), () => {
if ($.get(__mounted)) setProp("focusTemplate", focusTemplate());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(trimmedRows())), () => {
if ($.get(__mounted)) setProp("trimmedRows", trimmedRows());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(grouping())), () => {
if ($.get(__mounted)) setProp("grouping", grouping());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(additionalData())), () => {
if ($.get(__mounted)) setProp("additionalData", additionalData());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(virtualX())), () => {
if ($.get(__mounted)) setProp("virtualX", virtualX());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(jobsBeforeRender())), () => {
if ($.get(__mounted)) setProp("jobsBeforeRender", jobsBeforeRender());
});
$.legacy_pre_effect(() => ($.get(__mounted), $.deep_read_state(registerVNode())), () => {
if ($.get(__mounted)) setProp("registerVNode", registerVNode());
});
$.legacy_pre_effect_reset();
var $$exports = {
refresh,
setDataAt,
scrollToRow,
scrollToColumnIndex,
scrollToColumnProp,
updateColumns,
addTrimmed,
scrollToCoordinate,
setCellEdit,
setCellsFocus,
getSource,
getVisibleSource,
getSourceStore,
getColumnStore,
updateColumnSorting,
clearSorting,
getColumns,
clearFocus,
getPlugins,
getFocused,
getContentSize,
getSelectedRange,
refreshExtraElements,
getProviders,
getWebComponent
};
$.init();
var revo_grid = root();
$.template_effect(() => $.set_custom_element_data(revo_grid, "row-headers", rowHeaders()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "frame-size", frameSize()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "row-size", rowSize()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "col-size", colSize()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "range", range()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "readonly", readonly()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "resize", resize()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "no-horizontal-scroll-transfer", noHorizontalScrollTransfer()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "can-focus", canFocus()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "use-clipboard", useClipboard()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "apply-on-close", applyOnClose()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "theme", theme()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "row-class", rowClass()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "auto-size-column", autoSizeColumn()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "filter", filter()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "can-move-columns", canMoveColumns()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "exporting", exporting()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "stretch", stretch()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "disable-virtual-x", disableVirtualX()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "disable-virtual-y", disableVirtualY()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "hide-attribution", hideAttribution()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "accessible", accessible()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "rtl", rtl()));
$.template_effect(() => $.set_custom_element_data(revo_grid, "can-drag", canDrag()));
var node = $.child(revo_grid);
$.slot(node, $$props, "default", {}, null);
$.reset(revo_grid);
$.bind_this(revo_grid, ($$value) => $.set(__ref, $$value), () => $.get(__ref));
$.event("contentsizechanged", revo_grid, onEvent);
$.event("beforeedit", revo_grid, onEvent);
$.event("beforerangeedit", revo_grid, onEvent);
$.event("afteredit", revo_grid, onEvent);
$.event("beforeautofill", revo_grid, onEvent);
$.event("beforerange", revo_grid, onEvent);
$.event("afterfocus", revo_grid, onEvent);
$.event("roworderchanged", revo_grid, onEvent);
$.event("beforesorting", revo_grid, onEvent);
$.event("beforesourcesortingapply", revo_grid, onEvent);
$.event("beforesortingapply", revo_grid, onEvent);
$.event("aftersortingapply", revo_grid, onEvent);
$.event("rowdragstart", revo_grid, onEvent);
$.event("headerclick", revo_grid, onEvent);
$.event("beforecellfocus", revo_grid, onEvent);
$.event("beforefocuslost", revo_grid, onEvent);
$.event("beforesourceset", revo_grid, onEvent);
$.event("beforeanysource", revo_grid, onEvent);
$.event("aftersourceset", revo_grid, onEvent);
$.event("afteranysource", revo_grid, onEvent);
$.event("beforecolumnsgather", revo_grid, onEvent);
$.event("beforecolumnsset", revo_grid, onEvent);
$.event("beforecolumnapplied", revo_grid, onEvent);
$.event("aftercolumnsset", revo_grid, onEvent);
$.event("beforefilterapply", revo_grid, onEvent);
$.event("beforefiltertrimmed", revo_grid, onEvent);
$.event("beforetrimmed", revo_grid, onEvent);
$.event("aftertrimmed", revo_grid, onEvent);
$.event("viewportscroll", revo_grid, onEvent);
$.event("beforeexport", revo_grid, onEvent);
$.event("beforeeditstart", revo_grid, onEvent);
$.event("aftercolumnresize", revo_grid, onEvent);
$.event("beforerowdefinition", revo_grid, onEvent);
$.event("filterconfigchanged", revo_grid, onEvent);
$.event("sortingconfigchanged", revo_grid, onEvent);
$.event("rowheaderschanged", revo_grid, onEvent);
$.event("beforegridrender", revo_grid, onEvent);
$.event("aftergridrender", revo_grid, onEvent);
$.event("aftergridinit", revo_grid, onEvent);
$.event("additionaldatachanged", revo_grid, onEvent);
$.event("afterthemechanged", revo_grid, onEvent);
$.event("created", revo_grid, onEvent);
$.append($$anchor, revo_grid);
$.bind_prop($$props, "refresh", refresh);
$.bind_prop($$props, "setDataAt", setDataAt);
$.bind_prop($$props, "scrollToRow", scrollToRow);
$.bind_prop($$props, "scrollToColumnIndex", scrollToColumnIndex);
$.bind_prop($$props, "scrollToColumnProp", scrollToColumnProp);
$.bind_prop($$props, "updateColumns", updateColumns);
$.bind_prop($$props, "addTrimmed", addTrimmed);
$.bind_prop($$props, "scrollToCoordinate", scrollToCoordinate);
$.bind_prop($$props, "setCellEdit", setCellEdit);
$.bind_prop($$props, "setCellsFocus", setCellsFocus);
$.bind_prop($$props, "getSource", getSource);
$.bind_prop($$props, "getVisibleSource", getVisibleSource);
$.bind_prop($$props, "getSourceStore", getSourceStore);
$.bind_prop($$props, "getColumnStore", getColumnStore);
$.bind_prop($$props, "updateColumnSorting", updateColumnSorting);
$.bind_prop($$props, "clearSorting", clearSorting);
$.bind_prop($$props, "getColumns", getColumns);
$.bind_prop($$props, "clearFocus", clearFocus);
$.bind_prop($$props, "getPlugins", getPlugins);
$.bind_prop($$props, "getFocused", getFocused);
$.bind_prop($$props, "getContentSize", getContentSize);
$.bind_prop($$props, "getSelectedRange", getSelectedRange);
$.bind_prop($$props, "refreshExtraElements", refreshExtraElements);
$.bind_prop($$props, "getProviders", getProviders);
$.bind_prop($$props, "getWebComponent", getWebComponent);
return $.pop($$exports);
}
//#endregion
//#region lib/revogrid.ts
defineCustomElements();
//#endregion
//#region lib/reactive-props.svelte.ts
function createReactiveProps(initialProps) {
const props = $.proxy({ ...initialProps });
return {
props,
update(nextProps) {
for (const key of Object.keys(props)) if (!(key in nextProps)) delete props[key];
Object.assign(props, nextProps);
}
};
}
//#endregion
//#region lib/renderer.ts
function getCurrentContext() {
try {
return getAllContexts();
} catch {
return;
}
}
function SvelteTemplateConstructor(el, SvelteComponent, initialProps, lastEl = null, context = getCurrentContext()) {
if (!el) {
lastEl?.destroy();
return null;
}
if (el._svelteTemplate?.component === SvelteComponent) {
el._svelteTemplate.update(initialProps);
return el._svelteTemplate;
}
el._svelteTemplate?.destroy();
const reactiveProps = createReactiveProps(initialProps);
const instance = mount(SvelteComponent, {
target: el,
props: reactiveProps.props,
context
});
const rendered = {
component: SvelteComponent,
instance,
props: reactiveProps,
update(newProps) {
reactiveProps.update(newProps);
flushSync();
},
destroy() {
unmount(instance);
el._svelteTemplate = void 0;
}
};
el._svelteTemplate = rendered;
flushSync();
return rendered;
}
/**
* Render a Svelte component in a RevoGrid column cell template.
*/
var Template = (SvelteComponent, customProps) => {
const context = getCurrentContext();
return (h, p, addition) => {
const props = {
...customProps ?? {},
...p,
addition
};
const key = `${p.prop}-${p.rowIndex || 0}`;
let lastEl = null;
return h("span", {
key,
ref: (el) => {
lastEl = SvelteTemplateConstructor(el, SvelteComponent, props, lastEl, context);
}
});
};
};
//#endregion
//#region lib/editor.adapter.ts
var SvelteEditorAdapter = class {
EditorComponent;
column;
save;
close;
element = null;
editCell;
renderedComponent = null;
constructor(EditorComponent, column, save, close) {
this.EditorComponent = EditorComponent;
this.column = column;
this.save = save;
this.close = close;
}
beforeUpdate() {
this.renderedComponent?.instance.beforeUpdate?.();
}
beforeDisconnect() {
this.renderedComponent?.instance.beforeDisconnect?.();
}
beforeAutoSave(value) {
return this.renderedComponent?.instance.beforeAutoSave?.(value) ?? false;
}
componentDidRender() {
this.renderedComponent?.instance.componentDidRender?.();
}
disconnectedCallback() {
this.renderedComponent?.destroy();
this.renderedComponent = null;
}
getValue() {
return this.renderedComponent?.instance.getValue?.();
}
render(h) {
return h("span", {
key: `${this.column.prop}-${this.editCell?.rowIndex || 0}`,
ref: (el) => {
const editorData = {
...this.editCell,
column: this.column,
save: this.save,
close: this.close
};
this.renderedComponent = SvelteTemplateConstructor(el, this.EditorComponent, editorData, this.renderedComponent);
}
});
}
};
//#endregion
//#region lib/editor.ts
/**
* Create an editor constructor from a Svelte component.
*/
var Editor = (EditorComponent) => {
return function(column, save, close) {
return new SvelteEditorAdapter(EditorComponent, column, save, close);
};
};
//#endregion
export { Editor, RevoGrid, SvelteEditorAdapter, SvelteTemplateConstructor, Template };