PopOver Component Demos

Basic Popup

Simple popup with static content and a single button.

Code Example

<template>
  <OPopOver />
</template>

<script setup>
import { usePopup } from '../composables/usePopupComposable';

const { showPopup, closePopup } = usePopup();

const showBasicPopup = () => {
  showPopup({
    title: 'Hello World',
    content: 'This is a basic popup message with a simple OK button.',
    buttonConfig: [
      {
        buttonText: 'OK',
        classNames: ['primary-button'],
        action: () => closePopup()
      }
    ]
  });
};
</script>

Demo

Confirmation Dialog

Using the built-in confirm convenience method.

Code Example

<template>
  <OPopOver />
</template>

<script setup>
import { usePopup } from '../composables/usePopupComposable';

const { confirm } = usePopup();

const showConfirmDialog = () => {
  confirm('Delete Confirmation', 'Are you sure you want to delete this item?', {
    onConfirm: () => {
      console.log('Item deleted');
    },
    onCancel: () => {
      console.log('Deletion cancelled');
    }
  });
};
</script>

Demo

Alert Dialog

Using the built-in alert convenience method.

Code Example

<template>
  <OPopOver />
</template>

<script setup>
import { usePopup } from '../composables/usePopupComposable';

const { alert } = usePopup();

const showAlertDialog = () => {
  alert('Success!', 'Operation completed successfully.', {
    onOk: () => {
      console.log('OK clicked');
    }
  });
};
</script>

Demo

Form Dialog with Validation

Popup with form content and validation error handling.

Code Example

<template>
  <OPopOver />
</template>

<script setup>
import { usePopup } from '../composables/usePopupComposable';

const { showPopup, closePopup } = usePopup();

const showFormDialog = () => {
  showPopup({
    title: 'Create New User',
    content: 'Please fill in the user details below.',
    showMandatoryFieldsError: true,
    showMandatoryFieldsErrorMsg: 'Please fill all required fields before proceeding.',
    buttonConfig: [
      {
        buttonText: 'Cancel',
        classNames: ['secondary-button-v2'],
        action: () => closePopup()
      },
      {
        buttonText: 'Create User',
        classNames: ['primary-button'],
        action: () => {
          // Handle form submission
          console.log('Form submitted');
          closePopup();
        }
      }
    ]
  });
};
</script>

Demo

Custom Component Dialog

Using the custom method to render dynamic components.

Code Example

<template>
  <OPopOver />
</template>

<script setup>
import { usePopup } from '../composables/usePopupComposable';
import MyCustomComponent from './MyCustomComponent.vue';

const { custom } = usePopup();

const showCustomComponentDialog = () => {
  custom(MyCustomComponent, {
    initialData: { name: '', email: '' }
  }, {
    title: 'Custom Component Demo',
    buttonConfig: [
      {
        buttonText: 'Save',
        classNames: ['primary-button'],
        action: () => {
          console.log('Saving...');
        }
      },
      {
        buttonText: 'Cancel',
        classNames: ['secondary-button-v2'],
        action: () => {
          console.log('Cancelled');
        }
      }
    ]
  });
};
</script>

Demo

Loading State Dialog

Popup with loading spinner and disabled button.

Code Example

<template>
  <OPopOver />
</template>

<script setup>
import { usePopup } from '../composables/usePopupComposable';

const { showPopup, closePopup, alert } = usePopup();

const showLoadingDialog = () => {
  showPopup({
    title: 'Processing',
    content: 'Please wait while we process your request...',
    buttonConfig: [
      {
        buttonText: 'Processing...',
        classNames: ['primary-button'],
        action: () => {},
        showSpinningLoader: true,
        isDisabled: true
      }
    ]
  });
  
  // Simulate processing
  setTimeout(() => {
    closePopup();
    alert('Complete!', 'Your request has been processed successfully.');
  }, 3000);
};
</script>

Demo

Multi-step Wizard

Complex dialog with multiple steps and dynamic button configuration.

Code Example

<template>
  <OPopOver />
</template>

<script setup>
import { usePopup } from '../composables/usePopupComposable';
import { ref, computed } from 'vue';

const { showPopup, closePopup } = usePopup();

const currentStep = ref(1);
const stepTitles = ['Basic Info', 'Configuration', 'Review'];

const showWizardDialog = () => {
  currentStep.value = 1;
  showPopup({
    title: `Step ${currentStep.value} of 3: ${stepTitles[currentStep.value - 1]}`,
    content: 'This is a multi-step wizard dialog.',
    buttonConfig: [
      {
        buttonText: 'Cancel',
        classNames: ['secondary-button-v3'],
        action: () => closePopup()
      },
      {
        buttonText: 'Next',
        classNames: ['primary-button'],
        action: () => {
          if (currentStep.value < 3) {
            currentStep.value++;
            console.log('Moving to step:', currentStep.value);
          } else {
            console.log('Wizard completed');
            closePopup();
          }
        }
      }
    ]
  });
};
</script>

Demo