@nextcloud/vue 8.5.0 → 9.0.0-alpha.0

package/dist/chunks/NcPopover-sVfBFdPh.cjs

@@ -0,0 +1,217 @@
+var v = require("../assets/NcPopover-MK4GcuPY.css");
+const o = require("vue"), c = require("floating-vue"), u = require("focus-trap"), l = require("./focusTrap-n3H52LOw.cjs"), d = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), h = o.defineComponent({
+  name: "NcPopoverTriggerProvider",
+  provide() {
+    return {
+      "NcPopover:trigger:shown": o.computed(() => this.shown),
+      "NcPopover:trigger:attrs": o.computed(() => this.triggerAttrs)
+    };
+  },
+  props: {
+    shown: {
+      type: Boolean,
+      required: !0
+    },
+    popupRole: {
+      type: String,
+      required: !0
+    }
+  },
+  computed: {
+    triggerAttrs() {
+      return {
+        "aria-haspopup": this.popupRole,
+        "aria-expanded": this.shown.toString()
+      };
+    }
+  },
+  render() {
+    return this.$slots.default?.({
+      attrs: this.triggerAttrs
+    });
+  }
+}), g = {
+  name: "NcPopover",
+  components: {
+    Dropdown: c.Dropdown,
+    NcPopoverTriggerProvider: h
+  },
+  props: {
+    /**
+     * Show or hide the popper
+     * @see https://floating-vue.starpad.dev/api/#shown
+     */
+    shown: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Popup role
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values
+     */
+    popupRole: {
+      type: String,
+      default: "true",
+      validator: (e) => ["menu", "listbox", "tree", "grid", "dialog", "true"].includes(e)
+    },
+    popoverBaseClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Enable popover focus trap
+     */
+    focusTrap: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Set element to return focus to after focus trap deactivation
+     *
+     * @type {import('focus-trap').FocusTargetValueOrFalse}
+     */
+    setReturnFocus: {
+      default: void 0,
+      type: [HTMLElement, SVGElement, String, Boolean]
+    }
+  },
+  emits: [
+    "after-show",
+    "after-hide",
+    /**
+     * @see https://floating-vue.starpad.dev/api/#update-shown
+     */
+    "update:shown"
+  ],
+  data() {
+    return {
+      internalShown: this.shown
+    };
+  },
+  computed: {
+    shownProxy: {
+      get() {
+        return this.internalShown;
+      },
+      set(e) {
+        this.internalShown = e, this.$emit("update:shown", e);
+      }
+    }
+  },
+  watch: {
+    shown(e) {
+      this.internalShown = e;
+    }
+  },
+  mounted() {
+    this.checkTriggerA11y();
+  },
+  beforeUnmount() {
+    this.clearFocusTrap(), this.clearEscapeStopPropagation();
+  },
+  methods: {
+    /**
+     * Check if the trigger has all required a11y attributes.
+     * Important to check custom trigger button.
+     */
+    checkTriggerA11y() {
+      window.OC?.debug && (this.$refs.popover.$refs.popper.$refs.reference.querySelector("[aria-expanded][aria-haspopup]") || o.warn("It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example."));
+    },
+    /**
+     * @return {HTMLElement|undefined}
+     */
+    getPopoverContentElement() {
+      return this.$refs.popover?.$refs.popperContent?.$el;
+    },
+    /**
+     * Add focus trap for accessibility.
+     */
+    async useFocusTrap() {
+      if (await this.$nextTick(), !this.focusTrap)
+        return;
+      const e = this.getPopoverContentElement();
+      e && (this.$focusTrap = u.createFocusTrap(e, {
+        // Prevents to lose focus using esc key
+        // Focus will be release when popover be hide
+        escapeDeactivates: !1,
+        allowOutsideClick: !0,
+        setReturnFocus: this.setReturnFocus,
+        trapStack: l.getTrapStack()
+      }), this.$focusTrap.activate());
+    },
+    /**
+     * Remove focus trap
+     *
+     * @param {object} options The configuration options for focusTrap
+     */
+    clearFocusTrap(e = {}) {
+      try {
+        this.$focusTrap?.deactivate(e), this.$focusTrap = null;
+      } catch (t) {
+        console.warn(t);
+      }
+    },
+    /**
+     * Add stopPropagation for Escape.
+     * It prevents global Escape handling after closing popover.
+     *
+     * Manual event handling is used here instead of v-on because there is no direct access to the node.
+     * Alternative - wrap <template #popover> in a div wrapper.
+     */
+    addEscapeStopPropagation() {
+      this.getPopoverContentElement()?.addEventListener("keydown", this.stopKeydownEscapeHandler);
+    },
+    /**
+     * Remove stop Escape handler
+     */
+    clearEscapeStopPropagation() {
+      this.getPopoverContentElement()?.removeEventListener("keydown", this.stopKeydownEscapeHandler);
+    },
+    /**
+     * @param {KeyboardEvent} event - native keydown event
+     */
+    stopKeydownEscapeHandler(e) {
+      e.type === "keydown" && e.key === "Escape" && e.stopPropagation();
+    },
+    afterShow() {
+      this.$nextTick(() => {
+        this.$emit("after-show"), this.useFocusTrap(), this.addEscapeStopPropagation();
+      });
+    },
+    afterHide() {
+      this.$emit("after-hide"), this.clearFocusTrap(), this.clearEscapeStopPropagation();
+    }
+  }
+};
+function f(e, t, s, m, p, r) {
+  const a = o.resolveComponent("NcPopoverTriggerProvider"), i = o.resolveComponent("Dropdown");
+  return o.openBlock(), o.createBlock(i, {
+    ref: "popover",
+    shown: r.shownProxy,
+    "onUpdate:shown": t[0] || (t[0] = (n) => r.shownProxy = n),
+    distance: 10,
+    "arrow-padding": 10,
+    "no-auto-focus": !0,
+    "popper-class": s.popoverBaseClass,
+    onApplyShow: r.afterShow,
+    onApplyHide: r.afterHide
+  }, {
+    popper: o.withCtx(() => [
+      o.renderSlot(e.$slots, "default")
+    ]),
+    default: o.withCtx(() => [
+      o.createVNode(a, {
+        shown: p.internalShown,
+        "popup-role": s.popupRole
+      }, {
+        default: o.withCtx((n) => [
+          o.renderSlot(e.$slots, "trigger", o.normalizeProps(o.guardReactiveProps(n)))
+        ]),
+        _: 3
+      }, 8, ["shown", "popup-role"])
+    ]),
+    _: 3
+  }, 8, ["shown", "popper-class", "onApplyShow", "onApplyHide"]);
+}
+const w = /* @__PURE__ */ d._export_sfc(g, [["render", f]]);
+exports.NcPopover = w;

