Skip to content

Commit 23f98d3

Browse files
cblanqueracblanquera
committed
updated checkbox, radio, switch considering form submission
1 parent 6e3bb6f commit 23f98d3

6 files changed

Lines changed: 197 additions & 248 deletions

File tree

‎packages/ink-ui-src/src/field/checkbox.ink‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
<script form observe="checked,disabled,name,readonly,required,value">
1+
<script>
22
import StyleSet from '@stackpress/ink/dist/style/StyleSet';
33
import setDisplay from '../utilities/style/display';
44
import { getProps, setStyles, getHandlers } from '../utilities/option';
55
//get ptops
6-
const { label = '', click, attributes } = getProps(this);
6+
const {
7+
label = '', name, value, checked,
8+
//event handlers
9+
click, change, update,
10+
//input elements
11+
attributes
12+
} = getProps(this);
713
//override default styles
814
const styles = new StyleSet();
915
this.styles = () => styles.toString();
@@ -12,14 +18,18 @@
1218
//set option styles
1319
setStyles(this.props, styles, 'check');
1420
//handlers
15-
const handlers = getHandlers(this);
21+
const handlers = getHandlers(this, click, change, update);
1622
</script>
17-
<label mount={handlers.mount}>
18-
<input
19-
{...attributes}
20-
type="checkbox"
21-
change={handlers.change}
22-
{click}
23-
/>
24-
<span>{label}</span>
25-
</label>
23+
<template type="light">
24+
<input type="checkbox" {...attributes} />
25+
</template>
26+
<template type="shadow">
27+
<label>
28+
<input
29+
type="checkbox"
30+
change={handlers.change}
31+
checked={attributes.checked}
32+
/>
33+
<span>{label}</span>
34+
</label>
35+
</template>

‎packages/ink-ui-src/src/field/radio.ink‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
<script form observe="checked,disabled,name,readonly,required,value">
1+
<script>
22
import StyleSet from '@stackpress/ink/dist/style/StyleSet';
33
import setDisplay from '../utilities/style/display';
44
import { getProps, setStyles, getHandlers } from '../utilities/option';
55
//get ptops
6-
const { label = '', change, update, attributes } = getProps(this);
6+
const {
7+
label = '', name, value, checked,
8+
//event handlers
9+
click, change, update,
10+
//input elements
11+
attributes
12+
} = getProps(this);
713
//override default styles
814
const styles = new StyleSet();
915
this.styles = () => styles.toString();
@@ -12,14 +18,18 @@
1218
//set option styles
1319
setStyles(this.props, styles, 'circle');
1420
//handlers
15-
const handlers = getHandlers(this, change, update);
21+
const handlers = getHandlers(this, click, change, update, false);
1622
</script>
17-
<label mount={handlers.mount}>
18-
<input
19-
{...attributes}
20-
type="radio"
21-
change={handlers.change}
22-
click={handlers.click}
23-
/>
24-
<span>{label}</span>
25-
</label>
23+
<template type="light">
24+
<input type="radio" {...attributes} />
25+
</template>
26+
<template type="shadow">
27+
<label>
28+
<input
29+
type="radio"
30+
change={handlers.change}
31+
checked={attributes.checked}
32+
/>
33+
<span>{label}</span>
34+
</label>
35+
</template>

‎packages/ink-ui-src/src/field/switch.ink‎

Lines changed: 85 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,90 @@
11
<style>
2-
:host {
3-
display: inline-block;
4-
}
2+
:host {
3+
display: inline-block;
4+
}
55

6-
label {
7-
position: relative;
8-
margin: 0;
9-
}
6+
label {
7+
position: relative;
8+
margin: 0;
9+
}
1010

11-
span {
12-
display: inline-block;
13-
font-weight: normal;
14-
line-height: 20px;
15-
margin: 0 4px;
16-
min-height: 24px;
17-
min-width: 18px;
18-
position: relative;
19-
}
11+
span {
12+
display: inline-block;
13+
font-weight: normal;
14+
line-height: 20px;
15+
margin: 0 4px;
16+
min-height: 24px;
17+
min-width: 18px;
18+
position: relative;
19+
}
2020

