@onereach/ui-components 6.0.1-beta.3239.0 → 6.0.1-beta.3242.0

package/dist/bundled/v2/components/OrContextMenuV3/OrContextMenu.js

@@ -0,0 +1,108 @@
+import { defineComponent, ref, watch } from 'vue-demi';
+import __vue_component__$1 from '../OrMenuV3/OrMenu.js';
+import { PopoverPlacement } from '../OrPopoverV3/props.js';
+import { usePopoverState } from '../../hooks/usePopoverState.js';
+import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
+
+var script = defineComponent({
+  components: {
+    OrMenu: __vue_component__$1
+  },
+  props: {
+    trigger: {
+      type: Object,
+      default: undefined
+    },
+    placement: {
+      type: String,
+      default: PopoverPlacement.BottomStart
+    },
+    offset: {
+      type: [Number, Object, Function],
+      default: undefined
+    }
+  },
+  emits: ['update:state', 'open', 'close'],
+  expose: ['state', 'open', 'close', 'toggle'],
+  setup(props, context) {
+    // State
+    const {
+      state,
+      open,
+      close,
+      toggle
+    } = usePopoverState(ref(false), context.emit);
+    // #region Trigger Point
+    const triggerPoint = ref();
+    function onContextMenu(event) {
+      event.preventDefault();
+      triggerPoint.value = {
+        getBoundingClientRect: () => new DOMRect(event.x, event.y)
+      };
+      open();
+    }
+    watch(() => props.trigger, (trigger, prevTrigger) => {
+      if (trigger) {
+        trigger.addEventListener('contextmenu', onContextMenu);
+      }
+      if (prevTrigger) {
+        prevTrigger.removeEventListener('contextmenu', onContextMenu);
+      }
+    }, {
+      immediate: true
+    });
+    // #endregion
+    return {
+      state,
+      open,
+      close,
+      toggle,
+      triggerPoint
+    };
+  }
+});
+
+/* 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('OrMenu', {
+    attrs: {
+      "is-open": _vm.state === 'open',
+      "trigger": _vm.triggerPoint,
+      "placement": _vm.placement,
+      "offset": _vm.offset
+    },
+    on: {
+      "update:state": function ($event) {
+        _vm.state = $event;
+      }
+    }
+  }, [_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);
+
+export { __vue_component__ as default };

package/dist/bundled/v2/components/OrContextMenuV3/OrContextMenu.vue.d.ts

@@ -0,0 +1,59 @@
+import { VirtualElement } from '@floating-ui/dom';
+import { PropType } from 'vue-demi';
+import { ContextMenuOffset, ContextMenuPlacement } from './props';
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
+    state: import("@vue/composition-api").Ref<"open" | "closed">;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    triggerPoint: import("@vue/composition-api").Ref<VirtualElement | undefined>;
+}> & import("@vue/composition-api").Data, {}, {}, {
+    trigger: {
+        type: PropType<HTMLElement>;
+        default: undefined;
+    };
+    placement: {
+        type: PropType<ContextMenuPlacement>;
+        default: ContextMenuPlacement;
+    };
+    offset: {
+        type: PropType<ContextMenuOffset>;
+        default: undefined;
+    };
+}, import("@vue/composition-api").ExtractPropTypes<{
+    trigger: {
+        type: PropType<HTMLElement>;
+        default: undefined;
+    };
+    placement: {
+        type: PropType<ContextMenuPlacement>;
+        default: ContextMenuPlacement;
+    };
+    offset: {
+        type: PropType<ContextMenuOffset>;
+        default: undefined;
+    };
+}>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
+    trigger: HTMLElement;
+    placement: ContextMenuPlacement;
+    offset: ContextMenuOffset;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, import("@vue/composition-api").ShallowUnwrapRef<{
+    state: import("@vue/composition-api").Ref<"open" | "closed">;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    triggerPoint: import("@vue/composition-api").Ref<VirtualElement | undefined>;
+}>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
+    trigger: HTMLElement;
+    placement: ContextMenuPlacement;
+    offset: ContextMenuOffset;
+} & {} & {
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, {
+    trigger: HTMLElement;
+    placement: ContextMenuPlacement;
+    offset: ContextMenuOffset;
+}, true>);
+export default _default;

package/dist/bundled/v2/components/OrContextMenuV3/index.d.ts

@@ -0,0 +1,2 @@
+export { default as OrContextMenuV3 } from './OrContextMenu.vue';
+export * from './props';

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

@@ -0,0 +1,2 @@
+export { default as OrContextMenuV3 } from './OrContextMenu.js';
+export { PopoverPlacement as ContextMenuPlacement } from '../OrPopoverV3/props.js';

package/dist/bundled/v2/components/OrContextMenuV3/props.d.ts

@@ -0,0 +1 @@
+export { MenuOffset as ContextMenuOffset, MenuPlacement as ContextMenuPlacement } from '../or-menu-v3';

package/dist/bundled/v2/components/OrContextMenuV3/props.js

@@ -0,0 +1 @@
+export { PopoverPlacement as ContextMenuPlacement } from '../OrPopoverV3/props.js';

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-818431d8.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-47a6a91f.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-2c7e113b.js';
 import { DatePicker, DatePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from './hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-818431d8.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-47a6a91f.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-2c7e113b.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-7fd83e23.js';
 import { DateTimePickerTimeFormat } from './props.js';

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

@@ -16,7 +16,7 @@ var script = defineComponent({
       default: false
     },
     trigger: {
-      type: HTMLElement,
+      type: Object,
       default: undefined
     },
     placement: {

package/dist/bundled/v2/components/OrMenuV3/OrMenu.vue.d.ts

@@ -1,3 +1,4 @@
+import { ReferenceElement } from '@floating-ui/dom';
 import { PropType } from 'vue-demi';
 import { MenuOffset, MenuPlacement } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -14,10 +15,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: boolean;
     };
     trigger: {
-        type: {
-            new (): HTMLElement;
-            prototype: HTMLElement;
-        };
+        type: PropType<ReferenceElement>;
         default: undefined;
     };
     placement: {
@@ -34,10 +32,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: boolean;
     };
     trigger: {
-        type: {
-            new (): HTMLElement;
-            prototype: HTMLElement;
-        };
+        type: PropType<ReferenceElement>;
         default: undefined;
     };
     placement: {
@@ -50,7 +45,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     };
 }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
     isOpen: boolean;
-    trigger: HTMLElement;
+    trigger: ReferenceElement;
     placement: MenuPlacement;
     offset: MenuOffset;
 } & {} & {
@@ -65,14 +60,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     onClick: (event: Event) => void;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     isOpen: boolean;
-    trigger: HTMLElement;
+    trigger: ReferenceElement;
     placement: MenuPlacement;
     offset: MenuOffset;
 } & {} & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     isOpen: boolean;
-    trigger: HTMLElement;
+    trigger: ReferenceElement;
     placement: MenuPlacement;
     offset: MenuOffset;
 }, true>);

package/dist/bundled/v2/components/OrPopoverV3/OrPopover.js

@@ -30,7 +30,7 @@ var script = defineComponent({
       default: undefined
     },
     trigger: {
-      type: HTMLElement,
+      type: Object,
       default: undefined
     },
     placement: {
@@ -101,11 +101,14 @@ var script = defineComponent({
               placement,
               middleware: [offset(props.offset), shift(), flip(), hide()]
             });
+            const {
+              width: triggerWidth
+            } = trigger.getBoundingClientRect();
             Object.assign(rootElement.style, {
               left: `${x}px`,
               top: `${y}px`,
               visibility: middlewareData.hide.referenceHidden ? 'hidden' : 'visible',
-              width: props.fullWidth ? `${trigger.offsetWidth}px` : ''
+              width: props.fullWidth ? `${triggerWidth}px` : ''
             });
             isFlipped.value = Boolean((_a = middlewareData.flip) === null || _a === void 0 ? void 0 : _a.index);
             isHidden.value = Boolean((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden);

package/dist/bundled/v2/components/OrPopoverV3/OrPopover.vue.d.ts

@@ -1,3 +1,4 @@
+import { ReferenceElement } from '@floating-ui/dom';
 import { PropType } from 'vue-demi';
 import { PopoverOffset, PopoverPlacement, PopoverVariant } from './props';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -35,10 +36,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     trigger: {
-        type: {
-            new (): HTMLElement;
-            prototype: HTMLElement;
-        };
+        type: PropType<ReferenceElement>;
         default: undefined;
     };
     placement: {
@@ -77,10 +75,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     trigger: {
-        type: {
-            new (): HTMLElement;
-            prototype: HTMLElement;
-        };
+        type: PropType<ReferenceElement>;
         default: undefined;
     };
     placement: {
@@ -109,7 +104,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     bottomSheetProps: Readonly<Partial<{
         [x: number]: string;
     } | {}> & Omit<{} & {}, never>>;
-    trigger: HTMLElement;
+    trigger: ReferenceElement;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     offset: PopoverOffset;
     fullWidth: boolean;
@@ -142,7 +137,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     bottomSheetProps: Readonly<Partial<{
         [x: number]: string;
     } | {}> & Omit<{} & {}, never>>;
-    trigger: HTMLElement;
+    trigger: ReferenceElement;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     offset: PopoverOffset;
     fullWidth: boolean;
@@ -156,7 +151,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     bottomSheetProps: Readonly<Partial<{
         [x: number]: string;
     } | {}> & Omit<{} & {}, never>>;
-    trigger: HTMLElement;
+    trigger: ReferenceElement;
     placement: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
     offset: PopoverOffset;
     fullWidth: boolean;

package/dist/bundled/v2/components/OrPopoverV3/styles.js

@@ -2,11 +2,7 @@ import { PopoverPlacement } from './props.js';
 
 const Popover = [
 // Position
-'absolute',
-// Box
-// this hack fixes the issue when popover triggers 'ResizeObserver loop limit exceeded' runtime error
-// https://github.com/floating-ui/floating-ui/issues/1740#issuecomment-1563544849
-'w-max'];
+'absolute'];
 const PopoverBody = [
 // Spacing
 'mx-sm', 'my-sm',

package/dist/bundled/v2/components/index.d.ts

@@ -20,6 +20,7 @@ export * from './or-color-picker';
 export * from './or-combined-input-v3';
 export * from './or-confirm';
 export * from './or-confirm-v3';
+export * from './or-context-menu-v3';
 export * from './or-date-picker-v3';
 export * from './or-date-time-picker';
 export * from './or-date-time-picker-v3';

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

@@ -37,6 +37,8 @@ export { InputBoxSize as CombinedInputSize, InputBoxSize as DatePickerSize, Inpu
 export { default as OrConfirm } from './OrConfirm/OrConfirm.js';
 export { default as OrConfirmV3 } from './OrConfirmV3/OrConfirm.js';
 export { ConfirmType } from './OrConfirmV3/props.js';
+export { default as OrContextMenuV3 } from './OrContextMenuV3/OrContextMenu.js';
+export { PopoverPlacement as ContextMenuPlacement, PopoverPlacement as MenuPlacement, PopoverPlacement, PopoverVariant, PopoverPlacement as TooltipPlacement } from './OrPopoverV3/props.js';
 export { default as OrDatePickerV3 } from './OrDatePickerV3/OrDatePicker.js';
 export { default as OrDateTimePicker } from './OrDateTimePicker/OrDateTimePicker.js';
 export { DEFAULT_TEXT, OrDateTimePickerItemTypes, OrDateTimePickerTypes } from './OrDateTimePicker/constants.js';
@@ -87,7 +89,6 @@ export { default as OrLoaderV3 } from './OrLoaderV3/OrLoader.js';
 export { LoaderColor, LoaderSize, LoaderVariant } from './OrLoaderV3/props.js';
 export { default as OrMenuItemV3 } from './OrMenuItemV3/OrMenuItem.js';
 export { default as OrMenuV3 } from './OrMenuV3/OrMenu.js';
-export { PopoverPlacement as MenuPlacement, PopoverPlacement, PopoverVariant, PopoverPlacement as TooltipPlacement } from './OrPopoverV3/props.js';
 export { default as OrModal } from './OrModal/OrModal.js';
 export { OrModalSizes } from './OrModal/constants.js';
 export { default as OrModalV3 } from './OrModalV3/OrModal.js';