@nextcloud/vue
Version:
Nextcloud vue components
211 lines (210 loc) • 6.27 kB
JavaScript
import '../assets/NcListItemIcon-aquns6B7.css';
import "escape-html";
import "striptags";
import { resolveComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, createVNode, createElementVNode, renderSlot, mergeProps, createBlock, createCommentVNode, toDisplayString } from "vue";
import "../composables/useIsDarkTheme/index.mjs";
import "@nextcloud/router";
import "../functions/isDarkTheme/index.mjs";
import "./NcMentionBubble.vue_vue_type_style_index_0_scoped_45238efd_lang-D6LzDiYf.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
import { u as userStatus, N as NcAvatar } from "./NcAvatar-DmUGApWA.mjs";
import { _ as _sfc_main$1 } from "./NcHighlight.vue_vue_type_script_lang-DnWQDM_2.mjs";
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
const margin = 8;
const defaultSize = 32;
const _sfc_main = {
name: "NcListItemIcon",
components: {
NcAvatar,
NcHighlight: _sfc_main$1,
NcIconSvgWrapper
},
mixins: [
userStatus
],
props: {
/**
* Default first line text
*/
name: {
type: String,
required: true
},
/**
* Secondary optional line
* Only visible on size of 32 and above
*/
subname: {
type: String,
default: ""
},
/**
* Icon class to be displayed at the end of the component
*/
icon: {
type: String,
default: ""
},
/**
* SVG icon to be displayed at the end of the component
*/
iconSvg: {
type: String,
default: ""
},
/**
* Descriptive name for the icon
*/
iconName: {
type: String,
default: ""
},
/**
* Search within the highlight of name/subname
*/
search: {
type: String,
default: ""
},
/**
* Set a size in px that will define the avatar height/width
* and therefore, the height of the component
*/
avatarSize: {
type: Number,
default: defaultSize
},
/**
* Disable the margins of this component.
* Useful for integration in `NcSelect` for example
*/
noMargin: {
type: Boolean,
default: false
},
/**
* See the [Avatar](#Avatar) displayName prop
* Fallback to name
*/
displayName: {
type: String,
default: null
},
/**
* See the [Avatar](#Avatar) isNoUser prop
* Enable/disable the UserStatus fetching
*/
isNoUser: {
type: Boolean,
default: false
},
/**
* Unique list item ID
*/
id: {
type: String,
default: null
}
},
setup() {
return {
margin,
defaultSize
};
},
computed: {
hasIcon() {
return this.icon !== "";
},
hasIconSvg() {
return this.iconSvg !== "";
},
isValidSubname() {
return this.subname?.trim?.() !== "";
},
isSizeBigEnough() {
return this.avatarSize >= 26;
},
cssVars() {
const margin2 = this.noMargin ? 0 : this.margin;
return {
"--height": this.avatarSize + 2 * margin2 + "px",
"--margin": this.margin + "px"
};
},
/**
* Separates the search property into two parts, the first one is the search part on the name, the second on the subname.
*
* @return {[string, string]}
*/
searchParts() {
const EMAIL_NOTATION = /^([^<]*)<([^>]+)>?$/;
const match = this.search.match(EMAIL_NOTATION);
if (this.isNoUser || !match) {
return [this.search, this.search];
}
return [match[1].trim(), match[2]];
}
},
beforeMount() {
if (!this.isNoUser && !this.subname) {
this.fetchUserStatus(this.user);
}
}
};
const _hoisted_1 = ["id"];
const _hoisted_2 = { class: "option__details" };
const _hoisted_3 = { key: 1 };
const _hoisted_4 = ["aria-label"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_NcAvatar = resolveComponent("NcAvatar");
const _component_NcHighlight = resolveComponent("NcHighlight");
const _component_NcIconSvgWrapper = resolveComponent("NcIconSvgWrapper");
return openBlock(), createElementBlock("span", {
id: $props.id,
class: normalizeClass(["option", { "option--compact": $props.avatarSize < $setup.defaultSize }]),
style: normalizeStyle($options.cssVars)
}, [
createVNode(_component_NcAvatar, mergeProps(_ctx.$attrs, {
"disable-menu": true,
"disable-tooltip": true,
"display-name": $props.displayName || $props.name,
"is-no-user": $props.isNoUser,
size: $props.avatarSize,
class: "option__avatar"
}), null, 16, ["display-name", "is-no-user", "size"]),
createElementVNode("div", _hoisted_2, [
createVNode(_component_NcHighlight, {
class: "option__lineone",
text: $props.name,
search: $options.searchParts[0]
}, null, 8, ["text", "search"]),
$options.isValidSubname && $options.isSizeBigEnough ? (openBlock(), createBlock(_component_NcHighlight, {
key: 0,
class: "option__linetwo",
text: $props.subname,
search: $options.searchParts[1]
}, null, 8, ["text", "search"])) : _ctx.hasStatus ? (openBlock(), createElementBlock("span", _hoisted_3, [
createElementVNode("span", null, toDisplayString(_ctx.userStatus.icon), 1),
createElementVNode("span", null, toDisplayString(_ctx.userStatus.message), 1)
])) : createCommentVNode("", true)
]),
renderSlot(_ctx.$slots, "default", {}, () => [
$options.hasIconSvg ? (openBlock(), createBlock(_component_NcIconSvgWrapper, {
key: 0,
class: "option__icon",
svg: $props.iconSvg,
name: $props.iconName
}, null, 8, ["svg", "name"])) : $options.hasIcon ? (openBlock(), createElementBlock("span", {
key: 1,
class: normalizeClass(["icon option__icon", $props.icon]),
"aria-label": $props.iconName
}, null, 10, _hoisted_4)) : createCommentVNode("", true)
], true)
], 14, _hoisted_1);
}
const NcListItemIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-60a83836"]]);
export {
NcListItemIcon as N
};
//# sourceMappingURL=NcListItemIcon-8fWhyS_R.mjs.map