@nextcloud/vue 8.3.0 → 8.5.0

package/dist/chunks/NcAppSidebar-nHbqU8Wl.mjs

@@ -0,0 +1,565 @@
+import "../assets/NcAppSidebar-iU8Zp4Qk.css";
+import n from "../Components/NcVNodes.mjs";
+import { N as o } from "./NcCheckboxRadioSwitch-3sa_9DpY.mjs";
+import { n as s } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
+import { N as l } from "./NcActions-CNDgnRLf.mjs";
+import c from "../Components/NcLoadingIcon.mjs";
+import u from "../Components/NcButton.mjs";
+import d from "../Components/NcEmptyContent.mjs";
+import { directive as p } from "../Directives/Focus.mjs";
+import { directive as f } from "../Directives/Linkify.mjs";
+import "../Directives/Tooltip.mjs";
+import { useIsSmallMobile as m } from "../Composables/useIsMobile.mjs";
+import { g as b } from "./focusTrap-Py2bQ9-r.mjs";
+import { r as h, I as _, a as r } from "./_l10n-tZEKUJRj.mjs";
+import { A as y } from "./ArrowRight-4p6gv-9o.mjs";
+import { C as g } from "./Close-5Hzp7J3v.mjs";
+import { vOnClickOutside as k } from "@vueuse/components";
+import { createFocusTrap as T } from "focus-trap";
+import { VTooltip as v } from "floating-vue";
+const C = {
+  name: "NcAppSidebarTabs",
+  components: {
+    NcCheckboxRadioSwitch: o,
+    NcVNodes: n
+  },
+  provide() {
+    return {
+      registerTab: this.registerTab,
+      unregisterTab: this.unregisterTab,
+      // Getter as an alternative to Vue 2.7 computed(() => this.activeTab)
+      getActiveTab: () => this.activeTab,
+      // Used to check whether the tab header is shown so the tabs can reference the tab header for `aria-labelledby` or not
+      isTablistShown: () => this.hasMultipleTabs
+    };
+  },
+  props: {
+    /**
+     * Id of the tab to activate
+     */
+    active: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: ["update:active"],
+  data() {
+    return {
+      /**
+       * Tab descriptions from the passed NcSidebarTab components' props to build the tab navbar from.
+       */
+      tabs: [],
+      /**
+       * Local active (open) tab's ID. It allows to use component without active.sync
+       */
+      activeTab: ""
+    };
+  },
+  computed: {
+    /**
+     * Has multiple tabs. If only one tab - its content is shown without navigation
+     *
+     * @return {boolean}
+     */
+    hasMultipleTabs() {
+      return this.tabs.length > 1;
+    },
+    currentTabIndex() {
+      return this.tabs.findIndex((i) => i.id === this.activeTab);
+    }
+  },
+  watch: {
+    active(i) {
+      i !== this.activeTab && this.updateActive();
+    }
+  },
+  methods: {
+    /**
+     * Set the current active tab
+     *
+     * @param {string} id the id of the tab
+     */
+    setActive(i) {
+      this.activeTab = i, this.$emit("update:active", this.activeTab);
+    },
+    /**
+     * Focus the previous tab
+     * and emit to the parent component
+     */
+    focusPreviousTab() {
+      this.currentTabIndex > 0 && this.setActive(this.tabs[this.currentTabIndex - 1].id), this.focusActiveTab();
+    },
+    /**
+     * Focus the next tab
+     * and emit to the parent component
+     */
+    focusNextTab() {
+      this.currentTabIndex < this.tabs.length - 1 && this.setActive(this.tabs[this.currentTabIndex + 1].id), this.focusActiveTab();
+    },
+    /**
+     * Focus the first tab
+     * and emit to the parent component
+     */
+    focusFirstTab() {
+      this.setActive(this.tabs[0].id), this.focusActiveTab();
+    },
+    /**
+     * Focus the last tab
+     * and emit to the parent component
+     */
+    focusLastTab() {
+      this.setActive(this.tabs[this.tabs.length - 1].id), this.focusActiveTab();
+    },
+    /**
+     * Focus the current active tab
+     */
+    focusActiveTab() {
+      this.$el.querySelector(`#tab-button-${this.activeTab}`).focus();
+    },
+    /**
+     * Focus the content on tab
+     * see aria accessibility guidelines
+     */
+    focusActiveTabContent() {
+      this.$el.querySelector("#tab-" + this.activeTab).focus();
+    },
+    /**
+     * Update the current active tab
+     */
+    updateActive() {
+      this.activeTab = this.active && this.tabs.some((i) => i.id === this.active) ? this.active : this.tabs.length > 0 ? this.tabs[0].id : "";
+    },
+    /**
+     * Register child tab in the tabs
+     *
+     * @param {object} tab child tab passed to slot
+     */
+    registerTab(i) {
+      this.tabs.push(i), this.tabs.sort((t, a) => t.order === a.order ? OC.Util.naturalSortCompare(t.name, a.name) : t.order - a.order), this.updateActive();
+    },
+    /**
+     * Unregister child tab from the tabs
+     *
+     * @param {string} id tab's id
+     */
+    unregisterTab(i) {
+      const t = this.tabs.findIndex((a) => a.id === i);
+      t !== -1 && this.tabs.splice(t, 1), this.activeTab === i && this.updateActive();
+    }
+  }
+};
+var S = function() {
+  var t = this, a = t._self._c;
+  return a("div", { staticClass: "app-sidebar-tabs" }, [t.hasMultipleTabs ? a("div", { staticClass: "app-sidebar-tabs__nav", attrs: { role: "tablist" }, on: { keydown: [function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "left", 37, e.key, ["Left", "ArrowLeft"]) || "button" in e && e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusPreviousTab.apply(null, arguments));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "right", 39, e.key, ["Right", "ArrowRight"]) || "button" in e && e.button !== 2 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusNextTab.apply(null, arguments));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "tab", 9, e.key, "Tab") || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusActiveTabContent.apply(null, arguments));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "home", void 0, e.key, void 0) || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusFirstTab.apply(null, arguments));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "end", void 0, e.key, void 0) || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusLastTab.apply(null, arguments));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "page-up", void 0, e.key, void 0) || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusFirstTab.apply(null, arguments));
+  }, function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "page-down", void 0, e.key, void 0) || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey ? null : (e.preventDefault(), e.stopPropagation(), t.focusLastTab.apply(null, arguments));
+  }] } }, t._l(t.tabs, function(e) {
+    return a("NcCheckboxRadioSwitch", { key: e.id, staticClass: "app-sidebar-tabs__tab", class: { active: e.id === t.activeTab }, attrs: { "aria-controls": `tab-${e.id}`, "aria-selected": String(t.activeTab === e.id), "button-variant": !0, checked: t.activeTab === e.id, "wrapper-id": `tab-button-${e.id}`, tabindex: t.activeTab === e.id ? 0 : -1, "button-variant-grouped": "horizontal", role: "tab", type: "button" }, on: { "update:checked": function(U) {
+      return t.setActive(e.id);
+    } }, scopedSlots: t._u([{ key: "icon", fn: function() {
+      return [a("NcVNodes", { attrs: { vnodes: e.renderIcon() } }, [a("span", { staticClass: "app-sidebar-tabs__tab-icon", class: e.icon })])];
+    }, proxy: !0 }], null, !0) }, [a("span", { staticClass: "app-sidebar-tabs__tab-caption" }, [t._v(" " + t._s(e.name) + " ")])]);
+  }), 1) : t._e(), a("div", { staticClass: "app-sidebar-tabs__content", class: { "app-sidebar-tabs__content--multiple": t.hasMultipleTabs } }, [t._t("default")], 2)]);
+}, N = [], x = /* @__PURE__ */ s(
+  C,
+  S,
+  N,
+  !1,
+  null,
+  "2ae00fba",
+  null,
+  null
+);
+const L = x.exports;
+h(_);
+const A = {
+  name: "StarIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var w = function() {
+  var t = this, a = t._self._c;
+  return a("span", t._b({ staticClass: "material-design-icon star-icon", attrs: { "aria-hidden": !t.title, "aria-label": t.title, role: "img" }, on: { click: function(e) {
+    return t.$emit("click", e);
+  } } }, "span", t.$attrs, !1), [a("svg", { staticClass: "material-design-icon__svg", attrs: { fill: t.fillColor, width: t.size, height: t.size, viewBox: "0 0 24 24" } }, [a("path", { attrs: { d: "M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" } }, [t.title ? a("title", [t._v(t._s(t.title))]) : t._e()])])]);
+}, K = [], E = /* @__PURE__ */ s(
+  A,
+  w,
+  K,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const F = E.exports, I = {
+  name: "StarOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var B = function() {
+  var t = this, a = t._self._c;
+  return a("span", t._b({ staticClass: "material-design-icon star-outline-icon", attrs: { "aria-hidden": !t.title, "aria-label": t.title, role: "img" }, on: { click: function(e) {
+    return t.$emit("click", e);
+  } } }, "span", t.$attrs, !1), [a("svg", { staticClass: "material-design-icon__svg", attrs: { fill: t.fillColor, width: t.size, height: t.size, viewBox: "0 0 24 24" } }, [a("path", { attrs: { d: "M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z" } }, [t.title ? a("title", [t._v(t._s(t.title))]) : t._e()])])]);
+}, O = [], D = /* @__PURE__ */ s(
+  I,
+  B,
+  O,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const M = D.exports, P = {
+  name: "NcAppSidebar",
+  components: {
+    NcActions: l,
+    NcAppSidebarTabs: L,
+    ArrowRight: y,
+    NcButton: u,
+    NcLoadingIcon: c,
+    NcEmptyContent: d,
+    Close: g,
+    Star: F,
+    StarOutline: M
+  },
+  directives: {
+    focus: p,
+    linkify: f,
+    ClickOutside: k,
+    Tooltip: v
+  },
+  props: {
+    active: {
+      type: String,
+      default: ""
+    },
+    name: {
+      type: String,
+      default: "",
+      required: !0
+    },
+    /**
+     * Allow to edit the sidebar name.
+     */
+    nameEditable: {
+      type: Boolean,
+      default: !1
+    },
+    namePlaceholder: {
+      type: String,
+      default: ""
+    },
+    subname: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Title to display for the subname.
+     */
+    subtitle: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Url to the top header background image
+     * Applied with css
+     */
+    background: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Enable the favourite icon if not null
+     * See fired events
+     */
+    starred: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Show loading spinner instead of the star icon
+     */
+    starLoading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Show loading spinner instead of tabs
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Display the sidebar in compact mode
+     */
+    compact: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Only display close button and default slot content.
+     * Don't display other header content and primary and secondary actions.
+     * Useful when showing the EmptyContent component as content.
+     */
+    empty: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Force the actions to display in a three dot menu
+     */
+    forceMenu: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Linkify the name
+     */
+    linkifyName: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Title to display for the name.
+     * Can be set to the same text in case it's too long.
+     */
+    title: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [
+    "close",
+    "closing",
+    "closed",
+    "opening",
+    "opened",
+    "figure-click",
+    "update:starred",
+    "update:nameEditable",
+    "update:name",
+    "update:active",
+    "submit-name",
+    "dismiss-editing"
+  ],
+  setup() {
+    return {
+      isMobile: m()
+    };
+  },
+  data() {
+    return {
+      changeNameTranslated: r("Change name"),
+      closeTranslated: r("Close sidebar"),
+      favoriteTranslated: r("Favorite"),
+      isStarred: this.starred,
+      focusTrap: null
+    };
+  },
+  computed: {
+    canStar() {
+      return this.isStarred !== null;
+    },
+    hasFigure() {
+      return this.$slots.header || this.background;
+    },
+    hasFigureClickListener() {
+      return this.$listeners["figure-click"];
+    }
+  },
+  watch: {
+    starred() {
+      this.isStarred = this.starred;
+    },
+    isMobile() {
+      this.toggleFocusTrap();
+    }
+  },
+  mounted() {
+    this.toggleFocusTrap();
+  },
+  beforeDestroy() {
+    this.$emit("closed"), this.focusTrap?.deactivate();
+  },
+  methods: {
+    initFocusTrap() {
+      this.focusTrap || (this.focusTrap = T([
+        // The sidebar itself
+        this.$refs.sidebar,
+        // Nextcloud Server header navigarion
+        document.querySelector("#header"),
+        // The app navigation toggle. Navigation can be opened above the sidebar
+        // Take the parent element, because the focus-trap requires a container with elements, not the element itself
+        document.querySelector('[aria-controls="app-navigation-vue"]')?.parentElement
+      ], {
+        allowOutsideClick: !0,
+        fallbackFocus: this.$refs.closeButton,
+        trapStack: b(),
+        escapeDeactivates: !1
+      }));
+    },
+    /**
+     * Activate focus trap if it is currently needed, otherwise deactivate
+     */
+    toggleFocusTrap() {
+      this.isMobile ? (this.initFocusTrap(), this.focusTrap.activate()) : this.focusTrap?.deactivate();
+    },
+    onBeforeEnter(i) {
+      this.$emit("opening", i);
+    },
+    onAfterEnter(i) {
+      this.$emit("opened", i);
+    },
+    onBeforeLeave(i) {
+      this.$emit("closing", i);
+    },
+    onAfterLeave(i) {
+      this.$emit("closed", i);
+    },
+    /**
+     * Used to tell parent component the user asked to close the sidebar
+     *
+     * @param {Event} e close icon click event
+     */
+    closeSidebar(i) {
+      this.$emit("close", i);
+    },
+    /**
+     * Emit figure click event to parent component
+     *
+     * @param {Event} e click event
+     */
+    onFigureClick(i) {
+      this.$emit("figure-click", i);
+    },
+    /**
+     * Toggle the favourite state
+     * and emit to the parent component
+     */
+    toggleStarred() {
+      this.isStarred = !this.isStarred, this.$emit("update:starred", this.isStarred);
+    },
+    editName() {
+      this.$emit("update:nameEditable", !0), this.nameEditable && this.$nextTick(
+        () => this.$refs.nameInput.focus()
+      );
+    },
+    /**
+     * Emit name change event to parent component
+     *
+     * @param {Event} event input event
+     */
+    onNameInput(i) {
+      this.$emit("update:name", i.target.value);
+    },
+    /**
+     * Emit when the name form edit confirm button is pressed in order
+     * to change the name.
+     *
+     * @param {Event} event submit event
+     */
+    onSubmitName(i) {
+      this.$emit("update:nameEditable", !1), this.$emit("submit-name", i);
+    },
+    onDismissEditing() {
+      this.$emit("update:nameEditable", !1), this.$emit("dismiss-editing");
+    },
+    onUpdateActive(i) {
+      this.$emit("update:active", i);
+    }
+  }
+};
+var z = function() {
+  var t = this, a = t._self._c;
+  return a("transition", { attrs: { appear: "", name: "slide-right" }, on: { "before-enter": t.onBeforeEnter, "after-enter": t.onAfterEnter, "before-leave": t.onBeforeLeave, "after-leave": t.onAfterLeave } }, [a("aside", { ref: "sidebar", staticClass: "app-sidebar", attrs: { id: "app-sidebar-vue" }, on: { keydown: function(e) {
+    if (!e.type.indexOf("key") && t._k(e.keyCode, "esc", 27, e.key, ["Esc", "Escape"]))
+      return null;
+    e.stopPropagation(), t.isMobile && t.closeSidebar();
+  } } }, [a("header", { staticClass: "app-sidebar-header", class: {
+    "app-sidebar-header--with-figure": t.hasFigure,
+    "app-sidebar-header--compact": t.compact
+  } }, [a("div", { staticClass: "app-sidebar-header__info" }, [t.hasFigure && !t.empty ? a("div", { staticClass: "app-sidebar-header__figure", class: {
+    "app-sidebar-header__figure--with-action": t.hasFigureClickListener
+  }, style: {
+    backgroundImage: `url(${t.background})`
+  }, attrs: { tabindex: "0" }, on: { click: t.onFigureClick, keydown: function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "enter", 13, e.key, "Enter") ? null : t.onFigureClick.apply(null, arguments);
+  } } }, [t._t("header")], 2) : t._e(), t.empty ? t._e() : a("div", { staticClass: "app-sidebar-header__desc", class: {
+    "app-sidebar-header__desc--with-tertiary-action": t.canStar || t.$slots["tertiary-actions"],
+    "app-sidebar-header__desc--editable": t.nameEditable && !t.subname,
+    "app-sidebar-header__desc--with-subname--editable": t.nameEditable && t.subname,
+    "app-sidebar-header__desc--without-actions": !t.$slots["secondary-actions"]
+  } }, [t.canStar || t.$slots["tertiary-actions"] ? a("div", { staticClass: "app-sidebar-header__tertiary-actions" }, [t._t("tertiary-actions", function() {
+    return [t.canStar ? a("NcButton", { staticClass: "app-sidebar-header__star", attrs: { "aria-label": t.favoriteTranslated, pressed: t.isStarred, type: "secondary" }, on: { click: function(e) {
+      return e.preventDefault(), t.toggleStarred.apply(null, arguments);
+    } }, scopedSlots: t._u([{ key: "icon", fn: function() {
+      return [t.starLoading ? a("NcLoadingIcon") : t.isStarred ? a("Star", { attrs: { size: 20 } }) : a("StarOutline", { attrs: { size: 20 } })];
+    }, proxy: !0 }], null, !1, 2575459756) }) : t._e()];
+  })], 2) : t._e(), a("div", { staticClass: "app-sidebar-header__name-container" }, [a("div", { staticClass: "app-sidebar-header__mainname-container" }, [a("h2", { directives: [{ name: "show", rawName: "v-show", value: !t.nameEditable, expression: "!nameEditable" }, { name: "linkify", rawName: "v-linkify", value: { text: t.name, linkify: t.linkifyName }, expression: "{text: name, linkify: linkifyName}" }], staticClass: "app-sidebar-header__mainname", attrs: { "aria-label": t.title, title: t.title, tabindex: t.nameEditable ? 0 : void 0 }, on: { click: function(e) {
+    return e.target !== e.currentTarget ? null : t.editName.apply(null, arguments);
+  } } }, [t._v(" " + t._s(t.name) + " ")]), t.nameEditable ? [a("form", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: () => t.onSubmitName(), expression: "() => onSubmitName()" }], staticClass: "app-sidebar-header__mainname-form", on: { submit: function(e) {
+    return e.preventDefault(), t.onSubmitName.apply(null, arguments);
+  } } }, [a("input", { directives: [{ name: "focus", rawName: "v-focus" }], ref: "nameInput", staticClass: "app-sidebar-header__mainname-input", attrs: { type: "text", placeholder: t.namePlaceholder }, domProps: { value: t.name }, on: { keydown: function(e) {
+    return !e.type.indexOf("key") && t._k(e.keyCode, "esc", 27, e.key, ["Esc", "Escape"]) ? null : (e.stopPropagation(), t.onDismissEditing.apply(null, arguments));
+  }, input: t.onNameInput } }), a("NcButton", { attrs: { type: "tertiary-no-background", "aria-label": t.changeNameTranslated, "native-type": "submit" }, scopedSlots: t._u([{ key: "icon", fn: function() {
+    return [a("ArrowRight", { attrs: { size: 20 } })];
+  }, proxy: !0 }], null, !1, 1252225425) })], 1)] : t._e(), t.$slots["secondary-actions"] ? a("NcActions", { staticClass: "app-sidebar-header__menu", attrs: { "force-menu": t.forceMenu } }, [t._t("secondary-actions")], 2) : t._e()], 2), t.subname.trim() !== "" ? a("p", { staticClass: "app-sidebar-header__subname", attrs: { "aria-label": t.subtitle, title: t.subtitle } }, [t._v(" " + t._s(t.subname) + " ")]) : t._e()])])]), a("NcButton", { ref: "closeButton", staticClass: "app-sidebar__close", attrs: { title: t.closeTranslated, "aria-label": t.closeTranslated, type: "tertiary" }, on: { click: function(e) {
+    return e.preventDefault(), t.closeSidebar.apply(null, arguments);
+  } }, scopedSlots: t._u([{ key: "icon", fn: function() {
+    return [a("Close", { attrs: { size: 20 } })];
+  }, proxy: !0 }]) }), t.$slots.description && !t.empty ? a("div", { staticClass: "app-sidebar-header__description" }, [t._t("description")], 2) : t._e()], 1), a("NcAppSidebarTabs", { directives: [{ name: "show", rawName: "v-show", value: !t.loading, expression: "!loading" }], ref: "tabs", attrs: { active: t.active }, on: { "update:active": t.onUpdateActive } }, [t._t("default")], 2), t.loading ? a("NcEmptyContent", { scopedSlots: t._u([{ key: "icon", fn: function() {
+    return [a("NcLoadingIcon", { attrs: { size: 64 } })];
+  }, proxy: !0 }], null, !1, 826850984) }) : t._e()], 1)]);
+}, R = [], q = /* @__PURE__ */ s(
+  P,
+  z,
+  R,
+  !1,
+  null,
+  "15882bc7",
+  null,
+  null
+);
+const lt = q.exports;
+export {
+  lt as N
+};