From 4869dee5af78690748037424f1a624a6f24149cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl=20G=C3=B6decken?= Date: Fri, 22 Nov 2024 09:22:34 +0100 Subject: [PATCH 1/3] feat(panelmenu): implement styles --- src/primevue/index.ts | 2 + src/primevue/panelMenu/panelMenu.stories.ts | 63 +++++++++++++++++++++ src/primevue/panelMenu/panelMenu.ts | 57 +++++++++++++++++++ 3 files changed, 122 insertions(+) create mode 100644 src/primevue/panelMenu/panelMenu.stories.ts create mode 100644 src/primevue/panelMenu/panelMenu.ts diff --git a/src/primevue/index.ts b/src/primevue/index.ts index c86b983..bc36467 100644 --- a/src/primevue/index.ts +++ b/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 = { diff --git a/src/primevue/panelMenu/panelMenu.stories.ts b/src/primevue/panelMenu/panelMenu.stories.ts new file mode 100644 index 0000000..8254672 --- /dev/null +++ b/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 = { + 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 = { + render: (args) => ({ + components: { PanelMenu }, + setup() { + const expandedKeys = ref({ R: true, "R-A": true }); + return { args, items, expandedKeys }; + }, + template: html``, + }), +}; diff --git a/src/primevue/panelMenu/panelMenu.ts b/src/primevue/panelMenu/panelMenu.ts new file mode 100644 index 0000000..c5f2471 --- /dev/null +++ b/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; From 8c41ba98708275835c78ccf637c6c7d2a36130f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl=20G=C3=B6decken?= Date: Sat, 23 Nov 2024 20:23:57 +0100 Subject: [PATCH 2/3] fix(panelMenu): workaround for non-distinct focus-visible --- src/primevue/panelMenu/panelMenu.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/primevue/panelMenu/panelMenu.ts b/src/primevue/panelMenu/panelMenu.ts index c5f2471..d4868ca 100644 --- a/src/primevue/panelMenu/panelMenu.ts +++ b/src/primevue/panelMenu/panelMenu.ts @@ -34,17 +34,15 @@ const panelMenu: PanelMenuPassThroughOptions = { 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`; - + const focusVisible = tw`focus-visible:outline-none focus-visible:outline-4 focus-visible:outline-offset-4 focus-visible:outline-blue-800`; + const likeHover = tw`bg-blue-200`; return { class: { [base]: true, - [focused]: context.focused, + [likeHover]: context.focused, // workaround for https://github.com/primefaces/primevue/issues/6836 + [focusVisible]: true, [pointer]: true, [selected]: context.active, [hover]: !context.active, From ff1c0e5f516316a957210dc4b7bacddefc5297c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl=20G=C3=B6decken?= Date: Sat, 23 Nov 2024 20:25:58 +0100 Subject: [PATCH 3/3] chore: simplify story --- src/primevue/panelMenu/panelMenu.stories.ts | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/src/primevue/panelMenu/panelMenu.stories.ts b/src/primevue/panelMenu/panelMenu.stories.ts index 8254672..2869bd6 100644 --- a/src/primevue/panelMenu/panelMenu.stories.ts +++ b/src/primevue/panelMenu/panelMenu.stories.ts @@ -12,31 +12,23 @@ const meta: Meta = { argTypes: {}, }; -type MenuItemWithCount = MenuItem & { - count?: string; - items?: MenuItemWithCount[] | undefined; -}; - -const items: MenuItemWithCount[] = [ +const items: MenuItem[] = [ { 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" }, + { label: "Alle Gerichtsentscheidungen", key: "R-A" }, + { label: "Urteil", key: "R-U" }, + { label: "Beschluss", key: "R-B" }, + { label: "Sonstige Entscheidungen", key: "R-S" }, ], }, ];