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

package/dist/chunks/NcAppNavigation-DKl5GKDr.mjs

@@ -0,0 +1,166 @@
+import '../assets/NcAppNavigation-B21SNH2o.css';
+import { useIsMobile } from "../composables/useIsMobile/index.mjs";
+import { g as getTrapStack } from "./focusTrap-Cecv_gjR.mjs";
+import { subscribe, emit, unsubscribe } from "@nextcloud/event-bus";
+import { createFocusTrap } from "focus-trap";
+import { N as NcAppNavigationList } from "./NcAppNavigationList-HRNlIV27.mjs";
+import { N as NcAppNavigationToggle } from "./NcAppNavigationToggle-CEun9mHr.mjs";
+import { warn, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withKeys, renderSlot, createBlock, withCtx, createCommentVNode, createVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcAppNavigation",
+  components: {
+    NcAppNavigationList,
+    NcAppNavigationToggle
+  },
+  // Injected from NcContent
+  inject: {
+    setHasAppNavigation: {
+      default: () => () => warn("NcAppNavigation is not mounted inside NcContent, this is probably an error."),
+      from: "NcContent:setHasAppNavigation"
+    }
+  },
+  props: {
+    /**
+     * The aria label to describe the navigation
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * aria-labelledby attribute to describe the navigation
+     */
+    ariaLabelledby: {
+      type: String,
+      default: ""
+    }
+  },
+  setup() {
+    return {
+      isMobile: useIsMobile()
+    };
+  },
+  data() {
+    return {
+      open: !this.isMobile,
+      focusTrap: null
+    };
+  },
+  watch: {
+    isMobile() {
+      this.open = !this.isMobile;
+      this.toggleFocusTrap();
+    },
+    open() {
+      this.toggleFocusTrap();
+    }
+  },
+  mounted() {
+    this.setHasAppNavigation(true);
+    subscribe("toggle-navigation", this.toggleNavigationByEventBus);
+    emit("navigation-toggled", {
+      open: this.open
+    });
+    this.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {
+      allowOutsideClick: true,
+      fallbackFocus: this.$refs.appNavigationContainer,
+      trapStack: getTrapStack(),
+      escapeDeactivates: false
+    });
+    this.toggleFocusTrap();
+  },
+  unmounted() {
+    this.setHasAppNavigation(false);
+    unsubscribe("toggle-navigation", this.toggleNavigationByEventBus);
+    this.focusTrap.deactivate();
+  },
+  methods: {
+    /**
+     * Toggle the navigation
+     *
+     * @param {boolean} [state] set the state instead of inverting the current one
+     */
+    toggleNavigation(state) {
+      if (this.open === state) {
+        emit("navigation-toggled", {
+          open: this.open
+        });
+        return;
+      }
+      this.open = typeof state === "undefined" ? !this.open : state;
+      const bodyStyles = getComputedStyle(document.body);
+      const animationLength = parseInt(bodyStyles.getPropertyValue("--animation-quick")) || 100;
+      setTimeout(() => {
+        emit("navigation-toggled", {
+          open: this.open
+        });
+      }, 1.5 * animationLength);
+    },
+    toggleNavigationByEventBus({ open }) {
+      this.toggleNavigation(open);
+    },
+    /**
+     * Activate focus trap if it is currently needed, otherwise deactivate
+     */
+    toggleFocusTrap() {
+      if (this.isMobile && this.open) {
+        this.focusTrap.activate();
+      } else {
+        this.focusTrap.deactivate();
+      }
+    },
+    handleEsc() {
+      if (this.isMobile) {
+        this.toggleNavigation(false);
+      }
+    }
+  }
+};
+const _hoisted_1 = ["aria-hidden", "aria-label", "aria-labelledby", "inert"];
+const _hoisted_2 = { class: "app-navigation__search" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcAppNavigationList = resolveComponent("NcAppNavigationList");
+  const _component_NcAppNavigationToggle = resolveComponent("NcAppNavigationToggle");
+  return openBlock(), createElementBlock("div", {
+    ref: "appNavigationContainer",
+    class: normalizeClass(["app-navigation", { "app-navigation--close": !$data.open }])
+  }, [
+    createElementVNode("nav", {
+      id: "app-navigation-vue",
+      "aria-hidden": $data.open ? "false" : "true",
+      "aria-label": $props.ariaLabel || void 0,
+      "aria-labelledby": $props.ariaLabelledby || void 0,
+      class: "app-navigation__content",
+      inert: !$data.open || void 0,
+      onKeydown: _cache[0] || (_cache[0] = withKeys((...args) => $options.handleEsc && $options.handleEsc(...args), ["esc"]))
+    }, [
+      createElementVNode("div", _hoisted_2, [
+        renderSlot(_ctx.$slots, "search", {}, void 0, true)
+      ]),
+      createElementVNode("div", {
+        class: normalizeClass(["app-navigation__body", { "app-navigation__body--no-list": !_ctx.$slots.list }])
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2),
+      _ctx.$slots.list ? (openBlock(), createBlock(_component_NcAppNavigationList, {
+        key: 0,
+        class: "app-navigation__list"
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "list", {}, void 0, true)
+        ]),
+        _: 3
+      })) : createCommentVNode("", true),
+      renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+    ], 40, _hoisted_1),
+    createVNode(_component_NcAppNavigationToggle, {
+      open: $data.open,
+      "onUpdate:open": $options.toggleNavigation
+    }, null, 8, ["open", "onUpdate:open"])
+  ], 2);
+}
+const NcAppNavigation = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-f30bbf6f"]]);
+export {
+  NcAppNavigation as N
+};

