slim-select 1.27.0 → 2.0.0

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

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

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

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

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

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

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

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

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

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

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