Merge pull request #387 from wearebraid/release/2.5.1

Release/2.5.1

examples/specimens/SpecimenFile.vue

@@ -20,6 +20,7 @@
         name="file"
         type="file"
         :outer-class="['file-input-2']"
+        :value="[{ url: 'apple.pdf' }]"
         help="Select any file to upload"
         validation="mime:application/pdf"
       />

nuxt/index.js

@@ -0,0 +1,21 @@
+import fs from 'fs'
+import path from 'path'
+
+export default function nuxtVueFormulate (moduleOptions) {
+  let formulateOptions = Object.assign({}, this.options.formulate, moduleOptions)
+  let configPath = false
+  // check if we have a user-provided config path
+  // or if a config file exists in the default location
+  if (formulateOptions.configPath) {
+    configPath = formulateOptions.configPath
+  } else if (fs.existsSync(`${this.options.srcDir}/formulate.config.js`)) {
+    configPath = '~/formulate.config.js'
+  }
+  // add the parsed config path back into the options object
+  formulateOptions = Object.assign({}, formulateOptions, { configPath })
+  // Register `plugin.js` template
+  this.addPlugin({
+    src: path.resolve(__dirname, 'plugin.js'),
+    options: formulateOptions
+  })
+}

nuxt/plugin.js

@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import VueFormulate from '@braid/vue-formulate'
+<% if (options.configPath) { %>
+import options from '<%= options.configPath %>'
+<% } else { %>
+const options = {}
+<% } %>
+
+Vue.use(VueFormulate, options)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@braid/vue-formulate",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "The easiest way to build forms in Vue.",
   "main": "dist/formulate.umd.js",
   "module": "dist/formulate.esm.js",
