@onereach/ui-components 8.4.1-beta.3657.0 → 8.5.0

package/dist/bundled/v2/components/OrCombinedInputV3-f54893ac.js

@@ -0,0 +1,158 @@
+import { I as InputBoxSize } from './OrInputBoxV3-95cfbd71.js';
+import { defineComponent, ref, computed } from 'vue-demi';
+import { _ as __vue_component__$1 } from './OrErrorV3-e9243e0b.js';
+import { _ as __vue_component__$2 } from './OrHintV3-f31f7a39.js';
+import { _ as __vue_component__$3 } from './OrLabelV3-1654fb1f.js';
+import { n as normalizeComponent } from './OrAvatar-7d519020.js';
+
+const CombinedInput = [
+// Layout
+'layout-column',
+// Spacing
+'gap-xs'];
+const CombinedInputControlGroup = [
+// Layout
+'layout-row',
+// Box
+'w-full',
+// Shape (.or-input-box-v3)
+'[&_.or-input-box-v3]:first-child:rounded-r-none', '[&_.or-input-box-v3]:middle-child:rounded-none', '[&_.or-input-box-v3]:last-child:rounded-l-none',
+// Spacing (.or-input-box-v3)
+'[&_.or-input-box-v3]:first-child:mr-[-1px]', '[&_.or-input-box-v3]:middle-child:border-x-0', '[&_.or-input-box-v3]:last-child:ml-[-1px]'];
+
+var script = defineComponent({
+  name: 'OrCombinedInput',
+  components: {
+    OrError: __vue_component__$1,
+    OrHint: __vue_component__$2,
+    OrLabel: __vue_component__$3
+  },
+  props: {
+    size: {
+      type: String,
+      default: InputBoxSize.M
+    },
+    label: {
+      type: String,
+      default: undefined
+    },
+    hint: {
+      type: String,
+      default: undefined
+    },
+    error: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    disableDefaultStyles: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-combined-input-v3', ...CombinedInput]);
+    const controlGroup = computed(() => [...CombinedInputControlGroup]);
+    return {
+      root,
+      rootStyles,
+      controlGroup
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_vm.label ? [_c('OrLabel', {
+    attrs: {
+      "variant": 'input',
+      "required": _vm.required,
+      "disabled": _vm.disabled
+    },
+    scopedSlots: _vm._u([{
+      key: "addon",
+      fn: function () {
+        return [_vm._t("addon")];
+      },
+      proxy: true
+    }], null, true)
+  }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n\n      ")])] : _vm._e(), _vm._v(" "), _c('div', {
+    class: _vm.controlGroup
+  }, [_vm._t("default", null, {
+    "size": _vm.size,
+    "error": !!_vm.error,
+    "required": _vm.required,
+    "readonly": _vm.readonly,
+    "disabled": _vm.disabled,
+    "disableDefaultStyles": _vm.disableDefaultStyles
+  })], 2), _vm._v(" "), _c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !_vm.error,
+      expression: "!error"
+    }],
+    class: ['contents']
+  }, [_vm.hint ? [_c('OrHint', {
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n      ")])] : _vm._e()], 2), _vm._v(" "), _c('div', {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: typeof _vm.error === 'string',
+      expression: "typeof error === 'string'"
+    }],
+    class: ['contents']
+  }, [_c('OrError', {
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._v("\n      " + _vm._s(_vm.error) + "\n    ")])], 1)], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { CombinedInput as C, __vue_component__ as _, CombinedInputControlGroup as a };

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

