@phila/phila-ui-breadcrumbs 0.0.3 → 0.1.0-beta.2

package/README.md

@@ -1,11 +1,14 @@
 # Breadcrumbs Component
 
-A simple, customizable Vue 3. Breadcrumbs component built with TypeScript and Vite.
-A breadcrumb component for Phila UI
+A responsive breadcrumb navigation component for Phila UI built with Vue 3 and TypeScript. Features automatic mobile optimization and accessibility support.
 
 ## Features
 
 - 🎯 TypeScript support with full type definitions
+- 📱 Responsive design with mobile-specific navigation
+- ♿ Full accessibility support with ARIA labels
+- 🏠 Built-in home icon link
+- 🔗 Flexible link structure
 
 ## Installation
 
@@ -22,27 +25,66 @@ pnpm add @phila/phila-ui-breadcrumbs
 ```vue
 <script setup lang="ts">
 import { Breadcrumbs } from "@phila/phila-ui-breadcrumbs";
+
+const breadcrumbItems = [
+  { label: "Services", href: "/services" },
+  { label: "Cars, parking & transportation", href: "/transportation" },
+  { label: "Apply for a parking permit", href: "/parking-permit" },
+];
 </script>
-<template>...Add basic component template here...</template>
+
+<template>
+  <Breadcrumbs :items="breadcrumbItems" />
+</template>
 ```
 
 ## Props
 
-| Prop | Type | Default | Description |
-| ---- | ---- | ------- | ----------- |
+### Breadcrumbs
 
-| ...Add props here...
+| Prop        | Type               | Default | Description                          |
+| ----------- | ------------------ | ------- | ------------------------------------ |
+| `items`     | `BreadcrumbItem[]` | `[]`    | Array of breadcrumb items to display |
+| `className` | `string`           | `""`    | Additional CSS classes to apply      |
+| `homeHref`  | `string`           | `"/"`   | URL for the home icon link           |
 
-## Events
+### BreadcrumbItem Interface
+
+```typescript
+interface BreadcrumbItem {
+  label: string; // Display text for the breadcrumb
+  href?: string; // Optional URL (last item is treated as current page)
+}
+```
 
-| Event | Payload | Description |
-| ----- | ------- | ----------- |
+## Events
 
-| ...Add events here...
+This component does not emit custom events. Navigation is handled through standard anchor tag clicks.
 
 ## Examples
 
-...Add examples here...
+### Basic Usage
+
+```vue
+<Breadcrumbs :items="[{ label: 'Services', href: '/services' }, { label: 'Current Page' }]" />
+```
+
+### Custom Home Link
+
+```vue
+<Breadcrumbs :items="breadcrumbItems" home-href="/dashboard" />
+```
+
+### With Custom Classes
+
+```vue
+<Breadcrumbs :items="breadcrumbItems" class-name="my-custom-breadcrumbs" />
+```
+
+## Responsive Behavior
+
+- **Desktop**: Shows full breadcrumb trail with home icon and all items
+- **Mobile (≤768px)**: Shows only a "back" link to the parent page with left arrow icon
 
 ## Development
 

package/dist/BreadcrumbLink.vue.d.ts

