quasar-ui-sellmate-ui-kit 3.9.5 → 3.9.7

package/src/composables/table/use-resizable-tree.js

@@ -0,0 +1,96 @@
+function createDiv(val) {
+  const div = document.createElement('div');
+  div.classList.add(`resizable-${val}`);
+  div.style.top = '10px';
+  if (val === 'right') div.style.right = 0;
+  if (val === 'left') div.style.left = 0;
+  div.style.width = '4px';
+  div.style.position = 'absolute';
+  div.style.cursor = 'col-resize';
+  div.style.backgroundColor = 'none';
+  div.style.border = '1px solid #CCCCCC';
+  div.style.borderTop = 'none';
+  div.style.borderBottom = 'none';
+  div.style.zIndex = 2;
+  div.style.userSelect = 'none';
+  div.style.height = '16px';
+  return div;
+}
+
+function setTableTreeNode(tableEl, colIndex, newWidth, columns, resizedWidths) {
+  const allTables = tableEl.querySelectorAll('table');
+  
+  allTables.forEach(table => {
+    const rows = table.querySelectorAll('tr');
+    rows.forEach(row => {
+      const cols = row.children;
+      if (cols[colIndex]) {
+
+        const minWidth = colIndex === 0 ? columns[colIndex].width : 0;
+        const resultWidth = Math.max(newWidth, minWidth);
+        cols[colIndex].style.minWidth = `${resultWidth}px`;
+        cols[colIndex].style.width = `${resultWidth}px`;
+
+        resizedWidths[colIndex] = resultWidth;
+      }
+    });
+  });
+}
+
+function setListeners(div, position, colIndex, tableEl, resizedWidths, columns) {
+  let curCol;
+  let pageX;
+  let curColWidth;
+
+  div.addEventListener('mousedown', (e) => {
+    curCol = e.target.parentElement;
+    pageX = e.pageX;
+    curColWidth = curCol.offsetWidth;
+  }, { passive: true });
+
+  document.addEventListener('mousemove', (e) => {
+    if (curCol) {
+      const diffX = e.pageX - pageX;
+      let newWidth = position === 'right' ? curColWidth + diffX : curColWidth - diffX;
+
+      const minWidth = colIndex === 0 ? columns[colIndex].width : 0;
+
+      newWidth = Math.max(newWidth, minWidth);
+      curCol.style.minWidth = `${newWidth}px`;
+      curCol.style.width = `${newWidth}px`;
+
+      resizedWidths[colIndex] = newWidth;
+      setTableTreeNode(tableEl, colIndex, newWidth, columns, resizedWidths);
+    }
+  }, { passive: true });
+
+  document.addEventListener('mouseup', () => {
+    curCol = null;
+    pageX = null;
+    curColWidth = null;
+  }, { passive: true });
+}
+
+function addResizable(tableEl, columns) {
+  const tableElement = tableEl.getElementsByTagName('table')[0];
+  const firstRow = tableElement.getElementsByTagName('tr')[0];
+  const cols = firstRow ? firstRow.children : [];
+  const resizedWidths = {};
+
+  for (let i = 0; i < cols.length - 1; i += 1) {
+    const div = createDiv('right');
+    cols[i].appendChild(div);
+    cols[i].style.position = 'sticky';
+    setListeners(div, 'right', i, tableEl, resizedWidths, columns);
+  }
+
+  return resizedWidths;
+}
+
+export function useResizableTree() {
+  return {
+    addResizable
+  };
+}
+
+

package/src/vue-plugin.js

@@ -41,6 +41,7 @@ import SYearMonthPicker from './components/SYearMonthPicker.vue';
 import Directive from './directives/Directive';
 import SBadge from './components/SBadge.vue';
 import STag from './components/STag.vue';
+import STableTree from './components/STableTree.vue'
 
 const version = __UI_VERSION__;
 
@@ -75,6 +76,7 @@ function install(app) {
   app.component('s-route-tab', SRouteTab);
   app.component('s-tabs', STabs);
   app.component('s-table', STable);
+  app.component('s-table-tree', STableTree)
   app.component('s-time-picker', STimePicker);
   app.component('s-tag', STag);
   app.component('s-date-time-picker', SDateTimePicker);