@nextcloud/vue 8.5.0 → 9.0.0-alpha.0

package/dist/chunks/NcAppNavigationItem-VR6oSt2q.mjs

@@ -0,0 +1,608 @@
+import "../assets/NcAppNavigationItem-V2jQd3bm.css";
+import { N as D } from "./NcActions-6Yv0De7D.mjs";
+import { N as E } from "./NcActionButton-TAhaLmwa.mjs";
+import { N as M } from "./NcLoadingIcon-DnhhU7Z8.mjs";
+import P from "../Components/NcVNodes.mjs";
+import { r as w, M as O, a as C, c as T, N as K } from "./_l10n-JmazR_zZ.mjs";
+import { N as R } from "./NcButton-nCkJxwsi.mjs";
+import { C as F } from "./ChevronDown-hP8YKVnf.mjs";
+import { openBlock as i, createElementBlock as l, mergeProps as B, createElementVNode as h, toDisplayString as g, createCommentVNode as d, resolveComponent as c, createBlock as u, normalizeClass as p, withCtx as f, resolveDynamicComponent as H, normalizeProps as Z, guardReactiveProps as q, withKeys as G, withModifiers as I, renderSlot as m, createVNode as N, createTextVNode as j } from "vue";
+import { _ } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+import { useIsMobile as J } from "../Composables/useIsMobile.mjs";
+import { N as Q } from "./NcInputConfirmCancel-cDJ5_L-Z.mjs";
+import { G as W } from "./GenRandomId-VodkdWbp.mjs";
+w(O);
+const X = {
+  name: "ChevronUpIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, Y = ["aria-hidden", "aria-label"], x = ["fill", "width", "height"], $ = { d: "M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" }, ee = { key: 0 };
+function te(t, a, e, y, o, n) {
+  return i(), l("span", B(t.$attrs, {
+    "aria-hidden": !e.title,
+    "aria-label": e.title,
+    class: "material-design-icon chevron-up-icon",
+    role: "img",
+    onClick: a[0] || (a[0] = (s) => t.$emit("click", s))
+  }), [
+    (i(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      h("path", $, [
+        e.title ? (i(), l("title", ee, g(e.title), 1)) : d("", !0)
+      ])
+    ], 8, x))
+  ], 16, Y);
+}
+const ne = /* @__PURE__ */ _(X, [["render", te]]), ie = {
+  name: "NcAppNavigationIconCollapsible",
+  components: {
+    NcButton: R,
+    ChevronDown: F,
+    ChevronUp: ne
+  },
+  props: {
+    open: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: ["click"],
+  computed: {
+    labelButton() {
+      return this.open ? C("Collapse menu") : C("Open menu");
+    }
+  },
+  methods: {
+    onClick(t) {
+      this.$emit("click", t);
+    }
+  }
+};
+function ae(t, a, e, y, o, n) {
+  const s = c("ChevronUp"), k = c("ChevronDown"), b = c("NcButton");
+  return i(), u(b, {
+    class: p(["icon-collapse", { "icon-collapse--open": e.open }]),
+    type: "tertiary",
+    "aria-label": n.labelButton,
+    onClick: n.onClick
+  }, {
+    icon: f(() => [
+      e.open ? (i(), u(s, {
+        key: 0,
+        size: 20
+      })) : (i(), u(k, {
+        key: 1,
+        size: 20
+      }))
+    ]),
+    _: 1
+  }, 8, ["class", "aria-label", "onClick"]);
+}
+const le = /* @__PURE__ */ _(ie, [["render", ae], ["__scopeId", "data-v-19e64b50"]]);
+w(K, T);
+const oe = {
+  name: "PencilIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, de = ["aria-hidden", "aria-label"], ce = ["fill", "width", "height"], se = { d: "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" }, re = { key: 0 };
+function ue(t, a, e, y, o, n) {
+  return i(), l("span", B(t.$attrs, {
+    "aria-hidden": !e.title,
+    "aria-label": e.title,
+    class: "material-design-icon pencil-icon",
+    role: "img",
+    onClick: a[0] || (a[0] = (s) => t.$emit("click", s))
+  }), [
+    (i(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      h("path", se, [
+        e.title ? (i(), l("title", re, g(e.title), 1)) : d("", !0)
+      ])
+    ], 8, ce))
+  ], 16, de);
+}
+const fe = /* @__PURE__ */ _(oe, [["render", ue]]), me = {
+  name: "UndoIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+}, he = ["aria-hidden", "aria-label"], ge = ["fill", "width", "height"], pe = { d: "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z" }, _e = { key: 0 };
+function ye(t, a, e, y, o, n) {
+  return i(), l("span", B(t.$attrs, {
+    "aria-hidden": !e.title,
+    "aria-label": e.title,
+    class: "material-design-icon undo-icon",
+    role: "img",
+    onClick: a[0] || (a[0] = (s) => t.$emit("click", s))
+  }), [
+    (i(), l("svg", {
+      fill: e.fillColor,
+      class: "material-design-icon__svg",
+      width: e.size,
+      height: e.size,
+      viewBox: "0 0 24 24"
+    }, [
+      h("path", pe, [
+        e.title ? (i(), l("title", _e, g(e.title), 1)) : d("", !0)
+      ])
+    ], 8, ge))
+  ], 16, he);
+}
+const ve = /* @__PURE__ */ _(me, [["render", ye]]), Ce = {
+  name: "NcAppNavigationItem",
+  components: {
+    NcActions: D,
+    NcActionButton: E,
+    NcAppNavigationIconCollapsible: le,
+    NcInputConfirmCancel: Q,
+    NcLoadingIcon: M,
+    NcVNodes: P,
+    Pencil: fe,
+    Undo: ve
+  },
+  props: {
+    /**
+     * If you are not using vue-router you can use the property to set this item as the active navigation entry.
+     * When using vue-router and the `to` property this is set automatically.
+     */
+    active: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The main text content of the entry.
+     */
+    name: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The title attribute of the element.
+     */
+    title: {
+      type: String,
+      default: null
+    },
+    /**
+     * id attribute of the list item element
+     */
+    id: {
+      type: String,
+      default: () => "app-navigation-item-" + W(),
+      validator: (t) => t.trim() !== ""
+    },
+    /**
+     * Refers to the icon on the left, this prop accepts a class
+     * like 'icon-category-enabled'.
+     */
+    icon: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Displays a loading animated icon on the left of the element
+     * instead of the icon.
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Passing in a route will make the root element of this
+     * component a `<router-link />` that points to that route.
+     * By leaving this blank, the root element will be a `<li>`.
+     */
+    to: {
+      type: [String, Object],
+      default: null
+    },
+    /**
+     * A direct link. This will be used as the `href` attribute.
+     * This will ignore any `to` prop being defined.
+     */
+    href: {
+      type: String,
+      default: null
+    },
+    /**
+     * Gives the possibility to collapse the children elements into the
+     * parent element (true) or expands the children elements (false).
+     */
+    allowCollapse: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Makes the name of the item editable by providing an `ActionButton`
+     * component that toggles a form
+     */
+    editable: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Only for 'editable' items, sets label for the edit action button.
+     */
+    editLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Only for items in 'editable' mode, sets the placeholder text for the editing form.
+     */
+    editPlaceholder: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Pins the item to the bottom left area, above the settings. Do not
+     * place 'non-pinned' `AppnavigationItem` components below `pinned`
+     * ones.
+     */
+    pinned: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Puts the item in the 'undo' state.
+     */
+    undo: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The navigation collapsible state (synced)
+     */
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The actions menu open state (synced)
+     */
+    menuOpen: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Force the actions to display in a three dot menu
+     */
+    forceMenu: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The action's menu default icon
+     */
+    menuIcon: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * The action's menu direction
+     */
+    menuPlacement: {
+      type: String,
+      default: "bottom"
+    },
+    /**
+     * Entry aria details
+     */
+    ariaDescription: {
+      type: String,
+      default: null
+    },
+    /**
+     * To be used only when the elements in the actions menu are very important
+     */
+    forceDisplayActions: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Number of action items outside the menu
+     */
+    inlineActions: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: [
+    "update:menuOpen",
+    "update:open",
+    "update:name",
+    "click",
+    "undo"
+  ],
+  setup() {
+    return {
+      isMobile: J()
+    };
+  },
+  data() {
+    return {
+      editingValue: "",
+      opened: this.open,
+      // Collapsible state
+      editingActive: !1,
+      /**
+       * Tracks the open state of the actions menu
+       */
+      menuOpenLocalValue: !1,
+      focused: !1
+    };
+  },
+  computed: {
+    isRouterLink() {
+      return this.to && !this.href;
+    },
+    // Checks if the component is already a children of another
+    // instance of AppNavigationItem
+    canHaveChildren() {
+      return this.$parent.$options._componentTag !== "AppNavigationItem";
+    },
+    editButtonAriaLabel() {
+      return this.editLabel ? this.editLabel : C("Edit item");
+    },
+    undoButtonAriaLabel() {
+      return C("Undo changes");
+    },
+    actionsBoundariesElement() {
+      return document.querySelector("#content-vue") || void 0;
+    }
+  },
+  watch: {
+    open(t) {
+      this.opened = t;
+    }
+  },
+  methods: {
+    // sync opened menu state with prop
+    onMenuToggle(t) {
+      this.$emit("update:menuOpen", t), this.menuOpenLocalValue = t;
+    },
+    // toggle the collapsible state
+    toggleCollapse() {
+      this.opened = !this.opened, this.$emit("update:open", this.opened);
+    },
+    /**
+     * Handle link click
+     *
+     * @param {PointerEvent} event - Native click event
+     * @param {Function} [navigate] - VueRouter link's navigate if any
+     * @param {string} [routerLinkHref] - VueRouter link's href
+     */
+    onClick(t, a, e) {
+      this.$emit("click", t), !(t.metaKey || t.altKey || t.ctrlKey || t.shiftKey) && e && (a?.(t), t.preventDefault());
+    },
+    // Edition methods
+    handleEdit() {
+      this.editingValue = this.name, this.editingActive = !0, this.onMenuToggle(!1), this.$nextTick(() => {
+        this.$refs.editingInput.focusInput();
+      });
+    },
+    cancelEditing() {
+      this.editingActive = !1;
+    },
+    handleEditingDone() {
+      this.$emit("update:name", this.editingValue), this.editingValue = "", this.editingActive = !1;
+    },
+    // Undo methods
+    handleUndo() {
+      this.$emit("undo");
+    },
+    /**
+     * Show actions upon focus
+     */
+    handleFocus() {
+      this.focused = !0;
+    },
+    handleBlur() {
+      this.focused = !1;
+    },
+    /**
+     * This method checks if the root element of the component is focused and
+     * if that's the case it focuses the actions button if available
+     *
+     * @param {Event} e the keydown event
+     */
+    handleTab(t) {
+      this.$refs.actions && (this.focused ? (t.preventDefault(), this.$refs.actions.$refs.menuButton.$el.focus(), this.focused = !1) : this.$refs.actions.$refs.menuButton.$el.blur());
+    },
+    /**
+     * Is this an external link
+     *
+     * @param {string} href The link to check
+     * @return {boolean} Whether it is external or not
+     */
+    isExternal(t) {
+      return t && t.match(/[a-z]+:\/\//i);
+    }
+  }
+}, ke = ["id"], be = ["aria-current", "aria-description", "aria-expanded", "href", "target", "title", "onClick"], Ne = {
+  key: 0,
+  class: "app-navigation-entry__name"
+}, Be = {
+  key: 1,
+  class: "editingContainer"
+}, Le = {
+  key: 1,
+  class: "app-navigation-entry__deleted"
+}, Ae = { class: "app-navigation-entry__deleted-description" }, Ie = {
+  key: 0,
+  class: "app-navigation-entry__counter-wrapper"
+}, we = {
+  key: 0,
+  class: "app-navigation-entry__children"
+};
+function Se(t, a, e, y, o, n) {
+  const s = c("NcLoadingIcon"), k = c("NcInputConfirmCancel"), b = c("Pencil"), L = c("NcActionButton"), S = c("Undo"), V = c("NcActions"), z = c("NcAppNavigationIconCollapsible");
+  return i(), l("li", {
+    id: e.id,
+    class: p([{
+      "app-navigation-entry--opened": o.opened,
+      "app-navigation-entry--pinned": e.pinned,
+      "app-navigation-entry--collapsible": e.allowCollapse && !!t.$slots.default
+    }, "app-navigation-entry-wrapper"])
+  }, [
+    (i(), u(H(n.isRouterLink ? "router-link" : "NcVNodes"), Z(q({ ...n.isRouterLink && { custom: !0, to: e.to } })), {
+      default: f(({ href: A, navigate: U, isActive: v }) => [
+        h("div", {
+          class: p([{
+            "app-navigation-entry--editing": o.editingActive,
+            "app-navigation-entry--deleted": e.undo,
+            active: v && e.to || e.active
+          }, "app-navigation-entry"])
+        }, [
+          e.undo ? d("", !0) : (i(), l("a", {
+            key: 0,
+            class: "app-navigation-entry-link",
+            "aria-current": e.active || v && e.to ? "page" : void 0,
+            "aria-description": e.ariaDescription,
+            "aria-expanded": t.$slots.default ? o.opened.toString() : void 0,
+            href: e.href || A || "#",
+            target: n.isExternal(e.href) ? "_blank" : void 0,
+            title: e.title || e.name,
+            onBlur: a[1] || (a[1] = (...r) => n.handleBlur && n.handleBlur(...r)),
+            onClick: (r) => n.onClick(r, U, A),
+            onFocus: a[2] || (a[2] = (...r) => n.handleFocus && n.handleFocus(...r)),
+            onKeydown: a[3] || (a[3] = G(I((...r) => n.handleTab && n.handleTab(...r), ["exact"]), ["tab"]))
+          }, [
+            h("div", {
+              class: p([{ [e.icon]: e.icon }, "app-navigation-entry-icon"])
+            }, [
+              e.loading ? (i(), u(s, { key: 0 })) : m(t.$slots, "icon", { key: 1 }, void 0, !0)
+            ], 2),
+            o.editingActive ? d("", !0) : (i(), l("span", Ne, g(e.name), 1)),
+            o.editingActive ? (i(), l("div", Be, [
+              N(k, {
+                ref: "editingInput",
+                modelValue: o.editingValue,
+                "onUpdate:modelValue": a[0] || (a[0] = (r) => o.editingValue = r),
+                placeholder: e.editPlaceholder !== "" ? e.editPlaceholder : e.name,
+                primary: v && e.to || e.active,
+                onCancel: n.cancelEditing,
+                onConfirm: n.handleEditingDone
+              }, null, 8, ["modelValue", "placeholder", "primary", "onCancel", "onConfirm"])
+            ])) : d("", !0)
+          ], 40, be)),
+          e.undo ? (i(), l("div", Le, [
+            h("div", Ae, g(e.name), 1)
+          ])) : d("", !0),
+          (t.$slots.actions || t.$slots.counter || e.editable || e.undo) && !o.editingActive ? (i(), l("div", {
+            key: 2,
+            class: p(["app-navigation-entry__utils", { "app-navigation-entry__utils--display-actions": e.forceDisplayActions || o.menuOpenLocalValue || e.menuOpen }])
+          }, [
+            t.$slots.counter ? (i(), l("div", Ie, [
+              m(t.$slots, "counter", {}, void 0, !0)
+            ])) : d("", !0),
+            t.$slots.actions || e.editable && !o.editingActive || e.undo ? (i(), u(V, {
+              key: 1,
+              ref: "actions",
+              inline: e.inlineActions,
+              class: "app-navigation-entry__actions",
+              container: "#app-navigation-vue",
+              "boundaries-element": n.actionsBoundariesElement,
+              placement: e.menuPlacement,
+              open: e.menuOpen,
+              type: v && e.to || e.active ? "primary" : null,
+              "force-menu": e.forceMenu,
+              "default-icon": e.menuIcon,
+              "onUpdate:open": n.onMenuToggle
+            }, {
+              icon: f(() => [
+                m(t.$slots, "menu-icon", {}, void 0, !0)
+              ]),
+              default: f(() => [
+                e.editable && !o.editingActive ? (i(), u(L, {
+                  key: 0,
+                  "aria-label": n.editButtonAriaLabel,
+                  onClick: n.handleEdit
+                }, {
+                  icon: f(() => [
+                    N(b, { size: 20 })
+                  ]),
+                  default: f(() => [
+                    j(" " + g(e.editLabel), 1)
+                  ]),
+                  _: 1
+                }, 8, ["aria-label", "onClick"])) : d("", !0),
+                e.undo ? (i(), u(L, {
+                  key: 1,
+                  "aria-label": n.undoButtonAriaLabel,
+                  onClick: n.handleUndo
+                }, {
+                  icon: f(() => [
+                    N(S, { size: 20 })
+                  ]),
+                  _: 1
+                }, 8, ["aria-label", "onClick"])) : d("", !0),
+                m(t.$slots, "actions", {}, void 0, !0)
+              ]),
+              _: 2
+            }, 1032, ["inline", "boundaries-element", "placement", "open", "type", "force-menu", "default-icon", "onUpdate:open"])) : d("", !0)
+          ], 2)) : d("", !0),
+          e.allowCollapse && t.$slots.default ? (i(), u(z, {
+            key: 3,
+            open: o.opened,
+            onClick: I(n.toggleCollapse, ["prevent", "stop"])
+          }, null, 8, ["open", "onClick"])) : d("", !0),
+          m(t.$slots, "extra", {}, void 0, !0)
+        ], 2)
+      ]),
+      _: 3
+    }, 16)),
+    n.canHaveChildren && t.$slots.default ? (i(), l("ul", we, [
+      m(t.$slots, "default", {}, void 0, !0)
+    ])) : d("", !0)
+  ], 10, ke);
+}
+const Ze = /* @__PURE__ */ _(Ce, [["render", Se], ["__scopeId", "data-v-59cd1882"]]);
+export {
+  Ze as N
+};