@dataloop-ai/components 0.20.188-ds-v3.0 → 0.20.188

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

@@ -4,116 +4,48 @@
             v-model="isOpen"
             :height="500"
             :width="800"
-            style="--dl-dialog-box-footer-padding: 10px 16px; --dl-dialog-box-content-padding: 0"
+            style="--dl-dialog-box-footer-padding: 10px 16px"
         >
             <template #header>
                 <dl-dialog-box-header
-                    title="DQL Editor"
+                    title="DQL Search"
                     :close-button="true"
                     @onClose="isOpen = false"
                 />
             </template>
             <template #body>
                 <div class="json-editor-layout">
-                    <div class="json-query-menu">
+                    <div
+                        class="json-query-menu"
+                        style="margin-bottom: 10px"
+                    >
                         <dl-select
                             :model-value="selectedOption"
-                            ref="jsonQueryMenu"
                             width="300px"
                             :options="selectOptions"
                             placeholder="New Query"
-                            searchable
-                            size="m"
-                            after-options-padding="0"
-                            no-options-padding="0"
-                            menu-style="overflow-y: hidden;"
                             @update:model-value="onQuerySelect"
                         >
                             <template #selected="scope">
-                                <span class="json-query-menu-selected">
+                                <span class="json-query-menu-option">
                                     {{ scope.opt ? scope.opt.label : '' }}
                                 </span>
                             </template>
                             <template #option="scope">
-                                <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>
-                                    <dl-icon
-                                        v-if="scope.opt.label !== 'New Query'"
-                                        icon="icon-dl-delete"
-                                        color="dl-color-negative"
-                                        class="json-query-menu-option-delete"
-                                        @click.stop="onDelete(scope.opt)"
-                                    >
-                                        <dl-tooltip>Delete</dl-tooltip>
-                                    </dl-icon>
-                                </div>
-                            </template>
-                            <template #after-options>
-                                <dl-separator
-                                    style="margin: 0 0 2px 0 !important"
-                                    type="horizontal"
-                                />
-                                <dl-button
-                                    icon="icon-dl-save"
-                                    flat
-                                    fluid
-                                    secondary
-                                    size="s"
-                                    label="Save Query"
-                                    class="json-query-menu-save-button"
-                                    @click="onSave"
-                                />
-                            </template>
-                            <template #no-options>
-                                <div class="json-query-menu-no-option">
-                                    No Results Found
-                                </div>
-                                <dl-separator
-                                    style="margin: 0 0 2px 0 !important"
-                                    type="horizontal"
-                                />
-                                <dl-button
-                                    icon="icon-dl-save"
-                                    flat
-                                    fluid
-                                    secondary
-                                    size="s"
-                                    label="Save Query"
-                                    class="json-query-menu-save-button"
-                                    @click="onSave"
-                                />
+                                <span class="json-query-menu-option">
+                                    {{ scope.opt.label }}
+                                </span>
                             </template>
                         </dl-select>
-                        <div>
-                            <dl-button
-                                icon="icon-dl-align-left"
-                                tooltip="Align Left"
-                                flat
-                                color="secondary"
-                                padding="0px 3px"
-                                :disabled="alignDisabled"
-                                @click="alignJSON"
-                            />
-                            <dl-button
-                                icon="icon-dl-copy"
-                                tooltip="Copy"
-                                flat
-                                color="secondary"
-                                padding="0px 3px"
-                                :disabled="alignDisabled"
-                                @click="copyJSON"
-                            />
-                        </div>
+                        <dl-button
+                            icon="icon-dl-align-left"
+                            label="Align Left"
+                            flat
+                            color="secondary"
+                            padding="0px 3px"
+                            :disabled="alignDisabled"
+                            @click="alignJSON"
+                        />
                     </div>
                     <dl-json-editor
                         ref="jsonEditor"
@@ -133,7 +65,7 @@
                         flat
                         color="secondary"
                         padding="0"
-                        @click="optionToDelete = selectedOption"
+                        @click="showDeleteDialog = true"
                     />
                     <div class="json-editor-footer-actions">
                         <dl-button
