@dataloop-ai/components 0.20.168-ds-v3.0 → 0.20.168-ds-v3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.168-ds-v3.0",
+  "version": "0.20.168-ds-v3.1",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchInput.vue

@@ -53,7 +53,7 @@
                     </div>
                 </div>
                 <dl-tooltip
-                    v-if="!focused"
+                    v-if="!focused && !noTooltip"
                     border="1px solid var(--dl-color-separator)"
                     background-color="dl-color-panel-background"
                     color="dl-color-darker"
@@ -248,6 +248,10 @@ export default defineComponent({
             type: String,
             default: '28px'
         },
+        noTooltip: {
+            type: Boolean,
+            default: false
+        },
         omitSuggestions: {
             type: Array as PropType<string[]>,
             default: () => [] as string[]
@@ -297,6 +301,7 @@ export default defineComponent({
             defaultIcon,
             defaultIconColor,
             schema,
+            noTooltip,
             omitSuggestions,
             operatorsOverride,
             height,

package/src/components/compound/DlSearches/DlSmartSearch/components/DlSmartSearchJsonEditorDialog.vue

@@ -4,7 +4,7 @@
             v-model="isOpen"
             :height="500"
             :width="800"
-            style="--dl-dialog-box-footer-padding: 10px 16px"
+            style="--dl-dialog-box-footer-padding: 10px 16px; --dl-dialog-box-content-padding: 0"
         >
             <template #header>
                 <dl-dialog-box-header
@@ -15,10 +15,7 @@
             </template>
             <template #body>
                 <div class="json-editor-layout">
-                    <div
-                        class="json-query-menu"
-                        style="margin-bottom: 10px"
-                    >
+                    <div class="json-query-menu">
                         <dl-select
                             :model-value="selectedOption"
                             ref="jsonQueryMenu"
@@ -26,6 +23,7 @@
                             :options="selectOptions"
                             placeholder="New Query"
                             searchable
+                            size="m"
                             after-options-padding="0"
                             no-options-padding="0"
                             menu-style="overflow-y: hidden;"
@@ -37,7 +35,15 @@
                                 </span>
                             </template>
                             <template #option="scope">
-                                <div class="json-query-menu-option">
+                                <div
+                                    v-if="selectOptions.length < 2"
+                                    class="json-query-menu-no-option"
+                                    disabled
+                                    style="cursor: default !important; padding: 14px 0 10px 0;"
+                                >
+                                    No Saved Queries
+                                </div>
+                                <div v-else class="json-query-menu-option">
                                     <div class="json-query-menu-option-label">
                                         {{ scope.opt.label }}
                                     </div>
@@ -70,7 +76,7 @@
                             </template>
                             <template #no-options>
                                 <div class="json-query-menu-no-option">
-                                    {{ noOptionsLabel }}
+                                    No Results Found
                                 </div>
                                 <dl-separator
                                     style="margin: 0 0 2px 0 !important"
@@ -334,12 +340,6 @@ export default defineComponent({
             }
         )
 
-        const noOptionsLabel = computed<string>(() => {
-            return selectOptions.value.length
-                ? 'No Results Found'
-                : 'No Saved Queries'
-        })
-
         watch(
             selectedFilter,
             () => {
@@ -483,7 +483,6 @@ export default defineComponent({
             showSaveDialog,
             stringifiedJSON,
             selectedOption,
-            noOptionsLabel,
             hasActiveFilter,
             alignJSON,
             copyJSON,
@@ -503,22 +502,29 @@ export default defineComponent({
 })
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .json-editor-layout {
     display: flex;
     flex-direction: column;
     height: 100%;
 }
 
-.json-editor-footer,
-.json-query-menu {
+.json-editor-footer {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
+.json-query-menu {
+    display: flex;
+    align-items: center;
+    background-color: var(--dl-color-fill);
+    justify-content: space-between;
+    padding: 6px 16px;
+}
 .json-editor {
-    height: 100%;
+    height: calc(100% - 40px);
+    --jse-main-border: none;
 }
 
 .json-query-menu-option {
@@ -527,7 +533,7 @@ export default defineComponent({
 }
 .json-query-menu-option-label,
 .json-query-menu-selected {
-    line-height: 20px;
+    padding-top: 3px;
     white-space: nowrap;
     display: inline-block;
     width: 265px;

package/src/components/compound/DlTreeTable/DlTreeTable.vue

@@ -788,11 +788,12 @@ export default defineComponent({
             let shouldSkipValidation = false
 
             if (storedValidTarget.value && targetRow.value) {
-                const targetParent = findParentForChild(
+                const isStoredTargetAncestor = isAncestor(
+                    storedValidTarget.value.id,
                     targetRow.value.id,
                     tableRows.value
                 )
-                if (targetParent === storedValidTarget.value.id) {
+                if (isStoredTargetAncestor) {
                     finalTarget = storedValidTarget.value
                     shouldSkipValidation = true
                 }
@@ -1029,6 +1030,22 @@ export default defineComponent({
             return parentMap.get(childId) || null
         }
 
+        const isAncestor = (
+            ancestorId: string,
+            childId: string,
+            rows: DlTableRow[]
+        ): boolean => {
+            const parentMap = buildParentMap(rows)
+            while (parentMap.has(childId)) {
+                const parentId = parentMap.get(childId)!
+                if (parentId === ancestorId) {
+                    return true
+                }
+                childId = parentId
+            }
+            return false
+        }
+
         const calculateRowLevel = (row: DlTableRow): number => {
             const parentMap = buildParentMap(props.rows)
             let level = 1

package/src/components/essential/DlSwitch/DlSwitch.vue

@@ -7,12 +7,14 @@
         }`"
     >
         <label
-            v-if="!!leftLabel"
+            v-if="hasLeftLabel"
             class="left dl-switch-label"
             :for="computedId"
             :style="cssLabelVars"
         >
-            {{ leftLabel }}
+            <slot name="left-label">
+                {{ leftLabel }}
+            </slot>
         </label>
         <span
             class="dl-switch-container"
@@ -35,12 +37,14 @@
             />
         </span>
         <label
-            v-if="!!rightLabel"
+            v-if="hasRightLabel"
             class="right dl-switch-label"
             :for="computedId"
             :style="cssLabelVars"
         >
-            {{ rightLabel }}
+            <slot name="right-label">
+                {{ rightLabel }}
+            </slot>
         </label>
     </div>
 </template>
@@ -143,6 +147,12 @@ export default defineComponent({
                 ? this.index === -1
                 : toRaw(this.modelValue) === toRaw(this.falseValue)
         },
+        hasLeftLabel(): boolean {
+            return !!this.leftLabel || !!this.$slots['left-label']
+        },
+        hasRightLabel(): boolean {
+            return !!this.rightLabel || !!this.$slots['right-label']
+        },
         cssVars(): Record<string, string> {
             return {
                 '--dl-checkbox-height': `${this.size}px`,

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -42,6 +42,7 @@
 
         <dl-smart-search-input
             v-model="queryObject"
+            no-tooltip
             :aliases="aliases"
             :schema="schema"
             :color-schema="colorSchema"