slim-select 1.27.1 → 2.0.0

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

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

@@ -0,0 +1,51 @@
+<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,17 +1,45 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
 
-Vue.use(Router)
-
-export default new Router({
-  mode: 'history',
-  base: '/',
+const router = createRouter({
+  history: createWebHistory(),
   linkActiveClass: 'active',
   routes: [
-    { path: '/', component: () => import(/* webpackChunkName: "home" */ './pages/home.vue') },
-    { path: '/install', component: () => import(/* webpackChunkName: "install" */ './pages/install.vue') },
-    { path: '/selects', component: () => import(/* webpackChunkName: "selects" */ './pages/selects.vue') },
-    { path: '/options', component: () => import(/* webpackChunkName: "options" */ './pages/options.vue') },
-    { path: '/methods', component: () => import(/* webpackChunkName: "methods" */ './pages/methods.vue') }
-  ]
+    {
+      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'),
+    },
+  ],
 })
+
+export default router

package/src/slim-select/helper.ts

@@ -1,11 +1,25 @@
+// Generate an 8 character random string
+export function generateID(): string {
+  return Math.random().toString(36).substring(2, 10)
+}
+
 export function hasClassInTree(element: HTMLElement, className: string) {
   function hasClass(e: HTMLElement, c: string) {
-    if (!(!c || !e || !e.classList || !e.classList.contains(c))) { return e }
+    // If the element has the class return element
+    if (c && e && e.classList && e.classList.contains(c)) {
+      return e
+    }
+
+    // If the element has a dataset id of the class return element
+    if (c && e && e.dataset && e.dataset.id && e.dataset.id === className) {
+      return e
+    }
+
     return null
   }
 
   function parentByClass(e: any, c: string): any {
-    if (!e || e === document as any) {
+    if (!e || e === (document as any)) {
       return null
     } else if (hasClass(e, c)) {
       return e
@@ -17,101 +31,26 @@ export function hasClassInTree(element: HTMLElement, className: string) {
   return hasClass(element, className) || parentByClass(element, className)
 }
 
-export function ensureElementInView(container: HTMLElement, element: HTMLElement): void {
-  // Determine container top and bottom
-  const cTop = container.scrollTop + container.offsetTop // Make sure to have offsetTop
-  const cBottom = cTop + container.clientHeight
-
-  // Determine element top and bottom
-  const eTop = element.offsetTop
-  const eBottom = eTop + element.clientHeight
-
-  // Check if out of view
-  if (eTop < cTop) {
-    container.scrollTop -= (cTop - eTop)
-  } else if (eBottom > cBottom) {
-    container.scrollTop += (eBottom - cBottom)
-  }
-}
-
-export function putContent(el: HTMLElement, currentPosition: string, isOpen: boolean): string {
-  const height = el.offsetHeight
-  const rect = el.getBoundingClientRect()
-  const elemTop = (isOpen ? rect.top : rect.top - height)
-  const elemBottom = (isOpen ? rect.bottom : rect.bottom + height)
-
-  if (elemTop <= 0) { return 'below' }
-  if (elemBottom >= window.innerHeight) { return 'above' }
-  return (isOpen ? currentPosition : 'below')
-}
-
-export function debounce(func: (...params: any[]) => void, wait = 100, immediate = false): () => void {
+export function debounce(func: (...params: any[]) => void, wait = 50, immediate = false): () => void {
   let timeout: any
-  return function(this: any, ...args: any[]) {
+  return function (this: any, ...args: any[]) {
     const context = self
     const later = () => {
       timeout = null
-      if (!immediate) { func.apply(context, args) }
+      if (!immediate) {
+        func.apply(context, args)
+      }
     }
     const callNow = immediate && !timeout
     clearTimeout(timeout)
     timeout = setTimeout(later, wait)
-    if (callNow) { func.apply(context, args) }
-  }
-}
-
-export function isValueInArrayOfObjects(selected: any, key: string, value: string): boolean {
-  if (!Array.isArray(selected)) {
-    return selected[key] === value
-  }
-
-  for (const s of selected) {
-    if (s && s[key] && s[key] === value) {
-      return true
+    if (callNow) {
+      func.apply(context, args)
     }
   }
-
-  return false
-}
-
-export function highlight(str: string, search: any, className: string) {
-  // the completed string will be itself if already set, otherwise, the string that was passed in
-  let completedString: any = str
-  const regex = new RegExp('(' + search.trim() + ')(?![^<]*>[^<>]*</)', 'i')
-
-  // If the regex doesn't match the string just exit
-  if (!str.match(regex)) { return str }
-
-  // Otherwise, get to highlighting
-  const matchStartPosition = (str.match(regex) as any).index
-  const matchEndPosition = matchStartPosition + (str.match(regex) as any)[0].toString().length
-  const originalTextFoundByRegex = str.substring(matchStartPosition, matchEndPosition)
-  completedString = completedString.replace(regex, `<mark class="${className}">${originalTextFoundByRegex}</mark>`)
-  return completedString
 }
 
 export function kebabCase(str: string) {
-  const result = str.replace(
-    /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,
-    (match) => '-' + match.toLowerCase()
-  )
-  return (str[0] === str[0].toUpperCase())
-    ? result.substring(1)
-    : result
+  const result = str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase())
+  return str[0] === str[0].toUpperCase() ? result.substring(1) : result
 }
-
-// Custom events
-(() => {
-  const w = (window as any)
-  if (typeof w.CustomEvent === 'function') { return }
-
-  function CustomEvent(event: any, params: any) {
-    params = params || { bubbles: false, cancelable: false, detail: undefined }
-    const evt = document.createEvent('CustomEvent')
-    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail)
-    return evt
-  }
-
-  CustomEvent.prototype = w.Event.prototype
-  w.CustomEvent = CustomEvent
-})()