JSPM

anq-modal

0.0.17
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q19207F
  • License MIT

A powerful, customizable modal component for Quasar Framework and Vue 3 applications. Features include responsive design, animations, form handling, and seamless integration with Quasar's design system.

Package Exports

  • anq-modal

Readme

An Quasar Modal

A flexible and customizable modal component built with Vue 3, Quasar, and TypeScript.

Installation

npm install anq-modal

Quick Start

<template>
  <AnqModal
    ref="modalRef"
    title="My Modal"
    @okClick="onModalOk"
  >
    <template #content>
      <div>Your content here</div>
    </template>
  </AnqModal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { AnqModal } from 'anq-modal';

const modalRef = ref<InstanceType<typeof AnqModal> | null>(null);

// Show modal
modalRef.value?.show();

// Hide modal
modalRef.value?.hide();
</script>

Features

  • 🎯 Built with Vue 3 and TypeScript
  • 🎨 Quasar Framework integration
  • 🎭 Customizable slots for content and buttons
  • 🔒 Optional persistent mode
  • 🎮 Programmatic control
  • 🎨 Customizable styling
  • 📱 Responsive design

Props

Prop Type Default Description
title string 'Title' Modal title
persistent boolean false If true, modal can't be closed by clicking outside
hideOkBtn boolean false Hide the OK button
hideActions boolean false Hide the entire actions section
okLabel string 'Ok' Label for the OK button
cancelLabel string 'Cancel' Label for the Cancel button
btnsColor string 'primary' Color for the buttons
modalCardProps object {} Props to pass to the underlying q-card component

Events

Event Description
okClick Emitted when OK button is clicked
hide Emitted when modal is hidden

Slots

Slot Props Description
content - Main content of the modal
close-icon-btn { color, disable } Custom close button
cancel-btn { color, disable, label } Custom cancel button
ok-btn { click, color, label } Custom OK button

Methods

Method Description
show() Show the modal
hide() Hide the modal

Example with Custom Slots

<template>
  <AnqModal
    ref="modalRef"
    title="Custom Modal"
    :persistent="true"
  >
    <template #content>
      <div class="p-4">
        <p>Custom content here</p>
      </div>
    </template>
    
    <template #close-icon-btn="{ color }">
      <q-btn icon="close" :color="color" round flat v-close-popup />
    </template>
    
    <template #cancel-btn="{ color, label }">
      <q-btn :color="color" :label="label" flat v-close-popup />
    </template>
    
    <template #ok-btn="{ click, color, label }">
      <q-btn :color="color" :label="label" @click="click" />
    </template>
  </AnqModal>
</template>

Dependencies

  • Vue 3
  • Quasar Framework
  • TypeScript

License

MIT

Author

Aymane Nahji