@dataloop-ai/components 0.13.0

package/src/components/DlOptionGroup/DlOptionGroup.vue

@@ -0,0 +1,201 @@
+<template>
+    <div
+        :id="uuid"
+        :class="{ 'option-group-wrapper': true, column: !inline }"
+        :style="cssVars"
+    >
+        <component
+            :is="wrappers[isInMenu ? 'menuItem' : 'label']"
+            v-for="(option, index) in options"
+            :key="option.value"
+            class="option"
+            :left-label="leftLabel"
+            :for="individualProps[index].id"
+            data-test="item-wrapper"
+            :class="{ disabled: individualProps[index].disabled || disabled }"
+        >
+            <div
+                :for="individualProps[index].id"
+                style="display: inline-flex; gap: 5px"
+            >
+                <span>{{ option.label }}</span>
+                <span
+                    v-if="!!option.tooltip && !!option.tooltip.length"
+                    style="display: flex; align-items: center"
+                >
+                    <dl-icon
+                        icon="icon-dl-info"
+                        class="tooltip-icon"
+                        size="12px"
+                    />
+                    <dl-tooltip>
+                        {{ option.tooltip }}
+                    </dl-tooltip>
+                </span>
+            </div>
+            <component
+                :is="components[type]"
+                :id="individualProps[index].id"
+                v-bind="individualProps[index]"
+                :ref="`control-item-${index}`"
+                data-test="item-control-element"
+                :model-value="modelValue"
+                class="control-element"
+                :color="individualProps[index].color || color"
+                :disabled="individualProps[index].disabled || disabled"
+                :label="null"
+                @update:model-value="handleUpdate"
+            />
+        </component>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import { components, typeValidator, optionsValidator, wrappers } from './utils'
+import {
+    OptionGroupOptions,
+    OptionProps,
+    SelectedValue
+} from './OptionGroup.types'
+import { loggerFactory } from '../../utils'
+import { v4 } from 'uuid'
+import DlIcon from '../DlIcon.vue'
+import DlTooltip from '../DlTooltip.vue'
+
+export default defineComponent({
+    name: 'DlOptionGroup',
+    components: {
+        DlIcon,
+        DlTooltip
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        color: { type: String, default: 'dl-color-secondary' },
+        disabled: { type: Boolean, default: false },
+        inline: { type: Boolean, default: false },
+        leftLabel: { type: Boolean, default: false },
+        maxWidth: { type: String, default: '100%' },
+        options: {
+            type: Array as PropType<OptionGroupOptions>,
+            required: true,
+            validator: optionsValidator
+        },
+        type: { type: String, default: 'radio', validator: typeValidator },
+        modelValue: { type: [Array, String, Number, Boolean], required: true }
+    },
+    data() {
+        const logger = loggerFactory('DlOptionGroup')
+        return {
+            uuid: `dl-option-group-${v4()}`,
+            logger,
+            components,
+            wrappers
+        }
+    },
+    computed: {
+        individualProps(): (OptionProps & { id: string })[] {
+            return this.options.map((option) => {
+                const { value, label, ...rest } = option
+                return {
+                    value,
+                    id: `${v4()}`,
+                    ...rest
+                }
+            })
+        },
+        isInMenu(): boolean {
+            return (
+                this.$parent?.$parent?.$options.name === 'DlMenu' ||
+                this.$parent?.$options.name === 'DlList'
+            )
+        },
+        cssVars(): Record<string, string> {
+            return {
+                '--option-flex-direction': this.leftLabel
+                    ? 'row'
+                    : 'row-reverse',
+                '--option-justify-content':
+                    this.leftLabel && !this.inline
+                        ? 'space-between'
+                        : 'flex-end',
+                '--option-group-width':
+                    this.leftLabel && !this.inline ? '100%' : 'auto',
+                '--option-group-max-width': this.maxWidth,
+                '--control-element-padding-left': this.leftLabel
+                    ? '10px'
+                    : this.inline
+                    ? '12px'
+                    : '0px',
+                '--control-element-padding-right': this.leftLabel
+                    ? '0px'
+                    : '10px'
+            }
+        }
+    },
+    watch: {
+        $props: {
+            immediate: true,
+            handler() {
+                this.validateProps()
+            }
+        }
+    },
+    methods: {
+        validateProps() {
+            if (this.type !== 'radio' && !Array.isArray(this.modelValue)) {
+                this.logger.error(
+                    'Option group with multiple choices should have an array of options as modelValue.'
+                )
+            }
+        },
+        handleUpdate(newValue: SelectedValue, e: Event) {
+            this.$emit('update:model-value', newValue, e)
+        }
+    },
+    template: 'dl-option-group'
+})
+</script>
+
+<style scoped lang="scss">
+.tooltip-icon {
+    color: var(--dl-color-medium);
+    display: flex !important;
+    align-self: center;
+}
+.option-group-wrapper {
+    display: inline-flex;
+    width: var(--option-group-width);
+    max-width: var(--option-group-max-width);
+}
+.option-group-wrapper.column {
+    flex-direction: column;
+}
+
+.option {
+    display: flex;
+    align-items: center;
+    flex-direction: var(--option-flex-direction);
+    justify-content: var(--option-justify-content);
+    font-size: var(--dl-font-size-body);
+    user-select: none;
+    height: 24px;
+    color: var(--dl-color-darker);
+}
+
+.disabled {
+    cursor: not-allowed;
+    & label {
+        cursor: not-allowed;
+    }
+    color: var(--dl-color-disabled);
+}
+
+.control-element {
+    padding-left: var(--control-element-padding-left);
+    padding-right: var(--control-element-padding-right);
+}
+</style>