@@ -169,20 +101,27 @@
             <template #body>
                 <dl-input
                     v-model="newQueryName"
-                    :red-asterisk="true"
-                    :required="true"
-                    title="Query Name"
-                    placeholder="Insert query name"
+                    title="Query name"
+                    style="text-align: center"
+                    placeholder="Type query name"
                 />
             </template>
             <template #footer>
                 <div class="dl-smart-search__buttons--save">
                     <dl-button
                         :disabled="!newQueryName"
+                        outlined
+                        style="margin-right: 5px"
                         @click="() => saveQuery(false)"
                     >
                         Save
                     </dl-button>
+                    <dl-button
+                        :disabled="!newQueryName"
+                        @click="() => saveQuery(true)"
+                    >
+                        Save and Search
+                    </dl-button>
                 </div>
             </template>
         </dl-dialog-box>
@@ -196,13 +135,12 @@
                 />
             </template>
             <template #body>
-                <dl-typography size="h5">
-                    Are you sure you want to permanently delete the following query?
-                    <br />
-                    {{ optionToDelete.label }}
-                    <br />
-                    <br />
-                    This action cannot be undone.
+                <dl-typography
+                    size="h3"
+                    style="display: flex; justify-content: center"
+                >
+                    Are you sure you want to delete
+                    {{ selectedOption.label }}?
                 </dl-typography>
             </template>
             <template #footer>
@@ -228,12 +166,10 @@ import {
 } from 'vue-demi'
 import { DlSelect } from '../../../DlSelect'
 import { DlSelectOption } from '../../../DlSelect/types'
-import { DlSeparator } from '../../../../essential/DlSeparator'
 import { DlButton } from '../../../../basic'
 import { DlDialogBox, DlDialogBoxHeader } from '../../../DlDialogBox'
 import { DlJsonEditor } from '../../../DlJsonEditor'
-import { DlTooltip } from '../../../../shared/DlTooltip'
-import { DlTypography, DlIcon } from '../../../../essential'
+import { DlTypography } from '../../../../essential'
 import { DlInput } from '../../../DlInput'
 import { stateManager } from '../../../../../StateManager'
 import { cloneDeep, isEqual, uniqBy } from 'lodash'
