@onereach/ui-components-vue2 25.1.2 → 25.1.3-beta.5771.0

package/dist/esm/components/index.d.ts

@@ -66,6 +66,7 @@ export * from './or-skeleton-v3';
 export * from './or-slider-v3';
 export * from './or-sorting-v3';
 export * from './or-status-v3';
+export * from './or-sub-menu-item-v3';
 export * from './or-switch-v3';
 export * from './or-tab-v3';
 export * from './or-tabs-v3';

package/dist/esm/components/index.js

@@ -82,6 +82,7 @@ export { OrSliderV3 } from './or-slider-v3/index.js';
 export { S as SliderColor, a as SliderOrientation } from '../types-75a1cc13.js';
 export { OrSortingV3 } from './or-sorting-v3/index.js';
 export { OrStatusV3, StatusSize, StatusVariant } from './or-status-v3/index.js';
+export { OrSubMenuItemV3 } from './or-sub-menu-item-v3/index.js';
 export { OrSwitchV3 } from './or-switch-v3/index.js';
 export { OrTabV3 } from './or-tab-v3/index.js';
 export { OrTabsV3, TabsSpacing, TabsVariant } from './or-tabs-v3/index.js';

package/dist/esm/components/or-editor-tabs-v3/index.js

@@ -1,7 +1,7 @@
-import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { s } from '../../helpers-368c7a99.js';
 import { n as ne, a as re } from '../../useValidationAttributes-BLzi0C4L-6839e2c2.js';
 import { ae as u } from '../../utils-72d9c2bb.js';
+import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { a as isVue2 } from '../../constants-2e3ea701.js';
 import { OrIconButtonV3 as OrIconButton } from '../or-icon-button-v3/index.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';

package/dist/esm/components/or-menu-item-v3/index.js

@@ -74,7 +74,7 @@ var script = defineComponent({
       default: ''
     }
   },
