Vue Components

CodeBox.vue

<template>
  <code v-if="active" :class="`code-box${codeBoxVariationClass}`">{{ object | prettyjson }}</code>
</template>

<script>
const defaultObject = [
  { id: 1, title: 'Test', content: 'Sie haben kein Objekt übergeben. Bitte benutzen sie das Attribut :object um Ihr Objekt an die Komponente zu übergeben.' },
];

export default {
  name: 'CodeBox',

  defaultObject,

  computed: {
    codeBoxVariationClass() {
      let cssClass = '';
      if (this.type && this.type.length > 3) cssClass = ` code-box--${this.type}`;
      return cssClass;
    },
  },

  props: {
    active: {
      type: Boolean,
      default: false,
    },
    object: {
      type: [Array, Object],
      default: () => defaultObject,
    },
    type: {
      type: String,
    },
  },

  filters: {
    prettyjson: (value) => {
      if (!value) return '';
      return JSON.stringify(value, null, 4);
    },
  },
};
</script>

<style lang="scss" scoped>
.code-box {

  white-space: pre;
  font-size: 12px;
  font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console",
  "Lucida Sans Typewriter","DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono",
  "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  line-height: 1;
  color: #666;
  max-height: 360px;
  overflow: auto;
  display: block;
  background: #111;
  color: #fafafa;
  padding: 1em;
  box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.25);

  &--primary {
    background: #72282f;
  }

  &--secondary {
    background: #284172;
  }

  &--tertiary {
    background: #2d7228;
  }

}
</style>