feat(menu): implement PrimeVue menu styles

src/primevue/index.ts

@@ -8,6 +8,7 @@ import fileUpload from "./fileUpload/fileUpload";
 import inputGroup from "./inputGroup/inputGroup";
 import inputGroupAddon from "./inputGroup/inputGroupAddon";
 import inputText from "./inputText/inputText";
+import menu from "./menu/menu";
 import message from "./message/message";
 import password from "./password/password";
 import progressSpinner from "./progressSpinner/progressSpinner";
@@ -31,6 +32,7 @@ export const RisUiTheme = {
   inputGroup,
   inputGroupAddon,
   inputText,
+  menu,
   message,
   password,
   progressSpinner,

src/primevue/menu/menu.stories.ts

@@ -0,0 +1,76 @@
+import { html } from "@/lib/tags";
+import { Meta, StoryObj } from "@storybook/vue3";
+import PrimevueMenu from "primevue/menu";
+import PrimevueButton from "primevue/button";
+import { MenuItem } from "primevue/menuitem";
+import MdiDotsVertical from "~icons/mdi/dots-vertical";
+import EyeOutline from "~icons/mdi/eye-outline";
+import MdiTrayDownload from "~icons/mdi/tray-download";
+import { useTemplateRef } from "vue";
+
+const meta: Meta<typeof PrimevueMenu> = {
+  component: PrimevueMenu,
+  tags: ["autodocs"],
+  args: {
+    model: [
+      {
+        label: "XML im Browser anzeigen",
+        icon: "view",
+      },
+      {
+        label: "XML herunterladen",
+        icon: "download",
+      },
+      { label: "Andere Aktion" },
+    ] as MenuItem[],
+  },
+
+  argTypes: {},
+};
+
+const getIcon = (name: string) => {
+  switch (name) {
+    case "view":
+      return EyeOutline;
+    case "download":
+      return MdiTrayDownload;
+  }
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { PrimevueMenu },
+    setup() {
+      return { args, getIcon };
+    },
+    template: html`<PrimevueMenu v-bind="args">
+      <template #itemicon="{item}"
+        ><component :is="getIcon(item.icon)" v-if="item.icon"
+      /></template>
+    </PrimevueMenu>`,
+  }),
+};
+
+export const Popup: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { PrimevueMenu, PrimevueButton, MdiDotsVertical },
+    setup() {
+      const menuRef = useTemplateRef<typeof PrimevueMenu>("menu");
+
+      const toggle = (event: Event) => {
+        menuRef.value?.toggle(event);
+      };
+      return { args, toggle, getIcon };
+    },
+    template: html`<div>
+      <PrimevueButton label="Aktionen" text @click="toggle">
+        <template #icon> <MdiDotsVertical /> </template></PrimevueButton
+      ><PrimevueMenu :popup="true" v-bind="args" ref="menu"
+        ><template #itemicon="{item}"
+          ><component :is="getIcon(item.icon)" v-if="item.icon" /></template
+      ></PrimevueMenu>
+    </div> `,
+  }),
+};

src/primevue/menu/menu.ts

@@ -0,0 +1,22 @@
+import { tw } from "@/lib/tags";
+import { MenuPassThroughOptions } from "primevue/menu";
+
+const menu: MenuPassThroughOptions = {
+  root: {
+    class: tw`ris-body2-regular bg-white shadow`,
+  },
+  list: {
+    class: tw``,
+  },
+  item: {
+    class: tw`relative h-48 pl-16 pr-12 after:absolute after:-bottom-1 after:left-16 after:right-16 after:border-b after:border-gray-300 after:content-[''] last:after:border-b-0 hover:bg-gray-100`,
+  },
+  itemContent: {
+    class: tw`flex h-full items-center py-4`,
+  },
+  itemLink: {
+    class: tw`flex items-center gap-8`,
+  },
+};
+
+export default menu;