@nextcloud/vue

Version:

Nextcloud vue components

github.com/nextcloud-libraries/nextcloud-vue

1 lines • 10.9 kB

Source Map (JSON)

{"version":3,"file":"NcActionTextEditable-CoYA6jeC.mjs","sources":["../../src/components/NcActionTextEditable/NcActionTextEditable.vue"],"sourcesContent":["\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<IconPencilOutline :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<IconPencilOutline :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<IconPencilOutline :size=\"20\" />\n\t\t\t</template>\n\t\t</NcActionTextEditable>\n\t</NcActions>\n</template>\n<script>\nimport IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'\n\nexport default {\n\tcomponents: {\n\t\tIconPencilOutline,\n\t},\n}\n</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span\n\t\t\tclass=\"action-text-editable\"\n\t\t\t@click=\"onClick\">\n\t\t\t\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<span\n\t\t\t\t\t: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\n\t\t\t<form\n\t\t\t\tref=\"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\n\t\t\t\t<label\n\t\t\t\t\tv-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\n\t\t\t\t\t:id=\"computedId\"\n\t\t\t\t\tclass=\"action-text-editable__textarea\"\n\t\t\t\t\t:class=\"[{ focusable: isFocusable }]\"\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@input=\"onInput\" />\n\n\t\t\t\t\n\t\t\t\t<label v-show=\"!disabled\" :for=\"id\" class=\"action-text-editable__label\">\n\t\t\t\t\t<NcIconSvgWrapper directional :path=\"mdiArrowRight\" />\n\t\t\t\t</label>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport { mdiArrowRight } from '@mdi/js'\nimport ActionTextMixin from '../../mixins/actionText.js'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'\n\nexport default {\n\tname: 'NcActionTextEditable',\n\n\tcomponents: {\n\t\tNcIconSvgWrapper,\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-' + createElementId(),\n\t\t\tvalidator: (id) => id.trim() !== '',\n\t\t},\n\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\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\tsetup() {\n\t\treturn {\n\t\t\tmdiArrowRight,\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 createElementId()\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\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@use '../../assets/inputs.scss';\n@use '../../assets/action.scss' as *;\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":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_normalizeStyle","_mergeProps","_createVNode"],"mappings":";;;;;;AA+FA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA;EAGD,QAAQ,CAAC,eAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,IAAI;AAAA,MACH,MAAM;AAAA,MACN,SAAS,MAAM,YAAY,gBAAe;AAAA,MAC1C,WAAW,CAAC,OAAO,GAAG,KAAI,MAAO;AAAA;;;;IAMlC,UAAU;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,YAAY;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA;EAGD,QAAQ;AACP,WAAO;AAAA,MACN;AAAA,IACD;AAAA,EACD;AAAA,EAEA,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMT,cAAc;AACb,aAAO,CAAC,KAAK;AAAA,IACd;AAAA,IAEA,aAAa;AACZ,aAAO,gBAAe;AAAA,IACvB;AAAA;EAGD,SAAS;AAAA,IACR,QAAQ,OAAO;AAMd,WAAK,MAAM,SAAS,KAAK;AAMzB,WAAK,MAAM,qBAAqB,MAAM,OAAO,KAAK;AAAA,IACnD;AAAA,IAEA,SAAS,OAAO;AACf,YAAM,eAAc;AACpB,YAAM,gBAAe;AACrB,UAAI,CAAC,KAAK,UAAU;AAMnB,aAAK,MAAM,UAAU,KAAK;AAAA,MAC3B,OAAO;AAEN,eAAO;AAAA,MACR;AAAA,IACD;AAAA;AAEF;;;;;;;;sBApJCA,mBA4CK,MAAA;AAAA,IA5CD,OAAKC,eAAA,CAAC,UAAQ,EAAA,oBAA+B,OAAA,UAAQ,CAAA;AAAA;IACxDC,mBA0CO,QAAA;AAAA,MAzCN,OAAM;AAAA,MACL,gDAAO,KAAA,WAAA,KAAA,QAAA,GAAA,IAAA;AAAA;MAERC,WAKO,yBALP,MAKO;AAAA,QAJND,mBAGsC,QAAA;AAAA,UAFpC,OAAKD,eAAA,CAAA,CAAG,KAAA,YAAS,oCAAuC,KAAA,IAAI,GAEvD,4BAA4B,CAAA;AAAA,UADjC,OAAKG,eAAA,EAAA,iBAAqB,KAAA,YAAS,OAAU,KAAA,IAAI,MAAA,KAAA,CAAA;AAAA;;MAKpDF,mBA6BO,QAAA;AAAA,QA5BN,KAAI;AAAA,QACJ,OAAM;AAAA,QACL,UAAU,OAAA;AAAA,QACV,+DAAgB,SAAA,YAAA,SAAA,SAAA,GAAA,IAAA,GAAQ,CAAA,SAAA,CAAA;AAAA;QACzBA,mBAAmE,SAAA;AAAA,UAA3D,IAAI,OAAA;AAAA,UAAI,MAAK;AAAA,UAAS,OAAM;AAAA;QAI7B,KAAA,qBADPF,mBAKQ,SAAA;AAAA;UAHP,OAAM;AAAA,UACL,KAAK,SAAA;AAAA,2BACH,KAAA,IAAI,GAAA,GAAA,UAAA;QAGRE,mBAOoB,YAPpBG,WAOoB;AAAA,UANlB,IAAI,SAAA;AAAA,UACL,OAAK,CAAC,kCAAgC,CAAA,EAAA,WAChB,SAAA,YAAW,CAAA,CAAA;AAAA,UAChC,UAAU,OAAA;AAAA,UACV,OAAO,OAAA;AAAA,WACA,KAAA,QAAM;AAAA,UACb,gDAAO,SAAA,WAAA,SAAA,QAAA,GAAA,IAAA;AAAA;uBAITH,mBAEQ,SAAA;AAAA,UAFmB,KAAK,OAAA;AAAA,UAAI,OAAM;AAAA;UACzCI,YAAsD,6BAAA;AAAA,YAApC,aAAA;AAAA,YAAa,MAAM,OAAA;AAAA;;mBADtB,OAAA,QAAQ;AAAA;;;;;;"}