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

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

@@ -1,21 +1,29 @@
 import { PropType } from 'vue-demi';
-import { FilterFunction } from '../or-date-time-picker-v3';
+import { DateTimePickerDateFormat, DateTimePickerFilterFunction, DateTimePickerModelValue } from '../or-date-time-picker-v3';
 import { InputBoxSize } from '../or-input-box-v3';
 declare const _default: import("vue-demi").DefineComponent<{
     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: {
@@ -52,12 +60,14 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
     inputBox: import("vue-demi").Ref<any>;
     inputBoxRoot: import("vue-demi").ComputedRef<any>;
     popover: import("vue-demi").Ref<any>;
     popoverState: import("vue-demi").ComputedRef<any>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
     popoverStyles: import("vue-demi").ComputedRef<string[]>;
+    resolvedFormat: import("vue-demi").ComputedRef<DateTimePickerDateFormat.Short | "short" | "medium" | "long">;
+    resolvedLocale: import("vue-demi").ComputedRef<string>;
     initialValue: import("vue-demi").Ref<{
         toString: () => string;
         toDateString: () => string;
@@ -121,7 +131,7 @@ declare const _default: import("vue-demi").DefineComponent<{
             (hint: string): string | number;
         };
     }>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<Date | undefined>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<DateTimePickerModelValue>;
     draftModelValue: import("vue-demi").Ref<{
         toString: () => string;
         toDateString: () => string;
@@ -184,28 +194,36 @@ declare const _default: import("vue-demi").DefineComponent<{
             (hint: "number"): number;
             (hint: string): string | number;
         };
-    } | undefined>;
+    } | null | undefined>;
     isInvalidDraftModelValue: import("vue-demi").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
     openPopover: () => void;
     closePopover: () => void;
-    formatDateAlt: (value?: Date) => string;
+    formatDateAlt: (value: DateTimePickerModelValue) => string;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "keydown" | "keyup" | "focus" | "blur")[], "update:modelValue" | "keydown" | "keyup" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").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: {
@@ -247,10 +265,12 @@ declare const _default: import("vue-demi").DefineComponent<{
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...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/v3/components/OrDatePickerV3/index.js

@@ -1 +1 @@
-export { s as OrDatePickerV3 } from '../OrDatePickerV3-d5f8c11a.js';
+export { s as OrDatePickerV3 } from '../OrDatePickerV3-7e493ca1.js';

package/dist/bundled/v3/components/OrDatePickerV3/styles.js

@@ -1 +1 @@
-export { D as DatePicker, a as DatePickerPopover } from '../OrDatePickerV3-d5f8c11a.js';
+export { D as DatePicker, a as DatePickerPopover } from '../OrDatePickerV3-7e493ca1.js';

package/dist/bundled/v3/components/{OrDatePickerV3-d5f8c11a.js → OrDatePickerV3-7e493ca1.js}

@@ -1,12 +1,12 @@
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, Fragment, createElementVNode } from 'vue';
-import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
-import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6, g as getCurrentDate } from './OrDateTimePickerV3-84c0fee3.js';
+import { defineComponent, ref, computed, inject, watch, toRef } from 'vue-demi';
+import { s as script$1, b as script$2, c as script$3, d as script$4, e as script$5, g as script$6, D as DateFormat, a as DateTimePickerDateFormat, L as Locale, h as getCurrentDate } from './OrDateTimePickerV3-345a6c12.js';
 import { s as script$7 } from './OrErrorV3-b04d76aa.js';
 import { s as script$8 } from './OrHintV3-c8ac5975.js';
 import { s as script$9 } from './OrIconV3-34670800.js';
 import { s as script$a } from './OrIconButtonV3-79f8c1eb.js';
 import { s as script$b, I as InputBoxSize } from './OrInputBoxV3-dbc63649.js';
-import { s as script$c } from './OrLabelV3-b1cd132a.js';
+import { s as script$c } from './OrLabelV3-23a42d9d.js';
 import { s as script$d } from './OrPopoverV3-3e80d95c.js';
 import { DropdownClose } from '../directives/dropdown-close.js';
 import { DropdownOpen } from '../directives/dropdown-open.js';
