@onereach/ui-components 8.1.0 → 8.1.1-beta.3635.0

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

@@ -1,5 +1,7 @@
 <template>
   <OrPopover
+    :class="popoverStyles"
+    :custom-styles="popoverStyles"
     :is-open="state === 'open'"
     :variant="'auto'"
     :trigger="trigger"
@@ -88,6 +90,10 @@ export default defineComponent({
       ...Menu,
     ]);
 
+    const popoverStyles = computed(() => [
+      'or-menu-popover-v3',
+    ]);
+
     // State
     const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context.emit);
 
@@ -103,6 +109,7 @@ export default defineComponent({
     return {
       root,
       rootStyles,
+      popoverStyles,
       state,
       open,
       close,

package/src/components/or-popover-v3/OrPopover.vue

@@ -39,15 +39,15 @@
 </template>
 
 <script lang="ts">
-import { ReferenceElement, autoUpdate, size, flip, hide, offset as offsetMiddleware, shift } from '@floating-ui/dom';
+import { ReferenceElement, autoUpdate, flip, hide, offset as offsetMiddleware, shift, size } from '@floating-ui/dom';
 import { MaybeElementRef, onClickOutside } from '@vueuse/core';
 import { PropType, computed, defineComponent, ref, toRef, toRefs } from 'vue-demi';
 import { useElevation, usePopoverState, useResponsive } from '../../hooks';
 import { OrBottomSheetV3 as OrBottomSheet } from '../or-bottom-sheet-v3';
 import { OrTeleportV3 as OrTeleport } from '../or-teleport-v3';
+import { useFloating } from './hooks/useFloating';
 import { PopoverOffset, PopoverPlacement, PopoverVariant } from './props';
 import { Popover, PopoverBody, PopoverBodyPlacements } from './styles';
-import { useFloating } from './hooks/useFloating';
 
 export default defineComponent({
   components: {
@@ -58,6 +58,12 @@ export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    // @workaround for Vue 2
+    customStyles: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+
     isOpen: {
       type: Boolean,
       default: false,
@@ -93,11 +99,6 @@ export default defineComponent({
       default: false,
     },
 
-    customStyles: {
-      type: Array as PropType<string[]>,
-      default: () => [],
-    },
-
     disableDefaultStyles: {
       type: Boolean,
       default: false,
@@ -138,7 +139,7 @@ export default defineComponent({
     const rootStyles = computed(() => [
       'or-popover-v3',
       ...Popover,
-      ...props.customStyles,
+      ...'class' in context.attrs ? [] : props.customStyles,
     ]);
 
     const bodyStyles = computed(() => [

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

@@ -90,11 +90,12 @@
 
       <OrPopover
         ref="popover"
+        :class="dropdownStyles"
+        :custom-styles="dropdownStyles"
         :variant="'auto'"
         :trigger="inputBoxRoot"
         :placement="'bottom'"
         :full-width="true"
-        :custom-styles="dropdownStyles"
         :disable-default-styles="true"
       >
         <template v-if="popoverState === 'open' && enableSearch && isMobile">
@@ -429,6 +430,7 @@ export default defineComponent({
     ]);
 
     const dropdownStyles = computed(() => [
+      'or-select-popover-v3',
       ...SelectDropdown,
       ...popover.value?.isFlipped ? SelectDropdownFlipped : SelectDropdownDefault,
     ]);

package/src/components/or-tags-v3/OrTags.vue

@@ -38,6 +38,8 @@
 
       <OrPopover
         ref="overflowPopover"
+        :class="popoverStyles"
+        :custom-styles="popoverStyles"
         :trigger="overflowButtonRoot"
       >
         <div :class="overflowPopoverStyles">
@@ -60,7 +62,7 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref, toRefs, nextTick } from 'vue-demi';
+import { PropType, computed, defineComponent, nextTick, ref, toRefs } from 'vue-demi';
 import { useOverflow } from '../../hooks';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
@@ -142,6 +144,10 @@ export default defineComponent({
       ...Tags,
     ]);
 
+    const popoverStyles = computed(() => [
+      'or-tags-popover-v3',
+    ]);
+
     const containerStyles = computed(() => [
       ...TagsContainer,
       ...TagsContainerOverflows[localOverflow.value],
@@ -193,6 +199,7 @@ export default defineComponent({
       overflowPopover,
       overflowPopoverRoot,
       rootStyles,
+      popoverStyles,
       containerStyles,
       overflowButtonStyles,
       overflowPopoverStyles,

package/src/components/or-teleport-v3/OrTeleport.vue2.vue

@@ -14,8 +14,6 @@ import { MountingPortal } from 'portal-vue';
 import { defineComponent } from 'vue-demi';
 
 export default defineComponent({
-  name: 'OrTeleport',
-
   components: {
     MountingPortal,
   },

package/src/components/or-teleport-v3/OrTeleport.vue3.vue

@@ -11,8 +11,6 @@
 import { defineComponent } from 'vue-demi';
 
 export default defineComponent({
-  name: 'OrTeleport',
-
   props: {
     to: {
       type: String,

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

@@ -41,6 +41,7 @@
       <OrPopover
         ref="popover"
         :class="popoverStyles"
+        :custom-styles="popoverStyles"
         :variant="'auto'"
         :bottom-sheet-props="{ variant: 'basic' }"
         :trigger="inputBoxRoot"
@@ -244,6 +245,7 @@ export default defineComponent({
     ]);
 
     const popoverStyles = computed(() => [
+      'or-time-picker-popover-v3',
       ...TimePickerPopover,
     ]);
 

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

@@ -54,6 +54,7 @@
       <OrPopover
         ref="popover"
         :class="popoverStyles"
+        :custom-styles="popoverStyles"
         :variant="'auto'"
         :bottom-sheet-props="{ variant: 'basic' }"
         :trigger="inputBoxRoot"
@@ -270,6 +271,7 @@ export default defineComponent({
     ]);
 
     const popoverStyles = computed(() => [
+      'or-time-range-picker-popover-v3',
       ...TimeRangePickerPopover,
     ]);
 

package/src/components/or-tooltip-v3/OrTooltip.vue

@@ -9,6 +9,8 @@
 
     <template v-if="$slots.content || content || text">
       <OrPopover
+        :class="popoverStyles"
+        :custom-styles="popoverStyles"
         :is-open="state === 'open'"
         :variant="'popover'"
         :trigger="root"
@@ -103,6 +105,10 @@ export default defineComponent({
       ...Tooltip,
     ]);
 
+    const popoverStyles = computed(() => [
+      'or-tooltip-popover-v3',
+    ]);
+
     const bodyStyles = computed(() => [
       ...TooltipBody,
       ...TooltipBodyPlacements[props.placement],
@@ -114,6 +120,7 @@ export default defineComponent({
     return {
       root,
       rootStyles,
+      popoverStyles,
       bodyStyles,
       state,
       open,