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

package/dist/Components/NcBreadcrumb.mjs

@@ -1,40 +1,180 @@
-import "../assets/index-bf10e8e1.css";
-import n from "./NcActions.mjs";
-import { G as a } from "../chunks/GenRandomId-1e1b509a.mjs";
-import o from "vue-material-design-icons/ChevronRight.vue";
-import { n as i } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
-const s = { name: "NcBreadcrumb", components: { NcActions: n, ChevronRight: o }, props: { name: { type: String, required: !0 }, title: { type: String, default: null }, to: { type: [String, Object], default: void 0 }, exact: { type: Boolean, default: !1 }, href: { type: String, default: void 0 }, icon: { type: String, default: "" }, disableDrop: { type: Boolean, default: !1 }, forceMenu: { type: Boolean, default: !1 }, open: { type: Boolean, default: !1 } }, emits: ["update:open", "dropped"], data() {
-  return { hovering: !1, crumbId: `crumb-id-${a()}` };
-}, computed: { tag() {
-  return this.to ? "router-link" : "a";
-}, linkAttributes() {
-  return this.to ? { to: this.to, exact: this.exact, ...this.$attrs } : { href: this.href, ...this.$attrs };
-} }, methods: { onOpenChange(t) {
-  this.$emit("update:open", t);
-}, dropped(t) {
-  return this.disableDrop || (this.$emit("dropped", t, this.to || this.href), this.$parent.$emit("dropped", t, this.to || this.href), this.hovering = !1), !1;
-}, dragEnter(t) {
-  this.disableDrop || (this.hovering = !0);
-}, dragLeave(t) {
-  this.disableDrop || t.target.contains(t.relatedTarget) || this.$refs.crumb.contains(t.relatedTarget) || (this.hovering = !1);
-} } };
-var u = function() {
-  var t = this, e = t._self._c;
-  return e("li", t._b({ ref: "crumb", staticClass: "vue-crumb", class: { "vue-crumb--hovered": t.hovering }, attrs: { draggable: "false" }, on: { dragstart: function(r) {
-    return r.preventDefault(), (() => {
+import "../assets/index-b991895f.css";
+import a from "./NcActions.mjs";
+import { G as o } from "../chunks/GenRandomId-cb9ccebe.mjs";
+import s from "vue-material-design-icons/ChevronRight.vue";
+import { n as i } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const u = {
+  name: "NcBreadcrumb",
+  components: {
+    NcActions: a,
+    ChevronRight: s
+  },
+  props: {
+    /**
+     * The main text content of the entry.
+     */
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The title attribute of the element.
+     */
+    title: {
+      type: String,
+      default: null
+    },
+    /**
+     * Route Location the link should navigate to when clicked on.
+     *
+     * @see https://v3.router.vuejs.org/api/#to
+     */
+    to: {
+      type: [String, Object],
+      default: void 0
+    },
+    /**
+     * Match the complete route attributes (query and hash included)
+     *
+     * @see https://v3.router.vuejs.org/api/#exact
+     */
+    exact: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Set this prop if your app doesn't use vue-router, breadcrumbs will show as normal links.
+     */
+    href: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set a css icon-class to show an icon instead of the name text.
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Disable dropping on this breadcrumb.
+     */
+    disableDrop: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Force the actions to display in a three dot menu
+     */
+    forceMenu: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Open state of the Actions menu
+     */
+    open: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "update:open",
+    "dropped"
+  ],
+  data() {
+    return {
+      /**
+       * Variable to track if we hover over the breadcrumb
+       */
+      hovering: !1,
+      /**
+       * The unique id of the breadcrumb. Necessary to append the
+       * Actions menu to the correct crumb.
+       */
+      crumbId: `crumb-id-${o()}`
+    };
+  },
+  computed: {
+    /**
+     * Determines which element tag to use
+     *
+     * @return {string} the tag
+     */
+    tag() {
+      return this.to ? "router-link" : "a";
+    },
+    /**
+     * The attributes to pass to `router-link` or `a`
+     */
+    linkAttributes() {
+      return this.to ? { to: this.to, exact: this.exact, ...this.$attrs } : { href: this.href, ...this.$attrs };
+    }
+  },
+  methods: {
+    /**
+     * Function to handle changing the open state of the Actions menu
+     * $emit the open state.
+     *
+     * @param {boolean} open The open state of the Actions menu
+     */
+    onOpenChange(t) {
+      this.$emit("update:open", t);
+    },
+    /**
+     * Function to handle a drop on the breadcrumb.
+     * $emit the event and the path, remove the hovering state.
+     *
+     * @param {object} e The drop event
+     * @return {boolean}
+     */
+    dropped(t) {
+      return this.disableDrop || (this.$emit("dropped", t, this.to || this.href), this.$parent.$emit("dropped", t, this.to || this.href), this.hovering = !1), !1;
+    },
+    /**
+     * Add the hovering state on drag enter
+     *
+     * @param {object} e The drag enter event
+     */
+    dragEnter(t) {
+      this.disableDrop || (this.hovering = !0);
+    },
+    /**
+     * Remove the hovering state on drag leave
+     *
+     * @param {object} e The drag leave event
+     */
+    dragLeave(t) {
+      this.disableDrop || t.target.contains(t.relatedTarget) || this.$refs.crumb.contains(t.relatedTarget) || (this.hovering = !1);
+    }
+  }
+};
+var l = function() {
+  var e = this, r = e._self._c;
+  return r("li", e._b({ ref: "crumb", staticClass: "vue-crumb", class: { "vue-crumb--hovered": e.hovering }, attrs: { draggable: "false" }, on: { dragstart: function(n) {
+    return n.preventDefault(), (() => {
     }).apply(null, arguments);
-  }, drop: function(r) {
-    return r.preventDefault(), t.dropped.apply(null, arguments);
-  }, dragover: function(r) {
-    return r.preventDefault(), (() => {
+  }, drop: function(n) {
+    return n.preventDefault(), e.dropped.apply(null, arguments);
+  }, dragover: function(n) {
+    return n.preventDefault(), (() => {
     }).apply(null, arguments);
-  }, dragenter: t.dragEnter, dragleave: t.dragLeave } }, "li", t._d({}, [t.crumbId, ""])), [(t.name || t.icon) && !t.$slots.default ? e(t.tag, t._g(t._b({ tag: "component", attrs: { title: t.title } }, "component", t.linkAttributes, !1), t.$listeners), [t._t("icon", function() {
-    return [t.icon ? e("span", { staticClass: "icon", class: t.icon }) : e("span", [t._v(t._s(t.name))])];
-  })], 2) : t._e(), t.$slots.default ? e("NcActions", { ref: "actions", attrs: { type: "tertiary", "force-menu": t.forceMenu, open: t.open, "menu-name": t.name, title: t.title, "force-name": !0, container: `.vue-crumb[${t.crumbId}]` }, on: { "update:open": t.onOpenChange }, scopedSlots: t._u([{ key: "icon", fn: function() {
-    return [t._t("menu-icon")];
-  }, proxy: !0 }], null, !0) }, [t._t("default")], 2) : t._e(), e("ChevronRight", { staticClass: "vue-crumb__separator", attrs: { size: 20 } })], 1);
-}, l = [], p = i(s, u, l, !1, null, "2e235682", null, null);
-const g = p.exports;
+  }, dragenter: e.dragEnter, dragleave: e.dragLeave } }, "li", e._d({}, [e.crumbId, ""])), [(e.name || e.icon) && !e.$slots.default ? r(e.tag, e._g(e._b({ tag: "component", attrs: { title: e.title } }, "component", e.linkAttributes, !1), e.$listeners), [e._t("icon", function() {
+    return [e.icon ? r("span", { staticClass: "icon", class: e.icon }) : r("span", [e._v(e._s(e.name))])];
+  })], 2) : e._e(), e.$slots.default ? r("NcActions", { ref: "actions", attrs: { type: "tertiary", "force-menu": e.forceMenu, open: e.open, "menu-name": e.name, title: e.title, "force-name": !0, container: `.vue-crumb[${e.crumbId}]` }, on: { "update:open": e.onOpenChange }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [e._t("menu-icon")];
+  }, proxy: !0 }], null, !0) }, [e._t("default")], 2) : e._e(), r("ChevronRight", { staticClass: "vue-crumb__separator", attrs: { size: 20 } })], 1);
+}, p = [], c = /* @__PURE__ */ i(
+  u,
+  l,
+  p,
+  !1,
+  null,
+  "2e235682",
+  null,
+  null
+);
+const g = c.exports;
 export {
   g as default
 };