@@ -92,7 +92,7 @@
     "watch": "^1.0.2"
   },
   "dependencies": {
-    "@braid/vue-formulate-i18n": "^1.14.0",
+    "@braid/vue-formulate-i18n": "^1.15.0",
     "is-plain-object": "^3.0.1",
     "is-url": "^1.2.4",
     "nanoid": "^2.1.11"

src/FileUpload.js

@@ -227,7 +227,11 @@ class FileUpload {
     // Create a new mutable FileList
     if (this.supportsDataTransfers) {
       const transfer = new DataTransfer()
-      this.files.forEach(file => transfer.items.add(file.file))
+      this.files.forEach(file => {
+        if (file.file instanceof File) {
+          transfer.items.add(file.file)
+        }
+      })
       this.fileList = transfer.files
       this.input.files = this.fileList
       // Reset the merged FileList to empty

src/FormulateForm.vue

@@ -69,6 +69,10 @@ export default {
     invalidMessage: {
       type: [Boolean, Function, String],
       default: false
+    },
+    debounce: {
+      type: [Boolean, Number],
+      default: false
     }
   },
   data () {
@@ -195,6 +199,7 @@ export default {
   created () {
     this.$formulate.register(this)
     this.applyInitialValues()
+    this.$emit('created', this)
   },
   destroyed () {
     this.$formulate.deregister(this)

src/FormulateGrouping.vue

@@ -7,7 +7,7 @@
   >
     <FormulateRepeatableProvider
       v-for="(item, index) in items"
-      :key="item.__id"
+      :key="index"
       :index="index"
       :context="context"
       :uuid="item.__id"
@@ -48,14 +48,16 @@ export default {
     items () {
       if (Array.isArray(this.context.model)) {
         if (!this.context.repeatable && this.context.model.length === 0) {
+          // This is the default input.
           return [setId({})]
         }
         if (this.context.model.length < this.context.minimum) {
           return (new Array(this.context.minimum || 1)).fill('')
-            .map((t, index) => setId(has(this.context.model, index) ? this.context.model[index] : {}))
+            .map((t, index) => setId(this.context.model[index] || {}))
         }
-        return this.context.model.map(item => setId(item, item.__id))
+        return this.context.model.map(item => setId(item))
       }
+      // This is an unset group
       return (new Array(this.context.minimum || 1)).fill('').map(() => setId({}))
     },
     formShouldShowErrors () {
@@ -98,11 +100,12 @@ export default {
       this.providers.forEach(p => p && typeof p.showErrors === 'function' && p.showErrors())
     },
     setItem (index, groupProxy) {
+      const id = this.items[index].__id || false
       // Note: value must have an __id to use this function
       if (Array.isArray(this.context.model) && this.context.model.length >= this.context.minimum) {
-        this.context.model.splice(index, 1, setId(groupProxy, this.context.model[index].__id))
+        this.context.model.splice(index, 1, setId(groupProxy, id))
       } else {
-        this.context.model = this.items.map((item, i) => i === index ? setId(groupProxy) : item)
+        this.context.model = this.items.map((item, i) => i === index ? setId(groupProxy, id) : item)
       }
     },
     removeItem (index) {

src/FormulateInput.vue

@@ -87,7 +87,7 @@
 
 <script>
 import context from './libs/context'
-import { equals, parseRules, camel, has, arrayify, groupBails, isEmpty } from './libs/utils'
+import { equals, parseRules, camel, has, arrayify, groupBails, isEmpty, createDebouncer } from './libs/utils'
 
 export default {
   name: 'FormulateInput',
@@ -272,6 +272,10 @@ export default {
     ignored: {
       type: [Boolean, String],
       default: false
+    },
+    debounce: {
+      type: [Boolean, Number],
+      default: false
     }
   },
   data () {
@@ -288,7 +292,9 @@ export default {
       // These registries are used for injected messages registrants only (mostly internal).
       ruleRegistry: [],
       messageRegistry: {},
-      touched: false
+      touched: false,
+      debounceDelay: this.debounce,
+      dSet: createDebouncer()
     }
   },
   computed: {
@@ -365,6 +371,9 @@ export default {
       if (this.errorBehavior === 'value' && value) {
         this.behavioralErrorVisibility = value
       }
+    },
+    debounce (value) {
+      this.debounceDelay = value
     }
   },
   created () {

src/inputs/FormulateInputSelect.vue

@@ -37,7 +37,8 @@
           v-for="option in options"
           :key="option.id"
           :value="option.value"
-          v-bind="option.attributes || {}"
+          :disabled="!!option.disabled"
+          v-bind="option.attributes || option.attrs || {}"
           v-text="option.label"
         />
       </template>
@@ -53,7 +54,8 @@
             v-for="option in subOptions"
             :key="option.id"
             :value="option.value"
-            v-bind="option.attributes || {}"
+            :disabled="!!option.disabled"
+            v-bind="option.attributes || option.attrs || {}"
             v-text="option.label"
           />
         </optgroup>

src/libs/context.js

@@ -15,6 +15,7 @@ export default {
       blurHandler: blurHandler.bind(this),
       classification: this.classification,
       component: this.component,
+      debounceDelay: this.debounceDelay,
       disableErrors: this.disableErrors,
       errors: this.explicitErrors,
       formShouldShowErrors: this.formShouldShowErrors,
@@ -521,7 +522,12 @@ function listeners () {
 function defineModel (context) {
   return Object.defineProperty(context, 'model', {
     get: modelGetter.bind(this),
-    set: modelSetter.bind(this),
+    set: (value) => {
+      if (!this.debounceDelay) {
+        return modelSetter.call(this, value)
+      }
+      this.dSet(modelSetter, [value], this.debounceDelay)
+    },
     enumerable: true
   })
 }

src/libs/registry.js

@@ -123,6 +123,11 @@ class Registry {
     this.add(field, component)
     const hasVModelValue = has(component.$options.propsData, 'formulateValue')
     const hasValue = has(component.$options.propsData, 'value')
+    // This is not reactive
+    const debounceDelay = this.ctx.debounce || this.ctx.debounceDelay || (this.ctx.context && this.ctx.context.debounceDelay)
+    if (debounceDelay && !has(component.$options.propsData, 'debounce')) {
+      component.debounceDelay = debounceDelay
+    }
     if (
       !hasVModelValue &&
       this.ctx.hasInitialValue &&
@@ -297,7 +302,7 @@ export function useRegistryMethods (without = []) {
     },
     setValues (values) {
       // Collect all keys, existing and incoming
-      const keys = Array.from(new Set(Object.keys(values).concat(Object.keys(this.proxy))))
+      const keys = Array.from(new Set(Object.keys(values || {}).concat(Object.keys(this.proxy))))
       keys.forEach(field => {
         const input = this.registry.has(field) && this.registry.get(field)
         let value = values[field]

src/libs/utils.js

@@ -228,7 +228,7 @@ export function regexForFormat (format) {
     MM: '(0[1-9]|1[012])',
     M: '([1-9]|1[012])',
     DD: '([012][0-9]|3[01])',
-    D: '([012]?[1-9]|3[01])',
+    D: '([012]?[0-9]|3[01])',
     YYYY: '\\d{4}',
     YY: '\\d{2}'
   }
@@ -304,7 +304,7 @@ export function has (ctx, prop) {
  * @param {Symbol} id
  */
 export function setId (o, id) {
-  if (!has(o, '__id')) {
+  if (!has(o, '__id') || id) {
     return Object.defineProperty(o, '__id', Object.assign(Object.create(null), { value: id || nanoid(9) }))
   }
   return o
@@ -366,3 +366,16 @@ export function cyrb43 (str, seed = 0) {
   h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909)
   return 4294967296 * (2097151 & h2) + (h1 >>> 0)
 };
+
+/**
+ * Create a new debouncer — will debounce any function calls.
+ */
+export function createDebouncer () {
+  let timeout
+  return function debounceFn (fn, args, delay) {
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+    timeout = setTimeout(() => fn.call(this, ...args), delay)
+  }
+}