@nextcloud/vue 9.0.0-alpha.2 → 9.0.0-alpha.4

package/dist/chunks/NcAppNavigationToggle-DYG8u5dW.mjs

@@ -0,0 +1,158 @@
+import '../assets/NcAppNavigationToggle-CNPQvWtG.css';
+import { N as NcButton } from "./NcButton-DvO0XwJf.mjs";
+import { r as register, z as t17, a as t } from "./_l10n-C3nxU4O-.mjs";
+import { openBlock, createElementBlock, mergeProps, createElementVNode, toDisplayString, createCommentVNode, resolveComponent, createVNode, withCtx, createBlock } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register(t17);
+const _sfc_main$2 = {
+  name: "MenuIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$2 = ["aria-hidden", "aria-label"];
+const _hoisted_2$1 = ["fill", "width", "height"];
+const _hoisted_3$1 = { d: "M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" };
+const _hoisted_4$1 = { key: 0 };
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : true,
+    "aria-label": $props.title,
+    class: "material-design-icon menu-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3$1, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4$1, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2$1))
+  ], 16, _hoisted_1$2);
+}
+const MenuIcon = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const _sfc_main$1 = {
+  name: "MenuOpenIcon",
+  emits: ["click"],
+  props: {
+    title: {
+      type: String
+    },
+    fillColor: {
+      type: String,
+      default: "currentColor"
+    },
+    size: {
+      type: Number,
+      default: 24
+    }
+  }
+};
+const _hoisted_1$1 = ["aria-hidden", "aria-label"];
+const _hoisted_2 = ["fill", "width", "height"];
+const _hoisted_3 = { d: "M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" };
+const _hoisted_4 = { key: 0 };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("span", mergeProps(_ctx.$attrs, {
+    "aria-hidden": $props.title ? null : true,
+    "aria-label": $props.title,
+    class: "material-design-icon menu-open-icon",
+    role: "img",
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
+  }), [
+    (openBlock(), createElementBlock("svg", {
+      fill: $props.fillColor,
+      class: "material-design-icon__svg",
+      width: $props.size,
+      height: $props.size,
+      viewBox: "0 0 24 24"
+    }, [
+      createElementVNode("path", _hoisted_3, [
+        $props.title ? (openBlock(), createElementBlock("title", _hoisted_4, toDisplayString($props.title), 1)) : createCommentVNode("", true)
+      ])
+    ], 8, _hoisted_2))
+  ], 16, _hoisted_1$1);
+}
+const MenuOpenIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
+  name: "NcAppNavigationToggle",
+  components: {
+    NcButton,
+    MenuIcon,
+    MenuOpenIcon
+  },
+  props: {
+    /**
+     * Tracks whether the toggle has been clicked or not.
+     * If it has been clicked, switches between the different MenuIcons
+     * and emits a boolean indicating its opened status
+     */
+    open: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: ["update:open"],
+  computed: {
+    label() {
+      return this.open ? t("Close navigation") : t("Open navigation");
+    }
+  },
+  methods: {
+    /**
+     * Once the toggle has been clicked, emits the toggle status
+     * so parent components can gauge the status of the navigation button
+     */
+    toggleNavigation() {
+      this.$emit("update:open", !this.open);
+    }
+  }
+};
+const _hoisted_1 = { class: "app-navigation-toggle-wrapper" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_MenuOpenIcon = resolveComponent("MenuOpenIcon");
+  const _component_MenuIcon = resolveComponent("MenuIcon");
+  const _component_NcButton = resolveComponent("NcButton");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_NcButton, {
+      class: "app-navigation-toggle",
+      type: "tertiary",
+      "aria-expanded": $props.open ? "true" : "false",
+      "aria-label": $options.label,
+      title: $options.label,
+      "aria-controls": "app-navigation-vue",
+      onClick: $options.toggleNavigation
+    }, {
+      icon: withCtx(() => [
+        $props.open ? (openBlock(), createBlock(_component_MenuOpenIcon, {
+          key: 0,
+          size: 20
+        })) : (openBlock(), createBlock(_component_MenuIcon, {
+          key: 1,
+          size: 20
+        }))
+      ]),
+      _: 1
+    }, 8, ["aria-expanded", "aria-label", "title", "onClick"])
+  ]);
+}
+const NcAppNavigationToggle = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-62be917b"]]);
+export {
+  NcAppNavigationToggle as N
+};

