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

package/dist/bundled/v3/components/{OrDateTimePickerV3-84c0fee3.js → OrDateTimePickerV3-345a6c12.js}

@@ -1,8 +1,8 @@
 import { openBlock, createElementBlock, normalizeClass, withModifiers, Fragment, createTextVNode, toDisplayString, resolveComponent, createElementVNode, renderList, createBlock, withCtx, createVNode, renderSlot, createCommentVNode, resolveDirective, withDirectives } from 'vue';
-import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch, inject } from 'vue-demi';
 import { useProxyModelValue } from '../hooks/useProxyModelValue.js';
 import { s as script$9 } from './OrButtonV3-a90c86d5.js';
-import { s as script$a } from './OrLabelV3-b1cd132a.js';
+import { s as script$a } from './OrLabelV3-23a42d9d.js';
 import { s as script$b } from './OrIconV3-34670800.js';
 import { s as script$c } from './OrIconButtonV3-79f8c1eb.js';
 import { s as script$d } from './OrMenuV3-257758b9.js';
@@ -14,13 +14,19 @@ import { s as script$i } from './OrPopoverV3-3e80d95c.js';
 import { DropdownClose } from '../directives/dropdown-close.js';
 import { DropdownOpen } from '../directives/dropdown-open.js';
 
-function formatDate(value) {
-  return value.toLocaleString(navigator.language, {
-    dateStyle: 'short',
+function formatDate(value, format, locale) {
+  return value.toLocaleString(locale, {
+    dateStyle: format,
     timeZone: 'UTC'
   });
 }
 
+var DateTimePickerDateFormat;
+(function (DateTimePickerDateFormat) {
+  DateTimePickerDateFormat["Short"] = "short";
+  DateTimePickerDateFormat["Medium"] = "medium";
+  DateTimePickerDateFormat["Long"] = "long";
+})(DateTimePickerDateFormat || (DateTimePickerDateFormat = {}));
 var DateTimePickerTimeFormat;
 (function (DateTimePickerTimeFormat) {
   DateTimePickerTimeFormat["Auto"] = "auto";
@@ -28,8 +34,8 @@ var DateTimePickerTimeFormat;
   DateTimePickerTimeFormat["H23"] = "h23";
 })(DateTimePickerTimeFormat || (DateTimePickerTimeFormat = {}));
 
-function formatTime(value, format) {
-  return value.toLocaleString(navigator.language, {
+function formatTime(value, format, locale) {
+  return value.toLocaleString(locale, {
     timeStyle: 'short',
     hourCycle: format !== DateTimePickerTimeFormat.Auto ? format : undefined,
     timeZone: 'UTC'
@@ -41,12 +47,32 @@ function getCurrentDate() {
   return new Date(Date.UTC(currentDate.getUTCFullYear(), currentDate.getUTCMonth(), currentDate.getUTCDate()));
 }
 
-function getDatePlaceholder() {
-  const sample = new Date(Date.UTC(1111, 1, 3, 4, 5)).toLocaleString(navigator.language, {
-    dateStyle: 'short',
+function getDatePlaceholder(format, locale) {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    dateStyle: format,
     timeZone: 'UTC'
   });
-  return sample.replace(/1/g, 'Y').replace(/02/, 'MM').replace(/2/, 'M').replace(/03/g, 'DD').replace(/3/, 'D');
+  return formatter.formatToParts(Date.UTC(0, 0)).reduce((accumulator, part) => {
+    switch (part.type) {
+      case 'year':
+        return accumulator + part.value.replace(/^\d{2}$/, 'YY').replace(/^\d{4}$/, 'YYYY');
+      case 'month':
+        switch (format) {
+          case 'short':
+            return accumulator + part.value.replace(/^\d{1}$/, 'M').replace(/^\d{2}$/, 'MM');
+          case 'medium':
+            return accumulator + 'MMM';
+          case 'long':
+            return accumulator + 'MMMM';
+          default:
+            throw new Error();
+        }
+      case 'day':
+        return accumulator + part.value.replace(/^\d{1}$/, 'D').replace(/^\d{2}$/, 'DD');
+      default:
+        return accumulator + part.value;
+    }
+  }, '');
 }
 
 function getNextMonthDate() {
@@ -54,13 +80,24 @@ function getNextMonthDate() {
   return new Date(Date.UTC(currentDate.getUTCFullYear(), currentDate.getUTCMonth() + 1, currentDate.getUTCDate()));
 }
 
-function getTimePlaceholder(format) {
-  const sample = new Date(Date.UTC(1, 1, 3, 4, 5)).toLocaleString(navigator.language, {
+function getTimePlaceholder(format, locale) {
+  const formatter = new Intl.DateTimeFormat(locale, {
     timeStyle: 'short',
     hourCycle: format !== DateTimePickerTimeFormat.Auto ? format : undefined,
     timeZone: 'UTC'
   });
-  return sample.replace(/04/, 'HH').replace(/4/, 'H').replace(/05/, 'MM').replace(/5/, 'M').replace(/AM|PM/, 'A');
+  return formatter.formatToParts(Date.UTC(0, 0)).reduce((accumulator, part) => {
+    switch (part.type) {
+      case 'hour':
+        return accumulator + part.value.replace(/^\d{1}$/, 'H').replace(/^\d{2}$/, 'HH');
+      case 'minute':
+        return accumulator + part.value.replace(/^\d{1}$/, 'M').replace(/^\d{2}$/, 'MM');
+      case 'dayPeriod':
+        return accumulator + 'A';
+      default:
+        return accumulator + part.value;
+    }
+  }, '');
 }
 
 const DateTimePickerDateControl = [
@@ -84,9 +121,17 @@ var script$8 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
+    format: {
+      type: String,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
+    },
     selected: {
       type: Boolean,
       default: false
@@ -106,14 +151,15 @@ var script$8 = 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
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const placeholder = getDatePlaceholder();
+    const placeholder = computed(() => {
+      return getDatePlaceholder(props.format, props.locale);
+    });
     return {
       root,
       rootStyles,
@@ -139,7 +185,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
   }, [_ctx.proxyModelValue ? (openBlock(), createElementBlock(Fragment, {
     key: 0
-  }, [createTextVNode(toDisplayString(_ctx.formatDate(_ctx.proxyModelValue)), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("span", {
+  }, [createTextVNode(toDisplayString(_ctx.formatDate(_ctx.proxyModelValue, _ctx.format, _ctx.locale)), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("span", {
     key: 1,
     class: normalizeClass(_ctx.placeholderStyles),
     disabled: _ctx.disabled
@@ -201,13 +247,21 @@ var script$7 = 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
@@ -224,9 +278,8 @@ var script$7 = 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]);
@@ -260,13 +313,13 @@ var script$7 = 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'
       });
@@ -355,9 +408,8 @@ var script$6 = defineComponent({
   },
   expose: ['root'],
   setup() {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-mobile-control-v3', ...DateTimePickerMobileControl]);
     const contentStyles = computed(() => [...DateTimePickerMobileControlContent]);
     return {
@@ -408,7 +460,11 @@ var script$5 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
+      required: true
+    },
+    locale: {
+      type: String,
       required: true
     },
     yearFilter: {
@@ -423,30 +479,29 @@ var script$5 = 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(() => {
@@ -476,28 +531,28 @@ var script$5 = 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,
@@ -625,9 +680,8 @@ var script$4 = defineComponent({
   emits: ['apply', 'reset'],
   expose: ['root'],
   setup() {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-popover-footer-v3', ...DateTimePickerPopoverFooter]);
     return {
       root,
@@ -670,9 +724,8 @@ var script$3 = defineComponent({
   name: 'OrDateTimePickerPopoverHeader',
   expose: ['root'],
   setup() {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-popover-header-v3', ...DateTimePickerPopoverHeader]);
     return {
       root,
@@ -712,12 +765,16 @@ var script$2 = 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,
@@ -738,14 +795,15 @@ var script$2 = 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
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const placeholder = getTimePlaceholder(props.format);
+    const placeholder = computed(() => {
+      return getTimePlaceholder(props.format, props.locale);
+    });
     return {
       root,
       rootStyles,
@@ -767,14 +825,15 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     selected: _ctx.selected,
     required: _ctx.required,
     readonly: _ctx.readonly,
-    disabled: _ctx.disabled
+    disabled: _ctx.disabled,
+    onKeydown: _cache[0] || (_cache[0] = withModifiers(() => {}, ["prevent"]))
   }, [_ctx.proxyModelValue ? (openBlock(), createElementBlock(Fragment, {
     key: 0
-  }, [createTextVNode(toDisplayString(_ctx.formatTime(_ctx.proxyModelValue, _ctx.format)), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("span", {
+  }, [createTextVNode(toDisplayString(_ctx.formatTime(_ctx.proxyModelValue, _ctx.format, _ctx.locale)), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock("span", {
     key: 1,
     class: normalizeClass(_ctx.placeholderStyles),
     disabled: _ctx.disabled
-  }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_2))], 10 /* CLASS, PROPS */, _hoisted_1$1);
+  }, toDisplayString(_ctx.placeholder), 11 /* TEXT, CLASS, PROPS */, _hoisted_2))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1$1);
 }
 
 script$2.render = render$2;
@@ -813,7 +872,7 @@ var script$1 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
     initialValue: {
@@ -822,7 +881,11 @@ var script$1 = defineComponent({
     },
     format: {
       type: String,
-      default: () => DateTimePickerTimeFormat.Auto
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
     },
     hoursFilter: {
       type: Function,
@@ -837,9 +900,8 @@ var script$1 = 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]);
@@ -848,7 +910,7 @@ var script$1 = defineComponent({
     const proxyTimeFormat = computed(() => {
       if (props.format === DateTimePickerTimeFormat.Auto) {
         const timeSample = new Date(1970, 0);
-        if (timeSample.toLocaleTimeString(navigator.language).includes('12')) {
+        if (timeSample.toLocaleTimeString(props.locale).includes('12')) {
           return DateTimePickerTimeFormat.H12;
         }
         return DateTimePickerTimeFormat.H23;
@@ -897,11 +959,11 @@ var script$1 = 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'
-      }).replace(/\s(am|pm)/i, '');
+      }).replace(/\D/g, '');
     }
     function formatMinutes(value) {
       return String(value.getUTCMinutes()).padStart(2, '0');
@@ -992,6 +1054,10 @@ const DateTimePickerDatePopover = [
 'w-[298px]'];
 const DateTimePickerTimePopover = [];
 
+const DateFormat = Symbol();
+const TimeFormat = Symbol();
+const Locale = Symbol();
+
 var script = defineComponent({
   name: 'OrDateTimePicker',
   components: {
@@ -1021,12 +1087,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
     },
     yearFilter: {
       type: Function,
@@ -1085,8 +1159,9 @@ var script = defineComponent({
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
     var _a;
-    // Refs
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-date-time-picker-v3', ...DateTimePicker]);
     const inputBox = ref();
     const inputBoxRoot = computed(() => {
       var _a;
@@ -1097,15 +1172,26 @@ var script = defineComponent({
       var _a;
       return (_a = datePopover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
+    const datePopoverStyles = computed(() => ['or-date-time-picker-date-popover-v3', ...DateTimePickerDatePopover]);
     const timePopover = ref();
     const timePopoverState = computed(() => {
       var _a;
       return (_a = timePopover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-v3', ...DateTimePicker]);
-    const datePopoverStyles = computed(() => ['or-date-time-picker-date-popover-v3', ...DateTimePickerDatePopover]);
     const timePopoverStyles = computed(() => ['or-date-time-picker-time-popover-v3', ...DateTimePickerTimePopover]);
+    // 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);
+    });
     // State
     const initialValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : getCurrentDate());
     watch(() => props.modelValue, value => {
@@ -1184,30 +1270,33 @@ 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 : '--';
     }
     function formatTimeAlt(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, {
         timeStyle: 'short',
-        hourCycle: props.timeFormat !== DateTimePickerTimeFormat.Auto ? props.timeFormat : undefined,
+        hourCycle: resolvedTimeFormat.value !== DateTimePickerTimeFormat.Auto ? resolvedTimeFormat.value : undefined,
         timeZone: 'UTC'
       })) !== null && _a !== void 0 ? _a : '--';
     }
     return {
       root,
+      rootStyles,
       inputBox,
       inputBoxRoot,
       datePopover,
       datePopoverState,
+      datePopoverStyles,
       timePopover,
       timePopoverState,
-      rootStyles,
-      datePopoverStyles,
       timePopoverStyles,
+      resolvedDateFormat,
+      resolvedTimeFormat,
+      resolvedLocale,
       initialValue,
       proxyModelValue,
       draftModelValue,
@@ -1281,19 +1370,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [withDirectives(createVNode(_component_OrDateTimePickerDateControl, {
       modelValue: _ctx.draftModelValue,
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.draftModelValue = $event),
+      format: _ctx.resolvedDateFormat,
+      locale: _ctx.resolvedLocale,
       selected: _ctx.datePopover && _ctx.datePopover.state === 'open',
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.toggleDatePopover], [_directive_dropdown_close, _ctx.closeDatePopover]]), withDirectives(createVNode(_component_OrDateTimePickerTimeControl, {
+    }, null, 8 /* PROPS */, ["modelValue", "format", "locale", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.toggleDatePopover], [_directive_dropdown_close, _ctx.closeDatePopover]]), withDirectives(createVNode(_component_OrDateTimePickerTimeControl, {
       modelValue: _ctx.draftModelValue,
       "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => _ctx.draftModelValue = $event),
-      format: _ctx.timeFormat,
+      format: _ctx.resolvedTimeFormat,
+      locale: _ctx.resolvedLocale,
       selected: _ctx.timePopover && _ctx.timePopover.state === 'open',
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }, null, 8 /* PROPS */, ["modelValue", "format", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.toggleTimePopover], [_directive_dropdown_close, _ctx.closeTimePopover]]), createVNode(_component_OrPopover, {
+    }, null, 8 /* PROPS */, ["modelValue", "format", "locale", "selected", "required", "readonly", "disabled"]), [[_directive_dropdown_open, _ctx.toggleTimePopover], [_directive_dropdown_close, _ctx.closeTimePopover]]), createVNode(_component_OrPopover, {
       ref: 'datePopover',
       class: normalizeClass(_ctx.datePopoverStyles),
       "custom-styles": _ctx.datePopoverStyles,
@@ -1324,14 +1416,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }), createVNode(_component_OrDateTimePickerMonthSelect, {
         modelValue: _ctx.initialValue,
         "onUpdate:modelValue": _cache[2] || (_cache[2] = $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[3] || (_cache[3] = $event => _ctx.draftModelValue = $event),
         "initial-value": _ctx.initialValue,
+        format: _ctx.resolvedDateFormat,
+        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[4] || (_cache[4] = $event => {
           _ctx.apply();
@@ -1375,10 +1470,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         modelValue: _ctx.draftModelValue,
         "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => _ctx.draftModelValue = $event),
         "initial-value": _ctx.initialValue,
-        format: _ctx.timeFormat,
+        format: _ctx.resolvedTimeFormat,
+        locale: _ctx.resolvedLocale,
         "hours-filter": _ctx.hoursFilter,
         "minutes-filter": _ctx.minutesFilter
-      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "format", "hours-filter", "minutes-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
+      }, null, 8 /* PROPS */, ["modelValue", "initial-value", "format", "locale", "hours-filter", "minutes-filter"]), createVNode(_component_OrDateTimePickerPopoverFooter, {
         disabled: _ctx.isInvalidDraftModelValue,
         onApply: _cache[8] || (_cache[8] = $event => {
           _ctx.apply();
@@ -1414,4 +1510,4 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 script.render = render;
 script.__file = "src/components/or-date-time-picker-v3/OrDateTimePicker.vue";
 
-export { DateTimePickerTimeFormat as D, script$7 as a, script$6 as b, script$5 as c, script$4 as d, script$3 as e, formatDate as f, getCurrentDate as g, getNextMonthDate as h, formatTime as i, script$2 as j, script$1 as k, script as l, getDatePlaceholder as m, getTimePlaceholder as n, DateTimePicker as o, DateTimePickerDatePopover as p, DateTimePickerTimePopover as q, script$8 as s };
+export { DateFormat as D, Locale as L, TimeFormat as T, DateTimePickerDateFormat as a, script$7 as b, script$6 as c, script$5 as d, script$4 as e, formatDate as f, script$3 as g, getCurrentDate as h, getNextMonthDate as i, DateTimePickerTimeFormat as j, formatTime as k, script$2 as l, script$1 as m, script as n, getDatePlaceholder as o, getTimePlaceholder as p, DateTimePicker as q, DateTimePickerDatePopover as r, script$8 as s, DateTimePickerTimePopover as t };

package/dist/bundled/v3/components/OrFormGroupV3/OrFormGroup.js

@@ -1 +1 @@
-export { s as default } from '../OrFormGroupV3-7d09a939.js';
+export { s as default } from '../OrFormGroupV3-72dc8852.js';

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

@@ -1 +1 @@
-export { F as FormGroupDirection, s as OrFormGroupV3 } from '../OrFormGroupV3-7d09a939.js';
+export { F as FormGroupDirection, s as OrFormGroupV3 } from '../OrFormGroupV3-72dc8852.js';

package/dist/bundled/v3/components/OrFormGroupV3/props.js

@@ -1 +1 @@
-export { F as FormGroupDirection } from '../OrFormGroupV3-7d09a939.js';
+export { F as FormGroupDirection } from '../OrFormGroupV3-72dc8852.js';

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

@@ -1 +1 @@
-export { b as FormGroupContent, d as FormGroupContentDirections, c as FormGroupLabel, a as FormGroupRoot } from '../OrFormGroupV3-7d09a939.js';
+export { b as FormGroupContent, d as FormGroupContentDirections, c as FormGroupLabel, a as FormGroupRoot } from '../OrFormGroupV3-72dc8852.js';

package/dist/bundled/v3/components/{OrFormGroupV3-7d09a939.js → OrFormGroupV3-72dc8852.js}

@@ -2,7 +2,7 @@ import { resolveComponent, openBlock, createElementBlock, normalizeClass, create
 import { defineComponent, ref, computed } from 'vue-demi';
 import { s as script$1 } from './OrErrorV3-b04d76aa.js';
 import { s as script$2 } from './OrHintV3-c8ac5975.js';
-import { s as script$3 } from './OrLabelV3-b1cd132a.js';
+import { s as script$3 } from './OrLabelV3-23a42d9d.js';
 
 var FormGroupDirection;
 (function (FormGroupDirection) {

package/dist/bundled/v3/components/OrInputV3/OrInput.js

@@ -1 +1 @@
-export { s as default } from '../OrInputV3-db89dfb7.js';
+export { s as default } from '../OrInputV3-ac1c7fe7.js';

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

@@ -1 +1 @@
-export { I as InputType, s as OrInputV3 } from '../OrInputV3-db89dfb7.js';
+export { I as InputType, s as OrInputV3 } from '../OrInputV3-ac1c7fe7.js';

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

@@ -1 +1 @@
-export { b as InputControl, a as InputRoot } from '../OrInputV3-db89dfb7.js';
+export { b as InputControl, a as InputRoot } from '../OrInputV3-ac1c7fe7.js';

package/dist/bundled/v3/components/{OrInputV3-db89dfb7.js → OrInputV3-ac1c7fe7.js}

@@ -6,7 +6,7 @@ import { s as script$2 } from './OrHintV3-c8ac5975.js';
 import { s as script$3 } from './OrIconV3-34670800.js';
 import { s as script$4 } from './OrIconButtonV3-79f8c1eb.js';
 import { s as script$5, I as InputBoxSize } from './OrInputBoxV3-dbc63649.js';
-import { s as script$6 } from './OrLabelV3-b1cd132a.js';
+import { s as script$6 } from './OrLabelV3-23a42d9d.js';
 import { s as script$7 } from './OrLoaderV3-0081e944.js';
 import { useIdAttribute } from '../hooks/useIdAttribute.js';
 import { useControlAttributes } from '../hooks/useControlAttributes.js';

package/dist/bundled/v3/components/OrLabelV3/OrLabel.js

@@ -1 +1 @@
-export { s as default } from '../OrLabelV3-b1cd132a.js';
+export { s as default } from '../OrLabelV3-23a42d9d.js';

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

@@ -1 +1 @@
-export { L as LabelVariant, s as OrLabelV3 } from '../OrLabelV3-b1cd132a.js';
+export { L as LabelVariant, s as OrLabelV3 } from '../OrLabelV3-23a42d9d.js';

package/dist/bundled/v3/components/OrLabelV3/props.js

@@ -1 +1 @@
-export { L as LabelVariant } from '../OrLabelV3-b1cd132a.js';
+export { L as LabelVariant } from '../OrLabelV3-23a42d9d.js';