@onereach/ui-components 4.9.0 → 4.9.1-beta.2894.0

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

@@ -1,6 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { useTimePlaceholder } from './components/OrDateTimePickerV3/hooks/useTimePlaceholder.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+import { D as DateTimePickerTimeSelectTimeFormat } from './props-4f1050af.js';
 import __vue_component__$2 from './components/OrButtonV3/OrButton.js';
 
 const DateTimePickerTimeControl = [
@@ -157,6 +158,10 @@ var script = defineComponent({
       type: Date,
       required: true
     },
+    timeFormat: {
+      type: String,
+      default: DateTimePickerTimeSelectTimeFormat.Auto
+    },
     hoursFilter: {
       type: Function,
       default: undefined
@@ -185,12 +190,33 @@ var script = defineComponent({
         context.emit('update:modelValue', value);
       }
     });
+    const proxyTimeFormat = computed(() => {
+      if (props.timeFormat === DateTimePickerTimeSelectTimeFormat.Auto) {
+        const timeSample = new Date(1970, 0);
+        if (timeSample.toLocaleTimeString(navigator.language).includes('12')) {
+          return DateTimePickerTimeSelectTimeFormat.H12;
+        }
+        return DateTimePickerTimeSelectTimeFormat.H23;
+      }
+      return props.timeFormat;
+    });
+    const hoursRange = ref('am');
     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 === DateTimePickerTimeSelectTimeFormat.H23) {
+          return true;
+        }
+        switch (hoursRange.value) {
+          case 'am':
+            return value.getUTCHours() < 12;
+          case 'pm':
+            return value.getUTCHours() >= 12;
+        }
       });
     });
     const minutesOptions = computed(() => {
@@ -205,8 +231,9 @@ var script = defineComponent({
     function formatHours(value) {
       return value.toLocaleString(navigator.language, {
         hour: 'numeric',
+        hourCycle: props.timeFormat !== DateTimePickerTimeSelectTimeFormat.Auto ? props.timeFormat : undefined,
         timeZone: 'UTC'
-      });
+      }).replace(/\s(am|pm)/i, '');
     }
     function formatMinutes(value) {
       return String(value.getUTCMinutes()).padStart(2, '0');
@@ -217,6 +244,8 @@ var script = defineComponent({
       buttonGroupStyles,
       buttonGroupItemStyles,
       proxyModelValue,
+      proxyTimeFormat,
+      hoursRange,
       hoursOptions,
       minutesOptions,
       formatHours,
@@ -272,7 +301,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/OrDateTimePickerV3/OrDateTimePicker.js

@@ -2,7 +2,7 @@ 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 OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-ad495c45.js';
 import { DateTimePicker, DateTimePickerDatePopover, DateTimePickerTimePopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
@@ -11,6 +11,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 { D as DateTimePickerTimeSelectTimeFormat } from '../../props-4f1050af.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
@@ -87,6 +88,10 @@ var script = defineComponent({
       type: Date,
       default: undefined
     },
+    timeFormat: {
+      type: String,
+      default: DateTimePickerTimeSelectTimeFormat.Auto
+    },
     yearFilter: {
       type: Function,
       default: undefined
@@ -235,6 +240,7 @@ var script = defineComponent({
       var _a;
       return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
         timeStyle: 'short',
+        hourCycle: props.timeFormat !== DateTimePickerTimeSelectTimeFormat.Auto ? props.timeFormat : undefined,
         timeZone: 'UTC'
       })) !== null && _a !== void 0 ? _a : '--';
     }
@@ -467,6 +473,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,
+      "time-format": _vm.timeFormat,
       "hours-filter": _vm.hoursFilter,
       "minutes-filter": _vm.minutesFilter
     },

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>;
@@ -40,6 +40,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 +101,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 +159,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;
@@ -202,6 +211,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 +229,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/index.js

@@ -1,5 +1,6 @@
 export { default as OrDateTimePickerV3 } from './OrDateTimePicker.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
+export { D as DateTimePickerTimeFormat } from '../../props-4f1050af.js';
 import 'vue-demi';
 import './hooks/useCurrentDate.js';
 import '../../OrDateTimePickerMonthSelect-2c1b5116.js';
@@ -44,7 +45,7 @@ import '../../OrDateTimePickerPopoverHeader-6f78e8e7.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
-import '../../OrDateTimePickerTimeSelect-78f775d8.js';
+import '../../OrDateTimePickerTimeSelect-ad495c45.js';
 import './hooks/useTimePlaceholder.js';
 import './styles.js';
 import '../OrErrorV3/OrError.js';

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

@@ -1 +1,2 @@
 export { InputBoxSize as DateTimePickerSize } from '../or-input-box-v3';
+export { DateTimePickerTimeSelectTimeFormat as DateTimePickerTimeFormat } from './partials/or-date-time-picker-time-select/props';

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

@@ -1 +1,2 @@
+export { D as DateTimePickerTimeFormat } from '../../props-4f1050af.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';

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 OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-ad495c45.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 { D as DateTimePickerTimeSelectTimeFormat } from '../../props-4f1050af.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
     },
+    timeFormat: {
+      type: String,
+      default: DateTimePickerTimeSelectTimeFormat.Auto
+    },
     hoursFilter: {
       type: Function,
       default: undefined
@@ -181,6 +186,7 @@ var script = defineComponent({
       var _a;
       return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
         timeStyle: 'short',
+        hourCycle: props.timeFormat !== DateTimePickerTimeSelectTimeFormat.Auto ? props.timeFormat : undefined,
         timeZone: 'UTC'
       })) !== null && _a !== void 0 ? _a : '--';
     }
@@ -318,6 +324,7 @@ var __vue_render__ = function () {
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatTimeAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerTimeSelect', {
     attrs: {
+      "time-format": _vm.timeFormat,
       "initial-value": _vm.initialModelValue,
       "hours-filter": _vm.hoursFilter,
       "minutes-filter": _vm.minutesFilter

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 { TimePickerSize, TimePickerTimeFormat } 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, {
@@ -30,6 +30,10 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
         type: DateConstructor;
         default: undefined;
     };
+    timeFormat: {
+        type: PropType<"auto" | "h12" | "h23">;
+        default: TimePickerTimeFormat;
+    };
     hoursFilter: {
         type: PropType<FilterFunction>;
         default: undefined;
@@ -75,6 +79,10 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
         type: DateConstructor;
         default: undefined;
     };
+    timeFormat: {
+        type: PropType<"auto" | "h12" | "h23">;
+        default: TimePickerTimeFormat;
+    };
     hoursFilter: {
         type: PropType<FilterFunction>;
         default: undefined;
@@ -117,6 +125,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;
+    timeFormat: "auto" | "h12" | "h23";
     hoursFilter: FilterFunction;
     minutesFilter: FilterFunction;
     size: TimePickerSize;
@@ -155,6 +164,7 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
     formatTimeAlt: (value?: Date) => string;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: Date;
+    timeFormat: "auto" | "h12" | "h23";
     hoursFilter: FilterFunction;
     minutesFilter: FilterFunction;
     size: TimePickerSize;
@@ -169,6 +179,7 @@ declare const _default: import("vue2").ComponentOptions<import("vue2").default,
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: Date;
+    timeFormat: "auto" | "h12" | "h23";
     hoursFilter: FilterFunction;
     minutesFilter: FilterFunction;
     size: TimePickerSize;

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

@@ -1,4 +1,5 @@
 export { default as OrTimePickerV3 } from './OrTimePicker.js';
+export { D as TimePickerTimeFormat } from '../../props-4f1050af.js';
 export { InputBoxSize as TimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.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-ad495c45.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 { DateTimePickerTimeSelectTimeFormat as TimePickerTimeFormat } from '../or-date-time-picker-v3/partials/or-date-time-picker-time-select/props';
 export { InputBoxSize as TimePickerSize } from '../or-input-box-v3';

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

@@ -1 +1,2 @@
+export { D as TimePickerTimeFormat } from '../../props-4f1050af.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 };

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

@@ -39,6 +39,7 @@ export { default as OrDatePickerV3 } from './OrDatePickerV3/OrDatePicker.js';
 export { default as OrDateTimePicker } from './OrDateTimePicker/OrDateTimePicker.js';
 export { DEFAULT_TEXT, OrDateTimePickerItemTypes, OrDateTimePickerTypes } from './OrDateTimePicker/constants.js';
 export { default as OrDateTimePickerV3 } from './OrDateTimePickerV3/OrDateTimePicker.js';
+export { D as DateTimePickerTimeFormat, D as TimePickerTimeFormat } from '../props-4f1050af.js';
 export { default as OrEmptyStateV3 } from './OrEmptyStateV3/OrEmptyState.js';
 export { EmptyStateSize } from './OrEmptyStateV3/props.js';
 export { default as OrError } from './OrError/OrError.js';
@@ -232,7 +233,7 @@ import '../directives/dropdown-open.js';
 import '../_baseProperty-a52739e9.js';
 import '../toInteger-db8a475d.js';
 import '../toFinite-021b0c50.js';
-import '../OrDateTimePickerTimeSelect-78f775d8.js';
+import '../OrDateTimePickerTimeSelect-ad495c45.js';
 import './OrDateTimePickerV3/hooks/useTimePlaceholder.js';
 import './OrDateTimePickerV3/styles.js';
 import './OrEmptyStateV3/styles.js';