Skip to content

Commit 76bf8d3

Browse files
jlukicjlukic
committed
Update docs
1 parent 673a0a5 commit 76bf8d3

6 files changed

Lines changed: 178 additions & 98 deletions

File tree

‎server/documents/behaviors/form.html.eco‎

Lines changed: 82 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1403,10 +1403,86 @@ type : 'UI Behavior'
14031403

14041404
<h2 class="ui dividing header">Form Examples</h2>
14051405

1406-
<div class="dropdown example">
1407-
<h4 class="ui header">Regular Expressions</h4>
1408-
1406+
<div class="add example">
1407+
<h4 class="ui header">
1408+
Adding Rules Programmatically <div class="ui teal label">New in 2.2.11</div>
1409+
</h4>
1410+
<p>You can use the special behaviors <code>add field/rule</code>, <code>remove rule</code> and <code>remove field</code> to dynamically add or remove fields or rules. </p>
1411+
<div class="ui ignored info message">
1412+
<div class="ui header">Adding Multiple Rules and Complex Rules</div>
1413+
You can specify shorthand or full rule objects when adding rules. You can also specifiy fields as an array to modify multiple fields.</code>.
1414+
</div>
1415+
<div class="code">
1416+
// lets only validate username to start
1417+
$('.add.example .ui.form')
1418+
.form({
1419+
username: ['empty', 'minLength[5]']
1420+
})
1421+
;
1422+
</div>
1423+
<div class="evaluated code">
1424+
// lets toggle some validation based on button
1425+
$('.add.example .ui.positive.button')
1426+
.on('click', function() {
1427+
$('.add.example .ui.form')
1428+
// adding longform
1429+
.form('add rule', 'gender', {
1430+
rules: [
1431+
{
1432+
type : 'empty',
1433+
prompt : 'Entering your gender is necessary'
1434+
}
1435+
]
1436+
})
1437+
// adding shorthand
1438+
.form('add rule', 'password', ['empty', 'minLength[5]'])
1439+
;
1440+
})
1441+
;
1442+
</div>
1443+
<div class="evaluated code">
1444+
$('.add.example .ui.negative.button')
1445+
.on('click', function() {
1446+
$('.add.example .ui.form')
1447+
// removing multiple at once
1448+
.form('remove fields', ['gender', 'password'])
1449+
;
1450+
})
1451+
;
1452+
</div>
1453+
<div class="ui positive button">Add Additional Validation</div>
1454+
<div class="ui negative button">Remove Additional Validation</div>
1455+
<form class="ui form segment">
1456+
<div class="two fields">
1457+
<div class="field">
1458+
<label>Username</label>
1459+
<input type="text" name="username">
1460+
</div>
1461+
<div class="field">
1462+
<label>Password</label>
1463+
<input type="password" name="password">
1464+
</div>
1465+
</div>
1466+
<div class="two fields">
1467+
<div class="field">
1468+
<label>Gender</label>
1469+
<div class="ui fluid selection dropdown">
1470+
<input type="hidden" name="gender">
1471+
<div class="default text">Gender</div>
1472+
<i class="dropdown icon"></i>
1473+
<div class="menu">
1474+
<div class="item" data-value="1">Male</div>
1475+
<div class="item" data-value="0">Female</div>
1476+
</div>
1477+
</div>
1478+
</div>
1479+
</div>
1480+
<div class="ui primary submit button">Submit</div>
1481+
<div class="ui clear button">Clear</div>
1482+
<div class="ui error message"></div>
1483+
</form>
14091484
</div>
1485+
14101486
<div class="dropdown example">
14111487
<h4 class="ui header">Validating Dropdowns</h4>
14121488
<p><a href="/modules/dropdown.html">Dropdowns</a> can also be validated like other form fields. Simply match the validation rule to the <code>input</code> or <code>select</code> associated with the dropdown</p>
@@ -1417,24 +1493,8 @@ type : 'UI Behavior'
14171493
$('.ui.form')
14181494
.form({
14191495
fields: {
1420-
gender: {
1421-
identifier : 'gender',
1422-
rules: [
1423-
{
1424-
type : 'empty',
1425-
prompt : 'Please enter a gender'
1426-
}
1427-
]
1428-
},
1429-
name: {
1430-
identifier : 'name',
1431-
rules: [
1432-
{
1433-
type : 'empty',
1434-
prompt : 'Please enter your name'
1435-
}
1436-
]
1437-
}
1496+
gender: 'empty',
1497+
name: 'empty'
14381498
}
14391499
})
14401500
;
@@ -1468,14 +1528,7 @@ type : 'UI Behavior'
14681528
$('.ui.form')
14691529
.form(
14701530
fields: {
1471-
name: {
1472-
identifier : 'name',
1473-
rules: [
1474-
{
1475-
type : 'empty'
1476-
}
1477-
]
1478-
}
1531+
name: 'empty'
14791532
}
14801533
})
14811534
;

