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

package/dist/chunks/NcActionRadio-CV0AtyQD.mjs

@@ -0,0 +1,128 @@
+import '../assets/NcActionRadio-CsMcYeMT.css';
+import { A as ActionGlobalMixin } from "./actionGlobal-BZFdtdJL.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, withKeys, withModifiers, toDisplayString, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcActionRadio",
+  mixins: [ActionGlobalMixin],
+  inject: {
+    isInSemanticMenu: {
+      from: "NcActions:isSemanticMenu",
+      default: false
+    }
+  },
+  props: {
+    /**
+     * id attribute of the radio element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + GenRandomId(),
+      validator: (id) => id.trim() !== ""
+    },
+    /**
+     * checked state of the the radio element
+     */
+    modelValue: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Define if this radio is part of a set.
+     * Checking the radio will disable all the
+     * others with the same name.
+     */
+    name: {
+      type: String,
+      required: true
+    },
+    /**
+     * value of the radio input
+     */
+    value: {
+      type: [String, Number],
+      default: ""
+    },
+    /**
+     * disabled state of the radio element
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    "change",
+    "update:modelValue"
+  ],
+  computed: {
+    /**
+     * determines if the action is focusable
+     *
+     * @return {boolean} is the action focusable ?
+     */
+    isFocusable() {
+      return !this.disabled;
+    },
+    /**
+     * aria-checked attribute for role="menuitemcheckbox"
+     *
+     * @return {'true'|'false'|undefined} aria-checked value if needed
+     */
+    ariaChecked() {
+      if (this.isInSemanticMenu) {
+        return this.modelValue ? "true" : "false";
+      }
+      return void 0;
+    }
+  },
+  methods: {
+    toggleInput() {
+      this.$refs.label.click();
+    },
+    onChange(event) {
+      this.$emit("update:modelValue", this.$refs.radio.checked);
+      this.$emit("change", event);
+    }
+  }
+};
+const _hoisted_1 = ["role"];
+const _hoisted_2 = ["aria-checked"];
+const _hoisted_3 = ["id", "disabled", "checked", "name", "value"];
+const _hoisted_4 = ["for"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("li", {
+    class: normalizeClass(["action", { "action--disabled": $props.disabled }]),
+    role: $options.isInSemanticMenu && "presentation"
+  }, [
+    createElementVNode("span", {
+      class: "action-radio",
+      role: "menuitemradio",
+      "aria-checked": $options.ariaChecked
+    }, [
+      createElementVNode("input", {
+        id: $props.id,
+        ref: "radio",
+        disabled: $props.disabled,
+        checked: $props.modelValue,
+        name: $props.name,
+        value: $props.value,
+        class: normalizeClass([{ focusable: $options.isFocusable }, "radio action-radio__radio"]),
+        type: "radio",
+        onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers((...args) => $options.toggleInput && $options.toggleInput(...args), ["exact", "prevent"]), ["enter"])),
+        onChange: _cache[1] || (_cache[1] = (...args) => $options.onChange && $options.onChange(...args))
+      }, null, 42, _hoisted_3),
+      createElementVNode("label", {
+        ref: "label",
+        for: $props.id,
+        class: "action-radio__label"
+      }, toDisplayString(_ctx.text), 9, _hoisted_4),
+      createCommentVNode("", true)
+    ], 8, _hoisted_2)
+  ], 10, _hoisted_1);
+}
+const NcActionRadio = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-bc30d98a"]]);
+export {
+  NcActionRadio as N
+};

