wirejs-components 0.1.110 → 0.1.111
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.
|
@@ -98,7 +98,7 @@ export const AccountMenu = async ({ api, initialState, topItems, bottomItems })
|
|
|
98
98
|
authenticated: (user) => html `<p>
|
|
99
99
|
Signed in as <b>${user.username}</b>.
|
|
100
100
|
</p>`,
|
|
101
|
-
unauthenticated: () => html `<p>
|
|
101
|
+
unauthenticated: () => html `<p>You are <i>Anonymous</i>.</p>`,
|
|
102
102
|
loading: () => html `<i>Loading ...</i>`
|
|
103
103
|
})}
|
|
104
104
|
${list('topSubmenu', getTopMenu())}
|
|
@@ -1,24 +1,41 @@
|
|
|
1
1
|
import { attribute, html, node, css } from 'wirejs-dom/v2';
|
|
2
2
|
import { AuthMonitor } from '../utils/auth-monitor.js';
|
|
3
3
|
const style = css `
|
|
4
|
-
authenticator
|
|
5
|
-
|
|
4
|
+
authenticator h4 {
|
|
5
|
+
margin-top: 1rem;
|
|
6
|
+
margin-bottom: .5rem;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
authenticator form {
|
|
10
|
+
margin: 0.5rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
authenticator form div {
|
|
6
14
|
margin-bottom: 0.5rem;
|
|
7
15
|
}
|
|
8
16
|
|
|
17
|
+
authenticator form button {
|
|
18
|
+
padding: 0.35rem;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
authenticator input {
|
|
22
|
+
width: calc(100% - 1.35rem);
|
|
23
|
+
margin-bottom: 0.25rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
9
26
|
authenticator .error {
|
|
10
27
|
color: darkred;
|
|
11
28
|
}
|
|
12
29
|
|
|
13
30
|
authenticator {
|
|
14
31
|
display: block;
|
|
15
|
-
min-width:
|
|
32
|
+
min-width: 20em;
|
|
16
33
|
color: var(--default-color, black);
|
|
17
34
|
}
|
|
18
35
|
|
|
19
36
|
authenticatoraction > h4 {
|
|
20
|
-
margin-top:
|
|
21
|
-
margin-bottom: 0.
|
|
37
|
+
margin-top: 0.7rem;
|
|
38
|
+
margin-bottom: 0.35rem;
|
|
22
39
|
}
|
|
23
40
|
|
|
24
41
|
authenticatoraction > hr {
|
|
@@ -27,7 +44,38 @@ const style = css `
|
|
|
27
44
|
border: none;
|
|
28
45
|
background: var(--color-muted);
|
|
29
46
|
}
|
|
47
|
+
|
|
48
|
+
authenticatoraction p {
|
|
49
|
+
margin: 0.25em 0;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
authenticator menu {
|
|
53
|
+
padding: 0;
|
|
54
|
+
margin: 0.2em 0;
|
|
55
|
+
list-style: none;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.oidc {
|
|
59
|
+
display: inline-flex;
|
|
60
|
+
align-items: center;
|
|
61
|
+
gap: 0.5em;
|
|
62
|
+
padding: 0.4em 1em;
|
|
63
|
+
border-radius: 4px;
|
|
64
|
+
text-decoration :none;
|
|
65
|
+
font-size: 0.95em;
|
|
66
|
+
font-weight: 500;
|
|
67
|
+
cursor: pointer;
|
|
68
|
+
}
|
|
69
|
+
|
|
30
70
|
`;
|
|
71
|
+
function oidcIcon(svgMarkup) {
|
|
72
|
+
if (!svgMarkup)
|
|
73
|
+
return '';
|
|
74
|
+
const span = document.createElement('span');
|
|
75
|
+
span.style.cssText = 'display: inline-flex; align-items: center; flex-shrink: 0;';
|
|
76
|
+
span.innerHTML = svgMarkup;
|
|
77
|
+
return span;
|
|
78
|
+
}
|
|
31
79
|
export const authenticatoraction = (action, act) => {
|
|
32
80
|
const inputs = Object.entries(action.fields || []).map(([name, { label, type }]) => {
|
|
33
81
|
const id = `input_${Math.floor(Math.random() * 1_000_000)}`;
|
|
@@ -47,9 +95,15 @@ export const authenticatoraction = (action, act) => {
|
|
|
47
95
|
<button type='submit' value='${b}'>${b}</button>
|
|
48
96
|
</p>`);
|
|
49
97
|
const link = buttons ? undefined : [
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
98
|
+
action.href
|
|
99
|
+
? html `<menu><li><a
|
|
100
|
+
class='oidc'
|
|
101
|
+
href="${action.href}"
|
|
102
|
+
style="${action.buttonStyle ?? ''}"
|
|
103
|
+
>${oidcIcon(action.icon)}<span>${action.name}</span></a></li></menu>`
|
|
104
|
+
: html `<menu><li><a
|
|
105
|
+
onclick=${() => act({ key: action.key })}
|
|
106
|
+
>${action.name}</a></li></menu>`
|
|
53
107
|
];
|
|
54
108
|
const actors = link ?? buttons;
|
|
55
109
|
if (action.fields && Object.keys(action.fields).length > 0) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "wirejs-components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.111",
|
|
4
4
|
"description": "Client-side components for wirejs apps, including basic UI and resource-aware components.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"homepage": "https://github.com/svidgen/create-wirejs-app#readme",
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"wirejs-dom": "^1.0.44",
|
|
34
|
-
"wirejs-resources": "^0.1.
|
|
34
|
+
"wirejs-resources": "^0.1.168"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"typescript": "^5.7.3"
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import type { AuthenticationState } from 'wirejs-resources';
|
|
2
|
-
export declare function Main(slots: {
|
|
3
|
-
/**
|
|
4
|
-
* Replaces the default prefix in the final page title.
|
|
5
|
-
*/
|
|
6
|
-
siteTitle?: string | ((state: AuthenticationState) => string);
|
|
7
|
-
/**
|
|
8
|
-
* Appears on the page under the site title.
|
|
9
|
-
*
|
|
10
|
-
* Set to empty-string explicitly to omit the default.
|
|
11
|
-
*/
|
|
12
|
-
siteSubTitle?: string | ((state: AuthenticationState) => string);
|
|
13
|
-
/**
|
|
14
|
-
* The page title. Appears below the site title and subtitle when given.
|
|
15
|
-
*/
|
|
16
|
-
pageTitle?: string | ((state: AuthenticationState) => string);
|
|
17
|
-
/**
|
|
18
|
-
* Author for this page. Appears next to the title in lighter font and
|
|
19
|
-
* in the address bar.
|
|
20
|
-
*/
|
|
21
|
-
pageAuthor?: string | ((state: AuthenticationState) => string);
|
|
22
|
-
/**
|
|
23
|
-
* The main content for the page.
|
|
24
|
-
*/
|
|
25
|
-
content: HTMLElement | ((state: AuthenticationState) => HTMLElement);
|
|
26
|
-
/**
|
|
27
|
-
* Appears in the top of the footer.
|
|
28
|
-
*/
|
|
29
|
-
disclaimer?: string | HTMLElement | ((state: AuthenticationState) => string | HTMLElement);
|
|
30
|
-
}): Promise<HTMLElement & {
|
|
31
|
-
data: {
|
|
32
|
-
account: HTMLElement & {
|
|
33
|
-
data: unknown;
|
|
34
|
-
} & import("wirejs-dom/v2").DomEvents<HTMLElement & {
|
|
35
|
-
data: unknown;
|
|
36
|
-
}> & import("wirejs-dom/v2").Extend<HTMLElement & {
|
|
37
|
-
data: unknown;
|
|
38
|
-
}>;
|
|
39
|
-
};
|
|
40
|
-
} & import("wirejs-dom/v2").DomEvents<HTMLElement & {
|
|
41
|
-
data: {
|
|
42
|
-
account: HTMLElement & {
|
|
43
|
-
data: unknown;
|
|
44
|
-
} & import("wirejs-dom/v2").DomEvents<HTMLElement & {
|
|
45
|
-
data: unknown;
|
|
46
|
-
}> & import("wirejs-dom/v2").Extend<HTMLElement & {
|
|
47
|
-
data: unknown;
|
|
48
|
-
}>;
|
|
49
|
-
};
|
|
50
|
-
}> & import("wirejs-dom/v2").Extend<HTMLElement & {
|
|
51
|
-
data: {
|
|
52
|
-
account: HTMLElement & {
|
|
53
|
-
data: unknown;
|
|
54
|
-
} & import("wirejs-dom/v2").DomEvents<HTMLElement & {
|
|
55
|
-
data: unknown;
|
|
56
|
-
}> & import("wirejs-dom/v2").Extend<HTMLElement & {
|
|
57
|
-
data: unknown;
|
|
58
|
-
}>;
|
|
59
|
-
};
|
|
60
|
-
}>>;
|
package/dist/layouts/default.js
DELETED
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
import { html, node, hydrate } from 'wirejs-dom/v2';
|
|
2
|
-
import { auth } from 'my-api';
|
|
3
|
-
import { AccountMenu } from '../components/index.js';
|
|
4
|
-
const TITLE = 'My New Site';
|
|
5
|
-
const SUBTITLE = 'Made with wirejs';
|
|
6
|
-
const MENU_ID = 'account-menu';
|
|
7
|
-
const DISCLAIMER = html `<div>
|
|
8
|
-
<p>Everything here is awesome.</p>
|
|
9
|
-
</div>`;
|
|
10
|
-
async function Account() {
|
|
11
|
-
return html `<div id='${MENU_ID}'>
|
|
12
|
-
${AccountMenu({ api: auth })}
|
|
13
|
-
</div>`;
|
|
14
|
-
}
|
|
15
|
-
export async function Main(slots) {
|
|
16
|
-
const pageAuthorElement = slots.pageAuthor ? html `
|
|
17
|
-
<span style='color: var(--color-muted);'>
|
|
18
|
-
: according to <a href='/wiki/view/~${slots.pageAuthor}'>${slots.pageAuthor}</a>
|
|
19
|
-
</span>
|
|
20
|
-
` : '';
|
|
21
|
-
const pageTitle = slots.pageTitle ? html `
|
|
22
|
-
<h2 style='font-variant: small-caps;'>
|
|
23
|
-
${slots.pageTitle} ${pageAuthorElement}
|
|
24
|
-
</h2>
|
|
25
|
-
` : '';
|
|
26
|
-
const browserBarTitle = [
|
|
27
|
-
slots.pageTitle,
|
|
28
|
-
slots.pageAuthor,
|
|
29
|
-
slots.siteTitle || TITLE,
|
|
30
|
-
slots.siteSubTitle || SUBTITLE,
|
|
31
|
-
].filter(Boolean).slice(0, 3).join(' - ');
|
|
32
|
-
const page = html `
|
|
33
|
-
<!doctype html>
|
|
34
|
-
<html id='root'>
|
|
35
|
-
<head>
|
|
36
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
37
|
-
<title>${browserBarTitle}</title>
|
|
38
|
-
<link rel='icon' type='image/svg+xml' href='/images/logo.svg' />
|
|
39
|
-
<link rel='stylesheet' type='text/css' href='/default.css' />
|
|
40
|
-
</head>
|
|
41
|
-
<body>
|
|
42
|
-
<div style='
|
|
43
|
-
border-width: 0 1px;
|
|
44
|
-
border-color: silver;
|
|
45
|
-
border-style: solid;
|
|
46
|
-
max-width: 1200px;
|
|
47
|
-
min-height: 100vh;
|
|
48
|
-
padding: 0 1rem;
|
|
49
|
-
margin: 0 auto;
|
|
50
|
-
overflow: hidden;
|
|
51
|
-
'>
|
|
52
|
-
<div style='
|
|
53
|
-
display: flex;
|
|
54
|
-
width: 100%;
|
|
55
|
-
padding-bottom: 0.5rem;
|
|
56
|
-
border-bottom: 1px solid var(--border-color-muted, #777);
|
|
57
|
-
margin-bottom: 1rem;
|
|
58
|
-
'>
|
|
59
|
-
<!-- source: https://www.svgrepo.com/svg/322460/greek-temple -->
|
|
60
|
-
<svg
|
|
61
|
-
style='
|
|
62
|
-
margin-top: 1.4rem;
|
|
63
|
-
margin-right: 0.5rem;
|
|
64
|
-
'
|
|
65
|
-
height='4rem'
|
|
66
|
-
viewBox="0 0 512 512"
|
|
67
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
68
|
-
><path fill="#000000" d="M256 26.2L52 135h408L256 26.2zM73 153v14h366v-14H73zm16 32v206h30V185H89zm101.334 0v206h30V185h-30zm101.332 0v206h30V185h-30zM393 185v206h30V185h-30zM73 409v30h366v-30H73zm-32 48v30h430v-30H41z"/></svg>
|
|
69
|
-
|
|
70
|
-
<div style='flex-basis: 0; flex-grow: 5;'>
|
|
71
|
-
<h1 style='font-variant: small-caps; text-shadow: silver 2px 2px 2px;'>
|
|
72
|
-
<a href='/' style='color: var(--color-strong, #000);'>${slots.siteTitle || TITLE}</a>
|
|
73
|
-
</h1>
|
|
74
|
-
|
|
75
|
-
<div style='
|
|
76
|
-
margin-top: -1rem;
|
|
77
|
-
color: var(--color-muted, #888);
|
|
78
|
-
'>${slots.siteSubTitle ?? SUBTITLE}</div>
|
|
79
|
-
</div>
|
|
80
|
-
|
|
81
|
-
<div style='margin-top: 3.5rem; flex-grow: 0;'>
|
|
82
|
-
${node('account', await Account())}
|
|
83
|
-
</div>
|
|
84
|
-
</div>
|
|
85
|
-
|
|
86
|
-
${pageTitle}
|
|
87
|
-
|
|
88
|
-
<div id='content'>${slots.content}</div>
|
|
89
|
-
|
|
90
|
-
<footer>
|
|
91
|
-
${slots.disclaimer ?? DISCLAIMER}
|
|
92
|
-
</footer>
|
|
93
|
-
</div>
|
|
94
|
-
</body>
|
|
95
|
-
</html>
|
|
96
|
-
`;
|
|
97
|
-
return page;
|
|
98
|
-
}
|
|
99
|
-
// TODO: fix wirejs requiring ... whatever it is here that it requires that breaks the type!
|
|
100
|
-
hydrate(MENU_ID, Account);
|
package/dist/layouts/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as defaultLayout } from './default.js';
|
package/dist/layouts/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as defaultLayout } from './default.js';
|