@dataloop-ai/components 0.13.8 → 0.13.10

package/package.json

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

package/src/components/DlDialogBox/DlDialogBox.vue

@@ -13,7 +13,11 @@
             <div
                 class="dialog-wrapper"
                 :style="{ maxWidth: Number(width) ? `${width}px` : width }"
-                :class="{ 'dialog-wrapper--fullscreen': fullscreen }"
+                :class="{
+                    'dialog-wrapper--fullscreen': fullscreen,
+                    'dialog-wrapper--right': right,
+                    'dialog-wrapper--left': left
+                }"
             >
                 <div
                     v-if="hasHeader"
@@ -51,6 +55,8 @@ export default defineComponent({
     props: {
         width: { type: [Number, String], default: 400 },
         fullscreen: Boolean,
+        right: Boolean,
+        left: Boolean,
         modelValue: Boolean,
         volatile: { type: Boolean, default: false }
     },
@@ -159,6 +165,14 @@ export default defineComponent({
         max-width: 100vw !important;
         border-radius: 0px;
     }
+    &--right {
+        position: absolute !important;
+        right: 0;
+    }
+    &--left {
+        position: absolute !important;
+        left: 0;
+    }
 }
 
 .header {
@@ -178,7 +192,7 @@ export default defineComponent({
 
 .footer {
     display: flex;
-    padding: 20px 16px;
+    padding: 16px;
     border-top: 1px solid var(--dl-color-separator);
 }
 

package/src/components/DlDialogBox/DlDialogBoxHeader.vue

@@ -10,11 +10,21 @@
                 style="padding: 0; margin-bottom: 10px"
                 @click.stop.prevent="$emit('onClose')"
             />
-            <h2 class="title">
-                {{ title }}
+            <h2
+                v-if="hasTitle"
+                class="title"
+            >
+                <slot name="title">
+                    {{ title }}
+                </slot>
             </h2>
-            <p class="subtitle">
-                {{ subtitle }}
+            <p
+                v-if="hasSubtitle"
+                class="subtitle"
+            >
+                <slot name="subtitle">
+                    {{ subtitle }}
+                </slot>
             </p>
         </div>
         <dl-button
@@ -30,7 +40,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { computed, defineComponent } from 'vue-demi'
 import { DlButton } from '../DlButton'
 
 export default defineComponent({
@@ -44,7 +54,12 @@ export default defineComponent({
         closeButton: { type: Boolean, default: true },
         hasBackButton: Boolean
     },
-    emits: ['onClose']
+    emits: ['onClose'],
+    setup(props, { slots }) {
+        const hasTitle = computed(() => !!props.title || !!slots.title)
+        const hasSubtitle = computed(() => !!props.subtitle || !!slots.subtitle)
+        return { hasTitle, hasSubtitle }
+    }
 })
 </script>
 
@@ -60,6 +75,7 @@ export default defineComponent({
     font-size: var(--dl-font-size-h2);
     margin: 0;
     color: var(--dl-color-darker);
+    line-height: 2rem !important;
 }
 
 .subtitle {

package/src/components/DlSelect/DlSelect.vue

@@ -76,6 +76,7 @@
                     class="select-search-input"
                     :style="!isExpanded ? 'display: none;' : 'width: 100%;'"
                     :disabled="disabled"
+                    :readonly="readonly"
                     @input="handleSearchInput"
                     @focus="handleSearchFocus"
                     @blur="handleSearchBlur"
@@ -139,7 +140,7 @@
                 no-focus
                 :offset="[0, 3]"
                 style="border-radius: 0"
-                :disabled="disabled"
+                :disabled="disabled || readonly"
                 @show="onMenuOpen"
                 @hide="closeMenu"
             >
@@ -309,6 +310,7 @@ export default defineComponent({
         errorMessage: { type: String, default: '' },
         error: { type: Boolean, default: false },
         disabled: { type: Boolean, default: false },
+        readonly: { type: Boolean, default: false },
         emitValue: { type: Boolean, default: false }, // We emit the value from the option and compare with it as a modelvalue
         options: {
             type: Array as PropType<SelectOptionType[]>,
@@ -497,6 +499,9 @@ export default defineComponent({
             if (this.disabled) {
                 classes.push('dl_select__select--disabled')
             }
+            if (this.readonly) {
+                classes.push('dl_select__select--readonly')
+            }
             if (this.isExpanded) {
                 classes.push('dl_select__select--focused')
             }
@@ -902,6 +907,18 @@ export default defineComponent({
                 pointer-events: none;
             }
         }
+
+        &--readonly {
+            border-color: var(--dl-color-separator);
+            cursor: text;
+
+            &:hover {
+                border-color: var(--dl-color-separator);
+            }
+            & input {
+                pointer-events: none;
+            }
+        }
     }
 
     .selected {

package/src/components/DlTextInput.vue

@@ -51,6 +51,7 @@
                 :maxlength="maxLength"
                 :type="showPass ? 'text' : type"
                 :disabled="disabled"
+                :readonly="readonly"
                 @input="onChange"
                 @focus="onFocus"
                 @blur="debouncedBlur()"
@@ -283,6 +284,10 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
         maxLength: {
             type: Number,
             default: null
@@ -412,6 +417,7 @@ export default defineComponent({
                 !this.disableClearBtn &&
                 this.type !== 'password' &&
                 !this.disabled &&
+                !this.readonly &&
                 !!this.modelValue
                 // this.focused
             )
@@ -716,6 +722,13 @@ export default defineComponent({
             color: var(--dl-color-disabled);
             cursor: not-allowed;
         }
+        &:readonly {
+            border-color: var(--dl-color-separator);
+            cursor: text;
+            &:hover {
+                border-color: var(--dl-color-separator) !important;
+            }
+        }
     }
 
     &__adornment-container {