@xui/menubar 2.0.0-alpha.20 → 2.0.0-alpha.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/xui-menubar.mjs
CHANGED
|
@@ -19,6 +19,7 @@ import { xui } from '@xui/core';
|
|
|
19
19
|
* ```
|
|
20
20
|
*/
|
|
21
21
|
class XuiMenubar {
|
|
22
|
+
/** Extra classes, merged into the directive's own rather than replacing them. */
|
|
22
23
|
class = input('', /* @ts-ignore */
|
|
23
24
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
24
25
|
computedClass = computed(() => xui('border-border bg-surface inline-flex items-center gap-0.5 rounded-md border p-1', this.class()), /* @ts-ignore */
|
|
@@ -43,6 +44,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
43
44
|
* menu). Point `xuiMenubarTriggerFor` at an `<ng-template>` holding an `<xui-menu>`.
|
|
44
45
|
*/
|
|
45
46
|
class XuiMenubarTrigger {
|
|
47
|
+
/** Extra classes, merged into the directive's own rather than replacing them. */
|
|
46
48
|
class = input('', /* @ts-ignore */
|
|
47
49
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
48
50
|
computedClass = computed(() => xui(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xui-menubar.mjs","sources":["../../../../../../libs/ui/menubar/xui/src/lib/menubar.ts","../../../../../../libs/ui/menubar/xui/src/index.ts","../../../../../../libs/ui/menubar/xui/src/xui-menubar.ts"],"sourcesContent":["import { CdkMenuBar, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';\nimport { computed, Directive, input } from '@angular/core';\nimport { xui } from '@xui/core';\nimport type { ClassValue } from 'clsx';\n\n/**\n * A horizontal application menu bar (File / Edit / View …). Built on\n * `@angular/cdk/menu`'s `CdkMenuBar`, so it gets roving tab focus, arrow-key\n * movement between menus, open-adjacent-on-arrow, and hover-to-switch once a\n * menu is open. Fill the dropdowns with `@xui/menu` (`<xui-menu>` /\n * `[xuiMenuItem]`).\n *\n * ```html\n * <div xuiMenubar>\n * <button xuiMenubarTrigger [xuiMenubarTriggerFor]=\"file\">File</button>\n * </div>\n * <ng-template #file><xui-menu><button xuiMenuItem>New</button></xui-menu></ng-template>\n * ```\n */\n@Directive({\n selector: '[xuiMenubar]',\n exportAs: 'xuiMenubar',\n hostDirectives: [CdkMenuBar],\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiMenubar {\n readonly class = input<ClassValue>('');\n\n protected readonly computedClass = computed(() =>\n xui('border-border bg-surface inline-flex items-center gap-0.5 rounded-md border p-1', this.class())\n );\n}\n\n/**\n * A top-level menu bar item that opens a menu. It is both a `CdkMenuItem` (so it\n * takes part in the bar's roving focus) and a `CdkMenuTrigger` (so it opens its\n * menu). Point `xuiMenubarTriggerFor` at an `<ng-template>` holding an `<xui-menu>`.\n */\n@Directive({\n selector: 'button[xuiMenubarTrigger]',\n exportAs: 'xuiMenubarTrigger',\n hostDirectives: [\n CdkMenuItem,\n {\n directive: CdkMenuTrigger,\n inputs: ['cdkMenuTriggerFor: xuiMenubarTriggerFor', 'cdkMenuPosition: xuiMenubarTriggerPosition'],\n outputs: ['cdkMenuOpened: menuOpened', 'cdkMenuClosed: menuClosed']\n }\n ],\n host: {\n type: 'button',\n '[class]': 'computedClass()'\n }\n})\nexport class XuiMenubarTrigger {\n readonly class = input<ClassValue>('');\n\n protected readonly computedClass = computed(() =>\n xui(\n // Hover and open are the overlay tokens rather than a surface step: the bar is `surface`,\n // and `surface-inset` is the same colour as it in the dark theme, so an item lit that way\n // was marked by nothing at all. The overlays are translucent, so they read on either.\n 'text-foreground hover:bg-hover-overlay aria-expanded:bg-active-overlay flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium transition-colors select-none',\n // The bar's roving focus moves between items with the arrow keys, so the\n // ring is the only thing telling the user where they are. Inset so it is\n // not clipped by the bar's padding.\n 'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus',\n this.class()\n )\n );\n}\n","import { XuiMenubar, XuiMenubarTrigger } from './lib/menubar';\n\nexport * from './lib/menubar';\n\nexport const XuiMenubarImports = [XuiMenubar, XuiMenubarTrigger] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAKA;;;;;;;;;;;;;AAaG;MASU,UAAU,CAAA
|
|
1
|
+
{"version":3,"file":"xui-menubar.mjs","sources":["../../../../../../libs/ui/menubar/xui/src/lib/menubar.ts","../../../../../../libs/ui/menubar/xui/src/index.ts","../../../../../../libs/ui/menubar/xui/src/xui-menubar.ts"],"sourcesContent":["import { CdkMenuBar, CdkMenuItem, CdkMenuTrigger } from '@angular/cdk/menu';\nimport { computed, Directive, input } from '@angular/core';\nimport { xui } from '@xui/core';\nimport type { ClassValue } from 'clsx';\n\n/**\n * A horizontal application menu bar (File / Edit / View …). Built on\n * `@angular/cdk/menu`'s `CdkMenuBar`, so it gets roving tab focus, arrow-key\n * movement between menus, open-adjacent-on-arrow, and hover-to-switch once a\n * menu is open. Fill the dropdowns with `@xui/menu` (`<xui-menu>` /\n * `[xuiMenuItem]`).\n *\n * ```html\n * <div xuiMenubar>\n * <button xuiMenubarTrigger [xuiMenubarTriggerFor]=\"file\">File</button>\n * </div>\n * <ng-template #file><xui-menu><button xuiMenuItem>New</button></xui-menu></ng-template>\n * ```\n */\n@Directive({\n selector: '[xuiMenubar]',\n exportAs: 'xuiMenubar',\n hostDirectives: [CdkMenuBar],\n host: {\n '[class]': 'computedClass()'\n }\n})\nexport class XuiMenubar {\n /** Extra classes, merged into the directive's own rather than replacing them. */\n readonly class = input<ClassValue>('');\n\n protected readonly computedClass = computed(() =>\n xui('border-border bg-surface inline-flex items-center gap-0.5 rounded-md border p-1', this.class())\n );\n}\n\n/**\n * A top-level menu bar item that opens a menu. It is both a `CdkMenuItem` (so it\n * takes part in the bar's roving focus) and a `CdkMenuTrigger` (so it opens its\n * menu). Point `xuiMenubarTriggerFor` at an `<ng-template>` holding an `<xui-menu>`.\n */\n@Directive({\n selector: 'button[xuiMenubarTrigger]',\n exportAs: 'xuiMenubarTrigger',\n hostDirectives: [\n CdkMenuItem,\n {\n directive: CdkMenuTrigger,\n inputs: ['cdkMenuTriggerFor: xuiMenubarTriggerFor', 'cdkMenuPosition: xuiMenubarTriggerPosition'],\n outputs: ['cdkMenuOpened: menuOpened', 'cdkMenuClosed: menuClosed']\n }\n ],\n host: {\n type: 'button',\n '[class]': 'computedClass()'\n }\n})\nexport class XuiMenubarTrigger {\n /** Extra classes, merged into the directive's own rather than replacing them. */\n readonly class = input<ClassValue>('');\n\n protected readonly computedClass = computed(() =>\n xui(\n // Hover and open are the overlay tokens rather than a surface step: the bar is `surface`,\n // and `surface-inset` is the same colour as it in the dark theme, so an item lit that way\n // was marked by nothing at all. The overlays are translucent, so they read on either.\n 'text-foreground hover:bg-hover-overlay aria-expanded:bg-active-overlay flex items-center gap-1.5 rounded px-3 py-1.5 text-sm font-medium transition-colors select-none',\n // The bar's roving focus moves between items with the arrow keys, so the\n // ring is the only thing telling the user where they are. Inset so it is\n // not clipped by the bar's padding.\n 'focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus',\n this.class()\n )\n );\n}\n","import { XuiMenubar, XuiMenubarTrigger } from './lib/menubar';\n\nexport * from './lib/menubar';\n\nexport const XuiMenubarImports = [XuiMenubar, XuiMenubarTrigger] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xui/menubar",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.21",
|
|
4
4
|
"description": "Modern Angular 22 UI Library based on TailwindCSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@angular/cdk": "22",
|
|
40
40
|
"@angular/core": "22",
|
|
41
|
-
"@xui/core": "2.0.0-alpha.
|
|
41
|
+
"@xui/core": "2.0.0-alpha.21",
|
|
42
42
|
"clsx": "^2.1.1"
|
|
43
43
|
},
|
|
44
44
|
"publishConfig": {
|
package/types/xui-menubar.d.ts
CHANGED
|
@@ -17,6 +17,7 @@ import * as i1 from '@angular/cdk/menu';
|
|
|
17
17
|
* ```
|
|
18
18
|
*/
|
|
19
19
|
declare class XuiMenubar {
|
|
20
|
+
/** Extra classes, merged into the directive's own rather than replacing them. */
|
|
20
21
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
21
22
|
protected readonly computedClass: _angular_core.Signal<string>;
|
|
22
23
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiMenubar, never>;
|
|
@@ -28,6 +29,7 @@ declare class XuiMenubar {
|
|
|
28
29
|
* menu). Point `xuiMenubarTriggerFor` at an `<ng-template>` holding an `<xui-menu>`.
|
|
29
30
|
*/
|
|
30
31
|
declare class XuiMenubarTrigger {
|
|
32
|
+
/** Extra classes, merged into the directive's own rather than replacing them. */
|
|
31
33
|
readonly class: _angular_core.InputSignal<ClassValue>;
|
|
32
34
|
protected readonly computedClass: _angular_core.Signal<string>;
|
|
33
35
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<XuiMenubarTrigger, never>;
|