PvAccordion

<script setup lang="ts">
import PvAccordion from "@/components/base/PvAccordion/PvAccordion.vue";
</script>

<template>
  <div class="pv-inset-square-16">Without Counter</div>
  <PvAccordion
    header="Label of the Accordion"
    chevron-position="left"
    style="width: 300px"
    :default-open="true"
  >
    <div class="pv-bordered">
      <div class="pv-border-bottom pv-inset-square-8 pv-text-body-xs">
        <p class="pv-text-title-xs">Institutional</p>
        <p class="pv-text-subdued">
          In-patient and out-patient rates from hospitals or healthcare
          organizations. Recommended default source option.
        </p>
      </div>
      <div class="pv-inset-square-8 pv-text-body-xs">
        <p class="pv-text-title-xs">Professional</p>
        <p class="pv-text-subdued">
          Medical service and treatment rates from physicians or healthcare
          professionals. Much larger database, but could increase the size of
          the extract considerably.
        </p>
      </div>
    </div>
  </PvAccordion>
  <PvAccordion
    header="Label of the Accordion"
    chevron-position="right"
    style="width: 300px"
  >
    <div class="pv-bordered">
      <div class="pv-border-bottom pv-inset-square-8 pv-text-body-xs">
        <p class="pv-text-title-xs">Institutional</p>
        <p class="pv-text-subdued">
          In-patient and out-patient rates from hospitals or healthcare
          organizations. Recommended default source option.
        </p>
      </div>
      <div class="pv-inset-square-8 pv-text-body-xs">
        <p class="pv-text-title-xs">Professional</p>
        <p class="pv-text-subdued">
          Medical service and treatment rates from physicians or healthcare
          professionals. Much larger database, but could increase the size of
          the extract considerably.
        </p>
      </div>
    </div>
  </PvAccordion>
  <div class="pv-inset-square-16">Accordion with Counter</div>
  <PvAccordion
    header="Label of the Accordion"
    chevron-position="right"
    style="width: 300px"
    :counter="10"
  >
    <div class="pv-bordered">
      <div class="pv-border-bottom pv-inset-square-8 pv-text-body-xs">
        <p class="pv-text-title-xs">Institutional</p>
        <p class="pv-text-subdued">
          In-patient and out-patient rates from hospitals or healthcare
          organizations. Recommended default source option.
        </p>
      </div>
      <div class="pv-inset-square-8 pv-text-body-xs">
        <p class="pv-text-title-xs">Professional</p>
        <p class="pv-text-subdued">
          Medical service and treatment rates from physicians or healthcare
          professionals. Much larger database, but could increase the size of
          the extract considerably.
        </p>
      </div>
    </div>
  </PvAccordion>
  <PvAccordion
    header="Label of the Accordion"
    chevron-position="left"
    style="width: 300px"
    :default-open="true"
    :counter="10"
  >
    <div class="pv-bordered">
      <div class="pv-border-bottom pv-inset-square-8 pv-text-body-xs">
        <p class="pv-text-title-xs">Institutional</p>
        <p class="pv-text-subdued">
          In-patient and out-patient rates from hospitals or healthcare
          organizations. Recommended default source option.
        </p>
      </div>
      <div class="pv-inset-square-8 pv-text-body-xs">
        <p class="pv-text-title-xs">Professional</p>
        <p class="pv-text-subdued">
          Medical service and treatment rates from physicians or healthcare
          professionals. Much larger database, but could increase the size of
          the extract considerably.
        </p>
      </div>
    </div>
  </PvAccordion>
</template>