@dataloop-ai/components 0.16.45 → 0.16.47

package/src/demos/DlDropdownButtonDemo.vue

@@ -0,0 +1,386 @@
+<template>
+    <div>
+        <div style="display: flex; gap: 20px; flex-direction: column">
+            <h2>Splitted</h2>
+            <dl-dropdown-button
+                auto-close
+                outlined
+                split
+                label="Dropdown Button Outlined"
+            >
+                <dl-list>
+                    <dl-list-item clickable>
+                        <dl-item-section> Photos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Videos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Articles </dl-item-section>
+                    </dl-list-item>
+                </dl-list>
+            </dl-dropdown-button>
+
+            <dl-dropdown-button
+                disabled
+                auto-close
+                outlined
+                split
+                label="Dropdown Button Outlined"
+            >
+                <dl-list>
+                    <dl-list-item clickable>
+                        <dl-item-section> Photos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Videos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Articles </dl-item-section>
+                    </dl-list-item>
+                </dl-list>
+            </dl-dropdown-button>
+
+            <dl-dropdown-button
+                split
+                label="Dropdown Button Contained"
+            >
+                <dl-list>
+                    <dl-list-item clickable>
+                        <dl-item-section> Photos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Videos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item clickable>
+                        <dl-item-section> Articles </dl-item-section>
+                    </dl-list-item>
+                </dl-list>
+            </dl-dropdown-button>
+
+            <dl-dropdown-button
+                v-model="showing"
+                auto-close
+                split
+                :label="name"
+                main-btn-style="width: 120px"
+                @click="onClick"
+            >
+                <dl-list>
+                    <dl-list-item
+                        clickable
+                        @click="() => onClose('Photos')"
+                    >
+                        <dl-item-section> Photos </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item
+                        clickable
+                        @click="() => onClose('Videos and long text')"
+                    >
+                        <dl-item-section :no-wrap="true">
+                            Videos and long text ideos and long text ideos and
+                            long text ideos and long text ideos and long text
+                        </dl-item-section>
+                    </dl-list-item>
+
+                    <dl-list-item
+                        clickable
+                        @click="() => onClose('Articles')"
+                    >
+                        <dl-item-section> Articles </dl-item-section>
+                    </dl-list-item>
+                </dl-list>
+            </dl-dropdown-button>
+        </div>
+
+        <div style="display: flex; gap: 20px; flex-direction: column">
+            <h2>One Button</h2>
+            <div
+                class="grid grid-cols-3"
+                style="column-gap: 10px"
+            >
+                <dl-dropdown-button
+                    auto-close
+                    outlined
+                    label="Dropdown Button Outlined"
+                >
+                    <dl-list>
+                        <dl-list-item clickable>
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Videos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+
+                <dl-dropdown-button
+                    disabled
+                    auto-close
+                    outlined
+                    label="Dropdown Button Outlined"
+                >
+                    <dl-list>
+                        <dl-list-item clickable>
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Videos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+
+                <dl-dropdown-button
+                    auto-close
+                    label="Dropdown Button Contained"
+                    max-height="210px"
+                >
+                    <dl-list>
+                        <dl-list-item clickable>
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Videos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                        <dl-list-item clickable>
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Videos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                        <dl-list-item clickable>
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Videos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item clickable>
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+            </div>
+
+            <div
+                class="grid grid-cols-3"
+                style="column-gap: 10px"
+            >
+                <dl-dropdown-button
+                    auto-close
+                    :model-value="showing"
+                    :label="name"
+                    main-btn-style="width: 150px;"
+                    @show="onOpen"
+                >
+                    <dl-list>
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Photos')"
+                        >
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Videos and long text')"
+                        >
+                            <dl-item-section>
+                                Videos and long text
+                            </dl-item-section>
+                        </dl-list-item>
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Movies and long text')"
+                        >
+                            <dl-item-section>
+                                Movies and long text
+                            </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Articles')"
+                        >
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+
+                <dl-dropdown-button
+                    auto-close
+                    :model-value="showing"
+                    label="Ellipsis for very long text"
+                    main-btn-style="width: 150px;"
+                    :overflow="true"
+                    :no-wrap="true"
+                    tooltip="Tooltip message"
+                    @show="onOpen"
+                >
+                    <dl-list>
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Photos')"
+                        >
+                            <dl-item-section> Photos </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Videos and long text')"
+                        >
+                            <dl-item-section :no-wrap="true">
+                                <dl-ellipsis
+                                    text="Very very very very long long long long text text text"
+                                    :middle-ellipsis="true"
+                                />
+                            </dl-item-section>
+                        </dl-list-item>
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Movies and long text')"
+                        >
+                            <dl-item-section :no-wrap="true">
+                                <dl-ellipsis
+                                    text="Very very very very long long long long text text text"
+                                />
+                            </dl-item-section>
+                        </dl-list-item>
+
+                        <dl-list-item
+                            clickable
+                            @click="() => onClose('Articles')"
+                        >
+                            <dl-item-section> Articles </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+
+                <dl-dropdown-button
+                    auto-close
+                    :model-value="showing"
+                    :label="arrowNavigationLabel"
+                    main-btn-style="width: 150px;"
+                    :overflow="true"
+                    :no-wrap="true"
+                    tooltip="Tooltip message"
+                    :arrow-nav-items="listItems"
+                    @show="onOpen"
+                    @highlightedIndex="setHighlightedIndex"
+                    @handleSelectedItem="handleSelectedItem"
+                >
+                    <dl-list>
+                        <dl-list-item
+                            v-for="(item, index) in listItems"
+                            :key="index"
+                            clickable
+                            :is-highlighted="index === highlightedIndex"
+                        >
+                            <dl-item-section>
+                                {{ item }}
+                            </dl-item-section>
+                        </dl-list-item>
+                    </dl-list>
+                </dl-dropdown-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import {
+    DlListItem,
+    DlItemSection,
+    DlList,
+    DlDropdownButton,
+    DlEllipsis
+} from '../components'
+
+export default defineComponent({
+    name: 'DlDropdownButtonDemo',
+    components: {
+        DlListItem,
+        DlItemSection,
+        DlList,
+        DlDropdownButton,
+        DlEllipsis
+    },
+    setup() {
+        const highlightedIndex = ref(-1)
+        const name = ref('Dropdown Button Controlled')
+        const showing = ref(false)
+        const arrowNavigationLabel = ref('Arrow Navigation Label')
+
+        const listItems = ref([
+            'New tab',
+            'New incognito tab',
+            'Recent tabs',
+            'History',
+            'Downloads',
+            'Settings',
+            'Help & Feedback'
+        ])
+
+        const handleSelectedItem = (value: any) => {
+            arrowNavigationLabel.value = value
+            showing.value = false
+        }
+        const onClose = (newName: string) => {
+            name.value = newName
+            showing.value = false
+            alert(name.value)
+        }
+        const onOpen = () => {
+            showing.value = true
+        }
+        const onClick = () => {
+            alert(name.value)
+        }
+        const setHighlightedIndex = (value: number) => {
+            highlightedIndex.value = value
+        }
+
+        return {
+            listItems,
+            onClose,
+            onOpen,
+            onClick,
+            name,
+            showing,
+            setHighlightedIndex,
+            handleSelectedItem,
+            highlightedIndex,
+            arrowNavigationLabel
+        }
+    }
+})
+</script>

