{"_id":"@composy/breadcrumb-vue","name":"@composy/breadcrumb-vue","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@composy/breadcrumb-vue","version":"0.0.1","description":"LDesign breadcrumb Vue 3 adapter","keywords":["breadcrumb","navigation","route","vue","vue3","composable","ldesign","typescript"],"author":{"name":"LDesign Team"},"license":"MIT","type":"module","sideEffects":["*.vue","*.tsx","*.jsx","dist/*","es/**/style/**","esm/**/style/**"],"exports":{".":{"types":"./es/index.d.ts","import":"./es/index.js","require":"./lib/index.cjs","default":"./es/index.js"},"./components":{"types":"./es/components/index.d.ts","import":"./es/components/index.js","require":"./lib/components/index.cjs","default":"./es/components/index.js"},"./components/*":{"types":"./es/components/*.d.ts","import":"./es/components/*.js","require":"./lib/components/*.cjs","default":"./es/components/*.js"},"./composables":{"types":"./es/composables/index.d.ts","import":"./es/composables/index.js","require":"./lib/composables/index.cjs","default":"./es/composables/index.js"},"./composables/*":{"types":"./es/composables/*.d.ts","import":"./es/composables/*.js","require":"./lib/composables/*.cjs","default":"./es/composables/*.js"},"./index.css":"./dist/index.css","./index.min.css":"./dist/index.min.css","./style/index.css":"./es/style/index.css","./styles/index.css":"./es/styles/index.css","./style/index.less":"./esm/style/index.less","./styles/index.less":"./esm/styles/index.less","./package.json":"./package.json"},"main":"./lib/index.cjs","module":"./es/index.js","types":"./es/index.d.ts","unpkg":"./dist/index.min.js","jsdelivr":"./dist/index.min.js","scripts":{"build":"ldesign-builder build","clean":"rimraf dist es esm cjs lib","dev":"ldesign-builder build --watch","lint":"eslint . --fix","lint:check":"eslint . --max-warnings 0","lint:fix":"eslint . --fix","postbuild":"node --experimental-strip-types ../../../../scripts/index.ts workspace:ensure-package-outputs --cwd .. --target packages/vue && node --experimental-strip-types ../../../../scripts/index.ts clean:packages-source-declarations --cwd .. --target packages/vue","type-check":"vue-tsc --noEmit -p tsconfig.json","test":"ltesting run:unit","test:run":"ltesting run:unit","test:watch":"ltesting run:unit --watch","test:coverage":"ltesting run:unit --coverage","test:changed":"ltesting run:unit --changed","test:failed":"ltesting run:unit --failed","test:ui":"ltesting dashboard"},"dependencies":{"@composy/breadcrumb-core":"^0.0.1"},"peerDependencies":{"vue":"^3.5.32","vue-router":"^4.0.0"},"devDependencies":{"@antfu/eslint-config":"9.1.0","@composy/builder":"^0.0.1","@composy/testing":"^0.0.1","eslint":"10.7.0","rimraf":"^6.1.3","typescript":"5.9.3","vue":"3.5.39","vue-router":"^5.1.0","vue-tsc":"^3.3.7"},"typings":"./es/index.d.ts","browser":"./dist/index.js","peerDependenciesMeta":{"vue-router":{"optional":true}},"style":"./dist/style.css","_id":"@composy/breadcrumb-vue@0.0.1","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-IvniEL7zxJmtlEWgXfb7ImTRZkIypo5yI9QtqX8b9hTEL2wbkQw88yG9DzLYu1DZ9CQC07Q8ECI8T+2/ECWAIQ==","shasum":"dddec0a26bbbea5ac2401601d69aaae44e129b2f","tarball":"https://registry.npmjs.org/@composy/breadcrumb-vue/-/breadcrumb-vue-0.0.1.tgz","fileCount":119,"unpackedSize":871467,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCD0oiNyElW5WVUTohyCi1e1wE1l+lNNltRlYjr7If4TwIhAMgdpPdn9CKrBIvWhZA+skv3JYsUBZLe2KozT/t7yqh7"}]},"_npmUser":{"name":"swimly","email":"979741120@qq.com"},"directories":{},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/breadcrumb-vue_0.0.1_1786948993800_0.4248965192503682"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-17T06:43:13.548Z","0.0.1":"2026-08-17T06:43:13.957Z","modified":"2026-08-17T06:43:14.160Z"},"maintainers":[{"name":"swimly","email":"979741120@qq.com"}],"description":"LDesign breadcrumb Vue 3 adapter","keywords":["breadcrumb","navigation","route","vue","vue3","composable","ldesign","typescript"],"author":{"name":"LDesign Team"},"license":"MIT","readme":"# @composy/breadcrumb-vue\n\nVue 3 adapter for `@composy/breadcrumb-core`.\n\nIt provides the `Breadcrumb` component, item/dropdown/separator subcomponents, route helpers, composables, and the tokenized CSS layer.\n\n## Install\n\n```bash\npnpm add @composy/breadcrumb-vue\n```\n\n## Basic Usage\n\n```vue\n<script setup lang=\"ts\">\nimport { Breadcrumb } from '@composy/breadcrumb-vue'\nimport '@composy/breadcrumb-vue/style.css'\n\nconst items = [\n  { key: 'workspace', label: 'Workspace', path: '/workspace' },\n  { key: 'projects', label: 'Projects', path: '/workspace/projects' },\n  { key: 'atlas', label: 'Atlas Program', path: '/workspace/projects/atlas' },\n]\n</script>\n\n<template>\n  <Breadcrumb :items=\"items\" separator=\"chevron\" />\n</template>\n```\n\nCompatibility style imports are also available:\n\n```ts\nimport '@composy/breadcrumb-vue/index.css'\nimport '@composy/breadcrumb-vue/styles/index.css'\n```\n\n## Component API\n\n`Breadcrumb` props:\n\n| Prop | Type | Default |\n| --- | --- | --- |\n| `items` | `BreadcrumbItem[]` | `[]` |\n| `separator` | `'slash' \\| 'arrow' \\| 'dot' \\| 'chevron' \\| string` | `'/'` |\n| `size` | `'small' \\| 'medium' \\| 'large'` | `'medium'` |\n| `density` | `'default' \\| 'compact' \\| 'comfortable'` | `'default'` |\n| `maxItems` | `number` | `0` |\n| `itemsBeforeCollapse` | `number` | `1` |\n| `itemsAfterCollapse` | `number` | `2` |\n| `collapseMode` | `'ellipsis' \\| 'dropdown' \\| 'none'` | `'ellipsis'` |\n| `showHome` | `boolean` | `true` |\n| `homeItem` | `Partial<BreadcrumbItem>` | `undefined` |\n| `lastItemClickable` | `boolean` | `false` |\n| `ariaLabel` | `string` | `'Breadcrumb'` |\n| `fullWidth` | `boolean` | `false` |\n| `truncate` | `boolean` | `false` |\n| `maxLabelWidth` | `number \\| string` | `180` |\n| `expandLabel` | `string` | `'Expand hidden breadcrumb items'` |\n| `collapsedDropdownLabel` | `string` | `'Open hidden breadcrumb items'` |\n| `moreLabel` | `string` | `'More'` |\n\nEvents:\n\n| Event | Payload |\n| --- | --- |\n| `click` | `(item, index, event)` |\n| `dropdownSelect` | `(parentItem, selectedItem, event)` |\n| `expandChange` | `(expanded)` |\n\nExposed methods:\n\n- `getItems()`\n- `expand()`\n- `collapse()`\n- `getManager()`\n- `refresh()`\n\n## Collapse Dropdown\n\n```vue\n<template>\n  <Breadcrumb\n    :items=\"items\"\n    collapse-mode=\"dropdown\"\n    :max-items=\"4\"\n    :items-before-collapse=\"1\"\n    :items-after-collapse=\"2\"\n    collapsed-dropdown-label=\"Open hidden levels\"\n    more-label=\"More\"\n  />\n</template>\n```\n\nDropdown children support `group` and `divider`:\n\n```ts\nconst items = [\n  {\n    key: 'projects',\n    label: 'Projects',\n    path: '/projects',\n    children: [\n      { key: 'active', label: 'Active', path: '/projects?state=active', group: 'Status' },\n      { key: 'archived', label: 'Archived', path: '/projects?state=archived', divider: true },\n    ],\n  },\n]\n```\n\n## Route Composable\n\n```vue\n<script setup lang=\"ts\">\nimport { useRoute } from 'vue-router'\nimport { Breadcrumb, useBreadcrumbRoute } from '@composy/breadcrumb-vue'\nimport '@composy/breadcrumb-vue/style.css'\n\nconst route = useRoute()\n\nconst { items, refresh, clearCache, replaceLast } = useBreadcrumbRoute({\n  route,\n  includeHome: true,\n  homeItem: { key: 'home', label: 'Home', path: '/' },\n  labelMap: {\n    '/workspace/projects': 'Projects Hub',\n  },\n  excludePatterns: [/\\/internal/],\n  includeQuery: false,\n})\n</script>\n\n<template>\n  <Breadcrumb :items=\"items\" collapse-mode=\"ellipsis\" :max-items=\"4\" />\n</template>\n```\n\nRoute metadata:\n\n```ts\nmeta: {\n  title: 'Release Train',\n  hiddenInBreadcrumb: false,\n  breadcrumb: {\n    label: 'Release Train',\n    icon: 'calendar',\n  },\n  breadcrumbRedirect: '/workspace/releases',\n}\n```\n\n## Manager Composable\n\n```ts\nimport { useBreadcrumb } from '@composy/breadcrumb-vue'\n\nconst breadcrumb = useBreadcrumb({\n  items: [\n    { key: 'workspace', label: 'Workspace', path: '/workspace' },\n  ],\n  showHome: false,\n  enableHistory: true,\n})\n\nbreadcrumb.addItem({\n  key: 'atlas',\n  label: 'Atlas Program',\n  path: '/workspace/atlas',\n})\n\nbreadcrumb.undo()\nbreadcrumb.redo()\n```\n\n## Styling Contract\n\nPublic classes use `ldesign-breadcrumb`:\n\n```text\nldesign-breadcrumb\nldesign-breadcrumb__list\nldesign-breadcrumb__item-wrapper\nldesign-breadcrumb__item\nldesign-breadcrumb__item-link\nldesign-breadcrumb__separator\nldesign-breadcrumb__dropdown\nldesign-breadcrumb--small\nldesign-breadcrumb--medium\nldesign-breadcrumb--large\nldesign-breadcrumb--dense\nldesign-breadcrumb--comfortable\n```\n\nComponent CSS variables use `--ldesign-breadcrumb-*`. Defaults are backed by upstream `--ld-*` tokens from `packages/color` and `packages/size`.\n\n```css\n.workspace-breadcrumb {\n  --ldesign-breadcrumb-link-hover-color: var(--ld-primary-hover);\n  --ldesign-breadcrumb-hover-surface-color: color-mix(in srgb, var(--ld-primary-default) 10%, var(--ld-transparent));\n  --ldesign-breadcrumb-item-height: var(--ld-px-34);\n  --ldesign-breadcrumb-label-max-width: var(--ld-px-280);\n}\n```\n\nStyle helper exports are re-exported from the Vue package:\n\n```ts\nimport {\n  BREADCRUMB_CLASS_PREFIX,\n  breadcrumbClassNames,\n  createBreadcrumbCssVariables,\n} from '@composy/breadcrumb-vue'\n```\n\n## Exports\n\n```ts\nimport { Breadcrumb, LBreadcrumb } from '@composy/breadcrumb-vue'\nimport { BreadcrumbItem } from '@composy/breadcrumb-vue/components'\nimport { useBreadcrumb, useBreadcrumbRoute } from '@composy/breadcrumb-vue/composables'\nimport type { BreadcrumbItem as BreadcrumbItemData } from '@composy/breadcrumb-vue'\n```\n\nBuild outputs:\n\n```text\ndist/\nes/\nesm/\nlib/\n```\n\nThe build also syncs CSS to:\n\n```text\ndist/style.css\nes/style.css\nesm/style.css\nlib/style.css\nes/styles/index.css\nesm/styles/index.css\nlib/styles/index.css\n```\n\n## Development\n\n```bash\npnpm --dir libraries/breadcrumb/packages/vue run type-check\npnpm --dir libraries/breadcrumb/packages/vue run build\n```\n\nAt workspace level:\n\n```bash\npnpm --dir libraries/breadcrumb run type-check\npnpm --dir libraries/breadcrumb run build\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-f38d65aff090f69eb1a720d9ac98b631"}