slim-select 2.1.0 → 2.2.1

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>

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

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

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

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

@@ -1,44 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'ShowTooltip',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.showOptionTooltips as HTMLSelectElement,
-      settings: {
-        showOptionTooltips: true,
-      },
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="showOptionTooltips" class="content">
-    <h2 class="header">showOptionTooltips</h2>
-    <p>
-      showOptionTooltips option is used to active displaying the on-hover tooltips for select options. The tooltip text
-      is equal to the option text content.
-    </p>
-
-    <select ref="showOptionTooltips">
-      <option value="value1">Value 1</option>
-      <option value="value2">Value 2</option>
-      <option value="value3">Value 3</option>
-    </select>
-
-    <pre>
-      <code class="language-javascript">
-        new SlimSelect({
-          select: '#selectElement',
-          settings: {
-            showOptionTooltips: true,
-          }
-        })
-      </code>
-    </pre>
-  </div>
-</template>

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

@@ -1,51 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'Styles',
-  mounted() {
-    new SlimSelect({ select: this.$refs.selectStyle as HTMLSelectElement })
-    new SlimSelect({ select: this.$refs.optionStyle as HTMLSelectElement })
-  },
-})
-</script>
-
-<template>
-  <div id="inlineStyles" class="content">
-    <h2 class="header">inline styles</h2>
-    <p>
-      Slim select will inherit any styles that were added to the original select element. This includes options as well.
-    </p>
-
-    <div class="row">
-      <select ref="selectStyle" style="color: red">
-        <option value="value1">Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-      <select ref="optionStyle">
-        <option style="color: red" value="value1">Red</option>
-        <option style="color: green">Green</option>
-        <option style="color: blue">Blue</option>
-      </select>
-    </div>
-
-    <pre>
-      <code class="language-html">
-        &lt;select id="select-style" style="color: red;"&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="option-style"&gt;
-          &lt;option style="color: red;" value="value1"&gt;Red&lt;/option&gt;
-          &lt;option style="color: green;"&gt;Green&lt;/option&gt;
-          &lt;option style="color: blue;"&gt;Blue&lt;/option&gt;
-        &lt;/select&gt;
-      </code>
-    </pre>
-  </div>
-</template>

package/src/docs/router.ts

@@ -1,50 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-
-const router = createRouter({
-  history: createWebHistory(),
-  linkActiveClass: 'active',
-  routes: [
-    {
-      path: '/',
-      name: 'Home',
-      component: () => import('./pages/home.vue'),
-    },
-    {
-      path: '/install',
-      name: 'Install',
-      component: () => import('./pages/install.vue'),
-    },
-    {
-      path: '/selects',
-      name: 'Selects',
-      component: () => import('./pages/selects.vue'),
-    },
-    {
-      path: '/data',
-      name: 'Data',
-      component: () => import('./pages/data.vue'),
-    },
-    {
-      path: '/settings',
-      name: 'Settings',
-      component: () => import('./pages/settings/index.vue'),
-    },
-    {
-      path: '/events',
-      name: 'Events',
-      component: () => import('./pages/events/index.vue'),
-    },
-    {
-      path: '/methods',
-      name: 'Methods',
-      component: () => import('./pages/methods/index.vue'),
-    },
-    {
-      path: '/frameworks',
-      name: 'Frameworks',
-      component: () => import('./pages/frameworks/index.vue'),
-    },
-  ],
-})
-
-export default router