Skip to content

Commit 3f845d2

Browse files
SalihuDicksonSalihuDickson
committed
adjust demo page
1 parent 2b63838 commit 3f845d2

File tree

4 files changed

+81
-221
lines changed

4 files changed

+81
-221
lines changed

‎packages/ecc-utils-design/demo/form/index.html

+51-202
Original file line numberDiff line numberDiff line change
@@ -18,149 +18,8 @@
1818
import { html, render } from "lit";
1919
import "../../dist/components/form/index.js";
2020

21-
const fields = [
22-
{
23-
key: "name",
24-
label: "Name",
25-
type: "text",
26-
fieldOptions: {
27-
required: true,
28-
tooltip: "Your name",
29-
},
30-
},
31-
{
32-
key: "email",
33-
label: "Email",
34-
type: "email",
35-
fieldOptions: {
36-
tooltip: "Your email address",
37-
},
38-
},
39-
{
40-
key: "18+",
41-
label: "18+",
42-
type: "switch",
43-
fieldOptions: {
44-
tooltip: "Are you over 18 years old?",
45-
},
46-
},
47-
{
48-
key: "id",
49-
label: "ID",
50-
type: "file",
51-
fieldOptions: {
52-
required: true,
53-
tooltip: "Your ID document",
54-
},
55-
},
56-
{
57-
key: "id2",
58-
label: "ID",
59-
type: "file",
60-
fileOptions: {
61-
protocol: "tus",
62-
tusOptions: {
63-
endpoint: "https://tusd.tusdemo.net/files/",
64-
},
65-
},
66-
},
67-
{
68-
key: "gender",
69-
label: "Gender",
70-
type: "select",
71-
fieldOptions: {
72-
required: true,
73-
},
74-
selectOptions: [
75-
{ label: "Male", value: "1" },
76-
{ label: "Female", value: "2" },
77-
{ label: "Don't want to disclose", value: "3" },
78-
],
79-
},
80-
{
81-
key: "address",
82-
label: "Address",
83-
type: "group",
84-
groupOptions: {
85-
collapsible: true,
86-
tooltip: "Your address",
87-
},
88-
fieldOptions: {
89-
tooltip: "Group for address",
90-
},
91-
arrayOptions: {
92-
defaultInstances: 1,
93-
max: 4,
94-
min: 1,
95-
},
96-
children: [
97-
{
98-
key: "Details",
99-
label: "Details",
100-
type: "array",
101-
fieldOptions: {
102-
tooltip: "Details for address",
103-
},
104-
arrayOptions: {
105-
defaultInstances: 0,
106-
max: 2,
107-
},
108-
children: [
109-
{
110-
key: "houseNumber",
111-
label: "House Number",
112-
type: "text",
113-
fieldOptions: {
114-
required: true,
115-
tooltip: "Your house number",
116-
},
117-
},
118-
{
119-
key: "street",
120-
label: "Street",
121-
type: "text",
122-
fieldOptions: {
123-
default: "1601 Harrier Ln",
124-
required: false,
125-
tooltip: "Your street name",
126-
},
127-
},
128-
{
129-
key: "city",
130-
label: "City",
131-
type: "text",
132-
fieldOptions: {
133-
required: true,
134-
tooltip: "Your city name",
135-
},
136-
},
137-
{
138-
key: "isPrimary",
139-
label: "Primary",
140-
type: "switch",
141-
fieldOptions: {
142-
default: true,
143-
tooltip: "Is this your primary residence?",
144-
},
145-
},
146-
],
147-
},
148-
{
149-
key: "country",
150-
label: "Country",
151-
type: "text",
152-
fieldOptions: {
153-
required: true,
154-
tooltip: "Your country name",
155-
},
156-
},
157-
],
158-
},
159-
];
160-
16121
render(
16222
html`<ecc-d-form
163-
.fields=${fields}
16423
@ecc-utils-submit=${async (e) => {
16524
try {
16625
console.log("form - submitted", e.detail);
@@ -177,87 +36,77 @@
17736
}}
17837
>
17938
<ecc-d-form-input
39+
key="name"
40+
label="Name"
18041
required
181-
label="On"
42+
tooltip="Enter name"
43+
></ecc-d-form-input>
44+
45+
<ecc-d-form-input
46+
key="email"
47+
label="Email"
48+
tooltip="Enter your email address"
49+
></ecc-d-form-input>
50+
51+
<ecc-d-form-input
52+
key="18+"
53+
label="18+"
18254
type="switch"
55+
tooltip="Are you over 18 years old?"
18356
></ecc-d-form-input>
18457
18558
<ecc-d-form-input
59+
key="id"
60+
label="ID"
61+
type="file"
18662
required
187-
type="text"
188-
label="name"
189-
key="name"
190-
value="different"
191-
placeholder="enter a name"
63+
tooltip="Your ID document"
19264
></ecc-d-form-input>
19365
19466
<ecc-d-form-input
195-
multiple
67+
key="id2"
68+
label="TUS ID"
19669
type="file"
197-
label="file"
19870
protocol="tus"
199-
tooltip="select a file"
200-
placeholder="enter a name"
201-
tus-endpoint="https://tusd.tusdemo.net/files/"
71+
endpoint="https://tusd.tusdemo.net/files/"
72+
tooltip="Your ID document"
20273
></ecc-d-form-input>
20374
204-
<ecc-d-form-group
205-
type="array"
206-
label="first group"
207-
instances="2"
208-
max-instances="3"
209-
>
210-
<ecc-d-form-input
211-
multiple
212-
type="select"
213-
required="true"
214-
label="Binary Gender"
215-
tooltip="Do not select"
216-
placeholder="enter a name"
217-
>
218-
<option ecc-option label="male">Male</option>
219-
<option ecc-option label="female">Female</option>
220-
</ecc-d-form-input>
221-
222-
<ecc-d-form-input
223-
required
224-
type="text"
225-
label="name"
226-
value="John doe"
227-
placeholder="enter a name"
228-
></ecc-d-form-input>
75+
<ecc-d-form-input required type="select" label="Gender">
76+
<option ecc-option value="female">Female</option>
77+
<option ecc-option value="male">Male</option>
78+
<option ecc-option value="none">Do not want to Disclose</option>
79+
</ecc-d-form-input>
22980
81+
<ecc-d-form-group type="group" label="Address" key="address">
23082
<ecc-d-form-group
83+
required
23184
type="array"
85+
label="Details"
23286
instances="1"
233-
label="nested group"
234-
max-instances="3"
235-
collapsible="true"
87+
max="2"
88+
min="1"
23689
>
23790
<ecc-d-form-input
238-
required
239-
type="text"
240-
label="name"
241-
value="John star"
242-
placeholder="enter a name"
243-
></ecc-d-form-input>
244-
</ecc-d-form-group>
245-
</ecc-d-form-group>
91+
type="switch"
92+
key="isPrimary"
93+
label="Primary Address"
94+
>
95+
</ecc-d-form-input>
96+
<ecc-d-form-input
97+
key="houseNumber"
98+
label="House Number"
99+
tooltip="Your house number"
100+
>
101+
</ecc-d-form-input>
102+
<ecc-d-form-input required key="street" label="Street">
103+
</ecc-d-form-input>
104+
<ecc-d-form-input required key="city" label="City">
105+
</ecc-d-form-input>
246106
247-
<ecc-d-form-group
248-
type="group"
249-
label="second group"
250-
max-instances="3"
251-
collapsible="true"
252-
>
253-
<ecc-d-form-input
254-
required
255-
type="text"
256-
key="username"
257-
label="username"
258-
value="John star"
259-
placeholder="enter a name"
260-
></ecc-d-form-input>
107+
<ecc-d-form-input required key="country" label="Country">
108+
</ecc-d-form-input>
109+
</ecc-d-form-group>
261110
</ecc-d-form-group>
262111
</ecc-d-form> `,
263112
document.querySelector("#demo")

‎packages/ecc-utils-design/src/components/form/form.ts

+16-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
2-
import { property, state } from "lit/decorators.js";
2+
import { state } from "lit/decorators.js";
33
import "@shoelace-style/shoelace/dist/components/input/input.js";
44
import "@shoelace-style/shoelace/dist/components/button/button.js";
55
import "@shoelace-style/shoelace/dist/components/switch/switch.js";
@@ -84,7 +84,6 @@ export default class EccUtilsDesignForm extends LitElement {
8484
formStyles,
8585
];
8686

87-
@property({ type: Array, reflect: true }) fields: Array<Field> = [];
8887
@state() private form: object = {};
8988
@state() private formState: "idle" | "loading" | "error" | "success" = "idle";
9089
@state() private canSubmit = false;
@@ -110,7 +109,7 @@ export default class EccUtilsDesignForm extends LitElement {
110109

111110
private renderErrorTemplate(): TemplateResult {
112111
if (this.formState !== "error") return html``;
113-
return html`<sl-alert data-testid="form-error" variant="danger" open>
112+
return html`<sl-alert data-testid="error" variant="danger" open>
114113
<svg
115114
xmlns="http://www.w3.org/2000/svg"
116115
slot="icon"
@@ -133,7 +132,7 @@ export default class EccUtilsDesignForm extends LitElement {
133132
private renderSuccessTemplate(): TemplateResult {
134133
if (this.formState !== "success") return html``;
135134
return html`
136-
<sl-alert data-testid="form-success" variant="success" open>
135+
<sl-alert data-testid="success" variant="success" open>
137136
<svg
138137
xmlns="http://www.w3.org/2000/svg"
139138
slot="icon"
@@ -206,6 +205,19 @@ export default class EccUtilsDesignForm extends LitElement {
206205
() => _.uniqueId("ecc-form-item-"),
207206
(item) => html`${item}`
208207
)}
208+
209+
<sl-button
210+
type="submit"
211+
data-testid="submit"
212+
variant="primary"
213+
class="submit-button"
214+
?loading=${this.formState === "loading"}
215+
?disabled=${this.submitDisabledByUser ||
216+
!this.canSubmit ||
217+
this.formState === "loading"}
218+
>
219+
Submit
220+
</sl-button>
209221
</div>
210222
`;
211223
// if (!this.fields || this.fields.length === 0) {

‎packages/ecc-utils-design/src/components/form/formGroup.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ export default class EccUtilsDesignFormGroup extends LitElement {
2929
@property({ type: Number, reflect: true })
3030
instances = 0;
3131

32-
@property({ type: Number, attribute: "max-instances" }) maxInstances = "";
33-
@property({ type: Number, attribute: "min-instances" }) minInstances = "";
32+
@property({ type: Number, attribute: "max" }) maxInstances = "";
33+
@property({ type: Number, attribute: "min" }) minInstances = "";
3434

3535
// group item options
3636
@property({ type: Boolean, reflect: true }) collapsible = false;
@@ -121,6 +121,7 @@ export default class EccUtilsDesignFormGroup extends LitElement {
121121
this.items,
122122
() => _.uniqueId("group-item-"),
123123
(item) => html`
124+
<span>${this.label} ${this.required ? "*" : ""} </span>
124125
<div
125126
class="group-content"
126127
ecc-group-item

0 commit comments

Comments
 (0)