sigma-ui/__generated/registry-schemes/style-system/css/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';\n\n</script>\n\n<template>\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    class=\"sigma-ui-breadcrumb__ellipsis\"\n    :class=\"$attrs.class\"\n  >\n    <slot>\n      <MoreHorizontalIcon class=\"sigma-ui-breadcrumb__ellipsis-icon\" />\n    </slot>\n  </span>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__ellipsis {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-breadcrumb__ellipsis-icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\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': `sigma-ui-breadcrumb__action ${isActive ? 'sigma-ui-breadcrumb__action--active' : ''}`,\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=\"sigma-ui-breadcrumb__link\"\n            v-bind=\"getActionProps(home, false)\"\n          >\n            <component\n              :is=\"home.icon\"\n              v-if=\"home.icon\"\n              class=\"sigma-ui-breadcrumb__icon\"\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=\"sigma-ui-breadcrumb__link\"\n            v-bind=\"getActionProps(home, false)\"\n          >\n            <component\n              :is=\"home.icon\"\n              v-if=\"home.icon\"\n              class=\"sigma-ui-breadcrumb__icon\"\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=\"sigma-ui-breadcrumb__link\"\n              v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n            >\n              <component\n                :is=\"item.icon\"\n                v-if=\"item.icon\"\n                class=\"sigma-ui-breadcrumb__icon\"\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=\"sigma-ui-breadcrumb__link\"\n              v-bind=\"getActionProps(item, index === (model?.length || 0) - 1)\"\n            >\n              <component\n                :is=\"item.icon\"\n                v-if=\"item.icon\"\n                class=\"sigma-ui-breadcrumb__icon\"\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=\"sigma-ui-breadcrumb__content\">\n                <component\n                  :is=\"item.icon\"\n                  v-if=\"item.icon\"\n                  class=\"sigma-ui-breadcrumb__icon\"\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\n<style>\n.sigma-ui-breadcrumb__action {\n  display: flex;\n  align-items: center;\n  color: hsl(var(--muted-foreground));\n  cursor: pointer;\n}\n\n.sigma-ui-breadcrumb__action--active {\n  color: hsl(var(--foreground));\n  font-weight: 500;\n}\n\n.sigma-ui-breadcrumb__link {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.sigma-ui-breadcrumb__content {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.sigma-ui-breadcrumb__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
    },
    {
      "name": "BreadcrumbItem.vue",
      "content": "<script lang=\"ts\" setup>\n\n</script>\n\n<template>\n  <li\n    class=\"sigma-ui-breadcrumb__item\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </li>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__item {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n}\n</style>\n"
    },
    {
      "name": "BreadcrumbLink.vue",
      "content": "<script lang=\"ts\" setup>\nimport { Primitive, type PrimitiveProps } from 'reka-ui';\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=\"sigma-ui-breadcrumb__link\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__link {\n  transition-duration: 150ms;\n  transition-property: color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-breadcrumb__link:hover {\n  color: hsl(var(--foreground));\n}\n</style>\n"
    },
    {
      "name": "BreadcrumbList.vue",
      "content": "<script lang=\"ts\" setup>\n\n</script>\n\n<template>\n  <ol\n    class=\"sigma-ui-breadcrumb__list\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </ol>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__list {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.875rem;\n  gap: 0.375rem;\n  overflow-wrap: break-word;\n}\n\n@media (width >= 640px) {\n  .sigma-ui-breadcrumb__list {\n    gap: 0.625rem;\n  }\n}\n</style>\n"
    },
    {
      "name": "BreadcrumbPage.vue",
      "content": "<script lang=\"ts\" setup>\n\n</script>\n\n<template>\n  <span\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    class=\"sigma-ui-breadcrumb__page\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__page {\n  color: hsl(var(--foreground));\n  font-weight: normal;\n}\n</style>\n"
    },
    {
      "name": "BreadcrumbSeparator.vue",
      "content": "<script lang=\"ts\" setup>\nimport { ChevronRightIcon } from 'lucide-vue-next';\n\n</script>\n\n<template>\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    class=\"sigma-ui-breadcrumb__separator\"\n    :class=\"$attrs.class\"\n  >\n    <slot>\n      <ChevronRightIcon />\n    </slot>\n  </li>\n</template>\n\n<style>\n.sigma-ui-breadcrumb__separator > svg {\n  width: 0.875rem;\n  height: 0.875rem;\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as Breadcrumb } from './Breadcrumb.vue';\nexport { default as BreadcrumbList } from './BreadcrumbList.vue';\nexport { default as BreadcrumbItem } from './BreadcrumbItem.vue';\nexport { default as BreadcrumbLink } from './BreadcrumbLink.vue';\nexport { default as BreadcrumbPage } from './BreadcrumbPage.vue';\nexport { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';\nexport { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';\nexport { default as BreadcrumbGenerator } from './BreadcrumbGenerator.vue';\n"
    }
  ],
  "type": "components:ui"
}