e-card v1.0

<script setup lang="ts">
import { computed, ref } from 'vue';
import { isEmpty, merge } from 'lodash-es';

import { FunctionModel, Theme, ThemeStyle } from 'types';

import EHeader from '../e-header/e-header.vue';

export type Props = {
  icon?: string;
  header?: string;
  theme?: Theme;
  type?: ThemeStyle;
  headTextColor?: string;
  contentTextColor?: string;
  collapsible?: boolean;
  subText?: string;
  subTextColor?: string;
  backgroundColor?: string;
  borderColor?: string;
  functionList?: FunctionModel[];
};
const props = withDefaults(defineProps<Props>(), {
  icon: null,
  header: 'default header text',
  theme: Theme.Primary,
  type: ThemeStyle.Border,
  headTextColor: '',
  contentTextColor: null,
  collapsible: false,
  subText: null,
  subTextColor: '',
  backgroundColor: '',
  borderColor: '',
  functionList: () => {
    return [] as FunctionModel[];
  }
});

const emit = defineEmits<{
  (e: 'emit:function', func: FunctionModel): void;
}>();

const contentStyle = computed(() => {
  if (!props.contentTextColor) return null;

  return {
    color: props.contentTextColor
  };
});

const headerStyle = computed(() => {
  if (!props.borderColor) return null;

  return {
    backgroundColor: props.borderColor
  };
});

const cardStyle = computed(() => {
  if (!props.backgroundColor && !props.borderColor) {
    return null;
  }

  return {
    backgroundColor: props.backgroundColor,
    borderColor: props.borderColor
  };
});

const cardClasses = computed(() => {
  return [
    isEmpty(props.backgroundColor) ? `e-card-${props.theme ?? Theme.Primary}` : 'e-card-custom',
    props.type ?? ThemeStyle.Border
  ];
});

const headTextColor = computed(() => {
  if (!isEmpty(props.headTextColor)) return props.headTextColor;

  return 'var(--e-gray-0)';
});

const isOpen = ref(true);
const collapseFunction = computed(() => {
  return {
    emitKey: 'toggle',
    icon: 'chevron-right',
    key: 'toggle',
    title: 'toggle',
    rotation: isOpen.value ? 90 : 0,
    meta: {}
  } as FunctionModel;
});

const cardFunctions = computed(() => {
  const result: FunctionModel[] = [];

  if (!isEmpty(props.functionList)) {
    merge(result, props.functionList);
  }

  if (props.collapsible) result.push(collapseFunction.value);

  return result;
});

function handleCollapse() {
  isOpen.value = !isOpen.value;
}

function handleEmit(func: FunctionModel) {
  if (props.collapsible && func.emitKey === 'toggle') handleCollapse();

  emit('emit:function', func);
}
</script>

<template>
  <div class="e-card-container">
    <div
      class="e-card"
      :class="cardClasses"
      :style="cardStyle"
    >
      <e-header
        class="e-card-header"
        :style="headerStyle"
        :icon="icon"
        :color="headTextColor"
        :text="header"
        :sub-text="subText"
        :sub-text-color="subTextColor"
        :type="type"
        :collapsible="collapsible"
        :function-list="cardFunctions"
        :aria-expanded="isOpen"
        aria-controls="card-content"
        @emit:function="handleEmit"
        @emit:collapse="handleCollapse"
      />

      <div
        v-show="isOpen"
        id="card-content"
        class="e-card-content"
        :style="contentStyle"
      >
        <slot name="default" />
      </div>

      <div class="e-card-footer">
        <slot name="footer" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
@mixin e-card-color($border-color, $text-color, $background-color) {
  border-color: $border-color;
  background-color: $background-color;

  .e-card-header {
    background-color: $border-color;
  }

  .e-card-content {
    color: $text-color;
  }

  &.solid {
    background-color: $border-color;
  }
}

.e-card-container {
  height: fit-content;
  width: 100%;
  min-width: 270px;
  max-width: 1200px;
  overflow: hidden;

  .e-card {
    width: 100%;
    margin: 25px 0;
    border-radius: 15px;
    overflow: hidden;
    border: var(--e-primary-blockquote-border) 2px solid;

    .e-card-content-collapsible {
      margin: 0;
    }

    .e-card-content {
      margin: 25px;

      p {
        color: inherit;
      }
    }

    &.solid,
    &.border {
      .e-card-header {
        padding: 15px;
      }

      .e-card-content {
        color: var(--e-gray-0);
      }
    }
  }

  .e-card-primary {
    @include e-card-color(
      var(--e-primary-blockquote-border),
      var(--e-primary-blockquote-foreground),
      var(--e-primary-blockquote-background)
    );
  }

  .e-card-secondary {
    @include e-card-color(
      var(--e-secondary-blockquote-border),
      var(--e-secondary-blockquote-foreground),
      var(--e-secondary-blockquote-background)
    );
  }

  .e-card-accent {
    @include e-card-color(
      var(--e-accent-blockquote-border),
      var(--e-accent-blockquote-foreground),
      var(--e-accent-blockquote-background)
    );
  }

  .e-card-violet {
    @include e-card-color(
      var(--e-violet-blockquote-border),
      var(--e-violet-blockquote-foreground),
      var(--e-violet-blockquote-background)
    );
  }

  .e-card-red {
    @include e-card-color(
      var(--e-red-blockquote-border),
      var(--e-red-blockquote-foreground),
      var(--e-red-blockquote-background)
    );
  }

  .e-card-gray {
    @include e-card-color(
      var(--e-gray-blockquote-border),
      var(--e-gray-blockquote-foreground),
      var(--e-gray-blockquote-background)
    );
  }

  .e-card-green {
    @include e-card-color(
      var(--e-green-blockquote-border),
      var(--e-green-blockquote-foreground),
      var(--e-green-blockquote-background)
    );
  }

  .e-card-blue {
    @include e-card-color(
      var(--e-blue-blockquote-border),
      var(--e-blue-blockquote-foreground),
      var(--e-blue-blockquote-background)
    );
  }
}
</style>