sadewole

import { StatusBar } from 'expo-status-bar';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableOpacity,
} from 'react-native';

sadewole

<template>
  <img alt="Vue logo" src="./assets/logo.png" />

  <div style="margin-top: 20px;">
    <Accordion allowMultiple>
      <AccordionItem label="Accordion One" defaultIsOpen>
        <div>Lorem ipsum dolor sit amet, consectetur</div>
      </AccordionItem>
      <AccordionItem label="Accordion Two">
        <div>Lorem ipsum dolor sit amet, consectetur</div>

sadewole

<style scoped>
.accordionItem {
  margin-top: 10px;
  margin-bottom: 10px;
}
.accordionItem__header {
  width: 100%;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;

sadewole

<template>
  <div class="accordionItem">
    <button
      @click="toggleContent"
      class="accordionItem__header"
      v-text="label"
    />
    <div :class="['accordionItem__content', isExpanded && '-open']">
      <div class="h-p-5">
        <slot />

sadewole

<script lang="ts">
... // content hidden

export default defineComponent({
  name: "AccordionItem",
  
  ... // content hidden
  
  setup(props: Props) {
    const id = ref(useId());

sadewole

<script lang="ts">
... // content hidden 

export default defineComponent({
  name: "AccordionItem",
  
  ... // content hidden
  
  setup(props: Props) {
    const id = ref(useId());

sadewole

<script lang="ts">
... // content hidden

type Props = { label: string; defaultIsOpen: boolean };
type Indices = {
  value: Array<string>;
};
type ExpandedIndex = {
  value: Array<string> | string;
};

sadewole

<script lang="ts">
... // content hidden

  function useId(size = 3): string {
    let randomId = "";
    const dictionary = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

    for (let i = 0; i < size; i++) {
      randomId += dictionary.charAt(
        Math.floor(Math.random() * dictionary.length)

sadewole

<script lang="ts">
import { ref, inject, onMounted, onUpdated, watch, defineComponent } from "vue";

export default defineComponent({
  name: "AccordionItem",
  props: {
    label: { type: String, required: true },
    defaultIsOpen: { type: Boolean, required: false },
  }
});

sadewole

<template>
  <div>
    <slot />
  </div>
</template>

<script lang="ts">
import { provide, ref, computed, defineComponent } from "vue";

export default defineComponent({