slim-select 2.2.0 → 2.2.2

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_all.vue

@@ -1,88 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'SelectAll',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.selectAll as HTMLSelectElement,
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="selectAll" class="content">
-    <h2 class="header">selectAll</h2>
-    <p>
-      selectAll is a setting that can be used to add a select all action to an optgroup. This setting can be set to true
-      or false. If set to true, a select all option will be added to the top of the selected values. If set to false or
-      not set at all, no select all action will be added to the optgroup.
-    </p>
-    <div class="alert info">You can set selectAll either by data or by html dataset added to the optgroup element</div>
-
-    <select ref="selectAll" multiple>
-      <optgroup label="Label 1" data-selectall="true">
-        <option value="value1">Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </optgroup>
-      <optgroup label="Label 2">
-        <option value="value4">Value 4</option>
-        <option value="value5">Value 5</option>
-        <option value="value6">Value 6</option>
-      </optgroup>
-    </select>
-    <br />
-
-    <h3>Via data</h3>
-    <pre>
-      <code class="language-javascript">
-        new SlimSelect({
-          select: '#selectElement',
-          data: [
-            {
-              label: 'Label 1',
-              selectAll: true,
-              options: [
-                { text: 'Option 1', value: '1' },
-                { text: 'Option 2', value: '2' },
-                { text: 'Option 3', value: '3' },
-              ],
-            },
-            {
-              label: 'Label 2',
-              selectAll: false,
-              options: [
-                { text: 'Option 4', value: '4' },
-                { text: 'Option 5', value: '5' },
-                { text: 'Option 6', value: '6' },
-              ],
-            },
-          ],
-        })
-      </code>
-    </pre>
-    <br />
-
-    <h3>Via html</h3>
-    <pre>
-      <code class="language-html">
-        &lt;select ref="selectAll" multiple&gt;
-          &lt;optgroup label="Label 1" data-selectall="true"&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"&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;/select&gt;
-      </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