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

Utility Components

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

Utility components and directives for enhanced functionality including icons, scrollbars, infinite scroll, and focus management.

Capabilities

Icon Component

Icon wrapper for consistent icon display.

declare const ElIcon: Component;

interface IconProps {
  /** Icon size */
  size?: string | number;
  /** Icon color */
  color?: string;
}

Custom Scrollbar

Enhanced scrollbar with custom styling.

declare const ElScrollbar: Component;

interface ScrollbarProps {
  /** Scrollbar height */
  height?: string | number;
  /** Maximum height */
  maxHeight?: string | number;
  /** Whether native scrollbar */
  native?: boolean;
  /** Wrap style */
  wrapStyle?: string | object;
  /** Wrap class */
  wrapClass?: string;
  /** View style */
  viewStyle?: string | object;
  /** View class */
  viewClass?: string;
  /** Scrollbar tag */
  tag?: string;
  /** Whether always show scrollbar */
  always?: boolean;
  /** Minimum thumb size */
  minSize?: number;
  /** Scrollbar ID */
  id?: string;
  /** ARIA label */
  ariaLabel?: string;
  /** ARIA orientation */
  ariaOrientation?: 'horizontal' | 'vertical';
}

interface ScrollbarEmits {
  /** Scroll event */
  scroll: (event: Event) => void;
}

interface ScrollbarMethods {
  /** Set scroll top */
  setScrollTop: (scrollTop: number) => void;
  /** Set scroll left */
  setScrollLeft: (scrollLeft: number) => void;
  /** Update scrollbar */
  update: () => void;
}

Back to Top

Scroll to top button.

declare const ElBacktop: Component;

interface BacktopProps {
  /** Scroll target */
  target?: string;
  /** Visibility height threshold */
  visibilityHeight?: number;
  /** Back to top position right */
  right?: number;
  /** Back to top position bottom */
  bottom?: number;
}

interface BacktopEmits {
  /** Click event */
  click: (event: MouseEvent) => void;
}

Affix Component

Fixed positioning component.

declare const ElAffix: Component;

interface AffixProps {
  /** Offset from top */
  offset?: number;
  /** Position */
  position?: 'top' | 'bottom';
  /** Target container */
  target?: string;
  /** Z-index */
  zIndex?: number;
}

interface AffixEmits {
  /** Change event */
  change: (fixed: boolean) => void;
  /** Scroll event */
  scroll: (value: { scrollTop: number; fixed: boolean }) => void;
}

Image Component

Enhanced image with lazy loading and preview.

declare const ElImage: Component;

interface ImageProps {
  /** Image source */
  src?: string;
  /** Image fit mode */
  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
  /** Whether hide on load error */
  hideOnClickModal?: boolean;
  /** Whether lazy load */
  lazy?: boolean;
  /** Scroll container for lazy loading */
  scrollContainer?: string | HTMLElement;
  /** Alternative text */
  alt?: string;
  /** Referrer policy */
  referrerPolicy?: string;
  /** Whether preview disabled */
  previewDisabled?: boolean;
  /** Preview src list */
  previewSrcList?: string[];
  /** Z-index for preview */
  zIndex?: number;
  /** Initial index */
  initialIndex?: number;
  /** Whether infinite preview */
  infinite?: boolean;
  /** Close on press escape */
  closeOnPressEscape?: boolean;
  /** Preview teleported */
  previewTeleported?: boolean;
  /** Loading slot */
  loading?: string;
  /** Error slot */
  error?: string;
}

interface ImageEmits {
  /** Load event */
  load: (event: Event) => void;
  /** Error event */
  error: (event: Event) => void;
  /** Switch event */
  switch: (index: number) => void;
  /** Close preview */
  close: () => void;
  /** Show preview */
  show: () => void;
}

declare const ElImageViewer: Component;

interface ImageViewerProps {
  /** URL list */
  urlList?: string[];
  /** Z-index */
  zIndex?: number;
  /** Initial index */
  initialIndex?: number;
  /** Whether infinite */
  infinite?: boolean;
  /** Hide on click modal */
  hideOnClickModal?: boolean;
  /** Whether teleported */
  teleported?: boolean;
  /** Close on press escape */
  closeOnPressEscape?: boolean;
}

Avatar Component

User avatar display.

declare const ElAvatar: Component;

