@bizan/layer

High-performance layer/modal component library for Vue 3

Features

• 🎯 8 Layer Types: Alert, Confirm, Message, Prompt, Page, Iframe, Loading, Tips
• 🎬 15 Animations: Fade, slide, zoom, flip, and more
• 🖱️ Draggable: Drag to move layers
• 📏 Resizable: 8-direction resizing
• 🔲 Maximize/Minimize: Window-like controls
• 🎨 Themeable: Light and dark themes
• 📦 Small Bundle: 9.80 KB (gzipped)
• 🔧 Flexible: Extensive API and options
• 📱 Responsive: Mobile-friendly
• ♿ Accessible: Keyboard navigation support

Installation

# Using pnpm
pnpm add @bizan/layer vue

# Using npm
npm install @bizan/layer vue

# Using yarn
yarn add @bizan/layer vue

Quick Start

Method 1: Functional API

import { BiZanLayer } from '@bizan/layer';
import '@bizan/layer/style.css';

// Alert
BiZanLayer.alert({
  title: 'Alert',
  content: 'This is an alert message',
});

// Confirm
BiZanLayer.confirm({
  title: 'Confirm',
  content: 'Are you sure?',
  onConfirm: () => console.log('Confirmed'),
  onCancel: () => console.log('Cancelled'),
});

// Message
BiZanLayer.message({
  content: 'Operation successful!',
  type: 'success',
  duration: 3000,
});

// Loading
const loadingId = BiZanLayer.loading({
  content: 'Loading...',
});
// Close loading
BiZanLayer.close(loadingId);

Method 2: Vue Component

<template>
  <button @click="showLayer = true">Open Layer</button>
  
  <BiZanLayerComponent
    v-model:visible="showLayer"
    title="Layer Title"
    :width="600"
    :height="400"
    draggable
    resizable
  >
    <p>Layer content goes here</p>
  </BiZanLayerComponent>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BiZanLayerComponent } from '@bizan/layer';
import '@bizan/layer/style.css';

const showLayer = ref(false);
</script>

Method 3: Vue Directive

<template>
  <button v-layer:alert="{ title: 'Hello', content: 'World' }">
    Click Me
  </button>
</template>

<script setup lang="ts">
import { vLayer } from '@bizan/layer';
import '@bizan/layer/style.css';
</script>

Method 4: Composition API

<script setup lang="ts">
import { useLayer } from '@bizan/layer';
import '@bizan/layer/style.css';

const { alert, confirm, message, loading } = useLayer();

function showAlert() {
  alert({
    title: 'Alert',
    content: 'This is an alert',
  });
}

async function showConfirm() {
  const result = await confirm({
    title: 'Confirm',
    content: 'Are you sure?',
  });
  console.log('User confirmed:', result);
}
</script>

Layer Types

Alert

Simple alert dialog.

BiZanLayer.alert({
  title: 'Alert',
  content: 'This is an alert message',
  confirmText: 'OK',
  onConfirm: () => console.log('OK clicked'),
});

Confirm

Confirmation dialog with confirm/cancel buttons.

BiZanLayer.confirm({
  title: 'Confirm',
  content: 'Are you sure you want to delete this item?',
  confirmText: 'Delete',
  cancelText: 'Cancel',
  onConfirm: () => console.log('Confirmed'),
  onCancel: () => console.log('Cancelled'),
});

Message

Toast-style message notification.

BiZanLayer.message({
  content: 'Operation successful!',
  type: 'success', // 'success' | 'error' | 'warning' | 'info'
  duration: 3000,
  position: 'top', // 'top' | 'bottom' | 'center'
});

Prompt

Input dialog for user input.

BiZanLayer.prompt({
  title: 'Enter your name',
  placeholder: 'Name',
  defaultValue: '',
  onConfirm: (value) => console.log('Input:', value),
});

Page

Full-page layer for complex content.

BiZanLayer.page({
  title: 'Page Layer',
  content: '<div>Complex content here</div>',
  width: '80%',
  height: '80%',
});

Iframe

