iduxfe/idux

🚀 A UI Component Library for Vue3.x

@idux

@idux is a UI component library for middle and back-end products. It aims to provide an efficient and enjoyable experience for developers.

Based on Vue 3 and TypeScript, the library is open source and free for any enterprise, organization, or individual to use under the MIT License.

English | 简体中文

✨ Features

• Composition API for source and sample codes
• Written in TypeScript with complete defined types
• Monorepo: cdk, components, pro
• A set of high-quality components out of the box
• Flexible global configuration
• Powerful theme customization in every detail
• Internationalization support for various languages

🖥 Environment Support

• Vue ^3.0.0

Edge	Chrome	Firefox	Safari	Electron
79 +	79 +	72 +	13.1 +	10 +

📦 Installation

npm install --save @idux/cdk @idux/components @idux/pro

🔨 Usage

The following CodeSandbox or StackBlitz link demonstrates a basic use case, and it is recommended to fork this demo as a baseline while doing Bug Report and can also be downloaded as a template for project initialization.

• CodeSandbox: idux-starter
• StackBlitz: idux-starter

See Getting Started for more details.

🔗 Links

⌨️ Development

pnpm install

pnpm start

Open a browser: http://localhost:3000

🤝 Contributing

We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as Pull Request or as GitHub issues.

If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way (This guide does not provide actual support services for this project!), How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!

💖 Thanks

Many of the features are inspired by the following awesome projects.

• @angular
• ant-design
• NG-ZORRO

☀️ License

MIT © 2020-present IDuxFE

idux's Issues

[comp:image ]feature image component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

• 需要展示图片时使用。
• 单击图像可以放大显示 。
• 加载失败显示图像占位符。

What does the proposed API look like?

属性	说明	类型	全局配置	版本号
alt	图像描述	string	-	-
fallback	加载失败容错地址	string	-	-
height	图像高度	string | number	-	-
preview	预览参数，为false 时禁用	boolean	-	-
src	图片地址	string	-	-
width	图像宽度	string | number	-	-
fit	确定图片如何适应容器框，同原生 object-fit	string	-	-

[comp: spin] add spin component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

提供了加载等待的遮罩层

让用户能更好感知我们的数据请求和渲染的一个视觉效果，不会让一些动态请求加载的数据回显得很突兀，而且也能阻止用户在数据请求过程中对视图层有其他操作导致一些不必要的错误；

What does the proposed API look like?

CONFIGS

参数	说明	类型	默认值	是否支持全局配置
spinning	是否显示加载遮罩层	boolean	true	false
icon	加载图标名称	string	loading	true
tip	加载提示文字描述	string	false	true
tipAlign	文字描述与加载图标的排列方式	string	vertical(vertical：文字排列在图标下方；horizontal： 文字排列在图标同水平方向的后方)	true
size	icon 和 tip大小控制	string(small | medium | large)	small	true

SLOTS

名称	说明
defalut	需要遮罩的内容区域

@danranVm @Usualminds

[cdk: overlay] add cdk overlay

[cdk: overlay] add cdk overlay

• I have searched the issues of this repository and believe that this is not a duplicate.

对外暴露一个函数，允许调用方调用函数来创建一个浮层，且允许调用方还合适的范围内对浮层进行自定义。

特性

• 通过函数可以创建浮层并返回该浮层对应的实例；

• 调用方可以通过函数返回的浮层实例，对视图进行绑定；

• 调用方可以通过返回的实例，控制浮层的初始化、显示、隐藏和销毁；

• 浮层的滚动策略有四种：

  • close ：滚动时自动关闭浮层；
  • reposition ：默认行为，滚动时重新定位。

• 浮层定位依赖于 @popperjs/core

• cdk会对外抛出以下事件，需要调用方在使用时将事件绑定到视图上，使得cdk可以对浮层行为进行控制：

  • OverlayTriggerEvents
    • onClick
    • onMouseEnter
    • onMouseLeave
    • onFocus
    • onBlur
  • OverlayPopperEvents
    • onMouseEnter
    • onMouseLeave

  注意：Trigger返回的事件与调用方传入 trigger 的值相关。

API

overlay

import type { Options, Placement } from '@popperjs/core'
import type { ComponentPublicInstance, ComputedRef, Ref } from 'vue'

declare type Nullable<T> = T | null

type OverlayScrollStrategy = 'close' | 'reposition'
type OverlayTrigger = 'click' | 'hover' | 'focus'
type RefElement = Nullable<HTMLElement>
type VueElement = Nullable<ComponentPublicInstance | HTMLElement>

interface OverlayTriggerEvents {
  onClick?: (event: Event) => void
  onMouseEnter?: (event: Event) => void
  onMouseLeave?: (event: Event) => void
  onFocus?: (event: Event) => void
  onBlur?: (event: Event) => void
}

interface OverlayPopperEvents {
  onMouseEnter: () => void
  onMouseLeave: () => void
}

interface OverlayOptions {
  /* The class name of the overlay container. */
  className?: string
  /**
   * Control the visibility of the overlay
   */
  visible?: boolean
  /* Scroll strategy for overlay */
  scrollStrategy: OverlayScrollStrategy
  /* Disable the overlay */
  disable?: boolean
  /**
   * The distance between the arrow and the starting point at both ends.
   *Acting when the overlay uses border-radius.
   */
  arrowOffset?: number
  /* Whether to show arrow. */
  showArrow?: boolean
  /* Alignment of floating layer. */
  placement: Placement
  /**
   * The options of popper.
   * Used when ConnectOverlayOptions cannot meet the demand.
   * Priority is higher than ConnectOverlayOptions.
   */
  popperOptions?: Partial<Options>
  /* Trigger method. */
  trigger: OverlayTrigger
  /* Whether to allow the mouse to enter the overlay. */
  allowEnter?: boolean
  /**
   * Overlay offset.
   * [Horizontal axis offset, vertical axis offset]
   */
  offset: [number, number]
  /**
   * The delay of hiding overlay.
   * Send false if you don't need it.
   */
  hideDelay: number | false
  /**
   * The delay of showing overlay.
   * Send false if you don't need it.
   */
  showDelay: number | false
}

