Inuit Media Vue Component

BaseMedia.vue

<template>
  <div :class="classes">
    <div v-if="$slots.image" class="v-base-media__img">
      <slot name="image" />
    </div>
    <div v-if="$slots.default" class="v-base-media__body">
      <slot />
    </div>
  </div>
</template>

<script>
const avalibleSizes = [
  'zero',
  'base',
  'x-small',
  'small',
  'standard',
  'medium',
  'intermediate',
  'large',
  'x-large',
  'massive',
];

export default {
  name: 'BaseMedia',
  props: {
    size: { type: String, default: 'small', validator: (value) => avalibleSizes.includes(value) },
    reverse: { type: Boolean, default: false },
  },
  computed: {
    classes() {
      return [
        'v-base-media',
        { [`v-base-media--${this.size}`]: this.size },
        { 'v-base-media--reverse': this.reverse },
      ];
    },
  },
};
</script>

<style lang="scss">
/**
 * Place any image- and text-like content side-by-side, as per:
 * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 */
.v-base-media {
  $_self: &;
  @include inuit-clearfix();
  display: block;

  &__img {
    float: left;

    > img {
      display: block;
    }
  }

  &__body {
    overflow: hidden;
    display: block;

    &,
    > :last-child {
      margin-bottom: 0;
    }
  }

  /* Size variants
   ========================================================================== */

  /**
 * Modify the amount of space between our image and our text. We also have
 * reversible options for all available sizes.
 */
  @each $size, $spacing in $inuit-global-spacing-map {
    &--#{$size} {
      > #{$_self}__img {
        margin-right: $spacing;
      }

      &#{$_self}--reverse {
        > #{$_self}__img {
          margin-right: 0;
          margin-left: $spacing;
        }
      }
    }
  }

  /* Reversed base media
   ========================================================================== */
  &--reverse {
    > #{$_self}__img {
      float: right;
      margin-right: 0;
      margin-left: spacing-unit('small');
    }

    #{$_self}__body {
      text-align: right;
    }
  }
}
</style>