@nextcloud/vue 9.10.0 → 9.11.0

package/dist/chunks/NcAppSettingsDialog.mjs

@@ -21,10 +21,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const appSettingsDialogVersion = "_appSettingsDialogVersion_5OBbS";
-const appSettingsDialogVersion__legacy = "_appSettingsDialogVersion__legacy_Yk7jk";
+const appSettingsDialogVersion = "_appSettingsDialogVersion_e4tNO";
+const appSettingsDialogVersion__legacy = "_appSettingsDialogVersion__legacy_AeUZg";
 const style0 = {
-  "material-design-icon": "_material-design-icon_TcYcq",
+  "material-design-icon": "_material-design-icon_MFxpL",
   appSettingsDialogVersion,
   appSettingsDialogVersion__legacy
 };

package/dist/chunks/NcAppSettingsShortcutsSection.mjs

@@ -24,7 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const appSettingsSectionShortcuts = "_appSettingsSectionShortcuts_DBjUV";
+const appSettingsSectionShortcuts = "_appSettingsSectionShortcuts_Flb3s";
 const style0 = {
   appSettingsSectionShortcuts
 };

package/dist/chunks/NcAppSidebar.mjs

@@ -1,7 +1,7 @@
 import '../assets/NcAppSidebar.css';
 import { vOnClickOutside } from "@vueuse/components";
 import { createFocusTrap } from "focus-trap";
-import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, defineComponent, useModel, normalizeClass, unref, createVNode, withCtx, mergeModels, resolveComponent, withKeys, withModifiers, Fragment, renderList, createBlock, renderSlot, resolveDirective, Transition, withDirectives, Teleport, normalizeStyle, vShow, createTextVNode, warn, ref, provide } from "vue";
+import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, defineComponent, useModel, ref, normalizeClass, unref, createVNode, withCtx, mergeModels, resolveComponent, withKeys, withModifiers, normalizeStyle, Fragment, renderList, createBlock, renderSlot, resolveDirective, Transition, withDirectives, Teleport, vShow, createTextVNode, warn, provide } from "vue";
 import { I as IconArrowRight } from "./ArrowRight.mjs";
 import { I as IconClose } from "./Close.mjs";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper.mjs";
