@dataloop-ai/components 0.16.47 → 0.16.49

package/package.json

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

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

@@ -10,7 +10,7 @@
             :tabindex="tabIndex"
             :aria-disabled="disabled ? 'true' : 'false'"
             :disabled="disabled"
-            :style="[cssButtonVars, styles]"
+            :style="[cssButtonVars, computedStyles]"
             style="pointer-events: auto"
             class="dl-button"
             @click="onClick"
@@ -73,6 +73,8 @@ import { colorNames } from '../../../utils/css-color-names'
 import { useSizeObserver } from '../../../hooks/use-size-observer'
 import { v4 } from 'uuid'
 import { ButtonColors } from './types'
+import { stringStyleToRecord } from '../../../utils'
+import { isString } from 'lodash'
 
 export default defineComponent({
     name: 'DlButton',
@@ -108,7 +110,7 @@ export default defineComponent({
         icon: { type: String, default: '' },
         overflow: { type: Boolean, default: false, required: false },
         tooltip: { type: String, default: null, required: false },
-        styles: { type: [Object, String, Array], default: null }
+        styles: { type: [Object, String], default: null }
     },
     emits: ['click', 'mousedown'],
     setup() {
@@ -122,6 +124,11 @@ export default defineComponent({
         }
     },
     computed: {
+        computedStyles(): Record<string, string> {
+            return isString(this.styles)
+                ? stringStyleToRecord(this.styles)
+                : this.styles
+        },
         isActionable(): boolean {
             return this.disabled !== true
         },

package/src/components/basic/DlCard/DlCard.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         class="card"
-        :style="[{ width, height }, styles]"
+        :style="[{ width, height }, computedStyles]"
     >
         <div
             v-if="icon"
@@ -84,7 +84,9 @@
 </template>
 
 <script lang="ts">
+import { isString } from 'lodash'
 import { defineComponent, PropType } from 'vue-demi'
+import { stringStyleToRecord } from '../../../utils'
 import { DlIcon } from '../../essential/DlIcon'
 import { DlLink } from '../../essential/DlLink'
 import { IconItem, ImageItem, LinkItem } from './types'
@@ -126,11 +128,16 @@ export default defineComponent({
             default: '200px'
         },
         styles: {
-            type: [Object, String, Array],
+            type: [Object, String],
             default: null
         }
     },
     computed: {
+        computedStyles(): Record<string, string> {
+            return isString(this.styles)
+                ? stringStyleToRecord(this.styles)
+                : this.styles
+        },
         iconStyles(): string {
             return this.icon?.styles ?? ''
         },

package/src/components/basic/DlPopup/DlPopup.vue

@@ -112,6 +112,8 @@ import {
 import DraggableUpper from './components/DraggableUpper.vue'
 import PopupHeader from './components/PopupHeader.vue'
 import { v4 } from 'uuid'
+import { isString } from 'lodash'
+import { stringStyleToRecord } from '../../../utils'
 
 export default defineComponent({
     name: 'DlPopup',
@@ -446,7 +448,9 @@ export default defineComponent({
             portalIsActive,
             classes: 'dl-popup dl-position-engine scroll',
             styles: [
-                attrs.style,
+                isString(attrs.style)
+                    ? stringStyleToRecord(attrs.style)
+                    : attrs.style,
                 transitionStyle.value,
                 stylesFromProps.value
             ] as any

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/utils.ts

@@ -78,18 +78,21 @@ export function flattenConfusionMatrix(
 
     for (const [rowIndex, row] of matrix.entries()) {
         for (const [cellIndex, cell] of row.entries()) {
-            const value = isObject(cell)
+            const cellIsObject = isObject(cell)
+            const value: number = cellIsObject
                 ? (cell as DlConfusionMatrixCell).value
-                : cell
-            toNormalize.push({
+                : (cell as number)
+
+            const object: DlConfusionMatrixCell = {
                 value,
                 unnormalizedValue: value,
                 xLabel: labelStrings[rowIndex],
                 yLabel: labelStrings[cellIndex],
                 x: rowIndex,
                 y: cellIndex,
-                link: isObject ? (cell as DlConfusionMatrixCell).link : ''
-            })
+                link: cellIsObject ? (cell as DlConfusionMatrixCell).link : ''
+            }
+            toNormalize.push(object)
         }
     }
     return normalizeMatrix(toNormalize)

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

@@ -121,6 +121,7 @@ export default defineComponent({
     },
     props: {
         withWave: Boolean,
+        // todo: clean this up; rename the prop to something better
         defaultStyles: { type: Boolean, default: true },
         multiselect: { type: Boolean, default: false },
         value: { type: ValueTypes, default: null },

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

@@ -2,8 +2,11 @@
     <div
         v-if="!svg"
         :id="uuid"
-        :style="[inlineStyles, styles]"
+        :style="[inlineStyles, computedStyles]"
         @click="$emit('click', $event)"
+        @mousedown="$emit('mousedown', $event)"
+        @mouseup="$emit('mouseup', $event)"
+        @mousemove="$emit('mousemove', $event)"
     >
         <i
             class="dl-icon"
@@ -21,6 +24,9 @@
         :id="uuid"
         style="display: inline"
         @click="$emit('click', $event)"
+        @mousedown="$emit('mousedown', $event)"
+        @mouseup="$emit('mouseup', $event)"
+        @mousemove="$emit('mousemove', $event)"
     >
         <div ref="svgIcon">
             <div ref="childToReplace" />
@@ -29,9 +35,10 @@
 </template>
 
 <script lang="ts">
+import { isString } from 'lodash'
 import { v4 } from 'uuid'
 import { defineComponent } from 'vue-demi'
-import { getColor, loggerFactory } from '../../../utils'
+import { getColor, loggerFactory, stringStyleToRecord } from '../../../utils'
 
 export default defineComponent({
     name: 'DlIcon',
@@ -49,7 +56,7 @@ export default defineComponent({
             default: '12px'
         },
         styles: {
-            type: [Array, String, Object],
+            type: [String, Object],
             default: null
         },
         svg: {
@@ -65,7 +72,7 @@ export default defineComponent({
             default: null
         }
     },
-    emits: ['click'],
+    emits: ['click', 'mousemove', 'mouseup', 'mousedown'],
     data() {
         return {
             uuid: `dl-icon-${v4()}`,
@@ -74,6 +81,11 @@ export default defineComponent({
         }
     },
     computed: {
+        computedStyles(): Record<string, string> {
+            return isString(this.styles)
+                ? stringStyleToRecord(this.styles)
+                : this.styles
+        },
         cssIconVars(): Record<string, string> {
             return {
                 '--dl-icon-font-size': `${this.size}`,
@@ -88,8 +100,8 @@ export default defineComponent({
                     : 'inherit'
             }
         },
-        inlineStyles(): string {
-            return this.inline ? 'display: inline' : 'display: flex;'
+        inlineStyles(): Record<string, string> {
+            return { display: this.inline ? 'inline' : 'flex;' }
         },
         // needed to allow external source of icons that do not use class based
         externalIcon(): boolean {

package/src/components/essential/DlSpinner/components/DlSpinnerCircle.vue

@@ -41,116 +41,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-.spinner-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.dl-spinner {
-    vertical-align: middle;
-}
-
-.dl-spinner-mat {
-    animation: spinCircle 2s linear infinite;
-    transform-origin: center center;
-}
-.spinner-path {
-    stroke-dasharray: 1, 200 #{'/* rtl:ignore */'};
-    stroke-dashoffset: 0 #{'/* rtl:ignore */'};
-    animation: dash 1.5s ease-in-out infinite;
-}
-
-.spinner {
-    position: relative;
-}
-
-.spin-loader,
-.spin-bg {
-    width: var(--dl-spinner-size);
-    height: var(--dl-spinner-size);
-    top: 0;
-    left: 0;
-}
-
-.spin-loader {
-    position: absolute;
-    animation: spin 2s linear infinite;
-}
-
-.dl-spinner-icon {
-    top: var(--icon-top);
-    left: var(--icon-top);
-    position: absolute;
-    width: var(--dl-spinner-icon-size);
-    height: var(--dl-spinner-icon-size);
-    opacity: 1;
-    animation: pulse 2s infinite;
-}
-
-.dl-svg {
-    fill: var(--dl-spinner-border-color);
-}
-
-.spinner-color-bg {
-    fill: none;
-}
-
-.spinner-color {
-    fill: url(#linear-gradient);
-}
-
-@keyframes dash {
-    0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35px;
-    }
-    100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124px;
-    }
-}
-
-@keyframes spinCircle {
-    0% {
-        transform: rotate3d(0, 0, 1, 0deg) #{'/* rtl:ignore */'};
-    }
-    25% {
-        transform: rotate3d(0, 0, 1, 90deg) #{'/* rtl:ignore */'};
-    }
-    50% {
-        transform: rotate3d(0, 0, 1, 180deg) #{'/* rtl:ignore */'};
-    }
-    75% {
-        transform: rotate3d(0, 0, 1, 270deg) #{'/* rtl:ignore */'};
-    }
-    100% {
-        transform: rotate3d(0, 0, 1, 359deg) #{'/* rtl:ignore */'};
-    }
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes pulse {
-    0% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-</style>
+<style lang="scss" src="../styles/spinnerStyles.scss" />

package/src/components/essential/DlSpinner/components/DlSpinnerClock.vue

@@ -76,116 +76,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-.spinner-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.dl-spinner {
-    vertical-align: middle;
-}
-
-.dl-spinner-mat {
-    animation: spinCircle 2s linear infinite;
-    transform-origin: center center;
-}
-.spinner-path {
-    stroke-dasharray: 1, 200 #{'/* rtl:ignore */'};
-    stroke-dashoffset: 0 #{'/* rtl:ignore */'};
-    animation: dash 1.5s ease-in-out infinite;
-}
-
-.spinner {
-    position: relative;
-}
-
-.spin-loader,
-.spin-bg {
-    width: var(--dl-spinner-size);
-    height: var(--dl-spinner-size);
-    top: 0;
-    left: 0;
-}
-
-.spin-loader {
-    position: absolute;
-    animation: spin 2s linear infinite;
-}
-
-.dl-spinner-icon {
-    top: var(--icon-top);
-    left: var(--icon-top);
-    position: absolute;
-    width: var(--dl-spinner-icon-size);
-    height: var(--dl-spinner-icon-size);
-    opacity: 1;
-    animation: pulse 2s infinite;
-}
-
-.dl-svg {
-    fill: var(--dl-spinner-border-color);
-}
-
-.spinner-color-bg {
-    fill: none;
-}
-
-.spinner-color {
-    fill: url(#linear-gradient);
-}
-
-@keyframes dash {
-    0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35px;
-    }
-    100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124px;
-    }
-}
-
-@keyframes spinCircle {
-    0% {
-        transform: rotate3d(0, 0, 1, 0deg) #{'/* rtl:ignore */'};
-    }
-    25% {
-        transform: rotate3d(0, 0, 1, 90deg) #{'/* rtl:ignore */'};
-    }
-    50% {
-        transform: rotate3d(0, 0, 1, 180deg) #{'/* rtl:ignore */'};
-    }
-    75% {
-        transform: rotate3d(0, 0, 1, 270deg) #{'/* rtl:ignore */'};
-    }
-    100% {
-        transform: rotate3d(0, 0, 1, 359deg) #{'/* rtl:ignore */'};
-    }
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes pulse {
-    0% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-</style>
+<style lang="scss" src="../styles/spinnerStyles.scss" />

package/src/components/essential/DlSpinner/components/DlSpinnerDots.vue

@@ -110,116 +110,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-.spinner-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.dl-spinner {
-    vertical-align: middle;
-}
-
-.dl-spinner-mat {
-    animation: spinCircle 2s linear infinite;
-    transform-origin: center center;
-}
-.spinner-path {
-    stroke-dasharray: 1, 200 #{'/* rtl:ignore */'};
-    stroke-dashoffset: 0 #{'/* rtl:ignore */'};
-    animation: dash 1.5s ease-in-out infinite;
-}
-
-.spinner {
-    position: relative;
-}
-
-.spin-loader,
-.spin-bg {
-    width: var(--dl-spinner-size);
-    height: var(--dl-spinner-size);
-    top: 0;
-    left: 0;
-}
-
-.spin-loader {
-    position: absolute;
-    animation: spin 2s linear infinite;
-}
-
-.dl-spinner-icon {
-    top: var(--icon-top);
-    left: var(--icon-top);
-    position: absolute;
-    width: var(--dl-spinner-icon-size);
-    height: var(--dl-spinner-icon-size);
-    opacity: 1;
-    animation: pulse 2s infinite;
-}
-
-.dl-svg {
-    fill: var(--dl-spinner-border-color);
-}
-
-.spinner-color-bg {
-    fill: none;
-}
-
-.spinner-color {
-    fill: url(#linear-gradient);
-}
-
-@keyframes dash {
-    0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35px;
-    }
-    100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124px;
-    }
-}
-
-@keyframes spinCircle {
-    0% {
-        transform: rotate3d(0, 0, 1, 0deg) #{'/* rtl:ignore */'};
-    }
-    25% {
-        transform: rotate3d(0, 0, 1, 90deg) #{'/* rtl:ignore */'};
-    }
-    50% {
-        transform: rotate3d(0, 0, 1, 180deg) #{'/* rtl:ignore */'};
-    }
-    75% {
-        transform: rotate3d(0, 0, 1, 270deg) #{'/* rtl:ignore */'};
-    }
-    100% {
-        transform: rotate3d(0, 0, 1, 359deg) #{'/* rtl:ignore */'};
-    }
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes pulse {
-    0% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-</style>
+<style lang="scss" src="../styles/spinnerStyles.scss" />

package/src/components/essential/DlSpinner/components/DlSpinnerGrid.vue

@@ -163,116 +163,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-.spinner-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.dl-spinner {
-    vertical-align: middle;
-}
-
-.dl-spinner-mat {
-    animation: spinCircle 2s linear infinite;
-    transform-origin: center center;
-}
-.spinner-path {
-    stroke-dasharray: 1, 200 #{'/* rtl:ignore */'};
-    stroke-dashoffset: 0 #{'/* rtl:ignore */'};
-    animation: dash 1.5s ease-in-out infinite;
-}
-
-.spinner {
-    position: relative;
-}
-
-.spin-loader,
-.spin-bg {
-    width: var(--dl-spinner-size);
-    height: var(--dl-spinner-size);
-    top: 0;
-    left: 0;
-}
-
-.spin-loader {
-    position: absolute;
-    animation: spin 2s linear infinite;
-}
-
-.dl-spinner-icon {
-    top: var(--icon-top);
-    left: var(--icon-top);
-    position: absolute;
-    width: var(--dl-spinner-icon-size);
-    height: var(--dl-spinner-icon-size);
-    opacity: 1;
-    animation: pulse 2s infinite;
-}
-
-.dl-svg {
-    fill: var(--dl-spinner-border-color);
-}
-
-.spinner-color-bg {
-    fill: none;
-}
-
-.spinner-color {
-    fill: url(#linear-gradient);
-}
-
-@keyframes dash {
-    0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35px;
-    }
-    100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124px;
-    }
-}
-
-@keyframes spinCircle {
-    0% {
-        transform: rotate3d(0, 0, 1, 0deg) #{'/* rtl:ignore */'};
-    }
-    25% {
-        transform: rotate3d(0, 0, 1, 90deg) #{'/* rtl:ignore */'};
-    }
-    50% {
-        transform: rotate3d(0, 0, 1, 180deg) #{'/* rtl:ignore */'};
-    }
-    75% {
-        transform: rotate3d(0, 0, 1, 270deg) #{'/* rtl:ignore */'};
-    }
-    100% {
-        transform: rotate3d(0, 0, 1, 359deg) #{'/* rtl:ignore */'};
-    }
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes pulse {
-    0% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-</style>
+<style lang="scss" src="../styles/spinnerStyles.scss" />

package/src/components/essential/DlSpinner/components/DlSpinnerLogo.vue

@@ -149,116 +149,4 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
-.spinner-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-.dl-spinner {
-    vertical-align: middle;
-}
-
-.dl-spinner-mat {
-    animation: spinCircle 2s linear infinite;
-    transform-origin: center center;
-}
-.spinner-path {
-    stroke-dasharray: 1, 200 #{'/* rtl:ignore */'};
-    stroke-dashoffset: 0 #{'/* rtl:ignore */'};
-    animation: dash 1.5s ease-in-out infinite;
-}
-
-.spinner {
-    position: relative;
-}
-
-.spin-loader,
-.spin-bg {
-    width: var(--dl-spinner-size);
-    height: var(--dl-spinner-size);
-    top: 0;
-    left: 0;
-}
-
-.spin-loader {
-    position: absolute;
-    animation: spin 2s linear infinite;
-}
-
-.dl-spinner-icon {
-    top: var(--icon-top);
-    left: var(--icon-top);
-    position: absolute;
-    width: var(--dl-spinner-icon-size);
-    height: var(--dl-spinner-icon-size);
-    opacity: 1;
-    animation: pulse 2s infinite;
-}
-
-.dl-svg {
-    fill: var(--dl-spinner-border-color);
-}
-
-.spinner-color-bg {
-    fill: none;
-}
-
-.spinner-color {
-    fill: url(#linear-gradient);
-}
-
-@keyframes dash {
-    0% {
-        stroke-dasharray: 1, 200;
-        stroke-dashoffset: 0;
-    }
-    50% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -35px;
-    }
-    100% {
-        stroke-dasharray: 89, 200;
-        stroke-dashoffset: -124px;
-    }
-}
-
-@keyframes spinCircle {
-    0% {
-        transform: rotate3d(0, 0, 1, 0deg) #{'/* rtl:ignore */'};
-    }
-    25% {
-        transform: rotate3d(0, 0, 1, 90deg) #{'/* rtl:ignore */'};
-    }
-    50% {
-        transform: rotate3d(0, 0, 1, 180deg) #{'/* rtl:ignore */'};
-    }
-    75% {
-        transform: rotate3d(0, 0, 1, 270deg) #{'/* rtl:ignore */'};
-    }
-    100% {
-        transform: rotate3d(0, 0, 1, 359deg) #{'/* rtl:ignore */'};
-    }
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes pulse {
-    0% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-}
-</style>
+<style lang="scss" src="../styles/spinnerStyles.scss" />

package/src/components/essential/DlSpinner/styles/spinnerStyles.scss

@@ -0,0 +1,111 @@
+.spinner-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.dl-spinner {
+    vertical-align: middle;
+}
+
+.dl-spinner-mat {
+    animation: spinCircle 2s linear infinite;
+    transform-origin: center center;
+}
+.spinner-path {
+    stroke-dasharray: 1, 200 #{'/* rtl:ignore */'};
+    stroke-dashoffset: 0 #{'/* rtl:ignore */'};
+    animation: dash 1.5s ease-in-out infinite;
+}
+
+.spinner {
+    position: relative;
+}
+
+.spin-loader,
+.spin-bg {
+    width: var(--dl-spinner-size);
+    height: var(--dl-spinner-size);
+    top: 0;
+    left: 0;
+}
+
+.spin-loader {
+    position: absolute;
+    animation: spin 2s linear infinite;
+}
+
+.dl-spinner-icon {
+    top: var(--icon-top);
+    left: var(--icon-top);
+    position: absolute;
+    width: var(--dl-spinner-icon-size);
+    height: var(--dl-spinner-icon-size);
+    opacity: 1;
+    animation: pulse 2s infinite;
+}
+
+.dl-svg {
+    fill: var(--dl-spinner-border-color);
+}
+
+.spinner-color-bg {
+    fill: none;
+}
+
+.spinner-color {
+    fill: url(#linear-gradient);
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}
+
+@keyframes spinCircle {
+    0% {
+        transform: rotate3d(0, 0, 1, 0deg) #{'/* rtl:ignore */'};
+    }
+    25% {
+        transform: rotate3d(0, 0, 1, 90deg) #{'/* rtl:ignore */'};
+    }
+    50% {
+        transform: rotate3d(0, 0, 1, 180deg) #{'/* rtl:ignore */'};
+    }
+    75% {
+        transform: rotate3d(0, 0, 1, 270deg) #{'/* rtl:ignore */'};
+    }
+    100% {
+        transform: rotate3d(0, 0, 1, 359deg) #{'/* rtl:ignore */'};
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}

package/src/components/essential/DlTooltip/DlTooltip.vue

@@ -48,7 +48,8 @@ import {
     cleanEvt,
     clearSelection,
     getColor,
-    isMobileOrTablet
+    isMobileOrTablet,
+    stringStyleToRecord
 } from '../../../utils'
 import {
     parsePosition,
@@ -65,6 +66,7 @@ import {
 } from '../../../utils/click-outside'
 import DlTeleport from '../../../utils/teleport'
 import { v4 } from 'uuid'
+import { isString } from 'lodash'
 
 export default defineComponent({
     name: 'DlTooltip',
@@ -391,7 +393,9 @@ export default defineComponent({
             innerRef,
             portalEl: isVue2 ? 'body' : portalEl,
             styles: [
-                attrs.style,
+                isString(attrs.style)
+                    ? stringStyleToRecord(attrs.style)
+                    : attrs.style,
                 transitionStyle.value,
                 {
                     '--dl-tooltip-color': getColor(

package/src/demos/DlAlertDemo.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
         <DlAlert
+            type="info"
             :closable="true"
             fluid
         >

package/src/hooks/use-suggestions.ts

@@ -374,5 +374,5 @@ const matchStringEnd = (input: string, str: string) =>
     input.lastIndexOf(str + '" ') > -1 || input.lastIndexOf(str + "' ") > -1
 
 export const removeBrackets = (str: string) => {
-    return str.replaceAll('(', '').replaceAll(')', '')
+    return str.replace(/\(/g, '').replace(/\)/g, '')
 }

package/src/utils/index.ts

@@ -13,6 +13,7 @@ export * from './component-name-parser'
 export * from './colors'
 export * from './teleport'
 export * from './parse-smart-query'
+export * from './stringStyleToRecord'
 
 export const isMobileOrTablet = () => {
     let check = false

package/src/utils/stringStyleToRecord.ts

@@ -0,0 +1,17 @@
+export const stringStyleToRecord = (input: string): Record<string, string> => {
+    const style = input.split(';')
+    const output: Record<string, string> = {}
+    style.forEach((item) => {
+        const [key, value] = item.split(':')
+        if (key && value) {
+            output[snakeToCamel(key.trim())] = value.trim()
+        }
+    })
+    return output
+}
+
+export const snakeToCamel = (str: string): string => {
+    return str.replace(/([-_][a-z])/g, (group) =>
+        group.toUpperCase().replace('-', '').replace('_', '')
+    )
+}