<script setup>
import { provide, toRefs, useSlots, computed, h, Fragment } from "vue";
import { useNamespace, useLocale } from "@yh-ui/hooks";
import { useComponentTheme } from "@yh-ui/theme";
import { breadcrumbProps } from "./breadcrumb";
defineOptions({
  name: "YhBreadcrumb"
});
const props = defineProps(breadcrumbProps);
const ns = useNamespace("breadcrumb");
const { t } = useLocale();
const slots = useSlots();
const { themeStyle } = useComponentTheme(
  "breadcrumb",
  computed(() => props.themeOverrides)
);
provide("breadcrumbProps", toRefs(props));
const breadcrumbItems = computed(() => {
  const children = slots.default?.() || [];
  const items = children.flatMap((child) => {
    if (child.type === Fragment) return child.children || [];
    return [child];
  });
  if (props.maxItems <= 0 || items.length <= props.maxItems) {
    return items;
  }
  const first = items[0];
  const ellipsisItem = h("span", { class: ns.e("ellipsis"), title: t("breadcrumb.more") }, "...");
  const result = [first, ellipsisItem, ...items.slice(items.length - (props.maxItems - 1))];
  return result;
});
</script>

<template>
  <div :class="ns.b()" :style="themeStyle" role="navigation" :aria-label="t('breadcrumb.label')">
    <component :is="item" v-for="(item, index) in breadcrumbItems" :key="index" />
  </div>
</template>

<style>
@charset "UTF-8";
/**
 * YH-UI Sass Variables
 * 原具体的 CSS 变量输出规则 (:root, html.dark 等) 已移至 root.scss，以防止各组件样式编译时产生重复的全局变量 CSS 冗余。
 */
.yh-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: normal;
  color: var(--yh-text-color-regular);
}
.yh-breadcrumb__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  cursor: pointer;
  color: var(--yh-text-color-placeholder);
  transition: color 0.2s;
}
.yh-breadcrumb__ellipsis:hover {
  color: var(--yh-color-primary);
}

.yh-breadcrumb {
  /* 最后一个子项隐藏分隔符 */
}
.yh-breadcrumb > span:last-child .yh-breadcrumb-item__separator {
  display: none;
}
.yh-breadcrumb > span:last-child .yh-breadcrumb-item__link {
  color: var(--yh-text-color-primary);
  font-weight: 500;
  cursor: default;
}
.yh-breadcrumb > span:last-child .yh-breadcrumb-item__link:hover {
  color: var(--yh-text-color-primary);
}

.yh-breadcrumb-item {
  display: inline-flex;
  align-items: center;
}
.yh-breadcrumb-item__link {
  transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  color: var(--yh-text-color-regular);
  cursor: default;
}
.yh-breadcrumb-item__link.is-link {
  font-weight: 500;
  cursor: pointer;
}
.yh-breadcrumb-item__link.is-link:hover {
  color: var(--yh-color-primary);
}

.yh-breadcrumb-item__separator {
  margin: 0 8px;
  color: var(--yh-text-color-placeholder);
  display: inline-flex;
  align-items: center;
}
.yh-breadcrumb-item__separator svg {
  width: 1em;
  height: 1em;
}
</style>
