@dataloop-ai/components 0.18.136 → 0.18.137

package/package.json

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

package/src/components/basic/DlPopup/DlPopup.vue

@@ -201,7 +201,7 @@ export default defineComponent({
         'show',
         'before-show',
         'hide',
-        'escape-key',
+        'escapeKey',
         'before-hide',
         'update:model-value'
     ],
@@ -402,7 +402,7 @@ export default defineComponent({
         }
 
         function onEscapeKey(evt: AnchorEvent) {
-            proxy.$emit('escape-key')
+            proxy.$emit('escapeKey')
             if (!props.disableCloseByEsc) {
                 hide(evt)
             }

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

@@ -30,6 +30,7 @@
                         :placeholder="inputPlaceholder"
                         :contenteditable="!disabled"
                         @keypress="onKeyPress"
+                        @keyup.esc="onKeyPress"
                         @input="onInput"
                         @click.stop.prevent="focus"
                         @blur="blur"
@@ -69,12 +70,14 @@
             :offset="menuOffset"
             :expanded="expanded"
             @set-input-value="setInputFromSuggestion"
+            @escape-key="onEscapeKey"
         />
         <dl-menu
             v-if="showDatePicker && focused"
             v-model="showDatePicker"
             :disabled="disabled"
             :offset="[0, 3]"
+            @escape-key="onEscapeKey"
         >
             <div class="dl-smart-search-input__date-picker-wrapper">
                 <dl-date-picker
@@ -362,7 +365,7 @@ export default defineComponent({
                 const bracketless = removeBrackets(searchQuery.value)
                 const cleanedAliases = revertAliases(bracketless, aliases.value)
                 const json = toJSON(cleanedAliases)
-                if (!isEqual(json, modelValue.value)) {
+                if (isValid.value && !isEqual(json, modelValue.value)) {
                     emit('update:model-value', json)
                 }
                 return json
@@ -371,7 +374,7 @@ export default defineComponent({
                     error: e,
                     message: 'Could not translate given JSON to a valid Scheme'
                 })
-                return modelValue.value
+                return null
             }
         }
 
@@ -410,6 +413,15 @@ export default defineComponent({
             emit('focus')
         }
 
+        const processBlur = () => {
+            input.value.scrollLeft = 0
+            input.value.scrollTop = 0
+            focused.value = false
+            expanded.value = true
+            updateJSONQuery()
+            emit('blur')
+        }
+
         const blur = (
             e: Event | null = null,
             options: { force?: boolean } = {}
@@ -430,12 +442,7 @@ export default defineComponent({
                     return
                 }
 
-                input.value.scrollLeft = 0
-                input.value.scrollTop = 0
-                focused.value = false
-                expanded.value = true
-                updateJSONQuery()
-                emit('blur')
+                processBlur()
             } else {
                 focus()
                 cancelBlur.value = cancelBlur.value - 1
@@ -468,24 +475,19 @@ export default defineComponent({
         })
 
         const onKeyPress = (e: KeyboardEvent) => {
-            if (e.code === 'Enter' || e.key === 'Enter') {
+            if (e.code === 'Escape' || e.key === 'Escape') {
                 e.preventDefault()
                 e.stopPropagation()
 
-                if (showSuggestions.value || showDatePicker.value) {
-                    return
-                }
-
-                if (endsWithOperator.value) {
-                    return
-                }
+                onEscapeKey()
+                return
+            }
 
-                if (!input.value.innerHTML.length) {
-                    return
-                }
+            if (e.code === 'Enter' || e.key === 'Enter') {
+                e.preventDefault()
+                e.stopPropagation()
 
-                emit('search', updateJSONQuery())
-                showSuggestions.value = false
+                onEnterKey()
                 return
             }
 
@@ -554,6 +556,43 @@ export default defineComponent({
                 return ''
             }
         }
+
+        const onEnterKey = () => {
+            if (showSuggestions.value || showDatePicker.value) {
+                return
+            }
+
+            if (endsWithOperator.value) {
+                return
+            }
+
+            if (!input.value.innerHTML.length) {
+                return
+            }
+
+            if (!isValid.value) {
+                return
+            }
+
+            const toSearch = updateJSONQuery()
+            if (toSearch) {
+                emit('search', toSearch)
+                showSuggestions.value = false
+            }
+        }
+
+        const onEscapeKey = () => {
+            if (
+                showDatePicker.value ||
+                !focused.value ||
+                showSuggestions.value
+            ) {
+                return
+            }
+
+            input.value.blur()
+            processBlur()
+        }
         //#endregion
 
         //#region computed
@@ -688,6 +727,10 @@ export default defineComponent({
                 : props.placeholder
         })
 
+        const isValid = computed(() => {
+            return computedStatus.value.type !== 'error'
+        })
+
         //#endregion
 
         //#region watcher
@@ -792,7 +835,8 @@ export default defineComponent({
             onDateSelection,
             computedStatus,
             setInputFromSuggestion,
-            inputPlaceholder
+            inputPlaceholder,
+            onEscapeKey
         }
     }
 })

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

@@ -18,6 +18,7 @@
             @hide="onHide"
             @highlightedIndex="setHighlightedIndex"
             @handleSelectedItem="handleSelectedItem"
+            @escapeKey="onEscapeKey"
         >
             <dl-list>
                 <dl-list-item
@@ -37,6 +38,7 @@
 import { computed, defineComponent, PropType, ref } from 'vue-demi'
 import { DlMenu, DlList } from '../../../../essential'
 import { DlListItem } from '../../../../basic'
+import { emit } from 'process'
 
 export default defineComponent({
     components: {
@@ -81,7 +83,7 @@ export default defineComponent({
             default: 1
         }
     },
-    emits: ['set-input-value', 'update:model-value'],
+    emits: ['set-input-value', 'update:model-value', 'escapeKey'],
     setup(props, { emit }) {
         const isMenuOpen = ref(false)
         const highlightedIndex = ref(-1)
@@ -109,6 +111,11 @@ export default defineComponent({
             return `#dl-smart-search-input-text-area-${props.parentId}`
         })
 
+        const onEscapeKey = () => {
+            emit('escapeKey')
+            emit('update:model-value', false)
+        }
+
         return {
             defaultTarget,
             setHighlightedIndex,
@@ -117,7 +124,8 @@ export default defineComponent({
             onShow,
             onHide,
             emitModelValue,
-            handleOption
+            handleOption,
+            onEscapeKey
         }
     }
 })

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

@@ -147,6 +147,7 @@
                             <DlTh
                                 v-if="hasVisibleColumns"
                                 key="header-cell-visible-columns"
+                                class="visible-columns-justify-end"
                             >
                                 <dl-button
                                     text-color="dl-color-medium"
@@ -317,6 +318,7 @@
                                 <DlTd
                                     v-if="hasVisibleColumns"
                                     key="body-cell-row-actions"
+                                    class="visible-columns-justify-end"
                                 >
                                     <slot
                                         v-bind="
@@ -446,6 +448,7 @@
                             <DlTh
                                 v-if="hasVisibleColumns"
                                 key="header-cell-visible-columns"
+                                class="visible-columns-justify-end"
                             >
                                 <dl-button
                                     text-color="dl-color-medium"
@@ -601,6 +604,7 @@
                                 <DlTd
                                     v-if="hasVisibleColumns"
                                     key="body-cell-row-actions"
+                                    class="visible-columns-justify-end"
                                 >
                                     <slot
                                         v-bind="
@@ -713,7 +717,6 @@ import {
     getCurrentInstance,
     ComputedRef,
     onMounted,
-    toRef,
     toRefs
 } from 'vue-demi'
 import { props } from './utils/props'

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

@@ -27,8 +27,10 @@
 </template>
 
 <script lang="ts">
+import { isString } from 'lodash'
 import { defineComponent, getCurrentInstance, computed, ref } from 'vue-demi'
 import { useSizeObserver } from '../../../../hooks/use-size-observer'
+import { stringStyleToRecord } from '../../../../utils'
 import { DlIcon } from '../../../essential'
 import { DlTooltip } from '../../../shared'
 
@@ -44,7 +46,7 @@ export default defineComponent({
     },
     emits: ['click'],
 
-    setup(props, { emit }) {
+    setup(props, { emit, attrs }) {
         const vm = getCurrentInstance()
         const tableTh = ref(null)
 
@@ -104,21 +106,25 @@ export default defineComponent({
 
         const onClick = !hasOptionalProps.value ? onClickFn : handleClick
 
-        const state = {
+        return {
             isSortable: !hasOptionalProps.value
                 ? false
                 : column?.value?.sortable ?? false,
-            thClasses,
+            thClasses: ((attrs.class ?? '') + ' ' + thClasses.value).trim(),
             align: column?.value?.align ?? 'left',
             iconClass: column?.value?.iconClass ?? null,
             hasOptionalProps,
-            headerStyle: column.value.headerStyle ?? '',
+            headerStyle: [
+                isString(attrs.style)
+                    ? stringStyleToRecord(attrs.style)
+                    : attrs.style,
+                stringStyleToRecord(column.value.headerStyle ?? '')
+            ] as any,
             tableTh,
             hasEllipsis,
-            onClick
+            onClick,
+            column
         }
-
-        return state
     }
 })
 </script>

package/src/components/compound/DlTable/styles/dl-table-styles.scss

@@ -508,4 +508,10 @@
     position: relative;
     border-bottom: 1px solid var(--dl-color-separator);
   }
+}
+
+.visible-columns-justify-end {
+  &::v-deep div { 
+    justify-content: flex-end;
+  }
 }

package/src/components/essential/DlMenu/DlMenu.vue

@@ -170,7 +170,7 @@ export default defineComponent({
     emits: [
         ...useModelToggleEmits,
         'click',
-        'escape-key',
+        'escapeKey',
         'highlightedIndex',
         'handleSelectedItem'
     ],
@@ -385,7 +385,7 @@ export default defineComponent({
         }
 
         function onEscapeKey(evt: AnchorEvent) {
-            emit('escape-key')
+            emit('escapeKey')
             hide(evt)
         }
 

package/src/demos/DlTableDemo.vue

@@ -416,8 +416,8 @@
                     title="Editable Columns"
                     has-visible-columns
                 >
-                    <template #body-cell-row-actions="{ row }">
-                        {{ row }} actiosnsss
+                    <template #body-cell-row-actions="">
+                        <dl-button label="test button" />
                     </template>
                 </DlTable>
             </div>