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

Nextcloud vue components

import "../assets/index50.css";
import r from "./NcVNodes.mjs";
import n from "./NcCheckboxRadioSwitch.mjs";
import { n as s } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
import o from "./NcActions.mjs";
import l from "./NcLoadingIcon.mjs";
import c from "./NcButton.mjs";
import d from "./NcEmptyContent.mjs";
import { directive as u } from "../Directives/Focus.mjs";
import { directive as p } from "../Directives/Linkify.mjs";
import "../Directives/Tooltip.mjs";
import { t as i } from "../chunks/l10n-9a5a6afc.mjs";
import m from "vue-material-design-icons/ArrowRight.vue";
import b from "vue-material-design-icons/Close.vue";
import f from "vue-material-design-icons/Star.vue";
import h from "vue-material-design-icons/StarOutline.vue";
import { vOnClickOutside as y } from "@vueuse/components";
import { VTooltip as v } from "floating-vue";
const g = { name: "NcAppSidebarTabs", components: { NcCheckboxRadioSwitch: n, NcVNodes: r }, provide() {
  return { registerTab: this.registerTab, unregisterTab: this.unregisterTab, getActiveTab: () => this.activeTab };
}, props: { active: { type: String, default: "" } }, emits: ["update:active"], data() {
  return { tabs: [], activeTab: "" };
}, computed: { hasMultipleTabs() {
  return this.tabs.length > 1;
}, currentTabIndex() {
  return this.tabs.findIndex((e) => e.id === this.activeTab);
} }, watch: { active(e) {
  e !== this.activeTab && this.updateActive();
} }, methods: { setActive(e) {
  this.activeTab = e, this.$emit("update:active", this.activeTab);
}, focusPreviousTab() {
  this.currentTabIndex > 0 && this.setActive(this.tabs[this.currentTabIndex - 1].id), this.focusActiveTab();
}, focusNextTab() {
  this.currentTabIndex < this.tabs.length - 1 && this.setActive(this.tabs[this.currentTabIndex + 1].id), this.focusActiveTab();
}, focusFirstTab() {
  this.setActive(this.tabs[0].id), this.focusActiveTab();
}, focusLastTab() {
  this.setActive(this.tabs[this.tabs.length - 1].id), this.focusActiveTab();
}, focusActiveTab() {
  this.$el.querySelector(`[data-id="${this.activeTab}"]`).focus();
}, focusActiveTabContent() {
  this.$el.querySelector("#tab-" + this.activeTab).focus();
}, updateActive() {
  this.activeTab = this.active && this.tabs.some((e) => e.id === this.active) ? this.active : this.tabs.length > 0 ? this.tabs[0].id : "";
}, registerTab(e) {
  this.tabs.push(e), this.tabs.sort((a, t) => a.order === t.order ? OC.Util.naturalSortCompare(a.name, t.name) : a.order - t.order), this.updateActive();
}, unregisterTab(e) {
  const a = this.tabs.findIndex((t) => t.id === e);
  a !== -1 && this.tabs.splice(a, 1), this.activeTab === e && this.updateActive();
} } };
var _ = 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") && t.keyCode !== 33 || 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") && t.keyCode !== 34 || 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": e.activeTab === t.id, "button-variant": !0, checked: e.activeTab === t.id, "data-id": t.id, tabindex: e.activeTab === t.id ? 0 : -1, "button-variant-grouped": "horizontal", role: "tab", type: "button" }, on: { "update:checked": function($) {
      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)]);
}, k = [], T = s(g, _, k, !1, null, "b4df3f5e", null, null);
const C = T.exports;
const S = { name: "NcAppSidebar", components: { NcActions: o, NcAppSidebarTabs: C, ArrowRight: m, NcButton: c, NcLoadingIcon: l, NcEmptyContent: d, Close: b, Star: f, StarOutline: h }, directives: { focus: u, linkify: p, ClickOutside: y, Tooltip: v }, props: { active: { type: String, default: "" }, name: { type: String, default: "", required: !0 }, nameEditable: { type: Boolean, default: !1 }, namePlaceholder: { type: String, default: "" }, subname: { type: String, default: "" }, subtitle: { type: String, default: "" }, background: { type: String, default: "" }, starred: { type: Boolean, default: null }, starLoading: { type: Boolean, default: !1 }, loading: { type: Boolean, default: !1 }, compact: { type: Boolean, default: !1 }, empty: { type: Boolean, default: !1 }, forceMenu: { type: Boolean, default: !1 }, linkifyName: { type: Boolean, default: !1 }, title: { type: String, default: "" } }, emits: ["close", "closing", "closed", "opening", "opened", "figure-click", "update:starred", "update:nameEditable", "update:name", "update:active", "submit-name", "dismiss-editing"], data() {
  return { changeNameTranslated: i("Change name"), closeTranslated: i("Close sidebar"), favoriteTranslated: i("Favorite"), isStarred: this.starred };
}, 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;
} }, beforeDestroy() {
  this.$emit("closed");
}, methods: { onBeforeEnter(e) {
  this.$emit("opening", e);
}, onAfterEnter(e) {
  this.$emit("opened", e);
}, onBeforeLeave(e) {
  this.$emit("closing", e);
}, onAfterLeave(e) {
  this.$emit("closed", e);
}, closeSidebar(e) {
  this.$emit("close", e);
}, onFigureClick(e) {
  this.$emit("figure-click", e);
}, 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());
}, onNameInput(e) {
  this.$emit("update:name", e.target.value);
}, onSubmitName(e) {
  this.$emit("update:nameEditable", !1), this.$emit("submit-name", e);
}, onDismissEditing() {
  this.$emit("update:nameEditable", !1), this.$emit("dismiss-editing");
}, onUpdateActive(e) {
  this.$emit("update:active", e);
} } };
var N = 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", { staticClass: "app-sidebar", attrs: { id: "app-sidebar-vue" } }, [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", { 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)]);
}, x = [], A = s(S, N, x, !1, null, "90858b97", null, null);
const X = A.exports;
export {
  X as default
};