npm - @nextcloud/vue - Versions diffs - 8.18.0 → 8.20.0 - Mend

@nextcloud/vue 8.18.0 → 8.20.0

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 (654) hide show

package/dist/chunks/{NcDialog-D9l7GQQJ.cjs → NcDialog-CWGgSCpv.cjs} RENAMED Viewed

@@ -1,9 +1,9 @@
-require('../assets/NcDialog-ByAK1rQ0.css');
+require('../assets/NcDialog-Bzs9oxyt.css');
 "use strict";
 const core = require("@vueuse/core");
 const Vue = require("vue");
 const Components_NcModal = require("../Components/NcModal.cjs");
-const NcDialogButton = require("./NcDialogButton-C4-agMb3.cjs");
+const NcDialogButton = require("./NcDialogButton-B7d1LWFN.cjs");
 const GenRandomId = require("./GenRandomId-BQDud3d4.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const _sfc_main = Vue.defineComponent({
@@ -170,7 +170,7 @@ const _sfc_main = Vue.defineComponent({
     const wrapper = Vue.ref();
     const { width: dialogWidth } = core.useElementSize(wrapper, { width: 900 });
     const isNavigationCollapsed = Vue.computed(() => dialogWidth.value < 876);
-    const hasNavigation = Vue.computed(() => (slots == null ? void 0 : slots.navigation) !== void 0);
+    const hasNavigation = Vue.computed(() => slots?.navigation !== void 0);
     const navigationId = GenRandomId.GenRandomId();
     const navigationAriaLabelAttr = Vue.computed(() => props.navigationAriaLabel || void 0);
     const navigationAriaLabelledbyAttr = Vue.computed(() => {

package/dist/chunks/{NcDialog-D9l7GQQJ.cjs.map → NcDialog-CWGgSCpv.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDialog-D9l7GQQJ.cjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog :open.sync=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" :can-close=\"false\">\n\t\t\t<template #actions>\n\t\t\t\t<NcButton @click=\"showDialog = false\">Ok</NcButton>\n\t\t\t</template>\n\t\t\t<div style=\"color: red; font-weight: bold;\">This is serious</div>\n\t\t</NcDialog>\n\t\t<NcDialog :open.sync=\"showLongDialog\" name=\"Lorem Ipsum\">\n\t\t\t<p v-for=\"i in new Array(63)\" :key=\"i\">Lorem ipsum dolor sit amet.</p>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tshowLongDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Form example\nIt is also possible to use the dialog for small forms.\nThis can be used when asking for a password, a name or similar to have native form validation.\n\nTo make the dialog a form the `is-form` prop needs to be set.\nWhen using the form variant you can also pass buttons with `nativeType` prop to add a native `submit` button.\n\nNote that this is not possible if the dialog contains a navigation!\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog is-form\n\t\t\t:buttons=\"buttons\"\n\t\t\tname=\"Choose a name\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@submit=\"currentName = newName\"\n\t\t\t@closing=\"newName = ''\">\n\t\t\t<NcTextField label=\"New name\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired\n\t\t\t\tminlength=\"6\"\n\t\t\t\t:value.sync=\"newName\" />\n\t\t</NcDialog>\n\t\t<p>New name: {{ currentName }}</p>\n\t</div>\n</template>\n<script>\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tnewName: '',\n\t\t\tcurrentName: 'none yet.',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Submit',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tnativeType: 'submit',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Loading buttons\nSometimes a dialog ends with a request and this request might fail due to server-side-validation.\nIn this case it is often desired to keep the dialog open, this can be done by returning `false` from the button callback,\nto not block this callback should return a `Promise<false>`.\n\nIt is also possible to get the result of the callback from the dialog, as the result is passed as the payload of the `closing` event.\n\nWhile the promise is awaited the button will have a loading state,\nthis means, as long as no custom `icon`-slot is used, a loading icon will be shown.\nPlease note that the button will not be disabled or accessibility reasons,\nbecause disabled elements cannot be focused and so the loading state could not be communicated e.g. via screen readers.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"openDialog\">Show dialog</NcButton>\n\t\t<NcDialog :buttons=\"buttons\"\n\t\t\tname=\"Create user\"\n\t\t\t:message=\"message\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@closing=\"response = $event\"\n\t\t\t@update:open=\"clickClosesDialog = false\" />\n\t\t<div style=\"margin-top: 8px;\">Dialog response: {{ response }}</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tclickClosesDialog: false,\n\t\t\tresponse: 'none',\n\t\t}\n\t},\n\n\tmethods: {\n\t\tasync callback() {\n\t\t\t// wait 3 seconds\n\t\t\tawait new Promise((resolve) => window.setTimeout(resolve, 3000))\n\t\t\tthis.clickClosesDialog = !this.clickClosesDialog\n\t\t\t// Do not close the dialog on first and then every second button click\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\t// return false means the dialog stays open\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn '✅'\n\t\t},\n\n\t\topenDialog() {\n\t\t\tthis.response = 'none'\n\t\t\tthis.showDialog = true\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tbuttons() {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Create user',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tcallback: this.callback,\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\tmessage() {\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\treturn 'Next button click will work and close the dialog.'\n\t\t\t} else {\n\t\t\t\treturn 'Clicking the button will load but not close the dialog.'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\t:enable-slideshow=\"false\"\n\t\t:enable-swipe=\"false\"\n\t\tv-bind=\"modalProps\"\n\t\t@close=\"handleClosed\"\n\t\t@update:show=\"handleClosing()\">\n\t\t<!-- The dialog name / header -->\n\t\t<h2 :id=\"navigationId\" class=\"dialog__name\" v-text=\"name\" />\n\t\t<component :is=\"dialogTagName\"\n\t\t\tref=\"dialogElement\"\n\t\t\tclass=\"dialog\"\n\t\t\t:class=\"dialogClasses\"\n\t\t\tv-on=\"dialogListeners\">\n\t\t\t<div ref=\"wrapper\" :class=\"['dialog__wrapper', { 'dialog__wrapper--collapsed': isNavigationCollapsed }]\">\n\t\t\t\t<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->\n\t\t\t\t<nav v-if=\"hasNavigation\"\n\t\t\t\t\tclass=\"dialog__navigation\"\n\t\t\t\t\t:class=\"navigationClasses\"\n\t\t\t\t\t:aria-label=\"navigationAriaLabelAttr\"\n\t\t\t\t\t:aria-labelledby=\"navigationAriaLabelledbyAttr\">\n\t\t\t\t\t<slot name=\"navigation\" :is-collapsed=\"isNavigationCollapsed\" />\n\t\t\t\t</nav>\n\t\t\t\t<!-- Main dialog content -->\n\t\t\t\t<div class=\"dialog__content\" :class=\"contentClasses\">\n\t\t\t\t\t<slot>\n\t\t\t\t\t\t<p class=\"dialog__text\">\n\t\t\t\t\t\t\t{{ message }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- The dialog actions aka the buttons -->\n\t\t\t<div class=\"dialog__actions\">\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcDialogButton v-for=\"(button, idx) in buttons\"\n\t\t\t\t\t\t:key=\"idx\"\n\t\t\t\t\t\tv-bind=\"button\"\n\t\t\t\t\t\t@click=\"handleButtonClose\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</component>\n\t</NcModal>\n</template>\n\n<script>\nimport { useElementSize } from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\nimport NcModal from '../NcModal/index.js'\nimport NcDialogButton from '../NcDialogButton/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default defineComponent({\n\tname: 'NcDialog',\n\n\tcomponents: {\n\t\tNcDialogButton,\n\t\tNcModal,\n\t},\n\n\tprops: {\n\t\t/** Name of the dialog (the heading) /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Text of the dialog /\n\t\tmessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Additional elements to add to the focus trap /\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tvalidator: (arr) => {\n\t\t\t\treturn (\n\t\t\t\t\tArray.isArray(arr) && arr.every(\n\t\t\t\t\t\t(element) =>\n\t\t\t\t\t\t\ttypeof element === 'string' \|\| element instanceof HTMLElement,\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t},\n\t\t\tdefault: () => ([]),\n\t\t},\n\n\t\t/\n\t\t The element where to mount the dialog, if `null` is passed the dialog is mounted in place\n\t\t * @default 'body'\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t Whether the dialog should be shown\n\t\t * @default true\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 Size of the underlying NcModal\n\t\t * @default 'small'\n\t\t * @type {'small'\|'normal'\|'large'\|'full'}\n\t\t /\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (value) => typeof value === 'string' && ['small', 'normal', 'large', 'full'].includes(value),\n\t\t},\n\n\t\t/\n\t\t Buttons to display\n\t\t * @default []\n\t\t /\n\t\tbuttons: {\n\t\t\ttype: Array,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),\n\t\t},\n\n\t\t/\n\t\t Set to false to no show a close button on the dialog\n\t\t * @default true\n\t\t /\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Close the dialog if the user clicked outside of the dialog\n\t\t * Only relevant if `canClose` is set to true.\n\t\t /\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Make the dialog wrapper a HTML form element.\n\t\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t\t * Please note that when using the property the `navigation` should not be used.\n\t\t /\n\t\tisForm: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Declare if hiding the modal should be animated\n\t\t * @default false\n\t\t /\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Optionally pass additionaly classes which will be set on the navigation for custom styling\n\t\t * @default ''\n\t\t * @example\n\t\t * ```html\n\t\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t\t * <!-- ... -->\n\t\t * <style lang=\"scss\">\n\t\t * :deep(.mydialog-navigation) {\n\t\t * flex-direction: row-reverse;\n\t\t * }\n\t\t * </style>\n\t\t * ```\n\t\t /\n\t\tnavigationClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-label for the dialog navigation.\n\t\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t\t \n\t\t By default, navigation is labeled by the dialog name.\n\t\t /\n\t\tnavigationAriaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-labelledby for the dialog navigation.\n\t\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t\t \n\t\t By default, navigation is labeled by the dialog name.\n\t\t /\n\t\tnavigationAriaLabelledby: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Optionally pass additionaly classes which will be set on the content wrapper for custom styling\n\t\t * @default ''\n\t\t /\n\t\tcontentClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Optionally pass additionaly classes which will be set on the dialog itself\n\t\t * (the default `class` attribute will be set on the modal wrapper)\n\t\t * @default ''\n\t\t /\n\t\tdialogClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['closing', 'update:open', 'submit'],\n\n\tsetup(props, { emit, slots }) {\n\t\t/\n\t\t The dialog wrapper element\n\t\t * @type {import('vue').Ref<HTMLDivElement>}\n\t\t /\n\t\tconst wrapper = ref()\n\n\t\t/\n\t\t We use the dialog width to decide if we collapse the navigation (flex direction row)\n\t\t /\n\t\tconst { width: dialogWidth } = useElementSize(wrapper, { width: 900 })\n\n\t\t/\n\t\t Whether the navigation is collapsed due to dialog and window size\n\t\t * (collapses when modal is below: 900px modal width - 2x 12px margin)\n\t\t /\n\t\tconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n\t\t/\n\t\t Whether a navigation was passed and the element should be displayed\n\t\t /\n\t\tconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n\t\t/\n\t\t The unique id of the nav element\n\t\t /\n\t\tconst navigationId = GenRandomId()\n\n\t\t/\n\t\t aria-label attribute for the nav element\n\t\t /\n\t\tconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel \|\| undefined)\n\n\t\t/\n\t\t aria-labelledby attribute for the nav element\n\t\t /\n\t\tconst navigationAriaLabelledbyAttr = computed(() => {\n\t\t\tif (props.navigationAriaLabel) {\n\t\t\t\t// Not needed, already labelled by aria-label\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t\t// Use dialog name as a fallback label for navigation\n\t\t\treturn props.navigationAriaLabelledby \|\| navigationId\n\t\t})\n\n\t\t/\n\t\t @type {import('vue').Ref<HTMLFormElement\|undefined>}\n\t\t /\n\t\tconst dialogElement = ref()\n\t\t/\n\t\t The HTML element to use for the dialog wrapper - either form or plain div\n\t\t /\n\t\tconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n\t\t/\n\t\t Listener to assign to the dialog element\n\t\t * This only sets the `@submit` listener if the dialog element is a form\n\t\t /\n\t\tconst dialogListeners = computed(() => dialogTagName.value === 'form'\n\t\t\t? {\n\t\t\t\t/\n\t\t\t\t @param {SubmitEvent} event Form submit event\n\t\t\t\t /\n\t\t\t\tsubmit(event) {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t/* Forwarded HTMLFormElement submit event (only if `is-form` is set) /\n\t\t\t\t\temit('submit', event)\n\t\t\t\t},\n\t\t\t}\n\t\t\t: {},\n\t\t)\n\n\t\t/\n\t\t If the underlying modal is shown\n\t\t /\n\t\tconst showModal = ref(true)\n\n\t\t// Because NcModal does not emit `close` when show prop is changed\n\t\t/\n\t\t Handle clicking a dialog button -> should close\n\t\t * @param {MouseEvent} event The click event\n\t\t * @param {unknown} result Result of the callback function\n\t\t /\n\t\tconst handleButtonClose = (event, result) => {\n\t\t\t// Skip close if invalid dialog\n\t\t\tif (dialogTagName.value === 'form' && !dialogElement.value.reportValidity()) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\thandleClosing(result)\n\t\t\twindow.setTimeout(() => handleClosed(), 300)\n\t\t}\n\n\t\t/\n\t\t Handle closing the dialog, optional out transition did not run yet\n\t\t * @param {unknown} result the result of the callback\n\t\t /\n\t\tconst handleClosing = (result) => {\n\t\t\tshowModal.value = false\n\t\t\t/\n\t\t\t Emitted when the dialog is closing, so the out transition did not finish yet.\n\t\t\t * @param result The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t\t\t /\n\t\t\temit('closing', result)\n\t\t}\n\n\t\t/\n\t\t Handle dialog closed (out transition finished)\n\t\t /\n\t\tconst handleClosed = () => {\n\t\t\tshowModal.value = true\n\t\t\t/\n\t\t\t Emitted then the dialog is fully closed and the out transition run\n\t\t\t /\n\t\t\temit('update:open', false)\n\t\t}\n\n\t\t/\n\t\t Properties to pass to the underlying NcModal\n\t\t /\n\t\tconst modalProps = computed(() => ({\n\t\t\tcanClose: props.canClose,\n\t\t\tcontainer: props.container === undefined ? 'body' : props.container,\n\t\t\t// we do not pass the name as we already have the name as the headline\n\t\t\t// name: props.name,\n\t\t\t// But we need to set the correct label id so the dialog is labelled\n\t\t\tlabelId: navigationId,\n\t\t\tsize: props.size,\n\t\t\tshow: props.open && showModal.value,\n\t\t\toutTransition: props.outTransition,\n\t\t\tcloseOnClickOutside: props.closeOnClickOutside,\n\t\t\tadditionalTrapElements: props.additionalTrapElements,\n\t\t}))\n\n\t\treturn {\n\t\t\tdialogElement,\n\t\t\tdialogListeners,\n\t\t\tdialogTagName,\n\t\t\thandleButtonClose,\n\t\t\thandleClosing,\n\t\t\thandleClosed,\n\t\t\thasNavigation,\n\t\t\tnavigationId,\n\t\t\tnavigationAriaLabelAttr,\n\t\t\tnavigationAriaLabelledbyAttr,\n\t\t\tisNavigationCollapsed,\n\t\t\tmodalProps,\n\t\t\twrapper,\n\t\t}\n\t},\n})\n</script>\n\n<style lang=\"scss\">\n/* When having the small dialog style we override the modal styling so dialogs look more dialog like */\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.dialog__modal .modal-wrapper--small .modal-container {\n\t\twidth: fit-content;\n\t\theight: unset;\n\t\tmax-height: 90%;\n\t\tposition: relative;\n\t\ttop: unset;\n\t\tborder-radius: var(--border-radius-large);\n\t}\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.dialog {\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\n\t&__modal {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice\n\t\t\tpadding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline\n\t\t}\n\t\t:deep(.modal-wrapper .modal-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden; // Only overflow on the .dialog__content\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\t// Auto scale to fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\n\t\t&--collapsed {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t}\n\n\t// Navigation styling when side-by-side with content\n\t&__wrapper:not(&__wrapper--collapsed) &__navigation {\n\t\tflex-direction: column;\n\n\t\toverflow: hidden auto;\n\t\theight: 100%;\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: 20px;\n\t}\n\n\t// Navigation styling when on top of content\n\t&__wrapper#{&}__wrapper--collapsed &__navigation {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\toverflow: auto hidden;\n\t\twidth: 100%;\n\t\tmin-width: 100%;\n\t}\n\n\t&__name {\n\t\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tbox-sizing: border-box;\n\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":["defineComponent","NcDialogButton","NcModal","ref","useElementSize","computed","GenRandomId"],"mappings":"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"}
1	+ {"version":3,"file":"NcDialog-CWGgSCpv.cjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog :open.sync=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" :can-close=\"false\">\n\t\t\t<template #actions>\n\t\t\t\t<NcButton @click=\"showDialog = false\">Ok</NcButton>\n\t\t\t</template>\n\t\t\t<div style=\"color: red; font-weight: bold;\">This is serious</div>\n\t\t</NcDialog>\n\t\t<NcDialog :open.sync=\"showLongDialog\" name=\"Lorem Ipsum\">\n\t\t\t<p v-for=\"i in new Array(63)\" :key=\"i\">Lorem ipsum dolor sit amet.</p>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tshowLongDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Form example\nIt is also possible to use the dialog for small forms.\nThis can be used when asking for a password, a name or similar to have native form validation.\n\nTo make the dialog a form the `is-form` prop needs to be set.\nWhen using the form variant you can also pass buttons with `nativeType` prop to add a native `submit` button.\n\nNote that this is not possible if the dialog contains a navigation!\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog is-form\n\t\t\t:buttons=\"buttons\"\n\t\t\tname=\"Choose a name\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@submit=\"currentName = newName\"\n\t\t\t@closing=\"newName = ''\">\n\t\t\t<NcTextField label=\"New name\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired\n\t\t\t\tminlength=\"6\"\n\t\t\t\t:value.sync=\"newName\" />\n\t\t</NcDialog>\n\t\t<p>New name: {{ currentName }}</p>\n\t</div>\n</template>\n<script>\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tnewName: '',\n\t\t\tcurrentName: 'none yet.',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Submit',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tnativeType: 'submit',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Loading buttons\nSometimes a dialog ends with a request and this request might fail due to server-side-validation.\nIn this case it is often desired to keep the dialog open, this can be done by returning `false` from the button callback,\nto not block this callback should return a `Promise<false>`.\n\nIt is also possible to get the result of the callback from the dialog, as the result is passed as the payload of the `closing` event.\n\nWhile the promise is awaited the button will have a loading state,\nthis means, as long as no custom `icon`-slot is used, a loading icon will be shown.\nPlease note that the button will not be disabled or accessibility reasons,\nbecause disabled elements cannot be focused and so the loading state could not be communicated e.g. via screen readers.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"openDialog\">Show dialog</NcButton>\n\t\t<NcDialog :buttons=\"buttons\"\n\t\t\tname=\"Create user\"\n\t\t\t:message=\"message\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@closing=\"response = $event\"\n\t\t\t@update:open=\"clickClosesDialog = false\" />\n\t\t<div style=\"margin-top: 8px;\">Dialog response: {{ response }}</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tclickClosesDialog: false,\n\t\t\tresponse: 'none',\n\t\t}\n\t},\n\n\tmethods: {\n\t\tasync callback() {\n\t\t\t// wait 3 seconds\n\t\t\tawait new Promise((resolve) => window.setTimeout(resolve, 3000))\n\t\t\tthis.clickClosesDialog = !this.clickClosesDialog\n\t\t\t// Do not close the dialog on first and then every second button click\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\t// return false means the dialog stays open\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn '✅'\n\t\t},\n\n\t\topenDialog() {\n\t\t\tthis.response = 'none'\n\t\t\tthis.showDialog = true\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tbuttons() {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Create user',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tcallback: this.callback,\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\tmessage() {\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\treturn 'Next button click will work and close the dialog.'\n\t\t\t} else {\n\t\t\t\treturn 'Clicking the button will load but not close the dialog.'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\t:enable-slideshow=\"false\"\n\t\t:enable-swipe=\"false\"\n\t\tv-bind=\"modalProps\"\n\t\t@close=\"handleClosed\"\n\t\t@update:show=\"handleClosing()\">\n\t\t<!-- The dialog name / header -->\n\t\t<h2 :id=\"navigationId\" class=\"dialog__name\" v-text=\"name\" />\n\t\t<component :is=\"dialogTagName\"\n\t\t\tref=\"dialogElement\"\n\t\t\tclass=\"dialog\"\n\t\t\t:class=\"dialogClasses\"\n\t\t\tv-on=\"dialogListeners\">\n\t\t\t<div ref=\"wrapper\" :class=\"['dialog__wrapper', { 'dialog__wrapper--collapsed': isNavigationCollapsed }]\">\n\t\t\t\t<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->\n\t\t\t\t<nav v-if=\"hasNavigation\"\n\t\t\t\t\tclass=\"dialog__navigation\"\n\t\t\t\t\t:class=\"navigationClasses\"\n\t\t\t\t\t:aria-label=\"navigationAriaLabelAttr\"\n\t\t\t\t\t:aria-labelledby=\"navigationAriaLabelledbyAttr\">\n\t\t\t\t\t<slot name=\"navigation\" :is-collapsed=\"isNavigationCollapsed\" />\n\t\t\t\t</nav>\n\t\t\t\t<!-- Main dialog content -->\n\t\t\t\t<div class=\"dialog__content\" :class=\"contentClasses\">\n\t\t\t\t\t<slot>\n\t\t\t\t\t\t<p class=\"dialog__text\">\n\t\t\t\t\t\t\t{{ message }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- The dialog actions aka the buttons -->\n\t\t\t<div class=\"dialog__actions\">\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcDialogButton v-for=\"(button, idx) in buttons\"\n\t\t\t\t\t\t:key=\"idx\"\n\t\t\t\t\t\tv-bind=\"button\"\n\t\t\t\t\t\t@click=\"handleButtonClose\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</component>\n\t</NcModal>\n</template>\n\n<script>\nimport { useElementSize } from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\nimport NcModal from '../NcModal/index.js'\nimport NcDialogButton from '../NcDialogButton/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default defineComponent({\n\tname: 'NcDialog',\n\n\tcomponents: {\n\t\tNcDialogButton,\n\t\tNcModal,\n\t},\n\n\tprops: {\n\t\t/** Name of the dialog (the heading) /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Text of the dialog /\n\t\tmessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Additional elements to add to the focus trap /\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tvalidator: (arr) => {\n\t\t\t\treturn (\n\t\t\t\t\tArray.isArray(arr) && arr.every(\n\t\t\t\t\t\t(element) =>\n\t\t\t\t\t\t\ttypeof element === 'string' \|\| element instanceof HTMLElement,\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t},\n\t\t\tdefault: () => ([]),\n\t\t},\n\n\t\t/\n\t\t The element where to mount the dialog, if `null` is passed the dialog is mounted in place\n\t\t * @default 'body'\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t Whether the dialog should be shown\n\t\t * @default true\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 Size of the underlying NcModal\n\t\t * @default 'small'\n\t\t * @type {'small'\|'normal'\|'large'\|'full'}\n\t\t /\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (value) => typeof value === 'string' && ['small', 'normal', 'large', 'full'].includes(value),\n\t\t},\n\n\t\t/\n\t\t Buttons to display\n\t\t * @default []\n\t\t /\n\t\tbuttons: {\n\t\t\ttype: Array,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),\n\t\t},\n\n\t\t/\n\t\t Set to false to no show a close button on the dialog\n\t\t * @default true\n\t\t /\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Close the dialog if the user clicked outside of the dialog\n\t\t * Only relevant if `canClose` is set to true.\n\t\t /\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Make the dialog wrapper a HTML form element.\n\t\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t\t * Please note that when using the property the `navigation` should not be used.\n\t\t /\n\t\tisForm: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Declare if hiding the modal should be animated\n\t\t * @default false\n\t\t /\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Optionally pass additionaly classes which will be set on the navigation for custom styling\n\t\t * @default ''\n\t\t * @example\n\t\t * ```html\n\t\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t\t * <!-- ... -->\n\t\t * <style lang=\"scss\">\n\t\t * :deep(.mydialog-navigation) {\n\t\t * flex-direction: row-reverse;\n\t\t * }\n\t\t * </style>\n\t\t * ```\n\t\t /\n\t\tnavigationClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-label for the dialog navigation.\n\t\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t\t \n\t\t By default, navigation is labeled by the dialog name.\n\t\t /\n\t\tnavigationAriaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-labelledby for the dialog navigation.\n\t\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t\t \n\t\t By default, navigation is labeled by the dialog name.\n\t\t /\n\t\tnavigationAriaLabelledby: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Optionally pass additionaly classes which will be set on the content wrapper for custom styling\n\t\t * @default ''\n\t\t /\n\t\tcontentClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Optionally pass additionaly classes which will be set on the dialog itself\n\t\t * (the default `class` attribute will be set on the modal wrapper)\n\t\t * @default ''\n\t\t /\n\t\tdialogClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['closing', 'update:open', 'submit'],\n\n\tsetup(props, { emit, slots }) {\n\t\t/\n\t\t The dialog wrapper element\n\t\t * @type {import('vue').Ref<HTMLDivElement>}\n\t\t /\n\t\tconst wrapper = ref()\n\n\t\t/\n\t\t We use the dialog width to decide if we collapse the navigation (flex direction row)\n\t\t /\n\t\tconst { width: dialogWidth } = useElementSize(wrapper, { width: 900 })\n\n\t\t/\n\t\t Whether the navigation is collapsed due to dialog and window size\n\t\t * (collapses when modal is below: 900px modal width - 2x 12px margin)\n\t\t /\n\t\tconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n\t\t/\n\t\t Whether a navigation was passed and the element should be displayed\n\t\t /\n\t\tconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n\t\t/\n\t\t The unique id of the nav element\n\t\t /\n\t\tconst navigationId = GenRandomId()\n\n\t\t/\n\t\t aria-label attribute for the nav element\n\t\t /\n\t\tconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel \|\| undefined)\n\n\t\t/\n\t\t aria-labelledby attribute for the nav element\n\t\t /\n\t\tconst navigationAriaLabelledbyAttr = computed(() => {\n\t\t\tif (props.navigationAriaLabel) {\n\t\t\t\t// Not needed, already labelled by aria-label\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t\t// Use dialog name as a fallback label for navigation\n\t\t\treturn props.navigationAriaLabelledby \|\| navigationId\n\t\t})\n\n\t\t/\n\t\t @type {import('vue').Ref<HTMLFormElement\|undefined>}\n\t\t /\n\t\tconst dialogElement = ref()\n\t\t/\n\t\t The HTML element to use for the dialog wrapper - either form or plain div\n\t\t /\n\t\tconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n\t\t/\n\t\t Listener to assign to the dialog element\n\t\t * This only sets the `@submit` listener if the dialog element is a form\n\t\t /\n\t\tconst dialogListeners = computed(() => dialogTagName.value === 'form'\n\t\t\t? {\n\t\t\t\t/\n\t\t\t\t @param {SubmitEvent} event Form submit event\n\t\t\t\t /\n\t\t\t\tsubmit(event) {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t/* Forwarded HTMLFormElement submit event (only if `is-form` is set) /\n\t\t\t\t\temit('submit', event)\n\t\t\t\t},\n\t\t\t}\n\t\t\t: {},\n\t\t)\n\n\t\t/\n\t\t If the underlying modal is shown\n\t\t /\n\t\tconst showModal = ref(true)\n\n\t\t// Because NcModal does not emit `close` when show prop is changed\n\t\t/\n\t\t Handle clicking a dialog button -> should close\n\t\t * @param {MouseEvent} event The click event\n\t\t * @param {unknown} result Result of the callback function\n\t\t /\n\t\tconst handleButtonClose = (event, result) => {\n\t\t\t// Skip close if invalid dialog\n\t\t\tif (dialogTagName.value === 'form' && !dialogElement.value.reportValidity()) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\thandleClosing(result)\n\t\t\twindow.setTimeout(() => handleClosed(), 300)\n\t\t}\n\n\t\t/\n\t\t Handle closing the dialog, optional out transition did not run yet\n\t\t * @param {unknown} result the result of the callback\n\t\t /\n\t\tconst handleClosing = (result) => {\n\t\t\tshowModal.value = false\n\t\t\t/\n\t\t\t Emitted when the dialog is closing, so the out transition did not finish yet.\n\t\t\t * @param result The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t\t\t /\n\t\t\temit('closing', result)\n\t\t}\n\n\t\t/\n\t\t Handle dialog closed (out transition finished)\n\t\t /\n\t\tconst handleClosed = () => {\n\t\t\tshowModal.value = true\n\t\t\t/\n\t\t\t Emitted then the dialog is fully closed and the out transition run\n\t\t\t /\n\t\t\temit('update:open', false)\n\t\t}\n\n\t\t/\n\t\t Properties to pass to the underlying NcModal\n\t\t /\n\t\tconst modalProps = computed(() => ({\n\t\t\tcanClose: props.canClose,\n\t\t\tcontainer: props.container === undefined ? 'body' : props.container,\n\t\t\t// we do not pass the name as we already have the name as the headline\n\t\t\t// name: props.name,\n\t\t\t// But we need to set the correct label id so the dialog is labelled\n\t\t\tlabelId: navigationId,\n\t\t\tsize: props.size,\n\t\t\tshow: props.open && showModal.value,\n\t\t\toutTransition: props.outTransition,\n\t\t\tcloseOnClickOutside: props.closeOnClickOutside,\n\t\t\tadditionalTrapElements: props.additionalTrapElements,\n\t\t}))\n\n\t\treturn {\n\t\t\tdialogElement,\n\t\t\tdialogListeners,\n\t\t\tdialogTagName,\n\t\t\thandleButtonClose,\n\t\t\thandleClosing,\n\t\t\thandleClosed,\n\t\t\thasNavigation,\n\t\t\tnavigationId,\n\t\t\tnavigationAriaLabelAttr,\n\t\t\tnavigationAriaLabelledbyAttr,\n\t\t\tisNavigationCollapsed,\n\t\t\tmodalProps,\n\t\t\twrapper,\n\t\t}\n\t},\n})\n</script>\n\n<style lang=\"scss\">\n/* When having the small dialog style we override the modal styling so dialogs look more dialog like */\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.dialog__modal .modal-wrapper--small .modal-container {\n\t\twidth: fit-content;\n\t\theight: unset;\n\t\tmax-height: 90%;\n\t\tposition: relative;\n\t\ttop: unset;\n\t\tborder-radius: var(--border-radius-large);\n\t}\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.dialog {\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\n\t&__modal {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice\n\t\t\tpadding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline\n\t\t}\n\t\t:deep(.modal-wrapper .modal-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden; // Only overflow on the .dialog__content\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\t// Auto scale to fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\n\t\t&--collapsed {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t}\n\n\t// Navigation styling when side-by-side with content\n\t&__wrapper:not(&__wrapper--collapsed) &__navigation {\n\t\tflex-direction: column;\n\n\t\toverflow: hidden auto;\n\t\theight: 100%;\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: 20px;\n\t}\n\n\t// Navigation styling when on top of content\n\t&__wrapper#{&}__wrapper--collapsed &__navigation {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\toverflow: auto hidden;\n\t\twidth: 100%;\n\t\tmin-width: 100%;\n\t}\n\n\t&__name {\n\t\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tbox-sizing: border-box;\n\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":["defineComponent","NcDialogButton","NcModal","ref","useElementSize","computed","GenRandomId"],"mappings":"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"}

package/dist/chunks/{NcDialog-DmcKxy4v.mjs → NcDialog-LPfqWPKk.mjs} RENAMED Viewed

@@ -1,8 +1,8 @@
-import '../assets/NcDialog-ByAK1rQ0.css';
+import '../assets/NcDialog-Bzs9oxyt.css';
 import { useElementSize } from "@vueuse/core";
 import { defineComponent, ref, computed } from "vue";
 import NcModal from "../Components/NcModal.mjs";
-import { N as NcDialogButton } from "./NcDialogButton-CubYnLkp.mjs";
+import { N as NcDialogButton } from "./NcDialogButton-7UqknfnA.mjs";
 import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 const _sfc_main = defineComponent({
@@ -169,7 +169,7 @@ const _sfc_main = defineComponent({
     const wrapper = ref();
     const { width: dialogWidth } = useElementSize(wrapper, { width: 900 });
     const isNavigationCollapsed = computed(() => dialogWidth.value < 876);
-    const hasNavigation = computed(() => (slots == null ? void 0 : slots.navigation) !== void 0);
+    const hasNavigation = computed(() => slots?.navigation !== void 0);
     const navigationId = GenRandomId();
     const navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || void 0);
     const navigationAriaLabelledbyAttr = computed(() => {

package/dist/chunks/{NcDialog-DmcKxy4v.mjs.map → NcDialog-LPfqWPKk.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDialog-DmcKxy4v.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog :open.sync=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" :can-close=\"false\">\n\t\t\t<template #actions>\n\t\t\t\t<NcButton @click=\"showDialog = false\">Ok</NcButton>\n\t\t\t</template>\n\t\t\t<div style=\"color: red; font-weight: bold;\">This is serious</div>\n\t\t</NcDialog>\n\t\t<NcDialog :open.sync=\"showLongDialog\" name=\"Lorem Ipsum\">\n\t\t\t<p v-for=\"i in new Array(63)\" :key=\"i\">Lorem ipsum dolor sit amet.</p>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tshowLongDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Form example\nIt is also possible to use the dialog for small forms.\nThis can be used when asking for a password, a name or similar to have native form validation.\n\nTo make the dialog a form the `is-form` prop needs to be set.\nWhen using the form variant you can also pass buttons with `nativeType` prop to add a native `submit` button.\n\nNote that this is not possible if the dialog contains a navigation!\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog is-form\n\t\t\t:buttons=\"buttons\"\n\t\t\tname=\"Choose a name\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@submit=\"currentName = newName\"\n\t\t\t@closing=\"newName = ''\">\n\t\t\t<NcTextField label=\"New name\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired\n\t\t\t\tminlength=\"6\"\n\t\t\t\t:value.sync=\"newName\" />\n\t\t</NcDialog>\n\t\t<p>New name: {{ currentName }}</p>\n\t</div>\n</template>\n<script>\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tnewName: '',\n\t\t\tcurrentName: 'none yet.',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Submit',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tnativeType: 'submit',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Loading buttons\nSometimes a dialog ends with a request and this request might fail due to server-side-validation.\nIn this case it is often desired to keep the dialog open, this can be done by returning `false` from the button callback,\nto not block this callback should return a `Promise<false>`.\n\nIt is also possible to get the result of the callback from the dialog, as the result is passed as the payload of the `closing` event.\n\nWhile the promise is awaited the button will have a loading state,\nthis means, as long as no custom `icon`-slot is used, a loading icon will be shown.\nPlease note that the button will not be disabled or accessibility reasons,\nbecause disabled elements cannot be focused and so the loading state could not be communicated e.g. via screen readers.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"openDialog\">Show dialog</NcButton>\n\t\t<NcDialog :buttons=\"buttons\"\n\t\t\tname=\"Create user\"\n\t\t\t:message=\"message\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@closing=\"response = $event\"\n\t\t\t@update:open=\"clickClosesDialog = false\" />\n\t\t<div style=\"margin-top: 8px;\">Dialog response: {{ response }}</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tclickClosesDialog: false,\n\t\t\tresponse: 'none',\n\t\t}\n\t},\n\n\tmethods: {\n\t\tasync callback() {\n\t\t\t// wait 3 seconds\n\t\t\tawait new Promise((resolve) => window.setTimeout(resolve, 3000))\n\t\t\tthis.clickClosesDialog = !this.clickClosesDialog\n\t\t\t// Do not close the dialog on first and then every second button click\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\t// return false means the dialog stays open\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn '✅'\n\t\t},\n\n\t\topenDialog() {\n\t\t\tthis.response = 'none'\n\t\t\tthis.showDialog = true\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tbuttons() {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Create user',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tcallback: this.callback,\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\tmessage() {\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\treturn 'Next button click will work and close the dialog.'\n\t\t\t} else {\n\t\t\t\treturn 'Clicking the button will load but not close the dialog.'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\t:enable-slideshow=\"false\"\n\t\t:enable-swipe=\"false\"\n\t\tv-bind=\"modalProps\"\n\t\t@close=\"handleClosed\"\n\t\t@update:show=\"handleClosing()\">\n\t\t<!-- The dialog name / header -->\n\t\t<h2 :id=\"navigationId\" class=\"dialog__name\" v-text=\"name\" />\n\t\t<component :is=\"dialogTagName\"\n\t\t\tref=\"dialogElement\"\n\t\t\tclass=\"dialog\"\n\t\t\t:class=\"dialogClasses\"\n\t\t\tv-on=\"dialogListeners\">\n\t\t\t<div ref=\"wrapper\" :class=\"['dialog__wrapper', { 'dialog__wrapper--collapsed': isNavigationCollapsed }]\">\n\t\t\t\t<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->\n\t\t\t\t<nav v-if=\"hasNavigation\"\n\t\t\t\t\tclass=\"dialog__navigation\"\n\t\t\t\t\t:class=\"navigationClasses\"\n\t\t\t\t\t:aria-label=\"navigationAriaLabelAttr\"\n\t\t\t\t\t:aria-labelledby=\"navigationAriaLabelledbyAttr\">\n\t\t\t\t\t<slot name=\"navigation\" :is-collapsed=\"isNavigationCollapsed\" />\n\t\t\t\t</nav>\n\t\t\t\t<!-- Main dialog content -->\n\t\t\t\t<div class=\"dialog__content\" :class=\"contentClasses\">\n\t\t\t\t\t<slot>\n\t\t\t\t\t\t<p class=\"dialog__text\">\n\t\t\t\t\t\t\t{{ message }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- The dialog actions aka the buttons -->\n\t\t\t<div class=\"dialog__actions\">\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcDialogButton v-for=\"(button, idx) in buttons\"\n\t\t\t\t\t\t:key=\"idx\"\n\t\t\t\t\t\tv-bind=\"button\"\n\t\t\t\t\t\t@click=\"handleButtonClose\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</component>\n\t</NcModal>\n</template>\n\n<script>\nimport { useElementSize } from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\nimport NcModal from '../NcModal/index.js'\nimport NcDialogButton from '../NcDialogButton/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default defineComponent({\n\tname: 'NcDialog',\n\n\tcomponents: {\n\t\tNcDialogButton,\n\t\tNcModal,\n\t},\n\n\tprops: {\n\t\t/** Name of the dialog (the heading) /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Text of the dialog /\n\t\tmessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Additional elements to add to the focus trap /\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tvalidator: (arr) => {\n\t\t\t\treturn (\n\t\t\t\t\tArray.isArray(arr) && arr.every(\n\t\t\t\t\t\t(element) =>\n\t\t\t\t\t\t\ttypeof element === 'string' \|\| element instanceof HTMLElement,\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t},\n\t\t\tdefault: () => ([]),\n\t\t},\n\n\t\t/\n\t\t The element where to mount the dialog, if `null` is passed the dialog is mounted in place\n\t\t * @default 'body'\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t Whether the dialog should be shown\n\t\t * @default true\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 Size of the underlying NcModal\n\t\t * @default 'small'\n\t\t * @type {'small'\|'normal'\|'large'\|'full'}\n\t\t /\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (value) => typeof value === 'string' && ['small', 'normal', 'large', 'full'].includes(value),\n\t\t},\n\n\t\t/\n\t\t Buttons to display\n\t\t * @default []\n\t\t /\n\t\tbuttons: {\n\t\t\ttype: Array,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),\n\t\t},\n\n\t\t/\n\t\t Set to false to no show a close button on the dialog\n\t\t * @default true\n\t\t /\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Close the dialog if the user clicked outside of the dialog\n\t\t * Only relevant if `canClose` is set to true.\n\t\t /\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Make the dialog wrapper a HTML form element.\n\t\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t\t * Please note that when using the property the `navigation` should not be used.\n\t\t /\n\t\tisForm: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Declare if hiding the modal should be animated\n\t\t * @default false\n\t\t /\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Optionally pass additionaly classes which will be set on the navigation for custom styling\n\t\t * @default ''\n\t\t * @example\n\t\t * ```html\n\t\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t\t * <!-- ... -->\n\t\t * <style lang=\"scss\">\n\t\t * :deep(.mydialog-navigation) {\n\t\t * flex-direction: row-reverse;\n\t\t * }\n\t\t * </style>\n\t\t * ```\n\t\t /\n\t\tnavigationClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-label for the dialog navigation.\n\t\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t\t \n\t\t By default, navigation is labeled by the dialog name.\n\t\t /\n\t\tnavigationAriaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-labelledby for the dialog navigation.\n\t\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t\t \n\t\t By default, navigation is labeled by the dialog name.\n\t\t /\n\t\tnavigationAriaLabelledby: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Optionally pass additionaly classes which will be set on the content wrapper for custom styling\n\t\t * @default ''\n\t\t /\n\t\tcontentClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Optionally pass additionaly classes which will be set on the dialog itself\n\t\t * (the default `class` attribute will be set on the modal wrapper)\n\t\t * @default ''\n\t\t /\n\t\tdialogClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['closing', 'update:open', 'submit'],\n\n\tsetup(props, { emit, slots }) {\n\t\t/\n\t\t The dialog wrapper element\n\t\t * @type {import('vue').Ref<HTMLDivElement>}\n\t\t /\n\t\tconst wrapper = ref()\n\n\t\t/\n\t\t We use the dialog width to decide if we collapse the navigation (flex direction row)\n\t\t /\n\t\tconst { width: dialogWidth } = useElementSize(wrapper, { width: 900 })\n\n\t\t/\n\t\t Whether the navigation is collapsed due to dialog and window size\n\t\t * (collapses when modal is below: 900px modal width - 2x 12px margin)\n\t\t /\n\t\tconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n\t\t/\n\t\t Whether a navigation was passed and the element should be displayed\n\t\t /\n\t\tconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n\t\t/\n\t\t The unique id of the nav element\n\t\t /\n\t\tconst navigationId = GenRandomId()\n\n\t\t/\n\t\t aria-label attribute for the nav element\n\t\t /\n\t\tconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel \|\| undefined)\n\n\t\t/\n\t\t aria-labelledby attribute for the nav element\n\t\t /\n\t\tconst navigationAriaLabelledbyAttr = computed(() => {\n\t\t\tif (props.navigationAriaLabel) {\n\t\t\t\t// Not needed, already labelled by aria-label\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t\t// Use dialog name as a fallback label for navigation\n\t\t\treturn props.navigationAriaLabelledby \|\| navigationId\n\t\t})\n\n\t\t/\n\t\t @type {import('vue').Ref<HTMLFormElement\|undefined>}\n\t\t /\n\t\tconst dialogElement = ref()\n\t\t/\n\t\t The HTML element to use for the dialog wrapper - either form or plain div\n\t\t /\n\t\tconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n\t\t/\n\t\t Listener to assign to the dialog element\n\t\t * This only sets the `@submit` listener if the dialog element is a form\n\t\t /\n\t\tconst dialogListeners = computed(() => dialogTagName.value === 'form'\n\t\t\t? {\n\t\t\t\t/\n\t\t\t\t @param {SubmitEvent} event Form submit event\n\t\t\t\t /\n\t\t\t\tsubmit(event) {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t/* Forwarded HTMLFormElement submit event (only if `is-form` is set) /\n\t\t\t\t\temit('submit', event)\n\t\t\t\t},\n\t\t\t}\n\t\t\t: {},\n\t\t)\n\n\t\t/\n\t\t If the underlying modal is shown\n\t\t /\n\t\tconst showModal = ref(true)\n\n\t\t// Because NcModal does not emit `close` when show prop is changed\n\t\t/\n\t\t Handle clicking a dialog button -> should close\n\t\t * @param {MouseEvent} event The click event\n\t\t * @param {unknown} result Result of the callback function\n\t\t /\n\t\tconst handleButtonClose = (event, result) => {\n\t\t\t// Skip close if invalid dialog\n\t\t\tif (dialogTagName.value === 'form' && !dialogElement.value.reportValidity()) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\thandleClosing(result)\n\t\t\twindow.setTimeout(() => handleClosed(), 300)\n\t\t}\n\n\t\t/\n\t\t Handle closing the dialog, optional out transition did not run yet\n\t\t * @param {unknown} result the result of the callback\n\t\t /\n\t\tconst handleClosing = (result) => {\n\t\t\tshowModal.value = false\n\t\t\t/\n\t\t\t Emitted when the dialog is closing, so the out transition did not finish yet.\n\t\t\t * @param result The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t\t\t /\n\t\t\temit('closing', result)\n\t\t}\n\n\t\t/\n\t\t Handle dialog closed (out transition finished)\n\t\t /\n\t\tconst handleClosed = () => {\n\t\t\tshowModal.value = true\n\t\t\t/\n\t\t\t Emitted then the dialog is fully closed and the out transition run\n\t\t\t /\n\t\t\temit('update:open', false)\n\t\t}\n\n\t\t/\n\t\t Properties to pass to the underlying NcModal\n\t\t /\n\t\tconst modalProps = computed(() => ({\n\t\t\tcanClose: props.canClose,\n\t\t\tcontainer: props.container === undefined ? 'body' : props.container,\n\t\t\t// we do not pass the name as we already have the name as the headline\n\t\t\t// name: props.name,\n\t\t\t// But we need to set the correct label id so the dialog is labelled\n\t\t\tlabelId: navigationId,\n\t\t\tsize: props.size,\n\t\t\tshow: props.open && showModal.value,\n\t\t\toutTransition: props.outTransition,\n\t\t\tcloseOnClickOutside: props.closeOnClickOutside,\n\t\t\tadditionalTrapElements: props.additionalTrapElements,\n\t\t}))\n\n\t\treturn {\n\t\t\tdialogElement,\n\t\t\tdialogListeners,\n\t\t\tdialogTagName,\n\t\t\thandleButtonClose,\n\t\t\thandleClosing,\n\t\t\thandleClosed,\n\t\t\thasNavigation,\n\t\t\tnavigationId,\n\t\t\tnavigationAriaLabelAttr,\n\t\t\tnavigationAriaLabelledbyAttr,\n\t\t\tisNavigationCollapsed,\n\t\t\tmodalProps,\n\t\t\twrapper,\n\t\t}\n\t},\n})\n</script>\n\n<style lang=\"scss\">\n/* When having the small dialog style we override the modal styling so dialogs look more dialog like */\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.dialog__modal .modal-wrapper--small .modal-container {\n\t\twidth: fit-content;\n\t\theight: unset;\n\t\tmax-height: 90%;\n\t\tposition: relative;\n\t\ttop: unset;\n\t\tborder-radius: var(--border-radius-large);\n\t}\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.dialog {\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\n\t&__modal {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice\n\t\t\tpadding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline\n\t\t}\n\t\t:deep(.modal-wrapper .modal-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden; // Only overflow on the .dialog__content\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\t// Auto scale to fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\n\t\t&--collapsed {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t}\n\n\t// Navigation styling when side-by-side with content\n\t&__wrapper:not(&__wrapper--collapsed) &__navigation {\n\t\tflex-direction: column;\n\n\t\toverflow: hidden auto;\n\t\theight: 100%;\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: 20px;\n\t}\n\n\t// Navigation styling when on top of content\n\t&__wrapper#{&}__wrapper--collapsed &__navigation {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\toverflow: auto hidden;\n\t\twidth: 100%;\n\t\tmin-width: 100%;\n\t}\n\n\t&__name {\n\t\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tbox-sizing: border-box;\n\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"NcDialog-LPfqWPKk.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### General description\n\nThis component uses the `NcModal` under the hood for allowing users to create generic dialogs.\n\n### Basic example\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog :open.sync=\"showDialog\" name=\"Confirmation\" message=\"Are you sure to proceed?\" :buttons=\"buttons\" />\n\t\t<p>Last response: {{ lastResponse }}</p>\n\t</div>\n</template>\n<script>\nimport IconCancel from '@mdi/svg/svg/cancel.svg?raw'\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tlastResponse: 'None',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Cancel',\n\t\t\t\t\ticon: IconCancel,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Cancel\"' },\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Ok',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t\tcallback: () => { this.lastResponse = 'Pressed \"Ok\"' },\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Use custom actions and content\nInstead of using the buttons property, you can also inject your custom actions using a named slot.\nYou can also use the default slot to inject custom content.\n\n```vue\n<template>\n\t<div style=\"display: flex; gap: 12px;\">\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcButton @click=\"showLongDialog = true\">Show long dialog</NcButton>\n\t\t<NcDialog v-if=\"showDialog\" name=\"Warning\" :can-close=\"false\">\n\t\t\t<template #actions>\n\t\t\t\t<NcButton @click=\"showDialog = false\">Ok</NcButton>\n\t\t\t</template>\n\t\t\t<div style=\"color: red; font-weight: bold;\">This is serious</div>\n\t\t</NcDialog>\n\t\t<NcDialog :open.sync=\"showLongDialog\" name=\"Lorem Ipsum\">\n\t\t\t<p v-for=\"i in new Array(63)\" :key=\"i\">Lorem ipsum dolor sit amet.</p>\n\t\t</NcDialog>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tshowLongDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n\n### Form example\nIt is also possible to use the dialog for small forms.\nThis can be used when asking for a password, a name or similar to have native form validation.\n\nTo make the dialog a form the `is-form` prop needs to be set.\nWhen using the form variant you can also pass buttons with `nativeType` prop to add a native `submit` button.\n\nNote that this is not possible if the dialog contains a navigation!\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"showDialog = true\">Show dialog</NcButton>\n\t\t<NcDialog is-form\n\t\t\t:buttons=\"buttons\"\n\t\t\tname=\"Choose a name\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@submit=\"currentName = newName\"\n\t\t\t@closing=\"newName = ''\">\n\t\t\t<NcTextField label=\"New name\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired\n\t\t\t\tminlength=\"6\"\n\t\t\t\t:value.sync=\"newName\" />\n\t\t</NcDialog>\n\t\t<p>New name: {{ currentName }}</p>\n\t</div>\n</template>\n<script>\nimport IconCheck from '@mdi/svg/svg/check.svg?raw'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tnewName: '',\n\t\t\tcurrentName: 'none yet.',\n\t\t\tbuttons: [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Submit',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tnativeType: 'submit',\n\t\t\t\t\ticon: IconCheck,\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n}\n</script>\n```\n\n### Loading buttons\nSometimes a dialog ends with a request and this request might fail due to server-side-validation.\nIn this case it is often desired to keep the dialog open, this can be done by returning `false` from the button callback,\nto not block this callback should return a `Promise<false>`.\n\nIt is also possible to get the result of the callback from the dialog, as the result is passed as the payload of the `closing` event.\n\nWhile the promise is awaited the button will have a loading state,\nthis means, as long as no custom `icon`-slot is used, a loading icon will be shown.\nPlease note that the button will not be disabled or accessibility reasons,\nbecause disabled elements cannot be focused and so the loading state could not be communicated e.g. via screen readers.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"openDialog\">Show dialog</NcButton>\n\t\t<NcDialog :buttons=\"buttons\"\n\t\t\tname=\"Create user\"\n\t\t\t:message=\"message\"\n\t\t\t:open.sync=\"showDialog\"\n\t\t\t@closing=\"response = $event\"\n\t\t\t@update:open=\"clickClosesDialog = false\" />\n\t\t<div style=\"margin-top: 8px;\">Dialog response: {{ response }}</div>\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t\tclickClosesDialog: false,\n\t\t\tresponse: 'none',\n\t\t}\n\t},\n\n\tmethods: {\n\t\tasync callback() {\n\t\t\t// wait 3 seconds\n\t\t\tawait new Promise((resolve) => window.setTimeout(resolve, 3000))\n\t\t\tthis.clickClosesDialog = !this.clickClosesDialog\n\t\t\t// Do not close the dialog on first and then every second button click\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\t// return false means the dialog stays open\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn '✅'\n\t\t},\n\n\t\topenDialog() {\n\t\t\tthis.response = 'none'\n\t\t\tthis.showDialog = true\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tbuttons() {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Create user',\n\t\t\t\t\ttype: 'primary',\n\t\t\t\t\tcallback: this.callback,\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\tmessage() {\n\t\t\tif (this.clickClosesDialog) {\n\t\t\t\treturn 'Next button click will work and close the dialog.'\n\t\t\t} else {\n\t\t\t\treturn 'Clicking the button will load but not close the dialog.'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\n\t\tclass=\"dialog__modal\"\n\t\t:enable-slideshow=\"false\"\n\t\t:enable-swipe=\"false\"\n\t\tv-bind=\"modalProps\"\n\t\t@close=\"handleClosed\"\n\t\t@update:show=\"handleClosing()\">\n\t\t<!-- The dialog name / header -->\n\t\t<h2 :id=\"navigationId\" class=\"dialog__name\" v-text=\"name\" />\n\t\t<component :is=\"dialogTagName\"\n\t\t\tref=\"dialogElement\"\n\t\t\tclass=\"dialog\"\n\t\t\t:class=\"dialogClasses\"\n\t\t\tv-on=\"dialogListeners\">\n\t\t\t<div ref=\"wrapper\" :class=\"['dialog__wrapper', { 'dialog__wrapper--collapsed': isNavigationCollapsed }]\">\n\t\t\t\t<!-- When the navigation is collapsed (too small dialog) it is displayed above the main content, otherwise on the inline start -->\n\t\t\t\t<nav v-if=\"hasNavigation\"\n\t\t\t\t\tclass=\"dialog__navigation\"\n\t\t\t\t\t:class=\"navigationClasses\"\n\t\t\t\t\t:aria-label=\"navigationAriaLabelAttr\"\n\t\t\t\t\t:aria-labelledby=\"navigationAriaLabelledbyAttr\">\n\t\t\t\t\t<slot name=\"navigation\" :is-collapsed=\"isNavigationCollapsed\" />\n\t\t\t\t</nav>\n\t\t\t\t<!-- Main dialog content -->\n\t\t\t\t<div class=\"dialog__content\" :class=\"contentClasses\">\n\t\t\t\t\t<slot>\n\t\t\t\t\t\t<p class=\"dialog__text\">\n\t\t\t\t\t\t\t{{ message }}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!-- The dialog actions aka the buttons -->\n\t\t\t<div class=\"dialog__actions\">\n\t\t\t\t<slot name=\"actions\">\n\t\t\t\t\t<NcDialogButton v-for=\"(button, idx) in buttons\"\n\t\t\t\t\t\t:key=\"idx\"\n\t\t\t\t\t\tv-bind=\"button\"\n\t\t\t\t\t\t@click=\"handleButtonClose\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</component>\n\t</NcModal>\n</template>\n\n<script>\nimport { useElementSize } from '@vueuse/core'\nimport { computed, defineComponent, ref } from 'vue'\n\nimport NcModal from '../NcModal/index.js'\nimport NcDialogButton from '../NcDialogButton/index.js'\n\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default defineComponent({\n\tname: 'NcDialog',\n\n\tcomponents: {\n\t\tNcDialogButton,\n\t\tNcModal,\n\t},\n\n\tprops: {\n\t\t/** Name of the dialog (the heading) /\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/* Text of the dialog /\n\t\tmessage: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/* Additional elements to add to the focus trap /\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tvalidator: (arr) => {\n\t\t\t\treturn (\n\t\t\t\t\tArray.isArray(arr) && arr.every(\n\t\t\t\t\t\t(element) =>\n\t\t\t\t\t\t\ttypeof element === 'string' \|\| element instanceof HTMLElement,\n\t\t\t\t\t)\n\t\t\t\t)\n\t\t\t},\n\t\t\tdefault: () => ([]),\n\t\t},\n\n\t\t/\n\t\t The element where to mount the dialog, if `null` is passed the dialog is mounted in place\n\t\t * @default 'body'\n\t\t /\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/\n\t\t Whether the dialog should be shown\n\t\t * @default true\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 Size of the underlying NcModal\n\t\t * @default 'small'\n\t\t * @type {'small'\|'normal'\|'large'\|'full'}\n\t\t /\n\t\tsize: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (value) => typeof value === 'string' && ['small', 'normal', 'large', 'full'].includes(value),\n\t\t},\n\n\t\t/\n\t\t Buttons to display\n\t\t * @default []\n\t\t /\n\t\tbuttons: {\n\t\t\ttype: Array,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator: (value) => Array.isArray(value) && value.every((element) => typeof element === 'object'),\n\t\t},\n\n\t\t/\n\t\t Set to false to no show a close button on the dialog\n\t\t * @default true\n\t\t /\n\t\tcanClose: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/\n\t\t Close the dialog if the user clicked outside of the dialog\n\t\t * Only relevant if `canClose` is set to true.\n\t\t /\n\t\tcloseOnClickOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Make the dialog wrapper a HTML form element.\n\t\t * The buttons will be wrapped within the form so they can be used as submit / reset buttons.\n\t\t * Please note that when using the property the `navigation` should not be used.\n\t\t /\n\t\tisForm: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Declare if hiding the modal should be animated\n\t\t * @default false\n\t\t /\n\t\toutTransition: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/\n\t\t Optionally pass additionaly classes which will be set on the navigation for custom styling\n\t\t * @default ''\n\t\t * @example\n\t\t * ```html\n\t\t * <DialogBase :navigation-classes=\"['mydialog-navigation']\"><!-- --></DialogBase>\n\t\t * <!-- ... -->\n\t\t * <style lang=\"scss\">\n\t\t * :deep(.mydialog-navigation) {\n\t\t * flex-direction: row-reverse;\n\t\t * }\n\t\t * </style>\n\t\t * ```\n\t\t /\n\t\tnavigationClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-label for the dialog navigation.\n\t\t * Use it when you want to provide a more meaningful label than the dialog name.\n\t\t \n\t\t By default, navigation is labeled by the dialog name.\n\t\t /\n\t\tnavigationAriaLabel: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t aria-labelledby for the dialog navigation.\n\t\t * Use it when you have an implicit navigation label (e.g. a heading).\n\t\t \n\t\t By default, navigation is labeled by the dialog name.\n\t\t /\n\t\tnavigationAriaLabelledby: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Optionally pass additionaly classes which will be set on the content wrapper for custom styling\n\t\t * @default ''\n\t\t /\n\t\tcontentClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/\n\t\t Optionally pass additionaly classes which will be set on the dialog itself\n\t\t * (the default `class` attribute will be set on the modal wrapper)\n\t\t * @default ''\n\t\t /\n\t\tdialogClasses: {\n\t\t\ttype: [String, Array, Object],\n\t\t\trequired: false,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['closing', 'update:open', 'submit'],\n\n\tsetup(props, { emit, slots }) {\n\t\t/\n\t\t The dialog wrapper element\n\t\t * @type {import('vue').Ref<HTMLDivElement>}\n\t\t /\n\t\tconst wrapper = ref()\n\n\t\t/\n\t\t We use the dialog width to decide if we collapse the navigation (flex direction row)\n\t\t /\n\t\tconst { width: dialogWidth } = useElementSize(wrapper, { width: 900 })\n\n\t\t/\n\t\t Whether the navigation is collapsed due to dialog and window size\n\t\t * (collapses when modal is below: 900px modal width - 2x 12px margin)\n\t\t /\n\t\tconst isNavigationCollapsed = computed(() => dialogWidth.value < 876)\n\n\t\t/\n\t\t Whether a navigation was passed and the element should be displayed\n\t\t /\n\t\tconst hasNavigation = computed(() => slots?.navigation !== undefined)\n\n\t\t/\n\t\t The unique id of the nav element\n\t\t /\n\t\tconst navigationId = GenRandomId()\n\n\t\t/\n\t\t aria-label attribute for the nav element\n\t\t /\n\t\tconst navigationAriaLabelAttr = computed(() => props.navigationAriaLabel \|\| undefined)\n\n\t\t/\n\t\t aria-labelledby attribute for the nav element\n\t\t /\n\t\tconst navigationAriaLabelledbyAttr = computed(() => {\n\t\t\tif (props.navigationAriaLabel) {\n\t\t\t\t// Not needed, already labelled by aria-label\n\t\t\t\treturn undefined\n\t\t\t}\n\t\t\t// Use dialog name as a fallback label for navigation\n\t\t\treturn props.navigationAriaLabelledby \|\| navigationId\n\t\t})\n\n\t\t/\n\t\t @type {import('vue').Ref<HTMLFormElement\|undefined>}\n\t\t /\n\t\tconst dialogElement = ref()\n\t\t/\n\t\t The HTML element to use for the dialog wrapper - either form or plain div\n\t\t /\n\t\tconst dialogTagName = computed(() => props.isForm && !hasNavigation.value ? 'form' : 'div')\n\t\t/\n\t\t Listener to assign to the dialog element\n\t\t * This only sets the `@submit` listener if the dialog element is a form\n\t\t /\n\t\tconst dialogListeners = computed(() => dialogTagName.value === 'form'\n\t\t\t? {\n\t\t\t\t/\n\t\t\t\t @param {SubmitEvent} event Form submit event\n\t\t\t\t /\n\t\t\t\tsubmit(event) {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t/* Forwarded HTMLFormElement submit event (only if `is-form` is set) /\n\t\t\t\t\temit('submit', event)\n\t\t\t\t},\n\t\t\t}\n\t\t\t: {},\n\t\t)\n\n\t\t/\n\t\t If the underlying modal is shown\n\t\t /\n\t\tconst showModal = ref(true)\n\n\t\t// Because NcModal does not emit `close` when show prop is changed\n\t\t/\n\t\t Handle clicking a dialog button -> should close\n\t\t * @param {MouseEvent} event The click event\n\t\t * @param {unknown} result Result of the callback function\n\t\t /\n\t\tconst handleButtonClose = (event, result) => {\n\t\t\t// Skip close if invalid dialog\n\t\t\tif (dialogTagName.value === 'form' && !dialogElement.value.reportValidity()) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\thandleClosing(result)\n\t\t\twindow.setTimeout(() => handleClosed(), 300)\n\t\t}\n\n\t\t/\n\t\t Handle closing the dialog, optional out transition did not run yet\n\t\t * @param {unknown} result the result of the callback\n\t\t /\n\t\tconst handleClosing = (result) => {\n\t\t\tshowModal.value = false\n\t\t\t/\n\t\t\t Emitted when the dialog is closing, so the out transition did not finish yet.\n\t\t\t * @param result The result of the button callback (`undefined` if closing because of clicking the 'close'-button)\n\t\t\t /\n\t\t\temit('closing', result)\n\t\t}\n\n\t\t/\n\t\t Handle dialog closed (out transition finished)\n\t\t /\n\t\tconst handleClosed = () => {\n\t\t\tshowModal.value = true\n\t\t\t/\n\t\t\t Emitted then the dialog is fully closed and the out transition run\n\t\t\t /\n\t\t\temit('update:open', false)\n\t\t}\n\n\t\t/\n\t\t Properties to pass to the underlying NcModal\n\t\t /\n\t\tconst modalProps = computed(() => ({\n\t\t\tcanClose: props.canClose,\n\t\t\tcontainer: props.container === undefined ? 'body' : props.container,\n\t\t\t// we do not pass the name as we already have the name as the headline\n\t\t\t// name: props.name,\n\t\t\t// But we need to set the correct label id so the dialog is labelled\n\t\t\tlabelId: navigationId,\n\t\t\tsize: props.size,\n\t\t\tshow: props.open && showModal.value,\n\t\t\toutTransition: props.outTransition,\n\t\t\tcloseOnClickOutside: props.closeOnClickOutside,\n\t\t\tadditionalTrapElements: props.additionalTrapElements,\n\t\t}))\n\n\t\treturn {\n\t\t\tdialogElement,\n\t\t\tdialogListeners,\n\t\t\tdialogTagName,\n\t\t\thandleButtonClose,\n\t\t\thandleClosing,\n\t\t\thandleClosed,\n\t\t\thasNavigation,\n\t\t\tnavigationId,\n\t\t\tnavigationAriaLabelAttr,\n\t\t\tnavigationAriaLabelledbyAttr,\n\t\t\tisNavigationCollapsed,\n\t\t\tmodalProps,\n\t\t\twrapper,\n\t\t}\n\t},\n})\n</script>\n\n<style lang=\"scss\">\n/* When having the small dialog style we override the modal styling so dialogs look more dialog like */\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.dialog__modal .modal-wrapper--small .modal-container {\n\t\twidth: fit-content;\n\t\theight: unset;\n\t\tmax-height: 90%;\n\t\tposition: relative;\n\t\ttop: unset;\n\t\tborder-radius: var(--border-radius-large);\n\t}\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.dialog {\n\theight: 100%;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n\toverflow: hidden;\n\n\t&__modal {\n\t\t:deep(.modal-wrapper .modal-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 0; // 4px to align with close button, 0 block-end to make overflowing content on scroll look nice\n\t\t\tpadding-inline: 12px 0; // Same as with padding-block, we need the actions to have a margin of 4px for the button outline\n\t\t}\n\t\t:deep(.modal-wrapper .modal-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\toverflow: hidden; // Only overflow on the .dialog__content\n\t\t}\n\t}\n\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\t// Auto scale to fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: hidden;\n\n\t\t&--collapsed {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\n\t&__navigation {\n\t\tdisplay: flex;\n\t\tflex-shrink: 0;\n\t}\n\n\t// Navigation styling when side-by-side with content\n\t&__wrapper:not(&__wrapper--collapsed) &__navigation {\n\t\tflex-direction: column;\n\n\t\toverflow: hidden auto;\n\t\theight: 100%;\n\t\tmin-width: 200px;\n\t\tmargin-inline-end: 20px;\n\t}\n\n\t// Navigation styling when on top of content\n\t&__wrapper#{&}__wrapper--collapsed &__navigation {\n\t\tflex-direction: row;\n\t\tjustify-content: space-between;\n\n\t\toverflow: auto hidden;\n\t\twidth: 100%;\n\t\tmin-width: 100%;\n\t}\n\n\t&__name {\n\t\tfont-size: 21px;\n\n\t\ttext-align: center;\n\t\theight: fit-content;\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\toverflow-wrap: break-word;\n\t\tmargin-block: 0 12px;\n\t}\n\n\t&__content {\n\t\t// Auto fit\n\t\tflex: 1;\n\t\tmin-height: 0;\n\t\toverflow: auto;\n\t\t// see .dialog__modal, we can not set the padding there to prevent floating scroll bars\n\t\tpadding-inline-end: 12px;\n\t}\n\n\t// In case only text content is show\n\t&__text {\n\t\t// Also add padding to the bottom to make it more readable\n\t\tpadding-block-end: 6px;\n\t}\n\n\t&__actions {\n\t\tbox-sizing: border-box;\n\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\tjustify-content: end;\n\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t\tpadding-inline: 0 12px; // 12px to align with the overall modal padding\n\t\tmargin-inline: 0;\n\t\tmargin-block: 0;\n\n\t\t&:not(:empty) {\n\t\t\tmargin-block: 6px 12px; // only if there are actions, we add margin so if it is empty scroll content looks nice\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t// Ensure the dialog name does not interfere with the close button\n\t.dialog__name {\n\t\ttext-align: start;\n\t\tmargin-inline-end: var(--default-clickable-area);\n\t}\n}\n</style>\n"],"names":[],"mappings":"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"}

package/dist/chunks/{NcDialogButton-CubYnLkp.mjs → NcDialogButton-7UqknfnA.mjs} RENAMED Viewed

@@ -1,8 +1,8 @@
 import { ref } from "vue";
 import NcButton from "../Components/NcButton.mjs";
-import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-DjrkBUkC.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-CHmdAuhg.mjs";
 import NcLoadingIcon from "../Components/NcLoadingIcon.mjs";
-import { r as register, b as t31, a as t } from "./_l10n-JYjUKekn.mjs";
+import { r as register, b as t31, a as t } from "./_l10n-DXr-EzLn.mjs";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 register(t31);
 const _sfc_main = {
@@ -68,13 +68,12 @@ const _sfc_main = {
     const props = __props;
     const isLoading = ref(false);
     const handleClick = async (e) => {
-      var _a;
       if (isLoading.value) {
         return;
       }
       isLoading.value = true;
       try {
-        const result = await ((_a = props.callback) == null ? void 0 : _a.call(props));
+        const result = await props.callback?.();
         if (result !== false) {
           emit("click", e, result);
         }

package/dist/chunks/{NcDialogButton-CubYnLkp.mjs.map → NcDialogButton-7UqknfnA.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDialogButton-~~CubYnLkp~~.mjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\"\n\t\t:disabled=\"disabled\"\n\t\t:native-type=\"nativeType\"\n\t\t:type=\"type\"\n\t\t@click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t<!-- @slot Allow to set a custom icon for the button -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The loading state is an information that must be accessible -->\n\t\t\t\t<NcLoadingIcon v-if=\"isLoading\" :name=\"t('Loading …') /* TRANSLATORS: The button is in a loading state/\" />\n\t\t\t\t<NcIconSvgWrapper v-else-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport { t } from '../../l10n.js'\n\nconst props = defineProps({\n\t/\n\t The function that will be called when the button is pressed.\n\t * If the function returns `false` the click is ignored and the dialog will not be closed.\n\t * @type {() => unknown\|false\|Promise<unknown\|false>}\n\t /\n\tcallback: {\n\t\ttype: Function,\n\t\trequired: false,\n\t\tdefault: () => {},\n\t},\n\n\t/\n\t The label of the button\n\t /\n\tlabel: {\n\t\ttype: String,\n\t\trequired: true,\n\t},\n\n\t/\n\t Optional inline SVG icon for the button\n\t /\n\ticon: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: undefined,\n\t},\n\n\t/\n\t The button type, see NcButton\n\t * @type {'primary'\|'secondary'\|'error'\|'warning'\|'success'}\n\t /\n\ttype: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'secondary',\n\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(type),\n\t},\n\n\t/\n\t See `nativeType` of `NcButton`\n\t /\n\tnativeType: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'button',\n\t\tvalidator(value) {\n\t\t\treturn ['submit', 'reset', 'button'].includes(value)\n\t\t},\n\t},\n\n\t/\n\t If the button should be shown as disabled\n\t /\n\tdisabled: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n})\n\nconst emit = defineEmits(['click'])\n\nconst isLoading = ref(false)\n\n/\n Handle clicking the button\n * @param {MouseEvent} e The click event\n /\nconst handleClick = async (e) => {\n\t// Do not re-emit while loading\n\tif (isLoading.value) {\n\t\treturn\n\t}\n\n\tisLoading.value = true\n\ttry {\n\t\tconst result = await props.callback?.()\n\t\tif (result !== false) {\n\t\t\t/\n\t\t\t The click event (`MouseEvent`) and the value returned by the callback\n\t\t\t */\n\t\t\temit('click', e, result)\n\t\t}\n\t} finally {\n\t\tisLoading.value = false\n\t}\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA,UAAM,YAAY,IAAI,KAAK;AAM3B,UAAM,cAAc,OAAO,MAAM;;AAEhC,UAAI,UAAU,OAAO;AACpB;AAAA,MACA;AAED,gBAAU,QAAQ;AAClB,UAAI;AACH,cAAM,SAAS,~~QAAM~~,~~WAAM~~,~~aAAN~~;~~AACrB~~,YAAI,WAAW,OAAO;AAIrB,eAAK,SAAS,GAAG,MAAM;AAAA,QACvB;AAAA,MACH,UAAW;AACT,kBAAU,QAAQ;AAAA,MAClB;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcDialogButton-7UqknfnA.mjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\"\n\t\t:disabled=\"disabled\"\n\t\t:native-type=\"nativeType\"\n\t\t:type=\"type\"\n\t\t@click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t<!-- @slot Allow to set a custom icon for the button -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The loading state is an information that must be accessible -->\n\t\t\t\t<NcLoadingIcon v-if=\"isLoading\" :name=\"t('Loading …') /* TRANSLATORS: The button is in a loading state/\" />\n\t\t\t\t<NcIconSvgWrapper v-else-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport { t } from '../../l10n.js'\n\nconst props = defineProps({\n\t/\n\t The function that will be called when the button is pressed.\n\t * If the function returns `false` the click is ignored and the dialog will not be closed.\n\t * @type {() => unknown\|false\|Promise<unknown\|false>}\n\t /\n\tcallback: {\n\t\ttype: Function,\n\t\trequired: false,\n\t\tdefault: () => {},\n\t},\n\n\t/\n\t The label of the button\n\t /\n\tlabel: {\n\t\ttype: String,\n\t\trequired: true,\n\t},\n\n\t/\n\t Optional inline SVG icon for the button\n\t /\n\ticon: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: undefined,\n\t},\n\n\t/\n\t The button type, see NcButton\n\t * @type {'primary'\|'secondary'\|'error'\|'warning'\|'success'}\n\t /\n\ttype: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'secondary',\n\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(type),\n\t},\n\n\t/\n\t See `nativeType` of `NcButton`\n\t /\n\tnativeType: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'button',\n\t\tvalidator(value) {\n\t\t\treturn ['submit', 'reset', 'button'].includes(value)\n\t\t},\n\t},\n\n\t/\n\t If the button should be shown as disabled\n\t /\n\tdisabled: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n})\n\nconst emit = defineEmits(['click'])\n\nconst isLoading = ref(false)\n\n/\n Handle clicking the button\n * @param {MouseEvent} e The click event\n /\nconst handleClick = async (e) => {\n\t// Do not re-emit while loading\n\tif (isLoading.value) {\n\t\treturn\n\t}\n\n\tisLoading.value = true\n\ttry {\n\t\tconst result = await props.callback?.()\n\t\tif (result !== false) {\n\t\t\t/\n\t\t\t The click event (`MouseEvent`) and the value returned by the callback\n\t\t\t */\n\t\t\temit('click', e, result)\n\t\t}\n\t} finally {\n\t\tisLoading.value = false\n\t}\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA,UAAM,YAAY,IAAI,KAAK;AAM3B,UAAM,cAAc,OAAO,MAAM;AAEhC,UAAI,UAAU,OAAO;AACpB;AAAA,MACA;AAED,gBAAU,QAAQ;AAClB,UAAI;AACH,cAAM,SAAS,MAAM,MAAM,WAAY;AACvC,YAAI,WAAW,OAAO;AAIrB,eAAK,SAAS,GAAG,MAAM;AAAA,QACvB;AAAA,MACH,UAAW;AACT,kBAAU,QAAQ;AAAA,MAClB;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcDialogButton-C4-agMb3.cjs → NcDialogButton-B7d1LWFN.cjs} RENAMED Viewed

@@ -1,9 +1,9 @@
 "use strict";
 const Vue = require("vue");
 const Components_NcButton = require("../Components/NcButton.cjs");
-const NcIconSvgWrapper = require("./NcIconSvgWrapper-Cb4bAwV6.cjs");
+const NcIconSvgWrapper = require("./NcIconSvgWrapper-B_eOG2sZ.cjs");
 const Components_NcLoadingIcon = require("../Components/NcLoadingIcon.cjs");
-const _l10n = require("./_l10n-Ci9_UR5q.cjs");
+const _l10n = require("./_l10n-Ch5mEdUH.cjs");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 _l10n.register(_l10n.t31);
 const _sfc_main = {
@@ -69,13 +69,12 @@ const _sfc_main = {
     const props = __props;
     const isLoading = Vue.ref(false);
     const handleClick = async (e) => {
-      var _a;
       if (isLoading.value) {
         return;
       }
       isLoading.value = true;
       try {
-        const result = await ((_a = props.callback) == null ? void 0 : _a.call(props));
+        const result = await props.callback?.();
         if (result !== false) {
           emit("click", e, result);
         }

package/dist/chunks/{NcDialogButton-C4-agMb3.cjs.map → NcDialogButton-B7d1LWFN.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NcDialogButton-~~C4-agMb3~~.cjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\"\n\t\t:disabled=\"disabled\"\n\t\t:native-type=\"nativeType\"\n\t\t:type=\"type\"\n\t\t@click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t<!-- @slot Allow to set a custom icon for the button -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The loading state is an information that must be accessible -->\n\t\t\t\t<NcLoadingIcon v-if=\"isLoading\" :name=\"t('Loading …') /* TRANSLATORS: The button is in a loading state/\" />\n\t\t\t\t<NcIconSvgWrapper v-else-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport { t } from '../../l10n.js'\n\nconst props = defineProps({\n\t/\n\t The function that will be called when the button is pressed.\n\t * If the function returns `false` the click is ignored and the dialog will not be closed.\n\t * @type {() => unknown\|false\|Promise<unknown\|false>}\n\t /\n\tcallback: {\n\t\ttype: Function,\n\t\trequired: false,\n\t\tdefault: () => {},\n\t},\n\n\t/\n\t The label of the button\n\t /\n\tlabel: {\n\t\ttype: String,\n\t\trequired: true,\n\t},\n\n\t/\n\t Optional inline SVG icon for the button\n\t /\n\ticon: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: undefined,\n\t},\n\n\t/\n\t The button type, see NcButton\n\t * @type {'primary'\|'secondary'\|'error'\|'warning'\|'success'}\n\t /\n\ttype: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'secondary',\n\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(type),\n\t},\n\n\t/\n\t See `nativeType` of `NcButton`\n\t /\n\tnativeType: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'button',\n\t\tvalidator(value) {\n\t\t\treturn ['submit', 'reset', 'button'].includes(value)\n\t\t},\n\t},\n\n\t/\n\t If the button should be shown as disabled\n\t /\n\tdisabled: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n})\n\nconst emit = defineEmits(['click'])\n\nconst isLoading = ref(false)\n\n/\n Handle clicking the button\n * @param {MouseEvent} e The click event\n /\nconst handleClick = async (e) => {\n\t// Do not re-emit while loading\n\tif (isLoading.value) {\n\t\treturn\n\t}\n\n\tisLoading.value = true\n\ttry {\n\t\tconst result = await props.callback?.()\n\t\tif (result !== false) {\n\t\t\t/\n\t\t\t The click event (`MouseEvent`) and the value returned by the callback\n\t\t\t */\n\t\t\temit('click', e, result)\n\t\t}\n\t} finally {\n\t\tisLoading.value = false\n\t}\n}\n</script>\n"],"names":["ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA,UAAM,YAAYA,IAAG,IAAC,KAAK;AAM3B,UAAM,cAAc,OAAO,MAAM;;AAEhC,UAAI,UAAU,OAAO;AACpB;AAAA,MACA;AAED,gBAAU,QAAQ;AAClB,UAAI;AACH,cAAM,SAAS,~~QAAM~~,~~WAAM~~,~~aAAN~~;~~AACrB~~,YAAI,WAAW,OAAO;AAIrB,eAAK,SAAS,GAAG,MAAM;AAAA,QACvB;AAAA,MACH,UAAW;AACT,kBAAU,QAAQ;AAAA,MAClB;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"NcDialogButton-B7d1LWFN.cjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nDialog button component used by NcDialog in the actions slot to display the buttons passed by the `buttons` prop.\n</docs>\n\n<template>\n\t<NcButton :aria-label=\"label\"\n\t\t:disabled=\"disabled\"\n\t\t:native-type=\"nativeType\"\n\t\t:type=\"type\"\n\t\t@click=\"handleClick\">\n\t\t{{ label }}\n\t\t<template #icon>\n\t\t\t<!-- @slot Allow to set a custom icon for the button -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<!-- The loading state is an information that must be accessible -->\n\t\t\t\t<NcLoadingIcon v-if=\"isLoading\" :name=\"t('Loading …') /* TRANSLATORS: The button is in a loading state/\" />\n\t\t\t\t<NcIconSvgWrapper v-else-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script setup>\nimport { ref } from 'vue'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\nimport { t } from '../../l10n.js'\n\nconst props = defineProps({\n\t/\n\t The function that will be called when the button is pressed.\n\t * If the function returns `false` the click is ignored and the dialog will not be closed.\n\t * @type {() => unknown\|false\|Promise<unknown\|false>}\n\t /\n\tcallback: {\n\t\ttype: Function,\n\t\trequired: false,\n\t\tdefault: () => {},\n\t},\n\n\t/\n\t The label of the button\n\t /\n\tlabel: {\n\t\ttype: String,\n\t\trequired: true,\n\t},\n\n\t/\n\t Optional inline SVG icon for the button\n\t /\n\ticon: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: undefined,\n\t},\n\n\t/\n\t The button type, see NcButton\n\t * @type {'primary'\|'secondary'\|'error'\|'warning'\|'success'}\n\t /\n\ttype: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'secondary',\n\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'tertiary', 'error', 'warning', 'success'].includes(type),\n\t},\n\n\t/\n\t See `nativeType` of `NcButton`\n\t /\n\tnativeType: {\n\t\ttype: String,\n\t\trequired: false,\n\t\tdefault: 'button',\n\t\tvalidator(value) {\n\t\t\treturn ['submit', 'reset', 'button'].includes(value)\n\t\t},\n\t},\n\n\t/\n\t If the button should be shown as disabled\n\t /\n\tdisabled: {\n\t\ttype: Boolean,\n\t\tdefault: false,\n\t},\n})\n\nconst emit = defineEmits(['click'])\n\nconst isLoading = ref(false)\n\n/\n Handle clicking the button\n * @param {MouseEvent} e The click event\n /\nconst handleClick = async (e) => {\n\t// Do not re-emit while loading\n\tif (isLoading.value) {\n\t\treturn\n\t}\n\n\tisLoading.value = true\n\ttry {\n\t\tconst result = await props.callback?.()\n\t\tif (result !== false) {\n\t\t\t/\n\t\t\t The click event (`MouseEvent`) and the value returned by the callback\n\t\t\t */\n\t\t\temit('click', e, result)\n\t\t}\n\t} finally {\n\t\tisLoading.value = false\n\t}\n}\n</script>\n"],"names":["ref"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGA,UAAM,YAAYA,IAAG,IAAC,KAAK;AAM3B,UAAM,cAAc,OAAO,MAAM;AAEhC,UAAI,UAAU,OAAO;AACpB;AAAA,MACA;AAED,gBAAU,QAAQ;AAClB,UAAI;AACH,cAAM,SAAS,MAAM,MAAM,WAAY;AACvC,YAAI,WAAW,OAAO;AAIrB,eAAK,SAAS,GAAG,MAAM;AAAA,QACvB;AAAA,MACH,UAAW;AACT,kBAAU,QAAQ;AAAA,MAClB;AAAA,IACF;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{NcEmojiPicker-DqaJO21R.mjs → NcEmojiPicker-B36zeXTi.mjs} RENAMED Viewed

@@ -1,14 +1,14 @@
-import '../assets/NcEmojiPicker-B5dclDLD.css';
+import '../assets/NcEmojiPicker-BNCW1Q94.css';
 import { Emoji, Picker, EmojiIndex } from "emoji-mart-vue-fast";
-import { r as register, z as t40, A as t35, o as t15, B as t6, a as t } from "./_l10n-JYjUKekn.mjs";
-import { g as getCurrentSkinTone, s as setCurrentSkinTone } from "./emoji-V6ytyzoR.mjs";
-import { C as Color } from "./GenColors-BWE946ht.mjs";
+import { r as register, z as t40, A as t35, o as t15, B as t6, a as t } from "./_l10n-DXr-EzLn.mjs";
+import { g as getCurrentSkinTone, s as setCurrentSkinTone } from "./emoji-BY_D0V5K.mjs";
+import { C as Color } from "./GenColors-BAOuMMLW.mjs";
 import data from "emoji-mart-vue-fast/data/all.json";
 import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
 import NcButton from "../Components/NcButton.mjs";
-import { N as NcColorPicker } from "./NcColorPicker-D3b9pIOc.mjs";
-import { N as NcPopover } from "./NcPopover-DbeCmze0.mjs";
-import { N as NcTextField } from "./NcTextField-CmXmPZ4h.mjs";
+import { N as NcColorPicker } from "./NcColorPicker-CKWvpkRM.mjs";
+import { N as NcPopover } from "./NcPopover-DzYbNu-I.mjs";
+import { N as NcTextField } from "./NcTextField-DaGO9lFz.mjs";
 register(t6, t15, t35, t40);
 const _sfc_main$1 = {
   name: "CircleIcon",
@@ -29,7 +29,7 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon circle-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon circle-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
   } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
@@ -179,9 +179,8 @@ const _sfc_main = {
   methods: {
     t,
     clearSearch() {
-      var _a, _b;
       this.search = "";
-      const input = (_b = (_a = this.$refs.search) == null ? void 0 : _a.$refs.inputField) == null ? void 0 : _b.$refs.input;
+      const input = this.$refs.search?.$refs.inputField?.$refs.input;
       if (input) {
         input.focus();
       }
@@ -209,10 +208,9 @@ const _sfc_main = {
       this.$emit("unselect");
     },
     afterShow() {
-      var _a, _b;
       const picker = this.$refs.picker;
       picker.$el.addEventListener("keydown", this.checkKeyEvent);
-      const input = (_b = (_a = this.$refs.search) == null ? void 0 : _a.$refs.inputField) == null ? void 0 : _b.$refs.input;
+      const input = this.$refs.search?.$refs.inputField?.$refs.input;
       if (input) {
         input.focus();
       }

package/dist/chunks/NcEmojiPicker-B36zeXTi.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"NcEmojiPicker-B36zeXTi.mjs","sources":["../../node_modules/vue-material-design-icons/Circle.vue","../../src/components/NcEmojiPicker/NcEmojiPicker.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon circle-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,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CircleIcon\",\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 allows the user to pick an emoji.\n\n### Usage\n\n* Listen to the select event and pass in an HTML element that will be treated as a trigger:\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker @select=\"select\" style=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Showing a preview and keeping it open after a user selected an emoji\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:close-on-select=\"false\"\n\t\t\t:show-preview=\"true\"\n\t\t\t@select=\"select\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n* Allow unselecting a previously set emoji.\n\n```vue\n<template>\n\t<div>\n\t\t<NcEmojiPicker\n\t\t\t:show-preview=\"true\"\n\t\t\t:allow-unselect=\"true\"\n\t\t\t:selected-emoji=\"emoji\"\n\t\t\t@select=\"select\"\n\t\t\t@unselect=\"unselect\"\n\t\t\tstyle=\"display: inline-block\">\n\t\t\t<NcButton> Click Me </NcButton>\n\t\t</NcEmojiPicker>\n\t\t<span>selected emoji: {{ emoji }}</span>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\temoji: '',\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\tselect(emoji) {\n\t\t\t\tthis.emoji = emoji\n\t\t\t},\n\t\t\tunselect() {\n\t\t\t\tthis.emoji = ''\n\t\t\t},\n\t\t},\n\t}\n</script>\n```\n\n</docs>\n\n<template>\n\t<NcPopover :shown.sync=\"open\"\n\t\t:container=\"container\"\n\t\tpopup-role=\"dialog\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t\t@after-show=\"afterShow\"\n\t\t@after-hide=\"afterHide\">\n\t\t<template #trigger=\"slotProps\">\n\t\t\t<slot v-bind=\"slotProps\" />\n\t\t</template>\n\t\t<Picker ref=\"picker\"\n\t\t\t:auto-focus=\"false /* We manage the input focus ourselves */\"\n\t\t\tcolor=\"var(--color-primary-element)\"\n\t\t\t:data=\"emojiIndex\"\n\t\t\t:emoji=\"previewFallbackEmoji\"\n\t\t\t:i18n=\"i18n\"\n\t\t\t:native=\"native\"\n\t\t\t:emoji-size=\"20\"\n\t\t\t:per-line=\"8\"\n\t\t\t:picker-styles=\"{ width: '320px' }\"\n\t\t\t:show-preview=\"showPreview\"\n\t\t\t:skin=\"currentSkinTone\"\n\t\t\t:show-skin-tones=\"false\"\n\t\t\t:title=\"previewFallbackName\"\n\t\t\trole=\"dialog\"\n\t\t\taria-modal=\"true\"\n\t\t\t:aria-label=\"t('Emoji picker')\"\n\t\t\tv-bind=\"$attrs\"\n\t\t\t@select=\"select\">\n\t\t\t<template #searchTemplate=\"slotProps\">\n\t\t\t\t<div class=\"search__wrapper\">\n\t\t\t\t\t<NcTextField ref=\"search\"\n\t\t\t\t\t\tclass=\"search\"\n\t\t\t\t\t\t:value.sync=\"search\"\n\t\t\t\t\t\t:label=\"t('Search')\"\n\t\t\t\t\t\t:label-visible=\"true\"\n\t\t\t\t\t\t:placeholder=\"i18n.search\"\n\t\t\t\t\t\ttrailing-button-icon=\"close\"\n\t\t\t\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\t\t\t\t:show-trailing-button=\"search !== ''\"\n\t\t\t\t\t\t@trailing-button-click=\"clearSearch(); slotProps.onSearch(search);\"\n\t\t\t\t\t\t@update:value=\"slotProps.onSearch(search)\" />\n\t\t\t\t\t<NcColorPicker palette-only\n\t\t\t\t\t\t:container=\"container\"\n\t\t\t\t\t\t:palette=\"skinTonePalette\"\n\t\t\t\t\t\t:value=\"currentColor.color\"\n\t\t\t\t\t\t@update:value=\"onChangeSkinTone\">\n\t\t\t\t\t\t<NcButton :aria-label=\"t('Skin tone')\" type=\"tertiary-no-background\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCircle :style=\"{ color: currentColor.color }\" :title=\"currentColor.name\" :size=\"20\" />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t</NcColorPicker>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template v-if=\"allowUnselect && selectedEmoji\" #customCategory>\n\t\t\t\t<div class=\"emoji-mart-category-label\">\n\t\t\t\t\t<h3 class=\"emoji-mart-category-label\">\n\t\t\t\t\t\t{{ t('Selected') }}\n\t\t\t\t\t</h3>\n\t\t\t\t</div>\n\t\t\t\t<Emoji class=\"emoji-selected\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\t:emoji=\"selectedEmoji\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"32\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t\t<Emoji class=\"emoji-delete\"\n\t\t\t\t\t:data=\"emojiIndex\"\n\t\t\t\t\temoji=\":x:\"\n\t\t\t\t\t:native=\"true\"\n\t\t\t\t\t:size=\"10\"\n\t\t\t\t\t@click=\"unselect\" />\n\t\t\t</template>\n\t\t</Picker>\n\t</NcPopover>\n</template>\n\n<script>\nimport { Picker, Emoji, EmojiIndex } from 'emoji-mart-vue-fast'\nimport { t } from '../../l10n.js'\nimport { getCurrentSkinTone, setCurrentSkinTone } from '../../functions/emoji/emoji.ts'\nimport { Color } from '../../utils/GenColors.js'\n\nimport data from 'emoji-mart-vue-fast/data/all.json'\nimport IconCircle from 'vue-material-design-icons/Circle.vue'\nimport NcButton from '../NcButton/index.js'\nimport NcColorPicker from '../NcColorPicker/NcColorPicker.vue'\nimport NcPopover from '../NcPopover/index.js'\nimport NcTextField from '../NcTextField/index.js'\n\n// Shared emoji index and skinTone for all NcEmojiPicker instances\n// Will be initialized on the first NcEmojiPicker creating\nlet emojiIndex\n\nconst i18n = {\n\tsearch: t('Search emoji'),\n\tnotfound: t('No emoji found'),\n\tcategories: {\n\t\tsearch: t('Search results'),\n\t\trecent: t('Frequently used'),\n\t\tsmileys: t('Smileys & Emotion'),\n\t\tpeople: t('People & Body'),\n\t\tnature: t('Animals & Nature'),\n\t\tfoods: t('Food & Drink'),\n\t\tactivity: t('Activities'),\n\t\tplaces: t('Travel & Places'),\n\t\tobjects: t('Objects'),\n\t\tsymbols: t('Symbols'),\n\t\tflags: t('Flags'),\n\t\tcustom: t('Custom'),\n\t},\n}\n\nconst skinTonePalette = [\n\tnew Color(255, 222, 52, t('Neutral skin color')),\n\tnew Color(228, 205, 166, t('Light skin tone')),\n\tnew Color(250, 221, 192, t('Medium light skin tone')),\n\tnew Color(174, 129, 87, t('Medium skin tone')),\n\tnew Color(158, 113, 88, t('Medium dark skin tone')),\n\tnew Color(96, 79, 69, t('Dark skin tone')),\n]\n\nexport default {\n\tname: 'NcEmojiPicker',\n\n\tcomponents: {\n\t\tEmoji,\n\t\tIconCircle,\n\t\tNcButton,\n\t\tNcColorPicker,\n\t\tNcPopover,\n\t\tNcTextField,\n\t\tPicker,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The emoji-set\n\t\t */\n\t\tactiveSet: {\n\t\t\ttype: String,\n\t\t\tdefault: 'native',\n\t\t},\n\t\t/**\n\t\t * Show preview section when hovering emoji\n\t\t */\n\t\tshowPreview: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Allow unselecting the selected emoji\n\t\t */\n\t\tallowUnselect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Selected emoji to allow unselecting\n\t\t */\n\t\tselectedEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The fallback emoji in the preview section\n\t\t */\n\t\tpreviewFallbackEmoji: {\n\t\t\ttype: String,\n\t\t\tdefault: 'grinning',\n\t\t},\n\t\t/**\n\t\t * The fallback text in the preview section\n\t\t */\n\t\tpreviewFallbackName: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Pick an emoji'),\n\t\t},\n\t\t/**\n\t\t * Whether to close the emoji picker after picking one\n\t\t */\n\t\tcloseOnSelect: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the 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\t},\n\temits: [\n\t\t'select',\n\t\t'select-data',\n\t\t'unselect',\n\t],\n\n\tsetup() {\n\t\t// If this is the first instance of NcEmojiPicker - setup EmojiIndex\n\t\tif (!emojiIndex) {\n\t\t\temojiIndex = new EmojiIndex(data)\n\t\t}\n\n\t\treturn {\n\t\t\t// Non-reactive constants\n\t\t\temojiIndex,\n\t\t\tskinTonePalette,\n\t\t\ti18n,\n\t\t}\n\t},\n\n\tdata() {\n\t\tconst currentSkinTone = getCurrentSkinTone()\n\n\t\treturn {\n\t\t\t/**\n\t\t\t * The current active color from the skin tone palette\n\t\t\t */\n\t\t\tcurrentColor: skinTonePalette[currentSkinTone - 1],\n\t\t\t/**\n\t\t\t * The current active skin tone\n\t\t\t * @type {1|2|3|4|5|6}\n\t\t\t */\n\t\t\tcurrentSkinTone,\n\t\t\tsearch: '',\n\t\t\topen: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tnative() {\n\t\t\treturn this.activeSet === 'native'\n\t\t},\n\t},\n\n\tmethods: {\n\t\tt,\n\n\t\tclearSearch() {\n\t\t\tthis.search = ''\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Update the current skin tone by the result of the color picker\n\t\t * @param {string} color Color set\n\t\t */\n\t\tonChangeSkinTone(color) {\n\t\t\tconst index = this.skinTonePalette.findIndex((tone) => tone.color.toLowerCase() === color.toLowerCase())\n\t\t\tif (index > -1) {\n\t\t\t\tthis.currentSkinTone = index + 1\n\t\t\t\tthis.currentColor = this.skinTonePalette[index]\n\t\t\t\tsetCurrentSkinTone(this.currentSkinTone)\n\t\t\t}\n\t\t},\n\n\t\tselect(emojiObject) {\n\t\t\t/**\n\t\t\t * Emits a string containing the emoji e.g. '👩🏿‍💻'\n\t\t\t */\n\t\t\tthis.$emit('select', emojiObject.native)\n\n\t\t\t/**\n\t\t\t * Emits a object with more data about the picked emoji\n\t\t\t */\n\t\t\tthis.$emit('select-data', emojiObject)\n\n\t\t\tif (this.closeOnSelect) {\n\t\t\t\tthis.open = false\n\t\t\t}\n\t\t},\n\n\t\tunselect() {\n\t\t\tthis.$emit('unselect')\n\t\t},\n\n\t\tafterShow() {\n\t\t\t// add focus trap in modal\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.addEventListener('keydown', this.checkKeyEvent)\n\n\t\t\t// set focus on input search field\n\t\t\tconst input = this.$refs.search?.$refs.inputField?.$refs.input\n\t\t\tif (input) {\n\t\t\t\tinput.focus()\n\t\t\t}\n\t\t},\n\n\t\tafterHide() {\n\t\t\t// remove keydown listner if popover is hidden\n\t\t\tconst picker = this.$refs.picker\n\t\t\tpicker.$el.removeEventListener('keydown', this.checkKeyEvent)\n\t\t},\n\n\t\tcheckKeyEvent(event) {\n\t\t\tif (event.key !== 'Tab') {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tconst picker = this.$refs.picker\n\t\t\tconst focusableList = picker.$el.querySelectorAll(\n\t\t\t\t'button, input',\n\t\t\t)\n\t\t\tconst last = focusableList.length - 1\n\t\t\t// escape early if only 1 or no elements to focus\n\t\t\tif (focusableList.length <= 1) {\n\t\t\t\tevent.preventDefault()\n\t\t\t\treturn\n\t\t\t}\n\t\t\tif (event.shiftKey === false && event.target === focusableList[last]) {\n\t\t\t\t// Jump to first item when pressing tab on the latest item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[0].focus()\n\t\t\t} else if (event.shiftKey === true && event.target === focusableList[0]) {\n\t\t\t\t// Jump to the last item if pressing shift+tab on the first item\n\t\t\t\tevent.preventDefault()\n\t\t\t\tfocusableList[last].focus()\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n@import 'emoji-mart-vue-fast/css/emoji-mart.css';\n\n.emoji-mart {\n\tbackground-color: var(--color-main-background) !important;\n\tborder: 0;\n\tcolor: var(--color-main-text) !important;\n\n\t// default style reset\n\tbutton {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tborder: none;\n\t\tbackground: transparent;\n\t\tfont-size: inherit;\n\t\theight: 36px;\n\t\twidth: auto;\n\n\t\t* {\n\t\t\tcursor: pointer !important;\n\t\t}\n\t}\n\n\t.emoji-mart-bar,\n\t.emoji-mart-anchors,\n\t.emoji-mart-search,\n\t.emoji-mart-search input,\n\t.emoji-mart-category,\n\t.emoji-mart-category-label,\n\t.emoji-mart-category-label span,\n\t.emoji-mart-skin-swatches {\n\t\tbackground-color: transparent !important;\n\t\tborder-color: var(--color-border) !important;\n\t\tcolor: inherit !important;\n\t}\n\n\t.emoji-mart-search input:focus-visible {\n\t\tbox-shadow: inset 0 0 0 2px var(--color-primary-element);\n\t\toutline: none;\n\t}\n\n\t.emoji-mart-bar {\n\t\t&:first-child {\n\t\t\tborder-top-left-radius: var(--border-radius) !important;\n\t\t\tborder-top-right-radius: var(--border-radius) !important;\n\t\t}\n\t}\n\n\t.emoji-mart-anchors {\n\t\tbutton {\n\t\t\tborder-radius: 0;\n\t\t\tpadding: 12px 4px;\n\t\t\theight: auto;\n\t\t\t&:focus-visible {\n\t\t\t\t/* box-shadow: inset 0 0 0 2px var(--color-primary-element); */\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t.emoji-mart-category {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\t\tjustify-content: start;\n\n\t\t.emoji-mart-category-label,\n\t\t.emoji-mart-emoji {\n\t\t\tuser-select: none;\n\t\t\tflex-grow: 0;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t.emoji-mart-category-label {\n\t\t\tflex-basis: 100%;\n\t\t\tmargin: 0;\n\t\t}\n\n\t\t.emoji-mart-emoji {\n\t\t\t// 8 emoji per row\n\t\t\tflex-basis: calc(100% / 8);\n\t\t\ttext-align: center;\n\n\t\t\t&:hover::before,\n\t\t\t&.emoji-mart-emoji-selected::before{\n\t\t\t\tbackground-color: var(--color-background-hover) !important;\n\t\t\t\toutline: 2px solid var(--color-primary-element);\n\t\t\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\t\t}\n\t\t}\n\t\tbutton {\n\t\t\t&:focus-visible {\n\t\t\t\tbackground-color: var(--color-background-hover);\n\t\t\t\tborder: 2px solid var(--color-primary-element) !important;\n\t\t\t\tborder-radius: var(--border-radius-element, var(--border-radius-pill));\n\t\t\t}\n\t\t}\n\t}\n\n}\n</style>\n\n<style scoped lang=\"scss\">\n.search {\n\t&__wrapper {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tgap: 4px; // for focus-visible outlines\n\t\talign-items: end;\n\t\tpadding: 4px 8px;\n\t}\n}\n\n.row-selected {\n\tbutton, span {\n\t\tvertical-align: middle;\n\t}\n}\n\n.emoji-delete {\n\tvertical-align: top;\n\tmargin-left: -21px;\n\tmargin-top: -3px;\n}\n</style>\n"],"names":["_sfc_main"],"mappings":"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","x_google_ignoreList":[0]}

package/dist/chunks/{NcEmojiPicker-DV7HDeqU.cjs → NcEmojiPicker-Dm6SEjiB.cjs} RENAMED Viewed

@@ -1,15 +1,15 @@
-require('../assets/NcEmojiPicker-B5dclDLD.css');
+require('../assets/NcEmojiPicker-BNCW1Q94.css');
 "use strict";
 const emojiMartVueFast = require("emoji-mart-vue-fast");
-const _l10n = require("./_l10n-Ci9_UR5q.cjs");
-const emoji = require("./emoji-BCCCB3t3.cjs");
-const GenColors = require("./GenColors-Cay7TLwO.cjs");
+const _l10n = require("./_l10n-Ch5mEdUH.cjs");
+const emoji = require("./emoji-VgSjNTd5.cjs");
+const GenColors = require("./GenColors-iV_vrBr4.cjs");
 const data = require("emoji-mart-vue-fast/data/all.json");
 const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
 const Components_NcButton = require("../Components/NcButton.cjs");
-const NcColorPicker = require("./NcColorPicker-CmHTPv60.cjs");
-const NcPopover = require("./NcPopover-C0G7sLVP.cjs");
-const NcTextField = require("./NcTextField-BnZnDMjV.cjs");
+const NcColorPicker = require("./NcColorPicker-CVeLov2Q.cjs");
+const NcPopover = require("./NcPopover-MxwUgZu1.cjs");
+const NcTextField = require("./NcTextField-DwWIlisf.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const data__default = /* @__PURE__ */ _interopDefault(data);
 _l10n.register(_l10n.t6, _l10n.t15, _l10n.t35, _l10n.t40);
@@ -32,7 +32,7 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("span", _vm._b({ staticClass: "material-design-icon circle-icon", attrs: { "aria-hidden": _vm.title ? null : true, "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
+  return _c("span", _vm._b({ staticClass: "material-design-icon circle-icon", attrs: { "aria-hidden": _vm.title ? null : "true", "aria-label": _vm.title, "role": "img" }, on: { "click": function($event) {
     return _vm.$emit("click", $event);
   } } }, "span", _vm.$attrs, false), [_c("svg", { staticClass: "material-design-icon__svg", attrs: { "fill": _vm.fillColor, "width": _vm.size, "height": _vm.size, "viewBox": "0 0 24 24" } }, [_c("path", { attrs: { "d": "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" } }, [_vm.title ? _c("title", [_vm._v(_vm._s(_vm.title))]) : _vm._e()])])]);
 };
@@ -182,9 +182,8 @@ const _sfc_main = {
   methods: {
     t: _l10n.t,
     clearSearch() {
-      var _a, _b;
       this.search = "";
-      const input = (_b = (_a = this.$refs.search) == null ? void 0 : _a.$refs.inputField) == null ? void 0 : _b.$refs.input;
+      const input = this.$refs.search?.$refs.inputField?.$refs.input;
       if (input) {
         input.focus();
       }
@@ -212,10 +211,9 @@ const _sfc_main = {
       this.$emit("unselect");
     },
     afterShow() {
-      var _a, _b;
       const picker = this.$refs.picker;
       picker.$el.addEventListener("keydown", this.checkKeyEvent);
-      const input = (_b = (_a = this.$refs.search) == null ? void 0 : _a.$refs.inputField) == null ? void 0 : _b.$refs.input;
+      const input = this.$refs.search?.$refs.inputField?.$refs.input;
       if (input) {
         input.focus();
       }