slim-select 2.2.0 → 2.2.2

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

@@ -1,128 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'Closable',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.closableSingle as HTMLSelectElement,
-    })
-    new SlimSelect({
-      select: this.$refs.closableMultiple as HTMLSelectElement,
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="closable" class="content">
-    <h2 class="header">closable</h2>
-    <p>closable is a optgroup settings that adds the ability to have closable optgroup options.</p>
-    <p>Values: <strong>"off"</strong> | <strong>"open"</strong> | <strong>"close"</strong></p>
-    <p>Default: <strong>"off"</strong></p>
-
-    <div class="alert info">You can set closable either by data or by html dataset added to the optgroup element</div>
-
-    <div class="row">
-      <select ref="closableSingle">
-        <optgroup label="Label 1" data-closable="off">
-          <option value="value1">Value 1</option>
-          <option value="value2">Value 2</option>
-          <option value="value3">Value 3</option>
-        </optgroup>
-        <optgroup label="Label 2" data-closable="open">
-          <option value="value4">Value 4</option>
-          <option value="value5">Value 5</option>
-          <option value="value6">Value 6</option>
-        </optgroup>
-        <optgroup label="Label 3" data-closable="close">
-          <option value="value7">Value 7</option>
-          <option value="value8">Value 8</option>
-          <option value="value9">Value 9</option>
-        </optgroup>
-      </select>
-      <select ref="closableMultiple" multiple>
-        <optgroup label="Label 1" data-selectall="true" data-closable="off">
-          <option value="value1">Value 1</option>
-          <option value="value2">Value 2</option>
-          <option value="value3">Value 3</option>
-        </optgroup>
-        <optgroup label="Label 2" data-selectall="true" data-closable="open">
-          <option value="value4">Value 4</option>
-          <option value="value5">Value 5</option>
-          <option value="value6">Value 6</option>
-        </optgroup>
-        <optgroup label="Label 3" data-selectall="true" data-closable="close">
-          <option value="value7">Value 7</option>
-          <option value="value8">Value 8</option>
-          <option value="value9">Value 9</option>
-        </optgroup>
-      </select>
-    </div>
-    <br />
-
-    <h3>Via data</h3>
-    <pre>
-      <code class="language-javascript">
-        new SlimSelect({
-          select: '#selectElement',
-          data: [
-            {
-              label: 'Label 1',
-              closable: 'off',
-              options: [
-                { text: 'Option 1', value: '1' },
-                { text: 'Option 2', value: '2' },
-                { text: 'Option 3', value: '3' },
-              ],
-            },
-            {
-              label: 'Label 2',
-              closable: 'open',
-              options: [
-                { text: 'Option 4', value: '4' },
-                { text: 'Option 5', value: '5' },
-                { text: 'Option 6', value: '6' },
-              ],
-            },
-            {
-              label: 'Label 3',
-              closable: 'close',
-              options: [
-                { text: 'Option 7', value: '7' },
-                { text: 'Option 8', value: '8' },
-                { text: 'Option 9', value: '9' },
-              ],
-            },
-          ],
-        })
-      </code>
-    </pre>
-    <br />
-
-    <h3>Via html</h3>
-    <pre>
-      <code class="language-html">
-        &lt;select ref="closable" multiple&gt;
-          &lt;optgroup label="Label 1" data-closable="off"&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;/optgroup&gt;
-          &lt;optgroup label="Label 2" data-closable="open"&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;/optgroup&gt;
-          &lt;optgroup label="Label 3" data-closable="close"&gt;
-            &lt;option value="value7"&gt;Value 7&lt;/option&gt;
-            &lt;option value="value8"&gt;Value 8&lt;/option&gt;
-            &lt;option value="value9"&gt;Value 9&lt;/option&gt;
-          &lt;/optgroup&gt;
-        &lt;/select&gt;
-      </code>
-    </pre>
-  </div>
-</template>

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

@@ -1,69 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'CloseOnSelect',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.closeOnSelectSingle as HTMLSelectElement,
-      settings: {
-        closeOnSelect: false,
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.closeOnSelectMultiple as HTMLSelectElement,
-      settings: {
-        closeOnSelect: false,
-        selectByGroup: true,
-      },
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="closeOnSelect" class="content">
-    <h2 class="header">closeOnSelect</h2>
-    <p>
-      closeOnSelect is a boolean value in which determines whether or not to close the content area upon selecting a
-      value.
-    </p>
-
-    <div class="row">
-      <select ref="closeOnSelectSingle">
-        <option value="value1">Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-        <optgroup label="Super Values">
-          <option value="value11">Value 1</option>
-          <option value="value22">Value 2</option>
-          <option value="value33">Value 3</option>
-        </optgroup>
-      </select>
-      <select ref="closeOnSelectMultiple" multiple>
-        <option value="value1">Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-        <optgroup label="Super Values">
-          <option value="value11">Value 1</option>
-          <option value="value22">Value 2</option>
-          <option value="value33">Value 3</option>
-        </optgroup>
-      </select>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        new SlimSelect({
-          select: '#search',
-          settings: {
-            closeOnSelect: false,
-          },
-        })
-      </code>
-    </pre>
-  </div>
-</template>

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

@@ -1,64 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'ContentLocation',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.contentLocation as HTMLSelectElement,
-      settings: {
-        contentLocation: this.$refs.local as HTMLElement,
-      },
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="contentLocation" class="content">
-    <h2 class="header">contentLocation</h2>
-    <p>
-      contentLocation will allow you to set the location of where the content section of slim select. By default every
-      content div is appended to the body.
-    </p>
-    <p>
-      The content container is the bottom half of slim select. This includes the search input field and available
-      options
-    </p>
-
-    <div class="row">
-      <select ref="contentLocation" style="width: 50%">
-        <option value="value1">Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-      <div ref="local"></div>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        new SlimSelect({
-          select: '#selectElement',
-          settings: {
-            contentLocation: document.getElementById('local')
-          }
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;select id="contentLocation"&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;!-- The content will go in this div --&gt;
-        &lt;div id="local"&gt;&lt;/div&gt;
-      </code>
-    </pre>
-  </div>
-</template>

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

@@ -1,86 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'ContentPosition',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.contentPositionRelative as HTMLSelectElement,
-      settings: {
-        contentPosition: 'relative',
-        contentLocation: this.$refs.contentPositionRelativeContent as HTMLElement,
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.contentPositionAbsolute as HTMLSelectElement,
-      settings: {
-        contentPosition: 'absolute',
-      },
-    })
-  },
-})
-</script>
-
-<style lang="scss">
-#contentPosition {
-  .row {
-    .ss-main {
-      height: 30px;
-    }
-
-    .relative {
-      width: 200px;
-    }
-
-    .absolute {
-      width: 200px;
-    }
-  }
-}
-</style>
-
-<template>
-  <div id="contentPosition" class="content">
-    <h2 class="header">contentPosition</h2>
-    <p>contentPosition will set the css position to either relative. Default is <b>'absolute'</b></p>
-
-    <div class="alert info">
-      If you do use relative position be sure to set the contentLocation to an element that will work best for your use
-      case. Otherwise SlimSelect will add you content to the body of the html. See example usage below.
-    </div>
-
-    <div class="row">
-      <select ref="contentPositionRelative" class="relative">
-        <option data-placeholder="true">Relative</option>
-        <option value="value1">Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-      <div ref="contentPositionRelativeContent"></div>
-      <select ref="contentPositionAbsolute" class="absolute">
-        <option data-placeholder="true">Absolute</option>
-        <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: {
-            contentPosition: 'relative' // 'absolute' or 'relative'
-
-            // To help with relative positioning 
-            // you can set the contentLocation
-            contentLocation: document.getElementById('local')
-          }
-        })
-      </code>
-    </pre>
-  </div>
-</template>

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

