@dataloop-ai/components 0.13.19 → 0.14.4

package/src/demo/ColumnChartDemo.vue

@@ -0,0 +1,230 @@
+<template>
+    <div
+        style="
+            display: flex;
+            width: 800px;
+            flex-wrap: wrap;
+            flex-direction: row;
+            gap: 0;
+        "
+    >
+        <dl-column-chart
+            :brush-props="brushProps"
+            :legend-props="legendProps"
+            :data="data[0]"
+            :options="options[0]"
+            style="width: 50%"
+        />
+        <dl-column-chart
+            :brush-props="brushProps"
+            :legend-props="legendProps"
+            :data="data[1]"
+            :options="options[1]"
+            style="width: 50%"
+        >
+            <template #axe-x-labels="{ labels, chartWidth }">
+                <div
+                    :style="`display: flex; width: ${chartWidth}; align-self: flex-end; justify-content: space-between;`"
+                >
+                    <div
+                        v-for="(url, key) in labels"
+                        :key="key"
+                        style="
+                            display: flex;
+                            width: 100%;
+                            justify-content: center;
+                        "
+                    >
+                        <dl-avatar size="24px">
+                            <img :src="url">
+                        </dl-avatar>
+                        <div />
+                    </div>
+                </div>
+            </template>
+        </dl-column-chart>
+
+        <dl-column-chart
+            :brush-props="brushProps"
+            :legend-props="legendProps"
+            :data="data[0]"
+            :options="options[0]"
+            style="width: 100%"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import DlColumnChart from '../components/DlChart/DlColumnChart.vue'
+import DlAvatar from '../components/DlAvatar.vue'
+
+import { orderBy } from 'lodash'
+
+import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    BarElement,
+    CategoryScale,
+    LinearScale
+} from 'chart.js'
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)
+
+const data = [
+    {
+        labels: [
+            'JanuaryJanuaryJanuaryJanuary',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June'
+        ],
+        datasets: [
+            {
+                label: 'Data One 1',
+                backgroundColor: '--dl-color-secondary',
+                borderRadius: 4,
+                data: [35, 30, 25, 20, 15, 5]
+            },
+            {
+                label: 'Data Two 2',
+                backgroundColor: '--dl-color-warning',
+                borderRadius: 4,
+                data: [15, 20, 15, 30, 25, 10]
+            },
+            {
+                label: 'Data One 3',
+                backgroundColor: '--dl-color-negative',
+                borderRadius: 4,
+                data: [35, 30, 25, 20, 15, 5]
+            },
+            {
+                label: 'Data Two 4',
+                backgroundColor: '--dl-color-positive',
+                borderRadius: 4,
+                data: [15, 20, 15, 30, 25, 10]
+            },
+            {
+                label: 'Data One 5',
+                backgroundColor: '--dl-color-secondary',
+                borderRadius: 4,
+                data: [35, 30, 25, 20, 15, 5]
+            },
+            {
+                label: 'Data Two 6',
+                backgroundColor: '--dl-color-warning',
+                borderRadius: 4,
+                data: [15, 20, 15, 30, 25, 10]
+            },
+            {
+                label: 'Data One 7',
+                backgroundColor: '--dl-color-secondary',
+                borderRadius: 4,
+                data: [35, 30, 25, 20, 15, 5]
+            },
+            {
+                label: 'Data Two 8',
+                backgroundColor: '--dl-color-warning',
+                borderRadius: 4,
+                data: [15, 20, 15, 30, 25, 10]
+            }
+        ]
+    },
+
+    {
+        labels: [
+            'https://picsum.photos/200/200',
+            'https://picsum.photos/200/200',
+            'https://picsum.photos/200/200',
+            'https://picsum.photos/200/200',
+            'https://picsum.photos/200/200',
+            'https://picsum.photos/200/200'
+        ],
+        datasets: [
+            {
+                label: 'Data One',
+                backgroundColor: '--dl-color-secondary',
+                borderRadius: 4,
+                data: [35, 30, 25, 20, 15, 5]
+            },
+            {
+                label: 'Data Two',
+                backgroundColor: '--dl-color-warning',
+                borderRadius: 4,
+                data: [15, 20, 15, 30, 25, 10]
+            }
+        ]
+    }
+]
+
+const brushProps = {
+    min: 0,
+    max: orderBy(data[0].datasets, (o) => o.data.length)[0].data.length - 1
+}
+
+const options = [
+    {
+        scales: {
+            y: {
+                ticks: {
+                    callback(value: string, index: number, ticks: string[]) {
+                        return value + 's'
+                    }
+                },
+                suggestedMax: 45
+            },
+            x: {
+                min: 0,
+                max:
+                    orderBy(data[0].datasets, (o) => o.data.length)[0].data
+                        .length - 1
+            }
+        }
+    },
+
+    {
+        scales: {
+            y: {
+                ticks: {
+                    callback(value: string, index: number, ticks: string[]) {
+                        return value + 's'
+                    }
+                },
+                suggestedMax: 45
+            },
+            x: {
+                min: 0,
+                max:
+                    orderBy(data[1].datasets, (o) => o.data.length)[0].data
+                        .length - 1
+            }
+        }
+    }
+]
+
+const legendProps = {
+    alignItems: 'center'
+}
+
+export default defineComponent({
+    name: 'DlColumnChartDemo',
+    components: {
+        DlColumnChart,
+        DlAvatar
+    },
+    data() {
+        return {
+            options,
+            data,
+            brushProps,
+            legendProps
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/demo/DlButtonDemo.vue

@@ -10,7 +10,7 @@
                     <DlButton
                         :size="buttonSize"
                         color="dl-color-negative"
-                        label="COntained text"
+                        label="COntained text filled"
                         @click="log"
                     />
                     <DlButton

package/src/demo/DlChartDoughnutDemo.vue

@@ -0,0 +1,229 @@
+<template>
+    <div style="display: flex; flex-wrap: wrap; flex-direction: row; gap: 0">
+        <div>
+            <div>
+                <DlDoughnutChart
+                    :data="doughnutLessData"
+                    :animation="doughnutAnimation"
+                />
+            </div>
+            <div>
+                <DlDoughnutChart :data="doughnutData" />
+            </div>
+            <div>
+                <DlDoughnutChart
+                    :data="doughnutData"
+                    :has-summary="true"
+                />
+            </div>
+            <div class="grid grid-cols-3">
+                <div>
+                    <DlDoughnutChart
+                        :data="doughnutData"
+                        :is-small="true"
+                        :has-summary="true"
+                    />
+                </div>
+                <div>
+                    <DlDoughnutChart
+                        :data="doughnutLessData"
+                        :is-small="true"
+                    />
+                </div>
+                <div>
+                    <DlDoughnutChart
+                        :data="doughnutData"
+                        :is-small="true"
+                        :has-summary="true"
+                    />
+                </div>
+            </div>
+            <div class="grid grid-cols-2">
+                <div>
+                    <DlDoughnutChart
+                        :data="doughnutData"
+                        :is-small="true"
+                    />
+                </div>
+                <div>
+                    <DlDoughnutChart
+                        :data="doughnutLessData"
+                        :is-small="true"
+                    />
+                </div>
+            </div>
+            <div>
+                <DlDoughnutChart
+                    :data="doughnutData"
+                    :is-small="true"
+                    :has-summary="true"
+                    :animation="doughnutAnimation"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import DlDoughnutChart from '../components/DlChart/Doughnut/DlDoughnutChart.vue'
+import { DoughnutControllerChartOptions } from 'chart.js'
+import { TDoughnutChartData } from '../components/DlChart/Doughnut/types/TDoughnutChartData'
+
+export default defineComponent({
+    name: 'DlChartDoughnutDemo',
+    components: {
+        DlDoughnutChart
+    },
+    setup() {
+        const doughnutAnimation = ref<
+            DoughnutControllerChartOptions['animation']
+        >({
+            animateRotate: true,
+            animateScale: true
+        })
+
+        const doughnutData: TDoughnutChartData = {
+            labels: [
+                'Label 1 very very very very very very very long title',
+                'Label 2',
+                'Label 3',
+                'Label 4',
+                'Label 5',
+                'Label 6',
+                'Label 7',
+                'Label 8',
+                'Label 9',
+                'Label 10',
+                'Label 11',
+                'Label 12',
+                'Label 13',
+                'Label 14',
+                'Label 15',
+                'Label 16',
+                'Label 17',
+                'Label 18',
+                'Label 19',
+                'Label 20'
+            ],
+            datasets: [
+                {
+                    label: 'My Doughnut',
+                    data: [
+                        9999, 200, 300, 400, 500, 600, 700, 800, 900, 1000,
+                        1100, 1200, 1000, 1400, 1500, 1600, 1700, 1800, 1900,
+                        2000
+                    ],
+                    backgroundColor: [
+                        '#3452FF',
+                        '#4DB1D3',
+                        '#FF2F7A',
+                        '#D4E3FF',
+                        '#BECB5D',
+                        '#839E30',
+                        '#6B5935',
+                        '#752B86',
+                        '#BB96A3',
+                        '#870F49',
+                        '#CC566C',
+                        '#F0A18C',
+                        '#EDAB55',
+                        '#FF5934',
+                        '#9CD2E3',
+                        '#1481A4',
+                        '#928F80',
+                        '#575567',
+                        '#979797',
+                        '#D9D9D9'
+                    ],
+                    hoverBackgroundColor: [
+                        '#3452FF',
+                        '#4DB1D3',
+                        '#FF2F7A',
+                        '#D4E3FF',
+                        '#BECB5D',
+                        '#839E30',
+                        '#6B5935',
+                        '#752B86',
+                        '#BB96A3',
+                        '#870F49',
+                        '#CC566C',
+                        '#F0A18C',
+                        '#EDAB55',
+                        '#FF5934',
+                        '#9CD2E3',
+                        '#1481A4',
+                        '#928F80',
+                        '#575567',
+                        '#979797',
+                        '#D9D9D9'
+                    ],
+                    lightColor: [
+                        '#D6DCFF',
+                        '#EDF7FB',
+                        '#FFCBDD',
+                        '#F4F8FF',
+                        '#EFF2D7',
+                        '#E0E7CB',
+                        '#DAD5CD',
+                        '#DDCAE1',
+                        '#DDCBD1',
+                        '#DDCBD1',
+                        '#F2D5DA',
+                        '#FBE7E2',
+                        '#FBEAD5',
+                        '#FFD5CC',
+                        '#E7F4F8',
+                        '#C4DFE8',
+                        '#E4E3DF',
+                        '#D5D5D9',
+                        '#E5E5E5',
+                        '#F5F5F5'
+                    ],
+                    borderWidth: 0
+                }
+            ]
+        }
+        const doughnutLessData: TDoughnutChartData = {
+            labels: [
+                'Label 1 very very very very very very very long title',
+                'Label 2',
+                'Label 3',
+                'Label 4'
+            ],
+            datasets: [
+                {
+                    label: 'My Doughnut',
+                    data: [999, 2000, 300, 400],
+                    backgroundColor: [
+                        '--dl-color-secondary',
+                        '#4DB1D3',
+                        '#FF2F7A',
+                        '#D4E3FF'
+                    ],
+                    hoverBackgroundColor: [
+                        '--dl-color-secondary',
+                        '#4DB1D3',
+                        '#FF2F7A',
+                        '#D4E3FF'
+                    ],
+                    lightColor: [
+                        '--dl-color-link',
+                        '#EDF7FB',
+                        '#FFCBDD',
+                        '#F4F8FF'
+                    ],
+                    borderWidth: 0
+                }
+            ]
+        }
+        return {
+            doughnutData,
+            doughnutLessData,
+            doughnutAnimation
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/demo/DlChipDemo.vue

@@ -32,30 +32,30 @@
             <DlChip
                 removable
                 label="Chip filled"
-                @remove="log"
+                @remove="log('removable')"
             />
             <DlChip
                 removable
                 outlined
                 label="Chip outlined"
-                @remove="log"
+                @remove="log('outlined')"
             />
             <DlChip
                 removable
                 disabled
                 label="Chip disabled"
-                @remove="log"
+                @remove="log('disabled')"
             />
             <DlChip
                 removable
                 label="Ellipsed Chip with a multiple words"
-                @remove="log"
+                @remove="log('ellipsed')"
             />
             <DlChip
                 removable
                 label="custom max width (200px)"
                 max-width="200px"
-                @remove="log"
+                @remove="log('test')"
             />
         </div>
         <h4>Removable Chips with icon</h4>
@@ -67,39 +67,39 @@
                 removable
                 icon="icon-dl-search"
                 label="Chip filled"
-                @remove="log"
+                @remove="log('test')"
             />
             <DlChip
                 removable
                 icon="icon-dl-search"
-                @remove="log"
+                @remove="log('test')"
             />
             <DlChip
                 removable
                 icon="icon-dl-search"
                 outlined
                 label="Chip outlined"
-                @remove="log"
+                @remove="log('test')"
             />
             <DlChip
                 removable
                 icon="icon-dl-search"
                 disabled
                 label="Chip disabled"
-                @remove="log"
+                @remove="log('test')"
             />
             <DlChip
                 removable
                 label="Ellipsed Chip with a multiple words"
                 icon="icon-dl-search"
-                @remove="log"
+                @remove="log('test')"
             />
             <DlChip
                 removable
                 label="custom max width (200px)"
                 icon="icon-dl-search"
                 max-width="200px"
-                @remove="log"
+                @remove="log('test')"
             />
         </div>
         <h4>Removable Chips without icon and label</h4>
@@ -109,17 +109,34 @@
         >
             <DlChip
                 removable
-                @remove="log"
+                @remove="log('test')"
             />
             <DlChip
                 removable
                 outlined
-                @remove="log"
+                @remove="log('test')"
             />
             <DlChip
                 removable
                 disabled
-                @remove="log"
+                @remove="log('test')"
+            />
+        </div>
+        <h4>Chips with label slot</h4>
+        <div
+            class="col"
+            style="margin-bottom: 30px"
+        >
+            <DlChip
+                ref="removableChip"
+                removable
+                label="Ellipsed Chip with a multiple words"
+            />
+        </div>
+        <div class="col">
+            <DlButton
+                label="remove chip"
+                @click="removeChip"
             />
         </div>
         <h4>Chips with icon and without label</h4>
@@ -152,16 +169,23 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
-import { DlChip } from '../components'
+import { defineComponent, ref } from 'vue-demi'
+import { DlChip, DlButton } from '../components'
 export default defineComponent({
     name: 'DlChipDemo',
     components: {
-        DlChip
+        DlChip,
+        DlButton
     },
     setup() {
         const log = (e: Event) => console.log(e)
-        return { log }
+        const removableValue = ref(true)
+        return { log, removableValue }
+    },
+    methods: {
+        removeChip() {
+            (this.$refs.removableChip as any).remove()
+        }
     }
 })
 </script>

package/src/demo/DlDialogBoxDemo.vue

@@ -134,7 +134,7 @@ export default defineComponent({
                 return
             }
 
-            modalOne.value.openModal()
+            modalOne.value?.openModal()
         }
 
         const closeModal = () => {
@@ -142,7 +142,7 @@ export default defineComponent({
                 return
             }
 
-            modalOne.value.closeModal()
+            modalOne.value?.closeModal()
         }
 
         const openSecondModal = () => {
@@ -150,7 +150,7 @@ export default defineComponent({
                 return
             }
 
-            modalTwo.value.openModal()
+            modalTwo.value?.openModal()
         }
 
         const closeSecondModal = () => {
@@ -158,7 +158,7 @@ export default defineComponent({
                 return
             }
 
-            modalTwo.value.closeModal()
+            modalTwo.value?.closeModal()
         }
 
         return {

package/src/demo/DlDropdownButtonDemo.vue

@@ -204,7 +204,7 @@
                         @click="() => onClose('Videos and long text')"
                     >
                         <dl-item-section>
-                            Videos and long text
+                            Videos and long text Videos and long text
                         </dl-item-section>
                     </dl-list-item>