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

package/dist/chunks/NcActionTextEditable-CD8i9-dJ.mjs

@@ -0,0 +1,121 @@
+import "../assets/NcActionTextEditable-MT_lJzTD.css";
+import { A as u } from "./actionText-k6jBccGZ.mjs";
+import { G as n } from "./GenRandomId-BW3iYFf9.mjs";
+import { A as c } from "./ArrowRight-oiVcv9Oj.mjs";
+import { resolveComponent as b, openBlock as s, createElementBlock as d, normalizeClass as r, createElementVNode as o, renderSlot as f, normalizeStyle as p, withModifiers as _, toDisplayString as h, createCommentVNode as I, mergeProps as g, withDirectives as S, createVNode as x, vShow as y } from "vue";
+import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const k = {
+  name: "NcActionTextEditable",
+  components: {
+    ArrowRight: c
+  },
+  mixins: [u],
+  props: {
+    /**
+     * id attribute of the checkbox element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + n(),
+      validator: (e) => e.trim() !== ""
+    },
+    /**
+     * disabled state of the text area
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * value attribute of the input field
+     */
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [
+    "input",
+    "update:modelValue",
+    "submit"
+  ],
+  computed: {
+    /**
+     * determines if the action is focusable
+     *
+     * @return {boolean} is the action focusable ?
+     */
+    isFocusable() {
+      return !this.disabled;
+    },
+    computedId() {
+      return n();
+    }
+  },
+  methods: {
+    onInput(e) {
+      this.$emit("input", e), this.$emit("update:modelValue", e.target.value);
+    },
+    onSubmit(e) {
+      if (e.preventDefault(), e.stopPropagation(), !this.disabled)
+        this.$emit("submit", e);
+      else
+        return !1;
+    }
+  }
+}, v = ["disabled"], V = ["id"], w = ["for"], C = ["id", "disabled", "value"], N = ["for"];
+function E(e, a, t, R, z, i) {
+  const m = b("ArrowRight");
+  return s(), d("li", {
+    class: r(["action", { "action--disabled": t.disabled }])
+  }, [
+    o("span", {
+      class: "action-text-editable",
+      onClick: a[2] || (a[2] = (...l) => e.onClick && e.onClick(...l))
+    }, [
+      f(e.$slots, "icon", {}, () => [
+        o("span", {
+          class: r([[e.isIconUrl ? "action-text-editable__icon--url" : e.icon], "action-text-editable__icon"]),
+          style: p({ backgroundImage: e.isIconUrl ? "url(".concat(e.icon, ")") : null })
+        }, null, 6)
+      ], !0),
+      o("form", {
+        ref: "form",
+        class: "action-text-editable__form",
+        disabled: t.disabled,
+        onSubmit: a[1] || (a[1] = _((...l) => i.onSubmit && i.onSubmit(...l), ["prevent"]))
+      }, [
+        o("input", {
+          id: t.id,
+          type: "submit",
+          class: "action-text-editable__submit"
+        }, null, 8, V),
+        e.name ? (s(), d("label", {
+          key: 0,
+          class: "action-text-editable__name",
+          for: i.computedId
+        }, h(e.name), 9, w)) : I("", !0),
+        o("textarea", g({
+          id: i.computedId,
+          disabled: t.disabled,
+          value: t.modelValue
+        }, e.$attrs, {
+          class: ["action-text-editable__textarea", { focusable: i.isFocusable }],
+          onInput: a[0] || (a[0] = (...l) => i.onInput && i.onInput(...l))
+        }), null, 16, C),
+        S(o("label", {
+          for: t.id,
+          class: "action-text-editable__label"
+        }, [
+          x(m, { size: 20 })
+        ], 8, N), [
+          [y, !t.disabled]
+        ])
+      ], 40, v)
+    ])
+  ], 2);
+}
+const P = /* @__PURE__ */ A(k, [["render", E], ["__scopeId", "data-v-781fe40e"]]);
+export {
+  P as N
+};

package/dist/chunks/NcActionTextEditable-CD8i9-dJ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionTextEditable-CD8i9-dJ.mjs","sources":["../../src/components/NcActionTextEditable/NcActionTextEditable.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to be used inside of the [Actions](#Actions) component slots.\nAll undocumented attributes will be bound to the textarea. e.g. `maxlength`\n\n```\n<template>\n\t<NcActions>\n\t\t<NcActionTextEditable model-value=\"This is a textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable :disabled=\"true\" model-value=\"This is a disabled textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable name=\"Please edit the text\" model-value=\"This is a textarea with name\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t</NcActions>\n</template>\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tPencil,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span class=\"action-text-editable\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-text-editable__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text-editable__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-text-editable__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<input :id=\"id\" type=\"submit\" class=\"action-text-editable__submit\">\n\n\t\t\t\t<!-- name -->\n\t\t\t\t<label v-if=\"name\"\n\t\t\t\t\tclass=\"action-text-editable__name\"\n\t\t\t\t\t:for=\"computedId\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</label>\n\n\t\t\t\t<textarea :id=\"computedId\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:value=\"modelValue\"\n\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t:class=\"['action-text-editable__textarea', { focusable: isFocusable }]\"\n\t\t\t\t\t@input=\"onInput\" />\n\n\t\t\t\t<!-- allow the custom font to inject a ::before\n\t\t\t\t\tnot possible on input[type=submit] -->\n\t\t\t\t<label v-show=\"!disabled\" :for=\"id\" class=\"action-text-editable__label\">\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</label>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tArrowRight,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the text area\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'update:modelValue',\n\t\t'submit',\n\t],\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\tcomputedId() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', event.target.value)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-text-editable {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\tline-height: $clickable-area;\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t/* Keep padding to define the width to\n\t\t\tassure correct position of a possible text */\n\t\tpadding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t&:deep(.material-design-icon) {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\topacity: $opacity_full;\n\n\t\t.material-design-icon__svg {\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\n\t\tposition: relative;\n\t\tmargin: $input-margin 0;\n\t\tpadding-right: $icon-margin;\n\t}\n\n\t&__submit {\n\t\tposition: absolute;\n\t\tleft: -10000px;\n\t\ttop: auto;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// bottom-right corner\n\t\tposition: absolute;\n\t\tright: $icon-margin + 1;\n\t\tbottom: 1px;\n\t\twidth: #{$clickable-area - $input-margin * 2};\n\t\theight: #{$clickable-area - $input-margin * 2};\n\t\tbox-sizing: border-box;\n\t\tmargin: 0;\n\t\tpadding: 7px 6px;\n\n\t\tborder: 0;\n\t\tborder-radius: 50%;\n\t\t/* Avoid background under border */\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-clip: padding-box;\n\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t/* Inputs inside popover supports text, submit & reset */\n\t&__textarea {\n\t\tflex: 1 1 auto;\n\t\tcolor: inherit;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\tmin-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */\n\t\tmax-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */\n\t\t// block width widening\n\t\tmin-width: $clickable-area * 4;\n\t\twidth: 100% !important;\n\t\tmargin: 0;\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t/* only show confirm borders if input is not focused */\n\t\t&:not(:active):not(:hover):not(:focus) {\n\t\t\t&:invalid {\n\t\t\t\t& + .action-text-editable__label {\n\t\t\t\t\tbackground-color: var(--color-error);\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t&:active,\n\t\t\t\t&:hover,\n\t\t\t\t&:focus {\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&:active,\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t/* above previous input */\n\t\t\t\tz-index: 2;\n\n\t\t\t\tborder-color: var(--color-primary-element);\n\t\t\t\tborder-left-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-text-editable {\n\tmargin-bottom: $icon-margin - $input-margin;\n}\n\n// same for first item\nli:first-child > .action-text-editable {\n\tmargin-top: $icon-margin - $input-margin;\n}\n</style>\n"],"names":["_sfc_main","GenRandomId","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","normalizeClass","$props","_cache","args","_ctx","renderSlot","normalizeStyle","$options","toDisplayString","createCommentVNode","createElementVNode","mergeProps"],"mappings":";;;;;;AA2GA,MAAAA,IAAA;AAAA;;;;;EASC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,IAAA;AAAA;MAEC,SAAA,MAAA,YAAAC,EAAA;AAAA;;;;;IAMD,UAAA;AAAA;;;;;;;;;;;EAaD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA;EAGD,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE,aAAA,CAAA,KAAA;AAAA;;AAIA,aAAAA,EAAA;AAAA;;EAIF,SAAA;AAAA,IACC,QAAAC,GAAA;;;IAcA,SAAAA,GAAA;AAGC,UAFAA,EAAA,eAAA,wBAEA,CAAA,KAAA;;;;;;AAaH,GAjMAC,IAAA,CAAA,UAAA,GAAAC,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,KAAA,GAAAC,IAAA,CAAA,MAAA,YAAA,OAAA,GAAAC,IAAA,CAAA,KAAA;;;;IA4DK,OAAAC,EAAA,CAAA,UAAA,EAAA,oBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA;;MACG,OAAA;AAAA,MACJ,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,WAAAA,EAAA,QAAA,GAAAD,CAAA;AAAA;MAEDE,EAAAD,EAAA,QAAA,QAAA,CAAA,GAAA,MAAA;AAAA;UACQ,OAAAJ,EAAA,CAAA,CAAAI,EAAA,YAAA,oCAAAA,EAAA,IAAA,GAAA,4BAAA,CAAA;AAAA,UACL,OAAAE,EAAA,EAAA,iBAAAF,EAAA,YAAA,OAAA,OAAAA,EAAA,MAAA,OAAA,KAAA,CAAA;AAAA;;;QAKG,KAAA;AAAA,QACL,OAAA;AAAA,QACC,UAAAH,EAAA;AAAA;;;UAEO,IAAAA,EAAA;AAAA,UAAQ,MAAA;AAAA,UAAc,OAAA;AAAA,QA3ElC,GAAA,MAAA,GAAAL,CAAA;AAAA;;UA+EK,OAAA;AAAA,UACC,KAAAW,EAAA;AAAA,QACE,GAAAC,EAAAJ,EAAA,IAAA,GAAA,GAAAP,CAAA,KAjFRY,EAAA,IAAA,EAAA;AAAA,QAoFIC,EAAA,YAAAC,EAAA;AAAA,UAAW,IAAAJ,EAAA;AAAA,UACT,UAAAN,EAAA;AAAA,UACA,OAAAA,EAAA;AAAA;UAEA,OAAA,CAAA,kCAAA,EAAA,WAAAM,EAAA,YAAA,CAAA;AAAA,UACA,SAAAL,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAI,EAAA,WAAAA,EAAA,QAAA,GAAAJ,CAAA;AAAA,QAzFN,CAAA,GAAA,MAAA,IAAAL,CAAA;AAAA;UA6F+B,KAAAG,EAAA;AAAA,UAAS,OAAA;AAAA;;QA7FxC,GAAA,GAAAF,CAAA,GAAA;AAAA;;MAAA,GAAA,IAAAJ,CAAA;AAAA;;;;"}

package/dist/chunks/NcActionTextEditable-CWcNEnUL.cjs

@@ -0,0 +1,114 @@
+var E = require("../assets/NcActionTextEditable-MT_lJzTD.css");
+const s = require("./actionText-CmiezrFO.cjs"), l = require("./GenRandomId-B2O1GMbH.cjs"), r = require("./ArrowRight-M9UNYhUi.cjs"), e = require("vue"), c = require("./_plugin-vue_export-helper-CTzpuyvq.cjs"), u = {
+  name: "NcActionTextEditable",
+  components: {
+    ArrowRight: r.ArrowRight
+  },
+  mixins: [s.ActionTextMixin],
+  props: {
+    /**
+     * id attribute of the checkbox element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + l.GenRandomId(),
+      validator: (t) => t.trim() !== ""
+    },
+    /**
+     * disabled state of the text area
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * value attribute of the input field
+     */
+    modelValue: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: [
+    "input",
+    "update:modelValue",
+    "submit"
+  ],
+  computed: {
+    /**
+     * determines if the action is focusable
+     *
+     * @return {boolean} is the action focusable ?
+     */
+    isFocusable() {
+      return !this.disabled;
+    },
+    computedId() {
+      return l.GenRandomId();
+    }
+  },
+  methods: {
+    onInput(t) {
+      this.$emit("input", t), this.$emit("update:modelValue", t.target.value);
+    },
+    onSubmit(t) {
+      if (t.preventDefault(), t.stopPropagation(), !this.disabled)
+        this.$emit("submit", t);
+      else
+        return !1;
+    }
+  }
+}, m = ["disabled"], b = ["id"], f = ["for"], _ = ["id", "disabled", "value"], p = ["for"];
+function g(t, a, i, I, V, o) {
+  const d = e.resolveComponent("ArrowRight");
+  return e.openBlock(), e.createElementBlock("li", {
+    class: e.normalizeClass(["action", { "action--disabled": i.disabled }])
+  }, [
+    e.createElementVNode("span", {
+      class: "action-text-editable",
+      onClick: a[2] || (a[2] = (...n) => t.onClick && t.onClick(...n))
+    }, [
+      e.renderSlot(t.$slots, "icon", {}, () => [
+        e.createElementVNode("span", {
+          class: e.normalizeClass([[t.isIconUrl ? "action-text-editable__icon--url" : t.icon], "action-text-editable__icon"]),
+          style: e.normalizeStyle({ backgroundImage: t.isIconUrl ? "url(".concat(t.icon, ")") : null })
+        }, null, 6)
+      ], !0),
+      e.createElementVNode("form", {
+        ref: "form",
+        class: "action-text-editable__form",
+        disabled: i.disabled,
+        onSubmit: a[1] || (a[1] = e.withModifiers((...n) => o.onSubmit && o.onSubmit(...n), ["prevent"]))
+      }, [
+        e.createElementVNode("input", {
+          id: i.id,
+          type: "submit",
+          class: "action-text-editable__submit"
+        }, null, 8, b),
+        t.name ? (e.openBlock(), e.createElementBlock("label", {
+          key: 0,
+          class: "action-text-editable__name",
+          for: o.computedId
+        }, e.toDisplayString(t.name), 9, f)) : e.createCommentVNode("", !0),
+        e.createElementVNode("textarea", e.mergeProps({
+          id: o.computedId,
+          disabled: i.disabled,
+          value: i.modelValue
+        }, t.$attrs, {
+          class: ["action-text-editable__textarea", { focusable: o.isFocusable }],
+          onInput: a[0] || (a[0] = (...n) => o.onInput && o.onInput(...n))
+        }), null, 16, _),
+        e.withDirectives(e.createElementVNode("label", {
+          for: i.id,
+          class: "action-text-editable__label"
+        }, [
+          e.createVNode(d, { size: 20 })
+        ], 8, p), [
+          [e.vShow, !i.disabled]
+        ])
+      ], 40, m)
+    ])
+  ], 2);
+}
+const h = /* @__PURE__ */ c._export_sfc(u, [["render", g], ["__scopeId", "data-v-781fe40e"]]);
+exports.NcActionTextEditable = h;

package/dist/chunks/NcActionTextEditable-CWcNEnUL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionTextEditable-CWcNEnUL.cjs","sources":["../../src/components/NcActionTextEditable/NcActionTextEditable.vue"],"sourcesContent":["<!--\n  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n  -\n  - @author John Molakvoæ <skjnldsv@protonmail.com>\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<docs>\nThis component is made to be used inside of the [Actions](#Actions) component slots.\nAll undocumented attributes will be bound to the textarea. e.g. `maxlength`\n\n```\n<template>\n\t<NcActions>\n\t\t<NcActionTextEditable model-value=\"This is a textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable :disabled=\"true\" model-value=\"This is a disabled textarea\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t\t<NcActionTextEditable name=\"Please edit the text\" model-value=\"This is a textarea with name\">\n\t\t\t<template #icon>\n\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t</NcActions>\n</template>\n<script>\nimport Pencil from 'vue-material-design-icons/Pencil'\n\nexport default {\n\tcomponents: {\n\t\tPencil,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span class=\"action-text-editable\"\n\t\t\t@click=\"onClick\">\n\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span :class=\"[isIconUrl ? 'action-text-editable__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text-editable__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-text-editable__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<input :id=\"id\" type=\"submit\" class=\"action-text-editable__submit\">\n\n\t\t\t\t<!-- name -->\n\t\t\t\t<label v-if=\"name\"\n\t\t\t\t\tclass=\"action-text-editable__name\"\n\t\t\t\t\t:for=\"computedId\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</label>\n\n\t\t\t\t<textarea :id=\"computedId\"\n\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t:value=\"modelValue\"\n\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t:class=\"['action-text-editable__textarea', { focusable: isFocusable }]\"\n\t\t\t\t\t@input=\"onInput\" />\n\n\t\t\t\t<!-- allow the custom font to inject a ::before\n\t\t\t\t\tnot possible on input[type=submit] -->\n\t\t\t\t<label v-show=\"!disabled\" :for=\"id\" class=\"action-text-editable__label\">\n\t\t\t\t\t<ArrowRight :size=\"20\" />\n\t\t\t\t</label>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tArrowRight,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the text area\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'update:modelValue',\n\t\t'submit',\n\t],\n\n\tcomputed: {\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\n\t\tcomputedId() {\n\t\t\treturn GenRandomId()\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', event.target.value)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-text-editable {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\tline-height: $clickable-area;\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t/* Keep padding to define the width to\n\t\t\tassure correct position of a possible text */\n\t\tpadding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t&:deep(.material-design-icon) {\n\t\twidth: $clickable-area;\n\t\theight: $clickable-area;\n\t\topacity: $opacity_full;\n\n\t\t.material-design-icon__svg {\n\t\t\tvertical-align: middle;\n\t\t}\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\tflex: 1 1 auto;\n\t\tflex-direction: column;\n\n\t\tposition: relative;\n\t\tmargin: $input-margin 0;\n\t\tpadding-right: $icon-margin;\n\t}\n\n\t&__submit {\n\t\tposition: absolute;\n\t\tleft: -10000px;\n\t\ttop: auto;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t// bottom-right corner\n\t\tposition: absolute;\n\t\tright: $icon-margin + 1;\n\t\tbottom: 1px;\n\t\twidth: #{$clickable-area - $input-margin * 2};\n\t\theight: #{$clickable-area - $input-margin * 2};\n\t\tbox-sizing: border-box;\n\t\tmargin: 0;\n\t\tpadding: 7px 6px;\n\n\t\tborder: 0;\n\t\tborder-radius: 50%;\n\t\t/* Avoid background under border */\n\t\tbackground-color: var(--color-main-background);\n\t\tbackground-clip: padding-box;\n\n\t\t&, * {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n\n\t/* Inputs inside popover supports text, submit & reset */\n\t&__textarea {\n\t\tflex: 1 1 auto;\n\t\tcolor: inherit;\n\t\tborder-color: var(--color-border-maxcontrast);\n\n\t\tmin-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */\n\t\tmax-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */\n\t\t// block width widening\n\t\tmin-width: $clickable-area * 4;\n\t\twidth: 100% !important;\n\t\tmargin: 0;\n\n\t\t// if disabled, change cursor\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t/* only show confirm borders if input is not focused */\n\t\t&:not(:active):not(:hover):not(:focus) {\n\t\t\t&:invalid {\n\t\t\t\t& + .action-text-editable__label {\n\t\t\t\t\tbackground-color: var(--color-error);\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t&:active,\n\t\t\t\t&:hover,\n\t\t\t\t&:focus {\n\t\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t&:active,\n\t\t&:hover,\n\t\t&:focus {\n\t\t\t&:not(:disabled) + .action-text-editable__label {\n\t\t\t\t/* above previous input */\n\t\t\t\tz-index: 2;\n\n\t\t\t\tborder-color: var(--color-primary-element);\n\t\t\t\tborder-left-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-text-editable {\n\tmargin-bottom: $icon-margin - $input-margin;\n}\n\n// same for first item\nli:first-child > .action-text-editable {\n\tmargin-top: $icon-margin - $input-margin;\n}\n</style>\n"],"names":["_sfc_main","GenRandomId","event","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","vue","$props","_cache","args","_ctx","$options"],"mappings":";kNA2GAA,IAAA;AAAA;;;;;EASC,OAAA;AAAA;AAAA;AAAA;AAAA,IAIC,IAAA;AAAA;MAEC,SAAA,MAAA,YAAAC,EAAA,YAAA;AAAA;;;;;IAMD,UAAA;AAAA;;;;;;;;;;;EAaD,OAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA;EAGD,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOE,aAAA,CAAA,KAAA;AAAA;;AAIA,aAAAA,EAAA,YAAA;AAAA;;EAIF,SAAA;AAAA,IACC,QAAAC,GAAA;;;IAcA,SAAAA,GAAA;AAGC,UAFAA,EAAA,eAAA,wBAEA,CAAA,KAAA;;;;;;AAaH,GAjMAC,IAAA,CAAA,UAAA,GAAAC,IAAA,CAAA,IAAA,GAAAC,IAAA,CAAA,KAAA,GAAAC,IAAA,CAAA,MAAA,YAAA,OAAA,GAAAC,IAAA,CAAA,KAAA;;;;IA4DK,OAAAC,EAAA,eAAA,CAAA,UAAA,EAAA,oBAAAC,EAAA,SAAA,CAAA,CAAA;AAAA;;MACG,OAAA;AAAA,MACJ,SAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAC,EAAA,WAAAA,EAAA,QAAA,GAAAD,CAAA;AAAA;MAEDH,EAAA,WAAAI,EAAA,QAAA,QAAA,CAAA,GAAA,MAAA;AAAA;UACQ,OAAAJ,EAAA,eAAA,CAAA,CAAAI,EAAA,YAAA,oCAAAA,EAAA,IAAA,GAAA,4BAAA,CAAA;AAAA,UACL,OAAAJ,EAAA,eAAA,EAAA,iBAAAI,EAAA,YAAA,OAAA,OAAAA,EAAA,MAAA,OAAA,KAAA,CAAA;AAAA;;;QAKG,KAAA;AAAA,QACL,OAAA;AAAA,QACC,UAAAH,EAAA;AAAA;;;UAEO,IAAAA,EAAA;AAAA,UAAQ,MAAA;AAAA,UAAc,OAAA;AAAA,QA3ElC,GAAA,MAAA,GAAAL,CAAA;AAAA;;UA+EK,OAAA;AAAA,UACC,KAAAS,EAAA;AAAA,QACE,GAAAL,EAAA,gBAAAI,EAAA,IAAA,GAAA,GAAAP,CAAA,KAjFRG,EAAA,mBAAA,IAAA,EAAA;AAAA,QAoFIA,EAAA,mBAAA,YAAAA,EAAA,WAAA;AAAA,UAAW,IAAAK,EAAA;AAAA,UACT,UAAAJ,EAAA;AAAA,UACA,OAAAA,EAAA;AAAA;UAEA,OAAA,CAAA,kCAAA,EAAA,WAAAI,EAAA,YAAA,CAAA;AAAA,UACA,SAAAH,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,IAAAC,MAAAE,EAAA,WAAAA,EAAA,QAAA,GAAAF,CAAA;AAAA,QAzFN,CAAA,GAAA,MAAA,IAAAL,CAAA;AAAA;UA6F+B,KAAAG,EAAA;AAAA,UAAS,OAAA;AAAA;;QA7FxC,GAAA,GAAAF,CAAA,GAAA;AAAA;;MAAA,GAAA,IAAAJ,CAAA;AAAA;;;;;"}