@frollo/frollo-web-ui 8.5.3 → 9.0.0

package/esm/fw-navigation-menu.js

@@ -1,24 +1,34 @@
-import { defineComponent, ref, createElementVNode, resolveComponent, openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
-import { s as script$1 } from './fw-button-DNozvo7B.js';
+import { defineComponent, ref, watch, createElementVNode, resolveComponent, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, renderSlot, Fragment, renderList, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
+import { s as script$1 } from './fw-button-CnQvA7oM.js';
+import { _ as __default__ } from './fw-popover-B4bsfuxm.js';
+import { k as render$1 } from './index-BsEH8YYr.js';
 import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import './fw-loading-spinner-BFpFFRJm.js';
-import './index-CzZMBMV_.js';
-import './check--YD4Ts6g.js';
+import './_rollupPluginBabelHelpers-DODWUb5N.js';
+import './index-BVcOAKar.js';
+import './uniqueId-DZdGzBh8.js';
 
 var script = defineComponent({
   name: 'FwNavigationMenu',
-  emits: ['action'],
   components: {
-    FwButton: script$1
+    FwButton: script$1,
+    FwPopover: __default__,
+    UserSvg: render$1
   },
   props: {
     /**
      * An array of menu items
-     * `{ to?: string | object; href?: string; label: string; }`
+     * `{ to?: string | object; href?: string; label: string; external?: boolean; }`
      */
     menuItems: {
       type: Array
     },
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; external?: boolean; }`
+     */
+    additionalMenuItems: {
+      type: Array
+    },
     /**
      * The label for the action button.
      * Also emits the `action` event.
@@ -31,16 +41,50 @@ var script = defineComponent({
      */
     containerClass: {
       type: String,
-      "default": 'max-w-6xl'
+      "default": 'w-full'
+    },
+    /**
+     * Whether menu items are enabled or disabled.
+     */
+    menuEnabled: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * Whether the route is an authenticated route.
+     */
+    authenticated: {
+      type: Boolean,
+      "default": false
+    },
+    /**
+     * Padding for the inner menu, should match the sidebar menu width.
+     */
+    paddingClasses: {
+      type: String
+    },
+    /**
+     * Whether the background is transparent
+     */
+    transparent: {
+      type: Boolean,
+      "default": false
     }
   },
+  emits: ['action'],
   setup: function setup(_props, ctx) {
-    var mobileMenuClass = ref( // eslint-disable-next-line max-len
-    "min-h-screen top-0 left-0 pt-20 absolute w-full flex flex-col justify-between px-2 bg-white shadow-md pb-3 space-y-1");
+    var mobileMenuClass = ref("min-h-screen top-0 right-0 pt-20 absolute w-full px-2 bg-primary pb-3 space-y-1 z-[51]");
     var isMobileMenuOpen = ref(false);
     var toggleMobileMenu = function toggleMobileMenu() {
       return isMobileMenuOpen.value = !isMobileMenuOpen.value;
     };
+    watch(isMobileMenuOpen, function (newValue) {
+      var _document$querySelect, _document$querySelect2;
+      if (newValue == true) (_document$querySelect = document.querySelector('html')) === null || _document$querySelect === void 0 || _document$querySelect.classList.add('overflow-hidden');
+      if (newValue == false) (_document$querySelect2 = document.querySelector('html')) === null || _document$querySelect2 === void 0 || _document$querySelect2.classList.remove('overflow-hidden');
+    }, {
+      immediate: true
+    });
     var actionClicked = function actionClicked() {
       return ctx.emit('action');
     };
@@ -54,25 +98,26 @@ var script = defineComponent({
 });
 
 var _hoisted_1 = {
-  "class": "fw-nav-menu relative z-50 h-20 shadow-md"
-};
-var _hoisted_2 = {
   key: 0,
-  "class": "flex-shrink-0 flex items-center"
+  "class": "hidden lg:flex flex-shrink-0 items-center"
 };
+var _hoisted_2 = /*#__PURE__*/createElementVNode("div", {
+  id: "menu-teleport",
+  "class": "hidden lg:flex items-center gap-x-2"
+}, null, -1);
 var _hoisted_3 = {
-  key: 1,
-  "class": "container hidden sm:flex items-center justify-start sm:ml-6"
+  "class": "flex space-x-1"
 };
 var _hoisted_4 = {
-  "class": "flex space-x-2"
+  key: 2,
+  "class": "hidden lg:flex items-center justify-center lg:ml-2"
 };
 var _hoisted_5 = {
-  key: 2,
-  "class": "hidden sm:flex items-center justify-start sm:ml-6"
+  "class": "flex flex-col min-w-[180px] text-left"
 };
 var _hoisted_6 = {
-  "class": "flex items-center sm:hidden"
+  key: 3,
+  "class": "flex items-center lg:hidden z-[53]"
 };
 var _hoisted_7 = /*#__PURE__*/createElementVNode("span", {
   "class": "sr-only"
@@ -86,22 +131,49 @@ var _hoisted_8 = {
   "aria-hidden": "true"
 };
 var _hoisted_9 = ["d"];
-var _hoisted_10 = {
+var _hoisted_10 = /*#__PURE__*/createElementVNode("div", {
+  id: "menu-search-teleport",
+  "class": "absolute top-0 left-0 w-full z-[54]"
+}, null, -1);
+var _hoisted_11 = {
+  key: 0,
+  "class": "flex-none lg:hidden items-start flex-shrink-0 pl-4"
+};
+var _hoisted_12 = {
+  key: 1,
+  "class": "w-full flex flex-col space-y-1 pt-6"
+};
+var _hoisted_13 = /*#__PURE__*/createElementVNode("div", {
+  "class": "w-[50px] relative bg-brand-border3 h-px !mt-6 ml-2"
+}, null, -1);
+var _hoisted_14 = {
+  "class": "flex flex-col justify-between pt-6 h-full"
+};
+var _hoisted_15 = {
+  key: 0,
   "class": "w-full flex flex-col space-y-1"
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   var _ctx$menuItems;
   var _component_FwButton = resolveComponent("FwButton");
-  return openBlock(), createElementBlock("nav", _hoisted_1, [createElementVNode("div", {
-    "class": normalizeClass(["px-6 flex-1 h-full flex bg-white items-stretch justify-between mx-auto", _ctx.containerClass])
-  }, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_2, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+  var _component_UserSvg = resolveComponent("UserSvg");
+  var _component_FwPopover = resolveComponent("FwPopover");
+  return openBlock(), createElementBlock("nav", {
+    "class": normalizeClass(["fw-nav-menu z-50 h-[72px] bg-white shadow-bottom", [_ctx.transparent ? 'lg:bg-transparent lg:shadow-none' : 'lg:bg-brand-appBg lg:shadow-bottom', _ctx.isMobileMenuOpen ? 'bg-transparent' : '']])
+  }, [createElementVNode("div", {
+    "class": normalizeClass(["px-6 lg:py-3 flex-1 h-full flex items-stretch justify-between mx-auto", [_ctx.containerClass, !_ctx.menuEnabled ? 'hidden lg:flex' : '']])
+  }, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_1, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), _ctx.menuEnabled && _ctx.menuItems && ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", {
+    key: 1,
+    "class": normalizeClass(["container hidden lg:flex items-center justify-between", _ctx.paddingClasses])
+  }, [_hoisted_2, createElementVNode("div", _hoisted_3, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
     return openBlock(), createBlock(_component_FwButton, {
       key: i,
-      variant: "text",
+      variant: "transparent",
       href: item.href,
       to: item.to,
       external: item.external,
-      size: "md",
+      size: "lg",
+      rounded: false,
       "aria-current": "page",
       onClick: item.onClick
     }, {
@@ -110,19 +182,47 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       _: 2
     }, 1032, ["href", "to", "external", "onClick"]);
-  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(_component_FwButton, {
-    onClick: _ctx.actionClicked,
-    size: "md",
-    variant: "text",
-    "aria-label": _ctx.actionLabel
+  }), 128))])], 2)) : createCommentVNode("", true), _ctx.menuEnabled && _ctx.actionLabel && _ctx.authenticated ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(_component_FwPopover, {
+    placement: "bottom-start",
+    "show-on-top": "",
+    trigger: "click"
   }, {
+    content: withCtx(function () {
+      return [createElementVNode("div", _hoisted_5, [createVNode(_component_FwButton, {
+        size: "lg",
+        variant: "text",
+        rounded: false,
+        "aria-label": _ctx.actionLabel,
+        onClick: _ctx.actionClicked
+      }, {
+        "default": withCtx(function () {
+          return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
+        }),
+        _: 1
+      }, 8, ["aria-label", "onClick"])])];
+    }),
     "default": withCtx(function () {
-      return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
+      return [createVNode(_component_FwButton, {
+        variant: "secondary",
+        tabindex: "0",
+        size: "sm",
+        "class": "bg-brand-bg2 rounded-full w-12 h-12"
+      }, {
+        "default": withCtx(function () {
+          return [createVNode(_component_UserSvg, {
+            name: "user",
+            "class": "w-full"
+          })];
+        }),
+        _: 1
+      })];
     }),
     _: 1
-  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_6, [createVNode(_component_FwButton, {
-    variant: "text",
+  })])) : createCommentVNode("", true), _ctx.menuEnabled ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(_component_FwButton, {
+    variant: _ctx.isMobileMenuOpen ? 'primary' : 'tertiary',
     size: "sm",
+    rounded: false,
+    "class": normalizeClass(["bg-transparent border-0", _ctx.isMobileMenuOpen ? '' : 'text-body']),
     onClick: _ctx.toggleMobileMenu
   }, {
     "default": withCtx(function () {
@@ -134,47 +234,75 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, null, 8, _hoisted_9)]))];
     }),
     _: 1
-  }, 8, ["onClick"])])], 2), createVNode(Transition, {
-    name: "slideInLeft"
+  }, 8, ["variant", "class", "onClick"])])) : createCommentVNode("", true)], 2), _hoisted_10, _ctx.menuEnabled ? (openBlock(), createBlock(Transition, {
+    key: 0,
+    name: "slideInRight"
   }, {
     "default": withCtx(function () {
       return [_ctx.menuItems && _ctx.menuItems.length > 0 && _ctx.isMobileMenuOpen ? (openBlock(), createElementBlock("div", {
         key: 0,
-        "class": normalizeClass(["fw-nav-menu--mobile", _ctx.mobileMenuClass])
-      }, [createElementVNode("div", _hoisted_10, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+        "class": normalizeClass(["fw-nav-menu--mobile pl-6 pb-12", _ctx.mobileMenuClass])
+      }, [_ctx.$slots.mobileLogo ? (openBlock(), createElementBlock("div", _hoisted_11, [renderSlot(_ctx.$slots, "mobileLogo")])) : createCommentVNode("", true), _ctx.additionalMenuItems ? (openBlock(), createElementBlock("div", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.additionalMenuItems, function (item, i) {
+        return openBlock(), createElementBlock(Fragment, {
+          key: i
+        }, [!item.disabled ? (openBlock(), createBlock(_component_FwButton, {
+          key: i,
+          "class": "w-full rounded-md !text-left !pl-2",
+          variant: "primary",
+          href: item.href,
+          to: item.to,
+          external: item.external,
+          size: "lg",
+          "aria-current": "page",
+          onClick: function onClick($event) {
+            return item.onClick, _ctx.isMobileMenuOpen = false;
+          }
+        }, {
+          "default": withCtx(function () {
+            return [createTextVNode(toDisplayString(item.label), 1)];
+          }),
+          _: 2
+        }, 1032, ["href", "to", "external", "onClick"])) : createCommentVNode("", true)], 64);
+      }), 128)), _hoisted_13])) : createCommentVNode("", true), createElementVNode("div", _hoisted_14, [_ctx.menuEnabled ? (openBlock(), createElementBlock("div", _hoisted_15, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
         return openBlock(), createBlock(_component_FwButton, {
           key: i,
-          "class": "w-full rounded-md",
-          variant: "text",
+          "class": "w-full rounded-md !text-left !pl-2",
+          variant: "primary",
           href: item.href,
           to: item.to,
           external: item.external,
-          size: "md",
+          size: "xl",
           "aria-current": "page",
-          onClick: item.onClick
+          onClick: function onClick($event) {
+            return item.onClick, _ctx.isMobileMenuOpen = false;
+          }
         }, {
           "default": withCtx(function () {
             return [createTextVNode(toDisplayString(item.label), 1)];
           }),
           _: 2
         }, 1032, ["href", "to", "external", "onClick"]);
-      }), 128))]), _ctx.actionLabel ? (openBlock(), createBlock(_component_FwButton, {
-        key: 0,
-        "class": "w-full rounded-md",
-        onClick: _ctx.actionClicked
+      }), 128))])) : createCommentVNode("", true), _ctx.actionLabel && _ctx.authenticated ? (openBlock(), createBlock(_component_FwButton, {
+        key: 1,
+        variant: "primary",
+        size: "xl",
+        "class": "w-full rounded-md !text-left !pl-2",
+        onClick: _cache[0] || (_cache[0] = function ($event) {
+          return _ctx.actionClicked();
+        })
       }, {
         "default": withCtx(function () {
           return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
         }),
         _: 1
-      }, 8, ["onClick"])) : createCommentVNode("", true)], 2)) : createCommentVNode("", true)];
+      })) : createCommentVNode("", true)])], 2)) : createCommentVNode("", true)];
     }),
-    _: 1
-  })]);
+    _: 3
+  })) : createCommentVNode("", true)], 2);
 }
 
-var css_248z = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-moz-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;-moz-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-moz-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@-moz-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
-var stylesheet = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-moz-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;-moz-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-moz-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@-moz-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+var css_248z = ".fw-nav-menu--mobile{z-index:52}.fw-nav-menu--mobile,.slideInRight-enter-active{-webkit-transition:right .3s ease-in;-moz-transition:right .3s ease-in;transition:right .3s ease-in}.slideInRight-enter-active{-webkit-animation:slideInRight .3s;-moz-animation:slideInRight .3s;animation:slideInRight .3s}.slideInRight-leave-active{animation:slideInRight .3s reverse;-webkit-transition:right .3s ease-in-out;-moz-transition:right .3s ease-in-out;transition:right .3s ease-in-out}@-webkit-keyframes slideInRight{0%{right:100%}to{right:0}}@-moz-keyframes slideInRight{0%{right:100%}to{right:0}}@keyframes slideInRight{0%{right:100%}to{right:0}}";
+var stylesheet = ".fw-nav-menu--mobile{z-index:52}.fw-nav-menu--mobile,.slideInRight-enter-active{-webkit-transition:right .3s ease-in;-moz-transition:right .3s ease-in;transition:right .3s ease-in}.slideInRight-enter-active{-webkit-animation:slideInRight .3s;-moz-animation:slideInRight .3s;animation:slideInRight .3s}.slideInRight-leave-active{animation:slideInRight .3s reverse;-webkit-transition:right .3s ease-in-out;-moz-transition:right .3s ease-in-out;transition:right .3s ease-in-out}@-webkit-keyframes slideInRight{0%{right:100%}to{right:0}}@-moz-keyframes slideInRight{0%{right:100%}to{right:0}}@keyframes slideInRight{0%{right:100%}to{right:0}}";
 styleInject(css_248z);
 
 script.render = render;