Merge branch 'develop'

.github/workflows/jest.yml

@@ -0,0 +1,27 @@
+name: 'Jest unit tests'
+on:
+  push:
+    paths-ignore:
+      - '**/dist/**'
+      - '**/*.md'
+      - '.github/**'
+      - '.vscode/**'
+  pull_request:
+    branches:
+      - develop
+    paths-ignore:
+      - '**/dist/**'
+      - '**/*.md'
+      - '.github/**'
+      - '.vscode/**'
+jobs:
+  jest:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '21.5.0'
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run test

.prettierignore

@@ -0,0 +1 @@
+**/dist

README.md

@@ -5,6 +5,7 @@
 Advanced select dropdown
 
 [![NPM Downloads](https://img.shields.io/npm/dt/slim-select.svg)](https://www.npmjs.com/package/slim-select)
+![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/brianvoe/slim-select/jest.yml?logo=jest&label=unit%20tests)
 
 ## Support
 
@@ -133,6 +134,7 @@ new SlimSelect({
     disabled: false,
     alwaysOpen: false,
     showSearch: true,
+    focusSearch: true,
     searchPlaceholder: 'Search',
     searchText: 'No Results',
     searchingText: 'Searching...',

jest.config.js

@@ -5,4 +5,10 @@ module.exports = {
   testEnvironment: 'jsdom',
   testMatch: ['**/*.test.ts'],
   roots: ['./src/slim-select'],
+  reporters: process.env.CI ? [['github-actions', {silent: false}], 'summary'] : ['default'],
+  coverageThreshold: {
+    global: {
+      lines: 75,
+    },
+  },
 }

package.json

@@ -19,6 +19,9 @@
     ".": {
       "import": "./dist/slimselect.js",
       "require": "./dist/slimselect.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": {
       "types": "./dist/*.d.ts"
     },
     "./styles": "./dist/slimselect.css"
@@ -47,7 +50,8 @@
     "build:library:js": "cd src/slim-select && rollup --config ./rollup.config.mjs && cd ../../",
     "build:library:css": "cd src/slim-select && sass ./slimselect.scss ../../dist/slimselect.css --style=compressed && cd ../../",
     "build:frameworks": "npm run build --workspaces",
-    "test": "jest"
+    "test": "jest",
+    "test:coverage": "jest --coverage"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",

src/docs/app.vue

@@ -62,6 +62,7 @@ export default defineComponent({
           closable: 'close',
           options: [
             { text: 'select', value: 'settings#select' },
+            { text: 'cssClasses', value: 'settings#cssClasses' },
             { text: 'alwaysOpen', value: 'settings#alwaysOpen' },
             { text: 'contentLocation', value: 'settings#contentLocation' },
             { text: 'contentPosition', value: 'settings#contentPosition' },
@@ -77,7 +78,7 @@ export default defineComponent({
             { text: 'cssClass', value: 'settings#cssClass' },
             { text: 'inlineStyles', value: 'settings#inlineStyles' },
             { text: 'html', value: 'settings#html' },
-            { text: 'keepOrder', value: 'settings#keepOrder'},
+            { text: 'keepOrder', value: 'settings#keepOrder' },
             { text: 'search', value: 'settings#search' },
             { text: 'closeOnSelect', value: 'settings#closeOnSelect' },
             { text: 'showOptionTooltips', value: 'settings#showOptionTooltips' },
@@ -182,9 +183,11 @@ export default defineComponent({
 
     this.setDemensions()
     window.addEventListener('resize', this.navDebounce)
+    window.addEventListener('nav-updated', this.updateNav)
   },
   unmounted() {
     window.removeEventListener('resize', this.navDebounce)
+    window.removeEventListener('nav-updated', this.updateNav)
 
     this.nav?.destroy()
   },
@@ -230,6 +233,13 @@ export default defineComponent({
         },
       })
     },
+    updateNav() {
+      setTimeout(() => {
+        if (this.nav) {
+          this.nav.setSelected(this.$router.currentRoute.value.fullPath.replace('/', ''))
+        }
+      }, 0)
+    },
   },
 })
 </script>

src/docs/pages/home.vue

@@ -77,6 +77,11 @@ export default defineComponent({
       this.multiple.destroy()
     }
   },
+  methods: {
+    handleClick() {
+      window.dispatchEvent(new Event('nav-updated'))
+    },
+  },
 })
 </script>
 
@@ -158,6 +163,13 @@ export default defineComponent({
       }
     }
   }
+
+  .frameworks {
+    .framework-items {
+      display: flex;
+      flex-direction: row;
+    }
+  }
 }
 </style>
 
@@ -243,8 +255,8 @@ export default defineComponent({
         SlimSelect is in the process of adding a few framework integrations.<br />
         If you are an expert in any specific framework and would like to help out, please reach out!
       </p>
-      <div class="row frameworks">
-        <router-link to="frameworks#vue">
+      <div class="framework-items">
+        <router-link to="/vue" @click="handleClick">
           <svg viewBox="0 0 128 128" width="100" height="100">
             <path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z"></path>
             <path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z"></path>

src/docs/pages/settings/css_classes.vue

@@ -0,0 +1,81 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+import SlimSelect from '../../../slim-select'
+
+export default defineComponent({
+    name: 'CustomCss',
+    mounted() {
+        new SlimSelect({ select: this.$refs.mainSelect as HTMLSelectElement, cssClasses: { option: 'primary-option' } })
+        new SlimSelect({ select: this.$refs.secondarySelect as HTMLSelectElement, cssClasses: { option: 'secondary-option' } })
+    },
+})
+</script>
+
+<style lang="scss">
+    .primary-option, .secondary-option {
+        padding: 0.25rem 0.5rem;
+        cursor: pointer;
+    }
+    .primary-option {
+        color: var(--ss-bg-color);
+        background: var(--ss-primary-color);
+        
+        &:hover {
+            color: var(--ss-primary-color);
+            background: var(--ss-bg-color);
+        }
+    }
+    .secondary-option {
+        color: var(--ss-primary-color);
+        background: var(--ss-bg-color);
+        
+        &:hover {
+            color: var(--ss-bg-color);
+            background: var(--ss-primary-color);
+        }
+    }
+    
+</style>
+
+<template>
+  <div id="cssClasses" class="content">
+      <h2 class="header">cssClasses</h2>
+      <p>
+      You can override the default CSS classes by setting them during initialization.
+      </p>
+
+      <div class="row">
+          <select ref="mainSelect">
+              <option value="value1">Value 1</option>
+              <option value="value2">Value 2</option>
+              <option value="value3">Value 3</option>
+          </select>
+          <select ref="secondarySelect">
+              <option value="value1">Value 1</option>
+              <option value="value2">Value 2</option>
+              <option value="value3">Value 3</option>
+          </select>
+      </div>
+
+      <pre>
+          <code class="language-html">
+          &lt;select id="primary-select"&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>
+
+      <pre>
+        <code class="language-javascript">
+          new SlimSelect({
+            select: '#primary-select',
+            cssClasses: {
+              option: "primary-option" 
+          })
+        </code>
+      </pre>
+  </div>
+</template>

src/docs/pages/settings/index.vue

@@ -8,6 +8,7 @@ import CloseOnSelect from './close_on_select.vue'
 import ContentLocation from './content_location.vue'
 import ContentPosition from './content_position.vue'
 import Css from './css.vue'
+import CssClasses from './css_classes.vue'
 import DataAttributes from './data_attributes.vue'
 import Deselect from './deselect.vue'
 import Disabled from './disabled.vue'
@@ -30,6 +31,7 @@ export default defineComponent({
   name: 'Settings',
   components: {
     Select,
+    CssClasses,
     AlwaysOpen,
     ContentLocation,
     ContentPosition,
@@ -59,6 +61,7 @@ export default defineComponent({
 <template>
   <div id="settings" class="contents">
     <Select />
+    <CssClasses />
     <AlwaysOpen />
     <ContentLocation />
     <ContentPosition />