Events

<template>
 <Accordion
  :parent="parent"
  :flush="flush"
  :current="current"
  @current-changed="onCurrentChanged"
 >
  <AccordionItem
   v-for="item in accordionItems"
   :id="`item_${item.id}`"
   :key="item.id"
   :active="item.active"
  >
   <AccordionHeader level="2">
    <AccordionButton>{{ item.title }}</AccordionButton>
   </AccordionHeader>
   <AccordionCollapse>
    <AccordionBody>
     {{ item.content }}
    </AccordionBody>
   </AccordionCollapse>
  </AccordionItem>
 </Accordion>
 <hr />
 <EventViewer :raised="raised" />
 <hr />
 <b-button
  type="button"
  color="primary"
  @click="addItem"
 >
  Add Item
 </b-button>

 <Dropdown margin="t-2">
  <DropdownToggle color="primary">
   Collapse
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem
    v-for="item in accordionItems"
    :key="item.id"
    toggle="collapse"
    :target="`#item_${item.id}`"
   >
    {{ item.title }}
   </DropdownItem>
  </DropdownMenu>
 </Dropdown>

 <Dropdown margin="t-2">
  <DropdownToggle color="primary">
   Active
  </DropdownToggle>
  <DropdownMenu>
   <DropdownItem
    v-for="item in accordionItems"
    :key="item.id"
    @click="changeCurrent(item.id)"
   >
    {{ item.title }}
   </DropdownItem>
  </DropdownMenu>
 </Dropdown>
 <b-button
  margin="t-2"
  type="button"
  color="primary"
  @click="toggleParent"
 >
  Toggle Parent
 </b-button>
 <b-div v-if="!parent">
  Always open
 </b-div>
 <b-button
  margin="t-2"
  type="button"
  color="primary"
  @click="toggleFlush"
 >
  Toggle Flush
 </b-button>
</template>

<script setup lang="ts">
interface IAccordionItem {
 id: number;
 title: string;
 content: string;
 active?: boolean;
}

const accordionItems = ref<IAccordionItem[]>([]);
accordionItems.value.push({ id: 1, title: 'Accordion Item #1', content: '#1', active: true });
accordionItems.value.push({ id: 2, title: 'Accordion Item #2', content: '#2' });
accordionItems.value.push({ id: 3, title: 'Accordion Item #3', content: '#3' });

const raised = ref({ name: '', event: '' });
const parent = ref(true);
const flush = ref(false);

const maxID = computed(() =>
 Math.max(...accordionItems.value.map(item => item.id)),
);

const onCurrentChanged = () => {
 raised.value = { name: 'Accordion', event: 'CurrentChanged' };
};
const addItem = () => {
 const id = maxID.value + 1;
 accordionItems.value.push({ id: id, title: `Accordion Item #${id}`, content: `#${id}` });
};

const current = ref('');
const changeCurrent = (id: number) => {
 current.value = `item_${id}`;
};
const toggleParent = () => {
 parent.value = !parent.value;
};
const toggleFlush = () => {
 flush.value = !flush.value;
};
</script>

<template>
 <!-- Button trigger modal -->
 <b-button
  color="primary"
  @click="clicked"
 >
  Launch demo modal
 </b-button>
 <EventViewer :raised="raised" />
 <!-- Modal -->
 <Modal
  ref="demoModal"
  @hide="onHide"
  @hidden="onHidden"
  @show="onShow"
  @shown="onShown"
 >
  <ModalDialog>
   <ModalContent>
    <ModalHeader>
     <ModalTitle>Modal title</ModalTitle>
     <CloseButton dismiss="modal" />
    </ModalHeader>
    <ModalBody>...</ModalBody>
    <ModalFooter>
     <b-button
      color="secondary"
      dismiss="modal"
     >
      Close
     </b-button>
     <b-button color="primary">
      Save changes
     </b-button>
    </ModalFooter>
   </ModalContent>
  </ModalDialog>
 </Modal>
</template>

<script setup lang="ts">
import { delay } from 'es-toolkit/compat';

const demoModal = ref(null);
const raised = ref({ name: '', event: '' });

const clicked = () => {
 delay(() => {
  if (demoModal.value) {
   demoModal.value.show();
  }
 }, 1000);
};

const onHide = () => {
 raised.value = { name: 'Modal', event: 'Hide' };
};
const onHidden = () => {
 raised.value = { name: 'Modal', event: 'Hidden' };
};
const onShow = () => {
 raised.value = { name: 'Modal', event: 'Show' };
};
const onShown = () => {
 raised.value = { name: 'Modal', event: 'Shown' };
};
</script>