@onereach/ui-components 10.1.0 → 10.1.1-beta.4245.0

package/dist/bundled/v2/{OrDateTimePickerMonthSelect-980a9ada.js → OrDateTimePickerMonthSelect-d0681d68.js}

@@ -30,9 +30,17 @@ var script$2 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
+    format: {
+      type: String,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
+    },
     selected: {
       type: Boolean,
       default: false
@@ -52,14 +60,15 @@ var script$2 = defineComponent({
   },
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-date-control-v3', ...DateTimePickerDateControl]);
     const placeholderStyles = computed(() => [...DateTimePickerDateControlPlaceholder]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const placeholder = getDatePlaceholder();
+    const placeholder = computed(() => {
+      return getDatePlaceholder(props.format, props.locale);
+    });
     return {
       root,
       rootStyles,
@@ -94,7 +103,7 @@ var __vue_render__$2 = function () {
         $event.preventDefault();
       }
     }
-  }, [_vm.proxyModelValue ? [_vm._v("\n    " + _vm._s(_vm.formatDate(_vm.proxyModelValue)) + "\n  ")] : [_c('span', {
+  }, [_vm.proxyModelValue ? [_vm._v("\n    " + _vm._s(_vm.formatDate(_vm.proxyModelValue, _vm.format, _vm.locale)) + "\n  ")] : [_c('span', {
     class: _vm.placeholderStyles,
     attrs: {
       "disabled": _vm.disabled
@@ -175,13 +184,21 @@ var script$1 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
     initialValue: {
       type: Date,
       required: true
     },
+    format: {
+      type: String,
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
+    },
     dateFilter: {
       type: Function,
       default: undefined
@@ -198,9 +215,8 @@ var script$1 = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-date-select-v3', ...DateTimePickerDateSelect]);
     const buttonGroupStyles = computed(() => [...DateTimePickerDateSelectButtonGroup]);
     const buttonGroupWeekdayItemStyles = computed(() => [...DateTimePickerDateSelectButtonGroupWeekdayItem]);
@@ -234,13 +250,13 @@ var script$1 = defineComponent({
     });
     // Methods
     function formatWeekday(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         weekday: 'short',
         timeZone: 'UTC'
       });
     }
     function formatDay(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         day: 'numeric',
         timeZone: 'UTC'
       });
@@ -342,7 +358,11 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
+      required: true
+    },
+    locale: {
+      type: String,
       required: true
     },
     yearFilter: {
@@ -357,30 +377,29 @@ var script = defineComponent({
   emits: ['update:modelValue'],
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-date-time-picker-month-select-v3', ...DateTimePickerMonthSelect]);
     const yearButton = ref();
-    const monthButton = ref();
     const yearButtonRoot = computed(() => {
       var _a;
       return (_a = yearButton.value) === null || _a === void 0 ? void 0 : _a.root;
     });
+    const monthButton = ref();
     const monthButtonRoot = computed(() => {
       var _a;
       return (_a = monthButton.value) === null || _a === void 0 ? void 0 : _a.root;
     });
     const yearMenu = ref();
-    const monthMenu = ref();
     const yearMenuState = computed(() => {
       var _a;
       return (_a = yearMenu.value) === null || _a === void 0 ? void 0 : _a.state;
     });
+    const monthMenu = ref();
     const monthMenuState = computed(() => {
       var _a;
       return (_a = monthMenu.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-date-time-picker-month-select-v3', ...DateTimePickerMonthSelect]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const yearOptions = computed(() => {
@@ -410,28 +429,28 @@ var script = defineComponent({
       proxyModelValue.value = new Date(Date.UTC(proxyModelValue.value.getUTCFullYear(), proxyModelValue.value.getUTCMonth() - 1, proxyModelValue.value.getUTCDate(), proxyModelValue.value.getUTCHours(), proxyModelValue.value.getUTCMinutes()));
     }
     function formatYear(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         year: 'numeric',
         timeZone: 'UTC'
       });
     }
     function formatMonth(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         month: 'long',
         timeZone: 'UTC'
       });
     }
     return {
       root,
+      rootStyles,
       yearButton,
-      monthButton,
       yearButtonRoot,
+      monthButton,
       monthButtonRoot,
       yearMenu,
-      monthMenu,
       yearMenuState,
+      monthMenu,
       monthMenuState,
-      rootStyles,
       proxyModelValue,
       yearOptions,
       monthOptions,

package/dist/bundled/v2/{OrDateTimePickerPopoverHeader-4ab9b54a.js → OrDateTimePickerPopoverHeader-31d1e247.js}

@@ -35,9 +35,8 @@ var script$2 = defineComponent({
   },
   expose: ['root'],
   setup() {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-mobile-control-v3', ...DateTimePickerMobileControl]);
     const contentStyles = computed(() => [...DateTimePickerMobileControlContent]);
     return {
@@ -112,9 +111,8 @@ var script$1 = defineComponent({
   emits: ['apply', 'reset'],
   expose: ['root'],
   setup() {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-popover-footer-v3', ...DateTimePickerPopoverFooter]);
     return {
       root,
@@ -189,9 +187,8 @@ var script = defineComponent({
   name: 'OrDateTimePickerPopoverHeader',
   expose: ['root'],
   setup() {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-popover-header-v3', ...DateTimePickerPopoverHeader]);
     return {
       root,

package/dist/bundled/v2/{OrDateTimePickerTimeSelect-328896c3.js → OrDateTimePickerTimeSelect-bcdf865d.js}

@@ -1,9 +1,9 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
-import { DateTimePickerTimeFormat } from './components/OrDateTimePickerV3/props.js';
 import { getTimePlaceholder } from './components/OrDateTimePickerV3/utils/getTimePlaceholder.js';
 import { formatTime } from './components/OrDateTimePickerV3/utils/formatTime.js';
 import { useProxyModelValue } from './hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+import { a as DateTimePickerTimeFormat } from './types-6a847182.js';
 import __vue_component__$2 from './components/OrButtonV3/OrButton.js';
 
 const DateTimePickerTimeControl = [
@@ -27,12 +27,16 @@ var script$1 = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
     format: {
       type: String,
-      default: () => DateTimePickerTimeFormat.Auto
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
     },
     selected: {
       type: Boolean,
@@ -53,14 +57,15 @@ var script$1 = defineComponent({
   },
   expose: ['root'],
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-time-control-v3', ...DateTimePickerTimeControl]);
     const placeholderStyles = computed(() => [...DateTimePickerTimeControlPlaceholder]);
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const placeholder = getTimePlaceholder(props.format);
+    const placeholder = computed(() => {
+      return getTimePlaceholder(props.format, props.locale);
+    });
     return {
       root,
       rootStyles,
@@ -89,8 +94,13 @@ var __vue_render__$1 = function () {
       "required": _vm.required,
       "readonly": _vm.readonly,
       "disabled": _vm.disabled
+    },
+    on: {
+      "keydown": function ($event) {
+        $event.preventDefault();
+      }
     }
-  }, [_vm.proxyModelValue ? [_vm._v("\n    " + _vm._s(_vm.formatTime(_vm.proxyModelValue, _vm.format)) + "\n  ")] : [_c('span', {
+  }, [_vm.proxyModelValue ? [_vm._v("\n    " + _vm._s(_vm.formatTime(_vm.proxyModelValue, _vm.format, _vm.locale)) + "\n  ")] : [_c('span', {
     class: _vm.placeholderStyles,
     attrs: {
       "disabled": _vm.disabled
@@ -152,7 +162,7 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
       default: undefined
     },
     initialValue: {
@@ -161,7 +171,11 @@ var script = defineComponent({
     },
     format: {
       type: String,
-      default: () => DateTimePickerTimeFormat.Auto
+      required: true
+    },
+    locale: {
+      type: String,
+      required: true
     },
     hoursFilter: {
       type: Function,
@@ -176,9 +190,8 @@ var script = defineComponent({
   expose: ['root'],
   setup(props, context) {
     var _a;
-    // Refs
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-time-picker-time-select-v3', ...DateTimePickerTimeSelect]);
     const buttonGroupStyles = computed(() => [...DateTimePickerTimeSelectButtonGroup]);
     const buttonGroupItemStyles = computed(() => [...DateTimePickerTimeSelectButtonGroupItem]);
@@ -187,7 +200,7 @@ var script = defineComponent({
     const proxyTimeFormat = computed(() => {
       if (props.format === DateTimePickerTimeFormat.Auto) {
         const timeSample = new Date(1970, 0);
-        if (timeSample.toLocaleTimeString(navigator.language).includes('12')) {
+        if (timeSample.toLocaleTimeString(props.locale).includes('12')) {
           return DateTimePickerTimeFormat.H12;
         }
         return DateTimePickerTimeFormat.H23;
@@ -236,11 +249,11 @@ var script = defineComponent({
     });
     // Methods
     function formatHours(value) {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         hour: 'numeric',
         hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
         timeZone: 'UTC'
-      }).replace(/\s(am|pm)/i, '');
+      }).replace(/\D/g, '');
     }
     function formatMinutes(value) {
       return String(value.getUTCMinutes()).padStart(2, '0');

package/dist/bundled/v2/components/OrDateFormatV3/OrDateFormat.js

@@ -1,5 +1,8 @@
-import { defineComponent, ref, computed } from 'vue-demi';
+import { defineComponent, ref, computed, inject } from 'vue-demi';
 import { DateFormat } from './styles.js';
+import { D as DateTimePickerDateFormat } from '../../types-6a847182.js';
+import { DateFormat as DateFormat$1 } from '../../tokens/DateFormat.js';
+import { Locale } from '../../tokens/Locale.js';
 import { formatDate } from '../OrDateTimePickerV3/utils/formatDate.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 
@@ -11,7 +14,15 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
+      default: undefined
+    },
+    format: {
+      type: String,
+      default: undefined
+    },
+    locale: {
+      type: String,
       default: undefined
     },
     placeholder: {
@@ -20,14 +31,24 @@ var script = defineComponent({
     }
   },
   expose: ['root'],
-  setup() {
-    // Refs
+  setup(props) {
+    // Refs & Styles
     const root = ref();
-    // Styles
     const rootStyles = computed(() => ['or-date-format-v3', ...DateFormat]);
+    // Options
+    const resolvedFormat = computed(() => {
+      var _a;
+      return (_a = props.format) !== null && _a !== void 0 ? _a : inject(DateFormat$1, DateTimePickerDateFormat.Short);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
     return {
       root,
       rootStyles,
+      resolvedFormat,
+      resolvedLocale,
       formatDate
     };
   }
@@ -44,7 +65,7 @@ var __vue_render__ = function () {
   return _c('div', {
     ref: 'root',
     class: _vm.rootStyles
-  }, [_vm._v("\n  " + _vm._s(_vm.modelValue ? _vm.formatDate(_vm.modelValue) : _vm.placeholder) + "\n")]);
+  }, [_vm.modelValue ? [_vm._v("\n    " + _vm._s(_vm.formatDate(_vm.modelValue, _vm.resolvedFormat, _vm.resolvedLocale)) + "\n  ")] : [_vm._v("\n    " + _vm._s(_vm.placeholder) + "\n  ")]], 2);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/bundled/v2/components/OrDateFormatV3/OrDateFormat.vue.d.ts

@@ -1,11 +1,22 @@
-import { formatDate } from '../or-date-time-picker-v3';
+import { PropType } from 'vue-demi';
+import { DateTimePickerModelValue, formatDate } from '../or-date-time-picker-v3';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    resolvedFormat: import("@vue/composition-api").ComputedRef<"short" | "medium" | "long">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     formatDate: typeof formatDate;
 }> & import("@vue/composition-api").Data, {}, {}, {
     modelValue: {
-        type: DateConstructor;
+        type: PropType<DateTimePickerModelValue>;
+        default: undefined;
+    };
+    format: {
+        type: PropType<"short" | "medium" | "long">;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
         default: undefined;
     };
     placeholder: {
@@ -14,7 +25,15 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     modelValue: {
-        type: DateConstructor;
+        type: PropType<DateTimePickerModelValue>;
+        default: undefined;
+    };
+    format: {
+        type: PropType<"short" | "medium" | "long">;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
         default: undefined;
     };
     placeholder: {
@@ -22,17 +41,25 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
+    format: "short" | "medium" | "long";
+    locale: string;
     placeholder: string;
 } & {}, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    resolvedFormat: import("@vue/composition-api").ComputedRef<"short" | "medium" | "long">;
+    resolvedLocale: import("@vue/composition-api").ComputedRef<string>;
     formatDate: typeof formatDate;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, {}, {
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
+    format: "short" | "medium" | "long";
+    locale: string;
     placeholder: string;
 } & {}, {
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
+    format: "short" | "medium" | "long";
+    locale: string;
     placeholder: string;
 }, true>);
 export default _default;

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

@@ -1,7 +1,7 @@
-import { defineComponent, ref, computed, watch, toRef } from 'vue-demi';
+import { defineComponent, ref, computed, inject, watch, toRef } from 'vue-demi';
 import { DatePicker, DatePickerPopover } from './styles.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-980a9ada.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-4ab9b54a.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-d0681d68.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-31d1e247.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';
 import __vue_component__$2 from '../OrHintV3/OrHint.js';
 import __vue_component__$3 from '../OrIconV3/OrIcon.js';
@@ -12,6 +12,9 @@ import __vue_component__$7 from '../OrPopoverV3/OrPopover.js';
 import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
+import { DateFormat } from '../../tokens/DateFormat.js';
+import { D as DateTimePickerDateFormat } from '../../types-6a847182.js';
+import { Locale } from '../../tokens/Locale.js';
 import { getCurrentDate } from '../OrDateTimePickerV3/utils/getCurrentDate.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
@@ -43,7 +46,15 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: Date,
+      type: undefined,
+      default: undefined
+    },
+    format: {
+      type: String,
+      default: undefined
+    },
+    locale: {
+      type: String,
       default: undefined
     },
     yearFilter: {
@@ -91,12 +102,13 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['update:modelValue', 'keydown', 'keyup', 'focus', 'blur'],
+  emits: ['update:modelValue', 'input', 'keydown', 'keyup', 'focus', 'blur'],
   expose: ['root', 'focus', 'blur'],
   setup(props, context) {
     var _a;
-    // Refs
+    // Refs & Styles
     const root = ref();
+    const rootStyles = computed(() => ['or-date-picker-v3', ...DatePicker]);
     const inputBox = ref();
     const inputBoxRoot = computed(() => {
       var _a;
@@ -107,9 +119,16 @@ var script = defineComponent({
       var _a;
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
-    // Styles
-    const rootStyles = computed(() => ['or-date-picker-v3', ...DatePicker]);
     const popoverStyles = computed(() => ['or-date-picker-popover-v3', ...DatePickerPopover]);
+    // Options
+    const resolvedFormat = computed(() => {
+      var _a;
+      return (_a = props.format) !== null && _a !== void 0 ? _a : inject(DateFormat, DateTimePickerDateFormat.Short);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
     // State
     const initialValue = ref((_a = props.modelValue) !== null && _a !== void 0 ? _a : getCurrentDate());
     watch(() => props.modelValue, value => {
@@ -158,19 +177,21 @@ var script = defineComponent({
     }
     function formatDateAlt(value) {
       var _a;
-      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(navigator.language, {
+      return (_a = value === null || value === void 0 ? void 0 : value.toLocaleString(resolvedLocale.value, {
         dateStyle: 'medium',
         timeZone: 'UTC'
       })) !== null && _a !== void 0 ? _a : '--';
     }
     return {
       root,
+      rootStyles,
       inputBox,
       inputBoxRoot,
       popover,
       popoverState,
-      rootStyles,
       popoverStyles,
+      resolvedFormat,
+      resolvedLocale,
       initialValue,
       proxyModelValue,
       draftModelValue,
@@ -268,6 +289,8 @@ var __vue_render__ = function () {
     }],
     class: ['!border-0'],
     attrs: {
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale,
       "selected": _vm.popover && _vm.popover.state === 'open',
       "required": _vm.required,
       "readonly": _vm.readonly,
@@ -304,6 +327,7 @@ var __vue_render__ = function () {
     }
   }, [_vm._v("\n          " + _vm._s(_vm.formatDateAlt(_vm.draftModelValue)) + "\n        ")])], 1), _vm._v(" "), _c('OrDateTimePickerMonthSelect', {
     attrs: {
+      "locale": _vm.resolvedLocale,
       "year-filter": _vm.yearFilter,
       "month-filter": _vm.monthFilter
     },
@@ -317,6 +341,8 @@ var __vue_render__ = function () {
   }), _vm._v(" "), _c('OrDateTimePickerDateSelect', {
     attrs: {
       "initial-value": _vm.initialValue,
+      "format": _vm.resolvedFormat,
+      "locale": _vm.resolvedLocale,
       "date-filter": _vm.dateFilter
     },
     model: {