Added form props on hidden fields

docs/components/ForAnotherForm.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <form action="" id="another-form" />
+    <treeselect
+      :options="options"
+      :value="value"
+      name="another-form-field"
+      form="another-form"
+      :searchable="false"
+      @input="updateValue"
+      />
+    <pre class="result">{{ value }}</pre>
+  </div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import Vuex, { mapState, mapMutations } from 'vuex'
+  import { generateOptions } from './utils'
+
+  Vue.use(Vuex)
+
+  const store = new Vuex.Store({
+    state: {
+      value: 'a',
+    },
+    mutations: {
+      updateValue(state, value) {
+        state.value = value
+      },
+    },
+  })
+
+  export default {
+    store,
+
+    data: () => ({
+      options: generateOptions(2),
+    }),
+
+    computed: {
+      ...mapState([ 'value' ]),
+    },
+
+    methods: {
+      ...mapMutations([ 'updateValue' ]),
+    },
+  }
+</script>

docs/partials/guides.pug

@@ -136,3 +136,11 @@
 
       Concretely speaking, we can bind `getter` to `:value` to make vue-treeselect reflect any changes in your Vuex state, and bind `action` or `mutation` to `@input` to update your Vuex state whenever the value changes.
   +demo('VuexSupport')
+
++subsection('For Another Form')
+  :markdown-it
+    `
+      <form id="another-form"></form>
+      <treeselect form="another-form" />
+    `
+  +demo('ForAnotherForm')

docs/styles/docs.less

@@ -214,7 +214,6 @@ kbd {
   font-size: 0.875rem;
   color: #34495e;
   vertical-align: middle;
-
   // Github Star Button
   > iframe {
     display: block;
@@ -230,7 +229,7 @@ kbd {
 
 #main { // stylelint-disable-line no-duplicate-selectors
   padding-top: 3em;
-
+  
   h1 {
     margin-left: -1px; // 为了对齐
 

src/components/HiddenFields.vue

@@ -13,7 +13,6 @@
     name: 'vue-treeselect--hidden-fields',
     inject: [ 'instance' ],
     functional: true,
-
     render(_, context) {
       const { instance } = context.injections
 
@@ -24,9 +23,9 @@
       if (instance.multiple && instance.joinValues) stringifiedValues = [
         stringifiedValues.join(instance.delimiter),
       ]
-
       return stringifiedValues.map((stringifiedValue, i) => (
         <input type="hidden"
+          form={instance.$props.form}
           name={instance.name}
           value={stringifiedValue}
           key={'hidden-field-' + i}

src/components/Treeselect.vue

@@ -33,7 +33,7 @@
     render() {
       return (
         <div ref="wrapper" class={this.wrapperClass}>
-          <HiddenFields />
+          <HiddenFields form={this.$props.form}/>
           <Control ref="control" />
           {this.appendToBody ? <MenuPortal ref="portal" /> : <Menu ref="menu" />}
         </div>

src/mixins/treeselectMixin.js

@@ -661,8 +661,13 @@ export default {
       type: [ Number, String ],
       default: 999,
     },
+    /**
+     * For another form
+     */
+    form: {
+      type: String,
+    },
   },
-
   data() {
     return {
       trigger: {

src/style.less

@@ -690,7 +690,7 @@
   position: absolute;
   overflow-x: hidden;
   overflow-y: auto;
-  // IE9 doesn't properly handle `width: 100%` with scrollbar when `box-sizing: border-box`
+  // IE9 doesn't properly handle `width: 100%` with scrollbar when; `box-sizing: border-box`
   width: auto;
   border: 1px solid @treeselect-control-border-color-active;
   background: @treeselect-menu-bg;