@@ -0,0 +1,7 @@
+import { BreadcrumbLinkProps } from './index';
+declare const _default: import('vue').DefineComponent<BreadcrumbLinkProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BreadcrumbLinkProps> & Readonly<{}>, {
+    isMobile: boolean;
+    isCurrentPage: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=BreadcrumbLink.vue.d.ts.map

package/dist/BreadcrumbLink.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbLink.vue.d.ts","sourceRoot":"","sources":["../src/BreadcrumbLink.vue"],"names":[],"mappings":"AAOA;AAoBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;;;;;AA2EnD,wBAOG"}

package/dist/Breadcrumbs.vue.d.ts

@@ -1,4 +1,8 @@
-import { BreadcrumbsProps } from './index';
-declare const _default: import('vue').DefineComponent<BreadcrumbsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BreadcrumbsProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLSpanElement>;
+import { BreadcrumbsProps, BreadcrumbItem } from './index';
+declare const _default: import('vue').DefineComponent<BreadcrumbsProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BreadcrumbsProps> & Readonly<{}>, {
+    items: BreadcrumbItem[];
+    className: string;
+    homeHref: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLElement>;
 export default _default;
 //# sourceMappingURL=Breadcrumbs.vue.d.ts.map

package/dist/Breadcrumbs.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.vue.d.ts","sourceRoot":"","sources":["../src/Breadcrumbs.vue"],"names":[],"mappings":"AAGA;AAgCA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;;AA+DhD,wBASG"}
+{"version":3,"file":"Breadcrumbs.vue.d.ts","sourceRoot":"","sources":["../src/Breadcrumbs.vue"],"names":[],"mappings":"AAwBA;AAgGA,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;;;;;;AAiIrE,wBAQG"}

package/dist/index.css

@@ -0,0 +1 @@
+nav[data-v-64268cf1]{padding:var(--spacing-s)}ul[data-v-64268cf1]{list-style:none;display:flex;flex-wrap:wrap;padding:0;margin:0}li[data-v-64268cf1]{align-items:center;white-space:nowrap;display:flex}li[data-v-64268cf1]:not(:last-child):after{content:"/";margin:0 var(--spacing-s) 0 var(--spacing-m)}.breadcrumb-mobile[data-v-64268cf1]{display:none}@media(max-width:768px){ul[data-v-64268cf1]{display:none}.breadcrumb-mobile[data-v-64268cf1]{display:block}}

package/dist/index.d.ts

@@ -1,5 +1,17 @@
 import { BaseProps } from '@phila/phila-ui-core';
 export { default as Breadcrumbs } from './Breadcrumbs.vue';
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
 export interface BreadcrumbsProps extends BaseProps {
+    items: BreadcrumbItem[];
+    className?: string;
+    homeHref?: string;
+}
+export interface BreadcrumbLinkProps {
+    item: BreadcrumbItem;
+    isMobile?: boolean;
+    isCurrentPage?: boolean;
 }
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAI3D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;CAElD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAE3D,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),a=require("@phila/phila-ui-core"),n=e.defineComponent({__name:"Breadcrumbs",props:{className:{}},setup(s,{emit:c}){const r=s,t=e.computed(()=>a.cn("default-class",r.className));return(o,m)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(t.value)}," Hello world! I am Breadcrumbs ",2))}}),l=(s,c)=>{const r=s.__vccOpts||s;for(const[t,o]of c)r[t]=o;return r},u=l(n,[["__scopeId","data-v-eb21bb54"]]);exports.Breadcrumbs=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),m=require("@phila/phila-ui-core"),i=require("@phila/phila-ui-link");var u={prefix:"fas",iconName:"angle-left",icon:[256,512,[8249],"f104","M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"]},f={prefix:"fas",iconName:"house",icon:[512,512,[127968,63498,63500,"home","home-alt","home-lg-alt"],"f015","M277.8 8.6c-12.3-11.4-31.3-11.4-43.5 0l-224 208c-9.6 9-12.8 22.9-8 35.1S18.8 272 32 272l16 0 0 176c0 35.3 28.7 64 64 64l288 0c35.3 0 64-28.7 64-64l0-176 16 0c13.2 0 25-8.1 29.8-20.3s1.6-26.2-8-35.1l-224-208zM240 320l32 0c26.5 0 48 21.5 48 48l0 96-128 0 0-96c0-26.5 21.5-48 48-48z"]};const d={key:0,class:"has-text-body-small"},c=e.defineComponent({__name:"BreadcrumbLink",props:{item:{},isMobile:{type:Boolean,default:!1},isCurrentPage:{type:Boolean,default:!1}},setup(n){return(t,l)=>n.isCurrentPage?(e.openBlock(),e.createElementBlock("span",d,e.toDisplayString(n.item.label),1)):(e.openBlock(),e.createBlock(e.unref(i.PhilaLink),{key:1,href:n.item.href,size:"small","icon-definition":n.isMobile?e.unref(u):null},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.item.label),1)]),_:1},8,["href","icon-definition"]))}}),h={"aria-label":"breadcrumb"},p={class:"breadcrumb-mobile"},b=["aria-current"],g=e.defineComponent({__name:"Breadcrumbs",props:{items:{default:()=>[]},className:{default:""},homeHref:{default:"/"}},setup(n){const t=n,l=e.computed(()=>m.cn(t.className+" content")),a=()=>t.items.length>1?t.items[t.items.length-2]:{label:"Home",href:t.homeHref};return(o,B)=>(e.openBlock(),e.createElementBlock("nav",h,[e.createElementVNode("div",p,[e.createVNode(c,{item:a(),"is-mobile":""},null,8,["item"])]),e.createElementVNode("ul",{class:e.normalizeClass(l.value)},[e.createElementVNode("li",null,[e.createVNode(e.unref(i.PhilaLink),{href:t.homeHref||"/","icon-definition":e.unref(f),"icon-only":"",size:"small","aria-label":"Home"},null,8,["href","icon-definition"])]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.items,(s,r)=>(e.openBlock(),e.createElementBlock("li",{key:r,class:"breadcrumb-item","aria-current":r===t.items.length-1?"page":void 0},[e.createVNode(c,{item:s,"is-current-page":r===t.items.length-1},null,8,["item","is-current-page"])],8,b))),128))],2)]))}}),_=(n,t)=>{const l=n.__vccOpts||n;for(const[a,o]of t)l[a]=o;return l},k=_(g,[["__scopeId","data-v-64268cf1"]]);exports.Breadcrumbs=k;

package/dist/index.mjs