interface OverlayInstance {
  /**
   * Initialize the overlay.
   * The life cycle of the overlay will enter mounted.
   */
  initialize: () => void
  /**
   * Show the overlay.
   * The style of the overlay container will be set to block.
   */
  show: () => void
  /**
   * Hide the overlay.
   * The style of the overlay container will be set to none.
   */
  hide: () => void
  /**
   * Destroy the overlay.
   * The life cycle of the overlay will enter beforeDestroy.
   * To show the overlay again, please recreate.
   */
  destroy: () => void
  /**
   * TODO
   * The unique id of the overlay.
   * Provide subsequent components with markings for the specified overlay treatment.
   */
  overlayId: string
  /**
   * The display status of the current overlay.
   * Control by visible and disable.
   */
  visibility: ComputedRef<boolean>
  /**
   * The truth DOM node of the overlay.
   * The caller needs to bind the variable to the view.
   */
  overlayRef: Ref<RefElement>
  /**
   * Update overlay.
   * If the overlay has not been initialized, the overlay will be initialized first, otherwise the overlay will be update directly.
   * @param options
   */
  update: (options: Partial<OverlayOptions>) => void
 /**
   * The truth DOM node of the arrow.
   * If showArrow is false, we won't return arrowRef.
   * The caller needs to bind the variable to the view.
   */
  arrowRef?: Ref<RefElement>
  /**
   * The truth DOM node of the trigger.
   * The caller needs to bind the variable to the view.
   */
  triggerRef: Ref<VueElement>
  /**
   * Manually bind to the event on the trigger.
   */
  triggerEvents: OverlayTriggerEvents
  /**
   * Manually bind to events on the overlay.
   */
  overlayEvents: OverlayPopperEvents
}

Portal

Props

名称	说明	类型	备注
disable	禁止传送	boolean
target	传送位置	HTMLElement | string	传入类型是字符串时，会首先判断body下是否存在以该字符串为class name的元素，如果存在会直接使用该元素，否则会创建对应的元素作为容器。

Slots

名称	说明	备注
default	需要被传送的内容	-

DEMO

<template>
  <ix-button ref="triggerRef" @click="triggerEvents.onClick">Click</ix-button>
  <teleport to="body">
    <div ref="overlayRef" @mouseenter="overlayEvents.onMouseEnter()" @mouseleave="overlayEvents.onMouseLeave()">
      tooltip
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import { useOverlay } from '@idux/cdk/overlay'

export default defineComponent({
  name: 'Basic',
  setup() {
    const { initialize, overlayRef, triggerRef, triggerEvents, overlayEvents } = useOverlay({
      visible: false,
      trigger: 'click',
      placement: 'bottom',
      offset: [0, 0],
      showDelay: false,
      hideDelay: 1000,
      allowEnter: true,
    })
    onMounted(initialize)

    return { overlayRef, triggerRef, triggerEvents, overlayEvents }
  },
})
</script>

[comp:Breadcrumb ] feature Breadcrumb component 面包屑

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

Breadcrumb

What does the proposed API look like?

Breadcrumb props

名称	说明	类型	默认值	全局配置	备注
has-return l 是否展示返回按钮	true	true	-	-	-
return-icon	返回的图标名	string	arrow-left	-	使用ix-icon组件的name值
separator	分隔符	string	>	-	-
breadcrumb-items	面包屑路径数据	Array	[]	-	会使用for循环创建breadcrumb-item;元素数据见下表

breadcrumb-items单个元素具体数据

名称	说明	类型	默认值	全局配置	备注
text	展示的文本	string	-	-	-
path	路径点击之后跳转的路由	string	-	-	-
to	路径点击之后跳转的路由参数	Object	-	-	配置了to属性，忽略掉path属性
href	路径点击之后，使用a标签的跳转，对于url可以使用这种	string	-	-	配置了href忽略掉path与to
unlink	是否展示非连接的样式,同时点击不会跳转，但是会执行clickItem	Boolean	最后一个元素默认 true; 其他元素默认false	-	面包屑最后一个路径默认unlink为true；其他路径默认unlink为false
clickItem	点击路径的回调	Function	-	-	参数为配置的该item; 调用此方法之后，会进行跳转，如果需要进行条件判断，可将跳转手动写在clickItem中

breadcrumb events

名称	说明	参数类型	备注
click	点击任意item的时候触发	[Object] 值为点击的breadcrumb-item的配置值	在clickItem之前emit

@zymoplastic @danranVm

[comp: empty]:add empty component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

空状态时的展示占位图。

空状态时的展示占位图。

What does the proposed API look like?

参数	说明	类型	默认值
description	自定义描述内容	string	-
image	设置显示图片，为 string 时表示自定义图片地址	string	false

[cdk:utils]add unified util function to check type of the variable

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

当前项目中并没有统一的工具函数库可以用来做类型的检查，例如需要判断一个变量是否是数字，可能需要组件的开发者自行封装，这样封装检查工具函数会有大量的重复工作

What does the proposed API look like?

使用ts进行实现相应的工具函数；使得用户可以直接使用；代码如：

function isNumber (val: unknown): val is number {
    return Object.prototype.toString.call(val) === '[object Number]';
}

[code style: add brace style rule]

Reproduction link

void

Steps to reproduce

void

What is expected?

大括号永远不能省略, 增加这一条规则, 并且大括号的格式必须按照下面书写

if (foo) {
  bar();
} else {
  baz();
}

What is actually happening?

没有这一条规则

[comp: Radio] add Radio component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

• 用于在多个备选项中选中单个状态。
• 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。

What does the proposed API look like?

Radio Attributes

属性	说明	类型	全局配置
value / v-model	绑定值	string / number / boolean	-
label	Radio 的 value	string / number / boolean	-
disabled	是否禁用	boolean	-
name	原生的name属性	string	-

Radio Events

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的 Radio label 值

Radio-group Attributes

参数	说明	类型	全局配置
value / v-model	绑定值	string / number / boolean	-
size	单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效	string	-
disabled	是否禁用	boolean	-
mode	填充模式	string	-

Radio-group Events

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的 Radio label 值

Radio-button Attributes

参数	说明	类型	全局配置
label	Radio 的 value	string / number	-
disabled	是否禁用	boolean	-
name	原生 name 属性	string	-
border	是否显示边框	boolean	-
size	Radio 的尺寸，仅在 border 为true时有效	string	-

[cdk]support clipboard

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

https://material.angular.io/cdk/clipboard/overview

What does the proposed API look like?

  const value = 'copy value'
  const { copy } = useClipboard()
  copy(value).then(successful => console.log(successful))

[comp: form] add form component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

[scripts] add gen script to create component template

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

npm run gen button
npm run gen clipboard cdk

[script] An error occurred due to the low version of Node.js

