npm - @nextcloud/vue - Versions diffs - 9.0.0-rc.0 → 9.0.0-rc.2 - Mend

@nextcloud/vue 9.0.0-rc.0 → 9.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (317) hide show

package/dist/chunks/NcActionTextEditable-Dv1_bMFY.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcActionTextEditable-Dv1_bMFY.mjs","sources":["../../src/components/NcActionTextEditable/NcActionTextEditable.vue"],"sourcesContent":["\n\n<docs>\nThis component is made to be used inside of the [Actions](#Actions) component slots.\nAll undocumented attributes will be bound to the textarea. e.g. `maxlength`\n\n```\n<template>\n\t<NcActions>\n\t\t<NcActionTextEditable model-value=\"This is a textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable :disabled=\"true\" model-value=\"This is a disabled textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable name=\"Please edit the text\" model-value=\"This is a textarea with name\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t</NcActions>\n</template>\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tPencil,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span class=\"action-text-editable\"\n\t\t\t@click=\"onClick\">\n\t\t\t\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-text-editable__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text-editable__icon\" />\n\t\t\t</slot>\n\n\t\t\t\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-text-editable__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<input :id=\"id\" type=\"submit\" class=\"action-text-editable__submit\">\n\n\t\t\t\t\n\t\t\t\t<label v-if=\"name\"\n\t\t\t\t\tclass=\"action-text-editable__name\"\n\t\t\t\t\t:for=\"computedId\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</label>\n\n\t\t\t\t<textarea :id=\"computedId\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:value=\"modelValue\"\n\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t:class=\"['action-text-editable__textarea', { focusable: isFocusable }]\"\n\t\t\t\t\t@input=\"onInput\" />\n\n\t\t\t\t\n\t\t\t\t<label v-show=\"!disabled\" :for=\"id\" class=\"action-text-editable__label\">\n\t\t\t\t\t<ArrowLeft v-if=\"isRtl\" :size=\"20\" />\n\t\t\t\t\t<ArrowRight v-else :size=\"20\" />\n\t\t\t\t</label>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport { createElementId } from '../../utils/createElementId.ts'\n\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nimport { isRtl } from '../../utils/rtl.ts'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tArrowLeft,\n\t\tArrowRight,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + createElementId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the text area\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'update:modelValue',\n\t\t'submit',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisRtl,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\tcomputedId() {\n\t\t\treturn createElementId()\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', event.target.value)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/inputs.scss';\n@use '../../assets/action.scss' as *;\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-text-editable {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\tline-height: var(--default-clickable-area);\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t/* Keep padding to define the width to\n\t\t\tassure correct position of a possible text */\n\t\tpadding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t&:deep(.material-design-icon) {\n\t\twidth: var(--default-clickable-area);\n\t\theight: var(--default-clickable-area);\n\t\topacity: $opacity_full;\n\n\t\t.material-design-icon__svg {\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\n\t\tposition: relative;\n\t\tmargin: $input-margin 0;\n\t\tpadding-inline-end: $icon-margin;\n\t}\n\n\t&__submit {\n\t\tposition: absolute;\n\t\tinset-inline-start: 0;\n\t\ttop: auto;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t\tz-index: -1;\n\t\topacity: 0;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// bottom-right corner\n\t\tposition: absolute;\n\t\tinset-inline-end: calc($icon-margin + 1px);\n\t\tbottom: 1px;\n\t\twidth: calc(var(--default-clickable-area) - $input-margin * 2);\n\t\theight: calc(var(--default-clickable-area) - $input-margin * 2);\n\t\tbox-sizing: border-box;\n\t\tmargin: 0;\n\t\tpadding: 7px 6px;\n\n\t\tborder: 0;\n\t\tborder-radius: 50%;\n\t\t/* Avoid background under border */\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-clip: padding-box;\n\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t/* Inputs inside popover supports text, submit & reset */\n\t&__textarea {\n\t\tflex: 1 1 auto;\n\t\tcolor: inherit;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\tmin-height: calc(var(--default-clickable-area) * 2 - $input-margin * 2); /* twice the element margin-y */\n\t\tmax-height: calc(var(--default-clickable-area) * 3 - $input-margin * 2); /* twice the element margin-y */\n\t\t// block width widening\n\t\tmin-width: calc(var(--default-clickable-area) * 4);\n\t\twidth: 100% !important;\n\t\tmargin: 0;\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t/* only show confirm borders if input is not focused */\n\t\t&:not(:active):not(:hover):not(:focus) {\n\t\t\t&:invalid {\n\t\t\t\t& + .action-text-editable__label {\n\t\t\t\t\tbackground-color: var(--color-error);\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t&:active,\n\t\t\t\t&:hover,\n\t\t\t\t&:focus {\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&:active,\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t/* above previous input */\n\t\t\t\tz-index: 2;\n\n\t\t\t\tborder-color: var(--color-primary-element);\n\t\t\t\tborder-inline-start-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-text-editable {\n\tmargin-bottom: calc($icon-margin - $input-margin);\n}\n\n// same for first item\nli:first-child > .action-text-editable {\n\tmargin-top: calc($icon-margin - $input-margin);\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_normalizeStyle","_withModifiers","_toDisplayString","_createCommentVNode","_mergeProps","_createBlock"],"mappings":";;;;;;;AA6FA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,EACA;AAAA,EAED,QAAQ,CAAC,eAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,IAAI;AAAA,MACH,MAAM;AAAA,MACN,SAAS,MAAM,YAAY,gBAAiB;AAAA,MAC5C,WAAW,QAAM,GAAG,KAAK,MAAM;AAAA,IAC/B;AAAA;AAAA;AAAA;AAAA,IAID,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAED,QAAQ;AACP,WAAO;AAAA,MACN;AAAA,IACD;AAAA,EACA;AAAA,EAED,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMT,cAAc;AACb,aAAO,CAAC,KAAK;AAAA,IACb;AAAA,IAED,aAAa;AACZ,aAAO,gBAAe;AAAA,IACtB;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACR,QAAQ,OAAO;AAMd,WAAK,MAAM,SAAS,KAAK;AAMzB,WAAK,MAAM,qBAAqB,MAAM,OAAO,KAAK;AAAA,IAClD;AAAA,IACD,SAAS,OAAO;AACf,YAAM,eAAc;AACpB,YAAM,gBAAe;AACrB,UAAI,CAAC,KAAK,UAAU;AAMnB,aAAK,MAAM,UAAU,KAAK;AAAA,aACpB;AAEN,eAAO;AAAA,MACR;AAAA,IACA;AAAA,EACD;AACF;AA1LA,MAAA,aAAA,CAAA,UAAA;AAAA,MAAA,aAAA,CAAA,IAAA;AAAA,MAAA,aAAA,CAAA,KAAA;AAAA,MAAA,aAAA,CAAA,MAAA,YAAA,OAAA;AAAA,MAAA,aAAA,CAAA,KAAA;;;;sBA0CCA,mBAuCK,MAAA;AAAA,IAvCD,OA1CLC,eAAA,CA0CW,UAAQ,EAAA,oBAA+B,OAAQ,UAAA,CAAA;AAAA;IACxDC,mBAqCO,QAAA;AAAA,MArCD,OAAM;AAAA,MACV,gDAAO,KAAO,WAAA,KAAA,QAAA,GAAA,IAAA;AAAA;MAEfC,WAIO,yBAJP,MAIO;AAAA,QAHND,mBAEsC,QAAA;AAAA,UAF/B,OA/CXD,eA+CmB,CAAA,CAAA,KAAA,YAAgD,oCAAA,KAAA,IAAI,GAE5D,4BAA4B,CAAA;AAAA,UADjC,OAhDNG,eAAA,EAAA,iBAgDgC,KAAS,YAAA,OAAU,KAAI,IAAA,MAAA,KAAA,CAAA;AAAA;;MAKpDF,mBA0BO,QAAA;AAAA,QA1BD,KAAI;AAAA,QACT,OAAM;AAAA,QACL,UAAU,OAAQ;AAAA,QAClB,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IAxDXG,2BAwDqB,SAAQ,YAAA,SAAA,SAAA,GAAA,IAAA,GAAA,CAAA,SAAA,CAAA;AAAA;QACzBH,mBAAmE,SAAA;AAAA,UAA3D,IAAI,OAAE;AAAA,UAAE,MAAK;AAAA,UAAS,OAAM;AAAA,QAzDxC,GAAA,MAAA,GAAA,UAAA;AAAA,QA4DiB,KAAI,qBAAjBF,mBAIQ,SAAA;AAAA,UAhEZ,KAAA;AAAA,UA6DK,OAAM;AAAA,UACL,KAAK,SAAU;AAAA,QACb,GAAAM,gBAAA,KAAA,IAAI,GA/DZ,GAAA,UAAA,KAAAC,mBAAA,IAAA,IAAA;AAAA,QAkEIL,mBAKoB,YALpBM,WAKoB;AAAA,UALT,IAAI,SAAU;AAAA,UACvB,UAAU,OAAQ;AAAA,UAClB,OAAO,OAAU;AAAA,WACV,KAAM,QAAA;AAAA,UACb,uDAAuD,SAAW,YAAA,CAAA;AAAA,UAClE,gDAAO,SAAO,WAAA,SAAA,QAAA,GAAA,IAAA;AAAA,QAvEpB,CAAA,GAAA,MAAA,IAAA,UAAA;AAAA,uBA2EIN,mBAGQ,SAAA;AAAA,UAHmB,KAAK,OAAE;AAAA,UAAE,OAAM;AAAA;UACxB,OAAK,sBAAtBO,YAAqC,sBAAA;AAAA,YA5E1C,KAAA;AAAA,YA4E8B,MAAM;AAAA,8BAC/BA,YAAgC,uBAAA;AAAA,YA7ErC,KAAA;AAAA,YA6EyB,MAAM;AAAA;QA7E/B,GAAA,GAAA,UAAA,GAAA;AAAA,mBA2EoB,OAAQ,QAAA;AAAA;MA3E5B,GAAA,IAAA,UAAA;AAAA;;;;"}

package/dist/chunks/NcActions-DpYAcY6a.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcActions-DpYAcY6a.mjs","sources":["../../src/utils/isSlotPopulated.ts","../../src/components/NcActions/NcActions.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { VNode, VNodeNormalizedChildren } from 'vue'\nimport { Fragment, Comment, Text } from 'vue'\n\n/**\n * Checks whether a slot is populated\n *\n * @param vnodes The array of vnodes to check\n */\nexport function isSlotPopulated(vnodes?: VNode[] | VNodeNormalizedChildren) {\n\treturn Array.isArray(vnodes) && vnodes.some(node => {\n\t\tif (node === null) return false\n\t\tif (typeof node === 'object') {\n\t\t\tconst vnode = node as VNode\n\t\t\tif (vnode.type === Comment) return false\n\t\t\tif (vnode.type === Fragment && !isSlotPopulated(vnode.children)) return false\n\t\t\tif (vnode.type === Text && !(vnode.children as string).trim()) return false\n\t\t}\n\t\treturn true\n\t})\n}\n","\n\n\n\n<docs>\n### Single action\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton @click=\"actionDelete\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t},\n\tmethods: {\n\t\tactionDelete() {\n\t\t\talert('Delete')\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions\n\n```vue\n<template>\n\t<NcActions>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with 2 items inline\n\n```vue\n<template>\n\t<NcActions :inline=\"2\">\n\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t\tAdd\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Plus from 'vue-material-design-icons/Plus.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t\tPlus,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with 2 items inline AND forced names\n\n```vue\n<template>\n\t<NcActions :force-name=\"true\" :inline=\"2\">\n\t\t<NcActionButton @click=\"showMessage('Add')\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t\tAdd\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Plus from 'vue-material-design-icons/Plus.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t\tPlus,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### Multiple actions with custom icon\n\n```vue\n<template>\n\t<NcActions>\n\t\t<template #icon>\n\t\t\t<Pencil :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton @click=\"showMessage('Edit')\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton @click=\"showMessage('Delete')\">\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionLink href=\"https://nextcloud.com\">\n\t\t\t<template #icon>\n\t\t\t\t<OpenInNew :size=\"20\" />\n\t\t\t</template>\n\t\t\tLink\n\t\t</NcActionLink>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tOpenInNew,\n\t\tPencil,\n\t},\n\tmethods: {\n\t\tshowMessage(msg) {\n\t\t\talert(msg)\n\t\t},\n\t},\n}\n</script>\n```\n\n### With menu name\n\n```vue\n<template>\n\t<NcActions menu-name=\"Object management\">\n\t\t<template #icon>\n\t\t\t<Pencil :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tRename\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tValidate\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Download :size=\"20\" />\n\t\t\t</template>\n\t\t\tDownload\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Download from 'vue-material-design-icons/Download.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tArrowRight,\n\t\tDelete,\n\t\tDownload,\n\t\tPencil,\n\t},\n}\n</script>\n```\n\n### Various icons styles\n```vue\n<template>\n\t<NcActions :primary=\"true\">\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tEdit\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tPencil,\n\t},\n}\n</script>\n```\n\n```vue\n<template>\n\t<NcActions :primary=\"true\" menu-name=\"Object management\">\n\t\t<template #icon>\n\t\t\t<Plus :size=\"20\" />\n\t\t</template>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t\tRename\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t</template>\n\t\t\tValidate\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Download :size=\"20\" />\n\t\t\t</template>\n\t\t\tDownload\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Download from 'vue-material-design-icons/Download.vue'\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Plus from 'vue-material-design-icons/Plus.vue'\n\nexport default {\n\tcomponents: {\n\t\tArrowRight,\n\t\tDelete,\n\t\tDownload,\n\t\tPencil,\n\t\tPlus,\n\t},\n}\n</script>\n```\n\n### Custom icon slot\nTo be used with `vue-material-design-icons` only. For icon classes use the `default-icon` slot.\nIt can be used with one or multiple actions.\n```vue\n<template>\n\t<div style=\"display: flex;align-items: center;\">\n\t\t<NcButton @click=\"toggled = !toggled\">Toggle multiple action</NcButton>\n\t\t<NcActions>\n\t\t\t<template #icon>\n\t\t\t\t<DotsHorizontalCircleOutline :size=\"20\" />\n\t\t\t</template>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<MicrophoneOff :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tMute\n\t\t\t</NcActionButton>\n\t\t\t<NcActionButton v-if=\"toggled\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tDelete\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport DotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline.vue'\nimport MicrophoneOff from 'vue-material-design-icons/MicrophoneOff.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tDotsHorizontalCircleOutline,\n\t\tMicrophoneOff,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\ttoggled: false\n\t\t}\n\t}\n}\n</script>\n```\n\n### Custom icon slot in child elements\n```vue\n<template>\n\t<NcActions :primary=\"true\">\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch\n\t\t</NcActionButton>\n\t\t<NcActionButton>\n\t\t\t<template #icon>\n\t\t\t\t<Delete :size=\"20\" />\n\t\t\t</template>\n\t\t\tDelete\n\t\t</NcActionButton>\n\t</NcActions>\n</template>\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tMagnify,\n\t},\n}\n</script>\n```\n\n### Design variants\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions :variant=\"current\">\n\t\t\t<template #icon>\n\t\t\t\t<SelectColor :size=\"20\" />\n\t\t\t</template>\n\n\t\t\t<NcActionButton v-if=\"current\" close-after-click @click=\"define()\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRemove\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton v-for=\"row in variants\" close-after-click @click=\"define(row)\" :key=\"`type-icon--${row}`\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CheckboxMarkedCircleOutline v-if=\"row === current\" :size=\"20\" />\n\t\t\t\t\t<SelectColor v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ row }}\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\n\t\t<NcActions :variant=\"current\" menu-name=\"Choose a variant\">\n\t\t\t<NcActionButton v-if=\"current\" close-after-click @click=\"define()\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRemove\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton v-for=\"row in variants\" close-after-click @click=\"define(row)\" :key=\"`type-text--${row}`\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CheckboxMarkedCircleOutline v-if=\"row === current\" :size=\"20\" />\n\t\t\t\t\t<SelectColor v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ row }}\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\n\t\t<NcActions :variant=\"current\" menu-name=\"Choose a variant\">\n\t\t\t<template #icon>\n\t\t\t\t<SelectColor :size=\"20\" />\n\t\t\t</template>\n\n\t\t\t<NcActionButton v-if=\"current\" close-after-click @click=\"define()\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tRemove\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton v-for=\"row in variants\" close-after-click @click=\"define(row)\" :key=\"`type-icon-text--${row}`\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<CheckboxMarkedCircleOutline v-if=\"row === current\" :size=\"20\" />\n\t\t\t\t\t<SelectColor v-else :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ row }}\n\t\t\t</NcActionButton>\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script>\nimport Delete from 'vue-material-design-icons/Delete.vue'\nimport Palette from 'vue-material-design-icons/Palette.vue'\nimport SelectColor from 'vue-material-design-icons/SelectColor.vue'\nimport CheckboxMarkedCircleOutline from 'vue-material-design-icons/CheckboxMarkedCircleOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tPalette,\n\t\tSelectColor,\n\t\tCheckboxMarkedCircleOutline,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tcurrent: 'primary',\n\t\t\tvariants: [\n\t\t\t\t'primary',\n\t\t\t\t'secondary',\n\t\t\t\t'tertiary',\n\t\t\t\t'error',\n\t\t\t\t'warning',\n\t\t\t\t'success'\n\t\t\t]\n\t\t}\n\t},\n\tmethods: {\n\t\tdefine(row = undefined) {\n\t\t\tthis.current = row\n\t\t}\n\t}\n}\n</script>\n```\n\n### Use cases\n\n```vue\n<template>\n\t<div>\n\t\t<h2>Application menu</h2>\n\t\t<p>Has buttons, button groups, links and router links, separators, texts. May have checkboxes and radio buttons. Separator can be used to make groups of radio buttons as well.</p>\n\t\t<p><kbd>Arrows</kbd> are used to navigate between items, <kbd>Tab</kbd> is used to navigate to the next UI element on the page.</p>\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Email menu\" variant=\"tertiary\">\n\t\t\t\t<NcActionButtonGroup>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<StarOutline :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tFavorite\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<EmailUnread :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tUnread\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Bookmark :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tImportant\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActionButtonGroup>\n\t\t\t\t<NcActionText>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<ClockOutlineIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ new Date().toLocaleDateString('en-US') }}\n\t\t\t\t</NcActionText>\n\t\t\t\t<NcActionSeparator />\n\t\t\t\t<NcActionButton>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<AlertOctagonIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tMark as spam\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionCheckbox v-model=\"selected\">\n\t\t\t\t\tSelect\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionButton>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<OpenInNewIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tMove thread\n\t\t\t\t</NcActionButton>\n\t\t\t\t<NcActionLink href=\"#\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<DownloadIcon :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tDownload message\n\t\t\t\t</NcActionLink>\n\t\t\t</NcActions>\n\t\t</p>\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Text settings\" variant=\"tertiary\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<FormatTitle :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<NcActionButtonGroup name=\"Alignment\">\n\t\t\t\t\t<NcActionButton aria-label=\"Left\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<FormatAlignLeft :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton aria-label=\"Center\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<FormatAlignCenter :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton aria-label=\"Right\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<FormatAlignRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActionButtonGroup>\n\t\t\t\t<NcActionSeparator />\n\t\t\t\t<NcActionCheckbox v-model=\"checked.bold\" value=\"bold\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<FormatBold :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tBold\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionCheckbox v-model=\"checked.italic\" value=\"italic\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<FormatItalic :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tItalic\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionCheckbox v-model=\"checked.underline\" value=\"underline\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<FormatUnderline :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tUnderline\n\t\t\t\t</NcActionCheckbox>\n\t\t\t\t<NcActionSeparator />\n\t\t\t\t<NcActionRadio name=\"color\" v-model=\"color.black\" value=\"Black\">Black</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" v-model=\"color.blue\" value=\"Blue\">Blue</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" v-model=\"color.red\" value=\"Red\">Red</NcActionRadio>\n\t\t\t\t<NcActionRadio name=\"color\" v-model=\"color.green\" value=\"Green\">Green</NcActionRadio>\n\t\t\t</NcActions>\n\t\t</p>\n\n\t\t<h2>Navigation</h2>\n\t\t<p>Has links or router links. May use text elements, captions and separators.</p>\n\t\t<p>Uses classic <kbd>Tab</kbd> navigation.</p>\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Applications navigation\" :inline=\"2\" variant=\"tertiary\">\n\t\t\t\t<NcActionLink href=\"/apps/dashboard\" icon=\"icon-category-dashboard-white\">\n\t\t\t\t\tDashboard\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/files\" icon=\"icon-files-white\">\n\t\t\t\t\tFiles\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/spreed\" icon=\"icon-talk-white\">\n\t\t\t\t\tTalk\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/contacts\" icon=\"icon-contacts-white\">\n\t\t\t\t\tContacts\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionLink href=\"/apps/circles\" icon=\"icon-circles-white\">\n\t\t\t\t\tCircles\n\t\t\t\t</NcActionLink>\n\t\t\t</NcActions>\n\t\t</p>\n\n\t\t<h2>Dialog</h2>\n\t\t<p>Includes data input elements, forms.</p>\n\t\t<p>Uses <kbd>Tab</kbd> navigation with a focus trap.</p>\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Group management\">\n\t\t\t\t<NcActionInput trailing-button-label=\"Submit\" label=\"Rename group\">\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</NcActionInput>\n\t\t\t\t<NcActionButton>\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\tRemove group\n\t\t\t\t</NcActionButton>\n\t\t\t</NcActions>\n\t\t</p>\n\n\t\t<h2>Tooltip</h2>\n\t\t<p>Has only text and no interactive elements.</p>\n\t\t<p>\n\t\t\t<NcActions aria-label=\"Contact\" :inline=\"1\">\n\t\t\t\t<NcActionLink aria-label=\"View profile\" href=\"/u/alice\" icon=\"icon-user-white\">\n\t\t\t\t\tView profile\n\t\t\t\t</NcActionLink>\n\t\t\t\t<NcActionText icon=\"icon-timezone-white\">\n\t\t\t\t\tLocal time: 10:12\n\t\t\t\t</NcActionText>\n\t\t\t</NcActions>\n\t\t</p>\n\t</div>\n</template>\n\n<script>\n// Common icons\nimport Pencil from 'vue-material-design-icons/Pencil.vue'\nimport Delete from 'vue-material-design-icons/Delete.vue'\n\n// Email icons\nimport StarOutline from 'vue-material-design-icons/StarOutline.vue'\nimport EmailUnread from 'vue-material-design-icons/Email.vue'\nimport Bookmark from 'vue-material-design-icons/Bookmark.vue'\nimport ClockOutlineIcon from 'vue-material-design-icons/ClockOutline.vue'\nimport AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'\nimport CheckIcon from 'vue-material-design-icons/Check.vue'\nimport OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'\nimport DownloadIcon from 'vue-material-design-icons/Download.vue'\n\n// Formatting icons\nimport FormatTitle from 'vue-material-design-icons/FormatTitle.vue'\nimport FormatAlignLeft from 'vue-material-design-icons/FormatAlignLeft.vue'\nimport FormatAlignCenter from 'vue-material-design-icons/FormatAlignCenter.vue'\nimport FormatAlignRight from 'vue-material-design-icons/FormatAlignRight.vue'\nimport FormatBold from 'vue-material-design-icons/FormatBold.vue'\nimport FormatItalic from 'vue-material-design-icons/FormatItalic.vue'\nimport FormatUnderline from 'vue-material-design-icons/FormatUnderline.vue'\n\nexport default {\n\tcomponents: {\n\t\t// Common icons\n\t\tPencil,\n\t\tDelete,\n\n\t\t// Email icons\n\t\tStarOutline,\n\t\tEmailUnread,\n\t\tBookmark,\n\t\tClockOutlineIcon,\n\t\tAlertOctagonIcon,\n\t\tCheckIcon,\n\t\tOpenInNewIcon,\n\t\tDownloadIcon,\n\n\t\t// Formatting icons\n\t\tFormatTitle,\n\t\tFormatAlignLeft,\n\t\tFormatAlignCenter,\n\t\tFormatAlignRight,\n\t\tFormatBold,\n\t\tFormatItalic,\n\t\tFormatUnderline,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselected: false,\n\t\t\t// Formatting\n\t\t\tchecked: {\n\t\t\t\tbold: true,\n\t\t\t\titalic: false,\n\t\t\t\tunderline: false,\n\t\t\t},\n\t\t\tcolor: {\n\t\t\t\tblack: true,\n\t\t\t\tblue: false,\n\t\t\t\tred: false,\n\t\t\t\tgreen: false,\n\t\t\t},\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\np {\n\tmargin: 1rem 0;\n}\n</style>\n```\n\n## NcActions children limitations\n\n`<NcActions>` is supposed to be used with direct `<NcAction*>` children.\nAlthough it works when actions are not direct children but wrapped in custom components, it has limitations:\n- No `inline` prop property, including a single action display;\n- Accessibility issues, including changed keyboard behavior;\n- Invalid HTML.\n\n```\n<template>\n\t<table class=\"actions-limitations-table\">\n\t\t<tr>\n\t\t\t<th style=\"width: 50%\">Non-direct children</th>\n\t\t\t<th style=\"width: 50%\">Direct NcAction* children</th>\n\t\t</tr>\n\n\t\t<tr>\n\t\t\t<th colspan=\"2\">This single button is supposed to be rendered as inline action but it is rendered as a menu:</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>\n\t\t\t\t<NcActions>\n\t\t\t\t\t<MyUserActionButton />\n\t\t\t\t</NcActions>\n\t\t\t</td>\n\t\t\t<td>\n\t\t\t\t<NcActions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Account :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tButton\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActions>\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th colspan=\"2\">This NcActions is supposed to have 2 inline buttons but it has none:</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>\n\t\t\t\t<NcActions :inline=\"2\">\n\t\t\t\t\t<MyUserActionButton v-for=\"i in 4\" />\n\t\t\t\t</NcActions>\n\t\t\t</td>\n\t\t\t<td>\n\t\t\t\t<NcActions :inline=\"2\">\n\t\t\t\t\t<NcActionButton v-for=\"i in 4\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Account :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tButton\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActions>\n\t\t\t</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<th colspan=\"2\">This NcActions is supposed to have a11y role menu and keyboard navigation but it acts like a dialog:</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>\n\t\t\t\t<NcActions>\n\t\t\t\t\t<MyActionsList />\n\t\t\t\t</NcActions>\n\t\t\t</td>\n\t\t\t<td>\n\t\t\t\t<NcActions>\n\t\t\t\t\t<NcActionButton v-for=\"i in 4\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Account :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tButton\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</NcActions>\n\t\t\t</td>\n\t\t</tr>\n\t</table>\n</template>\n\n<script>\nimport { h, resolveComponent } from 'vue'\nimport Account from 'vue-material-design-icons/Account.vue'\n\nexport default {\n\tcomponents: {\n\t\tAccount,\n\n\t\tMyUserActionButton: {\n\t\t\tname: 'MyUserActionButton',\n\t\t\tcomponents: { Account },\n\t\t\trender: () => h(resolveComponent('NcActionButton'), null, { default: () => 'Button', icon: () => h(Account, { size: 20 }) }),\n\t\t},\n\n\t\tMyActionsList: {\n\t\t\tname: 'MyActionsList',\n\t\t\tcomponents: { Account },\n\t\t\trender: () => h('div', null, {\n\t\t\t\tdefault: () => [\n\t\t\t\t\th(resolveComponent('NcActionButton'), null, { default: () => 'Button', icon: () => h(Account, { size: 20 }) }),\n\t\t\t\t\th(resolveComponent('NcActionButton'), null, { default: () => 'Button', icon: () => h(Account, { size: 20 }) }),\n\t\t\t\t\th(resolveComponent('NcActionButton'), null, { default: () => 'Button', icon: () => h(Account, { size: 20 }) }),\n\t\t\t\t\th(resolveComponent('NcActionButton'), null, { default: () => 'Button', icon: () => h(Account, { size: 20 }) }),\n\t\t\t\t],\n\t\t\t}),\n\t\t},\n\t},\n}\n</script>\n\n<style>\n.actions-limitations-table {\n\tborder-collapse: collapse;\n\twidth: 100%;\n\tth,\n\ttd {\n\t\tborder: 1px solid var(--color-border);\n\t\tpadding: var(--default-grid-baseline);\n\t\tmax-width: 50%;\n\t}\n\n\tth {\n\t\ttext-align: center;\n\t\ttext-wrap: wrap;\n\t}\n}\n</style>\n```\n</docs>\n\n<script>\nimport { useElementBounding, useWindowSize } from '@vueuse/core'\nimport { Fragment, computed, h, mergeProps, ref, toRef, warn } from 'vue'\nimport { useTrapStackControl } from '../../composables/useTrapStackControl.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isSlotPopulated } from '../../utils/isSlotPopulated.ts'\nimport { t } from '../../l10n.js'\n\nimport IconDotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\nimport NcButton from '../NcButton/index.ts'\nimport NcPopover from '../NcPopover/index.js'\nimport { NC_ACTIONS_CLOSE_MENU, NC_ACTIONS_IS_SEMANTIC_MENU } from './useNcActions.ts'\n\nconst focusableSelector = '.focusable'\n\n/**\n * The Actions component can be used to display one ore more actions.\n * If only a single action is provided, it will be rendered as an inline icon.\n * For more, a menu indicator will be shown and a popover menu containing the\n * actions will be opened on click.\n *\n * @since 0.10.0\n */\nexport default {\n\tname: 'NcActions',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tNcPopover,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * NcActions can be used as:\n\t\t\t * - Application menu (has menu role)\n\t\t\t * - Navigation (has no specific role, should be used an element with navigation role)\n\t\t\t * - Popover with plain text or text inputs (has no specific role)\n\t\t\t * Depending on the usage (used items), the menu and its items should have different roles for a11y.\n\t\t\t * Provide the role for NcAction* components in the NcActions content.\n\t\t\t * @type {import('vue').ComputedRef<boolean>}\n\t\t\t */\n\t\t\t[NC_ACTIONS_IS_SEMANTIC_MENU]: computed(() => this.actionsMenuSemanticType === 'menu'),\n\t\t\t[NC_ACTIONS_CLOSE_MENU]: this.closeMenu,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Specify the open state of the popover menu\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * This disables the internal open management,\n\t\t * so the actions menu only respects the `open` prop.\n\t\t * This is e.g. necessary for the NcAvatar component\n\t\t * to only open the actions menu after loading it's entries has finished.\n\t\t */\n\t\tmanualOpen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the name to show for single actions\n\t\t */\n\t\tforceName: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Specify the menu name\n\t\t */\n\t\tmenuName: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Apply primary styling for this menu\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Icon to show for the toggle menu button\n\t\t * when more than one action is inside the actions component.\n\t\t * Only replace the default three-dot icon if really necessary.\n\t\t */\n\t\tdefaultIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Aria label for the actions menu.\n\t\t *\n\t\t * If `menuName` is defined this will not be used to prevent\n\t\t * any accessible name conflicts. This ensures that the\n\t\t * element can be activated via voice input.\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Actions'),\n\t\t},\n\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Wanted direction of the menu\n\t\t */\n\t\tplacement: {\n\t\t\ttype: String,\n\t\t\tdefault: 'bottom',\n\t\t},\n\n\t\t/**\n\t\t * DOM element for the actions' popover boundaries\n\t\t */\n\t\tboundariesElement: {\n\t\t\ttype: Element,\n\t\t\tdefault: () => document.getElementById('content-vue') ?? document.querySelector('body'),\n\t\t},\n\n\t\t/**\n\t\t * Selector for the actions' popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: [String, Object, Element, Boolean],\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Disabled state of the main button (single action or menu toggle)\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Display x items inline out of the dropdown menu\n\t\t * Will be ignored if `forceMenu` is set\n\t\t */\n\t\tinline: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * Specifies the button variant used for trigger and single actions buttons.\n\t\t *\n\t\t * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success.\n\t\t * If left empty, the default button style will be applied.\n\t\t *\n\t\t * @since 8.23.0\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['primary', 'secondary', 'tertiary', 'tertiary-no-background', 'tertiary-on-primary', 'error', 'warning', 'success'].includes(value)\n\t\t\t},\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'click',\n\t\t'blur',\n\t\t'focus',\n\n\t\t'close',\n\t\t'closed',\n\t\t'open',\n\t\t'opened',\n\t\t'update:open',\n\t],\n\n\tsetup(props) {\n\t\tconst randomId = createElementId()\n\t\tconst triggerRandomId = `trigger-${randomId}`\n\n\t\tconst triggerButton = ref()\n\n\t\tconst { top, bottom } = useElementBounding(triggerButton)\n\t\tconst { top: boundaryTop, bottom: boundaryBottom } = useElementBounding(toRef(() => props.boundariesElement))\n\t\tconst { height: windowHeight } = useWindowSize()\n\t\tconst maxMenuHeight = computed(() => Math.max(\n\t\t\t// Either expand to the top\n\t\t\tMath.min(\n\t\t\t\t// max height is the top position of the trigger minus the header height minus the wedge and the padding\n\t\t\t\ttop.value - 84,\n\t\t\t\t// and also limited to the space in the boundary\n\t\t\t\ttop.value - boundaryTop.value,\n\t\t\t),\n\t\t\t// or expand to the bottom\n\t\t\tMath.min(\n\t\t\t\t// the max height is the window height minus current position of the trigger minus the wedge and padding\n\t\t\t\twindowHeight.value - bottom.value - 34,\n\t\t\t\t// and limit to the available space in the boundary\n\t\t\t\tboundaryBottom.value - bottom.value,\n\t\t\t),\n\t\t))\n\n\t\treturn {\n\t\t\ttriggerButton,\n\t\t\tmaxMenuHeight,\n\n\t\t\trandomId,\n\t\t\ttriggerRandomId,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\topened: this.open,\n\t\t\tfocusIndex: 0,\n\t\t\t/**\n\t\t\t * @type {'menu'|'navigation'|'dialog'|'tooltip'|'unknown'}\n\t\t\t */\n\t\t\tactionsMenuSemanticType: 'unknown',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\ttriggerButtonVariant() {\n\t\t\t// If requested, we use a primary button\n\t\t\treturn this.variant || (this.primary\n\t\t\t\t? 'primary'\n\t\t\t\t// If it has a name, we use a secondary button\n\t\t\t\t: this.menuName ? 'secondary' : 'tertiary')\n\t\t},\n\n\t\t/**\n\t\t * A11y roles and keyboard navigation configuration depending on the semantic type\n\t\t */\n\t\tconfig() {\n\t\t\t/**\n\t\t\t * Accessibility notes:\n\t\t\t *\n\t\t\t * There is no valid popup role for navigation and tooltip in `aria-haspopup`.\n\t\t\t * aria-haspopup=\"true\" is equivalent to aria-haspopup=\"menu\".\n\t\t\t * They must not be treated as menus.\n\t\t\t *\n\t\t\t * Having both arrow and tab navigation is not allowed for a11y.\n\t\t\t * Either menu is an atomic UI element, and arrows select menu items, Tab moves to the next UI element.\n\t\t\t * Or the menu is an expanded list of UI elements.\n\t\t\t *\n\t\t\t * Navigation type is just an \"expanded\" block, similar to native <details> element.\n\t\t\t */\n\t\t\tconst configs = {\n\t\t\t\tmenu: {\n\t\t\t\t\tpopupRole: 'menu',\n\t\t\t\t\twithArrowNavigation: true,\n\t\t\t\t\twithTabNavigation: false,\n\t\t\t\t\twithFocusTrap: false,\n\t\t\t\t},\n\t\t\t\tnavigation: {\n\t\t\t\t\tpopupRole: undefined,\n\t\t\t\t\twithArrowNavigation: false,\n\t\t\t\t\twithTabNavigation: true,\n\t\t\t\t\twithFocusTrap: false,\n\t\t\t\t},\n\t\t\t\tdialog: {\n\t\t\t\t\tpopupRole: 'dialog',\n\t\t\t\t\twithArrowNavigation: false,\n\t\t\t\t\twithTabNavigation: true,\n\t\t\t\t\twithFocusTrap: true,\n\t\t\t\t},\n\t\t\t\ttooltip: {\n\t\t\t\t\tpopupRole: undefined,\n\t\t\t\t\twithArrowNavigation: false,\n\t\t\t\t\twithTabNavigation: false,\n\t\t\t\t\twithFocusTrap: false,\n\t\t\t\t},\n\t\t\t\t// Due to Vue limitations, we sometimes cannot determine the true type\n\t\t\t\t// As a fallback use both arrow navigation and focus trap\n\t\t\t\tunknown: {\n\t\t\t\t\tpopupRole: undefined,\n\t\t\t\t\trole: undefined,\n\t\t\t\t\twithArrowNavigation: true,\n\t\t\t\t\twithTabNavigation: false,\n\t\t\t\t\twithFocusTrap: true,\n\t\t\t\t},\n\t\t\t}\n\t\t\treturn configs[this.actionsMenuSemanticType]\n\t\t},\n\n\t\twithFocusTrap() {\n\t\t\treturn this.config.withFocusTrap\n\t\t},\n\t},\n\n\twatch: {\n\t\t// Watch parent prop\n\t\topen(state) {\n\t\t\tif (state === this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.opened = state\n\t\t},\n\n\t\topened() {\n\t\t\t// Ensure that pressing escape will close the menu even if the menu is not hovered\n\t\t\t// and not currently active, e.g. because user opened the context menu\n\t\t\tif (this.opened) {\n\t\t\t\tdocument.body.addEventListener('keydown', this.handleEscapePressed)\n\t\t\t} else {\n\t\t\t\tdocument.body.removeEventListener('keydown', this.handleEscapePressed)\n\t\t\t}\n\t\t},\n\t},\n\n\tcreated() {\n\t\t// When component has its own custom focus management\n\t\t// The global focus trap stack should be paused\n\t\tuseTrapStackControl(() => this.opened, {\n\t\t\tdisabled: () => this.config.withFocusTrap,\n\t\t})\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Get the name of the action component\n\t\t *\n\t\t * @param {import('vue').VNode} action - a vnode with a NcAction* component instance\n\t\t * @return {string} the name of the action component\n\t\t */\n\t\tgetActionName(action) {\n\t\t\treturn action?.type?.name\n\t\t},\n\n\t\t/**\n\t\t * Do we have exactly one Action and\n\t\t * is it allowed as a standalone element?\n\t\t *\n\t\t * @param {import('vue').VNode} action The action to check\n\t\t * @return {boolean}\n\t\t */\n\t\tisValidSingleAction(action) {\n\t\t\treturn ['NcActionButton', 'NcActionLink', 'NcActionRouter'].includes(this.getActionName(action))\n\t\t},\n\t\tisAction(action) {\n\t\t\treturn this.getActionName(action)?.startsWith?.('NcAction')\n\t\t},\n\n\t\t/**\n\t\t * Check whether a icon prop value is an URL or not\n\t\t * @param {string} url The icon prop value\n\t\t */\n\t\tisIconUrl(url) {\n\t\t\ttry {\n\t\t\t\treturn !!(new URL(url, url.startsWith('/') ? window.location.origin : undefined))\n\t\t\t} catch (error) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\n\t\t// MENU STATE MANAGEMENT\n\t\topenMenu() {\n\t\t\tif (this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.opened = true\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu open state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:open', true)\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu is opened\n\t\t\t */\n\t\t\tthis.$emit('open')\n\t\t},\n\t\tasync closeMenu(returnFocus = true) {\n\t\t\tif (!this.opened) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Wait for the next tick to keep the menu in DOM, allowing other components to find what button in what menu was used,\n\t\t\t// for example, to implement auto set return focus.\n\t\t\t// NcPopover will actually remove the menu from DOM also on the next tick.\n\t\t\tawait this.$nextTick()\n\n\t\t\tthis.opened = false\n\n\t\t\tthis.$refs.popover?.clearFocusTrap({ returnFocus })\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu open state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:open', false)\n\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu is closed\n\t\t\t */\n\t\t\tthis.$emit('close')\n\n\t\t\t// close everything\n\t\t\tthis.focusIndex = 0\n\n\t\t\tif (returnFocus) {\n\t\t\t\t// Focus back the trigger button\n\t\t\t\tthis.$refs.triggerButton?.$el.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Called when popover is shown after the show delay\n\t\t */\n\t\tonOpened() {\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.focusFirstAction(null)\n\t\t\t\tthis.resizePopover()\n\n\t\t\t\t/**\n\t\t\t\t * Event emitted when the popover menu is opened.\n\t\t\t\t *\n\t\t\t\t * This event is emitted after `update:open` was emitted and the opening transition finished.\n\t\t\t\t */\n\t\t\t\tthis.$emit('opened')\n\t\t\t})\n\t\t},\n\n\t\tonClosed() {\n\t\t\t/**\n\t\t\t * Event emitted when the popover menu is closed.\n\t\t\t *\n\t\t\t * This event is emitted after `update:open` was emitted and the closing transition finished.\n\t\t\t */\n\t\t\t this.$emit('closed')\n\t\t},\n\n\t\t/**\n\t\t * Handle resizing the popover to make sure users can discover there is more to scroll\n\t\t */\n\t\tresizePopover() {\n\t\t\t// Get the inner v-popper element that defines the popover height (from floating-vue)\n\t\t\tconst inner = this.$refs.menu.closest('.v-popper__inner')\n\t\t\tconst height = this.$refs.menu.clientHeight\n\n\t\t\t// If the popover height is limited by the max-height (scrollbars shown) limit the height to half of the last element\n\t\t\tif (height > this.maxMenuHeight) {\n\t\t\t\t// sum of action heights\n\t\t\t\tlet currentHeight = 0\n\t\t\t\t// last action height\n\t\t\t\tlet actionHeight = 0\n\t\t\t\tfor (const action of this.$refs.menuList.children) {\n\t\t\t\t\t// If the max height would be overflown by half of the current element,\n\t\t\t\t\t// then we limit the height to the half of the previous element\n\t\t\t\t\tif ((currentHeight + action.clientHeight / 2) > this.maxMenuHeight) {\n\t\t\t\t\t\tinner.style.height = `${currentHeight - actionHeight / 2}px`\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t\t// otherwise sum up the height\n\t\t\t\t\tactionHeight = action.clientHeight\n\t\t\t\t\tcurrentHeight += actionHeight\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tinner.style.height = 'fit-content'\n\t\t\t}\n\t\t},\n\n\t\t// MENU KEYS & FOCUS MANAGEMENT\n\t\t/**\n\t\t * @return {HTMLElement|null}\n\t\t */\n\t\tgetCurrentActiveMenuItemElement() {\n\t\t\treturn this.$refs.menu.querySelector('li.active')\n\t\t},\n\n\t\t/**\n\t\t * @return {NodeListOf<HTMLElement>}\n\t\t */\n\t\tgetFocusableMenuItemElements() {\n\t\t\treturn this.$refs.menu.querySelectorAll(focusableSelector)\n\t\t},\n\n\t\t/**\n\t\t * Dispatches the keydown listener to different handlers\n\t\t *\n\t\t * @param {object} event The keydown event\n\t\t */\n\t\tonKeydown(event) {\n\t\t\tif (event.key === 'Tab') {\n\t\t\t\tif (this.config.withFocusTrap) {\n\t\t\t\t\t// Focus is managed by focus-trap\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tif (!this.config.withTabNavigation) {\n\t\t\t\t\t// Tab is not used for navigation - close the menu\n\t\t\t\t\t// Return focus to restore Tab sequence\n\t\t\t\t\t// So browser will correctly move focus to the next element\n\t\t\t\t\tthis.closeMenu(true)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\t// Tab is used for classic navigation but we implement it manually\n\n\t\t\t\tevent.preventDefault()\n\n\t\t\t\tconst focusList = this.getFocusableMenuItemElements()\n\t\t\t\tconst focusIndex = [...focusList].indexOf(document.activeElement)\n\t\t\t\tif (focusIndex === -1) {\n\t\t\t\t\t// This is not supposed to happen\n\t\t\t\t\t// But if it does - do nothing and keep native behavior\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tconst newFocusIndex = event.shiftKey ? focusIndex - 1 : focusIndex + 1\n\n\t\t\t\t// There is no focus-trap, so going out of the menu closes it\n\t\t\t\tif (newFocusIndex < 0 || newFocusIndex === focusList.length) {\n\t\t\t\t\tthis.closeMenu(true)\n\t\t\t\t}\n\n\t\t\t\t// Update current focused element\n\t\t\t\tthis.focusIndex = newFocusIndex\n\t\t\t\tthis.focusAction()\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tif (this.config.withArrowNavigation) {\n\t\t\t\tif (event.key === 'ArrowUp') {\n\t\t\t\t\tthis.focusPreviousAction(event)\n\t\t\t\t}\n\n\t\t\t\tif (event.key === 'ArrowDown') {\n\t\t\t\t\tthis.focusNextAction(event)\n\t\t\t\t}\n\n\t\t\t\tif (event.key === 'PageUp') {\n\t\t\t\t\tthis.focusFirstAction(event)\n\t\t\t\t}\n\n\t\t\t\tif (event.key === 'PageDown') {\n\t\t\t\t\tthis.focusLastAction(event)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis.handleEscapePressed(event)\n\t\t},\n\n\t\tonTriggerKeydown(event) {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\t// Tooltip has no focusable elements and the focus remains on the trigger button.\n\t\t\t\t// So keydown event on the menu cannot be handled to close Tooltip on Escape.\n\t\t\t\t// Handle on the trigger.\n\t\t\t\tif (this.actionsMenuSemanticType === 'tooltip') {\n\t\t\t\t\tthis.closeMenu()\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandleEscapePressed(event) {\n\t\t\tif (event.key === 'Escape') {\n\t\t\t\tthis.closeMenu()\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\n\n\t\tremoveCurrentActive() {\n\t\t\tconst currentActiveElement = this.$refs.menu.querySelector('li.active')\n\t\t\tif (currentActiveElement) {\n\t\t\t\tcurrentActiveElement.classList.remove('active')\n\t\t\t}\n\t\t},\n\t\tfocusAction() {\n\t\t\t// TODO: have a global disabled state for non input elements\n\t\t\tconst focusElement = this.getFocusableMenuItemElements()[this.focusIndex]\n\t\t\tif (focusElement) {\n\t\t\t\tthis.removeCurrentActive()\n\t\t\t\tconst liMenuParent = focusElement.closest('li.action')\n\t\t\t\tfocusElement.focus()\n\t\t\t\tif (liMenuParent) {\n\t\t\t\t\tliMenuParent.classList.add('active')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tfocusPreviousAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tif (this.focusIndex === 0) {\n\t\t\t\t\tthis.focusLastAction(event)\n\t\t\t\t} else {\n\t\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\t\tthis.focusIndex = this.focusIndex - 1\n\t\t\t\t}\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\t\tfocusNextAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tconst indexLength = this.getFocusableMenuItemElements().length - 1\n\t\t\t\tif (this.focusIndex === indexLength) {\n\t\t\t\t\tthis.focusFirstAction(event)\n\t\t\t\t} else {\n\t\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\t\tthis.focusIndex = this.focusIndex + 1\n\t\t\t\t}\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\t\tfocusFirstAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\t// In case a NcActionButton is considered checked we will use this one as a initial focus\n\t\t\t\t// Having aria-checked is the simplest way to determine the checked state of a button\n\t\t\t\t// TODO: determine when we need to focus the first checked item and when we not, for example, if menu has many radio groups\n\t\t\t\tconst firstCheckedIndex = [...this.getFocusableMenuItemElements()].findIndex((button) => {\n\t\t\t\t\treturn button.getAttribute('aria-checked') === 'true' && button.getAttribute('role') === 'menuitemradio'\n\t\t\t\t})\n\t\t\t\tthis.focusIndex = firstCheckedIndex > -1 ? firstCheckedIndex : 0\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\t\tfocusLastAction(event) {\n\t\t\tif (this.opened) {\n\t\t\t\tthis.preventIfEvent(event)\n\t\t\t\tthis.focusIndex = this.getFocusableMenuItemElements().length - 1\n\t\t\t\tthis.focusAction()\n\t\t\t}\n\t\t},\n\t\tpreventIfEvent(event) {\n\t\t\tif (event) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\t\tonFocus(event) {\n\t\t\tthis.$emit('focus', event)\n\t\t},\n\t\tonBlur(event) {\n\t\t\tthis.$emit('blur', event)\n\n\t\t\t// When there is no focusable elements to handle Tab press from actions menu\n\t\t\t// It requires manual closing\n\t\t\tif (this.actionsMenuSemanticType === 'tooltip') {\n\t\t\t\t// Tooltip is supposed to have no focusable element.\n\t\t\t\t// However, if there is a custom focusable element, it will be auto-focused and cause the menu to be closed on open.\n\t\t\t\tif (this.$refs.menu && this.getFocusableMenuItemElements().length === 0) {\n\t\t\t\t\tthis.closeMenu(false)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\tonClick(event) {\n\t\t\t/**\n\t\t\t * Event emitted when the menu toggle button is clicked.\n\t\t\t *\n\t\t\t * This is e.g. necessary for the NcAvatar component\n\t\t\t * which needs to fetch the menu items on click.\n\t\t\t *\n\t\t\t * @type {PointerEvent}\n\t\t\t */\n\t\t\tthis.$emit('click', event)\n\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t *\n\t * @return {object|undefined} The created VNode\n\t */\n\trender() {\n\t\tconst actions = []\n\t\t// We have to iterate over all slot elements\n\t\tconst findActions = (vnodes, actions) => {\n\t\t\tvnodes.forEach(vnode => {\n\t\t\t\tif (this.isAction(vnode)) {\n\t\t\t\t\tactions.push(vnode)\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\t// If we encounter a Fragment, we have to check its children too\n\t\t\t\tif (vnode.type === Fragment) {\n\t\t\t\t\tfindActions(vnode.children, actions)\n\t\t\t\t}\n\t\t\t})\n\t\t}\n\t\tfindActions(this.$slots.default?.(), actions)\n\n\t\t// Check that we have at least one action\n\t\tif (actions.length === 0) {\n\t\t\treturn\n\t\t}\n\n\t\t/**\n\t\t * Separate the actions into inline and menu actions\n\t\t */\n\n\t\t/**\n\t\t * @type {import('vue').VNode[]}\n\t\t */\n\t\tlet validInlineActions = actions.filter(this.isValidSingleAction)\n\t\tif (this.forceMenu && validInlineActions.length > 0 && this.inline > 0) {\n\t\t\twarn('Specifying forceMenu will ignore any inline actions rendering.')\n\t\t\tvalidInlineActions = []\n\t\t}\n\t\t/**\n\t\t * @type {import('vue').VNode[]}\n\t\t */\n\t\tconst inlineActions = validInlineActions.slice(0, this.inline)\n\t\t/**\n\t\t * @type {import('vue').VNode[]}\n\t\t */\n\t\tconst menuActions = actions.filter(action => !inlineActions.includes(action))\n\n\t\t/**\n\t\t * Determine what kind of menu we have.\n\t\t * It defines keyboard navigation and a11y.\n\t\t */\n\n\t\tconst menuItemsActions = ['NcActionButton', 'NcActionButtonGroup', 'NcActionCheckbox', 'NcActionRadio']\n\t\tconst textInputActions = ['NcActionInput', 'NcActionTextEditable']\n\t\tconst linkActions = ['NcActionLink', 'NcActionRouter']\n\n\t\tconst hasTextInputAction = menuActions.some(action => textInputActions.includes(this.getActionName(action)))\n\t\tconst hasMenuItemAction = menuActions.some(action => menuItemsActions.includes(this.getActionName(action)))\n\t\tconst hasLinkAction = menuActions.some(action => linkActions.includes(this.getActionName(action)))\n\n\t\tif (hasTextInputAction) {\n\t\t\tthis.actionsMenuSemanticType = 'dialog'\n\t\t} else if (hasMenuItemAction) {\n\t\t\tthis.actionsMenuSemanticType = 'menu'\n\t\t} else if (hasLinkAction) {\n\t\t\tthis.actionsMenuSemanticType = 'navigation'\n\t\t} else {\n\t\t\t// (!) Hotfix (!)\n\t\t\t// In Vue 2 it is not easy to search for NcAction* in sub-component of a slot.\n\t\t\t// When a menu is rendered, children are not mounted yet.\n\t\t\t// If we have NcActions > MyActionsList > NcActionButton, only MyActionsList's vnode is available.\n\t\t\t// So when NcActions has actions as non-direct children, here then we don't know about them.\n\t\t\t// Like this menu has no buttons/links/inputs.\n\t\t\t// It makes the menu incorrectly considered a tooltip.\n\t\t\tconst ncActions = actions.filter((action) => this.getActionName(action).startsWith('NcAction'))\n\t\t\tif (ncActions.length === actions.length) {\n\t\t\t\t// True tooltip\n\t\t\t\tthis.actionsMenuSemanticType = 'tooltip'\n\t\t\t} else {\n\t\t\t\t// Custom components are passed to the NcActions\n\t\t\t\tthis.actionsMenuSemanticType = 'unknown'\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Render the provided action\n\t\t *\n\t\t * @param {import('vue').VNode} action the action to render\n\t\t * @return {Function} the vue render function\n\t\t */\n\t\tconst renderInlineAction = (action) => {\n\t\t\tconst iconProp = action?.props?.icon\n\t\t\tconst icon = action?.children?.icon?.()?.[0] ?? (\n\t\t\t\tthis.isIconUrl(iconProp)\n\t\t\t\t\t? h('img', { class: 'action-item__menutoggle__icon', src: iconProp, alt: '' })\n\t\t\t\t\t: h('span', { class: ['icon', iconProp] })\n\t\t\t)\n\t\t\tconst text = action?.children?.default?.()?.[0]?.children?.trim()\n\t\t\tconst buttonText = this.forceName ? text : ''\n\n\t\t\tlet title = action?.props?.title\n\t\t\t// Show a default title for single actions if none is present\n\t\t\tif (!(this.forceName || title)) {\n\t\t\t\ttitle = text\n\t\t\t}\n\n\t\t\tconst propsToForward = { ...(action?.props ?? {}) }\n\t\t\tconst type = ['submit', 'reset'].includes(propsToForward.type) ? propsToForward.modelValue : 'button'\n\t\t\t// not available on NcButton or with different meaning\n\t\t\tdelete propsToForward.modelValue\n\t\t\tdelete propsToForward.type\n\n\t\t\treturn h(NcButton,\n\t\t\t\tmergeProps(\n\t\t\t\t\tpropsToForward,\n\t\t\t\t\t{\n\t\t\t\t\t\tclass: 'action-item action-item--single',\n\t\t\t\t\t\t'aria-label': action?.props?.['aria-label'] || text,\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t\tdisabled: this.disabled || action?.props?.disabled,\n\t\t\t\t\t\tpressed: action?.props?.modelValue,\n\t\t\t\t\t\ttype,\n\t\t\t\t\t\t// If it has a menuName, we use a secondary button\n\t\t\t\t\t\tvariant: this.variant || (buttonText ? 'secondary' : 'tertiary'),\n\t\t\t\t\t\tonFocus: this.onFocus,\n\t\t\t\t\t\tonBlur: this.onBlur,\n\t\t\t\t\t\t// forward any pressed state from NcButton just like NcActionButton does\n\t\t\t\t\t\t'onUpdate:pressed': action?.props?.['onUpdate:modelValue'] ?? (() => {}),\n\t\t\t\t\t},\n\t\t\t\t),\n\t\t\t\t{\n\t\t\t\t\tdefault: () => buttonText,\n\t\t\t\t\ticon: () => icon,\n\t\t\t\t},\n\t\t\t)\n\t\t}\n\n\t\t/**\n\t\t * Render the actions popover\n\t\t *\n\t\t * @param {Array} actions the actions to render within\n\t\t * @return {Function} the vue render function\n\t\t */\n\t\tconst renderActionsPopover = (actions) => {\n\t\t\tconst triggerIcon = isSlotPopulated(this.$slots.icon?.())\n\t\t\t\t? this.$slots.icon?.()\n\t\t\t\t: (this.defaultIcon\n\t\t\t\t\t? h('span', { class: ['icon', this.defaultIcon] })\n\t\t\t\t\t: h(IconDotsHorizontal, { size: 20 })\n\t\t\t\t)\n\t\t\tconst triggerRandomId = `${this.randomId}-trigger`\n\t\t\treturn h(NcPopover,\n\t\t\t\t{\n\t\t\t\t\tref: 'popover',\n\t\t\t\t\tdelay: 0,\n\t\t\t\t\thandleResize: true,\n\t\t\t\t\tshown: this.opened,\n\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\tboundary: this.boundariesElement,\n\t\t\t\t\tcontainer: this.container,\n\t\t\t\t\t...this.manualOpen && { triggers: [] },\n\t\t\t\t\tpopoverBaseClass: 'action-item__popper',\n\t\t\t\t\tpopupRole: this.config.popupRole,\n\t\t\t\t\tsetReturnFocus: this.config.withFocusTrap ? this.$refs.triggerButton?.$el : null,\n\t\t\t\t\tfocusTrap: this.config.withFocusTrap,\n\t\t\t\t\tonShow: this.openMenu,\n\t\t\t\t\tonAfterShow: this.onOpened,\n\t\t\t\t\tonAfterClose: this.onClosed,\n\t\t\t\t\tonHide: this.closeMenu,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\ttrigger: () => h(NcButton, {\n\t\t\t\t\t\tid: triggerRandomId,\n\t\t\t\t\t\tclass: 'action-item__menutoggle',\n\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\tvariant: this.triggerButtonVariant,\n\t\t\t\t\t\tref: 'triggerButton',\n\t\t\t\t\t\t'aria-label': this.menuName ? null : this.ariaLabel,\n\t\t\t\t\t\t// 'aria-controls' should only present together with a valid aria-haspopup\n\t\t\t\t\t\t'aria-controls': this.opened && this.config.popupRole ? this.randomId : null,\n\t\t\t\t\t\tonFocus: this.onFocus,\n\t\t\t\t\t\tonBlur: this.onBlur,\n\t\t\t\t\t\tonClick: this.onClick,\n\t\t\t\t\t\tonKeydown: this.onTriggerKeydown,\n\t\t\t\t\t}, {\n\t\t\t\t\t\ticon: () => triggerIcon,\n\t\t\t\t\t\tdefault: () => this.menuName,\n\t\t\t\t\t}),\n\t\t\t\t\tdefault: () => h('div', {\n\t\t\t\t\t\tclass: {\n\t\t\t\t\t\t\topen: this.opened,\n\t\t\t\t\t\t},\n\t\t\t\t\t\ttabindex: '-1',\n\t\t\t\t\t\tonKeydown: this.onKeydown,\n\t\t\t\t\t\tref: 'menu',\n\t\t\t\t\t}, [\n\t\t\t\t\t\th('ul', {\n\t\t\t\t\t\t\tid: this.randomId,\n\t\t\t\t\t\t\ttabindex: '-1',\n\t\t\t\t\t\t\tref: 'menuList',\n\t\t\t\t\t\t\trole: this.config.popupRole,\n\t\t\t\t\t\t\t// For most roles a label is required (dialog, menu), but also in general nothing speaks against labelling a list.\n\t\t\t\t\t\t\t// It is even recommended to do so.\n\t\t\t\t\t\t\t'aria-labelledby': triggerRandomId,\n\t\t\t\t\t\t\t'aria-modal': this.actionsMenuSemanticType === 'dialog' ? 'true' : undefined,\n\t\t\t\t\t\t}, [\n\t\t\t\t\t\t\tactions,\n\t\t\t\t\t\t]),\n\t\t\t\t\t]),\n\t\t\t\t},\n\t\t\t)\n\t\t}\n\n\t\t/**\n\t\t * If we have a single action only and didn't force a menu,\n\t\t * we render the action as a standalone button\n\t\t */\n\t\tif (actions.length === 1 && validInlineActions.length === 1 && !this.forceMenu) {\n\t\t\treturn renderInlineAction(actions[0])\n\t\t}\n\n\t\t// If we completely re-render the children\n\t\t// we need to focus the first action again\n\t\t// Mostly used when clicking a menu item\n\t\tthis.$nextTick(() => {\n\t\t\tif (this.opened && this.$refs.menu) {\n\t\t\t\tthis.resizePopover()\n\t\t\t\tconst isAnyActive = this.$refs.menu.querySelector('li.active') || []\n\t\t\t\tif (isAnyActive.length === 0) {\n\t\t\t\t\tthis.focusFirstAction()\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\n\t\t/**\n\t\t * If we some inline actions to render, render them, then the menu\n\t\t */\n\t\tif (inlineActions.length > 0 && this.inline > 0) {\n\t\t\treturn h('div',\n\t\t\t\t{\n\t\t\t\t\tclass: [\n\t\t\t\t\t\t'action-items',\n\t\t\t\t\t\t`action-item--${this.triggerButtonVariant}`,\n\t\t\t\t\t],\n\t\t\t\t},\n\t\t\t\t[\n\t\t\t\t\t// Render inline actions\n\t\t\t\t\t...inlineActions.map(renderInlineAction),\n\t\t\t\t\t// render the rest within the popover menu\n\t\t\t\t\tmenuActions.length > 0\n\t\t\t\t\t\t? h('div',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclass: [\n\t\t\t\t\t\t\t\t\t'action-item',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t'action-item--open': this.opened,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t[\n\t\t\t\t\t\t\t\trenderActionsPopover(menuActions),\n\t\t\t\t\t\t\t])\n\t\t\t\t\t\t: null,\n\t\t\t\t])\n\t\t}\n\n\t\t/**\n\t\t * Otherwise, we render the actions in a popover\n\t\t */\n\t\treturn h('div',\n\t\t\t{\n\t\t\t\tclass: [\n\t\t\t\t\t'action-item action-item--default-popover',\n\t\t\t\t\t`action-item--${this.triggerButtonVariant}`,\n\t\t\t\t\t{\n\t\t\t\t\t\t'action-item--open': this.opened,\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t},\n\t\t\t[\n\t\t\t\trenderActionsPopover(actions),\n\t\t\t],\n\t\t)\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n// Inline buttons\n.action-items {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: calc($icon-margin / 2);\n}\n\n.action-item {\n\t--open-background-color: var(--color-background-hover, $action-background-hover);\n\tposition: relative;\n\tdisplay: inline-block;\n\n\t&.action-item--primary {\n\t\t--open-background-color: var(--color-primary-element-hover);\n\t}\n\n\t&.action-item--secondary {\n\t\t--open-background-color: var(--color-primary-element-light-hover);\n\t}\n\n\t&.action-item--error {\n\t\t--open-background-color: var(--color-error-hover);\n\t}\n\n\t&.action-item--warning {\n\t\t--open-background-color: var(--color-warning-hover);\n\t}\n\n\t&.action-item--success {\n\t\t--open-background-color: var(--color-success-hover);\n\t}\n\n\t&.action-item--tertiary-no-background {\n\t\t--open-background-color: transparent;\n\t}\n\n\t&.action-item--open .action-item__menutoggle {\n\t\tbackground-color: var(--open-background-color);\n\t}\n\n\t&__menutoggle__icon {\n\t\twidth: 20px;\n\t\theight: 20px;\n\t\tobject-fit: contain;\n\t}\n}\n</style>\n\n<style lang=\"scss\">\n// We overwrote the popover base class, so we can style\n// the popover__inner for actions only.\n.v-popper--theme-dropdown.v-popper__popper.action-item__popper .v-popper__wrapper {\n\tborder-radius: var(--border-radius-large);\n\n\t.v-popper__inner {\n\t\tborder-radius: var(--border-radius-large);\n\t\tpadding: 4px;\n\t\tmax-height: calc(100vh - var(--header-height));\n\t\toverflow: auto;\n\t}\n}\n</style>\n"],"names":["actions","IconDotsHorizontal"],"mappings":"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"}

package/dist/chunks/NcAppContent-BMiA5ySy.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcAppContent-BMiA5ySy.mjs","sources":["../../src/utils/appName.ts","../../src/components/NcAppContent/NcAppDetailsToggle.vue","../../src/components/NcAppContent/NcAppContent.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport logger from './logger.ts'\n\nlet realAppName = 'missing-app-name'\n\ntry {\n\t// @ts-expect-error This is a name replaces by the compiler\n\trealAppName = appName\n} catch {\n\tlogger.error('The `@nextcloud/vue` library was used without setting / replacing the `appName`.')\n}\n\nexport const APP_NAME = realAppName\n","\n\n<template>\n\t<NcButton :aria-label=\"title\"\n\t\tclass=\"app-details-toggle\"\n\t\t:class=\"{ 'app-details-toggle--mobile': isMobile }\"\n\t\t:title\n\t\tvariant=\"tertiary\">\n\t\t<template #icon>\n\t\t\t<ArrowLeft v-if=\"isRtl\" :size=\"20\" />\n\t\t\t<ArrowRight v-else :size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { emit } from '@nextcloud/event-bus'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { isRtl } from '../../utils/rtl.ts'\nimport { t } from '../../l10n.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport NcButton from '../NcButton/index.ts'\n\nexport default {\n\tname: 'NcAppDetailsToggle',\n\n\tcomponents: {\n\t\tArrowRight,\n\t\tArrowLeft,\n\t\tNcButton,\n\t},\n\tsetup() {\n\t\treturn {\n\t\t\tisRtl,\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\ttitle() {\n\t\t\treturn t('Go back to the list')\n\t\t},\n\t},\n\twatch: {\n\t\tisMobile: {\n\t\t\timmediate: true,\n\t\t\thandler() {\n\t\t\t\tthis.toggleAppNavigationButton(this.isMobile)\n\t\t\t},\n\t\t},\n\t},\n\n\tbeforeUnmount() {\n\t\tif (this.isMobile) {\n\t\t\tthis.toggleAppNavigationButton(false)\n\t\t}\n\t},\n\n\tmethods: {\n\t\ttoggleAppNavigationButton(hide = true) {\n\t\t\tconst appNavigationToggle = document.querySelector('.app-navigation .app-navigation-toggle')\n\t\t\tif (appNavigationToggle) {\n\t\t\t\tappNavigationToggle.style.display = hide ? 'none' : null\n\n\t\t\t\t// If we hide the NavigationToggle, we need to make sure the Navigation is also closed\n\t\t\t\tif (hide === true) {\n\t\t\t\t\temit('toggle-navigation', { open: false })\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-details-toggle {\n\tposition: sticky;\n\twidth: var(--default-clickable-area);\n\theight: var(--default-clickable-area);\n\tpadding: $icon-margin;\n\tcursor: pointer;\n\topacity: .6;\n\ttransform: rotate(180deg);\n\tbackground-color: var(--color-main-background);\n\tz-index: 2000;\n\n\ttop: var(--app-navigation-padding);\n\t// Navigation Toggle button width + 2 paddings around\n\tinset-inline-start: calc(var(--default-clickable-area) + var(--app-navigation-padding) * 2);\n\t&--mobile {\n\t\t// There is no NavigationToggle button\n\t\tinset-inline-start: var(--app-navigation-padding);\n\t}\n\n\t&:active,\n\t&:hover,\n\t&:focus {\n\t\topacity: 1;\n\t}\n}\n\n</style>\n","\n\n<docs>\n### General description\n\nThis components provides a wrapper around the main app's content.\n\nSingle-column layouts can just use the default slot. A resizable column\ncan be added by providing content to the named slot `list`.\n\n### CSS variables\nIn the css section some css variables are declared and will be available for\nall the children of the NcAppContent component\n\n### Examples\n\n#### Usage: Single-column content\n```vue\n<template>\n\t<NcAppContent>\n\t\t<h2>Single-column main content</h2>\n\t</NcAppContent>\n</template>\n```\n\n#### Usage: Two resizable columns\n```vue\n<template>\n\t<NcAppContent>\n\t\t<template #list>\n\t\t\t<div>Resizable list content</div>\n\t\t</template>\n\n\t\t<div>Main content</div>\n\t</NcAppContent>\n</template>\n```\n\n#### Overriding Defaults\nThe default, min and max sizes (in percent) of the resizable list column can be overridden.\nThe list size must be between the min and the max width value.\n\n```\n<NcAppContent\n\t:list-size=\"35\"\n\t:list-min-width=\"20\"\n\t:list-max-width=\"45\"\n>...</NcAppContent>\n```\n\n#### Usage: Custom document title\nFor accessibility reasons every document should have a `h1` heading,\nthis is visually hidden, but required for a semantically correct document.\nYou can use your app name or current view for the heading.\n\nAdditionally you can set a custom document title, e.g. to show the current status.\n\n```vue\n<template>\n\t<NcAppContent :pageHeading=\"heading ? 'Heading' : undefined\" :pageTitle=\"title ? 'Title' : undefined\" >\n\t\t<NcCheckboxRadioSwitch type=\"switch\" :checked.sync=\"title\">\n\t\t\tToggle title\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch type=\"switch\" :checked.sync=\"heading\">\n\t\t\tToggle Heading\n\t\t</NcCheckboxRadioSwitch>\n\t\t<NcButton @click=\"reset\">Reset</NcButton>\n\t</NcAppContent>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\theading: false,\n\t\t\ttitle: false,\n\t\t}\n\t},\n\tmethods: {\n\t\treset() {\n\t\t\tthis.heading = false\n\t\t\tthis.title = false\n\t\t\tdocument.title = ''\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<main id=\"app-content-vue\" class=\"app-content no-snapper\" :class=\"{ 'app-content--has-list': hasList }\">\n\t\t<h1 v-if=\"pageHeading\" class=\"hidden-visually\">\n\t\t\t{{ pageHeading }}\n\t\t</h1>\n\n\t\t<template v-if=\"hasList\">\n\t\t\t\n\t\t\t<div v-if=\"isMobile || layout === 'no-split'\"\n\t\t\t\tclass=\"app-content-wrapper app-content-wrapper--no-split\"\n\t\t\t\t:class=\"{\n\t\t\t\t\t'app-content-wrapper--show-details': showDetails,\n\t\t\t\t\t'app-content-wrapper--show-list': !showDetails,\n\t\t\t\t\t'app-content-wrapper--mobile': isMobile,}\">\n\t\t\t\t<NcAppDetailsToggle v-if=\"showDetails\" @click.stop.prevent=\"hideDetails\" />\n\n\t\t\t\t<div v-show=\"!showDetails\">\n\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t</div>\n\t\t\t\t<slot v-if=\"showDetails\" />\n\t\t\t</div>\n\t\t\t<div v-else-if=\"layout === 'vertical-split' || layout === 'horizontal-split'\" class=\"app-content-wrapper\">\n\t\t\t\t<Splitpanes :horizontal=\"layout === 'horizontal-split'\"\n\t\t\t\t\tclass=\"default-theme\"\n\t\t\t\t\t:class=\"{ 'splitpanes--horizontal': layout === 'horizontal-split',\n\t\t\t\t\t\t'splitpanes--vertical': layout === 'vertical-split'\n\t\t\t\t\t}\"\n\t\t\t\t\t:rtl=\"isRtl\"\n\t\t\t\t\t@resized=\"handlePaneResize\">\n\t\t\t\t\t<Pane class=\"splitpanes__pane-list\"\n\t\t\t\t\t\t:size=\"listPaneSize || paneDefaults.list.size\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.list.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.list.max\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t<slot name=\"list\" />\n\t\t\t\t\t</Pane>\n\n\t\t\t\t\t<Pane class=\"splitpanes__pane-details\"\n\t\t\t\t\t\t:size=\"detailsPaneSize\"\n\t\t\t\t\t\t:min-size=\"paneDefaults.details.min\"\n\t\t\t\t\t\t:max-size=\"paneDefaults.details.max\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</Pane>\n\t\t\t\t</Splitpanes>\n\t\t\t</div>\n\t\t</template>\n\t\t\n\t\t<slot v-if=\"!hasList\" />\n\t</main>\n</template>\n\n<script>\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { emit } from '@nextcloud/event-bus'\nimport { loadState } from '@nextcloud/initial-state'\nimport { useSwipe } from '@vueuse/core'\nimport { Splitpanes, Pane } from 'splitpanes'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { APP_NAME } from '../../utils/appName.ts'\nimport { isRtl } from '../../utils/rtl.ts'\n\nimport NcAppDetailsToggle from './NcAppDetailsToggle.vue'\n\nimport 'splitpanes/dist/splitpanes.css'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\nconst { name: productName } = loadState('theming', 'data', { name: 'Nextcloud' })\nconst activeApp = loadState('core', 'active-app', APP_NAME)\nconst localizedAppName = loadState('core', 'apps', {})[activeApp]?.name ?? APP_NAME\n\n/**\n * App content container to be used for the main content of your app\n *\n */\nexport default {\n\tname: 'NcAppContent',\n\n\tcomponents: {\n\t\tNcAppDetailsToggle,\n\t\tPane,\n\t\tSplitpanes,\n\t},\n\tprops: {\n\t\t/**\n\t\t * Allows to disable the control by swipe of the app navigation open state.\n\t\t */\n\t\tdisableSwipe: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the default width of the resizable list in % on vertical-split\n\t\t * Allows you to set the default height of the resizable list in % on horizontal-split\n\t\t * Must be between listMinWidth and listMaxWidth\n\t\t */\n\t\tlistSize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the minimum width of the list column in % on vertical-split\n\t\t * Allows you to set the minimum height of the list column in % on horizontal-split\n\t\t */\n\t\tlistMinWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 15,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the maximum width of the list column in % on vertical-split\n\t\t * Allows you to set the maximum height of the list column in % on horizontal-split\n\t\t */\n\t\tlistMaxWidth: {\n\t\t\ttype: Number,\n\t\t\tdefault: 40,\n\t\t},\n\n\t\t/**\n\t\t * Specify the config key for the pane config sizes\n\t\t * Default is the global var appName if you use the webpack-vue-config\n\t\t */\n\t\tpaneConfigKey: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * When in mobile view, only the list or the details are shown.\n\t\t *\n\t\t * If you provide a list, you need to provide a variable\n\t\t * that will be set to true by the user when an element of\n\t\t * the list gets selected. The details will then show a back\n\t\t * arrow to return to the list that will update this prop to false.\n\t\t */\n\t\tshowDetails: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Specify the `<h1>` page heading\n\t\t */\n\t\tpageHeading: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Content layout used when there is a list together with content:\n\t\t * - `vertical-split` - a 2-column layout with list and default content separated vertically\n\t\t * - `no-split` - a single column layout; List is shown when `showDetails` is `false`, otherwise the default slot content is shown with a back button to return to the list.\n\t\t * - 'horizontal-split' - a 2-column layout with list and default content separated horizontally\n\t\t * On mobile screen `no-split` layout is forced.\n\t\t */\n\t\tlayout: {\n\t\t\ttype: String,\n\t\t\tdefault: 'vertical-split',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['no-split', 'vertical-split', 'horizontal-split'].includes(value)\n\t\t\t},\n\t\t},\n\n\t\t/**\n\t\t * Allow setting the page's `<title>`\n\t\t *\n\t\t * If a page heading is set it defaults to `{pageHeading} - {appName} - {productName}` e.g. `Favorites - Files - Nextcloud`.\n\t\t * When the page heading and the app name is the same only one is used, e.g. `Files - Files - Nextcloud` is shown as `Files - Nextcloud`.\n\t\t * When setting the prop then the following format will be used: `{pageTitle} - {pageHeading || appName} - {productName}`\n\t\t */\n\t\tpageTitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:showDetails',\n\t\t'resize:list',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t\tisRtl,\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tcontentHeight: 0,\n\t\t\thasList: false,\n\t\t\thasContent: false,\n\t\t\tswiping: {},\n\t\t\tlistPaneSize: this.restorePaneConfig(),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tpaneConfigID() {\n\t\t\t// If provided, let's use it\n\t\t\tif (this.paneConfigKey !== '') {\n\t\t\t\treturn `pane-list-size-${this.paneConfigKey}`\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\t// Using the webpack-vue-config, appName is a global variable\n\t\t\t\t// This will throw a ReferenceError when the global variable is missing\n\t\t\t\t// In that case either you provide paneConfigKey or else it fallback\n\t\t\t\t// to a global storage key\n\t\t\t\treturn `pane-list-size-${APP_NAME}`\n\t\t\t} catch (e) {\n\t\t\t\tconsole.info('[INFO] AppContent:', 'falling back to global nextcloud pane config')\n\t\t\t\treturn 'pane-list-size-nextcloud'\n\t\t\t}\n\t\t},\n\n\t\tdetailsPaneSize() {\n\t\t\tif (this.listPaneSize) {\n\t\t\t\treturn 100 - this.listPaneSize\n\t\t\t}\n\t\t\treturn this.paneDefaults.details.size\n\t\t},\n\n\t\tpaneDefaults() {\n\t\t\treturn {\n\t\t\t\tlist: {\n\t\t\t\t\tsize: this.listSize,\n\t\t\t\t\tmin: this.listMinWidth,\n\t\t\t\t\tmax: this.listMaxWidth,\n\t\t\t\t},\n\n\t\t\t\t// set the inverse values of the details column\n\t\t\t\t// based on the provided (or default) values of the list column\n\t\t\t\tdetails: {\n\t\t\t\t\tsize: 100 - this.listSize,\n\t\t\t\t\tmin: 100 - this.listMaxWidth,\n\t\t\t\t\tmax: 100 - this.listMinWidth,\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\n\t\trealPageTitle() {\n\t\t\tconst entries = new Set()\n\t\t\tif (this.pageTitle) {\n\t\t\t\tentries.add(this.pageTitle)\n\t\t\t}\n\t\t\tif (this.pageHeading) {\n\t\t\t\tentries.add(this.pageHeading)\n\t\t\t}\n\t\t\tif (entries.size === 0) {\n\t\t\t\treturn null\n\t\t\t}\n\n\t\t\tif (entries.size < 2) {\n\t\t\t\t// Only add if not already pageHeading and pageTitle are included\n\t\t\t\tentries.add(localizedAppName)\n\t\t\t}\n\t\t\tentries.add(productName)\n\t\t\treturn [...entries.values()].join(' - ')\n\t\t},\n\t},\n\n\twatch: {\n\t\trealPageTitle: {\n\t\t\timmediate: true,\n\t\t\thandler() {\n\t\t\t\tif (this.realPageTitle !== null) {\n\t\t\t\t\tdocument.title = this.realPageTitle\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t},\n\n\tupdated() {\n\t\tthis.checkSlots()\n\t},\n\n\tmounted() {\n\t\tif (!this.disableSwipe) {\n\t\t\tthis.swiping = useSwipe(this.$el, {\n\t\t\t\tonSwipeEnd: this.handleSwipe,\n\t\t\t})\n\t\t}\n\n\t\tthis.checkSlots()\n\t\tthis.restorePaneConfig()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * handle the swipe event\n\t\t *\n\t\t * @param {TouchEvent} e The touch event\n\t\t * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event\n\t\t */\n\t\thandleSwipe(e, direction) {\n\t\t\tconst minSwipeX = 70\n\t\t\tconst touchZone = 300\n\t\t\tif (Math.abs(this.swiping.lengthX) > minSwipeX) {\n\t\t\t\tif (this.swiping.coordsStart.x < (touchZone / 2) && direction === 'right') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: true,\n\t\t\t\t\t})\n\t\t\t\t} else if (this.swiping.coordsStart.x < touchZone * 1.5 && direction === 'left') {\n\t\t\t\t\temit('toggle-navigation', {\n\t\t\t\t\t\topen: false,\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\thandlePaneResize(event) {\n\t\t\tconst listPaneSize = parseInt(event[0].size, 10)\n\t\t\tbrowserStorage.setItem(this.paneConfigID, JSON.stringify(listPaneSize))\n\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t/**\n\t\t\t * Emitted when the list pane is resized by the user\n\t\t\t */\n\t\t\tthis.$emit('resize:list', { size: listPaneSize })\n\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t},\n\n\t\t// $slots is not reactive, we need to update this manually\n\t\tcheckSlots() {\n\t\t\tthis.hasList = !!this.$slots.list\n\t\t\tthis.hasContent = !!this.$slots.default\n\t\t},\n\n\t\t// browserStorage is not reactive, we need to update this manually\n\t\trestorePaneConfig() {\n\t\t\tconst listPaneSize = parseInt(browserStorage.getItem(this.paneConfigID), 10)\n\t\t\tif (!isNaN(listPaneSize) && listPaneSize !== this.listPaneSize) {\n\t\t\t\tconsole.debug('AppContent pane config', listPaneSize)\n\t\t\t\tthis.listPaneSize = listPaneSize\n\t\t\t\treturn listPaneSize\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * The user clicked the back arrow from the details view\n\t\t */\n\t\thideDetails() {\n\t\t\tthis.$emit('update:showDetails', false)\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n\n.app-content {\n\tposition: initial;\n\tz-index: 1000;\n\tflex-basis: 100vw;\n\theight: 100%;\n\t// Overriding server styles TODO: cleanup!\n\tmargin: 0 !important;\n\tbackground-color: var(--color-main-background);\n\tmin-width: 0;\n\n\t&:not(.app-content--has-list) {\n\t\toverflow: auto;\n\t}\n}\n\n.app-content-wrapper {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100%;\n}\n\n// Mobile list/details handling\n.app-content-wrapper--no-split {\n\t&.app-content-wrapper--show-list :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t&.app-content-wrapper--show-details :deep() {\n\t\t.app-content-list {\n\t\t\tdisplay: none;\n\t\t}\n\t\t.app-content-details {\n\t\t\tdisplay: block;\n\t\t}\n\t}\n}\n\n:deep(.splitpanes.default-theme) {\n\t.app-content-list {\n\t\tmax-width: none;\n\t\t/* Thin scrollbar is hard to catch on resizable columns */\n\t\tscrollbar-width: auto;\n\t}\n\n\t.splitpanes__pane {\n\t\tbackground-color: transparent;\n\t\ttransition: none;\n\n\t\t&-list {\n\t\t\tmin-width: 300px;\n\t\t\tposition: sticky;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\n\t\t&-details {\n\t\t\toverflow-y: auto;\n\n\t\t\t@media only screen and (width < $breakpoint-mobile) {\n\t\t\t\tmin-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.splitpanes__splitter {\n\t\tbackground-color: var(--color-main-background);\n\t\t&::before, &::after {\n\t\t\tbackground-color: var(--color-border);\n\t\t}\n\t}\n\n\t&.splitpanes--vertical .splitpanes__splitter {\n\t\tborder-inline-start: 1px solid var(--color-border);\n\t}\n\n\t&.splitpanes--horizontal .splitpanes__splitter {\n\t\tborder-top: 1px solid var(--color-border);\n\t}\n}\n\n.app-content-wrapper--show-list {\n\t:deep(.app-content-list) {\n\t\tmax-width: none;\n\t}\n}\n</style>\n"],"names":["_sfc_main","_createBlock","_normalizeClass","_createElementBlock","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_withModifiers","_createElementVNode","_renderSlot","_createVNode","_withCtx"],"mappings":"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"}

package/dist/chunks/NcAppContentDetails-DsEEBJ0U.mjs DELETED Viewed

@@ -1,16 +0,0 @@
-import { createElementBlock, openBlock, renderSlot } from "vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
-const _sfc_main = {
-  name: "NcAppContentDetails"
-};
-const _hoisted_1 = { class: "app-content-details" };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock("div", _hoisted_1, [
-    renderSlot(_ctx.$slots, "default")
-  ]);
-}
-const NcAppContentDetails = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export {
-  NcAppContentDetails as N
-};
-//# sourceMappingURL=NcAppContentDetails-DsEEBJ0U.mjs.map

package/dist/chunks/NcAppContentDetails-DsEEBJ0U.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcAppContentDetails-DsEEBJ0U.mjs","sources":["../../src/components/NcAppContentDetails/NcAppContentDetails.vue"],"sourcesContent":["\n\n<template>\n\t<div class=\"app-content-details\">\n\t\t\n\t\t<slot />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppContentDetails',\n}\n</script>\n"],"names":["_openBlock","_createElementBlock","_renderSlot"],"mappings":";;AAaA,MAAK,YAAU;AAAA,EACd,MAAM;AACP;AATM,MAAA,aAAA,EAAA,OAAM,sBAAqB;;AAAhC,SAAAA,UAAA,GAAAC,mBAGM,OAHN,YAGM;AAAA,IADLC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;"}

