├── .npmignore
├── .gitignore
├── content
    ├── form1.png
    └── reforms.png
├── .github
    ├── dependabot.yml
    ├── workflows
    │   ├── build.yml
    │   └── npm-publish.yml
    └── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
├── src
    ├── validator
    │   ├── BoolValidator.js
    │   ├── RequiredValidator.js
    │   └── StringValidator.js
    ├── output
    │   ├── ReformsHiddenOutput.vue
    │   ├── ReformsHtmlOutput.vue
    │   ├── ReformsPasswordOutput.vue
    │   ├── ReformsStringOutput.vue
    │   ├── ReformsUrlOutput.vue
    │   ├── ReformsTelOutput.vue
    │   ├── ReformsEmailOutput.vue
    │   ├── ReformsRadioOutput.vue
    │   ├── ReformsCheckboxOutput.vue
    │   ├── ReformsBooleanOutput.vue
    │   ├── ReformsSelectOutput.vue
    │   ├── ReformsGroupOutput.vue
    │   └── ReformsFileOutput.vue
    ├── ReformsInputMixin.js
    ├── ReformsValidators.js
    ├── ReformsCard.vue
    ├── input
    │   ├── ReformsHiddenInput.vue
    │   ├── ReformsBooleanInput.vue
    │   ├── ReformsTextInput.vue
    │   ├── ReformsTelInput.vue
    │   ├── ReformsUrlInput.vue
    │   ├── ReformsEmailInput.vue
    │   ├── ReformsGroupInput.vue
    │   ├── ReformsRadioInput.vue
    │   ├── ReformsNumberInput.vue
    │   ├── ReformsCheckboxInput.vue
    │   ├── ReformsSelectInput.vue
    │   ├── ReformsStringInput.vue
    │   ├── ReformsHtmlInput.vue
    │   ├── ReformsDateInput.vue
    │   ├── ReformsPasswordInput.vue
    │   └── ReformsFileInput.vue
    ├── ReformsLabel.vue
    ├── ReformsFileMixin.js
    ├── lang
    │   ├── en.js
    │   └── ru.js
    ├── ReformsSchema.js
    ├── Reforms.js
    ├── ReformsForm.vue
    ├── ReformsOutput.vue
    ├── ReformsContainerMixin.js
    ├── ReformsTypes.js
    ├── Util.js
    └── ReformsInput.vue
├── examples
    ├── index.js
    ├── InputsOutputs.vue
    ├── types
    │   ├── NumberType.vue
    │   └── StringType.vue
    └── ExamplesIndex.vue
├── rollup.config.js
├── LICENSE
├── package.json
├── README.md
├── CODE_OF_CONDUCT.md
└── CONTRIBUTING.md


/.npmignore:
--------------------------------------------------------------------------------
1 | .github/
2 | content/
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | node_modules/
3 | dist/
4 | 


--------------------------------------------------------------------------------
/content/form1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/malikzh/reforms/HEAD/content/form1.png


--------------------------------------------------------------------------------
/content/reforms.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/malikzh/reforms/HEAD/content/reforms.png


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 |   - package-ecosystem: "npm"
4 |     directory: "/"
5 |     schedule:
6 |       interval: "daily"
7 | 


--------------------------------------------------------------------------------
/src/validator/BoolValidator.js:
--------------------------------------------------------------------------------
1 | import {createValidator, createMatcher} from "../Util";
2 | 
3 | export default {
4 |     checked: createValidator(createMatcher(
5 |         (value) => value === true,
6 |         'not_checked',
7 |     ), 'checked', false),
8 | };
9 | 


--------------------------------------------------------------------------------
/src/output/ReformsHiddenOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-hidden-output"></div>
 3 | </template>
 4 | <script>
 5 | export default {
 6 |   name: "ReformsHiddenOutput",
 7 |   props: {
 8 |     value: {
 9 |       type: String,
10 |       default: '',
11 |     }
12 |   },
13 | };
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/ReformsInputMixin.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     props: {
 3 |         id: {
 4 |             type: String,
 5 |             default: undefined,
 6 |         },
 7 |         isValid: {
 8 |             default: null,
 9 |         },
10 |         inputClass: [String, Object, Array],
11 |         name: String,
12 |     },
13 | };
14 | 


--------------------------------------------------------------------------------
/src/ReformsValidators.js:
--------------------------------------------------------------------------------
 1 | import RequiredValidator from './validator/RequiredValidator'
 2 | import StringValidator from "./validator/StringValidator";
 3 | import BoolValidator from "./validator/BoolValidator";
 4 | 
 5 | export default {
 6 |     ...RequiredValidator,
 7 |     ...StringValidator,
 8 |     ...BoolValidator,
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/output/ReformsHtmlOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-html="value"></div>
 3 | </template>
 4 | <script>
 5 | import {watch, toRef} from 'vue';
 6 | 
 7 | export default {
 8 |   name: "ReformsHtmlOutput",
 9 |   props: {
10 |     value: {
11 |       type: String,
12 |       default: '',
13 |     }
14 |   },
15 | };
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/output/ReformsPasswordOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-string-output">
 3 |     ******
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   name: "ReformsPasswordOutput",
 9 |   props: {
10 |     value: {
11 |       type: String,
12 |       default: '',
13 |     }
14 |   },
15 | };
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/output/ReformsStringOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-string-output">
 3 |     {{ value }}
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   name: "ReformsStringOutput",
 9 |   props: {
10 |     value: {
11 |       type: String,
12 |       default: '',
13 |     }
14 |   },
15 | };
16 | </script>
17 | 


--------------------------------------------------------------------------------
/examples/index.js:
--------------------------------------------------------------------------------
 1 | import {createApp} from 'vue';
 2 | import ExamplesIndex from './ExamplesIndex'
 3 | import Reforms from "../src/Reforms";
 4 | 
 5 | // Initialize bootstrap 5
 6 | import 'bootstrap/dist/js/bootstrap.bundle';
 7 | import 'bootstrap/dist/css/bootstrap.css';
 8 | 
 9 | const app = createApp(ExamplesIndex);
10 | app.use(Reforms);
11 | app.mount('#app');
12 | 


--------------------------------------------------------------------------------
/examples/InputsOutputs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <string-type />
 4 |     <hr />
 5 |     <number-type />
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | import StringType from "./types/StringType";
10 | import NumberType from "./types/NumberType";
11 | export default {
12 |   name: "InputsOutputs",
13 |   components: {NumberType, StringType},
14 | }
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/output/ReformsUrlOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-email-output">
 3 |     <a v-if="value" :href="value" target="_blank">
 4 |       {{ value }}
 5 |     </a>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | export default {
10 |   name: "ReformsUrlOutput",
11 |   props: {
12 |     value: {
13 |       type: String,
14 |       default: '',
15 |     }
16 |   },
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/output/ReformsTelOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-email-output">
 3 |     {{ value }} <a v-if="value" style="text-decoration: none;" :href="'tel:' + value">&phone;</a>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   name: "ReformsTelOutput",
 9 |   props: {
10 |     value: {
11 |       type: String,
12 |       default: '',
13 |     }
14 |   },
15 | };
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/output/ReformsEmailOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-email-output">
 3 |     {{ value }} <a v-if="value && value.indexOf('@') > 0" style="text-decoration: none;" :href="'mailto:' + value">&#128231;</a>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   name: "ReformsEmailOutput",
 9 |   props: {
10 |     value: {
11 |       type: String,
12 |       default: '',
13 |     }
14 |   },
15 | };
16 | </script>
17 | 


--------------------------------------------------------------------------------
/src/output/ReformsRadioOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-radio-output">
 3 |     {{ options[value] !== undefined ? options[value] : value }}
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |   name: "ReformsRadioOutput",
 9 |   props: {
10 |     value: {
11 |       type: String,
12 |       default: '',
13 |     },
14 |     options: {
15 |       type: Object,
16 |       default: {},
17 |     }
18 |   },
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/examples/types/NumberType.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="row mb-2">
 4 |       <div class="col-6">
 5 |         <reforms-input type="number" v-model="value" />
 6 |       </div>
 7 |       <div class="col-6">
 8 |         <reforms-output type="number" :value="value" />
 9 |       </div>
10 |     </div>
11 |   </div>
12 | </template>
13 | <script>
14 | export default {
15 |   name: "NumberType",
16 |   data() {
17 |     return {
18 |       value: '32',
19 |     };
20 |   },
21 | }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/output/ReformsCheckboxOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-radio-output">
 3 |     <span v-for="v in (Array.isArray(value) ? value : [])">
 4 |       {{ options[v] !== undefined ? options[v] : v }},&nbsp;
 5 |     </span>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | export default {
10 |   name: "ReformsCheckboxOutput",
11 |   props: {
12 |     value: {
13 |       type: Array,
14 |       default: [],
15 |     },
16 |     options: {
17 |       type: Object,
18 |       default: {},
19 |     }
20 |   },
21 | };
22 | </script>
23 | 


--------------------------------------------------------------------------------
/.github/workflows/build.yml:
--------------------------------------------------------------------------------
 1 | name: Build
 2 | 
 3 | on:
 4 |   push:
 5 |     branches: [ master ]
 6 |   pull_request:
 7 |     branches: [ master ]
 8 | 
 9 | jobs:
10 |   build:
11 | 
12 |     runs-on: ubuntu-latest
13 | 
14 |     strategy:
15 |       matrix:
16 |         node-version: [12.x, 14.x, 15.x]
17 | 
18 |     steps:
19 |     - uses: actions/checkout@v2
20 |     - name: Use Node.js ${{ matrix.node-version }}
21 |       uses: actions/setup-node@v1
22 |       with:
23 |         node-version: ${{ matrix.node-version }}
24 |     - run: npm ci
25 |     - run: npm run build
26 | 


--------------------------------------------------------------------------------
/src/ReformsCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-card row">
 3 |     <reforms-schema :schema="schema" output-mode v-bind="$attrs" :value="value" />
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | import ReformsSchema from "./ReformsSchema";
 8 | import ReformsContainerMixin from "./ReformsContainerMixin";
 9 | export default {
10 |   name: "ReformsCard",
11 |   mixins: [ReformsContainerMixin],
12 |   components: {
13 |     ReformsSchema,
14 |   },
15 |   props: {
16 |     schema: {
17 |       type: Object,
18 |       required: true,
19 |     },
20 |     value: {
21 |       type: Object,
22 |       default: {},
23 |     },
24 |   }
25 | };
26 | </script>
27 | 


--------------------------------------------------------------------------------
/src/input/ReformsHiddenInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <input type="hidden" :name="name || ''" :id="id" :class="inputClass" v-model="inputValue">
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | import ReformsInputMixin from "../ReformsInputMixin";
 8 | import {modelValue} from "../Util";
 9 | 
10 | export default {
11 |   name: "SET",
12 |   inheritAttrs: false,
13 |   mixins: [ReformsInputMixin],
14 |   emits: ['update:modelValue'],
15 |   props: {
16 |     modelValue: {
17 |       type: String,
18 |       default: '',
19 |     },
20 |   },
21 |   computed: {
22 |     inputValue: modelValue(),
23 |   },
24 | }
25 | </script>
26 | 


--------------------------------------------------------------------------------
/src/ReformsLabel.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col-4" v-if="label">
 3 |     <label>
 4 |       {{ label }}
 5 |       <a href="javascript:void(0);" v-if="hint" style="text-decoration: none;"
 6 |          class="text-success" data-bs-toggle="tooltip"
 7 |          :title="hint" ref="hint">
 8 |         &#9432;
 9 |       </a>
10 |     </label>
11 |   </div>
12 | </template>
13 | <script>
14 | import {Tooltip} from 'bootstrap'
15 | 
16 | export default {
17 |   name: "ReformsLabel",
18 |   props: {
19 |     label: String,
20 |     hint: String,
21 |   },
22 |   mounted() {
23 |     if (this.hint) {
24 |       new Tooltip(this.$refs.hint);
25 |     }
26 |   },
27 | };
28 | </script>
29 | 


--------------------------------------------------------------------------------
/.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 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 | 


--------------------------------------------------------------------------------
/src/output/ReformsBooleanOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-bool-output">
 3 |     <span v-if="value === true" class="text-success">
 4 |       {{ trueLabel }}
 5 |     </span>
 6 |     <span v-else-if="value === false" class="text-danger">
 7 |       {{ falseLabel }}
 8 |     </span>
 9 |     <span v-else class="text-muted">
10 |       {{ undefinedLabel }}
11 |     </span>
12 |   </div>
13 | </template>
14 | <script>
15 | export default {
16 |   name: "ReformsBooleanOutput",
17 |   props: {
18 |     value: {
19 |       type: Boolean,
20 |       default: null,
21 |     },
22 |     trueLabel: {
23 |       type: String,
24 |       default: 'V'
25 |     },
26 |     falseLabel: {
27 |       type: String,
28 |       default: 'X'
29 |     },
30 |     undefinedLabel: {
31 |       type: String,
32 |       default: '?'
33 |     },
34 |   },
35 | };
36 | </script>
37 | 


--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
 1 | import vue from 'rollup-plugin-vue';
 2 | import PostCSS from 'rollup-plugin-postcss'
 3 | import NodeResolve from '@rollup/plugin-node-resolve'
 4 | import commonjs from "rollup-plugin-commonjs";
 5 | 
 6 | export default {
 7 |     input: 'src/Reforms.js',
 8 |     output: [
 9 |         {
10 |             file: 'dist/reforms.esm.js',
11 |             format: 'es',
12 |         },
13 |         {
14 |             name: 'reforms',
15 |             file: 'dist/reforms.umd.js',
16 |             format: 'umd',
17 |         },
18 |         {
19 |             file: 'dist/reforms.min.js',
20 |             format: 'iife',
21 |         },
22 |     ],
23 |     plugins: [
24 |         NodeResolve(),
25 |         commonjs(),
26 |         vue({
27 |             cssModulesOptions: {
28 |                 generateScopedName: '[local]___[hash:base64:5]',
29 |             },
30 |         }),
31 |         PostCSS()
32 |     ],
33 |     external: ['vue'],
34 | };
35 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ''
 5 | labels: ''
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.
39 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
 3 | 
 4 | name: Node.js Package
 5 | 
 6 | on:
 7 |   release:
 8 |     types: [created]
 9 | 
