@luizleon/sf.prefeiturasp.vuecomponents 0.0.66 → 4.0.1

package/src/components/internal/getMaxZindex.ts

@@ -1,14 +1,15 @@
 function GetMaxZindex(seletores: string[] = []) {
-  let selector = "body *:not(style)";
+  let selector = "body > *:not(script):not(style)";
   for (const s of seletores) {
     selector += `, ${s}`;
   }
-  return Math.max(
+  const max = Math.max(
     ...Array.from(document.querySelectorAll(selector)).map((x) => {
       const z = getComputedStyle(x).zIndex;
       return +z === +z ? +z : 0;
     })
   );
+  return max >= 100 ? max : 100;
 }
 
 export { GetMaxZindex };

package/src/components/layout/Layout.vue

@@ -8,6 +8,13 @@ import SfTooltip from "../tooltip/Tooltip.vue";
 
 export interface SfLayoutProps {}
 
+export interface SfLayoutSlots {
+  title: {};
+  action: {};
+  menu: {};
+  content: {};
+}
+
 const navService = UseNavMenuService();
 
 const emit = defineEmits<{
@@ -37,7 +44,7 @@ onMounted(() => {
         <slot name="title"></slot>
       </div>
       <slot name="action"> </slot>
-      <SfTooltip :text="'alternar tema'">
+      <SfTooltip :text="'Tema'">
         <ThemeToggle />
       </SfTooltip>
       <HeaderAvatar @logout="emit('logout')" />

package/src/components/navmenu/NavMenu.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import PanelMenu from "primevue/panelmenu";
+import { UseNavMenuService } from "../../services/navMenuService";
+import { SfNavMenuItem } from "./../../types";
+
+export interface SfNavMenuProps {
+  items: SfNavMenuItem[];
+}
+
+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

@@ -1,13 +1,12 @@
 import SfLayout from "./components/layout/Layout.vue";
 import SfIcon from "./components/icon/Icon.vue";
-import SfNavMenuLink from "./components/navmenulink/NavMenuLink.vue";
 import SfContent from "./components/content/Content.vue";
 import SfTabNavigation from "./components/tabnavigation/TabNavigation.vue";
 import SfButton from "./components/button/Button.vue";
 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";
@@ -27,14 +26,13 @@ import { AxiosClient, UseAxiosClient } from "./axios/axiosClient";
 export {
   SfLayout,
   SfIcon,
-  SfNavMenuLink,
   SfContent,
   SfTabNavigation,
   SfButton,
   SfDrawer,
   SfMessage,
   SfTooltip,
-  SfPanelMenu,
+  SfNavMenu,
   StartAuthService,
   UseAuthService,
   UseNavMenuService,