Merge pull request #4739 from nextcloud-libraries/feat/2154/user-bubble

.eslintrc.js

@@ -22,8 +22,6 @@ module.exports = {
  'src/components/NcContent/*.vue',
  'src/components/NcDashboard*/*.vue',
  'src/components/NcRich*/**/*.vue',
- 'src/components/NcUserBubble*/*.vue',
- 'src/components/NcVNodes*/*.vue',
  'src/utils/IsMobileState.js',
  ],
  parserOptions: {

src/components/NcUserBubble/NcUserBubble.vue

@@ -77,7 +77,7 @@ export default {
 
 </docs>
 <template>
- <component :is="isPopoverComponent"
+ <component :is="!!$slots.default ? 'NcPopover' : 'NcUserBubbleDiv'"
  trigger="hover focus"
  :shown="open"
  class="user-bubble__wrapper"
@@ -108,7 +108,7 @@ export default {
  </span>
 
  <!-- @slot Optional slot just after the name -->
- <span v-if="$slots.name" class="user-bubble__secondary">
+ <span v-if="!!$slots.name" class="user-bubble__secondary">
  <slot name="name" />
  </span>
  </component>
@@ -211,20 +211,6 @@ export default {
  'update:open',
  ],
  computed: {
- /**
- * If userbubble is empty, let's NOT
- * use the Popover component
- * We need a component instead of a simple div here,
- * because otherwise the trigger template will not be shown.
- *
- * @return {string} 'Popover' or 'UserBubbleDiv'
- */
- isPopoverComponent() {
- return !this.popoverEmpty
- ? 'NcPopover'
- : 'NcUserBubbleDiv'
- },
-
  /**
  * Is the provided avatar url valid or not
  *
@@ -259,13 +245,6 @@ export default {
  return this.hasUrl ? 'a' : 'div'
  },
 
- popoverEmpty() {
- if ('default' in this.$slots) {
- return false
- }
- return true
- },
-
  styles() {
  return {
  content: {

src/components/index.js

@@ -94,4 +94,4 @@ export { default as NcSettingsSelectGroup } from './NcSettingsSelectGroup/index.
 export { default as NcTextArea } from './NcTextArea/index.js'
 export { default as NcTextField } from './NcTextField/index.js'
 export { default as NcTimezonePicker } from './NcTimezonePicker/index.js'
-// export { default as NcUserBubble } from './NcUserBubble/index.js'
+export { default as NcUserBubble } from './NcUserBubble/index.js'

styleguide.config.js

@@ -116,11 +116,10 @@ module.exports = async () => {
  'src/components/NcSettings*/*.vue',
  'src/components/NcTextArea/*.vue',
  'src/components/NcUserBubble/NcUserBubbleDiv.vue',
+ 'src/components/NcVNodes*/*.vue',
 
  // Not yet adjusted for vue3
  'src/components/NcRichContenteditable*/*.vue',
- 'src/components/NcUserBubble*/*.vue',
- 'src/components/NcVNodes*/*.vue',
  ],
  sections: [
  {