@onereach/ui-components 3.0.4-beta.2487.0 → 3.0.4-beta.2500.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,16 +89,22 @@
       >
         <OrDateTimePickerPopoverHeader>
           <OrDateTimePickerMobileControl label="Date">
-            Sep 12
+            {{ formatDateAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
 
           <OrDateTimePickerMobileControl label="Time">
-            9:07
+            {{ formatTimeAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
 
-        <OrDateTimePickerMonthSelect v-model="draftModelValue" />
-        <OrDateTimePickerDaySelect v-model="draftModelValue" />
+        <OrDateTimePickerMonthSelect
+          v-model="draftModelValue"
+          :filter="filter"
+        />
+        <OrDateTimePickerDaySelect
+          v-model="draftModelValue"
+          :filter="filter"
+        />
 
         <OrDateTimePickerPopoverFooter
           @resolve="proxyModelValue = draftModelValue; datePopover.close()"
@@ -84,15 +120,18 @@
       >
         <OrDateTimePickerPopoverHeader>
           <OrDateTimePickerMobileControl label="Date">
-            Sep 12
+            {{ formatDateAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
 
           <OrDateTimePickerMobileControl label="Time">
-            9:07
+            {{ formatTimeAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
 
-        <OrDateTimePickerTimeSelect v-model="draftModelValue" />
+        <OrDateTimePickerTimeSelect
+          v-model="draftModelValue"
+          :filter="filter"
+        />
 
         <OrDateTimePickerPopoverFooter
           @resolve="proxyModelValue = draftModelValue; timePopover.close()"
@@ -132,7 +171,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 +185,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({
@@ -183,6 +222,11 @@ export default defineComponent({
       default: undefined,
     },
 
+    filter: {
+      type: Function as PropType<(value: Date) => boolean>,
+      default: undefined,
+    },
+
     size: {
       type: String as PropType<DateTimePickerSize>,
       default: DateTimePickerSize.M,
@@ -329,6 +373,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 +418,10 @@ export default defineComponent({
       toggleTimePopover,
       closeDatePopover,
       closeTimePopover,
+      formatDate,
+      formatTime,
+      formatDateAlt,
+      formatTimeAlt,
     };
   },
 });
@@ -357,26 +433,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/OrDateTimePickerDaySelect.vue

@@ -10,6 +10,7 @@
         :class="buttonGroupItemStyles"
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
         :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
+        :disabled="filter && !filter(value)"
         @click.stop="proxyModelValue = value"
       >
         {{ formatDay(value) }}
@@ -19,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { useDefaultDate } from '../../hooks/useDefaultDate';
 import { useDefaultHours } from '../../hooks/useDefaultHours';
@@ -45,6 +46,11 @@ export default defineComponent({
       type: Date,
       default: undefined,
     },
+
+    filter: {
+      type: Function as PropType<(value: Date) => boolean>,
+      default: undefined,
+    },
   },
 
   emits: [

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/partials/or-date-time-picker-month-select/OrDateTimePickerMonthSelect.vue

@@ -35,6 +35,7 @@
           v-for="value in yearOptions"
           :key="Number(value)"
           :selected="Number(value) === Number(proxyModelValue)"
+          :disabled="filter && !filter(value)"
           @click.stop="proxyModelValue = value; yearMenu.close()"
         >
           {{ formatYear(value) }}
@@ -49,6 +50,7 @@
           v-for="value in monthOptions"
           :key="Number(value)"
           :selected="Number(value) === Number(proxyModelValue)"
+          :disabled="filter && !filter(value)"
           @click.stop="proxyModelValue = value; monthMenu.close()"
         >
           {{ formatMonth(value) }}
@@ -64,7 +66,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { OrIconButtonV3 as OrIconButton } from '../../../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../../../or-icon-v3';
@@ -98,6 +100,11 @@ export default defineComponent({
       type: Date,
       default: undefined,
     },
+
+    filter: {
+      type: Function as PropType<(value: Date) => boolean>,
+      default: undefined,
+    },
   },
 
   emits: [

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue

@@ -10,6 +10,7 @@
         :class="buttonGroupItemStyles"
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
         :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
+        :disabled="filter && !filter(value)"
         @click.stop="proxyModelValue = value"
       >
         {{ formatHours(value) }}
@@ -25,6 +26,7 @@
         :class="buttonGroupItemStyles"
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
         :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
+        :disabled="filter && !filter(value)"
         @click.stop="proxyModelValue = value"
       >
         {{ formatMinutes(value) }}
@@ -34,7 +36,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { useDefaultDate } from '../../hooks/useDefaultDate';
 import { useDefaultHours } from '../../hooks/useDefaultHours';
@@ -60,6 +62,11 @@ export default defineComponent({
       type: Date,
       default: undefined,
     },
+
+    filter: {
+      type: Function as PropType<(value: Date) => boolean>,
+      default: undefined,
+    },
   },
 
   emits: [

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',