sigma-ui/__generated/registry-schemes/style-system/tailwind/breadcrumb.json

CLI for SIGMA-UI components.

{
  "name": "breadcrumb",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Breadcrumb.vue",
      "content": "<script lang=\"ts\" setup>\n\n</script>\n\n<template>\n  <nav\n    aria-label=\"breadcrumb\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </nav>\n</template>\n"
    },
    {
      "name": "BreadcrumbEllipsis.vue",
      "content": "<script lang=\"ts\" setup>\nimport { MoreHorizontalIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('flex items-center justify-center', $attrs.class ?? '')\"\n  >\n    <slot>\n      <MoreHorizontalIcon class=\"h-4 w-4\" />\n    </slot>\n    <span class=\"sr-only\">More</span>\n  </span>\n</template>\n"
    },
    {
      "name": "BreadcrumbGenerator.vue",
      "content": "<script lang=\"ts\" setup>\nimport type { Component } from 'vue';\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport {\n  Breadcrumb,\n  BreadcrumbItem as BreadcrumbItemComponent,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '.';\n\nexport interface BreadcrumbItem {\n  label?: string;\n  icon?: string | Component;\n  url?: string;\n  route?: any;\n  target?: string;\n  active?: boolean;\n}\n\ninterface ActionProps {\n\n  'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean;\n}\n\nconst props = defineProps<{\n  home?: BreadcrumbItem;\n  model?: BreadcrumbItem[];\n}>();\n\nfunction getActionProps(item: BreadcrumbItem, isLast: boolean): ActionProps {\n  const isActive = item.active || isLast;\n  return {\n    'class': `cursor-pointer flex items-center ${isActive ? 'text-foreground font-medium' : 'text-muted-foreground'}`,\n    'aria-current': isActive ? 'page' : undefined,\n  };\n}\n</script>\n\n<template>\n  <Breadcrumb :class=\"$attrs.class\">\n    <BreadcrumbList>\n      <BreadcrumbItemComponent v-if=\"home\">\n        <slot\n          name=\"home\"\n          :item=\"home\"\n          :props=\"{ action: getActionProps(home, false) }\"\n        >\n          <BreadcrumbLink\n            v-if=\"home.route\"\n            :to=\"home.route\"\n            class=\"flex items-center gap-2\"\n            v-bind=\"getActionProps(home, false)\"\n          >\n            <component\n              :is=\"home.icon\"\n              v-if=\"home.icon\"\n              class=\"h-4 w-4\"\n            />\n            <span>{{ home.label }}</span>\n          </BreadcrumbLink>\n          <BreadcrumbLink\n            v-else-if=\"home.url\"\n            :href=\"home.url\"\n            :target=\"home.target\"\n            class=\"flex items-center gap-2\"\n            v-bind=\"getActionProps(home, false)\"\n          >\n            <component\n              :is=\"home.icon\"\n              v-if=\"home.icon\"\n              class=\"h-4 w-4\"\n            />\n            <span v-if=\"home.label\">{{ home.label }}</span>\n          </BreadcrumbLink>\n        </slot>\n      </BreadcrumbItemComponent>\n\n      <BreadcrumbSeparator v-if=\"home && model?.length\">\n        <slot name=\"separator\">\n          <ChevronRightIcon />\n        </slot>\n      </BreadcrumbSeparator>\n\n      <template\n        v-for=\"(item, index) in (model || [])\"\n        :key=\"index\"\n      >\n        <BreadcrumbItemComponent>\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :props=\"{ action: getActionProps(item, index === (model?.length || 0) - 1) }\"\n          >\n            <BreadcrumbLink\n              v-if=\"item.route\"\n              :to=\"item.route\"\n              class=\"flex items-center gap-2\"\n              v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n            >\n              <component\n                :is=\"item.icon\"\n                v-if=\"item.icon\"\n                class=\"h-4 w-4\"\n              />\n              <span>{{ item.label }}</span>\n            </BreadcrumbLink>\n            <BreadcrumbLink\n              v-else-if=\"item.url\"\n              :href=\"item.url\"\n              :target=\"item.target\"\n              class=\"flex items-center gap-2\"\n              v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n            >\n              <component\n                :is=\"item.icon\"\n                v-if=\"item.icon\"\n                class=\"h-4 w-4\"\n              />\n              <span>{{ item.label }}</span>\n            </BreadcrumbLink>\n            <BreadcrumbPage\n              v-else\n              v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n            >\n              <div class=\"flex items-center gap-2\">\n                <component\n                  :is=\"item.icon\"\n                  v-if=\"item.icon\"\n                  class=\"h-4 w-4\"\n                />\n                <span>{{ item.label }}</span>\n              </div>\n            </BreadcrumbPage>\n          </slot>\n        </BreadcrumbItemComponent>\n\n        <BreadcrumbSeparator v-if=\"index < (model?.length || 0) - 1\">\n          <slot name=\"separator\">\n            <ChevronRightIcon />\n          </slot>\n        </BreadcrumbSeparator>\n      </template>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n"
    },
    {
      "name": "BreadcrumbItem.vue",
      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <li\n    :class=\"cn('inline-flex items-center gap-1.5', $attrs.class ?? '')\"\n  >\n    <slot />\n  </li>\n</template>\n"
    },
    {
      "name": "BreadcrumbLink.vue",
      "content": "<script lang=\"ts\" setup>\nimport { Primitive, type PrimitiveProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = withDefaults(defineProps<PrimitiveProps>(), {\n  as: 'a',\n});\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"cn('transition-colors hover:text-foreground', $attrs.class ?? '')\"\n  >\n    <slot />\n  </Primitive>\n</template>\n"
    },
    {
      "name": "BreadcrumbList.vue",
      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <ol\n    :class=\"cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', $attrs.class ?? '')\"\n  >\n    <slot />\n  </ol>\n</template>\n"
    },
    {
      "name": "BreadcrumbPage.vue",
      "content": "<script lang=\"ts\" setup>\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    :class=\"cn('font-normal text-foreground', $attrs.class ?? '')\"\n  >\n    <slot />\n  </span>\n</template>\n"
    },
    {
      "name": "BreadcrumbSeparator.vue",
      "content": "<script lang=\"ts\" setup>\nimport { ChevronRightIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    :class=\"cn('[&>svg]:size-3.5', $attrs.class ?? '')\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </li>\n</template>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as Breadcrumb } from './Breadcrumb.vue';\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue';\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue';\nexport { default as BreadcrumbList } from './BreadcrumbList.vue';\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue';\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';\nexport { default as BreadcrumbGenerator } from './BreadcrumbGenerator.vue';\n"
    }
  ],
  "type": "components:ui"
}