@nextcloud/vue 8.0.0-beta.7 → 8.0.0-beta.9

package/dist/Components/NcDialog.mjs

@@ -0,0 +1,177 @@
+import "../assets/index-dc612aa3.css";
+import { useElementSize as p } from "@vueuse/core";
+import { defineComponent as g, ref as d, computed as s } from "vue";
+import m from "./NcModal.mjs";
+import y from "./NcDialogButton.mjs";
+import { n as v } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const C = g({
+  name: "NcDialog",
+  components: {
+    NcDialogButton: y,
+    NcModal: m
+  },
+  props: {
+    /** Name of the dialog (the heading) */
+    name: {
+      type: String,
+      required: !0
+    },
+    /** Text of the dialog */
+    message: {
+      type: String,
+      default: ""
+    },
+    /** Additional elements to add to the focus trap */
+    additionalTrapElements: {
+      type: Array,
+      validator: (a) => Array.isArray(a) && a.every((e) => typeof e == "string"),
+      default: () => []
+    },
+    /**
+     * The element where to mount the dialog, if `null` is passed the dialog is mounted in place
+     * @default 'body'
+     */
+    container: {
+      type: String,
+      required: !1,
+      default: "body"
+    },
+    /**
+     * Whether the dialog should be shown
+     * @default true
+     */
+    open: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Size of the underlying NcModal
+     * @default 'small'
+     * @values 'small', 'normal', 'large', 'full'
+     */
+    size: {
+      type: String,
+      required: !1,
+      default: "small",
+      validator: (a) => typeof a == "string" && ["small", "normal", "large", "full"].includes(a)
+    },
+    /**
+     * Buttons to display
+     * @default []
+     */
+    buttons: {
+      type: Array,
+      required: !1,
+      default: () => [],
+      validator: (a) => Array.isArray(a) && a.every((e) => typeof e == "object")
+    },
+    /**
+     * Set to false to no show a close button on the dialog
+     * @default true
+     */
+    canClose: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Declare if hiding the modal should be animated
+     * @default false
+     */
+    outTransition: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Optionally pass additionaly 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: !1,
+      default: ""
+    },
+    /**
+     * Optionally pass additionaly classes which will be set on the content wrapper for custom styling
+     * @default ''
+     */
+    contentClasses: {
+      type: [String, Array, Object],
+      required: !1,
+      default: ""
+    },
+    /**
+     * Optionally pass additionaly 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: !1,
+      default: ""
+    }
+  },
+  emits: ["closing", "update:open"],
+  setup(a, { emit: e, slots: t }) {
+    const n = d(), { width: o } = p(n), c = s(() => o.value < 876), u = s(() => (t == null ? void 0 : t.navigation) !== void 0), l = d(!0), _ = () => {
+      i(), window.setTimeout(() => r(), 300);
+    }, i = () => {
+      l.value = !1, e("closing");
+    }, r = () => {
+      l.value = !0, e("update:open", !1);
+    }, f = s(() => ({
+      canClose: a.canClose,
+      container: a.container === void 0 ? "body" : a.container,
+      // we do not pass the name as we already have the name as the headline
+      // name: props.name,
+      size: a.size,
+      show: a.open && l.value,
+      outTransition: a.outTransition,
+      class: "dialog__modal",
+      closeOnClickOutside: !1,
+      enableSlideshow: !1,
+      enableSwipe: !1
+    }));
+    return {
+      handleButtonClose: _,
+      handleClosing: i,
+      handleClosed: r,
+      hasNavigation: u,
+      isNavigationCollapsed: c,
+      modalProps: f,
+      wrapper: n
+    };
+  }
+});
+var h = function() {
+  var e = this, t = e._self._c;
+  return e._self._setupProxy, e.open ? t("NcModal", e._b({ on: { close: e.handleClosed, "update:show": e.handleClosing } }, "NcModal", e.modalProps, !1), [t("h2", { staticClass: "dialog__name", domProps: { textContent: e._s(e.name) } }), t("div", { staticClass: "dialog", class: e.dialogClasses }, [t("div", { ref: "wrapper", class: ["dialog__wrapper", { "dialog__wrapper--collapsed": e.isNavigationCollapsed }] }, [e.hasNavigation ? t("nav", { staticClass: "dialog__navigation", class: e.navigationClasses }, [e._t("navigation", null, { isCollapsed: e.isNavigationCollapsed })], 2) : e._e(), t("div", { staticClass: "dialog__content", class: e.contentClasses }, [e._t("default", function() {
+    return [t("p", [e._v(e._s(e.message))])];
+  })], 2)]), t("div", { staticClass: "dialog__actions" }, [e._t("actions", function() {
+    return e._l(e.buttons, function(n, o) {
+      return t("NcDialogButton", e._b({ key: o, on: { click: e.handleButtonClose } }, "NcDialogButton", n, !1));
+    });
+  })], 2)])]) : e._e();
+}, N = [], b = /* @__PURE__ */ v(
+  C,
+  h,
+  N,
+  !1,
+  null,
+  "cf1c45bf",
+  null,
+  null
+);
+const x = b.exports;
+export {
+  x as default
+};

package/dist/Components/NcDialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialog.mjs","sources":["../../src/components/NcDialog/NcDialog.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<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: '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\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]\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>\n\t\t<NcButton @click=\"showDialog = true\">Show 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</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tshowDialog: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcModal v-if=\"open\"\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 class=\"dialog__name\" v-text=\"name\" />\n\t\t<div class=\"dialog\" :class=\"dialogClasses\">\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\" class=\"dialog__navigation\" :class=\"navigationClasses\">\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>{{ message }}</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</div>\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\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) => Array.isArray(arr) && arr.every((element) => typeof element === 'string'),\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 * @values '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 * 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 * 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'],\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)\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 * If the underlaying 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 */\n\t\tconst handleButtonClose = () => {\n\t\t\thandleClosing()\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 */\n\t\tconst handleClosing = () => {\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 */\n\t\t\temit('closing')\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\tsize: props.size,\n\t\t\tshow: props.open && showModal.value,\n\t\t\toutTransition: props.outTransition,\n\t\t\tclass: 'dialog__modal',\n\t\t\tcloseOnClickOutside: false,\n\t\t\tenableSlideshow: false,\n\t\t\tenableSwipe: false,\n\t\t}))\n\n\t\treturn {\n\t\t\thandleButtonClose,\n\t\t\thandleClosing,\n\t\t\thandleClosed,\n\t\t\thasNavigation,\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: math.div($breakpoint-mobile, 2)) {\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-container) {\n\t\t\tdisplay: flex !important;\n\t\t\tpadding-block: 4px 8px; // 4px to align with close button, 8px block-end to allow the actions a margin of 4px for the focus visible outline\n\t\t\tpadding-inline: 12px 8px; // 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-container__content) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\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\t\t// see modal-container padding, this aligns with the padding-inline-start (8px + 4px = 12px)\n\t\tpadding-inline-end: 4px;\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\t// Same as the NcAppSettingsDialog\n\t\ttext-align: center;\n\t\theight: var(--default-clickable-area);\n\t\tmin-height: var(--default-clickable-area);\n\t\tline-height: var(--default-clickable-area);\n\t\tmargin-block-end: 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}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: 6px;\n\t\talign-content: center;\n\t\twidth: fit-content;\n\t\tmargin-inline: auto 4px; // 4px to align with the overall modal padding, we need this here for the buttons to have their 4px focus-visible outline\n\t\tmargin-block: 6px 4px; // 4px block-end see reason above\n\t}\n}\n</style>\n"],"names":["_sfc_main","defineComponent","NcDialogButton","NcModal","arr","element","value","props","emit","slots","wrapper","ref","dialogWidth","useElementSize","isNavigationCollapsed","computed","hasNavigation","showModal","handleButtonClose","handleClosing","handleClosed","modalProps"],"mappings":"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"}

package/dist/Components/NcDialogButton.cjs

@@ -0,0 +1,69 @@
+"use strict";
+const o = require("vue"), l = require("./NcButton.cjs"), i = require("./NcIconSvgWrapper.cjs"), u = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), a = o.defineComponent({
+  name: "NcDialogButton",
+  props: {
+    /**
+     * The function that will be called when the button is pressed
+     * @type {() => void}
+     */
+    callback: {
+      type: Function,
+      required: !0
+    },
+    /**
+     * The label of the button
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Optional inline SVG icon for the button
+     */
+    icon: {
+      type: String,
+      required: !1,
+      default: void 0
+    },
+    /**
+     * The button type, see NcButton
+     * @values 'primary', 'secondary', 'error', 'warning', 'success'
+     */
+    type: {
+      type: String,
+      required: !1,
+      default: "secondary",
+      validator: (n) => typeof n == "string" && ["primary", "secondary", "error", "warning", "success"].includes(n)
+    }
+  },
+  emits: ["click"],
+  setup(n, { emit: e }) {
+    return {
+      NcButton: l,
+      NcIconSvgWrapper: i,
+      handleClick: (c) => {
+        var t;
+        (t = n.callback) == null || t.call(n), e("click", c);
+      }
+    };
+  }
+});
+var s = function() {
+  var e = this, r = e._self._c;
+  return e._self._setupProxy, r("NcButton", { attrs: { "aria-label": e.label, type: e.type }, on: { click: e.handleClick }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [e._t("icon", function() {
+      return [e.icon !== void 0 ? r("NcIconSvgWrapper", { attrs: { svg: e.icon } }) : e._e()];
+    })];
+  }, proxy: !0 }], null, !0) }, [e._v(" " + e._s(e.label) + " ")]);
+}, _ = [], d = /* @__PURE__ */ u.normalizeComponent(
+  a,
+  s,
+  _,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const p = d.exports;
+module.exports = p;

package/dist/Components/NcDialogButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialogButton.cjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<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\" :type=\"type\" @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<NcIconSvgWrapper v-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default defineComponent({\n\tname: 'NcDialogButton',\n\n\tprops: {\n\t\t/**\n\t\t * The function that will be called when the button is pressed\n\t\t * @type {() => void}\n\t\t */\n\t\tcallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The label of the button\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Optional inline SVG icon for the button\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The button type, see NcButton\n\t\t * @values 'primary', 'secondary', 'error', 'warning', 'success'\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'secondary',\n\t\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tsetup(props, { emit }) {\n\t\t/**\n\t\t * Handle clicking the button\n\t\t * @param {MouseEvent} e The click event\n\t\t */\n\t\tconst handleClick = (e) => {\n\t\t\tprops.callback?.()\n\t\t\temit('click', e)\n\t\t}\n\n\t\treturn {\n\t\t\tNcButton,\n\t\t\tNcIconSvgWrapper,\n\n\t\t\thandleClick,\n\t\t}\n\t},\n})\n</script>\n"],"names":["_sfc_main","defineComponent","type","props","emit","NcButton","NcIconSvgWrapper","e","_a"],"mappings":";+JA2CAA,IAAAC,EAAAA,gBAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAAA,KAAA,YAAA,CAAA,WAAA,aAAA,SAAA,WAAA,SAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AAAA,EAEA,MAAAC,GAAA,EAAA,MAAAC,KAAA;AAUA,WAAA;AAAA,MACA,UAAAC;AAAAA,MACA,kBAAAC;AAAAA,MAEA,aATA,CAAAC,MAAA;;AACA,SAAAC,IAAAL,EAAA,aAAA,QAAAK,EAAA,KAAAL,IACAC,EAAA,SAAAG,CAAA;AAAA,MACA;AAAA,IAOA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcDialogButton.mjs