package/dist/chunks/NcPopover-sVfBFdPh.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcPopover-sVfBFdPh.cjs","sources":["../../src/components/NcPopover/NcPopoverTriggerProvider.vue","../../src/components/NcPopover/NcPopover.vue"],"sourcesContent":["<script>\nimport { computed, defineComponent } from 'vue'\n\nexport default defineComponent({\n\tname: 'NcPopoverTriggerProvider',\n\n\tprovide() {\n\t\treturn {\n\t\t\t'NcPopover:trigger:shown': computed(() => this.shown),\n\t\t\t'NcPopover:trigger:attrs': computed(() => this.triggerAttrs),\n\t\t}\n\t},\n\n\tprops: {\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\trequired: true,\n\t\t},\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\ttriggerAttrs() {\n\t\t\treturn {\n\t\t\t\t'aria-haspopup': this.popupRole,\n\t\t\t\t'aria-expanded': this.shown.toString(),\n\t\t\t}\n\t\t},\n\t},\n\n\trender() {\n\t\treturn this.$slots.default?.({\n\t\t\tattrs: this.triggerAttrs,\n\t\t})\n\t},\n})\n</script>\n","<!--\n  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\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>\n\n### General description\n\nThis component is just a wrapper for the floating-vue plugin by Akryum,\nplease refer to this documentation for customization:\nhttps://github.com/Akryum/floating-vue\n\nThis components has two slots:\n* 'trigger' which can be any html element and it will trigger the popover\nthis slot is optional since you can toggle the popover also by updating the\nopen prop on this component;\n\n* a default slot that is for the content of the popover.\n\n### Examples\n\n#### With a `<NcButton>` as a trigger:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<form tabindex=\"0\" role=\"dialog\" aria-labelledby=\"popover-example-dialog-header-1\" @submit.prevent>\n\t\t\t\t\t<h2 id=\"popover-example-dialog-header-1\">this is some content</h2>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. <br/>\n\t\t\t\t\t\tVestibulum eget placerat velit.\n\t\t\t\t\t</p>\n\t\t\t\t\t<label>\n\t\t\t\t\t\tLabel element\n\t\t\t\t\t\t<input type=\"text\" placeholder=\"input element\"/>\n\t\t\t\t\t</label>\n\t\t\t\t</form>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Without focus trap:\n\nThe [`focus-trap`](https://github.com/focus-trap/focus-trap) emits an error when used in a non-focusable element tree.\n\nThe prop `:focus-trap=\"false\"` help to prevent it when the default behavior is not relevant.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover :focus-trap=\"false\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Click me!</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\tHi! 🚀\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With passing props to `floating-vue`'s `Dropdown`:\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover container=\"body\" :popper-hide-triggers=\"(triggers) => [...triggers, 'click']\" popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>I am the trigger</NcButton>\n\t\t\t</template>\n\t\t\t<template #default>\n\t\t\t\t<NcButton>Click on the button will close NcPopover</NcButton>\n\t\t\t</template>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### With a custom button in as a trigger:\n\nWhen `<NcButton>` is used as a `<NcPopover>` trigger, it injects required for a11y attributes to the button.\n\nIf you are using your own custom button as a trigger make sure to bind `attrs` from the trigger slot props.\nSee code example below.\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<NcPopover>\n\t\t\t<!-- Take \"attrs\" from the slot props -->\n\t\t\t<template #trigger=\"{ attrs }\">\n\t\t\t\t<!-- Bind attrs as the button attrs -->\n\t\t\t\t<button v-bind=\"attrs\">\n\t\t\t\t\tI am a custom button in the trigger\n\t\t\t\t</button>\n\t\t\t</template>\n\n\t\t\tHi! 🚀\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n\n#### Provide role for the popover content\n\nFor accessibility reasons, popover should have a role. Provide it to the `popup-role` and make sure that the popover content is an element with the same role.\n\nSee: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup\n\n```vue\n<template>\n\t<div style=\"display: flex\">\n\t\t<!-- Provide popup role -->\n\t\t<NcPopover popup-role=\"dialog\">\n\t\t\t<template #trigger>\n\t\t\t\t<NcButton>Delete</NcButton>\n\t\t\t</template>\n\n\t\t\t<!-- Popover content should has the same role -->\n\t\t\t<div role=\"dialog\" aria-labelledby=\"popover-example-custom-role-1\">\n\t\t\t\t<!-- This is not required but better to provide a label -->\n\t\t\t\t<header id=\"popover-example-custom-role-1\">\n\t\t\t\t\t<strong>Confirm remove</strong>\n\t\t\t\t</header>\n\t\t\t\t<NcButton type=\"danger\">Delete</NcButton>\n\t\t\t</div>\n\t\t</NcPopover>\n\t</div>\n</template>\n```\n</docs>\n\n<template>\n\t<Dropdown ref=\"popover\"\n\t\tv-model:shown=\"shownProxy\"\n\t\t:distance=\"10\"\n\t\t:arrow-padding=\"10\"\n\t\t:no-auto-focus=\"true /* Handled by the focus trap */\"\n\t\t:popper-class=\"popoverBaseClass\"\n\t\t@apply-show=\"afterShow\"\n\t\t@apply-hide=\"afterHide\">\n\t\t<NcPopoverTriggerProvider v-slot=\"slotProps\" :shown=\"internalShown\" :popup-role=\"popupRole\">\n\t\t\t<!-- This will be the popover target (for the events and position) -->\n\t\t\t<slot name=\"trigger\" v-bind=\"slotProps\" />\n\t\t</NcPopoverTriggerProvider>\n\n\t\t<!-- This will be the content of the popover -->\n\t\t<template #popper>\n\t\t\t<slot />\n\t\t</template>\n\t</Dropdown>\n</template>\n\n<script>\nimport { warn } from 'vue'\nimport { Dropdown } from 'floating-vue'\nimport { createFocusTrap } from 'focus-trap'\nimport { getTrapStack } from '../../utils/focusTrap.js'\nimport NcPopoverTriggerProvider from './NcPopoverTriggerProvider.vue'\n\nexport default {\n\tname: 'NcPopover',\n\n\tcomponents: {\n\t\tDropdown,\n\t\tNcPopoverTriggerProvider,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Show or hide the popper\n\t\t * @see https://floating-vue.starpad.dev/api/#shown\n\t\t */\n\t\tshown: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Popup role\n\t\t * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup#values\n\t\t */\n\t\tpopupRole: {\n\t\t\ttype: String,\n\t\t\tdefault: 'true',\n\t\t\tvalidator: (value) => ['menu', 'listbox', 'tree', 'grid', 'dialog', 'true'].includes(value),\n\t\t},\n\n\t\tpopoverBaseClass: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Enable popover focus trap\n\t\t */\n\t\tfocusTrap: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Set element to return focus to after focus trap deactivation\n\t\t *\n\t\t * @type {import('focus-trap').FocusTargetValueOrFalse}\n\t\t */\n\t\tsetReturnFocus: {\n\t\t\tdefault: undefined,\n\t\t\ttype: [HTMLElement, SVGElement, String, Boolean],\n\t\t},\n\t},\n\n\temits: [\n\t\t'after-show',\n\t\t'after-hide',\n\t\t/**\n\t\t * @see https://floating-vue.starpad.dev/api/#update-shown\n\t\t */\n\t\t'update:shown',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tinternalShown: this.shown,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tshownProxy: {\n\t\t\tget() {\n\t\t\t\treturn this.internalShown\n\t\t\t},\n\t\t\tset(value) {\n\t\t\t\tthis.internalShown = value\n\t\t\t\tthis.$emit('update:shown', value)\n\t\t\t},\n\t\t},\n\t},\n\n\twatch: {\n\t\tshown(value) {\n\t\t\tthis.internalShown = value\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.checkTriggerA11y()\n\t},\n\n\tbeforeUnmount() {\n\t\tthis.clearFocusTrap()\n\t\tthis.clearEscapeStopPropagation()\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Check if the trigger has all required a11y attributes.\n\t\t * Important to check custom trigger button.\n\t\t */\n\t\tcheckTriggerA11y() {\n\t\t\tif (window.OC?.debug) {\n\t\t\t\tconst triggerContainer = this.$refs.popover.$refs.popper.$refs.reference\n\t\t\t\tconst requiredTriggerButton = triggerContainer.querySelector('[aria-expanded][aria-haspopup]')\n\t\t\t\tif (!requiredTriggerButton) {\n\t\t\t\t\twarn('It looks like you are using a custom button as a <NcPopover> or other popover #trigger. If you are not using <NcButton> as a trigger, you need to bind attrs from the #trigger slot props to your custom button. See <NcPopover> docs for an example.')\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * @return {HTMLElement|undefined}\n\t\t */\n\t\tgetPopoverContentElement() {\n\t\t\treturn this.$refs.popover?.$refs.popperContent?.$el\n\t\t},\n\n\t\t/**\n\t\t * Add focus trap for accessibility.\n\t\t */\n\t\tasync useFocusTrap() {\n\t\t\tawait this.$nextTick()\n\n\t\t\tif (!this.focusTrap) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\tconst el = this.getPopoverContentElement()\n\n\t\t\tif (!el) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Init focus trap\n\t\t\tthis.$focusTrap = createFocusTrap(el, {\n\t\t\t\t// Prevents to lose focus using esc key\n\t\t\t\t// Focus will be release when popover be hide\n\t\t\t\tescapeDeactivates: false,\n\t\t\t\tallowOutsideClick: true,\n\t\t\t\tsetReturnFocus: this.setReturnFocus,\n\t\t\t\ttrapStack: getTrapStack(),\n\t\t\t})\n\t\t\tthis.$focusTrap.activate()\n\t\t},\n\n\t\t/**\n\t\t * Remove focus trap\n\t\t *\n\t\t * @param {object} options The configuration options for focusTrap\n\t\t */\n\t\tclearFocusTrap(options = {}) {\n\t\t\ttry {\n\t\t\t\tthis.$focusTrap?.deactivate(options)\n\t\t\t\tthis.$focusTrap = null\n\t\t\t} catch (err) {\n\t\t\t\tconsole.warn(err)\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Add stopPropagation for Escape.\n\t\t * It prevents global Escape handling after closing popover.\n\t\t *\n\t\t * Manual event handling is used here instead of v-on because there is no direct access to the node.\n\t\t * Alternative - wrap <template #popover> in a div wrapper.\n\t\t */\n\t\taddEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.addEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * Remove stop Escape handler\n\t\t */\n\t\tclearEscapeStopPropagation() {\n\t\t\tconst el = this.getPopoverContentElement()\n\t\t\tel?.removeEventListener('keydown', this.stopKeydownEscapeHandler)\n\t\t},\n\n\t\t/**\n\t\t * @param {KeyboardEvent} event - native keydown event\n\t\t */\n\t\tstopKeydownEscapeHandler(event) {\n\t\t\tif (event.type === 'keydown' && event.key === 'Escape') {\n\t\t\t\tevent.stopPropagation()\n\t\t\t}\n\t\t},\n\n\t\tafterShow() {\n\t\t\t/**\n\t\t\t * Triggered after the tooltip was visually displayed.\n\t\t\t *\n\t\t\t * This is different from the 'show' and 'apply-show' which\n\t\t\t * run earlier than this where there is no guarantee that the\n\t\t\t * tooltip is already visible and in the DOM.\n\t\t\t */\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$emit('after-show')\n\t\t\t\tthis.useFocusTrap()\n\t\t\t\tthis.addEscapeStopPropagation()\n\t\t\t})\n\t\t},\n\t\tafterHide() {\n\t\t\t/**\n\t\t\t * Triggered after the tooltip was visually hidden.\n\t\t\t */\n\t\t\tthis.$emit('after-hide')\n\t\t\tthis.clearFocusTrap()\n\t\t\tthis.clearEscapeStopPropagation()\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\">\n\n.resize-observer {\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\tz-index:-1;\n\twidth:100%;\n\theight:100%;\n\tborder:none;\n\tbackground-color:transparent;\n\tpointer-events:none;\n\tdisplay:block;\n\toverflow:hidden;\n\topacity:0\n}\n\n.resize-observer object {\n\tdisplay:block;\n\tposition:absolute;\n\ttop:0;\n\tleft:0;\n\theight:100%;\n\twidth:100%;\n\toverflow:hidden;\n\tpointer-events:none;\n\tz-index:-1\n}\n\n$arrow-width: 10px;\n\n.v-popper--theme-dropdown {\n\t&.v-popper__popper {\n\t\tz-index: 100000;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: block !important;\n\n\t\tfilter: drop-shadow(0 1px 10px var(--color-box-shadow));\n\n\t\t.v-popper__inner {\n\t\t\tpadding: 0;\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-radius: var(--border-radius-large);\n\t\t\toverflow: hidden;\n\t\t\tbackground: var(--color-main-background);\n\t\t}\n\n\t\t.v-popper__arrow-container {\n\t\t\tposition: absolute;\n\t\t\tz-index: 1;\n\t\t\twidth: 0;\n\t\t\theight: 0;\n\t\t\tborder-style: solid;\n\t\t\tborder-color: transparent;\n\t\t\tborder-width: $arrow-width;\n\t\t}\n\n\t\t&[data-popper-placement^='top'] .v-popper__arrow-container {\n\t\t\tbottom: -$arrow-width;\n\t\t\tborder-bottom-width: 0;\n\t\t\tborder-top-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='bottom'] .v-popper__arrow-container {\n\t\t\ttop: -$arrow-width;\n\t\t\tborder-top-width: 0;\n\t\t\tborder-bottom-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='right'] .v-popper__arrow-container {\n\t\t\tleft: -$arrow-width;\n\t\t\tborder-left-width: 0;\n\t\t\tborder-right-color: var(--color-main-background);\n\t\t}\n\n\t\t&[data-popper-placement^='left'] .v-popper__arrow-container {\n\t\t\tright: -$arrow-width;\n\t\t\tborder-right-width: 0;\n\t\t\tborder-left-color: var(--color-main-background);\n\t\t}\n\n\t\t&[aria-hidden='true'] {\n\t\t\tvisibility: hidden;\n\t\t\ttransition: opacity var(--animation-quick), visibility var(--animation-quick);\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&[aria-hidden='false'] {\n\t\t\tvisibility: visible;\n\t\t\ttransition: opacity var(--animation-quick);\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main$1","vue","_sfc_main","floatingVue","value","el","focusTrap","options","err","event","$options","_cache","$event","$props","$data"],"mappings":";oLAGAA,IAAAC,EAAA,gBAAA;AAAA,EACC,MAAA;AAAA,EAEA,UAAA;AACC,WAAA;AAAA;;IAGA;AAAA;EAGD,OAAA;AAAA,IACC,OAAA;AAAA;;;;;;;;EAUD,UAAA;AAAA,IACC,eAAA;AACC,aAAA;AAAA,QACC,iBAAA,KAAA;AAAA,QACA,iBAAA,KAAA,MAAA,SAAA;AAAA,MACD;AAAA;;EAIF,SAAA;;;;;AAKD,CAAA,GCmJAC,IAAA;AAAA,EACC,MAAA;AAAA;IAGC,UAAAC,EAAA;AAAA;;EAID,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,OAAA;AAAA;;;;;;;;;MAWC,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,QAAA,WAAA,QAAA,QAAA,UAAA,MAAA,EAAA,SAAAA,CAAA;AAAA;IAGD,kBAAA;AAAA;;;;;;;;;;;;;;;IAgBA,gBAAA;AAAA,MACC,SAAA;AAAA,MACA,MAAA,CAAA,aAAA,YAAA,QAAA,OAAA;AAAA;;EAIF,OAAA;AAAA;;;;;IAMC;AAAA;EAGD,OAAA;AACC,WAAA;AAAA;IAEA;AAAA;EAGD,UAAA;AAAA;;;;;gCAOG,KAAA,MAAA,gBAAAA,CAAA;AAAA;;;EAKH,OAAA;AAAA;;;;EAMA,UAAA;;;EAIA,gBAAA;AACC,SAAA,eAAA,GACA,KAAA,2BAAA;AAAA;EAGD,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKC,mBAAA;AACC,MAAA,OAAA,IAAA,UACC,KAAA,MAAA,QAAA,MAAA,OAAA,MAAA,UACA,cAAA,gCAAA;;;;;;;;;;;IAiBF,MAAA,eAAA;AAGC,UAFA,MAAA,KAAA,UAAA,GAEA,CAAA,KAAA;;AAIA,YAAAC,IAAA,KAAA,yBAAA;AAEA,MAAAA,MAKA,KAAA,aAAAC,EAAA,gBAAAD,GAAA;AAAA;AAAA;AAAA;;QAKC,gBAAA,KAAA;AAAA;;;;;;;;;AAYD,UAAA;AACC,aAAA,YAAA,WAAAE,CAAA,GACA,KAAA,aAAA;AAAA;AAEA,gBAAA,KAAAC,CAAA;AAAA,MACD;AAAA;;;;;;;;;MAWA,KAAA,yBAAA;;;;;;AASA,MADA,KAAA,yBAAA,GACA,oBAAA,WAAA,KAAA,wBAAA;AAAA;;;;IAMD,yBAAAC,GAAA;;;;AAcC,WAAA,UAAA,MAAA;kCAEC,KAAA,aAAA,GACA,KAAA,yBAAA;AAAA;;;gCAQD,KAAA,eAAA,GACA,KAAA,2BAAA;AAAA;;AAGH;;;;IA3OW,KAAA;AAAA,IACD,OAAAC,EAAA;AAAA,IA/JV,kBAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAAF,EAAA,aAAAE;AAAA,IAgKG,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,iBAAA;AAAA,IACA,gBAAAC,EAAA;AAAA,IACA,aAAAH,EAAA;AAAA,IACA,aAAAA,EAAA;AAAA;IAOU,QAAAT,EAAA,QAAA,MAAA;AAAA;;IA5Kb,SAAAA,EAAA,QAAA,MAAA;AAAA;QAsKgD,OAAAa,EAAA;AAAA,QAAuB,cAAAD,EAAA;AAAA;;;;;;;;;;;;"}

