@onereach/ui-components 2.74.2-beta.2295.0 → 2.74.2-beta.2298.0

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

@@ -135,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 {
@@ -150,15 +150,16 @@ var script = defineComponent({
     // Methods
     function open() {
       isActive.value = true;
-      if (props.isOpen === undefined) {
-        emit('open');
-      }
+      emit('open');
     }
     function close() {
-      if (props.isOpen === undefined) {
+      // 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');
       }
-      emit('close');
     }
     function confirm() {
       if (!props.disabled && !isInvalid.value) emit('confirm');
@@ -172,10 +173,9 @@ var script = defineComponent({
     }
     // Events
     watch(() => props.isOpen, value => {
-      if (value === true) {
-        open();
-      } else if (value === false) {
-        close();
+      // 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-1fe4088c.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/index.js

@@ -1,4 +1,4 @@
-export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-1fe4088c.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-1fe4088c.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-1bcc55ff.js → OrConfirm.vue_vue_type_script_lang-4a2b7647.js}

@@ -136,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 {
@@ -151,15 +151,16 @@ var script = defineComponent({
     // Methods
     function open() {
       isActive.value = true;
-      if (props.isOpen === undefined) {
-        emit('open');
-      }
+      emit('open');
     }
     function close() {
-      if (props.isOpen === undefined) {
+      // 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');
       }
-      emit('close');
     }
     function confirm() {
       if (!props.disabled && !isInvalid.value) emit('confirm');
@@ -173,10 +174,9 @@ var script = defineComponent({
     }
     // Events
     watch(() => props.isOpen, value => {
-      if (value === true) {
-        open();
-      } else if (value === false) {
-        close();
+      // 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-1bcc55ff.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/index.js

@@ -1,4 +1,4 @@
-export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm.vue_vue_type_script_lang-1bcc55ff.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-1bcc55ff.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm.vue_vue_type_script_lang-1bcc55ff.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-4566d105.js → OrConfirm-ea7fc8e7.js}

@@ -134,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 {
@@ -149,15 +149,16 @@ var script = defineComponent({
     // Methods
     function open() {
       isActive.value = true;
-      if (props.isOpen === undefined) {
-        emit('open');
-      }
+      emit('open');
     }
     function close() {
-      if (props.isOpen === undefined) {
+      // 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');
       }
-      emit('close');
     }
     function confirm() {
       if (!props.disabled && !isInvalid.value) emit('confirm');
@@ -171,10 +172,9 @@ var script = defineComponent({
     }
     // Events
     watch(() => props.isOpen, value => {
-      if (value === true) {
-        open();
-      } else if (value === false) {
-        close();
+      // 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-4566d105.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/index.js

@@ -1,4 +1,4 @@
-export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-4566d105.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-4566d105.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-ea316da1.js → OrConfirm-75813c12.js}

@@ -134,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 {
@@ -149,15 +149,16 @@ var script = defineComponent({
     // Methods
     function open() {
       isActive.value = true;
-      if (props.isOpen === undefined) {
-        emit('open');
-      }
+      emit('open');
     }
     function close() {
-      if (props.isOpen === undefined) {
+      // 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');
       }
-      emit('close');
     }
     function confirm() {
       if (!props.disabled && !isInvalid.value) emit('confirm');
@@ -171,10 +172,9 @@ var script = defineComponent({
     }
     // Events
     watch(() => props.isOpen, value => {
-      if (value === true) {
-        open();
-      } else if (value === false) {
-        close();
+      // 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-ea316da1.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/index.js

@@ -1,4 +1,4 @@
-export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-ea316da1.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-ea316da1.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.2-beta.2295.0",
+  "version": "2.74.2-beta.2298.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

package/src/components/or-confirm-v3/OrConfirm.docs.mdx

@@ -9,8 +9,8 @@ import { OrConfirmV3 as OrConfirm } from '@onereach/ui-components';
 ## Migration Guide from V1
   - property `denyButtonText` renamed to `cancelButtonText`
   - property `confirmButtonColor` replaced with `confirmType`
-  - removed property `isOpen` (now `open()` and `close()` functions should be used)
   - property `isLoading` renamed to `loading`
   - property `isDisabled` renamed to `disabled`
   - removed properties `showClose`, `closeOnClickOutside` and `size`
   - added `open` event
+  - added `open()` and `close()` functions

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

@@ -174,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>('');
 
@@ -193,16 +193,17 @@ export default defineComponent({
     // Methods
     function open(): void {
       isActive.value = true;
-      if (props.isOpen === undefined) {
-        emit('open');
-      }
+      emit('open');
     }
 
     function close(): void {
-      if (props.isOpen === undefined) {
+      // 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');
       }
-      emit('close');
     }
 
     function confirm(): void {
@@ -220,10 +221,9 @@ export default defineComponent({
 
     // Events
     watch(() => props.isOpen, (value) => {
-      if (value === true) {
-        open();
-      } else if (value === false) {
-        close();
+      // 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 });