@onereach/ui-components 3.0.4-beta.2487.0 → 3.0.4-beta.2497.0

package/dist/esm/v2/{OrDateTimePicker-7411ea1f.js → OrDateTimePicker-57094f24.js}

@@ -1,7 +1,4 @@
 import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
-import { s as styleInject } from './style-inject.es-4c6f2515.js';
-import { _ as __vue_component__$f } from './OrInputBox-0f4e8500.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-b2d0c353.js';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
@@ -9,6 +6,8 @@ import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34
 import { _ as __vue_component__$d } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$e } from './OrHint-aa221198.js';
 import { _ as __vue_component__$a } from './OrIconButton-ec2e21aa.js';
+import { _ as __vue_component__$f } from './OrInputBox-0f4e8500.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-b2d0c353.js';
 import { _ as __vue_component__$8 } from './OrLabel-63380256.js';
 import { _ as __vue_component__$g } from './OrPopover-83c885d0.js';
 import { _ as __vue_component__$7 } from './OrButton-2283df1c.js';
@@ -16,6 +15,7 @@ import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 import { _ as __vue_component__$9 } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$c } from './OrMenuItem-6f9b8a93.js';
 import { _ as __vue_component__$b } from './OrMenu-18a7f179.js';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 function useDefaultDate() {
   return new Date().getUTCDate();
@@ -44,7 +44,9 @@ const DateTimePickerDaySelect = [
 'px-md', 'py-md', 'gap-sm'];
 const DateTimePickerDaySelectButtonGroup = [
 // Layout
-'grid', 'grid-cols-7'];
+'grid', 'grid-cols-7',
+// Spacing
+'gap-xs'];
 const DateTimePickerDaySelectButtonGroupItem = [
 // Box
 'min-w-fit',
@@ -799,8 +801,10 @@ const DateTimePicker = [
 // Spacing
 'gap-xs'];
 const DateTimePickerControl = [
+// Layout
+'layout-inline-row justify-center',
 // Theme (focus)
-'focus:theme-border-1-current', 'dark:focus:theme-border-1-current-dark', 'focus:theme-border-underline', 'dark:focus:theme-border-underline'];
+'focus:theme-border-2-current', 'dark:focus:theme-border-2-current-dark', 'focus:theme-border-underline', 'dark:focus:theme-border-underline'];
 
 var script = defineComponent({
   name: 'OrDateTimePicker',
@@ -939,6 +943,34 @@ var script = defineComponent({
         popoverInstance.close();
       }
     }
+    function formatDate(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        dateStyle: 'short',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
+    function formatTime(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        timeStyle: 'short',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
+    function formatDateAlt(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        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('default', {
+        timeStyle: 'short',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
     return {
       root,
       dateControl,
@@ -955,12 +987,16 @@ var script = defineComponent({
       toggleDatePopover,
       toggleTimePopover,
       closeDatePopover,
-      closeTimePopover
+      closeTimePopover,
+      formatDate,
+      formatTime,
+      formatDateAlt,
+      formatTimeAlt
     };
   }
 });
 
-var css_248z = "input[data-v-0bec0f54]{min-width:0;background:0 0;outline:0}input[type=date][data-v-0bec0f54]::-webkit-datetime-edit-day-field,input[type=date][data-v-0bec0f54]::-webkit-datetime-edit-month-field,input[type=date][data-v-0bec0f54]::-webkit-datetime-edit-year-field{display:none}input[type=time][data-v-0bec0f54]::-webkit-datetime-edit-ampm-field,input[type=time][data-v-0bec0f54]::-webkit-datetime-edit-hour-field,input[type=time][data-v-0bec0f54]::-webkit-datetime-edit-minute-field{display:none}input[type=date][data-v-0bec0f54]::-webkit-datetime-edit-text,input[type=time][data-v-0bec0f54]::-webkit-datetime-edit-text{display:none}input[type=date][data-v-0bec0f54]::-webkit-calendar-picker-indicator,input[type=time][data-v-0bec0f54]::-webkit-calendar-picker-indicator{display:none}";
+var css_248z = "input[data-v-183da045]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -1006,7 +1042,7 @@ var __vue_render__ = function () {
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, [_c('input', _vm._b({
+  }, [_c('div', _vm._b({
     directives: [{
       name: "dropdown-open",
       rawName: "v-dropdown-open",
@@ -1021,12 +1057,12 @@ var __vue_render__ = function () {
     ref: "dateControl",
     class: _vm.controlStyles,
     attrs: {
-      "type": 'date',
+      "contenteditable": true,
       "required": _vm.required,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, 'input', _vm.controlAttributes, false)), _vm._v(" "), _c('input', _vm._b({
+  }, 'div', _vm.controlAttributes, false), [_vm._v("\n      " + _vm._s(_vm.formatDate(_vm.proxyModelValue)) + "\n    ")]), _vm._v(" "), _c('div', _vm._b({
     directives: [{
       name: "dropdown-open",
       rawName: "v-dropdown-open",
@@ -1041,12 +1077,12 @@ var __vue_render__ = function () {
     ref: "timeControl",
     class: _vm.controlStyles,
     attrs: {
-      "type": 'time',
+      "contenteditable": true,
       "required": _vm.required,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
     }
-  }, 'input', _vm.controlAttributes, false)), _vm._v(" "), _c('OrPopover', {
+  }, 'div', _vm.controlAttributes, false), [_vm._v("\n      " + _vm._s(_vm.formatTime(_vm.proxyModelValue)) + "\n    ")]), _vm._v(" "), _c('OrPopover', {
     ref: "datePopover",
     attrs: {
       "variant": 'auto',
@@ -1057,11 +1093,11 @@ var __vue_render__ = function () {
     attrs: {
       "label": "Date"
     }
-  }, [_vm._v("\n          Sep 12\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
+  }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
     attrs: {
       "label": "Time"
     }
-  }, [_vm._v("\n          9:07\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
+  }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
     model: {
       value: _vm.draftModelValue,
       callback: function ($$v) {
@@ -1099,11 +1135,11 @@ var __vue_render__ = function () {
     attrs: {
       "label": "Date"
     }
-  }, [_vm._v("\n          Sep 12\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
+  }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")]), _vm._v(" "), _c('OrDateTimePickerMobileControl', {
     attrs: {
       "label": "Time"
     }
-  }, [_vm._v("\n          9:07\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
+  }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
     model: {
       value: _vm.draftModelValue,
       callback: function ($$v) {
@@ -1153,7 +1189,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-0bec0f54";
+const __vue_scope_id__ = "data-v-183da045";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/components/index.js

@@ -21,7 +21,7 @@ export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k
 export { _ as OrConfirm } from '../OrConfirm-64e815c7.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-1be17f86.js';
 export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-85e5e03e.js';
-export { _ as OrDateTimePickerV3 } from '../OrDateTimePicker-7411ea1f.js';
+export { _ as OrDateTimePickerV3 } from '../OrDateTimePicker-57094f24.js';
 export { _ as OrInputBoxV3 } from '../OrInputBox-0f4e8500.js';
 export { I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, I as SearchSize, I as SelectSize, I as TextareaSize } from '../OrInputBox.vue_rollup-plugin-vue_script-b2d0c353.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from '../OrEmptyState-2d3fd68d.js';

package/dist/esm/v2/components/or-date-time-picker-v3/OrDateTimePicker.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-import { DateTimePickerSize } from '.';
+import { DateTimePickerSize } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     dateControl: import("@vue/composition-api").Ref<HTMLInputElement | undefined>;
@@ -37,6 +37,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggleTimePopover: () => void;
     closeDatePopover: () => void;
     closeTimePopover: () => void;
+    formatDate: (value?: Date) => string;
+    formatTime: (value?: Date) => string;
+    formatDateAlt: (value?: Date) => string;
+    formatTimeAlt: (value?: Date) => string;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: DateConstructor;
@@ -160,6 +164,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggleTimePopover: () => void;
     closeDatePopover: () => void;
     closeTimePopover: () => void;
+    formatDate: (value?: Date) => string;
+    formatTime: (value?: Date) => string;
+    formatDateAlt: (value?: Date) => string;
+    formatTimeAlt: (value?: Date) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: Date;
     size: DateTimePickerSize;

package/dist/esm/v2/components/or-date-time-picker-v3/index.js

@@ -1,14 +1,12 @@
-export { _ as OrDateTimePickerV3 } from '../../OrDateTimePicker-7411ea1f.js';
+export { _ as OrDateTimePickerV3 } from '../../OrDateTimePicker-57094f24.js';
 export { I as DateTimePickerSize } from '../../OrInputBox.vue_rollup-plugin-vue_script-b2d0c353.js';
 import 'vue-demi';
-import '../../style-inject.es-4c6f2515.js';
-import '../../OrInputBox-0f4e8500.js';
-import '../../normalize-component-6e8e3d80.js';
 import '../../dropdown-open-e1f90e0a.js';
 import '../../useIdAttribute-859439f0.js';
 import '@vueuse/core';
 import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrError-4ffc1c39.js';
+import '../../normalize-component-6e8e3d80.js';
 import '../../OrHint-aa221198.js';
 import '../../OrIconButton-ec2e21aa.js';
 import '../../OrIcon-d35a84d8.js';
@@ -21,8 +19,10 @@ import '../../OrBottomSheet-29df8db9.js';
 import '../../OrOverlay-2ce3cfd7.js';
 import '../../OrTeleport.vue2-fb92f29f.js';
 import 'portal-vue';
+import '../../OrInputBox-0f4e8500.js';
 import '../../OrLabel-63380256.js';
 import '../../OrButton-2283df1c.js';
 import '../../OrLoader-b0c381f9.js';
 import '../../OrMenuItem-6f9b8a93.js';
 import '../../OrMenu-18a7f179.js';
+import '../../style-inject.es-4c6f2515.js';

package/dist/esm/v2/index.js

@@ -21,7 +21,7 @@ export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k
 export { _ as OrConfirm } from './OrConfirm-64e815c7.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-1be17f86.js';
 export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-85e5e03e.js';
-export { _ as OrDateTimePickerV3 } from './OrDateTimePicker-7411ea1f.js';
+export { _ as OrDateTimePickerV3 } from './OrDateTimePicker-57094f24.js';
 export { _ as OrInputBoxV3 } from './OrInputBox-0f4e8500.js';
 export { I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, I as SearchSize, I as SelectSize, I as TextareaSize } from './OrInputBox.vue_rollup-plugin-vue_script-b2d0c353.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from './OrEmptyState-2d3fd68d.js';

package/dist/esm/v3/{OrDateTimePicker-966d5b1d.js → OrDateTimePicker-a8247a84.js}

@@ -1,7 +1,4 @@
 import { defineComponent, ref, computed, reactive, watch } from 'vue-demi';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, renderSlot, resolveDirective, createCommentVNode, withDirectives, mergeProps, pushScopeId, popScopeId } from 'vue';
-import { s as styleInject } from './style-inject.es-4c6f2515.js';
-import { s as script$f, I as InputBoxSize } from './OrInputBox-901887a1.js';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
 import '@vueuse/core';
@@ -9,12 +6,15 @@ import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34
 import { s as script$d } from './OrError-c01d0c29.js';
 import { s as script$e } from './OrHint-06ab89d7.js';
 import { s as script$a } from './OrIconButton-e3f4d060.js';
+import { s as script$f, I as InputBoxSize } from './OrInputBox-901887a1.js';
 import { s as script$8 } from './OrLabel-4da56db0.js';
 import { s as script$g } from './OrPopover-3ac8f589.js';
 import { s as script$7 } from './OrButton-5a850657.js';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, renderSlot, resolveDirective, createCommentVNode, withDirectives, mergeProps, pushScopeId, popScopeId } from 'vue';
 import { s as script$9 } from './OrIcon-62793572.js';
 import { s as script$c } from './OrMenuItem-dbee450f.js';
 import { s as script$b } from './OrMenu-70cee836.js';
+import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 function useDefaultDate() {
   return new Date().getUTCDate();
@@ -43,7 +43,9 @@ const DateTimePickerDaySelect = [
 'px-md', 'py-md', 'gap-sm'];
 const DateTimePickerDaySelectButtonGroup = [
 // Layout
-'grid', 'grid-cols-7'];
+'grid', 'grid-cols-7',
+// Spacing
+'gap-xs'];
 const DateTimePickerDaySelectButtonGroupItem = [
 // Box
 'min-w-fit',
@@ -627,8 +629,10 @@ const DateTimePicker = [
 // Spacing
 'gap-xs'];
 const DateTimePickerControl = [
+// Layout
+'layout-inline-row justify-center',
 // Theme (focus)
-'focus:theme-border-1-current', 'dark:focus:theme-border-1-current-dark', 'focus:theme-border-underline', 'dark:focus:theme-border-underline'];
+'focus:theme-border-2-current', 'dark:focus:theme-border-2-current-dark', 'focus:theme-border-underline', 'dark:focus:theme-border-underline'];
 
 var script = defineComponent({
   name: 'OrDateTimePicker',
@@ -767,6 +771,34 @@ var script = defineComponent({
         popoverInstance.close();
       }
     }
+    function formatDate(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        dateStyle: 'short',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
+    function formatTime(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        timeStyle: 'short',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
+    function formatDateAlt(value) {
+      var _a;
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString('default', {
+        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('default', {
+        timeStyle: 'short',
+        timeZone: 'UTC'
+      })) !== null && _a !== void 0 ? _a : '--';
+    }
     return {
       root,
       dateControl,
@@ -783,7 +815,11 @@ var script = defineComponent({
       toggleDatePopover,
       toggleTimePopover,
       closeDatePopover,
-      closeTimePopover
+      closeTimePopover,
+      formatDate,
+      formatTime,
+      formatDateAlt,
+      formatTimeAlt
     };
   }
 });
@@ -833,23 +869,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     readonly: _ctx.readonly,
     disabled: _ctx.disabled
   }, {
-    default: withCtx(() => [withDirectives(createElementVNode("input", mergeProps({
+    default: withCtx(() => [createCommentVNode(" <input\n        ref=\"dateControl\"\n        v-dropdown-open=\"toggleDatePopover\"\n        v-dropdown-close=\"closeDatePopover\"\n        v-bind=\"controlAttributes\"\n        :class=\"controlStyles\"\n        :type=\"'text'\"\n        :value=\"formatDate(proxyModelValue)\"\n        :required=\"required\"\n        :readonly=\"readonly\"\n        :disabled=\"disabled\"\n      > "), createCommentVNode(" <input\n        ref=\"timeControl\"\n        v-dropdown-open=\"toggleTimePopover\"\n        v-dropdown-close=\"closeTimePopover\"\n        v-bind=\"controlAttributes\"\n        :class=\"controlStyles\"\n        :type=\"'text'\"\n        :value=\"formatTime(proxyModelValue)\"\n        :required=\"required\"\n        :readonly=\"readonly\"\n        :disabled=\"disabled\"\n      > "), withDirectives((openBlock(), createElementBlock("div", mergeProps({
       ref: "dateControl"
     }, _ctx.controlAttributes, {
       class: _ctx.controlStyles,
-      type: 'date',
+      contenteditable: true,
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }), null, 16 /* FULL_PROPS */, _hoisted_1), [[_directive_dropdown_open, _ctx.toggleDatePopover], [_directive_dropdown_close, _ctx.closeDatePopover]]), withDirectives(createElementVNode("input", mergeProps({
+    }), [createTextVNode(toDisplayString(_ctx.formatDate(_ctx.proxyModelValue)), 1 /* TEXT */)], 16 /* FULL_PROPS */, _hoisted_1)), [[_directive_dropdown_open, _ctx.toggleDatePopover], [_directive_dropdown_close, _ctx.closeDatePopover]]), withDirectives((openBlock(), createElementBlock("div", mergeProps({
       ref: "timeControl"
     }, _ctx.controlAttributes, {
       class: _ctx.controlStyles,
-      type: 'time',
+      contenteditable: true,
       required: _ctx.required,
       readonly: _ctx.readonly,
       disabled: _ctx.disabled
-    }), null, 16 /* FULL_PROPS */, _hoisted_2), [[_directive_dropdown_open, _ctx.toggleTimePopover], [_directive_dropdown_close, _ctx.closeTimePopover]]), createVNode(_component_OrPopover, {
+    }), [createTextVNode(toDisplayString(_ctx.formatTime(_ctx.proxyModelValue)), 1 /* TEXT */)], 16 /* FULL_PROPS */, _hoisted_2)), [[_directive_dropdown_open, _ctx.toggleTimePopover], [_directive_dropdown_close, _ctx.closeTimePopover]]), createVNode(_component_OrPopover, {
       ref: "datePopover",
       variant: 'auto',
       trigger: _ctx.dateControl,
@@ -859,12 +895,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         default: withCtx(() => [createVNode(_component_OrDateTimePickerMobileControl, {
           label: "Date"
         }, {
-          default: withCtx(() => [createTextVNode(" Sep 12 ")]),
+          default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatDateAlt(_ctx.draftModelValue)), 1 /* TEXT */)]),
+
           _: 1 /* STABLE */
         }), createVNode(_component_OrDateTimePickerMobileControl, {
           label: "Time"
         }, {
-          default: withCtx(() => [createTextVNode(" 9:07 ")]),
+          default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatTimeAlt(_ctx.draftModelValue)), 1 /* TEXT */)]),
+
           _: 1 /* STABLE */
         })]),
 
@@ -896,12 +934,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         default: withCtx(() => [createVNode(_component_OrDateTimePickerMobileControl, {
           label: "Date"
         }, {
-          default: withCtx(() => [createTextVNode(" Sep 12 ")]),
+          default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatDateAlt(_ctx.draftModelValue)), 1 /* TEXT */)]),
+
           _: 1 /* STABLE */
         }), createVNode(_component_OrDateTimePickerMobileControl, {
           label: "Time"
         }, {
-          default: withCtx(() => [createTextVNode(" 9:07 ")]),
+          default: withCtx(() => [createTextVNode(toDisplayString(_ctx.formatTimeAlt(_ctx.draftModelValue)), 1 /* TEXT */)]),
+
           _: 1 /* STABLE */
         })]),
 
@@ -947,7 +987,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8 /* PROPS */, ["disabled"])) : createCommentVNode("v-if", true)], 2 /* CLASS */);
 }
 
-var css_248z = "\ninput[data-v-4ab76bac] {\n  min-width: 0;\n  background: none;\n  outline: none;\n}\ninput[type=\"date\"][data-v-4ab76bac]::-webkit-datetime-edit-day-field,\ninput[type=\"date\"][data-v-4ab76bac]::-webkit-datetime-edit-month-field,\ninput[type=\"date\"][data-v-4ab76bac]::-webkit-datetime-edit-year-field {\n  display: none;\n}\ninput[type=\"time\"][data-v-4ab76bac]::-webkit-datetime-edit-hour-field,\ninput[type=\"time\"][data-v-4ab76bac]::-webkit-datetime-edit-minute-field,\ninput[type=\"time\"][data-v-4ab76bac]::-webkit-datetime-edit-ampm-field {\n  display: none;\n}\ninput[type=\"date\"][data-v-4ab76bac]::-webkit-datetime-edit-text,\ninput[type=\"time\"][data-v-4ab76bac]::-webkit-datetime-edit-text {\n  display: none;\n}\ninput[type=\"date\"][data-v-4ab76bac]::-webkit-calendar-picker-indicator,\ninput[type=\"time\"][data-v-4ab76bac]::-webkit-calendar-picker-indicator {\n  display: none;\n}\n";
+var css_248z = "\ninput[data-v-4ab76bac] {\n  min-width: 0;\n  background: none;\n  outline: none;\n}\n";
 styleInject(css_248z);
 
 script.render = render;

package/dist/esm/v3/components/index.js

@@ -18,7 +18,7 @@ export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k
 export { s as OrConfirm } from '../OrConfirm-f408faf5.js';
 export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-ecb8c576.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-30749526.js';
-export { s as OrDateTimePickerV3 } from '../OrDateTimePicker-966d5b1d.js';
+export { s as OrDateTimePickerV3 } from '../OrDateTimePicker-a8247a84.js';
 export { I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TextareaSize } from '../OrInputBox-901887a1.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState-5349a1f9.js';
 export { s as OrError } from '../OrError-f90296db.js';

package/dist/esm/v3/components/or-date-time-picker-v3/OrDateTimePicker.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-import { DateTimePickerSize } from '.';
+import { DateTimePickerSize } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     dateControl: import("@vue/composition-api").Ref<HTMLInputElement | undefined>;
@@ -37,6 +37,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggleTimePopover: () => void;
     closeDatePopover: () => void;
     closeTimePopover: () => void;
+    formatDate: (value?: Date) => string;
+    formatTime: (value?: Date) => string;
+    formatDateAlt: (value?: Date) => string;
+    formatTimeAlt: (value?: Date) => string;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
         type: DateConstructor;
@@ -160,6 +164,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggleTimePopover: () => void;
     closeDatePopover: () => void;
     closeTimePopover: () => void;
+    formatDate: (value?: Date) => string;
+    formatTime: (value?: Date) => string;
+    formatDateAlt: (value?: Date) => string;
+    formatTimeAlt: (value?: Date) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: Date;
     size: DateTimePickerSize;

package/dist/esm/v3/components/or-date-time-picker-v3/index.js

@@ -1,13 +1,12 @@
-export { s as OrDateTimePickerV3 } from '../../OrDateTimePicker-966d5b1d.js';
+export { s as OrDateTimePickerV3 } from '../../OrDateTimePicker-a8247a84.js';
 export { I as DateTimePickerSize } from '../../OrInputBox-901887a1.js';
 import 'vue-demi';
-import 'vue';
-import '../../style-inject.es-4c6f2515.js';
 import '../../dropdown-open-e1f90e0a.js';
 import '../../useIdAttribute-859439f0.js';
 import '@vueuse/core';
 import '../../useValidationAttributes-d1abbe34.js';
 import '../../OrError-c01d0c29.js';
+import 'vue';
 import '../../OrHint-06ab89d7.js';
 import '../../OrIconButton-e3f4d060.js';
 import '../../OrIcon-62793572.js';
@@ -24,3 +23,4 @@ import '../../OrButton-5a850657.js';
 import '../../OrLoader-b79022da.js';
 import '../../OrMenuItem-dbee450f.js';
 import '../../OrMenu-70cee836.js';
+import '../../style-inject.es-4c6f2515.js';

package/dist/esm/v3/index.js

@@ -18,7 +18,7 @@ export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k
 export { s as OrConfirm } from './OrConfirm-f408faf5.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-ecb8c576.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-30749526.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-966d5b1d.js';
+export { s as OrDateTimePickerV3 } from './OrDateTimePicker-a8247a84.js';
 export { I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TextareaSize } from './OrInputBox-901887a1.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f9.js';
 export { s as OrError } from './OrError-f90296db.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "3.0.4-beta.2487.0",
+  "version": "3.0.4-beta.2497.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -38,7 +38,7 @@
     "@codemirror/lang-json": "6.0.0",
     "@codemirror/lang-markdown": "6.0.1",
     "@floating-ui/dom": "0.3.1",
-    "@onereach/styles": "^2.37.4-beta.2487.0",
+    "@onereach/styles": "^2.37.4-beta.2497.0",
     "@splidejs/splide": "4.0.6",
     "@types/lodash": "4.14.173",
     "@types/sortablejs": "1.10.7",