@dataloop-ai/components 0.18.0 → 0.18.2

package/src/components/compound/DlInput/DlInput.vue

@@ -1,6 +1,7 @@
 <template>
     <div
         :id="uuid"
+        :style="cssVars"
         :class="rootContainerClasses"
     >
         <div :class="wrapperClasses">
@@ -33,9 +34,16 @@
                     </dl-tooltip>
                 </span>
             </div>
+            <div
+                v-if="!!topMessage.length && !isSmall"
+                class="break"
+            />
             <div
                 v-show="!!topMessage.length"
-                class="dl-text-input__top-message-container"
+                :class="{
+                    'dl-text-input__top-message-container': true,
+                    'dl-text-input__top-message-container--s': isSmall
+                }"
             >
                 <dl-info-error-message
                     v-show="!!topMessage.length"
@@ -135,7 +143,7 @@
                             :key="item"
                             clickable
                             style="font-size: 12px"
-                            :is-highlighted="suggestIndex === highlightedIndex"
+                            :highlighted="suggestIndex === highlightedIndex"
                             @click="onClick($event, item)"
                         >
                             <span
@@ -202,9 +210,9 @@
 <script lang="ts">
 import { debounce } from 'lodash'
 import { computed, defineComponent, PropType, ref } from 'vue-demi'
-import { DlInfoErrorMessage } from '../../shared'
+import { DlInfoErrorMessage, DlTooltip } from '../../shared'
 import { DlListItem } from '../../basic'
-import { DlMenu, DlIcon, DlList, DlTooltip } from '../../essential'
+import { DlMenu, DlIcon, DlList } from '../../essential'
 import { DlButton } from '../../basic'
 import { InputSizes, TInputSizes } from '../../../utils/input-sizes'
 import { v4 } from 'uuid'
