Skip to content

Commit 5385088

Browse files
seefeldbseefeldb
authored
Upgraded high level lookslike to shiny new common-ui saga elements (#84)
* change send input styles, added vdom helpers, etc. * use new todo custom events * remove old todo item ui
1 parent 912efb3 commit 5385088

File tree

12 files changed

+215
-165
lines changed

12 files changed

+215
-165
lines changed

‎typescript/packages/common-ui/src/components/common-list.ts‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
import { LitElement, html, css } from "lit";
22
import { customElement } from "lit/decorators.js";
33
import { baseStyles } from "./style.js";
4+
import { view } from "../hyperscript/render.js";
5+
6+
export const list = view("common-list", {});
47

58
@customElement("common-list")
69
export class CommonListElement extends LitElement {
710
static override styles = [
811
baseStyles,
912
css`
10-
:host {
11-
display: block;
12-
height: 100%;
13-
width: 100%;
14-
}
15-
`
13+
:host {
14+
display: block;
15+
height: 100%;
16+
width: 100%;
17+
}
18+
`,
1619
];
1720

1821
override render() {
@@ -24,4 +27,4 @@ export class CommonListElement extends LitElement {
2427
</common-scroll>
2528
`;
2629
}
27-
}
30+
}

‎typescript/packages/common-ui/src/components/common-suggestion.ts‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -8,53 +8,51 @@ export class CommonSuggestionElement extends LitElement {
88
static override styles = [
99
baseStyles,
1010
css`
11-
:host {
12-
--button-background: #000;
13-
--button-color: #fff;
14-
--height: var(--min-touch-size);
15-
display: block;
16-
}
17-
18-
.suggestion {
19-
align-items: center;
20-
border-top: 1px solid #e0e0e0;
21-
box-sizing: border-box;
22-
display: flex;
23-
font-size: var(--body-size);
24-
height: var(--height);
25-
line-height: 20px;
26-
padding: 8px 20px;
27-
gap: var(--gap, 16px);
28-
}
29-
`
11+
:host {
12+
--button-background: #000;
13+
--button-color: #fff;
14+
--height: var(--min-touch-size);
15+
display: block;
16+
}
17+
18+
.suggestion {
19+
align-items: center;
20+
border-top: 1px solid #e0e0e0;
21+
box-sizing: border-box;
22+
display: flex;
23+
font-size: var(--body-size);
24+
height: var(--height);
25+
line-height: 20px;
26+
padding: 8px 20px;
27+
gap: var(--gap, 16px);
28+
}
29+
`,
3030
];
3131

3232
override render() {
3333
return html`
34-
<div class="suggestion">
35-
<slot></slot>
36-
</div>
34+
<div class="suggestion">
35+
<slot></slot>
36+
</div>
3737
`;
3838
}
3939
}
4040

4141
/** Read suggestion element to Suggestion record */
42-
export const readSuggestion = (
43-
element: any
44-
): Suggestion | null => {
42+
export const readSuggestion = (element: any): Suggestion | null => {
4543
if (!(element instanceof CommonSuggestionElement)) {
4644
return null;
4745
}
4846
const id = element.id;
4947
const title = element.textContent ?? "";
5048
return { id, title };
51-
}
49+
};
5250

5351
export type Suggestion = Identifiable & {
5452
title: string;
5553
};
5654

57-
export const suggestion = (suggestion: Suggestion) => html`
58-
<common-suggestion id="${suggestion.id}">
55+
export const suggestionTemplate = (suggestion: Suggestion) =>
56+
html` <common-suggestion id="${suggestion.id}">
5957
${suggestion.title}
60-
</common-suggestion>`
58+
</common-suggestion>`;

‎typescript/packages/common-ui/src/components/common-suggestions.ts‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,27 @@
11
import { LitElement, html, css } from "lit";
22
import { customElement, property } from "lit/decorators.js";
3-
import {repeat} from "lit/directives/repeat.js";
4-
import { readSuggestion, Suggestion, suggestion } from "./common-suggestion.js";
3+
import { repeat } from "lit/directives/repeat.js";
4+
import {
5+
readSuggestion,
6+
Suggestion,
7+
suggestionTemplate,
8+
} from "./common-suggestion.js";
59
import { getId } from "./identifiable.js";
10+
import { view } from "../hyperscript/render.js";
11+
import { eventProps } from "../hyperscript/schema-helpers.js";
12+
13+
export const suggestions = view("common-suggestions", {
14+
...eventProps(),
15+
id: { type: "string" },
16+
suggestions: { type: "array" },
17+
limit: { type: "number" },
18+
});
619

720
export class SelectSuggestionEvent extends Event {
821
detail: Suggestion;
922

1023
constructor(suggestion: Suggestion) {
11-
super('select-suggestion', {bubbles: true, composed: true});
24+
super("select-suggestion", { bubbles: true, composed: true });
1225
this.detail = suggestion;
1326
}
1427
}
@@ -28,18 +41,16 @@ export class CommonSuggestionsElement extends LitElement {
2841
const onclick = (event: Event) => {
2942
const suggestion = readSuggestion(event.target);
3043
if (suggestion) {
31-
this.dispatchEvent(
32-
new SelectSuggestionEvent(suggestion)
33-
);
44+
this.dispatchEvent(new SelectSuggestionEvent(suggestion));
3445
}
35-
}
46+
};
3647

3748
const suggestions = this.suggestions.slice(0, this.limit);
3849

3950
return html`
40-
<common-vstack @click="${onclick}">
41-
${repeat(suggestions, getId, suggestion)}
42-
</common-vstack>
51+
<common-vstack @click="${onclick}">
52+
${repeat(suggestions, getId, suggestionTemplate)}
53+
</common-vstack>
4354
`;
4455
}
45-
}
56+
}

‎typescript/packages/common-ui/src/components/common-todo.ts‎

Lines changed: 57 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
11
import { LitElement, html, css } from "lit";
22
import { customElement, property } from "lit/decorators.js";
33
import { baseStyles } from "./style.js";
4+
import { view } from "../hyperscript/render.js";
5+
import { eventProps } from "../hyperscript/schema-helpers.js";
6+
7+
export const todo = view("common-todo", {
8+
...eventProps(),
9+
id: { type: "string" },
10+
checked: { type: "boolean" },
11+
placeholder: { type: "string" },
12+
value: { type: "string" },
13+
});
414

515
export type Todo = {
616
id: string;
717
checked: boolean;
818
value: string;
9-
}
19+
};
1020

1121
export class CommonTodoCheckedEvent extends Event {
1222
detail: Todo;
1323

14-
constructor(
15-
detail: Todo
16-
) {
24+
constructor(detail: Todo) {
1725
super("todo-checked", { bubbles: true, composed: true });
1826
this.detail = detail;
1927
}
@@ -22,9 +30,7 @@ export class CommonTodoCheckedEvent extends Event {
2230
export class CommonTodoInputEvent extends Event {
2331
detail: Todo;
2432

25-
constructor(
26-
detail: Todo
27-
) {
33+
constructor(detail: Todo) {
2834
super("todo-input", { bubbles: true, composed: true });
2935
this.detail = detail;
3036
}
@@ -35,29 +41,29 @@ export class CommonTodoElement extends LitElement {
3541
static override styles = [
3642
baseStyles,
3743
css`
38-
:host {
39-
display: block;
40-
}
41-
42-
.todo {
43-
display: grid;
44-
grid-template-columns: min-content 1fr;
45-
align-items: center;
46-
column-gap: var(--pad);
47-
min-height: 40px;
48-
}
49-
50-
.todo-ctl {
51-
display: flex;
52-
gap: var(--gap);
53-
align-items: center;
54-
}
55-
56-
.todo-checkbox {
57-
height: 24px;
58-
width: 24px;
59-
}
60-
`
44+
:host {
45+
display: block;
46+
}
47+
48+
.todo {
49+
display: grid;
50+
grid-template-columns: min-content 1fr;
51+
align-items: center;
52+
column-gap: var(--pad);
53+
min-height: 40px;
54+
}
55+
56+
.todo-ctl {
57+
display: flex;
58+
gap: var(--gap);
59+
align-items: center;
60+
}
61+
62+
.todo-checkbox {
63+
height: 24px;
64+
width: 24px;
65+
}
66+
`,
6167
];
6268

6369
@property({ type: Boolean }) checked = false;
@@ -73,10 +79,10 @@ export class CommonTodoElement extends LitElement {
7379
new CommonTodoCheckedEvent({
7480
id: this.id,
7581
value: this.value,
76-
checked
82+
checked,
7783
})
7884
);
79-
}
85+
};
8086

