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

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.vue.d.ts

@@ -1,8 +1,9 @@
 import { PropType } from 'vue-demi';
-import { FilterFunction } from '../or-date-time-picker-v3';
+import { DateTimePickerFilterFunction, DateTimePickerModelValue } from '../or-date-time-picker-v3';
 import { InputBoxSize } from '../or-input-box-v3';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     inputBox: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -15,32 +16,41 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     popoverStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    resolvedFormat: import("@vue/composition-api").ComputedRef<"short" | "medium" | "long">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     initialValue: import("@vue/composition-api").Ref<Date>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<Date>;
-    draftModelValue: import("@vue/composition-api").Ref<Date>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<DateTimePickerModelValue>;
+    draftModelValue: import("@vue/composition-api").Ref<DateTimePickerModelValue>;
     isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
     openPopover: () => void;
     closePopover: () => void;
-    formatDateAlt: (value?: Date) => string;
+    formatDateAlt: (value: DateTimePickerModelValue) => string;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
-        type: DateConstructor;
+        type: PropType<DateTimePickerModelValue>;
+        default: undefined;
+    };
+    format: {
+        type: PropType<"short" | "medium" | "long">;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
         default: undefined;
     };
     yearFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     monthFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     dateFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     size: {
@@ -77,19 +87,27 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
-        type: DateConstructor;
+        type: PropType<DateTimePickerModelValue>;
+        default: undefined;
+    };
+    format: {
+        type: PropType<"short" | "medium" | "long">;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
         default: undefined;
     };
     yearFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     monthFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     dateFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     size: {
@@ -125,10 +143,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: boolean;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    modelValue: Date;
-    yearFilter: FilterFunction;
-    monthFilter: FilterFunction;
-    dateFilter: FilterFunction;
+    modelValue: DateTimePickerModelValue;
+    format: "short" | "medium" | "long";
+    locale: string;
+    yearFilter: DateTimePickerFilterFunction;
+    monthFilter: DateTimePickerFilterFunction;
+    dateFilter: DateTimePickerFilterFunction;
     size: "m" | "s";
     label: string;
     hint: string;
@@ -141,6 +161,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     inputBox: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -153,22 +174,25 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     popoverStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    resolvedFormat: import("@vue/composition-api").ComputedRef<"short" | "medium" | "long">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     initialValue: import("@vue/composition-api").Ref<Date>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<Date>;
-    draftModelValue: import("@vue/composition-api").Ref<Date>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<DateTimePickerModelValue>;
+    draftModelValue: import("@vue/composition-api").Ref<DateTimePickerModelValue>;
     isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
     openPopover: () => void;
     closePopover: () => void;
-    formatDateAlt: (value?: Date) => string;
+    formatDateAlt: (value: DateTimePickerModelValue) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
-    modelValue: Date;
-    yearFilter: FilterFunction;
-    monthFilter: FilterFunction;
-    dateFilter: FilterFunction;
+    modelValue: DateTimePickerModelValue;
+    format: "short" | "medium" | "long";
+    locale: string;
+    yearFilter: DateTimePickerFilterFunction;
+    monthFilter: DateTimePickerFilterFunction;
+    dateFilter: DateTimePickerFilterFunction;
     size: "m" | "s";
     label: string;
     hint: string;
@@ -180,10 +204,12 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: Date;
-    yearFilter: FilterFunction;
-    monthFilter: FilterFunction;
-    dateFilter: FilterFunction;
+    modelValue: DateTimePickerModelValue;
+    format: "short" | "medium" | "long";
+    locale: string;
+    yearFilter: DateTimePickerFilterFunction;
+    monthFilter: DateTimePickerFilterFunction;
+    dateFilter: DateTimePickerFilterFunction;
     size: "m" | "s";
     label: string;
     hint: string;

package/dist/bundled/v2/components/OrDateRangePickerV3/OrDateRangePicker.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
+import { defineComponent, ref, computed, inject, watch, toRef } from 'vue-demi';
 import { DateRangePicker, DateRangePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -8,11 +8,13 @@ import __vue_component__$5 from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$6 from '../OrLabelV3/OrLabel.js';
 import __vue_component__$7 from '../OrPopoverV3/OrPopover.js';
 import { getNextMonthDate } from '../OrDateTimePickerV3/utils/getNextMonthDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-980a9ada.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-a0ea3524.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-d0681d68.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-31d1e247.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
+import { DateFormat, Locale } from '../OrDateTimePickerV3/tokens.js';
+import { D as DateTimePickerDateFormat } from '../../types-6a847182.js';
 import { getCurrentDate } from '../OrDateTimePickerV3/utils/getCurrentDate.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import useResponsive from '../../hooks/useResponsive/useResponsive.js';
@@ -45,7 +47,15 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Object,
+      type: undefined,
+      default: undefined
+    },
+    format: {
+      type: String,
+      default: undefined
+    },
+    locale: {
+      type: String,
       default: undefined
     },
     size: {
@@ -85,8 +95,9 @@ var script = defineComponent({
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
     var _a, _b, _c, _d, _e;
-    // Refs
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-date-range-picker-v3', ...DateRangePicker]);
     const inputBox = ref();
     const inputBoxRoot = computed(() => {
       var _a;
@@ -97,9 +108,16 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-date-range-picker-v3', ...DateRangePicker]);
     const popoverStyles = computed(() => ['or-date-range-picker-popover-v3', ...DateRangePickerPopover]);
+    // Options
+    const resolvedFormat = computed(() => {
+      var _a;
+      return (_a = props.format) !== null && _a !== void 0 ? _a : inject(DateFormat, DateTimePickerDateFormat.Short);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
     // State
     const initialValueFrom = ref((_b = (_a = props.modelValue) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : getCurrentDate());
     const initialValueTo = ref((_d = (_c = props.modelValue) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : getNextMonthDate());
@@ -151,9 +169,6 @@ var script = defineComponent({
       return true;
     });
     // Methods
-    function switchSelectedControl() {
-      selectedControl.value = selectedControl.value === 'from' ? 'to' : 'from';
-    }
     function apply() {
       proxyModelValue.value = draftModelValue.value;
     }
@@ -161,6 +176,9 @@ var script = defineComponent({
       var _a;
       draftModelValue.value = (_a = proxyModelValue.value) !== null && _a !== void 0 ? _a : [undefined, undefined];
     }
+    function switchSelectedControl() {
+      selectedControl.value = selectedControl.value === 'from' ? 'to' : 'from';
+    }
     function openPopover(control) {
       if (!props.readonly && !props.disabled) {
         const popoverInstance = popover.value;
@@ -178,7 +196,7 @@ var script = defineComponent({
     }
     function formatDateAlt(value) {
       var _a;
-      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(resolvedLocale.value, {
         dateStyle: 'medium',
         timeZone: 'UTC'
       })) !== null && _a !== void 0 ? _a : '--';
@@ -190,12 +208,14 @@ var script = defineComponent({
     } = useResponsive();
     return {
       root,
+      rootStyles,
       inputBox,
       inputBoxRoot,
       popover,
       popoverState,
-      rootStyles,
       popoverStyles,
+      resolvedFormat,
+      resolvedLocale,
       initialValueFrom,
       initialValueTo,
       proxyModelValue,
@@ -205,9 +225,9 @@ var script = defineComponent({
       genericDraftModelValue,
       selectedControl,
       isInvalidDraftModelValue,
-      switchSelectedControl,
       apply,
       reset,
+      switchSelectedControl,
       openPopover,
       closePopover,
       formatDateAlt,
@@ -304,6 +324,8 @@ var __vue_render__ = function () {
       expression: "closePopover"
     }],
     attrs: {
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale,
       "selected": _vm.popover && _vm.popover.state === 'open' && _vm.selectedControl === 'from',
       "required": _vm.required,
       "readonly": _vm.readonly,
@@ -331,6 +353,8 @@ var __vue_render__ = function () {
       expression: "closePopover"
     }],
     attrs: {
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale,
       "selected": _vm.popover && _vm.popover.state === 'open' && _vm.selectedControl === 'to',
       "required": _vm.required,
       "readonly": _vm.readonly,
@@ -385,6 +409,9 @@ var __vue_render__ = function () {
   }, [_vm.isDesktop || _vm.isMobile && _vm.selectedControl === 'from' ? [_c('div', {
     class: ['layout-column', 'grow']
   }, [_c('OrDateTimePickerMonthSelect', {
+    attrs: {
+      "locale": _vm.resolvedLocale
+    },
     model: {
       value: _vm.initialValueFrom,
       callback: function ($$v) {
@@ -395,6 +422,8 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrDateTimePickerDateSelect', {
     attrs: {
       "initial-value": _vm.initialValueFrom,
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale,
       "range-start": _vm.draftModelValueFrom || _vm.initialValueFrom,
       "range-end": _vm.draftModelValueTo || _vm.initialValueTo
     },
@@ -413,6 +442,9 @@ var __vue_render__ = function () {
   })], 1)] : _vm._e(), _vm._v(" "), _vm.isDesktop || _vm.isMobile && _vm.selectedControl === 'to' ? [_c('div', {
     class: ['layout-column', 'grow']
   }, [_c('OrDateTimePickerMonthSelect', {
+    attrs: {
+      "locale": _vm.resolvedLocale
+    },
     model: {
       value: _vm.initialValueTo,
       callback: function ($$v) {
@@ -423,6 +455,8 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrDateTimePickerDateSelect', {
     attrs: {
       "initial-value": _vm.initialValueTo,
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale,
       "range-start": _vm.draftModelValueFrom || _vm.initialValueFrom,
       "range-end": _vm.draftModelValueTo || _vm.initialValueTo
     },

package/dist/bundled/v2/components/OrDateRangePickerV3/OrDateRangePicker.vue.d.ts

@@ -1,7 +1,10 @@
 import { PropType } from 'vue-demi';
+import { DateTimePickerModelValue } from '../or-date-time-picker-v3';
 import { InputBoxSize } from '../or-input-box-v3';
+import { DateRangePickerModelValue } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     inputBox: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -14,28 +17,37 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     popoverStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    resolvedFormat: import("@vue/composition-api").ComputedRef<"short" | "medium" | "long">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     initialValueFrom: import("@vue/composition-api").Ref<Date>;
     initialValueTo: import("@vue/composition-api").Ref<Date>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[Date, Date]>;
-    draftModelValue: import("@vue/composition-api").Ref<[Date | undefined, Date | undefined]>;
-    draftModelValueFrom: import("@vue/composition-api").WritableComputedRef<Date | undefined>;
-    draftModelValueTo: import("@vue/composition-api").WritableComputedRef<Date | undefined>;
-    genericDraftModelValue: import("@vue/composition-api").WritableComputedRef<Date | undefined>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<DateRangePickerModelValue>;
+    draftModelValue: import("@vue/composition-api").Ref<[DateTimePickerModelValue, DateTimePickerModelValue]>;
+    draftModelValueFrom: import("@vue/composition-api").WritableComputedRef<DateTimePickerModelValue>;
+    draftModelValueTo: import("@vue/composition-api").WritableComputedRef<DateTimePickerModelValue>;
+    genericDraftModelValue: import("@vue/composition-api").WritableComputedRef<DateTimePickerModelValue>;
     selectedControl: import("@vue/composition-api").Ref<"from" | "to">;
     isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
-    switchSelectedControl: () => void;
     apply: () => void;
     reset: () => void;
+    switchSelectedControl: () => void;
     openPopover: (control: 'from' | 'to') => void;
     closePopover: () => void;
-    formatDateAlt: (value?: Date) => string;
+    formatDateAlt: (value: DateTimePickerModelValue) => string;
     isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
     isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
-        type: PropType<[Date, Date]>;
+        type: PropType<DateRangePickerModelValue>;
+        default: undefined;
+    };
+    format: {
+        type: PropType<"short" | "medium" | "long">;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
         default: undefined;
     };
     size: {
@@ -72,7 +84,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
-        type: PropType<[Date, Date]>;
+        type: PropType<DateRangePickerModelValue>;
+        default: undefined;
+    };
+    format: {
+        type: PropType<"short" | "medium" | "long">;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
         default: undefined;
     };
     size: {
@@ -108,7 +128,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: boolean;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    modelValue: [Date, Date];
+    modelValue: DateRangePickerModelValue;
+    format: "short" | "medium" | "long";
+    locale: string;
     size: "m" | "s";
     label: string;
     hint: string;
@@ -121,6 +143,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     inputBox: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -133,27 +156,30 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         [x: number]: string;
     } | {}, true> | undefined>;
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
-    rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     popoverStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    resolvedFormat: import("@vue/composition-api").ComputedRef<"short" | "medium" | "long">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     initialValueFrom: import("@vue/composition-api").Ref<Date>;
     initialValueTo: import("@vue/composition-api").Ref<Date>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[Date, Date]>;
-    draftModelValue: import("@vue/composition-api").Ref<[Date | undefined, Date | undefined]>;
-    draftModelValueFrom: import("@vue/composition-api").WritableComputedRef<Date | undefined>;
-    draftModelValueTo: import("@vue/composition-api").WritableComputedRef<Date | undefined>;
-    genericDraftModelValue: import("@vue/composition-api").WritableComputedRef<Date | undefined>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<DateRangePickerModelValue>;
+    draftModelValue: import("@vue/composition-api").Ref<[DateTimePickerModelValue, DateTimePickerModelValue]>;
+    draftModelValueFrom: import("@vue/composition-api").WritableComputedRef<DateTimePickerModelValue>;
+    draftModelValueTo: import("@vue/composition-api").WritableComputedRef<DateTimePickerModelValue>;
+    genericDraftModelValue: import("@vue/composition-api").WritableComputedRef<DateTimePickerModelValue>;
     selectedControl: import("@vue/composition-api").Ref<"from" | "to">;
     isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
-    switchSelectedControl: () => void;
     apply: () => void;
     reset: () => void;
+    switchSelectedControl: () => void;
     openPopover: (control: 'from' | 'to') => void;
     closePopover: () => void;
-    formatDateAlt: (value?: Date) => string;
+    formatDateAlt: (value: DateTimePickerModelValue) => string;
     isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
     isMobile: import("@vue/composition-api").ComputedRef<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
-    modelValue: [Date, Date];
+    modelValue: DateRangePickerModelValue;
+    format: "short" | "medium" | "long";
+    locale: string;
     size: "m" | "s";
     label: string;
     hint: string;
@@ -165,7 +191,9 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: [Date, Date];
+    modelValue: DateRangePickerModelValue;
+    format: "short" | "medium" | "long";
+    locale: string;
     size: "m" | "s";
     label: string;
     hint: string;

package/dist/bundled/v2/components/OrDateRangePickerV3/index.d.ts

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

package/dist/bundled/v2/components/OrDateRangePickerV3/types.d.ts

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

package/dist/bundled/v2/components/OrDateTimeFormatV3/OrDateTimeFormat.js

@@ -1,6 +1,7 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, inject } from 'vue-demi';
 import { DateTimeFormat } from './styles.js';
-import { DateTimePickerTimeFormat } from '../OrDateTimePickerV3/props.js';
+import { DateFormat, TimeFormat, Locale } from '../OrDateTimePickerV3/tokens.js';
+import { D as DateTimePickerDateFormat, a as DateTimePickerTimeFormat } from '../../types-6a847182.js';
 import { formatDate } from '../OrDateTimePickerV3/utils/formatDate.js';
 import { formatTime } from '../OrDateTimePickerV3/utils/formatTime.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
@@ -13,12 +14,20 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
+      default: undefined
+    },
+    dateFormat: {
+      type: String,
       default: undefined
     },
     timeFormat: {
       type: String,
-      default: () => DateTimePickerTimeFormat.Auto
+      default: undefined
+    },
+    locale: {
+      type: String,
+      default: undefined
     },
     placeholder: {
       type: String,
@@ -26,14 +35,29 @@ var script = defineComponent({
     }
   },
   expose: ['root'],
-  setup() {
-    // Refs
+  setup(props) {
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-format-v3', ...DateTimeFormat]);
+    // Options
+    const resolvedDateFormat = computed(() => {
+      var _a;
+      return (_a = props.dateFormat) !== null && _a !== void 0 ? _a : inject(DateFormat, DateTimePickerDateFormat.Short);
+    });
+    const resolvedTimeFormat = computed(() => {
+      var _a;
+      return (_a = props.timeFormat) !== null && _a !== void 0 ? _a : inject(TimeFormat, DateTimePickerTimeFormat.Auto);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
     return {
       root,
       rootStyles,
+      resolvedDateFormat,
+      resolvedTimeFormat,
+      resolvedLocale,
       formatDate,
       formatTime
     };
@@ -51,7 +75,7 @@ var __vue_render__ = function () {
   return _c('div', {
     ref: 'root',
     class: _vm.rootStyles
-  }, [_vm._v("\n  " + _vm._s(_vm.modelValue ? _vm.formatDate(_vm.modelValue) + " " + _vm.formatTime(_vm.modelValue, _vm.timeFormat) : _vm.placeholder) + "\n")]);
+  }, [_vm.modelValue ? [_vm._v("\n    " + _vm._s(_vm.formatDate(_vm.modelValue, _vm.resolvedDateFormat, _vm.resolvedLocale) + " " + _vm.formatTime(_vm.modelValue, _vm.resolvedTimeFormat, _vm.resolvedLocale)) + "\n  ")] : [_vm._v("\n    " + _vm._s(_vm.placeholder) + "\n  ")]], 2);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrDateTimeFormatV3/OrDateTimeFormat.vue.d.ts

@@ -1,18 +1,29 @@
 import { PropType } from 'vue-demi';
-import { DateTimePickerTimeFormat, formatDate, formatTime } from '../or-date-time-picker-v3';
+import { DateTimePickerModelValue, formatDate, formatTime } from '../or-date-time-picker-v3';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    resolvedDateFormat: import("@vue/composition-api").ComputedRef<"short" | "medium" | "long">;
+    resolvedTimeFormat: import("@vue/composition-api").ComputedRef<"auto" | "h12" | "h23">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     formatDate: typeof formatDate;
     formatTime: typeof formatTime;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
-        type: DateConstructor;
+        type: PropType<DateTimePickerModelValue>;
+        default: undefined;
+    };
+    dateFormat: {
+        type: PropType<"short" | "medium" | "long">;
         default: undefined;
     };
     timeFormat: {
         type: PropType<"auto" | "h12" | "h23">;
-        default: () => DateTimePickerTimeFormat.Auto;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
+        default: undefined;
     };
     placeholder: {
         type: StringConstructor;
@@ -20,33 +31,50 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
-        type: DateConstructor;
+        type: PropType<DateTimePickerModelValue>;
+        default: undefined;
+    };
+    dateFormat: {
+        type: PropType<"short" | "medium" | "long">;
         default: undefined;
     };
     timeFormat: {
         type: PropType<"auto" | "h12" | "h23">;
-        default: () => DateTimePickerTimeFormat.Auto;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
+        default: undefined;
     };
     placeholder: {
         type: StringConstructor;
         default: undefined;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
+    dateFormat: "short" | "medium" | "long";
     timeFormat: "auto" | "h12" | "h23";
+    locale: string;
     placeholder: string;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    resolvedDateFormat: import("@vue/composition-api").ComputedRef<"short" | "medium" | "long">;
+    resolvedTimeFormat: import("@vue/composition-api").ComputedRef<"auto" | "h12" | "h23">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     formatDate: typeof formatDate;
     formatTime: typeof formatTime;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
+    dateFormat: "short" | "medium" | "long";
     timeFormat: "auto" | "h12" | "h23";
+    locale: string;
     placeholder: string;
 } & {}, {
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
+    dateFormat: "short" | "medium" | "long";
     timeFormat: "auto" | "h12" | "h23";
+    locale: string;
     placeholder: string;
 }, true>);
 export default _default;