package/dist/chunks/NcProgressBar-3p3Phbcw.cjs

@@ -0,0 +1,123 @@
+var y = require("../assets/NcProgressBar-w4-G5gQR.css");
+const e = require("vue"), o = require("./_plugin-vue_export-helper-xG2iG1wl.cjs"), a = {
+  name: "NcProgressBar",
+  props: {
+    /**
+     * An integer between 1 and 100
+     */
+    value: {
+      type: Number,
+      default: 0,
+      validator(s) {
+        return s >= 0 && s <= 100;
+      }
+    },
+    /**
+     * Determines the height of the progressbar.
+     * Possible values:
+     * - 'small' (default)
+     * - 'medium'
+     * - Number
+     * @type {'small'|'medium'|number}
+     */
+    size: {
+      type: [String, Number],
+      default: "small",
+      validator(s) {
+        return ["small", "medium"].includes(s) || typeof s == "number";
+      }
+    },
+    /**
+     * Applies an error color to the progressbar if true.
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * ProgressBar type
+     */
+    type: {
+      type: String,
+      default: "linear",
+      validator(s) {
+        return ["linear", "circular"].includes(s);
+      }
+    },
+    color: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      stroke: 4
+    };
+  },
+  computed: {
+    height() {
+      return this.type === "circular" ? Number.isInteger(this.size) ? this.size : 44 : this.size === "small" ? 4 : this.size === "medium" ? 6 : this.size;
+    },
+    progress() {
+      return this.value / 100;
+    },
+    radius() {
+      return this.height / 2;
+    },
+    radiusNormalized() {
+      return this.radius - 3 * this.stroke;
+    },
+    circumference() {
+      return this.radiusNormalized * 2 * Math.PI;
+    }
+  }
+}, i = () => {
+  e.useCssVars((s) => ({
+    "0f3d9b00": s.color
+  }));
+}, u = a.setup;
+a.setup = u ? (s, c) => (i(), u(s, c)) : i;
+const n = ["aria-valuenow"], d = ["height", "width"], h = ["stroke-dasharray", "stroke-dashoffset", "stroke-width", "r", "cx", "cy"], g = ["stroke-dasharray", "stroke-dashoffset", "stroke-width", "r", "cx", "cy"], m = ["value"];
+function f(s, c, t, k, l, r) {
+  return t.type === "circular" ? (e.openBlock(), e.createElementBlock("span", {
+    key: 0,
+    role: "progressbar",
+    "aria-valuenow": t.value,
+    style: e.normalizeStyle({ "--progress-bar-height": r.height + "px" }),
+    class: e.normalizeClass([{ "progress-bar--error": t.error }, "progress-bar progress-bar--circular"])
+  }, [
+    (e.openBlock(), e.createElementBlock("svg", {
+      height: r.height,
+      width: r.height
+    }, [
+      e.createElementVNode("circle", {
+        stroke: "currentColor",
+        fill: "transparent",
+        "stroke-dasharray": `${r.progress * r.circumference} ${(1 - r.progress) * r.circumference}`,
+        "stroke-dashoffset": 0.25 * r.circumference,
+        "stroke-width": l.stroke,
+        r: r.radiusNormalized,
+        cx: r.radius,
+        cy: r.radius
+      }, null, 8, h),
+      e.createElementVNode("circle", {
+        stroke: "var(--color-background-darker)",
+        fill: "transparent",
+        "stroke-dasharray": `${(1 - r.progress) * r.circumference} ${r.progress * r.circumference}`,
+        "stroke-dashoffset": (0.25 - r.progress) * r.circumference,
+        "stroke-width": l.stroke,
+        r: r.radiusNormalized,
+        cx: r.radius,
+        cy: r.radius
+      }, null, 8, g)
+    ], 8, d))
+  ], 14, n)) : (e.openBlock(), e.createElementBlock("progress", {
+    key: 1,
+    class: e.normalizeClass(["progress-bar progress-bar--linear vue", { "progress-bar--error": t.error }]),
+    style: e.normalizeStyle({ "--progress-bar-height": r.height + "px" }),
+    value: t.value,
+    max: "100"
+  }, null, 14, m));
+}
+const _ = /* @__PURE__ */ o._export_sfc(a, [["render", f], ["__scopeId", "data-v-bfe47e7c"]]);
+exports.NcProgressBar = _;

