@dataloop-ai/components 0.16.45 → 0.16.47

package/src/components/essential/DlSpinner/components/DlSpinnerLogo.vue

@@ -0,0 +1,264 @@
+<template>
+    <div class="spinner-wrapper">
+        <div
+            class="spinner"
+            :style="spinnerStyles"
+        >
+            <div class="spin-bg">
+                <svg
+                    id="Layer_2"
+                    data-name="Layer 2"
+                    viewBox="0 0 140 140"
+                >
+                    <g
+                        id="Layer_1-2"
+                        data-name="Layer 1"
+                    >
+                        <path
+                            class="dl-svg"
+                            d="M70,0C31.33,0,0,31.33,0,70s31.33,70,70,70,70-31.33,70-70S108.67,0,70,0Zm0,131.97c-34.2,0-61.97-27.77-61.97-61.97S35.8,8.03,70,8.03s61.97,27.77,61.97,61.97-27.77,61.97-61.97,61.97Z"
+                        />
+                    </g>
+                </svg>
+            </div>
+            <div class="spin-loader">
+                <svg
+                    id="Layer_2"
+                    data-name="Layer 2"
+                    viewBox="0 0 140 140"
+                >
+                    <defs>
+                        <linearGradient
+                            id="linear-gradient"
+                            x1="12.53"
+                            y1="229.07"
+                            x2="119.46"
+                            y2="229.07"
+                            gradientTransform="translate(0 246.89) scale(1 -1)"
+                            gradientUnits="userSpaceOnUse"
+                        >
+                            <stop
+                                offset="0"
+                                :stop-color="color"
+                                stop-opacity="0"
+                            />
+                            <stop
+                                offset=".12"
+                                :stop-color="color"
+                                stop-opacity="0"
+                            />
+                            <stop
+                                offset=".34"
+                                :stop-color="color"
+                            />
+                            <stop
+                                offset=".69"
+                                :stop-color="color"
+                            />
+                            <stop
+                                offset=".91"
+                                :stop-color="color"
+                                stop-opacity="0"
+                            />
+                        </linearGradient>
+                    </defs>
+                    <g
+                        id="Layer_1-2"
+                        data-name="Layer 1"
+                    >
+                        <g>
+                            <path
+                                class="spinner-color-bg"
+                                d="M70,0C31.33,0,0,31.33,0,70s31.33,70,70,70,70-31.33,70-70S108.67,0,70,0Zm0,131.97c-34.2,0-61.97-27.77-61.97-61.97S35.8,8.03,70,8.03s61.97,27.77,61.97,61.97-27.77,61.97-61.97,61.97Z"
+                            />
+                            <path
+                                class="spinner-color"
+                                d="M114.87,25.82c1.38-1.38,2.87-2.75,4.25-4.13,.46-.34,.46-1.03,0-1.49C106.49,7.69,89.16,0,70,0,46.36,0,25.48,11.7,12.74,29.72c-.34,.46-.23,.92,.11,1.38l4.25,4.25c.46,.46,1.15,.34,1.61-.11,11.25-16.52,29.95-27.2,51.3-27.2,16.98,0,32.25,6.77,43.49,17.79,.34,.34,1.03,.34,1.38,0Z"
+                            />
+                        </g>
+                    </g>
+                </svg>
+            </div>
+            <div class="dl-spinner-icon">
+                <svg
+                    viewBox="0 0 51 45"
+                    fill="none"
+                >
+                    <path
+                        d="M23.2962 0.558083H0.830566V32.2536L10.1727 44.284H23.2962V38.5002H12.6195L6.39136 30.4028V6.11058H23.2962V0.558083Z"
+                        :fill="iconColor"
+                    />
+                    <path
+                        d="M27.5224 6.11058V0.558083C33.3056 -0.137737 52.8796 3.56565 50.6553 25.0816C48.9091 41.9727 34.3436 44.901 27.5224 44.284V38.5002C41.2242 39.4256 45.0945 29.1689 45.3169 23.9249C46.2067 8.19281 33.8246 5.49365 27.5224 6.11058Z"
+                        :fill="iconColor"
+                    />
+                    <path
+                        d="M23.2962 19.0664V13.5139H13.0643V27.3952L16.8457 31.7909H23.2962V26.2384H19.07L18.6251 25.5443V19.0664H23.2962Z"
+                        :fill="iconColor"
+                    />
+                    <path
+                        d="M27.5224 19.0664V13.5139C31.2296 13.2054 38.644 14.5782 38.644 22.5367C38.644 30.4953 31.2296 32.0223 27.5224 31.7909V26.2384C29.3018 26.7782 33.3056 26.9038 33.3056 22.9994C33.3056 19.0664 29.5984 18.758 27.5224 19.0664Z"
+                        :fill="iconColor"
+                    />
+                </svg>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    props: {
+        size: {
+            type: String,
+            default: '140px'
+        },
+        iconSize: {
+            type: String,
+            default: '50px'
+        },
+        borderColor: {
+            type: String,
+            default: 'var(--dl-color-separator)'
+        },
+        color: {
+            type: String,
+            default: 'var(--dl-color-secondary)'
+        },
+        iconColor: {
+            type: String,
+            default: 'var(--dl-color-tooltip-background)'
+        }
+    },
+    computed: {
+        spinnerStyles() {
+            return {
+                '--dl-spinner-size': this.size,
+                '--dl-spinner-icon-size': this.iconSize,
+                '--dl-spinner-border-color': this.borderColor,
+                '--icon-top': `${
+                    parseInt(this.size) / 2 -
+                    parseInt(this.iconSize) / 2 +
+                    parseInt(this.iconSize) / 25
+                }px`
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+.spinner-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.dl-spinner {
+    vertical-align: middle;
+}
+
+.dl-spinner-mat {
+    animation: spinCircle 2s linear infinite;
+    transform-origin: center center;
+}
+.spinner-path {
+    stroke-dasharray: 1, 200 #{'/* rtl:ignore */'};
+    stroke-dashoffset: 0 #{'/* rtl:ignore */'};
+    animation: dash 1.5s ease-in-out infinite;
+}
+
+.spinner {
+    position: relative;
+}
+
+.spin-loader,
+.spin-bg {
+    width: var(--dl-spinner-size);
+    height: var(--dl-spinner-size);
+    top: 0;
+    left: 0;
+}
+
+.spin-loader {
+    position: absolute;
+    animation: spin 2s linear infinite;
+}
+
+.dl-spinner-icon {
+    top: var(--icon-top);
+    left: var(--icon-top);
+    position: absolute;
+    width: var(--dl-spinner-icon-size);
+    height: var(--dl-spinner-icon-size);
+    opacity: 1;
+    animation: pulse 2s infinite;
+}
+
+.dl-svg {
+    fill: var(--dl-spinner-border-color);
+}
+
+.spinner-color-bg {
+    fill: none;
+}
+
+.spinner-color {
+    fill: url(#linear-gradient);
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}
+
+@keyframes spinCircle {
+    0% {
+        transform: rotate3d(0, 0, 1, 0deg) #{'/* rtl:ignore */'};
+    }
+    25% {
+        transform: rotate3d(0, 0, 1, 90deg) #{'/* rtl:ignore */'};
+    }
+    50% {
+        transform: rotate3d(0, 0, 1, 180deg) #{'/* rtl:ignore */'};
+    }
+    75% {
+        transform: rotate3d(0, 0, 1, 270deg) #{'/* rtl:ignore */'};
+    }
+    100% {
+        transform: rotate3d(0, 0, 1, 359deg) #{'/* rtl:ignore */'};
+    }
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+</style>

package/src/components/essential/DlSpinner/index.ts

@@ -1,2 +1,15 @@
+import DlSpinnerGrid from './components/DlSpinnerGrid.vue'
+import DlSpinnerCircle from './components/DlSpinnerCircle.vue'
+import DlSpinnerClock from './components/DlSpinnerClock.vue'
+import DlSpinnerDots from './components/DlSpinnerDots.vue'
+import DlSpinnerLogo from './components/DlSpinnerLogo.vue'
 import DlSpinner from './DlSpinner.vue'
-export { DlSpinner }
+
+export {
+    DlSpinner,
+    DlSpinnerLogo,
+    DlSpinnerCircle,
+    DlSpinnerGrid,
+    DlSpinnerDots,
+    DlSpinnerClock
+}

package/src/components/essential/DlSpinner/types.ts

@@ -0,0 +1,7 @@
+export enum DlSpinnerTypes {
+    GRID = 'grid',
+    CIRCLE = 'circle',
+    DOTS = 'dots',
+    CLOCK = 'clock',
+    LOGO = 'logo'
+}

package/src/components/essential/index.ts

@@ -17,3 +17,4 @@ export * from './DlTextArea'
 export * from './DlLink'
 export * from './DlColorPicker'
 export * from './DlSpinner'
+export * from './DlSeparator'

package/src/components/essential/types.ts

@@ -1 +1,2 @@
 export * from './DlColorPicker/types'
+export * from './DlSpinner/types'

package/src/components/shared/DlItemSection/DlItemSection.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts">
 import { v4 } from 'uuid'
-import { defineComponent } from 'vue-demi'
+import { defineComponent, ref, computed } from 'vue-demi'
 import { getColor } from '../../../utils'
 
 export default defineComponent({
@@ -23,24 +23,29 @@ export default defineComponent({
         side: Boolean,
         noWrap: Boolean
     },
-    data() {
-        return {
-            uuid: `dl-item-section-${v4()}`
-        }
-    },
-    computed: {
-        classes(): Record<string, boolean> {
+    setup(props) {
+        const uuid = `dl-item-section-${v4()}`
+
+        const classes = computed(() => {
             return {
                 'dl-item__section': true,
-                'dl-item__section--side': this.side,
-                'dl-item__section--nowrap': this.noWrap,
-                'dl-item__section--main': !this.side
+                'dl-item__section--side': props.side,
+                'dl-item__section--nowrap': props.noWrap,
+                'dl-item__section--main': !props.side
             }
-        },
-        cssVars(): Record<string, string> {
+        })
+        const cssVars = computed(() => {
             return {
-                '--dl-item-color': this.color ? getColor(this.color) : 'inherit'
+                '--dl-item-color': props.color
+                    ? getColor(props.color)
+                    : 'inherit'
             }
+        })
+
+        return {
+            uuid,
+            classes,
+            cssVars
         }
     }
 })
@@ -56,8 +61,9 @@ export default defineComponent({
     justify-content: flex-start;
     &--nowrap {
         white-space: nowrap;
+        width: 100%;
         overflow: hidden;
-        text-overflow: ellipsis;
+        text-overflow-middle: ellipsis;
         & > * {
             overflow: hidden;
             text-overflow: ellipsis;

package/src/components/shared/DlVirtualScroll/DlVirtualScroll.vue

@@ -3,10 +3,14 @@
     <div
         :id="uuid"
         ref="rootRef"
+        :style="cssVars"
         class="dl-table__middle"
         :class="classes"
     >
-        <table class="dl-table">
+        <table
+            class="dl-table"
+            :class="draggableClasses"
+        >
             <slot
                 v-if="hasBeforeSlot"
                 name="before"
@@ -18,16 +22,13 @@
             >
                 <tr>
                     <td
-                        :style="{
-                            height: virtualScrollPaddingBefore + 'px',
-                            '--dl-virtual-scroll-item-height':
-                                virtualScrollItemSize + 'px'
-                        }"
+                        class="dl-virtual-scroll__before"
                         :colspan="colspanAttr"
                     />
                 </tr>
             </tbody>
             <tbody
+                id="draggable"
                 key="content"
                 ref="contentRef"
                 class="dl-virtual-scroll__content"
@@ -45,11 +46,7 @@
             >
                 <tr>
                     <td
-                        :style="{
-                            height: virtualScrollPaddingAfter + 'px',
-                            '--dl-virtual-scroll-item-height':
-                                virtualScrollItemSize + 'px'
-                        }"
+                        class="dl-virtual-scroll__after"
                         :colspan="colspanAttr"
                     />
                 </tr>
@@ -81,6 +78,7 @@ import { getScrollTarget } from '../../../utils/scroll'
 import { useVirtualScroll, useVirtualScrollProps } from './useVirtualScroll'
 
 export default defineComponent({
+    name: 'DlVirtualScroll',
     props: {
         ...useVirtualScrollProps,
 
@@ -89,6 +87,11 @@ export default defineComponent({
             default: () => [] as Record<string, any>[]
         },
 
+        draggableClasses: {
+            type: [String, Array, Object],
+            default: null
+        },
+
         itemsFn: { type: Function, default: void 0 },
         itemsSize: { type: Number, default: 0 },
 
@@ -98,6 +101,7 @@ export default defineComponent({
     },
     setup(props, { slots, attrs }) {
         const vm = getCurrentInstance()
+
         let localScrollTarget: HTMLElement | undefined
         const rootRef: Ref<HTMLElement | null> = ref(null)
 
@@ -157,6 +161,15 @@ export default defineComponent({
                 (props.scrollTarget !== void 0 ? '' : ' scroll')
         )
 
+        const cssVars = computed(() => {
+            return {
+                '--item-height-before': virtualScrollPaddingBefore.value + 'px',
+                '--item-height-after': virtualScrollPaddingAfter.value + 'px',
+                '--dl-virtual-scroll-item-height':
+                    props.virtualScrollItemSize + 'px'
+            }
+        })
+
         const attributes = computed(() =>
             props.scrollTarget !== void 0 ? {} : { tabindex: 0 }
         )
@@ -243,7 +256,8 @@ export default defineComponent({
             classes,
             hasBeforeSlot,
             hasAfterSlot,
-            colspanAttr
+            colspanAttr,
+            cssVars
         }
     }
 })
@@ -265,17 +279,18 @@ export default defineComponent({
             overflow-anchor: auto;
         }
     }
+    &__before {
+        height: var(--item-height-before);
+    }
+
+    &__after {
+        height: var(--item-height-after);
+    }
     &__padding {
-        background: linear-gradient(
-            rgba(255, 255, 255, 0),
-            rgba(255, 255, 255, 0) 20%,
-            rgba(128, 128, 128, 0.03) 20%,
-            rgba(128, 128, 128, 0.08) 50%,
-            rgba(128, 128, 128, 0.03) 80%,
-            rgba(255, 255, 255, 0) 80%,
-            rgba(255, 255, 255, 0)
+        background: repeating-linear-gradient(
+            rgba(128, 128, 128, 0.03),
+            rgba(128, 128, 128, 0.08) var(--dl-virtual-scroll-item-height, 50px)
         );
-        background-size: 100%, var(--dl-virtual-scroll-item-height, 50px);
 
         .dl-table & {
             tr {

package/src/components/shared/DlVirtualScroll/useVirtualScroll.ts

@@ -203,7 +203,7 @@ export const commonVirtScrollProps = {
 
     virtualScrollItemSize: {
         type: [Number, String],
-        default: 24
+        default: 0
     },
 
     virtualScrollStickySizeStart: {
@@ -756,15 +756,13 @@ export function useVirtualScroll({
 
     function emitScroll(index: number) {
         if (prevToIndex !== index) {
-            if (props.onVirtualScroll !== void 0) {
-                emit('virtual-scroll', {
-                    index,
-                    from: virtualScrollSliceRange.value.from,
-                    to: virtualScrollSliceRange.value.to - 1,
-                    direction: index < prevToIndex ? 'decrease' : 'increase',
-                    ref: proxy
-                })
-            }
+            emit('virtual-scroll', {
+                index,
+                from: virtualScrollSliceRange.value.from,
+                to: virtualScrollSliceRange.value.to - 1,
+                direction: index < prevToIndex ? 'decrease' : 'increase',
+                ref: proxy
+            })
 
             prevToIndex = index
         }

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

@@ -242,6 +242,21 @@
                 </dl-menu>
             </dl-button>
         </div>
+        <div>
+            <h3>Button with icon no label and menu</h3>
+            <p>should have</p>
+            <dl-button icon="icon-dl-search">
+                <div>
+                    test
+                    <dl-menu>
+                        <dl-list>
+                            <dl-list-item>item 1</dl-list-item>
+                            <dl-list-item> item 2</dl-list-item>
+                        </dl-list>
+                    </dl-menu>
+                </div>
+            </dl-button>
+        </div>
     </div>
 </template>
 

package/src/demos/DlCardDemo.vue

@@ -0,0 +1,47 @@
+<template>
+    <div>
+        <DlCard
+            :image="image"
+            :text="text"
+            :title="title"
+            :keyboard-shortcut="keyboardShortcut"
+            :links="links"
+        />
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue-demi'
+import { DlCard } from '../components'
+
+export default defineComponent({
+    name: 'DlCardDemo',
+    components: {
+        DlCard
+    },
+    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
+                },
+                {
+                    href: '#test',
+                    title: 'Developers',
+                    icon: 'icon-dl-code'
+                }
+            ]
+        }
+    }
+})
+</script>

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

@@ -7,7 +7,10 @@
             @changeColor="onColorChange"
             @updateColor="onColorUpdate"
         />
-        <h1 :style="{ color: colorPickerValue }">
+        <h1
+            class="textShadow"
+            :style="{ color: colorPickerValue }"
+        >
             The chosen color is {{ colorPickerValue }}
         </h1>
     </div>
@@ -38,6 +41,18 @@ export default defineComponent({
                 ...colorsHistory.value
             ].slice(0, 7)
         }
+
+        return {
+            colorPickerValue,
+            colorsHistory,
+            onColorChange,
+            onColorUpdate
+        }
     }
 })
 </script>
+<style lang="scss">
+.textShadow {
+    text-shadow: 1px 1px 2px var(--dl-color-darker);
+}
+</style>

package/src/demos/DlConfusionMatrixDemo.vue

@@ -0,0 +1,53 @@
+<template>
+    <dl-confusion-matrix
+        :matrix="matrix"
+        :labels="labels"
+    />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlConfusionMatrix } from '../components'
+export default defineComponent({
+    components: {
+        DlConfusionMatrix
+    },
+    setup() {
+        const matrix = []
+        const labels = []
+        const size = 10
+
+        const getLink = (number: number) => {
+            return `www.confusion-matrix.com/cell-${number}`
+        }
+
+        for (let i = 0; i < size; i++) {
+            const row = []
+            for (let j = 0; j < size; j++) {
+                const value = Math.floor(Math.random() * 10)
+                row.push({
+                    value,
+                    link: getLink(value)
+                })
+            }
+            matrix.push(row)
+        }
+
+        // const items = [
+        //     { title: 'Van', image: 'https://picsum.photos/200/200' },
+        //     { title: 'Truck', image: 'https://picsum.photos/200/200' },
+        //     { title: 'Motorcycle', image: 'https://picsum.photos/200/200'},
+        //     { title: 'Car', image: 'https://picsum.photos/200/200'},
+        //     { title: 'Bus', image: 'https://picsum.photos/200/200'}
+        // ]
+
+        const items = ['Van', 'Truck', 'Motorcycle', 'Car', 'Bus']
+
+        for (let i = 0; i < size; i++) {
+            labels.push(items[Math.floor(Math.random() * items.length)])
+        }
+
+        return { matrix, labels, getLink }
+    }
+})
+</script>

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

@@ -103,7 +103,10 @@
             </template>
             <template #footer>
                 <dl-dialog-box-footer>
-                    <dl-button @click="openSecondModal">
+                    <dl-button
+                        outlined
+                        @click="openSecondModal"
+                    >
                         Open second modal
                     </dl-button>
                     <dl-button @click="closeModal">