@nextcloud/vue
Version:
Nextcloud vue components
204 lines (203 loc) • 6.27 kB
JavaScript
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;