@@ -153,7 +153,8 @@ const _hoisted_1$2 = ["aria-selected", "tabindex"];
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "NcAppSidebarTabsButton",
   props: /* @__PURE__ */ mergeModels({
-    tab: {}
+    tab: {},
+    animatedHighlight: { type: Boolean }
   }, {
     "selected": { type: Boolean, ...{ required: true } },
     "selectedModifiers": {}
@@ -161,31 +162,59 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   emits: ["update:selected"],
   setup(__props) {
     const selected = useModel(__props, "selected");
+    const popping = ref(false);
+    function onClick() {
+      selected.value = true;
+      popping.value = false;
+      requestAnimationFrame(() => {
+        popping.value = true;
+      });
+    }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("button", {
         class: normalizeClass(["button-vue", [_ctx.$style.sidebarTabsButton, {
           [_ctx.$style.sidebarTabsButton_selected]: selected.value,
-          [_ctx.$style.sidebarTabsButton_legacy]: unref(isLegacy34)
+          [_ctx.$style.sidebarTabsButton_legacy]: unref(isLegacy34),
+          [_ctx.$style.sidebarTabsButton_animatedHighlight]: __props.animatedHighlight
         }]]),
         role: "tab",
         "aria-selected": selected.value,
         tabindex: selected.value ? 0 : -1,
-        onClick: _cache[0] || (_cache[0] = ($event) => selected.value = true)
+        onClick
       }, [
         createElementVNode("span", {
-          class: normalizeClass(_ctx.$style.sidebarTabsButton__icon)
+          class: normalizeClass([_ctx.$style.sidebarTabsButton__icon, { [_ctx.$style.sidebarTabsButton__icon_pop]: popping.value }]),
+          onAnimationend: _cache[0] || (_cache[0] = ($event) => popping.value = false)
         }, [
-          createVNode(_sfc_main$6, {
-            vnodes: __props.tab.renderIcon()
-          }, {
-            default: withCtx(() => [
-              createElementVNode("span", {
-                class: normalizeClass([_ctx.$style.sidebarTabsButton__legacyIcon, __props.tab.icon])
-              }, null, 2)
-            ]),
-            _: 1
-          }, 8, ["vnodes"])
-        ], 2),
+          createElementVNode("span", {
+            class: normalizeClass([_ctx.$style.sidebarTabsButton__iconLayer, { [_ctx.$style.sidebarTabsButton__iconLayer_hidden]: selected.value }])
+          }, [
+            createVNode(_sfc_main$6, {
+              vnodes: __props.tab.renderIcon(false)
+            }, {
+              default: withCtx(() => [
+                createElementVNode("span", {
+                  class: normalizeClass([_ctx.$style.sidebarTabsButton__legacyIcon, __props.tab.icon])
+                }, null, 2)
+              ]),
+              _: 1
+            }, 8, ["vnodes"])
+          ], 2),
+          createElementVNode("span", {
+            class: normalizeClass([_ctx.$style.sidebarTabsButton__iconLayer, { [_ctx.$style.sidebarTabsButton__iconLayer_hidden]: !selected.value }])
+          }, [
+            createVNode(_sfc_main$6, {
+              vnodes: __props.tab.renderIcon(true)
+            }, {
+              default: withCtx(() => [
+                createElementVNode("span", {
+                  class: normalizeClass([_ctx.$style.sidebarTabsButton__legacyIcon, __props.tab.icon])
+                }, null, 2)
+              ]),
+              _: 1
+            }, 8, ["vnodes"])
+          ], 2)
+        ], 34),
         createElementVNode("span", {
           class: normalizeClass(_ctx.$style.sidebarTabsButton__name)
         }, toDisplayString(__props.tab.name), 3)
@@ -193,19 +222,28 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const sidebarTabsButton = "_sidebarTabsButton_3uUxm";
-const sidebarTabsButton_legacy = "_sidebarTabsButton_legacy_8I4No";
-const sidebarTabsButton_selected = "_sidebarTabsButton_selected_TTi-7";
-const sidebarTabsButton__name = "_sidebarTabsButton__name_gxwxO";
-const sidebarTabsButton__icon = "_sidebarTabsButton__icon_bvmhq";
-const sidebarTabsButton__legacyIcon = "_sidebarTabsButton__legacyIcon_LcBj6";
+const sidebarTabsButton = "_sidebarTabsButton_q3kBA";
+const sidebarTabsButton_legacy = "_sidebarTabsButton_legacy_KQ4d1";
+const sidebarTabsButton_selected = "_sidebarTabsButton_selected_Pjayf";
+const sidebarTabsButton_animatedHighlight = "_sidebarTabsButton_animatedHighlight_uvp-0";
+const sidebarTabsButton__name = "_sidebarTabsButton__name_rlQsL";
+const sidebarTabsButton__icon = "_sidebarTabsButton__icon_QzZg4";
+const sidebarTabsButton__iconLayer = "_sidebarTabsButton__iconLayer_ZkZan";
+const sidebarTabsButton__iconLayer_hidden = "_sidebarTabsButton__iconLayer_hidden_c7Cpv";
+const sidebarTabsButton__icon_pop = "_sidebarTabsButton__icon_pop_IA0By";
+const sidebarTabsButton__legacyIcon = "_sidebarTabsButton__legacyIcon_QhcNW";
 const style0 = {
-  "material-design-icon": "_material-design-icon_TZhKn",
+  "material-design-icon": "_material-design-icon_GQ9O0",
   sidebarTabsButton,
   sidebarTabsButton_legacy,
   sidebarTabsButton_selected,
+  sidebarTabsButton_animatedHighlight,
   sidebarTabsButton__name,
   sidebarTabsButton__icon,
+  sidebarTabsButton__iconLayer,
+  sidebarTabsButton__iconLayer_hidden,
+  sidebarTabsButton__icon_pop,
+  "sidebar-tab-icon-pop": "_sidebar-tab-icon-pop_mqaHb",
   sidebarTabsButton__legacyIcon
 };
 const cssModules = {
@@ -254,7 +292,20 @@ const _sfc_main$1 = {
        * Local active (open) tab's ID. It allows to use component without v-model:active
        */
       activeTab: props.active,
-      isLegacy34
+      isLegacy34,
+      /** Whether the sliding highlight runs (JS mounted, non-legacy design) */
+      highlightEnabled: false,
+      /** Whether the highlight is currently shown */
+      highlightVisible: false,
+      /** Whether position changes should transition (slide) or snap */
+      highlightAnimated: false,
+      /** Whether the highlight sits on the active tab (turns transparent) */
+      highlightOverActive: false,
+      /** Highlight geometry inside the tablist, in pixels */
+      highlightLeft: 0,
+      highlightTop: 0,
+      highlightWidth: 0,
+      highlightHeight: 0
     };
   },
   computed: {
@@ -271,6 +322,13 @@ const _sfc_main$1 = {
     },
     currentTabIndex() {
       return this.tabs.findIndex((tab) => tab.id === this.activeTab);
+    },
+    highlightStyle() {
+      return {
+        transform: `translate(${this.highlightLeft}px, ${this.highlightTop}px)`,
+        width: `${this.highlightWidth}px`,
+        height: `${this.highlightHeight}px`
+      };
     }
   },
   watch: {
@@ -285,6 +343,10 @@ const _sfc_main$1 = {
       }
     }
   },
+  mounted() {
+    this.highlightedButton = null;
+    this.highlightEnabled = !this.isLegacy34;
+  },
   methods: {
     /**
      * Set the current active tab
@@ -378,6 +440,62 @@ const _sfc_main$1 = {
       if (this.activeTab === id) {
         this.updateActive();
       }
+    },
+    /**
+     * Move the sliding highlight onto a tab button. It slides there if
+     * already visible, otherwise it snaps into place so it does not slide in
+     * from a previously hovered tab. Over the active tab it turns transparent
+     * so the active tab keeps its own static background.
+     *
+     * @param {HTMLElement} button the tab button element to cover
+     */
+    showHighlightOn(button) {
+      const buttonRect = button.getBoundingClientRect();
+      const navRect = this.$refs.nav.getBoundingClientRect();
+      const wasVisible = this.highlightVisible;
+      this.highlightAnimated = wasVisible;
+      this.highlightOverActive = button.getAttribute("aria-selected") === "true";
+      this.highlightLeft = buttonRect.left - navRect.left;
+      this.highlightTop = buttonRect.top - navRect.top;
+      this.highlightWidth = buttonRect.width;
+      this.highlightHeight = buttonRect.height;
+      if (!wasVisible) {
+        this.highlightVisible = true;
+        this.$nextTick(() => requestAnimationFrame(() => {
+          this.highlightAnimated = true;
+        }));
+      }
+    },
+    /** Hide the sliding highlight */
+    hideHighlight() {
+      this.highlightVisible = false;
+      this.highlightedButton = null;
+    },
+    /**
+     * Move the highlight to the tab button under the pointer or focus
+     *
+     * @param {Event} event the pointer or focus event
+     */
+    handleHighlight(event) {
+      if (!this.highlightEnabled) {
+        return;
+      }
+      const button = event.target?.closest?.(".app-sidebar-tabs__tab");
+      if (!button || button === this.highlightedButton || !this.$refs.nav.contains(button)) {
+        return;
+      }
+      this.highlightedButton = button;
+      this.showHighlightOn(button);
+    },
+    /**
+     * Hide the highlight once focus leaves the tablist entirely
+     *
+     * @param {FocusEvent} event the focusout event
+     */
+    onHighlightFocusOut(event) {
+      if (this.highlightEnabled && !this.$refs.nav.contains(event.relatedTarget)) {
+        this.hideHighlight();
+      }
     }
   }
 };
@@ -387,6 +505,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", _hoisted_1$1, [
     $options.hasMultipleTabs || $options.showForSingleTab ? (openBlock(), createElementBlock("div", {
       key: 0,
+      ref: "nav",
       role: "tablist",
       class: normalizeClass(["app-sidebar-tabs__nav", { "app-sidebar-tabs__nav--legacy": $data.isLegacy34 }]),
       onKeydown: [
@@ -397,8 +516,22 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
         _cache[4] || (_cache[4] = withKeys(withModifiers((...args) => $options.focusLastTab && $options.focusLastTab(...args), ["exact", "prevent", "stop"]), ["end"])),
         _cache[5] || (_cache[5] = withKeys(withModifiers((...args) => $options.focusFirstTab && $options.focusFirstTab(...args), ["exact", "prevent", "stop"]), ["page-up"])),
         _cache[6] || (_cache[6] = withKeys(withModifiers((...args) => $options.focusLastTab && $options.focusLastTab(...args), ["exact", "prevent", "stop"]), ["page-down"]))
-      ]
+      ],
+      onPointerover: _cache[7] || (_cache[7] = (...args) => $options.handleHighlight && $options.handleHighlight(...args)),
+      onPointerleave: _cache[8] || (_cache[8] = (...args) => $options.hideHighlight && $options.hideHighlight(...args)),
+      onFocusin: _cache[9] || (_cache[9] = (...args) => $options.handleHighlight && $options.handleHighlight(...args)),
+      onFocusout: _cache[10] || (_cache[10] = (...args) => $options.onHighlightFocusOut && $options.onHighlightFocusOut(...args))
     }, [
+      $data.highlightEnabled ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["app-sidebar-tabs__highlight", {
+          "app-sidebar-tabs__highlight--visible": $data.highlightVisible,
+          "app-sidebar-tabs__highlight--animated": $data.highlightAnimated,
+          "app-sidebar-tabs__highlight--over-active": $data.highlightOverActive
+        }]),
+        style: normalizeStyle($options.highlightStyle),
+        "aria-hidden": "true"
+      }, null, 6)) : createCommentVNode("", true),
       (openBlock(true), createElementBlock(Fragment, null, renderList($data.tabs, (tab) => {
         return openBlock(), createBlock(_component_NcAppSidebarTabsButton, {
           id: `tab-button-${tab.id}`,
@@ -406,9 +539,10 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
           class: "app-sidebar-tabs__tab",
           "aria-controls": `tab-${tab.id}`,
           selected: $data.activeTab === tab.id,
+          animatedHighlight: $data.highlightEnabled,
           tab,
           "onUpdate:selected": ($event) => $options.setActive(tab.id)
-        }, null, 8, ["id", "aria-controls", "selected", "tab", "onUpdate:selected"]);
+        }, null, 8, ["id", "aria-controls", "selected", "animatedHighlight", "tab", "onUpdate:selected"]);
       }), 128))
     ], 34)) : createCommentVNode("", true),
     createElementVNode("div", {
@@ -418,7 +552,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     ], 2)
   ]);
 }
-const NcAppSidebarTabs = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-e74d1502"]]);
+const NcAppSidebarTabs = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-74190d2a"]]);
 register(t16);
 const _sfc_main = {
   name: "NcAppSidebar",
@@ -1044,7 +1178,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["onAfterEnter", "onAfterLeave"]);
 }
-const NcAppSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-13cfd184"]]);
+const NcAppSidebar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c2c6820b"]]);
 export {
   NcAppSidebar as N
 };