├── .npmignore
├── README.md
├── configure
    └── field.js
├── fields
    ├── abstract.js
    ├── components
    │   ├── base.vue
    │   ├── color
    │   │   ├── color.vue
    │   │   ├── common
    │   │   │   ├── Alpha.vue
    │   │   │   ├── Checkboard.vue
    │   │   │   ├── EditableInput.vue
    │   │   │   ├── Hue.vue
    │   │   │   └── Saturation.vue
    │   │   ├── index.vue
    │   │   └── mixin
    │   │   │   └── color.js
    │   ├── date.vue
    │   ├── select.vue
    │   ├── switch.vue
    │   └── text.vue
    ├── index.js
    └── render-field.js
├── form.vue
├── format
    └── index.js
├── index.js
├── model
    ├── MixinData.js
    ├── MixinMethods.js
    ├── MixinProps.js
    ├── MixinWatch.js
    └── index.js
├── package.json
└── result.jpg


/.npmignore:
--------------------------------------------------------------------------------
1 | .git


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 📚 vue-genesis-forms ![](https://scrutinizer-ci.com/g/BlackMix/vue-genesis-forms/badges/build.png?b=master) ![](https://img.shields.io/npm/dm/vue-genesis-forms.svg)
 2 | 
 3 | ` 🔥 support working: `
 4 | * input, textarea, switch, select, colorpick, datepicker
 5 | 
 6 | ` 🎨 next `
 7 | * mult select, toggle, radio
 8 | 
 9 | # simple Demo
10 | [Link](https://codesandbox.io/s/j1z40p4k7w)
11 | 
12 | `example usage:`
13 | App.vue
14 | 
15 | ```html
16 | <template>
17 |   <div>
18 |     <app-form v-bind="{fields, data}" @form~input="input" @form~valid="valid"></app-form>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import { AppForm, filter, field } from 'vue-genesis-forms'
24 | 
25 | export const fields = (scope) => {
26 |   return filter(
27 |     [
28 |       field('name', 'Name').$text().$scopes(['settings']).$form({width: 12}).$validate('required').$render(),
29 |       field('email', 'E-mail').$text().$scopes(['settings']).$form({width: 6})
30 |         .$validate('email', true).$required().$render(),
31 |       field('color', 'Color Nick').$color('rgba').$scopes(['settings']).$form({width: 3}).$render(),
32 |       field('date', 'Date').$date().$scopes(['settings']).$form({width: 3}).$render(),
33 |       field('about', 'About you').$textarea('max', 200).$scopes(['settings']).$form({width: 12, minHeight: '100px'})
34 |         .$validate('maxLength', 20).$render(),
35 |       field('things', 'Things').$select(select, false).$scopes(['settings']).$form({width: 3}).$render(),
36 |       field('notifications', 'Active Messages').$switch(1, 0).$scopes(['settings']).$form({width: 3}).$render(),
37 |       field('logs', 'Active Logs').$switch(1, 0).$scopes(['settings']).$form({width: 3}).$render(),
38 |       field('sockets', 'Active Sockets').$switch(1, 0).$scopes(['settings']).$form({width: 3}).$render()
39 |     ],
40 |     scope
41 |   )
42 | }
43 | 
44 | export const select = [
45 |   {label: 'test 1', value: 'test1'},
46 |   {label: 'test 2', value: 'test2'}
47 | ]
48 | 
49 | export default {
50 |   name: 'app',
51 |   components: { AppForm },
52 |   data: () => ({
53 |     fields: fields('settings'), // settings is scope
54 |     ok: false,
55 |     errors: {},
56 |     data: {}
57 |   }),
58 |   methods: {
59 |     input (data) {
60 |       this.data = data
61 |     },
62 |     valid (status, errors) {
63 |       this.ok = status === true
64 |       this.errors = errors
65 |     }
66 |   },
67 |   mounted () {
68 |     this.data = {
69 |       name: 'Vue.js',
70 |       email: 'test@test.com',
71 |       things: 'test2',
72 |       about: 'I love Vue.js <3',
73 |       notifications: 1,
74 |       sockets: 0,
75 |       logs: 0
76 |     }
77 |   }
78 | }
79 | </script>
80 | ```
81 | 
82 | # Result:
83 | ![image](https://raw.githubusercontent.com/BlackMix/vue-genesis-forms/master/result.jpg)
84 | 
85 | # Credits:
86 | *Genesis* [Link](https://github.com/phpzm/genesis)


--------------------------------------------------------------------------------
/configure/field.js:
--------------------------------------------------------------------------------
  1 | // import { formatOptions, formatPhone, formatMoney, formatDateTime, formatDate, formatBoolean } from '@/bootstrap/support/format'
  2 | 
  3 | export default (field, label, component = 'text', scopes = []) => {
  4 |   const defaults = ['index', 'view', 'create', 'edit']
  5 | 
  6 |   if (!Array.isArray(scopes)) {
  7 |     scopes = defaults
  8 |   }
  9 |   if (!scopes.length) {
 10 |     scopes = defaults
 11 |   }
 12 | 
 13 |   return {
 14 |     field: field,
 15 |     label: label,
 16 |     scopes: scopes,
 17 |     form: {component: component},
 18 |     grid: {},
 19 |     all: {},
 20 |     $scopes (scopes) {
 21 |       this.scopes = scopes
 22 |       return this
 23 |     },
 24 |     $in (scope) {
 25 |       this.scopes = [scope]
 26 |       return this
 27 |     },
 28 |     $out (scope) {
 29 |       this.scopes = defaults.filter(item => item !== scope)
 30 |       return this
 31 |     },
 32 |     $form (form) {
 33 |       return this.$assign('form', form)
 34 |     },
 35 |     $grid (grid) {
 36 |       return this.$assign('grid', grid)
 37 |     },
 38 |     $all (all) {
 39 |       return this.$assign('all', all)
 40 |     },
 41 |     $assign (property, options) {
 42 |       this[property] = Object.assign({}, this[property], options)
 43 |       return this
 44 |     },
 45 |     $filter (rule = 'like', value = '', component = '') {
 46 |       this.grid.filter = {rule, value, component}
 47 |       return this
 48 |     },
 49 |     $tab (name) {
 50 |       this.form.tab = name
 51 |       return this
 52 |     },
 53 |     $readonly () {
 54 |       this.form.disabled = true
 55 |       return this
 56 |     },
 57 |     $pk () {
 58 |       this.primaryKey = true
 59 |       return this.$readonly().$out('create').$grid({is: '60px'})
 60 |     },
 61 |     $validate (rule, value = true) {
 62 |       if (!this.form.validate) {
 63 |         this.form.validate = {}
 64 |       }
 65 |       this.form.validate[rule] = value
 66 |       return this
 67 |     },
 68 |     $required (require = true) {
 69 |       if (require) {
 70 |         this.$validate('required')
 71 |       }
 72 |       return this
 73 |     },
 74 |     $link (path) {
 75 |       this.grid.format = (value, row) => {
 76 |         let href = String(path)
 77 |         Object.keys(row).forEach(property => {
 78 |           href = href.replace(`{${property}}`, row[property])
 79 |         })
 80 |         return `<a href="#${href}">${value}</a>`
 81 |       }
 82 |       return this
 83 |     },
 84 |     $img (className = 'avatar') {
 85 |       this.grid.format = (value) => {
 86 |         return `<img class="grid-${className}-image" src="${value}"/>`
 87 |       }
 88 |       return this
 89 |     },
 90 |     $checkbox () {
 91 |       this.form.component = 'checkbox'
 92 |       // this.grid.format = formatBoolean
 93 |       return this
 94 |     },
 95 |     $color (options = null) {
 96 |       this.form.component = 'field-color'
 97 |       if (options) {
 98 |         this.form.colorType = options
 99 |       }
100 |       return this
101 |     },
102 |     $date (format = null) {
103 |       if (format) {
104 |         this.form.format = format
105 |       }
106 |       this.form.component = 'field-date'
107 |       // this.grid.format = formatDate
108 |       return this
109 |     },
110 |     $datetime () {
111 |       this.form.component = 'date'
112 |       this.form.time = true
113 |       // this.grid.format = formatDateTime
114 |       return this
115 |     },
116 |     $file () {
117 |       this.form.component = 'file'
118 |       return this
119 |     },
120 |     $html () {
121 |       this.form.component = 'html'
122 |       return this
123 |     },
124 |     $input () {
125 |       this.form.component = 'field-text'
126 |       this.form.input = 'input'
127 |       return this
128 |     },
129 |     $money () {
130 |       this.form.component = 'money'
131 |       // this.grid.format = formatMoney
132 |       return this
133 |     },
134 |     $numeric () {
135 |       this.form.component = 'numeric'
136 |       return this
137 |     },
138 |     $password () {
139 |       this.form.component = 'field-text'
140 |       this.form.input = 'input'
141 |       this.form.type = 'password'
142 |       return this
143 |     },
144 |     $phone () {
145 |       this.form.component = 'phone'
146 |       // this.grid.format = formatPhone
147 |       return this
148 |     },
149 |     $radio (options = []) {
150 |       this.form.component = 'radio'
151 |       if (!options.length) {
152 |         options = [{value: 1, label: 'Sim'}, {value: 0, label: 'Não'}]
153 |       }
154 |       this.form.options = options
155 |       // this.grid.format = formatOptions(options)
156 |       return this
157 |     },
158 |     $search () {
159 |       this.form.component = 'select'
160 |       return this
161 |     },
162 |     $select (options = [], multiple = false) {
163 |       this.form.component = 'field-select'
164 |       this.form.placeholder = '.:. Selecione uma opção .:.'
165 |       this.form.multiple = multiple
166 |       this.form.options = options
167 |       this.form.expanded = true
168 |       // this.grid.format = formatOptions(options)
169 |       return this
170 |     },
171 |     $switch (valueTrue, valueFalse) {
172 |       this.form.component = 'field-switch'
173 |       this.form.valueTrue = valueTrue
174 |       this.form.valueFalse = valueFalse
175 |       return this
176 |     },
177 |     $pivot (options = {}) {
178 |       this.form.component = 'pivot'
179 |       this.form.options = options
180 |       return this
181 |     },
182 |     $separator () {
183 |       this.form.component = 'separator'
184 |       return this
185 |     },
186 |     $text (value = '') {
187 |       this.form.component = 'field-text'
188 |       this.form.input = 'input'
189 |       this.form.type = 'text'
190 |       this.form.data = value
191 |       return this
192 |     },
193 |     $textarea (options = null, value) {
194 |       if (options) {
195 |         this.form[options] = value
196 |       }
197 |       this.form.component = 'field-text'
198 |       this.form.input = 'textarea'
199 |       return this
200 |     },
201 |     $time () {
202 |       this.form.component = 'time'
203 |       return this
204 |     },
205 |     $toggle () {
206 |       this.form.component = 'toggle'
207 |       return this
208 |     },
209 |     $wysiwyg () {
210 |       this.form.component = 'wysiwyg'
211 |       return this
212 |     },
213 |     $event (type, action) {
214 |       if (!this.form.events) {
215 |         this.form.events = {}
216 |       }
217 |       this.form.events[type] = action
218 |       return this
219 |     },
220 |     $render () {
221 |       const base = {
222 |         field: this.field,
223 |         label: this.label,
224 |         primaryKey: this.primaryKey,
225 |         scopes: this.scopes
226 |       }
227 |       if (this.grid.filter && !this.grid.filter.component) {
228 |         this.grid.filter.component = this.form.component
229 |       }
230 |       return Object.assign({}, base, this.form, this.all)
231 |     }
232 |   }
233 | }
234 | 


--------------------------------------------------------------------------------
/fields/abstract.js:
--------------------------------------------------------------------------------
  1 | import { unMask } from '../format'
  2 | 
  3 | export default {
  4 |   props: {
  5 |     value: {
  6 |       default: undefined
  7 |     },
  8 |     data: {
  9 |       default: ''
 10 |     },
 11 |     label: {
 12 |       type: String,
 13 |       default: ''
 14 |     },
 15 |     type: {
 16 |       type: String,
 17 |       default: 'text'
 18 |     },
 19 |     input: {
 20 |       type: String,
 21 |       default: 'input'
 22 |     },
 23 |     field: {
 24 |       type: String,
 25 |       default: 'text'
 26 |     },
 27 |     placeholder: {
 28 |       type: String,
 29 |       default: ''
 30 |     },
 31 |     small: {
 32 |       type: String,
 33 |       default: ''
 34 |     },
 35 |     width: {
 36 |       default: '12'
 37 |     },
 38 |     minHeight: {
 39 |       default: null
 40 |     },
 41 |     validate: {
 42 |       default: undefined
 43 |     },
 44 |     tooltip: {
 45 |       default: ''
 46 |     },
 47 |     title: {
 48 |       type: String,
 49 |       default: 'Este campo possui critérios de validação'
 50 |     },
 51 |     mask: {
 52 |       type: String,
 53 |       default: ''
 54 |     },
 55 |     className: {
 56 |       type: Array,
 57 |       default: () => ([])
 58 |     },
 59 |     inline: {
 60 |       type: Boolean,
 61 |       default: false
 62 |     },
 63 |     disabled: {
 64 |       type: Boolean,
 65 |       default: false
 66 |     },
 67 |     editable: {
 68 |       type: Boolean,
 69 |       default: true
 70 |     },
 71 |     errors: {
 72 |       type: Array,
 73 |       default: () => ([])
 74 |     },
 75 |     visible: {
 76 |       type: Boolean,
 77 |       default: true
 78 |     },
 79 |     events: {
 80 |       type: Object,
 81 |       default: () => ({})
 82 |     },
 83 |     max: {
 84 |       default: () => undefined
 85 |     },
 86 |     cleanable: {
 87 |       type: Boolean,
 88 |       default: () => true
 89 |     },
 90 |     cleaning: {
 91 |       default: () => undefined
 92 |     }
 93 |   },
 94 |   computed: {
 95 |     classNames () {
 96 |       const classNames = []
 97 | 
 98 |       const width = 'column is-' + String(this.inline ? '100' : this.width)
 99 |       classNames.push(width)
100 |       // classNames.push(this.$options.name)
101 |       return classNames
102 |     },
103 |     problems () {
104 |       if (!Array.isArray(this.errors)) {
105 |         return []
106 |       }
107 |       return this.errors.filter(error => !error.status).map(error => ({
108 |         path: 'validation.' + error.rule,
109 |         parameters: error.parameters
110 |       }))
111 |     },
112 |     name () {
113 |       return this.field
114 |     }
115 |   },
116 |   data: () => ({
117 |     id: '',
118 |     maxlength: ''
119 |   }),
120 |   methods: {
121 |     updateValue (value) {
122 |       if (this.mask) {
123 |         value = unMask(this.mask, value)
124 |       }
125 |       if (this.pattern) {
126 |         value = unMask(this.pattern, value)
127 |       }
128 |       this.$emit('input', value, this)
129 |     },
130 |     /**
131 |      * @param {Object} 
132 |      */
133 |     focus () {
134 |       if (this.events.focus && typeof this.events.focus === 'function') {
135 |         this.$emit('event', 'focus', this)
136 |       }
137 |     },
138 |     /**
139 |      * @param {Object} 
140 |      */
141 |     blur () {
142 |       if (this.events.blur && typeof this.events.blur === 'function') {
143 |         this.$emit('event', 'blur', this)
144 |       }
145 |     },
146 |     /**
147 |      * @param {Object} 
148 |      */
149 |     keypress () {
150 |       if (this.events.keypress && typeof this.events.keypress === 'function') {
151 |         this.$emit('event', 'keypress', this)
152 |       }
153 |     },
154 |     /**
155 |      * @param {Object} 
156 |      */
157 |     keyup () {
158 |       if (this.events.keyup && typeof this.events.keyup === 'function') {
159 |         this.$emit('event', 'keyup', this)
160 |       }
161 |     },
162 |     /**
163 |      * @param {Object} 
164 |      */
165 |     enter () {
166 |       if (this.events.enter && typeof this.events.enter === 'function') {
167 |         this.$emit('event', 'enter', this)
168 |       }
169 |     }
170 |   },
171 |   created () {
172 |     this.id = Math.random()
173 |     this.maxlength = this.max
174 |   }
175 | }
176 | 


--------------------------------------------------------------------------------
/fields/components/base.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   name: 'field-base',
 4 |   props: {
 5 |     classNames: {
 6 |       type: String
 7 |     },
 8 |     editable: {
 9 |       type: Boolean
10 |     },
11 |     inline: {
12 |       type: Boolean
13 |     },
14 |     visible: {
15 |       type: Boolean
16 |     },
17 |     id: {
18 |       type: Number
19 |     },
20 |     problems: {
21 |       type: Array
22 |     },
23 |     label: {
24 |       type: String
25 |     },
26 |     validate: {
27 |       type: Object,
28 |       default: () => {}
29 |     },
30 |     title: {
31 |       type: String
32 |     },
33 |     tooltip: {
34 |       type: String
35 |     }
36 |   },
37 |   render (h, el = this) {
38 |     return h('div', { class: 'field', style: { 'display: none': el.visible } }, [
39 |       [el.$slots.label, [
40 |         el.label ?
41 |           h('div', { class: 'label' }, [
42 |             !el.inline ?
43 |               h('label', { class: { 'label-with-error': el.problems.length } }, [
44 |                 h('span', {}, el.label),
45 |                 el.validate && el.validate.required ?
46 |                   h('span', { attrs: { title: el.title } }, '*')
47 |                 : null
48 |               ])
49 |             : null
50 |           ])
51 |         : null
52 |       ]],
53 |       [el.$slots.component],
54 |       [el.$slots.error, [
55 |         el.label ?
56 |         h('div', { class: 'field-base-error' }, [
57 |           el.showError ?
58 |             h('div', { class: 'text-right error-message' }, el.problems.map(
59 |                 problem => h('span', {}, el.$t(problem.path, problem.parameters))
60 |               )
61 |             )
62 |           : null
63 |         ])
64 |         : null
65 |       ]]
66 |     ])
67 |   },
68 |   computed: {
69 |     showError () {
70 |       if (this.editable) {
71 |         return !!this.problems.length
72 |       }
73 |       return false
74 |     }
75 |   },
76 |   methods: {
77 |     showErrors () {
78 |       const errors = []
79 |       this.problems.forEach(error => {
80 |         errors.push(' - ' + this.$t(error.path, error.parameters))
81 |       })
82 |       console.log('form base - errors', errors)
83 |     }
84 |   }
85 | }
86 | </script>
87 | 
88 | <style>
89 | 
90 | </style>
91 | 


--------------------------------------------------------------------------------
/fields/components/color/color.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :class="['vc-sketch', disableAlpha ? 'vc-sketch__disable-alpha' : '']">
  3 |     <div class="vc-sketch-saturation-wrap">
  4 |       <saturation v-model="colors" @change="childChange"></saturation>
  5 |     </div>
  6 |     <div class="vc-sketch-controls">
  7 |       <div class="vc-sketch-sliders">
  8 |         <div class="vc-sketch-hue-wrap">
  9 |           <hue v-model="colors" @change="childChange"></hue>  
 10 |         </div>
 11 |         <div class="vc-sketch-alpha-wrap" v-if="!disableAlpha">
 12 |           <alpha v-model="colors" @change="childChange"></alpha>
 13 |         </div>
 14 |       </div>
 15 |       <div class="vc-sketch-color-wrap">
 16 |         <div class="vc-sketch-active-color" :style="{background: activeColor}"></div>
 17 |         <checkboard></checkboard>
 18 |       </div>
 19 |     </div>
 20 |     <div class="vc-sketch-field" v-if="!disableFields">
 21 |       <!-- rgba -->
 22 |       <div class="vc-sketch-field--double">
 23 |         <ed-in label="hex" :value="hex" @change="inputChange"></ed-in>  
 24 |       </div>
 25 |       <div class="vc-sketch-field--single">
 26 |         <ed-in label="r" :value="colors.rgba.r" @change="inputChange"></ed-in>
 27 |       </div>
 28 |       <div class="vc-sketch-field--single">
 29 |         <ed-in label="g" :value="colors.rgba.g" @change="inputChange"></ed-in>
 30 |       </div>
 31 |       <div class="vc-sketch-field--single">
 32 |         <ed-in label="b" :value="colors.rgba.b" @change="inputChange"></ed-in>
 33 |       </div>
 34 |       <div class="vc-sketch-field--single" v-if="!disableAlpha">
 35 |         <ed-in label="a" :value="colors.a" :arrow-offset="0.01" :max="1" @change="inputChange"></ed-in>
 36 |       </div>
 37 |     </div>
 38 |     <div class="vc-sketch-presets">
 39 |       <div class="vc-sketch-presets-color"
 40 |         :aria-label="'color:'+c"
 41 |         v-for="c in presetColors"
 42 |         :key="c"
 43 |         :style="{background: c}"
 44 |         @click="handlePreset(c)">
 45 |       </div>
 46 |     </div>
 47 |   </div>
 48 | </template>
 49 | 
 50 | <script>
 51 | import colorMixin from './mixin/color'
 52 | import editableInput from './common/EditableInput.vue'
 53 | import saturation from './common/Saturation.vue'
 54 | import hue from './common/Hue.vue'
 55 | import alpha from './common/Alpha.vue'
 56 | import checkboard from './common/Checkboard.vue'
 57 | 
 58 | const presetColors = [
 59 |   '#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321',
 60 |   '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2',
 61 |   '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'
 62 | ]
 63 | 
 64 | export default {
 65 |   name: 'color',
 66 |   mixins: [colorMixin],
 67 |   components: {
 68 |     saturation,
 69 |     hue,
 70 |     alpha,
 71 |     'ed-in': editableInput,
 72 |     checkboard
 73 |   },
 74 |   props: {
 75 |     presetColors: {
 76 |       type: Array,
 77 |       default () {
 78 |         return presetColors
 79 |       }
 80 |     },
 81 |     disableAlpha: {
 82 |       type: Boolean,
 83 |       default: false
 84 |     },
 85 |     disableFields: {
 86 |       type: Boolean,
 87 |       default: false
 88 |     }
 89 |   },
 90 |   computed: {
 91 |     hex () {
 92 |       return this.colors.hex.replace('#', '')
 93 |     },
 94 |     activeColor () {
 95 |       var rgba = this.colors.rgba
 96 |       return 'rgba(' + [rgba.r, rgba.g, rgba.b, rgba.a].join(',') + ')'
 97 |     }
 98 |   },
 99 |   methods: {
100 |     handlePreset (c) {
101 |       this.colorChange({
102 |         hex: c,
103 |         source: 'hex'
104 |       })
105 |     },
106 |     childChange (data) {
107 |       this.colorChange(data)
108 |     },
109 |     inputChange (data) {
110 |       if (!data) {
111 |         return
112 |       }
113 |       if (data.hex) {
114 |         this.isValidHex(data.hex) && this.colorChange({
115 |           hex: data.hex,
116 |           source: 'hex'
117 |         })
118 |       } else if (data.r || data.g || data.b || data.a) {
119 |         this.colorChange({
120 |           r: data.r || this.colors.rgba.r,
121 |           g: data.g || this.colors.rgba.g,
122 |           b: data.b || this.colors.rgba.b,
123 |           a: data.a || this.colors.rgba.a,
124 |           source: 'rgba'
125 |         })
126 |       }
127 |     }
128 |   }
129 | }
130 | </script>
131 | 
132 | <style>
133 | .vc-sketch {
134 |   position: relative;
135 |   width: 200px;
136 |   padding: 10px 10px 0;
137 |   box-sizing: initial;
138 |   background: #fff;
139 |   border-radius: 4px;
140 |   box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15);
141 | }
142 | .vc-sketch-saturation-wrap {
143 |   width: 100%;
144 |   padding-bottom: 75%;
145 |   position: relative;
146 |   overflow: hidden;
147 | }
148 | .vc-sketch-controls {
149 |   display: flex;
150 | }
151 | .vc-sketch-sliders {
152 |   padding: 4px 0;
153 |   flex: 1;
154 | }
155 | .vc-sketch-sliders .vc-hue,
156 | .vc-sketch-sliders .vc-alpha-gradient {
157 |   border-radius: 2px;
158 | }
159 | .vc-sketch-hue-wrap {
160 |   position: relative;
161 |   height: 10px;
162 | }
163 | .vc-sketch-alpha-wrap {
164 |   position: relative;
165 |   height: 10px;
166 |   margin-top: 4px;
167 |   overflow: hidden;
168 | }
169 | .vc-sketch-color-wrap {
170 |   width: 24px;
171 |   height: 24px;
172 |   position: relative;
173 |   margin-top: 4px;
174 |   margin-left: 4px;
175 |   border-radius: 3px;
176 | }
177 | .vc-sketch-active-color {
178 |   position: absolute;
179 |   top: 0;
180 |   left: 0;
181 |   right: 0;
182 |   bottom: 0;
183 |   border-radius: 2px;
184 |   box-shadow: inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25);
185 |   z-index: 2;
186 | }
187 | .vc-sketch-color-wrap .vc-checkerboard {
188 |   background-size: auto;
189 | }
190 | 
191 | .vc-sketch-field {
192 |   display: flex;
193 |   padding-top: 4px;
194 | }
195 | .vc-sketch-field .vc-input__input {
196 |   width: 80%;
197 |   padding: 4px 10% 3px;
198 |   border: none;
199 |   box-shadow: inset 0 0 0 1px #ccc;
200 |   font-size: 11px;
201 | }
202 | .vc-sketch-field .vc-input__label {
203 |   display: block;
204 |   text-align: center;
205 |   font-size: 11px;
206 |   color: #222;
207 |   padding-top: 3px;
208 |   padding-bottom: 4px;
209 |   text-transform: capitalize;
210 | }
211 | .vc-sketch-field--single {
212 |   flex: 1;
213 |   padding-left: 6px;
214 | }
215 | .vc-sketch-field--double {
216 |   flex: 2;
217 | }
218 | .vc-sketch-presets {
219 |   margin-right: -10px;
220 |   margin-left: -10px;
221 |   padding-left: 10px;
222 |   padding-top: 10px;
223 |   border-top: 1px solid #eee;
224 | }
225 | .vc-sketch-presets-color {
226 |   border-radius: 3px;
227 |   overflow: hidden;
228 |   position: relative;
229 |   display: inline-block;
230 |   margin: 0 10px 10px 0;
231 |   vertical-align: top;
232 |   cursor: pointer;
233 |   width: 16px;
234 |   height: 16px;
235 |   box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
236 | }
237 | 
238 | .vc-sketch__disable-alpha .vc-sketch-color-wrap {
239 |   height: 10px;
240 | }
241 | </style>
242 | 


--------------------------------------------------------------------------------
/fields/components/color/common/Alpha.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vc-alpha">
  3 |     <div class="vc-alpha-checkboard-wrap">
  4 |       <checkboard></checkboard>
  5 |     </div>
  6 |     <div class="vc-alpha-gradient" :style="{background: gradientColor}"></div>
  7 |     <div class="vc-alpha-container" ref="container"
  8 |         @mousedown="handleMouseDown"
  9 |         @touchmove="handleChange"
 10 |         @touchstart="handleChange">
 11 |       <div class="vc-alpha-pointer" :style="{left: colors.a * 100 + '%'}">
 12 |         <div class="vc-alpha-picker"></div>
 13 |       </div>
 14 |     </div>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 | import checkboard from './Checkboard.vue'
 20 | 
 21 | export default {
 22 |   name: 'Alpha',
 23 |   props: {
 24 |     value: Object,
 25 |     onChange: Function
 26 |   },
 27 |   components: {
 28 |     checkboard
 29 |   },
 30 |   computed: {
 31 |     colors () {
 32 |       return this.value
 33 |     },
 34 |     gradientColor () {
 35 |       var rgba = this.colors.rgba
 36 |       var rgbStr = [rgba.r, rgba.g, rgba.b].join(',')
 37 |       return 'linear-gradient(to right, rgba(' + rgbStr + ', 0) 0%, rgba(' + rgbStr + ', 1) 100%)'
 38 |     }
 39 |   },
 40 |   methods: {
 41 |     handleChange (e, skip) {
 42 |       !skip && e.preventDefault()
 43 |       var container = this.$refs.container
 44 |       var containerWidth = container.clientWidth
 45 | 
 46 |       var xOffset = container.getBoundingClientRect().left + window.pageXOffset
 47 |       var pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0)
 48 |       var left = pageX - xOffset
 49 | 
 50 |       var a
 51 |       if (left < 0) {
 52 |         a = 0
 53 |       } else if (left > containerWidth) {
 54 |         a = 1
 55 |       } else {
 56 |         a = Math.round(left * 100 / containerWidth) / 100
 57 |       }
 58 | 
 59 |       if (this.colors.a !== a) {
 60 |         this.$emit('change', {
 61 |           h: this.colors.hsl.h,
 62 |           s: this.colors.hsl.s,
 63 |           l: this.colors.hsl.l,
 64 |           a: a,
 65 |           source: 'rgba'
 66 |         })
 67 |       }
 68 |     },
 69 |     handleMouseDown (e) {
 70 |       this.handleChange(e, true)
 71 |       window.addEventListener('mousemove', this.handleChange)
 72 |       window.addEventListener('mouseup', this.handleMouseUp)
 73 |     },
 74 |     handleMouseUp () {
 75 |       this.unbindEventListeners()
 76 |     },
 77 |     unbindEventListeners () {
 78 |       window.removeEventListener('mousemove', this.handleChange)
 79 |       window.removeEventListener('mouseup', this.handleMouseUp)
 80 |     }
 81 |   }
 82 | }
 83 | 
 84 | </script>
 85 | 
 86 | <style>
 87 | .vc-alpha {
 88 |   position: absolute;
 89 |   top: 0px;
 90 |   right: 0px;
 91 |   bottom: 0px;
 92 |   left: 0px;
 93 | }
 94 | .vc-alpha-checkboard-wrap {
 95 |   position: absolute;
 96 |   top: 0px;
 97 |   right: 0px;
 98 |   bottom: 0px;
 99 |   left: 0px;
100 |   overflow: hidden;
101 | }
102 | .vc-alpha-gradient {
103 |   position: absolute;
104 |   top: 0px;
105 |   right: 0px;
106 |   bottom: 0px;
107 |   left: 0px;
108 | }
109 | .vc-alpha-container {
110 |   cursor: pointer;
111 |   position: relative;
112 |   z-index: 2;
113 |   height: 100%;
114 |   margin: 0 3px;
115 | }
116 | .vc-alpha-pointer {
117 |   z-index: 2;
118 |   position: absolute;
119 | }
120 | .vc-alpha-picker {
121 |   cursor: pointer;
122 |   width: 4px;
123 |   border-radius: 1px;
124 |   height: 8px;
125 |   box-shadow: 0 0 2px rgba(0, 0, 0, .6);
126 |   background: #fff;
127 |   margin-top: 1px;
128 |   transform: translateX(-2px);
129 | }
130 | </style>


