@nextcloud/vue/dist/chunks/NcInputConfirmCancel.mjs.map

Nextcloud vue components

{"version":3,"file":"NcInputConfirmCancel.mjs","sources":["../../src/components/NcAppNavigationItem/NcInputConfirmCancel.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n# Usage\n\n```\n<NcInputConfirmCancel @confirm=\"alert('confirm')\" @cancel=\"alert('cancel')\" />\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-input-confirm\" :class=\"{ 'app-navigation-input-confirm--legacy': isLegacy34 }\">\n\t\t<form\n\t\t\t@submit.prevent=\"confirm\"\n\t\t\t@keydown.esc.exact.stop.prevent=\"cancel\"\n\t\t\t@click.stop.prevent>\n\t\t\t<input\n\t\t\t\tref=\"input\"\n\t\t\t\tv-model=\"valueModel\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tclass=\"app-navigation-input-confirm__input\"\n\t\t\t\t:placeholder=\"placeholder\">\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelConfirm\"\n\t\t\t\ttype=\"submit\"\n\t\t\t\tvariant=\"primary\"\n\t\t\t\t@click.stop.prevent=\"confirm\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconArrowRight :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\n\t\t\t<NcButton\n\t\t\t\t:aria-label=\"labelCancel\"\n\t\t\t\ttype=\"reset\"\n\t\t\t\t:variant=\"primary ? 'primary' : 'tertiary'\"\n\t\t\t\t@click.stop.prevent=\"cancel\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcButton>\n\t\t</form>\n\t</div>\n</template>\n\n<script>\nimport IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport { t } from '../../l10n.ts'\nimport { isLegacy34 } from '../../utils/legacy.ts'\nimport NcButton from '../NcButton/index.js'\n\nexport default {\n\tname: 'NcInputConfirmCancel',\n\n\tcomponents: {\n\t\tIconArrowRight,\n\t\tIconClose,\n\t\tNcButton,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * If this element is used on a primary element set to true for primary styling.\n\t\t */\n\t\tprimary: {\n\t\t\tdefault: false,\n\t\t\ttype: Boolean,\n\t\t},\n\n\t\t/**\n\t\t * Placeholder of the edit field\n\t\t */\n\t\tplaceholder: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\n\t\t/**\n\t\t * The current name (model value)\n\t\t */\n\t\tmodelValue: {\n\t\t\tdefault: '',\n\t\t\ttype: String,\n\t\t},\n\t},\n\n\temits: [\n\t\t'cancel',\n\t\t'confirm',\n\t\t'update:modelValue',\n\t],\n\n\tsetup() {\n\t\treturn { isLegacy34 }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tlabelConfirm: t('Confirm changes'),\n\t\t\tlabelCancel: t('Cancel changes'),\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tvalueModel: {\n\t\t\tget() { return this.modelValue },\n\t\t\tset(newValue) {\n\t\t\t\tthis.$emit('update:modelValue', newValue)\n\t\t\t},\n\t\t},\n\t},\n\n\tmethods: {\n\t\tconfirm() {\n\t\t\tthis.$emit('confirm')\n\t\t},\n\n\t\tcancel() {\n\t\t\tthis.$emit('cancel')\n\t\t},\n\n\t\tfocusInput() {\n\t\t\tthis.$refs.input.focus()\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n$input-height: 34px;\n$input-padding: 7px;\n$input-margin: 5px;\n\n.app-navigation-input-confirm {\n\tflex: 1 0 100%;\n\twidth: 100%;\n\n\tform {\n\t\tdisplay: flex;\n\t}\n\n\t&__input {\n\t\theight: $input-height;\n\t\tflex: 1 1 100%;\n\t\tfont-size: 100% !important;\n\t\tmargin: $input-margin !important;\n\t\tmargin-inline-start: -1px - $input-padding !important;\n\t\tpadding: $input-padding !important;\n\n\t\t&:active,\n\t\t&:focus,\n\t\t&:hover {\n\t\t\toutline: none;\n\t\t\tbackground-color: var(--color-main-background);\n\t\t\tcolor: var(--color-main-text);\n\t\t\tborder-color: var(--color-primary-element);\n\t\t}\n\t}\n\n\t// New design (NC34+): square confirm/cancel buttons with consistent gaps.\n\t&:not(&--legacy) {\n\t\tform {\n\t\t\talign-items: center;\n\t\t\tgap: $input-margin;\n\t\t\tpadding-inline-end: $input-margin;\n\t\t}\n\n\t\t.app-navigation-input-confirm__input {\n\t\t\tmargin-inline-end: 0 !important;\n\t\t}\n\n\t\t:deep(.button-vue) {\n\t\t\twidth: $input-height !important;\n\t\t\tmin-width: $input-height !important;\n\t\t\theight: $input-height !important;\n\t\t\tflex: 0 0 $input-height;\n\t\t}\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_createVNode"],"mappings":";;;;;;;;AAwDA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,SAAS;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA;;;;IAMP,aAAa;AAAA,MACZ,SAAS;AAAA,MACT,MAAM;AAAA;;;;IAMP,YAAY;AAAA,MACX,SAAS;AAAA,MACT,MAAM;AAAA;;EAIR,OAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA;EAGD,QAAQ;AACP,WAAO,EAAE,WAAS;AAAA,EACnB;AAAA,EAEA,OAAO;AACN,WAAO;AAAA,MACN,cAAc,EAAE,iBAAiB;AAAA,MACjC,aAAa,EAAE,gBAAgB;AAAA,IAChC;AAAA,EACD;AAAA,EAEA,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM;AAAE,eAAO,KAAK;AAAA,MAAW;AAAA,MAC/B,IAAI,UAAU;AACb,aAAK,MAAM,qBAAqB,QAAQ;AAAA,MACzC;AAAA;;EAIF,SAAS;AAAA,IACR,UAAU;AACT,WAAK,MAAM,SAAS;AAAA,IACrB;AAAA,IAEA,SAAS;AACR,WAAK,MAAM,QAAQ;AAAA,IACpB;AAAA,IAEA,aAAa;AACZ,WAAK,MAAM,MAAM,MAAK;AAAA,IACvB;AAAA;AAEF;;;;;;sBApHCA,mBAgCM,OAAA;AAAA,IAhCD,OAAKC,eAAA,CAAC,gCAA8B,EAAA,wCAAmD,OAAA,YAAU,CAAA;AAAA;IACrGC,mBA8BO,QAAA;AAAA,MA7BL,+DAAgB,SAAA,WAAA,SAAA,QAAA,GAAA,IAAA,GAAO,CAAA,SAAA,CAAA;AAAA,MACvB,yEAAgC,SAAA,UAAA,SAAA,OAAA,GAAA,IAAA,GAAM,CAAA,SAAA,QAAA,SAAA,CAAA,GAAA,CAAA,KAAA,CAAA;AAAA,MACtC,iDAAD,MAAA;AAAA,MAAA,GAAmB,CAAA,QAAA,SAAA,CAAA;AAAA;qBACnBA,mBAK4B,SAAA;AAAA,QAJ3B,KAAI;AAAA,qEACK,SAAA,aAAU;AAAA,QACnB,MAAK;AAAA,QACL,OAAM;AAAA,QACL,aAAa,OAAA;AAAA;qBAHL,SAAA,UAAU;AAAA;MAKpBC,YAQW,qBAAA;AAAA,QAPT,cAAY,MAAA;AAAA,QACb,MAAK;AAAA,QACL,SAAQ;AAAA,QACP,uBAAoB,SAAA,SAAO,CAAA,QAAA,SAAA,CAAA;AAAA;QACjB,cACV,MAA6B;AAAA,UAA7BA,YAA6B,2BAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;MAI3BA,YAQW,qBAAA;AAAA,QAPT,cAAY,MAAA;AAAA,QACb,MAAK;AAAA,QACJ,SAAS,OAAA,UAAO,YAAA;AAAA,QAChB,uBAAoB,SAAA,QAAM,CAAA,QAAA,SAAA,CAAA;AAAA;QAChB,cACV,MAAwB;AAAA,UAAxBA,YAAwB,sBAAA,EAAZ,MAAM,GAAE,CAAA;AAAA;;;;;;;"}