@nextcloud/vue

Version:

Nextcloud vue components

github.com/nextcloud-libraries/nextcloud-vue

1 lines • 6.58 kB

Source Map (JSON)

{"version":3,"file":"NcCounterBubble-CxxHHh8i.mjs","sources":["../../src/components/NcCounterBubble/NcCounterBubble.vue"],"sourcesContent":["\n\n<docs>\n\n### Default usage\n\nNcCounterBubble displays a number from the `count` prop in a bubble.\n\nBy default, the number is **humanized** according to Nextcloud user's locale setting. Humanization can be disabled via `raw` prop.\n\n```vue\n<template>\n\t<table>\n\t\t<tr>\n\t\t\t<th>count</th>\n\t\t\t<th>default</th>\n\t\t\t<th>raw</th>\n\t\t</tr>\n\t\t<tr v-for=\"num in numbers\" :key=\"num\">\n\t\t\t<td>{{ num }}</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"num\" />\n\t\t\t</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"num\" raw />\n\t\t\t</td>\n\t\t</tr>\n\t</table>\n</template>\n\n<script>\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tnumbers: [1, 9, 75, 450, 1042, 1750, 1999, 14567, 14567890, 2000000008],\n\t\t}\n\t},\n}\n</script>\n\n<style scoped>\ntable {\n\tborder-collapse: collapse;\n}\n\nth,\ntd {\n\tborder: 1px solid var(--color-border);\n\tpadding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 2);\n}\n\nth {\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n```\n\n### Styles\n\nUse different styles for different types of counters.\n\n```\n<template>\n\t<table>\n\t\t<tr>\n\t\t\t<th>type</th>\n\t\t\t<th>counter</th>\n\t\t\t<th>Usage example</th>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>'' (default)</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"3\" />\n\t\t\t</td>\n\t\t\t<td></td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>outlined</td>\n\t\t\t<td><NcCounterBubble :count=\"3\" type=\"outlined\" /></td>\n\t\t\t<td>Team/group mentions</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>highlighted</td>\n\t\t\t<td>\n\t\t\t\t<NcCounterBubble :count=\"3\" type=\"highlighted\" />\n\t\t\t</td>\n\t\t\t<td>Direct mentions</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>outlined active</td>\n\t\t\t<td class=\"active-like\">\n\t\t\t\t<NcCounterBubble :count=\"3\" type=\"outlined\" active />\n\t\t\t</td>\n\t\t\t<td>Same as \"outlined\", but in an \"active\" container</td>\n\t\t</tr>\n\t\t<tr>\n\t\t\t<td>highlighted active</td>\n\t\t\t<td class=\"active-like\">\n\t\t\t\t<NcCounterBubble :count=\"3\" type=\"highlighted\" active />\n\t\t\t</td>\n\t\t\t<td>Same as \"highlighted\", but in an \"active\" container</td>\n\t\t</tr>\n\t</table>\n</template>\n\n<style scoped>\ntable {\n\tborder-collapse: collapse;\n}\n\nth,\ntd {\n\tborder: 1px solid var(--color-border);\n\tpadding: var(--default-grid-baseline) calc(var(--default-grid-baseline) * 2);\n\n\t&.active-like {\n\t\tbackground-color: var(--color-primary-element);\n\t}\n}\n\nth {\n\tcolor: var(--color-text-maxcontrast);\n}\n</style>\n```\n\n### Custom content (removed)\n\nIn v8 it was possible to pass any custom content via the default slot. This feature has been removed. Use `count` prop for numbers or [NcChip](#/Components/NcChip) component for a custom content.\n</docs>\n\n<script setup lang=\"ts\">\nimport { getCanonicalLocale } from '@nextcloud/l10n'\nimport { computed } from 'vue'\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * The count to display in the counter bubble.\n\t */\n\tcount: number\n\n\t/**\n\t * Specifies whether the component is used within a component that is\n\t * active and therefore has a primary background. Inverts the color of\n\t * this component when that is the case.\n\t */\n\tactive?: boolean\n\n\t/**\n\t * Visual appearence of the counter bubble\n\t */\n\ttype?: 'highlighted' | 'outlined' | ''\n\n\t/**\n\t * Disables humanization to display count as it is.\n\t */\n\traw?: boolean\n}>(), {\n\ttype: '',\n})\n\nconst humanizedCount = computed(() => {\n\tif (props.raw) {\n\t\treturn props.count.toString()\n\t}\n\n\tconst formatter = new Intl.NumberFormat(getCanonicalLocale(), {\n\t\tnotation: 'compact',\n\t\tcompactDisplay: 'short',\n\t})\n\n\treturn formatter.format(props.count)\n})\n\nconst originalCountAsTitleIfNeeded = computed(() => {\n\tif (props.raw) {\n\t\treturn\n\t}\n\n\tconst countAsString = props.count.toString()\n\t// If unchanged then there is no need for the title\n\tif (countAsString === humanizedCount.value) {\n\t\treturn\n\t}\n\n\treturn countAsString\n})\n</script>\n\n<template>\n\t<div\n\t\tclass=\"counter-bubble__counter\"\n\t\t:class=\"{\n\t\t\tactive,\n\t\t\t'counter-bubble__counter--highlighted': type === 'highlighted',\n\t\t\t'counter-bubble__counter--outlined': type === 'outlined',\n\t\t}\"\n\t\t:title=\"originalCountAsTitleIfNeeded\">\n\t\t{{ humanizedCount }}\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n.counter-bubble__counter {\n\t--counter-bubble-height: 22px; // ~ 1cap + 2 * 1.5 * grid\n\tfont-size: var(--font-size-small, 13px);\n\toverflow: hidden;\n\twidth: fit-content;\n\tmin-width: var(--counter-bubble-height); // Make it not narrower than a circle\n\ttext-align: center;\n\tline-height: var(--counter-bubble-height); // Expand line-height to full height to center text vertically\n\tpadding: 0 calc(1.5 * var(--default-grid-baseline));\n\tborder-radius: 0.5lh;\n\tbackground-color: var(--color-primary-element-light);\n\tfont-weight: bold;\n\tcolor: var(--color-primary-element-light-text);\n\n\t& .active {\n\t\tcolor: var(--color-main-background);\n\t\tbackground-color: var(--color-primary-element-light);\n\t}\n\n\t&--highlighted {\n\t\tcolor: var(--color-primary-element-text);\n\t\tbackground-color: var(--color-primary-element);\n\t}\n\n\t&--highlighted.active {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground-color: var(--color-main-background);\n\t}\n\n\t&--outlined {\n\t\tcolor: var(--color-primary-element);\n\t\tbackground: transparent;\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n\n\t&--outlined.active {\n\t\tcolor: var(--color-main-background);\n\t\tbox-shadow: inset 0 0 0 2px;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","active","type"],"mappings":";;;;;;;;;;;;;AA0IA,UAAM,QAAQ;AA0Bd,UAAM,iBAAiB,SAAS,MAAM;AACrC,UAAI,MAAM,KAAK;AACd,eAAO,MAAM,MAAM,SAAA;AAAA,MACpB;AAEA,YAAM,YAAY,IAAI,KAAK,aAAa,sBAAsB;AAAA,QAC7D,UAAU;AAAA,QACV,gBAAgB;AAAA,MAAA,CAChB;AAED,aAAO,UAAU,OAAO,MAAM,KAAK;AAAA,IACpC,CAAC;AAED,UAAM,+BAA+B,SAAS,MAAM;AACnD,UAAI,MAAM,KAAK;AACd;AAAA,MACD;AAEA,YAAM,gBAAgB,MAAM,MAAM,SAAA;AAElC,UAAI,kBAAkB,eAAe,OAAO;AAC3C;AAAA,MACD;AAEA,aAAO;AAAA,IACR,CAAC;;0BAIAA,mBASM,OAAA;AAAA,QARL,uBAAM,2BAAyB;AAAA,kBAClBC,KAAAA;AAAAA,kDAAmDC,KAAAA,SAAI;AAAA,+CAA4DA,KAAAA,SAAI;AAAA,QAAA;QAKnI,OAAO,6BAAA;AAAA,MAAA,mBACL,eAAA,KAAc,GAAA,IAAA,UAAA;AAAA;;;;"}