@onereach/ui-components 10.0.2 → 10.1.0-beta.4242.0

package/src/components/or-date-range-picker-v3/OrDateRangePicker.vue

@@ -33,6 +33,8 @@
         v-model="draftModelValueFrom"
         v-dropdown-open="() => openPopover('from')"
         v-dropdown-close="closePopover"
+        :format="resolvedFormat"
+        :locale="resolvedLocale"
         :selected="popover && popover.state === 'open' && selectedControl === 'from'"
         :required="required"
         :readonly="readonly"
@@ -45,6 +47,8 @@
         v-model="draftModelValueTo"
         v-dropdown-open="() => openPopover('to')"
         v-dropdown-close="closePopover"
+        :format="resolvedFormat"
+        :locale="resolvedLocale"
         :selected="popover && popover.state === 'open' && selectedControl === 'to'"
         :required="required"
         :readonly="readonly"
@@ -86,11 +90,14 @@
             <div :class="['layout-column', 'grow']">
               <OrDateTimePickerMonthSelect
                 v-model="initialValueFrom"
+                :locale="resolvedLocale"
               />
 
               <OrDateTimePickerDateSelect
                 v-model="genericDraftModelValue"
                 :initial-value="initialValueFrom"
+                :format="resolvedFormat"
+                :locale="resolvedLocale"
                 :range-start="draftModelValueFrom || initialValueFrom"
                 :range-end="draftModelValueTo || initialValueTo"
                 @update:model-value="switchSelectedControl()"
@@ -102,11 +109,14 @@
             <div :class="['layout-column', 'grow']">
               <OrDateTimePickerMonthSelect
                 v-model="initialValueTo"
+                :locale="resolvedLocale"
               />
 
               <OrDateTimePickerDateSelect
                 v-model="genericDraftModelValue"
                 :initial-value="initialValueTo"
+                :format="resolvedFormat"
+                :locale="resolvedLocale"
                 :range-start="draftModelValueFrom || initialValueFrom"
                 :range-end="draftModelValueTo || initialValueTo"
                 @update:model-value="switchSelectedControl()"