@@ -1,261 +1,2 @@
-import { defineComponent, ref, computed } from 'vue-demi';
-import { a as useMagicKeys, b as useActiveElement } from '../../index-c1efbf6a.js';
-import { l as logicAnd } from '../../index-7121b6d0.js';
-import __vue_component__$1 from '../OrButtonV2/OrButton.js';
-import __vue_component__$2 from '../OrModal/OrModal.js';
-import __vue_component__$3 from '../OrInput/OrInput.js';
-import { BUTTON_COLOR } from '../OrButtonV2/constants.js';
-import { OrModalSizes } from '../OrModal/constants.js';
-import { w as whenever } from '../../index-5564585f.js';
-import { s as styleInject } from '../../style-inject.es-4c6f2515.js';
-import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
-
-var script = defineComponent({
-  name: 'OrConfirm',
-  components: {
-    OrButton: __vue_component__$1,
-    OrModal: __vue_component__$2,
-    OrInput: __vue_component__$3
-  },
-  props: {
-    titleText: {
-      type: String,
-      required: false,
-      default: null
-    },
-    confirmButtonText: {
-      type: String,
-      required: false,
-      default: 'Confirm'
-    },
-    denyButtonText: {
-      type: String,
-      required: false,
-      default: 'Deny'
-    },
-    confirmButtonColor: {
-      type: String,
-      required: false,
-      default: BUTTON_COLOR.ERROR
-    },
-    isOpen: {
-      type: Boolean,
-      required: true
-    },
-    isLoading: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    isDisabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    confirmationText: {
-      type: String,
-      required: false,
-      default: null
-    },
-    textConfirmationLabel: {
-      type: String,
-      required: false,
-      default: null
-    },
-    textConfirmationPlaceholder: {
-      type: String,
-      required: false,
-      default: null
-    },
-    textConfirmationError: {
-      type: String,
-      required: false,
-      default: null
-    },
-    showClose: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    closeOnClickOutside: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
-    size: {
-      type: String,
-      required: false,
-      default: OrModalSizes.tiny
-    }
-  },
-  emits: ['close', 'confirm'],
-  setup(props, _ref) {
-    let {
-      emit
-    } = _ref;
-    const confirmationTextboxRef = ref();
-    const confirmationButtonRef = ref();
-    const confirmationValue = ref('');
-    const {
-      escape,
-      enter
-    } = useMagicKeys();
-    const activeElement = useActiveElement();
-    const isTextboxActive = computed(() => {
-      var _a;
-      return (activeElement === null || activeElement === void 0 ? void 0 : activeElement.value) === ((_a = confirmationTextboxRef === null || confirmationTextboxRef === void 0 ? void 0 : confirmationTextboxRef.value) === null || _a === void 0 ? void 0 : _a.inputRef);
-    });
-    const isInvalid = computed(() => {
-      return !!props.confirmationText && props.confirmationText !== confirmationValue.value;
-    });
-    const handleConfirm = () => {
-      if (!props.isDisabled && !isInvalid.value) emit('confirm');
-    };
-    whenever(logicAnd(enter, isTextboxActive), () => {
-      handleConfirm();
-    });
-    return {
-      confirmationTextboxRef,
-      confirmationButtonRef,
-      confirmationValue,
-      isInvalid,
-      escape,
-      handleConfirm
-    };
-  },
-  data() {
-    return {
-      touched: false
-    };
-  },
-  computed: {
-    isButtonDisabled() {
-      return !!this.isDisabled || this.isInvalid;
-    }
-  },
-  watch: {
-    escape(val) {
-      if (val) this.handleClose();
-    },
-    isOpen() {
-      this.confirmationValue = '';
-      this.touched = false;
-    },
-    confirmationTextboxRef(val) {
-      if (val) val.focus();
-    },
-    confirmationButtonRef(val) {
-      var _a;
-      if (val && !this.confirmationText) (_a = val.$el) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-  },
-  methods: {
-    touch() {
-      this.touched = true;
-    },
-    handleClose() {
-      if (this.isOpen) this.$emit('close');
-    }
-  }
-});
-
-var css_248z = "@keyframes spinAround-data-v-7f2367a9{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-7f2367a9{from{opacity:1}to{opacity:0}}.or-confirm-footer[data-v-7f2367a9]{display:flex;flex-direction:row;gap:var(--s-4);justify-content:flex-end}.confirmation-textbox[data-v-7f2367a9]{margin-top:var(--s-3)}.or-modal[data-v-7f2367a9]  .header{padding-bottom:var(--s-4)!important}.or-modal[data-v-7f2367a9]  .content{padding-bottom:0!important}.or-modal[data-v-7f2367a9]  .content{font-size:var(--fs-1);font-weight:400;line-height:var(--lh-1)}.or-modal[data-v-7f2367a9]  .footer{box-shadow:none!important}";
-styleInject(css_248z);
-
-/* script */
-const __vue_script__ = script;
-/* template */
-var __vue_render__ = function () {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c('or-modal', {
-    staticClass: "or-confirm",
-    attrs: {
-      "is-open": _vm.isOpen,
-      "role": "alertdialog",
-      "title-text": _vm.titleText,
-      "size": _vm.size,
-      "show-close": _vm.showClose,
-      "close-on-click-outside": _vm.closeOnClickOutside
-    },
-    on: {
-      "close": _vm.handleClose
-    },
-    scopedSlots: _vm._u([{
-      key: "footer",
-      fn: function () {
-        return [_vm._t("footer", function () {
-          return [_c('div', {
-            staticClass: "or-confirm-footer"
-          }, [_c('or-button', {
-            ref: "confirmationButtonRef",
-            attrs: {
-              "color": _vm.confirmButtonColor,
-              "content": _vm.confirmButtonText,
-              "is-loading": _vm.isLoading,
-              "is-disabled": _vm.isButtonDisabled
-            },
-            on: {
-              "click": _vm.handleConfirm
-            }
-          }), _vm._v(" "), _c('or-button', {
-            attrs: {
-              "type": "outlined",
-              "content": _vm.denyButtonText,
-              "is-disabled": _vm.isLoading
-            },
-            on: {
-              "click": _vm.handleClose
-            }
-          })], 1)];
-        }, {
-          "close": _vm.handleClose,
-          "confirm": _vm.handleConfirm
-        })];
-      },
-      proxy: true
-    }], null, true)
-  }, [_vm._t("default"), _vm._v(" "), _vm.confirmationText ? _c('or-input', {
-    ref: "confirmationTextboxRef",
-    staticClass: "confirmation-textbox",
-    attrs: {
-      "label": _vm.textConfirmationLabel,
-      "placeholder": _vm.textConfirmationPlaceholder,
-      "error": _vm.textConfirmationError,
-      "is-invalid": _vm.touched && _vm.isInvalid
-    },
-    on: {
-      "blur": _vm.touch
-    },
-    model: {
-      value: _vm.confirmationValue,
-      callback: function ($$v) {
-        _vm.confirmationValue = $$v;
-      },
-      expression: "confirmationValue"
-    }
-  }) : _vm._e()], 2);
-};
-var __vue_staticRenderFns__ = [];
-
-/* style */
-const __vue_inject_styles__ = undefined;
-/* scoped */
-const __vue_scope_id__ = "data-v-7f2367a9";
-/* module identifier */
-const __vue_module_identifier__ = undefined;
-/* functional template */
-const __vue_is_functional_template__ = false;
-/* style inject */
-
-/* style inject SSR */
-
-/* style inject shadow dom */
-
-const __vue_component__ = /*#__PURE__*/normalizeComponent({
-  render: __vue_render__,
-  staticRenderFns: __vue_staticRenderFns__
-}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
-
-export { __vue_component__ as default };
+export { _ as default } from '../OrConfirm-146c07d4.js';
+import '../OrAvatar-7d519020.js';

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

@@ -1 +1 @@
-export { default as OrConfirm } from './OrConfirm.js';
+export { _ as OrConfirm } from '../OrConfirm-146c07d4.js';

package/dist/bundled/v2/components/OrConfirm-146c07d4.js

@@ -0,0 +1,260 @@
+import { computed, defineComponent, ref } from 'vue-demi';
+import { m as resolveUnref, n as useMagicKeys, q as useActiveElement, w as whenever } from './OrBottomSheetV3-022aa5f7.js';
+import { _ as __vue_component__$1, B as BUTTON_COLOR } from './OrButtonV2-d0c4e061.js';
+import { _ as __vue_component__$2, O as OrModalSizes } from './OrModal-8420fe3c.js';
+import __vue_component__$3 from './OrInput/OrInput.js';
+import { s as styleInject, n as normalizeComponent } from './OrAvatar-7d519020.js';
+
+function logicAnd(...args) {
+  return computed(() => args.every((i) => resolveUnref(i)));
+}
+
+var script = defineComponent({
+  name: 'OrConfirm',
+  components: {
+    OrButton: __vue_component__$1,
+    OrModal: __vue_component__$2,
+    OrInput: __vue_component__$3
+  },
+  props: {
+    titleText: {
+      type: String,
+      required: false,
+      default: null
+    },
+    confirmButtonText: {
+      type: String,
+      required: false,
+      default: 'Confirm'
+    },
+    denyButtonText: {
+      type: String,
+      required: false,
+      default: 'Deny'
+    },
+    confirmButtonColor: {
+      type: String,
+      required: false,
+      default: BUTTON_COLOR.ERROR
+    },
+    isOpen: {
+      type: Boolean,
+      required: true
+    },
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    isDisabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    confirmationText: {
+      type: String,
+      required: false,
+      default: null
+    },
+    textConfirmationLabel: {
+      type: String,
+      required: false,
+      default: null
+    },
+    textConfirmationPlaceholder: {
+      type: String,
+      required: false,
+      default: null
+    },
+    textConfirmationError: {
+      type: String,
+      required: false,
+      default: null
+    },
+    showClose: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    closeOnClickOutside: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    size: {
+      type: String,
+      required: false,
+      default: OrModalSizes.tiny
+    }
+  },
+  emits: ['close', 'confirm'],
+  setup(props, _ref) {
+    let {
+      emit
+    } = _ref;
+    const confirmationTextboxRef = ref();
+    const confirmationButtonRef = ref();
+    const confirmationValue = ref('');
+    const {
+      escape,
+      enter
+    } = useMagicKeys();
+    const activeElement = useActiveElement();
+    const isTextboxActive = computed(() => {
+      var _a;
+      return (activeElement === null || activeElement === void 0 ? void 0 : activeElement.value) === ((_a = confirmationTextboxRef === null || confirmationTextboxRef === void 0 ? void 0 : confirmationTextboxRef.value) === null || _a === void 0 ? void 0 : _a.inputRef);
+    });
+    const isInvalid = computed(() => {
+      return !!props.confirmationText && props.confirmationText !== confirmationValue.value;
+    });
+    const handleConfirm = () => {
+      if (!props.isDisabled && !isInvalid.value) emit('confirm');
+    };
+    whenever(logicAnd(enter, isTextboxActive), () => {
+      handleConfirm();
+    });
+    return {
+      confirmationTextboxRef,
+      confirmationButtonRef,
+      confirmationValue,
+      isInvalid,
+      escape,
+      handleConfirm
+    };
+  },
+  data() {
+    return {
+      touched: false
+    };
+  },
+  computed: {
+    isButtonDisabled() {
+      return !!this.isDisabled || this.isInvalid;
+    }
+  },
+  watch: {
+    escape(val) {
+      if (val) this.handleClose();
+    },
+    isOpen() {
+      this.confirmationValue = '';
+      this.touched = false;
+    },
+    confirmationTextboxRef(val) {
+      if (val) val.focus();
+    },
+    confirmationButtonRef(val) {
+      var _a;
+      if (val && !this.confirmationText) (_a = val.$el) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+  },
+  methods: {
+    touch() {
+      this.touched = true;
+    },
+    handleClose() {
+      if (this.isOpen) this.$emit('close');
+    }
+  }
+});
+
+var css_248z = "@keyframes spinAround-data-v-7f2367a9{from{transform:rotate(0)}to{transform:rotate(359deg)}}@keyframes fade-data-v-7f2367a9{from{opacity:1}to{opacity:0}}.or-confirm-footer[data-v-7f2367a9]{display:flex;flex-direction:row;gap:var(--s-4);justify-content:flex-end}.confirmation-textbox[data-v-7f2367a9]{margin-top:var(--s-3)}.or-modal[data-v-7f2367a9]  .header{padding-bottom:var(--s-4)!important}.or-modal[data-v-7f2367a9]  .content{padding-bottom:0!important}.or-modal[data-v-7f2367a9]  .content{font-size:var(--fs-1);font-weight:400;line-height:var(--lh-1)}.or-modal[data-v-7f2367a9]  .footer{box-shadow:none!important}";
+styleInject(css_248z);
+
+/* script */
+const __vue_script__ = script;
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('or-modal', {
+    staticClass: "or-confirm",
+    attrs: {
+      "is-open": _vm.isOpen,
+      "role": "alertdialog",
+      "title-text": _vm.titleText,
+      "size": _vm.size,
+      "show-close": _vm.showClose,
+      "close-on-click-outside": _vm.closeOnClickOutside
+    },
+    on: {
+      "close": _vm.handleClose
+    },
+    scopedSlots: _vm._u([{
+      key: "footer",
+      fn: function () {
+        return [_vm._t("footer", function () {
+          return [_c('div', {
+            staticClass: "or-confirm-footer"
+          }, [_c('or-button', {
+            ref: "confirmationButtonRef",
+            attrs: {
+              "color": _vm.confirmButtonColor,
+              "content": _vm.confirmButtonText,
+              "is-loading": _vm.isLoading,
+              "is-disabled": _vm.isButtonDisabled
+            },
+            on: {
+              "click": _vm.handleConfirm
+            }
+          }), _vm._v(" "), _c('or-button', {
+            attrs: {
+              "type": "outlined",
+              "content": _vm.denyButtonText,
+              "is-disabled": _vm.isLoading
+            },
+            on: {
+              "click": _vm.handleClose
+            }
+          })], 1)];
+        }, {
+          "close": _vm.handleClose,
+          "confirm": _vm.handleConfirm
+        })];
+      },
+      proxy: true
+    }], null, true)
+  }, [_vm._t("default"), _vm._v(" "), _vm.confirmationText ? _c('or-input', {
+    ref: "confirmationTextboxRef",
+    staticClass: "confirmation-textbox",
+    attrs: {
+      "label": _vm.textConfirmationLabel,
+      "placeholder": _vm.textConfirmationPlaceholder,
+      "error": _vm.textConfirmationError,
+      "is-invalid": _vm.touched && _vm.isInvalid
+    },
+    on: {
+      "blur": _vm.touch
+    },
+    model: {
+      value: _vm.confirmationValue,
+      callback: function ($$v) {
+        _vm.confirmationValue = $$v;
+      },
+      expression: "confirmationValue"
+    }
+  }) : _vm._e()], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = "data-v-7f2367a9";
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { __vue_component__ as _, logicAnd as l };