@@ -326,7 +334,11 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
-        fitContent: Boolean
+        fitContent: Boolean,
+        margin: {
+            type: String,
+            default: null
+        }
     },
     emits: ['input', 'focus', 'blur', 'clear', 'enter', 'update:model-value'],
     setup(props, { emit }) {
@@ -389,6 +401,26 @@ export default defineComponent({
             }
             return classes
         },
+        getBorderColor(): string {
+            if (this.error) {
+                return `var(--dl-color-negative)`
+            } else if (this.warning) {
+                return `var(--dl-color-warning)`
+            } else {
+                return `var(--dl-color-secondary)`
+            }
+        },
+        cssVars(): Record<string, any> {
+            let inputMargin = this.margin
+
+            if (!this.margin && this.isSmall) {
+                inputMargin = '0px 20px 0px 0px'
+            }
+            return {
+                '--dl-input-margin': inputMargin,
+                '--dl-input-border-color-hover': this.getBorderColor
+            }
+        },
         inputClasses(): string[] {
             const classes = [
                 'dl-text-input__input',
@@ -428,10 +460,13 @@ export default defineComponent({
             ]
         },
         isSmall(): boolean {
-            return this.size === InputSizes.s
+            return (
+                this.size === (InputSizes.s as TInputSizes) ||
+                this.size === (InputSizes.small as TInputSizes)
+            )
         },
         hasPrepend(): boolean {
-            return !!this.$slots.prepend && !this.isSmall
+            return !!this.$slots.prepend
         },
         hasAppend(): boolean {
             return (
@@ -454,7 +489,6 @@ export default defineComponent({
                 !this.disabled &&
                 !this.readonly &&
                 !!this.modelValue
-                // this.focused
             )
         },
         showShowPassButton(): boolean {
@@ -616,7 +650,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .dl-text-input {
-    padding: 20px 20px 20px 0px;
+    margin: var(--dl-input-margin);
 
     /* Chrome, Safari, Edge, Opera */
     input::-webkit-outer-spin-button,
@@ -640,8 +674,10 @@ export default defineComponent({
         align-items: center;
 
         &--s {
-            margin-right: 5px;
-            margin-bottom: 0px;
+            margin: 4px auto auto;
+        }
+        &--small {
+            margin: 4px auto auto;
         }
     }
 
@@ -671,6 +707,13 @@ export default defineComponent({
         display: flex;
         margin-bottom: 10px;
         text-align: start;
+
+        &--s {
+            padding: 0px 10px;
+        }
+        &--small {
+            padding: 0px 10px;
+        }
     }
 
     &__input-wrapper {
@@ -710,8 +753,17 @@ export default defineComponent({
             padding-top: 7px;
             padding-bottom: 7px;
         }
+        &--medium {
+            padding-top: 7px;
+            padding-bottom: 7px;
+        }
 
         &--s {
+            padding-top: 4px;
+            padding-bottom: 3px;
+            padding-right: 5px;
+        }
+        &--small {
             padding-top: 3px;
             padding-bottom: 3px;
             padding-left: 5px;
@@ -721,14 +773,12 @@ export default defineComponent({
         &--error {
             border-color: var(--dl-color-negative);
             &:hover {
-                border-color: var(--dl-color-separator) !important;
             }
         }
 
         &--warning {
-            border-color: var(--dl-color-warning);
+            border-color: var(--dl-input-border-color-hover);
             &:hover {
-                border-color: var(--dl-color-separator) !important;
             }
         }
 
@@ -738,11 +788,11 @@ export default defineComponent({
         }
 
         &:hover {
-            border-color: var(--dl-color-secondary);
+            border-color: var(--dl-input-border-color-hover);
         }
 
         &:focus {
-            border-color: var(--dl-color-secondary);
+            border-color: var(--dl-input-border-color-hover);
         }
 
         &:disabled {
@@ -750,7 +800,7 @@ export default defineComponent({
             color: var(--dl-color-disabled);
             cursor: not-allowed;
         }
-        &:readonly {
+        &:read-only {
             border-color: var(--dl-color-separator);
             cursor: text;
             &:hover {
@@ -770,11 +820,24 @@ export default defineComponent({
             height: 34px;
         }
 
+        &--large {
+            height: 34px;
+        }
+
         &--m {
             height: 28px;
         }
 
+        &--medium {
+            height: 28px;
+        }
+
         &--s {
+            margin-top: 1px;
+            height: 20px;
+        }
+
+        &--small {
             height: 20px;
         }
 

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

@@ -1,196 +1,59 @@
 <template>
-    <div class="json-editor-layout">
-        <dl-dialog-box
-            :model-value="modelValue"
-            :width="800"
-        >
-            <template #header>
-                <dl-dialog-box-header
-                    title="DQL Search"
-                    :close-button="true"
-                    style="font-weight: 200"
-                    @onClose="$emit('update:modelValue', false)"
-                />
-            </template>
-            <template #body>
-                <div class="json-query">
-                    <div class="json-query-menu">
-                        <dl-select
-                            :model-value="selectedOption"
-                            width="200px"
-                            :options="selectOptions"
-                            placeholder="New Query"
-                            @update:model-value="updateActiveQuery"
-                        />
-                        <dl-button
-                            icon="icon-dl-align-left"
-                            label="Align Left"
-                            flat
-                            color="secondary"
-                            @click="alignText"
-                        />
-                    </div>
-                    <div
-                        ref="jsonEditorRef"
-                        class="json-editor"
-                    />
-                </div>
-            </template>
-            <template #footer>
-                <div class="footer-menu">
-                    <div class="footer-delete">
-                        <dl-button
-                            :disabled="deleteButtonState"
-                            icon="icon-dl-delete"
-                            label="Delete Query"
-                            flat
-                            color="secondary"
-                            @click="$emit('remove', activeQuery)"
-                        />
-                    </div>
-                    <div class="footer-save">
-                        <dl-button
-                            outlined
-                            label="Save As"
-                            @click="handleSaveButton"
-                        />
-                        <dl-button
-                            label="Search"
-                            @click="handleSearchButton"
-                        />
-                    </div>
-                </div>
-            </template>
-        </dl-dialog-box>
-    </div>
+    <div
+        ref="jsonEditorRef"
+        class="json-editor"
+    />
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue-demi'
-import { JSONEditor, JSONValue, Mode } from 'vanilla-jsoneditor'
+import { defineComponent } from 'vue-demi'
+import { JSONEditor, Mode } from 'vanilla-jsoneditor'
 import { debounce } from 'lodash'
-import { Query } from './types'
-import { DlSelect } from '../DlSelect'
-import { DlButton } from '../../basic'
-import { DlDialogBox, DlDialogBoxHeader } from '../DlDialogBox'
-
-interface JSONContent {
-    json: JSONValue
-    text: string
-}
 
 export default defineComponent({
-    components: {
-        DlDialogBox,
-        DlDialogBoxHeader,
-        DlSelect,
-        DlButton
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
     },
     props: {
-        modelValue: { type: Boolean, default: false },
-        query: {
-            type: Object as PropType<Query>,
-            default: () =>
-                ({
-                    name: 'New Query',
-                    query: null
-                } as Query)
+        /**
+         * The string to display and modify as JSON
+         */
+        modelValue: {
+            type: String,
+            default: '{}'
         },
-        queries: {
-            type: Array as PropType<Query[]>,
-            default: () => [] as Query[]
+        /**
+         *  When this prop is false, the editor will not refresh, paired with the update-prevent event
+         * it helps with controlling when the editor refreshes
+         */
+        preventUpdate: {
+            type: Boolean,
+            default: null
         }
     },
-    emits: ['update:modelValue', 'save', 'remove', 'search', 'update-query'],
+    emits: ['update:modelValue', 'update-prevent', 'align-text'],
     data() {
         return {
-            preventOnChange: false,
-            preventUpdate: false,
             jsonEditor: {} as JSONEditor,
-            activeQuery: this.query,
-            selectedOption: {
-                label: this.query?.name,
-                value: this.query?.query
-            }
-        }
-    },
-    computed: {
-        selectOptions(): Record<string, string>[] {
-            return [
-                {
-                    label: 'New Query',
-                    value: ''
-                },
-                ...this.queries.map((q: Query) => ({
-                    label: q.name,
-                    value: q.query
-                }))
-            ]
-        },
-        deleteButtonState(): boolean {
-            return !this.queries.filter(
-                (q: Query) => q.name === this.activeQuery?.name
-            ).length
+            preventOnChange: false
         }
     },
     watch: {
-        modelValue(value) {
-            this.$nextTick(() => {
-                if (value) this.initJsonEditor()
-                else this.jsonEditor?.destroy()
-                this.activeQuery = this.query
-            })
-        },
-        queries() {
-            this.resetEditor()
-        },
-        activeQuery(val) {
-            this.$emit('update-query', val)
-            this.jsonEditor?.set({
-                text: val.query
-            })
-            this.selectedOption = {
-                label: val.name,
-                value: val.query
+        modelValue: {
+            handler(val) {
+                if (this.preventUpdate === false) {
+                    this.setJsonText(val)
+                }
             }
         }
     },
     mounted() {
         this.initJsonEditor()
+        this.setJsonText(this.modelValue)
+        this.$emit('align-text')
     },
     methods: {
-        updateActiveQuery(option: Record<string, string>) {
-            this.activeQuery = {
-                name: option.label,
-                query: option.value
-            }
-            this.jsonEditor?.destroy()
-            this.initJsonEditor()
-        },
-        alignText() {
-            if (!(this.jsonEditor.get && this.jsonEditor.get())) return
-            try {
-                const parsed = JSON.parse(
-                    (
-                        this.jsonEditor.get &&
-                        (this.jsonEditor?.get() as JSONContent)
-                    )?.text
-                )
-                const newText = JSON.stringify(parsed, null, 2)
-                this.jsonEditor?.set({ text: newText })
-            } catch (error) {}
-        },
-        resetEditor() {
-            if (this.jsonEditor.set) {
-                this.jsonEditor.set({
-                    text: '{}'
-                })
-            }
-            this.selectedOption = {
-                label: 'New Query',
-                value: ''
-            }
-        },
         initJsonEditor() {
             const initialAttrs: any = {
                 onChange: debounce(
@@ -199,27 +62,17 @@ export default defineComponent({
                             this.preventOnChange = false
                             return
                         }
-                        this.activeQuery = {
-                            name: this.activeQuery
-                                ? this.activeQuery.name
-                                : 'New Query',
-                            query: updatedContent.text
+                        this.$emit('update:modelValue', updatedContent.text)
+                        if (this.preventUpdate !== null) {
+                            this.$emit('update-prevent', true)
                         }
-                        this.preventUpdate = true
                     },
                     100
                 ),
                 mode: Mode.text,
                 mainMenuBar: false,
                 navigationBar: false,
-                statusBar: false,
-                ...(this.activeQuery !== undefined && {
-                    content: {
-                        text: this.activeQuery?.query
-                            ? this.activeQuery.query
-                            : '{}'
-                    }
-                })
+                statusBar: false
             }
 
             // There is type instantiation issue with JSONEditor,
@@ -231,22 +84,11 @@ export default defineComponent({
                     : document.createElement('div'),
                 props: initialAttrs
             })
-            this.alignText()
-        },
-        handleSaveButton() {
-            this.$emit(
-                'save',
-                this.activeQuery
-                    ? this.activeQuery
-                    : {
-                          name: 'New Query',
-                          query: (this.jsonEditor?.get() as any).text || ''
-                      }
-            )
         },
-        handleSearchButton() {
-            this.$emit('search', this.activeQuery)
-            this.$emit('update:modelValue', false)
+        setJsonText(text: string) {
+            this.jsonEditor?.set({
+                text
+            })
         }
     }
 })
@@ -260,6 +102,9 @@ export default defineComponent({
     --jse-background-color: var(--dl-color-tooltip-text);
     --jse-value-color-boolean: #ae6307;
     --jse-value-color-string: #337433;
+    --jse-panel-background: var(--dl-color-fill);
+    --jse-panel-border: var(--dl-color-separator);
+    height: 100%;
     .jse-error {
         display: none !important;
     }
@@ -267,26 +112,4 @@ export default defineComponent({
         display: none !important;
     }
 }
-
-.json-query-menu {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-.footer-save button {
-    margin: 0px 10px;
-}
-
-.footer-menu {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-}
-.footer-save {
-    width: 25%;
-    display: flex;
-    justify-content: space-between;
-}
 </style>

package/src/components/compound/DlOptionGroup/DlOptionGroup.vue

@@ -60,7 +60,8 @@ import {
 } from './types'
 import { loggerFactory } from '../../../utils'
 import { v4 } from 'uuid'
-import { DlIcon, DlTooltip } from '../../essential'
+import { DlIcon } from '../../essential'
+import { DlTooltip } from '../../shared'
 
 export default defineComponent({
     name: 'DlOptionGroup',
@@ -84,7 +85,11 @@ export default defineComponent({
             validator: optionsValidator
         },
         type: { type: String, default: 'radio', validator: typeValidator },
-        modelValue: { type: [Array, String, Number, Boolean], required: true }
+        modelValue: {
+            type: [Array, String, Number, Boolean],
+            required: false,
+            default: null
+        }
     },
     data() {
         const logger = loggerFactory('DlOptionGroup')
@@ -123,15 +128,7 @@ export default defineComponent({
                         : 'flex-end',
                 '--option-group-width':
                     this.leftLabel && !this.inline ? '100%' : 'auto',
-                '--option-group-max-width': this.maxWidth,
-                '--control-element-padding-left': this.leftLabel
-                    ? '10px'
-                    : this.inline
-                    ? '12px'
-                    : '0px',
-                '--control-element-padding-right': this.leftLabel
-                    ? '0px'
-                    : '10px'
+                '--option-group-max-width': this.maxWidth
             }
         }
     },
@@ -160,6 +157,11 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+.control-element {
+    display: flex;
+    align-items: center;
+}
+
 .tooltip-icon {
     color: var(--dl-color-medium);
     display: flex !important;
@@ -169,9 +171,11 @@ export default defineComponent({
     display: inline-flex;
     width: var(--option-group-width);
     max-width: var(--option-group-max-width);
+    gap: 20px;
 }
 .option-group-wrapper.column {
     flex-direction: column;
+    gap: 10px;
 }
 
 .option {
@@ -181,8 +185,8 @@ export default defineComponent({
     justify-content: var(--option-justify-content);
     font-size: var(--dl-font-size-body);
     user-select: none;
-    height: 24px;
     color: var(--dl-color-darker);
+    gap: 10px;
 }
 
 .disabled {
@@ -192,9 +196,4 @@ export default defineComponent({
     }
     color: var(--dl-color-disabled);
 }
-
-.control-element {
-    padding-left: var(--control-element-padding-left);
-    padding-right: var(--control-element-padding-right);
-}
 </style>

package/src/components/compound/DlOptionGroup/components/MenuItemWrapper.vue

@@ -1,6 +1,6 @@
 <template>
     <dl-list-item
-        as="label"
+        type="label"
         clickable
         @click="emitClick"
     >
@@ -37,7 +37,7 @@ export default defineComponent({
 .menu-item-wrapper-section {
     display: flex;
     flex-direction: row-reverse;
-    justify-content: flex-start;
+    justify-content: flex-end;
     align-items: center;
 }
 

package/src/components/compound/DlPagination/DlPagination.vue

@@ -146,7 +146,7 @@ export default defineComponent({
             return to > this.totalItems ? this.totalItems : to
         },
         max(): number {
-            return this.rowsPerPageState === 0
+            return this.rowsPerPageState === 0 || this.totalItems === 0
                 ? 1
                 : Math.ceil(this.totalItems / this.rowsPerPageState)
         }

package/src/components/compound/DlPagination/components/PaginationLegend.vue

@@ -36,7 +36,5 @@ export default defineComponent({
     justify-content: flex-end;
     display: flex;
     color: var(--dl-color-lighter);
-    padding-left: 16px;
-    margin-left: auto;
 }
 </style>

package/src/components/compound/DlPagination/components/RowsSelector.vue

@@ -69,11 +69,9 @@ export default defineComponent({
 <style scoped lang="scss">
 .dl-pagination {
     &--rows_selector {
-        width: 15%;
         display: flex;
         align-items: center;
         color: var(--dl-color-darker);
-        padding-right: 2px;
     }
 
     &--rows_per_page_label {