@dataloop-ai/components 0.13.0

package/src/components/DlPagination/PageNavigation.vue

@@ -0,0 +1,350 @@
+<template>
+    <div class="dl-pagination--page_navigation">
+        <button
+            v-if="boundaryLinks"
+            class="dl-pagination--nav_btn"
+            :disabled="disabled || isFirstPage"
+            :style="cssVars"
+            @click="setPage(min)"
+        >
+            <dl-icon
+                icon="icon-dl-first-page"
+                size="16px"
+            />
+        </button>
+        <button
+            v-if="directionLinks"
+            class="dl-pagination--nav_btn"
+            :disabled="disabled || isFirstPage"
+            :style="cssVars"
+            @click="setPage(value - 1)"
+        >
+            <dl-icon
+                icon="icon-dl-previous-page"
+                size="16px"
+            />
+        </button>
+        <div class="dl-pagination--page_btns_wrapper">
+            <button
+                v-if="boundaryNumbers"
+                class="dl-pagination--page_btn"
+                :style="isActivePage(min) ? activePageCssVars : cssVars"
+                :disabled="disabled"
+                @click="setPage(min)"
+            >
+                {{ min }}
+            </button>
+            <button
+                v-if="ellipsesStart"
+                class="dl-pagination--page_btn"
+                :style="cssVars"
+                :disabled="disabled"
+                @click="setPage(pgFrom - 1)"
+            >
+                ...
+            </button>
+            <template v-if="pages.length > 0">
+                <button
+                    v-for="page in pages"
+                    :key="page"
+                    class="dl-pagination--page_btn"
+                    :class="{ active: isActivePage(page) }"
+                    :style="isActivePage(page) ? activePageCssVars : cssVars"
+                    :disabled="disabled"
+                    @click="setPage(page)"
+                >
+                    {{ page }}
+                </button>
+            </template>
+            <button
+                v-if="ellipsesEnd"
+                class="dl-pagination--page_btn"
+                :style="cssVars"
+                :disabled="disabled"
+                @click="setPage(pgTo + 1)"
+            >
+                ...
+            </button>
+            <button
+                v-if="boundaryNumbers && min !== max"
+                class="dl-pagination--page_btn"
+                :style="isActivePage(max) ? activePageCssVars : cssVars"
+                :disabled="disabled"
+                @click="setPage(max)"
+            >
+                {{ max }}
+            </button>
+        </div>
+        <button
+            v-if="directionLinks"
+            class="dl-pagination--nav_btn"
+            :disabled="disabled || isLastPage"
+            :style="cssVars"
+            @click="setPage(value + 1)"
+        >
+            <dl-icon
+                icon="icon-dl-right-next-page"
+                size="16px"
+            />
+        </button>
+        <button
+            v-if="boundaryLinks"
+            class="dl-pagination--nav_btn"
+            :disabled="disabled || isLastPage"
+            :style="cssVars"
+            @click="setPage(max)"
+        >
+            <dl-icon
+                icon="icon-dl-last-page"
+                size="16px"
+            />
+        </button>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { getColor } from '../../utils'
+import DlIcon from '../DlIcon.vue'
+
+export default defineComponent({
+    name: 'PageNavigation',
+    components: {
+        DlIcon
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+    props: {
+        modelValue: {
+            type: Number,
+            default: 1
+        },
+        min: {
+            type: Number,
+            default: 1,
+            validator: (v: number) => v >= 1
+        },
+        max: {
+            type: Number,
+            required: true
+        },
+        maxPages: {
+            type: Number,
+            default: 0,
+            validator: (v: number) => v >= 0
+        },
+        disabled: Boolean,
+        boundaryNumbers: Boolean,
+        boundaryLinks: Boolean,
+        directionLinks: Boolean,
+        color: {
+            type: String,
+            default: 'dl-color-bg'
+        },
+        textColor: {
+            type: String,
+            default: 'dl-color-darker'
+        },
+        activeColor: {
+            type: String,
+            default: 'dl-color-secondary'
+        },
+        activeTextColor: {
+            type: String,
+            default: 'dl-color-text-buttons'
+        }
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            value: this.modelValue,
+            pgFrom: this.min,
+            pgTo: this.max,
+            ellipsesStart: false,
+            ellipsesEnd: false
+        }
+    },
+    computed: {
+        isFirstPage(): boolean {
+            return this.value === this.min
+        },
+        isLastPage(): boolean {
+            return this.value === this.max
+        },
+        btnMinWidth(): string {
+            return `${Math.max(2, String(this.max).length)}em`
+        },
+        cssVars(): Record<string, any> {
+            return {
+                '--dl-page-bg-color': getColor(this.color, 'dl-color-bg'),
+                '--dl-page-text-color': getColor(
+                    this.textColor,
+                    'dl-color-darker'
+                ),
+                '--dl-btn-min-width': this.btnMinWidth
+            }
+        },
+        activePageCssVars(): Record<string, any> {
+            return {
+                '--dl-page-bg-color': getColor(
+                    this.activeColor,
+                    'dl-color-secondary'
+                ),
+                '--dl-page-text-color': getColor(
+                    this.activeTextColor,
+                    'dl-color-text-buttons'
+                ),
+                '--dl-btn-min-width': this.btnMinWidth
+            }
+        },
+        pages(): number[] {
+            const pages: number[] = []
+
+            for (let i = this.pgFrom; i <= this.pgTo; i++) {
+                pages.push(i)
+            }
+
+            return pages
+        }
+    },
+    watch: {
+        value() {
+            this.updateState()
+        },
+        max() {
+            this.updateState()
+        },
+        modelValue() {
+            this.value = this.modelValue
+        }
+    },
+    beforeMount() {
+        this.updateState()
+    },
+    methods: {
+        isActivePage(page: number): boolean {
+            return page === this.value
+        },
+        set(value: number) {
+            this.value = value
+        },
+        setByOffset(offset: number) {
+            this.value = this.value + offset
+        },
+        setPage(value: number) {
+            this.set(value)
+            this.$emit('update:modelValue', value)
+        },
+        updateState() {
+            this.ellipsesStart = false
+            this.ellipsesEnd = false
+
+            let maxPages = Math.max(
+                this.maxPages,
+                3 + (this.boundaryNumbers ? 2 : 0)
+            )
+
+            this.pgFrom = this.boundaryNumbers ? this.min + 1 : this.min
+            this.pgTo = this.boundaryNumbers ? this.max - 1 : this.max
+
+            if (this.maxPages && maxPages < this.max - this.min + 1) {
+                maxPages = 1 + Math.floor(maxPages / 2) * 2
+
+                this.pgFrom = Math.max(
+                    this.min,
+                    Math.min(
+                        this.max - maxPages + 1,
+                        this.value - Math.floor(maxPages / 2)
+                    )
+                )
+
+                this.pgTo = Math.min(this.max, this.pgFrom + maxPages - 1)
+
+                if (this.boundaryNumbers) {
+                    this.pgFrom += 1
+                    this.pgTo -= 1
+                }
+
+                if (this.pgFrom > this.min + (this.boundaryNumbers ? 1 : 0)) {
+                    this.pgFrom += 1
+                    this.ellipsesStart = true
+                }
+
+                if (this.pgTo < this.max - (this.boundaryNumbers ? 1 : 0)) {
+                    this.pgTo -= 1
+                    this.ellipsesEnd = true
+                }
+            }
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-pagination {
+    &--page_navigation {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 16px;
+    }
+
+    &--page_btns_wrapper {
+        display: flex;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    &--page_btn {
+        text-align: center;
+        width: 20px;
+        height: 20px;
+        font-size: 12px;
+        line-height: 14px;
+        font-weight: 400;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    &--page_btn,
+    &--nav_btn {
+        min-width: var(--dl-btn-min-width);
+        padding: 0;
+        cursor: pointer;
+        border: none;
+        border-radius: 2px;
+        color: var(--dl-page-text-color);
+        background-color: var(--dl-page-bg-color);
+
+        &:active:not(:disabled) {
+            background-color: var(--dl-color-secondary);
+            color: var(--dl-color-text-buttons);
+
+            ::v-deep .dl-icon {
+                color: var(--dl-color-text-buttons);
+            }
+        }
+
+        &:disabled {
+            color: var(--dl-color-disabled);
+            cursor: default;
+
+            ::v-deep .dl-icon {
+                color: var(--dl-color-disabled);
+            }
+        }
+
+        &:hover:not(:disabled):not(.active) {
+            background-color: var(--dl-color-hover);
+            color: var(--dl-color-text-buttons);
+
+            ::v-deep .dl-icon {
+                color: var(--dl-color-text-buttons);
+            }
+        }
+    }
+}
+</style>

package/src/components/DlPagination/PaginationLegend.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="dl-pagination--legend">
+        <span>Showing {{ from }}-{{ to
+        }}<span v-if="total"> of {{ total }} {{ itemsName }} </span></span>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'PaginationLegend',
+    props: {
+        from: {
+            type: Number,
+            required: true
+        },
+        to: {
+            type: Number,
+            required: true
+        },
+        total: {
+            type: Number,
+            default: null
+        },
+        itemsName: {
+            type: String,
+            default: 'rows'
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-pagination--legend {
+    justify-content: flex-end;
+    display: flex;
+    color: var(--dl-color-lighter);
+    margin-left: 16px;
+}
+</style>

package/src/components/DlPagination/QuickNavigation.vue

@@ -0,0 +1,146 @@
+<template>
+    <div class="dl-pagination--quick_navigation">
+        <dl-typography> Go to page </dl-typography>
+        <input
+            v-model="inputValue"
+            type="number"
+            class="dl-pagination--navigation_input"
+            :max="max"
+            :min="min"
+            :disabled="disabled"
+            @keydown="handleKeyDown"
+            @keyup="handleKeyUp"
+        >
+        <dl-button
+            size="s"
+            flat
+            class="dl-pagination--quick_nav_button"
+            :disabled="disabled"
+            @click="handleNavigation"
+        >
+            Go
+        </dl-button>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import DlTypography from '../DlTypography.vue'
+import { DlButton } from '../DlButton'
+import { stopAndPrevent } from '../../utils'
+import { admissibleKeys } from '../../utils/nav-keys-constants'
+
+export default defineComponent({
+    name: 'QuickNavigation',
+    components: {
+        DlTypography,
+        DlButton
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+    props: {
+        modelValue: { type: Number, required: true },
+        min: { type: Number, required: true },
+        max: { type: Number, required: true },
+        disabled: Boolean
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            inputValue: this.modelValue.toString(),
+            lastValue: ''
+        }
+    },
+    watch: {
+        modelValue() {
+            this.inputValue = this.modelValue.toString()
+        }
+    },
+    methods: {
+        handleNavigation() {
+            const numericValue = Number(this.inputValue)
+
+            if (numericValue < this.min) {
+                this.inputValue = this.min.toString()
+            }
+
+            if (numericValue > this.max) {
+                this.inputValue = this.max.toString()
+            }
+
+            this.$emit('update:modelValue', Number(this.inputValue))
+        },
+        handleKeyDown(e: KeyboardEvent) {
+            if (
+                (Number.isNaN(Number(e.key)) &&
+                    !admissibleKeys.includes(e.key)) ||
+                e.key === ' '
+            ) {
+                stopAndPrevent(e)
+            }
+        },
+        handleKeyUp(e: KeyboardEvent) {
+            if (e.key === 'Enter' || e.key === ' ') {
+                this.handleNavigation()
+            }
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-pagination {
+    &--quick_navigation {
+        display: flex;
+        align-items: center;
+        color: var(--dl-color-darker);
+        padding-right: 16px;
+        & p {
+            padding-right: 4px;
+        }
+    }
+    &--navigation_input {
+        border: 1px solid var(--dl-color-separator);
+        border-radius: 2px;
+        color: var(--dl-color-darker);
+        outline: none;
+        background: none;
+        padding-top: 3px;
+        padding-bottom: 3px;
+        padding-left: 5px;
+        padding-right: 5px;
+        font-size: 10px;
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+        &:hover {
+            border-color: var(--dl-color-hover);
+        }
+
+        &:focus {
+            border-color: var(--dl-color-secondary);
+        }
+
+        &:disabled {
+            border-color: var(--dl-color-disabled);
+            color: var(--dl-color-disabled);
+            cursor: not-allowed;
+
+            &:hover {
+                border-color: var(--dl-color-disabled);
+            }
+        }
+        max-width: 30px; // 40px - 10px (paddings)
+        -moz-appearance: textfield;
+    }
+}
+
+::v-deep .dl-button {
+    padding: 4px 5px;
+    text-transform: uppercase;
+}
+</style>

package/src/components/DlPagination/RowsSelector.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="dl-pagination--rows_selector">
+        <span class="dl-pagination--rows_per_page_label">{{ itemsName }} per page:</span>
+        <dl-select
+            size="s"
+            :options="options"
+            :disabled="disabled"
+            :fit="false"
+            width="min-content"
+            align-right
+            disable-dropdown-icon-padding
+            without-borders
+            :model-value="modelValue"
+            @update:model-value="setSelectedItem"
+        />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import { DlSelect } from '../DlSelect'
+
+export default defineComponent({
+    name: 'RowsSelector',
+    components: {
+        DlSelect
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+    props: {
+        options: {
+            type: Array as PropType<number[]>,
+            required: true
+        },
+        modelValue: {
+            type: Number,
+            required: true
+        },
+        itemsName: {
+            type: String,
+            default: 'rows'
+        },
+        disabled: Boolean
+    },
+    emits: ['update:modelValue'],
+    methods: {
+        setSelectedItem(val: number) {
+            this.$emit('update:modelValue', val)
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.dl-pagination {
+    &--rows_selector {
+        width: 15%;
+        display: flex;
+        align-items: center;
+        color: var(--dl-color-darker);
+        padding-right: 2px;
+    }
+
+    &--rows_per_page_label {
+        white-space: nowrap;
+        padding-right: 4px;
+        &::first-letter {
+            text-transform: uppercase;
+        }
+    }
+}
+</style>

package/src/components/DlPagination/index.ts

@@ -0,0 +1,3 @@
+import DlPagination from './DlPagination.vue'
+
+export { DlPagination }