@dataloop-ai/components 0.18.133 → 0.18.135

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.18.133",
+  "version": "0.18.135",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlOptionGroup/DlOptionGroup.vue

@@ -128,7 +128,8 @@ export default defineComponent({
                         : 'flex-end',
                 '--option-group-width':
                     this.leftLabel && !this.inline ? '100%' : 'auto',
-                '--option-group-max-width': this.maxWidth
+                '--option-group-max-width': this.maxWidth,
+                '--option-group-gap': this.isInMenu ? '0px' : '10px'
             }
         }
     },
@@ -175,7 +176,7 @@ export default defineComponent({
 }
 .option-group-wrapper.column {
     flex-direction: column;
-    gap: 10px;
+    gap: var(--option-group-gap);
 }
 
 .option {

package/src/components/compound/DlSelect/DlSelect.vue

@@ -439,14 +439,6 @@ export default defineComponent({
             emit('change', val)
             emit('selected', val)
         }
-        const handleSelectedItem = (value: any) => {
-            selectedIndex.value = props.options.findIndex(
-                (option: string | Record<string, string | number> | number) =>
-                    isEqual(option as any, value)
-            )
-
-            handleModelValueUpdate(value)
-        }
 
         return {
             uuid: `dl-select-${v4()}`,
@@ -456,7 +448,6 @@ export default defineComponent({
             highlightedIndex,
             selectedIndex,
             setHighlightedIndex,
-            handleSelectedItem,
             handleModelValueUpdate,
             searchTerm, // todo: merge this sometime
             searchInputValue
@@ -743,6 +734,9 @@ export default defineComponent({
                     isEqual(option, this.modelValue)
             )
         },
+        handleSelectedItem(value: DlSelectOptionType) {
+            this.selectOption(value)
+        },
         getOptionValue(option: any) {
             return option?.value ?? option
         },
@@ -796,20 +790,11 @@ export default defineComponent({
             this.selectedIndex = -1
             this.closeMenu()
         },
-        selectOption(selected: any) {
+        selectOption(selectedOption: DlSelectOptionType) {
             if (this.multiselect) {
                 return
             }
 
-            this.selectedIndex = this.options.findIndex(
-                (el: string | Record<string, string | number> | number) =>
-                    isEqual(el, selected)
-            )
-            const selectedOption =
-                this.selectedIndex === -1
-                    ? undefined
-                    : this.options[this.selectedIndex]
-
             if (this.searchable) {
                 const searchInput = this.$refs.searchInput as HTMLInputElement
                 searchInput.value =

package/src/demos/DlOptionGroupDemo.vue

@@ -29,17 +29,15 @@
         />
 
         <h1>in menu : The chosen options are {{ switchValue }}</h1>
-        <dl-button
-            label="Menu"
-            @click="$refs.menu.show()"
-        >
+        <dl-button label="Menu">
             <dl-menu
                 ref="menu"
-                fit-container
+                fit-content
             >
                 <dl-option-group
                     v-model="switchValue"
-                    type="checkbox"
+                    left-label
+                    type="switch"
                     :options="options"
                 />
             </dl-menu>