package/dist/chunks/NcAppSidebar-B7shIqzm.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcAppSidebar-B7shIqzm.mjs","sources":["../../src/components/NcAppSidebar/NcAppSidebarTabs.vue","../../node_modules/vue-material-design-icons/DockRight.vue","../../node_modules/vue-material-design-icons/Star.vue","../../node_modules/vue-material-design-icons/StarOutline.vue","../../src/components/NcAppSidebar/NcAppSidebar.vue"],"sourcesContent":["\n\n\n<template>\n\t<div class=\"app-sidebar-tabs\">\n\t\t\n\t\t\n\t\t<div v-if=\"hasMultipleTabs || showForSingleTab\"\n\t\t\trole=\"tablist\"\n\t\t\tclass=\"app-sidebar-tabs__nav\"\n\t\t\t@keydown.left.exact.prevent.stop=\"focusPreviousTab\"\n\t\t\t@keydown.right.exact.prevent.stop=\"focusNextTab\"\n\t\t\t@keydown.tab.exact.prevent.stop=\"focusActiveTabContent\"\n\t\t\t@keydown.home.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.end.exact.prevent.stop=\"focusLastTab\"\n\t\t\t@keydown.page-up.exact.prevent.stop=\"focusFirstTab\"\n\t\t\t@keydown.page-down.exact.prevent.stop=\"focusLastTab\">\n\t\t\t<NcCheckboxRadioSwitch v-for=\"tab in tabs\"\n\t\t\t\t:key=\"tab.id\"\n\t\t\t\t:aria-controls=\"`tab-${tab.id}`\"\n\t\t\t\t:aria-selected=\"String(activeTab === tab.id)\"\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\t:model-value=\"activeTab === tab.id\"\n\t\t\t\t:wrapper-id=\"`tab-button-${tab.id}`\"\n\t\t\t\t:tabindex=\"activeTab === tab.id ? 0 : -1\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\"\n\t\t\t\tclass=\"app-sidebar-tabs__tab\"\n\t\t\t\t:class=\"{ active: tab.id === activeTab }\"\n\t\t\t\trole=\"tab\"\n\t\t\t\ttype=\"button\"\n\t\t\t\t@update:model-value=\"setActive(tab.id)\">\n\t\t\t\t<span class=\"app-sidebar-tabs__tab-caption\">\n\t\t\t\t\t{{ tab.name }}\n\t\t\t\t</span>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcVNodes :vnodes=\"tab.renderIcon()\">\n\t\t\t\t\t\t<span class=\"app-sidebar-tabs__tab-icon\" :class=\"tab.icon\" />\n\t\t\t\t\t</NcVNodes>\n\t\t\t\t</template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\n\t\t\n\t\t<div :class=\"{'app-sidebar-tabs__content--multiple': hasMultipleTabs}\"\n\t\t\tclass=\"app-sidebar-tabs__content\">\n\t\t\t\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport NcVNodes from '../NcVNodes/index.js'\nimport NcCheckboxRadioSwitch from '../NcCheckboxRadioSwitch/index.js'\n\nexport default {\n\tname: 'NcAppSidebarTabs',\n\n\tcomponents: {\n\t\tNcCheckboxRadioSwitch,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterTab: this.registerTab,\n\t\t\tunregisterTab: this.unregisterTab,\n\t\t\t// Getter as an alternative to Vue 2.7 computed(() => this.activeTab)\n\t\t\tgetActiveTab: () => this.activeTab,\n\t\t\t// Used to check whether the tab header is shown so the tabs can reference the tab header for `aria-labelledby` or not\n\t\t\tisTablistShown: () => this.hasMultipleTabs,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Id of the tab to activate\n\t\t */\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Force the tab navigation to display even if there is only one tab\n\t\t */\n\t\tforceTabs: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: ['update:active'],\n\n\tdata() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.\n\t\t\t */\n\t\t\ttabs: [],\n\t\t\t/**\n\t\t\t * Local active (open) tab's ID. It allows to use component without v-model:active\n\t\t\t */\n\t\t\tactiveTab: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * Has multiple tabs. If only one tab - its content is shown without navigation\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\thasMultipleTabs() {\n\t\t\treturn this.tabs.length > 1\n\t\t},\n\n\t\tshowForSingleTab() {\n\t\t\treturn this.forceTabs && this.tabs.length === 1\n\t\t},\n\n\t\tcurrentTabIndex() {\n\t\t\treturn this.tabs.findIndex((tab) => tab.id === this.activeTab)\n\t\t},\n\t},\n\n\twatch: {\n\t\tactive(active) {\n\t\t\t// Prevent running it twice\n\t\t\tif (active !== this.activeTab) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\n\t\t/**\n\t\t * Set the current active tab\n\t\t *\n\t\t * @param {string} id the id of the tab\n\t\t */\n\t\tsetActive(id) {\n\t\t\tthis.activeTab = id\n\t\t\t/**\n\t\t\t * @property {string} active - active tab's id\n\t\t\t */\n\t\t\tthis.$emit('update:active', this.activeTab)\n\t\t},\n\n\t\t/**\n\t\t * Focus the previous tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusPreviousTab() {\n\t\t\tif (this.currentTabIndex > 0) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex - 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the next tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusNextTab() {\n\t\t\tif (this.currentTabIndex < this.tabs.length - 1) {\n\t\t\t\tthis.setActive(this.tabs[this.currentTabIndex + 1].id)\n\t\t\t}\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the first tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusFirstTab() {\n\t\t\tthis.setActive(this.tabs[0].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the last tab\n\t\t * and emit to the parent component\n\t\t */\n\t\tfocusLastTab() {\n\t\t\tthis.setActive(this.tabs[this.tabs.length - 1].id)\n\t\t\tthis.focusActiveTab()\n\t\t},\n\n\t\t/**\n\t\t * Focus the current active tab\n\t\t */\n\t\tfocusActiveTab() {\n\t\t\tthis.$el.querySelector(`#tab-button-${this.activeTab}`).focus()\n\t\t},\n\n\t\t/**\n\t\t * Focus the content on tab\n\t\t * see aria accessibility guidelines\n\t\t */\n\t\tfocusActiveTabContent() {\n\t\t\tthis.$el.querySelector('#tab-' + this.activeTab).focus()\n\t\t},\n\n\t\t/**\n\t\t * Update the current active tab\n\t\t */\n\t\tupdateActive() {\n\t\t\tthis.activeTab = this.active\n\t\t\t&& this.tabs.some(tab => tab.id === this.active)\n\t\t\t\t? this.active\n\t\t\t\t: this.tabs.length > 0\n\t\t\t\t\t? this.tabs[0].id\n\t\t\t\t\t: ''\n\t\t},\n\n\t\t/**\n\t\t * Register child tab in the tabs\n\t\t *\n\t\t * @param {object} tab child tab passed to slot\n\t\t */\n\t\tregisterTab(tab) {\n\t\t\tthis.tabs.push(tab)\n\t\t\tthis.tabs.sort((a, b) => {\n\t\t\t\tif (a.order === b.order) {\n\t\t\t\t\treturn OC.Util.naturalSortCompare(a.name, b.name)\n\t\t\t\t}\n\t\t\t\treturn a.order - b.order\n\t\t\t})\n\t\t\tthis.updateActive()\n\t\t},\n\n\t\t/**\n\t\t * Unregister child tab from the tabs\n\t\t *\n\t\t * @param {string} id tab's id\n\t\t */\n\t\tunregisterTab(id) {\n\t\t\tconst tabIndex = this.tabs.findIndex((tab) => tab.id === id)\n\t\t\tif (tabIndex !== -1) {\n\t\t\t\tthis.tabs.splice(tabIndex, 1)\n\t\t\t}\n\t\t\tif (this.activeTab === id) {\n\t\t\t\tthis.updateActive()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.app-sidebar-tabs {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 0;\n\tflex: 1 1 100%;\n\n\t&__nav {\n\t\tdisplay: flex;\n\t\tjustify-content: stretch;\n\t\tmargin: 10px 8px 0 8px;\n\t\tborder-bottom: 1px solid var(--color-border);\n\n\t\t// Override checkbox-radio-switch styles so that it looks like tabs\n\t\t& :deep(.checkbox-radio-switch--button-variant) {\n\t\t\tborder: unset !important;\n\t\t\tborder-radius: 0 !important;\n\t\t\t.checkbox-content {\n\t\t\t\tpadding: var(--default-grid-baseline);\n\t\t\t\tborder-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0 !important;\n\t\t\t\tmargin: 0 !important;\n\t\t\t\tborder-bottom: var(--default-grid-baseline) solid transparent !important;\n\t\t\t\t.checkbox-content__icon > * {\n\t\t\t\t\tcolor: var(--color-main-text) !important;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&.checkbox-radio-switch--checked .checkbox-radio-switch__content{\n\t\t\t\tbackground: transparent !important;\n\t\t\t\tcolor: var(--color-main-text) !important;\n\t\t\t\tborder-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__tab {\n\t\tflex: 1 1;\n\t\t&.active {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t&-caption {\n\t\t\tflex: 0 1 100%;\n\t\t\twidth: 100%;\n\t\t\toverflow: hidden;\n\t\t\twhite-space: nowrap;\n\t\t\ttext-overflow: ellipsis;\n\t\t\ttext-align: center;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tbackground-size: 20px;\n\t\t}\n\n\t\t// Override max-width to use all available space\n\t\t:deep(.checkbox-radio-switch__content) {\n\t\t\tmax-width: unset;\n\t\t}\n\t}\n\n\t&__content {\n\t\tposition: relative;\n\t\tmin-height: 256px;\n\t\theight: 100%;\n\t\t// force the use of the tab component if more than one tab\n\t\t// you can just put raw content if you don't use tabs\n\t\t&--multiple > :not(section) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n</style>\n","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon dock-right-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M20 4H4A2 2 0 0 0 2 6V18A2 2 0 0 0 4 20H20A2 2 0 0 0 22 18V6A2 2 0 0 0 20 4M15 18H4V6H15Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"DockRightIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon star-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"StarIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon star-outline-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"StarOutlineIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","\n\n<docs>\n### General description\n\nThis component provides a way to include the standardised sidebar.\nThe standard properties like name, subname, starred, etc. allow to automatically\ninclude a standard-header like it's used by the files app.\n\nTo conditionally show the sidebar either use `v-if` on the sidebar component,\nor use the `open` property of the component to controll the state.\nUsing `v-show` directly will result in usability issues due to internal focus trap handling.\n\n### Standard usage\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:starred=\"starred\"\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\"\n\t\tbackground=\"https://nextcloud.com/wp-content/uploads/2022/08/nextcloud-logo-icon.svg\"\n\t\t@figure-click=\"figureClick\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\n\timport Magnify from 'vue-material-design-icons/Magnify.vue'\n\timport Cog from 'vue-material-design-icons/Cog.vue'\n\timport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t\tCog,\n\t\t\tShareVariant,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tstarred: false,\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tfigureClick() {\n\t\t\t\talert('figure clicked')\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n### One tab\n\nSingle tab is rendered without navigation.\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"forceTabs\">Force tab navigation</NcCheckboxRadioSwitch>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\t:force-tabs=\"forceTabs\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Cog from 'vue-material-design-icons/Cog.vue'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tforceTabs: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Dynamic tabs\n\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[0]\">Show search tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[1]\">Show settings tab</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"showTabs[2]\">Show sharing tab</NcCheckboxRadioSwitch>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[0]\" name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[1]\" name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab v-if=\"showTabs[2]\" name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowTabs: [true, true, false],\n\t\t}\n\t},\n}\n</script>\n```\n\n### Custom order\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\tname=\"cat-picture.jpg\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\" :order=\"3\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t\tSearch tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\" :order=\"2\">\n\t\t\t<template #icon>\n\t\t\t\t<Cog :size=\"20\" />\n\t\t\t</template>\n\t\t\tSettings tab content\n\t\t</NcAppSidebarTab>\n\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\" :order=\"1\">\n\t\t\t<template #icon>\n\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t</template>\n\t\t\tSharing tab content\n\t\t</NcAppSidebarTab>\n\t</NcAppSidebar>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n}\n</script>\n```\n\n### Activating tab programmatically\n\n```vue\n<template>\n\t<div>\n\t\t<NcSelect v-model=\"active\" :options=\"['search-tab', 'settings-tab', 'share-tab']\" />\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\tv-model:active=\"active\">\n\t\t\t<NcAppSidebarTab name=\"Search\" id=\"search-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSearch tab content\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSettings\n\t\t\t</NcAppSidebarTab>\n\t\t\t<NcAppSidebarTab name=\"Sharing\" id=\"share-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ShareVariant :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSharing tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify.vue'\nimport Cog from 'vue-material-design-icons/Cog.vue'\nimport ShareVariant from 'vue-material-design-icons/ShareVariant.vue'\n\nexport default {\n\tcomponents: {\n\t\tMagnify,\n\t\tCog,\n\t\tShareVariant,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tactive: 'search-tab',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Editable name\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\tv-model:name=\"name\"\n\t\t:name-editable=\"true\"\n\t\tname-placeholder=\"Filename\"\n\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n### Editable name after click with custom tertiary action\n\n```vue\n<template>\n\t<NcAppSidebar\n\t\t:name=\"name\"\n\t\tv-model:name-editable=\"nameEditable\"\n\t\t:name-placeholder=\"namePlaceholder\"\n\t\t:subname=\"subname\"\n\t\t@update:name=\"nameUpdate\">\n\t\t<template #tertiary-actions>\n\t\t\t<form>\n\t\t\t\t<input type=\"checkbox\" @click=\"toggledCheckbox\"/>\n\t\t\t</form>\n\t\t</template>\n\t</NcAppSidebar>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tname: 'cat-picture.jpg',\n\t\t\t\tnamePlaceholder: 'Filename',\n\t\t\t\tsubname: 'last edited 3 weeks ago',\n\t\t\t\tnameEditable: false\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tnameUpdate(e) {\n\t\t\t\tthis.name = e\n\t\t\t},\n\t\t\ttoggledCheckbox() {\n\t\t\t\talert('toggle')\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Custom subname\n\nInstead of using the `subname` prop you can use the same called slot. This is handy if you need to add accessible information.\nLike in the following example where the goal is to show a star icon to mark the file a favorite.\nSimplying adding `★` would not work as screen readers might not or wrongly announce the icon meaning this information is lost.\n\nA working alternative would be using an icon together with an `aria-label`:\n\n```vue\n\t<template>\n\t\t<NcAppSidebar name=\"cat-picture.jpg\">\n\t\t\t<template #subname>\n\t\t\t\t<NcIconSvgWrapper inline :path=\"mdiStar\" name=\"Favorite\" />\n\t\t\t\t123 KiB, a month ago\n\t\t\t</template>\n\t\t</NcAppSidebar>\n\t</template>\n\t<script>\n\timport { mdiStar } from '@mdi/js'\n\n\texport default {\n\t\tsetup() {\n\t\t\treturn {\n\t\t\t\tmdiStar,\n\t\t\t}\n\t\t}\n\t}\n\t</script>\n```\n\n### Empty sidebar for e.g. empty content component.\n\n```vue\n\t<template>\n\t\t<NcAppSidebar\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\t:empty=\"true\">\n\t\t\t<NcEmptyContent name=\"Content not found.\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</NcAppSidebar>\n\t</template>\n\t<script>\n\timport Magnify from 'vue-material-design-icons/Magnify.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tMagnify,\n\t\t},\n\t}\n\t</script>\n```\n\n### Conditionally show the sidebar with `open`\n\nIf the sidebar should be shown conditionally, you can use `open` prop to define sidebar visibility.\nIt automatically shows a toggle button to open the sidebar if it is closed.\n\nYou can also use `--app-sidebar-offset` CSS variable to preserve space\nfor the toggle button, for example, in top bar of `NcAppContent`.\n\nThe built-in toggle button can be removed with `no-toggle` prop.\n\nNote: the built-in toggle button is only available then NcAppSidebar is used in NcContent.\n\n```vue\n<template>\n\t\n\t<NcContent app-name=\"styleguidist\" class=\"content-styleguidist\">\n\t\t<NcAppContent>\n\t\t\t<div class=\"top-bar\">\n\t\t\t\t<NcButton variant=\"primary\">Start a call</NcButton>\n\t\t\t</div>\n\t\t</NcAppContent>\n\t\t\n\t\t<NcAppSidebar\n\t\t\tv-model:open=\"showSidebar\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</NcContent>\n</template>\n\n<script>\nimport Cog from 'vue-material-design-icons/Cog'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowSidebar: true,\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent */\n.content-styleguidist {\n\tposition: relative !important;\n\t/* Just to prevent jumping when the sidebar is hidden */\n\tmin-height: 360px;\n}\n\n.main-content {\n\tposition: absolute;\n\theight: 100%;\n\twidth: 100%;\n}\n\n/* Fix styles on this style guide page */\n@media only screen and (max-width: 512px) {\n\t:deep(aside) {\n\t\twidth: calc(100vw - 64px) !important;\n\t}\n}\n\n.top-bar {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\t/* preserve space for toggle button */\n\tpadding-inline-end: var(--app-sidebar-offset);\n\t/* same as on toggle button, but doesn't have to be the same */\n\tmargin: var(--app-sidebar-padding);\n}\n</style>\n```\n\n### Conditionally show the sidebar programmatically with `v-if`\n\nIf the sidebar should be shown conditionally without any explicit toggle button, you can use `v-if`.\n\n**Note about performance**: using `v-if` might result in bad performance and loosing sidebar content state.\n\n**Note about `v-show`**: using `v-show` to hide sidebar will result in usability issues due to active focus trap on mobile.\n\n```vue\n<template>\n\t\n\t<NcContent app-name=\"styleguidist\" class=\"content-styleguidist\">\n\t\t<NcAppContent>\n\t\t\t<div class=\"top-bar\">\n\t\t\t\t<NcButton @click.prevent=\"showSidebar = true\">\n\t\t\t\t\tToggle sidebar\n\t\t\t\t</NcButton>\n\t\t\t</div>\n\t\t</NcAppContent>\n\t\t\n\t\t<NcAppSidebar\n\t\t\tv-if=\"showSidebar\"\n\t\t\tname=\"cat-picture.jpg\"\n\t\t\tsubname=\"last edited 3 weeks ago\"\n\t\t\t@close=\"showSidebar = false\">\n\t\t\t<NcAppSidebarTab name=\"Settings\" id=\"settings-tab\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Cog :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tSingle tab content\n\t\t\t</NcAppSidebarTab>\n\t\t</NcAppSidebar>\n\t</NcContent>\n</template>\n\n<script>\nimport Cog from 'vue-material-design-icons/Cog'\n\nexport default {\n\tcomponents: {\n\t\tCog,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tshowSidebar: true,\n\t\t}\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent */\n.content-styleguidist {\n\tposition: relative !important;\n\t/* Just to prevent jumping when the sidebar is hidden */\n\tmin-height: 360px;\n}\n\n.main-content {\n\tposition: absolute;\n\theight: 100%;\n\twidth: 100%;\n}\n\n/* Fix styles on this style guide page */\n@media only screen and (max-width: 512px) {\n\t:deep(aside) {\n\t\twidth: calc(100vw - 64px) !important;\n\t}\n}\n\n.top-bar {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n\t/* preserve space for toggle button */\n\tpadding-inline-end: var(--app-sidebar-offset);\n\t/* same as on toggle button, but doesn't have to be the same */\n\tmargin: var(--app-sidebar-padding);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<transition appear\n\t\tname=\"slide-right\"\n\t\t@after-enter=\"onAfterEnter\"\n\t\t@after-leave=\"onAfterLeave\">\n\t\t<aside v-show=\"open\"\n\t\t\tid=\"app-sidebar-vue\"\n\t\t\tref=\"sidebar\"\n\t\t\tclass=\"app-sidebar\"\n\t\t\t:aria-labelledby=\"`app-sidebar-vue-${uid}__header`\"\n\t\t\t@keydown.esc=\"onKeydownEsc\">\n\t\t\t\n\t\t\t<Teleport v-if=\"ncContentSelector && !open && !noToggle\" :to=\"ncContentSelector\">\n\t\t\t\t<NcButton :aria-label=\"t('Open sidebar')\"\n\t\t\t\t\tclass=\"app-sidebar__toggle\"\n\t\t\t\t\t:class=\"toggleClasses\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tv-bind=\"toggleAttrs\"\n\t\t\t\t\t@click=\"$emit('update:open', true)\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\n\t\t\t\t\t\t<slot name=\"toggle-icon\">\n\t\t\t\t\t\t\t<IconDockRight :size=\"20\" />\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\t\t\t</Teleport>\n\n\t\t\t<header :class=\"{\n\t\t\t\t\t'app-sidebar-header--with-figure': isSlotPopulated($slots.header?.()) || background,\n\t\t\t\t\t'app-sidebar-header--compact': compact,\n\t\t\t\t}\"\n\t\t\t\tclass=\"app-sidebar-header\">\n\t\t\t\t\n\t\t\t\t<div class=\"app-sidebar-header__info\">\n\t\t\t\t\t\n\t\t\t\t\t<div v-if=\"(isSlotPopulated($slots.header?.()) || background) && !empty\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'app-sidebar-header__figure--with-action': hasFigureClickListener\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\tclass=\"app-sidebar-header__figure\"\n\t\t\t\t\t\t:style=\"{\n\t\t\t\t\t\t\tbackgroundImage: `url(${background})`\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click=\"onFigureClick\"\n\t\t\t\t\t\t@keydown.enter=\"onFigureClick\">\n\t\t\t\t\t\t<slot class=\"app-sidebar-header__background\" name=\"header\" />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t\n\t\t\t\t\t<div v-if=\"!empty\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'app-sidebar-header__desc--with-tertiary-action': canStar || isSlotPopulated($slots['tertiary-actions']?.()),\n\t\t\t\t\t\t\t'app-sidebar-header__desc--editable': nameEditable && !subname,\n\t\t\t\t\t\t\t'app-sidebar-header__desc--with-subname--editable': nameEditable && subname,\n\t\t\t\t\t\t\t'app-sidebar-header__desc--without-actions': !isSlotPopulated($slots['secondary-actions']?.()),\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\tclass=\"app-sidebar-header__desc\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t<div v-if=\"canStar || isSlotPopulated($slots['tertiary-actions']?.())\" class=\"app-sidebar-header__tertiary-actions\">\n\t\t\t\t\t\t\t<slot name=\"tertiary-actions\">\n\t\t\t\t\t\t\t\t<NcButton v-if=\"canStar\"\n\t\t\t\t\t\t\t\t\t:aria-label=\"favoriteTranslated\"\n\t\t\t\t\t\t\t\t\t:pressed=\"isStarred\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__star\"\n\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t@click.prevent=\"toggleStarred\">\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<NcLoadingIcon v-if=\"starLoading\" />\n\t\t\t\t\t\t\t\t\t\t<IconStar v-else-if=\"isStarred\" :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t<IconStarOutline v-else :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"app-sidebar-header__name-container\">\n\t\t\t\t\t\t\t<div class=\"app-sidebar-header__mainname-container\">\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<h2 v-show=\"!nameEditable\"\n\t\t\t\t\t\t\t\t\t:id=\"`app-sidebar-vue-${uid}__header`\"\n\t\t\t\t\t\t\t\t\tref=\"header\"\n\t\t\t\t\t\t\t\t\tv-linkify=\"{text: name, linkify: linkifyName}\"\n\t\t\t\t\t\t\t\t\t:aria-label=\"title\"\n\t\t\t\t\t\t\t\t\t:title=\"title\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname\"\n\t\t\t\t\t\t\t\t\t:tabindex=\"nameEditable ? 0 : -1\"\n\t\t\t\t\t\t\t\t\t@click.self=\"editName\">\n\t\t\t\t\t\t\t\t\t{{ name }}\n\t\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t\t<template v-if=\"nameEditable\">\n\t\t\t\t\t\t\t\t\t<form v-click-outside=\"() => onSubmitName()\"\n\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-form\"\n\t\t\t\t\t\t\t\t\t\t@submit.prevent=\"onSubmitName\">\n\t\t\t\t\t\t\t\t\t\t<input ref=\"nameInput\"\n\t\t\t\t\t\t\t\t\t\t\tv-focus\n\t\t\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__mainname-input\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\t\t:placeholder=\"namePlaceholder\"\n\t\t\t\t\t\t\t\t\t\t\t:value=\"name\"\n\t\t\t\t\t\t\t\t\t\t\t@keydown.esc.stop=\"onDismissEditing\"\n\t\t\t\t\t\t\t\t\t\t\t@input=\"onNameInput\">\n\t\t\t\t\t\t\t\t\t\t<NcButton :aria-label=\"changeNameTranslated\"\n\t\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\t\t\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t\t\t\t</form>\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<NcActions v-if=\"isSlotPopulated($slots['secondary-actions']?.())\"\n\t\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__menu\"\n\t\t\t\t\t\t\t\t\t:force-menu=\"forceMenu\">\n\t\t\t\t\t\t\t\t\t<slot name=\"secondary-actions\" />\n\t\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<p v-if=\"subname.trim() !== '' || $slots['subname']\"\n\t\t\t\t\t\t\t\t:title=\"subtitle || undefined\"\n\t\t\t\t\t\t\t\tclass=\"app-sidebar-header__subname\">\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t<slot name=\"subname\">\n\t\t\t\t\t\t\t\t\t{{ subname }}\n\t\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<NcButton ref=\"closeButton\"\n\t\t\t\t\t:aria-label=\"closeTranslated\"\n\t\t\t\t\t:title=\"closeTranslated\"\n\t\t\t\t\tclass=\"app-sidebar__close\"\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t@click.prevent=\"closeSidebar\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcButton>\n\n\t\t\t\t<div v-if=\"isSlotPopulated($slots.description?.()) && !empty\" class=\"app-sidebar-header__description\">\n\t\t\t\t\t<slot name=\"description\" />\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t<NcAppSidebarTabs v-show=\"!loading\"\n\t\t\t\tref=\"tabs\"\n\t\t\t\t:active=\"active\"\n\t\t\t\t:force-tabs=\"forceTabs\"\n\t\t\t\t@update:active=\"onUpdateActive\">\n\t\t\t\t<slot />\n\t\t\t</NcAppSidebarTabs>\n\n\t\t\t<NcEmptyContent v-if=\"loading\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcLoadingIcon :size=\"64\" />\n\t\t\t\t</template>\n\t\t\t</NcEmptyContent>\n\t\t</aside>\n\t</transition>\n</template>\n\n<script>\nimport NcAppSidebarTabs from './NcAppSidebarTabs.vue'\nimport NcActions from '../NcActions/index.js'\nimport NcButton from '../NcButton/index.ts'\nimport NcEmptyContent from '../NcEmptyContent/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport Focus from '../../directives/Focus/index.js'\nimport Linkify from '../../directives/Linkify/index.ts'\nimport { vOnClickOutside as ClickOutside } from '@vueuse/components'\nimport { createFocusTrap } from 'focus-trap'\nimport { useIsSmallMobile } from '../../composables/useIsMobile/index.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { isSlotPopulated } from '../../utils/isSlotPopulated.ts'\nimport { t } from '../../l10n.js'\n\nimport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport IconDockRight from 'vue-material-design-icons/DockRight.vue'\nimport IconStar from 'vue-material-design-icons/Star.vue'\nimport IconStarOutline from 'vue-material-design-icons/StarOutline.vue'\n\nexport default {\n\tname: 'NcAppSidebar',\n\n\tcomponents: {\n\t\tNcActions,\n\t\tNcAppSidebarTabs,\n\t\tNcButton,\n\t\tNcLoadingIcon,\n\t\tNcEmptyContent,\n\t\tIconArrowRight,\n\t\tIconClose,\n\t\tIconDockRight,\n\t\tIconStar,\n\t\tIconStarOutline,\n\t},\n\n\tdirectives: {\n\t\tFocus,\n\t\tLinkify,\n\t\tClickOutside,\n\t},\n\n\tinject: {\n\t\tncContentSelector: {\n\t\t\tfrom: 'NcContent:selector',\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tprops: {\n\t\tactive: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Allow to edit the sidebar name.\n\t\t */\n\t\tnameEditable: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\tnamePlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\tsubname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Title to display for the subname.\n\t\t */\n\t\tsubtitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Url to the top header background image\n\t\t * Applied with css\n\t\t */\n\t\tbackground: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Enable the favourite icon if not null\n\t\t * See fired events\n\t\t */\n\t\tstarred: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Show loading spinner instead of the star icon\n\t\t */\n\t\tstarLoading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Show loading spinner instead of tabs\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Display the sidebar in compact mode\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 * Only display close button and default slot content.\n\t\t * Don't display other header content and primary and secondary actions.\n\t\t * Useful when showing the EmptyContent component as content.\n\t\t */\n\t\tempty: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Force the tab navigation to display even if there is only one tab\n\t\t */\n\t\tforceTabs: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Linkify the name\n\t\t */\n\t\tlinkifyName: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Title to display for the name.\n\t\t * Can be set to the same text in case it's too long.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Allow to conditionally show the sidebar\n\t\t * You can also use `v-if` on the sidebar, but using the open prop allow to keep\n\t\t * the sidebar inside the DOM for performance if it is opened and closed multiple times.\n\t\t *\n\t\t * When using the `open` property to close the sidebar a built-in toggle button will be shown to reopen it,\n\t\t * similar to the app navigation. You can remove this button with the `no-toggle` prop.\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Custom classes to assign to the sidebar toggle button.\n\t\t * If needed this can be used to assign styles to the button using `:deep()` selector.\n\t\t */\n\t\ttoggleClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Custom attrs to assign to the sidebar toggle button.\n\t\t */\n\t\ttoggleAttrs: {\n\t\t\ttype: Object,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Do not add the built-in toggle button with `open` prop.\n\t\t */\n\t\tnoToggle: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'close',\n\t\t'closed',\n\t\t'opened',\n\t\t// 'figure-click', not emitted on purpose to make \"hasFigureClickListener\" work\n\t\t'update:active',\n\t\t'update:name',\n\t\t'update:nameEditable',\n\t\t'update:open',\n\t\t'update:starred',\n\t\t'submit-name',\n\t\t'dismiss-editing',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\tuid: createElementId(),\n\t\t\tisMobile: useIsSmallMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tchangeNameTranslated: t('Change name'),\n\t\t\tcloseTranslated: t('Close sidebar'),\n\t\t\tfavoriteTranslated: t('Favorite'),\n\t\t\tisStarred: this.starred,\n\t\t\tfocusTrap: null,\n\t\t\telementToReturnFocus: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcanStar() {\n\t\t\treturn this.isStarred !== null\n\t\t},\n\t\thasFigureClickListener() {\n\t\t\treturn !!this.$attrs.onFigureClick\n\t\t},\n\t},\n\n\twatch: {\n\t\tstarred() {\n\t\t\tthis.isStarred = this.starred\n\t\t},\n\n\t\tisMobile() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\n\t\topen() {\n\t\t\tthis.checkToggleButtonContainerAvailability()\n\t\t},\n\t},\n\n\tcreated() {\n\t\tthis.preserveElementToReturnFocus()\n\n\t\tthis.checkToggleButtonContainerAvailability()\n\t},\n\n\tbeforeUnmount() {\n\t\t// Make sure that the 'closed' event is dispatched even if this element is destroyed before the 'after-leave' event is received.\n\t\tthis.$emit('closed')\n\t\tthis.focusTrap?.deactivate()\n\t},\n\n\tmethods: {\n\t\tisSlotPopulated,\n\n\t\tt,\n\n\t\tpreserveElementToReturnFocus() {\n\t\t\t// Save the element that had focus before the sidebar was opened to return back on close\n\t\t\tif (document.activeElement && document.activeElement !== document.body) {\n\t\t\t\tthis.elementToReturnFocus = document.activeElement\n\n\t\t\t\t// Special case for menus (NcActions)\n\t\t\t\t// If a sidebar was opened from a menu item, we want to return focus to the menu trigger instead of the item\n\t\t\t\tif (this.elementToReturnFocus.getAttribute('role') === 'menuitem') {\n\t\t\t\t\tconst menu = this.elementToReturnFocus.closest('[role=\"menu\"]')\n\t\t\t\t\tif (menu) {\n\t\t\t\t\t\tconst menuTrigger = document.querySelector(`[aria-controls=\"${menu.id}\"]`)\n\t\t\t\t\t\tthis.elementToReturnFocus = menuTrigger\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\tinitFocusTrap() {\n\t\t\tif (this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.focusTrap = createFocusTrap([\n\t\t\t\t// The sidebar itself\n\t\t\t\tthis.$refs.sidebar,\n\t\t\t\t// Nextcloud Server header navigarion\n\t\t\t\tdocument.querySelector('#header'),\n\t\t\t], {\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tfallbackFocus: this.$refs.closeButton.$el,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t\tescapeDeactivates: false,\n\t\t\t})\n\t\t},\n\n\t\t/**\n\t\t * Activate focus trap if it is currently needed, otherwise deactivate\n\t\t */\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.open && this.isMobile) {\n\t\t\t\tthis.initFocusTrap()\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap?.deactivate()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Close the sidebar on pressing the escape key on mobile\n\t\t *\n\t\t * @param {KeyboardEvent} event key down event\n\t\t */\n\t\tonKeydownEsc(event) {\n\t\t\tif (this.isMobile) {\n\t\t\t\tevent.stopPropagation()\n\t\t\t\tthis.closeSidebar()\n\t\t\t}\n\t\t},\n\n\t\tonAfterEnter(element) {\n\t\t\t// Focus sidebar on open only if it was opened by a user interaction\n\t\t\tif (this.elementToReturnFocus) {\n\t\t\t\tthis.focus()\n\t\t\t}\n\n\t\t\tthis.toggleFocusTrap()\n\n\t\t\t/**\n\t\t\t * The sidebar is opened and the transition is complete\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t */\n\t\t\tthis.$emit('opened', element)\n\t\t},\n\t\tonAfterLeave(element) {\n\t\t\t/**\n\t\t\t * The sidebar is closed and the transition is complete\n\t\t\t *\n\t\t\t * @type {HTMLElement}\n\t\t\t */\n\t\t\tthis.$emit('closed', element)\n\n\t\t\tthis.toggleFocusTrap()\n\n\t\t\t// Return focus to the element that had focus before the sidebar was opened\n\t\t\tthis.elementToReturnFocus?.focus({ focusVisible: true })\n\t\t\tthis.elementToReturnFocus = null\n\t\t},\n\n\t\t/**\n\t\t * Used to tell parent component the user asked to close the sidebar\n\t\t *\n\t\t * @param {Event} e close icon click event\n\t\t */\n\t\tcloseSidebar(e) {\n\t\t\t/**\n\t\t\t * The user clicked to closed the sidebar\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('close', e)\n\t\t\t/**\n\t\t\t * Current open state emitted after the transitions are finished\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:open', false)\n\t\t},\n\n\t\t/**\n\t\t * Emit figure click event to parent component\n\t\t *\n\t\t * @param {Event} e click event\n\t\t */\n\t\tonFigureClick(e) {\n\t\t\t/**\n\t\t\t * The figure/background header has been clicked\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\t// eslint-disable-next-line vue/require-explicit-emits\n\t\t\tthis.$emit('figure-click', e)\n\t\t},\n\n\t\t/**\n\t\t * Toggle the favourite state\n\t\t * and emit to the parent component\n\t\t */\n\t\ttoggleStarred() {\n\t\t\tthis.isStarred = !this.isStarred\n\t\t\t/**\n\t\t\t * Emitted when the starred value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:starred', this.isStarred)\n\t\t},\n\n\t\tasync editName() {\n\t\t\t/**\n\t\t\t * Emitted when the nameEditable value changes\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:nameEditable', true)\n\t\t\t// Focus the name input\n\t\t\tif (this.nameEditable) {\n\t\t\t\tawait this.$nextTick()\n\t\t\t\tthis.$refs.nameInput.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Focus the sidebar\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\t(this.$refs.header ?? this.$refs.toggle)?.focus()\n\t\t},\n\n\t\t/**\n\t\t * Focus the active tab\n\t\t * @public\n\t\t */\n\t\tfocusActiveTabContent() {\n\t\t\t// If a tab is focused then probably a new trigger element moved the focus to the sidebar\n\t\t\tthis.preserveElementToReturnFocus()\n\n\t\t\tthis.$refs.tabs.focusActiveTabContent()\n\t\t},\n\n\t\t/**\n\t\t * Check if the toggle button container is available\n\t\t */\n\t\tcheckToggleButtonContainerAvailability() {\n\t\t\t// Toggle button must be rendered, but there is no element to teleport it to\n\t\t\tif (this.open === false && !this.noToggle && !this.ncContentSelector) {\n\t\t\t\tconsole.warn(\n\t\t\t\t\t'[NcAppSidebar] It looks like you want to use NcAppSidebar with the built-in toggle button. '\n\t\t\t\t\t+ 'This feature is only available when NcAppSidebar is used in NcContent.',\n\t\t\t\t)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Emit name change event to parent component\n\t\t *\n\t\t * @param {Event} event input event\n\t\t */\n\t\tonNameInput(event) {\n\t\t\t/**\n\t\t\t * Emitted when the name value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:name', event.target.value)\n\t\t},\n\n\t\t/**\n\t\t * Emit when the name form edit confirm button is pressed in order\n\t\t * to change the name.\n\t\t *\n\t\t * @param {Event} event submit event\n\t\t */\n\t\tonSubmitName(event) {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/**\n\t\t\t * Emitted when the name edit input has been submitted\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('submit-name', event)\n\t\t},\n\t\tonDismissEditing() {\n\t\t\t// Disable editing\n\t\t\tthis.$emit('update:nameEditable', false)\n\t\t\t/**\n\t\t\t * Emitted when the name edit has been cancelled\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('dismiss-editing')\n\t\t},\n\t\tonUpdateActive(activeTab) {\n\t\t\t/**\n\t\t\t * The active tab changed\n\t\t\t *\n\t\t\t * @type {string}\n\t\t\t */\n\t\t\tthis.$emit('update:active', activeTab)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n// Allows to use transition over a custom CSS property (CSS Variable)\n// Ignored on old browsers resulting in slightly noticeable jump\n@property --app-sidebar-offset {\n syntax: '<length>';\n initial-value: 0;\n inherits: true;\n}\n\n.content {\n\t// A padding between the toggle button and the page border\n\t--app-sidebar-padding: #{$app-navigation-padding};\n\t// A padding between the toggle button and the page border\n\t--app-sidebar-offset: 0;\n\t// Explicitly disable transition by default to enable it only when sidebar animation is active\n\t// !important to override styles from an older version, because it's global non-scoped styles\n\ttransition: --app-sidebar-offset 0ms !important;\n}\n\n// When AppSidebar is animation is active - also apply transition for the toggle button offset\n.content:has(.app-sidebar.slide-right-enter-active),\n.content:has(.app-sidebar.slide-right-leave-active) {\n\ttransition: --app-sidebar-offset var(--animation-quick);\n}\n\n.content:has(.app-sidebar__toggle) {\n\t--app-sidebar-offset: calc(var(--app-sidebar-padding) + var(--default-clickable-area));\n}\n</style>\n\n<style lang=\"scss\" scoped>\n$desc-vertical-padding: 18px;\n$desc-vertical-padding-compact: 10px;\n$desc-input-padding: 7px;\n\n// name and subname\n$desc-name-height: 30px;\n$desc-subname-height: 22px;\n$desc-height: $desc-name-height + $desc-subname-height;\n\n$top-buttons-spacing: 6px;\n\n/*\n\tSidebar: to be used within #content\n\tapp-content will be shrinked properly\n*/\n.app-sidebar {\n\t--app-sidebar-width: clamp(300px, 27vw, 500px);\n\twidth: var(--app-sidebar-width);\n\n\tz-index: 1500;\n\ttop: 0;\n\tinset-inline-end: 0;\n\tdisplay: flex;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n\tflex-direction: column;\n\tflex-shrink: 0;\n\theight: 100%;\n\tborder-inline-start: 1px solid var(--color-border);\n\tbackground: var(--color-main-background);\n\t// Make close button positioned relative to the header\n\tposition: relative;\n\n\t&__toggle {\n\t\tposition: absolute !important;\n\t\tinset-block-start: var(--app-sidebar-padding);\n\t\tinset-inline-end: var(--app-sidebar-padding);\n\t\t// app-content has z-index 1000 so we need 1001\n\t\tz-index: 1001;\n\t}\n\n\t.app-sidebar-header {\n\t\t> .app-sidebar__close {\n\t\t\tposition: absolute;\n\t\t\tz-index: 100;\n\t\t\ttop: $top-buttons-spacing;\n\t\t\tinset-inline-end: $top-buttons-spacing;\n\t\t\twidth: var(--default-clickable-area);\n\t\t\theight: var(--default-clickable-area);\n\t\t\topacity: $opacity_normal;\n\t\t\tborder-radius: calc(var(--default-clickable-area) / 2);\n\t\t\t&:hover,\n\t\t\t&:active,\n\t\t\t&:focus {\n\t\t\t\topacity: $opacity_full;\n\t\t\t\tbackground-color: $action-background-hover;\n\t\t\t}\n\t\t}\n\n\t\t// Compact mode only affects a sidebar with a figure\n\t\t&--compact.app-sidebar-header--with-figure {\n\t\t\t.app-sidebar-header__info {\n\t\t\t\tflex-direction: row;\n\n\t\t\t\t.app-sidebar-header__figure {\n\t\t\t\t\tz-index: 2;\n\t\t\t\t\twidth: $desc-height + $desc-vertical-padding;\n\t\t\t\t\theight: $desc-height + $desc-vertical-padding;\n\t\t\t\t\tmargin: math.div($desc-vertical-padding, 2);\n\t\t\t\t\tborder-radius: 3px;\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t}\n\t\t\t\t.app-sidebar-header__desc {\n\t\t\t\t\tpadding-inline-start: 0;\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\tmin-width: 0;\n\t\t\t\t\tpadding-inline-end: calc(2 * var(--default-clickable-area) + $top-buttons-spacing);\n\t\t\t\t\tpadding-top: var(--app-sidebar-padding);\n\n\t\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\t\tpadding-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing);\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\t\t\tz-index: 3; // above star\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\ttop: calc(var(--app-sidebar-padding) / 2);\n\t\t\t\t\t\tinset-inline-start: calc(-1 * var(--default-clickable-area));\n\t\t\t\t\t\tgap: 0; // override gap\n\t\t\t\t\t}\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\t\t\tinset-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing); // left of the close button\n\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// sidebar without figure\n\t\t&:not(.app-sidebar-header--with-figure) {\n\t\t\t// align the menu with the close button\n\t\t\t.app-sidebar-header__menu {\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: $top-buttons-spacing;\n\t\t\t\tinset-inline-end: calc($top-buttons-spacing + var(--default-clickable-area));\n\t\t\t}\n\t\t\t// increase the padding to not overlap the menu\n\t\t\t.app-sidebar-header__desc {\n\t\t\t\tpadding-inline-end: calc(var(--default-clickable-area) * 2 + $top-buttons-spacing);\n\n\t\t\t\t&.app-sidebar-header__desc--without-actions {\n\t\t\t\t\tpadding-inline-end: calc(var(--default-clickable-area) + $top-buttons-spacing);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// the container with the figure and the description\n\t\t.app-sidebar-header__info {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t// header background\n\t\t&__figure {\n\t\t\twidth: 100%;\n\t\t\theight: 250px;\n\t\t\tmax-height: 250px;\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-position: center;\n\t\t\tbackground-size: contain;\n\t\t\t&--with-action {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\t\t}\n\n\t\t// description\n\t\t&__desc {\n\t\t\tposition: relative;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tpadding: #{$desc-vertical-padding} #{$top-buttons-spacing} #{$desc-vertical-padding} #{math.div($desc-vertical-padding, 2)};\n\t\t\tgap: 0 4px;\n\n\t\t\t// custom overrides\n\t\t\t&--with-tertiary-action {\n\t\t\t\tpadding-inline-start: 6px;\n\t\t\t}\n\n\t\t\t&--editable .app-sidebar-header__mainname-form,\n\t\t\t&--with-subname--editable .app-sidebar-header__mainname-form {\n\t\t\t\tmargin-top: -2px;\n\t\t\t\tmargin-bottom: -2px;\n\t\t\t}\n\n\t\t\t&--with-subname--editable .app-sidebar-header__subname {\n\t\t\t\tmargin-top: -2px;\n\t\t\t}\n\n\t\t\t.app-sidebar-header__tertiary-actions {\n\t\t\t\tdisplay: flex;\n\t\t\t\theight: var(--default-clickable-area);\n\t\t\t\twidth: var(--default-clickable-area);\n\t\t\t\tjustify-content: center;\n\t\t\t\tflex: 0 0 auto;\n\n\t\t\t\t.app-sidebar-header__star {\n\t\t\t\t\t// Override default Button component styles\n\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t&:not([aria-pressed='true']):hover {\n\t\t\t\t\t\tbox-shadow: none;\n\t\t\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// names\n\t\t\t.app-sidebar-header__name-container {\n\t\t\t\tflex: 1 1 auto;\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tjustify-content: center;\n\t\t\t\tmin-width: 0;\n\n\t\t\t\t.app-sidebar-header__mainname-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\talign-items: center;\n\t\t\t\t\tmin-height: var(--default-clickable-area);\n\n\t\t\t\t\t// main name\n\t\t\t\t\t.app-sidebar-header__mainname {\n\t\t\t\t\t\tpadding: 0;\n\t\t\t\t\t\tmin-height: 30px;\n\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\tline-height: $desc-name-height;\n\n\t\t\t\t\t\t// Needs 'deep' as the link is generated by the linkify directive\n\t\t\t\t\t\t&:deep(.linkified) {\n\t\t\t\t\t\t\tcursor: pointer;\n\t\t\t\t\t\t\ttext-decoration: underline;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.app-sidebar-header__mainname-form {\n\t\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\talign-items: center;\n\n\t\t\t\t\t\tinput.app-sidebar-header__mainname-input {\n\t\t\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t\tpadding: $desc-input-padding;\n\t\t\t\t\t\t\tfont-size: 20px;\n\t\t\t\t\t\t\tfont-weight: bold;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t// main menu\n\t\t\t\t\t.app-sidebar-header__menu {\n\t\t\t\t\t\tmargin-inline-start: 5px;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t// shared between main and subname\n\t\t\t\t.app-sidebar-header__mainname,\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\twhite-space: nowrap;\n\t\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\t}\n\n\t\t\t\t// subname\n\t\t\t\t.app-sidebar-header__subname {\n\t\t\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t\t\t\tfont-size: var(--default-font-size);\n\t\t\t\t\tpadding: 0;\n\n\t\t\t\t\t* {\n\t\t\t\t\t\tvertical-align: text-bottom;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// sidebar description slot\n\t\t&__description {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tmargin: 0 10px;\n\t\t}\n\t}\n}\n\n// Make the sidebar full-width on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-sidebar {\n\t\tposition: absolute;\n\t\t--app-sidebar-width: 100vw;\n\t}\n}\n\n.slide-right-leave-active,\n.slide-right-enter-active {\n\ttransition-duration: var(--animation-quick);\n\ttransition-property: margin-inline-end;\n}\n\n.slide-right-enter-to,\n.slide-right-leave {\n\tmargin-inline-end: 0;\n}\n\n.slide-right-enter-from,\n.slide-right-leave-to {\n\tmargin-inline-end: calc(-1 * var(--app-sidebar-width));\n}\n</style>\n\n<style lang=\"scss\">\n// ! slots specific designs, cannot be scoped\n// if any button inside the description slot, increase visual padding\n.app-sidebar-header__description {\n\tbutton, .button,\n\tinput[type='button'],\n\tinput[type='submit'],\n\tinput[type='reset'] {\n\t\tpadding: 6px 22px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","NcVNodes","_hoisted_1","_hoisted_2","_openBlock","_createElementBlock","_withKeys","_withModifiers","_Fragment","_renderList","_createBlock","_normalizeClass","_createVNode","_withCtx","_createElementVNode","_toDisplayString","_createCommentVNode","_renderSlot","_hoisted_3","_mergeProps","_hoisted_4","IconArrowRight","Focus","Linkify","ClickOutside","_Transition","_Teleport","_normalizeStyle","_createTextVNode"],"mappings":"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","x_google_ignoreList":[1,2,3]}

