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

package/dist/chunks/NcAppNavigation-D0RINQda.mjs

@@ -0,0 +1,162 @@
+import '../assets/NcAppNavigation-B_aG01bd.css';
+import { useIsMobile } from "../Composables/useIsMobile.mjs";
+import { g as getTrapStack } from "./focusTrap-hWDNhn4t.mjs";
+import { subscribe, emit, unsubscribe } from "@nextcloud/event-bus";
+import { createFocusTrap } from "focus-trap";
+import { N as NcAppNavigationToggle } from "./NcAppNavigationToggle-BtC5hBww.mjs";
+import { N as NcAppNavigationList } from "./NcAppNavigationList-DzTic3Q7.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-e913526c"]]);
+export {
+  NcAppNavigation as N
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigation-D0RINQda.mjs","sources":["../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>\n -\n - @author Christoph Wurst <christoph@winzerhof-wurst.at>\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\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-BnhoAPkJ.mjs

@@ -0,0 +1,93 @@
+import '../assets/NcAppNavigationCaption-B32FjjW3.css';
+import { N as NcActions } from "./NcActions-B6QL_4DD.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
+  },
+  inheritAttrs: false,
+  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
+    " ": {}
+  },
+  computed: {
+    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(_ctx.$attrs)), {
+          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-72ff0d80"]]);
+export {
+  NcAppNavigationCaption as N
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationCaption-BnhoAPkJ.mjs","sources":["../../src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue"],"sourcesContent":["<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=\"$attrs\">\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/index.js'\n\nexport default {\n\tname: 'NcAppNavigationCaption',\n\n\tcomponents: {\n\t\tNcActions,\n\t},\n\n\tinheritAttrs: false,\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' ': {},\n\t},\n\n\tcomputed: {\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":";;;AAkJA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,EACA;AAAA,EAED,cAAc;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,KAAK,CAAE;AAAA,EACP;AAAA,EAED,UAAU;AAAA,IACT,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;;EA7MA,KAAA;AAAA,EAmIG,OAAM;;;;sBAZRA,YAvHDC,wBAuHiB,SAAU,UAAA,GAAA;AAAA,IACzB,OAxHFC,eAAA,CAwHQ,0BAAwB,EAAA,mCACe,OAAS,UAAA,CAAA,CAAA;AAAA;IAzHxD,SAAAC,QA2HE,MAIY;AAAA,oBAJZH,YA3HFC,wBA2HkB,SAAU,UAAA,GAAA;AAAA,QACxB,IAAI,OAAS;AAAA,QACd,OAAM;AAAA;QA7HT,SAAAE,QA8HG,MAAU;AAAA,UA9HbC,gBAAAC,gBA8HM,OAAI,IAAA,GAAA,CAAA;AAAA;QA9HV,GAAA;AAAA;MAkIe,CAAA,CAAA,KAAA,OAAO,WAApBC,aAAAC,mBASM,OATN,YASM;AAAA,QAPLC,YAMY,sBA1IfC,eAAAC,mBAoIsB,KAAM,MAAA,CAAA,GAAA;AAAA,UAGb,cACV,MAAkC;AAAA,YAAlCC,WAAkC,KAAA,QAAA,sBAAA,CAAA,GAAA,QAAA,IAAA;AAAA;UAxIvC,SAAAR,QAsII,MAAuB;AAAA,YAAvBQ,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA;UAtI3B,GAAA;AAAA;YAAAC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;"}

package/dist/chunks/NcAppNavigationIconBullet-JoIYov5C.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NcAppNavigationIconBullet-JoIYov5C.mjs","sources":["../../src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\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":";;AAqDA,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,OAhDRC,kCAgDkC,SAAc,eAAA,CAAA;AAAA;;;;"}