@frollo/frollo-web-ui 0.0.2 → 0.0.5

package/esm/fw-button.js

@@ -0,0 +1,2 @@
+export { u as FwButton } from './fw-button-0f8956b5.js';
+import 'vue';

package/esm/fw-navigation-menu.js

@@ -0,0 +1,203 @@
+import { defineComponent, ref, createElementVNode, resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, Transition } from 'vue';
+import { u as script$1 } from './fw-button-0f8956b5.js';
+
+var script = defineComponent({
+  name: 'FwNavigationMenu',
+  emits: ['action'],
+  components: {
+    FwButton: script$1
+  },
+  props: {
+    /**
+     * An array of menu items
+     * `{ to?: string | object; href?: string; label: string; }`
+     */
+    menuItems: {
+      type: Array
+    },
+
+    /**
+     * The label for the action button.
+     * Also emits the `action` event.
+     */
+    actionLabel: {
+      type: String
+    }
+  },
+  setup: function setup(_props, ctx) {
+    var isMobileMenuOpen = ref(false);
+
+    var toggleMobileMenu = function toggleMobileMenu() {
+      return isMobileMenuOpen.value = !isMobileMenuOpen.value;
+    };
+
+    var actionClicked = function actionClicked() {
+      return ctx.emit('action');
+    };
+
+    return {
+      isMobileMenuOpen: isMobileMenuOpen,
+      toggleMobileMenu: toggleMobileMenu,
+      actionClicked: actionClicked
+    };
+  }
+});
+
+var _hoisted_1 = {
+  "class": "fw-nav-menu relative z-50 h-20 shadow-md"
+};
+var _hoisted_2 = {
+  "class": "px-6 flex-1 h-full flex bg-white items-stretch justify-between"
+};
+var _hoisted_3 = {
+  key: 0,
+  "class": "flex-shrink-0 flex items-center"
+};
+var _hoisted_4 = {
+  key: 1,
+  "class": "container hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_5 = {
+  "class": "flex space-x-2"
+};
+var _hoisted_6 = {
+  key: 2,
+  "class": "hidden sm:flex items-center justify-start sm:ml-6"
+};
+var _hoisted_7 = {
+  "class": "flex items-center sm:hidden"
+};
+
+var _hoisted_8 = /*#__PURE__*/createElementVNode("span", {
+  "class": "sr-only"
+}, "Open main menu", -1);
+
+var _hoisted_9 = {
+  "class": "block h-6 w-6",
+  xmlns: "http://www.w3.org/2000/svg",
+  fill: "none",
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  "aria-hidden": "true"
+};
+var _hoisted_10 = ["d"];
+var _hoisted_11 = {
+  key: 0,
+  "class": "fw-nav-menu--mobile 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 _hoisted_12 = {
+  "class": "w-full flex flex-col"
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _ctx$menuItems;
+
+  var _component_FwButton = resolveComponent("FwButton");
+
+  return openBlock(), createElementBlock("nav", _hoisted_1, [createElementVNode("div", _hoisted_2, [_ctx.$slots.logo ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "logo")])) : createCommentVNode("", true), ((_ctx$menuItems = _ctx.menuItems) === null || _ctx$menuItems === void 0 ? void 0 : _ctx$menuItems.length) > 0 ? (openBlock(), createElementBlock("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+    return openBlock(), createBlock(_component_FwButton, {
+      key: i,
+      variant: "text",
+      href: item.href,
+      to: item.to,
+      size: "md",
+      "aria-current": "page"
+    }, {
+      "default": withCtx(function () {
+        return [createTextVNode(toDisplayString(item.label), 1)];
+      }),
+      _: 2
+    }, 1032, ["href", "to"]);
+  }), 128))])])) : createCommentVNode("", true), _ctx.actionLabel ? (openBlock(), createElementBlock("div", _hoisted_6, [createVNode(_component_FwButton, {
+    onClick: _ctx.actionClicked,
+    size: "md",
+    "aria-label": _ctx.actionLabel
+  }, {
+    "default": withCtx(function () {
+      return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
+    }),
+    _: 1
+  }, 8, ["onClick", "aria-label"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_7, [createVNode(_component_FwButton, {
+    variant: "text",
+    size: "sm",
+    onClick: _ctx.toggleMobileMenu
+  }, {
+    "default": withCtx(function () {
+      return [_hoisted_8, (openBlock(), createElementBlock("svg", _hoisted_9, [createElementVNode("path", {
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "stroke-width": "2",
+        d: _ctx.isMobileMenuOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'
+      }, null, 8, _hoisted_10)]))];
+    }),
+    _: 1
+  }, 8, ["onClick"])])]), createVNode(Transition, {
+    name: "slideInLeft"
+  }, {
+    "default": withCtx(function () {
+      var _ctx$menuItems2;
+
+      return [((_ctx$menuItems2 = _ctx.menuItems) === null || _ctx$menuItems2 === void 0 ? void 0 : _ctx$menuItems2.length) > 0 && _ctx.isMobileMenuOpen ? (openBlock(), createElementBlock("div", _hoisted_11, [createElementVNode("div", _hoisted_12, [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.menuItems, function (item, i) {
+        return openBlock(), createBlock(_component_FwButton, {
+          key: i,
+          "class": "w-full rounded-md px-2",
+          variant: "text",
+          href: item.href,
+          to: item.to,
+          size: "md",
+          "aria-current": "page"
+        }, {
+          "default": withCtx(function () {
+            return [createTextVNode(toDisplayString(item.label), 1)];
+          }),
+          _: 2
+        }, 1032, ["href", "to"]);
+      }), 128))]), _ctx.actionLabel ? (openBlock(), createBlock(_component_FwButton, {
+        key: 0,
+        "class": "w-full rounded-md px-2",
+        onClick: _ctx.actionClicked,
+        size: "md"
+      }, {
+        "default": withCtx(function () {
+          return [createTextVNode(toDisplayString(_ctx.actionLabel), 1)];
+        }),
+        _: 1
+      }, 8, ["onClick"])) : createCommentVNode("", true)])) : createCommentVNode("", true)];
+    }),
+    _: 1
+  })]);
+}
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".fw-nav-menu--mobile{z-index:-1}.fw-nav-menu--mobile,.slideInLeft-enter-active{-webkit-transition:left .35s ease-in;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-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;-o-transition:left .35s ease-in;transition:left .35s ease-in}.slideInLeft-enter-active{-webkit-animation:slideInLeft .35s;animation:slideInLeft .35s}.slideInLeft-leave-active{animation:slideInLeft .35s reverse;-webkit-transition:left .35s ease-in-out;-o-transition:left .35s ease-in-out;transition:left .35s ease-in-out}@-webkit-keyframes slideInLeft{0%{left:100%}to{left:0}}@keyframes slideInLeft{0%{left:100%}to{left:0}}";
+styleInject(css_248z);
+
+script.render = render;
+
+export { script as FwNavigationMenu };