@nextcloud/vue/dist/Components/NcBreadcrumbs.mjs

Nextcloud vue components

import "../assets/index46.css";
import O from "./NcActions.mjs";
import L from "./NcActionButton.mjs";
import B from "./NcActionRouter.mjs";
import y from "./NcActionLink.mjs";
import D from "./NcBreadcrumb.mjs";
import p from "vue";
import { subscribe as R, unsubscribe as W } from "@nextcloud/event-bus";
import w from "vue-material-design-icons/Folder.vue";
import N from "debounce";
import { Fragment as z } from "vue-frag";
import { n as E } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
const b = (t, e, s) => {
  if (t !== void 0)
    for (let o = t.length - 1; o >= 0; o--) {
      const a = t[o], r = !a.componentOptions && a.tag && e.indexOf(a.tag) === -1, n = !!a.componentOptions && typeof a.componentOptions.tag == "string", c = n && e.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), t.splice(o, 1));
    }
};
const i = "vue-crumb", A = { name: "NcBreadcrumbs", components: { NcActions: O, NcActionButton: L, NcActionRouter: B, NcActionLink: y, NcBreadcrumb: D, IconFolder: w }, props: { rootIcon: { type: String, default: "icon-home" } }, emits: ["dropped"], data() {
  return { hiddenIndices: [], menuBreadcrumbProps: { name: "", forceMenu: !0, disableDrop: !0, open: !1 }, breadcrumbsRefs: {} };
}, beforeMount() {
  b(this.$slots.default, ["NcBreadcrumb"], this);
}, beforeUpdate() {
  b(this.$slots.default, ["NcBreadcrumb"], this);
}, created() {
  window.addEventListener("resize", N(() => {
    this.handleWindowResize();
  }, 100)), R("navigation-toggled", this.delayedResize);
}, mounted() {
  this.handleWindowResize();
}, updated() {
  this.delayedResize(), this.$nextTick(() => {
    this.hideCrumbs();
  });
}, beforeDestroy() {
  window.removeEventListener("resize", this.handleWindowResize), W("navigation-toggled", this.delayedResize);
}, methods: { closeActions(t) {
  this.$refs.actionsBreadcrumb.$el.contains(t.relatedTarget) || (this.menuBreadcrumbProps.open = !1);
}, async delayedResize() {
  await this.$nextTick(), this.handleWindowResize();
}, handleWindowResize() {
  var d;
  if (!this.$refs.container)
    return;
  const t = Object.values(this.breadcrumbsRefs), e = t.length, s = [], o = this.$refs.container.offsetWidth;
  let a = this.getTotalWidth(t);
  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(e / 2);
  for (; r > 0 && n < e - 2; ) {
    const l = c + (n % 2 ? n + 1 : n) / 2 * Math.pow(-1, n + e % 2);
    r -= this.getWidth((d = t[l]) == null ? void 0 : d.elm), s.push(l), n++;
  }
  this.arraysEqual(this.hiddenIndices, s.sort((l, h) => l - h)) || (this.hiddenIndices = s);
}, arraysEqual(t, e) {
  if (t.length !== e.length)
    return !1;
  if (t === e)
    return !0;
  if (t === null || e === null)
    return !1;
  for (let s = 0; s < t.length; ++s)
    if (t[s] !== e[s])
      return !1;
  return !0;
}, getTotalWidth(t) {
  return t.reduce((e, s, o) => e + this.getWidth(s == null ? void 0 : s.elm), 0);
}, getWidth(t) {
  if (!(t != null && t.classList))
    return 0;
  const e = t.classList.contains(`${i}--hidden`);
  t.style.minWidth = "auto", t.classList.remove(`${i}--hidden`);
  const s = t.offsetWidth;
  return e && t.classList.add(`${i}--hidden`), t.style.minWidth = "", s;
}, preventDefault(t) {
  return t.preventDefault && t.preventDefault(), !1;
}, dragStart(t) {
  return this.preventDefault(t);
}, dropped(t, e, s) {
  return s || this.$emit("dropped", t, e), this.menuBreadcrumbProps.open = !1, document.querySelectorAll(`.${i}`).forEach((o) => {
    o.classList.remove(`${i}--hovered`);
  }), this.preventDefault(t);
}, dragOver(t) {
  return this.preventDefault(t);
}, dragEnter(t, e) {
  if (!e && t.target.closest) {
    const s = t.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(t, e) {
  if (!e && !t.target.contains(t.relatedTarget) && t.target.closest) {
    const s = t.target.closest(`.${i}`);
    if (s.contains(t.relatedTarget))
      return;
    s.classList && s.classList.contains(i) && s.classList.remove(`${i}--hovered`);
  }
}, hideCrumbs() {
  Object.values(this.breadcrumbsRefs).forEach((t, e) => {
    var s;
    (s = t == null ? void 0 : t.elm) != null && s.classList && (this.hiddenIndices.includes(e) ? t.elm.classList.add(`${i}--hidden`) : t.elm.classList.remove(`${i}--hidden`));
  });
}, isBreadcrumb(t) {
  var e;
  return (((e = t == null ? void 0 : t.componentOptions) == null ? void 0 : e.tag) || (t == null ? void 0 : t.tag) || "").includes("NcBreadcrumb");
} }, render(t) {
  const e = [];
  if (this.$slots.default.forEach((r) => {
    var n, c;
    if (this.isBreadcrumb(r)) {
      e.push(r);
      return;
    }
    (r == null ? void 0 : r.type) === z && ((c = (n = r == null ? void 0 : r.children) == null ? void 0 : n.forEach) == null || c.call(n, (d) => {
      this.isBreadcrumb(d) && e.push(d);
    }));
  }), e.length === 0)
    return;
  p.set(e[0].componentOptions.propsData, "icon", this.rootIcon), p.set(e[0].componentOptions.propsData, "ref", "breadcrumbs");
  const s = {};
  e.forEach((r, n) => {
    p.set(r, "ref", `crumb-${n}`), s[n] = r;
  });
  let o = [];
  if (!this.hiddenIndices.length)
    o = e;
  else {
    o = e.slice(0, Math.round(e.length / 2)), o.push(t("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 = e[n], d = c.componentOptions.propsData.to, l = c.componentOptions.propsData.href, h = c.componentOptions.propsData.disableDrop, g = c.componentOptions.propsData.title, v = c.componentOptions.propsData.name;
      let m = "NcActionButton", f = "";
      l && (m = "NcActionLink", f = l), d && (m = "NcActionRouter", f = d);
      const $ = t("IconFolder", { props: { size: 20 }, slot: "icon" });
      return t(m, { class: i, props: { href: l || null, title: g, to: d || null }, attrs: { draggable: !1 }, on: { ...c.componentOptions.listeners }, nativeOn: { dragstart: this.dragStart, drop: (u) => this.dropped(u, f, h), dragover: this.dragOver, dragenter: (u) => this.dragEnter(u, h), dragleave: (u) => this.dragLeave(u, h) } }, [$, v]);
    })));
    const r = e.slice(Math.round(e.length / 2));
    o = o.concat(r);
  }
  const a = [t("nav", {}, [t("ul", { class: "breadcrumb__crumbs" }, [o])])];
  return this.$slots.actions && a.push(t("div", { class: "breadcrumb__actions", ref: "breadcrumb__actions" }, this.$slots.actions)), this.breadcrumbsRefs = s, t("div", { class: ["breadcrumb", { "breadcrumb--collapsed": this.hiddenIndices.length === e.length - 2 }], ref: "container" }, a);
} }, I = null, _ = null;
var x = E(A, I, _, !1, null, "e809461d", null, null);
const J = x.exports;
export {
  J as default
};