@nextcloud/vue 8.4.0 → 9.0.0-alpha.0

package/dist/Components/NcAppSidebar.cjs

@@ -1,552 +1,3 @@
-var V = require("../assets/index-2d5cf6b2.css");
-const n = require("./NcVNodes.cjs"), o = require("./NcCheckboxRadioSwitch.cjs"), r = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), l = require("./NcActions.cjs"), c = require("./NcLoadingIcon.cjs"), u = require("./NcButton.cjs"), d = require("./NcEmptyContent.cjs"), p = require("../Directives/Focus.cjs"), f = require("../Directives/Linkify.cjs");
-require("../Directives/Tooltip.cjs");
-const b = require("../Composables/useIsMobile.cjs"), m = require("../chunks/focusTrap-14985831.cjs"), s = require("../chunks/_l10n-72c5e29e.cjs"), _ = require("../chunks/ArrowRight-7315f6c1.cjs"), h = require("../chunks/Close-98cb6f12.cjs"), y = require("@vueuse/components"), g = require("focus-trap"), k = require("floating-vue");
-const v = {
-  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((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 T = 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(
-  v,
-  T,
-  C,
-  !1,
-  null,
-  "2ae00fba",
-  null,
-  null
-);
-const N = S.exports;
-s.register(s.t13);
-const x = {
-  name: "StarIcon",
-  emits: ["click"],
-  props: {
-    title: {
-      type: String
-    },
-    fillColor: {
-      type: String,
-      default: "currentColor"
-    },
-    size: {
-      type: Number,
-      default: 24
-    }
-  }
-};
-var L = 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(
-  x,
-  L,
-  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;
-const O = {
-  name: "NcAppSidebar",
-  components: {
-    NcActions: l,
-    NcAppSidebarTabs: N,
-    ArrowRight: _.ArrowRight,
-    NcButton: u,
-    NcLoadingIcon: c,
-    NcEmptyContent: d,
-    Close: h.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() {
-    var i;
-    this.$emit("closed"), (i = this.focusTrap) == null || i.deactivate();
-  },
-  methods: {
-    initFocusTrap() {
-      var i;
-      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
-        (i = document.querySelector('[aria-controls="app-navigation-vue"]')) == null ? void 0 : i.parentElement
-      ], {
-        allowOutsideClick: !0,
-        fallbackFocus: this.$refs.closeButton,
-        trapStack: m.getTrapStack(),
-        escapeDeactivates: !1
-      }));
-    },
-    /**
-     * Activate focus trap if it is currently needed, otherwise deactivate
-     */
-    toggleFocusTrap() {
-      var i;
-      this.isMobile ? (this.initFocusTrap(), this.focusTrap.activate()) : (i = this.focusTrap) == null || i.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;
-module.exports = P;
+"use strict";
+const e = require("../chunks/NcAppSidebar-19vWkj82.cjs");
+module.exports = e.NcAppSidebar;