@onereach/ui-components 4.7.0-beta.2809.0 → 4.7.0-beta.2811.0

package/src/components/or-bottom-sheet-v3/OrBottomSheet.vue

@@ -1,7 +1,7 @@
 <template>
   <OrOverlay
-    v-if="state !== 'closed'"
-    :fullscreen="state === 'fullscreen'"
+    v-if="state === 'open'"
+    :fullscreen="fullscreen"
   >
     <div
       ref="root"
@@ -16,7 +16,7 @@
         <slot name="header" />
       </div>
 
-      <div :class="[state === 'fullscreen' ? 'overflow-y-auto' : 'overflow-hidden']">
+      <div :class="[fullscreen ? 'overflow-y-auto' : 'overflow-hidden']">
         <slot />
       </div>
     </div>
@@ -25,7 +25,8 @@
 
 <script lang="ts">
 import { onClickOutside, SwipeDirection, usePointerSwipe } from '@vueuse/core';
-import { computed, defineComponent, PropType, ref, unref, watch } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef, unref, watch } from 'vue-demi';
+import { usePopoverState } from '../../hooks';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
 import { BottomSheetVariant } from './props';
 import { BottomSheet, BottomSheetHandle, BottomSheetHeader, BottomSheetVariants } from './styles';
@@ -40,6 +41,11 @@ export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+
     variant: {
       type: String as PropType<`${BottomSheetVariant}`>,
       default: BottomSheetVariant.Advanced,
@@ -48,20 +54,19 @@ 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',
+
     'open',
     'close',
+    'toggle',
   ],
 
   setup(props, context) {
@@ -84,53 +89,16 @@ export default defineComponent({
     ]);
 
     // State
-    const state = ref<'open' | 'fullscreen' | 'closed'>('closed');
+    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context);
 
-    const isOpen = computed(() => state.value === 'open');
-    const isFullscreen = computed(() => state.value === 'fullscreen');
-    const isClosed = computed(() => state.value === 'closed');
+    const fullscreen = 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;
+      if (value === 'closed') {
+        fullscreen.value = false;
       }
     });
 
-    // Methods
-    function open(): void {
-      state.value = 'open';
-    }
-
-    function close(auto: boolean = false): void {
-      state.value = 'closed';
-
-      if (auto) {
-        context.emit('update:state:closed-automatically');
-      }
-    }
-
-    // Handlers
-    function onSwipeUp(): void {
-      state.value = 'fullscreen';
-    }
-
-    function onSwipeDown(): void {
-      state.value = state.value === 'fullscreen' ? 'open' : 'closed';
-    }
-
     // Effects
     // #region Swipe
     const swipeOptions = {
@@ -160,7 +128,7 @@ export default defineComponent({
                 maxHeight: '100%',
               });
 
-              onSwipeUp();
+              fullscreen.value = true;
 
               break;
 
@@ -171,7 +139,11 @@ export default defineComponent({
                 maxHeight: '50%',
               });
 
-              onSwipeDown();
+              if (fullscreen.value) {
+                fullscreen.value = false;
+              } else {
+                close();
+              }
 
               break;
           }
@@ -187,7 +159,7 @@ 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();
       }
     });
     // #endregion
@@ -198,11 +170,10 @@ export default defineComponent({
       handleStyles,
       headerStyles,
       state,
-      isOpen,
-      isFullscreen,
-      isClosed,
+      fullscreen,
       open,
       close,
+      toggle,
     };
   },
 });

package/src/components/or-confirm-v3/OrConfirm.vue

@@ -1,7 +1,7 @@
 <template>
   <OrOverlay
-    v-if="isActive"
-    fullscreen
+    v-if="state === 'open'"
+    :fullscreen="true"
   >
     <div
       ref="root"
@@ -17,6 +17,7 @@
 
       <div :class="['grow', 'overflow-y-auto', 'overflow-x-hidden']">
         <slot />
+
         <div
           v-if="confirmationText"
           :class="inputBoxStyles"
@@ -67,7 +68,8 @@
 <script lang="ts">
 import { onClickOutside, useMagicKeys, whenever } from '@vueuse/core';
 import { logicAnd } from '@vueuse/math';
-import { computed, defineComponent, PropType, ref, watch } from 'vue-demi';
+import { PropType, computed, defineComponent, ref, toRef, watch } from 'vue-demi';
+import { usePopoverState } from '../../hooks';
 import { ButtonColor, OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrInputV3 as OrInput } from '../or-input-v3';
 import { OrOverlayV3 as OrOverlay } from '../or-overlay-v3';