10 | jobs:
11 |   build:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v2
15 |       - uses: actions/setup-node@v1
16 |         with:
17 |           node-version: 14
18 |       - run: npm ci
19 |       - run: npm run build
20 | 
21 |   publish-npm:
22 |     needs: build
23 |     runs-on: ubuntu-latest
24 |     steps:
25 |       - uses: actions/checkout@v2
26 |       - uses: actions/setup-node@v1
27 |         with:
28 |           node-version: 14
29 |           registry-url: https://registry.npmjs.org/
30 |       - run: npm ci
31 |       - run: npm run build
32 |       - run: npm publish
33 |         env:
34 |           NODE_AUTH_TOKEN: ${{secrets.npm_token}}
35 | 


--------------------------------------------------------------------------------
/src/input/ReformsBooleanInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <div class="form-check form-switch">
 4 |       <input type="checkbox" :name="name" class="form-check-input" :class="classes" :id="id" v-model="inputValue">
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | import ReformsInputMixin from "../ReformsInputMixin";
10 | import {mergeClasses, modelValue, randomId} from "../Util";
11 | 
12 | export default {
13 |   name: "ReformsBooleanInput",
14 |   inheritAttrs: false,
15 |   mixins: [ReformsInputMixin],
16 |   emits: ['update:modelValue'],
17 |   props: {
18 |     modelValue: {
19 |       type: Boolean,
20 |       default: false,
21 |     },
22 |     options: {
23 |       type: Object,
24 |       default: {},
25 |     },
26 |   },
27 |   data() {
28 |     return {
29 |       idPrefix: randomId(16),
30 |     };
31 |   },
32 |   computed: {
33 |     inputValue: modelValue(),
34 |     classes() {
35 |       return mergeClasses(this.inputClass, {
36 |         'is-valid': this.isValid === true,
37 |         'is-invalid': this.isValid === false,
38 |       });
39 |     },
40 |   },
41 | }
42 | </script>
43 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 EMPLA GROUP, LLP
 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 | 


--------------------------------------------------------------------------------
/src/output/ReformsSelectOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-radio-output">
 3 |     <template v-if="!Array.isArray(value)">
 4 |       {{ optionsValues[value] !== undefined ? optionsValues[value] : value }}
 5 |     </template>
 6 |     <template v-else>
 7 |       <span v-for="v in value">
 8 |       {{ optionsValues[v] !== undefined ? optionsValues[v] : v }},&nbsp;
 9 |     </span>
10 |     </template>
11 |   </div>
12 | </template>
13 | <script>
14 | export default {
15 |   name: "ReformsSelectOutput",
16 |   props: {
17 |     value: {
18 |       type: [Array, String],
19 |       default: [],
20 |     },
21 |     options: {
22 |       type: Array,
23 |       default: [],
24 |     },
25 |   },
26 |   computed: {
27 |     optionsValues() {
28 |       let ret = {};
29 | 
30 |       this.options.forEach((opt) => {
31 |         if (!opt.children) {
32 |           ret[opt.value] = opt.label;
33 |         } else {
34 |           opt.children.forEach((opt) => {
35 |             ret[opt.value] = opt.label;
36 |           });
37 |         }
38 |       });
39 | 
40 |       console.log(ret);
41 | 
42 |       return ret;
43 |     },
44 |   }
45 | };
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/output/ReformsGroupOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-group-output card">
 3 |     <div class="card-body">
 4 |       <slot></slot>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | import {watch, toRef} from 'vue';
10 | import _ from 'lodash';
11 | 
12 | export default {
13 |   name: 'ReformsGroupOutput',
14 |   props: {
15 |     value: {
16 |       type: Object,
17 |       default: {},
18 |     },
19 |   },
20 |   data() {
21 |     return {
22 |       container: {},
23 |       containerWatchers: {},
24 |     };
25 |   },
26 |   methods: {
27 |     registerOutput(output) {
28 |       this.container[output.name] = output;
29 | 
30 |       this.containerWatchers[output.name] = watch(toRef(this.$props, 'value'), (value) => {
31 |         if (!_.isObject(value)) {
32 |           return;
33 |         }
34 | 
35 |         output.setValue(value[output.name]);
36 |       }, {deep: true, immediate: true});
37 |     },
38 |     unregisterOutput(output) {
39 |       this.container[output.name] = undefined;
40 | 
41 |       if (_.isFunction(this.containerWatchers[output.name])) {
42 |         this.containerWatchers[output.name]();
43 |       }
44 |     }
45 |   }
46 | }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/input/ReformsTextInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <textarea
 4 |         :name="name"
 5 |         v-model="inputValue"
 6 |         :placeholder="placeholder"
 7 |         :readonly="readonly"
 8 |         :maxlength="maxlength"
 9 |         :id="id"
10 |         class="form-control"
11 |         :class="classes"
12 |         :tabindex="tabindex"
13 |         :autocomplete="autocomplete"
14 |     ></textarea>
15 |   </div>
16 | </template>
17 | <script>
18 | import ReformsInputMixin from "../ReformsInputMixin";
19 | import {mergeClasses, modelValue} from "../Util";
20 | 
21 | export default {
22 |   name: "ReformsTextInput",
23 |   inheritAttrs: false,
24 |   mixins: [ReformsInputMixin],
25 |   emits: ['update:modelValue'],
26 |   props: {
27 |     modelValue: {
28 |       type: String,
29 |       default: '',
30 |     },
31 |     readonly: Boolean,
32 |     placeholder: String,
33 |     tabindex: String,
34 |     autocomplete: String,
35 |     maxlength: String,
36 |   },
37 |   computed: {
38 |     inputValue: modelValue(),
39 |     classes() {
40 |       return mergeClasses(this.inputClass, {
41 |         'is-valid': this.isValid === true,
42 |         'is-invalid': this.isValid === false,
43 |       });
44 |     },
45 |   },
46 | }
47 | </script>
48 | 


--------------------------------------------------------------------------------
/src/input/ReformsTelInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <input type="tel"
 4 |            :name="name"
 5 |            :placeholder="placeholder"
 6 |            :readonly="readonly"
 7 |            :maxlength="maxlength"
 8 |            :id="id"
 9 |            class="form-control"
10 |            :class="classes"
11 |            :tabindex="tabindex"
12 |            :autocomplete="autocomplete"
13 |            v-model="inputValue">
14 |   </div>
15 | </template>
16 | <script>
17 | import ReformsInputMixin from "../ReformsInputMixin";
18 | import {modelValue, mergeClasses} from '../Util'
19 | 
20 | export default {
21 |   name: "ReformsTelInput",
22 |   inheritAttrs: false,
23 |   mixins: [ReformsInputMixin],
24 |   emits: ['update:modelValue'],
25 |   props: {
26 |     modelValue: {
27 |       type: String,
28 |       default: '',
29 |     },
30 |     readonly: Boolean,
31 |     placeholder: String,
32 |     maxlength: String,
33 |     tabindex: String,
34 |     autocomplete: String,
35 |   },
36 |   computed: {
37 |     inputValue: modelValue(),
38 |     classes() {
39 |       return mergeClasses(this.inputClass, {
40 |         'is-valid': this.isValid === true,
41 |         'is-invalid': this.isValid === false,
42 |       });
43 |     },
44 |   },
45 | };
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/input/ReformsUrlInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <input type="url"
 4 |            :name="name"
 5 |            :placeholder="placeholder"
 6 |            :readonly="readonly"
 7 |            :maxlength="maxlength"
 8 |            :id="id"
 9 |            class="form-control"
10 |            :class="classes"
11 |            :tabindex="tabindex"
12 |            :autocomplete="autocomplete"
13 |            v-model="inputValue">
14 |   </div>
15 | </template>
16 | <script>
17 | import ReformsInputMixin from "../ReformsInputMixin";
18 | import {modelValue, mergeClasses} from '../Util'
19 | 
20 | export default {
21 |   name: "ReformsUrlInput",
22 |   inheritAttrs: false,
23 |   mixins: [ReformsInputMixin],
24 |   emits: ['update:modelValue'],
25 |   props: {
26 |     modelValue: {
27 |       type: String,
28 |       default: '',
29 |     },
30 |     readonly: Boolean,
31 |     placeholder: String,
32 |     maxlength: String,
33 |     tabindex: String,
34 |     autocomplete: String,
35 |   },
36 |   computed: {
37 |     inputValue: modelValue(),
38 |     classes() {
39 |       return mergeClasses(this.inputClass, {
40 |         'is-valid': this.isValid === true,
41 |         'is-invalid': this.isValid === false,
42 |       });
43 |     },
44 |   },
45 | };
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/input/ReformsEmailInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <input type="email"
 4 |            :name="name"
 5 |            :placeholder="placeholder"
 6 |            :readonly="readonly"
 7 |            :maxlength="maxlength"
 8 |            :id="id"
 9 |            class="form-control"
10 |            :class="classes"
11 |            :tabindex="tabindex"
12 |            :autocomplete="autocomplete"
13 |            v-model="inputValue">
14 |   </div>
15 | </template>
16 | <script>
17 | import ReformsInputMixin from "../ReformsInputMixin";
18 | import {modelValue, mergeClasses} from '../Util'
19 | 
20 | export default {
21 |   name: "ReformsEmailInput",
22 |   inheritAttrs: false,
23 |   mixins: [ReformsInputMixin],
24 |   emits: ['update:modelValue'],
25 |   props: {
26 |     modelValue: {
27 |       type: String,
28 |       default: '',
29 |     },
30 |     readonly: Boolean,
31 |     placeholder: String,
32 |     maxlength: String,
33 |     tabindex: String,
34 |     autocomplete: String,
35 |   },
36 |   computed: {
37 |     inputValue: modelValue(),
38 |     classes() {
39 |       return mergeClasses(this.inputClass, {
40 |         'is-valid': this.isValid === true,
41 |         'is-invalid': this.isValid === false,
42 |       });
43 |     },
44 |   },
45 | };
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/ReformsFileMixin.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     props: {
 3 |         fileSizeUnit: {
 4 |             type: String,
 5 |             default: 'iec',
 6 |         },
 7 |     },
 8 |     methods: {
 9 |         isImage(name) {
10 |             return name.match(/\.(?:png|jpe?g|gif|svg|webp)$/);
11 |         },
12 |         roundSize(x) {
13 |             return Math.round(x * 100) / 100;
14 |         },
15 |         fileSize(size) {
16 |             const unitSize = (this.fileSizeUnit === 'si' ? 1000 : 1024);
17 | 
18 |             const kib = this.roundSize(size / unitSize);
19 | 
20 |             if (kib < unitSize) {
21 |                 return kib + (this.fileSizeUnit === 'si' ? ' KB' : ' KiB');
22 |             }
23 | 
24 |             const mib = this.roundSize(kib / unitSize);
25 | 
26 |             if (mib < unitSize) {
27 |                 return mib + (this.fileSizeUnit === 'si' ? ' MB' : ' MiB');
28 |             }
29 | 
30 |             const gib = this.roundSize(mib / unitSize);
31 | 
32 |             if (gib < unitSize) {
33 |                 return gib + (this.fileSizeUnit === 'si' ? ' GB' : ' GiB');
34 |             }
35 | 
36 |             const tib = this.roundSize(gib / unitSize);
37 |             return tib + (this.fileSizeUnit === 'si' ? ' TB' : ' TiB');
38 |         },
39 |     },
40 | };
41 | 


--------------------------------------------------------------------------------
/src/input/ReformsGroupInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-group-input card">
 3 |     <div class="card-body">
 4 |       <slot></slot>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | <script>
 9 | import {toRef, watch} from 'vue';
10 | import ReformsContainerMixin from "../ReformsContainerMixin";
11 | import _ from 'lodash';
12 | 
13 | export default {
14 |   name: "ReformsGroupInput",
15 |   mixins: [ReformsContainerMixin],
16 |   emits: ['update:modelValue'],
17 |   props: {
18 |     modelValue: {
19 |       default: {},
20 |     },
21 |     validationResult: {
22 |       type: Object,
23 |       default: {},
24 |     },
25 |   },
26 |   created() {
27 |     const containerRef = toRef(this.$data, 'container');
28 | 
29 |     this.container = this.modelValue;
30 | 
31 |     watch(containerRef, (container) => {
32 |       this.$emit('update:modelValue', container);
33 |     }, {deep: true});
34 |   },
35 |   methods: {
36 |     validate() {
37 |       let result = true;
38 | 
39 |       Object.keys(this.containerInputs).forEach((inputName) => {
40 |         if (_.isFunction(this.containerInputs[inputName].validate)) {
41 |           result = this.containerInputs[inputName].validate() && result;
42 |         }
43 |       });
44 | 
45 |       return result;
46 |     },
47 |   }
48 | };
49 | </script>
50 | 


--------------------------------------------------------------------------------
/src/input/ReformsRadioInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <div class="form-check" v-for="(option, i) in Object.entries(options)">
 4 |       <input type="radio" :name="name" class="form-check-input" :class="classes" :id="idPrefix + '_' + String(i)" v-model="inputValue" :value="option[0]">
 5 |       <label class="form-check-label" :for="idPrefix + '_' + String(i)">
 6 |         {{ option[1] }}
 7 |       </label>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | <script>
12 | import ReformsInputMixin from "../ReformsInputMixin";
13 | import {mergeClasses, modelValue, randomId} from "../Util";
14 | 
15 | export default {
16 |   name: "ReformsRadioInput",
17 |   inheritAttrs: false,
18 |   mixins: [ReformsInputMixin],
19 |   emits: ['update:modelValue'],
20 |   props: {
21 |     modelValue: {
22 |       type: String,
23 |       default: '',
24 |     },
25 |     options: {
26 |       type: Object,
27 |       default: {},
28 |     }
29 |   },
30 |   data() {
31 |     return {
32 |       idPrefix: randomId(16),
33 |     };
34 |   },
35 |   computed: {
36 |     inputValue: modelValue(),
37 |     classes() {
38 |       return mergeClasses(this.inputClass, {
39 |         'is-valid': this.isValid === true,
40 |         'is-invalid': this.isValid === false,
41 |       });
42 |     },
43 |   },
44 | }
45 | </script>
46 | 


