Merge pull request #664 from kilianc/master

feat: add support for space separated cssClasses in settings

Author: brianvoe

src/docs/pages/settings/classes.vue

@@ -49,14 +49,14 @@ export default defineComponent({
   <div id="cssClasses" class="content">
     <h2 class="header">cssClasses</h2>
     <p>
-      The cssClasses setting allows you to override SlimSelect's default CSS classes with your own custom classes. This
-      gives you complete control over the styling of different parts of the dropdown, enabling you to match your
-      application's design system perfectly.
+      The cssClasses setting allows you to add custom CSS classes to SlimSelect's default classes. Your custom classes
+      are appended to the default SlimSelect classes (like 'ss-main', 'ss-option', etc.), giving you the ability to add
+      additional styling without breaking SlimSelect's core functionality.
     </p>
     <p>
-      You can customize classes for various elements like options, the main container, search input, and more. This is
-      particularly useful when you need to apply specific styling that integrates seamlessly with your existing CSS
-      framework or design requirements.
+      You can add classes to various elements like options, the main container, search input, and more. The default
+      classes are always preserved to ensure proper functionality, while your custom classes provide additional styling
+      hooks. This allows you to integrate seamlessly with CSS frameworks like Tailwind CSS or your own design system.
     </p>
 
     <div class="row">
@@ -87,7 +87,8 @@ export default defineComponent({
         new SlimSelect({
           select: '#primary-select',
           cssClasses: {
-            option: "primary-option" 
+            option: "primary-option" // Appended to 'ss-option', resulting in class="ss-option primary-option"
+          }
         })
       </pre>
     </ShikiStyle>

src/slim-select/classes.test.ts

@@ -59,10 +59,10 @@ describe('CssClasses module', () => {
     })
   })
 
-  test('classes can be overwritten via the constructor', () => {
+  test('classes can be added via the constructor', () => {
     const classesWithOverride = JSON.parse(JSON.stringify(defaultClasses))
-    classesWithOverride['main'] = 'new-main'
-    classesWithOverride['mainOpen'] = 'new-open'
+    classesWithOverride['main'] = 'ss-main new-main'
+    classesWithOverride['mainOpen'] = 'ss-open new-open'
 
     // Convert to unknown and then to custom object to prevent TS from throwing errors
     const classes = new CssClasses({ main: 'new-main', mainOpen: 'new-open' }) as unknown as { [key: string]: string }

src/slim-select/classes.ts

@@ -65,47 +65,53 @@ export default class CssClasses {
       classes = {}
     }
 
-    this.main = classes.main || 'ss-main'
-    this.placeholder = classes.placeholder || 'ss-placeholder'
-    this.values = classes.values || 'ss-values'
-    this.single = classes.single || 'ss-single'
-    this.max = classes.max || 'ss-max'
-    this.value = classes.value || 'ss-value'
-    this.valueText = classes.valueText || 'ss-value-text'
-    this.valueDelete = classes.valueDelete || 'ss-value-delete'
-    this.valueOut = classes.valueOut || 'ss-value-out'
+    let join = (a = '', b = '') => `${a} ${b}`.trim()
 
-    this.deselect = classes.deselect || 'ss-deselect'
+    this.main = join('ss-main', classes.main)
+    this.placeholder = join('ss-placeholder', classes.placeholder)
+    this.values = join('ss-values', classes.values)
+    this.single = join('ss-single', classes.single)
+    this.max = join('ss-max', classes.max)
+    this.value = join('ss-value', classes.value)
+    this.valueText = join('ss-value-text', classes.valueText)
+    this.valueDelete = join('ss-value-delete', classes.valueDelete)
+    this.valueOut = join('ss-value-out', classes.valueOut)
+
+    this.deselect = join('ss-deselect', classes.deselect)
     this.deselectPath = classes.deselectPath || 'M10,10 L90,90 M10,90 L90,10'
-    this.arrow = classes.arrow || 'ss-arrow'
+    this.arrow = join('ss-arrow', classes.arrow)
     this.arrowClose = classes.arrowClose || 'M10,30 L50,70 L90,30'
     this.arrowOpen = classes.arrowOpen || 'M10,70 L50,30 L90,70'
-    this.content = classes.content || 'ss-content'
-    this.contentOpen = classes.contentOpen || 'ss-open'
-    this.dirAbove = classes.dirAbove || 'ss-dir-above'
-    this.dirBelow = classes.dirBelow || 'ss-dir-below'
-    this.search = classes.search || 'ss-search'
-    this.searchHighlighter = classes.searchHighlighter || 'ss-search-highlight'
-    this.searching = classes.searching || 'ss-searching'
-    this.addable = classes.addable || 'ss-addable'
+    this.content = join('ss-content', classes.content)
+    this.contentOpen = join('ss-open', classes.contentOpen)
+    this.dirAbove = join('ss-dir-above', classes.dirAbove)
+    this.dirBelow = join('ss-dir-below', classes.dirBelow)
+    this.search = join('ss-search', classes.search)
+    this.searchHighlighter = join('ss-search-highlight', classes.searchHighlighter)
+    this.searching = join('ss-searching', classes.searching)
+    this.addable = join('ss-addable', classes.addable)
     this.addablePath = classes.addablePath || 'M50,10 L50,90 M10,50 L90,50'
-    this.list = classes.list || 'ss-list'
-    this.optgroup = classes.optgroup || 'ss-optgroup'
-    this.optgroupLabel = classes.optgroupLabel || 'ss-optgroup-label'
-    this.optgroupLabelText = classes.optgroupLabelText || 'ss-optgroup-label-text'
-    this.optgroupActions = classes.optgroupActions || 'ss-optgroup-actions'
-    this.optgroupSelectAll = classes.optgroupSelectAll || 'ss-selectall'
+    this.list = join('ss-list', classes.list)
+    this.optgroup = join('ss-optgroup', classes.optgroup)
+    this.optgroupLabel = join('ss-optgroup-label', classes.optgroupLabel)
+    this.optgroupLabelText = join('ss-optgroup-label-text', classes.optgroupLabelText)
+    this.optgroupActions = join('ss-optgroup-actions', classes.optgroupActions)
+    this.optgroupSelectAll = join('ss-selectall', classes.optgroupSelectAll)
     this.optgroupSelectAllBox = classes.optgroupSelectAllBox || 'M60,10 L10,10 L10,90 L90,90 L90,50'
     this.optgroupSelectAllCheck = classes.optgroupSelectAllCheck || 'M30,45 L50,70 L90,10'
-    this.optgroupClosable = classes.optgroupClosable || 'ss-closable'
-    this.option = classes.option || 'ss-option'
+    this.optgroupClosable = join('ss-closable', classes.optgroupClosable)
+    this.option = join('ss-option', classes.option)
     this.optionDelete = classes.optionDelete || 'M10,10 L90,90 M10,90 L90,10'
-    this.highlighted = classes.highlighted || 'ss-highlighted'
-    this.mainOpen = classes.mainOpen || 'ss-open'
-    this.close = classes.close || 'ss-close'
-    this.selected = classes.selected || 'ss-selected'
-    this.error = classes.error || 'ss-error'
-    this.disabled = classes.disabled || 'ss-disabled'
-    this.hide = classes.hide || 'ss-hide'
+    this.highlighted = join('ss-highlighted', classes.highlighted)
+    this.mainOpen = join('ss-open', classes.mainOpen)
+    this.close = join('ss-close', classes.close)
+    this.selected = join('ss-selected', classes.selected)
+    this.error = join('ss-error', classes.error)
+    this.disabled = join('ss-disabled', classes.disabled)
+    this.hide = join('ss-hide', classes.hide)
+  }
+
+  public getFirst(name: keyof Omit<CssClasses, 'getFirst'>): string {
+    return this[name].split(' ')[0]
   }
 }

src/slim-select/index.test.ts

@@ -1300,4 +1300,23 @@ describe('SlimSelect Module', () => {
       slim.destroy()
     })
   })
+
+  describe('cssClasses with space-separated strings', () => {
+    test('space-separated cssClasses are applied as individual classes', () => {
+      document.body.innerHTML = '<select id="test"><option>Test</option></select>'
+
+      const slim = new SlimSelect({
+        select: '#test',
+        cssClasses: {
+          main: 'class1 class2'
+        }
+      })
+
+      expect(slim.render.main.main.classList.contains('ss-main')).toBe(true)
+      expect(slim.render.main.main.classList.contains('class1')).toBe(true)
+      expect(slim.render.main.main.classList.contains('class2')).toBe(true)
+
+      slim.destroy()
+    })
+  })
 })