package/dist/chunks/NcAppNavigationToggle-DYG8u5dW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationToggle-DYG8u5dW.mjs","sources":["../../node_modules/vue-material-design-icons/Menu.vue","../../node_modules/vue-material-design-icons/MenuOpen.vue","../../src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue"],"sourcesContent":["<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon menu-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"MenuIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<template>\n  <span v-bind=\"$attrs\"\n        :aria-hidden=\"title ? null : true\"\n        :aria-label=\"title\"\n        class=\"material-design-icon menu-open-icon\"\n        role=\"img\"\n        @click=\"$emit('click', $event)\">\n    <svg :fill=\"fillColor\"\n         class=\"material-design-icon__svg\"\n         :width=\"size\"\n         :height=\"size\"\n         viewBox=\"0 0 24 24\">\n      <path d=\"M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z\">\n        <title v-if=\"title\">{{ title }}</title>\n      </path>\n    </svg>\n  </span>\n</template>\n\n<script>\nexport default {\n  name: \"MenuOpenIcon\",\n  emits: ['click'],\n  props: {\n    title: {\n      type: String,\n    },\n    fillColor: {\n      type: String,\n      default: \"currentColor\"\n    },\n    size: {\n      type: Number,\n      default: 24\n    }\n  }\n}\n</script>","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div class=\"app-navigation-toggle-wrapper\">\n\t\t<NcButton class=\"app-navigation-toggle\"\n\t\t\ttype=\"tertiary\"\n\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t:aria-label=\"label\"\n\t\t\t:title=\"label\"\n\t\t\taria-controls=\"app-navigation-vue\"\n\t\t\t@click=\"toggleNavigation\">\n\t\t\t<template #icon>\n\t\t\t\t<MenuOpenIcon v-if=\"open\" :size=\"20\" />\n\t\t\t\t<MenuIcon v-else :size=\"20\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<script>\nimport NcButton from '../NcButton/index.ts'\nimport { t } from '../../l10n.js'\n\nimport MenuIcon from 'vue-material-design-icons/Menu.vue'\nimport MenuOpenIcon from 'vue-material-design-icons/MenuOpen.vue'\n\nexport default {\n\tname: 'NcAppNavigationToggle',\n\n\tcomponents: {\n\t\tNcButton,\n\t\tMenuIcon,\n\t\tMenuOpenIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Tracks whether the toggle has been clicked or not.\n\t\t * If it has been clicked, switches between the different MenuIcons\n\t\t * and emits a boolean indicating its opened status\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\temits: ['update:open'],\n\n\tcomputed: {\n\t\tlabel() {\n\t\t\treturn this.open ? t('Close navigation') : t('Open navigation')\n\t\t},\n\t},\n\tmethods: {\n\t\t/**\n\t\t * Once the toggle has been clicked, emits the toggle status\n\t\t * so parent components can gauge the status of the navigation button\n\t\t */\n\t\ttoggleNavigation() {\n\t\t\tthis.$emit('update:open', !this.open)\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n.app-navigation-toggle-wrapper {\n\tposition: absolute;\n\ttop: var(--app-navigation-padding);\n\tright: calc(0px - var(--app-navigation-padding));\n\tmargin-right: - $clickable-area;\n}\n\nbutton.app-navigation-toggle {\n\tbackground-color: var(--color-main-background);\n}\n</style>\n"],"names":["_sfc_main","_hoisted_1","_hoisted_2","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_hoisted_4","_createCommentVNode","_openBlock","_createVNode","_createBlock"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/chunks/NcAppSettingsDialog-CjpGb_I4.mjs

@@ -0,0 +1,254 @@
+import '../assets/NcAppSettingsDialog-ksK-DMgk.css';
+import { N as NcDialog } from "./NcDialog-CE2gyz2g.mjs";
+import _sfc_main$1 from "../Components/NcVNodes.mjs";
+import { useIsMobile } from "../Composables/useIsMobile.mjs";
+import { r as register, l as t40, a as t } from "./_l10n-C3nxU4O-.mjs";
+import debounce from "debounce";
+import { warn, resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, createElementVNode, renderSlot, createElementBlock, Fragment, renderList, normalizeClass, withModifiers, withKeys, createCommentVNode, toDisplayString } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+register(t40);
+const _sfc_main = {
+  name: "NcAppSettingsDialog",
+  components: {
+    NcDialog,
+    NcVNodes: _sfc_main$1
+  },
+  provide() {
+    return {
+      registerSection: this.registerSection,
+      unregisterSection: this.unregisterSection
+    };
+  },
+  props: {
+    /**
+     * Determines the open / closed state of the modal
+     */
+    open: {
+      type: Boolean,
+      required: true
+    },
+    /**
+     * Shows the navigation on desktop if true
+     */
+    showNavigation: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Selector for the popover container
+     */
+    container: {
+      type: String,
+      default: "body"
+    },
+    /**
+     * Name of the settings
+     */
+    name: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional elements to add to the focus trap
+     */
+    additionalTrapElements: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["update:open"],
+  setup() {
+    return {
+      isMobile: useIsMobile()
+    };
+  },
+  data() {
+    return {
+      selectedSection: "",
+      linkClicked: false,
+      addedScrollListener: false,
+      scroller: null,
+      /**
+       * Currently registered settings sections
+       * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}
+       */
+      sections: []
+    };
+  },
+  computed: {
+    dialogProperties() {
+      return {
+        additionalTrapElements: this.additionalTrapElements,
+        closeOnClickOutside: true,
+        class: "app-settings",
+        container: this.container,
+        contentClasses: "app-settings__content",
+        size: "large",
+        name: this.name,
+        navigationClasses: "app-settings__navigation"
+      };
+    },
+    /**
+     * Check if one or more navigation entries provide icons
+     */
+    hasNavigationIcons() {
+      return this.sections.some(({ icon }) => !!icon);
+    },
+    hasNavigation() {
+      if (this.isMobile || !this.showNavigation) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+    settingsNavigationAriaLabel() {
+      return t("Settings navigation");
+    }
+  },
+  updated() {
+    if (!this.$refs.settingsScroller) {
+      return;
+    }
+    this.scroller = this.$refs.settingsScroller;
+    if (!this.addedScrollListener) {
+      this.scroller.addEventListener("scroll", this.handleScroll);
+      this.addedScrollListener = true;
+    }
+  },
+  methods: {
+    /**
+     * Called when a new section is registered
+     * @param {string} id The section ID
+     * @param {string} name The section name
+     * @param {import('vue').VNode[]|undefined} icon Optional icon component
+     */
+    registerSection(id, name, icon) {
+      if (this.sections.some(({ id: otherId }) => id === otherId)) {
+        throw new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`);
+      }
+      if (this.sections.some(({ name: otherName }) => name === otherName)) {
+        warn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`);
+      }
+      const newSections = [...this.sections, { id, name, icon }];
+      this.sections = newSections.sort(({ id: idA }, { id: idB }) => {
+        const indexOf = (id2) => this.$slots.default?.().indexOf((vnode) => vnode?.props?.id === id2) ?? -1;
+        return indexOf(idA) - indexOf(idB);
+      });
+      if (this.sections.length === 1) {
+        this.selectedSection = id;
+      }
+    },
+    /**
+     * Called when a section is unregistered to remove it from dialog
+     * @param {string} id The section ID
+     */
+    unregisterSection(id) {
+      this.sections = this.sections.filter(({ id: otherId }) => id !== otherId);
+      if (this.selectedSection === id) {
+        this.selectedSection = this.sections[0]?.id ?? "";
+      }
+    },
+    /**
+     * Scrolls the content to the selected settings section.absolute
+     *
+     * @param {string} item the ID of the section
+     */
+    handleSettingsNavigationClick(item) {
+      this.linkClicked = true;
+      document.getElementById("settings-section_" + item).scrollIntoView({
+        behavior: "smooth",
+        inline: "nearest"
+      });
+      this.selectedSection = item;
+      setTimeout(() => {
+        this.linkClicked = false;
+      }, 1e3);
+    },
+    handleCloseModal(isOpen) {
+      if (isOpen) {
+        return;
+      }
+      this.$emit("update:open", false);
+      this.scroller.removeEventListener("scroll", this.handleScroll);
+      this.addedScrollListener = false;
+      this.scroller.scrollTop = 0;
+    },
+    handleScroll() {
+      if (!this.linkClicked) {
+        this.unfocusNavigationItem();
+      }
+    },
+    // Remove selected section once the user starts scrolling
+    unfocusNavigationItem: debounce(function() {
+      this.selectedSection = "";
+      if (document.activeElement.className.includes("navigation-list__link")) {
+        document.activeElement.blur();
+      }
+    }, 300)
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "navigation-list"
+};
+const _hoisted_2 = ["aria-current", "href", "onClick", "onKeydown"];
+const _hoisted_3 = {
+  key: 0,
+  class: "navigation-list__link-icon"
+};
+const _hoisted_4 = { class: "navigation-list__link-text" };
+const _hoisted_5 = { ref: "settingsScroller" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcVNodes = resolveComponent("NcVNodes");
+  const _component_NcDialog = resolveComponent("NcDialog");
+  return $props.open ? (openBlock(), createBlock(_component_NcDialog, mergeProps({
+    key: 0,
+    "navigation-aria-label": $options.settingsNavigationAriaLabel
+  }, $options.dialogProperties, { "onUpdate:open": $options.handleCloseModal }), createSlots({
+    default: withCtx(() => [
+      createElementVNode("div", _hoisted_5, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 512)
+    ]),
+    _: 2
+  }, [
+    $options.hasNavigation ? {
+      name: "navigation",
+      fn: withCtx(({ isCollapsed }) => [
+        !isCollapsed ? (openBlock(), createElementBlock("ul", _hoisted_1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList($data.sections, (section) => {
+            return openBlock(), createElementBlock("li", {
+              key: section.id
+            }, [
+              createElementVNode("a", {
+                "aria-current": `${section.id === $data.selectedSection}`,
+                class: normalizeClass({
+                  "navigation-list__link": true,
+                  "navigation-list__link--active": section.id === $data.selectedSection,
+                  "navigation-list__link--icon": $options.hasNavigationIcons
+                }),
+                href: `#settings-section_${section.id}`,
+                tabindex: "0",
+                onClick: withModifiers(($event) => $options.handleSettingsNavigationClick(section.id), ["prevent"]),
+                onKeydown: withKeys(($event) => $options.handleSettingsNavigationClick(section.id), ["enter"])
+              }, [
+                $options.hasNavigationIcons ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                  section.icon ? (openBlock(), createBlock(_component_NcVNodes, {
+                    key: 0,
+                    vnodes: section.icon
+                  }, null, 8, ["vnodes"])) : createCommentVNode("", true)
+                ])) : createCommentVNode("", true),
+                createElementVNode("span", _hoisted_4, toDisplayString(section.name), 1)
+              ], 42, _hoisted_2)
+            ]);
+          }), 128))
+        ])) : createCommentVNode("", true)
+      ]),
+      key: "0"
+    } : void 0
+  ]), 1040, ["navigation-aria-label", "onUpdate:open"])) : createCommentVNode("", true);
+}
+const NcAppSettingsDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c58c1f94"]]);
+export {
+  NcAppSettingsDialog as N
+};

