<button class="btn " data-bs-toggle="tooltip" :title="'btn ' + item.classes" :class="item.classes" v-for="(item, index) in button" :key="index" type="button">{{item.title}}</button>

import { Tooltip } from "bootstrap";
                  import { button } from "@/core/data/buttons"

export const button= [
{
    classes: "btn-primary",
    title: "Primary Button"
},
{
    classes: "btn-secondary",
    title: "Secondary Button"
},
{
    classes: "btn-success",
    title: "Success Button"
},
{
    classes: "btn-info",
    title: "Info Button"
},
{
    classes: "btn-warning",
    title: "Warning Button"
},
{
    classes: "btn-danger",
    title: "Danger Button"
},
{
    classes: "btn-light",
    title: "Light Button"
}
]

<span class="badge " :class="item.class" v-for="(item, index) in badges" :key="index">{{item.title}}</span>

import { badges } from "@/core/data/uikits"

 export const badges = [
 {
     class: "badge-primary",
     title: "Primary"
 },
 {
     class: "badge-secondary",
     title: "Secondary"
 },
 {
     class: "badge-success",
     title: "Success"
 },
 {
     class: "badge-info",
     title: "Info"
 },
 {
     class: "badge-warning text-dark",
     title: "Warning"
 },
 {
     class: "badge-danger",
     title: "Danger"
 },
 {
     class: "badge-light text-dark",
     title: "Light"
 },
 {
     class: "badge-dark tag-pills-sm-mb",
     title: "Dark"
 }
]

<div v-for="(item, index) in basic" :key="index">
  <div class="progress-bar " :class="item.class" role="progressbar" :style="{ 'width': item.width }"
  aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">{{item.width}}</div>
</div>

import { basic } from "@/core/data/uikits"

export const basic = [
{
    width: " 25%",
    class: "bg-primary"
},
{
    width: "50%",
    class: "bg-secondary"
},
{
    width: "75%",
    class: "bg-success"
},
{
    width: "100%",
    class: "bg-info"
}
]

<Alerts color="primary">This is a primary alert—check it out!</Alerts>
<Alerts color="secondary">This is a secondary alert—check it out!</Alerts>
<Alerts color="success">This is a success alert—check it out!</Alerts>
<Alerts color="info">This is a info alert—check it out!</Alerts>
<Alerts color="warning">This is a warning alert—check it out!</Alerts>
<Alerts color="danger">This is a danger alert—check it out!</Alerts>
<Alerts color="light">This is a light alert—check it out!</Alerts>
<Alerts color="dark">This is a dark alert—check it out!</Alerts>

 <Popper placement="right" arrow disableClickAway>
                  <button class="btn btn-primary example-popover mb-0 me-0"> Hurry
                      Up! </button>
                  <template #content>
                      <div class="popover bs-popover-auto">
                          <h3 class="popover-header">Basic Popover</h3>
                          <div class="popover-body">If the package restore doesn't help, you can look at the Output window in the
                              Visual Studio.</div>
                      </div>
      
                  </template>
              </Popper>

import Popper from "vue3-popper";

<button class="example-popover btn btn-primary" type="button" data-container="body"
data-bs-toggle="tooltip" data-bs-placement="top" title="Popover title" ref="hover">Hover Me</button>

<div class="btn-group" v-for="(item, index) in dropdown" :key="index">
  <button class="btn  dropdown-toggle" :class="item.class" type="button" data-bs-toggle="dropdown"
      aria-expanded="false">{{ item.title }}</button>
  <ul class="dropdown-menu dropdown-block">
      <li v-for="(items, index) in item.children" :key="index"><a class="dropdown-item" href="#">{{
          items.title }}</a></li>
  </ul>
</div>

import { dropdown } from "@/core/data/uikits"

export const dropdown = [
 {
     class: "btn-primary",
     title: "Dashboard",
     children: [
         {
             title: "Project"
         },
         {
             title: "Ecommerce"
         },
         {
             title: "Crypto"
         }
     ]
 },
 {
     class: "btn-secondary",
     title: "Ecommerce",
     children: [
         {
             title: "Product"
         },
         {
             title: "Product details"
         },
         {
             title: "Cart"
         }
     ]
 },
 {
     class: "btn-warning text-black",
     title: "Ui kits",
     children: [
         {
             title: "Typography"
         },
         {
             title: "Avatars"
         },
         {
             title: "Grid"
         }
     ]
 },
 {
     class: "btn-danger",
     title: "Error page",
     children: [
         {
             title: "Error 400"
         },
         {
             title: "Error 403"
         },
         {
             title: "Error 500"
         }
     ]
 }
]

 <ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle bg-transparent border-none" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"  @click="open()">Dropdown</a>
  <div class="dropdown-menu" :class="filter ? 'show' : ''"><a class="dropdown-item" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a><a class="dropdown-item" href="#">Separated link</a></div>
</li>
<li class="nav-item"><a class="nav-link" id="profile-tabs" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a></li>
<li class="nav-item"><a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a></li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
  <p class="mb-0 m-t-30">{{desc}}</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
  <p class="mb-0 m-t-30">{{desc}}</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
  <p class="mb-0 m-t-30">{{desc}}</p>
</div>
</div>

<div class="accordion dark-accordion" id="simpleaccordion">
  <div class="accordion-item" v-for="(item, index) in simple" :key="index">
      <h2 class="accordion-header" :id="item.hederid">
          <button class="accordion-button  bg-light-primary font-primary " @click="toggleAccordion(index)"
              type="button" :data-bs-target="item.id" aria-expanded="true" :aria-controls="item.ids">{{ item.title
              }}<vue-feather class="svg-color" type="chevron-down"></vue-feather> </button>
      </h2>
      <div class="accordion-collapse " v-if="item.isActive" :id="item.ids" :aria-labelledby="item.hederid"
          data-bs-parent="#simpleaccordion">
          <div class="accordion-body">
              <div v-for="(items, index) in item.childern" :key="index">
                  <p v-html="items.desc" v-if="item.one">
                  </p>
              </div>
              <div v-for="(items, index) in item.childern" :key="index">
                  <p class="mb-3" v-html="items.desc" v-if="item.two">
                  </p>
              </div>
              <p v-if="item.three">
                  The web design process allows designers to adjust to any preferences and provide effective
                  solutions. There are many standard components of every web design, including:</p>
              <div v-for="(items, index) in item.childern" :key="index">

                  <ul class="d-flex flex-column gap-2 accordions-content" v-if="item.three">
                      <li>--> {{ items.title }}</li>
                  </ul>
              </div>
          </div>
      </div>
  </div>
</div>

import { ref, defineAsyncComponent } from 'vue'
 import { useCommonStore } from "@/store/common" 
 let store = useCommonStore()
 let simple = store.data
 const toggleAccordion = (index: number) => {
     simple[index].isActive = !simple[index].isActive;
     closeOtherAccordions(index);
 };
 
 const closeOtherAccordions = (currentIndex: number) => {
     simple.forEach((item, index) => {
         if (index !== currentIndex) {
             item.isActive = false;
         }
     });
 };

import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { computed } from 'vue'
 import { simple} from "@/core/data/uikits"
                
 export const useCommonStore = defineStore('Common', () => {
 
     let data = ref(simple)
     
 
     return {
         data,
        
     }
 })