package/dist/chunks/NcAppNavigation-DKl5GKDr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigation-DKl5GKDr.mjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```vue\n<template>\n\t<div class=\"styleguide-nc-content\">\n\t\t<NcAppNavigation>\n\t\t\t<template #search>\n\t\t\t\t<div class=\"navigation__header\">\n\t\t\t\t\t<NcAppNavigationSearch v-model=\"searchValue\" label=\"Search …\" />\n\t\t\t\t\t<NcActions>\n\t\t\t\t\t\t<NcActionButton close-after-click @click=\"showModal = true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCog />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tApp settings (close after click)\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton @click=\"showModal = true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCog />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tApp settings (handle only click)\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #list>\n\t\t\t\t<NcAppNavigationItem v-for=\"item in items\" :key=\"item\" :name=\"item\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCheck :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</template>\n\t\t\t<template #footer>\n\t\t\t\t<div class=\"navigation__footer\">\n\t\t\t\t\t<NcButton wide @click=\"showModal = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconCog />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tApp settings\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcModal v-if=\"showModal\" name=\"Modal for focus-trap check\" @close=\"showModal = false\">\n\t\t\t\t\t\t<div class=\"modal-content\">\n\t\t\t\t\t\t\t<h4>Focus-trap should be locked inside the modal</h4>\n\t\t\t\t\t\t\t<NcTextField v-model=\"modalValue\" label=\"Focus me\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</NcModal>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</NcAppNavigation>\n\t</div>\n</template>\n\n<script>\n\timport IconCheck from 'vue-material-design-icons/Check'\n\timport IconCog from 'vue-material-design-icons/Cog'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCheck,\n\t\t\tIconCog,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:setHasAppNavigation': () => {},\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\titems: Array.from({ length: 5 }, (v, i) => `Item ${i+1}`),\n\t\t\t\tsearchValue: '',\n\t\t\t\tmodalValue: '',\n\t\t\t\tshowModal: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* Mock NcContent */\n\t.styleguide-nc-content {\n\t\tposition: relative;\n\t\theight: 300px;\n\t\tbackground-color: var(--color-background-plain);\n\t\toverflow: hidden;\n\t}\n\n\t.navigation__header,\n\t.navigation__footer {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 4px;\n\t}\n\n\t.modal-content {\n\t\theight: 120px;\n\t\tpadding: 10px;\n\t}\n</style>\n```\n\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<template>\n\t<div ref=\"appNavigationContainer\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{'app-navigation--close':!open }\">\n\t\t<nav id=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby || undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open || undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__search\">\n\t\t\t\t<!-- @slot For in-app search you can pass a `NcAppNavigationSearch` component as the slot content. -->\n\t\t\t\t<slot name=\"search\" />\n\t\t\t</div>\n\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$slots.list }\">\n\t\t\t\t<!-- @slot The main content of the navigation. If no list is passed to the #list slot, stretched vertically. -->\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$slots.list\" class=\"app-navigation__list\">\n\t\t\t\t<!-- List for Navigation list items. Stretched between the main content and the footer -->\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<!-- @slot Footer for e.g. NcAppNavigationSettings -->\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open=\"open\" @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<script>\nimport { useIsMobile } from '../../composables/useIsMobile/index.js'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\n\nimport NcAppNavigationList from '../NcAppNavigationList/index.js'\nimport NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\nimport { warn } from 'vue'\n\nexport default {\n\tname: 'NcAppNavigation',\n\n\tcomponents: {\n\t\tNcAppNavigationList,\n\t\tNcAppNavigationToggle,\n\t},\n\n\t// Injected from NcContent\n\tinject: {\n\t\tsetHasAppNavigation: {\n\t\t\tdefault: () => () => warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\t\t\tfrom: 'NcContent:setHasAppNavigation',\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The aria label to describe the navigation\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * aria-labelledby attribute to describe the navigation\n\t\t */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\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\topen: !this.isMobile,\n\t\t\tfocusTrap: null,\n\t\t}\n\t},\n\n\twatch: {\n\t\tisMobile() {\n\t\t\tthis.open = !this.isMobile\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t\topen() {\n\t\t\tthis.toggleFocusTrap()\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.setHasAppNavigation(true)\n\t\tsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\t// Emit an event with the initial state of the navigation\n\t\temit('navigation-toggled', {\n\t\t\topen: this.open,\n\t\t})\n\n\t\tthis.focusTrap = createFocusTrap(this.$refs.appNavigationContainer, {\n\t\t\tallowOutsideClick: true,\n\t\t\tfallbackFocus: this.$refs.appNavigationContainer,\n\t\t\ttrapStack: getTrapStack(),\n\t\t\tescapeDeactivates: false,\n\t\t})\n\t\tthis.toggleFocusTrap()\n\t},\n\tunmounted() {\n\t\tthis.setHasAppNavigation(false)\n\t\tunsubscribe('toggle-navigation', this.toggleNavigationByEventBus)\n\t\tthis.focusTrap.deactivate()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Toggle the navigation\n\t\t *\n\t\t * @param {boolean} [state] set the state instead of inverting the current one\n\t\t */\n\t\ttoggleNavigation(state) {\n\t\t\t// Early return if already in that state\n\t\t\tif (this.open === state) {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tthis.open = (typeof state === 'undefined') ? !this.open : state\n\t\t\tconst bodyStyles = getComputedStyle(document.body)\n\t\t\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) || 100\n\n\t\t\tsetTimeout(() => {\n\t\t\t\temit('navigation-toggled', {\n\t\t\t\t\topen: this.open,\n\t\t\t\t})\n\t\t\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t\t\t}, 1.5 * animationLength)\n\t\t},\n\n\t\ttoggleNavigationByEventBus({ open }) {\n\t\t\tthis.toggleNavigation(open)\n\t\t},\n\n\t\t/**\n\t\t * Activate focus trap if it is currently needed, otherwise deactivate\n\t\t */\n\t\ttoggleFocusTrap() {\n\t\t\tif (this.isMobile && this.open) {\n\t\t\t\tthis.focusTrap.activate()\n\t\t\t} else {\n\t\t\t\tthis.focusTrap.deactivate()\n\t\t\t}\n\t\t},\n\n\t\thandleEsc() {\n\t\t\tif (this.isMobile) {\n\t\t\t\tthis.toggleNavigation(false)\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/** Distance of the app navigation toggle and the first navigation item to the top edge of the app content container */\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\t--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tmax-width: var(--app-navigation-max-width);\n\tposition: relative;\n\ttop: 0;\n\tleft: 0;\n\tpadding: 0px;\n\t// Above NcAppContent\n\tz-index: 1800;\n\theight: 100%;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color: var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--close {\n\t\tmargin-inline-start: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));\n\t}\n\n\t&__search {\n\t\twidth: 100%;\n\t}\n\n\t&__body {\n\t\toverflow-y: scroll;\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// Add extra border for high contrast mode\n[data-themes*=\"highcontrast\"] {\n\t.app-navigation {\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the NcAppContent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation {\n\t\tposition: absolute;\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// Put the toggle behind NcAppSidebar on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-navigation {\n\t\tz-index: 1400;\n\t}\n}\n\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_withKeys","_renderSlot","_createBlock","_withCtx","_createCommentVNode","_createVNode"],"mappings":"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"}

