@dataloop-ai/components 0.13.19 → 0.14.3

package/src/demo/DlTableDemo.vue

@@ -2,6 +2,9 @@
     <div style="width: 900px; align-items: inherit">
         <div>
             <div class="settings">
+                <button @click="addRowPerPage">
+                    Add Row Per Page
+                </button>
                 <dl-switch
                     left-label="bordered"
                     value="bordered"
@@ -104,105 +107,20 @@
                 :rows="rows"
                 :resizable="resizable"
                 row-key="name"
-                :pagination="{
-                    rowsPerPage: 25,
-                    maxPages: 4
-                }"
                 color="dl-color-secondary"
                 title="Table Title"
                 :virtual-scroll="vScroll"
                 style="height: 500px"
+                :rows-per-page-options="rowsPerPageOptions"
                 @row-click="log"
                 @update:selected="updateSeleted"
-            >
-                <!-- <template #top> Top Table </template> -->
-                <!-- <template #top-left> Top Table Left </template> -->
-                <!-- <template #top-right> Top Table Right </template>
-
-            <template #top-selection> Top Selection </template> -->
-
-                <!-- <template #header="props">
-                <dl-tr :props="props">
-                    <dl-th auto-width />
-                    <dl-th
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                    >
-                        {{ col.label }}
-                    </dl-th>
-                </dl-tr>
-            </template> -->
-
-                <!-- <template #header-cell="props">
-                <dl-th :props="props">
-                    {{ props.col.label }}
-                </dl-th>
-            </template>
-
-            <template #header-cell-calories="props">
-                <dl-th :props="props">
-                    custom
-                    {{ props.col.label }}
-                </dl-th>
-            </template> -->
-
-                <!-- <template #body="props">
-                <dl-tr :props="props">
-                    <dl-td auto-width>
-                        <dl-button
-                            flat
-                            size="s"
-                            text-color="dl-color-darker"
-                            style="padding: 0; border-width: 0!important; :active: border-width: 0"
-                            :icon="
-                                props.expand
-                                    ? 'icon-dl-down-chevron'
-                                    : 'icon-dl-right-chevron'
-                            "
-                            @click="props.expand = !props.expand"
-                        />
-                    </dl-td>
-                    <dl-td
-                        v-for="col in props.cols"
-                        :key="col.name"
-                        :props="props"
-                    >
-                        {{ col.value }}
-                    </dl-td>
-                </dl-tr>
-                <dl-tr v-show="props.expand" :props="props">
-                    <dl-td colspan="100%" style="padding: 16px">
-                        <div class="text-left">
-                            This is expand slot for row above:
-                            {{ props.row.name }}.
-                        </div>
-                    </dl-td>
-                </dl-tr>
-            </template> -->
-
-                <!-- <template #loading> Loading ... </template> -->
-
-                <!-- <template #bottom="props">
-                <dl-pagination v-bind="props.pagination" />
-            </template> -->
-            </DlTable>
+            />
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import {
-    DlTable,
-    DlOptionGroup,
-    DlSwitch,
-    DlTextInput
-    // DlTr,
-    // DlTh,
-    // DlTd,
-    // DlPagination,
-    // DlButton
-} from '../components'
+import { DlTable, DlOptionGroup, DlSwitch, DlTextInput } from '../components'
 import { defineComponent } from 'vue-demi'
 import { times } from 'lodash'
 
@@ -363,11 +281,6 @@ export default defineComponent({
         DlSwitch,
         DlOptionGroup,
         DlTextInput
-        // DlTr,
-        // DlTh,
-        // DlPagination,
-        // DlTd,
-        // DlButton
     },
     data() {
         return {
@@ -386,10 +299,16 @@ export default defineComponent({
             resizableState: [] as boolean[],
             rows,
             draggable: 'both',
-            columns
+            columns,
+            rowsPerPageOptions: [10, 12, 14, 16]
         }
     },
     methods: {
+        addRowPerPage() {
+            this.rowsPerPageOptions.push(
+                this.rowsPerPageOptions[this.rowsPerPageOptions.length - 1] + 2
+            )
+        },
         updateSeleted(payload: any) {
             this.selected = payload
         },

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]
+}