@@ -243,12 +179,9 @@ export default defineComponent({
     components: {
         DlDialogBox,
         DlDialogBoxHeader,
-        DlIcon,
         DlJsonEditor,
         DlButton,
         DlSelect,
-        DlSeparator,
-        DlTooltip,
         DlTypography,
         DlInput
     },
@@ -281,24 +214,11 @@ export default defineComponent({
         'update:modelValue',
         'search',
         'change',
-        'copied',
         'update:options',
         'save',
         'delete',
         'select'
     ],
-    methods: {
-        onDelete(option: DlSelectOption) {
-            const select = this.$refs['jsonQueryMenu'] as InstanceType<typeof DlSelect>
-            select?.closeMenu()
-            this.optionToDelete = option
-        },
-        onSave() {
-            const select = this.$refs['jsonQueryMenu'] as InstanceType<typeof DlSelect>
-            select?.closeMenu()
-            this.showSaveDialog = true
-        }
-    },
     setup(props, { emit }) {
         const { modelValue, options, json, selectedFilter } = toRefs(props)
 
@@ -310,15 +230,7 @@ export default defineComponent({
         const currentQuery = ref<{ [key: string]: any }>(cloneDeep(json.value))
         const jsonEditor = ref<any>(null)
         const showSaveDialog = ref(false)
-        const optionToDelete = ref<DlSelectOption>(null)
-        const showDeleteDialog = computed<boolean>({
-            get: () => !!optionToDelete.value,
-            set: (val) => {
-                if (!val) {
-                    optionToDelete.value = null
-                }
-            }
-        })
+        const showDeleteDialog = ref(false)
         const newQueryName = ref('')
         const alignDisabled = ref(false)
 
@@ -361,11 +273,6 @@ export default defineComponent({
             jsonEditor.value?.format()
         }
 
-        const copyJSON = async () => {
-            await navigator.clipboard.writeText(stringifiedJSON.value)
-            emit('copied')
-        }
-
         const onQuerySelect = (option: DlSelectOption) => {
             if (option.label === selectedOption.value.label) {
                 return
@@ -449,10 +356,10 @@ export default defineComponent({
 
         const deleteQuery = () => {
             const toDelete = options.value.find(
-                (o: DlSelectOption) => o.label === optionToDelete.value.label
+                (o: DlSelectOption) => o.label === selectedOption.value.label
             )
             const newOptions = options.value.filter(
-                (o: DlSelectOption) => o.label !== optionToDelete.value.label
+                (o: DlSelectOption) => o.label !== selectedOption.value.label
             )
 
             emit('delete', toDelete)
@@ -485,11 +392,9 @@ export default defineComponent({
             selectedOption,
             hasActiveFilter,
             alignJSON,
-            copyJSON,
             onQuerySelect,
             newQueryName,
             alignDisabled,
-            optionToDelete,
             showDeleteDialog,
             selectOptions,
             search,
@@ -502,76 +407,29 @@ export default defineComponent({
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .json-editor-layout {
     display: flex;
     flex-direction: column;
     height: 100%;
 }
 
-.json-editor-footer {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
+.json-editor-footer,
 .json-query-menu {
+    width: 100%;
     display: flex;
     align-items: center;
-    background-color: var(--dl-color-fill);
     justify-content: space-between;
-    padding: 6px 16px;
 }
 .json-editor {
-    height: calc(100% - 40px);
-    --jse-main-border: none;
+    height: 100%;
 }
 
 .json-query-menu-option {
-    display: flex;
-    flex-direction: row;
-}
-.json-query-menu-option-label,
-.json-query-menu-selected {
-    padding-top: 3px;
     white-space: nowrap;
     display: inline-block;
     width: 265px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
-.json-query-menu-option:hover .json-query-menu-option-label {
-    margin-right: 6px;
-    width: 255px;
-}
-.json-query-menu-option-delete {
-    overflow-x: hidden;
-    width: 0;
-}
-.json-query-menu-option:hover .json-query-menu-option-delete {
-    border-radius: 4px;
-    overflow-x: visible;
-    padding: 4px;
-    width: auto;
-}
-.json-query-menu-option-delete:hover {
-    background-color: var(--dl-color-fill-secondary);
-}
-.json-query-menu-option-delete:active {
-    background-color: var(--dl-color-negative-background);
-}
-.json-query-menu-no-option {
-    display: flex;
-    padding: 20px 0;
-    flex-direction: column;
-    align-items: center;
-    align-self: stretch;
-}
-.json-query-menu-save-button:hover {
-    background-color: var(--dl-color-fill-secondary);
-}
-.dl-smart-search__buttons--save {
-    text-align: right;
-    width: 100%;
-}
 </style>

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

@@ -170,17 +170,13 @@
                         <slot name="before-options" />
                     </dl-item-section>
                 </dl-list-item>
-                <dl-list-item
-                    v-if="noOptions"
-                    :style="computedNoOptionsStyle"
-                    :padding="noOptionsPadding"
-                >
+                <dl-list-item v-if="noOptions" :style="computedNoOptionsStyle">
                     <dl-item-section color="dl-color-medium">
                         <slot name="no-options"> No options </slot>
                     </dl-item-section>
                 </dl-list-item>
                 <dl-list
-                    v-else-if="showMenuList"
+                    v-if="showMenuList"
                     class="select-list"
                     :padding="false"
                     :style="
@@ -519,10 +515,6 @@ export default defineComponent({
             type: String,
             default: null
         },
-        noOptionsPadding: {
-            type: String,
-            default: null
-        },
         keepFocusOnBlur: {
             type: Boolean,
             default: false
@@ -1056,11 +1048,7 @@ export default defineComponent({
             return !!option?.readonly
         },
         isDisableRowOption(option: DlSelectOptionType) {
-            return (
-                typeof option === 'object' &&
-                option !== null &&
-                !!option.disableRow
-            )
+            return typeof option === 'object' && option !== null && !!option.disableRow
         },
         getOptionCount(option: any) {
             return option?.count ?? null

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

@@ -17,7 +17,7 @@
         <dl-list-item
             v-else
             class="option"
-            :class="{
+            :class="{ 
                 highlighted: highlightSelected && isSelected,
                 'disabled-row': disableRow
             }"
@@ -142,7 +142,10 @@ import { v4 } from 'uuid'
 import { debounce } from 'lodash'
 import { stateManager } from '../../../../StateManager'
 import { getCaseInsensitiveInput, getLabel } from '../utils'
-import { DlSelectOption, DlSelectOptionType } from '../../types'
+import {
+    DlSelectOption,
+    DlSelectOptionType
+} from '../../types'
 
 const ValueTypes = [Array, Boolean, String, Number, Object, Function]
 
@@ -403,11 +406,7 @@ export default defineComponent({
             return !!option?.readonly
         },
         isDisableRowOption(option: DlSelectOptionType) {
-            return (
-                typeof option === 'object' &&
-                option !== null &&
-                !!option.disableRow
-            )
+            return typeof option === 'object' && option !== null && !!option.disableRow
         }
     }
 })

package/src/components/compound/DlStepper/components/DlStepperSidebar.vue

@@ -28,7 +28,10 @@
                             <dl-ellipsis>
                                 {{ getStepTitle(step) }}
                             </dl-ellipsis>
-                            <dl-ellipsis class="sidebar--subtitle">
+                            <dl-ellipsis
+                                class="sidebar--subtitle"
+                                :tooltip-text="step.subtitleTooltip"
+                            >
                                 {{ getStepSubtitle(step) }}
                             </dl-ellipsis>
                         </div>

package/src/components/compound/DlStepper/models/Step.ts

@@ -9,6 +9,7 @@ export class Step {
         this._initialState = {
             active: false,
             subtitle: '',
+            subtitleTooltip: '',
             completed: false,
             optional: false,
             disabled: false,
@@ -42,6 +43,14 @@ export class Step {
         set(this._state, 'subtitle', value)
     }
 
+    public get subtitleTooltip(): string {
+        return this._state.subtitleTooltip
+    }
+
+    public set subtitleTooltip(value: string) {
+        set(this._state, 'subtitleTooltip', value)
+    }
+
     public get icon(): string {
         return this._state.icon
     }

package/src/components/compound/DlStepper/models/interfaces.ts

@@ -2,6 +2,7 @@ export interface StepState {
     value: string
     title: string
     subtitle?: string
+    subtitleTooltip?: string
     icon?: string
     active?: boolean
     completed?: boolean

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

@@ -161,7 +161,7 @@
                                     <div
                                         v-if="
                                             visibleColumns &&
-                                                visibleColumns.length
+                                            visibleColumns.length
                                         "
                                         class="visible-columns-justify-end"
                                         style="width: 100%; display: flex"
@@ -274,8 +274,8 @@
                                     isRowSelected(getRowKey(props.item))
                                         ? 'selected'
                                         : hasAnyAction
-                                            ? ' cursor-pointer'
-                                            : ''
+                                        ? ' cursor-pointer'
+                                        : ''
                                 "
                                 :no-hover="noHover"
                                 @click="
@@ -565,7 +565,7 @@
                                     <div
                                         v-if="
                                             visibleColumns &&
-                                                visibleColumns.length
+                                            visibleColumns.length
                                         "
                                         class="visible-columns-justify-end"
                                         style="width: 100%; display: flex"
@@ -674,8 +674,8 @@
                             <dl-top-scroll
                                 v-if="
                                     tableScroll &&
-                                        infiniteScroll &&
-                                        !isDataEmpty
+                                    infiniteScroll &&
+                                    !isDataEmpty
                                 "
                                 :container-ref="tableScroll"
                                 @scroll-to-top="
@@ -709,8 +709,8 @@
                                         isRowSelected(getRowKey(row))
                                             ? 'selected'
                                             : hasAnyAction
-                                                ? ' cursor-pointer'
-                                                : ''
+                                            ? ' cursor-pointer'
+                                            : ''
                                     "
                                     :no-hover="noHover"
                                     @click="onTrClick($event, row, pageIndex)"
@@ -845,8 +845,8 @@
                             <dl-bottom-scroll
                                 v-if="
                                     tableScroll &&
-                                        infiniteScroll &&
-                                        !isDataEmpty
+                                    infiniteScroll &&
+                                    !isDataEmpty
                                 "
                                 :container-ref="tableScroll"
                                 @scroll-to-bottom="
@@ -903,7 +903,7 @@
                     <div
                         v-if="
                             hasBottomSelectionBanner &&
-                                selectedRowsLabel(rowsSelectedNumber)
+                            selectedRowsLabel(rowsSelectedNumber)
                         "
                         class="dl-table__control"
                     >

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

@@ -266,11 +266,11 @@ export default defineComponent({
         emptyStateProps: {
             type: Object as PropType<DlEmptyStateProps>,
             default: () =>
-                ({
-                    title: '',
-                    subtitle: 'No data to show yet',
-                    icon: 'icon-dl-dataset-filled'
-                } as unknown as PropType<DlEmptyStateProps>)
+            ({
+                title: '',
+                subtitle: 'No data to show yet',
+                icon: 'icon-dl-dataset-filled'
+            } as unknown as PropType<DlEmptyStateProps>)
         },
         /**
          * Custom icon class to use for expanded rows.
@@ -392,7 +392,7 @@ export default defineComponent({
             typeof props.rowKey === 'function'
                 ? props.rowKey
                 : (row: Record<string, any>) =>
-                      row[props.rowKey as string] ?? ''
+                    row[props.rowKey as string] ?? ''
         )
 
         const hasDraggableRows = computed(() =>
@@ -537,7 +537,7 @@ export default defineComponent({
         const onMultipleSelectionSet = (val: boolean) => {
             const value =
                 selectedData.value.length > 0 &&
-                selectedData.value.length === tableRows.value.length
+                    selectedData.value.length === tableRows.value.length
                     ? false
                     : val
 
@@ -811,9 +811,7 @@ export default defineComponent({
                 targetRow: finalTarget
             })
 
-            const isDragValid =
-                shouldSkipValidation ||
-                checkParentCondition(draggedRow.value, finalTarget)
+            const isDragValid = shouldSkipValidation || checkParentCondition(draggedRow.value, finalTarget)
             if (isDragValid) {
                 const smartSortingMovement = {
                     ...sortingMovement.value,
@@ -837,9 +835,10 @@ export default defineComponent({
                 return
             }
 
-            const srcEl = (originalEvent.srcElement ||
-                originalEvent.target ||
-                null) as HTMLElement | null
+            const srcEl =
+                (originalEvent.srcElement ||
+                    originalEvent.target ||
+                    null) as HTMLElement | null
             const passedElement = srcEl ? getElementAbove(srcEl, 'dl-tr') : null
             if (passedElement) {
                 const targetRowId = passedElement.dataset.id
@@ -1244,7 +1243,7 @@ export default defineComponent({
         this.vue2h = vue2h
         const tableBodySlot = isVue2
             ? this.$slots['table-body'] &&
-              (() => (this.$slots['table-body'] as any)?.pop())
+            (() => (this.$slots['table-body'] as any)?.pop())
             : this.$slots['table-body']
         const tbody =
             tableBodySlot ?? (this.isDataEmpty ? null : this.renderTBody)
@@ -1308,7 +1307,7 @@ export default defineComponent({
     justify-content: center;
     flex-wrap: wrap;
 
-    & > * {
+    &>* {
         flex-grow: 1;
     }
 }
@@ -1337,6 +1336,7 @@ tr {
 }
 
 .sticky-header {
+
     ::v-deep .dl-table__top,
     ::v-deep .dl-table__bottom,
     ::v-deep thead tr:first-child th {
@@ -1359,4 +1359,4 @@ tr {
         top: 40px;
     }
 }
-</style>
+</style>

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

@@ -16,7 +16,7 @@
             }`"
         >
             <dl-icon
-                v-if="hasDraggableRows && !row.disableDraggable"
+               v-if="hasDraggableRows && !row.disableDraggable"
                 class="draggable-icon"
                 icon="icon-dl-drag"
                 size="12px"