forked from SolidOS/solid-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathfieldParams.ts
More file actions
115 lines (100 loc) · 3.38 KB
/
Copy pathfieldParams.ts
File metadata and controls
115 lines (100 loc) · 3.38 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import * as ns from '../../ns'
import { commentStyle, formHeadingStyle, formGroupStyle } from '../../style'
export type FieldParamsObject = {
size?: number, // input element size attribute
type?: string, // input element type attribute. Default: 'text' (not for Comment and Heading)
element?: string, // element type to use (Comment and Heading only)
style?: string, // style to use
dt?: string, // xsd data type for the RDF Literal corresponding to the field value. Default: xsd:string
uriPrefix?: string, // e.g. 'mailto:', will be removed when displaying value to user. Overrides dt.
namedNode?: boolean, // if true, field value corresponds to the URI of an RDF NamedNode. Overrides dt and uriPrefix.
pattern?: RegExp // for client-side input validation; field will go red if violated, green if ok
}
/**
* The fieldParams object defines various constants
* for use in various form fields. Depending on the
* field in questions, different values may be read
* from here.
*/
export const fieldParams: { [ fieldUri: string ]: FieldParamsObject } = {
/**
* Text field
*
* For possible date popups see e.g. http://www.dynamicdrive.com/dynamicindex7/jasoncalendar.htm
* or use HTML5: http://www.w3.org/TR/2011/WD-html-markup-20110113/input.date.html
*/
[ns.ui('ColorField').uri]: {
size: 9,
type: 'color',
style: 'height: 3em;', // around 1.5em is padding
dt: 'color',
pattern: /^\s*#[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f]([0-9a-f][0-9a-f])?\s*$/
}, // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
[ns.ui('DateField').uri]: {
size: 20,
type: 'date',
dt: 'date',
pattern: /^\s*[0-9][0-9][0-9][0-9](-[0-1]?[0-9]-[0-3]?[0-9])?Z?\s*$/
},
[ns.ui('DateTimeField').uri]: {
size: 20,
type: 'datetime-local', // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime
dt: 'dateTime',
pattern: /^\s*[0-9][0-9][0-9][0-9](-[0-1]?[0-9]-[0-3]?[0-9])?(T[0-2][0-9]:[0-5][0-9](:[0-5][0-9])?)?Z?\s*$/
},
[ns.ui('TimeField').uri]: {
size: 10,
type: 'time',
dt: 'time',
pattern: /^\s*([0-2]?[0-9]:[0-5][0-9](:[0-5][0-9])?)\s*$/
},
[ns.ui('IntegerField').uri]: {
size: 12,
style: 'text-align: right;',
dt: 'integer',
pattern: /^\s*-?[0-9]+\s*$/
},
[ns.ui('DecimalField').uri]: {
size: 12,
style: 'text-align: right;',
dt: 'decimal',
pattern: /^\s*-?[0-9]*(\.[0-9]*)?\s*$/
},
[ns.ui('FloatField').uri]: {
size: 12,
style: 'text-align: right;',
dt: 'float',
pattern: /^\s*-?[0-9]*(\.[0-9]*)?((e|E)-?[0-9]*)?\s*$/
},
[ns.ui('SingleLineTextField').uri]: {
},
[ns.ui('NamedNodeURIField').uri]: {
namedNode: true
},
[ns.ui('TextField').uri]: {
},
[ns.ui('PhoneField').uri]: {
size: 20,
uriPrefix: 'tel:',
pattern: /^\+?[\d-]+[\d]*$/
},
[ns.ui('EmailField').uri]: {
size: 30,
uriPrefix: 'mailto:',
pattern: /^\s*.*@.*\..*\s*$/ // @@ Get the right regexp here
},
[ns.ui('Group').uri]: {
style: formGroupStyle
},
/**
* Non-interactive fields
*/
[ns.ui('Comment').uri]: {
element: 'p',
style: commentStyle // was `padding: 0.1em 1.5em; color: ${formHeadingColor}; white-space: pre-wrap;`
},
[ns.ui('Heading').uri]: {
element: 'h3',
style: formHeadingStyle // was: `font-size: 110%; font-weight: bold; color: ${formHeadingColor}; padding: 0.2em;`
}
}