@onereach/ui-components 4.6.3-beta.2791.0 → 4.6.3

package/dist/esm/v2/{OrInlineTextarea-88654ed6.js → OrInlineTextarea-7cc45396.js}

@@ -4,7 +4,7 @@ import '@vueuse/core';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { _ as __vue_component__$1 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$2 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$3 } from './OrIconButton-15b7cd45.js';
+import { _ as __vue_component__$3 } from './OrIconButton-ee747c71.js';
 import { _ as __vue_component__$4 } from './OrInlineInputBox-19b49ee6.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrInput-54ebf19d.js → OrInput-3eeca714.js}

@@ -5,10 +5,10 @@ import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import { u as useValidationAttributes } from './useValidationAttributes-d1abbe34.js';
 import { _ as __vue_component__$1 } from './OrError-4ffc1c39.js';
 import { _ as __vue_component__$2 } from './OrHint-aa221198.js';
-import { _ as __vue_component__$4 } from './OrIconButton-15b7cd45.js';
+import { _ as __vue_component__$4 } from './OrIconButton-ee747c71.js';
 import { _ as __vue_component__$3 } from './OrIcon-d35a84d8.js';
-import { _ as __vue_component__$5 } from './OrInputBox-d36b1323.js';
-import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-fe250f7a.js';
+import { _ as __vue_component__$5 } from './OrInputBox-7f3c0ee9.js';
+import { I as InputBoxSize } from './OrInputBox.vue_rollup-plugin-vue_script-906b3ef8.js';
 import { _ as __vue_component__$6 } from './OrLabel-63380256.js';
 import { _ as __vue_component__$7 } from './OrLoader-b0c381f9.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