--------------------------------------------------------------------------------
/examples/types/StringType.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="row mb-2">
 4 |       <div class="col-12 text-center mb-2">
 5 |         STRING
 6 |       </div>
 7 |       <div class="col-12 text-center mb-2">
 8 |         <b>(single)</b>
 9 |       </div>
10 |       <div class="col-6">
11 |         <reforms-input type="string" hint="Some hint text" label="Input label" v-model="modelString" />
12 |       </div>
13 |       <div class="col-6">
14 |         <reforms-output type="string" label="Input label"  :value="modelString" />
15 |       </div>
16 |     </div>
17 |     <div class="row mb-2">
18 |       <div class="col-12 text-center mb-2">
19 |         <b>(multiple)</b>
20 |       </div>
21 |       <div class="col-6">
22 |         <reforms-input type="string"  label="Input label 2"  multiple sortable v-model="modelStringMultiple" />
23 |       </div>
24 |       <div class="col-6">
25 |         <reforms-output type="string" label="Input label 2" multiple :value="modelStringMultiple" />
26 |       </div>
27 |     </div>
28 |   </div>
29 | </template>
30 | <script>
31 | export default {
32 |   name: "StringType",
33 |   data() {
34 |     return {
35 |       modelString: 'test value',
36 |       modelStringMultiple: [
37 |         'test value',
38 |         'test value 2',
39 |       ],
40 |     };
41 |   },
42 | };
43 | </script>
44 | 


--------------------------------------------------------------------------------
/src/input/ReformsNumberInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <input
 4 |         type="number"
 5 |         :name="name"
 6 |         v-model="inputValue"
 7 |         :id="id"
 8 |         :placeholder="placeholder"
 9 |         :readonly="readonly"
10 |         class="form-control"
11 |         :class="classes"
12 |         :tabindex="tabindex"
13 |         :autocomplete="autocomplete"
14 |         :min="min"
15 |         :max="max"
16 |         :step="step"
17 |     />
18 |   </div>
19 | </template>
20 | <script>
21 | import ReformsInputMixin from "../ReformsInputMixin";
22 | import {mergeClasses, modelValue} from "../Util";
23 | 
24 | export default {
25 |   name: "ReformsNumberInput",
26 |   inheritAttrs: false,
27 |   mixins: [ReformsInputMixin],
28 |   emits: ['update:modelValue'],
29 |   props: {
30 |     modelValue: {
31 |       type: String,
32 |       default: '',
33 |     },
34 |     readonly: Boolean,
35 |     placeholder: String,
36 |     tabindex: String,
37 |     autocomplete: String,
38 |     min: String,
39 |     max: String,
40 |     step: String,
41 |   },
42 |   computed: {
43 |     inputValue: modelValue(),
44 |     classes() {
45 |       return mergeClasses(this.inputClass, {
46 |         'is-valid': this.isValid === true,
47 |         'is-invalid': this.isValid === false,
48 |       });
49 |     },
50 |   },
51 | }
52 | </script>
53 | 


--------------------------------------------------------------------------------
/src/input/ReformsCheckboxInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <div class="form-check" v-for="(option, i) in Object.entries(options)">
 4 |       <input type="checkbox" :name="name + '[' + i + ']'" class="form-check-input" :class="classes" :id="idPrefix + '_' + String(i)" v-model="inputValue" :value="option[0]">
 5 |       <label class="form-check-label" :for="idPrefix + '_' + String(i)">
 6 |         {{ option[1] }}
 7 |       </label>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | <script>
12 | import ReformsInputMixin from "../ReformsInputMixin";
13 | import {mergeClasses, modelValue, randomId} from "../Util";
14 | import _ from 'lodash';
15 | 
16 | export default {
17 |   name: "ReformsCheckboxInput",
18 |   inheritAttrs: false,
19 |   mixins: [ReformsInputMixin],
20 |   emits: ['update:modelValue'],
21 |   props: {
22 |     modelValue: {
23 |       type: null,
24 |       default: [],
25 |     },
26 |     options: {
27 |       type: Object,
28 |       default: {},
29 |     }
30 |   },
31 |   data() {
32 |     return {
33 |       idPrefix: randomId(16),
34 |     };
35 |   },
36 |   computed: {
37 |     inputValue: modelValue(undefined, (v) => !_.isArray(v) ? [] : v),
38 |     classes() {
39 |       return mergeClasses(this.inputClass, {
40 |         'is-valid': this.isValid === true,
41 |         'is-invalid': this.isValid === false,
42 |       });
43 |     },
44 |   },
45 | }
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/lang/en.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     validation: {
 3 |         required: {
 4 |             not_specified: 'This field must be filled',
 5 |             specified: 'Field is filled',
 6 |         },
 7 |         string: {
 8 |             must_be_string: 'The value must be a string',
 9 |         },
10 |         email: {
11 |             must_be_email: 'Incorrect E-mail specified'
12 |         },
13 |         url: {
14 |             must_be_url: 'Invalid URL specified',
15 |         },
16 |         alpha: {
17 |             not_alpha: 'The specified value must contain only Latin letters',
18 |             not_alphanum: 'The specified value must contain only Latin letters and numbers'
19 |         },
20 |         'in': {
21 |             must_be_in: 'The specified value can only be: :values',
22 |             must_not_be_in: 'The specified value should not be: :values',
23 |         },
24 |         regex: {
25 |             not_match: 'The specified value does not match the pattern',
26 |         },
27 |         starts_with: {
28 |             not_starts: 'The specified value must start with: ":value"'
29 |         },
30 |         ends_with: {
31 |             not_ends: 'The specified value must end with: ":value"'
32 |         },
33 |         contains: {
34 |             not_contains: 'The specified value does not contain: ":value"',
35 |         },
36 |         confirmation: {
37 |             not_confirmed: 'The fields don\'t match',
38 |         },
39 |         checked: {
40 |             not_checked: 'Need to confirm',
41 |         },
42 |     },
43 | };
44 | 


--------------------------------------------------------------------------------
/src/input/ReformsSelectInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <select class="form-select" :name="name" :multiple="multiselect" :placeholder="placeholder" :class="classes" v-model="inputValue" :id="id">
 4 |       <template v-for="opt in options">
 5 |         <template v-if="opt.children">
 6 |           <optgroup :label="opt.label" :disabled="opt.disabled">
 7 |             <option v-for="opt2 in opt.children" :value="opt2.value" :disabled="opt2.disabled">{{ opt2.label }}</option>
 8 |           </optgroup>
 9 |         </template>
10 |         <template v-else>
11 |           <option :value="opt.value" :disabled="opt.disabled">{{ opt.label }}</option>
12 |         </template>
13 |       </template>
14 |     </select>
15 |   </div>
16 | </template>
17 | <script>
18 | import ReformsInputMixin from "../ReformsInputMixin";
19 | import {mergeClasses, modelValue} from "../Util";
20 | 
21 | export default {
22 |   name: "ReformsSelectInput",
23 |   inheritAttrs: false,
24 |   mixins: [ReformsInputMixin],
25 |   emits: ['update:modelValue'],
26 |   props: {
27 |     modelValue: {
28 |       type: [String, Array],
29 |       default: undefined,
30 |     },
31 |     multiselect: Boolean,
32 |     placeholder: String,
33 |     options: {
34 |       type: Array,
35 |       default: [],
36 |     },
37 |   },
38 |   computed: {
39 |     inputValue: modelValue(),
40 |     classes() {
41 |       return mergeClasses(this.inputClass, {
42 |         'is-valid': this.isValid === true,
43 |         'is-invalid': this.isValid === false,
44 |       });
45 |     },
46 |   },
47 | }
48 | </script>
49 | 


--------------------------------------------------------------------------------
/src/lang/ru.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     validation: {
 3 |         required: {
 4 |             not_specified: 'Это поле должно быть заполнено',
 5 |             specified: 'Поле заполнено',
 6 |         },
 7 |         string: {
 8 |             must_be_string: 'Значение должно быть строкой',
 9 |         },
10 |         email: {
11 |             must_be_email: 'Указан некорректный E-mail'
12 |         },
13 |         url: {
14 |             must_be_url: 'Указан некорректный URL',
15 |         },
16 |         alpha: {
17 |             not_alpha: 'Указанное значение должно содержать только латинские буквы',
18 |             not_alphanum: 'Указанное значение должно содержать только латинские буквы и цифры'
19 |         },
20 |         'in': {
21 |             must_be_in: 'Указанное значение может быть только: :values',
22 |             must_not_be_in: 'Указанное значение не должно быть: :values',
23 |         },
24 |         regex: {
25 |             not_match: 'Указанное значение не совпадает с шаблоном',
26 |         },
27 |         starts_with: {
28 |             not_starts: 'Указанное значение должно начинаться с ":value"'
29 |         },
30 |         ends_with: {
31 |             not_ends: 'Указанное значение должно заканчиваться строкой ":value"'
32 |         },
33 |         contains: {
34 |             not_contains: 'Указанное значение не содержит строку: ":value"',
35 |         },
36 |         confirmation: {
37 |             not_confirmed: 'Поля не совпадают',
38 |         },
39 |         checked: {
40 |             not_checked: 'Необходимо подтвердить',
41 |         },
42 |     },
43 | };
44 | 


--------------------------------------------------------------------------------
/src/input/ReformsStringInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <input type="text"
 4 |            :name="name"
 5 |            :placeholder="placeholder"
 6 |            :readonly="readonly"
 7 |            :maxlength="maxlength"
 8 |            :id="id"
 9 |            class="form-control"