@@ -0,0 +1,74 @@
+import { defineComponent as l } from "vue";
+import o from "./NcButton.mjs";
+import i from "./NcIconSvgWrapper.mjs";
+import { n as a } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const u = l({
+  name: "NcDialogButton",
+  props: {
+    /**
+     * The function that will be called when the button is pressed
+     * @type {() => void}
+     */
+    callback: {
+      type: Function,
+      required: !0
+    },
+    /**
+     * The label of the button
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Optional inline SVG icon for the button
+     */
+    icon: {
+      type: String,
+      required: !1,
+      default: void 0
+    },
+    /**
+     * The button type, see NcButton
+     * @values 'primary', 'secondary', 'error', 'warning', 'success'
+     */
+    type: {
+      type: String,
+      required: !1,
+      default: "secondary",
+      validator: (n) => typeof n == "string" && ["primary", "secondary", "error", "warning", "success"].includes(n)
+    }
+  },
+  emits: ["click"],
+  setup(n, { emit: e }) {
+    return {
+      NcButton: o,
+      NcIconSvgWrapper: i,
+      handleClick: (c) => {
+        var t;
+        (t = n.callback) == null || t.call(n), e("click", c);
+      }
+    };
+  }
+});
+var s = function() {
+  var e = this, r = e._self._c;
+  return e._self._setupProxy, r("NcButton", { attrs: { "aria-label": e.label, type: e.type }, on: { click: e.handleClick }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [e._t("icon", function() {
+      return [e.icon !== void 0 ? r("NcIconSvgWrapper", { attrs: { svg: e.icon } }) : e._e()];
+    })];
+  }, proxy: !0 }], null, !0) }, [e._v(" " + e._s(e.label) + " ")]);
+}, d = [], f = /* @__PURE__ */ a(
+  u,
+  s,
+  d,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const g = f.exports;
+export {
+  g as default
+};

package/dist/Components/NcDialogButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcDialogButton.mjs","sources":["../../src/components/NcDialogButton/NcDialogButton.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Ferdinand Thiessen\n  -\n  - @author Ferdinand Thiessen <opensource@fthiessen.de>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<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\" :type=\"type\" @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<NcIconSvgWrapper v-if=\"icon !== undefined\" :svg=\"icon\" />\n\t\t\t</slot>\n\t\t</template>\n\t</NcButton>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport NcButton from '../NcButton/index.js'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default defineComponent({\n\tname: 'NcDialogButton',\n\n\tprops: {\n\t\t/**\n\t\t * The function that will be called when the button is pressed\n\t\t * @type {() => void}\n\t\t */\n\t\tcallback: {\n\t\t\ttype: Function,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The label of the button\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * Optional inline SVG icon for the button\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * The button type, see NcButton\n\t\t * @values 'primary', 'secondary', 'error', 'warning', 'success'\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\trequired: false,\n\t\t\tdefault: 'secondary',\n\t\t\tvalidator: (type) => typeof type === 'string' && ['primary', 'secondary', 'error', 'warning', 'success'].includes(type),\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tsetup(props, { emit }) {\n\t\t/**\n\t\t * Handle clicking the button\n\t\t * @param {MouseEvent} e The click event\n\t\t */\n\t\tconst handleClick = (e) => {\n\t\t\tprops.callback?.()\n\t\t\temit('click', e)\n\t\t}\n\n\t\treturn {\n\t\t\tNcButton,\n\t\t\tNcIconSvgWrapper,\n\n\t\t\thandleClick,\n\t\t}\n\t},\n})\n</script>\n"],"names":["_sfc_main","defineComponent","type","props","emit","NcButton","NcIconSvgWrapper","e","_a"],"mappings":";;;;AA2CA,MAAAA,IAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAAA,KAAA,YAAA,CAAA,WAAA,aAAA,SAAA,WAAA,SAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA,CAAA,OAAA;AAAA,EAEA,MAAAC,GAAA,EAAA,MAAAC,KAAA;AAUA,WAAA;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MAEA,aATA,CAAAC,MAAA;;AACA,SAAAC,IAAAL,EAAA,aAAA,QAAAK,EAAA,KAAAL,IACAC,EAAA,SAAAG,CAAA;AAAA,MACA;AAAA,IAOA;AAAA,EACA;AACA,CAAA;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcEllipsisedOption.cjs

