@pageboard/html 0.10.9 → 0.10.14
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/elements/fieldsets.js +76 -0
- package/elements/input-date.js +150 -0
- package/elements/{form-input-file.js → input-file.js} +3 -22
- package/elements/{form-input-property.js → input-property.js} +9 -32
- package/elements/{form-inputs.js → inputs.js} +5 -80
- package/lib/object-fit-images.js +1 -1
- package/package.json +1 -1
- package/ui/card.css +49 -49
- package/ui/fieldset-list.js +3 -4
- package/ui/form.css +3 -12
- package/ui/form.js +15 -3
- package/ui/input-date-slot.js +76 -0
- package/ui/input-date.js +69 -0
- package/ui/input-file.css +50 -39
- package/ui/input-file.js +59 -40
- package/ui/item.css +30 -30
- package/ui/layout.css +1 -1
- package/ui/loading.css +7 -7
- package/ui/menu.css +1 -1
- package/ui/pagination.js +6 -6
- package/ui/rating.css +7 -7
- package/ui/select.js +21 -9
- package/ui/site.css +25 -35
- package/ui/sticky.js +1 -1
- package/ui/tab.css +1 -4
- package/ui/transition.css +8 -8
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
exports.fieldset = {
|
|
2
|
+
title: 'Fieldset',
|
|
3
|
+
icon: '<i class="folder outline icon"></i>',
|
|
4
|
+
menu: 'form',
|
|
5
|
+
group: 'block',
|
|
6
|
+
context: 'form//',
|
|
7
|
+
properties: {
|
|
8
|
+
name: {
|
|
9
|
+
title: 'Show if input named',
|
|
10
|
+
type: 'string',
|
|
11
|
+
format: 'singleline',
|
|
12
|
+
nullable: true,
|
|
13
|
+
$helper: {
|
|
14
|
+
name: 'element-property',
|
|
15
|
+
existing: true
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
value: {
|
|
19
|
+
title: 'matches this value',
|
|
20
|
+
type: 'string',
|
|
21
|
+
format: 'singleline',
|
|
22
|
+
$filter: {
|
|
23
|
+
name: 'element-value',
|
|
24
|
+
using: 'name'
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
plain: {
|
|
28
|
+
title: 'Without borders',
|
|
29
|
+
type: 'boolean',
|
|
30
|
+
default: false
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
contents: "fieldset_legend block+",
|
|
34
|
+
html: '<fieldset class="[plain|?]" data-name="[name]" data-value="[value]" is="element-fieldset"></fieldset>',
|
|
35
|
+
scripts: ["../ui/fieldset.js"]
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
exports.fieldset_legend = {
|
|
39
|
+
inplace: true,
|
|
40
|
+
contents: "inline*",
|
|
41
|
+
html: '<legend>Title</legend>'
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
exports.fieldset_list = {
|
|
45
|
+
title: 'FieldList',
|
|
46
|
+
menu: "form",
|
|
47
|
+
icon: '<i class="icons"><i class="folder outline icon"></i><i class="corner add icon"></i></i>',
|
|
48
|
+
group: "block",
|
|
49
|
+
context: 'form//',
|
|
50
|
+
priority: 0,
|
|
51
|
+
properties: {
|
|
52
|
+
size: {
|
|
53
|
+
title: 'Minimum size',
|
|
54
|
+
type: "integer",
|
|
55
|
+
minimum: 0,
|
|
56
|
+
default: 1
|
|
57
|
+
},
|
|
58
|
+
prefix: {
|
|
59
|
+
title: 'Prefix',
|
|
60
|
+
description: '',
|
|
61
|
+
type: "string",
|
|
62
|
+
format: 'singleline',
|
|
63
|
+
nullable: true
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
contents: [{
|
|
67
|
+
id: 'template',
|
|
68
|
+
nodes: 'block+'
|
|
69
|
+
}],
|
|
70
|
+
html: `<element-fieldset-list data-size="[size]" data-prefix="[prefix]">
|
|
71
|
+
<template block-content="template"></template>
|
|
72
|
+
<div class="view"></div>
|
|
73
|
+
</element-fieldset-list>`,
|
|
74
|
+
scripts: ['../ui/fieldset-list.js'],
|
|
75
|
+
stylesheets: ['../ui/fieldset-list.css']
|
|
76
|
+
};
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
exports.input_date_time = {
|
|
2
|
+
title: 'DateTime',
|
|
3
|
+
icon: '<i class="calendar outline icon"></i>',
|
|
4
|
+
menu: "form",
|
|
5
|
+
required: ["name"],
|
|
6
|
+
group: "block",
|
|
7
|
+
context: 'form//',
|
|
8
|
+
properties: {
|
|
9
|
+
name: {
|
|
10
|
+
title: "Name",
|
|
11
|
+
description: "The form object key",
|
|
12
|
+
type: "string",
|
|
13
|
+
format: "singleline"
|
|
14
|
+
},
|
|
15
|
+
value: {
|
|
16
|
+
title: "Default value",
|
|
17
|
+
nullable: true,
|
|
18
|
+
type: "string",
|
|
19
|
+
format: "singleline"
|
|
20
|
+
},
|
|
21
|
+
placeholder: {
|
|
22
|
+
title: "Placeholder",
|
|
23
|
+
nullable: true,
|
|
24
|
+
type: "string",
|
|
25
|
+
format: "singleline"
|
|
26
|
+
},
|
|
27
|
+
required: {
|
|
28
|
+
title: 'Required',
|
|
29
|
+
type: 'boolean',
|
|
30
|
+
default: false
|
|
31
|
+
},
|
|
32
|
+
disabled: {
|
|
33
|
+
title: 'Disabled',
|
|
34
|
+
type: 'boolean',
|
|
35
|
+
default: false
|
|
36
|
+
},
|
|
37
|
+
format: {
|
|
38
|
+
title: 'Format',
|
|
39
|
+
default: "datetime",
|
|
40
|
+
anyOf: [{
|
|
41
|
+
const: "datetime",
|
|
42
|
+
title: "Date-Time"
|
|
43
|
+
}, {
|
|
44
|
+
const: "date",
|
|
45
|
+
title: "Date"
|
|
46
|
+
}, {
|
|
47
|
+
const: "time",
|
|
48
|
+
title: "Time"
|
|
49
|
+
}]
|
|
50
|
+
},
|
|
51
|
+
step: {
|
|
52
|
+
title: 'Step',
|
|
53
|
+
description: 'rounding/increment in seconds',
|
|
54
|
+
type: 'integer',
|
|
55
|
+
nullable: true,
|
|
56
|
+
anyOf: [{
|
|
57
|
+
const: 60 * 5,
|
|
58
|
+
title: '5 minutes'
|
|
59
|
+
}, {
|
|
60
|
+
const: 60 * 15,
|
|
61
|
+
title: '15 minutes'
|
|
62
|
+
}, {
|
|
63
|
+
const: 60 * 30,
|
|
64
|
+
title: '30 minutes'
|
|
65
|
+
}, {
|
|
66
|
+
const: 60 * 60,
|
|
67
|
+
title: '1 hour'
|
|
68
|
+
}, {
|
|
69
|
+
const: 86400,
|
|
70
|
+
title: '1 day'
|
|
71
|
+
}]
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
contents: {
|
|
75
|
+
id: 'label',
|
|
76
|
+
nodes: 'inline*'
|
|
77
|
+
},
|
|
78
|
+
html: `<div class="field">
|
|
79
|
+
<label block-content="label">Label</label>
|
|
80
|
+
<input is="element-input-date"
|
|
81
|
+
name="[name]" disabled="[disabled]" placeholder="[placeholder]"
|
|
82
|
+
required="[required]" value="[value]" step="[step|magnet:]"
|
|
83
|
+
type="[format|eq:datetime:datetime-local]"
|
|
84
|
+
/>
|
|
85
|
+
</div>`,
|
|
86
|
+
scripts: [
|
|
87
|
+
'../ui/input-date.js'
|
|
88
|
+
]
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
exports.input_date_slot = {
|
|
92
|
+
title: 'DateSlot',
|
|
93
|
+
icon: '<i class="calendar outline icon"></i>',
|
|
94
|
+
menu: "form",
|
|
95
|
+
required: ["nameStart", "nameEnd"],
|
|
96
|
+
group: "block",
|
|
97
|
+
context: 'form//',
|
|
98
|
+
properties: {
|
|
99
|
+
nameStart: {
|
|
100
|
+
title: "Name for start date",
|
|
101
|
+
description: "The form object key",
|
|
102
|
+
type: "string",
|
|
103
|
+
format: "singleline"
|
|
104
|
+
},
|
|
105
|
+
nameEnd: {
|
|
106
|
+
title: "Name for end date",
|
|
107
|
+
description: "The form object key",
|
|
108
|
+
type: "string",
|
|
109
|
+
format: "singleline"
|
|
110
|
+
},
|
|
111
|
+
valueStart: {
|
|
112
|
+
title: 'Start time',
|
|
113
|
+
nullable: true,
|
|
114
|
+
type: "string",
|
|
115
|
+
format: "singleline"
|
|
116
|
+
},
|
|
117
|
+
valueEnd: {
|
|
118
|
+
title: 'End time',
|
|
119
|
+
nullable: true,
|
|
120
|
+
type: "string",
|
|
121
|
+
format: "singleline"
|
|
122
|
+
},
|
|
123
|
+
required: {
|
|
124
|
+
title: 'Required',
|
|
125
|
+
type: 'boolean',
|
|
126
|
+
default: false
|
|
127
|
+
},
|
|
128
|
+
disabled: {
|
|
129
|
+
title: 'Disabled',
|
|
130
|
+
type: 'boolean',
|
|
131
|
+
default: false
|
|
132
|
+
},
|
|
133
|
+
step: exports.input_date_time.properties.step,
|
|
134
|
+
format: exports.input_date_time.properties.format
|
|
135
|
+
},
|
|
136
|
+
contents: {
|
|
137
|
+
id: 'label',
|
|
138
|
+
nodes: 'inline*'
|
|
139
|
+
},
|
|
140
|
+
html: `<div class="field">
|
|
141
|
+
<label block-content="label">Label</label>
|
|
142
|
+
<element-input-date-slot type="[format|eq:datetime:datetime-local]" step="[step|magnet:]">
|
|
143
|
+
<input is="element-input-date" name="[nameStart]" value="[valueStart]" />
|
|
144
|
+
<input is="element-input-date" name="[nameEnd]" value="[valueEnd]" />
|
|
145
|
+
</element-input-date-slot>
|
|
146
|
+
</div>`,
|
|
147
|
+
scripts: [
|
|
148
|
+
'../ui/input-date-slot.js'
|
|
149
|
+
]
|
|
150
|
+
};
|
|
@@ -28,11 +28,6 @@ exports.input_file = {
|
|
|
28
28
|
type: 'boolean',
|
|
29
29
|
default: false
|
|
30
30
|
},
|
|
31
|
-
now: {
|
|
32
|
-
title: 'Upload on change',
|
|
33
|
-
type: 'boolean',
|
|
34
|
-
default: false
|
|
35
|
-
},
|
|
36
31
|
limits: {
|
|
37
32
|
title: 'Limits',
|
|
38
33
|
type: 'object',
|
|
@@ -51,13 +46,6 @@ exports.input_file = {
|
|
|
51
46
|
type: 'string'
|
|
52
47
|
},
|
|
53
48
|
default: ['*/*']
|
|
54
|
-
},
|
|
55
|
-
files: {
|
|
56
|
-
title: 'Files',
|
|
57
|
-
description: 'Max number of files',
|
|
58
|
-
type: 'integer',
|
|
59
|
-
minimum: 1,
|
|
60
|
-
default: 1
|
|
61
49
|
}
|
|
62
50
|
}
|
|
63
51
|
}
|
|
@@ -68,16 +56,9 @@ exports.input_file = {
|
|
|
68
56
|
},
|
|
69
57
|
html: `<div class="field">
|
|
70
58
|
<label block-content="label">Label</label>
|
|
71
|
-
<
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
disabled="[disabled]" multiple="[limits.files|gt:1|battr]" />
|
|
75
|
-
<label for="[$id]" class="ui icon button">
|
|
76
|
-
<i class="upload icon"></i>
|
|
77
|
-
<i class="delete icon"></i>
|
|
78
|
-
</label>
|
|
79
|
-
<div class="mini floating ui basic label"></div>
|
|
80
|
-
</element-input-file>
|
|
59
|
+
<div class="ui basic label"></div>
|
|
60
|
+
<input is="element-input-file" type="file" id="[$id]" required="[required]"
|
|
61
|
+
disabled="[disabled]" accept="[limits.types|join:,]" name="[name]" placeholder="[placeholder]" />
|
|
81
62
|
</div>`,
|
|
82
63
|
stylesheets: [
|
|
83
64
|
'../lib/components/input.css',
|
|
@@ -64,12 +64,13 @@ exports.input_property = {
|
|
|
64
64
|
required = prop.required && prop.required.indexOf(propKey) >= 0;
|
|
65
65
|
if (cases) {
|
|
66
66
|
prop = cases[propKey];
|
|
67
|
+
name = list.slice(0, i - 1).concat(list.slice(i + 1)).join('.');
|
|
67
68
|
cases = null;
|
|
68
69
|
} else {
|
|
69
70
|
if (prop.select && prop.select.$data == `0/${propKey}`) {
|
|
70
71
|
cases = prop.selectCases;
|
|
71
72
|
}
|
|
72
|
-
prop = (prop.properties || {})[propKey] || null;
|
|
73
|
+
prop = (prop.items && prop.items.properties || prop.properties || {})[propKey] || null;
|
|
73
74
|
}
|
|
74
75
|
if (prop == null) break;
|
|
75
76
|
}
|
|
@@ -133,6 +134,7 @@ exports.input_property = {
|
|
|
133
134
|
for (const item of listOf) {
|
|
134
135
|
content.appendChild(view.render({
|
|
135
136
|
type: multiple ? 'input_checkbox' : 'input_radio',
|
|
137
|
+
id,
|
|
136
138
|
data: {
|
|
137
139
|
name: name,
|
|
138
140
|
value: item.type == "null" ? null : item.const,
|
|
@@ -225,37 +227,13 @@ exports.input_property = {
|
|
|
225
227
|
label: prop.title
|
|
226
228
|
}
|
|
227
229
|
}));
|
|
228
|
-
} else if (propType.type == "string" &&
|
|
229
|
-
let type = "input_date_time";
|
|
230
|
-
if (!scope.$elements[type]) {
|
|
231
|
-
type = 'input_text';
|
|
232
|
-
}
|
|
230
|
+
} else if (propType.type == "string" && ["date", "time", "date-time"].includes(propType.format)) {
|
|
233
231
|
node.appendChild(view.render({
|
|
234
232
|
id,
|
|
235
|
-
type:
|
|
233
|
+
type: 'input_date_time',
|
|
236
234
|
data: {
|
|
237
235
|
name: name,
|
|
238
|
-
|
|
239
|
-
default: propType.default,
|
|
240
|
-
disabled: d.disabled,
|
|
241
|
-
required: required,
|
|
242
|
-
step: propType.step
|
|
243
|
-
},
|
|
244
|
-
content: {
|
|
245
|
-
label: prop.title
|
|
246
|
-
}
|
|
247
|
-
}));
|
|
248
|
-
} else if (propType.type == "string" && propType.format == "time") {
|
|
249
|
-
let type = "input_date_time";
|
|
250
|
-
if (!scope.$elements[type]) {
|
|
251
|
-
type = 'input_text';
|
|
252
|
-
}
|
|
253
|
-
node.appendChild(view.render({
|
|
254
|
-
id,
|
|
255
|
-
type: type,
|
|
256
|
-
data: {
|
|
257
|
-
name: name,
|
|
258
|
-
type: propType.format,
|
|
236
|
+
format: propType.format.replace('-', ''),
|
|
259
237
|
default: propType.default,
|
|
260
238
|
disabled: d.disabled,
|
|
261
239
|
required: required,
|
|
@@ -292,16 +270,15 @@ exports.input_property = {
|
|
|
292
270
|
}
|
|
293
271
|
}));
|
|
294
272
|
} else {
|
|
273
|
+
const type = (propType.format || propType.pattern) ? 'text' : 'textarea';
|
|
295
274
|
node.appendChild(view.render({
|
|
296
275
|
id,
|
|
297
276
|
type: 'input_text',
|
|
298
277
|
data: {
|
|
299
|
-
name
|
|
300
|
-
type: (propType.pattern || propType.format) ? 'text' : 'textarea',
|
|
278
|
+
name, type, required,
|
|
301
279
|
disabled: d.disabled,
|
|
302
280
|
default: propType.default,
|
|
303
|
-
placeholder: propType.description
|
|
304
|
-
required: required
|
|
281
|
+
placeholder: propType.description
|
|
305
282
|
},
|
|
306
283
|
content: {
|
|
307
284
|
label: prop.title
|
|
@@ -1,46 +1,3 @@
|
|
|
1
|
-
exports.fieldset = {
|
|
2
|
-
title: 'Fieldset',
|
|
3
|
-
icon: '<i class="folder outline icon"></i>',
|
|
4
|
-
menu: 'form',
|
|
5
|
-
group: 'block',
|
|
6
|
-
context: 'form//',
|
|
7
|
-
properties: {
|
|
8
|
-
name: {
|
|
9
|
-
title: 'Show if input named',
|
|
10
|
-
type: 'string',
|
|
11
|
-
format: 'singleline',
|
|
12
|
-
nullable: true,
|
|
13
|
-
$helper: {
|
|
14
|
-
name: 'element-property',
|
|
15
|
-
existing: true
|
|
16
|
-
}
|
|
17
|
-
},
|
|
18
|
-
value: {
|
|
19
|
-
title: 'matches this value',
|
|
20
|
-
type: 'string',
|
|
21
|
-
format: 'singleline',
|
|
22
|
-
$filter: {
|
|
23
|
-
name: 'element-value',
|
|
24
|
-
using: 'name'
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
plain: {
|
|
28
|
-
title: 'Without borders',
|
|
29
|
-
type: 'boolean',
|
|
30
|
-
default: false
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
contents: "fieldset_legend block+",
|
|
34
|
-
html: '<fieldset class="[plain|?]" data-name="[name]" data-value="[value]" is="element-fieldset"></fieldset>',
|
|
35
|
-
scripts: ["../ui/fieldset.js"]
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
exports.fieldset_legend = {
|
|
39
|
-
inplace: true,
|
|
40
|
-
contents: "inline*",
|
|
41
|
-
html: '<legend>Title</legend>'
|
|
42
|
-
};
|
|
43
|
-
|
|
44
1
|
exports.input_button = {
|
|
45
2
|
title: 'Button',
|
|
46
3
|
icon: '<i class="hand pointer icon"></i>',
|
|
@@ -359,8 +316,8 @@ exports.input_checkbox = {
|
|
|
359
316
|
<div class="ui [toggle|?] checkbox">
|
|
360
317
|
<input type="checkbox" required="[required]" disabled="[disabled]"
|
|
361
318
|
name="[name]" value="[value]" checked="[checked]"
|
|
362
|
-
id="for-[name][value|or:|pre:-]" />
|
|
363
|
-
<label block-content="label" for="for-[name][value|or:|pre:-]">Label</label>
|
|
319
|
+
id="for-[name][value|or:|pre:-]-[$id|slice:0:6]" />
|
|
320
|
+
<label block-content="label" for="for-[name][value|or:|pre:-]-[$id|slice:0:6]">Label</label>
|
|
364
321
|
</div>
|
|
365
322
|
</div>`,
|
|
366
323
|
stylesheets: [
|
|
@@ -405,8 +362,8 @@ exports.input_radio = {
|
|
|
405
362
|
<div class="ui radio checkbox">
|
|
406
363
|
<input type="radio" disabled="[disabled]"
|
|
407
364
|
name="[name]" value="[value|or:]" checked="[checked]"
|
|
408
|
-
id="for-[name][value|or:|pre:-]" />
|
|
409
|
-
<label block-content="label" for="for-[name][value|or:|pre:-]">Label</label>
|
|
365
|
+
id="for-[name][value|or:|pre:-]-[$id|slice:0:6]" />
|
|
366
|
+
<label block-content="label" for="for-[name][value|or:|pre:-]-[$id|slice:0:6]">Label</label>
|
|
410
367
|
</div>
|
|
411
368
|
</div>`,
|
|
412
369
|
stylesheets: [
|
|
@@ -502,36 +459,4 @@ exports.input_select_option = {
|
|
|
502
459
|
></element-select-option>`
|
|
503
460
|
};
|
|
504
461
|
|
|
505
|
-
|
|
506
|
-
title: 'FieldList',
|
|
507
|
-
menu: "form",
|
|
508
|
-
icon: '<i class="icons"><i class="folder outline icon"></i><i class="corner add icon"></i></i>',
|
|
509
|
-
group: "block",
|
|
510
|
-
context: 'form//',
|
|
511
|
-
priority: 0,
|
|
512
|
-
properties: {
|
|
513
|
-
size: {
|
|
514
|
-
title: 'Minimum size',
|
|
515
|
-
type: "integer",
|
|
516
|
-
minimum: 0,
|
|
517
|
-
default: 1
|
|
518
|
-
},
|
|
519
|
-
prefix: {
|
|
520
|
-
title: 'Prefix',
|
|
521
|
-
description: '',
|
|
522
|
-
type: "string",
|
|
523
|
-
format: 'singleline',
|
|
524
|
-
nullable: true
|
|
525
|
-
}
|
|
526
|
-
},
|
|
527
|
-
contents: [{
|
|
528
|
-
id: 'template',
|
|
529
|
-
nodes: 'block+'
|
|
530
|
-
}],
|
|
531
|
-
html: `<element-fieldset-list data-size="[size]" data-prefix="[prefix]">
|
|
532
|
-
<template block-content="template"></template>
|
|
533
|
-
<div class="view"></div>
|
|
534
|
-
</element-fieldset-list>`,
|
|
535
|
-
scripts: ['../ui/fieldset-list.js'],
|
|
536
|
-
stylesheets: ['../ui/fieldset-list.css']
|
|
537
|
-
};
|
|
462
|
+
|
package/lib/object-fit-images.js
CHANGED