10 |            :class="classes"
11 |            ref="input"
12 |            :tabindex="tabindex"
13 |            :autocomplete="autocomplete"
14 |            v-model="inputValue">
15 |   </div>
16 | </template>
17 | <script>
18 | import ReformsInputMixin from "../ReformsInputMixin";
19 | import {modelValue, mergeClasses} from '../Util'
20 | import Inputmask from 'inputmask';
21 | 
22 | export default {
23 |   name: "ReformsStringInput",
24 |   inheritAttrs: false,
25 |   mixins: [ReformsInputMixin],
26 |   emits: ['update:modelValue'],
27 |   props: {
28 |     modelValue: {
29 |       type: String,
30 |       default: '',
31 |     },
32 |     mask: {
33 |       type: [String, Object],
34 |       default: null,
35 |     },
36 |     maskOptions: {
37 |       type: Object,
38 |       default: {},
39 |     },
40 |     readonly: Boolean,
41 |     placeholder: String,
42 |     maxlength: String,
43 |     tabindex: String,
44 |     autocomplete: String,
45 |   },
46 |   computed: {
47 |     inputValue: modelValue(),
48 |     classes() {
49 |       return mergeClasses(this.inputClass, {
50 |         'is-valid': this.isValid === true,
51 |         'is-invalid': this.isValid === false,
52 |       });
53 |     },
54 |   },
55 |   mounted() {
56 |     if (this.mask) {
57 |       const mask = new Inputmask(this.mask, this.maskOptions);
58 |       mask.mask(this.$refs.input);
59 |     }
60 |   }
61 | };
62 | </script>
63 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@empla/reforms",
 3 |   "version": "0.2.3",
 4 |   "description": "Vue 3 and Bootstrap 5 forms generator",
 5 |   "main": "dist/reforms.umd.js",
 6 |   "module": "dist/reforms.esm.js",
 7 |   "unpkg": "dist/reforms.min.js",
 8 |   "scripts": {
 9 |     "test": "echo \"Error: no test specified\" && exit 1",
10 |     "dev": "vue-cli-service serve --port=9000 examples/index.js",
11 |     "build": "rollup -c"
12 |   },
13 |   "browser": {
14 |     "./sfc": "src/Reforms.js"
15 |   },
16 |   "publishConfig": {
17 |     "access": "public"
18 |   },
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git+https://github.com/empla/reforms.git"
22 |   },
23 |   "keywords": [
24 |     "vue",
25 |     "vue3",
26 |     "forms",
27 |     "generator",
28 |     "ui",
29 |     "bootstrap5"
30 |   ],
31 |   "author": "EMPLA GROUP, LLP",
32 |   "license": "MIT",
33 |   "bugs": {
34 |     "url": "https://github.com/empla/reforms/issues"
35 |   },
36 |   "homepage": "https://github.com/empla/reforms#readme",
37 |   "devDependencies": {
38 |     "@babel/core": "^7.13.8",
39 |     "@babel/preset-env": "^7.13.9",
40 |     "@rollup/plugin-node-resolve": "^11.2.0",
41 |     "@vue/cli-service": "^5.0.0-alpha.4",
42 |     "@vue/compiler-sfc": "^3.0.5",
43 |     "bootstrap": "^5.0.0-beta2",
44 |     "cross-env": "^7.0.3",
45 |     "rollup": "^2.40.0",
46 |     "rollup-plugin-commonjs": "^10.1.0",
47 |     "rollup-plugin-postcss": "^4.0.0",
48 |     "rollup-plugin-vue": "^6.0.0-beta.10",
49 |     "vue": "^3.0.5"
50 |   },
51 |   "dependencies": {
52 |     "flatpickr": "^4.6.9",
53 |     "flex-js": "^1.0.5",
54 |     "inputmask": "^5.0.5",
55 |     "jodit": "^3.6.1",
56 |     "lodash": "^4.17.20",
57 |     "mitt": "^2.1.0"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/src/validator/RequiredValidator.js:
--------------------------------------------------------------------------------
 1 | import _ from 'lodash';
 2 | import {createValidator} from "../Util";
 3 | 
 4 | function isEmpty(value) {
 5 |     return value === '' || value === null || value === undefined
 6 |         || (_.isArray(value) && value.length < 1);
 7 | }
 8 | 
 9 | export default {
10 |     required: createValidator((value, params, lang) => {
11 |         const empty = isEmpty(value);
12 | 
13 |         return {
14 |             isValid: !empty,
15 |             messages: [
16 |                 empty ? lang.not_specified : lang.specified,
17 |             ],
18 |         };
19 |     }, 'required', false),
20 |     required_with: createValidator((value, params, lang, withoutMode) => {
21 |         if (!params.form) {
22 |             return;
23 |         }
24 | 
25 |         if (!_.isArray(params.options) || params.options.length < 1) {
26 |             throw new Error('Validator "required_if" requires option');
27 |         }
28 | 
29 |         const form = params.form.container;
30 | 
31 | 
32 |         for (const requiredWithFieldName of params.options) {
33 |             if ((isEmpty(form[requiredWithFieldName]) && !withoutMode) || (!isEmpty(form[requiredWithFieldName]) && withoutMode)) {
34 |                 return {
35 |                     isValid: true,
36 |                     messages: [
37 |                         lang.specified
38 |                     ],
39 |                 };
40 |             }
41 |         }
42 | 
43 |         const empty = isEmpty(value);
44 |         const isValid = Boolean(!empty);
45 |         return {
46 |             isValid: isValid,
47 |             messages: [
48 |                 isValid ? lang.specified : lang.not_specified,
49 |             ],
50 |         };
51 | 
52 |     }, 'required', false),
53 | 
54 |     required_without(params) {
55 |         return this.required_with(params, true);
56 |     },
57 | };
58 | 


--------------------------------------------------------------------------------
/src/input/ReformsHtmlInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <textarea ref="input"></textarea>
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | import ReformsInputMixin from "../ReformsInputMixin";
 8 | import {mergeClasses} from "../Util";
 9 | const Jodit = require('jodit').Jodit;
10 | import 'jodit/build/jodit.css';
11 | import _ from 'lodash';
12 | import {watch, toRef} from 'vue';
13 | 
14 | export default {
15 |   name: "ReformsHtmlInput",
16 |   inheritAttrs: false,
17 |   mixins: [ReformsInputMixin],
18 |   emits: ['update:modelValue'],
19 |   props: {
20 |     modelValue: {
21 |       type: String,
22 |       default: '',
23 |     },
24 |     readonly: Boolean,
25 |     placeholder: String,
26 |     tabindex: String,
27 |     autocomplete: String,
28 |     config: {
29 |       type: Object,
30 |       default: {},
31 |     }
32 |   },
33 |   computed: {
34 |     classes() {
35 |       return mergeClasses(this.inputClass, {
36 |         'is-valid': this.isValid === true,
37 |         'is-invalid': this.isValid === false,
38 |       });
39 |     },
40 |   },
41 |   data() {
42 |     return {
43 |       editor: null,
44 |       watcher: null,
45 |       content: '',
46 |     };
47 |   },
48 |   mounted() {
49 |     this.editor = new Jodit(this.$refs.input);
50 | 
51 |     this.watcher = watch(toRef(this.$props, 'modelValue'), (modelValue) => {
52 |       if (this.editor.value !== modelValue) {
53 |         this.editor.value = (modelValue ? String(modelValue) : '');
54 |       }
55 |     }, {immediate: true});
56 | 
57 |     this.editor.events.on('change', newValue => {
58 |       this.$emit('update:modelValue', newValue);
59 |     });
60 |   },
61 |   beforeUnmount() {
62 |     this.watcher();
63 |     this.editor.destruct();
64 |   }
65 | }
66 | </script>
67 | <style scoped>
68 | .reforms-input > div {
69 |   min-height: 100px;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/ReformsSchema.js:
--------------------------------------------------------------------------------
 1 | import {h, toRefs, reactive} from 'vue';
 2 | import _ from 'lodash';
 3 | import ReformsInput from "./ReformsInput.vue";
 4 | import ReformsOutput from "./ReformsOutput.vue";
 5 | 
 6 | function renderTree(schema, component, output, prevName) {
 7 |     let ret = [];
 8 | 
 9 |     for (const key of Object.keys(schema)) {
10 |         if (!_.isString(schema[key].type)) {
11 |             console.warn('Invalid parameter `type` in schema field: ' + key);
12 |             continue;
13 |         }
14 | 
15 |         const attrs = _.isObject(schema[key].attrs) ? schema[key].attrs : {};
16 | 
17 |         let props = reactive({
18 |             ...toRefs(component.$attrs),
19 |             ...attrs,
20 |             type: schema[key].type,
21 |             name: !prevName ? key : (prevName + '[' + key + ']'),
22 |             value: component.value && component.value[key] ? component.value[key] : null,
23 |         });
24 | 
25 |         if (!output) {
26 |             if (!(!_.isFunction(schema[key].showIf)
27 |                 || (_.isFunction(schema[key].showIf)
28 |                     && schema[key].showIf(component.$parent.container)))) {
29 |                 props.shown = false;
30 |             }
31 |         }
32 | 
33 |         ret.push(h(output ? ReformsOutput : ReformsInput, props, _.isObject(schema[key].children)
34 |             ? (() => renderTree(schema[key].children, component, output, props.name))
35 |             : undefined));
36 |     }
37 | 
38 |     return ret;
39 | }
40 | 
41 | 
42 | export default {
43 |     name: 'ReformsSchema',
44 |     props: {
45 |         schema: {
46 |             type: Object,
47 |             default: null,
48 |         },
49 |         outputMode: Boolean,
50 |         value: {
51 |             type: Object,
52 |             default: {},
53 |         }
54 |     },
55 |     render() {
56 |         if (!this.schema) {
57 |             return;
58 |         }
59 | 
60 |         return renderTree(this.schema, this, this.outputMode);
61 |     }
62 | };
63 | 


--------------------------------------------------------------------------------
/src/input/ReformsDateInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <input type="text" class="form-control reforms-date-input" @input="onInput" :class="classes" ref="input">
 4 |   </div>
 5 | </template>
 6 | <script>
 7 | import ReformsInputMixin from "../ReformsInputMixin";
 8 | import {mergeClasses, modelValue} from "../Util";
 9 | import flatpickr from 'flatpickr';
10 | import 'flatpickr/dist/flatpickr.min.css';
11 | import {watch, toRef} from 'vue';
12 | import _ from 'lodash';
13 | 
14 | export default {
15 |   name: "ReformsDateInput",
16 |   inheritAttrs: false,
17 |   mixins: [ReformsInputMixin],
18 |   emits: ['update:modelValue'],
19 |   props: {
20 |     modelValue: {
21 |       default: '',
22 |     },
23 |     readonly: Boolean,
24 |     placeholder: String,
25 |     tabindex: String,
26 |     autocomplete: String,
27 |     config: {
28 |       type: Object,
29 |       default: {},
30 |     }
31 |   },
32 |   computed: {
33 |     classes() {
34 |       return mergeClasses(this.inputClass, {
35 |         'is-valid': this.isValid === true,
36 |         'is-invalid': this.isValid === false,
37 |       });
38 |     },
39 |   },
40 |   data() {
41 |     return {
42 |       instance: null,
43 |       watcher: null,
44 |     };
45 |   },
46 |   mounted() {
47 | 
48 | 
49 | 
50 |     if (_.isString(this.config.locale)) {
51 |       this.config.locale = require('flatpickr/dist/l10n/' + this.config.locale + '.js').default[this.config.locale];
52 |     }
53 | 
54 |     this.instance = flatpickr(this.$refs.input, this.config);
55 | 
56 |     this.watcher = watch(toRef(this.$props, 'modelValue'), (value) => {
57 |       this.instance.setDate(value);
58 |     }, {immediate: true, deep: true,});
59 |   },
60 |   beforeUnmount() {
61 |     this.instance && this.instance.destroy();
62 |     this.watcher();
63 |   },
64 |   methods: {
65 |     onInput(e) {
66 |       this.$emit('update:modelValue', e.target.value);
67 |     }
68 |   }
69 | }
70 | </script>
71 | <style>
72 | .reforms-date-input {
73 |   background-color: #fff !important;
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/output/ReformsFileOutput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-file-output">
 3 |     <template v-if="value && value.name && value.url">
 4 |       <div class="card">
 5 |         <div class="card-body">
 6 |           <div class="row align-items-center">
 7 |             <div class="col-auto">
 8 |               <template v-if="value.name && isImage(value.name)">
 9 |                 <a :href="value.url" target="_blank">
10 |                   <img alt="Image" :src="value.previewUrl || value.url" style="width: 50px; height: 50px;">
11 |                 </a>
12 |               </template>
13 |               <template v-else>
14 |                 <div class="card">
15 |                   <div class="card-body">
16 |                     <div class="row align-items-center justify-content-center" style="width: 50px; height: 50px;">
17 |                       <div class="col-auto">
18 |                         ...
19 |                       </div>
20 |                     </div>
21 |                   </div>
22 |                 </div>
23 |               </template>
24 |             </div>
25 |             <div class="col">
26 |               <p>
27 |                 {{ value.name }}
28 |               </p>
29 |               <p class="text-muted" style="font-size: 12px;" v-if="value.size">
30 |                 {{ fileSize(value.size) }}
31 |               </p>
32 |             </div>
33 |             <div class="col-auto">
34 |               <div class="row">
35 |                 <div class="col">
36 |                   <a :href="value.url" download target="_blank" class="btn btn-sm btn-info">
37 |                     &darr;
38 |                   </a>
39 |                 </div>
40 |               </div>
41 |             </div>
42 |           </div>
43 |         </div>
44 |       </div>
45 |     </template>
46 |   </div>
47 | </template>
48 | <script>
49 | 
50 | import ReformsFileMixin from "../ReformsFileMixin";
51 | 
52 | export default {
53 |   name: "ReformsFileOutput",
54 |   mixins: [ReformsFileMixin],
55 |   props: {
56 |     value: {
57 |       type: Object,
58 |       default: null,
59 |     }
60 |   },
61 | };
62 | </script>
63 | 


--------------------------------------------------------------------------------
/src/input/ReformsPasswordInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="reforms-input">
 3 |     <input type="password"
 4 |            :name="name"
 5 |            :placeholder="placeholder"
 6 |            :readonly="readonly"
 7 |            :id="id"
 8 |            class="form-control"
 9 |            :class="classes"
10 |            ref="input"
11 |            :tabindex="tabindex"
12 |            v-model="inputValue">
13 |     <div class="reforms-password-strength" v-if="passwordStrength">
14 |       <div class="progress">
15 |         <div class="progress-bar"
16 |              :class="{'bg-danger': strength === 1 || strength === 0, 'bg-warning': strength === 2, 'bg-info': strength === 3, 'bg-success': strength === 4,}"
17 |              :style="{width: (strength / 4 * 100) + '%'}"></div>
18 |       </div>
19 |     </div>
20 |   </div>
21 | </template>
22 | <script>
23 | import ReformsInputMixin from "../ReformsInputMixin";
24 | import {mergeClasses, modelValue, passwordStrengthEstimate} from "../Util";
25 | 
26 | export default {
27 |   name: "ReformsPasswordInput",
28 |   inheritAttrs: false,
29 |   mixins: [ReformsInputMixin],
30 |   emits: ['update:modelValue'],
31 |   props: {
32 |     modelValue: {
33 |       type: String,
34 |       default: '',
35 |     },
36 |     readonly: Boolean,
37 |     placeholder: String,
38 |     tabindex: String,
39 |     strengthEstimation: {
40 |       type: Function,
41 |       default: passwordStrengthEstimate,
42 |     },
43 |     passwordStrength: Boolean,
44 |   },
45 |   computed: {
46 |     inputValue: modelValue(),
47 |     classes() {
48 |       return mergeClasses(this.inputClass, {
49 |         'is-valid': this.isValid === true,
50 |         'is-invalid': this.isValid === false,
51 |       });
52 |     },
53 |     strength() {
54 |       const val = String(this.modelValue);
55 | 
56 |       return Math.min(4, Math.max(val.length > 0 ? 1 : 0,
57 |           Math.round(this.strengthEstimation(val))));
58 |     },
59 |   },
60 | }
61 | </script>
62 | <style>
63 | .reforms-password-strength {
64 |   margin-top: 5px;
65 | }
66 | 
67 | .reforms-password-strength > .progress {
68 |     height: 5px;
69 | }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/Reforms.js:
--------------------------------------------------------------------------------
 1 | import _ from 'lodash';
 2 | import ReformsInput from "./ReformsInput.vue";
 3 | import ReformsOutput from "./ReformsOutput.vue";
 4 | import ReformsForm from "./ReformsForm.vue";
 5 | import ReformsCard from "./ReformsCard.vue";
 6 | import ReformsTypes from "./ReformsTypes";
 7 | import ReformsValidators from './ReformsValidators';
 8 | 
 9 | // Plugin main initializer
10 | export default {
11 |     /**
12 |      * Initialize reforms vue plugin
13 |      *
14 |      * @param {Object} app
15 |      * @param {Object?} options
16 |      */
17 |     install(app, options) {
18 |         let types = {};
19 | 
20 |         Object.keys(ReformsTypes).forEach((key) => {
21 |             types[key] = {
22 |                 input: ReformsTypes[key].input ? ReformsTypes[key].input.name : null,
23 |                 output: ReformsTypes[key].output ? ReformsTypes[key].output.name : null,
24 |             };
25 |         });
26 | 
27 |         const $reforms = {
28 |             types: types,
29 |             validators: ReformsValidators,
30 |         };
31 | 
32 | 
33 |         if (_.isObject(options) && _.isObject(options.types)) {
34 |             options.types.keys().forEach((k) => !void($reforms.types[k] = options.types[k]));
35 |         }
36 | 
37 |         let registeredInputs = [];
38 |         let registeredOutputs = [];
39 | 
40 |         for (const v of Object.values(ReformsTypes)) {
41 |             if (v.input && registeredInputs.indexOf(v.input) === -1) {
42 |                 app.component(v.input.name, v.input);
43 |                 registeredInputs.push(v.input);
44 |             }
45 | 
46 |             if (v.output && registeredOutputs.indexOf(v.output) === -1) {
47 |                 app.component(v.output.name, v.output);
48 |                 registeredOutputs.push(v.output);
49 |             }
50 |         }
51 | 
52 |         // Register system properties and components
53 |         app.config.globalProperties.$reforms = $reforms;
54 | 
55 |         app.component(ReformsInput.name, ReformsInput);
56 |         app.component(ReformsForm.name, ReformsForm);
57 |         app.component(ReformsOutput.name, ReformsOutput);
58 |         app.component(ReformsCard.name, ReformsCard);
59 |     },
60 | }
61 | 


--------------------------------------------------------------------------------
/examples/ExamplesIndex.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <header class="pt-4 mb-4">
 4 |       <nav class="navbar navbar-expand-lg navbar-dark bg-success">
 5 |         <div class="container-fluid">
 6 |           <a class="navbar-brand" href="javascript:void(0);">
 7 |             R E F O R M S
 8 |           </a>
 9 |           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
10 |             <span class="navbar-toggler-icon"></span>
11 |           </button>
12 |           <div class="collapse navbar-collapse" id="navbarSupportedContent">
13 |             <ul class="navbar-nav me-auto mb-2 mb-lg-0">
14 |               <li class="nav-item">
15 |                 <a class="nav-link" href="#">
16 |                   INPUTS / OUTPUTS
17 |                 </a>
18 |               </li>
19 |               <li class="nav-item">
20 |                 <a class="nav-link" href="#">
21 |                   FORMS
22 |                 </a>
23 |               </li>
24 |               <li class="nav-item">
25 |                 <a class="nav-link" href="#">
26 |                   CARDS
27 |                 </a>
28 |               </li>
29 |             </ul>
30 |           </div>
31 |         </div>
32 |       </nav>
33 |     </header>
34 |     <main class="mb-2">
35 |       <div class="row mb-2">
36 |         <div class="col-12">
37 |           <h4 class="text-center">
38 |             INPUTS / OUTPUTS
39 |           </h4>
40 | 
41 |           <div class="card mt-4">
42 |             <div class="card-body">
43 |               <inputs-outputs />
44 |             </div>
45 |           </div>
46 |         </div>
47 |       </div>
48 |     </main>
49 |     <footer>
50 |       <div class="row text-muted">
51 |         <div class="col-6">
52 |           Copyright &copy; 2021 EMPLA GROUP, LLP
53 |         </div>
54 |         <div class="col-6 text-end">
55 |           v{{ version }}
56 |         </div>
57 |       </div>
58 |     </footer>
59 |   </div>
60 | </template>
61 | <script>
62 | import InputsOutputs from "./InputsOutputs";
63 | import pkg from '../package.json'
64 | import ReformsInput from "../src/ReformsInput";
65 | export default {
66 |   name: "ExampleIndex",
67 |   components: {ReformsInput, InputsOutputs},
68 |   data() {
69 |     return {
70 |       version: pkg.version,
71 |     }
72 |   }
73 | };
74 | </script>
75 | 


--------------------------------------------------------------------------------
/src/ReformsForm.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form v-bind="$attrs" @submit="onSubmit">
 3 |     <reforms-schema v-bind="$attrs" :schema="schema" />
 4 |     <slot v-bind="$attrs"></slot>
 5 |     <div class="row">
 6 |       <div class="col">
 7 |         <div class="spinner-border spinner-border-sm text-info" role="status" v-if="formLoadingMode">
 8 |           <span class="visually-hidden">Loading...</span>
 9 |         </div>
10 |       </div>
11 |     </div>
12 |   </form>
13 | </template>
14 | <script>
15 | import {toRef, watch} from 'vue';
16 | import ReformsContainerMixin from "./ReformsContainerMixin";
17 | import ReformsSchema from "./ReformsSchema";
18 | 
19 | export default {
20 |   name: 'ReformsForm',
21 |   inheritAttrs: false,
22 |   components: {ReformsSchema},
23 |   mixins: [ReformsContainerMixin],
24 |   emits: ['update:modelValue', 'beforeValidate', 'validated', 'validateFailed', 'validateSuccess', 'submit'],
25 |   props: {
26 |     modelValue: {
27 |       default: {},
28 |     },
29 |     schema: {
30 |       type: Object,
31 |       default: null,
32 |     },
33 |     validationResult: {
34 |       type: Object,
35 |       default: {},
36 |     },
37 |     needValidation: {
38 |       type: Boolean,
39 |       default: true,
40 |     }
41 |   },
42 |   data() {
43 |     return {
44 |       formLoadingMode: false,
45 |     };
46 |   },
47 |   created() {
48 |     const containerRef = toRef(this.$data, 'container');
49 | 
50 |     watch(containerRef, (container) => {
51 |       this.$emit('update:modelValue', container);
52 |     }, {deep: true});
53 |   },
54 |   methods: {
55 |     onSubmit(e) {
56 |       if (this.formLoadingMode) {
57 |         e.preventDefault();
58 |         return;
59 |       }
60 | 
61 |       if (this.needValidation) {
62 |         this.$emit('beforeValidate', e);
63 | 
64 |         // validate all
65 |         const result = this.validate();
66 | 
67 |         // emit events
68 |         if (!result) {
69 |           e.preventDefault();
70 |         }
71 | 
72 |         this.$emit(result ? 'validateSuccess' : 'validateFailed', e);
73 |         this.$emit('validated', e);
74 | 
75 |         if (result) {
76 |           this.$emit('submit', e);
77 |         }
78 |       } else {
79 |         this.$emit('submit', e);
80 |       }
81 |     },
82 |     validate() {
83 |       let result = true;
84 |       Object.keys(this.containerInputs).forEach( (name) => {
85 |         result = this.containerInputs[name].validate() && result;
86 |       });
87 | 
88 |       return result;
89 |     }
90 |   }
91 | };
92 | </script>
93 | 


--------------------------------------------------------------------------------
/src/ReformsOutput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="reforms-output-container row mb-2" v-show="shown">
  3 |     <reforms-label v-bind="$attrs" />
  4 |     <div class="col">
  5 |       <div class="row align-items-center mb-2" v-for="(output, i) in outputs">
  6 |         <div class="col">
  7 |           <component :is="outputComponent" v-bind="$attrs" :value="outputs[i]">
  8 |             <slot></slot>
  9 |           </component>
 10 |         </div>
 11 |       </div>
 12 |     </div>
 13 |   </div>
 14 | </template>
 15 | <script>
 16 | import {watch, toRef} from 'vue';
 17 | import _ from 'lodash';
 18 | import ReformsLabel from "./ReformsLabel.vue";
 19 | 
 20 | export default {
 21 |   name: "ReformsOutput",
 22 |   components: {
 23 |     ReformsLabel,
 24 |   },
 25 |   props: {
 26 |     type: {
 27 |       type: String,
 28 |       default: 'string',
 29 |     },
 30 |     value: null,
 31 |     shown: {
 32 |       type: Boolean,
 33 |       default: true,
 34 |     },
 35 |     name: String,
 36 |     multiple: Boolean,
 37 |   },
 38 |   data() {
 39 |     return {
 40 |       outputComponent: (() => {
 41 |         if (this.$reforms.types[this.type]) {
 42 |           return this.$reforms.types[this.type].output;
 43 |         } else {
 44 |           throw new Error('Undefined output type "' + this.type + '".');
 45 |         }
 46 |       })(),
 47 |       outputs: [],
 48 |       outputValue: null,
 49 |     };
 50 |   },
 51 |   created() {
 52 |     watch([toRef(this.$props, 'value'), toRef(this.$data, 'outputValue')], ([value1, value2]) => {
 53 |       let value = value1;
 54 | 
 55 |       if (value === null || value === undefined) {
 56 |         value = value2;
 57 |       }
 58 | 
 59 |       this.outputs.splice(0, this.outputs.length);
 60 | 
 61 |       if (this.multiple && _.isArray(value)) {
 62 |         value.forEach((v) => {
 63 |           this.outputs.push(v);
 64 |         });
 65 |       } else {
 66 |         this.outputs.push(value);
 67 |       }
 68 |     }, {deep: true, immediate: true});
 69 |   },
 70 |   mounted() {
 71 |     const p = this.findParentContainer();
 72 | 
 73 |     if (!p) {
 74 |       return;
 75 |     }
 76 | 
 77 |     p.registerOutput(this);
 78 |   },
 79 |   beforeUnmount() {
 80 |     const p = this.findParentContainer();
 81 | 
 82 |     if (!p) {
 83 |       return;
 84 |     }
 85 | 
 86 |     p.unregisterOutput(this);
 87 |   },
 88 |   methods: {
 89 |     findParentContainer() {
 90 |       let p = this.$parent;
 91 | 
 92 |       while (p && !_.isFunction(p.registerOutput)) {
 93 |         p = p.$parent;
 94 |       }
 95 | 
 96 |       return p;
 97 |     },
 98 |     setValue(value) {
 99 |       this.outputValue = value;
100 |     }
101 |   }
102 | };
103 | </script>
104 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | <div align="center">
  3 | <img src="./content/reforms.png" width="200" alt="Reforms.js">
  4 | 
  5 | # Reforms.js
  6 | 
  7 | Vue 3 and Bootstrap 5 forms and cards generator
  8 | 
  9 | ---
 10 | 
 11 | [![Build](https://github.com/empla/reforms/actions/workflows/build.yml/badge.svg)](https://github.com/empla/reforms/actions/workflows/build.yml)
 12 | ![GitHub](https://img.shields.io/github/license/empla/reforms)
 13 | ![npm](https://img.shields.io/npm/v/@empla/reforms)
 14 | ![npm](https://img.shields.io/npm/dt/@empla/reforms)
 15 | ![GitHub Repo stars](https://img.shields.io/github/stars/empla/reforms?style=social)
 16 | 
 17 | ---
 18 | 
 19 | </div>
 20 | 
 21 | ## Features
 22 | 
 23 | - Info cards
 24 | - Forms
 25 | - 15+ inputs types and output types
 26 | - Forms schemas
 27 | - Plugin system
 28 | - Internationalization
 29 | - Input & Output groups
 30 | - Form validation
 31 | - Server side validation
 32 | - Multiple and sortable fields
 33 | 
 34 | # Demo
 35 | 
 36 | You can [try it online](https://codesandbox.io/s/reforms-demo-jbpyv) 
 37 | 
 38 | 
 39 | ## Installation
 40 | 
 41 | ```sh
 42 | # Install before
 43 | npm i vue@next bootstrap@next
 44 | 
 45 | # Install reforms
 46 | npm i @empla/reforms
 47 | ```
 48 | 
 49 | ## Example
 50 | 
 51 | ### Example with markup
 52 | 
 53 | ```vue
 54 | <reforms-form>
 55 |   <reforms-input type="string" name="firstname" label="First Name" validation="required|string" />
 56 |   <reforms-input type="string" name="lastname" label="Last Name" validation="required|string" />
 57 |   <reforms-input type="html" name="notes" label="Notes" />
 58 |   <button type="submit" class="btn btn-success">
 59 |     Submit
 60 |   </button>
 61 | </reforms-form>
 62 | ```
 63 | 
 64 | It creates form:
 65 | 
 66 | ![Form](content/form1.png)
 67 | 
 68 | ### Example with schema
 69 | 
 70 | You can create form with schema:
 71 | 
 72 | ```js
 73 | const schema = {
 74 |     firstname: {
 75 |       type: 'string',
 76 |       attrs: {
 77 |         validation: 'required',
 78 |         label: 'First name'
 79 |       }
 80 |     },
 81 |     lastname: {
 82 |       type: 'string',
 83 |       attrs: {
 84 |         validation: 'required',
 85 |         label: 'Last name'
 86 |       }
 87 |     },
 88 |     notes: {
 89 |       type: 'html',
 90 |       attrs: {
 91 |         label: 'Notes',
 92 |       }
 93 |     }
 94 | };
 95 | ```
 96 | 
 97 | And pass it to form:
 98 | 
 99 | ```vue
100 | <reforms-form :schema="schema">
101 |   <button type="submit" class="btn btn-success">
102 |     Submit
103 |   </button>
104 | </reforms-form>
105 | ```
106 | 
107 | ## Documentation
108 | 
109 | https://reforms.js.org/documentation/
110 | 
111 | ## License
112 | 
113 | [MIT](LICENSE)
114 | 
115 | ---
116 | 
117 | Copyright &copy; 2021 EMPLA GROUP, LLP
118 | 
119 | Made with ❤️ 
120 | by [Malik Zharykov](https://github.com/malikzh)️
121 | 


--------------------------------------------------------------------------------
/src/ReformsContainerMixin.js:
--------------------------------------------------------------------------------
 1 | import {toRef, watch} from 'vue';
 2 | import _ from 'lodash';
 3 | 
 4 | export default {
 5 |     data() {
 6 |         return {
 7 |             containerInputs: {},
 8 |             container: {},
 9 |             containerWatchers: {},
10 |             containerListeners: {},
11 |         };
12 |     },
13 |     methods: {
14 |         registerInput(input) {
15 |             if (!this.container) {
16 |                 this.container = {};
17 |             }
18 | 
19 |             this.containerListeners[input.name] = {
20 |                 modelValue: (modelValue) => {
21 |                     if (!input.$props.shown) {
22 |                         this.container[input.name] = undefined;
23 |                         return
24 |                     }
25 | 
26 |                     this.container[input.name] = modelValue;
27 |                 },
28 |                 shown: (shown) => {
29 |                     if (!shown) {
30 |                         this.container[input.name] = undefined;
31 |                     } else {
32 |                         input.updateValues();
33 |                     }
34 |                 },
35 |             }
36 | 
37 |             input.events.on('out:modelValue', this.containerListeners[input.name].modelValue);
38 |             input.events.on('out:shown', this.containerListeners[input.name].shown);
39 | 
40 |             this.containerWatchers[input.name] = {
41 |                 containerWatch: watch(toRef(this.container, input.name), (value) => {
42 |                     if (!input.$props.shown) {
43 |                         return;
44 |                     }
45 | 
46 |                     input.events.emit('in:modelValue', value);
47 |                 }, {deep: true, immediate: true}),
48 |                 validationWatch: watch(toRef(this.$props, 'validationResult'), (validationResult) => {
49 |                     if (_.isArray(validationResult[input.name])) {
50 |                         input.inputValidation = validationResult[input.name];
51 |                     }
52 |                 }, {deep: true, immediate: true}),
53 |                 validatorsWatch: watch(toRef(this.$props, 'validation'), (validation) => {
54 |                     if (_.isArray(validation)) {
55 |                         input.validators = validation;
56 |                     }
57 |                 }, {deep: true, immediate: true}),
58 |             };
59 | 
60 |             this.containerInputs[input.name] = input;
61 |         },
62 |         unregisterInput(name) {
63 |             if (!this.container[name]) {
64 |                 return;
65 |             }
66 | 
67 |             this.container[name] = undefined;
68 |             this.containerWatchers[name].containerWatch();
69 |             this.containerWatchers[name].validationWatch();
70 |             this.containerWatchers[name].validatorsWatch();
71 |             this.containerWatchers[name] = undefined;
72 |             this.containerInputs[name].events.off('out:modelValue', this.containerListeners[name].modelValue);
73 |             this.containerInputs[name].events.off('out:shown', this.containerListeners[name].shown);
74 |             this.containerInputs[name] = undefined;
75 |             this.containerListeners[name] = undefined;
76 |         }
77 |     },
78 | };
79 | 


--------------------------------------------------------------------------------
/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@empla.group. 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 | 


--------------------------------------------------------------------------------
/src/ReformsTypes.js:
--------------------------------------------------------------------------------
  1 | import ReformsStringInput from "./input/ReformsStringInput.vue";
  2 | import ReformsStringOutput from "./output/ReformsStringOutput.vue";
  3 | import ReformsGroupInput from "./input/ReformsGroupInput.vue";
  4 | import ReformsGroupOutput from './output/ReformsGroupOutput.vue';
  5 | import ReformsNumberInput from "./input/ReformsNumberInput.vue";
  6 | import ReformsTextInput from "./input/ReformsTextInput.vue";
  7 | import ReformsEmailInput from "./input/ReformsEmailInput.vue";
  8 | import ReformsEmailOutput from "./output/ReformsEmailOutput.vue";
  9 | import ReformsTelInput from "./input/ReformsTelInput.vue";
 10 | import ReformsTelOutput from "./output/ReformsTelOutput.vue";
 11 | import ReformsUrlInput from "./input/ReformsUrlInput.vue";
 12 | import ReformsUrlOutput from "./output/ReformsUrlOutput.vue";
 13 | import ReformsHiddenInput from "./input/ReformsHiddenInput.vue";
 14 | import ReformsHiddenOutput from "./output/ReformsHiddenOutput.vue";
 15 | import ReformsRadioInput from "./input/ReformsRadioInput.vue";
 16 | import ReformsRadioOutput from "./output/ReformsRadioOutput.vue";
 17 | import ReformsCheckboxInput from "./input/ReformsCheckboxInput.vue";
 18 | import ReformsCheckboxOutput from "./output/ReformsCheckboxOutput.vue";
 19 | import ReformsBooleanInput from "./input/ReformsBooleanInput.vue";
 20 | import ReformsBooleanOutput from "./output/ReformsBooleanOutput.vue";
 21 | import ReformsSelectInput from "./input/ReformsSelectInput.vue";
 22 | import ReformsSelectOutput from "./output/ReformsSelectOutput.vue";
 23 | import ReformsDateInput from "./input/ReformsDateInput.vue";
 24 | import ReformsHtmlInput from "./input/ReformsHtmlInput.vue";
 25 | import ReformsHtmlOutput from "./output/ReformsHtmlOutput.vue";
 26 | import ReformsFileInput from "./input/ReformsFileInput.vue";
 27 | import ReformsFileOutput from "./output/ReformsFileOutput.vue";
 28 | import ReformsPasswordInput from "./input/ReformsPasswordInput.vue";
 29 | import ReformsPasswordOutput from "./output/ReformsPasswordOutput.vue";
 30 | 
 31 | //
 32 | // Reforms default components
 33 | //
 34 | export default {
 35 |     'group': {
 36 |         input: ReformsGroupInput,
 37 |         output: ReformsGroupOutput,
 38 |     },
 39 |     'string': {
 40 |         input: ReformsStringInput,
 41 |         output: ReformsStringOutput,
 42 |     },
 43 |     'number': {
 44 |         input: ReformsNumberInput,
 45 |         output: ReformsStringOutput,
 46 |     },
 47 |     'text': {
 48 |         input: ReformsTextInput,
 49 |         output: ReformsStringOutput,
 50 |     },
 51 |     'email': {
 52 |         input: ReformsEmailInput,
 53 |         output: ReformsEmailOutput,
 54 |     },
 55 |     'tel': {
 56 |         input: ReformsTelInput,
 57 |         output: ReformsTelOutput,
 58 |     },
 59 |     'url': {
 60 |         input: ReformsUrlInput,
 61 |         output: ReformsUrlOutput,
 62 |     },
 63 |     'hidden': {
 64 |         input: ReformsHiddenInput,
 65 |         output: ReformsHiddenOutput,
 66 |     },
 67 |     'radio': {
 68 |         input: ReformsRadioInput,
 69 |         output: ReformsRadioOutput,
 70 |     },
 71 |     'checkbox': {
 72 |         input: ReformsCheckboxInput,
 73 |         output: ReformsCheckboxOutput,
 74 |     },
 75 |     'bool': {
 76 |         input: ReformsBooleanInput,
 77 |         output: ReformsBooleanOutput,
 78 |     },
 79 |     'select': {
 80 |         input: ReformsSelectInput,
 81 |         output: ReformsSelectOutput,
 82 |     },
 83 |     'datetime': {
 84 |         input: ReformsDateInput,
 85 |         output: ReformsStringOutput,
 86 |     },
 87 |     'html': {
 88 |         input: ReformsHtmlInput,
 89 |         output: ReformsHtmlOutput,
 90 |     },
 91 |     'file': {
 92 |         input: ReformsFileInput,
 93 |         output: ReformsFileOutput,
 94 |     },
 95 |     'password': {
 96 |         input: ReformsPasswordInput,
 97 |         output: ReformsPasswordOutput,
 98 |     },
 99 | };
100 | 


--------------------------------------------------------------------------------
/src/validator/StringValidator.js:
--------------------------------------------------------------------------------
 1 | import _ from 'lodash';
 2 | import {createValidator, createMatcher} from "../Util";
 3 | 
 4 | export default {
 5 |     string: createValidator(createMatcher((v) => _.isString(v),
 6 |         'must_be_string'), 'string', true),
 7 |     email: createValidator(createMatcher(
 8 |         /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/gi,
 9 |         'must_be_email'), 'email', true),
10 |     url: createValidator(createMatcher(
11 |         /^(https?):\/\/(-\.)?([^\s\/?\.#-]+\.?)+(\/[^\s]*)?$/gi,
12 |         'must_be_url'), 'url', true),
13 |     alpha: createValidator(createMatcher(
14 |         /^[a-z]+$/gi,
15 |         'not_alpha',
16 |     ), 'alpha', true),
17 |     alphanum: createValidator(createMatcher(/^[a-z0-9]+$/gi,'not_alphanum'), 'alpha', true),
18 |     'in': createValidator(createMatcher(
19 |         (value, params, lang, langParams) => {
20 |             langParams['values'] = params.options.join(', ');
21 |             return !_.isArray(params.options) || params.options.includes(value);
22 |         },
23 |         'must_be_in'), 'in', true),
24 |     not_in: createValidator(createMatcher(
25 |         (value, params, lang, langParams) => {
26 |             langParams['values'] = params.options.join(', ');
27 |             return !_.isArray(params.options) || !params.options.includes(value);
28 |         },
29 |         'must_not_be_in'), 'in', true),
30 |     regex: createValidator(createMatcher((value, params) =>
31 |         !_.isArray(params.options) || params.options.length < 1 || Boolean(String(value).match(new RegExp(params.options[0], params.options.length > 1 ? params.options[1] : undefined))), 'not_match'), 'regex', true),
32 |     starts_with: createValidator(createMatcher((value, params, lang, langParams) => {
33 |         langParams['value'] = _.isArray(params.options) && params.options.length > 0 ? params.options[0] : '';
34 | 
35 |         return !_.isArray(params.options) || params.options.length < 1 || String(value).startsWith(params.options[0]);
36 |         },
37 |         'not_starts'
38 |     ), 'starts_with', true),
39 |     ends_with: createValidator(createMatcher((value, params, lang, langParams) => {
40 |             langParams['value'] = _.isArray(params.options) && params.options.length > 0 ? params.options[0] : '';
41 | 
42 |             return !_.isArray(params.options) || params.options.length < 1 || String(value).endsWith(params.options[0]);
43 |         },
44 |         'not_ends'
45 |     ), 'ends_with', true),
46 |     contains: createValidator(createMatcher((value, params, lang, langParams) => {
47 |             langParams['value'] = _.isArray(params.options) && params.options.length > 0 ? params.options[0] : '';
48 | 
49 |             return !_.isArray(params.options) || params.options.length < 1 || String(value).includes(params.options[0]);
50 |         },
51 |         'not_contains'
52 |     ), 'contains', true),
53 |     confirmation: createValidator(createMatcher((value, params, lang) => {
54 |         if (!_.isArray(params.options) || params.options.length < 1) {
55 |             return true;
56 |         }
57 | 
58 | 
59 |         const values = (params.form && params.form.container) || {};
60 |         const valid = values[params.options[0]] === value;
61 | 
62 | 
63 |         (params.form && params.form.containerInputs && params.form.containerInputs[params.options[0]] && (() => {
64 |             const input = params.form.containerInputs[params.options[0]];
65 | 
66 |             if (valid) {
67 |                 input.inputValidation = [
68 |                     {
69 |                         isValid: true,
70 |                         messages: [],
71 |                     }
72 |                 ];
73 |             } else {
74 |                 input.inputValidation = [
75 |                     {
76 |                         isValid: false,
77 |                         messages: [
78 |                             lang['not_confirmed'],
79 |                         ],
80 |                     }
81 |                 ];
82 |             }
83 |         })());
84 | 
85 |         return valid;
86 |     }, 'not_confirmed'), 'confirmation', true),
87 | };
88 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | When contributing to this repository, please first discuss the change you wish to make via issue,
 4 | email, or any other method with the owners of this repository before making a change. 
 5 | 
 6 | Please note we have a code of conduct, please follow it in all your interactions with the project.
 7 | 
 8 | ## Pull Request Process
 9 | 
10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 
11 |    build.
12 | 2. Update the README.md with details of changes to the interface, this includes new environment 
13 |    variables, exposed ports, useful file locations and container parameters.
14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this
15 |    Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 
17 |    do not have permission to do that, you may request the second reviewer to merge it for you.
18 | 
19 | ## Code of Conduct
20 | 
21 | ### Our Pledge
22 | 
23 | In the interest of fostering an open and welcoming environment, we as
24 | contributors and maintainers pledge to making participation in our project and
25 | our community a harassment-free experience for everyone, regardless of age, body
26 | size, disability, ethnicity, gender identity and expression, level of experience,
27 | nationality, personal appearance, race, religion, or sexual identity and
28 | orientation.
29 | 
30 | ### Our Standards
31 | 
32 | Examples of behavior that contributes to creating a positive environment
33 | include:
34 | 
35 | * Using welcoming and inclusive language
36 | * Being respectful of differing viewpoints and experiences
37 | * Gracefully accepting constructive criticism
38 | * Focusing on what is best for the community
39 | * Showing empathy towards other community members
40 | 
41 | Examples of unacceptable behavior by participants include:
42 | 
43 | * The use of sexualized language or imagery and unwelcome sexual attention or
44 | advances
45 | * Trolling, insulting/derogatory comments, and personal or political attacks
46 | * Public or private harassment
47 | * Publishing others' private information, such as a physical or electronic
48 |   address, without explicit permission
49 | * Other conduct which could reasonably be considered inappropriate in a
50 |   professional setting
51 | 
52 | ### Our Responsibilities
53 | 
54 | Project maintainers are responsible for clarifying the standards of acceptable
55 | behavior and are expected to take appropriate and fair corrective action in
56 | response to any instances of unacceptable behavior.
57 | 
58 | Project maintainers have the right and responsibility to remove, edit, or
59 | reject comments, commits, code, wiki edits, issues, and other contributions
60 | that are not aligned to this Code of Conduct, or to ban temporarily or
61 | permanently any contributor for other behaviors that they deem inappropriate,
62 | threatening, offensive, or harmful.
63 | 
64 | ### Scope
65 | 
66 | This Code of Conduct applies both within project spaces and in public spaces
67 | when an individual is representing the project or its community. Examples of
68 | representing a project or community include using an official project e-mail
69 | address, posting via an official social media account, or acting as an appointed
70 | representative at an online or offline event. Representation of a project may be
71 | further defined and clarified by project maintainers.
72 | 
73 | ### Enforcement
74 | 
75 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
76 | reported by contacting the project team at [INSERT EMAIL ADDRESS]. All
77 | complaints will be reviewed and investigated and will result in a response that
78 | is deemed necessary and appropriate to the circumstances. The project team is
79 | obligated to maintain confidentiality with regard to the reporter of an incident.
80 | Further details of specific enforcement policies may be posted separately.
81 | 
82 | Project maintainers who do not follow or enforce the Code of Conduct in good
83 | faith may face temporary or permanent repercussions as determined by other
84 | members of the project's leadership.
85 | 
86 | ### Attribution
87 | 
88 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
89 | available at [http://contributor-covenant.org/version/1/4][version]
90 | 
91 | [homepage]: http://contributor-covenant.org
92 | [version]: http://contributor-covenant.org/version/1/4/
93 | 


--------------------------------------------------------------------------------
/src/input/ReformsFileInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="reforms-input">
  3 |     <div class="row" v-if="state === 'empty'">
  4 |       <div class="col-12">
  5 |         <input @change="onFileSelect" type="file" ref="input" :id="id" class="form-control" :class="classes">
  6 |       </div>
  7 |     </div>
  8 |     <div class="row align-items-center" v-else-if="state === 'uploading'" style="height: 38px">
  9 |       <div class="col">
 10 |         <div class="text-center mb-2 text-muted">
 11 |           <b>{{ uploadProgress }}%</b>
 12 |         </div>
 13 |         <div class="progress" style="height: 5px;">
 14 |           <div class="progress-bar" :style="{width: uploadProgress + '%'}"></div>
 15 |         </div>
 16 |       </div>
 17 |     </div>
 18 |     <div class="row" v-else-if="state === 'file' && currentFile">
 19 |       <div class="col">
 20 |         <div class="card">
 21 |           <div class="card-body">
 22 |             <div class="row align-items-center">
 23 |               <div class="col-auto">
 24 |                 <template v-if="currentFile.name && isImage(currentFile.name)">
 25 |                   <a :href="currentFile.url" target="_blank">
 26 |                     <img alt="Image" :src="currentFile.previewUrl || currentFile.url" style="width: 50px; height: 50px;">
 27 |                   </a>
 28 |                 </template>
 29 |                 <template v-else>
 30 |                   <div class="card">
 31 |                     <div class="card-body">
 32 |                       <div class="row align-items-center justify-content-center" style="width: 50px; height: 50px;">
 33 |                         <div class="col-auto">
 34 |                           ...
 35 |                         </div>
 36 |                       </div>
 37 |                     </div>
 38 |                   </div>
 39 |                 </template>
 40 |               </div>
 41 |               <div class="col">
 42 |                 <p>
 43 |                   {{ currentFile.name }}
 44 |                 </p>
 45 |                 <p class="text-muted" style="font-size: 12px;" v-if="currentFile.size">
 46 |                   {{ fileSize(currentFile.size) }}
 47 |                 </p>
 48 |               </div>
 49 |               <div class="col-auto">
 50 |                 <div class="row">
 51 |                   <div class="col">
 52 |                     <a :href="currentFile.url" download target="_blank" class="btn btn-sm btn-info">
 53 |                       &darr;
 54 |                     </a>
 55 |                   </div>
 56 |                   <div class="col" v-if="deleteButton">
 57 |                     <button @click.prevent="onDelete" type="button" class="btn btn-sm btn-danger">
 58 |                       &times;
 59 |                     </button>
 60 |                   </div>
 61 |                 </div>
 62 |               </div>
 63 |             </div>
 64 |           </div>
 65 |         </div>
 66 |       </div>
 67 |     </div>
 68 |   </div>
 69 | </template>
 70 | <script>
 71 | import ReformsInputMixin from "../ReformsInputMixin";
 72 | import {mergeClasses, modelValue} from "../Util";
 73 | import {toRef, watch, toRaw} from 'vue';
 74 | import ReformsFileMixin from "../ReformsFileMixin";
 75 | 
 76 | export default {
 77 |   name: "ReformsFileInput",
 78 |   inheritAttrs: false,
 79 |   mixins: [ReformsInputMixin, ReformsFileMixin],
 80 |   emits: ['update:modelValue'],
 81 |   props: {
 82 |     modelValue: {
 83 |       type: Object,
 84 |       default: null,
 85 |     },
 86 |     readonly: Boolean,
 87 |     placeholder: String,
 88 |     tabindex: String,
 89 |     autocomplete: String,
 90 |     uploadName: {
 91 |       type: String,
 92 |       default: 'file',
 93 |     },
 94 |     uploadUrl: {
 95 |       type: String,
 96 |       required: true,
 97 |     },
 98 |     uploadedHandler: {
 99 |       type: Function,
100 |       default: (data) => data,
101 |     },
102 |     deleteUrl: String,
103 |     deleteButton: {
104 |       type: Boolean,
105 |       default: true,
106 |     }
107 |   },
108 |   data() {
109 |     return {
110 |       state: 'empty', // empty, uploading, file
111 |       uploadProgress: 0,
112 |     };
113 |   },
114 |   computed: {
115 |     inputValue: modelValue(),
116 |     classes() {
117 |       return mergeClasses(this.inputClass, {
118 |         'is-valid': this.isValid === true,
119 |         'is-invalid': this.isValid === false,
120 |       });
121 |     },
122 |     currentFile: {
123 |       get() {
124 |         return this.modelValue || {};
125 |       },
126 |       set(value) {
127 |         this.$emit('update:modelValue', value);
128 |       }
129 |     }
130 |   },
131 |   methods: {
132 |     onFileSelect(e) {
133 |       const file = e.target.files[0];
134 | 
135 |       const formData = new FormData();
136 |       formData.append(this.uploadName, file);
137 | 
138 |       let xhr = new XMLHttpRequest();
139 | 
140 |       const form = this.findForm();
141 | 
142 |       if (form) {
143 |         form.formLoadingMode = true;
144 |       }
145 | 
146 |       xhr.upload.addEventListener('progress', (e) => {
147 |         if (e.loaded <= file.size) {
148 |           this.uploadProgress = Math.round(e.loaded / file.size * 100);
149 |         }
150 | 
151 |         if (e.loaded === e.total) {
152 |           this.uploadProgress = 100;
153 |         }
154 |       });
155 | 
156 | 
157 |       xhr.onload = (e) => {
158 |         const resp = JSON.parse(e.target.response);
159 |         this.currentFile = this.uploadedHandler(resp);
160 |         this.state = 'file';
161 | 
162 |         if (form) {
163 |           form.formLoadingMode = false;
164 |         }
165 |       };
166 | 
167 |       xhr.open("POST", this.uploadUrl);
168 |       xhr.setRequestHeader('Accept', 'application/json');
169 | 
170 |       this.state = 'uploading';
171 | 
172 |       xhr.send(formData);
173 |     },
174 |     onDelete() {
175 |       new Promise((resolve, reject) => {
176 |         if (this.deleteUrl) {
177 |           fetch(this.deleteUrl, {
178 |             method: 'POST',
179 |             headers: {
180 |               'Content-Type': 'application/json;charset=utf-8',
181 |             },
182 |             body: JSON.stringify(this.currentFile),
183 |           }).then(resolve).catch(reject);
184 |         } else {
185 |           resolve();
186 |         }
187 |       }).then(() => {
188 |           this.currentFile = null;
189 |           this.state = 'empty';
190 |       });
191 |     },
192 |     findForm() {
193 |       let item = this.$parent;
194 | 
195 |       while (item && !_.isBoolean(item.formLoadingMode)) {
196 |         item = item.$parent;
197 |       }
198 | 
199 |       if (!_.isBoolean(item.formLoadingMode)) {
200 |         return null;
201 |       }
202 | 
203 |       return item;
204 |     }
205 |   },
206 | }
207 | </script>
208 | 


--------------------------------------------------------------------------------
/src/Util.js:
--------------------------------------------------------------------------------
  1 | import _ from 'lodash';
  2 | const Flex = require('flex-js');
  3 | 
  4 | export const CHARS_ALPHA_LO = 'abcdefghijklmnopqrstuvwxyz';
  5 | export const CHARS_ALPHA_HI = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  6 | export const CHARS_NUMBER   = '0123456789';
  7 | 
  8 | /**
  9 |  * Create getter & setter for v-model value
 10 |  *
 11 |  * @param {String?} propName v-model Property name
 12 |  * @returns {{set(*=): void, get(): *}|*}
 13 |  */
 14 | export function modelValue(propName, castTo) {
 15 |     propName = propName || 'modelValue';
 16 |     castTo = castTo || ((value) => value);
 17 | 
 18 | 
 19 |     return {
 20 |         get() {
 21 |             return castTo(this[propName]);
 22 |         },
 23 |         set(value) {
 24 |             this.$emit('update:' + propName, castTo(value));
 25 |         },
 26 |     };
 27 | }
 28 | 
 29 | /**
 30 |  * Merge classes for vue v-bind:class={}
 31 |  *
 32 |  * @param {String|Object|String[]}classes
 33 |  * @returns {Object}
 34 |  */
 35 | export function mergeClasses(...classes) {
 36 |     let result = {};
 37 | 
 38 |     const stringArrayToObject = (stringArray, result) => {
 39 |         stringArray.forEach((className) => {
 40 |             result[className] = true;
 41 |         });
 42 |     };
 43 | 
 44 |     for (const clazz of classes) {
 45 |         if (_.isString(clazz)) {
 46 |             stringArrayToObject(clazz.split(' ').filter((k) => Boolean(k)), result);
 47 |         } else if (_.isArray(clazz)) {
 48 |             stringArrayToObject(clazz.filter((k) => Boolean(k)), result);
 49 |         } else if (_.isObject(clazz)) {
 50 |             _.merge(result, clazz);
 51 |         }
 52 |     }
 53 | 
 54 |     return result;
 55 | }
 56 | 
 57 | /**
 58 |  * Generate random string from characters
 59 |  *
 60 |  * @param {number} length
 61 |  * @param {string} characters
 62 |  * @returns {string}
 63 |  */
 64 | export function randomStringFromChars(length, characters) {
 65 |     let result = '';
 66 |     for (let i = 0; i < length; i++ ) {
 67 |         result += characters.charAt(Math.floor(Math.random() * characters.length));
 68 |     }
 69 |     return result;
 70 | }
 71 | 
 72 | /**
 73 |  * Return random id
 74 |  *
 75 |  * @param {number} length
 76 |  * @returns {string}
 77 |  */
 78 | export function randomId(length) {
 79 |     return randomStringFromChars(length > 0 ? 1 : 0, CHARS_ALPHA_LO + CHARS_ALPHA_HI)
 80 |          + randomStringFromChars(length - 1, CHARS_ALPHA_HI + CHARS_ALPHA_LO + CHARS_NUMBER);
 81 | }
 82 | 
 83 | /**
 84 |  * Create validator function
 85 |  *
 86 |  * @param {Function} valueValidator
 87 |  * @param {String} lang
 88 |  * @param {Boolean} skipNil
 89 |  * @return {Function}
 90 |  */
 91 | export function createValidator(valueValidator, lang, skipNil) {
 92 |     return function(params, ...args) {
 93 |         let result = [];
 94 | 
 95 |         for (const value of (params.multiple ? params.value : [params.value])) {
 96 | 
 97 |             if (skipNil && _.isNil(value)) {
 98 |                 result.push({
 99 |                     isValid: true,
100 |                     messages: [],
101 |                 });
102 |                 continue;
103 |             }
104 | 
105 |             const v = valueValidator(value, params, params.lang.validation[lang], ...args);
106 | 
107 |             if (v === false) {
108 |                 break;
109 |             }
110 | 
111 |             if (_.isObject(v)) {
112 |                 result.push(v);
113 |             }
114 |         }
115 | 
116 |         return result;
117 |     };
118 | }
119 | 
120 | export function translate(str, params) {
121 |     return Object.entries(params).reduce(
122 |         (str, [key, value]) => str.replaceAll(':' + key, value), str);
123 | }
124 | 
125 | /**
126 |  * Create matcher function for validator
127 |  *
128 |  * @param {Function|RegExp} matchFunc
129 |  * @param {String} langNotOk
130 |  * @param {String?} langOk
131 |  * @return {function(*=, *=, *=): {isValid: boolean, messages: [*]|[]|[*]}}
132 |  */
133 | export function createMatcher(matchFunc, langNotOk, langOk) {
134 |     return function (value, params, lang, ...args) {
135 |         let langParams = {};
136 | 
137 |         const isValid = Boolean(_.isRegExp(matchFunc) ? String(value).match(matchFunc) : matchFunc(value, params, lang, langParams, ...args));
138 | 
139 |         return {
140 |             isValid: isValid,
141 |             messages: (isValid ? (langOk ? [translate(lang[langOk], langParams)] : []) : [translate(lang[langNotOk], langParams)]),
142 |         };
143 |     };
144 | }
145 | 
146 | /**
147 |  * Parse validation rules in string
148 |  *
149 |  * @param {String} validationRules
150 |  * @return {Object}
151 |  */
152 | export function parseValidationRules(validationRules) {
153 |     let tokens = [];
154 | 
155 |     const lex = new Flex();
156 |     lex.setIgnoreCase(true);
157 |     lex.addState('param', true);
158 |     lex.addStateRule(Flex.STATE_INITIAL, /[a-z0-9_\-]+/
159 |         , (lexer) => {
160 |         tokens.push({
161 |             id: 'rulename',
162 |             value: lexer.text,
163 |         });
164 | 
165 |         const inp = lexer.input();
166 | 
167 |         if (inp === ':') {
168 |             lexer.begin('param');
169 |         } else if (inp === '|') {
170 |             lexer.begin(Flex.STATE_INITIAL);
171 |         } else if (inp === '') {
172 |             ;
173 |         } else {
174 |             throw new Error('Unexpected char: "' + inp + '"');
175 |         }
176 |     });
177 |     lex.addStateRule('param', /[^,"'|]+/
178 |     , (lexer) => {
179 |             tokens.push({
180 |                 id: 'param',
181 |                 value: lexer.text,
182 |             });
183 | 
184 |             const inp = lexer.input();
185 | 
186 |             if (inp === ',') {
187 |                 return;
188 |             } else if (inp === '|') {
189 |                 lexer.begin(Flex.STATE_INITIAL);
190 |             }
191 |     });
192 | 
193 |     lex.addStateRule('param', /("|')/, (lexer) => {
194 |         let char = '';
195 |         let str = '';
196 |         const quote = lexer.text;
197 | 
198 |         do {
199 |             char = lexer.input();
200 | 
201 |             if (char === quote) {
202 |                 break;
203 |             }
204 | 
205 |             if (char === '\\') {
206 |                 const esc = lexer.input();
207 | 
208 |                 if (esc === '"') {
209 |                     str += '"';
210 |                 } else if (esc === '\'') {
211 |                     str += '\'';
212 |                 } else if (esc === 't') {
213 |                     str += '\t';
214 |                 } else {
215 |                     str += '\\';
216 |                 }
217 | 
218 |                 continue;
219 |             }
220 | 
221 |             str += char;
222 | 
223 |         } while (char !== '');
224 | 
225 |         tokens.push({
226 |             id: "param",
227 |             value: str,
228 |         });
229 | 
230 |         if (lexer.input() !== ',') {
231 |             lexer.terminate();
232 |         }
233 |     });
234 | 
235 |     lex.setSource(validationRules);
236 |     lex.lex();
237 | 
238 |     let params = [];
239 | 
240 |     let result = [];
241 | 
242 |     for (const token of tokens.reverse()) {
243 |         if (token.id === 'param') {
244 |             params.push(token);
245 |         } else {
246 |             result.push({
247 |                 name: token.value,
248 |                 options: params.map((v) => v.value),
249 |             });
250 |             params = [];
251 |         }
252 |     }
253 | 
254 |     return result.reverse();
255 | }
256 | 
257 | export function passwordStrengthEstimate(password) {
258 |     let est = 0;
259 | 
260 |     if (password.length >= 8) {
261 |         ++est;
262 |     }
263 | 
264 |     if ((/[^a-zA-Z0-9]/).test(password)) {
265 |         ++est;
266 |     }
267 | 
268 |     if ((/[a-z]/).test(password) && (/[A-Z]/).test(password)) {
269 |         ++est;
270 |     }
271 | 
272 |     if ((/[0-9]/).test(password)) {
273 |         ++est;
274 |     }
275 | 
276 |     return est;
277 | };
278 | 


--------------------------------------------------------------------------------
/src/ReformsInput.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="reforms-input-container row mb-2" v-show="shown">
  3 |     <reforms-label v-bind="$attrs" />
  4 |     <div class="col">
  5 |       <div v-for="(input, i) in inputs" class="row align-items-start mb-2">
  6 |         <div class="col">
  7 |           <component :ref="(el) => {inputsList[i] = el;}" :is="inputComponent" :validation-result="inputValidation && inputValidation[i]" :is-valid="inputValidation && inputValidation[i] ? inputValidation[i].isValid : null" v-bind="$attrs" :name="name ? (name + (this.multiple ? ('[' + i + ']') : '')) : undefined" v-model="inputs[i].value" @update:model-value="updateValues">
  8 |             <slot></slot>
  9 |           </component>
 10 |           <div class="reforms-validation row mt-2" v-if="() => inputValidation[i] && _.isArray(inputValidation[i].messages) && inputValidation[i].messages.length > 0">
 11 |             <div class="col">
 12 |               <ul class="d-block" :class="{'valid-feedback': inputValidation[i] && inputValidation[i].isValid === true, 'invalid-feedback': inputValidation[i] && inputValidation[i].isValid === false,}">
 13 |                 <li v-for="message in (inputValidation[i] ? inputValidation[i].messages : [])">
 14 |                   {{ message }}
 15 |                 </li>
 16 |               </ul>
 17 |             </div>
 18 |           </div>
 19 |         </div>
 20 |         <div class="col-auto" v-if="this.multiple" style="padding-top: 4px;">
 21 |           <div class="row g-1" style="min-width: 96px;">
 22 |             <div class="col-auto" style="min-width: 33px;" v-if="this.sortable">
 23 |               <button v-if="i > 0" @click.prevent="moveItemUp(i)" class="btn btn-sm btn-secondary">
 24 |                 &uarr;
 25 |               </button>
 26 |             </div>
 27 |             <div class="col-auto" style="min-width: 33px;" v-if="this.sortable">
 28 |               <button v-if="i < inputs.length-1" @click.prevent="moveItemDown(i)" class="btn btn-sm btn-secondary">
 29 |                 &darr;
 30 |               </button>
 31 |             </div>
 32 |             <div class="col-auto" style="min-width: 33px;">
 33 |               <button v-if="inputs.length > multipleMin" @click.prevent="removeItem(i)" class="btn btn-sm btn-danger">
 34 |                 &times;
 35 |               </button>
 36 |             </div>
 37 |           </div>
 38 |         </div>
 39 |       </div>
 40 |       <div class="row" v-if="multiple && (multipleMax < 1 || inputs.length < multipleMax)">
 41 |         <div class="col-12 text-center">
 42 |           <button @click.prevent="addItem()" class="btn btn-info">+</button>
 43 |         </div>
 44 |       </div>
 45 |     </div>
 46 |   </div>
 47 | </template>
 48 | <script>
 49 | import _ from 'lodash';
 50 | import {reactive, ref, watch, toRef} from 'vue';
 51 | import mitt from 'mitt';
 52 | import ReformsLabel from "./ReformsLabel.vue";
 53 | import langEn from './lang/en'
 54 | import {parseValidationRules} from './Util';
 55 | 
 56 | export default {
 57 |   name: 'ReformsInput',
 58 |   components: {ReformsLabel},
 59 |   inheritAttrs: false,
 60 |   props: {
 61 |     type: {
 62 |       type: String,
 63 |       required: true,
 64 |       default: 'string',
 65 |     },
 66 |     modelValue: null,
 67 |     validation: [Array, String],
 68 |     language: {
 69 |       type: Object,
 70 |       default: langEn,
 71 |     },
 72 |     validationResult: {
 73 |       type: Array,
 74 |       default: [],
 75 |     },
 76 |     multiple: [Boolean, Object],
 77 |     sortable: Boolean,
 78 |     ignored: Boolean,
 79 |     name: String,
 80 |     shown: {
 81 |       type: Boolean,
 82 |       default: true,
 83 |     }
 84 |   },
 85 |   emits: ['update:modelValue', 'validated', 'beforeValidate'],
 86 |   data() {
 87 |     return {
 88 |       inputComponent: (() => {
 89 |         if (this.$reforms.types[this.type]) {
 90 |           return this.$reforms.types[this.type].input;
 91 |         } else {
 92 |           throw new Error('Undefined input type "' + this.type + '".');
 93 |         }
 94 |       })(),
 95 |       events: mitt(),
 96 |       inputValidation: [],
 97 |       validators: [],
 98 |       inputsList: {},
 99 |     };
100 |   },
101 |   setup(props) {
102 |     let inputsRef;
103 | 
104 |     let inputs;
105 | 
106 |     if (props.multiple && _.isArray(props.modelValue)) {
107 |       inputsRef = toRef(props, 'modelValue');
108 |       inputs = reactive(inputsRef.value.map((v) => ref(v)));
109 |     } else {
110 |       inputsRef = toRef(props, 'modelValue');
111 |       inputs = reactive([ref(props.modelValue)]);
112 |     }
113 | 
114 |     if (_.isObject(props.multiple) && _.isNumber(props.multiple.min) && props.multiple.min > 0) {
115 |       const len = props.multiple.min-inputs.length;
116 |       for (let i=0; i<len; ++i) {
117 |         inputs.push(ref(null));
118 |       }
119 |     }
120 | 
121 |     if (inputs.length === 0) {
122 |       inputs.push(ref(null));
123 |     }
124 | 
125 |     watch(inputsRef, (modelValue) => {
126 |       if (props.multiple && _.isArray(props.modelValue)) {
127 |         if (modelValue.length > inputs.length) {
128 |           const fullLength = (modelValue.length-inputs.length);
129 |           for (let i=0; i<fullLength;++i) {
130 |             inputs.push(ref(null));
131 |           }
132 |         } else if (modelValue.length < inputs.length) {
133 |           const fullLength = (inputs.length-modelValue.length);
134 |           for (let i=0; i<fullLength; ++i) {
135 |             inputs.pop();
136 |           }
137 |         }
138 | 
139 |         for (let i=0; i<modelValue.length; ++i) {
140 |           inputs[i].value = modelValue[i];
141 |         }
142 | 
143 |         if (_.isObject(props.multiple) && _.isNumber(props.multiple.min) && props.multiple.min > 0) {
144 |           const len = props.multiple.min-inputs.length;
145 |           for (let i=0; i<len; ++i) {
146 |             inputs.push(ref(null));
147 |           }
148 |         }
149 |       } else {
150 |         if (inputs.length !== 1) {
151 |           inputs.splice(0, inputs.length);
152 |           inputs.push(ref(null));
153 |         }
154 | 
155 |         inputs[0].value = modelValue;
156 |       }
157 |     }, {deep: true});
158 | 
159 |     return {inputs};
160 |   },
161 |   methods: {
162 |     updateValues() {
163 |       const values = this.inputs.map((v) => v.value);
164 |       const emitData = this.multiple ? values : values[0];
165 |       this.$emit('update:modelValue', emitData);
166 |       this.events.emit('out:modelValue', emitData);
167 | 
168 |     },
169 |     resetValidation() {
170 |       this.validationResult.splice(0, this.validationResult.length);
171 |     },
172 |     addItem() {
173 |       this.resetValidation();
174 |       this.inputs.push(ref(null));
175 |       this.updateValues();
176 |     },
177 |     removeItem(index) {
178 |       this.resetValidation();
179 |       this.inputs.splice(index, 1);
180 |       this.updateValues();
181 |     },
182 |     moveItemDown(i) {
183 |       this.resetValidation();
184 |       const tmp = this.inputs[i];
185 |       this.inputs[i] = this.inputs[i+1];
186 |       this.inputs[i+1] = tmp;
187 |       this.updateValues();
188 |     },
189 |     moveItemUp(i) {
190 |       this.resetValidation();
191 |       const tmp = this.inputs[i];
192 |       this.inputs[i] = this.inputs[i-1];
193 |       this.inputs[i-1] = tmp;
194 |       this.updateValues();
195 |     },
196 |     findParentContainer() {
197 |       let p = this.$parent;
198 | 
199 |       while (p && !_.isFunction(p.registerInput)) {
200 |         p = p.$parent;
201 |       }
202 | 
203 |       return p;
204 |     },
205 |     validate() {
206 |       let nestedResult = true;
207 | 
208 |       this.inputs.forEach((v, i) => {
209 |         if (_.isFunction(this.inputsList[i].validate)) {
210 |           nestedResult = this.inputsList[i].validate() && nestedResult;
211 |         }
212 |       });
213 | 
214 |       if (!_.isArray(this.validators)) {
215 |         return true;
216 |       }
217 | 
218 |       const values = this.inputs.map((v) => v.value);
219 |       const value = this.multiple ? values : values[0];
220 | 
221 |       let params = {
222 |         stop: false,
223 |         field: this.name,
224 |         multiple: this.multiple,
225 |         type: this.type,
226 |         value: value,
227 |         lang: this.language,
228 |         form: this.findParentContainer(),
229 |       };
230 | 
231 |       let validationResultSuccess = [];
232 |       let validationResultFail = [];
233 | 
234 |       const validationMerge = (a, b) => {
235 |         b.forEach((v, i) => {
236 |           if (i >= a.length) {
237 |             a.push(v);
238 |           } else {
239 |             a[i].messages = _.uniq(a[i].messages.concat(v.messages));
240 |           }
241 |         });
242 |       };
243 | 
244 |       for (let v of this.validators) {
245 |         if (!_.isString(v.name) || !this.$reforms.validators[v.name]) {
246 |           console.warn('Invalid validator name: ' + v.name);
247 |           continue;
248 |         }
249 | 
250 |         params.options = v.options;
251 | 
252 |         const validator = this.$reforms.validators[v.name]
253 |             .bind(this.$reforms.validators);
254 | 
255 |         const validationResult = validator(params);
256 | 
257 |         if (_.isArray(validationResult)) {
258 |           if (validationResult.reduce((acc, val) => val.isValid && acc, true)) {
259 |             validationMerge(validationResultSuccess, validationResult);
260 |           } else {
261 |             validationMerge(validationResultFail, validationResult);
262 |           }
263 |         }
264 | 
265 |         if (params.stop) {
266 |           break;
267 |         }
268 |       }
269 | 
270 |       if (validationResultFail.length < 1) {
271 |         this.inputValidation = validationResultSuccess;
272 |       } else {
273 |         this.inputValidation = validationResultFail;
274 |       }
275 | 
276 |       return validationResultFail.length < 1 && nestedResult;
277 |     },
278 |   },
279 |   computed: {
280 |     multipleMax() {
281 |       return _.isObject(this.multiple)
282 |           && _.isNumber(this.multiple.max) && this.multiple.max > 0
283 |           ? this.multiple.max : 0;
284 |     },
285 |     multipleMin() {
286 |       return _.isObject(this.multiple)
287 |       && _.isNumber(this.multiple.min) && this.multiple.min > 0
288 |           ? this.multiple.min : 1;
289 |     }
290 |   },
291 |   created() {
292 |     this.events.on('in:modelValue', (value) => {
293 |       this.inputs.splice(0, this.inputs.length);
294 | 
295 |       if (this.multiple && _.isArray(value)) {
296 |         value.forEach((v) => {
297 |           this.inputs.push(ref(v));
298 |         });
299 |       } else {
300 |         this.inputs.push(ref(value));
301 |       }
302 | 
303 |     });
304 | 
305 |     watch(toRef(this.$props, 'shown'), (shown) => {
306 |       this.events.emit('out:shown', shown);
307 |     });
308 | 
309 |     watch(toRef(this.$props, 'validationResult'), (validationResult) => {
310 |       this.inputValidation = validationResult;
311 |     }, {deep: true, immediate: true});
312 | 
313 |     watch(toRef(this.$props, 'validation'), (validation) => {
314 | 
315 |       if (_.isString(validation)) {
316 |         this.validators = parseValidationRules(validation);
317 |         return;
318 |       }
319 | 
320 |       this.validators = validation;
321 |     }, {deep: true, immediate: true});
322 |   },
323 |   mounted() {
324 |     if (this.ignored) {
325 |       return;
326 |     }
327 | 
328 |     const p = this.findParentContainer();
329 | 
330 |     if (!p) {
331 |       return;
332 |     }
333 | 
334 |     p.registerInput(this);
335 |   },
336 |   beforeUnmount() {
337 |     if (this.ignored) {
338 |       return;
339 |     }
340 | 
341 |     const p = this.findParentContainer();
342 | 
343 |     if (!p) {
344 |       return;
345 |     }
346 | 
347 |     p.unregisterInput(this.name);
348 |   }
349 | };
350 | </script>
351 | 


--------------------------------------------------------------------------------