@navette-js/panels 1.0.0-beta.4 → 1.0.0-beta.5
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/THIRD-PARTY-NOTICES.md +1 -0
- package/dist/navette/navette/calendar.css +5 -5
- package/dist/navette/navette/motion.css +21 -21
- package/dist/navette/navette/motion.js +6 -6
- package/dist/navette/navette/security-keys.css +11 -0
- package/dist/navette/navette/security-keys.js +72 -0
- package/lib/auth.d.ts +17 -0
- package/lib/auth.js +70 -0
- package/lib/error-pages.d.ts +9 -0
- package/lib/error-pages.js +173 -0
- package/lib/import-export.d.ts +45 -2
- package/lib/import-export.js +235 -62
- package/lib/index.d.ts +447 -74
- package/lib/index.js +1280 -267
- package/lib/multi-factor.d.ts +348 -0
- package/lib/multi-factor.js +928 -0
- package/lib/qr-code.d.ts +16 -0
- package/lib/qr-code.js +255 -0
- package/lib/throttle.d.ts +10 -0
- package/lib/throttle.js +25 -0
- package/lib/topbar.d.ts +3 -1
- package/lib/topbar.js +18 -1
- package/lib/totp.d.ts +38 -0
- package/lib/totp.js +104 -0
- package/lib/webauthn.d.ts +155 -0
- package/lib/webauthn.js +287 -0
- package/lib/xlsx.d.ts +5 -0
- package/lib/xlsx.js +103 -1
- package/package.json +9 -9
- package/views/components/tenant-menu.ejs +3 -3
- package/views/errors/page.ejs +87 -0
- package/views/layout/base.ejs +2 -0
- package/views/livewire/sidebar.ejs +29 -15
- package/views/livewire/topbar.ejs +1 -1
- package/views/pages/page.ejs +53 -35
- package/views/pages/simple.ejs +4 -0
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
<ul class="fi-topbar-nav-groups">
|
|
30
30
|
<% for (const group of topNavigation) { %>
|
|
31
31
|
<% if (group.label) { %>
|
|
32
|
-
<div x-data="filamentDropdown({ isMenu: true })" class="fi-dropdown" ><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger" ><li class="<%- cls(['fi-topbar-item', { 'fi-active': group.isActive }]) %>"><button type="button" class="fi-topbar-item-btn"><span class="fi-topbar-item-label"> <%= group.label %> </span><%- icon('m-chevron-down', { attributes: attrs({ class: 'fi-topbar-group-toggle-icon' }) }) %></button></li></div><div x-cloak x-float.placement.bottom-start.flip.teleport.offset="{ offset: 8, }" x-ref="panel" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" role="menu" class="fi-dropdown-panel " style=""
|
|
32
|
+
<div x-data="filamentDropdown({ isMenu: true })" class="fi-dropdown" ><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger" ><li class="<%- cls(['fi-topbar-item', { 'fi-active': group.isActive }]) %>"><button type="button" class="fi-topbar-item-btn"><span class="fi-topbar-item-label"> <%= group.label %> </span><%- icon('m-chevron-down', { attributes: attrs({ class: 'fi-topbar-group-toggle-icon' }) }) %></button></li></div><div x-cloak x-float.placement.bottom-start.flip.teleport.offset="{ offset: 8, }" x-ref="panel" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" role="menu" class="fi-dropdown-panel " style="" ><% for (const list of group.lists) { %><div class="fi-dropdown-list"><% for (const item of list) { %><a href="<%= item.url %>"<% if (spa) { %> wire:navigate<% } %><% if (item.isActive) { %> aria-current="page"<% } %> class="<%- cls(['fi-dropdown-list-item', ...item.colorClasses]) %>" role="menuitem" tabindex="-1"><% if (item.icon) { %><%- icon(item.icon, item.isActive ? { attributes: attrs({ class: 'fi-color fi-color-primary' }) } : {}) %><% } %><span class="fi-dropdown-list-item-label"><%= item.label %></span><% if (item.badge !== null) { %><%- view('filament::components.badge', { label: item.badge, colorClasses: item.badgeColorClasses }) %><% } %></a><% } %></div><% } %></div></div>
|
|
33
33
|
<% } else { %>
|
|
34
34
|
<% for (const item of group.items) { %><li class="<%- cls(['fi-topbar-item', { 'fi-active': item.isActive }]) %>"><a href="<%= item.url %>"<% if (spa) { %> wire:navigate<% } %><% if (item.isActive) { %> aria-current="page"<% } %> class="fi-topbar-item-btn"><% if (item.icon) { %><%- icon(item.icon, { attributes: attrs({ class: 'fi-topbar-item-icon' }) }) %><% } %><span class="fi-topbar-item-label"> <%= item.label %> </span><% if (item.badge !== null) { %><%- view('filament::components.badge', { label: item.badge, colorClasses: item.badgeColorClasses }) %><% } %></a></li><% } %>
|
|
35
35
|
<% } %>
|
package/views/pages/page.ejs
CHANGED
|
@@ -1,6 +1,48 @@
|
|
|
1
1
|
<%# Panel page: header, breadcrumbs, sub-navigation and content %>
|
|
2
2
|
<% const beforeHeaderActions = renderHook('panels::page.header.actions.before', renderHookScopes), afterHeaderActions = renderHook('panels::page.header.actions.after', renderHookScopes); %>
|
|
3
3
|
<% const subNavigation = locals.subNavigation ?? []; const activeSubItem = subNavigation.find((item) => item.active) ?? subNavigation[0]; const subNavigationPosition = locals.subNavigationPosition ?? 'top'; %>
|
|
4
|
+
<%# Sub-navigation groups: items without a group first, then each group in order of appearance. %>
|
|
5
|
+
<% const subNavigationGroups = []; for (const item of subNavigation) { const label = item.group || null; let group = subNavigationGroups.find((candidate) => candidate.label === label); if (!group) { group = { label, items: [] }; if (label === null) subNavigationGroups.unshift(group); else subNavigationGroups.push(group); } group.items.push(item); } %>
|
|
6
|
+
<% const subNavigationBadge = (item, wrap) => { if (item.badge === null || item.badge === undefined || item.badge === '') return; %><% if (wrap) { %><span class="fi-sidebar-item-badge-ctn"><% } %><%- view('filament::components.badge', { label: item.badge, colorClasses: item.badgeColorClasses ?? [] }) %><% if (wrap) { %></span><% } %><% } %>
|
|
7
|
+
<% const subNavigationSidebar = () => { %>
|
|
8
|
+
<ul class="fi-page-sub-navigation-sidebar">
|
|
9
|
+
<% for (const group of subNavigationGroups) { %>
|
|
10
|
+
<li x-data="{ label: <% if (group.label) { %><%- js('sub_navigation_' + group.label) %><% } else { %>'sub_navigation_'<% } %> }" data-group-label="sub_navigation_<%= group.label ?? '' %>" x-bind:class="{ 'fi-collapsed': $store.sidebar.groupIsCollapsed(label) }" class="<%- cls(['fi-sidebar-group', { 'fi-active': group.items.some((item) => item.active) }, 'fi-collapsible']) %>">
|
|
11
|
+
<% if (group.label) { %>
|
|
12
|
+
<div x-on:click="$store.sidebar.toggleCollapsedGroup(label)" class="fi-sidebar-group-btn">
|
|
13
|
+
<span class="fi-sidebar-group-label">
|
|
14
|
+
<%= group.label %>
|
|
15
|
+
</span>
|
|
16
|
+
<%- view('filament::components.icon-button', {
|
|
17
|
+
iconName: 'm-chevron-up', label: group.label, className: 'fi-sidebar-group-collapse-btn',
|
|
18
|
+
extra: attrs({ 'x-bind:aria-expanded': '! $store.sidebar.groupIsCollapsed(label)', 'x-on:click.stop': '$store.sidebar.toggleCollapsedGroup(label)' }),
|
|
19
|
+
}) %>
|
|
20
|
+
</div>
|
|
21
|
+
<% } %>
|
|
22
|
+
<ul<% if (group.label) { %> x-show="! $store.sidebar.groupIsCollapsed(label)" x-collapse.duration.200ms<% } %> class="fi-sidebar-group-items">
|
|
23
|
+
<% group.items.forEach((item, index) => { %>
|
|
24
|
+
<li class="<%- cls(['fi-sidebar-item', { 'fi-active': item.active }, 'fi-sidebar-item-has-url']) %>">
|
|
25
|
+
<a href="<%= item.url %>" wire:navigate<% if (item.active) { %> aria-current="page"<% } %> x-on:click="$store.sidebar.isMobile && $store.sidebar.close()" class="fi-sidebar-item-btn">
|
|
26
|
+
<% if (item.icon) { %><%- icon(item.icon, { size: 'lg', attributes: attrs({ class: 'fi-sidebar-item-icon' }) }) %><% } %>
|
|
27
|
+
<% if (!item.icon && group.label) { %>
|
|
28
|
+
<div class="fi-sidebar-item-grouped-border">
|
|
29
|
+
<% if (index > 0) { %><div class="fi-sidebar-item-grouped-border-part-not-first"></div><% } %>
|
|
30
|
+
<% if (index < group.items.length - 1) { %><div class="fi-sidebar-item-grouped-border-part-not-last"></div><% } %>
|
|
31
|
+
<div class="fi-sidebar-item-grouped-border-part"></div>
|
|
32
|
+
</div>
|
|
33
|
+
<% } %>
|
|
34
|
+
<span class="fi-sidebar-item-label">
|
|
35
|
+
<%= item.label %>
|
|
36
|
+
</span>
|
|
37
|
+
<% subNavigationBadge(item, true) %>
|
|
38
|
+
</a>
|
|
39
|
+
</li>
|
|
40
|
+
<% }) %>
|
|
41
|
+
</ul>
|
|
42
|
+
</li>
|
|
43
|
+
<% } %>
|
|
44
|
+
</ul>
|
|
45
|
+
<% } %>
|
|
4
46
|
<div class="<%- cls(['fi-page', subNavigation.length ? `fi-page-has-sub-navigation fi-page-has-sub-navigation-${subNavigationPosition}` : null, ...(locals.pageClasses ?? [])]) %>">
|
|
5
47
|
<%- renderHook('panels::page.start', renderHookScopes) %>
|
|
6
48
|
<div class="fi-page-header-main-ctn">
|
|
@@ -14,7 +56,7 @@
|
|
|
14
56
|
<div x-cloak x-float.placement.bottom-start.flip.offset="{ offset: 8, }" x-ref="panel" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" role="menu" class="fi-dropdown-panel fi-width-xs" style="">
|
|
15
57
|
<div class="fi-dropdown-list">
|
|
16
58
|
<% for (const item of subNavigation) { %>
|
|
17
|
-
<a href="<%= item.url %>" wire:navigate class="fi-dropdown-list-item" role="menuitem" tabindex="-1"<% if (item.active) { %> aria-current="page"<% } %>><% if (item.icon) { %><%- icon(item.icon) %><% } %><span class="fi-dropdown-list-item-label"><%= item.label %></span
|
|
59
|
+
<a href="<%= item.url %>" wire:navigate class="fi-dropdown-list-item" role="menuitem" tabindex="-1"<% if (item.active) { %> aria-current="page"<% } %>><% if (item.icon) { %><%- icon(item.icon) %><% } %><span class="fi-dropdown-list-item-label"><%= item.label %></span><% subNavigationBadge(item, false) %></a>
|
|
18
60
|
<% } %>
|
|
19
61
|
</div>
|
|
20
62
|
</div>
|
|
@@ -73,22 +115,7 @@
|
|
|
73
115
|
<%- renderHook('panels::page.sub-navigation.start.before', renderHookScopes) %>
|
|
74
116
|
<div class="fi-page-sub-navigation-sidebar-ctn">
|
|
75
117
|
<%- renderHook('panels::page.sub-navigation.sidebar.before', renderHookScopes) %>
|
|
76
|
-
|
|
77
|
-
<li x-data="{ label: 'sub_navigation_' }" data-group-label="sub_navigation_" x-bind:class="{ 'fi-collapsed': $store.sidebar.groupIsCollapsed(label) }" class="<%- cls(['fi-sidebar-group', { 'fi-active': subNavigation.some((item) => item.active) }, 'fi-collapsible']) %>">
|
|
78
|
-
<ul class="fi-sidebar-group-items">
|
|
79
|
-
<% for (const item of subNavigation) { %>
|
|
80
|
-
<li class="<%- cls(['fi-sidebar-item', { 'fi-active': item.active }, 'fi-sidebar-item-has-url']) %>">
|
|
81
|
-
<a href="<%= item.url %>" wire:navigate<% if (item.active) { %> aria-current="page"<% } %> x-on:click="$store.sidebar.isMobile && $store.sidebar.close()" class="fi-sidebar-item-btn">
|
|
82
|
-
<% if (item.icon) { %><%- icon(item.icon, { size: 'lg', attributes: attrs({ class: 'fi-sidebar-item-icon' }) }) %><% } %>
|
|
83
|
-
<span class="fi-sidebar-item-label">
|
|
84
|
-
<%= item.label %>
|
|
85
|
-
</span>
|
|
86
|
-
</a>
|
|
87
|
-
</li>
|
|
88
|
-
<% } %>
|
|
89
|
-
</ul>
|
|
90
|
-
</li>
|
|
91
|
-
</ul>
|
|
118
|
+
<% subNavigationSidebar() %>
|
|
92
119
|
<%- renderHook('panels::page.sub-navigation.sidebar.after', renderHookScopes) %>
|
|
93
120
|
</div>
|
|
94
121
|
<%- renderHook('panels::page.sub-navigation.start.after', renderHookScopes) %>
|
|
@@ -96,8 +123,14 @@
|
|
|
96
123
|
<% if (subNavigation.length && subNavigationPosition === 'top') { %>
|
|
97
124
|
<%- renderHook('panels::page.sub-navigation.top.before', renderHookScopes) %>
|
|
98
125
|
<nav class="fi-tabs fi-page-sub-navigation-tabs" aria-label="<%= t('filament::components/tabs.label') %>">
|
|
99
|
-
<% for (const
|
|
100
|
-
|
|
126
|
+
<% for (const group of subNavigationGroups) { %>
|
|
127
|
+
<% if (group.label) { %>
|
|
128
|
+
<div x-data="filamentDropdown({ isMenu: true })" class="fi-dropdown"><div x-on:mousedown="if ($event.button === 0) toggle($event)" class="fi-dropdown-trigger"><button type="button" class="<%- cls(['fi-tabs-item', { 'fi-active': group.items.some((item) => item.active) }]) %>"><span class="fi-tabs-item-label"><%= group.label %></span></button></div><div x-cloak x-float.placement.bottom-start.flip.offset="{ offset: 8, }" x-ref="panel" x-transition:enter-start="fi-opacity-0" x-transition:leave-end="fi-opacity-0" role="menu" class="fi-dropdown-panel" style=""><div class="fi-dropdown-list"><% for (const item of group.items) { %><a href="<%= item.url %>" wire:navigate class="fi-dropdown-list-item" role="menuitem" tabindex="-1"<% if (item.active) { %> aria-current="page"<% } %>><% if (item.icon) { %><%- icon(item.icon) %><% } %><span class="fi-dropdown-list-item-label"><%= item.label %></span><% subNavigationBadge(item, false) %></a><% } %></div></div></div>
|
|
129
|
+
<% } else { %>
|
|
130
|
+
<% for (const item of group.items) { %>
|
|
131
|
+
<a href="<%= item.url %>" wire:navigate class="<%- cls(['fi-tabs-item', { 'fi-active': item.active }]) %>"<% if (item.active) { %> aria-current="page"<% } %>><% if (item.icon) { %><%- icon(item.icon) %><% } %><span class="fi-tabs-item-label"><%= item.label %></span><% subNavigationBadge(item, false) %></a>
|
|
132
|
+
<% } %>
|
|
133
|
+
<% } %>
|
|
101
134
|
<% } %>
|
|
102
135
|
</nav>
|
|
103
136
|
<%- renderHook('panels::page.sub-navigation.top.after', renderHookScopes) %>
|
|
@@ -115,22 +148,7 @@
|
|
|
115
148
|
<%- renderHook('panels::page.sub-navigation.end.before', renderHookScopes) %>
|
|
116
149
|
<div class="fi-page-sub-navigation-sidebar-ctn">
|
|
117
150
|
<%- renderHook('panels::page.sub-navigation.sidebar.before', renderHookScopes) %>
|
|
118
|
-
|
|
119
|
-
<li x-data="{ label: 'sub_navigation_' }" data-group-label="sub_navigation_" x-bind:class="{ 'fi-collapsed': $store.sidebar.groupIsCollapsed(label) }" class="<%- cls(['fi-sidebar-group', { 'fi-active': subNavigation.some((item) => item.active) }, 'fi-collapsible']) %>">
|
|
120
|
-
<ul class="fi-sidebar-group-items">
|
|
121
|
-
<% for (const item of subNavigation) { %>
|
|
122
|
-
<li class="<%- cls(['fi-sidebar-item', { 'fi-active': item.active }, 'fi-sidebar-item-has-url']) %>">
|
|
123
|
-
<a href="<%= item.url %>" wire:navigate<% if (item.active) { %> aria-current="page"<% } %> x-on:click="$store.sidebar.isMobile && $store.sidebar.close()" class="fi-sidebar-item-btn">
|
|
124
|
-
<% if (item.icon) { %><%- icon(item.icon, { size: 'lg', attributes: attrs({ class: 'fi-sidebar-item-icon' }) }) %><% } %>
|
|
125
|
-
<span class="fi-sidebar-item-label">
|
|
126
|
-
<%= item.label %>
|
|
127
|
-
</span>
|
|
128
|
-
</a>
|
|
129
|
-
</li>
|
|
130
|
-
<% } %>
|
|
131
|
-
</ul>
|
|
132
|
-
</li>
|
|
133
|
-
</ul>
|
|
151
|
+
<% subNavigationSidebar() %>
|
|
134
152
|
<%- renderHook('panels::page.sub-navigation.sidebar.after', renderHookScopes) %>
|
|
135
153
|
</div>
|
|
136
154
|
<%- renderHook('panels::page.sub-navigation.end.after', renderHookScopes) %>
|
package/views/pages/simple.ejs
CHANGED
|
@@ -25,8 +25,12 @@
|
|
|
25
25
|
<%- content %>
|
|
26
26
|
</div>
|
|
27
27
|
|
|
28
|
+
<% if (locals.actionModals) { %>
|
|
29
|
+
<%- actionModals %>
|
|
30
|
+
<% } else { %>
|
|
28
31
|
<div wire:partial="action-modals" x-data="filamentActionModals({
|
|
29
32
|
livewireId: <%- js(livewireId) %>,
|
|
30
33
|
})" style="height: 0"></div>
|
|
34
|
+
<% } %>
|
|
31
35
|
<%- renderHook('panels::simple-page.end', renderHookScopes) %>
|
|
32
36
|
</div>
|