‎server/documents/elements/icon.html.eco‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,7 @@ themes : ['Default']
105105
<div class="column"><i class="shop icon"></i>Shop</div>
106106
<div class="column"><i class="shopping bag icon"></i>Shopping Bag</div>
107107
<div class="column"><i class="shopping basket icon"></i>Shopping Basket</div>
108+
<div class="column"><i class="sidebar icon"></i>Sidebar</div>
108109
<div class="column"><i class="signal icon"></i>Signal</div>
109110
<div class="column"><i class="sitemap icon"></i>Sitemap</div>
110111
<div class="column"><i class="tag icon"></i>Tag</div>
@@ -194,6 +195,7 @@ themes : ['Default']
194195
<i class="shop icon"></i>
195196
<i class="shopping bag icon"></i>
196197
<i class="shopping basket icon"></i>
198+
<i class="sidebar icon"></i>
197199
<i class="signal icon"></i>
198200
<i class="sitemap icon"></i>
199201
<i class="tag icon"></i>
@@ -1126,7 +1128,6 @@ themes : ['Default']
11261128
<div class="column"><i class="align right icon"></i>Align Right</div>
11271129
<div class="column"><i class="attach icon"></i>Attach</div>
11281130
<div class="column"><i class="bold icon"></i>Bold</div>
1129-
<div class="column"><i class="content icon"></i>Content</div>
11301131
<div class="column"><i class="copy icon"></i>Copy</div>
11311132
<div class="column"><i class="cut icon"></i>Cut</div>
11321133
<div class="column"><i class="font icon"></i>Font</div>
@@ -1157,7 +1158,6 @@ themes : ['Default']
11571158
<i class="align right icon"></i>
11581159
<i class="attach icon"></i>
11591160
<i class="bold icon"></i>
1160-
<i class="content icon"></i>
11611161
<i class="copy icon"></i>
11621162
<i class="cut icon"></i>
11631163
<i class="font icon"></i>

‎server/documents/hotfix.html.eco‎

Lines changed: 78 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -6,76 +6,91 @@ standalone : true
66
title : 'Test Page'
77
type : 'Library'
88
---
9-
<button id='btn1'>
10-
show modal 1
11-
</button>
12-
<button id='btn2'>
13-
show modal 2
14-
</button>
15-
<div class="ui modal" id='modal1'>
16-
<i class="close icon"></i>
17-
<div class="header">
18-
Profile Picture
19-
</div>
20-
<div class="image content">
21-
<div class="ui medium image">
22-
<img src="/images/avatar/large/chris.jpg">
23-
</div>
24-
<div class="description">
25-
<div class="ui header">We've auto-chosen a profile image for you.</div>
26-
<p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
27-
<p>Is it okay to use this photo?</p>
28-
</div>
29-
</div>
30-
<div class="actions">
31-
<div class="ui black deny button">
32-
Nope
33-
</div>
34-
<div class="ui positive right labeled icon button">
35-
Yep, that's me
36-
<i class="checkmark icon"></i>
37-
</div>
38-
</div>
39-
</div>
40-
<div class="ui modal" id='modal2'>
41-
<i class="close icon"></i>
42-
<div class="header">
43-
Profile Picture
44-
</div>
45-
<div class="image content">
46-
<div class="ui medium image">
47-
<img src="/images/avatar/large/chris.jpg">
48-
</div>
49-
<div class="description">
50-
<div class="ui header">We've auto-chosen a profile image for you.</div>
51-
<p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
52-
<p>Is it okay to use this photo?</p>
53-
</div>
54-
</div>
55-
<div class="actions">
56-
<div class="ui black deny button">
57-
Nope
58-
</div>
59-
<div class="ui positive right labeled icon button">
60-
Yep, that's me
61-
<i class="checkmark icon"></i>
62-
</div>
63-
</div>
9+
<div class="ui container">
10+
11+
<form class="ui form segment">
12+
<p>Tell Us About Yourself</p>
13+
<div class="two fields">
14+
<div class="field">
15+
<label>Name</label>
16+
<input placeholder="First Name" name="name" type="text">
17+
</div>
18+
<div class="field">
19+
<label>Gender</label>
20+
<select class="ui dropdown" name="gender">
21+
<option value="">Gender</option>
22+
<option value="male">Male</option>
23+
<option value="female">Female</option>
24+
</select>
25+
</div>
26+
</div>
27+
<div class="two fields">
28+
<div class="field">
29+
<label>Username</label>
30+
<input placeholder="Username" name="username" type="text">
31+
</div>
32+
<div class="field">
33+
<label>Password</label>
34+
<input type="password" name="password">
35+
</div>
36+
</div>
37+
<div class="field">
38+
<label>Skills</label>
39+
<select name="skills" multiple class="ui dropdown">
40+
<option value="">Select Skills</option>
41+
<option value="css">CSS</option>
42+
<option value="html">HTML</option>
43+
<option value="javascript">Javascript</option>
44+
<option value="design">Graphic Design</option>
45+
<option value="plumbing">Plumbing</option>
46+
<option value="mech">Mechanical Engineering</option>
47+
<option value="repair">Kitchen Repair</option>
48+
</select>
49+
</div>
50+
<div class="inline field">
51+
<div class="ui checkbox">
52+
<input type="checkbox" name="terms" />
53+
<label>I agree to the terms and conditions</label>
54+
</div>
55+
</div>
56+
<div class="ui primary submit button">Submit</div>
57+
<div class="ui error message"></div>
58+
</div>
59+
</form>
6460
</div>
6561
<script>
6662
$(document).ready(function() {
67-
$('#modal1').modal({closable: false})
68-
$('#modal2').modal({inverted: true})
69-
$('#btn1').click(function(){$('#modal1').modal('show')})
70-
$('#btn2').click(function(){$('#modal2').modal('show')})
7163

72-
});
64+
$('.ui.dropdown').dropdown();
65+
$('.ui.checkbox').checkbox();
66+
67+
$('.ui.form')
68+
.form({
69+
fields: {
70+
password : ['minLength[6]', 'empty'],
71+
skills : ['minCount[2]', 'empty'],
72+
terms : 'checked'
73+
}
74+
})
75+
.form('add field', 'username', 'empty')
76+
.form('add fields', {
77+
name : 'empty',
78+
gender : 'empty'
79+
})
80+
.form('remove rule', 'username', 'empty')
81+
.form('remove field', 'terms')
82+
.form('validate field', 'username')
83+
;
84+
85+
});
7386

