slim-select 2.8.2 → 2.9.0

package/src/slim-select/store.ts

@@ -93,6 +93,7 @@ export default class Store {
 
   // Main data set, never null
   private data: DataArray = []
+  private selectedOrder: string[] = []
 
   constructor(type: selectType, data: DataArrayPartial) {
     this.selectType = type
@@ -115,11 +116,17 @@ export default class Store {
 
         if ('options' in dataObj && dataObj.options) {
           for (let option of dataObj.options) {
-            return this.validateOption(option)
+            const validationError = this.validateOption(option)
+            if (validationError) {
+              return validationError
+            }
           }
         }
       } else if (dataObj instanceof Option || 'text' in dataObj) {
-        return this.validateOption(dataObj)
+        const validationError = this.validateOption(dataObj)
+        if (validationError) {
+          return validationError
+        }
       } else {
         return new Error('Data object must be a valid optgroup or option')
       }
@@ -169,7 +176,7 @@ export default class Store {
     // Run this.data through setSelected by value
     // to set the selected property and clean any wrong selected
     if (this.selectType === 'single') {
-      this.setSelectedBy('value', this.getSelected())
+      this.setSelectedBy('id', this.getSelected())
     }
   }
 
@@ -184,8 +191,13 @@ export default class Store {
     return this.filter(null, false) as Option[]
   }
 
-  public addOption(option: OptionOptional) {
-    this.setData(this.getData().concat(new Option(option)))
+  public addOption(option: OptionOptional, addToStart: boolean = false) {
+    if (addToStart) {
+      let data = [new Option(option)] as DataArray
+      this.setData(data.concat(this.getData()))
+    } else {
+      this.setData(this.getData().concat(new Option(option)))
+    }
   }
 
   // Pass in an array of id that will loop through
@@ -194,6 +206,7 @@ export default class Store {
   public setSelectedBy(selectedType: 'id' | 'value', selectedValues: string[]) {
     let firstOption: Option | null = null
     let hasSelected = false
+    const selectedObjects: Option[] = []
 
     for (let dataObj of this.data) {
       // Optgroup
@@ -207,8 +220,12 @@ export default class Store {
 
           // If the option is selected, set hasSelected to true
           // for single based selects
-          if (option.selected && this.selectType === 'single') {
-            hasSelected = true
+          if (option.selected) {
+            selectedObjects.push(option)
+
+            if (this.selectType === 'single') {
+              hasSelected = true
+            }
           }
         }
       }
@@ -223,8 +240,12 @@ export default class Store {
 
         // If the option is selected, set hasSelected to true
         // for single based selects
-        if (dataObj.selected && this.selectType === 'single') {
-          hasSelected = true
+        if (dataObj.selected) {
+          selectedObjects.push(dataObj)
+
+          if (this.selectType === 'single') {
+            hasSelected = true
+          }
         }
       }
     }
@@ -232,19 +253,23 @@ export default class Store {
     // If no options are selected, select the first option
     if (this.selectType === 'single' && firstOption && !hasSelected) {
       firstOption.selected = true
+      selectedObjects.push(firstOption)
     }
+
+    // Put together a list of selected ids in the order of the selected values
+    const selectedIds = selectedValues.map((value) => {
+      return selectedObjects.find((option) => option[selectedType] === value)?.id || ''
+    })
+
+    this.selectedOrder = selectedIds
   }
 
   public getSelected(): string[] {
-    let selectedOptions = this.getSelectedOptions()
-    let selectedValues: string[] = []
-
-    // Loop through each option and get the value
-    selectedOptions.forEach((option: Option) => {
-      selectedValues.push(option.value)
-    })
+    return this.getSelectedOptions().map((option) => option.id)
+  }
 
-    return selectedValues
+  public getSelectedValues(): string[] {
+    return this.getSelectedOptions().map((option) => option.value)
   }
 
   public getSelectedOptions(): Option[] {
@@ -253,17 +278,6 @@ export default class Store {
     }, false) as Option[]
   }
 
-  public getSelectedIDs(): string[] {
-    let selectedOptions = this.getSelectedOptions()
-
-    let selectedIDs: string[] = []
-    selectedOptions.forEach((op: Option) => {
-      selectedIDs.push(op.id)
-    })
-
-    return selectedIDs
-  }
-
   public getOptgroupByID(id: string): Optgroup | null {
     // Loop through each data object
     // and if optgroup is found, return it
@@ -362,4 +376,32 @@ export default class Store {
     return dataSearch
   }
 
+  // Take in an array of options and reoder them based upon the selected order
+  public selectedOrderOptions(options: Option[]): Option[] {
+    const newOrder: Option[] = []
+    this.selectedOrder.forEach((id) => {
+      const option = options.find((opt) => opt.id === id)
+      if (option) {
+        newOrder.push(option)
+      }
+    })
+
+    // add any remaining options that were not in the selected order
+    options.forEach((option) => {
+      let isIn = false
+      newOrder.forEach((selectedOption) => {
+        if (option.id === selectedOption.id) {
+          isIn = true
+
+          return
+        }
+      })
+
+      if (!isIn) {
+        newOrder.push(option)
+      }
+    })
+
+    return newOrder
+  }
 }

package/src/{vue/slimselect.vue → slim-select/vue.vue}

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue'
-
 import SlimSelect, { Config, Events } from '../slim-select'
 import { SettingsPartial } from '../slim-select/settings'
 import { DataArrayPartial, Option } from '../slim-select/store'
@@ -9,31 +8,34 @@ export default defineComponent({
   name: 'SlimSelect',
   props: {
     modelValue: {
-      type: [String, Array, undefined] as PropType<string | string[] | undefined>,
+      type: [String, Array, undefined] as PropType<string | string[] | undefined>
     },
     multiple: {
       type: Boolean,
-      default: false,
+      default: false
     },
     data: {
-      type: Array as PropType<DataArrayPartial>,
+      type: Array as PropType<DataArrayPartial>
     },
     settings: {
-      type: Object as PropType<SettingsPartial>,
+      type: Object as PropType<SettingsPartial>
     },
     events: {
       type: Object as PropType<Events>,
-    },
+      default: () => {
+        return {}
+      }
+    }
   },
   emits: ['update:modelValue'],
   data() {
     return {
-      slim: null as SlimSelect | null,
+      slim: null as SlimSelect | null
     }
   },
   mounted() {
     let config = {
-      select: this.$refs.slim,
+      select: this.$refs.slim
     } as Config
 
     // If data is passed in, use it
@@ -47,12 +49,12 @@ export default defineComponent({
     }
 
     // If events are passed in, use it
-    config.events = this.events || {}
+    config.events = (this.events || {}) as Events
 
     // Wrap config.events.afterChange to run value update
     const ogAfterChange = config.events.afterChange
     config.events.afterChange = (newVal: Option[]) => {
-      const value = this.multiple ? newVal.map((option) => option.value) : newVal.length > 0 ? newVal[0].value : '';
+      const value = this.multiple ? newVal.map((option) => option.value) : newVal.length > 0 ? newVal[0].value : ''
 
       // Check if value is different from modelValue
       if (this.value !== value) {
@@ -88,7 +90,7 @@ export default defineComponent({
         // Set the value of the select to the newVal
         this.slim?.setSelected(this.getCleanValue(newVal))
       },
-      immediate: true,
+      immediate: true
     },
     data: {
       handler: function (newData) {
@@ -96,8 +98,8 @@ export default defineComponent({
           this.slim.setData(newData)
         }
       },
-      deep: true,
-    },
+      deep: true
+    }
   },
   computed: {
     value: {
@@ -106,8 +108,8 @@ export default defineComponent({
       },
       set(value: string | string[]) {
         this.$emit('update:modelValue', value)
-      },
-    },
+      }
+    }
   },
   methods: {
     // This allows via a ref to call the SlimSelect methods
@@ -128,8 +130,8 @@ export default defineComponent({
       }
 
       return multi ? [] : ''
-    },
-  },
+    }
+  }
 })
 </script>
 

package/tsconfig.json

@@ -17,9 +17,8 @@
     "importHelpers": true,
     "lib": ["esnext", "dom"],
     "paths": {
-      "slim-select": ["src/slim-select"],
-      "@slim-select/vue": ["src/vue"]
+      "slim-select": ["src/slim-select"]
     }
   },
-  "include": ["dist/", "src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "src/react/src/index.tsx"]
+  "include": ["dist/", "src/**/*.ts", "src/**/*.d.ts"]
 }

package/src/react/.eslintignore

@@ -1,2 +0,0 @@
-node_modules
-dist

package/src/react/.eslintrc.cjs

@@ -1,24 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true, node: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-    'plugin:react/recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  plugins: ['prettier', 'react-refresh'],
-  rules: {
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn',
-    '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/ban-ts-comment': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-extra-semi': 'off',
-    '@typescript-eslint/no-unused-vars': 'off',
-    '@typescript-eslint/no-invalid-void-type': 'off',
-  },
-}

package/src/react/index.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Slim Select React</title>
-  </head>
-  <body>
-    <div id="react-root">
-      <div id="react-hide"></div>
-    </div>
-    <script type="module" src="/src/frameworkpage.tsx"></script>
-  </body>
-</html>

package/src/react/jestconfig.json

@@ -1,11 +0,0 @@
-{
-  "transform": {
-    "^.+\\.(t|j)sx?$": "ts-jest"
-  },
-  "testRegex": "(/tests/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
-  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
-  "testEnvironment": "jsdom",
-  "moduleNameMapper": {
-    "\\.(css|scss)$": "identity-obj-proxy"
-  }
-}

package/src/react/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "@slim-select/react",
-  "private": false,
-  "description": "React integration",
-  "version": "1.0.0",
-  "keywords": [
-    "react"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/brianvoe/slim-select.git"
-  },
-  "author": "Brian Voelker <brian@webiswhatido.com> (http://webiswhatido.com)",
-  "homepage": "https://slimselectjs.com/frameworks#vue",
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "test": "jest --config jestconfig.json",
-    "build:cjs": "tsc --module commonjs --outDir dist/cjs"
-  },
-  "main": "dist/slimselectreact.ssr.js",
-  "browser": "dist/slimselect.global.js",
-  "module": "dist/slimselectreact.es.js",
-  "types": "dist/slimselect.react.d.ts",
-  "files": [
-    "dist"
-  ]
-}

