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

package/src/components/or-label-v3/styles.ts

@@ -41,11 +41,11 @@ export const LabelVariants: Record<LabelVariant, string[]> = {
 };
 
 export const LabelText: string[] = [
-  // Content (required)
-  'required:after:content-["*"]',
-
   // Interactivity
   'interactivity-default',
+
+  // Content (required)
+  'required:after:content-["*"]',
 ];
 
 export const LabelAddon: string[] = [

package/src/components/or-time-format-v3/OrTimeFormat.vue

@@ -3,14 +3,20 @@
     :ref="'root'"
     :class="rootStyles"
   >
-    {{ modelValue ? formatTime(modelValue, format) : placeholder }}
+    <template v-if="modelValue">
+      {{ formatTime(modelValue, resolvedFormat, resolvedLocale) }}
+    </template>
+
+    <template v-else>
+      {{ placeholder }}
+    </template>
   </div>
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref } from 'vue-demi';
-import { DateTimePickerTimeFormat, formatTime } from '../or-date-time-picker-v3';
-import { TimeFormat } from './styles';
+import { PropType, computed, defineComponent, inject, ref } from 'vue-demi';
+import { DateTimePickerModelValue, DateTimePickerTimeFormat, Locale, TimeFormat, formatTime } from '../or-date-time-picker-v3';
+import * as Styles from './styles';
 
 export default defineComponent({
   name: 'OrTimeFormat',
@@ -22,13 +28,18 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Date,
+      type: undefined as unknown as PropType<DateTimePickerModelValue>,
       default: undefined,
     },
 
     format: {
       type: String as PropType<`${DateTimePickerTimeFormat}`>,
-      default: () => DateTimePickerTimeFormat.Auto,
+      default: undefined,
+    },
+
+    locale: {
+      type: String,
+      default: undefined,
     },
 
     placeholder: {
@@ -41,20 +52,31 @@ export default defineComponent({
     'root',
   ],
 
-  setup() {
-    // Refs
+  setup(props) {
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
-    // Styles
     const rootStyles = computed(() => [
       'or-time-format-v3',
-      ...TimeFormat,
+      ...Styles.TimeFormat,
     ]);
 
+    // Options
+    const resolvedFormat = computed(() => {
+      return props.format ?? inject(TimeFormat, DateTimePickerTimeFormat.Auto);
+    });
+
+    const resolvedLocale = computed(() => {
+      return props.locale ?? inject(Locale, navigator.language);
+    });
+
     return {
       root,
       rootStyles,
 
+      resolvedFormat,
+      resolvedLocale,
+
       formatTime,
     };
   },

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

@@ -34,7 +34,8 @@
         v-dropdown-open="openPopover"
         v-dropdown-close="closePopover"
         :class="['!border-0']"
-        :format="format"
+        :format="resolvedFormat"
+        :locale="resolvedLocale"
         :selected="popover && popover.state === 'open'"
         :required="required"
         :readonly="readonly"
@@ -63,7 +64,8 @@
         <OrDateTimePickerTimeSelect
           v-model="draftModelValue"
           :initial-value="initialValue"
-          :format="format"
+          :format="resolvedFormat"
+          :locale="resolvedLocale"
           :hours-filter="hoursFilter"
           :minutes-filter="minutesFilter"
         />
@@ -115,10 +117,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
+import { PropType, computed, defineComponent, inject, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useProxyModelValue } from '../../hooks';
-import { DateTimePickerTimeFormat, FilterFunction, getCurrentDate, OrDateTimePickerMobileControl, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader, OrDateTimePickerTimeControl, OrDateTimePickerTimeSelect } from '../or-date-time-picker-v3';
+import { DateTimePickerFilterFunction, DateTimePickerModelValue, DateTimePickerTimeFormat, Locale, OrDateTimePickerMobileControl, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader, OrDateTimePickerTimeControl, OrDateTimePickerTimeSelect, TimeFormat, getCurrentDate } from '../or-date-time-picker-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
@@ -126,7 +128,7 @@ import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { InputBoxSize, 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 { TimePicker, TimePickerPopover } from './styles';
+import * as Styles from './styles';
 
 export default defineComponent({
   name: 'OrTimePicker',
@@ -158,22 +160,27 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Date,
+      type: undefined as unknown as PropType<DateTimePickerModelValue>,
       default: undefined,
     },
 
     format: {
       type: String as PropType<`${DateTimePickerTimeFormat}`>,
-      default: () => DateTimePickerTimeFormat.Auto,
+      default: undefined,
+    },
+
+    locale: {
+      type: String,
+      default: undefined,
     },
 
     hoursFilter: {
-      type: Function as PropType<FilterFunction>,
+      type: Function as PropType<DateTimePickerFilterFunction>,
       default: undefined,
     },
 
     minutesFilter: {
-      type: Function as PropType<FilterFunction>,
+      type: Function as PropType<DateTimePickerFilterFunction>,
       default: undefined,
     },
 
@@ -235,26 +242,34 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
+    const rootStyles = computed(() => [
+      'or-time-picker-v3',
+      ...Styles.TimePicker,
+    ]);
+
     const inputBox = ref<InstanceType<typeof OrInputBox>>();
     const inputBoxRoot = computed(() => inputBox.value?.root);
 
     const popover = ref<InstanceType<typeof OrPopover>>();
     const popoverState = computed(() => popover.value?.state);
 
-    // Styles
-    const rootStyles = computed(() => [
-      'or-time-picker-v3',
-      ...TimePicker,
-    ]);
-
     const popoverStyles = computed(() => [
       'or-time-picker-popover-v3',
-      ...TimePickerPopover,
+      ...Styles.TimePickerPopover,
     ]);
 
+    // Options
+    const resolvedFormat = computed(() => {
+      return props.format ?? inject(TimeFormat, DateTimePickerTimeFormat.Auto);
+    });
+
+    const resolvedLocale = computed(() => {
+      return props.locale ?? inject(Locale, navigator.language);
+    });
+
     // State
     const initialValue = ref(props.modelValue ?? getCurrentDate());
 
@@ -312,8 +327,8 @@ export default defineComponent({
       }
     }
 
-    function formatTimeAlt(value?: Date): string {
-      return value?.toLocaleString(navigator.language, {
+    function formatTimeAlt(value: DateTimePickerModelValue): string {
+      return value?.toLocaleString(resolvedLocale.value, {
         timeStyle: 'short',
         hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
         timeZone: 'UTC',
@@ -322,16 +337,23 @@ export default defineComponent({
 
     return {
       root,
+      rootStyles,
+
       inputBox,
       inputBoxRoot,
+
       popover,
       popoverState,
-      rootStyles,
       popoverStyles,
+
+      resolvedFormat,
+      resolvedLocale,
+
       initialValue,
       proxyModelValue,
       draftModelValue,
       isInvalidDraftModelValue,
+
       apply,
       reset,
       openPopover,

package/src/components/or-time-range-picker-v3/OrTimeRangePicker.vue

@@ -34,7 +34,8 @@
         v-dropdown-open="() => openPopover('from')"
         v-dropdown-close="closePopover"
         :class="['!border-0']"
-        :format="format"
+        :format="resolvedFormat"
+        :locale="resolvedLocale"
         :selected="popover && popover.state === 'open' && selectedControl === 'from'"
         :required="required"
         :readonly="readonly"
@@ -48,7 +49,8 @@
         v-dropdown-open="() => openPopover('to')"
         v-dropdown-close="closePopover"
         :class="['!border-0']"
-        :format="format"
+        :format="resolvedFormat"
+        :locale="resolvedLocale"
         :selected="popover && popover.state === 'open' && selectedControl === 'to'"
         :required="required"
         :readonly="readonly"
@@ -90,8 +92,9 @@
             <OrDateTimePickerTimeSelect
               v-model="draftModelValueFrom"
               :class="['grow']"
-              :initial-value="initialValue[0]"
-              :format="format"
+              :initial-value="initialValueFrom"
+              :format="resolvedFormat"
+              :locale="resolvedLocale"
             />
           </template>
 
@@ -99,8 +102,9 @@
             <OrDateTimePickerTimeSelect
               v-model="draftModelValueTo"
               :class="['grow']"
-              :initial-value="initialValue[1]"
-              :format="format"
+              :initial-value="initialValueTo"
+              :format="resolvedFormat"
+              :locale="resolvedLocale"
             />
           </template>
         </div>
@@ -152,10 +156,10 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
+import { PropType, computed, defineComponent, inject, ref, toRef, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useProxyModelValue, useResponsive } from '../../hooks';
-import { DateTimePickerTimeFormat, getCurrentDate, OrDateTimePickerMobileControl, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader, OrDateTimePickerTimeControl, OrDateTimePickerTimeSelect } from '../or-date-time-picker-v3';
+import { DateTimePickerModelValue, DateTimePickerTimeFormat, Locale, OrDateTimePickerMobileControl, OrDateTimePickerPopoverFooter, OrDateTimePickerPopoverHeader, OrDateTimePickerTimeControl, OrDateTimePickerTimeSelect, TimeFormat, getCurrentDate } from '../or-date-time-picker-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrHintV3 as OrHint } from '../or-hint-v3';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
@@ -163,7 +167,8 @@ import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import { InputBoxSize, 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 { TimeRangePicker, TimeRangePickerPopover } from './styles';
+import * as Styles from './styles';
+import { TimeRangePickerModelValue } from './types';
 
 export default defineComponent({
   name: 'OrTimeRangePicker',
@@ -195,13 +200,18 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Object as PropType<[Date, Date]>,
+      type: undefined as unknown as PropType<TimeRangePickerModelValue>,
       default: undefined,
     },
 
     format: {
       type: String as PropType<`${DateTimePickerTimeFormat}`>,
-      default: () => DateTimePickerTimeFormat.Auto,
+      default: undefined,
+    },
+
+    locale: {
+      type: String,
+      default: undefined,
     },
 
     size: {
@@ -262,35 +272,45 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
+    const rootStyles = computed(() => [
+      'or-time-range-picker-v3',
+      ...Styles.TimeRangePicker,
+    ]);
+
     const inputBox = ref<InstanceType<typeof OrInputBox>>();
     const inputBoxRoot = computed(() => inputBox.value?.root);
 
     const popover = ref<InstanceType<typeof OrPopover>>();
     const popoverState = computed(() => popover.value?.state);
 
-    // Styles
-    const rootStyles = computed(() => [
-      'or-time-range-picker-v3',
-      ...TimeRangePicker,
-    ]);
-
     const popoverStyles = computed(() => [
       'or-time-range-picker-popover-v3',
-      ...TimeRangePickerPopover,
+      ...Styles.TimeRangePickerPopover,
     ]);
 
+    // Options
+    const resolvedFormat = computed(() => {
+      return props.format ?? inject(TimeFormat, DateTimePickerTimeFormat.Auto);
+    });
+
+    const resolvedLocale = computed(() => {
+      return props.locale ?? inject(Locale, navigator.language);
+    });
+
     // State
-    const initialValue = ref(props.modelValue ?? [getCurrentDate(), getCurrentDate()]);
+    const initialValueFrom = ref(props.modelValue?.[0] ?? getCurrentDate());
+    const initialValueTo = ref(props.modelValue?.[1] ?? getCurrentDate());
 
     watch(() => props.modelValue, (value) => {
-      initialValue.value = value ?? [getCurrentDate(), getCurrentDate()];
+      initialValueFrom.value = value?.[0] ?? getCurrentDate();
+      initialValueTo.value = value?.[1] ?? getCurrentDate();
     });
 
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
-    const draftModelValue = ref<[Date | undefined, Date | undefined]>(proxyModelValue.value ?? [undefined, undefined]);
+    const draftModelValue = ref<NonNullable<TimeRangePickerModelValue>>(proxyModelValue.value ?? [undefined, undefined]);
 
     watch(proxyModelValue, (value) => {
       draftModelValue.value = value ?? [undefined, undefined];
@@ -330,7 +350,7 @@ export default defineComponent({
 
     // Methods
     function apply(): void {
-      proxyModelValue.value = draftModelValue.value as [Date, Date];
+      proxyModelValue.value = draftModelValue.value;
     }
 
     function reset(): void {
@@ -357,8 +377,8 @@ export default defineComponent({
       }
     }
 
-    function formatTimeAlt(value?: Date): string {
-      return value?.toLocaleString(navigator.language, {
+    function formatTimeAlt(value: DateTimePickerModelValue): string {
+      return value?.toLocaleString(resolvedLocale.value, {
         timeStyle: 'short',
         hourCycle: props.format !== DateTimePickerTimeFormat.Auto ? props.format : undefined,
         timeZone: 'UTC',
@@ -370,24 +390,34 @@ export default defineComponent({
 
     return {
       root,
+      rootStyles,
+
       inputBox,
       inputBoxRoot,
+
       popover,
       popoverState,
-      rootStyles,
       popoverStyles,
-      initialValue,
+
+      resolvedFormat,
+      resolvedLocale,
+
+      initialValueFrom,
+      initialValueTo,
+
       proxyModelValue,
       draftModelValue,
       draftModelValueFrom,
       draftModelValueTo,
       selectedControl,
       isInvalidDraftModelValue,
+
       apply,
       reset,
       openPopover,
       closePopover,
       formatTimeAlt,
+
       isDesktop,
       isMobile,
     };

package/src/components/or-time-range-picker-v3/index.ts

@@ -1 +1,2 @@
 export { default as OrTimeRangePickerV3 } from './OrTimeRangePicker.vue';
+export * from './types';

package/src/components/or-time-range-picker-v3/types.ts

@@ -0,0 +1,3 @@
+import { DateTimePickerModelValue } from '../or-date-time-picker-v3';
+
+export type TimeRangePickerModelValue = [DateTimePickerModelValue, DateTimePickerModelValue] | null | undefined;

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

@@ -1,5 +0,0 @@
-export declare enum DateTimePickerTimeFormat {
-    Auto = "auto",
-    H12 = "h12",
-    H23 = "h23"
-}

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

@@ -1,8 +0,0 @@
-var DateTimePickerTimeFormat;
-(function (DateTimePickerTimeFormat) {
-  DateTimePickerTimeFormat["Auto"] = "auto";
-  DateTimePickerTimeFormat["H12"] = "h12";
-  DateTimePickerTimeFormat["H23"] = "h23";
-})(DateTimePickerTimeFormat || (DateTimePickerTimeFormat = {}));
-
-export { DateTimePickerTimeFormat };

package/dist/bundled/v3/components/OrDateFormatV3-3000643b.js

@@ -1,49 +0,0 @@
-import { openBlock, createElementBlock, normalizeClass, toDisplayString } from 'vue';
-import { defineComponent, ref, computed } from 'vue-demi';
-import { f as formatDate } from './OrDateTimePickerV3-84c0fee3.js';
-
-const DateFormat = [
-// Layout
-'inline'];
-
-var script = defineComponent({
-  name: 'OrDateFormat',
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: Date,
-      default: undefined
-    },
-    placeholder: {
-      type: String,
-      default: undefined
-    }
-  },
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-date-format-v3', ...DateFormat]);
-    return {
-      root,
-      rootStyles,
-      formatDate
-    };
-  }
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: 'root',
-    class: normalizeClass(_ctx.rootStyles)
-  }, toDisplayString(_ctx.modelValue ? _ctx.formatDate(_ctx.modelValue) : _ctx.placeholder), 3 /* TEXT, CLASS */);
-}
-
-script.render = render;
-script.__file = "src/components/or-date-format-v3/OrDateFormat.vue";
-
-export { DateFormat as D, script as s };

package/dist/bundled/v3/components/OrDateTimeFormatV3-1ff1795b.js

@@ -1,54 +0,0 @@
-import { openBlock, createElementBlock, normalizeClass, toDisplayString } from 'vue';
-import { defineComponent, ref, computed } from 'vue-demi';
-import { D as DateTimePickerTimeFormat, f as formatDate, i as formatTime } from './OrDateTimePickerV3-84c0fee3.js';
-
-const DateTimeFormat = [
-// Layout
-'inline'];
-
-var script = defineComponent({
-  name: 'OrDateTimeFormat',
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: Date,
-      default: undefined
-    },
-    timeFormat: {
-      type: String,
-      default: () => DateTimePickerTimeFormat.Auto
-    },
-    placeholder: {
-      type: String,
-      default: undefined
-    }
-  },
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-date-time-format-v3', ...DateTimeFormat]);
-    return {
-      root,
-      rootStyles,
-      formatDate,
-      formatTime
-    };
-  }
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: 'root',
-    class: normalizeClass(_ctx.rootStyles)
-  }, toDisplayString(_ctx.modelValue ? `${_ctx.formatDate(_ctx.modelValue)} ${_ctx.formatTime(_ctx.modelValue, _ctx.timeFormat)}` : _ctx.placeholder), 3 /* TEXT, 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/props.d.ts

@@ -1,5 +0,0 @@
-export declare enum DateTimePickerTimeFormat {
-    Auto = "auto",
-    H12 = "h12",
-    H23 = "h23"
-}

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

@@ -1 +0,0 @@
-export { D as DateTimePickerTimeFormat } from '../OrDateTimePickerV3-84c0fee3.js';

package/dist/bundled/v3/components/OrTimeFormatV3-1a6191e2.js

@@ -1,53 +0,0 @@
-import { openBlock, createElementBlock, normalizeClass, toDisplayString } from 'vue';
-import { defineComponent, ref, computed } from 'vue-demi';
-import { D as DateTimePickerTimeFormat, i as formatTime } from './OrDateTimePickerV3-84c0fee3.js';
-
-const TimeFormat = [
-// Layout
-'inline'];
-
-var script = defineComponent({
-  name: 'OrTimeFormat',
-  model: {
-    prop: 'modelValue',
-    event: 'update:modelValue'
-  },
-  props: {
-    modelValue: {
-      type: Date,
-      default: undefined
-    },
-    format: {
-      type: String,
-      default: () => DateTimePickerTimeFormat.Auto
-    },
-    placeholder: {
-      type: String,
-      default: undefined
-    }
-  },
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-time-format-v3', ...TimeFormat]);
-    return {
-      root,
-      rootStyles,
-      formatTime
-    };
-  }
-});
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: 'root',
-    class: normalizeClass(_ctx.rootStyles)
-  }, toDisplayString(_ctx.modelValue ? _ctx.formatTime(_ctx.modelValue, _ctx.format) : _ctx.placeholder), 3 /* TEXT, CLASS */);
-}
-
-script.render = render;
-script.__file = "src/components/or-time-format-v3/OrTimeFormat.vue";
-
-export { TimeFormat as T, script as s };

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

@@ -1,5 +0,0 @@
-export declare enum DateTimePickerTimeFormat {
-    Auto = "auto",
-    H12 = "h12",
-    H23 = "h23"
-}