package/dist/chunks/NcBreadcrumb-C3qGDt3z.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcBreadcrumb-C3qGDt3z.mjs","sources":["../../src/components/NcBreadcrumb/NcBreadcrumb.vue"],"sourcesContent":["\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a Breadcrumbs component.\nRenders a button element when given no redirection props, otherwise, renders <a/> or <router-link/> elements\n\n</docs>\n\n<template>\n\t<li ref=\"crumb\"\n\t\tclass=\"vue-crumb\"\n\t\t:class=\"[{'vue-crumb--hovered': hovering}, $props.class]\"\n\t\t:[crumbId]=\"''\"\n\t\tdraggable=\"false\"\n\t\t@dragstart.prevent=\"() => {/** Prevent the breadcrumb from being draggable. */}\"\n\t\t@drop.prevent=\"dropped\"\n\t\t@dragover.prevent=\"() => {}\"\n\t\t@dragenter=\"dragEnter\"\n\t\t@dragleave=\"dragLeave\">\n\t\t<NcButton v-if=\"(name || icon || $slots.icon) && !$slots.default\"\n\t\t\t:aria-label=\"icon ? name : undefined\"\n\t\t\tvariant=\"tertiary\"\n\t\t\tv-bind=\"linkAttributes\">\n\t\t\t<template v-if=\"$slots.icon || icon\" #icon>\n\t\t\t\t\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span :class=\"icon\" class=\"icon\" />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t\t<template v-if=\"!($slots.icon || icon) || forceIconText\" #default>\n\t\t\t\t{{ name }}\n\t\t\t</template>\n\t\t</NcButton>\n\t\t<NcActions v-if=\"$slots.default\"\n\t\t\tref=\"actions\"\n\t\t\t:force-menu=\"forceMenu\"\n\t\t\t:open=\"open\"\n\t\t\t:menu-name=\"name\"\n\t\t\t:title=\"title\"\n\t\t\t:force-name=\"true\"\n\t\t\t:container=\"`.vue-crumb[${crumbId}]`\"\n\t\t\tvariant=\"tertiary\"\n\t\t\t@update:open=\"onOpenChange\">\n\t\t\t<template #icon>\n\t\t\t\t\n\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t</template>\n\t\t\t\n\t\t\t<slot />\n\t\t</NcActions>\n\t\t<ChevronRight class=\"vue-crumb__separator\" :size=\"20\" />\n\t</li>\n</template>\n\n<script>\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcActions from '../NcActions/index.js'\nimport NcButton from '../NcButton/NcButton.vue'\n\nimport ChevronRight from 'vue-material-design-icons/ChevronRight.vue'\n\nexport default {\n\tname: 'NcBreadcrumb',\n\tcomponents: {\n\t\tNcActions,\n\t\tChevronRight,\n\t\tNcButton,\n\t},\n\tinheritAttrs: false,\n\tprops: {\n\t\t/**\n\t\t * The main text content of the entry.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The title attribute of the element.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Route Location the link should navigate to when clicked on.\n\t\t *\n\t\t * @see https://v3.router.vuejs.org/api/#to\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set this prop if your app doesn't use vue-router, breadcrumbs will show as normal links.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set a css icon-class to show an icon along name text (if forceIconText is provided, otherwise just icon).\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 * Enables text to accompany the icon, if the icon was provided. The text that will be displayed is the name prop.\n\t\t */\n\t\tforceIconText: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Disable dropping on this breadcrumb.\n\t\t */\n\t\tdisableDrop: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Open state of the Actions menu\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * CSS class to apply to the root element.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\temits: [\n\t\t'dragenter',\n\t\t'dragleave',\n\t\t'dropped',\n\t\t'update:open',\n\t],\n\n\tsetup() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * The unique id of the breadcrumb. Necessary to append the\n\t\t\t * Actions menu to the correct crumb.\n\t\t\t */\n\t\t\t crumbId: createElementId(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * Variable to track if we hover over the breadcrumb\n\t\t\t */\n\t\t\thovering: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\t/**\n\t\t * The attributes to pass to `router-link` or `a`\n\t\t */\n\t\tlinkAttributes() {\n\t\t\t// If it's a router-link, we pass `to` and `exact`, if its an <a/> element, we pass `href`, otherwise we have a button\n\t\t\treturn this.to\n\t\t\t\t? { to: this.to, ...this.$attrs }\n\t\t\t\t: (this.href\n\t\t\t\t\t? { href: this.href, ...this.$attrs }\n\t\t\t\t\t: this.$attrs\n\t\t\t\t)\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Function to handle changing the open state of the Actions menu\n\t\t * $emit the open state.\n\t\t *\n\t\t * @param {boolean} open The open state of the Actions menu\n\t\t */\n\t\tonOpenChange(open) {\n\t\t\t/**\n\t\t\t * Event emitted when the open state of the Actions menu changes\n\t\t\t *\n\t\t\t * @type {null}\n\t\t\t */\n\t\t\tthis.$emit('update:open', open)\n\t\t},\n\t\t/**\n\t\t * Function to handle a drop on the breadcrumb.\n\t\t * $emit the event and the path, remove the hovering state.\n\t\t *\n\t\t * @param {object} e The drop event\n\t\t * @return {boolean}\n\t\t */\n\t\tdropped(e) {\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\t/**\n\t\t\t * Event emitted when something is dropped on the breadcrumb.\n\t\t\t *\n\t\t\t * @param {Event} event The DOM drop event\n\t\t\t * @param {(string|object)} to The `to` prop or, if not set, the `href` prop\n\t\t\t */\n\t\t\tthis.$emit('dropped', e, this.to || this.href)\n\t\t\tthis.$parent.$emit('dropped', e, this.to || this.href)\n\t\t\tthis.hovering = false\n\t\t\treturn false\n\t\t},\n\t\t/**\n\t\t * Add the hovering state on drag enter\n\t\t *\n\t\t * @param {DragEvent} e The drag-enter event\n\t\t */\n\t\tdragEnter(e) {\n\t\t\tthis.$emit('dragenter', e)\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hovering = true\n\t\t},\n\t\t/**\n\t\t * Remove the hovering state on drag leave\n\t\t *\n\t\t * @param {DragEvent} e The drag leave event\n\t\t */\n\t\tdragLeave(e) {\n\t\t\tthis.$emit('dragleave', e)\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Don't do anything if we\n\t\t\t// - leave towards a child element.\n\t\t\t// - or are still within the crumb\n\t\t\tif (e.target.contains(e.relatedTarget)\n\t\t\t\t|| this.$refs.crumb.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hovering = false\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.vue-crumb {\n\tbackground-image: none;\n\tdisplay: inline-flex;\n\theight: var(--default-clickable-area);\n\tpadding: 0;\n\n\t&:last-child {\n\t\tmin-width: 0;\n\n\t\t// Don't show breadcrumb separator for last crumb\n\t\t.vue-crumb__separator {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// Necessary to hide hidden crumbs\n\t&--hidden {\n\t\tdisplay: none;\n\t}\n\t&__separator {\n\t\tpadding: 0;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\t// Necessary for indicating hovering for drag and drop\n\t&#{&}--hovered :deep(.button-vue) {\n\t\tbackground-color: var(--color-background-dark);\n\t\tcolor: var(--color-main-text);\n\t}\n\t// Adjust button style\n\t&:not(:last-child) :deep() .button-vue {\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&__text {\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\t:deep(.button-vue__text) {\n\t\tmargin: 0;\n\t}\n\n\t// Adjust action item appearance for crumbs with actions\n\t// to match other crumbs\n\t&:not(.dropdown) :deep(.action-item) {\n\t\t// Adjustments necessary to correctly shrink on small screens\n\t\tmax-width: 100%;\n\n\t\t.button-vue {\n\t\t\tpadding: 0 4px 0 16px;\n\t\t\tmax-width: 100%;\n\n\t\t\t&__wrapper {\n\t\t\t\tflex-direction: row-reverse;\n\t\t\t}\n\t\t}\n\n\t\t// Adjust the background of the last crumb when the action is open\n\t\t&.action-item--open .action-item__menutoggle {\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_normalizeProps","_withModifiers","_createBlock","_mergeProps","_createSlots","_withCtx","_renderSlot","_createElementVNode","_normalizeClass","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":"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"}