@@ -86,6 +88,11 @@ export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+
     titleText: {
       type: String,
       required: false,
@@ -94,25 +101,21 @@ export default defineComponent({
 
     confirmButtonText: {
       type: String,
-      required: false,
       default: 'Confirm',
     },
 
     cancelButtonText: {
       type: String,
-      required: false,
       default: 'Cancel',
     },
 
     confirmType: {
       type: String as PropType<ConfirmType>,
-      required: false,
       default: ConfirmType.C,
     },
 
     loading: {
       type: Boolean,
-      required: false,
       default: false,
     },
 
@@ -124,36 +127,28 @@ export default defineComponent({
 
     confirmationText: {
       type: String,
-      required: false,
-      default: null,
+      default: undefined,
     },
 
     textConfirmationLabel: {
       type: String,
-      required: false,
-      default: null,
+      default: undefined,
     },
 
     textConfirmationPlaceholder: {
       type: String,
-      required: false,
-      default: null,
+      default: undefined,
     },
 
     textConfirmationError: {
       type: String,
-      required: false,
-      default: null,
-    },
-
-    isOpen: {
-      type: Boolean,
-      required: false,
       default: undefined,
     },
   },
 
   emits: [
+    'update:state',
+
     'open',
     'close',
     'confirm',
@@ -161,12 +156,14 @@ export default defineComponent({
 
   expose: [
     'root',
-    'isActive',
+
+    'state',
+
     'open',
     'close',
   ],
 
-  setup(props, { emit }) {
+  setup(props, context) {
     // Refs
     const root = ref<HTMLElement>();
     const confirmationInput = ref<InstanceType<typeof OrInput>>();
@@ -174,7 +171,7 @@ export default defineComponent({
 
     // State
     const touched = ref(false);
-    const isActive = ref(props.isOpen || false);
+    const { state, open, close } = usePopoverState(toRef(props, 'isOpen'), context);
     const isInputActive = ref(false);
     const confirmationValue = ref<string>('');
 
@@ -191,23 +188,10 @@ export default defineComponent({
     );
 
     // Methods
-    function open(): void {
-      isActive.value = true;
-      emit('open');
-    }
-
-    function close(): void {
-      // In case if component opened by isOpen -  only event can be emited, app will catch it and flip reference
-      if (props.isOpen === true) {
-        emit('close');
-      } else {
-        isActive.value = false;
-        emit('close');
-      }
-    }
-
     function confirm(): void {
-      if (!props.disabled && !isInvalid.value) emit('confirm');
+      if (!props.disabled && !isInvalid.value) {
+        context.emit('confirm');
+      }
     }
 
     function onInputFocus(): void {
@@ -220,20 +204,15 @@ export default defineComponent({
     }
 
     // Events
-    watch(() => props.isOpen, (value) => {
-      // In case if component opened by isOpen - no need to emmit events, we need just sync local state
-      if (value != undefined) {
-        isActive.value = value;
-      }
-    }, { immediate: true });
-
     watch(escape, (val) => {
       if (val) close();
     });
 
-    watch(isActive, () => {
-      confirmationValue.value = '';
-      touched.value = false;
+    watch(state, (value) => {
+      if (value === 'closed') {
+        confirmationValue.value = '';
+        touched.value = false;
+      }
     });
 
     // types here are used for fixing TS2349
@@ -286,7 +265,7 @@ export default defineComponent({
       isInvalid,
       isConfirmationButtonDisabled,
       touched,
-      isActive,
+      state,
       isInputActive,
       escape,
       rootStyles,

package/src/components/or-date-picker-v3/OrDatePicker.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="Date">

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

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

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

@@ -1,12 +1,12 @@
 <template>
   <OrPopover
-    ref="popover"
+    :is-open="state === 'open'"
     :variant="'auto'"
     :trigger="trigger"
     :placement="placement"
     :full-width="false"
     :disable-default-styles="false"
-    @update:state="$emit('update:state', $event)"
+    @update:state="state = $event"
   >
     <div
       ref="root"
@@ -20,7 +20,8 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref } from 'vue-demi';
+import { computed, defineComponent, PropType, ref, toRef } from 'vue-demi';
+import { usePopoverState } from '../../hooks';
 import { OrPopoverV3 as OrPopover } from '../or-popover-v3';
 import { MenuPlacement } from './props';
 import { MenuRoot } from './styles';
@@ -35,6 +36,11 @@ export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+
     trigger: {
       type: HTMLElement,
       default: undefined,
@@ -48,25 +54,25 @@ export default defineComponent({
 
   emits: [
     'update:state',
+
+    'open',
+    'close',
   ],
 
   expose: [
     'root',
+
     'state',
-    'isOpen',
+
     'open',
     'close',
     'toggle',
   ],
 
-  setup() {
+  setup(props, context) {
     // 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',
@@ -74,49 +80,21 @@ export default defineComponent({
     ]);
 
     // State
-    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();
-    }
+    const { state, open, close, toggle } = usePopoverState(toRef(props, 'isOpen'), context);
 
     // Handlers
     function onClick(event: Event): void {
       const path = event.composedPath() as HTMLElement[];
 
-      const classLists = path
-        .filter(({ classList }) => !!classList)
-        .map(({ classList }) => classList);
-
-      if (classLists.some((classList) => classList.contains('or-menu-item-v3'))) {
+      if (path.some(({ classList }) => classList?.contains('or-menu-item-v3'))) {
         close();
       }
     }
 
     return {
       root,
-      popover,
-      popoverRoot,
-      state: popoverState,
       rootStyles,
-      isOpen,
+      state,
       open,
       close,
       toggle,

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

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

package/src/components/or-modal-v3/partials/or-modal-content/OrModalContent.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    ref="root"
+    :class="rootStyles"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue-demi';
+import { ModalContent } from './styles';
+
+export default defineComponent({
+  name: 'OrModalContent',
+
+  expose: [
+    'root',
+  ],
+
+  setup() {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-modal-content',
+      ...ModalContent,
+    ]);
+
+    return {
+      root,
+      rootStyles,
+    };
+  },
+});
+</script>