@@ -1,73 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'Css',
-  mounted() {
-    new SlimSelect({ select: this.$refs.selectClass as HTMLSelectElement })
-    new SlimSelect({ select: this.$refs.optionClass as HTMLSelectElement })
-  },
-})
-</script>
-
-<style lang="scss">
-.select-class.ss-main {
-  background-color: #5897fb;
-  color: white;
-  border: none;
-
-  .ss-arrow * {
-    border-color: white;
-  }
-}
-
-.ss-option {
-  &.red {
-    color: white;
-    background-color: red;
-  }
-  &.green {
-    color: white;
-    background-color: green;
-  }
-  &.blue {
-    color: white;
-    background-color: blue;
-  }
-}
-</style>
-
-<template>
-  <div id="cssClass" class="content">
-    <h2 class="header">css class</h2>
-    <p>
-      Slim select will inherit any classes that were added to the original select element. This includes options as
-      well.
-    </p>
-
-    <div class="row">
-      <select ref="selectClass" class="select-class">
-        <option value="value1">Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-      <select ref="optionClass" class="option-class">
-        <option class="red" value="value1">Red</option>
-        <option class="green" value="value2">Green</option>
-        <option class="blue" value="value3">Blue</option>
-      </select>
-    </div>
-
-    <pre>
-        <code class="language-html">
-          &lt;select id="select-class" class="classItems"&gt;
-            &lt;option class="red" value="value1"&gt;Value 1&lt;/option&gt;
-            &lt;option class="green" value="value2"&gt;Value 2&lt;/option&gt;
-            &lt;option class="blue" value="value3"&gt;Value 3&lt;/option&gt;
-          &lt;/select&gt;
-        </code>
-      </pre>
-  </div>
-</template>

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

