@onereach/ui-components 9.1.0 → 9.1.1-beta.4217.0

package/dist/bundled/v2/{OrDateTimePickerMonthSelect-00287594.js → OrDateTimePickerMonthSelect-9dc9a9a1.js}

@@ -30,9 +30,17 @@ var script$2 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
+    format: {
+      type: String,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
+    },
     selected: {
       type: Boolean,
       default: false
@@ -52,9 +60,8 @@ var script$2 = defineComponent({
   },
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-date-control-v3', ...DateTimePickerDateControl]);
     const placeholderStyles = computed(() => [...DateTimePickerDateControlPlaceholder]);
     // State
@@ -94,7 +101,7 @@ var __vue_render__$2 = function () {
         $event.preventDefault();
       }
     }
-  }, [_vm.proxyModelValue ? [_vm._v("\n    " + _vm._s(_vm.formatDate(_vm.proxyModelValue)) + "\n  ")] : [_c('span', {
+  }, [_vm.proxyModelValue ? [_vm._v("\n    " + _vm._s(_vm.formatDate(_vm.proxyModelValue, _vm.format, _vm.locale)) + "\n  ")] : [_c('span', {
     class: _vm.placeholderStyles,
     attrs: {
       "disabled": _vm.disabled
@@ -175,13 +182,21 @@ var script$1 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
     initialValue: {
       type: Date,
       required: true
     },
+    format: {
+      type: String,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
+    },
     dateFilter: {
       type: Function,
       default: undefined
@@ -198,9 +213,8 @@ var script$1 = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-date-select-v3', ...DateTimePickerDateSelect]);
     const buttonGroupStyles = computed(() => [...DateTimePickerDateSelectButtonGroup]);
     const buttonGroupWeekdayItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupWeekdayItem]);
@@ -234,13 +248,13 @@ var script$1 = defineComponent({
     });
     // Methods
     function formatWeekday(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         weekday: 'short',
         timeZone: 'UTC'
       });
     }
     function formatDay(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         day: 'numeric',
         timeZone: 'UTC'
       });
@@ -342,7 +356,11 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
+      required: true
+    },
+    locale: {
+      type: String,
       required: true
     },
     yearFilter: {
@@ -357,30 +375,29 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-date-time-picker-month-select-v3', ...DateTimePickerMonthSelect]);
     const yearButton = ref();
-    const monthButton = ref();
     const yearButtonRoot = computed(() => {
       var _a;
       return (_a = yearButton.value) === null || _a === void 0 ? void 0 : _a.root;
     });
+    const monthButton = ref();
     const monthButtonRoot = computed(() => {
       var _a;
       return (_a = monthButton.value) === null || _a === void 0 ? void 0 : _a.root;
     });
     const yearMenu = ref();
-    const monthMenu = ref();
     const yearMenuState = computed(() => {
       var _a;
       return (_a = yearMenu.value) === null || _a === void 0 ? void 0 : _a.state;
     });
+    const monthMenu = ref();
     const monthMenuState = computed(() => {
       var _a;
       return (_a = monthMenu.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-month-select-v3', ...DateTimePickerMonthSelect]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const yearOptions = computed(() => {
@@ -410,28 +427,28 @@ var script = defineComponent({
       proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth() - 1, proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
     }
     function formatYear(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         year: 'numeric',
         timeZone: 'UTC'
       });
     }
     function formatMonth(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         month: 'long',
         timeZone: 'UTC'
       });
     }
     return {
       root,
+      rootStyles,
       yearButton,
-      monthButton,
       yearButtonRoot,
+      monthButton,
       monthButtonRoot,
       yearMenu,
-      monthMenu,
       yearMenuState,
+      monthMenu,
       monthMenuState,
-      rootStyles,
       proxyModelValue,
       yearOptions,
       monthOptions,

package/dist/bundled/v2/{OrDateTimePickerTimeSelect-328896c3.js → OrDateTimePickerTimeSelect-a5ec66d6.js}

@@ -1,9 +1,9 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { DateTimePickerTimeFormat } from './components/OrDateTimePickerV3/props.js';
 import { getTimePlaceholder } from './components/OrDateTimePickerV3/utils/getTimePlaceholder.js';
 import { formatTime } from './components/OrDateTimePickerV3/utils/formatTime.js';
 import { useProxyModelValue } from './hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+import { a as DateTimePickerTimeFormat } from './types-6a847182.js';
 import __vue_component__$2 from './components/OrButtonV3/OrButton.js';
 
 const DateTimePickerTimeControl = [
@@ -27,12 +27,16 @@ var script$1 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
     format: {
       type: String,
-      default: () => DateTimePickerTimeFormat.Auto
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
     },
     selected: {
       type: Boolean,
@@ -53,9 +57,8 @@ var script$1 = defineComponent({
   },
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-time-control-v3', ...DateTimePickerTimeControl]);
     const placeholderStyles = computed(() => [...DateTimePickerTimeControlPlaceholder]);
     // State
@@ -89,8 +92,13 @@ var __vue_render__$1 = function () {
       "required": _vm.required,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
+    },
+    on: {
+      "keydown": function ($event) {
+        $event.preventDefault();
+      }
     }
-  }, [_vm.proxyModelValue ? [_vm._v("\n    " + _vm._s(_vm.formatTime(_vm.proxyModelValue, _vm.format)) + "\n  ")] : [_c('span', {
+  }, [_vm.proxyModelValue ? [_vm._v("\n    " + _vm._s(_vm.formatTime(_vm.proxyModelValue, _vm.format, _vm.locale)) + "\n  ")] : [_c('span', {
     class: _vm.placeholderStyles,
     attrs: {
       "disabled": _vm.disabled
@@ -152,7 +160,7 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
     initialValue: {
@@ -161,7 +169,11 @@ var script = defineComponent({
     },
     format: {
       type: String,
-      default: () => DateTimePickerTimeFormat.Auto
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
     },
     hoursFilter: {
       type: Function,
@@ -176,9 +188,8 @@ var script = defineComponent({
   expose: ['root'],
   setup(props, context) {
     var _a;
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-time-select-v3', ...DateTimePickerTimeSelect]);
     const buttonGroupStyles = computed(() => [...DateTimePickerTimeSelectButtonGroup]);
     const buttonGroupItemStyles = computed(() => [...DateTimePickerTimeSelectButtonGroupItem]);
@@ -236,7 +247,7 @@ var script = defineComponent({
     });
     // Methods
     function formatHours(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         hour: 'numeric',
         hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
         timeZone: 'UTC'

package/dist/bundled/v2/components/OrDateFormatV3/OrDateFormat.js

@@ -1,5 +1,7 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, inject } from 'vue-demi';
 import { DateFormat } from './styles.js';
+import { DateFormat as DateFormat$1, Locale } from '../OrDateTimePickerV3/tokens.js';
+import { D as DateTimePickerDateFormat } from '../../types-6a847182.js';
 import { formatDate } from '../OrDateTimePickerV3/utils/formatDate.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
@@ -11,7 +13,15 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
+      default: undefined
+    },
+    format: {
+      type: String,
+      default: undefined
+    },
+    locale: {
+      type: String,
       default: undefined
     },
     placeholder: {
@@ -20,14 +30,24 @@ var script = defineComponent({
     }
   },
   expose: ['root'],
-  setup() {
-    // Refs
+  setup(props) {
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-format-v3', ...DateFormat]);
+    // Options
+    const resolvedFormat = computed(() => {
+      var _a;
+      return (_a = props.format) !== null && _a !== void 0 ? _a : inject(DateFormat$1, DateTimePickerDateFormat.Short);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
     return {
       root,
       rootStyles,
+      resolvedFormat,
+      resolvedLocale,
       formatDate
     };
   }
@@ -44,7 +64,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.placeholder) + "\n")]);
+  }, [_vm.modelValue ? [_vm._v("\n    " + _vm._s(_vm.formatDate(_vm.modelValue, _vm.resolvedFormat, _vm.resolvedLocale)) + "\n  ")] : [_vm._v("\n    " + _vm._s(_vm.placeholder) + "\n  ")]], 2);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrDateFormatV3/OrDateFormat.vue.d.ts

@@ -1,11 +1,22 @@
-import { formatDate } from '../or-date-time-picker-v3';
+import { PropType } from 'vue-demi';
+import { DateTimePickerModelValue, formatDate } 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[]>;
+    resolvedFormat: import("@vue/composition-api").ComputedRef<"short" | "medium" | "long">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     formatDate: typeof formatDate;
 }> & 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;
     };
     placeholder: {
@@ -14,7 +25,15 @@ 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;
     };
     placeholder: {
@@ -22,17 +41,25 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
+    format: "short" | "medium" | "long";
+    locale: string;
     placeholder: string;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    resolvedFormat: import("@vue/composition-api").ComputedRef<"short" | "medium" | "long">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     formatDate: typeof formatDate;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
+    format: "short" | "medium" | "long";
+    locale: string;
     placeholder: string;
 } & {}, {
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
+    format: "short" | "medium" | "long";
+    locale: string;
     placeholder: string;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,6 +1,6 @@
-import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
+import { defineComponent, ref, computed, inject, watch, toRef } from 'vue-demi';
 import { DatePicker, DatePickerPopover } from './styles.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-00287594.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-9dc9a9a1.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-903012f0.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -12,6 +12,8 @@ import __vue_component__$7 from '../OrPopoverV3/OrPopover.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 { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
@@ -43,7 +45,15 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
+      default: undefined
+    },
+    format: {
+      type: String,
+      default: undefined
+    },
+    locale: {
+      type: String,
       default: undefined
     },
     yearFilter: {
@@ -95,8 +105,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;
@@ -107,9 +118,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 => {
@@ -158,19 +176,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,
@@ -268,6 +288,8 @@ var __vue_render__ = function () {
     }],
     class: ['!border-0'],
     attrs: {
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale,
       "selected": _vm.popover && _vm.popover.state === 'open',
       "required": _vm.required,
       "readonly": _vm.readonly,
@@ -304,6 +326,7 @@ var __vue_render__ = function () {
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
     attrs: {
+      "locale": _vm.resolvedLocale,
       "year-filter": _vm.yearFilter,
       "month-filter": _vm.monthFilter
     },
@@ -317,6 +340,8 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrDateTimePickerDateSelect', {
     attrs: {
       "initial-value": _vm.initialValue,
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale,
       "date-filter": _vm.dateFilter
     },
     model: {

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;