@dataloop-ai/components 0.15.6 → 0.16.0

package/package.json

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

package/src/assets/grid.css

@@ -0,0 +1,9 @@
+grid {
+    display: grid;
+}
+.grid-cols-2 {
+    grid-template-columns: 1fr 1fr;
+}
+.grid-cols-3 {
+    grid-template-columns: 1fr 1fr 1fr;
+}

package/src/components/{DlAccordion → basic/DlAccordion}/DlAccordion.vue

@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import DlAccordionHeader from './AccordionHeader.vue'
+import DlAccordionHeader from './components/AccordionHeader.vue'
 import { defineComponent } from 'vue-demi'
 import { v4 } from 'uuid'
 

package/src/components/{DlAccordion → basic/DlAccordion/components}/AccordionHeader.vue

@@ -8,8 +8,8 @@
         <dl-icon
             class="expand-icon"
             :size="$props.fontSize"
-            :class="{ expanded: isOpen }"
-            icon="icon-dl-right-chevron"
+            :class="{ expanded: isOpen, rightSide }"
+            :icon="rightSide ? 'icon-dl-down-chevron' : 'icon-dl-right-chevron'"
             :color="titleColor"
         />
         <div class="header-content">
@@ -43,11 +43,10 @@
 </template>
 
 <script lang="ts">
-import DlIcon from '../DlIcon.vue'
-import DlTooltip from '../DlTooltip.vue'
+import { DlIcon, DlTooltip } from '../../../essential'
 import { defineComponent, ref } from 'vue-demi'
