slickgrid-vue 0.1.0

package/src/global-grid-options.ts

@@ -0,0 +1,288 @@
+import {
+  type Column,
+  DelimiterType,
+  EventNamingStyle,
+  FileType,
+  Filters,
+  OperatorType,
+  type TreeDataOption,
+} from '@slickgrid-universal/common';
+
+import type { GridOption, RowDetailView } from './models/index.js';
+
+/**
+ * Default Options that can be passed to the Aurelia-Slickgrid
+ */
+export const GlobalGridOptions: Partial<GridOption> = {
+  alwaysShowVerticalScroll: true,
+  autoEdit: false,
+  asyncEditorLoading: false,
+  autoFitColumnsOnFirstLoad: true,
+  autoResize: {
+    applyResizeToContainer: true,
+    calculateAvailableSizeBy: 'window',
+    bottomPadding: 20,
+    minHeight: 180,
+    minWidth: 300,
+    rightPadding: 0,
+  },
+  cellHighlightCssClass: 'slick-cell-modified',
+  checkboxSelector: {
+    cssClass: 'slick-cell-checkboxsel',
+    width: 40,
+  },
+  cellMenu: {
+    autoAdjustDrop: true,
+    autoAlignSide: true,
+    hideCloseButton: true,
+    hideCommandSection: false,
+    hideOptionSection: false,
+  },
+  columnGroupSeparator: ' - ',
+  columnPicker: {
+    hideForceFitButton: false,
+    hideSyncResizeButton: true,
+    headerColumnValueExtractor: pickerHeaderColumnValueExtractor,
+  },
+  compositeEditorOptions: {
+    labels: {
+      cancelButtonKey: 'CANCEL',
+      cloneButtonKey: 'CLONE',
+      resetEditorButtonTooltipKey: 'RESET_INPUT_VALUE',
+      resetFormButtonKey: 'RESET_FORM',
+      massSelectionButtonKey: 'APPLY_TO_SELECTION',
+      massSelectionStatusKey: 'X_OF_Y_MASS_SELECTED',
+      massUpdateButtonKey: 'APPLY_MASS_UPDATE',
+      massUpdateStatusKey: 'ALL_X_RECORDS_SELECTED',
+      saveButtonKey: 'SAVE',
+    },
+    resetEditorButtonCssClass: 'mdi mdi-refresh mdi-15px',
+    resetFormButtonIconCssClass: 'mdi mdi-refresh mdi-16px mdi-flip-h',
+  },
+  contextMenu: {
+    autoAdjustDrop: true,
+    autoAlignSide: true,
+    hideCloseButton: true,
+    hideClearAllGrouping: false,
+    hideCollapseAllGroups: false,
+    hideCommandSection: false,
+    hideCopyCellValueCommand: false,
+    hideExpandAllGroups: false,
+    hideExportCsvCommand: false,
+    hideExportExcelCommand: false,
+    hideExportTextDelimitedCommand: true,
+    hideMenuOnScroll: true,
+    hideOptionSection: false,
+    iconCollapseAllGroupsCommand: 'mdi mdi-arrow-collapse',
+    iconExpandAllGroupsCommand: 'mdi mdi-arrow-expand',
+    iconClearGroupingCommand: 'mdi mdi-close',
+    iconCopyCellValueCommand: 'mdi mdi-content-copy',
+    iconExportCsvCommand: 'mdi mdi-download',
+    iconExportExcelCommand: 'mdi mdi-file-excel-outline text-success',
+    iconExportTextDelimitedCommand: 'mdi mdi-download',
+  },
+  customFooterOptions: {
+    dateFormat: 'YYYY-MM-DD, hh:mm a',
+    hideRowSelectionCount: false,
+    hideTotalItemCount: false,
+    hideLastUpdateTimestamp: true,
+    footerHeight: 25,
+    leftContainerClass: 'col-xs-12 col-sm-5',
+    rightContainerClass: 'col-xs-6 col-sm-7',
+    metricSeparator: '|',
+    metricTexts: {
+      items: 'items',
+      itemsKey: 'ITEMS',
+      of: 'of',
+      ofKey: 'OF',
+      itemsSelected: 'items selected',
+      itemsSelectedKey: 'ITEMS_SELECTED',
+    },
+  },
+  dataView: {
+    // when enabled, this will preserve the row selection even after filtering/sorting/grouping
+    syncGridSelection: {
+      preserveHidden: false,
+      preserveHiddenOnSelectionChange: true,
+    },
+    syncGridSelectionWithBackendService: false, // but disable it when using backend services
+  },
+  datasetIdPropertyName: 'id',
+  defaultFilter: Filters.input,
+  defaultBackendServiceFilterTypingDebounce: 500,
+  defaultColumnSortFieldId: 'id',
+  defaultFilterPlaceholder: '🔎︎', // magnifying glass icon
+  defaultFilterRangeOperator: OperatorType.rangeInclusive,
+  editable: false,
+  editorTypingDebounce: 450,
+  filterTypingDebounce: 0,
+  enableEmptyDataWarningMessage: true,
+  enableFilterTrimWhiteSpace: false, // do we want to trim white spaces on all Filters?
+  emptyDataWarning: {
+    className: 'slick-empty-data-warning',
+    message: 'No data to display.',
+    messageKey: 'EMPTY_DATA_WARNING_MESSAGE',
+    hideFrozenLeftWarning: false,
+    hideFrozenRightWarning: false,
+    leftViewportMarginLeft: '40%',
+    rightViewportMarginLeft: '40%',
+    frozenLeftViewportMarginLeft: '0px',
+    frozenRightViewportMarginLeft: '40%',
+  },
+  enableAutoResize: true,
+  enableAutoSizeColumns: true,
+  enableCellNavigation: false,
+  enableColumnPicker: true,
+  enableColumnReorder: true,
+  enableColumnResizeOnDoubleClick: true,
+  enableContextMenu: true,
+  enableExcelExport: false,
+  enableTextExport: false,
+  enableGridMenu: true,
+  enableHeaderMenu: true,
+  enableMouseHoverHighlightRow: true,
+  enableSorting: true,
+  enableTextSelectionOnCells: true,
+  eventNamingStyle: EventNamingStyle.camelCaseWithExtraOnPrefix,
+  explicitInitialization: true,
+  excelExportOptions: {
+    addGroupIndentation: true,
+    exportWithFormatter: false,
+    filename: 'export',
+    format: FileType.xlsx,
+    groupingColumnHeaderTitle: 'Group By',
+    groupCollapsedSymbol: '⮞',
+    groupExpandedSymbol: '⮟',
+    groupingAggregatorRowText: '',
+    sanitizeDataExport: false,
+  },
+  textExportOptions: {
+    delimiter: DelimiterType.comma,
+    exportWithFormatter: false,
+    filename: 'export',
+    format: FileType.csv,
+    groupingColumnHeaderTitle: 'Group By',
+    groupingAggregatorRowText: '',
+    sanitizeDataExport: false,
+    useUtf8WithBom: true,
+  },
+  forceFitColumns: false,
+  frozenHeaderWidthCalcDifferential: 1,
+  gridMenu: {
+    dropSide: 'left',
+    commandLabels: {
+      clearAllFiltersCommandKey: 'CLEAR_ALL_FILTERS',
+      clearAllSortingCommandKey: 'CLEAR_ALL_SORTING',
+      clearFrozenColumnsCommandKey: 'CLEAR_PINNING',
+      exportCsvCommandKey: 'EXPORT_TO_CSV',
+      exportExcelCommandKey: 'EXPORT_TO_EXCEL',
+      exportTextDelimitedCommandKey: 'EXPORT_TO_TAB_DELIMITED',
+      refreshDatasetCommandKey: 'REFRESH_DATASET',
+      toggleDarkModeCommandKey: 'TOGGLE_DARK_MODE',
+      toggleFilterCommandKey: 'TOGGLE_FILTER_ROW',
+      togglePreHeaderCommandKey: 'TOGGLE_PRE_HEADER_ROW',
+    },
+    hideClearAllFiltersCommand: false,
+    hideClearAllSortingCommand: false,
+    hideClearFrozenColumnsCommand: true, // opt-in command
+    hideExportCsvCommand: false,
+    hideExportExcelCommand: false,
+    hideExportTextDelimitedCommand: true,
+    hideForceFitButton: false,
+    hideRefreshDatasetCommand: false,
+    hideSyncResizeButton: true,
+    hideToggleDarkModeCommand: true,
+    hideToggleFilterCommand: false,
+    hideTogglePreHeaderCommand: false,
+    iconCssClass: 'mdi mdi-menu',
+    iconClearAllFiltersCommand: 'mdi mdi-filter-remove-outline',
+    iconClearAllSortingCommand: 'mdi mdi-sort-variant-off',
+    iconClearFrozenColumnsCommand: 'mdi mdi-close',
+    iconExportCsvCommand: 'mdi mdi-download',
+    iconExportExcelCommand: 'mdi mdi-file-excel-outline',
+    iconExportTextDelimitedCommand: 'mdi mdi-download',
+    iconRefreshDatasetCommand: 'mdi mdi-sync',
+    iconToggleDarkModeCommand: 'mdi mdi-brightness-4 mdi mdi-brightness-4',
+    iconToggleFilterCommand: 'mdi mdi-flip-vertical',
+    iconTogglePreHeaderCommand: 'mdi mdi-flip-vertical',
+    menuWidth: 16,
+    resizeOnShowHeaderRow: true,
+    headerColumnValueExtractor: pickerHeaderColumnValueExtractor,
+  },
+  headerMenu: {
+    autoAlign: true,
+    autoAlignOffset: 12,
+    minWidth: 140,
+    iconClearFilterCommand: 'mdi mdi-filter-remove-outline',
+    iconClearSortCommand: 'mdi mdi-sort-variant-off',
+    iconFreezeColumns: 'mdi mdi-pin-outline',
+    iconSortAscCommand: 'mdi mdi-sort-ascending',
+    iconSortDescCommand: 'mdi mdi-sort-descending',
+    iconColumnHideCommand: 'mdi mdi-close',
+    iconColumnResizeByContentCommand: 'mdi mdi-arrow-expand-horizontal',
+    hideColumnResizeByContentCommand: false,
+    hideColumnHideCommand: false,
+    hideClearFilterCommand: false,
+    hideClearSortCommand: false,
+    hideFreezeColumnsCommand: true, // opt-in command
+    hideSortCommands: false,
+  },
+  multiColumnSort: true,
+  numberedMultiColumnSort: true,
+  tristateMultiColumnSort: false,
+  sortColNumberInSeparateSpan: true,
+  suppressActiveCellChangeOnEdit: false,
+  pagination: {
+    pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100],
+    pageSize: 25,
+    totalItems: 0,
+  },
+  rowDetailView: {
+    collapseAllOnSort: true,
+    cssClass: 'detail-view-toggle',
+    panelRows: 1,
+    keyPrefix: '__',
+    useRowClick: false,
+    useSimpleViewportCalc: true,
+    saveDetailViewOnScroll: false,
+  } as RowDetailView,
+  headerRowHeight: 35,
+  rowHeight: 35,
+  topPanelHeight: 30,
+  preHeaderPanelWidth: '100%', // mostly useful for Draggable Grouping dropzone to take full width
+  translationNamespaceSeparator: ':',
+  resetFilterSearchValueAfterOnBeforeCancellation: true,
+  resizeByContentOnlyOnFirstLoad: true,
+  resizeByContentOptions: {
+    alwaysRecalculateColumnWidth: false,
+    cellCharWidthInPx: 7.8,
+    cellPaddingWidthInPx: 14,
+    defaultRatioForStringType: 0.88,
+    formatterPaddingWidthInPx: 0,
+    maxItemToInspectCellContentWidth: 1000,
+    maxItemToInspectSingleColumnWidthByContent: 5000,
+    widthToRemoveFromExceededWidthReadjustment: 50,
+  },
+  treeDataOptions: {
+    exportIndentMarginLeft: 5,
+    exportIndentationLeadingChar: '͏͏͏͏͏͏͏͏͏·',
+  } as unknown as TreeDataOption,
+};
+
+/**
+ * Value Extractor for both ColumnPicker & GridMenu Picker
+ * when using Column Header Grouping, we'll prefix the column group title
+ * else we'll simply return the column name title
+ */
+function pickerHeaderColumnValueExtractor(column: Column, gridOptions?: GridOption) {
+  let colName = column?.columnPickerLabel ?? column?.name ?? '';
+  if (colName instanceof HTMLElement || colName instanceof DocumentFragment) {
+    colName = colName.textContent || '';
+  }
+  const headerGroup = column?.columnGroup || '';
+  const columnGroupSeparator = gridOptions?.columnGroupSeparator ?? ' - ';
+  if (headerGroup) {
+    return headerGroup + columnGroupSeparator + colName;
+  }
+  return colName;
+}

