import { createVNode as _createVNode } from "vue";
import "./styles/anchor-item.css";
import { defineComponent } from "../../utils";
import { Link } from "../link";
import { makeNamedAnchorItem, useNamedAnchorItem } from "../../composables/named-anchor";
const AnchorItem = defineComponent({
  name: "VeAnchorItem",
  props: {
    /**
     * @zh 激活时的颜色
     */
    activeColor: {
      type: String,
      default: "primary"
    },
    /**
     * @zh 文本
     */
    text: String,
    ...makeNamedAnchorItem()
  },
  setup(props, {
    slots
  }) {
    const {
      to,
      activate,
      isActive
    } = useNamedAnchorItem(props);
    return () => {
      return _createVNode("li", {
        "class": ["ve-anchor-item", {
          "ve-anchor-item--active": isActive.value
        }]
      }, [_createVNode(Link, {
        "to": to.value,
        "underline": false,
        "color": isActive.value ? props.activeColor : void 0,
        "onClick": (e) => {
          e.preventDefault();
          e.stopPropagation();
          activate(props.value);
        }
      }, {
        ...slots,
        default: () => {
          return slots.default?.() ?? props.text;
        }
      })]);
    };
  }
});
export {
  AnchorItem
};
//# sourceMappingURL=anchor-item.mjs.map