package/src/react/src/frameworkpage.tsx

@@ -1,133 +0,0 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { SlimSelect } from '.'
-import { useState } from 'react'
-
-const ShowComponent = () => {
-  const [simpleSingle, setSimpleSingle] = useState('2')
-  const [simpleMultiple, setSimpleMultiple] = useState(['2', '3'])
-
-  return (
-    <div id="react" className="content">
-      <h2 className="header">React</h2>
-      <h3>Install</h3>
-      <p>
-        The react component is in a sub package under SlimSelect. All functionality still work in the implementation.
-      </p>
-      <div className="code-toolbar">
-        <pre className="language-bash">
-          <code>npm install @slim-select/react</code>
-        </pre>
-      </div>
-      <br />
-      <h3>Simple example</h3>
-      <div style={{ display: 'flex', flexDirection: 'row', width: '100%' }}>
-        <div style={{ flex: 0.5 }}>
-          <strong>Value</strong> {simpleSingle}
-          <SlimSelect
-            modelValue={simpleSingle}
-            events={{ afterChange: (values) => setSimpleSingle(values[0].value as unknown as string) }}
-            style={{ marginLeft: '5px' }}
-            ref={null}
-          >
-            <option value="all">All</option>
-            <option value={'1'}>Option 1</option>
-            <option value={'2'}>Option 2</option>
-            <option value={'3'}>Option 3</option>
-          </SlimSelect>
-        </div>
-        <div style={{ flex: 0.6, marginLeft: 15 }}>
-          <div>
-            <strong>Value</strong> {JSON.stringify(simpleMultiple)}
-          </div>
-          <SlimSelect
-            modelValue={simpleMultiple}
-            ref={null}
-            multiple={true}
-            events={{ afterChange: (values) => setSimpleMultiple(values.map((v) => v.value) as unknown as string[]) }}
-          >
-            <option value={'1'}>Option 1</option>
-            <option value={'2'}>Option 2</option>
-            <option value={'3'}>Value 3</option>
-          </SlimSelect>
-        </div>
-      </div>
-      <div className="code-toolbar">
-        <pre className="language-javascript">
-          <code className="language-javascript">
-            import React from &quot;react&quot; <br />
-            import SlimSelect from &quot;@slim-select/react&quot; <br />
-            import {`{`} useState {`}`} from &quot;react&quot;
-            <br />
-            <br />
-            export default MySelect = () {`=>`} {`{`}
-            <br />
-            const [simpleSingle, setSimpleSingle] = useState(&quot;2&quot;) <br />
-            return ( <br />
-            &lt;SlimSelect <br />
-            modelValue= {`{`}simpleSingle{`}`}
-            <br />
-            events={`{{ afterChange: (values) => setSimpleSingle(values[0].value as unknown as string) }}`}
-            &gt; <br />
-            &lt;option value=&quot;all&quot;&gt;All&lt;/option&gt; <br />
-            &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt; <br />
-            &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt; <br />
-            &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt; <br />
-            &lt;/SlimSelect&gt; <br /> ){`}`}
-          </code>
-        </pre>
-      </div>
-
-      <br />
-      <div className="separator"></div>
-      <br />
-
-      <h3>Attributes</h3>
-      <p>There are certain attributes that are reactive to changes</p>
-
-      <h4>disabled</h4>
-      <SlimSelect settings={{ disabled: true }}>
-        <option value={'1'}>Option 1</option>
-        <option value={'2'}>Option 2</option>
-        <option value={'3'}>Value 3</option>
-      </SlimSelect>
-      <div className="code-toolbar">
-        <pre className="language-javascript">
-          <code className="language-javascript">
-            import React from &quot;react&quot; <br />
-            import SlimSelect from &quot;@slim-select/react&quot; <br />
-            import {`{`} useState {`}`} from &quot;react&quot;
-            <br />
-            <br />
-            export default MySelect = () {`=>`} {`{`}
-            <br />
-            const [simpleSingle, setSimpleSingle] = useState(&quot;2&quot;) <br />
-            return ( <br />
-            &lt;SlimSelect <br />
-            settings={`{`}
-            {`{`}disabled: true {`}`}
-            {`}`}&gt;
-            <br />
-            &lt;option value=&quot;all&quot;&gt;All&lt;/option&gt; <br />
-            &lt;option value=&quot;1&quot;&gt;Option 1&lt;/option&gt; <br />
-            &lt;option value=&quot;2&quot;&gt;Option 2&lt;/option&gt; <br />
-            &lt;option value=&quot;3&quot;&gt;Option 3&lt;/option&gt; <br />
-            &lt;/SlimSelect&gt; <br /> ){`}`}
-          </code>
-        </pre>
-      </div>
-    </div>
-  )
-}
-const timeout = document.getElementById('app') ? 100 : 0
-;(function () {
-  const interval = window.setInterval(() => {
-    if (document.getElementById('react-root') != null && document.getElementById('react-hide') != null) {
-      ReactDOM.createRoot(document.getElementById('react-root') as HTMLElement).render(
-        <React.StrictMode>
-          <ShowComponent />
-        </React.StrictMode>,
-      )
-    }
-  }, timeout)
-})()