@@ -1 +1,74 @@
-var c=require("../assets/index-1d28ce70.css");const e=require("../chunks/index-df3f51c6.cjs"),i=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const h={name:"NcEllipsisedOption",components:{NcHighlight:e.NcHighlight},props:{name:{type:String,default:""},search:{type:String,default:""}},computed:{needsTruncate(){return this.name&&this.name.length>=10},split(){return this.name.length-Math.min(Math.floor(this.name.length/2),10)},part1(){return this.needsTruncate?this.name.slice(0,this.split):this.name},part2(){return this.needsTruncate?this.name.slice(this.split):""},highlight1(){return this.search?e.FindRanges(this.name,this.search):[]},highlight2(){return this.highlight1.map(t=>({start:t.start-this.split,end:t.end-this.split}))}}};var a=function(){var t=this,s=t._self._c;return s("span",{staticClass:"name-parts",attrs:{title:t.name}},[s("NcHighlight",{staticClass:"name-parts__first",attrs:{text:t.part1,search:t.search,highlight:t.highlight1}}),t.part2?s("NcHighlight",{staticClass:"name-parts__last",attrs:{text:t.part2,search:t.search,highlight:t.highlight2}}):t._e()],1)},r=[],n=i.normalizeComponent(h,a,r,!1,null,"08c4259e",null,null);const l=n.exports;module.exports=l;
+var p = require("../assets/index-a2b51bce.css");
+const i = require("../chunks/index-e894376a.cjs"), n = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const r = {
+  name: "NcEllipsisedOption",
+  components: {
+    NcHighlight: i.NcHighlight
+  },
+  props: {
+    name: {
+      type: String,
+      default: ""
+    },
+    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() {
+      return this.needsTruncate ? this.name.slice(0, this.split) : this.name;
+    },
+    part2() {
+      return this.needsTruncate ? this.name.slice(this.split) : "";
+    },
+    /**
+     * 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() {
+      return this.search ? i.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((e) => ({
+        start: e.start - this.split,
+        end: e.end - this.split
+      }));
+    }
+  }
+};
+var h = function() {
+  var t = this, s = t._self._c;
+  return s("span", { staticClass: "name-parts", attrs: { title: t.name } }, [s("NcHighlight", { staticClass: "name-parts__first", attrs: { text: t.part1, search: t.search, highlight: t.highlight1 } }), t.part2 ? s("NcHighlight", { staticClass: "name-parts__last", attrs: { text: t.part2, search: t.search, highlight: t.highlight2 } }) : t._e()], 1);
+}, a = [], l = /* @__PURE__ */ n.normalizeComponent(
+  r,
+  h,
+  a,
+  !1,
+  null,
+  "08c4259e",
+  null,
+  null
+);
+const c = l.exports;
+module.exports = c;

package/dist/Components/NcEllipsisedOption.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEllipsisedOption.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"NcEllipsisedOption.cjs","sources":["../../src/components/NcEllipsisedOption/NcEllipsisedOption.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<template>\n\t<span 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\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\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":["_sfc_main","Components_NcHighlight","range"],"mappings":";;AAuCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAC,EAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA,KAAA,QAAA,KAAA,KAAA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAEA,aAAA,KAAA,KAAA,SAAA,KAAA,IAAA,KAAA,MAAA,KAAA,KAAA,SAAA,CAAA,GAAA,EAAA;AAAA,IACA;AAAA,IACA,QAAA;AACA,aAAA,KAAA,gBACA,KAAA,KAAA,MAAA,GAAA,KAAA,KAAA,IAEA,KAAA;AAAA,IACA;AAAA,IACA,QAAA;AACA,aAAA,KAAA,gBACA,KAAA,KAAA,MAAA,KAAA,KAAA,IAEA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AACA,aAAA,KAAA,SAGAA,EAAA,WAAA,KAAA,MAAA,KAAA,MAAA,IAFA,CAAA;AAAA,IAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,aAAA;AACA,aAAA,KAAA,WAAA,IAAA,CAAAC,OACA;AAAA,QACA,OAAAA,EAAA,QAAA,KAAA;AAAA,QACA,KAAAA,EAAA,MAAA,KAAA;AAAA,MACA,EACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/Components/NcEllipsisedOption.mjs

@@ -1,24 +1,77 @@
-import "../assets/index-1d28ce70.css";
-import { N as i, F as e } from "../chunks/index-cd3f1f8f.mjs";
-import { n as a } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const h = { name: "NcEllipsisedOption", components: { NcHighlight: i }, props: { name: { type: String, default: "" }, search: { type: String, default: "" } }, computed: { needsTruncate() {
-  return this.name && this.name.length >= 10;
-}, split() {
-  return this.name.length - Math.min(Math.floor(this.name.length / 2), 10);
-}, part1() {
-  return this.needsTruncate ? this.name.slice(0, this.split) : this.name;
-}, part2() {
-  return this.needsTruncate ? this.name.slice(this.split) : "";
-}, highlight1() {
-  return this.search ? e(this.name, this.search) : [];
-}, highlight2() {
-  return this.highlight1.map((t) => ({ start: t.start - this.split, end: t.end - this.split }));
-} } };
-var r = function() {
+import "../assets/index-a2b51bce.css";
+import { N as i, F as n } from "../chunks/index-20a9ace9.mjs";
+import { n as r } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const a = {
+  name: "NcEllipsisedOption",
+  components: {
+    NcHighlight: i
+  },
+  props: {
+    name: {
+      type: String,
+      default: ""
+    },
+    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() {
+      return this.needsTruncate ? this.name.slice(0, this.split) : this.name;
+    },
+    part2() {
+      return this.needsTruncate ? this.name.slice(this.split) : "";
+    },
+    /**
+     * 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() {
+      return this.search ? n(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((e) => ({
+        start: e.start - this.split,
+        end: e.end - this.split
+      }));
+    }
+  }
+};
+var h = function() {
   var t = this, s = t._self._c;
   return s("span", { staticClass: "name-parts", attrs: { title: t.name } }, [s("NcHighlight", { staticClass: "name-parts__first", attrs: { text: t.part1, search: t.search, highlight: t.highlight1 } }), t.part2 ? s("NcHighlight", { staticClass: "name-parts__last", attrs: { text: t.part2, search: t.search, highlight: t.highlight2 } }) : t._e()], 1);
-}, n = [], l = a(h, r, n, !1, null, "08c4259e", null, null);
-const m = l.exports;
+}, l = [], c = /* @__PURE__ */ r(
+  a,
+  h,
+  l,
+  !1,
+  null,
+  "08c4259e",
+  null,
+  null
+);
+const g = c.exports;
 export {
-  m as default
+  g as default
 };

package/dist/Components/NcEllipsisedOption.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcEllipsisedOption.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcEllipsisedOption.mjs","sources":["../../src/components/NcEllipsisedOption/NcEllipsisedOption.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<template>\n\t<span 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\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\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":["_sfc_main","NcHighlight","FindRanges","range"],"mappings":";;;AAuCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,IAEA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA,KAAA,QAAA,KAAA,KAAA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAEA,aAAA,KAAA,KAAA,SAAA,KAAA,IAAA,KAAA,MAAA,KAAA,KAAA,SAAA,CAAA,GAAA,EAAA;AAAA,IACA;AAAA,IACA,QAAA;AACA,aAAA,KAAA,gBACA,KAAA,KAAA,MAAA,GAAA,KAAA,KAAA,IAEA,KAAA;AAAA,IACA;AAAA,IACA,QAAA;AACA,aAAA,KAAA,gBACA,KAAA,KAAA,MAAA,KAAA,KAAA,IAEA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AACA,aAAA,KAAA,SAGAC,EAAA,KAAA,MAAA,KAAA,MAAA,IAFA,CAAA;AAAA,IAGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,aAAA;AACA,aAAA,KAAA,WAAA,IAAA,CAAAC,OACA;AAAA,QACA,OAAAA,EAAA,QAAA,KAAA;AAAA,QACA,KAAAA,EAAA,MAAA,KAAA;AAAA,MACA,EACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}