slim-select 1.27.1 → 2.0.1

package/src/docs/pages/settings/html.vue

@@ -0,0 +1,86 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../slim-select'
+
+export default defineComponent({
+  name: 'Html',
+  mounted() {
+    new SlimSelect({
+      select: this.$refs.selectHtmlSingle as HTMLSelectElement,
+      settings: {
+        searchHighlight: true,
+      },
+      data: [
+        {
+          html: '<b>Bold Text</b>',
+          text: 'Bold Text',
+          value: 'bold text',
+        },
+        {
+          html: '<i>Slim Select you are awesome</i>',
+          text: 'Slim Select awesome',
+        },
+        {
+          html: '<div style="border: solid 1px #666666;">Border</div>',
+          text: 'Border',
+          value: 'border',
+        },
+      ],
+    })
+
+    new SlimSelect({
+      select: this.$refs.selectHtmlMulti as HTMLSelectElement,
+      settings: {
+        searchHighlight: true,
+      },
+      data: [
+        {
+          html: '<b>Bold Text</b>',
+          text: 'Bold Text',
+          value: 'bold text',
+        },
+        {
+          html: '<i>Slim Select you are awesome</i>',
+          text: 'Slim Select awesome',
+        },
+        {
+          html: '<div style="border: solid 1px #666666;">Border</div>',
+          text: 'Border',
+          value: 'border',
+        },
+      ],
+    })
+  },
+})
+</script>
+
+<template>
+  <div id="html" class="content">
+    <h2 class="header">html</h2>
+    <p>
+      Slim select has the ability to set custom html for the selected values and options dropdown. By default if the
+      html field is set it will use that for the selected values and the options dropdown. For a multiple select
+      selected values it will always use the text field.
+    </p>
+
+    <div class="row">
+      <select ref="selectHtmlSingle"></select>
+      <select ref="selectHtmlMulti" multiple></select>
+    </div>
+
+    <pre>
+      <code class="language-javascript">
+        var select = new SlimSelect({
+          select: '#selectElement',
+          data: [
+            {html: '&lt;img height="30" width="30" src="http://lorempixel.com/30/30" /&gt;&nbsp;Image', text: 'Image', value: 'image'},
+            {html: '&lt;b&gt;Bold Text&lt;/b&gt;', text: 'Bold Text', value: 'bold text'},
+            {html: '&lt;div style="border: solid 1px #666666;"&gt;Border&lt;/div&gt;', text: 'Border', value: 'border'},
+            {html: '&lt;i&gt;Slim Select you are awesome&lt;/i&gt;', text: 'Slim Select awesome'}
+          ]
+        })
+      </code>
+    </pre>
+  </div>
+</template>

package/src/docs/pages/settings/index.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+// Components
+import AlwaysOpen from './always_open.vue'
+import CloseOnSelect from './close_on_select.vue'
+import ContentLocation from './content_location.vue'
+import ContentPosition from './content_position.vue'
+import Css from './css.vue'
+import DataAttributes from './data_attributes.vue'
+import Deselect from './deselect.vue'
+import Display from './display.vue'
+import HideSelected from './hide_selected.vue'
+import Html from './html.vue'
+import Mandatory from './mandatory.vue'
+import MinMax from './min_max.vue'
+import OpenPosition from './open_position.vue'
+import Placeholder from './placeholder.vue'
+import Search from './search.vue'
+import Select from './select.vue'
+import SelectByGroup from './select_by_group.vue'
+import ShowTooltip from './show_tooltip.vue'
+import Styles from './styles.vue'
+
+export default defineComponent({
+  name: 'Settings',
+  components: {
+    Select,
+    AlwaysOpen,
+    ContentLocation,
+    ContentPosition,
+    OpenPosition,
+    Placeholder,
+    Deselect,
+    Display,
+    Mandatory,
+    MinMax,
+    DataAttributes,
+    Css,
+    Styles,
+    Html,
+    Search,
+    CloseOnSelect,
+    ShowTooltip,
+    SelectByGroup,
+    HideSelected,
+  },
+})
+</script>
+
+<template>
+  <div id="settings" class="contents">
+    <Select />
+    <AlwaysOpen />
+    <ContentLocation />
+    <ContentPosition />
+    <OpenPosition />
+    <Placeholder />
+    <Deselect />
+    <Display />
+    <Mandatory />
+    <MinMax />
+    <DataAttributes />
+    <Css />
+    <Styles />
+    <Html />
+    <Search />
+    <CloseOnSelect />
+    <ShowTooltip />
+    <SelectByGroup />
+    <HideSelected />
+  </div>
+</template>

package/src/docs/pages/settings/mandatory.vue

