@dataloop-ai/components 0.20.202 → 0.20.203

package/package.json

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

package/src/assets/theme.css

@@ -38,6 +38,8 @@ body {
     --dl-font-size-h6: 10px;
     --dl-font-size-body: 12px;
     --dl-font-size-small: 10px;
+    --dl-font-size-alert: 14px;
+    --dl-font-size-alert-title: 16px;
 
     /* shadows */
     --dl-menu-shadow: rgba(0, 0, 0, 0.14); /* replace to --dell-shadow: rgba(0, 0, 0, 0.14); */

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

@@ -23,6 +23,13 @@
                     </span>
                 </span>
             </div>
+            <div
+                v-if="$slots.actions"
+                class="actions"
+                data-test="actions"
+            >
+                <slot name="actions" />
+            </div>
             <div
                 v-if="closable"
                 class="close-button"
@@ -100,21 +107,32 @@ const typeToIconMap: Record<DlAlertType, string> = {
     info: 'icon-dl-info-filled',
     success: 'icon-dl-approve-filled',
     warning: 'icon-dl-alert-filled',
-    error: 'icon-dl-error-filled'
+    error: 'icon-dl-error-filled',
+    discovery: 'icon-dl-error-filled'
 }
 
 const typeToIconColorMap: Record<DlAlertType, string> = {
     info: 'dell-blue-500',
     success: 'dell-green-500',
     warning: 'dell-yellow-600',
-    error: 'dell-red-500'
+    error: 'dell-red-500',
+    discovery: 'dl-color-discovery'
+}
+
+const typeToIndicatorColorMap: Record<DlAlertType, string> = {
+    info: 'dell-blue-500',
+    success: 'dell-green-500',
+    warning: 'dell-yellow-800',
+    error: 'dell-red-500',
+    discovery: 'dl-color-discovery'
 }
 
 const typeToBackgroundMap: Record<DlAlertType, string> = {
     info: 'dell-blue-200',
     success: 'dell-green-200',
     warning: 'dell-yellow-200',
-    error: 'dell-red-200'
+    error: 'dell-red-200',
+    discovery: 'dl-color-discovery-bg'
 }
 
 export default defineComponent({
@@ -139,7 +157,7 @@ export default defineComponent({
             type: String,
             required: true,
             validator: (value: string) =>
-                includes(['info', 'success', 'warning', 'error'], value)
+                includes(['info', 'success', 'warning', 'error', 'discovery'], value)
         },
         textColor: {
             type: String,
@@ -230,18 +248,26 @@ export default defineComponent({
 
                 const { height } = rootElement.getBoundingClientRect()
                 const iconS: Record<string, any> = {
-                    display: 'flex'
+                    display: 'flex',
+                    alignSelf: 'flex-start',
+                    paddingTop: '2px'
+                }
+                const closeS: Record<string, any> = {
+                    display: 'flex',
+                    alignSelf: 'flex-start'
                 }
                 const rootS: Record<string, any> = {
                     backgroundColor: getColor(
                         typeToBackgroundMap[type.value as DlAlertType]
                     )
                 }
-                if (height > 46) {
-                    iconS.alignSelf = 'flex-start'
-                } else {
-                    iconS.alignSelf = 'center'
-                }
+                rootS['--dl-alert-indicator-color'] = getColor(
+                    typeToIndicatorColorMap[type.value as DlAlertType]
+                )
+                rootS['--dl-alert-border-color'] = getColor(
+                    typeToIndicatorColorMap[type.value as DlAlertType]
+                )
+
                 if (fluid === true) {
                     rootS.width = '100%'
                 } else {
@@ -250,11 +276,13 @@ export default defineComponent({
 
                 if (padding.value) {
                     rootS['--dl-alert-padding'] = padding.value
+                } else {
+                    rootS['--dl-alert-padding'] = '8px 16px'
                 }
 
                 iconStyle.value = iconS
                 rootStyle.value = rootS
-                closeButtonStyle.value = iconS
+                closeButtonStyle.value = closeS
             })
         }
 
@@ -308,9 +336,33 @@ export default defineComponent({
     flex-direction: row;
     justify-content: space-between;
     min-height: 36px;
-    border-radius: 2px;
+    border-left: 4px solid var(--dl-alert-indicator-color, transparent);
+    border-top: 1px solid var(--dl-alert-border-color, transparent);
+    border-right: 1px solid var(--dl-alert-border-color, transparent);
+    border-bottom: 1px solid var(--dl-alert-border-color, transparent);
+    border-radius: 0px;
     box-sizing: border-box;
 
+    ::v-deep a {
+        color: var(--dell-blue-600);
+        text-decoration: none;
+    }
+
+    ::v-deep a:visited {
+        color: var(--dell-blue-600);
+        text-decoration: none;
+    }
+
+    ::v-deep a:hover {
+        color: var(--dell-blue-700);
+        text-decoration: underline;
+    }
+
+    ::v-deep a:active {
+        color: var(--dell-blue-800);
+        text-decoration: underline;
+    }
+
     > div {
         display: flex;
         flex-direction: row;
@@ -318,17 +370,32 @@ export default defineComponent({
     }
 
     .text {
-        padding-left: 10px;
+        padding-left: 8px;
+        padding-top: 2px;
         font-size: var(--dl-font-size-body);
         line-height: normal;
-        align-self: center;
+        align-self: flex-start;
+        font-size: 14px;
+        line-height: 16px;
+        font-weight: 400;
         word-break: break-word;
     }
 
     .close-button {
-        padding-right: 10px;
-        padding-left: 10px;
-        align-items: var(--dl-alert-align-button, start);
+        display: flex;
+        padding: 12px;
+        align-items: flex-start;
+    }
+
+    .actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        height: 40px;
+        max-height: 40px;
+        box-sizing: border-box;
+        align-self: flex-start;
     }
 
     .icon-dl-close:hover {

package/src/components/basic/DlAlert/types.ts

@@ -1 +1 @@
-export type DlAlertType = 'info' | 'success' | 'warning' | 'error'
+export type DlAlertType = 'info' | 'success' | 'warning' | 'error' | 'discovery'

package/src/components/compound/DlToast/components/ToastComponent.vue

@@ -15,18 +15,66 @@
                 class="alert"
                 :type="type"
                 :closable="closable"
-                icon-size="24px"
+                icon-size="16px"
                 :dark-mode="false"
                 close-button-position="center"
                 style="position: relative"
                 @update:model-value="closeToast"
             >
                 <slot name="message">
-                    <span
-                        class="toast-message"
-                        data-test="message-text"
-                    />
+                    <div
+                        class="toast-text"
+                        :class="{
+                            'toast-text--single': !multiLine,
+                            'toast-text--with-title': !!title
+                        }"
+                    >
+                        <div v-if="title" class="toast-title">
+                            {{ title }}
+                        </div>
+                        <div
+                            v-if="html"
+                            class="toast-message"
+                            data-test="message-text"
+                            v-html="message"
+                        />
+                        <div
+                            v-else
+                            class="toast-message"
+                            :class="{ 'toast-message--pre-line': multiLine }"
+                            data-test="message-text"
+                        >
+                            {{ message }}
+                        </div>
+
+                        <div v-if="caption" class="toast-caption">
+                            <div v-if="html" v-html="caption" />
+                            <div v-else>
+                                {{ caption }}
+                            </div>
+                        </div>
+                    </div>
                 </slot>
+                <template v-if="actions && actions.length" #actions>
+                    <dl-button
+                        v-for="(action, idx) in actions"
+                        :key="idx"
+                        :label="action.label"
+                        :icon="action.icon"
+                        :color="action.textColor || 'dl-alert-border-color'"
+                        :text-color="action.textColor || 'dl-alert-border-color'"
+                        :hover-border-color="action.textColor || 'dl-alert-border-color'"
+                        :hover-text-color="action.textColor || 'dl-alert-border-color'"
+                        :hover-bg-color="'transparent'"
+                        :pressed-bg-color="'transparent'"
+                        :styles="action.styles || defaultActionButtonStyles"
+                        :filled="false"
+                        outlined
+                        no-wrap
+                        overflow
+                        @click="onActionClick(action)"
+                    />
+                </template>
                 <dl-badge
                     v-if="count"
                     with-border
@@ -61,22 +109,46 @@ import {
     getCurrentInstance,
     onBeforeMount,
     onMounted,
+    PropType,
     ref
 } from 'vue-demi'
-import { DlAlert, DlBadge } from '../../../'
-import { DlToastTypes, DlToastPositions } from '../types'
+import { DlAlert, DlBadge, DlButton } from '../../../'
+import { DlToastAction, DlToastTypes, DlToastPositions } from '../types'
 import { removeElement } from '../utils/render'
 import { Animation } from '../types'
 import { v4 } from 'uuid'
 
+const DEFAULT_ACTION_BUTTON_STYLES =
+    'min-width:73px; max-width:100px; height:24px; max-height:24px; padding:0 8px; border-radius:2px;'
+
 export default defineComponent({
     name: 'ToastComponent',
-    components: { DlAlert, DlBadge },
+    components: { DlAlert, DlBadge, DlButton },
     props: {
+        title: {
+            type: String,
+            default: ''
+        },
         message: {
             type: String,
             required: true
         },
+        caption: {
+            type: String,
+            default: ''
+        },
+        html: {
+            type: Boolean,
+            default: false
+        },
+        multiLine: {
+            type: Boolean,
+            default: true
+        },
+        actions: {
+            type: Array as PropType<DlToastAction[]>,
+            default: (): DlToastAction[] => []
+        },
         type: {
             type: String,
             required: true,
@@ -203,7 +275,7 @@ export default defineComponent({
                 '.dl-toast-container--pending'
             )
             const messageContainer = root.value?.querySelector('.toast-message')
-            if (messageContainer) {
+            if (messageContainer && slots?.message) {
                 messageContainer.innerHTML = message
             }
             parent.insertAdjacentElement('afterbegin', root.value)
@@ -227,6 +299,13 @@ export default defineComponent({
             setHideTimeout()
         }
 
+        const onActionClick = (action: DlToastAction) => {
+            action?.handler?.()
+            if (action?.closeOnClick) {
+                closeToastMessage()
+            }
+        }
+
         const badgeColor = computed(() => {
             switch (props.type) {
                 case DlToastTypes.SUCCESS:
@@ -237,6 +316,8 @@ export default defineComponent({
                     return 'var(--dl-color-alert-error)'
                 case DlToastTypes.INFO:
                     return 'var(--dl-color-alert-info)'
+                case DlToastTypes.DISCOVERY:
+                    return 'var(--dl-color-discovery)'
             }
         })
 
@@ -249,6 +330,8 @@ export default defineComponent({
             correctParent,
             updateCount,
             count,
+            onActionClick,
+            defaultActionButtonStyles: DEFAULT_ACTION_BUTTON_STYLES,
             badgeColor
         }
     }
@@ -256,6 +339,32 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+.toast-text {
+    min-width: 0;
+    flex: 1 1 auto;
+}
+
+.toast-title {
+    font-size: var(--dl-font-size-alert-title, 16px);
+    line-height: 150%;
+    margin-bottom: 2px;
+}
+
+.toast-text--single {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.toast-caption {
+    margin-top: 2px;
+    opacity: 0.8;
+}
+
+.toast-message--pre-line {
+    white-space: pre-line;
+}
+
 .toast-item {
     display: inline-flex;
     align-items: center;
@@ -263,7 +372,7 @@ export default defineComponent({
     min-width: 400px;
     max-width: 900px;
     margin: 5px;
-    cursor: pointer;
+    cursor: default;
     animation-duration: 150ms;
 
     &.toast-item--top,
@@ -373,13 +482,13 @@ export default defineComponent({
 
 .DlToastContainer {
     --dl-color-negative: var(--dl-color-alert-error);
-    --dl-color-negative-background: var(--dl-color-alert-error-background);
+    --dl-color-negative-background: var(--dell-red-200);
     --dl-color-warning: var(--dl-color-alert-warn);
-    --dl-color-warning-background: var(--dl-color-alert-warn-background);
+    --dl-color-warning-background: var(--dell-yellow-200);
     --dl-color-positive: var(--dl-color-alert-success);
-    --dl-color-positive-background: var(--dl-color-alert-success-background);
+    --dl-color-positive-background: var(--dell-green-200);
     --dl-color-info: var(--dl-color-alert-info);
-    --dl-color-info-background: var(--dl-color-alert-info-background);
+    --dl-color-info-background: var(--dell-blue-200);
     --dl-color-darker: var(--dl-color-alert-text);
     --dl-alert-align-button: center;
 }

package/src/components/compound/DlToast/types.ts

@@ -16,14 +16,67 @@ export enum DlToastTypes {
     SUCCESS = 'success',
     WARNING = 'warning',
     ERROR = 'error',
-    INFO = 'info'
+    INFO = 'info',
+    DISCOVERY = 'discovery'
+}
+
+export interface DlToastAction {
+    /**
+     * The label displayed on the action button
+     */
+    label?: string
+    /**
+     * The icon displayed on the action button
+     */
+    icon?: string
+    /**
+     * The text color of the action button
+     */
+    textColor?: string
+    /**
+     * Inline styles passed to DlButton `styles` prop
+     */
+    styles?: string | Record<string, string>
+    /**
+     * Called when the action button is clicked
+     */
+    handler: () => unknown
+    /**
+     * Close toast after the action is clicked
+     * @default false
+     */
+    closeOnClick?: boolean
 }
 
 export interface DlToastProps {
+    /**
+     * Optional title displayed above the message
+     */
+    title?: string
     /**
      * The message to display in the toast
      */
     message: string
+    /**
+     * Optional caption displayed under the message
+     */
+    caption?: string
+    /**
+     * When false, message/caption should be treated as plain text (escaped).
+     * When true, message/caption can be rendered as HTML.
+     * @default false
+     */
+    html?: boolean
+    /**
+     * When true, allow wrapping into multiple lines.
+     * When false, keep message in a single line (ellipsis).
+     * @default true
+     */
+    multiLine?: boolean
+    /**
+     * Optional action buttons displayed inside the toast
+     */
+    actions?: DlToastAction[]
     /**
      * The type of the toast
      */

package/src/demos/DlToastDemo.vue

@@ -92,6 +92,18 @@
         <dl-button @click="showToastMessageCustom">
             Show Toast Message
         </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-switch
+                v-model="htmlEnabled"
+                :left-label="htmlEnabled ? 'HTML true' : 'HTML false'"
+            />
+        </div>
     </div>
 </template>
 
@@ -126,6 +138,7 @@ export default defineComponent({
         const closable = ref(true)
         const width = ref('auto')
         const collapseCount = ref(null)
+        const htmlEnabled = ref(false)
         function showToastMessage() {
             DlToast.open({
                 message: message.value,
@@ -160,16 +173,48 @@ export default defineComponent({
                 }
             )
         }
+        function showToastMultiLine() {
+            DlToast.open({
+                message:
+                    'This is an page-level alert that communicates an\ninformational message.',
+                position: position.value as DlToastPositions,
+                type: DlToastTypes.SUCCESS,
+                duration: Number(duration.value) || 1000,
+                closable: closable.value,
+                width: width.value,
+                collapseCount: collapseCount.value,
+                html: false,
+                multiLine: true
+            } as any)
+        }
+        function showToastWithLink() {
+            const linkHtml =
+                '<a href="https://docs.dataloop.ai/" target="_blank" rel="noopener noreferrer">Link to another page.</a>'
+            DlToast.open({
+                message: `This is an page-level alert that communicates an informational message.\n${linkHtml}`,
+                position: position.value as DlToastPositions,
+                type: DlToastTypes.SUCCESS,
+                duration: Number(duration.value) || 1000,
+                closable: closable.value,
+                width: width.value,
+                collapseCount: collapseCount.value,
+                html: htmlEnabled.value,
+                multiLine: true
+            } as any)
+        }
         return {
             showToastMessageCustom,
             showToastMessage,
+            showToastMultiLine,
+            showToastWithLink,
             message,
             duration,
             type,
             position,
             closable,
             width,
-            collapseCount
+            collapseCount,
+            htmlEnabled
         }
     }
 })
@@ -179,4 +224,10 @@ export default defineComponent({
 .flex {
     display: flex;
 }
+
+.flex-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
 </style>