@dataloop-ai/components 0.13.19 → 0.14.4

package/src/demo/DlToastMessageDemo.vue

@@ -0,0 +1,143 @@
+<template>
+    <div style="width: 950px; padding-top: 20px">
+        <div class="flex">
+            <div>
+                <dl-text-area
+                    v-model="message"
+                    title="Message"
+                />
+                <dl-text-input
+                    v-model="duration"
+                    type="number"
+                    title="Duration seconds"
+                />
+                <dl-text-input
+                    v-model="classItem"
+                    title="Custom class for toast item"
+                />
+            </div>
+            <div class="flex">
+                <div>
+                    Type
+                    <dl-radio
+                        v-model="type"
+                        value="success"
+                        label="Success"
+                    />
+                    <dl-radio
+                        v-model="type"
+                        value="warning"
+                        label="Warning"
+                    />
+                    <dl-radio
+                        v-model="type"
+                        value="error"
+                        label="Error"
+                    />
+                    <dl-radio
+                        v-model="type"
+                        value="info"
+                        label="Info"
+                    />
+                </div>
+                <div>
+                    Position
+                    <dl-radio
+                        v-model="position"
+                        value="bottom"
+                        label="Bottom"
+                    />
+                    <dl-radio
+                        v-model="position"
+                        value="bottom-left"
+                        label="Bottom left"
+                    />
+                    <dl-radio
+                        v-model="position"
+                        value="bottom-right"
+                        label="Bottom right"
+                    />
+                    <dl-radio
+                        v-model="position"
+                        value="top"
+                        label="Top"
+                    />
+                    <dl-radio
+                        v-model="position"
+                        value="top-left"
+                        label="Top left"
+                    />
+                    <dl-radio
+                        v-model="position"
+                        value="top-right"
+                        label="Top right"
+                    />
+                </div>
+                <div>
+                    <dl-switch
+                        v-model="closable"
+                        left-label="Closable"
+                    />
+                </div>
+            </div>
+        </div>
+        <dl-button @click="showToastMessage">
+            Show Toast Message
+        </dl-button>
+    </div>
+</template>
+
+<script lang="ts">
+import { DlButton } from '../components'
+import { DlToast } from '../components/DlToastMessage'
+import { defineComponent, ref } from 'vue-demi'
+import DlTextInput from '../components/DlTextInput.vue'
+import DlRadio from '../components/DlRadio.vue'
+import DlTextArea from '../components/DlTextArea.vue'
+import DlSwitch from '../components/DlSwitch.vue'
+export default defineComponent({
+    name: 'DlToast',
+    components: {
+        DlSwitch,
+        DlTextArea,
+        DlRadio,
+        DlTextInput,
+        DlButton
+    },
+    setup() {
+        const message = ref(
+            'This is a sample message with a <a href="https://google.com/">link</a>'
+        )
+        const duration = ref(10)
+        const type = ref('success')
+        const position = ref('bottom')
+        const closable = ref(true)
+        const classItem = ref('demo-toast')
+        function showToastMessage() {
+            DlToast.open({
+                message: message.value,
+                position: position.value,
+                type: type.value,
+                duration: duration.value,
+                classItem: classItem.value,
+                closable: closable.value
+            })
+        }
+        return {
+            showToastMessage,
+            message,
+            duration,
+            type,
+            position,
+            classItem,
+            closable
+        }
+    }
+})
+</script>
+
+<style scoped>
+.flex {
+    display: flex;
+}
+</style>

package/src/demo/DlWidgetDemo.vue

@@ -1,157 +1,119 @@
 <script lang="ts">