package/src/react/src/index.ts

@@ -1,3 +0,0 @@
-import SlimSelect, { SlimSelectProps, SlimSelectRef } from './slimselect'
-export { SlimSelect }
-export type { SlimSelectProps, SlimSelectRef }

package/src/react/src/slimselect.tsx

@@ -1,148 +0,0 @@
-import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react'
-import { useEffect } from 'react'
-
-import SlimSelect, { Events, Config } from '../../slim-select'
-import { SettingsPartial } from '../../slim-select/settings'
-import { DataArrayPartial, Option } from '../../slim-select/store'
-import '../../slim-select/slimselect.scss'
-
-export type SlimSelectProps = {
-  style?: React.CSSProperties
-  id?: string | undefined
-  modelValue?: string | string[] | undefined
-  multiple?: boolean
-  data?: DataArrayPartial
-  settings?: SettingsPartial
-  events?: Events
-  children?: React.ReactNode
-}
-export interface SlimSelectRef {
-  set: (newValue: string | string[]) => void
-  // Potentially call other functions on SlimSelect that have not been exposed via Ref yet
-  getSlimSelectInstance: () => SlimSelect
-}
-
-const SlimSelectComponent = (props: SlimSelectProps, ref: React.Ref<any>): JSX.Element => {
-  const { id = undefined, modelValue, style = {}, multiple = false, data, settings, events, children } = props
-
-  const slimHTMLElement = useRef(null)
-  const slimSelect = useRef<SlimSelect>()
-  const value = useRef<any>()
-
-  useEffect(() => {
-    const config = {
-      select: slimHTMLElement.current as unknown as Element,
-      events: {},
-    } as Config
-
-    // If data is passed in, use it
-    if (data) {
-      config.data = data
-    }
-    // If settings are passed in, use it
-    if (settings) {
-      config.settings = settings
-    }
-    // If events are passed in, use it
-    if (events) {
-      config.events = events
-    }
-    // Satisfy tsc
-    if (config.events == undefined) {
-      config.events = {}
-    }
-
-    // Wrap config.events.afterChange to run value update
-    const originalPropAfterChange = config.events.afterChange
-
-    config.events.afterChange = function (newSelectedOption: Option[]): void {
-      if (Array.isArray(newSelectedOption) && newSelectedOption.length > 0) {
-        const stringValue = multiple ? newSelectedOption.map((option) => option.value) : newSelectedOption[0].value
-        if (value.current !== stringValue) {
-          value.current = stringValue
-        }
-        // If they had an original afterChange, run it
-        if (config.events && originalPropAfterChange && typeof originalPropAfterChange === 'function') {
-          originalPropAfterChange(newSelectedOption)
-        }
-      }
-    }
-
-    // Initialize SlimSelect
-    slimSelect.current = new SlimSelect(config)
-
-    // Get SlimSelect selected values
-    const selected = multiple
-      ? (slimSelect.current as SlimSelect).getSelected()
-      : (slimSelect.current as SlimSelect).getSelected()[0]
-
-    // Check if modelValue is the same as the value of the select
-    if (selected !== modelValue && modelValue) {
-      // If not, set the value of the select to the modelValue
-      ;(slimSelect.current as SlimSelect).setSelected(modelValue)
-    }
-
-    // Destroy SlimSelect on unmount
-    return () => {
-      if (slimSelect.current) {
-        ;(slimSelect.current as SlimSelect)?.destroy()
-      }
-    }
-  }, [modelValue, multiple, data, settings, events, children])
-
-  const getCleanValue = useCallback(
-    (val: string | string[] | undefined): string | string[] => {
-      const multi = multiple
-
-      // If its multiple and the modelValue is a string, return an array with the string
-      if (typeof val === 'string') {
-        return multi ? [val] : val
-      }
-
-      // If its not multiple and the modelValue is an array, return the first item
-      if (Array.isArray(val)) {
-        return multi ? val : val[0]
-      }
-
-      return multi ? [] : ''
-    },
-    [multiple],
-  )
-
-  useEffect(() => {
-    if (modelValue) {
-      ;(slimSelect.current as SlimSelect)?.setSelected(getCleanValue(modelValue))
-    }
-  }, [modelValue, getCleanValue])
-
-  useEffect(() => {
-    if (data) {
-      ;(slimSelect.current as SlimSelect)?.setData(data)
-    }
-  }, [data])
-
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        set(newValue: string | string[]): void {
-          ;(slimSelect.current as SlimSelect)?.setSelected(newValue)
-        },
-        getSlimSelectInstance(): SlimSelect {
-          return slimSelect.current as SlimSelect
-        },
-      } as SlimSelectRef
-    },
-    [],
-  )
-
-  return (
-    <>
-      <select style={style} id={id} data-testid={id} multiple={multiple} ref={slimHTMLElement}>
-        {children}
-      </select>
-    </>
-  )
-}
-
-export default forwardRef(SlimSelectComponent)