Embed external pages.

BiZanLayer.iframe({
  title: 'External Page',
  url: 'https://example.com',
  width: 800,
  height: 600,
});

Loading

Loading indicator.

const loadingId = BiZanLayer.loading({
  content: 'Loading...',
  shade: true,
});

// Close after operation
setTimeout(() => {
  BiZanLayer.close(loadingId);
}, 2000);

Tips

Tooltip-style tips.

BiZanLayer.tips({
  content: 'This is a tip',
  target: element,
  position: 'top', // 'top' | 'bottom' | 'left' | 'right'
  duration: 2000,
});

Features

Animations

15 built-in animation effects:

BiZanLayer.alert({
  title: 'Animated',
  content: 'With animation',
  animation: 'fadeIn', // or 'slideDown', 'zoomIn', 'flipX', etc.
  animationDuration: 300,
});

Available animations:

• fadeIn, fadeOut
• slideDown, slideUp, slideLeft, slideRight
• zoomIn, zoomOut
• flipX, flipY
• rotateIn, rotateOut
• bounceIn, bounceOut
• elastic

Draggable

Drag layers to move them:

BiZanLayer.alert({
  title: 'Draggable',
  content: 'Drag me!',
  draggable: true,
  dragHandle: '.layer-title', // Optional: specify drag handle
});

Resizable

Resize layers from 8 directions:

BiZanLayer.page({
  title: 'Resizable',
  content: 'Resize me!',
  resizable: true,
  minWidth: 300,
  minHeight: 200,
  maxWidth: 1200,
  maxHeight: 800,
});

Maximize/Minimize

Window-like controls:

BiZanLayer.page({
  title: 'Window',
  content: 'Content',
  showMaximize: true,
  showMinimize: true,
});

Shade (Overlay)

Background overlay:

BiZanLayer.alert({
  title: 'With Shade',
  content: 'Content',
  shade: true,
  shadeOpacity: 0.5,
  shadeClose: true, // Click shade to close
});

Auto Close

Automatically close after duration:

BiZanLayer.message({
  content: 'Auto close in 3 seconds',
  duration: 3000,
});

Themes

Built-in light and dark themes:

BiZanLayer.alert({
  title: 'Dark Theme',
  content: 'Content',
  theme: 'dark',
});

API Reference

BiZanLayer

interface LayerConfig {
  type?: LayerType;
  title?: string;
  content?: string | HTMLElement;
  width?: number | string;
  height?: number | string;
  position?: Position | 'center' | 'top' | 'bottom' | 'left' | 'right';
  animation?: AnimationType;
  draggable?: boolean;
  resizable?: boolean;
  shade?: boolean;
  shadeClose?: boolean;
  closeBtn?: boolean;
  duration?: number;
  onOpen?: () => void;
  onClose?: () => void;
  // ... and more
}

class BiZanLayer {
  static alert(config: AlertOptions): string;
  static confirm(config: ConfirmOptions): Promise<boolean>;
  static message(config: MessageOptions): string;
  static prompt(config: PromptOptions): Promise<string | null>;
  static page(config: PageOptions): string;
  static iframe(config: IframeOptions): string;
  static loading(config: LoadingOptions): string;
  static tips(config: TipsOptions): string;
  static close(layerIndex: string): void;
  static closeAll(): void;
}

See full API documentation for details.

Examples

Check out the examples directory:

• Basic Example - All layer types
• Vue Component Example - Vue integration

Documentation

• API Documentation
• Usage Guide

Performance

BiZanLayer is optimized for performance:

• Render Time: < 16ms
• Animation: 60 FPS
• Bundle Size: 9.80 KB (gzipped)
• Memory: Efficient layer management

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

TypeScript

Full TypeScript support:

import type {
  LayerConfig,
  LayerType,
  AnimationType,
  Position,
  AlertOptions,
  ConfirmOptions,
} from '@bizan/layer';

License

MIT © BiZan Team

Contributing

See the Contributing Guide for details.

Support

• Documentation
• GitHub Issues
• Discussions