@onereach/ui-components 4.6.0 → 4.6.1-beta.2760.0

package/src/components/or-modal-v3/partials/or-modal-header/OrModalHeader.vue

@@ -0,0 +1,54 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <div :class="['grow']">
+      <slot />
+    </div>
+
+    <OrIconButton
+      :icon="'close'"
+      :size="'l'"
+      @click="$emit('close')"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi';
+import { OrIconButtonV3 as OrIconButton } from '../../../or-icon-button-v3';
+import { ModalHeader } from './styles';
+
+export default defineComponent({
+  name: 'OrModalHeader',
+
+  components: {
+    OrIconButton,
+  },
+
+  emits: [
+    'close',
+  ],
+
+  expose: [
+    'root',
+  ],
+
+  setup() {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-modal-header',
+      ...ModalHeader,
+    ]);
+
+    return {
+      root,
+      rootStyles,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,10 @@
+export const ModalHeader: string[] = [
+  // Layout
+  'layout-row',
+
+  // Spacing
+  'px-md md:px-lg',
+
+  // Typography
+  'typography-headline-2',
+];

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

@@ -46,28 +46,3 @@ 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="isOpen"
+      v-show="state === 'open'"
       :class="['contents']"
     >
       <template v-if="isDesktop && variant === 'auto' || variant === 'popover'">
@@ -26,8 +26,9 @@
         <OrBottomSheet
           ref="bottomSheet"
           v-bind="bottomSheetProps"
-          @update:state="state = $event"
-          @update:state:closed-automatically="$emit('update:state:closed-automatically')"
+          :is-open="state === 'open'"
+          @open="open()"
+          @close="close()"
         >
           <slot />
         </OrBottomSheet>
@@ -39,8 +40,8 @@
 <script lang="ts">
 import { autoUpdate, computePosition, flip, hide, shift } from '@floating-ui/dom';
 import { onClickOutside } from '@vueuse/core';
-import { PropType, computed, defineComponent, nextTick, ref, toRef, unref, watch, watchPostEffect } from 'vue-demi';
-import { useElevation, useResponsive } from '../../hooks';
+import { PropType, computed, defineComponent, ref, toRef, unref, watchPostEffect } 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 { PopoverPlacement, PopoverVariant } from './props';
@@ -57,6 +58,11 @@ export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+
     variant: {
       type: String as PropType<`${PopoverVariant}`>,
       default: PopoverVariant.Auto,
@@ -94,22 +100,16 @@ export default defineComponent({
   },
 
   emits: [
-    'update:state',
-    'update:state:open',
-    'update:state:fullscreen',
-    'update:state:closed',
-    'update:state:closed-automatically',
+    'open',
+    'close',
   ],
 
   expose: [
     'root',
-    'state',
-    'isOpen',
-    'isFullscreen',
-    'isClosed',
-    'isFlipped',
+
     'open',
     'close',
+    'toggle',
   ],
 
   setup(props, context) {
@@ -134,103 +134,7 @@ export default defineComponent({
     ]);
 
     // State
-    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');
-      }
-    }
+    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context);
 
     // Handlers
     function handleBottomSheetState(bottomSheetState: string): void {
@@ -266,13 +170,15 @@ 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');
 
@@ -280,17 +186,13 @@ 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(true);
+        close();
       }
     }, {
       ignore: [trigger],
     });
     // #endregion
 
-    // #region Elevation
-    useElevation(root, state);
-    // #endregion
-
     return {
       isDesktop,
       isMobile,
@@ -301,12 +203,9 @@ export default defineComponent({
       rootStyles,
       bodyStyles,
       state,
-      isOpen,
-      isFullscreen,
-      isClosed,
-      isFlipped,
       open,
       close,
+      toggle,
     };
   },
 });

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

@@ -43,7 +43,7 @@
         :bottom-sheet-props="{ variant: 'basic' }"
         :trigger="inputBoxRoot"
         :placement="'bottom-start'"
-        @update:state:closed-automatically="reset()"
+        @close="reset()"
       >
         <OrDateTimePickerPopoverHeader>
           <OrDateTimePickerMobileControl label="Time">
@@ -72,7 +72,7 @@
             :icon="'close'"
             :color="'inherit'"
             :disabled="readonly || disabled"
-            @click.stop="$emit('update:modelValue', undefined)"
+            @click="$emit('update:modelValue', undefined)"
           />
         </template>
 

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

@@ -2,18 +2,21 @@
   <div
     ref="root"
     :class="rootStyles"
