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

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

@@ -1,5 +1,5 @@
 export { default as OrInputBoxV3 } from './OrInputBox.js';
 export { InputBoxSize, InputBoxVariant } from './props.js';
 import 'vue-demi';
-import './styles.js';
 import '../../normalize-component-6e8e3d80.js';
+import './styles.js';

package/dist/bundled/v2/components/OrInputV3/OrInput.js

@@ -22,10 +22,10 @@ import '../OrIconV3/styles.js';
 import '../OrIconButtonV3/props.js';
 import '../OrIconButtonV3/styles.js';
 import '../OrTooltipV3/OrTooltip.js';
+import '@vueuse/core';
 import '../OrTooltipV3/styles.js';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
-import '@vueuse/core';
 import '../OrPopoverV3/props.js';
 import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
@@ -37,7 +37,6 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'portal-vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
-import '../../hooks/usePopoverState.js';
 import '../OrInputBoxV3/styles.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';
@@ -169,7 +168,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 */
@@ -203,7 +202,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",
@@ -331,47 +375,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",
@@ -416,7 +420,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/bundled/v2/components/OrInputV3/index.js

@@ -15,10 +15,10 @@ import '../OrIconButtonV3/OrIconButton.js';
 import '../OrIconButtonV3/props.js';
 import '../OrIconButtonV3/styles.js';
 import '../OrTooltipV3/OrTooltip.js';
+import '@vueuse/core';
 import '../OrTooltipV3/styles.js';
 import '../OrPopoverV3/OrPopover.js';
 import '../../floating-ui.dom.esm-83eba816.js';
-import '@vueuse/core';
 import '../OrPopoverV3/props.js';
 import '../OrPopoverV3/styles.js';
 import '../OrBottomSheetV3/OrBottomSheet.js';
@@ -30,7 +30,6 @@ import '../OrTeleportV3/OrTeleport.js';
 import 'portal-vue';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
-import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';
 import '../OrInputBoxV3/OrInputBox.js';
 import '../OrInputBoxV3/styles.js';

package/dist/bundled/v2/components/OrMenuV3/OrMenu.js

@@ -1,7 +1,6 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
+import { defineComponent, ref, computed } from 'vue-demi';
 import { MenuRoot } from './styles.js';
 import __vue_component__$1 from '../OrPopoverV3/OrPopover.js';
-import { usePopoverState } from '../../hooks/usePopoverState.js';
 import { PopoverPlacement } from '../OrPopoverV3/props.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../../floating-ui.dom.esm-83eba816.js';
@@ -25,10 +24,6 @@ var script = defineComponent({
   },
   inheritAttrs: false,
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
     trigger: {
       type: HTMLElement,
       default: undefined
@@ -38,36 +33,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,
@@ -85,8 +112,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,
@@ -95,7 +122,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/bundled/v2/components/OrMenuV3/OrMenu.vue.d.ts

@@ -2,17 +2,20 @@ import { PropType } from 'vue-demi';
 import { MenuPlacement } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    popoverRoot: import("@vue/composition-api").ComputedRef<undefined>;
+    state: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    state: import("@vue/composition-api").Ref<"open" | "closed">;
+    isOpen: import("@vue/composition-api").ComputedRef<undefined>;
     open: () => void;
     close: () => void;
     toggle: () => void;
     onClick: (event: Event) => void;
 }> & import("@vue/composition-api").Data, {}, {}, {
-    isOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     trigger: {
         type: {
             new (): HTMLElement;
@@ -25,10 +28,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: MenuPlacement;
     };
 }, import("@vue/composition-api").ExtractPropTypes<{
-    isOpen: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     trigger: {
         type: {
             new (): HTMLElement;
@@ -41,27 +40,31 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: MenuPlacement;
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
-    isOpen: boolean;
     trigger: HTMLElement;
     placement: MenuPlacement;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
+        [x: string]: ((...args: any[]) => any) | null;
+    } | string[], {} & {}, {
+        [x: number]: string;
+    } | {}, true> | undefined>;
+    popoverRoot: import("@vue/composition-api").ComputedRef<undefined>;
+    state: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
-    state: import("@vue/composition-api").Ref<"open" | "closed">;
+    isOpen: import("@vue/composition-api").ComputedRef<undefined>;
     open: () => void;
     close: () => void;
     toggle: () => void;
     onClick: (event: Event) => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
-    isOpen: boolean;
     trigger: HTMLElement;
     placement: MenuPlacement;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
-    isOpen: boolean;
     trigger: HTMLElement;
     placement: MenuPlacement;
 }, true>);

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

@@ -16,5 +16,4 @@ import 'portal-vue';
 import '../../normalize-component-6e8e3d80.js';
 import '../../hooks/useElevation.js';
 import '../../utils/isVisible.js';
-import '../../hooks/usePopoverState.js';
 import '../../hooks/useResponsive/useResponsive.js';