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

Navigation Components

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

Navigation and menu components for building intuitive user interfaces with breadcrumbs, tabs, menus, and step indicators.

Capabilities

Menu Navigation

Hierarchical navigation menu system.

declare const ElMenu: Component;

interface MenuProps {
  /** Menu mode */
  mode?: 'horizontal' | 'vertical';
  /** Whether menu is collapsed */
  collapse?: boolean;
  /** Background color */
  backgroundColor?: string;
  /** Text color */
  textColor?: string;
  /** Active text color */
  activeTextColor?: string;
  /** Default active menu */
  defaultActive?: string;
  /** Default opened submenus */
  defaultOpeneds?: string[];
  /** Whether only one submenu can be opened */
  uniqueOpened?: boolean;
  /** Whether menu items are router links */
  router?: boolean;
  /** Collapse transition */
  collapseTransition?: boolean;
}

declare const ElMenuItem: Component;

interface MenuItemProps {
  /** Menu item index */
  index: string;
  /** Route object */
  route?: RouteLocationRaw;
  /** Whether menu item is disabled */
  disabled?: boolean;
}

declare const ElSubMenu: Component;

interface SubMenuProps {
  /** Submenu index */
  index: string;
  /** Popper class */
  popperClass?: string;
  /** Show timeout */
  showTimeout?: number;
  /** Hide timeout */
  hideTimeout?: number;
  /** Whether submenu is disabled */
  disabled?: boolean;
}

declare const ElMenuItemGroup: Component;

interface MenuItemGroupProps {
  /** Group title */
  title?: string;
}

Tab Navigation

Tabbed navigation interface.

declare const ElTabs: Component;

interface TabsProps {
  /** Active tab name */
  modelValue?: string | number;
  /** Tab type */
  type?: '' | 'card' | 'border-card';
  /** Whether tabs are closable */
  closable?: boolean;
  /** Whether tabs can be added */
  addable?: boolean;
  /** Whether tabs are editable */
  editable?: boolean;
  /** Tab position */
  tabPosition?: 'top' | 'right' | 'bottom' | 'left';
  /** Whether tabs stretch */
  stretch?: boolean;
  /** Custom tab class */
  tabClass?: string;
}

interface TabsEmits {
  /** Tab click event */
  'tab-click': (pane: TabPaneContext, event: Event) => void;
  /** Tab change event */
  'tab-change': (name: string | number) => void;
  /** Tab remove event */
  'tab-remove': (name: string | number) => void;
  /** Tab add event */
  'tab-add': () => void;
}

declare const ElTabPane: Component;

interface TabPaneProps {
  /** Tab label */
  label?: string;
  /** Tab name */
  name?: string | number;
  /** Whether tab is disabled */
  disabled?: boolean;
  /** Whether tab is closable */
  closable?: boolean;
  /** Whether tab is lazy */
  lazy?: boolean;
}

Breadcrumb Navigation

Breadcrumb trail navigation.

declare const ElBreadcrumb: Component;

interface BreadcrumbProps {
  /** Separator character */
  separator?: string;
  /** Separator icon */
  separatorIcon?: string | Component;
}

declare const ElBreadcrumbItem: Component;

interface BreadcrumbItemProps {
  /** Navigation route */
  to?: string | object;
  /** Whether to replace current route */
  replace?: boolean;
}

Steps Navigation

Step-by-step navigation indicator.

declare const ElSteps: Component;

interface StepsProps {
  /** Current active step */
  active?: number;
  /** Process status */
  processStatus?: 'wait' | 'process' | 'finish' | 'error' | 'success';
  /** Finish status */
  finishStatus?: 'wait' | 'process' | 'finish' | 'error' | 'success';
  /** Steps direction */
  direction?: 'horizontal' | 'vertical';
  /** Whether to use simple style */
  simple?: boolean;
  /** Alignment in simple mode */
  alignCenter?: boolean;
  /** Space between steps */
  space?: number | string;
}

declare const ElStep: Component;

interface StepProps {
  /** Step title */
  title?: string;
  /** Step description */
  description?: string;
  /** Step icon */
  icon?: string | Component;
  /** Step status */
  status?: 'wait' | 'process' | 'finish' | 'error' | 'success';
}

Dropdown Menu

Dropdown menu with multiple actions.

declare const ElDropdown: Component;