package/src/components/DlOptionGroup/MenuItemWrapper.vue

@@ -0,0 +1,48 @@
+<template>
+    <dl-list-item
+        as="label"
+        clickable
+        @click="emitClick"
+    >
+        <dl-item-section
+            class="menu-item-wrapper-section"
+            :class="{ 'left-label': leftLabel }"
+        >
+            <slot />
+        </dl-item-section>
+    </dl-list-item>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlListItem } from '../DlListItem'
+import DlItemSection from '../DlItemSection.vue'
+
+export default defineComponent({
+    name: 'DlMenuItemWrapper',
+    components: { DlListItem, DlItemSection },
+    props: {
+        leftLabel: Boolean
+    },
+    emits: ['click'],
+    methods: {
+        emitClick(e: Event) {
+            this.$emit('click', e)
+        }
+    }
+})
+</script>
+
+<style scoped>
+.menu-item-wrapper-section {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-start;
+    align-items: center;
+}
+
+.left-label {
+    justify-content: space-between;
+    flex-direction: row;
+}
+</style>

package/src/components/DlOptionGroup/OptionGroup.types.ts

@@ -0,0 +1,36 @@
+export type SelectedValue = number | string | boolean | null
+
+interface GenericOption {
+    label: string
+    value: SelectedValue
+    disabled?: boolean
+    color?: string
+    tooltip?: string
+}
+
+export interface RadioOption extends GenericOption {
+    tabindex?: number | string
+}
+
+export interface CheckboxOption extends GenericOption {
+    tabindex?: number | string
+    'toggle-indeterminate'?: boolean
+    'true-value'?: any
+    'false-value'?: any
+}
+
+export interface ToggleOption extends GenericOption {
+    icon?: string
+}
+
+export type OptionGroupOptions = (RadioOption | CheckboxOption | ToggleOption)[]
+
+export interface OptionProps
+    extends Partial<RadioOption>,
+        Partial<CheckboxOption>,
+        Partial<ToggleOption> {
+    value?: SelectedValue
+    class?: string
+    rightLabel?: string
+    leftLabel?: string
+}

package/src/components/DlOptionGroup/SimpleWrapper.vue

@@ -0,0 +1,28 @@
+<template>
+    <label
+        class="simple-option-group-item"
+        @click="emitClick"
+    >
+        <slot />
+    </label>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlSimpleWrapper',
+    emits: ['click'],
+    methods: {
+        emitClick(e: Event) {
+            this.$emit('click', e)
+        }
+    }
+})
+</script>
+
+<style scoped>
+.simple-option-group-item {
+    white-space: nowrap;
+}
+</style>

package/src/components/DlOptionGroup/index.ts

@@ -0,0 +1,4 @@
+import DlOptionGroup from './DlOptionGroup.vue'
+export { DlOptionGroup }
+export * from './utils'
+export * from './OptionGroup.types'

package/src/components/DlOptionGroup/utils.ts

