Booleans v1.0

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

Usage

An e-boolean has attributes that must be provided

<e-boolean
  :model-value=""
/>

Attributes

Value	Type	Optional	Default
modelValue	Boolean	yes	`false`

Examples

Below a few interactive examples of e-boolean can be found.

Default

<e-boolean/>

:model-value='true'

<e-boolean
  :model-value="true"
/>

Source Code

e-boolean.vue

<script setup lang="ts">
import EIcon from '../e-icon/e-icon.vue';

export type Props = {
  value?: boolean;
};

withDefaults(defineProps<Props>(), {
  value: false
});
</script>

<template>
  <div class="e-boolean">
    <e-icon
      :icon="['active']"
      style-key="boolean-display"
      :icon-state="value ? 'true' : 'false'"
    />

    <template id="boolean-slot">
      <slot :name="value ? 'active' : 'inactive'" />
    </template>
  </div>
</template>

<style scoped lang="scss">
.e-boolean {
  display: flex;
  flex-direction: column;
  text-align: left;
  font-size: 14px;

  svg {
    width: 24px;
    height: 24px;
  }

  span:not(:first-child):not(:last-child) {
    transition: all ease-in-out 50ms;
    margin-left: 1rem;

    &:hover {
      margin-left: 1.5rem;
      font-size: 120%;
    }
  }
}
</style>