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

package/dist/esm/v3/getTimePlaceholder-9d18b5ac.js

@@ -0,0 +1,77 @@
+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";
+  DateTimePickerTimeFormat["H12"] = "h12";
+  DateTimePickerTimeFormat["H23"] = "h23";
+})(DateTimePickerTimeFormat || (DateTimePickerTimeFormat = {}));
+
+function formatTime(value, format, locale) {
+  return value.toLocaleString(locale, {
+    timeStyle: 'short',
+    hourCycle: format !== DateTimePickerTimeFormat.Auto ? format : undefined,
+    timeZone: 'UTC'
+  });
+}
+
+function getDatePlaceholder(format, locale) {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    dateStyle: format,
+    timeZone: 'UTC'
+  });
+  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 getTimePlaceholder(format, locale) {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    timeStyle: 'short',
+    hourCycle: format !== DateTimePickerTimeFormat.Auto ? format : undefined,
+    timeZone: 'UTC'
+  });
+  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;
+    }
+  }, '');
+}
+
+export { DateTimePickerDateFormat as D, DateTimePickerTimeFormat as a, formatTime as b, getTimePlaceholder as c, formatDate as f, getDatePlaceholder as g };

package/dist/esm/v3/index.js

@@ -8,12 +8,12 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-c95aef65.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-a2ba0b3e.js';
-export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-7eecfe1b.js';
+export { C as CardCollectionView, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-853aaa1c.js';
 export { C as CardPadding, s as OrCardV3 } from './OrCard-c2ef331b.js';
 export { s as OrCheckbox } from './OrCheckbox-42ed332c.js';
-export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-ba429495.js';
-export { s as OrCheckboxTreeV3 } from './OrCheckboxTree-e3b760d1.js';
-export { s as OrCheckboxV3 } from './OrCheckbox-91bc37d7.js';
+export { s as OrCheckboxGroupV3 } from './OrCheckboxGroup-4f9235bb.js';
+export { s as OrCheckboxTreeV3 } from './OrCheckboxTree-129603b3.js';
+export { s as OrCheckboxV3 } from './OrCheckbox-637049b9.js';
 export { s as OrChip } from './OrChip-2e26629d.js';
 export { s as OrChips } from './OrChips-58954587.js';
 export { s as OrCode, O as OrCodeLanguages } from './OrCode-90e43a20.js';
@@ -22,23 +22,23 @@ export { lintGutter, linter } from '@codemirror/lint';
 export { javascript } from '@codemirror/lang-javascript';
 export { json, jsonParseLinter } from '@codemirror/lang-json';
 export { html } from '@codemirror/lang-html';
-export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-590736cc.js';
+export { C as CodeLanguage, s as OrCodeV3 } from './OrCode-79ec7fc2.js';
 export { EditorView } from '@codemirror/view';
 export { EditorState } from '@codemirror/state';
 export { s as OrCollapse } from './OrCollapse-d7c0afae.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-7e1067a0.js';
-export { s as OrCombinedInputV3 } from './OrCombinedInput-1a22e413.js';
+export { s as OrCombinedInputV3 } from './OrCombinedInput-391b1de9.js';
 export { s as OrConfirm } from './OrConfirm-c63285a6.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-fdc47d05.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-7333b2ff.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-78d02563.js';
-export { s as OrDateFormatV3 } from './OrDateFormat-755671ca.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-a65e349c.js';
-export { s as OrDateRangePickerV3 } from './OrDateRangePicker-06b39fc4.js';
-export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-3408f038.js';
+export { s as OrDateFormatV3 } from './OrDateFormat-3ef8c5c3.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-1d21985d.js';
+export { s as OrDateRangePickerV3 } from './OrDateRangePicker-fb715f58.js';
+export { s as OrDateTimeFormatV3 } from './OrDateTimeFormat-595566fa.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-45bc8bd3.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-b2749f72.js';
-export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-c6ea3195.js';
-export { D as DateTimePickerTimeFormat, f as formatDate, a as formatTime, g as getDatePlaceholder, b as getTimePlaceholder } from './getTimePlaceholder-a1d75821.js';
+export { D as DateFormat, L as Locale, s as OrDateTimePickerV3, T as TimeFormat } from './OrDateTimePicker-c3544059.js';
+export { s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, f as OrDateTimePickerTimeControl, g as OrDateTimePickerTimeSelect } from './OrDateTimePickerTimeSelect-62e04a6c.js';
+export { D as DateTimePickerDateFormat, a as DateTimePickerTimeFormat, f as formatDate, b as formatTime, g as getDatePlaceholder, c as getTimePlaceholder } from './getTimePlaceholder-9d18b5ac.js';
 export { g as getCurrentDate } from './getCurrentDate-046a888d.js';
 export { g as getNextMonthDate } from './getNextMonthDate-00c47169.js';
 export { D as DropAreaSize, s as OrDropAreaV3 } from './OrDropArea-ed2a1928.js';
@@ -51,7 +51,7 @@ export { s as OrErrorV3 } from './OrError-331220bc.js';
 export { b as ExpansionPanelBackgroundColor, a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-3281fa33.js';
 export { F as FabColor, s as OrFabV3 } from './OrFab-3d860eef.js';
 export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-c875c590.js';
-export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-17c3cc0a.js';
+export { F as FormGroupDirection, s as OrFormGroupV3 } from './OrFormGroup-230f2015.js';
 export { s as OrHint } from './OrHint-8822005b.js';
 export { s as OrHintV3 } from './OrHint-262c8217.js';
 export { s as OrIcon, O as OrIconColors, a as OrIconType } from './OrIcon-eb0a5aa2.js';
@@ -63,13 +63,13 @@ export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInli
 export { s as OrInlineTextareaV3 } from './OrInlineTextarea-7321d8d3.js';
 export { s as OrInput } from './OrInput-2c3111c2.js';
 export { a as InputBoxSize, I as InputBoxVariant, s as OrInputBoxV3 } from './OrInputBox-287f97ba.js';
-export { I as InputType, s as OrInputV3 } from './OrInput-89bb16d6.js';
+export { I as InputType, s as OrInputV3 } from './OrInput-89162a71.js';
 export { s as OrLabel } from './OrLabel-a7d99df4.js';
-export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-02aa56ad.js';
+export { L as LabelVariant, s as OrLabelV3 } from './OrLabel-59d09591.js';
 export { L as LinkColor, s as OrLinkV3 } from './OrLink-c83a51b2.js';
 export { s as OrList } from './OrList-59f4430e.js';
 export { s as OrListOfInputs } from './OrListOfInputs-c557cd79.js';
-export { s as OrListV3 } from './OrList-384bf436.js';
+export { s as OrListV3 } from './OrList-75b5e6ac.js';
 export { s as OrListItem } from './OrListItem-12e21bc6.js';
 export { L as LoaderViews, s as OrLoader } from './OrLoader-0b463089.js';
 export { a as LoaderColor, b as LoaderSize, L as LoaderVariant, s as OrLoaderV3 } from './OrLoader-5e2f359b.js';
@@ -91,17 +91,17 @@ export { s as OrProgress, O as OrProgressColors, a as OrProgressTypes } from './
 export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrProgress-0939955c.js';
 export { s as OrRadio } from './OrRadio-40bf2c87.js';
 export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
-export { s as OrRadioGroupV3 } from './OrRadioGroup-6a5af61f.js';
-export { s as OrRadioV3 } from './OrRadio-160d7841.js';
+export { s as OrRadioGroupV3 } from './OrRadioGroup-2648ef67.js';
+export { s as OrRadioV3 } from './OrRadio-a7bb97f7.js';
 export { s as OrRangeSliderV3 } from './OrRangeSlider-1284dce6.js';
 export { s as OrRatingV3 } from './OrRating-640f9e87.js';
 export { s as OrResizeablePanelV3, R as ResizeablePanelPadding, a as ResizeablePanelPlacement } from './OrResizeablePanel-e107f883.js';
-export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-87baa915.js';
+export { F as Formats, s as OrRichTextEditorV3 } from './OrRichTextEditor-56c41be2.js';
 export { s as OrSearch } from './OrSearch-54a642d3.js';
-export { s as OrSearchV3 } from './OrSearch-42922cb7.js';
+export { s as OrSearchV3 } from './OrSearch-169317ea.js';
 export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-4b163ea9.js';
 export { s as OrSelect } from './OrSelect-4f2ea2f2.js';
-export { s as OrSelectV3 } from './OrSelect-27ede5ab.js';
+export { s as OrSelectV3 } from './OrSelect-cb207029.js';
 export { s as OrSidebar, O as OrSidebarSide } from './OrSidebar-4ab42b93.js';
 export { s as OrSidebarV3, S as SidebarPlacement } from './props-3212cd17.js';
 export { s as OrSkeletonCircle } from './OrSkeletonCircle-66e175a0.js';
@@ -117,25 +117,25 @@ export { s as OrSortingV3 } from './OrSorting-c8fa584a.js';
 export { s as OrStatusV3, a as StatusSize, S as StatusVariant } from './OrStatus-a33a7e88.js';
 export { s as OrStepper } from './OrStepper-b2d7dd2d.js';
 export { s as OrSwitch } from './OrSwitch-05fe7681.js';
-export { s as OrSwitchV3 } from './OrSwitch-43616cd3.js';
+export { s as OrSwitchV3 } from './OrSwitch-bd2093d2.js';
 export { s as OrTab } from './OrTab-d8d4e871.js';
 export { s as OrTabHeaderItem } from './OrTabHeaderItem-c2af7ca3.js';
 export { s as OrTabV3 } from './OrTab-74a9bd5b.js';
 export { s as OrTabs } from './OrTabs-3da3ea89.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs-bc0fc18a.js';
 export { s as OrTag } from './OrTag-04abf6a7.js';
-export { s as OrTagInputV3 } from './OrTagInput-e768c2d1.js';
+export { s as OrTagInputV3 } from './OrTagInput-c68c8430.js';
 export { s as OrTagV3, a as TagColor, T as TagVariant } from './OrTag-a29c2113.js';
 export { s as OrTagsV3, T as TagsOverflow } from './OrTags-215da9e7.js';
 export { s as OrTeleport } from './OrTeleport.vue3-9bce0c02.js';
 export { s as OrTeleportV3 } from './OrTeleport.vue3-8099178c.js';
 export { s as OrTextV3 } from './OrText-ea114c19.js';
 export { s as OrTextarea } from './OrTextarea-7a753c1a.js';
-export { s as OrTextareaV3 } from './OrTextarea-97b57866.js';
+export { s as OrTextareaV3 } from './OrTextarea-d5beb823.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-9524352e.js';
-export { s as OrTimeFormatV3 } from './OrTimeFormat-ef653117.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-9dcd20dd.js';
-export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-1f6509eb.js';
+export { s as OrTimeFormatV3 } from './OrTimeFormat-25c748db.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-5f6111da.js';
+export { s as OrTimeRangePickerV3 } from './OrTimeRangePicker-0d79f664.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-71ba538b.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-05a9c81b.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-bd194714.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "10.0.2",
+  "version": "10.1.0-beta.4242.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -177,6 +177,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "f037d02d9572a276f304de9dbeb56a1ca1a33316"
+  }
 }

