slim-select 2.1.0 → 2.2.1

package/src/docs/assets/scss/prism.scss

@@ -1,157 +0,0 @@
-code[class*='language-'],
-pre[class*='language-'] {
-  color: #a9b7c6;
-  font-family: Consolas, Monaco, 'Andale Mono', monospace;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  line-height: 1.5;
-  border-radius: 4px;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-pre[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection,
-code[class*='language-']::-moz-selection,
-code[class*='language-'] ::-moz-selection {
-  color: inherit;
-  background: rgba(33, 66, 131, 0.85);
-}
-
-pre[class*='language-']::selection,
-pre[class*='language-'] ::selection,
-code[class*='language-']::selection,
-code[class*='language-'] ::selection {
-  color: inherit;
-  background: rgba(33, 66, 131, 0.85);
-}
-
-/* Code blocks */
-pre[class*='language-'] {
-  padding: 1em;
-  margin: 0.5em 0;
-  overflow: auto;
-}
-
-:not(pre) > code[class*='language-'],
-pre[class*='language-'] {
-  background: #2b2b2b;
-}
-
-/* Inline code */
-:not(pre) > code[class*='language-'] {
-  padding: 0.1em;
-  border-radius: 2px;
-}
-
-.token.comment,
-.token.prolog,
-.token.cdata {
-  color: #808080;
-}
-
-.token.delimiter,
-.token.boolean,
-.token.keyword,
-.token.selector,
-.token.important,
-.token.atrule {
-  color: #cc7832;
-}
-
-.token.operator,
-.token.punctuation,
-.token.attr-name {
-  color: #a9b7c6;
-}
-
-.token.tag,
-.token.tag .punctuation,
-.token.doctype,
-.token.builtin {
-  color: #e8bf6a;
-}
-
-.token.entity,
-.token.number,
-.token.symbol {
-  color: #6897bb;
-}
-
-.token.property,
-.token.constant,
-.token.variable {
-  color: #9876aa;
-}
-
-.token.string,
-.token.char {
-  color: #6a8759;
-}
-
-.token.attr-value,
-.token.attr-value .punctuation {
-  color: #a5c261;
-}
-.token.attr-value .punctuation:first-child {
-  color: #a9b7c6;
-}
-
-.token.url {
-  color: #287bde;
-  text-decoration: underline;
-}
-
-.token.function {
-  color: #ffc66d;
-}
-
-.token.regex {
-  background: #364135;
-}
-
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.inserted {
-  background: #294436;
-}
-
-.token.deleted {
-  background: #484a4a;
-}
-
-/*code.language-css .token.punctuation {
-     color: #cc7832;
- }*/
-
-code.language-css .token.property,
-code.language-css .token.property + .token.punctuation {
-  color: #a9b7c6;
-}
-
-code.language-css .token.id {
-  color: #ffc66d;
-}
-
-code.language-css .token.selector > .token.class,
-code.language-css .token.selector > .token.attribute,
-code.language-css .token.selector > .token.pseudo-class,
-code.language-css .token.selector > .token.pseudo-element {
-  color: #ffc66d;
-}

package/src/docs/env.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}
-
-declare module '@slim-select/vue'
-declare module 'chance'
-declare module 'prismjs'
-declare module 'prismjs/*'

package/src/docs/main.ts

@@ -1,27 +0,0 @@
-import '../../node_modules/prismjs/themes/prism-okaidia.css'
-import './assets/scss/index.scss'
-import '../slim-select/slimselect.scss'
-
-import { createApp } from 'vue'
-import router from './router'
-
-import App from './app.vue'
-import Prism from 'prismjs'
-import Normalizer from 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace'
-import 'prismjs/plugins/toolbar/prism-toolbar'
-
-new Normalizer({
-  'remove-trailing': true,
-  'remove-indent': true,
-  'left-trim': true,
-  'right-trim': true,
-})
-
-const app = createApp(App)
-app.use(router)
-app.mixin({
-  updated() {
-    Prism.highlightAll()
-  },
-})
-app.mount('#app')

package/src/docs/pages/data.vue

@@ -1,130 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../slim-select'
-
-export default defineComponent({
-  name: 'Data',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.dataSingle as HTMLSelectElement,
-      data: [
-        {
-          placeholder: true,
-          text: 'data placeholder',
-        },
-        { text: 'Cat' },
-        { text: 'Dog' },
-        { text: 'Bird' },
-      ],
-    })
-
-    new SlimSelect({
-      select: this.$refs.dataMultiple as HTMLSelectElement,
-      data: [
-        {
-          placeholder: true,
-          text: 'data placeholder',
-        },
-        { text: 'Human' },
-        {
-          label: 'Animals',
-          options: [{ text: 'Cat' }, { text: 'Dog' }, { text: 'Bird' }],
-        },
-      ],
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="data" class="contents">
-    <div id="types" class="content">
-      <h2 class="header">Data Types</h2>
-      <p>
-        There are two types of data types. The option which consists of a variation of fields to customize the option.
-        You can also provide an optgroup which has a label and an array of options.
-      </p>
-      <pre>
-        <code class="language-javascript">
-          var optgroup = {
-            label: 'label', // Required
-            options: [] // Required - value is an array of options
-          }
-
-          var option = {
-            text: 'text', // Required
-            value: 'value', // Optional - value will be set by text if not set
-            html: '&lt;b&gt;Html&lt;/b&gt;', // Optional - will be used for display purposes if set
-            selected: false, // Optional - default is false
-            disabled: false, // Optional - default is false
-            placeholder: false, // Optional - default is false
-            class: '', // Optional - default is not set
-            style: '', // Optional - default is not set
-            data: {} // Optional - If you have data attributes
-          }
-        </code>
-      </pre>
-    </div>
-
-    <div id="field" class="content">
-      <h2 class="header">Data Field</h2>
-      <p>
-        The data field is an array of options and optgroups. The data field can be used in place of the select element.
-        The data field will also be used to update the options in the original select element.
-      </p>
-      <p>
-        The only required field is the text field. The value field will be set to the text field if not set. All other
-        fields are optional and have default values if not set.
-      </p>
-
-      <div class="row">
-        <select ref="dataSingle"></select>
-        <select ref="dataMultiple" multiple></select>
-      </div>
-
-      <pre>
-        <code class="language-javascript">
-          new SlimSelect({
-            select: '#selectElement',
-            
-            // Options
-            data: [
-              {text: 'Value 1'},
-              {text: 'Value 2'},
-              {text: 'Value 3'}
-            ],
-
-            // Optgroup
-            data: [
-              {
-                label: 'Animals',
-                options: [
-                  {text: 'Cat'},
-                  {text: 'Dog'},
-                  {text: 'Bird'}
-                ]
-              }
-            ]
-
-            // Mix - option and group options
-            data: [
-              {text: 'Human'}, // regular option
-              {
-                label: 'Animals',
-                options: [
-                  {text: 'Cat'},
-                  {text: 'Dog'},
-                  {text: 'Bird'}
-                ]
-              }
-            ]
-          })
-
-          // If you want to set a placeholder set the first object placeholder to true
-          {'placeholder': true, 'text': 'placeholder text'}
-        </code>
-      </pre>
-    </div>
-  </div>
-</template>

package/src/docs/pages/events/addable.vue

@@ -1,95 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'Addable',
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.addableSingle as HTMLSelectElement,
-      events: {
-        addable: (value: string) => {
-          return {
-            text: value,
-            value: value.toLowerCase(),
-          }
-        },
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.addableMultiple as HTMLSelectElement,
-      events: {
-        addable: (value: string) => {
-          return new Promise((resolve) => {
-            setTimeout(() => {
-              resolve({
-                text: value,
-                value: value,
-              })
-            }, 100)
-          })
-        },
-      },
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="addable" class="content">
-    <h2 class="header">addable</h2>
-    <p>Slim select has the ability to dynamically add options via the search input field</p>
-    <p>
-      addable is a callback which takes a function parameter. The return value can either be a string or an option
-      object.
-    </p>
-
-    <div class="row">
-      <select ref="addableSingle">
-        <option value="value1">Value 1</option>
-        <option value="value2">Value 2</option>
-        <option value="value3">Value 3</option>
-      </select>
-      <select ref="addableMultiple" 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',
-
-          events: {
-            addable: function (value) {
-              // return false or null if you do not want to allow value to be submitted
-              if (value === 'bad') {return false}
-
-              // Return the value string
-              return value // Optional - value alteration // ex: value.toLowerCase()
-
-              // Optional - Return a valid data object. 
-              // See methods/setData for list of valid options
-              return {
-                text: value,
-                value: value.toLowerCase()
-              }
-
-              // Optional - Return a promise with either a string or data object
-              return new Promise((resolve) => {
-                resolve({
-                  text: value,
-                  value: value,
-                })
-              })
-            }
-          }
-        })
-      </code>
-    </pre>
-  </div>
-</template>

package/src/docs/pages/events/before_after_change.vue

@@ -1,154 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-import { DataArray } from '../../../slim-select/store'
-
-export default defineComponent({
-  name: 'BeforeAfterChange',
-  data() {
-    return {
-      beforeChangeSingle: [] as DataArray,
-      beforeChangeMultiple: [] as DataArray,
-      afterChangeSingle: [] as DataArray,
-      afterChangeMultiple: [] as DataArray,
-    }
-  },
-  mounted() {
-    new SlimSelect({
-      select: this.$refs.beforeChangeSingle as HTMLSelectElement,
-      settings: {
-        allowDeselect: true,
-      },
-      events: {
-        beforeChange: (newValue: DataArray, oldValue: DataArray) => {
-          this.beforeChangeSingle = oldValue
-          return true
-        },
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.beforeChangeMultiple as HTMLSelectElement,
-      events: {
-        beforeChange: (newValue: DataArray, oldValue: DataArray) => {
-          this.beforeChangeMultiple = oldValue
-          return true
-        },
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.afterChangeSingle as HTMLSelectElement,
-      settings: {
-        allowDeselect: true,
-      },
-      events: {
-        afterChange: (value: DataArray) => {
-          this.afterChangeSingle = value
-        },
-      },
-    })
-
-    new SlimSelect({
-      select: this.$refs.afterChangeMultiple as HTMLSelectElement,
-      events: {
-        afterChange: (value: DataArray) => {
-          this.afterChangeMultiple = value
-        },
-      },
-    })
-  },
-})
-</script>
-
-<template>
-  <div id="beforeChange" class="content">
-    <h2 class="header">beforeChange</h2>
-    <p>
-      beforeOnChange will trigger a callback on an option click and will allow you the ability to halt if the value it
-      produces isnt to your liking. In order to stop the change from happening just return false on the callback.
-      Returning nothing or true will allow it to continue as normal.
-    </p>
-
-    <div class="alert info">
-      Be sure to return true to allow for the change to happen. False or nothing to cancel change.
-    </div>
-
-    <div v-if="beforeChangeSingle">
-      <strong>Before change: {{ beforeChangeSingle }}</strong>
-    </div>
-
-    <select ref="beforeChangeSingle">
-      <option data-placeholder="true">Select Option</option>
-      <option value="value1">Value 1</option>
-      <option value="value2">Value 2</option>
-      <option value="value3">Value 3</option>
-    </select>
-    <br />
-
-    <div v-if="beforeChangeMultiple">
-      <strong>Before change: {{ beforeChangeMultiple }}</strong>
-    </div>
-
-    <select ref="beforeChangeMultiple" multiple>
-      <option value="value1" selected>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',
-          events: {
-            beforeChange: (newVal, oldVal) => {
-              console.log(newVal)
-              return false // this will stop the change from happening
-            }
-          }
-        })
-      </code>
-    </pre>
-  </div>
-
-  <div id="afterChange" class="content">
-    <h2 class="header">afterChange</h2>
-    <p>afterChange will trigger a callback after the value of the select dropdown has changed.</p>
-
-    <div v-if="afterChangeSingle">
-      <strong>After change: {{ afterChangeSingle }}</strong>
-    </div>
-
-    <select ref="afterChangeSingle">
-      <option data-placeholder="true">Select Option</option>
-      <option value="value1">Value 1</option>
-      <option value="value2">Value 2</option>
-      <option value="value3">Value 3</option>
-    </select>
-    <br />
-
-    <div v-if="afterChangeMultiple">
-      <strong>After change: {{ afterChangeMultiple }}</strong>
-    </div>
-
-    <select ref="afterChangeMultiple" multiple>
-      <option value="value1" selected>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',
-          events: {
-            afterChange: (newVal) => {
-              console.log(newVal)
-            }
-          }
-        })
-      </code>
-    </pre>
-  </div>
-</template>

