@onereach/ui-components 4.9.1-beta.2907.0 → 4.10.0

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

@@ -1,16 +1,14 @@
-export { s as OrTimePickerV3 } from '../../OrTimePicker-d66edf77.js';
+export { s as OrTimePickerV3 } from '../../OrTimePicker-67f75e85.js';
+export { D as TimePickerFormat } from '../../OrDateTimePicker-0a4d194e.js';
 export { I as TimePickerSize } from '../../OrInputBox-32b37b17.js';
 import 'vue-demi';
 import '../../dropdown-open-e1f90e0a.js';
-import '../../OrDateTimePickerPopoverHeader-3ae517f8.js';
-import '../../OrLabel-4da56db0.js';
+import '../../OrDateTimePickerPopoverHeader-bc8e0bcf.js';
 import 'vue';
 import '../../OrButton-c2b6aa9e.js';
 import '../../OrLoader-b79022da.js';
 import '@vueuse/core';
-import '../../OrDateTimePickerTimeSelect-14503fde.js';
-import '../../OrError-c01d0c29.js';
-import '../../OrHint-06ab89d7.js';
+import '../../OrLabel-4da56db0.js';
 import '../../OrIconButton-0aaadc68.js';
 import '../../OrIcon-62793572.js';
 import '../../OrTooltip-3025564a.js';
@@ -24,3 +22,7 @@ import '../../useResponsive-a02e95b7.js';
 import '../../OrBottomSheet-f2f3aef9.js';
 import '../../OrOverlay-489fdf76.js';
 import '../../OrTeleport.vue3-8099178c.js';
+import '../../OrMenuItem-dbee450f.js';
+import '../../OrMenu-9659b8eb.js';
+import '../../OrError-c01d0c29.js';
+import '../../OrHint-06ab89d7.js';

package/dist/esm/v3/components/or-time-picker-v3/props.d.ts

@@ -1 +1,2 @@
+export { DateTimePickerTimeFormat as TimePickerFormat } from '../or-date-time-picker-v3';
 export { InputBoxSize as TimePickerSize } from '../or-input-box-v3';

package/dist/esm/v3/index.js

@@ -24,9 +24,9 @@ export { s as OrCombinedInputV3 } from './OrCombinedInput-e3891038.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize } from './OrInputBox-32b37b17.js';
 export { s as OrConfirm } from './OrConfirm-704f817e.js';
 export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-5509c440.js';
-export { s as OrDatePickerV3 } from './OrDatePicker-6ac8578a.js';
+export { s as OrDatePickerV3 } from './OrDatePicker-4c4fd5dc.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-c19dcefc.js';
-export { s as OrDateTimePickerV3 } from './OrDateTimePicker-b15d4198.js';
+export { D as DateTimePickerTimeFormat, s as OrDateTimePickerV3, D as TimePickerFormat } from './OrDateTimePicker-0a4d194e.js';
 export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-5349a1f9.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-ade9192b.js';
@@ -107,7 +107,7 @@ export { s as OrTextV3 } from './OrText-d54c951d.js';
 export { s as OrTextarea } from './OrTextarea-31b54c7e.js';
 export { s as OrTextareaV3 } from './OrTextarea-1e19417a.js';
 export { s as OrTextbox, T as TextboxTypes } from './OrTextbox-8d2903db.js';
-export { s as OrTimePickerV3 } from './OrTimePicker-d66edf77.js';
+export { s as OrTimePickerV3 } from './OrTimePicker-67f75e85.js';
 export { s as OrToast, a as OrToastContainer } from './OrToastContainer-72b52576.js';
 export { P as PositionsX, b as PositionsY, c as ToastType, T as TransitionType, a as useQueue, u as useToast } from './useToast-b5ea5cb2.js';
 export { a as OrToastContainerV3, s as OrToastV3, t as TypesV3 } from './types-53cb1e6c.js';
