@onereach/ui-components 10.0.2 → 10.1.0-beta.4242.0

package/dist/bundled/v3/components/OrDateTimeFormatV3-57c82e28.js

@@ -0,0 +1,81 @@
+import { openBlock, createElementBlock, normalizeClass, Fragment, createTextVNode, toDisplayString } from 'vue';
+import { defineComponent, ref, computed, inject } from 'vue-demi';
+import { D as DateFormat, a as DateTimePickerDateFormat, T as TimeFormat, j as DateTimePickerTimeFormat, L as Locale, f as formatDate, k as formatTime } from './OrDateTimePickerV3-345a6c12.js';
+
+const DateTimeFormat = [
+// Layout
+'inline'];
+
+var script = defineComponent({
+  name: 'OrDateTimeFormat',
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: undefined,
+      default: undefined
+    },
+    dateFormat: {
+      type: String,
+      default: undefined
+    },
+    timeFormat: {
+      type: String,
+      default: undefined
+    },
+    locale: {
+      type: String,
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: undefined
+    }
+  },
+  expose: ['root'],
+  setup(props) {
+    // Refs & Styles
+    const root = ref();
+    const rootStyles = computed(() => ['or-date-time-format-v3', ...DateTimeFormat]);
+    // Options
+    const resolvedDateFormat = computed(() => {
+      var _a;
+      return (_a = props.dateFormat) !== null && _a !== void 0 ? _a : inject(DateFormat, DateTimePickerDateFormat.Short);
+    });
+    const resolvedTimeFormat = computed(() => {
+      var _a;
+      return (_a = props.timeFormat) !== null && _a !== void 0 ? _a : inject(TimeFormat, DateTimePickerTimeFormat.Auto);
+    });
+    const resolvedLocale = computed(() => {
+      var _a;
+      return (_a = props.locale) !== null && _a !== void 0 ? _a : inject(Locale, navigator.language);
+    });
+    return {
+      root,
+      rootStyles,
+      resolvedDateFormat,
+      resolvedTimeFormat,
+      resolvedLocale,
+      formatDate,
+      formatTime
+    };
+  }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    ref: 'root',
+    class: normalizeClass(_ctx.rootStyles)
+  }, [_ctx.modelValue ? (openBlock(), createElementBlock(Fragment, {
+    key: 0
+  }, [createTextVNode(toDisplayString(`${_ctx.formatDate(_ctx.modelValue, _ctx.resolvedDateFormat, _ctx.resolvedLocale)} ${_ctx.formatTime(_ctx.modelValue, _ctx.resolvedTimeFormat, _ctx.resolvedLocale)}`), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : (openBlock(), createElementBlock(Fragment, {
+    key: 1
+  }, [createTextVNode(toDisplayString(_ctx.placeholder), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */))], 2 /* CLASS */);
+}
+
+script.render = render;
+script.__file = "src/components/or-date-time-format-v3/OrDateTimeFormat.vue";
+
+export { DateTimeFormat as D, script as s };

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

@@ -1 +1 @@
-export { l as default } from '../OrDateTimePickerV3-84c0fee3.js';
+export { n as default } from '../OrDateTimePickerV3-345a6c12.js';

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

@@ -1,34 +1,41 @@
 import { PropType } from 'vue-demi';
 import { InputBoxSize } from '../or-input-box-v3';
-import { DateTimePickerTimeFormat } from './props';
-import { FilterFunction } from './types';
+import { DateTimePickerDateFormat, DateTimePickerFilterFunction, DateTimePickerModelValue, DateTimePickerTimeFormat } from './types';
 declare const _default: import("vue-demi").DefineComponent<{
     modelValue: {
-        type: DateConstructor;
+        type: PropType<DateTimePickerModelValue>;
+        default: undefined;
+    };
+    dateFormat: {
+        type: PropType<"short" | "medium" | "long">;
         default: undefined;
     };
     timeFormat: {
         type: PropType<"auto" | "h12" | "h23">;
-        default: () => DateTimePickerTimeFormat;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
+        default: undefined;
     };
     yearFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     monthFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     dateFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     hoursFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     minutesFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     size: {
@@ -65,15 +72,18 @@ declare const _default: import("vue-demi").DefineComponent<{
     };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
+    rootStyles: import("vue-demi").ComputedRef<string[]>;
     inputBox: import("vue-demi").Ref<any>;
     inputBoxRoot: import("vue-demi").ComputedRef<any>;
     datePopover: import("vue-demi").Ref<any>;
     datePopoverState: import("vue-demi").ComputedRef<any>;
+    datePopoverStyles: import("vue-demi").ComputedRef<string[]>;
     timePopover: import("vue-demi").Ref<any>;
     timePopoverState: import("vue-demi").ComputedRef<any>;
-    rootStyles: import("vue-demi").ComputedRef<string[]>;
-    datePopoverStyles: import("vue-demi").ComputedRef<string[]>;
     timePopoverStyles: import("vue-demi").ComputedRef<string[]>;
+    resolvedDateFormat: import("vue-demi").ComputedRef<DateTimePickerDateFormat.Short | "short" | "medium" | "long">;
+    resolvedTimeFormat: import("vue-demi").ComputedRef<DateTimePickerTimeFormat.Auto | "auto" | "h12" | "h23">;
+    resolvedLocale: import("vue-demi").ComputedRef<string>;
     initialValue: import("vue-demi").Ref<{
         toString: () => string;
         toDateString: () => string;
@@ -137,7 +147,7 @@ declare const _default: import("vue-demi").DefineComponent<{
             (hint: string): string | number;
         };
     }>;
-    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<Date | undefined>;
+    proxyModelValue: import("../../hooks").UseProxyModelValueReturn<DateTimePickerModelValue>;
     draftModelValue: import("vue-demi").Ref<{
         toString: () => string;
         toDateString: () => string;
@@ -200,7 +210,7 @@ declare const _default: import("vue-demi").DefineComponent<{
             (hint: "number"): number;
             (hint: string): string | number;
         };
-    } | undefined>;
+    } | null | undefined>;
     isInvalidDraftModelValue: import("vue-demi").ComputedRef<boolean>;
     apply: () => void;
     reset: () => void;
@@ -208,35 +218,43 @@ declare const _default: import("vue-demi").DefineComponent<{
     toggleTimePopover: () => void;
     closeDatePopover: () => void;
     closeTimePopover: () => void;
-    formatDateAlt: (value?: Date) => string;
-    formatTimeAlt: (value?: Date) => string;
+    formatDateAlt: (value: DateTimePickerModelValue) => string;
+    formatTimeAlt: (value: DateTimePickerModelValue) => string;
 }, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, ("update:modelValue" | "keydown" | "keyup" | "focus" | "blur")[], "update:modelValue" | "keydown" | "keyup" | "focus" | "blur", import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     modelValue: {
-        type: DateConstructor;
+        type: PropType<DateTimePickerModelValue>;
+        default: undefined;
+    };
+    dateFormat: {
+        type: PropType<"short" | "medium" | "long">;
         default: undefined;
     };
     timeFormat: {
         type: PropType<"auto" | "h12" | "h23">;
-        default: () => DateTimePickerTimeFormat;
+        default: undefined;
+    };
+    locale: {
+        type: StringConstructor;
+        default: undefined;
     };
     yearFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     monthFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     dateFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     hoursFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     minutesFilter: {
-        type: PropType<FilterFunction>;
+        type: PropType<DateTimePickerFilterFunction>;
         default: undefined;
     };
     size: {
@@ -278,13 +296,15 @@ declare const _default: import("vue-demi").DefineComponent<{
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
 }, {
-    modelValue: Date;
+    modelValue: DateTimePickerModelValue;
+    dateFormat: "short" | "medium" | "long";
     timeFormat: "auto" | "h12" | "h23";
-    yearFilter: FilterFunction;
-    monthFilter: FilterFunction;
-    dateFilter: FilterFunction;
-    hoursFilter: FilterFunction;
-    minutesFilter: FilterFunction;
+    locale: string;
+    yearFilter: DateTimePickerFilterFunction;
+    monthFilter: DateTimePickerFilterFunction;
+    dateFilter: DateTimePickerFilterFunction;
+    hoursFilter: DateTimePickerFilterFunction;
+    minutesFilter: DateTimePickerFilterFunction;
     size: "m" | "s";
     label: string;
     hint: string;

package/dist/bundled/v3/components/OrDateTimePickerV3/index.d.ts

@@ -1,5 +1,5 @@
 export { default as OrDateTimePickerV3 } from './OrDateTimePicker.vue';
 export * from './partials';
-export * from './props';
+export * from './tokens';
 export * from './types';
 export * from './utils';

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

@@ -1 +1 @@
-export { D as DateTimePickerTimeFormat, s as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMobileControl, c as OrDateTimePickerMonthSelect, d as OrDateTimePickerPopoverFooter, e as OrDateTimePickerPopoverHeader, j as OrDateTimePickerTimeControl, k as OrDateTimePickerTimeSelect, l as OrDateTimePickerV3, f as formatDate, i as formatTime, g as getCurrentDate, m as getDatePlaceholder, h as getNextMonthDate, n as getTimePlaceholder } from '../OrDateTimePickerV3-84c0fee3.js';
+export { D as DateFormat, a as DateTimePickerDateFormat, j as DateTimePickerTimeFormat, L as Locale, s as OrDateTimePickerDateControl, b as OrDateTimePickerDateSelect, c as OrDateTimePickerMobileControl, d as OrDateTimePickerMonthSelect, e as OrDateTimePickerPopoverFooter, g as OrDateTimePickerPopoverHeader, l as OrDateTimePickerTimeControl, m as OrDateTimePickerTimeSelect, n as OrDateTimePickerV3, T as TimeFormat, f as formatDate, k as formatTime, h as getCurrentDate, o as getDatePlaceholder, i as getNextMonthDate, p as getTimePlaceholder } from '../OrDateTimePickerV3-345a6c12.js';

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

@@ -1 +1 @@
-export { o as DateTimePicker, p as DateTimePickerDatePopover, q as DateTimePickerTimePopover } from '../OrDateTimePickerV3-84c0fee3.js';
+export { q as DateTimePicker, r as DateTimePickerDatePopover, t as DateTimePickerTimePopover } from '../OrDateTimePickerV3-345a6c12.js';

package/dist/bundled/v3/components/OrDateTimePickerV3/tokens.d.ts

@@ -0,0 +1,3 @@
+export declare const DateFormat: unique symbol;
+export declare const TimeFormat: unique symbol;
+export declare const Locale: unique symbol;

package/dist/bundled/v3/components/OrDateTimePickerV3/tokens.js

@@ -0,0 +1 @@
+export { D as DateFormat, L as Locale, T as TimeFormat } from '../OrDateTimePickerV3-345a6c12.js';

package/dist/bundled/v3/components/OrDateTimePickerV3/types.d.ts

@@ -1,3 +1,14 @@
-export interface FilterFunction {
+export type DateTimePickerModelValue = Date | null | undefined;
+export declare enum DateTimePickerDateFormat {
+    Short = "short",
+    Medium = "medium",
+    Long = "long"
+}
+export declare enum DateTimePickerTimeFormat {
+    Auto = "auto",
+    H12 = "h12",
+    H23 = "h23"
+}
+export interface DateTimePickerFilterFunction {
     (value: Date): boolean;
 }

package/dist/bundled/v3/components/OrDateTimePickerV3/utils/formatDate.d.ts

@@ -1 +1,2 @@
-export declare function formatDate(value: Date): string;
+import { DateTimePickerDateFormat } from '../types';
+export declare function formatDate(value: Date, format: `${DateTimePickerDateFormat}`, locale: string): string;

package/dist/bundled/v3/components/OrDateTimePickerV3/utils/formatDate.js

@@ -1 +1 @@
-export { f as formatDate } from '../../OrDateTimePickerV3-84c0fee3.js';
+export { f as formatDate } from '../../OrDateTimePickerV3-345a6c12.js';

package/dist/bundled/v3/components/OrDateTimePickerV3/utils/formatTime.d.ts

@@ -1,2 +1,2 @@
-import { DateTimePickerTimeFormat } from '../props';
-export declare function formatTime(value: Date, format?: `${DateTimePickerTimeFormat}`): string;
+import { DateTimePickerTimeFormat } from '../types';
+export declare function formatTime(value: Date, format: `${DateTimePickerTimeFormat}`, locale: string): string;

package/dist/bundled/v3/components/OrDateTimePickerV3/utils/formatTime.js

@@ -1 +1 @@
-export { i as formatTime } from '../../OrDateTimePickerV3-84c0fee3.js';
+export { k as formatTime } from '../../OrDateTimePickerV3-345a6c12.js';

package/dist/bundled/v3/components/OrDateTimePickerV3/utils/getCurrentDate.js

@@ -1 +1 @@
-export { g as getCurrentDate } from '../../OrDateTimePickerV3-84c0fee3.js';
+export { h as getCurrentDate } from '../../OrDateTimePickerV3-345a6c12.js';

package/dist/bundled/v3/components/OrDateTimePickerV3/utils/getDatePlaceholder.d.ts

@@ -1 +1,2 @@
-export declare function getDatePlaceholder(): string;
+import { DateTimePickerDateFormat } from '../types';
+export declare function getDatePlaceholder(format: `${DateTimePickerDateFormat}`, locale: string): string;

package/dist/bundled/v3/components/OrDateTimePickerV3/utils/getDatePlaceholder.js

@@ -1 +1 @@
-export { m as getDatePlaceholder } from '../../OrDateTimePickerV3-84c0fee3.js';
+export { o as getDatePlaceholder } from '../../OrDateTimePickerV3-345a6c12.js';

package/dist/bundled/v3/components/OrDateTimePickerV3/utils/getNextMonthDate.js

@@ -1 +1 @@
-export { h as getNextMonthDate } from '../../OrDateTimePickerV3-84c0fee3.js';
+export { i as getNextMonthDate } from '../../OrDateTimePickerV3-345a6c12.js';

package/dist/bundled/v3/components/OrDateTimePickerV3/utils/getTimePlaceholder.d.ts

@@ -1,2 +1,2 @@
-import { DateTimePickerTimeFormat } from '../props';
-export declare function getTimePlaceholder(format?: `${DateTimePickerTimeFormat}`): string;
+import { DateTimePickerTimeFormat } from '../types';
+export declare function getTimePlaceholder(format: `${DateTimePickerTimeFormat}`, locale: string): string;

package/dist/bundled/v3/components/OrDateTimePickerV3/utils/getTimePlaceholder.js

@@ -1 +1 @@
-export { n as getTimePlaceholder } from '../../OrDateTimePickerV3-84c0fee3.js';
+export { p as getTimePlaceholder } from '../../OrDateTimePickerV3-345a6c12.js';

package/dist/bundled/v3/components/OrDateTimePickerV3/utils/index.js

@@ -1 +1 @@
-export { f as formatDate, i as formatTime, g as getCurrentDate, m as getDatePlaceholder, h as getNextMonthDate, n as getTimePlaceholder } from '../../OrDateTimePickerV3-84c0fee3.js';
+export { f as formatDate, k as formatTime, h as getCurrentDate, o as getDatePlaceholder, i as getNextMonthDate, p as getTimePlaceholder } from '../../OrDateTimePickerV3-345a6c12.js';