slim-select 2.1.0 → 2.2.1

package/src/docs/pages/selects.vue

@@ -1,213 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../slim-select'
-
-export default defineComponent({
-  name: 'Selects',
-  data() {
-    return {
-      states: [
-        { abv: 'AL', state: 'Alabama' },
-        { abv: 'AK', state: 'Alaska' },
-        { abv: 'AZ', state: 'Arizona' },
-        { abv: 'AR', state: 'Arkansas' },
-        { abv: 'CA', state: 'California' },
-        { abv: 'CO', state: 'Colorado' },
-        { abv: 'CT', state: 'Connecticut' },
-        { abv: 'DE', state: 'Delaware' },
-        { abv: 'FL', state: 'Florida' },
-        { abv: 'GA', state: 'Georgia' },
-        { abv: 'HI', state: 'Hawaii' },
-        { abv: 'ID', state: 'Idaho' },
-        { abv: 'IL', state: 'Illinois' },
-        { abv: 'IN', state: 'Indiana' },
-        { abv: 'IA', state: 'Iowa' },
-        { abv: 'KS', state: 'Kansas' },
-        { abv: 'KY', state: 'Kentucky' },
-        { abv: 'LA', state: 'Louisiana' },
-        { abv: 'ME', state: 'Maine' },
-        { abv: 'MD', state: 'Maryland' },
-        { abv: 'MA', state: 'Massachusetts' },
-        { abv: 'MI', state: 'Michigan' },
-        { abv: 'MN', state: 'Minnesota' },
-        { abv: 'MS', state: 'Mississippi' },
-        { abv: 'MO', state: 'Missouri' },
-        { abv: 'MT', state: 'Montana' },
-        { abv: 'NE', state: 'Nebraska' },
-        { abv: 'NV', state: 'Nevada' },
-        { abv: 'NH', state: 'New Hampshire' },
-        { abv: 'NJ', state: 'New Jersey' },
-        { abv: 'NM', state: 'New Mexico' },
-        { abv: 'NY', state: 'New York' },
-        { abv: 'NC', state: 'North Carolina' },
-        { abv: 'ND', state: 'North Dakota' },
-        { abv: 'OH', state: 'Ohio' },
-        { abv: 'OK', state: 'Oklahoma' },
-        { abv: 'OR', state: 'Oregon' },
-        { abv: 'PA', state: 'Pennsylvania' },
-        { abv: 'RI', state: 'Rhode Island' },
-        { abv: 'SC', state: 'South Carolina' },
-        { abv: 'SD', state: 'South Dakota' },
-        { abv: 'TN', state: 'Tennessee', selected: true },
-        { abv: 'TX', state: 'Texas' },
-        { abv: 'UT', state: 'Utah' },
-        { abv: 'VT', state: 'Vermont' },
-        { abv: 'VA', state: 'Virginia' },
-        { abv: 'WA', state: 'Washington' },
-        { abv: 'WV', state: 'West Virginia' },
-        { abv: 'WI', state: 'Wisconsin' },
-        { abv: 'WY', state: 'Wyoming' },
-      ],
-      foods: [
-        { label: 'Dairy', options: ['Milk', 'Cheese', 'Butter', 'Ice Cream'] },
-        { label: 'Meat', options: ['Beef', 'Ham', 'Pork', 'Sausage', 'Chicken', 'Turkey'] },
-        { label: 'Fruits', options: ['Apple', 'Banana', 'Grape', 'Orange', 'Strawberry', 'Blueberry', 'Raspberry'] },
-        {
-          label: 'Vegetables',
-          options: ['Carrot', 'Tomato', 'Broccoli', 'Celery', 'Corn', 'Pumpkin', 'Kale', 'Spinach'],
-        },
-      ],
-    }
-  },
-  mounted() {
-    // Single
-    new SlimSelect({
-      select: this.$refs.single as HTMLSelectElement,
-    })
-    new SlimSelect({
-      select: this.$refs.singleOptgroup as HTMLSelectElement,
-    })
-
-    // Multiple
-    new SlimSelect({
-      select: this.$refs.multiple as HTMLSelectElement,
-    })
-    const multiGroup = new SlimSelect({
-      select: this.$refs.multipleOptgroup as HTMLSelectElement,
-    })
-    multiGroup.setSelected(['Cheese', 'Apple', 'Corn'])
-  },
-})
-</script>
-
-<template>
-  <div id="selects" class="contents">
-    <div id="single" class="content">
-      <h2 class="header">Single</h2>
-      <p>
-        Basic single select usage with Slim Select is extremely easy. Just set the select value to your select element.
-      </p>
-      <div class="row">
-        <div>
-          <h4>Options</h4>
-          <select ref="single">
-            <option v-for="value in states" :key="value.abv" :value="value.abv" :selected="value.selected">
-              {{ value.state }}
-            </option>
-          </select>
-        </div>
-        <div>
-          <h4>Optgroups</h4>
-          <select ref="singleOptgroup">
-            <optgroup v-for="food in foods" :key="food.label" :label="food.label">
-              <option v-for="option in food.options" :key="option" :value="option">{{ option }}</option>
-            </optgroup>
-          </select>
-        </div>
-      </div>
-
-      <pre>
-        <code class="language-javascript">
-          new SlimSelect({
-            select: '#single'
-          })
-        </code>
-      </pre>
-
-      <pre>
-        <code class="language-html">
-          &lt;!-- Options --&gt;
-          &lt;select id="single"&gt;
-            &lt;option value="value 1"&gt;Value 1&lt;/option&gt;
-            &lt;option value="value 2"&gt;Value 2&lt;/option&gt;
-            &lt;option value="value 3"&gt;Value 3&lt;/option&gt;
-          &lt;/select&gt;
-
-          &lt;!-- Optgroups --&gt;
-          &lt;select id="single-optgroups"&gt;
-            &lt;optgroup label="Label 1"&gt;
-              &lt;option value="value 1"&gt;Value 1&lt;/option&gt;
-              &lt;option value="value 2"&gt;Value 2&lt;/option&gt;
-              &lt;option value="value 3"&gt;Value 3&lt;/option&gt;
-            &lt;/optgroup&gt;
-            &lt;optgroup label="Label 2"&gt;
-              &lt;option value="value 21"&gt;Value 1&lt;/option&gt;
-              &lt;option value="value 22"&gt;Value 2&lt;/option&gt;
-              &lt;option value="value 23"&gt;Value 3&lt;/option&gt;
-            &lt;/optgroup&gt;
-          &lt;/select&gt;
-        </code>
-      </pre>
-    </div>
-
-    <div id="multiple" class="content">
-      <h2 class="header">Multiple</h2>
-      <p>
-        Multi selects work just the same as a single select. The only difference is setting the multiple attribute on
-        your select.
-      </p>
-      <div class="row">
-        <div>
-          <h4>Options</h4>
-          <select ref="multiple" multiple>
-            <option v-for="value in states" :value="value.abv" :key="value.abv" :selected="value.selected">
-              {{ value.state }}
-            </option>
-          </select>
-        </div>
-        <div>
-          <h4>Optgroups</h4>
-          <select ref="multipleOptgroup" multiple>
-            <optgroup v-for="food in foods" :key="food.label" :label="food.label">
-              <option v-for="option in food.options" :key="option" :value="option">{{ option }}</option>
-            </optgroup>
-          </select>
-        </div>
-      </div>
-
-      <pre>
-        <code class="language-javascript">
-          new SlimSelect({
-            select: '#multiple'
-          })
-        </code>
-      </pre>
-
-      <pre>
-        <code class="language-html">
-          &lt;!-- Options --&gt;
-          &lt;select id="multiple" multiple&gt;
-            &lt;option value="value 1"&gt;Value 1&lt;/option&gt;
-            &lt;option value="value 2"&gt;Value 2&lt;/option&gt;
-            &lt;option value="value 3"&gt;Value 3&lt;/option&gt;
-          &lt;/select&gt;
-
-          &lt;!-- Optgroups --&gt;
-          &lt;select id="multiple-optgroups" multiple&gt;
-            &lt;optgroup label="Label 1"&gt;
-              &lt;option value="value 1"&gt;Value 1&lt;/option&gt;
-              &lt;option value="value 2"&gt;Value 2&lt;/option&gt;
-              &lt;option value="value 3"&gt;Value 3&lt;/option&gt;
-            &lt;/optgroup&gt;
-            &lt;optgroup label="Label 2"&gt;
-              &lt;option value="value 21"&gt;Value 1&lt;/option&gt;
-              &lt;option value="value 22"&gt;Value 2&lt;/option&gt;
-              &lt;option value="value 23"&gt;Value 3&lt;/option&gt;
-            &lt;/optgroup&gt;
-          &lt;/select&gt;
-        </code>
-      </pre>
-    </div>
-  </div>
-</template>

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

