@nextcloud/vue 8.0.0-beta.6 → 8.0.0-beta.8

package/dist/Components/NcActions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcActions.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcActions.mjs","sources":["../../src/components/NcActions/NcActions.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<!-- Accessibility guidelines:\nhttps://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html -->\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'\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'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\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'\nimport Delete from 'vue-material-design-icons/Delete'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\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'\nimport Delete from 'vue-material-design-icons/Delete'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\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'\nimport OpenInNew from 'vue-material-design-icons/OpenInNew'\nimport Pencil from 'vue-material-design-icons/Pencil'\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'\nimport Delete from 'vue-material-design-icons/Delete'\nimport Download from 'vue-material-design-icons/Download'\nimport Pencil from 'vue-material-design-icons/Pencil'\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'\nimport Pencil from 'vue-material-design-icons/Pencil'\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'\nimport Delete from 'vue-material-design-icons/Delete'\nimport Download from 'vue-material-design-icons/Download'\nimport Pencil from 'vue-material-design-icons/Pencil'\nimport Plus from 'vue-material-design-icons/Plus'\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'\nimport DotsHorizontalCircleOutline from 'vue-material-design-icons/DotsHorizontalCircleOutline'\nimport MicrophoneOff from 'vue-material-design-icons/MicrophoneOff'\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'\nimport Magnify from 'vue-material-design-icons/Magnify'\n\nexport default {\n\tcomponents: {\n\t\tDelete,\n\t\tMagnify,\n\t},\n}\n</script>\n```\n\n### Type variants\n\n```vue\n<template>\n\t<div>\n\t\t<NcActions :type=\"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 types\" 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 :type=\"current\" menu-name=\"Choose a type\">\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 types\" 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 :type=\"current\"  menu-name=\"Choose a type\">\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 types\" 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'\nimport Palette from 'vue-material-design-icons/Palette'\nimport SelectColor from 'vue-material-design-icons/SelectColor'\nimport CheckboxMarkedCircleOutline from 'vue-material-design-icons/CheckboxMarkedCircleOutline'\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\ttypes: [\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</docs>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport NcPopover from '../NcPopover/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\n\nimport Vue from 'vue'\nimport DotsHorizontal from 'vue-material-design-icons/DotsHorizontal.vue'\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 popovermenu 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\tDotsHorizontal,\n\t\tNcPopover,\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 * Specifies the button type used for trigger and single actions buttons\n\t\t * Accepted values: primary, secondary, tertiary, tertiary-no-background, tertiary-on-primary, error, warning, success. If left empty,\n\t\t * the default button style will be applied.\n\t\t */\n\t\ttype: {\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'].indexOf(value) !== -1\n\t\t\t},\n\t\t\tdefault: null,\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 * aria-hidden attribute for the icon slot\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.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\t},\n\n\temits: [\n\t\t'open',\n\t\t'update:open',\n\t\t'close',\n\t\t'focus',\n\t\t'blur',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\topened: this.open,\n\t\t\tfocusIndex: 0,\n\t\t\trandomId: `menu-${GenRandomId()}`,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\ttriggerBtnType() {\n\t\t\t// If requested, we use a primary button\n\t\t\treturn this.type || (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\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\t},\n\n\tmethods: {\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 {Array} action The action to check\n\t\t * @return {boolean}\n\t\t */\n\t\tisValidSingleAction(action) {\n\t\t\tconst componentName = action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag\n\t\t\treturn ['NcActionButton', 'NcActionLink', 'NcActionRouter'].includes(componentName)\n\t\t},\n\n\t\t// MENU STATE MANAGEMENT\n\t\topenMenu(e) {\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\tcloseMenu(returnFocus = true) {\n\t\t\tif (!this.opened) {\n\t\t\t\treturn\n\t\t\t}\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\t// focus back the menu button\n\t\t\tthis.$refs.menuButton.$el.focus()\n\t\t},\n\n\t\tonOpen(event) {\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.focusFirstAction(event)\n\t\t\t})\n\t\t},\n\n\t\t// MENU KEYS & FOCUS MANAGEMENT\n\t\t// focus nearest focusable item on mouse move\n\t\t// DO NOT change the focus if the target is already focused\n\t\t// this will prevent issues with input being unfocused\n\t\t// on mouse move\n\t\tonMouseFocusAction(event) {\n\t\t\tif (document.activeElement === event.target) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst menuItem = event.target.closest('li')\n\t\t\tif (menuItem) {\n\t\t\t\tconst focusableItem = menuItem.querySelector(focusableSelector)\n\t\t\t\tif (focusableItem) {\n\t\t\t\t\tconst focusList = this.$refs.menu.querySelectorAll(focusableSelector)\n\t\t\t\t\tconst focusIndex = [...focusList].indexOf(focusableItem)\n\t\t\t\t\tif (focusIndex > -1) {\n\t\t\t\t\t\tthis.focusIndex = focusIndex\n\t\t\t\t\t\tthis.focusAction()\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t},\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\t// Up or Shift+Tab\n\t\t\tif (event.keyCode === 38 || (event.keyCode === 9 && event.shiftKey)) {\n\t\t\t\tthis.focusPreviousAction(event)\n\t\t\t}\n\t\t\t// Down or Tab\n\t\t\tif (event.keyCode === 40 || (event.keyCode === 9 && !event.shiftKey)) {\n\t\t\t\tthis.focusNextAction(event)\n\t\t\t}\n\t\t\t// Page-Up\n\t\t\tif (event.keyCode === 33) {\n\t\t\t\tthis.focusFirstAction(event)\n\t\t\t}\n\t\t\t// Page-Down\n\t\t\tif (event.keyCode === 34) {\n\t\t\t\tthis.focusLastAction(event)\n\t\t\t}\n\t\t\t// Esc\n\t\t\tif (event.keyCode === 27) {\n\t\t\t\tthis.closeMenu()\n\t\t\t\tevent.preventDefault()\n\t\t\t}\n\t\t},\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.$refs.menu.querySelectorAll(focusableSelector)[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\t// First element overflows to body-navigation (no preventDefault!) and closes Actions-menu\n\t\t\t\t\tthis.closeMenu()\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.$refs.menu.querySelectorAll(focusableSelector).length - 1\n\t\t\t\tif (this.focusIndex === indexLength) {\n\t\t\t\t\t// Last element overflows to body-navigation (no preventDefault!) and closes Actions-menu\n\t\t\t\t\tthis.closeMenu()\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\tthis.focusIndex = 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.$refs.menu.querySelectorAll(focusableSelector).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\t\t},\n\t},\n\n\t/**\n\t * The render function to display the component\n\t *\n\t * @param {Function} h The function to create VNodes\n\t * @return {object|undefined} The created VNode\n\t */\n\trender(h) {\n\t\t/**\n\t\t * Filter the Actions, so that we only get allowed components.\n\t\t * This also ensure that we don't get 'text' elements, which would\n\t\t * become problematic later on.\n\t\t */\n\t\tconst actions = (this.$slots.default || []).filter(\n\t\t\taction => action?.componentOptions?.tag || action?.componentOptions?.Ctor?.extendOptions?.name,\n\t\t)\n\n\t\tconst isNavLink = (action) => {\n\t\t\tconst componentName = action?.componentOptions?.Ctor?.extendOptions?.name ?? action?.componentOptions?.tag\n\t\t\treturn (\n\t\t\t\tcomponentName === 'NcActionLink'\n\t\t\t\t&& action?.componentOptions?.propsData?.href?.startsWith(window.location.origin)\n\t\t\t)\n\t\t}\n\t\t// Automatically detect whether all actions are website navigation links\n\t\tconst isNav = actions.every(isNavLink)\n\n\t\t/**\n\t\t * Filter and list actions that are allowed to be displayed inline\n\t\t */\n\t\tlet inlineActions = actions.filter(this.isValidSingleAction)\n\t\tif (this.forceMenu && inlineActions.length > 0 && this.inline > 0) {\n\t\t\tVue.util.warn('Specifying forceMenu will ignore any inline actions rendering.')\n\t\t\tinlineActions = []\n\t\t}\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 * Render the provided action\n\t\t *\n\t\t * @param {object} 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 icon = action?.data?.scopedSlots?.icon()?.[0]\n\t\t\t\t|| h('span', { class: ['icon', action?.componentOptions?.propsData?.icon] })\n\t\t\tconst clickListener = action?.componentOptions?.listeners?.click\n\n\t\t\tconst text = action?.componentOptions?.children?.[0]?.text?.trim?.()\n\t\t\tconst ariaLabel = action?.componentOptions?.propsData?.ariaLabel || text\n\t\t\tconst buttonText = this.forceName ? text : ''\n\n\t\t\tlet title = action?.componentOptions?.propsData?.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\treturn h('NcButton',\n\t\t\t\t{\n\t\t\t\t\tclass: [\n\t\t\t\t\t\t'action-item action-item--single',\n\t\t\t\t\t\taction?.data?.staticClass,\n\t\t\t\t\t\taction?.data?.class,\n\t\t\t\t\t],\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\t'aria-label': ariaLabel,\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t},\n\t\t\t\t\tref: action?.data?.ref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t// If it has a menuName, we use a secondary button\n\t\t\t\t\t\ttype: this.type || (buttonText ? 'secondary' : 'tertiary'),\n\t\t\t\t\t\tdisabled: this.disabled || action?.componentOptions?.propsData?.disabled,\n\t\t\t\t\t\tariaHidden: this.ariaHidden,\n\t\t\t\t\t\t...action?.componentOptions?.propsData,\n\t\t\t\t\t},\n\t\t\t\t\ton: {\n\t\t\t\t\t\tfocus: this.onFocus,\n\t\t\t\t\t\tblur: this.onBlur,\n\t\t\t\t\t\t// If we have a click listener,\n\t\t\t\t\t\t// we bind it to execute on click and forward the click event\n\t\t\t\t\t\t...(!!clickListener && {\n\t\t\t\t\t\t\tclick: (event) => {\n\t\t\t\t\t\t\t\tif (clickListener) {\n\t\t\t\t\t\t\t\t\tclickListener(event)\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t}),\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t[\n\t\t\t\t\th('template', { slot: 'icon' }, [icon]),\n\t\t\t\t\tbuttonText,\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 = this.$slots.icon?.[0] || (\n\t\t\t\tthis.defaultIcon\n\t\t\t\t\t? h('span', { class: ['icon', this.defaultIcon] })\n\t\t\t\t\t: h('DotsHorizontal', {\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\tsize: 20,\n\t\t\t\t\t\t},\n\t\t\t\t\t})\n\t\t\t)\n\t\t\treturn h('NcPopover',\n\t\t\t\t{\n\t\t\t\t\tref: 'popover',\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tdelay: 0,\n\t\t\t\t\t\thandleResize: true,\n\t\t\t\t\t\tshown: this.opened,\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tboundary: this.boundariesElement,\n\t\t\t\t\t\tcontainer: this.container,\n\t\t\t\t\t\tpopoverBaseClass: 'action-item__popper',\n\t\t\t\t\t\tsetReturnFocus: this.$refs.menuButton?.$el,\n\t\t\t\t\t},\n\t\t\t\t\t// For some reason the popover component\n\t\t\t\t\t// does not react to props given under the 'props' key,\n\t\t\t\t\t// so we use both 'attrs' and 'props'\n\t\t\t\t\tattrs: {\n\t\t\t\t\t\tdelay: 0,\n\t\t\t\t\t\thandleResize: true,\n\t\t\t\t\t\tshown: this.opened,\n\t\t\t\t\t\tplacement: this.placement,\n\t\t\t\t\t\tboundary: this.boundariesElement,\n\t\t\t\t\t\tcontainer: this.container,\n\t\t\t\t\t\t...this.manualOpen && { triggers: [] },\n\t\t\t\t\t\tpopoverBaseClass: 'action-item__popper',\n\t\t\t\t\t},\n\t\t\t\t\ton: {\n\t\t\t\t\t\tshow: this.openMenu,\n\t\t\t\t\t\t'after-show': this.onOpen,\n\t\t\t\t\t\thide: this.closeMenu,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t[\n\t\t\t\t\th('NcButton', {\n\t\t\t\t\t\tclass: 'action-item__menutoggle',\n\t\t\t\t\t\tprops: {\n\t\t\t\t\t\t\ttype: this.triggerBtnType,\n\t\t\t\t\t\t\tdisabled: this.disabled,\n\t\t\t\t\t\t\tariaHidden: this.ariaHidden,\n\t\t\t\t\t\t},\n\t\t\t\t\t\tslot: 'trigger',\n\t\t\t\t\t\tref: 'menuButton',\n\t\t\t\t\t\tattrs: {\n\t\t\t\t\t\t\t'aria-haspopup': isNav ? null : 'menu',\n\t\t\t\t\t\t\t'aria-label': this.menuName ? null : this.ariaLabel,\n\t\t\t\t\t\t\t'aria-controls': this.opened ? this.randomId : null,\n\t\t\t\t\t\t\t'aria-expanded': this.opened.toString(),\n\t\t\t\t\t\t},\n\t\t\t\t\t\ton: {\n\t\t\t\t\t\t\tfocus: this.onFocus,\n\t\t\t\t\t\t\tblur: this.onBlur,\n\t\t\t\t\t\t},\n\t\t\t\t\t}, [\n\t\t\t\t\t\th('template', { slot: 'icon' }, [triggerIcon]),\n\t\t\t\t\t\tthis.menuName,\n\t\t\t\t\t]),\n\t\t\t\t\th('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\tattrs: {\n\t\t\t\t\t\t\ttabindex: '-1',\n\t\t\t\t\t\t},\n\t\t\t\t\t\ton: {\n\t\t\t\t\t\t\tkeydown: this.onKeydown,\n\t\t\t\t\t\t\tmousemove: this.onMouseFocusAction,\n\t\t\t\t\t\t},\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\tattrs: {\n\t\t\t\t\t\t\t\tid: this.randomId,\n\t\t\t\t\t\t\t\ttabindex: '-1',\n\t\t\t\t\t\t\t\trole: isNav ? null : 'menu',\n\t\t\t\t\t\t\t},\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 && inlineActions.length === 1 && !this.forceMenu) {\n\t\t\treturn renderInlineAction(inlineActions[0])\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\tconst renderedInlineActions = inlineActions.slice(0, this.inline)\n\t\t\t// Filter already rendered actions\n\t\t\tconst menuActions = actions.filter(action => !renderedInlineActions.includes(action))\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.triggerBtnType}`,\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...renderedInlineActions.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.triggerBtnType}`,\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\n\t// Spacing between buttons\n\t& > button {\n\t\tmargin-right: math.div($icon-margin, 2);\n\t}\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</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\toverflow:hidden;\n\n\t.v-popper__inner {\n\t\tborder-radius: var(--border-radius-large);\n\t\tpadding: 4px;\n\t\tmax-height: calc(50vh - 16px);\n\t\toverflow: auto;\n\t}\n}\n</style>\n"],"names":["focusableSelector","_sfc_main","NcButton","DotsHorizontal","NcPopover","value","t","GenRandomId","state","action","componentName","_e","_c","_b","_a","_d","returnFocus","event","menuItem","focusableItem","focusIndex","currentActiveElement","focusElement","liMenuParent","indexLength","h","actions","isNavLink","_h","_g","_f","isNav","inlineActions","Vue","renderInlineAction","icon","clickListener","text","_l","_k","_j","_i","ariaLabel","_n","_m","buttonText","title","_p","_o","_q","_r","_s","_u","_t","_v","renderActionsPopover","triggerIcon","renderedInlineActions","menuActions"],"mappings":"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"}

