@dataloop-ai/components 0.13.0

package/src/components/DlDatePicker/utils.ts

@@ -0,0 +1,39 @@
+import { CalendarDate } from './classes/CalendarDate'
+
+export const getWeekDayNames = (): string[] => {
+    const start = new CalendarDate().day(0)
+    const end = new CalendarDate().day(6)
+
+    const weekDayNames = []
+
+    while (start.isSameOrBefore(end)) {
+        weekDayNames.push(start.format('dddd').substring(0, 2))
+
+        start.add(1, 'day')
+    }
+
+    return weekDayNames
+}
+
+export type Month = {
+    name: string
+    value: number
+}
+
+export const getMonths = (): Month[] => {
+    const start = new CalendarDate().month(0)
+    const end = new CalendarDate().month(11)
+
+    const months = []
+
+    while (start.isSameOrBefore(end)) {
+        months.push({
+            name: start.format('MMM'),
+            value: start.month()
+        })
+
+        start.add(1, 'month')
+    }
+
+    return months
+}

package/src/components/DlDateTimeRange/DlCardSidebar.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="dl-card-sidebar">
+        <div class="dl-card-sidebar--header">
+            <span>Select by</span>
+        </div>
+        <div class="dl-card-sidebar--content">
+            <div
+                v-for="option in options"
+                :key="option.key"
+                class="dl-card-sidebar--item"
+                :class="{
+                    'dl-card-sidebar--item-active':
+                        option.key === currentOption,
+                    'dl-card-sidebar--item-disabled': option.disabled
+                }"
+                @click="handleClick(option)"
+            >
+                <div class="dl-card-sidebar--focus_helper" />
+                {{ capitalizeFirstLetter(option.title) }}
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import { DayTypeOption, MonthTypeOption } from './types'
+
+export default defineComponent({
+    props: {
+        options: {
+            type: Array as PropType<DayTypeOption[] | MonthTypeOption[]>,
+            default: () => [] as DayTypeOption[]
+        },
+        currentOption: {
+            type: String,
+            default: ''
+        }
+    },
+    emits: ['click'],
+    methods: {
+        handleClick(value: DayTypeOption | MonthTypeOption) {
+            if (value.disabled) return
+            this.$emit('click', value)
+        },
+        capitalizeFirstLetter(value: string) {
+            return `${value.charAt(0).toUpperCase()}${value.slice(1)}`
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.dl-card-sidebar {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    border-right: 1px solid var(--dl-color-separator);
+    height: 100%;
+
+    &--header {
+        color: var(--dl-color-lighter);
+        font-size: 10px;
+        font-style: normal;
+        font-weight: normal;
+        line-height: 12px;
+        text-transform: uppercase;
+        padding: 10px 0 10px 10px;
+    }
+
+    &--item {
+        position: relative;
+        font-size: 12px;
+        line-height: 14px;
+        line-height: 14px;
+        transition: color 0.3s, background-color 0.3s;
+        white-space: nowrap;
+        padding: 7px 10px;
+        cursor: pointer;
+        color: var(--dl-color-darker);
+
+        &-active {
+            background-color: var(--dl-color-secondary);
+            color: var(--dl-color-text-buttons);
+        }
+
+        &-disabled {
+            color: var(--dl-color-disabled);
+        }
+    }
+
+    &--focus_helper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        background-color: currentColor;
+        opacity: 0;
+        transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1),
+            opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
+    }
+}
+
+.dl-card-sidebar--item:not(.dl-card-sidebar--item-disabled):hover {
+    .dl-card-sidebar--focus_helper {
+        opacity: 0.15;
+    }
+}
+</style>

package/src/components/DlDateTimeRange/DlDateInput.vue

@@ -0,0 +1,105 @@
+<template>
+    <div
+        class="dl-date-input"
+        :class="{
+            'dl-date-input-focused': focused && !disabled,
+            'dl-date-input-disabled': disabled
+        }"
+    >
+        <dl-icon
+            icon="icon-dl-date"
+            :color="disabled ? 'dl-color-disabled' : 'dl-color-darker'"
+            size="16px"
+        />
+        <div class="dl-date-input--input-wrapper">
+            <input
+                type="text"
+                :value="text"
+                :disabled="disabled"
+                :style="inputStyle"
+                readonly
+                @focus="focused = true"
+                @blur="focused = false"
+            >
+        </div>
+        <slot />
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, PropType } from 'vue-demi'
+import DlIcon from '../DlIcon.vue'
+
+export default defineComponent({
+    components: {
+        DlIcon
+    },
+    props: {
+        text: {
+            type: String,
+            default: ''
+        },
+        disabled: Boolean,
+        inputStyle: {
+            type: Object as PropType<Record<string, any>>,
+            default: () => ({})
+        }
+    },
+    data() {
+        return {
+            focused: false
+        }
+    }
+})
+</script>
+<style lang="scss" scoped>
+.dl-date-input {
+    background-color: var(--dl-color-bg);
+    border: 1px solid var(--dl-color-separator);
+    color: var(--dl-color-darker);
+    border-radius: 2px;
+    padding: 5px 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 28px;
+    box-sizing: border-box;
+
+    &-focused {
+        border-color: var(--dl-color-secondary);
+
+        &:hover {
+            border-color: var(--dl-color-hover);
+        }
+    }
+
+    &-disabled {
+        border-color: var(--dl-color-separator);
+        color: var(--dl-color-disabled);
+        cursor: not-allowed;
+
+        &:hover {
+            border-color: var(--dl-color-separator);
+        }
+    }
+
+    &--input-wrapper {
+        display: flex;
+        padding-left: 10px;
+
+        input {
+            border: none;
+            color: var(--dl-color-darker);
+            font-size: 12px;
+            height: 14px;
+            outline: none;
+            background: none;
+            padding: 0px;
+
+            &:disabled {
+                color: var(--dl-color-disabled);
+                cursor: not-allowed;
+            }
+        }
+    }
+}
+</style>