@onereach/ui-components 4.6.0 → 4.6.1-beta.2760.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,31 +127,21 @@ 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,
     },
   },
@@ -161,12 +154,12 @@ export default defineComponent({
 
   expose: [
     'root',
-    'isActive',
+
     'open',
     'close',
   ],
 
-  setup(props, { emit }) {
+  setup(props, context) {
     // Refs
     const root = ref<HTMLElement>();
     const confirmationInput = ref<InstanceType<typeof OrInput>>();
@@ -174,7 +167,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 +184,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 +200,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 +261,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">
@@ -78,7 +78,7 @@
             :icon="'close'"
             :color="'inherit'"
             :disabled="readonly || disabled"
-            @click.stop="$emit('update:modelValue', undefined)"
+            @click="$emit('update:modelValue', undefined)"
           />
         </template>
 

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">
@@ -123,7 +123,7 @@
             :icon="'close'"
             :color="'inherit'"
             :disabled="readonly || disabled"
-            @click.stop="$emit('update:modelValue', undefined)"
+            @click="$emit('update:modelValue', undefined)"
           />
         </template>
 

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-date-select/OrDateTimePickerDateSelect.vue

@@ -23,7 +23,7 @@
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
         :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
         :disabled="dateFilter && !dateFilter(value)"
-        @click.stop="proxyModelValue = value"
+        @click="proxyModelValue = value"
       >
         {{ formatDay(value) }}
       </OrButton>

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-month-select/OrDateTimePickerMonthSelect.vue

@@ -5,7 +5,7 @@
   >
     <OrIconButton
       :icon="'chevron_left'"
-      @click.stop="goToPreviousMonth()"
+      @click="goToPreviousMonth()"
     />
 
     <div :class="['layout-row-reverse', 'gap-md']">
@@ -13,7 +13,7 @@
         ref="yearButton"
         :variant="'link'"
         :color="'inherit'"
-        @click.stop="monthMenu.close(); yearMenu.open()"
+        @click="monthMenu.close(); yearMenu.open()"
       >
         {{ formatYear(proxyModelValue) }} <OrIcon :icon="yearMenuState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
       </OrButton>
@@ -22,7 +22,7 @@
         ref="monthButton"
         :variant="'link'"
         :color="'inherit'"
-        @click.stop="yearMenu.close(); monthMenu.open()"
+        @click="yearMenu.close(); monthMenu.open()"
       >
         {{ formatMonth(proxyModelValue) }} <OrIcon :icon="monthMenuState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'" />
       </OrButton>
@@ -36,7 +36,7 @@
           :key="Number(value)"
           :selected="Number(value) === Number(proxyModelValue)"
           :disabled="yearFilter && !yearFilter(value)"
-          @click.stop="proxyModelValue = value; yearMenu.close()"
+          @click="proxyModelValue = value; yearMenu.close()"
         >
           {{ formatYear(value) }}
         </OrMenuItem>
@@ -51,7 +51,7 @@
           :key="Number(value)"
           :selected="Number(value) === Number(proxyModelValue)"
           :disabled="monthFilter && !monthFilter(value)"
-          @click.stop="proxyModelValue = value; monthMenu.close()"
+          @click="proxyModelValue = value; monthMenu.close()"
         >
           {{ formatMonth(value) }}
         </OrMenuItem>
@@ -60,7 +60,7 @@
 
     <OrIconButton
       :icon="'chevron_right'"
-      @click.stop="goToNextMonth()"
+      @click="goToNextMonth()"
     />
   </div>
 </template>

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-popover-footer/OrDateTimePickerPopoverFooter.vue

@@ -5,14 +5,14 @@
   >
     <OrButton
       :variant="'outlined'"
-      @click.stop="$emit('apply')"
+      @click="$emit('apply')"
     >
       Done
     </OrButton>
 
     <OrButton
       :variant="'text'"
-      @click.stop="$emit('reset')"
+      @click="$emit('reset')"
     >
       Cancel
     </OrButton>

package/src/components/or-date-time-picker-v3/partials/or-date-time-picker-time-select/OrDateTimePickerTimeSelect.vue

@@ -11,7 +11,7 @@
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
         :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
         :disabled="hoursFilter && !hoursFilter(value)"
-        @click.stop="proxyModelValue = value"
+        @click="proxyModelValue = value"
       >
         {{ formatHours(value) }}
       </OrButton>
@@ -27,7 +27,7 @@
         :variant="Number(value) === Number(proxyModelValue) ? 'contained' : 'text'"
         :color="Number(value) === Number(proxyModelValue) ? 'primary' : 'inherit'"
         :disabled="minutesFilter && !minutesFilter(value)"
-        @click.stop="proxyModelValue = value"
+        @click="proxyModelValue = value"
       >
         {{ formatMinutes(value) }}
       </OrButton>

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

@@ -1,18 +1,19 @@
 <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)"
+    @open="open()"
+    @close="close()"
   >
     <div
       ref="root"
       v-bind="$attrs"
       :class="rootStyles"
-      @click.stop="onClick"
+      @click="onClick"
     >
       <slot />
     </div>
@@ -20,7 +21,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 +37,11 @@ export default defineComponent({
   inheritAttrs: false,
 
   props: {
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+
     trigger: {
       type: HTMLElement,
       default: undefined,
@@ -47,26 +54,22 @@ 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 +77,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,54 +8,53 @@
       v-bind="$attrs"
       :class="rootStyles"
     >
-      <div :class="headerStyles">
-        <div :class="['grow']">
-          <slot name="header" />
-        </div>
+      <OrModalHeader @close="close()">
+        <slot name="header" />
+      </OrModalHeader>
 
-        <OrIconButton
-          :icon="'close'"
-          :size="'l'"
-          @click.stop="close"
-        />
-      </div>
-
-      <div :class="contentStyles">
+      <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: [
@@ -65,7 +64,7 @@ export default defineComponent({
 
   expose: [
     'root',
-    'isActive',
+
     'open',
     'close',
   ],
@@ -81,50 +80,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,7 @@
+export const ModalContent: string[] = [
+  // 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',
+];