package/dist/Components/NcAppContent.cjs

@@ -1 +1,218 @@
-var y=require("../assets/index42.css");const o=require("./NcButton.cjs"),p=require("../chunks/l10n-46d0c1c0.cjs");require("../Directives/Tooltip.cjs");const i=require("@nextcloud/event-bus"),r=require("vue-material-design-icons/ArrowRight.vue"),l=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs"),u=require("floating-vue"),h=require("../Mixins/isMobile.cjs"),c=require("@nextcloud/browser-storage"),g=require("@vueuse/core"),a=require("splitpanes");require("splitpanes/dist/splitpanes.css");const d={name:"NcAppDetailsToggle",directives:{tooltip:u.VTooltip},components:{NcButton:o,ArrowRight:r},computed:{title(){return p.t("Go back to the list")}},beforeMount(){this.toggleAppNavigationButton(!0)},beforeDestroy(){this.toggleAppNavigationButton(!1)},methods:{toggleAppNavigationButton(t=!0){const e=document.querySelector(".app-navigation .app-navigation-toggle");e&&(e.style.display=t?"none":null,t===!0&&i.emit("toggle-navigation",{open:!1}))}}};var f=function(){var t=this,e=t._self._c;return e("NcButton",{directives:[{name:"tooltip",rawName:"v-tooltip",value:t.title,expression:"title"}],staticClass:"app-details-toggle",attrs:{"aria-label":t.title},scopedSlots:t._u([{key:"icon",fn:function(){return[e("ArrowRight",{attrs:{size:20}})]},proxy:!0}])})},m=[],z=l.normalizeComponent(d,f,m,!1,null,"5244e83e",null,null);const S=z.exports;const n=c.getBuilder("nextcloud").persist().build(),w={name:"NcAppContent",components:{NcAppDetailsToggle:S,Pane:a.Pane,Splitpanes:a.Splitpanes},mixins:[h],props:{allowSwipeNavigation:{type:Boolean,default:!0},listSize:{type:Number,default:20},listMinWidth:{type:Number,default:15},listMaxWidth:{type:Number,default:40},paneConfigKey:{type:String,default:""},showDetails:{type:Boolean,default:!0},pageHeading:{type:String,default:null}},emits:["update:showDetails","resize:list"],data(){return{contentHeight:0,hasList:!1,swiping:{},listPaneSize:this.restorePaneConfig()}},computed:{paneConfigID(){if(this.paneConfigKey!=="")return`pane-list-size-${this.paneConfigKey}`;try{return`pane-list-size-${appName}`}catch{return console.info("[INFO] AppContent:","falling back to global nextcloud pane config"),"pane-list-size-nextcloud"}},detailsPaneSize(){return this.listPaneSize?100-this.listPaneSize:this.paneDefaults.details.size},paneDefaults(){return{list:{size:this.listSize,min:this.listMinWidth,max:this.listMaxWidth},details:{size:100-this.listSize,min:100-this.listMaxWidth,max:100-this.listMinWidth}}}},updated(){this.checkListSlot()},mounted(){this.allowSwipeNavigation&&(this.swiping=g.useSwipe(this.$el,{onSwipeEnd:this.handleSwipe})),this.checkListSlot(),this.restorePaneConfig()},methods:{handleSwipe(t,e){Math.abs(this.swiping.lengthX)>70&&(this.swiping.coordsStart.x<300/2&&e==="right"?i.emit("toggle-navigation",{open:!0}):this.swiping.coordsStart.x<300*1.5&&e==="left"&&i.emit("toggle-navigation",{open:!1}))},handlePaneResize(t){const e=parseInt(t[0].size,10);n.setItem(this.paneConfigID,JSON.stringify(e)),this.listPaneSize=e,this.$emit("resize:list",{size:e}),console.debug("AppContent pane config",e)},checkListSlot(){const t=!!this.$slots.list;this.hasList!==t&&(this.hasList=t)},restorePaneConfig(){const t=parseInt(n.getItem(this.paneConfigID),10);if(!isNaN(t)&&t!==this.listPaneSize)return console.debug("AppContent pane config",t),this.listPaneSize=t,t},hideDetails(){this.$emit("update:showDetails",!1)}}};var v=function(){var t=this,e=t._self._c;return e("main",{staticClass:"app-content no-snapper",class:{"app-content--has-list":t.hasList},attrs:{id:"app-content-vue"}},[t.pageHeading?e("h1",{staticClass:"hidden-visually"},[t._v(" "+t._s(t.pageHeading)+" ")]):t._e(),t.hasList?[t.isMobile?e("div",{staticClass:"app-content-wrapper app-content-wrapper--mobile",class:t.showDetails?"app-content-wrapper--show-details":"app-content-wrapper--show-list"},[t.hasList&&t.showDetails?e("NcAppDetailsToggle",{nativeOn:{click:function(s){return s.stopPropagation(),s.preventDefault(),t.hideDetails.apply(null,arguments)}}}):t._e(),t._t("list"),t._t("default")],2):e("div",{staticClass:"app-content-wrapper"},[e("Splitpanes",{staticClass:"default-theme",on:{resized:t.handlePaneResize}},[e("Pane",{staticClass:"splitpanes__pane-list",attrs:{size:t.listPaneSize||t.paneDefaults.list.size,"min-size":t.paneDefaults.list.min,"max-size":t.paneDefaults.list.max}},[t._t("list")],2),e("Pane",{staticClass:"splitpanes__pane-details",attrs:{size:t.detailsPaneSize,"min-size":t.paneDefaults.details.min,"max-size":t.paneDefaults.details.max}},[t._t("default")],2)],1)],1)]:t._t("default")],2)},C=[],D=l.normalizeComponent(w,v,C,!1,null,"38aa7204",null,null);const x=D.exports;module.exports=x;
+var P = require("../assets/index-ed4adf1d.css");
+const p = require("./NcButton.cjs"), r = require("../chunks/l10n-903083c4.cjs");
+require("../Directives/Tooltip.cjs");
+const n = require("@nextcloud/event-bus"), c = require("vue-material-design-icons/ArrowRight.vue"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), u = require("floating-vue"), g = require("../Mixins/isMobile.cjs"), h = require("@nextcloud/browser-storage"), d = require("@vueuse/core"), a = require("splitpanes");
+require("splitpanes/dist/splitpanes.css");
+const f = (t) => t && t.__esModule ? t : { default: t }, _ = /* @__PURE__ */ f(c);
+const m = {
+  name: "NcAppDetailsToggle",
+  directives: {
+    tooltip: u.VTooltip
+  },
+  components: {
+    NcButton: p,
+    ArrowRight: _.default
+  },
+  computed: {
+    title() {
+      return r.t("Go back to the list");
+    }
+  },
+  beforeMount() {
+    this.toggleAppNavigationButton(!0);
+  },
+  beforeDestroy() {
+    this.toggleAppNavigationButton(!1);
+  },
+  methods: {
+    toggleAppNavigationButton(t = !0) {
+      const e = document.querySelector(".app-navigation .app-navigation-toggle");
+      e && (e.style.display = t ? "none" : null, t === !0 && n.emit("toggle-navigation", { open: !1 }));
+    }
+  }
+};
+var z = function() {
+  var e = this, i = e._self._c;
+  return i("NcButton", { directives: [{ name: "tooltip", rawName: "v-tooltip", value: e.title, expression: "title" }], staticClass: "app-details-toggle", attrs: { "aria-label": e.title }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [i("ArrowRight", { attrs: { size: 20 } })];
+  }, proxy: !0 }]) });
+}, S = [], v = /* @__PURE__ */ l.normalizeComponent(
+  m,
+  z,
+  S,
+  !1,
+  null,
+  "5244e83e",
+  null,
+  null
+);
+const w = v.exports;
+const o = h.getBuilder("nextcloud").persist().build(), C = {
+  name: "NcAppContent",
+  components: {
+    NcAppDetailsToggle: w,
+    Pane: a.Pane,
+    Splitpanes: a.Splitpanes
+  },
+  mixins: [g],
+  props: {
+    /**
+     * Allows to disable the control by swipe of the app navigation open state
+     */
+    allowSwipeNavigation: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Allows you to set the default width of the resizable list in %
+     * Must be between listMinWidth and listMaxWidth
+     */
+    listSize: {
+      type: Number,
+      default: 20
+    },
+    /**
+     * Allows you to set the minimum width of the list column in %
+     */
+    listMinWidth: {
+      type: Number,
+      default: 15
+    },
+    /**
+     * Allows you to set the maximum width of the list column in %
+     */
+    listMaxWidth: {
+      type: Number,
+      default: 40
+    },
+    /**
+     * Specify the config key for the pane config sizes
+     * Default is the global var appName if you use the webpack-vue-config
+     */
+    paneConfigKey: {
+      type: String,
+      default: ""
+    },
+    /**
+     * When in mobile view, only the list or the details are shown
+     * If you provide a list, you need to provide a variable
+     * that will be set to true by the user when an element of
+     * the list gets selected. The details will then show a back
+     * arrow to return to the list that will update this prop to false.
+     */
+    showDetails: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Specify the `<h1>` page heading
+     */
+    pageHeading: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    "update:showDetails",
+    "resize:list"
+  ],
+  data() {
+    return {
+      contentHeight: 0,
+      hasList: !1,
+      swiping: {},
+      listPaneSize: this.restorePaneConfig()
+    };
+  },
+  computed: {
+    paneConfigID() {
+      if (this.paneConfigKey !== "")
+        return `pane-list-size-${this.paneConfigKey}`;
+      try {
+        return `pane-list-size-${appName}`;
+      } catch {
+        return console.info("[INFO] AppContent:", "falling back to global nextcloud pane config"), "pane-list-size-nextcloud";
+      }
+    },
+    detailsPaneSize() {
+      return this.listPaneSize ? 100 - this.listPaneSize : this.paneDefaults.details.size;
+    },
+    paneDefaults() {
+      return {
+        list: {
+          size: this.listSize,
+          min: this.listMinWidth,
+          max: this.listMaxWidth
+        },
+        // set the inverse values of the details column
+        // based on the provided (or default) values of the list column
+        details: {
+          size: 100 - this.listSize,
+          min: 100 - this.listMaxWidth,
+          max: 100 - this.listMinWidth
+        }
+      };
+    }
+  },
+  updated() {
+    this.checkListSlot();
+  },
+  mounted() {
+    this.allowSwipeNavigation && (this.swiping = d.useSwipe(this.$el, {
+      onSwipeEnd: this.handleSwipe
+    })), this.checkListSlot(), this.restorePaneConfig();
+  },
+  methods: {
+    /**
+     * handle the swipe event
+     *
+     * @param {TouchEvent} e The touch event
+     * @param {import('@vueuse/core').SwipeDirection} direction The swipe direction of the event
+     */
+    handleSwipe(t, e) {
+      Math.abs(this.swiping.lengthX) > 70 && (this.swiping.coordsStart.x < 300 / 2 && e === "right" ? n.emit("toggle-navigation", {
+        open: !0
+      }) : this.swiping.coordsStart.x < 300 * 1.5 && e === "left" && n.emit("toggle-navigation", {
+        open: !1
+      }));
+    },
+    handlePaneResize(t) {
+      const e = parseInt(t[0].size, 10);
+      o.setItem(this.paneConfigID, JSON.stringify(e)), this.listPaneSize = e, this.$emit("resize:list", { size: e }), console.debug("AppContent pane config", e);
+    },
+    // $slots is not reactive, we need to update this manually
+    checkListSlot() {
+      const t = !!this.$slots.list;
+      this.hasList !== t && (this.hasList = t);
+    },
+    // browserStorage is not reactive, we need to update this manually
+    restorePaneConfig() {
+      const t = parseInt(o.getItem(this.paneConfigID), 10);
+      if (!isNaN(t) && t !== this.listPaneSize)
+        return console.debug("AppContent pane config", t), this.listPaneSize = t, t;
+    },
+    /**
+     * The user clicked the back arrow from the details view
+     */
+    hideDetails() {
+      this.$emit("update:showDetails", !1);
+    }
+  }
+};
+var N = function() {
+  var e = this, i = e._self._c;
+  return i("main", { staticClass: "app-content no-snapper", class: { "app-content--has-list": e.hasList }, attrs: { id: "app-content-vue" } }, [e.pageHeading ? i("h1", { staticClass: "hidden-visually" }, [e._v(" " + e._s(e.pageHeading) + " ")]) : e._e(), e.hasList ? [e.isMobile ? i("div", { staticClass: "app-content-wrapper app-content-wrapper--mobile", class: e.showDetails ? "app-content-wrapper--show-details" : "app-content-wrapper--show-list" }, [e.hasList && e.showDetails ? i("NcAppDetailsToggle", { nativeOn: { click: function(s) {
+    return s.stopPropagation(), s.preventDefault(), e.hideDetails.apply(null, arguments);
+  } } }) : e._e(), e._t("list"), e._t("default")], 2) : i("div", { staticClass: "app-content-wrapper" }, [i("Splitpanes", { staticClass: "default-theme", on: { resized: e.handlePaneResize } }, [i("Pane", { staticClass: "splitpanes__pane-list", attrs: { size: e.listPaneSize || e.paneDefaults.list.size, "min-size": e.paneDefaults.list.min, "max-size": e.paneDefaults.list.max } }, [e._t("list")], 2), i("Pane", { staticClass: "splitpanes__pane-details", attrs: { size: e.detailsPaneSize, "min-size": e.paneDefaults.details.min, "max-size": e.paneDefaults.details.max } }, [e._t("default")], 2)], 1)], 1)] : e._t("default")], 2);
+}, y = [], D = /* @__PURE__ */ l.normalizeComponent(
+  C,
+  N,
+  y,
+  !1,
+  null,
+  "9a2b658c",
+  null,
+  null
+);
+const x = D.exports;
+module.exports = x;

