Colors and Decoration (:colors)

In lists and tree structures, it is often necessary to highlight rows or cards differently depending on the underlying data. For this purpose, we use the :colors property of components that support decoration (such as Downline, Visual Tree, and similar components).

Card / row background coloring:

<DownlineTable :colors="{ ... }" />

  colors = {
  self: 'rgba(10, 230, 10, 0.3)',
  front: 'rgba(10, 230, 10, 0.1)',
  deadend: 'rgba(255, 10, 10, 0.1)',

  fields: [
    ['vm.number', '>', 10, 'rgba(255, 255, 10, 0.1)'],
    ['p.firstname', '=', 'Gru', 'blue'],
  ]

  // JavaScript expressions: [expression, color]
  // For JavaScript expressions, use backticks in cases like:
  // p.title.toString().includes(`A`)
  // Use `A` instead of 'A' or "A" for proper insertion into the HTML template

  // Multiple conditions
  ['m.PV > 1000 && m.Status === `Active`', 'green'],

  // String methods
  ['p.firstname.toLowerCase().includes(`alex`)', 'blue'],

  // Complex conditions with multiple properties
  ['(m.PV > 1000 || m.Bonus > 500) && p.country === `USA`', 'gold'],

  // Template string usage
  ['p.title.toString().includes(`A`)', 'purple']
}

The colors object supports four optional properties. Three of them are predefined named rules:

• self — the current user’s own row
• front — a row belonging to the user’s frontline
• deadend — a position with no children

The fourth property, fields, is a list of conditional coloring rules. Rules are evaluated from top to bottom. Each rule compares any requested property with a static value and assigns a corresponding color. Supported comparison operators include greater than, less than, and equal.

This makes it possible to color positions based on any field: rank, name, or any dynamic value from the marketing plan or user profile.

Advanced decoration configuration

In addition to providing a simple color string for the card or table row background, the value in the rules table can also be an object. This object allows you to define not only the background color, but also the title color, text color, and a badge icon URL.

The exact behavior (what is colored and where the icon appears) depends on the component itself, but the structure is universal and can be extended when needed.

colors = {
  self: 'rgba(10, 230, 10, 0.3)',
  front: 'rgba(10, 230, 10, 0.1)',

  deadend: {
    background: 'red',
    badge: 'http://site/deadman.png'
  },

  fields: [
    ['m.PV', '>', 1000, { badge: 'http://site/winner.png' }],
    ['p.firstname', '=', 'Vasya', {
      title: 'yellow',
      text: 'green',
      background: 'blue',
      badge: 'http://site/vasya.png'
    }]
  ]
}

In summary, you can define self, front, deadend, or a set of custom rules to control coloring based on any property. If the color value is a string, it is applied as a background color. If it is an object, you can configure background, title color, text color, and an icon (badge).

For example, you can color a rank range from 0–3 with one background color, ranks from 4–10 with another color, and starting from rank 11 display a crown icon.

Badges in more detail

A badge in decoration schemes is a small image or text displayed over the user avatar, either in one of the corners or centered at the top or bottom.

A badge can be defined in a simple one-line form by specifying an image URL or an arbitrary string. If the string looks like a URL, an image badge is added to the top-right corner of the avatar with a circular border, default background (bg-accent), and a size of 40 px.

If the string does not look like a URL, it is treated as text and displayed at the bottom center.

For more advanced customization, badges can be defined in an expanded form as an array of objects with individual fields, as shown in the example below:

<ui-leader-board
  :board-id="514"
  :avatar-size="60"
  :colors="{
    fields: [
      ['vmlb.position', '=', 1, {
        background: 'rgba(246, 236, 34, 0.1)',
        badge: [{
          id: 'crown',
          imgUrl: '/img/crown.png',
          imgSize: 60,
          position: 'top-middle',
          offsetY: -40
        }]
      }],
      ['vmlb.accountId', '=', '$myAccount', {
        badge: [{
          id: 'you',
          text: 'YOU: {{vmlb.accountTitle}}', // templates are supported here
          backgroundColor: 'red',
          color: 'white',
          position: 'bottom-middle',
          offsetY: -10,
          borderRadius: '5px'
        }]
      }]
    ]
  }"
></ui-leader-board>

Any field may be omitted; the only required value is either text or imgUrl. The default values are shown below.

const textDefaults: Badge = {
  id: '',
  text: undefined,
  position: 'bottom-middle',
  color: 'rgba(var(--v-theme-on-warning))',
  backgroundColor: 'rgba(var(--v-theme-warning))',
  borderRadius: '5px',
  padding: 5,
  fontSize: 12,
  offsetY: -10
};

const imgDefaults: Badge = {
  id: '',
  imgUrl: undefined,
  position: 'top-right',
  imgSize: 40,
  offsetX: -20,
  offsetY: -20,
  borderRadius: '50%',
  backgroundColor: 'rgba(var(--v-theme-accent))'
};