@oscarpalmer/tabela 0.11.0 → 0.13.0

package/dist/managers/style.manager.mjs

@@ -0,0 +1,149 @@
+//#region src/managers/style.manager.ts
+var StyleManager = class {
+	constructor(state) {
+		this.state = state;
+		if (appended) return;
+		appended = true;
+		const style = document.createElement("style");
+		style.textContent = styling;
+		document.head.appendChild(style);
+	}
+};
+const styling = `/** Table */
+
+:where(.tabela) {
+	flex: 1;
+	position: relative;
+	background-color: var(--oui-absolute);
+	border: 1px solid grey;
+}
+
+:where(.tabela__table) {
+	min-height: 24em;
+	display: flex;
+	flex-flow: column nowrap;
+	flex: 1;
+	overflow: auto;
+	position: absolute;
+	inset: 0;
+}
+
+/** Row group */
+
+:where(.tabela__rowgroup--header),
+:where(.tabela__rowgroup--footer) {
+	background-color: white;
+	position: sticky;
+	left: 0;
+	z-index: 10;
+}
+
+:where(.tabela__rowgroup--header) {
+	top: 0;
+}
+
+:where(.tabela__rowgroup--footer) {
+	bottom: 0;
+}
+
+:where(.tabela__rowgroup--body) {
+	display: flex;
+	flex-flow: column nowrap;
+	flex: 1;
+}
+
+:where(.tabela__rowgroup--body:focus) {
+	outline: none;
+}
+
+:where(.tabela:has(.tabela__rowgroup--body:focus-visible)) {
+	outline: 2px solid var(--oui-blue-6);
+	outline-offset: 2px;
+}
+
+/** Row */
+
+:where(.tabela__row) {
+	width: 100%;
+	display: flex;
+	flex-flow: row nowrap;
+}
+
+:where(.tabela__row:last-child .tabela__cell) {
+	border-bottom-width: 0;
+}
+
+:where(.tabela__row--body),
+:where(.tabela__row--group) {
+	flex: 1;
+	position: absolute;
+}
+
+:where(.tabela__row--selected) {
+	background-color: var(--oui-blue-1);
+	color: var(--oui-blue-9);
+}
+
+:where(.tabela:has(.tabela__rowgroup--body:focus-visible) .tabela__row[data-active="true"]) {
+	outline: 2px solid var(--oui-blue-6);
+	outline-offset: 2px;
+}
+
+/** Cells */
+
+:where(.tabela__cell),
+:where(.tabela__heading) {
+	padding: 0.5em;
+	border-color: gray;
+	border-style: solid;
+	border-width: 0 1px 1px 0;
+	line-height: 1;
+}
+
+:where(.tabela__row .tabela__cell:last-child),
+:where(.tabela__row .tabela__heading:last-child) {
+	flex: 1;
+	border-right-width: 0;
+}
+
+:where(.tabela__cell) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+:where(.tabela__cell--footer) {
+	border-top-width: 1px;
+	border-bottom-width: 0;
+}
+
+:where(.tabela__cell--group) {
+	padding: 0;
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+	gap: 0.5em;
+}
+
+:where(.tabela__cell--group .tabela__button) {
+	margin: 0 0 0 .25rem;
+}
+
+/** Misc. */
+
+:where(.tabela__button) {
+	font-size: .75rem;
+	font-weight: bold;
+}
+
+:where(.tabela__selection) {
+	background-color: color-mix(in oklch, var(--oui-blue-6), transparent);
+	border: 1px solid var(--oui-blue-6);
+	border-radius: .25rem;
+	position: fixed;
+	z-index: 1000;
+}
+`.replace(/^\s+|\s+|\s+$/g, " ");
+let appended = false;
+//#endregion
+export { StyleManager };

package/dist/models/body.model.d.mts

@@ -0,0 +1,2 @@
+import { t as BodyElements } from "../body.model-2iwsovAV.mjs";
+export { BodyElements };

package/dist/models/body.model.mjs

@@ -0,0 +1 @@
+export {};

package/dist/models/column.model.d.mts

@@ -0,0 +1,2 @@
+import { n as TabelaColumn, r as TabelaColumnType, t as Column } from "../column.model-D-aw4EU4.mjs";
+export { Column, TabelaColumn, TabelaColumnType };

package/dist/models/column.model.mjs

@@ -0,0 +1 @@
+export {};

package/dist/models/data.model.d.mts

@@ -0,0 +1,2 @@
+import { D as TabelaData, E as DataState, T as DataItem } from "../group.component-Cq1YYbfJ.mjs";
+export { DataItem, DataState, TabelaData };

package/dist/models/data.model.mjs

@@ -0,0 +1 @@
+export {};

package/dist/models/filter.model.d.mts

@@ -0,0 +1,2 @@
+import { n as TabelaFilterComparison, r as TabelaFilterItem, t as TabelaFilter } from "../filter.model-7ukJrtil.mjs";
+export { TabelaFilter, TabelaFilterComparison, TabelaFilterItem };