@@ -1,22 +1,88 @@
-import { defineComponent as r, computed as a, createElementBlock as n, openBlock as m, normalizeClass as l } from "vue";
-import { cn as p } from "@phila/phila-ui-core";
-import './index.css';const _ = /* @__PURE__ */ r({
+import { defineComponent as d, createElementBlock as n, createBlock as p, openBlock as a, toDisplayString as f, unref as r, withCtx as _, createTextVNode as g, computed as k, createElementVNode as s, createVNode as c, normalizeClass as v, Fragment as y, renderList as B } from "vue";
+import { cn as x } from "@phila/phila-ui-core";
+import { PhilaLink as h } from "@phila/phila-ui-link";
+import './index.css';var N = {
+  prefix: "fas",
+  iconName: "angle-left",
+  icon: [256, 512, [8249], "f104", "M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z"]
+}, z = {
+  prefix: "fas",
+  iconName: "house",
+  icon: [512, 512, [127968, 63498, 63500, "home", "home-alt", "home-lg-alt"], "f015", "M277.8 8.6c-12.3-11.4-31.3-11.4-43.5 0l-224 208c-9.6 9-12.8 22.9-8 35.1S18.8 272 32 272l16 0 0 176c0 35.3 28.7 64 64 64l288 0c35.3 0 64-28.7 64-64l0-176 16 0c13.2 0 25-8.1 29.8-20.3s1.6-26.2-8-35.1l-224-208zM240 320l32 0c26.5 0 48 21.5 48 48l0 96-128 0 0-96c0-26.5 21.5-48 48-48z"]
+};
+const H = {
+  key: 0,
+  class: "has-text-body-small"
+}, u = /* @__PURE__ */ d({
+  __name: "BreadcrumbLink",
+  props: {
+    item: {},
+    isMobile: { type: Boolean, default: !1 },
+    isCurrentPage: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    return (e, l) => t.isCurrentPage ? (a(), n("span", H, f(t.item.label), 1)) : (a(), p(r(h), {
+      key: 1,
+      href: t.item.href,
+      size: "small",
+      "icon-definition": t.isMobile ? r(N) : null
+    }, {
+      default: _(() => [
+        g(f(t.item.label), 1)
+      ]),
+      _: 1
+    }, 8, ["href", "icon-definition"]));
+  }
+}), C = { "aria-label": "breadcrumb" }, L = { class: "breadcrumb-mobile" }, M = ["aria-current"], P = /* @__PURE__ */ d({
   __name: "Breadcrumbs",
   props: {
-    className: {}
+    items: { default: () => [] },
+    className: { default: "" },
+    homeHref: { default: "/" }
   },
-  setup(e, { emit: c }) {
-    const s = e, t = a(() => p("default-class", s.className));
-    return (o, d) => (m(), n("span", {
-      class: l(t.value)
-    }, " Hello world! I am Breadcrumbs ", 2));
+  setup(t) {
+    const e = t, l = k(() => x(e.className + " content")), i = () => e.items.length > 1 ? e.items[e.items.length - 2] : {
+      label: "Home",
+      href: e.homeHref
+    };
+    return (m, E) => (a(), n("nav", C, [
+      s("div", L, [
+        c(u, {
+          item: i(),
+          "is-mobile": ""
+        }, null, 8, ["item"])
+      ]),
+      s("ul", {
+        class: v(l.value)
+      }, [
+        s("li", null, [
+          c(r(h), {
+            href: e.homeHref || "/",
+            "icon-definition": r(z),
+            "icon-only": "",
+            size: "small",
+            "aria-label": "Home"
+          }, null, 8, ["href", "icon-definition"])
+        ]),
+        (a(!0), n(y, null, B(e.items, (b, o) => (a(), n("li", {
+          key: o,
+          class: "breadcrumb-item",
+          "aria-current": o === e.items.length - 1 ? "page" : void 0
+        }, [
+          c(u, {
+            item: b,
+            "is-current-page": o === e.items.length - 1
+          }, null, 8, ["item", "is-current-page"])
+        ], 8, M))), 128))
+      ], 2)
+    ]));
   }
-}), u = (e, c) => {
-  const s = e.__vccOpts || e;
-  for (const [t, o] of c)
-    s[t] = o;
-  return s;
-}, b = /* @__PURE__ */ u(_, [["__scopeId", "data-v-eb21bb54"]]);
+}), V = (t, e) => {
+  const l = t.__vccOpts || t;
+  for (const [i, m] of e)
+    l[i] = m;
+  return l;
+}, w = /* @__PURE__ */ V(P, [["__scopeId", "data-v-64268cf1"]]);
 export {
-  b as Breadcrumbs
+  w as Breadcrumbs
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-breadcrumbs",
-  "version": "0.0.3",
+  "version": "0.1.0-beta.2",
   "type": "module",
   "description": "A breadcrumb component for Phila UI",
   "main": "./dist/index.js",
@@ -25,12 +25,18 @@
   "author": "",
   "license": "MIT",
   "peerDependencies": {
+    "@fortawesome/vue-fontawesome": "^3.1.2",
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "2.1.2"
+    "@phila/phila-ui-core": "2.2.0-beta.2",
+    "@phila/phila-ui-link": "1.0.0-beta.0"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/pro-regular-svg-icons": "^7.1.0",
+    "@fortawesome/pro-solid-svg-icons": "^7.1.0",
+    "@fortawesome/vue-fontawesome": "^3.1.2",
     "@types/node": "^24.0.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "eslint": "^9.0.0",