interface DropdownProps {
  /** Trigger mode */
  trigger?: 'hover' | 'click' | 'contextmenu';
  /** Menu items */
  menuItems?: DropdownMenuItem[];
  /** Whether to hide menu after click */
  hideOnClick?: boolean;
  /** Show timeout */
  showTimeout?: number;
  /** Hide timeout */
  hideTimeout?: number;
  /** Tab index */
  tabindex?: number;
  /** Max height */
  maxHeight?: number | string;
  /** Popper class */
  popperClass?: string;
  /** Whether dropdown is disabled */
  disabled?: boolean;
  /** Split button */
  splitButton?: boolean;
  /** Button type when split */
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
  /** Button size */
  size?: ComponentSize;
}

interface DropdownMenuItem {
  label: string;
  value: any;
  disabled?: boolean;
  divided?: boolean;
  icon?: string | Component;
  command?: any;
}

declare const ElDropdownMenu: Component;

declare const ElDropdownItem: Component;

interface DropdownItemProps {
  /** Command value */
  command?: any;
  /** Whether item is disabled */
  disabled?: boolean;
  /** Whether to show divider */
  divided?: boolean;
  /** Item icon */
  icon?: string | Component;
}

Page Header

Page header with navigation and actions.

declare const ElPageHeader: Component;

interface PageHeaderProps {
  /** Page title */
  title?: string;
  /** Breadcrumb content */
  content?: string;
  /** Icon */
  icon?: string | Component;
}

interface PageHeaderEmits {
  /** Back button click */
  back: () => void;
}

Anchor Navigation

Anchor navigation for in-page scrolling.

declare const ElAnchor: Component;

interface AnchorProps {
  /** Container selector for scrolling */
  container?: string;
  /** Offset from top */
  offset?: number;
  /** Bound offset */
  bound?: number;
  /** Anchor type */
  type?: 'default' | 'underline';
  /** Direction */
  direction?: 'vertical' | 'horizontal';
}

declare const ElAnchorLink: Component;

interface AnchorLinkProps {
  /** Link href */
  href: string;
  /** Link title */
  title?: string;
}

Segmented Controls

Segmented control component for option selection.

declare const ElSegmented: Component;

interface SegmentedProps {
  /** Current value */
  modelValue?: string | number;
  /** Options array */
  options?: SegmentedOption[];
  /** Component size */
  size?: ComponentSize;
  /** Whether disabled */
  disabled?: boolean;
  /** Block layout */
  block?: boolean;
}

interface SegmentedOption {
  /** Option label */
  label: string;
  /** Option value */
  value: string | number;
  /** Whether disabled */
  disabled?: boolean;
  /** Icon */
  icon?: string | Component;
}

interface SegmentedEmits {
  /** Value change event */
  change: (value: string | number) => void;
  /** Update model value */
  'update:modelValue': (value: string | number) => void;
}

Tour Guide

Interactive tour component for feature introductions.

declare const ElTour: Component;

interface TourProps {
  /** Whether tour is open */
  modelValue?: boolean;
  /** Tour steps */
  steps?: TourStep[];
  /** Current step index */
  current?: number;
  /** Show arrow */
  showArrow?: boolean;
  /** Placement */
  placement?: TourPlacement;
  /** Mask options */
  mask?: boolean | TourMask;
  /** Tour type */
  type?: 'default' | 'primary';
  /** Z-index */
  zIndex?: number;
}

interface TourStep {
  /** Target element selector */
  target?: string | HTMLElement;
  /** Step title */
  title?: string;
  /** Step description */
  description?: string;
  /** Step placement */
  placement?: TourPlacement;
  /** Whether show arrow */
  showArrow?: boolean;
  /** Whether show close button */
  showClose?: boolean;
  /** Whether step is closable by clicking mask */
  closeOnClickMask?: boolean;
}

interface TourMask {
  /** Mask style */
  style?: Record<string, any>;
  /** Mask color */
  color?: string;
}

type TourPlacement = 
  | 'top' | 'top-start' | 'top-end'
  | 'bottom' | 'bottom-start' | 'bottom-end'
  | 'left' | 'left-start' | 'left-end'
  | 'right' | 'right-start' | 'right-end';

interface TourEmits {
  /** Tour close event */
  close: () => void;
  /** Step change event */
  change: (current: number) => void;
  /** Finish tour event */
  finish: () => void;
}

Types

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

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

interface RouteLocationRaw {
  name?: string;
  path?: string;
  params?: Record<string, any>;
  query?: Record<string, any>;
}

interface TabPaneContext {
  uid: number;
  slots: Record<string, any>;
  props: TabPaneProps;
}

Install with Tessl CLI