AisCard #

<template>
  <div>
    <div class="mb-5 grid grid-cols-3 gap-4">
      <div>
        <AisCard header="Test Header" footer="Test Footer">This is the body of the card.</AisCard>
      </div>
      <div>
        <AisCard header="No Footer">This is the body of the card.</AisCard>
      </div>
      <div>
        <AisCard>No header or footer.</AisCard>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
</script>

<template>
  <div>
    <div class="mb-5 grid grid-cols-3 gap-4">
      <div>
        <AisCard header="Header with icon"
                 header-class="font-bold"
                 icon="users"
                 icon-class="text-primary"
                 footer="Footer with icon"
                 footer-class="font-bold"
                 :footer-icon="faLandmark"
                 footer-icon-class="text-blue-500"
        >This is the body of the card.</AisCard>
      </div>
      <div>
        <AisCard header="Header with status"
                 header-class="font-bold"
                 status="busy"
                 status-class="text-blue-500"
                 footer="Footer with status"
                 footer-class="font-bold text-danger"
                 footer-status="error"
                 footer-status-class="animate-pulse"
        >This is the body of the card.</AisCard>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
  import { faLandmark } from '@fortawesome/free-solid-svg-icons';
  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add(faLandmark);
</script>

<template>
  <div>
    <div class="grid gap-8">
      <div class="flex justify-center">
        <AisRadioGroup
            v-model="selectedOption"
            :options="options"
            name="radios"
            size="sm"
            class="rounded"
            buttons
            variant="default"
            outline
        />
      </div>
      <div>
        <AisCard header="Try the different rounded options"
                 icon="file"
                 footer="Some Footer"
                 footer-icon="info"
                 :rounded="selectedOption"
        >This is the body of the card.</AisCard>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { AisCard } from '@ais-public/ais-components';
import { AisRadioGroup } from '@ais-public/ais-components';

const options = ref([
  { value: 'none', label: 'rounded-none' },
  { value: 'sm', label: 'rounded-sm' },
  { value: 'rounded', label: 'rounded' },
  { value: 'md', label: 'rounded-md' },
  { value: 'lg', label: 'rounded-lg' },
  { value: 'xl', label: 'rounded-xl' },
  { value: '2xl', label: 'rounded-2xl' },
  { value: '3xl', label: 'rounded-3xl' },
]);
const selectedOption = ref('none');
</script>

<template>
  <div>
    <div class="grid grid-cols-3 gap-4">
      <div>
        <AisCard
            header="Left"
            footer="Test Footer"
        >This is the body of the card.</AisCard>
      </div>
      <div>
        <AisCard
            header="Center"
            footer="Test Footer"
            align="center"
        >This is the body of the card.</AisCard>
      </div>
      <div>
        <AisCard
            header="Right"
            footer="Test Footer"
            align="right"
        >This is the body of the card.</AisCard>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
</script>

<template>
  <div class="grid grid-cols-4 gap-4">
    <div>
      <AisCard
          header="Default"
          variant="default"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Primary"
          variant="primary"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Secondary"
          variant="secondary"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Info"
          variant="info"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Success"
          variant="success"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Danger"
          variant="danger"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Warning"
          variant="warning"
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard
          header="Plain"
          variant="plain"
      >This is the body of the card.</AisCard>
    </div>
  </div>
</template>

<script setup>
  import { AisCard } from "@ais-public/ais-components";
</script>

<template>
  <div class="grid grid-cols-4 gap-4">
    <div>
      <AisCard header="Default" footer="Footer"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Primary" footer="Footer"
               variant="primary"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Secondary" footer="Footer"
               variant="secondary"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Info" footer="Footer"
               variant="info"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Success" footer="Footer"
               variant="success"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Danger" footer="Footer"
               variant="danger"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Warning" footer="Footer"
               variant="warning"
               outline
      >This is the body of the card.</AisCard>
    </div>
    <div>
      <AisCard header="Plain" footer="Footer"
               variant="plain"
               outline
      >This is the body of the card.</AisCard>
    </div>
  </div>
</template>

<script setup>
  import { AisCard } from "@ais-public/ais-components";
</script>

<template>
  <div>
    <div class="mb-5 grid grid-cols-2 gap-4">
      <div>
        <AisCard>
          <template #header>
            <AisIcon icon="users" />&nbsp;
            <b><span class="text-blue-600">Custom</span> Header</b>
          </template>

          This is the body of the card.

          <template #footer>
            <div class="text-blue-600">
              <AisIcon icon="info" />&nbsp;
              Footer slot content
            </div>
          </template>
        </AisCard>
      </div>
      <div>
        <AisCard footer-class="text-cyan-600">
          <template #header>
            <AisIcon :icon="faFile" />&nbsp;
            <i>Attachments</i>
          </template>

          This is the body of the card.

          <template #footer>
            <AisIcon icon="info" />&nbsp;
            Footer slot content
          </template>
        </AisCard>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
  import { AisIcon } from '@ais-public/ais-components';
  import { faFile } from '@fortawesome/free-regular-svg-icons';
  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add(faFile);
</script>

<template>
  <div class="mb-5 grid grid-cols-2 gap-4">
      <AisCard header="Standard header" icon="success" footer="Standard footer" footer-icon="info">
        <template #headerRight>
          <AisBadge variant="secondary" size="sm">23</AisBadge>
        </template>

        This is the body of the card.

        <template #footerRight>
          <AisBadge variant="danger" size="xs">Final</AisBadge>
        </template>
      </AisCard>
  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
  import { AisBadge } from '@ais-public/ais-components';
  import { faFile } from '@fortawesome/free-regular-svg-icons';
  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add(faFile);
</script>

