@onereach/ui-components 6.4.5-beta.3426.0 → 6.4.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "6.4.5-beta.3426.0",
+  "version": "6.4.5",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -39,7 +39,7 @@
     "@codemirror/lang-json": "6.0.1",
     "@codemirror/lang-markdown": "6.1.1",
     "@floating-ui/dom": "1.4.2",
-    "@onereach/styles": "^4.0.1-beta.3426.0",
+    "@onereach/styles": "^4.0.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -175,5 +175,6 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  }
+  },
+  "gitHead": "526f63f62395416a20461c854cf4630410199e7d"
 }

package/src/components/index.ts

@@ -23,7 +23,6 @@ export * from './or-confirm-v3';
 export * from './or-context-menu-v3';
 export * from './or-date-format-v3';
 export * from './or-date-picker-v3';
-export * from './or-date-range-picker-v3';
 export * from './or-date-time-format-v3';
 export * from './or-date-time-picker';
 export * from './or-date-time-picker-v3';
@@ -106,7 +105,6 @@ export * from './or-textarea-v3';
 export * from './or-textbox';
 export * from './or-time-format-v3';
 export * from './or-time-picker-v3';
-export * from './or-time-range-picker-v3';
 export * from './or-toast';
 export * from './or-toast-v3';
 export * from './or-tooltip';

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

