Skip to content

Commit bfcac92

Browse files
JulianCataldoJulianCataldo
committed
feat: more system / wired widgets, clean others
1 parent 208e596 commit bfcac92

File tree

20 files changed

+233
-48
lines changed

20 files changed

+233
-48
lines changed

‎packages/material/src/widgets/object.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export const object: Widgets['object'] = (options) => {
1515
${options.label ? html`<legend>${options.label}</legend>` : nothing}
1616
<!-- -->
1717
${options.helpText
18-
? html`<p class="object__description">${options.helpText}</p>`
18+
? html`<p class="widget-object__description">${options.helpText}</p>`
1919
: nothing}
2020
<!-- -->
2121
${options.children}

‎packages/material/src/widgets/text.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import type { MdOutlinedTextField } from '@material/web/textfield/outlined-text-
88

99
export const text: Widgets['text'] = (options) => html`
1010
<md-outlined-text-field
11-
.type=${'text'}
11+
.type=${options.inputType}
1212
.supportingText=${options.helpText}
1313
.id=${options.id}
1414
.label=${options.label}

‎packages/shoelace/src/widgets/_fieldset.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,26 +31,47 @@
3131
font-size: var(--sl-font-size-2x-large);
3232
font-weight: 200;
3333
}
34+
35+
sl-card::part(body) {
36+
// background-color: slcolo;
37+
}
38+
// --sl-panel-background-color: var(--sl-color-neutral-50);
3439
}
3540

3641
&.level-1 {
3742
legend {
3843
font-size: var(--sl-font-size-x-large);
3944
font-weight: var(--sl-font-weight-light);
4045
}
46+
47+
sl-card::part(header) {
48+
// background-color: var(--sl-color-neutral-50);
49+
}
50+
// --sl-panel-background-color: var(--sl-color-neutral-50);
4151
}
4252

4353
&.level-2 {
4454
legend {
4555
font-size: var(--sl-font-size-large);
4656
font-weight: var(--sl-font-weight-light);
4757
}
58+
59+
sl-card::part(header) {
60+
// background-color: var(--sl-color-neutral-100);
61+
}
62+
63+
// --sl-panel-background-color: var(--sl-color-neutral-100);
4864
}
4965

5066
&.level-3 {
5167
legend {
5268
font-size: var(--sl-font-size-medium);
5369
font-weight: var(--sl-font-weight-bold);
5470
}
71+
72+
sl-card::part(header) {
73+
// background-color: var(--sl-color-neutral-200);
74+
}
75+
// --sl-panel-background-color: var(--sl-color-neutral-200);
5576
}
5677
}

‎packages/shoelace/src/widgets/array.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const array: Widgets['array'] = (options) => {
5050
<nav>
5151
<sl-tooltip content="Delete">
5252
<sl-button size="small" @click=${controls.delete.click}>
53-
<sl-icon name="trash3" label="Settings"></sl-icon>
53+
<sl-icon name="x-lg" label="Settings"></sl-icon>
5454
</sl-button>
5555
</sl-tooltip>
5656

‎packages/shoelace/src/widgets/checkbox.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const checkbox: Widgets['checkbox'] = (options) => html`
1010
<div class="theme-shoelace widget-checkbox">
1111
<sl-checkbox
1212
type="text"
13-
value=${ifDefined(options.value)}
13+
.checked="${options.value}"
1414
.name=${options.id}
1515
.id=${options.id}
1616
.required=${options.required ?? true}

‎packages/shoelace/src/widgets/select.ts

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,35 +3,25 @@ import { ifDefined } from 'lit/directives/if-defined.js';
33

44
import type { Widgets } from '@jsfe/types';
55

6-
import '@shoelace-style/shoelace/dist/components/input/input.js';
6+
import '@shoelace-style/shoelace/dist/components/select/select.js';
7+
import '@shoelace-style/shoelace/dist/components/option/option.js';
78
import type { SlSelect } from '@shoelace-style/shoelace';
89

10+
// .label=${options.label}
11+
// .helpText=${options.helpText}
912
export const select: Widgets['select'] = (options) => html`
1013
<sl-select
1114
value=${ifDefined(options.value)}
12-
.label=${options.label}
13-
.helpText=${options.helpText}
1415
.required=${options.required}
1516
@sl-change=${(event: Event) => {
1617
let newValue: string | null | number | string[] = (
1718
event.target as SlSelect
1819
).value;
1920
if (Array.isArray(newValue)) return;
20-
2121
if (options.type === 'number' || options.type === 'integer') {
2222
newValue = Number(newValue);
2323
}
24-
// if (options.type?.includes('null') && !newValue) {
25-
// newValue = null;
26-
// }
27-
2824
options.valueChangedCallback?.(newValue);
29-
30-
// handleChange(path, newValue, [
31-
// ...schemaPath,
32-
// 'enum',
33-
// schema.enum?.indexOf(newValue),
34-
// ]);
3525
}}
3626
>${options.enum?.map(
3727
(enumValue) =>

‎packages/system/src/styles.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
// keep-sorted start
2-
@import './widgets/callout.scss';
2+
// @import './widgets/callout.scss';
3+
// @import './widgets/_all.scss';
4+
@import './widgets/object.scss';
35
@import './widgets/submit.scss';
46
// keep-sorted end

‎packages/system/src/widgets/date.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { html } from 'lit';
2+
// import { ifDefined } from 'lit/directives/if-defined.js';
3+
4+
import { field } from './_field.js';
5+
6+
import type { Widgets } from '@jsfe/types';
7+
8+
export const date: Widgets['date'] = (options) => html`
9+
${field(
10+
options,
11+
html`<input
12+
type=${options.type}
13+
value=${options.value ? String(options.value) : ''}
14+
.name=${options.id}
15+
.id=${options.id}
16+
.required=${options.required ?? false}
17+
@input=${(event: InputEvent) => {
18+
const { valueAsDate: newValue } = event.target as HTMLInputElement;
19+
options.valueChangedCallback?.(newValue ?? undefined);
20+
}}
21+
/>`,
22+
)}
23+
`;

‎packages/system/src/widgets/index.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,15 @@
44
export { callout, flag } from './callout.js';
55
export { checkbox } from './checkbox.js';
66
export { colorPicker } from './color-picker.js';
7-
export { enumeration } from './enumeration.js';
7+
88
export { number } from './number.js';
99
export { object } from './object.js';
1010
export { range } from './range.js';
11+
export { select } from './select.js';
12+
export { selectMultiple } from './select-multiple.js';
13+
export { date } from './date.js';
14+
export { radioGroup } from './radio-group.js';
15+
export { radioGroupBoolean } from './radio-group-boolean.js';
1116
export { submit } from './submit.js';
1217
export { text } from './text.js';
1318
export { textarea } from './textarea.js';

‎packages/system/src/widgets/object.scss

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,7 @@
1-
.theme-material.widget-object {
2-
position: relative;
3-
display: flex;
4-
flex-direction: column;
5-
gap: 1em 0;
6-
padding: 2em 1em;
7-
margin: 0;
8-
font-weight: 300;
9-
border: none;
10-
border-bottom: 1px solid var(--md-sys-color-inverse-on-surface);
11-
border-radius: 1rem;
12-
transition-timing-function: ease-in-out;
13-
transition-duration: 250ms;
14-
15-
legend {
1+
.theme-system.widget-object {
2+
select,
3+
input:not([type='radio'], [type='checkbox']),
4+
textarea {
165
width: 100%;
17-
font-size: 1.5em;
18-
border-bottom: 1px solid var(--md-sys-color-inverse-on-surface);
19-
}
20-
21-
.widget-object__description {
22-
margin: 0 0 1rem 0;
23-
opacity: calc(3 / 4);
246
}
257
}

0 commit comments

Comments
 (0)