@nextcloud/vue/dist/chunks/NcAppNavigationNewItem-IzXE-EEq.mjs.map

Nextcloud vue components

{"version":3,"file":"NcAppNavigationNewItem-IzXE-EEq.mjs","sources":["../../src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n#### New Item element\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" @new-item=\"function(value){alert(value)}\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n\n#### New Item element with a loading animation instead of the icon\n```vue\n\t<template>\n\t\t<NcAppNavigationNewItem name=\"New Item\" :loading=\"true\">\n\t\t\t<template #icon>\n\t\t\t\t<Plus :size=\"20\" />\n\t\t\t</template>\n\t\t</NcAppNavigationNewItem>\n\t</template>\n\t<script>\n\timport Plus from 'vue-material-design-icons/Plus'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tPlus,\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li\n\t\tclass=\"app-navigation-entry\"\n\t\t:class=\"{\n\t\t\t'app-navigation-entry--newItemActive': newItemActive,\n\t\t}\">\n\t\t<!-- New Item -->\n\t\t<button class=\"app-navigation-entry-button\" @click=\"handleNewItem\">\n\t\t\t<span\n\t\t\t\tclass=\"app-navigation-entry-icon\"\n\t\t\t\t:class=\"{ [icon]: !loading }\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<slot v-else name=\"icon\" />\n\t\t\t</span>\n\n\t\t\t<span v-if=\"!newItemActive\" class=\"app-navigation-new-item__name\" :title=\"name\">\n\t\t\t\t{{ name }}\n\t\t\t</span>\n\n\t\t\t<!-- new Item input -->\n\t\t\t<span v-if=\"newItemActive\" class=\"newItemContainer\">\n\t\t\t\t<NcInputConfirmCancel\n\t\t\t\t\tref=\"newItemInput\"\n\t\t\t\t\tv-model=\"newItemValue\"\n\t\t\t\t\t:placeholder=\"editPlaceholder !== '' ? editPlaceholder : name\"\n\t\t\t\t\t@cancel=\"cancelNewItem\"\n\t\t\t\t\t@confirm=\"handleNewItemDone\" />\n\t\t\t</span>\n\t\t</button>\n\t</li>\n</template>\n\n<script>\nimport NcInputConfirmCancel from '../NcAppNavigationItem/NcInputConfirmCancel.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/index.ts'\n\nexport default {\n\tname: 'NcAppNavigationNewItem',\n\n\tcomponents: {\n\t\tNcInputConfirmCancel,\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * The name of the element.\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 * Refers to the icon on the left, this prop accepts a class\n\t\t * like 'icon-category-enabled'.\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Displays a loading animated icon on the left of the element\n\t\t * instead of the icon.\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Only for 'editable' items, sets label for the edit action button.\n\t\t */\n\t\teditLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Sets the placeholder text for the editing form.\n\t\t */\n\t\teditPlaceholder: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t},\n\n\temits: ['newItem'],\n\n\tdata() {\n\t\treturn {\n\t\t\tnewItemValue: '',\n\t\t\tnewItemActive: false,\n\t\t}\n\t},\n\n\tmethods: {\n\t\thandleNewItem() {\n\t\t\tif (!this.loading) {\n\t\t\t\tthis.newItemActive = true\n\t\t\t\tthis.$nextTick(() => {\n\t\t\t\t\tthis.$refs.newItemInput.focusInput()\n\t\t\t\t})\n\t\t\t}\n\t\t},\n\n\t\tcancelNewItem() {\n\t\t\tthis.newItemActive = false\n\t\t},\n\n\t\thandleNewItemDone() {\n\t\t\tthis.$emit('newItem', this.newItemValue)\n\t\t\tthis.newItemValue = ''\n\t\t\tthis.newItemActive = false\n\t\t},\n\t},\n}\n</script>\n\n<style scoped lang=\"scss\">\n@use '../../assets/NcAppNavigationItem.scss';\n\n.app-navigation-new-item__name {\n\toverflow: hidden;\n\tmax-width: 100%;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tpadding-inline-start: 7px;\n\tfont-size: 14px;\n}\n\n.newItemContainer {\n\twidth: calc(100% - var(--default-clickable-area));\n\tmargin: auto;\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_normalizeClass","_createBlock","_renderSlot","_openBlock","_createVNode"],"mappings":";;;;AAqFA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,YAAY;AAAA,IACX;AAAA,IACA;AAAA;EAGD,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,MAAM;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;;;;;IAOX,MAAM;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOV,SAAS;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,WAAW;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMV,iBAAiB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIX,OAAO,CAAC,SAAS;AAAA,EAEjB,OAAO;AACN,WAAO;AAAA,MACN,cAAc;AAAA,MACd,eAAe;AAAA,IAChB;AAAA,EACD;AAAA,EAEA,SAAS;AAAA,IACR,gBAAgB;AACf,UAAI,CAAC,KAAK,SAAS;AAClB,aAAK,gBAAgB;AACrB,aAAK,UAAU,MAAM;AACpB,eAAK,MAAM,aAAa,WAAU;AAAA,QACnC,CAAC;AAAA,MACF;AAAA,IACD;AAAA,IAEA,gBAAgB;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA,IAEA,oBAAoB;AACnB,WAAK,MAAM,WAAW,KAAK,YAAY;AACvC,WAAK,eAAe;AACpB,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAEF;;;;EAjG8B,OAAM;;;;;sBAnBnCA,mBA4BK,MAAA;AAAA,IA3BJ,uBAAM,wBAAsB;AAAA,6CACwB,MAAA;AAAA;;IAIpDC,mBAqBS,UAAA;AAAA,MArBD,OAAM;AAAA,MAA+B,gDAAO,SAAA,iBAAA,SAAA,cAAA,GAAA,IAAA;AAAA;MACnDA,mBAKO,QAAA;AAAA,QAJN,OAAKC,eAAA,CAAC,6BAA2B,EAAA,CACtB,OAAA,IAAI,IAAI,OAAA,SAAO,CAAA;AAAA;QACL,OAAA,wBAArBC,YAAgC,0BAAA,EAAA,KAAA,EAAA,CAAA,KAChCC,WAA2B,KAAA,QAAA,QAAA,EAAA,KAAA,EAAA,GAAA,QAAA,IAAA;AAAA;OAGf,MAAA,8BAAbJ,mBAEO,QAAA;AAAA;QAFqB,OAAM;AAAA,QAAiC,OAAO,OAAA;AAAA,yBACtE,OAAA,IAAI,GAAA,GAAA,UAAA;MAII,MAAA,iBAAZK,aAAAL,mBAOO,QAPP,YAOO;AAAA,QANNM,YAKgC,iCAAA;AAAA,UAJ/B,KAAI;AAAA,sBACK,MAAA;AAAA,uEAAA,MAAA,eAAY;AAAA,UACpB,aAAa,OAAA,oBAAe,KAAU,OAAA,kBAAkB,OAAA;AAAA,UACxD,UAAQ,SAAA;AAAA,UACR,WAAS,SAAA;AAAA;;;;;;"}