package/dist/chunks/NcActionRadio-CV0AtyQD.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionRadio-CV0AtyQD.mjs","sources":["../../src/components/NcActionRadio/NcActionRadio.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\nUsually, you will provide a name prop to bind the radio together.\nSo that only one of each name set can be selected at the same time.\n\n```vue\n\t<NcActions>\n\t\t<NcActionRadio @change=\"alert('(un)checked !')\" name=\"uniqueId\">First choice</NcActionRadio>\n\t\t<NcActionRadio value=\"second\" name=\"uniqueId\" @change=\"alert('(un)checked !')\">Second choice</NcActionRadio>\n\t\t<NcActionRadio :model-value=\"true\" name=\"uniqueId\" @change=\"alert('(un)checked !')\">Third choice (checked)</NcActionRadio>\n\t\t<NcActionRadio :disabled=\"true\" name=\"uniqueId\" @change=\"alert('(un)checked !')\">Second choice (disabled)</NcActionRadio>\n\t</NcActions>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<span class=\"action-radio\" role=\"menuitemradio\" :aria-checked=\"ariaChecked\">\n\t\t\t<input :id=\"id\"\n\t\t\t\tref=\"radio\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t:checked=\"modelValue\"\n\t\t\t\t:name=\"name\"\n\t\t\t\t:value=\"value\"\n\t\t\t\t:class=\"{ focusable: isFocusable }\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tclass=\"radio action-radio__radio\"\n\t\t\t\t@keydown.enter.exact.prevent=\"toggleInput\"\n\t\t\t\t@change=\"onChange\">\n\t\t\t<label ref=\"label\" :for=\"id\" class=\"action-radio__label\">{{ text }}</label>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nexport default {\n\tname: 'NcActionRadio',\n\n\tmixins: [ActionGlobalMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the radio 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\n\t\t/**\n\t\t * checked state of the the radio element\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Define if this radio is part of a set.\n\t\t * Checking the radio will disable all the\n\t\t * others with the same name.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t},\n\n\t\t/**\n\t\t * value of the radio input\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Number],\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * disabled state of the radio element\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\temits: [\n\t\t'change',\n\t\t'update:modelValue',\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\t/**\n\t\t * aria-checked attribute for role=\"menuitemcheckbox\"\n\t\t *\n\t\t * @return {'true'|'false'|undefined} aria-checked value if needed\n\t\t */\n\t\t ariaChecked() {\n\t\t\tif (this.isInSemanticMenu) {\n\t\t\t\treturn this.modelValue ? 'true' : 'false'\n\t\t\t}\n\t\t\treturn undefined\n\t\t},\n\t},\n\n\tmethods: {\n\t\ttoggleInput(/* event */) {\n\t\t\t// by clicking we also trigger the change event\n\t\t\tthis.$refs.label.click()\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted when the radio state is changed\n\t\t\t *\n\t\t\t * @type {boolean}\n\t\t\t */\n\t\t\tthis.$emit('update:modelValue', this.$refs.radio.checked)\n\n\t\t\t/**\n\t\t\t * Emitted when the radio state is changed\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n.action-radio {\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: var(--default-clickable-area);\n\n\t/* checkbox/radio fixes */\n\t&__radio {\n\t\tposition: absolute;\n\t\ttop: auto;\n\t\tleft: -10000px;\n\n\t\toverflow: hidden;\n\n\t\twidth: 1px;\n\t\theight: 1px;\n\t}\n\n\t&__label {\n\t\tdisplay: flex;\n\t\talign-items: center; // align radio to text\n\n\t\twidth: 100%;\n\t\tpadding: 0 !important;\n\t\tpadding-right: $icon-margin !important;\n\n\t\t// (34 -14) / 2 = 10 same as ncactioncheckbox\n\t\t&::before {\n\t\t\tmargin: calc((var(--default-clickable-area) - 14px) / 2) !important;\n\t\t}\n\t}\n\n\t&--disabled {\n\t\t&,\n\t\t.action-radio__label {\n\t\t\tcursor: pointer;\n\t\t}\n\t}\n}\n\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_withKeys","_withModifiers","_toDisplayString","_createCommentVNode"],"mappings":"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"}

package/dist/chunks/NcActionRouter-RKft3XO3.mjs

@@ -0,0 +1,81 @@
+import '../assets/NcActionRouter-CflTO8Z-.css';
+import { A as ActionTextMixin } from "./actionText-aI0owku1.mjs";
+import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, renderSlot, createElementVNode, normalizeClass, normalizeStyle, toDisplayString, createCommentVNode } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcActionRouter",
+  mixins: [ActionTextMixin],
+  inject: {
+    isInSemanticMenu: {
+      from: "NcActions:isSemanticMenu",
+      default: false
+    }
+  },
+  props: {
+    /**
+     * router-link to prop [https://router.vuejs.org/api/#to](https://router.vuejs.org/api/#to)
+     */
+    to: {
+      type: [String, Object],
+      default: "",
+      required: true
+    }
+  }
+};
+const _hoisted_1 = ["role"];
+const _hoisted_2 = {
+  key: 0,
+  class: "action-router__longtext-wrapper"
+};
+const _hoisted_3 = { class: "action-router__name" };
+const _hoisted_4 = ["textContent"];
+const _hoisted_5 = ["textContent"];
+const _hoisted_6 = {
+  key: 2,
+  class: "action-router__text"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_RouterLink = resolveComponent("RouterLink");
+  return openBlock(), createElementBlock("li", {
+    class: "action",
+    role: $options.isInSemanticMenu && "presentation"
+  }, [
+    createVNode(_component_RouterLink, {
+      to: $props.to,
+      "aria-label": _ctx.ariaLabel,
+      title: _ctx.title,
+      class: "action-router focusable",
+      rel: "nofollow noreferrer noopener",
+      role: $options.isInSemanticMenu && "menuitem",
+      onClick: _ctx.onClick
+    }, {
+      default: withCtx(() => [
+        renderSlot(_ctx.$slots, "icon", {}, () => [
+          createElementVNode("span", {
+            class: normalizeClass([[_ctx.isIconUrl ? "action-router__icon--url" : _ctx.icon], "action-router__icon"]),
+            style: normalizeStyle({ backgroundImage: _ctx.isIconUrl ? `url(${_ctx.icon})` : null }),
+            "aria-hidden": "true"
+          }, null, 6)
+        ], true),
+        _ctx.name ? (openBlock(), createElementBlock("span", _hoisted_2, [
+          createElementVNode("strong", _hoisted_3, toDisplayString(_ctx.name), 1),
+          _cache[0] || (_cache[0] = createElementVNode("br", null, null, -1)),
+          createElementVNode("span", {
+            class: "action-router__longtext",
+            textContent: toDisplayString(_ctx.text)
+          }, null, 8, _hoisted_4)
+        ])) : _ctx.isLongText ? (openBlock(), createElementBlock("span", {
+          key: 1,
+          class: "action-router__longtext",
+          textContent: toDisplayString(_ctx.text)
+        }, null, 8, _hoisted_5)) : (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(_ctx.text), 1)),
+        createCommentVNode("", true)
+      ]),
+      _: 3
+    }, 8, ["to", "aria-label", "title", "role", "onClick"])
+  ], 8, _hoisted_1);
+}
+const NcActionRouter = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-4d03878a"]]);
+export {
+  NcActionRouter as N
+};

package/dist/chunks/NcActionRouter-RKft3XO3.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionRouter-RKft3XO3.mjs","sources":["../../src/components/NcActionRouter/NcActionRouter.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<li class=\"action\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<RouterLink :to=\"to\"\n\t\t\t:aria-label=\"ariaLabel\"\n\t\t\t:title=\"title\"\n\t\t\tclass=\"action-router focusable\"\n\t\t\trel=\"nofollow noreferrer noopener\"\n\t\t\t:role=\"isInSemanticMenu && 'menuitem'\"\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-router__icon--url' : icon]\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-router__icon\"\n\t\t\t\t\taria-hidden=\"true\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span v-if=\"name\"\n\t\t\t\tclass=\"action-router__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-router__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-router__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-router__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-router__text\">{{ text }}</span>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</RouterLink>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\n\nexport default {\n\tname: 'NcActionRouter',\n\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * router-link to prop [https://router.vuejs.org/api/#to](https://router.vuejs.org/api/#to)\n\t\t */\n\t\tto: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: '',\n\t\t\trequired: true,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action-item('router');\n@include action--disabled;\n\n</style>\n"],"names":["_createElementBlock","_createVNode","_withCtx","_renderSlot","_createElementVNode","_normalizeClass","_normalizeStyle","_openBlock","_toDisplayString","_createCommentVNode"],"mappings":";;;AAqDA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,QAAQ,CAAC,eAAe;AAAA,EAExB,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,IAAI;AAAA,MACH,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT,UAAU;AAAA,IACV;AAAA,EACD;AACF;AA3EA,MAAA,aAAA,CAAA,MAAA;;EAAA,KAAA;AAAA,EAwBI,OAAM;;AACE,MAAA,aAAA,EAAA,OAAM,sBAAqB;AAzBvC,MAAA,aAAA,CAAA,aAAA;AAAA,MAAA,aAAA,CAAA,aAAA;;EAAA,KAAA;AAAA,EA0CgB,OAAM;;;;sBApCrBA,mBAyCK,MAAA;AAAA,IAzCD,OAAM;AAAA,IAAU,MAAM,SAAgB,oBAAA;AAAA;IACzCC,YAuCa,uBAAA;AAAA,MAvCA,IAAI,OAAE;AAAA,MACjB,cAAY,KAAS;AAAA,MACrB,OAAO,KAAK;AAAA,MACb,OAAM;AAAA,MACN,KAAI;AAAA,MACH,MAAM,SAAgB,oBAAA;AAAA,MACtB,SAAO,KAAO;AAAA;MAblB,SAAAC,QAeG,MAKO;AAAA,QALPC,WAKO,yBALP,MAKO;AAAA,UAJNC,mBAGsB,QAAA;AAAA,YAHf,OAhBXC,eAgBmB,CAAA,CAAA,KAAA,YAAyC,6BAAA,KAAA,IAAI,GAErD,qBAAqB,CAAA;AAAA,YAD1B,OAjBNC,eAAA,EAAA,iBAiBgC,KAAS,YAAA,OAAU,KAAI,IAAA,MAAA,KAAA,CAAA;AAAA,YAElD,eAAY;AAAA;;QAIF,KAAI,QAAhBC,aAAAP,mBASO,QATP,YASO;AAAA,UAPNI,mBAES,UAFT,YAESI,gBADL,KAAI,IAAA,GAAA,CAAA;AAAA,oCAERJ,mBAAI,MAAA,MAAA,MAAA,EAAA;AAAA,UAGJA,mBAAsD,QAAA;AAAA,YAAhD,OAAM;AAAA,YA/BhB,aA+B0CI,gBAAa,KAAD,IAAA;AAAA,UA/BtD,GAAA,MAAA,GAAA,UAAA;AAAA,cAqCoB,KAAU,2BAA3BR,mBAEiB,QAAA;AAAA,UAvCpB,KAAA;AAAA,UAsCI,OAAM;AAAA,UAtCV,aAuCIQ,gBAAa,KAAD,IAAA;AAAA,QAvChB,GAAA,MAAA,GAAA,UAAA,mBA0CGR,mBAA0D,QAA1D,YAA0DQ,gBAAd,KAAI,IAAA,GAAA,CAAA;AAAA,QA1CnDC,mBAAA,IAAA,IAAA;AAAA;MAAA,GAAA;AAAA;EAAA,GAAA,GAAA,UAAA;;;"}

package/dist/chunks/NcActionText-ChktUmp9.mjs

@@ -0,0 +1,63 @@
+import '../assets/NcActionText-CV2sRLti.css';
+import { A as ActionTextMixin } from "./actionText-aI0owku1.mjs";
+import { openBlock, createElementBlock, createElementVNode, renderSlot, normalizeClass, normalizeStyle, createCommentVNode, toDisplayString } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcActionText",
+  mixins: [ActionTextMixin],
+  inject: {
+    isInSemanticMenu: {
+      from: "NcActions:isSemanticMenu",
+      default: false
+    }
+  }
+};
+const _hoisted_1 = ["role"];
+const _hoisted_2 = {
+  key: 0,
+  class: "action-text__longtext-wrapper"
+};
+const _hoisted_3 = { class: "action-text__name" };
+const _hoisted_4 = ["textContent"];
+const _hoisted_5 = ["textContent"];
+const _hoisted_6 = {
+  key: 2,
+  class: "action-text__text"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("li", {
+    class: "action",
+    role: $options.isInSemanticMenu && "presentation"
+  }, [
+    createElementVNode("span", {
+      class: "action-text",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+    }, [
+      renderSlot(_ctx.$slots, "icon", {}, () => [
+        _ctx.icon !== "" ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          class: normalizeClass([[_ctx.isIconUrl ? "action-text__icon--url" : _ctx.icon], "action-text__icon"]),
+          "aria-hidden": "true",
+          style: normalizeStyle({ backgroundImage: _ctx.isIconUrl ? `url(${_ctx.icon})` : null })
+        }, null, 6)) : createCommentVNode("", true)
+      ], true),
+      _ctx.name ? (openBlock(), createElementBlock("span", _hoisted_2, [
+        createElementVNode("strong", _hoisted_3, toDisplayString(_ctx.name), 1),
+        _cache[1] || (_cache[1] = createElementVNode("br", null, null, -1)),
+        createElementVNode("span", {
+          class: "action-text__longtext",
+          textContent: toDisplayString(_ctx.text)
+        }, null, 8, _hoisted_4)
+      ])) : _ctx.isLongText ? (openBlock(), createElementBlock("span", {
+        key: 1,
+        class: "action-text__longtext",
+        textContent: toDisplayString(_ctx.text)
+      }, null, 8, _hoisted_5)) : (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(_ctx.text), 1)),
+      createCommentVNode("", true)
+    ])
+  ], 8, _hoisted_1);
+}
+const NcActionText = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-824615f4"]]);
+export {
+  NcActionText as N
+};

package/dist/chunks/NcActionText-ChktUmp9.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionText-ChktUmp9.mjs","sources":["../../src/components/NcActionText/NcActionText.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<li class=\"action\" :role=\"isInSemanticMenu && 'presentation'\">\n\t\t<span class=\"action-text\"\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 v-if=\"icon !== ''\"\n\t\t\t\t\t:class=\"[isIconUrl ? 'action-text__icon--url' : icon]\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\tclass=\"action-text__icon\" />\n\t\t\t</slot>\n\n\t\t\t<!-- long text with name -->\n\t\t\t<span v-if=\"name\"\n\t\t\t\tclass=\"action-text__longtext-wrapper\">\n\t\t\t\t<strong class=\"action-text__name\">\n\t\t\t\t\t{{ name }}\n\t\t\t\t</strong>\n\t\t\t\t<br>\n\t\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t\t<span class=\"action-text__longtext\" v-text=\"text\" />\n\t\t\t</span>\n\n\t\t\t<!-- long text only -->\n\t\t\t<!-- white space is shown on longtext, so we can't\n\t\t\tput {{ text }} on a new line for code readability -->\n\t\t\t<span v-else-if=\"isLongText\"\n\t\t\t\tclass=\"action-text__longtext\"\n\t\t\t\tv-text=\"text\" />\n\n\t\t\t<!-- default text display -->\n\t\t\t<span v-else class=\"action-text__text\">{{ text }}</span>\n\n\t\t\t<!-- fake slot to gather inner text -->\n\t\t\t<slot v-if=\"false\" />\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport ActionTextMixin from '../../mixins/actionText.js'\n\nexport default {\n\tname: 'NcActionText',\n\n\tmixins: [ActionTextMixin],\n\n\tinject: {\n\t\tisInSemanticMenu: {\n\t\t\tfrom: 'NcActions:isSemanticMenu',\n\t\t\tdefault: false,\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/action';\n@include action-active;\n@include action-item('text');\n@include action--disabled;\n\n.action-text {\n\t&,\n\tspan {\n\t\tcursor: default;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_renderSlot","_normalizeClass","_normalizeStyle","_createCommentVNode","_openBlock","_toDisplayString"],"mappings":";;;AAiDA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,QAAQ,CAAC,eAAe;AAAA,EAExB,QAAQ;AAAA,IACP,kBAAkB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACT;AAAA,EACD;AACF;AA5DA,MAAA,aAAA,CAAA,MAAA;;EAAA,KAAA;AAAA,EAoBI,OAAM;;AACE,MAAA,aAAA,EAAA,OAAM,oBAAmB;AArBrC,MAAA,aAAA,CAAA,aAAA;AAAA,MAAA,aAAA,CAAA,aAAA;;EAAA,KAAA;AAAA,EAsCgB,OAAM;;;sBAhCrBA,mBAqCK,MAAA;AAAA,IArCD,OAAM;AAAA,IAAU,MAAM,SAAgB,oBAAA;AAAA;IACzCC,mBAmCO,QAAA;AAAA,MAnCD,OAAM;AAAA,MACV,gDAAO,KAAO,WAAA,KAAA,QAAA,GAAA,IAAA;AAAA;MAEfC,WAMO,yBANP,MAMO;AAAA,QALM,KAAI,SAAA,mBAAhBF,mBAI6B,QAAA;AAAA,UAfjC,KAAA;AAAA,UAYM,OAZNG,eAYc,CAAA,CAAA,KAAA,YAAuC,2BAAA,KAAA,IAAI,GAG9C,mBAAmB,CAAA;AAAA,UAFzB,eAAY;AAAA,UACX,OAdNC,eAAA,EAAA,iBAcgC,KAAS,YAAA,OAAU,KAAI,IAAA,MAAA,KAAA,CAAA;AAAA,uBAdvDC,mBAAA,IAAA,IAAA;AAAA;MAmBe,KAAI,QAAhBC,aAAAN,mBASO,QATP,YASO;AAAA,QAPNC,mBAES,UAFT,YAESM,gBADL,KAAI,IAAA,GAAA,CAAA;AAAA,kCAERN,mBAAI,MAAA,MAAA,MAAA,EAAA;AAAA,QAGJA,mBAAoD,QAAA;AAAA,UAA9C,OAAM;AAAA,UA3BhB,aA2BwCM,gBAAa,KAAD,IAAA;AAAA,QA3BpD,GAAA,MAAA,GAAA,UAAA;AAAA,YAiCoB,KAAU,2BAA3BP,mBAEiB,QAAA;AAAA,QAnCpB,KAAA;AAAA,QAkCI,OAAM;AAAA,QAlCV,aAmCIO,gBAAa,KAAD,IAAA;AAAA,MAnChB,GAAA,MAAA,GAAA,UAAA,mBAsCGP,mBAAwD,QAAxD,YAAwDO,gBAAd,KAAI,IAAA,GAAA,CAAA;AAAA,MAtCjDF,mBAAA,IAAA,IAAA;AAAA;EAAA,GAAA,GAAA,UAAA;;;"}

package/dist/chunks/NcActionTextEditable-D3Iix8Je.mjs

@@ -0,0 +1,130 @@
+import '../assets/NcActionTextEditable-Nufxk13g.css';
+import { A as ActionTextMixin } from "./actionText-aI0owku1.mjs";
+import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
+import { A as ArrowRight } from "./ArrowRight-CCodNfTT.mjs";
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, normalizeStyle, withModifiers, toDisplayString, createCommentVNode, mergeProps, withDirectives, createVNode, vShow } from "vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = {
+  name: "NcActionTextEditable",
+  components: {
+    ArrowRight
+  },
+  mixins: [ActionTextMixin],
+  props: {
+    /**
+     * id attribute of the checkbox element
+     */
+    id: {
+      type: String,
+      default: () => "action-" + GenRandomId(),
+      validator: (id) => id.trim() !== ""
+    },
+    /**
+     * disabled state of the text area
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 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 GenRandomId();
+    }
+  },
+  methods: {
+    onInput(event) {
+      this.$emit("input", event);
+      this.$emit("update:modelValue", event.target.value);
+    },
+    onSubmit(event) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!this.disabled) {
+        this.$emit("submit", event);
+      } else {
+        return false;
+      }
+    }
+  }
+};
+const _hoisted_1 = ["disabled"];
+const _hoisted_2 = ["id"];
+const _hoisted_3 = ["for"];
+const _hoisted_4 = ["id", "disabled", "value"];
+const _hoisted_5 = ["for"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ArrowRight = resolveComponent("ArrowRight");
+  return openBlock(), createElementBlock("li", {
+    class: normalizeClass(["action", { "action--disabled": $props.disabled }])
+  }, [
+    createElementVNode("span", {
+      class: "action-text-editable",
+      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+    }, [
+      renderSlot(_ctx.$slots, "icon", {}, () => [
+        createElementVNode("span", {
+          class: normalizeClass([[_ctx.isIconUrl ? "action-text-editable__icon--url" : _ctx.icon], "action-text-editable__icon"]),
+          style: normalizeStyle({ backgroundImage: _ctx.isIconUrl ? `url(${_ctx.icon})` : null })
+        }, null, 6)
+      ], true),
+      createElementVNode("form", {
+        ref: "form",
+        class: "action-text-editable__form",
+        disabled: $props.disabled,
+        onSubmit: _cache[1] || (_cache[1] = withModifiers((...args) => $options.onSubmit && $options.onSubmit(...args), ["prevent"]))
+      }, [
+        createElementVNode("input", {
+          id: $props.id,
+          type: "submit",
+          class: "action-text-editable__submit"
+        }, null, 8, _hoisted_2),
+        _ctx.name ? (openBlock(), createElementBlock("label", {
+          key: 0,
+          class: "action-text-editable__name",
+          for: $options.computedId
+        }, toDisplayString(_ctx.name), 9, _hoisted_3)) : createCommentVNode("", true),
+        createElementVNode("textarea", mergeProps({
+          id: $options.computedId,
+          disabled: $props.disabled,
+          value: $props.modelValue
+        }, _ctx.$attrs, {
+          class: ["action-text-editable__textarea", { focusable: $options.isFocusable }],
+          onInput: _cache[0] || (_cache[0] = (...args) => $options.onInput && $options.onInput(...args))
+        }), null, 16, _hoisted_4),
+        withDirectives(createElementVNode("label", {
+          for: $props.id,
+          class: "action-text-editable__label"
+        }, [
+          createVNode(_component_ArrowRight, { size: 20 })
+        ], 8, _hoisted_5), [
+          [vShow, !$props.disabled]
+        ])
+      ], 40, _hoisted_1)
+    ])
+  ], 2);
+}
+const NcActionTextEditable = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-b406d881"]]);
+export {
+  NcActionTextEditable as N
+};

package/dist/chunks/NcActionTextEditable-D3Iix8Je.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NcActionTextEditable-D3Iix8Je.mjs","sources":["../../src/components/NcActionTextEditable/NcActionTextEditable.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\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: var(--default-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: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-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: var(--default-clickable-area);\n\t\theight: var(--default-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: calc($icon-margin + 1);\n\t\tbottom: 1px;\n\t\twidth: calc(var(--default-clickable-area) - $input-margin * 2);\n\t\theight: calc(var(--default-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: calc(var(--default-clickable-area) * 2 - $input-margin * 2); /* twice the element margin-y */\n\t\tmax-height: calc(var(--default-clickable-area) * 3 - $input-margin * 2); /* twice the element margin-y */\n\t\t// block width widening\n\t\tmin-width: calc(var(--default-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: calc($icon-margin - $input-margin);\n}\n\n// same for first item\nli:first-child > .action-text-editable {\n\tmargin-top: calc($icon-margin - $input-margin);\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_normalizeStyle","_withModifiers","_toDisplayString","_createCommentVNode","_mergeProps","_createVNode"],"mappings":"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"}