7487
</script>
7588

7689
<!-- TEST CSS HERE !-->
7790
<style type="text/css">
78-
.container {
79-
margin-top: 2rem !important;
80-
}
91+
92+
.ui.container {
93+
padding-top: 2em;
94+
}
95+
8196
</style>

‎server/documents/modules/sticky.html.eco‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -527,6 +527,11 @@ type : 'UI Module'
527527
<td>false</td>
528528
<td>Whether element should be "pushed" by the viewport, attaching to the bottom of the screen when scrolling up</td>
529529
</tr>
530+
<tr>
531+
<td>setSize</td>
532+
<td>true <div class="ui label">New in 2.2.11</div></td>
533+
<td>Sets size of <code>fixed</code> content to match its width before fixing to screen dynamically. This is used because fixed may display block or 100% width content differently than it appears before sticking.</td>
534+
</tr>
530535
<tr>
531536
<td>jitter</td>
532537
<td>5</td>

‎server/files/javascript/form.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
semantic.validateForm = {};
1+
semantic.form = {};
22

33
// ready event
4-
semantic.validateForm.ready = function() {
4+
semantic.form.ready = function() {
55

66
// selector cache
77
var
88
$codeDropdown = $('.existing.code .dropdown'),
99
$dropdown = $('.main.container .ui.dropdown').not($codeDropdown),
10+
$addExample = $('.add.example form')
1011
// alias
1112
handler
1213
;
@@ -20,10 +21,11 @@ semantic.validateForm.ready = function() {
2021
.dropdown()
2122
;
2223

24+
2325
};
2426

2527

2628
// attach ready event
2729
$(document)
28-
.ready(semantic.validateForm.ready)
29-
;
30+
.ready(semantic.form.ready)
31+
;

‎server/files/javascript/validate-form.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ semantic.validateForm.ready = function() {
1515
$optionalForm = $('.optional.example .ui.form'),
1616
$dependsForm = $('.depends.example .ui.form'),
1717
$inlineForm = $('.inline.example .ui.form'),
18+
$addForm = $('.add.example .ui.form'),
1819
$form = $('.ui.form').not($dogForm).not($inlineForm).not($dropdownForm).not($optionalForm).not($promptForm),
1920
$checkbox = $('.main.container .ui.checkbox'),
2021
$dropdown = $('.main.container .ui.dropdown'),
@@ -333,6 +334,10 @@ semantic.validateForm.ready = function() {
333334
}
334335
})
335336
;
337+
338+
$addForm
339+
.form('remove fields', ['password', 'gender'])
340+
;
336341
};
337342

338343

0 commit comments

Comments
 (0)