@loomui-ng/ui 0.0.0-stage → 0.1.1

package/combobox/README.md

@@ -0,0 +1,47 @@
+# Combobox
+
+```ts
+import { UI_COMBOBOX } from '@loomui-ng/ui/combobox';
+// add to the component `imports` array
+```
+
+```html
+<div uiCombobox [(value)]="fw" class="contents">
+  <button uiComboboxTrigger><span uiComboboxValue placeholder="Select framework…"></span></button>
+  <div uiComboboxContent>
+    <input uiComboboxInput placeholder="Search…" />
+    <div uiComboboxList>
+      <div uiComboboxEmpty>No results.</div>
+      <div uiComboboxItem value="next">Next.js</div>
+    </div>
+  </div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-combobox [(value)]="fw" class="contents">
+  <ui-combobox-trigger><ui-combobox-value placeholder="Select framework…"></ui-combobox-value></ui-combobox-trigger>
+  <ui-combobox-content>
+    <ui-combobox-input placeholder="Search…" />
+    <ui-combobox-list>
+      <ui-combobox-empty>No results.</ui-combobox-empty>
+      <ui-combobox-item value="next">Next.js</ui-combobox-item>
+    </ui-combobox-list>
+  </ui-combobox-content>
+</ui-combobox>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `value` (model) | `string` | `''` |
+| `disabled` |  | `false` |
+| `placeholder` |  | `''` |
+| `align` | `'start' \| 'center' \| 'end'` | `'start'` |
+| `disabledInput` |  | `false` |
+| `ariaLabel` | `string` | `''` |
+
+Parts (selectors): `[uiCombobox], ui-combobox`, `button[uiComboboxTrigger], ui-combobox-trigger`, `[uiComboboxValue], ui-combobox-value`, `[uiComboboxContent], ui-combobox-content`, `input[uiComboboxInput]`, `[uiComboboxList], ui-combobox-list`, `[uiComboboxEmpty], ui-combobox-empty`, `[uiComboboxItem], ui-combobox-item`, `ui-combobox-input`.
+
+Spec: `docs/behavior-specs/combobox.md` · Manual test: `docs/manual-tests/combobox.md`

package/command/README.md

@@ -0,0 +1,44 @@
+# uiCommand
+
+```ts
+import { UI_COMMAND } from '@loomui-ng/ui/command';
+// add to the component imports array
+```
+
+```html
+<div uiCommand class="max-w-sm rounded-lg border">
+  <div uiCommandInputWrapper><input uiCommandInput placeholder="Search..." /></div>
+  <div uiCommandList>
+    <div uiCommandEmpty>No results found.</div>
+    <div uiCommandGroup heading="Suggestions">
+      <div uiCommandItem value="Calendar" (select)="open()">Calendar</div>
+    </div>
+  </div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-command class="max-w-sm rounded-lg border">
+  <ui-command-input-wrapper><ui-command-input placeholder="Search..." /></ui-command-input-wrapper>
+  <ui-command-list>
+    <ui-command-empty>No results found.</ui-command-empty>
+    <ui-command-group heading="Suggestions">
+      <ui-command-item value="Calendar" (select)="open()">Calendar</ui-command-item>
+    </ui-command-group>
+  </ui-command-list>
+</ui-command>
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `value` (item) | string | text content |
+| `keywords` (item) | string[] | `[]` |
+| `disabled` (item) | boolean | `false` |
+| `heading` (group) | string | `''` |
+| `(select)` | void event | - |
+
+Filtering is substring-based (no cmdk scoring/re-ordering). Needs the .no-scrollbar utility from the playground styles.css.
+
+Spec: docs/behavior-specs/command.md - Manual checks: docs/manual-tests/command.md

package/context-menu/README.md

