@spectrum-web-components/number-field 0.4.2-devmode.0 → 0.5.0
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/package.json +8 -8
- package/sp-number-field.js +1 -2
- package/sp-number-field.js.map +1 -1
- package/src/NumberField.js +6 -466
- package/src/NumberField.js.map +1 -1
- package/src/index.js +1 -1
- package/src/index.js.map +1 -1
- package/src/number-field.css.js +2 -4
- package/src/number-field.css.js.map +1 -1
- package/src/spectrum-number-field.css.js +2 -4
- package/src/spectrum-number-field.css.js.map +1 -1
- package/stories/number-field.stories.js +45 -311
- package/stories/number-field.stories.js.map +1 -1
- package/test/benchmark/basic-test.js +1 -4
- package/test/benchmark/basic-test.js.map +1 -1
- package/test/helpers.js +3 -52
- package/test/helpers.js.map +1 -1
- package/test/inputs.test.js +31 -374
- package/test/inputs.test.js.map +1 -1
- package/test/number-field.test-vrt.js +1 -3
- package/test/number-field.test-vrt.js.map +1 -1
- package/test/number-field.test.js +4 -1143
- package/test/number-field.test.js.map +1 -1
|
@@ -1,370 +1,105 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
|
|
3
|
-
import "@spectrum-web-components/number-field/sp-number-field.js";
|
|
4
|
-
import "@spectrum-web-components/field-label/sp-field-label.js";
|
|
5
|
-
import { spreadProps } from "../../../test/lit-helpers.js";
|
|
6
|
-
export default {
|
|
7
|
-
title: "Number Field",
|
|
8
|
-
component: "sp-number-field",
|
|
9
|
-
args: {
|
|
10
|
-
disabled: false,
|
|
11
|
-
readonly: false,
|
|
12
|
-
quiet: false,
|
|
13
|
-
value: void 0,
|
|
14
|
-
placeholder: "",
|
|
15
|
-
min: void 0,
|
|
16
|
-
max: void 0,
|
|
17
|
-
step: void 0
|
|
18
|
-
},
|
|
19
|
-
argTypes: {
|
|
20
|
-
disabled: {
|
|
21
|
-
name: "disabled",
|
|
22
|
-
type: { name: "boolean", required: false },
|
|
23
|
-
description: "Disable this control. It will not receive focus or events.",
|
|
24
|
-
table: {
|
|
25
|
-
type: { summary: "boolean" },
|
|
26
|
-
defaultValue: { summary: false }
|
|
27
|
-
},
|
|
28
|
-
control: {
|
|
29
|
-
type: "boolean"
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
indeterminate: {
|
|
33
|
-
name: "indeterminate",
|
|
34
|
-
type: { name: "boolean", required: false },
|
|
35
|
-
description: "Whether the value of the Number Field can be determined for display.",
|
|
36
|
-
table: {
|
|
37
|
-
type: { summary: "boolean" },
|
|
38
|
-
defaultValue: { summary: false }
|
|
39
|
-
},
|
|
40
|
-
control: {
|
|
41
|
-
type: "boolean"
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
readonly: {
|
|
45
|
-
name: "readonly",
|
|
46
|
-
type: { name: "boolean", required: false },
|
|
47
|
-
description: "When this control is read only, you will not be able to input an updated value.",
|
|
48
|
-
table: {
|
|
49
|
-
type: { summary: "boolean" },
|
|
50
|
-
defaultValue: { summary: false }
|
|
51
|
-
},
|
|
52
|
-
control: {
|
|
53
|
-
type: "boolean"
|
|
54
|
-
}
|
|
55
|
-
},
|
|
56
|
-
quiet: {
|
|
57
|
-
name: "quiet",
|
|
58
|
-
type: { name: "boolean", required: false },
|
|
59
|
-
description: "An altered delivery with no background and only a bottom border.",
|
|
60
|
-
table: {
|
|
61
|
-
type: { summary: "boolean" },
|
|
62
|
-
defaultValue: { summary: false }
|
|
63
|
-
},
|
|
64
|
-
control: {
|
|
65
|
-
type: "boolean"
|
|
66
|
-
}
|
|
67
|
-
},
|
|
68
|
-
hideStepper: {
|
|
69
|
-
name: "hide stepper",
|
|
70
|
-
type: { name: "boolean", required: false },
|
|
71
|
-
description: "Whether to remove the stepper UI from the control.",
|
|
72
|
-
table: {
|
|
73
|
-
type: { summary: "boolean" },
|
|
74
|
-
defaultValue: { summary: false }
|
|
75
|
-
},
|
|
76
|
-
control: {
|
|
77
|
-
type: "boolean"
|
|
78
|
-
}
|
|
79
|
-
},
|
|
80
|
-
value: {
|
|
81
|
-
name: "value",
|
|
82
|
-
type: { name: "number", required: false },
|
|
83
|
-
description: "Value to apply to the control.",
|
|
84
|
-
table: {
|
|
85
|
-
type: { summary: "string" },
|
|
86
|
-
defaultValue: { summary: void 0 }
|
|
87
|
-
},
|
|
88
|
-
control: {
|
|
89
|
-
type: "number"
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
step: {
|
|
93
|
-
name: "step",
|
|
94
|
-
type: { name: "number", required: false },
|
|
95
|
-
description: "Amount to change the value by when using the stepper or arrow key interactions.",
|
|
96
|
-
table: {
|
|
97
|
-
type: { summary: "string" },
|
|
98
|
-
defaultValue: { summary: void 0 }
|
|
99
|
-
},
|
|
100
|
-
control: {
|
|
101
|
-
type: "number"
|
|
102
|
-
}
|
|
103
|
-
},
|
|
104
|
-
stepModifier: {
|
|
105
|
-
name: "step modifier",
|
|
106
|
-
type: { name: "number", required: false },
|
|
107
|
-
description: "Amount to scale the step increment/decrement when holding the shift key",
|
|
108
|
-
table: {
|
|
109
|
-
type: { summary: "number" },
|
|
110
|
-
defaultValue: { summary: 10 }
|
|
111
|
-
},
|
|
112
|
-
control: {
|
|
113
|
-
type: "number"
|
|
114
|
-
}
|
|
115
|
-
},
|
|
116
|
-
placeholder: {
|
|
117
|
-
name: "placeholder",
|
|
118
|
-
type: { name: "string", required: false },
|
|
119
|
-
description: "Placeholder to apply to the control.",
|
|
120
|
-
table: {
|
|
121
|
-
type: { summary: "string" }
|
|
122
|
-
},
|
|
123
|
-
control: {
|
|
124
|
-
type: "text"
|
|
125
|
-
}
|
|
126
|
-
},
|
|
127
|
-
min: {
|
|
128
|
-
name: "min",
|
|
129
|
-
type: { name: "number", required: false },
|
|
130
|
-
description: "The minimum value the control can be set to.",
|
|
131
|
-
table: {
|
|
132
|
-
type: { summary: "number" },
|
|
133
|
-
defaultValue: { summary: void 0 }
|
|
134
|
-
},
|
|
135
|
-
control: {
|
|
136
|
-
type: "number"
|
|
137
|
-
}
|
|
138
|
-
},
|
|
139
|
-
max: {
|
|
140
|
-
name: "max",
|
|
141
|
-
type: { name: "numer", required: false },
|
|
142
|
-
description: "The maximum value the control can be set to.",
|
|
143
|
-
table: {
|
|
144
|
-
type: { summary: "number" },
|
|
145
|
-
defaultValue: { summary: void 0 }
|
|
146
|
-
},
|
|
147
|
-
control: {
|
|
148
|
-
type: "number"
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
};
|
|
153
|
-
export const Default = (args = {}) => {
|
|
154
|
-
const onChange = args.onChange || (() => {
|
|
155
|
-
return;
|
|
156
|
-
});
|
|
157
|
-
const onInput = args.onInput || (() => {
|
|
158
|
-
return;
|
|
159
|
-
});
|
|
160
|
-
return html`
|
|
1
|
+
import{html as t}from"@spectrum-web-components/base";import{ifDefined as i}from"@spectrum-web-components/base/src/directives.js";import"@spectrum-web-components/number-field/sp-number-field.js";import"@spectrum-web-components/field-label/sp-field-label.js";import{spreadProps as n}from"../../../test/lit-helpers.js";export default{title:"Number Field",component:"sp-number-field",args:{disabled:!1,readonly:!1,quiet:!1,value:void 0,placeholder:"",min:void 0,max:void 0,step:void 0},argTypes:{disabled:{name:"disabled",type:{name:"boolean",required:!1},description:"Disable this control. It will not receive focus or events.",table:{type:{summary:"boolean"},defaultValue:{summary:!1}},control:{type:"boolean"}},indeterminate:{name:"indeterminate",type:{name:"boolean",required:!1},description:"Whether the value of the Number Field can be determined for display.",table:{type:{summary:"boolean"},defaultValue:{summary:!1}},control:{type:"boolean"}},readonly:{name:"readonly",type:{name:"boolean",required:!1},description:"When this control is read only, you will not be able to input an updated value.",table:{type:{summary:"boolean"},defaultValue:{summary:!1}},control:{type:"boolean"}},quiet:{name:"quiet",type:{name:"boolean",required:!1},description:"An altered delivery with no background and only a bottom border.",table:{type:{summary:"boolean"},defaultValue:{summary:!1}},control:{type:"boolean"}},hideStepper:{name:"hide stepper",type:{name:"boolean",required:!1},description:"Whether to remove the stepper UI from the control.",table:{type:{summary:"boolean"},defaultValue:{summary:!1}},control:{type:"boolean"}},value:{name:"value",type:{name:"number",required:!1},description:"Value to apply to the control.",table:{type:{summary:"string"},defaultValue:{summary:void 0}},control:{type:"number"}},step:{name:"step",type:{name:"number",required:!1},description:"Amount to change the value by when using the stepper or arrow key interactions.",table:{type:{summary:"string"},defaultValue:{summary:void 0}},control:{type:"number"}},stepModifier:{name:"step modifier",type:{name:"number",required:!1},description:"Amount to scale the step increment/decrement when holding the shift key",table:{type:{summary:"number"},defaultValue:{summary:10}},control:{type:"number"}},placeholder:{name:"placeholder",type:{name:"string",required:!1},description:"Placeholder to apply to the control.",table:{type:{summary:"string"}},control:{type:"text"}},min:{name:"min",type:{name:"number",required:!1},description:"The minimum value the control can be set to.",table:{type:{summary:"number"},defaultValue:{summary:void 0}},control:{type:"number"}},max:{name:"max",type:{name:"numer",required:!1},description:"The maximum value the control can be set to.",table:{type:{summary:"number"},defaultValue:{summary:void 0}},control:{type:"number"}}}};export const Default=(e={})=>{const l=e.onChange||(()=>{}),a=e.onInput||(()=>{});return t`
|
|
161
2
|
<sp-field-label for="default">Enter a number</sp-field-label>
|
|
162
3
|
<sp-number-field
|
|
163
4
|
id="default"
|
|
164
|
-
...=${
|
|
165
|
-
@input=${
|
|
166
|
-
@change=${
|
|
167
|
-
style=${
|
|
5
|
+
...=${n(e)}
|
|
6
|
+
@input=${r=>a(r.target.value)}
|
|
7
|
+
@change=${r=>l(r.target.value)}
|
|
8
|
+
style=${i(e.quiet?void 0:"width: 150px")}
|
|
168
9
|
></sp-number-field>
|
|
169
|
-
|
|
170
|
-
};
|
|
171
|
-
Default.args = {
|
|
172
|
-
value: 100
|
|
173
|
-
};
|
|
174
|
-
export const quiet = (args = {}) => Default(args);
|
|
175
|
-
quiet.args = {
|
|
176
|
-
quiet: true,
|
|
177
|
-
value: 100
|
|
178
|
-
};
|
|
179
|
-
export const indeterminate = (args = {}) => Default(args);
|
|
180
|
-
indeterminate.args = {
|
|
181
|
-
value: 100,
|
|
182
|
-
indeterminate: true
|
|
183
|
-
};
|
|
184
|
-
export const decimals = (args) => {
|
|
185
|
-
return html`
|
|
10
|
+
`};Default.args={value:100};export const quiet=(e={})=>Default(e);quiet.args={quiet:!0,value:100};export const indeterminate=(e={})=>Default(e);indeterminate.args={value:100,indeterminate:!0};export const decimals=e=>t`
|
|
186
11
|
<sp-field-label for="decimals">
|
|
187
12
|
Enter a number with visible decimals
|
|
188
13
|
</sp-field-label>
|
|
189
14
|
<sp-number-field
|
|
190
15
|
id="decimals"
|
|
191
16
|
style="width: 200px"
|
|
192
|
-
...=${
|
|
193
|
-
@change=${
|
|
194
|
-
.formatOptions=${{
|
|
195
|
-
signDisplay: "exceptZero",
|
|
196
|
-
minimumFractionDigits: 1,
|
|
197
|
-
maximumFractionDigits: 2
|
|
198
|
-
}}
|
|
17
|
+
...=${n(e)}
|
|
18
|
+
@change=${e.onChange}
|
|
19
|
+
.formatOptions=${{signDisplay:"exceptZero",minimumFractionDigits:1,maximumFractionDigits:2}}
|
|
199
20
|
></sp-number-field>
|
|
200
|
-
`;
|
|
201
|
-
};
|
|
202
|
-
decimals.args = {
|
|
203
|
-
value: 19.274
|
|
204
|
-
};
|
|
205
|
-
export const percents = (args = {}) => {
|
|
206
|
-
return html`
|
|
21
|
+
`;decimals.args={value:19.274};export const percents=(e={})=>t`
|
|
207
22
|
<sp-field-label for="percents">Enter a percentage</sp-field-label>
|
|
208
23
|
<sp-number-field
|
|
209
24
|
id="percents"
|
|
210
25
|
style="width: 200px"
|
|
211
|
-
...=${
|
|
212
|
-
@change=${
|
|
213
|
-
.formatOptions=${{
|
|
214
|
-
style: "percent",
|
|
215
|
-
unitDisplay: "narrow"
|
|
216
|
-
}}
|
|
26
|
+
...=${n(e)}
|
|
27
|
+
@change=${e.onChange}
|
|
28
|
+
.formatOptions=${{style:"percent",unitDisplay:"narrow"}}
|
|
217
29
|
></sp-number-field>
|
|
218
|
-
`;
|
|
219
|
-
};
|
|
220
|
-
percents.args = {
|
|
221
|
-
value: 0.372
|
|
222
|
-
};
|
|
223
|
-
export const currency = (args = {}) => {
|
|
224
|
-
return html`
|
|
30
|
+
`;percents.args={value:.372};export const currency=(e={})=>t`
|
|
225
31
|
<sp-field-label for="currency">Enter a value in Euros</sp-field-label>
|
|
226
32
|
<sp-number-field
|
|
227
33
|
style="width: 200px"
|
|
228
|
-
...=${
|
|
229
|
-
@change=${
|
|
230
|
-
.formatOptions=${{
|
|
231
|
-
style: "currency",
|
|
232
|
-
currency: "EUR",
|
|
233
|
-
currencyDisplay: "code",
|
|
234
|
-
currencySign: "accounting"
|
|
235
|
-
}}
|
|
34
|
+
...=${n(e)}
|
|
35
|
+
@change=${e.onChange}
|
|
36
|
+
.formatOptions=${{style:"currency",currency:"EUR",currencyDisplay:"code",currencySign:"accounting"}}
|
|
236
37
|
></sp-number-field>
|
|
237
|
-
`;
|
|
238
|
-
};
|
|
239
|
-
currency.args = {
|
|
240
|
-
value: 23.19
|
|
241
|
-
};
|
|
242
|
-
export const units = (args) => {
|
|
243
|
-
return html`
|
|
38
|
+
`;currency.args={value:23.19};export const units=e=>t`
|
|
244
39
|
<sp-field-label for="units">Enter a lengths in inches</sp-field-label>
|
|
245
40
|
<sp-number-field
|
|
246
41
|
id="units"
|
|
247
42
|
style="width: 200px"
|
|
248
|
-
...=${
|
|
249
|
-
@change=${
|
|
250
|
-
.formatOptions=${{
|
|
251
|
-
style: "unit",
|
|
252
|
-
unit: "inch",
|
|
253
|
-
unitDisplay: "long"
|
|
254
|
-
}}
|
|
43
|
+
...=${n(e)}
|
|
44
|
+
@change=${e.onChange}
|
|
45
|
+
.formatOptions=${{style:"unit",unit:"inch",unitDisplay:"long"}}
|
|
255
46
|
></sp-number-field>
|
|
256
|
-
`;
|
|
257
|
-
};
|
|
258
|
-
units.args = {
|
|
259
|
-
value: 24
|
|
260
|
-
};
|
|
261
|
-
export const pixels = (args) => {
|
|
262
|
-
return html`
|
|
47
|
+
`;units.args={value:24};export const pixels=e=>t`
|
|
263
48
|
<sp-field-label for="units">Enter a lengths in pixels</sp-field-label>
|
|
264
49
|
<sp-number-field
|
|
265
50
|
id="units"
|
|
266
51
|
style="width: 200px"
|
|
267
|
-
.formatOptions=${{
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
}}
|
|
271
|
-
...=${spreadProps(args)}
|
|
272
|
-
@change=${args.onChange}
|
|
52
|
+
.formatOptions=${{style:"unit",unit:"px"}}
|
|
53
|
+
...=${n(e)}
|
|
54
|
+
@change=${e.onChange}
|
|
273
55
|
></sp-number-field>
|
|
274
|
-
`;
|
|
275
|
-
};
|
|
276
|
-
pixels.args = {
|
|
277
|
-
value: 800
|
|
278
|
-
};
|
|
279
|
-
export const minMax = (args) => html`
|
|
56
|
+
`;pixels.args={value:800};export const minMax=e=>t`
|
|
280
57
|
<sp-field-label for="min-max">
|
|
281
58
|
Enter a value between 0 and 255
|
|
282
59
|
</sp-field-label>
|
|
283
60
|
<sp-number-field
|
|
284
61
|
id="min-max"
|
|
285
62
|
style="width: 200px"
|
|
286
|
-
...=${
|
|
287
|
-
@change=${
|
|
63
|
+
...=${n(e)}
|
|
64
|
+
@change=${e.onChange}
|
|
288
65
|
></sp-number-field>
|
|
289
|
-
`;
|
|
290
|
-
minMax.args = {
|
|
291
|
-
value: 4,
|
|
292
|
-
min: 0,
|
|
293
|
-
max: 255
|
|
294
|
-
};
|
|
295
|
-
export const hideStepper = (args) => {
|
|
296
|
-
return html`
|
|
66
|
+
`;minMax.args={value:4,min:0,max:255};export const hideStepper=e=>t`
|
|
297
67
|
<sp-field-label for="hideStepper">
|
|
298
68
|
Enter a number without the stepper UI
|
|
299
69
|
</sp-field-label>
|
|
300
70
|
<sp-number-field
|
|
301
71
|
id="hideStepper"
|
|
302
|
-
...=${
|
|
303
|
-
@change=${
|
|
72
|
+
...=${n(e)}
|
|
73
|
+
@change=${e.onChange}
|
|
304
74
|
></sp-number-field>
|
|
305
|
-
`;
|
|
306
|
-
};
|
|
307
|
-
hideStepper.args = {
|
|
308
|
-
hideStepper: true,
|
|
309
|
-
value: 67
|
|
310
|
-
};
|
|
311
|
-
export const hideStepperQuiet = (args) => {
|
|
312
|
-
return html`
|
|
75
|
+
`;hideStepper.args={hideStepper:!0,value:67};export const hideStepperQuiet=e=>t`
|
|
313
76
|
<sp-field-label for="hideStepper">
|
|
314
77
|
Enter a number without the stepper UI
|
|
315
78
|
</sp-field-label>
|
|
316
79
|
<sp-number-field
|
|
317
80
|
id="hideStepper"
|
|
318
|
-
...=${
|
|
319
|
-
@change=${
|
|
81
|
+
...=${n(e)}
|
|
82
|
+
@change=${e.onChange}
|
|
320
83
|
></sp-number-field>
|
|
321
|
-
`;
|
|
322
|
-
};
|
|
323
|
-
hideStepperQuiet.args = {
|
|
324
|
-
hideStepper: true,
|
|
325
|
-
value: 67,
|
|
326
|
-
quiet: true
|
|
327
|
-
};
|
|
328
|
-
export const disabled = (args) => {
|
|
329
|
-
return html`
|
|
84
|
+
`;hideStepperQuiet.args={hideStepper:!0,value:67,quiet:!0};export const disabled=e=>t`
|
|
330
85
|
<sp-field-label for="disabled">
|
|
331
86
|
This Number Field is disabled
|
|
332
87
|
</sp-field-label>
|
|
333
88
|
<sp-number-field
|
|
334
89
|
id="disabled"
|
|
335
|
-
...=${
|
|
336
|
-
@change=${
|
|
90
|
+
...=${n(e)}
|
|
91
|
+
@change=${e.onChange}
|
|
337
92
|
></sp-number-field>
|
|
338
|
-
`;
|
|
339
|
-
};
|
|
340
|
-
disabled.args = {
|
|
341
|
-
disabled: true,
|
|
342
|
-
value: 892
|
|
343
|
-
};
|
|
344
|
-
export const readOnly = (args) => {
|
|
345
|
-
return html`
|
|
93
|
+
`;disabled.args={disabled:!0,value:892};export const readOnly=e=>t`
|
|
346
94
|
<sp-field-label for="readonly">
|
|
347
95
|
You can only read the following value
|
|
348
96
|
</sp-field-label>
|
|
349
97
|
<sp-number-field
|
|
350
98
|
id="readonly"
|
|
351
|
-
...=${
|
|
352
|
-
@change=${
|
|
99
|
+
...=${n(e)}
|
|
100
|
+
@change=${e.onChange}
|
|
353
101
|
></sp-number-field>
|
|
354
|
-
`;
|
|
355
|
-
};
|
|
356
|
-
readOnly.args = {
|
|
357
|
-
readonly: true,
|
|
358
|
-
value: "15"
|
|
359
|
-
};
|
|
360
|
-
export const ScrollingContainer = (args = {}) => {
|
|
361
|
-
const onChange = args.onChange || (() => {
|
|
362
|
-
return;
|
|
363
|
-
});
|
|
364
|
-
const onInput = args.onInput || (() => {
|
|
365
|
-
return;
|
|
366
|
-
});
|
|
367
|
-
return html`
|
|
102
|
+
`;readOnly.args={readonly:!0,value:"15"};export const ScrollingContainer=(e={})=>{const l=e.onChange||(()=>{}),a=e.onInput||(()=>{});return t`
|
|
368
103
|
<style>
|
|
369
104
|
.scroller {
|
|
370
105
|
height: 140px;
|
|
@@ -383,9 +118,9 @@ export const ScrollingContainer = (args = {}) => {
|
|
|
383
118
|
<sp-field-label for="default">Enter a number</sp-field-label>
|
|
384
119
|
<sp-number-field
|
|
385
120
|
id="default"
|
|
386
|
-
...=${
|
|
387
|
-
@input=${
|
|
388
|
-
@change=${
|
|
121
|
+
...=${n(e)}
|
|
122
|
+
@input=${r=>a(r.target.value)}
|
|
123
|
+
@change=${r=>l(r.target.value)}
|
|
389
124
|
style="width: 150px"
|
|
390
125
|
></sp-number-field>
|
|
391
126
|
<p>
|
|
@@ -395,6 +130,5 @@ export const ScrollingContainer = (args = {}) => {
|
|
|
395
130
|
</p>
|
|
396
131
|
</div>
|
|
397
132
|
</div>
|
|
398
|
-
|
|
399
|
-
};
|
|
133
|
+
`};
|
|
400
134
|
//# sourceMappingURL=number-field.stories.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["number-field.stories.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\n\nimport '@spectrum-web-components/number-field/sp-number-field.js';\nimport '@spectrum-web-components/field-label/sp-field-label.js';\nimport { spreadProps } from '../../../test/lit-helpers.js';\nimport { NumberField } from '@spectrum-web-components/number-field/src/NumberField.js';\n\nexport default {\n title: 'Number Field',\n component: 'sp-number-field',\n args: {\n disabled: false,\n readonly: false,\n quiet: false,\n value: undefined,\n placeholder: '',\n min: undefined,\n max: undefined,\n step: undefined,\n },\n argTypes: {\n disabled: {\n name: 'disabled',\n type: { name: 'boolean', required: false },\n description:\n 'Disable this control. It will not receive focus or events.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n indeterminate: {\n name: 'indeterminate',\n type: { name: 'boolean', required: false },\n description:\n 'Whether the value of the Number Field can be determined for display.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n readonly: {\n name: 'readonly',\n type: { name: 'boolean', required: false },\n description:\n 'When this control is read only, you will not be able to input an updated value.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n quiet: {\n name: 'quiet',\n type: { name: 'boolean', required: false },\n description:\n 'An altered delivery with no background and only a bottom border.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n hideStepper: {\n name: 'hide stepper',\n type: { name: 'boolean', required: false },\n description: 'Whether to remove the stepper UI from the control.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n value: {\n name: 'value',\n type: { name: 'number', required: false },\n description: 'Value to apply to the control.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: undefined },\n },\n control: {\n type: 'number',\n },\n },\n step: {\n name: 'step',\n type: { name: 'number', required: false },\n description:\n 'Amount to change the value by when using the stepper or arrow key interactions.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: undefined },\n },\n control: {\n type: 'number',\n },\n },\n stepModifier: {\n name: 'step modifier',\n type: { name: 'number', required: false },\n description:\n 'Amount to scale the step increment/decrement when holding the shift key',\n table: {\n type: { summary: 'number' },\n defaultValue: { summary: 10 },\n },\n control: {\n type: 'number',\n },\n },\n placeholder: {\n name: 'placeholder',\n type: { name: 'string', required: false },\n description: 'Placeholder to apply to the control.',\n table: {\n type: { summary: 'string' },\n },\n control: {\n type: 'text',\n },\n },\n min: {\n name: 'min',\n type: { name: 'number', required: false },\n description: 'The minimum value the control can be set to.',\n table: {\n type: { summary: 'number' },\n defaultValue: { summary: undefined },\n },\n control: {\n type: 'number',\n },\n },\n max: {\n name: 'max',\n type: { name: 'numer', required: false },\n description: 'The maximum value the control can be set to.',\n table: {\n type: { summary: 'number' },\n defaultValue: { summary: undefined },\n },\n control: {\n type: 'number',\n },\n },\n },\n};\n\ninterface StoryArgs {\n disabled?: boolean;\n indeterminate?: boolean;\n invalid?: boolean;\n value?: number;\n placeholder?: string;\n max?: number;\n min?: number;\n hideStepper?: boolean;\n readonly?: boolean;\n step?: number;\n onChange?: (value: number) => void;\n onInput?: (value: number) => void;\n [prop: string]: unknown;\n}\n\nexport const Default = (args: StoryArgs = {}): TemplateResult => {\n const onChange =\n (args.onChange as (value: number) => void) ||\n (() => {\n return;\n });\n const onInput =\n (args.onInput as (value: number) => void) ||\n (() => {\n return;\n });\n return html`\n <sp-field-label for=\"default\">Enter a number</sp-field-label>\n <sp-number-field\n id=\"default\"\n ...=${spreadProps(args)}\n @input=${(event: Event) =>\n onInput((event.target as NumberField).value)}\n @change=${(event: Event) =>\n onChange((event.target as NumberField).value)}\n style=${ifDefined(args.quiet ? undefined : 'width: 150px')}\n ></sp-number-field>\n `;\n};\n\nDefault.args = {\n value: 100,\n};\n\nexport const quiet = (args: StoryArgs = {}): TemplateResult => Default(args);\n\nquiet.args = {\n quiet: true,\n value: 100,\n};\n\nexport const indeterminate = (args: StoryArgs = {}): TemplateResult =>\n Default(args);\n\nindeterminate.args = {\n value: 100,\n indeterminate: true,\n};\n\nexport const decimals = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"decimals\">\n Enter a number with visible decimals\n </sp-field-label>\n <sp-number-field\n id=\"decimals\"\n style=\"width: 200px\"\n ...=${spreadProps(args)}\n @change=${args.onChange}\n .formatOptions=${{\n signDisplay: 'exceptZero',\n minimumFractionDigits: 1,\n maximumFractionDigits: 2,\n } as unknown as Intl.NumberFormatOptions}\n ></sp-number-field>\n `;\n};\n\ndecimals.args = {\n value: 19.274,\n};\n\nexport const percents = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <sp-field-label for=\"percents\">Enter a percentage</sp-field-label>\n <sp-number-field\n id=\"percents\"\n style=\"width: 200px\"\n ...=${spreadProps(args)}\n @change=${args.onChange}\n .formatOptions=${{\n style: 'percent',\n unitDisplay: 'narrow',\n } as unknown as Intl.NumberFormatOptions}\n ></sp-number-field>\n `;\n};\n\npercents.args = {\n value: 0.372,\n};\n\nexport const currency = (args: StoryArgs = {}): TemplateResult => {\n return html`\n <sp-field-label for=\"currency\">Enter a value in Euros</sp-field-label>\n <sp-number-field\n style=\"width: 200px\"\n ...=${spreadProps(args)}\n @change=${args.onChange}\n .formatOptions=${{\n style: 'currency',\n currency: 'EUR',\n currencyDisplay: 'code',\n currencySign: 'accounting',\n } as unknown as Intl.NumberFormatOptions}\n ></sp-number-field>\n `;\n};\n\ncurrency.args = {\n value: 23.19,\n};\n\nexport const units = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"units\">Enter a lengths in inches</sp-field-label>\n <sp-number-field\n id=\"units\"\n style=\"width: 200px\"\n ...=${spreadProps(args)}\n @change=${args.onChange}\n .formatOptions=${{\n style: 'unit',\n unit: 'inch',\n unitDisplay: 'long',\n } as unknown as Intl.NumberFormatOptions}\n ></sp-number-field>\n `;\n};\n\nunits.args = {\n value: 24,\n};\n\nexport const pixels = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"units\">Enter a lengths in pixels</sp-field-label>\n <sp-number-field\n id=\"units\"\n style=\"width: 200px\"\n .formatOptions=${{\n style: 'unit',\n unit: 'px',\n }}\n ...=${spreadProps(args)}\n @change=${args.onChange}\n ></sp-number-field>\n `;\n};\n\npixels.args = {\n value: 800,\n};\n\nexport const minMax = (args: StoryArgs): TemplateResult => html`\n <sp-field-label for=\"min-max\">\n Enter a value between 0 and 255\n </sp-field-label>\n <sp-number-field\n id=\"min-max\"\n style=\"width: 200px\"\n ...=${spreadProps(args)}\n @change=${args.onChange}\n ></sp-number-field>\n`;\n\nminMax.args = {\n value: 4,\n min: 0,\n max: 255,\n};\n\nexport const hideStepper = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"hideStepper\">\n Enter a number without the stepper UI\n </sp-field-label>\n <sp-number-field\n id=\"hideStepper\"\n ...=${spreadProps(args)}\n @change=${args.onChange}\n ></sp-number-field>\n `;\n};\nhideStepper.args = {\n hideStepper: true,\n value: 67,\n};\n\nexport const hideStepperQuiet = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"hideStepper\">\n Enter a number without the stepper UI\n </sp-field-label>\n <sp-number-field\n id=\"hideStepper\"\n ...=${spreadProps(args)}\n @change=${args.onChange}\n ></sp-number-field>\n `;\n};\nhideStepperQuiet.args = {\n hideStepper: true,\n value: 67,\n quiet: true,\n};\n\nexport const disabled = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"disabled\">\n This Number Field is disabled\n </sp-field-label>\n <sp-number-field\n id=\"disabled\"\n ...=${spreadProps(args)}\n @change=${args.onChange}\n ></sp-number-field>\n `;\n};\ndisabled.args = {\n disabled: true,\n value: 892,\n};\n\nexport const readOnly = (args: StoryArgs): TemplateResult => {\n return html`\n <sp-field-label for=\"readonly\">\n You can only read the following value\n </sp-field-label>\n <sp-number-field\n id=\"readonly\"\n ...=${spreadProps(args)}\n @change=${args.onChange}\n ></sp-number-field>\n `;\n};\nreadOnly.args = {\n readonly: true,\n value: '15',\n};\n\nexport const ScrollingContainer = (args: StoryArgs = {}): TemplateResult => {\n const onChange =\n (args.onChange as (value: number) => void) ||\n (() => {\n return;\n });\n const onInput =\n (args.onInput as (value: number) => void) ||\n (() => {\n return;\n });\n return html`\n <style>\n .scroller {\n height: 140px;\n width: 200px;\n overflow-y: scroll;\n padding: 10px;\n background: var(--spectrum-global-color-gray-50);\n }\n\n .scroller > div {\n height: 1000px;\n }\n </style>\n <div class=\"scroller\">\n <div>\n <sp-field-label for=\"default\">Enter a number</sp-field-label>\n <sp-number-field\n id=\"default\"\n ...=${spreadProps(args)}\n @input=${(event: Event) =>\n onInput((event.target as NumberField).value)}\n @change=${(event: Event) =>\n onChange((event.target as NumberField).value)}\n style=\"width: 150px\"\n ></sp-number-field>\n <p>\n This box should not scroll when the focus is inside the\n number field and field value is changed by using the mouse\n wheel.\n </p>\n </div>\n </div>\n `;\n};\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { html } from "lit";
|
|
3
|
-
import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
|
|
4
|
-
measureFixtureCreation(html`
|
|
1
|
+
import"@spectrum-web-components/number-field/sp-number-field.js";import{html as r}from"lit";import{measureFixtureCreation as m}from"../../../../test/benchmark/helpers.js";m(r`
|
|
5
2
|
<sp-number-field></sp-number-field>
|
|
6
3
|
`);
|
|
7
4
|
//# sourceMappingURL=basic-test.js.map
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["basic-test.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport '@spectrum-web-components/number-field/sp-number-field.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n <sp-number-field></sp-number-field>\n`);\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,iEACA,2BACA,+EAEA,EAAuB;AAAA;AAAA,CAEtB",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/test/helpers.js
CHANGED
|
@@ -1,55 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { elementUpdated, fixture, nextFrame } from "@open-wc/testing";
|
|
3
|
-
import { sendMouse } from "../../../test/plugins/browser.js";
|
|
4
|
-
export async function getElFrom(test) {
|
|
5
|
-
const wrapped = await fixture(html`
|
|
1
|
+
import{html as s}from"@spectrum-web-components/base";import{elementUpdated as a,fixture as l,nextFrame as m}from"@open-wc/testing";import{sendMouse as n}from"../../../test/plugins/browser.js";export async function getElFrom(o){const e=(await l(s`
|
|
6
2
|
<div style="--spectrum-alias-ui-icon-chevron-size-75: 20px;">
|
|
7
|
-
${
|
|
3
|
+
${o}
|
|
8
4
|
</div>
|
|
9
|
-
`);
|
|
10
|
-
const el = wrapped.querySelector("sp-number-field");
|
|
11
|
-
await elementUpdated(el);
|
|
12
|
-
return el;
|
|
13
|
-
}
|
|
14
|
-
export async function clickBySelector(el, selector, options = {}) {
|
|
15
|
-
const target = el.shadowRoot.querySelector(selector);
|
|
16
|
-
const targetRect = target.getBoundingClientRect();
|
|
17
|
-
await sendMouse({
|
|
18
|
-
steps: [
|
|
19
|
-
{
|
|
20
|
-
type: "move",
|
|
21
|
-
position: [
|
|
22
|
-
targetRect.x + targetRect.width / 2,
|
|
23
|
-
targetRect.y + targetRect.height / 2
|
|
24
|
-
],
|
|
25
|
-
options
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
type: "down",
|
|
29
|
-
options
|
|
30
|
-
}
|
|
31
|
-
]
|
|
32
|
-
});
|
|
33
|
-
await nextFrame();
|
|
34
|
-
await sendMouse({
|
|
35
|
-
steps: [
|
|
36
|
-
{
|
|
37
|
-
type: "up",
|
|
38
|
-
options
|
|
39
|
-
}
|
|
40
|
-
]
|
|
41
|
-
});
|
|
42
|
-
await elementUpdated(el);
|
|
43
|
-
}
|
|
44
|
-
export function createLanguageContext(lang) {
|
|
45
|
-
const langResolvers = [];
|
|
46
|
-
const createLangResolver = (event) => {
|
|
47
|
-
langResolvers.push(event.detail.callback);
|
|
48
|
-
resolveLanguage();
|
|
49
|
-
};
|
|
50
|
-
const resolveLanguage = () => {
|
|
51
|
-
langResolvers.forEach((resolver) => resolver(lang));
|
|
52
|
-
};
|
|
53
|
-
return createLangResolver;
|
|
54
|
-
}
|
|
5
|
+
`)).querySelector("sp-number-field");return await a(e),e}export async function clickBySelector(o,r,e={}){const t=o.shadowRoot.querySelector(r).getBoundingClientRect();await n({steps:[{type:"move",position:[t.x+t.width/2,t.y+t.height/2],options:e},{type:"down",options:e}]}),await m(),await n({steps:[{type:"up",options:e}]}),await a(o)}export function createLanguageContext(o){const r=[],e=t=>{r.push(t.detail.callback),i()},i=()=>{r.forEach(t=>t(o))};return e}
|
|
55
6
|
//# sourceMappingURL=helpers.js.map
|
package/test/helpers.js.map
CHANGED
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["helpers.ts"],
|
|
4
4
|
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { elementUpdated, fixture, nextFrame } from '@open-wc/testing';\nimport { ProvideLang } from '@spectrum-web-components/theme';\nimport { NumberField } from '@spectrum-web-components/number-field';\nimport { sendMouse } from '../../../test/plugins/browser.js';\n\nexport async function getElFrom(test: TemplateResult): Promise<NumberField> {\n const wrapped = await fixture<HTMLDivElement>(html`\n <div style=\"--spectrum-alias-ui-icon-chevron-size-75: 20px;\">\n ${test}\n </div>\n `);\n const el = wrapped.querySelector('sp-number-field') as NumberField;\n await elementUpdated(el);\n return el;\n}\n\nexport async function clickBySelector(\n el: NumberField,\n selector: string,\n options: { button?: 'left' | 'right' | 'middle' } = {}\n): Promise<void> {\n const target = el.shadowRoot.querySelector(selector) as HTMLElement;\n const targetRect = target.getBoundingClientRect();\n await sendMouse({\n steps: [\n {\n type: 'move',\n position: [\n targetRect.x + targetRect.width / 2,\n targetRect.y + targetRect.height / 2,\n ],\n options,\n },\n {\n type: 'down',\n options,\n },\n ],\n });\n await nextFrame();\n await sendMouse({\n steps: [\n {\n type: 'up',\n options,\n },\n ],\n });\n await elementUpdated(el);\n}\n\nexport function createLanguageContext(\n lang: string\n): (event: CustomEvent<ProvideLang>) => void {\n const langResolvers: ProvideLang['callback'][] = [];\n const createLangResolver = (event: CustomEvent<ProvideLang>): void => {\n langResolvers.push(event.detail.callback);\n resolveLanguage();\n };\n const resolveLanguage = (): void => {\n langResolvers.forEach((resolver) => resolver(lang));\n };\n return createLangResolver;\n}\n"],
|
|
5
|
-
"mappings": "AAYA
|
|
5
|
+
"mappings": "AAYA,qDACA,8EAGA,6DAEA,gCAAgC,EAA4C,CAMxE,KAAM,GAAK,AALK,MAAM,GAAwB;AAAA;AAAA,cAEpC;AAAA;AAAA,KAET,GACkB,cAAc,iBAAiB,EAClD,YAAM,GAAe,CAAE,EAChB,CACX,CAEA,sCACI,EACA,EACA,EAAoD,CAAC,EACxC,CAEb,KAAM,GAAa,AADJ,EAAG,WAAW,cAAc,CAAQ,EACzB,sBAAsB,EAChD,KAAM,GAAU,CACZ,MAAO,CACH,CACI,KAAM,OACN,SAAU,CACN,EAAW,EAAI,EAAW,MAAQ,EAClC,EAAW,EAAI,EAAW,OAAS,CACvC,EACA,SACJ,EACA,CACI,KAAM,OACN,SACJ,CACJ,CACJ,CAAC,EACD,KAAM,GAAU,EAChB,KAAM,GAAU,CACZ,MAAO,CACH,CACI,KAAM,KACN,SACJ,CACJ,CACJ,CAAC,EACD,KAAM,GAAe,CAAE,CAC3B,CAEO,sCACH,EACyC,CACzC,KAAM,GAA2C,CAAC,EAC5C,EAAqB,AAAC,GAA0C,CAClE,EAAc,KAAK,EAAM,OAAO,QAAQ,EACxC,EAAgB,CACpB,EACM,EAAkB,IAAY,CAChC,EAAc,QAAQ,AAAC,GAAa,EAAS,CAAI,CAAC,CACtD,EACA,MAAO,EACX",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|