@@ -160,7 +160,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-10156a60]{min-width:0;background:0 0;outline:0}input[type=number][data-v-10156a60]::-webkit-inner-spin-button{display:none}input[type=search][data-v-10156a60]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-75bfda1e]{min-width:0;background:0 0;outline:0}input[type=number][data-v-75bfda1e]::-webkit-inner-spin-button{display:none}input[type=search][data-v-75bfda1e]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -194,7 +194,52 @@ var __vue_render__ = function () {
       "invalid": !!_vm.error,
       "readonly": _vm.readonly || _vm.loading,
       "disabled": _vm.disabled
-    }
+    },
+    scopedSlots: _vm._u([{
+      key: "addon",
+      fn: function () {
+        return [_vm.loading ? [_c('OrLoader', {
+          attrs: {
+            "variant": 'circular',
+            "color": 'primary',
+            "size": _vm.isMobile ? 'm' : 's'
+          }
+        })] : [_vm.type === 'password' ? [_c('OrIconButton', {
+          attrs: {
+            "icon": {
+              icon: _vm.disclosed ? 'visibility_off' : 'visibility',
+              variant: 'filled'
+            },
+            "color": 'inherit',
+            "disabled": _vm.disabled
+          },
+          on: {
+            "click": function ($event) {
+              $event.stopPropagation();
+              _vm.disclosed = !_vm.disclosed;
+            }
+          }
+        })] : _vm._e(), _vm._v(" "), _vm.type === 'search' ? [_vm.modelValue ? [_c('OrIconButton', {
+          attrs: {
+            "icon": 'close',
+            "color": 'inherit',
+            "disabled": _vm.readonly || _vm.disabled
+          },
+          on: {
+            "click": function ($event) {
+              $event.stopPropagation();
+              return _vm.$emit('update:modelValue', '');
+            }
+          }
+        })] : [_c('OrIcon', {
+          attrs: {
+            "icon": 'search',
+            "variant": 'outlined'
+          }
+        })]] : _vm._e()]];
+      },
+      proxy: true
+    }])
   }, [(_vm.type === 'password' && _vm.disclosed ? 'text' : _vm.type) === 'checkbox' ? _c('input', _vm._b({
     directives: [{
       name: "model",
@@ -322,47 +367,7 @@ var __vue_render__ = function () {
         _vm.proxyModelValue = $event.target.value;
       }
     }
-  }, 'input', _vm.controlAttributes, false)), _vm._v(" "), _c('div', {
-    class: ['layout-inline-row']
-  }, [_vm.loading ? [_c('OrLoader', {
-    attrs: {
-      "variant": 'circular',
-      "color": 'primary',
-      "size": _vm.isMobile ? 'm' : 's'
-    }
-  })] : [_vm.type === 'password' ? [_c('OrIconButton', {
-    attrs: {
-      "icon": {
-        icon: _vm.disclosed ? 'visibility_off' : 'visibility',
-        variant: 'filled'
-      },
-      "color": 'inherit',
-      "disabled": _vm.disabled
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-        _vm.disclosed = !_vm.disclosed;
-      }
-    }
-  })] : _vm._e(), _vm._v(" "), _vm.type === 'search' ? [_vm.modelValue ? [_c('OrIconButton', {
-    attrs: {
-      "icon": 'close',
-      "color": 'inherit',
-      "disabled": _vm.readonly || _vm.disabled
-    },
-    on: {
-      "click": function ($event) {
-        $event.stopPropagation();
-        return _vm.$emit('update:modelValue', '');
-      }
-    }
-  })] : [_c('OrIcon', {
-    attrs: {
-      "icon": 'search',
-      "variant": 'outlined'
-    }
-  })]] : _vm._e()]], 2)]), _vm._v(" "), _c('div', {
+  }, 'input', _vm.controlAttributes, false))]), _vm._v(" "), _c('div', {
     directives: [{
       name: "show",
       rawName: "v-show",
@@ -407,7 +412,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-10156a60";
+const __vue_scope_id__ = "data-v-75bfda1e";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrInputBox-d36b1323.js → OrInputBox-7f3c0ee9.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrInputBox.vue_rollup-plugin-vue_script-fe250f7a.js';
+import { s as script } from './OrInputBox.vue_rollup-plugin-vue_script-906b3ef8.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 /* script */
@@ -17,7 +17,13 @@ var __vue_render__ = function () {
       "readonly": _vm.readonly ? '' : null,
       "disabled": _vm.disabled ? '' : null
     }
-  }, [_vm._t("default")], 2);
+  }, [_vm._t("default"), _vm._v(" "), _vm.$slots.addon ? [_c('OrInputBoxAddon', {
+    attrs: {
+      "invalid": _vm.invalid,
+      "readonly": _vm.readonly,
+      "disabled": _vm.disabled
+    }
+  }, [_vm._t("addon")], 2)] : _vm._e()], 2);
 };
 var __vue_staticRenderFns__ = [];
 

package/dist/esm/v2/{OrInputBox.vue_rollup-plugin-vue_script-fe250f7a.js → OrInputBox.vue_rollup-plugin-vue_script-906b3ef8.js}

