quasar/src/components/chat/QChatMessage.json

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

{
  "meta": {
    "docsUrl": "https://v2.quasar.dev/vue-components/chat"
  },

  "props": {
    "sent": {
      "type": "Boolean",
      "desc": "Render as a sent message (so from current user)",
      "category": "content"
    },

    "label": {
      "type": "String",
      "desc": "Renders a label header/section only",
      "examples": [ "Friday, 18th" ],
      "category": "content"
    },

    "bg-color": {
      "extends": "color",
      "desc": "Color name (from the Quasar Color Palette) for chat bubble background",
      "category": "style"
    },

    "text-color": {
      "extends": "text-color",
      "desc": "Color name (from the Quasar Color Palette) for chat bubble text",
      "category": "style"
    },

    "name": {
      "type": "String",
      "desc": "Author's name",
      "examples": [ "John Doe" ],
      "category": "content"
    },

    "avatar": {
      "type": "String",
      "desc": "URL to the avatar image of the author",
      "transformAssetUrls": true,
      "examples": [
        "(public folder) src=\"boy-avatar.png\"",
        "(assets folder) src=\"~assets/boy-avatar.png\"",
        "(relative path format) :src=\"require('./my_img.jpg')\"",
        "(URL) src=\"https://picsum.photos/500/300\""
      ],
      "category": "content"
    },

    "text": {
      "type": "Array",
      "desc": "Array of strings that are the message body. Strings are not sanitized (see details in docs)",
      "examples": [ ":text=\"['How are you?']\"", ":text=\"['I\\'m good, thank you!', 'And you?']\"" ],
      "category": "content"
    },

    "stamp": {
      "type": "String",
      "desc": "Creation timestamp",
      "examples": [ "13:55", "Yesterday at 13:51" ],
      "category": "content"
    },

    "size": {
      "type": "String",
      "desc": "1-12 out of 12 (same as col-*)",
      "examples": [ "4", "6", "12" ],
      "category": "style"
    },

    "label-html": {
      "extends": "html",
      "desc": "Render the label as HTML; This can lead to XSS attacks so make sure that you sanitize the message first"
    },

    "name-html": {
      "extends": "html",
      "desc": "Render the name as HTML; This can lead to XSS attacks so make sure that you sanitize the message first"
    },

    "text-html": {
      "extends": "html",
      "desc": "Render the text as HTML; This can lead to XSS attacks so make sure that you sanitize the message first"
    },

    "stamp-html": {
      "extends": "html",
      "desc": "Render the stamp as HTML; This can lead to XSS attacks so make sure that you sanitize the message first"
    }
  },

  "slots": {
    "default": {
      "desc": "You can use this slot to define a custom message (overrides props)"
    },

    "avatar": {
      "desc": "Slot for avatar; Suggestion: QAvatar, img"
    },

    "name": {
      "desc": "Slot for name; Overrides the 'name' prop"
    },

    "stamp": {
      "desc": "Slot for stamp; Overrides the 'stamp' prop"
    },

    "label": {
      "desc": "Slot for label; Overrides the 'label' prop"
    }
  }
}