yunohost-admin/app/src/components/globals/YListGroupItem.vue

<template>
  <BListGroupItem class="yuno-list-group-item" :class="_class" v-bind="$attrs">
    <div v-if="!noStatus" class="yuno-list-group-item-status">
      <YIcon v-if="_icon" :iname="_icon" :class="['icon-' + variant]" />
    </div>

    <div class="yuno-list-group-item-content">
      <slot name="default" />
    </div>
  </BListGroupItem>
</template>

<script>
import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'

export default {
  name: 'YListGroupItem',

  props: {
    variant: { type: String, default: 'white' },
    icon: { type: String, default: null },
    noIcon: { type: Boolean, default: false },
    noStatus: { type: Boolean, default: false },
    size: { type: String, default: 'md' },
    faded: { type: Boolean, default: false },
  },

  computed: {
    _icon() {
      return this.noIcon ? null : this.icon || DEFAULT_STATUS_ICON[this.variant]
    },

    _class() {
      const baseClass = 'yuno-list-group-item-'
      return [
        baseClass + this.size,
        baseClass + this.variant,
        { [baseClass + 'faded']: this.faded },
      ]
    },
  },
}
</script>

<style lang="scss" scoped>
.yuno-list-group-item {
  display: flex;
  padding: 0;

  &-status {
    width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &-content {
    width: 100%;
    padding: $list-group-item-padding-y $list-group-item-padding-x;
  }

  @each $color, $value in $theme-colors {
    &-#{$color} {
      color: theme-color-level($color, 6);

      [dark-theme='true'] & {
        color: theme-color-level($color, -6);
      }

      .yuno-list-group-item-status {
        background-color: $value;
        color: color-yiq($value);
      }
    }
  }

  &-sm,
  &-xs {
    font-size: $font-size-sm;

    .yuno-list-group-item-status {
      width: 1.25rem;
    }

    .yuno-list-group-item-content {
      padding: $tooltip-padding-y $tooltip-padding-x;
    }
  }

  &-xs {
    .yuno-list-group-item-status {
      width: 0.4rem;

      .icon {
        display: none;
      }
    }

    .yuno-list-group-item-content {
      color: $black;
    }
  }

  &-faded > * {
    opacity: 0.5;
  }
}
</style>