@@ -0,0 +1,91 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../slim-select'
+
+export default defineComponent({
+  name: 'Mandatory',
+  mounted() {
+    const mandatorySelect = new SlimSelect({
+      select: this.$refs.selectMultiMandatory as HTMLSelectElement,
+    })
+
+    const mandatoryData = [
+      { value: 'value1', text: 'Value 1', mandatory: true },
+      { value: 'value2', text: 'Value 2' },
+      { value: 'value3', text: 'Value 3' },
+    ]
+
+    mandatorySelect.setData(mandatoryData)
+    mandatorySelect.setSelected(['value1', 'value3'])
+
+    new SlimSelect({
+      select: this.$refs.selectMultiMandatory2 as HTMLSelectElement,
+    })
+  },
+})
+</script>
+
+<template>
+  <div id="mandatory" class="content">
+    <h2 class="header">mandatory</h2>
+    <p>
+      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.
+    </p>
+
+    <div class="row">
+      <select ref="selectMultiMandatory" multiple></select>
+    </div>
+
+    <pre>
+      <code class="language-javascript">
+        const slim = new SlimSelect({
+          select: '#selectElement'
+        });
+
+        const data = [
+          { value: 'value1', text: 'Value 1', mandatory: true },
+          { value: 'value2', text: 'Value 2' },
+          { value: 'value3', text: 'Value 3' },
+        ]
+
+        slim.setData(data)
+        slim.set(["value1", "value3"])
+      </code>
+    </pre>
+
+    <pre>
+      <code class="language-html">
+        &lt;select id="selectMultiMandatory" multiple&gt;&lt;/select&gt;
+      </code>
+    </pre>
+
+    <p>Or</p>
+    <div class="row">
+      <select ref="selectMultiMandatory2" multiple>
+        <option value="value1" data-mandatory="true" selected>Value 1</option>
+        <option value="value2" selected>Value 2</option>
+        <option value="value3">Value 3</option>
+      </select>
+    </div>
+
+    <pre>
+      <code class="language-javascript">
+        const slim = new SlimSelect({
+          select: '#selectElement'
+        });
+      </code>
+    </pre>
+
+    <pre>
+      <code class="language-html">
+        &lt;select id="selectMultiMandatory" multiple&gt;
+          &lt;option value="value1" data-mandatory="true" selected&gt;Value 1&lt;/option&gt;
+          &lt;option value="value2" selected&gt;Value 2&lt;/option&gt;
+          &lt;option value="value3"&gt;Value 3&lt;/option&gt;
+        &lt;/select&gt;
+      </code>
+    </pre>
+  </div>
+</template>

package/src/docs/pages/settings/min_max.vue

@@ -0,0 +1,61 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../slim-select'
+
+export default defineComponent({
+  name: 'MinMax',
+  mounted() {
+    new SlimSelect({
+      select: this.$refs.selectMultiMax as HTMLSelectElement,
+      settings: {
+        minSelected: 2,
+        maxSelected: 5,
+      },
+    })
+  },
+})
+</script>
+
+<template>
+  <div id="minmax" class="content">
+    <h2 class="header">Min/Max Selected</h2>
+    <p>When using multi select you can set a min and/or max on the amount of selections you can have.</p>
+
+    <div class="row">
+      <select ref="selectMultiMax" multiple>
+        <option value="value1">Value 1</option>
+        <option value="value2">Value 2</option>
+        <option value="value3">Value 3</option>
+        <option value="value4">Value 4</option>
+        <option value="value5">Value 5</option>
+        <option value="value6">Value 6</option>
+      </select>
+    </div>
+
+    <pre>
+      <code class="language-javascript">
+        let slim = new SlimSelect({
+          select: '#selectElement',
+          settings: {
+            minSelected: 2,
+            maxSelected: 5,
+          },
+        })
+      </code>
+    </pre>
+
+    <pre>
+      <code class="language-html">
+        &lt;select id="selectMultiMax" multiple&gt;
+          &lt;option value="value1"&gt;Value 1&lt;/option&gt;
+          &lt;option value="value2"&gt;Value 2&lt;/option&gt;
+          &lt;option value="value3"&gt;Value 3&lt;/option&gt;
+          &lt;option value="value4"&gt;Value 4&lt;/option&gt;
+          &lt;option value="value5"&gt;Value 5&lt;/option&gt;
+          &lt;option value="value6"&gt;Value 6&lt;/option&gt;
+        &lt;/select&gt;
+      </code>
+    </pre>
+  </div>
+</template>

package/src/docs/pages/settings/open_position.vue