@@ -1,88 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'AlwaysOpen',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.alwaysOpenSingle as HTMLSelectElement,
-      settings: {
-        alwaysOpen: true,
-        contentLocation: this.$refs.alwaysOpenSingleContent as HTMLElement,
-        contentPosition: 'relative',
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.alwaysOpenMultiple as HTMLSelectElement,
-      settings: {
-        alwaysOpen: true,
-        contentLocation: this.$refs.alwaysOpenMultipleContent as HTMLElement,
-        contentPosition: 'relative',
-      },
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="alwaysOpen" class="content">
-    <h2 class="header">alwaysOpen</h2>
-    <p>
-      alwaysOpen option is used to keep the select open at all times. This is useful for when you want to display the
-      options at all times.
-    </p>
-
-    <div class="row">
-      <div style="height: auto">
-        <select ref="alwaysOpenSingle">
-          <option value="value1">Value 1</option>
-          <option value="value2">Value 2</option>
-          <option value="value3">Value 3</option>
-        </select>
-        <div ref="alwaysOpenSingleContent"></div>
-      </div>
-
-      <div style="height: auto">
-        <select ref="alwaysOpenMultiple" 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>
-        </select>
-        <div ref="alwaysOpenMultipleContent"></div>
-      </div>
-    </div>
-
-    <pre>
-      <code class="language-javascript">
-        new SlimSelect({
-          select: '#selectElement',
-          settings: {
-            alwaysOpen: true,
-
-            // In various situations it may be useful to set the contentLocation
-            // to an element that will display best
-            contentLocation: document.getElementById('local'), ,
-            contentPosition: 'relative',
-          }
-        })
-      </code>
-    </pre>
-
-    <pre>
-      <code class="language-html">
-        &lt;select id="selectElement"&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/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>