@onereach/ui-components 8.17.1 → 8.17.2-beta.3887.0

package/dist/bundled/v2/components/OrConfirmV3/OrConfirm.js

@@ -1,6 +1,6 @@
 import { a as useMagicKeys, o as onClickOutside } from '../../index-cc89d6b7.js';
 import { l as logicAnd } from '../../index-017c190e.js';
-import { defineComponent, ref, toRef, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { ConfirmType } from './props.js';
 import { Confirm, ConfirmHeader, ConfirmInput, ConfirmFooter, ConfirmFooterTypes, ConfirmFooterButtons } from './styles.js';
 import __vue_component__$1 from '../OrOverlayV3/OrOverlay.js';
@@ -61,10 +61,6 @@ var script = defineComponent({
     textConfirmationPlaceholder: {
       type: String,
       default: undefined
-    },
-    textConfirmationError: {
-      type: String,
-      default: undefined
     }
   },
   emits: ['update:state', 'open', 'close', 'confirm'],
@@ -74,8 +70,13 @@ var script = defineComponent({
     const root = ref();
     const confirmationInput = ref();
     const confirmationButton = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
+    const headerStyles = computed(() => [...ConfirmHeader]);
+    const inputBoxStyles = computed(() => [...ConfirmInput]);
+    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
+    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // State
-    const touched = ref(false);
     const {
       state,
       open,
@@ -83,6 +84,9 @@ var script = defineComponent({
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
+    watch(state, () => {
+      confirmationValue.value = '';
+    });
     const {
       escape,
       enter
@@ -103,18 +107,11 @@ var script = defineComponent({
     }
     function onInputBlur() {
       isInputActive.value = false;
-      touched.value = true;
     }
     // Events
     watch(escape, val => {
       if (val) close();
     });
-    watch(state, value => {
-      if (value === 'closed') {
-        confirmationValue.value = '';
-        touched.value = false;
-      }
-    });
     // types here are used for fixing TS2349
     watch(confirmationInput, val => {
       var _a;
@@ -128,12 +125,6 @@ var script = defineComponent({
       }
     });
     whenever(logicAnd(enter, isInputActive), () => confirm());
-    // Styles
-    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
-    const headerStyles = computed(() => [...ConfirmHeader]);
-    const inputBoxStyles = computed(() => [...ConfirmInput]);
-    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
-    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // #region Click Outside
     onClickOutside(root, close);
     // #endregion
@@ -145,7 +136,6 @@ var script = defineComponent({
       confirmButtonColor,
       isInvalid,
       isConfirmationButtonDisabled,
-      touched,
       state,
       isInputActive,
       escape,
@@ -193,8 +183,7 @@ var __vue_render__ = function () {
     ref: "confirmationInput",
     attrs: {
       "label": _vm.textConfirmationLabel,
-      "placeholder": _vm.textConfirmationPlaceholder,
-      "error": _vm.touched && _vm.isInvalid ? _vm.textConfirmationError : undefined
+      "placeholder": _vm.textConfirmationPlaceholder
     },
     on: {
       "focus": _vm.onInputFocus,
@@ -213,7 +202,7 @@ var __vue_render__ = function () {
     }, [_c('OrButton', {
       class: _vm.buttonsStyles,
       attrs: {
-        "variant": "outlined",
+        "variant": 'outlined',
         "disabled": _vm.loading
       },
       on: {
@@ -232,8 +221,8 @@ var __vue_render__ = function () {
       }
     }, [_vm._v("\n          " + _vm._s(_vm.confirmButtonText) + "\n        ")])], 1)];
   }, {
-    "cancel": _vm.close,
-    "confirm": _vm.confirm
+    "confirm": _vm.confirm,
+    "cancel": _vm.close
   })], 2)]) : _vm._e();
 };
 var __vue_staticRenderFns__ = [];

package/dist/bundled/v2/components/OrConfirmV3/OrConfirm.vue.d.ts

@@ -17,7 +17,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     confirmButtonColor: import("@vue/composition-api").ComputedRef<ButtonColor.Primary | ButtonColor.Danger>;
     isInvalid: import("@vue/composition-api").ComputedRef<boolean>;
     isConfirmationButtonDisabled: import("@vue/composition-api").ComputedRef<boolean>;
-    touched: import("@vue/composition-api").Ref<boolean>;
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     isInputActive: import("@vue/composition-api").Ref<boolean>;
     escape: import("@vue/composition-api").ComputedRef<boolean>;
@@ -74,10 +73,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: StringConstructor;
         default: undefined;
     };
-    textConfirmationError: {
-        type: StringConstructor;
-        default: undefined;
-    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     isOpen: {
         type: BooleanConstructor;
@@ -121,10 +116,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: StringConstructor;
         default: undefined;
     };
-    textConfirmationError: {
-        type: StringConstructor;
-        default: undefined;
-    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     isOpen: boolean;
     titleText: string;
@@ -136,7 +127,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     confirmationText: string;
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
-    textConfirmationError: string;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -155,7 +145,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     confirmButtonColor: import("@vue/composition-api").ComputedRef<ButtonColor.Primary | ButtonColor.Danger>;
     isInvalid: import("@vue/composition-api").ComputedRef<boolean>;
     isConfirmationButtonDisabled: import("@vue/composition-api").ComputedRef<boolean>;
-    touched: import("@vue/composition-api").Ref<boolean>;
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     isInputActive: import("@vue/composition-api").Ref<boolean>;
     escape: import("@vue/composition-api").ComputedRef<boolean>;
@@ -180,7 +169,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     confirmationText: string;
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
-    textConfirmationError: string;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -194,6 +182,5 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     confirmationText: string;
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
-    textConfirmationError: string;
 }, true>);
 export default _default;

package/dist/bundled/v3/components/OrConfirmV3/OrConfirm.js

@@ -1 +1 @@
-export { s as default } from '../OrConfirmV3-b5efd082.js';
+export { s as default } from '../OrConfirmV3-90f5d00b.js';

package/dist/bundled/v3/components/OrConfirmV3/OrConfirm.vue.d.ts

@@ -44,10 +44,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    textConfirmationError: {
-        type: StringConstructor;
-        default: undefined;
-    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     confirmationInput: import("vue-demi").Ref<any>;
@@ -56,7 +52,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     confirmButtonColor: import("vue-demi").ComputedRef<ButtonColor.Primary | ButtonColor.Danger>;
     isInvalid: import("vue-demi").ComputedRef<boolean>;
     isConfirmationButtonDisabled: import("vue-demi").ComputedRef<boolean>;
-    touched: import("vue-demi").Ref<boolean>;
     state: import("vue-demi").Ref<"open" | "closed">;
     isInputActive: import("vue-demi").Ref<boolean>;
     escape: import("vue-demi").ComputedRef<boolean>;
@@ -113,10 +108,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    textConfirmationError: {
-        type: StringConstructor;
-        default: undefined;
-    };
 }>> & {
     onConfirm?: ((...args: any[]) => any) | undefined;
     "onUpdate:state"?: ((...args: any[]) => any) | undefined;
@@ -133,6 +124,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     confirmationText: string;
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
-    textConfirmationError: string;
 }>;
 export default _default;

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

@@ -1 +1 @@
-export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirmV3-b5efd082.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirmV3-90f5d00b.js';

package/dist/bundled/v3/components/OrConfirmV3/props.js

@@ -1 +1 @@
-export { C as ConfirmType } from '../OrConfirmV3-b5efd082.js';
+export { C as ConfirmType } from '../OrConfirmV3-90f5d00b.js';

package/dist/bundled/v3/components/OrConfirmV3/styles.js

@@ -1 +1 @@
-export { a as Confirm, d as ConfirmFooter, f as ConfirmFooterButtons, e as ConfirmFooterTypes, b as ConfirmHeader, c as ConfirmInput } from '../OrConfirmV3-b5efd082.js';
+export { a as Confirm, d as ConfirmFooter, f as ConfirmFooterButtons, e as ConfirmFooterTypes, b as ConfirmHeader, c as ConfirmInput } from '../OrConfirmV3-90f5d00b.js';

package/dist/bundled/v3/components/{OrConfirmV3-b5efd082.js → OrConfirmV3-90f5d00b.js}

@@ -1,7 +1,7 @@
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createTextVNode, toDisplayString, createElementBlock, createVNode, createCommentVNode } from 'vue';
 import { b as useMagicKeys, w as whenever, o as onClickOutside } from './OrBottomSheetV3-66815f6f.js';
 import { l as logicAnd } from './OrConfirm-f95a3ce6.js';
-import { defineComponent, ref, toRef, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { s as script$1 } from './OrOverlayV3-b2576ca1.js';
 import { s as script$2, B as ButtonColor } from './OrButtonV3-529c4206.js';
 import { s as script$3 } from './OrInputV3-5ed9b5fd.js';
@@ -107,10 +107,6 @@ var script = defineComponent({
     textConfirmationPlaceholder: {
       type: String,
       default: undefined
-    },
-    textConfirmationError: {
-      type: String,
-      default: undefined
     }
   },
   emits: ['update:state', 'open', 'close', 'confirm'],
@@ -120,8 +116,13 @@ var script = defineComponent({
     const root = ref();
     const confirmationInput = ref();
     const confirmationButton = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
+    const headerStyles = computed(() => [...ConfirmHeader]);
+    const inputBoxStyles = computed(() => [...ConfirmInput]);
+    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
+    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // State
-    const touched = ref(false);
     const {
       state,
       open,
@@ -129,6 +130,9 @@ var script = defineComponent({
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
+    watch(state, () => {
+      confirmationValue.value = '';
+    });
     const {
       escape,
       enter
@@ -149,18 +153,11 @@ var script = defineComponent({
     }
     function onInputBlur() {
       isInputActive.value = false;
-      touched.value = true;
     }
     // Events
     watch(escape, val => {
       if (val) close();
     });
-    watch(state, value => {
-      if (value === 'closed') {
-        confirmationValue.value = '';
-        touched.value = false;
-      }
-    });
     // types here are used for fixing TS2349
     watch(confirmationInput, val => {
       var _a;
@@ -174,12 +171,6 @@ var script = defineComponent({
       }
     });
     whenever(logicAnd(enter, isInputActive), () => confirm());
-    // Styles
-    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
-    const headerStyles = computed(() => [...ConfirmHeader]);
-    const inputBoxStyles = computed(() => [...ConfirmInput]);
-    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
-    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // #region Click Outside
     onClickOutside(root, close);
     // #endregion
@@ -191,7 +182,6 @@ var script = defineComponent({
       confirmButtonColor,
       isInvalid,
       isConfirmationButtonDisabled,
-      touched,
       state,
       isInputActive,
       escape,
@@ -236,17 +226,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.confirmationValue = $event),
       label: _ctx.textConfirmationLabel,
       placeholder: _ctx.textConfirmationPlaceholder,
-      error: _ctx.touched && _ctx.isInvalid ? _ctx.textConfirmationError : undefined,
       onFocus: _ctx.onInputFocus,
       onBlur: _ctx.onInputBlur
-    }, null, 8 /* PROPS */, ["modelValue", "label", "placeholder", "error", "onFocus", "onBlur"])], 2 /* CLASS */)) : createCommentVNode("v-if", true)]), renderSlot(_ctx.$slots, "footer", {
-      cancel: _ctx.close,
-      confirm: _ctx.confirm
+    }, null, 8 /* PROPS */, ["modelValue", "label", "placeholder", "onFocus", "onBlur"])], 2 /* CLASS */)) : createCommentVNode("v-if", true)]), renderSlot(_ctx.$slots, "footer", {
+      confirm: _ctx.confirm,
+      cancel: _ctx.close
     }, () => [createElementVNode("div", {
       class: normalizeClass(_ctx.footerStyles)
     }, [createVNode(_component_OrButton, {
       class: normalizeClass(_ctx.buttonsStyles),
-      variant: "outlined",
+      variant: 'outlined',
       disabled: _ctx.loading,
       onClick: _ctx.close
     }, {

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

@@ -22,7 +22,7 @@ export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k
 export { s as OrCombinedInputV3 } from './OrCombinedInputV3-795e8cf2.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateRangePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize, I as TimeRangePickerSize } from './OrInputBoxV3-ddd117f0.js';
 export { s as OrConfirm } from './OrConfirm-f95a3ce6.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirmV3-b5efd082.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirmV3-90f5d00b.js';
 export { OrContextMenuV3 } from './OrContextMenuV3/index.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopoverV3-a7d181a4.js';
 export { s as OrDateFormatV3 } from './OrDateFormatV3-8456e52e.js';

package/dist/bundled/v3/index.js

@@ -13,7 +13,7 @@ export { C as CodeLanguage, s as OrCodeV3 } from './components/OrCodeV3-628f8e28
 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 './components/OrColorPicker-2271c176.js';
 export { s as OrCombinedInputV3 } from './components/OrCombinedInputV3-795e8cf2.js';
 export { s as OrConfirm } from './components/OrConfirm-f95a3ce6.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './components/OrConfirmV3-b5efd082.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './components/OrConfirmV3-90f5d00b.js';
 export { OrContextMenuV3 } from './components/OrContextMenuV3/index.js';
 export { s as OrDateFormatV3 } from './components/OrDateFormatV3-8456e52e.js';
 export { s as OrDatePickerV3 } from './components/OrDatePickerV3-a3e534f7.js';

package/dist/esm/v2/{OrConfirm-096d70f2.js → OrConfirm-174b82fd.js}

@@ -1,6 +1,6 @@
 import { useMagicKeys, whenever, onClickOutside } from '@vueuse/core';
 import { logicAnd } from '@vueuse/math';
-import { defineComponent, ref, toRef, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import './dom-aecadd9a.js';
 import { u as usePopoverState } from './usePopoverState-5033b9cb.js';
 import '@onereach/styles/tailwind/plugins/core';
@@ -111,10 +111,6 @@ var script = defineComponent({
     textConfirmationPlaceholder: {
       type: String,
       default: undefined
-    },
-    textConfirmationError: {
-      type: String,
-      default: undefined
     }
   },
   emits: ['update:state', 'open', 'close', 'confirm'],
@@ -124,8 +120,13 @@ var script = defineComponent({
     const root = ref();
     const confirmationInput = ref();
     const confirmationButton = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
+    const headerStyles = computed(() => [...ConfirmHeader]);
+    const inputBoxStyles = computed(() => [...ConfirmInput]);
+    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
+    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // State
-    const touched = ref(false);
     const {
       state,
       open,
@@ -133,6 +134,9 @@ var script = defineComponent({
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
+    watch(state, () => {
+      confirmationValue.value = '';
+    });
     const {
       escape,
       enter
@@ -153,18 +157,11 @@ var script = defineComponent({
     }
     function onInputBlur() {
       isInputActive.value = false;
-      touched.value = true;
     }
     // Events
     watch(escape, val => {
       if (val) close();
     });
-    watch(state, value => {
-      if (value === 'closed') {
-        confirmationValue.value = '';
-        touched.value = false;
-      }
-    });
     // types here are used for fixing TS2349
     watch(confirmationInput, val => {
       var _a;
@@ -178,12 +175,6 @@ var script = defineComponent({
       }
     });
     whenever(logicAnd(enter, isInputActive), () => confirm());
-    // Styles
-    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
-    const headerStyles = computed(() => [...ConfirmHeader]);
-    const inputBoxStyles = computed(() => [...ConfirmInput]);
-    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
-    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // #region Click Outside
     onClickOutside(root, close);
     // #endregion
@@ -195,7 +186,6 @@ var script = defineComponent({
       confirmButtonColor,
       isInvalid,
       isConfirmationButtonDisabled,
-      touched,
       state,
       isInputActive,
       escape,
@@ -243,8 +233,7 @@ var __vue_render__ = function () {
     ref: "confirmationInput",
     attrs: {
       "label": _vm.textConfirmationLabel,
-      "placeholder": _vm.textConfirmationPlaceholder,
-      "error": _vm.touched && _vm.isInvalid ? _vm.textConfirmationError : undefined
+      "placeholder": _vm.textConfirmationPlaceholder
     },
     on: {
       "focus": _vm.onInputFocus,
@@ -263,7 +252,7 @@ var __vue_render__ = function () {
     }, [_c('OrButton', {
       class: _vm.buttonsStyles,
       attrs: {
-        "variant": "outlined",
+        "variant": 'outlined',
         "disabled": _vm.loading
       },
       on: {
@@ -282,8 +271,8 @@ var __vue_render__ = function () {
       }
     }, [_vm._v("\n          " + _vm._s(_vm.confirmButtonText) + "\n        ")])], 1)];
   }, {
-    "cancel": _vm.close,
-    "confirm": _vm.confirm
+    "confirm": _vm.confirm,
+    "cancel": _vm.close
   })], 2)]) : _vm._e();
 };
 var __vue_staticRenderFns__ = [];

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

@@ -33,7 +33,7 @@ export { _ as OrCombinedInputV3 } from '../OrCombinedInput-27179a1d.js';
 export { _ as OrInputBoxV3 } from '../OrInputBox-140c344d.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateRangePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize, I as TimeRangePickerSize } from '../OrInputBox.vue_rollup-plugin-vue_script-65ebcf4d.js';
 export { _ as OrConfirm } from '../OrConfirm-f3f7ec59.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-096d70f2.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from '../OrConfirm-174b82fd.js';
 export { _ as OrContextMenuV3 } from '../OrContextMenu-7292aca0.js';
 export { _ as OrMenuV3 } from '../OrMenu-6fa468e0.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-07b82c80.js';

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

@@ -17,7 +17,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     confirmButtonColor: import("@vue/composition-api").ComputedRef<ButtonColor.Primary | ButtonColor.Danger>;
     isInvalid: import("@vue/composition-api").ComputedRef<boolean>;
     isConfirmationButtonDisabled: import("@vue/composition-api").ComputedRef<boolean>;
-    touched: import("@vue/composition-api").Ref<boolean>;
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     isInputActive: import("@vue/composition-api").Ref<boolean>;
     escape: import("@vue/composition-api").ComputedRef<boolean>;
@@ -74,10 +73,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: StringConstructor;
         default: undefined;
     };
-    textConfirmationError: {
-        type: StringConstructor;
-        default: undefined;
-    };
 }, import("@vue/composition-api").ExtractPropTypes<{
     isOpen: {
         type: BooleanConstructor;
@@ -121,10 +116,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         type: StringConstructor;
         default: undefined;
     };
-    textConfirmationError: {
-        type: StringConstructor;
-        default: undefined;
-    };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     isOpen: boolean;
     titleText: string;
@@ -136,7 +127,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     confirmationText: string;
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
-    textConfirmationError: string;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -155,7 +145,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     confirmButtonColor: import("@vue/composition-api").ComputedRef<ButtonColor.Primary | ButtonColor.Danger>;
     isInvalid: import("@vue/composition-api").ComputedRef<boolean>;
     isConfirmationButtonDisabled: import("@vue/composition-api").ComputedRef<boolean>;
-    touched: import("@vue/composition-api").Ref<boolean>;
     state: import("@vue/composition-api").Ref<"open" | "closed">;
     isInputActive: import("@vue/composition-api").Ref<boolean>;
     escape: import("@vue/composition-api").ComputedRef<boolean>;
@@ -180,7 +169,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     confirmationText: string;
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
-    textConfirmationError: string;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -194,6 +182,5 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     confirmationText: string;
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
-    textConfirmationError: string;
 }, 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-096d70f2.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from '../../OrConfirm-174b82fd.js';
 import '@vueuse/core';
 import '@vueuse/math';
 import 'vue-demi';

package/dist/esm/v2/index.js

@@ -33,7 +33,7 @@ export { _ as OrCombinedInputV3 } from './OrCombinedInput-27179a1d.js';
 export { _ as OrInputBoxV3 } from './OrInputBox-140c344d.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateRangePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize, I as TimeRangePickerSize } from './OrInputBox.vue_rollup-plugin-vue_script-65ebcf4d.js';
 export { _ as OrConfirm } from './OrConfirm-f3f7ec59.js';
-export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-096d70f2.js';
+export { C as ConfirmType, _ as OrConfirmV3 } from './OrConfirm-174b82fd.js';
 export { _ as OrContextMenuV3 } from './OrContextMenu-7292aca0.js';
 export { _ as OrMenuV3 } from './OrMenu-6fa468e0.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, _ as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-07b82c80.js';

package/dist/esm/v3/{OrConfirm-b9db8793.js → OrConfirm-dd801326.js}

@@ -1,6 +1,6 @@
 import { useMagicKeys, whenever, onClickOutside } from '@vueuse/core';
 import { logicAnd } from '@vueuse/math';
-import { defineComponent, ref, toRef, computed, watch } from 'vue-demi';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import './dom-aecadd9a.js';
 import { u as usePopoverState } from './usePopoverState-5033b9cb.js';
 import '@onereach/styles/tailwind/plugins/core';
@@ -110,10 +110,6 @@ var script = defineComponent({
     textConfirmationPlaceholder: {
       type: String,
       default: undefined
-    },
-    textConfirmationError: {
-      type: String,
-      default: undefined
     }
   },
   emits: ['update:state', 'open', 'close', 'confirm'],
@@ -123,8 +119,13 @@ var script = defineComponent({
     const root = ref();
     const confirmationInput = ref();
     const confirmationButton = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
+    const headerStyles = computed(() => [...ConfirmHeader]);
+    const inputBoxStyles = computed(() => [...ConfirmInput]);
+    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
+    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // State
-    const touched = ref(false);
     const {
       state,
       open,
@@ -132,6 +133,9 @@ var script = defineComponent({
     } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isInputActive = ref(false);
     const confirmationValue = ref('');
+    watch(state, () => {
+      confirmationValue.value = '';
+    });
     const {
       escape,
       enter
@@ -152,18 +156,11 @@ var script = defineComponent({
     }
     function onInputBlur() {
       isInputActive.value = false;
-      touched.value = true;
     }
     // Events
     watch(escape, val => {
       if (val) close();
     });
-    watch(state, value => {
-      if (value === 'closed') {
-        confirmationValue.value = '';
-        touched.value = false;
-      }
-    });
     // types here are used for fixing TS2349
     watch(confirmationInput, val => {
       var _a;
@@ -177,12 +174,6 @@ var script = defineComponent({
       }
     });
     whenever(logicAnd(enter, isInputActive), () => confirm());
-    // Styles
-    const rootStyles = computed(() => ['or-confirm-v3', ...Confirm]);
-    const headerStyles = computed(() => [...ConfirmHeader]);
-    const inputBoxStyles = computed(() => [...ConfirmInput]);
-    const footerStyles = computed(() => [...ConfirmFooter, ...ConfirmFooterTypes[props.confirmType]]);
-    const buttonsStyles = computed(() => [...ConfirmFooterButtons]);
     // #region Click Outside
     onClickOutside(root, close);
     // #endregion
@@ -194,7 +185,6 @@ var script = defineComponent({
       confirmButtonColor,
       isInvalid,
       isConfirmationButtonDisabled,
-      touched,
       state,
       isInputActive,
       escape,
@@ -239,17 +229,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => _ctx.confirmationValue = $event),
       label: _ctx.textConfirmationLabel,
       placeholder: _ctx.textConfirmationPlaceholder,
-      error: _ctx.touched && _ctx.isInvalid ? _ctx.textConfirmationError : undefined,
       onFocus: _ctx.onInputFocus,
       onBlur: _ctx.onInputBlur
-    }, null, 8 /* PROPS */, ["modelValue", "label", "placeholder", "error", "onFocus", "onBlur"])], 2 /* CLASS */)) : createCommentVNode("v-if", true)]), renderSlot(_ctx.$slots, "footer", {
-      cancel: _ctx.close,
-      confirm: _ctx.confirm
+    }, null, 8 /* PROPS */, ["modelValue", "label", "placeholder", "onFocus", "onBlur"])], 2 /* CLASS */)) : createCommentVNode("v-if", true)]), renderSlot(_ctx.$slots, "footer", {
+      confirm: _ctx.confirm,
+      cancel: _ctx.close
     }, () => [createElementVNode("div", {
       class: normalizeClass(_ctx.footerStyles)
     }, [createVNode(_component_OrButton, {
       class: normalizeClass(_ctx.buttonsStyles),
-      variant: "outlined",
+      variant: 'outlined',
       disabled: _ctx.loading,
       onClick: _ctx.close
     }, {

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

@@ -30,7 +30,7 @@ export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k
 export { s as OrCombinedInputV3 } from '../OrCombinedInput-aeac0bb1.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateRangePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize, I as TimeRangePickerSize } from '../OrInputBox-8c1a29dd.js';
 export { s as OrConfirm } from '../OrConfirm-859ff5a2.js';
-export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-b9db8793.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../OrConfirm-dd801326.js';
 export { s as OrContextMenuV3 } from '../OrContextMenu-8468ecfd.js';
 export { s as OrMenuV3 } from '../OrMenu-690d1376.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from '../OrPopover-88b8aa2a.js';

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

@@ -44,10 +44,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    textConfirmationError: {
-        type: StringConstructor;
-        default: undefined;
-    };
 }, {
     root: import("vue-demi").Ref<HTMLElement | undefined>;
     confirmationInput: import("vue-demi").Ref<any>;
@@ -56,7 +52,6 @@ declare const _default: import("vue-demi").DefineComponent<{
     confirmButtonColor: import("vue-demi").ComputedRef<ButtonColor.Primary | ButtonColor.Danger>;
     isInvalid: import("vue-demi").ComputedRef<boolean>;
     isConfirmationButtonDisabled: import("vue-demi").ComputedRef<boolean>;
-    touched: import("vue-demi").Ref<boolean>;
     state: import("vue-demi").Ref<"open" | "closed">;
     isInputActive: import("vue-demi").Ref<boolean>;
     escape: import("vue-demi").ComputedRef<boolean>;
@@ -113,10 +108,6 @@ declare const _default: import("vue-demi").DefineComponent<{
         type: StringConstructor;
         default: undefined;
     };
-    textConfirmationError: {
-        type: StringConstructor;
-        default: undefined;
-    };
 }>> & {
     onConfirm?: ((...args: any[]) => any) | undefined;
     "onUpdate:state"?: ((...args: any[]) => any) | undefined;
@@ -133,6 +124,5 @@ declare const _default: import("vue-demi").DefineComponent<{
     confirmationText: string;
     textConfirmationLabel: string;
     textConfirmationPlaceholder: string;
-    textConfirmationError: string;
 }>;
 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-b9db8793.js';
+export { C as ConfirmType, s as OrConfirmV3 } from '../../OrConfirm-dd801326.js';
 import '@vueuse/core';
 import '@vueuse/math';
 import 'vue-demi';

package/dist/esm/v3/index.js

@@ -30,7 +30,7 @@ export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k
 export { s as OrCombinedInputV3 } from './OrCombinedInput-aeac0bb1.js';
 export { I as CombinedInputSize, I as DatePickerSize, I as DateRangePickerSize, I as DateTimePickerSize, I as InputBoxSize, a as InputBoxVariant, I as InputSize, s as OrInputBoxV3, I as SearchSize, I as SelectSize, I as TagInputSize, I as TextareaSize, I as TimePickerSize, I as TimeRangePickerSize } from './OrInputBox-8c1a29dd.js';
 export { s as OrConfirm } from './OrConfirm-859ff5a2.js';
-export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-b9db8793.js';
+export { C as ConfirmType, s as OrConfirmV3 } from './OrConfirm-dd801326.js';
 export { s as OrContextMenuV3 } from './OrContextMenu-8468ecfd.js';
 export { s as OrMenuV3 } from './OrMenu-690d1376.js';
 export { P as ContextMenuPlacement, P as MenuPlacement, s as OrPopoverV3, P as PopoverPlacement, a as PopoverVariant, P as TooltipPlacement } from './OrPopover-88b8aa2a.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "8.17.1",
+  "version": "8.17.2-beta.3887.0",
   "npmUnpacked": "4.15.2",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
@@ -176,6 +176,5 @@
       "default": "./dist/bundled/v3/components/*/index.js"
     },
     "./package.json": "./package.json"
-  },
-  "gitHead": "798375a61ed57648c7700ba5a493de0162a1514d"
+  }
 }

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

@@ -27,7 +27,6 @@
             v-model="confirmationValue"
             :label="textConfirmationLabel"
             :placeholder="textConfirmationPlaceholder"
-            :error="(touched && isInvalid) ? textConfirmationError : undefined"
             @focus="onInputFocus"
             @blur="onInputBlur"
           />
@@ -36,13 +35,13 @@
 
       <slot
         name="footer"
-        :cancel="close"
         :confirm="confirm"
+        :cancel="close"
       >
         <div :class="footerStyles">
           <OrButton
             :class="buttonsStyles"
-            variant="outlined"
+            :variant="'outlined'"
             :disabled="loading"
             @click="close"
           >
@@ -139,11 +138,6 @@ export default defineComponent({
       type: String,
       default: undefined,
     },
-
-    textConfirmationError: {
-      type: String,
-      default: undefined,
-    },
   },
 
   emits: [
@@ -166,14 +160,41 @@ export default defineComponent({
   setup(props, context) {
     // Refs
     const root = ref<HTMLElement>();
+
     const confirmationInput = ref<InstanceType<typeof OrInput>>();
     const confirmationButton = ref<InstanceType<typeof OrButton>>();
 
+    // Styles
+    const rootStyles = computed(() => [
+      'or-confirm-v3',
+      ...Confirm,
+    ]);
+
+    const headerStyles = computed(() => [
+      ...ConfirmHeader,
+    ]);
+
+    const inputBoxStyles = computed(() => [
+      ...ConfirmInput,
+    ]);
+
+    const footerStyles = computed(() => [
+      ...ConfirmFooter,
+      ...ConfirmFooterTypes[props.confirmType],
+    ]);
+
+    const buttonsStyles = computed(() => [
+      ...ConfirmFooterButtons,
+    ]);
+
     // State
-    const touched = ref(false);
     const { state, open, close } = usePopoverState(toRef(props, 'isOpen'), context.emit);
     const isInputActive = ref(false);
-    const confirmationValue = ref<string>('');
+    const confirmationValue = ref('');
+
+    watch(state, () => {
+      confirmationValue.value = '';
+    });
 
     const { escape, enter } = useMagicKeys();
 
@@ -200,7 +221,6 @@ export default defineComponent({
 
     function onInputBlur(): void {
       isInputActive.value = false;
-      touched.value = true;
     }
 
     // Events
@@ -208,13 +228,6 @@ export default defineComponent({
       if (val) close();
     });
 
-    watch(state, (value) => {
-      if (value === 'closed') {
-        confirmationValue.value = '';
-        touched.value = false;
-      }
-    });
-
     // types here are used for fixing TS2349
     watch(confirmationInput as any, (val: InstanceType<typeof OrInput>) =>
       (val?.focus as (() => void) | undefined)?.());
@@ -229,29 +242,6 @@ export default defineComponent({
 
     whenever(logicAnd(enter, isInputActive), () => confirm());
 
-    // Styles
-    const rootStyles = computed(() => [
-      'or-confirm-v3',
-      ...Confirm,
-    ]);
-
-    const headerStyles = computed(() => [
-      ...ConfirmHeader,
-    ]);
-
-    const inputBoxStyles = computed(() => [
-      ...ConfirmInput,
-    ]);
-
-    const footerStyles = computed(() => [
-      ...ConfirmFooter,
-      ...ConfirmFooterTypes[props.confirmType],
-    ]);
-
-    const buttonsStyles = computed(() => [
-      ...ConfirmFooterButtons,
-    ]);
-
     // #region Click Outside
     onClickOutside(root, close);
     // #endregion
@@ -264,7 +254,6 @@ export default defineComponent({
       confirmButtonColor,
       isInvalid,
       isConfirmationButtonDisabled,
-      touched,
       state,
       isInputActive,
       escape,