@onereach/ui-components 2.67.0 → 2.67.1-beta.1985.0

package/dist/bundled/v2/{OrConfirm-bd862fdc.js → OrConfirm-b18c2ef4.js}

@@ -108,6 +108,10 @@ var script = defineComponent({
       type: String,
       required: false,
       default: null
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['open', 'close', 'confirm'],
@@ -152,6 +156,15 @@ var script = defineComponent({
     }
     // Events
     watch(isActive, value => emit(value ? 'open' : 'close'));
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
     watch(escape, val => {
       if (val) close();
     });

package/dist/bundled/v2/{OrModal-eedde1b4.js → OrModal-55fe6ad6.js}

@@ -54,6 +54,10 @@ var script = defineComponent({
     size: {
       type: String,
       default: ModalSize.M
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['open', 'close'],
@@ -72,6 +76,15 @@ var script = defineComponent({
     watch(isActive, value => {
       context.emit(value ? 'open' : 'close');
     });
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
     // Methods
     function open() {
       isActive.value = true;

package/dist/bundled/v2/components/index.js

@@ -19,7 +19,7 @@ export { _ as OrCode, O as OrCodeLanguages } from '../OrCode-edc7a1f5.js';
 export { O as OrCollapse } from '../OrCollapse-3aa9a9b7.js';
 export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker-a1a37e83.js';
 export { _ as OrConfirm } from '../OrConfirm-56d01cff.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-bd862fdc.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-b18c2ef4.js';
 export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-e212f892.js';
 export { O as OrError } from '../OrError-31503e4c.js';
 export { _ as OrErrorTagV3 } from '../OrErrorTag-c55ec019.js';
@@ -52,7 +52,7 @@ export { O as OrMenuItemV3 } from '../OrMenuItem-1360f2e7.js';
 export { O as OrMenuV3 } from '../OrMenu-2f8555ac.js';
 export { P as MenuPlacement, O as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-cf702ae7.js';
 export { O as OrModal, a as OrModalSizes } from '../OrModal-a5411b0d.js';
-export { M as ModalSize, _ as OrModalV3 } from '../OrModal-eedde1b4.js';
+export { M as ModalSize, _ as OrModalV3 } from '../OrModal-55fe6ad6.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, _ as OrNotification } from '../OrNotification-3909aaf2.js';
 export { N as NotificationVariant, _ as OrNotificationV3 } from '../OrNotification-13259dff.js';
 export { _ as OrOverflowMenu } from '../OrOverflowMenu-711e460e.js';

package/dist/bundled/v2/components/or-confirm-v3/OrConfirm.stories3.d.ts

@@ -35,3 +35,8 @@ export declare const ConfirmButtonColor: StoryFn<import("vue").ComponentOptions<
 } | string[], {} & {}, {
     [x: number]: string;
 } | {}, true>)>;
+export declare const UsingIsOpenProp: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;

package/dist/bundled/v2/components/or-confirm-v3/OrConfirm.vue.d.ts

@@ -82,6 +82,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: null;
     };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     titleText: {
         type: StringConstructor;
@@ -133,6 +137,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: null;
     };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     titleText: string;
     confirmButtonText: string;
@@ -144,6 +152,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -187,6 +196,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -200,5 +210,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
+    isOpen: boolean;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/or-confirm-v3/index.js

@@ -1,4 +1,4 @@
-export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-bd862fdc.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-b18c2ef4.js';
 import '../../index-fa6eb4ca.js';
 import 'vue';
 import '@vue/composition-api/dist/vue-composition-api.mjs';

package/dist/bundled/v2/components/or-modal-v3/OrModal.stories3.d.ts

@@ -10,3 +10,8 @@ export declare const Modal: StoryFn<import("vue").ComponentOptions<import("vue")
 } | string[], {} & {}, {
     [x: number]: string;
 } | {}, true>)>;
+export declare const UsingIsOpenProp: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;

package/dist/bundled/v2/components/or-modal-v3/OrModal.vue.d.ts

@@ -13,13 +13,22 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<ModalSize>;
         default: ModalSize;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     size: {
         type: PropType<ModalSize>;
         default: ModalSize;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     size: ModalSize;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -32,9 +41,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     close: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     size: ModalSize;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
     size: ModalSize;
+    isOpen: boolean;
 }, true>);
 export default _default;

package/dist/bundled/v2/components/or-modal-v3/index.js

@@ -1,4 +1,4 @@
-export { M as ModalSize, _ as OrModalV3 } from '../../OrModal-eedde1b4.js';
+export { M as ModalSize, _ as OrModalV3 } from '../../OrModal-55fe6ad6.js';
 import '../../index-fa6eb4ca.js';
 import 'vue';
 import '@vue/composition-api/dist/vue-composition-api.mjs';

package/dist/bundled/v2/index.js

@@ -24,7 +24,7 @@ export { _ as OrCode, O as OrCodeLanguages } from './OrCode-edc7a1f5.js';
 export { O as OrCollapse } from './OrCollapse-3aa9a9b7.js';
 export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-a1a37e83.js';
 export { _ as OrConfirm } from './OrConfirm-56d01cff.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-bd862fdc.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-b18c2ef4.js';
 export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-e212f892.js';
 export { O as OrError } from './OrError-31503e4c.js';
 export { _ as OrErrorTagV3 } from './OrErrorTag-c55ec019.js';
@@ -57,7 +57,7 @@ export { O as OrMenuItemV3 } from './OrMenuItem-1360f2e7.js';
 export { O as OrMenuV3 } from './OrMenu-2f8555ac.js';
 export { P as MenuPlacement, O as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-cf702ae7.js';
 export { O as OrModal, a as OrModalSizes } from './OrModal-a5411b0d.js';
-export { M as ModalSize, _ as OrModalV3 } from './OrModal-eedde1b4.js';
+export { M as ModalSize, _ as OrModalV3 } from './OrModal-55fe6ad6.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, _ as OrNotification } from './OrNotification-3909aaf2.js';
 export { N as NotificationVariant, _ as OrNotificationV3 } from './OrNotification-13259dff.js';
 export { _ as OrOverflowMenu } from './OrOverflowMenu-711e460e.js';

package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-84a04cfd.js → OrConfirm.vue_vue_type_script_lang-25aa633b.js}

@@ -139,6 +139,10 @@ var script = defineComponent({
       type: String,
       required: false,
       default: null
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['open', 'close', 'confirm'],
@@ -183,6 +187,15 @@ var script = defineComponent({
     }
     // Events
     watch(isActive, value => emit(value ? 'open' : 'close'));
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
     watch(escape, val => {
       if (val) close();
     });

package/dist/bundled/v3/{OrModal.vue_vue_type_script_lang-a3a4e6ce.js → OrModal.vue_vue_type_script_lang-86c2d8d6.js}

@@ -54,6 +54,10 @@ var script = defineComponent({
     size: {
       type: String,
       default: ModalSize.M
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['open', 'close'],
@@ -72,6 +76,15 @@ var script = defineComponent({
     watch(isActive, value => {
       context.emit(value ? 'open' : 'close');
     });
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
     // Methods
     function open() {
       isActive.value = true;

package/dist/bundled/v3/components/index.js

@@ -19,7 +19,7 @@ export { s as OrCode, O as OrCodeLanguages } from '../OrCode.vue_vue_type_script
 export { s as OrCollapse } from '../OrCollapse.vue_vue_type_script_lang-65cbb754.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker.vue_vue_type_script_lang-4141378d.js';
 export { s as OrConfirm } from '../OrConfirm.vue_vue_type_script_lang-0f16fc67.js';
-export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm.vue_vue_type_script_lang-84a04cfd.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm.vue_vue_type_script_lang-25aa633b.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker.vue_vue_type_script_lang-7bfe5005.js';
 export { s as OrError } from '../OrError.vue_vue_type_script_lang-7c39e012.js';
 export { s as OrErrorTagV3 } from '../OrErrorTag.vue_vue_type_script_lang-d77f6b12.js';
@@ -52,7 +52,7 @@ export { s as OrMenuItemV3 } from '../OrMenuItem.vue_vue_type_script_lang-837c00
 export { s as OrMenuV3 } from '../OrMenu.vue_vue_type_script_lang-ae4e9c15.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover.vue_vue_type_script_lang-b6b78855.js';
 export { s as OrModal, O as OrModalSizes } from '../OrModal.vue_vue_type_script_lang-a1ed2ebb.js';
-export { M as ModalSize, s as OrModalV3 } from '../OrModal.vue_vue_type_script_lang-a3a4e6ce.js';
+export { M as ModalSize, s as OrModalV3 } from '../OrModal.vue_vue_type_script_lang-86c2d8d6.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from '../OrNotification.vue_vue_type_script_lang-07163a83.js';
 export { N as NotificationVariant, s as OrNotificationV3 } from '../OrNotification.vue_vue_type_script_lang-1f1b88b2.js';
 export { s as OrOverflowMenu } from '../OrOverflowMenu.vue_vue_type_script_lang-0397533d.js';

package/dist/bundled/v3/components/or-confirm-v3/OrConfirm.stories3.d.ts

@@ -35,3 +35,8 @@ export declare const ConfirmButtonColor: StoryFn<import("vue").ComponentOptions<
 } | string[], {} & {}, {
     [x: number]: string;
 } | {}, true>)>;
+export declare const UsingIsOpenProp: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;

package/dist/bundled/v3/components/or-confirm-v3/OrConfirm.vue.d.ts

@@ -82,6 +82,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: null;
     };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     titleText: {
         type: StringConstructor;
@@ -133,6 +137,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: null;
     };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     titleText: string;
     confirmButtonText: string;
@@ -144,6 +152,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -187,6 +196,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -200,5 +210,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
+    isOpen: boolean;
 }, true>);
 export default _default;

package/dist/bundled/v3/components/or-confirm-v3/index.js

@@ -1,4 +1,4 @@
-export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm.vue_vue_type_script_lang-84a04cfd.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm.vue_vue_type_script_lang-25aa633b.js';
 import 'vue';
 import '@vueuse/core';
 import '../../index-01519e46.js';

package/dist/bundled/v3/components/or-modal-v3/OrModal.stories3.d.ts

@@ -10,3 +10,8 @@ export declare const Modal: StoryFn<import("vue").ComponentOptions<import("vue")
 } | string[], {} & {}, {
     [x: number]: string;
 } | {}, true>)>;
+export declare const UsingIsOpenProp: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;

package/dist/bundled/v3/components/or-modal-v3/OrModal.vue.d.ts

@@ -13,13 +13,22 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<ModalSize>;
         default: ModalSize;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     size: {
         type: PropType<ModalSize>;
         default: ModalSize;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     size: ModalSize;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -32,9 +41,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     close: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     size: ModalSize;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
     size: ModalSize;
+    isOpen: boolean;
 }, true>);
 export default _default;

package/dist/bundled/v3/components/or-modal-v3/index.js

@@ -1,4 +1,4 @@
-export { M as ModalSize, s as OrModalV3 } from '../../OrModal.vue_vue_type_script_lang-a3a4e6ce.js';
+export { M as ModalSize, s as OrModalV3 } from '../../OrModal.vue_vue_type_script_lang-86c2d8d6.js';
 import 'vue';
 import '../../OrBottomSheet.vue_vue_type_script_lang-9b8931d3.js';
 import '@vueuse/core';

package/dist/bundled/v3/index.js

@@ -13,8 +13,8 @@ import './OrButton-ec723bb7.js';
 export { s as OrButtonV2 } from './OrButton.vue_vue_type_script_lang-ffc66d00.js';
 import './OrIconButton-e637158e.js';
 export { s as OrIconButton } from './OrIconButton.vue_vue_type_script_lang-40547ab0.js';
-import { s as script$c } from './OrConfirm.vue_vue_type_script_lang-84a04cfd.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm.vue_vue_type_script_lang-84a04cfd.js';
+import { s as script$c } from './OrConfirm.vue_vue_type_script_lang-25aa633b.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm.vue_vue_type_script_lang-25aa633b.js';
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton.vue_vue_type_script_lang-8cc3e128.js';
 import { s as script$6 } from './OrCardCollection.vue_vue_type_script_lang-d8124dda.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection.vue_vue_type_script_lang-d8124dda.js';
@@ -65,8 +65,8 @@ export { s as OrMenuItemV3 } from './OrMenuItem.vue_vue_type_script_lang-837c00e
 import { s as script$L } from './OrTabs.vue_vue_type_script_lang-ed590ff8.js';
 export { s as OrTabsV3, T as TabsVariant } from './OrTabs.vue_vue_type_script_lang-ed590ff8.js';
 export { s as OrMenuV3 } from './OrMenu.vue_vue_type_script_lang-ae4e9c15.js';
-import { s as script$l } from './OrModal.vue_vue_type_script_lang-a3a4e6ce.js';
-export { M as ModalSize, s as OrModalV3 } from './OrModal.vue_vue_type_script_lang-a3a4e6ce.js';
+import { s as script$l } from './OrModal.vue_vue_type_script_lang-86c2d8d6.js';
+export { M as ModalSize, s as OrModalV3 } from './OrModal.vue_vue_type_script_lang-86c2d8d6.js';
 import { s as script$m } from './OrNotification.vue_vue_type_script_lang-07163a83.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from './OrNotification.vue_vue_type_script_lang-07163a83.js';
 import { s as script$n } from './OrNotification.vue_vue_type_script_lang-1f1b88b2.js';

package/dist/esm/v2/{OrConfirm-7afbef04.js → OrConfirm-cd42379c.js}

@@ -107,6 +107,10 @@ var script = defineComponent({
       type: String,
       required: false,
       default: null
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['open', 'close', 'confirm'],
@@ -151,6 +155,15 @@ var script = defineComponent({
     }
     // Events
     watch(isActive, value => emit(value ? 'open' : 'close'));
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
     watch(escape, val => {
       if (val) close();
     });

package/dist/esm/v2/{OrModal-a7b04967.js → OrModal-b40d9a17.js}

@@ -54,6 +54,10 @@ var script = defineComponent({
     size: {
       type: String,
       default: ModalSize.M
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['open', 'close'],
@@ -72,6 +76,15 @@ var script = defineComponent({
     watch(isActive, value => {
       context.emit(value ? 'open' : 'close');
     });
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
     // Methods
     function open() {
       isActive.value = true;

package/dist/esm/v2/components/index.js

@@ -19,7 +19,7 @@ export { _ as OrCode, O as OrCodeLanguages } from '../OrCode-41dd5f9b.js';
 export { _ as OrCollapse } from '../OrCollapse-4d892ca3.js';
 export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker-75abefdd.js';
 export { _ as OrConfirm } from '../OrConfirm-d7112dd3.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-7afbef04.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-cd42379c.js';
 export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-349df9b2.js';
 export { _ as OrError } from '../OrError-081130bb.js';
 export { _ as OrErrorTagV3 } from '../OrErrorTag-c14e0298.js';
@@ -52,7 +52,7 @@ export { _ as OrMenuItemV3 } from '../OrMenuItem-9034aece.js';
 export { _ as OrMenuV3 } from '../OrMenu-bb81644d.js';
 export { P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-9080fc00.js';
 export { _ as OrModal, O as OrModalSizes } from '../OrModal-97e83549.js';
-export { M as ModalSize, _ as OrModalV3 } from '../OrModal-a7b04967.js';
+export { M as ModalSize, _ as OrModalV3 } from '../OrModal-b40d9a17.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, _ as OrNotification } from '../OrNotification-a9231a83.js';
 export { N as NotificationVariant, _ as OrNotificationV3 } from '../OrNotification-999059f3.js';
 export { _ as OrOverflowMenu } from '../OrOverflowMenu-10a4166a.js';

package/dist/esm/v2/components/or-confirm-v3/OrConfirm.stories3.d.ts

@@ -35,3 +35,8 @@ export declare const ConfirmButtonColor: StoryFn<import("vue").ComponentOptions<
 } | string[], {} & {}, {
     [x: number]: string;
 } | {}, true>)>;
+export declare const UsingIsOpenProp: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;

package/dist/esm/v2/components/or-confirm-v3/OrConfirm.vue.d.ts

@@ -82,6 +82,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: null;
     };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     titleText: {
         type: StringConstructor;
@@ -133,6 +137,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: null;
     };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     titleText: string;
     confirmButtonText: string;
@@ -144,6 +152,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -187,6 +196,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -200,5 +210,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
+    isOpen: boolean;
 }, true>);
 export default _default;

package/dist/esm/v2/components/or-confirm-v3/index.js

@@ -1,4 +1,4 @@
-export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-7afbef04.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-cd42379c.js';
 import 'vue-demi';
 import '../../OrButton-eb895669.js';
 import '../../useClassAttribute-47fdb016.js';

package/dist/esm/v2/components/or-modal-v3/OrModal.stories3.d.ts

@@ -10,3 +10,8 @@ export declare const Modal: StoryFn<import("vue").ComponentOptions<import("vue")
 } | string[], {} & {}, {
     [x: number]: string;
 } | {}, true>)>;
+export declare const UsingIsOpenProp: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;

package/dist/esm/v2/components/or-modal-v3/OrModal.vue.d.ts

@@ -13,13 +13,22 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<ModalSize>;
         default: ModalSize;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     size: {
         type: PropType<ModalSize>;
         default: ModalSize;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     size: ModalSize;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -32,9 +41,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     close: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     size: ModalSize;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
     size: ModalSize;
+    isOpen: boolean;
 }, true>);
 export default _default;

package/dist/esm/v2/components/or-modal-v3/index.js

@@ -1,4 +1,4 @@
-export { M as ModalSize, _ as OrModalV3 } from '../../OrModal-a7b04967.js';
+export { M as ModalSize, _ as OrModalV3 } from '../../OrModal-b40d9a17.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/esm/v2/index.js

@@ -19,7 +19,7 @@ export { _ as OrCode, O as OrCodeLanguages } from './OrCode-41dd5f9b.js';
 export { _ as OrCollapse } from './OrCollapse-4d892ca3.js';
 export { _ as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-75abefdd.js';
 export { _ as OrConfirm } from './OrConfirm-d7112dd3.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-7afbef04.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-cd42379c.js';
 export { D as DEFAULT_TEXT, _ as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-349df9b2.js';
 export { _ as OrError } from './OrError-081130bb.js';
 export { _ as OrErrorTagV3 } from './OrErrorTag-c14e0298.js';
@@ -52,7 +52,7 @@ export { _ as OrMenuItemV3 } from './OrMenuItem-9034aece.js';
 export { _ as OrMenuV3 } from './OrMenu-bb81644d.js';
 export { P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-9080fc00.js';
 export { _ as OrModal, O as OrModalSizes } from './OrModal-97e83549.js';
-export { M as ModalSize, _ as OrModalV3 } from './OrModal-a7b04967.js';
+export { M as ModalSize, _ as OrModalV3 } from './OrModal-b40d9a17.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, _ as OrNotification } from './OrNotification-a9231a83.js';
 export { N as NotificationVariant, _ as OrNotificationV3 } from './OrNotification-999059f3.js';
 export { _ as OrOverflowMenu } from './OrOverflowMenu-10a4166a.js';

package/dist/esm/v3/{OrConfirm-4efec964.js → OrConfirm-1d4be431.js}

@@ -107,6 +107,10 @@ var script = defineComponent({
       type: String,
       required: false,
       default: null
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['open', 'close', 'confirm'],
@@ -151,6 +155,15 @@ var script = defineComponent({
     }
     // Events
     watch(isActive, value => emit(value ? 'open' : 'close'));
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
     watch(escape, val => {
       if (val) close();
     });

package/dist/esm/v3/{OrModal-892d7155.js → OrModal-794ff3f6.js}

@@ -54,6 +54,10 @@ var script = defineComponent({
     size: {
       type: String,
       default: ModalSize.M
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['open', 'close'],
@@ -72,6 +76,15 @@ var script = defineComponent({
     watch(isActive, value => {
       context.emit(value ? 'open' : 'close');
     });
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
     // Methods
     function open() {
       isActive.value = true;

package/dist/esm/v3/components/index.js

@@ -16,7 +16,7 @@ export { s as OrCode, O as OrCodeLanguages } from '../OrCode-ee19a5e6.js';
 export { s as OrCollapse } from '../OrCollapse-445141ab.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker-189cb097.js';
 export { s as OrConfirm } from '../OrConfirm-f39bd784.js';
-export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-4efec964.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-1d4be431.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from '../OrDateTimePicker-f2e08564.js';
 export { s as OrError } from '../OrError-f90296db.js';
 export { s as OrErrorTagV3 } from '../OrErrorTag-bbfd3ca6.js';
@@ -47,7 +47,7 @@ export { s as OrMenuItemV3 } from '../OrMenuItem-60afcdcb.js';
 export { s as OrMenuV3 } from '../OrMenu-75ef8635.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-3525c670.js';
 export { s as OrModal, O as OrModalSizes } from '../OrModal-8b074b0c.js';
-export { M as ModalSize, s as OrModalV3 } from '../OrModal-892d7155.js';
+export { M as ModalSize, s as OrModalV3 } from '../OrModal-794ff3f6.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from '../OrNotification-e85a4956.js';
 export { N as NotificationVariant, s as OrNotificationV3 } from '../OrNotification-0764ca9b.js';
 export { s as OrOverflowMenu } from '../OrOverflowMenu-e82cbcbe.js';

package/dist/esm/v3/components/or-confirm-v3/OrConfirm.stories3.d.ts

@@ -35,3 +35,8 @@ export declare const ConfirmButtonColor: StoryFn<import("vue").ComponentOptions<
 } | string[], {} & {}, {
     [x: number]: string;
 } | {}, true>)>;
+export declare const UsingIsOpenProp: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;

package/dist/esm/v3/components/or-confirm-v3/OrConfirm.vue.d.ts

@@ -82,6 +82,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: null;
     };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     titleText: {
         type: StringConstructor;
@@ -133,6 +137,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         required: false;
         default: null;
     };
+    isOpen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     titleText: string;
     confirmButtonText: string;
@@ -144,6 +152,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -187,6 +196,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -200,5 +210,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
     textConfirmationError: string;
+    isOpen: boolean;
 }, true>);
 export default _default;

package/dist/esm/v3/components/or-confirm-v3/index.js

@@ -1,4 +1,4 @@
-export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-4efec964.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-1d4be431.js';
 import 'vue-demi';
 import '../../OrButton-12b36e89.js';
 import '../../useClassAttribute-47fdb016.js';

package/dist/esm/v3/components/or-modal-v3/OrModal.stories3.d.ts

@@ -10,3 +10,8 @@ export declare const Modal: StoryFn<import("vue").ComponentOptions<import("vue")
 } | string[], {} & {}, {
     [x: number]: string;
 } | {}, true>)>;
+export declare const UsingIsOpenProp: StoryFn<import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;

package/dist/esm/v3/components/or-modal-v3/OrModal.vue.d.ts

@@ -13,13 +13,22 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: PropType<ModalSize>;
         default: ModalSize;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     size: {
         type: PropType<ModalSize>;
         default: ModalSize;
     };
+    isOpen: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     size: ModalSize;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -32,9 +41,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     close: () => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     size: ModalSize;
+    isOpen: boolean;
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
     size: ModalSize;
+    isOpen: boolean;
 }, true>);
 export default _default;

package/dist/esm/v3/components/or-modal-v3/index.js

@@ -1,4 +1,4 @@
-export { M as ModalSize, s as OrModalV3 } from '../../OrModal-892d7155.js';
+export { M as ModalSize, s as OrModalV3 } from '../../OrModal-794ff3f6.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/esm/v3/index.js

@@ -16,7 +16,7 @@ export { s as OrCode, O as OrCodeLanguages } from './OrCode-ee19a5e6.js';
 export { s as OrCollapse } from './OrCollapse-445141ab.js';
 export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from './OrColorPicker-189cb097.js';
 export { s as OrConfirm } from './OrConfirm-f39bd784.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-4efec964.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-1d4be431.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker-f2e08564.js';
 export { s as OrError } from './OrError-f90296db.js';
 export { s as OrErrorTagV3 } from './OrErrorTag-bbfd3ca6.js';
@@ -47,7 +47,7 @@ export { s as OrMenuItemV3 } from './OrMenuItem-60afcdcb.js';
 export { s as OrMenuV3 } from './OrMenu-75ef8635.js';
 export { P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-3525c670.js';
 export { s as OrModal, O as OrModalSizes } from './OrModal-8b074b0c.js';
-export { M as ModalSize, s as OrModalV3 } from './OrModal-892d7155.js';
+export { M as ModalSize, s as OrModalV3 } from './OrModal-794ff3f6.js';
 export { a as OR_NOTIFICATION_SIZE, O as OR_NOTIFICATION_TYPE, s as OrNotification } from './OrNotification-e85a4956.js';
 export { N as NotificationVariant, s as OrNotificationV3 } from './OrNotification-0764ca9b.js';
 export { s as OrOverflowMenu } from './OrOverflowMenu-e82cbcbe.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.67.0",
+  "version": "2.67.1-beta.1985.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -122,6 +122,5 @@
       "types": "./dist/bundled/v3/components/*/index.d.ts",
       "default": "./dist/bundled/v3/components/*/index.js"
     }
-  },
-  "gitHead": "9ff819514bf6e4ada6c046de3e0ddc2e9e241b48"
+  }
 }

package/src/components/or-confirm-v3/OrConfirm.stories3.ts

@@ -6,6 +6,7 @@ import OrConfirm from './OrConfirm.vue';
 import { ConfirmType } from './props';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { ref } from 'vue-demi';
+import { useArgs } from '@storybook/client-api';
 
 export default {
   title: 'Components/Confirm',
@@ -81,6 +82,10 @@ export default {
     textConfirmationError: {
       control: { type: 'text' },
     },
+
+    isOpen: {
+      control: { type: 'boolean' },
+    },
   },
 
   parameters: {
@@ -143,6 +148,61 @@ const Template: StoryFn<typeof OrConfirm> = (args) => ({
   `,
 });
 
+const TemplateIsOpen: StoryFn<typeof OrConfirm> = () => {
+  const [args, updateArgs] = useArgs();
+  return {
+    components: {
+      OrConfirm,
+      OrButton,
+    },
+
+    setup() {
+      const isOpen = ref(args.isOpen);
+      return {
+        args,
+        isOpen,
+        onOpen: action('open'),
+        onClose: () => {
+          isOpen.value = false;
+          updateArgs({
+            ...args,
+            isOpen: false,
+          });
+          action('close');
+        },
+        onConfirm: (event: any) => {
+          isOpen.value = false;
+          action('confirm')(event);
+        },
+      };
+    },
+
+    template: `
+    <div class="contents">
+      <OrButton @click="isOpen = true">Confirmation modal</OrButton>
+
+      <OrConfirm
+        v-bind="args"
+        :is-open="isOpen"
+        @open="onOpen"
+        @close="onClose"
+        @confirm="onConfirm"
+      >
+        <template #default v-if="args.default">
+          ${args.default}
+        </template>
+        <template #header v-if="args.header">
+          ${args.header}
+        </template>
+        <template #footer v-if="args.footer">
+          ${args.footer}
+        </template>
+      </OrConfirm>
+    </div>
+  `,
+  };
+};
+
 export const Default = Template.bind({});
 Default.args = {
   titleText: 'Delete permanently',
@@ -192,3 +252,11 @@ ConfirmButtonColor.args = {
   confirmButtonText: 'Yes',
   cancelButtonText: 'No',
 };
+export const UsingIsOpenProp = TemplateIsOpen.bind({});
+UsingIsOpenProp.args = {
+  titleText: 'Confirm',
+  default: `Are you sure you want to <i>${Faker.hacker.verb()}</i> the <b>${Faker.hacker.noun()}</b>?`,
+  confirmType: ConfirmType.C,
+  confirmButtonText: 'Yes',
+  cancelButtonText: 'No',
+};

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

@@ -139,6 +139,10 @@ export default defineComponent({
       required: false,
       default: null,
     },
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: [
@@ -203,6 +207,14 @@ export default defineComponent({
     // Events
     watch(isActive, (value: boolean) => emit(value ? 'open' : 'close'));
 
+    watch(() => props.isOpen, (newIsOpen) => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, { immediate: true });
+
     watch(escape, (val) => {
       if (val) close();
     });

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`, `isOpen`, and `isWithoutOverlay`
+  - removed properties `titleText`, `showClose`, `closeOnClickOutside`, `size`, and `isWithoutOverlay`

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(false);
+
+    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;