├── .versions ├── CHANGELOG.md ├── LICENSE ├── README.md ├── package.js └── templates └── semantic-ui ├── components ├── afArrayField │ ├── afArrayField.css │ └── afArrayField.html ├── afFormGroup │ ├── afFormGroup.html │ └── afFormGroup.js ├── afObjectField │ ├── afObjectField.html │ └── afObjectField.js └── quickForm │ ├── quickForm.html │ └── quickForm.js ├── inputTypes ├── basic-select │ ├── basic-select.html │ └── basic-select.js ├── boolean-checkbox │ ├── boolean-checkbox.html │ └── boolean-checkbox.js ├── button │ ├── button.html │ └── button.js ├── color │ └── color.html ├── date │ └── date.html ├── datetime-local │ └── datetime-local.html ├── datetime │ └── datetime.html ├── email │ └── email.html ├── month │ └── month.html ├── number │ └── number.html ├── password │ └── password.html ├── radio │ ├── radio.html │ └── radio.js ├── range │ └── range.html ├── reset │ ├── reset.html │ └── reset.js ├── search │ └── search.html ├── select-checkbox-inline │ ├── select-checkbox-inline.html │ └── select-checkbox-inline.js ├── select-checkbox │ ├── select-checkbox.html │ └── select-checkbox.js ├── select-radio-inline │ ├── select-radio-inline.html │ └── select-radio-inline.js ├── select-radio │ ├── select-radio.html │ └── select-radio.js ├── select │ ├── select.html │ └── select.js ├── submit │ ├── submit.html │ └── submit.js ├── tel │ └── tel.html ├── text │ └── text.html ├── textarea │ └── textarea.html ├── time │ └── time.html ├── url │ └── url.html └── week │ └── week.html └── semantic-ui.js /.versions: -------------------------------------------------------------------------------- 1 | aldeed:autoform@5.8.1 2 | aldeed:simple-schema@1.1.0 3 | babel-compiler@5.8.24_1 4 | babel-runtime@0.1.4 5 | base64@1.0.4 6 | blaze@2.1.3 7 | blaze-tools@1.0.4 8 | boilerplate-generator@1.0.4 9 | caching-compiler@1.0.0 10 | caching-html-compiler@1.0.2 11 | callback-hook@1.0.4 12 | check@1.1.0 13 | ddp@1.2.2 14 | ddp-client@1.2.1 15 | ddp-common@1.2.2 16 | ddp-server@1.2.2 17 | deps@1.0.9 18 | diff-sequence@1.0.1 19 | ecmascript@0.1.6 20 | ecmascript-runtime@0.2.6 21 | ejson@1.0.7 22 | fabienb4:autoform-semantic-ui@0.9.3 23 | geojson-utils@1.0.4 24 | html-tools@1.0.5 25 | htmljs@1.0.5 26 | id-map@1.0.4 27 | jquery@1.11.4 28 | livedata@1.0.15 29 | logging@1.0.8 30 | meteor@1.1.10 31 | minifiers@1.1.7 32 | minimongo@1.0.10 33 | momentjs:moment@2.10.6 34 | mongo-id@1.0.1 35 | observe-sequence@1.0.7 36 | ordered-dict@1.0.4 37 | promise@0.5.1 38 | random@1.0.5 39 | reactive-dict@1.1.3 40 | reactive-var@1.0.6 41 | retry@1.0.4 42 | routepolicy@1.0.6 43 | spacebars@1.0.7 44 | spacebars-compiler@1.0.7 45 | templating@1.1.5 46 | templating-tools@1.0.0 47 | tracker@1.0.9 48 | ui@1.0.8 49 | underscore@1.0.4 50 | webapp@1.2.3 51 | webapp-hashing@1.0.5 52 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | fabienb4:autoform-semantic-ui 2 | ========================= 3 | 4 | Semantic-ui template for aldeed:autoform package. 5 | 6 | ## ChangeLog 7 | 8 | ### 0.9.3 9 | 10 | - Updated `aldeed:autoform` dependency to 5.8.1. 11 | 12 | ### 0.9.2 13 | 14 | - Added missing `settings` parameters to input types using Semantic-UI `checkbox` modules. 15 | - Fixed `error` class on `afObjectField`. 16 | 17 | ### 0.9.1 18 | 19 | - Added label and icon features to input. 20 | 21 | ### 0.9.0 [BREAKING] 22 | 23 | - Renamed `classNames` attribute to `class` for consistency with Autoform. 24 | 25 | ### 0.8.0 [BREAKING] 26 | 27 | - Reverted part of previous commit (problem fixed with Semantic-UI > 2.1.5). 28 | - Fixed `select` not properly updated on initial page load or hard refresh. 29 | 30 | > `semantic:ui-css` package hasn't been updated on Atmosphere at the time of writing, use `semantic:ui` instead (> 2.1.5 needed). 31 | 32 | ### 0.7.3 33 | 34 | - Allow Autoform `disabled` form type behavior to work properly. 35 | - Fixed `formValues` reactive update with `select`. 36 | - Minor cleanup. 37 | 38 | ### 0.7.2 39 | 40 | - Bumped aldeed:autoform package version. 41 | 42 | ### 0.7.1 43 | 44 | - Updated `aldeed:autoform` dependency to 5.6.0. 45 | - Updated `select`: 46 | - Let Semantic-UI handle selected item(s). 47 | - Allow customizing dropdown settings (see README). 48 | - Updated README. 49 | 50 | ### 0.7.0 [BREAKING] 51 | 52 | - Revamped `select` settings. 53 | - Removed `selection` property. 54 | - Added `classNames` property (default to: `"fluid selection"`, pass an empty string to clear default). 55 | - Fixed atts on hidden input. 56 | 57 | ### 0.6.3 58 | 59 | - Fixed problem with labels. 60 | 61 | ### 0.6.2 62 | 63 | - Additional fixes/improvements after 0.6.x. 64 | - Fixed `select`'s categories parsing. 65 | - Fixed `basic-select` optgroups parsing. 66 | - Improved item/subitems for `select` & `basic-select` parsing. 67 | - `select` items now support "label", "description" & "selection" (see README). 68 | - Updated README. 69 | 70 | Thanks to @abernix for his help. 71 | 72 | ### 0.6.1 73 | 74 | - Updated `select` to support new features. 75 | - `allowAdditions`, `allowCategorySelection`, `multiple`, `maxSelections`, `useLabels` are now supported. 76 | - Categories can now be used (see README). 77 | 78 | ### 0.6.0 [BREAKING] 79 | 80 | - Updated for compatibility Meteor 1.2 (_no longer usable with Meteor < 1.2_). 81 | - Make use of ES6. 82 | - Major code cleanup. 83 | - Changed quickForm's submit, submit, reset & button colors (green, green, grey & grey, respectively). 84 | 85 | ### 0.5.0 86 | 87 | - Updated rendering according to changes in semantic-ui. 88 | - Errors: 89 | - Now display properly in a label under each field. 90 | - `errorsInLabel` is no longer used. 91 | - Arrays: 92 | - Fixed fields width. 93 | - Fixed corner labels positioning. 94 | - Added support for grouping fields (See aldeed/autoform README). 95 | - Semantic-UI implementation uses `ui segment` instead of `fieldset` for better rendering. 96 | - Updated autoform dependency to 5.5.1. 97 | - Removed useless `fluid field` wrapper. Closes #18 98 | 99 | ### 0.4.6 100 | 101 | - Optimized selectors. 102 | 103 | ### 0.4.6 104 | 105 | - Patch semantic-ui.js with latest changes from autoForm.js. 106 | - Placeholder should return when clearing an optional field that had an existing value. 107 | 108 | ### 0.4.5 109 | 110 | - Updated checked status for select & checkbox. 111 | - Added `select-checkbox-inline` & `select-radio-inline` input types. 112 | 113 | ### 0.4.4 114 | 115 | - Updated autoform dependency to 5.3.2. 116 | 117 | ### 0.4.3 118 | 119 | - Fixed issue with corner label size due to changes in Semantic UI 2.0 120 | 121 | ### 0.4.2 122 | 123 | - Dropdowns now close after clearing 124 | - Add the possibility to set attrs on the formgroup & label 125 | - Minor cleanup 126 | 127 | ### 0.4.1 128 | 129 | - Removed label on clear button in select to avoid issue with multilingual apps. 130 | 131 | ### 0.4.0 132 | 133 | - Updated autoform dependency to 5.3.0. 134 | 135 | ### 0.3.7 136 | 137 | - Boolean input field: `checkboxType` can now be used to determine what type of checkbox is used (can be either `slider` or `toggle`). When not provided, default to standard checkbox. 138 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Fabien Blanchard 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # fabienb4:autoform-semantic-ui 2 | 3 | > **I am looking for someone to take over this package, if you are interested in maintaining it, please send me an email.** 4 | 5 | Semantic-ui template for `aldeed:autoform` package. 6 | 7 | > semantic-ui is NOT included in this package, to allow you to use a customized version if you need to. If you don't use a custom version, you must add the default package `semantic:ui-css` to your meteor app, otherwise, there will be no styling. 8 | 9 | ## Table of Contents 10 | 11 | - [Installation](#installation) 12 | - [Usage](#usage) 13 | - [Input Options](#input-options) 14 | - [Icons and Labels](#icons-and-labels) 15 | - [Extended Input Types](#extended-input-types) 16 | - [basic-select](#basic-select) 17 | - [select](#select) 18 | - [boolean-checkbox](#boolean-checkbox) 19 | - [License](#license) 20 | - [Contributing](#contributing) 21 | 22 | ## Installation 23 | 24 | In your Meteor app directory: 25 | 26 | ``` 27 | $ meteor add aldeed:autoform fabienb4:autoform-semantic-ui 28 | ``` 29 | 30 | ## Usage 31 | 32 | In your code (client side) add: 33 | ```js 34 | Meteor.startup(() => { 35 | AutoForm.setDefaultTemplate("semanticUI"); 36 | }); 37 | ``` 38 | 39 | Or you can set the template on each form: 40 | ```js 41 | {{#autoForm collection="Items" id="itemsInsertForm" type="insert" template="semanticUI"}} 42 | 43 | {{/autoForm}} 44 | ``` 45 | 46 | For more information on how to use autoform, please refer to [aldeed:autoform README](https://github.com/aldeed/meteor-autoform/blob/master/README.md). 47 | 48 | ## Input Options 49 | 50 | ### Icons and Labels 51 | 52 | > To avoid alignment problems, you might want to use `label=false` with the following inputs. 53 | 54 | ```js 55 | // Left icon 56 | {{> afQuickField name="name" leftIcon="empty circle"}} 57 | 58 | // Left label 59 | {{> afQuickField name="name" leftLabel="name"}} 60 | 61 | // Right icon 62 | {{> afQuickField name="name" rightIcon="empty circle"}} 63 | 64 | // Right label 65 | {{> afQuickField name="name" rightLabel="name"}} 66 | 67 | // Left icon, right label 68 | {{> afQuickField name="name" leftIcon="empty circle" rightLabel="name"}} 69 | 70 | // Left label, right icon 71 | {{> afQuickField name="name" leftLabel="name" rightIcon="empty circle"}} 72 | ``` 73 | 74 | ## Extended Input Types 75 | 76 | ### basic-select 77 | **A basic select working without javascript (see: [basic-select](http://semantic-ui.com/collections/form.html#html-select))** 78 | 79 | ```js 80 | {{> afQuickField name="items" type="basic-select"}} 81 | ``` 82 | 83 | Possible formats for `options` in schema: 84 | 85 | ```js 86 | // Simple 87 | autoform: { 88 | afFieldInput: { 89 | options: () => [ 90 | { value: "1", label: "Item 1" }, 91 | { value: "2", label: "Item 2" } 92 | ] 93 | } 94 | } 95 | 96 | // With groups 97 | autoform: { 98 | afFieldInput: { 99 | options: () => [ 100 | { 101 | optgroup: "Group one", 102 | items: [ 103 | { value: "1", label: "Item 1" }, 104 | { value: "2", label: "Item 2" } 105 | ] 106 | }, 107 | { 108 | optgroup: "Group two", 109 | items: [ 110 | { value: "3", label: "Item 3" }, 111 | { value: "4", label: "Item 4" } 112 | ] 113 | } 114 | ] 115 | } 116 | } 117 | ``` 118 | 119 | ### select 120 | **A javascript driven select (see: [selection](http://semantic-ui.com/modules/dropdown.html#selection))** 121 | 122 | _If a field using a `select` is marked as optional in the schema, the dropdown will show a "Clear" button at the top of the list, allowing you to clear the currently selected value._ 123 | 124 | **WARNING: Categories and selection/search don't play well together** 125 | 126 | ```js 127 | // Simple 128 | {{> afQuickField name="items"}} 129 | 130 | // Custom placeholder 131 | {{> afQuickField name="items" placeholder="Select an item"}} 132 | 133 | // Specify classes for the dropdown (default: "fluid selection") 134 | {{> afQuickField name="items" class="compact selection"}} 135 | 136 | // Remove default "fluid selection" from classes 137 | {{> afQuickField name="items" class=""}} 138 | 139 | // Search (**do not play well with categories**) 140 | {{> afQuickField name="items" search=true}} 141 | 142 | // Full text search (**do not play well with categories**) 143 | {{> afQuickField name="items" fullTextSearch=true}} 144 | 145 | // Allow additions 146 | {{> afQuickField name="items" allowAdditions=true}} 147 | 148 | // Allow category selection 149 | {{> afQuickField name="items" allowCategorySelection=true}} 150 | 151 | // Multiple selections 152 | {{> afQuickField name="items" multiple=true}} 153 | 154 | // Maximum selections (in this case: 3) 155 | {{> afQuickField name="items" maxSelections=3}} 156 | 157 | // Show the number of selected items instead of their labels 158 | {{> afQuickField name="items" useLabels=false}} 159 | 160 | // Customize dropdown initialization settings 161 | // See: http://semantic-ui.com/modules/dropdown.html#/settings 162 | // Override any settings set with above properties 163 | {{> afQuickField name="items" settings=settings}} 164 | ``` 165 | 166 | Possible formats for `options` in schema: 167 | ```js 168 | // Simple 169 | autoform: { 170 | afFieldInput: { 171 | options: () => [ 172 | { value: "1", label: "Item 1" }, 173 | { value: "2", label: "Item 2" } 174 | ] 175 | } 176 | } 177 | 178 | // With icon/flag/label/description 179 | // See: 180 | // http://semantic-ui.com/modules/dropdown.html#icon 181 | // http://semantic-ui.com/modules/dropdown.html#label 182 | // http://semantic-ui.com/modules/dropdown.html#description 183 | autoform: { 184 | afFieldInput: { 185 | options: () => [ 186 | { value: "1", label: "Item 1", icon: "file text icon" }, 187 | { value: "2", label: "Item 2", icon: "bz flag" }, 188 | { value: "3", label: "Item 3", circularLabel: "red" }, 189 | { value: "4", label: "Item 4", description: "new" } 190 | ] 191 | } 192 | } 193 | 194 | // Groups with headers 195 | // See: http://semantic-ui.com/modules/dropdown.html#header 196 | autoform: { 197 | afFieldInput: { 198 | options: () => [ 199 | { 200 | itemGroup: "Group one", 201 | items: [ 202 | { value: "1", label: "Item 1" }, 203 | { value: "2", label: "Item 2" } 204 | ] 205 | }, 206 | { 207 | itemGroup: "Group two", 208 | items: [ 209 | { value: "3", label: "Item 3" }, 210 | { value: "4", label: "Item 4" } 211 | ] 212 | } 213 | ] 214 | } 215 | } 216 | 217 | // Categories (**do not play well with selection/search**) 218 | // See: http://semantic-ui.com/modules/dropdown.html#multiple-levels 219 | autoform: { 220 | afFieldInput: { 221 | options: () => [ 222 | { 223 | category: { value: "cat-one", label: "Category one" },// value if allowCategorySelection 224 | items: [ 225 | { value: "1", label: "Item 1" }, 226 | { value: "2", label: "Item 2" } 227 | ] 228 | }, 229 | { 230 | category: { label: "Category two" }, 231 | items: [ 232 | { value: "3", label: "Item 3" }, 233 | { value: "4", label: "Item 4" } 234 | ] 235 | } 236 | ] 237 | } 238 | } 239 | ``` 240 | 241 | ### boolean-checkbox 242 | 243 | ##### `slider` 244 | **See: [slider](http://semantic-ui.com/modules/checkbox.html#slider)** 245 | 246 | ```js 247 | {{> afQuickField name="isEnabled" checkboxType="slider"}} 248 | ``` 249 | 250 | ##### `toggle` 251 | **See: [toggle](http://semantic-ui.com/modules/checkbox.html#toggle)** 252 | 253 | ```js 254 | {{> afQuickField name="isEnabled" checkboxType="toggle"}} 255 | ``` 256 | 257 | ## License 258 | 259 | MIT 260 | 261 | ## Contributing 262 | 263 | Anyone is welcome to contribute. Fork, make your changes (test them!), and then submit a pull request. 264 | 265 | Bitcoin: `34o6GtZPvVXparT46Zw2kfdxex2SWRpkGS` 266 | 267 | [![Support via Gratipay](https://cdn.rawgit.com/gratipay/gratipay-badge/2.3.0/dist/gratipay.svg)](https://gratipay.com/fabienb4/) 268 | -------------------------------------------------------------------------------- /package.js: -------------------------------------------------------------------------------- 1 | Package.describe({ 2 | name: 'fabienb4:autoform-semantic-ui', 3 | version: '0.9.3', 4 | // Brief, one-line summary of the package. 5 | summary: 'Semantic-ui template for aldeed:autoform package.', 6 | // URL to the Git repository containing the source code for this package. 7 | git: 'https://github.com/fabienb4/meteor-autoform-semantic-ui.git', 8 | // By default, Meteor will default to using README.md for documentation. 9 | // To avoid submitting documentation, set this field to null. 10 | documentation: 'README.md' 11 | }); 12 | 13 | Package.onUse(function(api) { 14 | api.versionsFrom('1.2.0.1'); 15 | 16 | api.use(['ecmascript', 'templating', 'underscore', 'jquery'], 'client'); 17 | 18 | api.use('aldeed:autoform@5.8.1', 'client'); 19 | 20 | api.addFiles([ 21 | // semantic-ui Template - General 22 | 'templates/semantic-ui/semantic-ui.js', 23 | // semantic-ui Template - Components 24 | 'templates/semantic-ui/components/quickForm/quickForm.html', 25 | 'templates/semantic-ui/components/quickForm/quickForm.js', 26 | 'templates/semantic-ui/components/afArrayField/afArrayField.html', 27 | 'templates/semantic-ui/components/afArrayField/afArrayField.css', 28 | 'templates/semantic-ui/components/afFormGroup/afFormGroup.html', 29 | 'templates/semantic-ui/components/afFormGroup/afFormGroup.js', 30 | 'templates/semantic-ui/components/afObjectField/afObjectField.html', 31 | 'templates/semantic-ui/components/afObjectField/afObjectField.js', 32 | // semantic-ui Template - Input Types 33 | 'templates/semantic-ui/inputTypes/basic-select/basic-select.html', 34 | 'templates/semantic-ui/inputTypes/basic-select/basic-select.js', 35 | 'templates/semantic-ui/inputTypes/boolean-checkbox/boolean-checkbox.html', 36 | 'templates/semantic-ui/inputTypes/boolean-checkbox/boolean-checkbox.js', 37 | 'templates/semantic-ui/inputTypes/button/button.html', 38 | 'templates/semantic-ui/inputTypes/button/button.js', 39 | 'templates/semantic-ui/inputTypes/color/color.html', 40 | 'templates/semantic-ui/inputTypes/date/date.html', 41 | 'templates/semantic-ui/inputTypes/datetime/datetime.html', 42 | 'templates/semantic-ui/inputTypes/datetime-local/datetime-local.html', 43 | 'templates/semantic-ui/inputTypes/email/email.html', 44 | 'templates/semantic-ui/inputTypes/month/month.html', 45 | 'templates/semantic-ui/inputTypes/number/number.html', 46 | 'templates/semantic-ui/inputTypes/password/password.html', 47 | 'templates/semantic-ui/inputTypes/radio/radio.html', 48 | 'templates/semantic-ui/inputTypes/radio/radio.js', 49 | 'templates/semantic-ui/inputTypes/range/range.html', 50 | 'templates/semantic-ui/inputTypes/reset/reset.html', 51 | 'templates/semantic-ui/inputTypes/reset/reset.js', 52 | 'templates/semantic-ui/inputTypes/search/search.html', 53 | 'templates/semantic-ui/inputTypes/select/select.html', 54 | 'templates/semantic-ui/inputTypes/select/select.js', 55 | 'templates/semantic-ui/inputTypes/select-checkbox/select-checkbox.html', 56 | 'templates/semantic-ui/inputTypes/select-checkbox/select-checkbox.js', 57 | 'templates/semantic-ui/inputTypes/select-checkbox-inline/select-checkbox-inline.html', 58 | 'templates/semantic-ui/inputTypes/select-checkbox-inline/select-checkbox-inline.js', 59 | 'templates/semantic-ui/inputTypes/select-radio/select-radio.html', 60 | 'templates/semantic-ui/inputTypes/select-radio/select-radio.js', 61 | 'templates/semantic-ui/inputTypes/select-radio-inline/select-radio-inline.html', 62 | 'templates/semantic-ui/inputTypes/select-radio-inline/select-radio-inline.js', 63 | 'templates/semantic-ui/inputTypes/submit/submit.html', 64 | 'templates/semantic-ui/inputTypes/submit/submit.js', 65 | 'templates/semantic-ui/inputTypes/tel/tel.html', 66 | 'templates/semantic-ui/inputTypes/text/text.html', 67 | 'templates/semantic-ui/inputTypes/textarea/textarea.html', 68 | 'templates/semantic-ui/inputTypes/time/time.html', 69 | 'templates/semantic-ui/inputTypes/url/url.html', 70 | 'templates/semantic-ui/inputTypes/week/week.html', 71 | ], 'client'); 72 | }); 73 | -------------------------------------------------------------------------------- /templates/semantic-ui/components/afArrayField/afArrayField.css: -------------------------------------------------------------------------------- 1 | .autoform-array-item { 2 | position: relative; 3 | } 4 | 5 | .autoform-remove-item { 6 | display: inline-block; 7 | cursor: pointer; 8 | } 9 | -------------------------------------------------------------------------------- /templates/semantic-ui/components/afArrayField/afArrayField.html: -------------------------------------------------------------------------------- 1 | 30 | -------------------------------------------------------------------------------- /templates/semantic-ui/components/afFormGroup/afFormGroup.html: -------------------------------------------------------------------------------- 1 | 34 | -------------------------------------------------------------------------------- /templates/semantic-ui/components/afFormGroup/afFormGroup.js: -------------------------------------------------------------------------------- 1 | Template.afFormGroup_semanticUI.helpers({ 2 | skipLabel() { 3 | let self = this; 4 | let type = AutoForm.getInputType(self.afFieldInputAtts); 5 | 6 | return (self.skipLabel || type === "boolean-checkbox"); 7 | }, 8 | requiredClass() { 9 | if (this.required) { 10 | return "required"; 11 | } 12 | }, 13 | inputClass() { 14 | let leftLabel = this.afFieldInputAtts.leftLabel; 15 | let rightLabel = this.afFieldInputAtts.rightLabel; 16 | let leftIcon = this.afFieldInputAtts.leftIcon; 17 | let rightIcon = this.afFieldInputAtts.rightIcon; 18 | 19 | if (leftLabel || rightLabel || leftIcon || rightIcon) { 20 | let className = "ui"; 21 | 22 | if (leftLabel && rightIcon) { 23 | className += " labeled icon"; 24 | } else if (leftIcon && rightLabel) { 25 | className += " left icon right labeled"; 26 | } else if (leftLabel) { 27 | className += " labeled"; 28 | } else if (rightLabel) { 29 | className += " right labeled"; 30 | } else if (leftIcon) { 31 | className += " left icon"; 32 | } else if (rightIcon) { 33 | className += " icon"; 34 | } 35 | 36 | return className + " fluid input"; 37 | } 38 | }, 39 | leftLabel() { 40 | return this.afFieldInputAtts.leftLabel; 41 | }, 42 | rightLabel() { 43 | return this.afFieldInputAtts.rightLabel; 44 | }, 45 | leftIcon() { 46 | return this.afFieldInputAtts.leftIcon; 47 | }, 48 | rightIcon() { 49 | return this.afFieldInputAtts.rightIcon; 50 | } 51 | }); 52 | -------------------------------------------------------------------------------- /templates/semantic-ui/components/afObjectField/afObjectField.html: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /templates/semantic-ui/components/afObjectField/afObjectField.js: -------------------------------------------------------------------------------- 1 | Template.afObjectField_semanticUI.helpers({ 2 | quickFieldsAtts() { 3 | return _.pick(this, "name", "id-prefix"); 4 | } 5 | }); 6 | -------------------------------------------------------------------------------- /templates/semantic-ui/components/quickForm/quickForm.html: -------------------------------------------------------------------------------- 1 | 30 | -------------------------------------------------------------------------------- /templates/semantic-ui/components/quickForm/quickForm.js: -------------------------------------------------------------------------------- 1 | Template.quickForm_semanticUI.helpers({ 2 | fieldGroupLabel() { 3 | let name = this.name; 4 | 5 | // if field group name is of the form XY_abcde where "XY" is a number, remove prefix 6 | if (! Number.isNaN(parseInt(name.substr(0,2), 10)) && name.charAt(2) === "_") { 7 | name = name.substr(3); 8 | } 9 | 10 | // if SimpleSchema.defaultLabel is defined, use it 11 | if (typeof SimpleSchema.defaultLabel === "function") { 12 | return SimpleSchema.defaultLabel(name); 13 | } else { 14 | // else, just capitalise name 15 | return name.charAt(0).toUpperCase() + name.slice(1); 16 | } 17 | }, 18 | quickFieldsAtts() { 19 | // These are the quickForm attributes that we want to forward to 20 | // the afQuickFields component. 21 | return _.pick(this.atts, "id-prefix"); 22 | }, 23 | submitButtonAtts() { 24 | let qfAtts = this.atts; 25 | let atts = {}; 26 | 27 | if (typeof qfAtts.buttonClasses === "string") { 28 | atts["class"] = qfAtts.buttonClasses; 29 | } else { 30 | atts["class"] = "ui positive submit button"; 31 | } 32 | 33 | return atts; 34 | }, 35 | qfAutoFormContext() { 36 | let ctx = _.clone(this.qfAutoFormContext || {}); 37 | 38 | ctx = AutoForm.Utility.addClass(ctx, "ui form"); 39 | 40 | delete ctx["id-prefix"]; 41 | 42 | return ctx; 43 | } 44 | }); 45 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/basic-select/basic-select.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/basic-select/basic-select.js: -------------------------------------------------------------------------------- 1 | AutoForm.addInputType("basic-select", { 2 | template: "afBasicSelect", 3 | valueOut() { 4 | return this.val(); 5 | }, 6 | valueConverters: { 7 | stringArray: AutoForm.valueConverters.stringToStringArray, 8 | number: AutoForm.valueConverters.stringToNumber, 9 | numberArray: AutoForm.valueConverters.stringToNumberArray, 10 | boolean: AutoForm.valueConverters.stringToBoolean, 11 | booleanArray: AutoForm.valueConverters.stringToBooleanArray, 12 | date: AutoForm.valueConverters.stringToDate, 13 | dateArray: AutoForm.valueConverters.stringToDateArray 14 | }, 15 | contextAdjust(context) { 16 | // can fix issues with some browsers selecting the firstOption instead of the selected option 17 | context.atts.autocomplete = "off"; 18 | 19 | let itemAtts = _.omit(context.atts, "firstOption"); 20 | let firstOption = context.atts.firstOption; 21 | 22 | // build items list 23 | context.items = []; 24 | 25 | // If a firstOption was provided, add that to the items list first 26 | if (firstOption !== false) { 27 | context.items.push({ 28 | name: context.name, 29 | label: (typeof firstOption === "string" ? firstOption : "(Select One)"), 30 | value: "", 31 | // _id must be included because it is a special property that 32 | // #each uses to track unique list items when adding and removing them 33 | // See https://github.com/meteor/meteor/issues/2174 34 | // 35 | // Setting this to an empty string caused problems if option with value 36 | // 1 was in the options list because Spacebars evaluates "" to 1 and 37 | // considers that a duplicate. 38 | // See https://github.com/aldeed/meteor-autoform/issues/656 39 | _id: "AUTOFORM_EMPTY_FIRST_OPTION", 40 | selected: false, 41 | atts: itemAtts 42 | }); 43 | } 44 | 45 | let buildOption = option => ({ 46 | name: context.name, 47 | label: option.label, 48 | value: option.value, 49 | htmlAtts: _.omit(option, "label", "value"), 50 | // _id must be included because it is a special property that 51 | // #each uses to track unique list items when adding and removing them 52 | // See https://github.com/meteor/meteor/issues/2174 53 | // 54 | // The toString() is necessary because otherwise Spacebars evaluates 55 | // any string to 1 if the other values are numbers, and then considers 56 | // that a duplicate. 57 | // See https://github.com/aldeed/meteor-autoform/issues/656 58 | _id: option.value.toString(), 59 | selected: (option.value === context.value), 60 | atts: itemAtts 61 | }); 62 | 63 | // Add all defined options 64 | _.each(context.selectOptions, option => { 65 | if (option.optgroup) { 66 | let subOptions = _.map(option.items, buildOption); 67 | 68 | context.items.push({ 69 | optgroup: option.optgroup, 70 | items: subOptions 71 | }); 72 | } else { 73 | context.items.push(buildOption(option)); 74 | } 75 | }); 76 | 77 | return context; 78 | } 79 | }); 80 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/boolean-checkbox/boolean-checkbox.html: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/boolean-checkbox/boolean-checkbox.js: -------------------------------------------------------------------------------- 1 | Template.afCheckbox_semanticUI.onRendered(function() { 2 | this.$(this.firstNode).checkbox(this.data.atts.settings); 3 | }); 4 | 5 | Template.afCheckbox_semanticUI.helpers({ 6 | inputAtts() { 7 | return _.omit(this.atts, "checkboxType"); 8 | } 9 | }); 10 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/button/button.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/button/button.js: -------------------------------------------------------------------------------- 1 | Template.afInputButton_semanticUI.helpers({ 2 | atts() { 3 | let atts = _.clone(this.atts); 4 | 5 | // Add semantic-ui class 6 | atts = AutoForm.Utility.addClass(atts, "ui button"); 7 | 8 | return atts; 9 | } 10 | }); 11 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/color/color.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/date/date.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/datetime-local/datetime-local.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/datetime/datetime.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/email/email.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/month/month.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/number/number.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/password/password.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/radio/radio.html: -------------------------------------------------------------------------------- 1 | 9 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/radio/radio.js: -------------------------------------------------------------------------------- 1 | Template.afRadio_semanticUI.helpers({ 2 | atts() { 3 | let atts = _.clone(this.atts); 4 | 5 | if (this.selected) { 6 | atts.checked = ""; 7 | } 8 | 9 | return atts; 10 | } 11 | }); 12 | 13 | Template.afRadio_semanticUI.onRendered(function() { 14 | this.$(this.firstNode).checkbox(this.data.atts.settings); 15 | }); 16 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/range/range.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/reset/reset.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/reset/reset.js: -------------------------------------------------------------------------------- 1 | Template.afInputReset_semanticUI.helpers({ 2 | atts() { 3 | let atts = _.clone(this.atts); 4 | 5 | // Add semantic-ui class 6 | atts = AutoForm.Utility.addClass(atts, "ui button"); 7 | 8 | return atts; 9 | } 10 | }); 11 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/search/search.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/select-checkbox-inline/select-checkbox-inline.html: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/select-checkbox-inline/select-checkbox-inline.js: -------------------------------------------------------------------------------- 1 | Template.afCheckboxGroupInline_semanticUI.helpers({ 2 | atts() { 3 | let atts = _.clone(this.atts); 4 | 5 | if (this.selected) { 6 | atts.checked = "checked"; 7 | } 8 | 9 | // remove data-schema-key attribute because we put it 10 | // on the entire group 11 | delete atts["data-schema-key"]; 12 | 13 | return atts; 14 | }, 15 | dsk() { 16 | return { 17 | "data-schema-key": this.atts["data-schema-key"] 18 | }; 19 | } 20 | }); 21 | 22 | Template.afCheckboxGroupInline_semanticUI.onRendered(function() { 23 | this.$(this.firstNode).find(".ui.checkbox").checkbox(this.data.atts.settings); 24 | }); 25 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/select-checkbox/select-checkbox.html: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/select-checkbox/select-checkbox.js: -------------------------------------------------------------------------------- 1 | Template.afCheckboxGroup_semanticUI.helpers({ 2 | atts() { 3 | let atts = _.clone(this.atts); 4 | 5 | if (this.selected) { 6 | atts.checked = "checked"; 7 | } 8 | 9 | // remove data-schema-key attribute because we put it 10 | // on the entire group 11 | delete atts["data-schema-key"]; 12 | 13 | return atts; 14 | }, 15 | dsk() { 16 | return { 17 | "data-schema-key": this.atts["data-schema-key"] 18 | }; 19 | } 20 | }); 21 | 22 | Template.afCheckboxGroup_semanticUI.onRendered(function() { 23 | this.$(this.firstNode).find(".ui.checkbox").checkbox(this.data.atts.settings); 24 | }); 25 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/select-radio-inline/select-radio-inline.html: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/select-radio-inline/select-radio-inline.js: -------------------------------------------------------------------------------- 1 | Template.afRadioGroupInline_semanticUI.helpers({ 2 | atts() { 3 | let atts = _.clone(this.atts); 4 | 5 | if (this.selected) { 6 | atts.checked = "checked"; 7 | } 8 | 9 | // remove data-schema-key attribute because we put it 10 | // on the entire group 11 | delete atts["data-schema-key"]; 12 | 13 | return atts; 14 | }, 15 | dsk() { 16 | return { 17 | "data-schema-key": this.atts["data-schema-key"] 18 | }; 19 | } 20 | }); 21 | 22 | Template.afRadioGroupInline_semanticUI.onRendered(function() { 23 | this.$(this.firstNode).find(".ui.radio.checkbox").checkbox(this.data.atts.settings); 24 | }); 25 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/select-radio/select-radio.html: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/select-radio/select-radio.js: -------------------------------------------------------------------------------- 1 | Template.afRadioGroup_semanticUI.helpers({ 2 | atts() { 3 | let atts = _.clone(this.atts); 4 | 5 | if (this.selected) { 6 | atts.checked = "checked"; 7 | } 8 | 9 | // remove data-schema-key attribute because we put it 10 | // on the entire group 11 | delete atts["data-schema-key"]; 12 | 13 | return atts; 14 | }, 15 | dsk() { 16 | return { 17 | "data-schema-key": this.atts["data-schema-key"] 18 | }; 19 | } 20 | }); 21 | 22 | Template.afRadioGroup_semanticUI.onRendered(function() { 23 | this.$(this.firstNode).find(".ui.radio.checkbox").checkbox(this.data.atts.settings); 24 | }); 25 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/select/select.html: -------------------------------------------------------------------------------- 1 | 20 | 21 | 54 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/select/select.js: -------------------------------------------------------------------------------- 1 | AutoForm.addInputType("select", { 2 | template: "afSelect", 3 | valueOut() { 4 | return this.val(); 5 | }, 6 | valueConverters: { 7 | stringArray : AutoForm.valueConverters.stringToStringArray, 8 | number : AutoForm.valueConverters.stringToNumber, 9 | numberArray : AutoForm.valueConverters.stringToNumberArray, 10 | boolean : AutoForm.valueConverters.stringToBoolean, 11 | booleanArray: AutoForm.valueConverters.stringToBooleanArray, 12 | date : AutoForm.valueConverters.stringToDate, 13 | dateArray : AutoForm.valueConverters.stringToDateArray 14 | }, 15 | contextAdjust(context) { 16 | // can fix issues with some browsers selecting the firstOption instead of the selected option 17 | context.atts.autocomplete = "off"; 18 | 19 | // delete eventual option used in other templates 20 | delete context.atts.firstOption; 21 | 22 | let itemAtts = _.omit(context.atts, "placeholder"); 23 | 24 | // build items list 25 | context.items = []; 26 | 27 | let buildItem = item => ({ 28 | name : context.name, 29 | label : item.label, 30 | icon : item.icon || false, 31 | description: item.description || false, 32 | value : item.value, 33 | htmlAtts : _.extend( 34 | { class: "item" }, 35 | _.omit(item, "label", "value", "icon", "circularLabel", "description", "itemGroup", "category", "items") 36 | ), 37 | // _id must be included because it is a special property that 38 | // #each uses to track unique list items when adding and removing them 39 | // See https://github.com/meteor/meteor/issues/2174 40 | // 41 | // The toString() is necessary because otherwise Spacebars evaluates 42 | // any string to 1 if the other values are numbers, and then considers 43 | // that a duplicate. 44 | // See https://github.com/aldeed/meteor-autoform/issues/656 45 | _id : item.value.toString(), 46 | atts : itemAtts 47 | }); 48 | 49 | // Add all defined options 50 | _.each(context.selectOptions, item => { 51 | if (item.itemGroup) { 52 | let subItems = _.map(item.items, buildItem); 53 | 54 | context.items.push({ 55 | itemGroup: item.itemGroup, 56 | items : subItems 57 | }); 58 | } else if (item.category) { 59 | let subItems = _.map(item.items, buildItem); 60 | 61 | context.items.push({ 62 | category: item.category, 63 | items : subItems 64 | }); 65 | } else { 66 | context.items.push(buildItem(item)); 67 | } 68 | }); 69 | 70 | return context; 71 | } 72 | }); 73 | 74 | Template.afSelect_semanticUI.helpers({ 75 | divAtts() { 76 | let atts = { class: "ui dropdown" }; 77 | 78 | // Add custom classes or default 79 | if (_.isString(this.atts.class)) { 80 | atts = AutoForm.Utility.addClass(atts, this.atts.class); 81 | } else { 82 | atts = AutoForm.Utility.addClass(atts, "fluid selection"); 83 | } 84 | 85 | // Add the disabled class if required 86 | if (this.atts.disabled === "") { 87 | atts = AutoForm.Utility.addClass(atts, "disabled"); 88 | } 89 | 90 | // Add search class, also add selection for proper design 91 | if (this.atts.search || this.atts.fullTextSearch) { 92 | atts = AutoForm.Utility.addClass(atts, "search selection"); 93 | } 94 | 95 | // Add multiple class 96 | if (this.atts.multiple) { 97 | atts = AutoForm.Utility.addClass(atts, "multiple"); 98 | } 99 | 100 | return atts; 101 | }, 102 | inputAtts() { 103 | return _.pick(this.atts, "name", "id", "required", "data-schema-key", "autocomplete", "value"); 104 | }, 105 | showClearButton() { 106 | return this.atts.required !== "" && ! this.atts.multiple; 107 | } 108 | }); 109 | 110 | Template.afSelect_semanticUI.events({ 111 | "click .ui.clear.button"(event, template) { 112 | template.$(".ui.dropdown").dropdown("clear").dropdown("hide"); 113 | } 114 | }); 115 | 116 | Template.afSelect_semanticUI.onRendered(function() { 117 | let node = this.$(this.firstNode); 118 | 119 | node.dropdown(_.extend({ 120 | fullTextSearch : this.data.atts.fullTextSearch || false, 121 | allowAdditions : this.data.atts.allowAdditions || false, 122 | maxSelections : this.data.atts.maxSelections || false, 123 | allowCategorySelection: this.data.atts.allowCategorySelection || false, 124 | useLabels : this.data.atts.useLabels === false ? false : true 125 | }, this.data.atts.settings)); 126 | 127 | this.autorun((c) => { 128 | let data = Template.currentData(); 129 | 130 | if (data.value) { 131 | node.dropdown("set selected", data.value); 132 | c.stop(); 133 | } 134 | }); 135 | }); 136 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/submit/submit.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/submit/submit.js: -------------------------------------------------------------------------------- 1 | Template.afInputSubmit_semanticUI.helpers({ 2 | atts() { 3 | let atts = _.clone(this.atts); 4 | 5 | // Add semantic-ui class 6 | atts = AutoForm.Utility.addClass(atts, "ui positive button"); 7 | 8 | return atts; 9 | } 10 | }); 11 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/tel/tel.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/text/text.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/textarea/textarea.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/time/time.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/url/url.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/inputTypes/week/week.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /templates/semantic-ui/semantic-ui.js: -------------------------------------------------------------------------------- 1 | /* global AutoForm */ 2 | 3 | Template.autoForm.helpers({ 4 | atts() { 5 | // After removing all of the props we know about, everything else should 6 | // become a form attribute unless it's an array or object. 7 | let val, htmlAttributes = {}, context = this; 8 | 9 | context = AutoForm.Utility.addClass(context, "ui form"); 10 | 11 | let removeProps = [ 12 | "schema", 13 | "collection", 14 | "validation", 15 | "doc", 16 | "resetOnSuccess", 17 | "type", 18 | "template", 19 | "autosave", 20 | "autosaveOnKeyup", 21 | "meteormethod", 22 | "filter", 23 | "autoConvert", 24 | "removeEmptyStrings", 25 | "trimStrings" 26 | ]; 27 | 28 | // Filter out any attributes that have a component prefix 29 | function hasComponentPrefix(prop) { 30 | return _.any( 31 | AutoForm.Utility.componentTypeList, 32 | componentType => prop.indexOf(componentType + "-") === 0 33 | ); 34 | } 35 | 36 | // Filter out arrays and objects, which are obviously not meant to be 37 | // HTML attributes. 38 | for (let prop in context) { 39 | if (context.hasOwnProperty(prop) && ! _.contains(removeProps, prop) && 40 | ! hasComponentPrefix(prop)) { 41 | val = context[prop]; 42 | 43 | if (! _.isArray(val) && ! _.isObject(val)) { 44 | htmlAttributes[prop] = val; 45 | } 46 | } 47 | } 48 | 49 | // By default, we add the `novalidate="novalidate"` attribute to our form, 50 | // unless the user passes `validation="browser"`. 51 | if (this.validation !== "browser" && ! htmlAttributes.novalidate) { 52 | htmlAttributes.novalidate = "novalidate"; 53 | } 54 | 55 | return htmlAttributes; 56 | } 57 | }); 58 | --------------------------------------------------------------------------------