@dataloop-ai/components 0.18.111 → 0.18.112

package/package.json

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

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

@@ -133,6 +133,14 @@
                         }`
                     ]"
                 >
+                    <dl-icon
+                        v-if="clearable && hasSelection"
+                        class=".dl-select__clear-button"
+                        icon="icon-dl-close"
+                        :size="withoutBorders ? '10px' : '12px'"
+                        style="margin-right: 3px; cursor: pointer"
+                        @click.prevent.stop="clearSelection"
+                    />
                     <dl-icon
                         :icon="dropdownIcon"
                         :color="chevronIconColor"
@@ -388,7 +396,7 @@ export default defineComponent({
         },
         capitalizedOptions: { type: Boolean, default: false },
         withoutDropdownIconPadding: { type: Boolean, default: false },
-        clearButtonTooltip: { type: Boolean, default: false },
+        clearable: { type: Boolean, default: false },
         dropdownMaxHeight: { type: String, default: '30vh' },
         preserveSearch: { type: Boolean, default: false },
         disabledTooltip: { type: String, default: 'Disabled' },
@@ -455,6 +463,9 @@ export default defineComponent({
         }
     },
     computed: {
+        hasSelection(): boolean {
+            return !!this.modelValueLength || this.selectedIndex !== -1
+        },
         filteredOptions(): DlSelectOptionType[] {
             if (this.customFilter || this.searchTerm === '') {
                 return this.options
@@ -778,6 +789,13 @@ export default defineComponent({
             this.$emit('change', toEmit)
         },
         clearSelection(): void {
+            let toEmit: any[] | string = []
+            if (this.isModelValuePrimitiveType) {
+                toEmit = ''
+            }
+
+            this.$emit('update:model-value', toEmit)
+            this.$emit('change', toEmit)
             this.selectedIndex = -1
             this.closeMenu()
         },

package/src/components/compound/DlTable/DlTable.vue

@@ -241,6 +241,7 @@
                                         />
                                     </slot>
                                 </td>
+                                <!-- todo wrap this with dltd -->
                                 <slot
                                     v-for="col in computedCols"
                                     v-bind="

package/src/demos/DlSelectDemo.vue

@@ -161,6 +161,13 @@
             multiselect
             searchable
         />
+        <dl-select
+            v-model="selectedWithChildrenSearch"
+            :options="treeOptions"
+            size="m"
+            multiselect
+            clearable
+        />
         Capitalized options
         <dl-select
             v-model="selectedWithChildrenCapitalized"
@@ -383,6 +390,42 @@
                 </div>
             </template>
         </dl-select>
+
+        Select clearable
+        <dl-select
+            v-model="selectedOption"
+            :options="[
+                {
+                    subLabel: 'not so high',
+                    label: 'High',
+                    value: 'high',
+                    bgColor: 'dl-color-negative'
+                },
+                {
+                    subLabel: 'not so medium',
+                    label: 'Medium',
+                    value: 'medium',
+                    bgColor: 'dl-color-warning',
+                    textColor: 'dl-color-darker'
+                },
+                {
+                    subLabel: 'not so low',
+                    label: 'Low',
+                    value: 'low',
+                    bgColor: 'dl-color-positive',
+                    textColor: 'dl-color-darker'
+                }
+            ]"
+            clearable
+            style="margin-bottom: 150px"
+        >
+            <template #option="scope">
+                <div style="padding: 5px 0px">
+                    <div>{{ scope.opt.label }}</div>
+                    <div>{{ scope.opt.subLabel }}</div>
+                </div>
+            </template>
+        </dl-select>
     </div>
 </template>