slim-select 2.2.0 → 2.2.1

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

@@ -1,73 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'HideSelected',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.hideSelectedSingle as HTMLSelectElement,
-      settings: {
-        hideSelected: true,
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.hideSelectedMultiple as HTMLSelectElement,
-      settings: {
-        hideSelected: true,
-      },
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="hideSelected" class="content">
-    <h2 class="header">hideSelected</h2>
-    <p>hideSelected setting is used to hide the current selected option in the options dropdown.</p>
-
-    <div class="row">
-      <select ref="hideSelectedSingle">
-        <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="hideSelectedMultiple" 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: '#selectElement',
-          settings: {
-            hideSelected: true,
-          }
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;select id="hideSelectedSingle"&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;
-
-        &lt;select id="hideSelectedMultiple"&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/html.vue

@@ -1,86 +0,0 @@
-<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

@@ -1,76 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-// Components
-import AlwaysOpen from './always_open.vue'
-import Closable from './closable.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 SelectAll from './select_all.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,
-    SelectAll,
-    Closable,
-    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 />
-    <SelectAll />
-    <Closable />
-    <HideSelected />
-  </div>
-</template>

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

@@ -1,91 +0,0 @@
-<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

@@ -1,61 +0,0 @@
-<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

@@ -1,60 +0,0 @@
-<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

@@ -1,72 +0,0 @@
-<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

@@ -1,140 +0,0 @@
-<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>