@xui/menubar 2.0.0-alpha.15 → 2.0.0-alpha.17
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/README.md +1 -1
- package/fesm2022/xui-menubar.mjs +5 -1
- package/fesm2022/xui-menubar.mjs.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -127,7 +127,7 @@ The full token reference, rendered in both themes, is the **Design tokens** page
|
|
|
127
127
|
|
|
128
128
|
**Date & time** — [`@xui/date-input`](https://www.npmjs.com/package/@xui/date-input) · [`@xui/date-picker`](https://www.npmjs.com/package/@xui/date-picker) · [`@xui/date-range-input`](https://www.npmjs.com/package/@xui/date-range-input) · [`@xui/date-range-picker`](https://www.npmjs.com/package/@xui/date-range-picker) · [`@xui/time-picker`](https://www.npmjs.com/package/@xui/time-picker) · [`@xui/timezone-select`](https://www.npmjs.com/package/@xui/timezone-select)
|
|
129
129
|
|
|
130
|
-
**Data display** — [`@xui/avatar`](https://www.npmjs.com/package/@xui/avatar) · [`@xui/
|
|
130
|
+
**Data display** — [`@xui/avatar`](https://www.npmjs.com/package/@xui/avatar) · [`@xui/card`](https://www.npmjs.com/package/@xui/card) · [`@xui/card-list`](https://www.npmjs.com/package/@xui/card-list) · [`@xui/carousel`](https://www.npmjs.com/package/@xui/carousel) · [`@xui/data-table`](https://www.npmjs.com/package/@xui/data-table) · [`@xui/descriptions`](https://www.npmjs.com/package/@xui/descriptions) · [`@xui/entity-title`](https://www.npmjs.com/package/@xui/entity-title) · [`@xui/kbd`](https://www.npmjs.com/package/@xui/kbd) · [`@xui/statistic`](https://www.npmjs.com/package/@xui/statistic) · [`@xui/status`](https://www.npmjs.com/package/@xui/status) · [`@xui/table`](https://www.npmjs.com/package/@xui/table) · [`@xui/tag`](https://www.npmjs.com/package/@xui/tag) · [`@xui/timeline`](https://www.npmjs.com/package/@xui/timeline) · [`@xui/tree`](https://www.npmjs.com/package/@xui/tree)
|
|
131
131
|
|
|
132
132
|
**Navigation** — [`@xui/breadcrumb`](https://www.npmjs.com/package/@xui/breadcrumb) · [`@xui/menubar`](https://www.npmjs.com/package/@xui/menubar) · [`@xui/navbar`](https://www.npmjs.com/package/@xui/navbar) · [`@xui/navigation-menu`](https://www.npmjs.com/package/@xui/navigation-menu) · [`@xui/pagination`](https://www.npmjs.com/package/@xui/pagination) · [`@xui/panel-stack`](https://www.npmjs.com/package/@xui/panel-stack) · [`@xui/steps`](https://www.npmjs.com/package/@xui/steps) · [`@xui/tabs`](https://www.npmjs.com/package/@xui/tabs)
|
|
133
133
|
|
package/fesm2022/xui-menubar.mjs
CHANGED
|
@@ -45,7 +45,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
45
45
|
class XuiMenubarTrigger {
|
|
46
46
|
class = input('', /* @ts-ignore */
|
|
47
47
|
...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
|
|
48
|
-
computedClass = computed(() => xui(
|
|
48
|
+
computedClass = computed(() => xui(
|
|
49
|
+
// Hover and open are the overlay tokens rather than a surface step: the bar is `surface`,
|
|
50
|
+
// and `surface-inset` is the same colour as it in the dark theme, so an item lit that way
|
|
51
|
+
// was marked by nothing at all. The overlays are translucent, so they read on either.
|
|
52
|
+
'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',
|
|
49
53
|
// The bar's roving focus moves between items with the arrow keys, so the
|
|
50
54
|
// ring is the only thing telling the user where they are. Inset so it is
|
|
51
55
|
// not clipped by the bar's padding.
|
|
@@ -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 'text-foreground hover:bg-
|
|
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;IACZ,KAAK,GAAG,KAAK,CAAa,EAAE;8EAAC;AAEnB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAC1C,GAAG,CAAC,iFAAiF,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;sFACrG;0HALU,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;8GAAV,UAAU,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,UAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAV,UAAU,EAAA,UAAA,EAAA,CAAA;kBARtB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,QAAQ,EAAE,YAAY;oBACtB,cAAc,EAAE,CAAC,UAAU,CAAC;AAC5B,oBAAA,IAAI,EAAE;AACJ,wBAAA,SAAS,EAAE;AACZ;AACF,iBAAA;;AASD;;;;AAIG;MAiBU,iBAAiB,CAAA;IACnB,KAAK,GAAG,KAAK,CAAa,EAAE;8EAAC;AAEnB,IAAA,aAAa,GAAG,QAAQ,CAAC,MAC1C,GAAG;;;;IAID,wKAAwK;;;;AAIxK,IAAA,qFAAqF,EACrF,IAAI,CAAC,KAAK,EAAE,CACb;sFACF;0HAfU,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;8GAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,WAAA,EAAA,EAAA,EAAA,SAAA,EAAA,EAAA,CAAA,cAAA,EAAA,MAAA,EAAA,CAAA,mBAAA,EAAA,sBAAA,EAAA,iBAAA,EAAA,2BAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,YAAA,EAAA,eAAA,EAAA,YAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAjB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAhB7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,2BAA2B;AACrC,oBAAA,QAAQ,EAAE,mBAAmB;AAC7B,oBAAA,cAAc,EAAE;wBACd,WAAW;AACX,wBAAA;AACE,4BAAA,SAAS,EAAE,cAAc;AACzB,4BAAA,MAAM,EAAE,CAAC,yCAAyC,EAAE,4CAA4C,CAAC;AACjG,4BAAA,OAAO,EAAE,CAAC,2BAA2B,EAAE,2BAA2B;AACnE;AACF,qBAAA;AACD,oBAAA,IAAI,EAAE;AACJ,wBAAA,IAAI,EAAE,QAAQ;AACd,wBAAA,SAAS,EAAE;AACZ;AACF,iBAAA;;;MCnDY,iBAAiB,GAAG,CAAC,UAAU,EAAE,iBAAiB;;ACJ/D;;AAEG;;;;"}
|
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.17",
|
|
4
4
|
"description": "Modern Angular 22 UI Library based on TailwindCSS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"url": "https://github.com/rikarin/xui/issues"
|
|
14
14
|
},
|
|
15
15
|
"repository": "https://github.com/Rikarin/xui",
|
|
16
|
-
"license": "
|
|
16
|
+
"license": "Apache-2.0",
|
|
17
17
|
"author": "Jiu",
|
|
18
18
|
"maintainers": [
|
|
19
19
|
"Jiu",
|
|
@@ -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.17",
|
|
42
42
|
"clsx": "^2.1.1"
|
|
43
43
|
},
|
|
44
44
|
"publishConfig": {
|