@nextcloud/vue 9.0.0-alpha.5 → 9.0.0-alpha.7

package/dist/chunks/NcListItem-DX-yKrou.mjs

@@ -1,359 +0,0 @@
-import '../assets/NcListItem-Cs-R5Xpu.css';
-import { N as NcActions } from "./NcActions-DqMOvrbN.mjs";
-import { N as NcCounterBubble } from "./NcCounterBubble-B0Sk58x_.mjs";
-import _sfc_main$1 from "../Components/NcVNodes.mjs";
-import { r as register, h as t5, a as t } from "./_l10n-6dsjYig_.mjs";
-import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeProps, guardReactiveProps, withCtx, createElementVNode, mergeProps, normalizeClass, withKeys, renderSlot, createTextVNode, toDisplayString, createElementBlock, createCommentVNode, withDirectives, vShow, createVNode } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-register(t5);
-const _sfc_main = {
-  name: "NcListItem",
-  components: {
-    NcActions,
-    NcCounterBubble,
-    NcVNodes: _sfc_main$1
-  },
-  inheritAttrs: false,
-  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
-    },
-    /**
-     * 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
-    },
-    /**
-     * Show the list component layout
-     */
-    oneLine: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: [
-    "click",
-    "update:menuOpen"
-  ],
-  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?.(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;
-      }
-    }
-  }
-};
-const _hoisted_1 = ["id", "aria-label", "href", "target", "rel", "onClick"];
-const _hoisted_2 = { class: "list-item-content" };
-const _hoisted_3 = { class: "list-item-content__main" };
-const _hoisted_4 = { class: "list-item-content__name" };
-const _hoisted_5 = { class: "list-item-content__details" };
-const _hoisted_6 = {
-  key: 0,
-  class: "list-item-details__details"
-};
-const _hoisted_7 = {
-  key: 1,
-  class: "list-item-details__extra"
-};
-const _hoisted_8 = {
-  key: 1,
-  class: "list-item-details__indicator"
-};
-const _hoisted_9 = {
-  key: 0,
-  class: "list-item__extra"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_NcCounterBubble = resolveComponent("NcCounterBubble");
-  const _component_NcActions = resolveComponent("NcActions");
-  return openBlock(), createBlock(resolveDynamicComponent($props.to ? "router-link" : "NcVNodes"), normalizeProps(guardReactiveProps({ ...$props.to && { custom: true, to: $props.to } })), {
-    default: withCtx(({ href: routerLinkHref, navigate, isActive }) => [
-      createElementVNode("li", mergeProps({
-        class: ["list-item__wrapper", { "list-item__wrapper--active": isActive || $props.active }]
-      }, _ctx.$attrs), [
-        createElementVNode("div", {
-          ref: "list-item",
-          class: normalizeClass(["list-item", {
-            "list-item--compact": $props.compact,
-            "list-item--one-line": $props.oneLine
-          }]),
-          onMouseover: _cache[4] || (_cache[4] = (...args) => $options.handleMouseover && $options.handleMouseover(...args)),
-          onMouseleave: _cache[5] || (_cache[5] = (...args) => $options.handleMouseleave && $options.handleMouseleave(...args))
-        }, [
-          createElementVNode("a", {
-            id: $props.anchorId || void 0,
-            "aria-label": $props.linkAriaLabel,
-            class: "list-item__anchor",
-            href: routerLinkHref || $props.href,
-            target: $props.target || ($props.href === "#" ? void 0 : "_blank"),
-            rel: $props.href === "#" ? void 0 : "noopener noreferrer",
-            onFocus: _cache[0] || (_cache[0] = (...args) => $options.showActions && $options.showActions(...args)),
-            onFocusout: _cache[1] || (_cache[1] = (...args) => $options.handleBlur && $options.handleBlur(...args)),
-            onClick: ($event) => $options.onClick($event, navigate, routerLinkHref),
-            onKeydown: _cache[2] || (_cache[2] = withKeys((...args) => $options.hideActions && $options.hideActions(...args), ["esc"]))
-          }, [
-            renderSlot(_ctx.$slots, "icon", {}, void 0, true),
-            createElementVNode("div", _hoisted_2, [
-              createElementVNode("div", _hoisted_3, [
-                createElementVNode("div", _hoisted_4, [
-                  renderSlot(_ctx.$slots, "name", {}, () => [
-                    createTextVNode(toDisplayString($props.name), 1)
-                  ], true)
-                ]),
-                $data.hasSubname ? (openBlock(), createElementBlock("div", {
-                  key: 0,
-                  class: normalizeClass(["list-item-content__subname", { "list-item-content__subname--bold": $props.bold }])
-                }, [
-                  renderSlot(_ctx.$slots, "subname", {}, void 0, true)
-                ], 2)) : createCommentVNode("", true)
-              ]),
-              createElementVNode("div", _hoisted_5, [
-                $options.showDetails ? (openBlock(), createElementBlock("div", _hoisted_6, [
-                  renderSlot(_ctx.$slots, "details", {}, () => [
-                    createTextVNode(toDisplayString($props.details), 1)
-                  ], true)
-                ])) : createCommentVNode("", true),
-                $props.counterNumber != 0 || $data.hasIndicator ? withDirectives((openBlock(), createElementBlock("div", _hoisted_7, [
-                  $props.counterNumber != 0 ? (openBlock(), createBlock(_component_NcCounterBubble, {
-                    key: 0,
-                    active: isActive || $props.active,
-                    class: "list-item-details__counter",
-                    type: $props.counterType
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString($props.counterNumber), 1)
-                    ]),
-                    _: 2
-                  }, 1032, ["active", "type"])) : createCommentVNode("", true),
-                  $data.hasIndicator ? (openBlock(), createElementBlock("span", _hoisted_8, [
-                    renderSlot(_ctx.$slots, "indicator", {}, void 0, true)
-                  ])) : createCommentVNode("", true)
-                ], 512)), [
-                  [vShow, $options.showAdditionalElements]
-                ]) : createCommentVNode("", true)
-              ])
-            ])
-          ], 40, _hoisted_1),
-          withDirectives(createElementVNode("div", {
-            class: "list-item-content__actions",
-            onFocusout: _cache[3] || (_cache[3] = (...args) => $options.handleBlur && $options.handleBlur(...args))
-          }, [
-            createVNode(_component_NcActions, {
-              ref: "actions",
-              primary: isActive || $props.active,
-              "aria-label": $options.computedActionsAriaLabel,
-              "onUpdate:open": $options.handleActionsUpdateOpen
-            }, {
-              default: withCtx(() => [
-                renderSlot(_ctx.$slots, "actions", {}, void 0, true)
-              ]),
-              _: 2
-            }, 1032, ["primary", "aria-label", "onUpdate:open"])
-          ], 544), [
-            [vShow, $props.forceDisplayActions || $data.displayActionsOnHoverFocus]
-          ]),
-          _ctx.$slots.extra ? (openBlock(), createElementBlock("div", _hoisted_9, [
-            renderSlot(_ctx.$slots, "extra", {}, void 0, true)
-          ])) : createCommentVNode("", true)
-        ], 34)
-      ], 16)
-    ]),
-    _: 3
-  }, 16);
-}
-const NcListItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-be45ee21"]]);
-export {
-  NcListItem as N
-};