package/dist/chunks/NcAppSettingsDialog-CjpGb_I4.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsDialog-CjpGb_I4.mjs","sources":["../../src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nJust nest the `AppSettingSections` component into `NcAppSettingsDialog`,\nproviding the section's name prop. You can put your settings within each\n`NcAppSettingsSection` component.\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Example name 1\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Example name 2\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Example name 3\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Example name 4\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-5\" name=\"Example name 5\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-6\" name=\"Example name 6\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-7\" name=\"Example name 7\">\n\t\t\t\tSome example content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-8\" name=\"Example name 8\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-9\" name=\"Example name 9\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-10\" name=\"Example name 10\">\n\t\t\t\tSome more content\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n\nYou can also add icons to the section navigation:\n\n```vue\n<template>\n\t<div>\n\t\t<NcButton @click=\"settingsOpen = true\">Show Settings</NcButton>\n\t\t<NcAppSettingsDialog v-model:open=\"settingsOpen\" :show-navigation=\"true\" name=\"Application settings\">\n\t\t\t<NcAppSettingsSection id=\"asci-name-1\" name=\"Instagram\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Instagram :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tInstagram setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-2\" name=\"Mastodon\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Mastodon :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tMastodon setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-3\" name=\"Twitch\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitch :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<p style=\"height: 100vh;\">\n\t\t\t\t\tTwitch setting\n\t\t\t\t</p>\n\t\t\t</NcAppSettingsSection>\n\t\t\t<NcAppSettingsSection id=\"asci-name-4\" name=\"Twitter\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Twitter :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tTwitter setting\n\t\t\t</NcAppSettingsSection>\n\t\t</NcAppSettingsDialog>\n\t</div>\n</template>\n\n<script>\nimport Instagram from 'vue-material-design-icons/Instagram.vue'\nimport Mastodon from 'vue-material-design-icons/Mastodon.vue'\nimport Twitch from 'vue-material-design-icons/Twitch.vue'\nimport Twitter from 'vue-material-design-icons/Twitter.vue'\n\nexport default {\n\tcomponents: {\n\t\tInstagram,\n\t\tMastodon,\n\t\tTwitch,\n\t\tTwitter,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tsettingsOpen: false,\n\t\t}\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<NcDialog v-if=\"open\"\n\t\t:navigation-aria-label=\"settingsNavigationAriaLabel\"\n\t\tv-bind=\"dialogProperties\"\n\t\t@update:open=\"handleCloseModal\">\n\t\t<template v-if=\"hasNavigation\" #navigation=\"{ isCollapsed }\">\n\t\t\t<ul v-if=\"!isCollapsed\"\n\t\t\t\tclass=\"navigation-list\">\n\t\t\t\t<li v-for=\"section in sections\" :key=\"section.id\">\n\t\t\t\t\t<a :aria-current=\"`${section.id === selectedSection}`\"\n\t\t\t\t\t\t:class=\"{\n\t\t\t\t\t\t\t'navigation-list__link': true,\n\t\t\t\t\t\t\t'navigation-list__link--active': section.id === selectedSection,\n\t\t\t\t\t\t\t'navigation-list__link--icon': hasNavigationIcons,\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t:href=\"`#settings-section_${section.id}`\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t@click.prevent=\"handleSettingsNavigationClick(section.id)\"\n\t\t\t\t\t\t@keydown.enter=\"handleSettingsNavigationClick(section.id)\">\n\t\t\t\t\t\t<div v-if=\"hasNavigationIcons\" class=\"navigation-list__link-icon\">\n\t\t\t\t\t\t\t<NcVNodes v-if=\"section.icon\" :vnodes=\"section.icon\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<span class=\"navigation-list__link-text\">\n\t\t\t\t\t\t\t{{ section.name }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</template>\n\t\t<div ref=\"settingsScroller\">\n\t\t\t<slot />\n\t\t</div>\n\t</NcDialog>\n</template>\n\n<script>\nimport NcDialog from '../NcDialog/index.js'\nimport NcVNodes from '../NcVNodes/index.js'\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { t } from '../../l10n.js'\n\nimport debounce from 'debounce'\nimport { warn } from 'vue'\n\nexport default {\n\n\tname: 'NcAppSettingsDialog',\n\n\tcomponents: {\n\t\tNcDialog,\n\t\tNcVNodes,\n\t},\n\n\tprovide() {\n\t\treturn {\n\t\t\tregisterSection: this.registerSection,\n\t\t\tunregisterSection: this.unregisterSection,\n\t\t}\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Determines the open / closed state of the modal\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Shows the navigation on desktop if true\n\t\t */\n\t\tshowNavigation: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Selector for the popover container\n\t\t */\n\t\tcontainer: {\n\t\t\ttype: String,\n\t\t\tdefault: 'body',\n\t\t},\n\n\t\t/**\n\t\t * Name of the settings\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Additional elements to add to the focus trap\n\t\t */\n\t\tadditionalTrapElements: {\n\t\t\ttype: Array,\n\t\t\tdefault: () => [],\n\t\t},\n\n\t},\n\n\temits: ['update:open'],\n\n\tsetup() {\n\t\treturn {\n\t\t\tisMobile: useIsMobile(),\n\t\t}\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tselectedSection: '',\n\t\t\tlinkClicked: false,\n\t\t\taddedScrollListener: false,\n\t\t\tscroller: null,\n\t\t\t/**\n\t\t\t * Currently registered settings sections\n\t\t\t * @type {{ id: string, name: string, icon?: import('vue').VNode[] }[]}\n\t\t\t */\n\t\t\tsections: [],\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdialogProperties() {\n\t\t\treturn {\n\t\t\t\tadditionalTrapElements: this.additionalTrapElements,\n\t\t\t\tcloseOnClickOutside: true,\n\t\t\t\tclass: 'app-settings',\n\t\t\t\tcontainer: this.container,\n\t\t\t\tcontentClasses: 'app-settings__content',\n\t\t\t\tsize: 'large',\n\t\t\t\tname: this.name,\n\t\t\t\tnavigationClasses: 'app-settings__navigation',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Check if one or more navigation entries provide icons\n\t\t */\n\t\thasNavigationIcons() {\n\t\t\treturn this.sections.some(({ icon }) => !!icon)\n\t\t},\n\n\t\thasNavigation() {\n\t\t\tif (this.isMobile || !this.showNavigation) {\n\t\t\t\treturn false\n\t\t\t} else {\n\t\t\t\treturn true\n\t\t\t}\n\t\t},\n\n\t\tsettingsNavigationAriaLabel() {\n\t\t\treturn t('Settings navigation')\n\t\t},\n\t},\n\n\tupdated() {\n\t\t// Check that the scroller element has been mounted\n\t\tif (!this.$refs.settingsScroller) {\n\t\t\treturn\n\t\t}\n\t\t// Get the scroller element\n\t\tthis.scroller = this.$refs.settingsScroller\n\t\tif (!this.addedScrollListener) {\n\t\t\tthis.scroller.addEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = true\n\t\t}\n\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Called when a new section is registered\n\t\t * @param {string} id The section ID\n\t\t * @param {string} name The section name\n\t\t * @param {import('vue').VNode[]|undefined} icon Optional icon component\n\t\t */\n\t\tregisterSection(id, name, icon) {\n\t\t\t// Check for the uniqueness of section names\n\t\t\tif (this.sections.some(({ id: otherId }) => id === otherId)) {\n\t\t\t\tthrow new Error(`Duplicate section id found: ${id}. Settings navigation sections must have unique section ids.`)\n\t\t\t}\n\t\t\tif (this.sections.some(({ name: otherName }) => name === otherName)) {\n\t\t\t\twarn(`Duplicate section name found: ${name}. Settings navigation sections must have unique section names.`)\n\t\t\t}\n\n\t\t\tconst newSections = [...this.sections, { id, name, icon }]\n\t\t\t// Sort sections by order in slots\n\t\t\tthis.sections = newSections.sort(({ id: idA }, { id: idB }) => {\n\t\t\t\tconst indexOf = (id) => this.$slots.default?.().indexOf(vnode => vnode?.props?.id === id) ?? -1\n\t\t\t\treturn indexOf(idA) - indexOf(idB)\n\t\t\t})\n\n\t\t\t// If this is the first section registered, set it as selected\n\t\t\tif (this.sections.length === 1) {\n\t\t\t\tthis.selectedSection = id\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Called when a section is unregistered to remove it from dialog\n\t\t * @param {string} id The section ID\n\t\t */\n\t\tunregisterSection(id) {\n\t\t\tthis.sections = this.sections.filter(({ id: otherId }) => id !== otherId)\n\n\t\t\t// If the current section is unregistered, set the first section as selected\n\t\t\tif (this.selectedSection === id) {\n\t\t\t\tthis.selectedSection = this.sections[0]?.id ?? ''\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Scrolls the content to the selected settings section.absolute\n\t\t *\n\t\t * @param {string} item the ID of the section\n\t\t */\n\t\thandleSettingsNavigationClick(item) {\n\t\t\tthis.linkClicked = true\n\t\t\tdocument.getElementById('settings-section_' + item).scrollIntoView({\n\t\t\t\tbehavior: 'smooth',\n\t\t\t\tinline: 'nearest',\n\t\t\t})\n\t\t\tthis.selectedSection = item\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.linkClicked = false\n\t\t\t}, 1000)\n\t\t},\n\n\t\thandleCloseModal(isOpen) {\n\t\t\tif (isOpen) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.$emit('update:open', false)\n\t\t\t// Remove scroll listener each time the modal is closed\n\t\t\tthis.scroller.removeEventListener('scroll', this.handleScroll)\n\t\t\tthis.addedScrollListener = false\n\t\t\tthis.scroller.scrollTop = 0\n\t\t},\n\n\t\thandleScroll() {\n\t\t\tif (!this.linkClicked) {\n\t\t\t\tthis.unfocusNavigationItem()\n\t\t\t}\n\t\t},\n\n\t\t// Remove selected section once the user starts scrolling\n\t\tunfocusNavigationItem: debounce(function() {\n\t\t\tthis.selectedSection = ''\n\t\t\tif (document.activeElement.className.includes('navigation-list__link')) {\n\t\t\t\tdocument.activeElement.blur()\n\t\t\t}\n\t\t}, 300),\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings {\n\t:deep &__navigation {\n\t\tmin-width: 200px;\n\t\tmargin-right: 20px;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tposition: relative;\n\t}\n\t:deep &__content {\n\t\tbox-sizing: border-box;\n\t\tpadding-inline: 16px;\n\t}\n}\n\n.navigation-list {\n\theight: 100%;\n\tbox-sizing: border-box;\n\toverflow-y: auto;\n\tpadding: 12px;\n\n\t&__link {\n\t\tdisplay: flex;\n\t\talign-content: center;\n\t\tfont-size: 16px;\n\t\theight: $clickable-area;\n\t\tmargin: 4px 0;\n\t\tline-height: $clickable-area;\n\t\tborder-radius: var(--border-radius-pill);\n\t\tfont-weight: bold;\n\t\tpadding: 0 20px;\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t\toverflow: hidden;\n\t\tbackground-color: transparent;\n\t\tborder: none;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tbackground-color: var(--color-background-hover);\n\t\t}\n\n\t\t&--active {\n\t\t\tbackground-color: var(--color-primary-element-light) !important;\n\t\t}\n\n\t\t&--icon {\n\t\t\tpadding-inline-start: 8px;\n\t\t\tgap: 4px;\n\t\t}\n\n\t\t&-icon {\n\t\t\tdisplay: flex;\n\t\t\tjustify-content: center;\n\t\t\talign-content: center;\n\t\t\twidth: 36px;\n\t\t\tmax-width: 36px;\n\t\t}\n\t}\n}\n\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-settings {\n\t\t:deep .dialog__name {\n\t\t\tpadding-inline-start: 16px;\n\t\t}\n\t}\n}\n</style>\n"],"names":["NcVNodes","id","_openBlock","_createBlock","_mergeProps","_createSlots","_withCtx","_createElementVNode","_renderSlot","_createElementBlock","_Fragment","_renderList","_normalizeClass","_withModifiers","_withKeys","_createCommentVNode","_toDisplayString"],"mappings":"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"}

