@onereach/ui-components 2.67.1-beta.1988.0 → 2.67.1

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

@@ -44,6 +44,10 @@ export default {
       control: { type: 'select' },
       options: Object.values(ModalSize),
     },
+
+    isOpen: {
+      control: { type: 'boolean' },
+    },
   },
 
   parameters: {
@@ -120,3 +124,71 @@ 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,6 +53,10 @@ export default defineComponent({
       type: String as PropType<ModalSize>,
       default: ModalSize.M,
     },
+    isOpen: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
   },
 
   emits: [
@@ -97,6 +101,14 @@ 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="handleBottomSheetState"
+        @update:state="$emit('update:state', $event)"
       >
         <slot />
       </OrBottomSheet>
@@ -83,7 +83,6 @@ export default defineComponent({
   expose: [
     'root',
     'state',
-    'isOpen',
     'open',
     'close',
   ],
@@ -113,7 +112,6 @@ export default defineComponent({
 
     // State
     const state = ref<'open' | 'closed'>('closed');
-    const isOpen = computed(() => state.value === 'open');
 
     // Events
     watch(state, (value) => {
@@ -187,15 +185,6 @@ 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);
@@ -244,11 +233,9 @@ export default defineComponent({
       root,
       bottomSheet,
       bottomSheetRoot,
-      handleBottomSheetState,
       rootStyles,
       bodyStyles,
       state,
-      isOpen,
       open,
       close,
     };