<template>
  <div class="grid grid-cols-2 gap-4">

    <div>
      <AisCard header="Click header to expand/collapse"
               footer="Test Footer"
               icon="users"
               collapsible
               collapse-arrow
      >Click on the header to expand/collapse the body and footer.</AisCard>
    </div>

    <div>
      <AisCard header="Click header to expand/collapse"
               footer="Test Footer"
               collapsible
               :default-open="false"
               @click="handleClick"
      >
        <template #headerRight="{ open }">
          <AisIcon :icon="open ? 'caret-up' : 'caret-down'"/>
        </template>

        Click on the header to expand/collapse the body and footer.
      </AisCard>
    </div>


  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
  import { AisIcon } from '@ais-public/ais-components';

  const handleClick = (e) => { console.log(`header.click: open=[${e}]`) }
</script>

<script setup>
  import { ref } from "vue";
  import { AisCard } from "@ais-public/ais-components";
  import { AisTable } from "@ais-public/ais-components";
  import { defaultItems, defaultFields } from "@/components/table/examples/table-data.js";

  const fields = ref(defaultFields);
  const items = ref(defaultItems.slice(0, 5));
</script>

<template>
  <AisCard no-body
           header="Team Roster"
           icon="users"
           footer="Full-time staff only"
           footer-icon="info"
           footer-class="text-blue-600"
  >
    <AisTable ruled flush :fields="fields" :items="items"></AisTable>
  </AisCard>
</template>

<script setup>
  import { ref } from "vue";
  import { AisCard } from "@ais-public/ais-components";
  import { AisTable } from "@ais-public/ais-components";
  import { defaultItems, defaultFields } from "@/components/table/examples/table-data.js";

  const fields = ref(defaultFields);
  const items = ref(defaultItems);
</script>

<template>
  <AisCard no-body
           header="Team Roster"
           icon="users"
           header-class="font-bold"
           footer="Full-time staff only"
           footer-icon="info"
           footer-class="text-blue-600"
  >
    <div class="block w-full overflow-y-auto max-h-96">
      <AisTable class="flush"
                :fields="fields"
                :items="items"
                bordered
                sticky-headers
      ></AisTable>
    </div>
  </AisCard>
</template>

<script setup>
  import { ref } from "vue";
  import { AisCard } from '@ais-public/ais-components';
  import { AisIconButton } from '@ais-public/ais-components';
  import { vTooltip } from '@/components/tooltip/vTooltip';
  import { defaultItems, defaultFields } from '@/components/table/examples/table-data.js';
  import { faRotateRight } from '@fortawesome/free-solid-svg-icons';
  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add(faRotateRight);

  const getRandomInt = (min, max) => {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };
  const getRandomPerson = () => defaultItems[getRandomInt(0, defaultItems.length - 1)];

  const fields = ref(defaultFields);
  const randomTeamMember = ref(getRandomPerson());
</script>

<template>
  <AisCard no-body
           header="Random Team Member"
           icon="user"
           footer="Full-time staff member"
           footer-icon="info"
           footer-class="text-blue-600"
  >
    <template #headerRight>
      <AisIconButton :icon="faRotateRight"
                     label="Click for new random team member"
                     v-tooltip content="Randomize"
                     @click="randomTeamMember = getRandomPerson()"/>
    </template>

    <table class="ais flush table-ruled">
      <tbody>
        <tr v-for="field in fields">
          <th class="w-[1%] whitespace-nowrap" style="padding-right: 1rem">{{ field.label }}</th>
          <td>{{ randomTeamMember[field.key] }}</td>
        </tr>
      </tbody>
    </table>
  </AisCard>
</template>

<template>
  <div class="grid grid-cols-2 gap-4">
    <div>
      <AisCard no-body header="Card with flush list group">
        <AisListGroup flush>
          <AisListGroupItem>List Group Item #1</AisListGroupItem>
          <AisListGroupItem>List Group Item #2</AisListGroupItem>
          <AisListGroupItem>List Group Item #3</AisListGroupItem>
          <AisListGroupItem>List Group Item #4</AisListGroupItem>
        </AisListGroup>
      </AisCard>
    </div>

    <div>
      <AisCard no-body header="Card with flush list group and a card body">
        <AisListGroup flush>
          <AisListGroupItem>List Group Item #1</AisListGroupItem>
          <AisListGroupItem>List Group Item #2</AisListGroupItem>
          <AisListGroupItem>List Group Item #3</AisListGroupItem>
          <AisListGroupItem>List Group Item #4</AisListGroupItem>
        </AisListGroup>

        <AisCardBody>
          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim
          exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit
          ipsum anim Lorem.
        </AisCardBody>

      </AisCard>
    </div>
  </div>
</template>

<script setup>
  import { AisListGroup } from '@ais-public/ais-components';
  import { AisListGroupItem } from '@ais-public/ais-components';
  import { AisCard } from '@ais-public/ais-components';
  import { AisCardBody } from '@ais-public/ais-components';
</script>

<template>
  <div>
    <AisCard no-body
             header="Card Events"
             header-class="font-medium"
             @click="handleClick"
             @header-click="handleHeaderClick"
    >
      <AisListGroup flush>
        <AisListGroupItem>Click on the card header to trigger a <code>header-click</code> event.</AisListGroupItem>
        <AisListGroupItem>Click anywhere on the card to trigger a <code>click</code> event.</AisListGroupItem>
      </AisListGroup>
    </AisCard>
  </div>
</template>

<script setup>
  import { AisCard } from '@ais-public/ais-components';
  import { AisListGroup } from '@ais-public/ais-components';
  import { AisListGroupItem } from '@ais-public/ais-components';

  const handleClick = (e) => console.log(`card.click: event=[${e}]`)
  const handleHeaderClick = (e) => console.log(`card-header.click: isOpen=[${e}]`)
</script>