@@ -115,7 +115,6 @@ export { p as PropsV3, a as useQueueV3, u as useToastV3 } from './useToast-a1332
 export { s as OrTooltip } from './OrTooltip-c1006713.js';
 export { s as OrTooltipContent } from './OrTooltipContent-c0042844.js';
 export { s as OrTooltipV3 } from './OrTooltip-3025564a.js';
-export { s as OrTreeV3 } from './OrTree-b4276dfb.js';
 export { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e1f90e0a.js';
 export { u as useControlAttributes, a as useIdAttribute } from './useIdAttribute-859439f0.js';
 export { u as useElevation } from './useElevation-a50ec347.js';
@@ -150,10 +149,8 @@ import './dom-f1d55b67.js';
 import 'lodash/isElement';
 import 'lodash/get';
 import '@vueuse/math';
-import './OrDateTimePickerPopoverHeader-3ae517f8.js';
-import './OrDateTimePickerMonthSelect-f807e6d5.js';
+import './OrDateTimePickerPopoverHeader-bc8e0bcf.js';
 import 'lodash/padStart';
-import './OrDateTimePickerTimeSelect-14503fde.js';
 import '@floating-ui/dom';
 import 'lodash/cloneDeep';
 import 'lodash/isEqual';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "4.9.1-beta.2907.0",
+  "version": "4.10.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -154,5 +154,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "ba154bd45bae4b281e1feffed5b6ebe0e6122fae"
 }

package/src/components/index.ts

@@ -104,4 +104,3 @@ export * from './or-toast';
 export * from './or-toast-v3';
 export * from './or-tooltip';
 export * from './or-tooltip-v3';
-export * from './or-tree-v3';

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

@@ -65,6 +65,7 @@
         />
 
         <OrDateTimePickerPopoverFooter
+          :disabled="isInvalidDraftModelValue"
           @apply="apply(); popover.close()"
           @reset="reset(); popover.close()"
         />
@@ -272,6 +273,24 @@ export default defineComponent({
       draftModelValue.value = value;
     }, { immediate: true });
 