21-
span::before {
22-
font-family: Arial, Helvetica, sans-serif;
23-
border-style: solid;
24-
border-width: 1px;
25-
box-shadow: inset 0px 2px 2px 0px rgba(0, 0, 0, .2);
26-
color: #999999;
27-
display: inline-block;
28-
font-weight: bold;
29-
height: 20px;
30-
margin-right: 8px;
31-
overflow: hidden;
32-
padding: 0;
33-
position: relative;
34-
text-align: left;
35-
text-indent: -19px;
36-
top: 5px;
37-
transition: text-indent .4s ease;
38-
width: 52px;
39-
}
21+
span::before {
22+
font-family: Arial, Helvetica, sans-serif;
23+
border-style: solid;
24+
border-width: 1px;
25+
box-shadow: inset 0px 2px 2px 0px rgba(0, 0, 0, .2);
26+
color: #999999;
27+
display: inline-block;
28+
font-weight: bold;
29+
height: 20px;
30+
margin-right: 8px;
31+
overflow: hidden;
32+
padding: 0;
33+
position: relative;
34+
text-align: left;
35+
text-indent: -19px;
36+
top: 5px;
37+
transition: text-indent .4s ease;
38+
width: 52px;
39+
}
4040

41-
span::after {
42-
-webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, .3);
43-
-webkit-transition: left .4s ease;
44-
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, .3);
45-
font-family: Arial, Helvetica, sans-serif;
46-
font-size: 10px;
47-
font-weight: lighter;
48-
left: -3px;
49-
line-height: 20px;
50-
height: 22px;
51-
padding: 0;
52-
position: absolute;
53-
text-align: center;
54-
text-shadow: -1px 0px 0 rgba(0, 0, 0, 0.15);
55-
top: 4px;
56-
transition: left .4s ease;
57-
width: 22px;
58-
}
41+
span::after {
42+
-webkit-box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, .3);
43+
-webkit-transition: left .4s ease;
44+
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, .3);
45+
font-family: Arial, Helvetica, sans-serif;
46+
font-size: 10px;
47+
font-weight: lighter;
48+
left: -3px;
49+
line-height: 20px;
50+
height: 22px;
51+
padding: 0;
52+
position: absolute;
53+
text-align: center;
54+
text-shadow: -1px 0px 0 rgba(0, 0, 0, 0.15);
55+
top: 4px;
56+
transition: left .4s ease;
57+
width: 22px;
58+
}
5959

60-
input {
61-
cursor: pointer;
62-
height: 25px;
63-
opacity: 0;
64-
position: absolute;
65-
width: 55px;
66-
}
60+
input {
61+
cursor: pointer;
62+
height: 25px;
63+
opacity: 0;
64+
position: absolute;
65+
width: 55px;
66+
}
6767

68-
input:checked + span::before {
69-
text-indent: 9px;
70-
}
68+
input:checked + span::before {
69+
text-indent: 9px;
70+
}
7171

72-
input:checked + span::after {
73-
left: 34px;
74-
}
72+
input:checked + span::after {
73+
left: 34px;
74+
}
7575
</style>
76-
<script form observe="checked,disabled,name,readonly,required,value">
76+
<script>
7777
import StyleSet from '@stackpress/ink/dist/style/StyleSet';
7878
import { getHandlers } from '../utilities/option';
7979
//get props
8080
const {
8181
error, rounded, onoff,
8282
yesno, checkex, sunmoon,
8383
ridge, smooth, blue,
84-
orange, green, change,
85-
update, label = '',
86-
//we dont need these
87-
'class': _, style,
88-
...attributes
84+
orange, green, label = '',
85+
name, value, checked,
86+
//event handlers
87+
change, update, click,
8988
} = this.props;
9089
//override default styles
9190
const styles = new StyleSet();
@@ -170,13 +169,18 @@ input:checked + span::after {
170169
}
171170

172171
//handlers
173-
const handlers = getHandlers(this, change, update);
172+
const handlers = getHandlers(this, click, change, update);
174173
</script>
175-
<label mount={handlers.mount}>
176-
<input
177-
{...attributes}
178-
type="checkbox"
179-
change={handlers.change}
180-
/>
181-
<span >{label}</span>
182-
</label>
174+
<template type="light">
175+
<input type="checkbox" name={name} value={value} checked={checked} />
176+
</template>
177+
<template type="shadow">
178+
<label>
179+
<input
180+
type="checkbox"
181+
change={handlers.change}
182+
checked={checked}
183+
/>
184+
<span>{label}</span>
185+
</label>
186+
</template>

0 commit comments

Comments
 (0)