@api-client/ui 0.2.12 → 0.2.13
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/build/src/elements/file-system/internals/Breadcrumbs.d.ts +2 -1
- package/build/src/elements/file-system/internals/Breadcrumbs.d.ts.map +1 -1
- package/build/src/elements/file-system/internals/Breadcrumbs.js +3 -4
- package/build/src/elements/file-system/internals/Breadcrumbs.js.map +1 -1
- package/package.json +1 -1
- package/src/elements/file-system/internals/Breadcrumbs.ts +3 -4
|
@@ -11,7 +11,8 @@ import '@material/web/focus/md-focus-ring.js';
|
|
|
11
11
|
export default class Breadcrumbs extends LitElement {
|
|
12
12
|
static shadowRootOptions: ShadowRootInit;
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
14
|
+
* The list of breadcrumbs to render.
|
|
15
|
+
* The breadcrumbs should be ordered from the root to the current folder.
|
|
15
16
|
*/
|
|
16
17
|
accessor breadcrumbs: LiveData<FileBreadcrumb[]> | undefined;
|
|
17
18
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../src/elements/file-system/internals/Breadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAA;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAG3E,OAAO,yCAAyC,CAAA;AAChD,OAAO,4BAA4B,CAAA;AACnC,OAAO,sCAAsC,CAAA;AAE7C;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,UAAU;IACjD,OAAgB,iBAAiB,EAAE,cAAc,CAGhD;IAED
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../../src/elements/file-system/internals/Breadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,cAAc,EAAQ,MAAM,KAAK,CAAA;AAEtE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,uCAAuC,CAAA;AAG3E,OAAO,yCAAyC,CAAA;AAChD,OAAO,4BAA4B,CAAA;AACnC,OAAO,sCAAsC,CAAA;AAE7C;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,UAAU;IACjD,OAAgB,iBAAiB,EAAE,cAAc,CAGhD;IAED;;;OAGG;IACyB,QAAQ,CAAC,WAAW,EAAE,QAAQ,CAAC,cAAc,EAAE,CAAC,GAAG,SAAS,CAAA;IAExF;;;;OAIG;IACiD,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;;cAStE,OAAO,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAY1D,cAAc,IAAI,IAAI;IAItB,SAAS,CAAC,eAAe,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAazC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAY3B,YAAY,IAAI,IAAI;cAWD,MAAM,IAAI,cAAc;IAe3C,UAAU,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,UAAQ,GAAG,cAAc;IAQhE,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,cAAc;IAiBhD,YAAY,CAAC,IAAI,EAAE,cAAc,GAAG,cAAc;IAUlD,eAAe,IAAI,cAAc;CAGlC"}
|
|
@@ -28,7 +28,8 @@ let Breadcrumbs = (() => {
|
|
|
28
28
|
};
|
|
29
29
|
#breadcrumbs_accessor_storage = __runInitializers(this, _breadcrumbs_initializers, void 0);
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
31
|
+
* The list of breadcrumbs to render.
|
|
32
|
+
* The breadcrumbs should be ordered from the root to the current folder.
|
|
32
33
|
*/
|
|
33
34
|
get breadcrumbs() { return this.#breadcrumbs_accessor_storage; }
|
|
34
35
|
set breadcrumbs(value) { this.#breadcrumbs_accessor_storage = value; }
|
|
@@ -94,9 +95,7 @@ let Breadcrumbs = (() => {
|
|
|
94
95
|
}
|
|
95
96
|
render() {
|
|
96
97
|
const { breadcrumbs, rootName } = this;
|
|
97
|
-
const items = Array.from(breadcrumbs?.value || [])
|
|
98
|
-
.filter((i) => i.kind === FolderKind)
|
|
99
|
-
.reverse();
|
|
98
|
+
const items = Array.from(breadcrumbs?.value || []).filter((i) => i.kind === FolderKind);
|
|
100
99
|
if (rootName) {
|
|
101
100
|
items.unshift({ key: '', name: rootName, kind: 'root' });
|
|
102
101
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../../../src/elements/file-system/internals/Breadcrumbs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAkC,IAAI,EAAE,MAAM,KAAK,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAG5C,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAE7D,OAAO,yCAAyC,CAAA;AAChD,OAAO,4BAA4B,CAAA;AACnC,OAAO,sCAAsC,CAAA;;sBAMJ,UAAU;;;;;;;iBAA9B,WAAY,SAAQ,WAAU;;;
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../../../../../src/elements/file-system/internals/Breadcrumbs.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, TemplateResult, html } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { LiveData } from '../../../reactive/LiveData.js'\nimport { type FileBreadcrumb } from '@api-client/core/models/store/File.js'\nimport { FolderKind } from '@api-client/core/models/kinds.js'\n\nimport '@material/web/iconbutton/icon-button.js'\nimport '@material/web/icon/icon.js'\nimport '@material/web/focus/md-focus-ring.js'\n\n/**\n * @fires navigate - Dispatched when a navigation item is activated.\n * The detail object is the `FileBreadcrumb` interface. The root object has the `id` set to empty string.\n */\nexport default class Breadcrumbs extends LitElement {\n static override shadowRootOptions: ShadowRootInit = {\n mode: 'open',\n delegatesFocus: true,\n }\n\n /**\n * The list of breadcrumbs to render.\n * The breadcrumbs should be ordered from the root to the current folder.\n */\n @property({ type: Object }) accessor breadcrumbs: LiveData<FileBreadcrumb[]> | undefined\n\n /**\n * When set it renders the special root folder with the name set on this property.\n * When the root object is clicked then the `navigate` event is dispatched without the `key` property set.\n * @attribute root-name\n */\n @property({ type: String, attribute: 'root-name' }) accessor rootName: string | undefined\n\n constructor() {\n super()\n this.role = 'navigation'\n this.ariaLabel = 'Breadcrumbs'\n this.handleLiveData = this.handleLiveData.bind(this)\n }\n\n protected override updated(cp: PropertyValues<this>): void {\n if (cp.has('breadcrumbs')) {\n const old = cp.get('breadcrumbs')\n if (old) {\n old.removeEventListener('update', this.handleLiveData)\n }\n if (this.breadcrumbs) {\n this.breadcrumbs.addEventListener('update', this.handleLiveData)\n }\n }\n }\n\n handleLiveData(): void {\n this.requestUpdate()\n }\n\n protected handleLinkClick(e: Event): void {\n const target = e.target as HTMLElement\n const { key, kind } = target.dataset\n if (kind === 'root') {\n this.navigateRoot()\n return\n }\n if (!key) {\n return\n }\n this.navigate(key)\n }\n\n navigate(key: string): void {\n const { breadcrumbs } = this\n if (!breadcrumbs) {\n return\n }\n const item = breadcrumbs.value.find((i) => i.key === key)\n if (!item) {\n return\n }\n this.dispatchEvent(new CustomEvent<FileBreadcrumb>('navigate', { detail: item }))\n }\n\n navigateRoot(): void {\n this.dispatchEvent(\n new CustomEvent<Partial<FileBreadcrumb>>('navigate', {\n detail: {\n kind: 'root',\n name: this.rootName as string,\n },\n })\n )\n }\n\n protected override render(): TemplateResult {\n const { breadcrumbs, rootName } = this\n const items = Array.from(breadcrumbs?.value || []).filter((i) => i.kind === FolderKind)\n if (rootName) {\n items.unshift({ key: '', name: rootName, kind: 'root' })\n }\n return html`\n <div class=\"container\" role=\"list\">\n ${items.map((item, index) => {\n return this.renderItem(item, index === items.length - 1)\n })}\n </div>\n `\n }\n\n renderItem(item: FileBreadcrumb, isLast = false): TemplateResult {\n const content = isLast ? this.renderButton(item) : this.renderLink(item)\n return html`\n <div class=\"item spacing-headline-small\" role=\"listitem\">${content}</div>\n ${isLast ? '' : this.renderSeparator()}\n `\n }\n\n renderLink(item: FileBreadcrumb): TemplateResult {\n const { key, kind, name } = item\n return html`\n <div\n tabindex=\"0\"\n role=\"link\"\n data-key=\"${key}\"\n data-kind=\"${kind}\"\n class=\"link-button\"\n @click=\"${this.handleLinkClick}\"\n >\n <md-focus-ring part=\"focus-ring\"></md-focus-ring>\n ${name}\n </div>\n `\n }\n\n renderButton(item: FileBreadcrumb): TemplateResult {\n const { key, kind, name } = item\n return html`\n <div tabindex=\"0\" role=\"button\" data-key=\"${key}\" data-kind=\"${kind}\" class=\"action-button\" aria-current=\"page\">\n <md-focus-ring part=\"focus-ring\"></md-focus-ring>\n ${name}\n </div>\n `\n }\n\n renderSeparator(): TemplateResult {\n return html`<md-icon class=\"separator\">chevron_right</md-icon>`\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -19,7 +19,8 @@ export default class Breadcrumbs extends LitElement {
|
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
/**
|
|
22
|
-
*
|
|
22
|
+
* The list of breadcrumbs to render.
|
|
23
|
+
* The breadcrumbs should be ordered from the root to the current folder.
|
|
23
24
|
*/
|
|
24
25
|
@property({ type: Object }) accessor breadcrumbs: LiveData<FileBreadcrumb[]> | undefined
|
|
25
26
|
|
|
@@ -91,9 +92,7 @@ export default class Breadcrumbs extends LitElement {
|
|
|
91
92
|
|
|
92
93
|
protected override render(): TemplateResult {
|
|
93
94
|
const { breadcrumbs, rootName } = this
|
|
94
|
-
const items = Array.from(breadcrumbs?.value || [])
|
|
95
|
-
.filter((i) => i.kind === FolderKind)
|
|
96
|
-
.reverse()
|
|
95
|
+
const items = Array.from(breadcrumbs?.value || []).filter((i) => i.kind === FolderKind)
|
|
97
96
|
if (rootName) {
|
|
98
97
|
items.unshift({ key: '', name: rootName, kind: 'root' })
|
|
99
98
|
}
|