+    @mouseenter="open()"
+    @mouseleave="close()"
   >
     <slot />
 
     <template v-if="text">
       <OrPopover
-        ref="popover"
+        :is-open="state === 'open'"
         :variant="'popover'"
         :trigger="root"
         :placement="placement"
         :full-width="false"
         :disable-default-styles="true"
-        @update:state="$emit('update:state', $event)"
+        @open="open()"
+        @close="close()"
       >
         <div :class="bodyStyles">
           {{ text }}
@@ -24,11 +27,12 @@
 </template>
 
 <script lang="ts">
-import { useDebounceFn, useElementHover } from '@vueuse/core';
-import { PropType, computed, defineComponent, ref, watch } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
+import { usePopoverState } from '../../hooks';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { TooltipPlacement } from './props';
 import { TooltipBody, TooltipBodyPlacements, TooltipRoot } from './styles';
+import { refDebounced } from '@vueuse/core';
 
 export default defineComponent({
   name: 'OrTooltip',
@@ -38,34 +42,39 @@ export default defineComponent({
   },
 
   props: {
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+
     text: {
       type: String,
       default: undefined,
     },
 
     placement: {
-      type: String as PropType<`${TooltipPlacement}`>,
+      type: String as PropType<TooltipPlacement>,
       default: TooltipPlacement.Bottom,
     },
   },
 
   emits: [
-    'update:state',
+    'open',
+    'close',
   ],
 
   expose: [
     'root',
+
     'open',
     'close',
+    'toggle',
   ],
 
-  setup(props) {
+  setup(props, context) {
     // Refs
     const root = ref<HTMLElement>();
 
-    const popover = ref<InstanceType<typeof OrPopover>>();
-    const popoverRoot = computed(() => popover.value?.root);
-
     // Styles
     const rootStyles = computed(() => [
       'or-tooltip-v3',
@@ -77,44 +86,17 @@ export default defineComponent({
       ...TooltipBodyPlacements[props.placement],
     ]);
 
-    // Methods
-    const open = useDebounceFn(() => {
-      if (hover.value) {
-        const popoverInstance = popover.value;
-
-        if (popoverInstance) {
-          (popoverInstance.open as () => void)();
-        }
-      }
-    }, 250);
-
-    const close = useDebounceFn(() => {
-      if (!hover.value) {
-        const popoverInstance = popover.value;
-
-        if (popoverInstance) {
-          (popoverInstance.close as () => void)();
-        }
-      }
-    }, 250);
-
-    // Effects
-    // #region Hover
-    const hover = useElementHover(root);
-
-    watch(hover, (value) => {
-      value ? open() : close();
-    });
-    // #endregion
+    // State
+    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context);
 
     return {
       root,
-      popover,
-      popoverRoot,
       rootStyles,
       bodyStyles,
+      state: refDebounced(state, 250),
       open,
       close,
+      toggle,
     };
   },
 });

package/src/hooks/index.ts

@@ -2,6 +2,7 @@ export { useControlAttributes } from './useControlAttributes';
 export { useElevation } from './useElevation';
 export { useIdAttribute } from './useIdAttribute';
 export { useOverflow } from './useOverflow';
+export { usePopoverState } from './usePopoverState';
 export { useResponsive } from './useResponsive';
 export { default as useToggle } from './useToggle';
 export { useValidationAttributes } from './useValidationAttributes';

package/src/hooks/usePopoverState.ts

@@ -0,0 +1,51 @@
+import { Ref, SetupContext, UnwrapRef, ref, watch } from 'vue-demi';
+
+export interface PopoverState {
+  state: Ref<'open' | 'closed'>;
+
+  open: () => void;
+  close: () => void;
+  toggle: () => void;
+}
+
+// TODO: Remove type `any` (https://github.com/microsoft/TypeScript/issues/27808)
+// TODO: Use `defineEmits` after migration to Vue 3
+export function usePopoverState(isOpen: Ref<boolean>, context: SetupContext<('open' | 'close' | any)[]>): PopoverState {
+  // State
+  const state = ref<UnwrapRef<PopoverState['state']>>(isOpen.value ? 'open' : 'closed');
+
+  watch(isOpen, (value) => {
+    state.value = value ? 'open' : 'closed';
+  });
+
+  watch(state, (value) => {
+    switch (value) {
+      case 'open':
+        return context.emit('open');
+
+      case 'closed':
+        return context.emit('close');
+    }
+  });
+
+  // Methods
+  function open(): void {
+    state.value = 'open';
+  }
+
+  function close(): void {
+    state.value = 'closed';
+  }
+
+  function toggle(): void {
+    state.value = state.value === 'open' ? 'closed' : 'open';
+  }
+
+  return {
+    state,
+
+    open,
+    close,
+    toggle,
+  };
+}

package/dist/bundled/v3/OrMenu.vue_vue_type_script_lang-115f2c60.js

@@ -1,93 +0,0 @@
-import { defineComponent, ref, computed } from 'vue-demi';
-import { MenuRoot } from './components/OrMenuV3/styles.js';
-import './components/OrPopoverV3/OrPopover.js';
-import { s as script$1 } from './OrPopover.vue_vue_type_script_lang-7b1b2488.js';
-import { PopoverPlacement } from './components/OrPopoverV3/props.js';
-
-var script = defineComponent({
-  name: 'OrMenu',
-  components: {
-    OrPopover: script$1
-  },
-  inheritAttrs: false,
-  props: {
-    trigger: {
-      type: HTMLElement,
-      default: undefined
-    },
-    placement: {
-      type: String,
-      default: PopoverPlacement.Bottom
-    }
-  },
-  emits: ['update:state'],
-  expose: ['root', 'state', 'isOpen', 'open', 'close', 'toggle'],
-  setup() {
-    // Refs
-    const root = ref();
-    const popover = ref();
-    const popoverRoot = computed(() => {
-      var _a;
-      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.root;
-    });
-    const popoverState = computed(() => {
-      var _a;
-      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
-    });
-    // Styles
-    const rootStyles = computed(() => ['or-menu-v3', ...MenuRoot]);
-    // State
-    const isOpen = computed(() => {
-      var _a;
-      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.isOpen;
-    });
-    // Methods
-    function open() {
-      const popoverInstance = popover.value;
-      if (popoverInstance) {
-        popoverInstance.open();
-      }
-    }
-    function close() {
-      const popoverInstance = popover.value;
-      if (popoverInstance) {
-        popoverInstance.close();
-      }
-    }
-    function toggle() {
-      isOpen.value ? close() : open();
-    }
-    // Handlers
-    function onClick(event) {
-      const path = event.composedPath();
-      const classLists = path.filter(_ref => {
-        let {
-          classList
-        } = _ref;
-        return !!classList;
-      }).map(_ref2 => {
-        let {
-          classList
-        } = _ref2;
-        return classList;
-      });
-      if (classLists.some(classList => classList.contains('or-menu-item-v3'))) {
-        close();
-      }
-    }
-    return {
-      root,
-      popover,
-      popoverRoot,
-      state: popoverState,
-      rootStyles,
-      isOpen,
-      open,
-      close,
-      toggle,
-      onClick
-    };
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrModal.vue_vue_type_script_lang-202c4e2f.js

@@ -1,71 +0,0 @@
-import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { ModalSize } from './components/OrModalV3/props.js';
-import { ModalRoot, ModalRootSizes, ModalHeader, ModalContent, ModalFooter } from './components/OrModalV3/styles.js';
-import './components/OrOverlayV3/OrOverlay.js';
-import './components/OrIconButtonV3/OrIconButton.js';
-import { s as script$1 } from './OrOverlay.vue_vue_type_script_lang-86c7b93a.js';
-import { s as script$2 } from './OrIconButton.vue_vue_type_script_lang-5bba9f3f.js';
-
-var script = defineComponent({
-  name: 'OrModal',
-  components: {
-    OrOverlay: script$1,
-    OrIconButton: script$2
-  },
-  inheritAttrs: false,
-  props: {
-    size: {
-      type: String,
-      default: ModalSize.M
-    },
-    isOpen: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['open', 'close'],
-  expose: ['root', 'isActive', 'open', 'close'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-modal-v3', ...ModalRoot, ...ModalRootSizes[props.size]]);
-    const headerStyles = computed(() => [...ModalHeader]);
-    const contentStyles = computed(() => [...ModalContent]);
-    const footerStyles = computed(() => [...ModalFooter]);
-    // State
-    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() {
-      isActive.value = true;
-    }
-    function close() {
-      isActive.value = false;
-    }
-    return {
-      root,
-      rootStyles,
-      headerStyles,
-      contentStyles,
-      footerStyles,
-      isActive,
-      open,
-      close
-    };
-  }
-});
-
-export { script as s };