{"version":3,"sources":["webpack:///./src/views/forms/form-elements/select/Select.vue?e7cd","webpack:///./src/views/forms/form-elements/select/SelectSingleSelection.vue?25e1","webpack:///src/views/forms/form-elements/select/SelectSingleSelection.vue","webpack:///./src/views/forms/form-elements/select/SelectSingleSelection.vue?4af8","webpack:///./src/views/forms/form-elements/select/SelectSingleSelection.vue","webpack:///./src/views/forms/form-elements/select/SelectColor.vue?ec0a","webpack:///src/views/forms/form-elements/select/SelectColor.vue","webpack:///./src/views/forms/form-elements/select/SelectColor.vue?611a","webpack:///./src/views/forms/form-elements/select/SelectColor.vue","webpack:///./src/views/forms/form-elements/select/SelectAutocomplete.vue?35c8","webpack:///src/views/forms/form-elements/select/SelectAutocomplete.vue","webpack:///./src/views/forms/form-elements/select/SelectAutocomplete.vue?5d62","webpack:///./src/views/forms/form-elements/select/SelectAutocomplete.vue","webpack:///./src/views/forms/form-elements/select/SelectMultiple.vue?97ef","webpack:///src/views/forms/form-elements/select/SelectMultiple.vue","webpack:///./src/views/forms/form-elements/select/SelectMultiple.vue?9a3a","webpack:///./src/views/forms/form-elements/select/SelectMultiple.vue","webpack:///./src/views/forms/form-elements/select/SelectLabels.vue?14e5","webpack:///src/views/forms/form-elements/select/SelectLabels.vue","webpack:///./src/views/forms/form-elements/select/SelectLabels.vue?3d73","webpack:///./src/views/forms/form-elements/select/SelectLabels.vue","webpack:///./src/views/forms/form-elements/select/SelectValidators.vue?b3a4","webpack:///src/views/forms/form-elements/select/SelectValidators.vue","webpack:///./src/views/forms/form-elements/select/SelectValidators.vue?2d9c","webpack:///./src/views/forms/form-elements/select/SelectValidators.vue","webpack:///./src/views/forms/form-elements/select/SelectIsSelectedItem.vue?739c","webpack:///src/views/forms/form-elements/select/SelectIsSelectedItem.vue","webpack:///./src/views/forms/form-elements/select/SelectIsSelectedItem.vue?a8f1","webpack:///./src/views/forms/form-elements/select/SelectIsSelectedItem.vue","webpack:///./src/views/forms/form-elements/select/SelectGroupItems.vue?8046","webpack:///src/views/forms/form-elements/select/SelectGroupItems.vue","webpack:///./src/views/forms/form-elements/select/SelectGroupItems.vue?3199","webpack:///./src/views/forms/form-elements/select/SelectGroupItems.vue","webpack:///src/views/forms/form-elements/select/Select.vue","webpack:///./src/views/forms/form-elements/select/Select.vue?f60b","webpack:///./src/views/forms/form-elements/select/Select.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticRenderFns","_v","staticClass","model","value","callback","$$v","select1","expression","_l","item","index","key","text","select2","select3","slot","component","directives","name","rawName","domProps","on","$event","target","composing","colorx","select4","isSelected","selectedText","label","$set","select81","title","_e","select82","select83"],"mappings":"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","file":"js/chunk-2d0dd9fc.2e2ac54c.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: SelectSingleSelection.vue\r\n    Description: Single Selection\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuesax Admin - VueJS Dashboard Admin 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>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/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/@vue/cli-plugin-babel/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=8e6e7e7c&\"\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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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)}\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: Vuesax Admin - VueJS Dashboard Admin 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>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/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/@vue/cli-plugin-babel/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=796fbed6&\"\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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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)}\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: Vuesax Admin - VueJS Dashboard Admin 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>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/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/@vue/cli-plugin-babel/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=ae9b3362&\"\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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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)}\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: Vuesax Admin - VueJS Dashboard Admin 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>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/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/@vue/cli-plugin-babel/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=e03bbcf4&\"\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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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)}\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: Vuesax Admin - VueJS Dashboard Admin 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>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/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/@vue/cli-plugin-babel/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=f9f49132&\"\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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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)}\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: Vuesax Admin - VueJS Dashboard Admin 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>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/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/@vue/cli-plugin-babel/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=3caf3c5a&\"\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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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)}\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: Vuesax Admin - VueJS Dashboard Admin 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\t\t\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>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/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/@vue/cli-plugin-babel/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=6a780f06&\"\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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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)}\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: Vuesax Admin - VueJS Dashboard Admin 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>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/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/@vue/cli-plugin-babel/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=871bd780&\"\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: Vuesax Admin - VueJS Dashboard Admin 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/@vue/cli-plugin-babel/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/@vue/cli-plugin-babel/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=158a3cf8&\"\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":""}