@@ -0,0 +1,36 @@
+# Context Menu
+
+```ts
+import { UI_CONTEXT_MENU } from '@loomui-ng/ui/context-menu';
+// add to the component `imports` array
+```
+
+```html
+<div uiContextMenu>
+  <div uiContextMenuTrigger class="h-32 w-64 border">Right click</div>
+  <div uiContextMenuContent><div uiContextMenuItem>Back</div></div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-context-menu>
+  <ui-context-menu-trigger class="h-32 w-64 border">Right click</ui-context-menu-trigger>
+  <ui-context-menu-content><ui-context-menu-item>Back</ui-context-menu-item></ui-context-menu-content>
+</ui-context-menu>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `side` | `Side` | `'right'` |
+| `align` | `Align` | `'start'` |
+| `sideOffset` |  | `2` |
+| `variant` | `'default' \| 'destructive'` | `'default'` |
+| `inset` |  | `false` |
+| `checked` (model) |  | `false` |
+| `value` (model) | `string \| undefined` | `undefined` |
+
+Parts (selectors): `[uiContextMenu], ui-context-menu`, `[uiContextMenuTrigger], ui-context-menu-trigger`, `[uiContextMenuContent], ui-context-menu-content`, `[uiContextMenuItem], ui-context-menu-item`, `[uiContextMenuCheckboxItem], ui-context-menu-checkbox-item`, `[uiContextMenuRadioGroup], ui-context-menu-radio-group`, `[uiContextMenuRadioItem], ui-context-menu-radio-item`, `[uiContextMenuSub], ui-context-menu-sub`, `[uiContextMenuSubTrigger], ui-context-menu-sub-trigger`, `[uiContextMenuSubContent], ui-context-menu-sub-content`, `[uiContextMenuLabel], ui-context-menu-label`, `[uiContextMenuSeparator], ui-context-menu-separator`, `[uiContextMenuShortcut], ui-context-menu-shortcut`, `[uiContextMenuGroup], ui-context-menu-group`.
+
+Spec: `docs/behavior-specs/context-menu.md` · Manual test: `docs/manual-tests/context-menu.md`

package/data-table/README.md

@@ -0,0 +1,39 @@
+# Data Table
+
+```ts
+import { UI_DATA_TABLE } from '@loomui-ng/ui/data-table';
+// add to the component `imports` array
+```
+
+```html
+const features = tableFeatures({ rowSortingFeature, rowPaginationFeature, columnFilteringFeature, columnVisibilityFeature, rowSelectionFeature,
+  sortedRowModel: createSortedRowModel(), filteredRowModel: createFilteredRowModel(), paginatedRowModel: createPaginatedRowModel() });
+table = injectTable(() => ({ features, columns, data: DATA, getRowId: (r) => r.id }));
+
+<ui-data-table-view-options [table]="table" />
+<table uiTable> … @for (row of table.getRowModel().rows; track row.id) … </table>
+<ui-data-table-pagination [table]="table" />
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+const features = tableFeatures({ rowSortingFeature, rowPaginationFeature, columnFilteringFeature, columnVisibilityFeature, rowSelectionFeature,
+  sortedRowModel: createSortedRowModel(), filteredRowModel: createFilteredRowModel(), paginatedRowModel: createPaginatedRowModel() });
+table = injectTable(() => ({ features, columns, data: DATA, getRowId: (r) => r.id }));
+
+<ui-data-table-view-options [table]="table" />
+<ui-table> … @for (row of table.getRowModel().rows; track row.id) … </ui-table>
+<ui-data-table-pagination [table]="table" />
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `column` | `DataTableColumnLike` | required |
+| `title` | `string` | required |
+| `table` | `DataTableLike` | required |
+| `pageSizes` | `number[]` | `[10, 20, 30, 50]` |
+
+Parts (selectors): `ui-data-table-column-header`, `ui-data-table-view-options`, `ui-data-table-pagination`.
+
+Install `@tanstack/angular-table`. See `projects/playground/src/app/pages/data-table-page.ts` for the full demo. Spec: `docs/behavior-specs/data-table.md` · Manual test: `docs/manual-tests/data-table.md`

package/date-picker/README.md

