@dataloop-ai/components 0.19.243 → 0.19.244

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.243",
+  "version": "0.19.244",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlDateTime/DlDatePicker/DlDatePicker.vue

@@ -1,13 +1,7 @@
 <template>
-    <div
-        :id="uuid"
-        class="dl-date-picker"
-    >
-        <div
-            v-if="type === 'day'"
-            class="dl-date-picker--day_picker"
-        >
-            <div class="dl-date-picker--calendar_from">
+    <div :id="uuid" class="dl-date-picker">
+        <div v-if="type === 'day'" class="dl-date-picker--day_picker">
+            <div v-if="!singleCalendar" class="dl-date-picker--calendar_from">
                 <dl-calendar
                     v-if="calendarFrom"
                     :model-value="dateInterval"
@@ -30,7 +24,9 @@
                     :dates="calendarTo.dates"
                     :available-range="availableRange"
                     :disabled="disabled"
+                    :with-left-chevron="singleCalendar"
                     :with-right-chevron="true"
+                    @prev="handleDatePrev"
                     @next="handleDateNext"
                     @update:model-value="updateDateInterval"
                     @mousedown="handleMousedown"
@@ -38,10 +34,7 @@
                 />
             </div>
         </div>
-        <div
-            v-else
-            class="dl-date-picker--month_picker"
-        >
+        <div v-else class="dl-date-picker--month_picker">
             <div class="dl-date-picker--calendar_from">
                 <dl-month-calendar
                     :model-value="dateInterval"
