@onereach/ui-components 4.6.1-beta.2770.0 → 4.6.1

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

@@ -1,19 +1,18 @@
 <template>
   <OrPopover
-    :is-open="state === 'open'"
+    ref="popover"
     :variant="'auto'"
     :trigger="trigger"
     :placement="placement"
     :full-width="false"
     :disable-default-styles="false"
-    @open="open()"
-    @close="close()"
+    @update:state="$emit('update:state', $event)"
   >
     <div
       ref="root"
       v-bind="$attrs"
       :class="rootStyles"
-      @click="onClick"
+      @click.stop="onClick"
     >
       <slot />
     </div>
@@ -21,8 +20,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
-import { usePopoverState } from '../../hooks';
+import { computed, defineComponent, PropType, ref } from 'vue-demi';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { MenuPlacement } from './props';
 import { MenuRoot } from './styles';
@@ -37,11 +35,6 @@ export default defineComponent({
   inheritAttrs: false,
 
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false,
-    },
-
     trigger: {
       type: HTMLElement,
       default: undefined,
@@ -54,22 +47,26 @@ export default defineComponent({
   },
 
   emits: [
-    'open',
-    'close',
+    'update:state',
   ],
 
   expose: [
     'root',
-
+    'state',
+    'isOpen',
     'open',
     'close',
     'toggle',
   ],
 
-  setup(props, context) {
+  setup() {
     // Refs
     const root = ref<HTMLElement>();
 
+    const popover = ref<InstanceType<typeof OrPopover>>();
+    const popoverRoot = computed(() => popover.value?.root);
+    const popoverState = computed(() => popover.value?.state);
+
     // Styles
     const rootStyles = computed(() => [
       'or-menu-v3',
@@ -77,21 +74,49 @@ export default defineComponent({
     ]);
 
     // State
-    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context);
+    const isOpen = computed(() => popover.value?.isOpen);
+
+    // Methods
+    function open(): void {
+      const popoverInstance = popover.value;
+
+      if (popoverInstance) {
+        (popoverInstance.open as () => void)();
+      }
+    }
+
+    function close(): void {
+      const popoverInstance = popover.value;
+
+      if (popoverInstance) {
+        (popoverInstance.close as () => void)();
+      }
+    }
+
+    function toggle(): void {
+      isOpen.value ? close() : open();
+    }
 
     // Handlers
     function onClick(event: Event): void {
       const path = event.composedPath() as HTMLElement[];
 
-      if (path.some(({ classList }) => classList?.contains('or-menu-item-v3'))) {
+      const classLists = path
+        .filter(({ classList }) => !!classList)
+        .map(({ classList }) => classList);
+
+      if (classLists.some((classList) => classList.contains('or-menu-item-v3'))) {
         close();
       }
     }
 
     return {
       root,
+      popover,
+      popoverRoot,
+      state: popoverState,
       rootStyles,
-      state,
+      isOpen,
       open,
       close,
       toggle,

package/src/components/or-modal/OrModal.stories.ts

@@ -9,7 +9,6 @@ import { OrCollapse } from '../or-collapse';
 import { OrSelect } from '../or-select';
 import { OrInput } from '../or-input';
 import { getTestOption } from '../or-select/stories.helpers';
-import _ from 'lodash';
 
 export default {
   title: 'Components/OrModal',
@@ -212,5 +211,5 @@ WithLongContent.args = {
       handler: () => {},
     },
   ],
-  options: _.range(10).map(getTestOption),
+  options: Array.from(Array(10).keys()).map(getTestOption),
 };

package/src/components/or-modal/OrModal.vue

@@ -48,7 +48,6 @@
 
 <script lang="ts">
 import { defineComponent, PropType, ref, watch, onBeforeUnmount } from 'vue-demi';
-import _ from 'lodash';
 import { OrIconButton } from '../or-button-v2';
 import { OrOverlay } from '../or-overlay';
 import { OrModalSizes } from './constants';
@@ -66,18 +65,15 @@ export default defineComponent({
       type: String,
       required: false,
       default: null,
-      validator: _.isString,
     },
     showClose: {
       type: Boolean,
       default: true,
-      validator: _.isBoolean,
     },
     closeOnClickOutside: {
       type: Boolean,
       required: false,
       default: false,
-      validator: _.isBoolean,
     },
     size: {
       type: String as PropType<keyof typeof OrModalSizes>,
@@ -87,18 +83,15 @@ export default defineComponent({
     isOpen: {
       type: Boolean,
       required: true,
-      validator: _.isBoolean,
     },
     isWithoutOverlay: {
       type: Boolean,
       required: false,
       default: false,
-      validator: _.isBoolean,
     },
     trapFocus: {
       type: Boolean,
       default: true,
-      validator: _.isBoolean,
     },
   },
   emits: ['close'],
@@ -108,7 +101,7 @@ export default defineComponent({
     let trap: UseFocusTrapReturn = useFocusTrap(container, {
       immediate: props.trapFocus,
       fallbackFocus: '.container',
-      allowOutsideClick: true
+      allowOutsideClick: true,
     });
 
     const handleClose = () => emit('close');

package/src/components/or-modal-v3/OrModal.vue

@@ -1,6 +1,6 @@
 <template>
   <OrOverlay
-    v-if="state === 'open'"
+    v-if="isActive"
     :fullscreen="true"
   >
     <div
@@ -8,53 +8,54 @@
       v-bind="$attrs"
       :class="rootStyles"
     >
-      <OrModalHeader @close="close()">
-        <slot name="header" />
-      </OrModalHeader>
+      <div :class="headerStyles">
+        <div :class="['grow']">
+          <slot name="header" />
+        </div>
 
-      <OrModalContent>
-        <slot />
-      </OrModalContent>
+        <OrIconButton
+          :icon="'close'"
+          :size="'l'"
+          @click.stop="close"
+        />
+      </div>
 
-      <OrModalFooter v-if="$slots.footer">
+      <div :class="contentStyles">
+        <slot />
+      </div>
+      <div :class="footerStyles">
         <slot name="footer" />
-      </OrModalFooter>
+      </div>
     </div>
   </OrOverlay>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
-import { usePopoverState } from '../../hooks';
+import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
+import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
-import OrModalContent from './partials/or-modal-content/OrModalContent.vue';
-import OrModalFooter from './partials/or-modal-footer/OrModalFooter.vue';
-import OrModalHeader from './partials/or-modal-header/OrModalHeader.vue';
 import { ModalSize } from './props';
-import { ModalRoot, ModalRootSizes } from './styles';
+import { ModalHeader, ModalRoot, ModalRootSizes, ModalContent, ModalFooter } from './styles';
 
 export default defineComponent({
   name: 'OrModal',
 
   components: {
-    OrModalContent,
-    OrModalFooter,
-    OrModalHeader,
     OrOverlay,
+    OrIconButton,
   },
 
   inheritAttrs: false,
 
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false,
-    },
-
     size: {
-      type: String as PropType<`${ModalSize}`>,
+      type: String as PropType<ModalSize>,
       default: ModalSize.M,
     },
+    isOpen: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
   },
 
   emits: [
@@ -64,7 +65,7 @@ export default defineComponent({
 
   expose: [
     'root',
-
+    'isActive',
     'open',
     'close',
   ],
@@ -80,13 +81,50 @@ export default defineComponent({
       ...ModalRootSizes[props.size],
     ]);
 
+    const headerStyles = computed(() => [
+      ...ModalHeader,
+    ]);
+
+    const contentStyles = computed(() => [
+      ...ModalContent,
+    ]);
+
+    const footerStyles = computed(() => [
+      ...ModalFooter,
+    ]);
+
     // State
-    const { state, open, close } = usePopoverState(toRef(props, 'isOpen'), context);
+    const isActive = ref(false);
+
+    // Events
+    watch(isActive, (value) => {
+      context.emit(value ? 'open' : 'close');
+    });
+
+    watch(() => props.isOpen, (newIsOpen) => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, { immediate: true });
+
+    // Methods
+    function open(): void {
+      isActive.value = true;
+    }
+
+    function close(): void {
+      isActive.value = false;
+    }
 
     return {
       root,
       rootStyles,
-      state,
+      headerStyles,
+      contentStyles,
+      footerStyles,
+      isActive,
       open,
       close,
     };

package/src/components/or-modal-v3/styles.ts

@@ -46,3 +46,28 @@ export const ModalRootSizes: Record<ModalSize, string[]> = {
     'md:w-[480px]',
   ],
 };
+
+export const ModalHeader: string[] = [
+  // Layout
+  'layout-row',
+
+  // Spacing
+  'px-md md:px-lg',
+
+  // Typography
+  'typography-headline-2',
+];
+
+export const ModalContent: string[] = [
+  // Box
+  'grow',
+  'overflow-auto',
+
+  // Spacing
+  'px-md md:px-lg',
+];
+
+export const ModalFooter: string[] = [
+  // Spacing
+  'px-md md:px-lg',
+];

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

@@ -1,7 +1,7 @@
 <template>
   <OrTeleport>
     <div
-      v-show="state === 'open'"
+      v-show="isOpen"
       :class="['contents']"
     >
       <template v-if="isDesktop && variant === 'auto' || variant === 'popover'">
@@ -26,9 +26,8 @@
         <OrBottomSheet
           ref="bottomSheet"
           v-bind="bottomSheetProps"
-          :is-open="state === 'open'"
-          @open="open()"
-          @close="close()"
+          @update:state="state = $event"
+          @update:state:closed-automatically="$emit('update:state:closed-automatically')"
         >
           <slot />
         </OrBottomSheet>
@@ -40,8 +39,8 @@
 <script lang="ts">
 import { autoUpdate, computePosition, flip, hide, shift } from '@floating-ui/dom';
 import { onClickOutside } from '@vueuse/core';
-import { PropType, computed, defineComponent, ref, toRef, unref, watchPostEffect } from 'vue-demi';
-import { useElevation, usePopoverState, useResponsive } from '../../hooks';
+import { PropType, computed, defineComponent, nextTick, ref, toRef, unref, watch, watchPostEffect } from 'vue-demi';
+import { useElevation, useResponsive } from '../../hooks';
 import { OrBottomSheetV3 as OrBottomSheet } from '../or-bottom-sheet-v3';
 import { OrTeleportV3 as OrTeleport } from '../or-teleport-v3';
 import { PopoverPlacement, PopoverVariant } from './props';
@@ -58,11 +57,6 @@ export default defineComponent({
   inheritAttrs: false,
 
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false,
-    },
-
     variant: {
       type: String as PropType<`${PopoverVariant}`>,
       default: PopoverVariant.Auto,
@@ -100,16 +94,22 @@ export default defineComponent({
   },
 
   emits: [
-    'open',
-    'close',
+    'update:state',
+    'update:state:open',
+    'update:state:fullscreen',
+    'update:state:closed',
+    'update:state:closed-automatically',
   ],
 
   expose: [
     'root',
-
+    'state',
+    'isOpen',
+    'isFullscreen',
+    'isClosed',
+    'isFlipped',
     'open',
     'close',
-    'toggle',
   ],
 
   setup(props, context) {
@@ -134,7 +134,103 @@ export default defineComponent({
     ]);
 
     // State
-    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context);
+    const state = ref<'open' | 'fullscreen' | 'closed'>('closed');
+
+    const isOpen = computed(() => state.value === 'open');
+    const isFullscreen = computed(() => state.value === 'fullscreen');
+    const isClosed = computed(() => state.value === 'closed');
+
+    const isFlipped = ref<boolean>(false);
+
+    // Events
+    watch(state, (value) => {
+      context.emit('update:state', value);
+
+      switch (value) {
+        case 'open':
+          context.emit('update:state:open');
+          break;
+
+        case 'fullscreen':
+          context.emit('update:state:fullscreen');
+          break;
+
+        case 'closed':
+          context.emit('update:state:closed');
+          break;
+      }
+    });
+
+    // Methods
+    function open(): void {
+      state.value = 'open';
+
+      switch (props.variant) {
+        case PopoverVariant.Auto:
+          if (isMobile.value) {
+            nextTick(() => {
+              const bottomSheetInstance = bottomSheet.value;
+
+              if (bottomSheetInstance) {
+                (bottomSheetInstance.open as () => void)();
+              }
+            });
+          }
+
+          break;
+
+        case PopoverVariant.Popover:
+          break;
+
+        case PopoverVariant.BottomSheet:
+          nextTick(() => {
+            const bottomSheetInstance = bottomSheet.value;
+
+            if (bottomSheetInstance) {
+              (bottomSheetInstance.open as () => void)();
+            }
+          });
+
+          break;
+      }
+    }
+
+    function close(auto: boolean = false): void {
+      state.value = 'closed';
+
+      switch (props.variant) {
+        case PopoverVariant.Auto:
+          if (isMobile.value) {
+            nextTick(() => {
+              const bottomSheetInstance = bottomSheet.value;
+
+              if (bottomSheetInstance) {
+                (bottomSheetInstance.close as () => void)();
+              }
+            });
+          }
+
+          break;
+
+        case PopoverVariant.Popover:
+          break;
+
+        case PopoverVariant.BottomSheet:
+          nextTick(() => {
+            const bottomSheetInstance = bottomSheet.value;
+
+            if (bottomSheetInstance) {
+              (bottomSheetInstance.close as () => void)();
+            }
+          });
+
+          break;
+      }
+
+      if (auto) {
+        context.emit('update:state:closed-automatically');
+      }
+    }
 
     // Handlers
     function handleBottomSheetState(bottomSheetState: string): void {
@@ -170,15 +266,13 @@ export default defineComponent({
               visibility: middlewareData.hide!.referenceHidden ? 'hidden' : 'visible',
               width: props.fullWidth ? `${trigger.offsetWidth}px` : '',
             });
+
+            isFlipped.value = Boolean(middlewareData.flip?.index);
           });
         }
       }
     });
 
-    // #region Elevation
-    useElevation(root, state);
-    // #endregion
-
     // #region Click Outside
     const trigger = toRef(props, 'trigger');
 
@@ -186,13 +280,17 @@ export default defineComponent({
       const path = event.composedPath() as Element[];
 
       if (!path.some(({ classList }) => classList?.contains('or-popover-v3') || classList?.contains('or-bottom-sheet-v3'))) {
-        close();
+        close(true);
       }
     }, {
       ignore: [trigger],
     });
     // #endregion
 
+    // #region Elevation
+    useElevation(root, state);
+    // #endregion
+
     return {
       isDesktop,
       isMobile,
@@ -203,9 +301,12 @@ export default defineComponent({
       rootStyles,
       bodyStyles,
       state,
+      isOpen,
+      isFullscreen,
+      isClosed,
+      isFlipped,
       open,
       close,
-      toggle,
     };
   },
 });