@onereach/ui-components 7.0.1 → 7.0.2-beta.3543.0

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

@@ -18,10 +18,10 @@
         :class="{
           [buttonGroupDateItemStyles.join(' ')]: true,
           [buttonGroupCurrentDateItemStyles.join(' ')]: Number(value) === Number(currentDate) && Number(value) !== Number(proxyModelValue),
-          'invisible': value.getUTCMonth() !== proxyModelValue.getUTCMonth(),
+          [buttonGroupInRangeDateItemStyles.join(' ')]: (rangeStart && Number(value) > Number(rangeStart)) && (rangeEnd && Number(value) < Number(rangeEnd)),
         }"
-        :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
-        :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
+        :variant="Number(value) === Number(proxyModelValue) || (rangeStart && Number(value) === Number(rangeStart)) || (rangeEnd && Number(value) === Number(rangeEnd)) ? 'contained' : 'text'"
+        :color="Number(value) === Number(proxyModelValue) || (rangeStart && Number(value) === Number(rangeStart)) || (rangeEnd && Number(value) === Number(rangeEnd)) ? 'primary' : 'inherit'"
         :disabled="dateFilter && !dateFilter(value)"
         @click.stop="proxyModelValue = value"
       >
@@ -36,11 +36,9 @@ import { computed, defineComponent, PropType, 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, DateTimePickerDateSelectButtonGroupWeekdayItem } from './styles';
+import { DateTimePickerDateSelect, DateTimePickerDateSelectButtonGroup, DateTimePickerDateSelectButtonGroupCurrentDateItem, DateTimePickerDateSelectButtonGroupDateItem, DateTimePickerDateSelectButtonGroupInRangeDateItem, DateTimePickerDateSelectButtonGroupWeekdayItem } from './styles';
 
 export default defineComponent({
-  name: 'OrDateTimePickerDateSelect',
-
   components: {
     OrButton,
   },
@@ -65,6 +63,16 @@ export default defineComponent({
       type: Function as PropType<FilterFunction>,
       default: undefined,
     },
+
+    rangeStart: {
+      type: Date,
+      default: undefined,
+    },
+
+    rangeEnd: {
+      type: Date,
+      default: undefined,
+    },
   },
 
   emits: [
@@ -101,26 +109,28 @@ export default defineComponent({
       ...DateTimePickerDateSelectButtonGroupCurrentDateItem,
     ]);
 
+    const buttonGroupInRangeDateItemStyles = computed(() => [
+      ...DateTimePickerDateSelectButtonGroupInRangeDateItem,
+    ]);
+
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
-      defaultValue: toRef(props, 'initialValue'),
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const dayOptions = computed(() => {
       const monthStartDate = new Date(Date.UTC(
-        proxyModelValue.value.getUTCFullYear(),
-        proxyModelValue.value.getUTCMonth(),
+        props.initialValue.getUTCFullYear(),
+        props.initialValue.getUTCMonth(),
         1,
-        proxyModelValue.value.getUTCHours(),
-        proxyModelValue.value.getUTCMinutes(),
+        props.initialValue.getUTCHours(),
+        props.initialValue.getUTCMinutes(),
       ));
 
       const monthEndDate = new Date(Date.UTC(
-        proxyModelValue.value.getUTCFullYear(),
-        proxyModelValue.value.getUTCMonth() + 1,
+        props.initialValue.getUTCFullYear(),
+        props.initialValue.getUTCMonth() + 1,
         0,
-        proxyModelValue.value.getUTCHours(),
-        proxyModelValue.value.getUTCMinutes(),
+        props.initialValue.getUTCHours(),
+        props.initialValue.getUTCMinutes(),
       ));
 
       const calendarStartDate = new Date(Date.UTC(
@@ -161,10 +171,10 @@ export default defineComponent({
     const currentDate = computed(() => {
       const value = new Date();
 
-      value.setUTCHours(proxyModelValue.value.getUTCHours());
-      value.setUTCMinutes(proxyModelValue.value.getUTCMinutes());
-      value.setUTCSeconds(proxyModelValue.value.getUTCSeconds());
-      value.setUTCMilliseconds(proxyModelValue.value.getUTCMilliseconds());
+      value.setUTCHours(props.initialValue.getUTCHours());
+      value.setUTCMinutes(props.initialValue.getUTCMinutes());
+      value.setUTCSeconds(props.initialValue.getUTCSeconds());
+      value.setUTCMilliseconds(props.initialValue.getUTCMilliseconds());
 
       return value;
     });
@@ -191,6 +201,7 @@ export default defineComponent({
       buttonGroupWeekdayItemStyles,
       buttonGroupDateItemStyles,
       buttonGroupCurrentDateItemStyles,
+      buttonGroupInRangeDateItemStyles,
       proxyModelValue,
       dayOptions,
       currentDate,

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-select/styles.ts

@@ -18,7 +18,8 @@ export const DateTimePickerDateSelectButtonGroup: string[] = [
   'h-[262px]',
 
   // Spacing
-  'gap-xs',
+  'mx-[-2px]',
+  'my-[-2px]',
 ];
 
 export const DateTimePickerDateSelectButtonGroupWeekdayItem: string[] = [
@@ -29,6 +30,9 @@ export const DateTimePickerDateSelectButtonGroupWeekdayItem: string[] = [
   'interactivity-default',
 
   // Spacing
+  'mx-[2px]',
+  'my-[2px]',
+
   'px-sm',
   'py-sm',
 
@@ -45,6 +49,9 @@ export const DateTimePickerDateSelectButtonGroupDateItem: string[] = [
   '!min-w-fit',
 
   // Spacing
+  'mx-[2px]',
+  'my-[2px]',
+
   '!px-sm',
   '!py-sm',
 
@@ -60,3 +67,16 @@ export const DateTimePickerDateSelectButtonGroupCurrentDateItem: string[] = [
   'theme-outline-1-primary',
   'dark:theme-outline-1-primary-dark',
 ];
+
+export const DateTimePickerDateSelectButtonGroupInRangeDateItem: string[] = [
+  // Spacing
+  '!mx-none',
+  '!px-[10px]',
+
+  // Shape
+  '!rounded-none',
+
+  // Theme
+  'theme-background-primary-translucent-2',
+  'dark:theme-background-primary-translucent-2-dark',
+];

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

@@ -2,6 +2,7 @@
   <div
     ref="root"
     :class="rootStyles"
+    :selected="selected ? '' : null"
   >
     <OrLabel>{{ label }}</OrLabel>
 
@@ -17,8 +18,6 @@ import { OrLabelV3 as OrLabel } from '../../../or-label-v3';
 import { DateTimePickerMobileControl, DateTimePickerMobileControlContent } from './styles';
 
 export default defineComponent({
-  name: 'OrDateTimePickerMobileControl',
-
   components: {
     OrLabel,
   },
@@ -28,6 +27,11 @@ export default defineComponent({
       type: String,
       required: true,
     },
+
+    selected: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   expose: [

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-mobile-control/styles.ts

@@ -2,15 +2,22 @@ export const DateTimePickerMobileControl: string[] = [
   // Layout
   'layout-column',
 
+  // Interactivity
+  'interactivity-auto',
+
   // Spacing
   'gap-xs',
+
+  // Theme
+  'theme-foreground-outline',
+  'dark:theme-foreground-outline-dark',
+
+  // Theme (selected)
+  'selected:theme-foreground-default',
+  'dark:selected:theme-foreground-default-dark',
 ];
 
 export const DateTimePickerMobileControlContent: string[] = [
   // Typography
   'typography-headline-1',
-
-  // Theme
-  'theme-foreground-outline',
-  'dark:theme-foreground-outline-dark',
 ];

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

@@ -77,8 +77,6 @@ import { FilterFunction } from '../../types';
 import { DateTimePickerMonthSelect } from './styles';
 
 export default defineComponent({
-  name: 'OrDateTimePickerMonthSelect',
-
   components: {
     OrButton,
     OrIcon,
@@ -94,11 +92,6 @@ export default defineComponent({
 
   props: {
     modelValue: {
-      type: Date,
-      default: undefined,
-    },
-
-    initialValue: {
       type: Date,
       required: true,
     },
@@ -145,9 +138,7 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
-      defaultValue: toRef(props, 'initialValue'),
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const yearOptions = computed(() => {
       return Array.from({ length: 11 }).map((_value, index, { length }) => {

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

@@ -26,8 +26,6 @@ import { OrButtonV3 as OrButton } from '../../../or-button-v3';
 import { DateTimePickerPopoverFooter } from './styles';
 
 export default defineComponent({
-  name: 'OrDateTimePickerPopoverFooter',
-
   components: {
     OrButton,
   },

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

@@ -12,8 +12,6 @@ import { computed, defineComponent, ref } from 'vue-demi';
 import { DateTimePickerPopoverHeader } from './styles';
 
 export default defineComponent({
-  name: 'OrDateTimePickerPopoverHeader',
-
   expose: [
     'root',
   ],

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

@@ -30,8 +30,6 @@ import { formatTime, getTimePlaceholder } from '../../utils';
 import { DateTimePickerTimeControl, DateTimePickerTimeControlPlaceholder } from './styles';
 
 export default defineComponent({
-  name: 'OrDateTimePickerTimeControl',
-
   model: {
     prop: 'modelValue',
     event: 'update:modelValue',

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

@@ -66,8 +66,6 @@ import { FilterFunction } from '../../types';
 import { DateTimePickerTimeSelect, DateTimePickerTimeSelectButtonGroup, DateTimePickerTimeSelectButtonGroupItem } from './styles';
 
 export default defineComponent({
-  name: 'OrDateTimePickerTimeSelect',
-
   components: {
     OrButton,
   },
@@ -131,9 +129,7 @@ export default defineComponent({
     ]);
 
     // State
-    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
-      defaultValue: toRef(props, 'initialValue'),
-    });
+    const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
 
     const proxyTimeFormat = computed(() => {
       if (props.format === DateTimePickerTimeFormat.Auto) {
@@ -149,28 +145,28 @@ export default defineComponent({
       return props.format;
     });
 
-    const hoursRange = ref<'am' | 'pm'>(proxyModelValue.value.getUTCHours() < 12 ? 'am' : 'pm');
+    const hoursRange = ref<'am' | 'pm'>(props.initialValue.getUTCHours() < 12 ? 'am' : 'pm');
 
     watch(hoursRange, (value) => {
       switch (value) {
         case 'am':
           proxyModelValue.value = new Date(Date.UTC(
-            proxyModelValue.value.getUTCFullYear(),
-            proxyModelValue.value.getUTCMonth(),
-            proxyModelValue.value.getUTCDate(),
-            proxyModelValue.value.getUTCHours() - 12,
-            proxyModelValue.value.getUTCMinutes(),
+            props.initialValue.getUTCFullYear(),
+            props.initialValue.getUTCMonth(),
+            props.initialValue.getUTCDate(),
+            props.initialValue.getUTCHours() - 12,
+            props.initialValue.getUTCMinutes(),
           ));
 
           break;
 
         case 'pm':
           proxyModelValue.value = new Date(Date.UTC(
-            proxyModelValue.value.getUTCFullYear(),
-            proxyModelValue.value.getUTCMonth(),
-            proxyModelValue.value.getUTCDate(),
-            proxyModelValue.value.getUTCHours() + 12,
-            proxyModelValue.value.getUTCMinutes(),
+            props.initialValue.getUTCFullYear(),
+            props.initialValue.getUTCMonth(),
+            props.initialValue.getUTCDate(),
+            props.initialValue.getUTCHours() + 12,
+            props.initialValue.getUTCMinutes(),
           ));
 
           break;
@@ -182,11 +178,11 @@ export default defineComponent({
         const value = index;
 
         return new Date(Date.UTC(
-          proxyModelValue.value.getUTCFullYear(),
-          proxyModelValue.value.getUTCMonth(),
-          proxyModelValue.value.getUTCDate(),
+          props.initialValue.getUTCFullYear(),
+          props.initialValue.getUTCMonth(),
+          props.initialValue.getUTCDate(),
           value,
-          proxyModelValue.value.getUTCMinutes(),
+          props.initialValue.getUTCMinutes(),
         ));
       }).filter((value) => {
         if (proxyTimeFormat.value === DateTimePickerTimeFormat.H23) {
@@ -208,10 +204,10 @@ export default defineComponent({
         const value = index;
 
         return new Date(Date.UTC(
-          proxyModelValue.value.getUTCFullYear(),
-          proxyModelValue.value.getUTCMonth(),
-          proxyModelValue.value.getUTCDate(),
-          proxyModelValue.value.getUTCHours(),
+          props.initialValue.getUTCFullYear(),
+          props.initialValue.getUTCMonth(),
+          props.initialValue.getUTCDate(),
+          props.initialValue.getUTCHours(),
           value,
         ));
       });

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

@@ -0,0 +1,9 @@
+export function getNextMonthDate(): Date {
+  const currentDate = new Date();
+
+  return new Date(Date.UTC(
+    currentDate.getUTCFullYear(),
+    currentDate.getUTCMonth() + 1,
+    currentDate.getUTCDate()
+  ));
+}

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

@@ -2,4 +2,5 @@ export * from './formatDate';
 export * from './formatTime';
 export * from './getCurrentDate';
 export * from './getDatePlaceholder';
+export * from './getNextMonthDate';
 export * from './getTimePlaceholder';

package/src/components/or-input-box-v3/styles.ts

@@ -33,8 +33,8 @@ export const InputBoxVariants: Record<InputBoxVariant, string[]> = {
     'dark:theme-outline-2-transparent',
 
     // Theme (focus)
-    'focus-within:theme-background-primary-translucent',
-    'dark:focus-within:theme-background-primary-translucent-dark',
+    'focus-within:theme-background-primary-translucent-1',
+    'dark:focus-within:theme-background-primary-translucent-1-dark',
 
     'focus-within:theme-border-1-primary',
     'dark:focus-within:theme-border-1-primary-dark',
@@ -43,8 +43,8 @@ export const InputBoxVariants: Record<InputBoxVariant, string[]> = {
     'dark:focus-within:theme-outline-2-primary-dark',
 
     // Theme (read-only)
-    'read-only:theme-background-primary-translucent',
-    'dark:read-only:theme-background-primary-translucent-dark',
+    'read-only:theme-background-primary-translucent-1',
+    'dark:read-only:theme-background-primary-translucent-1-dark',
 
     'read-only:!border-transparent',
     'dark:read-only:!border-transparent',
@@ -53,8 +53,8 @@ export const InputBoxVariants: Record<InputBoxVariant, string[]> = {
     'invalid:theme-preset-3-error',
     'dark:invalid:theme-preset-3-error-dark',
 
-    'invalid:theme-background-error-translucent',
-    'dark:invalid:theme-background-error-translucent-dark',
+    'invalid:theme-background-error-translucent-1',
+    'dark:invalid:theme-background-error-translucent-1-dark',
 
     'invalid:theme-foreground-default',
     'dark:invalid:theme-foreground-default-dark',
@@ -66,8 +66,8 @@ export const InputBoxVariants: Record<InputBoxVariant, string[]> = {
     'dark:invalid:theme-outline-2-transparent',
 
     // Theme (invalid, focus)
-    'invalid:focus-within:theme-background-error-translucent',
-    'dark:invalid:focus-within:theme-background-error-translucent-dark',
+    'invalid:focus-within:theme-background-error-translucent-1',
+    'dark:invalid:focus-within:theme-background-error-translucent-1-dark',
 
     'invalid:focus-within:theme-border-1-error',
     'dark:invalid:focus-within:theme-border-1-error-dark',

package/src/components/or-rich-text-editor-v3/styles.ts

@@ -1,7 +1,7 @@
 export const EditorContainer: string[] = [
   // Colors
   'border-outline',
-  'focus-within:theme-background-primary-translucent',
+  'focus-within:theme-background-primary-translucent-1',
   'focus-within:theme-border-1-primary',
   'focus-within:theme-outline-2-primary',
   // Sizing

package/src/components/or-select-v3/OrSelect.vue

@@ -22,7 +22,7 @@
       ref="inputBox"
       v-dropdown-open="toggle"
       v-dropdown-close="close"
-      :class="[popoverState === 'open' && (popover && popover.isFlipped ? 'rounded-t-0' : 'rounded-b-0')]"
+      :class="[popoverState === 'open' && (popover && popover.isFlipped ? 'rounded-t-none' : 'rounded-b-none')]"
       :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
       :size="size"
       :invalid="!!error"
@@ -249,11 +249,11 @@ import { OrInputV3 as OrInput } from '../or-input-v3';
 import { OrLabelV3 as OrLabel } from '../or-label-v3';
 import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
+import { TagsOverflow } from '../or-tags-v3';
+import { OrSelectMultipleControl, OrSelectSingleControl } from './partials';
 import { SelectSize } from './props';
 import { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectSearchControl } from './styles';
 import { SelectGroupByFunction, SelectOption, SelectSearchFunction, SelectValue } from './types';
-import { TagsOverflow } from '../or-tags-v3';
-import { OrSelectMultipleControl, OrSelectSingleControl } from './partials';
 
 export default defineComponent({
   components: {

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

@@ -19,7 +19,7 @@
 
     <OrInputBox
       ref="inputBox"
-      v-dropdown-open="togglePopover"
+      v-dropdown-open="openPopover"
       v-dropdown-close="closePopover"
       :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
       :size="size"
@@ -29,7 +29,7 @@
     >
       <OrDateTimePickerTimeControl
         v-model="draftModelValue"
-        v-dropdown-open="togglePopover"
+        v-dropdown-open="openPopover"
         v-dropdown-close="closePopover"
         :format="format"
         :required="required"
@@ -47,14 +47,17 @@
         @close="reset()"
       >
         <OrDateTimePickerPopoverHeader>
-          <OrDateTimePickerMobileControl label="Time">
+          <OrDateTimePickerMobileControl
+            :label="'Time'"
+            :selected="true"
+          >
             {{ formatTimeAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
 
         <OrDateTimePickerTimeSelect
           v-model="draftModelValue"
-          :initial-value="initialModelValue"
+          :initial-value="initialValue"
           :format="format"
           :hours-filter="hoursFilter"
           :minutes-filter="minutesFilter"
@@ -120,8 +123,6 @@ import { TimePickerFormat, TimePickerSize } from './props';
 import { TimePicker, TimePickerPopover } from './styles';
 
 export default defineComponent({
-  name: 'OrDateTimePicker',
-
   components: {
     OrDateTimePickerMobileControl,
     OrDateTimePickerPopoverFooter,
@@ -246,7 +247,11 @@ export default defineComponent({
     ]);
 
     // State
-    const initialModelValue = getCurrentDate();
+    const initialValue = ref(props.modelValue ?? getCurrentDate());
+
+    watch(() => props.modelValue, (value) => {
+      initialValue.value = value ?? getCurrentDate();
+    });
 
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit);
     const draftModelValue = ref(proxyModelValue.value);
@@ -271,23 +276,19 @@ export default defineComponent({
 
     // Methods
     function apply(): void {
-      proxyModelValue.value = draftModelValue.value ?? initialModelValue;
+      proxyModelValue.value = draftModelValue.value ?? initialValue.value;
     }
 
     function reset(): void {
       draftModelValue.value = proxyModelValue.value;
     }
 
-    function togglePopover(): void {
+    function openPopover(): void {
       if (!props.readonly && !props.disabled) {
         const popoverInstance = popover.value;
 
         if (popoverInstance) {
-          if (popoverState.value === 'open') {
-            (popoverInstance.close as () => void)();
-          } else {
-            (popoverInstance.open as () => void)();
-          }
+          (popoverInstance.open as () => void)();
         }
       }
     }
@@ -316,13 +317,13 @@ export default defineComponent({
       popoverState,
       rootStyles,
       popoverStyles,
-      initialModelValue,
+      initialValue,
       proxyModelValue,
       draftModelValue,
       isInvalidDraftModelValue,
       apply,
       reset,
-      togglePopover,
+      openPopover,
       closePopover,
       formatTimeAlt,
     };