import { createVNode } from "vue";
import "./styles/anchor-item.scss";
import { makeNamedAnchorItem, useNamedAnchorItem } from "../../composables/named-anchor/index.mjs";
import { Link } from "../link/link.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
const AnchorItem = defineComponent({
  name: "VeAnchorItem",
  props: {
    activeColor: {
      type: String,
      default: "primary"
    },
    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: () => {
          var _a, _b;
          return (_b = (_a = slots.default) == null ? void 0 : _a.call(slots)) != null ? _b : props.text;
        }
      })]);
    };
  }
});
export {
  AnchorItem
};
//# sourceMappingURL=anchor-item.mjs.map
