@onereach/ui-components 6.4.5 → 6.4.6-beta.3436.0

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

@@ -18,6 +18,7 @@
         :class="{
           [buttonGroupDateItemStyles.join(' ')]: true,
           [buttonGroupCurrentDateItemStyles.join(' ')]: Number(value) === Number(currentDate) && Number(value) !== Number(proxyModelValue),
+          [buttonGroupInRangeDateItemStyles.join(' ')]: (rangeStart && Number(value) > Number(rangeStart)) && (rangeEnd && Number(value) < Number(rangeEnd)),
           'invisible': value.getUTCMonth() !== proxyModelValue.getUTCMonth(),
         }"
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
@@ -36,11 +37,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 +64,16 @@ export default defineComponent({
       type: Function as PropType<FilterFunction>,
       default: undefined,
     },
+
+    rangeStart: {
+      type: Date,
+      default: undefined,
+    },
+
+    rangeEnd: {
+      type: Date,
+      default: undefined,
+    },
   },
 
   emits: [
@@ -101,6 +110,10 @@ export default defineComponent({
       ...DateTimePickerDateSelectButtonGroupCurrentDateItem,
     ]);
 
+    const buttonGroupInRangeDateItemStyles = computed(() => [
+      ...DateTimePickerDateSelectButtonGroupInRangeDateItem,
+    ]);
+
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: toRef(props, 'initialValue'),
@@ -191,6 +204,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[] = [
@@ -26,6 +27,9 @@ export const DateTimePickerDateSelectButtonGroupWeekdayItem: string[] = [
   'layout-row justify-center',
 
   // 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,

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,
   },

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.isFlipped ? 'rounded-t-0' : 'rounded-b-0')]"
+      :class="[popoverState === 'open' && (popover.isFlipped ? 'rounded-t-none' : 'rounded-b-none')]"
       :variant="disableDefaultStyles ? 'unstyled' : 'styled'"
       :size="size"
       :invalid="!!error"

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

@@ -47,7 +47,10 @@
         @close="reset()"
       >
         <OrDateTimePickerPopoverHeader>
-          <OrDateTimePickerMobileControl label="Time">
+          <OrDateTimePickerMobileControl
+            :label="'Time'"
+            :selected="true"
+          >
             {{ formatTimeAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
@@ -120,8 +123,6 @@ import { TimePickerFormat, TimePickerSize } from './props';
 import { TimePicker, TimePickerPopover } from './styles';
 
 export default defineComponent({
-  name: 'OrDateTimePicker',
-
   components: {
     OrDateTimePickerMobileControl,
     OrDateTimePickerPopoverFooter,