package/dist/chunks/NcAppSettingsSection-a7OfJ9GT.mjs

@@ -0,0 +1,59 @@
+import '../assets/NcAppSettingsSection-CcRbdcD-.css';
+import { openBlock, createElementBlock, createElementVNode, toDisplayString, renderSlot, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcAppSettingsSection",
+  inject: ["registerSection", "unregisterSection"],
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    id: {
+      type: String,
+      required: true,
+      validator(id) {
+        return /^[a-z0-9\-_]+$/.test(id);
+      }
+    }
+  },
+  computed: {
+    // generate an id for each settingssection based on the name without whitespaces
+    htmlId() {
+      return "settings-section_" + this.id;
+    }
+  },
+  // Reactive changes for section navigation
+  watch: {
+    id(newId, oldId) {
+      this.unregisterSection(oldId);
+      this.registerSection(newId, this.name, this.$slots?.icon?.());
+    },
+    name(newName) {
+      this.unregisterSection(this.id);
+      this.registerSection(this.id, newName, this.$slots?.icon?.());
+    }
+  },
+  mounted() {
+    this.registerSection(this.id, this.name, this.$slots?.icon?.());
+  },
+  beforeUnmount() {
+    this.unregisterSection(this.id);
+  }
+};
+const _hoisted_1 = ["id"];
+const _hoisted_2 = { class: "app-settings-section__name" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    id: $options.htmlId,
+    class: "app-settings-section"
+  }, [
+    createElementVNode("h3", _hoisted_2, toDisplayString($props.name), 1),
+    renderSlot(_ctx.$slots, "default", {}, void 0, true),
+    createCommentVNode("", true)
+  ], 8, _hoisted_1);
+}
+const NcAppSettingsSection = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-43bcc28f"]]);
+export {
+  NcAppSettingsSection as N
+};

