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

package/dist/chunks/NcDialog-B81mllwn.mjs

@@ -0,0 +1,318 @@
+import '../assets/NcDialog-DL7A_udP.css';
+import { useElementSize } from "@vueuse/core";
+import { defineComponent, ref, computed, resolveComponent, createBlock, createCommentVNode, openBlock, mergeProps, withCtx, createElementVNode, toDisplayString, resolveDynamicComponent, toHandlers, normalizeClass, createElementBlock, renderSlot, Fragment, renderList } from "vue";
+import NcModal from "../components/NcModal/index.mjs";
+import { _ as _sfc_main$1 } from "./NcDialogButton.vue_vue_type_script_setup_true_lang-DgWqkSL7.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = defineComponent({
+  name: "NcDialog",
+  components: {
+    NcDialogButton: _sfc_main$1,
+    NcModal
+  },
+  props: {
+    /** Name of the dialog (the heading) */
+    name: {
+      type: String,
+      required: true
+    },
+    /** Text of the dialog */
+    message: {
+      type: String,
+      default: ""
+    },
+    /** Additional elements to add to the focus trap */
+    additionalTrapElements: {
+      type: Array,
+      validator: (arr) => {
+        return Array.isArray(arr) && arr.every(
+          (element) => typeof element === "string" || element instanceof HTMLElement
+        );
+      },
+      default: () => []
+    },
+    /**
+     * The element where to mount the dialog, if `null` is passed the dialog is mounted in place
+     * @default 'body'
+     */
+    container: {
+      type: String,
+      required: false,
+      default: "body"
+    },
+    /**
+     * Whether the dialog should be shown
+     * @default true
+     */
+    open: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Size of the underlying NcModal
+     * @default 'small'
+     * @type {'small'|'normal'|'large'|'full'}
+     */
+    size: {
+      type: String,
+      required: false,
+      default: "small",
+      validator: (value) => ["small", "normal", "large", "full"].includes(value)
+    },
+    /**
+     * Buttons to display
+     * @default []
+     */
+    buttons: {
+      type: Array,
+      required: false,
+      default: () => [],
+      validator(value) {
+        return Array.isArray(value) && value.every((element) => typeof element === "object");
+      }
+    },
+    /**
+     * Set to false to no show a close button on the dialog
+     * @default true
+     */
+    canClose: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Close the dialog if the user clicked outside of the dialog
+     * Only relevant if `canClose` is set to true.
+     */
+    closeOnClickOutside: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Make the dialog wrapper a HTML form element.
+     * The buttons will be wrapped within the form so they can be used as submit / reset buttons.
+     * Please note that when using the property the `navigation` should not be used.
+     */
+    isForm: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Declare if hiding the modal should be animated
+     * @default false
+     */
+    outTransition: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Optionally pass additional classes which will be set on the navigation for custom styling
+     * @default ''
+     * @example
+     * ```html
+     * <DialogBase :navigation-classes="['mydialog-navigation']"><!-- --></DialogBase>
+     * <!-- ... -->
+     * <style lang="scss">
+     * :deep(.mydialog-navigation) {
+     *     flex-direction: row-reverse;
+     * }
+     * </style>
+     * ```
+     */
+    navigationClasses: {
+      type: [String, Array, Object],
+      required: false,
+      default: ""
+    },
+    /**
+     * aria-label for the dialog navigation.
+     * Use it when you want to provide a more meaningful label than the dialog name.
+     *
+     * By default, navigation is labeled by the dialog name.
+     */
+    navigationAriaLabel: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    /**
+     * aria-labelledby for the dialog navigation.
+     * Use it when you have an implicit navigation label (e.g. a heading).
+     *
+     * By default, navigation is labeled by the dialog name.
+     */
+    navigationAriaLabelledby: {
+      type: String,
+      required: false,
+      default: ""
+    },
+    /**
+     * Optionally pass additional classes which will be set on the content wrapper for custom styling
+     * @default ''
+     */
+    contentClasses: {
+      type: [String, Array, Object],
+      required: false,
+      default: ""
+    },
+    /**
+     * Optionally pass additional classes which will be set on the dialog itself
+     * (the default `class` attribute will be set on the modal wrapper)
+     * @default ''
+     */
+    dialogClasses: {
+      type: [String, Array, Object],
+      required: false,
+      default: ""
+    }
+  },
+  emits: ["closing", "update:open", "submit"],
+  setup(props, { emit, slots }) {
+    const wrapper = ref();
+    const { width: dialogWidth } = useElementSize(wrapper, { width: 900, height: 0 });
+    const isNavigationCollapsed = computed(() => dialogWidth.value < 876);
+    const hasNavigation = computed(() => slots?.navigation !== void 0);
+    const navigationId = GenRandomId();
+    const navigationAriaLabelAttr = computed(() => props.navigationAriaLabel || void 0);
+    const navigationAriaLabelledbyAttr = computed(() => {
+      if (props.navigationAriaLabel) {
+        return void 0;
+      }
+      return props.navigationAriaLabelledby || navigationId;
+    });
+    const dialogElement = ref();
+    const dialogTagName = computed(() => props.isForm && !hasNavigation.value ? "form" : "div");
+    const dialogListeners = computed(
+      () => dialogTagName.value === "form" ? {
+        /**
+         * @param {SubmitEvent} event Form submit event
+         */
+        submit(event) {
+          event.preventDefault();
+          emit("submit", event);
+        },
+        /**
+         * @param {Event} event Form submit event
+         */
+        reset(event) {
+          event.preventDefault();
+          emit("reset", event);
+        }
+      } : {}
+    );
+    const showModal = ref(true);
+    function handleButtonClose(button, result) {
+      if (button.nativeType === "submit" && dialogTagName.value === "form" && !dialogElement.value.reportValidity()) {
+        return;
+      }
+      handleClosing(result);
+      window.setTimeout(() => handleClosed(), 300);
+    }
+    const handleClosing = (result) => {
+      showModal.value = false;
+      emit("closing", result);
+    };
+    const handleClosed = () => {
+      showModal.value = true;
+      emit("update:open", false);
+    };
+    const modalProps = computed(() => ({
+      canClose: props.canClose,
+      container: props.container === void 0 ? "body" : props.container,
+      // we do not pass the name as we already have the name as the headline
+      // name: props.name,
+      // But we need to set the correct label id so the dialog is labelled
+      labelId: navigationId,
+      size: props.size,
+      show: props.open && showModal.value,
+      outTransition: props.outTransition,
+      closeOnClickOutside: props.closeOnClickOutside,
+      additionalTrapElements: props.additionalTrapElements
+    }));
+    return {
+      dialogElement,
+      dialogListeners,
+      dialogTagName,
+      handleButtonClose,
+      handleClosing,
+      handleClosed,
+      hasNavigation,
+      navigationId,
+      navigationAriaLabelAttr,
+      navigationAriaLabelledbyAttr,
+      isNavigationCollapsed,
+      modalProps,
+      wrapper
+    };
+  }
+});
+const _hoisted_1 = ["id", "textContent"];
+const _hoisted_2 = ["aria-label", "aria-labelledby"];
+const _hoisted_3 = { class: "dialog__text" };
+const _hoisted_4 = { class: "dialog__actions" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcDialogButton = resolveComponent("NcDialogButton");
+  const _component_NcModal = resolveComponent("NcModal");
+  return _ctx.open ? (openBlock(), createBlock(_component_NcModal, mergeProps({
+    key: 0,
+    class: "dialog__modal",
+    "enable-slideshow": false,
+    "disable-swipe": ""
+  }, _ctx.modalProps, {
+    onClose: _ctx.handleClosed,
+    "onUpdate:show": _cache[0] || (_cache[0] = ($event) => _ctx.handleClosing())
+  }), {
+    default: withCtx(() => [
+      createElementVNode("h2", {
+        id: _ctx.navigationId,
+        class: "dialog__name",
+        textContent: toDisplayString(_ctx.name)
+      }, null, 8, _hoisted_1),
+      (openBlock(), createBlock(resolveDynamicComponent(_ctx.dialogTagName), mergeProps({
+        ref: "dialogElement",
+        class: ["dialog", _ctx.dialogClasses]
+      }, toHandlers(_ctx.dialogListeners)), {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            ref: "wrapper",
+            class: normalizeClass(["dialog__wrapper", { "dialog__wrapper--collapsed": _ctx.isNavigationCollapsed }])
+          }, [
+            _ctx.hasNavigation ? (openBlock(), createElementBlock("nav", {
+              key: 0,
+              class: normalizeClass(["dialog__navigation", _ctx.navigationClasses]),
+              "aria-label": _ctx.navigationAriaLabelAttr,
+              "aria-labelledby": _ctx.navigationAriaLabelledbyAttr
+            }, [
+              renderSlot(_ctx.$slots, "navigation", { isCollapsed: _ctx.isNavigationCollapsed }, void 0, true)
+            ], 10, _hoisted_2)) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: normalizeClass(["dialog__content", _ctx.contentClasses])
+            }, [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                createElementVNode("p", _hoisted_3, toDisplayString(_ctx.message), 1)
+              ], true)
+            ], 2)
+          ], 2),
+          createElementVNode("div", _hoisted_4, [
+            renderSlot(_ctx.$slots, "actions", {}, () => [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.buttons, (button, idx) => {
+                return openBlock(), createBlock(_component_NcDialogButton, mergeProps({
+                  key: idx,
+                  ref_for: true
+                }, button, {
+                  onClick: (_, result) => _ctx.handleButtonClose(button, result)
+                }), null, 16, ["onClick"]);
+              }), 128))
+            ], true)
+          ])
+        ]),
+        _: 3
+      }, 16, ["class"]))
+    ]),
+    _: 3
+  }, 16, ["onClose"])) : createCommentVNode("", true);
+}
+const NcDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5728e3fd"]]);
+export {
+  NcDialog as N
+};

