@getflip/swirl-components 0.168.0 → 0.169.0
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/components.json +9 -1
- package/dist/cjs/swirl-image-grid-item.cjs.entry.js +9 -1
- package/dist/cjs/swirl-shell-layout.cjs.entry.js +3 -3
- package/dist/collection/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.js +9 -1
- package/dist/collection/components/swirl-image-grid-item/swirl-image-grid-item.stories.js +1 -1
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css +4 -0
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js +3 -2
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.spec.js +1 -1
- package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.stories.js +3 -1
- package/dist/components/assets/pdfjs/pdf.worker.min.js +1 -1
- package/dist/components/swirl-image-grid-item.js +9 -1
- package/dist/components/swirl-shell-layout.js +3 -3
- package/dist/esm/swirl-image-grid-item.entry.js +9 -1
- package/dist/esm/swirl-shell-layout.entry.js +3 -3
- package/dist/swirl-components/p-b4ba60d8.entry.js +1 -0
- package/dist/swirl-components/p-cffe1258.entry.js +1 -0
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/dist/types/components/swirl-image-grid-item/swirl-image-grid-item.d.ts +2 -0
- package/dist/types/components/swirl-shell-layout/swirl-shell-layout.d.ts +1 -0
- package/package.json +1 -1
- package/dist/swirl-components/p-6a8b8c25.entry.js +0 -1
- package/dist/swirl-components/p-c178103e.entry.js +0 -1
|
@@ -24,6 +24,14 @@ export class SwirlImageGridItem {
|
|
|
24
24
|
}
|
|
25
25
|
componentDidLoad() {
|
|
26
26
|
this.setupIntersectionObserver();
|
|
27
|
+
if (this.img?.complete) {
|
|
28
|
+
this.loaded = true;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
componentDidRender() {
|
|
32
|
+
if (this.img?.complete && !this.loaded) {
|
|
33
|
+
this.loaded = true;
|
|
34
|
+
}
|
|
27
35
|
}
|
|
28
36
|
disconnectedCallback() {
|
|
29
37
|
this.intersectionObserver?.disconnect();
|
|
@@ -54,7 +62,7 @@ export class SwirlImageGridItem {
|
|
|
54
62
|
this.loaded
|
|
55
63
|
? `url(${this.src})`
|
|
56
64
|
: undefined,
|
|
57
|
-
} }), this.loading !== "intersecting" || this.inViewport ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, src: this.src })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.loaded &&
|
|
65
|
+
} }), this.loading !== "intersecting" || this.inViewport ? (h("img", { alt: this.alt, class: "image-grid-item__image", loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.onError, onLoad: this.onLoad, ref: (el) => (this.img = el), src: this.src })) : (h("div", { class: "image-grid-item__loading-placeholder" })), this.loaded &&
|
|
58
66
|
!this.error &&
|
|
59
67
|
this.icon &&
|
|
60
68
|
!Boolean(this.overlay) && (h("div", { class: "image-grid-item__icon", innerHTML: this.icon })), this.overlay && (h("div", { class: "image-grid-item__overlay" }, this.overlay)), !this.loaded && (h("div", { class: "image-grid-item__spinner" }, h("swirl-spinner", null))), this.loaded && this.error && (h("div", { class: "image-grid-item__error" }, h("swirl-icon-error", { color: "critical" }))))));
|
|
@@ -227,6 +227,10 @@
|
|
|
227
227
|
justify-content: flex-end;
|
|
228
228
|
align-items: center;
|
|
229
229
|
gap: var(--s-space-8);
|
|
230
|
+
|
|
231
|
+
--swirl-ghost-button-background-default: var(--s-surface-sunken-default);
|
|
232
|
+
--swirl-ghost-button-background-hovered: var(--s-surface-sunken-hovered);
|
|
233
|
+
--swirl-ghost-button-background-pressed: var(--s-surface-sunken-pressed);
|
|
230
234
|
}
|
|
231
235
|
|
|
232
236
|
.shell-layout__logo {
|
|
@@ -5,6 +5,7 @@ const NAVIGATION_COLLAPSE_STORAGE_KEY = "SWIRL_SHELL_NAVIGATION_COLLAPSE_STATE";
|
|
|
5
5
|
const SIDEBAR_STORAGE_KEY = "SWIRL_SHELL_SIDEBAR_STATE";
|
|
6
6
|
/**
|
|
7
7
|
* @slot logo - Logo shown inside header.
|
|
8
|
+
* @slot avatar - User avatar positioned on the header's right-hand side.
|
|
8
9
|
* @slot header-tools - Tools positioned on the header's right-hand side.
|
|
9
10
|
* @slot mobile-header-tools - Tools positioned in the mobile drawer header.
|
|
10
11
|
* @slot nav - Items shown in the lower sidebar part.
|
|
@@ -109,9 +110,9 @@ export class SwirlShellLayout {
|
|
|
109
110
|
"shell-layout--navigation-collapsed": this.navigationCollapsed,
|
|
110
111
|
"shell-layout--sidebar-active": this.sidebarActive,
|
|
111
112
|
});
|
|
112
|
-
return (h(Host, null, h("div", { class: className }, h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { class: "shell-layout__header-left" }, h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-hamburger-menu", { size: 20 }), h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-icon-double-arrow-right", { size: 20 }), h("swirl-visually-hidden", null, this.navigationToggleLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, h("swirl-icon-arrow-back", { size: 20 }), h("swirl-visually-hidden", null, this.browserBackButtonLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, h("swirl-icon-arrow-forward", { size: 20 }), h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
|
|
113
|
+
return (h(Host, null, h("div", { class: className }, h("header", { class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { class: "shell-layout__header-left" }, h("button", { class: "shell-layout__header-tool shell-layout__navigation-toggle", onClick: this.onNavigationToggleClick, type: "button" }, h("swirl-icon-hamburger-menu", { size: 20 }), h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-icon-double-arrow-right", { size: 20 }), h("swirl-visually-hidden", null, this.navigationToggleLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserBackClick, type: "button" }, h("swirl-icon-arrow-back", { size: 20 }), h("swirl-visually-hidden", null, this.browserBackButtonLabel)), h("button", { class: "shell-layout__header-tool", onClick: this.onBrowserForwardClick, type: "button" }, h("swirl-icon-arrow-forward", { size: 20 }), h("swirl-visually-hidden", null, this.browserForwardButtonLabel))), h("div", { class: "shell-layout__logo" }, h("slot", { name: "logo" })), h("div", { class: "shell-layout__header-right" }, h("slot", { name: "header-tools" }), h("button", { class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", null, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
|
|
113
114
|
? this.sidebarToggleBadgeAriaLabel
|
|
114
|
-
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { name: "
|
|
115
|
+
: String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { name: "avatar" }))), h("div", { class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { class: "shell-layout__mobile-header" }, h("slot", { name: "mobile-logo" }), h("div", { class: "shell-layout__mobile-header-tools" }, h("slot", { name: "mobile-header-tools" }), h("button", { class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { size: 20 }), h("swirl-visually-hidden", null, this.hideMobileNavigationButtonLabel)))), h("div", { class: "shell-layout__nav-body" }, h("swirl-visually-hidden", null, h("span", { id: "main-navigation-label" }, this.navigationLabel)), h("slot", { name: "nav" }))), h("main", { class: "shell-layout__main", id: "main-content" }, h("slot", null)), h("aside", { class: "shell-layout__sidebar", ...{ inert: this.sidebarActive ? undefined : true } }, h("div", { class: "shell-layout__sidebar-body" }, h("div", { class: "shell-layout__sidebar-app-bar" }, h("slot", { name: "sidebar-app-bar" })), h("div", { class: "shell-layout__sidebar-content" }, h("slot", { name: "sidebar" })))))));
|
|
115
116
|
}
|
|
116
117
|
static get is() { return "swirl-shell-layout"; }
|
|
117
118
|
static get encapsulation() { return "scoped"; }
|
|
@@ -14,6 +14,6 @@ describe("swirl-shell-layout", () => {
|
|
|
14
14
|
<div slot="sidebar">Sidebar</div>
|
|
15
15
|
</swirl-shell-layout>`,
|
|
16
16
|
});
|
|
17
|
-
expect(page.root.innerHTML).toMatchInlineSnapshot(`"<!----> <div slot=\\"sidebar-header\\" hidden=\\"\\">Sidebar header</div> <div class=\\"shell-layout\\"><header class=\\"shell-layout__header\\" data-tauri-drag-region=\\"true\\"><button class=\\"shell-layout__skip-link\\" type=\\"button\\">Skip to main content</button><div class=\\"shell-layout__header-left\\"><button class=\\"shell-layout__header-tool shell-layout__navigation-toggle\\" type=\\"button\\"><swirl-icon-hamburger-menu size=\\"20\\"></swirl-icon-hamburger-menu><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-icon-double-arrow-right size=\\"20\\"></swirl-icon-double-arrow-right><swirl-visually-hidden>Toggle navigation</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-back size=\\"20\\"></swirl-icon-arrow-back><swirl-visually-hidden>Navigate back</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-forward size=\\"20\\"></swirl-icon-arrow-forward><swirl-visually-hidden>Navigate forward</swirl-visually-hidden></button></div><div class=\\"shell-layout__logo\\"> <div slot=\\"logo\\">Logo</div></div><div class=\\"shell-layout__header-right\\"><button class=\\"shell-layout__header-tool shell-layout__sidebar-toggle\\" type=\\"button\\"><swirl-icon glyph=\\"notifications\\" size=\\"20\\"></swirl-icon><swirl-visually-hidden>Toggle sidebar</swirl-visually-hidden></button>
|
|
17
|
+
expect(page.root.innerHTML).toMatchInlineSnapshot(`"<!----> <div slot=\\"sidebar-header\\" hidden=\\"\\">Sidebar header</div> <div class=\\"shell-layout\\"><header class=\\"shell-layout__header\\" data-tauri-drag-region=\\"true\\"><button class=\\"shell-layout__skip-link\\" type=\\"button\\">Skip to main content</button><div class=\\"shell-layout__header-left\\"><button class=\\"shell-layout__header-tool shell-layout__navigation-toggle\\" type=\\"button\\"><swirl-icon-hamburger-menu size=\\"20\\"></swirl-icon-hamburger-menu><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-icon-double-arrow-right size=\\"20\\"></swirl-icon-double-arrow-right><swirl-visually-hidden>Toggle navigation</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-back size=\\"20\\"></swirl-icon-arrow-back><swirl-visually-hidden>Navigate back</swirl-visually-hidden></button><button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-arrow-forward size=\\"20\\"></swirl-icon-arrow-forward><swirl-visually-hidden>Navigate forward</swirl-visually-hidden></button></div><div class=\\"shell-layout__logo\\"> <div slot=\\"logo\\">Logo</div></div><div class=\\"shell-layout__header-right\\"> <div slot=\\"header-tools\\">Tools</div><button class=\\"shell-layout__header-tool shell-layout__sidebar-toggle\\" type=\\"button\\"><swirl-icon glyph=\\"notifications\\" size=\\"20\\"></swirl-icon><swirl-visually-hidden>Toggle sidebar</swirl-visually-hidden></button> </div></header><div class=\\"shell-layout__mobile-nav-backdrop\\"></div><nav aria-labelledby=\\"main-navigation-label\\" class=\\"shell-layout__nav\\"><div class=\\"shell-layout__mobile-header\\"> <div slot=\\"mobile-logo\\">Mobile logo</div><div class=\\"shell-layout__mobile-header-tools\\"> <button class=\\"shell-layout__header-tool\\" type=\\"button\\"><swirl-icon-double-arrow-left size=\\"20\\"></swirl-icon-double-arrow-left><swirl-visually-hidden>Close navigation</swirl-visually-hidden></button></div></div><div class=\\"shell-layout__nav-body\\"><swirl-visually-hidden><span id=\\"main-navigation-label\\">Main</span></swirl-visually-hidden> <div slot=\\"nav\\">nav</div></div></nav><main class=\\"shell-layout__main\\" id=\\"main-content\\"> <div>Main</div> </main><aside class=\\"shell-layout__sidebar\\" inert=\\"\\"><div class=\\"shell-layout__sidebar-body\\"><div class=\\"shell-layout__sidebar-app-bar\\"></div><div class=\\"shell-layout__sidebar-content\\"> <div slot=\\"sidebar\\">Sidebar</div></div></div></aside></div>"`);
|
|
18
18
|
});
|
|
19
19
|
});
|
|
@@ -27,9 +27,11 @@ const Template = (args) => {
|
|
|
27
27
|
</a>
|
|
28
28
|
<img alt="Flip logo" slot="mobile-logo" src="/images/flip-logo.png">
|
|
29
29
|
|
|
30
|
-
<swirl-avatar label="John Doe" slot="
|
|
30
|
+
<swirl-avatar label="John Doe" slot="avatar" src="https://picsum.photos/id/433/144/144"></swirl-avatar>
|
|
31
31
|
<swirl-avatar label="John Doe" slot="mobile-header-tools" src="https://picsum.photos/id/433/144/144"></swirl-avatar>
|
|
32
32
|
|
|
33
|
+
<swirl-button label="Header tool" slot="header-tools" variant="outline"></swirl-button>
|
|
34
|
+
|
|
33
35
|
<div slot="nav">
|
|
34
36
|
<ul>
|
|
35
37
|
<li>
|