Text Displays v1.0

The <e-text-display> component is a component that can be used for .

Usage

An unavailable has attributes that must be provided,

<e-text-display
  modelValue=''
/>

Attributes

modelValue | Type: String | Default: ''

Examples

Below a few interactive examples of unavailable can be found.

modelValue='Example textDisplay'

<e-text-display
  modelValue='Example textDisplay'
/>

Example textDisplay

Source Code

e-text-display.vue

<script lang="ts" setup>
import { computed } from 'vue';

import { Dictionary } from 'types/Dictionary';

export type Props = {
  modelValue: string;
  options?: Dictionary & {
    error?: boolean;
    retry?: boolean;
    success?: boolean;
    monospaced?: boolean;
  };
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  options: () => {
    return {
      monospaced: false
    };
  }
});

const text = computed(() => {
  return props.modelValue;
});

const classes = computed(() => {
  return {
    error: props.options?.error,
    retry: props.options?.retry,
    success: props.options?.success,
    monospaced: props.options.monospaced
  };
});
</script>

<template>
  <div
    class="e-text-display"
    :class="classes"
  >
    <span
      :title="text"
      v-text="text"
    />
  </div>
</template>

<style scoped lang="scss">
.e-text-display {
  font-family: var(--e-body-font-family);
  font-weight: normal;
  font-style: normal;
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;

  span {
    text-overflow: ellipsis;
    overflow: hidden;
    font-family: inherit;
  }

  &.success span {
    color: limegreen;
  }

  &.error span {
    color: red;
  }

  &.retry span {
    color: var(--e-accent);
  }

  &.monospaced {
    span {
      font-family: var(--e-code-font-family), 'Courier New';
      font-size: var(--e-code-font-size);
      line-height: var(--e-code-font-line-height);
      font-weight: var(--e-code-font-weight);
    }
  }
}
</style>