@dataloop-ai/components 0.20.165 → 0.20.167-ds-v3.0

package/package.json

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

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

@@ -8,7 +8,7 @@
         >
             <template #header>
                 <dl-dialog-box-header
-                    title="DQL Search"
+                    title="DQL Editor"
                     :close-button="true"
                     @onClose="isOpen = false"
                 />
@@ -21,31 +21,93 @@
                     >
                         <dl-select
                             :model-value="selectedOption"
+                            ref="jsonQueryMenu"
                             width="300px"
                             :options="selectOptions"
                             placeholder="New Query"
+                            searchable
+                            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-option">
+                                <span class="json-query-menu-selected">
                                     {{ scope.opt ? scope.opt.label : '' }}
                                 </span>
                             </template>
                             <template #option="scope">
-                                <span class="json-query-menu-option">
-                                    {{ scope.opt.label }}
-                                </span>
+                                <div 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">
+                                    {{ noOptionsLabel }}
+                                </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"
+                                />
                             </template>
                         </dl-select>
-                        <dl-button
-                            icon="icon-dl-align-left"
-                            label="Align Left"
-                            flat
-                            color="secondary"
-                            padding="0px 3px"
-                            :disabled="alignDisabled"
-                            @click="alignJSON"
-                        />
+                        <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>
                     </div>
                     <dl-json-editor
                         ref="jsonEditor"
@@ -65,7 +127,7 @@
                         flat
                         color="secondary"
                         padding="0"
-                        @click="showDeleteDialog = true"
+                        @click="optionToDelete = selectedOption"
                     />
                     <div class="json-editor-footer-actions">
                         <dl-button
@@ -101,27 +163,20 @@
             <template #body>
                 <dl-input
                     v-model="newQueryName"
-                    title="Query name"
-                    style="text-align: center"
-                    placeholder="Type query name"
+                    :red-asterisk="true"
+                    :required="true"
+                    title="Query Name"
+                    placeholder="Insert 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>
@@ -135,12 +190,13 @@
                 />
             </template>
             <template #body>
-                <dl-typography
-                    size="h3"
-                    style="display: flex; justify-content: center"
-                >
-                    Are you sure you want to delete
-                    {{ selectedOption.label }}?
+                <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>
             </template>
             <template #footer>
@@ -166,10 +222,12 @@ 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 { DlTypography } from '../../../../essential'
+import { DlTooltip } from '../../../../shared/DlTooltip'
+import { DlTypography, DlIcon } from '../../../../essential'
 import { DlInput } from '../../../DlInput'
 import { stateManager } from '../../../../../StateManager'
 import { cloneDeep, isEqual, uniqBy } from 'lodash'