package/src/index.ts

@@ -0,0 +1,34 @@
+import { Aggregators, type Column, type Editors, Enums, type Filters, Formatters, GroupTotalFormatters, SortComparers, Utilities } from '@slickgrid-universal/common';
+import { BindingService } from '@slickgrid-universal/binding';
+import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
+export * from '@slickgrid-universal/common';
+
+import SlickgridVue from './components/SlickgridVue.vue';
+import { SlickRowDetailView } from './extensions/slickRowDetailView.js';
+import type { GridOption, RowDetailView, SlickgridVueInstance } from './models/index.js';
+import type { SlickgridConfig } from './slickgrid-config.js';
+
+// expose all public classes
+export type { SlickgridVueProps } from './components/slickgridVueProps.interface.js';
+export { disposeAllSubscriptions, TranslaterService } from './services/index.js';
+
+export {
+  Aggregators,
+  type Column,
+  type Editors,
+  type Filters,
+  Enums,
+  EventPubSubService,
+  Formatters,
+  type GridOption,
+  GroupTotalFormatters,
+  type RowDetailView,
+  SlickgridConfig,
+  SlickgridVue,
+  type SlickgridVueInstance,
+  SlickRowDetailView,
+  SortComparers,
+  Utilities,
+};
+
+export { BindingService };