package/dist/chunks/NcProgressBar-3p3Phbcw.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcProgressBar-3p3Phbcw.cjs","sources":["../../src/components/NcProgressBar/NcProgressBar.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @copyright Copyright (c) 2024 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n  - @author Raimund Schlüßler\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>\nThis is a simple progress bar component.\n## Usage:\n\n### Linear\n```vue\n<template>\n\t<span>\n\t\tSmall\n\t\t<NcProgressBar :value=\"20\" />\n\t\t<br>\n\t\tMedium\n\t\t<NcProgressBar :value=\"60\" size=\"medium\" />\n\t\t<br>\n\t\tMedium with color\n\t\t<NcProgressBar :value=\"55\" size=\"medium\" color=\"green\" />\n\t\t<br>\n\t\tError\n\t\t<NcProgressBar :value=\"80\" :error=\"true\" />\n\t</span>\n</template>\n```\n\n### Circular\n```vue\n<template>\n\t<span>\n\t\tDefault\n\t\t<NcProgressBar type=\"circular\" :value=\"55\" />\n\t\t<br />\n\t\tColor\n\t\t<NcProgressBar type=\"circular\" :value=\"70\" color=\"green\" />\n\t\t<br />\n\t\tError\n\t\t<NcProgressBar type=\"circular\" :value=\"60\" :error=\"true\" />\n\t</span>\n</template>\n```\n</docs>\n\n<template>\n\t<span v-if=\"type === 'circular'\"\n\t\trole=\"progressbar\"\n\t\t:aria-valuenow=\"value\"\n\t\t:style=\"{ '--progress-bar-height': height + 'px' }\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\tclass=\"progress-bar progress-bar--circular\">\n\t\t<svg :height=\"height\"\n\t\t\t:width=\"height\">\n\t\t\t<circle stroke=\"currentColor\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${progress * circumference} ${(1 - progress) * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"0.25*circumference\"\n\t\t\t\t:stroke-width=\"stroke\"\n\t\t\t\t:r=\"radiusNormalized\"\n\t\t\t\t:cx=\"radius\"\n\t\t\t\t:cy=\"radius\" />\n\t\t\t<circle stroke=\"var(--color-background-darker)\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${(1 - progress) * circumference} ${progress * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"(0.25 - progress) * circumference\"\n\t\t\t\t:stroke-width=\"stroke\"\n\t\t\t\t:r=\"radiusNormalized\"\n\t\t\t\t:cx=\"radius\"\n\t\t\t\t:cy=\"radius\" />\n\t\t</svg>\n\t</span>\n\t<progress v-else\n\t\tclass=\"progress-bar progress-bar--linear vue\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\t:style=\"{'--progress-bar-height': height + 'px' }\"\n\t\t:value=\"value\"\n\t\tmax=\"100\" />\n</template>\n\n<script>\nexport default {\n\n\tname: 'NcProgressBar',\n\n\tprops: {\n\t\t/**\n\t\t * An integer between 1 and 100\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t\tvalidator(value) {\n\t\t\t\treturn value >= 0\n\t\t\t\t\t&& value <= 100\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Determines the height of the progressbar.\n\t\t * Possible values:\n\t\t * - 'small' (default)\n\t\t * - 'medium'\n\t\t * - Number\n\t\t * @type {'small'|'medium'|number}\n\t\t */\n\t\tsize: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: 'small',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['small', 'medium'].includes(value) || typeof value === 'number'\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Applies an error color to the progressbar if true.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * ProgressBar type\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'linear',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['linear', 'circular'].includes(value)\n\t\t\t},\n\t\t},\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tstroke: 4,\n\t\t}\n\t},\n\tcomputed: {\n\t\theight() {\n\t\t\tif (this.type === 'circular') {\n\t\t\t\tif (Number.isInteger(this.size)) {\n\t\t\t\t\treturn this.size\n\t\t\t\t}\n\t\t\t\treturn 44\n\t\t\t}\n\t\t\tif (this.size === 'small') {\n\t\t\t\treturn 4\n\t\t\t} else if (this.size === 'medium') {\n\t\t\t\treturn 6\n\t\t\t}\n\t\t\treturn this.size\n\t\t},\n\t\tprogress() {\n\t\t\treturn this.value / 100\n\t\t},\n\t\tradius() {\n\t\t\treturn this.height / 2\n\t\t},\n\t\tradiusNormalized() {\n\t\t\treturn this.radius - 3 * this.stroke\n\t\t},\n\t\tcircumference() {\n\t\t\treturn this.radiusNormalized * 2 * Math.PI\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.progress-bar {\n\tdisplay: block;\n\theight: var(--progress-bar-height);\n\n\t--progress-bar-color: v-bind(color);\n\n\t&--linear {\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tbackground: var(--color-background-dark);\n\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\n\t\t// Browser specific rules\n\t\t&::-webkit-progress-bar {\n\t\t\theight: var(--progress-bar-height);\n\t\t\tbackground-color: transparent;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t}\n\t&--circular {\n\t\twidth: var(--progress-bar-height);\n\t\tcolor: var(--progress-bar-color, var(--color-primary-element));\n\t}\n\t&--error {\n\t\tcolor: var(--color-error) !important;\n\t\t// Override previous values\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--color-error) !important;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--color-error) !important;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","value","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","$props","vue","$options","$data"],"mappings":";mFAoGAA,IAAA;AAAA,EAEC,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,OAAA;AAAA;MAEC,SAAA;AAAA,MACA,UAAAC,GAAA;;;;;;;;;;;;;MAcA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAAA,GAAA;AACC,eAAA,CAAA,SAAA,QAAA,EAAA,SAAAA,CAAA,KAAA,OAAAA,KAAA;AAAA;;;;;IAMF,OAAA;AAAA;;;;;;;;MASC,SAAA;AAAA,MACA,UAAAA,GAAA;AACC,eAAA,CAAA,UAAA,UAAA,EAAA,SAAAA,CAAA;AAAA;;IAGF,OAAA;AAAA;;;;EAKD,OAAA;AACC,WAAA;AAAA,MACC,QAAA;AAAA,IACD;AAAA;EAED,UAAA;AAAA,IACC,SAAA;wCAEE,OAAA,UAAA,KAAA,IAAA,IACC,KAAA,OAED,6BAGA,6BAEA,IAED,KAAA;AAAA;;AAGA,aAAA,KAAA,QAAA;AAAA;IAED,SAAA;AACC,aAAA,KAAA,SAAA;AAAA;IAED,mBAAA;AACC,aAAA,KAAA,SAAA,IAAA,KAAA;AAAA;IAED,gBAAA;AACC,aAAA,KAAA,mBAAA,IAAA,KAAA;AAAA;;AAGH;;;;;;AA1LA,MAAAC,IAAA,CAAA,eAAA,GAAAC,IAAA,CAAA,UAAA,OAAA,GAAAC,IAAA,CAAA,oBAAA,qBAAA,gBAAA,KAAA,MAAA,IAAA,GAAAC,IAAA,CAAA,oBAAA,qBAAA,gBAAA,KAAA,MAAA,IAAA,GAAAC,IAAA,CAAA,OAAA;;;;IAkEE,MAAA;AAAA,IACC,iBAAAC,EAAA;AAAA;IAEA,OAAAC,EAAA,eAAA,CAAA,EAAA,uBAAAD,EAAA,MAAA,GAAA,qCAAA,CAAA;AAAA;;MAEK,QAAAE,EAAA;AAAA,MACJ,OAAAA,EAAA;AAAA;;QACO,QAAA;AAAA,QACP,MAAA;AAAA,QACC,oBAAA,GAAAA,EAAA,WAAAA,EAAA,aAAA,KAAA,IAAAA,EAAA,YAAAA,EAAA,aAAA;AAAA,QACA,qBAAA,OAAAA,EAAA;AAAA,QACA,gBAAAC,EAAA;AAAA,QACA,GAAAD,EAAA;AAAA,QACA,IAAAA,EAAA;AAAA,QACA,IAAAA,EAAA;AAAA,MAhFL,GAAA,MAAA,GAAAL,CAAA;AAAA;QAiFW,QAAA;AAAA,QACP,MAAA;AAAA,QACC,oBAAA,IAAA,IAAAK,EAAA,YAAAA,EAAA,aAAA,IAAAA,EAAA,WAAAA,EAAA,aAAA;AAAA;QAEA,gBAAAC,EAAA;AAAA,QACA,GAAAD,EAAA;AAAA,QACA,IAAAA,EAAA;AAAA,QACA,IAAAA,EAAA;AAAA,MAxFL,GAAA,MAAA,GAAAJ,CAAA;AAAA,IAAA,GAAA,GAAAF,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;IA4FE,OAAAM,EAAA,eAAA,CAAA,yCAAA,EAAA,uBAAAD,EAAA,MAAA,CAAA,CAAA;AAAA;IAGC,OAAAA,EAAA;AAAA,IACD,KAAA;AAAA,EAhGF,GAAA,MAAA,IAAAD,CAAA;;;;"}

