tessl/npm-element-plus

A Component Library for Vue 3

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Feedback Components

Name: tessl/npm-element-plus
Author: tessl

User feedback and overlay components including dialogs, notifications, tooltips, and loading states for enhanced user experience.

Capabilities

Dialog Modal

Modal dialog for important user interactions.

declare const ElDialog: Component;

interface DialogProps {
  /** Whether dialog is visible */
  modelValue?: boolean;
  /** Dialog title */
  title?: string;
  /** Dialog width */
  width?: string | number;
  /** Whether fullscreen */
  fullscreen?: boolean;
  /** Dialog top margin */
  top?: string;
  /** Whether show close button */
  showClose?: boolean;
  /** Whether modal */
  modal?: boolean;
  /** Modal class */
  modalClass?: string;
  /** Whether append to body */
  appendToBody?: boolean;
  /** Whether lock scroll */
  lockScroll?: boolean;
  /** Custom class */
  customClass?: string;
  /** Whether close on click modal */
  closeOnClickModal?: boolean;
  /** Whether close on press escape */
  closeOnPressEscape?: boolean;
  /** Whether destroy on close */
  destroyOnClose?: boolean;
  /** Center content */
  center?: boolean;
  /** Align center */
  alignCenter?: boolean;
  /** Close delay */
  closeDelay?: number;
  /** Open delay */
  openDelay?: number;
  /** Before close hook */
  beforeClose?: (done: Function) => void;
  /** Whether draggable */
  draggable?: boolean;
  /** Overflow */
  overflow?: boolean;
}

interface DialogEmits {
  /** Update model value */
  'update:modelValue': (value: boolean) => void;
  /** Open event */
  open: () => void;
  /** Opened event */
  opened: () => void;
  /** Close event */
  close: () => void;
  /** Closed event */
  closed: () => void;
  /** Open auto focus event */
  'open-auto-focus': () => void;
  /** Close auto focus event */
  'close-auto-focus': () => void;
}

Drawer Panel

Side panel overlay for secondary content.

declare const ElDrawer: Component;

interface DrawerProps {
  /** Whether drawer is visible */
  modelValue?: boolean;
  /** Drawer title */
  title?: string;
  /** Drawer size */
  size?: string | number;
  /** Drawer direction */
  direction?: 'rtl' | 'ltr' | 'ttb' | 'btt';
  /** Whether append to body */
  appendToBody?: boolean;
  /** Whether destroy on close */
  destroyOnClose?: boolean;
  /** Whether modal */
  modal?: boolean;
  /** Whether lock scroll */
  lockScroll?: boolean;
  /** Whether close on press escape */
  closeOnPressEscape?: boolean;
  /** Whether close on click modal */
  closeOnClickModal?: boolean;
  /** Whether show close */
  showClose?: boolean;
  /** Before close hook */
  beforeClose?: (done: Function) => void;
  /** Custom class */
  customClass?: string;
  /** Whether with header */
  withHeader?: boolean;
  /** Open delay */
  openDelay?: number;
  /** Close delay */
  closeDelay?: number;
}

Tooltip

Contextual tooltip for additional information.

declare const ElTooltip: Component;

interface TooltipProps {
  /** Tooltip content */
  content?: string;
  /** Raw content (no escaping) */
  rawContent?: boolean;
  /** Tooltip placement */
  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
  /** Whether tooltip is disabled */
  disabled?: boolean;
  /** Tooltip offset */
  offset?: number;
  /** Tooltip trigger */
  trigger?: 'hover' | 'click' | 'focus' | 'contextmenu';
  /** Whether visible */
  visible?: boolean;
  /** Show after */
  showAfter?: number;
  /** Hide after */
  hideAfter?: number;
  /** Auto close */
  autoClose?: number;
  /** Tooltip class */
  tooltipClass?: string;
  /** Popper class */
  popperClass?: string;
  /** Enterable tooltip */
  enterable?: boolean;
  /** Teleported */
  teleported?: boolean;
  /** Virtual triggering */
  virtualTriggering?: boolean;
  /** Virtual ref */
  virtualRef?: any;
  /** Tooltip effect */
  effect?: 'dark' | 'light';
  /** Show arrow */
  showArrow?: boolean;
  /** Persistent */
  persistent?: boolean;
}

declare const ElTooltipV2: Component;

Popover

Popover overlay for rich content.

declare const ElPopover: Component;