Reproduction link

none

Steps to reproduce

1. yarn start

What is expected?

success

What is actually happening?

$ gulp start:dev
[15:58:58] Requiring external module ts-node/register
[15:59:03] Using gulpfile /mnt/d/WebstormProject/idux/components/gulpfile.ts
[15:59:03] Starting 'start:dev'...
[15:59:03] Starting 'clean:site'...
[15:59:03] Finished 'clean:site' after 306 ms
[15:59:03] Starting 'icons:copy'...
[15:59:04] Finished 'icons:copy' after 1.39 s
[15:59:04] Starting 'site:start'...
[15:59:04] Starting 'site:init'...
[15:59:05] Finished 'site:init' after 407 ms
[15:59:05] Starting 'site:watch'...
[15:59:05] Starting 'site:serve'...
internal/modules/cjs/loader.js:584
    throw err;
    ^

Error: Cannot find module 'worker_threads'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:582:15)
    at Function.Module._load (internal/modules/cjs/loader.js:508:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/mnt/d/WebstormProject/idux/components/node_modules/vite/dist/node/chunks/dep-0b3d3f5e.js:16:24)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
[15:59:05] 'site:serve' errored after 327 ms
[15:59:05] Error: Process failed with code 1
    at ChildProcess.childProcess.on (/mnt/d/WebstormProject/idux/components/scripts/gulp/util/task-helpers.ts:23:24)
    at ChildProcess.emit (events.js:189:13)
    at ChildProcess.EventEmitter.emit (domain.js:459:23)
    at maybeClose (internal/child_process.js:970:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
[15:59:05] 'site:start' errored after 748 ms
[15:59:05] 'start:dev' errored after 2.44 s
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Any additional comments? (optional)

worker_threads can only be supported at v11.5.0+. Maybe we should add engines in package.json, such as:

// package.json
"engines": {
  "node": ">11.5.0"
}

---

Environment	Info
node.js	v10.15.3

里程碑/Milestone v1.0.0

Milestone: @idux v1.0.0

脚本

• gen: 创建组件模板 @danranVm #3
• ci: lint, test, preview @danranVm #8 #10 #216 #218
• build #276 #277

文档

• Markdown 解析 @danranVm #13
• Website @danranVm #41 #166 #181
• 样式优化
• 在线 Demo @jeasonzone #348
• 多语言

工具

• PR Bot @danranVm #216
• Issue Templates @danranVm #19

Less

• 基础变量 @danranVm #37
• 默认主题

CDK

• breakpoint @danranVm #44
• click outside @LaamGinghong #207
• clipboard @danranVm #14
• drag/drop
• forms @danranVm #114 #153
• overlay @LaamGinghong #113
• platform @danranVm #44
• portal @LaamGinghong #113
• [] resize @danranVm #909
• subject @LaamGinghong #154
• utils @clfeng @danranVm
• virtual-list @danranVm #325

Componnets

• General 通用

  • Button 按钮 @danranVm #11
  • Icon 图标 @danranVm #20
  • Title 标题 @danranVm #188
  • Typography 排版 @LaamGinghong #130

• Layout 布局

  • Layout 布局 @liuzaijiang #425
  • Grid 栅格@zymoplastic #133
  • Divider 分割线 @LaamGinghong #32
  • Space 间距 @LaamGinghong #63

• Navigation 导航

  • Affix 固钉 @jackson-yyy #138
  • Breadcrumb 面包屑 @mrliusu #71
  • Dropdown 下拉菜单 @danranVm #311
  • Menu 导航菜单 @danranVm #229
  • Pagination 分页 @zymoplastic #98
  • Steps 步骤条 @ShannyShanny #91
  • PageHeader 页头 @qingshan-dev #228

• Data Entry 数据录入

  • Checkbox 多选框 @liuzaijiang #120
  • DatePicker 日期选择框 #541 @danranVm
  • Form 表单 @danranVm #27
  • Input 输入框 @danranVm #158
  • Radio 单选框 @lwh2015 #92
  • Select 选择器 @danranVm #212
  • TreeSelect 树选择 #557 @liuzaijiang
  • AutoComplete 自动完成 #680
  • Cascader 级联选择 @danranVm #797
  • Switch 开关 @jiayinkong #75
  • TimePicker 时间选择框 @jackson-yyy #222
  • Transfer 穿梭框 @sallerli1 #782
  • Upload 上传 @typistZxd #605
  • InputNumber 数字输入框 @calvinchan22 #31
  • Mentions 提及 @lionnnnn #359
  • Rate 评分 @CocaColf #34
  • Slider 滑动输入条 @imguolao #186

• Data Display 数据展示

  • Badge 徽标数 @KnorienChang #64
  • Collapse 折叠面板 @Usualminds #70
  • Card 卡片 @CruellyJoHn #28
  • Empty 空状态 @qikong333 #54
  • Image 图片 @lwh2015 #30
  • List 列表 @rhinonan #187
  • Popover 气泡卡片 @LaamGinghong #193
  • Tree 树形控件 @danranVm #446
  • Tooltip 文字提示 @LaamGinghong #200
  • Tag 标签 @Gilbert5210 #29
  • Tabs 标签页 @LaamGinghong #195
  • Table 表格 @danranVm #394
  • Avatar 头像 @danranVm #55
  • Carousel 走马灯 @thinkingOfBetty #230
  • Descriptions 描述列表
  • Timeline 时间轴 @sjia0307 #69
  • Comment 评论 @lionnnnn #358
  • Calendar 日历
  • Statistic 统计数值 @clfeng #95

• Feedback 反馈

  • Alert 警告提示 @brenner8023 #43 #520
  • Drawer 抽屉 @huiyimeijiaodian #227
  • Modal 对话框 @danranVm #346
  • Message 全局提示 @manchixue #36
  • Popconfirm 气泡确认框 #555 @ttdegit
  • Spin 加载中 @liuzaijiang #72
  • Notification 通知提醒框 #545 @lo56ve
  • Progress 进度条 @hangboss1761 #35
  • Skeleton 骨架屏 @Pupils-web #94
  • Result 结果 @LaamGinghong #112

• Other 其他

  • core 全局化配置 @danranVm #5
  • I18n 国际化 @danranVm #59
  • BackTop 回到顶部 @imguolao #79
  • Anchor 锚点 @bunnybunny3 #93

[comp: switch] add Switch component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

[comp: Divider] dynamic slots auto rerender

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

Any additional comments? (optional)

---

Environment	Info
@Idux
Browser

[comp:button]button components

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

ix-button

当 mode 不为 link 时，除以下表格之外还支持原生 button 的所有属性。
当 mode 为 link 时，除以下表格之外还支持原生 a 的所有属性。

属性	说明	类型	全局配置
mode	设置按钮种类	`'primary'	'default'
danger	设置危险状态	boolean	-
ghost	设置幽灵状态	boolean	-
disabled	设置禁用状态	boolean	-
loading	设置加载中状态	boolean	-
size	设置按钮大小	`'large'	'medium'
shape	设置按钮形状	`'circle'	'round'`
block	将按钮宽度调整为其父宽度的选项	boolean	-
icon	设置图标类型(loading 状态时无效)	string	-

ix-button-group

属性	说明	类型	全局配置
mode	设置组内按钮种类，	`'primary'	'default'
size	设置组内按钮大小	`'large'	'medium'
shape	设置组内按钮形状	`'circle'	'round'`

[comp: badge]: feature badge component

• I have searched the issues of this repository and believe that this is not a duplicate.

徽标组件

• 支持圆点徽标
• 支持数字徽标和自定义最大数字徽标
• 支持自定义徽标(组件徽标)

What problem does this feature solve?

徽标组件

What does the proposed API look like?

API

参数	说明	类型	全局配置
dot	圆点徽标	boolean	false
count	数值徽标的值	number|string	-
overflowCount	最大数值徽标的值，超出以${overflowCount}+显示	number|string	99
showZero	数值为0时是否显示	boolean	false
color	徽标的颜色，数值徽标和圆点徽标为设置背景色，组件徽标为字体颜色	hex|rgb?a	-

SLOTS

方法	说明
defalut	需要添加徽标的内容
count	自定义徽标

[comp: collapse] add collapse component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

[comp: Alert]: add Alert component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

props

参数	说明	类型	默认值
message	提示内容	String	-
description	提示的辅助性文字介绍	String	-
type	提示类型 success、info、 warning、error	String	info, banner模式下默认值为warning
closeable	是否显示关闭按钮	Boolean	false
banner	是否用作顶部公告	Boolean	false
showIcon	是否显示辅助图标	Boolean	false,banner 模式下默认值为 true

事件

参数	说明	类型	默认值
onClose	关闭事件	Function	-
afterClose	关闭动画结束后触发的事件	Function	-

slot

参数	说明	类型	默认值
action	自定义操作项	-	-
message	提示内容	-	-
description	辅助性介绍	-	-
icon	自定义图标	-	-
closeText	自定义关闭按钮	-	-

[comp: anchor] add anchor component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

用于跳转到页面指定位置。

What does the proposed API look like?

• 可设置是否是固定模式。即是否将其固定在可视范围
• 可设置固定模式下是否显示小圆点
• 可指定滚动容器，默认window
• 可设置距离窗口顶部达到指定偏移量（offsetTop）后触发其高亮
• 可设置锚点滚动偏移量，默认同offsetTop

例子

<ix-anchor>
    <ix-link href="#example" title="example" />
    <ix-link href="#api" title="api">
      <ix-link href="#props" title="props" />
      <ix-link href="#emit" title="emit" />
    </ix-link>
 </ix-anchor>

API

ix-anchor

Props

名称	说明	类型	默认值	全局配置	备注
affix	是否是固定模式	boolean	true	-	-
showInkInFixed	固定模式是否显示小圆点	boolean	false	✅	-
target	指定滚动的容器	string|HTMLElement	window	-	-
offsetTop	距离窗口顶部达到指定偏移量后触发激活	number	-	-	-
targetOffset	锚点滚动偏移量，默认与 offsetTop 相同	number	-	-	-

Emits

名称	说明	参数
click	锚点元素点击事件	e: Event, link: Object
change	监听锚点链接改变	activeLink: string

ix-link

Props

除以下表格外还支持原生 a 元素的所有属性。

名称	说明	类型	默认值	全局配置	备注
href	锚点链接	string	-	-	-
title	文字内容	string	-	-	-

[comp: Checkbox ] add Checkbox Component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

多选框

What does the proposed API look like?

Checkbox

Props

支持原生input属性, 例如value, name, id等

参数	说明	类型	默认值	全局配置	备注
checked	指定当前勾选框是否选中	boolean	false	-	支持双向绑定，使用时按照v-model:checked = 形式
disabled	禁用状态	boolean	false	-	-
indeterminate	是否处于不确定状态	boolean	false	-	当值为true时，按钮样式处于半选状态，且不受checked影响
trueValue	勾选框选中时返回的值	string | number	true	-	-
falseValue	勾选框不选中时返回的值	string | number	false	-	-

Slots

名称	说明	参数类型	备注
defalut	文本区域	-	-

Emits

名称	说明	参数类型	备注
change	点击勾选框时触发	Function(checkValue:boolean | string | number)	-

Checkbox Group

Group Props

| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
| --- | --- | --- | --- | --- | --- |value
| value | 指定选中的选项 | string[] | [] | - | 支持双向绑定，使用时按照v-model:value = 形式 |
| disabled | 子ix-checkbox禁用状态 | boolean | false | - |- |
| name | 子ix-checkbox 的 name 属性 | string | - | - |- |

Group Slots

名称	说明	参数类型	备注
defalut	ix-checkbox区域	-	-

Group Emits

名称	说明	参数类型	备注
change	value变化时的回调函数	Function(checkValue:string[])	-

[comp: Pagination] add Pagination component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

API

ix-pagination

Props

名称	说明	类型	默认值	全局配置	备注
v-model:pageIndex	当前页数	number	1	-	-
v-model:pageSize	每页条数	number	10	✅	-
disabled	是否禁用	boolean	false	-	-
itemRender	用于自定义页码的结构	PaginationItemRenderFn | v-slot:item	false	✅	-
pageSizeOptions	指定每页可以显示多少条	number[]	[10, 20, 50, 100]	✅	-
responsive	当 pageSize < 1 时，根据屏幕宽度自动调整尺寸	boolean	false	✅	-
showQuickJumper	是否可以快速跳转至某页	boolean	false	✅	-
showSizeChanger	是否是否可以改变 pageSize	boolean	false	✅	-
showTitle	是否显示原生 title 页码提示	boolean	false	✅	-
simple	显示为简单分页	boolean	false	✅	-
size	分页组件大小	middle | small	middle	✅	-
total	数据总数	number	0	-	-
totalRender	用于显示数据总量和当前数据顺序	PaginationTotalRenderFn | v-slot:total	-	✅	-

Slots

名称	说明	参数类型	备注
item	用于自定义页码的结构	{ pageIndex: number; type: PaginationItemType }	-
total	用于显示数据总量和当前数据顺序	{ total: number; range: [number, number] }	-

[comp: divider]: feature divider component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

• 支持水平、垂直两种分割线（默认为水平分割线）；
• 支持分割线中显示文字（垂直分割线不支持显示文字）；
• 支持分割线文字显示在左、中、右（默认为中间）三种位置；
• 支持分割线文字显示为正常文本格式（默认为粗体）；
• 支持分割线样式为虚线；

What does the proposed API look like?

ix-divider

参数	说明	类型	默认值	备注
dashed	是否虚线	boolean	false	-
plain	文字是否显示为普通正文样式	boolean	false	-
position	文字显示位置	left | center | right	center	文字显示的位置有三种默认位置；垂直分割线文字不作样式处理。
type	水平分割线还是垂直分割线	horizontal| vertical	horizontal	-
text	分割线显示的文字	slot	-	-

[comp: Message]feature Message component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

Message 全局提示

全局展示操作反馈信息。

API

• message.success(content, [duration])
• message.error(content, [duration])
• message.info(content, [duration])
• message.warn(content, [duration])
• message.remove([messageId])
• message.getContainer() 获取message消息容器

也可以通过对象的形式传递参数

• message.success(config)
• message.error(config)
• message.info(config)
• message.warn(config)
• message.create(config)

参数	说明	类型	默认值
content	提示内容	string|config|vnode	-
duration	自动关闭的延时，单位秒。当设置为0时不消失	number	3

config对象属性如下:

参数	说明	类型	默认值
content	提示内容	string|vnode	-
duration	自动关闭的延时，单位秒。设置为0立即关闭	number	3
icon	自定义图标	string|vnode	-
messageId	当前提示的唯一标志	string|number	-
onClose	message关闭时触发的回调函数	function	-
pauseOnHover	鼠标移上时禁止自动移除	boolean	true

全局方法

组件还提供全局配置和全局销毁方法

通过useGlobalConfig方式设置message的默认全局配置

useGlobalConfig('message', {
  top: 100,
  duration: 2,
  maxCount: 3
});

options:

参数	说明	类型	默认值
duration	默认自动关闭延时，单位秒，设置为0立即关闭	number	3
maxCount	最大显示数, 超过限制时，最早的消息会被自动关闭	number	-
top	消息距离顶部的位置	string|number
pauseOnHover	鼠标移上时禁止自动移除	boolean	true

message.remove

销毁某个消息实例的方法

参数	说明	类型	默认值
messageId	需要销毁的消息实例对应的messageId。可选参数，如果不传参数则清除所有消息。	string|number|(string|number)[]	-

[comp: Skeleton] add Skeleton component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

在需要等待加载内容的位置提供一个占位图形组合。

• 适用于图文列表信息比较多的场景
• 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。
• 提供预设模板，自由组合

What does the proposed API look like?

API

Ix-skeleton

Props

名称	说明	类型	默认值	全局配置	备注
animation	是否展示动画效果	boolean	false	-	-
width	设置组件宽度	number | string	100%	-	-
height	设置组件高度	number| string	100%	-	-
loading	是否开启占位图	boolean	false	-	false的值只有在 default 槽中有内容时才会工作。
type	字符串分隔要创建的骨架组件列表	string	undefined	-	required骨架组件列表，例如 type="text@3" 和 type="card, list-item"。将根据提供的字符串递归生成相应的框架。 还支持多个元素的简写，例如 article@3和 paragraph@2 ，它们将生成 3 article skeletons and 2 paragraph 骨架。具体的预设列表会根据后续具体业务场景来建立。
types	将与预定义选项结合使用的自定义类型对象。 有关可用的预定义选项的列表	object	{}	-	与type搭配使用，建立自定义的骨架模板。

名称	说明
default	默认插槽，放置骨架屏子组件

[comp: tag]feature tag component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

• 支持默认的6种标签tag样式
• tag内容支持多种方式展示（设置最大高宽，超出使用省略；换行显示完整；列宽限定，换行完整）
• 默认8中颜色区分等级，且支持自定义样式
• 支持标签的删除操作
• 支持默认的三种size供选择，当然也可以自定义size

What does the proposed API look like?

ix-tag

API

Props

参数	说明	可选项	类型	默认值
closable	标签是否可以关闭		Boolean	false
color	标签颜色	gray| success| info| lowRisk|danger | waring|serious|risk	String	-
icon	标签左侧图标		string	-
checkable	标签是否可以被选中		Boolean	false
checked	标签选中状态		Boolean	false
isRound	是否圆角形状		Boolean	false
level	数字等级(正整数),这个可以优先级放后		Number	-

Emits

事件名称	说明	回调函数
close	关闭时的回调	(e) => void
change	点击标签时触发的回调	(checked) => void

Slots

名称	说明
default	tag的text内容
icon	tag前面的icon内容

[cdk: forms]: reactive forms system

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

参考自 @angular/forms

特性

• 显示创建表单模型: useFormGroup, useFormArray, useFormControl
• 易扩展的表单验证: Validators
• 响应式的表单状态: valid, invalid, validating, blurred, unblurred

API

示例

<template>
  <ix-form :control="group">
    Name: <ix-input control="name" /> <br />
    Age: <ix-input control="age" /> <br />
    Email: <ix-input control="email" />
  </ix-form>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { injectControl, provideControl, Validators, useFormGroup } from '@idux/cdk/forms'

const IxForm = defineComponent({
  props: ['control'],
  setup(props) {
    provideControl(props.control)
  },
  template: `<form><slot /></form>`,
})

const IxInput = defineComponent({
  props: ['control'],
  setup(props) {
    const control$ = injectControl(props.control)!

    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const onChange = (evt: any) => {
      control$.setValue(evt.target!.value, { dirty: true })
    }

    return { control$, onChange }
  },
  template: `<input :value="control$.valueRef.value" @input="onChange" @blur="control$.markAsBlurred()" />`,
})

export default defineComponent({
  components: { IxForm, IxInput },
  setup() {
    const { required, min, max, minLength, maxLength } = Validators
    const group = useFormGroup({
      name: ['tom', required],
      age: [18, [required, min(1), max(99)]],
      email: ['', [minLength(8), maxLength(40)]],
    })

    group.watchValue(value => console.log(value))
    group.watchStatus(stats => console.log(stats))

    group.get('name')?.watchStatus(stats => console.log(stats))

    return { group }
  },
})
</script>

后续支持

• useFormAccessor： 注册表单控制器

  • onChange(fn: any): void // 注册 onChange 事件。
    onTouched(fn: any): void // 注册 onTouched 事件

• useValidators: 注册同步验证器 (自定义业务表单组件需要)

  • validate(value: any): ValidationErrors | null // 自定义验证函数
    onValidatorChange?(fn: () => void): void // 注册验证状态改变的事件 可选实现

• useAsyncValidators：注册异步验证器 (自定义业务表单组件需要)

  • validate(value: any): Promise<ValidationErrors | null> // 自定义验证函数
    onValidatorChange?(fn: () => void): void // 注册验证状态改变的事件 可选实现

[scripts]markdown 文档解析

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

解析不同目录下的 markdown 文件，用于生成文档站点。

What does the proposed API look like?

[components]support global config

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

<!-- App.vue -->
<script lang="ts">
import { defineComponent } from 'vue'
import type { ButtonConfig } from '@idux/components'
import { useGlobalConfig } from '@idux/components'

export default defineComponent({
  setup() {
    // 设置 button 组件默认大小为 large
    const buttonConfig = useGlobalConfig('button',  { size: 'large'})

    // 可以动态修改全局配置
    const changeButtonConfig = () => {
      buttonConfig.size = 'small'
    }

    return { changeButtonConfig }
  }
})
</script>

[comp: step] add Step component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

解决了业务中一些需要进度条组件的，比如物流进展，工单进展等。

What does the proposed API look like?

• 可配置展示方向，支持水平和垂直两个方向
• 有两个尺寸可配置，默认大小（default）和迷你的（small）
• 有两种展示方式，带序号的，或点状的
• 每个节点的内容由四部分组成，标题（必须有），子标题（可选），描述（可选），悬浮提示的内容（可选）
• 可控制每个节点状态，有等待，进行中，完成，和错误这4种状态
• 可设置当前活跃的节点，以及该节点的进度（可选）
• 可通过配置接受点击节点的发出的事件change
• 可设置节点是否是禁用的（禁用的即不可点击）

使用例子

<ix-steps>
  <ix-step title="第一步" />
  <ix-step title="第二步" />
  <ix-step title="第三步" />
</ix-steps>

API

ix-steps

Props

名称	说明	类型	默认值	全局配置	备注
active	指定步骤条当前的活跃节点，从0开始计算	number	0	-	-
direction	指定步骤条的方向	horizontal | vertical	horizontal	-	-
placement	指定步骤条节点附带的标签放置的位置	horizontal | vertical	horizontal	-	-
percent	当前活跃节点的进度	number	0	-	取值是0-100
progressDot	指定步骤条是否为点状步骤条	boolean | v-slot:progressDot	false	-	使用slot的话，会传入当前节点对象item
size	指定步骤条节点的大小	medium| small	medium	✅	-
status	指定步骤条节点的状态	wait | process | finish | error	process	-	-

Emits

名称	说明	参数
change	设置 change 后，Steps 变为可点击状态。切换步骤条时触发	当前活跃节点对象currentItem

ix-step

Props

名称	说明	类型	默认值	全局配置	备注
title	标题	string | v-slot:title	-	-	使用slot的话，会传入当前节点对象item
subTitle	副标题	string | v-slot:subTitle	-	-	使用slot的话，会传入当前节点对象item
description	步骤条节点的具体描述	string | v-slot:description	-	-	使用slot的话，会传入当前节点对象item
disabled	节点禁用点击	true | false	false	-	-
icon	每个节点的图标	string | v-slot:icon	-	-	-
status	每个节点的状态，当不设置时，会用Steps里的status	wait | process | finish | error	wait	-	-

[comp:less] add basic less variable

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

[comp: progress] add Progress component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

Props

各类型通用的属性

参数	说明	类型	默认值
type	类型，可选 line circle dashboard	string	line
format	内容的函数模板，支持插槽	function(percent, successPercent) | v-slot:format="percent, successPercent"	percent => percent + '%'
percent	百分比	number	0
status	状态，可选：success exception normal active(仅限line)	string	-
hideInfo	是否隐藏进度数值或状态图标	boolean	false
success	成功进度条相关配置	{ percent: number, strokeColor: string }	-
trailColor	未完成的分段的颜色	string	-
strokeColor	进度条的色彩	string	-
strokeLinecap	进度条的样式，可选：round square	string	round

type="line"

参数	说明	类型	默认值
strokeColor	进度条的色彩，传入 object 时为渐变	string | { from: string; to: string; direction: string }	-
strokeWidth	进度条线的宽度，单位 px	number	10

type="circle"

参数	说明	类型	默认值
width	圆形进度条画布宽度，单位 px	number	132
strokeColor	圆形进度条的色彩，传入 object 时为渐变	string | { from: string; to: string; direction: string }	-
strokeWidth	圆形进度条线的宽度，单位是进度条画布宽度的百分比	number	6

type="dashboard"

参数	说明	类型	默认值
width	仪表盘进度条画布宽度，单位 px	number	132
strokeWidth	仪表盘进度条线的宽度，单位是进度条画布宽度的百分比	number	6

[comp: Statistic]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

展示统计数值。

What does the proposed API look like?

名称	说明	类型	默认值	全局配置	备注
formatter	自定义数值展示	v-slot | (value) => string	-
precision	数值精度	number	-	✅
prefix	设置数值的前缀	string | v-slot	-
suffix	设置数值的后缀	string | v-slot	-
title	数值的标题	string | v-slot	-
value	数值内容	string | number	-

[comp:core] add logger

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

export const Logger = { info, warn, error }

[comp: inputNumber]feature inputNumber component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

[comp: card]feature card component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

• 支持设置卡片大小
• 支持设置卡片边框的显示
• 支持title自定义
• 支持卡片右上角操作区域自定义
• 支持卡片loading状态
• 支持卡片悬浮效果

What does the proposed API look like?

ix-card

参数	说明	类型	默认值	全局配置
title	卡片标题	`'string'	'slot'`	-
extra	右上角操作区域	`'string'	'slot'`	-
footer	卡片底部操作区域	'slot'	-	-
bordered	是否有边框	'booelan'	'true'	'true'
hoverable	是否悬浮	'booelan'	'false'	'false'
loading	当卡片内容还在加载中时，可以用 loading 展示一个占位	'booelan'	'false'	'false'
size	设置按钮大小	`'large'	'medium'	'small'`

事件

事件名称	说明	参数
onExtraClicked	当extra参数为string时，用于点击extra	event

[comp: Timeline]feature Timeline component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

timeline

属性	说明	类型	默认
pending	最后的幽灵节点是否存在，如果传入string或者slot，则默认存在，并且作为内容	boolean | string | slot	false
pendingDot	最后的幽灵节点存在时的时间轴点	string | slot	加载中的icon
reverse	时间节点是否倒叙	boolean	false
mode	时间轴和内容的相对位置	left | alternate | right	right

slot

方法	说明
default	时间节点
pending	幽灵节点的内容
pendingDot	幽灵节点的时间轴点

timeline-item

属性	说明	类型	默认
color	圆圈颜色	string	blue
dot	自定义时间轴点	string | slot	-
position	时间节点内容的位置，优先级比timeline的mode高	left | right	-

slot

方法	说明
default	timeline-item 的内容
dot	自定义时间轴点

[comp: i18n] support i18n

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

const datePikerLocal = useI18n('dataPiker')

[comp: Result] add component Result

• I have searched the issues of this repository and believe that this is not a duplicate.

用于反馈一系列操作任务的处理结果。

What problem does this feature solve?

当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。

• 可以传入一个 v-slot: extra 来显示操作区；
• 可以传入一个 url 来自定义显示的图标，也可以传入一个 v-slot: icon 来显示图标；
• 可以传入 status 来控制按钮的颜色以及显示的图标；
• 可以传入 title 和 subtitle 来显示对应的文字，同时也支持 slot 的形式，优先级高于 prop ；
• 当需要显示复杂的说明时，可以传入一个 slot 来显示。

What does the proposed API look like?

ix-result

Props

名称	说明	类型	默认值	全局配置	备注
icon	自定义图标	string | v-slot: icon	-	-	传入一个 name，表示 ix-icon 的图标，用来替换默认的图标；也可以使用 slot 的形式传入，优先级高于 prop
status	结果的状态，决定图标和颜色	ResultStatus	-	✅	-
subtitle	subtitle 文字	string | v-slot: subtitle	-	-	slot 形式优先级高于 prop
title	title 文字	string | v-slot: title	-	-	slot 形式优先级高于 prop

type ResultStatus = 'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500'

Slots

名称	说明	参数类型	备注
default	复杂的情况说明，用于显示更多的信息	-	-
extra	操作区	-	-

[comp: icon] support fill currentColor

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

What does the proposed API look like?

<ix-icon style="color: 'red'" name="up">
<ix-icon class="red" name="up">

[cdk:breakpoint] add breakpoint system and observeBreakpoint

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

• 栅格断点系统
• 支持响应式

What does the proposed API look like?

export enum Breakpoints = {
  XSmall: '(max-width: 599.99px)',
  Small: '(min-width: 768px) and (max-width: 1023.99px)',
  Medium: '(min-width: 1024px) and (max-width: 1279.99px)',
  Large: '(min-width: 1280px) and (max-width: 1719.99px)',
  XLarge: '(min-width: 1720px)',
}

// 非响应式
const isXSmall  = isMatchedBreakpoint(Breakpoints.XSmall)
// 响应式
const layoutChange = observeBreakpoint(Breakpoints.XSmall)
// const layoutChange = observeBreakpoint([Breakpoints.XSmall, Breakpoints.Large])
watchEffect(() => {
 console.log('breakpoints', layoutChanges.value.breakpoints)
  console.log('matches', layoutChanges.value.matches)
})
// 清空观察者
cleanObservables()

[comp: button] tag did not get the correct value

Reproduction link

暂无,
因为问题比较明显, tag 未取到正确的值, groupProps 和 全局配置都失效了

Steps to reproduce

1. 为 button 的 mode 配置全局默认属性为 link
2. 发现 tag 不是 a 标签

What is expected?

tag 是 a

What is actually happening?

tag 是 button

Any additional comments? (optional)

原因如下注释

setup(props: ButtonProps) {
    const groupProps = inject(buttonGroupInjectionKey, {})
    const buttonConfig = useGlobalConfig('button')
    const classes = useClasses(props, groupProps, buttonConfig)
    const tag = computed(() => (props.mode === 'link' ? 'a' : 'button'))   // 这里只用了 props, 没有像下面一样取  groupProps 和 config
    return { classes, tag }
  },
})
const useClasses = (props: ButtonProps, groupProps: ButtonGroupProps, config: ButtonConfig) => {
  return computed(() => {
    const mode = props.mode || groupProps.mode || config.mode
    const size = props.size || groupProps.size || config.size

---

Environment	Info
@Idux	any
Browser	all

[comp: avatar] add avatar component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

用来代表用户或事物，支持图片、图标或字符展示。

What does the proposed API look like?

ix-avatar

AvatarProps

名称	说明	类型	默认值	全局配置	备注
alt	图像无法显示时的替代文本	string	-	-	-
gap	字符类型距离左右两侧边界单位像素	number	4	✅	-
icon	设置自定义图标	string | VNode | #icon	user	✅	如果设置了 src, 则作为图片加载失败的 fallback 行为
shape	设置头像的形状	'circle' | 'square'	'circle'	✅	-
size	设置头像的大小	'large' | 'medium' | 'small' | number | Record<BreakpointKey, number>	'medium'	✅	-
src	图片类头像的资源地址	string	-	-	-
srcSet	设置图片类头像响应式资源地址	string	-	-	-
onError	图片加载失败的事件	() => unknown	-	-	返回 false 会关闭组件默认的 fallback 行为

AvatarSlots

名称	说明	参数类型	备注
default	图片加载失败的 fallback 行为	-	优先级高于 icon

基本指南

Vue 3.0 的发布带来了完整的 TypeScript 开发体验，全新的 Composition Api, 以及其他的各种新特性
现有的内部组件库承载了许多它本不应该承载的功能，已经日渐膨胀，变得难以维护
积重难返，我们决定扔掉技术包袱，重新设计并开发一套全新的组件库

✨ 特性

• Monorepo 管理模式：cdk, components, pro
• 全面拥抱 Composition Api，从源码到文档
• 完全使用 TypeScript 开发，提供完整的类型定义
• 开箱即用的 Tree Shaking
• 高覆盖率的单元测试
• 国际化语言支持
• 灵活的全局配置
• 深入细节的主题定制能力

📓 版本规范

• 严格遵循 Semantic Versioning 2.0.0 语义化版本规范
• 发布周期(1.0版本发布后实行)
  • 修订版本号：每周末会进行日常 bugfix 更新（如果有紧急的 bugfix，则任何时候都可发布）
  • 次版本号：每月发布一个带有新特性的向下兼容的版本
  • 主版本号：含有破坏性更新和新特性，不在发布周期内

🤝 协作指引

• 贡献指南
• 开发流程
  • 所有 Feature 和 Bugfix 都需要建立 Issue
  • Feature 需要进行设计和讨论
  • 编码
  • CI：Lint, Test, Preview
  • Code Review

🎨 代码风格

我们使用了 eslint, stylelint, markdownlint 以及 ls-lint 来保证整体的代码风格一致。
并且在 commit hooks 中配置了自动格式化和 lint, 只要提交通过即可。

📚 文档内容

• 基本介绍
• 何时使用
• API 说明
• 代码演示
• 如何使用（可选）
• FAQ（可选）

✅ 单元测试

• Public Api 必须覆盖

• 覆盖率要求：85%

  // jest coverageThreshold
  {
    branches: 85,
    functions: 85,
    lines: 85,
    statements: 85,
  }

[comp: space]: feature space component

• I have searched the issues of this repository and believe that this is not a duplicate.

设置组件之间的间距，避免组件紧贴在一起，拉开统一的空间。

• 适合行内元素的水平间距
• 可以设置各种水平对齐方式

What problem does this feature solve?

核心原理是通过 Flex 布局对组件内部的元素进行重新排布：

• 可以通过设置 align 设置不同的对齐方式：start | center | end | baseline ；
• 可以通过设置 direction 设置 水平 、垂直 两种间隔方式；
• 可以设置 size 设置间隔的大小，其中 size 有三种默认大小：'small'|'middle'|'large' ，如遇到无法满足的情况，还可以传入一个 数字 自定义间隔大小。同时 size 允许传入一个数组，用来控制每个间隔的大小，数组的长度必须与传入的 children 长度 - 1 相等，否则会抛出警告；
• 可以以 slot 的形式传入一个 split 分隔符；
• 可以设置 wrap 来设置是否自动换行，仅在 horizontal 时有效。

What does the proposed API look like?

props

参数	说明	类型	全局配置	默认值	备注
align	对齐方式	start | center | end | baseline	-	baseline	-
direction	间距方式	vertical | horizontal	-	horizontal	-
size	间距大小	Size | Size[]	small	-	有三个预设间距大小，除此之外还可以传入一个数字自定义间距大小，还可以传入一个数组来控制每个间距的大小（数组长度需等于间距个数，否则组件会抛出警告）
split	设置拆分	string	-	-	设置间隔分割符，当传入 split 时，内部间距会被分隔符替代；除了这种方式，你还可以设置 v-slot: split 的方式设置分隔符，优先级高于 prop
wrap	是否换行	boolean	-	false	仅在 horizontal 时生效

type Size = 'small' | 'middle' | 'large' | number

slots

属性	说明
default	需要被间隔的内容
split	分隔符

[comp: Rate] add Rate component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

• 支持鼠标悬浮和点击图标时，图标高亮，可以自定义高亮和未选状态的颜色
• 支持图标数目
• 支持半分（选）
• 支持只读状态
• 图标支持自定义字符或icon，一般来说是是使用某个文字或者某个iconfont
• 可捕获图标被hover时的事件，实现譬如鼠标悬浮到不同分数时，某个位置显示一些状态文字
• 可捕获分数change时的事件

What does the proposed API look like?

props

参数	说明	默认值	类型	备注
value	高亮的数目	0	number	-
strokeColor	高亮颜色	待定	string	-
backgroundColor	未被选择时的颜色	待定	string	-
count	图标数目	5	number	-
icon	自定义图标	⭐	string	props 或 slot
allowHalf	支持半分（选）	false	boolean	-
disabled	只读模式	false	boolean	-
tooltips	每一个元素的提示信息	[]	string[]	-
allowClear	是否可以取消选择	false	boolean	-

event

参数	说明	类型
hover	鼠标经过图标时触发	Function(value: number)
change	分数发生改变时触发	Function(value: number)

[comp:button] add icon component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

• svg
• 支持静态加载
• 支持动态加载
• 支持IconFont
• 支持自定义图标(svg)

What does the proposed API look like?

ix-icon

参数	说明	类型	全局配置
[type]	图标类型，遵循图标的命名规范	string
[theme]	图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标	'fill'丨'outline'丨'twotone'	'outline'
[spin]	是否有旋转动画	boolean	false
[color]	仅适用双色图标，设置双色图标的主要颜色	string	'primary'
[iconfont]	指定来自 IconFont 的图标类型	string	-
[rotate]	图标旋转角度	number	-

[useIcon]

方法	说明	参数
addIcon()	用于静态引入图标	Array
addIconLiteral()	用于静态引入用户自定义图标	string
fetchFromIconfont()	用于从 FontIcon 获取图标资源文件	IconfontOption
changeAssetsSource()	用于修改动态加载 icon 的资源前缀，使得你可以部署图标资源到你想要的任何位置，例如 cdn	string

[comp: BackTop] add BackTop component

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

• 返回页面顶部的操作按钮

What does the proposed API look like?

Props

参数	说明	类型	默认值	全局配置	备注
target	需要监听其滚动事件的元素	string | HTMLElement	window	-	传入 string 类型，会在 mounted 的时候使用 querySelector 来获取元素
duration	回到顶部所需时间（ms）	number	450	✅	-
visibility-height	滚动高度达到此参数值才出现	number	400	✅	-

Slots

名称	说明	参数类型	备注
defalut	自定义显示内容	-	-

Emits

名称	说明	参数类型	备注
click	点击按钮触发的事件	event	-

[comp: button] icon not work

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

图标没有正常显示

Any additional comments? (optional)

---

Environment	Info
@Idux
Browser

[comp: template]: the template create by `yarn gen` report errors

Steps to reproduce

在根目录下通过执行脚本 yarn gen [name] 创建对应组件。

What is expected?

创建组件成功，组件代码无报错。

What is actually happening?

创建组件成功，创建后的代码中包含 ts 类型错误。

Any additional comments? (optional)

defineComponent 这个函数的类型不一致