package/dist/chunks/NcAppNavigationCaption-yvL3fHpB.mjs

@@ -0,0 +1,97 @@
+import '../assets/NcAppNavigationCaption-Ddf7LHGR.css';
+import { N as NcActions } from "./NcActions-BJ703bdY.mjs";
+import { resolveComponent, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createTextVNode, toDisplayString, createElementBlock, createVNode, normalizeProps, guardReactiveProps, renderSlot, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcAppNavigationCaption",
+  components: {
+    NcActions
+  },
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    /**
+     * `id` to set on the inner caption
+     * Can be used for connecting the `NcActionCaption` with `NcActionList` using `aria-labelledby`.
+     */
+    headingId: {
+      type: String,
+      default: null
+    },
+    /**
+     * Enable when used as a heading
+     * e.g. Before NcAppNavigationList
+     */
+    isHeading: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * If `isHeading` is set, this defines the heading level that should be used
+     */
+    headingLevel: {
+      type: Number,
+      default: 2
+    },
+    /**
+     * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop
+     */
+    // Not an actual prop but needed to show in vue-styleguidist docs
+    // eslint-disable-next-line
+    ...NcActions.props
+  },
+  computed: {
+    actionsProps() {
+      const actionProps = Object.keys(NcActions.props);
+      const props = Object.entries(this.$props).filter(([key, _value]) => actionProps.includes(key));
+      return Object.fromEntries(props);
+    },
+    wrapperTag() {
+      return this.isHeading ? "div" : "li";
+    },
+    captionTag() {
+      const headingLevel = Math.max(2, this.headingLevel);
+      return this.isHeading ? `h${headingLevel}` : "span";
+    }
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "app-navigation-caption__actions"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NcActions = resolveComponent("NcActions");
+  return openBlock(), createBlock(resolveDynamicComponent($options.wrapperTag), {
+    class: normalizeClass(["app-navigation-caption", { "app-navigation-caption--heading": $props.isHeading }])
+  }, {
+    default: withCtx(() => [
+      (openBlock(), createBlock(resolveDynamicComponent($options.captionTag), {
+        id: $props.headingId,
+        class: "app-navigation-caption__name"
+      }, {
+        default: withCtx(() => [
+          createTextVNode(toDisplayString($props.name), 1)
+        ]),
+        _: 1
+      }, 8, ["id"])),
+      !!_ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_component_NcActions, normalizeProps(guardReactiveProps($options.actionsProps)), {
+          icon: withCtx(() => [
+            renderSlot(_ctx.$slots, "actionsTriggerIcon", {}, void 0, true)
+          ]),
+          default: withCtx(() => [
+            renderSlot(_ctx.$slots, "actions", {}, void 0, true)
+          ]),
+          _: 3
+        }, 16)
+      ])) : createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 8, ["class"]);
+}
+const NcAppNavigationCaption = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-364ad19a"]]);
+export {
+  NcAppNavigationCaption as N
+};