package/dist/models/filter.model.mjs

@@ -0,0 +1 @@
+export {};

package/dist/models/footer.model.d.mts

@@ -0,0 +1,2 @@
+import { t as FooterElements } from "../footer.model-DhqoS6ds.mjs";
+export { FooterElements };

package/dist/models/footer.model.mjs

@@ -0,0 +1 @@
+export {};

package/dist/models/group.model.d.mts

@@ -0,0 +1,2 @@
+import { n as TabelaGroup, t as GroupValue } from "../group.model-BsKFwHbt.mjs";
+export { GroupValue, TabelaGroup };

package/dist/models/group.model.mjs

@@ -0,0 +1 @@
+export {};

package/dist/models/header.model.d.mts

@@ -0,0 +1,2 @@
+import { t as HeaderElements } from "../header.model-DN_KzUCV.mjs";
+export { HeaderElements };

package/dist/models/header.model.mjs

@@ -0,0 +1 @@
+export {};

package/dist/models/render.model.d.mts

@@ -0,0 +1,2 @@
+import { _ as RenderElementPool, v as RenderRange, y as RenderState } from "../group.component-Cq1YYbfJ.mjs";
+export { RenderElementPool, RenderRange, RenderState };

package/dist/models/render.model.mjs

@@ -0,0 +1 @@
+export {};

package/dist/models/selection.model.d.mts

@@ -0,0 +1,2 @@
+import { t as TabelaSelection } from "../selection.model-rwQe9fco.mjs";
+export { TabelaSelection };

package/dist/models/selection.model.mjs

@@ -0,0 +1 @@
+export {};

package/dist/models/sort.model.d.mts

@@ -0,0 +1,2 @@
+import { n as TabelaSortDirection, r as TabelaSortItem, t as TabelaSort } from "../sort.model-CauImaLu.mjs";
+export { TabelaSort, TabelaSortDirection, TabelaSortItem };

package/dist/models/sort.model.mjs

@@ -0,0 +1 @@
+export {};

package/dist/models/style.model.d.mts

@@ -0,0 +1,23 @@
+//#region src/models/style.model.d.ts
+declare const CSS_TABELA = "tabela";
+declare const CSS_TABELA_CELL = "tabela__cell";
+declare const CSS_TABELA_CELL_BODY = "tabela__cell--body";
+declare const CSS_TABELA_CELL_FOOTER = "tabela__cell--footer";
+declare const CSS_TABELA_FAKER = "tabela__faker";
+declare const CSS_TABELA_HEADING = "tabela__heading";
+declare const CSS_TABELA_HEADING_CONTENT = "tabela__heading__content";
+declare const CSS_TABELA_HEADING_SORTER = "tabela__heading__sorter";
+declare const CSS_TABELA_ROW = "tabela__row";
+declare const CSS_TABELA_ROW_BODY = "tabela__row--body";
+declare const CSS_TABELA_ROW_FOOTER = "tabela__row--footer";
+declare const CSS_TABELA_ROW_GROUP = "tabela__row--group tabela__group";
+declare const CSS_TABELA_ROW_HEADER = "tabela__row--header";
+declare const CSS_TABELA_ROW_SELECTED = "tabela__row--selected";
+declare const CSS_TABELA_ROWGROUP = "tabela__rowgroup";
+declare const CSS_TABELA_ROWGROUP_BODY = "tabela__rowgroup--body";
+declare const CSS_TABELA_ROWGROUP_FOOTER = "tabela__rowgroup--footer";
+declare const CSS_TABELA_ROWGROUP_HEADER = "tabela__rowgroup--header";
+declare const CSS_TABELA_SELECTION = "tabela__selection";
+declare const CSS_TABELA_TABLE = "tabela__table";
+//#endregion
+export { CSS_TABELA, CSS_TABELA_CELL, CSS_TABELA_CELL_BODY, CSS_TABELA_CELL_FOOTER, CSS_TABELA_FAKER, CSS_TABELA_HEADING, CSS_TABELA_HEADING_CONTENT, CSS_TABELA_HEADING_SORTER, CSS_TABELA_ROW, CSS_TABELA_ROWGROUP, CSS_TABELA_ROWGROUP_BODY, CSS_TABELA_ROWGROUP_FOOTER, CSS_TABELA_ROWGROUP_HEADER, CSS_TABELA_ROW_BODY, CSS_TABELA_ROW_FOOTER, CSS_TABELA_ROW_GROUP, CSS_TABELA_ROW_HEADER, CSS_TABELA_ROW_SELECTED, CSS_TABELA_SELECTION, CSS_TABELA_TABLE };

package/dist/models/style.model.mjs

