@dataloop-ai/components 0.13.19 → 0.14.4

package/src/components/DlSpinner.vue

@@ -0,0 +1,259 @@
+<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
+            v-if="text"
+            class="spinner-text"
+            :style="textStyles"
+        >
+            <span>{{ text }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlSpinner',
+    props: {
+        text: {
+            type: String,
+            default: null
+        },
+        textStyles: {
+            type: Object,
+            default: null
+        },
+        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)'
+        },
+        rotationSpeed: {
+            type: String,
+            default: '2s'
+        }
+    },
+    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
+            }
+        }
+    },
+    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/DlTable/DlTable.vue

@@ -1045,7 +1045,10 @@ export default defineComponent({
         })
 
         const marginalsScope = computed(() => ({
-            pagination: paginationState.value
+            pagination: paginationState.value,
+            pagesNumber: pagesNumber.value,
+            isFirstPage: isFirstPage.value,
+            isLastPage: isLastPage.value
         }))
 
         function getCellValue(

package/src/components/DlTable/hooks/tablePagination.ts

@@ -54,6 +54,7 @@ export function useTablePaginationState(
     getCellValue: Function
 ) {
     const { props, emit } = vm
+
     const innerPagination = ref(
         Object.assign(
             {
@@ -72,7 +73,8 @@ export function useTablePaginationState(
                 withQuickNavigation: true,
                 itemsName: 'Rows',
                 withLegend: true,
-                withRowsPerPage: true
+                withRowsPerPage: true,
+                rowsPerPageOptions: props.rowsPerPageOptions
             },
             props.pagination
         )
@@ -137,7 +139,11 @@ export function useTablePagination(
 ) {
     const { props, emit } = vm
 
-    const computedRowsNumber = computed(() => filteredSortedRowsNumber.value)
+    const computedRowsNumber = computed(
+        () =>
+            computedPagination.value?.rowsNumber ??
+            filteredSortedRowsNumber.value
+    )
 
     const firstRowIndex = computed(() => {
         const { page, rowsPerPage } = computedPagination.value

package/src/components/DlTextArea.vue

@@ -5,6 +5,7 @@
         :style="cssVars"
     >
         <textarea
+            ref="textarea"
             :value="modelValue"
             class="textarea"
             :placeholder="placeholder"
@@ -85,6 +86,14 @@ export default defineComponent({
         },
         onBlur(e: InputEvent) {
             this.$emit('blur', e)
+        },
+        focus() {
+            const inputRef = this.$refs.textarea as HTMLTextAreaElement
+            inputRef.focus()
+        },
+        blur() {
+            const inputRef = this.$refs.textarea as HTMLTextAreaElement
+            inputRef.blur()
         }
     }
 })

package/src/components/DlTextInput.vue

@@ -118,7 +118,8 @@
                 auto-close
                 no-focus
                 :offset="[0, 3]"
-                fit
+                fit-container
+                :fit-content="fitContent"
                 @click="onMenuShow"
             >
                 <dl-list
@@ -323,7 +324,8 @@ export default defineComponent({
         clearButtonTooltip: {
             type: Boolean,
             default: false
-        }
+        },
+        fitContent: Boolean
     },
     emits: ['input', 'focus', 'blur', 'clear', 'enter', 'update:model-value'],
     data() {

package/src/components/DlThemeProvider.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue-demi'
+import { defineComponent, onMounted, watch, provide, ref } from 'vue-demi'
 import { getThemeModeAttr } from '../utils'
 import '@dataloop-ai/icons/docs/style.css'
 import { v4 } from 'uuid'
@@ -18,22 +18,31 @@ export default defineComponent({
             default: false
         }
     },
+    setup(props) {
+        onMounted(() => {
+            const mode = getThemeModeAttr(props.isDark)
+            document.documentElement.setAttribute('data-theme', mode)
+        })
+
+        const isDarkTheme = ref(props.isDark)
+
+        provide('theme', isDarkTheme)
+
+        watch(
+            () => props.isDark,
+            (isDark: boolean) => {
+                isDarkTheme.value = isDark
+                document.documentElement.setAttribute(
+                    'data-theme',
+                    getThemeModeAttr(isDark)
+                ) // sets the dl data-theme attr
+            }
+        )
+    },
     data() {
         return {
             uuid: `dl-theme-provider-${v4()}`
         }
-    },
-    watch: {
-        isDark(colorMode: boolean) {
-            document.documentElement.setAttribute(
-                'data-theme',
-                getThemeModeAttr(colorMode)
-            ) // sets the dl data-theme attr
-        }
-    },
-    created() {
-        const mode = getThemeModeAttr(this.isDark)
-        document.documentElement.setAttribute('data-theme', mode)
     }
 })
 </script>

package/src/components/DlToastMessage/api/useToast.ts

@@ -0,0 +1,23 @@
+import toastComponent from '../components/ToastComponent.vue'
+import { createComponent } from '../utils/render'
+
+export const useToast = (globalProps = {}) => {
+    return {
+        open(options: Object | string) {
+            let message = null
+            if (typeof options === 'string') message = options
+
+            const defaultProps = {
+                message
+            }
+
+            const propsData = Object.assign(
+                {},
+                defaultProps,
+                globalProps,
+                options
+            )
+            createComponent(toastComponent, propsData, document.body)
+        }
+    }
+}

package/src/components/DlToastMessage/components/ToastComponent.vue

@@ -0,0 +1,279 @@
+<template>
+    <transition
+        :enter-active-class="transition.enter"
+        :leave-active-class="transition.leave"
+    >
+        <div
+            v-show="isActive"
+            ref="root"
+            class="v-toast__item"
+            :class="[
+                `v-toast__item--${type}`,
+                `v-toast__item--${position}`,
+                classItem
+            ]"
+        >
+            <dl-alert
+                :type="type"
+                :closable="closable"
+                @update:model-value="(val) => closeToast(val)"
+            >
+                <span
+                    class="v-toast__text"
+                    data-test="message-text"
+                />
+            </dl-alert>
+        </div>
+    </transition>
+</template>
+
+<script lang="ts">
+import {
+    defineComponent,
+    ref,
+    onBeforeMount,
+    computed,
+    onMounted
+} from 'vue-demi'
+import DlAlert from '../../DlAlert.vue'
+import { Positions, Types } from '../utils/config'
+import { removeElement } from '../utils/render'
+import { Animation } from '../types'
+
+export default defineComponent({
+    name: 'ToastComponent',
+    components: { DlAlert },
+    props: {
+        message: {
+            type: String,
+            required: true
+        },
+        type: {
+            type: String,
+            default: 'success',
+            validator(value: string): boolean {
+                return Object.values(Types as unknown).includes(value)
+            }
+        },
+        classItem: {
+            type: String,
+            default: ''
+        },
+        duration: {
+            type: Number,
+            default: 10
+        },
+        position: {
+            type: String,
+            default: Positions.bottom,
+            validator(value: string): boolean {
+                return Object.values(Positions as unknown).includes(value)
+            }
+        },
+        closable: {
+            type: Boolean,
+            default: true
+        }
+    },
+    setup(props: any) {
+        const { position, duration, message } = props
+        const root = ref(null)
+        let parentTop: HTMLElement = null
+        let parentBottom: HTMLElement = null
+        const toastParentPosition = ref(null)
+        const isActive = ref(false)
+        function closeToastMessage(): void {
+            isActive.value = false
+            setTimeout(() => removeElement(root.value), 200)
+        }
+        onBeforeMount(() => {
+            setupContainer()
+        })
+        function setupContainer(): void {
+            parentTop = document.querySelector('.v-toast.v-toast--top')
+            parentBottom = document.querySelector('.v-toast.v-toast--bottom')
+            if (parentTop && parentBottom) return
+            if (!parentTop) {
+                parentTop = document.createElement('div')
+                parentTop.className = 'v-toast v-toast--top'
+            }
+            if (!parentBottom) {
+                parentBottom = document.createElement('div')
+                parentBottom.className = 'v-toast v-toast--bottom'
+            }
+            const container = document.body
+            container.appendChild(parentTop)
+            container.appendChild(parentBottom)
+        }
+
+        const correctParent = computed(() => {
+            switch (position) {
+                case Positions.top:
+                case Positions.top_right:
+                case Positions.top_left:
+                    toastParentPosition.value = 'top'
+                    return parentTop
+                case Positions.bottom:
+                case Positions.bottom_right:
+                case Positions.bottom_left:
+                    toastParentPosition.value = 'bottom'
+                    return parentBottom
+            }
+        })
+
+        const transition = computed((): Animation => {
+            switch (position) {
+                case Positions.top:
+                case Positions.top_right:
+                case Positions.top_left:
+                    return {
+                        enter: 'v-toast--fade-in-down',
+                        leave: 'v-toast--fade-out'
+                    }
+                case Positions.bottom:
+                case Positions.bottom_right:
+                case Positions.bottom_left:
+                    return {
+                        enter: 'v-toast--fade-in-up',
+                        leave: 'v-toast--fade-out'
+                    }
+            }
+        })
+
+        onMounted(() => {
+            showNotice()
+        })
+
+        function showNotice(): void {
+            const parent = correctParent.value
+            const container = root.value.closest('.v-toast--pending')
+            root.value.querySelector('.v-toast__text').innerHTML = message
+            parent.insertAdjacentElement('afterbegin', root.value)
+            container?.remove()
+            isActive.value = true
+            if (duration) {
+                setTimeout(() => {
+                    closeToastMessage()
+                }, duration * 1000)
+            }
+        }
+        function closeToast(val: boolean) {
+            if (!val) removeElement(root.value)
+        }
+
+        return {
+            root,
+            transition,
+            isActive,
+            closeToast,
+            correctParent
+        }
+    }
+})
+</script>
+
+<style lang="scss">
+.v-toast {
+    position: fixed;
+    display: flex;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    z-index: 1052;
+    pointer-events: none;
+    &__text {
+        min-width: 300px;
+        max-width: 800px;
+    }
+    &__item {
+        display: inline-flex;
+        align-items: center;
+        pointer-events: auto;
+        margin-bottom: 5px;
+        margin-top: 5px;
+        cursor: pointer;
+        animation-duration: 150ms;
+        &.v-toast__item--top,
+        &.v-toast__item--bottom {
+            align-self: center;
+        }
+
+        &.v-toast__item--top-right,
+        &.v-toast__item--bottom-right {
+            align-self: flex-end;
+        }
+
+        &.v-toast__item--top-left,
+        &.v-toast__item--bottom-left {
+            align-self: flex-start;
+        }
+    }
+
+    &.v-toast--top {
+        flex-direction: column;
+    }
+
+    &.v-toast--bottom {
+        flex-direction: column-reverse;
+    }
+}
+
+@keyframes fadeOut {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+.v-toast--fade-out {
+    animation-name: fadeOut;
+}
+
+@keyframes fadeInDown {
+    from {
+        opacity: 0;
+        transform: translate3d(0, -100%, 0);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+.v-toast--fade-in-down {
+    animation-name: fadeInDown;
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translate3d(0, 100%, 0);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+.v-toast--fade-in-up {
+    animation-name: fadeInUp;
+}
+
+/**
+ * Vue Transitions
+ */
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 150ms ease-out;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+</style>

package/src/components/DlToastMessage/index.ts

@@ -0,0 +1,5 @@
+import { useToast } from './api/useToast'
+
+const DlToast = useToast()
+
+export { DlToast }