8187
const oninput = (event: Event) => {
8288
const value = (event.target as HTMLInputElement).value;
@@ -86,27 +92,29 @@ export class CommonTodoElement extends LitElement {
8692
new CommonTodoInputEvent({
8793
id: this.id,
8894
value: this.value,
89-
checked: this.checked
95+
checked: this.checked,
9096
})
9197
);
92-
}
98+
};
9399

94100
return html`
95-
<div class="todo">
96-
<div class="todo-ctl">
97-
<input
98-
class="todo-checkbox"
99-
type="checkbox"
100-
@change="${oncheck}"
101-
.checked="${this.checked}" />
101+
<div class="todo">
102+
<div class="todo-ctl">
103+
<input
104+
class="todo-checkbox"
105+
type="checkbox"
106+
@change="${oncheck}"
107+
.checked="${this.checked}"
108+
/>
109+
</div>
110+
<common-input
111+
class="unibox-input"
112+
@input="${oninput}"
113+
.placeholder="${this.placeholder}"
114+
.value="${this.value}"
115+
>
116+
</common-input>
102117
</div>
103-
<common-input
104-
class="unibox-input"
105-
@input="${oninput}"
106-
.placeholder="${this.placeholder}"
107-
.value="${this.value}">
108-
</common-input>
109-
</div>
110118
`;
111119
}
112-
}
120+
}

