feat(panelmenu): implement styles

src/primevue/index.ts

@@ -19,6 +19,7 @@ import toast from "./toast/toast";
 import select from "./select/select";
 import inputMask from "./inputMask/inputMask";
 import breadcrumb from "@/primevue/breadcrumb/breadcrumb";
+import panelmenu from "./panelMenu/panelMenu";
 import tree from "./tree/tree";
 
 import { deDE } from "@/config/locale";
@@ -44,6 +45,7 @@ export const RisUiTheme = {
   inputMask,
   breadcrumb,
   tree,
+  panelmenu,
 };
 
 export const RisUiLocale = {

src/primevue/panelMenu/panelMenu.stories.ts

@@ -0,0 +1,63 @@
+import { html } from "@/lib/tags";
+import { Meta, StoryObj } from "@storybook/vue3";
+import PanelMenu from "primevue/panelmenu";
+import { MenuItem } from "primevue/menuitem";
+import { ref } from "vue";
+
+const meta: Meta<typeof PanelMenu> = {
+  component: PanelMenu,
+  tags: ["autodocs"],
+  args: {},
+
+  argTypes: {},
+};
+
+type MenuItemWithCount = MenuItem & {
+  count?: string;
+  items?: MenuItemWithCount[] | undefined;
+};
+
+const items: MenuItemWithCount[] = [
+  {
+    label: "Alle Dokumentarten",
+    count: "1.024",
+    key: "all",
+  },
+  {
+    label: "Gesetze & Verordnungen",
+    count: "1.024",
+    key: "N",
+  },
+  {
+    label: "Gerichtsentscheidungen",
+    count: "1.024",
+    key: "R",
+    items: [
+      { label: "Alle Gerichtsentscheidungen", count: "1.024", key: "R-A" },
+      { label: "Urteil", count: "1.024", key: "R-U" },
+      { label: "Beschluss", count: "1.024", key: "R-B" },
+      { label: "Sonstige Entscheidungen", count: "1.024", key: "R-S" },
+    ],
+  },
+];
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = {
+  render: (args) => ({
+    components: { PanelMenu },
+    setup() {
+      const expandedKeys = ref({ R: true, "R-A": true });
+      return { args, items, expandedKeys };
+    },
+    template: html`<label class="ris-label2-regular mb-16 block"
+        >Dokumentarten</label
+      ><PanelMenu
+        :model="items"
+        v-model:expandedKeys="expandedKeys"
+        class="md:w-200 w-full"
+        multiple
+        ><template #submenuicon><i /></template
+      ></PanelMenu>`,
+  }),
+};

src/primevue/panelMenu/panelMenu.ts

@@ -0,0 +1,57 @@
+import { tw } from "@/lib/tags";
+import { PanelMenuPassThroughOptions } from "primevue/panelmenu";
+
+const pointer = tw`cursor-pointer`;
+const selected = tw`ris-label2-bold border-l-blue-800 bg-blue-200 text-black`;
+const hover = tw`hover:bg-blue-200`;
+const hoverSelected = tw`hover:bg-blue-300`;
+
+const focusVisible = tw`focus-visible:outline-none focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800`;
+const panelMenu: PanelMenuPassThroughOptions = {
+  root: {
+    class: tw`text-blue-800`,
+  },
+
+  header: ({ context }) => {
+    const base = tw`group flex h-64 items-center border-l-4 border-transparent py-8 pl-10 pr-20`;
+    return {
+      class: {
+        [base]: true,
+        [focusVisible]: true,
+        [pointer]: true,
+        [selected]: context.active,
+        [hover]: !context.active,
+        [hoverSelected]: context.active,
+      },
+    };
+  },
+  content: {
+    class: tw`ml-28 mt-8`,
+  },
+  rootList: {
+    class: tw`focus-visible:outline-none`,
+  },
+  panel: {
+    class: tw`focus-visible:outline-none`,
+  },
+  itemLink: {
+    class: tw`focus-visible:bg-black`,
+  },
+  itemContent: ({ context }) => {
+    const base = tw`group flex h-48 items-center border-l-4 border-transparent py-8 pl-10 pr-20`;
+    const focused = tw`outline-none outline-4 outline-offset-4 outline-blue-800`;
+
+    return {
+      class: {
+        [base]: true,
+        [focused]: context.focused,
+        [pointer]: true,
+        [selected]: context.active,
+        [hover]: !context.active,
+        [hoverSelected]: context.active,
+      },
+    };
+  },
+};
+
+export default panelMenu;