@@ -104,6 +97,10 @@ export default defineComponent({
             type: Object as PropType<Partial<DateInterval> | null>,
             default: null
         },
+        singleCalendar: {
+            type: Boolean,
+            default: false
+        },
         singleSelection: {
             type: Boolean,
             default: false

package/src/components/compound/DlDateTime/DlDateTimeRange/DlDateTimePicker.vue

@@ -0,0 +1,221 @@
+<template>
+    <div :id="uuid" class="dl-date-time-range">
+        <date-input
+            :text="dateInputText"
+            :input-style="dateInputStyle"
+            :disabled="disabled"
+            :width="width"
+        >
+            <dl-menu
+                ref="dateTimeRangeMenu"
+                anchor="bottom middle"
+                self="top middle"
+                :offset="[0, 5]"
+                :disabled="disabled"
+            >
+                <div class="dl-date-time-range--card">
+                    <div
+                        class="dl-date-time-range--card_content"
+                        :style="cardContentStyles"
+                    >
+                        <dl-date-picker
+                            :model-value="dateInterval"
+                            :available-range="availableRange"
+                            :disabled="isInputDisabled"
+                            single-calendar
+                            single-selection
+                            @update:model-value="
+                                updateDateIntervalWithAutoClose
+                            "
+                        />
+                        <dl-time-picker
+                            v-if="showTime"
+                            :disabled="isInputDisabled"
+                            :model-value="dateInterval"
+                            single-time
+                            @update:model-value="updateDateInterval"
+                        />
+
+                        <dl-button
+                            size="s"
+                            outlined
+                            class="dl-date-time-range--button"
+                            @click="handleClearAction"
+                        >
+                            <span style="text-transform: capitalize">
+                                Clear
+                            </span>
+                        </dl-button>
+                    </div>
+                </div>
+            </dl-menu>
+        </date-input>
+    </div>
+</template>
+<script lang="ts">
+import { DlTimePicker } from '../DlTimePicker'
+import { DateInterval } from '../types'
+import { CustomDate } from '../DlDatePicker/models/CustomDate'
+import DlDatePicker from '../DlDatePicker/DlDatePicker.vue'
+import DateInput from './DateInput.vue'
+import { DlMenu } from '../../../essential'
+import { DlButton } from '../../../basic'
+import { defineComponent, PropType } from 'vue-demi'
+import { v4 } from 'uuid'
+
+export default defineComponent({
+    components: {
+        DlDatePicker,
+        DlTimePicker,
+        DateInput,
+        DlMenu,
+        DlButton
+    },
+    model: {
+        prop: 'modelValue',
+        event: 'update:model-value'
+    },
+    props: {
+        modelValue: {
+            type: Object as PropType<Date | null>,
+            default: null
+        },
+        showTime: Boolean,
+        datePickerCardWidth: {
+            type: String,
+            default: '300px'
+        },
+        availableRange: {
+            type: Object as PropType<Partial<DateInterval> | null>,
+            default: null
+        },
+        disabled: Boolean,
+        autoClose: Boolean,
+        placeholder: {
+            type: String,
+            default: 'Set Due Date'
+        },
+        width: {
+            type: String,
+            default: 'fit-content'
+        }
+    },
+    emits: ['update:model-value', 'set-type', 'change'],
+    data(): {
+        uuid: string
+        dateInterval: DateInterval | null
+        isOpen: boolean
+        isInputDisabled: boolean
+    } {
+        return {
+            uuid: `dl-date-time-range-${v4()}`,
+            dateInterval: this.modelValue
+                ? {
+                      from: this.modelValue,
+                      to: new Date(this.modelValue)
+                  }
+                : null,
+            isOpen: false,
+            isInputDisabled: false
+        }
+    },
+    computed: {
+        dateInputStyle(): Record<string, any> {
+            return { width: `${this.dateInputText.length / 2}em` }
+        },
+        dateInputText(): string {
+            if (this.dateInterval === null) {
+                return this.placeholder
+            }
+
+            let text = ''
+
+            if (this.showTime) {
+                text = CustomDate.format(
+                    this.dateInterval.from,
+                    'MMM D, YYYY, HH:mm'
+                )
+            } else {
+                text = CustomDate.format(this.dateInterval.from, 'MMM D, YYYY')
+            }
+
+            return text
+        },
+        cardContentStyles(): Record<string, any> {
+            return {
+                '--card-content-width': this.datePickerCardWidth
+            }
+        }
+    },
+    watch: {
+        availableRange: {
+            handler() {
+                this.updateDateInterval(null)
+            },
+            deep: true
+        },
+        modelValue(value: Date | null) {
+            this.dateInterval = value && {
+                from: value,
+                to: new Date(value)
+            }
+        }
+    },
+    methods: {
+        handleClearAction() {
+            this.isInputDisabled = false
+            this.updateDateInterval(null)
+        },
+        updateDateInterval(value: DateInterval | null) {
+            if (value === null) {
+                this.dateInterval = null
+            } else {
+                this.dateInterval = {
+                    from: value.from,
+                    to: new Date(value.from)
+                }
+            }
+            this.$emit('update:model-value', value?.from)
+            this.$emit('change', value?.from)
+        },
+        updateDateIntervalWithAutoClose(value: DateInterval) {
+            this.updateDateInterval(value)
+
+            if (this.autoClose) {
+                const dateTimeRangeMenu = this.$refs[
+                    'dateTimeRangeMenu'
+                ] as unknown as {
+                    hide: () => void
+                }
+                dateTimeRangeMenu.hide()
+            }
+        }
+    }
+})
+</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;
+        border-radius: 2px;
+    }
+
+    &--card_content {
+        width: var(--card-content-width);
+    }
+
+    &--button {
+        display: flex;
+        margin-left: auto;
+        width: fit-content;
+        margin-right: 16px;
+        margin-bottom: 16px;
+    }
+}
+</style>

package/src/components/compound/DlDateTime/DlDateTimeRange/index.ts

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

package/src/components/compound/DlDateTime/DlTimePicker/DlTimePicker.vue

@@ -1,33 +1,30 @@
 <template>
