AccordionReady

<template>
  <BaseAccordion header="I am an accordion">
    <p class="n-padding-b-s">
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla provident
      aliquid corporis tempora eius quam, quae vel molestias esse maxime aperiam
      totam suscipit. Nobis consectetur optio reprehenderit animi? Suscipit,
      quibusdam?
    </p>
  </BaseAccordion>
</template>

<script setup lang="ts">
const isCollapsed = ref(false)
const isDisabled = ref(false)
</script>

<template>
  <div>
    <div
      slot="header-end"
      class="n-stack-horizontal n-margin-bs-s n-margin-be-l"
    >
      <provet-button
        type="button"
        size="s"
        :disabled="isDisabled"
        @click="isCollapsed = !isCollapsed"
      >
        {{ isCollapsed ? 'Expand' : 'Collapse' }}
      </provet-button>

      <provet-button type="button" size="s" @click="isDisabled = !isDisabled">
        {{ isDisabled ? 'Enabled' : 'Disable' }}
      </provet-button>
    </div>

    <BaseAccordion
      v-model:collapsed="isCollapsed"
      header-gap="l"
      :disabled="isDisabled"
    >
      <template #header>
        <span class="n-font-weight-heading">Some title</span>
      </template>

      <template #header-description>
        <span class="n-color-text-weaker n-font-weight">
          Some description
        </span>
      </template>

      <div class="n-padding-b-s">
        It is also possible to add header actions. There will be plenty of cases
        where we'll use a
        <provet-tag size="s">BaseAccordion</provet-tag> to wrap forms, in such
        scenarios both the <b>Submit/Save</b> and <b>Cancel</b> buttons can be
        placed under the card's <i>header-end</i> slot.
        <dl>
          <dt>
            Additionally, the component expose useful methods to collapse,
            expand and/or toggle the card's state. The methods names are:
          </dt>
          <dd>
            <ul>
              <li><pre>collapse</pre></li>
              <li><pre>expand</pre></li>
              <li><pre>toggleAccordion</pre></li>
            </ul>
          </dd>
        </dl>
      </div>
    </BaseAccordion>
  </div>
</template>

<template>
  <BaseAccordion header="With disabled" disabled>
    <p class="n-padding-b-s">
      The toggle to expand/collapse the card can also be disabled by using the
      <i>disabled</i> prop. This becomes handy in cases you want to ensure the
      content of the card is visible, such as an <b>inline edit</b> form is
      loaded and while the form is not submitted, you need the card to remain
      expanded so the content is visible.
    </p>
  </BaseAccordion>
</template>

<template>
  <BaseAccordion header="With collapsed initial state" collapsed>
    <div class="n-padding-b-s">
      The <provet-tag size="s">BaseAccordion</provet-tag> component has two main
      states:
      <dl>
        <dt class="n-font-weight-heading">Expanded</dt>
        <dd>
          <ul>
            <li>This is the default state of the component.</li>
            <li>
              The card content is fully visible and accessible to the user.
            </li>
          </ul>
        </dd>
        <dt class="n-font-weight-heading">Collapsed</dt>
        <dd>
          <ul>
            <li>
              To render the card in a collapsed state, you can use the
              <i>collapsed</i> prop.
            </li>
            <li>
              When collapsed, the card content is hidden, and only the header or
              title is visible.
            </li>
            <li>
              This can be useful for conserving space or creating an
              accordion-style layout.
            </li>
          </ul>
        </dd>
      </dl>
    </div>
  </BaseAccordion>
</template>