@@ -0,0 +1,23 @@
+//#region src/models/style.model.ts
+const CSS_TABELA = "tabela";
+const CSS_TABELA_CELL = "tabela__cell";
+const CSS_TABELA_CELL_BODY = "tabela__cell--body";
+const CSS_TABELA_CELL_FOOTER = "tabela__cell--footer";
+const CSS_TABELA_FAKER = "tabela__faker";
+const CSS_TABELA_HEADING = "tabela__heading";
+const CSS_TABELA_HEADING_CONTENT = "tabela__heading__content";
+const CSS_TABELA_HEADING_SORTER = "tabela__heading__sorter";
+const CSS_TABELA_ROW = "tabela__row";
+const CSS_TABELA_ROW_BODY = "tabela__row--body";
+const CSS_TABELA_ROW_FOOTER = "tabela__row--footer";
+const CSS_TABELA_ROW_GROUP = "tabela__row--group tabela__group";
+const CSS_TABELA_ROW_HEADER = "tabela__row--header";
+const CSS_TABELA_ROW_SELECTED = "tabela__row--selected";
+const CSS_TABELA_ROWGROUP = "tabela__rowgroup";
+const CSS_TABELA_ROWGROUP_BODY = "tabela__rowgroup--body";
+const CSS_TABELA_ROWGROUP_FOOTER = "tabela__rowgroup--footer";
+const CSS_TABELA_ROWGROUP_HEADER = "tabela__rowgroup--header";
+const CSS_TABELA_SELECTION = "tabela__selection";
+const CSS_TABELA_TABLE = "tabela__table";
+//#endregion
+export { CSS_TABELA, CSS_TABELA_CELL, CSS_TABELA_CELL_BODY, CSS_TABELA_CELL_FOOTER, CSS_TABELA_FAKER, CSS_TABELA_HEADING, CSS_TABELA_HEADING_CONTENT, CSS_TABELA_HEADING_SORTER, CSS_TABELA_ROW, CSS_TABELA_ROWGROUP, CSS_TABELA_ROWGROUP_BODY, CSS_TABELA_ROWGROUP_FOOTER, CSS_TABELA_ROWGROUP_HEADER, CSS_TABELA_ROW_BODY, CSS_TABELA_ROW_FOOTER, CSS_TABELA_ROW_GROUP, CSS_TABELA_ROW_HEADER, CSS_TABELA_ROW_SELECTED, CSS_TABELA_SELECTION, CSS_TABELA_TABLE };

package/dist/models/tabela.model.d.mts

@@ -0,0 +1,2 @@
+import { a as Components, o as Managers, s as State } from "../group.component-Cq1YYbfJ.mjs";
+export { Components, Managers, State };

package/dist/models/tabela.model.mjs

@@ -0,0 +1 @@
+export {};

package/dist/models/tabela.options.d.mts

@@ -0,0 +1,2 @@
+import { t as TabelaOptions } from "../tabela.options-RkZvfptB.mjs";
+export { TabelaOptions };

package/dist/models/tabela.options.mjs

@@ -0,0 +1 @@
+export {};

package/dist/selection.model-rwQe9fco.d.mts

@@ -0,0 +1,12 @@
+import { Key } from "@oscarpalmer/atoms/models";
+
+//#region src/models/selection.model.d.ts
+type TabelaSelection = {
+  add(keys: Key[]): void;
+  clear(): void;
+  remove(keys: Key[]): void;
+  set(keys: Key[]): void;
+  toggle(): void;
+};
+//#endregion
+export { TabelaSelection as t };

package/dist/sort.model-CauImaLu.d.mts

@@ -0,0 +1,15 @@
+//#region src/models/sort.model.d.ts
+type TabelaSort = {
+  add(field: string, direction?: TabelaSortDirection): void;
+  clear(): void;
+  flip(field: string): void;
+  remove(field: string): void;
+  set(items: TabelaSortItem[]): void;
+};
+type TabelaSortDirection = 'ascending' | 'descending';
+type TabelaSortItem = {
+  direction: TabelaSortDirection;
+  field: string;
+};
+//#endregion
+export { TabelaSortDirection as n, TabelaSortItem as r, TabelaSort as t };

package/dist/tabela.d.mts

@@ -0,0 +1,21 @@
+import { n as TabelaGroup } from "./group.model-BsKFwHbt.mjs";
+import { D as TabelaData } from "./group.component-Cq1YYbfJ.mjs";
+import { t as TabelaFilter } from "./filter.model-7ukJrtil.mjs";
+import { t as TabelaSort } from "./sort.model-CauImaLu.mjs";
+import { t as TabelaOptions } from "./tabela.options-RkZvfptB.mjs";
+import { t as TabelaSelection } from "./selection.model-rwQe9fco.mjs";
+
+//#region src/tabela.d.ts
+declare class Tabela {
+  #private;
+  readonly data: TabelaData;
+  readonly filter: TabelaFilter;
+  readonly group: TabelaGroup;
+  readonly selection: TabelaSelection;
+  readonly sort: TabelaSort;
+  get key(): string;
+  constructor(element: HTMLElement, options: TabelaOptions);
+  destroy(): void;
+}
+//#endregion
+export { Tabela };