+    const isInvalidDraftModelValue = computed(() => {
+      if (draftModelValue.value) {
+        if (props.yearFilter && !props.yearFilter(draftModelValue.value)) {
+          return true;
+        }
+
+        if (props.monthFilter && !props.monthFilter(draftModelValue.value)) {
+          return true;
+        }
+
+        if (props.dateFilter && !props.dateFilter(draftModelValue.value)) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+
     // Methods
     function apply(): void {
       proxyModelValue.value = draftModelValue.value ?? initialModelValue;
@@ -321,6 +340,7 @@ export default defineComponent({
       initialModelValue,
       proxyModelValue,
       draftModelValue,
+      isInvalidDraftModelValue,
       apply,
       reset,
       togglePopover,

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

@@ -40,6 +40,7 @@
         v-model="draftModelValue"
         v-dropdown-open="toggleTimePopover"
         v-dropdown-close="closeTimePopover"
+        :format="timeFormat"
         :required="required"
         :readonly="readonly"
         :disabled="disabled"
@@ -78,6 +79,7 @@
         />
 
         <OrDateTimePickerPopoverFooter
+          :disabled="isInvalidDraftModelValue"
           @apply="apply(); datePopover.close()"
           @reset="reset(); datePopover.close()"
         />
@@ -105,11 +107,13 @@
         <OrDateTimePickerTimeSelect
           v-model="draftModelValue"
           :initial-value="initialModelValue"
+          :format="timeFormat"
           :hours-filter="hoursFilter"
           :minutes-filter="minutesFilter"
         />
 
         <OrDateTimePickerPopoverFooter
+          :disabled="isInvalidDraftModelValue"
           @apply="apply(); timePopover.close()"
           @reset="reset(); timePopover.close()"
         />
@@ -171,7 +175,7 @@ import OrDateTimePickerPopoverFooter from './partials/or-date-time-picker-popove
 import OrDateTimePickerPopoverHeader from './partials/or-date-time-picker-popover-header/OrDateTimePickerPopoverHeader.vue';
 import OrDateTimePickerTimeControl from './partials/or-date-time-picker-time-control/OrDateTimePickerTimeControl.vue';
 import OrDateTimePickerTimeSelect from './partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue';
-import { DateTimePickerSize } from './props';
+import { DateTimePickerSize, DateTimePickerTimeFormat } from './props';
 import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './styles';
 import { FilterFunction } from './types';
 
@@ -212,6 +216,11 @@ export default defineComponent({
       default: undefined,
     },
 
+    timeFormat: {
+      type: String as PropType<`${DateTimePickerTimeFormat}`>,
+      default: DateTimePickerTimeFormat.Auto,
+    },
+
     yearFilter: {
       type: Function as PropType<FilterFunction>,
       default: undefined,
@@ -338,6 +347,32 @@ export default defineComponent({
       draftModelValue.value = value;
     }, { immediate: true });
 
+    const isInvalidDraftModelValue = computed(() => {
+      if (draftModelValue.value) {
+        if (props.yearFilter && !props.yearFilter(draftModelValue.value)) {
+          return true;
+        }
+
+        if (props.monthFilter && !props.monthFilter(draftModelValue.value)) {
+          return true;
+        }
+
+        if (props.dateFilter && !props.dateFilter(draftModelValue.value)) {
+          return true;
+        }
+
+        if (props.hoursFilter && !props.hoursFilter(draftModelValue.value)) {
+          return true;
+        }
+
+        if (props.minutesFilter && !props.minutesFilter(draftModelValue.value)) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+
     // Methods
     function apply(): void {
       proxyModelValue.value = draftModelValue.value ?? initialModelValue;
@@ -405,6 +440,7 @@ export default defineComponent({
     function formatTimeAlt(value?: Date): string {
       return value?.toLocaleString(navigator.language, {
         timeStyle: 'short',
+        hourCycle: props.timeFormat !== DateTimePickerTimeFormat.Auto ? props.timeFormat : undefined,
         timeZone: 'UTC',
       }) ?? '--';
     }
@@ -423,6 +459,7 @@ export default defineComponent({
       initialModelValue,
       proxyModelValue,
       draftModelValue,
+      isInvalidDraftModelValue,
       apply,
       reset,
       toggleDatePopover,

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

@@ -1,6 +1,7 @@
-export function useTimePlaceholder(): string {
+export function useTimePlaceholder(hourCycle?: Intl.DateTimeFormatOptions['hourCycle']): string {
   const sample = new Date(Date.UTC(1, 1, 3, 4, 5)).toLocaleString(navigator.language, {
     timeStyle: 'short',
+    hourCycle,
     timeZone: 'UTC',
   });
 

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-popover-footer/OrDateTimePickerPopoverFooter.vue

@@ -5,6 +5,7 @@
   >
     <OrButton
       :variant="'outlined'"
+      :disabled="disabled"
       @click.stop="$emit('apply')"
     >
       Done
@@ -31,6 +32,13 @@ export default defineComponent({
     OrButton,
   },
 
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
   emits: [
     'apply',
     'reset',

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-control/OrDateTimePickerTimeControl.vue

@@ -23,8 +23,9 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue-demi';
+import { PropType, computed, defineComponent, ref } from 'vue-demi';
 import { useTimePlaceholder } from '../../hooks/useTimePlaceholder';
+import { DateTimePickerTimeFormat } from '../../props';
 import { DateTimePickerTimeControl, DateTimePickerTimeControlPlaceholder } from './styles';
 
 export default defineComponent({
@@ -41,6 +42,11 @@ export default defineComponent({
       default: undefined,
     },
 
+    format: {
+      type: String as PropType<`${DateTimePickerTimeFormat}`>,
+      default: DateTimePickerTimeFormat.Auto,
+    },
+
     required: {
       type: Boolean,
       default: false,
@@ -84,12 +90,13 @@ export default defineComponent({
       },
     });
 
-    const placeholder = useTimePlaceholder();
+    const placeholder = useTimePlaceholder(props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined);
 
     // Methods
     function formatModelValue(value: Date): string {
       return value.toLocaleString(navigator.language, {
         timeStyle: 'short',
+        hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
         timeZone: 'UTC',
       });
     }

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

@@ -32,12 +32,35 @@
         {{ formatMinutes(value) }}
       </OrButton>
     </div>
+
+    <template v-if="proxyTimeFormat === 'h12'">
+      <div :class="buttonGroupStyles">
+        <OrButton
+          :class="buttonGroupItemStyles"
+          :variant="hoursRange === 'am' ? 'contained' : 'text'"
+          :color="hoursRange === 'am' ? 'primary' : 'inherit'"
+          @click.stop="hoursRange = 'am'"
+        >
+          AM
+        </OrButton>
+
+        <OrButton
+          :class="buttonGroupItemStyles"
+          :variant="hoursRange === 'pm' ? 'contained' : 'text'"
+          :color="hoursRange === 'pm' ? 'primary' : 'inherit'"
+          @click.stop="hoursRange = 'pm'"
+        >
+          PM
+        </OrButton>
+      </div>
+    </template>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
+import { DateTimePickerTimeFormat } from '../../props';
 import { FilterFunction } from '../../types';
 import { DateTimePickerTimeSelect, DateTimePickerTimeSelectButtonGroup, DateTimePickerTimeSelectButtonGroupItem } from './styles';
 
@@ -64,6 +87,11 @@ export default defineComponent({
       required: true,
     },
 
+    format: {
+      type: String as PropType<`${DateTimePickerTimeFormat}`>,
+      default: DateTimePickerTimeFormat.Auto,
+    },
+
     hoursFilter: {
       type: Function as PropType<FilterFunction>,
       default: undefined,
@@ -110,6 +138,48 @@ export default defineComponent({
       },
     });
 
+    const proxyTimeFormat = computed(() => {
+      if (props.format === DateTimePickerTimeFormat.Auto) {
+        const timeSample = new Date(1970, 0);
+
+        if (timeSample.toLocaleTimeString(navigator.language).includes('12')) {
+          return DateTimePickerTimeFormat.H12;
+        }
+
+        return DateTimePickerTimeFormat.H23;
+      }
+
+      return props.format;
+    });
+
+    const hoursRange = ref<'am' | 'pm'>(proxyModelValue.value.getUTCHours() < 12 ? 'am' : 'pm');
+
+    watch(hoursRange, (value) => {
+      switch (value) {
+        case 'am':
+          proxyModelValue.value = new Date(Date.UTC(
+            proxyModelValue.value.getUTCFullYear(),
+            proxyModelValue.value.getUTCMonth(),
+            proxyModelValue.value.getUTCDate(),
+            proxyModelValue.value.getUTCHours() - 12,
+            proxyModelValue.value.getUTCMinutes(),
+          ));
+
+          break;
+
+        case 'pm':
+          proxyModelValue.value = new Date(Date.UTC(
+            proxyModelValue.value.getUTCFullYear(),
+            proxyModelValue.value.getUTCMonth(),
+            proxyModelValue.value.getUTCDate(),
+            proxyModelValue.value.getUTCHours() + 12,
+            proxyModelValue.value.getUTCMinutes(),
+          ));
+
+          break;
+      }
+    });
+
     const hoursOptions = computed(() => {
       return Array.from({ length: 24 }, (_value, index) => {
         const value = index;
@@ -121,6 +191,18 @@ export default defineComponent({
           value,
           proxyModelValue.value.getUTCMinutes(),
         ));
+      }).filter((value) => {
+        if (proxyTimeFormat.value === DateTimePickerTimeFormat.H23) {
+          return true;
+        }
+
+        switch (hoursRange.value) {
+          case 'am':
+            return value.getUTCHours() < 12;
+
+          case 'pm':
+            return value.getUTCHours() >= 12;
+        }
       });
     });
 
@@ -142,8 +224,9 @@ export default defineComponent({
     function formatHours(value: Date): string {
       return value.toLocaleString(navigator.language, {
         hour: 'numeric',
+        hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
         timeZone: 'UTC',
-      });
+      }).replace(/\s(am|pm)/i, '');
     }
 
     function formatMinutes(value: Date): string {
@@ -156,6 +239,8 @@ export default defineComponent({
       buttonGroupStyles,
       buttonGroupItemStyles,
       proxyModelValue,
+      proxyTimeFormat,
+      hoursRange,
       hoursOptions,
       minutesOptions,
       formatHours,

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

@@ -1 +1,7 @@
+export enum DateTimePickerTimeFormat {
+  Auto = 'auto',
+  H12 = 'h12',
+  H23 = 'h23',
+}
+
 export { InputBoxSize as DateTimePickerSize } from '../or-input-box-v3';

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

@@ -11,7 +11,4 @@ export const DateTimePickerDatePopover: string[] = [
   'w-[298px]',
 ];
 
-export const DateTimePickerTimePopover: string[] = [
-  // Box
-  'w-[224px]',
-];
+export const DateTimePickerTimePopover: string[] = [];

package/src/components/or-time-picker-v3/OrTimePicker.vue

@@ -31,6 +31,7 @@
         v-model="draftModelValue"
         v-dropdown-open="togglePopover"
         v-dropdown-close="closePopover"
+        :format="format"
         :required="required"
         :readonly="readonly"
         :disabled="disabled"
@@ -54,11 +55,13 @@
         <OrDateTimePickerTimeSelect
           v-model="draftModelValue"
           :initial-value="initialModelValue"
+          :format="format"
           :hours-filter="hoursFilter"
           :minutes-filter="minutesFilter"
         />
 
         <OrDateTimePickerPopoverFooter
+          :disabled="isInvalidDraftModelValue"
           @apply="apply(); popover.close()"
           @reset="reset(); popover.close()"
         />
@@ -118,7 +121,7 @@ import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { 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 { TimePickerSize } from './props';
+import { TimePickerFormat, TimePickerSize } from './props';
 import { TimePicker, TimePickerPopover } from './styles';
 
 export default defineComponent({
@@ -155,6 +158,11 @@ export default defineComponent({
       default: undefined,
     },
 
+    format: {
+      type: String as PropType<`${TimePickerFormat}`>,
+      default: TimePickerFormat.Auto,
+    },
+
     hoursFilter: {
       type: Function as PropType<FilterFunction>,
       default: undefined,
@@ -259,6 +267,20 @@ export default defineComponent({
       draftModelValue.value = value;
     }, { immediate: true });
 
+    const isInvalidDraftModelValue = computed(() => {
+      if (draftModelValue.value) {
+        if (props.hoursFilter && !props.hoursFilter(draftModelValue.value)) {
+          return true;
+        }
+
+        if (props.minutesFilter && !props.minutesFilter(draftModelValue.value)) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+
     // Methods
     function apply(): void {
       proxyModelValue.value = draftModelValue.value ?? initialModelValue;
@@ -293,6 +315,7 @@ export default defineComponent({
     function formatTimeAlt(value?: Date): string {
       return value?.toLocaleString(navigator.language, {
         timeStyle: 'short',
+        hourCycle: props.format !== TimePickerFormat.Auto ? props.format : undefined,
         timeZone: 'UTC',
       }) ?? '--';
     }
@@ -308,6 +331,7 @@ export default defineComponent({
       initialModelValue,
       proxyModelValue,
       draftModelValue,
+      isInvalidDraftModelValue,
       apply,
       reset,
       togglePopover,

package/src/components/or-time-picker-v3/props.ts

@@ -1 +1,2 @@
+export { DateTimePickerTimeFormat as TimePickerFormat } from '../or-date-time-picker-v3';
 export { InputBoxSize as TimePickerSize } from '../or-input-box-v3';

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

@@ -6,7 +6,4 @@ export const TimePicker: string[] = [
   'gap-xs',
 ];
 
-export const TimePickerPopover: string[] = [
-  // Box
-  'w-[224px]',
-];
+export const TimePickerPopover: string[] = [];