Add ok button for multiple

Author: alfonsobries

src/components/TDatepicker.vue

@@ -92,6 +92,7 @@ import {
   provide,
   watch,
   InputHTMLAttributes,
+  computed,
 } from 'vue';
 
 import {
@@ -111,7 +112,7 @@ import {
 } from '@variantjs/core';
 import { Options, Placement } from '@popperjs/core';
 import useConfigurationWithClassesList from '../use/useConfigurationWithClassesList';
-import { useSelectedDate, useActiveDate, useCalendarView, useDateFormatting, useDateParsing, useCalendarState, useVisibleDate } from '../use/datepicker';
+import { useSelectedDate, useActiveDate, useCalendarView, useDateFormatting, useDateParsing, useCalendarState, useVisibleDate, useDateLocale } from '../use/datepicker';
 import { getVariantPropsWithClassesList } from '../utils/getVariantProps';
 import { TDatepickerOptions, TDatepickerValue } from '../types';
 import DatepickerDropdown from './TDatepicker/DatepickerDropdown.vue';
@@ -275,7 +276,7 @@ export default defineComponent({
     },
     closeOnSelect: {
       type: Boolean,
-      default: true,
+      default: undefined,
     },
     show: {
       type: Boolean,
@@ -289,6 +290,10 @@ export default defineComponent({
       type: [String, Object] as PropType<string | HTMLElement>,
       default: 'body',
     },
+    showOkButton: {
+      type: Boolean,
+      default: undefined,
+    },
   },
   emits: {
     change: (e: CustomEvent) => e instanceof CustomEvent,
@@ -308,17 +313,28 @@ export default defineComponent({
     // - In multiple add an ok button
     // - Add a clear button
     const { configuration, attributes } = useConfigurationWithClassesList<TDatepickerOptions>(TDatepickerConfig, TDatepickerClassesKeys);
-    const { parseDate } = useDateParsing(configuration);
+    const locale = useDateLocale({ configuration });
+    const { parseDate } = useDateParsing({ configuration, locale });
     const { selectedDate, selectedDateHolder, setSelectedDate, addSelectedDate, getInitialSelectedDate, resetRangeSelection } = useSelectedDate(props, configuration, parseDate);
     const { activeDate, activeDateIsVisible, initActiveDate, setActiveDate, hideActiveDate, showActiveDate } = useActiveDate({
       configuration, selectedDate, parseDate,
     });
-    const { formatDate, formattedDate, userFormattedDate } = useDateFormatting(configuration, selectedDate);
+    const { formatDate, formattedDate, userFormattedDate } = useDateFormatting({ configuration, selectedDate, locale });
     const { currentView, initView, setCurrentView } = useCalendarView(configuration);
-    const { shown, doShow, doHide, isMultiple, isDropdownClosed, isDropdownOpened } = useCalendarState(configuration);
-
+    const { shown, doShow, doHide, isMultiple, isRange, isDropdownClosed, isDropdownOpened } = useCalendarState(configuration);
     const { visibleDate, resetVisibleDate } = useVisibleDate({ activeDate, configuration });
+    const shouldCloseOnSelect = computed<boolean>(() => {
+      if (configuration.closeOnSelect === undefined) {
+        return isRange.value || !isMultiple.value;
+      }
 
+      return configuration.closeOnSelect;
+    });
+
+    const okButtonHandler = () => {
+      doHide();
+    };
+    
     const initAllViewData = () => {
       initView();
       initActiveDate();
@@ -350,7 +366,7 @@ export default defineComponent({
       emit('input', event);
       emit('update:modelValue', formattedDate.value);      
 
-      if (configuration.closeOnSelect && isDropdownOpened.value) {
+      if (shouldCloseOnSelect.value && isDropdownOpened.value) {
         doHide();
       }
     });
@@ -537,6 +553,10 @@ export default defineComponent({
     provide('currentView', currentView);
     
     provide('userFormattedDate', userFormattedDate);
+    
+    provide('locale', locale);
+    
+    provide('okButtonHandler', okButtonHandler);
 
     return {
       configuration,

src/components/TDatepicker/DatepickerDropdown.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="inline-flex flex-col mt-1 bg-white border rounded">
-    <div class="inline-flex flex-wrap ">
+    <div class="inline-flex flex-wrap">
       <datepicker-view
         v-for="(month, index) in visibleMonths"
         :key="month.toISOString"

src/components/TDatepicker/DatepickerView.vue

@@ -22,6 +22,8 @@
     <datepicker-view-year v-else-if="isYearView" />
 
     <datepicker-view-multiple-years v-else />
+
+    <datepicker-view-footer v-if="first" />
   </div>
 </template>
 
@@ -33,6 +35,7 @@ import DatepickerViewYear from './DatepickerViewYear.vue';
 import DatepickerViewMultipleYears from './DatepickerViewMultipleYears.vue';
 import DatepickerViewControls from './DatepickerViewControls.vue';
 import DatepickerViewControlsLabel from './DatepickerViewControlsLabel.vue';
+import DatepickerViewFooter from './DatepickerViewFooter.vue';
 
 export default defineComponent({
   name: 'DatepickerView',
@@ -42,6 +45,7 @@ export default defineComponent({
     DatepickerViewMultipleYears,
     DatepickerViewControls,
     DatepickerViewControlsLabel,
+    DatepickerViewFooter,
   },
   props: {
     month: {

src/components/TDatepicker/DatepickerViewFooter.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    v-if="show"
+    class="flex items-center px-3 pb-2 space-x-2"
+  >
+    <!-- <label class="flex-grow text-sm text-gray-500">Time</label>
+      <div class="flex items-center space-x-2">
+      <div
+        tabindex="0"
+        inputmode="numeric"
+        contenteditable="true"
+        class="bg-gray-100 rounded-md w-full text-right flex items-center border border-gray-100 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50"
+        style="caret-color: transparent;"
+      >
+        <input
+          inputmode="numeric"
+          type="text"
+          contenteditable="false"
+          class="text-center w-8 border-transparent bg-transparent p-0 h-6 text-sm transition duration-100 ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 rounded"
+        ><span
+          contenteditable="false"
+          class=""
+        >:</span><input
+          inputmode="numeric"
+          type="text"
+          contenteditable="false"
+          class="text-center w-8 border-transparent bg-transparent p-0 h-6 text-sm transition duration-100 ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 rounded"
+        >
+      </div> -->
+    <button
+      type="button"
+      class="text-blue-600 text-sm uppercase font-semibold transition duration-100 ease-in-out border border-transparent focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 rounded cursor-pointer ml-auto"
+      @click="okButtonHandler"
+      v-text="locale.okLabel"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { DateLocale } from '@variantjs/core';
+import { computed, ComputedRef, defineComponent, inject } from 'vue';
+import { TDatepickerOptions } from '../../types/components/t-datepicker';
+import { useCalendarState } from '../../use/datepicker';
+
+export default defineComponent({
+  name: 'DatepickerViewFooter',
+  setup() {
+    const configuration = inject<TDatepickerOptions>('configuration')!;
+    const locale = inject<ComputedRef<DateLocale>>('locale')!;
+    const okButtonHandler = inject<() => void>('okButtonHandler')!;
+
+    const { isMultiple, isRange } = useCalendarState(configuration);
+
+    const show = computed(() => {
+      if (configuration.showOkButton === undefined) {
+        return isMultiple.value && !isRange.value;
+      }
+
+      return configuration.showOkButton;
+    });
+    
+    return { show, locale, okButtonHandler };
+  },
+});
+</script>

src/types/components/t-datepicker.ts

@@ -52,4 +52,5 @@ export type TDatepickerOptions = WithVariantPropsAndClassesList<{
   addFormInput?: boolean,  
   teleport?: boolean,
   teleportTo?: string | HTMLElement,
+  showOkButton?: boolean,
 } & HTMLAttributes & Data, TDatepickerClassesValidKeys>;

src/use/datepicker/index.ts

@@ -5,5 +5,6 @@ import useDateFormatting from './useDateFormatting';
 import useDateParsing from './useDateParsing';
 import useCalendarState from './useCalendarState';
 import useVisibleDate from './useVisibleDate';
+import useDateLocale from './useDateLocale';
 
-export { useActiveDate, useCalendarView, useSelectedDate, useDateFormatting, useDateParsing, useCalendarState, useVisibleDate }; 
+export { useActiveDate, useCalendarView, useSelectedDate, useDateFormatting, useDateParsing, useCalendarState, useVisibleDate, useDateLocale }; 

src/use/datepicker/useDateFormatting.ts

@@ -1,20 +1,25 @@
-import { buildDateFormatter, DateFormatter, dateEnglishLocale } from '@variantjs/core';
+import { buildDateFormatter, DateFormatter, dateEnglishLocale, DateLocale } from '@variantjs/core';
 import { computed, ComputedRef, Ref } from 'vue';
 import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
-export default function useDateFormatting<C extends Pick<TDatepickerOptions, 'locale' | 'dateFormatter' | 'dateFormat' | 'userFormat' | 'range' | 'dateParser'>>(
+export default function useDateFormatting<C extends Pick<TDatepickerOptions, 'locale' | 'dateFormatter' | 'dateFormat' | 'userFormat' | 'range' | 'dateParser'>>({
+  configuration,
+  locale,
+  selectedDate,
+}: {
   configuration: C,
-  selectedDate: Ref<Date | Date[] | undefined>,
-): {
+  locale: ComputedRef<DateLocale>,
+  selectedDate:  Ref<Date | Date[] | undefined>
+}): {
     formatDate: ComputedRef<DateFormatter>,
     formattedDate: ComputedRef<string | string[]>,
     userFormattedDate: ComputedRef<string>,
   } {
 
-  const formatDate = computed<DateFormatter>(() => buildDateFormatter(configuration.locale || dateEnglishLocale, configuration.dateFormatter));
+  const formatDate = computed<DateFormatter>(() => buildDateFormatter(locale.value, configuration.dateFormatter));
 
   const dateRangeSeparator = computed<string>(() => {
-    return (configuration.locale || dateEnglishLocale).rangeSeparator || dateEnglishLocale.rangeSeparator;
+    return locale.value.rangeSeparator || dateEnglishLocale.rangeSeparator;
   });
 
   const formattedDate = computed<string | string[]>(() => {

src/use/datepicker/useDateLocale.ts

@@ -0,0 +1,11 @@
+import { dateEnglishLocale, DateLocale } from '@variantjs/core';
+import { computed, ComputedRef } from 'vue';
+import { TDatepickerOptions } from '../../types/components/t-datepicker';
+
+export default function useDateLocale<C extends Pick<TDatepickerOptions, 'locale'>>({
+  configuration,
+}: {
+  configuration: C,
+}): ComputedRef<DateLocale> {
+  return computed(() => configuration.locale || dateEnglishLocale);
+}

src/use/datepicker/useDateParsing.ts

@@ -1,11 +1,17 @@
-import { dateEnglishLocale, DateParser, buildDateParser } from '@variantjs/core';
+import { DateParser, buildDateParser, DateLocale } from '@variantjs/core';
 import { computed, ComputedRef } from 'vue';
 import { TDatepickerOptions } from '../../types/components/t-datepicker';
 
-export default function useDateParsing<C extends Pick<TDatepickerOptions, 'locale' | 'dateParser'>>(configuration: C): {
-  parseDate: ComputedRef<DateParser>,
-} {
-  const parseDate = computed<DateParser>(() => buildDateParser(configuration.locale || dateEnglishLocale, configuration.dateParser));
+export default function useDateParsing<C extends Pick<TDatepickerOptions, 'locale' | 'dateParser'>>({
+  configuration,
+  locale,
+}: {
+  configuration: C,
+  locale: ComputedRef<DateLocale>
+}): {
+    parseDate: ComputedRef<DateParser>,
+  } {
+  const parseDate = computed<DateParser>(() => buildDateParser(locale.value, configuration.dateParser));
 
   return { parseDate };
 }

src/use/datepicker/useSelectedDate.ts

@@ -99,7 +99,6 @@ export default function useSelectedDate<P extends {
       }
 
       if (isMultiple.value) {
-        // @TODO: consider user option like an "Ok" button to confirm the selection
         return true;
       }