reworked for allowing multiple quick dates. Added date request to types.

Author: Bond-Addict

packages/docs/page-config/ui-elements/date-input/api-description.ts

@@ -63,7 +63,7 @@ export default defineApiDescription({
     placement: "Sets the placement of the dropdown content. [More about placements](/ui-elements/dropdown#placement-and-offset)",
     rangeDelimiter: "The delimiter used when turning model value to string",
     trigger: "Action that will triggered when open and close dropdown.",
-    quickDate: 'When supplied will automatically input the defined date. The default key detected is `t`. The property value must be either `{ date: new Date() } , { date: \'01/01/2024\' key: \'s\' } or just exist with no value. When supplying a custom value, you must supply a `date` but `key` is optional.',
+    quickDate: 'When supplied will automatically input the defined dates for desired keys. The default key detected is `t`. The property value must be either `[{ date: new Date() }] , [{ date: \'01/01/2024\' key: \'s\' }] or just exist with no value. When supplying a custom values, you must supply a `date` but `key` is optional.',
   },
   events: {
     clear: "Emitted if select value has been cleared",

packages/ui/src/components/va-date-input/VaDateInput.demo.vue

@@ -204,15 +204,15 @@
     </VbCard>
 
     <VbCard title="Quick date using default date and key">
-  <va-date-input v-model="quickDateDefault" manual-input label="Start date on 't' press (Enters todays date)" quick-date />
+  <va-date-input v-model="quickDateDefault" manual-input label="Start date on 't' press (Enters todays date)" quick-dates />
   </VbCard>
 
   <VbCard title="Start date on 's' press">
-  <va-date-input v-model="quickDate" manual-input label="Start date on 's' press (Enters todays date)" :quick-date="{ date: new Date(), key: 's' }" />
+  <va-date-input v-model="quickDate" manual-input label="Start date on 's' press (Enters todays date) or 'e' (Enters 01/01/2000)" :quick-dates="[{ date: new Date(), key: 's' }, {date: '01/01/2000', key: 'e'}]" />
   </VbCard>
 
   <VbCard title="Start date on 't' press with string date for property">
-  <va-date-input v-model="strQuickDate" manual-input label="Start date on 't' press (Enters 01/01/2022)"  :quick-date="{ date: '01/01/2022' }" />
+  <va-date-input v-model="strQuickDate" manual-input label="Start date on 't' press (Enters 01/01/2022)"  :quick-dates="[{ date: '01/01/2022' }]" />
   </VbCard>
   </VbDemo>
 </template>

packages/ui/src/components/va-date-input/VaDateInput.vue

@@ -84,7 +84,7 @@
 import { computed, PropType, toRef, toRefs, watch, ref, shallowRef, nextTick, Ref, useAttrs, useSlots } from 'vue'
 import omit from 'lodash/omit'
 
-import { filterComponentProps, extractComponentProps, extractComponentEmits } from '../../utils/component-options'
+import { filterComponentProps, extractComponentProps, extractComponentEmits, DateRequest } from '../../utils/component-options'
 import {
   useComponentPresetProp,
   useClearable, useClearableEmits, useClearableProps,
@@ -153,7 +153,7 @@ const props = defineProps({
   ariaResetLabel: useTranslationProp('$t:resetDate'),
   ariaSelectedDateLabel: useTranslationProp('$t:selectedDate'),
 
-  quickDate: { type: Object as PropType<{date: Date | string; key?: string}| boolean>, default: () => {}, required: false },
+  quickDates: { type: Array as PropType<Array<DateRequest>| boolean>, default: () => {}, required: false },
 })
 
 const emit = defineEmits([
@@ -274,20 +274,28 @@ const onInputTextChanged = ({ target }: Event) => {
 }
 
 const onKeyDown = (event: KeyboardEvent) => {
-  const defaultKey = 't'
-  const quickDate = (props.quickDate as any)?.key ?? defaultKey
-  const shouldInput = !!(event.key.toLocaleLowerCase() === quickDate)
+  const keyboardKey = event.key.toLocaleLowerCase()
+  const isAlpha = !!keyboardKey.match(/^[A-Za-z]$|^$/)
 
-  if (event.key.match(/^[a-zA-Z]+$/)) {
+  if (isAlpha) {
     event.preventDefault()
-    valueComputed.value = props.clearValue
-  }
 
-  if (shouldInput) {
-    if (typeof props.quickDate === 'string') {
-      valueComputed.value = parseDateInputValue(new Date().toString())
-    } else {
-      valueComputed.value = typeof ((props.quickDate as any).date) === 'string' ? parseDateInputValue((props.quickDate as any).date as string) : parseDateInputValue((props.quickDate as any).date.toString())
+    const defaultKey = 't'
+    const today = new Date().toString()
+
+    let shouldInput = false
+    let keyProps
+    if (Array.isArray(props.quickDates)) {
+      keyProps = props.quickDates.length === 1 && !props.quickDates[0]?.key ? props.quickDates[0] : props.quickDates.find(d => d.key?.toLowerCase() === keyboardKey.toLowerCase())
+      if (keyProps) { shouldInput = true }
+    } else if (keyboardKey === defaultKey) { shouldInput = true }
+
+    if (shouldInput) {
+      if (keyboardKey === defaultKey && !keyProps) {
+        valueComputed.value = parseDateInputValue(today)
+      } else if (keyProps) {
+        valueComputed.value = typeof (keyProps.date) === 'string' ? parseDateInputValue(keyProps.date as string) : parseDateInputValue(keyProps.date.toString())
+      }
     }
   }
 }

packages/ui/src/utils/component-options/types.ts

@@ -45,3 +45,5 @@ export type ExtractComponentProps<T> = true extends boolean ? ExtractDefineCompo
 export type ExtractComponentEmits<T> = ComponentEmit<T>
 
 export type ExtractComponentPropTypes<T extends DefineComponentOptions> = ComponentProps<T>
+
+export type DateRequest = {date: Date | string, key?: string}