@nextcloud/vue/dist/chunks/NcListItemIcon-8fWhyS_R.mjs.map

Nextcloud vue components

{"version":3,"file":"NcListItemIcon-8fWhyS_R.mjs","sources":["../../src/components/NcListItemIcon/NcListItemIcon.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n## This is used to display a avatar-name/subname + icon layout\nIt might be used for list rendering or within the multiselect for example\n\n> **Note:** Any binding will be forwarded on the Avatar component root\n\n```vue\n<NcListItemIcon name=\"User 1\" />\n<NcListItemIcon name=\"User 1\" subname=\"Hidden subname because size is too small\" :avatar-size=\"24\" />\n```\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"User 1\" :avatar-size=\"44\">\n\t\t\t<IconAccountOutline :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport IconAccountOutline from 'vue-material-design-icons/AccountOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconAccountOutline,\n\t\t},\n\t}\n\t</script>\n```\n\n### With icon\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Group 1\" subname=\"13 members\" :is-no-user=\"true\">\n\t\t\t<IconAccountMultipleOutline :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconAccountMultipleOutline,\n\t\t},\n\t}\n\t</script>\n```\n\n### Searching\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Testing admin\" subname=\"testme@example.com\" search=\"test\" />\n\t\t<NcListItemIcon name=\"Test group 2\" subname=\"loremipsum@domain.com\" :is-no-user=\"true\" search=\"test\">\n\t\t\t<IconAccountMultipleOutline :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport IconAccountMultipleOutline from 'vue-material-design-icons/AccountMultipleOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconAccountMultipleOutline,\n\t\t},\n\t}\n\t</script>\n```\n\n### With actions\n```vue\n\t<template>\n\t\t<NcListItemIcon name=\"Test user 1\" subname=\"callmetest@domain.com\">\n\t\t\t<NcActions>\n\t\t\t\t<NcActionButton @click=\"alert('Edit')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconPencilOutline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tEdit\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton @click=\"alert('Delete')\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconDeleteOutline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDelete\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport IconDeleteOutline from 'vue-material-design-icons/DeleteOutline.vue'\n\timport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconDeleteOutline,\n\t\t\tIconPencilOutline,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<span\n\t\t:id=\"id\"\n\t\tclass=\"option\"\n\t\t:class=\"{ 'option--compact': avatarSize < defaultSize }\"\n\t\t:style=\"cssVars\">\n\t\t<NcAvatar\n\t\t\tv-bind=\"$attrs\"\n\t\t\t:disable-menu=\"true\"\n\t\t\t:disable-tooltip=\"true\"\n\t\t\t:display-name=\"displayName || name\"\n\t\t\t:is-no-user=\"isNoUser\"\n\t\t\t:size=\"avatarSize\"\n\t\t\tclass=\"option__avatar\" />\n\t\t<div class=\"option__details\">\n\t\t\t<NcHighlight\n\t\t\t\tclass=\"option__lineone\"\n\t\t\t\t:text=\"name\"\n\t\t\t\t:search=\"searchParts[0]\" />\n\t\t\t<NcHighlight\n\t\t\t\tv-if=\"isValidSubname && isSizeBigEnough\"\n\t\t\t\tclass=\"option__linetwo\"\n\t\t\t\t:text=\"subname\"\n\t\t\t\t:search=\"searchParts[1]\" />\n\t\t\t<span v-else-if=\"hasStatus\">\n\t\t\t\t<span>{{ userStatus.icon }}</span>\n\t\t\t\t<span>{{ userStatus.message }}</span>\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- @slot use this slot to add a custom icon or actions -->\n\t\t<slot>\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-if=\"hasIconSvg\"\n\t\t\t\tclass=\"option__icon\"\n\t\t\t\t:svg=\"iconSvg\"\n\t\t\t\t:name=\"iconName\" />\n\t\t\t<span\n\t\t\t\tv-else-if=\"hasIcon\"\n\t\t\t\tclass=\"icon option__icon\"\n\t\t\t\t:class=\"icon\"\n\t\t\t\t:aria-label=\"iconName\" />\n\t\t</slot>\n\t</span>\n</template>\n\n<script>\nimport { userStatus } from '../../mixins/index.js'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcHighlight from '../NcHighlight/index.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\n\n// global margin, ^2 ratio\nconst margin = 8\nconst defaultSize = 32\n\nexport default {\n\tname: 'NcListItemIcon',\n\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcHighlight,\n\t\tNcIconSvgWrapper,\n\t},\n\n\tmixins: [\n\t\tuserStatus,\n\t],\n\n\tprops: {\n\t\t/**\n\t\t * Default first line text\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Secondary optional line\n\t\t * Only visible on size of 32 and above\n\t\t */\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Icon class to be displayed at the end of the component\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * SVG icon to be displayed at the end of the component\n\t\t */\n\t\ticonSvg: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Descriptive name for the icon\n\t\t */\n\t\ticonName: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Search within the highlight of name/subname\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Set a size in px that will define the avatar height/width\n\t\t * and therefore, the height of the component\n\t\t */\n\t\tavatarSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: defaultSize,\n\t\t},\n\n\t\t/**\n\t\t * Disable the margins of this component.\n\t\t * Useful for integration in `NcSelect` for example\n\t\t */\n\t\tnoMargin: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) displayName prop\n\t\t * Fallback to name\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * See the [Avatar](#Avatar) isNoUser prop\n\t\t * Enable/disable the UserStatus fetching\n\t\t */\n\t\tisNoUser: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Unique list item ID\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\tsetup() {\n\t\treturn {\n\t\t\tmargin,\n\t\t\tdefaultSize,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\thasIcon() {\n\t\t\treturn this.icon !== ''\n\t\t},\n\n\t\thasIconSvg() {\n\t\t\treturn this.iconSvg !== ''\n\t\t},\n\n\t\tisValidSubname() {\n\t\t\treturn this.subname?.trim?.() !== ''\n\t\t},\n\n\t\tisSizeBigEnough() {\n\t\t\treturn this.avatarSize >= 26 // the font sizes\n\t\t},\n\n\t\tcssVars() {\n\t\t\t// Don't use margin to calculate the height if noMargin\n\t\t\tconst margin = this.noMargin ? 0 : this.margin\n\n\t\t\treturn {\n\t\t\t\t'--height': this.avatarSize + 2 * margin + 'px',\n\t\t\t\t'--margin': this.margin + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Separates the search property into two parts, the first one is the search part on the name, the second on the subname.\n\t\t *\n\t\t * @return {[string, string]}\n\t\t */\n\t\tsearchParts() {\n\t\t\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\t\t\tconst EMAIL_NOTATION = /^([^<]*)<([^>]+)>?$/\n\n\t\t\tconst match = this.search.match(EMAIL_NOTATION)\n\t\t\tif (this.isNoUser || !match) {\n\t\t\t\treturn [this.search, this.search]\n\t\t\t}\n\t\t\treturn [match[1].trim(), match[2]]\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\t// If we don't have a subname and if this is a user\n\t\tif (!this.isNoUser && !this.subname) {\n\t\t\tthis.fetchUserStatus(this.user)\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.option {\n\tdisplay: flex;\n\talign-items: center;\n\twidth: 100%;\n\theight: var(--height);\n\tcursor: inherit;\n\n\t&__avatar {\n\t\tmargin-inline-end: var(--margin);\n\t}\n\n\t&__details {\n\t\tdisplay: flex;\n\t\tflex: 1 1;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\tmin-width: 0;\n\t}\n\n\t&__lineone {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t&__linetwo {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t&__lineone,\n\t&__linetwo {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\tline-height: 1.2;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&--compact {\n\t\t.option {\n\t\t\t&__lineone {\n\t\t\t\tfont-size: 14px;\n\t\t\t}\n\t\t\t&__linetwo {\n\t\t\t\tfont-size: 11px;\n\t\t\t\tline-height: 1.5;\n\t\t\t\tmargin-top: -4px;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 var(--default-clickable-area);\n\t\t\topacity: $opacity_normal;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: 16px;\n\t\t}\n\t}\n\n\t&__details,\n\t&__lineone,\n\t&__linetwo,\n\t&__icon {\n\t\tcursor: inherit;\n\t}\n}\n</style>\n"],"names":["NcHighlight","margin","_createElementBlock","_normalizeClass","_createVNode","_mergeProps","_createElementVNode","_createBlock","_toDisplayString","_renderSlot"],"mappings":"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"}