interface AvatarProps {
  /** Avatar size */
  size?: number | ComponentSize;
  /** Avatar shape */
  shape?: 'circle' | 'square';
  /** Avatar icon */
  icon?: string | Component;
  /** Avatar source */
  src?: string;
  /** Avatar alt text */
  alt?: string;
  /** Source set */
  srcSet?: string;
  /** Fit mode */
  fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
}

interface AvatarEmits {
  /** Error event */
  error: (event: Event) => void;
}

Badge Component

Badge for displaying counts or status.

declare const ElBadge: Component;

interface BadgeProps {
  /** Badge value */
  value?: string | number;
  /** Maximum value */
  max?: number;
  /** Whether badge is dot */
  isDot?: boolean;
  /** Whether badge is hidden */
  hidden?: boolean;
  /** Badge type */
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
  /** Badge color */
  color?: string;
  /** Show zero */
  showZero?: boolean;
  /** Offset */
  offset?: [number, number];
}

Skeleton Loading

Loading skeleton for content placeholders.

declare const ElSkeleton: Component;

interface SkeletonProps {
  /** Whether skeleton is animated */
  animated?: boolean;
  /** Skeleton rows */
  rows?: number;
  /** Whether loading */
  loading?: boolean;
  /** Throttle delay */
  throttle?: number;
}

declare const ElSkeletonItem: Component;

interface SkeletonItemProps {
  /** Skeleton variant */
  variant?: 'p' | 'text' | 'h1' | 'h2' | 'h3' | 'caption' | 'button' | 'image' | 'circle' | 'rect';
}

Empty State

Empty state placeholder.

declare const ElEmpty: Component;

interface EmptyProps {
  /** Empty image */
  image?: string;
  /** Image size */
  imageSize?: number;
  /** Empty description */
  description?: string;
}

Directives

Click Outside

Detect clicks outside an element.

interface ClickOutsideDirective {
  /** Callback when clicked outside */
  onClickOutside?: (event: Event) => void;
}

declare const ClickOutside: Directive;

Infinite Scroll

Infinite scroll functionality.

interface InfiniteScrollDirective {
  /** Infinite scroll callback */
  'infinite-scroll'?: () => void;
  /** Infinite scroll distance */
  'infinite-scroll-distance'?: number;
  /** Infinite scroll disabled */
  'infinite-scroll-disabled'?: boolean;
  /** Infinite scroll delay */
  'infinite-scroll-delay'?: number;
  /** Infinite scroll immediate */
  'infinite-scroll-immediate'?: boolean;
}

declare const InfiniteScroll: Directive;

Repeat Click

Repeat click directive with configurable delay.

interface RepeatClickDirective {
  /** Repeat click interval */
  interval?: number;
  /** Initial delay */
  delay?: number;
}

declare const vRepeatClick: Directive;

Focus Trap

Focus trapping for accessibility.

interface TrapFocusDirective {
  /** Whether focus trap is active */
  trapped?: boolean;
}

declare const TrapFocus: Directive;

Mousewheel

Enhanced mousewheel event handling.

interface MousewheelDirective {
  /** Mousewheel callback */
  onMousewheel?: (event: WheelEvent) => void;
}

declare const Mousewheel: Directive;

Splitter

Resizable splitter component for layout divisions.

declare const ElSplitter: Component;

interface SplitterProps {
  /** Split direction */
  direction?: 'horizontal' | 'vertical';
  /** Split size */
  size?: string | number;
  /** Minimum size */
  min?: string | number;
  /** Maximum size */
  max?: string | number;
  /** Whether disabled */
  disabled?: boolean;
  /** Split bar thickness */
  splitBarSize?: string | number;
  /** Resiable split */
  resizable?: boolean;
}

interface SplitterEmits {
  /** Resize event */
  resize: (sizes: number[]) => void;
  /** Resize start event */
  'resize-start': (event: MouseEvent) => void;
  /** Resize end event */
  'resize-end': (event: MouseEvent) => void;
}

declare const ElSplitterPane: Component;

interface SplitterPaneProps {
  /** Pane size */
  size?: string | number;
  /** Minimum pane size */
  min?: string | number;
  /** Maximum pane size */
  max?: string | number;
  /** Whether pane is resizable */
  resizable?: boolean;
}

Types

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

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

interface Directive {
  mounted?: (el: HTMLElement, binding: any) => void;
  updated?: (el: HTMLElement, binding: any) => void;
  unmounted?: (el: HTMLElement, binding: any) => void;
}

Install with Tessl CLI