package/dist/Components/NcBreadcrumb.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcBreadcrumb.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcBreadcrumb.mjs","sources":["../../src/components/NcBreadcrumb/NcBreadcrumb.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2020 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\n\n### General description\n\nThis component is meant to be used inside a Breadcrumbs component.\n\n</docs>\n\n<template>\n\t<li ref=\"crumb\"\n\t\tclass=\"vue-crumb\"\n\t\t:class=\"{'vue-crumb--hovered': hovering}\"\n\t\t:[crumbId]=\"''\"\n\t\tdraggable=\"false\"\n\t\t@dragstart.prevent=\"() => {/** Prevent the breadcrumb from being draggable. */}\"\n\t\t@drop.prevent=\"dropped\"\n\t\t@dragover.prevent=\"() => {}\"\n\t\t@dragenter=\"dragEnter\"\n\t\t@dragleave=\"dragLeave\">\n\t\t<component :is=\"tag\"\n\t\t\tv-if=\"(name || icon) && !$slots.default\"\n\t\t\t:title=\"title\"\n\t\t\tv-bind=\"linkAttributes\"\n\t\t\tv-on=\"$listeners\">\n\t\t\t<!-- @slot Slot for passing a material design icon. Precedes the icon and name prop. -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span v-if=\"icon\" :class=\"icon\" class=\"icon\" />\n\t\t\t\t<span v-else>{{ name }}</span>\n\t\t\t</slot>\n\t\t</component>\n\t\t<NcActions v-if=\"$slots.default\"\n\t\t\tref=\"actions\"\n\t\t\ttype=\"tertiary\"\n\t\t\t:force-menu=\"forceMenu\"\n\t\t\t:open=\"open\"\n\t\t\t:menu-name=\"name\"\n\t\t\t:title=\"title\"\n\t\t\t:force-name=\"true\"\n\t\t\t:container=\"`.vue-crumb[${crumbId}]`\"\n\t\t\t@update:open=\"onOpenChange\">\n\t\t\t<template #icon>\n\t\t\t\t<!-- @slot Slot for the custom menu icon -->\n\t\t\t\t<slot name=\"menu-icon\" />\n\t\t\t</template>\n\t\t\t<!-- @slot All action elements passed into the default slot will be used -->\n\t\t\t<slot />\n\t\t</NcActions>\n\t\t<ChevronRight class=\"vue-crumb__separator\" :size=\"20\" />\n\t</li>\n</template>\n\n<script>\nimport NcActions from '../NcActions/index.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ChevronRight from 'vue-material-design-icons/ChevronRight.vue'\n\nexport default {\n\tname: 'NcBreadcrumb',\n\tcomponents: {\n\t\tNcActions,\n\t\tChevronRight,\n\t},\n\tprops: {\n\t\t/**\n\t\t * The main text content of the entry.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The title attribute of the element.\n\t\t */\n\t\ttitle: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Route Location the link should navigate to when clicked on.\n\t\t *\n\t\t * @see https://v3.router.vuejs.org/api/#to\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Match the complete route attributes (query and hash included)\n\t\t *\n\t\t * @see https://v3.router.vuejs.org/api/#exact\n\t\t */\n\t\texact: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Set this prop if your app doesn't use vue-router, breadcrumbs will show as normal links.\n\t\t */\n\t\thref: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Set a css icon-class to show an icon instead of the name text.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disable dropping on this breadcrumb.\n\t\t */\n\t\tdisableDrop: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Force the actions to display in a three dot menu\n\t\t */\n\t\tforceMenu: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Open state of the Actions menu\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\temits: [\n\t\t'update:open',\n\t\t'dropped',\n\t],\n\tdata() {\n\t\treturn {\n\t\t\t/**\n\t\t\t * Variable to track if we hover over the breadcrumb\n\t\t\t */\n\t\t\thovering: false,\n\t\t\t/**\n\t\t\t * The unique id of the breadcrumb. Necessary to append the\n\t\t\t * Actions menu to the correct crumb.\n\t\t\t */\n\t\t\tcrumbId: `crumb-id-${GenRandomId()}`,\n\t\t}\n\t},\n\tcomputed: {\n\t\t/**\n\t\t * Determines which element tag to use\n\t\t *\n\t\t * @return {string} the tag\n\t\t */\n\t\ttag() {\n\t\t\treturn this.to ? 'router-link' : 'a'\n\t\t},\n\n\t\t/**\n\t\t * The attributes to pass to `router-link` or `a`\n\t\t */\n\t\tlinkAttributes() {\n\t\t\t// If it's a router-link, we pass `to` and `exact`, otherwise only `href`\n\t\t\treturn this.to ? { to: this.to, exact: this.exact, ...this.$attrs } : { href: this.href, ...this.$attrs }\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Function to handle changing the open state of the Actions menu\n\t\t * $emit the open state.\n\t\t *\n\t\t * @param {boolean} open The open state of the Actions menu\n\t\t */\n\t\tonOpenChange(open) {\n\t\t\t/**\n\t\t\t * Event emitted when the open state of the Actions menu changes\n\t\t\t *\n\t\t\t * @type {null}\n\t\t\t */\n\t\t\tthis.$emit('update:open', open)\n\t\t},\n\t\t/**\n\t\t * Function to handle a drop on the breadcrumb.\n\t\t * $emit the event and the path, remove the hovering state.\n\t\t *\n\t\t * @param {object} e The drop event\n\t\t * @return {boolean}\n\t\t */\n\t\tdropped(e) {\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\t/**\n\t\t\t * Event emitted when something is dropped on the breadcrumb.\n\t\t\t *\n\t\t\t * @param {Event} event The DOM drop event\n\t\t\t * @param {(string|object)} to The `to` prop or, if not set, the `href` prop\n\t\t\t */\n\t\t\tthis.$emit('dropped', e, this.to || this.href)\n\t\t\tthis.$parent.$emit('dropped', e, this.to || this.href)\n\t\t\tthis.hovering = false\n\t\t\treturn false\n\t\t},\n\t\t/**\n\t\t * Add the hovering state on drag enter\n\t\t *\n\t\t * @param {object} e The drag enter event\n\t\t */\n\t\tdragEnter(e) {\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hovering = true\n\t\t},\n\t\t/**\n\t\t * Remove the hovering state on drag leave\n\t\t *\n\t\t * @param {object} e The drag leave event\n\t\t */\n\t\tdragLeave(e) {\n\t\t\t/**\n\t\t\t * Don't do anything if dropping is disabled.\n\t\t\t */\n\t\t\tif (this.disableDrop) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\t// Don't do anything if we\n\t\t\t// - leave towards a child element.\n\t\t\t// - or are still within the crumb\n\t\t\tif (e.target.contains(e.relatedTarget)\n\t\t\t\t|| this.$refs.crumb.contains(e.relatedTarget)) {\n\t\t\t\treturn\n\t\t\t}\n\t\t\tthis.hovering = false\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.vue-crumb {\n\tbackground-image: none;\n\tdisplay: inline-flex;\n\theight: $clickable-area;\n\tpadding: 0;\n\n\t&:last-child {\n\t\tmax-width: 210px;\n\t\tfont-weight: bold;\n\n\t\t// Don't show breadcrumb separator for last crumb\n\t\t.vue-crumb__separator {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t// Hover and focus effect for crumbs\n\t& > a:hover,\n\t& > a:focus {\n\t\tbackground-color: var(--color-background-dark);\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t&--hidden {\n\t\tdisplay: none;\n\t}\n\n\t&#{&}--hovered > a {\n\t\tbackground-color: var(--color-background-dark);\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t&__separator {\n\t\tpadding: 0;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t> a {\n\t\toverflow: hidden;\n\t\tcolor: var(--color-text-maxcontrast);\n\t\tpadding: 12px;\n\t\tmin-width: $clickable-area;\n\t\tmax-width: 100%;\n\t\tborder-radius: var(--border-radius-pill);\n\t\talign-items: center;\n\t\tdisplay: inline-flex;\n\t\tjustify-content: center;\n\n\t\t> span {\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t}\n\n\t// Adjust action item appearance for crumbs with actions\n\t// to match other crumbs\n\t&:not(.dropdown) :deep(.action-item) {\n\t\t// Adjustments necessary to correctly shrink on small screens\n\t\tmax-width: 100%;\n\n\t\t.button-vue {\n\t\t\tpadding: 0 4px 0 16px;\n\n\t\t\t&__wrapper {\n\t\t\t\tflex-direction: row-reverse;\n\t\t\t}\n\t\t}\n\n\t\t// Adjust the background of the last crumb when the action is open\n\t\t&.action-item--open .action-item__menutoggle {\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcActions","ChevronRight","GenRandomId","open","e"],"mappings":";;;;;AA+EA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,IAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AACA,WAAA;AAAA;AAAA;AAAA;AAAA,MAIA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,SAAA,YAAAC,EAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AACA,aAAA,KAAA,KAAA,gBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAEA,aAAA,KAAA,KAAA,EAAA,IAAA,KAAA,IAAA,OAAA,KAAA,OAAA,GAAA,KAAA,OAAA,IAAA,EAAA,MAAA,KAAA,MAAA,GAAA,KAAA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAAC,GAAA;AAMA,WAAA,MAAA,eAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,QAAAC,GAAA;AAIA,aAAA,KAAA,gBASA,KAAA,MAAA,WAAAA,GAAA,KAAA,MAAA,KAAA,IAAA,GACA,KAAA,QAAA,MAAA,WAAAA,GAAA,KAAA,MAAA,KAAA,IAAA,GACA,KAAA,WAAA,KACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAAA,GAAA;AAIA,MAAA,KAAA,gBAGA,KAAA,WAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAAA,GAAA;AAIA,MAAA,KAAA,eAMAA,EAAA,OAAA,SAAAA,EAAA,aAAA,KACA,KAAA,MAAA,MAAA,SAAAA,EAAA,aAAA,MAGA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcBreadcrumbs.cjs