package/dist/chunks/NcListItem-DX-yKrou.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcListItem-DX-yKrou.mjs","sources":["../../src/components/NcListItem/NcListItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### Default Usage\n\n```vue\n<template>\n\t<ul>\n\t\t<NcListItem\n\t\t\t:name=\"'This is an active element with highlighted counter'\"\n\t\t\t:bold=\"true\"\n\t\t\t:active=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; color: var(--color-primary);\">\n\t\t\t\t\tName of the element with content\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'This is an active element with outlined counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'This is an active element with normal counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:active=\"true\"\n\t\t\t:counter-number=\"44\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element with highlighted counter'\"\n\t\t\t:bold=\"true\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"highlighted\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element with outlined counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:counter-number=\"44\"\n\t\t\tcounterType=\"outlined\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element with normal counter'\"\n\t\t\t:bold=\"false\"\n\t\t\t:force-display-actions=\"true\"\n\t\t\t:details=\"'1h'\"\n\t\t\t:counter-number=\"44\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:bold=\"false\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #name>\n\t\t\t\t<span style=\"display: flex; gap: 0.5rem; color: var(--color-primary);\">\n\t\t\t\t\tFlexible styling within the first line of the component\n\t\t\t\t\t<div style=\"color: var(--color-secondary);\">\n\t\t\t\t\t\tlike this.\n\t\t\t\t\t</div>\n\t\t\t\t</span>\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tIn this slot you can put both text and other components such as icons\n\t\t\t</template>\n\t\t\t<template #details>\n\t\t\t\t<LinkIcon :size=\"16\"/>\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton three\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Without subname, Name of the element'\"\n\t\t\t:bold=\"false\"\n\t\t\t:details=\"'1h'\">\n\t\t\t<template #icon>\n\t\t\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t\t\t</template>\n\t\t\t<template #indicator>\n\t\t\t\t<!-- Color dot -->\n\t\t\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#0082c9\"/>\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n\n<script>\n\timport CheckboxBlankCircle from 'vue-material-design-icons/CheckboxBlankCircle'\n\timport LinkIcon from 'vue-material-design-icons/Link'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tCheckboxBlankCircle,\n\t\t\tLinkIcon,\n\t\t}\n\t}\n</script>\n\n```\n\n### NcListItem one line mode\n```vue\n<NcListItem\n\t:name=\"'This is an active element with highlighted counter'\"\n\t:bold=\"false\"\n\t:active=\"true\"\n\t:details=\"'1h'\"\n\t:counter-number=\"44\"\n\tone-line\n\tcounterType=\"highlighted\">\n\t<template #icon>\n\t\t<NcAvatar disable-menu :size=\"44\" user=\"janedoe\" display-name=\"Jane Doe\" />\n\t</template>\n\t<template #subname>\n\t\tIn this slot you can put both text and other components such as icons\n\t</template>\n\t<template #indicator>\n\t\t<!-- Color dot -->\n\t\t<CheckboxBlankCircle :size=\"16\" fill-color=\"#fff\" />\n\t</template>\n\t<template #actions>\n\t\t<NcActionButton>\n\t\t\tButton one\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton two\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\tButton three\n\t\t</NcActionButton>\n\t</template>\n</NcListItem>\n```\n### NcListItem compact mode\n```vue\n<template>\n\t<ul style=\"width: 350px;\">\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:counter-number=\"1\"\n\t\t\t:compact=\"true\" >\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:compact=\"true\" >\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:counter-number=\"3\"\n\t\t\t:compact=\"true\" >\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with subname\n\t\t\t</template>\n\t\t\t<template #actions>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton one\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\tButton two\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcListItem>\n\t\t<NcListItem\n\t\t\t:name=\"'Name of the element'\"\n\t\t\t:compact=\"true\"\n\t\t\t:counter-number=\"4\"\n\t\t\thref=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<IconNoteText :size=\"20\" />\n\t\t\t</template>\n\t\t\t<template #subname>\n\t\t\t\tThis one is with an external link\n\t\t\t</template>\n\t\t</NcListItem>\n\t</ul>\n</template>\n<script>\n\timport IconNoteText from 'vue-material-design-icons/NoteText.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconNoteText,\n\t\t},\n\t}\n</script>\n```\n</docs>\n\n<template>\n\t<!-- This wrapper can be either a router link or a `<li>` -->\n\t<component :is=\"to ? 'router-link' : 'NcVNodes'\"\n\t\tv-slot=\"{ href: routerLinkHref, navigate, isActive }\"\n\t\tv-bind=\"{ ...to && { custom: true, to } }\">\n\t\t<li class=\"list-item__wrapper\"\n\t\t\t:class=\"{ 'list-item__wrapper--active' : isActive || active }\"\n\t\t\tv-bind=\"$attrs\">\n\t\t\t<div ref=\"list-item\"\n\t\t\t\tclass=\"list-item\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'list-item--compact': compact,\n\t\t\t\t\t'list-item--one-line': oneLine,\n\t\t\t\t}\"\n\t\t\t\t@mouseover=\"handleMouseover\"\n\t\t\t\t@mouseleave=\"handleMouseleave\">\n\t\t\t\t<a :id=\"anchorId || undefined\"\n\t\t\t\t\t:aria-label=\"linkAriaLabel\"\n\t\t\t\t\tclass=\"list-item__anchor\"\n\t\t\t\t\t:href=\"routerLinkHref || href\"\n\t\t\t\t\t:target=\"target || (href === '#' ? undefined : '_blank')\"\n\t\t\t\t\t:rel=\"href === '#' ? undefined : 'noopener noreferrer'\"\n\t\t\t\t\t@focus=\"showActions\"\n\t\t\t\t\t@focusout=\"handleBlur\"\n\t\t\t\t\t@click=\"onClick($event, navigate, routerLinkHref)\"\n\t\t\t\t\t@keydown.esc=\"hideActions\">\n\t\t\t\t\t<!-- @slot This slot is used for the NcAvatar or icon, the content of this slot must not be interactive -->\n\t\t\t\t\t<slot name=\"icon\" />\n\n\t\t\t\t\t<!-- Main content -->\n\t\t\t\t\t<div class=\"list-item-content\">\n\t\t\t\t\t\t<div class=\"list-item-content__main\">\n\t\t\t\t\t\t\t<div class=\"list-item-content__name\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the first line of the component. prop 'name' is used as a fallback is no slots are provided -->\n\t\t\t\t\t\t\t\t<slot name=\"name\">{{ name }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div v-if=\"hasSubname\"\n\t\t\t\t\t\t\t\tclass=\"list-item-content__subname\"\n\t\t\t\t\t\t\t\t:class=\"{'list-item-content__subname--bold': bold}\">\n\t\t\t\t\t\t\t\t<!-- @slot Slot for the second line of the component -->\n\t\t\t\t\t\t\t\t<slot name=\"subname\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div class=\"list-item-content__details\">\n\t\t\t\t\t\t\t<div v-if=\"showDetails\" class=\"list-item-details__details\">\n\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some details in form of icon (prop `details` as a fallback) -->\n\t\t\t\t\t\t\t\t<slot name=\"details\">{{ details }}</slot>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<!-- Counter and indicator -->\n\t\t\t\t\t\t\t<div v-if=\"counterNumber != 0 || hasIndicator\"\n\t\t\t\t\t\t\t\tv-show=\"showAdditionalElements\"\n\t\t\t\t\t\t\t\tclass=\"list-item-details__extra\">\n\t\t\t\t\t\t\t\t<NcCounterBubble v-if=\"counterNumber != 0\"\n\t\t\t\t\t\t\t\t\t:active=\"isActive || active\"\n\t\t\t\t\t\t\t\t\tclass=\"list-item-details__counter\"\n\t\t\t\t\t\t\t\t\t:type=\"counterType\">\n\t\t\t\t\t\t\t\t\t{{ counterNumber }}\n\t\t\t\t\t\t\t\t</NcCounterBubble>\n\n\t\t\t\t\t\t\t\t<span v-if=\"hasIndicator\" class=\"list-item-details__indicator\">\n\t\t\t\t\t\t\t\t\t<!-- @slot This slot is used for some indicator in form of icon -->\n\t\t\t\t\t\t\t\t\t<slot name=\"indicator\" />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</a>\n\n\t\t\t\t<!-- Actions -->\n\t\t\t\t<div v-show=\"forceDisplayActions || displayActionsOnHoverFocus\"\n\t\t\t\t\tclass=\"list-item-content__actions\"\n\t\t\t\t\t@focusout=\"handleBlur\">\n\t\t\t\t\t<NcActions ref=\"actions\"\n\t\t\t\t\t\t:primary=\"isActive || active\"\n\t\t\t\t\t\t:aria-label=\"computedActionsAriaLabel\"\n\t\t\t\t\t\t@update:open=\"handleActionsUpdateOpen\">\n\t\t\t\t\t\t<!-- @slot Provide the actions for the right side quick menu -->\n\t\t\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\n\t\t\t\t<!-- @slot Extra elements below the item -->\n\t\t\t\t<div v-if=\"$slots.extra\" class=\"list-item__extra\">\n\t\t\t\t\t<slot name=\"extra\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</li>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport NcCounterBubble from '../NcCounterBubble/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcListItem',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcCounterBubble,\n\t\tNcVNodes,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The details text displayed in the upper right part of the component\n\t\t */\n\t\tdetails: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Name (first line of 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 * The route for the router link.\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * The value for the external link\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: '#',\n\t\t},\n\n\t\ttarget: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Id for the `<a>` element\n\t\t */\n\t\tanchorId: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Make subname bold\n\t\t */\n\t\tbold: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Show the NcListItem in compact design\n\t\t */\n\t\tcompact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggle the active state of the component\n\t\t */\n\t\tactive: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the wrapper element\n\t\t */\n\t\tlinkAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the actions toggle\n\t\t */\n\t\tactionsAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * If different from 0 this component will display the\n\t\t * NcCounterBubble component\n\t\t */\n\t\t counterNumber: {\n\t\t\t type: [Number, String],\n\t\t\t default: 0,\n\t\t },\n\n\t\t/**\n\t\t * Outlined or highlighted state of the counter\n\t\t */\n\t\tcounterType: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['highlighted', 'outlined', ''].indexOf(value) !== -1\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * To be used only when the elements in the actions menu are very important\n\t\t */\n\t\tforceDisplayActions: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Show the list component layout\n\t\t */\n\t\toneLine: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'update:menuOpen',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\thovered: false,\n\t\t\thasActions: false,\n\t\t\thasSubname: false,\n\t\t\tdisplayActionsOnHoverFocus: false,\n\t\t\tmenuOpen: false,\n\t\t\thasIndicator: false,\n\t\t\thasDetails: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshowAdditionalElements() {\n\t\t\treturn !this.displayActionsOnHoverFocus || this.forceDisplayActions\n\t\t},\n\n\t\tshowDetails() {\n\t\t\treturn (this.details !== '' || this.hasDetails)\n\t\t\t\t&& (!this.displayActionsOnHoverFocus || this.forceDisplayActions)\n\t\t},\n\n\t\tcomputedActionsAriaLabel() {\n\t\t\treturn this.actionsAriaLabel || t('Actions for item with name \"{name}\"', { name: this.name })\n\t\t},\n\t},\n\n\twatch: {\n\n\t\tmenuOpen(newValue) {\n\t\t\t// A click outside both the menu and the root element hides the actions again\n\t\t\tif (!newValue && !this.hovered) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkSlots()\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Handle link click\n\t\t *\n\t\t * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event\n\t\t * @param {Function} [navigate] - VueRouter link's navigate if any\n\t\t * @param {string} [routerLinkHref] - VueRouter link's href\n\t\t */\n\t\tonClick(event, navigate, routerLinkHref) {\n\t\t\t// Always forward native event\n\t\t\tthis.$emit('click', event)\n\t\t\t// Do not navigate with control keys - it is opening in a new tab\n\t\t\tif (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Prevent default link behaviour if it's a router-link and navigate manually\n\t\t\tif (routerLinkHref) {\n\t\t\t\tnavigate?.(event)\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tshowActions() {\n\t\t\tif (this.hasActions) {\n\t\t\t\tthis.displayActionsOnHoverFocus = true\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thideActions() {\n\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t},\n\n\t\t/**\n\t\t * @param {FocusEvent} event UI event\n\t\t */\n\t\thandleBlur(event) {\n\t\t\t// do not hide if open\n\t\t\tif (this.menuOpen) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// do not hide if focus is kept within\n\t\t\tif (this.$refs['list-item'].contains(event.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hideActions()\n\t\t},\n\n\t\t/**\n\t\t * Hide the actions on mouseleave unless the menu is open\n\t\t */\n\t\thandleMouseleave() {\n\t\t\tif (!this.menuOpen) {\n\t\t\t\tthis.displayActionsOnHoverFocus = false\n\t\t\t}\n\t\t\tthis.hovered = false\n\t\t},\n\n\t\thandleMouseover() {\n\t\t\tthis.showActions()\n\t\t\tthis.hovered = true\n\t\t},\n\n\t\thandleActionsUpdateOpen(e) {\n\t\t\tthis.menuOpen = e\n\t\t\tthis.$emit('update:menuOpen', e)\n\t\t},\n\n\t\t// Check if subname and actions slots are populated\n\t\tcheckSlots() {\n\t\t\tif (this.hasActions !== !!this.$slots.actions) {\n\t\t\t\tthis.hasActions = !!this.$slots.actions\n\t\t\t}\n\t\t\tif (this.hasSubname !== !!this.$slots.subname) {\n\t\t\t\tthis.hasSubname = !!this.$slots.subname\n\t\t\t}\n\t\t\tif (this.hasIndicator !== !!this.$slots.indicator) {\n\t\t\t\tthis.hasIndicator = !!this.$slots.indicator\n\t\t\t}\n\t\t\tif (this.hasDetails !== !!this.$slots.details) {\n\t\t\t\tthis.hasDetails = !!this.$slots.details\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.list-item__wrapper {\n\tdisplay: flex;\n\tposition: relative;\n\twidth: 100%;\n\n\t&--active,\n\t&.active {\n\t\t.list-item {\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t&:hover,\n\t\t\t&:focus-within,\n\t\t\t&:has(:focus-visible),\n\t\t\t&:has(:active) {\n\t\t\t\tbackground-color: var(--color-primary-element-hover);\n\t\t\t}\n\t\t}\n\n\t\t.list-item-content__name,\n\t\t.list-item-content__subname,\n\t\t.list-item-content__details,\n\t\t.list-item-details__details {\n\t\t\tcolor: var(--color-primary-element-text) !important;\n\t\t}\n\t}\n\t.list-item-content__name,\n\t.list-item-content__subname,\n\t.list-item-content__details,\n\t.list-item-details__details {\n\t\twhite-space: nowrap;\n\t\tmargin: 0 auto 0 0;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n\n.list-item-content__name {\n\tmin-width: 100px;\n\tmax-width: 300px;\n\tflex: 1 1 10%;\n\tfont-weight: 500;\n}\n\n.list-item-content__subname {\n\tflex: 1 0;\n\tmin-width: 0;\n\tcolor: var(--color-text-maxcontrast);\n\t&--bold {\n\t\tfont-weight: 500;\n\t}\n}\n\n// NcListItem\n.list-item {\n\tbox-sizing: border-box;\n\tdisplay: flex;\n\tposition: relative;\n\tflex: 0 0 auto;\n\tjustify-content: flex-start;\n\tpadding: 8px 10px;\n\t// 4px padding for the focus-visible styles. Width is reduced to compensate it\n\tmargin: 4px;\n\twidth: calc(100% - 8px);\n\tborder-radius: var(--border-radius-element, 32px);\n\tcursor: pointer;\n\ttransition: background-color var(--animation-quick) ease-in-out;\n\tlist-style: none;\n\t&:hover,\n\t&:focus-within,\n\t&:has(:active),\n\t&:has(:focus-visible) {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&:has(&__anchor:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&--compact {\n\t\tpadding: 4px 10px;\n\n\t\t.list-item__anchor {\n\t\t\t.line-one, .line-two {\n\t\t\t\tmargin-block: -4px;\n\t\t\t}\n\t\t}\n\t}\n\t.list-item-content__details {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: end;\n\t\talign-items: end;\n\t}\n\t&--one-line {\n\t\tpadding: 0 9px;\n\t\tmargin: 2px;\n\t\t.list-item-content__main {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: start;\n\t\t\tgap: 12px;\n\t\t\tmin-width: 0;\n\t\t}\n\t\t.list-item-content__details {\n\t\t\tflex-direction: row;\n\t\t\talign-items: unset;\n\t\t\tjustify-content: end;\n\t\t}\n\t}\n\n\t&__anchor {\n\t\tdisplay: flex;\n\t\tflex: 1 0 auto;\n\t\talign-items: center;\n\t\theight: var(--default-clickable-area);\n\t\tmin-width: 0;\n\n\t\t// This is handled by the parent container\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t&-content {\n\t\tdisplay: flex;\n\t\tflex: 1 0;\n\t\tjustify-content: space-between;\n\t\tpadding-left: 8px;\n\t\tmin-width: 0;\n\t\t&__main {\n\t\t\tflex: 1 0;\n\t\t\twidth: 0;\n\t\t\tmargin: auto 0;\n\n\t\t\t&--oneline {\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&__actions {\n\t\t\tflex: 0 0 auto;\n\t\t\talign-self: center;\n\t\t\tjustify-content: center;\n\t\t\tmargin-left: 4px;\n\t\t}\n\t}\n\n\t&-details {\n\t\t&__details {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\tmargin: 0 9px !important;\n\t\t\tfont-weight: normal;\n\t\t}\n\t\t&__extra {\n\t\t\tmargin: 2px 4px 0 4px;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t}\n\t\t&__indicator {\n\t\t\tmargin: 0 5px;\n\t\t}\n\t}\n\t&__extra {\n\t\tmargin-top: 4px;\n\t}\n}\n\n</style>\n"],"names":["NcVNodes","_createBlock","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_withCtx","_createElementVNode","_mergeProps","_normalizeClass","_withKeys","_renderSlot","_createTextVNode","_toDisplayString","_createElementBlock","_createCommentVNode","_openBlock","_withDirectives","_createVNode","_vShow"],"mappings":"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"}