@@ -14,9 +14,9 @@ export const CombinedInputControlGroup: string[] = [
   'w-full',
 
   // Shape (.or-input-box-v3)
-  '[&_.or-input-box-v3]:first-child:rounded-r-none',
-  '[&_.or-input-box-v3]:middle-child:rounded-none',
-  '[&_.or-input-box-v3]:last-child:rounded-l-none',
+  '[&_.or-input-box-v3]:first-child:rounded-r-0',
+  '[&_.or-input-box-v3]:middle-child:rounded-0',
+  '[&_.or-input-box-v3]:last-child:rounded-l-0',
 
   // Spacing (.or-input-box-v3)
   '[&_.or-input-box-v3]:first-child:mr-[-1px]',

package/src/components/or-date-picker-v3/OrDatePicker.vue

@@ -38,7 +38,7 @@
 
       <OrPopover
         ref="popover"
-        :class="popoverStyles"
+        :custom-styles="popoverStyles"
         :variant="'auto'"
         :bottom-sheet-props="{ variant: 'basic' }"
         :trigger="inputBoxRoot"
@@ -46,10 +46,7 @@
         @close="reset()"
       >
         <OrDateTimePickerPopoverHeader>
-          <OrDateTimePickerMobileControl
-            :label="'Date'"
-            :selected="true"
-          >
+          <OrDateTimePickerMobileControl label="Date">
             {{ formatDateAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
@@ -127,6 +124,8 @@ import { DatePickerSize } from './props';
 import { DatePicker, DatePickerPopover } from './styles';
 
 export default defineComponent({
+  name: 'OrDatePicker',
+
   components: {
     OrDateTimePickerDateControl,
     OrDateTimePickerDateSelect,

package/src/components/or-date-time-picker-v3/OrDateTimePicker.vue

@@ -56,11 +56,11 @@
         @close="reset()"
       >
         <OrDateTimePickerPopoverHeader>
-          <OrDateTimePickerMobileControl :label="'Date'">
+          <OrDateTimePickerMobileControl label="Date">
             {{ formatDateAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
 
-          <OrDateTimePickerMobileControl :label="'Time'">
+          <OrDateTimePickerMobileControl label="Time">
             {{ formatTimeAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
@@ -95,11 +95,11 @@
         @close="reset()"
       >
         <OrDateTimePickerPopoverHeader>
-          <OrDateTimePickerMobileControl :label="'Date'">
+          <OrDateTimePickerMobileControl label="Date">
             {{ formatDateAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
 
-          <OrDateTimePickerMobileControl :label="'Time'">
+          <OrDateTimePickerMobileControl label="Time">
             {{ formatTimeAlt(draftModelValue) }}
           </OrDateTimePickerMobileControl>
         </OrDateTimePickerPopoverHeader>
@@ -174,6 +174,8 @@ import { FilterFunction } from './types';
 import { getCurrentDate } from './utils';
 
 export default defineComponent({
+  name: 'OrDateTimePicker',
+
   components: {
     OrDateTimePickerDateControl,
     OrDateTimePickerDateSelect,

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

@@ -29,6 +29,8 @@ import { formatDate, getDatePlaceholder } from '../../utils';
 import { DateTimePickerDateControl, DateTimePickerDateControlPlaceholder } from './styles';
 
 export default defineComponent({
+  name: 'OrDateTimePickerDateControl',
+
   model: {
     prop: 'modelValue',
     event: 'update:modelValue',

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

@@ -18,7 +18,6 @@
         :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'"
@@ -37,9 +36,11 @@ 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, DateTimePickerDateSelectButtonGroupInRangeDateItem, DateTimePickerDateSelectButtonGroupWeekdayItem } from './styles';
+import { DateTimePickerDateSelect, DateTimePickerDateSelectButtonGroup, DateTimePickerDateSelectButtonGroupCurrentDateItem, DateTimePickerDateSelectButtonGroupDateItem, DateTimePickerDateSelectButtonGroupWeekdayItem } from './styles';
 
 export default defineComponent({
+  name: 'OrDateTimePickerDateSelect',
+
   components: {
     OrButton,
   },
@@ -64,16 +65,6 @@ export default defineComponent({
       type: Function as PropType<FilterFunction>,
       default: undefined,
     },
-
-    rangeStart: {
-      type: Date,
-      default: undefined,
-    },
-
-    rangeEnd: {
-      type: Date,
-      default: undefined,
-    },
   },
 
   emits: [
@@ -110,10 +101,6 @@ export default defineComponent({
       ...DateTimePickerDateSelectButtonGroupCurrentDateItem,
     ]);
 
-    const buttonGroupInRangeDateItemStyles = computed(() => [
-      ...DateTimePickerDateSelectButtonGroupInRangeDateItem,
-    ]);
-
     // State
     const proxyModelValue = useProxyModelValue(toRef(props, 'modelValue'), context.emit, {
       defaultValue: toRef(props, 'initialValue'),
@@ -204,7 +191,6 @@ 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,8 +18,7 @@ export const DateTimePickerDateSelectButtonGroup: string[] = [
   'h-[262px]',
 
   // Spacing
-  'mx-[-2px]',
-  'my-[-2px]',
+  'gap-xs',
 ];
 
 export const DateTimePickerDateSelectButtonGroupWeekdayItem: string[] = [
@@ -27,9 +26,6 @@ export const DateTimePickerDateSelectButtonGroupWeekdayItem: string[] = [
   'layout-row justify-center',
 
   // Spacing
-  'mx-[2px]',
-  'my-[2px]',
-
   'px-sm',
   'py-sm',
 
@@ -49,9 +45,6 @@ export const DateTimePickerDateSelectButtonGroupDateItem: string[] = [
   '!min-w-fit',
 
   // Spacing
-  'mx-[2px]',
-  'my-[2px]',
-
   '!px-sm',
   '!py-sm',
 
@@ -67,16 +60,3 @@ 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,7 +2,6 @@
   <div
     ref="root"
     :class="rootStyles"
-    :selected="selected ? '' : null"
   >
     <OrLabel>{{ label }}</OrLabel>
 
@@ -18,6 +17,8 @@ import { OrLabelV3 as OrLabel } from '../../../or-label-v3';
 import { DateTimePickerMobileControl, DateTimePickerMobileControlContent } from './styles';
 
 export default defineComponent({
+  name: 'OrDateTimePickerMobileControl',
+
   components: {
     OrLabel,
   },
@@ -27,11 +28,6 @@ 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,22 +2,15 @@ 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,6 +77,8 @@ 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,6 +26,8 @@ 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,6 +12,8 @@ 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,6 +30,8 @@ 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,6 +66,8 @@ import { FilterFunction } from '../../types';
 import { DateTimePickerTimeSelect, DateTimePickerTimeSelectButtonGroup, DateTimePickerTimeSelectButtonGroupItem } from './styles';
 
 export default defineComponent({
+  name: 'OrDateTimePickerTimeSelect',
+
   components: {
     OrButton,
   },

package/src/components/or-icon-button-v3/OrIconButton.vue

@@ -15,9 +15,7 @@
       }"
     >
       <OrIcon
-        :variant="'inherit'"
-        :size="size"
-        v-bind="typeof icon === 'string' ? { icon } : icon"
+        v-bind="iconProps"
       />
     </button>
 
@@ -31,8 +29,8 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, isVue3, ref } from 'vue-demi';
-import { OrIconV3 as OrIcon } from '../or-icon-v3';
+import { PropType, computed, defineComponent, isVue3, ref, toRefs } from 'vue-demi';
+import { OrIconV3 as OrIcon, IconVariant } from '../or-icon-v3';
 import { OrTooltipV3 as OrTooltip } from '../or-tooltip-v3';
 import { IconButtonColor, IconButtonSize } from './props';
 import { IconButton, IconButtonColors } from './styles';
@@ -98,6 +96,15 @@ export default defineComponent({
   setup(props) {
     // Refs
     const root = ref<HTMLButtonElement>();
+    const { icon, size } = toRefs(props);
+
+    const iconProps = computed(() => {
+      return {
+        size: size.value,
+        variant: IconVariant.Inherit,
+        ...(typeof icon.value === 'string' ? { icon: icon.value } : icon.value),
+      };
+    });
 
     // Styles
     const rootStyles = computed(() => [
@@ -110,6 +117,7 @@ export default defineComponent({
       root,
       rootStyles,
       isVue3,
+      iconProps,
     };
   },
 });

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-1',
-    'dark:focus-within:theme-background-primary-translucent-1-dark',
+    'focus-within:theme-background-primary-translucent',
+    'dark:focus-within:theme-background-primary-translucent-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-1',
-    'dark:read-only:theme-background-primary-translucent-1-dark',
+    'read-only:theme-background-primary-translucent',
+    'dark:read-only:theme-background-primary-translucent-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-1',
-    'dark:invalid:theme-background-error-translucent-1-dark',
+    'invalid:theme-background-error-translucent',
+    'dark:invalid:theme-background-error-translucent-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-1',
-    'dark:invalid:focus-within:theme-background-error-translucent-1-dark',
+    'invalid:focus-within:theme-background-error-translucent',
+    'dark:invalid:focus-within:theme-background-error-translucent-dark',
 
     'invalid:focus-within:theme-border-1-error',
     'dark:invalid:focus-within:theme-border-1-error-dark',

package/src/components/or-menu-v3/OrMenu.vue

@@ -10,7 +10,7 @@
     <div
       ref="root"
       v-bind="$attrs"
-      :class="rootStyles"
+      :class="[rootStyles, ...additionalStyles]"
       @click.stop="onClick($event)"
     >
       <slot />
@@ -53,6 +53,12 @@ export default defineComponent({
       type: [Number, Object, Function] as PropType<MenuOffset>,
       default: undefined,
     },
+
+    // TODO: Remove after migration to Vue 3
+    additionalStyles: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
   },
 
   emits: [

package/src/components/or-pagination-v3/OrPagination.vue

@@ -57,7 +57,7 @@
 
       <OrMenu
         ref="limitMenu"
-        :class="['min-w-[60px]']"
+        :additional-styles="['min-w-[60px]']"
         :trigger="limitButtonRoot"
         :placement="'top'"
       >

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-1',
+  'focus-within:theme-background-primary-translucent',
   'focus-within:theme-border-1-primary',
   'focus-within:theme-outline-2-primary',
   // Sizing

package/src/components/or-search-v3/OrSearch.vue

@@ -7,8 +7,8 @@
     :size="size"
     :placeholder="placeholder"
     :debounce="debounce"
-    :disabled="disabled"
     :disable-default-styles="disableDefaultStyles"
+    v-bind="controlAttributes"
     @input="$emit('input', $event)"
     @keydown="$emit('keydown', $event)"
     @keyup="$emit('keyup', $event)"
@@ -19,9 +19,10 @@
 
 <script lang="ts">
 import { debouncedWatch } from '@vueuse/core';
-import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
+import { computed, defineComponent, PropType, reactive, ref, watch } from 'vue-demi';
 import { OrInputV3 as OrInput } from '../or-input-v3';
 import { SearchSize } from './props';
+import { useControlAttributes, useIdAttribute, useValidationAttributes } from '../../hooks';
 
 export default defineComponent({
   name: 'OrSearch',
@@ -52,11 +53,6 @@ export default defineComponent({
       default: 500,
     },
 
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
     disableDefaultStyles: {
       type: Boolean,
       default: false,
@@ -90,6 +86,11 @@ export default defineComponent({
 
     // State
     const localModelValue = ref(props.modelValue ?? '');
+    const controlAttributes = reactive({
+      id: useIdAttribute(),
+      ...useControlAttributes(),
+      ...useValidationAttributes(),
+    });
 
     // Events
     debouncedWatch(
@@ -118,6 +119,7 @@ export default defineComponent({
       root,
       rootStyles,
       localModelValue,
+      controlAttributes,
       focus,
       clear,
     };

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

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

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