--------------------------------------------------------------------------------
/fields/components/color/common/Checkboard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="vc-checkerboard" :style="bgStyle"></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | let _checkboardCache = {}
 7 | 
 8 | export default {
 9 |   name: 'Checkboard',
10 |   props: {
11 |     size: {
12 |       type: [Number, String],
13 |       default: 8
14 |     },
15 |     white: {
16 |       type: String,
17 |       default: '#fff'
18 |     },
19 |     grey: {
20 |       type: String,
21 |       default: '#e6e6e6'
22 |     }
23 |   },
24 |   computed: {
25 |     bgStyle () {
26 |       return {
27 |         'background-image': 'url(' + getCheckboard(this.white, this.grey, this.size) + ')'
28 |       }
29 |     }
30 |   }
31 | }
32 | 
33 | function renderCheckboard (c1, c2, size) {
34 |   // Dont Render On Server
35 |   if (typeof document === 'undefined') {
36 |     return null
37 |   }
38 |   let canvas = document.createElement('canvas')
39 |   canvas.width = canvas.height = size * 2
40 |   let ctx = canvas.getContext('2d')
41 |   // If no context can be found, return early.
42 |   if (!ctx) {
43 |     return null
44 |   }
45 |   ctx.fillStyle = c1
46 |   ctx.fillRect(0, 0, canvas.width, canvas.height)
47 |   ctx.fillStyle = c2
48 |   ctx.fillRect(0, 0, size, size)
49 |   ctx.translate(size, size)
50 |   ctx.fillRect(0, 0, size, size)
51 |   return canvas.toDataURL()
52 | }
53 | 
54 | function getCheckboard (c1, c2, size) {
55 |   let key = c1 + ',' + c2 + ',' + size
56 | 
57 |   if (_checkboardCache[key]) {
58 |     return _checkboardCache[key]
59 |   } else {
60 |     let checkboard = renderCheckboard(c1, c2, size)
61 |     _checkboardCache[key] = checkboard
62 |     return checkboard
63 |   }
64 | }
65 | </script>
66 | 
67 | <style>
68 | .vc-checkerboard {
69 |   position: absolute;
70 |   top: 0px;
71 |   right: 0px;
72 |   bottom: 0px;
73 |   left: 0px;
74 |   background-size: contain;
75 | }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/fields/components/color/common/EditableInput.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="vc-editable-input">
 3 |     <input class="vc-input__input"
 4 |       :aria-label="desc?label+'('+desc+')':label"
 5 |       v-model="val"
 6 |       @keydown="handleKeyDown"
 7 |       @input="update"
 8 |       ref="input">
 9 |     <span class="vc-input__label">{{label}}</span>
