@dataloop-ai/components 0.13.0 → 0.13.2

package/README.md

@@ -1,4 +1,4 @@
-# Dataloop Components Library
+# Dataloop Components Library ![components version](https://img.shields.io/npm/v/@dataloop-ai/components?label=Latest%20Library%20Version) ![release status](https://img.shields.io/badge/Relese%20Status-Beta-yellowgreen)
 
 This repository contains custom made vue components for Dataloop platform and apps use
 

package/package.json

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

package/src/components/DlDatePicker/DlCalendar.vue

@@ -89,14 +89,8 @@ export default defineComponent({
             default: null
         },
         modelValue: {
-            type: Object as PropType<DateInterval>,
-            default: () => {
-                const date = new Date()
-                return {
-                    from: date,
-                    to: date
-                }
-            }
+            type: Object as PropType<DateInterval | null>,
+            default: null
         },
         withLeftChevron: Boolean,
         withRightChevron: Boolean,
@@ -138,6 +132,8 @@ export default defineComponent({
             this.$emit('change', newDate)
         },
         getDayStyle(value: Partial<CalendarDate>) {
+            if (this.modelValue === null) return
+
             const style: Record<string, any> = {}
 
             const from = new CalendarDate(this.modelValue.from)
@@ -170,8 +166,12 @@ export default defineComponent({
 
         getInnerDayStyle(value: Partial<CalendarDate>) {
             let style: Record<string, any> = {}
+            const disabledOpacity = 0.6
 
-            const isToday = value.isSame(new CalendarDate(), 'date')
+            const isToday = value.isSame(
+                new CalendarDate().startOf('day'),
+                'day'
+            )
 
             if (
                 !isInRange(
@@ -179,20 +179,21 @@ export default defineComponent({
                     new CustomDate(value.toString())
                 )
             ) {
-                if (isToday) {
+                if (isToday && this.disabled) {
+                    style.color = 'var(--dl-color-secondary)'
+                    style.opacity = disabledOpacity
+                } else if (isToday) {
                     style.color = 'var(--dl-color-secondary)'
                 } else {
-                    style.color = 'var(--dl-color-lighter)'
+                    style.color = 'var(--dl-color-disabled)'
                 }
-            } else {
+            } else if (this.modelValue !== null) {
                 const selectedStyle = {
                     backgroundColor: 'var(--dl-color-secondary)',
                     color: 'var(--dl-color-text-buttons)',
                     borderRadius: '11px'
                 }
 
-                const disabledOpacity = 0.6
-
                 const from = new CalendarDate(this.modelValue.from)
                 const to = new CalendarDate(this.modelValue.to)
 
@@ -221,6 +222,18 @@ export default defineComponent({
                 } else if (value.isDisabled) {
                     style.color = 'var(--dl-color-lighter)'
                 }
+            } else {
+                if (isToday) {
+                    style.color = 'var(--dl-color-secondary)'
+
+                    if (this.disabled) {
+                        style.opacity = disabledOpacity
+                    }
+                } else if (this.disabled) {
+                    style.color = 'var(--dl-color-disabled)'
+                } else if (value.isDisabled) {
+                    style.color = 'var(--dl-color-lighter)'
+                }
             }
 
             return style
@@ -232,6 +245,7 @@ export default defineComponent({
         },
 
         handleMouseEnter(value: CustomDate) {
+            if (this.modelValue === null) return
             if (!isInRange(this.availableRange, value)) return
 
             if (value.isBefore(new CustomDate(this.modelValue.from))) return

package/src/components/DlDatePicker/DlDatePicker.vue

@@ -93,14 +93,8 @@ export default defineComponent({
     },
     props: {
         modelValue: {
-            type: Object as PropType<DateInterval>,
-            default: () => {
-                const date = new Date()
-                return {
-                    from: date,
-                    to: date
-                }
-            }
+            type: Object as PropType<DateInterval | null>,
+            default: null
         },
         type: {
             type: String,
@@ -120,7 +114,7 @@ export default defineComponent({
         calendarFrom: Calendar | null
         calendarTo: Calendar | null
         isSelectionMode: boolean
-        dateInterval: DateInterval
+        dateInterval: DateInterval | null
     } {
         return {
             uuid: `dl-date-picker-${v4()}`,
@@ -133,8 +127,7 @@ export default defineComponent({
     },
     watch: {
         type(value: string) {
-            const cDateFrom = new CalendarDate(this.modelValue.from)
-            const cDateTo = new CalendarDate(this.modelValue.to)
+            const [cDateFrom, cDateTo] = this.getCalendarDates(this.modelValue)
 
             this.calendarFrom!.currentDate = cDateFrom
             this.calendarTo!.currentDate = cDateTo
@@ -148,10 +141,9 @@ export default defineComponent({
             )
         },
         modelValue: {
-            handler(value: DateInterval) {
+            handler(value: DateInterval | null) {
                 this.dateInterval = value
-                const cDateFrom = new CalendarDate(value.from)
-                const cDateTo = new CalendarDate(value.to)
+                const [cDateFrom, cDateTo] = this.getCalendarDates(value)
 
                 this.calendarFrom!.currentDate = cDateFrom
                 this.calendarTo!.currentDate = cDateTo
@@ -169,8 +161,7 @@ export default defineComponent({
         }
     },
     beforeMount() {
-        const cDateFrom = new CalendarDate(this.modelValue.from)
-        const cDateTo = new CalendarDate(this.modelValue.to)
+        const [cDateFrom, cDateTo] = this.getCalendarDates(this.modelValue)
 
         const unit = this.type === 'day' ? 'month' : 'year'
 
@@ -189,6 +180,14 @@ export default defineComponent({
         }
     },
     methods: {
+        getCalendarDates(value: DateInterval): [CalendarDate, CalendarDate] {
+            if (value === null) {
+                const now = new CalendarDate()
+                return [now, now]
+            }
+
+            return [new CalendarDate(value.from), new CalendarDate(value.to)]
+        },
         updateModelValue(value: DateInterval) {
             if (this.disabled) return
             this.$emit('update:modelValue', value)

package/src/components/DlDatePicker/DlMonthCalendar.vue

@@ -67,14 +67,8 @@ export default defineComponent({
             default: null
         },
         modelValue: {
-            type: Object as PropType<DateInterval>,
-            default: () => {
-                const date = new Date()
-                return {
-                    from: date,
-                    to: date
-                }
-            }
+            type: Object as PropType<DateInterval | null>,
+            default: null
         },
         withLeftChevron: Boolean,
         withRightChevron: Boolean,
@@ -106,21 +100,24 @@ export default defineComponent({
     },
     methods: {
         handleClick(value: number) {
-            const d = new CalendarDate(this.modelValue.from)
+            const d = new CalendarDate()
             d.year(parseInt(this.title)).month(value).startOf('month')
 
             if (!isInRange(this.availableRange, d)) return
 
+            const date = d.toDate()
             const newDate = {
-                from: d.toDate(),
-                to: d.toDate()
+                from: date,
+                to: date
             }
             this.$emit('update:modelValue', newDate)
             this.$emit('change', newDate)
         },
 
         handleMouseenter(value: number) {
-            const d = new CalendarDate(this.modelValue.from)
+            if (this.modelValue === null) return
+
+            const d = new CalendarDate()
             d.year(parseInt(this.title)).month(value).startOf('month')
 
             if (!isInRange(this.availableRange, d)) return
@@ -132,7 +129,7 @@ export default defineComponent({
         },
 
         handleMousedown(value: number) {
-            const d = new CalendarDate(this.modelValue.from)
+            const d = new CalendarDate()
             d.year(parseInt(this.title)).month(value).startOf('month')
 
             if (!isInRange(this.availableRange, d)) return
@@ -148,18 +145,17 @@ export default defineComponent({
                 background: 'var(--dl-color-secondary)'
             }
 
-            const currentD = new CalendarDate(this.modelValue.from)
-            const d = new CalendarDate(currentD)
-            d.month(value).year(parseInt(this.title))
+            const initialD = new CalendarDate()
+            const d = new CalendarDate()
+
+            d.year(parseInt(this.title)).month(value).startOf('month')
 
             if (!isInRange(this.availableRange, d)) {
                 style = {
                     'border-color': 'var(--dl-color-disabled)',
                     color: 'var(--dl-color-disabled)'
                 }
-            } else {
-                const initialD = new CalendarDate()
-
+            } else if (this.modelValue !== null) {
                 const from = new CalendarDate(this.modelValue.from)
                 const to = new CalendarDate(this.modelValue.to)
 
@@ -204,6 +200,10 @@ export default defineComponent({
                 } else if (d.isSame(initialD, 'month') && !isIntervalBoundary) {
                     style.color = 'var(--dl-color-secondary)'
                 }
+            } else {
+                if (d.isSame(initialD, 'month')) {
+                    style.color = 'var(--dl-color-secondary)'
+                }
             }
 
             return style

package/src/components/DlDateTimeRange/DlDateTimeRange.vue

@@ -90,14 +90,8 @@ export default defineComponent({
     },
     props: {
         modelValue: {
-            type: Object as PropType<DateInterval>,
-            default: () => {
-                const date = new Date()
-                return {
-                    from: date,
-                    to: date
-                }
-            }
+            type: Object as PropType<DateInterval | null>,
+            default: null
         },
         showTime: Boolean,
         type: {
@@ -118,36 +112,38 @@ export default defineComponent({
         },
         withSelectedOption: Boolean,
         disabled: Boolean,
-        autoClose: Boolean
+        autoClose: Boolean,
+        placeholder: {
+            type: String,
+            default: 'Set Due Date'
+        }
     },
     emits: ['update:modelValue', 'set-type', 'change'],
     data(): {
         uuid: string
-        dateInterval: DateInterval
+        dateInterval: DateInterval | null
         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
-            },
+            dateInterval: this.modelValue,
             typeState: this.type,
             isOpen: false,
             isInputDisabled: false,
-            dayTypeOptions: [
+            currentSidebarOption: DAY_SIDEBAR_OPTION.custom
+        }
+    },
+    computed: {
+        dayTypeOptions(): DayTypeOption[] {
+            const today = CustomDate.startOf('day').toDate()
+            const yesterday = CustomDate.subtract(1, 'day')
+                .startOf('day')
+                .toDate()
+
+            return [
                 {
                     title: 'today',
                     key: DAY_SIDEBAR_OPTION.today,
@@ -162,7 +158,9 @@ export default defineComponent({
                     title: 'last 7 days',
                     key: DAY_SIDEBAR_OPTION.last_7_days,
                     value: {
-                        from: CustomDate.subtract(7, 'day').toDate(),
+                        from: CustomDate.subtract(7, 'day')
+                            .startOf('day')
+                            .toDate(),
                         to: today
                     }
                 },
@@ -170,7 +168,9 @@ export default defineComponent({
                     title: 'last 14 days',
                     key: DAY_SIDEBAR_OPTION.last_14_days,
                     value: {
-                        from: CustomDate.subtract(14, 'day').toDate(),
+                        from: CustomDate.subtract(14, 'day')
+                            .startOf('day')
+                            .toDate(),
                         to: today
                     }
                 },
@@ -188,17 +188,24 @@ export default defineComponent({
                 {
                     title: 'custom by month',
                     key: DAY_SIDEBAR_OPTION.custom_by_month,
-                    value: {
-                        from: new CalendarDate(this.modelValue.from)
+                    value: this.dateInterval && {
+                        from: new CalendarDate(this.dateInterval.from)
                             .startOf('month')
                             .toDate(),
-                        to: new CalendarDate(this.modelValue.from)
+                        to: new CalendarDate(this.dateInterval.from)
                             .startOf('month')
                             .toDate()
                     }
                 }
-            ],
-            monthTypeOptions: [
+            ]
+        },
+        monthTypeOptions(): MonthTypeOption[] {
+            const thisMonth = CustomDate.startOf('month').toDate()
+            const lastMonth = CustomDate.subtract(1, 'months')
+                .startOf('month')
+                .toDate()
+
+            return [
                 {
                     title: 'this month',
                     key: MONTH_SIDEBAR_OPTION.this_month,
@@ -216,7 +223,7 @@ export default defineComponent({
                         from: CustomDate.subtract(3, 'months')
                             .startOf('month')
                             .toDate(),
-                        to: today
+                        to: thisMonth
                     }
                 },
                 {
@@ -226,7 +233,7 @@ export default defineComponent({
                         from: CustomDate.subtract(6, 'months')
                             .startOf('month')
                             .toDate(),
-                        to: today
+                        to: thisMonth
                     }
                 },
                 {
@@ -236,27 +243,24 @@ export default defineComponent({
                         from: CustomDate.subtract(1, 'year')
                             .startOf('month')
                             .toDate(),
-                        to: today
+                        to: thisMonth
                     }
                 },
                 { 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)
+                    value: this.dateInterval && {
+                        from: new CalendarDate(this.dateInterval.from)
                             .startOf('day')
                             .toDate(),
-                        to: new CalendarDate(this.modelValue.from)
+                        to: new CalendarDate(this.dateInterval.from)
                             .startOf('day')
                             .toDate()
                     }
                 }
-            ],
-            currentSidebarOption: DAY_SIDEBAR_OPTION.custom
-        }
-    },
-    computed: {
+            ]
+        },
         sidebarDayOptions(): DayTypeOption[] {
             return this.dayTypeOptions.map((o) => ({
                 ...o,
@@ -273,6 +277,10 @@ export default defineComponent({
             return { width: `${this.dateInputText.length / 2}em` }
         },
         dateInputText(): string {
+            if (this.dateInterval === null) {
+                return this.placeholder
+            }
+
             let text = ''
 
             if (this.typeState === 'month') {
@@ -361,7 +369,9 @@ export default defineComponent({
         type(value: 'day' | 'month') {
             this.typeState = value
 
-            const date = new CustomDate(this.modelValue.from)
+            if (this.dateInterval === null) return
+
+            const date = new CustomDate(this.dateInterval.from)
                 .startOf(value)
                 .toDate()
 
@@ -382,10 +392,8 @@ export default defineComponent({
                     this.typeState === 'day'
                         ? DAY_SIDEBAR_OPTION.custom
                         : MONTH_SIDEBAR_OPTION.custom
-                this.updateDateInterval({
-                    from: this.modelValue.from,
-                    to: this.modelValue.to
-                })
+
+                this.updateDateInterval(null)
             },
             deep: true
         }
@@ -401,7 +409,7 @@ export default defineComponent({
             this.typeState = value
             this.$emit('set-type', value)
         },
-        updateDateInterval(value: DateInterval) {
+        updateDateInterval(value: DateInterval | null) {
             this.dateInterval = value
             this.$emit('update:modelValue', value)
             this.$emit('change', value)

package/src/components/DlSelect/DlSelect.vue

@@ -718,6 +718,7 @@ export default defineComponent({
             if (!this.preserveSearch) {
                 const inputRef = this.$refs.searchInput as HTMLInputElement
                 if (inputRef) inputRef.value = ''
+                this.$emit('filter', '')
             }
         },
         getLabel,

package/src/components/DlTimePicker/DlTimePicker.vue

@@ -5,11 +5,11 @@
     >
         <div
             class="dl-time-picker--input"
-            :class="{ 'dl-time-picker--input-disabled': disabled }"
+            :class="{ 'dl-time-picker--input-disabled': disableInput }"
         >
             <span>From: {{ formatedFrom }}</span>
             <dl-time-picker-input
-                :disabled="disabled"
+                :disabled="disableInput"
                 :model-value="formatedFromValue"
                 @update:modelValue="handleFromTimeChange"
             />
@@ -19,11 +19,11 @@
         </div>
         <div
             class="dl-time-picker--input"
-            :class="{ 'dl-time-picker--input-disabled': disabled }"
+            :class="{ 'dl-time-picker--input-disabled': disableInput }"
         >
             <span>To: {{ formatedTo }}</span>
             <dl-time-picker-input
-                :disabled="disabled"
+                :disabled="disableInput"
                 :model-value="formatedToValue"
                 @update:modelValue="handleToTimeChange"
             />
@@ -44,14 +44,8 @@ export default defineComponent({
     },
     props: {
         modelValue: {
-            type: Object as PropType<DateInterval>,
-            default: () => {
-                const date = new Date()
-                return {
-                    from: date,
-                    to: date
-                }
-            }
+            type: Object as PropType<DateInterval | null>,
+            default: null
         },
         disabled: Boolean
     },
@@ -62,13 +56,22 @@ export default defineComponent({
         }
     },
     computed: {
+        disableInput(): boolean {
+            return this.modelValue === null || this.disabled
+        },
         formatedFrom(): string {
-            return (
-                new CustomDate(this.modelValue.from).format('MMM DD, YYYY') ||
-                ''
-            )
+            return this.modelValue !== null
+                ? new CustomDate(this.modelValue.from).format('MMM DD, YYYY')
+                : ''
         },
         formatedFromValue(): Time {
+            if (this.modelValue === null) {
+                return {
+                    hour: '00',
+                    minute: '00'
+                }
+            }
+
             const selectionObj = new CustomDate(this.modelValue.from)
             return {
                 hour: selectionObj.format('HH'),
@@ -76,11 +79,18 @@ export default defineComponent({
             }
         },
         formatedTo(): string {
-            return (
-                new CustomDate(this.modelValue.to).format('MMM DD, YYYY') || ''
-            )
+            return this.modelValue !== null
+                ? new CustomDate(this.modelValue.to).format('MMM DD, YYYY')
+                : ''
         },
         formatedToValue(): Time {
+            if (this.modelValue === null) {
+                return {
+                    hour: '00',
+                    minute: '00'
+                }
+            }
+
             const selectionObj = new CustomDate(this.modelValue.to)
             return {
                 hour: selectionObj.format('HH'),

package/src/components/DlTimePicker/DlTimePickerInput.vue

@@ -92,8 +92,8 @@ export default defineComponent({
         modelValue: {
             type: Object as PropType<Time>,
             default: () => ({
-                hour: formatTime(new Date().getHours()),
-                minute: formatTime(new Date().getMinutes())
+                hour: '00',
+                minute: '00'
             })
         },
         disabled: Boolean

package/src/demo/DlDateTimeRangeDemo.vue

@@ -72,13 +72,14 @@
         </div>
         <div class="dl-dtr--input">
             <dl-date-time-range
+                v-model="date"
                 :type="type"
                 :available-range="range ? availableRange : null"
                 :mode="mode"
                 :show-time="showTime"
                 :auto-close="autoClose"
                 @set-type="handleSetType"
-                @update:modelValue="handleModelValueUpdate"
+                @change="handleModelValueUpdate"
             />
         </div>
     </div>
@@ -94,6 +95,7 @@ export default defineComponent({
         DlDateTimeRange
     },
     data(): {
+        date: DateInterval
         switchState: any[]
         availableRange: Partial<DateInterval>
     } {
@@ -103,6 +105,7 @@ export default defineComponent({
         to.setDate(to.getDate() + 35)
 
         return {
+            date: null,
             availableRange: {
                 from,
                 to