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

package/src/components/or-date-time-picker-v3/OrDateTimePicker.vue

@@ -27,29 +27,59 @@
       :readonly="readonly"
       :disabled="disabled"
     >
-      <input
+      <!-- <input
         ref="dateControl"
         v-dropdown-open="toggleDatePopover"
         v-dropdown-close="closeDatePopover"
         v-bind="controlAttributes"
         :class="controlStyles"
-        :type="'date'"
+        :type="'text'"
+        :value="formatDate(proxyModelValue)"
+        :required="required"
+        :readonly="readonly"
+        :disabled="disabled"
+      > -->
+
+      <!-- <input
+        ref="timeControl"
+        v-dropdown-open="toggleTimePopover"
+        v-dropdown-close="closeTimePopover"
+        v-bind="controlAttributes"
+        :class="controlStyles"
+        :type="'text'"
+        :value="formatTime(proxyModelValue)"
+        :required="required"
+        :readonly="readonly"
+        :disabled="disabled"
+      > -->
+
+      <div
+        ref="dateControl"
+        v-dropdown-open="toggleDatePopover"
+        v-dropdown-close="closeDatePopover"
+        v-bind="controlAttributes"
+        :class="controlStyles"
+        :contenteditable="true"
         :required="required"
         :readonly="readonly"
         :disabled="disabled"
       >
+        {{ formatDate(proxyModelValue) }}
+      </div>
 
-      <input
+      <div
         ref="timeControl"
         v-dropdown-open="toggleTimePopover"
         v-dropdown-close="closeTimePopover"
         v-bind="controlAttributes"
         :class="controlStyles"
-        :type="'time'"
+        :contenteditable="true"
         :required="required"
         :readonly="readonly"
         :disabled="disabled"
       >
+        {{ formatTime(proxyModelValue) }}
+      </div>
 
       <OrPopover
         ref="datePopover"
@@ -59,11 +89,11 @@
       >
         <OrDateTimePickerPopoverHeader>
           <OrDateTimePickerMobileControl label="Date">
-            Sep 12
+            {{ formatDateAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
 
           <OrDateTimePickerMobileControl label="Time">
-            9:07
+            {{ formatTimeAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
 
@@ -84,11 +114,11 @@
       >
         <OrDateTimePickerPopoverHeader>
           <OrDateTimePickerMobileControl label="Date">
-            Sep 12
+            {{ formatDateAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
 
           <OrDateTimePickerMobileControl label="Time">
-            9:07
+            {{ formatTimeAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
 
@@ -132,7 +162,6 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType, reactive, ref, watch } from 'vue-demi';
-import { DateTimePickerSize } from '.';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
 import { OrErrorV3 as OrError } from '../or-error-v3';
@@ -147,6 +176,7 @@ import OrDateTimePickerMonthSelect from './partials/or-date-time-picker-month-se
 import OrDateTimePickerPopoverFooter from './partials/or-date-time-picker-popover-footer/OrDateTimePickerPopoverFooter.vue';
 import OrDateTimePickerPopoverHeader from './partials/or-date-time-picker-popover-header/OrDateTimePickerPopoverHeader.vue';
 import OrDateTimePickerTimeSelect from './partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue';
+import { DateTimePickerSize } from './props';
 import { DateTimePicker, DateTimePickerControl } from './styles';
 
 export default defineComponent({
@@ -329,6 +359,34 @@ export default defineComponent({
       }
     }
 
+    function formatDate(value?: Date): string {
+      return value?.toLocaleString('default', {
+        dateStyle: 'short',
+        timeZone: 'UTC',
+      }) ?? '--';
+    }
+
+    function formatTime(value?: Date): string {
+      return value?.toLocaleString('default', {
+        timeStyle: 'short',
+        timeZone: 'UTC',
+      }) ?? '--';
+    }
+
+    function formatDateAlt(value?: Date): string {
+      return value?.toLocaleString('default', {
+        dateStyle: 'medium',
+        timeZone: 'UTC',
+      }) ?? '--';
+    }
+
+    function formatTimeAlt(value?: Date): string {
+      return value?.toLocaleString('default', {
+        timeStyle: 'short',
+        timeZone: 'UTC',
+      }) ?? '--';
+    }
+
     return {
       root,
       dateControl,
@@ -346,6 +404,10 @@ export default defineComponent({
       toggleTimePopover,
       closeDatePopover,
       closeTimePopover,
+      formatDate,
+      formatTime,
+      formatDateAlt,
+      formatTimeAlt,
     };
   },
 });
@@ -357,26 +419,4 @@ input {
   background: none;
   outline: none;
 }
-
-input[type="date"]::-webkit-datetime-edit-day-field,
-input[type="date"]::-webkit-datetime-edit-month-field,
-input[type="date"]::-webkit-datetime-edit-year-field {
-  display: none;
-}
-
-input[type="time"]::-webkit-datetime-edit-hour-field,
-input[type="time"]::-webkit-datetime-edit-minute-field,
-input[type="time"]::-webkit-datetime-edit-ampm-field {
-  display: none;
-}
-
-input[type="date"]::-webkit-datetime-edit-text,
-input[type="time"]::-webkit-datetime-edit-text {
-  display: none;
-}
-
-input[type="date"]::-webkit-calendar-picker-indicator,
-input[type="time"]::-webkit-calendar-picker-indicator {
-  display: none;
-}
 </style>

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-day-select/styles.ts

@@ -13,6 +13,9 @@ export const DateTimePickerDaySelectButtonGroup: string[] = [
   // Layout
   'grid',
   'grid-cols-7',
+
+  // Spacing
+  'gap-xs',
 ];
 
 export const DateTimePickerDaySelectButtonGroupItem: string[] = [

package/src/components/or-date-time-picker-v3/styles.ts

@@ -7,9 +7,12 @@ export const DateTimePicker: string[] = [
 ];
 
 export const DateTimePickerControl: string[] = [
+  // Layout
+  'layout-inline-row justify-center',
+
   // Theme (focus)
-  'focus:theme-border-1-current',
-  'dark:focus:theme-border-1-current-dark',
+  'focus:theme-border-2-current',
+  'dark:focus:theme-border-2-current-dark',
 
   'focus:theme-border-underline',
   'dark:focus:theme-border-underline',