@nextcloud/vue 8.0.0-beta.8 → 8.0.0-beta.9

package/dist/Components/NcTextArea.mjs

@@ -0,0 +1,172 @@
+import "../assets/index-236620b0.css";
+import { G as s } from "../chunks/GenRandomId-cb9ccebe.mjs";
+import r from "vue-material-design-icons/AlertCircleOutline.vue";
+import l from "vue-material-design-icons/Check.vue";
+import { n as i } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
+const n = {
+  name: "NcTextArea",
+  components: {
+    AlertCircle: r,
+    Check: l
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * The value of the input field
+     */
+    value: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The input label, always provide one for accessibility purposes.
+     * This will also be used as a placeholder unless the placeholder
+     * prop is populated with a different string.
+     */
+    label: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Pass in true if you want to use an external label. This is useful
+     * if you need a label that looks different from the one provided by
+     * this component
+     */
+    labelOutside: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * The placeholder of the input. This defaults as the string that's
+     * passed into the label prop. In order to remove the placeholder,
+     * pass in an empty string.
+     */
+    placeholder: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Toggles the success state of the component. Adds a checkmark icon.
+     * this cannot be used together with canClear.
+     */
+    success: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Toggles the error state of the component. Adds an error icon.
+     * this cannot be used together with canClear.
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Additional helper text message
+     *
+     * This will be displayed beneath the input field. In case the field is
+     * also marked as having an error, the text will be displayed in red.
+     */
+    helperText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Disable the input field
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Class to add to the input field.
+     * Necessary to use NcInputField in the NcActionInput component.
+     */
+    inputClass: {
+      type: [Object, String],
+      default: ""
+    },
+    /**
+     * The resize CSS property sets whether an element is resizable, and if
+     * so, in which directions.
+     */
+    resize: {
+      type: String,
+      default: "both",
+      validator: (t) => ["both", "vertical", "horizontal", "none"].includes(t)
+    }
+  },
+  emits: [
+    "update:value"
+  ],
+  computed: {
+    computedId() {
+      return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
+    },
+    inputName() {
+      return "input" + s();
+    },
+    hasPlaceholder() {
+      return this.placeholder !== "" && this.placeholder !== void 0;
+    },
+    computedPlaceholder() {
+      return this.hasPlaceholder ? this.placeholder : this.label;
+    },
+    isValidLabel() {
+      const t = this.label || this.labelOutside;
+      return t || console.warn("You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation."), t;
+    },
+    ariaDescribedby() {
+      const t = [];
+      return this.helperText.length > 0 && t.push(`${this.inputName}-helper-text`), this.$attrs["aria-describedby"] && t.push(this.$attrs["aria-describedby"]), t.join(" ") || null;
+    }
+  },
+  methods: {
+    /**
+     * Focus the input element
+     *
+     * @public
+     */
+    focus() {
+      this.$refs.input.focus();
+    },
+    /**
+     * Select all the text in the input
+     *
+     * @public
+     */
+    select() {
+      this.$refs.input.select();
+    },
+    handleInput(t) {
+      this.$emit("update:value", t.target.value);
+    }
+  }
+};
+var d = function() {
+  var e = this, a = e._self._c;
+  return a("div", { staticClass: "textarea", class: { "textarea--disabled": e.disabled } }, [a("div", { staticClass: "textarea__main-wrapper" }, [a("textarea", e._g(e._b({ ref: "input", staticClass: "textarea__input", class: [
+    e.inputClass,
+    {
+      "textarea__input--label-outside": e.labelOutside,
+      "textarea__input--success": e.success,
+      "textarea__input--error": e.error
+    }
+  ], style: { resize: e.resize }, attrs: { id: e.computedId, type: e.type, disabled: e.disabled, placeholder: e.computedPlaceholder, "aria-describedby": e.ariaDescribedby, "aria-live": "polite" }, domProps: { value: e.value }, on: { input: e.handleInput } }, "textarea", e.$attrs, !1), e.$listeners)), e._v(" "), !e.labelOutside && e.isValidLabel ? a("label", { staticClass: "textarea__label", attrs: { for: e.computedId } }, [e._v(" " + e._s(e.label) + " ")]) : e._e()]), e.helperText.length > 0 ? a("p", { staticClass: "textarea__helper-text-message", class: {
+    "textarea__helper-text-message--error": e.error,
+    "textarea__helper-text-message--success": e.success
+  }, attrs: { id: `${e.inputName}-helper-text` } }, [e.success ? a("Check", { staticClass: "textarea__helper-text-message__icon", attrs: { size: 18 } }) : e.error ? a("AlertCircle", { staticClass: "textarea__helper-text-message__icon", attrs: { size: 18 } }) : e._e(), e._v(" " + e._s(e.helperText) + " ")], 1) : e._e()]);
+}, o = [], u = /* @__PURE__ */ i(
+  n,
+  d,
+  o,
+  !1,
+  null,
+  "7144de10",
+  null,
+  null
+);
+const f = u.exports;
+export {
+  f as default
+};