package/dist/chunks/NcChip-Cq8DrWKb.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcChip-Cq8DrWKb.mjs","sources":["../../src/components/NcChip/NcChip.vue"],"sourcesContent":["\n<docs>\n### Basic usage\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 8px; flex-wrap: wrap;\">\n\t\t<NcChip text=\"Notes.txt\" />\n\t\t<NcChip text=\"Files\" :icon-path=\"mdiFile\" />\n\t\t<NcChip text=\"Color\" :icon-path=\"mdiPalette\" variant=\"tertiary\" />\n\t\t<NcChip text=\"Current time\" :icon-path=\"mdiClock\" no-close variant=\"primary\" />\n\t</div>\n</template>\n<script>\nimport { mdiClock, mdiFile, mdiPalette } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiClock,\n\t\t\tmdiFile,\n\t\t\tmdiPalette,\n\t\t}\n\t}\n}\n</script>\n```\n\n### Advanced usage\n\nIt is also possible to use custom components for the icon by using the `icon` slot.\nIn this example we are using the `NcAvatar` component to render the users avatar as the icon.\n\n*Hint: If you use round icons like avatars you should set their size to `24px` (or use CSS variable `--chip-size`) to make them fully fill and align with the the chip*\n\nAlso it is possible to pass custom actions.\n\n```vue\n<template>\n\t<NcChip>\n\t\t\n\t\t<template #icon>\n\t\t\t<NcAvatar :size=\"24\" user=\"jdoe\" display-name=\"J. Doe\" />\n\t\t</template>\n\t\t\n\t\t<template #actions>\n\t\t\t<NcActionButton>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<ContactsIcon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tAdd to contacts\n\t\t\t</NcActionButton>\n\t\t</template>\n\t\t\n\t\tJ. Doe\n\t</NcChip>\n</template>\n<script>\nimport ContactsIcon from 'vue-material-design-icons/Contacts.vue'\nexport default {\n\tcomponents: {\n\t\tContactsIcon,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<div class=\"nc-chip\"\n\t\t:class=\"{\n\t\t\t[`nc-chip--${variant}`]: true,\n\t\t\t'nc-chip--no-actions': noClose && !hasActions(),\n\t\t\t'nc-chip--no-icon': !hasIcon(),\n\t\t}\">\n\t\t<span v-if=\"hasIcon()\" class=\"nc-chip__icon\">\n\t\t\t\n\t\t\t<slot name=\"icon\">\n\t\t\t\t\n\t\t\t\t<NcIconSvgWrapper v-if=\"iconPath || iconSvg\"\n\t\t\t\t\tinline\n\t\t\t\t\t:path=\"iconPath\"\n\t\t\t\t\t:svg=\"iconPath ? undefined : iconSvg\"\n\t\t\t\t\t:size=\"18\" />\n\t\t\t</slot>\n\t\t</span>\n\t\t<span class=\"nc-chip__text\">\n\t\t\t\n\t\t\t<slot>{{ text }}</slot>\n\t\t</span>\n\t\t<NcActions v-if=\"canClose || hasActions()\"\n\t\t\tclass=\"nc-chip__actions\"\n\t\t\t:force-menu=\"!canClose\"\n\t\t\tvariant=\"tertiary-no-background\">\n\t\t\t<NcActionButton v-if=\"canClose\"\n\t\t\t\tclose-after-click\n\t\t\t\t@click=\"onClose\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t{{ ariaLabelClose }}\n\t\t\t</NcActionButton>\n\t\t\t\n\t\t\t<slot name=\"actions\" />\n\t\t</NcActions>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { mdiClose } from '@mdi/js'\nimport { computed, useSlots } from 'vue'\nimport { t } from '../../l10n.js'\n\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * aria label to set on the close button\n\t * @default 'Close'\n\t */\n\tariaLabelClose?: string\n\n\t/**\n\t * Main text of the chip.\n\t */\n\ttext?: string\n\n\t/**\n\t * SVG path of the icon to use, this takes precedence over `iconSVG`.\n\t * For example icon paths from `@mdi/js` can be used.\n\t */\n\ticonPath?: string\n\n\t/**\n\t * Inline SVG to use as the icon\n\t */\n\ticonSvg?: string\n\n\t/**\n\t * Set to true to prevent the close button to be shown\n\t */\n\tnoClose?: boolean\n\n\t/**\n\t * Set the chips design variant-\n\t *\n\t * This sets the background style of the chip, similar to NcButton's `variant`.\n\t * @default 'secondary'\n\t * @since 8.23.0\n\t */\n\tvariant: 'primary' | 'secondary' | 'tertiary'\n}>(), {\n\tariaLabelClose: t('Close'),\n\ticonPath: undefined,\n\ticonSvg: undefined,\n\ttext: '',\n\tvariant: 'secondary',\n})\n\nconst emit = defineEmits(['close'])\nconst slots = useSlots()\n\nconst canClose = computed(() => !props.noClose)\nconst hasActions = () => Boolean(slots.actions?.())\nconst hasIcon = () => Boolean(props.iconPath || props.iconSvg || !!slots.icon?.())\n\n/**\n * Handle closing the chip (pressing the X-button)\n */\nfunction onClose() {\n\t/**\n\t * Emitted when the close button is clicked\n\t */\n\temit('close')\n}\n</script>\n\n<style scoped lang=\"scss\">\n.nc-chip {\n\t--chip-size: 24px;\n\t--chip-radius: calc(var(--chip-size) / 2);\n\t// Setup size of wrapper\n\theight: var(--chip-size);\n\tmax-width: fit-content;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tborder-radius: var(--chip-radius);\n\tbackground-color: var(--color-background-hover);\n\n\t&--primary {\n\t\tbackground-color: var(--color-primary-element);\n\t\tcolor: var(--color-primary-element-text);\n\t}\n\n\t&--secondary {\n\t\tbackground-color: var(--color-primary-element-light);\n\t\tcolor: var(--color-primary-element-light-text);\n\t}\n\n\t&--no-actions &__text {\n\t\t// If there are no actions we need to add some padding to ensure the text is not cut-off\n\t\tpadding-inline-end: calc(1.5 * var(--default-grid-baseline));\n\t}\n\n\t&--no-icon &__text {\n\t\t// Add some more space to the border\n\t\tpadding-inline-start: calc(1.5 * var(--default-grid-baseline));\n\t}\n\n\t&__text {\n\t\t// Allow to grow the text\n\t\t// this is only used if an app forces a width of the chip\n\t\tflex: 1 auto;\n\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\ttext-wrap: nowrap;\n\t}\n\n\t&__icon {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\tmargin-inline-end: var(--default-grid-baseline);\n\n\t\tline-height: 1;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// Force size\n\t\toverflow: hidden;\n\t\theight: var(--chip-size);\n\t\twidth: var(--chip-size);\n\t}\n\n\t&__actions {\n\t\t// Do neither grow nor shrink, size is fixed\n\t\tflex: 0 0 var(--chip-size);\n\t\t// Adjust action size to match chip size\n\t\t--default-clickable-area: var(--chip-size);\n\t\t--border-radius-element: var(--chip-radius);\n\t}\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwHA,UAAM,QAAQ;AA4Cd,UAAM,OAAO;AACb,UAAM,QAAQ,SAAS;AAEvB,UAAM,WAAW,SAAS,MAAM,CAAC,MAAM,OAAO;AAC9C,UAAM,aAAa,MAAM,QAAQ,MAAM,WAAW;AAC5C,UAAA,UAAU,MAAM,QAAQ,MAAM,YAAY,MAAM,WAAW,CAAC,CAAC,MAAM,QAAQ;AAKjF,aAAS,UAAU;AAIlB,WAAK,OAAO;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}