{"version":3,"sources":["webpack:///./src/views/forms/form-elements/select/Select.vue","webpack:///./src/views/forms/form-elements/select/SelectSingleSelection.vue","webpack:///src/views/forms/form-elements/select/SelectSingleSelection.vue","webpack:///./src/views/forms/form-elements/select/SelectSingleSelection.vue?104a","webpack:///./src/views/forms/form-elements/select/SelectSingleSelection.vue?7fa6","webpack:///./src/views/forms/form-elements/select/SelectColor.vue","webpack:///src/views/forms/form-elements/select/SelectColor.vue","webpack:///./src/views/forms/form-elements/select/SelectColor.vue?5837","webpack:///./src/views/forms/form-elements/select/SelectColor.vue?2b02","webpack:///./src/views/forms/form-elements/select/SelectAutocomplete.vue","webpack:///src/views/forms/form-elements/select/SelectAutocomplete.vue","webpack:///./src/views/forms/form-elements/select/SelectAutocomplete.vue?03d2","webpack:///./src/views/forms/form-elements/select/SelectAutocomplete.vue?2705","webpack:///./src/views/forms/form-elements/select/SelectMultiple.vue","webpack:///src/views/forms/form-elements/select/SelectMultiple.vue","webpack:///./src/views/forms/form-elements/select/SelectMultiple.vue?e9d4","webpack:///./src/views/forms/form-elements/select/SelectMultiple.vue?7003","webpack:///./src/views/forms/form-elements/select/SelectLabels.vue","webpack:///src/views/forms/form-elements/select/SelectLabels.vue","webpack:///./src/views/forms/form-elements/select/SelectLabels.vue?2624","webpack:///./src/views/forms/form-elements/select/SelectLabels.vue?cb47","webpack:///./src/views/forms/form-elements/select/SelectValidators.vue","webpack:///src/views/forms/form-elements/select/SelectValidators.vue","webpack:///./src/views/forms/form-elements/select/SelectValidators.vue?ba4b","webpack:///./src/views/forms/form-elements/select/SelectValidators.vue?1f04","webpack:///./src/views/forms/form-elements/select/SelectIsSelectedItem.vue","webpack:///src/views/forms/form-elements/select/SelectIsSelectedItem.vue","webpack:///./src/views/forms/form-elements/select/SelectIsSelectedItem.vue?727d","webpack:///./src/views/forms/form-elements/select/SelectIsSelectedItem.vue?4e3c","webpack:///./src/views/forms/form-elements/select/SelectGroupItems.vue","webpack:///src/views/forms/form-elements/select/SelectGroupItems.vue","webpack:///./src/views/forms/form-elements/select/SelectGroupItems.vue?9323","webpack:///./src/views/forms/form-elements/select/SelectGroupItems.vue?9baf","webpack:///src/views/forms/form-elements/select/Select.vue","webpack:///./src/views/forms/form-elements/select/Select.vue?947a","webpack:///./src/views/forms/form-elements/select/Select.vue?1f67"],"names":["render","_vm","this","_c","_self","attrs","staticRenderFns","_v","staticClass","model","value","select1","callback","$$v","expression","_l","options1","item","index","key","text","select2","options2","select3","options3","slot","data","component","directives","name","rawName","colorx","domProps","on","$event","target","composing","exampleOptions","select4","isSelected","selectedText","label","$set","select81","options81","group","title","_e","select82","options82","select83","options83","components","SelectSingleSelection","SelectColor","SelectAutocomplete","SelectMultiple","SelectLabels","SelectValidators","SelectIsSelectedItem","SelectGroupItems"],"mappings":"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","file":"js/chunk-2d0dd9fc.cf1e2574.js","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{attrs:{\"id\":\"form-element-select-demo\"}},[_c('select-single-selection'),_c('select-color'),_c('select-autocomplete'),_c('select-multiple'),_c('select-labels'),_c('select-validators'),_c('select-is-selected-item'),_c('select-group-items')],1)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Single selection\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"To add a select to the application we have the component \"),_c('code',[_vm._v(\"vs-select\")]),_vm._v(\".\")]),_c('div',{staticClass:\"demo-alignment\"},[_c('vs-select',{staticClass:\"selectExample\",model:{value:(_vm.select1),callback:function ($$v) {_vm.select1=$$v},expression:\"select1\"}},_vm._l((_vm.options1),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1),_c('vs-select',{staticClass:\"selectExample\",model:{value:(_vm.select2),callback:function ($$v) {_vm.select2=$$v},expression:\"select2\"}},_vm._l((_vm.options2),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1),_c('vs-select',{staticClass:\"selectExample\",attrs:{\"disabled\":\"true\"},model:{value:(_vm.select3),callback:function ($$v) {_vm.select3=$$v},expression:\"select3\"}},_vm._l((_vm.options3),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"disabled\":index==2,\"value\":item.value,\"text\":item.text}})}),1)],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template lang=\\\"html\\\">\\n  <div class=\\\"con-select-example\\\">\\n\\n    <vs-select class=\\\"selectExample\\\" v-model=\\\"select1\\\">\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in options1\\\" />\\n    </vs-select>\\n\\n    <vs-select class=\\\"selectExample\\\" v-model=\\\"select2\\\">\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in options2\\\" />\\n    </vs-select>\\n\\n    <vs-select disabled=\\\"true\\\" class=\\\"selectExample\\\" v-model=\\\"select3\\\">\\n      <vs-select-item :key=\\\"index\\\" :disabled=\\\"index==2\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in options3\\\" />\\n    </vs-select>\\n\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  data(){\\n    return {\\n      select1:3,\\n      select2:7,\\n      select3:2,\\n      options1:[\\n        {text:'IT',value:0},\\n        {text:'Blade Runner',value:2},\\n        {text:'Thor Ragnarok',value:3},\\n      ],\\n      options2:[\\n        {text: 'Square', value: 1},\\n        {text: 'Rectangle', value: 2},\\n        {text: 'Rombo', value: 3},\\n        {text: 'Romboid', value: 4},\\n        {text: 'Trapeze', value: 5},\\n        {text: 'Triangle', value: 6},\\n        {text: 'Polygon', value: 7},\\n        {text: 'Regular polygon', value: 8},\\n        {text: 'Circumference', value: 9},\\n        {text: 'Circle', value: 10},\\n        {text: 'Circular sector', value: 11},\\n        {text: 'Circular trapeze', value: 12},\\n      ],\\n      options3:[\\n        {text: 'Red', value: 1},\\n        {text: 'Green', value: 2},\\n        {text: 'Blue', value: 3},\\n        {text: 'Purple', value: 4},\\n      ],\\n    }\\n  },\\n}\\n</script>\\n        \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: SelectSingleSelection.vue\r\n    Description: Single Selection\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Single selection\" code-toggler>\r\n\r\n        <p>To add a select to the application we have the component <code>vs-select</code>.</p>\r\n\r\n        <div class=\"demo-alignment\">\r\n\r\n            <vs-select class=\"selectExample\" v-model=\"select1\">\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in options1\" />\r\n            </vs-select>\r\n\r\n            <vs-select class=\"selectExample\" v-model=\"select2\">\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in options2\" />\r\n            </vs-select>\r\n\r\n            <vs-select disabled=\"true\" class=\"selectExample\" v-model=\"select3\">\r\n                <vs-select-item :key=\"index\" :disabled=\"index==2\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in options3\" />\r\n            </vs-select>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template lang=&quot;html&quot;&gt;\r\n  &lt;div class=&quot;con-select-example&quot;&gt;\r\n\r\n    &lt;vs-select class=&quot;selectExample&quot; v-model=&quot;select1&quot;&gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in options1&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n    &lt;vs-select class=&quot;selectExample&quot; v-model=&quot;select2&quot;&gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in options2&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n    &lt;vs-select disabled=&quot;true&quot; class=&quot;selectExample&quot; v-model=&quot;select3&quot;&gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :disabled=&quot;index==2&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in options3&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data(){\r\n    return {\r\n      select1:3,\r\n      select2:7,\r\n      select3:2,\r\n      options1:[\r\n        {text:&apos;IT&apos;,value:0},\r\n        {text:&apos;Blade Runner&apos;,value:2},\r\n        {text:&apos;Thor Ragnarok&apos;,value:3},\r\n      ],\r\n      options2:[\r\n        {text: &apos;Square&apos;, value: 1},\r\n        {text: &apos;Rectangle&apos;, value: 2},\r\n        {text: &apos;Rombo&apos;, value: 3},\r\n        {text: &apos;Romboid&apos;, value: 4},\r\n        {text: &apos;Trapeze&apos;, value: 5},\r\n        {text: &apos;Triangle&apos;, value: 6},\r\n        {text: &apos;Polygon&apos;, value: 7},\r\n        {text: &apos;Regular polygon&apos;, value: 8},\r\n        {text: &apos;Circumference&apos;, value: 9},\r\n        {text: &apos;Circle&apos;, value: 10},\r\n        {text: &apos;Circular sector&apos;, value: 11},\r\n        {text: &apos;Circular trapeze&apos;, value: 12},\r\n      ],\r\n      options3:[\r\n        {text: &apos;Red&apos;, value: 1},\r\n        {text: &apos;Green&apos;, value: 2},\r\n        {text: &apos;Blue&apos;, value: 3},\r\n        {text: &apos;Purple&apos;, value: 4},\r\n      ],\r\n    }\r\n  },\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    data() {\r\n        return {\r\n            select1: 3,\r\n            select2: 7,\r\n            select3: 2,\r\n            options1: [\r\n                { text: 'IT', value: 0 },\r\n                { text: 'Blade Runner', value: 2 },\r\n                { text: 'Thor Ragnarok', value: 3 },\r\n            ],\r\n            options2: [\r\n                { text: 'Square', value: 1 },\r\n                { text: 'Rectangle', value: 2 },\r\n                { text: 'Rombo', value: 3 },\r\n                { text: 'Romboid', value: 4 },\r\n                { text: 'Trapeze', value: 5 },\r\n                { text: 'Triangle', value: 6 },\r\n                { text: 'Polygon', value: 7 },\r\n                { text: 'Regular polygon', value: 8 },\r\n                { text: 'Circumference', value: 9 },\r\n                { text: 'Circle', value: 10 },\r\n                { text: 'Circular sector', value: 11 },\r\n                { text: 'Circular trapeze', value: 12 },\r\n            ],\r\n            options3: [\r\n                { text: 'Red', value: 1 },\r\n                { text: 'Green', value: 2 },\r\n                { text: 'Blue', value: 3 },\r\n                { text: 'Purple', value: 4 },\r\n            ],\r\n        }\r\n    },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectSingleSelection.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectSingleSelection.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SelectSingleSelection.vue?vue&type=template&id=2d158b9c\"\nimport script from \"./SelectSingleSelection.vue?vue&type=script&lang=js\"\nexport * from \"./SelectSingleSelection.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Color\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"You can change the color of the select with the property \"),_c('code',[_vm._v(\"color\")])]),_c('vs-alert',{staticClass:\"mt-5\",attrs:{\"icon\":\"warning\",\"active\":\"true\",\"color\":\"warning\"}},[_c('span',[_vm._v(\"Only \"),_c('strong',[_vm._v(\"RGB\")]),_vm._v(\" and \"),_c('strong',[_vm._v(\"HEX\")]),_vm._v(\" colors are supported.\")])]),_c('div',{staticClass:\"demo-alignment\"},[_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.colorx),expression:\"colorx\"}],attrs:{\"type\":\"color\",\"value\":\"\"},domProps:{\"value\":(_vm.colorx)},on:{\"input\":function($event){if($event.target.composing)return;_vm.colorx=$event.target.value}}}),_c('vs-select',{staticClass:\"selectExample\",attrs:{\"color\":_vm.colorx},model:{value:(_vm.select1),callback:function ($$v) {_vm.select1=$$v},expression:\"select1\"}},_vm._l((_vm.options1),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1),_c('vs-select',{staticClass:\"selectExample\",attrs:{\"color\":_vm.select2},model:{value:(_vm.select2),callback:function ($$v) {_vm.select2=$$v},expression:\"select2\"}},_vm._l((_vm.options2),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1)],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template>\\n  <div class=\\\"con-select-example\\\">\\n\\n    <input v-model=\\\"colorx\\\" type=\\\"color\\\" value=\\\"\\\">\\n\\n    <vs-select :color=\\\"colorx\\\" class=\\\"selectExample\\\" v-model=\\\"select1\\\">\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in options1\\\" />\\n    </vs-select>\\n\\n    <vs-select :color=\\\"select2\\\" class=\\\"selectExample\\\" v-model=\\\"select2\\\">\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in options2\\\" />\\n    </vs-select>\\n\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  data(){\\n    return {\\n      colorx:'#103767',\\n      select1:3,\\n      select2:'primary',\\n      options1:[\\n        {text: 'Square', value: 1},\\n        {text: 'Rectangle', value: 2},\\n        {text: 'Rombo', value: 3},\\n        {text: 'Romboid', value: 4},\\n        {text: 'Trapeze', value: 5},\\n        {text: 'Triangle', value: 6},\\n        {text: 'Polygon', value: 7},\\n        {text: 'Regular polygon', value: 8},\\n        {text: 'Circumference', value: 9},\\n        {text: 'Circle', value: 10},\\n        {text: 'Circular sector', value: 11},\\n        {text: 'Circular trapeze', value: 12},\\n      ],\\n      options2:[\\n        {text: 'Primary', value: 'primary'},\\n        {text: 'Success', value: 'success'},\\n        {text: 'Danger', value: 'danger'},\\n        {text: 'Warning', value: 'warning'},\\n        {text: 'Dark', value: 'dark'},\\n      ],\\n    }\\n  }\\n}\\n</script>\\n        \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: SelectColor.vue\r\n    Description: Change color of selected option\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Color\" code-toggler>\r\n\r\n        <p>You can change the color of the select with the property <code>color</code></p>\r\n\r\n        <vs-alert icon=\"warning\" active=\"true\" color=\"warning\" class=\"mt-5\">\r\n            <span>Only <strong>RGB</strong> and <strong>HEX</strong> colors are supported.</span>\r\n        </vs-alert>\r\n\r\n        <div class=\"demo-alignment\">\r\n            <input v-model=\"colorx\" type=\"color\" value=\"\">\r\n            <vs-select :color=\"colorx\" class=\"selectExample\" v-model=\"select1\">\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in options1\" />\r\n            </vs-select>\r\n            <vs-select :color=\"select2\" class=\"selectExample\" v-model=\"select2\">\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in options2\" />\r\n            </vs-select>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template&gt;\r\n  &lt;div class=&quot;con-select-example&quot;&gt;\r\n\r\n    &lt;input v-model=&quot;colorx&quot; type=&quot;color&quot; value=&quot;&quot;&gt;\r\n\r\n    &lt;vs-select :color=&quot;colorx&quot; class=&quot;selectExample&quot; v-model=&quot;select1&quot;&gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in options1&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n    &lt;vs-select :color=&quot;select2&quot; class=&quot;selectExample&quot; v-model=&quot;select2&quot;&gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in options2&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data(){\r\n    return {\r\n      colorx:&apos;#103767&apos;,\r\n      select1:3,\r\n      select2:&apos;primary&apos;,\r\n      options1:[\r\n        {text: &apos;Square&apos;, value: 1},\r\n        {text: &apos;Rectangle&apos;, value: 2},\r\n        {text: &apos;Rombo&apos;, value: 3},\r\n        {text: &apos;Romboid&apos;, value: 4},\r\n        {text: &apos;Trapeze&apos;, value: 5},\r\n        {text: &apos;Triangle&apos;, value: 6},\r\n        {text: &apos;Polygon&apos;, value: 7},\r\n        {text: &apos;Regular polygon&apos;, value: 8},\r\n        {text: &apos;Circumference&apos;, value: 9},\r\n        {text: &apos;Circle&apos;, value: 10},\r\n        {text: &apos;Circular sector&apos;, value: 11},\r\n        {text: &apos;Circular trapeze&apos;, value: 12},\r\n      ],\r\n      options2:[\r\n        {text: &apos;Primary&apos;, value: &apos;primary&apos;},\r\n        {text: &apos;Success&apos;, value: &apos;success&apos;},\r\n        {text: &apos;Danger&apos;, value: &apos;danger&apos;},\r\n        {text: &apos;Warning&apos;, value: &apos;warning&apos;},\r\n        {text: &apos;Dark&apos;, value: &apos;dark&apos;},\r\n      ],\r\n    }\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    data() {\r\n        return {\r\n            colorx: '#103767',\r\n            select1: 3,\r\n            select2: 'primary',\r\n            options1: [\r\n                { text: 'Square', value: 1 },\r\n                { text: 'Rectangle', value: 2 },\r\n                { text: 'Rombo', value: 3 },\r\n                { text: 'Romboid', value: 4 },\r\n                { text: 'Trapeze', value: 5 },\r\n                { text: 'Triangle', value: 6 },\r\n                { text: 'Polygon', value: 7 },\r\n                { text: 'Regular polygon', value: 8 },\r\n                { text: 'Circumference', value: 9 },\r\n                { text: 'Circle', value: 10 },\r\n                { text: 'Circular sector', value: 11 },\r\n                { text: 'Circular trapeze', value: 12 },\r\n            ],\r\n            options2: [\r\n                { text: 'Primary', value: 'primary' },\r\n                { text: 'Success', value: 'success' },\r\n                { text: 'Danger', value: 'danger' },\r\n                { text: 'Warning', value: 'warning' },\r\n                { text: 'Dark', value: 'dark' },\r\n            ],\r\n        }\r\n    },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectColor.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectColor.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SelectColor.vue?vue&type=template&id=0c4470b4\"\nimport script from \"./SelectColor.vue?vue&type=script&lang=js\"\nexport * from \"./SelectColor.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Autocomplete\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"You can add the autocomplete functionality in the desired selected with the property \"),_c('code',[_vm._v(\"autocomplete\")])]),_c('div',{staticClass:\"demo-alignment\"},[_c('vs-select',{staticClass:\"selectExample\",attrs:{\"autocomplete\":\"\"},model:{value:(_vm.select1),callback:function ($$v) {_vm.select1=$$v},expression:\"select1\"}},_vm._l((_vm.options1),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1),_c('vs-select',{staticClass:\"selectExample\",attrs:{\"autocomplete\":\"\"},model:{value:(_vm.select2),callback:function ($$v) {_vm.select2=$$v},expression:\"select2\"}},_vm._l((_vm.options2),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1),_c('vs-select',{staticClass:\"selectExample\",attrs:{\"autocomplete\":\"\",\"disabled\":\"true\"},model:{value:(_vm.select3),callback:function ($$v) {_vm.select3=$$v},expression:\"select3\"}},_vm._l((_vm.options3),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1)],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template lang=\\\"html\\\">\\n  <div class=\\\"con-select-example\\\">\\n\\n    <vs-select autocomplete @input-change=\\\"autoCompleteFunc\\\" class=\\\"selectExample\\\" v-model=\\\"select1\\\">\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in options1\\\" />\\n    </vs-select>\\n\\n    <vs-select autocomplete @input-change=\\\"autoCompleteFunc\\\" class=\\\"selectExample\\\" v-model=\\\"select2\\\">\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in options2\\\" />\\n    </vs-select>\\n\\n    <vs-select autocomplete @input-change=\\\"autoCompleteFunc\\\" disabled=\\\"true\\\" class=\\\"selectExample\\\" v-model=\\\"select3\\\">\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in options3\\\" />\\n    </vs-select>\\n\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  data(){\\n    return {\\n      select1:3,\\n      select2:7,\\n      select3:2,\\n      options1:[\\n        {text:'IT',value:0},\\n        {text:'Blade Runner',value:2},\\n        {text:'Thor Ragnarok',value:3},\\n      ],\\n      options2:[\\n        {text: 'Square', value: 1},\\n        {text: 'Rectangle', value: 2},\\n        {text: 'Rombo', value: 3},\\n        {text: 'Romboid', value: 4},\\n        {text: 'Trapeze', value: 5},\\n        {text: 'Triangle', value: 6},\\n        {text: 'Polygon', value: 7},\\n        {text: 'Regular polygon', value: 8},\\n        {text: 'Circumference', value: 9},\\n        {text: 'Circle', value: 10},\\n        {text: 'Circular sector', value: 11},\\n        {text: 'Circular trapeze', value: 12},\\n      ],\\n      options3:[\\n        {text: 'Red', value: 1},\\n        {text: 'Green', value: 2},\\n        {text: 'Blue', value: 3},\\n        {text: 'Purple', value: 4},\\n      ],\\n    }\\n  }\\n}\\n</script>\\n        \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: SelectAutocomplete.vue\r\n    Description: Select element with autocomplete\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Autocomplete\" code-toggler>\r\n\r\n        <p>You can add the autocomplete functionality in the desired selected with the property <code>autocomplete</code></p>\r\n\r\n        <div class=\"demo-alignment\">\r\n            <vs-select autocomplete class=\"selectExample\" v-model=\"select1\">\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in options1\" />\r\n            </vs-select>\r\n            <vs-select autocomplete class=\"selectExample\" v-model=\"select2\">\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in options2\" />\r\n            </vs-select>\r\n            <vs-select autocomplete disabled=\"true\" class=\"selectExample\" v-model=\"select3\">\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in options3\" />\r\n            </vs-select>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template lang=&quot;html&quot;&gt;\r\n  &lt;div class=&quot;con-select-example&quot;&gt;\r\n\r\n    &lt;vs-select autocomplete @input-change=&quot;autoCompleteFunc&quot; class=&quot;selectExample&quot; v-model=&quot;select1&quot;&gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in options1&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n    &lt;vs-select autocomplete @input-change=&quot;autoCompleteFunc&quot; class=&quot;selectExample&quot; v-model=&quot;select2&quot;&gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in options2&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n    &lt;vs-select autocomplete @input-change=&quot;autoCompleteFunc&quot; disabled=&quot;true&quot; class=&quot;selectExample&quot; v-model=&quot;select3&quot;&gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in options3&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data(){\r\n    return {\r\n      select1:3,\r\n      select2:7,\r\n      select3:2,\r\n      options1:[\r\n        {text:&apos;IT&apos;,value:0},\r\n        {text:&apos;Blade Runner&apos;,value:2},\r\n        {text:&apos;Thor Ragnarok&apos;,value:3},\r\n      ],\r\n      options2:[\r\n        {text: &apos;Square&apos;, value: 1},\r\n        {text: &apos;Rectangle&apos;, value: 2},\r\n        {text: &apos;Rombo&apos;, value: 3},\r\n        {text: &apos;Romboid&apos;, value: 4},\r\n        {text: &apos;Trapeze&apos;, value: 5},\r\n        {text: &apos;Triangle&apos;, value: 6},\r\n        {text: &apos;Polygon&apos;, value: 7},\r\n        {text: &apos;Regular polygon&apos;, value: 8},\r\n        {text: &apos;Circumference&apos;, value: 9},\r\n        {text: &apos;Circle&apos;, value: 10},\r\n        {text: &apos;Circular sector&apos;, value: 11},\r\n        {text: &apos;Circular trapeze&apos;, value: 12},\r\n      ],\r\n      options3:[\r\n        {text: &apos;Red&apos;, value: 1},\r\n        {text: &apos;Green&apos;, value: 2},\r\n        {text: &apos;Blue&apos;, value: 3},\r\n        {text: &apos;Purple&apos;, value: 4},\r\n      ],\r\n    }\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    data() {\r\n        return {\r\n            select1: 3,\r\n            select2: 7,\r\n            select3: 2,\r\n            options1: [\r\n                { text: 'IT', value: 0 },\r\n                { text: 'Blade Runner', value: 2 },\r\n                { text: 'Thor Ragnarok', value: 3 },\r\n            ],\r\n            options2: [\r\n                { text: 'Square', value: 1 },\r\n                { text: 'Rectangle', value: 2 },\r\n                { text: 'Rombo', value: 3 },\r\n                { text: 'Romboid', value: 4 },\r\n                { text: 'Trapeze', value: 5 },\r\n                { text: 'Triangle', value: 6 },\r\n                { text: 'Polygon', value: 7 },\r\n                { text: 'Regular polygon', value: 8 },\r\n                { text: 'Circumference', value: 9 },\r\n                { text: 'Circle', value: 10 },\r\n                { text: 'Circular sector', value: 11 },\r\n                { text: 'Circular trapeze', value: 12 },\r\n            ],\r\n            options3: [\r\n                { text: 'Red', value: 1 },\r\n                { text: 'Green', value: 2 },\r\n                { text: 'Blue', value: 3 },\r\n                { text: 'Purple', value: 4 },\r\n            ],\r\n        }\r\n    },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectAutocomplete.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectAutocomplete.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SelectAutocomplete.vue?vue&type=template&id=1a9808ac\"\nimport script from \"./SelectAutocomplete.vue?vue&type=script&lang=js\"\nexport * from \"./SelectAutocomplete.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Multiple\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"You can have a selection with multiple selections with the property \"),_c('code',[_vm._v(\"multiple\")]),_vm._v(\". If you need the user to select only a certain number of options you can use the property \"),_c('code',[_vm._v(\"max-selected\")])]),_c('div',{staticClass:\"demo-alignment\"},[_c('vs-select',{staticClass:\"selectExample\",attrs:{\"placeholder\":\"Multiple\",\"multiple\":\"\"},model:{value:(_vm.select1),callback:function ($$v) {_vm.select1=$$v},expression:\"select1\"}},_vm._l((_vm.options1),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1),_c('vs-select',{staticClass:\"selectExample\",attrs:{\"placeholder\":\"Multiple and autocomplete\",\"multiple\":\"\",\"vs-autocomplete\":\"\"},model:{value:(_vm.select2),callback:function ($$v) {_vm.select2=$$v},expression:\"select2\"}},_vm._l((_vm.options2),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1),_c('vs-select',{staticClass:\"selectExample\",attrs:{\"placeholder\":\"Max Selected\",\"max-selected\":\"2\",\"multiple\":\"\"},model:{value:(_vm.select3),callback:function ($$v) {_vm.select3=$$v},expression:\"select3\"}},_vm._l((_vm.options3),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1)],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template lang=\\\"html\\\">\\n  <div class=\\\"con-select-example\\\">\\n\\n    <vs-select placeholder=\\\"Multiple\\\" multiple class=\\\"selectExample\\\" v-model=\\\"select1\\\">\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in options1\\\" />\\n    </vs-select>\\n\\n    <vs-select placeholder=\\\"Multiple and autocomplete\\\" multiple vs-autocomplete class=\\\"selectExample\\\" v-model=\\\"select2\\\">\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in options2\\\" />\\n    </vs-select>\\n\\n    <vs-select placeholder=\\\"Max Selected\\\" max-selected=\\\"2\\\" multiple class=\\\"selectExample\\\" v-model=\\\"select3\\\">\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in options3\\\" />\\n    </vs-select>\\n\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  data() {\\n    return {\\n      select1: [],\\n      select2: [],\\n      select3: [],\\n      options1: [\\n        { text: 'IT', value: 0 },\\n        { text: 'Blade Runner', value: 2 },\\n        { text: 'Thor Ragnarok', value: 3 },\\n      ],\\n      options2: [\\n        { text: 'Square', value: 1 },\\n        { text: 'Rectangle', value: 2 },\\n        { text: 'Rombo', value: 3 },\\n        { text: 'Romboid', value: 4 },\\n        { text: 'Trapeze', value: 5 },\\n        { text: 'Triangle', value: 6 },\\n        { text: 'Polygon', value: 7 },\\n        { text: 'Regular polygon', value: 8 },\\n        { text: 'Circumference', value: 9 },\\n        { text: 'Circle', value: 10 },\\n        { text: 'Circular sector', value: 11 },\\n        { text: 'Circular trapeze', value: 12 },\\n      ],\\n      options3: [\\n        { text: 'Red', value: 1 },\\n        { text: 'Green', value: 2 },\\n        { text: 'Blue', value: 3 },\\n        { text: 'Purple', value: 4 },\\n      ],\\n    }\\n  }\\n}\\n</script>\\n        \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: SelectMultiple.vue\r\n    Description: Select multiple options using multiple prop\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Multiple\" code-toggler>\r\n\r\n        <p>You can have a selection with multiple selections with the property <code>multiple</code>. If you need the user to select only a certain number of options you can use the property <code>max-selected</code></p>\r\n\r\n        <div class=\"demo-alignment\">\r\n\r\n            <vs-select placeholder=\"Multiple\" multiple class=\"selectExample\" v-model=\"select1\">\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in options1\" />\r\n            </vs-select>\r\n\r\n            <vs-select placeholder=\"Multiple and autocomplete\" multiple vs-autocomplete class=\"selectExample\" v-model=\"select2\">\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in options2\" />\r\n            </vs-select>\r\n\r\n            <vs-select placeholder=\"Max Selected\" max-selected=\"2\" multiple class=\"selectExample\" v-model=\"select3\">\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in options3\" />\r\n            </vs-select>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template lang=&quot;html&quot;&gt;\r\n  &lt;div class=&quot;con-select-example&quot;&gt;\r\n\r\n    &lt;vs-select placeholder=&quot;Multiple&quot; multiple class=&quot;selectExample&quot; v-model=&quot;select1&quot;&gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in options1&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n    &lt;vs-select placeholder=&quot;Multiple and autocomplete&quot; multiple vs-autocomplete class=&quot;selectExample&quot; v-model=&quot;select2&quot;&gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in options2&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n    &lt;vs-select placeholder=&quot;Max Selected&quot; max-selected=&quot;2&quot; multiple class=&quot;selectExample&quot; v-model=&quot;select3&quot;&gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in options3&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data() {\r\n    return {\r\n      select1: [],\r\n      select2: [],\r\n      select3: [],\r\n      options1: [\r\n        { text: &apos;IT&apos;, value: 0 },\r\n        { text: &apos;Blade Runner&apos;, value: 2 },\r\n        { text: &apos;Thor Ragnarok&apos;, value: 3 },\r\n      ],\r\n      options2: [\r\n        { text: &apos;Square&apos;, value: 1 },\r\n        { text: &apos;Rectangle&apos;, value: 2 },\r\n        { text: &apos;Rombo&apos;, value: 3 },\r\n        { text: &apos;Romboid&apos;, value: 4 },\r\n        { text: &apos;Trapeze&apos;, value: 5 },\r\n        { text: &apos;Triangle&apos;, value: 6 },\r\n        { text: &apos;Polygon&apos;, value: 7 },\r\n        { text: &apos;Regular polygon&apos;, value: 8 },\r\n        { text: &apos;Circumference&apos;, value: 9 },\r\n        { text: &apos;Circle&apos;, value: 10 },\r\n        { text: &apos;Circular sector&apos;, value: 11 },\r\n        { text: &apos;Circular trapeze&apos;, value: 12 },\r\n      ],\r\n      options3: [\r\n        { text: &apos;Red&apos;, value: 1 },\r\n        { text: &apos;Green&apos;, value: 2 },\r\n        { text: &apos;Blue&apos;, value: 3 },\r\n        { text: &apos;Purple&apos;, value: 4 },\r\n      ],\r\n    }\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    data() {\r\n        return {\r\n            select1: [],\r\n            select2: [],\r\n            select3: [],\r\n            options1: [\r\n                { text: 'IT', value: 0 },\r\n                { text: 'Blade Runner', value: 2 },\r\n                { text: 'Thor Ragnarok', value: 3 },\r\n            ],\r\n            options2: [\r\n                { text: 'Square', value: 1 },\r\n                { text: 'Rectangle', value: 2 },\r\n                { text: 'Rombo', value: 3 },\r\n                { text: 'Romboid', value: 4 },\r\n                { text: 'Trapeze', value: 5 },\r\n                { text: 'Triangle', value: 6 },\r\n                { text: 'Polygon', value: 7 },\r\n                { text: 'Regular polygon', value: 8 },\r\n                { text: 'Circumference', value: 9 },\r\n                { text: 'Circle', value: 10 },\r\n                { text: 'Circular sector', value: 11 },\r\n                { text: 'Circular trapeze', value: 12 },\r\n            ],\r\n            options3: [\r\n                { text: 'Red', value: 1 },\r\n                { text: 'Green', value: 2 },\r\n                { text: 'Blue', value: 3 },\r\n                { text: 'Purple', value: 4 },\r\n            ],\r\n        }\r\n    },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectMultiple.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectMultiple.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SelectMultiple.vue?vue&type=template&id=01329798\"\nimport script from \"./SelectMultiple.vue?vue&type=script&lang=js\"\nexport * from \"./SelectMultiple.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Labels\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"Add a label to the input with the property \"),_c('code',[_vm._v(\"label\")])]),_c('div',{staticClass:\"demo-alignment\"},[_c('vs-select',{staticClass:\"selectExample\",attrs:{\"placeholder\":\"Select\",\"label\":\"Multiple\",\"label-placeholder\":\"vs-Multiple\",\"vs-multiple\":\"\"},model:{value:(_vm.select1),callback:function ($$v) {_vm.select1=$$v},expression:\"select1\"}},_vm._l((_vm.options1),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1),_c('vs-select',{staticClass:\"selectExample\",attrs:{\"placeholder\":\"Search and select\",\"label\":\"Autocomplete\",\"label-placeholder\":\"Autocomplete\",\"vs-multiple\":\"\",\"autocomplete\":\"\"},model:{value:(_vm.select2),callback:function ($$v) {_vm.select2=$$v},expression:\"select2\"}},_vm._l((_vm.options2),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1)],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template lang=\\\"html\\\">\\n    <div class=\\\"con-select-example\\\">\\n\\n    <vs-select\\n      placeholder=\\\"Select\\\"\\n      class=\\\"selectExample\\\"\\n      label=\\\"Multiple\\\"\\n      label-placeholder=\\\"vs-Multiple\\\"\\n      vs-multiple\\n      v-model=\\\"select1\\\"\\n      >\\n\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in options1\\\" />\\n    </vs-select>\\n\\n    <vs-select\\n      placeholder=\\\"Search and select\\\"\\n      class=\\\"selectExample\\\"\\n      label=\\\"Autocomplete\\\"\\n      label-placeholder=\\\"Autocomplete\\\"\\n      vs-multiple\\n      autocomplete\\n      v-model=\\\"select2\\\"\\n      >\\n\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in options2\\\" />\\n    </vs-select>\\n\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  data(){\\n    return {\\n      select1:[],\\n      select2:[],\\n      options1:[\\n        {text:'IT',value:0},\\n        {text:'Blade Runner',value:2},\\n        {text:'Thor Ragnarok',value:3},\\n      ],\\n      options2:[\\n        {text: 'Square', value: 1},\\n        {text: 'Rectangle', value: 2},\\n        {text: 'Rombo', value: 3},\\n        {text: 'Romboid', value: 4},\\n        {text: 'Trapeze', value: 5},\\n        {text: 'Triangle', value: 6},\\n        {text: 'Polygon', value: 7},\\n        {text: 'Regular polygon', value: 8},\\n        {text: 'Circumference', value: 9},\\n        {text: 'Circle', value: 10},\\n        {text: 'Circular sector', value: 11},\\n        {text: 'Circular trapeze', value: 12},\\n      ]\\n    }\\n  }\\n}\\n</script>\\n\\t\\t\")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n\tFile Name: SelectLabels.vue\r\n\tDescription: Add label to select element\r\n\t----------------------------------------------------------------------------------------\r\n\tItem Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n\tAuthor: Pixinvent\r\n\tAuthor URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n\t<vx-card title=\"Labels\" code-toggler>\r\n\r\n\t\t<p>Add a label to the input with the property <code>label</code></p>\r\n\r\n\t\t<div class=\"demo-alignment\">\r\n\r\n\t\t\t<vs-select placeholder=\"Select\" class=\"selectExample\" label=\"Multiple\" label-placeholder=\"vs-Multiple\" vs-multiple v-model=\"select1\">\r\n\t\t\t\t<vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in options1\" />\r\n\t\t\t</vs-select>\r\n\r\n\t\t\t<vs-select placeholder=\"Search and select\" class=\"selectExample\" label=\"Autocomplete\" label-placeholder=\"Autocomplete\" vs-multiple autocomplete v-model=\"select2\">\r\n\t\t\t\t<vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in options2\" />\r\n\t\t\t</vs-select>\r\n\t\t</div>\r\n\r\n\t\t<template slot=\"codeContainer\">\r\n&lt;template lang=&quot;html&quot;&gt;\r\n    &lt;div class=&quot;con-select-example&quot;&gt;\r\n\r\n    &lt;vs-select\r\n      placeholder=&quot;Select&quot;\r\n      class=&quot;selectExample&quot;\r\n      label=&quot;Multiple&quot;\r\n      label-placeholder=&quot;vs-Multiple&quot;\r\n      vs-multiple\r\n      v-model=&quot;select1&quot;\r\n      &gt;\r\n\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in options1&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n    &lt;vs-select\r\n      placeholder=&quot;Search and select&quot;\r\n      class=&quot;selectExample&quot;\r\n      label=&quot;Autocomplete&quot;\r\n      label-placeholder=&quot;Autocomplete&quot;\r\n      vs-multiple\r\n      autocomplete\r\n      v-model=&quot;select2&quot;\r\n      &gt;\r\n\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in options2&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data(){\r\n    return {\r\n      select1:[],\r\n      select2:[],\r\n      options1:[\r\n        {text:&apos;IT&apos;,value:0},\r\n        {text:&apos;Blade Runner&apos;,value:2},\r\n        {text:&apos;Thor Ragnarok&apos;,value:3},\r\n      ],\r\n      options2:[\r\n        {text: &apos;Square&apos;, value: 1},\r\n        {text: &apos;Rectangle&apos;, value: 2},\r\n        {text: &apos;Rombo&apos;, value: 3},\r\n        {text: &apos;Romboid&apos;, value: 4},\r\n        {text: &apos;Trapeze&apos;, value: 5},\r\n        {text: &apos;Triangle&apos;, value: 6},\r\n        {text: &apos;Polygon&apos;, value: 7},\r\n        {text: &apos;Regular polygon&apos;, value: 8},\r\n        {text: &apos;Circumference&apos;, value: 9},\r\n        {text: &apos;Circle&apos;, value: 10},\r\n        {text: &apos;Circular sector&apos;, value: 11},\r\n        {text: &apos;Circular trapeze&apos;, value: 12},\r\n      ]\r\n    }\r\n  }\r\n}\r\n&lt;/script&gt;\r\n\t\t</template>\r\n\t</vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n\tdata() {\r\n\t\treturn {\r\n\r\n\t\t\tselect1: [],\r\n\t\t\tselect2: [],\r\n\t\t\toptions1: [\r\n\t\t\t\t{ text: 'IT', value: 0 },\r\n\t\t\t\t{ text: 'Blade Runner', value: 2 },\r\n\t\t\t\t{ text: 'Thor Ragnarok', value: 3 },\r\n\t\t\t],\r\n\t\t\toptions2: [\r\n\t\t\t\t{ text: 'Square', value: 1 },\r\n\t\t\t\t{ text: 'Rectangle', value: 2 },\r\n\t\t\t\t{ text: 'Rombo', value: 3 },\r\n\t\t\t\t{ text: 'Romboid', value: 4 },\r\n\t\t\t\t{ text: 'Trapeze', value: 5 },\r\n\t\t\t\t{ text: 'Triangle', value: 6 },\r\n\t\t\t\t{ text: 'Polygon', value: 7 },\r\n\t\t\t\t{ text: 'Regular polygon', value: 8 },\r\n\t\t\t\t{ text: 'Circumference', value: 9 },\r\n\t\t\t\t{ text: 'Circle', value: 10 },\r\n\t\t\t\t{ text: 'Circular sector', value: 11 },\r\n\t\t\t\t{ text: 'Circular trapeze', value: 12 },\r\n\t\t\t],\r\n\t\t}\r\n\t},\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectLabels.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectLabels.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SelectLabels.vue?vue&type=template&id=52f631a5\"\nimport script from \"./SelectLabels.vue?vue&type=script&lang=js\"\nexport * from \"./SelectLabels.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Validators\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"You can add a state for example of in affirmative response to a validation with \"),_c('code',[_vm._v(\"success\")]),_vm._v(\" and if it is necessary to add a description or help to the user you can do it with the property \"),_c('code',[_vm._v(\"description\")])]),_c('vs-alert',{staticClass:\"mt-5\",attrs:{\"color\":\"primary\",\"icon\":\"new_releases\",\"active\":\"true\"}},[_c('span',[_vm._v(\"Each of the states you can change the text, for example in the case of \"),_c('code',[_vm._v(\"vs-danger-text\")]),_vm._v(\" for the state of danger.\")])]),_c('br'),_c('div',{staticClass:\"demo-alignment\"},[_c('vs-select',{staticClass:\"selectExample\",attrs:{\"success\":true,\"success-text\":\"This field is valid\",\"placeholder\":\"Select\",\"label\":\"Success\",\"multiple\":\"\"},model:{value:(_vm.select1),callback:function ($$v) {_vm.select1=$$v},expression:\"select1\"}},_vm._l((_vm.exampleOptions),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1),_c('vs-select',{staticClass:\"selectExample\",attrs:{\"danger\":true,\"danger-text\":\"This field is invalid\",\"placeholder\":\"Select\",\"label\":\"Danger\",\"multiple\":\"\"},model:{value:(_vm.select2),callback:function ($$v) {_vm.select2=$$v},expression:\"select2\"}},_vm._l((_vm.exampleOptions),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1),_c('vs-select',{staticClass:\"selectExample\",attrs:{\"warning\":true,\"warning-text\":\"This field is invalid\",\"placeholder\":\"Select\",\"label\":\"Warning\",\"multiple\":\"\"},model:{value:(_vm.select3),callback:function ($$v) {_vm.select3=$$v},expression:\"select3\"}},_vm._l((_vm.exampleOptions),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1),_c('vs-select',{staticClass:\"selectExample\",attrs:{\"description-text\":\"Simple info for multiple select\",\"placeholder\":\"Select\",\"label\":\"Description\",\"multiple\":\"\"},model:{value:(_vm.select4),callback:function ($$v) {_vm.select4=$$v},expression:\"select4\"}},_vm._l((_vm.exampleOptions),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1)],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template lang=\\\"html\\\">\\n  <div class=\\\"con-select-example\\\">\\n\\n    <vs-select\\n     :success=\\\"true\\\"\\n      success-text=\\\"This field is valid\\\"\\n      placeholder=\\\"Select\\\"\\n      class=\\\"selectExample\\\"\\n      label=\\\"Success\\\"\\n      multiple\\n      v-model=\\\"select1\\\"\\n      >\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in exampleOptions\\\" />\\n    </vs-select>\\n\\n    <vs-select\\n      :danger=\\\"true\\\"\\n      danger-text=\\\"This field is invalid\\\"\\n      placeholder=\\\"Select\\\"\\n      class=\\\"selectExample\\\"\\n      label=\\\"Danger\\\"\\n      multiple\\n      v-model=\\\"select2\\\"\\n      >\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in exampleOptions\\\" />\\n    </vs-select>\\n\\n    <vs-select\\n      :warning=\\\"true\\\"\\n      warning-text=\\\"This field is invalid\\\"\\n      placeholder=\\\"Select\\\"\\n      class=\\\"selectExample\\\"\\n      label=\\\"Warning\\\"\\n      multiple\\n      v-model=\\\"select3\\\"\\n      >\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in exampleOptions\\\" />\\n    </vs-select>\\n\\n    <vs-select\\n      description-text=\\\"Simple info for multiple select\\\"\\n      placeholder=\\\"Select\\\"\\n      class=\\\"selectExample\\\"\\n      label=\\\"Description\\\"\\n      multiple\\n      v-model=\\\"select4\\\"\\n      >\\n      <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in exampleOptions\\\" />\\n    </vs-select>\\n\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  data(){\\n    return {\\n      select1:[],\\n      select2:[],\\n      select3:[],\\n      select4:[],\\n      exampleOptions:[\\n        {text: 'Square', value: 1},\\n        {text: 'Rectangle', value: 2},\\n        {text: 'Rombo', value: 3},\\n        {text: 'Romboid', value: 4},\\n        {text: 'Trapeze', value: 5},\\n        {text: 'Triangle', value: 6},\\n        {text: 'Polygon', value: 7},\\n        {text: 'Regular polygon', value: 8},\\n        {text: 'Circumference', value: 9},\\n        {text: 'Circle', value: 10},\\n        {text: 'Circular sector', value: 11},\\n        {text: 'Circular trapeze', value: 12},\\n      ]\\n    }\\n  }\\n}\\n</script>\\n        \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: SelectValidators.vue\r\n    Description: Represent validation on select\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Validators\" code-toggler>\r\n\r\n        <p>You can add a state for example of in affirmative response to a validation with <code>success</code> and if it is necessary to add a description or help to the user you can do it with the property <code>description</code></p>\r\n\r\n        <vs-alert color=\"primary\" icon=\"new_releases\" active=\"true\" class=\"mt-5\">\r\n            <span>Each of the states you can change the text, for example in the case of <code>vs-danger-text</code> for the state of danger.</span>\r\n        </vs-alert><br>\r\n\r\n        <div class=\"demo-alignment\">\r\n\r\n            <vs-select\r\n                :success=\"true\"\r\n                success-text=\"This field is valid\"\r\n                placeholder=\"Select\"\r\n                class=\"selectExample\"\r\n                label=\"Success\"\r\n                multiple\r\n                v-model=\"select1\" >\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in exampleOptions\" />\r\n            </vs-select>\r\n\r\n            <vs-select\r\n                :danger=\"true\"\r\n                danger-text=\"This field is invalid\"\r\n                placeholder=\"Select\"\r\n                class=\"selectExample\"\r\n                label=\"Danger\"\r\n                multiple\r\n                v-model=\"select2\">\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in exampleOptions\" />\r\n            </vs-select>\r\n\r\n            <vs-select\r\n                :warning=\"true\"\r\n                warning-text=\"This field is invalid\"\r\n                placeholder=\"Select\"\r\n                class=\"selectExample\"\r\n                label=\"Warning\"\r\n                multiple\r\n                v-model=\"select3\">\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in exampleOptions\" />\r\n            </vs-select>\r\n\r\n            <vs-select\r\n                description-text=\"Simple info for multiple select\"\r\n                placeholder=\"Select\"\r\n                class=\"selectExample\"\r\n                label=\"Description\"\r\n                multiple\r\n                v-model=\"select4\">\r\n                <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in exampleOptions\" />\r\n            </vs-select>\r\n        </div>\r\n        <template slot=\"codeContainer\">\r\n&lt;template lang=&quot;html&quot;&gt;\r\n  &lt;div class=&quot;con-select-example&quot;&gt;\r\n\r\n    &lt;vs-select\r\n     :success=&quot;true&quot;\r\n      success-text=&quot;This field is valid&quot;\r\n      placeholder=&quot;Select&quot;\r\n      class=&quot;selectExample&quot;\r\n      label=&quot;Success&quot;\r\n      multiple\r\n      v-model=&quot;select1&quot;\r\n      &gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in exampleOptions&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n    &lt;vs-select\r\n      :danger=&quot;true&quot;\r\n      danger-text=&quot;This field is invalid&quot;\r\n      placeholder=&quot;Select&quot;\r\n      class=&quot;selectExample&quot;\r\n      label=&quot;Danger&quot;\r\n      multiple\r\n      v-model=&quot;select2&quot;\r\n      &gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in exampleOptions&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n    &lt;vs-select\r\n      :warning=&quot;true&quot;\r\n      warning-text=&quot;This field is invalid&quot;\r\n      placeholder=&quot;Select&quot;\r\n      class=&quot;selectExample&quot;\r\n      label=&quot;Warning&quot;\r\n      multiple\r\n      v-model=&quot;select3&quot;\r\n      &gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in exampleOptions&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n    &lt;vs-select\r\n      description-text=&quot;Simple info for multiple select&quot;\r\n      placeholder=&quot;Select&quot;\r\n      class=&quot;selectExample&quot;\r\n      label=&quot;Description&quot;\r\n      multiple\r\n      v-model=&quot;select4&quot;\r\n      &gt;\r\n      &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in exampleOptions&quot; /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data(){\r\n    return {\r\n      select1:[],\r\n      select2:[],\r\n      select3:[],\r\n      select4:[],\r\n      exampleOptions:[\r\n        {text: &apos;Square&apos;, value: 1},\r\n        {text: &apos;Rectangle&apos;, value: 2},\r\n        {text: &apos;Rombo&apos;, value: 3},\r\n        {text: &apos;Romboid&apos;, value: 4},\r\n        {text: &apos;Trapeze&apos;, value: 5},\r\n        {text: &apos;Triangle&apos;, value: 6},\r\n        {text: &apos;Polygon&apos;, value: 7},\r\n        {text: &apos;Regular polygon&apos;, value: 8},\r\n        {text: &apos;Circumference&apos;, value: 9},\r\n        {text: &apos;Circle&apos;, value: 10},\r\n        {text: &apos;Circular sector&apos;, value: 11},\r\n        {text: &apos;Circular trapeze&apos;, value: 12},\r\n      ]\r\n    }\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n    </vx-card>\r\n</template>\r\n<script>\r\nexport default {\r\n    data() {\r\n        return {\r\n\r\n            select1: [],\r\n            select2: [],\r\n            select3: [],\r\n            select4: [],\r\n            exampleOptions: [\r\n                { text: 'Square', value: 1 },\r\n                { text: 'Rectangle', value: 2 },\r\n                { text: 'Rombo', value: 3 },\r\n                { text: 'Romboid', value: 4 },\r\n                { text: 'Trapeze', value: 5 },\r\n                { text: 'Triangle', value: 6 },\r\n                { text: 'Polygon', value: 7 },\r\n                { text: 'Regular polygon', value: 8 },\r\n                { text: 'Circumference', value: 9 },\r\n                { text: 'Circle', value: 10 },\r\n                { text: 'Circular sector', value: 11 },\r\n                { text: 'Circular trapeze', value: 12 },\r\n            ],\r\n        }\r\n    },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectValidators.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectValidators.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SelectValidators.vue?vue&type=template&id=8784ff78\"\nimport script from \"./SelectValidators.vue?vue&type=script&lang=js\"\nexport * from \"./SelectValidators.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Is Selected Item\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"You can validate if an option is selected with the property \"),_c('code',[_vm._v(\"is-selected.sync\")]),_vm._v(\" and do with it multiple variants with changing the text of the selected options\")]),_c('div',{staticClass:\"demo-alignment\"},[_c('vs-select',{staticClass:\"selectExample\",model:{value:(_vm.select1),callback:function ($$v) {_vm.select1=$$v},expression:\"select1\"}},_vm._l((_vm.options1),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"is-selected\":item.isSelected,\"value\":item.value,\"text\":item.isSelected?item.selectedText:item.label},on:{\"update:isSelected\":function($event){return _vm.$set(item, \"isSelected\", $event)},\"update:is-selected\":function($event){return _vm.$set(item, \"isSelected\", $event)}}})}),1)],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template lang=\\\"html\\\">\\n  <div class=\\\"con-select-example\\\">\\n\\n    <vs-select class=\\\"selectExample\\\" v-model=\\\"select1\\\" >\\n      <vs-select-item\\n        :is-selected.sync=\\\"item.isSelected\\\"\\n        :key=\\\"index\\\"\\n        :value=\\\"item.value\\\"\\n        :text=\\\"item.isSelected?item.selectedText:item.label\\\"\\n        v-for=\\\"(item,index) in options1\\\"\\n        />\\n    </vs-select>\\n\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  data(){\\n    return {\\n      select1:3,\\n      options1:[\\n        {value: 1, label: 'label 1', selectedText: 'show after select label 1', isSelected: false },\\n        {value: 2, label: 'label 2', selectedText: 'show after select label 2', isSelected: false },\\n        {value: 3, label: 'label 3', selectedText: 'show after select label 3', isSelected: false },\\n      ],\\n    }\\n  }\\n}\\n</script>\\n\\n<style>\\n.selectExample {\\n  margin: 10px;\\n}\\n.con-select-example {\\n  display: flex;\\n  align-items: center;\\n  justify-content: center;\\n}\\n.con-select .vs-select {\\n  width: 100%\\n}\\n@media (max-width: 550px) {\\n  .con-select {\\n    flex-direction: column;\\n  }\\n  .con-select .vs-select {\\n    width: 100%\\n  }\\n}\\n</style>\\n\\t\\t\")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n\tFile Name: SelectIsSelectedItem.vue\r\n\tDescription: Display/Validate on selecting option\r\n\t----------------------------------------------------------------------------------------\r\n\tItem Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n\tAuthor: Pixinvent\r\n\tAuthor URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n\t<vx-card title=\"Is Selected Item\" code-toggler>\r\n\r\n\t\t<p>You can validate if an option is selected with the property <code>is-selected.sync</code> and do with it multiple variants with changing the text of the selected options</p>\r\n\r\n\t\t<div class=\"demo-alignment\">\r\n\t\t\t<vs-select class=\"selectExample\" v-model=\"select1\">\r\n\t\t\t\t<vs-select-item :is-selected.sync=\"item.isSelected\" :key=\"index\" :value=\"item.value\" :text=\"item.isSelected?item.selectedText:item.label\" v-for=\"(item,index) in options1\" />\r\n\t\t\t</vs-select>\r\n\t\t</div>\r\n\r\n\t\t<template slot=\"codeContainer\">\r\n&lt;template lang=&quot;html&quot;&gt;\r\n  &lt;div class=&quot;con-select-example&quot;&gt;\r\n\r\n    &lt;vs-select class=&quot;selectExample&quot; v-model=&quot;select1&quot; &gt;\r\n      &lt;vs-select-item\r\n        :is-selected.sync=&quot;item.isSelected&quot;\r\n        :key=&quot;index&quot;\r\n        :value=&quot;item.value&quot;\r\n        :text=&quot;item.isSelected?item.selectedText:item.label&quot;\r\n        v-for=&quot;(item,index) in options1&quot;\r\n        /&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data(){\r\n    return {\r\n      select1:3,\r\n      options1:[\r\n        {value: 1, label: &apos;label 1&apos;, selectedText: &apos;show after select label 1&apos;, isSelected: false },\r\n        {value: 2, label: &apos;label 2&apos;, selectedText: &apos;show after select label 2&apos;, isSelected: false },\r\n        {value: 3, label: &apos;label 3&apos;, selectedText: &apos;show after select label 3&apos;, isSelected: false },\r\n      ],\r\n    }\r\n  }\r\n}\r\n&lt;/script&gt;\r\n\r\n&lt;style&gt;\r\n.selectExample {\r\n  margin: 10px;\r\n}\r\n.con-select-example {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n.con-select .vs-select {\r\n  width: 100%\r\n}\r\n@media (max-width: 550px) {\r\n  .con-select {\r\n    flex-direction: column;\r\n  }\r\n  .con-select .vs-select {\r\n    width: 100%\r\n  }\r\n}\r\n&lt;/style&gt;\r\n\t\t</template>\r\n\t</vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n\tdata() {\r\n\t\treturn {\r\n\t\t\tselect1: 3,\r\n\t\t\toptions1: [\r\n\t\t\t\t{ value: 1, label: 'label 1', selectedText: 'show after select label 1', isSelected: false },\r\n\t\t\t\t{ value: 2, label: 'label 2', selectedText: 'show after select label 2', isSelected: false },\r\n\t\t\t\t{ value: 3, label: 'label 3', selectedText: 'show after select label 3', isSelected: false },\r\n\t\t\t],\r\n\t\t}\r\n\t},\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectIsSelectedItem.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectIsSelectedItem.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SelectIsSelectedItem.vue?vue&type=template&id=50d4d18c\"\nimport script from \"./SelectIsSelectedItem.vue?vue&type=script&lang=js\"\nexport * from \"./SelectIsSelectedItem.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Group items\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"You can group elements with the sub component \"),_c('code',[_vm._v(\"vs-select-group\")])]),_c('div',{staticClass:\"demo-alignment\"},[_c('vs-select',{staticClass:\"selectExample\",model:{value:(_vm.select81),callback:function ($$v) {_vm.select81=$$v},expression:\"select81\"}},_vm._l((_vm.options81),function(item,index){return _c('div',{key:index},[(item.group)?_c('vs-select-group',{attrs:{\"title\":item.title}},_vm._l((item.group),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1):_vm._e()],1)}),0),_c('vs-select',{staticClass:\"selectExample\",attrs:{\"vs-multiple\":\"\"},model:{value:(_vm.select82),callback:function ($$v) {_vm.select82=$$v},expression:\"select82\"}},_vm._l((_vm.options82),function(item,index){return _c('div',{key:index},[(item.group)?_c('vs-select-group',{attrs:{\"title\":item.title}},_vm._l((item.group),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1):_vm._e()],1)}),0),_c('vs-select',{staticClass:\"selectExample\",attrs:{\"vs-autocomplete\":\"\"},model:{value:(_vm.select83),callback:function ($$v) {_vm.select83=$$v},expression:\"select83\"}},_vm._l((_vm.options83),function(item,index){return _c('div',{key:index},[(item.group)?_c('vs-select-group',{attrs:{\"title\":item.title}},_vm._l((item.group),function(item,index){return _c('vs-select-item',{key:index,attrs:{\"value\":item.value,\"text\":item.text}})}),1):_vm._e()],1)}),0)],1),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template lang=\\\"html\\\">\\n  <div class=\\\"con-select-example\\\">\\n\\n    <vs-select class=\\\"selectExample\\\" vs-label=\\\"Defautl\\\" v-model=\\\"select1\\\">\\n      <div :key=\\\"index\\\" v-for=\\\"(item,index) in options1\\\">\\n\\n        <vs-select-group :title=\\\"item.title\\\" v-if=\\\"item.group\\\">\\n          <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in item.group\\\" />\\n        </vs-select-group>\\n\\n      </div>\\n    </vs-select>\\n\\n    <vs-select vs-multiple class=\\\"selectExample\\\" vs-label=\\\"Multiple\\\" v-model=\\\"select2\\\">\\n      <div :key=\\\"index\\\" v-for=\\\"(item,index) in options2\\\">\\n\\n        <vs-select-group :title=\\\"item.title\\\" v-if=\\\"item.group\\\">\\n          <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in item.group\\\" />\\n        </vs-select-group>\\n\\n      </div>\\n    </vs-select>\\n\\n    <vs-select vs-autocomplete class=\\\"selectExample\\\" vs-label=\\\"Autocomplete\\\" v-model=\\\"select3\\\">\\n      <div :key=\\\"index\\\" v-for=\\\"(item,index) in options3\\\">\\n\\n        <vs-select-group :title=\\\"item.title\\\" v-if=\\\"item.group\\\">\\n          <vs-select-item :key=\\\"index\\\" :value=\\\"item.value\\\" :text=\\\"item.text\\\" v-for=\\\"(item,index) in item.group\\\" />\\n        </vs-select-group>\\n\\n      </div>\\n    </vs-select>\\n  </div>\\n</template>\\n\\n<script>\\nexport default {\\n  data() {\\n    return {\\n      select1: 6,\\n      select2: [6],\\n      select3: ['red'],\\n      options1: [{\\n          title: 'Figures',\\n          group: [\\n            { text: 'Romboid', value: 4 },\\n            { text: 'Trapeze', value: 5 },\\n            { text: 'Triangle', value: 6 },\\n            { text: 'Polygon', value: 7 },\\n          ]\\n        },\\n        {\\n          title: 'Colors',\\n          group: [\\n            { text: 'Red', value: 'red' },\\n            { text: 'Green', value: 'green' },\\n            { text: 'Blue', value: 'blue' },\\n            { text: 'Purple', value: 'purple' },\\n          ]\\n        }\\n      ],\\n      options2: [{\\n          title: 'Figures',\\n          group: [\\n            { text: 'Romboid', value: 4 },\\n            { text: 'Trapeze', value: 5 },\\n            { text: 'Triangle', value: 6 },\\n            { text: 'Polygon', value: 7 },\\n          ]\\n        },\\n        {\\n          title: 'Colors',\\n          group: [\\n            { text: 'Red', value: 'red' },\\n            { text: 'Green', value: 'green' },\\n            { text: 'Blue', value: 'blue' },\\n            { text: 'Purple', value: 'purple' },\\n          ]\\n        }\\n      ],\\n      options3: [{\\n          title: 'Figures',\\n          group: [\\n            { text: 'Romboid', value: 4 },\\n            { text: 'Trapeze', value: 5 },\\n            { text: 'Triangle', value: 6 },\\n            { text: 'Polygon', value: 7 },\\n          ]\\n        },\\n        {\\n          title: 'Colors',\\n          group: [\\n            { text: 'Red', value: 'red' },\\n            { text: 'Green', value: 'green' },\\n            { text: 'Blue', value: 'blue' },\\n            { text: 'Purple', value: 'purple' },\\n          ]\\n        }\\n      ],\\n    }\\n  },\\n}\\n</script>\\n        \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: SelectGroupItems.vue\r\n    Description: Group options in select element\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Group items\" code-toggler>\r\n\r\n        <p>You can group elements with the sub component <code>vs-select-group</code></p>\r\n\r\n        <div class=\"demo-alignment\">\r\n\r\n            <vs-select class=\"selectExample\" v-model=\"select81\">\r\n                <div :key=\"index\" v-for=\"(item,index) in options81\">\r\n                    <vs-select-group :title=\"item.title\" v-if=\"item.group\">\r\n                        <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in item.group\" />\r\n                    </vs-select-group>\r\n                </div>\r\n            </vs-select>\r\n\r\n            <vs-select vs-multiple class=\"selectExample\" v-model=\"select82\">\r\n                <div :key=\"index\" v-for=\"(item,index) in options82\">\r\n                    <vs-select-group :title=\"item.title\" v-if=\"item.group\">\r\n                        <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in item.group\" />\r\n                    </vs-select-group>\r\n                </div>\r\n            </vs-select>\r\n\r\n            <vs-select vs-autocomplete class=\"selectExample\" v-model=\"select83\">\r\n                <div :key=\"index\" v-for=\"(item,index) in options83\">\r\n                    <vs-select-group :title=\"item.title\" v-if=\"item.group\">\r\n                        <vs-select-item :key=\"index\" :value=\"item.value\" :text=\"item.text\" v-for=\"(item,index) in item.group\" />\r\n                    </vs-select-group>\r\n                </div>\r\n            </vs-select>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template lang=&quot;html&quot;&gt;\r\n  &lt;div class=&quot;con-select-example&quot;&gt;\r\n\r\n    &lt;vs-select class=&quot;selectExample&quot; vs-label=&quot;Defautl&quot; v-model=&quot;select1&quot;&gt;\r\n      &lt;div :key=&quot;index&quot; v-for=&quot;(item,index) in options1&quot;&gt;\r\n\r\n        &lt;vs-select-group :title=&quot;item.title&quot; v-if=&quot;item.group&quot;&gt;\r\n          &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in item.group&quot; /&gt;\r\n        &lt;/vs-select-group&gt;\r\n\r\n      &lt;/div&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n    &lt;vs-select vs-multiple class=&quot;selectExample&quot; vs-label=&quot;Multiple&quot; v-model=&quot;select2&quot;&gt;\r\n      &lt;div :key=&quot;index&quot; v-for=&quot;(item,index) in options2&quot;&gt;\r\n\r\n        &lt;vs-select-group :title=&quot;item.title&quot; v-if=&quot;item.group&quot;&gt;\r\n          &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in item.group&quot; /&gt;\r\n        &lt;/vs-select-group&gt;\r\n\r\n      &lt;/div&gt;\r\n    &lt;/vs-select&gt;\r\n\r\n    &lt;vs-select vs-autocomplete class=&quot;selectExample&quot; vs-label=&quot;Autocomplete&quot; v-model=&quot;select3&quot;&gt;\r\n      &lt;div :key=&quot;index&quot; v-for=&quot;(item,index) in options3&quot;&gt;\r\n\r\n        &lt;vs-select-group :title=&quot;item.title&quot; v-if=&quot;item.group&quot;&gt;\r\n          &lt;vs-select-item :key=&quot;index&quot; :value=&quot;item.value&quot; :text=&quot;item.text&quot; v-for=&quot;(item,index) in item.group&quot; /&gt;\r\n        &lt;/vs-select-group&gt;\r\n\r\n      &lt;/div&gt;\r\n    &lt;/vs-select&gt;\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nexport default {\r\n  data() {\r\n    return {\r\n      select1: 6,\r\n      select2: [6],\r\n      select3: [&apos;red&apos;],\r\n      options1: [{\r\n          title: &apos;Figures&apos;,\r\n          group: [\r\n            { text: &apos;Romboid&apos;, value: 4 },\r\n            { text: &apos;Trapeze&apos;, value: 5 },\r\n            { text: &apos;Triangle&apos;, value: 6 },\r\n            { text: &apos;Polygon&apos;, value: 7 },\r\n          ]\r\n        },\r\n        {\r\n          title: &apos;Colors&apos;,\r\n          group: [\r\n            { text: &apos;Red&apos;, value: &apos;red&apos; },\r\n            { text: &apos;Green&apos;, value: &apos;green&apos; },\r\n            { text: &apos;Blue&apos;, value: &apos;blue&apos; },\r\n            { text: &apos;Purple&apos;, value: &apos;purple&apos; },\r\n          ]\r\n        }\r\n      ],\r\n      options2: [{\r\n          title: &apos;Figures&apos;,\r\n          group: [\r\n            { text: &apos;Romboid&apos;, value: 4 },\r\n            { text: &apos;Trapeze&apos;, value: 5 },\r\n            { text: &apos;Triangle&apos;, value: 6 },\r\n            { text: &apos;Polygon&apos;, value: 7 },\r\n          ]\r\n        },\r\n        {\r\n          title: &apos;Colors&apos;,\r\n          group: [\r\n            { text: &apos;Red&apos;, value: &apos;red&apos; },\r\n            { text: &apos;Green&apos;, value: &apos;green&apos; },\r\n            { text: &apos;Blue&apos;, value: &apos;blue&apos; },\r\n            { text: &apos;Purple&apos;, value: &apos;purple&apos; },\r\n          ]\r\n        }\r\n      ],\r\n      options3: [{\r\n          title: &apos;Figures&apos;,\r\n          group: [\r\n            { text: &apos;Romboid&apos;, value: 4 },\r\n            { text: &apos;Trapeze&apos;, value: 5 },\r\n            { text: &apos;Triangle&apos;, value: 6 },\r\n            { text: &apos;Polygon&apos;, value: 7 },\r\n          ]\r\n        },\r\n        {\r\n          title: &apos;Colors&apos;,\r\n          group: [\r\n            { text: &apos;Red&apos;, value: &apos;red&apos; },\r\n            { text: &apos;Green&apos;, value: &apos;green&apos; },\r\n            { text: &apos;Blue&apos;, value: &apos;blue&apos; },\r\n            { text: &apos;Purple&apos;, value: &apos;purple&apos; },\r\n          ]\r\n        }\r\n      ],\r\n    }\r\n  },\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    data() {\r\n        return {\r\n            select81: 6,\r\n            select82: [6],\r\n            select83: ['red'],\r\n            options81: [{\r\n                    title: 'Figures',\r\n                    group: [\r\n                        { text: 'Romboid', value: 4 },\r\n                        { text: 'Trapeze', value: 5 },\r\n                        { text: 'Triangle', value: 6 },\r\n                        { text: 'Polygon', value: 7 },\r\n                    ]\r\n                },\r\n                {\r\n                    title: 'Colors',\r\n                    group: [\r\n                        { text: 'Red', value: 'red' },\r\n                        { text: 'Green', value: 'green' },\r\n                        { text: 'Blue', value: 'blue' },\r\n                        { text: 'Purple', value: 'purple' },\r\n                    ]\r\n                }\r\n            ],\r\n            options82: [{\r\n                    title: 'Figures',\r\n                    group: [\r\n                        { text: 'Romboid', value: 4 },\r\n                        { text: 'Trapeze', value: 5 },\r\n                        { text: 'Triangle', value: 6 },\r\n                        { text: 'Polygon', value: 7 },\r\n                    ]\r\n                },\r\n                {\r\n                    title: 'Colors',\r\n                    group: [\r\n                        { text: 'Red', value: 'red' },\r\n                        { text: 'Green', value: 'green' },\r\n                        { text: 'Blue', value: 'blue' },\r\n                        { text: 'Purple', value: 'purple' },\r\n                    ]\r\n                }\r\n            ],\r\n            options83: [{\r\n                    title: 'Figures',\r\n                    group: [\r\n                        { text: 'Romboid', value: 4 },\r\n                        { text: 'Trapeze', value: 5 },\r\n                        { text: 'Triangle', value: 6 },\r\n                        { text: 'Polygon', value: 7 },\r\n                    ]\r\n                },\r\n                {\r\n                    title: 'Colors',\r\n                    group: [\r\n                        { text: 'Red', value: 'red' },\r\n                        { text: 'Green', value: 'green' },\r\n                        { text: 'Blue', value: 'blue' },\r\n                        { text: 'Purple', value: 'purple' },\r\n                    ]\r\n                }\r\n            ],\r\n        }\r\n    },\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectGroupItems.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SelectGroupItems.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./SelectGroupItems.vue?vue&type=template&id=091b0e76\"\nimport script from \"./SelectGroupItems.vue?vue&type=script&lang=js\"\nexport * from \"./SelectGroupItems.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","<!-- =========================================================================================\r\n    File Name: Select.vue\r\n    Description: Select element - Imports page portions\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\r\n========================================================================================== -->\r\n\r\n<template>\r\n    <div id=\"form-element-select-demo\">\r\n        <select-single-selection></select-single-selection>\r\n        <select-color></select-color>\r\n        <select-autocomplete></select-autocomplete>\r\n        <select-multiple></select-multiple>\r\n        <select-labels></select-labels>\r\n        <select-validators></select-validators>\r\n        <select-is-selected-item></select-is-selected-item>\r\n        <select-group-items></select-group-items>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport SelectSingleSelection from './SelectSingleSelection.vue'\r\nimport SelectColor from './SelectColor.vue'\r\nimport SelectAutocomplete from './SelectAutocomplete.vue'\r\nimport SelectMultiple from './SelectMultiple.vue'\r\nimport SelectLabels from './SelectLabels.vue'\r\nimport SelectValidators from './SelectValidators.vue'\r\nimport SelectIsSelectedItem from './SelectIsSelectedItem.vue'\r\nimport SelectGroupItems from './SelectGroupItems.vue'\r\n\r\nexport default {\r\n    components: {\r\n        SelectSingleSelection,\r\n        SelectColor,\r\n        SelectAutocomplete,\r\n        SelectMultiple,\r\n        SelectLabels,\r\n        SelectValidators,\r\n        SelectIsSelectedItem,\r\n        SelectGroupItems\r\n    }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Select.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Select.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./Select.vue?vue&type=template&id=4b4385a3\"\nimport script from \"./Select.vue?vue&type=script&lang=js\"\nexport * from \"./Select.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}