package/dist/chunks/NcDialog-B81mllwn.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialog-B81mllwn.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 v-model:open=\"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 v-model:open=\"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\tv-model:open=\"showDialog\"\n\t\t\t@submit=\"currentName = newName\"\n\t\t\t@reset=\"newName = ''\"\n\t\t\t@closing=\"newName = ''\">\n\t\t\t<NcTextField v-model=\"newName\"\n\t\t\t\tlabel=\"New name\"\n\t\t\t\tminlength=\"6\"\n\t\t\t\tplaceholder=\"Min. 6 characters\"\n\t\t\t\trequired />\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: 'Reset',\n\t\t\t\t\tnativeType: 'reset',\n\t\t\t\t},\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\tdisable-swipe\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=\"(_, result) => handleButtonClose(button, result)\" />\n\t\t\t\t</slot>\n\t\t\t</div>\n\t\t</component>\n\t</NcModal>\n</template>\n\n<script lang=\"ts\">\nimport type { PropType } from 'vue'\nimport type { ComponentProps } from '../../utils/VueTypes.ts'\n\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\ntype NcDialogButtonProps = ComponentProps<typeof NcDialogButton>\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 as PropType<(string|HTMLElement)[]>,\n\t\t\tvalidator: (arr: unknown) => {\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 as PropType<'small'|'normal'|'large'|'full'>,\n\t\t\trequired: false,\n\t\t\tdefault: 'small',\n\t\t\tvalidator: (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 as PropType<NcDialogButtonProps[]>,\n\t\t\trequired: false,\n\t\t\tdefault: () => ([]),\n\t\t\tvalidator(value: unknown[]) {\n\t\t\t\treturn Array.isArray(value)\n\t\t\t\t\t&& value.every((element) => typeof element === 'object')\n\t\t\t},\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 additional 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 additional 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 additional 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 */\n\t\tconst wrapper = ref<HTMLDivElement>()\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, height: 0 })\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\t/**\n\t\t\t\t * @param {Event} event Form submit event\n\t\t\t\t */\n\t\t\t\treset(event) {\n\t\t\t\t\tevent.preventDefault()\n\t\t\t\t\t/**\n\t\t\t\t\t * Forwarded HTMLFormElement reset event (only if `is-form` is set).\n\t\t\t\t\t */\n\t\t\t\t\temit('reset', 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} button The button that was clicked\n\t\t * @param {unknown} result Result of the callback function\n\t\t */\n\t\tfunction handleButtonClose(button, result) {\n\t\t\t// Skip close on submit if invalid dialog\n\t\t\tif (button.nativeType === 'submit'\n\t\t\t\t&& dialogTagName.value === 'form'\n\t\t\t\t&& !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\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":["NcDialogButton","_resolveComponent","_openBlock","_createBlock","_mergeProps","handleClosed","navigationId","_toDisplayString","dialogClasses","_toHandlers","_withCtx","_createElementVNode","hasNavigation","_createElementBlock","navigationAriaLabelledbyAttr","_renderSlot","_createCommentVNode","_normalizeClass","_Fragment","_renderList"],"mappings":"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"}

