Skip to content

Commit 1a9d0a8

Browse files
anthonykoerberanthonykoerber
committed
Allow config via DOM or object
1 parent 34ba4eb commit 1a9d0a8

3 files changed

Lines changed: 194 additions & 119 deletions

File tree

‎src/mm-form/index.html‎

Lines changed: 89 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -41,24 +41,19 @@
4141
</head>
4242

4343
<body>
44-
44+
4545
<mm-form id="testForm" unresolved>
46-
47-
<!-- row 1 -->
4846
<div class="col" span="1">
4947
<mm-input fitparent name="input" placeholder="Type a Number"></mm-input>
5048
</div>
51-
5249
<div class="col" span="1">
5350
<mm-dropdown fitparent name="dropdown" placeholder="Select an Item">
5451
<mm-list-item>List Item 1</mm-list-item>
5552
<mm-list-item>List Item 2</mm-list-item>
5653
<mm-list-item>List Item 3</mm-list-item>
5754
<mm-list-item>List Item 4</mm-list-item>
5855
</mm-dropdown>
59-
<!-- <mm-form-message id="special" message="Special form message"></mm-form-message> -->
6056
</div>
61-
6257
<div class="col" span="2">
6358
<mm-group fitparent unresolved name="radio">
6459
<mm-radio>
@@ -69,59 +64,108 @@
6964
</mm-radio>
7065
<mm-radio>
7166
<label>Blue</label>
72-
</mm-radio>
67+
</mm-radio>
7368
</mm-group>
7469
</div>
70+
</mm-form>
71+
7572

73+
<!-- config via markup -->
74+
<!--
75+
<mm-form id="testForm" unresolved>
76+
<div class="col" span="1">
77+
<mm-input
78+
fitparent
79+
name="input"
80+
label="Input"
81+
error-msg="Type a number"
82+
validation="int|empty"
83+
placeholder="Type a Number"></mm-input>
84+
</div>
85+
<div class="col" span="1">
86+
<mm-dropdown
87+
fitparent
88+
name="dropdown"
89+
label="Dropdown"
90+
error-msg="Select an item"
91+
error-msg-ele="special"
92+
validation="empty"
93+
placeholder="Select an Item">
94+
<mm-list-item>List Item 1</mm-list-item>
95+
<mm-list-item>List Item 2</mm-list-item>
96+
<mm-list-item>List Item 3</mm-list-item>
97+
<mm-list-item>List Item 4</mm-list-item>
98+
</mm-dropdown>
99+
<mm-form-message id="special"></mm-form-message>
100+
</div>
101+
<div class="col" span="2">
102+
<mm-group
103+
fitparent
104+
name="radio"
105+
label="Radio"
106+
error-msg="Choose a color"
107+
validation="empty">
108+
<mm-radio>
109+
<label>Red</label>
110+
</mm-radio>
111+
<mm-radio>
112+
<label>Green</label>
113+
</mm-radio>
114+
<mm-radio>
115+
<label>Blue</label>
116+
</mm-radio>
117+
</mm-group>
118+
</div>
76119
</mm-form>
120+
-->
77121

78122
<script>
79123

80124
// config/initial data set up this way:
81125
var config = {
82-
'input' : {
83-
validation: 'int|empty',
84-
parentEle: null,
85-
errorMsgEle: null,
86-
errorMsg: 'You need to type a number',
87-
label: 'Type a number'
88-
},
89-
'dropdown' : {
90-
validation: 'empty',
91-
parentEle: null,
92-
// errorMsgEle: 'special',
93-
errorMsg: 'You need to select an item',
94-
label: 'Select an Item'
95-
},
96-
'radio' : {
97-
validation: function(name, value, data) {
98-
return data[name] === 'Red' && value === 'Red';
99-
},
100-
parentEle: null,
101-
errorMsgEle: null,
102-
errorMsg: 'You need to select \'Red\'',
103-
label: 'Select a Color'
104-
}
126+
'input' : {
127+
validation: 'int|empty',
128+
parentEle: null,
129+
errorMsgEle: null,
130+
errorMsg: 'You need to type a number',
131+
label: 'Type a number'
105132
},
106-
107-
// data that holds any actual values
108-
data = {
109-
'input' : null,
110-
'dropdown' : null,
111-
'radio' : null
112-
};
113-
114-
// returned from server-side validation(?)
115-
// returnedData = {
116-
// 'input' : 'Type a number greater than 0',
117-
// 'dropdown' : 'Select a different item',
118-
// 'radio' : 'Select Green'
119-
// };
133+
'dropdown' : {
134+
validation: 'empty',
135+
parentEle: null,
136+
// errorMsgEle: 'special',
137+
errorMsg: 'You need to select an item',
138+
label: 'Select an Item'
139+
},
140+
'radio' : {
141+
validation: function(name, value, data) {
142+
return data[name] === 'Red' && value === 'Red';
143+
},
144+
parentEle: null,
145+
errorMsgEle: null,
146+
errorMsg: 'You need to select \'Red\'',
147+
label: 'Select a Color'
148+
}
149+
};
150+
151+
// data that holds any actual values
152+
// var data = {
153+
// 'input' : '1',
154+
// 'dropdown' : 'List Item 1',
155+
// 'radio' : 'Red'
156+
// };
157+
158+
// returned from server-side validation(?)
159+
// var returnedData = {
160+
// 'input' : 'Type a number greater than 0',
161+
// 'dropdown' : 'Select a different item',
162+
// 'radio' : 'Select Green'
163+
// };
120164

121165
window.addEventListener('WebComponentsReady', function(e) {
122166
var testForm = document.querySelector('#testForm');
123167

124-
testForm.data = data;
168+
// testForm.data = data;
125169
testForm.config = config;
126170

127171
testForm.addEventListener('serialize-form', function(e){

0 commit comments

Comments
 (0)