@dataloop-ai/components 0.16.44 → 0.16.46

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

@@ -0,0 +1,166 @@
+<template>
+    <div class="spinner-wrapper">
+        <svg
+            class="dl-spinner"
+            :fill="color"
+            :width="size"
+            :height="size"
+            viewBox="0 0 105 105"
+        >
+            <circle
+                cx="12.5"
+                cy="12.5"
+                r="12.5"
+            >
+                <animate
+                    attributeName="fill-opacity"
+                    begin="0s"
+                    dur="1s"
+                    values="1;.2;1"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+            </circle>
+
+            <circle
+                cx="12.5"
+                cy="52.5"
+                r="12.5"
+                fill-opacity=".5"
+            >
+                <animate
+                    attributeName="fill-opacity"
+                    begin="100ms"
+                    dur="1s"
+                    values="1;.2;1"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+            </circle>
+
+            <circle
+                cx="52.5"
+                cy="12.5"
+                r="12.5"
+            >
+                <animate
+                    attributeName="fill-opacity"
+                    begin="300ms"
+                    dur="1s"
+                    values="1;.2;1"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+            </circle>
+
+            <circle
+                cx="52.5"
+                cy="52.5"
+                r="12.5"
+            >
+                <animate
+                    attributeName="fill-opacity"
+                    begin="600ms"
+                    dur="1s"
+                    values="1;.2;1"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+            </circle>
+
+            <circle
+                cx="92.5"
+                cy="12.5"
+                r="12.5"
+            >
+                <animate
+                    attributeName="fill-opacity"
+                    begin="800ms"
+                    dur="1s"
+                    values="1;.2;1"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+            </circle>
+
+            <circle
+                cx="92.5"
+                cy="52.5"
+                r="12.5"
+            >
+                <animate
+                    attributeName="fill-opacity"
+                    begin="400ms"
+                    dur="1s"
+                    values="1;.2;1"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+            </circle>
+
+            <circle
+                cx="12.5"
+                cy="92.5"
+                r="12.5"
+            >
+                <animate
+                    attributeName="fill-opacity"
+                    begin="700ms"
+                    dur="1s"
+                    values="1;.2;1"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+            </circle>
+
+            <circle
+                cx="52.5"
+                cy="92.5"
+                r="12.5"
+            >
+                <animate
+                    attributeName="fill-opacity"
+                    begin="500ms"
+                    dur="1s"
+                    values="1;.2;1"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+            </circle>
+
+            <circle
+                cx="92.5"
+                cy="92.5"
+                r="12.5"
+            >
+                <animate
+                    attributeName="fill-opacity"
+                    begin="200ms"
+                    dur="1s"
+                    values="1;.2;1"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+            </circle>
+        </svg>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    props: {
+        color: {
+            type: String,
+            default: 'var(--dl-color-secondary)'
+        },
+        size: {
+            type: String,
+            default: '40px'
+        }
+    }
+})
+</script>
+
+<style src="../styles/spinnerStyles.scss" />

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

@@ -0,0 +1,152 @@
+<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 src="../styles/spinnerStyles.scss" />

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/styles/spinnerStyles.scss

@@ -0,0 +1,111 @@
+.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;
+    }
+}

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
         }