package/dist/chunks/NcAppNavigationCaption-yvL3fHpB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationCaption-yvL3fHpB.mjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Basic usage\n\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tThis is an action\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconPlus,\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t/* Mock NcContent */\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element with a slot for custom actions icon\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationCaption\n\t\t\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t\t\t<IconPlus slot=\"icon\" :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconPencil :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tRename\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDelete :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tValidate\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconDownload :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\tDownload\n\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationCaption>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<script>\n\t\timport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\t\timport IconDelete from 'vue-material-design-icons/Delete.vue'\n\t\timport IconDownload from 'vue-material-design-icons/Download.vue'\n\t\timport IconPencil from 'vue-material-design-icons/Pencil.vue'\n\t\timport IconPlus from 'vue-material-design-icons/Plus.vue'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tIconArrowRight,\n\t\t\t\tIconDelete,\n\t\t\t\tIconDownload,\n\t\t\t\tIconPencil,\n\t\t\t\tIconPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/* Mock NcContent */\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n### Element used as a heading\n```vue\n\t<template>\n\t\t<div class=\"styleguide-nc-content\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<!-- if you need multiple lists you can use it in the default slot like this: -->\n\t\t\t\t<NcAppNavigationCaption heading-id=\"people-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"People\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"people-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"Emma\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jane\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Jake\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t\t<NcAppNavigationCaption heading-id=\"places-heading\"\n\t\t\t\t\tis-heading\n\t\t\t\t\tname=\"Places\" />\n\t\t\t\t<NcAppNavigationList aria-labelledby=\"places-heading\">\n\t\t\t\t\t<NcAppNavigationItem name=\"America\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Australia\" />\n\t\t\t\t\t<NcAppNavigationItem name=\"Europe\" />\n\t\t\t\t</NcAppNavigationList>\n\t\t\t</NcAppNavigation>\n\t\t</div>\n\t</template>\n\t<style scoped>\n\t\t/* Mock NcContent */\n\t\t.styleguide-nc-content {\n\t\t\tbackground-color: var(--color-background-plain);\n\t\t\toverflow: hidden;\n\t\t}\n\t</style>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"wrapperTag\"\n\t\tclass=\"app-navigation-caption\"\n\t\t:class=\"{ 'app-navigation-caption--heading': isHeading }\">\n\t\t<!-- Name of the caption -->\n\t\t<component :is=\"captionTag\"\n\t\t\t:id=\"headingId\"\n\t\t\tclass=\"app-navigation-caption__name\">\n\t\t\t{{ name }}\n\t\t</component>\n\n\t\t<!-- Actions -->\n\t\t<div v-if=\"!!$slots.actions\"\n\t\t\tclass=\"app-navigation-caption__actions\">\n\t\t\t<NcActions v-bind=\"actionsProps\">\n\t\t\t\t<!-- @slot Slot for the actions menu -->\n\t\t\t\t<slot name=\"actions\" />\n\t\t\t\t<template #icon>\n\t\t\t\t\t<slot name=\"actionsTriggerIcon\" />\n\t\t\t\t</template>\n\t\t\t</NcActions>\n\t\t</div>\n\t</component>\n</template>\n\n<script>\nimport NcActions from '../NcActions/NcActions.vue'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tprops: {\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * `id` to set on the inner caption\n\t\t * Can be used for connecting the `NcActionCaption` with `NcActionList` using `aria-labelledby`.\n\t\t */\n\t\theadingId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Enable when used as a heading\n\t\t * e.g. Before NcAppNavigationList\n\t\t */\n\t\tisHeading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * If `isHeading` is set, this defines the heading level that should be used\n\t\t */\n\t\theadingLevel: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\n\t\t/**\n\t\t * Any [NcActions](#/Components/NcActions?id=ncactions-1) prop\n\t\t */\n\t\t// Not an actual prop but needed to show in vue-styleguidist docs\n\t\t// eslint-disable-next-line\n\t\t...NcActions.props,\n\t},\n\n\tcomputed: {\n\t\tactionsProps() {\n\t\t\tconst actionProps = Object.keys(NcActions.props)\n\t\t\tconst props = Object\n\t\t\t\t.entries(this.$props)\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unused-vars\n\t\t\t\t.filter(([key, _value]) => actionProps.includes(key))\n\t\t\treturn Object.fromEntries(props)\n\t\t},\n\t\twrapperTag() {\n\t\t\treturn this.isHeading ? 'div' : 'li'\n\t\t},\n\t\tcaptionTag() {\n\t\t\t// Limit to at least h2 as h1 is considered invalid and reserved\n\t\t\tconst headingLevel = Math.max(2, this.headingLevel)\n\t\t\treturn this.isHeading ? `h${headingLevel}` : 'span'\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.app-navigation-caption {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\n\t&--heading {\n\t\tpadding: var(--app-navigation-padding);\n\t\t&:not(:first-child):not(:last-child) {\n\t\t\tpadding: 0 var(--app-navigation-padding);\n\t\t}\n\t}\n\n\t&__name {\n\t\tfont-weight: bold;\n\t\tcolor: var(--color-main-text);\n\t\tfont-size: var(--default-font-size);\n\t\tline-height: var(--default-clickable-area);\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\tbox-shadow: none !important;\n\t\tflex-shrink: 0;\n\t\t// padding to align the name with the icon of app navigation items\n\t\tpadding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 2);\n\t\tmargin-top: 0px;\n\t\tmargin-bottom: var(--default-grid-baseline);\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 var(--default-clickable-area);\n\t}\n}\n\n// extra top space if it's not the first item on the list\n.app-navigation-caption:not(:first-child) {\n\tmargin-top: calc(var(--default-clickable-area) / 2);\n}\n</style>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createTextVNode","_toDisplayString","_openBlock","_createElementBlock","_createVNode","_normalizeProps","_guardReactiveProps","_renderSlot","_createCommentVNode"],"mappings":";;;AAkLA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,EACA;AAAA,EAED,OAAO;AAAA,IACN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,GAAG,UAAU;AAAA,EACb;AAAA,EAED,UAAU;AAAA,IACT,eAAe;AACd,YAAM,cAAc,OAAO,KAAK,UAAU,KAAK;AAC/C,YAAM,QAAQ,OACZ,QAAQ,KAAK,MAAM,EAEnB,OAAO,CAAC,CAAC,KAAK,MAAM,MAAM,YAAY,SAAS,GAAG,CAAC;AACrD,aAAO,OAAO,YAAY,KAAK;AAAA,IAC/B;AAAA,IACD,aAAa;AACZ,aAAO,KAAK,YAAY,QAAQ;AAAA,IAChC;AAAA,IACD,aAAa;AAEZ,YAAM,eAAe,KAAK,IAAI,GAAG,KAAK,YAAY;AAClD,aAAO,KAAK,YAAY,IAAI,YAAY,KAAK;AAAA,IAC7C;AAAA,EACD;AACF;;EAnPA,KAAA;AAAA,EAmKG,OAAM;;;;sBAZRA,YAvJDC,wBAuJiB,SAAU,UAAA,GAAA;AAAA,IACzB,OAxJFC,eAAA,CAwJQ,0BAAwB,EAAA,mCACe,OAAS,UAAA,CAAA,CAAA;AAAA;IAzJxD,SAAAC,QA2JE,MAIY;AAAA,oBAJZH,YA3JFC,wBA2JkB,SAAU,UAAA,GAAA;AAAA,QACxB,IAAI,OAAS;AAAA,QACd,OAAM;AAAA;QA7JT,SAAAE,QA8JG,MAAU;AAAA,UA9JbC,gBAAAC,gBA8JM,OAAI,IAAA,GAAA,CAAA;AAAA;QA9JV,GAAA;AAAA;MAkKe,CAAA,CAAA,KAAA,OAAO,WAApBC,aAAAC,mBASM,OATN,YASM;AAAA,QAPLC,YAMY,sBA1KfC,eAAAC,mBAoKsB,SAAY,YAAA,CAAA,GAAA;AAAA,UAGnB,cACV,MAAkC;AAAA,YAAlCC,WAAkC,KAAA,QAAA,sBAAA,CAAA,GAAA,QAAA,IAAA;AAAA;UAxKvC,SAAAR,QAsKI,MAAuB;AAAA,YAAvBQ,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;UAtK3B,GAAA;AAAA;YAAAC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;"}