-import { getColor } from '../../utils'
-import { useSizeObserver } from '../../hooks/use-size-observer'
+import { getColor } from '../../../../utils'
+import { useSizeObserver } from '../../../../hooks/use-size-observer'
 export default defineComponent({
     name: 'AccordionHeader',
     components: {
@@ -106,7 +105,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 .accordion-header {
-    padding: 13px 16px;
+    padding: 12px 16px;
     cursor: pointer;
     font-size: var(--dl-accordion-header-fontsize);
     display: flex;
@@ -141,6 +140,16 @@ export default defineComponent({
     display: flex !important;
     color: var(--dl-expand-icon-color);
     transition: all 300ms;
+
+    &.rightSide {
+        padding-left: 10px;
+        padding-right: 16px;
+    }
+
+    &.expanded.rightSide {
+        transform: rotate(180deg);
+    }
+
     &.expanded {
         transform: rotate(90deg);
     }

package/src/components/{DlAlert.vue → basic/DlAlert/DlAlert.vue}

@@ -46,12 +46,12 @@ import {
     defineComponent,
     nextTick,
     onMounted,
-    ref,
     Ref,
+    ref,
     watch
 } from 'vue-demi'
-import { getColor, includes } from '../utils'
-import { DlIcon } from './'
+import { getColor, includes } from '../../../utils'
+import { DlIcon } from '../../essential'
 
 type AlertType = 'info' | 'success' | 'warning' | 'error'
 

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

@@ -0,0 +1,2 @@
+import DlAlert from './DlAlert.vue'
+export { DlAlert }

package/src/components/{DlAvatar.vue → basic/DlAvatar/DlAvatar.vue}

@@ -19,8 +19,8 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue-demi'
-import DlTooltip from './DlTooltip.vue'
-import { getColor } from '../utils'
+import { DlTooltip } from '../../essential'
+import { getColor } from '../../../utils'
 import { v4 } from 'uuid'
 
 export default defineComponent({

package/src/components/basic/DlAvatar/index.ts

@@ -0,0 +1,2 @@
+import DlAvatar from './DlAvatar.vue'
+export { DlAvatar }

package/src/components/{DlButton → basic/DlButton}/DlButton.vue

@@ -50,8 +50,7 @@
 </template>
 
 <script lang="ts">
-import DlIcon from '../DlIcon.vue'
-import DlTooltip from '../DlTooltip.vue'
+import { DlTooltip, DlIcon } from '../../essential'
 import {
     setPadding,
     setFontSize,
@@ -66,26 +65,12 @@ import {
     setMaxHeight
 } from './utils'
 import type { ButtonSizes } from './utils'
-import { textTransform } from '../../utils/string'
+import { textTransform } from '../../../utils/string'
 import { defineComponent, PropType, ref } from 'vue-demi'
-import { colorNames } from '../../utils/css-color-names'
-import { useSizeObserver } from '../../hooks/use-size-observer'
+import { colorNames } from '../../../utils/css-color-names'
+import { useSizeObserver } from '../../../hooks/use-size-observer'
 import { v4 } from 'uuid'
-
-export enum ButtonState {
-    Active = 'ACTIVE',
-    Hover = 'HOVER',
-    Pressed = 'PRESSED',
-    Disabled = 'DISABLED'
-}
-
-export enum ButtonPart {
-    Text = 'TEXT',
-    Background = 'BACKGROUND',
-    Border = 'BORDER'
-}
-
-export type ButtonColors = Record<ButtonState, Record<ButtonPart, string>>
+import { ButtonColors } from './types'
 
 export default defineComponent({
     name: 'DlButton',

package/src/components/{DlButton → basic/DlButton}/index.ts

@@ -1,4 +1,3 @@
 import DlButton from './DlButton.vue'
 
-export * from './utils'
 export { DlButton }

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

@@ -0,0 +1,14 @@
+export enum ButtonState {
+    Active = 'ACTIVE',
+    Hover = 'HOVER',
+    Pressed = 'PRESSED',
+    Disabled = 'DISABLED'
+}
+
+export enum ButtonPart {
+    Text = 'TEXT',
+    Background = 'BACKGROUND',
+    Border = 'BORDER'
+}
+
+export type ButtonColors = Record<ButtonState, Record<ButtonPart, string>>

package/src/components/{DlButton → basic/DlButton}/utils.ts

@@ -1,5 +1,5 @@
-import { getColor } from '../../utils'
-import { getLighterGradient } from '../../utils/getLighterGradient'
+import { getColor } from '../../../utils'
+import { getLighterGradient } from '../../../utils/getLighterGradient'
 
 export type ButtonSizes = 's' | 'm' | 'l' | 'xl'
 
@@ -38,7 +38,7 @@ const fontSizes = {
     xl: '18px'
 }
 
-interface ButtonProps {
+export interface DlButtonProps {
     disabled: boolean
     outlined: boolean
     flat: boolean
@@ -64,7 +64,7 @@ export const setTextColor = ({
     color,
     filled,
     textColor
-}: ButtonProps): string => {
+}: DlButtonProps): string => {
     if (disabled) {
         return getColor('', 'dl-color-disabled')
     }
@@ -90,7 +90,7 @@ export const setBgColor = ({
     flat,
     outlined,
     color = ''
-}: Partial<ButtonProps>) => {
+}: Partial<DlButtonProps>) => {
     if (disabled || flat || outlined) {
         return 'var(--dl-color-transparent)'
     }
@@ -102,7 +102,7 @@ export const setBorder = ({
     disabled,
     flat,
     color = ''
-}: Partial<ButtonProps>) => {
+}: Partial<DlButtonProps>) => {
     if (disabled) {
         return flat
             ? 'var(--dl-color-transparent)'
@@ -120,7 +120,7 @@ export const setColorOnHover = ({
     flat,
     outlined,
     color
-}: Partial<ButtonProps>) => {
+}: Partial<DlButtonProps>) => {
     if (color) return getLighterGradient(color)
     if (disabled) {
         return flat ? 'var(--dl-color-transparent)' : 'var(--dl-color-disabled)'
@@ -136,7 +136,7 @@ export const setBorderOnHover = ({
     disabled,
     flat,
     color
-}: Partial<ButtonProps>) => {
+}: Partial<DlButtonProps>) => {
     if (disabled) {
         return 'var(--dl-color-separator)'
     }
@@ -155,7 +155,7 @@ export const setBgOnHover = ({
     outlined,
     filled,
     color
-}: Partial<ButtonProps>) => {
+}: Partial<DlButtonProps>) => {
     if (color) return getLighterGradient(color)
 
     if (disabled || flat || outlined) {

package/src/components/{DlChip → basic/DlChip}/DlChip.vue

@@ -49,9 +49,8 @@
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
-import DlTooltip from '../../components/DlTooltip.vue'
-import DLIcon from '../../components/DlIcon.vue'
-import { useSizeObserver } from '../../hooks/use-size-observer'
+import { DlIcon, DlTooltip } from '../../essential'
+import { useSizeObserver } from '../../../hooks/use-size-observer'
 import {
     setTextColor,
     setBgColor,
@@ -81,7 +80,7 @@ export default defineComponent({
     name: 'DlChip',
     components: {
         'dl-tooltip': DlTooltip,
-        'dl-icon': DLIcon
+        'dl-icon': DlIcon
     },
     props: {
         disabled: Boolean,

package/src/components/basic/DlChip/index.ts

@@ -0,0 +1,3 @@
+import DlChip from './DlChip.vue'
+
+export { DlChip }

package/src/components/{DlChip → basic/DlChip}/utils.ts

@@ -1,6 +1,6 @@
-import { getColor } from '../../utils'
+import { getColor } from '../../../utils'
 
-interface ChipProps {
+export interface DlChipProps {
     hasIcon: boolean
     hasLabel: boolean
     removable: boolean
@@ -16,7 +16,7 @@ export const setTextColor = ({
     outlined,
     filled,
     textColor = ''
-}: Partial<ChipProps>): string => {
+}: Partial<DlChipProps>): string => {
     if (disabled) {
         return getColor('', 'dl-color-disabled')
     }
@@ -34,7 +34,7 @@ export const setBgColor = ({
     disabled,
     outlined,
     color = ''
-}: Partial<ChipProps>) => {
+}: Partial<DlChipProps>) => {
     if (disabled || outlined) {
         return 'transparent'
     }
@@ -42,7 +42,7 @@ export const setBgColor = ({
     return getColor(color, 'dl-color-secondary')
 }
 
-export const setBorder = ({ disabled, color = '' }: Partial<ChipProps>) => {
+export const setBorder = ({ disabled, color = '' }: Partial<DlChipProps>) => {
     if (disabled) {
         return `1px solid var(--dl-color-disabled)`
     }
@@ -54,7 +54,7 @@ export const setPadding = ({
     hasLabel,
     removable,
     hasIcon
-}: Partial<ChipProps>) => {
+}: Partial<DlChipProps>) => {
     const left = hasIcon ? 20 : 5
     const right = removable ? 20 : 5
 
@@ -76,7 +76,7 @@ export const setRemoveIconWidth = ({
     hasLabel,
     removable,
     hasIcon
-}: Partial<ChipProps>) => {
+}: Partial<DlChipProps>) => {
     const iconWidth = (hasLabel || hasIcon) && removable ? 14 : 18
 
     return `${iconWidth}px`
@@ -96,5 +96,5 @@ export const setMaxWidth = (maxWidth: string | number) => {
 export const setLeftIconColor = ({
     color = '',
     disabled
-}: Partial<ChipProps>) =>
+}: Partial<DlChipProps>) =>
     getColor(disabled ? 'dl-color-disabled' : color, 'dl-color-secondary')

package/src/components/basic/DlKpi/DlKpi.vue

@@ -0,0 +1,275 @@
+<template>
+    <div
+        class="kpi_box"
+        :style="cssVars"
+    >
+        <div class="kpi_box__counter">
+            <dl-typography
+                color="dl-color-secondary"
+                variant="h1"
+                :size="counterFontSizeComputed"
+            >
+                {{ formatCounter(counter) }}
+            </dl-typography>
+        </div>
+        <div class="kpi_box__title">
+            <div class="kpi_box__title__text">
+                <div>
+                    <dl-typography
+                        color="dl-color-darker"
+                        variant="h3"
+                        :size="titleFontSizeComputed"
+                    >
+                        {{ title }}
+                    </dl-typography>
+                </div>
+                <div v-if="infoMessage">
+                    <KpiInfo :info-message="infoMessage" />
+                </div>
+            </div>
+            <div class="kpi_box__title__subtext">
+                <dl-typography
+                    color="dl-color-medium"
+                    variant="h3"
+                    :size="subtitleFontSize"
+                >
+                    {{ subtitle }}
+                </dl-typography>
+            </div>
+        </div>
+        <div
+            v-if="withProgressBar"
+            class="kpi_box__progress_bar"
+        >
+            <dl-progress-bar
+                color="dl-color-darker"
+                :value="progressValue(progress)"
+                :show-value="true"
+                :show-percentage="true"
+                :summary="progress.text"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue-demi'
+import {
+    DlKpiCounterFormat,
+    DlKpiCounterType,
+    DlKpiProgressType
+} from './types/KpiItem'
+import { DlProgressBar, DlTypography } from '../../essential'
+import { abbreviateNumber, numberWithComma } from '../../../utils/formatNumber'
+import KpiInfo from './components/KpiInfo.vue'
+
+export default defineComponent({
+    name: 'DlKpi',
+    components: {
+        DlProgressBar,
+        DlTypography,
+        KpiInfo
+    },
+    props: {
+        counter: {
+            type: Object as PropType<DlKpiCounterType | number>,
+            default: () => ({})
+        },
+        counterFontSize: {
+            type: String,
+            default: '1.88em',
+            required: true
+        },
+        title: {
+            type: String,
+            default: '---',
+            required: true
+        },
+        titleFontSize: {
+            type: String,
+            default: '16px',
+            required: false
+        },
+        subtitle: {
+            type: String,
+            default: '',
+            required: false
+        },
+        subtitleFontSize: {
+            type: String,
+            default: '12px',
+            required: false
+        },
+        infoMessage: {
+            type: String,
+            default: 'No data',
+            required: false
+        },
+        progress: {
+            type: Object as PropType<DlKpiProgressType>,
+            default: () => ({})
+        },
+        withBorder: {
+            type: Boolean,
+            default: false,
+            required: false
+        },
+        withProgressBar: {
+            type: Boolean,
+            default: false,
+            required: false
+        },
+        isSmall: {
+            type: Boolean,
+            default: false,
+            required: false
+        }
+    },
+    setup(props) {
+        const progressValue = (progress: DlKpiProgressType) => {
+            return progress?.value ? progress.value / 100 : null
+        }
+
+        const emptyString = '---'
+
+        const cssVars = computed(() => {
+            return {
+                '--dl-kpi-border': props.withBorder ? '1px solid #e4e4e4' : ''
+            }
+        })
+
+        const counterFontSizeComputed = computed(() =>
+            props.isSmall ? '20px' : props.counterFontSize
+        )
+        const titleFontSizeComputed = computed(() =>
+            props.isSmall ? '14px' : props.titleFontSize
+        )
+
+        const formatCounter = (counter: DlKpiCounterType) => {
+            if (!counter) {
+                return emptyString
+            }
+            if (typeof counter === 'number') {
+                return formatNumberCounter(counter)
+            }
+            if (!counter.value) {
+                return emptyString
+            }
+            if (typeof counter.value === 'number') {
+                return formatNumberCounter(counter.value, counter.format)
+            }
+            if (typeof counter.value === 'string') {
+                if (!counter.value.length) {
+                    return emptyString
+                }
+                const [hour, minutes, seconds] = (
+                    counter.value as string
+                ).split(':')
+                switch (counter.format) {
+                    case DlKpiCounterFormat.hms: {
+                        return `${hour}:${minutes}:${seconds}`.toLowerCase()
+                    }
+                    case DlKpiCounterFormat.hm: {
+                        return `${hour}:${minutes}`.toLowerCase()
+                    }
+                    case DlKpiCounterFormat.h: {
+                        return `${hour}`.toLowerCase()
+                    }
+                    case DlKpiCounterFormat.ms: {
+                        return `${minutes}:${seconds}`.toLowerCase()
+                    }
+                    case DlKpiCounterFormat.m: {
+                        return `${minutes}`.toLowerCase()
+                    }
+                    case DlKpiCounterFormat.s: {
+                        return `${seconds}`.toLowerCase()
+                    }
+                    default: {
+                        return `${hour}:${minutes}:${seconds}`.toLowerCase()
+                    }
+                }
+            }
+        }
+
+        const formatNumberCounter = (amount: number, format = '') => {
+            if (!amount) {
+                return emptyString
+            }
+            if (amount === 0) {
+                return 0
+            }
+            return format === 'short'
+                ? (abbreviateNumber(amount as number) as string).toLowerCase()
+                : numberWithComma(amount as number)
+        }
+
+        return {
+            progressValue,
+            formatCounter,
+            cssVars,
+            titleFontSizeComputed,
+            counterFontSizeComputed
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.kpi_box {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    padding: 20px 6px;
+    border-radius: 2px;
+    overflow: hidden;
+    border: var(--dl-kpi-border);
+
+    &__counter {
+        text-align: center;
+        text-transform: lowercase;
+    }
+
+    &__title {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        justify-content: center;
+        padding-top: 6px;
+        color: var(--dl-color-darker);
+
+        &__text {
+            display: flex;
+            flex-direction: row;
+            max-width: 90%;
+            max-height: 40px;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 16px;
+            line-height: 19px;
+            text-transform: capitalize;
+            text-align: center;
+            overflow: hidden;
+            gap: 10px;
+        }
+        &__subtext {
+            max-width: 90%;
+            max-height: 40px;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 19px;
+            text-transform: capitalize;
+            text-align: center;
+            overflow: hidden;
+        }
+    }
+
+    &__progress_bar {
+        width: 70%;
+        padding-top: 10px;
+    }
+}
+</style>

package/src/components/basic/DlKpi/components/KpiInfo.vue

@@ -0,0 +1,54 @@
+<template>
+    <div
+        @mouseover="setIsVisibleInfoMessage(true)"
+        @mouseleave="setIsVisibleInfoMessage(false)"
+    >
+        <dl-tooltip
+            v-if="isVisibleInfoMessage"
+            anchor="top middle"
+        >
+            {{ message }}
+        </dl-tooltip>
+        <dl-icon
+            icon="icon-dl-info"
+            size="16px"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed } from 'vue-demi'
+import { DlTooltip, DlIcon } from '../../../essential'
+
+export default defineComponent({
+    name: 'KpiInfo',
+    components: {
+        DlTooltip,
+        DlIcon
+    },
+    props: {
+        infoMessage: {
+            type: String,
+            default: '',
+            required: false
+        }
+    },
+    setup(props) {
+        const isVisibleInfoMessage = ref(false)
+        const setIsVisibleInfoMessage = (value: boolean): void => {
+            isVisibleInfoMessage.value = value
+        }
+        const message = computed(() =>
+            props.infoMessage ? props.infoMessage : 'no data'
+        )
+
+        return {
+            isVisibleInfoMessage,
+            setIsVisibleInfoMessage,
+            message
+        }
+    }
+})
+</script>
+
+<style scoped></style>

package/src/components/basic/DlKpi/index.ts

@@ -0,0 +1,2 @@
+import DlKpi from './DlKpi.vue'
+export { DlKpi }