@dataloop-ai/components 0.17.60 → 0.17.61

package/package.json

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

package/src/components/compound/DlJsonEditor/DlJsonEditor.vue

@@ -11,6 +11,10 @@ import { JSONEditor, Mode } from 'vanilla-jsoneditor'
 import { debounce } from 'lodash'
 
 export default defineComponent({
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
     props: {
         /**
          * The string to display and modify as JSON

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

@@ -9,7 +9,6 @@
             class="dl-smart-search__input-wrapper"
         >
             <dl-smart-search-input
-                v-show="!jsonEditorModel"
                 :status="computedStatus"
                 :style-model="defineStyleModel"
                 :with-save-button="true"
@@ -185,14 +184,16 @@
 </template>
 <script lang="ts">
 import { defineComponent, PropType, ref } from 'vue-demi'
-import DlSmartSearchInput from './components/DlSmartSearchInput.vue'
-import DlSmartSearchFilters from './components/DlSmartSearchFilters.vue'
-import { DlJsonEditor } from '../../DlJsonEditor'
-import { DlDialogBox, DlDialogBoxHeader } from '../../DlDialogBox'
-import { DlInput } from '../../DlInput'
 import { DlTypography, DlMenu } from '../../../essential'
 import { DlButton } from '../../../basic'
-import { DlSelect } from '../../../compound'
+import { DlSelect } from '../../DlSelect'
+import { DlInput } from '../../DlInput'
+import { DlDialogBox, DlDialogBoxHeader } from '../../DlDialogBox'
+import { DlJsonEditor } from '../../DlJsonEditor'
+
+import DlSmartSearchInput from './components/DlSmartSearchInput.vue'
+import DlSmartSearchFilters from './components/DlSmartSearchFilters.vue'
+
 import {
     useSuggestions,
     Schema,
@@ -394,21 +395,27 @@ export default defineComponent({
                 : this.inputModel
         },
         deleteButtonState(): boolean {
-            return !this.filters.saved.filter(
+            return !this.filters?.saved?.filter(
                 (q: Query) => q.name === this.activeQuery?.name
             ).length
         },
         selectOptions(): Record<string, string>[] {
-            return [
+            const options: Record<string, string>[] = [
                 {
                     label: 'New Query',
                     value: '{}'
-                },
-                ...this.filters.saved.map((q: Query) => ({
-                    label: q.name,
-                    value: q.query
-                }))
+                }
             ]
+
+            const filters = this.filters?.saved ?? []
+            for (const filter of filters) {
+                options.push({
+                    label: filter.name,
+                    value: filter.query
+                })
+            }
+
+            return options
         }
     },
     watch: {

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

@@ -38,6 +38,7 @@ import { DlTabPanels, DlTabPanel } from '../../../DlTabPanels'
 import { Filters } from '../../../DlSearches/DlSmartSearch/types'
 import { getTabItems } from '../utils/utils'
 import FiltersQuery from './FiltersQuery.vue'
+import { v4 } from 'uuid'
 
 export default defineComponent({
     components: {
@@ -55,6 +56,7 @@ export default defineComponent({
     emits: ['filters-delete', 'filters-search'],
     data() {
         return {
+            uuid: `dl-smart-search-filters-${v4()}`,
             currentTab: 'saved'
         }
     },

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

@@ -496,6 +496,7 @@ export default defineComponent({
                 element.scrollLeft = 0
                 element.scrollTop = 0
                 this.focused = false
+                this.expanded = false
                 this.$emit('focus', false)
             } else {
                 this.focus()
@@ -600,6 +601,7 @@ export default defineComponent({
         }
 
         &--expanded {
+            z-index: var(--dl-z-index-overlay);
             transition: height 0.3s ease-out;
             position: relative;
             top: 0;

package/src/components/compound/DlSearches/DlSmartSearch/utils/utils.ts

@@ -10,15 +10,15 @@ import {
 export function getTabItems(filters: Filters) {
     return [
         {
-            label: `Saved DQL Queries (${filters.saved.length})`,
+            label: `Saved DQL Queries (${filters.saved?.length ?? 0})`,
             name: 'saved'
         },
         {
-            label: `Recent Searches (${filters.recent.length})`,
+            label: `Recent Searches (${filters.recent?.length ?? 0})`,
             name: 'recent'
         },
         {
-            label: `Suggested Searches (${filters.suggested.length})`,
+            label: `Suggested Searches (${filters.suggested?.length ?? 0})`,
             name: 'suggested'
         }
     ]

package/src/components/compound/index.ts

@@ -7,7 +7,6 @@ export * from './DlItem'
 export * from './DlOptionGroup'
 export * from './DlPagination'
 export * from './DlRange'
-export * from './DlSearches'
 export * from './DlSelect'
 export * from './DlSlider'
 export * from './DlStepper'
@@ -15,6 +14,14 @@ export * from './DlTable'
 export * from './DlTabPanels'
 export * from './DlTabs'
 export * from './DlToast'
+
+// uses other compound
 export * from './DlDialogBox'
 export * from './DlToggleButton'
 export * from './DlJsonEditor'
+
+/**
+ * Moved to bottom of file as dlsmartsearch specifically uses other components here and needs to be initialized last
+ * todo: Fix potential circular dependency
+ */
+export * from './DlSearches'