@nextcloud/vue
Version:
Nextcloud vue components
292 lines (291 loc) • 9.82 kB
JavaScript
import '../assets/NcListItem-D-8LyMsI.css';
import { N as NcActions } from "./NcActions-BgYpDq2n.mjs";
import { N as NcCounterBubble } from "./NcCounterBubble-D1QC3eP1.mjs";
import NcVNodes from "../Components/NcVNodes.mjs";
import { r as register, i as t5, a as t } from "./_l10n-JYjUKekn.mjs";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
register(t5);
const _sfc_main = {
name: "NcListItem",
components: {
NcActions,
NcCounterBubble,
NcVNodes
},
props: {
/**
* The details text displayed in the upper right part of the component
*/
details: {
type: String,
default: ""
},
/**
* Name (first line of text)
*/
name: {
type: String,
required: true
},
/**
* Pass in `true` if you want the matching behavior to
* be non-inclusive: https://router.vuejs.org/api/#exact
*/
exact: {
type: Boolean,
default: false
},
/**
* The route for the router link.
*/
to: {
type: [String, Object],
default: null
},
/**
* The value for the external link
*/
href: {
type: String,
default: "#"
},
target: {
type: String,
default: ""
},
/**
* Id for the `<a>` element
*/
anchorId: {
type: String,
default: ""
},
/**
* Make subname bold
*/
bold: {
type: Boolean,
default: false
},
/**
* Show the NcListItem in compact design
*/
compact: {
type: Boolean,
default: false
},
/**
* Toggle the active state of the component
*/
active: {
type: Boolean,
default: false
},
/**
* Aria label for the wrapper element
*/
linkAriaLabel: {
type: String,
default: ""
},
/**
* Aria label for the actions toggle
*/
actionsAriaLabel: {
type: String,
default: ""
},
/**
* If different from 0 this component will display the
* NcCounterBubble component
*/
counterNumber: {
type: [Number, String],
default: 0
},
/**
* Outlined or highlighted state of the counter
*/
counterType: {
type: String,
default: "",
validator(value) {
return ["highlighted", "outlined", ""].indexOf(value) !== -1;
}
},
/**
* To be used only when the elements in the actions menu are very important
*/
forceDisplayActions: {
type: Boolean,
default: false
},
/**
* Force the actions to display in a three dot menu
*/
forceMenu: {
type: Boolean,
default: false
},
/**
* Show the list component layout
*/
oneLine: {
type: Boolean,
default: false
}
},
emits: [
"click",
"update:menuOpen"
],
setup() {
var _a, _b;
const [major] = (_b = (_a = window._oc_config) == null ? void 0 : _a.version.split(".", 2)) != null ? _b : [];
const isLegacy = major && Number.parseInt(major) < 30;
return {
isLegacy
};
},
data() {
return {
hovered: false,
hasActions: false,
hasSubname: false,
displayActionsOnHoverFocus: false,
menuOpen: false,
hasIndicator: false,
hasDetails: false
};
},
computed: {
showAdditionalElements() {
return !this.displayActionsOnHoverFocus || this.forceDisplayActions;
},
showDetails() {
return (this.details !== "" || this.hasDetails) && (!this.displayActionsOnHoverFocus || this.forceDisplayActions);
},
computedActionsAriaLabel() {
return this.actionsAriaLabel || t('Actions for item with name "{name}"', { name: this.name });
}
},
watch: {
menuOpen(newValue) {
if (!newValue && !this.hovered) {
this.displayActionsOnHoverFocus = false;
}
}
},
mounted() {
this.checkSlots();
},
updated() {
this.checkSlots();
},
methods: {
/**
* Handle link click
*
* @param {MouseEvent|KeyboardEvent} event - Native click or keydown event
* @param {Function} [navigate] - VueRouter link's navigate if any
* @param {string} [routerLinkHref] - VueRouter link's href
*/
onClick(event, navigate, routerLinkHref) {
this.$emit("click", event);
if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {
return;
}
if (routerLinkHref) {
navigate == null ? void 0 : navigate(event);
event.preventDefault();
}
},
showActions() {
if (this.hasActions) {
this.displayActionsOnHoverFocus = true;
}
this.hovered = false;
},
hideActions() {
this.displayActionsOnHoverFocus = false;
},
/**
* @param {FocusEvent} event UI event
*/
handleBlur(event) {
if (this.menuOpen) {
return;
}
if (this.$refs["list-item"].contains(event.relatedTarget)) {
return;
}
this.hideActions();
},
/**
* Hide the actions on mouseleave unless the menu is open
*/
handleMouseleave() {
if (!this.menuOpen) {
this.displayActionsOnHoverFocus = false;
}
this.hovered = false;
},
handleMouseover() {
this.showActions();
this.hovered = true;
},
handleActionsUpdateOpen(e) {
this.menuOpen = e;
this.$emit("update:menuOpen", e);
},
// Check if subname and actions slots are populated
checkSlots() {
if (this.hasActions !== !!this.$slots.actions) {
this.hasActions = !!this.$slots.actions;
}
if (this.hasSubname !== !!this.$slots.subname) {
this.hasSubname = !!this.$slots.subname;
}
if (this.hasIndicator !== !!this.$slots.indicator) {
this.hasIndicator = !!this.$slots.indicator;
}
if (this.hasDetails !== !!this.$slots.details) {
this.hasDetails = !!this.$slots.details;
}
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c(_vm.to ? "router-link" : "NcVNodes", { tag: "component", attrs: { "custom": _vm.to ? true : null, "to": _vm.to, "exact": _vm.to ? _vm.exact : null }, scopedSlots: _vm._u([{ key: "default", fn: function({ href: routerLinkHref, navigate, isActive }) {
return [_c("li", { staticClass: "list-item__wrapper", class: { "list-item__wrapper--active": isActive || _vm.active } }, [_c("div", { ref: "list-item", staticClass: "list-item", class: {
"list-item--compact": _vm.compact,
"list-item--legacy": _vm.isLegacy,
"list-item--one-line": _vm.oneLine
}, on: { "mouseover": _vm.handleMouseover, "mouseleave": _vm.handleMouseleave } }, [_c("a", { staticClass: "list-item__anchor", attrs: { "id": _vm.anchorId || void 0, "aria-label": _vm.linkAriaLabel, "href": routerLinkHref || _vm.href, "target": _vm.target || (_vm.href === "#" ? void 0 : "_blank"), "rel": _vm.href === "#" ? void 0 : "noopener noreferrer" }, on: { "focus": _vm.showActions, "focusout": _vm.handleBlur, "click": function($event) {
return _vm.onClick($event, navigate, routerLinkHref);
}, "keydown": function($event) {
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) return null;
return _vm.hideActions.apply(null, arguments);
} } }, [_vm._t("icon"), _c("div", { staticClass: "list-item-content" }, [_c("div", { staticClass: "list-item-content__main" }, [_c("div", { staticClass: "list-item-content__name" }, [_vm._t("name", function() {
return [_vm._v(_vm._s(_vm.name))];
})], 2), _vm.hasSubname ? _c("div", { staticClass: "list-item-content__subname", class: { "list-item-content__subname--bold": _vm.bold } }, [_vm._t("subname")], 2) : _vm._e()]), _c("div", { staticClass: "list-item-content__details" }, [_vm.showDetails ? _c("div", { staticClass: "list-item-details__details" }, [_vm._t("details", function() {
return [_vm._v(_vm._s(_vm.details))];
})], 2) : _vm._e(), _vm.counterNumber || _vm.hasIndicator ? _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.showAdditionalElements, expression: "showAdditionalElements" }], staticClass: "list-item-details__extra" }, [_vm.counterNumber ? _c("NcCounterBubble", { staticClass: "list-item-details__counter", attrs: { "active": isActive || _vm.active, "type": _vm.counterType } }, [_vm._v(" " + _vm._s(_vm.counterNumber) + " ")]) : _vm._e(), _vm.hasIndicator ? _c("span", { staticClass: "list-item-details__indicator" }, [_vm._t("indicator")], 2) : _vm._e()], 1) : _vm._e()])])], 2), _vm.$slots["extra-actions"] ? _c("div", { staticClass: "list-item-content__extra-actions" }, [_vm._t("extra-actions")], 2) : _vm._e(), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.forceDisplayActions || _vm.displayActionsOnHoverFocus, expression: "forceDisplayActions || displayActionsOnHoverFocus" }], staticClass: "list-item-content__actions", on: { "focusout": _vm.handleBlur } }, [_c("NcActions", { ref: "actions", attrs: { "primary": isActive || _vm.active, "force-menu": _vm.forceMenu, "aria-label": _vm.computedActionsAriaLabel }, on: { "update:open": _vm.handleActionsUpdateOpen }, scopedSlots: _vm._u([_vm.$slots["actions-icon"] ? { key: "icon", fn: function() {
return [_vm._t("actions-icon")];
}, proxy: true } : null], null, true) }, [_vm._t("actions")], 2)], 1), _vm.$slots.extra ? _c("div", { staticClass: "list-item__extra" }, [_vm._t("extra")], 2) : _vm._e()])])];
} }], null, true) });
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"1f0837cf"
);
const NcListItem = __component__.exports;
export {
NcListItem as N
};