package/dist/chunks/NcListItemIcon-Bgd2w_Ug.mjs

@@ -1,207 +0,0 @@
-import '../assets/NcMentionBubble-C6t8od-_.css';
-import '../assets/NcListItemIcon-C2zhDUEr.css';
-import { N as NcAvatar, u as userStatus } from "./NcAvatar-BjooMt8H.mjs";
-import { _ as _sfc_main$1 } from "./NcHighlight-BHtRIzqk.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-DbL6OP85.mjs";
-import "@nextcloud/router";
-import { resolveComponent, openBlock, createElementBlock, normalizeStyle, createVNode, mergeProps, createElementVNode, createBlock, toDisplayString, createCommentVNode, renderSlot, normalizeClass } from "vue";
-/* empty css                                                                          */
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-import "linkify-string";
-import "escape-html";
-import "striptags";
-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
-    }
-  },
-  data() {
-    return {
-      margin
-    };
-  },
-  computed: {
-    hasIcon() {
-      return this.icon !== "";
-    },
-    hasIconSvg() {
-      return this.iconSvg !== "";
-    },
-    isValidSubname() {
-      return this.subname?.trim?.() !== "";
-    },
-    isSizeBigEnough() {
-      return this.avatarSize >= defaultSize;
-    },
-    cssVars() {
-      const margin2 = this.noMargin ? 0 : this.margin;
-      return {
-        "--height": this.avatarSize + 2 * margin2 + "px",
-        "--margin": this.margin + "px"
-      };
-    },
-    /**
-     * Seperates 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: "option",
-    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)
-  ], 12, _hoisted_1);
-}
-const NcListItemIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-7322cd97"]]);
-export {
-  NcListItemIcon as N
-};

package/dist/chunks/NcListItemIcon-Bgd2w_Ug.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcListItemIcon-Bgd2w_Ug.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<Account :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport Account from 'vue-material-design-icons/Account.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccount,\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<AccountMultiple :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\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<AccountMultiple :size=\"20\" />\n\t\t</NcListItemIcon>\n\t</template>\n\t<script>\n\timport AccountMultiple from 'vue-material-design-icons/AccountMultiple.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tAccountMultiple,\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<Pencil :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<Delete :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 Delete from 'vue-material-design-icons/Delete.vue'\n\timport Pencil from 'vue-material-design-icons/Pencil.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tDelete,\n\t\t\tPencil,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<span :id=\"id\"\n\t\tclass=\"option\"\n\t\t:style=\"cssVars\">\n\t\t<NcAvatar v-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 class=\"option__lineone\"\n\t\t\t\t:text=\"name\"\n\t\t\t\t:search=\"searchParts[0]\" />\n\t\t\t<NcHighlight v-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 v-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 v-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 NcAvatar from '../NcAvatar/index.js'\nimport NcHighlight from '../NcHighlight/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nimport { userStatus } from '../../mixins/index.js'\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\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\tdata() {\n\t\treturn {\n\t\t\tmargin,\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 >= defaultSize\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 * Seperates the search property into two parts, the first one is the search part on the name, the second on the subname.\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-right: 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.1em;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n\n\t&__icon {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t&.icon {\n\t\t\tflex: 0 0 $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","_normalizeStyle","_createVNode","_mergeProps","_createElementVNode","_createBlock","_openBlock","_toDisplayString","_createCommentVNode","_renderSlot","_normalizeClass"],"mappings":"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"}