package/src/components/or-date-format-v3/OrDateFormat.vue

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

package/src/components/or-date-picker-v3/OrDatePicker.vue

@@ -34,6 +34,8 @@
         v-dropdown-open="openPopover"
         v-dropdown-close="closePopover"
         :class="['!border-0']"
+        :format="resolvedFormat"
+        :locale="resolvedLocale"
         :selected="popover && popover.state === 'open'"
         :required="required"
         :readonly="readonly"
@@ -61,6 +63,7 @@
 
         <OrDateTimePickerMonthSelect
           v-model="initialValue"
+          :locale="resolvedLocale"
           :year-filter="yearFilter"
           :month-filter="monthFilter"
         />
@@ -68,6 +71,8 @@
         <OrDateTimePickerDateSelect
           v-model="draftModelValue"
           :initial-value="initialValue"
+          :format="resolvedFormat"
+          :locale="resolvedLocale"
           :date-filter="dateFilter"
         />
 
@@ -118,10 +123,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
+import { PropType, computed, defineComponent, inject, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useProxyModelValue } from '../../hooks';
-import { FilterFunction, getCurrentDate, OrDateTimePickerDateControl, OrDateTimePickerDateSelect, OrDateTimePickerMobileControl, OrDateTimePickerMonthSelect, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader } from '../or-date-time-picker-v3';
+import { DateFormat, DateTimePickerDateFormat, DateTimePickerFilterFunction, DateTimePickerModelValue, Locale, OrDateTimePickerDateControl, OrDateTimePickerDateSelect, OrDateTimePickerMobileControl, OrDateTimePickerMonthSelect, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader, getCurrentDate } from '../or-date-time-picker-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
@@ -129,7 +134,7 @@ import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { InputBoxSize, OrInputBoxV3 as OrInputBox } from '../or-input-box-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
-import { DatePicker, DatePickerPopover } from './styles';
+import * as Styles from './styles';
 
 export default defineComponent({
   name: 'OrDatePicker',
@@ -162,22 +167,32 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Date,
+      type: undefined as unknown as PropType<DateTimePickerModelValue>,
+      default: undefined,
+    },
+
+    format: {
+      type: String as PropType<`${DateTimePickerDateFormat}`>,
+      default: undefined,
+    },
+
+    locale: {
+      type: String,
       default: undefined,
     },
 
     yearFilter: {
-      type: Function as PropType<FilterFunction>,
+      type: Function as PropType<DateTimePickerFilterFunction>,
       default: undefined,
     },
 
     monthFilter: {
-      type: Function as PropType<FilterFunction>,
+      type: Function as PropType<DateTimePickerFilterFunction>,
       default: undefined,
     },
 
     dateFilter: {
-      type: Function as PropType<FilterFunction>,
+      type: Function as PropType<DateTimePickerFilterFunction>,
       default: undefined,
     },
 
@@ -239,26 +254,34 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
+    const rootStyles = computed(() => [
+      'or-date-picker-v3',
+      ...Styles.DatePicker,
+    ]);
+
     const inputBox = ref<InstanceType<typeof OrInputBox>>();
     const inputBoxRoot = computed(() => inputBox.value?.root);
 
     const popover = ref<InstanceType<typeof OrPopover>>();
     const popoverState = computed(() => popover.value?.state);
 
-    // Styles
-    const rootStyles = computed(() => [
-      'or-date-picker-v3',
-      ...DatePicker,
-    ]);
-
     const popoverStyles = computed(() => [
       'or-date-picker-popover-v3',
-      ...DatePickerPopover,
+      ...Styles.DatePickerPopover,
     ]);
 
+    // Options
+    const resolvedFormat = computed(() => {
+      return props.format ?? inject(DateFormat, DateTimePickerDateFormat.Short);
+    });
+
+    const resolvedLocale = computed(() => {
+      return props.locale ?? inject(Locale, navigator.language);
+    });
+
     // State
     const initialValue = ref(props.modelValue ?? getCurrentDate());
 
@@ -320,8 +343,8 @@ export default defineComponent({
       }
     }
 
-    function formatDateAlt(value?: Date): string {
-      return value?.toLocaleString(navigator.language, {
+    function formatDateAlt(value: DateTimePickerModelValue): string {
+      return value?.toLocaleString(resolvedLocale.value, {
         dateStyle: 'medium',
         timeZone: 'UTC',
       }) ?? '--';
@@ -329,16 +352,23 @@ export default defineComponent({
 
     return {
       root,
+      rootStyles,
+
       inputBox,
       inputBoxRoot,
+
       popover,
       popoverState,
-      rootStyles,
       popoverStyles,
+
+      resolvedFormat,
+      resolvedLocale,
+
       initialValue,
       proxyModelValue,
       draftModelValue,
       isInvalidDraftModelValue,
+
       apply,
       reset,
       openPopover,