Merge pull request #9 from afonja14755/selected-items

feat: html name attr for search input

Author: afonja14755

dist/css/ux-select.css

@@ -1,6 +1,6 @@
 {
   "name": "ux-select",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "UX Select is a lightweight Native JavaScript plugin that replace native select elements with customization",
   "keywords": [
     "web",

dist/js/ux-select.es.js

@@ -132,6 +132,8 @@
     user-select: none;
     flex-grow: 1;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__clear {

dist/js/ux-select.es.js.map

@@ -1,6 +1,8 @@
 export type UxSelectParams = {
   isSearchable?: boolean
   isSearchFocus?: boolean
+  searchName?: string
+  isDisplaySelectedItems?: boolean
   isGroupOptions?: boolean
   hideOnClear?: boolean
   hideOnSelect?: boolean
@@ -44,6 +46,8 @@ export type UxSelectConfig = Pick<
   UxSelectParams,
   | 'isSearchable'
   | 'isSearchFocus'
+  | 'searchName'
+  | 'isDisplaySelectedItems'
   | 'isGroupOptions'
   | 'hideOnClear'
   | 'hideOnSelect'

dist/js/ux-select.iife.js

@@ -45,6 +45,14 @@ export default class UxSelect {
         this.el.dataset.isSearchFocus !== undefined
           ? this.el.dataset.isSearchFocus === 'true'
           : (params.isSearchFocus ?? false),
+      searchName:
+        this.el.dataset.searchName !== undefined
+          ? this.el.dataset.searchName
+          : (params.searchName ?? ''),
+      isDisplaySelectedItems:
+        this.el.dataset.isDisplaySelectedItems !== undefined
+          ? this.el.dataset.isDisplaySelectedItems === 'true'
+          : (params.isDisplaySelectedItems ?? false),
       isGroupOptions:
         this.el.dataset.isGroupOptions !== undefined
           ? this.el.dataset.isGroupOptions === 'true'
@@ -175,7 +183,9 @@ export default class UxSelect {
       if (selectedTexts.length === 1) {
         selectTitle.textContent = selectedTexts[0]
       } else if (this.state.multiple) {
-        selectTitle.textContent = `${this.localization.selectedText} ${selectedTexts.length}`
+        selectTitle.textContent = this.config.isDisplaySelectedItems
+          ? selectedTexts.join(', ')
+          : `${this.localization.selectedText} ${selectedTexts.length}`
       }
       this.uxEl.classList.add('-filled')
     } else {
@@ -376,7 +386,7 @@ export default class UxSelect {
 
       const selectSearch = document.createElement('input')
       selectSearch.type = 'search'
-      selectSearch.name = 'ux-select-search'
+      if (this.config.searchName) selectSearch.name = this.config.searchName
       selectSearch.classList.add('ux-select-search__input')
       selectSearch.placeholder = this.localization.searchText
       this.uxSearchInput = selectSearch