@todovue/tv-breadcrumbs 1.0.1 → 1.1.1

package/README.md

@@ -1,4 +1,4 @@
-<p align="center"><img width="150" src="https://firebasestorage.googleapis.com/v0/b/todovue-blog.appspot.com/o/logo.png?alt=media&token=d8eb592f-e4a9-4b02-8aff-62d337745f41" alt="TODOvue logo">
+<p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo">
 </p>
 
 # TODOvue Breadcrumbs (TvBreadcrumbs)
@@ -71,6 +71,7 @@ Global registration (main.js / main.ts):
 import { createApp } from 'vue'
 import App from './App.vue'
 import { TvBreadcrumbs } from '@todovue/tv-breadcrumbs'
+import '@todovue/tv-breadcrumbs/style.css' // import styles
 
 createApp(App)
   .use(TvBreadcrumbs) // enables <TvBreadcrumbs /> globally
@@ -104,7 +105,9 @@ First, add the stylesheet to your Nuxt config:
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
-  css: ['@todovue/tv-breadcrumbs/style.css'],
+  modules: [
+    '@todovue/tv-breadcrumbs/nuxt'
+  ]
 })
 ```
 

package/dist/entry.d.ts

@@ -1,6 +1,11 @@
-import { default as TvBreadcrumbs } from './components/TvBreadcrumbs.vue';
-export declare const TvBreadcrumbsPlugin: {
-    install(app: any): void;
-};
+import { Plugin } from 'vue';
+import { default as _TvBreadcrumbs } from './components/TvBreadcrumbs.vue';
+declare const TvBreadcrumbs: typeof _TvBreadcrumbs & Plugin;
 export { TvBreadcrumbs };
+export declare const TvBreadcrumbsPlugin: Plugin;
 export default TvBreadcrumbs;
+declare module 'vue' {
+    interface GlobalComponents {
+        TvBreadcrumbs: typeof TvBreadcrumbs;
+    }
+}

package/dist/tv-breadcrumbs.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");function _(t,r){const d=e.getCurrentInstance()?.appContext?.config?.globalProperties||{},s=e.computed(()=>d.$route||null),u=d.$router||null,f=e.computed(()=>{if(!t.autoGenerate)return[];const n=e.unref(s);if(!n)return[];const c=(n.matched||[]).map(b=>{const i=b.meta?.breadcrumb;return i?typeof i=="function"?i(n):Array.isArray(i)?i:typeof i=="string"?[{label:i,href:b.path}]:null:null}).filter(Boolean).flat();if(c.length>0)return y(c);const g=String(n.path||"").split("/").filter(Boolean);if(g.length===0)return y([{label:t.homeLabel,href:"/"}]);const v=[];let B="";for(const b of g)B+=`/${b}`,v.push({label:S(b),href:B});return y([{label:t.homeLabel,href:"/"},...v])}),k=e.computed(()=>Array.isArray(t.items)&&t.items.length>0?y(t.items):f.value),a=e.computed(()=>{const n=k.value,o=Number(t.maxItems||0);if(!o||n.length<=o)return n;const c=Math.max(1,o-2),p=n[0],g=n.slice(-c);return[p,{label:"…",href:null,key:"__ellipsis__",disabled:!0},...g]});function l(n,o,c){if(!o||o.disabled){n.preventDefault();return}r("item-click",{item:o,index:c,event:n});const p=c===a.value.length-1;if(!o.href||p){n.preventDefault();return}u&&typeof u.push=="function"&&(n.preventDefault(),u.push(o.href),r("navigate",{to:o.href,item:o,index:c}))}return{itemsToRender:a,handleClick:l}}function S(t){return t.replace(/[-_]+/g," ").replace(/\b\w/g,r=>r.toUpperCase())}function y(t){return t.filter(Boolean).map((r,m)=>{if(typeof r=="string")return{label:r,href:null,key:`i-${m}`};const d=r.label!=null?String(r.label):"",s=r.href!=null&&r.href!==""?r.href:null,u=r.key!=null?r.key:`i-${m}`;return{...r,label:d,href:s,key:u}})}const T=["aria-label"],E={class:"tv-breadcrumb-list",role:"list"},N=["itemscope","itemtype"],C=["href","aria-disabled","tabindex","onClick"],I={itemprop:"name"},L=["content"],V={class:"tv-breadcrumb-separator","aria-hidden":"true"},$={key:1,class:"tv-breadcrumb-current","aria-current":"page"},h={__name:"TvBreadcrumbs",props:{items:{type:Array,default:()=>[]},separator:{type:String,default:"›"},maxItems:{type:Number,default:0},autoGenerate:{type:Boolean,default:!1},homeLabel:{type:String,default:"Home"},ariaLabel:{type:String,default:"Breadcrumb"}},emits:["item-click","navigate"],setup(t,{emit:r}){const m=t,d=r,{itemsToRender:s,handleClick:u}=_(m,d);return(f,k)=>(e.openBlock(),e.createElementBlock("nav",{class:"tv-breadcrumb tv-breadcrumb-root tv-breadcrumb-container","aria-label":t.ariaLabel},[e.createElementVNode("ol",E,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),(a,l)=>(e.openBlock(),e.createElementBlock("li",{key:a.key||l,class:e.normalizeClass(["tv-breadcrumb-item",{"tv-breadcrumb-item--current":l===e.unref(s).length-1,"tv-breadcrumb-item--link":l!==e.unref(s).length-1,"tv-breadcrumb-item--disabled":a.disabled}]),itemscope:l===e.unref(s).length-1?void 0:!0,itemtype:l===e.unref(s).length-1?void 0:"https://schema.org/ListItem"},[l!==e.unref(s).length-1?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("a",{class:"tv-breadcrumb-link",href:a.disabled?void 0:a.href||"#","aria-disabled":a.disabled?"true":void 0,tabindex:a.disabled?-1:void 0,itemprop:"item",onClick:n=>e.unref(u)(n,a,l)},[e.createElementVNode("span",I,[e.renderSlot(f.$slots,"item",{item:a,index:l},()=>[e.createTextVNode(e.toDisplayString(a.label),1)])])],8,C),e.createElementVNode("meta",{itemprop:"position",content:String(l+1)},null,8,L),e.createElementVNode("span",V,[e.renderSlot(f.$slots,"separator",{},()=>[e.createTextVNode(e.toDisplayString(t.separator),1)])])],64)):(e.openBlock(),e.createElementBlock("span",$,[e.renderSlot(f.$slots,"current",{item:a,index:l},()=>[e.createTextVNode(e.toDisplayString(a.label),1)])]))],10,N))),128))])],8,T))}};h.install=t=>{t.component("TvBreadcrumbs",h)};const D={install(t){t.component("TvBreadcrumbs",h)}};exports.TvBreadcrumbs=h;exports.TvBreadcrumbsPlugin=D;exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");function _(t,r){const d=e.getCurrentInstance()?.appContext?.config?.globalProperties||{},s=e.computed(()=>d.$route||null),u=d.$router||null,f=e.computed(()=>{if(!t.autoGenerate)return[];const n=e.unref(s);if(!n)return[];const c=(n.matched||[]).map(b=>{const i=b.meta?.breadcrumb;return i?typeof i=="function"?i(n):Array.isArray(i)?i:typeof i=="string"?[{label:i,href:b.path}]:null:null}).filter(Boolean).flat();if(c.length>0)return y(c);const g=String(n.path||"").split("/").filter(Boolean);if(g.length===0)return y([{label:t.homeLabel,href:"/"}]);const v=[];let B="";for(const b of g)B+=`/${b}`,v.push({label:S(b),href:B});return y([{label:t.homeLabel,href:"/"},...v])}),k=e.computed(()=>Array.isArray(t.items)&&t.items.length>0?y(t.items):f.value),a=e.computed(()=>{const n=k.value,o=Number(t.maxItems||0);if(!o||n.length<=o)return n;const c=Math.max(1,o-2),p=n[0],g=n.slice(-c);return[p,{label:"…",href:null,key:"__ellipsis__",disabled:!0},...g]});function l(n,o,c){if(!o||o.disabled){n.preventDefault();return}r("item-click",{item:o,index:c,event:n});const p=c===a.value.length-1;if(!o.href||p){n.preventDefault();return}u&&typeof u.push=="function"&&(n.preventDefault(),u.push(o.href),r("navigate",{to:o.href,item:o,index:c}))}return{itemsToRender:a,handleClick:l}}function S(t){return t.replace(/[-_]+/g," ").replace(/\b\w/g,r=>r.toUpperCase())}function y(t){return t.filter(Boolean).map((r,m)=>{if(typeof r=="string")return{label:r,href:null,key:`i-${m}`};const d=r.label!=null?String(r.label):"",s=r.href!=null&&r.href!==""?r.href:null,u=r.key!=null?r.key:`i-${m}`;return{...r,label:d,href:s,key:u}})}const T=["aria-label"],E={class:"tv-breadcrumb-list",role:"list"},N=["itemscope","itemtype"],C=["href","aria-disabled","tabindex","onClick"],I={itemprop:"name"},L=["content"],V={class:"tv-breadcrumb-separator","aria-hidden":"true"},$={key:1,class:"tv-breadcrumb-current","aria-current":"page"},D={__name:"TvBreadcrumbs",props:{items:{type:Array,default:()=>[]},separator:{type:String,default:"›"},maxItems:{type:Number,default:0},autoGenerate:{type:Boolean,default:!1},homeLabel:{type:String,default:"Home"},ariaLabel:{type:String,default:"Breadcrumb"}},emits:["item-click","navigate"],setup(t,{emit:r}){const m=t,d=r,{itemsToRender:s,handleClick:u}=_(m,d);return(f,k)=>(e.openBlock(),e.createElementBlock("nav",{class:"tv-breadcrumb tv-breadcrumb-root tv-breadcrumb-container","aria-label":t.ariaLabel},[e.createElementVNode("ol",E,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),(a,l)=>(e.openBlock(),e.createElementBlock("li",{key:a.key||l,class:e.normalizeClass(["tv-breadcrumb-item",{"tv-breadcrumb-item--current":l===e.unref(s).length-1,"tv-breadcrumb-item--link":l!==e.unref(s).length-1,"tv-breadcrumb-item--disabled":a.disabled}]),itemscope:l===e.unref(s).length-1?void 0:!0,itemtype:l===e.unref(s).length-1?void 0:"https://schema.org/ListItem"},[l!==e.unref(s).length-1?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("a",{class:"tv-breadcrumb-link",href:a.disabled?void 0:a.href||"#","aria-disabled":a.disabled?"true":void 0,tabindex:a.disabled?-1:void 0,itemprop:"item",onClick:n=>e.unref(u)(n,a,l)},[e.createElementVNode("span",I,[e.renderSlot(f.$slots,"item",{item:a,index:l},()=>[e.createTextVNode(e.toDisplayString(a.label),1)])])],8,C),e.createElementVNode("meta",{itemprop:"position",content:String(l+1)},null,8,L),e.createElementVNode("span",V,[e.renderSlot(f.$slots,"separator",{},()=>[e.createTextVNode(e.toDisplayString(t.separator),1)])])],64)):(e.openBlock(),e.createElementBlock("span",$,[e.renderSlot(f.$slots,"current",{item:a,index:l},()=>[e.createTextVNode(e.toDisplayString(a.label),1)])]))],10,N))),128))])],8,T))}},h=D;h.install=t=>{t.component("TvBreadcrumbs",h)};const A={install:h.install};exports.TvBreadcrumbs=h;exports.TvBreadcrumbsPlugin=A;exports.default=h;

package/dist/tv-breadcrumbs.css

@@ -1 +1 @@
-@charset "UTF-8";*{box-sizing:border-box;margin:0;padding:0}.tv-breadcrumb.tv-breadcrumb-root.tv-breadcrumb-container{width:100%;overflow-x:auto}.tv-breadcrumb .tv-breadcrumb-list{display:flex;align-items:center;gap:.5rem;list-style:none;padding:0;margin:0;white-space:nowrap}.tv-breadcrumb .tv-breadcrumb-item{display:inline-flex;align-items:center;gap:.5rem}.tv-breadcrumb .tv-breadcrumb-item--link .tv-breadcrumb-link{text-decoration:none;transition:opacity .16s ease,text-decoration-color .16s ease}.tv-breadcrumb .tv-breadcrumb-item--current .tv-breadcrumb-current{font-weight:600;cursor:default}.tv-breadcrumb .tv-breadcrumb-item--disabled .tv-breadcrumb-link{cursor:not-allowed;opacity:.5;pointer-events:none}.tv-breadcrumb .tv-breadcrumb-separator{-webkit-user-select:none;user-select:none;opacity:.7}.light-mode .tv-breadcrumb .tv-breadcrumb-link{color:#000b14;text-decoration:underline;text-underline-offset:2px;text-decoration-color:#000b144d}.light-mode .tv-breadcrumb .tv-breadcrumb-link:hover{opacity:.85;text-decoration-color:#000b1499}.light-mode .tv-breadcrumb .tv-breadcrumb-link:focus-visible{outline:2px solid rgba(0,11,20,.4);outline-offset:2px;border-radius:6px}.light-mode .tv-breadcrumb .tv-breadcrumb-current,.light-mode .tv-breadcrumb .tv-breadcrumb-separator{color:#000b14}.dark-mode .tv-breadcrumb .tv-breadcrumb-link{color:#f4faff;text-decoration:underline;text-underline-offset:2px;text-decoration-color:#f4faff40}.dark-mode .tv-breadcrumb .tv-breadcrumb-link:hover{opacity:.9;text-decoration-color:#f4faff8c}.dark-mode .tv-breadcrumb .tv-breadcrumb-link:focus-visible{outline:2px solid rgba(244,250,255,.35);outline-offset:2px;border-radius:6px}.dark-mode .tv-breadcrumb .tv-breadcrumb-current{color:#f4faff}.dark-mode .tv-breadcrumb .tv-breadcrumb-separator{color:#f4faff;opacity:.75}
+*{box-sizing:border-box;margin:0;padding:0}.tv-breadcrumb.tv-breadcrumb-root.tv-breadcrumb-container{width:100%;overflow-x:auto}.tv-breadcrumb .tv-breadcrumb-list{display:flex;align-items:center;gap:.5rem;list-style:none;padding:0;margin:0;white-space:nowrap}.tv-breadcrumb .tv-breadcrumb-item{display:inline-flex;align-items:center;gap:.5rem}.tv-breadcrumb .tv-breadcrumb-item--link .tv-breadcrumb-link{text-decoration:none;transition:opacity .16s ease,text-decoration-color .16s ease}.tv-breadcrumb .tv-breadcrumb-item--current .tv-breadcrumb-current{font-weight:600;cursor:default}.tv-breadcrumb .tv-breadcrumb-item--disabled .tv-breadcrumb-link{cursor:not-allowed;opacity:.5;pointer-events:none}.tv-breadcrumb .tv-breadcrumb-separator{-webkit-user-select:none;user-select:none;opacity:.7}.tv-breadcrumb .tv-breadcrumb-link{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,currentColor 25%,transparent)}.tv-breadcrumb .tv-breadcrumb-link:hover{opacity:.9;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent)}.tv-breadcrumb .tv-breadcrumb-link:focus-visible{outline:2px solid color-mix(in srgb,currentColor 35%,transparent);outline-offset:2px;border-radius:6px}.tv-breadcrumb .tv-breadcrumb-current{color:inherit}.tv-breadcrumb .tv-breadcrumb-separator{color:inherit;opacity:.75}

package/dist/tv-breadcrumbs.es.js

@@ -1,26 +1,26 @@
 import { getCurrentInstance as D, computed as _, unref as u, createElementBlock as h, openBlock as p, createElementVNode as g, Fragment as A, renderList as N, normalizeClass as z, renderSlot as B, createTextVNode as S, toDisplayString as C } from "vue";
 function R(e, t) {
-  const m = D()?.appContext?.config?.globalProperties || {}, s = _(() => m.$route || null), c = m.$router || null, f = _(() => {
+  const d = D()?.appContext?.config?.globalProperties || {}, s = _(() => d.$route || null), i = d.$router || null, f = _(() => {
     if (!e.autoGenerate) return [];
     const r = u(s);
     if (!r) return [];
     const o = (r.matched || []).map((b) => {
-      const i = b.meta?.breadcrumb;
-      return i ? typeof i == "function" ? i(r) : Array.isArray(i) ? i : typeof i == "string" ? [{ label: i, href: b.path }] : null : null;
+      const c = b.meta?.breadcrumb;
+      return c ? typeof c == "function" ? c(r) : Array.isArray(c) ? c : typeof c == "string" ? [{ label: c, href: b.path }] : null : null;
     }).filter(Boolean).flat();
     if (o.length > 0)
       return k(o);
     const v = String(r.path || "").split("/").filter(Boolean);
     if (v.length === 0)
       return k([{ label: e.homeLabel, href: "/" }]);
-    const T = [];
-    let $ = "";
+    const $ = [];
+    let T = "";
     for (const b of v)
-      $ += `/${b}`, T.push({
+      T += `/${b}`, $.push({
         label: E(b),
-        href: $
+        href: T
       });
-    return k([{ label: e.homeLabel, href: "/" }, ...T]);
+    return k([{ label: e.homeLabel, href: "/" }, ...$]);
   }), L = _(() => Array.isArray(e.items) && e.items.length > 0 ? k(e.items) : f.value), n = _(() => {
     const r = L.value, l = Number(e.maxItems || 0);
     if (!l || r.length <= l)
@@ -47,7 +47,7 @@ function R(e, t) {
       r.preventDefault();
       return;
     }
-    c && typeof c.push == "function" && (r.preventDefault(), c.push(l.href), t("navigate", {
+    i && typeof i.push == "function" && (r.preventDefault(), i.push(l.href), t("navigate", {
       to: l.href,
       item: l,
       index: o
@@ -62,15 +62,15 @@ function E(e) {
   return e.replace(/[-_]+/g, " ").replace(/\b\w/g, (t) => t.toUpperCase());
 }
 function k(e) {
-  return e.filter(Boolean).map((t, d) => {
+  return e.filter(Boolean).map((t, m) => {
     if (typeof t == "string")
-      return { label: t, href: null, key: `i-${d}` };
-    const m = t.label != null ? String(t.label) : "", s = t.href != null && t.href !== "" ? t.href : null, c = t.key != null ? t.key : `i-${d}`;
+      return { label: t, href: null, key: `i-${m}` };
+    const d = t.label != null ? String(t.label) : "", s = t.href != null && t.href !== "" ? t.href : null, i = t.key != null ? t.key : `i-${m}`;
     return {
       ...t,
-      label: m,
+      label: d,
       href: s,
-      key: c
+      key: i
     };
   });
 }
@@ -84,7 +84,7 @@ const G = ["aria-label"], M = {
   key: 1,
   class: "tv-breadcrumb-current",
   "aria-current": "page"
-}, I = {
+}, j = {
   __name: "TvBreadcrumbs",
   props: {
     items: {
@@ -114,7 +114,7 @@ const G = ["aria-label"], M = {
   },
   emits: ["item-click", "navigate"],
   setup(e, { emit: t }) {
-    const d = e, m = t, { itemsToRender: s, handleClick: c } = R(d, m);
+    const m = e, d = t, { itemsToRender: s, handleClick: i } = R(m, d);
     return (f, L) => (p(), h("nav", {
       class: "tv-breadcrumb tv-breadcrumb-root tv-breadcrumb-container",
       "aria-label": e.ariaLabel
@@ -137,7 +137,7 @@ const G = ["aria-label"], M = {
               "aria-disabled": n.disabled ? "true" : void 0,
               tabindex: n.disabled ? -1 : void 0,
               itemprop: "item",
-              onClick: (r) => u(c)(r, n, a)
+              onClick: (r) => u(i)(r, n, a)
             }, [
               g("span", w, [
                 B(f.$slots, "item", {
@@ -169,17 +169,15 @@ const G = ["aria-label"], M = {
       ])
     ], 8, G));
   }
-};
+}, I = j;
 I.install = (e) => {
   e.component("TvBreadcrumbs", I);
 };
-const q = {
-  install(e) {
-    e.component("TvBreadcrumbs", I);
-  }
+const J = {
+  install: I.install
 };
 export {
   I as TvBreadcrumbs,
-  q as TvBreadcrumbsPlugin,
+  J as TvBreadcrumbsPlugin,
   I as default
 };

package/nuxt.js

@@ -0,0 +1,14 @@
+import { defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: '@todovue/tv-breadcrumbs',
+    configKey: 'tvBreadcrumbs'
+  },
+  setup(_options, nuxt) {
+    const cssPath = '@todovue/tv-breadcrumbs/style.css';
+    if (!nuxt.options.css.includes(cssPath)) {
+      nuxt.options.css.push(cssPath);
+    }
+  }
+})

package/package.json

@@ -4,7 +4,7 @@
   "author": "Cristhian Daza",
   "description": "A simple and customizable Vue 3 breadcrumbs component for your applications.",
   "license": "MIT",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "type": "module",
   "repository": {
     "type": "git",
@@ -30,7 +30,8 @@
       "import": "./dist/tv-breadcrumbs.es.js",
       "require": "./dist/tv-breadcrumbs.cjs.js"
     },
-    "./style.css": "./dist/tv-breadcrumbs.css"
+    "./style.css": "./dist/tv-breadcrumbs.css",
+    "./nuxt": "./nuxt.js"
   },
   "main": "dist/tv-breadcrumbs.cjs.js",
   "module": "dist/tv-breadcrumbs.es.js",
@@ -38,7 +39,8 @@
   "files": [
     "dist",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "nuxt.js"
   ],
   "sideEffects": [
     "*.css",
@@ -51,13 +53,13 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "build:demo": "cp README.md public/ && VITE_BUILD_TARGET=demo vite build"
+    "build:demo": "cp README.md public/ && cp CHANGELOG.md public/ && VITE_BUILD_TARGET=demo vite build"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@todovue/tv-demo": "^1.0.0",
+    "@todovue/tv-demo": "^1.2.2",
     "@vitejs/plugin-vue": "^6.0.0",
     "sass": "^1.0.0",
     "vite": "^7.0.0",