@@ -0,0 +1,40 @@
+import DlRadio from '../DlRadio.vue'
+import DlSwitch from '../DlSwitch.vue'
+import DlCheckbox from '../DlCheckbox.vue'
+
+import { isVue3, shallowRef } from 'vue-demi'
+import { OptionGroupOptions } from './OptionGroup.types'
+import MenuItemWrapper from './MenuItemWrapper.vue'
+import SimpleWrapper from './SimpleWrapper.vue'
+
+export const components = isVue3
+    ? {
+          radio: shallowRef(DlRadio),
+          checkbox: shallowRef(DlCheckbox),
+          switch: shallowRef(DlSwitch)
+          // toggle: shallowRef(DlToggle),
+      }
+    : {
+          radio: () => import('../DlRadio.vue').then((d) => d.default),
+          checkbox: () => import('../DlCheckbox.vue').then((d) => d.default),
+          switch: () => import('../DlSwitch.vue').then((d) => d.default)
+          // toggle: () => import('../DlToggle.vue').then(d => d.default),
+      }
+export const componentsType = Object.keys(components)
+
+export const typeValidator = (type: string) => componentsType.includes(type)
+
+export const optionsValidator = (opts: OptionGroupOptions) => {
+    return opts.every((opt) => 'value' in opt && 'label' in opt)
+}
+
+export const wrappers = isVue3
+    ? {
+          menuItem: shallowRef(MenuItemWrapper),
+          label: shallowRef(SimpleWrapper)
+      }
+    : {
+          menuItem: () =>
+              import('./MenuItemWrapper.vue').then((d) => d.default),
+          label: () => import('./SimpleWrapper.vue').then((d) => d.default)
+      }

package/src/components/DlPagination/DlPagination.vue

@@ -0,0 +1,184 @@
+<template>
+    <div
+        :id="uuid"
+        class="dl-pagination"
+    >
+        <div class="dl-pagination--container">
+            <rows-selector
+                v-if="withRowsPerPage"
+                v-model="rowsPerPageState"
+                :options="rowsPerPageOptions"
+                :items-name="itemsName"
+                :disabled="disabled"
+            />
+            <div class="dl-pagination--navigation">
+                <page-navigation
+                    :model-value="value"
+                    :min="min"
+                    :max="max"
+                    :max-pages="maxPages"
+                    :disabled="disabled"
+                    :boundary-numbers="boundaryNumbers"
+                    :boundary-links="boundaryLinks"
+                    :direction-links="directionLinks"
+                    :color="color"
+                    :active-color="activeColor"
+                    :text-color="textColor"
+                    :active-text-color="activeTextColor"
+                    @update:modelValue="setValue"
+                />
+                <quick-navigation
+                    v-if="withQuickNavigation"
+                    :model-value="value"
+                    :max="max"
+                    :min="min"
+                    :disabled="disabled"
+                    @update:modelValue="setValue"
+                />
+            </div>
+            <pagination-legend
+                v-if="withLegend"
+                :from="rowFrom"
+                :to="rowTo"
+                :total="totalItems"
+                :items-name="itemsName"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import RowsSelector from './RowsSelector.vue'
+import PageNavigation from './PageNavigation.vue'
+import QuickNavigation from './QuickNavigation.vue'
+import PaginationLegend from './PaginationLegend.vue'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    name: 'DlPagination',
+    components: {
+        RowsSelector,
+        PageNavigation,
+        QuickNavigation,
+        PaginationLegend
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+    props: {
+        modelValue: {
+            type: Number,
+            default: 1
+        },
+        min: {
+            type: Number,
+            default: 1
+        },
+        maxPages: {
+            type: Number,
+            default: 0,
+            validator: (v: number) => v >= 0
+        },
+        rowsPerPage: {
+            type: Number,
+            default: 10
+        },
+        rowsPerPageOptions: {
+            type: Array as PropType<number[]>,
+            default: () => [10, 25, 50, 75, 100]
+        },
+        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'
+        },
+        totalItems: {
+            type: Number,
+            required: true
+        },
+        itemsName: {
+            type: String,
+            default: null
+        },
+        withQuickNavigation: Boolean,
+        withRowsPerPage: Boolean,
+        withLegend: Boolean
+    },
+    emits: ['update:modelValue', 'update:rowsPerPage'],
+    data() {
+        return {
+            uuid: `dl-pagination-${v4()}`,
+            value: this.modelValue,
+            rowsPerPageState: this.rowsPerPage
+        }
+    },
+    computed: {
+        rowFrom(): number {
+            return 1 + this.rowsPerPageState * (this.value - 1)
+        },
+        rowTo(): number {
+            const to = this.rowsPerPageState * this.value
+            return to > this.totalItems ? this.totalItems : to
+        },
+        max(): number {
+            return Math.ceil(this.totalItems / this.rowsPerPageState)
+        }
+    },
+    watch: {
+        modelValue(val: number) {
+            this.value = this.modelValue
+        },
+        rowsPerPageState(newVal: number) {
+            this.setValue(this.min)
+            this.$emit('update:rowsPerPage', newVal)
+        },
+        rowsPerPage(newVal: number) {
+            this.rowsPerPageState = newVal
+        }
+    },
+
+    methods: {
+        setValue(value: number) {
+            this.value = value
+            this.$emit('update:modelValue', value)
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.dl-pagination {
+    width: 100%;
+    height: 40px;
+    font-size: 12px;
+    font-weight: 400;
+
+    &--container {
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &--navigation {
+        display: flex;
+    }
+}
+</style>