feat(breadcrumb): add breadcrumb component

package.json

@@ -89,6 +89,7 @@
  "prettier": "~3.3.3",
  "prettier-plugin-tailwindcss": "~0.6.6",
  "storybook": "~8.2.9",
+ "storybook-vue3-router": "^5.0.0",
  "tailwindcss": "~3.4.10",
  "typescript": "~5.5.4",
  "typescript-eslint": "~8.2.0",

src/primevue/breadcrumb/breadcrumb.stories.ts

@@ -0,0 +1,64 @@
+import { Meta, StoryObj } from "@storybook/vue3";
+import Breadcrumb from "primevue/breadcrumb";
+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 ChevronRightIcon from "~icons/material-symbols/chevron-right";
+
+const meta: Meta<typeof Breadcrumb> = {
+ component: Breadcrumb,
+ tags: ["autodocs"],
+ args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+ render: (args) => ({
+ components: { Breadcrumb, HomeOutlineIcon, ChevronRightIcon },
+ setup() {
+ const items = ref([
+ { label: "", type: "home", route: "/" },
+ { label: "Gesetze & Verordnungen", route: "/laws" },
+ { label: "BGB Bürgerliches Gesetzbuch", route: "/bgb" },
+ { label: "Buch 2", route: "/book-2" },
+ { label: "Abschnitt 3" },
+ { label: "Untertitel 2" },
+ { label: "Kapitel 2" },
+ { label: "§ 312e Verletzung von Informationspflichten über Kosten" },
+ ]);
+
+ return { args, items };
+ },
+ template: html`
+ <div class="card flex justify-center">
+ <Breadcrumb :model="items">
+ <template #item="{ item, props }">
+ <router-link
+ v-if="item.route"
+ v-slot="{ href, navigate }"
+ :to="item.route"
+ custom
+ >
+ <a :href="href" v-bind="props.action" @click="navigate">
+ <span v-if="item.type === 'home'">
+ <HomeOutlineIcon />
+ </span>
+ <span v-else> {{ item.label }} </span>
+ </a>
+ </router-link>
+ <span v-else>{{ item.label }}</span>
+ </template>
+ <template #separator>
+ <ChevronRightIcon />
+ </template>
+ </Breadcrumb>
+ </div>
+ `,
+ }),
+ decorators: [
+ vueRouter(), // This adds basic router functionality for the story
+ ],
+};

src/primevue/breadcrumb/breadcrumb.ts

@@ -0,0 +1,40 @@
+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,
+ },
+ };
+ },
+ item: () => {
+ const base = tw`flex-no-wrap my-2 flex items-center`;
+ return {
+ class: {
+ [base]: true,
+ },
+ };
+ },
+ 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,
+ },
+ };
+ },
+ separator: () => {
+ return {
+ class: {
+ "flex items-center text-gray-600 mx-2": true,
+ },
+ };
+ },
+};
+
+export default breadcrumb;

src/primevue/index.ts

@@ -17,6 +17,7 @@ import textarea from "./textarea/textarea";
 import toast from "./toast/toast";
 import select from "./select/select";
 import inputMask from "./inputMask/inputMask";
+import breadcrumb from "@/primevue/breadcrumb/breadcrumb";
 
 import { deDE } from "@/config/locale";
 
@@ -38,6 +39,7 @@ export const RisUiTheme = {
  autocomplete,
  select,
  inputMask,
+ breadcrumb,
 };
 
 export const RisUiLocale = {