@@ -179,9 +237,12 @@ export default defineComponent({
     components: {
         DlDialogBox,
         DlDialogBoxHeader,
+        DlIcon,
         DlJsonEditor,
         DlButton,
         DlSelect,
+        DlSeparator,
+        DlTooltip,
         DlTypography,
         DlInput
     },
@@ -214,11 +275,24 @@ 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)
 
@@ -230,7 +304,15 @@ export default defineComponent({
         const currentQuery = ref<{ [key: string]: any }>(cloneDeep(json.value))
         const jsonEditor = ref<any>(null)
         const showSaveDialog = ref(false)
-        const showDeleteDialog = ref(false)
+        const optionToDelete = ref<DlSelectOption>(null)
+        const showDeleteDialog = computed<boolean>({
+            get: () => !!optionToDelete.value,
+            set: (val) => {
+                if (!val) {
+                    optionToDelete.value = null
+                }
+            }
+        })
         const newQueryName = ref('')
         const alignDisabled = ref(false)
 
@@ -252,6 +334,12 @@ export default defineComponent({
             }
         )
 
+        const noOptionsLabel = computed<string>(() => {
+            return selectOptions.value.length
+                ? 'No Results Found'
+                : 'No Saved Queries'
+        })
+
         watch(
             selectedFilter,
             () => {
@@ -273,6 +361,11 @@ 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
@@ -356,10 +449,10 @@ export default defineComponent({
 
         const deleteQuery = () => {
             const toDelete = options.value.find(
-                (o: DlSelectOption) => o.label === selectedOption.value.label
+                (o: DlSelectOption) => o.label === optionToDelete.value.label
             )
             const newOptions = options.value.filter(
-                (o: DlSelectOption) => o.label !== selectedOption.value.label
+                (o: DlSelectOption) => o.label !== optionToDelete.value.label
             )
 
             emit('delete', toDelete)
@@ -390,11 +483,14 @@ export default defineComponent({
             showSaveDialog,
             stringifiedJSON,
             selectedOption,
+            noOptionsLabel,
             hasActiveFilter,
             alignJSON,
+            copyJSON,
             onQuerySelect,
             newQueryName,
             alignDisabled,
+            optionToDelete,
             showDeleteDialog,
             selectOptions,
             search,
@@ -426,10 +522,50 @@ export default defineComponent({
 }
 
 .json-query-menu-option {
+    display: flex;
+    flex-direction: row;
+}
+.json-query-menu-option-label,
+.json-query-menu-selected {
+    line-height: 20px;
     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,13 +170,17 @@
                         <slot name="before-options" />
                     </dl-item-section>
                 </dl-list-item>
-                <dl-list-item v-if="noOptions" :style="computedNoOptionsStyle">
+                <dl-list-item
+                    v-if="noOptions"
+                    :style="computedNoOptionsStyle"
+                    :padding="noOptionsPadding"
+                >
                     <dl-item-section color="dl-color-medium">
                         <slot name="no-options"> No options </slot>
                     </dl-item-section>
                 </dl-list-item>
                 <dl-list
-                    v-if="showMenuList"
+                    v-else-if="showMenuList"
                     class="select-list"
                     :padding="false"
                     :style="
@@ -510,6 +514,10 @@ export default defineComponent({
             type: String,
             default: null
         },
+        noOptionsPadding: {
+            type: String,
+            default: null
+        },
         keepFocusOnBlur: {
             type: Boolean,
             default: false

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

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

package/src/components/compound/DlTable/hooks/tableRowSelection.ts

@@ -51,14 +51,18 @@ export function useTableRowSelection(
             )
     )
 
-    const someRowsSelected = computed(
-        () =>
-            allRowsSelected.value !== true &&
-            computedRows.value.some(
-                (row) => selectedKeys.value[getRowKey.value(row)] === true
-            )
-    )
-
+    const someRowsSelected = computed(() => {
+        if (allRowsSelected.value === true) return false
+        const stack = computedRows.value.slice()
+        while (stack.length) {
+            const row = stack.pop()
+            if (selectedKeys.value[getRowKey.value(row)] === true) return true
+            if (row.children && row.children.length) {
+                stack.push(...row.children)
+            }
+        }
+        return false
+    })
     const rowsSelectedNumber = computed(() => props.selected.length)
 
     function isRowSelected(key: string) {

package/src/components/compound/DlTable/types.ts

@@ -22,6 +22,7 @@ export type DlTableProps = {
 
 export type DlTableRow = {
     [key: string]: any
+    children?: DlTableRow[]
 }
 
 export type DlTableFilter = string | Record<string, any>

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

@@ -513,7 +513,12 @@ export default defineComponent({
                 props.rowKey
             )
 
-            updateSelection(childrenKeys, childrenCollection, adding, event)
+            selectedData.value = updateSelection(
+                childrenKeys,
+                childrenCollection,
+                adding,
+                event
+            )
         }
         const headerSelectedValue = computed(() => {
             if (selectedData.value.length === tableRows.value.length)
@@ -538,16 +543,7 @@ export default defineComponent({
             updateSelected(value ? tableRows.value : [])
         }
         const updateSelected = (payload: DlTableRow[]) => {
-            const hasSelection = selectedData.value.length > 0
-            selectedData.value = payload
-
-            if (payload.length > 0) {
-                selectAllRows(true)
-            } else if (payload.length === 0 && hasSelection) {
-                selectAllRows(false)
-            } else {
-                emitSelectedItems(payload)
-            }
+            selectedData.value = selectAllRows(!allRowsSelected.value)
         }
         const emitSelectedItems = (payload: DlTableRow[]) => {
             emit('selected-items', payload)

package/src/components/compound/DlTreeTable/utils/treeTableRowSelection.ts

@@ -182,6 +182,7 @@ export function useTreeTableRowSelection(
         selectedItemsNested.value = selectedItems
 
         emit('selected-items', selectedItems)
+        return selectedItems
     }
 
     function isIncludedInSelectedNestedItems(
@@ -257,12 +258,13 @@ export function useTreeTableRowSelection(
         if (select) {
             const allRows = getAllRows(computedRows.value)
             const allKeys = allRows.map(getRowKey.value)
-            updateSelection(allKeys, allRows, true)
+            return updateSelection(allKeys, allRows, true)
         } else {
             clearSelection()
             selectedItemsNested.value = []
             emit('selected-items', [])
         }
+        return []
     }
 
     return {

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"

package/src/demos/DlTreeTableDemo.vue

@@ -110,7 +110,7 @@
                     :loading="loading"
                     :rows="tableRows"
                     :resizable="resizable"
-                    row-key="name"
+                    row-key="id"
                     color="dl-color-secondary"
                     title="Table Title"
                     :virtual-scroll="vScroll"
@@ -560,7 +560,15 @@ const columns2 = [
         hint: 'test hint'
     }
 ]
-
+function markAllSelectable(list: DlTableRow[]): DlTableRow[] {
+    return list.map((r) => ({
+        ...r,
+        isSelectable: true,
+        ...(Array.isArray(r.children) && r.children.length
+            ? { children: markAllSelectable(r.children) }
+            : {})
+    }))
+}
 export default defineComponent({
     components: {
         DlSwitch,
@@ -583,7 +591,7 @@ export default defineComponent({
         const denseState = ref([])
         const virtualScroll = ref([])
         const resizableState = ref([])
-        const tableRows = ref(rows)
+        const tableRows = ref(markAllSelectable(rows))
         const tableRowsVS = ref(cloneDeep(rows))
         const draggable = ref('both')
         const tableColumns = ref(columns)