@dataloop-ai/components 0.17.82 → 0.17.84

package/package.json

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

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

@@ -26,6 +26,7 @@
             <span v-show="!!tooltip.length">
                 <dl-icon
                     icon="icon-dl-info"
+                    :inline="false"
                     class="tooltip-icon"
                     size="12px"
                 />
@@ -82,6 +83,9 @@
                     @focus="handleSearchFocus"
                     @blur="handleSearchBlur"
                 >
+                <dl-tooltip v-if="disabled">
+                    {{ disabledTooltip }}
+                </dl-tooltip>
                 <div
                     v-if="hasSelectedSlot"
                     style="width: 100%"
@@ -129,6 +133,7 @@
                 >
                     <dl-icon
                         :icon="dropdownIcon"
+                        :color="chevronIconColor"
                         class="expand-icon"
                         :inline="false"
                         :size="withoutBorders ? '12px' : '16px'"
@@ -391,7 +396,8 @@ export default defineComponent({
         withoutDropdownIconPadding: { type: Boolean, default: false },
         clearButtonTooltip: { type: Boolean, default: false },
         dropdownMaxHeight: { type: String, default: '30vh' },
-        preserveSearch: { type: Boolean, default: false }
+        preserveSearch: { type: Boolean, default: false },
+        disabledTooltip: { type: String, default: 'Disabled' }
     },
     emits: [
         'search-focus',
@@ -613,7 +619,8 @@ export default defineComponent({
                 '--dl-select-width': this.width,
                 '--dl-select-expand-icon-width': this.withoutDropdownIconPadding
                     ? '16px'
-                    : '28px'
+                    : '28px',
+                '--dl-menu-scrollbar-width': '10px'
             }
         },
         asteriskClasses(): string[] {
@@ -637,6 +644,9 @@ export default defineComponent({
                 return !!this.$scopedSlots.prepend && !this.isSmall
             }
             return !!this.$slots.prepend && !this.isSmall
+        },
+        chevronIconColor() {
+            return `${this.disabled ? 'dl-color-disabled' : null}`
         }
     },
     watch: {

package/src/components/essential/DlMenu/DlMenu.vue

@@ -452,6 +452,9 @@ export default defineComponent({
     border-radius: 2px;
     overflow-y: auto;
     overflow-x: hidden;
+    &::-webkit-scrollbar {
+        width: var(--dl-menu-scrollbar-width, 5px);
+    }
     outline: 0;
     max-height: 65vh;
     z-index: var(--dl-z-index-menu);

package/src/demos/DlSelectDemo.vue

@@ -64,19 +64,23 @@
                 {
                     label: 'Status 1',
                     value: 1,
-                    badgeColor: 'dl-color-disabled'
+                    badgeColor: 'var(--dl-color-disabled)'
                 },
                 {
                     label: 'Status 2',
                     value: 2,
-                    badgeColor: 'dl-color-secondary'
+                    badgeColor: 'var(--dl-color-secondary)'
                 },
                 {
                     label: 'Status 3',
                     value: 3,
-                    badgeColor: 'dl-color-positive'
+                    badgeColor: 'var(--dl-color-positive)'
                 },
-                { label: 'Status 4', value: 4, badgeColor: 'dl-color-warning' }
+                {
+                    label: 'Status 4',
+                    value: 4,
+                    badgeColor: 'var(--dl-color-warning)'
+                }
             ]"
             required
         >
@@ -125,7 +129,6 @@
             :options="searchOptions"
             size="m"
             multiselect
-            style="background-color: beige"
             placeholder="contributors"
             search
         />
@@ -179,34 +182,42 @@
                     subLabel: 'not so high',
                     label: 'High',
                     value: 'high',
-                    bgColor: 'dl-color-negative'
+                    labelColor: 'var(--dl-color-darker)',
+                    subLabelColor: 'var(--dl-color-lighter)'
                 },
                 {
                     subLabel: 'not so medium',
                     label: 'Medium',
                     value: 'medium',
-                    bgColor: 'dl-color-warning',
-                    textColor: 'dl-color-darker'
+                    labelColor: 'var(--dl-color-darker)',
+                    subLabelColor: 'var(--dl-color-lighter)'
                 },
                 {
                     subLabel: 'not so low',
                     label: 'Low',
                     value: 'low',
-                    bgColor: 'dl-color-positive',
-                    textColor: 'dl-color-darker'
+                    labelColor: 'var(--dl-color-darker)',
+                    subLabelColor: 'var(--dl-color-lighter)'
                 }
             ]"
         >
             <template #option="scope">
                 <div style="padding: 5px 0px">
-                    <div>{{ scope.opt.label }}</div>
-                    <div>{{ scope.opt.subLabel }}</div>
+                    <div :style="`color: ${scope.opt.labelColor}`">
+                        {{ scope.opt.label }}
+                    </div>
+                    <div
+                        :style="`color: ${scope.opt.subLabelColor}; font-size: 10px`"
+                    >
+                        {{ scope.opt.subLabel }}
+                    </div>
                 </div>
             </template>
         </dl-select>
         With tooltip
         <dl-select
             v-model="selectedOption"
+            title="With tooltip"
             :tooltip="'Test Me'"
             :options="[
                 {
@@ -523,6 +534,9 @@ export default defineComponent({
         },
         handleInput(e: Event) {
             return (e.target as HTMLInputElement).value
+        },
+        log(e: any) {
+            console.log(e)
         }
     }
 })

package/src/utils/parse-smart-query.ts

@@ -59,42 +59,42 @@ export const parseSmartQuery = (query: string) => {
                 case term.includes('>='):
                     [key, value] = term.split('>=').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
-                    if (pureValue) {
+                    if (pureValue !== null) {
                         andQuery[key] = { $gte: pureValue }
                     }
                     break
                 case term.includes('<='):
                     [key, value] = term.split('<=').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
-                    if (pureValue) {
+                    if (pureValue !== null) {
                         andQuery[key] = { $lte: pureValue }
                     }
                     break
                 case term.includes('>'):
                     [key, value] = term.split('>').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
-                    if (pureValue) {
+                    if (pureValue !== null) {
                         andQuery[key] = { $gt: pureValue }
                     }
                     break
                 case term.includes('<'):
                     [key, value] = term.split('<').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
-                    if (pureValue) {
+                    if (pureValue !== null) {
                         andQuery[key] = { $lt: pureValue }
                     }
                     break
                 case term.includes('!='):
                     [key, value] = term.split('!=').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
-                    if (pureValue) {
+                    if (pureValue !== null) {
                         andQuery[key] = { $ne: pureValue }
                     }
                     break
                 case term.includes('='):
                     [key, value] = term.split('=').map((x) => x.trim())
                     pureValue = GeneratePureValue(value)
-                    if (pureValue) {
+                    if (pureValue !== null) {
                         andQuery[key] = pureValue
                     }
                     break
@@ -112,7 +112,7 @@ export const parseSmartQuery = (query: string) => {
                             .filter((x) => x)
 
                         pureValue = GeneratePureValue(queryValue)
-                        if (pureValue && Array.isArray(pureValue)) {
+                        if (pureValue !== null && Array.isArray(pureValue)) {
                             andQuery[key] = { $nin: pureValue }
                         }
                     } else {
@@ -124,7 +124,7 @@ export const parseSmartQuery = (query: string) => {
                             .filter((x) => x)
 
                         pureValue = GeneratePureValue(queryValue)
-                        if (pureValue && Array.isArray(pureValue)) {
+                        if (pureValue !== null && Array.isArray(pureValue)) {
                             andQuery[key] = { $in: pureValue }
                         }
                     }