@@ -48,7 +48,15 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
+      default: undefined
+    },
+    format: {
+      type: String,
+      default: undefined
+    },
+    locale: {
+      type: String,
       default: undefined
     },
     yearFilter: {
@@ -100,8 +108,9 @@ var script = defineComponent({
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
     var _a;
-    // Refs
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-date-picker-v3', ...DatePicker]);
     const inputBox = ref();
     const inputBoxRoot = computed(() => {
       var _a;
@@ -112,9 +121,16 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-date-picker-v3', ...DatePicker]);
     const popoverStyles = computed(() => ['or-date-picker-popover-v3', ...DatePickerPopover]);
+    // 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 initialValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : getCurrentDate());
     watch(() => props.modelValue, value => {
@@ -163,19 +179,21 @@ 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 : '--';
     }
     return {
       root,
+      rootStyles,
       inputBox,
       inputBoxRoot,
       popover,
       popoverState,
-      rootStyles,
       popoverStyles,
+      resolvedFormat,
+      resolvedLocale,
       initialValue,
       proxyModelValue,
       draftModelValue,
@@ -245,11 +263,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       modelValue: _ctx.draftModelValue,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValue = $event),
       class: normalizeClass(['!border-0']),
+      format: _ctx.resolvedFormat,
+      locale: _ctx.resolvedLocale,
       selected: _ctx.popover && _ctx.popover.state === 'open',
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.openPopover], [_directive_dropdown_close, _ctx.closePopover]]), createVNode(_component_OrPopover, {
+    }, null, 8 /* PROPS */, ["modelValue", "format", "locale", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.openPopover], [_directive_dropdown_close, _ctx.closePopover]]), createVNode(_component_OrPopover, {
       ref: 'popover',
       class: normalizeClass(_ctx.popoverStyles),
       "custom-styles": _ctx.popoverStyles,
@@ -275,14 +295,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }), createVNode(_component_OrDateTimePickerMonthSelect, {
         modelValue: _ctx.initialValue,
         "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.initialValue = $event),
+        locale: _ctx.resolvedLocale,
         "year-filter": _ctx.yearFilter,
         "month-filter": _ctx.monthFilter
-      }, null, 8 /* PROPS */, ["modelValue", "year-filter", "month-filter"]), createVNode(_component_OrDateTimePickerDateSelect, {
+      }, null, 8 /* PROPS */, ["modelValue", "locale", "year-filter", "month-filter"]), createVNode(_component_OrDateTimePickerDateSelect, {
         modelValue: _ctx.draftModelValue,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = $event => _ctx.draftModelValue = $event),
         "initial-value": _ctx.initialValue,
+        format: _ctx.resolvedFormat,
+        locale: _ctx.resolvedLocale,
         "date-filter": _ctx.dateFilter
-      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "date-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
+      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "format", "locale", "date-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
         disabled: _ctx.isInvalidDraftModelValue,
         onApply: _cache[3] || (_cache[3] = $event => {
           _ctx.apply();

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

@@ -1 +1 @@
-export { s as default } from '../OrDateRangePickerV3-e62adab9.js';
+export { s as default } from '../OrDateRangePickerV3-f215b1ba.js';

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

@@ -1,8 +1,18 @@
 import { PropType } from 'vue-demi';
+import { DateTimePickerDateFormat, DateTimePickerModelValue } from '../or-date-time-picker-v3';
 import { InputBoxSize } from '../or-input-box-v3';
+import { DateRangePickerModelValue } from './types';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
-        type: PropType<[Date, Date]>;
+        type: PropType<DateRangePickerModelValue>;
+        default: undefined;
+    };
+    format: {
+        type: PropType<"short" | "medium" | "long">;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
         default: undefined;
     };
     size: {
@@ -39,12 +49,14 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
     inputBox: import("vue-demi").Ref<any>;
     inputBoxRoot: import("vue-demi").ComputedRef<any>;
     popover: import("vue-demi").Ref<any>;
     popoverState: import("vue-demi").ComputedRef<any>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
     popoverStyles: import("vue-demi").ComputedRef<string[]>;
+    resolvedFormat: import("vue-demi").ComputedRef<DateTimePickerDateFormat.Short | "short" | "medium" | "long">;
+    resolvedLocale: import("vue-demi").ComputedRef<string>;
     initialValueFrom: import("vue-demi").Ref<{
         toString: () => string;
         toDateString: () => string;
@@ -171,7 +183,7 @@ declare const _default: import("vue-demi").DefineComponent<{
             (hint: string): string | number;
         };
     }>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<[Date, Date] | undefined>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<DateRangePickerModelValue>;
     draftModelValue: import("vue-demi").Ref<[{
         toString: () => string;
         toDateString: () => string;
@@ -234,7 +246,7 @@ declare const _default: import("vue-demi").DefineComponent<{
             (hint: "number"): number;
             (hint: string): string | number;
         };
-    } | undefined, {
+    } | null | undefined, {
         toString: () => string;
         toDateString: () => string;
         toTimeString: () => string;
@@ -296,7 +308,7 @@ declare const _default: import("vue-demi").DefineComponent<{
             (hint: "number"): number;
             (hint: string): string | number;
         };
-    } | undefined]>;
+    } | null | undefined]>;
     draftModelValueFrom: import("vue-demi").WritableComputedRef<{
         toString: () => string;
         toDateString: () => string;
@@ -359,7 +371,7 @@ declare const _default: import("vue-demi").DefineComponent<{
             (hint: "number"): number;
             (hint: string): string | number;
         };
-    } | undefined>;
+    } | null | undefined>;
     draftModelValueTo: import("vue-demi").WritableComputedRef<{
         toString: () => string;
         toDateString: () => string;
@@ -422,7 +434,7 @@ declare const _default: import("vue-demi").DefineComponent<{
             (hint: "number"): number;
             (hint: string): string | number;
         };
-    } | undefined>;
+    } | null | undefined>;
     genericDraftModelValue: import("vue-demi").WritableComputedRef<{
         toString: () => string;
         toDateString: () => string;
@@ -485,20 +497,28 @@ declare const _default: import("vue-demi").DefineComponent<{
             (hint: "number"): number;
             (hint: string): string | number;
         };
-    } | undefined>;
+    } | null | undefined>;
     selectedControl: import("vue-demi").Ref<"from" | "to">;
     isInvalidDraftModelValue: import("vue-demi").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-demi").ComputedRef<boolean>;
     isMobile: import("vue-demi").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "keydown" | "keyup" | "focus" | "blur")[], "update:modelValue" | "keydown" | "keyup" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").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: {