‎typescript/packages/common-ui/src/components/common-unibox.ts‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,32 @@
11
import { LitElement, html, css } from "lit";
22
import { customElement, property } from "lit/decorators.js";
33
import { baseStyles } from "./style.js";
4+
import { view } from "../hyperscript/render.js";
5+
import { eventProps } from "../hyperscript/schema-helpers.js";
6+
7+
export const unibox = view("common-unibox", {
8+
...eventProps(),
9+
id: { type: "string" },
10+
value: { type: "string" },
11+
placeholder: { type: "string" },
12+
label: { type: "string" },
13+
});
414

515
@customElement("common-unibox")
616
export class CommonUniboxElement extends LitElement {
717
static override styles = [
818
baseStyles,
919
css`
10-
:host {
11-
display: block;
12-
}
20+
:host {
21+
display: block;
22+
}
1323
14-
.unibox {
15-
display: grid;
16-
grid-template-columns: 1fr min-content;
17-
column-gap: var(--gap);
18-
}
19-
`
24+
.unibox {
25+
display: grid;
26+
grid-template-columns: 1fr min-content;
27+
column-gap: var(--gap);
28+
}
29+
`,
2030
];
2131

2232
@property({ type: String }) value = "";
@@ -25,15 +35,16 @@ export class CommonUniboxElement extends LitElement {
2535

2636
override render() {
2737
return html`
28-
<div class="unibox">
29-
<common-input
30-
appearance="rounded"
31-
class="unibox-input"
32-
.placeholder="${this.placeholder}"
33-
.value="${this.value}">
34-
</common-input>
35-
<common-button class="unibox-button">${this.label}</common-button>
36-
</div>
38+
<div class="unibox">
39+
<common-input
40+
appearance="rounded"
41+
class="unibox-input"
42+
.placeholder="${this.placeholder}"
43+
.value="${this.value}"
44+
>
45+
</common-input>
46+
<common-button class="unibox-button">${this.label}</common-button>
47+
</div>
3748
`;
3849
}
39-
}
50+
}

0 commit comments

Comments
 (0)