slim-select 2.0.2 → 2.2.0

package/src/slim-select/slimselect.scss

@@ -7,6 +7,7 @@
   --ss-disabled-color: #8a8a8a;
   --ss-border-color: #dcdee2;
   --ss-highlight-color: #fffb8c;
+  --ss-success-color: #00b755;
   --ss-error-color: #dc3545;
 
   // Heights
@@ -334,9 +335,117 @@
     }
 
     .ss-optgroup {
+      // If optgroup is open, show the options
+      &.ss-open {
+        .ss-option {
+        }
+      }
+
+      // If optgroup has close, hide all options
+      &.ss-close {
+        .ss-option {
+          display: none !important;
+        }
+      }
+
       .ss-optgroup-label {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
         padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
-        font-weight: bold;
+
+        .ss-optgroup-label-text {
+          flex: 1 1 auto;
+          font-weight: bold;
+          color: var(--ss-font-color);
+        }
+
+        // If optgroup has arrow, make label clickable
+        &:has(.ss-arrow) {
+          cursor: pointer;
+        }
+
+        .ss-optgroup-actions {
+          flex: 0 1 auto;
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          justify-content: center;
+          gap: var(--ss-spacing-m);
+
+          .ss-selectall {
+            flex: 0 0 auto;
+            display: flex;
+            flex-direction: row;
+            cursor: pointer;
+
+            &:hover {
+              opacity: 0.5;
+            }
+
+            &.ss-selected {
+              svg {
+                path {
+                  stroke: var(--ss-error-color);
+                }
+              }
+            }
+
+            span {
+              flex: 0 1 auto;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              font-size: calc(100% * 0.6);
+              text-align: center;
+              padding: 0 var(--ss-spacing-s) 0 0;
+            }
+
+            svg {
+              flex: 0 1 auto;
+              width: 13px;
+              height: 13px;
+
+              path {
+                fill: none;
+                stroke: var(--ss-success-color);
+                stroke-linecap: round;
+                stroke-linejoin: round;
+              }
+
+              &:first-child {
+                stroke-width: 5;
+              }
+              &:last-child {
+                stroke-width: 11;
+              }
+            }
+          }
+
+          .ss-closable {
+            flex: 0 1 auto;
+            display: flex;
+            flex-direction: row;
+            cursor: pointer;
+
+            .ss-arrow {
+              flex: 1 1 auto;
+              width: 10px;
+              height: 10px;
+
+              path {
+                fill: none;
+                stroke: var(--ss-font-color);
+                stroke-width: 18;
+                stroke-linecap: round;
+                stroke-linejoin: round;
+                transition-timing-function: ease-out;
+                transition: var(--ss-animation-timing);
+              }
+            }
+          }
+        }
       }
 
       .ss-option {
@@ -344,16 +453,8 @@
       }
     }
 
-    .ss-optgroup-selectable {
-      cursor: pointer;
-
-      &:hover {
-        color: var(--ss-bg-color);
-        background-color: var(--ss-primary-color);
-      }
-    }
-
     .ss-option {
+      display: flex;
       padding: var(--ss-spacing-m) var(--ss-spacing-l) var(--ss-spacing-m) var(--ss-spacing-l);
       cursor: pointer;
       user-select: none;
@@ -370,7 +471,7 @@
         background-color: var(--ss-bg-color);
       }
 
-      &:not(.ss-disabled).ss-option-selected {
+      &:not(.ss-disabled).ss-selected {
         color: var(--ss-font-color);
         background-color: var(--ss-highlight-color);
       }

package/src/slim-select/store.ts

@@ -11,17 +11,23 @@ type selectType = 'single' | 'multiple'
 export interface OptgroupOptional {
   id?: string
   label: string // Required
+  selectAll?: boolean
+  closable?: 'off' | 'open' | 'close'
   options?: OptionOptional[]
 }
 
 export class Optgroup {
   public id: string
   public label: string
+  public selectAll: boolean
+  public closable: 'off' | 'open' | 'close'
   public options: Option[]
 
   constructor(optgroup: OptgroupOptional) {
     this.id = !optgroup.id || optgroup.id === '' ? generateID() : optgroup.id
     this.label = optgroup.label || ''
+    this.selectAll = optgroup.selectAll === undefined ? false : optgroup.selectAll
+    this.closable = optgroup.closable || 'off'
 
     // If options exist, loop through options and create new option class
     // and set the options to the optgroup options field
@@ -255,6 +261,18 @@ export default class Store {
     return selectedIDs
   }
 
+  public getOptgroupByID(id: string): Optgroup | null {
+    // Loop through each data object
+    // and if optgroup is found, return it
+    for (let dataObj of this.data) {
+      if (dataObj instanceof Optgroup && dataObj.id === id) {
+        return dataObj
+      }
+    }
+
+    return null
+  }
+
   public getOptionByID(id: string): Option | null {
     let options = this.filter((opt: Option) => {
       return opt.id === id
@@ -302,7 +320,7 @@ export default class Store {
           })
 
           if (optOptions.length > 0) {
-            dataSearch.push(new Optgroup({ id: dataObj.id, label: dataObj.label, options: optOptions }))
+            dataSearch.push(new Optgroup(dataObj))
           }
         }
       }

package/src/vue/README.md

@@ -0,0 +1,48 @@
+# Slim Select Vue
+
+## slimselectjs.com
+
+Vue integration for the SlimSelect
+
+See the website for the best details on how to use the vue integration
+
+[![NPM Downloads](https://img.shields.io/npm/dt/@slim-select/vue)](https://www.npmjs.com/package/@slim-select/vue)
+
+## Support
+
+[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/brianvoe)
+
+<a href="https://www.buymeacoffee.com/brianvoe" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
+
+## Installation
+
+```bash
+npm install @slim-select/vue
+```
+
+## Usage
+
+```javascript
+import { defineComponent } from 'vue'
+import SlimSelect from '@slim-select/vue'
+
+export default defineComponent({
+  components: {
+    SlimSelect,
+  },
+})
+```
+
+```html
+<SlimSelect>
+  <option value="1">Option 1</option>
+  <option value="2">Option 2</option>
+  <option value="3">Option 3</option>
+</SlimSelect>
+
+<SlimSelect multiple>
+  <option value="1">Option 1</option>
+  <option value="2">Option 2</option>
+  <option value="3">Option 3</option>
+</SlimSelect>
+```