@dataloop-ai/components 0.18.77 → 0.18.79

package/package.json

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

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

@@ -11,6 +11,7 @@
                 ref="smartSearchInput"
                 v-model="queryObject"
                 style="margin-bottom: 0px"
+                :width="width"
                 :status="status"
                 :aliases="aliases"
                 :schema="schema"
@@ -33,7 +34,7 @@
                                 height: '28px'
                             }"
                             :disabled="disabled"
-                            @click="emitSearchQuery"
+                            @click="$emit('search-query', queryObject)"
                         />
                     </div>
                     <div
@@ -138,6 +139,7 @@ export default defineComponent({
         //#endregion
 
         //#region data
+        // todo: more cleanup
         const inputModel = ref('')
         const jsonEditorModel = ref(false)
         const showJSONEditor = ref(false)

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

@@ -901,13 +901,12 @@ export default defineComponent({
 
     &__search-label {
         font-size: 10px;
-        height: 10px;
+        height: 15px;
         color: gray;
         position: absolute;
         word-break: break-all;
-        bottom: -10px;
+        bottom: -15px;
         max-width: 100%;
-        margin-top: 3px;
     }
 
     &__date-picker-wrapper {

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

@@ -332,6 +332,34 @@
                                     {{ col.label }}
                                 </DlTh>
                             </slot>
+                            <DlTh
+                                v-if="hasEditableColumns"
+                                key="visibleColsBtn"
+                            >
+                                <dl-button
+                                    text-color="dl-color-medium"
+                                    flat
+                                    icon="icon-dl-column"
+                                >
+                                    <dl-menu>
+                                        <dl-list separator>
+                                            <dl-option-group
+                                                :model-value="
+                                                    computedVisibleCols
+                                                "
+                                                :options="groupOptions"
+                                                :left-label="true"
+                                                max-width="250px"
+                                                type="switch"
+                                                class="table-options"
+                                                @update:model-value="
+                                                    handleVisibleColumnsUpdate
+                                                "
+                                            />
+                                        </dl-list>
+                                    </dl-menu>
+                                </dl-button>
+                            </DlTh>
                         </DlTr>
 
                         <tr
@@ -583,8 +611,16 @@ import {
 import { injectProp } from '../../../utils/inject-object-prop'
 import { DlTableRow, DlTableProps, DlTableColumn } from './types'
 import { DlPagination } from '../DlPagination'
-import { DlIcon, DlCheckbox, DlProgressBar } from '../../essential'
+import {
+    DlIcon,
+    DlCheckbox,
+    DlProgressBar,
+    DlMenu,
+    DlList
+} from '../../essential'
 import { ResizableManager } from './utils'
+import { DlButton } from '../../basic'
+import { DlOptionGroup } from '../../compound'
 import DlEmptyState from '../../basic/DlEmptyState/DlEmptyState.vue'
 import { v4 } from 'uuid'
 import { flatTreeData } from '../DlTreeTable/utils/flatTreeData'
@@ -606,7 +642,11 @@ export default defineComponent({
         DlProgressBar,
         DlIcon,
         DlCheckbox,
-        DlEmptyState
+        DlEmptyState,
+        DlButton,
+        DlOptionGroup,
+        DlMenu,
+        DlList
     },
     props,
     emits,
@@ -625,6 +665,21 @@ export default defineComponent({
         const virtScrollRef = ref(null)
         const hasVirtScroll = computed(() => props.virtualScroll === true)
 
+        const groupOptions = computed(() =>
+            (props.columns as DlTableColumn[]).map((item) => ({
+                label: item.label,
+                value: item.name
+            }))
+        )
+
+        const visibleColumnsState = ref(
+            (props.columns as DlTableColumn[]).map((col) => col.name)
+        )
+
+        const computedVisibleCols = computed(() =>
+            computedCols.value.map((col) => col.name)
+        )
+
         const { hasAnyAction } = useTableActions(props) // todo: does not work
 
         const getRowKey = computed(() =>
@@ -790,6 +845,13 @@ export default defineComponent({
             }
         )
 
+        watch(
+            () => (props as any).visibleColummns,
+            (value) => {
+                visibleColumnsState.value = value
+            }
+        )
+
         watch(
             () => props.draggable,
             () => {
@@ -950,7 +1012,8 @@ export default defineComponent({
                 props as unknown as DlTableProps,
                 computedPagination,
                 hasSelectionMode,
-                hasDraggableRows
+                hasDraggableRows,
+                visibleColumnsState
             )
 
         const { columnToSort, computedSortMethod, sort } = useTableSort(
@@ -1243,6 +1306,12 @@ export default defineComponent({
             () => Object.keys(props.emptyStateProps).length > 0
         )
 
+        const handleVisibleColumnsUpdate = (columns: string[]) => {
+            if (columns.length < 1) return
+            visibleColumnsState.value = columns
+            emit('update-visible-columns', columns)
+        }
+
         return {
             uuid: `dl-table-${v4()}`,
             rootRef,
@@ -1296,7 +1365,11 @@ export default defineComponent({
             hasSlotHeaderSelection,
             stopAndPrevent,
             updatePagination,
-            hasEmptyStateProps
+            hasEmptyStateProps,
+            groupOptions,
+            visibleColumnsState,
+            handleVisibleColumnsUpdate,
+            computedVisibleCols
         }
     }
 })

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

@@ -1,4 +1,4 @@
-import { computed, ComputedRef } from 'vue-demi'
+import { computed, ComputedRef, Ref } from 'vue-demi'
 
 import { isNumber } from '../../../../utils/is'
 import { DlTableProps, DlTableColumn, DlTableRow } from '../types'
@@ -12,7 +12,8 @@ export function useTableColumnSelection(
     props: DlTableProps,
     computedPagination: ComputedRef<TablePagination>,
     hasSelectionMode: ComputedRef<boolean>,
-    hasDraggableRows: ComputedRef<boolean>
+    hasDraggableRows: ComputedRef<boolean>,
+    visibleColumnsState: Ref
 ) {
     const colList = computed(() => {
         if (props.columns) {
@@ -40,11 +41,11 @@ export function useTableColumnSelection(
     const computedCols = computed(() => {
         const { sortBy, descending } = computedPagination.value
 
-        const cols = props.visibleColumns
+        const cols = visibleColumnsState?.value
             ? colList.value.filter(
                   (col) =>
                       col.required === true ||
-                      props.visibleColumns.includes(col.name) === true
+                      visibleColumnsState.value.includes(col.name) === true
               )
             : colList.value
 

package/src/components/compound/DlTable/utils/props.ts

@@ -46,6 +46,7 @@ export const props = {
     virtualScroll: Boolean,
     hidePagination: Boolean,
     hideSelectedBanner: Boolean,
+    hasEditableColumns: Boolean,
     selectedRowsLabel: {
         type: Function,
         default: (val: number) => `${val} records selected`

package/src/components/compound/DlTreeTable/emits.ts

@@ -10,6 +10,7 @@ export const emits = [
     'th-click',
     'row-dblclick',
     'row-contextmenu',
+    'update-visible-columns',
     ...useTableRowExpandEmits,
     ...useTreeTableRowSelectionEmits
 ]

package/src/demos/DlTableDemo.vue

@@ -408,6 +408,15 @@
                     </template>
                 </DlTable>
             </div>
+            <div>
+                <p>With editable columns</p>
+                <DlTable
+                    :rows="tableRows"
+                    :columns="tableColumns"
+                    title="Editable Columns"
+                    has-editable-columns
+                />
+            </div>
         </div>
     </div>
 </template>

package/src/demos/SmartSearchDemo/DlSmartSearchDemo.vue

@@ -26,7 +26,7 @@
         <dl-smart-search
             v-model="queryObject"
             :aliases="aliases"
-            :schema="schema"
+            :schema="schema2"
             :color-schema="colorSchema"
             :filters="filters"
             :disabled="switchState"
@@ -48,7 +48,7 @@
         <dl-smart-search-input
             v-model="queryObject2"
             :aliases="aliases"
-            :schema="schema"
+            :schema="schema2"
             :color-schema="colorSchema"
             :strict="strictState"
             :disabled="switchState"

package/src/hooks/use-suggestions.ts

@@ -383,6 +383,7 @@ const isValidByDataType = (
      */
 
     if (Array.isArray(dataType)) {
+        str = str.replace(/\'/g, '')
         let isOneOf = !!getValueMatch(dataType, str)
         for (const type of dataType) {
             isOneOf = isOneOf || isValidByDataType(str, type, operator)

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

@@ -209,6 +209,18 @@ export const stringifySmartQuery = (query: { [key: string]: any }): string => {
             continue
         }
 
+        if (key === '$and') {
+            if (Array.isArray(value)) {
+                const andObject: { [key: string]: any } = {}
+                for (const subQuery of value) {
+                    for (const subKey in subQuery) {
+                        andObject[subKey] = subQuery[subKey]
+                    }
+                }
+                return stringifySmartQuery(andObject)
+            }
+        }
+
         if (result.length) {
             result += ' AND '
         }