@nextcloud/vue 8.3.0 → 8.5.0

package/dist/chunks/NcAppSidebar-GCbKi7Tk.cjs

@@ -0,0 +1,547 @@
+var V = require("../assets/NcAppSidebar-iU8Zp4Qk.css");
+const n = require("../Components/NcVNodes.cjs"), o = require("./NcCheckboxRadioSwitch-s5C7ZGB_.cjs"), r = require("./_plugin-vue2_normalizer-DCfUPqga.cjs"), l = require("./NcActions-7ytNFRBJ.cjs"), c = require("../Components/NcLoadingIcon.cjs"), u = require("../Components/NcButton.cjs"), d = require("../Components/NcEmptyContent.cjs"), p = require("../Directives/Focus.cjs"), f = require("../Directives/Linkify.cjs");
+require("../Directives/Tooltip.cjs");
+const b = require("../Composables/useIsMobile.cjs"), m = require("./focusTrap-n3H52LOw.cjs"), s = require("./_l10n-juAR1Sua.cjs"), h = require("./ArrowRight-uEMed4kl.cjs"), _ = require("./Close-QFLrdRdG.cjs"), y = require("@vueuse/components"), g = require("focus-trap"), k = require("floating-vue"), T = {
+  name: "NcAppSidebarTabs",
+  components: {
+    NcCheckboxRadioSwitch: o.NcCheckboxRadioSwitch,
+    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((e, a) => e.order === a.order ? OC.Util.naturalSortCompare(e.name, a.name) : e.order - a.order), this.updateActive();
+    },
+    /**
+     * Unregister child tab from the tabs
+     *
+     * @param {string} id tab's id
+     */
+    unregisterTab(i) {
+      const e = this.tabs.findIndex((a) => a.id === i);
+      e !== -1 && this.tabs.splice(e, 1), this.activeTab === i && this.updateActive();
+    }
+  }
+};
+var v = function() {
+  var e = this, a = e._self._c;
+  return a("div", { staticClass: "app-sidebar-tabs" }, [e.hasMultipleTabs ? a("div", { staticClass: "app-sidebar-tabs__nav", attrs: { role: "tablist" }, on: { keydown: [function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "left", 37, t.key, ["Left", "ArrowLeft"]) || "button" in t && t.button !== 0 || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusPreviousTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "right", 39, t.key, ["Right", "ArrowRight"]) || "button" in t && t.button !== 2 || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusNextTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "tab", 9, t.key, "Tab") || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusActiveTabContent.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "home", void 0, t.key, void 0) || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusFirstTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "end", void 0, t.key, void 0) || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusLastTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "page-up", void 0, t.key, void 0) || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusFirstTab.apply(null, arguments));
+  }, function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "page-down", void 0, t.key, void 0) || t.ctrlKey || t.shiftKey || t.altKey || t.metaKey ? null : (t.preventDefault(), t.stopPropagation(), e.focusLastTab.apply(null, arguments));
+  }] } }, e._l(e.tabs, function(t) {
+    return a("NcCheckboxRadioSwitch", { key: t.id, staticClass: "app-sidebar-tabs__tab", class: { active: t.id === e.activeTab }, attrs: { "aria-controls": `tab-${t.id}`, "aria-selected": String(e.activeTab === t.id), "button-variant": !0, checked: e.activeTab === t.id, "wrapper-id": `tab-button-${t.id}`, tabindex: e.activeTab === t.id ? 0 : -1, "button-variant-grouped": "horizontal", role: "tab", type: "button" }, on: { "update:checked": function(R) {
+      return e.setActive(t.id);
+    } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [a("NcVNodes", { attrs: { vnodes: t.renderIcon() } }, [a("span", { staticClass: "app-sidebar-tabs__tab-icon", class: t.icon })])];
+    }, proxy: !0 }], null, !0) }, [a("span", { staticClass: "app-sidebar-tabs__tab-caption" }, [e._v(" " + e._s(t.name) + " ")])]);
+  }), 1) : e._e(), a("div", { staticClass: "app-sidebar-tabs__content", class: { "app-sidebar-tabs__content--multiple": e.hasMultipleTabs } }, [e._t("default")], 2)]);
+}, C = [], S = /* @__PURE__ */ r.normalizeComponent(
+  T,
+  v,
+  C,
+  !1,
+  null,
+  "2ae00fba",
+  null,
+  null
+);
+const N = S.exports;
+s.register(s.t13);
+const L = {
+  name: "StarIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var x = function() {
+  var e = this, a = e._self._c;
+  return a("span", e._b({ staticClass: "material-design-icon star-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(t) {
+    return e.$emit("click", t);
+  } } }, "span", e.$attrs, !1), [a("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.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" } }, [e.title ? a("title", [e._v(e._s(e.title))]) : e._e()])])]);
+}, A = [], w = /* @__PURE__ */ r.normalizeComponent(
+  L,
+  x,
+  A,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const K = w.exports, E = {
+  name: "StarOutlineIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+var F = function() {
+  var e = this, a = e._self._c;
+  return a("span", e._b({ staticClass: "material-design-icon star-outline-icon", attrs: { "aria-hidden": !e.title, "aria-label": e.title, role: "img" }, on: { click: function(t) {
+    return e.$emit("click", t);
+  } } }, "span", e.$attrs, !1), [a("svg", { staticClass: "material-design-icon__svg", attrs: { fill: e.fillColor, width: e.size, height: e.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" } }, [e.title ? a("title", [e._v(e._s(e.title))]) : e._e()])])]);
+}, q = [], I = /* @__PURE__ */ r.normalizeComponent(
+  E,
+  F,
+  q,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const B = I.exports, O = {
+  name: "NcAppSidebar",
+  components: {
+    NcActions: l.NcActions,
+    NcAppSidebarTabs: N,
+    ArrowRight: h.ArrowRight,
+    NcButton: u,
+    NcLoadingIcon: c,
+    NcEmptyContent: d,
+    Close: _.Close,
+    Star: K,
+    StarOutline: B
+  },
+  directives: {
+    focus: p.directive,
+    linkify: f.directive,
+    ClickOutside: y.vOnClickOutside,
+    Tooltip: k.VTooltip
+  },
+  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: b.useIsSmallMobile()
+    };
+  },
+  data() {
+    return {
+      changeNameTranslated: s.t("Change name"),
+      closeTranslated: s.t("Close sidebar"),
+      favoriteTranslated: s.t("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 = g.createFocusTrap([
+        // 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: m.getTrapStack(),
+        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 e = this, a = e._self._c;
+  return a("transition", { attrs: { appear: "", name: "slide-right" }, on: { "before-enter": e.onBeforeEnter, "after-enter": e.onAfterEnter, "before-leave": e.onBeforeLeave, "after-leave": e.onAfterLeave } }, [a("aside", { ref: "sidebar", staticClass: "app-sidebar", attrs: { id: "app-sidebar-vue" }, on: { keydown: function(t) {
+    if (!t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]))
+      return null;
+    t.stopPropagation(), e.isMobile && e.closeSidebar();
+  } } }, [a("header", { staticClass: "app-sidebar-header", class: {
+    "app-sidebar-header--with-figure": e.hasFigure,
+    "app-sidebar-header--compact": e.compact
+  } }, [a("div", { staticClass: "app-sidebar-header__info" }, [e.hasFigure && !e.empty ? a("div", { staticClass: "app-sidebar-header__figure", class: {
+    "app-sidebar-header__figure--with-action": e.hasFigureClickListener
+  }, style: {
+    backgroundImage: `url(${e.background})`
+  }, attrs: { tabindex: "0" }, on: { click: e.onFigureClick, keydown: function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "enter", 13, t.key, "Enter") ? null : e.onFigureClick.apply(null, arguments);
+  } } }, [e._t("header")], 2) : e._e(), e.empty ? e._e() : a("div", { staticClass: "app-sidebar-header__desc", class: {
+    "app-sidebar-header__desc--with-tertiary-action": e.canStar || e.$slots["tertiary-actions"],
+    "app-sidebar-header__desc--editable": e.nameEditable && !e.subname,
+    "app-sidebar-header__desc--with-subname--editable": e.nameEditable && e.subname,
+    "app-sidebar-header__desc--without-actions": !e.$slots["secondary-actions"]
+  } }, [e.canStar || e.$slots["tertiary-actions"] ? a("div", { staticClass: "app-sidebar-header__tertiary-actions" }, [e._t("tertiary-actions", function() {
+    return [e.canStar ? a("NcButton", { staticClass: "app-sidebar-header__star", attrs: { "aria-label": e.favoriteTranslated, pressed: e.isStarred, type: "secondary" }, on: { click: function(t) {
+      return t.preventDefault(), e.toggleStarred.apply(null, arguments);
+    } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+      return [e.starLoading ? a("NcLoadingIcon") : e.isStarred ? a("Star", { attrs: { size: 20 } }) : a("StarOutline", { attrs: { size: 20 } })];
+    }, proxy: !0 }], null, !1, 2575459756) }) : e._e()];
+  })], 2) : e._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: !e.nameEditable, expression: "!nameEditable" }, { name: "linkify", rawName: "v-linkify", value: { text: e.name, linkify: e.linkifyName }, expression: "{text: name, linkify: linkifyName}" }], staticClass: "app-sidebar-header__mainname", attrs: { "aria-label": e.title, title: e.title, tabindex: e.nameEditable ? 0 : void 0 }, on: { click: function(t) {
+    return t.target !== t.currentTarget ? null : e.editName.apply(null, arguments);
+  } } }, [e._v(" " + e._s(e.name) + " ")]), e.nameEditable ? [a("form", { directives: [{ name: "click-outside", rawName: "v-click-outside", value: () => e.onSubmitName(), expression: "() => onSubmitName()" }], staticClass: "app-sidebar-header__mainname-form", on: { submit: function(t) {
+    return t.preventDefault(), e.onSubmitName.apply(null, arguments);
+  } } }, [a("input", { directives: [{ name: "focus", rawName: "v-focus" }], ref: "nameInput", staticClass: "app-sidebar-header__mainname-input", attrs: { type: "text", placeholder: e.namePlaceholder }, domProps: { value: e.name }, on: { keydown: function(t) {
+    return !t.type.indexOf("key") && e._k(t.keyCode, "esc", 27, t.key, ["Esc", "Escape"]) ? null : (t.stopPropagation(), e.onDismissEditing.apply(null, arguments));
+  }, input: e.onNameInput } }), a("NcButton", { attrs: { type: "tertiary-no-background", "aria-label": e.changeNameTranslated, "native-type": "submit" }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [a("ArrowRight", { attrs: { size: 20 } })];
+  }, proxy: !0 }], null, !1, 1252225425) })], 1)] : e._e(), e.$slots["secondary-actions"] ? a("NcActions", { staticClass: "app-sidebar-header__menu", attrs: { "force-menu": e.forceMenu } }, [e._t("secondary-actions")], 2) : e._e()], 2), e.subname.trim() !== "" ? a("p", { staticClass: "app-sidebar-header__subname", attrs: { "aria-label": e.subtitle, title: e.subtitle } }, [e._v(" " + e._s(e.subname) + " ")]) : e._e()])])]), a("NcButton", { ref: "closeButton", staticClass: "app-sidebar__close", attrs: { title: e.closeTranslated, "aria-label": e.closeTranslated, type: "tertiary" }, on: { click: function(t) {
+    return t.preventDefault(), e.closeSidebar.apply(null, arguments);
+  } }, scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [a("Close", { attrs: { size: 20 } })];
+  }, proxy: !0 }]) }), e.$slots.description && !e.empty ? a("div", { staticClass: "app-sidebar-header__description" }, [e._t("description")], 2) : e._e()], 1), a("NcAppSidebarTabs", { directives: [{ name: "show", rawName: "v-show", value: !e.loading, expression: "!loading" }], ref: "tabs", attrs: { active: e.active }, on: { "update:active": e.onUpdateActive } }, [e._t("default")], 2), e.loading ? a("NcEmptyContent", { scopedSlots: e._u([{ key: "icon", fn: function() {
+    return [a("NcLoadingIcon", { attrs: { size: 64 } })];
+  }, proxy: !0 }], null, !1, 826850984) }) : e._e()], 1)]);
+}, D = [], M = /* @__PURE__ */ r.normalizeComponent(
+  O,
+  z,
+  D,
+  !1,
+  null,
+  "15882bc7",
+  null,
+  null
+);
+const P = M.exports;
+exports.NcAppSidebar = P;