package/dist/chunks/NcDialogButton.vue_vue_type_script_setup_true_lang-DgWqkSL7.mjs

@@ -0,0 +1,120 @@
+import { defineComponent, ref, createBlock, openBlock, unref, withCtx, createTextVNode, toDisplayString, renderSlot, createCommentVNode } from "vue";
+import { r as register, a as t } from "./_l10n-BEP_UzXI.mjs";
+import { b as ButtonType, N as NcButton, a as ButtonNativeType } from "./NcButton-QmfEsvXC.mjs";
+import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BYTrkA66.mjs";
+import { N as NcLoadingIcon } from "./NcLoadingIcon-CsMn1bFR.mjs";
+register();
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcDialogButton",
+  props: {
+    /**
+     * The function that will be called when the button is pressed.
+     * If the function returns `false` the click is ignored and the dialog will not be closed,
+     * which is the default behavior of "reset"-buttons.
+     *
+     * @type {() => unknown|false|Promise<unknown|false>}
+     */
+    callback: {
+      type: Function,
+      required: false,
+      default: () => {
+      }
+    },
+    /**
+     * The label of the button
+     */
+    label: {
+      type: String,
+      required: true
+    },
+    /**
+     * Optional inline SVG icon for the button
+     */
+    icon: {
+      type: String,
+      required: false,
+      default: void 0
+    },
+    /**
+     * The button type, see NcButton
+     * @type {'primary'|'secondary'|'error'|'warning'|'success'}
+     */
+    type: {
+      type: String,
+      default: ButtonType.Secondary,
+      required: false,
+      validator(value) {
+        return typeof value === "string" && Object.values(ButtonType).includes(value);
+      }
+    },
+    /**
+     * The native type of the button, see `NcButton`
+     * @type {'button'|'submit'|'reset'}
+     */
+    nativeType: {
+      type: String,
+      required: false,
+      default: "button",
+      validator(value) {
+        return typeof value === "string" && Object.values(ButtonNativeType).includes(value);
+      }
+    },
+    /**
+     * If the button should be shown as disabled
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isLoading = ref(false);
+    async function handleClick(e) {
+      if (isLoading.value) {
+        return;
+      }
+      isLoading.value = true;
+      try {
+        const fallback = props.nativeType === "reset" ? false : void 0;
+        const result = await props.callback?.() ?? fallback;
+        if (result !== false) {
+          emit("click", e, result);
+        }
+      } finally {
+        isLoading.value = false;
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NcButton), {
+        "aria-label": __props.label,
+        disabled: __props.disabled,
+        "native-type": __props.nativeType,
+        type: __props.type,
+        onClick: handleClick
+      }, {
+        icon: withCtx(() => [
+          renderSlot(_ctx.$slots, "icon", {}, () => [
+            isLoading.value ? (openBlock(), createBlock(unref(NcLoadingIcon), {
+              key: 0,
+              name: unref(t)("Loading …")
+              /* TRANSLATORS: The button is in a loading state*/
+            }, null, 8, ["name"])) : __props.icon !== void 0 ? (openBlock(), createBlock(unref(NcIconSvgWrapper), {
+              key: 1,
+              svg: __props.icon
+            }, null, 8, ["svg"])) : createCommentVNode("", true)
+          ])
+        ]),
+        default: withCtx(() => [
+          createTextVNode(toDisplayString(__props.label) + " ", 1)
+        ]),
+        _: 3
+      }, 8, ["aria-label", "disabled", "native-type", "type"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/NcDialogButton.vue_vue_type_script_setup_true_lang-DgWqkSL7.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialogButton.vue_vue_type_script_setup_true_lang-DgWqkSL7.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 lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { ref } from 'vue'\nimport { t } from '../../l10n.js'\n\nimport NcButton, { ButtonNativeType, ButtonType } from '../NcButton/index'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\nimport NcLoadingIcon from '../NcLoadingIcon/index.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 * which is the default behavior of \"reset\"-buttons.\n\t *\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 as PropType<ButtonType>,\n\t\tdefault: ButtonType.Secondary,\n\t\trequired: false,\n\t\tvalidator(value: string) {\n\t\t\treturn typeof value === 'string'\n\t\t\t\t&& Object.values(ButtonType).includes(value as ButtonType)\n\t\t},\n\t},\n\n\t/**\n\t * The native type of the button, see `NcButton`\n\t * @type {'button'|'submit'|'reset'}\n\t */\n\tnativeType: {\n\t\ttype: String as PropType<ButtonNativeType>,\n\t\trequired: false,\n\t\tdefault: 'button',\n\t\tvalidator(value) {\n\t\t\treturn typeof value === 'string'\n\t\t\t\t&& Object.values(ButtonNativeType).includes(value as ButtonNativeType)\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<{\n\t(name: 'click', event: MouseEvent, payload: unknown): void\n}>()\n\nconst isLoading = ref(false)\n\n/**\n * Handle clicking the button\n * @param e The click event\n */\nasync function handleClick(e: MouseEvent) {\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\t// for reset buttons the default is \"false\"\n\t\tconst fallback = props.nativeType === 'reset' ? false : undefined\n\t\tconst result = await props.callback?.() ?? fallback\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,UAAM,QAAQ;AAoEd,UAAM,OAAO;AAIP,UAAA,YAAY,IAAI,KAAK;AAM3B,mBAAe,YAAY,GAAe;AAEzC,UAAI,UAAU,OAAO;AACpB;AAAA,MAAA;AAGD,gBAAU,QAAQ;AACd,UAAA;AAEH,cAAM,WAAW,MAAM,eAAe,UAAU,QAAQ;AACxD,cAAM,SAAS,MAAM,MAAM,WAAgB,KAAA;AAC3C,YAAI,WAAW,OAAO;AAIhB,eAAA,SAAS,GAAG,MAAM;AAAA,QAAA;AAAA,MACxB,UACC;AACD,kBAAU,QAAQ;AAAA,MAAA;AAAA,IACnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/NcEllipsisedOption-D4OggsNq.mjs

@@ -0,0 +1,105 @@
+import '../assets/NcEllipsisedOption-DGr9_bIL.css';
+import { _ as _sfc_main$1, F as FindRanges } from "./NcHighlight-BHtRIzqk.mjs";
+import { resolveComponent, createElementBlock, openBlock, createVNode, createBlock, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcEllipsisedOption",
+  components: {
+    NcHighlight: _sfc_main$1
+  },
+  props: {
+    /**
+     * The text to be display in one line. If it is longer than 10 characters, it is be truncated with ellipsis in the end but keeping up to 10 last characters to fit the parent container.
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The search value to highlight in the text
+     */
+    search: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    needsTruncate() {
+      return this.name && this.name.length >= 10;
+    },
+    /**
+     * Index at which to split the name if it is longer than 10 characters.
+     *
+     * @return {number} The position at which to split
+     */
+    split() {
+      return this.name.length - Math.min(Math.floor(this.name.length / 2), 10);
+    },
+    part1() {
+      if (this.needsTruncate) {
+        return this.name.slice(0, this.split);
+      }
+      return this.name;
+    },
+    part2() {
+      if (this.needsTruncate) {
+        return this.name.slice(this.split);
+      }
+      return "";
+    },
+    /**
+     * The ranges to highlight. Since we split the string for ellipsising,
+     * the Highlight component cannot figure this out itself and needs the ranges provided.
+     *
+     * @return {Array} The array with the ranges to highlight
+     */
+    highlight1() {
+      if (!this.search) {
+        return [];
+      }
+      return FindRanges(this.name, this.search);
+    },
+    /**
+     * We shift the ranges for the second part by the position of the split.
+     * Ranges out of the string length are discarded by the Highlight component,
+     * so we don't need to take care of this here.
+     *
+     * @return {Array} The array with the ranges to highlight
+     */
+    highlight2() {
+      return this.highlight1.map((range) => {
+        return {
+          start: range.start - this.split,
+          end: range.end - this.split
+        };
+      });
+    }
+  }
+};
+const _hoisted_1 = ["title"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcHighlight = resolveComponent("NcHighlight");
+  return openBlock(), createElementBlock("span", {
+    dir: "auto",
+    class: "name-parts",
+    title: $props.name
+  }, [
+    createVNode(_component_NcHighlight, {
+      class: "name-parts__first",
+      text: $options.part1,
+      search: $props.search,
+      highlight: $options.highlight1
+    }, null, 8, ["text", "search", "highlight"]),
+    $options.part2 ? (openBlock(), createBlock(_component_NcHighlight, {
+      key: 0,
+      class: "name-parts__last",
+      text: $options.part2,
+      search: $props.search,
+      highlight: $options.highlight2
+    }, null, 8, ["text", "search", "highlight"])) : createCommentVNode("", true)
+  ], 8, _hoisted_1);
+}
+const NcEllipsisedOption = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-f6384352"]]);
+export {
+  NcEllipsisedOption as N
+};

package/dist/chunks/NcEllipsisedOption-D4OggsNq.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcEllipsisedOption-D4OggsNq.mjs","sources":["../../src/components/NcEllipsisedOption/NcEllipsisedOption.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2018 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nA component to display a long text with highlight support in one line truncated with ellipsis in the end but keeping up to 10 last characters.\n\nIt is supposed to be used as an `NcSelect`'s option in first place.\n\n### General usage\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Plain text</h4>\n\t\t<p>{{ text }}</p>\n\n\t\t<h4>Truncated text with <code>text-overflow: ellipsis</code></h4>\n\t\t<p style=\"text-overflow: ellipsis; overflow: hidden; white-space: pre;\">{{ text }}</p>\n\n\t\t<h4>NcEllipsisedOption searching for \"Nineteen\"</h4>\n\t\t<NcEllipsisedOption :name=\"text\" :search=\"search\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty',\n\t\t\tsearch: 'Nineteen',\n\t\t}\n\t},\n}\n</script>\n```\n\n### Usage in `NcSelect`\n\n```vue\n<template>\n\t<NcSelect v-model=\"selected\" :options=\"options\">\n\t\t<template #option=\"option\">\n\t\t\t<NcEllipsisedOption :name=\"option.label\" />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcEllipsisedOption :name=\"selectedOption.label\" />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\toptions: [\n\t\t\t\t'Option 1 - a short opt.',\n\t\t\t\t'Option 2 - a very very very very long opt.',\n\t\t\t].map((label) => ({ label })),\n\t\t\tselected: '',\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<span dir=\"auto\" class=\"name-parts\" :title=\"name\">\n\t\t<NcHighlight class=\"name-parts__first\"\n\t\t\t:text=\"part1\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight1\" />\n\t\t<NcHighlight v-if=\"part2\"\n\t\t\tclass=\"name-parts__last\"\n\t\t\t:text=\"part2\"\n\t\t\t:search=\"search\"\n\t\t\t:highlight=\"highlight2\" />\n\t</span>\n</template>\n<script>\nimport NcHighlight from '../NcHighlight/index.js'\nimport FindRanges from '../../utils/FindRanges.js'\n\nexport default {\n\tname: 'NcEllipsisedOption',\n\n\tcomponents: {\n\t\tNcHighlight,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The text to be display in one line. If it is longer than 10 characters, it is be truncated with ellipsis in the end but keeping up to 10 last characters to fit the parent container.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * The search value to highlight in the text\n\t\t */\n\t\tsearch: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tneedsTruncate() {\n\t\t\treturn this.name && this.name.length >= 10\n\t\t},\n\t\t/**\n\t\t * Index at which to split the name if it is longer than 10 characters.\n\t\t *\n\t\t * @return {number} The position at which to split\n\t\t */\n\t\tsplit() {\n\t\t\t// leave maximum 10 letters\n\t\t\treturn this.name.length - Math.min(Math.floor(this.name.length / 2), 10)\n\t\t},\n\t\tpart1() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(0, this.split)\n\t\t\t}\n\t\t\treturn this.name\n\t\t},\n\t\tpart2() {\n\t\t\tif (this.needsTruncate) {\n\t\t\t\treturn this.name.slice(this.split)\n\t\t\t}\n\t\t\treturn ''\n\t\t},\n\t\t/**\n\t\t * The ranges to highlight. Since we split the string for ellipsising,\n\t\t * the Highlight component cannot figure this out itself and needs the ranges provided.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight1() {\n\t\t\tif (!this.search) {\n\t\t\t\treturn []\n\t\t\t}\n\t\t\treturn FindRanges(this.name, this.search)\n\t\t},\n\t\t/**\n\t\t * We shift the ranges for the second part by the position of the split.\n\t\t * Ranges out of the string length are discarded by the Highlight component,\n\t\t * so we don't need to take care of this here.\n\t\t *\n\t\t * @return {Array} The array with the ranges to highlight\n\t\t */\n\t\thighlight2() {\n\t\t\treturn this.highlight1.map(range => {\n\t\t\t\treturn {\n\t\t\t\t\tstart: range.start - this.split,\n\t\t\t\t\tend: range.end - this.split,\n\t\t\t\t}\n\t\t\t})\n\t\t},\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.name-parts {\n\tdisplay: flex;\n\tmax-width: 100%;\n\tcursor: inherit;\n\t&__first {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t&__first,\n\t&__last {\n\t\t// prevent whitespace from being trimmed\n\t\twhite-space: pre;\n\t\tcursor: inherit;\n\t\tstrong {\n\t\t\tfont-weight: bold;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcHighlight","_createElementBlock","_createVNode","_createBlock","_createCommentVNode"],"mappings":";;;AAqFA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,iBACXA;AAAAA,EACA;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAID,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,UAAU;AAAA,IACT,gBAAgB;AACf,aAAO,KAAK,QAAQ,KAAK,KAAK,UAAU;AAAA,IACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAEP,aAAO,KAAK,KAAK,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,KAAK,SAAS,CAAC,GAAG,EAAE;AAAA,IACvE;AAAA,IACD,QAAQ;AACP,UAAI,KAAK,eAAe;AACvB,eAAO,KAAK,KAAK,MAAM,GAAG,KAAK,KAAK;AAAA,MACrC;AACA,aAAO,KAAK;AAAA,IACZ;AAAA,IACD,QAAQ;AACP,UAAI,KAAK,eAAe;AACvB,eAAO,KAAK,KAAK,MAAM,KAAK,KAAK;AAAA,MAClC;AACA,aAAO;AAAA,IACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa;AACZ,UAAI,CAAC,KAAK,QAAQ;AACjB,eAAO,CAAA;AAAA,MACR;AACA,aAAO,WAAW,KAAK,MAAM,KAAK,MAAM;AAAA,IACxC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQD,aAAa;AACZ,aAAO,KAAK,WAAW,IAAI,WAAS;AACnC,eAAO;AAAA,UACN,OAAO,MAAM,QAAQ,KAAK;AAAA,UAC1B,KAAK,MAAM,MAAM,KAAK;AAAA,QACvB;AAAA,MACA,CAAA;AAAA,IACD;AAAA,EACD;AACF;AAlKA,MAAA,aAAA,CAAA,OAAA;;;sBAqECC,mBAUO,QAAA;AAAA,IAVD,KAAI;AAAA,IAAO,OAAM;AAAA,IAAc,OAAO,OAAI;AAAA;IAC/CC,YAG2B,wBAAA;AAAA,MAHd,OAAM;AAAA,MACjB,MAAM,SAAK;AAAA,MACX,QAAQ,OAAM;AAAA,MACd,WAAW,SAAU;AAAA;IACJ,SAAK,sBAAxBC,YAI2B,wBAAA;AAAA,MA9E7B,KAAA;AAAA,MA2EG,OAAM;AAAA,MACL,MAAM,SAAK;AAAA,MACX,QAAQ,OAAM;AAAA,MACd,WAAW,SAAU;AAAA,oDA9EzBC,mBAAA,IAAA,IAAA;AAAA,EAAA,GAAA,GAAA,UAAA;;;"}