@dataloop-ai/components 0.15.3 → 0.15.4

package/package.json

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

package/src/components/DlAlert.vue

@@ -41,7 +41,15 @@
 
 <script lang="ts">
 import { v4 } from 'uuid'
-import { computed, defineComponent, onMounted, Ref, ref, watch } from 'vue-demi'
+import {
+    computed,
+    defineComponent,
+    nextTick,
+    onMounted,
+    ref,
+    Ref,
+    watch
+} from 'vue-demi'
 import { getColor, includes } from '../utils'
 import { DlIcon } from './'
 
@@ -138,32 +146,29 @@ export default defineComponent({
         )
 
         function normalizeStyles(fluid?: boolean) {
-            const { height } = (
-                rootRef as Ref<HTMLElement | null>
-            ).value!.getBoundingClientRect()
-
-            const iconS: Record<string, any> = {
-                display: 'flex'
-            }
-
-            const rootS: Record<string, any> = {
-                backgroundColor: getColor(typeToBackgroundMap[type])
-            }
-
-            if (height > 36) {
-                iconS.alignSelf = 'flex-start'
-            } else {
-                iconS.alignSelf = 'center'
-            }
-
-            if (fluid === true) {
-                rootS.width = '100%'
-            } else {
-                rootS.width = 'fit-content'
-            }
-
-            iconStyle.value = iconS
-            rootStyle.value = rootS
+            nextTick(() => {
+                const { height } = (
+                    rootRef as Ref<HTMLElement | null>
+                ).value!.getBoundingClientRect()
+                const iconS: Record<string, any> = {
+                    display: 'flex'
+                }
+                const rootS: Record<string, any> = {
+                    backgroundColor: getColor(typeToBackgroundMap[type])
+                }
+                if (height > 36) {
+                    iconS.alignSelf = 'flex-start'
+                } else {
+                    iconS.alignSelf = 'center'
+                }
+                if (fluid === true) {
+                    rootS.width = '100%'
+                } else {
+                    rootS.width = 'fit-content'
+                }
+                iconStyle.value = iconS
+                rootStyle.value = rootS
+            })
         }
 
         function handleClose() {
@@ -199,7 +204,7 @@ export default defineComponent({
     > div {
         display: flex;
         flex-direction: row;
-        padding: 10px 10px 10px 16px;
+        padding: 10px 16px;
     }
 
     .text {

package/src/components/DlToastMessage/components/ToastComponent.vue

@@ -12,10 +12,12 @@
                 `v-toast__item--${position}`,
                 classItem
             ]"
+            :style="{ width }"
         >
             <dl-alert
                 :type="type"
                 :closable="closable"
+                fluid
                 @update:model-value="(val) => closeToast(val)"
             >
                 <span
@@ -29,11 +31,11 @@
 
 <script lang="ts">
 import {
+    computed,
     defineComponent,
-    ref,
     onBeforeMount,
-    computed,
-    onMounted
+    onMounted,
+    ref
 } from 'vue-demi'
 import DlAlert from '../../DlAlert.vue'
 import { Positions, Types } from '../utils/config'
@@ -59,6 +61,10 @@ export default defineComponent({
             type: String,
             default: ''
         },
+        width: {
+            type: String,
+            default: 'auto'
+        },
         duration: {
             type: Number,
             default: 10
@@ -183,18 +189,16 @@ export default defineComponent({
     overflow: hidden;
     z-index: 1052;
     pointer-events: none;
-    &__text {
-        min-width: 300px;
-        max-width: 800px;
-    }
     &__item {
         display: inline-flex;
         align-items: center;
         pointer-events: auto;
-        margin-bottom: 5px;
-        margin-top: 5px;
+        min-width: 400px;
+        max-width: 900px;
+        margin: 5px;
         cursor: pointer;
         animation-duration: 150ms;
+
         &.v-toast__item--top,
         &.v-toast__item--bottom {
             align-self: center;

package/src/demo/DlToastMessageDemo.vue

@@ -15,6 +15,10 @@
                     v-model="classItem"
                     title="Custom class for toast item"
                 />
+                <dl-text-input
+                    v-model="width"
+                    title="Custom width for toast item"
+                />
             </div>
             <div class="flex">
                 <div>
@@ -95,6 +99,7 @@ import DlTextInput from '../components/DlTextInput.vue'
 import DlRadio from '../components/DlRadio.vue'
 import DlTextArea from '../components/DlTextArea.vue'
 import DlSwitch from '../components/DlSwitch.vue'
+
 export default defineComponent({
     name: 'DlToast',
     components: {
@@ -113,6 +118,7 @@ export default defineComponent({
         const position = ref('bottom')
         const closable = ref(true)
         const classItem = ref('demo-toast')
+        const width = ref('auto')
         function showToastMessage() {
             DlToast.open({
                 message: message.value,
@@ -120,7 +126,8 @@ export default defineComponent({
                 type: type.value,
                 duration: duration.value,
                 classItem: classItem.value,
-                closable: closable.value
+                closable: closable.value,
+                width: width.value
             })
         }
         return {
@@ -130,7 +137,8 @@ export default defineComponent({
             type,
             position,
             classItem,
-            closable
+            closable,
+            width
         }
     }
 })