@kubex/zinc 1.0.6 → 1.0.8

package/src/components/data-table/data-table.component.ts

@@ -2,7 +2,7 @@ import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, nothing, type TemplateResult, unsafeCSS} from 'lit';
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
-import {property} from 'lit/decorators.js';
+import {property, query} from 'lit/decorators.js';
 import {ref} from "lit/directives/ref.js";
 import {Task} from "@lit/task";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
@@ -192,6 +192,12 @@ export default class ZnDataTable extends ZincElement {
 
   @property({attribute: "no-initial-load", type: Boolean}) noInitialLoad: boolean = false;
 
+  @property({attribute: 'group-by'}) groupBy = '';
+
+  @property() groups = '';
+
+  @query('#select-all-rows') selectAllButton: ZnButton;
+
   // Data Table Properties
   private _initialLoad = true;
   private _lastTableContent: TemplateResult = html``;
@@ -226,6 +232,11 @@ export default class ZnDataTable extends ZincElement {
         return {rows: [], page: 1, perPage: this.itemsPerPage, total: 0};
       }
 
+      if (this.groupBy) {
+        // we want to load all the data possible so we can group and show multiple tables
+        this.itemsPerPage = 1000;
+      }
+
       const requestData: DataRequest = {
         page: this.page,
         perPage: this.itemsPerPage,
@@ -278,8 +289,6 @@ export default class ZnDataTable extends ZincElement {
 
   requestParams: Record<string, any> = {};
 
-  builtinRequestParams: Record<string, any> = {};
-
   refresh() {
     // Allow manual refresh to trigger the first data load when no-initial-load is set
     this._initialLoad = false;
@@ -392,13 +401,58 @@ export default class ZnDataTable extends ZincElement {
       return this.emptyState();
     }
 
+    this._rows = this.getRows(data);
+
+    if (this.groupBy) {
+      // we need to group the rows by the group column
+      const groupedRows: Record<string, Row[]> = {};
+
+      // add groups to the current rows
+      const toAdd = this.groups.split(',').map(g => g.trim()).filter(g => g.length > 0);
+      toAdd.forEach((group) => {
+        if (!groupedRows[this.humanize(group)]) {
+          groupedRows[this.humanize(group)] = [];
+        }
+      });
+
+      this._rows.forEach((row: Row) => {
+        const groupCell = row.cells.find((cell: Cell) => cell.column === this.groupBy);
+        const groupValue = groupCell ? groupCell.text : 'Ungrouped';
+        if (!groupedRows[this.humanize(groupValue)] && (!this.groups || groupValue === 'Ungrouped')) {
+          groupedRows[this.humanize(groupValue)] = [];
+        }
+
+        if (groupedRows[this.humanize(groupValue)]) {
+          groupedRows[this.humanize(groupValue)].push(row);
+        }
+      });
+
+      // render a table for each group
+      return html`
+        <zn-sp flush>
+          ${Object.keys(groupedRows).map((groupKey) => html`
+            <div class="table-group">
+              <h3 class="table-group__title">${groupKey === "Ungrouped" ? "" : groupKey}</h3>
+              ${this.renderTableData(groupedRows[groupKey])}
+            </div>`
+          )}
+        </zn-sp>
+      `;
+    }
+
+
+    return this.renderTableData(this._rows);
+  }
+
+  public humanize(str: string) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
+  public renderTableData(data: any) {
     const filteredHeaders = Object.values(this.headers).filter((header) => {
       return !Object.values(this.hiddenColumns).includes(header.key);
     });
 
-    this._rows = this.getRows(data);
-
-    const hasSelectedRows = this.selectedRows.length > 0;
     this.rowHasActions = this._rows.some((row: Row) => row.actions && row.actions.length > 0);
 
     // To make sure the cells are in the same order as the headers, we need to map them cell.col to heading.key
@@ -423,27 +477,18 @@ export default class ZnDataTable extends ZincElement {
         <table class="${classMap({
           'table': true,
           'table--standalone': this.standalone,
-          'with-hover': !this.unsortable,
-          'table--with-checkboxes': !this.hideCheckboxes,
+          'with-hover': !this.unsortable && !this.hideCheckboxes,
         })}">
           <thead>
           <tr>
-            ${this.hideCheckboxes || !hasSelectedRows ? html`` : html`
-              <th>
-                <div><input type="checkbox" @change="${this.selectAll}"></div>
-              </th>`}
             ${filteredHeaders.map((header: HeaderConfig) => this.renderCellHeader(header))}
             ${this.rowHasActions ? html`
               <th></th>` : html``}
           </tr>
           </thead>
           <tbody>
-          ${this._rows.map((row: Row) => html`
-            <tr>
-              ${this.hideCheckboxes ? html`` : html`
-                <td class="${classMap({'hidden': !hasSelectedRows})}">
-                  <div><input type="checkbox" @change="${this.selectRow}"></div>
-                </td>`}
+          ${data.map((row: Row) => html`
+            <tr class="${classMap({'table__row--selected': this.isRowSelected(row)})}">
               ${row.cells.map((value: Cell, index: number) => this.renderCellBody(index, value))}
               ${this.rowHasActions ? this.renderActions(row) : null}
             </tr>`)}
@@ -490,7 +535,7 @@ export default class ZnDataTable extends ZincElement {
   }
 
   getRowsSelected() {
-    if (this.hideCheckboxes || this.selectedRows.length <= 0) return null;
+    if (this.selectedRows.length <= 0) return null;
 
     return html`
       <p>${this.numberOfRowsSelected} of ${this._rows.length} rows selected</p>`
@@ -559,10 +604,37 @@ export default class ZnDataTable extends ZincElement {
   getActions() {
     const actions = [];
 
+    const hasSlots = this.hasSlotController.test(ActionSlots.delete.valueOf())
+      || this.hasSlotController.test(ActionSlots.modify.valueOf())
+      || this.hasSlotController.test(ActionSlots.create.valueOf());
+
+    if(!hasSlots) {
+      return [];
+    }
+
+    if (!this.hideCheckboxes && this._rows.length > 0) {
+      actions.push(html`
+        <zn-button @click="${this.selectAll}"
+                   id="select-all-rows"
+                   color="transparent"
+                   size="x-small"
+                   icon="indeterminate_check_box"
+                   icon-size="22"
+                   icon-color="primary"
+                   tooltip="Select All"
+                   slot="trigger">
+        </zn-button>`);
+    }
+
     if (this.selectedRows.length > 0) {
       actions.push(html`
-        <zn-button @click="${this.clearSelectedRows}" size="small" outline>
-          Clear Selection
+        <zn-button @click="${this.clearSelectedRows}"
+                   color="transparent"
+                   size="x-small"
+                   icon="disabled_by_default"
+                   icon-size="22"
+                   tooltip="Clear Selection"
+                   slot="trigger">
         </zn-button>`);
 
       if (this.hasSlotController.test(ActionSlots.delete.valueOf())) {
@@ -620,21 +692,25 @@ export default class ZnDataTable extends ZincElement {
   }
 
   selectAll(event: Event) {
-    const checkbox = event.target as HTMLInputElement;
-    const checked = checkbox.checked;
+    const button = event.target as ZnButton;
+    if (button.disabled) return;
 
-    // go through all the checkboxes and check them
-    for (const row of this.renderRoot.querySelectorAll('tbody input[type="checkbox"]')) {
-      (row as HTMLInputElement).checked = checked;
+    if (this.numberOfRowsSelected === this._rows.length) {
+      this.clearSelectedRows(event);
+      return;
     }
 
-    this.selectedRows = checked ? this._rows : [];
+    this.selectedRows = this._rows;
     this.numberOfRowsSelected = this.selectedRows.length;
     this.updateKeys();
     this.requestUpdate();
   }
 
   selectRow(e: Event) {
+    if (this.hideCheckboxes) {
+      return;
+    }
+
     if (!(e.target && (e.target instanceof Element))) {
       return;
     }
@@ -655,17 +731,19 @@ export default class ZnDataTable extends ZincElement {
       return;
     }
 
-    const checkbox: HTMLInputElement | null = parent.querySelector('input[type="checkbox"]');
-    if (checkbox) {
-      const isCheckboxTarget = target instanceof HTMLInputElement && target.type === 'checkbox';
-      if (!isCheckboxTarget) {
-        checkbox.checked = !checkbox.checked;
-      }
-    }
+    const rows = Array.from(this.renderRoot.querySelectorAll('tbody tr'));
+    const index = rows.indexOf(parent as HTMLTableRowElement);
+    if (index === -1) return;
 
-    this.selectedRows = this._rows.filter((_, index) => {
-      return (this.renderRoot.querySelectorAll('tbody input[type="checkbox"]')[index] as HTMLInputElement)?.checked;
-    });
+    const row = this._rows[index] as Row;
+    if (!row) return;
+
+    const alreadySelected = this.selectedRows.some((r: Row) => r.id === row.id);
+    if (alreadySelected) {
+      this.selectedRows = this.selectedRows.filter((r: Row) => r.id !== row.id);
+    } else {
+      this.selectedRows = [...(this.selectedRows as Row[]), row];
+    }
 
     this.numberOfRowsSelected = this.selectedRows.length;
     this.updateKeys();
@@ -676,13 +754,9 @@ export default class ZnDataTable extends ZincElement {
     const button = event.target as ZnButton;
     if (button.disabled) return;
 
-    (this.renderRoot.querySelectorAll('thead input[type="checkbox"]')[0] as HTMLInputElement).checked = false;
-    for (const row of this.renderRoot.querySelectorAll('tbody input[type="checkbox"]')) {
-      (row as HTMLInputElement).checked = false;
-    }
-
     this.selectedRows = [];
     this.numberOfRowsSelected = 0;
+    this.updateKeys();
     this.requestUpdate();
   }
 
@@ -842,7 +916,7 @@ export default class ZnDataTable extends ZincElement {
 
     return html`
       <td
-        @click="${this.selectRow}"
+        @click="${this.hideCheckboxes ? undefined : this.selectRow}"
         class="${classMap({
           'table__cell': true,
           'table__cell--wide': headerKey === this.wideColumn,
@@ -852,6 +926,10 @@ export default class ZnDataTable extends ZincElement {
       </td>`;
   }
 
+  private isRowSelected(row: Row): boolean {
+    return this.selectedRows.some((r: Row) => r.id === row.id);
+  }
+
   private getRows(data: Response): Row[] {
     const sourceRows = data.rows;
 
@@ -894,10 +972,19 @@ export default class ZnDataTable extends ZincElement {
   }
 
   private updateKeys() {
+    this.updateSelectAll();
     this.updateModifyKeys();
     this.updateDeleteKeys();
   }
 
+  private updateSelectAll() {
+    if (this.numberOfRowsSelected === this._rows.length) {
+      this.selectAllButton.icon = 'check_box';
+    } else {
+      this.selectAllButton.icon = 'indeterminate_check_box';
+    }
+  }
+
   private updateModifyKeys() {
     this.updateActionKeys('modify-action');
   }

package/src/components/data-table/data-table.scss

@@ -21,7 +21,6 @@ table {
   &.table--standalone {
     background-color: rgb(var(--zn-panel));
     border-radius: var(--zn-border-radius-large);
-    box-shadow: var(--zn-shadow-medium);
     border: 1px solid rgb(var(--zn-border-color));
     overflow: hidden;
   }
@@ -35,7 +34,7 @@ table {
     border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
   }
 
-  .table--with-checkboxes tbody tr:hover {
+  &.with-hover tbody tr:hover {
     background-color: rgba(var(--zn-primary), 0.05) !important;
     cursor: pointer;
   }
@@ -115,10 +114,10 @@ table {
       }
     }
 
-    &:first-of-type > div:has(input[type="checkbox"]) {
+    &:first-of-type > div:has(zn-checkbox) {
       justify-content: center;
 
-      input[type="checkbox"] {
+      zn-checkbox {
         margin: 0;
       }
     }
@@ -240,7 +239,7 @@ table {
     flex-direction: row;
     justify-content: space-between;
     align-items: baseline;
-    padding: var(--zn-spacing-small);
+    padding-block: var(--zn-spacing-small);
     gap: var(--zn-spacing-small);
 
     &__actions,
@@ -306,9 +305,7 @@ table {
         }
       }
     }
-
   }
-
 }
 
 .reduced-opacity .table tbody {
@@ -333,3 +330,84 @@ table {
   filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
   background-color: rgb(var(--zn-panel, 255, 255, 255));
 }
+
+/* Table Select Styles */
+table tbody tr.table__row--selected {
+  background-color: var(--zn-color-purple-100);
+
+  &:nth-of-type(even) {
+    background-color: hsla(from var(--zn-color-purple-200) h s l / 0.8);
+  }
+
+  &:hover {
+    background-color: var(--zn-color-purple-200) !important;
+  }
+
+  td {
+    border-top: 1px solid var(--zn-color-purple-600) !important;
+    border-bottom: 1px solid var(--zn-color-purple-600) !important;
+  }
+
+  td:first-of-type {
+    border-left: 1px solid var(--zn-color-purple-600);
+  }
+
+  td:last-of-type {
+    border-right: 1px solid var(--zn-color-purple-600);
+  }
+
+  &:last-of-type td:first-of-type {
+    border-bottom-left-radius: var(--zn-border-radius-large);
+  }
+
+  &:last-of-type td:last-of-type {
+    border-bottom-right-radius: var(--zn-border-radius-large);
+  }
+
+  & + tr.table__row--selected td {
+    border-top: 0 !important;
+
+    &:first-of-type {
+      border-top-left-radius: 0;
+    }
+
+    &:last-of-type {
+      border-top-right-radius: 0;
+    }
+  }
+
+  &:has(+ tr.table__row--selected) td {
+    border-bottom: 0 !important;
+  }
+
+  &:first-of-type td {
+    border-top: 0 !important;
+  }
+
+  &:has(+ tr.table__row--selected) {
+    td:first-of-type {
+      border-bottom-left-radius: 0;
+    }
+
+    td:last-of-type {
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
+table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
+  border-bottom-color: var(--zn-color-purple-600) !important;
+}
+
+
+.table-group__title {
+  font-weight: var(--zn-font-weight-semibold);
+  font-size: var(--zn-font-size-large);
+  color: rgba(var(--zn-text-panel-title), 100%);
+  line-height: var(--zn-line-height-looser);
+  padding-left: var(--zn-spacing-medium);
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/src/components/data-table-filter/data-table-filter.component.ts

@@ -106,7 +106,7 @@ export default class ZnDataTableFilter extends ZincElement implements ZincFormCo
     return html`
       <zn-button id="slideout-trigger" color="transparent" size="x-small" icon="filter_alt" icon-size="22"
                  slot="trigger"
-                 tooltip="Open Filter">Filter
+                 tooltip="Filter">
       </zn-button>
       <zn-slideout class="slideout-basic" trigger="slideout-trigger" label="Filters">
 

package/src/components/editor/editor.scss

@@ -66,6 +66,7 @@
 
     img {
       max-width: 40%;
+      height: auto;
     }
   }
 

package/src/components/editor/modules/attachment/attachment.ts

@@ -2,7 +2,7 @@ import type Quill from 'quill';
 import type Toolbar from "../toolbar/toolbar";
 
 interface AttachmentOptions {
-  upload: (file: File) => Promise<{ path: any, url: any, filename: any }>;
+  upload: (file: File) => Promise<{ path: any; url: any; filename: any }>;
   onFileUploaded?: (node: HTMLElement, {url}: { url: string }) => void;
   attachmentInput?: HTMLInputElement;
 }
@@ -26,6 +26,9 @@ export default class Attachment {
     if (typeof (this._options.upload) !== "function") {
       console.warn("[Quill Attachment Module] No upload function provided");
     }
+    if (typeof (this._options.onFileUploaded) !== "function") {
+      console.warn("[Quill Attachment Module] No file uploaded function provided");
+    }
 
     (this._quill
       .getModule('toolbar') as Toolbar)
@@ -48,24 +51,34 @@ export default class Attachment {
     }
 
     const file = this._fileHolder.files[0];
-    const attachmentId = generateId();
-    const fileReader = new FileReader();
+    this.addAttachment(file);
+  }
 
-    fileReader.addEventListener('load', () => {
-      const base64Content = fileReader.result as string;
-      this._insertAttachment({dataUrl: base64Content, file, id: attachmentId});
-    }, false);
+  public addAttachment(file: File, dataUrl?: string) {
+    const attachmentId = generateId();
+    const insertWithDataUrl = (base64: string) => {
+      this._insertAttachment({ dataUrl: base64, file, id: attachmentId });
+    };
 
-    if (file) {
+    if (dataUrl) {
+      insertWithDataUrl(dataUrl);
+    } else {
+      const fileReader = new FileReader();
+      fileReader.addEventListener('load', () => {
+        const base64Content = fileReader.result as string;
+        insertWithDataUrl(base64Content);
+      }, false);
       fileReader.readAsDataURL(file);
     }
 
-    this._options.upload(file).then(({path, url}) => {
-      this._uploadAttachment(file, url);
-      this._updateAttachment(attachmentId, url, path);
-    }).catch(err => {
-      console.warn(err.message);
-    });
+    if (typeof this._options.upload === 'function') {
+      this._options.upload(file).then(({ path, url }: { path: string; url: string }) => {
+        this._uploadAttachment(file, url);
+        this._updateAttachment(attachmentId, url, path);
+      }).catch((err: { message: string }) => {
+        console.warn(err.message);
+      });
+    }
   }
 
   private _attachmentContainer = document.createElement('div');
@@ -85,37 +98,36 @@ export default class Attachment {
     this._quill.container.appendChild(attachmentContainer);
   }
 
-  private _insertAttachment({dataUrl, file, id}: { dataUrl: string, file: File, id: string }) {
+  private _insertAttachment({dataUrl, file, id}: { dataUrl: string; file: File; id: string }) {
     this._attachmentContainer.appendChild(this._createAttachment(dataUrl, file, id));
   }
 
   private _updateAttachment(id: string, url: string, filename: string) {
-    const element = this._quill.container.querySelector(`#${id}`) as HTMLAnchorElement;
-    if (element) {
-      element.setAttribute('href', url);
-      let attachmentName = element.querySelector('.attachment-name');
-      if (attachmentName) {
-        if (filename) {
-          attachmentName.textContent = filename;
-        } else {
-          attachmentName.textContent = 'Error uploading file';
-        }
-      }
-
-      if (typeof this._options.onFileUploaded === 'function') {
-        this._options.onFileUploaded(element, {url});
+    const element = this._quill.container.querySelector(`#${id}`);
+    if (!element) return;
+
+    element.setAttribute('href', url);
+    const attachmentName = element.querySelector('.attachment-name');
+    if (attachmentName) {
+      if (filename) {
+        attachmentName.textContent = filename;
+      } else {
+        attachmentName.textContent = 'Error uploading file';
       }
+    }
 
+    if (this._options.onFileUploaded) {
+      this._options.onFileUploaded(element as HTMLElement, {url});
+    }
 
-      // add the url to the hidden input
-      const attachments = this._options.attachmentInput;
-      if (attachments && filename) {
-        // value should be an array of attachment names
-        const value = attachments.value;
-        const data = value ? JSON.parse(value) : [];
-        data.push(filename);
-        attachments.value = JSON.stringify(data);
-      }
+    // add the url to the hidden input
+    const attachments = this._options.attachmentInput;
+    if (attachments && filename) {
+      // value should be an array of attachment names
+      const value = attachments.value;
+      const data: string[] = value ? JSON.parse(value) as string[] : [];
+      data.push(filename);
+      attachments.value = JSON.stringify(data);
     }
   }
 
@@ -162,9 +174,9 @@ export default class Attachment {
     if (attachments) {
       // value should be an array of attachment names
       const value = attachments.value;
-      let attachmentName = attachment?.querySelector('.attachment-name');
-      const data = value ? JSON.parse(value) : [];
-      const index = data.indexOf(attachmentName ? attachmentName.textContent : '');
+      const attachmentName = attachment?.querySelector('.attachment-name');
+      const data: string[] = value ? JSON.parse(value) as string[] : [];
+      const index = data.indexOf(attachmentName?.textContent ? attachmentName.textContent : '');
       if (index > -1) {
         data.splice(index, 1);
         attachments.value = JSON.stringify(data);

package/src/components/editor/modules/toolbar/toolbar.ts

@@ -1,6 +1,7 @@
 import './toolbar.component';
 import Quill from "quill";
 import QuillToolbar from "quill/modules/toolbar";
+import type Attachment from "../attachment/attachment";
 import type DialogComponent from "../dialog/dialog.component";
 import type Emoji from "../emoji/emoji";
 import type ToolbarComponent from "./toolbar.component";
@@ -26,6 +27,7 @@ class Toolbar extends QuillToolbar {
     this.addHandler('redo', () => quill.history.redo());
     this.addHandler('undo', () => quill.history.undo());
     this.addHandler('dialog', (value: string) => this._openDialog(value));
+    this.addHandler('image', () => this._addImage());
 
     this._quill = quill;
     this._component = options.container;
@@ -323,6 +325,46 @@ class Toolbar extends QuillToolbar {
     const emoji = this._quill.getModule('emoji') as Emoji;
     emoji?.initPicker();
   }
+
+  private _addImage() {
+    const input = document.createElement('input')
+    input.setAttribute('type', 'file')
+    input.setAttribute('accept', 'image/*')
+    input.click()
+
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (!file?.type || !file.type.startsWith('image/')) return;
+
+      const reader = new window.FileReader();
+      reader.onload = () => {
+        const dataUrl = reader.result as string;
+        const selection = this._quill.getSelection(true);
+        const index = selection ? selection.index + selection.length : this._quill.getLength();
+
+        this._quill.insertEmbed(index, 'image', dataUrl, Quill.sources.USER);
+
+        const root = this._quill.root as HTMLElement;
+        const images = Array.from(root.querySelectorAll('img')) as HTMLImageElement[];
+        const inserted = images.reverse().find(img => img.getAttribute('src') === dataUrl) || null;
+        if (inserted) {
+          inserted.setAttribute('alt', file.name.replace(/\.[^/.]+$/, ''));
+          inserted.setAttribute('title', file.name);
+        }
+
+        this._quill.setSelection(index + 1, 0, Quill.sources.USER);
+        this._syncToolbarState();
+
+        try {
+          const attachmentModule = this._quill.getModule('attachment') as Attachment | undefined;
+          attachmentModule?.addAttachment(file, dataUrl);
+        } catch (err) {
+          console.warn('[Toolbar] Failed to process image with attachment handler', err);
+        }
+      };
+      reader.readAsDataURL(file);
+    }
+  }
 }
 
 export default Toolbar;