package/dist/chunks/NcProgressBar-KvtCwl-0.mjs

@@ -0,0 +1,127 @@
+import "../assets/NcProgressBar-w4-G5gQR.css";
+import { openBlock as t, createElementBlock as a, normalizeStyle as l, normalizeClass as d, createElementVNode as o, useCssVars as f } from "vue";
+import { _ as m } from "./_plugin-vue_export-helper-hUChTQA_.mjs";
+const c = {
+  name: "NcProgressBar",
+  props: {
+    /**
+     * An integer between 1 and 100
+     */
+    value: {
+      type: Number,
+      default: 0,
+      validator(e) {
+        return e >= 0 && e <= 100;
+      }
+    },
+    /**
+     * Determines the height of the progressbar.
+     * Possible values:
+     * - 'small' (default)
+     * - 'medium'
+     * - Number
+     * @type {'small'|'medium'|number}
+     */
+    size: {
+      type: [String, Number],
+      default: "small",
+      validator(e) {
+        return ["small", "medium"].includes(e) || typeof e == "number";
+      }
+    },
+    /**
+     * Applies an error color to the progressbar if true.
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * ProgressBar type
+     */
+    type: {
+      type: String,
+      default: "linear",
+      validator(e) {
+        return ["linear", "circular"].includes(e);
+      }
+    },
+    color: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      stroke: 4
+    };
+  },
+  computed: {
+    height() {
+      return this.type === "circular" ? Number.isInteger(this.size) ? this.size : 44 : this.size === "small" ? 4 : this.size === "medium" ? 6 : this.size;
+    },
+    progress() {
+      return this.value / 100;
+    },
+    radius() {
+      return this.height / 2;
+    },
+    radiusNormalized() {
+      return this.radius - 3 * this.stroke;
+    },
+    circumference() {
+      return this.radiusNormalized * 2 * Math.PI;
+    }
+  }
+}, h = () => {
+  f((e) => ({
+    "0f3d9b00": e.color
+  }));
+}, n = c.setup;
+c.setup = n ? (e, i) => (h(), n(e, i)) : h;
+const g = ["aria-valuenow"], _ = ["height", "width"], k = ["stroke-dasharray", "stroke-dashoffset", "stroke-width", "r", "cx", "cy"], y = ["stroke-dasharray", "stroke-dashoffset", "stroke-width", "r", "cx", "cy"], b = ["value"];
+function p(e, i, s, v, u, r) {
+  return s.type === "circular" ? (t(), a("span", {
+    key: 0,
+    role: "progressbar",
+    "aria-valuenow": s.value,
+    style: l({ "--progress-bar-height": r.height + "px" }),
+    class: d([{ "progress-bar--error": s.error }, "progress-bar progress-bar--circular"])
+  }, [
+    (t(), a("svg", {
+      height: r.height,
+      width: r.height
+    }, [
+      o("circle", {
+        stroke: "currentColor",
+        fill: "transparent",
+        "stroke-dasharray": `${r.progress * r.circumference} ${(1 - r.progress) * r.circumference}`,
+        "stroke-dashoffset": 0.25 * r.circumference,
+        "stroke-width": u.stroke,
+        r: r.radiusNormalized,
+        cx: r.radius,
+        cy: r.radius
+      }, null, 8, k),
+      o("circle", {
+        stroke: "var(--color-background-darker)",
+        fill: "transparent",
+        "stroke-dasharray": `${(1 - r.progress) * r.circumference} ${r.progress * r.circumference}`,
+        "stroke-dashoffset": (0.25 - r.progress) * r.circumference,
+        "stroke-width": u.stroke,
+        r: r.radiusNormalized,
+        cx: r.radius,
+        cy: r.radius
+      }, null, 8, y)
+    ], 8, _))
+  ], 14, g)) : (t(), a("progress", {
+    key: 1,
+    class: d(["progress-bar progress-bar--linear vue", { "progress-bar--error": s.error }]),
+    style: l({ "--progress-bar-height": r.height + "px" }),
+    value: s.value,
+    max: "100"
+  }, null, 14, b));
+}
+const w = /* @__PURE__ */ m(c, [["render", p], ["__scopeId", "data-v-bfe47e7c"]]);
+export {
+  w as N
+};

