PvTag

<script setup lang="ts">
import PvTag from "@/components/base/PvTag/PvTag.vue";
import { TagSize, TagVariant } from "@/components/base/PvTag/types";

const tagSizeOptions = ["sm", "md", "lg"] as TagSize[];
const tagVariantOption = ["primary", "tertiary"] as TagVariant[];

const tagSizeLength = tagSizeOptions.length + 1;
const tagVariantSize = tagVariantOption.length * 2 + 1;
</script>

<template>
  <div
    class="container pv-stack-16 pv-border-top"
    :style="{
      'grid-template-columns': `repeat(${tagSizeLength}, 1fr`,
      'grid-template-rows': `repeat(${tagVariantSize}, 1fr`,
      height: `${tagVariantSize * 50}px`,
    }"
  >
    <div>Simple Tag</div>
    <div v-for="size in tagSizeOptions" :key="'header-' + size">
      
    </div>

    <template v-for="variant in tagVariantOption" :key="variant">
      <div>
        
      </div>

      <div v-for="size in tagSizeOptions" :key="variant + '-' + size">
        <PvTag label="Example" :size="size" :variant="variant" />
      </div>
    </template>

    <template v-for="variant in tagVariantOption" :key="variant">
      <div> Rounded</div>

      <div v-for="size in tagSizeOptions" :key="variant + '-' + size">
        <PvTag label="Example" :size="size" :variant="variant" rounded />
      </div>
    </template>
  </div>

  <div
    class="container pv-stack-16 pv-border-top"
    :style="{
      'grid-template-columns': `repeat(${tagSizeLength}, 1fr`,
      'grid-template-rows': `repeat(${tagVariantSize}, 1fr`,
      height: `${tagVariantSize * 50}px`,
    }"
  >
    <div>Simple Tag with Icon</div>
    <div v-for="size in tagSizeOptions" :key="'header-' + size">
      
    </div>

    <template v-for="variant in tagVariantOption" :key="variant">
      <div>
        
      </div>

      <div v-for="size in tagSizeOptions" :key="variant + '-' + size">
        <PvTag label="Example" :size="size" :variant="variant" icon="user" />
      </div>
    </template>
    <template v-for="variant in tagVariantOption" :key="variant">
      <div> Rounded</div>

      <div v-for="size in tagSizeOptions" :key="variant + '-' + size">
        <PvTag
          label="Example"
          :size="size"
          :variant="variant"
          icon="user"
          rounded
        />
      </div>
    </template>
  </div>

  <div
    class="container pv-stack-16 pv-border-top"
    :style="{
      'grid-template-columns': `repeat(${tagSizeLength}, 1fr`,
      'grid-template-rows': `repeat(${tagVariantSize}, 1fr`,
      height: `${tagVariantSize * 50}px`,
    }"
  >
    <div>Simple Tag with Close Icon</div>
    <div v-for="size in tagSizeOptions" :key="'header-' + size">
      
    </div>

    <template v-for="variant in tagVariantOption" :key="variant">
      <div>
        
      </div>

      <div v-for="size in tagSizeOptions" :key="variant + '-' + size">
        <PvTag label="Example" :size="size" :variant="variant" show-clear />
      </div>
    </template>
    <template v-for="variant in tagVariantOption" :key="variant">
      <div> Rounded</div>

      <div v-for="size in tagSizeOptions" :key="variant + '-' + size">
        <PvTag
          label="Example"
          :size="size"
          :variant="variant"
          show-clear
          rounded
        />
      </div>
    </template>
  </div>

  <div
    class="container pv-stack-16 pv-border-top"
    :style="{
      'grid-template-columns': `repeat(${tagSizeLength}, 1fr`,
      'grid-template-rows': `repeat(${tagVariantSize}, 1fr`,
      height: `${tagVariantSize * 50}px`,
    }"
  >
    <div>Full PvTag</div>
    <div v-for="size in tagSizeOptions" :key="'header-' + size">
      
    </div>

    <template v-for="variant in tagVariantOption" :key="variant">
      <div>
        
      </div>

      <div v-for="size in tagSizeOptions" :key="variant + '-' + size">
        <PvTag
          label="Example"
          :size="size"
          :variant="variant"
          show-clear
          icon="user"
        />
      </div>
    </template>

    <template v-for="variant in tagVariantOption" :key="variant">
      <div> Rounded</div>

      <div v-for="size in tagSizeOptions" :key="variant + '-' + size">
        <PvTag
          label="Example"
          :size="size"
          :variant="variant"
          show-clear
          icon="user"
          rounded
        />
      </div>
    </template>
  </div>
</template>

<style>
.container {
  display: grid;
  gap: 10px;
  align-items: center;
  justify-items: center;
}
</style>