Skip to content

Commit 6783ece

Browse files
anthonykoerberanthonykoerber
committed
NEW mm-form WIP
1 parent 028b876 commit 6783ece

4 files changed

Lines changed: 243 additions & 283 deletions

File tree

‎src/mm-form/index.html‎

Lines changed: 30 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@
22
<html>
33
<head>
44
<script language="javascript" src="../../bower_components/webcomponentsjs/webcomponents.js"></script>
5-
65
<link rel="import" href="../../build/strand.html" />
7-
<!-- <link rel="import" href="../mm-dimensions/mm-dimensions.html" /> -->
8-
<!-- <link rel="import" href="mm-form.html" /> -->
96

107
<style type="text/css">
118
body, html {
@@ -44,89 +41,25 @@
4441
</head>
4542

4643
<body>
47-
<!-- dom module for testing special cases -->
48-
<!--
49-
<dom-module id="special-snowflake">
50-
<style type="text/css">
51-
:host {
52-
position: relative;
53-
display: flex;
54-
align-items: center;
55-
font-size: 0;
56-
}
57-
mm-dropdown {
58-
margin-right: 15px;
59-
}
60-
</style>
61-
<template>
62-
<mm-radio
63-
id="standardSize"
64-
group="sizes"
65-
checked
66-
on-selected="_handleRadioSelected"></mm-radio>
67-
<mm-dropdown
68-
id="standardSizeDdl"
69-
disabled$="{{!isStandard}}"
70-
on-changed="_standardSizeChanged"
71-
placeholder="Select One">
72-
<mm-list-item>160x600</mm-list-item>
73-
<mm-list-item>728x90</mm-list-item>
74-
<mm-list-item>300x250</mm-list-item>
75-
</mm-dropdown>
76-
<mm-radio
77-
id="nonStandardSize"
78-
group="sizes"
79-
on-selected="_handleRadioSelected"></mm-radio>
80-
<mm-group id="nonStandardSizeGroup" disabled$="{{isStandard}}">
81-
<mm-input
82-
id="width"
83-
placeholder="Width"
84-
validation="int"
85-
on-changed="_widthChanged"></mm-input>
86-
<mm-input
87-
id="height"
88-
placeholder="Height"
89-
validation="int"
90-
on-changed="_heightChanged"></mm-input>
91-
</mm-group>
92-
</template>
93-
</dom-module>
94-
-->
9544

9645
<mm-form id="testForm" unresolved>
46+
9747
<!-- row 1 -->
9848
<div class="col" span="1">
99-
<mm-input
100-
fitparent
101-
name="input"
102-
validation="int|empty"
103-
placeholder="Type a Number"
104-
label="Type a Number"
105-
error-message="You need to type a number"></mm-input>
49+
<mm-input fitparent name="input" placeholder="Type a Number" value="123"></mm-input>
10650
</div>
51+
10752
<div class="col" span="1">
108-
<mm-dropdown
109-
fitparent
110-
name="dropdown"
111-
placeholder="Select an Item"
112-
validation="empty"
113-
label="Select an Item"
114-
error-message="You need to select an item">
53+
<mm-dropdown fitparent name="dropdown" placeholder="Select an Item" value="List Item 1">
11554
<mm-list-item>List Item 1</mm-list-item>
11655
<mm-list-item>List Item 2</mm-list-item>
11756
<mm-list-item>List Item 3</mm-list-item>
11857
<mm-list-item>List Item 4</mm-list-item>
11958
</mm-dropdown>
12059
</div>
60+
12161
<div class="col" span="2">
122-
<mm-group
123-
fitparent
124-
unresolved
125-
name="radio"
126-
placeholder="Select an Item"
127-
validation="empty"
128-
label="Select a Color"
129-
error-message="You need to select a color">
62+
<mm-group fitparent unresolved name="radio" value="Red">
13063
<mm-radio>
13164
<label>Red</label>
13265
</mm-radio>
@@ -140,6 +73,7 @@
14073
</div>
14174

14275
<!-- row 2 -->
76+
<!--
14377
<div class="col" span="1">
14478
<mm-dimensions
14579
id="dimensions"
@@ -148,19 +82,35 @@
14882
validation="dimensions|empty"
14983
label="Select a Dimension"
15084
error-message="You need to select dimensions"></mm-dimensions>
85+
</div>
86+
-->
87+
15188
</mm-form>
152-
<!-- multi-value -->
15389

15490
<script>
91+
92+
var formData = {
93+
'input' : {
94+
validation: 'int|empty',
95+
errorMsg: 'You need to type a number',
96+
label: 'Type a number'
97+
},
98+
'dropdown' : {
99+
validation: 'empty',
100+
errorMsg: 'You need to select an item',
101+
label: 'Select an Item'
102+
},
103+
'radio' : {
104+
validation: 'empty',
105+
errorMsg: 'You need to select a color',
106+
label: 'Select a Color'
107+
}
108+
};
109+
155110
window.addEventListener('WebComponentsReady', function(e) {
156111
var testForm = document.querySelector('#testForm');
157112

158-
// add custom validation rules for the dimension component
159-
// this would probably be more robust, but this is sufficient
160-
testForm.rules.dimensions = function(i) {
161-
return i ? typeof(parseInt(i.width) === 'number') &&
162-
typeof(parseInt(i.height) === 'number') : false;
163-
}
113+
testForm.data = formData;
164114

165115
testForm.addEventListener('serialize-form', function(e){
166116
console.log('serialize-form', e.detail);

‎src/mm-form/mm-form.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
<!-- footer -->
2626
<mm-footer
2727
id="formActions"
28-
type="{{footerType}}"
29-
message="{{footerMessage}}"
28+
type="{{_footerType}}"
29+
message="{{_footerMessage}}"
3030
message-visible="{{_displayFooterMessage}}"
3131
unresolved fitparent semi-transparent>
3232

0 commit comments

Comments
 (0)