@onereach/ui-components-vue2 18.4.0 → 18.4.1

package/dist/bundled/components/OrMenuItemV3/OrMenuItem.js

@@ -1,9 +1,10 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { n as useIntersectionObserver } from '../../index-fe4d407a.js';
-import { MenuItem } from './styles.js';
+import { MenuItem, MenuItemIcon, MenuItemIconSelected } from './styles.js';
 import __vue_component__$1 from '../OrIconV3/OrIcon.js';
 import __vue_component__$2 from '../OrIconButtonV3/OrIconButton.js';
 import __vue_component__$3 from '../OrTooltipV3/OrTooltip.js';
+import { IconVariant } from '../OrIconV3/props.js';
 import { n as normalizeComponent } from '../../normalize-component-cf2db48b.js';
 
 var script = defineComponent({
@@ -11,7 +12,7 @@ var script = defineComponent({
   components: {
     OrIcon: __vue_component__$1,
     OrIconButton: __vue_component__$2,
-    OrToolip: __vue_component__$3
+    OrTooltip: __vue_component__$3
   },
   props: {
     icon: {
@@ -37,7 +38,7 @@ var script = defineComponent({
   },
   emits: ['click', 'focus', 'blur', 'close'],
   expose: ['root'],
-  setup() {
+  setup(props) {
     // Refs
     const root = ref();
     const content = ref();
@@ -52,8 +53,18 @@ var script = defineComponent({
     });
     // Styles
     const rootStyles = computed(() => ['or-menu-item-v3', ...MenuItem]);
-    // Toolip display logic
-    const isToolitpShown = computed(() => {
+    const iconStyles = computed(() => [...MenuItemIcon, ...(props.selected ? MenuItemIconSelected : [])]);
+    const iconProps = computed(() => {
+      return typeof props.icon === 'string' ? {
+        icon: props.icon,
+        variant: IconVariant.Inherit
+      } : {
+        variant: IconVariant.Inherit,
+        ...props.icon
+      };
+    });
+    // Tooltip display logic
+    const isTooltipShown = computed(() => {
       if (isRootVisible.value) {
         return content.value !== undefined && content.value.clientWidth < content.value.scrollWidth;
       }
@@ -64,7 +75,9 @@ var script = defineComponent({
       root,
       tooltip,
       rootStyles,
-      isToolitpShown,
+      iconStyles,
+      isTooltipShown,
+      iconProps,
       isRootVisible,
       stop
     };
@@ -83,7 +96,7 @@ var __vue_render__ = function () {
     ref: 'root',
     class: _vm.rootStyles,
     attrs: {
-      "tabindex": !_vm.disabled ? 0 : null,
+      "tabindex": !_vm.disabled ? 0 : undefined,
       "selected": _vm.selected,
       "disabled": _vm.disabled
     },
@@ -98,9 +111,9 @@ var __vue_render__ = function () {
         return _vm.$emit('blur', $event);
       }
     }
-  }, [_vm.icon ? [_c('OrIcon', _vm._b({}, 'OrIcon', typeof _vm.icon === 'string' ? {
-    icon: _vm.icon
-  } : _vm.icon, false))] : _vm._e(), _vm._v(" "), _c('div', {
+  }, [_vm.icon && _vm.iconProps.icon ? [_c('OrIcon', _vm._b({
+    class: _vm.iconStyles
+  }, 'OrIcon', _vm.iconProps, false))] : _vm._e(), _vm._v(" "), _c('div', {
     ref: "content",
     class: ['truncate', 'w-full'],
     on: {
@@ -124,7 +137,7 @@ var __vue_render__ = function () {
         return _vm.$emit('close');
       }
     }
-  })] : _vm._e(), _vm._v(" "), _vm.isToolitpShown ? _c('OrToolip', {
+  })] : _vm._e(), _vm._v(" "), _vm.isTooltipShown ? _c('OrTooltip', {
     ref: "tooltip",
     attrs: {
       "content": _vm.tooltipText,

package/dist/bundled/components/OrMenuItemV3/styles.d.ts

@@ -1 +1,3 @@
 export declare const MenuItem: string[];
+export declare const MenuItemIcon: string[];
+export declare const MenuItemIconSelected: string[];

package/dist/bundled/components/OrMenuItemV3/styles.js

@@ -1,4 +1,6 @@
 const MenuItem = [
+// Group
+'group',
 // Layout
 'layout-row',
 // Spacing
@@ -17,5 +19,11 @@ const MenuItem = [
 'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark',
 // Theme (active)
 'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark'];
+const MenuItemIcon = [
+// Iconography (hover)
+'group-hover:iconography-filled'];
+const MenuItemIconSelected = [
+// Iconography (selected)
+'selected:iconography-filled'];
 
-export { MenuItem };
+export { MenuItem, MenuItemIcon, MenuItemIconSelected };