10 |     <span class="vc-input__desc">{{desc}}</span>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'editableInput',
17 |   props: {
18 |     label: String,
19 |     desc: String,
20 |     value: [String, Number],
21 |     max: Number,
22 |     min: Number,
23 |     arrowOffset: {
24 |       type: Number,
25 |       default: 1
26 |     }
27 |   },
28 |   computed: {
29 |     val: {
30 |       get () {
31 |         return this.value
32 |       },
33 |       set (v) {
34 |         if (!(this.max === undefined) && +v > this.max) {
35 |           this.$refs.input.value = this.max
36 |         } else {
37 |           return v
38 |         }
39 |       }
40 |     }
41 |   },
42 |   methods: {
43 |     update (e) {
44 |       this.handleChange(e.target.value)
45 |     },
46 |     handleChange (newVal) {
47 |       let data = {}
48 |       data[this.label] = newVal
49 |       if (data.hex === undefined && data['#'] === undefined) {
50 |         this.$emit('change', data)
51 |       } else if (newVal.length > 5) {
52 |         this.$emit('change', data)
53 |       }
54 |     },
55 |     handleKeyDown (e) {
56 |       let val = this.val
57 |       let number = Number(val)
58 | 
59 |       if (number) {
60 |         let amount = this.arrowOffset || 1
61 | 
62 |         // Up
63 |         if (e.keyCode === 38) {
64 |           val = number + amount
65 |           this.handleChange(val)
66 |           e.preventDefault()
67 |         }
68 | 
69 |         // Down
70 |         if (e.keyCode === 40) {
71 |           val = number - amount
72 |           this.handleChange(val)
73 |           e.preventDefault()
74 |         }
75 |       }
76 |     }
77 |   }
78 | }
79 | </script>
80 | 
81 | <style>
82 | .vc-editable-input {
83 |   position: relative;
84 | }
85 | .vc-input__input {
86 |   padding: 0;
87 |   border: 0;
88 |   outline: none;
89 | }
90 | .vc-input__label {
91 |   text-transform: capitalize;
92 | }
93 | </style>