@@ -1,4 +1,79 @@
 import { defineComponent, ref, computed } from 'vue-demi';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+const InputBoxAddon = [
+// Layout
+'layout-inline-row',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
+
+var script$1 = defineComponent({
+  name: 'OrInputBoxAddon',
+  props: {
+    invalid: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  expose: ['root'],
+  setup() {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-input-box-addon-v3', ...InputBoxAddon]);
+    return {
+      root,
+      rootStyles
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script$1;
+
+/* 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,
+    attrs: {
+      "invalid": _vm.invalid ? '' : null,
+      "readonly": _vm.readonly ? '' : null,
+      "disabled": _vm.disabled ? '' : null
+    }
+  }, [_vm._t("default")], 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);
 
 var InputBoxVariant;
 (function (InputBoxVariant) {
@@ -57,6 +132,9 @@ const InputBoxRootSizes = {
 
 var script = defineComponent({
   name: 'OrInputBox',
+  components: {
+    OrInputBoxAddon: __vue_component__
+  },
   props: {
     variant: {
       type: String,

package/dist/esm/v2/{OrMenu-da06817a.js → OrMenu-8b902c22.js}

@@ -1,7 +1,5 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
-import '@vueuse/core';
-import { u as usePopoverState } from './usePopoverState-cc8c0361.js';
-import { _ as __vue_component__$1, P as PopoverPlacement } from './OrPopover-be18292f.js';
+import { defineComponent, ref, computed } from 'vue-demi';
+import { _ as __vue_component__$1, P as PopoverPlacement } from './OrPopover-80459663.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const MenuRoot = [
@@ -17,10 +15,6 @@ var script = defineComponent({
   },
   inheritAttrs: false,
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
     trigger: {
       type: HTMLElement,
       default: undefined
@@ -30,36 +24,68 @@ var script = defineComponent({
       default: PopoverPlacement.Bottom
     }
   },
-  emits: ['update:state', 'open', 'close'],
-  expose: ['root', 'state', 'open', 'close', 'toggle'],
-  setup(props, context) {
+  emits: ['update:state'],
+  expose: ['root', 'state', 'isOpen', 'open', 'close', 'toggle'],
+  setup() {
     // Refs
     const root = ref();
+    const popover = ref();
+    const popoverRoot = computed(() => {
+      var _a;
+      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.root;
+    });
+    const popoverState = computed(() => {
+      var _a;
+      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
+    });
     // Styles
     const rootStyles = computed(() => ['or-menu-v3', ...MenuRoot]);
     // State
-    const {
-      state,
-      open,
-      close,
-      toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context);
+    const isOpen = computed(() => {
+      var _a;
+      return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.isOpen;
+    });
+    // Methods
+    function open() {
+      const popoverInstance = popover.value;
+      if (popoverInstance) {
+        popoverInstance.open();
+      }
+    }
+    function close() {
+      const popoverInstance = popover.value;
+      if (popoverInstance) {
+        popoverInstance.close();
+      }
+    }
+    function toggle() {
+      isOpen.value ? close() : open();
+    }
     // Handlers
     function onClick(event) {
       const path = event.composedPath();
-      if (path.some(_ref => {
+      const classLists = path.filter(_ref => {
         let {
           classList
         } = _ref;
-        return classList === null || classList === void 0 ? void 0 : classList.contains('or-menu-item-v3');
-      })) {
+        return !!classList;
+      }).map(_ref2 => {
+        let {
+          classList
+        } = _ref2;
+        return classList;
+      });
+      if (classLists.some(classList => classList.contains('or-menu-item-v3'))) {
         close();
       }
     }
     return {
       root,
+      popover,
+      popoverRoot,
+      state: popoverState,
       rootStyles,
-      state,
+      isOpen,
       open,
       close,
       toggle,
@@ -77,8 +103,8 @@ var __vue_render__ = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c('OrPopover', {
+    ref: "popover",
     attrs: {
-      "is-open": _vm.state === 'open',
       "variant": 'auto',
       "trigger": _vm.trigger,
       "placement": _vm.placement,
@@ -87,7 +113,7 @@ var __vue_render__ = function () {
     },
     on: {
       "update:state": function ($event) {
-        _vm.state = $event;
+        return _vm.$emit('update:state', $event);
       }
     }
   }, [_c('div', _vm._b({

package/dist/esm/v2/OrModal-1f80d87f.js

@@ -0,0 +1,174 @@
+import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { _ as __vue_component__$2 } from './OrIconButton-ee747c71.js';
+import { _ as __vue_component__$1 } from './OrOverlay-4c8c11e2.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var ModalSize;
+(function (ModalSize) {
+  ModalSize["L"] = "l";
+  ModalSize["M"] = "m";
+  ModalSize["S"] = "s";
+})(ModalSize || (ModalSize = {}));
+
+const ModalRoot = [
+// Layout
+'layout-column',
+// Box
+'w-full', 'h-full md:h-auto md:max-h-[min(calc(100%-(2*theme(spacing.3xl))),772px)]',
+// Shape
+'md:rounded-md',
+// Spacing
+'py-md md:py-lg', 'gap-md md:gap-lg',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark',
+// Elevation
+'shadow-modal', 'dark:shadow-modal-dark'];
+const ModalRootSizes = {
+  'l': [
+  // Box
+  'md:w-[1050px]'],
+  'm': [
+  // Box
+  'md:w-[700px]'],
+  's': [
+  // Box
+  'md:w-[480px]']
+};
+const ModalHeader = [
+// Layout
+'layout-row',
+// Spacing
+'px-md md:px-lg',
+// Typography
+'typography-headline-2'];
+const ModalContent = [
+// Box
+'grow', 'overflow-auto',
+// Spacing
+'px-md md:px-lg'];
+const ModalFooter = [
+// Spacing
+'px-md md:px-lg'];
+
+var script = defineComponent({
+  name: 'OrModal',
+  components: {
+    OrOverlay: __vue_component__$1,
+    OrIconButton: __vue_component__$2
+  },
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: ModalSize.M
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['open', 'close'],
+  expose: ['root', 'isActive', 'open', 'close'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-modal-v3', ...ModalRoot, ...ModalRootSizes[props.size]]);
+    const headerStyles = computed(() => [...ModalHeader]);
+    const contentStyles = computed(() => [...ModalContent]);
+    const footerStyles = computed(() => [...ModalFooter]);
+    // State
+    const isActive = ref(false);
+    // Events
+    watch(isActive, value => {
+      context.emit(value ? 'open' : 'close');
+    });
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
+    // Methods
+    function open() {
+      isActive.value = true;
+    }
+    function close() {
+      isActive.value = false;
+    }
+    return {
+      root,
+      rootStyles,
+      headerStyles,
+      contentStyles,
+      footerStyles,
+      isActive,
+      open,
+      close
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _vm.isActive ? _c('OrOverlay', {
+    attrs: {
+      "fullscreen": true
+    }
+  }, [_c('div', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles
+  }, 'div', _vm.$attrs, false), [_c('div', {
+    class: _vm.headerStyles
+  }, [_c('div', {
+    class: ['grow']
+  }, [_vm._t("header")], 2), _vm._v(" "), _c('OrIconButton', {
+    attrs: {
+      "icon": 'close',
+      "size": 'l'
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.close.apply(null, arguments);
+      }
+    }
+  })], 1), _vm._v(" "), _c('div', {
+    class: _vm.contentStyles
+  }, [_vm._t("default")], 2), _vm._v(" "), _c('div', {
+    class: _vm.footerStyles
+  }, [_vm._t("footer")], 2)])]) : _vm._e();
+};
+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 { ModalSize as M, __vue_component__ as _ };

package/dist/esm/v2/{OrNotification-ac7d3d99.js → OrNotification-16e6d4ff.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { _ as __vue_component__$2 } from './OrIconButton-15b7cd45.js';
+import { _ as __vue_component__$2 } from './OrIconButton-ee747c71.js';
 import { _ as __vue_component__$1 } from './OrIcon-d35a84d8.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrOverlay-f791976c.js → OrOverlay-4c8c11e2.js}

@@ -1,6 +1,6 @@
 import { useScrollLock } from '@vueuse/core';
 import { defineComponent, ref, computed } from 'vue-demi';
-import { u as useElevation } from './useElevation-a50ec347.js';
+import { u as useElevation } from './useElevation-b5a49746.js';
 import { _ as __vue_component__$1 } from './OrTeleport.vue2-424c7f33.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrPagination-b8b3593c.js → OrPagination-36583054.js}

@@ -4,8 +4,8 @@ import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import { _ as __vue_component__$1 } from './OrButton-9622e713.js';
 import { _ as __vue_component__$2 } from './OrIcon-d35a84d8.js';
 import { _ as __vue_component__$4 } from './OrMenuItem-6f9b8a93.js';
-import { _ as __vue_component__$3 } from './OrMenu-da06817a.js';
-import './OrPopover-be18292f.js';
+import { _ as __vue_component__$3 } from './OrMenu-8b902c22.js';
+import './OrPopover-80459663.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const PaginationRoot = [
@@ -271,7 +271,7 @@ var __vue_render__ = function () {
     }
   }, [_vm._v("\n      " + _vm._s(_vm.currentLimit) + " "), _c('OrIcon', {
     attrs: {
-      "icon": _vm.limitMenu && _vm.limitMenu.state === 'open' ? 'arrow_drop_up' : 'arrow_drop_down'
+      "icon": _vm.limitMenu && _vm.limitMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'
     }
   })], 1), _vm._v(" "), _c('OrMenu', {
     ref: "limitMenu",