@@ -540,7 +560,9 @@ declare const _default: import("vue-demi").DefineComponent<{
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...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/v3/components/OrDateRangePickerV3/index.d.ts

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

package/dist/bundled/v3/components/OrDateRangePickerV3/index.js

@@ -1 +1 @@
-export { s as OrDateRangePickerV3 } from '../OrDateRangePickerV3-e62adab9.js';
+export { s as OrDateRangePickerV3 } from '../OrDateRangePickerV3-f215b1ba.js';

package/dist/bundled/v3/components/OrDateRangePickerV3/styles.js

@@ -1 +1 @@
-export { D as DateRangePicker, a as DateRangePickerPopover } from '../OrDateRangePickerV3-e62adab9.js';
+export { D as DateRangePicker, a as DateRangePickerPopover } from '../OrDateRangePickerV3-f215b1ba.js';

package/dist/bundled/v3/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/v3/components/{OrDateRangePickerV3-e62adab9.js → OrDateRangePickerV3-f215b1ba.js}

@@ -1,13 +1,13 @@
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, withModifiers, createVNode, createElementVNode, Fragment } from 'vue';
-import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
+import { defineComponent, ref, computed, inject, watch, toRef } from 'vue-demi';
 import { s as script$7 } from './OrErrorV3-b04d76aa.js';
 import { s as script$8 } from './OrHintV3-c8ac5975.js';
 import { s as script$9 } from './OrIconV3-34670800.js';
 import { s as script$a } from './OrIconButtonV3-79f8c1eb.js';
 import { s as script$b, I as InputBoxSize } from './OrInputBoxV3-dbc63649.js';
-import { s as script$c } from './OrLabelV3-b1cd132a.js';
+import { s as script$c } from './OrLabelV3-23a42d9d.js';
 import { s as script$d } from './OrPopoverV3-3e80d95c.js';
-import { s as script$1, a as script$2, b as script$3, c as script$4, d as script$5, e as script$6, g as getCurrentDate, h as getNextMonthDate } from './OrDateTimePickerV3-84c0fee3.js';
+import { s as script$1, b as script$2, c as script$3, d as script$4, e as script$5, g as script$6, D as DateFormat, a as DateTimePickerDateFormat, L as Locale, h as getCurrentDate, i as getNextMonthDate } from './OrDateTimePickerV3-345a6c12.js';
 import { DropdownClose } from '../directives/dropdown-close.js';
 import { DropdownOpen } from '../directives/dropdown-open.js';
 import { useProxyModelValue } from '../hooks/useProxyModelValue.js';
