@dataloop-ai/components 0.13.0

package/src/components/DlDateTimeRange/DlDateTimeRange.vue

@@ -0,0 +1,468 @@
+<template>
+    <div
+        :id="uuid"
+        class="dl-date-time-range"
+    >
+        <dl-date-input
+            :text="dateInputText"
+            :input-style="dateInputStyle"
+            :disabled="disabled"
+        >
+            <dl-menu
+                ref="dateTimeRangeMenu"
+                anchor="bottom middle"
+                self="top middle"
+                :offset="[0, 5]"
+                :disabled="disabled"
+            >
+                <div class="dl-date-time-range--card">
+                    <div
+                        v-if="mode === 'multi'"
+                        class="dl-date-time-range--card_sidebar"
+                    >
+                        <dl-card-sidebar
+                            v-if="typeState === 'day'"
+                            :options="sidebarDayOptions"
+                            :current-option="currentSidebarOption"
+                            @click="handleDayTypeOptionClick"
+                        />
+                        <dl-card-sidebar
+                            v-else
+                            :options="sidebarMonthOptions"
+                            :current-option="currentSidebarOption"
+                            @click="handleMonthTypeOptionClick"
+                        />
+                    </div>
+                    <div
+                        class="dl-date-time-range--card_content"
+                        :style="cardContentStyles"
+                    >
+                        <dl-date-picker
+                            :model-value="dateInterval"
+                            :type="typeState"
+                            :available-range="availableRange"
+                            :disabled="isInputDisabled"
+                            :normalize-calendars="normalizeCalendars"
+                            @update:modelValue="updateDateIntervalWithAutoClose"
+                        />
+                        <dl-time-picker
+                            v-if="showTime && typeState === 'day'"
+                            :disabled="isInputDisabled"
+                            :model-value="dateInterval"
+                            @update:modelValue="updateDateInterval"
+                        />
+                    </div>
+                </div>
+            </dl-menu>
+        </dl-date-input>
+    </div>
+</template>
+<script lang="ts">
+import { DlTimePicker } from '../DlTimePicker'
+import { DateInterval } from '../DlDatePicker/types'
+import DlCardSidebar from './DlCardSidebar.vue'
+import {
+    DayTypeOption,
+    DAY_SIDEBAR_OPTION,
+    MonthTypeOption,
+    MONTH_SIDEBAR_OPTION
+} from './types'
+import { CustomDate } from '../DlDatePicker/classes/CustomDate'
+import { DlDatePicker } from '../DlDatePicker'
+import { CalendarDate } from '../DlDatePicker/classes/CalendarDate'
+import DlDateInput from './DlDateInput.vue'
+import { DlMenu } from '../DlMenu'
+import { defineComponent, PropType } from 'vue-demi'
+import { isInRange } from '../DlDatePicker/isInRange'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    components: {
+        DlCardSidebar,
+        DlDatePicker,
+        DlTimePicker,
+        DlDateInput,
+        DlMenu
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+    props: {
+        modelValue: {
+            type: Object as PropType<DateInterval>,
+            default: () => {
+                const date = new Date()
+                return {
+                    from: date,
+                    to: date
+                }
+            }
+        },
+        showTime: Boolean,
+        type: {
+            type: String as PropType<'day' | 'month'>,
+            default: 'day'
+        },
+        mode: {
+            type: String as PropType<'single' | 'multi'>,
+            default: 'single'
+        },
+        datePickerCardWidth: {
+            type: String,
+            default: '590px'
+        },
+        availableRange: {
+            type: Object as PropType<Partial<DateInterval> | null>,
+            default: null
+        },
+        withSelectedOption: Boolean,
+        disabled: Boolean,
+        autoClose: Boolean
+    },
+    emits: ['update:modelValue', 'set-type', 'change'],
+    data(): {
+        uuid: string
+        dateInterval: DateInterval
+        typeState: 'day' | 'month'
+        isOpen: boolean
+        isInputDisabled: boolean
+        dayTypeOptions: DayTypeOption[]
+        monthTypeOptions: MonthTypeOption[]
+        currentSidebarOption: DAY_SIDEBAR_OPTION | MONTH_SIDEBAR_OPTION
+    } {
+        const today = CustomDate.startOf('day').toDate()
+        const yesterday = CustomDate.subtract(1, 'day').startOf('day').toDate()
+        const thisMonth = CustomDate.startOf('month').toDate()
+        const lastMonth = CustomDate.subtract(1, 'months')
+            .startOf('month')
+            .toDate()
+
+        return {
+            uuid: `dl-date-time-range-${v4()}`,
+            dateInterval: {
+                from: this.modelValue.from,
+                to: this.modelValue.to
+            },
+            typeState: this.type,
+            isOpen: false,
+            isInputDisabled: false,
+            dayTypeOptions: [
+                {
+                    title: 'today',
+                    key: DAY_SIDEBAR_OPTION.today,
+                    value: { from: today, to: today }
+                },
+                {
+                    title: 'yesterday',
+                    key: DAY_SIDEBAR_OPTION.yesterday,
+                    value: { from: yesterday, to: yesterday }
+                },
+                {
+                    title: 'last 7 days',
+                    key: DAY_SIDEBAR_OPTION.last_7_days,
+                    value: {
+                        from: CustomDate.subtract(7, 'day').toDate(),
+                        to: today
+                    }
+                },
+                {
+                    title: 'last 14 days',
+                    key: DAY_SIDEBAR_OPTION.last_14_days,
+                    value: {
+                        from: CustomDate.subtract(14, 'day').toDate(),
+                        to: today
+                    }
+                },
+                {
+                    title: 'last 30 days',
+                    key: DAY_SIDEBAR_OPTION.last_month,
+                    value: {
+                        from: CustomDate.subtract(1, 'months')
+                            .startOf('day')
+                            .toDate(),
+                        to: today
+                    }
+                },
+                { title: 'custom by day', key: DAY_SIDEBAR_OPTION.custom },
+                {
+                    title: 'custom by month',
+                    key: DAY_SIDEBAR_OPTION.custom_by_month,
+                    value: {
+                        from: new CalendarDate(this.modelValue.from)
+                            .startOf('month')
+                            .toDate(),
+                        to: new CalendarDate(this.modelValue.from)
+                            .startOf('month')
+                            .toDate()
+                    }
+                }
+            ],
+            monthTypeOptions: [
+                {
+                    title: 'this month',
+                    key: MONTH_SIDEBAR_OPTION.this_month,
+                    value: { from: thisMonth, to: thisMonth }
+                },
+                {
+                    title: 'last month',
+                    key: MONTH_SIDEBAR_OPTION.last_month,
+                    value: { from: lastMonth, to: lastMonth }
+                },
+                {
+                    title: 'last 3 months',
+                    key: MONTH_SIDEBAR_OPTION.last_3_months,
+                    value: {
+                        from: CustomDate.subtract(3, 'months')
+                            .startOf('month')
+                            .toDate(),
+                        to: today
+                    }
+                },
+                {
+                    title: 'last 6 months',
+                    key: MONTH_SIDEBAR_OPTION.last_6_months,
+                    value: {
+                        from: CustomDate.subtract(6, 'months')
+                            .startOf('month')
+                            .toDate(),
+                        to: today
+                    }
+                },
+                {
+                    title: 'last 12 months',
+                    key: MONTH_SIDEBAR_OPTION.last_12_months,
+                    value: {
+                        from: CustomDate.subtract(1, 'year')
+                            .startOf('month')
+                            .toDate(),
+                        to: today
+                    }
+                },
+                { title: 'custom by month', key: MONTH_SIDEBAR_OPTION.custom },
+                {
+                    title: 'custom by day',
+                    key: MONTH_SIDEBAR_OPTION.custom_by_day,
+                    value: {
+                        from: new CalendarDate(this.modelValue.from)
+                            .startOf('day')
+                            .toDate(),
+                        to: new CalendarDate(this.modelValue.from)
+                            .startOf('day')
+                            .toDate()
+                    }
+                }
+            ],
+            currentSidebarOption: DAY_SIDEBAR_OPTION.custom
+        }
+    },
+    computed: {
+        sidebarDayOptions(): DayTypeOption[] {
+            return this.dayTypeOptions.map((o) => ({
+                ...o,
+                disabled: !isInRange(this.availableRange, o.value)
+            }))
+        },
+        sidebarMonthOptions(): MonthTypeOption[] {
+            return this.monthTypeOptions.map((o) => ({
+                ...o,
+                disabled: !isInRange(this.availableRange, o.value)
+            }))
+        },
+        dateInputStyle(): Record<string, any> {
+            return { width: `${this.dateInputText.length / 2}em` }
+        },
+        dateInputText(): string {
+            let text = ''
+
+            if (this.typeState === 'month') {
+                if (this.dateInterval.from !== this.dateInterval.to) {
+                    text = `${CustomDate.format(
+                        this.dateInterval.from,
+                        'MMM, YYYY'
+                    )} - ${CustomDate.format(
+                        this.dateInterval.to,
+                        'MMM, YYYY'
+                    )}`
+                } else {
+                    text = CustomDate.format(
+                        this.dateInterval.from,
+                        'MMM, YYYY'
+                    )
+                }
+            } else {
+                if (this.dateInterval.from !== this.dateInterval.to) {
+                    if (this.showTime) {
+                        text = `${CustomDate.format(
+                            this.dateInterval.from,
+                            'MMM D, YYYY, HH:mm'
+                        )} - ${CustomDate.format(
+                            this.dateInterval.to,
+                            'MMM D, YYYY, HH:mm'
+                        )}`
+                    } else {
+                        text = `${CustomDate.format(
+                            this.dateInterval.from,
+                            'MMM D, YYYY'
+                        )} - ${CustomDate.format(
+                            this.dateInterval.to,
+                            'MMM D, YYYY'
+                        )}`
+                    }
+                } else {
+                    if (this.showTime) {
+                        text = CustomDate.format(
+                            this.dateInterval.from,
+                            'MMM D, YYYY, HH:mm'
+                        )
+                    } else {
+                        text = CustomDate.format(
+                            this.dateInterval.from,
+                            'MMM D, YYYY'
+                        )
+                    }
+                }
+            }
+
+            if (this.mode === 'multi' && this.withSelectedOption) {
+                let title = ''
+                if (this.typeState === 'month') {
+                    const option = this.monthTypeOptions.find(
+                        (option) => option.key === this.currentSidebarOption
+                    )
+                    title = option ? option.title : MONTH_SIDEBAR_OPTION.custom
+                } else {
+                    const option = this.dayTypeOptions.find(
+                        (option) => option.key === this.currentSidebarOption
+                    )
+                    title = option ? option.title : DAY_SIDEBAR_OPTION.custom
+                }
+                text = `${title.slice(0, 1).toUpperCase()}${title.slice(
+                    1
+                )}: ${text}`
+            }
+
+            return text
+        },
+        normalizeCalendars(): boolean {
+            return ![
+                DAY_SIDEBAR_OPTION.custom,
+                DAY_SIDEBAR_OPTION.custom_by_month,
+                MONTH_SIDEBAR_OPTION.custom_by_day
+            ].includes(this.currentSidebarOption as any)
+        },
+        cardContentStyles(): Record<string, any> {
+            return {
+                '--card-content-width': this.datePickerCardWidth
+            }
+        }
+    },
+    watch: {
+        type(value: 'day' | 'month') {
+            this.typeState = value
+
+            const date = new CustomDate(this.modelValue.from)
+                .startOf(value)
+                .toDate()
+
+            this.updateDateInterval({
+                from: date,
+                to: date
+            })
+        },
+        mode(value: 'single' | 'multi') {
+            if (value === 'single') {
+                this.currentSidebarOption = DAY_SIDEBAR_OPTION.custom
+                this.isInputDisabled = false
+            }
+        },
+        availableRange: {
+            handler() {
+                this.currentSidebarOption =
+                    this.typeState === 'day'
+                        ? DAY_SIDEBAR_OPTION.custom
+                        : MONTH_SIDEBAR_OPTION.custom
+                this.updateDateInterval({
+                    from: this.modelValue.from,
+                    to: this.modelValue.to
+                })
+            },
+            deep: true
+        }
+    },
+    methods: {
+        handleTypeChange(value: 'day' | 'month') {
+            this.isInputDisabled = false
+            this.currentSidebarOption =
+                value === 'day'
+                    ? DAY_SIDEBAR_OPTION.custom
+                    : MONTH_SIDEBAR_OPTION.custom
+
+            this.typeState = value
+            this.$emit('set-type', value)
+        },
+        updateDateInterval(value: DateInterval) {
+            this.dateInterval = value
+            this.$emit('update:modelValue', value)
+            this.$emit('change', value)
+        },
+        updateDateIntervalWithAutoClose(value: DateInterval) {
+            this.updateDateInterval(value)
+
+            if (this.autoClose) {
+                const dateTimeRangeMenu = this.$refs[
+                    'dateTimeRangeMenu'
+                ] as unknown as {
+                    hide: () => void
+                }
+                dateTimeRangeMenu.hide()
+            }
+        },
+        handleDayTypeOptionClick(option: DayTypeOption) {
+            this.currentSidebarOption = option.key as DAY_SIDEBAR_OPTION
+            this.isInputDisabled = option.key !== DAY_SIDEBAR_OPTION.custom
+
+            if (option.disabled || option.key === DAY_SIDEBAR_OPTION.custom) {
+                return
+            }
+
+            if (option.key === DAY_SIDEBAR_OPTION.custom_by_month) {
+                this.handleTypeChange('month')
+            }
+
+            this.updateDateInterval(option.value)
+        },
+        handleMonthTypeOptionClick(option: MonthTypeOption) {
+            this.currentSidebarOption = option.key as MONTH_SIDEBAR_OPTION
+            this.isInputDisabled = option.key !== MONTH_SIDEBAR_OPTION.custom
+
+            if (option.disabled || option.key === MONTH_SIDEBAR_OPTION.custom) {
+                return
+            }
+
+            if (option.key === MONTH_SIDEBAR_OPTION.custom_by_day) {
+                this.handleTypeChange('day')
+            }
+
+            this.updateDateInterval(option.value)
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.dl-date-time-range {
+    display: flex;
+    justify-content: center;
+
+    &--card {
+        background-color: var(--dl-color-bg);
+        z-index: 1;
+        display: flex;
+        border-radius: 2px;
+    }
+
+    &--card_content {
+        width: var(--card-content-width);
+    }
+}
+</style>

package/src/components/DlDateTimeRange/index.ts

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

package/src/components/DlDateTimeRange/types.ts

@@ -0,0 +1,42 @@
+import { DateInterval } from '../DlDatePicker/types'
+
+export const DAY_SIDEBAR_OPTION = {
+    today: 'today',
+    yesterday: 'yesterday',
+    last_7_days: 'last_7_days',
+    last_14_days: 'last_14_days',
+    last_month: 'last_month',
+    whole_period: 'whole_period',
+    custom: 'custom',
+    custom_by_month: 'custom_by_month'
+} as const
+
+export type DAY_SIDEBAR_OPTION =
+    typeof DAY_SIDEBAR_OPTION[keyof typeof DAY_SIDEBAR_OPTION]
+
+export const MONTH_SIDEBAR_OPTION = {
+    this_month: 'this_month',
+    last_month: 'last_month',
+    last_3_months: 'last_3_months',
+    last_6_months: 'last_6_months',
+    last_12_months: 'last_12_months',
+    custom: 'custom',
+    custom_by_day: 'custom_by_day'
+} as const
+
+export type MONTH_SIDEBAR_OPTION =
+    typeof MONTH_SIDEBAR_OPTION[keyof typeof MONTH_SIDEBAR_OPTION]
+
+export type DayTypeOption = {
+    title: string
+    key: DAY_SIDEBAR_OPTION
+    value?: DateInterval
+    disabled?: boolean
+}
+
+export type MonthTypeOption = {
+    title: string
+    key: MONTH_SIDEBAR_OPTION
+    value?: DateInterval
+    disabled?: boolean
+}

package/src/components/DlDialogBox/DlDialogBox.vue

@@ -0,0 +1,196 @@
+<template>
+    <transition name="fade">
+        <div
+            v-if="show"
+            :id="uuid"
+            :style="cssVars"
+            class="root-wrapper"
+        >
+            <div
+                class="backdrop"
+                @click.stop.prevent="volatile ? closeModal() : ''"
+            />
+            <div
+                class="dialog-wrapper"
+                :style="{ maxWidth: `${width}px` }"
+                :class="{ 'dialog-wrapper--fullscreen': fullscreen }"
+            >
+                <div
+                    v-if="hasHeader"
+                    class="header"
+                >
+                    <slot name="header" />
+                </div>
+                <div
+                    class="content"
+                    :class="{ 'content--fullscreen': fullscreen }"
+                >
+                    <slot name="body" />
+                </div>
+                <div
+                    v-if="hasFooter"
+                    class="footer"
+                >
+                    <slot name="footer" />
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script lang="ts">
+import { v4 } from 'uuid'
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    name: 'DlDialogBox',
+    model: {
+        prop: 'modelValue',
+        event: 'update:modelValue'
+    },
+    props: {
+        width: { type: Number, default: 400 },
+        fullscreen: Boolean,
+        modelValue: Boolean,
+        volatile: { type: Boolean, default: false }
+    },
+    emits: ['update:modelValue', 'hide', 'show'],
+    data() {
+        return {
+            uuid: `dl-dialog-box-${v4()}`,
+            show: this.modelValue
+        }
+    },
+    computed: {
+        cssVars(): Record<string, string> {
+            return {
+                '--dl-backdrop-color': this.hasParent
+                    ? 'transparent'
+                    : 'rgba(0, 0, 0, 0.4)'
+            }
+        },
+        hasParent(): boolean {
+            const parentClassList = (this?.$el?.parentNode as HTMLElement)
+                ?.classList
+            return parentClassList?.contains('content')
+        },
+        hasHeader(): boolean {
+            return !!this.$slots.header
+        },
+        hasFooter(): boolean {
+            return !!this.$slots.footer
+        }
+    },
+    watch: {
+        modelValue(newVal: boolean) {
+            if (newVal) {
+                this.openModal()
+            } else {
+                this.closeModal()
+            }
+        }
+    },
+    methods: {
+        closeModal() {
+            if ((this.$el as HTMLElement)?.blur) {
+                (this.$el as HTMLElement).blur()
+            }
+            this.show = false
+            this.$emit('hide')
+            this.$emit('update:modelValue', false)
+            if (!this.hasParent) {
+                document.documentElement.style.overflow = 'auto'
+            }
+        },
+        openModal() {
+            this.show = true
+            this.$emit('show')
+            this.$emit('update:modelValue', true)
+            if (!this.hasParent) {
+                document.documentElement.style.overflow = 'hidden'
+            }
+        }
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.root-wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--dl-z-index-menu);
+    overflow-x: hidden;
+    overflow-y: hidden;
+    text-align: start;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.backdrop {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--dl-backdrop-color);
+    z-index: var(--dl-z-index-menu);
+}
+
+.dialog-wrapper {
+    position: relative;
+    width: 100%;
+    background-color: var(--dl-color-panel-background);
+    border: 1px solid var(--dl-color-separator);
+    color: var(--dl-color-darker);
+    border-radius: 2px;
+    display: flex;
+    flex-direction: column;
+    z-index: var(--dl-z-index-menu);
+    max-height: 100vh;
+
+    &--fullscreen {
+        margin: 0;
+        width: 100vw;
+        height: 100vh;
+        max-width: 100vw !important;
+        border-radius: 0px;
+    }
+}
+
+.header {
+    display: flex;
+    padding: 16px;
+    border-bottom: 1px solid var(--dl-color-separator);
+}
+
+.content {
+    padding: 10px 16px 30px 16px;
+    overflow: auto;
+
+    &--fullscreen {
+        flex-grow: 1;
+    }
+}
+
+.footer {
+    display: flex;
+    padding: 20px 16px;
+    border-top: 1px solid var(--dl-color-separator);
+}
+
+.fade {
+    &-enter-active,
+    &-leave-active {
+        transition: opacity 0.2s;
+    }
+
+    &-enter,
+    &-leave-to {
+        opacity: 0;
+    }
+}
+</style>