package/src/docs/pages/events/before_after_open_close.vue

@@ -1,122 +0,0 @@
-<script lang="ts">
-import { defineComponent } from 'vue'
-
-import SlimSelect from '../../../slim-select'
-
-export default defineComponent({
-  name: 'BeForeAfterOpenClose',
-  data() {
-    return {
-      beforeAfterOpenCloseSingle: null as SlimSelect | null,
-      singleState: '',
-      beforeAfterOpenCloseMultiple: null as SlimSelect | null,
-      multipleState: '',
-    }
-  },
-  mounted() {
-    this.beforeAfterOpenCloseSingle = new SlimSelect({
-      select: this.$refs.beforeAfterOpenCloseSingle as HTMLSelectElement,
-      events: {
-        beforeOpen: () => {
-          this.setState('single', 'beforeOpen')
-        },
-        afterOpen: () => {
-          this.setState('single', 'afterOpen')
-        },
-        beforeClose: () => {
-          this.setState('single', 'beforeClose')
-        },
-        afterClose: () => {
-          this.setState('single', 'afterClose')
-        },
-      },
-    })
-
-    this.beforeAfterOpenCloseMultiple = new SlimSelect({
-      select: this.$refs.beforeAfterOpenCloseMultiple as HTMLSelectElement,
-      events: {
-        beforeOpen: () => {
-          this.setState('multiple', 'beforeOpen')
-        },
-        afterOpen: () => {
-          this.setState('multiple', 'afterOpen')
-        },
-        beforeClose: () => {
-          this.setState('multiple', 'beforeClose')
-        },
-        afterClose: () => {
-          this.setState('multiple', 'afterClose')
-        },
-      },
-    })
-  },
-  methods: {
-    setState(el: string, state: string) {
-      if (el === 'single') {
-        this.singleState = state
-      } else {
-        this.multipleState = state
-      }
-
-      // Set timer to clear state
-      setTimeout(() => {
-        if (el === 'single') {
-          this.singleState = ''
-        } else {
-          this.multipleState = ''
-        }
-      }, 1000)
-    },
-  },
-})
-</script>
-
-<template>
-  <div id="open" class="content">
-    <h2 class="header">beforeOpen / afterOpen / beforeClose / afterClose</h2>
-    <p>
-      The beforeOpen, afterOpen, beforeClose, and afterClose events will fire before and after the select is opened and
-      closed.
-    </p>
-
-    <div class="row">
-      <div>
-        <div>State: {{ singleState }}</div>
-        <select ref="beforeAfterOpenCloseSingle">
-          <option value="value1">Value 1</option>
-          <option value="value2">Value 2</option>
-          <option value="value3">Value 3</option>
-        </select>
-      </div>
-      <div>
-        <div>State: {{ multipleState }}</div>
-        <select ref="beforeAfterOpenCloseMultiple" multiple>
-          <option value="value1">Value 1</option>
-          <option value="value2">Value 2</option>
-          <option value="value3">Value 3</option>
-        </select>
-      </div>
-    </div>
-    <pre>
-      <code class="language-javascript">
-        var select = new SlimSelect({
-          select: '#selectElement',
-          events: {
-            beforeOpen: () => {
-              console.log('before open')
-            },
-            afterOpen: () => {
-              console.log('after open')
-            },
-            beforeClose: () => {
-              console.log('before close')
-            },
-            afterClose: () => {
-              console.log('after close')
-            },
-          },
-        })
-      </code>
-    </pre>
-  </div>
-</template>