{"version":3,"file":"NcActionTextEditable-JRD-G0CT.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 v-model=\"text1\">\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 v-model=\"text2\" disabled>\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=\"text3\" v-model=\"text3\">\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\tdata() {\n\t\treturn {\n\t\t\ttext1: 'This is a textarea',\n\t\t\ttext2: 'This is a disabled textarea',\n\t\t\ttext3: 'This is a textarea with name',\n\t\t}\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=\"model\"\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<ArrowLeft v-if=\"isRTL\" :size=\"20\" />\n\t\t\t\t\t<ArrowRight v-else :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 { useModelMigration } from '../../composables/useModelMigration.ts'\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\n\nimport ArrowLeft from 'vue-material-design-icons/ArrowLeft.vue'\nimport ArrowRight from 'vue-material-design-icons/ArrowRight.vue'\n\nimport { isRTL } from '@nextcloud/l10n'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tArrowLeft,\n\t\tArrowRight,\n\t},\n\n\tmixins: [ActionTextMixin],\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\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 * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\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/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:value',\n\t\t/**\n\t\t * Emitted when the inputs value changes\n\t\t *\n\t\t * @type {string|Date}\n\t\t */\n\t\t'update:modelValue',\n\t\t/** Same as `update:modelValue` but with a different event name */\n\t\t'update:model-value',\n\t\t'submit',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('value', 'update:value')\n\t\treturn {\n\t\t\tmodel,\n\t\t\tisRTL: isRTL(),\n\t\t}\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\n\t\t\tthis.model = 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-inline-end: $icon-margin;\n\t}\n\n\t&__submit {\n\t\tposition: absolute;\n\t\tinset-inline-start: 0;\n\t\ttop: auto;\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\toverflow: hidden;\n\t\tz-index: -1;\n\t\topacity: 0;\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\tinset-inline-end: calc($icon-margin + 1px);\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-inline-start-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":[],"mappings":";;;;;;;AAsGA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA,CAAA,eAAA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,YAAA,YAAA;AAAA,MACA,WAAA,QAAA,GAAA,KAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AACA,UAAA,QAAA,kBAAA,SAAA,cAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA,OAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAA,OAAA;AAMA,WAAA,MAAA,SAAA,KAAA;AAEA,WAAA,QAAA,MAAA,OAAA;AAAA,IACA;AAAA,IACA,SAAA,OAAA;AACA,YAAA,eAAA;AACA,YAAA,gBAAA;AACA,UAAA,CAAA,KAAA,UAAA;AAMA,aAAA,MAAA,UAAA,KAAA;AAAA,MACA,OAAA;AAEA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}