@yewdiel21/motion-kit 0.10.0 → 0.15.0

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

@@ -0,0 +1,54 @@
+import { MkElement, defineElement, type OptionType } from '../../elements/base';
+import { createDataTable, type DataRow, type DataTableInstance } from './engine';
+
+/**
+ * <mk-data-table class="mk-data-table" selectable page-size="10" sort="monto:desc"
+ *   columns='[{"key":"cliente","label":"Cliente"},{"key":"monto","label":"Monto","type":"number"}]'
+ *   rows='[{"id":1,"cliente":"Ana","monto":1200}]' actions='[{"id":"editar","label":"Editar"}]'></mk-data-table>
+ * Emits mk:sort, mk:select, mk:action, mk:bulk-action, mk:page and mk:filter.
+ */
+export class MkDataTableElement extends MkElement<DataTableInstance> {
+  static options: Record<string, OptionType> = {
+    columns: 'json',
+    rows: 'json',
+    rowKey: 'string',
+    caption: 'string',
+    pageSize: 'number',
+    pageSizes: 'json',
+    selectable: 'boolean',
+    search: 'string',
+    filters: 'boolean',
+    columnsMenu: 'boolean',
+    actions: 'json',
+    bulkActions: 'json',
+    sort: 'string',
+    loading: 'boolean',
+    emptyTitle: 'string',
+    emptyDescription: 'string',
+    locale: 'string',
+  };
+
+  protected create(options: Record<string, unknown>) {
+    // search="" (present without text) keeps the field with its default placeholder; search="false" removes it.
+    const raw = this.getAttribute('search');
+    const search = raw === null || raw === '' ? true : raw === 'false' ? false : raw;
+    // sort="key" or "key:desc".
+    const [key, direction] = String(options.sort ?? '').split(':');
+    const sort = key ? { key, direction: direction === 'desc' ? ('desc' as const) : ('asc' as const) } : null;
+    return createDataTable<DataRow>(this, { ...options, search, sort } as Parameters<typeof createDataTable>[1]);
+  }
+
+  attributeChangedCallback(name: string, previous: string | null, next: string | null) {
+    if (previous === next || !this.instance) return;
+    if (name === 'rows') {
+      try {
+        this.instance.setRows(JSON.parse(next ?? '[]') as DataRow[]);
+      } catch {
+        // Malformed JSON: keep the current rows.
+      }
+    } else if (name === 'loading') this.instance.setLoading(next !== null && next !== 'false');
+    else super.attributeChangedCallback(name, previous, next);
+  }
+}
+
+export const defineDataTable = () => defineElement('mk-data-table', MkDataTableElement);