@revolist/revogrid 4.0.2-next → 4.0.2

package/dist/collection/serve/controller.js

@@ -0,0 +1,233 @@
+import { generateFakeDataObject } from './data.js';
+
+window.eventsPrevented = {};
+window.showRowHeaders = function (isShow) {
+  const grid = document.querySelector('revo-grid');
+  grid.rowHeaders = isShow;
+};
+window.showColGrouping = function (isShow) {
+  setData({
+    groupedHeader: isShow,
+  });
+};
+window.setRowSize = function (s) {
+  const grid = document.querySelector('revo-grid');
+  grid.rowSize = s;
+};
+window.setEdit = function (rgRow, prop) {
+  const grid = document.querySelector('revo-grid');
+  grid.setCellEdit(rgRow, prop);
+};
+window.scrollToCol = function (x = 30) {
+  const grid = document.querySelector('revo-grid');
+  grid.scrollToColumnProp(x);
+};
+window.clearGrouping = function () {
+  const grid = document.querySelector('revo-grid');
+  grid.grouping = {};
+};
+
+// Row group
+window.setGrouping = function (
+  props = [],
+  expandedAll = false,
+) {
+  const grid = document.querySelector('revo-grid');
+  grid.grouping = {
+    props,
+    expandedAll,
+    groupLabelTemplate: (createElement, { name, depth }) => createElement('span', null, ` ${props[depth]}: ${name}`),
+  };
+};
+window.setTrimmed = function (rows = []) {
+  const grid = document.querySelector('revo-grid');
+  grid.trimmedRows = rows.reduce((r, v) => {
+    r[v] = true;
+    return r;
+  }, {});
+};
+
+window.exportGrid = function (filename = 'new file') {
+  const grid = document.querySelector('revo-grid');
+  grid.getPlugins().then(plugins => {
+    plugins.forEach(p => {
+      if (p.exportFile) {
+        const exportPlugin = p;
+        exportPlugin.exportFile({ filename });
+      }
+    });
+  });
+};
+
+let defaultData = {
+  rows: 0,
+  cols: 0,
+  topPinned: [],
+  bottomPinned: [],
+  colPinEnd: [],
+  colPinStart: [],
+  // groupedHeader: true,
+  // order: 5
+};
+window.setData = function (config = {}) {
+  defaultData = { ...defaultData, ...config };
+  const $loader = document.querySelector('.loader');
+  $loader.style.display = 'block';
+  setTimeout(() => {
+    const grid = document.querySelector('revo-grid');
+    const data = generateFakeDataObject(defaultData);
+
+    grid.columns = data.headers;
+    grid.source = data.rows;
+
+    grid.pinnedTopSource = data.pinnedTopRows;
+    grid.pinnedBottomSource = data.pinnedBottomRows;
+    $loader.style.display = 'none';
+  }, 0);
+};
+window.setPinned = function (type, checked) {
+  const val = [];
+  if (checked) {
+    switch (type) {
+      case 'colPinStart':
+        val.push(0);
+        break;
+      case 'colPinEnd':
+        val.push(1);
+        break;
+      case 'topPinned':
+        val.push(0);
+        break;
+      case 'bottomPinned':
+        val.push(1);
+        break;
+    }
+  }
+  setData({
+    [type]: val,
+  });
+};
+
+// prevent event debug
+window.preventEvent = function (name, checked) {
+  eventsPrevented[name] = checked;
+};
+let keys = 2;
+let attrs = {};
+window.toggleVisibility = function (checked) {
+  if (!checked) {
+    const grid = document.querySelector('revo-grid');
+    attrs = {};
+    // Get all attributes from the source element
+    const attributes = grid.attributes;
+
+    // Loop through the attributes and set them on the target element
+    for (let i = 0; i < attributes.length; i++) {
+      const attribute = attributes[i];
+      attrs[attribute.name] = attribute.value;
+    }
+    grid.remove();
+  } else {
+    const holder = document.querySelector('.grid-holder');
+    const grid = document.createElement('revo-grid', { is: 'revo-grid' });
+    // Recover attributes
+    Object.keys(attrs).forEach(key => {
+      grid.setAttribute(key, attrs[key]);
+    });
+    grid.setAttribute('key', keys++);
+    holder.appendChild(grid);
+    setData();
+  }
+};
+
+let timerUpdateInterval;
+window.timerUpdate = function (checked, inteval = 3) {
+  clearInterval(timerUpdateInterval);
+  if (checked) {
+    timerUpdateInterval = setInterval(() => {
+      const grid = document.querySelector('revo-grid');
+      grid.source = [...grid.source];
+    }, inteval * 1000);
+  }
+};
+
+window.theme = function (theme) {
+  const grid = document.querySelector('revo-grid');
+  if (theme && theme.indexOf('dark') > -1) {
+    document.documentElement.setAttribute('data-bs-theme', 'dark');
+  } else {
+    document.documentElement.removeAttribute('data-bs-theme');
+  }
+  grid.theme = theme || 'default';
+};
+
+window.onload = onLoad;
+
+function onLoad() {
+  const grid = document.querySelector('revo-grid');
+
+  grid.readonly = false;
+  grid.range = true;
+  grid.resize = true;
+
+  const filterFunc = (cellValue, extraValue) => {
+    if (!cellValue) {
+      return false;
+    }
+    if (typeof cellValue !== 'string') {
+      cellValue = JSON.stringify(cellValue);
+    }
+    return cellValue === extraValue;
+  };
+  // if you want extra input field for @extraValue
+  filterFunc.extra = 'input';
+
+  const filterConfig = {
+    include: ['newEqual'],
+    customFilters: {
+      newEqual: {
+        columnFilterType: 'myFilterType', // column filter type id
+        name: 'myEqual',
+        func: filterFunc,
+      },
+    },
+    disableDynamicFiltering: true,
+  };
+
+  grid.filter = filterConfig;
+
+  grid.filter = true;
+  grid.exporting = true;
+  grid.rowHeaders = true;
+  grid.rowDefinitions = [
+    {
+      type: 'rgRow',
+      index: 1,
+      size: 100,
+    },
+  ];
+  grid.rowClass = 'row-style';
+  // grid.stretch = true;
+  /* 
+  grid.autoSizeColumn = {
+    mode: 'autoSizeAll',
+  };*/
+  // default
+  setData({ rows: 1000, cols: 1000 });
+
+  // events testing
+  // 'beforerange', 'setRange', 'beforefocuslost', 'beforecellfocus', 'afterfocus', 'beforeedit', 'aftercolumnresize'
+  const events = [];
+  events.forEach(e => {
+    grid.addEventListener(e, $e => {
+      if (window.eventsPrevented[e]) {
+        $e.preventDefault();
+      }
+      console.log(
+        `%c${e}`,
+        'background: #50d260; color: #fff; border-radius: 3px; padding: 2px 5px;',
+        $e,
+      );
+    });
+  });
+}

