@dataloop-ai/components 0.16.45 → 0.16.47

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

@@ -1,117 +1,14 @@
 <template>
-    <div class="wrapper">
-        <div
-            class="spinner"
-            :style="spinnerStyles"
-        >
-            <div
-                ref="spinBg"
-                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
-                ref="spinColor"
-                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
-                ref="dlIcon"
-                class="dl-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>
+        <component
+            :is="spinnerType"
+            :size="size"
+            :color="color"
+            :thickness="thickness"
+            :border-color="borderColor"
+            :icon-size="iconSize"
+            :icon-color="iconColor"
+        />
         <div
             v-if="text"
             class="spinner-text"
@@ -122,11 +19,23 @@
     </div>
 </template>
 
-<script>
-import { defineComponent } from 'vue-demi'
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+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 { DlSpinnerTypes } from './types'
 
 export default defineComponent({
-    name: 'DlSpinner',
+    components: {
+        DlSpinnerGrid,
+        DlSpinnerCircle,
+        DlSpinnerClock,
+        DlSpinnerDots,
+        DlSpinnerLogo
+    },
     props: {
         text: {
             type: String,
@@ -136,17 +45,13 @@ export default defineComponent({
             type: Object,
             default: null
         },
-        size: {
-            type: String,
-            default: '140px'
-        },
-        iconSize: {
-            type: String,
-            default: '50px'
+        type: {
+            type: String as PropType<DlSpinnerTypes>,
+            default: 'default'
         },
-        borderColor: {
+        size: {
             type: String,
-            default: 'var(--dl-color-separator)'
+            default: '60px'
         },
         color: {
             type: String,
@@ -156,104 +61,35 @@ export default defineComponent({
             type: String,
             default: 'var(--dl-color-tooltip-background)'
         },
-        rotationSpeed: {
+        iconSize: {
+            type: String,
+            default: '25px'
+        },
+        borderColor: {
+            type: String,
+            default: 'var(--dl-color-separator)'
+        },
+        thickness: {
             type: String,
-            default: '2s'
+            default: '3px'
         }
     },
     computed: {
-        spinnerStyles() {
-            return {
-                '--dl-spinner-size': this.size,
-                '--dl-spinner-icon-size': this.iconSize,
-                '--dl-spinner-border-color': this.borderColor,
-                '--dl-spinner-roation-speed': this.rotationSpeed
+        spinnerType() {
+            switch (this.type.toLowerCase()) {
+                case DlSpinnerTypes.GRID:
+                    return 'DlSpinnerGrid'
+                case DlSpinnerTypes.CIRCLE:
+                    return 'DlSpinnerCircle'
+                case DlSpinnerTypes.DOTS:
+                    return 'DlSpinnerDots'
+                case DlSpinnerTypes.CLOCK:
+                    return 'DlSpinnerClock'
+                case DlSpinnerTypes.LOGO:
+                default:
+                    return 'DlSpinnerLogo'
             }
         }
-    },
-    mounted() {
-        window.onresize = this.resizeSpinner
-        this.resizeSpinner()
-    },
-    methods: {
-        resizeSpinner() {
-            const spinColor = this.$refs.spinColor
-            const spinBg = this.$refs.spinBg
-            const icon = this.$refs.dlIcon
-
-            const info = spinBg.getBoundingClientRect()
-            const x = info.x + window.scrollX
-            const y = info.y + window.scrollY
-
-            spinColor.style.left = `${x}px`
-            spinColor.style.top = `${y}px`
-            icon.style.top = `${
-                y +
-                spinBg.offsetHeight -
-                spinBg.offsetHeight / 2 -
-                icon.offsetHeight / 2.3
-            }px`
-            icon.style.left = `${
-                x +
-                spinBg.offsetWidth -
-                spinBg.offsetWidth / 2 -
-                icon.offsetWidth / 2.3
-            }px`
-        }
     }
 })
 </script>
-
-<style scoped lang="scss">
-.spin-loader,
-.spin-bg {
-    width: var(--dl-spinner-size);
-    height: var(--dl-spinner-size);
-}
-
-.spin-loader {
-    position: absolute;
-    animation: spin var(--dl-spinner-roation-speed) linear infinite;
-}
-
-.dl-icon {
-    position: absolute;
-    width: var(--dl-spinner-icon-size);
-    height: var(--dl-spinner-icon-size);
-    opacity: 1;
-    animation: pulse var(--dl-spinner-roation-speed) infinite;
-}
-
-.dl-svg {
-    fill: var(--dl-spinner-border-color);
-}
-
-.spinner-color-bg {
-    fill: none;
-}
-
-.spinner-color {
-    fill: url(#linear-gradient);
-}
-
-@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/components/DlSpinnerCircle.vue

@@ -0,0 +1,156 @@
+<template>
+    <div class="spinner-wrapper">
+        <svg
+            class="dl-spinner dl-spinner-mat"
+            :width="size"
+            :height="size"
+            viewBox="25 25 50 50"
+        >
+            <circle
+                class="spinner-path"
+                cx="50"
+                cy="50"
+                r="20"
+                fill="none"
+                :stroke="color"
+                :stroke-width="thickness"
+                stroke-miterlimit="10"
+            />
+        </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'
+        },
+        thickness: {
+            type: String,
+            default: '5px'
+        }
+    }
+})
+</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/components/DlSpinnerClock.vue

@@ -0,0 +1,191 @@
+<template>
+    <div class="spinner-wrapper">
+        <svg
+            class="dl-spinner"
+            :width="size"
+            :height="size"
+            viewBox="0 0 100 100"
+            preserveAspectRatio="xMidYMid"
+        >
+            <circle
+                cx="50"
+                cy="50"
+                r="48"
+                fill="none"
+                stroke-width="4"
+                stroke-miterlimit="10"
+                :stroke="color"
+            />
+            <line
+                stroke-linecap="round"
+                stroke-width="4"
+                stroke-miterlimit="10"
+                :stroke="color"
+                x1="50"
+                y1="50"
+                x2="85"
+                y2="50.5"
+            >
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 50 50"
+                    to="360 50 50"
+                    dur="2s"
+                    repeatCount="indefinite"
+                />
+            </line>
+
+            <line
+                stroke-linecap="round"
+                stroke-width="4"
+                stroke-miterlimit="10"
+                :stroke="color"
+                x1="50"
+                y1="50"
+                x2="49.5"
+                y2="74"
+            >
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 50 50"
+                    to="360 50 50"
+                    dur="15s"
+                    repeatCount="indefinite"
+                />
+            </line>
+        </svg>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    props: {
+        size: {
+            type: String,
+            default: '40px'
+        },
+        color: {
+            type: String,
+            default: 'var(--dl-color-secondary)'
+        }
+    }
+})
+</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>