shishirraven

<template>
  <BraveDropMenu ref="dropmenu2" class="me-3">
      <template #button>
        <div role="button" 
        class="dark:bg-slate-900  dark:hover:bg-slate-800  border dark:border-slate-500 border-slate-200  p-2 px-4 mr-5
        rounded-lg shadow-sm dark:text-white bg-white   hover:shadow  dark:hover:border-slate-500 hover:border-slate-300"  
        >Documentation <i class="bi bi-chevron-down"></i></div>
      </template>
      <template #menu>
       <div class="w-44 dark:bg-slate-900 border dark:border-slate-800 py-2 

shishirraven

<button
  type="button"
  @click="$refs.bravedialog2.show()"
  class="my-5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
>
  Open Centered with single action 
</button>

shishirraven

       <BraveDialog
        ref="bravedialog2"
          class="bg-black/80 backdrop-blur-sm dark:bg-black/80 justify-center flex fixed bottom-0 left-0 right-0 top-0"
          dialogclasses="rounded-lg bg-white dark:bg-slate-800 dark:text-white shadow-lg mx-5 lg:w-1/3 flex-col flex my-auto "
          :visibility="false"
        >
          <div class="text-center ">
              <div class="inline-block mt-5">
                <div
                  class="h-14 w-14 rounded-full bg-green-200 flex justify-center content-center"

shishirraven

  <button
          type="button"
          @click="$refs.bravedialog.show()"
          class="my-5 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
        >
          Open Dialog Box
  </button>

shishirraven

import { BraveDialog } from "bravevue";
export default {
  components: { BraveDialog },
};

shishirraven

<BraveDialog
          ref="bravedialog"
          class="bg-black/80 backdrop-blur-sm dark:bg-black/80 justify-center flex fixed bottom-0 left-0 right-0 top-0"
          dialogclasses="rounded-lg bg-white dark:bg-slate-800 dark:text-white shadow-lg mx-5 lg:w-1/3 flex-col flex my-auto "
          :visibility="false"
        >
          <!-- Body -->
          <div class="flex flex-1">
            <div class="pl-5 pt-5">
              <div

shishirraven

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  base: "./",
  filenameHashing: false,
  plugins: [vue()],
  build: {
    rollupOptions: {

shishirraven

 const WpCard = () =>
          import(/* webpackChunkName: "wpcard" */`@/components/${this.userInterface.cardComponent}`);

shishirraven

module.exports = {
  publicPath: './',
  filenameHashing :false}

shishirraven

<style lang="scss">
$card-border-radius:.95rem;
$card-bg:rgba(248,246,242,.3);

$border-radius:               .45rem !default;
$border-radius-sm:            .3rem !default;
$border-radius-lg:            .4rem !default;


@import url(https://fonts.googleapis.com/css?family=Poppins:200,300,400,700);