zhorton34/vuejs-form

Form Plugin Api (Feature Request)

Closed this issue · 0 comments

Description

Create Plugin Object Accepted By Core use Method to apply state, macros, and forceMacros onto form (Plugging in a group of functionality).

Todos Would Be

  • Create use function on Form that accepts plugin configuration object
  • Plugin State (Add default form data)
  • Plugin Macros (Add custom form methods)
  • Plugin Force Macros (plugin.forceMacros = { all: () => form data + child forms data })

Example Would Be

const PluginMultiStepForm = {
    state: { 
        children: [], 
        current: 0 
   },
    macros: {
        setSteps: (steps) => { this.children = steps; },
        addStep: (step) => { this.children = [...this.children, step] },
        removeStep: (index) => { this.children = this.children.splice(index, 1); },

        step: () => { return this.children[this.current;] }
        next: () => { this.current = this.current + 1; return this.step(); }, 
        prev: () => { this.current = this.current -1; return this.step(); },,
        travel: (step) => { this.current = step; return this.step(); },
   },
    forceMacros: {
          all: () => { 
               return this.children.reduce((data, child) => ({ ...data, ...child.all() })
           }
        }   
    }
};

let Example = form();

Example.use(PluginMultiStepForm).setSteps([
    form({ first_name: '', last_name: '' }).rules({ first_name: 'required', last_name: 'required' }),
    form({ email: '', phone: '', link: '' }).rules({ email: 'required|email', phone: 'phone', link: 'url'),
    form({ password: '', password_confirmation: '' }).rules({ password: 'required|confirmed' }),
    form({ terms_of_service: 'no' }).rules({ terms_of_service: 'required|accepted' })
]);