├── .babelrc.js ├── .browserslistrc ├── .editorconfig ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── PULL_REQUEST_TEMPLATE.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── changelog.md ├── composer.json ├── config └── form-builder.php ├── dev-server └── index.js ├── dist ├── css │ └── main.css └── js │ ├── main.js │ └── main.legacy.js ├── docs ├── fb-auto-captcha.md ├── fb-checkbox.md ├── fb-code.md ├── fb-company-slug.md ├── fb-date-range.md ├── fb-date.md ├── fb-editor.md ├── fb-input.md ├── fb-multi-block.md ├── fb-phone.md ├── fb-radio-group.md ├── fb-select.md ├── fb-slider.md ├── fb-switcher.md ├── fb-textarea.md ├── fb-uploader.md ├── form-builder.md └── index.md ├── examples ├── ajax-options.json ├── checkbox.html ├── date.html ├── editor-field.html ├── index.html ├── manager.html ├── modal-test.html ├── range.html ├── refactoring-new.html ├── refactoring-old.html ├── reservation.html ├── select.html └── uploader-field.html ├── gulpfile.js ├── package.json ├── postcss.config.js ├── resources ├── css │ ├── fields │ │ └── date.styl │ ├── main.styl │ ├── time-range.styl │ └── ui-calendar.styl ├── js │ ├── config.js │ ├── main.js │ ├── mixins │ │ ├── fb-base.js │ │ ├── fb-checkbox-field.js │ │ ├── fb-date.js │ │ ├── fb-error.js │ │ ├── fb-field.js │ │ ├── fb-focus.js │ │ └── fb-text-field.js │ ├── modules │ │ ├── helpers.js │ │ ├── lang.js │ │ └── time.js │ ├── plugin.js │ ├── store │ │ └── forms.js │ └── utils │ │ ├── codeEditors.js │ │ └── triggerEvent.js ├── views │ └── example.blade.php └── vue │ ├── fb-auto-captcha.vue │ ├── fb-checkbox.vue │ ├── fb-code.vue │ ├── fb-company-slug.vue │ ├── fb-date-range.vue │ ├── fb-date.vue │ ├── fb-editor.vue │ ├── fb-error-wrap.vue │ ├── fb-input.vue │ ├── fb-multi-block.vue │ ├── fb-phone.vue │ ├── fb-radio-group.vue │ ├── fb-reservation-dropdown.vue │ ├── fb-reservation.vue │ ├── fb-select.vue │ ├── fb-slider.vue │ ├── fb-switcher.vue │ ├── fb-textarea.vue │ ├── fb-uploader.vue │ ├── form-builder.vue │ └── time-range.vue ├── rollup.config.js ├── src └── FormBuilderServiceProvider.php └── test └── convert-names.test.js /.babelrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | ['@babel/preset-env', { 4 | useBuiltIns: 'usage', 5 | corejs: '2', 6 | // debug: true, 7 | exclude: [ 8 | 'web.dom.iterable', 9 | 'es6.symbol', 10 | 'es7.symbol.async-iterator', 11 | 'es6.object.assign', 12 | 'es6.promise', 13 | 'es7.promise.finally', 14 | 'es6.string.iterator', 15 | 'es6.regexp.to-string', 16 | 'es6.regexp.split', 17 | 'es6.regexp.replace', 18 | 'es6.function.name' 19 | ] 20 | }] 21 | ] 22 | }; 23 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # Browsers that we support 2 | 3 | [modern] 4 | last 2 Chrome versions 5 | last 2 Firefox versions 6 | 7 | 8 | [legacy] 9 | last 1 IE version 10 | > .5% 11 | not dead 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | # Unix-style newlines with a newline ending every file 4 | [*] 5 | end_of_line = lf 6 | insert_final_newline = true 7 | 8 | # 4 space indentation 9 | indent_style = space 10 | indent_size = 4 -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | patreon: awesdotio 4 | open_collective: awesdotio -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug Report 3 | about: Tell us what happens instead of the expected behavior 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | Your issue may already be reported! 11 | Please search on the [issue tracker](../) before creating one. 12 | 13 | ## Expected Behavior 14 | 15 | 16 | 17 | ## Current Behavior 18 | 19 | 20 | 21 | ## Possible Solution 22 | 23 | 24 | 25 | ## Steps to Reproduce (for bugs) 26 | 27 | 28 | 1. 29 | 2. 30 | 3. 31 | 4. 32 | 33 | ## Context 34 | 35 | 36 | 37 | ## Your Environment 38 | 39 | * Version used: 40 | * Browser Name and version: 41 | * Operating System and version (desktop or mobile): 42 | * Link to your project: 43 | 44 | ## System GA 45 | [![Analytics](https://ga-beacon.appspot.com/UA-134431636-1/awes-io/issues)](https://github.com/awes-io/issues) 46 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | Your issue may already be reported! 11 | Please search on the [issue tracker](../) before creating one. 12 | 13 | ## Expected Behavior 14 | 15 | 16 | 17 | ## Current Behavior 18 | 19 | 20 | 21 | ## Possible Solution 22 | 23 | 24 | 25 | 26 | ## System GA 27 | [![Analytics](https://ga-beacon.appspot.com/UA-134431636-1/awes-io/issues)](https://github.com/awes-io/issues) 28 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | A similar PR may already be submitted! 2 | Please search among the [Pull request](../) before creating one. 3 | 4 | Thanks for submitting a pull request! Please provide enough information so that others can review your pull request: 5 | 6 | 7 | ## Summary 8 | 9 | 10 | 11 | This PR fixes/implements the following **bugs/features** 12 | 13 | * [ ] Bug 1 14 | * [ ] Bug 2 15 | * [ ] Feature 1 16 | * [ ] Feature 2 17 | * [ ] Breaking changes 18 | 19 | 20 | 21 | Explain the **motivation** for making this change. What existing problem does the pull request solve? 22 | 23 | 24 | 25 | ## Test plan (required) 26 | 27 | Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI. 28 | 29 | 30 | 31 | ## Code formatting 32 | 33 | 34 | 35 | ## Closing issues 36 | 37 | 38 | Fixes # 39 | 40 | ## System GA 41 | [![Analytics](https://ga-beacon.appspot.com/UA-134431636-1/awes-io/awes-io)](https://github.com/awes-io/issues) 42 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at contact@awes.io. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Awes.io 2 | 3 | Want to contribute to Awes.io? We provide a Contribution Guide to help you get started. 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017-present, Awescode GmbH (www.awescode.de) 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 13 | all 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 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Awes.io logo 4 | 5 |

6 | 7 |

From Builder

8 | 9 |

A component that allows creating forms with two-way binding from data object with default HTML fields and custom, like multi-block or AJAX-select.

10 | 11 | 12 |

13 | 14 | Last version 15 | 16 | 17 | Downloads 18 | 19 | 20 | License 21 | 22 | 23 | CDN Ready 24 | 25 | 26 | vue 27 | 28 | 29 | Last commit 30 | 31 | 32 | Analytics 33 | 34 | 35 | Hosted by Package Kit 36 | 37 | 38 | Patreon 39 | 40 |

41 | 42 | ## 43 |

44 | form builder 45 |

46 | 47 | ## Demo 48 | You can check it online: [Online Demo](https://demo.awes.io/?utm_source=github&utm_medium=form-builder) 49 | 50 | ## Documentation 51 | 52 | [Documentation](https://www.awes.io/documentation/components/form-builder/) 53 | 54 | ## NPM scripts 55 | 56 | Development mode `npm run watch` or simply `npm start` 57 | Development mode for IE `npm run watch:legacy` 58 | Production build `npm run build` 59 | 60 | ## Installation 61 | 62 | Via Composer 63 | 64 | ``` bash 65 | $ composer require awes-io/form-builder 66 | ``` 67 | 68 | The package will automatically register itself. 69 | 70 | You can publish the config file with: 71 | 72 | ```bash 73 | php artisan vendor:publish --provider="AwesIO\FormBuilder\Providers\FormBuilderServiceProvider" --tag="config" 74 | ``` 75 | 76 | ## Support Us 77 | 78 |

79 | 80 | Become a Patreon 81 | 82 |

83 | 84 | ## License 85 | 86 | [MIT](http://opensource.org/licenses/MIT) 87 | -------------------------------------------------------------------------------- /changelog.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to `Form-bulder` will be documented in this file. 4 | 5 | ## Version 1.0 6 | 7 | ### Added 8 | - Everything 9 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "awes-io/form-builder", 3 | "description": "A component that allows creating forms with two-way binding from data object with default HTML fields and custom, like multi-block or AJAX-select.", 4 | "type": "library", 5 | "license": "MIT", 6 | "authors": [ 7 | { 8 | "name": "Awescode GmbH", 9 | "email": "info@awescode.de", 10 | "homepage": "https://www.awescode.de", 11 | "role": "Owner" 12 | }, 13 | { 14 | "name": "theAlex", 15 | "email": "info@thealex.ru", 16 | "homepage": "https://thealex.ru" 17 | } 18 | ], 19 | "support": { 20 | "email": "contact@awes.io" 21 | }, 22 | "homepage": "https://github.com/awes-io/form-builder", 23 | "keywords": ["Laravel", "Form Builder", "ui forms", "Awes.io"], 24 | "require": { 25 | "illuminate/support": "~5" 26 | }, 27 | "require-dev": { 28 | "phpunit/phpunit": "~7.0", 29 | "mockery/mockery": "^1.1", 30 | "orchestra/testbench": "~3.0", 31 | "sempro/phpunit-pretty-print": "^1.0" 32 | }, 33 | "autoload": { 34 | "psr-4": { 35 | "AwesIO\\FormBuilder\\": "src/" 36 | } 37 | }, 38 | "autoload-dev": { 39 | "psr-4": { 40 | "AwesIO\\FormBuilder\\Tests\\": "tests/" 41 | } 42 | }, 43 | "scripts": { 44 | "test": "vendor/bin/phpunit --colors=always" 45 | }, 46 | "extra": { 47 | "laravel": { 48 | "providers": [ 49 | "AwesIO\\FormBuilder\\FormBuilderServiceProvider" 50 | ] 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /config/form-builder.php: -------------------------------------------------------------------------------- 1 | [ 6 | 'script' => 'awes-io/form-builder/v1.x.x/js/main.js', 7 | 'script_legacy' => 'awes-io/form-builder/v1.x.x/js/main.legacy.js', 8 | 'style' => 'awes-io/form-builder/v1.x.x/css/main.css' 9 | ], 10 | 11 | 'local' => [ 12 | 'script' => '/static/form-builder/js/main.js', 13 | 'script_legacy' => '/static/form-builder/js/main.legacy.js', 14 | 'style' => '/static/form-builder/css/main.css' 15 | ] 16 | 17 | ]; 18 | -------------------------------------------------------------------------------- /dev-server/index.js: -------------------------------------------------------------------------------- 1 | 2 | const express = require('express') 3 | const _ = require('lodash') 4 | 5 | const app = express() 6 | app.use(express.json()) 7 | 8 | /** 9 | * Testing manager form data 10 | */ 11 | 12 | const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ 13 | const nameField = 'profile_manager.first_name' 14 | const surnameField = 'profile_manager.last_name' 15 | const fullnameField = 'profile_manager.full_name' 16 | const emailField = 'email' 17 | const phonesField = 'profile_manager.phones' 18 | const smtpField = 'profile_manager.smtp' 19 | const smtpHostField = 'profile_manager.smtp_host' 20 | const statusField = 'status' 21 | 22 | app.post('/manager', function (req, res) { 23 | let data = req.body 24 | let errors = {} 25 | 26 | 27 | // check name ( TEST SIMPLE ERROR ) 28 | if ( ! _.get(data, nameField) ) { 29 | errors[nameField] = ['The name is required'] 30 | } 31 | 32 | 33 | // check email ( TEST SIMPLE ERROR WITH NON NORMALIZED PATH ) 34 | if ( ! emailRegExp.test( _.get(data, emailField) ) ) { 35 | errors[ '\[' + emailField + '\]' ] = ['It doesn`t look like email'] 36 | } 37 | 38 | 39 | // check phones ( TEST MULTIBLOCK ERRORS AND PHONE FIELD ERRORS ) 40 | _.get(data, phonesField, []).forEach( (phone, i) => { 41 | if ( ! phone.phone ) return 42 | if ( /\D/g.test(phone.phone) ) { 43 | errors[phonesField + '[' + i + ']phone' ] = 'Number must contain digits only' 44 | } 45 | }) 46 | 47 | 48 | // check smtp ( TEST MULTISELECT ERRORS ) 49 | if ( _.get(data, smtpField) && ( data[statusField] !== 'Manager') ) { 50 | errors[smtpHostField] = ['Only manager can use email'] 51 | } 52 | 53 | 54 | if ( _.isEmpty(errors) ) { 55 | 56 | // format data ( TEST DATA REPLACEMENT FROM RESPONSE ) 57 | _.set( data, fullnameField, _.get(data, nameField) + ' ' + _.get(data, surnameField) ) 58 | let phones = [] 59 | _.get( data, phonesField, []).forEach( phone => { 60 | if ( phone.phone ) { 61 | phones.push({ 62 | phone: phone.phone, 63 | validated: '+380' + phone.phone 64 | }) 65 | } 66 | }) 67 | _.set( data, phonesField, phones ) 68 | 69 | res.json({ 70 | message: 'The manager was successfully updated', 71 | success: true, 72 | data: data 73 | }); 74 | 75 | } else { 76 | 77 | // send error response ( TEST APPLYING ERRORS ) 78 | res.status(422) 79 | .json({ 80 | message: 'The given data was invalid.', 81 | errors: errors 82 | }) 83 | } 84 | 85 | }); 86 | 87 | app.post('/returner', express.json(), function(req, res){ 88 | 89 | setTimeout(function(){ 90 | res.json({ 91 | message: 'The data was successfully updated', 92 | success: true, 93 | data: req.body 94 | }); 95 | }, 1200) 96 | }) 97 | 98 | const SELECT_OPTIONS = [ 99 | { foo:'one', bar: 1 }, 100 | { foo:'two', bar: 2 }, 101 | { foo:'three', bar: 3 }, 102 | { foo:'four', bar: 4 }, 103 | { foo:'five', bar: 5 }, 104 | { foo:'six', bar: 6 }, 105 | { foo:'seven', bar: 7 }, 106 | { foo:'eight', bar: 8 }, 107 | { foo:'nine', bar: 9 }, 108 | { foo:'ten', bar: 10 } 109 | ] 110 | 111 | app.get('/select', function(req, res){ 112 | 113 | let searchBy = req.query.s 114 | let found = searchBy && SELECT_OPTIONS.filter( option => { 115 | return option.foo.includes(searchBy) 116 | }) 117 | 118 | res.json({ 119 | data: searchBy ? found : SELECT_OPTIONS, 120 | meta: {}, 121 | links: [] 122 | }) 123 | }) 124 | 125 | app.listen(3030) 126 | console.log('Dev server running on port 3030') -------------------------------------------------------------------------------- /dist/css/main.css: -------------------------------------------------------------------------------- 1 | .fb-date{position:relative}@media (min-width:617px) and (min-height:481px){.fb-date.is-range{display:flex}}.fb-date__picker{display:flex;margin-top:5px;position:absolute;top:100%;left:0;z-index:1;opacity:0;width:300px;visibility:hidden;transition:opacity .2s,visibility 0ms .2s}.fb-date__picker.is-opened{visibility:visible;opacity:1;transition:opacity .2s,visibility 0ms}@media (min-width:617px) and (min-height:481px){.fb-date.is-range .fb-date__picker{width:600px}}.fb-date__fb-input{display:block}.fb-date.is-range .fb-date__fb-input{flex-basis:50%}@media (max-height:480px),(max-width:616px){.fb-date.is-range .fb-date__fb-input+.fb-date__fb-input{margin-top:10px}}@media (min-width:617px) and (min-height:481px){.fb-date.is-range .fb-date__fb-input+.fb-date__fb-input{margin-left:10px}}.fb-date__time-range{position:absolute;right:0;top:0;bottom:0}.fb-date__time-range .time-range__intervals{max-height:325px;overflow:auto;display:flex;flex-direction:column;height:100%}.fb-date__time-range .time-range__interval{flex-grow:1}.fb-date__time-range .time-range__button{min-height:32.5px;height:100%}.ui-calendar{width:300px;max-width:100%;background-color:var(--tc_ui_bg)}.ui-calendar.has-time{position:relative;padding-right:75px;width:375px}.ui-calendar__days,.ui-calendar__weekdays{display:flex;flex-wrap:wrap;padding:5px}.ui-calendar__weekdays{min-height:35px;align-items:center}.ui-calendar__day,.ui-calendar__weekday{text-align:center;width:14.285510206997044%}.ui-calendar__button,.ui-calendar__day{height:35px;transition:background .2s,color .2s}.ui-calendar__button:hover,.ui-calendar__day:hover{background-color:var(--tc_ui_bg_darken)}.ui-calendar__button.is-edge,.ui-calendar__day.is-edge{visibility:hidden;pointer-events:none}.ui-calendar__button.is-today,.ui-calendar__day.is-today{position:relative}.ui-calendar__button.is-today:after,.ui-calendar__day.is-today:after{content:"";display:block;width:4px;height:4px;border-radius:50%;margin-left:-2px;background-color:var(--tc_btn_bg_active);position:absolute;left:50%;bottom:3px}.ui-calendar__button.is-selected,.ui-calendar__day.is-selected{color:var(--tc_btn_text);background-color:var(--tc_btn_bg_active)}.ui-calendar__button.is-selected.is-today:after,.ui-calendar__day.is-selected.is-today:after{background-color:var(--tc_btn_text)}.ui-calendar__button.is-disabled,.ui-calendar__button[disabled],.ui-calendar__day.is-disabled,.ui-calendar__day[disabled]{cursor:default;color:var(--tc_text_caption);background-color:initial;pointer-events:none}.ui-calendar__button.in-range,.ui-calendar__day.in-range{background-color:var(--tc_btn_bg);color:var(--tc_btn_text)}.ui-calendar__button.in-range.is-today:after,.ui-calendar__day.in-range.is-today:after{background-color:var(--tc_btn_text)}.ui-calendar__weekday{color:var(--tc_text_caption);font-size:.67rem;padding:5px}.ui-calendar__footer,.ui-calendar__header{display:flex;align-items:center;font-size:.8rem;padding:5px}.ui-calendar__header{min-height:45px}.ui-calendar__footer{min-height:35px}.ui-calendar__caption{flex-grow:1;padding:4px}.ui-calendar__month,.ui-calendar__year{margin-left:7px}.ui-calendar__button.is-next,.ui-calendar__button.is-prev{font-size:0;width:35px}.ui-calendar__button.is-next:before,.ui-calendar__button.is-prev:before{vertical-align:middle;font-size:.8rem}.ui-calendar__button.is-next:before{transform:rotate(180deg) translateY(-1px)}.ui-calendar__time-range{padding:5px}.ui-calendar__time-range ul{height:245px;list-style:none!important;margin:0!important;overflow-y:auto}.ui-calendar__time-range.has-footer ul{height:210px}.ui-calendar__time-range li{margin:0!important}.ui-calendar__time-range .ui-calendar__button{width:100%}.time-range__intervals{list-style:none;padding-left:0;margin:0;width:75px}.time-range__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;margin:0;border:0;outline:0;display:flex;justify-content:center;align-items:center;width:100%}.time-range__button.is-current{background-color:green;color:#fff}.tooltip.vue-tooltip-theme{border-radius:2px}.tooltip.vue-tooltip-theme:before{order-top-color:var(--tc_btn_bg,green)}.tooltip.vue-tooltip-theme .tooltip-inner{background:var(--tc_btn_bg,green);color:var(--tc_btn_text,#fff);padding:8px 15px;border-radius:2px}.tooltip.vue-tooltip-theme.is-info:before{border-top-color:var(--tc_link_dark,#00f)}.tooltip.vue-tooltip-theme.is-info .tooltip-inner{background:var(--tc_link_dark,#00f)}.fb-keycode__wrap{display:flex;margin-left:-5px;margin-right:-5px}.fb-keycode__field-wrap{padding-left:5px;padding-right:5px}.fb-keycode__field{width:100%}.fb-input__label,.fb-textarea__label{display:block}.fb-input__field,.fb-input__textarea,.fb-textarea__field,.fb-textarea__textarea{border:1px solid;width:100%}.fb-multiblock{margin-bottom:1em;padding:.5em;border:1px solid}.fb-multiblock>.grid__wrap:not(:last-child){margin-bottom:.5em;border-bottom:1px solid}.fb-multiblock_has-close{max-width:calc(100% - 40px);width:100%;position:relative}.fb-multiblock__clear{position:absolute;right:-40px;top:19px;display:block;width:34px;padding:0;border:1px solid;min-height:20px}.fb-switcher__field-wrap{width:3em;float:left;margin-right:1em}.fb-switcher__field-wrap input{max-width:100%} -------------------------------------------------------------------------------- /docs/fb-auto-captcha.md: -------------------------------------------------------------------------------- 1 | # The <fb-auto-captcha> Component 2 | 3 | The Recaptcha component. It can be located only within the <form-builder> component with non-editable name of `g-recaptcha-response` and uses the [vue-recaptcha](https://github.com/DanSnow/vue-recaptcha) component. 4 | 5 | By default, the field is hidden if the `show`property is not passed. If the server response contains an error for the field with component identifier, the field will be displayed (that is, the recaptcha will appear). In the visual presentation below, you can watch this component in action. 6 | 7 | ![fb-auto-captcha](https://static.awes.io/docs/fb-auto-captcha.gif) 8 | 9 | ## Components 10 | * [Form Builder](./form-builder.md) 11 | * **Auto Captcha** 12 | * [Checkbox](./fb-checkbox.md) 13 | * [Code](./fb-code.md) 14 | * [Company Slug](./fb-company-slug.md) 15 | * [Date](./fb-date.md) 16 | * [Date range](./fb-date-range.md) 17 | * [Editor](./fb-editor.md) 18 | * [Input](./fb-input.md) 19 | * [Multi block](./fb-multi-block.md) 20 | * [Phone](./fb-phone.md) 21 | * [Radio Group](./fb-radio-group.md) 22 | * [Select](./fb-select.md) 23 | * [Slider](./fb-slider.md) 24 | * [Switcher](./fb-switcher.md) 25 | * [Textarea](./fb-textarea.md) 26 | * [Uploader](./fb-uploader.md) 27 | 28 | ## Example 29 | 30 | ```html 31 | 32 | 33 | 34 | ``` 35 | 36 | 37 | 38 | 39 | 40 | 41 | ## Component properties 42 | 43 | | Name | Type | Default | Description | 44 | |---------------------|:------------------:|:-------------------:|---------------------------------------------------| 45 | | **id** | `Number` | `undefined` | Sequence number within the <fb-multi-block> component | 46 | | **show** | `Boolean` | `false` | Show recaptcha | 47 | -------------------------------------------------------------------------------- /docs/fb-checkbox.md: -------------------------------------------------------------------------------- 1 | # The <fb-checkbox> Component 2 | 3 | It can be located within the <form-builder> component, then it looks for the value, by the path given in the `name` property, or sets one if nothing found with a value of `value` property. Outside form component it can be used with a `v-model` directive 4 | 5 | ![fb-checkbox](https://static.awes.io/docs/fb-checkbox.png) 6 | 7 | ## Components 8 | * [Form Builder](./form-builder.md) 9 | * [Auto Captcha](./fb-auto-captcha.md) 10 | * **Checkbox** 11 | * [Code](./fb-code.md) 12 | * [Company Slug](./fb-company-slug.md) 13 | * [Date](./fb-date.md) 14 | * [Date range](./fb-date-range.md) 15 | * [Editor](./fb-editor.md) 16 | * [Input](./fb-input.md) 17 | * [Multi block](./fb-multi-block.md) 18 | * [Phone](./fb-phone.md) 19 | * [Radio Group](./fb-radio-group.md) 20 | * [Select](./fb-select.md) 21 | * [Slider](./fb-slider.md) 22 | * [Switcher](./fb-switcher.md) 23 | * [Textarea](./fb-textarea.md) 24 | * [Uploader](./fb-uploader.md) 25 | 26 | ## Example 27 | 28 | ```html 29 | 30 | 31 | 32 | ``` 33 |
34 | 35 | 36 | 37 |
38 | 39 | 40 | ## Component properties 41 | 42 | | Name | Type | Default | Description | 43 | |---------------------|:------------------:|:-------------------:|---------------------------------------------------| 44 | | **name** | `String` | `undefined` | Field identifier in the data object | 45 | | **value** | `Boolean, Number, Array` | `0` | Used internally for Vue `v-model` directive | 46 | | **default-value** | `String` | value of label prop | An HTML `value` attribute of checkbox (for multiple chechboxes, used in `v-model`) | 47 | | **id** | `Number` | `undefined` | Sequence number within the <fb-multi-block> component | 48 | | **label** | `String` | `''` | Text in the <label> element | 49 | | **enter-skip** | `Boolean` | `false` | Skip field when switching by the enter button | 50 | | **focus** | `Boolean` | `false` | Set focus on this field when loading a page | 51 | 52 | 53 | ## Multiple checkboxes with single name 54 | 55 | To create a multiple checkbox, provide a single `name` prop and different `default-value` props on **every** `fb-checkbox` component. If you wish to pre-select some of checkboxes, set a `default` prop of `form-builder` with an array of default values 56 | 57 | ```html 58 |
59 | 60 | 61 | 62 | 63 | 64 |
65 | ``` 66 | 67 |
68 | 69 | 70 | 71 | 72 | 73 |
-------------------------------------------------------------------------------- /docs/fb-code.md: -------------------------------------------------------------------------------- 1 | # The <fb-code> Component 2 | 3 | It is a component of the field for entering code. It can be located only within the <form-builder> component. 4 | 5 | > Note! **auto-submit** property is removed use the same property on the <form-builder> itself 6 | 7 | Here is a visual presentation of this component. 8 | 9 | ![fb-code](https://storage.googleapis.com/static.awes.io/docs/fb-code.gif) 10 | 11 | ## Components 12 | * [Form Builder](./form-builder.md) 13 | * [Auto Captcha](./fb-auto-captcha.md) 14 | * [Checkbox](./fb-checkbox.md) 15 | * **Code** 16 | * [Company Slug](./fb-company-slug.md) 17 | * [Date](./fb-date.md) 18 | * [Date range](./fb-date-range.md) 19 | * [Editor](./fb-editor.md) 20 | * [Input](./fb-input.md) 21 | * [Multi block](./fb-multi-block.md) 22 | * [Phone](./fb-phone.md) 23 | * [Radio Group](./fb-radio-group.md) 24 | * [Select](./fb-select.md) 25 | * [Slider](./fb-slider.md) 26 | * [Switcher](./fb-switcher.md) 27 | * [Textarea](./fb-textarea.md) 28 | * [Uploader](./fb-uploader.md) 29 | 30 | ## Example 31 | 32 | ```html 33 | 34 | 35 | 36 | ``` 37 | 38 | @vue 39 | 40 | 41 | 42 | @endvue 43 | 44 | 45 | ## Component properties 46 | 47 | | Name | Type | Default | Description | 48 | |---------------------|:------------------:|:-------------------:|---------------------------------------------------| 49 | | **name(*)** | `String` | `undefined` | Field identifier in the data object | 50 | | **id** | `Number` | `undefined` | Sequence number within the <fb-multi-block> component | 51 | | **length** | `Number` | `6` | Number of digits in the code | 52 | | **enter-skip** | `Boolean` | `false` | Skip field when switching by the enter button | 53 | | **focus** | `Boolean` | `false` | Set focus on this field when loading a page | 54 | -------------------------------------------------------------------------------- /docs/fb-company-slug.md: -------------------------------------------------------------------------------- 1 | # The <fb-company-slug> Component 2 | 3 | It is a component for converting text into URL (It uses the [urlify](https://github.com/Gottox/node-urlify) library). 4 | 5 | It can be located within the <form-builder> component, or can be used with `v-model` directive. You may provide a string from other form-builder text field to transform to subdomain with an `input` property 6 | 7 | 8 | This component visually looks like: 9 | 10 | ![fb-company-slug](https://static.awes.io/docs/fb-company-slug.gif) 11 | 12 | ## Components 13 | * [Form Builder](./form-builder.md) 14 | * [Auto Captcha](./fb-auto-captcha.md) 15 | * [Checkbox](./fb-checkbox.md) 16 | * [Code](./fb-code.md) 17 | * **Company Slug** 18 | * [Date](./fb-date.md) 19 | * [Date range](./fb-date-range.md) 20 | * [Editor](./fb-editor.md) 21 | * [Input](./fb-input.md) 22 | * [Multi block](./fb-multi-block.md) 23 | * [Phone](./fb-phone.md) 24 | * [Radio Group](./fb-radio-group.md) 25 | * [Select](./fb-select.md) 26 | * [Slider](./fb-slider.md) 27 | * [Switcher](./fb-switcher.md) 28 | * [Textarea](./fb-textarea.md) 29 | * [Uploader](./fb-uploader.md) 30 | 31 | ## Example of using the component 32 | 33 | ```html 34 | 35 | 39 | 40 | ``` 41 | @vue 42 | 43 | 47 | 48 | @endvue 49 | 50 | 51 | ## Component properties 52 | 53 | | Name | Type | Default | Description | 54 | |---------------------|:------------------:|:-------------------:|---------------------------------------------------| 55 | | **name** | `String` | `undefined` | Field identifier in the data object | 56 | | **id** | `Number` | `undefined` | Sequence number within the <fb-multi-block> component | 57 | | **label** | `String` | `''` | Text in the <label> element | 58 | | **domain** | `String` | `'awescrm.de'` | Main domain | 59 | | **input** | `String` | `undefined` | String to transform into subdomain | 60 | | **maxlength** | `Number` | `32` | Maximum length of the subdomain | 61 | | **enter-skip** | `Boolean` | `false` | Skip field when switching by the enter button | 62 | | **focus** | `Boolean` | `false` | Set focus on this field when loading a page | 63 | 64 | ## Component features 65 | 66 | ### Component configuration 67 | 68 | To override the default settings, please override them in `AWES_CONFIG`. 69 | 70 | ```javascript 71 | // Here are the default settings 72 | const AWES_CONFIG = { 73 | companySlug: { 74 | domain: 'awescrm.de', 75 | length: 32, 76 | // Settings of the urlify library, read more here https://github.com/Gottox/node-urlify#browser-1 77 | ulrifyOptions: { 78 | spaces: '-', 79 | toLower: true, 80 | trim: true, 81 | addEToUmlauts: true, 82 | nonPrintable: '', 83 | failureOutput: '' 84 | } 85 | } 86 | } 87 | ``` 88 | -------------------------------------------------------------------------------- /docs/fb-date-range.md: -------------------------------------------------------------------------------- 1 | # The <fb-date-range> Component 2 | 3 | A component for selecting a period of time by choosing start and end date (time is not included). For selecting a specific date and time, please use the [Date component](./fb-date.md) It can be located within the <form-builder> component or used with `v-model` directive and can be visualized as follows: 4 | 5 | ![fb-date-range](https://storage.googleapis.com/static.awes.io/docs/fb-date-range.gif) 6 | 7 | The component uses [Tiny Date Range Picker](https://github.com/chrisdavies/tiny-date-picker) internally to render calendars 8 | 9 | ## Components 10 | * [Form Builder](./form-builder.md) 11 | * [Auto Captcha](./fb-auto-captcha.md) 12 | * [Checkbox](./fb-checkbox.md) 13 | * [Code](./fb-code.md) 14 | * [Company Slug](./fb-company-slug.md) 15 | * [Date](./fb-date.md) 16 | * **Date range** 17 | * [Editor](./fb-editor.md) 18 | * [Input](./fb-input.md) 19 | * [Multi block](./fb-multi-block.md) 20 | * [Phone](./fb-phone.md) 21 | * [Radio Group](./fb-radio-group.md) 22 | * [Select](./fb-select.md) 23 | * [Slider](./fb-slider.md) 24 | * [Switcher](./fb-switcher.md) 25 | * [Textarea](./fb-textarea.md) 26 | * [Uploader](./fb-uploader.md) 27 | 28 | ## Example 29 | 30 | ```html 31 | 32 | 33 | 34 | ``` 35 |
36 | 37 | 38 | 39 |
40 | 41 | 42 | ## Component properties 43 | 44 | | Name | Type | Default | Description | 45 | |---------------------|:------------------:|:-------------------:|---------------------------------------------------| 46 | | **name** | `String` | `undefined` | Field identifier in the data object | 47 | | **id** | `Number` | `undefined` | Sequence number within the <fb-multi-block> component | 48 | | **label-start** | `String` | `'Start date'` | Text in the <label> element for 1st field | 49 | | **label-end** | `String` | `'End date'` | Text in the <label> element for 2nd field | 50 | | **min** | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Minimal selectable date | 51 | | **max** | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Maximal selectable date | 52 | | **year-range** | `Number` | `4` | Max year offset back and forth from current day, if **min** or **max** is not provided | 53 | | **day-offset** | `Number` | `1` | Set this to 0 for Sunday. 1 is for Monday | 54 | | **value-start** | `String` | `undefined` | Selected start date | 55 | | **value-end** | `String` | `undefined` | Selected end date | 56 | | **format** | `String` | 'DD/MM/YYYY' | Date format for input fields | 57 | | **disabled** | `Boolean` | `false` | Are the inputs disabled | 58 | | **lang** | `Object` | see [lang object](#date-lang-object) | Language strings for current instance. Will be merged with defaults | 59 | 60 | The **min** and **max** props could be an ISO date string, timestamp, or Date object - everything that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) method accepts. 61 | 62 | The **value** property could only be a date in ISO String format 63 | 64 | 65 | ## Usage examples 66 | 67 | ```html 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | ``` 78 |
79 | 80 | 81 | 82 | 83 |
84 | 85 | 86 |

Lang object

87 | 88 | ```javascript 89 | AWES_CONFIG = { 90 | lang: { 91 | FORMS_DATEPICKER: { 92 | // here are the default values 93 | days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 94 | months: [ 95 | 'January', 96 | 'February', 97 | 'March', 98 | 'April', 99 | 'May', 100 | 'June', 101 | 'July', 102 | 'August', 103 | 'September', 104 | 'October', 105 | 'November', 106 | 'December', 107 | ], 108 | today: 'Today', 109 | close: 'Close' 110 | } 111 | } 112 | } 113 | ``` -------------------------------------------------------------------------------- /docs/fb-date.md: -------------------------------------------------------------------------------- 1 | # The <fb-date> Component 2 | 3 | It is a date and time field component. For selecting a period, please use the [Date range component](./fb-date-range.md) It can be located within the <form-builder> component or used with `v-model` directive and can be visualized as follows: 4 | 5 | ![fb-date](https://storage.googleapis.com/static.awes.io/docs/fb-date.gif) 6 | 7 | The component uses [Tiny Date Picker](https://github.com/chrisdavies/tiny-date-picker) internally to render calendar 8 | 9 | ## Components 10 | * [Form Builder](./form-builder.md) 11 | * [Auto Captcha](./fb-auto-captcha.md) 12 | * [Checkbox](./fb-checkbox.md) 13 | * [Code](./fb-code.md) 14 | * [Company Slug](./fb-company-slug.md) 15 | * **Date** 16 | * [Date range](./fb-date-range.md) 17 | * [Editor](./fb-editor.md) 18 | * [Input](./fb-input.md) 19 | * [Multi block](./fb-multi-block.md) 20 | * [Phone](./fb-phone.md) 21 | * [Radio Group](./fb-radio-group.md) 22 | * [Select](./fb-select.md) 23 | * [Slider](./fb-slider.md) 24 | * [Switcher](./fb-switcher.md) 25 | * [Textarea](./fb-textarea.md) 26 | * [Uploader](./fb-uploader.md) 27 | 28 | ## Example 29 | 30 | ```html 31 | 32 | 33 | 34 | ``` 35 |
36 | 37 | 38 | 39 |
40 | 41 | 42 | ## Component properties 43 | 44 | | Name | Type | Default | Description | 45 | |---------------------|:------------------:|:-------------------:|---------------------------------------------------| 46 | | **name** | `String` | `undefined` | Field identifier in the data object | 47 | | **id** | `Number` | `undefined` | Sequence number within the <fb-multi-block> component | 48 | | **label** | `String` | `''` | Text in the <label> element | 49 | | **min** | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Minimal selectable date | 50 | | **max** | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Maximal selectable date | 51 | | **year-range** | `Number` | `4` | Max year offset back and forth from current day, if **min** or **max** is not provided | 52 | | **day-offset** | `Number` | `1` | Set this to 0 for Sunday. 1 is for Monday | 53 | | **value** | `String` | `undefined` | Selected date (only stringified Date object) | 54 | | **time-range** | `Boolean`, `Object`| `true` | See [time range](#time-range-props) props | 55 | | **format** | `String` | 'DD/MM/YYYY' or 'DD/MM/YYYY HH:mm' with time range | Date format for input field | 56 | | **disabled** | `Boolean`, `Array` | `false` | `Boolean` to disable whole field and `Array` of dates to disable specific date | 57 | | **lang** | `Object` | see [lang object](#date-lang-object) | Language strings for current instance. Will be merged with defaults | 58 | 59 | Every date property, i. e. **min**, **max**, and items in **disabled** array could be an ISO date string, timestamp or Date object - everything that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) method accepts. 60 | 61 | The **value** property could only be a date in ISO String format 62 | 63 |

Time range propertires

64 | 65 | | Name | Type | Default | Description | 66 | |--------------|:------------------:|:-----------:|-------------------------------------------------------------------| 67 | | **min** | `String` | '00:00' | Minimal time to start the range from, 24 format only | 68 | | **max** | `String` | `undefined` | Max value in 24h format, including itself, not more than '23:59' | 69 | | **step** | `String`, `Number` | 30 | Range step in minutes | 70 | | **disabled** | `Boolean`, `Array` | false | `true` to not render time range, or `Array` of specific intervals | 71 | 72 | Every time value is a 24-hour formatted `String`. 73 | 74 | > Don't forget leading zeros, `'5:00'` is incorrect. Correct one is `'05:00'` 75 | 76 | To set time, it should be passed to the **value** prop of `fb-date` 77 | 78 | 79 | ## Usage examples 80 | 81 | Picking specific interval 82 | 83 | ```html 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | ``` 94 |
95 | 96 | 97 | 98 | 99 |
100 | 101 | Configuring time range 102 | 103 | ```html 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | ``` 120 | 121 |
122 | 123 | 124 | 125 | 126 | 127 | 128 |
129 | 130 |

Lang object

131 | 132 | ```javascript 133 | AWES_CONFIG = { 134 | lang: { 135 | FORMS_DATEPICKER: { 136 | // here are the default values 137 | days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 138 | months: [ 139 | 'January', 140 | 'February', 141 | 'March', 142 | 'April', 143 | 'May', 144 | 'June', 145 | 'July', 146 | 'August', 147 | 'September', 148 | 'October', 149 | 'November', 150 | 'December', 151 | ], 152 | today: 'Today', 153 | close: 'Close', 154 | prevMonth: 'Previous month', 155 | nextMonth: 'Next month' 156 | } 157 | } 158 | } 159 | ``` -------------------------------------------------------------------------------- /docs/fb-editor.md: -------------------------------------------------------------------------------- 1 | # The <fb-editor> Component 2 | 3 | It is a component for writing and changing code. You paste your code in the window and can see the result and other changes in real time, as in the screenshot below. 4 | 5 | ![fb-editor](https://static.awes.io/docs/fb-editor.png) 6 | 7 | ## Components 8 | * [Form Builder](./form-builder.md) 9 | * [Auto Captcha](./fb-auto-captcha.md) 10 | * [Checkbox](./fb-checkbox.md) 11 | * [Code](./fb-code.md) 12 | * [Company Slug](./fb-company-slug.md) 13 | * [Date](./fb-date.md) 14 | * [Date range](./fb-date-range.md) 15 | * **Editor** 16 | * [Input](./fb-input.md) 17 | * [Multi block](./fb-multi-block.md) 18 | * [Phone](./fb-phone.md) 19 | * [Radio Group](./fb-radio-group.md) 20 | * [Select](./fb-select.md) 21 | * [Slider](./fb-slider.md) 22 | * [Switcher](./fb-switcher.md) 23 | * [Textarea](./fb-textarea.md) 24 | * [Uploader](./fb-uploader.md) 25 | 26 | ## Default configuration 27 | 28 | You can globally add options for the text editor in the `AWES_CONFIG.formBuilder.fbEditor` field. 29 | 30 | [Option list](https://www.tiny.cloud/docs/configure/) 31 | 32 | ### Example: 33 | 34 | ```javascript 35 | const AWES_CONFIG = { 36 | formBuilder: { 37 | fbEditor: { 38 | content_css: ['/path-to.css'] // adds in the editor’s iframe 39 | } 40 | } 41 | } 42 | ``` 43 | -------------------------------------------------------------------------------- /docs/fb-input.md: -------------------------------------------------------------------------------- 1 | # The <fb-input> Component 2 | 3 | It is a text field component. It can be located within the <form-builder> component or used with `v-model` directive and can be visualized as follows: 4 | 5 | ![fb-input](https://static.awes.io/docs/fb-input.png) 6 | 7 | ## Components 8 | * [Form Builder](./form-builder.md) 9 | * [Auto Captcha](./fb-auto-captcha.md) 10 | * [Checkbox](./fb-checkbox.md) 11 | * [Code](./fb-code.md) 12 | * [Company Slug](./fb-company-slug.md) 13 | * [Date](./fb-date.md) 14 | * [Date range](./fb-date-range.md) 15 | * [Editor](./fb-editor.md) 16 | * **Input** 17 | * [Multi block](./fb-multi-block.md) 18 | * [Phone](./fb-phone.md) 19 | * [Radio Group](./fb-radio-group.md) 20 | * [Select](./fb-select.md) 21 | * [Slider](./fb-slider.md) 22 | * [Switcher](./fb-switcher.md) 23 | * [Textarea](./fb-textarea.md) 24 | * [Uploader](./fb-uploader.md) 25 | 26 | ## Example 27 | 28 | ```html 29 | 30 | 31 | 32 | ``` 33 | @vue 34 | 35 | 36 | 37 | @endvue 38 | 39 | 40 | ## Component properties 41 | 42 | | Name | Type | Default | Description | 43 | |---------------------|:------------------:|:-------------------:|---------------------------------------------------| 44 | | **name** | `String` | `undefined` | Field identifier in the data object | 45 | | **id** | `Number` | `undefined` | Sequence number within the <fb-multi-block> component | 46 | | **label** | `String` | `''` | Text in the <label> element | 47 | | **mask** | `String` | `undefined` | Mask for the `v-mask` directive. Click [here](https://github.com/vuejs-tips/vue-the-mask#tokens) for more information | 48 | | **enter-skip** | `Boolean` | `false` | Skip field when switching by the enter button | 49 | | **focus** | `Boolean` | `false` | Set focus on this field when loading a page | 50 | 51 | 52 | ## Component features 53 | 54 | ### HTML attributes of the text field 55 | 56 | All standard attributes, except `class` and `style`, are passed to the `<input>` element, for example: 57 | 58 | ```html 59 | 60 | 66 | 67 | ``` 68 | 69 | 70 | 71 | 72 | 73 | #### type="checkbox" and type="radio" 74 | 75 | Note: Don’t use <fb-input type="checkbox"> or <fb-input type="radio">. There are individual components such as [<fb-checkbox>](./fb-checkbox.md) and [<fb-radio>](./fb-radio.md) for these types. 76 | 77 | #### type="password" 78 | 79 | If `type="password"` is passed, the Hide/Show Password button will automatically appear in the field. 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /docs/fb-multi-block.md: -------------------------------------------------------------------------------- 1 | # The <fb-multi-block> Component 2 | 3 | It can be located only within the <form-builder> component and is visually presented as follows: 4 | 5 | ![fb-multi-block](https://static.awes.io/docs/fb-multi-block.gif) 6 | 7 | ## Components 8 | * [Form Builder](./form-builder.md) 9 | * [Auto Captcha](./fb-auto-captcha.md) 10 | * [Checkbox](./fb-checkbox.md) 11 | * [Code](./fb-code.md) 12 | * [Company Slug](./fb-company-slug.md) 13 | * [Date](./fb-date.md) 14 | * [Date range](./fb-date-range.md) 15 | * [Editor](./fb-editor.md) 16 | * [Input](./fb-input.md) 17 | * **Multi block** 18 | * [Phone](./fb-phone.md) 19 | * [Radio Group](./fb-radio-group.md) 20 | * [Select](./fb-select.md) 21 | * [Slider](./fb-slider.md) 22 | * [Switcher](./fb-switcher.md) 23 | * [Textarea](./fb-textarea.md) 24 | * [Uploader](./fb-uploader.md) 25 | 26 | ## Example 27 | 28 | ```html 29 | 39 | 52 | 53 | ``` 54 | @vue 55 | 56 | 64 | 65 | @endvue 66 | 67 | 68 | ## Component properties 69 | 70 | | Name | Type | Default | Description | 71 | |---------------------|:------------------:|:-------------------:|---------------------------------------------------| 72 | | **name(*)** | `String` | `undefined` | Field identifier in the data object | 73 | | **id** | `Number` | `undefined` | Sequence number within the <fb-multi-block> component | 74 | | **label** | `String` | `'add'` | Text in the “Add” button | 75 | -------------------------------------------------------------------------------- /docs/fb-phone.md: -------------------------------------------------------------------------------- 1 | # The <fb-phone> Component 2 | 3 | This component is intended for the international telephone input. The [vue-tel-input](https://github.com/EducationLink/vue-tel-input) component is used within it. 4 | 5 | It can be located within the <form-builder> component, then it requires `name` property, or it can be used with `v-model` directive. Below you can see how this component functions. 6 | 7 | ![fb-phone](https://static.awes.io/docs/fb-phone.gif) 8 | 9 | ## Components 10 | * [Form Builder](./form-builder.md) 11 | * [Auto Captcha](./fb-auto-captcha.md) 12 | * [Checkbox](./fb-checkbox.md) 13 | * [Code](./fb-code.md) 14 | * [Company Slug](./fb-company-slug.md) 15 | * [Date](./fb-date.md) 16 | * [Date range](./fb-date-range.md) 17 | * [Editor](./fb-editor.md) 18 | * [Input](./fb-input.md) 19 | * [Multi block](./fb-multi-block.md) 20 | * **Phone** 21 | * [Radio Group](./fb-radio-group.md) 22 | * [Select](./fb-select.md) 23 | * [Slider](./fb-slider.md) 24 | * [Switcher](./fb-switcher.md) 25 | * [Textarea](./fb-textarea.md) 26 | * [Uploader](./fb-uploader.md) 27 | 28 | ## Example 29 | 30 | ```html 31 | 32 | 33 | 34 | ``` 35 | @vue 36 | 37 | 38 | 39 | @endvue 40 | 41 | 42 | ## Component properties 43 | 44 | | Name | Type | Default | Description | 45 | |---------------------|:------------------:|:-------------------:|---------------------------------------------------| 46 | | **name** | `String` | `undefined` | Field identifier in the data object | 47 | | **id** | `Number` | `undefined` | Sequence number within the <fb-multi-block> component | 48 | | **label** | `String` | `''` | Text in the <label> element | 49 | | **enter-skip** | `Boolean` | `false` | Skip field when switching by the enter button | 50 | | **focus** | `Boolean` | `false` | Set focus on this field when loading a page | 51 | | **default-country** | `String` | `''` | Default country, will override the country fetched from IP address of user | -------------------------------------------------------------------------------- /docs/fb-radio-group.md: -------------------------------------------------------------------------------- 1 | # The <fb-radio-group> Component 2 | 3 | Using this component, you can create a group of radio buttons. It can be located within the <form-builder> component, then it requires `name` property, or it can be used with `v-model` Vue directive. The example below shows several different groups of radio buttons which you can customize at your own discretion. 4 | 5 | ![fb-radio-group](https://static.awes.io/docs/fb-radio-group.png) 6 | 7 | ## Components 8 | * [Form Builder](./form-builder.md) 9 | * [Auto Captcha](./fb-auto-captcha.md) 10 | * [Checkbox](./fb-checkbox.md) 11 | * [Code](./fb-code.md) 12 | * [Company Slug](./fb-company-slug.md) 13 | * [Date](./fb-date.md) 14 | * [Date range](./fb-date-range.md) 15 | * [Editor](./fb-editor.md) 16 | * [Input](./fb-input.md) 17 | * [Multi block](./fb-multi-block.md) 18 | * [Phone](./fb-phone.md) 19 | * **Radio Group** 20 | * [Select](./fb-select.md) 21 | * [Slider](./fb-slider.md) 22 | * [Switcher](./fb-switcher.md) 23 | * [Textarea](./fb-textarea.md) 24 | * [Uploader](./fb-uploader.md) 25 | 26 | ## Example 27 | 28 | ```html 29 | 30 | 35 | 36 | ``` 37 | @vue 38 | 39 | 40 | 41 | @endvue 42 | 43 | 44 | ## Component properties 45 | 46 | | Name | Type | Default | Description | 47 | |---------------------|:------------------:|:-------------------:|---------------------------------------------------| 48 | | **name** | `String` | `undefined` | Field identifier in the data object | 49 | | **id** | `Number` | `undefined` | Sequence number within the <fb-multi-block> component | 50 | | **label** | `String` | `''` | Text in the <label> element | 51 | | **items** | `Array` | `undefined` | [Array of radio buttons](#fbrg-items) | 52 | | **box** | `Boolean` | `false` | It adds classes for styling with a frame | 53 | | **enter-skip** | `Boolean` | `false` | Skip field when switching by the enter button | 54 | | **focus** | `Boolean` | `false` | Set focus on this field when loading a page | 55 | | **disabled** | `Boolean, String` | `false` | `true` to disable all inputs, or string value of disabled input, or comma-separated values of multiple inputs | 56 | 57 | 58 |

Array of radio buttons

59 | 60 | There are two options for displaying the items array: 61 | 62 | ```javascript 63 | const items = ['Item 1', 'Item 2', 'Item 3'] 64 | // In such case, we will get radio buttons with the same `