@@ -1 +1,372 @@
-var T=require("../assets/index-7a7195d0.css");const L=require("./NcActions.cjs"),B=require("./NcActionButton.cjs"),y=require("./NcActionRouter.cjs"),D=require("./NcActionLink.cjs"),q=require("./NcBreadcrumb.cjs"),p=require("vue"),b=require("@nextcloud/event-bus"),R=require("vue-material-design-icons/Folder.vue"),W=require("debounce"),w=require("vue-frag"),z=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs"),g=(e,t,s)=>{if(e!==void 0)for(let o=e.length-1;o>=0;o--){const a=e[o],r=!a.componentOptions&&a.tag&&t.indexOf(a.tag)===-1,n=!!a.componentOptions&&typeof a.componentOptions.tag=="string",c=n&&t.indexOf(a.componentOptions.tag)===-1;(r||!n||c)&&((r||c)&&p.util.warn(`${r?a.tag:a.componentOptions.tag} is not allowed inside the ${s.$options.name} component`,s),e.splice(o,1))}};const i="vue-crumb",N={name:"NcBreadcrumbs",components:{NcActions:L,NcActionButton:B,NcActionRouter:y,NcActionLink:D,NcBreadcrumb:q,IconFolder:R},props:{rootIcon:{type:String,default:"icon-home"}},emits:["dropped"],data(){return{hiddenIndices:[],menuBreadcrumbProps:{name:"",forceMenu:!0,disableDrop:!0,open:!1},breadcrumbsRefs:{}}},beforeMount(){g(this.$slots.default,["NcBreadcrumb"],this)},beforeUpdate(){g(this.$slots.default,["NcBreadcrumb"],this)},created(){window.addEventListener("resize",W(()=>{this.handleWindowResize()},100)),b.subscribe("navigation-toggled",this.delayedResize)},mounted(){this.handleWindowResize()},updated(){this.delayedResize(),this.$nextTick(()=>{this.hideCrumbs()})},beforeDestroy(){window.removeEventListener("resize",this.handleWindowResize),b.unsubscribe("navigation-toggled",this.delayedResize)},methods:{closeActions(e){this.$refs.actionsBreadcrumb.$el.contains(e.relatedTarget)||(this.menuBreadcrumbProps.open=!1)},async delayedResize(){await this.$nextTick(),this.handleWindowResize()},handleWindowResize(){var d;if(!this.$refs.container)return;const e=Object.values(this.breadcrumbsRefs),t=e.length,s=[],o=this.$refs.container.offsetWidth;let a=this.getTotalWidth(e);this.$refs.breadcrumb__actions&&(a+=this.$refs.breadcrumb__actions.offsetWidth);let r=a-o;r+=r>0?64:0;let n=0;const c=Math.floor(t/2);for(;r>0&&n<t-2;){const l=c+(n%2?n+1:n)/2*Math.pow(-1,n+t%2);r-=this.getWidth((d=e[l])==null?void 0:d.elm),s.push(l),n++}this.arraysEqual(this.hiddenIndices,s.sort((l,u)=>l-u))||(this.hiddenIndices=s)},arraysEqual(e,t){if(e.length!==t.length)return!1;if(e===t)return!0;if(e===null||t===null)return!1;for(let s=0;s<e.length;++s)if(e[s]!==t[s])return!1;return!0},getTotalWidth(e){return e.reduce((t,s,o)=>t+this.getWidth(s==null?void 0:s.elm),0)},getWidth(e){if(!(e!=null&&e.classList))return 0;const t=e.classList.contains(`${i}--hidden`);e.style.minWidth="auto",e.classList.remove(`${i}--hidden`);const s=e.offsetWidth;return t&&e.classList.add(`${i}--hidden`),e.style.minWidth="",s},preventDefault(e){return e.preventDefault&&e.preventDefault(),!1},dragStart(e){return this.preventDefault(e)},dropped(e,t,s){return s||this.$emit("dropped",e,t),this.menuBreadcrumbProps.open=!1,document.querySelectorAll(`.${i}`).forEach(o=>{o.classList.remove(`${i}--hovered`)}),this.preventDefault(e)},dragOver(e){return this.preventDefault(e)},dragEnter(e,t){if(!t&&e.target.closest){const s=e.target.closest(`.${i}`);s.classList&&s.classList.contains(i)&&(document.querySelectorAll(`.${i}`).forEach(o=>{o.classList.remove(`${i}--hovered`)}),s.classList.add(`${i}--hovered`))}},dragLeave(e,t){if(!t&&!e.target.contains(e.relatedTarget)&&e.target.closest){const s=e.target.closest(`.${i}`);if(s.contains(e.relatedTarget))return;s.classList&&s.classList.contains(i)&&s.classList.remove(`${i}--hovered`)}},hideCrumbs(){Object.values(this.breadcrumbsRefs).forEach((e,t)=>{var s;(s=e==null?void 0:e.elm)!=null&&s.classList&&(this.hiddenIndices.includes(t)?e.elm.classList.add(`${i}--hidden`):e.elm.classList.remove(`${i}--hidden`))})},isBreadcrumb(e){var t;return(((t=e==null?void 0:e.componentOptions)==null?void 0:t.tag)||(e==null?void 0:e.tag)||"").includes("NcBreadcrumb")}},render(e){const t=[];if(this.$slots.default.forEach(r=>{var n,c;if(this.isBreadcrumb(r)){t.push(r);return}(r==null?void 0:r.type)===w.Fragment&&((c=(n=r==null?void 0:r.children)==null?void 0:n.forEach)==null||c.call(n,d=>{this.isBreadcrumb(d)&&t.push(d)}))}),t.length===0)return;p.set(t[0].componentOptions.propsData,"icon",this.rootIcon),p.set(t[0].componentOptions.propsData,"ref","breadcrumbs");const s={};t.forEach((r,n)=>{p.set(r,"ref",`crumb-${n}`),s[n]=r});let o=[];if(!this.hiddenIndices.length)o=t;else{o=t.slice(0,Math.round(t.length/2)),o.push(e("NcBreadcrumb",{class:"dropdown",props:this.menuBreadcrumbProps,attrs:{"aria-hidden":!0},ref:"actionsBreadcrumb",key:"actions-breadcrumb-1",nativeOn:{dragstart:this.dragStart,dragenter:()=>{this.menuBreadcrumbProps.open=!0},dragleave:this.closeActions},on:{"update:open":n=>{this.menuBreadcrumbProps.open=n}}},this.hiddenIndices.map(n=>{const c=t[n],d=c.componentOptions.propsData.to,l=c.componentOptions.propsData.href,u=c.componentOptions.propsData.disableDrop,v=c.componentOptions.propsData.title,$=c.componentOptions.propsData.name;let m="NcActionButton",f="";l&&(m="NcActionLink",f=l),d&&(m="NcActionRouter",f=d);const O=e("IconFolder",{props:{size:20},slot:"icon"});return e(m,{class:i,props:{href:l||null,title:v,to:d||null},attrs:{draggable:!1},on:{...c.componentOptions.listeners},nativeOn:{dragstart:this.dragStart,drop:h=>this.dropped(h,f,u),dragover:this.dragOver,dragenter:h=>this.dragEnter(h,u),dragleave:h=>this.dragLeave(h,u)}},[O,$])})));const r=t.slice(Math.round(t.length/2));o=o.concat(r)}const a=[e("nav",{},[e("ul",{class:"breadcrumb__crumbs"},[o])])];return this.$slots.actions&&a.push(e("div",{class:"breadcrumb__actions",ref:"breadcrumb__actions"},this.$slots.actions)),this.breadcrumbsRefs=s,e("div",{class:["breadcrumb",{"breadcrumb--collapsed":this.hiddenIndices.length===t.length-2}],ref:"container"},a)}},E=null,A=null;var I=z.normalizeComponent(N,E,A,!1,null,"e809461d",null,null);const _=I.exports;module.exports=_;
+var S = require("../assets/index-4611417f.css");
+const O = require("./NcActions.cjs"), v = require("./NcActionButton.cjs"), N = require("./NcActionRouter.cjs"), y = require("./NcActionLink.cjs"), R = require("./NcBreadcrumb.cjs"), w = require("vue"), g = require("@nextcloud/event-bus"), D = require("vue-material-design-icons/Folder.vue"), I = require("debounce"), W = require("vue-frag"), q = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), b = (e) => e && e.__esModule ? e : { default: e }, p = /* @__PURE__ */ b(w), A = /* @__PURE__ */ b(D), z = /* @__PURE__ */ b(I);
+/**
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+const _ = (e, t, s) => {
+  if (e !== void 0)
+    for (let i = e.length - 1; i >= 0; i--) {
+      const o = e[i], r = !o.componentOptions && o.tag && t.indexOf(o.tag) === -1, n = !!o.componentOptions && typeof o.componentOptions.tag == "string", c = n && t.indexOf(o.componentOptions.tag) === -1;
+      (r || !n || c) && ((r || c) && p.default.util.warn(`${r ? o.tag : o.componentOptions.tag} is not allowed inside the ${s.$options.name} component`, s), e.splice(i, 1));
+    }
+};
+const a = "vue-crumb", E = {
+  name: "NcBreadcrumbs",
+  components: {
+    NcActions: O,
+    NcActionButton: v,
+    NcActionRouter: N,
+    NcActionLink: y,
+    NcBreadcrumb: R,
+    IconFolder: A.default
+  },
+  props: {
+    /**
+     * Set a css icon-class for the icon of the root breadcrumb to be used.
+     */
+    rootIcon: {
+      type: String,
+      default: "icon-home"
+    }
+  },
+  emits: ["dropped"],
+  data() {
+    return {
+      /**
+       * Array to track the hidden breadcrumbs by their index.
+       * Comparing two crumbs somehow does not work, so we use the indices.
+       */
+      hiddenIndices: [],
+      /**
+       * This is the props of the middle Action menu
+       * that show the ellipsised breadcrumbs
+       */
+      menuBreadcrumbProps: {
+        // Don't show a name for this breadcrumb, only the Actions menu
+        name: "",
+        forceMenu: !0,
+        // Don't allow dropping directly on the actions breadcrumb
+        disableDrop: !0,
+        // Is the menu open or not
+        open: !1
+      },
+      breadcrumbsRefs: {}
+    };
+  },
+  beforeMount() {
+    _(this.$slots.default, ["NcBreadcrumb"], this);
+  },
+  beforeUpdate() {
+    _(this.$slots.default, ["NcBreadcrumb"], this);
+  },
+  created() {
+    window.addEventListener("resize", z.default(() => {
+      this.handleWindowResize();
+    }, 100)), g.subscribe("navigation-toggled", this.delayedResize);
+  },
+  mounted() {
+    this.handleWindowResize();
+  },
+  updated() {
+    this.delayedResize(), this.$nextTick(() => {
+      this.hideCrumbs();
+    });
+  },
+  beforeDestroy() {
+    window.removeEventListener("resize", this.handleWindowResize), g.unsubscribe("navigation-toggled", this.delayedResize);
+  },
+  methods: {
+    /**
+     * Close the actions menu
+     *
+     * @param {object} e The event
+     */
+    closeActions(e) {
+      this.$refs.actionsBreadcrumb.$el.contains(e.relatedTarget) || (this.menuBreadcrumbProps.open = !1);
+    },
+    /**
+     * Call the resize function after a delay
+     */
+    async delayedResize() {
+      await this.$nextTick(), this.handleWindowResize();
+    },
+    /**
+     * Check the width of the breadcrumb and hide breadcrumbs
+     * if we overflow otherwise.
+     */
+    handleWindowResize() {
+      var d;
+      if (!this.$refs.container)
+        return;
+      const e = Object.values(this.breadcrumbsRefs), t = e.length, s = [], i = this.$refs.container.offsetWidth;
+      let o = this.getTotalWidth(e);
+      this.$refs.breadcrumb__actions && (o += this.$refs.breadcrumb__actions.offsetWidth);
+      let r = o - i;
+      r += r > 0 ? 64 : 0;
+      let n = 0;
+      const c = Math.floor(t / 2);
+      for (; r > 0 && n < t - 2; ) {
+        const u = c + (n % 2 ? n + 1 : n) / 2 * Math.pow(-1, n + t % 2);
+        r -= this.getWidth((d = e[u]) == null ? void 0 : d.elm), s.push(u), n++;
+      }
+      this.arraysEqual(this.hiddenIndices, s.sort((u, l) => u - l)) || (this.hiddenIndices = s);
+    },
+    /**
+     * Checks if two arrays are equal.
+     * Only works for primitive arrays, but that's enough here.
+     *
+     * @param {Array} a The first array
+     * @param {Array} b The second array
+     * @return {boolean} Wether the arrays are equal
+     */
+    arraysEqual(e, t) {
+      if (e.length !== t.length)
+        return !1;
+      if (e === t)
+        return !0;
+      if (e === null || t === null)
+        return !1;
+      for (let s = 0; s < e.length; ++s)
+        if (e[s] !== t[s])
+          return !1;
+      return !0;
+    },
+    /**
+     * Calculates the total width of all breadcrumbs
+     *
+     * @param {Array} breadcrumbs All breadcrumbs
+     * @return {number} The total width
+     */
+    getTotalWidth(e) {
+      return e.reduce((t, s, i) => t + this.getWidth(s == null ? void 0 : s.elm), 0);
+    },
+    /**
+     * Calculates the width of the provided element
+     *
+     * @param {object} el The element
+     * @return {number} The width
+     */
+    getWidth(e) {
+      if (!(e != null && e.classList))
+        return 0;
+      const t = e.classList.contains(`${a}--hidden`);
+      e.style.minWidth = "auto", e.classList.remove(`${a}--hidden`);
+      const s = e.offsetWidth;
+      return t && e.classList.add(`${a}--hidden`), e.style.minWidth = "", s;
+    },
+    /**
+     * Prevents the default of a provided event
+     *
+     * @param {object} e The event
+     * @return {boolean}
+     */
+    preventDefault(e) {
+      return e.preventDefault && e.preventDefault(), !1;
+    },
+    /**
+     * Handles the drag start.
+     * Prevents a breadcrumb from being draggable.
+     *
+     * @param {object} e The event
+     * @return {boolean}
+     */
+    dragStart(e) {
+      return this.preventDefault(e);
+    },
+    /**
+     * Handles when something is dropped on the breadcrumb.
+     *
+     * @param {object} e The drop event
+     * @param {string} path The path of the breadcrumb
+     * @param {boolean} disabled Whether dropping is disabled for this breadcrumb
+     * @return {boolean}
+     */
+    dropped(e, t, s) {
+      return s || this.$emit("dropped", e, t), this.menuBreadcrumbProps.open = !1, document.querySelectorAll(`.${a}`).forEach((o) => {
+        o.classList.remove(`${a}--hovered`);
+      }), this.preventDefault(e);
+    },
+    /**
+     * Handles the drag over event
+     *
+     * @param {object} e The drag over event
+     * @return {boolean}
+     */
+    dragOver(e) {
+      return this.preventDefault(e);
+    },
+    /**
+     * Handles the drag enter event
+     *
+     * @param {object} e The drag over event
+     * @param {boolean} disabled Whether dropping is disabled for this breadcrumb
+     */
+    dragEnter(e, t) {
+      if (!t && e.target.closest) {
+        const s = e.target.closest(`.${a}`);
+        s.classList && s.classList.contains(a) && (document.querySelectorAll(`.${a}`).forEach((o) => {
+          o.classList.remove(`${a}--hovered`);
+        }), s.classList.add(`${a}--hovered`));
+      }
+    },
+    /**
+     * Handles the drag leave event
+     *
+     * @param {object} e The drag leave event
+     * @param {boolean} disabled Whether dropping is disabled for this breadcrumb
+     */
+    dragLeave(e, t) {
+      if (!t && !e.target.contains(e.relatedTarget) && e.target.closest) {
+        const s = e.target.closest(`.${a}`);
+        if (s.contains(e.relatedTarget))
+          return;
+        s.classList && s.classList.contains(a) && s.classList.remove(`${a}--hovered`);
+      }
+    },
+    /**
+     * Check for each crumb if we have to hide it and
+     * add it to the array of all crumbs.
+     */
+    hideCrumbs() {
+      Object.values(this.breadcrumbsRefs).forEach((t, s) => {
+        var i;
+        (i = t == null ? void 0 : t.elm) != null && i.classList && (this.hiddenIndices.includes(s) ? t.elm.classList.add(`${a}--hidden`) : t.elm.classList.remove(`${a}--hidden`));
+      });
+    },
+    isBreadcrumb(e) {
+      var t;
+      return (((t = e == null ? void 0 : e.componentOptions) == null ? void 0 : t.tag) || (e == null ? void 0 : e.tag) || "").includes("NcBreadcrumb");
+    }
+  },
+  /**
+   * The render function to display the component
+   *
+   * @param {Function} h The function to create VNodes
+   * @return {object|undefined} The created VNode
+   */
+  render(e) {
+    const t = [];
+    if (this.$slots.default.forEach((r) => {
+      var n, c;
+      if (this.isBreadcrumb(r)) {
+        t.push(r);
+        return;
+      }
+      (r == null ? void 0 : r.type) === W.Fragment && ((c = (n = r == null ? void 0 : r.children) == null ? void 0 : n.forEach) == null || c.call(n, (d) => {
+        this.isBreadcrumb(d) && t.push(d);
+      }));
+    }), t.length === 0)
+      return;
+    p.default.set(t[0].componentOptions.propsData, "icon", this.rootIcon), p.default.set(t[0].componentOptions.propsData, "ref", "breadcrumbs");
+    const s = {};
+    t.forEach((r, n) => {
+      p.default.set(r, "ref", `crumb-${n}`), s[n] = r;
+    });
+    let i = [];
+    if (!this.hiddenIndices.length)
+      i = t;
+    else {
+      i = t.slice(0, Math.round(t.length / 2)), i.push(
+        e("NcBreadcrumb", {
+          class: "dropdown",
+          props: this.menuBreadcrumbProps,
+          attrs: {
+            // Hide the dropdown menu from screen-readers,
+            // since the crumbs in the menu are still in the list.
+            "aria-hidden": !0
+          },
+          // Add a ref to the Actions menu
+          ref: "actionsBreadcrumb",
+          key: "actions-breadcrumb-1",
+          // Add handlers so the Actions menu opens on hover
+          nativeOn: {
+            dragstart: this.dragStart,
+            dragenter: () => {
+              this.menuBreadcrumbProps.open = !0;
+            },
+            dragleave: this.closeActions
+          },
+          on: {
+            // Make sure we keep the same open state
+            // as the Actions component
+            "update:open": (n) => {
+              this.menuBreadcrumbProps.open = n;
+            }
+          }
+          // Add all hidden breadcrumbs as ActionRouter or ActionLink
+        }, this.hiddenIndices.map((n) => {
+          const c = t[n], d = c.componentOptions.propsData.to, u = c.componentOptions.propsData.href, l = c.componentOptions.propsData.disableDrop, $ = c.componentOptions.propsData.title, B = c.componentOptions.propsData.name;
+          let f = "NcActionButton", m = "";
+          u && (f = "NcActionLink", m = u), d && (f = "NcActionRouter", m = d);
+          const L = e("IconFolder", {
+            props: {
+              size: 20
+            },
+            slot: "icon"
+          });
+          return e(
+            f,
+            {
+              class: a,
+              props: {
+                href: u || null,
+                title: $,
+                to: d || null
+              },
+              // Prevent the breadcrumbs from being draggable
+              attrs: {
+                draggable: !1
+              },
+              on: {
+                ...c.componentOptions.listeners
+              },
+              // Add the drag and drop handlers
+              nativeOn: {
+                dragstart: this.dragStart,
+                drop: (h) => this.dropped(h, m, l),
+                dragover: this.dragOver,
+                dragenter: (h) => this.dragEnter(h, l),
+                dragleave: (h) => this.dragLeave(h, l)
+              }
+            },
+            [L, B]
+          );
+        }))
+      );
+      const r = t.slice(Math.round(t.length / 2));
+      i = i.concat(r);
+    }
+    const o = [e("nav", {}, [e("ul", { class: "breadcrumb__crumbs" }, [i])])];
+    return this.$slots.actions && o.push(e("div", { class: "breadcrumb__actions", ref: "breadcrumb__actions" }, this.$slots.actions)), this.breadcrumbsRefs = s, e("div", { class: ["breadcrumb", { "breadcrumb--collapsed": this.hiddenIndices.length === t.length - 2 }], ref: "container" }, o);
+  }
+}, C = null, x = null;
+var F = /* @__PURE__ */ q.normalizeComponent(
+  E,
+  C,
+  x,
+  !1,
+  null,
+  "acf0dd35",
+  null,
+  null
+);
+const M = F.exports;
+module.exports = M;