@nextcloud/vue 8.6.0 → 9.0.0-alpha.1

package/dist/chunks/NcAppSidebar-lE3w-VIf.mjs

@@ -1,565 +0,0 @@
-import '../assets/NcAppSidebar-iU8Zp4Qk.css';
-import n from "../Components/NcVNodes.mjs";
-import { N as o } from "./NcCheckboxRadioSwitch-paTuPXGc.mjs";
-import { n as s } from "./_plugin-vue2_normalizer-u6G_3nkj.mjs";
-import { N as l } from "./NcActions-bAnBpPrc.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--bDJ_Qyj.mjs";
-import { A as y } from "./ArrowRight-16bLxoZc.mjs";
-import { C as g } from "./Close-QtH6_3PP.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 ? null : !0, "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 ? null : !0, "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 ot = q.exports;
-export {
-  ot as N
-};