@nextcloud/vue
Version:
Nextcloud vue components
1 lines • 2.62 kB
Source Map (JSON)
{"version":3,"file":"NcAppNavigationIconBullet-PrlhOoE9.mjs","sources":["../../src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.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### Bullet\nThis component is made to be used inside of the [NcAppNavigationItem](#NcAppNavigationItem) component slot: `icon`.\n\n```\n<template #icon>\n\t<NcAppNavigationIconBullet color=\"0082c9\" />\n</template>\n<template #icon>\n\t<NcAppNavigationIconBullet color=\"#0082c9\" />\n</template>\n\n```\n\n### AppNavigationItem example\n```\n<NcAppNavigationItem name=\"Entry 2\" :pinned=\"true\">\n\t<template #icon>\n\t\t<NcAppNavigationIconBullet color=\"0082c9\" />\n\t</template>\n</NcAppNavigationItem>\n```\n</docs>\n\n<template>\n\t<div class=\"app-navigation-entry__icon-bullet\" @click=\"onClick\">\n\t\t<div :style=\"{ backgroundColor: formattedColor }\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tname: 'NcAppNavigationIconBullet',\n\n\tprops: {\n\t\t/**\n\t\t * The color of the bullet point (as RGB HEX)\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\trequired: true,\n\t\t\tvalidator(color) {\n\t\t\t\t// #000, 000, #0082c9 and 0082c9\n\t\t\t\treturn /^#?([0-9A-F]{3}){1,2}$/i.test(color)\n\t\t\t},\n\t\t},\n\t},\n\n\temits: ['click'],\n\n\tcomputed: {\n\t\tformattedColor() {\n\t\t\tif (this.color.startsWith('#')) {\n\t\t\t\treturn this.color\n\t\t\t}\n\t\t\treturn '#' + this.color\n\t\t},\n\t},\n\n\tmethods: {\n\t\tonClick(e) {\n\t\t\tthis.$emit('click', e)\n\t\t},\n\t},\n\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.app-navigation-entry__icon-bullet {\n\tdisplay: block;\n\t// there is 2 margins\n\tpadding: calc($icon-margin + 1px);\n\tdiv {\n\t\twidth: $icon-size - 2px;\n\t\theight: $icon-size - 2px;\n\t\tcursor: pointer;\n\t\ttransition: background 100ms ease-in-out;\n\t\tborder: none;\n\t\tborder-radius: 50%;\n\t}\n}\n\n</style>\n"],"names":["_createElementBlock","_createElementVNode"],"mappings":";;AAoCA,MAAK,YAAU;AAAA,EACd,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIN,OAAO;AAAA,MACN,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU,OAAO;AAEhB,eAAO,0BAA0B,KAAK,KAAK;AAAA,MAC5C;AAAA;;EAIF,OAAO,CAAC,OAAO;AAAA,EAEf,UAAU;AAAA,IACT,iBAAiB;AAChB,UAAI,KAAK,MAAM,WAAW,GAAG,GAAG;AAC/B,eAAO,KAAK;AAAA,MACb;AACA,aAAO,MAAM,KAAK;AAAA,IACnB;AAAA;EAGD,SAAS;AAAA,IACR,QAAQ,GAAG;AACV,WAAK,MAAM,SAAS,CAAC;AAAA,IACtB;AAAA;AAGF;;sBAxCCA,mBAEM,OAAA;AAAA,IAFD,OAAM;AAAA,IAAqC,gDAAO,SAAA,WAAA,SAAA,QAAA,GAAA,IAAA;AAAA;IACtDC,mBAAoD,OAAA;AAAA,MAA9C,yCAA0B,SAAA,eAAc,CAAA;AAAA;;;;"}