-    <div
-        :id="uuid"
-        class="dl-time-picker"
-    >
+    <div :id="uuid" class="dl-time-picker">
         <div
             class="dl-time-picker--input"
             :class="{ 'dl-time-picker--input-disabled': disableInput }"
         >
-            <span>From: {{ formatedFrom }}</span>
+            <span>{{ singleTime ? 'On' : 'From' }}: {{ formatedFrom }}</span>
             <dl-time-picker-input
                 :disabled="disableInput"
                 :model-value="formatedFromValue"
                 @update:model-value="handleFromTimeChange"
             />
         </div>
-        <div class="dl-time-picker--dash">
-            -
-        </div>
-        <div
-            class="dl-time-picker--input"
-            :class="{ 'dl-time-picker--input-disabled': disableInput }"
-        >
-            <span>To: {{ formatedTo }}</span>
-            <dl-time-picker-input
-                :disabled="disableInput"
-                :model-value="formatedToValue"
-                @update:model-value="handleToTimeChange"
-            />
-        </div>
+        <template v-if="!singleTime">
+            <div class="dl-time-picker--dash">-</div>
+            <div
+                class="dl-time-picker--input"
+                :class="{ 'dl-time-picker--input-disabled': disableInput }"
+            >
+                <span>To: {{ formatedTo }}</span>
+                <dl-time-picker-input
+                    :disabled="disableInput"
+                    :model-value="formatedToValue"
+                    @update:model-value="handleToTimeChange"
+                />
+            </div>
+        </template>
     </div>
 </template>
 <script lang="ts">
@@ -51,6 +48,10 @@ export default defineComponent({
             type: Object as PropType<DateInterval | null>,
             default: null
         },
+        singleTime: {
+            type: Boolean,
+            default: false
+        },
         disabled: Boolean
     },
     emits: ['update:model-value'],
@@ -107,7 +108,10 @@ export default defineComponent({
             const newFrom = new CustomDate(this.modelValue.from)
             newFrom.hours(parseInt(value.hour)).minutes(parseInt(value.minute))
 
-            if (newFrom.isBefore(new CustomDate(this.modelValue.to))) {
+            if (
+                this.singleTime ||
+                newFrom.isBefore(new CustomDate(this.modelValue.to))
+            ) {
                 this.$emit('update:model-value', {
                     from: newFrom.toDate(),
                     to: this.modelValue.to

package/src/demos/DlDateTimePickerDemo.vue

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <div>
+            <dl-date-time-picker
+                v-model="date"
+                show-time
+                @change="handleModelValueUpdate"
+            />
+        </div>
+        <div>
+            {{ date }}
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue-demi'
+import { DlDateTimePicker } from '../components'
+
+export default defineComponent({
+    components: {
+        DlDateTimePicker
+    },
+    data(): {
+        date: Date
+    } {
+        return {
+            date: null
+        }
+    },
+    computed: {},
+    methods: {
+        handleModelValueUpdate(value: Date) {
+            console.log('Date: ', value)
+        }
+    }
+})
+</script>
+<style lang="scss" scoped />

package/src/demos/index.ts

@@ -22,6 +22,7 @@ import DlThDemo from './DlThDemo.vue'
 import DlTdDemo from './DlTdDemo.vue'
 import DlTableDemo from './DlTableDemo.vue'
 import DlPaginationDemo from './DlPaginationDemo.vue'
+import DlDateTimePickerDemo from './DlDateTimePickerDemo.vue'
 import DlDateTimeRangeDemo from './DlDateTimeRangeDemo.vue'
 import DlSmartSearchDemo from './SmartSearchDemo/DlSmartSearchDemo.vue'
 import DlSkeletonDemo from './DlSkeletonDemo.vue'
@@ -93,6 +94,7 @@ export default {
     DlTableDemo,
     DlTreeTableDemo,
     DlPaginationDemo,
+    DlDateTimePickerDemo,
     DlDateTimeRangeDemo,
     DlSmartSearchDemo,
     DlSkeletonDemo,