@nextcloud/vue 8.4.0 → 9.0.0-alpha.0

package/dist/chunks/NcBreadcrumb-X45pwcLq.cjs

@@ -0,0 +1,208 @@
+var y = require("../assets/NcBreadcrumb-ZsIS1jDx.css");
+const u = require("./NcActions-VJy75Dj8.cjs"), c = require("./GenRandomId-ULxaMkkr.cjs"), m = require("./NcButton-Uxh-oARg.cjs"), f = require("./ChevronRight-iDcqZ2Ih.cjs"), e = require("vue"), h = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), p = {
+  name: "NcBreadcrumb",
+  components: {
+    NcActions: u.NcActions,
+    ChevronRight: f.ChevronRight,
+    NcButton: m.NcButton
+  },
+  inheritAttrs: !1,
+  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
+    },
+    /**
+     * 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
+    },
+    /**
+     * CSS class to apply to the root element.
+     */
+    class: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  emits: [
+    "dragenter",
+    "dragleave",
+    "dropped",
+    "update:open"
+  ],
+  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-${c.GenRandomId()}`
+    };
+  },
+  computed: {
+    /**
+     * The attributes to pass to `router-link` or `a`
+     */
+    linkAttributes() {
+      return this.to ? { to: this.to, ...this.$attrs } : this.href ? { href: this.href, ...this.$attrs } : 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 {DragEvent} e The drag-enter event
+     */
+    dragEnter(t) {
+      this.$emit("dragenter", t), !this.disableDrop && (this.hovering = !0);
+    },
+    /**
+     * Remove the hovering state on drag leave
+     *
+     * @param {DragEvent} e The drag leave event
+     */
+    dragLeave(t) {
+      this.$emit("dragleave", t), !this.disableDrop && (t.target.contains(t.relatedTarget) || this.$refs.crumb.contains(t.relatedTarget) || (this.hovering = !1));
+    }
+  }
+};
+function g(t, n, r, b, a, o) {
+  const s = e.resolveComponent("NcButton"), l = e.resolveComponent("NcActions"), d = e.resolveComponent("ChevronRight");
+  return e.openBlock(), e.createElementBlock("li", e.normalizeProps({
+    ref: "crumb",
+    class: ["vue-crumb", [{ "vue-crumb--hovered": a.hovering }, t.$props.class]],
+    [a.crumbId || ""]: "",
+    draggable: "false",
+    onDragstart: n[0] || (n[0] = e.withModifiers(() => {
+    }, ["prevent"])),
+    onDrop: n[1] || (n[1] = e.withModifiers((...i) => o.dropped && o.dropped(...i), ["prevent"])),
+    onDragover: e.withModifiers(() => {
+    }, ["prevent"]),
+    onDragenter: n[2] || (n[2] = (...i) => o.dragEnter && o.dragEnter(...i)),
+    onDragleave: n[3] || (n[3] = (...i) => o.dragLeave && o.dragLeave(...i))
+  }), [
+    (r.name || r.icon) && !t.$slots.default ? (e.openBlock(), e.createBlock(s, e.mergeProps({
+      key: 0,
+      title: r.title,
+      "aria-label": r.icon ? r.name : void 0,
+      type: "tertiary"
+    }, o.linkAttributes), e.createSlots({ _: 2 }, [
+      t.$slots.icon || r.icon ? {
+        name: "icon",
+        fn: e.withCtx(() => [
+          e.renderSlot(t.$slots, "icon", {}, () => [
+            e.createElementVNode("span", {
+              class: e.normalizeClass([r.icon, "icon"])
+            }, null, 2)
+          ], !0)
+        ]),
+        key: "0"
+      } : {
+        name: "default",
+        fn: e.withCtx(() => [
+          e.createTextVNode(e.toDisplayString(r.name), 1)
+        ]),
+        key: "1"
+      }
+    ]), 1040, ["title", "aria-label"])) : e.createCommentVNode("", !0),
+    t.$slots.default ? (e.openBlock(), e.createBlock(l, {
+      key: 1,
+      ref: "actions",
+      type: "tertiary",
+      "force-menu": r.forceMenu,
+      open: r.open,
+      "menu-name": r.name,
+      title: r.title,
+      "force-name": !0,
+      container: `.vue-crumb[${a.crumbId}]`,
+      "onUpdate:open": o.onOpenChange
+    }, {
+      icon: e.withCtx(() => [
+        e.renderSlot(t.$slots, "menu-icon", {}, void 0, !0)
+      ]),
+      default: e.withCtx(() => [
+        e.renderSlot(t.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["force-menu", "open", "menu-name", "title", "container", "onUpdate:open"])) : e.createCommentVNode("", !0),
+    e.createVNode(d, {
+      class: "vue-crumb__separator",
+      size: 20
+    })
+  ], 16);
+}
+const v = /* @__PURE__ */ h._export_sfc(p, [["render", g], ["__scopeId", "data-v-200a3cfb"]]);
+exports.NcBreadcrumb = v;

package/dist/chunks/NcBreadcrumb-X45pwcLq.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcBreadcrumb-X45pwcLq.cjs","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.\nRenders a button element when given no redirection props, otherwise, renders <a/> or <router-link/> elements\n\n</docs>\n\n<template>\n\t<li ref=\"crumb\"\n\t\tclass=\"vue-crumb\"\n\t\t:class=\"[{'vue-crumb--hovered': hovering}, $props.class]\"\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<NcButton v-if=\"(name || icon) && !$slots.default\"\n\t\t\t:title=\"title\"\n\t\t\t:aria-label=\"icon ? name : undefined\"\n\t\t\ttype=\"tertiary\"\n\t\t\tv-bind=\"linkAttributes\">\n\t\t\t<template v-if=\"$slots.icon || icon\" #icon>\n\t\t\t\t<!-- @slot Slot for passing a material design icon. Precedes the icon and name prop. -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span :class=\"icon\" class=\"icon\" />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t\t<template v-else #default>\n\t\t\t\t{{ name }}\n\t\t\t</template>\n\t\t</NcButton>\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'\nimport NcButton from '../NcButton/NcButton.vue'\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\tNcButton,\n\t},\n\tinheritAttrs: false,\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 * 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\n\t\t/**\n\t\t * CSS class to apply to the root element.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\temits: [\n\t\t'dragenter',\n\t\t'dragleave',\n\t\t'dropped',\n\t\t'update:open',\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 * 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`, if its an <a/> element, we pass `href`, otherwise we have a button\n\t\t\treturn this.to\n\t\t\t\t? { to: this.to, ...this.$attrs }\n\t\t\t\t: (this.href\n\t\t\t\t\t? { href: this.href, ...this.$attrs }\n\t\t\t\t\t: this.$attrs\n\t\t\t\t)\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 {DragEvent} e The drag-enter event\n\t\t */\n\t\tdragEnter(e) {\n\t\t\tthis.$emit('dragenter', 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 {DragEvent} e The drag leave event\n\t\t */\n\t\tdragLeave(e) {\n\t\t\tthis.$emit('dragleave', 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\tmin-width: 0;\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// Necessary to hide hidden crumbs\n\t&--hidden {\n\t\tdisplay: none;\n\t}\n\t&__separator {\n\t\tpadding: 0;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\t// Necessary for indicating hovering for drag and drop\n\t&#{&}--hovered :deep(.button-vue) {\n\t\tbackground-color: var(--color-background-dark);\n\t\tcolor: var(--color-main-text);\n\t}\n\t// Adjust button style\n\t&:not(:last-child) :deep() .button-vue {\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&__text {\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\t:deep(.button-vue__text) {\n\t\tmargin: 0;\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\t\t\tmax-width: 100%;\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","NcButton","GenRandomId","open","e","vue","$data","_ctx","_cache","args","$options","$props","_component_NcButton"],"mappings":";2PAqFAA,IAAA;AAAA,EACC,MAAA;AAAA;IAEC,WAAAC,EAAA;AAAA;IAEA,UAAAC,EAAA;AAAA;EAED,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;IAWC,OAAA;AAAA;;;;;;;;IAUA,IAAA;AAAA,MACC,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA;;;;;;MAQA,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsCD,OAAA;AAAA;;;;EAKD,OAAA;AAAA;;IAGC;AAAA;;EAGD,OAAA;AACC,WAAA;AAAA;AAAA;AAAA;AAAA,MAIC,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,SAAA,YAAAC,EAAA,YAAA,CAAA;AAAA,IACD;AAAA;EAED,UAAA;AAAA;AAAA;AAAA;AAAA,IAIC,iBAAA;qEAKG,EAAA,MAAA,KAAA,MAAA,GAAA,KAAA,OAAA;;;EAKJ,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,aAAAC,GAAA;;;;;;;;;;;AAmBC,aAAA,KAAA,gBASA,KAAA,MAAA,WAAAC,GAAA,KAAA,MAAA,KAAA,IAAA,2DAEA,KAAA,WAAA;;;;;;;;AAaA,kCAAA,MAAA,gBAGA,KAAA,WAAA;AAAA;;;;;;;AAYA,kCAAA,MAAA,gBAMAA,EAAA,OAAA,SAAAA,EAAA,aAAA,KACC,KAAA,MAAA,MAAA,SAAAA,EAAA,aAAA,MAGD,KAAA,WAAA;AAAA;;AAGH;;;AAtPC,SAAAC,EAAA,UAAA,GAAAA,EAAA,mBAAA,MAAAA,EAAA,eAAA;AAAA,IAAI,KAAA;AAAA,IACH,OAAA,CAAA,aAAA,CAAA,EAAA,sBAAAC,EAAA,SAAA,GAAAC,EAAA,OAAA,KAAA,CAAA;AAAA,IAEC,CAAAD,EAAA,WAAA,EAAA,GAAA;AAAA,IACD,WAAA;AAAA;;;;;IAIC,aAAAE,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,aAAAA,EAAA,UAAA,GAAAD,CAAA;AAAA,IACA,aAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,aAAAA,EAAA,UAAA,GAAAD,CAAA;AAAA;KACgBE,EAAA,QAAAA,EAAA,SAAA,CAAAJ,EAAA,OAAA,WAAjBF,EAAA,UAAA,GAAAA,EAAA,YAAAO,GAAAP,EAAA,WAAA;AAAA;MACE,OAAAM,EAAA;AAAA,MACA,cAAAA,EAAA,OAAAA,EAAA,OAAA;AAAA,MACD,MAAA;AAAA;;QA7CH,MAAA;AAAA,QAAA,IAAAN,EAAA,QAAA,MAAA;AAAA,UAiDIA,EAAA,WAAAE,EAAA,QAAA,QAAA,CAAA,GAAA,MAAA;AAAA;cACQ,OAAAF,EAAA,eAAA,CAAAM,EAAA,MAAA,MAAA,CAAA;AAAA;;;;;QAlDZ,MAAA;AAAA,QAAA,IAAAN,EAAA,QAAA,MAAA;AAAA,UAAAA,EAAA,gBAAAA,EAAA,gBAAAM,EAAA,IAAA,GAAA,CAAA;AAAA;;;0CAAAN,EAAA,mBAAA,IAAA,EAAA;AAAA,IAyDmBE,EAAA,OAAA;;MAChB,KAAA;AAAA,MACA,MAAA;AAAA,MACC,cAAAI,EAAA;AAAA,MACA,MAAAA,EAAA;AAAA,MACA,aAAAA,EAAA;AAAA,MACA,OAAAA,EAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA,cAAAL,EAAA,OAAA;AAAA,MACA,iBAAAI,EAAA;AAAA;MACU,MAAAL,EAAA,QAAA,MAAA;AAAA;;MAnEd,SAAAA,EAAA,QAAA,MAAA;AAAA;;;yFAAAA,EAAA,mBAAA,IAAA,EAAA;AAAA;MA0EgB,OAAA;AAAA,MAA8B,MAAA;AAAA;;;;;"}

package/dist/chunks/NcBreadcrumb-gB_hnDG_.mjs

@@ -0,0 +1,216 @@
+import "../assets/NcBreadcrumb-ZsIS1jDx.css";
+import { N as g } from "./NcActions-6Yv0De7D.mjs";
+import { G as v } from "./GenRandomId-VodkdWbp.mjs";
+import { N as b } from "./NcButton-nCkJxwsi.mjs";
+import { C as y } from "./ChevronRight-xEIO1OE7.mjs";
+import { resolveComponent as s, openBlock as d, createElementBlock as N, normalizeProps as B, withModifiers as l, createBlock as m, mergeProps as C, createSlots as D, withCtx as o, renderSlot as u, createElementVNode as k, normalizeClass as S, createTextVNode as A, toDisplayString as _, createCommentVNode as f, createVNode as E } from "vue";
+import { _ as I } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const O = {
+  name: "NcBreadcrumb",
+  components: {
+    NcActions: g,
+    ChevronRight: y,
+    NcButton: b
+  },
+  inheritAttrs: !1,
+  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
+    },
+    /**
+     * 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
+    },
+    /**
+     * CSS class to apply to the root element.
+     */
+    class: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  emits: [
+    "dragenter",
+    "dragleave",
+    "dropped",
+    "update:open"
+  ],
+  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-${v()}`
+    };
+  },
+  computed: {
+    /**
+     * The attributes to pass to `router-link` or `a`
+     */
+    linkAttributes() {
+      return this.to ? { to: this.to, ...this.$attrs } : this.href ? { href: this.href, ...this.$attrs } : 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(e) {
+      this.$emit("update:open", e);
+    },
+    /**
+     * 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(e) {
+      return this.disableDrop || (this.$emit("dropped", e, this.to || this.href), this.$parent.$emit("dropped", e, this.to || this.href), this.hovering = !1), !1;
+    },
+    /**
+     * Add the hovering state on drag enter
+     *
+     * @param {DragEvent} e The drag-enter event
+     */
+    dragEnter(e) {
+      this.$emit("dragenter", e), !this.disableDrop && (this.hovering = !0);
+    },
+    /**
+     * Remove the hovering state on drag leave
+     *
+     * @param {DragEvent} e The drag leave event
+     */
+    dragLeave(e) {
+      this.$emit("dragleave", e), !this.disableDrop && (e.target.contains(e.relatedTarget) || this.$refs.crumb.contains(e.relatedTarget) || (this.hovering = !1));
+    }
+  }
+};
+function R(e, r, t, V, i, n) {
+  const c = s("NcButton"), p = s("NcActions"), h = s("ChevronRight");
+  return d(), N("li", B({
+    ref: "crumb",
+    class: ["vue-crumb", [{ "vue-crumb--hovered": i.hovering }, e.$props.class]],
+    [i.crumbId || ""]: "",
+    draggable: "false",
+    onDragstart: r[0] || (r[0] = l(() => {
+    }, ["prevent"])),
+    onDrop: r[1] || (r[1] = l((...a) => n.dropped && n.dropped(...a), ["prevent"])),
+    onDragover: l(() => {
+    }, ["prevent"]),
+    onDragenter: r[2] || (r[2] = (...a) => n.dragEnter && n.dragEnter(...a)),
+    onDragleave: r[3] || (r[3] = (...a) => n.dragLeave && n.dragLeave(...a))
+  }), [
+    (t.name || t.icon) && !e.$slots.default ? (d(), m(c, C({
+      key: 0,
+      title: t.title,
+      "aria-label": t.icon ? t.name : void 0,
+      type: "tertiary"
+    }, n.linkAttributes), D({ _: 2 }, [
+      e.$slots.icon || t.icon ? {
+        name: "icon",
+        fn: o(() => [
+          u(e.$slots, "icon", {}, () => [
+            k("span", {
+              class: S([t.icon, "icon"])
+            }, null, 2)
+          ], !0)
+        ]),
+        key: "0"
+      } : {
+        name: "default",
+        fn: o(() => [
+          A(_(t.name), 1)
+        ]),
+        key: "1"
+      }
+    ]), 1040, ["title", "aria-label"])) : f("", !0),
+    e.$slots.default ? (d(), m(p, {
+      key: 1,
+      ref: "actions",
+      type: "tertiary",
+      "force-menu": t.forceMenu,
+      open: t.open,
+      "menu-name": t.name,
+      title: t.title,
+      "force-name": !0,
+      container: `.vue-crumb[${i.crumbId}]`,
+      "onUpdate:open": n.onOpenChange
+    }, {
+      icon: o(() => [
+        u(e.$slots, "menu-icon", {}, void 0, !0)
+      ]),
+      default: o(() => [
+        u(e.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 3
+    }, 8, ["force-menu", "open", "menu-name", "title", "container", "onUpdate:open"])) : f("", !0),
+    E(h, {
+      class: "vue-crumb__separator",
+      size: 20
+    })
+  ], 16);
+}
+const P = /* @__PURE__ */ I(O, [["render", R], ["__scopeId", "data-v-200a3cfb"]]);
+export {
+  P as N
+};

package/dist/chunks/NcBreadcrumb-gB_hnDG_.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcBreadcrumb-gB_hnDG_.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.\nRenders a button element when given no redirection props, otherwise, renders <a/> or <router-link/> elements\n\n</docs>\n\n<template>\n\t<li ref=\"crumb\"\n\t\tclass=\"vue-crumb\"\n\t\t:class=\"[{'vue-crumb--hovered': hovering}, $props.class]\"\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<NcButton v-if=\"(name || icon) && !$slots.default\"\n\t\t\t:title=\"title\"\n\t\t\t:aria-label=\"icon ? name : undefined\"\n\t\t\ttype=\"tertiary\"\n\t\t\tv-bind=\"linkAttributes\">\n\t\t\t<template v-if=\"$slots.icon || icon\" #icon>\n\t\t\t\t<!-- @slot Slot for passing a material design icon. Precedes the icon and name prop. -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span :class=\"icon\" class=\"icon\" />\n\t\t\t\t</slot>\n\t\t\t</template>\n\t\t\t<template v-else #default>\n\t\t\t\t{{ name }}\n\t\t\t</template>\n\t\t</NcButton>\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'\nimport NcButton from '../NcButton/NcButton.vue'\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\tNcButton,\n\t},\n\tinheritAttrs: false,\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 * 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\n\t\t/**\n\t\t * CSS class to apply to the root element.\n\t\t */\n\t\tclass: {\n\t\t\ttype: [String, Array, Object],\n\t\t\tdefault: '',\n\t\t},\n\t},\n\temits: [\n\t\t'dragenter',\n\t\t'dragleave',\n\t\t'dropped',\n\t\t'update:open',\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 * 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`, if its an <a/> element, we pass `href`, otherwise we have a button\n\t\t\treturn this.to\n\t\t\t\t? { to: this.to, ...this.$attrs }\n\t\t\t\t: (this.href\n\t\t\t\t\t? { href: this.href, ...this.$attrs }\n\t\t\t\t\t: this.$attrs\n\t\t\t\t)\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 {DragEvent} e The drag-enter event\n\t\t */\n\t\tdragEnter(e) {\n\t\t\tthis.$emit('dragenter', 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 {DragEvent} e The drag leave event\n\t\t */\n\t\tdragLeave(e) {\n\t\t\tthis.$emit('dragleave', 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\tmin-width: 0;\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// Necessary to hide hidden crumbs\n\t&--hidden {\n\t\tdisplay: none;\n\t}\n\t&__separator {\n\t\tpadding: 0;\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\t// Necessary for indicating hovering for drag and drop\n\t&#{&}--hovered :deep(.button-vue) {\n\t\tbackground-color: var(--color-background-dark);\n\t\tcolor: var(--color-main-text);\n\t}\n\t// Adjust button style\n\t&:not(:last-child) :deep() .button-vue {\n\t\tcolor: var(--color-text-maxcontrast);\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-dark);\n\t\t\tcolor: var(--color-main-text);\n\t\t}\n\n\t\t&__text {\n\t\t\tfont-weight: normal;\n\t\t}\n\t}\n\t:deep(.button-vue__text) {\n\t\tmargin: 0;\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\t\t\tmax-width: 100%;\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","NcButton","GenRandomId","open","openBlock","createElementBlock","normalizeProps","$data","_ctx","_cache","args","$options","$props","createBlock","_component_NcButton","mergeProps","withCtx","renderSlot","normalizeClass","createTextVNode","toDisplayString","createCommentVNode"],"mappings":";;;;;;;AAqFA,MAAAA,IAAA;AAAA,EACC,MAAA;AAAA;IAEC,WAAAC;AAAA;IAEA,UAAAC;AAAA;EAED,cAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;IAWC,OAAA;AAAA;;;;;;;;IAUA,IAAA;AAAA,MACC,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA;;;;;;MAQA,SAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsCD,OAAA;AAAA;;;;EAKD,OAAA;AAAA;;IAGC;AAAA;;EAGD,OAAA;AACC,WAAA;AAAA;AAAA;AAAA;AAAA,MAIC,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAKA,SAAA,YAAAC,EAAA,CAAA;AAAA,IACD;AAAA;EAED,UAAA;AAAA;AAAA;AAAA;AAAA,IAIC,iBAAA;qEAKG,EAAA,MAAA,KAAA,MAAA,GAAA,KAAA,OAAA;;;EAKJ,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,aAAAC,GAAA;;;;;;;;;;;AAmBC,aAAA,KAAA,gBASA,KAAA,MAAA,WAAA,GAAA,KAAA,MAAA,KAAA,IAAA,2DAEA,KAAA,WAAA;;;;;;;;AAaA,kCAAA,MAAA,gBAGA,KAAA,WAAA;AAAA;;;;;;;AAYA,kCAAA,MAAA,gBAMA,EAAA,OAAA,SAAA,EAAA,aAAA,KACC,KAAA,MAAA,MAAA,SAAA,EAAA,aAAA,MAGD,KAAA,WAAA;AAAA;;AAGH;;;AAtPC,SAAAC,EAAA,GAAAC,EAAA,MAAAC,EAAA;AAAA,IAAI,KAAA;AAAA,IACH,OAAA,CAAA,aAAA,CAAA,EAAA,sBAAAC,EAAA,SAAA,GAAAC,EAAA,OAAA,KAAA,CAAA;AAAA,IAEC,CAAAD,EAAA,WAAA,EAAA,GAAA;AAAA,IACD,WAAA;AAAA;;;;;IAIC,aAAAE,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,aAAAA,EAAA,UAAA,GAAAD,CAAA;AAAA,IACA,aAAAD,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,aAAAA,EAAA,UAAA,GAAAD,CAAA;AAAA;KACgBE,EAAA,QAAAA,EAAA,SAAA,CAAAJ,EAAA,OAAA,WAAjBJ,EAAA,GAAAS,EAAAC,GAAAC,EAAA;AAAA;MACE,OAAAH,EAAA;AAAA,MACA,cAAAA,EAAA,OAAAA,EAAA,OAAA;AAAA,MACD,MAAA;AAAA;;QA7CH,MAAA;AAAA,QAAA,IAAAI,EAAA,MAAA;AAAA,UAiDIC,EAAAT,EAAA,QAAA,QAAA,CAAA,GAAA,MAAA;AAAA;cACQ,OAAAU,EAAA,CAAAN,EAAA,MAAA,MAAA,CAAA;AAAA;;;;;QAlDZ,MAAA;AAAA,QAAA,IAAAI,EAAA,MAAA;AAAA,UAAAG,EAAAC,EAAAR,EAAA,IAAA,GAAA,CAAA;AAAA;;;0CAAAS,EAAA,IAAA,EAAA;AAAA,IAyDmBb,EAAA,OAAA;;MAChB,KAAA;AAAA,MACA,MAAA;AAAA,MACC,cAAAI,EAAA;AAAA,MACA,MAAAA,EAAA;AAAA,MACA,aAAAA,EAAA;AAAA,MACA,OAAAA,EAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA,cAAAL,EAAA,OAAA;AAAA,MACA,iBAAAI,EAAA;AAAA;MACU,MAAAK,EAAA,MAAA;AAAA;;MAnEd,SAAAA,EAAA,MAAA;AAAA;;;yFAAAK,EAAA,IAAA,EAAA;AAAA;MA0EgB,OAAA;AAAA,MAA8B,MAAA;AAAA;;;;"}