@dataloop-ai/components 0.18.0 → 0.18.2

package/src/demos/DlAccordionDemo.vue

@@ -1,57 +1,106 @@
 <template>
     <div>
-        <dl-accordion
-            v-model="isAccordionOpen"
-            title="Controlled with 'Animal Farm' quote and overflowing title (text to trigger overflowing)"
-        >
-            Some of the animals remembered -- or thought they remembered -- that
-            the Sixth Commandment decreed, 'No animal shall kill any other
-            animal.' And though no one cared to mention it in the hearing of the
-            pigs or the dogs, it was felt that the killings which had taken
-            place did not square with this.
-        </dl-accordion>
-        <dl-accordion
-            additional-info="Some additional info"
-            title="Uncontrolled with Lorem Ipsum"
-            :right-side="true"
-            font-size="12px"
-            title-color="dl-color-medium"
-        >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-        </dl-accordion>
-        <dl-accordion>
-            <template #header>
-                Custom header content
-                <dl-switch
-                    v-model="switchModel"
-                    :value="2"
-                />
-            </template>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-        </dl-accordion>
+        <div style="width: 100%">
+            <dl-accordion
+                v-model="isAccordionOpen"
+                title="Controlled with 'Animal Farm' quote and overflowing title (text to trigger overflowing)"
+            >
+                Some of the animals remembered -- or thought they remembered --
+                that the Sixth Commandment decreed, 'No animal shall kill any
+                other animal.' And though no one cared to mention it in the
+                hearing of the pigs or the dogs, it was felt that the killings
+                which had taken place did not square with this.
+            </dl-accordion>
+        </div>
+        <div style="width: 100%">
+            <dl-accordion
+                additional-info="Some additional info"
+                title="Uncontrolled with Lorem Ipsum"
+                :right-side="true"
+                font-size="12px"
+                title-color="dl-color-medium"
+            >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+                sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </dl-accordion>
+        </div>
+        <div style="width: 100%">
+            <dl-accordion>
+                <template #header>
+                    Custom header content
+                    <dl-switch
+                        v-model="switchModel"
+                        :value="2"
+                    />
+                </template>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation ullamco laboris
+                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
+                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+                sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </dl-accordion>
+        </div>
+        <div style="width: 100%">
+            <dl-accordion
+                v-model="isAccordionOpen"
+                title="Empty State Component"
+                is-empty
+                :empty-state-props="{
+                    responsive: true,
+                    style: 'max-width: 300px;',
+                    align: 'left',
+                    bgSize: '200px',
+                    bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
+                    title: 'Lorem ipsum',
+                    subtitle:
+                        'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                    info: 'To learn more about this analytics, read our documentation.'
+                }"
+            >
+                <template #links="">
+                    <div style="display: flex; gap: 15px; flex-wrap: wrap">
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-sdk-documentation"
+                            flat
+                            uppercase
+                            label="SDK"
+                        />
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-file"
+                            flat
+                            label="Documentation"
+                        />
+                        <dl-button
+                            padding="0px"
+                            icon="icon-dl-youtube"
+                            flat
+                            label="Video"
+                        />
+                    </div>
+                </template>
+            </dl-accordion>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-import { DlAccordion, DlSwitch } from '../components'
+import { DlAccordion, DlSwitch, DlButton } from '../components'
 import { defineComponent } from 'vue-demi'
 
 export default defineComponent({
     components: {
         DlAccordion,
-        DlSwitch
+        DlSwitch,
+        DlButton
     },
     data() {
         return {

package/src/demos/DlAlertDemo.vue

@@ -59,6 +59,20 @@
         >
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
         </DlAlert>
+        <dl-alert
+            style="margin-top: 20px"
+            fluid
+            type="warning"
+        >
+            this is an annoying message with link, this is an annoying message
+            with linkthis is an annoying message with linkthis is an annoying
+            message with linkthis is an annoying message with linkthis is an
+            annoying message with linkthis is an annoying message with linkthis
+            is an annoying message with link
+            <span>
+                Please
+                <dl-link color="dl-color-link">Contact us</dl-link>.</span>
+        </dl-alert>
     </div>
 </template>
 

package/src/demos/DlButtonDemo.vue

@@ -194,6 +194,33 @@
                 Disabled
             </DlButton>
         </div>
+        <div
+            style="
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+            "
+        >
+            <h3>Button keeping its active state with menu</h3>
+            <dl-button
+                :active="activeButtonState"
+                @click="activeButtonState = !activeButtonState"
+            >
+                {{ activeButtonState ? 'Close' : 'Open' }}
+                <dl-menu
+                    :offset="[0, 5]"
+                    anchor="bottom middle"
+                    self="top middle"
+                    :model-value="!activeButtonState"
+                >
+                    <div
+                        style="width: 100px; height: 100px; text-align: center"
+                    >
+                        Menu
+                    </div>
+                </dl-menu>
+            </dl-button>
+        </div>
         <div>
             <h3>With badge</h3>
 
@@ -257,14 +284,23 @@
                 </div>
             </dl-button>
         </div>
+        <div>
+            <h3>Shaded and outlined</h3>
+            <dl-button
+                :active="activeButtonState"
+                icon="icon-dl-search"
+                label="test me"
+                shaded
+                outlined
+            />
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive } from 'vue-demi'
-import { DlButton, DlBadge, DlIcon } from '../components'
+import { defineComponent, reactive, ref } from 'vue-demi'
+import { DlButton, DlBadge, DlIcon, DlMenu } from '../components'
 import { ButtonSizes } from '../components/basic/DlButton/utils'
-import DlMenu from '../components/essential/DlMenu/DlMenu.vue'
 import DlList from '../components/essential/DlList/DlList.vue'
 import DlListItem from '../components/basic/DlListItem/DlListItem.vue'
 
@@ -280,9 +316,10 @@ export default defineComponent({
     },
     setup() {
         const buttons = reactive<ButtonSizes[]>(['s', 'm', 'l', 'xl'])
+        const activeButtonState = ref(false)
 
         const log = (e: Event) => console.log(e)
-        return { buttons, log }
+        return { buttons, log, activeButtonState }
     }
 })
 </script>

package/src/demos/DlCardDemo.vue

@@ -4,43 +4,180 @@
             :image="image"
             :text="text"
             :title="title"
-            :keyboard-shortcut="keyboardShortcut"
-            :links="links"
+            :links="interactiveProps.links"
         />
+        <div>Card (icon)</div>
+        <div style="display: flex; flex-direction: row; gap: 10px">
+            <DlCard
+                :icon="icon"
+                :text="text"
+                :title="title"
+                @onUpdateDescription="updateDescription"
+                @onCardActive="onCardActive"
+            />
+        </div>
+        <div>Card (interactive)</div>
+        <div style="display: flex; flex-direction: row; gap: 10px">
+            <DlCard
+                v-bind="interactiveProps"
+                interactive
+                zoom
+                @onUpdateDescription="updateDescription"
+                @onCardActive="onCardActive"
+            />
+        </div>
+        <div>Card empty state</div>
+        <DlCard
+            is-empty
+            :empty-state-props="{
+                responsive: false,
+                style: 'min-height: 350px;',
+                bgSize: '130px',
+                bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
+                title: 'Lorem ipsum',
+                subtitle:
+                    'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                info: 'To learn more about this analytics, read our documentation.'
+            }"
+        >
+            <template #links="">
+                <div
+                    style="
+                        display: flex;
+                        gap: 5px;
+                        flex-wrap: wrap;
+                        padding: 0 20px;
+                    "
+                >
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-sdk-documentation"
+                        flat
+                        uppercase
+                        label="SDK"
+                    />
+                    <div class="break" />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-file"
+                        flat
+                        label="Documentation"
+                    />
+                    <div class="break" />
+                    <dl-button
+                        padding="0px"
+                        icon="icon-dl-youtube"
+                        flat
+                        label="Video"
+                    />
+                </div>
+            </template>
+        </DlCard>
     </div>
 </template>
 
 <script>
 import { defineComponent } from 'vue-demi'
-import { DlCard } from '../components'
+import { DlCard, DlButton } from '../components'
 
 export default defineComponent({
     name: 'DlCardDemo',
     components: {
-        DlCard
+        DlCard,
+        DlButton
     },
     data() {
         return {
-            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas volutpat quam blandit integer mattis. consectetur adipiscing elit. Egestas volutpat quam blandit integer mattis. ',
             image: {
                 src: 'https://i0.wp.com/www.printmag.com/wp-content/uploads/2021/02/4cbe8d_f1ed2800a49649848102c68fc5a66e53mv2.gif?fit=476%2C280&ssl=1'
             },
+
             title: 'Lorem ipsum',
-            keyboardShortcut: 'Shift + E',
-            links: [
-                {
-                    icon: 'icon-dl-list-view',
-                    href: 'https://www.google.md/?hl=ru',
-                    title: 'Lorem',
-                    newtab: true,
-                    external: true
+            text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Egestas volutpat quam blandit integer mattis. consectetur adipiscing elit. Egestas volutpat quam blandit integer mattis. ',
+
+            icon: {
+                icon: 'icon-dl-alert-filled',
+                color: 'red'
+            },
+            interactiveProps: {
+                text: 'Some text',
+                image: {
+                    src: 'https://www.shutterstock.com/image-photo/ripe-orange-isolated-on-white-260nw-606022676.jpg',
+                    styles: 'width: 200px; height: 112px',
+                    link: {
+                        icon: 'icon-dl-link',
+                        color: 'black',
+                        size: '12px',
+                        href: 'https://dataloop.ai/'
+                    }
                 },
-                {
-                    href: '#test',
-                    title: 'Developers',
-                    icon: 'icon-dl-code'
-                }
-            ]
+                title: 'Lorem ipsum',
+                links: [
+                    {
+                        icon: 'icon-dl-list-view',
+                        href: 'https://www.google.md/?hl=ru',
+                        title: 'Lorem',
+                        newtab: true,
+                        external: true
+                    },
+                    {
+                        href: '#test',
+                        title: 'Developers',
+                        icon: 'icon-dl-code'
+                    }
+                ],
+                interactive: false,
+                zoom: false,
+                cardId: 2,
+                width: '180px',
+                tags: [
+                    {
+                        label: 'A',
+                        color: '#FFBBFF',
+                        textColor: 'black'
+                    },
+                    {
+                        label: 'Lemon',
+                        color: '#7000FF',
+                        textColor: 'black'
+                    },
+                    {
+                        label: 'B',
+                        color: '#FFDA3A',
+                        textColor: 'black'
+                    },
+                    {
+                        label: 'D',
+                        color: '#00A0FF',
+                        textColor: 'black'
+                    },
+                    {
+                        label: 'X',
+                        color: '#AADC3A',
+                        textColor: 'black'
+                    }
+                ],
+                hints: [
+                    {
+                        icon: 'icon-dl-related-filled',
+                        color: ''
+                    },
+                    {
+                        icon: 'icon-dl-alert-filled',
+                        color: 'red'
+                    }
+                ],
+                description: 'descriptiononono',
+                indicatorColor: 'dl-color-negative'
+            }
+        }
+    },
+    methods: {
+        updateDescription(card) {
+            console.log('update description: ', card)
+        },
+        onCardActive(card) {
+            console.log('Card Active: ', card)
         }
     }
 })

package/src/demos/DlChartDoughnutDemo.vue

@@ -60,6 +60,52 @@
                     :animation="doughnutAnimation"
                 />
             </div>
+
+            <div>
+                <DlDoughnutChart
+                    :data="doughnutData"
+                    :is-small="true"
+                    :has-summary="true"
+                    :animation="doughnutAnimation"
+                    is-empty
+                    :empty-state-props="{
+                        responsive: true,
+                        style: 'min-height: 350px;',
+                        bgSize: '130px',
+                        bgImage: `url(https://raw.githubusercontent.com/dataloop-ai/icons/main/assets/usage.svg)`,
+                        title: 'Lorem ipsum',
+                        subtitle:
+                            'Lorem ipsum dolor sit amet consectetur. Senectus condimentum dolor sit',
+                        info: 'To learn more about this analytics, read our documentation.'
+                    }"
+                >
+                    <template #links="">
+                        <div style="display: flex; gap: 5px; padding: 0 20px">
+                            <dl-button
+                                padding="0px"
+                                icon="icon-dl-sdk-documentation"
+                                flat
+                                uppercase
+                                label="SDK"
+                            />
+                            <div class="break" />
+                            <dl-button
+                                padding="0px"
+                                icon="icon-dl-file"
+                                flat
+                                label="Documentation"
+                            />
+                            <div class="break" />
+                            <dl-button
+                                padding="0px"
+                                icon="icon-dl-youtube"
+                                flat
+                                label="Video"
+                            />
+                        </div>
+                    </template>
+                </DlDoughnutChart>
+            </div>
         </div>
     </div>
 </template>
@@ -67,13 +113,14 @@
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
 import { DoughnutControllerChartOptions } from 'chart.js'
-import { DlDoughnutChart } from '../components'
+import { DlDoughnutChart, DlButton } from '../components'
 import { TDoughnutChartData } from '../components/compound/DlCharts/charts/DlDoughnutChart/types'
 
 export default defineComponent({
     name: 'DlChartDoughnutDemo',
     components: {
-        DlDoughnutChart
+        DlDoughnutChart,
+        DlButton
     },
     setup() {
         const doughnutAnimation = ref<

package/src/demos/DlCheckboxDemo.vue

@@ -1,5 +1,18 @@
 <template>
-    <div>
+    <div style="--dl-checkbox-sub-label-left-padding: 20px">
+        <div style="max-width: 150px">
+            in a tight container with long text
+            <dl-checkbox
+                v-model="customValueCheck"
+                toggle-indeterminate
+                indeterminate-value="maybe"
+                false-value="no"
+                true-value="yes"
+                label="dasflsd;ljasl;djfasjkl;dfjklasdfjl;kasj;klasjl;kl;aksdfkl;asjdfkl;asjdfl;kasjdflk;asdf;kljsdkl;fjasl;dkfjaskl;dfjasl;kdfal;skdfkl;asdfl;kasdfkl;asjdfkl;asjdfkl;asjdf;"
+                sub-label="this is a lot of text this is a lot of text this is a lot of text this is a lot of text this is a lot of text this is a lot of text "
+                @update:model-value="logValue"
+            />
+        </div>
         <dl-checkbox
             v-model="customValueCheck"
             toggle-indeterminate
@@ -22,27 +35,39 @@
             label="Boolean v-model"
             @update:model-value="logValue"
         />
+        <dl-checkbox
+            v-model="disabledValue"
+            disabled
+            @update:model-value="logValue"
+        >
+            Disabled with tooltip
+            <dl-tooltip>I am a tooltip</dl-tooltip>
+        </dl-checkbox>
     </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue-demi'
-import { DlCheckbox } from '../components'
+import { DlCheckbox, DlTooltip } from '../components'
+
 export default defineComponent({
     name: 'DlCheckboxDemo',
     components: {
-        DlCheckbox
+        DlCheckbox,
+        DlTooltip
     },
     setup() {
         const logValue = (newValue: any) => console.log('New value:', newValue)
         const switchValue = ref<number[]>([1, 3])
         const booleanValue = ref(true)
         const customValueCheck = ref('maybe')
+        const disabledValue = ref(false)
 
         return {
             switchValue,
             booleanValue,
             customValueCheck,
+            disabledValue,
             logValue
         }
     }