--------------------------------------------------------------------------------
/fields/components/color/common/Hue.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :class="['vc-hue', directionClass]">
  3 |     <div class="vc-hue-container" ref="container"
  4 |       @mousedown="handleMouseDown"
  5 |       @touchmove="handleChange"
  6 |       @touchstart="handleChange">
  7 |       <div class="vc-hue-pointer" :style="{top: pointerTop, left: pointerLeft}">
  8 |         <div role="huePicker" class="vc-hue-picker"></div>
  9 |       </div>  
 10 |     </div>
 11 |   </div>
 12 | </template>
 13 | 
 14 | <script>
 15 | export default {
 16 |   name: 'Hue',
 17 |   props: {
 18 |     value: Object,
 19 |     direction: {
 20 |       type: String,
 21 |       // [horizontal | vertical]
 22 |       default: 'horizontal'
 23 |     }
 24 |   },
 25 |   data () {
 26 |     return {
 27 |       oldHue: 0,
 28 |       pullDirection: ''
 29 |     }
 30 |   },
 31 |   computed: {
 32 |     colors: () => {
 33 |       const h = this.value.hsl.h
 34 |       if (h !== 0 && h - this.oldHue > 0) {
 35 |         this.pullDirection = 'right'
 36 |       }
 37 |       if (h !== 0 && h - this.oldHue < 0) {
 38 |         this.pullDirection = 'left'
 39 |       }
 40 |       this.oldHue = h
 41 |       return this.value
 42 |     },
 43 |     directionClass () {
 44 |       return {
 45 |         'vc-hue--horizontal': this.direction === 'horizontal',
 46 |         'vc-hue--vertical': this.direction === 'vertical'
 47 |       }
 48 |     },
 49 |     pointerTop () {
 50 |       if (this.direction === 'vertical') {
 51 |         if (this.colors.hsl.h === 0 && this.pullDirection === 'right') return 0
 52 |         return -((this.colors.hsl.h * 100) / 360) + 100 + '%'
 53 |       } else {
 54 |         return 0
 55 |       }
 56 |     },
 57 |     pointerLeft () {
 58 |       if (this.direction === 'vertical') {
 59 |         return 0
 60 |       } else {
 61 |         if (this.colors.hsl.h === 0 && this.pullDirection === 'right') return '100%'
 62 |         return (this.colors.hsl.h * 100) / 360 + '%'
 63 |       }
 64 |     }
 65 |   },
 66 |   methods: {
 67 |     handleChange (e, skip) {
 68 |       !skip && e.preventDefault()
 69 | 
 70 |       let container = this.$refs.container
 71 |       let containerWidth = container.clientWidth
 72 |       let containerHeight = container.clientHeight
 73 | 
 74 |       let xOffset = container.getBoundingClientRect().left + window.pageXOffset
 75 |       let yOffset = container.getBoundingClientRect().top + window.pageYOffset
 76 |       let pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0)
 77 |       let pageY = e.pageY || (e.touches ? e.touches[0].pageY : 0)
 78 |       let left = pageX - xOffset
 79 |       let top = pageY - yOffset
 80 | 
 81 |       let h
 82 |       let percent
 83 | 
 84 |       if (this.direction === 'vertical') {
 85 |         if (top < 0) {
 86 |           h = 360
 87 |         } else if (top > containerHeight) {
 88 |           h = 0
 89 |         } else {
 90 |           percent = -(top * 100 / containerHeight) + 100
 91 |           h = (360 * percent / 100)
 92 |         }
 93 | 
 94 |         if (this.colors.hsl.h !== h) {
 95 |           this.$emit('change', {
 96 |             h: h,
 97 |             s: this.colors.hsl.s,
 98 |             l: this.colors.hsl.l,
 99 |             a: this.colors.hsl.a,
100 |             source: 'hsl'
101 |           })
102 |         }
103 |       } else {
104 |         if (left < 0) {
105 |           h = 0
106 |         } else if (left > containerWidth) {
107 |           h = 360
108 |         } else {
109 |           percent = left * 100 / containerWidth
110 |           h = (360 * percent / 100)
111 |         }
112 | 
113 |         if (this.colors.hsl.h !== h) {
114 |           this.$emit('change', {
115 |             h: h,
116 |             s: this.colors.hsl.s,
117 |             l: this.colors.hsl.l,
118 |             a: this.colors.hsl.a,
119 |             source: 'hsl'
120 |           })
121 |         }
122 |       }
123 |     },
124 |     handleMouseDown (e) {
125 |       this.handleChange(e, true)
126 |       window.addEventListener('mousemove', this.handleChange)
127 |       window.addEventListener('mouseup', this.handleMouseUp)
128 |     },
129 |     handleMouseUp (e) {
130 |       this.unbindEventListeners()
131 |     },
132 |     unbindEventListeners () {
133 |       window.removeEventListener('mousemove', this.handleChange)
134 |       window.removeEventListener('mouseup', this.handleMouseUp)
135 |     }
136 |   }
137 | }
138 | </script>
139 | 
140 | <style>
141 | .vc-hue {
142 |   position: absolute;
143 |   top: 0px;
144 |   right: 0px;
145 |   bottom: 0px;
146 |   left: 0px;
147 |   border-radius: 2px;
148 | }
149 | .vc-hue--horizontal {
150 |   background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
151 | }
152 | .vc-hue--vertical {
153 |   background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
154 | }
155 | .vc-hue-container {
156 |   cursor: pointer;
157 |   margin: 0 2px;
158 |   position: relative;
159 |   height: 100%;
160 | }
161 | .vc-hue-pointer {
162 |   z-index: 2;
163 |   position: absolute;
164 | }
165 | .vc-hue-picker {
166 |   cursor: pointer;
167 |   margin-top: 1px;
168 |   width: 4px;
169 |   border-radius: 1px;
170 |   height: 8px;
171 |   box-shadow: 0 0 2px rgba(0, 0, 0, .6);
172 |   background: #fff;
173 |   transform: translateX(-2px) ;
174 | }
175 | </style>
176 | 