package/dist/chunks/NcAppSettingsSection-a7OfJ9GT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppSettingsSection-a7OfJ9GT.mjs","sources":["../../src/components/NcAppSettingsSection/NcAppSettingsSection.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div :id=\"htmlId\" class=\"app-settings-section\">\n\t\t<h3 class=\"app-settings-section__name\">\n\t\t\t{{ name }}\n\t\t</h3>\n\t\t<slot />\n\t\t<!-- @slot Optonal icon to for the secion in the navigation -->\n\t\t<slot v-if=\"false\" name=\"icon\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppSettingsSection',\n\tinject: ['registerSection', 'unregisterSection'],\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\tid: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(id) {\n\t\t\t\t// Only alphanumeric, dash and underscore\n\t\t\t\treturn /^[a-z0-9\\-_]+$/.test(id)\n\t\t\t},\n\t\t},\n\t},\n\tcomputed: {\n\t\t// generate an id for each settingssection based on the name without whitespaces\n\t\thtmlId() {\n\t\t\treturn 'settings-section_' + this.id\n\t\t},\n\t},\n\t// Reactive changes for section navigation\n\twatch: {\n\t\tid(newId, oldId) {\n\t\t\tthis.unregisterSection(oldId)\n\t\t\tthis.registerSection(newId, this.name, this.$slots?.icon?.())\n\t\t},\n\t\tname(newName) {\n\t\t\tthis.unregisterSection(this.id)\n\t\t\tthis.registerSection(this.id, newName, this.$slots?.icon?.())\n\t\t},\n\t},\n\tmounted() {\n\t\t// register section for navigation\n\t\tthis.registerSection(this.id, this.name, this.$slots?.icon?.())\n\t},\n\tbeforeUnmount() {\n\t\tthis.unregisterSection(this.id)\n\t},\n}\n\n</script>\n\n<style lang=\"scss\" scoped>\n.app-settings-section {\n\tmargin-bottom: 80px;\n\t&__name {\n\t\tfont-size: 20px;\n\t\tmargin: 0;\n\t\tpadding: 20px 0;\n\t\tfont-weight: bold;\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_toDisplayString","_renderSlot","_createCommentVNode"],"mappings":";;AAiBA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EACN,QAAQ,CAAC,mBAAmB,mBAAmB;AAAA,EAE/C,OAAO;AAAA,IACN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA,IAED,IAAI;AAAA,MACH,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU,IAAI;AAEb,eAAO,iBAAiB,KAAK,EAAE;AAAA,MAC/B;AAAA,IACD;AAAA,EACD;AAAA,EACD,UAAU;AAAA;AAAA,IAET,SAAS;AACR,aAAO,sBAAsB,KAAK;AAAA,IAClC;AAAA,EACD;AAAA;AAAA,EAED,OAAO;AAAA,IACN,GAAG,OAAO,OAAO;AAChB,WAAK,kBAAkB,KAAK;AAC5B,WAAK,gBAAgB,OAAO,KAAK,MAAM,KAAK,QAAQ,QAAQ;AAAA,IAC5D;AAAA,IACD,KAAK,SAAS;AACb,WAAK,kBAAkB,KAAK,EAAE;AAC9B,WAAK,gBAAgB,KAAK,IAAI,SAAS,KAAK,QAAQ,QAAQ;AAAA,IAC5D;AAAA,EACD;AAAA,EACD,UAAU;AAET,SAAK,gBAAgB,KAAK,IAAI,KAAK,MAAM,KAAK,QAAQ,QAAQ;AAAA,EAC9D;AAAA,EACD,gBAAgB;AACf,SAAK,kBAAkB,KAAK,EAAE;AAAA,EAC9B;AACF;AA5DA,MAAA,aAAA,CAAA,IAAA;AAOM,MAAA,aAAA,EAAA,OAAM,6BAA4B;;sBADvCA,mBAOM,OAAA;AAAA,IAPA,IAAI,SAAM;AAAA,IAAE,OAAM;AAAA;IACvBC,mBAEK,MAFL,YAEKC,gBADD,OAAI,IAAA,GAAA,CAAA;AAAA,IAERC,WAAQ,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,IAVVC,mBAAA,IAAA,IAAA;AAAA,EAAA,GAAA,GAAA,UAAA;;;"}