-import { defineComponent, ref } from 'vue-demi'
-import DlWidgetGrid from '../components/DlWidget/DlWidgetGrid.vue'
-import { DlButton } from '../components'
-import BadgeDemo from './DlBadgeDemo.vue'
-import { Widget } from '../components/DlWidget/types'
-import DlDialogBox from '../components/DlDialogBox/DlDialogBox.vue'
-import DlDialogBoxHeader from '../components/DlDialogBox/DlDialogBoxHeader.vue'
-import DlDialogBoxFooter from '../components/DlDialogBox/DlDialogBoxFooter.vue'
-import DlChip from '../components/DlChip/DlChip.vue'
+import { defineComponent } from 'vue-demi'
+import DlBarChart from '../components/DlChart/DlBarChart.vue'
+import DlGrid from '../components/DlWidget/DlGrid.vue'
+import DlGridRow from '../components/DlWidget/DlGridRow.vue'
+import DlWidget from '../components/DlWidget/DlWidget.vue'
 
-export default defineComponent({
-    components: {
-        DlWidgetGrid,
-        DlButton,
-        DlDialogBox,
-        DlDialogBoxHeader,
-        DlDialogBoxFooter,
-        DlChip
-    },
-    setup() {
-        const isEditable = ref(false)
-        const addDialog = ref(false)
-        const handleEditMode = () => (isEditable.value = !isEditable.value)
-
-        const widgetLibrary = ref([
-            {
-                title: 'Widget 1',
-                subTitle: 'first widget',
-                content: BadgeDemo,
-                description:
-                    'Lorem ipsum dolor sit amet consectetur. Ultricies odio sagittis bibendum tristique congue pretium ac massa proin. Leo blandit commodo sit nibh sem. dfsdfdsfsdf dfsdfsdfsdfsd'
-            }
-        ] as Widget[])
-
-        const widgets = ref([
-            [
-                {
-                    title: 'Widget 8',
-                    subTitle: 'eighth widget',
-                    content: `Do I contradict myself?
-                              Very well then I contradict myself,
-                              (I am large, I contain multitudes.)
-                              I concentrate toward them that are nigh, I wait on the door-slab.
-                              Who has done his day's work? who will soonest be through with his supper?
-                              Who wishes to walk with me?`,
-                    description:
-                        'Lorem dolor sit amet consectetur. Ultricies odio sagittis bibendum tristique congue pretium ac massa proin. Leo blandit commodo sit nibh sem. dfsdfdsfsdf dfsdfsdfsdfsd'
-                }
-            ],
-            [
-                {
-                    title: 'Widget 2',
-                    subTitle: 'second widget',
-                    content: `“Later she remembered all the hours of the afternoon as happy -- one of those uneventful times that seem at the moment only a link between past and future pleasure, but turn out to have been the pleasure itself.”`,
-                    description:
-                        'Lorem ipsum dolor sit amet consectetur. Ultricies odio sagittis bibendum tristique congue pretium ac massa proin. Leo blandit commodo sit nibh sem. dfsdfdsfsdf dfsdfsdfsdfsd'
-                },
-                {
-                    title: 'Widget 3',
-                    subTitle: 'third widget',
-                    content: `The Bat that flits at close of Eve
-                          Has left the Brain that wont Believe
-                          The Owl that calls upon the Night
-                          Speaks the Unbelievers fright`,
-                    description:
-                        'Lorem ipsum dolor sit amet consectetur. Ultricies odio sagittis bibendum tristique congue pretium ac massa proin. Leo blandit commodo sit nibh sem. dfsdfdsfsdf dfsdfsdfsdfsd'
-                }
-            ],
-            [
-                {
-                    title: 'Widget 4',
-                    subTitle: 'fourth widget',
-                    content: `That motley drama—oh, be sure   
-                             It shall not be forgot!
-                          With its Phantom chased for evermore   
-                             By a crowd that seize it not,`,
-                    description:
-                        'Lorem ipsum dolor sit amet consectetur. Ultricies odio sagittis bibendum tristique congue pretium ac massa proin. Leo blandit commodo sit nibh sem. dfsdfdsfsdf dfsdfsdfsdfsd'
-                }
-            ]
-        ] as Widget[][])
+const labelsFn = () => {
+    const a = []
+    for (let i = 0; i < 20; i++) {
+        a.push(`${i}`)
+    }
+    return a
+}
 
-        const addWidget = (widget: Widget) => {
-            widgets.value[widgets.value.length - 1].push(widget)
-            addDialog.value = false
-        }
+const dataFn = () => {
+    const a = []
+    for (let i = 1; i <= 20; i++) {
+        a.push(i)
+    }
+    return a
+}
 
-        const handleRemove = (widget: Widget) => {
-            widgetLibrary.value.push(widget)
+const data = {
+    labels: labelsFn(),
+    datasets: [
+        {
+            label: 'Data One',
+            backgroundColor: '--dl-color-secondary',
+            borderRadius: 4,
+            data: dataFn()
+        },
+        {
+            label: 'Data Two',
+            backgroundColor: '--dl-color-warning',
+            borderRadius: 4,
+            data: dataFn()
         }
+    ]
+}
 
-        return {
-            widgets,
-            widgetLibrary,
-            isEditable,
-            addDialog,
-            handleEditMode,
-            addWidget,
-            handleRemove
-        }
+export default defineComponent({
+    components: {
+        DlGrid,
+        DlWidget,
+        DlBarChart,
+        DlGridRow
+    },
+    setup() {
+        return { data }
     }
 })
 </script>
 
 <template>
-    <div style="width: 900px">
-        <div
-            style="width: 200px; display: flex; justify-content: space-between"
-        >
-            <dl-button
-                :label="isEditable ? 'Done' : 'Edit'"
-                @click="handleEditMode"
-            />
-            <dl-button
-                label="Add"
-                @click="addDialog = true"
-            />
-        </div>
-        <dl-widget-grid
-            v-model="widgets"
-            :is-editable="isEditable"
-            @remove="handleRemove"
-        />
+    <div>
+        <dl-grid gap="20px">
+            <dl-grid-row>
+                <dl-widget>
+                    <template #header>
+                        <span>Widget 1</span>
+                        <span style="font-size: 12px; color: gray">Subtitle</span>
+                    </template>
+                    <template #menu>
+                        <div>
+                            Menu
+                            <div />
+                        </div>
+                    </template>
+                    <template #content>
+                        <dl-bar-chart
+                            :legend-props="legendProps"
+                            :data="data"
+                            :options="options"
+                            :items-in-view="8"
+                        />
+                    </template>
+                    <template #description>
+                        <span>Lorem ipsum dolor sit amet consectetur adipisicing
+                            elit. Libero eligendi dolore, similique possimus
+                            veritatis in vitae quia praesentium fuga quibusdam
+                            autem. Doloremque tenetur repudiandae a cupiditate
+                            modi dicta eveniet veritatis?</span>
+                    </template>
+                </dl-widget>
+            </dl-grid-row>
+
+            <dl-grid-row gap="20px">
+                <dl-widget>
+                    <template #header>
+                        <span>Widget 2</span>
+                    </template>
+                    <template #content>
+                        <dl-bar-chart
+                            :legend-props="legendProps"
+                            :data="data"
+                            :options="options"
+                            :items-in-view="6"
+                        />
+                    </template>
+                </dl-widget>
 
-        <dl-dialog-box v-model="addDialog">
-            <template #header>
-                <dl-dialog-box-header
-                    title="Add new widget"
-                    @on-close="addDialog = false"
-                />
-            </template>
-            <template #body>
-                <div
-                    class="flex"
-                    style="gap: 10px"
-                >
-                    <dl-chip
-                        v-for="(widget, index) in widgetLibrary"
-                        :key="index"
-                        style="cursor: pointer"
-                        @click="addWidget(widget)"
-                    >
-                        {{ widget.title }}
-                    </dl-chip>
-                </div>
-            </template>
-            <template #footer>
-                <dl-dialog-box-footer>
-                    <dl-button @click="addDialog = false">
-                        Close
-                    </dl-button>
-                </dl-dialog-box-footer>
-            </template>
-        </dl-dialog-box>
+                <dl-widget>
+                    <template #header>
+                        <span>Widget 3</span>
+                    </template>
+                    <template #content>
+                        <dl-bar-chart
+                            :legend-props="legendProps"
+                            :data="data"
+                            :options="options"
+                            :items-in-view="6"
+                        />
+                    </template>
+                </dl-widget>
+            </dl-grid-row>
+        </dl-grid>
     </div>
 </template>

package/src/demo/index.ts

@@ -40,7 +40,13 @@ import DlTrendDemo from './DlTrendDemo.vue'
 import DlWidgetDemo from './DlWidgetDemo.vue'
 import DlRadioDemo from './DlRadioDemo.vue'
 import DlTextHolderDemo from './DlTextHolderDemo.vue'
+import DlColumnChartDemo from './ColumnChartDemo.vue'
+import DlBarChartDemo from './BarChartDemo.vue'
 import DlSwitchDemo from './DlSwitchDemo.vue'
+import DlToastMessageDemo from './DlToastMessageDemo.vue'
+import DlChartDoughnutDemo from './DlChartDoughnutDemo.vue'
+import DlLineChartDemo from './DlLineChartDemo.vue'
+import DlSpinner from './DlSpinnerDemo.vue'
 
 export {
     AvatarDemo,
@@ -85,7 +91,13 @@ export {
     DlWidgetDemo,
     DlRadioDemo,
     DlTextHolderDemo,
-    DlSwitchDemo
+    DlToastMessageDemo,
+    DlColumnChartDemo,
+    DlSwitchDemo,
+    DlChartDoughnutDemo,
+    DlBarChartDemo,
+    DlLineChartDemo,
+    DlSpinner
 }
 
 export const demoState = {
@@ -94,11 +106,15 @@ export const demoState = {
     avatar: AvatarDemo,
     badge: DlBadgeDemo,
     button: DlButtonDemo,
+    column_chart: DlColumnChartDemo,
+    bar_chart: DlBarChartDemo,
+    line_chart: DlLineChartDemo,
     checkbox: DlCheckboxDemo,
     chip: DlChipDemo,
     color_picker: DlColorPickerDemo,
     counter: DlCounterDemo,
     dialog_box: DlDialogBoxDemo,
+    doughnut_chart: DlChartDoughnutDemo,
     dropdown_button: DropdownButtonDemo,
     icon: DlIconDemo,
     link: DlLinkDemo,
@@ -131,5 +147,7 @@ export const demoState = {
     widget: DlWidgetDemo,
     radio: DlRadioDemo,
     switch: DlSwitchDemo,
-    smart_search: DlSmartSearchDemo
+    smart_search: DlSmartSearchDemo,
+    toast_message: DlToastMessageDemo,
+    spinner: DlSpinner
 }

package/src/hooks/use-theme.ts

@@ -0,0 +1,19 @@
+import { getRootStyles } from '../utils/getRootStyles'
+import { inject, watch, reactive } from 'vue-demi'
+
+export const useThemeVariables = () => {
+    const isDark = inject('theme')
+
+    const variables = reactive(getRootStyles())
+
+    watch(
+        () => isDark,
+        () => {
+            Object.assign(variables, getRootStyles())
+        },
+        { deep: true }
+    )
+
+    if (variables) return { variables }
+    return
+}

package/src/utils/abbreviate-to-string.ts

@@ -0,0 +1,14 @@
+export function abbreviateToString(value: number): string {
+    const suffixes = ['', 'k', 'm', 'b', 't']
+    const suffixNum = Math.floor(('' + value).length / 3)
+    const shortValue = parseFloat(
+        (suffixNum !== 0
+            ? value / Math.pow(1000, suffixNum)
+            : value
+        ).toPrecision(2)
+    )
+    if (shortValue % 1 !== 0) {
+        shortValue.toFixed(1)
+    }
+    return shortValue + suffixes[suffixNum]
+}

package/src/utils/colors.ts

@@ -0,0 +1,47 @@
+export const hexToRgbA = (hex: string, opacity = 1) => {
+    try {
+        const r = parseInt(hex.slice(1, 3), 16)
+        const g = parseInt(hex.slice(3, 5), 16)
+        const b = parseInt(hex.slice(5, 7), 16)
+
+        if (opacity) {
+            return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity + ')'
+        } else {
+            return 'rgb(' + r + ', ' + g + ', ' + b + ')'
+        }
+    } catch {
+        return hex
+    }
+}
+
+export const revertRGBAOpacity = (oldRGBA: string) =>
+    oldRGBA.replace(/[^,]+(?=\))/, '1')
+
+export const rgba2hex = (rgba: string) => {
+    let a: string | number
+    const rgb = rgba
+        .replace(/\s/g, '')
+        .match(/^rgba?\((\d+),(\d+),(\d+),?([^,\s)]+)?/i)
+    const alpha = ((rgb && rgb[4]) || '').trim()
+    let hex
+
+    if (rgb) {
+        hex =
+            ((rgb[1] as any) | (1 << 8)).toString(16).slice(1) +
+            ((rgb[2] as any) | (1 << 8)).toString(16).slice(1) +
+            ((rgb[3] as any) | (1 << 8)).toString(16).slice(1)
+    } else {
+        return rgba
+    }
+
+    if (alpha !== '') {
+        a = alpha
+    } else {
+        a = 0o1
+    }
+    // multiply before convert to HEX
+    a = (((a as number) * 255) | (1 << 8)).toString(16).slice(1)
+    hex = hex + a
+
+    return `#${hex}`
+}

package/src/utils/getRootStyles.ts

@@ -40,7 +40,7 @@ function getElementCSSVariables(
         const value = elStyles.getPropertyValue(key)
         if (value) {
             //@ts-ignore
-            cssVars[key] = value
+            cssVars[key] = value.trim()
         }
     }
     return cssVars

package/src/utils/index.ts

@@ -10,6 +10,7 @@ export * from './theme'
 export * from './format'
 export * from './render'
 export * from './component-name-parser'
+export * from './colors'
 
 export const isMobileOrTablet = () => {
     let check = false

package/src/utils/position-engine.ts

@@ -126,7 +126,8 @@ interface PositionConfig {
     maxHeight?: string
     maxWidth?: string
     absoluteOffset?: any
-    fit?: boolean // fit the size to the content
+    fitContent?: boolean // fit the size to the content
+    fitContainer?: boolean // fit the size to the container
     cover?: boolean
 }
 
@@ -194,13 +195,21 @@ export function setPosition(cfg: PositionConfig) {
         visibility: 'visible'
     }
 
-    if (cfg.fit === true || cfg.cover === true) {
+    if (
+        cfg.fitContainer === true ||
+        cfg.cover === true ||
+        cfg.fitContent === true
+    ) {
         elStyle.minWidth = cfg.maxWidth || anchorProps.width + 'px'
         elStyle.maxWidth = cfg.maxWidth || anchorProps.width + 'px'
 
         if (cfg.cover === true) {
             elStyle.minHeight = anchorProps.height + 'px'
         }
+
+        if (cfg.fitContent === true) {
+            elStyle.maxWidth = cfg.el.offsetWidth + 'px'
+        }
     }
 
     Object.assign(cfg.el!.style, elStyle)

package/src/utils/swapNodes.ts

@@ -0,0 +1,30 @@
+export function swapNodes({ source, target }: NodeSwap) {
+    const p1 = source.parentNode
+    const p2 = target.parentNode
+    let i1
+    let i2
+
+    if (!p1 || !p2 || p1.isEqualNode(target) || p2.isEqualNode(source)) return
+
+    for (var i = 0; i < p1.children.length; i++) {
+        if (p1.children[i].isEqualNode(source)) {
+            i1 = i
+        }
+    }
+    for (var i = 0; i < p2.children.length; i++) {
+        if (p2.children[i].isEqualNode(target)) {
+            i2 = i
+        }
+    }
+
+    if (p1.isEqualNode(p2) && i1 < i2) {
+        i2++
+    }
+    p1.insertBefore(target, p1.children[i1])
+    p2.insertBefore(source, p2.children[i2])
+}
+
+export interface NodeSwap {
+    source: HTMLElement
+    target: HTMLElement
+}