@@ -162,10 +172,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
+import { PropType, computed, defineComponent, inject, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useProxyModelValue, useResponsive } from '../../hooks';
-import { getCurrentDate, getNextMonthDate, OrDateTimePickerDateControl, OrDateTimePickerDateSelect, OrDateTimePickerMobileControl, OrDateTimePickerMonthSelect, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader } from '../or-date-time-picker-v3';
+import { DateFormat, DateTimePickerDateFormat, DateTimePickerModelValue, Locale, OrDateTimePickerDateControl, OrDateTimePickerDateSelect, OrDateTimePickerMobileControl, OrDateTimePickerMonthSelect, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader, getCurrentDate, getNextMonthDate } from '../or-date-time-picker-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
@@ -173,7 +183,8 @@ import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { InputBoxSize, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
-import { DateRangePicker, DateRangePickerPopover } from './styles';
+import * as Styles from './styles';
+import { DateRangePickerModelValue } from './types';
 
 export default defineComponent({
   name: 'OrDateRangePicker',
@@ -206,7 +217,17 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Object as PropType<[Date, Date]>,
+      type: undefined as unknown as PropType<DateRangePickerModelValue>,
+      default: undefined,
+    },
+
+    format: {
+      type: String as PropType<`${DateTimePickerDateFormat}`>,
+      default: undefined,
+    },
+
+    locale: {
+      type: String,
       default: undefined,
     },
 
@@ -268,26 +289,34 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
+    const rootStyles = computed(() => [
+      'or-date-range-picker-v3',
+      ...Styles.DateRangePicker,
+    ]);
+
     const inputBox = ref<InstanceType<typeof OrInputBox>>();
     const inputBoxRoot = computed(() => inputBox.value?.root);
 
     const popover = ref<InstanceType<typeof OrPopover>>();
     const popoverState = computed(() => popover.value?.state);
 
-    // Styles
-    const rootStyles = computed(() => [
-      'or-date-range-picker-v3',
-      ...DateRangePicker,
-    ]);
-
     const popoverStyles = computed(() => [
       'or-date-range-picker-popover-v3',
-      ...DateRangePickerPopover,
+      ...Styles.DateRangePickerPopover,
     ]);
 
+    // Options
+    const resolvedFormat = computed(() => {
+      return props.format ?? inject(DateFormat, DateTimePickerDateFormat.Short);
+    });
+
+    const resolvedLocale = computed(() => {
+      return props.locale ?? inject(Locale, navigator.language);
+    });
+
     // State
     const initialValueFrom = ref(props.modelValue?.[0] ?? getCurrentDate());
     const initialValueTo = ref(props.modelValue?.[1] ?? getNextMonthDate());
@@ -298,7 +327,7 @@ export default defineComponent({
     });
 
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draftModelValue = ref<[Date | undefined, Date | undefined]>(proxyModelValue.value ?? [undefined, undefined]);
+    const draftModelValue = ref<NonNullable<DateRangePickerModelValue>>(proxyModelValue.value ?? [undefined, undefined]);
 
     watch(proxyModelValue, (value) => {
       draftModelValue.value = value ?? [undefined, undefined];
@@ -359,18 +388,18 @@ export default defineComponent({
     });
 
     // Methods
-    function switchSelectedControl(): void {
-      selectedControl.value = selectedControl.value === 'from' ? 'to' : 'from';
-    }
-
     function apply(): void {
-      proxyModelValue.value = draftModelValue.value as [Date, Date];
+      proxyModelValue.value = draftModelValue.value;
     }
 
     function reset(): void {
       draftModelValue.value = proxyModelValue.value ?? [undefined, undefined];
     }
 
+    function switchSelectedControl(): void {
+      selectedControl.value = selectedControl.value === 'from' ? 'to' : 'from';
+    }
+
     function openPopover(control: 'from' | 'to'): void {
       if (!props.readonly && !props.disabled) {
         const popoverInstance = popover.value;
@@ -391,8 +420,8 @@ export default defineComponent({
       }
     }
 
-    function formatDateAlt(value?: Date): string {
-      return value?.toLocaleString(navigator.language, {
+    function formatDateAlt(value: DateTimePickerModelValue): string {
+      return value?.toLocaleString(resolvedLocale.value, {
         dateStyle: 'medium',
         timeZone: 'UTC',
       }) ?? '--';
@@ -403,14 +432,21 @@ export default defineComponent({
 
     return {
       root,
+      rootStyles,
+
       inputBox,
       inputBoxRoot,
+
       popover,
       popoverState,
-      rootStyles,
       popoverStyles,
+
+      resolvedFormat,
+      resolvedLocale,
+
       initialValueFrom,
       initialValueTo,
+
       proxyModelValue,
       draftModelValue,
       draftModelValueFrom,
@@ -418,12 +454,14 @@ export default defineComponent({
       genericDraftModelValue,
       selectedControl,
       isInvalidDraftModelValue,
-      switchSelectedControl,
+
       apply,
       reset,
+      switchSelectedControl,
       openPopover,
       closePopover,
       formatDateAlt,
+
       isDesktop,
       isMobile,
     };

package/src/components/or-date-range-picker-v3/index.ts

@@ -1 +1,2 @@
 export { default as OrDateRangePickerV3 } from './OrDateRangePicker.vue';
+export * from './types';

package/src/components/or-date-range-picker-v3/types.ts

@@ -0,0 +1,3 @@
+import { DateTimePickerModelValue } from '../or-date-time-picker-v3';
+
+export type DateRangePickerModelValue = [DateTimePickerModelValue, DateTimePickerModelValue] | null | undefined;

package/src/components/or-date-time-format-v3/OrDateTimeFormat.vue

@@ -3,14 +3,20 @@
     :ref="'root'"
     :class="rootStyles"
   >
-    {{ modelValue ? `${formatDate(modelValue)} ${formatTime(modelValue, timeFormat)}` : placeholder }}
+    <template v-if="modelValue">
+      {{ `${formatDate(modelValue, resolvedDateFormat, resolvedLocale)} ${formatTime(modelValue, resolvedTimeFormat, resolvedLocale)}` }}
+    </template>
+
+    <template v-else>
+      {{ placeholder }}
+    </template>
   </div>
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref } from 'vue-demi';
-import { DateTimePickerTimeFormat, formatDate, formatTime } from '../or-date-time-picker-v3';
-import { DateTimeFormat } from './styles';
+import { PropType, computed, defineComponent, inject, ref } from 'vue-demi';
+import { DateFormat, DateTimePickerDateFormat, DateTimePickerModelValue, DateTimePickerTimeFormat, Locale, TimeFormat, formatDate, formatTime } from '../or-date-time-picker-v3';
+import * as Styles from './styles';
 
 export default defineComponent({
   name: 'OrDateTimeFormat',
@@ -22,13 +28,23 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Date,
+      type: undefined as unknown as PropType<DateTimePickerModelValue>,
+      default: undefined,
+    },
+
+    dateFormat: {
+      type: String as PropType<`${DateTimePickerDateFormat}`>,
       default: undefined,
     },
 
     timeFormat: {
       type: String as PropType<`${DateTimePickerTimeFormat}`>,
-      default: () => DateTimePickerTimeFormat.Auto,
+      default: undefined,
+    },
+
+    locale: {
+      type: String,
+      default: undefined,
     },
 
     placeholder: {
@@ -41,20 +57,36 @@ export default defineComponent({
     'root',
   ],
 
-  setup() {
-    // Refs
+  setup(props) {
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
-    // Styles
     const rootStyles = computed(() => [
       'or-date-time-format-v3',
-      ...DateTimeFormat,
+      ...Styles.DateTimeFormat,
     ]);
 
+    // Options
+    const resolvedDateFormat = computed(() => {
+      return props.dateFormat ?? inject(DateFormat, DateTimePickerDateFormat.Short);
+    });
+
+    const resolvedTimeFormat = computed(() => {
+      return props.timeFormat ?? inject(TimeFormat, DateTimePickerTimeFormat.Auto);
+    });
+
+    const resolvedLocale = computed(() => {
+      return props.locale ?? inject(Locale, navigator.language);
+    });
+
     return {
       root,
       rootStyles,
 
+      resolvedDateFormat,
+      resolvedTimeFormat,
+      resolvedLocale,
+
       formatDate,
       formatTime,
     };

package/src/components/or-date-time-picker-v3/OrDateTimePicker.vue

@@ -33,6 +33,8 @@
         v-model="draftModelValue"
         v-dropdown-open="toggleDatePopover"
         v-dropdown-close="closeDatePopover"
+        :format="resolvedDateFormat"
+        :locale="resolvedLocale"
         :selected="datePopover && datePopover.state === 'open'"
         :required="required"
         :readonly="readonly"
@@ -43,7 +45,8 @@
         v-model="draftModelValue"
         v-dropdown-open="toggleTimePopover"
         v-dropdown-close="closeTimePopover"
-        :format="timeFormat"
+        :format="resolvedTimeFormat"
+        :locale="resolvedLocale"
         :selected="timePopover && timePopover.state === 'open'"
         :required="required"
         :readonly="readonly"
@@ -72,6 +75,7 @@
 
         <OrDateTimePickerMonthSelect
           v-model="initialValue"
+          :locale="resolvedLocale"
           :year-filter="yearFilter"
           :month-filter="monthFilter"
         />
@@ -79,6 +83,8 @@
         <OrDateTimePickerDateSelect
           v-model="draftModelValue"
           :initial-value="initialValue"
+          :format="resolvedDateFormat"
+          :locale="resolvedLocale"
           :date-filter="dateFilter"
         />
 
@@ -112,7 +118,8 @@
         <OrDateTimePickerTimeSelect
           v-model="draftModelValue"
           :initial-value="initialValue"
-          :format="timeFormat"
+          :format="resolvedTimeFormat"
+          :locale="resolvedLocale"
           :hours-filter="hoursFilter"
           :minutes-filter="minutesFilter"
         />
@@ -164,7 +171,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
+import { PropType, computed, defineComponent, inject, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useProxyModelValue } from '../../hooks';
 import { OrErrorV3 as OrError } from '../or-error-v3';
@@ -175,9 +182,9 @@ import { InputBoxSize, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { OrDateTimePickerDateControl, OrDateTimePickerDateSelect, OrDateTimePickerMobileControl, OrDateTimePickerMonthSelect, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader, OrDateTimePickerTimeControl, OrDateTimePickerTimeSelect } from './partials';
-import { DateTimePickerTimeFormat } from './props';
-import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './styles';
-import { FilterFunction } from './types';
+import * as Styles from './styles';
+import { DateFormat, Locale, TimeFormat } from './tokens';
+import { DateTimePickerDateFormat, DateTimePickerFilterFunction, DateTimePickerModelValue, DateTimePickerTimeFormat } from './types';
 import { getCurrentDate } from './utils';
 
 export default defineComponent({
@@ -213,37 +220,47 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Date,
+      type: undefined as unknown as PropType<DateTimePickerModelValue>,
+      default: undefined,
+    },
+
+    dateFormat: {
+      type: String as PropType<`${DateTimePickerDateFormat}`>,
       default: undefined,
     },
 
     timeFormat: {
       type: String as PropType<`${DateTimePickerTimeFormat}`>,
-      default: () => DateTimePickerTimeFormat.Auto,
+      default: undefined,
+    },
+
+    locale: {
+      type: String,
+      default: undefined,
     },
 
     yearFilter: {
-      type: Function as PropType<FilterFunction>,
+      type: Function as PropType<DateTimePickerFilterFunction>,
       default: undefined,
     },
 
     monthFilter: {
-      type: Function as PropType<FilterFunction>,
+      type: Function as PropType<DateTimePickerFilterFunction>,
       default: undefined,
     },
 
     dateFilter: {
-      type: Function as PropType<FilterFunction>,
+      type: Function as PropType<DateTimePickerFilterFunction>,
       default: undefined,
     },
 
     hoursFilter: {
-      type: Function as PropType<FilterFunction>,
+      type: Function as PropType<DateTimePickerFilterFunction>,
       default: undefined,
     },
 
     minutesFilter: {
-      type: Function as PropType<FilterFunction>,
+      type: Function as PropType<DateTimePickerFilterFunction>,
       default: undefined,
     },
 
@@ -305,34 +322,46 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
+    const rootStyles = computed(() => [
+      'or-date-time-picker-v3',
+      ...Styles.DateTimePicker,
+    ]);
+
     const inputBox = ref<InstanceType<typeof OrInputBox>>();
     const inputBoxRoot = computed(() => inputBox.value?.root);
 
     const datePopover = ref<InstanceType<typeof OrPopover>>();
     const datePopoverState = computed(() => datePopover.value?.state);
 
-    const timePopover = ref<InstanceType<typeof OrPopover>>();
-    const timePopoverState = computed(() => timePopover.value?.state);
-
-    // Styles
-    const rootStyles = computed(() => [
-      'or-date-time-picker-v3',
-      ...DateTimePicker,
-    ]);
-
     const datePopoverStyles = computed(() => [
       'or-date-time-picker-date-popover-v3',
-      ...DateTimePickerDatePopover,
+      ...Styles.DateTimePickerDatePopover,
     ]);
 
+    const timePopover = ref<InstanceType<typeof OrPopover>>();
+    const timePopoverState = computed(() => timePopover.value?.state);
+
     const timePopoverStyles = computed(() => [
       'or-date-time-picker-time-popover-v3',
-      ...DateTimePickerTimePopover,
+      ...Styles.DateTimePickerTimePopover,
     ]);
 
+    // Options
+    const resolvedDateFormat = computed(() => {
+      return props.dateFormat ?? inject(DateFormat, DateTimePickerDateFormat.Short);
+    });
+
+    const resolvedTimeFormat = computed(() => {
+      return props.timeFormat ?? inject(TimeFormat, DateTimePickerTimeFormat.Auto);
+    });
+
+    const resolvedLocale = computed(() => {
+      return props.locale ?? inject(Locale, navigator.language);
+    });
+
     // State
     const initialValue = ref(props.modelValue ?? getCurrentDate());
 
@@ -432,36 +461,45 @@ export default defineComponent({
       }
     }
 
-    function formatDateAlt(value?: Date): string {
-      return value?.toLocaleString(navigator.language, {
+    function formatDateAlt(value: DateTimePickerModelValue): string {
+      return value?.toLocaleString(resolvedLocale.value, {
         dateStyle: 'medium',
         timeZone: 'UTC',
       }) ?? '--';
     }
 
-    function formatTimeAlt(value?: Date): string {
-      return value?.toLocaleString(navigator.language, {
+    function formatTimeAlt(value: DateTimePickerModelValue): string {
+      return value?.toLocaleString(resolvedLocale.value, {
         timeStyle: 'short',
-        hourCycle: props.timeFormat !== DateTimePickerTimeFormat.Auto ? props.timeFormat : undefined,
+        hourCycle: resolvedTimeFormat.value !== DateTimePickerTimeFormat.Auto ? resolvedTimeFormat.value : undefined,
         timeZone: 'UTC',
       }) ?? '--';
     }
 
     return {
       root,
+      rootStyles,
+
       inputBox,
       inputBoxRoot,
+
       datePopover,
       datePopoverState,
+      datePopoverStyles,
+
       timePopover,
       timePopoverState,
-      rootStyles,
-      datePopoverStyles,
       timePopoverStyles,
+
+      resolvedDateFormat,
+      resolvedTimeFormat,
+      resolvedLocale,
+
       initialValue,
       proxyModelValue,
       draftModelValue,
       isInvalidDraftModelValue,
+
       apply,
       reset,
       toggleDatePopover,

package/src/components/or-date-time-picker-v3/index.ts

@@ -1,5 +1,5 @@
 export { default as OrDateTimePickerV3 } from './OrDateTimePicker.vue';
 export * from './partials';
-export * from './props';
+export * from './tokens';
 export * from './types';
 export * from './utils';

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-control/OrDateTimePickerDateControl.vue

@@ -10,7 +10,7 @@
     @keydown.prevent
   >
     <template v-if="proxyModelValue">
-      {{ formatDate(proxyModelValue) }}
+      {{ formatDate(proxyModelValue, format, locale) }}
     </template>
 
     <template v-else>
@@ -25,10 +25,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, toRef } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
 import { useProxyModelValue } from '../../../../hooks';
+import { DateTimePickerDateFormat, DateTimePickerModelValue } from '../../types';
 import { formatDate, getDatePlaceholder } from '../../utils';
-import { DateTimePickerDateControl, DateTimePickerDateControlPlaceholder } from './styles';
+import * as Styles from './styles';
 
 export default defineComponent({
   name: 'OrDateTimePickerDateControl',
@@ -40,10 +41,20 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Date,
+      type: undefined as unknown as PropType<DateTimePickerModelValue>,
       default: undefined,
     },
 
+    format: {
+      type: String as PropType<`${DateTimePickerDateFormat}`>,
+      required: true,
+    },
+
+    locale: {
+      type: String,
+      required: true,
+    },
+
     selected: {
       type: Boolean,
       default: false,
@@ -70,26 +81,29 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
-    // Styles
     const rootStyles = computed(() => [
       'or-date-time-picker-date-control-v3',
-      ...DateTimePickerDateControl,
+      ...Styles.DateTimePickerDateControl,
     ]);
 
     const placeholderStyles = computed(() => [
-      ...DateTimePickerDateControlPlaceholder,
+      ...Styles.DateTimePickerDateControlPlaceholder,
     ]);
 
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const placeholder = getDatePlaceholder();
+
+    const placeholder = computed(() => {
+      return getDatePlaceholder(props.format, props.locale);
+    });
 
     return {
       root,
       rootStyles,
+
       placeholderStyles,
 
       proxyModelValue,