package/src/models/gridOption.interface.ts

@@ -0,0 +1,16 @@
+import type { BasePaginationModel, Column, GridOption as UniversalGridOption } from '@slickgrid-universal/common';
+import type * as i18next from 'i18next';
+import type { DefineComponent } from 'vue';
+
+import type { RowDetailView } from './rowDetailView.interface.js';
+
+export interface GridOption<C extends Column = Column> extends UniversalGridOption<C> {
+  /** External Custom Pagination Component that can be provided by the user */
+  customPaginationComponent?: DefineComponent<any, BasePaginationModel, any>;
+
+  /** I18N translation service instance */
+  i18n?: i18next.i18n;
+
+  /** Row Detail View Plugin options & events (columnId, cssClass, toolTip, width) */
+  rowDetailView?: RowDetailView;
+}

package/src/models/index.ts

@@ -0,0 +1,5 @@
+export type * from './gridOption.interface.js';
+export type * from './rowDetailView.interface.js';
+export type * from './viewModelBindableData.interface.js';
+export type * from './viewModelBindableInputData.interface.js';
+export type * from './vueGridInstance.interface.js';

package/src/models/rowDetailView.interface.ts

@@ -0,0 +1,16 @@
+import type { RowDetailView as UniversalRowDetailView } from '@slickgrid-universal/common';
+import type { DefineComponent } from 'vue';
+
+export interface RowDetailView extends UniversalRowDetailView {
+  /**
+   * Optionally pass your Parent Component reference to your Child Component (row detail component).
+   * note:: If anyone finds a better way of passing the parent to the row detail extension, please reach out and/or create a PR
+   */
+  parent?: any;
+
+  /** View Model of the preload template which shows after opening row detail & before row detail data shows up */
+  preloadComponent?: DefineComponent<any, any, any>;
+
+  /** View Model template that will be loaded once the async function finishes */
+  viewComponent?: DefineComponent<any, any, any, any, any, any>;
+}

