Card CollapsibleReady

<template>
  <CardCollapsible title="I am a collapsible card">
    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?
  </CardCollapsible>
</template>

<template>
  <CardCollapsible title="With disabled toggle" disabled>
    The toggle to expand/collapse the card can also be disabled by using the
    <i>disabled</i> prop. This becomeshandy 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.
  </CardCollapsible>
</template>

<script setup lang="ts">
import CardCollapsible from '@/components/CardCollapsible.vue'

const cardCollapsibleElement =
  useTemplateRef<InstanceType<typeof CardCollapsible>>('cardCollapsibleRef')
const isCardWithActionsCollapsed = ref(false)
const hasCardWithActionsDisabledToggle = ref(false)
</script>

<template>
  <CardCollapsible
    ref="cardCollapsibleRef"
    title="With header actions"
    :disabled="hasCardWithActionsDisabledToggle"
    @card:collapse="isCardWithActionsCollapsed = true"
    @card:expand="isCardWithActionsCollapsed = false"
    @card:toggle-state="isCardWithActionsCollapsed = $event"
  >
    <template #header-end>
      <provet-button
        type="button"
        size="s"
        :disabled="hasCardWithActionsDisabledToggle"
        @click="cardCollapsibleElement?.toggleCard"
      >
        Toggle state
      </provet-button>

      <provet-button
        type="button"
        size="s"
        @click="
          hasCardWithActionsDisabledToggle = !hasCardWithActionsDisabledToggle
        "
      >
        {{
          !hasCardWithActionsDisabledToggle ? 'Disable toggle' : 'Enable toggle'
        }}
      </provet-button>
    </template>

    It is also possible to add header actions. There will be plenty of cases
    where we'll use a <provet-tag size="s">CardCollapsible</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>toggleCard</pre></li>
        </ul>
      </dd>
    </dl>
  </CardCollapsible>
</template>

<template>
  <CardCollapsible title="With collapsed initial state" collapsed>
    The <provet-tag size="s">CardCollapsible</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>
  </CardCollapsible>
</template>

<template>
  <CardCollapsible title="With padding value" padding="m">
    <provet-stack>
      <p>
        The <provet-tag size="s">CardCollapsible</provet-tag> component extends
        the Provet Cloud Design System
        <a href="https://provetcloud.design/components/card/" target="_blank">
          Card
        </a>
        component, which means you get all of the <i>properties</i>,
        <i>slots</i>, <i>CSS properties</i> and their default values.
      </p>
      <p>
        Now, in most cases this component will have a padding different than the
        default value <i>("m")</i> set in the
        <provet-tag size="s">provet-card</provet-tag>, the <i>padding</i> prop
        is initialized with the <provet-tag size="s">"l"</provet-tag> overriding
        that value.
      </p>
    </provet-stack>
  </CardCollapsible>
</template>