@@ -0,0 +1,23 @@
+# Date Picker
+
+```ts
+import { UiDatePicker } from '@loomui-ng/ui/date-picker';
+// add to the component `imports` array
+```
+
+```html
+<ui-date-picker [(value)]="date" placeholder="Pick a date" />
+<ui-date-picker [formControl]="ctrl" />
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `value` (model) | `Date \| null` | `null` |
+| `placeholder` |  | `'Pick a date'` |
+| `locale` | `string \| undefined` | `undefined` |
+| `disabled` |  | `false` |
+| `invalid` |  | `false` |
+
+Parts (selectors): `ui-date-picker`.
+
+Spec: `docs/behavior-specs/date-picker.md` · Manual test: `docs/manual-tests/date-picker.md`

package/dialog/README.md

@@ -0,0 +1,52 @@
+# uiDialog
+
+```ts
+import { UI_DIALOG } from '@loomui-ng/ui/dialog';
+// add to the component imports array
+```
+
+```html
+<div uiDialog [(open)]="open" class="contents">
+  <button uiButton variant="outline" uiDialogTrigger>Open Dialog</button>
+  <div uiDialogContent>
+    <div uiDialogHeader>
+      <h2 uiDialogTitle>Edit profile</h2>
+      <p uiDialogDescription>Make changes here.</p>
+    </div>
+    <input uiInput value="Pedro" />
+    <div uiDialogFooter>
+      <button uiButton variant="outline" uiDialogClose>Cancel</button>
+      <button uiButton uiDialogClose>Save</button>
+    </div>
+  </div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-dialog [(open)]="open" class="contents">
+  <ui-button variant="outline" uiDialogTrigger>Open Dialog</ui-button>
+  <ui-dialog-content>
+    <ui-dialog-header>
+      <ui-dialog-title>Edit profile</ui-dialog-title>
+      <ui-dialog-description>Make changes here.</ui-dialog-description>
+    </ui-dialog-header>
+    <ui-input value="Pedro" />
+    <ui-dialog-footer>
+      <ui-button variant="outline" uiDialogClose>Cancel</ui-button>
+      <ui-button uiDialogClose>Save</ui-button>
+    </ui-dialog-footer>
+  </ui-dialog-content>
+</ui-dialog>
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `open` (uiDialog) | model boolean | `false` |
+| `showCloseButton` (uiDialogContent) | boolean | `true` |
+| `class` | extra classes | - |
+
+Content moves to the CDK overlay while open and stays in the component DOM (hidden) otherwise. Focus is trapped, first tabbable element focused, focus returns to the trigger. Needs `@angular/cdk/overlay-prebuilt.css` and the data-open/data-closed custom variants (see libs/ui/README.md).
+
+Spec: docs/behavior-specs/dialog.md - Manual checks: docs/manual-tests/dialog.md

package/direction/README.md

@@ -0,0 +1,19 @@
+# Direction
+
+```ts
+import { UI_DIRECTION } from '@loomui-ng/ui/direction';
+// add to the component `imports` array
+```
+
+```html
+<div [uiDirection]="'rtl'">…components…</div>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `attrDir` | `Direction \| ''` | `''` |
+| `elDir` | `Direction \| ''` | `''` |
+
+Parts (selectors): `[uiDirection], ui-direction`.
+
+Spec: `docs/behavior-specs/direction.md` · Manual test: `docs/manual-tests/direction.md`

package/drawer/README.md

@@ -0,0 +1,37 @@
+# Drawer
+
+```ts
+import { UI_DRAWER } from '@loomui-ng/ui/drawer';
+// add to the component `imports` array
+```
+
+```html
+<div uiDrawer>
+  <button uiButton uiDrawerTrigger>Open</button>
+  <div uiDrawerContent>
+    <div uiDrawerHeader><h2 uiDrawerTitle>Move goal</h2></div>
+    <div uiDrawerFooter><button uiDrawerClose>Cancel</button></div>
+  </div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-drawer>
+  <ui-button uiDrawerTrigger>Open</ui-button>
+  <ui-drawer-content>
+    <ui-drawer-header><ui-drawer-title>Move goal</ui-drawer-title></ui-drawer-header>
+    <ui-drawer-footer><ui-drawer-close>Cancel</ui-drawer-close></ui-drawer-footer>
+  </ui-drawer-content>
+</ui-drawer>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `direction` | `Direction` | `'bottom'` |
+| `disabled` |  | `false` |
+
+Parts (selectors): `[uiDrawer], ui-drawer`, `[uiDrawerTrigger], ui-drawer-trigger`, `[uiDrawerContent], ui-drawer-content`, `[uiDrawerHeader], ui-drawer-header`, `[uiDrawerFooter], ui-drawer-footer`, `[uiDrawerTitle], ui-drawer-title`, `[uiDrawerDescription], ui-drawer-description`, `button[uiDrawerClose], ui-drawer-close`.
+
+Spec: `docs/behavior-specs/drawer.md` · Manual test: `docs/manual-tests/drawer.md`