package/src/models/viewModelBindableData.interface.ts

@@ -0,0 +1,10 @@
+import type { SlickDataView, SlickGrid } from '@slickgrid-universal/common';
+
+export interface ViewModelBindableData {
+  template: string;
+  model: any;
+  addon: any;
+  grid: SlickGrid;
+  dataView: SlickDataView;
+  parent?: any;
+}

package/src/models/viewModelBindableInputData.interface.ts

@@ -0,0 +1,9 @@
+import type { SlickDataView, SlickGrid } from '@slickgrid-universal/common';
+
+export interface ViewModelBindableInputData {
+  model: any;
+  addon: any;
+  grid: SlickGrid;
+  dataView: SlickDataView;
+  parent?: any;
+}

package/src/models/vueGridInstance.interface.ts

@@ -0,0 +1,77 @@
+import type {
+  BackendService,
+  BasePaginationComponent,
+  ExtensionService,
+  FilterService,
+  GridEventService,
+  GridService,
+  GridStateService,
+  HeaderGroupingService,
+  PaginationService,
+  ResizerService,
+  SlickDataView,
+  SlickGrid,
+  SortService,
+  TreeDataService,
+} from '@slickgrid-universal/common';
+import type { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
+
+export interface SlickgridVueInstance {
+  element: HTMLDivElement;
+
+  /** Slick DataView object */
+  dataView: SlickDataView;
+
+  /** Slick Grid object */
+  slickGrid: SlickGrid;
+
+  // --
+  // Methods
+  /** Dispose of the grid and optionally empty the DOM element grid container as well */
+  dispose: (emptyDomElementContainer?: boolean) => void;
+
+  // --
+  // Services
+
+  /** Backend Service, when available */
+  backendService?: BackendService;
+
+  /** EventPubSub Service instance that is used internal by the lib and could be used externally to subscribe to Aurelia-Slickgrid events */
+  eventPubSubService?: EventPubSubService;
+
+  /** Extension (Plugins & Controls) Service */
+  extensionService: ExtensionService;
+
+  /** Filter Service */
+  filterService: FilterService;
+
+  /** Grid Service (grid extra functionalities) */
+  gridService: GridService;
+
+  /** Grid Events Service */
+  gridEventService: GridEventService;
+
+  /** Grid State Service */
+  gridStateService: GridStateService;
+
+  /** @deprecated @use `headerGroupingService` */
+  groupingService: HeaderGroupingService;
+
+  /** Grouping (and colspan) Service */
+  headerGroupingService: HeaderGroupingService;
+
+  /** Pagination Component */
+  paginationComponent?: BasePaginationComponent;
+
+  /** Pagination Service (allows you to programmatically go to first/last page, etc...) */
+  paginationService?: PaginationService;
+
+  /** Resizer Service (including auto-resize) */
+  resizerService: ResizerService;
+
+  /** Sort Service */
+  sortService: SortService;
+
+  /** Tree Data View Service */
+  treeDataService: TreeDataService;
+}

package/src/services/container.service.ts

@@ -0,0 +1,13 @@
+import type { ContainerService as UniversalContainerService } from '@slickgrid-universal/common';
+
+export class ContainerService implements UniversalContainerService {
+  private readonly container: { [key: string]: any } = {};
+
+  get<T = any>(key: string): T | null {
+    return this.container[key];
+  }
+
+  registerInstance(key: string, instance: any) {
+    this.container[key] = instance;
+  }
+}

package/src/services/index.ts

@@ -0,0 +1,3 @@
+export * from './container.service.js';
+export * from './translater.service.js';
+export * from './utilities.js';

package/src/services/translater.service.ts

@@ -0,0 +1,41 @@
+import type { TranslaterService as UniversalTranslateService } from '@slickgrid-universal/common';
+import { type i18n } from 'i18next';
+import { useTranslation } from 'i18next-vue';
+
+/**
+ * This is a Translate Service Wrapper for Slickgrid-Universal monorepo lib to work properly,
+ * it must implement Slickgrid-Universal TranslaterService interface to work properly
+ */
+export class TranslaterService implements UniversalTranslateService {
+  public i18n: i18n;
+
+  constructor() {
+    this.i18n = useTranslation().i18next;
+  }
+
+  /**
+   * Method to return the current language used by the App
+   * @return {string} current language
+   */
+  getCurrentLanguage(): string {
+    return this.i18n.language;
+  }
+
+  /**
+   * Method to set the language to use in the App and Translate Service
+   * @param {string} language
+   * @return {Promise} output
+   */
+  async use(newLang: string): Promise<any> {
+    return this.i18n.changeLanguage(newLang);
+  }
+
+  /**
+   * Method which receives a translation key and returns the translated value assigned to that key
+   * @param {string} translation key
+   * @return {string} translated value
+   */
+  translate(translationKey: string): string {
+    return this.i18n.t(translationKey);
+  }
+}

package/src/services/utilities.ts

@@ -0,0 +1,18 @@
+import type { EventSubscription } from '@slickgrid-universal/common';
+
+/**
+ * Loop through and dispose of all subscriptions when they are disposable
+ * @param subscriptions
+ * @return empty array
+ */
+export function disposeAllSubscriptions(subscriptions: Array<EventSubscription>): Array<EventSubscription> {
+  if (Array.isArray(subscriptions)) {
+    while (subscriptions.length > 0) {
+      const subscription = subscriptions.pop() as EventSubscription;
+      if ((subscription as EventSubscription)?.unsubscribe) {
+        (subscription as EventSubscription).unsubscribe!();
+      }
+    }
+  }
+  return subscriptions;
+}

package/src/services/vueUtils.ts

@@ -0,0 +1,26 @@
+import { createVNode, render, type VNode, type VNodeProps } from 'vue';
+
+type Data = Record<string, unknown>;
+interface MountOptions {
+  props: (Data & VNodeProps) | null;
+  children: unknown;
+  element: HTMLElement | null;
+  app: any;
+}
+
+export function mount(component: any, { props, children, element, app } = {} as Partial<MountOptions>) {
+  let el = element;
+
+  let vNode: VNode | null = createVNode(component, props, children);
+  if (app && app._context) vNode.appContext = app._context;
+  if (el) render(vNode, el);
+  else if (typeof document !== 'undefined') render(vNode, (el = document.createElement('div')));
+
+  const destroy = () => {
+    if (el) render(null, el);
+    el = null;
+    vNode = null;
+  };
+
+  return { vNode, destroy, el };
+}

package/src/slickgrid-config.ts

@@ -0,0 +1,10 @@
+import { GlobalGridOptions } from './global-grid-options.js';
+import type { GridOption } from './models/gridOption.interface.js';
+
+export class SlickgridConfig {
+  options: Partial<GridOption>;
+
+  constructor() {
+    this.options = GlobalGridOptions;
+  }
+}

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />