@yewdiel21/motion-kit 0.10.0 → 0.14.0

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

@@ -0,0 +1,590 @@
+/* data-table — a toolbar (a 12 px search on surface-3, 12 px tool buttons with an accent count), the filter sentence
+   on accent-soft, then the table on a 20 px panel: a sticky muted header with sort buttons whose arrow turns, 3rem
+   rows on hairlines, chosen rows tinted, 18 px checks that draw themselves, an 8 px row menu button and shimmering
+   bones while loading; the foot with the range, rows per page and the pager; the bar of the chosen rows on inverse
+   glass. Panels (columns, filters) are anchored .mk-dialog (dialog.css) surfaces with 20 px corners. The table
+   scrolls sideways inside its panel when it is wider; --mk-dt-max-height lets it scroll down too. */
+.mk-data-table,
+mk-data-table {
+  --mk-dt-max-height: none;
+  position: relative;
+  display: grid;
+  gap: 0.75rem;
+  min-width: 0;
+  color: var(--mk-text);
+  font-size: 0.875rem;
+}
+
+/* ── The toolbar ─────────────────────────────────────────────────────────── */
+[data-mk-dt-bar] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+[data-mk-dt-search] {
+  display: flex;
+  flex: 1 1 14rem;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  border-radius: 12px;
+  background: var(--mk-surface-3);
+  color: var(--mk-muted);
+  cursor: text;
+}
+
+[data-mk-dt-search]:focus-within {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+[data-mk-dt-search] svg {
+  flex: none;
+}
+
+[data-mk-dt-search] input {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: none;
+  color: var(--mk-text);
+  font: inherit;
+}
+
+[data-mk-dt-tools] {
+  display: flex;
+  gap: 0.375rem;
+}
+
+[data-mk-dt-tool] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 12px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+}
+
+[data-mk-dt-tool]:hover {
+  background: var(--mk-surface-2);
+}
+
+[data-mk-dt-tool]:focus-visible,
+[data-mk-dt-sort]:focus-visible,
+[data-mk-dt-row-menu]:focus-visible,
+[data-mk-dt-pager] button:focus-visible,
+[data-mk-dt-bulk] button:focus-visible,
+[data-mk-dt-clear]:focus-visible {
+  outline: 2px solid var(--mk-accent);
+  outline-offset: 2px;
+}
+
+[data-mk-dt-count] {
+  display: inline-grid;
+  place-items: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.3rem;
+  border-radius: 999px;
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+  font-size: 0.6875rem;
+  font-weight: 700;
+}
+
+[data-mk-dt-count][hidden],
+[data-mk-dt-active][hidden],
+[data-mk-dt-empty][hidden],
+[data-mk-dt-bulk][hidden],
+[data-mk-dt-pager][hidden],
+[data-mk-dt-size][hidden],
+[data-mk-dt-select-all][hidden] {
+  display: none;
+}
+
+[data-mk-dt-active] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  min-width: 0;
+  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
+  border-radius: 12px;
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft, var(--mk-text));
+  font-size: 0.8125rem;
+}
+
+[data-mk-dt-active] > span {
+  flex: 1;
+  min-width: 0;
+}
+
+[data-mk-dt-clear] {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: 0.25rem;
+  height: 1.875rem;
+  padding: 0 0.625rem;
+  border: 0;
+  border-radius: 8px;
+  background: color-mix(in srgb, currentColor 12%, transparent);
+  color: inherit;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* ── The table ───────────────────────────────────────────────────────────── */
+/* A table wider than its panel scrolls sideways; a soft shadow at an edge says there is more past it (the covers
+   travel with the content, the shadows stay with the panel). */
+[data-mk-dt-scroll] {
+  max-height: var(--mk-dt-max-height);
+  overflow: auto;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 20px;
+  outline: none;
+  background:
+    linear-gradient(to right, var(--mk-surface-1) 40%, transparent) left center / 2.5rem 100% no-repeat local,
+    linear-gradient(to left, var(--mk-surface-1) 40%, transparent) right center / 2.5rem 100% no-repeat local,
+    radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--mk-shadow-color, #000) 22%, transparent), transparent) left center / 1rem 100% no-repeat scroll,
+    radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--mk-shadow-color, #000) 22%, transparent), transparent) right center / 1rem 100% no-repeat scroll,
+    var(--mk-surface-1);
+  overscroll-behavior-x: contain;
+}
+
+[data-mk-dt-scroll]:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+[data-mk-dt-table] {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+}
+
+[data-mk-dt-table] :is(th, td) {
+  height: 3rem;
+  padding: 0 1rem;
+  border-bottom: 1px solid var(--mk-outline-soft);
+  text-align: start;
+  white-space: nowrap;
+}
+
+[data-mk-dt-table] :is(th, td)[data-align='end'] {
+  text-align: end;
+}
+
+[data-mk-dt-table] :is(th, td)[data-align='center'] {
+  text-align: center;
+}
+
+[data-mk-dt-table] thead th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  height: 2.75rem;
+  background: var(--mk-surface-2);
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+[data-mk-dt-table] thead th:is([data-direction='asc'], [data-direction='desc']) {
+  color: var(--mk-text);
+}
+
+[data-mk-dt-table] tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+[data-mk-dt-table] tbody tr {
+  transition: background-color 0.15s;
+}
+
+[data-mk-dt-table] tbody tr:hover {
+  background: color-mix(in srgb, var(--mk-text) 3%, transparent);
+}
+
+[data-mk-dt-table] tbody tr[data-selected] {
+  background: color-mix(in srgb, var(--mk-accent-soft) 60%, transparent);
+}
+
+[data-mk-dt-table] td mark {
+  padding: 0 1px;
+  border-radius: 3px;
+  background: color-mix(in srgb, var(--mk-accent) 28%, transparent);
+  color: inherit;
+}
+
+[data-mk-dt-sort] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin: 0 -0.375rem;
+  padding: 0.25rem 0.375rem;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  cursor: pointer;
+}
+
+[data-mk-dt-table] th[data-align='end'] [data-mk-dt-sort] {
+  flex-direction: row-reverse;
+}
+
+[data-mk-dt-sort]:hover {
+  background: color-mix(in srgb, var(--mk-text) 6%, transparent);
+}
+
+[data-mk-dt-sort] svg {
+  flex: none;
+  opacity: 0;
+  transition:
+    opacity 0.15s,
+    transform 0.3s cubic-bezier(0.38, 0.49, 0, 1.5);
+}
+
+[data-mk-dt-sort]:hover svg {
+  opacity: 0.45;
+}
+
+th:is([data-direction='asc'], [data-direction='desc']) [data-mk-dt-sort] svg {
+  opacity: 1;
+}
+
+th[data-direction='desc'] [data-mk-dt-sort] svg {
+  transform: rotate(180deg);
+}
+
+[data-mk-dt-table] :is(th, td)[data-mk-dt-select] {
+  width: 1.125rem;
+  padding-right: 0.25rem;
+}
+
+[data-mk-dt-table] :is(th, td)[data-mk-dt-actions] {
+  width: 2rem;
+  padding: 0 0.5rem 0 0;
+  text-align: end;
+}
+
+/* The checks. */
+[data-mk-dt-check] {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  box-sizing: border-box;
+  border: 1.5px solid var(--mk-outline);
+  border-radius: 5px;
+  color: transparent;
+  vertical-align: middle;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s,
+    color 0.2s;
+}
+
+[data-mk-dt-check] input {
+  position: absolute;
+  inset: -0.375rem;
+  width: auto;
+  height: auto;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+[data-mk-dt-check] svg {
+  pointer-events: none;
+}
+
+[data-mk-dt-check]:is([data-state='true'], [data-state='mixed']) {
+  border-color: var(--mk-accent);
+  background: var(--mk-accent);
+  color: var(--mk-on-accent);
+}
+
+[data-mk-dt-check] [data-mk-dt-dash],
+[data-mk-dt-check][data-state='mixed'] [data-mk-dt-tick] {
+  display: none;
+}
+
+[data-mk-dt-check][data-state='mixed'] [data-mk-dt-dash] {
+  display: inline;
+}
+
+[data-mk-dt-check]:has(input:focus-visible) {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 35%, transparent);
+}
+
+[data-mk-dt-row-menu] {
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: none;
+  color: var(--mk-muted);
+  vertical-align: middle;
+  cursor: pointer;
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+
+[data-mk-dt-row-menu]:hover,
+[data-mk-dt-row-menu][aria-expanded='true'] {
+  background: var(--mk-surface-3);
+  color: var(--mk-text);
+}
+
+[data-mk-dt-bool] {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: 8px;
+  background: var(--mk-surface-3);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+[data-mk-dt-bool][data-value='true'] {
+  background: var(--mk-accent-soft);
+  color: var(--mk-on-accent-soft, var(--mk-text));
+}
+
+[data-mk-dt-bone] {
+  display: block;
+  height: 0.75rem;
+  border-radius: 6px;
+  background: linear-gradient(90deg, var(--mk-surface-3) 0%, var(--mk-surface-2) 50%, var(--mk-surface-3) 100%);
+  background-size: 200% 100%;
+  animation: mk-dt-shimmer 1.2s linear infinite;
+}
+
+@keyframes mk-dt-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+
+  to {
+    background-position: -100% 0;
+  }
+}
+
+[data-mk-dt-empty] {
+  padding: 0.5rem 0 1rem;
+}
+
+/* ── The foot ────────────────────────────────────────────────────────────── */
+[data-mk-dt-foot] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 1rem;
+  min-width: 0;
+  color: var(--mk-muted);
+  font-size: 0.8125rem;
+}
+
+[data-mk-dt-range],
+[data-mk-dt-page] {
+  font-variant-numeric: tabular-nums;
+}
+
+[data-mk-dt-size] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: auto;
+}
+
+[data-mk-dt-size] select {
+  height: 2rem;
+  padding: 0 0.5rem;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  font: inherit;
+}
+
+[data-mk-dt-pager] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+[data-mk-dt-pager] button {
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  border: 1px solid var(--mk-outline-soft);
+  border-radius: 8px;
+  background: var(--mk-surface-1);
+  color: var(--mk-text);
+  cursor: pointer;
+}
+
+[data-mk-dt-pager] button:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
+
+[data-mk-dt-page] {
+  min-width: 3.5rem;
+  color: var(--mk-text);
+  text-align: center;
+}
+
+/* ── The bar of the chosen rows ──────────────────────────────────────────── */
+[data-mk-dt-bulk] {
+  position: absolute;
+  right: 0;
+  bottom: 3.25rem;
+  left: 0;
+  z-index: 3;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.5rem;
+  width: max-content;
+  max-width: calc(100% - 1rem);
+  margin-inline: auto;
+  padding: 0.375rem 0.375rem 0.375rem 1rem;
+  border-radius: 20px;
+  background: var(--mk-glass-inverse, var(--mk-text));
+  box-shadow: 0 14px 32px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 45%, transparent);
+  color: var(--mk-on-glass-inverse, var(--mk-surface-1));
+}
+
+[data-mk-dt-bulk-label] {
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+[data-mk-dt-bulk-count] {
+  display: inline-block;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+}
+
+[data-mk-dt-bulk-actions] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+[data-mk-dt-bulk] button {
+  height: 2rem;
+  padding: 0 0.75rem;
+  border: 0;
+  border-radius: 12px;
+  background: color-mix(in srgb, currentColor 14%, transparent);
+  color: inherit;
+  font: inherit;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+[data-mk-dt-bulk] button[data-danger] {
+  background: var(--mk-error);
+  color: var(--mk-on-error, #fff);
+}
+
+[data-mk-dt-select-all] {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+[data-mk-dt-bulk-close] {
+  display: inline-grid;
+  place-items: center;
+  width: 2rem;
+  padding: 0;
+}
+
+/* ── Panels and the row menu ─────────────────────────────────────────────── */
+.mk-dialog.mk-dt-panel {
+  --mk-dialog-radius: 20px;
+  --mk-dialog-bg: var(--mk-surface-1);
+  --mk-dialog-shadow: 0 16px 48px -12px color-mix(in srgb, var(--mk-shadow-color, #000) 35%, transparent);
+  gap: 0.5rem;
+  width: max-content;
+  min-width: min(14rem, calc(100vw - 32px));
+  max-width: min(22rem, calc(100vw - 32px));
+  padding: 0.75rem;
+}
+
+.mk-dialog.mk-dt-panel.mk-dt-filters {
+  width: min(38rem, calc(100vw - 32px));
+  max-width: min(38rem, calc(100vw - 32px));
+  padding: 1rem;
+}
+
+[data-mk-dt-panel-title] {
+  margin: 0 0 0.25rem;
+  padding: 0 0.25rem;
+  color: var(--mk-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+[data-mk-dt-column-list] {
+  display: grid;
+  gap: 0.125rem;
+}
+
+[data-mk-dt-column] {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-height: 2.25rem;
+  padding: 0 0.5rem;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+[data-mk-dt-column]:hover {
+  background: var(--mk-surface-2);
+}
+
+.mk-dialog.mk-dt-menu [data-mk-item][data-danger] {
+  color: var(--mk-error);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-mk-dt-bone] {
+    animation: none;
+  }
+
+  [data-mk-dt-sort] svg,
+  [data-mk-dt-check] {
+    transition: none;
+  }
+}

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);