package/src/demos/DlEllipsisDemo.vue

@@ -0,0 +1,30 @@
+<template>
+    <div style="width: 90%">
+        <div style="white-space: nowrap; width: 350px">
+            <p style="font-weight: bold">
+                Ellipsis at the end
+            </p>
+            <dl-ellipsis
+                text="Lorem ipsum dolor sit amet consectetur adipisicing elit."
+            />
+        </div>
+        <div style="white-space: nowrap; width: 350px">
+            <p style="font-weight: bold">
+                Ellipsis at the middle
+            </p>
+            <dl-ellipsis
+                text="Lorem ipsum dolor sit amet consectetur adipisicing elit. "
+                middle-ellipsis="true"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlEllipsis } from '../components'
+
+export default defineComponent({
+    components: { DlEllipsis }
+})
+</script>

package/src/{demo → demos}/DlLineChartDemo.vue

@@ -282,29 +282,29 @@ const data = {
     datasets: [
         {
             label: 'Discarded',
-            backgroundColor: '--dl-color-secondary',
-            borderColor: '--dl-color-secondary',
+            backgroundColor: '--dl-color-chart-7',
+            borderColor: '--dl-color-chart-7',
             pointRadius: 4,
             data: randomIntFromInterval(0, 4)
         },
         {
             label: 'Undiscarded',
-            backgroundColor: '--dl-color-warning',
-            borderColor: '--dl-color-warning',
+            backgroundColor: '--dl-color-chart-1',
+            borderColor: '--dl-color-chart-1',
             pointRadius: 4,
             data: randomIntFromInterval(2, 6)
         },
         {
             label: 'Completed',
-            backgroundColor: '--dl-color-positive',
-            borderColor: '--dl-color-positive',
+            backgroundColor: '--dl-color-chart-14',
+            borderColor: '--dl-color-chart-14',
             pointRadius: 4,
             data: randomIntFromInterval(1, 5)
         },
         {
             label: 'Uncompleted',
-            backgroundColor: '--dl-color-negative',
-            borderColor: '--dl-color-negative',
+            backgroundColor: '--dl-color-secondary',
+            borderColor: '--dl-color-secondary',
             pointRadius: 4,
             data: randomIntFromInterval(0, 5)
         }

package/src/{demo → demos}/DlMenuDemo.vue

@@ -486,6 +486,27 @@
                         </dl-list>
                     </dl-menu>
                 </dl-button>
+
+                <h4>Arrow navigation</h4>
+                <dl-button :label="arrowNavigationLabel">
+                    <dl-menu
+                        @show="onShow"
+                        @hide="onHide"
+                    >
+                        <dl-list style="min-width: 100px">
+                            <dl-list-item
+                                v-for="(item, index) in listItems"
+                                :key="index"
+                                clickable
+                                :is-highlighted="index === highlightedIndex"
+                            >
+                                <dl-item-section>
+                                    {{ item }}
+                                </dl-item-section>
+                            </dl-list-item>
+                        </dl-list>
+                    </dl-menu>
+                </dl-button>
             </div>
         </div>
     </div>
@@ -500,7 +521,8 @@ import {
     DlList,
     DlMenu
 } from '../components'
-import { defineComponent, onMounted, ref } from 'vue-demi'
+import { defineComponent, onMounted, ref, watch } from 'vue-demi'
+import { useArrowNavigation } from '../hooks/use-arrow-navigation'
 
 export default defineComponent({
     name: 'DlMenuDemo',
@@ -514,11 +536,48 @@ export default defineComponent({
     },
     setup() {
         const showing = ref(false)
+        const isMenuOpen = ref(false)
+        const arrowNavigationLabel = ref('Arrow Navigation Label')
+
+        const listItems = ref([
+            'New tab',
+            'New incognito tab',
+            'Recent tabs',
+            'History',
+            'Downloads',
+            'Settings',
+            'Help & Feedback'
+        ])
+
+        const onShow = (value: any) => {
+            isMenuOpen.value = !!value
+        }
+        const onHide = (value: any) => {
+            isMenuOpen.value = !value
+        }
+        const { selectedItem, highlightedIndex } = useArrowNavigation(
+            listItems,
+            isMenuOpen
+        )
+
+        watch(selectedItem, (value: string) => {
+            arrowNavigationLabel.value = value
+        })
+
         onMounted(() => {
             // @ts-ignore
             window.menuDemo = { showing }
         })
-        return { showing }
+        return {
+            showing,
+            listItems,
+            onShow,
+            onHide,
+            isMenuOpen,
+            selectedItem,
+            highlightedIndex,
+            arrowNavigationLabel
+        }
     }
 })
 </script>

package/src/{demo → demos}/DlSearchDemo.vue

@@ -6,7 +6,7 @@
             with-search-btn
             highlight-matches
             placeholder="Search here"
-            :auto-suggest-items="['foo', 'bar']"
+            :auto-suggest-items="suggestItems"
         />
     </div>
 </template>
@@ -21,7 +21,8 @@ export default defineComponent({
     },
     setup() {
         const searchValue = ref<string>('')
-        return { searchValue }
+        const suggestItems = ['foo', 'foo bar', 'bar', 'bar foo']
+        return { searchValue, suggestItems }
     }
 })
 </script>

package/src/demos/DlSeparatorDemo.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <div style="display: flex">
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
+                eos amet, nobis unde animi atque itaque? Provident suscipit enim
+                eos sequi dolor minima optio tempora error tenetur, autem
+                ratione cumque!
+            </p>
+            <DlSeparator type="vertical" />
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
+                eos amet, nobis unde animi atque itaque? Provident suscipit enim
+                eos sequi dolor minima optio tempora error tenetur, autem
+                ratione cumque!
+            </p>
+        </div>
+        <div>
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
+                eos amet, nobis unde animi atque itaque? Provident suscipit enim
+                eos sequi dolor minima optio tempora error tenetur, autem
+                ratione cumque!
+            </p>
+            <DlSeparator width="100%" />
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas
+                eos amet, nobis unde animi atque itaque? Provident suscipit enim
+                eos sequi dolor minima optio tempora error tenetur, autem
+                ratione cumque!
+            </p>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue-demi'
+import { DlSeparator } from '../components'
+
+export default defineComponent({
+    name: 'DlSeparatorDemo',
+    components: { DlSeparator }
+})
+</script>

package/src/demos/DlSpinnerDemo.vue

@@ -0,0 +1,59 @@
+<template>
+    <div class="spinner-dl">
+        <div class="spinner-container">
+            <span class="spinner-title">Dl Spinner</span>
+            <dl-spinner
+                type="default"
+                text="Loading..."
+                :text-styles="{
+                    fontSize: '1em',
+                    marginTop: '15px',
+                    marginLeft: '10px'
+                }"
+            />
+        </div>
+
+        <div class="spinner-container">
+            <span class="spinner-title">Circle Spinner</span>
+            <dl-spinner type="circle" />
+        </div>
+
+        <div class="spinner-container">
+            <span class="spinner-title">Grid Spinner</span>
+            <dl-spinner type="grid" />
+        </div>
+
+        <div class="spinner-container">
+            <span class="spinner-title">Dots Spinner</span>
+            <dl-spinner type="dots" />
+        </div>
+
+        <div class="spinner-container">
+            <span class="spinner-title">Clock Spinner</span>
+            <dl-spinner type="clock" />
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue-demi'
+import { DlSpinner } from '../components'
+
+export default defineComponent({
+    components: {
+        DlSpinner
+    }
+})
+</script>
+
+<style lang="scss">
+.spinner-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.spinner-title {
+    margin-bottom: 20px;
+}
+</style>