--------------------------------------------------------------------------------
/fields/components/color/common/Saturation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div role="saturationPanel" class="vc-saturation"
  3 |     :style="{background: bgColor}"
  4 |     ref="container"
  5 |     @mousedown="handleMouseDown"
  6 |     @touchmove="handleChange"
  7 |     @touchstart="handleChange">
  8 |     <div class="vc-saturation--white"></div>
  9 |     <div class="vc-saturation--black"></div>
 10 |     <div role="currentSaturationPointer" class="vc-saturation-pointer" :style="{top: pointerTop, left: pointerLeft}">
 11 |       <div class="vc-saturation-circle"></div>
 12 |     </div>
 13 |   </div>
 14 | </template>
 15 | 
 16 | <script>
 17 | import throttle from 'lodash.throttle'
 18 | 
 19 | export default {
 20 |   name: 'Saturation',
 21 |   props: {
 22 |     value: Object
 23 |   },
 24 |   computed: {
 25 |     colors () {
 26 |       return this.value
 27 |     },
 28 |     bgColor () {
 29 |       return `hsl(${this.colors.hsv.h}, 100%, 50%)`
 30 |     },
 31 |     pointerTop () {
 32 |       return (-(this.colors.hsv.v * 100) + 1) + 100 + '%'
 33 |     },
 34 |     pointerLeft () {
 35 |       return this.colors.hsv.s * 100 + '%'
 36 |     }
 37 |   },
 38 |   methods: {
 39 |     throttle: throttle((fn, data) => {
 40 |       fn(data)
 41 |     }, 20,
 42 |       {
 43 |         'leading': true,
 44 |         'trailing': false
 45 |       }),
 46 |     handleChange (e, skip) {
 47 |       !skip && e.preventDefault()
 48 |       let container = this.$refs.container
 49 |       let containerWidth = container.clientWidth
 50 |       let containerHeight = container.clientHeight
 51 | 
 52 |       let xOffset = container.getBoundingClientRect().left + window.pageXOffset
 53 |       let yOffset = container.getBoundingClientRect().top + window.pageYOffset
 54 |       let pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0)
 55 |       let pageY = e.pageY || (e.touches ? e.touches[0].pageY : 0)
 56 |       let left = pageX - xOffset
 57 |       let top = pageY - yOffset
 58 | 
 59 |       if (left < 0) {
 60 |         left = 0
 61 |       } else if (left > containerWidth) {
 62 |         left = containerWidth
 63 |       } else if (top < 0) {
 64 |         top = 0
 65 |       } else if (top > containerHeight) {
 66 |         top = containerHeight
 67 |       }
 68 | 
 69 |       let saturation = left / containerWidth
 70 |       let bright = -(top / containerHeight) + 1
 71 | 
 72 |       bright = bright > 0 ? bright : 0
 73 |       bright = bright > 1 ? 1 : bright
 74 | 
 75 |       this.throttle(this.onChange, {
 76 |         h: this.colors.hsv.h,
 77 |         s: saturation,
 78 |         v: bright,
 79 |         a: this.colors.hsv.a,
 80 |         source: 'hsva'
 81 |       })
 82 |     },
 83 |     onChange (param) {
 84 |       this.$emit('change', param)
 85 |     },
 86 |     handleMouseDown () {
 87 |       window.addEventListener('mousemove', this.handleChange)
 88 |       window.addEventListener('mouseup', this.handleChange)
 89 |       window.addEventListener('mouseup', this.handleMouseUp)
 90 |     },
 91 |     handleMouseUp () {
 92 |       this.unbindEventListeners()
 93 |     },
 94 |     unbindEventListeners () {
 95 |       window.removeEventListener('mousemove', this.handleChange)
 96 |       window.removeEventListener('mouseup', this.handleChange)
 97 |       window.removeEventListener('mouseup', this.handleMouseUp)
 98 |     }
 99 |   }