package/dist/Components/NcTextArea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcTextArea.mjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2023 Richard Steinmetz <richard@steinmetz.cloud>\n  -\n  - @author Richard Steinmetz <richard@steinmetz.cloud>\n  -\n  - @license AGPL-3.0-or-later\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU General Public License as published by\n  - the Free Software Foundation, either version 3 of the License, or\n  - (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 General Public License for more details.\n  -\n  - You should have received a copy of the GNU General Public License\n  - along with this program.  If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\n### Description\n\nThis component is a textarea field.\nIt extends and styles an HTMLTextAreaElement.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextArea label=\"Text area\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" >\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Success state\"\n\t\t\t:success=\"true\">\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\thelper-text=\"Helper texts will be styled accordingly.\"\n\t\t\t:error=\"true\">\n\t\t</NcTextArea>\n\t\t<NcTextArea label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextArea label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextArea id=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Text area with external label\" />\n\t\t</div>\n\t\t<NcTextArea label=\"Custom size and no resize\"\n\t\t\tresize=\"none\"\n\t\t\trows=\"5\" />\n\t\t</NcTextArea>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tgap: 14px;\n\n\t> label {\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div class=\"textarea\" :class=\"{ 'textarea--disabled': disabled }\">\n\t\t<div class=\"textarea__main-wrapper\">\n\t\t\t<textarea v-bind=\"$attrs\"\n\t\t\t\t:id=\"computedId\"\n\t\t\t\tref=\"input\"\n\t\t\t\tclass=\"textarea__input\"\n\t\t\t\t:type=\"type\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:placeholder=\"computedPlaceholder\"\n\t\t\t\t:aria-describedby=\"ariaDescribedby\"\n\t\t\t\taria-live=\"polite\"\n\t\t\t\t:class=\"[inputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'textarea__input--label-outside': labelOutside,\n\t\t\t\t\t\t'textarea__input--success': success,\n\t\t\t\t\t\t'textarea__input--error': error,\n\t\t\t\t\t}]\"\n\t\t\t\t:style=\"{ resize: resize }\"\n\t\t\t\t:value=\"value\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t@input=\"handleInput\" />\n\t\t\t<!-- Label -->\n\t\t\t<label v-if=\"!labelOutside && isValidLabel\"\n\t\t\t\tclass=\"textarea__label\"\n\t\t\t\t:for=\"computedId\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\t\t</div>\n\t\t<p v-if=\"helperText.length > 0\"\n\t\t\t:id=\"`${inputName}-helper-text`\"\n\t\t\tclass=\"textarea__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'textarea__helper-text-message--error': error,\n\t\t\t\t'textarea__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<Check v-if=\"success\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t<AlertCircle v-else-if=\"error\" class=\"textarea__helper-text-message__icon\" :size=\"18\" />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<script>\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport AlertCircle from 'vue-material-design-icons/AlertCircleOutline.vue'\nimport Check from 'vue-material-design-icons/Check.vue'\n\nexport default {\n\tname: 'NcTextArea',\n\n\tcomponents: {\n\t\tAlertCircle,\n\t\tCheck,\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * The value of the input field\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * The input label, always provide one for accessibility purposes.\n\t\t * This will also be used as a placeholder unless the placeholder\n\t\t * prop is populated with a different string.\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Pass in true if you want to use an external label. This is useful\n\t\t * if you need a label that looks different from the one provided by\n\t\t * this component\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The placeholder of the input. This defaults as the string that's\n\t\t * passed into the label prop. In order to remove the placeholder,\n\t\t * pass in an empty string.\n\t\t */\n\t\tplaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Toggles the success state of the component. Adds a checkmark icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\tsuccess: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Toggles the error state of the component. Adds an error icon.\n\t\t * this cannot be used together with canClear.\n\t\t */\n\t\terror: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Additional helper text message\n\t\t *\n\t\t * This will be displayed beneath the input field. In case the field is\n\t\t * also marked as having an error, the text will be displayed in red.\n\t\t */\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Disable the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Class to add to the input field.\n\t\t * Necessary to use NcInputField in the NcActionInput component.\n\t\t */\n\t\tinputClass: {\n\t\t\ttype: [Object, String],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * The resize CSS property sets whether an element is resizable, and if\n\t\t * so, in which directions.\n\t\t */\n\t\tresize: {\n\t\t\ttype: String,\n\t\t\tdefault: 'both',\n\t\t\tvalidator: (value) => ['both', 'vertical', 'horizontal', 'none'].includes(value),\n\t\t}\n\t},\n\n\temits: [\n\t\t'update:value',\n\t],\n\n\tcomputed: {\n\t\tcomputedId() {\n\t\t\treturn this.$attrs.id && this.$attrs.id !== '' ? this.$attrs.id : this.inputName\n\t\t},\n\n\t\tinputName() {\n\t\t\treturn 'input' + GenRandomId()\n\t\t},\n\n\t\thasPlaceholder() {\n\t\t\treturn this.placeholder !== '' && this.placeholder !== undefined\n\t\t},\n\n\t\tcomputedPlaceholder() {\n\t\t\treturn this.hasPlaceholder ? this.placeholder : this.label\n\t\t},\n\n\t\tisValidLabel() {\n\t\t\tconst isValidLabel = this.label || this.labelOutside\n\t\t\tif (!isValidLabel) {\n\t\t\t\tconsole.warn('You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t\t\t}\n\t\t\treturn isValidLabel\n\t\t},\n\n\t\tariaDescribedby() {\n\t\t\tconst ariaDescribedby = []\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\tariaDescribedby.push(`${this.inputName}-helper-text`)\n\t\t\t}\n\t\t\tif (this.$attrs['aria-describedby']) {\n\t\t\t\tariaDescribedby.push(this.$attrs['aria-describedby'])\n\t\t\t}\n\t\t\treturn ariaDescribedby.join(' ') || null\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.input.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n\n.textarea {\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-large);\n\tmargin-block-start: 6px; // for the label in active state\n\tresize: vertical;\n\n\t&__main-wrapper {\n\t\tposition: relative;\n\t}\n\n\t&--disabled {\n\t\topacity: 0.7;\n\t\tfilter: saturate(0.7);\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-inline: 10px 6px; // align with label 8px margin label + 4px padding label - 2px border input\n\t\twidth: 100%;\n\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\tborder-radius: var(--border-radius-large);\n\n\t\tcursor: pointer;\n\n\t\t&:active:not([disabled]),\n\t\t&:hover:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--success {\n\t\t\tborder-color: var(--color-success) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\n\t\t\t// Align label text color with border color (on hover / focus)\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-success-text);\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\tborder-color: var(--color-error) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\n\t\t\t// Align label text color with border color (on hover / focus)\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-error-text);\n\t\t\t}\n\t\t}\n\n\t\t// Align label text color with border color (on hover / focus)\n\t\t&:not(&--success, &--error) {\n\t\t\t&:focus + .textarea__label,\n\t\t\t&:hover:not(:placeholder-shown) + .textarea__label {\n\t\t\t\tcolor: var(--color-primary-element);\n\t\t\t}\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\t// fix height and line height to center label\n\t\theight: 17px;\n\t\tmax-width: fit-content;\n\t\tline-height: 1;\n\t\tinset-block-start: 12px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\tinset-block-start: -6px;\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tbackground-color: var(--color-main-background);\n\t\theight: 14px;\n\t\tpadding-inline: 4px;\n\t\tmargin-inline-start: 8px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_sfc_main","AlertCircle","Check","value","GenRandomId","isValidLabel","ariaDescribedby","event"],"mappings":";;;;;AAoIA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,CAAA,QAAA,YAAA,cAAA,MAAA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,OAAA,MAAA,KAAA,OAAA,OAAA,KAAA,KAAA,OAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAA,UAAAC,EAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,gBAAA,MAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,iBAAA,KAAA,cAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAAC,IAAA,KAAA,SAAA,KAAA;AACA,aAAAA,KACA,QAAA,KAAA,mJAAA,GAEAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,YAAAC,IAAA,CAAA;AACA,aAAA,KAAA,WAAA,SAAA,KACAA,EAAA,KAAA,GAAA,KAAA,SAAA,cAAA,GAEA,KAAA,OAAA,kBAAA,KACAA,EAAA,KAAA,KAAA,OAAA,kBAAA,CAAA,GAEAA,EAAA,KAAA,GAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,MAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,MAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAAC,GAAA;AACA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcTextField.cjs

@@ -1,8 +1,8 @@
 "use strict";
-const l = require("./NcInputField.cjs"), o = require("vue-material-design-icons/Close.vue"), s = require("vue-material-design-icons/ArrowRight.vue"), i = require("vue-material-design-icons/UndoVariant.vue"), u = require("../chunks/l10n-903083c4.cjs"), a = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), r = (e) => e && e.__esModule ? e : { default: e }, c = /* @__PURE__ */ r(o), d = /* @__PURE__ */ r(s), p = /* @__PURE__ */ r(i), _ = {
+const r = require("./NcInputField.cjs"), s = require("vue-material-design-icons/Close.vue"), i = require("vue-material-design-icons/ArrowRight.vue"), l = require("vue-material-design-icons/UndoVariant.vue"), u = require("../chunks/l10n-b1d264c7.cjs"), a = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), o = (e) => e && e.__esModule ? e : { default: e }, c = /* @__PURE__ */ o(s), d = /* @__PURE__ */ o(i), p = /* @__PURE__ */ o(l), _ = new Set(Object.keys(r.props)), f = {
   name: "NcTextField",
   components: {
-    NcInputField: l,
+    NcInputField: r,
     Close: c.default,
     ArrowRight: d.default,
     Undo: p.default
@@ -10,10 +10,27 @@ const l = require("./NcInputField.cjs"), o = require("vue-material-design-icons/
   // Allow forwarding all attributes
   inheritAttrs: !1,
   props: {
-    ...l.props,
+    /**
+     * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
+     */
+    // Not an actual prop but needed to show in vue-styleguidist docs
+    // eslint-disable-next-line
+    " ": {},
+    // Reuse all the props from NcInputField for better typing and documentation
+    ...r.props,
+    // Redefined props
+    /**
+     * Label of the trailing button
+     */
+    trailingButtonLabel: {
+      type: String,
+      default: u.t("Clear text")
+    },
+    // Custom props
     /**
      * Specifies which material design icon should be used for the trailing
-     * button. Value can be `close`, `arrowRight`, or `undo`.
+     * button.
+     * @type {'close'|'arrowRight'|'undo'}
      */
     trailingButtonIcon: {
       type: String,
@@ -29,8 +46,15 @@ const l = require("./NcInputField.cjs"), o = require("vue-material-design-icons/
     "update:value"
   ],
   computed: {
-    clearTextLabel() {
-      return this.trailingButtonLabel || u.t("Clear text");
+    propsAndAttrsToForward() {
+      return {
+        // Proxy all the HTML attributes
+        ...this.$attrs,
+        // Proxy original NcInputField's props
+        ...Object.fromEntries(
+          Object.entries(this.$props).filter(([e]) => _.has(e))
+        )
+      };
     }
   },
   methods: {
@@ -55,14 +79,14 @@ const l = require("./NcInputField.cjs"), o = require("vue-material-design-icons/
     }
   }
 };
-var f = function() {
+var h = function() {
   var t = this, n = t._self._c;
-  return n("NcInputField", t._g(t._b({ ref: "inputField", attrs: { "trailing-button-label": t.clearTextLabel }, on: { input: t.handleInput }, scopedSlots: t._u([t.type !== "search" ? { key: "trailing-button-icon", fn: function() {
+  return n("NcInputField", t._g(t._b({ ref: "inputField", on: { input: t.handleInput }, scopedSlots: t._u([t.type !== "search" ? { key: "trailing-button-icon", fn: function() {
     return [t.trailingButtonIcon === "close" ? n("Close", { attrs: { size: 20 } }) : t.trailingButtonIcon === "arrowRight" ? n("ArrowRight", { attrs: { size: 20 } }) : t.trailingButtonIcon === "undo" ? n("Undo", { attrs: { size: 20 } }) : t._e()];
-  }, proxy: !0 } : null], null, !0) }, "NcInputField", { ...t.$attrs, ...t.$props }, !1), t.$listeners), [t._t("default")], 2);
-}, g = [], h = /* @__PURE__ */ a.normalizeComponent(
-  _,
+  }, proxy: !0 } : null], null, !0) }, "NcInputField", t.propsAndAttrsToForward, !1), t.$listeners), [t._t("default")], 2);
+}, g = [], m = /* @__PURE__ */ a.normalizeComponent(
   f,
+  h,
   g,
   !1,
   null,
@@ -70,5 +94,5 @@ var f = function() {
   null,
   null
 );
-const m = h.exports;
-module.exports = m;
+const F = m.exports;
+module.exports = F;

package/dist/Components/NcTextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcTextField.cjs","sources":["../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\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### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose text field component.\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nNote: the inner html `input` element inherits all the attributes from the\nNcTextField component so you can add things like `autocomplete`, `maxlength`\nand `minlength`.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextField :value.sync=\"text1\"\n\t\t\tlabel=\"Leading icon and clear trailing button\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text1 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<Magnify :size=\"20\" />\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text4\"\n\t\t\tlabel=\"Internal label\"\n\t\t\tplaceholder=\"That can be used together with placeholder\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text4 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<Lock :size=\"20\" />\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text2\"\n\t\t\tlabel=\"Success state\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\t:success=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text3\"\n\t\t\tlabel=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\t:error=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextField label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextField :value.sync=\"text5\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Input with external label\"\n\t\t\t\t@trailing-button-click=\"clearText\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Lock from 'vue-material-design-icons/Lock'\nimport Close from 'vue-material-design-icons/Close'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: '',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tMagnify,\n\t\tLock,\n\t\tClose,\n\t},\n\n\tmethods: {\n\t\tclearText() {\n\t\t\tthis.text1 = ''\n\t\t\tthis.text3 = ''\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"{...$attrs, ...$props }\"\n\t\tref=\"inputField\"\n\t\t:trailing-button-label=\"clearTextLabel\"\n\t\tv-on=\"$listeners\"\n\t\t@input=\"handleInput\">\n\t\t<!-- Default slot for the leading icon -->\n\t\t<slot />\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\n\t\t<template v-if=\"type !== 'search'\" #trailing-button-icon>\n\t\t\t<Close v-if=\"trailingButtonIcon === 'close'\" :size=\"20\" />\n\t\t\t<ArrowRight v-else-if=\"trailingButtonIcon === 'arrowRight'\" :size=\"20\" />\n\t\t\t<Undo v-else-if=\"trailingButtonIcon === 'undo'\" :size=\"20\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\nimport Close from 'vue-material-design-icons/Close.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Undo from 'vue-material-design-icons/UndoVariant.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcTextField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tClose,\n\t\tArrowRight,\n\t\tUndo,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t...NcInputField.props,\n\n\t\t/**\n\t\t * Specifies which material design icon should be used for the trailing\n\t\t * button. Value can be `close`, `arrowRight`, or `undo`.\n\t\t */\n\t\ttrailingButtonIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'close',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'close',\n\t\t\t\t'arrowRight',\n\t\t\t\t'undo',\n\t\t\t].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t],\n\n\tcomputed: {\n\t\tclearTextLabel() {\n\t\t\treturn this.trailingButtonLabel || t('Clear text')\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t},\n}\n</script>\n"],"names":["_sfc_main","NcInputField","Close","ArrowRight","Undo","value","t","event"],"mappings":";4bA+JAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAC;AAAAA,IACA,OAAAC,EAAA;AAAA,IACA,YAAAC,EAAA;AAAA,IACA,MAAAC,EAAA;AAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,GAAAH,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAI,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,uBAAAC,EAAA,EAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,WAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,WAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAAC,GAAA;AACA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcTextField.cjs","sources":["../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\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### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose text field component.\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nNote: the inner html `input` element inherits all the attributes from the\nNcTextField component so you can add things like `autocomplete`, `maxlength`\nand `minlength`.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextField :value.sync=\"text1\"\n\t\t\tlabel=\"Leading icon and clear trailing button\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text1 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<Magnify :size=\"20\" />\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text4\"\n\t\t\tlabel=\"Internal label\"\n\t\t\tplaceholder=\"That can be used together with placeholder\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text4 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<Lock :size=\"20\" />\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text2\"\n\t\t\tlabel=\"Success state\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\t:success=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text3\"\n\t\t\tlabel=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\t:error=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextField label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextField :value.sync=\"text5\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Input with external label\"\n\t\t\t\t@trailing-button-click=\"clearText\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Lock from 'vue-material-design-icons/Lock'\nimport Close from 'vue-material-design-icons/Close'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: '',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tMagnify,\n\t\tLock,\n\t\tClose,\n\t},\n\n\tmethods: {\n\t\tclearText() {\n\t\t\tthis.text1 = ''\n\t\t\tthis.text3 = ''\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"propsAndAttrsToForward\"\n\t\tref=\"inputField\"\n\t\tv-on=\"$listeners\"\n\t\t@input=\"handleInput\">\n\t\t<!-- Default slot for the leading icon -->\n\t\t<slot />\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\n\t\t<template v-if=\"type !== 'search'\" #trailing-button-icon>\n\t\t\t<Close v-if=\"trailingButtonIcon === 'close'\" :size=\"20\" />\n\t\t\t<ArrowRight v-else-if=\"trailingButtonIcon === 'arrowRight'\" :size=\"20\" />\n\t\t\t<Undo v-else-if=\"trailingButtonIcon === 'undo'\" :size=\"20\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\nimport Close from 'vue-material-design-icons/Close.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Undo from 'vue-material-design-icons/UndoVariant.vue'\n\nimport { t } from '../../l10n.js'\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcTextField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tClose,\n\t\tArrowRight,\n\t\tUndo,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\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\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t// Redefined props\n\n\t\t/**\n\t\t * Label of the trailing button\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Clear text'),\n\t\t},\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Specifies which material design icon should be used for the trailing\n\t\t * button.\n\t\t * @type {'close'|'arrowRight'|'undo'}\n\t\t */\n\t\ttrailingButtonIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'close',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'close',\n\t\t\t\t'arrowRight',\n\t\t\t\t'undo',\n\t\t\t].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t],\n\n\tcomputed: {\n\t\tpropsAndAttrsToForward() {\n\t\t\treturn {\n\t\t\t\t// Proxy all the HTML attributes\n\t\t\t\t...this.$attrs,\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t},\n}\n</script>\n"],"names":["NcInputFieldProps","NcInputField","_sfc_main","Close","ArrowRight","Undo","t","value","key","event"],"mappings":";4bA8JAA,IAAA,IAAA,IAAA,OAAA,KAAAC,EAAA,KAAA,CAAA,GAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAD;AAAAA,IACA,OAAAE,EAAA;AAAA,IACA,YAAAC,EAAA;AAAA,IACA,MAAAC,EAAA;AAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA,CAAA;AAAA;AAAA,IAGA,GAAAJ,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAK,EAAA,EAAA,YAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,yBAAA;AACA,aAAA;AAAA;AAAA,QAEA,GAAA,KAAA;AAAA;AAAA,QAEA,GAAA,OAAA;AAAA,UACA,OAAA,QAAA,KAAA,MAAA,EAAA,OAAA,CAAA,CAAAC,CAAA,MAAAR,EAAA,IAAAQ,CAAA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,WAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,WAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAAC,GAAA;AACA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcTextField.mjs

@@ -1,24 +1,41 @@
-import r from "./NcInputField.mjs";
+import n from "./NcInputField.mjs";
 import o from "vue-material-design-icons/Close.vue";
-import l from "vue-material-design-icons/ArrowRight.vue";
-import i from "vue-material-design-icons/UndoVariant.vue";
-import { t as s } from "../chunks/l10n-27a75c40.mjs";
+import i from "vue-material-design-icons/ArrowRight.vue";
+import s from "vue-material-design-icons/UndoVariant.vue";
+import { t as l } from "../chunks/l10n-05a09c66.mjs";
 import { n as a } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-const u = {
+const u = new Set(Object.keys(n.props)), p = {
   name: "NcTextField",
   components: {
-    NcInputField: r,
+    NcInputField: n,
     Close: o,
-    ArrowRight: l,
-    Undo: i
+    ArrowRight: i,
+    Undo: s
   },
   // Allow forwarding all attributes
   inheritAttrs: !1,
   props: {
-    ...r.props,
+    /**
+     * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props
+     */
+    // Not an actual prop but needed to show in vue-styleguidist docs
+    // eslint-disable-next-line
+    " ": {},
+    // Reuse all the props from NcInputField for better typing and documentation
+    ...n.props,
+    // Redefined props
+    /**
+     * Label of the trailing button
+     */
+    trailingButtonLabel: {
+      type: String,
+      default: l("Clear text")
+    },
+    // Custom props
     /**
      * Specifies which material design icon should be used for the trailing
-     * button. Value can be `close`, `arrowRight`, or `undo`.
+     * button.
+     * @type {'close'|'arrowRight'|'undo'}
      */
     trailingButtonIcon: {
       type: String,
@@ -34,8 +51,15 @@ const u = {
     "update:value"
   ],
   computed: {
-    clearTextLabel() {
-      return this.trailingButtonLabel || s("Clear text");
+    propsAndAttrsToForward() {
+      return {
+        // Proxy all the HTML attributes
+        ...this.$attrs,
+        // Proxy original NcInputField's props
+        ...Object.fromEntries(
+          Object.entries(this.$props).filter(([e]) => u.has(e))
+        )
+      };
     }
   },
   methods: {
@@ -61,21 +85,21 @@ const u = {
   }
 };
 var c = function() {
-  var t = this, n = t._self._c;
-  return n("NcInputField", t._g(t._b({ ref: "inputField", attrs: { "trailing-button-label": t.clearTextLabel }, on: { input: t.handleInput }, scopedSlots: t._u([t.type !== "search" ? { key: "trailing-button-icon", fn: function() {
-    return [t.trailingButtonIcon === "close" ? n("Close", { attrs: { size: 20 } }) : t.trailingButtonIcon === "arrowRight" ? n("ArrowRight", { attrs: { size: 20 } }) : t.trailingButtonIcon === "undo" ? n("Undo", { attrs: { size: 20 } }) : t._e()];
-  }, proxy: !0 } : null], null, !0) }, "NcInputField", { ...t.$attrs, ...t.$props }, !1), t.$listeners), [t._t("default")], 2);
-}, p = [], d = /* @__PURE__ */ a(
-  u,
-  c,
+  var t = this, r = t._self._c;
+  return r("NcInputField", t._g(t._b({ ref: "inputField", on: { input: t.handleInput }, scopedSlots: t._u([t.type !== "search" ? { key: "trailing-button-icon", fn: function() {
+    return [t.trailingButtonIcon === "close" ? r("Close", { attrs: { size: 20 } }) : t.trailingButtonIcon === "arrowRight" ? r("ArrowRight", { attrs: { size: 20 } }) : t.trailingButtonIcon === "undo" ? r("Undo", { attrs: { size: 20 } }) : t._e()];
+  }, proxy: !0 } : null], null, !0) }, "NcInputField", t.propsAndAttrsToForward, !1), t.$listeners), [t._t("default")], 2);
+}, d = [], f = /* @__PURE__ */ a(
   p,
+  c,
+  d,
   !1,
   null,
   null,
   null,
   null
 );
-const F = d.exports;
+const v = f.exports;
 export {
-  F as default
+  v as default
 };

package/dist/Components/NcTextField.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcTextField.mjs","sources":["../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\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### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose text field component.\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nNote: the inner html `input` element inherits all the attributes from the\nNcTextField component so you can add things like `autocomplete`, `maxlength`\nand `minlength`.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextField :value.sync=\"text1\"\n\t\t\tlabel=\"Leading icon and clear trailing button\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text1 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<Magnify :size=\"20\" />\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text4\"\n\t\t\tlabel=\"Internal label\"\n\t\t\tplaceholder=\"That can be used together with placeholder\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text4 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<Lock :size=\"20\" />\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text2\"\n\t\t\tlabel=\"Success state\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\t:success=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text3\"\n\t\t\tlabel=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\t:error=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextField label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextField :value.sync=\"text5\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Input with external label\"\n\t\t\t\t@trailing-button-click=\"clearText\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Lock from 'vue-material-design-icons/Lock'\nimport Close from 'vue-material-design-icons/Close'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: '',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tMagnify,\n\t\tLock,\n\t\tClose,\n\t},\n\n\tmethods: {\n\t\tclearText() {\n\t\t\tthis.text1 = ''\n\t\t\tthis.text3 = ''\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"{...$attrs, ...$props }\"\n\t\tref=\"inputField\"\n\t\t:trailing-button-label=\"clearTextLabel\"\n\t\tv-on=\"$listeners\"\n\t\t@input=\"handleInput\">\n\t\t<!-- Default slot for the leading icon -->\n\t\t<slot />\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\n\t\t<template v-if=\"type !== 'search'\" #trailing-button-icon>\n\t\t\t<Close v-if=\"trailingButtonIcon === 'close'\" :size=\"20\" />\n\t\t\t<ArrowRight v-else-if=\"trailingButtonIcon === 'arrowRight'\" :size=\"20\" />\n\t\t\t<Undo v-else-if=\"trailingButtonIcon === 'undo'\" :size=\"20\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\nimport Close from 'vue-material-design-icons/Close.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Undo from 'vue-material-design-icons/UndoVariant.vue'\n\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcTextField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tClose,\n\t\tArrowRight,\n\t\tUndo,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t...NcInputField.props,\n\n\t\t/**\n\t\t * Specifies which material design icon should be used for the trailing\n\t\t * button. Value can be `close`, `arrowRight`, or `undo`.\n\t\t */\n\t\ttrailingButtonIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'close',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'close',\n\t\t\t\t'arrowRight',\n\t\t\t\t'undo',\n\t\t\t].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t],\n\n\tcomputed: {\n\t\tclearTextLabel() {\n\t\t\treturn this.trailingButtonLabel || t('Clear text')\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t},\n}\n</script>\n"],"names":["_sfc_main","NcInputField","Close","ArrowRight","Undo","value","t","event"],"mappings":";;;;;;AA+JA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC;AAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA,IACA,GAAAH,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAI,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,KAAA,uBAAAC,EAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,WAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,WAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAAC,GAAA;AACA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcTextField.mjs","sources":["../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n  -\n  - @author Marco Ambrosini <marcoambrosini@pm.me>\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### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose text field component.\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nNote: the inner html `input` element inherits all the attributes from the\nNcTextField component so you can add things like `autocomplete`, `maxlength`\nand `minlength`.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextField :value.sync=\"text1\"\n\t\t\tlabel=\"Leading icon and clear trailing button\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text1 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<Magnify :size=\"20\" />\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text4\"\n\t\t\tlabel=\"Internal label\"\n\t\t\tplaceholder=\"That can be used together with placeholder\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text4 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<Lock :size=\"20\" />\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text2\"\n\t\t\tlabel=\"Success state\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\t:success=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField :value.sync=\"text3\"\n\t\t\tlabel=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\t:error=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextField label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextField :value.sync=\"text5\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Input with external label\"\n\t\t\t\t@trailing-button-click=\"clearText\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport Lock from 'vue-material-design-icons/Lock'\nimport Close from 'vue-material-design-icons/Close'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: '',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tMagnify,\n\t\tLock,\n\t\tClose,\n\t},\n\n\tmethods: {\n\t\tclearText() {\n\t\t\tthis.text1 = ''\n\t\t\tthis.text3 = ''\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"propsAndAttrsToForward\"\n\t\tref=\"inputField\"\n\t\tv-on=\"$listeners\"\n\t\t@input=\"handleInput\">\n\t\t<!-- Default slot for the leading icon -->\n\t\t<slot />\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\n\t\t<template v-if=\"type !== 'search'\" #trailing-button-icon>\n\t\t\t<Close v-if=\"trailingButtonIcon === 'close'\" :size=\"20\" />\n\t\t\t<ArrowRight v-else-if=\"trailingButtonIcon === 'arrowRight'\" :size=\"20\" />\n\t\t\t<Undo v-else-if=\"trailingButtonIcon === 'undo'\" :size=\"20\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport NcInputField from '../NcInputField/NcInputField.vue'\n\nimport Close from 'vue-material-design-icons/Close.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport Undo from 'vue-material-design-icons/UndoVariant.vue'\n\nimport { t } from '../../l10n.js'\n\nconst NcInputFieldProps = new Set(Object.keys(NcInputField.props))\n\nexport default {\n\tname: 'NcTextField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tClose,\n\t\tArrowRight,\n\t\tUndo,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Any [NcInputField](#/Components/NcFields?id=ncinputfield) props\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\n\t\t// Reuse all the props from NcInputField for better typing and documentation\n\t\t...NcInputField.props,\n\n\t\t// Redefined props\n\n\t\t/**\n\t\t * Label of the trailing button\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Clear text'),\n\t\t},\n\n\t\t// Custom props\n\n\t\t/**\n\t\t * Specifies which material design icon should be used for the trailing\n\t\t * button.\n\t\t * @type {'close'|'arrowRight'|'undo'}\n\t\t */\n\t\ttrailingButtonIcon: {\n\t\t\ttype: String,\n\t\t\tdefault: 'close',\n\t\t\tvalidator: (value) => [\n\t\t\t\t'close',\n\t\t\t\t'arrowRight',\n\t\t\t\t'undo',\n\t\t\t].includes(value),\n\t\t},\n\t},\n\n\temits: [\n\t\t'update:value',\n\t],\n\n\tcomputed: {\n\t\tpropsAndAttrsToForward() {\n\t\t\treturn {\n\t\t\t\t// Proxy all the HTML attributes\n\t\t\t\t...this.$attrs,\n\t\t\t\t// Proxy original NcInputField's props\n\t\t\t\t...Object.fromEntries(\n\t\t\t\t\tObject.entries(this.$props).filter(([key]) => NcInputFieldProps.has(key)),\n\t\t\t\t),\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t},\n}\n</script>\n"],"names":["NcInputFieldProps","NcInputField","_sfc_main","Close","ArrowRight","Undo","t","value","key","event"],"mappings":";;;;;;AA8JA,MAAAA,IAAA,IAAA,IAAA,OAAA,KAAAC,EAAA,KAAA,CAAA,GAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAD;AAAA,IACA,OAAAE;AAAA,IACA,YAAAC;AAAA,IACA,MAAAC;AAAA,EACA;AAAA;AAAA,EAGA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA,CAAA;AAAA;AAAA,IAGA,GAAAJ,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAK,EAAA,YAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACA,EAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,yBAAA;AACA,aAAA;AAAA;AAAA,QAEA,GAAA,KAAA;AAAA;AAAA,QAEA,GAAA,OAAA;AAAA,UACA,OAAA,QAAA,KAAA,MAAA,EAAA,OAAA,CAAA,CAAAC,CAAA,MAAAR,EAAA,IAAAQ,CAAA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AACA,WAAA,MAAA,WAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AACA,WAAA,MAAA,WAAA,OAAA;AAAA,IACA;AAAA,IAEA,YAAAC,GAAA;AACA,WAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcTimezonePicker.cjs

@@ -1,5 +1,5 @@
 "use strict";
-const O = require("../chunks/l10n-903083c4.cjs"), t = require("../chunks/logger-4998b668.cjs"), e = require("@nextcloud/calendar-js"), Z = require("./NcSelect.cjs"), Y = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
+const O = require("../chunks/l10n-b1d264c7.cjs"), t = require("../chunks/logger-4998b668.cjs"), e = require("@nextcloud/calendar-js"), Z = require("./NcSelect.cjs"), Y = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
 /**
  * @copyright Copyright (c) 2019 Georg Ehrke
  *

package/dist/Components/NcTimezonePicker.mjs

@@ -1,4 +1,4 @@
-import { t as O } from "../chunks/l10n-27a75c40.mjs";
+import { t as O } from "../chunks/l10n-05a09c66.mjs";
 import { l as t } from "../chunks/logger-3612e664.mjs";
 import { getTimezoneManager as Z } from "@nextcloud/calendar-js";
 import e from "./NcSelect.mjs";

package/dist/Components/NcUserBubble.cjs

@@ -1,5 +1,5 @@
-var f = require("../assets/index-23e64bbb.css");
-const a = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), s = require("../chunks/index-2a5b8ace.cjs"), n = require("./NcPopover.cjs"), i = {
+var f = require("../assets/index-9e44e336.css");
+const a = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), s = require("../chunks/index-032137a6.cjs"), n = require("./NcPopover.cjs"), i = {
   name: "NcUserBubbleDiv"
 };
 var o = function() {
@@ -173,7 +173,7 @@ const p = {
 var _ = function() {
   var e = this, r = e._self._c;
   return r(e.isPopoverComponent, { tag: "component", staticClass: "user-bubble__wrapper", attrs: { trigger: "hover focus", shown: e.open }, on: { "update:open": e.onOpenChange }, scopedSlots: e._u([{ key: "trigger", fn: function() {
-    return [r(e.isLinkComponent, { tag: "component", staticClass: "user-bubble__content", class: e.primary ? "user-bubble__content--primary" : "", style: e.styles.content, attrs: { href: e.hasUrl ? e.url : null }, on: { click: e.onClick } }, [r("NcAvatar", e._b({ staticClass: "user-bubble__avatar", style: e.styles.avatar, attrs: { url: e.isCustomAvatar && e.isAvatarUrl ? e.avatarImage : void 0, "icon-class": e.isCustomAvatar && !e.isAvatarUrl ? e.avatarImage : void 0, user: e.user, "display-name": e.displayName, size: e.size - e.margin * 2, "disable-tooltip": !0, "disable-menu": !0 } }, "NcAvatar", e.$props, !1)), r("span", { staticClass: "user-bubble__name" }, [e._v(" " + e._s(e.displayName || e.user) + " ")]), e.$slots.name ? r("span", { staticClass: "user-bubble__secondary" }, [e._t("name")], 2) : e._e()], 1)];
+    return [r(e.isLinkComponent, { tag: "component", staticClass: "user-bubble__content", class: { "user-bubble__content--primary": e.primary }, style: e.styles.content, attrs: { href: e.hasUrl ? e.url : null }, on: { click: e.onClick } }, [r("NcAvatar", e._b({ staticClass: "user-bubble__avatar", style: e.styles.avatar, attrs: { url: e.isCustomAvatar && e.isAvatarUrl ? e.avatarImage : void 0, "icon-class": e.isCustomAvatar && !e.isAvatarUrl ? e.avatarImage : void 0, user: e.user, "display-name": e.displayName, size: e.size - e.margin * 2, "disable-tooltip": !0, "disable-menu": !0 } }, "NcAvatar", e.$props, !1)), r("span", { staticClass: "user-bubble__name" }, [e._v(" " + e._s(e.displayName || e.user) + " ")]), e.$slots.name ? r("span", { staticClass: "user-bubble__secondary" }, [e._t("name")], 2) : e._e()], 1)];
   }, proxy: !0 }], null, !0) }, [e._t("default")], 2);
 }, m = [], d = /* @__PURE__ */ a.normalizeComponent(
   p,
@@ -181,7 +181,7 @@ var _ = function() {
   m,
   !1,
   null,
-  "25c04da2",
+  "14da7eb2",
   null,
   null
 );

package/dist/Components/NcUserBubble.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NcUserBubble.cjs","sources":["../../src/components/NcUserBubble/NcUserBubbleDiv.vue","../../src/components/NcUserBubble/NcUserBubble.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2021 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\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<template>\n\t<div>\n\t\t<slot name=\"trigger\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcUserBubbleDiv',\n}\n</script>\n","<!--\n  - @copyright Copyright (c) 2019 Jonas Sulzer <jonas@violoncello.ch>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  - @author Jonas Sulzer <jonas@violoncello.ch>\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 displays a user together with a small avatar in a grey bubble.\nIt's possible to use an actual user's avatar, just an image/icon as a url or an icon-class,\nto link the bubble to e.g. a users profile\nand to show a popover on hover with e.g. the full user name handle / email address or something else.\n\nThis component has the following slot:\n* a default slot which is for the content of the popover (this is passed to the popover component directly).\n\n### Examples\n\n```vue\n<p>\n\tSome text before <NcUserBubble user=\"admin\" display-name=\"Admin Example\" :url=\"'/test'\">@admin@foreign-host.com</NcUserBubble> and after the bubble.\n\t<NcUserBubble avatar-image=\"icon-group\" display-name=\"test group xyz\" :primary=\"true\">Hey there!</NcUserBubble>\n</p>\n```\n\n### Example with name slot\n\n```vue\n<template>\n<NcUserBubble\n\t:margin=\"4\"\n\t:size=\"30\"\n\tdisplay-name=\"Administrator\"\n\tuser=\"admin\">\n\t<template #name>\n\t\t<a href=\"#\"\n\t\t\ttitle=\"Remove user\"\n\t\t\tclass=\"icon-close\"\n\t\t\t@click=\"alert\" />\n\t</template>\n</NcUserBubble>\n</template>\n\n<style>\n.icon-close {\n\tdisplay: block;\n\theight: 100%;\n}\n</style>\n```\n\n</docs>\n<template>\n\t<component :is=\"isPopoverComponent\"\n\t\ttrigger=\"hover focus\"\n\t\t:shown=\"open\"\n\t\tclass=\"user-bubble__wrapper\"\n\t\t@update:open=\"onOpenChange\">\n\t\t<!-- Main userbubble structure -->\n\t\t<template #trigger>\n\t\t\t<component :is=\"isLinkComponent\"\n\t\t\t\tclass=\"user-bubble__content\"\n\t\t\t\t:style=\"styles.content\"\n\t\t\t\t:href=\"hasUrl ? url : null\"\n\t\t\t\t:class=\"primary ? 'user-bubble__content--primary' : ''\"\n\t\t\t\t@click=\"onClick\">\n\t\t\t\t<!-- NcAvatar -->\n\t\t\t\t<NcAvatar :url=\"isCustomAvatar && isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:icon-class=\"isCustomAvatar && !isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:user=\"user\"\n\t\t\t\t\t:display-name=\"displayName\"\n\t\t\t\t\t:size=\"size - (margin * 2)\"\n\t\t\t\t\t:style=\"styles.avatar\"\n\t\t\t\t\t:disable-tooltip=\"true\"\n\t\t\t\t\t:disable-menu=\"true\"\n\t\t\t\t\tv-bind=\"$props\"\n\t\t\t\t\tclass=\"user-bubble__avatar\" />\n\n\t\t\t\t<!-- Name -->\n\t\t\t\t<span class=\"user-bubble__name\">\n\t\t\t\t\t{{ displayName || user }}\n\t\t\t\t</span>\n\n\t\t\t\t<!-- @slot Optional slot just after the name -->\n\t\t\t\t<span v-if=\"$slots.name\" class=\"user-bubble__secondary\">\n\t\t\t\t\t<slot name=\"name\" />\n\t\t\t\t</span>\n\t\t\t</component>\n\t\t</template>\n\n\t\t<!-- @slot Main Popover content on userbubble hover/focus -->\n\t\t<slot />\n\t</component>\n</template>\n\n<script>\nimport NcUserBubbleDiv from './NcUserBubbleDiv.vue'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcPopover from '../NcPopover/index.js'\n\nexport default {\n\tname: 'NcUserBubble',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcPopover,\n\t\tNcUserBubbleDiv,\n\t},\n\tprops: {\n\t\t/**\n\t\t * Override generated avatar, can be an url or an icon class\n\t\t */\n\t\tavatarImage: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Provide the user id if this is a user\n\t\t */\n\t\tuser: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Displayed label\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Whether or not to display the user-status\n\t\t */\n\t\tshowUserStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Define the whole bubble as a link\n\t\t */\n\t\turl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: url => {\n\t\t\t\ttry {\n\t\t\t\t\turl = new URL(url)\n\t\t\t\t\treturn !!url\n\t\t\t\t} catch (error) {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Default popover state. Requires the UserBubble\n\t\t * to have some content to render inside the popover\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Use the primary colour\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * This is the height of the component\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * This is the margin of the avatar (size - margin = avatar size)\n\t\t */\n\t\tmargin: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\t},\n\temits: [\n\t\t'click',\n\t\t'update:open',\n\t],\n\tcomputed: {\n\t\t/**\n\t\t * If userbubble is empty, let's NOT\n\t\t * use the Popover component\n\t\t * We need a component instead of a simple div here,\n\t\t * because otherwise the trigger template will not be shown.\n\t\t *\n\t\t * @return {string} 'Popover' or 'UserBubbleDiv'\n\t\t */\n\t\tisPopoverComponent() {\n\t\t\treturn !this.popoverEmpty\n\t\t\t\t? 'NcPopover'\n\t\t\t\t: 'NcUserBubbleDiv'\n\t\t},\n\n\t\t/**\n\t\t * Is the provided avatar url valid or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisAvatarUrl() {\n\t\t\tif (!this.avatarImage) {\n\t\t\t\treturn false\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst url = new URL(this.avatarImage)\n\t\t\t\treturn !!url\n\t\t\t} catch (error) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Do we have a custom avatar or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisCustomAvatar() {\n\t\t\treturn !!this.avatarImage\n\t\t},\n\n\t\thasUrl() {\n\t\t\treturn this.url && this.url.trim() !== ''\n\t\t},\n\n\t\tisLinkComponent() {\n\t\t\treturn this.hasUrl ? 'a' : 'div'\n\t\t},\n\n\t\tpopoverEmpty() {\n\t\t\tif ('default' in this.$slots) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\n\t\tstyles() {\n\t\t\treturn {\n\t\t\t\tcontent: {\n\t\t\t\t\theight: this.size + 'px',\n\t\t\t\t\tlineHeight: this.size + 'px',\n\t\t\t\t\tborderRadius: this.size / 2 + 'px',\n\t\t\t\t},\n\t\t\t\tavatar: {\n\t\t\t\t\tmarginLeft: this.margin + 'px',\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\tmethods: {\n\t\tonOpenChange(state) {\n\t\t\tthis.$emit('update:open', state)\n\t\t},\n\t\t/**\n\t\t * Catch and forward click event to parent\n\t\t *\n\t\t * @param {Event} event the click event\n\t\t */\n\t\tonClick(event) {\n\t\t\tthis.$emit('click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.user-bubble {\n\t&__wrapper {\n\t\t// align inline with text\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\t// shrink and allow grow to fit\n\t\tmin-width: 0;\n\t\tmax-width: 100%;\n\t}\n\n\t&__content {\n\t\tdisplay: inline-flex;\n\t\tmax-width: 100%;\n\t\tbackground-color: var(--color-background-dark);\n\n\t\t&--primary {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\n\t\t> :last-child {\n\t\t\t// border radius left padding\n\t\t\tpadding-right: 8px;\n\t\t}\n\t}\n\n\t&__avatar {\n\t\talign-self: center;\n\t}\n\n\t&__name {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__name,\n\t&__secondary {\n\t\t// proper spacing between avatar, name & slot\n\t\tpadding: 0;\n\t\tpadding-left: 4px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main$1","_sfc_main","Components_NcAvatar","Components_NcPopover","NcUserBubbleDiv","url","state","event"],"mappings":";kJA4BAA,IAAA;AAAA,EACA,MAAA;AACA;;;;;;;;;;;;;;;ACwFA,MAAAC,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC,EAAA;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA;AACA,YAAA;AACA,iBAAAA,IAAA,IAAA,IAAAA,CAAA,GACA,CAAA,CAAAA;AAAA,QACA,QAAA;AACA,iBAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,qBAAA;AACA,aAAA,KAAA,eAEA,oBADA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AACA,UAAA,CAAA,KAAA;AACA,eAAA;AAGA,UAAA;AAEA,eAAA,CAAA,CADA,IAAA,IAAA,KAAA,WAAA;AAAA,MAEA,QAAA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,SAAA;AACA,aAAA,KAAA,OAAA,KAAA,IAAA,KAAA,MAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,eAAA,KAAA;AAAA,IAIA;AAAA,IAEA,SAAA;AACA,aAAA;AAAA,QACA,SAAA;AAAA,UACA,QAAA,KAAA,OAAA;AAAA,UACA,YAAA,KAAA,OAAA;AAAA,UACA,cAAA,KAAA,OAAA,IAAA;AAAA,QACA;AAAA,QACA,QAAA;AAAA,UACA,YAAA,KAAA,SAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,SAAA;AAAA,IACA,aAAAC,GAAA;AACA,WAAA,MAAA,eAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAAC,GAAA;AACA,WAAA,MAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"NcUserBubble.cjs","sources":["../../src/components/NcUserBubble/NcUserBubbleDiv.vue","../../src/components/NcUserBubble/NcUserBubble.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2021 Raimund Schlüßler <raimund.schluessler@mailbox.org>\n -\n - @author Raimund Schlüßler <raimund.schluessler@mailbox.org>\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<template>\n\t<div>\n\t\t<slot name=\"trigger\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcUserBubbleDiv',\n}\n</script>\n","<!--\n  - @copyright Copyright (c) 2019 Jonas Sulzer <jonas@violoncello.ch>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  - @author Jonas Sulzer <jonas@violoncello.ch>\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 displays a user together with a small avatar in a grey bubble.\nIt's possible to use an actual user's avatar, just an image/icon as a url or an icon-class,\nto link the bubble to e.g. a users profile\nand to show a popover on hover with e.g. the full user name handle / email address or something else.\n\nThis component has the following slot:\n* a default slot which is for the content of the popover (this is passed to the popover component directly).\n\n### Examples\n\n```vue\n<p>\n\tSome text before <NcUserBubble user=\"admin\" display-name=\"Admin Example\" :url=\"'/test'\">@admin@foreign-host.com</NcUserBubble> and after the bubble.\n\t<NcUserBubble avatar-image=\"icon-group\" display-name=\"test group xyz\" :primary=\"true\">Hey there!</NcUserBubble>\n</p>\n```\n\n### Example with name slot\n\n```vue\n<template>\n<NcUserBubble\n\t:margin=\"4\"\n\t:size=\"30\"\n\tdisplay-name=\"Administrator\"\n\tuser=\"admin\">\n\t<template #name>\n\t\t<a href=\"#\"\n\t\t\ttitle=\"Remove user\"\n\t\t\tclass=\"icon-close\"\n\t\t\t@click=\"alert\" />\n\t</template>\n</NcUserBubble>\n</template>\n\n<style>\n.icon-close {\n\tdisplay: block;\n\theight: 100%;\n}\n</style>\n```\n\n</docs>\n<template>\n\t<component :is=\"isPopoverComponent\"\n\t\ttrigger=\"hover focus\"\n\t\t:shown=\"open\"\n\t\tclass=\"user-bubble__wrapper\"\n\t\t@update:open=\"onOpenChange\">\n\t\t<!-- Main userbubble structure -->\n\t\t<template #trigger>\n\t\t\t<component :is=\"isLinkComponent\"\n\t\t\t\tclass=\"user-bubble__content\"\n\t\t\t\t:style=\"styles.content\"\n\t\t\t\t:href=\"hasUrl ? url : null\"\n\t\t\t\t:class=\"{ 'user-bubble__content--primary': primary }\"\n\t\t\t\t@click=\"onClick\">\n\t\t\t\t<!-- NcAvatar -->\n\t\t\t\t<NcAvatar :url=\"isCustomAvatar && isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:icon-class=\"isCustomAvatar && !isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:user=\"user\"\n\t\t\t\t\t:display-name=\"displayName\"\n\t\t\t\t\t:size=\"size - (margin * 2)\"\n\t\t\t\t\t:style=\"styles.avatar\"\n\t\t\t\t\t:disable-tooltip=\"true\"\n\t\t\t\t\t:disable-menu=\"true\"\n\t\t\t\t\tv-bind=\"$props\"\n\t\t\t\t\tclass=\"user-bubble__avatar\" />\n\n\t\t\t\t<!-- Name -->\n\t\t\t\t<span class=\"user-bubble__name\">\n\t\t\t\t\t{{ displayName || user }}\n\t\t\t\t</span>\n\n\t\t\t\t<!-- @slot Optional slot just after the name -->\n\t\t\t\t<span v-if=\"$slots.name\" class=\"user-bubble__secondary\">\n\t\t\t\t\t<slot name=\"name\" />\n\t\t\t\t</span>\n\t\t\t</component>\n\t\t</template>\n\n\t\t<!-- @slot Main Popover content on userbubble hover/focus -->\n\t\t<slot />\n\t</component>\n</template>\n\n<script>\nimport NcUserBubbleDiv from './NcUserBubbleDiv.vue'\nimport NcAvatar from '../NcAvatar/index.js'\nimport NcPopover from '../NcPopover/index.js'\n\nexport default {\n\tname: 'NcUserBubble',\n\tcomponents: {\n\t\tNcAvatar,\n\t\tNcPopover,\n\t\tNcUserBubbleDiv,\n\t},\n\tprops: {\n\t\t/**\n\t\t * Override generated avatar, can be an url or an icon class\n\t\t */\n\t\tavatarImage: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Provide the user id if this is a user\n\t\t */\n\t\tuser: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Displayed label\n\t\t */\n\t\tdisplayName: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * Whether or not to display the user-status\n\t\t */\n\t\tshowUserStatus: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Define the whole bubble as a link\n\t\t */\n\t\turl: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: url => {\n\t\t\t\ttry {\n\t\t\t\t\turl = new URL(url)\n\t\t\t\t\treturn !!url\n\t\t\t\t} catch (error) {\n\t\t\t\t\treturn false\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * Default popover state. Requires the UserBubble\n\t\t * to have some content to render inside the popover\n\t\t */\n\t\topen: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * Use the primary colour\n\t\t */\n\t\tprimary: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * This is the height of the component\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 20,\n\t\t},\n\t\t/**\n\t\t * This is the margin of the avatar (size - margin = avatar size)\n\t\t */\n\t\tmargin: {\n\t\t\ttype: Number,\n\t\t\tdefault: 2,\n\t\t},\n\t},\n\temits: [\n\t\t'click',\n\t\t'update:open',\n\t],\n\tcomputed: {\n\t\t/**\n\t\t * If userbubble is empty, let's NOT\n\t\t * use the Popover component\n\t\t * We need a component instead of a simple div here,\n\t\t * because otherwise the trigger template will not be shown.\n\t\t *\n\t\t * @return {string} 'Popover' or 'UserBubbleDiv'\n\t\t */\n\t\tisPopoverComponent() {\n\t\t\treturn !this.popoverEmpty\n\t\t\t\t? 'NcPopover'\n\t\t\t\t: 'NcUserBubbleDiv'\n\t\t},\n\n\t\t/**\n\t\t * Is the provided avatar url valid or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisAvatarUrl() {\n\t\t\tif (!this.avatarImage) {\n\t\t\t\treturn false\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tconst url = new URL(this.avatarImage)\n\t\t\t\treturn !!url\n\t\t\t} catch (error) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t\t/**\n\t\t * Do we have a custom avatar or not\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisCustomAvatar() {\n\t\t\treturn !!this.avatarImage\n\t\t},\n\n\t\thasUrl() {\n\t\t\treturn this.url && this.url.trim() !== ''\n\t\t},\n\n\t\tisLinkComponent() {\n\t\t\treturn this.hasUrl ? 'a' : 'div'\n\t\t},\n\n\t\tpopoverEmpty() {\n\t\t\tif ('default' in this.$slots) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t\treturn true\n\t\t},\n\n\t\tstyles() {\n\t\t\treturn {\n\t\t\t\tcontent: {\n\t\t\t\t\theight: this.size + 'px',\n\t\t\t\t\tlineHeight: this.size + 'px',\n\t\t\t\t\tborderRadius: this.size / 2 + 'px',\n\t\t\t\t},\n\t\t\t\tavatar: {\n\t\t\t\t\tmarginLeft: this.margin + 'px',\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t},\n\tmethods: {\n\t\tonOpenChange(state) {\n\t\t\tthis.$emit('update:open', state)\n\t\t},\n\t\t/**\n\t\t * Catch and forward click event to parent\n\t\t *\n\t\t * @param {Event} event the click event\n\t\t */\n\t\tonClick(event) {\n\t\t\tthis.$emit('click', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.user-bubble {\n\t&__wrapper {\n\t\t// align inline with text\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\t// shrink and allow grow to fit\n\t\tmin-width: 0;\n\t\tmax-width: 100%;\n\t}\n\n\t&__content {\n\t\tdisplay: inline-flex;\n\t\tmax-width: 100%;\n\t\tbackground-color: var(--color-background-dark);\n\n\t\t&--primary {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\n\t\t> :last-child {\n\t\t\t// border radius left padding\n\t\t\tpadding-right: 8px;\n\t\t}\n\t}\n\n\t&__avatar {\n\t\talign-self: center;\n\t}\n\n\t&__name {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__name,\n\t&__secondary {\n\t\t// proper spacing between avatar, name & slot\n\t\tpadding: 0;\n\t\tpadding-left: 4px;\n\t}\n}\n\n</style>\n"],"names":["_sfc_main$1","_sfc_main","Components_NcAvatar","Components_NcPopover","NcUserBubbleDiv","url","state","event"],"mappings":";kJA4BAA,IAAA;AAAA,EACA,MAAA;AACA;;;;;;;;;;;;;;;ACwFA,MAAAC,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC,EAAA;AAAA,IACA,WAAAC;AAAA,IACA,iBAAAC;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA;AACA,YAAA;AACA,iBAAAA,IAAA,IAAA,IAAAA,CAAA,GACA,CAAA,CAAAA;AAAA,QACA,QAAA;AACA,iBAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,qBAAA;AACA,aAAA,KAAA,eAEA,oBADA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AACA,UAAA,CAAA,KAAA;AACA,eAAA;AAGA,UAAA;AAEA,eAAA,CAAA,CADA,IAAA,IAAA,KAAA,WAAA;AAAA,MAEA,QAAA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,SAAA;AACA,aAAA,KAAA,OAAA,KAAA,IAAA,KAAA,MAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,eAAA,KAAA;AAAA,IAIA;AAAA,IAEA,SAAA;AACA,aAAA;AAAA,QACA,SAAA;AAAA,UACA,QAAA,KAAA,OAAA;AAAA,UACA,YAAA,KAAA,OAAA;AAAA,UACA,cAAA,KAAA,OAAA,IAAA;AAAA,QACA;AAAA,QACA,QAAA;AAAA,UACA,YAAA,KAAA,SAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EACA,SAAA;AAAA,IACA,aAAAC,GAAA;AACA,WAAA,MAAA,eAAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAAC,GAAA;AACA,WAAA,MAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/Components/NcUserBubble.mjs

@@ -1,6 +1,6 @@
-import "../assets/index-23e64bbb.css";
+import "../assets/index-9e44e336.css";
 import { n as a } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
-import { N as s } from "../chunks/index-6c221fa0.mjs";
+import { N as s } from "../chunks/index-fb2ee22c.mjs";
 import n from "./NcPopover.mjs";
 const i = {
   name: "NcUserBubbleDiv"
@@ -176,7 +176,7 @@ const c = {
 var m = function() {
   var e = this, r = e._self._c;
   return r(e.isPopoverComponent, { tag: "component", staticClass: "user-bubble__wrapper", attrs: { trigger: "hover focus", shown: e.open }, on: { "update:open": e.onOpenChange }, scopedSlots: e._u([{ key: "trigger", fn: function() {
-    return [r(e.isLinkComponent, { tag: "component", staticClass: "user-bubble__content", class: e.primary ? "user-bubble__content--primary" : "", style: e.styles.content, attrs: { href: e.hasUrl ? e.url : null }, on: { click: e.onClick } }, [r("NcAvatar", e._b({ staticClass: "user-bubble__avatar", style: e.styles.avatar, attrs: { url: e.isCustomAvatar && e.isAvatarUrl ? e.avatarImage : void 0, "icon-class": e.isCustomAvatar && !e.isAvatarUrl ? e.avatarImage : void 0, user: e.user, "display-name": e.displayName, size: e.size - e.margin * 2, "disable-tooltip": !0, "disable-menu": !0 } }, "NcAvatar", e.$props, !1)), r("span", { staticClass: "user-bubble__name" }, [e._v(" " + e._s(e.displayName || e.user) + " ")]), e.$slots.name ? r("span", { staticClass: "user-bubble__secondary" }, [e._t("name")], 2) : e._e()], 1)];
+    return [r(e.isLinkComponent, { tag: "component", staticClass: "user-bubble__content", class: { "user-bubble__content--primary": e.primary }, style: e.styles.content, attrs: { href: e.hasUrl ? e.url : null }, on: { click: e.onClick } }, [r("NcAvatar", e._b({ staticClass: "user-bubble__avatar", style: e.styles.avatar, attrs: { url: e.isCustomAvatar && e.isAvatarUrl ? e.avatarImage : void 0, "icon-class": e.isCustomAvatar && !e.isAvatarUrl ? e.avatarImage : void 0, user: e.user, "display-name": e.displayName, size: e.size - e.margin * 2, "disable-tooltip": !0, "disable-menu": !0 } }, "NcAvatar", e.$props, !1)), r("span", { staticClass: "user-bubble__name" }, [e._v(" " + e._s(e.displayName || e.user) + " ")]), e.$slots.name ? r("span", { staticClass: "user-bubble__secondary" }, [e._t("name")], 2) : e._e()], 1)];
   }, proxy: !0 }], null, !0) }, [e._t("default")], 2);
 }, _ = [], d = /* @__PURE__ */ a(
   c,
@@ -184,7 +184,7 @@ var m = function() {
   _,
   !1,
   null,
-  "25c04da2",
+  "14da7eb2",
   null,
   null
 );