shishirraven

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

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

<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 { BraveDialog } from "bravevue";
export default {
  components: { BraveDialog },
};

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

       <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.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

<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

<template>
  <main class="flex-1 lg:p-16">
    <div class="py-6">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
        <h1 class="text-4xl font-semibold mb-10">
          <i class="bi me-2 bi-github"></i>
          Brave Gist Embed
        </h1>
        <p>
          You can use this Component to embed Github Gist, right now it solves

shishirraven

<template>
  <BraveSelect
    class="relative inline-block"
    v-model="selectValue"
    :options="options"
    dropdown-class="shadow rounded border absolute z-10 dark:bg-slate-900 bg-white right-0 left-0"
    >
    <template v-slot:button="{ selectedValue }">
        <div
        role="button"