@dataloop-ai/components 0.16.44 → 0.16.46

package/src/components/essential/DlMenu/DlMenu.vue

@@ -79,6 +79,7 @@ import {
 } from './utils'
 import { isMobileOrTablet } from '../../../utils'
 import { v4 } from 'uuid'
+import { useArrowNavigation } from '../../../hooks/use-arrow-navigation'
 
 export default defineComponent({
     name: 'DlMenu',
@@ -140,10 +141,20 @@ export default defineComponent({
         menuClass: {
             type: String,
             default: ''
+        },
+        arrowNavItems: {
+            type: [String, Array, Object],
+            default: () => [] as any[]
         }
     },
 
-    emits: [...useModelToggleEmits, 'click', 'escape-key'],
+    emits: [
+        ...useModelToggleEmits,
+        'click',
+        'escape-key',
+        'highlightedIndex',
+        'handleSelectedItem'
+    ],
 
     setup(props, { attrs }) {
         const vm = getCurrentInstance()
@@ -242,6 +253,7 @@ export default defineComponent({
         const isMobile = computed(() => isMobileOrTablet())
 
         function handleShow(evt: MouseEvent | TouchEvent) {
+            isMenuOpen.value = true
             removeTick()
             removeTimeout()
 
@@ -290,6 +302,7 @@ export default defineComponent({
         }
 
         function handleHide(evt: ClickOutsideEvent) {
+            isMenuOpen.value = false
             removeTick()
             removeTimeout()
             hidePortal()
@@ -396,6 +409,19 @@ export default defineComponent({
         // expose public methods
         Object.assign(proxy, { focus, updatePosition })
 
+        const isMenuOpen = ref(false)
+        const navItems = computed(() => props.arrowNavItems)
+        const { selectedItem, highlightedIndex } = useArrowNavigation(
+            navItems,
+            isMenuOpen
+        )
+        watch(selectedItem, (value: any) => {
+            emit('handleSelectedItem', value)
+        })
+        watch(highlightedIndex, (value: any) => {
+            emit('highlightedIndex', value)
+        })
+
         return {
             uuid: `dl-menu-${v4()}`,
             onClick,
@@ -406,7 +432,9 @@ export default defineComponent({
             portalEl: isVue2 ? '[data-test-id="portal"]' : portalEl,
             portalIsActive,
             classes: 'dl-menu dl-position-engine scroll' + classes.value,
-            styles: [attrs.style, transitionStyle.value] as any
+            styles: [attrs.style, transitionStyle.value] as any,
+            selectedItem,
+            highlightedIndex
         }
     }
 })

package/src/components/essential/DlSeparator/DlSeparator.vue

@@ -0,0 +1,62 @@
+<template>
+    <div :style="styles" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { includes } from '../../../utils'
+
+export default defineComponent({
+    name: 'DlSeparator',
+    props: {
+        color: {
+            type: String,
+            default: 'var(--dl-color-separator)'
+        },
+        type: {
+            type: String,
+            default: 'horizontal',
+            validator: (value: string) =>
+                includes(['horizontal', 'vertical'], value)
+        },
+        width: {
+            type: String,
+            default: null
+        },
+        height: {
+            type: String,
+            default: null
+        },
+        indent: {
+            type: String,
+            default: '10px'
+        }
+    },
+    computed: {
+        styles() {
+            let styles
+            switch (this.type) {
+                case 'horizontal':
+                    styles = {
+                        backgroundColor: this.color,
+                        width: this.width || '300px',
+                        height: this.height || '1px',
+                        marginTop: this.indent,
+                        marginBottom: this.indent
+                    }
+                    break
+                case 'vertical':
+                    styles = {
+                        backgroundColor: this.color,
+                        width: this.width || '1px',
+                        height: this.height || '300px',
+                        marginLeft: this.indent,
+                        marginRight: this.indent
+                    }
+                    break
+            }
+            return styles
+        }
+    }
+})
+</script>

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

@@ -0,0 +1,2 @@
+import DlSeparator from './DlSeparator.vue'
+export { DlSeparator }

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

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

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

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

@@ -0,0 +1,113 @@
+<template>
+    <div class="spinner-wrapper">
+        <svg
+            class="dl-spinner"
+            :fill="color"
+            :width="size"
+            :height="size"
+            viewBox="0 0 120 30"
+        >
+            <circle
+                cx="15"
+                cy="15"
+                r="15"
+            >
+                <animate
+                    attributeName="r"
+                    from="15"
+                    to="15"
+                    begin="0s"
+                    dur="0.8s"
+                    values="15;9;15"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+                <animate
+                    attributeName="fill-opacity"
+                    from="1"
+                    to="1"
+                    begin="0s"
+                    dur="0.8s"
+                    values="1;.5;1"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+            </circle>
+
+            <circle
+                cx="60"
+                cy="15"
+                r="9"
+                fill-opacity=".3"
+            >
+                <animate
+                    attributeName="r"
+                    from="9"
+                    to="9"
+                    begin="0s"
+                    dur="0.8s"
+                    values="9;15;9"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+                <animate
+                    attributeName="fill-opacity"
+                    from=".5"
+                    to=".5"
+                    begin="0s"
+                    dur="0.8s"
+                    values=".5;1;.5"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+            </circle>
+
+            <circle
+                cx="105"
+                cy="15"
+                r="15"
+                fill-opacity=".3"
+            >
+                <animate
+                    attributeName="r"
+                    from="15"
+                    to="15"
+                    begin="0s"
+                    dur="0.8s"
+                    values="15;9;15"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+                <animate
+                    attributeName="fill-opacity"
+                    from="1"
+                    to="1"
+                    begin="0s"
+                    dur="0.8s"
+                    values="1;.5;1"
+                    calcMode="linear"
+                    repeatCount="indefinite"
+                />
+            </circle>
+        </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 src="../styles/spinnerStyles.scss" />