From 50ad156177dfccafa31517ad01030c2995a4b9cb Mon Sep 17 00:00:00 2001 From: Tarek Hamaoui Date: Wed, 23 Oct 2024 21:31:06 +0200 Subject: [PATCH 1/2] feat(breadcrumb): update link styling and behavior --- src/primevue/breadcrumb/breadcrumb.stories.ts | 38 ++++++++++++------- src/primevue/breadcrumb/breadcrumb.ts | 37 ++++-------------- 2 files changed, 33 insertions(+), 42 deletions(-) diff --git a/src/primevue/breadcrumb/breadcrumb.stories.ts b/src/primevue/breadcrumb/breadcrumb.stories.ts index 9a5f2dc..1ce4352 100644 --- a/src/primevue/breadcrumb/breadcrumb.stories.ts +++ b/src/primevue/breadcrumb/breadcrumb.stories.ts @@ -4,24 +4,29 @@ import { html } from "@/lib/tags.ts"; import { ref } from "vue"; import { vueRouter } from "storybook-vue3-router"; import HomeOutlineIcon from "~icons/material-symbols/home-outline"; +import HomeFilledIcon from "~icons/material-symbols/home"; import ChevronRightIcon from "~icons/material-symbols/chevron-right"; const meta: Meta = { component: Breadcrumb, tags: ["autodocs"], - args: {}, }; export default meta; type Story = StoryObj; export const Default: Story = { - render: (args) => ({ - components: { Breadcrumb, HomeOutlineIcon, ChevronRightIcon }, + render: () => ({ + components: { + Breadcrumb, + HomeOutlineIcon, + ChevronRightIcon, + HomeFilledIcon, + }, setup() { const items = ref([ { label: "", type: "home", route: "/" }, - { label: "Gesetze & Verordnungen", route: "/laws" }, + { label: "Gesetze & VerordnungenGesetze", route: "/laws" }, { label: "BGB Bürgerliches Gesetzbuch", route: "/bgb" }, { label: "Buch 2", route: "/book-2" }, { label: "Abschnitt 3" }, @@ -30,7 +35,9 @@ export const Default: Story = { { label: "§ 312e Verletzung von Informationspflichten über Kosten" }, ]); - return { args, items }; + const isHovered = ref(false); + + return { items, isHovered }; }, template: html`
@@ -42,16 +49,21 @@ export const Default: Story = { :to="item.route" custom > - + - + {{ item.label }} {{ item.label }} diff --git a/src/primevue/breadcrumb/breadcrumb.ts b/src/primevue/breadcrumb/breadcrumb.ts index 392d790..b48df38 100644 --- a/src/primevue/breadcrumb/breadcrumb.ts +++ b/src/primevue/breadcrumb/breadcrumb.ts @@ -2,38 +2,17 @@ import { BreadcrumbPassThroughOptions } from "primevue/breadcrumb"; import { tw } from "@/lib/tags.ts"; const breadcrumb: BreadcrumbPassThroughOptions = { - list: () => { - const base = tw`m-0 flex list-none flex-wrap items-center p-0 leading-none`; - return { - class: { - [base]: true, - }, - }; + list: { + class: tw`m-0 flex list-none flex-wrap items-center p-0 leading-none`, }, - item: () => { - const base = tw`flex-no-wrap ris-label1-regular my-2 flex items-center`; - return { - class: { - [base]: true, - }, - }; + item: { + class: tw`flex-no-wrap ris-label1-regular my-2 flex items-center`, }, - itemLink: () => { - const states = tw`outline-4 outline-offset-4 outline-blue-800 focus:outline`; - return { - class: { - "underline ris-link1-bold cursor-pointer inline-flex items-center": - true, - [states]: true, - }, - }; + itemLink: { + class: tw`ris-link1-regular inline-flex cursor-pointer items-center leading-tight no-underline outline-4 outline-offset-4 outline-blue-800 hover:underline focus:outline`, }, - separator: () => { - return { - class: { - "flex items-center text-gray-600 mx-2": true, - }, - }; + separator: { + class: tw`mx-2 flex items-center text-gray-600`, }, }; From d0ca225ef083fdeffceca3690b7b35995ccb48d2 Mon Sep 17 00:00:00 2001 From: Tarek Hamaoui Date: Wed, 23 Oct 2024 21:32:28 +0200 Subject: [PATCH 2/2] feat(breadcrumb): update link line height