@dataloop-ai/components 0.13.0

package/src/components/DlThemeProvider.vue

@@ -0,0 +1,41 @@
+<template>
+    <div :id="uuid">
+        <slot />
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { getThemeModeAttr } from '../utils'
+import '@dataloop-ai/icons/docs/style.css'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    props: {
+        isDark: {
+            type: Boolean,
+            required: true,
+            default: false
+        }
+    },
+    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>
+
+<style src="../assets/globals.scss" lang="scss" />

package/src/components/DlTimePicker/DlTimeCounter.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="dl-time-counter">
+        <div
+            class="dl-time-counter--item"
+            :class="{
+                'dl-time-counter--item-active': hour === currentHour
+            }"
+            @click="handleHourClick(hour)"
+        >
+            <span>{{ hour }}</span>
+        </div>
+        <div
+            class="dl-time-counter--item"
+            :class="{
+                'dl-time-counter--item-active': minute === currentMinute
+            }"
+            @click="handleMinuteClick(minute)"
+        >
+            <span>{{ minute }}</span>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+
+export default defineComponent({
+    props: {
+        hour: {
+            type: String,
+            required: true
+        },
+        minute: {
+            type: String,
+            required: true
+        },
+        currentHour: {
+            type: String,
+            required: true
+        },
+        currentMinute: {
+            type: String,
+            required: true
+        }
+    },
+    emits: ['set-hour', 'set-minute'],
+    methods: {
+        handleHourClick(value: string) {
+            this.$emit('set-hour', value)
+        },
+
+        handleMinuteClick(value: string) {
+            this.$emit('set-minute', value)
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.dl-time-counter {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &--item {
+        border-radius: 50%;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 10px;
+        cursor: pointer;
+        color: var(--dl-color-darker);
+    }
+
+    &--item-active {
+        font-size: 12px;
+        color: var(--dl-color-text-buttons);
+        background-color: var(--dl-color-secondary);
+    }
+}
+</style>

package/src/components/DlTimePicker/DlTimePicker.vue

@@ -0,0 +1,151 @@
+<template>
+    <div
+        :id="uuid"
+        class="dl-time-picker"
+    >
+        <div
+            class="dl-time-picker--input"
+            :class="{ 'dl-time-picker--input-disabled': disabled }"
+        >
+            <span>From: {{ formatedFrom }}</span>
+            <dl-time-picker-input
+                :disabled="disabled"
+                :model-value="formatedFromValue"
+                @update:modelValue="handleFromTimeChange"
+            />
+        </div>
+        <div class="dl-time-picker--dash">
+            -
+        </div>
+        <div
+            class="dl-time-picker--input"
+            :class="{ 'dl-time-picker--input-disabled': disabled }"
+        >
+            <span>To: {{ formatedTo }}</span>
+            <dl-time-picker-input
+                :disabled="disabled"
+                :model-value="formatedToValue"
+                @update:modelValue="handleToTimeChange"
+            />
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import DlTimePickerInput from './DlTimePickerInput.vue'
+import { CustomDate } from '../DlDatePicker/classes/CustomDate'
+import { Time } from './types'
+import { DateInterval } from '../DlDatePicker/types'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    components: {
+        DlTimePickerInput
+    },
+    props: {
+        modelValue: {
+            type: Object as PropType<DateInterval>,
+            default: () => {
+                const date = new Date()
+                return {
+                    from: date,
+                    to: date
+                }
+            }
+        },
+        disabled: Boolean
+    },
+    emits: ['update:modelValue'],
+    data() {
+        return {
+            uuid: `dl-time-picker-${v4()}`
+        }
+    },
+    computed: {
+        formatedFrom(): string {
+            return (
+                new CustomDate(this.modelValue.from).format('MMM DD, YYYY') ||
+                ''
+            )
+        },
+        formatedFromValue(): Time {
+            const selectionObj = new CustomDate(this.modelValue.from)
+            return {
+                hour: selectionObj.format('HH'),
+                minute: selectionObj.format('mm')
+            }
+        },
+        formatedTo(): string {
+            return (
+                new CustomDate(this.modelValue.to).format('MMM DD, YYYY') || ''
+            )
+        },
+        formatedToValue(): Time {
+            const selectionObj = new CustomDate(this.modelValue.to)
+            return {
+                hour: selectionObj.format('HH'),
+                minute: selectionObj.format('mm')
+            }
+        }
+    },
+    methods: {
+        handleFromTimeChange(value: Time) {
+            const newFrom = new CustomDate(this.modelValue.from)
+            newFrom.hours(parseInt(value.hour)).minutes(parseInt(value.minute))
+
+            if (newFrom.isBefore(new CustomDate(this.modelValue.to))) {
+                this.$emit('update:modelValue', {
+                    from: newFrom.toDate(),
+                    to: this.modelValue.to
+                })
+            }
+        },
+
+        handleToTimeChange(value: Time) {
+            const newTo = new CustomDate(this.modelValue.to)
+            newTo.hours(parseInt(value.hour)).minutes(parseInt(value.minute))
+
+            if (newTo.isAfter(new CustomDate(this.modelValue.from))) {
+                this.$emit('update:modelValue', {
+                    from: this.modelValue.from,
+                    to: newTo.toDate()
+                })
+            }
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.dl-time-picker {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-top: 1px solid var(--dl-color-separator);
+    padding: 15px 30px;
+    box-sizing: border-box;
+
+    &--input {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-width: 220px;
+
+        span {
+            font-size: 12px;
+            margin-right: 10px;
+            color: var(--dl-color-medium);
+        }
+
+        &-disabled {
+            span {
+                color: var(--dl-color-disabled);
+            }
+        }
+    }
+
+    &--dash {
+        padding: 0 10px;
+        color: var(--dl-color-disabled);
+    }
+}
+</style>

package/src/components/DlTimePicker/DlTimePickerInput.vue

@@ -0,0 +1,311 @@
+<template>
+    <div class="dl-time-picker-input">
+        <div
+            class="dl-time-picker-input--clock_img"
+            :class="{ 'dl-time-picker-input--clock_img-disabled': disabled }"
+        >
+            <dl-icon
+                icon="icon-dl-time"
+                size="16px"
+            />
+        </div>
+        <div
+            class="dl-time-picker-input--text"
+            :class="{ 'dl-time-picker-input--text-disabled': disabled }"
+        >
+            {{ time }}
+        </div>
+        <dl-menu
+            anchor="bottom start"
+            :offset="[0, 4]"
+            :disabled="disabled"
+            @before-show="setOptions"
+        >
+            <div class="dl-time-picker-input--content">
+                <div class="dl-time-picker-input--chevron_wrapper">
+                    <dl-icon
+                        icon="icon-dl-up-chevron"
+                        size="16px"
+                        class="dl-time-picker-input--chevron"
+                        @click="handleHourUpChevronClick"
+                    />
+                    <dl-icon
+                        icon="icon-dl-up-chevron"
+                        size="16px"
+                        class="dl-time-picker-input--chevron"
+                        @click="handleMinuteUpChevronClick"
+                    />
+                </div>
+                <dl-time-counter
+                    v-for="(option, index) in options"
+                    :key="index"
+                    :hour="option.hour"
+                    :minute="option.minute"
+                    :current-hour="modelValue.hour"
+                    :current-minute="modelValue.minute"
+                    @set-hour="handleHourChange"
+                    @set-minute="handleMinuteChange"
+                />
+
+                <div class="dl-time-picker-input--chevron_wrapper">
+                    <dl-icon
+                        icon="icon-dl-down-chevron"
+                        size="16px"
+                        class="dl-time-picker-input--chevron"
+                        @click="handleHourDownChevronClick"
+                    />
+                    <dl-icon
+                        icon="icon-dl-down-chevron"
+                        size="16px"
+                        class="dl-time-picker-input--chevron"
+                        @click="handleMinuteDownChevronClick"
+                    />
+                </div>
+                <div class="dl-time-picker-input--dots">
+                    :
+                </div>
+            </div>
+        </dl-menu>
+    </div>
+</template>
+<script lang="ts">
+import { Time } from './types'
+import DlIcon from '../DlIcon.vue'
+import DlTimeCounter from './DlTimeCounter.vue'
+import { DlMenu } from '../DlMenu'
+import { defineComponent, PropType } from 'vue-demi'
+
+const MAX_HOUR = 23
+const MAX_MINUTE = 59
+
+function formatTime(value: number): string {
+    return value < 10 ? `0${value}` : value.toString()
+}
+
+export default defineComponent({
+    components: {
+        DlIcon,
+        DlTimeCounter,
+        DlMenu
+    },
+    props: {
+        modelValue: {
+            type: Object as PropType<Time>,
+            default: () => ({
+                hour: formatTime(new Date().getHours()),
+                minute: formatTime(new Date().getMinutes())
+            })
+        },
+        disabled: Boolean
+    },
+    emits: ['update:modelValue'],
+    data(): {
+        options: Time[]
+    } {
+        return {
+            options: [
+                {
+                    hour: '00',
+                    minute: '00'
+                },
+                {
+                    hour: '01',
+                    minute: '01'
+                },
+                {
+                    hour: '02',
+                    minute: '02'
+                },
+                {
+                    hour: '03',
+                    minute: '03'
+                },
+                {
+                    hour: '04',
+                    minute: '04'
+                },
+                {
+                    hour: '05',
+                    minute: '05'
+                },
+                {
+                    hour: '06',
+                    minute: '06'
+                }
+            ]
+        }
+    },
+    computed: {
+        time(): string {
+            return `${this.modelValue.hour}:${this.modelValue.minute}`
+        }
+    },
+    beforeMount() {
+        this.setOptions()
+    },
+    methods: {
+        setOptions() {
+            const newOptions = [
+                {
+                    hour: this.modelValue.hour,
+                    minute: this.modelValue.minute
+                }
+            ]
+
+            const h = parseInt(this.modelValue.hour)
+            const m = parseInt(this.modelValue.minute)
+            let i = 1
+
+            while (i <= 3) {
+                let hVal = (h + i) % (MAX_HOUR + 1)
+                let hMin = (m + i) % (MAX_MINUTE + 1)
+
+                newOptions.push({
+                    hour: hVal <= 9 ? `0${hVal}` : `${hVal}`,
+                    minute: hMin <= 9 ? `0${hMin}` : `${hMin}`
+                })
+
+                hVal = (h - i) % (MAX_HOUR + 1)
+                hMin = (m - i) % (MAX_MINUTE + 1)
+
+                hVal = hVal < 0 ? MAX_HOUR + hVal + 1 : hVal
+                hMin = hMin < 0 ? MAX_MINUTE + hMin + 1 : hMin
+
+                newOptions.unshift({
+                    hour: hVal <= 9 ? `0${hVal}` : `${hVal}`,
+                    minute: hMin <= 9 ? `0${hMin}` : `${hMin}`
+                })
+
+                i++
+            }
+
+            this.options = newOptions
+        },
+
+        handleHourDownChevronClick() {
+            this.increment('hour', MAX_HOUR)
+        },
+
+        handleHourUpChevronClick() {
+            this.decrement('hour', MAX_HOUR)
+        },
+
+        handleMinuteDownChevronClick() {
+            this.increment('minute', MAX_MINUTE)
+        },
+
+        handleMinuteUpChevronClick() {
+            this.decrement('minute', MAX_MINUTE)
+        },
+
+        increment(key: keyof Time, compare: number) {
+            let lastValue = parseInt(
+                this.options[this.options.length - 1][key],
+                10
+            )
+
+            this.options.forEach((t) => {
+                if (lastValue < compare) {
+                    t[key] = lastValue++ < 9 ? `0${lastValue}` : `${lastValue}`
+                } else {
+                    lastValue = 0
+                    t[key] = '00'
+                }
+            })
+        },
+
+        decrement(key: keyof Time, compare: number) {
+            let firstValue = parseInt(this.options[0][key], 10)
+            firstValue = firstValue - 8
+
+            this.options.forEach((t) => {
+                firstValue++
+                if (firstValue >= 0) {
+                    t[key] =
+                        firstValue <= 9 ? `0${firstValue}` : `${firstValue}`
+                } else {
+                    let val = compare + 1 + firstValue
+                    t[key] = `${val++}`
+                }
+            })
+        },
+
+        handleHourChange(value: string) {
+            this.$emit('update:modelValue', {
+                hour: value,
+                minute: this.modelValue.minute
+            })
+        },
+
+        handleMinuteChange(value: string) {
+            this.$emit('update:modelValue', {
+                hour: this.modelValue.hour,
+                minute: value
+            })
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.dl-time-picker-input {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 96px;
+    border: 1px solid var(--dl-color-separator);
+
+    &--clock_img {
+        padding: 6px 10px 6px 0;
+        height: 16px;
+        color: var(--dl-color-darker);
+
+        &-disabled {
+            color: var(--dl-color-disabled);
+        }
+    }
+
+    &--text {
+        display: flex;
+        font-size: 12px;
+        line-height: 14px;
+        padding: 7px 0;
+        color: var(--dl-color-darker);
+
+        &-disabled {
+            color: var(--dl-color-disabled);
+        }
+    }
+
+    &--content {
+        top: 30px;
+        box-sizing: border-box;
+        min-width: 96px;
+        z-index: 1;
+        padding: 2px 16px;
+        background: var(--dl-color-bg);
+        color: var(--dl-color-darker);
+    }
+
+    &--chevron {
+        width: 16px;
+        height: 16px;
+        cursor: pointer;
+        font-size: 12px;
+    }
+
+    &--chevron_wrapper {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 2px;
+    }
+
+    &--dots {
+        color: var(--dl-color-darker);
+        font-size: 12px;
+        position: absolute;
+        top: 46%;
+        left: 49%;
+    }
+}
+</style>

package/src/components/DlTimePicker/index.ts

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

package/src/components/DlTimePicker/types.ts

@@ -0,0 +1,4 @@
+export interface Time {
+    hour: string
+    minute: string
+}