package/dist/Components/NcAppContent.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcAppContent.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcAppContent.cjs","sources":["../../src/components/NcAppContent/NcAppDetailsToggle.vue","../../src/components/NcAppContent/NcAppContent.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2021 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<template>\n\t<NcButton v-tooltip=\"title\" :aria-label=\"title\" class=\"app-details-toggle\">\n\t\t<template #icon>\n\t\t\t<ArrowRight :size=\"20\" />\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.js'\nimport { t } from '../../l10n.js'\nimport Tooltip from '../../directives/Tooltip/index.js'\n\nimport { emit } from '@nextcloud/event-bus'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tname: 'NcAppDetailsToggle',\n\n\tdirectives: {\n\t\ttooltip: Tooltip,\n\t},\n\n\tcomponents: {\n\t\tNcButton,\n\t\tArrowRight,\n\t},\n\n\tcomputed: {\n\t\ttitle() {\n\t\t\treturn t('Go back to the list')\n\t\t},\n\t},\n\n\tbeforeMount() {\n\t\tthis.toggleAppNavigationButton(true)\n\t},\n\n\tbeforeDestroy() {\n\t\tthis.toggleAppNavigationButton(false)\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: fixed;\n\twidth: $clickable-area;\n\theight: $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\t&:active,\n\t&:hover,\n\t&:focus {\n\t\topacity: 1;\n\t}\n}\n</style>\n","<!--\n - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\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</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<!-- Mobile view does not allow resizeable panes -->\n\t\t\t<div v-if=\"isMobile\"\n\t\t\t\t:class=\"showDetails ? 'app-content-wrapper--show-details' : 'app-content-wrapper--show-list'\"\n\t\t\t\tclass=\"app-content-wrapper app-content-wrapper--mobile\">\n\t\t\t\t<NcAppDetailsToggle v-if=\"hasList && showDetails\" @click.native.stop.prevent=\"hideDetails\" />\n\n\t\t\t\t<slot name=\"list\" />\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<div v-else class=\"app-content-wrapper\">\n\t\t\t\t<Splitpanes class=\"default-theme\"\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<!-- @slot Provide a list to the app content -->\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<!-- @slot Provide the main content to the app content -->\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\n\t\t<!-- @slot Provide the main content to the app content -->\n\t\t<slot v-else />\n\t</main>\n</template>\n\n<script>\nimport NcAppDetailsToggle from './NcAppDetailsToggle.vue'\nimport isMobile from '../../mixins/isMobile/index.js'\n\nimport { getBuilder } from '@nextcloud/browser-storage'\nimport { emit } from '@nextcloud/event-bus'\nimport { useSwipe } from '@vueuse/core'\nimport { Splitpanes, Pane } from 'splitpanes'\n\nimport 'splitpanes/dist/splitpanes.css'\n\nconst browserStorage = getBuilder('nextcloud').persist().build()\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\n\tmixins: [isMobile],\n\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\tallowSwipeNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Allows you to set the default width of the resizable list in %\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 %\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 %\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 * 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},\n\n\temits: [\n\t\t'update:showDetails',\n\t\t'resize:list',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tcontentHeight: 0,\n\t\t\thasList: false,\n\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-${appName}`\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\t},\n\n\tupdated() {\n\t\tthis.checkListSlot()\n\t},\n\n\tmounted() {\n\t\tif (this.allowSwipeNavigation) {\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.checkListSlot()\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\tcheckListSlot() {\n\t\t\tconst hasListSlot = !!this.$slots.list\n\t\t\tif (this.hasList !== hasListSlot) {\n\t\t\t\tthis.hasList = hasListSlot\n\t\t\t}\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--mobile {\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}\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\t\t\ttop: var(--header-height);\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\twidth: 9px;\n\t\tmargin-left: -5px;\n\t\tbackground-color: transparent;\n\t\tborder-left: none;\n\n\t\t&:before,\n\t\t&:after {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main$1","floatingVue","Components_NcButton","ArrowRight__default","l10n","hide","appNavigationToggle","eventBus","browserStorage","browserStorage$1","_sfc_main","NcAppDetailsToggle","splitpanes","Mixins_isMobile","core","e","direction","event","listPaneSize","hasListSlot"],"mappings":"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"}