package/dropdown-menu/README.md

@@ -0,0 +1,46 @@
+# uiDropdownMenu
+
+```ts
+import { UI_DROPDOWN_MENU } from '@loomui-ng/ui/dropdown-menu';
+// add to the component imports array
+```
+
+```html
+<div uiDropdownMenu class="contents">
+  <button uiButton variant="outline" uiDropdownMenuTrigger>Open</button>
+  <div uiDropdownMenuContent class="w-56">
+    <div uiDropdownMenuLabel>My Account</div>
+    <div uiDropdownMenuItem (select)="go()">Profile <span uiDropdownMenuShortcut>Ctrl+P</span></div>
+    <div uiDropdownMenuCheckboxItem [(checked)]="bar">Status Bar</div>
+    <div uiDropdownMenuSeparator></div>
+    <div uiDropdownMenuItem variant="destructive">Log out</div>
+  </div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-dropdown-menu class="contents">
+  <ui-button variant="outline" uiDropdownMenuTrigger>Open</ui-button>
+  <ui-dropdown-menu-content class="w-56">
+    <ui-dropdown-menu-label>My Account</ui-dropdown-menu-label>
+    <ui-dropdown-menu-item (select)="go()">Profile <ui-dropdown-menu-shortcut>Ctrl+P</ui-dropdown-menu-shortcut></ui-dropdown-menu-item>
+    <ui-dropdown-menu-checkbox-item [(checked)]="bar">Status Bar</ui-dropdown-menu-checkbox-item>
+    <ui-dropdown-menu-separator></ui-dropdown-menu-separator>
+    <ui-dropdown-menu-item variant="destructive">Log out</ui-dropdown-menu-item>
+  </ui-dropdown-menu-content>
+</ui-dropdown-menu>
+```
+
+| Input | Values | Default |
+|---|---|---|
+| `open` (uiDropdownMenu) | model boolean | `false` |
+| `variant` (item) | `default` `destructive` | `default` |
+| `checked` (checkbox item) | model boolean | `false` |
+| `value` (radio group / item) | model string | - |
+| `(select)` | event with `preventDefault()` | - |
+
+Not implemented: sub-menus, context menu. Parts: Item, CheckboxItem, RadioGroup, RadioItem, Label, Separator, Shortcut, Group.
+
+Spec: docs/behavior-specs/dropdown-menu.md - Manual checks: docs/manual-tests/dropdown-menu.md

package/empty/README.md

@@ -0,0 +1,38 @@
+# Empty
+
+```ts
+import { UI_EMPTY_GENERATED } from '@loomui-ng/ui/empty';
+// add to the component `imports` array
+```
+
+```html
+<div uiEmpty>
+  <div uiEmptyHeader>
+    <div uiEmptyIcon>…</div>
+    <div uiEmptyTitle>No projects</div>
+    <p uiEmptyDescription>Create one to get started.</p>
+  </div>
+  <div uiEmptyContent><button uiButton>New project</button></div>
+</div>
+```
+
+Same thing as custom elements (identical inputs; directives keep working):
+
+```html
+<ui-empty>
+  <ui-empty-header>
+    <ui-empty-icon>…</ui-empty-icon>
+    <ui-empty-title>No projects</ui-empty-title>
+    <ui-empty-description>Create one to get started.</ui-empty-description>
+  </ui-empty-header>
+  <ui-empty-content><ui-button>New project</ui-button></ui-empty-content>
+</ui-empty>
+```
+
+| Input / output | Type / values | Default |
+|---|---|---|
+| `variant` | `'icon' \| 'default'` | `'default'` |
+
+Parts (selectors): `[uiEmpty], ui-empty`, `[uiEmptyHeader], ui-empty-header`, `[uiEmptyIcon], ui-empty-icon`, `[uiEmptyTitle], ui-empty-title`, `[uiEmptyDescription], ui-empty-description`, `[uiEmptyContent], ui-empty-content`.
+
+Spec: `docs/behavior-specs/empty.md` · Manual test: `docs/manual-tests/empty.md`