package/dist/chunks/NcProgressBar-KvtCwl-0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcProgressBar-KvtCwl-0.mjs","sources":["../../src/components/NcProgressBar/NcProgressBar.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @copyright Copyright (c) 2024 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n  - @author Raimund Schlüßler\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>\nThis is a simple progress bar component.\n## Usage:\n\n### Linear\n```vue\n<template>\n\t<span>\n\t\tSmall\n\t\t<NcProgressBar :value=\"20\" />\n\t\t<br>\n\t\tMedium\n\t\t<NcProgressBar :value=\"60\" size=\"medium\" />\n\t\t<br>\n\t\tMedium with color\n\t\t<NcProgressBar :value=\"55\" size=\"medium\" color=\"green\" />\n\t\t<br>\n\t\tError\n\t\t<NcProgressBar :value=\"80\" :error=\"true\" />\n\t</span>\n</template>\n```\n\n### Circular\n```vue\n<template>\n\t<span>\n\t\tDefault\n\t\t<NcProgressBar type=\"circular\" :value=\"55\" />\n\t\t<br />\n\t\tColor\n\t\t<NcProgressBar type=\"circular\" :value=\"70\" color=\"green\" />\n\t\t<br />\n\t\tError\n\t\t<NcProgressBar type=\"circular\" :value=\"60\" :error=\"true\" />\n\t</span>\n</template>\n```\n</docs>\n\n<template>\n\t<span v-if=\"type === 'circular'\"\n\t\trole=\"progressbar\"\n\t\t:aria-valuenow=\"value\"\n\t\t:style=\"{ '--progress-bar-height': height + 'px' }\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\tclass=\"progress-bar progress-bar--circular\">\n\t\t<svg :height=\"height\"\n\t\t\t:width=\"height\">\n\t\t\t<circle stroke=\"currentColor\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${progress * circumference} ${(1 - progress) * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"0.25*circumference\"\n\t\t\t\t:stroke-width=\"stroke\"\n\t\t\t\t:r=\"radiusNormalized\"\n\t\t\t\t:cx=\"radius\"\n\t\t\t\t:cy=\"radius\" />\n\t\t\t<circle stroke=\"var(--color-background-darker)\"\n\t\t\t\tfill=\"transparent\"\n\t\t\t\t:stroke-dasharray=\"`${(1 - progress) * circumference} ${progress * circumference}`\"\n\t\t\t\t:stroke-dashoffset=\"(0.25 - progress) * circumference\"\n\t\t\t\t:stroke-width=\"stroke\"\n\t\t\t\t:r=\"radiusNormalized\"\n\t\t\t\t:cx=\"radius\"\n\t\t\t\t:cy=\"radius\" />\n\t\t</svg>\n\t</span>\n\t<progress v-else\n\t\tclass=\"progress-bar progress-bar--linear vue\"\n\t\t:class=\"{ 'progress-bar--error': error }\"\n\t\t:style=\"{'--progress-bar-height': height + 'px' }\"\n\t\t:value=\"value\"\n\t\tmax=\"100\" />\n</template>\n\n<script>\nexport default {\n\n\tname: 'NcProgressBar',\n\n\tprops: {\n\t\t/**\n\t\t * An integer between 1 and 100\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t\tvalidator(value) {\n\t\t\t\treturn value >= 0\n\t\t\t\t\t&& value <= 100\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Determines the height of the progressbar.\n\t\t * Possible values:\n\t\t * - 'small' (default)\n\t\t * - 'medium'\n\t\t * - Number\n\t\t * @type {'small'|'medium'|number}\n\t\t */\n\t\tsize: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: 'small',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['small', 'medium'].includes(value) || typeof value === 'number'\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Applies an error color to the progressbar if true.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * ProgressBar type\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'linear',\n\t\t\tvalidator(value) {\n\t\t\t\treturn ['linear', 'circular'].includes(value)\n\t\t\t},\n\t\t},\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tstroke: 4,\n\t\t}\n\t},\n\tcomputed: {\n\t\theight() {\n\t\t\tif (this.type === 'circular') {\n\t\t\t\tif (Number.isInteger(this.size)) {\n\t\t\t\t\treturn this.size\n\t\t\t\t}\n\t\t\t\treturn 44\n\t\t\t}\n\t\t\tif (this.size === 'small') {\n\t\t\t\treturn 4\n\t\t\t} else if (this.size === 'medium') {\n\t\t\t\treturn 6\n\t\t\t}\n\t\t\treturn this.size\n\t\t},\n\t\tprogress() {\n\t\t\treturn this.value / 100\n\t\t},\n\t\tradius() {\n\t\t\treturn this.height / 2\n\t\t},\n\t\tradiusNormalized() {\n\t\t\treturn this.radius - 3 * this.stroke\n\t\t},\n\t\tcircumference() {\n\t\t\treturn this.radiusNormalized * 2 * Math.PI\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.progress-bar {\n\tdisplay: block;\n\theight: var(--progress-bar-height);\n\n\t--progress-bar-color: v-bind(color);\n\n\t&--linear {\n\t\twidth: 100%;\n\t\toverflow: hidden;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tbackground: var(--color-background-dark);\n\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\n\t\t// Browser specific rules\n\t\t&::-webkit-progress-bar {\n\t\t\theight: var(--progress-bar-height);\n\t\t\tbackground-color: transparent;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--progress-bar-color, var(--gradient-primary-background));\n\t\t\tborder-radius: calc(var(--progress-bar-height) / 2);\n\t\t}\n\t}\n\t&--circular {\n\t\twidth: var(--progress-bar-height);\n\t\tcolor: var(--progress-bar-color, var(--color-primary-element));\n\t}\n\t&--error {\n\t\tcolor: var(--color-error) !important;\n\t\t// Override previous values\n\t\t&::-moz-progress-bar {\n\t\t\tbackground: var(--color-error) !important;\n\t\t}\n\t\t&::-webkit-progress-value {\n\t\t\tbackground: var(--color-error) !important;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_sfc_main","value","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","$props","normalizeClass","$options","$data"],"mappings":";;;AAoGA,MAAAA,IAAA;AAAA,EAEC,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,OAAA;AAAA;MAEC,SAAA;AAAA,MACA,UAAAC,GAAA;;;;;;;;;;;;;MAcA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAAA,GAAA;AACC,eAAA,CAAA,SAAA,QAAA,EAAA,SAAAA,CAAA,KAAA,OAAAA,KAAA;AAAA;;;;;IAMF,OAAA;AAAA;;;;;;;;MASC,SAAA;AAAA,MACA,UAAAA,GAAA;AACC,eAAA,CAAA,UAAA,UAAA,EAAA,SAAAA,CAAA;AAAA;;IAGF,OAAA;AAAA;;;;EAKD,OAAA;AACC,WAAA;AAAA,MACC,QAAA;AAAA,IACD;AAAA;EAED,UAAA;AAAA,IACC,SAAA;wCAEE,OAAA,UAAA,KAAA,IAAA,IACC,KAAA,OAED,6BAGA,6BAEA,IAED,KAAA;AAAA;;AAGA,aAAA,KAAA,QAAA;AAAA;IAED,SAAA;AACC,aAAA,KAAA,SAAA;AAAA;IAED,mBAAA;AACC,aAAA,KAAA,SAAA,IAAA,KAAA;AAAA;IAED,gBAAA;AACC,aAAA,KAAA,mBAAA,IAAA,KAAA;AAAA;;AAGH;;;;;;AA1LA,MAAAC,IAAA,CAAA,eAAA,GAAAC,IAAA,CAAA,UAAA,OAAA,GAAAC,IAAA,CAAA,oBAAA,qBAAA,gBAAA,KAAA,MAAA,IAAA,GAAAC,IAAA,CAAA,oBAAA,qBAAA,gBAAA,KAAA,MAAA,IAAA,GAAAC,IAAA,CAAA,OAAA;;;;IAkEE,MAAA;AAAA,IACC,iBAAAC,EAAA;AAAA;IAEA,OAAAC,EAAA,CAAA,EAAA,uBAAAD,EAAA,MAAA,GAAA,qCAAA,CAAA;AAAA;;MAEK,QAAAE,EAAA;AAAA,MACJ,OAAAA,EAAA;AAAA;;QACO,QAAA;AAAA,QACP,MAAA;AAAA,QACC,oBAAA,GAAAA,EAAA,WAAAA,EAAA,aAAA,KAAA,IAAAA,EAAA,YAAAA,EAAA,aAAA;AAAA,QACA,qBAAA,OAAAA,EAAA;AAAA,QACA,gBAAAC,EAAA;AAAA,QACA,GAAAD,EAAA;AAAA,QACA,IAAAA,EAAA;AAAA,QACA,IAAAA,EAAA;AAAA,MAhFL,GAAA,MAAA,GAAAL,CAAA;AAAA;QAiFW,QAAA;AAAA,QACP,MAAA;AAAA,QACC,oBAAA,IAAA,IAAAK,EAAA,YAAAA,EAAA,aAAA,IAAAA,EAAA,WAAAA,EAAA,aAAA;AAAA;QAEA,gBAAAC,EAAA;AAAA,QACA,GAAAD,EAAA;AAAA,QACA,IAAAA,EAAA;AAAA,QACA,IAAAA,EAAA;AAAA,MAxFL,GAAA,MAAA,GAAAJ,CAAA;AAAA,IAAA,GAAA,GAAAF,CAAA;AAAA,EAAA,GAAA,IAAAD,CAAA;;IA4FE,OAAAM,EAAA,CAAA,yCAAA,EAAA,uBAAAD,EAAA,MAAA,CAAA,CAAA;AAAA;IAGC,OAAAA,EAAA;AAAA,IACD,KAAA;AAAA,EAhGF,GAAA,MAAA,IAAAD,CAAA;;;"}