@onereach/ui-components 4.6.2-beta.2777.0 → 4.6.2-beta.2779.0

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

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

@@ -62,7 +62,7 @@
         </template>
 
         <template v-else>
-          <template v-if="proxyModelValue">
+          <template v-if="!isEmptyModelValue">
             <slot
               name="valueTemplate"
               :model="proxyModelValue"
@@ -229,6 +229,7 @@
 import { computed, defineComponent, getCurrentInstance, onMounted, PropType, ref, watch } from 'vue-demi';
 import { DropdownClose, DropdownOpen } from '../../directives';
 import { useOverflow } from '../../hooks';
+import { isEmptyValue } from '../../utils/isEmptyValue';
 import { OrCheckboxV3 as OrCheckbox } from '../or-checkbox-v3';
 import { OrErrorV3 as OrError } from '../or-error-v3';
 import { OrExpansionPanelV3 as OrExpansionPanel } from '../or-expansion-panel-v3';
@@ -418,6 +419,12 @@ export default defineComponent({
       },
     });
 
+    const isEmptyModelValue = computed(() => {
+      return Array.isArray(proxyModelValue.value)
+        ? proxyModelValue.value.length === 0
+        : isEmptyValue(proxyModelValue.value);
+    });
+
     onMounted(() => {
       if (!proxyModelValue.value && props.multiple) {
         proxyModelValue.value = [];
@@ -527,6 +534,7 @@ export default defineComponent({
       controlId,
       proxyModelValue,
       readonly,
+      isEmptyModelValue,
       selection,
       searchText,
       internalSearchOptions,

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

@@ -43,7 +43,7 @@
         :bottom-sheet-props="{ variant: 'basic' }"
         :trigger="inputBoxRoot"
         :placement="'bottom-start'"
-        @close="reset()"
+        @update:state:closed-automatically="reset()"
       >
         <OrDateTimePickerPopoverHeader>
           <OrDateTimePickerMobileControl label="Time">

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

@@ -2,21 +2,18 @@
   <div
     ref="root"
     :class="rootStyles"
-    @mouseenter="open()"
-    @mouseleave="close()"
   >
     <slot />
 
     <template v-if="text">
       <OrPopover
-        :is-open="state === 'open'"
+        ref="popover"
         :variant="'popover'"
         :trigger="root"
         :placement="placement"
         :full-width="false"
         :disable-default-styles="true"
-        @open="open()"
-        @close="close()"
+        @update:state="$emit('update:state', $event)"
       >
         <div :class="bodyStyles">
           {{ text }}
@@ -27,12 +24,11 @@
 </template>
 
 <script lang="ts">
-import { PropType, computed, defineComponent, ref, toRef } from 'vue-demi';
-import { usePopoverState } from '../../hooks';
+import { useDebounceFn, useElementHover } from '@vueuse/core';
+import { PropType, computed, defineComponent, ref, watch } from 'vue-demi';
 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',
@@ -42,39 +38,34 @@ 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: [
-    'open',
-    'close',
+    'update:state',
   ],
 
   expose: [
     'root',
-
     'open',
     'close',
-    'toggle',
   ],
 
-  setup(props, context) {
+  setup(props) {
     // Refs
     const root = ref<HTMLElement>();
 
+    const popover = ref<InstanceType<typeof OrPopover>>();
+    const popoverRoot = computed(() => popover.value?.root);
+
     // Styles
     const rootStyles = computed(() => [
       'or-tooltip-v3',
@@ -86,17 +77,44 @@ export default defineComponent({
       ...TooltipBodyPlacements[props.placement],
     ]);
 
-    // State
-    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context);
+    // 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
 
     return {
       root,
+      popover,
+      popoverRoot,
       rootStyles,
       bodyStyles,
-      state: refDebounced(state, 250),
       open,
       close,
-      toggle,
     };
   },
 });

package/src/hooks/index.ts

@@ -2,7 +2,6 @@ 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/utils/isEmpty.ts

@@ -1 +1,3 @@
-export const isEmpty = (val: any) => val == null || !(Object.keys(val) || val).length;
+export function isEmpty(val: any): boolean {
+  return val == null || !(Object.keys(val) || val).length;
+}

package/src/utils/isEmptyValue.ts

@@ -0,0 +1,3 @@
+export function isEmptyValue(val: string|number|boolean|null|undefined): boolean {
+  return val === undefined || val === null || val === '';
+}

package/dist/bundled/v2/hooks/usePopoverState.d.ts

@@ -1,8 +0,0 @@
-import { Ref, SetupContext } from 'vue-demi';
-export interface PopoverState {
-    state: Ref<'open' | 'closed'>;
-    open: () => void;
-    close: () => void;
-    toggle: () => void;
-}
-export declare function usePopoverState(isOpen: Ref<boolean>, context: SetupContext<('open' | 'close' | any)[]>): PopoverState;

package/dist/bundled/v2/hooks/usePopoverState.js

@@ -1,37 +0,0 @@
-import { ref, watch } from 'vue-demi';
-
-// TODO: Remove type `any` (https://github.com/microsoft/TypeScript/issues/27808)
-// TODO: Use `defineEmits` after migration to Vue 3
-function usePopoverState(isOpen, context) {
-  // State
-  const state = ref(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() {
-    state.value = 'open';
-  }
-  function close() {
-    state.value = 'closed';
-  }
-  function toggle() {
-    state.value = state.value === 'open' ? 'closed' : 'open';
-  }
-  return {
-    state,
-    open,
-    close,
-    toggle
-  };
-}
-
-export { usePopoverState };

package/dist/bundled/v3/OrMenu.vue_vue_type_script_lang-a8e1eb6d.js

@@ -1,66 +0,0 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import { MenuRoot } from './components/OrMenuV3/styles.js';
-import './components/OrPopoverV3/OrPopover.js';
-import { usePopoverState } from './hooks/usePopoverState.js';
-import { s as script$1 } from './OrPopover.vue_vue_type_script_lang-3592b581.js';
-import { PopoverPlacement } from './components/OrPopoverV3/props.js';
-
-var script = defineComponent({
-  name: 'OrMenu',
-  components: {
-    OrPopover: script$1
-  },
-  inheritAttrs: false,
-  props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
-    trigger: {
-      type: HTMLElement,
-      default: undefined
-    },
-    placement: {
-      type: String,
-      default: PopoverPlacement.Bottom
-    }
-  },
-  emits: ['open', 'close'],
-  expose: ['root', 'open', 'close', 'toggle'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-menu-v3', ...MenuRoot]);
-    // State
-    const {
-      state,
-      open,
-      close,
-      toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context);
-    // Handlers
-    function onClick(event) {
-      const path = event.composedPath();
-      if (path.some(_ref => {
-        let {
-          classList
-        } = _ref;
-        return classList === null || classList === void 0 ? void 0 : classList.contains('or-menu-item-v3');
-      })) {
-        close();
-      }
-    }
-    return {
-      root,
-      rootStyles,
-      state,
-      open,
-      close,
-      toggle,
-      onClick
-    };
-  }
-});
-
-export { script as s };

package/dist/bundled/v3/OrModal.vue_vue_type_script_lang-6b9587d0.js

@@ -1,160 +0,0 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import { openBlock, createElementBlock, normalizeClass, renderSlot, resolveComponent, createElementVNode, createVNode, withModifiers } from 'vue';
-import './components/OrIconButtonV3/OrIconButton.js';
-import { s as script$4 } from './OrIconButton.vue_vue_type_script_lang-17f98298.js';
-import { ModalSize } from './components/OrModalV3/props.js';
-import { ModalRoot, ModalRootSizes } from './components/OrModalV3/styles.js';
-import './components/OrOverlayV3/OrOverlay.js';
-import { usePopoverState } from './hooks/usePopoverState.js';
-import { s as script$5 } from './OrOverlay.vue_vue_type_script_lang-86c7b93a.js';
-
-const ModalContent = [
-// Layout
-'grow',
-// Overflow
-'overflow-auto',
-// Spacing
-'px-md md:px-lg'];
-
-var script$3 = defineComponent({
-  name: 'OrModalContent',
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-modal-content', ...ModalContent]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
-}
-
-script$3.render = render$2;
-script$3.__file = "src/components/or-modal-v3/partials/or-modal-content/OrModalContent.vue";
-
-const ModalFooter = [
-// Spacing
-'px-md md:px-lg'];
-
-var script$2 = defineComponent({
-  name: 'OrModalFooter',
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-modal-footer', ...ModalFooter]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */);
-}
-
-script$2.render = render$1;
-script$2.__file = "src/components/or-modal-v3/partials/or-modal-footer/OrModalFooter.vue";
-
-const ModalHeader = [
-// Layout
-'layout-row',
-// Spacing
-'px-md md:px-lg',
-// Typography
-'typography-headline-2'];
-
-var script$1 = defineComponent({
-  name: 'OrModalHeader',
-  components: {
-    OrIconButton: script$4
-  },
-  emits: ['close'],
-  expose: ['root'],
-  setup() {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-modal-header', ...ModalHeader]);
-    return {
-      root,
-      rootStyles
-    };
-  }
-});
-
-const _hoisted_1 = {
-  class: /*#__PURE__*/normalizeClass(['grow'])
-};
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_OrIconButton = resolveComponent("OrIconButton");
-  return openBlock(), createElementBlock("div", {
-    ref: "root",
-    class: normalizeClass(_ctx.rootStyles)
-  }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "default")]), createVNode(_component_OrIconButton, {
-    icon: 'close',
-    size: 'l',
-    onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.$emit('close'), ["stop"]))
-  })], 2 /* CLASS */);
-}
-
-script$1.render = render;
-script$1.__file = "src/components/or-modal-v3/partials/or-modal-header/OrModalHeader.vue";
-
-var script = defineComponent({
-  name: 'OrModal',
-  components: {
-    OrModalContent: script$3,
-    OrModalFooter: script$2,
-    OrModalHeader: script$1,
-    OrOverlay: script$5
-  },
-  inheritAttrs: false,
-  props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
-    size: {
-      type: String,
-      default: ModalSize.M
-    }
-  },
-  emits: ['open', 'close'],
-  expose: ['root', 'open', 'close'],
-  setup(props, context) {
-    // Refs
-    const root = ref();
-    // Styles
-    const rootStyles = computed(() => ['or-modal-v3', ...ModalRoot, ...ModalRootSizes[props.size]]);
-    // State
-    const {
-      state,
-      open,
-      close
-    } = usePopoverState(toRef(props, 'isOpen'), context);
-    return {
-      root,
-      rootStyles,
-      state,
-      open,
-      close
-    };
-  }
-});
-
-export { script as s };