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

package/dist/chunks/NcAppNavigation-C9Ku9eb2.mjs

@@ -1,162 +0,0 @@
-import '../assets/NcAppNavigation-BjnW8PQn.css';
-import { useIsMobile } from "../Composables/useIsMobile.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 NcAppNavigationToggle } from "./NcAppNavigationToggle-DfX9dazn.mjs";
-import { N as NcAppNavigationList } from "./NcAppNavigationList-DCmrqe9N.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"];
-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", {
-        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-7aa67221"]]);
-export {
-  NcAppNavigation as N
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppNavigation-C9Ku9eb2.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>\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__body\" :class=\"{ 'app-navigation__body--no-list': !$slots.list }\">\n\t\t\t\t<!-- 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<!-- 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 NcAppNavigationToggle from '../NcAppNavigationToggle/index.js'\nimport NcAppNavigationList from '../NcAppNavigationList/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 alreay 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 naviation 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 appcontent\n\tz-index: 1800;\n\theight: 100%;\n\tbox-sizing: border-box;\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-left: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));\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\tbox-sizing: border-box;\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-right: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the appcontent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation {\n\t\tposition: absolute;\n\t}\n}\n\n// Put the toggle behind appsidebar 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-BysnsczC.mjs

@@ -1,97 +0,0 @@
-import '../assets/NcAppNavigationCaption-CWeMjjhD.css';
-import { N as NcActions } from "./NcActions-DqMOvrbN.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-e396e332"]]);
-export {
-  NcAppNavigationCaption as N
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppNavigationCaption-BysnsczC.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<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Plus :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tThis is an action\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\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<ul class=\"nav\">\n\t\t\t<NcAppNavigationCaption\n\t\t\t\tname=\"Your caption goes here\">\n\t\t\t\t<template #actionsTriggerIcon>\n\t\t\t\t\t<Plus slot=\"icon\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<template #actions>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tRename\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Delete :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDelete\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tValidate\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<Download :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tDownload\n\t\t\t\t\t</NcActionButton>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigationCaption>\n\t\t</ul>\n\t</template>\n\t<script>\n\t\timport ArrowRight from 'vue-material-design-icons/ArrowRight'\n\t\timport Delete from 'vue-material-design-icons/Delete'\n\t\timport Download from 'vue-material-design-icons/Download'\n\t\timport Pencil from 'vue-material-design-icons/Pencil'\n\t\timport Plus from 'vue-material-design-icons/Plus'\n\n\t\texport default {\n\t\t\tcomponents: {\n\t\t\t\tArrowRight,\n\t\t\t\tDelete,\n\t\t\t\tDownload,\n\t\t\t\tPencil,\n\t\t\t\tPlus,\n\t\t\t}\n\t\t}\n\t</script>\n\t<style scoped>\n\t\t/* mock the appnavigation */\n\t\tul.nav {\n\t\t\tbackground-color: #cce6f4;\n\t\t}\n\t</style>\n```\n\n### Element used as a heading\n```vue\n\t<template>\n\t\t<!-- e.g. NcAppNavigation-->\n\t\t<div style=\"display: flex; flex-direction: column;\">\n\t\t\t<NcAppNavigationCaption heading-id=\"mylist-heading\"\n\t\t\t\tis-heading\n\t\t\t\tname=\"My navigation list\" />\n\t\t\t<NcAppNavigationList aria-labelledby=\"mylist-heading\">\n\t\t\t\t<NcAppNavigationItem name=\"First\" />\n\t\t\t\t<NcAppNavigationItem name=\"Second\" />\n\t\t\t\t<NcAppNavigationItem name=\"Third\" />\n\t\t\t</NcAppNavigationList>\n\t\t</div>\n\t</template>\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: $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) * 3);\n\t\tmargin-top: 0px;\n\t\tmargin-bottom: 12px;\n\t}\n\n\t&__actions {\n\t\tflex: 0 0 $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: math.div($clickable-area, 2);\n}\n</style>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_createTextVNode","_toDisplayString","_openBlock","_createElementBlock","_createVNode","_normalizeProps","_guardReactiveProps","_renderSlot","_createCommentVNode"],"mappings":";;;AAuJA,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;;EAxNA,KAAA;AAAA,EAwIG,OAAM;;;;sBAZRA,YA5HDC,wBA4HiB,SAAU,UAAA,GAAA;AAAA,IACzB,OA7HFC,eAAA,CA6HQ,0BAAwB,EAAA,mCACe,OAAS,UAAA,CAAA,CAAA;AAAA;IA9HxD,SAAAC,QAgIE,MAIY;AAAA,oBAJZH,YAhIFC,wBAgIkB,SAAU,UAAA,GAAA;AAAA,QACxB,IAAI,OAAS;AAAA,QACd,OAAM;AAAA;QAlIT,SAAAE,QAmIG,MAAU;AAAA,UAnIbC,gBAAAC,gBAmIM,OAAI,IAAA,GAAA,CAAA;AAAA;QAnIV,GAAA;AAAA;MAuIe,CAAA,CAAA,KAAA,OAAO,WAApBC,aAAAC,mBASM,OATN,YASM;AAAA,QAPLC,YAMY,sBA/IfC,eAAAC,mBAyIsB,SAAY,YAAA,CAAA,GAAA;AAAA,UAGnB,cACV,MAAkC;AAAA,YAAlCC,WAAkC,KAAA,QAAA,sBAAA,CAAA,GAAA,QAAA,IAAA;AAAA;UA7IvC,SAAAR,QA2II,MAAuB;AAAA,YAAvBQ,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;UA3I3B,GAAA;AAAA;YAAAC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;"}

package/dist/chunks/NcAppNavigationIconBullet-DuqQFciH.mjs

@@ -1,43 +0,0 @@
-import '../assets/NcAppNavigationIconBullet-EfIZU7x-.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-37dbcd48"]]);
-export {
-  NcAppNavigationIconBullet as N
-};

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

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppNavigationIconBullet-DuqQFciH.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: $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;;;;"}