interface PopoverProps {
  /** Popover trigger */
  trigger?: 'click' | 'focus' | 'hover' | 'contextmenu' | 'manual';
  /** Popover title */
  title?: string;
  /** Popover content */
  content?: string;
  /** Popover width */
  width?: string | number;
  /** Popover placement */
  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
  /** Whether popover is disabled */
  disabled?: boolean;
  /** Whether visible */
  visible?: boolean;
  /** Popover offset */
  offset?: number;
  /** Transition */
  transition?: string;
  /** Show arrow */
  showArrow?: boolean;
  /** Popper options */
  popperOptions?: any;
  /** Popper class */
  popperClass?: string;
  /** Show after */
  showAfter?: number;
  /** Hide after */
  hideAfter?: number;
  /** Auto close */
  autoClose?: number;
  /** Tab index */
  tabindex?: number;
  /** Teleported */
  teleported?: boolean;
  /** Persistent */
  persistent?: boolean;
}

declare const ElPopconfirm: Component;

interface PopconfirmProps {
  /** Confirmation title */
  title?: string;
  /** Confirm button text */
  confirmButtonText?: string;
  /** Cancel button text */
  cancelButtonText?: string;
  /** Confirm button type */
  confirmButtonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
  /** Cancel button type */
  cancelButtonType?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
  /** Icon */
  icon?: string | Component;
  /** Icon color */
  iconColor?: string;
  /** Whether hide icon */
  hideIcon?: boolean;
  /** Whether hide after */
  hideAfter?: number;
  /** Whether teleported */
  teleported?: boolean;
  /** Persistent */
  persistent?: boolean;
  /** Popover width */
  width?: string | number;
}

Alert Message

Alert messages for important information.

declare const ElAlert: Component;

interface AlertProps {
  /** Alert title */
  title?: string;
  /** Alert type */
  type?: 'success' | 'warning' | 'info' | 'error';
  /** Alert description */
  description?: string;
  /** Whether alert is closable */
  closable?: boolean;
  /** Whether center content */
  center?: boolean;
  /** Custom close text */
  closeText?: string;
  /** Whether show icon */
  showIcon?: boolean;
  /** Alert effect */
  effect?: 'light' | 'dark';
}

interface AlertEmits {
  /** Close event */
  close: (event: MouseEvent) => void;
}

Message Service

Global message notifications.

interface MessageService {
  /** Show success message */
  success(message: string | MessageOptions): MessageHandle;
  /** Show warning message */
  warning(message: string | MessageOptions): MessageHandle;
  /** Show info message */
  info(message: string | MessageOptions): MessageHandle;
  /** Show error message */
  error(message: string | MessageOptions): MessageHandle;
  /** Show message */
  (message: string | MessageOptions): MessageHandle;
  /** Close all messages */
  closeAll(): void;
}

interface MessageOptions {
  /** Message text */
  message?: string;
  /** Message type */
  type?: 'success' | 'warning' | 'info' | 'error';
  /** Custom icon */
  icon?: string | Component;
  /** Whether HTML string */
  dangerouslyUseHTMLString?: boolean;
  /** Custom class */
  customClass?: string;
  /** Duration before auto close */
  duration?: number;
  /** Whether show close button */
  showClose?: boolean;
  /** Whether center content */
  center?: boolean;
  /** Callback on close */
  onClose?: () => void;
  /** Offset from top */
  offset?: number;
  /** Whether append to body */
  appendTo?: string | HTMLElement;
  /** Whether grouping */
  grouping?: boolean;
  /** Repeat count */
  repeatNum?: number;
}

interface MessageHandle {
  /** Close message */
  close(): void;
}

declare const ElMessage: MessageService;

Notification Service

Desktop-style notifications.

interface NotificationService {
  /** Show success notification */
  success(options: NotificationOptions): NotificationHandle;
  /** Show warning notification */
  warning(options: NotificationOptions): NotificationHandle;
  /** Show info notification */
  info(options: NotificationOptions): NotificationHandle;
  /** Show error notification */
  error(options: NotificationOptions): NotificationHandle;
  /** Show notification */
  (options: NotificationOptions): NotificationHandle;
  /** Close all notifications */
  closeAll(): void;
}

interface NotificationOptions {
  /** Notification title */
  title?: string;
  /** Notification message */
  message?: string;
  /** Notification type */
  type?: 'success' | 'warning' | 'info' | 'error';
  /** Custom icon */
  icon?: string | Component;
  /** Whether HTML string */
  dangerouslyUseHTMLString?: boolean;
  /** Custom class */
  customClass?: string;
  /** Duration before auto close */
  duration?: number;
  /** Notification position */
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
  /** Whether show close button */
  showClose?: boolean;
  /** Callback on close */
  onClose?: () => void;
  /** Callback on click */
  onClick?: () => void;
  /** Offset */
  offset?: number;
  /** Whether append to body */
  appendTo?: string | HTMLElement;
  /** Z-index */
  zIndex?: number;
}

