@dataloop-ai/components 0.20.240 → 0.20.242

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.20.240",
+  "version": "0.20.242",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",
@@ -23,7 +23,7 @@
     "check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
   },
   "dependencies": {
-    "@dataloop-ai/icons": "^3.1.69",
+    "@dataloop-ai/icons": "^3.1.72",
     "@monaco-editor/loader": "^1.4.0",
     "@types/flat": "^5.0.2",
     "@types/lodash": "^4.14.184",

package/src/components/basic/DlAlert/DlAlert.vue

@@ -23,11 +23,7 @@
                     </span>
                 </div>
             </div>
-            <div
-                v-if="$slots.actions"
-                class="actions"
-                data-test="actions"
-            >
+            <div v-if="$slots.actions" class="actions" data-test="actions">
                 <slot name="actions" />
             </div>
             <div
@@ -157,7 +153,10 @@ export default defineComponent({
             type: String,
             required: true,
             validator: (value: string) =>
-                includes(['info', 'success', 'warning', 'error', 'discovery'], value)
+                includes(
+                    ['info', 'success', 'warning', 'error', 'discovery'],
+                    value
+                )
         },
         textColor: {
             type: String,

package/src/components/basic/DlButton/DlButton.vue

@@ -253,7 +253,12 @@ export default defineComponent({
             ]
         },
         getIconColor(): string {
-            if (this.flat && this.hasIcon && !this.hasContent && this.icon === 'icon-dl-info') {
+            if (
+                this.flat &&
+                this.hasIcon &&
+                !this.hasContent &&
+                this.icon === 'icon-dl-info'
+            ) {
                 return null
             }
             if (this.disabled) {

package/src/components/compound/DlDialogBox/components/DlDialogBoxHeader.vue

@@ -24,15 +24,13 @@
         </div>
         <dl-button
             v-if="closeButton"
-            style="
-                --dl-button-padding: 5px;
-                --dl-button-bg-hover: var(--dl-color-fill-secondary);
-            "
+            style="--dl-button-bg-hover: var(--dl-color-fill-secondary)"
             class="close-button"
             icon="icon-dl-close"
             size="xl"
             flat
             text-color="dl-color-darker"
+            :padding="closeIconSizePadding"
             @click="$emit('onClose')"
         >
             <dl-tooltip :delay="800"> Close </dl-tooltip>
@@ -43,6 +41,7 @@
 <script lang="ts">
 import { computed, defineComponent } from 'vue-demi'
 import DlButton from '../../../basic/DlButton/DlButton.vue'
+import { setIconPadding } from '../../../basic/DlButton/utils'
 import { DlEllipsis } from '../../../essential'
 import { DlTooltip } from '../../../shared'
 
@@ -63,7 +62,8 @@ export default defineComponent({
     setup(props, { slots }) {
         const hasTitle = computed(() => !!props.title || !!slots.title)
         const hasSubtitle = computed(() => !!props.subtitle || !!slots.subtitle)
-        return { hasTitle, hasSubtitle }
+        const closeIconSizePadding = `0 0 0 0`
+        return { hasTitle, hasSubtitle, closeIconSizePadding }
     }
 })
 </script>

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

@@ -115,6 +115,7 @@
                                         text-color="dl-color-darker"
                                         flat
                                         fluid
+                                        :padding="clearIconSizePadding"
                                         @click="onClear"
                                     />
                                     <dl-tooltip v-if="clearButtonTooltip">
@@ -347,6 +348,7 @@ import { setCaretAtTheEnd } from '../../../utils'
 import { DlInputFile, DlInputSuggestion } from './types'
 import InputFileElement from './components/InputFileElement.vue'
 import { stateManager } from '../../../StateManager'
+import { setIconPadding } from '../../basic/DlButton/utils'
 
 export default defineComponent({
     name: 'DlInput',
@@ -1069,6 +1071,10 @@ export default defineComponent({
             if (this.isSmall) return 'xs'
             return 'm'
         },
+        clearIconSizePadding(): string {
+            const paddingRight = setIconPadding(this.clearIconSize)
+            return `0 ${paddingRight} 0 0`
+        },
         passShowIcon(): string {
             return this.showPass ? 'icon-dl-hide' : 'icon-dl-show'
         },

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

@@ -1111,7 +1111,8 @@ export default defineComponent({
 
         const uuid = v4()
         const watchFocusIn = () => {
-            focused.value = focused.value ||
+            focused.value =
+                focused.value ||
                 !!document.activeElement?.closest(`#DlSmartSearchInput${uuid}`)
         }
 

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

@@ -4,7 +4,10 @@
             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;
+                --dl-dialog-box-content-padding: 0;
+            "
         >
             <template #header>
                 <dl-dialog-box-header
@@ -17,8 +20,8 @@
                 <div class="json-editor-layout">
                     <div class="json-query-menu">
                         <dl-select
-                            :model-value="selectedOption"
                             ref="jsonQueryMenu"
+                            :model-value="selectedOption"
                             width="300px"
                             :options="selectOptions"
                             placeholder="New Query"
@@ -39,7 +42,10 @@
                                     v-if="selectOptions.length < 2"
                                     class="json-query-menu-no-option"
                                     disabled
-                                    style="cursor: default !important; padding: 14px 0 10px 0;"
+                                    style="
+                                        cursor: default !important;
+                                        padding: 14px 0 10px 0;
+                                    "
                                 >
                                     No Saved Queries
                                 </div>
@@ -197,7 +203,8 @@
             </template>
             <template #body>
                 <dl-typography size="h5">
-                    Are you sure you want to permanently delete the following query?
+                    Are you sure you want to permanently delete the following
+                    query?
                     <br />
                     {{ optionToDelete.label }}
                     <br />
@@ -207,9 +214,7 @@
             </template>
             <template #footer>
                 <div class="full-width flex justify-end">
-                    <dl-button @click="deleteQuery">
-                        Delete
-                    </dl-button>
+                    <dl-button @click="deleteQuery"> Delete </dl-button>
                 </div>
             </template>
         </dl-dialog-box>
@@ -287,18 +292,6 @@ export default defineComponent({
         '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)
 
@@ -498,6 +491,22 @@ export default defineComponent({
             saveQuery,
             deleteQuery
         }
+    },
+    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
+        }
     }
 })
 </script>

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

@@ -327,7 +327,10 @@
                     </div>
                 </dl-list>
                 <dl-list-item
-                    v-if="hasAfterOptions && (!noOptions || showAfterOptionsWhenEmpty)"
+                    v-if="
+                        hasAfterOptions &&
+                            (!noOptions || showAfterOptionsWhenEmpty)
+                    "
                     :padding="afterOptionsPadding"
                 >
                     <dl-item-section>

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

@@ -11,6 +11,7 @@
             flat
             icon="icon-dl-close"
             size="xl"
+            :padding="closeIconSizePadding"
             @click="$emit('close')"
         />
     </div>
@@ -18,6 +19,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
 import { DlButton } from '../../../basic'
+import { setIconPadding } from '../../../basic/DlButton/utils'
 import { DlTypography } from '../../../essential'
 
 export default defineComponent({
@@ -34,7 +36,11 @@ export default defineComponent({
         },
         hideCloseButton: Boolean
     },
-    emits: ['close']
+    emits: ['close'],
+    setup() {
+        const closeIconSizePadding = `0 0 0 0`
+        return { closeIconSizePadding }
+    }
 })
 </script>
 <style lang="scss" scoped>

package/src/components/essential/DlIcon/DlIcon.vue

@@ -111,10 +111,7 @@ export default defineComponent({
         const isHovered = ref(false)
 
         const isInfoDefault = computed<boolean>(() => {
-            return (
-                icon.value === 'icon-dl-info' &&
-                !color.value
-            )
+            return icon.value === 'icon-dl-info' && !color.value
         })
 
         const effectiveColor = computed<string | null>(() => {

package/src/components/essential/DlSwitch/DlSwitch.vue

@@ -16,10 +16,7 @@
                 {{ leftLabel }}
             </slot>
         </label>
-        <span
-            class="dl-switch-container"
-            :style="`max-height: ${size}px;`"
-        >
+        <span class="dl-switch-container" :style="`max-height: ${size}px;`">
             <input
                 :id="computedId"
                 ref="input"
@@ -29,7 +26,7 @@
                 class="dl-switch-checkbox"
                 :style="cssVars"
                 @change="handleChange"
-            >
+            />
             <label
                 :for="computedId"
                 class="dl-switch"
@@ -191,7 +188,7 @@ export default defineComponent({
             // todo: what the hell ?
             debounce(() => {
                 nextTick(() => {
-                    (this.$refs.input as HTMLInputElement).checked =
+                    ;(this.$refs.input as HTMLInputElement).checked =
                         this.isTrue
                 })
             }, 100)
@@ -203,7 +200,7 @@ export default defineComponent({
                 stopAndPrevent(e)
             }
 
-            (e.target as HTMLInputElement).checked = this.isTrue
+            ;(e.target as HTMLInputElement).checked = this.isTrue
 
             if (!this.disabled) {
                 let newValue: any | any[]

package/src/demos/DlButtonDemo.vue

@@ -1,9 +1,6 @@
 <template>
     <div style="width: 950px; padding-top: 20px">
-        <div
-            v-for="buttonSize in buttons"
-            :key="buttonSize"
-        >
+        <div v-for="buttonSize in buttons" :key="buttonSize">
             <h3>Size {{ buttonSize }}</h3>
             <div style="display: flex; gap: 10px; justify-content: center">
                 <div class="col">
@@ -13,18 +10,10 @@
                         label="Contained text filled"
                         @click="log"
                     />
-                    <DlButton
-                        :size="buttonSize"
-                        outlined
-                        @click="log"
-                    >
+                    <DlButton :size="buttonSize" outlined @click="log">
                         Outlined
                     </DlButton>
-                    <DlButton
-                        :size="buttonSize"
-                        flat
-                        @click="log"
-                    >
+                    <DlButton :size="buttonSize" flat @click="log">
                         flat primary
                     </DlButton>
                     <DlButton
@@ -35,19 +24,10 @@
                     >
                         Flat Secondary
                     </DlButton>
-                    <DlButton
-                        flat
-                        disabled
-                        :size="buttonSize"
-                        @click="log"
-                    >
+                    <DlButton flat disabled :size="buttonSize" @click="log">
                         Disabled Flat
                     </DlButton>
-                    <DlButton
-                        disabled
-                        :size="buttonSize"
-                        @click="log"
-                    >
+                    <DlButton disabled :size="buttonSize" @click="log">
                         Disabled
                     </DlButton>
                 </div>
@@ -62,39 +42,14 @@
                 margin-top: 50px;
             "
         >
-            <DlButton
-                :fluid="true"
-                size="xl"
-                @click="log"
-            >
+            <DlButton :fluid="true" size="xl" @click="log">
                 Fluid Button
             </DlButton>
-            <DlButton
-                size="xl"
-                outlined
-                @click="log"
-            >
-                Outlined
-            </DlButton>
-            <DlButton
-                size="xl"
-                flat
-                @click="log"
-            >
-                Flat
-            </DlButton>
-            <DlButton
-                size="xl"
-                disabled
-                @click="log"
-            >
-                Disabled
-            </DlButton>
+            <DlButton size="xl" outlined @click="log"> Outlined </DlButton>
+            <DlButton size="xl" flat @click="log"> Flat </DlButton>
+            <DlButton size="xl" disabled @click="log"> Disabled </DlButton>
         </div>
-        <div
-            v-for="buttonSize in buttons"
-            :key="buttonSize"
-        >
+        <div v-for="buttonSize in buttons" :key="buttonSize">
             <h3>Size {{ buttonSize }}</h3>
             <div style="display: flex; gap: 10px; justify-content: center">
                 <DlButton
@@ -103,11 +58,7 @@
                     round
                     @click="log"
                 />
-                <DlButton
-                    icon="icon-dl-add"
-                    :size="buttonSize"
-                    @click="log"
-                />
+                <DlButton icon="icon-dl-add" :size="buttonSize" @click="log" />
                 <DlButton
                     icon="icon-dl-add"
                     :size="buttonSize"
@@ -161,36 +112,16 @@
                 margin-top: 50px;
             "
         >
-            <DlButton
-                icon="icon-dl-add"
-                :fluid="true"
-                size="xl"
-                @click="log"
-            >
+            <DlButton icon="icon-dl-add" :fluid="true" size="xl" @click="log">
                 Fluid Button
             </DlButton>
-            <DlButton
-                icon="icon-dl-add"
-                size="xl"
-                outlined
-                @click="log"
-            >
+            <DlButton icon="icon-dl-add" size="xl" outlined @click="log">
                 Outlined
             </DlButton>
-            <DlButton
-                icon="icon-dl-add"
-                size="xl"
-                flat
-                @click="log"
-            >
+            <DlButton icon="icon-dl-add" size="xl" flat @click="log">
                 Flat
             </DlButton>
-            <DlButton
-                icon="icon-dl-add"
-                size="xl"
-                disabled
-                @click="log"
-            >
+            <DlButton icon="icon-dl-add" size="xl" disabled @click="log">
                 Disabled
             </DlButton>
         </div>
@@ -225,36 +156,21 @@
             <h3>With badge</h3>
 
             <dl-button>
-                <dl-badge
-                    with-border
-                    floating
-                    align="top"
-                    color="red"
-                />
+                <dl-badge with-border floating align="top" color="red" />
                 button with badge
             </dl-button>
         </div>
         <div>
             <h3>Button with label and slot</h3>
 
-            <dl-button label="Hello">
-                World
-            </dl-button>
+            <dl-button label="Hello"> World </dl-button>
         </div>
         <div>
             <h3>Button with icon and slot</h3>
 
             <dl-button icon="icon-dl-search">
-                <dl-icon
-                    size="16px"
-                    icon="icon-dl-cart"
-                />
-                <dl-badge
-                    with-border
-                    floating
-                    align="top"
-                    color="red"
-                />
+                <dl-icon size="16px" icon="icon-dl-cart" />
+                <dl-badge with-border floating align="top" color="red" />
             </dl-button>
         </div>
         <div>
@@ -286,12 +202,7 @@
         </div>
         <div>
             <h3>Shaded and outlined</h3>
-            <dl-button
-                icon="icon-dl-search"
-                label="test me"
-                shaded
-                outlined
-            />
+            <dl-button icon="icon-dl-search" label="test me" shaded outlined />
         </div>
         <div style="display: flex; flex-direction: column">
             <h3>button with icon color</h3>
@@ -334,10 +245,7 @@
         </div>
         <div style="display: flex; flex-direction: column">
             <h3>button with tooltip</h3>
-            <dl-button
-                label="test me"
-                tooltip="test me please"
-            />
+            <dl-button label="test me" tooltip="test me please" />
         </div>
         <div style="display: flex; justify-content: center; margin-top: 50px">
             <dl-button

package/src/demos/DlToastDemo.vue

@@ -2,10 +2,7 @@
     <div style="width: 950px; padding-top: 20px">
         <div class="flex">
             <div>
-                <dl-text-area
-                    v-model="message"
-                    title="Message"
-                />
+                <dl-text-area v-model="message" title="Message" />
                 <dl-input
                     v-model="duration"
                     type="number"
@@ -16,34 +13,15 @@
                     type="number"
                     title="Collapse count"
                 />
-                <dl-input
-                    v-model="width"
-                    title="Custom width for toast item"
-                />
+                <dl-input v-model="width" title="Custom width for toast item" />
             </div>
             <div class="flex">
                 <div>
                     Type
-                    <dl-radio
-                        v-model="type"
-                        value="success"
-                        label="Success"
-                    />
-                    <dl-radio
-                        v-model="type"
-                        value="warning"
-                        label="Warning"
-                    />
-                    <dl-radio
-                        v-model="type"
-                        value="error"
-                        label="Error"
-                    />
-                    <dl-radio
-                        v-model="type"
-                        value="info"
-                        label="Info"
-                    />
+                    <dl-radio v-model="type" value="success" label="Success" />
+                    <dl-radio v-model="type" value="warning" label="Warning" />
+                    <dl-radio v-model="type" value="error" label="Error" />
+                    <dl-radio v-model="type" value="info" label="Info" />
                 </div>
                 <div>
                     Position
@@ -62,11 +40,7 @@
                         value="bottom-right"
                         label="Bottom right"
                     />
-                    <dl-radio
-                        v-model="position"
-                        value="top"
-                        label="Top"
-                    />
+                    <dl-radio v-model="position" value="top" label="Top" />
                     <dl-radio
                         v-model="position"
                         value="top-left"
@@ -79,32 +53,26 @@
                     />
                 </div>
                 <div>
-                    <dl-switch
-                        v-model="closable"
-                        left-label="Closable"
-                    />
+                    <dl-switch v-model="closable" left-label="Closable" />
                 </div>
             </div>
         </div>
-        <dl-button @click="showToastMessage">
-            Show Toast Message
-        </dl-button>
+        <dl-button @click="showToastMessage"> Show Toast Message </dl-button>
         <dl-button @click="showToastMessageCustom">
             Show Toast Message
         </dl-button>
-        <dl-button @click="showToastMultiLine">
-            Multi Line
-        </dl-button>
+        <dl-button @click="showToastMultiLine"> Multi Line </dl-button>
         <div class="flex-row" style="margin-top: 8px">
-            <dl-button @click="showToastWithLink">
-                Toast with link
-            </dl-button>
+            <dl-button @click="showToastWithLink"> Toast with link </dl-button>
             <dl-switch
                 v-model="htmlEnabled"
                 :left-label="htmlEnabled ? 'HTML true' : 'HTML false'"
             />
         </div>
-        <dl-button @click="showToastWithTitleTextCaption" style="margin-top: 8px">
+        <dl-button
+            style="margin-top: 8px"
+            @click="showToastWithTitleTextCaption"
+        >
             Toast with Title + Text + Caption
         </dl-button>
         <dl-button style="margin-top: 8px" @click="showToastWithTwoActions">
@@ -239,7 +207,8 @@ export default defineComponent({
         function showToastWithTitleTextCaption() {
             DlToast.open({
                 title: 'Toast Title',
-                message: 'This is the main message text that appears in the toast.',
+                message:
+                    'This is the main message text that appears in the toast.',
                 caption: 'This is the caption that appears below the message.',
                 position: position.value as DlToastPositions,
                 type: type.value as DlToastTypes,