package/dist/chunks/NcAppNavigationIconBullet-DXwKXzN2.mjs

@@ -0,0 +1,43 @@
+import '../assets/NcAppNavigationIconBullet-By_0o2dG.css';
+import { openBlock, createElementBlock, createElementVNode, normalizeStyle } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcAppNavigationIconBullet",
+  props: {
+    color: {
+      type: String,
+      required: true,
+      validator(color) {
+        return /^#?([0-9A-F]{3}){1,2}$/i.test(color);
+      }
+    }
+  },
+  emits: ["click"],
+  computed: {
+    formattedColor() {
+      if (this.color.startsWith("#")) {
+        return this.color;
+      }
+      return "#" + this.color;
+    }
+  },
+  methods: {
+    onClick(e) {
+      this.$emit("click", e);
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: "app-navigation-entry__icon-bullet",
+    onClick: _cache[0] || (_cache[0] = (...args) => $options.onClick && $options.onClick(...args))
+  }, [
+    createElementVNode("div", {
+      style: normalizeStyle({ backgroundColor: $options.formattedColor })
+    }, null, 4)
+  ]);
+}
+const NcAppNavigationIconBullet = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-938dadb1"]]);
+export {
+  NcAppNavigationIconBullet as N
+};

package/dist/chunks/NcAppNavigationIconBullet-DXwKXzN2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationIconBullet-DXwKXzN2.mjs","sources":["../../src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Bullet\nThis component is made to be used inside of the [NcAppNavigationItem](#NcAppNavigationItem) component slot: `icon`.\n\n```\n<template #icon>\n\t<NcAppNavigationIconBullet color=\"0082c9\" />\n</template>\n<template #icon>\n\t<NcAppNavigationIconBullet color=\"#0082c9\" />\n</template>\n\n```\n\n### AppNavigationItem example\n```\n<NcAppNavigationItem  name=\"Entry 2\" :pinned=\"true\">\n\t<template #icon>\n\t\t<NcAppNavigationIconBullet color=\"0082c9\" />\n\t</template>\n</NcAppNavigationItem>\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-entry__icon-bullet\" @click=\"onClick\">\n\t\t<div :style=\"{ backgroundColor: formattedColor }\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppNavigationIconBullet',\n\n\tprops: {\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(color) {\n\t\t\t\t// #000, 000, #0082c9 and 0082c9\n\t\t\t\treturn /^#?([0-9A-F]{3}){1,2}$/i.test(color)\n\t\t\t},\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tformattedColor() {\n\t\t\tif (this.color.startsWith('#')) {\n\t\t\t\treturn this.color\n\t\t\t}\n\t\t\treturn '#' + this.color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-navigation-entry__icon-bullet {\n\tdisplay: block;\n\t// there is 2 margins\n\tpadding: calc($icon-margin + 1px);\n\tdiv {\n\t\twidth: $icon-size - 2px;\n\t\theight: $icon-size - 2px;\n\t\tcursor: pointer;\n\t\ttransition: background 100ms ease-in-out;\n\t\tborder: none;\n\t\tborder-radius: 50%;\n\t}\n}\n\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeStyle"],"mappings":";;AAoCA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,OAAO;AAAA,IACN,OAAO;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU,OAAO;AAEhB,eAAO,0BAA0B,KAAK,KAAK;AAAA,MAC3C;AAAA,IACD;AAAA,EACD;AAAA,EAED,OAAO,CAAC,OAAO;AAAA,EAEf,UAAU;AAAA,IACT,iBAAiB;AAChB,UAAI,KAAK,MAAM,WAAW,GAAG,GAAG;AAC/B,eAAO,KAAK;AAAA,MACb;AACA,aAAO,MAAM,KAAK;AAAA,IAClB;AAAA,EACD;AAAA,EAED,SAAS;AAAA,IACR,QAAQ,GAAG;AACV,WAAK,MAAM,SAAS,CAAC;AAAA,IACrB;AAAA,EACD;AAEF;;sBArCCA,mBAEM,OAAA;AAAA,IAFD,OAAM;AAAA,IAAqC,gDAAO,SAAO,WAAA,SAAA,QAAA,GAAA,IAAA;AAAA;IAC7DC,mBAAoD,OAAA;AAAA,MAA9C,OA/BRC,kCA+BkC,SAAc,eAAA,CAAA;AAAA;;;;"}