-  emits: ['click', 'focus', 'blur', 'close'],
+  emits: ['click', 'focus', 'blur', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'close'],
   expose: ['root'],
   setup(props) {
     // Refs
@@ -147,6 +147,18 @@ var __vue_render__ = function () {
       },
       "blur": function ($event) {
         return _vm.$emit('blur', $event);
+      },
+      "mouseover": function ($event) {
+        return _vm.$emit('mouseover', $event);
+      },
+      "mouseout": function ($event) {
+        return _vm.$emit('mouseout', $event);
+      },
+      "mouseenter": function ($event) {
+        return _vm.$emit('mouseenter', $event);
+      },
+      "mouseleave": function ($event) {
+        return _vm.$emit('mouseleave', $event);
       }
     }
   }, [_vm.icon && _vm.iconProps.icon ? [_c('OrIcon', _vm._b({
@@ -162,7 +174,7 @@ var __vue_render__ = function () {
         _vm.tooltip && _vm.tooltip.close();
       }
     }
-  }, [_vm._t("default")], 2), _vm._v(" "), _vm.closeButton ? [_c('div', {
+  }, [_vm._t("default")], 2), _vm._v(" "), _vm._t("append"), _vm._v(" "), _vm.closeButton ? [_c('div', {
     class: ['grow']
   }), _vm._v(" "), _c('OrIconButton', {
     attrs: {

package/dist/esm/components/or-menu-v3/index.js

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed, toRef } from 'vue-demi';
 import { t as te } from '../../useValidationAttributes-BLzi0C4L-6839e2c2.js';
+import { defineComponent, ref, computed, toRef } from 'vue-demi';
 import { OrPopoverV3 as OrPopover, PopoverPlacement } from '../or-popover-v3/index.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
 import '../../dom-qGGG2YCX-4d4cca6e.js';
@@ -48,11 +48,12 @@ var script = defineComponent({
       default: () => []
     }
   },
-  emits: ['update:state', 'open', 'close'],
-  expose: ['root', 'state', 'open', 'close', 'toggle'],
+  emits: ['update:state', 'open', 'close', 'mouseout', 'mouseenter', 'mouseleave'],
+  expose: ['root', 'popover', 'state', 'open', 'close', 'toggle'],
   setup(props, context) {
     // Refs
     const root = ref();
+    const popover = ref();
     // Styles
     const rootStyles = computed(() => ['or-menu-v3', ...Menu]);
     const popoverStyles = computed(() => ['or-menu-popover-v3']);
@@ -74,6 +75,7 @@ var script = defineComponent({
     }
     return {
       root,
+      popover,
       rootStyles,
       popoverStyles,
       state,
@@ -94,6 +96,7 @@ var __vue_render__ = function () {
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c('OrPopover', {
+    ref: _vm.popover,
     class: _vm.popoverStyles,
     attrs: {
       "custom-styles": _vm.popoverStyles,
@@ -116,6 +119,15 @@ var __vue_render__ = function () {
       "click": function ($event) {
         $event.stopPropagation();
         return _vm.onClick($event);
+      },
+      "mouseout": function ($event) {
+        return _vm.$emit('mouseout', $event);
+      },
+      "mouseleave": function ($event) {
+        return _vm.$emit('mouseleave', $event);
+      },
+      "mouseenter": function ($event) {
+        return _vm.$emit('mouseenter', $event);
       }
     }
   }, 'div', _vm.$attrs, false), [_vm._t("default")], 2)]);

package/dist/esm/components/or-popover-v3/index.js

@@ -1,7 +1,7 @@
 import { computePosition, offset, shift, flip, hide, size, autoUpdate } from '@floating-ui/dom';
+import { t as te, a as re, G } from '../../useValidationAttributes-BLzi0C4L-6839e2c2.js';
 import { onClickOutside } from '@vueuse/core';
 import { computed, unref, ref, shallowRef, watch, getCurrentScope, onScopeDispose, shallowReadonly, defineComponent, toRefs, toRef } from 'vue-demi';
-import { t as te, a as re, G } from '../../useValidationAttributes-BLzi0C4L-6839e2c2.js';
 import { a9 as p } from '../../utils-72d9c2bb.js';
 import { OrBottomSheetV3 as OrBottomSheet } from '../or-bottom-sheet-v3/index.js';
 import { OrTeleportV3 as OrTeleport } from '../or-teleport-v3/index.js';
@@ -296,7 +296,7 @@ var script = defineComponent({
     }
   },
   emits: ['update:state', 'open', 'close'],
-  expose: ['root', 'state', 'isFlipped', 'isHidden', 'open', 'close', 'toggle', 'bottomSheet'],
+  expose: ['root', 'containerRoot', 'state', 'isFlipped', 'isHidden', 'open', 'close', 'toggle', 'bottomSheet'],
   setup(props, context) {
     // Refs
     const root = ref();
@@ -313,9 +313,14 @@ var script = defineComponent({
       fullWidth,
       hideOptions
     } = toRefs(props);
+    const isFlipped = computed(() => computedPlacement.value !== placement.value);
+    const isHidden = computed(() => {
+      var _a;
+      return Boolean((_a = middlewareData.value.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden);
+    });
     // Styles
     const rootStyles = computed(() => ['or-popover-v3', ...Popover, ...('class' in context.attrs ? [] : props.customStyles)]);
-    const bodyStyles = computed(() => [...PopoverBody, ...PopoverBodyPlacements[placement.value]]);
+    const bodyStyles = computed(() => [...PopoverBody, ...PopoverBodyPlacements[computedPlacement.value]]);
     // State
     const {
       state,
@@ -349,11 +354,6 @@ var script = defineComponent({
         });
       }
     });
-    const isFlipped = computed(() => computedPlacement.value !== placement.value);
-    const isHidden = computed(() => {
-      var _a;
-      return Boolean((_a = middlewareData.value.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden);
-    });
     // Helpers
     const {
       isDesktop,
@@ -407,7 +407,7 @@ var __vue_render__ = function () {
       expression: "state === 'open'"
     }],
     ref: 'containerRoot',
-    class: ['contents', 'my-state' + _vm.state]
+    class: ['contents']
   }, [_vm.isDesktop && _vm.variant === 'auto' || _vm.variant === 'popover' ? [_c('div', _vm._b({
     directives: [{
       name: "show",

package/dist/esm/components/or-sub-menu-item-v3/OrSubMenuItem.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/esm/components/or-sub-menu-item-v3/index.d.ts

@@ -0,0 +1 @@
+export { default as OrSubMenuItemV3 } from './OrSubMenuItem.vue';

package/dist/esm/components/or-sub-menu-item-v3/index.js

@@ -0,0 +1,218 @@
+import '../../dom-qGGG2YCX-4d4cca6e.js';
+import { t as te, a as re } from '../../useValidationAttributes-BLzi0C4L-6839e2c2.js';
+import { defineComponent, toRef, ref, nextTick } from 'vue-demi';
+import { OrMenuItemV3 as OrMenuItem } from '../or-menu-item-v3/index.js';
+import { OrIconV3 as OrIcon } from '../or-icon-v3/index.js';
+import { OrMenuV3 as OrMenu } from '../or-menu-v3/index.js';
+import { PopoverPlacement } from '../or-popover-v3/index.js';
+import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
+import '@vueuse/core';
+import '@onereach/styles/screens.json';
+import '@onereach/styles/tailwind.config.json';
+import '../or-icon-button-v3/index.js';
+import '../../constants-2e3ea701.js';
+import '../or-tooltip-v3/index.js';
+import '@floating-ui/dom';
+import '../../utils-72d9c2bb.js';
+import '../or-bottom-sheet-v3/index.js';
+import '../or-overlay-v3/index.js';
+import '../or-teleport-v3/index.js';
+import 'portal-vue';
+
+var script = defineComponent({
+  name: 'OrSubMenuItem',
+  components: {
+    OrMenuItem,
+    OrIcon,
+    OrMenu
+  },
+  props: {
+    icon: {
+      type: [String, Object],
+      default: undefined
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    placement: {
+      type: String,
+      default: () => PopoverPlacement.RightStart
+    },
+    tooltipText: {
+      type: String,
+      default: ''
+    }
+  },
+  emits: ['open', 'close', 'update:state', 'click', 'focus', 'blur'],
+  expose: ['root'],
+  setup(props, context) {
+    const {
+      state,
+      open,
+      close
+    } = te(toRef(props, 'selected'), context.emit);
+    const {
+      isMobile
+    } = re();
+    const root = ref(null);
+    const menu = ref(null);
+    const capturedContent = ref(null);
+    function handleMouseLeaveSubMenuItem(event) {
+      nextTick(() => {
+        var _a, _b;
+        if (!((_b = (_a = menu.value) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.contains(event.relatedTarget))) {
+          close();
+        }
+      });
+    }
+    function handleMouseLeaveMenu(event) {
+      const relatedTarget = event.relatedTarget;
+      capturePopoverContent();
+      nextTick(() => {
+        setTimeout(() => {
+          nextTick(() => {
+            var _a;
+            if (relatedTarget instanceof HTMLElement) {
+              const relatedTargetHtml = (relatedTarget === null || relatedTarget === void 0 ? void 0 : relatedTarget.outerHTML) || '';
+              const isInsideCapturedContent = (_a = capturedContent.value) === null || _a === void 0 ? void 0 : _a.includes(relatedTargetHtml);
+              if (!isInsideCapturedContent) {
+                close();
+              }
+            }
+          });
+        });
+      });
+    }
+    function handleMouseEnterSubMenuItem() {
+      if (isMobile.value) return;
+      open();
+      capturePopoverContent();
+    }
+    function handleClickMenu() {
+      var _a, _b;
+      const event = new MouseEvent('click', {
+        bubbles: true,
+        cancelable: true,
+        view: window
+      });
+      event.isSimulated = true;
+      (_b = (_a = root.value) === null || _a === void 0 ? void 0 : _a.root) === null || _b === void 0 ? void 0 : _b.dispatchEvent(event);
+    }
+    function handleClickOnTrigger(event) {
+      var _a;
+      if (isMobile.value) {
+        event.stopPropagation();
+        open();
+      } else {
+        if (event.isSimulated) {
+          return;
+        }
+        if (event.currentTarget === ((_a = root.value) === null || _a === void 0 ? void 0 : _a.root)) {
+          event.stopPropagation();
+        }
+      }
+    }
+    function capturePopoverContent() {
+      nextTick(() => setTimeout(() => {
+        var _a;
+        if ((_a = menu.value) === null || _a === void 0 ? void 0 : _a.root) {
+          capturedContent.value = menu.value.root.innerHTML;
+        }
+      }));
+    }
+    return {
+      root,
+      menu,
+      open,
+      close,
+      state,
+      handleMouseLeaveMenu,
+      handleMouseLeaveSubMenuItem,
+      handleMouseEnterSubMenuItem,
+      handleClickMenu,
+      handleClickOnTrigger,
+      capturedContent
+    };
+  }
+});
+
+/* 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('OrMenuItem', {
+    ref: "root",
+    staticClass: "or-sub-menu-item-v3",
+    attrs: {
+      "icon": _vm.icon,
+      "selected": _vm.selected || _vm.state === 'open',
+      "disabled": _vm.disabled,
+      "tooltip-text": _vm.tooltipText
+    },
+    on: {
+      "click": _vm.handleClickOnTrigger,
+      "mouseenter": _vm.handleMouseEnterSubMenuItem,
+      "mouseleave": _vm.handleMouseLeaveSubMenuItem
+    },
+    scopedSlots: _vm._u([{
+      key: "append",
+      fn: function () {
+        return [_c('OrIcon', {
+          attrs: {
+            "icon": "arrow_right"
+          }
+        })];
+      },
+      proxy: true
+    }])
+  }, [_vm._t("default"), _vm._v(" "), _vm._v(" "), _c('OrMenu', {
+    ref: "menu",
+    attrs: {
+      "is-open": _vm.state === 'open',
+      "trigger": _vm.root && _vm.root.root,
+      "placement": _vm.placement,
+      "offset": 0
+    },
+    on: {
+      "mouseleave": _vm.handleMouseLeaveMenu,
+      "click": _vm.handleClickMenu
+    }
+  }, [_vm._t("items")], 2), _vm._v(" "), _vm.capturedContent ? _c('div', {
+    staticClass: "hidden",
+    domProps: {
+      "innerHTML": _vm._s(_vm.capturedContent)
+    }
+  }) : _vm._e()], 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 __vue_component__$1 = __vue_component__;
+
+export { __vue_component__$1 as OrSubMenuItemV3 };

package/dist/esm/index.js

@@ -88,6 +88,7 @@ export { OrSliderV3 } from './components/or-slider-v3/index.js';
 export { S as SliderColor, a as SliderOrientation } from './types-75a1cc13.js';
 export { OrSortingV3 } from './components/or-sorting-v3/index.js';
 export { OrStatusV3, StatusSize, StatusVariant } from './components/or-status-v3/index.js';
+export { OrSubMenuItemV3 } from './components/or-sub-menu-item-v3/index.js';
 export { OrSwitchV3 } from './components/or-switch-v3/index.js';
 export { OrTabV3 } from './components/or-tab-v3/index.js';
 export { OrTabsV3, TabsSpacing, TabsVariant } from './components/or-tabs-v3/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components-vue2",
-  "version": "25.1.2",
+  "version": "25.1.3-beta.5771.0",
   "description": "Vue components library for v2",
   "license": "Apache-2.0",
   "sideEffects": false,
@@ -40,8 +40,8 @@
     "@codemirror/view": "^6",
     "@floating-ui/dom": "1.5.3",
     "@lezer/highlight": "*",
-    "@onereach/styles": "^25.1.2",
-    "@onereach/ui-components-common": "^25.1.2",
+    "@onereach/styles": "^25.1.3-beta.5771.0",
+    "@onereach/ui-components-common": "^25.1.3-beta.5771.0",
     "@splidejs/splide": "4.0.6",
     "@tiptap/core": "2.0.3",
     "@tiptap/extension-blockquote": "2.0.3",
@@ -102,6 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "npmUnpacked": "4.15.2",
-  "gitHead": "a074a252a6ca80f6ba59853c2e072a1970c84ce7"
+  "npmUnpacked": "4.15.2"
 }

package/src/components/index.ts

@@ -66,6 +66,7 @@ export * from './or-skeleton-v3';
 export * from './or-slider-v3';
 export * from './or-sorting-v3';
 export * from './or-status-v3';
+export * from './or-sub-menu-item-v3';
 export * from './or-switch-v3';
 export * from './or-tab-v3';
 export * from './or-tabs-v3';