element-pe 1.0.5 → 1.0.6

package/packages/utils/dom.ts

@@ -5,8 +5,8 @@ import type { CSSProperties } from 'vue'
 import type { Nullable } from './types'
 
 /* istanbul ignore next */
-const trim = function (s: string) {
-  return (s || '').replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, '')
+const trimArr = function (s: string) {
+  return (s || '').split(' ').filter((item) => !!item.trim())
 }
 
 /* istanbul ignore next */
@@ -39,7 +39,7 @@ export const once = function (
   event: string,
   fn: EventListener
 ): void {
-  const listener = function (...args: unknown[]) {
+  const listener = function (this: any, ...args: any) {
     if (fn) {
       fn.apply(this, args)
     }
@@ -49,57 +49,50 @@ export const once = function (
 }
 
 /* istanbul ignore next */
-export function hasClass(el: HTMLElement, cls: string): boolean {
+export function hasClass(el: HTMLElement | Element, cls: string): boolean {
   if (!el || !cls) return false
   if (cls.indexOf(' ') !== -1)
     throw new Error('className should not contain space.')
   if (el.classList) {
     return el.classList.contains(cls)
   } else {
-    return ` ${el.className} `.indexOf(` ${cls} `) > -1
+    const className = el.getAttribute('class') || ''
+    return className.split(' ').includes(cls)
   }
 }
 
 /* istanbul ignore next */
-export function addClass(el: HTMLElement, cls: string): void {
+export function addClass(el: HTMLElement | Element, cls: string): void {
   if (!el) return
-  let curClass = el.className
-  const classes = (cls || '').split(' ')
+  let className = el.getAttribute('class') || ''
+  const curClass = trimArr(className)
+  const classes = (cls || '')
+    .split(' ')
+    .filter((item) => !curClass.includes(item) && !!item.trim())
 
-  for (let i = 0, j = classes.length; i < j; i++) {
-    const clsName = classes[i]
-    if (!clsName) continue
-
-    if (el.classList) {
-      el.classList.add(clsName)
-    } else if (!hasClass(el, clsName)) {
-      curClass += ` ${clsName}`
-    }
-  }
-  if (!el.classList) {
-    el.className = curClass
+  if (el.classList) {
+    el.classList.add(...classes)
+  } else {
+    className += ` ${classes.join(' ')}`
+    el.setAttribute('class', className)
   }
 }
 
 /* istanbul ignore next */
-export function removeClass(el: HTMLElement, cls: string): void {
+export function removeClass(el: HTMLElement | Element, cls: string): void {
   if (!el || !cls) return
-  const classes = cls.split(' ')
-  let curClass = ` ${el.className} `
-
-  for (let i = 0, j = classes.length; i < j; i++) {
-    const clsName = classes[i]
-    if (!clsName) continue
+  const classes = trimArr(cls)
+  let curClass = el.getAttribute('class') || ''
 
-    if (el.classList) {
-      el.classList.remove(clsName)
-    } else if (hasClass(el, clsName)) {
-      curClass = curClass.replace(` ${clsName} `, ' ')
-    }
-  }
-  if (!el.classList) {
-    el.className = trim(curClass)
+  if (el.classList) {
+    el.classList.remove(...classes)
+    return
   }
+  classes.forEach((item) => {
+    curClass = curClass.replace(` ${item} `, ' ')
+  })
+  const className = trimArr(curClass).join(' ')
+  el.setAttribute('class', className)
 }
 
 /* istanbul ignore next */
@@ -111,8 +104,8 @@ export const getStyle = function (
   element: HTMLElement,
   styleName: string
 ): string {
-  if (isServer) return
-  if (!element || !styleName) return null
+  if (isServer) return ''
+  if (!element || !styleName) return ''
   styleName = camelize(styleName)
   if (styleName === 'float') {
     styleName = 'cssFloat'
@@ -120,7 +113,7 @@ export const getStyle = function (
   try {
     const style = element.style[styleName]
     if (style) return style
-    const computed = document.defaultView.getComputedStyle(element, '')
+    const computed = document.defaultView?.getComputedStyle(element, '')
     return computed ? computed[styleName] : ''
   } catch (e) {
     return element.style[styleName]
@@ -163,8 +156,8 @@ export function removeStyle(
 export const isScroll = (
   el: HTMLElement,
   isVertical?: Nullable<boolean>
-): RegExpMatchArray => {
-  if (isServer) return
+): RegExpMatchArray | null => {
+  if (isServer) return null
   const determinedDirection = isVertical === null || isVertical === undefined
   const overflow = determinedDirection
     ? getStyle(el, 'overflow')
@@ -178,7 +171,7 @@ export const isScroll = (
 export const getScrollContainer = (
   el: HTMLElement,
   isVertical?: Nullable<boolean>
-): Window | HTMLElement => {
+): Window | HTMLElement | undefined => {
   if (isServer) return
 
   let parent: HTMLElement = el

package/packages/utils/props.ts

@@ -1,6 +1,6 @@
+import { warn } from 'vue'
 import { isObject } from '@vue/shared'
-import mapValues from 'lodash/mapValues'
-import { debugWarn } from './error'
+import fromPairs from 'lodash/fromPairs'
 import type { ExtractPropTypes, PropType } from '@vue/runtime-core'
 import type { Mutable } from './types'
 
@@ -102,7 +102,10 @@ export function buildProp<
   R extends boolean = false,
   V = never,
   C = never
->(option: BuildPropOption<T, D, R, V, C>): BuildPropReturn<T, D, R, V, C> {
+>(
+  option: BuildPropOption<T, D, R, V, C>,
+  key?: string
+): BuildPropReturn<T, D, R, V, C> {
   // filter native prop type and nested prop, e.g `null`, `undefined` (from `buildProps`)
   if (!isObject(option) || !!option[propKey]) return option as any
 
@@ -121,11 +124,15 @@ export function buildProp<
           if (validator) valid ||= validator(val)
 
           if (!valid && allowedValues.length > 0) {
-            debugWarn(
-              `Vue warn`,
-              `Invalid prop: Expected one of (${allowedValues.join(
-                ', '
-              )}), got value ${val}`
+            const allowValuesText = [...new Set(allowedValues)]
+              .map((value) => JSON.stringify(value))
+              .join(', ')
+            warn(
+              `Invalid prop: validation failed${
+                key ? ` for prop "${key}"` : ''
+              }. Expected one of [${allowValuesText}], got value ${JSON.stringify(
+                val
+              )}.`
             )
           }
           return valid
@@ -133,7 +140,11 @@ export function buildProp<
       : undefined
 
   return {
-    type: (type as any)?.[wrapperKey] || type,
+    type:
+      typeof type === 'object' &&
+      Object.getOwnPropertySymbols(type).includes(wrapperKey)
+        ? type[wrapperKey]
+        : type,
     required: !!required,
     default: defaultValue,
     validator: _validator,
@@ -164,9 +175,14 @@ export const buildProps = <
       : never
   }
 >(
-  options: O
+  props: O
 ) =>
-  mapValues(options, (option) => buildProp(option)) as unknown as {
+  fromPairs(
+    Object.entries(props).map(([key, option]) => [
+      key,
+      buildProp(option as any, key),
+    ])
+  ) as unknown as {
     [K in keyof O]: O[K] extends { [propKey]: boolean }
       ? O[K]
       : [O[K]] extends NativePropType

package/packages/utils/tests/dom.spec.ts

@@ -0,0 +1,183 @@
+import { hasClass, addClass, removeClass } from '../dom'
+
+const getClass = (el: Element) => {
+  if (!el) {
+    return ''
+  }
+  return el.getAttribute('class')
+}
+
+describe('Dom Utils', () => {
+  describe('hasClass', () => {
+    it('Judge whether a Element has a class', () => {
+      const div = document.createElement('div')
+      div.className = 'a b   cc'
+      expect(hasClass(div, 'a')).toBe(true)
+      expect(hasClass(div, 'ab')).toBe(false)
+      try {
+        expect(hasClass(div, 'a b'))
+      } catch (error: any) {
+        expect(error.message).toEqual('className should not contain space.')
+      }
+
+      const canvas = document.createElement('canvas')
+      canvas.className = 'canvas-a canvas-b cc'
+      expect(hasClass(canvas, 'a')).toBe(false)
+      expect(hasClass(canvas, 'canvas-a')).toBe(true)
+      //   remove classList
+      canvas.setAttribute('classList', '')
+      expect(hasClass(canvas, 'b')).toBe(false)
+      expect(hasClass(canvas, 'canvas-b')).toBe(true)
+
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+      svg.setAttribute('class', 'svg-a svg-b')
+      expect(hasClass(svg, 'a')).toBe(false)
+      expect(hasClass(svg, 'svg-a')).toBe(true)
+      //   remove classList
+      svg.setAttribute('classList', '')
+      expect(hasClass(svg, 'b')).toBe(false)
+      expect(hasClass(svg, 'svg-b')).toBe(true)
+
+      const path = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'path'
+      )
+      path.setAttribute('class', 'path-a path-b')
+      expect(hasClass(path, 'a')).toBe(false)
+      expect(hasClass(path, 'path-a')).toBe(true)
+      //   remove classList
+      path.setAttribute('classList', '')
+      expect(hasClass(path, 'b')).toBe(false)
+      expect(hasClass(path, 'path-b')).toBe(true)
+    })
+  })
+
+  describe('addClass', () => {
+    it('Add class to element', () => {
+      const div = document.createElement('div')
+      addClass(div, 'div-abc abc')
+      expect(hasClass(div, 'abc')).toBe(true)
+      expect(hasClass(div, 'div-abc')).toBe(true)
+      expect(hasClass(div, 'div')).toBe(false)
+      addClass(div, 'abc')
+      expect(getClass(div)).toEqual('div-abc abc')
+      //   remove classList
+      div.setAttribute('classList', '')
+      addClass(div, 'div-box con')
+      expect(hasClass(div, 'con')).toBe(true)
+      expect(hasClass(div, 'div-box')).toBe(true)
+      expect(hasClass(div, 'box')).toBe(false)
+      addClass(div, 'con')
+      expect(getClass(div)).toEqual('div-abc abc div-box con')
+
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+      addClass(svg, 'svg-abc svg')
+      expect(hasClass(svg, 'svg')).toBe(true)
+      expect(hasClass(svg, 'svg-abc')).toBe(true)
+      expect(hasClass(svg, 'abc')).toBe(false)
+      expect(hasClass(svg, 'sv')).toBe(false)
+      addClass(svg, 'svg')
+      expect(getClass(svg)).toEqual('svg-abc svg')
+      addClass(svg, 'svg-aa     space')
+      expect(getClass(svg)).toEqual('svg-abc svg svg-aa space')
+      //   remove classList
+      svg.setAttribute('classList', '')
+      addClass(svg, 'svg-abc-a svg-b')
+      expect(hasClass(svg, 'svg')).toBe(true)
+      expect(hasClass(svg, 'svg-abc')).toBe(true)
+      expect(hasClass(svg, 'abc')).toBe(false)
+      expect(hasClass(svg, 'sv')).toBe(false)
+      expect(hasClass(svg, 'svg-abc-a')).toBe(true)
+      expect(hasClass(svg, 'svg-b')).toBe(true)
+      expect(hasClass(svg, 'a')).toBe(false)
+
+      const path = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'path'
+      )
+      addClass(path, 'path-abc path')
+      expect(hasClass(path, 'path')).toBe(true)
+      expect(hasClass(path, 'path-abc')).toBe(true)
+      expect(hasClass(path, 'abc')).toBe(false)
+      expect(hasClass(path, 'pa')).toBe(false)
+      addClass(path, 'path')
+      expect(getClass(path)).toEqual('path-abc path')
+      //   remove classList
+      path.setAttribute('classList', '')
+      expect(hasClass(path, 'path')).toBe(true)
+      expect(hasClass(path, 'path-abc')).toBe(true)
+      expect(hasClass(path, 'abc')).toBe(false)
+      expect(hasClass(path, 'pa')).toBe(false)
+    })
+  })
+
+  describe('removeClass', () => {
+    it('Remove class on element', () => {
+      const div = document.createElement('div')
+      addClass(div, 'div-abc abc ab bb cc')
+
+      removeClass(div, 'abc')
+      expect(hasClass(div, 'abc')).toBe(false)
+
+      expect(hasClass(div, 'bb')).toBe(true)
+      expect(hasClass(div, 'cc')).toBe(true)
+
+      removeClass(div, 'bb cc')
+      expect(hasClass(div, 'bb')).toBe(false)
+      expect(hasClass(div, 'cc')).toBe(false)
+      expect(getClass(div)).toEqual('div-abc ab')
+
+      //   remove classList
+      div.setAttribute('classList', '')
+      addClass(div, 'div-box con')
+      removeClass(div, 'div-box con')
+      expect(hasClass(div, 'con')).toBe(false)
+      expect(hasClass(div, 'div-box')).toBe(false)
+      expect(getClass(div)).toBe('div-abc ab')
+
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+      addClass(svg, 'svg-abc svg')
+      removeClass(svg, 'svg-abc     svg')
+      expect(hasClass(svg, 'svg-abc')).toBe(false)
+      expect(hasClass(svg, 'abc')).toBe(false)
+      expect(getClass(svg)).toEqual('')
+      // remove classList
+      svg.setAttribute('classList', '')
+      addClass(svg, 'svg-abc-a svg-b')
+      expect(hasClass(svg, 'svg')).toBe(false)
+      expect(hasClass(svg, 'svg-abc')).toBe(false)
+      expect(hasClass(svg, 'abc')).toBe(false)
+      expect(hasClass(svg, 'svg-abc-a')).toBe(true)
+      expect(hasClass(svg, 'svg-b')).toBe(true)
+      removeClass(svg, 'svg')
+      expect(getClass(svg)).toEqual('svg-abc-a svg-b')
+      removeClass(svg, 'svg-abc-a')
+      expect(hasClass(svg, 'svg-abc-a')).toBe(false)
+      expect(hasClass(svg, 'svg-b')).toBe(true)
+
+      const path = document.createElementNS(
+        'http://www.w3.org/2000/svg',
+        'path'
+      )
+      addClass(path, 'path-abc path')
+      expect(hasClass(path, 'path')).toBe(true)
+      expect(hasClass(path, 'path-abc')).toBe(true)
+      expect(hasClass(path, 'abc')).toBe(false)
+      expect(hasClass(path, 'pa')).toBe(false)
+      removeClass(path, 'path')
+      expect(hasClass(path, 'path')).toBe(false)
+      expect(hasClass(path, 'path-abc')).toBe(true)
+      //   remove classList
+      path.setAttribute('classList', '')
+      addClass(path, 'path path-1 path2')
+      expect(hasClass(path, 'path')).toBe(true)
+      expect(hasClass(path, 'path-1')).toBe(true)
+      expect(getClass(path)).toEqual('path-abc path path-1 path2')
+      removeClass(path, 'path')
+      expect(hasClass(path, 'path')).toBe(false)
+      expect(getClass(path)).toEqual('path-abc path-1 path2')
+      removeClass(path, 'path-abc path-1 path2')
+      expect(getClass(path)).toEqual('')
+    })
+  })
+})

package/packages/utils/util.ts

@@ -14,10 +14,10 @@ import {
 } from '@vue/shared'
 import isEqualWith from 'lodash/isEqualWith'
 import isServer from './isServer'
-import { debugWarn } from './error'
+import { debugWarn, throwError } from './error'
 
 import type { ComponentPublicInstance, CSSProperties, Ref } from 'vue'
-import type { AnyFunction, TimeoutHandle, Nullable } from './types'
+import type { TimeoutHandle, Nullable } from './types'
 
 export const SCOPE = 'Util'
 
@@ -68,7 +68,7 @@ export function getPropByPath(
         tempObj = tempObj[key]
       } else {
         if (strict) {
-          throw new Error('please transfer a valid prop path to form item!')
+          throwError(SCOPE, 'Please transfer a valid prop path to form item!')
         }
         break
       }
@@ -148,18 +148,17 @@ export const isBool = (val: unknown): val is boolean => typeof val === 'boolean'
 export const isNumber = (val: unknown): val is number => typeof val === 'number'
 export const isHTMLElement = (val: unknown) => toRawType(val).startsWith('HTML')
 
-export function rafThrottle<T extends AnyFunction<any>>(
-  fn: T
-): AnyFunction<void> {
+export function rafThrottle<T extends (...args: any) => any>(fn: T): T {
   let locked = false
-  return function (...args: any[]) {
+  return function (this: ThisParameterType<T>, ...args: any[]) {
     if (locked) return
     locked = true
+
     window.requestAnimationFrame(() => {
-      fn.apply(this, args)
+      Reflect.apply(fn, this, args)
       locked = false
     })
-  }
+  } as T
 }
 
 export const clearTimer = (timer: Ref<TimeoutHandle>) => {

package/tags.json

@@ -1 +1 @@
-{"el-affix":{"attributes":["offset","position","target","z-index","change","scroll"],"description":"Fix the element to a specific visible area.\n\n[Docs](https://element-plus.org/en-US/component/affix.html#affix)"},"el-alert":{"attributes":["title","type","description","closable","center","close-text","show-icon","effect","close"],"description":"Displays important alert messages.\n\n[Docs](https://element-plus.org/en-US/component/alert.html#alert)"},"el-avatar":{"attributes":["icon","size","shape","src","src-set","alt","fit","error"],"description":"Avatars can be used to represent people or objects. It supports images, Icons, or characters.\n\n[Docs](https://element-plus.org/en-US/component/avatar.html#avatar)"},"el-backtop":{"attributes":["target","visibility-height","right","bottom","click"],"description":"A button to back to top\n\n[Docs](https://element-plus.org/en-US/component/backtop.html#backtop)"},"el-badge":{"attributes":["value","max","is-dot","hidden","type"],"description":"A number or status mark on buttons and icons.\n\n[Docs](https://element-plus.org/en-US/component/badge.html#badge)"},"el-breadcrumb":{"attributes":["separator","separator-class"],"subtags":["el-breadcrumb-item"],"description":"Displays the location of the current page, making it easier to browser back.\n\n[Docs](https://element-plus.org/en-US/component/breadcrumb.html#breadcrumb)"},"el-breadcrumb-item":{"attributes":["to","replace"],"description":"[Docs](https://element-plus.org/en-US/component/breadcrumb.html#breadcrumb-item)"},"el-button":{"attributes":["size","type","plain","round","circle","loading","disabled","icon","autofocus","native-type"],"description":"Commonly used button.\n\n[Docs](https://element-plus.org/en-US/component/button.html#button)"},"el-button-group":{"attributes":["size"],"subtags":["el-button"],"description":"[Docs](https://element-plus.org/en-US/component/button.html#button-group)"},"el-calendar":{"attributes":["model-value","range"],"description":"Display date.\n\n[Docs](https://element-plus.org/en-US/component/calendar.html#calendar)"},"el-card":{"attributes":["header","body-style","shadow"],"description":"Integrate information in a card container.\n\n[Docs](https://element-plus.org/en-US/component/card.html#card)"},"el-carousel":{"attributes":["height","initial-index","trigger","autoplay","interval","indicator-position","arrow","type","loop","direction","pause-on-hover","change"],"subtags":["el-carousel-item"],"description":"Loop a series of images or texts in a limited space\n\n[Docs](https://element-plus.org/en-US/component/carousel.html#carousel)"},"el-carousel-item":{"attributes":["name","label"],"description":"[Docs](https://element-plus.org/en-US/component/carousel.html#carousel-item)"},"el-cascader":{"attributes":["model-value","options","props","size","placeholder","disabled","clearable","show-all-levels","collapse-tags","separator","filterable","filter-method","debounce","before-filter","popper-class","popper-append-to-body","change","expand-change","blur","focus","visible-change","remove-tag"],"description":"If the options have a clear hierarchical structure, Cascader can be used to view and select them.\n\n[Docs](https://element-plus.org/en-US/component/cascader.html#cascader)"},"el-cascader-panel":{"attributes":["model-value","options","props","change","expand-change"],"description":"[Docs](https://element-plus.org/en-US/component/cascader.html#cascaderpanel)"},"el-checkbox":{"attributes":["model-value","label","true-label","false-label","disabled","border","size","name","checked","indeterminate","change"],"description":"A group of options for multiple choices.\n\n[Docs](https://element-plus.org/en-US/component/checkbox.html#checkbox)"},"el-checkbox-group":{"attributes":["model-value","size","disabled","min","max","text-color","fill","change"],"subtags":["el-checkbox","el-checkbox-button"],"description":"[Docs](https://element-plus.org/en-US/component/checkbox.html#checkbox-group)"},"el-checkbox-button":{"attributes":["label","true-label","false-label","disabled","name","checked"],"description":"[Docs](https://element-plus.org/en-US/component/checkbox.html#checkbox-button)"},"el-collapse":{"attributes":["model-value","accordion","change"],"subtags":["el-collapse-item"],"description":"Use Collapse to store contents.\n\n[Docs](https://element-plus.org/en-US/component/collapse.html#collapse)"},"el-collapse-item":{"attributes":["name","title","disabled"],"description":"[Docs](https://element-plus.org/en-US/component/collapse.html#collapse-item)"},"el-color-picker":{"attributes":["model-value","disabled","size","show-alpha","color-format","popper-class","predefine","change","active-change"],"description":"ColorPicker is a color selector supporting multiple color formats.\n\n[Docs](https://element-plus.org/en-US/component/color-picker.html#colorpicker)"},"el-config-provider":{"description":"[Docs](https://element-plus.org/en-US/component/config-provider.html#configprovider)"},"el-container":{"attributes":["direction"],"subtags":["el-container","el-header","el-aside","el-main","el-footer"],"description":"Container components for scaffolding basic structure of the page:\n\n[Docs](https://element-plus.org/en-US/component/container.html#container)"},"el-header":{"attributes":["height"],"description":"[Docs](https://element-plus.org/en-US/component/container.html#header)"},"el-aside":{"attributes":["width"],"description":"[Docs](https://element-plus.org/en-US/component/container.html#aside)"},"el-main":{"description":"[Docs](https://element-plus.org/en-US/component/container.html#main)"},"el-footer":{"attributes":["height"],"description":"[Docs](https://element-plus.org/en-US/component/container.html#footer)"},"el-date-picker":{"attributes":["model-value","readonly","disabled","size","editable","clearable","placeholder","start-placeholder","end-placeholder","type","format","popper-class","range-separator","default-value","default-time","value-format","name","unlink-panels","prefix-icon","clear-icon","validate-event","disabled-date","shortcuts","change","blur","focus","calendar-change"],"description":"Use Date Picker for date input.\n\n[Docs](https://element-plus.org/en-US/component/date-picker.html#datepicker)"},"el-descriptions":{"attributes":["border","column","direction","size","title","extra"],"subtags":["el-descriptions-item"],"description":"Display multiple fields in list form.\n\n[Docs](https://element-plus.org/en-US/component/descriptions.html#descriptions)"},"el-descriptions-item":{"attributes":["label","span","width","min-width","align","label-align","class-name","label-class-name"],"description":"[Docs](https://element-plus.org/en-US/component/descriptions.html#descriptions-item)"},"el-dialog":{"attributes":["model-value","title","width","fullscreen","top","modal","append-to-body","lock-scroll","custom-class","open-delay","close-delay","close-on-click-modal","close-on-press-escape","show-close","before-close","center","destroy-on-close","open","opened","close","closed"],"description":"Informs users while preserving the current page state.\n\n[Docs](https://element-plus.org/en-US/component/dialog.html#dialog)"},"el-divider":{"attributes":["direction","content-position"],"description":"The dividing line that separates the content.\n\n[Docs](https://element-plus.org/en-US/component/divider.html#divider)"},"el-drawer":{"attributes":["model-value","append-to-body","lock-scroll","before-close","close-on-click-modal","close-on-press-escape","open-delay","close-delay","custom-class","destroy-on-close","modal","direction","show-close","size","title","with-header","modal-class","z-index","open","opened","close","closed"],"description":"Sometimes, `Dialog` does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like `terms & conditions`, `Drawer` has almost identical API with `Dialog`, but it introduces different user experience.\n\n[Docs](https://element-plus.org/en-US/component/drawer.html#drawer)"},"el-dropdown":{"attributes":["type","size","max-height","split-button","disabled","placement","trigger","hide-on-click","show-timeout","hide-timeout","tabindex","click","command","visible-change"],"subtags":["el-dropdown-menu"],"description":"Toggleable menu for displaying lists of links and actions.\n\n[Docs](https://element-plus.org/en-US/component/dropdown.html#dropdown)"},"el-dropdown-menu":{"subtags":["el-dropdown-item"],"description":"[Docs](https://element-plus.org/en-US/component/dropdown.html#dropdown-menu)"},"el-dropdown-item":{"attributes":["command","disabled","divided","icon"],"description":"[Docs](https://element-plus.org/en-US/component/dropdown.html#dropdown-item)"},"el-empty":{"attributes":["image","image-size","description"],"description":"Placeholder hints for empty states.\n\n[Docs](https://element-plus.org/en-US/component/empty.html#empty)"},"el-form":{"attributes":["model","rules","inline","label-position","label-width","label-suffix","hide-required-asterisk","show-message","inline-message","status-icon","validate-on-rule-change","size","disabled","validate"],"subtags":["el-form-item"],"description":"Form consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data.\n\n[Docs](https://element-plus.org/en-US/component/form.html#form)"},"el-form-item":{"attributes":["prop","label","label-width","required","rules","error","show-message","inline-message","size"],"description":"[Docs](https://element-plus.org/en-US/component/form.html#form-item)"},"el-icon":{"attributes":["color","size"],"description":"Element Plus provides a set of common icons.\n\n[Docs](https://element-plus.org/en-US/component/icon.html#icon)"},"el-image":{"attributes":["alt","fit","hide-on-click-modal","lazy","preview-src-list","referrer-policy","src","scroll-container","z-index","load","error"],"description":"Besides the native features of img, support lazy load, custom placeholder and load failure, etc.\n\n[Docs](https://element-plus.org/en-US/component/image.html#image)"},"el-image-viewer":{"attributes":["url-list","z-index","initial-index","infinite","hide-on-click-modal","append-to-body"],"description":"[Docs](https://element-plus.org/en-US/component/image.html#imageviewer)"},"el-input-number":{"attributes":["model-value","min","max","step","step-strictly","precision","size","disabled","controls","controls-position","name","label","placeholder","change","blur","focus"],"description":"Input numerical values with a customizable range.\n\n[Docs](https://element-plus.org/en-US/component/input-number.html#input-number)"},"el-input":{"attributes":["type","model-value","maxlength","minlength","show-word-limit","placeholder","clearable","show-password","disabled","size","prefix-icon","suffix-icon","rows","autosize","autocomplete","name","readonly","max","min","step","resize","autofocus","form","label","tabindex","validate-event","input-style","blur","focus","change","input","clear"],"description":"Input data using mouse or keyboard.\n\n[Docs](https://element-plus.org/en-US/component/input.html#input)"},"el-autocomplete":{"attributes":["placeholder","clearable","disabled","value-key","icon","model-value","debounce","placement","fetch-suggestions","popper-class","trigger-on-focus","name","select-when-unmatched","label","prefix-icon","suffix-icon","hide-loading","popper-append-to-body","highlight-first-item","select","change"],"description":"You can get some recommended tips based on the current input.\n\n[Docs](https://element-plus.org/en-US/component/input.html#autocomplete)"},"el-row":{"attributes":["gutter","justify","align","tag"],"subtags":["el-col"],"description":"[Docs](https://element-plus.org/en-US/component/layout.html#row)"},"el-col":{"attributes":["span","offset","push","pull","xs","sm","md","lg","xl","tag"],"description":"[Docs](https://element-plus.org/en-US/component/layout.html#col)"},"el-link":{"attributes":["type","underline","disabled","href","icon"],"description":"Text hyperlink\n\n[Docs](https://element-plus.org/en-US/component/link.html#link)"},"el-menu":{"attributes":["mode","collapse","background-color","text-color","active-text-color","default-active","default-openeds","unique-opened","menu-trigger","router","collapse-transition","select","open","close"],"subtags":["el-sub-menu","el-menu-item","el-menu-item-group"],"description":"Menu that provides navigation for your website.\n\n[Docs](https://element-plus.org/en-US/component/menu.html#menu)"},"el-sub-menu":{"attributes":["index","popper-class","show-timeout","hide-timeout","disabled","popper-append-to-body"],"subtags":["el-sub-menu","el-menu-item","el-menu-item-group"],"description":"[Docs](https://element-plus.org/en-US/component/menu.html#submenu)"},"el-menu-item":{"attributes":["index","route","disabled","click"],"description":"[Docs](https://element-plus.org/en-US/component/menu.html#menu-item)"},"el-menu-item-group":{"attributes":["title"],"subtags":["el-menu-item"],"description":"[Docs](https://element-plus.org/en-US/component/menu.html#menu-item-group)"},"el-page-header":{"attributes":["icon","title","content","back"],"description":"If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.\n\n[Docs](https://element-plus.org/en-US/component/page-header.html#page-header)"},"el-pagination":{"attributes":["small","background","page-size","default-page-size","total","page-count","pager-count","current-page","default-current-page","layout","page-sizes","popper-class","prev-text","next-text","disabled","hide-on-single-page","size-change","current-change","prev-click","next-click"],"description":"If you have too much data to display in one page, use pagination.\n\n[Docs](https://element-plus.org/en-US/component/pagination.html#pagination)"},"el-popconfirm":{"attributes":["title","confirm-button-text","cancel-button-text","confirm-button-type","cancel-button-type","icon","icon-color","hide-icon","confirm","cancel"],"description":"A simple confirmation dialog of an element click action.\n\n[Docs](https://element-plus.org/en-US/component/popconfirm.html#popconfirm)"},"el-popover":{"attributes":["trigger","title","content","width","placement","disabled","visible","offset","transition","show-arrow","popper-options","popper-class","show-after","hide-after","auto-close","tabindex","show","after-enter","hide","after-leave"],"description":"[Docs](https://element-plus.org/en-US/component/popover.html#popover)"},"el-progress":{"attributes":["percentage","type","stroke-width","text-inside","status","indeterminate","duration","color","width","show-text","stroke-linecap","format"],"description":"Progress is used to show the progress of current operation, and inform the user the current status.\n\n[Docs](https://element-plus.org/en-US/component/progress.html#progress)"},"el-radio":{"attributes":["model-value","label","disabled","border","size","name","change"],"description":"Single selection among multiple options.\n\n[Docs](https://element-plus.org/en-US/component/radio.html#radio)"},"el-radio-group":{"attributes":["model-value","size","disabled","text-color","fill","change"],"subtags":["el-radio","el-radio-button"],"description":"[Docs](https://element-plus.org/en-US/component/radio.html#radio-group)"},"el-radio-button":{"attributes":["label","disabled","name"],"description":"[Docs](https://element-plus.org/en-US/component/radio.html#radio-button)"},"el-rate":{"attributes":["model-value","max","disabled","allow-half","low-threshold","high-threshold","colors","void-color","disabled-void-color","icon-classes","void-icon-class","disabled-void-icon-class","show-text","show-score","text-color","texts","score-template","change"],"description":"Used for rating\n\n[Docs](https://element-plus.org/en-US/component/rate.html#rate)"},"el-result":{"attributes":["title","sub-title","icon"],"description":"Used to give feedback on the result of user's operation or access exception.\n\n[Docs](https://element-plus.org/en-US/component/result.html#result)"},"el-scrollbar":{"attributes":["height","max-height","native","wrap-style","wrap-class","view-style","view-class","noresize","tag","always","min-size","scroll"],"description":"Used to replace the browser's native scrollbar.\n\n[Docs](https://element-plus.org/en-US/component/scrollbar.html#scrollbar)"},"el-select-v2":{"attributes":["change","visible-change","remove-tag","clear","blur","focus"],"description":"[Docs](https://element-plus.org/en-US/component/select-v2.html#selectv2)"},"el-select":{"attributes":["model-value","multiple","disabled","value-key","size","clearable","collapse-tags","multiple-limit","name","autocomplete","placeholder","filterable","allow-create","filter-method","remote","remote-method","loading","loading-text","no-match-text","no-data-text","popper-class","reserve-keyword","default-first-option","popper-append-to-body","automatic-dropdown","clear-icon","change","visible-change","remove-tag","clear","blur","focus"],"subtags":["el-option-group","el-option"],"description":"When there are plenty of options, use a drop-down menu to display and select desired ones.\n\n[Docs](https://element-plus.org/en-US/component/select.html#select)"},"el-option-group":{"attributes":["label","disabled"],"subtags":["el-option"],"description":"[Docs](https://element-plus.org/en-US/component/select.html#option-group)"},"el-option":{"attributes":["value","label","disabled"],"description":"[Docs](https://element-plus.org/en-US/component/select.html#option)"},"el-skeleton":{"attributes":["animated","count","loading","rows","throttle"],"description":"When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.\n\n[Docs](https://element-plus.org/en-US/component/skeleton.html#skeleton)"},"el-skeleton-item":{"attributes":["variant"],"description":"[Docs](https://element-plus.org/en-US/component/skeleton.html#skeleton-item)"},"el-slider":{"attributes":["model-value","min","max","disabled","step","show-input","show-input-controls","input-size","show-stops","show-tooltip","format-tooltip","range","vertical","height","label","debounce","tooltip-class","marks","change","input"],"description":"Drag the slider within a fixed range.\n\n[Docs](https://element-plus.org/en-US/component/slider.html#slider)"},"el-space":{"attributes":["alignment","class","direction","prefix-cls","style","spacer","size","wrap","fill","fill-ratio"],"description":"Even though we have [Divider]\n\n[Docs](https://element-plus.org/en-US/component/space.html#space)"},"el-steps":{"attributes":["space","direction","active","process-status","finish-status","align-center","simple"],"subtags":["el-step"],"description":"Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.\n\n[Docs](https://element-plus.org/en-US/component/steps.html#steps)"},"el-step":{"attributes":["title","description","icon","status"],"description":"[Docs](https://element-plus.org/en-US/component/steps.html#step)"},"el-switch":{"attributes":["model-value","disabled","loading","width","active-icon-class","inactive-icon-class","active-text","inactive-text","active-value","inactive-value","active-color","inactive-color","border-color","name","validate-event","before-change","change"],"description":"Switch is used for switching between two opposing states.\n\n[Docs](https://element-plus.org/en-US/component/switch.html#switch)"},"el-table":{"attributes":["data","height","max-height","stripe","border","size","fit","show-header","highlight-current-row","current-row-key","row-class-name","row-style","cell-class-name","cell-style","header-row-class-name","header-row-style","header-cell-class-name","header-cell-style","row-key","empty-text","default-expand-all","expand-row-keys","default-sort","tooltip-effect","show-summary","sum-text","summary-method","span-method","select-on-indeterminate","indent","lazy","load","tree-props","select","select-all","selection-change","cell-mouse-enter","cell-mouse-leave","cell-click","cell-dblclick","cell-contextmenu","row-click","row-contextmenu","row-dblclick","header-click","header-contextmenu","sort-change","filter-change","current-change","header-dragend","expand-change"],"subtags":["el-table-column"],"description":"Display multiple data with similar format. You can sort, filter, compare your data in a table.\n\n[Docs](https://element-plus.org/en-US/component/table.html#table)"},"el-table-column":{"attributes":["type","index","label","column-key","prop","width","min-width","fixed","render-header","sortable","sort-method","sort-by","sort-orders","resizable","formatter","show-overflow-tooltip","align","header-align","class-name","label-class-name","selectable","reserve-selection","filters","filter-placement","filter-multiple","filter-method","filtered-value"],"description":"[Docs](https://element-plus.org/en-US/component/table.html#table-column)"},"el-tabs":{"attributes":["model-value","type","closable","addable","editable","tab-position","stretch","before-leave","tab-click","tab-remove","tab-add","edit"],"subtags":["el-tab-pane"],"description":"Divide data collections which are related yet belong to different types.\n\n[Docs](https://element-plus.org/en-US/component/tabs.html#tabs)"},"el-tab-pane":{"attributes":["label","disabled","name","closable","lazy"],"description":"[Docs](https://element-plus.org/en-US/component/tabs.html#tab-pane)"},"el-check-tag":{"attributes":["checked","change"],"description":"[Docs](https://element-plus.org/en-US/component/tag.html#checktag)"},"el-tag":{"attributes":["type","closable","disable-transitions","hit","color","size","effect","click","close"],"description":"Used for marking and selection.\n\n[Docs](https://element-plus.org/en-US/component/tag.html#tag)"},"el-time-picker":{"attributes":["model-value","readonly","disabled","editable","clearable","size","placeholder","start-placeholder","end-placeholder","is-range","arrow-control","align","popper-class","range-separator","format","default-value","name","prefix-icon","clear-icon","disabled-hours","disabled-minutes","disabled-seconds","change","blur","focus"],"description":"Use Time Picker for time input.\n\n[Docs](https://element-plus.org/en-US/component/time-picker.html#timepicker)"},"el-time-select":{"attributes":["model-value","disabled","editable","clearable","size","placeholder","name","prefix-icon","clear-icon","start","end","step","min-time","max-time","change","blur","focus"],"description":"Use Time Select for time input.\n\n[Docs](https://element-plus.org/en-US/component/time-select.html#timeselect)"},"el-timeline":{"subtags":["el-timeline-item"],"description":"Visually display timeline.\n\n[Docs](https://element-plus.org/en-US/component/timeline.html#timeline)"},"el-timeline-item":{"attributes":["timestamp","hide-timestamp","center","placement","type","color","size","icon","hollow"],"description":"[Docs](https://element-plus.org/en-US/component/timeline.html#timeline-item)"},"el-tooltip":{"attributes":["append-to-body","effect","content","placement","model-value","disabled","offset","transition","visible-arrow","popper-options","show-after","hide-after","auto-close","manual","popper-class","enterable","tabindex"],"description":"Display prompt information for mouse hover.\n\n[Docs](https://element-plus.org/en-US/component/tooltip.html#tooltip)"},"el-transfer":{"attributes":["model-value","data","filterable","filter-placeholder","filter-method","target-order","titles","button-texts","render-content","format","props","left-default-checked","right-default-checked","change","left-check-change","right-check-change"],"description":"[Docs](https://element-plus.org/en-US/component/transfer.html#transfer)"},"el-<el-badge-value=\"beta\">tree-v2-virtualized-tree</el-badge>":{"attributes":["data","empty-text","props","highlight-current","expand-on-click-node","check-on-click-node","default-expanded-keys","show-checkbox","check-strictly","default-checked-keys","current-node-key","filter-method","indent","icon","node-click","node-contextmenu","check-change","check","current-change","node-expand","node-collapse"],"description":"Tree view with blazing fast scrolling performance for any amount of data\n\n[Docs](https://element-plus.org/en-US/component/tree-v2.html#<elbadge-value=\"beta\">tree-v2-virtualized-tree</elbadge>)"},"el-tree":{"attributes":["data","empty-text","node-key","props","render-after-expand","load","render-content","highlight-current","default-expand-all","expand-on-click-node","check-on-click-node","auto-expand-parent","default-expanded-keys","show-checkbox","check-strictly","default-checked-keys","current-node-key","filter-node-method","accordion","indent","icon-class","lazy","draggable","allow-drag","allow-drop","node-click","node-contextmenu","check-change","check","current-change","node-expand","node-collapse","node-drag-start","node-drag-enter","node-drag-leave","node-drag-over","node-drag-end","node-drop"],"description":"Display a set of data with hierarchies.\n\n[Docs](https://element-plus.org/en-US/component/tree.html#tree)"},"el-upload":{"attributes":["action","headers","multiple","data","name","with-credentials","show-file-list","drag","accept","on-preview","on-remove","on-success","on-error","on-progress","on-change","before-upload","before-remove","thumbnail-mode","file-list","list-type","auto-upload","http-request","disabled","limit","on-exceed"],"description":"Upload files by clicking or drag-and-drop\n\n[Docs](https://element-plus.org/en-US/component/upload.html#upload)"}}
+{"el-affix":{"attributes":["offset","position","target","z-index","change","scroll"],"description":"Fix the element to a specific visible area.\n\n[Docs](https://element-plus.org/en-US/component/affix.html#affix)"},"el-alert":{"attributes":["title","type","description","closable","center","close-text","show-icon","effect","close"],"description":"Displays important alert messages.\n\n[Docs](https://element-plus.org/en-US/component/alert.html#alert)"},"el-avatar":{"attributes":["icon","size","shape","src","src-set","alt","fit","error"],"description":"Avatars can be used to represent people or objects. It supports images, Icons, or characters.\n\n[Docs](https://element-plus.org/en-US/component/avatar.html#avatar)"},"el-backtop":{"attributes":["target","visibility-height","right","bottom","click"],"description":"A button to back to top\n\n[Docs](https://element-plus.org/en-US/component/backtop.html#backtop)"},"el-badge":{"attributes":["value","max","is-dot","hidden","type"],"description":"A number or status mark on buttons and icons.\n\n[Docs](https://element-plus.org/en-US/component/badge.html#badge)"},"el-breadcrumb":{"attributes":["separator","separator-class"],"subtags":["el-breadcrumb-item"],"description":"Displays the location of the current page, making it easier to browser back.\n\n[Docs](https://element-plus.org/en-US/component/breadcrumb.html#breadcrumb)"},"el-breadcrumb-item":{"attributes":["to","replace"],"description":"[Docs](https://element-plus.org/en-US/component/breadcrumb.html#breadcrumb-item)"},"el-button":{"attributes":["size","type","plain","round","circle","loading","disabled","icon","autofocus","native-type"],"description":"Commonly used button.\n\n[Docs](https://element-plus.org/en-US/component/button.html#button)"},"el-button-group":{"attributes":["size"],"subtags":["el-button"],"description":"[Docs](https://element-plus.org/en-US/component/button.html#button-group)"},"el-calendar":{"attributes":["model-value","range"],"description":"Display date.\n\n[Docs](https://element-plus.org/en-US/component/calendar.html#calendar)"},"el-card":{"attributes":["header","body-style","shadow"],"description":"Integrate information in a card container.\n\n[Docs](https://element-plus.org/en-US/component/card.html#card)"},"el-carousel":{"attributes":["height","initial-index","trigger","autoplay","interval","indicator-position","arrow","type","loop","direction","pause-on-hover","change"],"subtags":["el-carousel-item"],"description":"Loop a series of images or texts in a limited space\n\n[Docs](https://element-plus.org/en-US/component/carousel.html#carousel)"},"el-carousel-item":{"attributes":["name","label"],"description":"[Docs](https://element-plus.org/en-US/component/carousel.html#carousel-item)"},"el-cascader":{"attributes":["model-value","options","props","size","placeholder","disabled","clearable","show-all-levels","collapse-tags","separator","filterable","filter-method","debounce","before-filter","popper-class","popper-append-to-body","change","expand-change","blur","focus","visible-change","remove-tag"],"description":"If the options have a clear hierarchical structure, Cascader can be used to view and select them.\n\n[Docs](https://element-plus.org/en-US/component/cascader.html#cascader)"},"el-cascader-panel":{"attributes":["model-value","options","props","change","expand-change"],"description":"[Docs](https://element-plus.org/en-US/component/cascader.html#cascaderpanel)"},"el-checkbox":{"attributes":["model-value","label","true-label","false-label","disabled","border","size","name","checked","indeterminate","change"],"description":"A group of options for multiple choices.\n\n[Docs](https://element-plus.org/en-US/component/checkbox.html#checkbox)"},"el-checkbox-group":{"attributes":["model-value","size","disabled","min","max","text-color","fill","change"],"subtags":["el-checkbox","el-checkbox-button"],"description":"[Docs](https://element-plus.org/en-US/component/checkbox.html#checkbox-group)"},"el-checkbox-button":{"attributes":["label","true-label","false-label","disabled","name","checked"],"description":"[Docs](https://element-plus.org/en-US/component/checkbox.html#checkbox-button)"},"el-collapse":{"attributes":["model-value","accordion","change"],"subtags":["el-collapse-item"],"description":"Use Collapse to store contents.\n\n[Docs](https://element-plus.org/en-US/component/collapse.html#collapse)"},"el-collapse-item":{"attributes":["name","title","disabled"],"description":"[Docs](https://element-plus.org/en-US/component/collapse.html#collapse-item)"},"el-color-picker":{"attributes":["model-value","disabled","size","show-alpha","color-format","popper-class","predefine","change","active-change"],"description":"ColorPicker is a color selector supporting multiple color formats.\n\n[Docs](https://element-plus.org/en-US/component/color-picker.html#colorpicker)"},"el-config-provider":{"description":"[Docs](https://element-plus.org/en-US/component/config-provider.html#configprovider)"},"el-container":{"attributes":["direction"],"subtags":["el-container","el-header","el-aside","el-main","el-footer"],"description":"Container components for scaffolding basic structure of the page:\n\n[Docs](https://element-plus.org/en-US/component/container.html#container)"},"el-header":{"attributes":["height"],"description":"[Docs](https://element-plus.org/en-US/component/container.html#header)"},"el-aside":{"attributes":["width"],"description":"[Docs](https://element-plus.org/en-US/component/container.html#aside)"},"el-main":{"description":"[Docs](https://element-plus.org/en-US/component/container.html#main)"},"el-footer":{"attributes":["height"],"description":"[Docs](https://element-plus.org/en-US/component/container.html#footer)"},"el-date-picker":{"attributes":["model-value","readonly","disabled","size","editable","clearable","placeholder","start-placeholder","end-placeholder","type","format","popper-class","range-separator","default-value","default-time","value-format","name","unlink-panels","prefix-icon","clear-icon","validate-event","disabled-date","shortcuts","change","blur","focus","calendar-change"],"description":"Use Date Picker for date input.\n\n[Docs](https://element-plus.org/en-US/component/date-picker.html#datepicker)"},"el-descriptions":{"attributes":["border","column","direction","size","title","extra"],"subtags":["el-descriptions-item"],"description":"Display multiple fields in list form.\n\n[Docs](https://element-plus.org/en-US/component/descriptions.html#descriptions)"},"el-descriptions-item":{"attributes":["label","span","width","min-width","align","label-align","class-name","label-class-name"],"description":"[Docs](https://element-plus.org/en-US/component/descriptions.html#descriptions-item)"},"el-dialog":{"attributes":["model-value","title","width","fullscreen","top","modal","append-to-body","lock-scroll","custom-class","open-delay","close-delay","close-on-click-modal","close-on-press-escape","show-close","before-close","center","destroy-on-close","open","opened","close","closed"],"description":"Informs users while preserving the current page state.\n\n[Docs](https://element-plus.org/en-US/component/dialog.html#dialog)"},"el-divider":{"attributes":["direction","content-position"],"description":"The dividing line that separates the content.\n\n[Docs](https://element-plus.org/en-US/component/divider.html#divider)"},"el-drawer":{"attributes":["model-value","append-to-body","lock-scroll","before-close","close-on-click-modal","close-on-press-escape","open-delay","close-delay","custom-class","destroy-on-close","modal","direction","show-close","size","title","with-header","modal-class","z-index","open","opened","close","closed"],"description":"Sometimes, `Dialog` does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like `terms & conditions`, `Drawer` has almost identical API with `Dialog`, but it introduces different user experience.\n\n[Docs](https://element-plus.org/en-US/component/drawer.html#drawer)"},"el-dropdown":{"attributes":["type","size","max-height","split-button","disabled","placement","trigger","hide-on-click","show-timeout","hide-timeout","tabindex","click","command","visible-change"],"subtags":["el-dropdown-menu"],"description":"Toggleable menu for displaying lists of links and actions.\n\n[Docs](https://element-plus.org/en-US/component/dropdown.html#dropdown)"},"el-dropdown-menu":{"subtags":["el-dropdown-item"],"description":"[Docs](https://element-plus.org/en-US/component/dropdown.html#dropdown-menu)"},"el-dropdown-item":{"attributes":["command","disabled","divided","icon"],"description":"[Docs](https://element-plus.org/en-US/component/dropdown.html#dropdown-item)"},"el-empty":{"attributes":["image","image-size","description"],"description":"Placeholder hints for empty states.\n\n[Docs](https://element-plus.org/en-US/component/empty.html#empty)"},"el-form":{"attributes":["model","rules","inline","label-position","label-width","label-suffix","hide-required-asterisk","show-message","inline-message","status-icon","validate-on-rule-change","size","disabled","validate"],"subtags":["el-form-item"],"description":"Form consists of `input`, `radio`, `select`, `checkbox` and so on. With form, you can collect, verify and submit data.\n\n[Docs](https://element-plus.org/en-US/component/form.html#form)"},"el-form-item":{"attributes":["prop","label","label-width","required","rules","error","show-message","inline-message","size"],"description":"[Docs](https://element-plus.org/en-US/component/form.html#form-item)"},"el-icon":{"attributes":["color","size"],"description":"Element Plus provides a set of common icons.\n\n[Docs](https://element-plus.org/en-US/component/icon.html#icon)"},"el-image":{"attributes":["alt","fit","hide-on-click-modal","lazy","preview-src-list","referrer-policy","src","scroll-container","z-index","load","error"],"description":"Besides the native features of img, support lazy load, custom placeholder and load failure, etc.\n\n[Docs](https://element-plus.org/en-US/component/image.html#image)"},"el-image-viewer":{"attributes":["url-list","z-index","initial-index","infinite","hide-on-click-modal","append-to-body"],"description":"[Docs](https://element-plus.org/en-US/component/image.html#imageviewer)"},"el-input-number":{"attributes":["model-value","min","max","step","step-strictly","precision","size","disabled","controls","controls-position","name","label","placeholder","change","blur","focus"],"description":"Input numerical values with a customizable range.\n\n[Docs](https://element-plus.org/en-US/component/input-number.html#input-number)"},"el-input":{"attributes":["type","model-value","maxlength","minlength","show-word-limit","placeholder","clearable","show-password","disabled","size","prefix-icon","suffix-icon","rows","autosize","autocomplete","name","readonly","max","min","step","resize","autofocus","form","label","tabindex","validate-event","input-style","blur","focus","change","input","clear"],"description":"Input data using mouse or keyboard.\n\n[Docs](https://element-plus.org/en-US/component/input.html#input)"},"el-autocomplete":{"attributes":["placeholder","clearable","disabled","value-key","icon","model-value","debounce","placement","fetch-suggestions","popper-class","trigger-on-focus","name","select-when-unmatched","label","prefix-icon","suffix-icon","hide-loading","popper-append-to-body","highlight-first-item","select","change"],"description":"You can get some recommended tips based on the current input.\n\n[Docs](https://element-plus.org/en-US/component/input.html#autocomplete)"},"el-row":{"attributes":["gutter","justify","align","tag"],"subtags":["el-col"],"description":"[Docs](https://element-plus.org/en-US/component/layout.html#row)"},"el-col":{"attributes":["span","offset","push","pull","xs","sm","md","lg","xl","tag"],"description":"[Docs](https://element-plus.org/en-US/component/layout.html#col)"},"el-link":{"attributes":["type","underline","disabled","href","icon"],"description":"Text hyperlink\n\n[Docs](https://element-plus.org/en-US/component/link.html#link)"},"el-menu":{"attributes":["mode","collapse","ellipsis","background-color","text-color","active-text-color","default-active","default-openeds","unique-opened","menu-trigger","router","collapse-transition","select","open","close"],"subtags":["el-sub-menu","el-menu-item","el-menu-item-group"],"description":"Menu that provides navigation for your website.\n\n[Docs](https://element-plus.org/en-US/component/menu.html#menu)"},"el-sub-menu":{"attributes":["index","popper-class","show-timeout","hide-timeout","disabled","popper-append-to-body"],"subtags":["el-sub-menu","el-menu-item","el-menu-item-group"],"description":"[Docs](https://element-plus.org/en-US/component/menu.html#submenu)"},"el-menu-item":{"attributes":["index","route","disabled","click"],"description":"[Docs](https://element-plus.org/en-US/component/menu.html#menu-item)"},"el-menu-item-group":{"attributes":["title"],"subtags":["el-menu-item"],"description":"[Docs](https://element-plus.org/en-US/component/menu.html#menu-item-group)"},"el-page-header":{"attributes":["icon","title","content","back"],"description":"If path of the page is simple, it is recommended to use PageHeader instead of the Breadcrumb.\n\n[Docs](https://element-plus.org/en-US/component/page-header.html#page-header)"},"el-pagination":{"attributes":["small","background","page-size","default-page-size","total","page-count","pager-count","current-page","default-current-page","layout","page-sizes","popper-class","prev-text","next-text","disabled","hide-on-single-page","size-change","current-change","prev-click","next-click"],"description":"If you have too much data to display in one page, use pagination.\n\n[Docs](https://element-plus.org/en-US/component/pagination.html#pagination)"},"el-popconfirm":{"attributes":["title","confirm-button-text","cancel-button-text","confirm-button-type","cancel-button-type","icon","icon-color","hide-icon","confirm","cancel"],"description":"A simple confirmation dialog of an element click action.\n\n[Docs](https://element-plus.org/en-US/component/popconfirm.html#popconfirm)"},"el-popover":{"attributes":["trigger","title","content","width","placement","disabled","visible","offset","transition","show-arrow","popper-options","popper-class","show-after","hide-after","auto-close","tabindex","show","after-enter","hide","after-leave"],"description":"[Docs](https://element-plus.org/en-US/component/popover.html#popover)"},"el-progress":{"attributes":["percentage","type","stroke-width","text-inside","status","indeterminate","duration","color","width","show-text","stroke-linecap","format"],"description":"Progress is used to show the progress of current operation, and inform the user the current status.\n\n[Docs](https://element-plus.org/en-US/component/progress.html#progress)"},"el-radio":{"attributes":["model-value","label","disabled","border","size","name","change"],"description":"Single selection among multiple options.\n\n[Docs](https://element-plus.org/en-US/component/radio.html#radio)"},"el-radio-group":{"attributes":["model-value","size","disabled","text-color","fill","change"],"subtags":["el-radio","el-radio-button"],"description":"[Docs](https://element-plus.org/en-US/component/radio.html#radio-group)"},"el-radio-button":{"attributes":["label","disabled","name"],"description":"[Docs](https://element-plus.org/en-US/component/radio.html#radio-button)"},"el-rate":{"attributes":["model-value","max","disabled","allow-half","low-threshold","high-threshold","colors","void-color","disabled-void-color","icon-classes","void-icon-class","disabled-void-icon-class","show-text","show-score","text-color","texts","score-template","change"],"description":"Used for rating\n\n[Docs](https://element-plus.org/en-US/component/rate.html#rate)"},"el-result":{"attributes":["title","sub-title","icon"],"description":"Used to give feedback on the result of user's operation or access exception.\n\n[Docs](https://element-plus.org/en-US/component/result.html#result)"},"el-scrollbar":{"attributes":["height","max-height","native","wrap-style","wrap-class","view-style","view-class","noresize","tag","always","min-size","scroll"],"description":"Used to replace the browser's native scrollbar.\n\n[Docs](https://element-plus.org/en-US/component/scrollbar.html#scrollbar)"},"el-select-v2":{"attributes":["change","visible-change","remove-tag","clear","blur","focus"],"description":"[Docs](https://element-plus.org/en-US/component/select-v2.html#selectv2)"},"el-select":{"attributes":["model-value","multiple","disabled","value-key","size","clearable","collapse-tags","multiple-limit","name","autocomplete","placeholder","filterable","allow-create","filter-method","remote","remote-method","loading","loading-text","no-match-text","no-data-text","popper-class","reserve-keyword","default-first-option","popper-append-to-body","automatic-dropdown","clear-icon","change","visible-change","remove-tag","clear","blur","focus"],"subtags":["el-option-group","el-option"],"description":"When there are plenty of options, use a drop-down menu to display and select desired ones.\n\n[Docs](https://element-plus.org/en-US/component/select.html#select)"},"el-option-group":{"attributes":["label","disabled"],"subtags":["el-option"],"description":"[Docs](https://element-plus.org/en-US/component/select.html#option-group)"},"el-option":{"attributes":["value","label","disabled"],"description":"[Docs](https://element-plus.org/en-US/component/select.html#option)"},"el-skeleton":{"attributes":["animated","count","loading","rows","throttle"],"description":"When loading data, and you need a rich experience for visual and interactions for your end users, you can choose `skeleton`.\n\n[Docs](https://element-plus.org/en-US/component/skeleton.html#skeleton)"},"el-skeleton-item":{"attributes":["variant"],"description":"[Docs](https://element-plus.org/en-US/component/skeleton.html#skeleton-item)"},"el-slider":{"attributes":["model-value","min","max","disabled","step","show-input","show-input-controls","input-size","show-stops","show-tooltip","format-tooltip","range","vertical","height","label","debounce","tooltip-class","marks","change","input"],"description":"Drag the slider within a fixed range.\n\n[Docs](https://element-plus.org/en-US/component/slider.html#slider)"},"el-space":{"attributes":["alignment","class","direction","prefix-cls","style","spacer","size","wrap","fill","fill-ratio"],"description":"Even though we have [Divider]\n\n[Docs](https://element-plus.org/en-US/component/space.html#space)"},"el-steps":{"attributes":["space","direction","active","process-status","finish-status","align-center","simple"],"subtags":["el-step"],"description":"Guide the user to complete tasks in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.\n\n[Docs](https://element-plus.org/en-US/component/steps.html#steps)"},"el-step":{"attributes":["title","description","icon","status"],"description":"[Docs](https://element-plus.org/en-US/component/steps.html#step)"},"el-switch":{"attributes":["model-value","disabled","loading","width","active-icon-class","inactive-icon-class","active-text","inactive-text","active-value","inactive-value","active-color","inactive-color","border-color","name","validate-event","before-change","change"],"description":"Switch is used for switching between two opposing states.\n\n[Docs](https://element-plus.org/en-US/component/switch.html#switch)"},"el-table":{"attributes":["data","height","max-height","stripe","border","size","fit","show-header","highlight-current-row","current-row-key","row-class-name","row-style","cell-class-name","cell-style","header-row-class-name","header-row-style","header-cell-class-name","header-cell-style","row-key","empty-text","default-expand-all","expand-row-keys","default-sort","tooltip-effect","show-summary","sum-text","summary-method","span-method","select-on-indeterminate","indent","lazy","load","tree-props","select","select-all","selection-change","cell-mouse-enter","cell-mouse-leave","cell-click","cell-dblclick","cell-contextmenu","row-click","row-contextmenu","row-dblclick","header-click","header-contextmenu","sort-change","filter-change","current-change","header-dragend","expand-change"],"subtags":["el-table-column"],"description":"Display multiple data with similar format. You can sort, filter, compare your data in a table.\n\n[Docs](https://element-plus.org/en-US/component/table.html#table)"},"el-table-column":{"attributes":["type","index","label","column-key","prop","width","min-width","fixed","render-header","sortable","sort-method","sort-by","sort-orders","resizable","formatter","show-overflow-tooltip","align","header-align","class-name","label-class-name","selectable","reserve-selection","filters","filter-placement","filter-multiple","filter-method","filtered-value"],"description":"[Docs](https://element-plus.org/en-US/component/table.html#table-column)"},"el-tabs":{"attributes":["model-value","type","closable","addable","editable","tab-position","stretch","before-leave","tab-click","tab-remove","tab-add","edit"],"subtags":["el-tab-pane"],"description":"Divide data collections which are related yet belong to different types.\n\n[Docs](https://element-plus.org/en-US/component/tabs.html#tabs)"},"el-tab-pane":{"attributes":["label","disabled","name","closable","lazy"],"description":"[Docs](https://element-plus.org/en-US/component/tabs.html#tab-pane)"},"el-check-tag":{"attributes":["checked","change"],"description":"[Docs](https://element-plus.org/en-US/component/tag.html#checktag)"},"el-tag":{"attributes":["type","closable","disable-transitions","hit","color","size","effect","click","close"],"description":"Used for marking and selection.\n\n[Docs](https://element-plus.org/en-US/component/tag.html#tag)"},"el-time-picker":{"attributes":["model-value","readonly","disabled","editable","clearable","size","placeholder","start-placeholder","end-placeholder","is-range","arrow-control","align","popper-class","range-separator","format","default-value","name","prefix-icon","clear-icon","disabled-hours","disabled-minutes","disabled-seconds","change","blur","focus"],"description":"Use Time Picker for time input.\n\n[Docs](https://element-plus.org/en-US/component/time-picker.html#timepicker)"},"el-time-select":{"attributes":["model-value","disabled","editable","clearable","size","placeholder","name","prefix-icon","clear-icon","start","end","step","min-time","max-time","change","blur","focus"],"description":"Use Time Select for time input.\n\n[Docs](https://element-plus.org/en-US/component/time-select.html#timeselect)"},"el-timeline":{"subtags":["el-timeline-item"],"description":"Visually display timeline.\n\n[Docs](https://element-plus.org/en-US/component/timeline.html#timeline)"},"el-timeline-item":{"attributes":["timestamp","hide-timestamp","center","placement","type","color","size","icon","hollow"],"description":"[Docs](https://element-plus.org/en-US/component/timeline.html#timeline-item)"},"el-tooltip":{"attributes":["append-to-body","effect","content","placement","model-value","disabled","offset","transition","visible-arrow","popper-options","show-after","hide-after","auto-close","manual","popper-class","enterable","tabindex"],"description":"Display prompt information for mouse hover.\n\n[Docs](https://element-plus.org/en-US/component/tooltip.html#tooltip)"},"el-transfer":{"attributes":["model-value","data","filterable","filter-placeholder","filter-method","target-order","titles","button-texts","render-content","format","props","left-default-checked","right-default-checked","change","left-check-change","right-check-change"],"description":"[Docs](https://element-plus.org/en-US/component/transfer.html#transfer)"},"el-<el-badge-value=\"beta\">tree-v2-virtualized-tree</el-badge>":{"attributes":["data","empty-text","props","highlight-current","expand-on-click-node","check-on-click-node","default-expanded-keys","show-checkbox","check-strictly","default-checked-keys","current-node-key","filter-method","indent","icon","node-click","node-contextmenu","check-change","check","current-change","node-expand","node-collapse"],"description":"Tree view with blazing fast scrolling performance for any amount of data\n\n[Docs](https://element-plus.org/en-US/component/tree-v2.html#<elbadge-value=\"beta\">tree-v2-virtualized-tree</elbadge>)"},"el-tree":{"attributes":["data","empty-text","node-key","props","render-after-expand","load","render-content","highlight-current","default-expand-all","expand-on-click-node","check-on-click-node","auto-expand-parent","default-expanded-keys","show-checkbox","check-strictly","default-checked-keys","current-node-key","filter-node-method","accordion","indent","icon-class","lazy","draggable","allow-drag","allow-drop","node-click","node-contextmenu","check-change","check","current-change","node-expand","node-collapse","node-drag-start","node-drag-enter","node-drag-leave","node-drag-over","node-drag-end","node-drop"],"description":"Display a set of data with hierarchies.\n\n[Docs](https://element-plus.org/en-US/component/tree.html#tree)"},"el-upload":{"attributes":["action","headers","multiple","data","name","with-credentials","show-file-list","drag","accept","on-preview","on-remove","on-success","on-error","on-progress","on-change","before-upload","before-remove","thumbnail-mode","file-list","list-type","auto-upload","http-request","disabled","limit","on-exceed"],"description":"Upload files by clicking or drag-and-drop\n\n[Docs](https://element-plus.org/en-US/component/upload.html#upload)"}}