100 | }
101 | </script>
102 | 
103 | <style>
104 | .vc-saturation,
105 | .vc-saturation--white,
106 | .vc-saturation--black {
107 |   cursor: pointer;
108 |   position: absolute;
109 |   top: 0;
110 |   left: 0;
111 |   right: 0;
112 |   bottom: 0;
113 | }
114 | 
115 | .vc-saturation--white {
116 |   background: linear-gradient(to right, #fff, rgba(255,255,255,0));
117 | }
118 | .vc-saturation--black {
119 |   background: linear-gradient(to top, #000, rgba(0,0,0,0));
120 | }
121 | .vc-saturation-pointer {
122 |   cursor: pointer;
123 |   position: absolute;
124 | }
125 | .vc-saturation-circle {
126 |   cursor: head;
127 |   width: 4px;
128 |   height: 4px;
129 |   box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3), 0 0 1px 2px rgba(0,0,0,.4);
130 |   border-radius: 50%;
131 |   transform: translate(-2px, -2px);
132 | }
133 | </style>


--------------------------------------------------------------------------------
/fields/components/color/index.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Field from '../base.vue'
 3 | import FieldAbstract from '../../abstract'
 4 | import { fieldRender } from '../../render-field'
 5 | 
 6 | import Color from './color'
 7 | export default {
 8 |   extends: FieldAbstract,
 9 |   components: {
10 |     Field, Color
11 |   },
12 |   name: 'field-color',
13 |   data: () => ({
14 |     hex: '',
15 |     show: false
16 |   }),
17 |   props: {
18 |     color: {
19 |       type: String,
20 |       default: 'rgba(18, 246, 118, 0.79)'
21 |     },
22 |     colorType: {
23 |       type: String,
24 |       default: 'rgba'
25 |     }
26 |   },
27 |   render (h, el = this) {
28 |     return fieldRender(h, el, 
29 |       h('div', { slot: 'component', class: { 'control': true, 'is-expanded': el.expanded, 'has-icons-left': el.icon } }, [
30 |         h('div', { class: 'color', style: { 'background': el.hex }, on: {
31 |             click: () => el.show = !el.show
32 |           }
33 |         }),
34 |         el.show ?
35 |         h('color', { class: 'color-select', ref: 'ColorSelect', props: { value: el.hex }, on: {
36 |             input: (colors) => el.updateValue(el.colorTransform(colors))
37 |           }
38 |         })
39 |         : null
40 |       ])
41 |     )
42 |   },
43 |   methods: {
44 |     colorTransform (color) {
45 |       switch (this.colorType) {
46 |         case 'rgba': return 'rgba(' + color.rgba.r + ',' + color.rgba.g + ',' + color.rgba.b + ',' + color.rgba.a + ')'
47 |         case 'hex': return color.hex
48 |         case 'hsl': return 'hsl(' + color.hsl.h + ',' + color.hsl.s + ',' + color.hsl.l + ')'
49 |       }
50 |     },
51 |     updateValue (color) {
52 |       this.hex = color
53 |       this.$emit('input', color)
54 |     },
55 |     outside (event) {
56 |       const out = event.target.className
57 |       if (out !== 'color' && !out.split('vc-')[1]) {
58 |         this.show = false
59 |       }
60 |     }
61 |   },
62 |   watch: {
63 |     value (color) {
64 |       this.hex = color
65 |     }
66 |   },
67 |   created () {
68 |     this.hex = this.color
69 |     this.updateValue(this.color)
70 |     if (typeof window !== 'undefined') {
71 |       document.addEventListener('click', this.outside)
72 |     }
73 |   },
74 |   beforeDestroy () {
75 |     if (typeof window !== 'undefined') {
76 |       document.removeEventListener('click', this.outside)
77 |     }
78 |   }
79 | }
80 | </script>
81 | 
82 | <style coaped>
83 | .color-select {
84 |   z-index: 5;
85 |   position: absolute;
86 | }
87 | .color {
88 |   cursor: pointer;
89 |   display: inline-block;
90 |   width: 60px;
91 |   height: 37px;
92 |   margin: 0 10px 0 0;
93 |   border-radius: 3px;
94 |   border: 1px solid #e8e5e5;
95 |   box-shadow: 0 2px 3px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
96 | }
97 | </style>
98 | 


--------------------------------------------------------------------------------
/fields/components/color/mixin/color.js:
--------------------------------------------------------------------------------
 1 | import tinycolor from 'tinycolor2'
 2 | 
 3 | function _colorChange (data, oldHue) {
 4 |   var alpha = data && data.a
 5 |   var color
 6 | 
 7 |   // hsl is better than hex between conversions
 8 |   if (data && data.hsl) {
 9 |     color = tinycolor(data.hsl)
10 |   } else if (data && data.hex && data.hex.length > 0) {
11 |     color = tinycolor(data.hex)
12 |   } else {
13 |     color = tinycolor(data)
14 |   }
15 | 
16 |   if (color && (color._a === undefined || color._a === null)) {
17 |     color.setAlpha(alpha || 1)
18 |   }
19 | 
20 |   var hsl = color.toHsl()
21 |   var hsv = color.toHsv()
22 | 
23 |   if (hsl.s === 0) {
24 |     hsv.h = hsl.h = data.h || (data.hsl && data.hsl.h) || oldHue || 0
25 |   }
26 | 
27 |   return {
28 |     hsl: hsl,
29 |     hex: color.toHexString().toUpperCase(),
30 |     rgba: color.toRgb(),
31 |     hsv: hsv,
32 |     oldHue: data.h || oldHue || hsl.h,
33 |     source: data.source,
34 |     a: data.a || color.getAlpha()
35 |   }
36 | }
37 | 
38 | export default {
39 |   props: ['value'],
40 |   data () {
41 |     return {
42 |       val: _colorChange(this.value)
43 |     }
44 |   },
45 |   computed: {
46 |     colors: {
47 |       get () {
48 |         return this.val
49 |       },
50 |       set (newVal) {
51 |         this.val = newVal
52 |         this.$emit('input', newVal)
53 |       }
54 |     }
55 |   },
56 |   watch: {
57 |     value (newVal) {
58 |       this.val = _colorChange(newVal)
59 |     }
60 |   },
61 |   methods: {
62 |     colorChange (data, oldHue) {
63 |       this.oldHue = this.colors.hsl.h
64 |       this.colors = _colorChange(data, oldHue || this.oldHue)
65 |     },
66 |     isValidHex (hex) {
67 |       return tinycolor(hex).isValid()
68 |     },
69 |     simpleCheckForValidColor (data) {
70 |       var keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v']
71 |       var checked = 0
72 |       var passed = 0
73 | 
74 |       for (var i = 0; i < keysToCheck.length; i++) {
75 |         var letter = keysToCheck[i]
76 |         if (data[letter]) {
77 |           checked++
78 |           if (!isNaN(data[letter])) {
79 |             passed++
80 |           }
81 |         }
82 |       }
83 | 
84 |       if (checked === passed) {
85 |         return data
86 |       }
87 |     }
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/fields/components/date.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <field :class="classNames" v-bind="{id, inline, problems, label, validate, title, tooltip, editable, visible}">
  3 |   <div slot="component" class="control">
  4 |     <b-datepicker
  5 |         v-model="model"
  6 |         :placeholder="placeholder"
  7 |         :min-date="minDate"
  8 |         :max-date="maxDate"
  9 |         :date-formatter="dateFormat"
 10 |         :size="size"
 11 |         color="is-white"
 12 |         @input="applyValue"
 13 |         >
 14 |     </b-datepicker>
 15 |   </div>
 16 | </field>
 17 | </template>
 18 | 
 19 | <script>
 20 | import Field from "./base.vue";
 21 | import FieldAbstract from "../abstract";
 22 | 
 23 | export default {
 24 |   extends: FieldAbstract,
 25 |   components: {
 26 |     Field
 27 |   },
 28 |   name: "field-date",
 29 |   props: {
 30 |     type: {
 31 |       type: String,
 32 |       default: "is-primary"
 33 |     },
 34 |     format: {
 35 |       type: String,
 36 |       default: 'pt-BR'
 37 |     },
 38 |     disabled: {
 39 |       type: Boolean,
 40 |       default: () => false
 41 |     },
 42 |     minDate: {
 43 |       type: String,
 44 |       default: null
 45 |     },
 46 |     maxDate: {
 47 |       type: String,
 48 |       default: null
 49 |     },
 50 |     size: {
 51 |       type: String,
 52 |       default: "is-small"
 53 |     }
 54 |   },
 55 |   data: () => ({
 56 |     model: null,
 57 |     isMouseDown: false
 58 |   }),
 59 |   methods: {
 60 |     applyValue (value) {
 61 |       this.$emit("input", value)
 62 |       return
 63 |     },
 64 |     dateFormat (date) {
 65 |       let formated = date.toLocaleDateString(this.format)
 66 |       this.applyValue(formated)
 67 |       return formated
 68 |     },
 69 |     clearValue () {
 70 |       this.model = this.cleaning
 71 |       this.updateValue(this.value)
 72 |     }
 73 |   },
 74 |   mounted() {
 75 |     this.applyValue(this.value)
 76 |   }
 77 | };
 78 | </script>
 79 | 
 80 | <style>
 81 | .datepicker {
 82 |   font-size: 0.875rem;
 83 | }
 84 | .datepicker .dropdown,
 85 | .datepicker .dropdown-trigger {
 86 |   width: 100%;
 87 | }
 88 | .datepicker .dropdown-item {
 89 |   font-size: inherit;
 90 | }
 91 | .datepicker .datepicker-header {
 92 |   padding-bottom: 0.875rem;
 93 |   margin-bottom: 0.875rem;
 94 |   border-bottom: 1px solid #666;
 95 | }
 96 | .datepicker .datepicker-header a {
 97 |   color: #000;
 98 | }
 99 | .datepicker .datepicker-footer {
100 |   padding-top: 0.875rem;
101 |   border-top: 1px solid #666;
102 | }
103 | .datepicker .datepicker-table {
104 |   display: table;
105 |   margin: 0 auto 0.875rem auto;
106 | }
107 | .datepicker .datepicker-table .datepicker-cell {
108 |   text-align: center;
109 |   vertical-align: middle;
110 |   display: table-cell;
111 |   border-radius: 50%;
112 |   padding: 0.5rem 0.75rem;
113 | }
114 | .datepicker .datepicker-table .datepicker-header {
115 |   display: table-header-group;
116 | }
117 | .datepicker .datepicker-table .datepicker-header .datepicker-cell {
118 |   color: grey;
119 |   font-weight: 12px;
120 | }
121 | .datepicker .datepicker-table .datepicker-body {
122 |   display: table-row-group;
123 | }
124 | .datepicker .datepicker-table .datepicker-body .datepicker-row {
125 |   display: table-row;
126 | }
127 | .datepicker
128 |   .datepicker-table
129 |   .datepicker-body
130 |   .datepicker-row
131 |   .datepicker-cell.is-unselectable {
132 |   color: #999;
133 | }
134 | .datepicker
135 |   .datepicker-table
136 |   .datepicker-body
137 |   .datepicker-row
138 |   .datepicker-cell.is-today {
139 |   border: solid 1px #ccc;
140 | }
141 | .datepicker
142 |   .datepicker-table
143 |   .datepicker-body
144 |   .datepicker-row
145 |   .datepicker-cell.is-selectable {
146 |   color: #333333;
147 | }
148 | .datepicker
149 |   .datepicker-table
150 |   .datepicker-body
151 |   .datepicker-row
152 |   .datepicker-cell.is-selectable:hover:not(.is-selected),
153 | .datepicker
154 |   .datepicker-table
155 |   .datepicker-body
156 |   .datepicker-row
157 |   .datepicker-cell.is-selectable:focus:not(.is-selected) {
158 |   background-color: #000;
159 |   color: #fff;
160 |   cursor: pointer;
161 | }
162 | .datepicker
163 |   .datepicker-table
164 |   .datepicker-body
165 |   .datepicker-row
166 |   .datepicker-cell.is-selected {
167 |   background-color: #222;
168 |   color: #fff;
169 | }
170 | .datepicker .datepicker-table .datepicker-body.has-events .datepicker-cell {
171 |   padding: 0.3rem 0.75rem 0.75rem;
172 | }
173 | .datepicker
174 |   .datepicker-table
175 |   .datepicker-body.has-events
176 |   .datepicker-cell.has-event {
177 |   position: relative;
178 | }
179 | .datepicker
180 |   .datepicker-table
181 |   .datepicker-body.has-events
182 |   .datepicker-cell.has-event
183 |   .events {
184 |   bottom: 0.425rem;
185 |   display: flex;
186 |   justify-content: center;
187 |   left: 0;
188 |   padding: 0 0.35rem;
189 |   position: absolute;
190 |   width: 100%;
191 | }
192 | .datepicker
193 |   .datepicker-table
194 |   .datepicker-body.has-events
195 |   .datepicker-cell.has-event
196 |   .events
197 |   .event.is-primary {
198 |   background-color: #333;
199 | }
200 | .datepicker
201 |   .datepicker-table
202 |   .datepicker-body.has-events
203 |   .datepicker-cell.has-event.dots
204 |   .event {
205 |   border-radius: 50%;
206 |   height: 0.35em;
207 |   margin: 0 0.1em;
208 |   width: 0.35em;
209 | }
210 | .datepicker
211 |   .datepicker-table
212 |   .datepicker-body.has-events
213 |   .datepicker-cell.has-event.bars
214 |   .event {
215 |   height: 0.25em;
216 |   width: 100%;
217 | }
218 | .datepicker
219 |   .datepicker-table
220 |   .datepicker-body.has-events
221 |   .datepicker-cell.is-selected {
222 |   overflow: hidden;
223 | }
224 | .datepicker
225 |   .datepicker-table
226 |   .datepicker-body.has-events
227 |   .datepicker-cell.is-selected
228 |   .events
229 |   .event.is-primary {
230 |   background-color: #333;
231 | }
232 | </style>
233 | 


--------------------------------------------------------------------------------
/fields/components/select.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | import Field from './base.vue'
  3 | import FieldAbstract from '../abstract'
  4 | import { fieldRender } from '../render-field'
  5 | 
  6 | export default {
  7 |   extends: FieldAbstract,
  8 |   components: {
  9 |     Field
 10 |   },
 11 |   name: 'field-select',
 12 |   props: {
 13 |     type: {
 14 |       type: String,
 15 |       default: 'radio'
 16 |     },
 17 |     options: {
 18 |       type: Array,
 19 |       default: () => ([])
 20 |     },
 21 |     multiple: {
 22 |       type: Boolean,
 23 |       default: () => false
 24 |     },
 25 |     expanded: {
 26 |       type: Boolean,
 27 |       default: () => false
 28 |     },
 29 |     nativeSize: [String, Number],
 30 |     icon: {
 31 |       type: String,
 32 |       default: ''
 33 |     },
 34 |     separator: {
 35 |       type: Boolean,
 36 |       default: () => false
 37 |     },
 38 |     loading: {
 39 |       type: Boolean,
 40 |       default: () => false
 41 |     },
 42 |     rounded: {
 43 |       type: Boolean,
 44 |       default: () => false
 45 |     },
 46 |     source: {
 47 |       type: Function
 48 |     },
 49 |     empty: {
 50 |       type: String,
 51 |       default: ''
 52 |     }
 53 |   },
 54 |   data: () => ({
 55 |     model: null
 56 |   }),
 57 |   render (h, el = this) {
 58 |     return fieldRender(h, el,
 59 |       h('div', { slot: 'component', class: { 'control': true, 'is-expanded': el.expanded, 'has-icons-left': el.icon } }, [
 60 |         h('span', { class: [ 'select', el.divClasses ]}, [
 61 |           h('select', { domProps: { value: el.model }, ref: 'select', props: { size: el.nativeSize, disable: el.disable, multiple: el.multiple },
 62 |             on: { change: (event) => el.$emit('input', event.target.value) } }, [
 63 |               el.placeholder ?
 64 |                 h('option', { attrs: { value: null, selected: true, disabled: true, hidden: true } }, el.placeholder)
 65 |               : null,
 66 |               el.options ?
 67 |                 el.options.map(option => h('option', { attrs: { value: option.value } }, option.label))
 68 |               : null
 69 |             ])
 70 |         ]),
 71 |         el.icon ?
 72 |           h('b-icon', { class: 'is-left', props: { icon: el.icon } })
 73 |         : null
 74 |       ])
 75 |     )
 76 |   },
 77 |   computed: {
 78 |     divClasses () {
 79 |       return [this.size, {
 80 |         'is-fullwidth': this.expanded,
 81 |         'is-loading': this.loading,
 82 |         'is-multiple': this.multiple,
 83 |         'is-rounded': this.rounded,
 84 |         'is-empty': [undefined, null, ''].includes(this.model),
 85 |         'is-danger': this.problems.length
 86 |       }]
 87 |     }
 88 |   },
 89 |   methods: {
 90 |     applyValue (value) {
 91 |       if (!this.multiple) {
 92 |         this.model = value
 93 |         return
 94 |       }
 95 |       if (Array.isArray(value)) {
 96 |         this.model = value
 97 |       }
 98 |     },
 99 |     clearValue () {
100 |       this.model = this.cleaning
101 |       this.updateValue(this.model)
102 |     }
103 |   },
104 |   watch: {
105 |     value (value) {
106 |       this.applyValue(value)
107 |     }
108 |   },
109 |   created () {
110 |     if (this.multiple) {
111 |       this.model = []
112 |     }
113 |     if (this.source) {
114 |       this.source(options => options.forEach(option => this.options.push(option)))
115 |     }
116 |   },
117 |   mounted () {
118 |     this.applyValue(this.value)
119 |   }
120 | }
121 | </script>
122 | 


--------------------------------------------------------------------------------
/fields/components/switch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <field :class="classNames" v-bind="{id, inline, problems, label, validate, title, tooltip, editable, visible}">
 3 |   <div slot="component" class="control">
 4 |     <label
 5 |         class="switch"
 6 |         :class="[this.size, { 'is-disabled': this.disabled }]"
 7 |         ref="label"
 8 |         :disabled="disabled"
 9 |         :tabindex="disabled ? false : 0"
10 |         @keydown.prevent.enter.space="$refs.label.click()"
11 |         @mousedown="isMouseDown = true"
12 |         @mouseup="isMouseDown = false"
13 |         @mouseout="isMouseDown = false"
14 |         @blur="isMouseDown = false">
15 |         <input
16 |             v-model="model"
17 |             type="checkbox"
18 |             @click.stop
19 |             :disabled="disabled"
20 |             :name="name"
21 |             :true-value="valueTrue"
22 |             :false-value="valueFalse">
23 |         <span class="check" :class="[{ 'is-elastic': isMouseDown && !disabled }, type]"/>
24 |         <span class="control-label"><slot/></span>
25 |     </label>
26 |   </div>
27 | </field>
28 | </template>
29 | 
30 | <script>
31 | import Field from './base.vue'
32 | import FieldAbstract from '../abstract'
33 | 
34 | export default {
35 |   extends: FieldAbstract,
36 |   components: {
37 |     Field
38 |   },
39 |   name: 'field-switch',
40 |   props: {
41 |     type: {
42 |       type: String,
43 |       default: 'is-primary'
44 |     },
45 |     valueTrue: {
46 |       type: [Object, Array, String, Number],
47 |       default: () => true
48 |     },
49 |     valueFalse: {
50 |       type: [Object, Array, String, Number],
51 |       default: () => false
52 |     },
53 |     disabled: {
54 |       type: Boolean,
55 |       default: () => false
56 |     },
57 |     size: {
58 |       type: String,
59 |       default: 'is-small'
60 |     }
61 |   },
62 |   data: () => ({
63 |     model: null,
64 |     isMouseDown: false
65 |   }),
66 |   methods: {
67 |     applyValue (value) {
68 |       this.model = value
69 |       this.$emit('input', value)
70 |       return
71 |     },
72 |     clearValue () {
73 |       this.model = this.cleaning
74 |       this.updateValue(this.value)
75 |     }
76 |   },
77 |   watch: {
78 |     value (value) {
79 |       this.applyValue(value)
80 |     },
81 |     model (value) {
82 |       this.applyValue(value)
83 |     }
84 |   },
85 |   mounted () {
86 |     this.applyValue(this.value)
87 |   }
88 | }
89 | </script>


--------------------------------------------------------------------------------
/fields/components/text.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import Field from './base.vue'
 3 | import FieldAbstract from '../abstract'
 4 | import { mask } from '../../format'
 5 | import { fieldRender } from '../render-field'
 6 | 
 7 | export default {
 8 |   extends: FieldAbstract,
 9 |   components: {
10 |     Field
11 |   },
12 |   name: 'field-text',
13 |   data: () => ({
14 |     model: '',
15 |     maxlength: '',
16 |     isFocused: false
17 |   }),
18 |   render (h, el = this) {
19 |     return fieldRender(h, el,
20 |       h('div', { slot: 'component' }, [
21 |         el.editable ?
22 |         h('div', { class: { 'has-error': el.problems.length } }, [
23 |           h('div', { class: 'control is-clearfix' }, [
24 |             h(el.input, { class: 'input', ref: 'inputText',
25 |               props: {
26 |                 id: Number,
27 |                 type: el.type,
28 |                 name: String,
29 |                 placeholder: el.placeholder,
30 |                 value: el.value,
31 |                 maxlength: Number,
32 |                 disabled: Boolean
33 |               },
34 |               domProps: { data: el.data },
35 |               attrs: {
36 |                 maxlength: el.max,
37 |                 type: el.type,
38 |                 value: el.data
39 |               },
40 |               style: { 'min-height': el.minHeight },
41 |               on: {
42 |                 keypress: el.keypress, keyup: el.keyup,
43 |                 blur: () => {
44 |                   el.isFocused = false
45 |                 },
46 |                 focus: () => {
47 |                   el.isFocused = true
48 |                 },
49 |                 'keydown.enter.stop.prevent': el.enter,
50 |                 input: (event) => el.updateValue(event.target.value)
51 |               }
52 |             })
53 |           ])
54 |         ])
55 |         : null,
56 |         el.maxlength ?
57 |           h('small', { class: ['help counter', { 'is-invisible': !el.isFocused }] }, el.valueLength + '/' + el.maxlength)
58 |         : null
59 |       ])
60 |     )
61 |   },
62 |   methods: {
63 |     applyValue (value) {
64 |       if ([undefined, null, ''].includes(value)) {
65 |         return
66 |       }
67 |       if (this.mask) {
68 |         this.maxlength = this.mask.length
69 |         value = mask(this.mask, String(value))
70 |       }
71 |       if (this.$refs.inputText) {
72 |         this.$refs.inputText.value = value
73 |       }
74 |     }
75 |   },
76 |   computed: {
77 |     valueLength () {
78 |       if (typeof this.value === 'string') {
79 |         return this.value.length
80 |       } else if (typeof this.value === 'number') {
81 |         return this.value.toString().length
82 |       }
83 |       return 0
84 |     }
85 |   },
86 |   watch: {
87 |     value (value) {
88 |       this.applyValue(value)
89 |     },
90 |     mask () {
91 |       this.applyValue(this.value)
92 |     }
93 |   },
94 |   mounted () {
95 |     this.applyValue(this.value)
96 |   }
97 | }
98 | </script>
99 | 


--------------------------------------------------------------------------------
/fields/index.js:
--------------------------------------------------------------------------------
1 | export { default as FieldText } from './components/text.vue'
2 | export { default as FieldSelect } from './components/select.vue'
3 | export { default as FieldSwitch } from './components/switch.vue'
4 | export { default as FieldColor } from './components/color/index.vue'
5 | export { default as FieldDate } from './components/date.vue'
6 | 


--------------------------------------------------------------------------------
/fields/render-field.js:
--------------------------------------------------------------------------------
 1 | export const fieldRender = (h, el, ctx) => {
 2 |   return h('field', { class: el.classNames, props: {
 3 |     id: el.id, 
 4 |     inline: el.inline, 
 5 |     problems: el.problems,
 6 |     label: el.label, 
 7 |     validate: el.validate,
 8 |     title: el.title,
 9 |     tooltip: el.tooltip,
10 |     editable: el.editable,
11 |     visible: el.visible
12 |   } }, [ctx])
13 | }


--------------------------------------------------------------------------------
/form.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="fix columns is-multiline">
 3 |     <component v-for="schema in schemas" :key="schema.field" :is="schema.component"
 4 |         v-bind="schema" v-model="record[schema.field]"
 5 |         @input="formInput(schema.field, arguments)" @event="formEvent"></component>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import { validationMixin as validation } from 'vuelidate'
11 | import { data, methods, props, watch } from './model'
12 | export default {
13 |   mixins: [validation, data, methods, props, watch],
14 |   name: 'AppForm',
15 |   validations () {
16 |     const validations = this.generateValidations(this.fields)
17 |     return {
18 |       record: validations
19 |     }
20 |   },
21 |   created () {
22 |     this.updateComponents()
23 |     this.updateSchemas()
24 |     this.updateRecord()
25 |   }
26 | }
27 | </script>
28 | 
29 | <style>
30 | 
31 | </style>
32 | 


--------------------------------------------------------------------------------
/format/index.js:
--------------------------------------------------------------------------------
  1 | import moment from 'moment'
  2 | 
  3 | export const get = (object, keys, defaultVal) => {
  4 |   keys = Array.isArray(keys) ? keys : keys.split('.')
  5 |   object = object[keys[0]]
  6 |   if (object && keys.length > 1 ) {
  7 |     return get( object, keys.slice(1))
  8 |   }
  9 |   return object === undefined ? defaultVal : object
 10 | }
 11 | 
 12 | export const mask = (pattern, value) => {
 13 |   let masked = ''
 14 |   value = unMask(pattern, value)
 15 |   if (!value) {
 16 |     return ''
 17 |   }
 18 |   let j = 0
 19 |   for (let i = 0; i < pattern.length; i++) {
 20 |     if (pattern[i] === '*') {
 21 |       masked += '*'
 22 |       continue
 23 |     }
 24 |     if (j > value.length - 1) {
 25 |       return masked
 26 |     }
 27 |     if (pattern[i] === '#') {
 28 |       masked += value[j]
 29 |       j++
 30 |       continue
 31 |     }
 32 |     masked += pattern[i]
 33 |   }
 34 |   return masked
 35 | }
 36 | 
 37 | export const noDuplicates = (array) => {
 38 |   const a = array.concat()
 39 |   for (let i = 0; i < a.length; ++i) {
 40 |     for (let j = i + 1; j < a.length; ++j) {
 41 |       if (a[i] === a[j]) {
 42 |         a.splice(j--, 1)
 43 |       }
 44 |     }
 45 |   }
 46 |   return a
 47 | }
 48 | 
 49 | export const unMask = (pattern, value) => {
 50 |   const chars = noDuplicates(String(pattern).replace(/[#,*]/g, '').split(''))
 51 |   return String(value).replace(new RegExp('[' + chars.join(',') + ']', 'g'), '')
 52 | }
 53 | 
 54 | export const parseDate = (value, format = 'DD/MM/YYYY') => {
 55 |   if (!String(value).substring(0, 10).match(/^\d{4}-\d{2}-\d{2}$/)) {
 56 |     return ''
 57 |   }
 58 |   const date = moment(value)
 59 |   if (!date.isValid()) {
 60 |     return ''
 61 |   }
 62 |   return moment(value).format(format)
 63 | }
 64 | 
 65 | export const formatDate = (value) => {
 66 |   return parseDate(value)
 67 | }
 68 | 
 69 | export const formatDateTime = (value) => {
 70 |   return parseDate(value, 'DD/MM/YYYY HH:mm')
 71 | }
 72 | 
 73 | export const formatBoolean = (value) => {
 74 |   let icon = 'check_box_outline_blank'
 75 |   if (value) {
 76 |     icon = 'check_box'
 77 |   }
 78 |   return '<i class="material-icons" style="margin: 0 0 0 10px; font-size: 20px; line-height: 0;">' + icon + '</i>'
 79 | }
 80 | 
 81 | export const formatMoney = (value) => {
 82 |   return '<div style="text-align: right;">' + money(value) + '</div>'
 83 | }
 84 | 
 85 | export const formatPhone = (value) => {
 86 |   let pattern = '(##) ####-####'
 87 |   if (length > 13) {
 88 |     pattern = '(##) #-####-####'
 89 |   }
 90 |   return mask(pattern, value)
 91 | }
 92 | 
 93 | export const money = (value, precision = 2) => {
 94 |   if (typeof value === 'undefined') {
 95 |     value = 0
 96 |   }
 97 |   value = Number(value).toFixed(precision)
 98 | 
 99 |   value = String(value)
100 |     .replace(/\D/g, '')
101 |     .replace(/(\d)(\d{11})$/, '$1.$2')
102 |     .replace(/(\d)(\d{8})$/, '$1.$2')
103 |     .replace(/(\d)(\d{5})$/, '$1.$2')
104 | 
105 |   return value.replace(/(\d)(\d{2})$/, '$1,$2')
106 | }
107 | 
108 | export const formatOptions = (options) => {
109 |   return (value) => {
110 |     if (Array.isArray(options)) {
111 |       const option = options.find(option => String(option.value) === String(value))
112 |       return get(option, 'label', '')
113 |     }
114 |     return value
115 |   }
116 | }
117 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Buefy from 'buefy'
 3 | 
 4 | // F // later I fix it, no time to fix it now, so add full Buefy
 5 | Vue.use(Buefy)
 6 | 
 7 | import fields from './configure/field'
 8 | import * as FieldsComponents from './fields'
 9 | 
10 | const components = Object.assign({}, FieldsComponents)
11 | 
12 | Object.keys(components).forEach(key => {
13 |   Vue.component(key, components[key])
14 | })
15 | 
16 | export const field = (field, label, component, scopes = []) => {
17 |   return fields(field, label, component, scopes)
18 | }
19 | 
20 | export const filter = (fields, scope) => {
21 |   return fields.filter(field => scope ? field.scopes && field.scopes.includes(scope) : true)
22 | }
23 | 
24 | export { default as AppForm } from './form.vue'
25 | 


--------------------------------------------------------------------------------
/model/MixinData.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   data: () => ({
 3 |     components: {},
 4 |     schemas: {},
 5 |     record: {},
 6 |     tabSeletecd: '',
 7 |     currentStep: '',
 8 |     modified: false
 9 |   })
10 | }
11 | 


--------------------------------------------------------------------------------
/model/MixinMethods.js:
--------------------------------------------------------------------------------
  1 | import * as Validators from 'vuelidate/lib/validators'
  2 | 
  3 | const arrayToObject = (accumulate, item) => {
  4 |   accumulate[item.field] = item
  5 |   return accumulate
  6 | }
  7 | 
  8 | export default {
  9 |   methods: {
 10 |     /**
 11 |      */
 12 |     touch () {
 13 |       this.$v.$touch()
 14 |     },
 15 |     /**
 16 |      */
 17 |     reset () {
 18 |       this.$v.$reset()
 19 |     },
 20 |     /**
 21 |      * @param fields
 22 |      * @returns {Object}
 23 |      */
 24 |     generateValidations (fields) {
 25 |       if (!Array.isArray(fields)) {
 26 |         return {}
 27 |       }
 28 |       const validations = {}
 29 |       fields
 30 |         .filter(schema => !!schema.validate)
 31 |         .forEach(schema => {
 32 |           validations[schema.field] = this.configureValidation(schema.validate)
 33 |         })
 34 |       return validations
 35 |     },
 36 |     /**
 37 |      * @param {Object} validate
 38 |      * @return {Object}
 39 |      */
 40 |     configureValidation (validate) {
 41 |       const configure = {}
 42 |       Object.keys(validate).forEach(property => {
 43 |         let action = Validators[property]
 44 |         if (!action.length) {
 45 |           configure[property] = action
 46 |           return true
 47 |         }
 48 |         configure[property] = action((validate[property]))
 49 |       })
 50 |       return configure
 51 |     },
 52 |     /**
 53 |      */
 54 |     updateComponents () {
 55 |       const components = {}
 56 |       if (this.tabs.length) {
 57 |         this.tabs.forEach(tab => {
 58 |           components[tab.name] = this.fields.filter(field => field.tab === tab.name).reduce(arrayToObject, {})
 59 |         })
 60 |       }
 61 |       if (this.steps.length) {
 62 |         this.steps.forEach(step => {
 63 |           components[step.name] = this.fields.filter(field => field.step === step.name).reduce(arrayToObject, {})
 64 |         })
 65 |       }
 66 |       this.components = components
 67 |     },
 68 |     /**
 69 |      */
 70 |     updateSchemas () {
 71 |       this.schemas = this.fields.reduce(arrayToObject, {})
 72 |     },
 73 |     /**
 74 |      */
 75 |     updateRecord () {
 76 |       const reduce = (accumulate, field) => {
 77 |         accumulate[field] = this.data[field] || this.schemas[field].default
 78 |         if (this.$route.query[field]) {
 79 |           accumulate[field] = this.$route.query[field]
 80 |         }
 81 |         return accumulate
 82 |       }
 83 |       const record = Object.keys(this.schemas).reduce(reduce, {})
 84 |       this.setRecord(record)
 85 |     },
 86 |     /**
 87 |      * @param {Object} record
 88 |      * @returns this
 89 |      */
 90 |     setRecord (record) {
 91 |       this.record = record
 92 |       this.executeChange()
 93 |       return this
 94 |     },
 95 |     /**
 96 |      * @param {string} field
 97 |      * @param {Object} parameters
 98 |      */
 99 |     isProgrammatically (parameters) {
100 |       if (typeof parameters !== 'object') {
101 |         return false
102 |       }
103 |       const args = [...parameters]
104 |       if (args.length <= 1) {
105 |         return false
106 |       }
107 |       return parameters[1] === true
108 |     },
109 |     /**
110 |      * @param {string} field
111 |      * @param {Object} parameters
112 |      */
113 |     formInput (field, parameters = []) {
114 |       const programmatically = this.isProgrammatically(parameters)
115 |       if (programmatically) {
116 |         return
117 |       }
118 |       if (this.$v.record[field]) {
119 |         this.$v.record[field].$touch()
120 |       }
121 |       // pass errors to fields
122 |       this.schemas[field].errors = this.getErrors(field)
123 | 
124 |       // emit changes to parent
125 |       if (!this.readonly) {
126 |         this.fireEvent(field, 'change')
127 |         this.$emit('form~input', this.record)
128 |       }
129 | 
130 |       // get invalid fields
131 |       const reduce = (accumulate, key) => {
132 |         if (this.$v.record[key].$invalid) {
133 |           accumulate[key] = true
134 |         }
135 |         return accumulate
136 |       }
137 |       const invalids = Object.keys(this.$v.record).reduce(reduce, {})
138 |       // emit invalids to parent
139 |       this.$emit('form~valid', !this.$v.$invalid, invalids)
140 |     },
141 |     /**
142 |      * @param {string} event
143 |      * @param {Vue} $field
144 |      * @param {Object} parameters
145 |      */
146 |     formEvent (event, $field, parameters = {}) {
147 |       const field = $field.field
148 |       this.fireEvent(field, event, parameters)
149 |     },
150 |     /**
151 |      * @param {string} field
152 |      * @param {string} event
153 |      * @param {Object} parameters
154 |      */
155 |     fireEvent (field, event, parameters = {}) {
156 |       if (this.schemas[field] && this.schemas[field].events && typeof this.schemas[field].events[event] === 'function') {
157 |         this.schemas[field].events[event](this.record, this.schemas, this, parameters)
158 |       }
159 |     },
160 |     /**
161 |      */
162 |     executeChange () {
163 |       if (typeof this.change === 'function') {
164 |         this.change(this.record, this.schemas, this)
165 |       }
166 |       this.modified = true
167 |     },
168 |     /**
169 |      * @param {String} field
170 |      * @return {Array}
171 |      */
172 |     getErrors (field) {
173 |       const errors = []
174 |       if (this.schemas[field].validate && this.$v.record[field] && this.$v.record[field].$error) {
175 |         Object.keys(this.schemas[field].validate).forEach(rule => {
176 |           const status = this.$v.record[field][rule]
177 |           const parameters = this.$v.record[field].$params[rule]
178 |           errors.push({rule, status, parameters})
179 |         })
180 |       }
181 |       return errors
182 |     },
183 |     /**
184 |      * @param {string} namespace
185 |      * @param {AxiosResponse} response
186 |      */
187 |     fireWatch (namespace, response) {
188 |       if (this.watches[namespace] && typeof this.watches[namespace] === 'function') {
189 |         this.watches[namespace](this.record, this.schemas, this, response)
190 |       }
191 |     }
192 |   }
193 | }
194 | 


--------------------------------------------------------------------------------
/model/MixinProps.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   props: {
 3 |     tabs: {
 4 |       type: Array,
 5 |       default: () => ([])
 6 |     },
 7 |     tab: {
 8 |       type: String,
 9 |       default: () => ''
10 |     },
11 |     steps: {
12 |       type: Array,
13 |       default: () => ([])
14 |     },
15 |     step: {
16 |       type: String,
17 |       default: () => ''
18 |     },
19 |     fields: {
20 |       type: Array,
21 |       default: () => ([])
22 |     },
23 |     data: {
24 |       type: Object,
25 |       default: () => ({})
26 |     },
27 |     readonly: {
28 |       type: Boolean,
29 |       default: () => (false)
30 |     },
31 |     watches: {
32 |       type: Object,
33 |       default: () => ({})
34 |     },
35 |     change: {
36 |       type: Function
37 |     }
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/model/MixinWatch.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   watch: {
 3 |     /**
 4 |      * @param {Object} record
 5 |      * @param {Object} previous
 6 |      */
 7 |     data (record, previous) {
 8 |       if (!record !== previous) {
 9 |         this.setRecord(record)
10 |         this.fireWatch('set/record')
11 |       }
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/model/index.js:
--------------------------------------------------------------------------------
1 | export { default as data } from './MixinData'
2 | export { default as methods } from './MixinMethods'
3 | export { default as props } from './MixinProps'
4 | export { default as watch } from './MixinWatch'
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-genesis-forms",
 3 |   "version": "0.0.21",
 4 |   "description": "vue easy create forms",
 5 |   "main": "index.js",
 6 |   "readmeFilename": "README.md" ,
 7 |   "scripts": {
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "repository": {
11 |     "type": "git",
12 |     "url": "git+https://github.com/BlackMix/vue-genesis-forms.git"
13 |   },
14 |   "keywords": [
15 |     "vue",
16 |     "forms",
17 |     "genesis"
18 |   ],
19 |   "author": {
20 |     "name": "BlackMix",
21 |     "email": "mixchatmix3@gmail.com",
22 |     "homepage": "https://github.com/BlackMix"
23 |   },
24 |   "license": "MIT",
25 |   "bugs": {
26 |     "url": "https://github.com/BlackMix/vue-genesis-forms/issues"
27 |   },
28 |   "homepage": "https://github.com/BlackMix/vue-genesis-forms#readme",
29 |   "dependencies": {
30 |     "bulma": "^0.7.1",
31 |     "buefy": "^0.6.6",
32 |     "stylus": "^0.54.5",
33 |     "stylus-loader": "^3.0.2",
34 |     "tinycolor2":"^1.4.1",
35 |     "lodash.throttle":"^4.1.1",
36 |     "moment": "^2.22.2",
37 |     "vue": "^2.5.16"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/result.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BlackMix/vue-genesis-forms/6a71d49ebbc082826560fe5dcd4cc645c3b373ed/result.jpg


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