@@ -1,39 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'DataAttributes',
-  mounted() {
-    new SlimSelect({ select: this.$refs.optionsSingle as HTMLSelectElement })
-    new SlimSelect({ select: this.$refs.optionsMultiple as HTMLSelectElement })
-  },
-})
-</script>
-
-<template>
-  <div id="dataAttributes" class="content">
-    <h2 class="header">Data Attributes</h2>
-    <p>
-      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
-    </p>
-
-    <div class="row">
-      <select ref="optionsSingle">
-        <option data-placeholder="true"></option>
-        <option value="value1" data-info="Here is info">Data Attributes</option>
-        <option value="value2" disabled>Disabled Option</option>
-        <option value="value3" class="green">Class Green</option>
-        <option value="value4" style="color: purple">Inline Style</option>
-      </select>
-      <select ref="optionsMultiple" multiple>
-        <option value="value1" data-info="Here is info">Data Attributes</option>
-        <option value="value2" disabled>Disabled Option</option>
-        <option value="value3" class="green">Class Green</option>
-        <option value="value4" style="color: purple">Inline Style</option>
-      </select>
-    </div>
-  </div>
-</template>

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

@@ -1,69 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'Deselect',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.allowDeselectSingle as HTMLSelectElement,
-      settings: {
-        allowDeselect: true,
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.allowDeselectMultiple as HTMLSelectElement,
-      settings: {
-        allowDeselect: true,
-      },
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="allowDeselect" class="content">
-    <h2 class="header">allowDeselect</h2>
-    <p>This will allow you to deselect a value on a single/multiple select dropdown.</p>
-    <p>Be sure to have an empty option data placeholder so slim select has an empty string value to select.</p>
-
-    <div class="row">
-      <select ref="allowDeselectSingle">
-        <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="allowDeselectMultiple" multiple>
-        <option data-placeholder="true"></option>
-        <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: {
-            allowDeselect: true
-          }
-        })
-      </code>
-    </pre>
-    <pre>
-      <code class="language-html">
-        &lt;!-- Requires emtpy data-placeholder option --&gt;
-        &lt;select id="allowDeselect"&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/display.vue

@@ -1,88 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'Display',
-  mounted() {
-    const displaySelect = new SlimSelect({
-      select: this.$refs.selectdisplay as HTMLSelectElement,
-    })
-
-    const displayData = [
-      { value: 'value1', text: 'Value 1', display: false },
-      { value: 'value2', text: 'Value 2' },
-      { value: 'value3', text: 'Value 3' },
-    ]
-
-    displaySelect.setData(displayData)
-    displaySelect.setSelected(['value1', 'value3'])
-
-    new SlimSelect({
-      select: this.$refs.selectdisplay2 as HTMLSelectElement,
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="display" class="content">
-    <h2 class="header">display</h2>
-    <p>Allows to hide elements of selected values.</p>
-
-    <div class="row">
-      <select ref="selectdisplay" multiple></select>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        const displaySelect = new SlimSelect({
-          select: '#selectElement'
-        })
-
-        const displayData = [
-          { value: 'value1', text: 'Value 1', display: false },
-          { value: 'value2', text: 'Value 2' },
-          { value: 'value3', text: 'Value 3' },
-        ]
-
-        displaySelect.setData(displayData)
-        displaySelect.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="selectdisplay2" multiple>
-        <option value="value1" style="display: none" 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="selectdisplay2" multiple&gt;
-          &lt;option value="value1" style="display: none;" 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>