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

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-select/OrDateTimePickerDateSelect.vue

@@ -32,11 +32,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
 import { useProxyModelValue } from '../../../../hooks';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
-import { FilterFunction } from '../../types';
-import { DateTimePickerDateSelect, DateTimePickerDateSelectButtonGroup, DateTimePickerDateSelectButtonGroupCurrentDateItem, DateTimePickerDateSelectButtonGroupDateItem, DateTimePickerDateSelectButtonGroupInRangeDateItem, DateTimePickerDateSelectButtonGroupWeekdayItem } from './styles';
+import { DateTimePickerDateFormat, DateTimePickerFilterFunction, DateTimePickerModelValue } from '../../types';
+import * as Styles from './styles';
 
 export default defineComponent({
   name: 'OrDateTimePickerDateSelect',
@@ -52,7 +52,7 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Date,
+      type: undefined as unknown as PropType<DateTimePickerModelValue>,
       default: undefined,
     },
 
@@ -61,8 +61,18 @@ export default defineComponent({
       required: true,
     },
 
+    format: {
+      type: String as PropType<`${DateTimePickerDateFormat}`>,
+      required: true,
+    },
+
+    locale: {
+      type: String,
+      required: true,
+    },
+
     dateFilter: {
-      type: Function as PropType<FilterFunction>,
+      type: Function as PropType<DateTimePickerFilterFunction>,
       default: undefined,
     },
 
@@ -86,33 +96,32 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
-    // Styles
     const rootStyles = computed(() => [
       'or-date-time-picker-date-select-v3',
-      ...DateTimePickerDateSelect,
+      ...Styles.DateTimePickerDateSelect,
     ]);
 
     const buttonGroupStyles = computed(() => [
-      ...DateTimePickerDateSelectButtonGroup,
+      ...Styles.DateTimePickerDateSelectButtonGroup,
     ]);
 
     const buttonGroupWeekdayItemStyles = computed(() => [
-      ...DateTimePickerDateSelectButtonGroupWeekdayItem,
+      ...Styles.DateTimePickerDateSelectButtonGroupWeekdayItem,
     ]);
 
     const buttonGroupDateItemStyles = computed(() => [
-      ...DateTimePickerDateSelectButtonGroupDateItem,
+      ...Styles.DateTimePickerDateSelectButtonGroupDateItem,
     ]);
 
     const buttonGroupCurrentDateItemStyles = computed(() => [
-      ...DateTimePickerDateSelectButtonGroupCurrentDateItem,
+      ...Styles.DateTimePickerDateSelectButtonGroupCurrentDateItem,
     ]);
 
     const buttonGroupInRangeDateItemStyles = computed(() => [
-      ...DateTimePickerDateSelectButtonGroupInRangeDateItem,
+      ...Styles.DateTimePickerDateSelectButtonGroupInRangeDateItem,
     ]);
 
     // State
@@ -183,14 +192,14 @@ export default defineComponent({
 
     // Methods
     function formatWeekday(value: Date): string {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         weekday: 'short',
         timeZone: 'UTC',
       });
     }
 
     function formatDay(value: Date): string {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         day: 'numeric',
         timeZone: 'UTC',
       });
@@ -199,14 +208,17 @@ export default defineComponent({
     return {
       root,
       rootStyles,
+
       buttonGroupStyles,
       buttonGroupWeekdayItemStyles,
       buttonGroupDateItemStyles,
       buttonGroupCurrentDateItemStyles,
       buttonGroupInRangeDateItemStyles,
+
       proxyModelValue,
       dayOptions,
       currentDate,
+
       formatWeekday,
       formatDay,
     };

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-mobile-control/OrDateTimePickerMobileControl.vue

@@ -15,7 +15,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
 import { OrLabelV3 as OrLabel } from '../../../or-label-v3';
-import { DateTimePickerMobileControl, DateTimePickerMobileControlContent } from './styles';
+import * as Styles from './styles';
 
 export default defineComponent({
   name: 'OrDateTimePickerMobileControl',
@@ -41,22 +41,22 @@ export default defineComponent({
   ],
 
   setup() {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
-    // Styles
     const rootStyles = computed(() => [
       'or-date-time-picker-mobile-control-v3',
-      ...DateTimePickerMobileControl,
+      ...Styles.DateTimePickerMobileControl,
     ]);
 
     const contentStyles = computed(() => [
-      ...DateTimePickerMobileControlContent,
+      ...Styles.DateTimePickerMobileControlContent,
     ]);
 
     return {
       root,
       rootStyles,
+
       contentStyles,
     };
   },

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-month-select/OrDateTimePickerMonthSelect.vue

@@ -66,14 +66,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
 import { useProxyModelValue } from '../../../../hooks';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { OrIconButtonV3 as OrIconButton } from '../../../or-icon-button-v3';
 import { OrIconV3 as OrIcon } from '../../../or-icon-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../../../or-menu-item-v3';
 import { OrMenuV3 as OrMenu } from '../../../or-menu-v3';
-import { FilterFunction } from '../../types';
+import { DateTimePickerFilterFunction, DateTimePickerModelValue } from '../../types';
 import { DateTimePickerMonthSelect } from './styles';
 
 export default defineComponent({
@@ -94,17 +94,22 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Date,
+      type: undefined as unknown as PropType<NonNullable<DateTimePickerModelValue>>,
+      required: true,
+    },
+
+    locale: {
+      type: String,
       required: true,
     },
 
     yearFilter: {
-      type: Function as PropType<FilterFunction>,
+      type: Function as PropType<DateTimePickerFilterFunction>,
       default: undefined,
     },
 
     monthFilter: {
-      type: Function as PropType<FilterFunction>,
+      type: Function as PropType<DateTimePickerFilterFunction>,
       default: undefined,
     },
   },
@@ -118,26 +123,25 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
-    const yearButton = ref<InstanceType<typeof OrButton>>();
-    const monthButton = ref<InstanceType<typeof OrButton>>();
+    const rootStyles = computed(() => [
+      'or-date-time-picker-month-select-v3',
+      ...DateTimePickerMonthSelect,
+    ]);
 
+    const yearButton = ref<InstanceType<typeof OrButton>>();
     const yearButtonRoot = computed(() => yearButton.value?.root);
+
+    const monthButton = ref<InstanceType<typeof OrButton>>();
     const monthButtonRoot = computed(() => monthButton.value?.root);
 
     const yearMenu = ref<InstanceType<typeof OrMenu>>();
-    const monthMenu = ref<InstanceType<typeof OrMenu>>();
-
     const yearMenuState = computed(() => yearMenu.value?.state);
-    const monthMenuState = computed(() => monthMenu.value?.state);
 
-    // Styles
-    const rootStyles = computed(() => [
-      'or-date-time-picker-month-select-v3',
-      ...DateTimePickerMonthSelect,
-    ]);
+    const monthMenu = ref<InstanceType<typeof OrMenu>>();
+    const monthMenuState = computed(() => monthMenu.value?.state);
 
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
@@ -192,14 +196,14 @@ export default defineComponent({
     }
 
     function formatYear(value: Date): string {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         year: 'numeric',
         timeZone: 'UTC',
       });
     }
 
     function formatMonth(value: Date): string {
-      return value.toLocaleString(navigator.language, {
+      return value.toLocaleString(props.locale, {
         month: 'long',
         timeZone: 'UTC',
       });
@@ -207,20 +211,28 @@ export default defineComponent({
 
     return {
       root,
+      rootStyles,
+
       yearButton,
-      monthButton,
       yearButtonRoot,
+
+      monthButton,
       monthButtonRoot,
+
       yearMenu,
-      monthMenu,
       yearMenuState,
+
+      monthMenu,
       monthMenuState,
-      rootStyles,
+
       proxyModelValue,
+
       yearOptions,
       monthOptions,
+
       goToNextMonth,
       goToPreviousMonth,
+
       formatYear,
       formatMonth,
     };

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-popover-footer/OrDateTimePickerPopoverFooter.vue

@@ -23,7 +23,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
-import { DateTimePickerPopoverFooter } from './styles';
+import * as Styles from './styles';
 
 export default defineComponent({
   name: 'OrDateTimePickerPopoverFooter',
@@ -49,13 +49,12 @@ export default defineComponent({
   ],
 
   setup() {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
-    // Styles
     const rootStyles = computed(() => [
       'or-date-time-picker-popover-footer-v3',
-      ...DateTimePickerPopoverFooter,
+      ...Styles.DateTimePickerPopoverFooter,
     ]);
 
     return {

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-popover-header/OrDateTimePickerPopoverHeader.vue

@@ -9,7 +9,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue-demi';
-import { DateTimePickerPopoverHeader } from './styles';
+import * as Styles from './styles';
 
 export default defineComponent({
   name: 'OrDateTimePickerPopoverHeader',
@@ -19,13 +19,12 @@ export default defineComponent({
   ],
 
   setup() {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
-    // Styles
     const rootStyles = computed(() => [
       'or-date-time-picker-popover-header-v3',
-      ...DateTimePickerPopoverHeader,
+      ...Styles.DateTimePickerPopoverHeader,
     ]);
 
     return {

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-control/OrDateTimePickerTimeControl.vue

@@ -7,9 +7,10 @@
     :required="required"
     :readonly="readonly"
     :disabled="disabled"
+    @keydown.prevent
   >
     <template v-if="proxyModelValue">
-      {{ formatTime(proxyModelValue, format) }}
+      {{ formatTime(proxyModelValue, format, locale) }}
     </template>
 
     <template v-else>
@@ -26,9 +27,9 @@
 <script lang="ts">
 import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
 import { useProxyModelValue } from '../../../../hooks';
-import { DateTimePickerTimeFormat } from '../../props';
+import { DateTimePickerModelValue, DateTimePickerTimeFormat } from '../../types';
 import { formatTime, getTimePlaceholder } from '../../utils';
-import { DateTimePickerTimeControl, DateTimePickerTimeControlPlaceholder } from './styles';
+import * as Styles from './styles';
 
 export default defineComponent({
   name: 'OrDateTimePickerTimeControl',
@@ -40,13 +41,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,
+      required: true,
+    },
+
+    locale: {
+      type: String,
+      required: true,
     },
 
     selected: {
@@ -75,26 +81,29 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
-    // Styles
     const rootStyles = computed(() => [
       'or-date-time-picker-time-control-v3',
-      ...DateTimePickerTimeControl,
+      ...Styles.DateTimePickerTimeControl,
     ]);
 
     const placeholderStyles = computed(() => [
-      ...DateTimePickerTimeControlPlaceholder,
+      ...Styles.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,
+
       placeholderStyles,
 
       proxyModelValue,

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue

@@ -58,12 +58,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi';
 import { useProxyModelValue } from '../../../../hooks';
 import { OrButtonV3 as OrButton } from '../../../or-button-v3';
-import { DateTimePickerTimeFormat } from '../../props';
-import { FilterFunction } from '../../types';
-import { DateTimePickerTimeSelect, DateTimePickerTimeSelectButtonGroup, DateTimePickerTimeSelectButtonGroupItem } from './styles';
+import { DateTimePickerFilterFunction, DateTimePickerModelValue, DateTimePickerTimeFormat } from '../../types';
+import * as Styles from './styles';
 
 export default defineComponent({
   name: 'OrDateTimePickerTimeSelect',
@@ -79,7 +78,7 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Date,
+      type: undefined as unknown as PropType<DateTimePickerModelValue>,
       default: undefined,
     },
 
@@ -90,16 +89,21 @@ export default defineComponent({
 
     format: {
       type: String as PropType<`${DateTimePickerTimeFormat}`>,
-      default: () => DateTimePickerTimeFormat.Auto,
+      required: true,
+    },
+
+    locale: {
+      type: String,
+      required: true,
     },
 
     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,
     },
   },
@@ -113,21 +117,20 @@ export default defineComponent({
   ],
 
   setup(props, context) {
-    // Refs
+    // Refs & Styles
     const root = ref<HTMLElement>();
 
-    // Styles
     const rootStyles = computed(() => [
       'or-date-time-picker-time-select-v3',
-      ...DateTimePickerTimeSelect,
+      ...Styles.DateTimePickerTimeSelect,
     ]);
 
     const buttonGroupStyles = computed(() => [
-      ...DateTimePickerTimeSelectButtonGroup,
+      ...Styles.DateTimePickerTimeSelectButtonGroup,
     ]);
 
     const buttonGroupItemStyles = computed(() => [
-      ...DateTimePickerTimeSelectButtonGroupItem,
+      ...Styles.DateTimePickerTimeSelectButtonGroupItem,
     ]);
 
     // State
@@ -137,7 +140,7 @@ export default defineComponent({
       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;
         }
 
@@ -217,11 +220,11 @@ export default defineComponent({
 
     // Methods
     function formatHours(value: Date): string {
-      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: Date): string {
@@ -231,13 +234,16 @@ export default defineComponent({
     return {
       root,
       rootStyles,
+
       buttonGroupStyles,
       buttonGroupItemStyles,
+
       proxyModelValue,
       proxyTimeFormat,
       hoursRange,
       hoursOptions,
       minutesOptions,
+
       formatHours,
       formatMinutes,
     };

package/src/components/or-date-time-picker-v3/tokens.ts

@@ -0,0 +1,4 @@
+export const DateFormat = Symbol();
+export const TimeFormat = Symbol();
+
+export const Locale = Symbol();

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

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

package/src/components/or-date-time-picker-v3/utils/formatDate.ts

@@ -1,6 +1,8 @@
-export function formatDate(value: Date): string {
-  return value.toLocaleString(navigator.language, {
-    dateStyle: 'short',
+import { DateTimePickerDateFormat } from '../types';
+
+export function formatDate(value: Date, format: `${DateTimePickerDateFormat}`, locale: string): string {
+  return value.toLocaleString(locale, {
+    dateStyle: format,
     timeZone: 'UTC',
   });
 }

package/src/components/or-date-time-picker-v3/utils/formatTime.ts

@@ -1,7 +1,7 @@
-import { DateTimePickerTimeFormat } from '../props';
+import { DateTimePickerTimeFormat } from '../types';
 
-export function formatTime(value: Date, format?: `${DateTimePickerTimeFormat}`): string {
-  return value.toLocaleString(navigator.language, {
+export function formatTime(value: Date, format: `${DateTimePickerTimeFormat}`, locale: string): string {
+  return value.toLocaleString(locale, {
     timeStyle: 'short',
     hourCycle: format !== DateTimePickerTimeFormat.Auto ? format : undefined,
     timeZone: 'UTC',

package/src/components/or-date-time-picker-v3/utils/getDatePlaceholder.ts

@@ -1,11 +1,42 @@
-export function getDatePlaceholder(): string {
-  const sample = new Date(Date.UTC(1111, 1, 3, 4, 5)).toLocaleString(navigator.language, {
-    dateStyle: 'short',
+import { DateTimePickerDateFormat } from '../types';
+
+export function getDatePlaceholder(format: `${DateTimePickerDateFormat}`, locale: string): string {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    dateStyle: format,
     timeZone: 'UTC',
   });
 
-  return sample
-    .replace(/1/g, 'Y')
-    .replace(/02/, 'MM').replace(/2/, 'M')
-    .replace(/03/g, 'DD').replace(/3/, 'D');
+  return formatter.formatToParts(Date.UTC(0, 0)).reduce((accumulator, part) => {
+    switch (part.type) {
+      case 'year':
+        return accumulator + part.value
+          .replace(/^\d{2}$/, 'YY')
+          .replace(/^\d{4}$/, 'YYYY');
+
+      case 'month':
+        switch (format) {
+          case 'short':
+            return accumulator + part.value
+              .replace(/^\d{1}$/, 'M')
+              .replace(/^\d{2}$/, 'MM');
+
+          case 'medium':
+            return accumulator + 'MMM';
+
+          case 'long':
+            return accumulator + 'MMMM';
+
+          default:
+            throw new Error();
+        }
+
+      case 'day':
+        return accumulator + part.value
+          .replace(/^\d{1}$/, 'D')
+          .replace(/^\d{2}$/, 'DD');
+
+      default:
+        return accumulator + part.value;
+    }
+  }, '');
 }

package/src/components/or-date-time-picker-v3/utils/getTimePlaceholder.ts

@@ -1,14 +1,29 @@
-import { DateTimePickerTimeFormat } from '../props';
+import { DateTimePickerTimeFormat } from '../types';
 
-export function getTimePlaceholder(format?: `${DateTimePickerTimeFormat}`): string {
-  const sample = new Date(Date.UTC(1, 1, 3, 4, 5)).toLocaleString(navigator.language, {
+export function getTimePlaceholder(format: `${DateTimePickerTimeFormat}`, locale: string): string {
+  const formatter = new Intl.DateTimeFormat(locale, {
     timeStyle: 'short',
     hourCycle: format !== DateTimePickerTimeFormat.Auto ? format : undefined,
     timeZone: 'UTC',
   });
 
-  return sample
-    .replace(/04/, 'HH').replace(/4/, 'H')
-    .replace(/05/, 'MM').replace(/5/, 'M')
-    .replace(/AM|PM/, 'A');
+  return formatter.formatToParts(Date.UTC(0, 0)).reduce((accumulator, part) => {
+    switch (part.type) {
+      case 'hour':
+        return accumulator + part.value
+          .replace(/^\d{1}$/, 'H')
+          .replace(/^\d{2}$/, 'HH');
+
+      case 'minute':
+        return accumulator + part.value
+          .replace(/^\d{1}$/, 'M')
+          .replace(/^\d{2}$/, 'MM');
+
+      case 'dayPeriod':
+        return accumulator + 'A';
+
+      default:
+        return accumulator + part.value;
+    }
+  }, '');
 }