@@ -49,7 +49,15 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Object,
+      type: undefined,
+      default: undefined
+    },
+    format: {
+      type: String,
+      default: undefined
+    },
+    locale: {
+      type: String,
       default: undefined
     },
     size: {
@@ -89,8 +97,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;
@@ -101,9 +110,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());
@@ -155,9 +171,6 @@ var script = defineComponent({
       return true;
     });
     // Methods
-    function switchSelectedControl() {
-      selectedControl.value = selectedControl.value === 'from' ? 'to' : 'from';
-    }
     function apply() {
       proxyModelValue.value = draftModelValue.value;
     }
@@ -165,6 +178,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;
@@ -182,7 +198,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 : '--';
@@ -194,12 +210,14 @@ var script = defineComponent({
     } = useResponsive();
     return {
       root,
+      rootStyles,
       inputBox,
       inputBoxRoot,
       popover,
       popoverState,
-      rootStyles,
       popoverStyles,
+      resolvedFormat,
+      resolvedLocale,
       initialValueFrom,
       initialValueTo,
       proxyModelValue,
@@ -209,9 +227,9 @@ var script = defineComponent({
       genericDraftModelValue,
       selectedControl,
       isInvalidDraftModelValue,
-      switchSelectedControl,
       apply,
       reset,
+      switchSelectedControl,
       openPopover,
       closePopover,
       formatDateAlt,
@@ -287,18 +305,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [withDirectives(createVNode(_component_OrDateTimePickerDateControl, {
       modelValue: _ctx.draftModelValueFrom,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValueFrom = $event),
+      format: _ctx.resolvedFormat,
+      locale: _ctx.resolvedLocale,
       selected: _ctx.popover && _ctx.popover.state === 'open' && _ctx.selectedControl === 'from',
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, () => _ctx.openPopover('from')], [_directive_dropdown_close, _ctx.closePopover]]), createTextVNode(" - "), withDirectives(createVNode(_component_OrDateTimePickerDateControl, {
+    }, null, 8 /* PROPS */, ["modelValue", "format", "locale", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, () => _ctx.openPopover('from')], [_directive_dropdown_close, _ctx.closePopover]]), createTextVNode(" - "), withDirectives(createVNode(_component_OrDateTimePickerDateControl, {
       modelValue: _ctx.draftModelValueTo,
       "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.draftModelValueTo = $event),
+      format: _ctx.resolvedFormat,
+      locale: _ctx.resolvedLocale,
       selected: _ctx.popover && _ctx.popover.state === 'open' && _ctx.selectedControl === 'to',
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, () => _ctx.openPopover('to')], [_directive_dropdown_close, _ctx.closePopover]]), createVNode(_component_OrPopover, {
+    }, null, 8 /* PROPS */, ["modelValue", "format", "locale", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, () => _ctx.openPopover('to')], [_directive_dropdown_close, _ctx.closePopover]]), createVNode(_component_OrPopover, {
       ref: 'popover',
       class: normalizeClass(_ctx.popoverStyles),
       "custom-styles": _ctx.popoverStyles,
@@ -331,23 +353,29 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1 /* STABLE */
       }), createElementVNode("div", _hoisted_1, [_ctx.isDesktop || _ctx.isMobile && _ctx.selectedControl === 'from' ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(_component_OrDateTimePickerMonthSelect, {
         modelValue: _ctx.initialValueFrom,
-        "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.initialValueFrom = $event)
-      }, null, 8 /* PROPS */, ["modelValue"]), createVNode(_component_OrDateTimePickerDateSelect, {
+        "onUpdate:modelValue": _cache[4] || (_cache[4] = $event => _ctx.initialValueFrom = $event),
+        locale: _ctx.resolvedLocale
+      }, null, 8 /* PROPS */, ["modelValue", "locale"]), createVNode(_component_OrDateTimePickerDateSelect, {
         modelValue: _ctx.genericDraftModelValue,
         "onUpdate:modelValue": [_cache[5] || (_cache[5] = $event => _ctx.genericDraftModelValue = $event), _cache[6] || (_cache[6] = $event => _ctx.switchSelectedControl())],
         "initial-value": _ctx.initialValueFrom,
+        format: _ctx.resolvedFormat,
+        locale: _ctx.resolvedLocale,
         "range-start": _ctx.draftModelValueFrom || _ctx.initialValueFrom,
         "range-end": _ctx.draftModelValueTo || _ctx.initialValueTo
-      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "range-start", "range-end"])])) : createCommentVNode("v-if", true), _ctx.isDesktop || _ctx.isMobile && _ctx.selectedControl === 'to' ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(_component_OrDateTimePickerMonthSelect, {
+      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "format", "locale", "range-start", "range-end"])])) : createCommentVNode("v-if", true), _ctx.isDesktop || _ctx.isMobile && _ctx.selectedControl === 'to' ? (openBlock(), createElementBlock("div", _hoisted_3, [createVNode(_component_OrDateTimePickerMonthSelect, {
         modelValue: _ctx.initialValueTo,
-        "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.initialValueTo = $event)
-      }, null, 8 /* PROPS */, ["modelValue"]), createVNode(_component_OrDateTimePickerDateSelect, {
+        "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.initialValueTo = $event),
+        locale: _ctx.resolvedLocale
+      }, null, 8 /* PROPS */, ["modelValue", "locale"]), createVNode(_component_OrDateTimePickerDateSelect, {
         modelValue: _ctx.genericDraftModelValue,
         "onUpdate:modelValue": [_cache[8] || (_cache[8] = $event => _ctx.genericDraftModelValue = $event), _cache[9] || (_cache[9] = $event => _ctx.switchSelectedControl())],
         "initial-value": _ctx.initialValueTo,
+        format: _ctx.resolvedFormat,
+        locale: _ctx.resolvedLocale,
         "range-start": _ctx.draftModelValueFrom || _ctx.initialValueFrom,
         "range-end": _ctx.draftModelValueTo || _ctx.initialValueTo
-      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "range-start", "range-end"])])) : createCommentVNode("v-if", true)]), createVNode(_component_OrDateTimePickerPopoverFooter, {
+      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "format", "locale", "range-start", "range-end"])])) : createCommentVNode("v-if", true)]), createVNode(_component_OrDateTimePickerPopoverFooter, {
         disabled: _ctx.isInvalidDraftModelValue,
         onApply: _cache[10] || (_cache[10] = $event => {
           _ctx.apply();

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

@@ -1 +1 @@
-export { s as default } from '../OrDateTimeFormatV3-1ff1795b.js';
+export { s as default } from '../OrDateTimeFormatV3-57c82e28.js';

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

@@ -1,13 +1,21 @@
 import { PropType } from 'vue-demi';
-import { DateTimePickerTimeFormat, formatDate, formatTime } from '../or-date-time-picker-v3';
+import { DateTimePickerDateFormat, DateTimePickerModelValue, DateTimePickerTimeFormat, formatDate, formatTime } from '../or-date-time-picker-v3';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
-        type: DateConstructor;
+        type: PropType<DateTimePickerModelValue>;
+        default: undefined;
+    };
+    dateFormat: {
+        type: PropType<"short" | "medium" | "long">;
         default: undefined;
     };
     timeFormat: {
         type: PropType<"auto" | "h12" | "h23">;
-        default: () => DateTimePickerTimeFormat;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
+        default: undefined;
     };
     placeholder: {
         type: StringConstructor;
@@ -16,24 +24,37 @@ declare const _default: import("vue-demi").DefineComponent<{
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     rootStyles: import("vue-demi").ComputedRef<string[]>;
+    resolvedDateFormat: import("vue-demi").ComputedRef<DateTimePickerDateFormat.Short | "short" | "medium" | "long">;
+    resolvedTimeFormat: import("vue-demi").ComputedRef<DateTimePickerTimeFormat.Auto | "auto" | "h12" | "h23">;
+    resolvedLocale: import("vue-demi").ComputedRef<string>;
     formatDate: typeof formatDate;
     formatTime: typeof formatTime;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").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;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
+        default: undefined;
     };
     placeholder: {
         type: StringConstructor;
         default: undefined;
     };
 }>>, {
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
+    dateFormat: "short" | "medium" | "long";
     timeFormat: "auto" | "h12" | "h23";
+    locale: string;
     placeholder: string;
 }>;
 export default _default;

package/dist/bundled/v3/components/OrDateTimeFormatV3/index.js

@@ -1 +1 @@
-export { s as OrDateTimeFormatV3 } from '../OrDateTimeFormatV3-1ff1795b.js';
+export { s as OrDateTimeFormatV3 } from '../OrDateTimeFormatV3-57c82e28.js';

package/dist/bundled/v3/components/OrDateTimeFormatV3/styles.js

@@ -1 +1 @@
-export { D as DateTimeFormat } from '../OrDateTimeFormatV3-1ff1795b.js';
+export { D as DateTimeFormat } from '../OrDateTimeFormatV3-57c82e28.js';