@luizleon/sf.prefeiturasp.vuecomponents 0.0.66 → 4.0.0

package/src/components/navmenu/NavMenu.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import PanelMenu from "primevue/panelmenu";
+import { SfNavMenuProps } from "./NavMenu";
+import { UseNavMenuService } from "../../services/navMenuService";
+
+const props = defineProps<SfNavMenuProps>();
+
+const navService = UseNavMenuService();
+
+function OnClickRoute(ev: Event, navigate: () => void) {
+  ev.preventDefault();
+  const target = ev.target as HTMLElement;
+  const nav = target.closest(".panel-menu-wrapper");
+  if (nav && nav.clientWidth + 10 > document.body.clientWidth) {
+    navService.Close();
+  }
+  navigate();
+}
+</script>
+
+<template>
+  <div class="panel-menu-wrapper">
+    <PanelMenu :model="props.items" :unstyled="true">
+      <template #item="{ item, active }">
+        <router-link
+          v-if="!!item.href"
+          v-slot="{ navigate, isActive }"
+          :to="{
+            path: item.href,
+            params: item.params ?? {},
+            query: item.query ?? {},
+          }"
+          custom
+        >
+          <a
+            class="item-menu sf-ripple"
+            :data-active="isActive"
+            :href="item.href"
+            @click="OnClickRoute($event, navigate)"
+          >
+            <span class="material-symbols-outlined sf-mr-3">
+              {{ item.icon ?? "chevron_right" }}
+            </span>
+            <span>{{ item.text }}</span>
+          </a>
+        </router-link>
+        <a v-else class="item-menu sf-ripple">
+          <span
+            v-if="item.icon"
+            class="material-symbols-outlined sf-mr-3"
+          >
+            {{ item.icon }}
+          </span>
+          <span>{{ item.text }}</span>
+          <div class="sf-flex-grow-1"></div>
+          <span
+            :class="[
+              'material-symbols-outlined arrow',
+              { '--expand': active },
+            ]"
+          >
+            chevron_right
+          </span>
+        </a>
+      </template>
+    </PanelMenu>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.panel-menu-wrapper {
+  padding: var(--inline-spacing);
+  :deep(ul, li) {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+  :deep(ul) {
+    padding-left: var(--inline-spacing);
+  }
+}
+.item-menu {
+  display: flex;
+  align-items: center;
+  padding: var(--inline-spacing);
+  color: var(--text-color);
+  text-decoration: none;
+  border-radius: 6px;
+  margin-bottom: 0.25em;
+  cursor: pointer;
+  &.sub-item {
+    margin-bottom: var(--inline-spacing);
+  }
+  &[data-active="true"] {
+    background-color: var(--primary-hover-color);
+    color: var(--primary-color);
+  }
+}
+.arrow {
+  transition: transform 0.3s;
+  &.--expand {
+    transform: rotate(90deg);
+  }
+}
+</style>

package/src/index.ts

@@ -8,6 +8,7 @@ import SfDrawer from "./components/drawer/Drawer.vue";
 import SfMessage from "./components/message/Message.vue";
 import SfTooltip from "./components/tooltip/Tooltip.vue";
 import SfPanelMenu from "./components/panelmenu/PanelMenu.vue";
+import SfNavMenu from "./components/navmenu/NavMenu.vue";
 import { ThemeToggleBase } from "./components/internal/ThemeToggle";
 
 import { UseNavMenuService } from "./services/navMenuService";
@@ -35,6 +36,7 @@ export {
   SfMessage,
   SfTooltip,
   SfPanelMenu,
+  SfNavMenu,
   StartAuthService,
   UseAuthService,
   UseNavMenuService,