@@ -0,0 +1,60 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../slim-select'
+
+export default defineComponent({
+  name: 'OpenPosition',
+  mounted() {
+    new SlimSelect({
+      select: this.$refs.openPositionUp as HTMLSelectElement,
+      settings: {
+        openPosition: 'up',
+      },
+    })
+
+    new SlimSelect({
+      select: this.$refs.openPositionDown as HTMLSelectElement,
+      settings: {
+        openPosition: 'down',
+      },
+    })
+  },
+})
+</script>
+
+<template>
+  <div id="openPosition" class="content">
+    <h2 class="header">openPosition</h2>
+    <p>
+      openPosition 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.
+    </p>
+    <p>Possible Options: <b>'auto', 'up' or 'down'</b>. Default is <b>'auto'</b></p>
+
+    <div class="row">
+      <select ref="openPositionUp">
+        <option value="up1">Up 1</option>
+        <option value="up2">Up 2</option>
+        <option value="up3">Up 3</option>
+      </select>
+      <select ref="openPositionDown">
+        <option value="down1">Down 1</option>
+        <option value="down2">Down 2</option>
+        <option value="down3">Down 3</option>
+      </select>
+    </div>
+
+    <pre>
+      <code class="language-javascript">
+        new SlimSelect({
+          select: '#selectElement',
+          settings: {
+            openPosition: 'auto' // 'auto', 'up' or 'down'
+          }
+        })
+      </code>
+    </pre>
+  </div>
+</template>

package/src/docs/pages/settings/placeholder.vue

@@ -0,0 +1,72 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../slim-select'
+
+export default defineComponent({
+  name: 'Placeholder',
+  mounted() {
+    new SlimSelect({
+      select: this.$refs.placeholderSingle as HTMLSelectElement,
+      settings: {
+        placeholderText: 'Custom Placeholder Text',
+      },
+    })
+
+    new SlimSelect({
+      select: this.$refs.placeholderMultiple as HTMLSelectElement,
+      settings: {
+        placeholderText: 'Custom Placeholder Text',
+      },
+    })
+  },
+})
+</script>
+
+<template>
+  <div id="placeholder" class="content">
+    <h2 class="header">placeholderText</h2>
+    <p>
+      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".
+    </p>
+
+    <div class="row">
+      <select ref="placeholderSingle">
+        <option data-placeholder="true"></option>
+        <option value="value1">Value 1</option>
+        <option value="value2">Value 2</option>
+        <option value="value3">Value 3</option>
+      </select>
+      <select ref="placeholderMultiple" multiple>
+        <option value="value1">Value 1</option>
+        <option value="value2">Value 2</option>
+        <option value="value3">Value 3</option>
+      </select>
+    </div>
+
+    <pre>
+      <code class="language-javascript">
+        new SlimSelect({
+          select: '#placeholder',
+          settings: {
+            placeholderText: 'Custom Placeholder Text',
+          }
+        })
+      </code>
+    </pre>
+
+    <pre>
+      <code class="language-html">
+        &lt;!-- Set empty option with data-placeholder if you to have placeholder --&gt;
+        &lt;!-- text for single select, otherwise first option will be selected --&gt;
+        &lt;select id="placeholderSingle"&gt;
+          &lt;option data-placeholder="true"&gt;&lt;/option&gt;
+          &lt;option value="value1"&gt;Value 1&lt;/option&gt;
+          &lt;option value="value2"&gt;Value 2&lt;/option&gt;
+          &lt;option value="value3"&gt;Value 3&lt;/option&gt;
+        &lt;/select&gt;
+      </code>
+    </pre>
+  </div>
+</template>

package/src/docs/pages/settings/search.vue

