Skip to content

Commit

Permalink
Update docs for new features
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlukic
jlukic committed Jul 11, 2017
1 parent 76bf8d3 commit 43c1cd4
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 72 deletions.
20 changes: 20 additions & 0 deletions server/documents/behaviors/form.html.eco
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1811,6 +1811,26 @@ type : 'UI Behavior'
<td>is valid</td>
<td>Returns true/false whether a form passes its validation rules</td>
</tr>
<tr>
<td>add rule(field, rules)<div class="ui label">New in 2.2.11</div></td>
<td>Adds rule to existing rules for field, also aliased as <code>add field</code></td>
</tr>
<tr>
<td>add fields(fields) <div class="ui label">New in 2.2.11</div></td>
<td>Adds fields object to existing fields</td>
</tr>
<tr>
<td>remove rule(field, rules)<div class="ui label">New in 2.2.11</div></td>
<td>Removes specific rule from field leaving other rules</td>
</tr>
<tr>
<td>remove field(field)<div class="ui label">New in 2.2.11</div></td>
<td>Remove all validation for a field</td>
</tr>
<tr>
<td>add prompt(identifier, errors)</td>
<td>Adds error prompt to the field with the given identifier</td>
</tr>
<tr>
<td>is valid(fieldName)</td>
<td>Returns true/false whether a field passes its validation rules</td>
Expand Down
31 changes: 31 additions & 0 deletions server/documents/elements/step.html.eco
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,37 @@ themes : ['Default', 'Basic', 'GitHub']
</div>
</div>

<div class="example" data-class="stackable">
<h4 class="ui header">
Unstackable
<div class="ui teal label">New in 2.2.11</div>
</h4>
<p>A step can prevent itself from stacking on mobile</p>
<div class="ui unstackable steps">
<div class="step">
<i class="plane icon"></i>
<div class="content">
<div class="title">Shipping</div>
<div class="description">Choose your shipping options</div>
</div>
</div>
<div class="active step">
<i class="dollar icon"></i>
<div class="content">
<div class="title">Billing</div>
<div class="description">Enter billing information</div>
</div>
</div>
<div class="disabled step">
<i class="info circle icon"></i>
<div class="content">
<div class="title">Confirm Order</div>
<div class="description">Verify order details</div>
</div>
</div>
</div>
</div>

<div class="example" data-class="attached">
<h4 class="ui header">
Attached
Expand Down
115 changes: 48 additions & 67 deletions server/documents/hotfix.html.eco
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,80 +8,57 @@ type : 'Library'
---
<div class="ui container">

<form class="ui form segment">
<p>Tell Us About Yourself</p>
<div class="two fields">
<div class="field">
<label>Name</label>
<input placeholder="First Name" name="name" type="text">
</div>
<div class="field">
<label>Gender</label>
<select class="ui dropdown" name="gender">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="two fields">
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password">
</div>
</div>
<div class="field">
<label>Skills</label>
<select name="skills" multiple class="ui dropdown">
<option value="">Select Skills</option>
<option value="css">CSS</option>
<option value="html">HTML</option>
<option value="javascript">Javascript</option>
<option value="design">Graphic Design</option>
<option value="plumbing">Plumbing</option>
<option value="mech">Mechanical Engineering</option>
<option value="repair">Kitchen Repair</option>
</select>
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" name="terms" />
<label>I agree to the terms and conditions</label>
</div>
<form class="ui form">
<div class="ui left pointing dropdown">
<div class="text">File</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">New</div>
<div class="item">
<span class="description">ctrl + o</span>
Open...
</div>
<div class="item">
<span class="description">ctrl + s</span>
Save as...
</div>
<div class="item">
<span class="description">ctrl + r</span>
Rename
</div>
<div class="item">Make a copy</div>
<div class="item">
<i class="folder icon"></i>
Move to folder
</div>
<div class="item">
<i class="trash icon"></i>
Move to trash
</div>
<div class="divider"></div>
<div class="item">Download As...</div>
<div class="item">
<i class="dropdown icon"></i>
Publish To Web
<div class="menu">
<div class="item">Google Docs</div>
<div class="item">Google Drive</div>
<div class="item">Dropbox</div>
<div class="item">Adobe Creative Cloud</div>
<div class="item">Private FTP</div>
<div class="item">Another Service...</div>
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui error message"></div>
</div>
</form>
<div class="item">E-mail Collaborators</div>
</div>
</div>
</form>

</div>
<script>
$(document).ready(function() {

$('.ui.dropdown').dropdown();
$('.ui.checkbox').checkbox();

$('.ui.form')
.form({
fields: {
password : ['minLength[6]', 'empty'],
skills : ['minCount[2]', 'empty'],
terms : 'checked'
}
})
.form('add field', 'username', 'empty')
.form('add fields', {
name : 'empty',
gender : 'empty'
})
.form('remove rule', 'username', 'empty')
.form('remove field', 'terms')
.form('validate field', 'username')
;

});

</script>
Expand All @@ -93,4 +70,8 @@ type : 'Library'
padding-top: 2em;
}

.ui.dropdown {
float: right;
}

</style>
8 changes: 3 additions & 5 deletions server/files/javascript/form.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
semantic.form = {};
semantic.validateForm = {};

// ready event
semantic.form.ready = function() {
semantic.validateForm.ready = function() {

// selector cache
var
$codeDropdown = $('.existing.code .dropdown'),
$dropdown = $('.main.container .ui.dropdown').not($codeDropdown),
$addExample = $('.add.example form')
// alias
handler
;
Expand All @@ -21,11 +20,10 @@ semantic.form.ready = function() {
.dropdown()
;


};


// attach ready event
$(document)
.ready(semantic.form.ready)
.ready(semantic.validateForm.ready)
;

0 comments on commit 43c1cd4

Please sign in to comment.