@dataloop-ai/components 0.16.46 → 0.16.47

package/package.json

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

package/src/App.vue

@@ -69,9 +69,7 @@
                             :key="demo.name"
                             :bordered="index !== 0"
                             :clickable="clickable"
-                            :class="
-                                demo.name === activeDemo?.name ? 'selected' : ''
-                            "
+                            :class="isSelectedDemo(demo) ? 'selected' : ''"
                             style="text-transform: capitalize"
                             @click="setActiveDemo(demo)"
                         >
@@ -181,13 +179,18 @@ export default defineComponent({
                 : 'Dl' + name.split('Demo')[0]
         }
 
+        const isSelectedDemo = (demo: { name: string; component: any }) => {
+            return activeDemo.value?.name === demo.name
+        }
+
         return {
             darkMode,
             activeDemo,
             setActiveDemo,
             filterTerm,
             filteredDemos,
-            computeDemoName
+            computeDemoName,
+            isSelectedDemo
         }
     }
 })

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

@@ -9,9 +9,9 @@
         >
             <dl-icon
                 :icon="icon.src"
-                :styles="icon?.styles"
-                :size="icon?.size || '50px'"
-                :color="icon?.color || 'var(--dl-color-darker)'"
+                :styles="iconStyles"
+                :size="iconSize"
+                :color="iconColor"
             />
         </div>
         <div
@@ -20,8 +20,8 @@
         >
             <img
                 :src="image.src"
-                :style="image?.styles"
-                :alt="image?.alt"
+                :style="imageStyles"
+                :alt="imageAlt"
             >
         </div>
         <div class="card--content">
@@ -129,6 +129,23 @@ export default defineComponent({
             type: [Object, String, Array],
             default: null
         }
+    },
+    computed: {
+        iconStyles(): string {
+            return this.icon?.styles ?? ''
+        },
+        iconSize(): string {
+            return this.icon?.size ?? '50px'
+        },
+        iconColor(): string {
+            return this.icon?.color ?? 'var(--dl-color-darker)'
+        },
+        imageStyles(): string {
+            return this.image?.styles ?? ''
+        },
+        imageAlt(): string {
+            return this.image?.alt ?? ''
+        }
     }
 })
 </script>

package/src/components/compound/DlCharts/charts/DlConfusionMatrix/DlConfusionMatrix.vue

@@ -137,7 +137,7 @@
             The given props cannot create a valid matrix.
         </div>
         <div
-            v-if="tooltipState?.visible"
+            v-if="tooltipVisible"
             :style="tooltipStyles"
             class="tooltip"
         >
