@onereach/ui-components 2.67.1 → 2.68.0-beta.1987.0

package/src/components/or-modal-v3/OrModal.docs.mdx

@@ -7,4 +7,4 @@ import { OrModalV3 as OrModal } from '@onereach/ui-components';
 <DocsPage />
 
 ## Migration Guide from V1
-  - removed properties `titleText`, `showClose`, `closeOnClickOutside`, `size`, and `isWithoutOverlay`
+  - removed properties `titleText`, `showClose`, `closeOnClickOutside`, `size`, `isOpen`, and `isWithoutOverlay`

package/src/components/or-modal-v3/OrModal.stories3.ts

@@ -44,10 +44,6 @@ export default {
       control: { type: 'select' },
       options: Object.values(ModalSize),
     },
-
-    isOpen: {
-      control: { type: 'boolean' },
-    },
   },
 
   parameters: {
@@ -124,71 +120,3 @@ Modal.args = {
     </div>
   `,
 };
-
-
-const TemplateIsOpen: StoryFn<typeof OrModal> = (args) => ({
-  components: {
-    OrButton,
-    OrModal,
-  },
-
-  setup() {
-    const isOpen = ref(args.isOpen);
-
-    function handleClose() {
-      isOpen.value = false;
-      action('close');
-    }
-
-    return {
-      args,
-      isOpen,
-      handleOpen: action('open'),
-      handleClose,
-    };
-  },
-
-  template: `
-    <div class="contents">
-      <OrButton @click="isOpen = true">Modal</OrButton>
-
-      <OrModal
-        v-bind="args"
-        :is-open="isOpen"
-        @open="handleOpen"
-        @close="handleClose"
-      >
-        <template #header>
-          ${args.header}
-        </template>
-
-        ${args.default}
-
-        <template #footer>
-          ${args.footer}
-        </template>
-      </OrModal>
-    </div>
-  `,
-});
-
-export const UsingIsOpenProp = TemplateIsOpen.bind({});
-
-UsingIsOpenProp.args = {
-  // Slots
-  header: 'Upload Files',
-
-  default: `
-    <div class="flex items-center justify-center">
-      Content Area
-    </div>
-  `,
-
-  footer: `
-    <div class="flex items-center justify-end gap-[16px]">
-      <OrButton variant="outlined">Save</OrButton>
-      <OrButton>Upload</OrButton>
-    </div>
-  `,
-};
-

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

@@ -53,10 +53,6 @@ export default defineComponent({
       type: String as PropType<ModalSize>,
       default: ModalSize.M,
     },
-    isOpen: {
-      type: Boolean as PropType<boolean>,
-      default: false,
-    },
   },
 
   emits: [
@@ -101,14 +97,6 @@ export default defineComponent({
       context.emit(value ? 'open' : 'close');
     });
 
-    watch(() => props.isOpen, (newIsOpen) => {
-      if (newIsOpen) {
-        open();
-      } else {
-        close();
-      }
-    }, { immediate: true });
-
     // Methods
     function open(): void {
       isActive.value = true;

package/src/components/or-popover-v3/OrPopover.vue

@@ -21,7 +21,7 @@
     <template v-if="isMobile && variant === 'auto' || variant === 'bottom-sheet'">
       <OrBottomSheet
         ref="bottomSheet"
-        @update:state="$emit('update:state', $event)"
+        @update:state="handleBottomSheetState"
       >
         <slot />
       </OrBottomSheet>
@@ -83,6 +83,7 @@ export default defineComponent({
   expose: [
     'root',
     'state',
+    'isOpen',
     'open',
     'close',
   ],
@@ -112,6 +113,7 @@ export default defineComponent({
 
     // State
     const state = ref<'open' | 'closed'>('closed');
+    const isOpen = computed(() => state.value === 'open');
 
     // Events
     watch(state, (value) => {
@@ -185,6 +187,15 @@ export default defineComponent({
       }
     }
 
+    // Handlers
+    function handleBottomSheetState(bottomSheetState: string): void {
+      if (bottomSheetState === 'closed') {
+        state.value = 'closed';
+      } else {
+        state.value = 'open';
+      }
+    }
+
     // Effects
     watchPostEffect(() => {
       const rootElement = unref(root);
@@ -233,9 +244,11 @@ export default defineComponent({
       root,
       bottomSheet,
       bottomSheetRoot,
+      handleBottomSheetState,
       rootStyles,
       bodyStyles,
       state,
+      isOpen,
       open,
       close,
     };