@onereach/ui-components 2.74.1 → 2.74.2-beta.2297.0

package/dist/bundled/v2/{OrConfirm-d3a9f7b9.js → OrConfirm-36302f66.js}

@@ -120,7 +120,8 @@ var script = defineComponent({
     },
     isOpen: {
       type: Boolean,
-      default: false
+      required: false,
+      default: undefined
     }
   },
   emits: ['open', 'close', 'confirm'],
@@ -134,7 +135,7 @@ var script = defineComponent({
     const confirmationButton = ref();
     // State
     const touched = ref(false);
-    const isActive = ref(false);
+    const isActive = ref(props.isOpen || false);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
     const {
@@ -149,9 +150,16 @@ var script = defineComponent({
     // Methods
     function open() {
       isActive.value = true;
+      emit('open');
     }
     function close() {
-      isActive.value = false;
+      // 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() {
       if (!props.disabled && !isInvalid.value) emit('confirm');
@@ -164,12 +172,10 @@ var script = defineComponent({
       touched.value = true;
     }
     // Events
-    watch(isActive, value => emit(value ? 'open' : 'close'));
-    watch(() => props.isOpen, newIsOpen => {
-      if (newIsOpen) {
-        open();
-      } else {
-        close();
+    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

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

@@ -19,7 +19,7 @@ export { _ as OrCode, O as OrCodeLanguages } from '../OrCode-fc6876ec.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-55b89b17.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-d3a9f7b9.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-36302f66.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-4675604d.js';

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

@@ -84,7 +84,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     isOpen: {
         type: BooleanConstructor;
-        default: boolean;
+        required: false;
+        default: undefined;
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     titleText: {
@@ -139,7 +140,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     isOpen: {
         type: BooleanConstructor;
-        default: boolean;
+        required: false;
+        default: undefined;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     titleText: string;

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

@@ -1,4 +1,4 @@
-export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-d3a9f7b9.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-36302f66.js';
 import '@vueuse/core';
 import '../../index-17f264f9.js';
 import '../../index-fa6eb4ca.js';

package/dist/bundled/v2/index.js

@@ -24,7 +24,7 @@ export { _ as OrCode, O as OrCodeLanguages } from './OrCode-fc6876ec.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-55b89b17.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-d3a9f7b9.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-36302f66.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-4675604d.js';

package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-20309110.js → OrConfirm.vue_vue_type_script_lang-4a2b7647.js}

@@ -121,7 +121,8 @@ var script = defineComponent({
     },
     isOpen: {
       type: Boolean,
-      default: false
+      required: false,
+      default: undefined
     }
   },
   emits: ['open', 'close', 'confirm'],
@@ -135,7 +136,7 @@ var script = defineComponent({
     const confirmationButton = ref();
     // State
     const touched = ref(false);
-    const isActive = ref(false);
+    const isActive = ref(props.isOpen || false);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
     const {
@@ -150,9 +151,16 @@ var script = defineComponent({
     // Methods
     function open() {
       isActive.value = true;
+      emit('open');
     }
     function close() {
-      isActive.value = false;
+      // 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() {
       if (!props.disabled && !isInvalid.value) emit('confirm');
@@ -165,12 +173,10 @@ var script = defineComponent({
       touched.value = true;
     }
     // Events
-    watch(isActive, value => emit(value ? 'open' : 'close'));
-    watch(() => props.isOpen, newIsOpen => {
-      if (newIsOpen) {
-        open();
-      } else {
-        close();
+    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

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-41b4d791.js';
-export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm.vue_vue_type_script_lang-20309110.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm.vue_vue_type_script_lang-4a2b7647.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-bfa4c580.js';

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

@@ -84,7 +84,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     isOpen: {
         type: BooleanConstructor;
-        default: boolean;
+        required: false;
+        default: undefined;
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     titleText: {
@@ -139,7 +140,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     isOpen: {
         type: BooleanConstructor;
-        default: boolean;
+        required: false;
+        default: undefined;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     titleText: string;

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-20309110.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm.vue_vue_type_script_lang-4a2b7647.js';
 import '@vueuse/core';
 import '../../index-01519e46.js';
 import 'vue';

package/dist/bundled/v3/index.js

@@ -39,8 +39,8 @@ import { s as script$8 } from './OrColorPicker.vue_vue_type_script_lang-4141378d
 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';
 import { s as script$9 } from './OrConfirm.vue_vue_type_script_lang-41b4d791.js';
 export { s as OrConfirm } from './OrConfirm.vue_vue_type_script_lang-41b4d791.js';
-import { s as script$a } from './OrConfirm.vue_vue_type_script_lang-20309110.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm.vue_vue_type_script_lang-20309110.js';
+import { s as script$a } from './OrConfirm.vue_vue_type_script_lang-4a2b7647.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm.vue_vue_type_script_lang-4a2b7647.js';
 import { s as script$b } from './OrDateTimePicker.vue_vue_type_script_lang-7bfe5005.js';
 export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemTypes, O as OrDateTimePickerTypes } from './OrDateTimePicker.vue_vue_type_script_lang-7bfe5005.js';
 import { s as script$c } from './OrErrorTag.vue_vue_type_script_lang-bfa4c580.js';

package/dist/esm/v2/{OrConfirm-d2aec18c.js → OrConfirm-ea7fc8e7.js}

@@ -119,7 +119,8 @@ var script = defineComponent({
     },
     isOpen: {
       type: Boolean,
-      default: false
+      required: false,
+      default: undefined
     }
   },
   emits: ['open', 'close', 'confirm'],
@@ -133,7 +134,7 @@ var script = defineComponent({
     const confirmationButton = ref();
     // State
     const touched = ref(false);
-    const isActive = ref(false);
+    const isActive = ref(props.isOpen || false);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
     const {
@@ -148,9 +149,16 @@ var script = defineComponent({
     // Methods
     function open() {
       isActive.value = true;
+      emit('open');
     }
     function close() {
-      isActive.value = false;
+      // 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() {
       if (!props.disabled && !isInvalid.value) emit('confirm');
@@ -163,12 +171,10 @@ var script = defineComponent({
       touched.value = true;
     }
     // Events
-    watch(isActive, value => emit(value ? 'open' : 'close'));
-    watch(() => props.isOpen, newIsOpen => {
-      if (newIsOpen) {
-        open();
-      } else {
-        close();
+    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

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

@@ -19,7 +19,7 @@ export { _ as OrCode, O as OrCodeLanguages } from '../OrCode-d4400b42.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-ede619eb.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-d2aec18c.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-ea7fc8e7.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-7cd5dc68.js';

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

@@ -84,7 +84,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     isOpen: {
         type: BooleanConstructor;
-        default: boolean;
+        required: false;
+        default: undefined;
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     titleText: {
@@ -139,7 +140,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     isOpen: {
         type: BooleanConstructor;
-        default: boolean;
+        required: false;
+        default: undefined;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     titleText: string;

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

@@ -1,4 +1,4 @@
-export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-d2aec18c.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-ea7fc8e7.js';
 import '@vueuse/core';
 import '@vueuse/math';
 import 'vue-demi';

package/dist/esm/v2/index.js

@@ -19,7 +19,7 @@ export { _ as OrCode, O as OrCodeLanguages } from './OrCode-d4400b42.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-ede619eb.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-d2aec18c.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-ea7fc8e7.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-7cd5dc68.js';

package/dist/esm/v3/{OrConfirm-a7f9404b.js → OrConfirm-75813c12.js}

@@ -119,7 +119,8 @@ var script = defineComponent({
     },
     isOpen: {
       type: Boolean,
-      default: false
+      required: false,
+      default: undefined
     }
   },
   emits: ['open', 'close', 'confirm'],
@@ -133,7 +134,7 @@ var script = defineComponent({
     const confirmationButton = ref();
     // State
     const touched = ref(false);
-    const isActive = ref(false);
+    const isActive = ref(props.isOpen || false);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
     const {
@@ -148,9 +149,16 @@ var script = defineComponent({
     // Methods
     function open() {
       isActive.value = true;
+      emit('open');
     }
     function close() {
-      isActive.value = false;
+      // 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() {
       if (!props.disabled && !isInvalid.value) emit('confirm');
@@ -163,12 +171,10 @@ var script = defineComponent({
       touched.value = true;
     }
     // Events
-    watch(isActive, value => emit(value ? 'open' : 'close'));
-    watch(() => props.isOpen, newIsOpen => {
-      if (newIsOpen) {
-        open();
-      } else {
-        close();
+    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

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

@@ -16,7 +16,7 @@ export { s as OrCode, O as OrCodeLanguages } from '../OrCode-5ed69c23.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-c11ee2ec.js';
-export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-a7f9404b.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-75813c12.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-0025b17c.js';

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

@@ -84,7 +84,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     isOpen: {
         type: BooleanConstructor;
-        default: boolean;
+        required: false;
+        default: undefined;
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
     titleText: {
@@ -139,7 +140,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
     isOpen: {
         type: BooleanConstructor;
-        default: boolean;
+        required: false;
+        default: undefined;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     titleText: string;

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

@@ -1,4 +1,4 @@
-export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-a7f9404b.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-75813c12.js';
 import '@vueuse/core';
 import '@vueuse/math';
 import 'vue-demi';

package/dist/esm/v3/index.js

@@ -16,7 +16,7 @@ export { s as OrCode, O as OrCodeLanguages } from './OrCode-5ed69c23.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-c11ee2ec.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-a7f9404b.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-75813c12.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-0025b17c.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.74.1",
+  "version": "2.74.2-beta.2297.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",
@@ -124,6 +124,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "17399f3f28f7d2e50877067e710703993cc06a59"
+  }
 }

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

@@ -81,10 +81,6 @@ export default {
     textConfirmationError: {
       control: { type: 'text' },
     },
-
-    isOpen: {
-      control: { type: 'boolean' },
-    },
   },
 
   parameters: {
@@ -115,10 +111,7 @@ const Template: StoryFn<typeof OrConfirm> = (args) => ({
       confirm,
       onOpen: action('open'),
       onClose: action('close'),
-      onConfirm: (event: any) => {
-        action('confirm')(event);
-        confirm.value?.close(); // you should close OrConfirm manually or you can set loading=true before closing
-      },
+      onConfirm: action('confirm'),
     };
   },
 
@@ -147,54 +140,6 @@ const Template: StoryFn<typeof OrConfirm> = (args) => ({
   `,
 });
 
-const TemplateIsOpen: StoryFn<typeof OrConfirm> = (args) => ({
-  components: {
-    OrConfirm,
-    OrButton,
-  },
-
-  setup() {
-    const isOpen = ref(args.isOpen);
-    return {
-      args,
-      isOpen,
-      onOpen: action('open'),
-      onClose: () => {
-        isOpen.value = 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',
@@ -244,8 +189,61 @@ ConfirmButtonColor.args = {
   confirmButtonText: 'Yes',
   cancelButtonText: 'No',
 };
+
+
+const TemplateIsOpen: StoryFn<typeof OrConfirm> = (args) => ({
+  components: {
+    OrConfirm,
+    OrButton,
+  },
+
+  setup() {
+    const isOpen = ref(args.isOpen);
+    return {
+      args,
+      isOpen,
+      onClose: () => {
+        isOpen.value = false;
+        action('close')();
+      },
+      onConfirm: () => {
+        action('confirm')();
+      },
+    };
+  },
+
+  template: `
+    <div class="contents">
+      <OrButton @click="() => isOpen = true">Confirmation modal</OrButton>
+
+      <OrConfirm
+        v-bind="args"
+        :is-open="isOpen"
+        @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 UsingIsOpenProp = TemplateIsOpen.bind({});
+UsingIsOpenProp.argTypes = {
+  isOpen: {
+    control: { type: 'boolean' },
+  },
+};
+
 UsingIsOpenProp.args = {
+  isOpen: 'true',
   titleText: 'Confirm',
   default: `Are you sure you want to <i>${Faker.hacker.verb()}</i> the <b>${Faker.hacker.noun()}</b>?`,
   confirmType: ConfirmType.C,

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

@@ -148,7 +148,8 @@ export default defineComponent({
 
     isOpen: {
       type: Boolean,
-      default: false,
+      required: false,
+      default: undefined,
     },
   },
 
@@ -173,7 +174,7 @@ export default defineComponent({
 
     // State
     const touched = ref(false);
-    const isActive = ref(false);
+    const isActive = ref(props.isOpen || false);
     const isInputActive = ref(false);
     const confirmationValue = ref<string>('');
 
@@ -192,10 +193,17 @@ export default defineComponent({
     // Methods
     function open(): void {
       isActive.value = true;
+      emit('open');
     }
 
     function close(): void {
-      isActive.value = false;
+      // 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 {
@@ -212,13 +220,10 @@ export default defineComponent({
     }
 
     // Events
-    watch(isActive, (value: boolean) => emit(value ? 'open' : 'close'));
-
-    watch(() => props.isOpen, (newIsOpen) => {
-      if (newIsOpen) {
-        open();
-      } else {
-        close();
+    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 });