@luizleon/sf.prefeiturasp.vuecomponents 0.0.47 → 0.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luizleon/sf.prefeiturasp.vuecomponents",
-  "version": "0.0.47",
+  "version": "0.0.48",
   "type": "module",
   "main": "dist/sf.prefeiturasp.vuecomponents.umd.js",
   "module": "dist/sf.prefeiturasp.vuecomponents.es.js",
@@ -32,6 +32,8 @@
     "vue-tsc": "2.0.4"
   },
   "peerDependencies": {
-    "vue": "3.*"
+    "vue": "3.*",
+    "primevue": "3.*",
+    "vue-router": "4.*"
   }
 }

package/src/components/panelmenu/PanelMenu.d.ts

@@ -0,0 +1,26 @@
+import { VNode } from "vue";
+import { StyleValue } from "vue";
+import {
+  ClassComponent,
+  GlobalComponentConstructor,
+  HintedString,
+} from "../../ts-helpers";
+import { SfPanelMenuProps } from "./PanelMenu.vue";
+
+export interface SfPanelMenuSlots {}
+
+export declare type SfPanelMenuEmits = {};
+
+declare class SfPanelMenu extends ClassComponent<
+  SfPanelMenuProps,
+  SfPanelMenuSlots,
+  SfPanelMenuEmits
+> {}
+
+declare module "@vue/runtime-core" {
+  interface GlobalComponents {
+    SfPanelMenu: GlobalComponentConstructor<SfPanelMenu>;
+  }
+}
+
+export default SfPanelMenu;

package/src/components/panelmenu/PanelMenu.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { RouteRecordName, useRoute } from "vue-router";
+import PanelMenu, { PanelMenuExpandedKeys } from "primevue/panelmenu";
+import Icon from "./../icon/Icon.vue";
+import { ref, watch } from "vue";
+
+export interface SfPanelMenuItem {
+  [x: string]: any;
+  label: string;
+  route?: RouteRecordName;
+  url?: string;
+  icon?: string;
+  items?: SfPanelMenuItem[];
+}
+
+const props = defineProps<{
+  items: SfPanelMenuItem[];
+}>();
+
+const route = useRoute();
+
+AdicionarSourceKeys(props.items);
+
+function AdicionarSourceKeys(
+  items: SfPanelMenuItem[],
+  key: string | undefined = undefined
+) {
+  items.forEach((item) => {
+    if (!!key) {
+      item.sourceKey = key;
+    }
+    if (item.items) {
+      AdicionarSourceKeys(item.items, item.key);
+    }
+  });
+}
+
+const expandedKeys = ref<PanelMenuExpandedKeys>({});
+
+function MudancaDeRota(
+  items: SfPanelMenuItem[],
+  route: string,
+  key: string | undefined = undefined
+) {
+  items.forEach((item) => {
+    if (item.route && item.route === route && !!key) {
+      expandedKeys.value[key] = key === item.sourceKey;
+    }
+    if (item.items) {
+      MudancaDeRota(item.items, route, item.key);
+    }
+  });
+}
+
+watch(
+  () => route.name,
+  (v) => {
+    if (!v) return;
+    MudancaDeRota(props.items, v.toString());
+  }
+);
+</script>
+
+<template>
+  <PanelMenu
+    :model="props.items"
+    v-model:expandedKeys="expandedKeys"
+    :multiple="true"
+    :class="'sf-p-2'"
+  >
+    <template #item="{ item, active }">
+      <router-link
+        v-if="item.route"
+        v-slot="{ href, navigate, isActive }"
+        :to="{ name: item.route }"
+        custom
+      >
+        <a
+          class="sf-flex sf-align-items-center sf-px-3 sf-py-2 sf-ripple"
+          :data-active="isActive"
+          :href="href"
+          @click="navigate"
+        >
+          <Icon :icon="item.icon ?? 'chevron_right'" />
+          <span class="sf-ml-2">{{ item.label }}</span>
+        </a>
+      </router-link>
+      <a
+        v-else
+        class="sf-flex sf-align-items-center sf-pl-3 sf-py-2"
+        :href="item.url"
+        :target="item.target"
+      >
+        <Icon v-if="item.icon" :icon="item.icon" />
+        <span class="sf-ml-2">{{ item.label }}</span>
+        <div class="sf-flex-grow-1"></div>
+        <Icon :icon="active ? 'expand_less' : 'expand_more'" />
+      </a>
+    </template>
+  </PanelMenu>
+</template>

package/src/index.ts

@@ -7,6 +7,7 @@ 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 { ThemeToggleBase } from "./components/internal/ThemeToggle";
 
 import { UseNavMenuService } from "./services/navMenuService";
@@ -30,6 +31,7 @@ export {
   SfDrawer,
   SfMessage,
   SfTooltip,
+  SfPanelMenu,
   UseAuthService,
   UseNavMenuService,
   UseConfirmService,