package/dist/collection/{utilsExternal/generate-data.js → serve/data.js}

@@ -12,9 +12,14 @@ function generateHeader(index) {
   return label.toLowerCase();
 }
 
-function naturalSort(prop,a,b) {
-
-  return a[prop].localeCompare(b[prop],"en",{numeric:true})
+/**
+ * Custom sorting apply
+ */
+function naturalSort(prop, a, b) {
+  // check if it's grouping
+  const aValue = a['__rvgr-value'] || a[prop];
+  const bValue = b['__rvgr-value'] || b[prop];
+  return aValue.localeCompare(bValue, 'en', { numeric: true });
 }
 
 const DEFAULT_CONFIG = {
@@ -46,8 +51,9 @@ export function generateFakeDataObject(config = {}) {
     ...config,
   };
 
-  const result = [];
+  let result = [];
   const columns = {};
+  // all cells
   const all = cols * rows;
   for (let j = 0; j < all; j++) {
     let rgCol = j % cols;
@@ -55,6 +61,12 @@ export function generateFakeDataObject(config = {}) {
     if (!result[rgRow]) {
       result[rgRow] = {};
 
+      if (rgRow === 2) {
+        // highlighted
+        result[rgRow]['row-style'] = 'highlighted-row';
+      }
+
+      // apply different key for grouping
       if (rgRow % 2) {
         result[rgRow].key = 'a';
       } else {
@@ -66,8 +78,20 @@ export function generateFakeDataObject(config = {}) {
         name: generateHeader(rgCol),
         prop: rgCol,
         sortable: true,
-        size: 200,
-        cellCompare: (rgCol % 2) == 0 ? naturalSort : undefined
+        size: 100,
+        // custom sorting
+        cellCompare: rgCol % 2 == 0 ? naturalSort : undefined,
+
+        // custom filter
+        // filter: 'myFilterType',
+
+        cellTemplate: (h, v) => {
+          // delay
+          // for(let i = 0; i < 10000000; i++) {
+          //   // do nothing, this is just to slow down to test performance
+          // }
+          return v.model[v.prop];
+        }
       };
 
       // apply config
@@ -84,43 +108,60 @@ export function generateFakeDataObject(config = {}) {
     if (rgCol === 1) {
       result[rgRow][rgCol] = 'A';
     }
-   // apply config
+    // apply config
     if (rgCol === rowDrag) {
       columns[rgCol].rowDrag = true;
     }
     // apply config
     if (rgCol === order) {
-      columns[rgCol].order = 'asc';
+      columns[rgCol].order = 'desc';
     }
   }
-  // apply config
-  const pinnedTopRows = topPinned.map(i => ({ ...result[i] }));
-  // apply config
-  const pinnedBottomRows = bottomPinned.map(i => ({ ...result[i] }));
+  const pinnedTopRows = [];
+  const pinnedBottomRows = [];
+  if (topPinned?.length || bottomPinned?.length) {
+    result = result.filter((row, i) => {
+      if (topPinned.indexOf(i) > -1) {
+        pinnedTopRows.push({ ...row });
+        return false;
+      }
+      if (bottomPinned.indexOf(i) > -1) {
+        pinnedBottomRows.push({ ...row });
+        return false;
+      }
+      return true;
+    });
+  }
   let headers = Object.keys(columns).map(k => columns[k]);
 
   if (groupedHeader) {
     const grouped = headers.splice(1, 4);
-      const grouped2 = grouped.splice(0, 2);
-      grouped.push({
-        name: 'Grouped2',
-        children: grouped2,
-      });
-      headers.splice(
-        6,
-        0,
-        ...[
-          {
-            name: 'Grouped',
-            children: grouped,
-          },
-        ],
-      );
-      const grouped4 = headers.splice(1, 3);
-      headers.splice(1, 0, ...[{
+    const grouped2 = grouped.splice(0, 2);
+    grouped.push({
+      name: 'Grouped2',
+      children: grouped2,
+    });
+    headers.splice(
+      6,
+      0,
+      ...[
+        {
+          name: 'Grouped',
+          children: grouped,
+        },
+      ],
+    );
+    const grouped4 = headers.splice(1, 3);
+    headers.splice(
+      1,
+      0,
+      ...[
+        {
           name: 'Grouped3',
-          children: grouped4
-      }]);
+          children: grouped4,
+        },
+      ],
+    );
   }
   return {
     rows: result,
@@ -129,4 +170,3 @@ export function generateFakeDataObject(config = {}) {
     headers,
   };
 }
-

package/dist/collection/services/cell.helpers.js

@@ -1,7 +1,11 @@
-import { DATA_COL, DATA_ROW } from '../utils/consts';
+/*!
+ * Built by Revolist OU ❤️
+ */
+import { DATA_COL, DATA_ROW } from "../utils/consts";
 export function getCell(cell) {
-  return {
-    x: parseInt(cell.getAttribute(DATA_COL), 10),
-    y: parseInt(cell.getAttribute(DATA_ROW), 10),
-  };
+    return {
+        x: parseInt(cell.getAttribute(DATA_COL), 10),
+        y: parseInt(cell.getAttribute(DATA_ROW), 10),
+    };
 }
+//# sourceMappingURL=cell.helpers.js.map

package/dist/collection/services/cell.helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell.helpers.js","sourceRoot":"","sources":["../../src/services/cell.helpers.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,UAAU,OAAO,CAAC,IAAiB;IACvC,OAAO;QACL,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;QAC5C,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;KAC7C,CAAC;AACJ,CAAC","sourcesContent":["import { Cell } from '..';\nimport { DATA_COL, DATA_ROW } from '../utils/consts';\n\nexport function getCell(cell: HTMLElement): Cell {\n  return {\n    x: parseInt(cell.getAttribute(DATA_COL), 10),\n    y: parseInt(cell.getAttribute(DATA_ROW), 10),\n  };\n}\n"]}