require('../assets/NcBreadcrumb-Cjcyeimd.css');
"use strict";
const NcActions = require("./NcActions-DTICeoTz.cjs");
const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
const Components_NcButton = require("../Components/NcButton.cjs");
const ChevronRight = require("./ChevronRight-ZCKVg9OI.cjs");
const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
const _sfc_main = {
  name: "NcBreadcrumb",
  components: {
    NcActions: NcActions.NcActions,
    ChevronRight: ChevronRight.ChevronRight,
    NcButton: Components_NcButton
  },
  inheritAttrs: false,
  props: {
    /**
     * The main text content of the entry.
     */
    name: {
      type: String,
      required: true
    },
    /**
     * The title attribute of the element.
     */
    title: {
      type: String,
      default: null
    },
    /**
     * Route Location the link should navigate to when clicked on.
     *
     * @see https://v3.router.vuejs.org/api/#to
     */
    to: {
      type: [String, Object],
      default: void 0
    },
    /**
     * Match the complete route attributes (query and hash included)
     *
     * @see https://v3.router.vuejs.org/api/#exact
     */
    exact: {
      type: Boolean,
      default: false
    },
    /**
     * Set this prop if your app doesn't use vue-router, breadcrumbs will show as normal links.
     */
    href: {
      type: String,
      default: void 0
    },
    /**
     * Set a css icon-class to show an icon along name text (if forceIconText is provided, otherwise just icon).
     */
    icon: {
      type: String,
      default: ""
    },
    /**
     * Enables text to accompany the icon, if the icon was provided. The text that will be displayed is the name prop.
     */
    forceIconText: {
      type: Boolean,
      default: false
    },
    /**
     * Disable dropping on this breadcrumb.
     */
    disableDrop: {
      type: Boolean,
      default: false
    },
    /**
     * Force the actions to display in a three dot menu
     */
    forceMenu: {
      type: Boolean,
      default: false
    },
    /**
     * Open state of the Actions menu
     */
    open: {
      type: Boolean,
      default: false
    }
  },
  emits: [
    "update:open",
    "dropped"
  ],
  data() {
    return {
      /**
       * Variable to track if we hover over the breadcrumb
       */
      hovering: false,
      /**
       * The unique id of the breadcrumb. Necessary to append the
       * Actions menu to the correct crumb.
       */
      crumbId: `crumb-id-${GenRandomId.GenRandomId()}`
    };
  },
  computed: {
    /**
     * The attributes to pass to `router-link` or `a`
     */
    linkAttributes() {
      return this.to ? { to: this.to, exact: this.exact, ...this.$attrs } : this.href ? { href: this.href, ...this.$attrs } : this.$attrs;
    }
  },
  methods: {
    /**
     * Function to handle changing the open state of the Actions menu
     * $emit the open state.
     *
     * @param {boolean} open The open state of the Actions menu
     */
    onOpenChange(open) {
      this.$emit("update:open", open);
    },
    /**
     * Function to handle a drop on the breadcrumb.
     * $emit the event and the path, remove the hovering state.
     *
     * @param {object} e The drop event
     * @return {boolean}
     */
    dropped(e) {
      if (this.disableDrop) {
        return false;
      }
      this.$emit("dropped", e, this.to || this.href);
      this.$parent.$emit("dropped", e, this.to || this.href);
      this.hovering = false;
      return false;
    },
    /**
     * Add the hovering state on drag enter
     *
     * @param {object} e The drag enter event
     */
    dragEnter(e) {
      if (this.disableDrop) {
        return;
      }
      this.hovering = true;
    },
    /**
     * Remove the hovering state on drag leave
     *
     * @param {object} e The drag leave event
     */
    dragLeave(e) {
      if (this.disableDrop) {
        return;
      }
      if (e.target.contains(e.relatedTarget) || this.$refs.crumb.contains(e.relatedTarget)) {
        return;
      }
      this.hovering = false;
    }
  }
};
var _sfc_render = function render() {
  var _vm = this, _c = _vm._self._c;
  return _c("li", _vm._b({ ref: "crumb", staticClass: "vue-crumb", class: { "vue-crumb--hovered": _vm.hovering }, attrs: { "draggable": "false" }, on: { "dragstart": function($event) {
    $event.preventDefault();
    return (() => {
    }).apply(null, arguments);
  }, "drop": function($event) {
    $event.preventDefault();
    return _vm.dropped.apply(null, arguments);
  }, "dragover": function($event) {
    $event.preventDefault();
    return (() => {
    }).apply(null, arguments);
  }, "dragenter": _vm.dragEnter, "dragleave": _vm.dragLeave } }, "li", _vm._d({}, [_vm.crumbId, ""])), [(_vm.name || _vm.icon || _vm.$slots.icon) && !_vm.$slots.default ? _c("NcButton", _vm._g(_vm._b({ attrs: { "title": _vm.title, "aria-label": _vm.icon ? _vm.name : void 0, "type": "tertiary" }, scopedSlots: _vm._u([_vm.$slots.icon || _vm.icon ? { key: "icon", fn: function() {
    return [_vm._t("icon", function() {
      return [_c("span", { staticClass: "icon", class: _vm.icon })];
    })];
  }, proxy: true } : null, !(_vm.$slots.icon || _vm.icon) || _vm.forceIconText ? { key: "default", fn: function() {
    return [_vm._v(" " + _vm._s(_vm.name) + " ")];
  }, proxy: true } : null], null, true) }, "NcButton", _vm.linkAttributes, false), _vm.$listeners)) : _vm._e(), _vm.$slots.default ? _c("NcActions", { ref: "actions", attrs: { "type": "tertiary", "force-menu": _vm.forceMenu, "open": _vm.open, "menu-name": _vm.name, "title": _vm.title, "force-name": true, "container": `.vue-crumb[${_vm.crumbId}]` }, on: { "update:open": _vm.onOpenChange }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
    return [_vm._t("menu-icon")];
  }, proxy: true }], null, true) }, [_vm._t("default")], 2) : _vm._e(), _c("ChevronRight", { staticClass: "vue-crumb__separator", attrs: { "size": 20 } })], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
  _sfc_main,
  _sfc_render,
  _sfc_staticRenderFns,
  false,
  null,
  "cfe13af3"
);
const NcBreadcrumb = __component__.exports;
exports.NcBreadcrumb = NcBreadcrumb;