@onereach/ui-components 4.6.3 → 4.6.4-beta.2800.0

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>

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

@@ -0,0 +1,10 @@
+export const ModalContent: string[] = [
+  // Layout
+  'grow',
+
+  // Overflow
+  'overflow-auto',
+
+  // Spacing
+  'px-md md:px-lg',
+];

package/src/components/or-modal-v3/partials/or-modal-footer/OrModalFooter.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 { ModalFooter } from './styles';
+
+export default defineComponent({
+  name: 'OrModalFooter',
+
+  expose: [
+    'root',
+  ],
+
+  setup() {
+    // Refs
+    const root = ref<HTMLElement>();
+
+    // Styles
+    const rootStyles = computed(() => [
+      'or-modal-footer',
+      ...ModalFooter,
+    ]);
+
+    return {
+      root,
+      rootStyles,
+    };
+  },
+});
+</script>

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

@@ -0,0 +1,4 @@
+export const ModalFooter: string[] = [
+  // Spacing
+  'px-md md:px-lg',
+];

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.stop="$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-pagination-v3/OrPagination.vue

@@ -52,7 +52,7 @@
         :activated="true"
         @click.stop="limitMenu.open()"
       >
-        {{ currentLimit }} <OrIcon :icon="limitMenu && limitMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'" />
+        {{ currentLimit }} <OrIcon :icon="limitMenu && limitMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
       </OrButton>
 
       <OrMenu