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

package/dist/bundled/v2/{OrDateTimePickerPopoverHeader-6f78e8e7.js → OrDateTimePickerPopoverHeader-28995b95.js}

@@ -92,6 +92,12 @@ var script$1 = defineComponent({
   components: {
     OrButton: __vue_component__$4
   },
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
   emits: ['apply', 'reset'],
   expose: ['root'],
   setup() {
@@ -119,7 +125,8 @@ var __vue_render__$1 = function () {
     class: _vm.rootStyles
   }, [_c('OrButton', {
     attrs: {
-      "variant": 'outlined'
+      "variant": 'outlined',
+      "disabled": _vm.disabled
     },
     on: {
       "click": function ($event) {

package/dist/bundled/v2/{OrDateTimePickerTimeSelect-78f775d8.js → OrDateTimePickerTimeSelect-c52ee823.js}

@@ -1,5 +1,6 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useTimePlaceholder } from './components/OrDateTimePickerV3/hooks/useTimePlaceholder.js';
+import { DateTimePickerTimeFormat } from './components/OrDateTimePickerV3/props.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 import __vue_component__$2 from './components/OrButtonV3/OrButton.js';
 
@@ -25,6 +26,10 @@ var script$1 = defineComponent({
       type: Date,
       default: undefined
     },
+    format: {
+      type: String,
+      default: DateTimePickerTimeFormat.Auto
+    },
     required: {
       type: Boolean,
       default: false
@@ -52,11 +57,12 @@ var script$1 = defineComponent({
         context.emit('update:modelValue', value);
       }
     });
-    const placeholder = useTimePlaceholder();
+    const placeholder = useTimePlaceholder(props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined);
     // Methods
     function formatModelValue(value) {
       return value.toLocaleString(navigator.language, {
         timeStyle: 'short',
+        hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
         timeZone: 'UTC'
       });
     }
@@ -157,6 +163,10 @@ var script = defineComponent({
       type: Date,
       required: true
     },
+    format: {
+      type: String,
+      default: DateTimePickerTimeFormat.Auto
+    },
     hoursFilter: {
       type: Function,
       default: undefined
@@ -185,12 +195,43 @@ var script = defineComponent({
         context.emit('update:modelValue', value);
       }
     });
+    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(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;
         return new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth(), proxyModelValue.value.getUTCDate(), 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;
+        }
       });
     });
     const minutesOptions = computed(() => {
@@ -205,8 +246,9 @@ var script = defineComponent({
     function formatHours(value) {
       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) {
       return String(value.getUTCMinutes()).padStart(2, '0');
@@ -217,6 +259,8 @@ var script = defineComponent({
       buttonGroupStyles,
       buttonGroupItemStyles,
       proxyModelValue,
+      proxyTimeFormat,
+      hoursRange,
       hoursOptions,
       minutesOptions,
       formatHours,
@@ -272,7 +316,33 @@ var __vue_render__ = function () {
         }
       }
     }, [_vm._v("\n      " + _vm._s(_vm.formatMinutes(value)) + "\n    ")]);
-  }), 1)]);
+  }), 1), _vm._v(" "), _vm.proxyTimeFormat === 'h12' ? [_c('div', {
+    class: _vm.buttonGroupStyles
+  }, [_c('OrButton', {
+    class: _vm.buttonGroupItemStyles,
+    attrs: {
+      "variant": _vm.hoursRange === 'am' ? 'contained' : 'text',
+      "color": _vm.hoursRange === 'am' ? 'primary' : 'inherit'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        _vm.hoursRange = 'am';
+      }
+    }
+  }, [_vm._v("\n        AM\n      ")]), _vm._v(" "), _c('OrButton', {
+    class: _vm.buttonGroupItemStyles,
+    attrs: {
+      "variant": _vm.hoursRange === 'pm' ? 'contained' : 'text',
+      "color": _vm.hoursRange === 'pm' ? 'primary' : 'inherit'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        _vm.hoursRange = 'pm';
+      }
+    }
+  }, [_vm._v("\n        PM\n      ")])], 1)] : _vm._e()], 2);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
 import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-2c1b5116.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-6f78e8e7.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-28995b95.js';
 import { DatePicker, DatePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -160,6 +160,20 @@ var script = defineComponent({
     }, {
       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() {
       var _a;
@@ -204,6 +218,7 @@ var script = defineComponent({
       initialModelValue,
       proxyModelValue,
       draftModelValue,
+      isInvalidDraftModelValue,
       apply,
       reset,
       togglePopover,
@@ -351,6 +366,9 @@ var __vue_render__ = function () {
       expression: "draftModelValue"
     }
   }), _vm._v(" "), _c('OrDateTimePickerPopoverFooter', {
+    attrs: {
+      "disabled": _vm.isInvalidDraftModelValue
+    },
     on: {
       "apply": function ($event) {
         _vm.apply();

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.vue.d.ts

@@ -20,6 +20,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     initialModelValue: Date;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
     draftModelValue: import("@vue/composition-api").Ref<Date | undefined>;
+    isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
     togglePopover: () => void;
@@ -157,6 +158,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     initialModelValue: Date;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
     draftModelValue: import("@vue/composition-api").Ref<Date | undefined>;
+    isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
     togglePopover: () => void;

package/dist/bundled/v2/components/OrDatePickerV3/index.js

@@ -40,7 +40,7 @@ import '../OrMenuV3/OrMenu.js';
 import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-6f78e8e7.js';
+import '../../OrDateTimePickerPopoverHeader-28995b95.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,8 +1,9 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from './hooks/useCurrentDate.js';
 import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-2c1b5116.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-6f78e8e7.js';
-import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-78f775d8.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-28995b95.js';
+import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-c52ee823.js';
+import { DateTimePickerTimeFormat } from './props.js';
 import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -87,6 +88,10 @@ var script = defineComponent({
       type: Date,
       default: undefined
     },
+    timeFormat: {
+      type: String,
+      default: DateTimePickerTimeFormat.Auto
+    },
     yearFilter: {
       type: Function,
       default: undefined
@@ -178,6 +183,26 @@ var script = defineComponent({
     }, {
       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() {
       var _a;
@@ -235,6 +260,7 @@ var script = defineComponent({
       var _a;
       return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
         timeStyle: 'short',
+        hourCycle: props.timeFormat !== DateTimePickerTimeFormat.Auto ? props.timeFormat : undefined,
         timeZone: 'UTC'
       })) !== null && _a !== void 0 ? _a : '--';
     }
@@ -252,6 +278,7 @@ var script = defineComponent({
       initialModelValue,
       proxyModelValue,
       draftModelValue,
+      isInvalidDraftModelValue,
       apply,
       reset,
       toggleDatePopover,
@@ -369,6 +396,7 @@ var __vue_render__ = function () {
       expression: "closeTimePopover"
     }],
     attrs: {
+      "format": _vm.timeFormat,
       "required": _vm.required,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
@@ -430,6 +458,9 @@ var __vue_render__ = function () {
       expression: "draftModelValue"
     }
   }), _vm._v(" "), _c('OrDateTimePickerPopoverFooter', {
+    attrs: {
+      "disabled": _vm.isInvalidDraftModelValue
+    },
     on: {
       "apply": function ($event) {
         _vm.apply();
@@ -467,6 +498,7 @@ var __vue_render__ = function () {
   }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
     attrs: {
       "initial-value": _vm.initialModelValue,
+      "format": _vm.timeFormat,
       "hours-filter": _vm.hoursFilter,
       "minutes-filter": _vm.minutesFilter
     },
@@ -478,6 +510,9 @@ var __vue_render__ = function () {
       expression: "draftModelValue"
     }
   }), _vm._v(" "), _c('OrDateTimePickerPopoverFooter', {
+    attrs: {
+      "disabled": _vm.isInvalidDraftModelValue
+    },
     on: {
       "apply": function ($event) {
         _vm.apply();

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.vue.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue-demi';
-import { DateTimePickerSize } from './props';
+import { DateTimePickerSize, DateTimePickerTimeFormat } from './props';
 import { FilterFunction } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
@@ -27,6 +27,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     initialModelValue: Date;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
     draftModelValue: import("@vue/composition-api").Ref<Date | undefined>;
+    isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
     toggleDatePopover: () => void;
@@ -40,6 +41,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: DateConstructor;
         default: undefined;
     };
+    timeFormat: {
+        type: PropType<"auto" | "h12" | "h23">;
+        default: DateTimePickerTimeFormat;
+    };
     yearFilter: {
         type: PropType<FilterFunction>;
         default: undefined;
@@ -97,6 +102,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: DateConstructor;
         default: undefined;
     };
+    timeFormat: {
+        type: PropType<"auto" | "h12" | "h23">;
+        default: DateTimePickerTimeFormat;
+    };
     yearFilter: {
         type: PropType<FilterFunction>;
         default: undefined;
@@ -151,6 +160,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: Date;
+    timeFormat: "auto" | "h12" | "h23";
     yearFilter: FilterFunction;
     monthFilter: FilterFunction;
     dateFilter: FilterFunction;
@@ -192,6 +202,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     initialModelValue: Date;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
     draftModelValue: import("@vue/composition-api").Ref<Date | undefined>;
+    isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
     toggleDatePopover: () => void;
@@ -202,6 +213,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     formatTimeAlt: (value?: Date) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: Date;
+    timeFormat: "auto" | "h12" | "h23";
     yearFilter: FilterFunction;
     monthFilter: FilterFunction;
     dateFilter: FilterFunction;
@@ -219,6 +231,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: Date;
+    timeFormat: "auto" | "h12" | "h23";
     yearFilter: FilterFunction;
     monthFilter: FilterFunction;
     dateFilter: FilterFunction;

package/dist/bundled/v2/components/OrDateTimePickerV3/hooks/useTimePlaceholder.d.ts

@@ -1 +1 @@
-export declare function useTimePlaceholder(): string;
+export declare function useTimePlaceholder(hourCycle?: Intl.DateTimeFormatOptions['hourCycle']): string;

package/dist/bundled/v2/components/OrDateTimePickerV3/hooks/useTimePlaceholder.js

@@ -1,6 +1,7 @@
-function useTimePlaceholder() {
+function useTimePlaceholder(hourCycle) {
   const sample = new Date(Date.UTC(1, 1, 3, 4, 5)).toLocaleString(navigator.language, {
     timeStyle: 'short',
+    hourCycle,
     timeZone: 'UTC'
   });
   return sample.replace(/04/, 'HH').replace(/4/, 'H').replace(/05/, 'MM').replace(/5/, 'M').replace(/AM|PM/, 'A');

package/dist/bundled/v2/components/OrDateTimePickerV3/index.js

@@ -1,4 +1,5 @@
 export { default as OrDateTimePickerV3 } from './OrDateTimePicker.js';
+export { DateTimePickerTimeFormat } from './props.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import './hooks/useCurrentDate.js';
@@ -40,11 +41,11 @@ import '../OrMenuV3/OrMenu.js';
 import '../OrMenuV3/styles.js';
 import '../OrMenuItemV3/OrMenuItem.js';
 import '../OrMenuItemV3/styles.js';
-import '../../OrDateTimePickerPopoverHeader-6f78e8e7.js';
+import '../../OrDateTimePickerPopoverHeader-28995b95.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
-import '../../OrDateTimePickerTimeSelect-78f775d8.js';
+import '../../OrDateTimePickerTimeSelect-c52ee823.js';
 import './hooks/useTimePlaceholder.js';
 import './styles.js';
 import '../OrErrorV3/OrError.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/props.d.ts

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

package/dist/bundled/v2/components/OrDateTimePickerV3/props.js

@@ -1 +1,10 @@
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
+
+var DateTimePickerTimeFormat;
+(function (DateTimePickerTimeFormat) {
+  DateTimePickerTimeFormat["Auto"] = "auto";
+  DateTimePickerTimeFormat["H12"] = "h12";
+  DateTimePickerTimeFormat["H23"] = "h23";
+})(DateTimePickerTimeFormat || (DateTimePickerTimeFormat = {}));
+
+export { DateTimePickerTimeFormat };

package/dist/bundled/v2/components/OrDateTimePickerV3/styles.js

@@ -6,8 +6,6 @@ const DateTimePicker = [
 const DateTimePickerDatePopover = [
 // Box
 'w-[298px]'];
-const DateTimePickerTimePopover = [
-// Box
-'w-[224px]'];
+const DateTimePickerTimePopover = [];
 
 export { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover };

package/dist/bundled/v2/components/OrTimePickerV3/OrTimePicker.js

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-6f78e8e7.js';
-import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-78f775d8.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-28995b95.js';
+import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-c52ee823.js';
 import { TimePicker, TimePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -10,6 +10,7 @@ import __vue_component__$4 from '../OrIconButtonV3/OrIconButton.js';
 import __vue_component__$5 from '../OrInputBoxV3/OrInputBox.js';
 import __vue_component__$6 from '../OrLabelV3/OrLabel.js';
 import __vue_component__$7 from '../OrPopoverV3/OrPopover.js';
+import { DateTimePickerTimeFormat } from '../OrDateTimePickerV3/props.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
@@ -78,6 +79,10 @@ var script = defineComponent({
       type: Date,
       default: undefined
     },
+    format: {
+      type: String,
+      default: DateTimePickerTimeFormat.Auto
+    },
     hoursFilter: {
       type: Function,
       default: undefined
@@ -151,6 +156,17 @@ var script = defineComponent({
     }, {
       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() {
       var _a;
@@ -181,6 +197,7 @@ var script = defineComponent({
       var _a;
       return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
         timeStyle: 'short',
+        hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
         timeZone: 'UTC'
       })) !== null && _a !== void 0 ? _a : '--';
     }
@@ -195,6 +212,7 @@ var script = defineComponent({
       initialModelValue,
       proxyModelValue,
       draftModelValue,
+      isInvalidDraftModelValue,
       apply,
       reset,
       togglePopover,
@@ -285,6 +303,7 @@ var __vue_render__ = function () {
       expression: "closePopover"
     }],
     attrs: {
+      "format": _vm.format,
       "required": _vm.required,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
@@ -319,6 +338,7 @@ var __vue_render__ = function () {
   }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
     attrs: {
       "initial-value": _vm.initialModelValue,
+      "format": _vm.format,
       "hours-filter": _vm.hoursFilter,
       "minutes-filter": _vm.minutesFilter
     },
@@ -330,6 +350,9 @@ var __vue_render__ = function () {
       expression: "draftModelValue"
     }
   }), _vm._v(" "), _c('OrDateTimePickerPopoverFooter', {
+    attrs: {
+      "disabled": _vm.isInvalidDraftModelValue
+    },
     on: {
       "apply": function ($event) {
         _vm.apply();

package/dist/bundled/v2/components/OrTimePickerV3/OrTimePicker.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
 import { FilterFunction } from '../or-date-time-picker-v3/types';
-import { TimePickerSize } from './props';
+import { TimePickerFormat, TimePickerSize } from './props';
 declare const _default: import("vue2").ComponentOptions<import("vue2").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     inputBox: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
@@ -20,6 +20,7 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
     initialModelValue: Date;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
     draftModelValue: import("@vue/composition-api").Ref<Date | undefined>;
+    isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
     togglePopover: () => void;
@@ -30,6 +31,10 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
         type: DateConstructor;
         default: undefined;
     };
+    format: {
+        type: PropType<"auto" | "h12" | "h23">;
+        default: TimePickerFormat;
+    };
     hoursFilter: {
         type: PropType<FilterFunction>;
         default: undefined;
@@ -75,6 +80,10 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
         type: DateConstructor;
         default: undefined;
     };
+    format: {
+        type: PropType<"auto" | "h12" | "h23">;
+        default: TimePickerFormat;
+    };
     hoursFilter: {
         type: PropType<FilterFunction>;
         default: undefined;
@@ -117,6 +126,7 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
     };
 }>> & Omit<import("vue2").VueConstructor<import("vue2").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     modelValue: Date;
+    format: "auto" | "h12" | "h23";
     hoursFilter: FilterFunction;
     minutesFilter: FilterFunction;
     size: TimePickerSize;
@@ -148,6 +158,7 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
     initialModelValue: Date;
     proxyModelValue: import("@vue/composition-api").WritableComputedRef<Date>;
     draftModelValue: import("@vue/composition-api").Ref<Date | undefined>;
+    isInvalidDraftModelValue: import("@vue/composition-api").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
     togglePopover: () => void;
@@ -155,6 +166,7 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
     formatTimeAlt: (value?: Date) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: Date;
+    format: "auto" | "h12" | "h23";
     hoursFilter: FilterFunction;
     minutesFilter: FilterFunction;
     size: TimePickerSize;
@@ -169,6 +181,7 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: Date;
+    format: "auto" | "h12" | "h23";
     hoursFilter: FilterFunction;
     minutesFilter: FilterFunction;
     size: TimePickerSize;

package/dist/bundled/v2/components/OrTimePickerV3/index.js

@@ -1,8 +1,9 @@
 export { default as OrTimePickerV3 } from './OrTimePicker.js';
+export { DateTimePickerTimeFormat as TimePickerFormat } from '../OrDateTimePickerV3/props.js';
 export { InputBoxSize as TimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../../OrDateTimePickerPopoverHeader-6f78e8e7.js';
+import '../../OrDateTimePickerPopoverHeader-28995b95.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
@@ -15,7 +16,7 @@ import '../../index-c92e2839.js';
 import '../../index-ec92055d.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
-import '../../OrDateTimePickerTimeSelect-78f775d8.js';
+import '../../OrDateTimePickerTimeSelect-c52ee823.js';
 import '../OrDateTimePickerV3/hooks/useTimePlaceholder.js';
 import './styles.js';
 import '../OrErrorV3/OrError.js';

package/dist/bundled/v2/components/OrTimePickerV3/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/bundled/v2/components/OrTimePickerV3/props.js

@@ -1 +1,2 @@
+export { DateTimePickerTimeFormat as TimePickerFormat } from '../OrDateTimePickerV3/props.js';
 export { InputBoxSize as TimePickerSize } from '../OrInputBoxV3/props.js';

package/dist/bundled/v2/components/OrTimePickerV3/styles.js

@@ -3,8 +3,6 @@ const TimePicker = [
 'layout-column',
 // Spacing
 'gap-xs'];
-const TimePickerPopover = [
-// Box
-'w-[224px]'];
+const TimePickerPopover = [];
 
 export { TimePicker, TimePickerPopover };