@@ -159,7 +159,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue-demi'
+import { defineComponent, PropType, ref } from 'vue-demi'
 import DlBrush from '../../components/DlBrush.vue'
 import DlTooltip from '../../../../essential/DlTooltip/DlTooltip.vue'
 import {
@@ -177,7 +177,7 @@ import {
     getCellWidth,
     flattenConfusionMatrix
 } from './utils'
-import { debounce } from 'lodash'
+import { debounce, isObject } from 'lodash'
 export default defineComponent({
     components: {
         DlBrush,
@@ -218,36 +218,53 @@ export default defineComponent({
     setup(props) {
         const { variables } = useThemeVariables()
 
-        const getCellBackground = (value: number = 1) => {
-            return hexToRgbA(
-                { ...variables, ...colorNames }[props.color],
-                value
-            )
+        const tooltipState = ref<{
+            x: string
+            y: string
+            visible?: boolean
+        } | null>(null)
+        const currentBrushState = ref<{ min: number; max: number }>({
+            min: 0,
+            max: props.matrix.length
+        })
+        const cellWidth = ref<number | null>(null)
+
+        const getCellBackground = (value: number = 1): string => {
+            const object: { [key: string]: any } = {
+                ...variables,
+                ...colorNames
+            }
+            const hex = object[props.color]
+            return hexToRgbA(hex, value)
         }
-        return { variables, getCellBackground }
-    },
-    data(): {
-        tooltipState: { x: string; y: string } | null
-        currentBrushState: { min: number; max: number }
-        cellWidth: number
-    } {
         return {
-            tooltipState: null,
-            currentBrushState: { min: 0, max: this.matrix.length },
-            cellWidth: null
+            variables,
+            getCellBackground,
+            cellWidth,
+            tooltipState,
+            currentBrushState
         }
     },
     computed: {
-        visibleLabels(): string[] | DlConfusionMatrixLabel[] {
-            return this.labels.slice(
-                this.currentBrushState.min,
-                this.currentBrushState.max
-            )
+        tooltipVisible(): boolean {
+            return this.tooltipState?.visible
+        },
+        visibleLabels(): DlConfusionMatrixLabel[] {
+            if (isObject(this.labels[0])) {
+                const arr = this.labels as DlConfusionMatrixLabel[]
+                return arr.slice(
+                    this.currentBrushState.min,
+                    this.currentBrushState.max
+                )
+            }
+            return []
         },
         labelStrings(): string[] | DlConfusionMatrixLabel[] {
-            if (typeof this.labels[0] === 'object')
-                return this.labels.map((label: any) => label.title)
-            else return this.labels
+            if (isObject(this.labels[0])) {
+                const arr = this.labels as DlConfusionMatrixLabel[]
+                return arr.map((label: DlConfusionMatrixLabel) => label.title)
+            }
+            return this.labels
         },
         labelImages(): string[] {
             return this.visibleLabels.map((label: any) => label.image)
@@ -320,9 +337,8 @@ export default defineComponent({
             30
         ),
         resizeYAxis() {
-            (this.$refs.yAxis as HTMLElement).style.height = `${
-                getCellWidth() * this.matrix.length
-            }px`
+            const yAxis = this.$refs.yAxis as HTMLElement
+            yAxis.style.height = `${getCellWidth() * this.matrix.length}px`
         },
         handleMatrixScroll(e: MouseEvent) {
             const target = e.target as HTMLElement

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

@@ -1,3 +1,4 @@
+import { isObject } from 'lodash'
 import { DlConfusionMatrixCell, DlConfusionMatrixLabel } from '../../types'
 
 export function getCellWidth() {
@@ -35,10 +36,10 @@ export function validateMatrix(
 export function normalizeMatrix(flatMatrix: DlConfusionMatrixCell[]) {
     const values = flatMatrix.map((cell) => cell.value)
     const largest = Math.max(...values)
-    flatMatrix.forEach((cell) => {
+    for (const cell of flatMatrix) {
         cell.unnormalizedValue = cell.value
         cell.value = Number((cell.value / largest).toFixed(1))
-    })
+    }
     return flatMatrix
 }
 
@@ -48,13 +49,17 @@ export function getGradationValues(
 ) {
     let max = Number.MIN_VALUE
     let min = Number.MAX_VALUE
-    matrix.forEach((row) => {
-        row.forEach((cell) => {
-            const cellValue = typeof cell === 'object' ? cell.value : cell
+
+    for (const row of matrix) {
+        for (const cell of row) {
+            const cellValue = isObject(cell)
+                ? (cell as DlConfusionMatrixCell).value
+                : cell
             if (cellValue > max) max = cellValue
             if (cellValue < min) min = cellValue
-        })
-    })
+        }
+    }
+
     const range = (max - min) / step
     const gradationValues = []
     let amount = 0
@@ -69,28 +74,23 @@ export function flattenConfusionMatrix(
     matrix: number[][] | DlConfusionMatrixCell[][],
     labelStrings: string[] | DlConfusionMatrixLabel[]
 ) {
-    return normalizeMatrix(
-        matrix.flatMap(
-            (row: number[] | DlConfusionMatrixCell[], rowIndex: number) => {
-                return row.map(
-                    (
-                        cell: number | DlConfusionMatrixCell,
-                        cellIndex: number
-                    ) => {
-                        const isObject = typeof cell === 'object'
-                        const value = isObject ? cell.value : cell
-                        return {
-                            value,
-                            unnormalizedValue: value,
-                            xLabel: labelStrings[rowIndex],
-                            yLabel: labelStrings[cellIndex],
-                            x: rowIndex,
-                            y: cellIndex,
-                            link: isObject ? cell.link : ''
-                        }
-                    }
-                )
-            }
-        )
-    )
+    const toNormalize: DlConfusionMatrixCell[] = []
+
+    for (const [rowIndex, row] of matrix.entries()) {
+        for (const [cellIndex, cell] of row.entries()) {
+            const value = isObject(cell)
+                ? (cell as DlConfusionMatrixCell).value
+                : cell
+            toNormalize.push({
+                value,
+                unnormalizedValue: value,
+                xLabel: labelStrings[rowIndex],
+                yLabel: labelStrings[cellIndex],
+                x: rowIndex,
+                y: cellIndex,
+                link: isObject ? (cell as DlConfusionMatrixCell).link : ''
+            })
+        }
+    }
+    return normalizeMatrix(toNormalize)
 }

package/src/components/compound/DlCharts/types/DlConfusionMatrix.types.ts

@@ -5,7 +5,7 @@ export interface DlConfusionMatrixCell {
     yLabel: string | DlConfusionMatrixLabel
     x: number
     y: number
-    link: string
+    link?: string
 }
 
 export interface DlConfusionMatrixLabel {

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

@@ -117,7 +117,7 @@
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, ref, PropType } from 'vue-demi'
+import { defineComponent, ref, PropType, computed } from 'vue-demi'
 import { DlButton } from '../../../../basic'
 import { DlDatePicker } from '../../../DlDateTime'
 import { DlMenu, DlIcon } from '../../../../essential'
@@ -218,6 +218,10 @@ export default defineComponent({
         const styledTexarea = ref(null)
         const styledInput = ref(null)
 
+        const focused = ref(false)
+        const isOverflow = ref(false)
+        const isTyping = ref(false)
+
         const { hasEllipsis } = useSizeObserver(input)
 
         const suggestionModal = ref(false)
@@ -253,35 +257,16 @@ export default defineComponent({
             emit('update:modelValue', stringValue)
         }
 
-        return {
-            input,
-            label,
-            hasEllipsis,
-            suggestionModal,
-            setInputValue,
-            menuOffset,
-            cancelBlur,
-            expanded,
-            styledTexarea,
-            styledInput,
-            datePickerSelection,
-            isDatePickerVisible
-        }
-    },
-    data(): {
-        focused: boolean
-        isOverflow: boolean
-        isTyping: boolean
-    } {
-        return {
-            focused: false,
-            isOverflow: false,
-            isTyping: false
-        }
-    },
-    computed: {
-        statusIcon(): string {
-            switch (this.status.type) {
+        const saveStatus = computed(() => {
+            return (
+                props.disabled ||
+                !props.modelValue ||
+                props.status?.type === 'error'
+            )
+        })
+
+        const statusIcon = computed(() => {
+            switch (props.status?.type) {
                 case 'success':
                     return 'icon-dl-approve-filled'
                 case 'error':
@@ -291,9 +276,10 @@ export default defineComponent({
                 default:
                     return ''
             }
-        },
-        statusIconColor(): string {
-            switch (this.status.type) {
+        })
+
+        const statusIconColor = computed(() => {
+            switch (props.status?.type) {
                 case 'success':
                     return 'dl-color-positive'
                 case 'error':
@@ -303,65 +289,89 @@ export default defineComponent({
                 default:
                     return ''
             }
-        },
-        screenIcon(): string {
-            return this.expanded
-                ? 'icon-dl-fit-to-screen'
-                : 'icon-dl-full-screen'
-        },
-        searchBarClasses(): string {
+        })
+
+        const screenIcon = computed(() => {
+            return expanded ? 'icon-dl-fit-to-screen' : 'icon-dl-full-screen'
+        })
+
+        const searchBarClasses = computed(() => {
             let classes = 'dl-smart-search-input__search-bar'
 
-            if (this.focused && this.status.type === 'info') {
+            if (focused && props.status?.type === 'info') {
                 classes += ' dl-smart-search-input__search-bar--focused'
             } else {
-                if (this.status.type === 'error') {
+                if (props.status?.type === 'error') {
                     classes += ' dl-smart-search-input__search-bar--error'
-                } else if (this.status.type === 'warning') {
+                } else if (props.status?.type === 'warning') {
                     classes += ' dl-smart-search-input__search-bar--warning'
                 }
             }
 
-            if (this.expanded) {
+            if (expanded) {
                 classes += ' dl-smart-search-input__search-bar--expanded'
             }
 
-            if (this.disabled) {
+            if (props.disabled) {
                 classes += ' dl-smart-search-input__search-bar--disabled'
             }
 
             return classes
-        },
-        labelStyles(): Record<string, any> {
+        })
+
+        const labelStyles = computed(() => {
             return {
-                color: this.status.type === 'error' ? 'red' : 'gray'
+                color: props.status?.type === 'error' ? 'red' : 'gray'
             }
-        },
-        messageClasses(): string {
+        })
+
+        const messageClasses = computed(() => {
             let classes = 'dl-smart-search-input__message'
 
-            if (this.status) {
-                classes += ` dl-smart-search-input__message--${this.status}`
+            if (props.status) {
+                classes += ` dl-smart-search-input__message--${props.status}`
             }
 
             return classes
-        },
-        withClearBtn(): boolean {
-            return this.modelValue.length > 0
-        },
-        cssVars(): Record<string, string> {
+        })
+
+        const withClearBtn = computed(() => {
+            return props.modelValue?.length > 0
+        })
+
+        const cssVars = computed(() => {
             return {
                 '--dl-smart-search-bar-wrapper-height':
-                    this.expandedInputHeight,
-                '--dl-smart-search-input-height': this.inputHeight
+                    props.expandedInputHeight,
+                '--dl-smart-search-input-height': props.inputHeight
             }
-        },
-        saveStatus() {
-            return (
-                this.disabled ||
-                !this.modelValue ||
-                this.status.type === 'error'
-            )
+        })
+
+        return {
+            input,
+            label,
+            hasEllipsis,
+            suggestionModal,
+            setInputValue,
+            menuOffset,
+            cancelBlur,
+            expanded,
+            styledTexarea,
+            styledInput,
+            datePickerSelection,
+            isDatePickerVisible,
+            focused,
+            isOverflow,
+            isTyping,
+            saveStatus,
+            statusIcon,
+            statusIconColor,
+            screenIcon,
+            searchBarClasses,
+            labelStyles,
+            messageClasses,
+            withClearBtn,
+            cssVars
         }
     },
     watch: {

package/src/components/compound/DlToggleButton/DlToggleButton.vue

@@ -64,7 +64,7 @@ export default defineComponent({
     }),
     computed: {
         value: {
-            get() {
+            get(): string | number | null {
                 return this.modelValue
             },
             set(value: string | number) {
@@ -79,7 +79,7 @@ export default defineComponent({
                 this.$emit('update:modelValue', buttonValue)
             }
         },
-        toggleButtons() {
+        toggleButtons(): DlToggleButtonOption[] {
             return this.options.slice(0, 3)
         }
     },

package/src/components/essential/DlSeparator/DlSeparator.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { computed, defineComponent } from 'vue-demi'
 import { includes } from '../../../utils'
 
 export default defineComponent({
@@ -32,31 +32,35 @@ export default defineComponent({
             default: '10px'
         }
     },
-    computed: {
-        styles() {
+    setup(props) {
+        const { color, height, type, indent, width } = props
+        const styles = computed(() => {
             let styles
-            switch (this.type) {
+            switch (type) {
                 case 'horizontal':
                     styles = {
-                        backgroundColor: this.color,
-                        width: this.width || '300px',
-                        height: this.height || '1px',
-                        marginTop: this.indent,
-                        marginBottom: this.indent
+                        backgroundColor: color,
+                        width: width ?? '300px',
+                        height: height ?? '1px',
+                        marginTop: indent,
+                        marginBottom: indent
                     }
                     break
                 case 'vertical':
                     styles = {
-                        backgroundColor: this.color,
-                        width: this.width || '1px',
-                        height: this.height || '300px',
-                        marginLeft: this.indent,
-                        marginRight: this.indent
+                        backgroundColor: color,
+                        width: width ?? '1px',
+                        height: height ?? '300px',
+                        marginLeft: indent,
+                        marginRight: indent
                     }
                     break
+                default:
+                    styles = {}
             }
             return styles
-        }
+        })
+        return { styles }
     }
 })
 </script>

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

@@ -41,4 +41,116 @@ export default defineComponent({
 })
 </script>
 
-<style src="../styles/spinnerStyles.scss" />
+<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>

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

@@ -76,4 +76,116 @@ export default defineComponent({
 })
 </script>
 
-<style src="../styles/spinnerStyles.scss" />
+<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>

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

@@ -110,4 +110,116 @@ export default defineComponent({
 })
 </script>
 
-<style src="../styles/spinnerStyles.scss" />
+<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>

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

@@ -163,4 +163,116 @@ export default defineComponent({
 })
 </script>
 
-<style src="../styles/spinnerStyles.scss" />
+<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>

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

@@ -149,4 +149,116 @@ export default defineComponent({
 })
 </script>
 
-<style src="../styles/spinnerStyles.scss" />
+<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>

package/src/demos/DlToggleButtonDemo.vue

@@ -23,29 +23,27 @@
 
 <script lang="ts">
 import { DlIcon, DlInput, DlToggleButton } from '../components'
+import { DlToggleButtonOption } from '../components/types'
 import { defineComponent } from 'vue-demi'
 
 export default defineComponent({
     name: 'DlToggleButtonDemo',
     components: { DlIcon, DlInput, DlToggleButton },
-    setup() {
-        return {
-            DlToggleButton
-        }
-    },
     data: () => ({
         options: [
             { label: 'Button 1', value: 1 },
             { label: 'Button 2', value: 2 },
             { label: 'Button 3', value: 3 }
-        ],
+        ] as DlToggleButtonOption[],
         selectedValue: 1,
         width: '100%'
     }),
     computed: {
-        label() {
-            return this.options.find((o) => o.value === this.selectedValue)
-                ?.label
+        label(): string {
+            const option = this.options.find(
+                (o: DlToggleButtonOption) => o.value === this.selectedValue
+            )
+            return option?.label ?? ''
         }
     },
     methods: {

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

@@ -1,111 +0,0 @@
-.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;
-    }
-}