text: (window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["options"],{"1f2b":function(e,t,a){},"832f":function(e,t,a){"use strict";a.r(t);var l=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{attrs:{id:"options-content"}},[e._m(0),e._m(1),e._m(2),e._m(3),e._m(4),e._m(5),e._m(6),e._m(7),e._m(8),e._m(9),e._m(10),e._m(11),e._m(12),e._m(13),e._m(14),e._m(15),e._m(16),e._m(17),e._m(18),a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("beforeOnChange")]),a("p",[e._v(" beforeOnChange will trigger a callback on an option click and will allow you the ability to halt if the value it produces isnt to your liking. In order to stop propagation just return false on the callback. Returning nothing or true will allow it to continue as normal. ")]),e.beforeOnChangeSingle?a("div",[a("strong",[e._v("Before on change: "+e._s(e.beforeOnChangeSingle))])]):e._e(),e._m(19),a("br"),a("br"),e.beforeOnChangeMultiple?a("div",[a("strong",[e._v("Before on change: "+e._s(e.beforeOnChangeMultiple))])]):e._e(),e._m(20),e._m(21)]),a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("onChange")]),a("p",[e._v(" onChange will trigger a callback after the value of the select dropdown has changed. ")]),e.onChangeSingle?a("div",[a("strong",[e._v("On change: "+e._s(e.onChangeSingle))])]):e._e(),e._m(22),a("br"),a("br"),e.onChangeMultiple?a("div",[a("strong",[e._v("On change: "+e._s(e.onChangeMultiple))])]):e._e(),e._m(23),e._m(24)]),e._m(25),e._m(26),e._m(27),e._m(28)])},n=[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("select")]),a("p",[e._v(" The select option is used to identify the select element that will be used to create slim select. You can any value you normally would in a querySelector or pass the element directly. ")]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '.element .you #want',\n          // or\n          select: document.querySelector('.element .you #want')\n        })\n\n        // If you already have a created slim select you can select your div\n        // and continue to use slim select off of the element using the .slim data value\n        let el = document.querySelector('.element .you #want')\n        el.slim.open() // Or any other options/methods\n      ")]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("data")]),a("p",[e._v("Data is a value that can be set to initialize options in the select dropdown")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"dataSingle"}}),a("select",{attrs:{id:"dataMultiple",multiple:""}})]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '.element .you #want',\n          data: [\n            {text: 'Value 1'},\n            {text: 'Value 2'},\n            {text: 'Value 3'}\n          ],\n          // groups\n          data: [\n            {\n              label: 'Animals',\n              options: [\n                {text: 'Cat'},\n                {text: 'Dog'},\n                {text: 'Bird'}\n              ]\n            }\n          ]\n          // Mix - option and group options\n          data: [\n            {text: 'Human'}, // regular option\n            {\n              label: 'Animals',\n              options: [\n                {text: 'Cat'},\n                {text: 'Dog'},\n                {text: 'Bird'}\n              ]\n            }\n          ]\n        })\n\n        // If you want to set a placeholder set the first object placeholder to true\n        {'placeholder': true, 'text': 'placeholder text'}\n      ")]),e._v("\n    ")]),a("h4",[e._v("Data Types")]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        var optgroup = {\n          label: 'label', // Required\n          options: [] // Required - value is an array of options\n        }\n\n        var option = {\n          text: 'text', // Required\n          value: 'value', // Optional - value will be set by text if not set\n          innerHTML: '<b>Html</b>', // Optional - will be used for display purposes if set\n          selected: false, // Optional - default is false\n          disabled: false, // Optional - default is false\n          placeholder: false, // Optional - default is false\n          class: '', // Optional - default is not set\n          css: '', // Optional - default is not set\n          data: {} // Optional - If you have data attributes\n        }\n      ")]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("options")]),a("p",[e._v(" Slim select will take on attributes of the original as best as possible. Below are example usages of attributes added to the underlining select options that slim select picked up and used ")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"optionsSingle"}},[a("option",{attrs:{"data-placeholder":"true"}}),a("option",{attrs:{value:"value1","data-info":"Here is info"}},[e._v("Data Attributes")]),a("option",{attrs:{value:"value2",disabled:""}},[e._v("Disabled Option")]),a("option",{staticClass:"green",attrs:{value:"value3"}},[e._v("Class Green")]),a("option",{staticStyle:{color:"purple"},attrs:{value:"value3"}},[e._v("Inline Style")])]),a("select",{attrs:{id:"optionsMultiple",multiple:""}},[a("option",{attrs:{value:"value1","data-info":"Here is info"}},[e._v("Data Attributes")]),a("option",{attrs:{value:"value2",disabled:""}},[e._v("Disabled Option")]),a("option",{staticClass:"green",attrs:{value:"value3"}},[e._v("Class Green")]),a("option",{staticStyle:{color:"purple"},attrs:{value:"value3"}},[e._v("Inline Style")])])])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("ajax")]),a("p",[e._v(" Slim select allows you to syncronize result values from your ajax requests."),a("br"),e._v(" Call callback() method with slimselect data, false or string with specific string."),a("br"),a("br"),e._v(" When doing fetch request for each ajax call be sure to debounce your request so you are not getting fetch race conditions. ")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"ajaxSingle"}},[a("option",{attrs:{"data-placeholder":"true"}})]),a("select",{attrs:{id:"ajaxMultiple",multiple:""}})]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '#ajax',\n          searchingText: 'Searching...', // Optional - Will show during ajax request\n          ajax: function (search, callback) {\n            // Check search value. If you dont like it callback(false) or callback('Message String')\n            if (search.length < 3) {\n              callback('Need 3 characters')\n              return\n            }\n\n            // Perform your own ajax request here\n            fetch('https://jsonplaceholder.typicode.com/users')\n            .then(function (response) {\n              return response.json()\n            })\n            .then(function (json) {\n              let data = []\n              for (let i = 0; i < json.length; i++) {\n                data.push({text: json[i].name})\n              }\n              \n              // Upon successful fetch send data to callback function.\n              // Be sure to send data back in the proper format.\n              // Refer to the method setData for examples of proper format.\n              callback(data)\n            })\n            .catch(function(error) {\n              // If any erros happened send false back through the callback\n              callback(false)\n            })\n          }\n        })\n      ")]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("placeholder")]),a("p",[e._v(' Placeholders consists of setting the placeholder option value. The only difference is single selects require an empty option with data-placeholder set to true. Default value is "Select Value". ')]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"placeholderSingle"}},[a("option",{attrs:{"data-placeholder":"true"}}),a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])]),a("select",{attrs:{id:"placeholderMultiple",multiple:""}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '#placeholder',\n          placeholder: 'Placeholder Text Here'\n        })\n      ")]),e._v("\n    ")]),a("pre",[e._v("      "),a("code",{staticClass:"language-html"},[e._v('\n        \x3c!-- Set empty option with data-placeholder if you to have placeholder --\x3e\n        \x3c!-- text for single select, otherwise first option will be selected --\x3e\n        <select id="placeholderSingle">\n          <option data-placeholder="true"></option>\n          <option value="value1">Value 1</option>\n          <option value="value2">Value 2</option>\n          <option value="value3">Value 3</option>\n        </select>\n      ')]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("allowDeselect")]),a("p",[e._v(" This will allow you to deselect a value on a single select dropdown."),a("br"),e._v(" Be sure to have an empty option data placeholder so slim select has an empty string value to select. ")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"allowDeselect"}},[a("option",{attrs:{"data-placeholder":"true"}}),a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '.element .you #want',\n          allowDeselect: true\n        })\n      ")]),e._v("\n    ")]),a("pre",[e._v("      "),a("code",{staticClass:"language-html"},[e._v('\n        \x3c!-- Requires emtpy data-placeholder option --\x3e\n        <select id="allowDeselect">\n          <option data-placeholder="true"></option>\n          <option value="value1">Value 1</option>\n          <option value="value2">Value 2</option>\n          <option value="value3">Value 3</option>\n        </select>\n      ')]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("display")]),a("p",[e._v("Allows to hide elements of select options.")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"selectdisplay",multiple:""}})]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n          const displaySelect = new SlimSelect({\n            select: '#selectdisplay'\n          })\n\n          const displayData = [\n            { value: 'A', text: 'A', display: false },\n            { value: 'B', text: 'B' },\n            { value: 'C', text: 'C' }\n          ]\n\n          displaySelect.setData(displayData)\n          displaySelect.set(['A', 'C'])\n      ")]),e._v("\n    ")]),a("pre",[e._v("      "),a("code",{staticClass:"language-html"},[e._v('\n        <select id="selectMultiMandatory" multiple>\n        </select>\n      ')]),e._v("\n    ")]),a("p",[e._v("Or")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"selectdisplay2",multiple:""}},[a("option",{staticStyle:{display:"none"},attrs:{value:"A",selected:""}},[e._v("A")]),a("option",{attrs:{value:"B",selected:""}},[e._v("B")]),a("option",{attrs:{value:"C"}},[e._v("C")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n          const slim = new SlimSelect({\n              select: '#selectdisplay2'\n          });\n      ")]),e._v("\n    ")]),a("pre",[e._v("      "),a("code",{staticClass:"language-html"},[e._v('\n        <select id="selectdisplay2" multiple>\n          <option value="A" style="display: none;" selected>A</option>\n          <option value="B" selected>B</option>\n          <option value="C">C</option>\n        </select>\n      ')]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("allowDeselectOption")]),a("p",[e._v(" This will allow you to deselect a value in the dropdown. By simple clicking the option again."),a("br"),e._v(" Be sure to have an empty option data placeholder so slim select has an empty string value to select. ")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"allowDeselectOption"}},[a("option",{attrs:{"data-placeholder":"true"}}),a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])]),a("select",{attrs:{id:"allowDeselectOptionMultiple",multiple:""}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '.element .you #want',\n          allowDeselectOption: true\n        })\n      ")]),e._v("\n    ")]),a("pre",[e._v("      "),a("code",{staticClass:"language-html"},[e._v('\n        \x3c!-- Requires emtpy data-placeholder option --\x3e\n        <select id="allowDeselectOption">\n          <option data-placeholder="true"></option>\n          <option value="value1">Value 1</option>\n          <option value="value2">Value 2</option>\n          <option value="value3">Value 3</option>\n        </select>\n      ')]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("deselectLabel")]),a("p",[e._v(" This will allow you to change the deselect label (default 'x') on single select lists, and the delete label on multiple-select lists. ")]),a("p",[e._v("Note: Be aware of the lmited space available for it")]),a("div",{staticClass:"set-content"},[a("select",{staticClass:"deselectLabel",attrs:{id:"deselectLabel"}},[a("option",{attrs:{"data-placeholder":"true"}}),a("option",{attrs:{selected:"",value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '.element .you #want',\n          allowDeselect: true,\n          deselectLabel: '<span class=\"red\">✖</span>'\n        })\n      ")]),e._v("\n    ")]),a("pre",[e._v("      "),a("code",{staticClass:"language-html"},[e._v('\n        \x3c!-- Requires emtpy data-placeholder option --\x3e\n        <select id="deselectLabel">\n          <option data-placeholder="true"></option>\n          <option value="value1">Value 1</option>\n          <option value="value2">Value 2</option>\n          <option value="value3">Value 3</option>\n        </select>\n      ')]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("addable")]),a("p",[e._v(" Slim select has the ability to dynamically add options via the search input field ")]),a("p",[e._v(" addable is a callback which takes a function parameter. The return value is the string of the value you want added. ")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"addableSingle"}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])]),a("select",{attrs:{id:"addableMultiple",multiple:""}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '.element .you #want',\n          // Optional - In the event you want to alter/validate it as a return value\n          addable: function (value) {\n            // return false or null if you do not want to allow value to be submitted\n            if (value === 'bad') {return false}\n\n            // Return the value string\n            return value // Optional - value alteration // ex: value.toLowerCase()\n\n            // Optional - Return a valid data object. See methods/setData for list of valid options\n            return {\n              text: value,\n              value: value.toLowerCase()\n            }\n          }\n        })\n      ")]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("limit")]),a("p",[e._v("When using multi select you can set a limit on the amount of selections you can have.")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"selectMultiLimit",multiple:""}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        let slim = new SlimSelect({\n          select: '#selectMultiLimit',\n          limit: 2\n        })\n      ")]),e._v("\n    ")]),a("pre",[e._v("      "),a("code",{staticClass:"language-html"},[e._v('\n        <select id="selectMultiLimit" multiple>\n          <option value="value1">Value 1</option>\n          <option value="value2">Value 2</option>\n          <option value="value3">Value 3</option>\n        </select>\n      ')]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("mandatory")]),a("p",[e._v("When using multi select you can set a mandatory on the option to prevent capability to deselect particular option. Note options with mandatory flag is not selected by default, you need select them yourselfs.")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"selectMultiMandatory",multiple:""}})]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n          const slim = new SlimSelect({\n              select: '#selectMultiMandatory'\n          });\n\n          const data = [\n              { value: 'A', text: 'A', mandatory: true },\n              { value: 'B', text: 'B' },\n              { value: 'C', text: 'C' }\n          ]\n\n          slim.setData(data)\n          slim.set([\"A\", \"C\"])\n      ")]),e._v("\n    ")]),a("pre",[e._v("      "),a("code",{staticClass:"language-html"},[e._v('\n        <select id="selectMultiMandatory" multiple>\n        </select>\n      ')]),e._v("\n    ")]),a("p",[e._v("Or")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"selectMultiMandatory2",multiple:""}},[a("option",{attrs:{value:"A","data-mandatory":"true",selected:""}},[e._v("A")]),a("option",{attrs:{value:"B",selected:""}},[e._v("B")]),a("option",{attrs:{value:"C"}},[e._v("C")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n          const slim = new SlimSelect({\n              select: '#selectMultiMandatory2'\n          });\n      ")]),e._v("\n    ")]),a("pre",[e._v("      "),a("code",{staticClass:"language-html"},[e._v('\n        <select id="selectMultiMandatory" multiple>\n          <option value="A" data-mandatory="true" selected>A</option>\n          <option value="B" selected>B</option>\n          <option value="C">C</option>\n        </select>\n      ')]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("css class")]),a("p",[e._v(" Slim select will inherit any classes that were added to the original select element. This includes options as well. ")]),a("div",{staticClass:"set-content"},[a("select",{staticClass:"select-class",attrs:{id:"select-class"}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])]),a("select",{staticClass:"option-class",attrs:{id:"option-class"}},[a("option",{staticClass:"red",attrs:{value:"value1"}},[e._v("Red")]),a("option",{staticClass:"green",attrs:{value:"value2"}},[e._v("Green")]),a("option",{staticClass:"blue",attrs:{value:"value3"}},[e._v("Blue")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-html"},[e._v('\n        <select id="select-class" class="classItems">\n          <option class="red" value="value1">Value 1</option>\n          <option class="green" value="value2">Value 2</option>\n          <option class="blue" value="value3">Value 3</option>\n        </select>\n      ')]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("inline styles")]),a("p",[e._v(" Slim select will inherit any styles that were added to the original select element. This includes options as well. ")]),a("div",{staticClass:"set-content"},[a("select",{staticStyle:{color:"red"},attrs:{id:"select-style"}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])]),a("select",{attrs:{id:"option-style"}},[a("option",{staticStyle:{color:"red"},attrs:{value:"value1"}},[e._v("Red")]),a("option",{staticStyle:{color:"green"}},[e._v("Green")]),a("option",{staticStyle:{color:"blue"}},[e._v("Blue")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-html"},[e._v('\n        <select id="select-style" style="color: red;">\n          <option value="value1">Value 1</option>\n          <option value="value2">Value 2</option>\n          <option value="value3">Value 3</option>\n        </select>\n\n        <select id="option-style">\n          <option style="color: red;" value="value1">Red</option>\n          <option style="color: green;">Green</option>\n          <option style="color: blue;">Blue</option>\n        </select>\n      ')]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("innerHTML")]),a("p",[e._v(" Slim select has the ability to set custom html in content in the select option. ")]),a("p",[e._v(" Due to html spec we cant do this directly on the select dropdown, but we can pass them as data values to slim select ")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"selectInnerHTMLSingle"}}),a("select",{attrs:{id:"selectInnerHTMLMulti",multiple:""}})]),a("div",{staticClass:"set-content",staticStyle:{padding:"16px 0 0 0"}},[a("h4",[e._v("Use text for selected values")])]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"selectInnerHTMLSingleText"}}),a("select",{attrs:{id:"selectInnerHTMLMultiText",multiple:""}})]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        <select id=\"select-innerHTML\"></select>\n\n        var select = new SlimSelect({\n          select: '#select-innerHTML',\n          valuesUseText: false, // Use text instead of innerHTML for selected values - default false\n          data: [\n            {innerHTML: '<img height=\"30\" width=\"30\" src=\"http://lorempixel.com/30/30\" /> Image', text: 'Image', value: 'image'},\n            {innerHTML: '<b>Bold Text</b>', text: 'Bold Text', value: 'bold text'},\n            {innerHTML: '<div style=\"border: solid 1px #666666;\">Border</div>', text: 'Border', value: 'border'},\n            {innerHTML: '<i>Slim Select you are awesome</i>', text: 'Slim Select awesome'}\n          ]\n        })\n      ")]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("showSearch / searchText / searchingText / searchFocus / searchHighlight")]),a("p",[e._v(" showSearch is a boolean value that will decide whether or not to show the search. Default is true. ")]),a("p",[e._v(" searchText is a string value that will show in the event there are no results. Default is 'No Results'. ")]),a("p",[e._v(" searchingText is a string value that will show during an ajax request. Default is 'Searching...'. ")]),a("p",[e._v(" searchPlaceholder is a string value that will set the value of the input search placeholder text. Default is 'Search'. ")]),a("p",[e._v(" searchFocus is a boolean value that will focus search input on opening. Default is true. ")]),a("p",[e._v(" searchHighlight is a boolean value that will highlight search results. Default is false. ")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"showSearchSingle"}},[a("option",{attrs:{value:"dog"}},[e._v("Dog")]),a("option",{attrs:{value:"cat"}},[e._v("Cat")]),a("option",{attrs:{value:"bird"}},[e._v("Bird")])]),a("select",{attrs:{id:"searchTextSingle"}},[a("option",{attrs:{value:"dog"}},[e._v("Dog")]),a("option",{attrs:{value:"cat"}},[e._v("Cat")]),a("option",{attrs:{value:"bird"}},[e._v("Bird")])]),a("select",{attrs:{id:"searchPlaceholderSingle"}},[a("option",{attrs:{value:"dog"}},[e._v("Dog")]),a("option",{attrs:{value:"cat"}},[e._v("Cat")]),a("option",{attrs:{value:"bird"}},[e._v("Bird")])]),a("select",{attrs:{id:"searchFocusSingle"}},[a("option",{attrs:{value:"dog"}},[e._v("Dog")]),a("option",{attrs:{value:"cat"}},[e._v("Cat")]),a("option",{attrs:{value:"bird"}},[e._v("Bird")])]),a("select",{attrs:{id:"searchHighlightSingle"}},[a("option",{attrs:{value:"dog"}},[e._v("Dog")]),a("option",{attrs:{value:"cat"}},[e._v("Cat")]),a("option",{attrs:{value:"bird"}},[e._v("Bird")])])]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"showSearchMulti",multiple:""}},[a("option",{attrs:{value:"dog"}},[e._v("Dog")]),a("option",{attrs:{value:"cat"}},[e._v("Cat")]),a("option",{attrs:{value:"bird"}},[e._v("Bird")])]),a("select",{attrs:{id:"searchTextMulti",multiple:""}},[a("option",{attrs:{value:"dog"}},[e._v("Dog")]),a("option",{attrs:{value:"cat"}},[e._v("Cat")]),a("option",{attrs:{value:"bird"}},[e._v("Bird")])]),a("select",{attrs:{id:"searchPlaceholderMulti",multiple:""}},[a("option",{attrs:{value:"dog"}},[e._v("Dog")]),a("option",{attrs:{value:"cat"}},[e._v("Cat")]),a("option",{attrs:{value:"bird"}},[e._v("Bird")])]),a("select",{attrs:{id:"searchFocusMulti",multiple:""}},[a("option",{attrs:{value:"dog"}},[e._v("Dog")]),a("option",{attrs:{value:"cat"}},[e._v("Cat")]),a("option",{attrs:{value:"bird"}},[e._v("Bird")])]),a("select",{attrs:{id:"searchHighlightMulti",multiple:""}},[a("option",{attrs:{value:"dog"}},[e._v("Dog")]),a("option",{attrs:{value:"cat"}},[e._v("Cat")]),a("option",{attrs:{value:"bird"}},[e._v("Bird")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        let slim = new SlimSelect({\n          select: '#search',\n          showSearch: false,\n          searchText: 'Sorry nothing to see here',\n          searchPlaceholder: 'Search for the good stuff!',\n          searchFocus: false, // Whether or not to focus on the search input field\n          searchHighlight: true\n        })\n\n        // You can also set search text via method\n        slim.setSearchText('Searching...')\n      ")]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("closeOnSelect")]),a("p",[e._v(" closeOnSelect is a boolean value in which determines whether or not to close the content area upon selecting a value. ")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"closeOnSelectSingle"}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")]),a("optgroup",{attrs:{label:"Super Values"}},[a("option",{attrs:{value:"value11"}},[e._v("Value 1")]),a("option",{attrs:{value:"value22"}},[e._v("Value 2")]),a("option",{attrs:{value:"value33"}},[e._v("Value 3")])])]),a("select",{attrs:{id:"closeOnSelectMultiple",multiple:""}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")]),a("optgroup",{attrs:{label:"Super Values"}},[a("option",{attrs:{value:"value11"}},[e._v("Value 1")]),a("option",{attrs:{value:"value22"}},[e._v("Value 2")]),a("option",{attrs:{value:"value33"}},[e._v("Value 3")])])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '#search',\n          closeOnSelect: false\n        })\n      ")]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("showContent")]),a("p",[e._v(" showContent is a string value that will decide where to show your content when it comes out. By default slim select will try to put the content where it can without going off screen. But you may want to always show it in one direction. ")]),a("p",[e._v(" Possible Options: "),a("b",[e._v("'auto', 'up' or 'down'")]),e._v(". Default is "),a("b",[e._v("'auto'")])]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"showContentUp"}},[a("option",{attrs:{value:"up1"}},[e._v("Up 1")]),a("option",{attrs:{value:"up2"}},[e._v("Up 2")]),a("option",{attrs:{value:"up3"}},[e._v("Up 3")])]),a("select",{attrs:{id:"showContentDown"}},[a("option",{attrs:{value:"down1"}},[e._v("Down 1")]),a("option",{attrs:{value:"down2"}},[e._v("Down 2")]),a("option",{attrs:{value:"down3"}},[e._v("Down 3")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '#showContent',\n          showContent: 'auto' // 'auto', 'up' or 'down'\n        })\n      ")]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("addToBody")]),a("p",[e._v(" addToBody is a boolean value that configures the select dropdown to be added directly to the document body, rather than the parent container. This allows using slim-select in scenarios where you have no control of the overflow state of the parent containers. Keep in mind that the widget has to be disposed explicitly by calling "),a("b",[e._v("destroy")]),e._v(". ")]),a("p",[e._v(" Possible Options: "),a("b",[e._v("true")]),e._v(" or "),a("b",[e._v("false")]),e._v(". Default is "),a("b",[e._v("false")])]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"addToBodySingle"}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")]),a("optgroup",{attrs:{label:"Super Values"}},[a("option",{attrs:{value:"value11"}},[e._v("Value 1")]),a("option",{attrs:{value:"value22"}},[e._v("Value 2")]),a("option",{attrs:{value:"value33"}},[e._v("Value 3")])])]),a("select",{attrs:{id:"addToBodyMultiple",multiple:""}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")]),a("optgroup",{attrs:{label:"Super Values"}},[a("option",{attrs:{value:"value11"}},[e._v("Value 1")]),a("option",{attrs:{value:"value22"}},[e._v("Value 2")]),a("option",{attrs:{value:"value33"}},[e._v("Value 3")])])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '#showContent',\n          addToBody: true\n        })\n      ")]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("select",{attrs:{id:"beforeOnChangeSingle"}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("select",{attrs:{id:"beforeOnChangeMultiple",multiple:""}},[a("option",{attrs:{value:"value1",selected:""}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '#beforeOnChange',\n          beforeOnChange: (info) => {\n            console.log(info)\n            return false // this will stop propagation\n          }\n        })\n      ")]),e._v("\n    ")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("select",{attrs:{id:"onChangeSingle"}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("select",{attrs:{id:"onChangeMultiple",multiple:""}},[a("option",{attrs:{value:"value1",selected:""}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '#onChange',\n          onChange: (info) => {\n            console.log(info)\n          }\n        })\n      ")]),e._v("\n    ")])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("showOptionTooltips")]),a("p",[e._v(" showOptionTooltips option is used to active displaying the on-hover tooltips for select options. The tooltip text is equal to the option text content. ")]),a("select",{attrs:{id:"showOptionTooltips"}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '#showOptionTooltips',\n          showOptionTooltips: true\n        })\n      ")]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("selectByGroup")]),a("p",[e._v(" selectByGroup option is used to enable the selection of all options under a specific group by clicking that option group's label. ")]),a("select",{attrs:{id:"selectByGroup",multiple:""}},[a("optgroup",{attrs:{label:"Label 1"}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '#selectByGroup',\n          selectByGroup: true\n        })\n      ")]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("searchFilter")]),a("p",[e._v(" searchFilter option is used to replace the default matching algorithm. ")]),a("p",[e._v(" See methods/setData for the proper object interface of "),a("em",[e._v("option")]),e._v(". ")]),a("select",{attrs:{id:"searchFilter"}},[a("option",{attrs:{value:"apple"}},[e._v("Apple")]),a("option",{attrs:{value:"orange"}},[e._v("Orange")]),a("option",{attrs:{value:"pineapple"}},[e._v("Pineapple")])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '#searchFilter',\n          // Exact case sensitive start of string match\n          searchFilter: (option, search) => {\n            return option.text.substr(0, search.length) === search\n          }\n        })\n      ")]),e._v("\n    ")])])},function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{staticClass:"content"},[a("h2",{staticClass:"header"},[e._v("hideSelectedOption")]),a("p",[e._v(" hideSelectedOption option is used to hide the current selected option in the dropdown. ")]),a("div",{staticClass:"set-content"},[a("select",{attrs:{id:"hideSelectedOption"}},[a("option",{attrs:{"data-placeholder":"true"}}),a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])]),a("select",{attrs:{id:"hideSelectedOptionMultiple",multiple:""}},[a("option",{attrs:{value:"value1"}},[e._v("Value 1")]),a("option",{attrs:{value:"value2"}},[e._v("Value 2")]),a("option",{attrs:{value:"value3"}},[e._v("Value 3")])])]),a("pre",[e._v("      "),a("code",{staticClass:"language-javascript"},[e._v("\n        new SlimSelect({\n          select: '.element .you #want',\n          hideSelectedOption: true\n        })\n      ")]),e._v("\n    ")]),a("pre",[e._v("      "),a("code",{staticClass:"language-html"},[e._v('\n        <select id="hideSelectedOption">\n          <option data-placeholder="true"></option>\n          <option value="value1">Value 1</option>\n          <option value="value2">Value 2</option>\n          <option value="value3">Value 3</option>\n        </select>\n\n        <select id="hideSelectedOptionMultiple">\n          <option value="value1">Value 1</option>\n          <option value="value2">Value 2</option>\n          <option value="value3">Value 3</option>\n        </select>\n      ')]),e._v("\n    ")])])}],s=(a("b0c0"),a("d3b7"),a("b85c")),o=a("2b0e"),i=a("ba4b"),c=o["a"].extend({data:function(){return{addToBodySingle:null,addToBodyMultiple:null,beforeOnChangeSingle:null,beforeOnChangeMultiple:null,onChangeSingle:null,onChangeMultiple:null}},mounted:function(){var e=this;new i["a"]({select:"#dataSingle",data:[{text:"data placeholder",placeholder:!0},{text:"Value 2"},{text:"Value 3",value:""}]}),new i["a"]({select:"#dataMultiple",data:[{placeholder:!0,text:"data placeholder"},{text:"Human"},{label:"Animals",options:[{text:"Cat"},{text:"Dog"},{text:"Bird",value:""}]}]}),new i["a"]({select:"#optionsSingle"}),new i["a"]({select:"#optionsMultiple"});new i["a"]({select:"#ajaxSingle",placeholder:'Search "Graham"',searchingText:"Searching Users...",ajax:function(e,t){e.length<3?t("Need 3 characters"):fetch("https://jsonplaceholder.typicode.com/users").then((function(e){return e.json()})).then((function(e){var a,l=[],n=Object(s["a"])(e);try{for(n.s();!(a=n.n()).done;){var o=a.value;l.push({text:o.name})}}catch(i){n.e(i)}finally{n.f()}t(l)})).catch((function(e){t(!1)}))}});var t=new i["a"]({select:"#ajaxMultiple",placeholder:'Search "Dennis"',ajax:function(e,a){fetch("https://jsonplaceholder.typicode.com/users").then((function(e){return e.json()})).then((function(e){var l,n=[],o=Object(s["a"])(e);try{for(o.s();!(l=o.n()).done;){var i=l.value;n.push({text:i.name})}}catch(c){o.e(c)}finally{o.f()}setTimeout((function(){t.setSearchText("Sorry No Results."),a(n)}),1e3)})).catch((function(e){a(!1)}))}}),a=new i["a"]({select:"#selectdisplay"}),l=[{value:"A",text:"A",display:!1},{value:"B",text:"B"},{value:"C",text:"C"}];a.setData(l),a.set(["A","C"]),new i["a"]({select:"#selectdisplay2"}),new i["a"]({select:"#placeholderSingle",placeholder:"Placeholder Text Here"}),new i["a"]({select:"#placeholderMultiple",placeholder:"Placeholder Text Here"}),new i["a"]({select:"#allowDeselect",allowDeselect:!0}),new i["a"]({select:"#allowDeselectOption",allowDeselectOption:!0}),new i["a"]({select:"#allowDeselectOptionMultiple",allowDeselectOption:!0}),new i["a"]({select:"#deselectLabel",allowDeselect:!0,deselectLabel:'<span class="red">✖</span>'}),new i["a"]({select:"#addableSingle",addable:function(e){return e}}),new i["a"]({select:"#addableMultiple",addable:function(e){return{text:e,value:e.toLowerCase()}}});var n=new i["a"]({select:"#selectMultiMandatory"}),o=[{value:"A",text:"A",mandatory:!0},{value:"B",text:"B"},{value:"C",text:"C"}];n.setData(o),n.set(["A","C"]),new i["a"]({select:"#selectMultiMandatory2"}),new i["a"]({select:"#selectMultiLimit",limit:2}),new i["a"]({select:"#select-class"}),new i["a"]({select:"#option-class"}),new i["a"]({select:"#select-style"}),new i["a"]({select:"#option-style"}),new i["a"]({select:"#selectInnerHTMLSingle",searchHighlight:!0,data:[{innerHTML:"<b>Bold Text</b>",text:"Bold Text",value:"bold text"},{innerHTML:"<i>Slim Select you are awesome</i>",text:"Slim Select awesome"},{innerHTML:'<div style="border: solid 1px #666666;">Border</div>',text:"Border",value:"border"}]}),new i["a"]({select:"#selectInnerHTMLMulti",data:[{innerHTML:"<b>Bold Text</b>",text:"Bold Text",value:"bold text"},{innerHTML:"<i>Slim Select you are awesome</i>",text:"Slim Select awesome"},{innerHTML:'<div style="border: solid 1px #666666;">Border</div>',text:"Border",value:"border"}]}),new i["a"]({select:"#selectInnerHTMLSingleText",valuesUseText:!0,data:[{innerHTML:"<b>Bold Text</b>",text:"Bold Text",value:"bold text"},{innerHTML:"<i>Slim Select you are awesome</i>",text:"Slim Select awesome"},{innerHTML:'<div style="border: solid 1px #666666;">Border</div>',text:"Border",value:"border"}]}),new i["a"]({select:"#selectInnerHTMLMultiText",valuesUseText:!0,data:[{innerHTML:"<b>Bold Text</b>",text:"Bold Text",value:"bold text"},{innerHTML:"<i>Slim Select you are awesome</i>",text:"Slim Select awesome"},{innerHTML:'<div style="border: solid 1px #666666;">Border</div>',text:"Border",value:"border"}]}),new i["a"]({select:"#showSearchSingle",showSearch:!1}),new i["a"]({select:"#searchTextSingle",searchText:"Sorry nothing to see here",beforeOpen:function(){console.log("beforeOpen")},beforeClose:function(){console.log("beforeClose")},afterOpen:function(){console.log("afterOpen")},afterClose:function(){console.log("afterClose")}}),new i["a"]({select:"#searchPlaceholderSingle",searchPlaceholder:"Search for the good stuff!"}),new i["a"]({select:"#searchFocusSingle",searchFocus:!1}),new i["a"]({select:"#searchHighlightSingle",searchHighlight:!0}),new i["a"]({select:"#showSearchMulti",showSearch:!1}),new i["a"]({select:"#searchTextMulti",searchText:"Sorry nothing to see here"}),new i["a"]({select:"#searchPlaceholderMulti",searchPlaceholder:"Search for the good stuff!"}),new i["a"]({select:"#searchFocusMulti",searchFocus:!1}),new i["a"]({select:"#searchHighlightMulti",searchHighlight:!0}),new i["a"]({select:"#closeOnSelectSingle",closeOnSelect:!1}),new i["a"]({select:"#closeOnSelectMultiple",closeOnSelect:!1,selectByGroup:!0}),new i["a"]({select:"#showContentUp",showContent:"up"}),this.addToBodySingle=new i["a"]({select:"#addToBodySingle",addToBody:!0}),this.addToBodyMultiple=new i["a"]({select:"#addToBodyMultiple",addToBody:!0,selectByGroup:!0}),new i["a"]({select:"#showContentDown",showContent:"down"}),new i["a"]({select:"#beforeOnChangeSingle",beforeOnChange:function(t){e.beforeOnChangeSingle=t}}),new i["a"]({select:"#beforeOnChangeMultiple",beforeOnChange:function(t){e.beforeOnChangeMultiple=t}}),new i["a"]({select:"#onChangeSingle",onChange:function(t){e.onChangeSingle=t}}),new i["a"]({select:"#onChangeMultiple",onChange:function(t){e.onChangeMultiple=t}}),new i["a"]({select:"#showOptionTooltips",showOptionTooltips:!0}),new i["a"]({select:"#selectByGroup",selectByGroup:!0}),new i["a"]({select:"#searchFilter",searchFilter:function(e,t){return e.text.substr(0,t.length)===t}}),new i["a"]({select:"#hideSelectedOption",hideSelectedOption:!0}),new i["a"]({select:"#hideSelectedOptionMultiple",hideSelectedOption:!0})},beforeDestroy:function(){this.addToBodySingle.destroy(),this.addToBodyMultiple.destroy()}}),r=c,u=(a("9b36"),a("2877")),v=Object(u["a"])(r,l,n,!1,null,null,null);t["default"]=v.exports},"9b36":function(e,t,a){"use strict";a("1f2b")}}]);
  //# sourceMappingURL=options.73eeeedb.js.map