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

package/dist/bundled/v2/{OrDateTimePicker-11b6d4dd.js → OrDateTimePicker-d6f327ad.js}

@@ -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',
@@ -805,8 +807,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',
@@ -945,6 +949,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,
@@ -961,12 +993,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 */
@@ -1012,7 +1048,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",
@@ -1027,12 +1063,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",
@@ -1047,12 +1083,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',
@@ -1063,11 +1099,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) {
@@ -1105,11 +1141,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) {
@@ -1159,7 +1195,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/bundled/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-4d08c38d.js';
 export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-d548aac0.js';
 export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-def82ca4.js';
-export { _ as OrDateTimePickerV3 } from '../OrDateTimePicker-11b6d4dd.js';
+export { _ as OrDateTimePickerV3 } from '../OrDateTimePicker-d6f327ad.js';
 export { I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, I as SearchSize, I as SelectSize, I as TextareaSize } from '../props-c966ae5f.js';
 export { E as EmptyStateSize, _ as OrEmptyStateV3 } from '../OrEmptyState-a38727b9.js';
 export { O as OrError } from '../OrError-29f0ce95.js';

package/dist/bundled/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/bundled/v2/components/or-date-time-picker-v3/index.js

@@ -1,4 +1,4 @@
-export { _ as OrDateTimePickerV3 } from '../../OrDateTimePicker-11b6d4dd.js';
+export { _ as OrDateTimePickerV3 } from '../../OrDateTimePicker-d6f327ad.js';
 export { I as DateTimePickerSize } from '../../props-c966ae5f.js';
 import '../../index-fa6eb4ca.js';
 import 'vue';