@@ -0,0 +1,140 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../slim-select'
+
+export default defineComponent({
+  name: 'Search',
+  mounted() {
+    // Single
+    new SlimSelect({
+      select: this.$refs.showSearchSingle as HTMLSelectElement,
+      settings: {
+        showSearch: false,
+      },
+    })
+    new SlimSelect({
+      select: this.$refs.searchTextSingle as HTMLSelectElement,
+      settings: {
+        searchText: 'Sorry, nothing to see here',
+      },
+    })
+    new SlimSelect({
+      select: this.$refs.searchPlaceholderSingle as HTMLSelectElement,
+      settings: {
+        searchPlaceholder: 'Search for the good stuff!',
+      },
+    })
+    new SlimSelect({
+      select: this.$refs.searchHighlightSingle as HTMLSelectElement,
+      settings: {
+        searchHighlight: true,
+      },
+    })
+
+    // Multiple
+    new SlimSelect({
+      select: this.$refs.showSearchMulti as HTMLSelectElement,
+      settings: {
+        showSearch: false,
+      },
+    })
+    new SlimSelect({
+      select: this.$refs.searchTextMulti as HTMLSelectElement,
+      settings: {
+        searchText: 'Sorry nothing to see here',
+      },
+    })
+    new SlimSelect({
+      select: this.$refs.searchPlaceholderMulti as HTMLSelectElement,
+      settings: {
+        searchPlaceholder: 'Search for the good stuff!',
+      },
+    })
+    new SlimSelect({
+      select: this.$refs.searchHighlightMulti as HTMLSelectElement,
+      settings: {
+        searchHighlight: true,
+      },
+    })
+  },
+})
+</script>
+
+<template>
+  <div id="search" class="content">
+    <h2 class="header">showSearch / searchText / searchingText / searchHighlight</h2>
+    <p><b>showSearch</b> - is a boolean value that will decide whether or not to show the search. Default is true.</p>
+    <p>
+      <b>searchText</b> - is a string value that will show in the event there are no results. Default is 'No Results'.
+    </p>
+    <p>
+      <b>searchingText</b> - is a string value that will show during an fetch search request. Default is 'Searching...'.
+    </p>
+    <p>
+      <b>searchPlaceholder</b> - is a string value that will set the value of the input search placeholder text. Default
+      is 'Search'.
+    </p>
+    <p><b>searchHighlight</b> - is a boolean value that will highlight search results. Default is false.</p>
+
+    <div class="row" style="padding: 0 0 var(--spacing-half) 0">
+      <select ref="showSearchSingle">
+        <option value="dog">Dog</option>
+        <option value="cat">Cat</option>
+        <option value="bird">Bird</option>
+      </select>
+      <select ref="searchTextSingle">
+        <option value="dog">Dog</option>
+        <option value="cat">Cat</option>
+        <option value="bird">Bird</option>
+      </select>
+      <select ref="searchPlaceholderSingle">
+        <option value="dog">Dog</option>
+        <option value="cat">Cat</option>
+        <option value="bird">Bird</option>
+      </select>
+      <select ref="searchHighlightSingle">
+        <option value="dog">Dog</option>
+        <option value="cat">Cat</option>
+        <option value="bird">Bird</option>
+      </select>
+    </div>
+
+    <div class="row">
+      <select ref="showSearchMulti" multiple>
+        <option value="dog">Dog</option>
+        <option value="cat">Cat</option>
+        <option value="bird">Bird</option>
+      </select>
+      <select ref="searchTextMulti" multiple>
+        <option value="dog">Dog</option>
+        <option value="cat">Cat</option>
+        <option value="bird">Bird</option>
+      </select>
+      <select ref="searchPlaceholderMulti" multiple>
+        <option value="dog">Dog</option>
+        <option value="cat">Cat</option>
+        <option value="bird">Bird</option>
+      </select>
+      <select ref="searchHighlightMulti" multiple>
+        <option value="dog">Dog</option>
+        <option value="cat">Cat</option>
+        <option value="bird">Bird</option>
+      </select>
+    </div>
+
+    <pre>
+      <code class="language-javascript">
+        let slim = new SlimSelect({
+          select: '#selectElement',
+          settings: {
+            showSearch: false,
+            searchText: 'Sorry nothing to see here',
+            searchPlaceholder: 'Search for the good stuff!',
+            searchHighlight: true
+          }
+        })
+      </code>
+    </pre>
+  </div>
+</template>

package/src/docs/pages/settings/select.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'Select',
+})
+</script>
+
+<template>
+  <div id="select" class="content">
+    <h2 class="header">select</h2>
+    <p>
+      The select field is used to identify the select element that will be used to create slim select. You can use any
+      value you normally would in a querySelector or pass the element directly.
+    </p>
+
+    <pre>
+      <code class="language-javascript">
+        new SlimSelect({
+          select: '#selectElement',
+          // or
+          select: document.querySelector('#selectElement')
+        })
+
+        // If you already have a currenlty running SlimSelect but lost the reference to it.
+        // You can access from the original select element.
+        let el = document.querySelector('#selectElement')
+        el.slim.open() // Or any other options/methods
+      </code>
+    </pre>
+  </div>
+</template>

package/src/docs/pages/settings/select_by_group.vue

@@ -0,0 +1,46 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../slim-select'
+
+export default defineComponent({
+  name: 'SelectByGroup',
+  mounted() {
+    new SlimSelect({
+      select: this.$refs.selectByGroup as HTMLSelectElement,
+      settings: {
+        selectByGroup: true,
+      },
+    })
+  },
+})
+</script>
+
+<template>
+  <div id="selectByGroup" class="content">
+    <h2 class="header">selectByGroup</h2>
+    <p>
+      selectByGroup option is used to enable the selection of all options under a specific group by clicking that option
+      group's label.
+    </p>
+
+    <select ref="selectByGroup" multiple>
+      <optgroup label="Label 1">
+        <option value="value1">Value 1</option>
+        <option value="value2">Value 2</option>
+        <option value="value3">Value 3</option>
+      </optgroup>
+    </select>
+
+    <pre>
+      <code class="language-javascript">
+        new SlimSelect({
+          select: '#selectByGroup',
+          settings: {
+            selectByGroup: true
+          }
+        })
+      </code>
+    </pre>
+  </div>
+</template>