Multiselect Element

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        multiselect: {
          type: 'multiselect',
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          },
          default: ['cherry']
        }
      }
    })
  }
</script>
          
        

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        select: {
          type: 'multiselect',
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          },
          search: true,
          default: ['cherry', 'orange']
        }
      }
    })
  }
</script>
          
        

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        select: {
          type: 'multiselect',
          items: {
            us: { name: 'United States', flag: 'https://lipis.github.io/flag-icon-css/flags/4x3/um.svg' },
            cn: { name: 'China', flag: 'https://lipis.github.io/flag-icon-css/flags/4x3/cn.svg' },
            in: { name: 'India', flag: 'https://lipis.github.io/flag-icon-css/flags/4x3/in.svg' }
          },
          default: ['us'],
          search: true,
          trackBy: 'name',
          slots: {
            option: Vue.extend({
              props: ['el$', 'option'],
              template: `
                <span>
                  <img height="16" :src="option.flag" /> &nbsp;{{ option.name }}
                </span>
              `
            })
          }
        }
      }
    })
  }
</script>
          
        

          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      timeout: null,
      schema: {
        select: {
          type: 'multiselect',
          search: true,
          items: {},
          slots: {
            noOptions: Vue.extend({
              props: ['el$'],
              template: `<span>Start typing...</span>`
            })
          },
          created() {
            this.on('searchChange', (searchQuery) => {
              this.loading = true

              if (this.timeout) {
                clearTimeout(this.timeout)
              }

              this.timeout = setTimeout(() => {
                if (!searchQuery) {
                  this.loading = false
                  return
                }

                this.items = Object.assign({}, this.items, {
                  searchQuery: searchQuery,
                  [searchQuery + '1']: searchQuery + '1',
                  [searchQuery + '2']: searchQuery + '2',
                })

                this.loading = false
              }, 400)
            })
          }
        }
      }
    })
  }
</script>