interface NotificationHandle {
  /** Close notification */
  close(): void;
}

declare const ElNotification: NotificationService;

MessageBox Service

Modal dialogs for user confirmation.

interface MessageBoxService {
  /** Show alert dialog */
  alert(message: string, title?: string, options?: MessageBoxOptions): Promise<MessageBoxResult>;
  /** Show confirm dialog */
  confirm(message: string, title?: string, options?: MessageBoxOptions): Promise<MessageBoxResult>;
  /** Show prompt dialog */
  prompt(message: string, title?: string, options?: MessageBoxOptions): Promise<MessageBoxResult>;
  /** Show message box */
  (options: MessageBoxOptions): Promise<MessageBoxResult>;
}

interface MessageBoxOptions {
  /** Dialog title */
  title?: string;
  /** Dialog message */
  message?: string;
  /** Message type */
  type?: 'success' | 'warning' | 'info' | 'error';
  /** Custom icon */
  icon?: string | Component;
  /** Whether HTML string */
  dangerouslyUseHTMLString?: boolean;
  /** Custom class */
  customClass?: string;
  /** Callback function */
  callback?: (action: string, instance: any) => void;
  /** Whether show close button */
  showClose?: boolean;
  /** Before close hook */
  beforeClose?: (action: string, instance: any, done: Function) => void;
  /** Whether distinguish cancel and close */
  distinguishCancelAndClose?: boolean;
  /** Whether lock scroll */
  lockScroll?: boolean;
  /** Whether show cancel button */
  showCancelButton?: boolean;
  /** Whether show confirm button */
  showConfirmButton?: boolean;
  /** Cancel button text */
  cancelButtonText?: string;
  /** Confirm button text */
  confirmButtonText?: string;
  /** Cancel button class */
  cancelButtonClass?: string;
  /** Confirm button class */
  confirmButtonClass?: string;
  /** Whether close on click modal */
  closeOnClickModal?: boolean;
  /** Whether close on press escape */
  closeOnPressEscape?: boolean;
  /** Whether close on hash change */
  closeOnHashChange?: boolean;
  /** Whether show input */
  showInput?: boolean;
  /** Input placeholder */
  inputPlaceholder?: string;
  /** Input type */
  inputType?: string;
  /** Input value */
  inputValue?: string;
  /** Input pattern */
  inputPattern?: RegExp;
  /** Input validator */
  inputValidator?: (value: string) => boolean | string;
  /** Input error message */
  inputErrorMessage?: string;
  /** Whether center content */
  center?: boolean;
  /** Whether draggable */
  draggable?: boolean;
  /** Whether round button */
  roundButton?: boolean;
  /** Container */
  container?: string | HTMLElement;
}

interface MessageBoxResult {
  /** Action type */
  action: 'confirm' | 'cancel' | 'close';
  /** Input value for prompt */
  value?: string;
}

declare const ElMessageBox: MessageBoxService;

Loading Overlay

Loading state overlay.

interface LoadingService {
  /** Show loading overlay */
  (options?: LoadingOptions): LoadingHandle;
}

interface LoadingOptions {
  /** Loading target element */
  target?: string | HTMLElement;
  /** Whether fullscreen */
  fullscreen?: boolean;
  /** Loading text */
  text?: string;
  /** Loading spinner */
  spinner?: string | Component;
  /** Background color */
  background?: string;
  /** Custom class */
  customClass?: string;
  /** Whether lock scroll */
  lock?: boolean;
}

interface LoadingHandle {
  /** Close loading */
  close(): void;
}

declare const ElLoading: LoadingService;

// Loading directive
interface LoadingDirective {
  /** Whether loading */
  loading?: boolean;
  /** Loading text */
  'element-loading-text'?: string;
  /** Loading spinner */
  'element-loading-spinner'?: string;
  /** Loading background */
  'element-loading-background'?: string;
  /** Loading custom class */
  'element-loading-custom-class'?: string;
}

Types

type ComponentSize = '' | 'large' | 'default' | 'small';

interface Component {
  name?: string;
  props?: Record<string, any>;
  emits?: string[] | Record<string, any>;
  setup?: Function;
}

Install with Tessl CLI