| - |
================================================
FILE: docs/switch.md
================================================
# Switch 开关
开关选择器
> 注意：使用前需要先全局实例化一次该构造函数 `new Rabbit.Switch()`
## 何时使用
- 需要表示开关状态/两种状态之间的切换时
- 和 `checkbox`的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合
## 代码示例
基本
- 基本用法，状态切换时会触发事件。
```html
Attributes
### Switch
| 属性 | 说明 | 默认值 |
| -------------- | ------------------------------------------------------------ | ------ |
| checked | 指定当前是否选中 | false |
| size | 开关的尺寸，可选值为`large`、`small`、`default`或者不写。建议开关如果使用了2个汉字的文字，使用 large。 | default |
| disabled | 禁用开关 | false |
| true-color | 自定义打开时的背景色 | - |
| false-color | 自定义关闭时的背景色 | - |
| loading | 加载中的开关 | false |
| open | 自定义显示打开时的内容 | - |
| close | 自定义显示关闭时的内容 | - |
### Config 方法
配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的 API。（并不是每个组件都会有）
| 参数 | 说明 | 类型 |
| ---- | --------------------------------------------------- | ------ |
| el | 配置当前选定的 carousel，必须是选择器名称或者元素名 | String |
该方法返回以下值：
- `checked`
- `disabled`
- `loading`
- `events(options)`
| 返回值 | 说明 | 类型 | 默认值 |
| -------- | -------------------------------- | -------- | ------ |
| checked | 响应式设置或更新当前是否选中状态 | Boolean | - |
| disabled | 响应式设置或更新禁用开关状态 | Boolean | - |
| loading | 响应式设置或更新加载中的开关状态 | Boolean | - |
| events | 非响应式API，添加开关事件 | Function | - |
- `events`的参数 options 为对象，具体说明如下：
| 属性 | 说明 | 回调参数 |
| :------- | :----------------------------- | :------------------------- |
| onChange | 开关变化时触发，返回当前的状态 | (checked: boolean) => void |
================================================
FILE: docs/tabs.md
================================================
# Tabs 标签页
选项卡切换组件。
> 注意：使用前需要先全局实例化一次该构造函数 `new Rabbit.Tabs()`
## 何时使用
- 提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
RabbitUI 依次提供了三级选项卡，分别用于不同的场景。
- 卡片式的页签，提供可关闭的样式，常用于容器顶部。
- 标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
## 代码示例
基础用法
- `active-index` 与 `r-tab-pane` 的 `index` 对应，用于标识当前激活的是哪一项，key 值默认从 0 开始，默认激活第一项。可以使用提供的 `config` 方法返回的 `activeIndex` 进行动态改变
```html
标签一的内容
标签二的内容
标签三的内容
```
图标
- 通过设置属性 `icon`，可以显示一个图标。
```html
标签一的内容
标签二的内容
标签三的内容
```
迷你型
- 设置属性 `size` 为 `small` 可以显示为迷你型，只在 `type` 为 `line` 时有效。
```html
标签一的内容
标签二的内容
标签三的内容
```
禁用
- 禁用某一项。
```html
标签一的内容
标签二的内容
标签三的内容
```
卡片样式
- 设置属性 `type` 为 `card` 可以显示卡片样式，常用于容器顶部。
```html
标签一的内容
标签二的内容
标签三的内容
```
可关闭
- 通过设置属性 `closable` 可以关闭某一项，仅在 `type` 为 `card` 时有效。
- 当设置了可关闭后，面板的切换将不使用切换动画。
```html
标签一的内容
标签二的内容
标签三的内容
```
不使用动画
- 通过设置属性 `animated` 为 `false` 可以禁用动画。
```html
标签一的内容
标签二的内容
标签三的内容
```
其它样式
- 可以根据业务自定义 UI，需要一点额外的样式覆盖。
```html
标签一的内容
标签二的内容
标签三的内容
标签一的内容
标签二的内容
标签三的内容
```
Attributes
### Tabs
| 属性 | 说明 | 默认值 |
| ---------------- | ------------------------------------------------------------ | ---------- |
| active-index | 初始化选中面板的 index | 第一个面板 |
| type | 页签的基本样式，可选值为 `line` 和 `card` | line |
| size | 尺寸，可选值为 `default` 和 `small`，仅在 `type="line"` 时有效 | default |
| closable | 是否可以关闭页签，仅在 `type="card"` 时有效 | false |
| animated | 是否使用动画切换 Tabs | true |
### Tabs-pane
| 属性 | 说明 | 默认值 |
| -------- | ------------------------------------------------------- | ------ |
| index | 用于标识当前面板，对应 defaultActiveKey，默认为其索引值 | index |
| tab | 选项卡头显示文字 | 空 |
| icon | 选项卡图标 | - |
| disabled | 是否禁用该选项卡 | false |
| closable | 是否可以关闭页签，仅在 `type="card"` 时有效 | - |
### Config 方法
配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的 API。（并不是每个组件都会有）
| 参数 | 说明 | 类型 |
| ---- | ----------------------------------------------- | ------ |
| el | 配置当前选定的 tabs，必须是选择器名称或者元素名 | String |
该方法返回以下两个值：
- `activeIndex`
- `events(options)`
| 返回值 | 说明 | 类型 | 默认值 |
| --------- | ----------------------------- | -------- | ------ |
| activeIndex | 响应式设置当前激活面板的 index | String | - |
| events | 非响应式API，添加选项卡事件， | Function | - |
- `events`的参数 options 为对象，具体说明如下：
| 属性 | 说明 | 回调参数 |
| :---------- | :--------------- | :------------------- |
| onClick | tab 被点击时触发 | (index: string) => void |
| onTabRemove | tab 被关闭时触发 | (index: string) => void |
================================================
FILE: docs/tag.md
================================================
# Tag 标签
进行标记和分类的小标签。
> 注意：使用前需要先全局实例化一次该构造函数 `new Rabbit.Tag()`
## 何时使用
- 用于标记事物的属性和维度。
- 进行分类。
## 代码示例
基本用法
- 简单的展示，添加属性`closable="true"`可以关闭标签。
- 点击关闭标签时，可以使用 `onClose` 方法添加回调事件
```html
标签一
标签二
标签三
```
样式类型
- 通过设置 `type` 属性为 `border` 或 `dot` 来选择不同的样式类型。建议有关闭的某些场景下使用 border，图例的场景下使用 dot。
```html
标签三
标签四
标签一
标签二
```
各种颜色
- 多种预设颜色，可自定义颜色。
```html
default
primary
success
error
warning
magenta
red
volcano
orange
gold
yellow
lime
green
cyan
blue
geekblue
purple
Custom Color
标签一
标签二
标签三
标签四
标签一
标签二
标签三
标签四
```
可选择
- 设置属性 `checkable="true"`，可以对标签进行选择，属性 `checked` 控制当前选择状态。
```html
标签一
标签二
标签三
标签四
```
尺寸
- 设置属性 `size` 可以显示不同尺寸的标签。
```html
默认标签
中号标签
大号标签
```
Attributes
### Tag
| 属性 | 说明 | 默认值 |
| :-------- | :----------------------------------------------------------- | :------ |
| closable | 标签是否可以关闭 | false |
| checkable | 标签是否可以选择 | false |
| checked | 标签的选中状态 | true |
| type | 标签的样式类型，可选值为 `border`、`dot`或不填 | - |
| color | 标签颜色，预设颜色值为`default`、`primary`、`success`、`warning`、`error`、`blue`、`green`、`red`、`yellow`、`pink`、`magenta`、`volcano`、`orange`、`gold`、`lime`、`cyan`、`geekblue`、`purple`，也可以自定义颜色值。 | default |
| size | 尺寸，可选值为 large、medium | - |
### Config 方法
配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的 API。（并不是每个组件都会有）
| 参数 | 说明 | 类型 |
| ---- | ---------------------------------------------- | ------ |
| el | 配置当前选定的 tag，必须是选择器名称或者元素名 | String |
该方法返回以下值：
- `events(options)`
| 返回值 | 说明 | 类型 | 默认值 |
| ------ | --------------------------- | -------- | ------ |
| events | 非响应式API，添加标签事件， | Function | - |
- `events`的参数 options 为对象，具体说明如下：
| 属性 | 说明 | 回调参数 |
| :------- | :----------------- | :------------------------- |
| onClose | 关闭时触发 | ($this: element) => void |
| onChange | 切换选中状态时触发 | (checked: boolean) => void |
================================================
FILE: docs/time.md
================================================
# Time 相对时间
> 注意：使用前需要先全局实例化一次该构造函数 `new Rabbit.Time()`
常用于表示几分钟前、几小时前等相对于此时此刻的时间描述。
## 代码示例
基础用法
- 为属性 `time` 设置一个时间戳或 Date，可自动转为相对于当前的时间。
```html
Attributes
### Time
| 属性 | 说明 | 默认值 |
| -------- | -------------------------------------------- | -------- |
| time | 需要对比的时间，可以是时间戳或 Date 类型 | - |
| type | 类型，可选值为 relative、date 或 datetime | relative |
| interval | 自动更新的间隔，单位：秒 | 60 |
| hash | 填写该值，点击会定位锚点 | - |
## 改变语言配置 (全局)
在 `NodeJs` 或者 `Webpack` 环境下，要改变全局语言配置，只需调用实例的内置函数 `locale`，并引入 Day.js 的语言文件来自由切换其他语言。
```js
import 'dayjs/locale/de'; // ES 2015
// require('dayjs/locale/de'); // CommonJs
const time = new Rabbit.Time();
time.locale('de');
```
[支持的语言列表](https://github.com/iamkun/dayjs/tree/dev/src/locale)
================================================
FILE: docs/timeline.md
================================================
# Timeline 时间轴
可视化地呈现时间流信息。
> 注意：使用前需要先全局实例化一次该构造函数 `new Rabbit.Timeline()`
## 何时使用
- 当有一系列信息需按时间排列时，可正序和倒序。
- 需要有一条时间轴进行视觉上的串联时。
## 代码示例
- 基础用法
最简单定义一个时间轴的用法。
```html
1976s
第一代苹果问世
1984s
发布麦金塔电脑
2007s
发布 iPhone
2010s
发布 iPad
2011.10.05
史蒂夫·乔布斯去世
```
- 圆圈颜色
圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，灰色表示当前任务状态停滞或取消，蓝色可表示正在进行或其他默认状态。
```html
发布1.0版本
发布2.0版本
重大Bug
推迟发布
发布3.0版本
```
- 最后一个
通过添加属性`pending="true"`来标记最后一个为幽灵节点，标识还未完成。
```html
2021-04-01 创建服务器网站
2021-04-01 解决了初始化网络问题
2021-04-01 技术人员进行测试
查看更多
```
- 自定义时间轴点
可根据实际场景⾃定义节点
```html
发布里程碑版本
发布1.0版本
发布2.0版本
发布3.0版本
```
Attributes
### Timeline
| 属性 | 说明 | 默认值 |
| ---------- | ------------------------------ | ------ |
| pending | 指定是否最后一个节点为幽灵节点 | - |
### Timeline-item
| 属性 | 说明 | 默认值 |
| -------- | ------------------------------------------------------------ | ------ |
| color | 圆圈颜色，可选值为`blue`、`red`、`green`、`gray`，或自定义色值 | blue |
| dot | 自定义时间轴点 | - |
================================================
FILE: docs/tooltip.md
================================================
# Tooltip 文字提示
简单的文字提示气泡框。
> 注意：使用前需要先全局实例化一次该构造函数 `new Rabbit.Tooltip()`
## 何时使用
- 鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
- 可用来代替系统默认的 ‘title’ 提示，提供一个’按钮/文字/操作’的文案解释。
## 代码示例
基础用法
- 最简单的用法。
```html
鼠标经过这段文字时，会显示一个气泡框
```
位置
- 组件提供了12个不同的方向显示Tooltip，具体配置可查看API。
```html
上左
上边
上右
下左
下边
下右
```
自定义内容
- 如果需要添加带有HTML代码或其他复杂的内容，抑或是需要动态更新内容，请使用组件提供的响应式API渲染
```html
多行
```
禁用
- 通过设置属性`disabled`可以禁用文字提示。
```html
禁用提示
```
延时
- 通过设置属性`delay`可以延时显示文字提示，单位毫秒。
```html
延时1秒显示
```
主题
- 设置属性 `theme` 可以显示不同的颜色。
- 有多种预设色彩的文字提示样式，用作不同场景使用。
```html
Dark(default)
Light
pink
red
yellow
orange
cyan
green
blue
purple
geekblue
magenta
volcano
gold
lime
```
自动换行
- 设置属性 `max-width`，当超出最大值后，文本将自动换行，并两端对齐。
```html
长文本
```
Attributes
### Tooltip
| 属性 | 说明 | 默认值 |
| :------------ | :----------------------------------------------------------- | :----- |
| content | 显示的内容 | 空 |
| placement | 提示框出现的位置，可选值为`top``top-start``top-end``bottom``bottom-start``bottom-end``left``left-start``left-end``right``right-start``right-end`，自动识别 | top |
| disabled | 是否禁用提示框 | false |
| delay | 延迟显示，单位毫秒 | - |
| always | 是否总是可见 | false |
| theme `1.1.0` | 背景颜色 | dark |
| max-width | 最大宽度，超出最大值后，文本将自动换行，并两端对齐 | - |
| offset | 出现位置的偏移量 | 0 |
### Config 方法
配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的 API。（并不是每个组件都会有）
| 参数 | 说明 | 类型 |
| ---- | ------------------------------------------------ | ------ |
| el | 配置当前选定的 tooltip，必须是选择器名称或者元素名 | String |
该方法返回以下四个值：
- `content`
- `disabled`
- `always`
- `events(options)`
| 返回值 | 说明 | 类型 | 默认值 |
| ---------------- | ----------------------------- | ---------------- | ------ |
| content | 响应式设置或更新提示框的内容 | String \| Number | - |
| disabled `1.1.0` | 响应式设置是否禁用提示框 | Boolean | false |
| always `1.1.0` | 响应式设置是否总是可见 | Boolean | false |
| events | 非响应式API，添加提示框的事件 | Function | - |
- `events`的参数 options 为对象，具体说明如下：
| 属性 | 说明 | 回调参数 |
| :---------------------- | :------------- | :------------------------- |
| onVisibleChange `1.1.0` | 显示隐藏的回调 | (visible: boolean) => void |
================================================
FILE: examples/README.md
================================================
# 运行测试
1. 修改config文件夹下的webpack.dev.js里的代码， `plugins` -> `new HtmlWebpackPlugin` -> `template`,
修改其路径
2. 把要测试的组件在main.ts 里将对应的 `xxxTest()` 取消注释
3. 运行`npm run dev`
================================================
FILE: examples/affix/index.html
================================================
Document
固定在最顶部
固定在顶部 50px 的位置
固定在底部 20px 的位置
固定在顶部 100px 的位置
================================================
FILE: examples/affix/index.ts
================================================
import Rabbit from '../../src';
export default function affixTest(): void {
const affix = new Rabbit.Affix();
affix.config('#test').events({
onChange: (affixed) => {
Rabbit.Message.info(`当前状态：${affixed}`);
}
});
}
================================================
FILE: examples/alert/index.html
================================================
Document
信息提示的内容,信息提示的内容，信息提示的,信息提示的内容,信息提示的内容。
成功提示的内容,成功提示的内容，成功提示的,成功提示的内容,成功提示的内容。
警告提示的内容,警告提示的内容，警告提示的,警告提示的内容,警告提示的内容。
错误提示的内容,错误提示的内容，错误提示的,错误提示的内容,错误提示的内容。
信息提示的内容,信息提示的内容，信息提示的,信息提示的内容,信息提示的内容。
成功提示的内容,成功提示的内容，成功提示的,成功提示的内容,成功提示的内容。
警告提示的内容,警告提示的内容，警告提示的,警告提示的内容,警告提示的内容。
错误提示的内容,错误提示的内容，错误提示的,错误提示的内容,错误提示的内容。
自定义图标的内容，自定义图标的内容，自定义图标的内容。
成功提示的内容,成功提示的内容，成功提示的,成功提示的内容,成功提示的内容。
================================================
FILE: examples/alert/index.ts
================================================
import Rabbit from '../../src';
export default function alertTest(): void {
const Alert = new Rabbit.Alert();
Alert.config('#test').events({
onClose: (event) => {
console.log(event);
}
});
}
================================================
FILE: examples/avatar/index.html
================================================
Document
U
USER
U
U
Lucy
Tom
Edward
================================================
FILE: examples/avatar/index.ts
================================================
import Rabbit from '../../src';
export default function avatarTest(): void {
new Rabbit.Avatar();
}
================================================
FILE: examples/back-top/index.html
================================================
Document
返回顶端
================================================
FILE: examples/back-top/index.ts
================================================
import Rabbit from '../../src';
export default function backtopTest(): void {
new Rabbit.BackTop();
}
================================================
FILE: examples/badge/index.html
================================================
Document
预设：
自定义：
================================================
FILE: examples/badge/index.ts
================================================
import Rabbit from '../../src';
export default function badgeTest(): void {
new Rabbit.Badge();
}
================================================
FILE: examples/breadcrumb/index.html
================================================
Document
================================================
FILE: examples/breadcrumb/index.ts
================================================
import Rabbit from '../../src';
export default function breadcrumbTest(): void {
new Rabbit.Breadcrumb();
}
================================================
FILE: examples/button/index.html
================================================
Document
默认按钮
主要按钮
虚线按钮
文本按钮
信息按钮
成功按钮
警告按钮
危险按钮
默认按钮
主要按钮
虚线按钮
文本按钮
信息按钮
成功按钮
警告按钮
危险按钮
搜索
搜索
圆角按钮
搜索
搜索
圆角按钮
主要按钮
默认按钮
虚线按钮
文本按钮
主要按钮
默认按钮
虚线按钮
文本按钮
主要按钮
默认按钮
虚线按钮
文本按钮
Download
Download
Download
上一页
下一页
上一页
下一页
上一页
下一页
提交按钮
删除按钮
默认按钮
默认按钮(禁用)
主要按钮
主要按钮(禁用)
虚线按钮
虚线按钮(禁用)
文本按钮
文本按钮(禁用)
Loading...
Click me!
基本
Cancel
Confirm
Yesterday
Today
Tomorrow
L
M
M
R
图标
Backward
Forward
圆角
Backward
Forward
尺寸
Large
Large
Default
Default
Small
Small
Large
Large
Default
Default
Small
Small
================================================
FILE: examples/button/index.ts
================================================
// @ts-nocheck
import Rabbit from '../../src';
export default function buttonTest(): void {
const btn = new Rabbit.Button();
window.handleLoad = () => {
btn.config('#clickMe').loading = true;
setTimeout(() => {
btn.config('#clickMe').loading = false;
}, 3000);
};
}
================================================
FILE: examples/card/index.html
================================================
Document
这是没有边框类型的卡片这是没有边框类型的卡片这是没有边框类型的卡片这是没有边框类型的卡片
一个基于TS编写的UI插件库
================================================
FILE: examples/card/index.ts
================================================
import Rabbit from '../../src';
export default function cardTest(): void {
const card = new Rabbit.Card();
}
================================================
FILE: examples/carousel/index.html
================================================
Document
================================================
FILE: examples/carousel/index.ts
================================================
import Rabbit from '../../src';
export default function carouselTest(): void {
const carousel = new Rabbit.Carousel();
carousel.config('#test').events({
onChange: ([oldValue, value]) => {
console.log(`原幻灯片索引: ${oldValue}`, `目前激活索引: ${value}`);
},
onClick: (index) => {
console.log(index);
}
});
}
================================================
FILE: examples/checkbox/index.html
================================================
Document
Checkbox
Twitter
Facebook
Github
Snapchat
苹果
西瓜
猕猴桃
Checkbox
苹果
西瓜
猕猴桃
苹果
西瓜
猕猴桃
================================================
FILE: examples/checkbox/index.ts
================================================
import Rabbit from '../../src';
export default function checkboxTest(): void {
const checkbox = new Rabbit.Checkbox();
const checkAll = checkbox.config('#checkAll');
const checkAllGroup = checkbox.config('#checkAllGroup');
checkAll.events({
onChange: (checked: boolean) => {
if (checkAll.indeterminate) {
checkAllGroup.value = [];
checkAll.checked = false;
checkAll.indeterminate = false;
} else if (checked) {
checkAllGroup.value = ['苹果', '西瓜', '猕猴桃'];
} else {
checkAllGroup.value = [];
checkAll.indeterminate = false;
}
}
});
checkAllGroup.events({
onChange: (data: string[]) => {
if (data.length === 0) {
checkAll.checked = false;
checkAll.indeterminate = false;
} else if (data.length === 3) {
checkAll.checked = true;
checkAll.indeterminate = false;
} else if (data.length && data.length < 3) {
checkAll.indeterminate = true;
}
}
});
}
================================================
FILE: examples/circle/index.html
================================================
Document
80%
42,001,776
消费人群规模
总占人数
75%
80%
================================================
FILE: examples/circle/index.ts
================================================
import Rabbit from '../../src';
export default function circleTest(): void {
const circle = new Rabbit.Circle();
const test = circle.config('#test');
const percentText = document.querySelector('#percentText')!;
let percent = 0;
// @ts-ignore
window.add = () => {
if (percent >= 100) {
return false;
}
percent += 10;
percent == 100 ? (test.strokeColor = '#5cb85c') : '';
test.percent = percent;
percentText.textContent = `${percent}%`;
};
// @ts-ignore
window.minus = () => {
if (percent <= 0) {
return false;
}
percent -= 10;
test.percent = percent;
test.strokeColor = '#1890ff';
percentText.textContent = `${percent}%`;
};
}
================================================
FILE: examples/collapse/index.html
================================================
Document
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world.
================================================
FILE: examples/collapse/index.ts
================================================
import Rabbit from '../../src';
export default function collapseTest(): void {
const collapse = new Rabbit.Collapse();
collapse.config('#demoCollapse').events({
onChange: (index) => {
console.log(index);
}
});
}
================================================
FILE: examples/count-down/index.html
================================================
Document
================================================
FILE: examples/count-down/index.ts
================================================
import Rabbit from '../../src';
export default function countDownTest(): void {
const countDown = new Rabbit.CountDown();
const date = new Date();
const YYMMDD = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
const h = date.getHours();
const mm = date.getMinutes();
// 'YY/MM/DD hh:mm:ss'
countDown.config('#test1').endTime = `${YYMMDD} ${h + 1}:00:00`;
countDown.config('#test2').endTime = `${YYMMDD} ${h}:${mm + 1}:00`;
countDown.config('#test2').events({
onStop: (stop) => {
if (stop) alert('倒计时结束!');
}
});
}
================================================
FILE: examples/divider/index.html
================================================
Document
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
标题居中
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
左侧标题
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
右侧标题
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
标题居中
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
右侧标题
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
右侧标题
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
================================================
FILE: examples/divider/index.ts
================================================
import Rabbit from '../../src';
export default function dividerTest(): void {
const divider = new Rabbit.Divider();
}
================================================
FILE: examples/drawer/index.html
================================================
Document
Open
Top
Left
Bottom
Right
Open Inner
Some contents...
多层抽屉
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
打开第二层抽屉
这是第二层抽屉。
================================================
FILE: examples/drawer/index.ts
================================================
import Rabbit from '../../src';
export default function drawerTest(): void {
const drawer = new Rabbit.Drawer();
let f1 = false;
// @ts-ignore
window.Op1 = () => {
f1 === false ? (f1 = !f1) : f1;
drawer.config('#test1').visable = f1;
};
drawer.config('#test1').events({
onClose: () => {
console.log('关闭抽屉');
}
});
let top = false;
// @ts-ignore
window.handleTop = () => {
top === false ? (top = !top) : top;
drawer.config('#test2').visable = top;
};
let left = false;
// @ts-ignore
window.handleLeft = () => {
left === false ? (left = !left) : left;
drawer.config('#test3').visable = left;
};
let bottom = false;
// @ts-ignore
window.handleBottom = () => {
bottom === false ? (bottom = !bottom) : bottom;
drawer.config('#test4').visable = bottom;
};
let right = false;
// @ts-ignore
window.handleRight = () => {
right === false ? (right = !right) : right;
drawer.config('#test5').visable = right;
};
let inner = false;
// @ts-ignore
window.handleOpenInner = () => {
inner === false ? (inner = !inner) : inner;
drawer.config('#test6').visable = inner;
};
let first = false;
// @ts-ignore
window.multilayerDrawer = () => {
first === false ? (first = !first) : first;
drawer.config('#test7').visable = first;
};
let second = false;
// @ts-ignore
window.secondDrawer = () => {
second === false ? (second = !second) : second;
drawer.config('#test8').visable = second;
};
}
================================================
FILE: examples/dropdown/index.html
================================================
Document
下拉菜单
老干妈
炸酱面
葱油饼
黄金糕
冰糖葫芦
下拉菜单
老干妈
炸酱面
葱油饼
黄金糕
冰糖葫芦
菜单(左)
老干妈
炸酱面
葱油饼
黄金糕
冰糖葫芦
菜单(居中)
老干妈
炸酱面
葱油饼
黄金糕
冰糖葫芦
菜单(右)
老干妈
炸酱面
葱油饼
黄金糕
冰糖葫芦
北京小吃
豆汁儿
炸酱面
驴打滚
北京烤鸭
壁炉烤鸭
焖炉烤鸭
冰糖葫芦
================================================
FILE: examples/dropdown/index.ts
================================================
import Rabbit from '../../src';
export default function dropdownTest(): void {
const dropdown = new Rabbit.Dropdown();
dropdown.config('#test').events({
onClick: (key) => {
console.log(key);
},
onVisibleChange: (visible) => {
console.log(visible);
}
});
// @ts-ignore
window.handleOpen = () => (dropdown.config('#testCustom').visible = true);
// @ts-ignore
window.handleClose = () => (dropdown.config('#testCustom').visible = false);
}
================================================
FILE: examples/empty/index.html
================================================
Document
立即创建
================================================
FILE: examples/empty/index.ts
================================================
import Rabbit from '../../src';
export default function emptyTest(): void {
const empty = new Rabbit.Empty();
}
================================================
FILE: examples/input-number/index.html
================================================
Document
禁用状态
================================================
FILE: examples/input-number/index.ts
================================================
import Rabbit from '../../src';
export default function inputNumberTest(): void {
const inputNumber = new Rabbit.InputNumber();
inputNumber.config('#test1').events({
onChange: (value) => {
console.log('changed!', value);
}
});
let flag = true;
// @ts-ignore
window.handleClick = () => {
flag ? (flag = !flag) : (flag = true);
inputNumber.config('#test2').disabled = flag;
};
}
================================================
FILE: examples/jumbotron/index.html
================================================
Document
它使用实用程序类来排版和空格，以便在较大的容器中分隔内容。
了解更多
================================================
FILE: examples/jumbotron/index.ts
================================================
import Rabbit from '../../src';
export default function jumbotronTest(): void {
const jumbotron = new Rabbit.Jumbotron();
}
================================================
FILE: examples/loading-bar/index.html
================================================
Document
Start
Finish
Error
================================================
FILE: examples/loading-bar/index.ts
================================================
/* eslint-disable @typescript-eslint/ban-ts-comment */
import Rabbit from '../../src';
export default function loadingBarTest(): void {
// Rabbit.Loading.config({
// height: 5,
// color: '#5cb85c',
// failedColor: '#f0ad4e',
// duration: 1000,
// });
// @ts-ignore
window.Start = () => {
Rabbit.Loading.start();
};
// @ts-ignore
window.Finish = () => {
Rabbit.Loading.finish();
};
// @ts-ignore
window._Error = () => {
Rabbit.Loading.error();
};
}
================================================
FILE: examples/main.ts
================================================
import affixTest from './affix';
import alertTest from './alert';
import avatarTest from './avatar';
import backtopTest from './back-top';
import badgeTest from './badge';
import breadcrumbTest from './breadcrumb';
import buttonTest from './button';
import cardTest from './card';
import carouselTest from './carousel';
import checkboxTest from './checkbox';
import circleTest from './circle';
import collapseTest from './collapse';
import countDownTest from './count-down';
import dividerTest from './divider';
import drawerTest from './drawer';
import dropdownTest from './dropdown';
import emptyTest from './empty';
import inputNumberTest from './input-number';
import jumbotronTest from './jumbotron';
import loadingBarTest from './loading-bar';
import messageTest from './message';
import poptipTest from './poptip';
import modalTest from './modal';
import miniModalTest from './mini-modal';
import noticeTest from './notice';
import pageHeaderTest from './page-header';
import progressTest from './progress';
import radioTest from './radio';
import resultTest from './result';
import skeletonTest from './skeleton';
import spinTest from './spin';
import stepsTest from './steps';
import switchTest from './switch';
import tabsTest from './tabs';
import tagTest from './tag';
import timeTest from './time';
import timelineTest from './timeline';
import tooltipTest from './tooltip';
import '../src/styles/index.less';
// affixTest();
// alertTest();
// avatarTest();
// backtopTest();
// badgeTest();
// breadcrumbTest();
// buttonTest();
// cardTest();
// carouselTest();
// checkboxTest();
// circleTest();
// collapseTest();
// countDownTest();
// dividerTest();
// drawerTest();
// dropdownTest();
// emptyTest();
// inputNumberTest();
// jumbotronTest();
// loadingBarTest();
messageTest();
// modalTest();
// miniModalTest();
// noticeTest();
// pageHeaderTest();
// poptipTest();
// progressTest();
// radioTest();
// resultTest();
// skeletonTest();
// stepsTest();
// spinTest();
// switchTest();
// tabsTest();
// tagTest();
// timeTest();
// timelineTest();
// tooltipTest();
================================================
FILE: examples/message/index.html
================================================
Document
显示消息提示
显示成功提示
显示警告提示
显示错误提示
带背景色
显示消息提示
显示成功提示
显示警告提示
显示错误提示
显示加载中...
Promise 接口
显示10秒的提示
显示可关闭的提示
使用 HTML 片段
================================================
FILE: examples/message/index.ts
================================================
// @ts-nocheck
import Rabbit from '../../src';
export default function messaest(): void {
// 全局配置
// Rabbit.Message.config({
// duration: 8,
// top: 254
// });
window.info = () => {
Rabbit.Message.info('这是一条普通的提示');
};
window.success = () => {
Rabbit.Message.success('这是一条成功的提示');
};
window.warning = () => {
Rabbit.Message.warning('这是一条警告的提示');
};
window.error = () => {
Rabbit.Message.error('这是一条错误的提示');
};
window.background = (type: string) => {
Rabbit.Message[type]({
content: '这是一条带背景色的通知',
background: true,
duration: 5
});
};
window.loading = () => {
Rabbit.Message.loading({
content: '正在加载中...',
duration: 0,
key: 'msgkey'
});
setTimeout(() => Rabbit.Message.destroy('msgkey'), 5000);
};
window.promise = () => {
Rabbit.Message.loading('正在加载中...').then(() => {
Rabbit.Message.success('加载成功!').then(() => {
Rabbit.Message.info('加载成功后的提示');
});
});
};
window.time = () => {
Rabbit.Message.success({
content: '这是成功的提示信息，我将在10秒内消失',
duration: 10
});
};
window.closable = () => {
Rabbit.Message.info({
content: '可手动关闭的提示',
duration: 8,
closable: true
});
};
window.useHTML = () => {
Rabbit.Message.info({
content: '这是 HTML 片段 ',
dangerouslyUseHTMLString: true
});
};
}
================================================
FILE: examples/mini-modal/index.html
================================================
Document
消息
成功
警告
错误
标准
自定义按钮文字
异步关闭
================================================
FILE: examples/mini-modal/index.ts
================================================
import Rabbit from '../../src';
export default function miniModalTest(): void {
const title = '对话框标题';
const content = '这是一段对话框的内容';
// @ts-ignore
window.instance = (type: string) => {
switch (type) {
case 'info':
Rabbit.MiniModal.info({
title,
content
});
break;
case 'success':
Rabbit.MiniModal.success({
title,
content
});
break;
case 'warning':
Rabbit.MiniModal.warning({
title,
content
});
break;
case 'error':
Rabbit.MiniModal.error({
title,
content
});
break;
}
};
// @ts-ignore
window.confirm = () => {
Rabbit.MiniModal.confirm({
title: '确认对话框标题',
content: '这是一段自定义的内容...
这是一段自定义的内容...
',
dangerouslyUseHTMLString: true,
onOk: () => {
Rabbit.Message.info('点击了确定');
},
onCancel: () => {
Rabbit.Message.info('点击了取消');
}
});
};
// @ts-ignore
window.custom = () => {
Rabbit.MiniModal.confirm({
title: '确认对话框标题',
content: '这是一段自定义的内容...
这是一段自定义的内容...
',
okText: 'OK',
cancelText: 'Cancel',
dangerouslyUseHTMLString: true
});
};
// @ts-ignore
window.async = () => {
Rabbit.MiniModal.confirm({
title: '确认对话框标题',
content: '对话框将在 2秒 后关闭
',
loading: true,
dangerouslyUseHTMLString: true,
onOk: () => {
setTimeout(() => {
Rabbit.MiniModal.remove();
Rabbit.Message.info('异步关闭了对话框');
}, 2000);
}
});
};
}
================================================
FILE: examples/modal/index.html
================================================
Document
显示对话框
不带标题栏
国际化
设置宽度
异步关闭
禁用右上角关闭(含Esc键)
禁用遮罩层关闭
垂直居中
距离顶部20px
显示全屏对话框
Some Content...
Some Content...
Some Content...
自定义宽度，单位 px，默认 520px。
对话框的宽度是响应式的，当屏幕尺寸小于 768px 时，宽度会变为自动
auto。
点击确定后，对话框将在 2秒 后关闭。
这是一个全屏的对话框
================================================
FILE: examples/modal/index.ts
================================================
import Rabbit from '../../src';
export default function modalTest(): void {
const modal = new Rabbit.Modal();
let timer: any;
// @ts-ignore
window.handleModal1 = () => {
modal.config('#m1').visible = true;
modal.config('#m1').events({
onOk: () => {
Rabbit.Message.info('点击了确定');
},
onCancel: () => {
Rabbit.Message.info('点击了取消');
}
});
};
// @ts-ignore
window.handleModal2 = () => {
modal.config('#m2').visible = true;
};
// @ts-ignore
window.handleModal3 = () => {
modal.config('#m3').visible = true;
};
// @ts-ignore
window.handleModal4 = () => {
modal.config('#m4').visible = true;
};
// @ts-ignore
window.handleModal5 = () => {
modal.config('#m5').visible = true;
modal.config('#m5').events({
onOk: () => {
timer = setTimeout(() => {
modal.config('#m5').visible = false;
}, 2000);
},
onCancel: () => {
clearTimeout(timer);
}
});
};
// @ts-ignore
window.handleModal6 = () => {
modal.config('#m6').visible = true;
};
// @ts-ignore
window.handleModal7 = () => {
modal.config('#m7').visible = true;
};
// @ts-ignore
window.handleModal8 = () => {
modal.config('#m8').visible = true;
};
// @ts-ignore
window.handleModal9 = () => {
modal.config('#m9').visible = true;
};
// @ts-ignore
window.handleModal10 = () => {
modal.config('#m10').visible = true;
};
}
================================================
FILE: examples/notice/index.html
================================================
Document
打开提醒
打开提醒 (仅标题)
带描述信息
消息
成功
警告
错误
仅标题
消息
成功
警告
错误
显示顺序通知
自定义时长
自定义样式
使用HTML片段
================================================
FILE: examples/notice/index.ts
================================================
//@ts-nocheck
import Rabbit from '../../src';
export default function noticeTest(): void {
// Rabbit.Notice.config({
// top: 50,
// duration: 3
// });
window.normal = () => {
Rabbit.Notice.open({
title: '这是通知标题',
desc:
'这里是通知的描述,这里是通知的描述这里,是通知的描述,这里是通知的描述,这里是通知的描述,这里是通知的描述',
onClick: () => {
console.log('Notification Clicked!');
},
onClose: () => {
console.log('Notification Close!');
}
});
};
window.onlyTitle = () => {
Rabbit.Notice.open({
title: '这是通知标题',
closable: false
});
};
window.getInfo = () => {
Rabbit.Notice.info({
title: '这是通知标题',
desc:
'这里是通知的描述,这里是通知的描述这里,是通知的描述,这里是通知的描述,这里是通知的描述,这里是通知的描述'
});
};
window.getSuccess = () => {
Rabbit.Notice.success({
title: '这是通知标题',
desc:
'这里是通知的描述,这里是通知的描述这里,是通知的描述,这里是通知的描述,这里是通知的描述,这里是通知的描述'
});
};
window.getWarning = () => {
Rabbit.Notice.warning({
title: '这是通知标题',
desc:
'这里是通知的描述,这里是通知的描述这里,是通知的描述,这里是通知的描述,这里是通知的描述,这里是通知的描述'
});
};
window.getError = () => {
Rabbit.Notice.error({
title: '这是通知标题',
desc:
'这里是通知的描述,这里是通知的描述这里,是通知的描述,这里是通知的描述,这里是通知的描述,这里是通知的描述'
});
};
window.getInfoNodesc = () => {
Rabbit.Notice.info({
title: '这是通知标题'
});
};
window.getSuccessNodesc = () => {
Rabbit.Notice.success({
title: '这是通知标题'
});
};
window.getWarningNodesc = () => {
Rabbit.Notice.warning({
title: '这是通知标题'
});
};
window.getErrorNodesc = () => {
Rabbit.Notice.error({
title: '这是通知标题'
});
};
window.multipleNotice = () => {
Rabbit.Notice.open({
title: '行程已发布',
desc: '您的行程订单已发布，正在等待待车主接单...'
}).then(() => {
Rabbit.Notice.info({
title: '已有车主接单啦！',
desc: '你发布的行程订单已有车主接单了，请提前付款以免被取消订单！'
}).then(() => {
Rabbit.Notice.success({
title: '费用支付成功',
desc: '您的行程将在2021.9.9 12:30 开始'
});
});
});
};
window.customTime = () => {
Rabbit.Notice.open({
title: '这是通知标题',
desc: '这条通知不会自动关闭，需要点击关闭按钮才可以关闭。',
duration: 0
});
};
window.customStyle = () => {
Rabbit.Notice.open({
title: '这是通知标题',
desc:
'这里是通知的描述,这里是通知的描述这里,是通知的描述,这里是通知的描述,这里是通知的描述,这里是通知的描述',
style: 'width: 600px; background: #ccc;'
});
};
window.useHTML = () => {
Rabbit.Notice.open({
title: 'HTML片段',
// eslint-disable-next-line quotes
desc: `这是 HTML 片段 `,
dangerouslyUseHTMLString: true
});
};
}
================================================
FILE: examples/page-header/index.html
================================================
Document
================================================
FILE: examples/page-header/index.ts
================================================
import Rabbit from '../../src';
export default function pageHeaderTest(): void {
const pageHeader = new Rabbit.PageHeader();
pageHeader.config('#a').events({
onBack: () => {
console.log('点击返回');
}
});
}
================================================
FILE: examples/poptip/index.html
================================================
Document
hover 激活
click 激活
focus 激活
禁用提示
复杂内容
长文本
删除
国际化
================================================
FILE: examples/poptip/index.ts
================================================
import Rabbit from '../../src';
export default function poptipTest(): void {
const poptip = new Rabbit.Poptip();
poptip.config('#test1').events({
onPopperShow: () => {
console.log('poptip show');
},
onPopperHide: () => {
console.log('poptip hide');
}
});
// @ts-ignore
window.handleChange = (value: string) => {
poptip.config('#testInput').content = value;
};
// @ts-ignore
window.handleClose = () => {
poptip.config('#test2').visible = false;
};
const table = `
日期
姓名
地址
2021-01-17
山本先生
日本福冈县福冈市中央区樱坂
2021-01-17
山本先生
日本福冈县福冈市中央区樱坂
2021-01-17
山本先生
日本福冈县福冈市中央区樱坂
`;
poptip.config('#test3').content = table;
poptip.config('#test4').events({
onOk: () => {
Rabbit.Message.info('点击了确定');
},
onCancel: () => {
Rabbit.Message.info('点击了取消');
}
});
}
================================================
FILE: examples/progress/index.html
================================================
Document
================================================
FILE: examples/progress/index.ts
================================================
import Rabbit from '../../src';
export default function progressTest(): void {
const progress = new Rabbit.Progress();
// progress.config('#a').percent = 80;
// progress.config('#a').successPercent = 60;
}
================================================
FILE: examples/radio/index.html
================================================
Document
Radio
Apple
Android
Windows
金斑蝶
爪哇犀牛
印度黑羚
Radio
金斑蝶
爪哇犀牛
印度黑羚
Apple
Android
Windows
北京
上海
深圳
杭州
北京
上海
深圳
杭州
北京
上海
深圳
杭州
北京
上海
深圳
杭州
北京
上海
深圳
杭州
金斑蝶
爪哇犀牛
印度黑羚
北京
上海
深圳
杭州
北京
上海
深圳
杭州
北京
上海
深圳
杭州
================================================
FILE: examples/radio/index.ts
================================================
import Rabbit from '../../src';
export default function radioTest(): void {
const radio = new Rabbit.Radio();
// radio.config('#a').events({
// onChange: (item) => {
// console.log(item);
// }
// });
// radio.config('#a').value = 'android';
// setTimeout(() => {
// radio.config('#a').checked = false;
// }, 1500);
}
================================================
FILE: examples/result/index.html
================================================
Document
================================================
FILE: examples/result/index.ts
================================================
import Rabbit from '../../src';
export default function resultTest(): void {
const res = new Rabbit.Result();
}
================================================
FILE: examples/skeleton/index.html
================================================
Document
Vue.js, the progressive javascript framework
An incrementally adoptable ecosystem that scales between a library and a full-featured framework. Blazing Fast Virtual DOM Minimal Optimization Efforts
显示骨架图
================================================
FILE: examples/skeleton/index.ts
================================================
import Rabbit from '../../src';
export default function skeletonTest(): void {
const skeleton = new Rabbit.Skeleton();
}
================================================
FILE: examples/spin/index.html
================================================
Document
登金陵凤凰台
李白
凤凰台上凤凰游，凤去台空江自流。
吴宫花草埋幽径，晋代衣冠成古丘。
三山半落青天外，二水中分白鹭洲。
总为浮云能蔽日，长安不见使人愁。
切换显示状态：
整页显示，3秒后关闭
自定义显示内容
================================================
FILE: examples/spin/index.ts
================================================
import Rabbit from '../../src';
export default function spinTest(): void {
const spin = new Rabbit.Spin();
const Switch = new Rabbit.Switch();
Switch.config('r-switch').events({
onChange: (checked) => {
// @ts-ignore
document.querySelector('#abcd').style.display = checked ? 'none' : '';
}
});
// @ts-ignore
window.handle1 = () => {
spin.show();
setTimeout(() => {
spin.hide();
}, 3000);
};
// @ts-ignore
window.handle2 = () => {
spin.show({
content: `Loading...
`
});
setTimeout(() => {
spin.hide();
}, 3000);
};
}
================================================
FILE: examples/steps/index.html
================================================
Document
================================================
FILE: examples/steps/index.ts
================================================
import Rabbit from '../../src';
export default function stepsTest(): void {
const steps = new Rabbit.Steps();
const targetStep = steps.config('#test');
const showStep = document.querySelector('#step')!;
let count = 0;
showStep.textContent = `${count + 1}`;
// targetStep.itemStatus = ['error', 'error', 'finish', 'process'];
// @ts-ignore
window.handlClickNext = () => {
if (count == 3) {
count = 0;
} else {
count += 1;
}
targetStep.current = count;
showStep.textContent = `${count + 1}`;
};
}
================================================
FILE: examples/switch/index.html
================================================
Document
切换禁用
================================================
FILE: examples/switch/index.ts
================================================
import Rabbit from '../../src';
export default function switchTest(): void {
const Switch = new Rabbit.Switch();
Switch.config('#test').events({
onChange: (checked) => {
Rabbit.Message.info(`开关状态: ${checked}`);
}
});
let flag = true;
// @ts-ignore
window.handlClick = () => {
flag ? (flag = !flag) : (flag = !flag);
Switch.config('#testDis').disabled = flag;
};
}
================================================
FILE: examples/tabs/index.html
================================================
Document
标签一的内容
标签二的内容
标签三的内容
标签一的内容
标签二的内容
标签三的内容
标签一的内容
标签二的内容
标签三的内容
标签一的内容
标签二的内容
标签三的内容
标签一的内容
标签二的内容
标签三的内容
标签一的内容
标签二的内容
标签三的内容
标签一的内容
标签二的内容
标签三的内容
标签一的内容
标签二的内容
标签三的内容
标签四的内容
标签五的内容
标签六的内容
标签七的内容
标签八的内容
标签九的内容
标签十的内容
标签十一的内容
标签十二的内容
标签一的内容
标签二的内容
标签三的内容
标签一的内容
标签二的内容
标签三的内容
================================================
FILE: examples/tabs/index.ts
================================================
import Rabbit from '../../src';
export default function tabsTest(): void {
const tabs = new Rabbit.Tabs();
tabs.config('#a').events({
onClick: (key) => {
console.log(key);
}
});
// setTimeout(() => {
// tabs.config('#a').activeKey = '2';
// }, 1500);
}
================================================
FILE: examples/tag/index.html
================================================
Document
标签一
标签二
标签三
标签三
标签四
标签一
标签二
default
primary
success
error
warning
magenta
red
volcano
orange
gold
yellow
lime
green
cyan
blue
geekblue
purple
Custom Color
标签一
标签二
标签三
标签四
标签一
标签二
标签三
标签四
标签一
标签二
标签三
标签四
默认标签
中号标签
大号标签
================================================
FILE: examples/tag/index.ts
================================================
import Rabbit from '../../src';
export default function tagTest(): void {
const tag = new Rabbit.Tag();
tag.config('#demoTag').events({
onChange(checked) {
console.log(checked);
}
});
}
================================================
FILE: examples/time/index.html
================================================
Document
================================================
FILE: examples/time/index.ts
================================================
import Rabbit from '../../src';
// import 'dayjs/locale/af';
export default function timeTest(): void {
const time = new Rabbit.Time();
// time.locale('af');
}
================================================
FILE: examples/timeline/index.html
================================================
Document
1976s
第一代苹果问世
1984s
发布麦金塔电脑
2007s
发布 iPhone
2010s
发布 iPad
2011.10.05
史蒂夫·乔布斯去世
发布1.0版本
发布2.0版本
重大Bug
推迟发布
发布3.0版本
2021-04-01 创建服务器网站
2021-04-01 解决了初始化网络问题
2021-04-01 技术人员进行测试
查看更多
发布里程碑版本
发布1.0版本
发布2.0版本
发布3.0版本
================================================
FILE: examples/timeline/index.ts
================================================
import Rabbit from '../../src';
export default function timelineTest(): void {
new Rabbit.Timeline();
}
================================================
FILE: examples/tooltip/index.html
================================================
Document
鼠标经过这段文字时，会显示一个气泡框
多行
禁用提示
延时1秒显示
Dark(default)
Light
pink
red
yellow
orange
cyan
green
blue
purple
geekblue
magenta
volcano
gold
lime
长文本
================================================
FILE: examples/tooltip/index.ts
================================================
import Rabbit from '../../src';
export default function tooltipTest(): void {
const tooltip = new Rabbit.Tooltip();
tooltip.config('#test').events({
onVisibleChange: (visable) => {
console.log(visable);
}
});
tooltip.config('#test2').content = '显示多行信息
可以自定义样式
';
}
================================================
FILE: package.json
================================================
{
"name": "rabbit-simple-ui",
"version": "1.8.0",
"title": "RabbitUI",
"description": "A simple UI component library based on JavaScript",
"homepage": "www.rabbitui.cn",
"keywords": [
"ui",
"jsui",
"rabbitui",
"RabbitUI",
"rabbit-simple-ui",
"library",
"ui-library",
"component",
"framework",
"javascript",
"typescript"
],
"main": "src/index.ts",
"files": [
"dist",
"src"
],
"scripts": {
"dev": "webpack-dev-server --history-api-fallback --config config/webpack.dev.js",
"build:dev": "webpack --config config/webpack.dist.dev.js --progress",
"build:prod": "webpack --config config/webpack.dist.prod.js --progress",
"build": "npm run build:dev && npm run build:prod",
"eslint": "eslint src --ext .ts"
},
"repository": {
"type": "git",
"url": "https://github.com/niu-grandpa/rabbit-ui"
},
"author": "Ryan John",
"license": "MIT",
"bugs": {
"url": "https://github.com/niu-grandpa/rabbit-ui/issues"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.12.0",
"@typescript-eslint/parser": "^4.12.0",
"autoprefixer": "^8.0.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"compression-webpack-plugin": "^7.0.0",
"css-loader": "^5.0.1",
"eslint": "^7.17.0",
"eslint-config-alloy": "^3.10.0",
"file-loader": "^6.2.0",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^5.0.0-beta.1",
"less": "^4.0.0",
"less-loader": "^7.1.0",
"mini-css-extract-plugin": "^1.3.3",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss-loader": "^4.1.0",
"prettier": "^2.2.1",
"style-loader": "^2.0.0",
"ts-loader": "^8.0.12",
"typescript": "^4.1.3",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1",
"webpack": "^5.11.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.7.2"
},
"dependencies": {
"@popperjs/core": "^2.6.0",
"dayjs": "^1.10.4",
"vue-router": "^4.0.6"
},
"engines": {
"node": ">=6.5",
"npm": ">=5.5.1",
"yarn": ">=1.3.2"
},
"browserslist": [
"last 3 Chrome versions",
"last 3 Firefox versions",
"Safari >= 10",
"Explorer >= 10",
"Edge >= 12",
"iOS >= 10",
"Android >= 6"
]
}
================================================
FILE: postcss.config.js
================================================
module.exports = {
plugins: [require('autoprefixer')]
};
================================================
FILE: prettier.config.js
================================================
// prettier.config.js or .prettierrc.js
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 使用 4 个空格缩进
tabWidth: 4,
// 不使用缩进符，而使用空格
useTabs: false,
// 行尾需要有分号
semi: true,
// 使用单引号
singleQuote: true,
// 对象的 key 仅在必要时用引号
quoteProps: 'as-needed',
// 末尾不需要逗号
trailingComma: 'none',
// 大括号内的首尾需要空格
bracketSpacing: true,
// 每个文件格式化的范围是文件的全部内容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准
proseWrap: 'preserve',
// 根据显示样式决定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 换行符使用 lf
endOfLine: 'lf'
};
================================================
FILE: site/.babelrc
================================================
{
"plugins": [
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true }] // `style: true` 会加载 less 文件
]
}
================================================
FILE: site/.eslintrc.js
================================================
module.exports = {
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier/@typescript-eslint',
'plugin:prettier/recommended',
],
rules: {
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'no-use-before-define': 'off', // 'no-use-before-define': [ // 'error', // { // functions: false, // classes: true, // }, // ],
'@typescript-eslint/no-use-before-define': 'off', // '@typescript-eslint/no-use-before-define': [ // 'error', // { // functions: false, // classes: true, // }, // ],
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$',
},
],
'no-unused-vars': [
'error',
{
argsIgnorePattern: '^h$',
varsIgnorePattern: '^h$',
},
],
'space-before-function-paren': 'off',
quotes: ['error', 'single'],
'comma-dangle': ['error', 'never'],
},
};
================================================
FILE: site/.gitignore
================================================
node_modules
.DS_Store
dist
dist-ssr
*.local
================================================
FILE: site/README.md
================================================
# Vue 3 + Typescript + Vite
This template should help get you started developing with Vue 3 and Typescript in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings!
### If Using `
================================================
FILE: site/package.json
================================================
{
"name": "rabbitui-website",
"version": "1.0.0",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit --skipLibCheck && vite build",
"serve": "vite preview --port 8080"
},
"dependencies": {
"@ant-design/icons-vue": "^6.0.1",
"@typescript-eslint/eslint-plugin": "^4.23.0",
"@typescript-eslint/parser": "^4.23.0",
"ant-design-vue": "^2.1.2",
"eslint": "^7.26.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-vue": "^7.9.0",
"less": "^4.1.1",
"prettier": "^2.3.0",
"vue": "^3.0.5",
"vue-router": "^4.0.6"
},
"devDependencies": {
"@types/node": "^15.0.2",
"@vitejs/plugin-vue": "^1.2.2",
"@vue/compiler-sfc": "^3.0.5",
"typescript": "^4.1.3",
"vite": "^2.2.4",
"vite-plugin-compression": "^0.5.1",
"vue-tsc": "^0.0.24"
}
}
================================================
FILE: site/prettier.config.js
================================================
module.exports = {
printWidth: 100,
tabWidth: 2,
useTabs: false,
semi: false, // 未尾逗号
vueIndentScriptAndStyle: true,
singleQuote: true, // 单引号
quoteProps: 'as-needed',
bracketSpacing: true,
trailingComma: 'none', // 未尾分号
jsxBracketSameLine: false,
jsxSingleQuote: false,
arrowParens: 'always',
insertPragma: false,
requirePragma: false,
proseWrap: 'never',
htmlWhitespaceSensitivity: 'strict',
endOfLine: 'lf'
}
================================================
FILE: site/src/App.vue
================================================
================================================
FILE: site/src/components/Anchor.vue
================================================
================================================
FILE: site/src/components/CodeBox.vue
================================================
================================================
FILE: site/src/components/ColorCard.vue
================================================
{{ item.name }}
{{ item.desc }}
================================================
FILE: site/src/components/ExampleHeaderArea.vue
================================================
{{ props.name }} {{ props.title }}
{{ desc }}
特别提醒：使用前需要先初始化组件 new Rabbit.{{ props.name }}()，如果为
NPM 环境则无需添加 Rabbit 前缀
特别提醒：NPM 环境下无需添加 Rabbit 前缀
何时使用
代码示例
================================================
FILE: site/src/components/NavLogo.vue
================================================
================================================
FILE: site/src/components/RowCol.vue
================================================
================================================
FILE: site/src/components/SearchInput.vue
================================================
{{ item.text }}
================================================
FILE: site/src/components/index.ts
================================================
import NavLogo from './NavLogo.vue'
import Anchor from './Anchor.vue'
import CodeBox from './CodeBox.vue'
import ColorCard from './ColorCard.vue'
import SearchInput from './SearchInput.vue'
import ExampleHeaderArea from './ExampleHeaderArea.vue'
export { NavLogo, Anchor, CodeBox, ColorCard, SearchInput, ExampleHeaderArea }
================================================
FILE: site/src/examples-code/components/affix/APITable.vue
================================================
Affix
属性 说明 默认值
offset-top 距离窗口顶部达到指定偏移量后触发 0
offset-bottom 距离窗口底部达到指定偏移量后触发 -
use-capture addEventListener 原生的 useCapture 选项 false
Config 方法
配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型
el 配置当前选定的 alert，必须是选择器名称或者元素名 String
该方法返回以下值：
返回值 说明 类型 默认值
events 非响应式API，添加提示框的事件， Function -
events的参数 options 为对象，具体说明如下：
属性 说明 回调参数
onChange 固定状态改变时触发的回调函数 (affixed: boolean) => void
================================================
FILE: site/src/examples-code/components/affix/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/affix/FixedBottom.vue
================================================
================================================
FILE: site/src/examples-code/components/affix/Offset.vue
================================================
================================================
FILE: site/src/examples-code/components/affix/StatusChange.vue
================================================
================================================
FILE: site/src/examples-code/components/affix/index.ts
================================================
import Basic from './Basic.vue'
import Offset from './Offset.vue'
import FixedBottom from './FixedBottom.vue'
import StatusChange from './StatusChange.vue'
import APITable from './APITable.vue'
export { Basic, Offset, FixedBottom, StatusChange, APITable }
================================================
FILE: site/src/examples-code/components/alert/APITable.vue
================================================
Alert 属性 说明 默认值 type 警告提示样式，可选值为 info、 success、 warning、 errorinfo title 提示标题 - show-icon 是否显示图标 false closable 是否可关闭 false close-text 关闭按钮自定义文本 - banner 应用顶部公告的样式 - icon 自定义图标内容 -
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 alert，必须是选择器名称或者元素名 String
该方法返回以下值：
返回值 说明 类型 默认值 title 响应式设置或更新警告提示内容 String - icon 响应式设置或更新图标内容 String - events 非响应式API，添加提示框的事件， Function -
events的参数 options 为对象，具体说明如下： 属性 说明 回调参数 onClose 关闭时触发的回调函数 (event: MouseEvent) => void
================================================
FILE: site/src/examples-code/components/alert/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/alert/WithBanner.vue
================================================
================================================
FILE: site/src/examples-code/components/alert/WithClose.vue
================================================
================================================
FILE: site/src/examples-code/components/alert/WithDesc.vue
================================================
================================================
FILE: site/src/examples-code/components/alert/WithIcon.vue
================================================
================================================
FILE: site/src/examples-code/components/alert/index.ts
================================================
import Basic from './Basic.vue'
import WithDesc from './WithDesc.vue'
import WithIcon from './WithIcon.vue'
import WithClose from './WithClose.vue'
import WithBanner from './WithBanner.vue'
import APITable from './APITable.vue'
export { Basic, WithDesc, WithIcon, WithClose, WithBanner, APITable }
================================================
FILE: site/src/examples-code/components/avatar/APITable.vue
================================================
Avatar 属性 说明 默认值 shape 指定头像的形状，可选值为 circle、 squarecircle size 设置头像的大小，可选值为 large、 small，支持设置具体数值 - src 图片类头像的资源地址 - icon 设置头像的图标类型，参考 icon-
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 avatar，必须是选择器名称或者元素名 String
该方法返回以下值：
返回值 说明 类型 默认值 events 非响应式API，添加提示框的事件， Function -
events的参数 options 为对象，具体说明如下： 属性 说明 回调参数 onError 在设置 src 且图片加载不成功时触发 (event:Event) => void
================================================
FILE: site/src/examples-code/components/avatar/AutoFontSize.vue
================================================
================================================
FILE: site/src/examples-code/components/avatar/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/avatar/Type.vue
================================================
================================================
FILE: site/src/examples-code/components/avatar/index.ts
================================================
import Basic from './Basic.vue'
import Type from './Type.vue'
import AutoFontSize from './AutoFontSize.vue'
import APITable from './APITable.vue'
export { Basic, Type, AutoFontSize, APITable }
================================================
FILE: site/src/examples-code/components/back-top/APITable.vue
================================================
BackTop 属性 说明 默认值 height 页面滚动高度达到该值时才显示 BackTop组件 400 bottom 组件距离底部的距离 30 right 组件距离右部的距离 30 duration 滚动动画持续时间，单位 毫秒 500
================================================
FILE: site/src/examples-code/components/back-top/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/back-top/CustomStyle.vue
================================================
================================================
FILE: site/src/examples-code/components/back-top/index.ts
================================================
import Basic from './Basic.vue'
import CustomStyle from './CustomStyle.vue'
import APITable from './APITable.vue'
export { Basic, CustomStyle, APITable }
================================================
FILE: site/src/examples-code/components/badge/APITable.vue
================================================
Badge 属性 说明 默认值 count 显示的数字，大于 maxCount时，显示 ${maxCount}+，为 0 时隐藏 - max-count 展示封顶的数字值 99 dot 不展示数字，只有一个小红点，如需隐藏 dot，详见下方 config 方法 false type 使用预设的颜色，可选值为 success、primary、normal、error、warning、info - show-zero 当数值为 0 时，是否展示 Badge false status 设置 Badge 为状态点，可选值为 success、processing、default、error、warning - text 自定义内容，如果设置了 status，则为状态点的文本 - offset 设置状态点的位置偏移，格式为 [x, y] - color 设置更多状态点的颜色或自定义颜色 -
配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 badge，必须是选择器名称或者元素名 String
该方法返回以下值：
返回值 说明 类型 默认值 count 响应式设置或更新警告徽标显示的数字 Number - text 响应式设置或更新徽标自定义内容 String - dot 响应式设置或更新是否为为点状 Boolean -
================================================
FILE: site/src/examples-code/components/badge/Alone.vue
================================================
================================================
FILE: site/src/examples-code/components/badge/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/badge/Colors.vue
================================================
================================================
FILE: site/src/examples-code/components/badge/CustomContent.vue
================================================
================================================
FILE: site/src/examples-code/components/badge/CustomPosition.vue
================================================
================================================
FILE: site/src/examples-code/components/badge/MaxCount.vue
================================================
================================================
FILE: site/src/examples-code/components/badge/PresetColor.vue
================================================
================================================
FILE: site/src/examples-code/components/badge/RedDot.vue
================================================
================================================
FILE: site/src/examples-code/components/badge/StatusDot.vue
================================================
================================================
FILE: site/src/examples-code/components/badge/index.ts
================================================
import Basic from './Basic.vue'
import RedDot from './RedDot.vue'
import MaxCount from './MaxCount.vue'
import Alone from './Alone.vue'
import CustomContent from './CustomContent.vue'
import CustomPosition from './CustomPosition.vue'
import StatusDot from './StatusDot.vue'
import Colors from './Colors.vue'
import PresetColor from './PresetColor.vue'
import APITable from './APITable.vue'
export {
Basic,
RedDot,
MaxCount,
Alone,
CustomContent,
CustomPosition,
StatusDot,
Colors,
PresetColor,
APITable
}
================================================
FILE: site/src/examples-code/components/breadcrumb/APITable.vue
================================================
================================================
FILE: site/src/examples-code/components/breadcrumb/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/breadcrumb/Separator.vue
================================================
================================================
FILE: site/src/examples-code/components/breadcrumb/WithIcon.vue
================================================
================================================
FILE: site/src/examples-code/components/breadcrumb/index.ts
================================================
import Basic from './Basic.vue'
import WithIcon from './WithIcon.vue'
import Separator from './Separator.vue'
import APITable from './APITable.vue'
export { Basic, WithIcon, Separator, APITable }
================================================
FILE: site/src/examples-code/components/button/APITable.vue
================================================
Button
属性 说明 默认值
loading 设置按钮为加载中状态 false
disabled 设置按钮为禁用状态 false
icon 设置按钮的图标类型 -
Config 方法
配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型
el 配置当前选定的 button，必须是选择器名称或者元素名 String
该方法返回以下值：
返回值 说明 类型 默认值
loading 响应式设置设置按钮为加载中状态 Boolean false
================================================
FILE: site/src/examples-code/components/button/Disabled.vue
================================================
================================================
FILE: site/src/examples-code/components/button/Ghost.vue
================================================
================================================
FILE: site/src/examples-code/components/button/Group.vue
================================================
================================================
FILE: site/src/examples-code/components/button/IconWithCircle.vue
================================================
================================================
FILE: site/src/examples-code/components/button/Loading.vue
================================================
================================================
FILE: site/src/examples-code/components/button/Long.vue
================================================
================================================
FILE: site/src/examples-code/components/button/Placement.vue
================================================
================================================
FILE: site/src/examples-code/components/button/Size.vue
================================================
================================================
FILE: site/src/examples-code/components/button/Type.vue
================================================
================================================
FILE: site/src/examples-code/components/button/index.ts
================================================
import Type from './Type.vue'
import Ghost from './Ghost.vue'
import IconWithCircle from './IconWithCircle.vue'
import Size from './Size.vue'
import Long from './Long.vue'
import Disabled from './Disabled.vue'
import Loading from './Loading.vue'
import Group from './Group.vue'
import Placement from './Placement.vue'
import APITable from './APITable.vue'
export { Type, Ghost, IconWithCircle, Size, Long, Disabled, Loading, Group, Placement, APITable }
================================================
FILE: site/src/examples-code/components/card/APITable.vue
================================================
Card 属性 说明 默认值 no-bodred 不显示边框，建议在灰色背景下使用 false dis-hover 禁用鼠标悬停显示阴影 false shadow 卡片阴影，建议在灰色背景下使用 false title 卡片标题 - extra 卡片额外操作的内容 -
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 steps，必须是选择器名称或者元素名 String
该方法返回以下2个 String 类型的属性：
返回值 说明 类型 默认值 title 响应式设置卡片标题 String - extra 响应式设置卡片额外操作的内容 String -
================================================
FILE: site/src/examples-code/components/card/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/card/DisHover.vue
================================================
================================================
FILE: site/src/examples-code/components/card/NoBorder.vue
================================================
================================================
FILE: site/src/examples-code/components/card/Shadow.vue
================================================
================================================
FILE: site/src/examples-code/components/card/Simple.vue
================================================
================================================
FILE: site/src/examples-code/components/card/index.ts
================================================
import Basic from './Basic.vue'
import Simple from './Simple.vue'
import DisHover from './DisHover.vue'
import Shadow from './Shadow.vue'
import NoBorder from './NoBorder.vue'
import APITable from './APITable.vue'
export { Basic, Simple, DisHover, Shadow, NoBorder, APITable }
================================================
FILE: site/src/examples-code/components/carousel/APITable.vue
================================================
Carousel 属性 说明 默认值 autoplay 是否自动切换 false autoplay-speed 自动切换的时间间隔，单位为毫秒 2000 dots 指示器的位置，可选值为 inside （内部），outside（外部），none（不显示） inside radius-dot 是否显示圆形指示器 false trigger 指示器的触发方式，可选值为 click（点击），hover（悬停） click arrow 切换箭头的显示时机，可选值为
hover（悬停），always（一直显示），never（不显示） hover easing 动画效果 ease effect 动画效果函数，可切换为渐显 fade-
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 carousel，必须是选择器名称或者元素名 String
该方法返回以下值：
返回值 说明 类型 默认值 events 非响应式API，添加提示框的事件， Function -
events的参数 options 为对象，具体说明如下： 属性 说明 回调参数 onClick 点击幻灯片时触发，返回索引值 (index: number) => void onChange 幻灯片切换时触发，目前激活的幻灯片的索引，原幻灯片的索引 ([ oldValue, value ]: [number,number]) => void
================================================
FILE: site/src/examples-code/components/carousel/AutoPlay.vue
================================================
================================================
FILE: site/src/examples-code/components/carousel/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/carousel/Fade.vue
================================================
================================================
FILE: site/src/examples-code/components/carousel/index.ts
================================================
import Basic from './Basic.vue'
import AutoPlay from './AutoPlay.vue'
import Fade from './Fade.vue'
import APITable from './APITable.vue'
export { Basic, AutoPlay, Fade, APITable }
================================================
FILE: site/src/examples-code/components/checkbox/APITable.vue
================================================
Checkbox 属性 说明 默认值 checked 单个是否选中 false label 只在组合使用时有效。指定当前选项的 value 值，组合会自动判断当前选择的项目 - disabled 是否禁用当前项 false size 单选框的尺寸，可选值为 large， small 或者不设置 - border 是否显示边框 false icon 设置前缀图标 - indeterminate 设置 indeterminate 状态，只负责样式控制 false
RadioGroup 属性 说明 默认值 value 指定选中项目的集合 [ ] size 多选框组的尺寸，可选值为 large、 small 或者不设置 -
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 checkbox，必须是选择器名称或者元素名 String
该方法返回以下三个值：
checkeddisabledvalueindeterminateevents(options)返回值 说明 类型 默认值 checked 响应式设置单个是否选中 Boolean - disabled 响应式设置是否禁用当前项 Boolean - value 响应式设置 checkbox-group 当前选中的项目数据 Array - indeterminate 响应式设置 indeterminate 状态 Boolean - events 非响应式API，添加 Checkbox 的事件， Function -
events的参数 options 为对象，具体说明如下： 属性 说明 回调参数 onChange 在选项状态发生改变时触发。当选中的配置目标是 checkbox-group
时，返回已选中的数组。如果是单个 checkbox 则返回当前选中状态 (checked: boolean | data: string[]) => void
================================================
FILE: site/src/examples-code/components/checkbox/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/checkbox/Border.vue
================================================
================================================
FILE: site/src/examples-code/components/checkbox/Disabled.vue
================================================
================================================
FILE: site/src/examples-code/components/checkbox/Group.vue
================================================
================================================
FILE: site/src/examples-code/components/checkbox/Indeterminate.vue
================================================
================================================
FILE: site/src/examples-code/components/checkbox/index.ts
================================================
import Basic from './Basic.vue'
import Group from './Group.vue'
import Border from './Border.vue'
import Disabled from './Disabled.vue'
import Indeterminate from './Indeterminate.vue'
import APITable from './APITable.vue'
export { Basic, Group, Border, Disabled, Indeterminate, APITable }
================================================
FILE: site/src/examples-code/components/circle/APITable.vue
================================================
API
Circle
属性 说明 默认值
percent 百分比 0
size 图表的宽度和高度，单位 px 120
stroke-linecap
进度环顶端的形状，可选值为 square（方）和 round（圆）
round
stroke-width 进度环的线宽，单位 px 6
stroke-color
进度环的颜色，支持传入数组显示为渐变色，标签属性上设置数组的格式的值为 '["xxxx","xxx"]'
# 1890ff
trail-width 进度环背景的线宽，单位 px 5
trail-color 进度环背景的颜色 # eaeef2
dashboard 是否显示为仪表盘 false
Config 方法
配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型
el 配置当前选定的 circle，必须是选择器名称或者元素名 String
该方法返回以下两个值：
返回值 说明 类型 默认值
percent 响应式设置百分比 Number 0
strokeColor 响应式设置进度环的颜色 String | String[ ] #1890ff
================================================
FILE: site/src/examples-code/components/circle/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/circle/CustomStyle.vue
================================================
================================================
FILE: site/src/examples-code/components/circle/Dashboard.vue
================================================
================================================
FILE: site/src/examples-code/components/circle/UseWithOther.vue
================================================
================================================
FILE: site/src/examples-code/components/circle/index.ts
================================================
import Basic from './Basic.vue'
import UseWithOther from './UseWithOther.vue'
import CustomStyle from './CustomStyle.vue'
import Dashboard from './Dashboard.vue'
import APITable from './APITable.vue'
export { Basic, UseWithOther, CustomStyle, Dashboard, APITable }
================================================
FILE: site/src/examples-code/components/collapse/APITable.vue
================================================
Collapse 属性 说明 默认值 active-index 初始化选中面板的 key，格式可以为 string、 number、 "[string]" 或 "[number]"- accordion 是否开启手风琴模式，开启后每次至多展开一个面板 false simple 简洁边框风格的折叠面板 false ghost 使折叠面板透明且无边框 false
Collapse-panel 属性 说明 默认值 index 当前面板的 key，与 r-collapse 的 active-index对应，不填为索引值 index hide-arrow 隐藏当前面板上的箭头 false
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 collapse，必须是选择器名称或者元素名 String
该方法返回以下两个值：
activeIndexevents(options)返回值 说明 类型 默认值 activeIndex 响应式设置当前激活面板的 index String | String[ ] | Number | Number[ ] - events 非响应式API，添加折叠面板事件， Function -
events的参数 options 为对象，具体说明如下： 属性 说明 回调参数 onChange 切换面板时触发，返回当前已展开的面板的 key，格式为数组 (index: string[]) => void
================================================
FILE: site/src/examples-code/components/collapse/According.vue
================================================
================================================
FILE: site/src/examples-code/components/collapse/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/collapse/Ghost.vue
================================================
================================================
FILE: site/src/examples-code/components/collapse/HiddenArrow.vue
================================================
================================================
FILE: site/src/examples-code/components/collapse/Simple.vue
================================================
================================================
FILE: site/src/examples-code/components/collapse/index.ts
================================================
import Basic from './Basic.vue'
import Simple from './Simple.vue'
import Ghost from './Ghost.vue'
import According from './According.vue'
import HiddenArrow from './HiddenArrow.vue'
import APITable from './APITable.vue'
export { Basic, Simple, Ghost, According, HiddenArrow, APITable }
================================================
FILE: site/src/examples-code/components/count-down/APITable.vue
================================================
CountDown 属性 说明 默认值 end-time 设置倒计时结束的目标时间 -
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 count-down，必须是选择器名称或者元素名 String
该方法返回以下值：
返回值 说明 类型 默认值 endTime 响应式设置倒计时结束的目标时间 String - events 非响应式API，添加倒计时的事件， Function -
events的参数 options 为对象，具体说明如下： 属性 说明 回调参数 onStop 倒计时结束后触发的事件 (stop: boolean) => void
================================================
FILE: site/src/examples-code/components/count-down/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/count-down/index.ts
================================================
import Basic from './Basic.vue'
import APITable from './APITable.vue'
export { Basic, APITable }
================================================
FILE: site/src/examples-code/components/divider/APITable.vue
================================================
Divider 属性 说明 默认值 type 水平还是垂直类型，可选值为 horizontal 或 vertical horizontal orientation 分割线标题的位置，可选值为 left、right 或 center center dashed 是否虚线 false size 标题文字尺寸，可选值为 small 或 不填 - plain 文字是否显示为普通正文样式 false
================================================
FILE: site/src/examples-code/components/divider/HeaderPosition.vue
================================================
================================================
FILE: site/src/examples-code/components/divider/Horizontal.vue
================================================
================================================
FILE: site/src/examples-code/components/divider/TextStyle.vue
================================================
================================================
FILE: site/src/examples-code/components/divider/Vertical.vue
================================================
================================================
FILE: site/src/examples-code/components/divider/index.ts
================================================
import Vertical from './Vertical.vue'
import Horizontal from './Horizontal.vue'
import TextStyle from './TextStyle.vue'
import HeaderPosition from './HeaderPosition.vue'
import APITable from './APITable.vue'
export { Vertical, Horizontal, TextStyle, HeaderPosition, APITable }
================================================
FILE: site/src/examples-code/components/drawer/APITable.vue
================================================
Drawer 属性 说明 默认值 visible 初始 Drawer 是否可见 false title 抽屉标题 - width 抽屉宽度。需要带像素单位 256px closable 是否显示右上角的关闭按钮 false mask-closable 是否允许点击遮罩层关闭 true mask 是否显示遮罩层 true scrollable 页面是否可以滚动 false placement 抽屉的方向，可选值为 top、 right、 bottom 、 left right inner 是否设置抽屉在某个元素内打开，该元素需要有相对定位 false lock-scroll 是否禁止对页面滚动条的修改 false
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 drawer，必须是选择器名称或者元素名 String
该方法返回以下两个值：
返回值 说明 类型 默认值 title 响应式设置抽屉的标题 String - events 非响应式API，添加抽屉事件， Function -
events的参数 options 为对象，具体说明如下：
================================================
FILE: site/src/examples-code/components/drawer/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/drawer/Custom.vue
================================================
================================================
FILE: site/src/examples-code/components/drawer/Inner.vue
================================================
================================================
FILE: site/src/examples-code/components/drawer/Multilayer.vue
================================================
================================================
FILE: site/src/examples-code/components/drawer/index.ts
================================================
import Basic from './Basic.vue'
import Inner from './Inner.vue'
import Custom from './Custom.vue'
import Multilayer from './Multilayer.vue'
import APITable from './APITable.vue'
export { Basic, Inner, Custom, Multilayer, APITable }
================================================
FILE: site/src/examples-code/components/dropdown/APITable.vue
================================================
Dropdown 属性 说明 默认值 trigger 触发方式，可选值为 hover（悬停） click（点击） contextMenu（右键） custom (自定义) hover placement 下拉菜单出现的位置，可选值为 top``top-start``top-end``bottom``bottom-start``bottom-end``left``left-start``left-end``right``right-start``right-end, 支持自动识别 bottom visible 1.3.0手动控制下拉框的显示，在 trigger = 'custom' 时使用 false stop-propagation 1.3.0是否开启 stop-propagation，在trigger = 'custom' 时，如果将事件绑定到 r-dropdown
上时最好使用 false
DropdownItem 属性 说明 默认值 key 1.3.0用来标识这一项 - disabled 禁用该项 - divided 显示分割线 - selected 标记该项为选中状态 - danger 1.3.0标记为危险项，用于删除项操作
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 drawer，必须是选择器名称或者元素名 String
该方法返回以下值：
返回值 说明 类型 默认值 visible 1.3.0响应式设置或更新下拉框的显示 Boolean false events 非响应式API，添加下拉菜单事件 Function -
events的参数 options 为对象，具体说明如下： 属性 说明 回调参数 onClick 1.3.0点击菜单项时触发，返回 r-dropdown-item 的 key 值 (key: string) => void onVisibleChange 1.3.0菜单显示状态改变时调用 (visible: boolean) => void onClickOutside 1.3.0点击外部关闭下拉菜单时触发 (event: Event) => void
================================================
FILE: site/src/examples-code/components/dropdown/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/dropdown/Nested.vue
================================================
================================================
FILE: site/src/examples-code/components/dropdown/Placement.vue
================================================
================================================
FILE: site/src/examples-code/components/dropdown/Trigger.vue
================================================
================================================
FILE: site/src/examples-code/components/dropdown/index.ts
================================================
import Basic from './Basic.vue'
import Nested from './Nested.vue'
import Trigger from './Trigger.vue'
import Placement from './Placement.vue'
import APITable from './APITable.vue'
export { Basic, Nested, Trigger, Placement, APITable }
================================================
FILE: site/src/examples-code/components/empty/APITable.vue
================================================
Empty 属性 说明 默认值 desc 自定义描述内容 - image-style 图片样式 - image 自定义图片地址 -
================================================
FILE: site/src/examples-code/components/empty/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/empty/Custom.vue
================================================
================================================
FILE: site/src/examples-code/components/empty/NoDesc.vue
================================================
================================================
FILE: site/src/examples-code/components/empty/index.ts
================================================
import Basic from './Basic.vue'
import Custom from './Custom.vue'
import NoDesc from './NoDesc.vue'
import APITable from './APITable.vue'
export { Basic, Custom, NoDesc, APITable }
================================================
FILE: site/src/examples-code/components/input-number/APITable.vue
================================================
InputNumber 属性 说明 默认值 max 最大值 Infinity min 最小值 -Infinity value 输入框当前值 - controls-outside 按钮位置是否置于两侧 false step 每次改变的步伐，可以是小数 1 size 输入框尺寸，可选值为 large、 small或者不填 - disabled 设置禁用状态 false placeholder 占位文本 - formatter 指定输入框展示值的格式 - parser 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 - readonly 是否设置为只读 false editable 是否可编辑 true precision 数值精度 - input-id 给内部实际的输入框元素设置 id-
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 input-number，必须是选择器名称或者元素名 String
该方法返回以下值：
endTimestepdisabledreadOnlyeditableevents(options) 返回值 说明 类型 value 响应式设置输入框当前值 Boolean step 响应式设置每次改变的步伐 Number disabled 响应式设置禁用状态 Boolean readOnly 响应式设置是否设置为只读 Boolean editable 响应式设置是否可编辑 Boolean events 非响应式API，添加 InputNumber 的事件， Functioin
events的参数 options 为对象，具体说明如下： 属性 说明 回调参数 onChange 数值改变时的回调，返回当前值 (value: number) => void onFocus 聚焦时触发 (event: InputEvent) => void onBlur 失焦时触发 无
================================================
FILE: site/src/examples-code/components/input-number/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/input-number/ControlsOutside.vue
================================================
================================================
FILE: site/src/examples-code/components/input-number/Disabled.vue
================================================
================================================
FILE: site/src/examples-code/components/input-number/Editable.vue
================================================
================================================
FILE: site/src/examples-code/components/input-number/Formatter.vue
================================================
================================================
FILE: site/src/examples-code/components/input-number/ReadOnly.vue
================================================
================================================
FILE: site/src/examples-code/components/input-number/Size.vue
================================================
================================================
FILE: site/src/examples-code/components/input-number/Step.vue
================================================
================================================
FILE: site/src/examples-code/components/input-number/index.ts
================================================
import Basic from './Basic.vue'
import Size from './Size.vue'
import Editable from './Editable.vue'
import Formatter from './Formatter.vue'
import Step from './Step.vue'
import ReadOnly from './ReadOnly.vue'
import Disabled from './Disabled.vue'
import ControlsOutside from './ControlsOutside.vue'
import APITable from './APITable.vue'
export { Basic, Size, Editable, Formatter, Step, ReadOnly, Disabled, ControlsOutside, APITable }
================================================
FILE: site/src/examples-code/components/jumbotron/APITable.vue
================================================
Jumbotron 属性 说明 默认值 type 更改外观颜色，可选值为 light 和 dark- title 设置大标题 - sub-title 设置描述标题 -
================================================
FILE: site/src/examples-code/components/jumbotron/Appearance.vue
================================================
================================================
FILE: site/src/examples-code/components/jumbotron/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/jumbotron/index.ts
================================================
import Basic from './Basic.vue'
import Appearance from './Appearance.vue'
import APITable from './APITable.vue'
export { Basic, Appearance, APITable }
================================================
FILE: site/src/examples-code/components/loading-bar/APITable.vue
================================================
LoadingBar instance
通过直接调用以下方法来使用组件：
Rabbit.Loading.start()Rabbit.Loading.finish()Rabbit.Loading.error()Rabbit.Loading.update(percent)函数及参数说明如下：
函数名 说明 参数 start 开始从 0 显示进度条，并自动加载进度 无 finish 结束进度条，自动补全剩余进度 无 error 以错误的类型结束进度条，自动补全剩余进度 无 update 精确加载到指定的进度 percent，指定的进度百分比
另外提供了全局配置和全局销毁的方法：
Rabbit.Loading.config(options)Rabbit.Loading.destroy()属性 说明 类型 默认值 color 进度条的颜色，默认为 Rabbit 主色 String primary failedColor 失败时的进度条颜色，默认为 Rabbit 主色 String error height 进度条高度，单位 px Number 2 duration 隐藏时的持续时间，单位 ms Number 800
================================================
FILE: site/src/examples-code/components/loading-bar/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/loading-bar/UseInAsync.vue
================================================
================================================
FILE: site/src/examples-code/components/loading-bar/UsedInRoute.vue
================================================
================================================
FILE: site/src/examples-code/components/loading-bar/index.ts
================================================
import Basic from './Basic.vue'
import UsedInRoute from './UsedInRoute.vue'
import UseInAsync from './UseInAsync.vue'
import APITable from './APITable.vue'
export { Basic, UsedInRoute, UseInAsync, APITable }
================================================
FILE: site/src/examples-code/components/message/APITable.vue
================================================
Message 实例 通过直接调用以下方法来使用组件：
Rabbit.Message.info(config)Rabbit.Message.success(config)Rabbit.Message.warning(config)Rabbit.Message.error(config)Rabbit.Message.loading(config)
组件同时提供 promise 接口。
Rabbit.Message[level](config).then(afterClose)
其中 Rabbit.Message[level] 是组件已经提供的静态方法。 then 接口返回值是 Promise。
参数 config
可以是字符串或对象，当为字符串时，直接显示内容，当为对象时，具体说明如下：
属性 说明 类型 默认值
content 提示内容 String -
duration 自动关闭的延时，单位秒，不关闭可以写 0 Number 3
onClose 点击消息关闭按钮时的回调 Function -
closable 是否显示关闭按钮 Boolean false
background 是否显示背景色 Boolean false
key 当前提示的唯一标志 String | Number -
dangerouslyUseHTMLString 是否将 content 属性作为 HTML 片段处理 Boolean false
全局方法 还提供了全局配置和全局销毁方法：
Rabbit.Message.config(options)Rabbit.Message.destroy()
也可通过 Rabbit.Message.destroy(key) 来关闭一条消息。
属性 说明 类型 默认值
top 提示组件距离顶端的距离，单位像素 Number 24
duration 默认自动关闭的延时，单位秒 Number 3
================================================
FILE: site/src/examples-code/components/message/Background.vue
================================================
================================================
FILE: site/src/examples-code/components/message/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/message/Closable.vue
================================================
================================================
FILE: site/src/examples-code/components/message/Loading.vue
================================================
================================================
FILE: site/src/examples-code/components/message/Promise.vue
================================================
================================================
FILE: site/src/examples-code/components/message/Time.vue
================================================
================================================
FILE: site/src/examples-code/components/message/Type.vue
================================================
================================================
FILE: site/src/examples-code/components/message/UseHTML.vue
================================================
================================================
FILE: site/src/examples-code/components/message/index.ts
================================================
import Basic from './Basic.vue'
import Time from './Time.vue'
import Type from './Type.vue'
import Promise from './Promise.vue'
import Loading from './Loading.vue'
import UseHTML from './UseHTML.vue'
import Closable from './Closable.vue'
import Background from './Background.vue'
import APITable from './APITable.vue'
export { Basic, Time, Type, Promise, Loading, UseHTML, Closable, Background, APITable }
================================================
FILE: site/src/examples-code/components/mini-modal/APITable.vue
================================================
API 属性 说明 类型 默认值 title 标题 String - content 内容 String - width 宽度，单位 px Number | String 416 okText 确定按钮的文字 String 确定 cancelText 取消按钮的文字，只在 Modal.confirm()下有效 String 取消 loading 点击确定按钮时是否显示 loading 状态，开启则需手动调用 Modal.remove()来关闭对话框 Boolean false scrollable 页面是否可以滚动 Boolean false keyboard 是否可以按 Esc 键关闭 Boolean false onOk 点击确定的回调 Function - onCancel 点击取消的回调，只在 Modal.confirm()下有效 Function - lockScroll 是否禁止对页面滚动条的修改 Boolean true
另外提供了全局关闭对话框的方法：
Rabbit.MiniModal.remove()
================================================
FILE: site/src/examples-code/components/mini-modal/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/mini-modal/Confirm.vue
================================================
================================================
FILE: site/src/examples-code/components/mini-modal/index.ts
================================================
import Basic from './Basic.vue'
import Confirm from './Confirm.vue'
import APITable from './APITable.vue'
export { Basic, Confirm, APITable }
================================================
FILE: site/src/examples-code/components/modal/APITable.vue
================================================
Modal
属性 说明 默认值
visible 对话框默认是否显示 false
title 对话框标题 -
closable 是否显示右上角的关闭按钮，关闭后 Esc 按键也将关闭 true
mask-closable 是否允许点击遮罩层关闭 true
loading
点击确定按钮时，确定按钮是否显示 loading
状态，开启则需手动关闭对话框
false
scrollable 页面是否可以滚动 false
fullscreen 是否全屏显示 false
mask 是否显示遮罩层 true
ok-text 确定按钮文字 确定
cancel-text 取消按钮文字 取消
width
对话框宽度，对话框的宽度是响应式的，当屏幕尺寸小于 768px
时，宽度会变为自动 auto。
520px
footer-hide 不显示底部 false
class-name
设置对话框容器 .rab-modal-wrap的类名，可辅助实现垂直居中等自定义效果
-
z-index 层级 1000
lock-scroll 是否禁止对页面滚动条的修改 false
Config 方法
配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型
el 配置当前选定的 modal，必须是选择器名称或者元素名 String
该方法返回以下值：
visibletitleevents(options)
返回值 说明 类型 默认值
visible 响应式设置或更新对话框的显示 Boolean false
title 响应式设置或更新对话框标题 String -
events 非响应式API，添加对话框事件 Function -
events的参数 options 为对象，具体说明如下：
属性 说明 回调参数
onOk 点击确定的回调 无
onCancel 点击取消的回调 无
================================================
FILE: site/src/examples-code/components/modal/Aysnc.vue
================================================
================================================
FILE: site/src/examples-code/components/modal/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/modal/Custom.vue
================================================
================================================
FILE: site/src/examples-code/components/modal/DisabledClose.vue
================================================
================================================
FILE: site/src/examples-code/components/modal/FullScreen.vue
================================================
================================================
FILE: site/src/examples-code/components/modal/Position.vue
================================================
================================================
FILE: site/src/examples-code/components/modal/index.ts
================================================
import Basic from './Basic.vue'
import Aysnc from './Aysnc.vue'
import Custom from './Custom.vue'
import Position from './Position.vue'
import DisabledClose from './DisabledClose.vue'
import FullScreen from './FullScreen.vue'
import APITable from './APITable.vue'
export { Basic, Aysnc, Custom, Position, DisabledClose, FullScreen, APITable }
================================================
FILE: site/src/examples-code/components/notice/APITable.vue
================================================
Notice 实例 通过直接调用以下方法来使用组件：
Rabbit.Notice.open(config)Rabbit.Notice.info(config)Rabbit.Notice.success(config)Rabbit.Notice.warning(config)Rabbit.Notice.error(config)
组件同时提供 promise 接口。
Rabbit.Notice[level](config).then(afterClose)
其中 Rabbit.Notice[level] 是组件已经提供的静态方法。 then 接口返回值是 Promise。
参数 config 为对象，具体说明如下：
属性 说明 类型 默认值
title 通知提醒的标题 String -
desc 通知提醒的内容，为空或不填时，自动应用仅标题模式下的样式 String -
duration 自动关闭的延时，单位秒，不关闭可以写 0 Number 4.5
key 当前通知的唯一标识 String | Number -
closable 是否显示关闭按钮 Boolean true
style 自定义内联样式 String -
className 自定义 CSS class String -
dangerouslyUseHTMLString 是否将 title 或 desc 属性作为 HTML 片段处理 Boolean false
icon 自定义图标 String -
onClose 点击默认关闭按钮时触发的回调函数 Function -
onClick 点击通知时触发的回调函数 Function -
全局方法 还提供了全局配置、全局关闭某个通知和全局销毁的方法：
Rabbit.Notice.config(options)Rabbit.Notice.close(key)Rabbit.Notice.destroy()
属性 说明 类型 默认值
top 通知组件距离顶端的距离，单位像素 Number 24
duration 默认自动关闭的延时，单位秒 Number 4.5
================================================
FILE: site/src/examples-code/components/notice/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/notice/Closable.vue
================================================
================================================
FILE: site/src/examples-code/components/notice/Promise.vue
================================================
================================================
FILE: site/src/examples-code/components/notice/Time.vue
================================================
================================================
FILE: site/src/examples-code/components/notice/Type.vue
================================================
================================================
FILE: site/src/examples-code/components/notice/UseHTML.vue
================================================
================================================
FILE: site/src/examples-code/components/notice/index.ts
================================================
import Basic from './Basic.vue'
import Type from './Type.vue'
import Time from './Time.vue'
import Promise from './Promise.vue'
import UseHTML from './UseHTML.vue'
import Closable from './Closable.vue'
import APITable from './APITable.vue'
export { Basic, Type, Time, Promise, UseHTML, Closable, APITable }
================================================
FILE: site/src/examples-code/components/page-header/APITable.vue
================================================
PageHeader 属性 说明 默认值 title 自定义标题文字 - sub-title 自定义的二级标题文字 -
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 page-header，必须是选择器名称或者元素名 String
该方法返回以下值：
返回值 说明 类型 默认值 events 非响应式API，添加提示框的事件， Function -
events的参数 options 为对象，具体说明如下：
================================================
FILE: site/src/examples-code/components/page-header/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/page-header/index.ts
================================================
import Basic from './Basic.vue'
import APITable from './APITable.vue'
export { Basic, APITable }
================================================
FILE: site/src/examples-code/components/poptip/APITable.vue
================================================
Poptip
属性 说明 默认值
trigger
触发方式，可选值为 hover（悬停） click（点击） focus（聚焦）,在 confirm 模式下，只有 click 有效
click
title 显示的标题 -
content
显示的正文内容，只在非 confirm 模式下有效-
-
placement
提示框出现的位置，可选值为 top 、top-start 、top-end 、bottom 、bottom-start 、bottom-end 、left
、left-start、 left-end 、right、 right-start、 right-end，支持自动识别 auto
top
width
宽度，最小宽度为 150px，在 confirm 模式下，默认最大宽度为 300px
-
confirm 是否开启对话框模式 false
disabled 是否禁用 false
ok-text
确定按钮的文字，只在 confirm 模式下有效
确定
cancel-text
取消按钮的文字，只在 confirm 模式下有效
取消
padding 自定义间距值 8px 16px
offset 出现位置的偏移量 0
visible 1.4.0提示框是否显示或隐藏 false
Config 方法
配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型
el 配置当前选定的 poptip，必须是选择器名称或者元素名 String
该方法返回以下三个值：
titlecontentdisabledvisibleevents(options)
返回值 说明 类型 默认值
title 响应式设置提示框标题 String | Number -
content 响应式设置提示框的内容 String | Number -
disabled 1.4.0响应式设置提示框是否禁用 Boolean false
visible 1.4.0响应式设置提示框是否显示和隐藏 Boolean false
events 非响应式API，添加提示框的事件 Function -
events的参数 options 为对象，具体说明如下：
属性 说明 回调参数
onPopperShow 1.4.0在提示框显示时触发 无
onPopperHide 1.4.0在提示框消失时触发 无
onOK
点击确定的回调，只在 confirm 模式下有效
无
onCancel
点击取消的回调，只在 confirm 模式下有效
无
================================================
FILE: site/src/examples-code/components/poptip/AutoNewLine.vue
================================================
================================================
FILE: site/src/examples-code/components/poptip/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/poptip/Complex.vue
================================================
================================================
FILE: site/src/examples-code/components/poptip/Confirm.vue
================================================
================================================
FILE: site/src/examples-code/components/poptip/Disabled.vue
================================================
================================================
FILE: site/src/examples-code/components/poptip/InsideClosed.vue
================================================
================================================
FILE: site/src/examples-code/components/poptip/Placement.vue
================================================
================================================
FILE: site/src/examples-code/components/poptip/index.ts
================================================
import Basic from './Basic.vue'
import Placement from './Placement.vue'
import InsideClosed from './InsideClosed.vue'
import Disabled from './Disabled.vue'
import Complex from './Complex.vue'
import AutoNewLine from './AutoNewLine.vue'
import Confirm from './Confirm.vue'
import APITable from './APITable.vue'
export { Basic, Placement, InsideClosed, Disabled, Complex, AutoNewLine, Confirm, APITable }
================================================
FILE: site/src/examples-code/components/progress/APITable.vue
================================================
Progress 属性 说明 默认值 percent 百分比 0 status 状态，可选值为 normal、 active、 wrong、 success、 warningnormal stroke-width 进度条的线宽，单位 px 10 stroke-color 进度条的颜色，传入格式为数组，显示为渐变色 - show-text 隐藏数值或状态图标 false success-percent 已完成的分段百分比 0 text-inside 百分比是否置于进度条内 false
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 progress，必须是选择器名称或者元素名 String
该方法返回以下值：
返回值 说明 类型 默认值 percent 响应式设置或更新进度条百分比 Number - successPercent 响应式设置或更新已完成的分段百分比 Number -
使用示例 进度条的进度不可能是固定不变的，这就需要在异步场景下使用组件内置的方法 config(el).percent 进行设置，以 jQuery 的 ajax 为例：
================================================
FILE: site/src/examples-code/components/progress/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/progress/FDJDT.vue
================================================
================================================
FILE: site/src/examples-code/components/progress/Percent.vue
================================================
================================================
FILE: site/src/examples-code/components/progress/StrokeColor.vue
================================================
================================================
FILE: site/src/examples-code/components/progress/index.ts
================================================
import Basic from './Basic.vue'
import FDJDT from './FDJDT.vue'
import Percent from './Percent.vue'
import StrokeColor from './StrokeColor.vue'
import APITable from './APITable.vue'
export { Basic, FDJDT, Percent, StrokeColor, APITable }
================================================
FILE: site/src/examples-code/components/radio/APITable.vue
================================================
Radio
属性 说明 默认值
checked 单个是否选中 false
label
只在组合使用时有效。指定当前选项的 value
值，组合会自动判断当前选择的项目
-
disabled 是否禁用当前项 false
size
单选框的尺寸，可选值为 large， small 或者不设置
-
border 是否显示边框 false
icon 设置前缀图标 -
RadioGroup
属性 说明 默认值
value 指定当前选中的项目数据 -
type
可选值为 button 或不填，为 button 时使用按钮样式
-
button-style 按钮样式，可选值为 solid -
size
单选框的尺寸，可选值为 large， small 或者不设置
-
direction
是否垂直排列，按钮样式下无效，可选值为 vertical
-
Config 方法
配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型
el 配置当前选定的 radio，必须是选择器名称或者元素名 String
该方法返回以下三个值：
checkedvalueevents(options)
返回值 说明 类型 默认值
checked 响应式设置单个是否选中 Boolean -
value 响应式设置 radio-group 当前选中的项目数据 String -
events 非响应式API，添加 Radio 的事件， Function -
events的参数 options 为对象，具体说明如下：
属性 说明 回调参数
onChange
在选项状态发生改变时触发，当选中的配置目标是 radio-group
时，则返回一个对象，为当前选中的项，如果是单个 radio
则返回当前选中状态
(state: boolean | item:object) => void
================================================
FILE: site/src/examples-code/components/radio/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/radio/Border.vue
================================================
================================================
FILE: site/src/examples-code/components/radio/Button.vue
================================================
================================================
FILE: site/src/examples-code/components/radio/ButtonStyle.vue
================================================
================================================
FILE: site/src/examples-code/components/radio/Disabled.vue
================================================
================================================
FILE: site/src/examples-code/components/radio/Group.vue
================================================
================================================
FILE: site/src/examples-code/components/radio/Size.vue
================================================
================================================
FILE: site/src/examples-code/components/radio/Vertical.vue
================================================
================================================
FILE: site/src/examples-code/components/radio/index.ts
================================================
import Basic from './Basic.vue'
import Size from './Size.vue'
import Disabled from './Disabled.vue'
import Border from './Border.vue'
import Button from './Button.vue'
import ButtonStyle from './ButtonStyle.vue'
import Vertical from './Vertical.vue'
import Group from './Group.vue'
import APITable from './APITable.vue'
export { Basic, Size, Disabled, Border, Button, ButtonStyle, Vertical, Group, APITable }
================================================
FILE: site/src/examples-code/components/result/403.vue
================================================
================================================
FILE: site/src/examples-code/components/result/404.vue
================================================
================================================
FILE: site/src/examples-code/components/result/500.vue
================================================
================================================
FILE: site/src/examples-code/components/result/APITable.vue
================================================
Result
属性 说明 默认值
status
结果的状态，决定图标和颜色。可选值为 success、 error、 info 、 warning 、 404、 403、 500
info
title 标题文字 -
subtitle 结果描述 -
extra 操作区，建议放置按钮组 -
icon 自定义图标 -
================================================
FILE: site/src/examples-code/components/result/CustomIcon.vue
================================================
================================================
FILE: site/src/examples-code/components/result/Error.vue
================================================
================================================
FILE: site/src/examples-code/components/result/Info.vue
================================================
================================================
FILE: site/src/examples-code/components/result/Success.vue
================================================
================================================
FILE: site/src/examples-code/components/result/Warning.vue
================================================
================================================
FILE: site/src/examples-code/components/result/index.ts
================================================
import Info from './Info.vue'
import Success from './Success.vue'
import Warning from './Warning.vue'
import Error from './Error.vue'
import F03 from './403.vue'
import F04 from './404.vue'
import FV500 from './500.vue'
import CustomIcon from './CustomIcon.vue'
import APITable from './APITable.vue'
export { Info, Success, Warning, Error, F03, F04, FV500, CustomIcon, APITable }
================================================
FILE: site/src/examples-code/components/skeleton/APITable.vue
================================================
Skeleton 属性 说明 默认值 active 是否展示动画效果 false avatar 是否显示头像占位图 false paragraph 是否显示段落占位图 true title 是否显示标题占位图 true title-width 设置标题占位图的宽度 - paragraph-rows 设置段落占位图的行数 - paragraph-width 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是首行的宽度 - avatar-size 设置头像占位图的大小，可选值为 small、 largelarge avatar-shape 指定头像的形状，可选值为 circle、 squarecircle
================================================
FILE: site/src/examples-code/components/skeleton/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/skeleton/Complex.vue
================================================
================================================
FILE: site/src/examples-code/components/skeleton/Custom.vue
================================================
================================================
FILE: site/src/examples-code/components/skeleton/Loading.vue
================================================
================================================
FILE: site/src/examples-code/components/skeleton/WithAnimation.vue
================================================
================================================
FILE: site/src/examples-code/components/skeleton/index.ts
================================================
import Basic from './Basic.vue'
import Custom from './Custom.vue'
import Complex from './Complex.vue'
import Loading from './Loading.vue'
import WithAnimation from './WithAnimation.vue'
import APITable from './APITable.vue'
export { Basic, Custom, Complex, Loading, WithAnimation, APITable }
================================================
FILE: site/src/examples-code/components/spin/APITable.vue
================================================
Spin
属性 说明 默认值
size
Spin尺寸，可选值为 large和 small或者不设置
-
fix
是否固定，需要父级有 relative或 absolute
-
================================================
FILE: site/src/examples-code/components/spin/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/spin/ChangeState.vue
================================================
================================================
FILE: site/src/examples-code/components/spin/CustomContent.vue
================================================
================================================
FILE: site/src/examples-code/components/spin/FixCenter.vue
================================================
================================================
FILE: site/src/examples-code/components/spin/FullScreen.vue
================================================
================================================
FILE: site/src/examples-code/components/spin/Size.vue
================================================
================================================
FILE: site/src/examples-code/components/spin/index.ts
================================================
import Basic from './Basic.vue'
import Size from './Size.vue'
import FixCenter from './FixCenter.vue'
import CustomContent from './CustomContent.vue'
import ChangeState from './ChangeState.vue'
import FullScreen from './FullScreen.vue'
import APITable from './APITable.vue'
export { Basic, Size, FixCenter, CustomContent, ChangeState, FullScreen, APITable }
================================================
FILE: site/src/examples-code/components/steps/APITable.vue
================================================
Steps 整体步骤条
属性 说明 默认值 current 当前步骤，从 0 开始计数 0 status 当前步骤的状态，可选值为 wait、 process、 finish、 errorprocess size 步骤条的尺寸，可选值为 small或者不写 - direction 步骤条的方向，可选值为 horizontal（水平）或 vertical（垂直） horizontal
Step 子项步骤
属性 说明 默认值 status 步骤的状态，可选值为 wait、 process、 finish、 error，不设置时自动判断 process title 标题 - content 步骤的详细描述，可选 - icon 步骤的图标，可选 -
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 steps，必须是选择器名称或者元素名 String
该方法返回以下值：
currentstatustitlecontentitemStatus返回值 说明 类型 默认值 current 响应式设置或更新当前步骤 Number 0 status 响应式设置或更新当前步骤的状态，可选值为 wait、 process、 finish、 errorString process title 响应式设置或更新 title String - content 响应式设置或更新 content String - itemStatus 响应式设置或更新每一个子项步骤的状态 Array -
================================================
FILE: site/src/examples-code/components/steps/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/steps/ChangeStep.vue
================================================
================================================
FILE: site/src/examples-code/components/steps/Error.vue
================================================
================================================
FILE: site/src/examples-code/components/steps/Mini.vue
================================================
================================================
FILE: site/src/examples-code/components/steps/Vertical.vue
================================================
================================================
FILE: site/src/examples-code/components/steps/WithIcon.vue
================================================
================================================
FILE: site/src/examples-code/components/steps/index.ts
================================================
import Basic from './Basic.vue'
import Error from './Error.vue'
import Mini from './Mini.vue'
import Vertical from './Vertical.vue'
import WithIcon from './WithIcon.vue'
import ChangeStep from './ChangeStep.vue'
import APITable from './APITable.vue'
export { Basic, Error, Mini, Vertical, WithIcon, ChangeStep, APITable }
================================================
FILE: site/src/examples-code/components/switch/APITable.vue
================================================
Switch 属性 说明 默认值 checked 指定当前是否选中 false size 开关的尺寸，可选值为 large、 small、 default或者不写。建议开关如果使用了2个汉字的文字，使用 large。 default disabled 禁用开关 false true-color 自定义打开时的背景色 - false-color 自定义关闭时的背景色 - loading 加载中的开关 false open 自定义显示打开时的内容 - close 自定义显示关闭时的内容 -
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 switch，必须是选择器名称或者元素名 String
该方法返回以下值：
checkeddisabledloadingevents(options)返回值 说明 类型 默认值 checked 响应式设置或更新当前是否选中状态 Boolean - disabled 响应式设置或更新禁用开关状态 Boolean - loading 响应式设置或更新加载中的开关状态 Boolean - events 非响应式API，添加开关事件 Function -
events的参数 options 为对象，具体说明如下： 属性 说明 回调参数 onChange 开关变化时触发，返回当前的状态 (checked: boolean) => void
================================================
FILE: site/src/examples-code/components/switch/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/switch/CustomColor.vue
================================================
================================================
FILE: site/src/examples-code/components/switch/Disabled.vue
================================================
================================================
FILE: site/src/examples-code/components/switch/Loading.vue
================================================
================================================
FILE: site/src/examples-code/components/switch/Size.vue
================================================
================================================
FILE: site/src/examples-code/components/switch/TextAndIcon.vue
================================================
================================================
FILE: site/src/examples-code/components/switch/index.ts
================================================
import Basic from './Basic.vue'
import Size from './Size.vue'
import Loading from './Loading.vue'
import Disabled from './Disabled.vue'
import CustomColor from './CustomColor.vue'
import TextAndIcon from './TextAndIcon.vue'
import APITable from './APITable.vue'
export { Basic, Size, Loading, Disabled, CustomColor, TextAndIcon, APITable }
================================================
FILE: site/src/examples-code/components/tabs/APITable.vue
================================================
Tabs
属性 说明 默认值
active-index 初始化选中面板的 index 第一个面板
type
页签的基本样式，可选值为 line 和 card
line
size
尺寸，可选值为 default 和 small，仅在 type="line" 时有效
default
closable
是否可以关闭页签，仅在 type="card" 时有效
false
animated 是否使用动画切换 Tabs true
Tabs-pane
属性 说明 默认值
index 用于标识当前面板，对应 defaultActiveKey，默认为其索引值 index
tab 选项卡头显示文字 空
icon 选项卡图标 -
disabled 是否禁用该选项卡 false
closable
是否可以关闭页签，仅在 type="card" 时有效
-
Config 方法
配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型
el 配置当前选定的 tabs，必须是选择器名称或者元素名 String
该方法返回以下两个值：
activeIndexevents(options)
返回值 说明 类型 默认值
activeIndex 响应式设置当前激活面板的 index String -
events 非响应式API，添加选项卡事件， Function -
events的参数 options 为对象，具体说明如下：
属性 说明 回调参数
onClick tab 被点击时触发 (index: string) => void
onTabRemove tab 被关闭时触发 (index: string) => void
================================================
FILE: site/src/examples-code/components/tabs/Animated.vue
================================================
================================================
FILE: site/src/examples-code/components/tabs/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/tabs/CardType.vue
================================================
================================================
FILE: site/src/examples-code/components/tabs/Closable.vue
================================================
================================================
FILE: site/src/examples-code/components/tabs/CustomStyle.vue
================================================
================================================
FILE: site/src/examples-code/components/tabs/Disabled.vue
================================================
================================================
FILE: site/src/examples-code/components/tabs/Small.vue
================================================
================================================
FILE: site/src/examples-code/components/tabs/WithIcon.vue
================================================
================================================
FILE: site/src/examples-code/components/tabs/index.ts
================================================
import Basic from './Basic.vue'
import WithIcon from './WithIcon.vue'
import Small from './Small.vue'
import Disabled from './Disabled.vue'
import CardType from './CardType.vue'
import Closable from './Closable.vue'
import Animated from './Animated.vue'
import CustomStyle from './CustomStyle.vue'
import APITable from './APITable.vue'
export { Basic, WithIcon, Small, Disabled, CardType, Closable, Animated, CustomStyle, APITable }
================================================
FILE: site/src/examples-code/components/tag/APITable.vue
================================================
Tag 属性 说明 默认值 closable 标签是否可以关闭 false checkable 标签是否可以选择 false checked 标签的选中状态 true type 标签的样式类型，可选值为 border、 dot或不填 - color 标签颜色，预设颜色值为 default、 primary、 success、 warning、 error、 blue、 green、 red、 yellow、 pink、 magenta、 volcano、 orange、 gold、 lime、 cyan、 geekblue、 purple，也可以自定义颜色值。 default size 尺寸，可选值为 large、medium -
Config 方法 配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型 el 配置当前选定的 tag，必须是选择器名称或者元素名 String
该方法返回以下值：
返回值 说明 类型 默认值 events 非响应式API，添加标签事件， Function -
events的参数 options 为对象，具体说明如下： 属性 说明 回调参数 onClose 关闭时触发 ($this: element) => void onChange 切换选中状态时触发 (checked: boolean) => void
================================================
FILE: site/src/examples-code/components/tag/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/tag/CanSelect.vue
================================================
================================================
FILE: site/src/examples-code/components/tag/Colors.vue
================================================
================================================
FILE: site/src/examples-code/components/tag/Size.vue
================================================
================================================
FILE: site/src/examples-code/components/tag/StyleTypes.vue
================================================
================================================
FILE: site/src/examples-code/components/tag/index.ts
================================================
import Basic from './Basic.vue'
import Size from './Size.vue'
import StyleTypes from './StyleTypes.vue'
import Colors from './Colors.vue'
import CanSelect from './CanSelect.vue'
import APITable from './APITable.vue'
export { Basic, Size, StyleTypes, Colors, CanSelect, APITable }
================================================
FILE: site/src/examples-code/components/time/APITable.vue
================================================
Time 属性 说明 默认值 time 需要对比的时间，可以是时间戳或 Date 类型 - type 类型，可选值为 relative、date 或 datetime relative interval 自动更新的间隔，单位：秒 60 hash 填写该值，点击会定位锚点 -
改变语言配置 (全局) 在 NodeJs 或者 Webpack 环境下，要改变全局语言配置，只需调用实例的内置函数 locale，并引入 Day.js 的语言文件来自由切换其他语言。
支持的语言列表
================================================
FILE: site/src/examples-code/components/time/AutoUpdate.vue
================================================
================================================
FILE: site/src/examples-code/components/time/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/time/Types.vue
================================================
================================================
FILE: site/src/examples-code/components/time/WithAnchor.vue
================================================
================================================
FILE: site/src/examples-code/components/time/index.ts
================================================
import Basic from './Basic.vue'
import AutoUpdate from './AutoUpdate.vue'
import Types from './Types.vue'
import WithAnchor from './WithAnchor.vue'
import APITable from './APITable.vue'
export { Basic, AutoUpdate, Types, WithAnchor, APITable }
================================================
FILE: site/src/examples-code/components/timeline/APITable.vue
================================================
Timeline 属性 说明 默认值 pending 指定是否最后一个节点为幽灵节点 -
Timeline-item 属性 说明 默认值 color 圆圈颜色，可选值为 blue、 red、 green、 gray，或自定义色值 blue dot 自定义时间轴点 -
================================================
FILE: site/src/examples-code/components/timeline/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/timeline/Colors.vue
================================================
================================================
FILE: site/src/examples-code/components/timeline/Custom.vue
================================================
================================================
FILE: site/src/examples-code/components/timeline/Pending.vue
================================================
================================================
FILE: site/src/examples-code/components/timeline/index.ts
================================================
import Basic from './Basic.vue'
import Colors from './Colors.vue'
import Custom from './Custom.vue'
import Pending from './Pending.vue'
import APITable from './APITable.vue'
export { Basic, Colors, Custom, Pending, APITable }
================================================
FILE: site/src/examples-code/components/tooltip/APITable.vue
================================================
Tooltip
属性 说明 默认值
content 显示的内容 空
placement
提示框出现的位置，可选值为 top``top-start``top-end``bottom``bottom-start``bottom-end``left``left-start``left-end``right``right-start``right-end，自动识别
top
disabled 是否禁用提示框 false
delay 延迟显示，单位毫秒 -
always 是否总是可见 false
theme 1.1.0背景颜色 dark
max-width
最大宽度，超出最大值后，文本将自动换行，并两端对齐
-
offset 出现位置的偏移量 0
Config 方法
配置指定的组件，并提供一些必要的响应式更新DOM内容或其他操作的
API。（并不是每个组件都会有）
参数 说明 类型
el 配置当前选定的 tooltip，必须是选择器名称或者元素名 String
该方法返回以下四个值：
contentdisabledalwaysevents(options)
返回值 说明 类型 默认值
content 响应式设置或更新提示框的内容 String | Number -
disabled 1.1.0响应式设置是否禁用提示框 Boolean false
always 1.1.0响应式设置是否总是可见 Boolean false
events 非响应式API，添加提示框的事件 Function -
events的参数 options 为对象，具体说明如下：
属性 说明 回调参数
onVisibleChange 1.1.0
显示隐藏的回调 (visible: boolean) => void
================================================
FILE: site/src/examples-code/components/tooltip/AutoNewLine.vue
================================================
================================================
FILE: site/src/examples-code/components/tooltip/Basic.vue
================================================
================================================
FILE: site/src/examples-code/components/tooltip/CustomContent.vue
================================================
================================================
FILE: site/src/examples-code/components/tooltip/Delay.vue
================================================
================================================
FILE: site/src/examples-code/components/tooltip/Disabled.vue
================================================
================================================
FILE: site/src/examples-code/components/tooltip/Placement.vue
================================================
================================================
FILE: site/src/examples-code/components/tooltip/Theme.vue
================================================
================================================
FILE: site/src/examples-code/components/tooltip/index.ts
================================================
import Basic from './Basic.vue'
import Delay from './Delay.vue'
import Theme from './Theme.vue'
import Disabled from './Disabled.vue'
import Placement from './Placement.vue'
import AutoNewLine from './AutoNewLine.vue'
import CustomContent from './CustomContent.vue'
import APITable from './APITable.vue'
export { Basic, Delay, Theme, Disabled, Placement, AutoNewLine, CustomContent, APITable }
================================================
FILE: site/src/examples-code/docs/install/CDNAZ.vue
================================================
================================================
FILE: site/src/examples-code/docs/install/SL.vue
================================================
================================================
FILE: site/src/examples-code/docs/install/index.ts
================================================
import CDNAZ from './CDNAZ.vue'
import SL from './SL.vue'
export { CDNAZ, SL }
================================================
FILE: site/src/examples-code/docs/introduce/AZ.vue
================================================
================================================
FILE: site/src/examples-code/docs/introduce/AZ2.vue
================================================
================================================
FILE: site/src/examples-code/docs/introduce/SL.vue
================================================
================================================
FILE: site/src/examples-code/docs/introduce/index.ts
================================================
import AZCode from './AZ.vue'
import AZCode2 from './AZ2.vue'
import SLCode from './SL.vue'
export { AZCode, AZCode2, SLCode }
================================================
FILE: site/src/examples-code/docs/start/Code1.vue
================================================
================================================
FILE: site/src/examples-code/docs/start/Code2.vue
================================================
================================================
FILE: site/src/examples-code/docs/start/Code3.vue
================================================
================================================
FILE: site/src/examples-code/docs/start/index.ts
================================================
import Code1 from './Code1.vue'
import Code2 from './Code2.vue'
import Code3 from './Code3.vue'
export { Code1, Code2, Code3 }
================================================
FILE: site/src/main.ts
================================================
import { createApp } from 'vue'
import Routers from './routers'
import Antd from './plugins/antd'
import App from '@/App.vue'
const app = createApp(App)
const usePlugins = (plugins: [...any]) => plugins.forEach((plugin) => app.use(plugin))
app.use(Routers)
usePlugins(Antd)
app.mount('#app')
================================================
FILE: site/src/markdown.css
================================================
:root {
--bg-color: #ffffff;
--text-color: #333333;
--select-text-bg-color: #b5d6fc;
--select-text-font-color: auto;
--monospace: Consolas, Menlo, Courier, monospace;
--title-bar-height: 20px;
}
#write {
margin: 0px auto;
height: auto;
width: inherit;
word-break: normal;
overflow-wrap: break-word;
position: relative;
white-space: normal;
overflow-x: visible;
padding-top: 36px;
}
#write.first-line-indent p {
text-indent: 2em;
}
#write.first-line-indent li p,
#write.first-line-indent p * {
text-indent: 0px;
}
#write.first-line-indent li {
margin-left: 2em;
}
.for-image #write {
padding-left: 8px;
padding-right: 8px;
}
@media screen and (max-width: 500px) {
#write {
padding-left: 20px;
padding-right: 20px;
}
.CodeMirror-sizer {
margin-left: 0px !important;
}
.CodeMirror-gutters {
display: none !important;
}
}
#write li>figure:last-child {
margin-bottom: 0.5rem;
}
#write ol,
#write ul {
position: relative;
}
#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6,
#write p,
#write pre {
width: inherit;
}
#write h1,
#write h2,
#write h3,
#write h4,
#write h5,
#write h6,
#write p {
position: relative;
}
.md-math-block,
.md-rawblock,
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin-top: 1rem;
margin-bottom: 1rem;
}
.hidden {
display: none;
}
.md-blockmeta {
color: rgb(204, 204, 204);
font-weight: 700;
font-style: italic;
}
sup.md-footnote {
padding: 2px 4px;
background-color: rgba(238, 238, 238, 0.7);
color: rgb(85, 85, 85);
border-radius: 4px;
cursor: pointer;
}
sup.md-footnote a,
sup.md-footnote a:hover {
color: inherit;
text-transform: inherit;
text-decoration: inherit;
}
#write input[type='checkbox'] {
cursor: pointer;
width: inherit;
height: inherit;
}
table.md-table td {
min-width: 32px;
}
.CodeMirror-gutters {
border-right: 0px;
background-color: inherit;
}
.CodeMirror-linenumber {
user-select: none;
}
.CodeMirror {
text-align: left;
}
.CodeMirror-placeholder {
opacity: 0.3;
}
.CodeMirror pre {
padding: 0px 4px;
}
.CodeMirror-lines {
padding: 0px;
}
div.hr:focus {
cursor: none;
}
#write pre {
white-space: pre-wrap;
}
#write.fences-no-line-wrapping pre {
white-space: pre;
}
#write pre.ty-contain-cm {
white-space: normal;
}
.CodeMirror-gutters {
margin-right: 4px;
}
.md-fences {
font-size: 0.9rem;
display: block;
break-inside: avoid;
text-align: left;
overflow: visible;
white-space: pre;
background: inherit;
position: relative !important;
}
.md-diagram-panel {
width: 100%;
margin-top: 10px;
text-align: center;
padding-top: 0px;
padding-bottom: 8px;
overflow-x: auto;
}
#write .md-fences.mock-cm {
white-space: pre-wrap;
}
.md-fences.md-fences-with-lineno {
padding-left: 0px;
}
#write.fences-no-line-wrapping .md-fences.mock-cm {
white-space: pre;
overflow-x: auto;
}
.md-fences.mock-cm.md-fences-with-lineno {
padding-left: 8px;
}
.CodeMirror-line,
twitterwidget {
break-inside: avoid;
}
.footnotes {
opacity: 0.8;
font-size: 0.9rem;
margin-top: 1em;
margin-bottom: 1em;
}
.footnotes+.footnotes {
margin-top: 0px;
}
.md-reset {
margin: 0px;
padding: 0px;
border: 0px;
outline: 0px;
vertical-align: top;
background: 0px 0px;
text-decoration: none;
text-shadow: none;
float: none;
position: static;
width: auto;
height: auto;
white-space: nowrap;
cursor: inherit;
-webkit-tap-highlight-color: transparent;
line-height: normal;
font-weight: 400;
text-align: left;
box-sizing: content-box;
direction: ltr;
}
blockquote {
margin: 1rem 0px;
}
li .mathjax-block,
blockquote> :last-child {
margin-bottom: 0px;
}
.footnotes-area {
color: rgb(136, 136, 136);
margin-top: 0.714rem;
padding-bottom: 0.143rem;
white-space: normal;
}
#write .footnote-line {
white-space: pre-wrap;
}
.footnote-line {
margin-top: 0.714em;
font-size: 0.7em;
}
pre.md-meta-block {
font-size: 0.8rem;
min-height: 0.8rem;
white-space: pre-wrap;
background: rgb(204, 204, 204);
display: block;
overflow-x: hidden;
}
p>.md-image:only-child:not(.md-img-error) img,
p>img:only-child {
display: block;
margin: auto;
}
#write.first-line-indent p>.md-image:only-child:not(.md-img-error) img {
left: -2em;
position: relative;
}
p>.md-image:only-child {
display: inline-block;
width: 100%;
}
#write .MathJax_Display {
margin: 0.8em 0px 0px;
}
.md-math-block {
width: 100%;
}
.md-math-block:not(:empty)::after {
display: none;
}
.MathJax_ref {
fill: currentcolor;
}
[contenteditable='true']:active,
[contenteditable='true']:focus,
[contenteditable='false']:active,
[contenteditable='false']:focus {
outline: 0px;
box-shadow: none;
}
.md-task-list-item {
position: relative;
list-style-type: none;
}
.task-list-item.md-task-list-item {
padding-left: 0px;
}
.md-task-list-item>input {
position: absolute;
top: 0px;
left: 0px;
margin-left: -1.2em;
margin-top: calc(1em - 10px);
border: none;
}
.math {
font-size: 1rem;
}
.md-toc {
min-height: 3.58rem;
position: relative;
font-size: 0.9rem;
border-radius: 10px;
}
.md-toc-content {
position: relative;
margin-left: 0px;
}
.md-toc-content::after,
.md-toc::after {
display: none;
}
.md-toc-item {
display: block;
color: rgb(65, 131, 196);
}
.md-toc-item a {
text-decoration: none;
}
.md-toc-inner:hover {
text-decoration: underline;
}
.md-toc-inner {
display: inline-block;
cursor: pointer;
}
.md-toc-h1 .md-toc-inner {
margin-left: 0px;
font-weight: 700;
}
.md-toc-h2 .md-toc-inner {
margin-left: 2em;
}
.md-toc-h3 .md-toc-inner {
margin-left: 4em;
}
.md-toc-h4 .md-toc-inner {
margin-left: 6em;
}
.md-toc-h5 .md-toc-inner {
margin-left: 8em;
}
.md-toc-h6 .md-toc-inner {
margin-left: 10em;
}
@media screen and (max-width: 48em) {
.md-toc-h3 .md-toc-inner {
margin-left: 3.5em;
}
.md-toc-h4 .md-toc-inner {
margin-left: 5em;
}
.md-toc-h5 .md-toc-inner {
margin-left: 6.5em;
}
.md-toc-h6 .md-toc-inner {
margin-left: 8em;
}
}
a.md-toc-inner {
font-size: inherit;
font-style: inherit;
font-weight: inherit;
line-height: inherit;
}
.footnote-line a:not(.reversefootnote) {
color: inherit;
}
.md-attr {
display: none;
}
.md-fn-count::after {
content: '.';
}
code,
pre,
samp,
tt {
font-family: var(--monospace);
}
kbd {
margin: 0px 0.1em;
padding: 0.1em 0.6em;
font-size: 0.8em;
color: rgb(36, 39, 41);
background: rgb(255, 255, 255);
border: 1px solid rgb(173, 179, 185);
border-radius: 3px;
box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset;
white-space: nowrap;
vertical-align: middle;
}
.md-comment {
color: rgb(162, 127, 3);
opacity: 0.8;
font-family: var(--monospace);
}
code {
text-align: left;
vertical-align: initial;
}
a.md-print-anchor {
white-space: pre !important;
border-width: initial !important;
border-style: none !important;
border-color: initial !important;
display: inline-block !important;
position: absolute !important;
width: 1px !important;
right: 0px !important;
outline: 0px !important;
background: 0px 0px !important;
text-decoration: initial !important;
text-shadow: initial !important;
}
.md-inline-math .MathJax_SVG .noError {
display: none !important;
}
.html-for-mac .inline-math-svg .MathJax_SVG {
vertical-align: 0.2px;
}
.md-math-block .MathJax_SVG_Display {
text-align: center;
margin: 0px;
position: relative;
text-indent: 0px;
max-width: none;
max-height: none;
min-height: 0px;
min-width: 100%;
width: auto;
overflow-y: hidden;
display: block !important;
}
.MathJax_SVG_Display,
.md-inline-math .MathJax_SVG_Display {
width: auto;
margin: inherit;
display: inline-block !important;
}
.MathJax_SVG .MJX-monospace {
font-family: var(--monospace);
}
.MathJax_SVG .MJX-sans-serif {
font-family: sans-serif;
}
.MathJax_SVG {
display: inline;
font-style: normal;
font-weight: 400;
line-height: normal;
zoom: 90%;
text-indent: 0px;
text-align: left;
text-transform: none;
letter-spacing: normal;
word-spacing: normal;
overflow-wrap: normal;
white-space: nowrap;
float: none;
direction: ltr;
max-width: none;
max-height: none;
min-width: 0px;
min-height: 0px;
border: 0px;
padding: 0px;
margin: 0px;
}
.MathJax_SVG * {
transition: none 0s ease 0s;
}
.MathJax_SVG_Display svg {
vertical-align: middle !important;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
.md-diagram-panel>svg {
max-width: 100%;
}
[lang='flow'] svg,
[lang='mermaid'] svg {
max-width: 100%;
height: auto;
}
[lang='mermaid'] .node text {
font-size: 1rem;
}
.highlight td,
.highlight tr {
border: 0px;
}
mark {
background: rgb(255, 255, 0);
color: #525252;
}
.md-html-inline .md-plain,
.md-html-inline strong,
mark .md-inline-math,
mark strong {
color: inherit;
}
mark .md-meta {
color: #525252;
opacity: 0.3 !important;
}
.md-diagram-panel .messageText {
stroke: none !important;
}
.md-diagram-panel .start-state {
fill: var(--node-fill);
}
.md-diagram-panel .edgeLabel rect {
opacity: 1 !important;
}
.md-require-zoom-fix foreignobject {
font-size: var(--mermaid-font-zoom);
}
.CodeMirror {
height: auto;
}
.CodeMirror.cm-s-inner {
background: inherit;
}
.CodeMirror-scroll {
overflow: auto hidden;
z-index: 3;
}
.CodeMirror-gutter-filler,
.CodeMirror-scrollbar-filler {
background-color: rgb(255, 255, 255);
}
.CodeMirror-gutters {
border-right: 1px solid rgb(221, 221, 221);
background: inherit;
white-space: nowrap;
}
.CodeMirror-linenumber {
padding: 0px 3px 0px 5px;
text-align: right;
color: rgb(153, 153, 153);
}
.cm-s-inner .cm-keyword {
color: #708;
}
.cm-s-inner .cm-atom,
.cm-s-inner.cm-atom {
color: #fc1e70;
}
.cm-s-inner .cm-number {
color: #fc1e70;
}
.cm-s-inner .cm-def {
color: rgb(0, 0, 255);
}
.cm-s-inner .cm-variable {
color: #e96900;
}
.cm-s-inner .cm-variable-2 {
color: rgb(0, 85, 170);
}
.cm-s-inner .cm-variable-3 {
color: rgb(0, 136, 85);
}
.cm-s-inner .cm-string {
color: #42b983;
}
.cm-s-inner .cm-property {
color: #9b1dea;
}
.cm-s-inner .cm-operator {
color: #55585e;
}
.cm-s-inner .cm-comment,
.cm-s-inner.cm-comment {
color: #b3b3b3;
}
.cm-s-inner .cm-string-2 {
color: rgb(255, 85, 0);
}
.cm-s-inner .cm-meta {
color: rgb(85, 85, 85);
}
.cm-s-inner .cm-qualifier {
color: rgb(85, 85, 85);
}
.cm-s-inner .cm-builtin {
color: rgb(51, 0, 170);
}
.cm-s-inner .cm-bracket {
color: rgb(153, 153, 119);
}
.cm-s-inner .cm-tag {
color: #3e76f6;
}
.cm-s-inner .cm-attribute {
color: #e96900;
}
.cm-s-inner .cm-header,
.cm-s-inner.cm-header {
color: rgb(0, 0, 255);
}
.cm-s-inner .cm-quote,
.cm-s-inner.cm-quote {
color: rgb(0, 153, 0);
}
.cm-s-inner .cm-hr,
.cm-s-inner.cm-hr {
color: rgb(153, 153, 153);
}
.cm-s-inner .cm-link,
.cm-s-inner.cm-link {
color: rgb(0, 0, 204);
}
.cm-negative {
color: rgb(221, 68, 68);
}
.cm-positive {
color: rgb(34, 153, 34);
}
.cm-header,
.cm-strong {
font-weight: 700;
}
.cm-del {
text-decoration: line-through;
}
.cm-em {
font-style: italic;
}
.cm-link {
text-decoration: underline;
}
.cm-error {
color: red;
}
.cm-invalidchar {
color: red;
}
.cm-constant {
color: rgb(38, 139, 210);
}
.cm-defined {
color: rgb(181, 137, 0);
}
div.CodeMirror span.CodeMirror-matchingbracket {
color: rgb(0, 255, 0);
}
div.CodeMirror span.CodeMirror-nonmatchingbracket {
color: rgb(255, 34, 34);
}
.cm-s-inner .CodeMirror-activeline-background {
background: inherit;
}
.CodeMirror {
position: relative;
overflow: hidden;
}
.CodeMirror-scroll {
height: 100%;
outline: 0px;
position: relative;
box-sizing: content-box;
background: inherit;
}
.CodeMirror-sizer {
position: relative;
}
.CodeMirror-gutter-filler,
.CodeMirror-hscrollbar,
.CodeMirror-scrollbar-filler,
.CodeMirror-vscrollbar {
position: absolute;
z-index: 6;
display: none;
}
.CodeMirror-vscrollbar {
right: 0px;
top: 0px;
overflow: hidden;
}
.CodeMirror-hscrollbar {
bottom: 0px;
left: 0px;
overflow: hidden;
}
.CodeMirror-scrollbar-filler {
right: 0px;
bottom: 0px;
}
.CodeMirror-gutter-filler {
left: 0px;
bottom: 0px;
}
.CodeMirror-gutters {
position: absolute;
left: 0px;
top: 0px;
padding-bottom: 30px;
z-index: 3;
}
.CodeMirror-gutter {
white-space: normal;
height: 100%;
box-sizing: content-box;
padding-bottom: 30px;
margin-bottom: -32px;
display: inline-block;
}
.CodeMirror-gutter-wrapper {
position: absolute;
z-index: 4;
background: 0px 0px !important;
border: none !important;
}
.CodeMirror-gutter-background {
position: absolute;
top: 0px;
bottom: 0px;
z-index: 4;
}
.CodeMirror-gutter-elt {
position: absolute;
cursor: default;
z-index: 4;
}
.CodeMirror-lines {
cursor: text;
}
.CodeMirror pre {
border-radius: 0px;
border-width: 0px;
background: 0px 0px;
font-family: inherit;
font-size: inherit;
margin: 0px;
white-space: pre;
overflow-wrap: normal;
color: inherit;
z-index: 2;
position: relative;
overflow: visible;
}
.CodeMirror-wrap pre {
overflow-wrap: break-word;
white-space: pre-wrap;
word-break: normal;
}
.CodeMirror-code pre {
border-right: 30px solid transparent;
width: fit-content;
}
.CodeMirror-wrap .CodeMirror-code pre {
border-right: none;
width: auto;
}
.CodeMirror-linebackground {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: 0;
}
.CodeMirror-linewidget {
position: relative;
z-index: 2;
overflow: auto;
}
.CodeMirror-wrap .CodeMirror-scroll {
overflow-x: hidden;
}
.CodeMirror-measure {
position: absolute;
width: 100%;
height: 0px;
overflow: hidden;
visibility: hidden;
}
.CodeMirror-measure pre {
position: static;
}
.CodeMirror div.CodeMirror-cursor {
position: absolute;
visibility: hidden;
border-right: none;
width: 0px;
}
.CodeMirror div.CodeMirror-cursor {
visibility: hidden;
}
.CodeMirror-focused div.CodeMirror-cursor {
visibility: inherit;
}
.cm-searching {
background: rgba(255, 255, 0, 0.4);
}
@media print {
.CodeMirror div.CodeMirror-cursor {
visibility: hidden;
}
}
:root {
--side-bar-bg-color: #fafafa;
--control-text-color: #777;
}
@include-when-export url(https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);
/* open-sans-regular - latin-ext_latin */
/* open-sans-italic - latin-ext_latin */
/* open-sans-700 - latin-ext_latin */
/* open-sans-700italic - latin-ext_latin */
#write {
max-width: 860px;
margin: 0 auto;
padding: 30px;
padding-bottom: 100px;
}
@media only screen and (min-width: 1400px) {
#write {
max-width: 1024px;
}
}
@media only screen and (min-width: 1800px) {
#write {
max-width: 1200px;
}
}
#write>ul:first-child,
#write>ol:first-child {
margin-top: 30px;
}
blockquote {
border-left: 4px solid #dfe2e5;
padding: 0 15px;
color: #777777;
}
blockquote blockquote {
padding-right: 0;
}
.CodeMirror-lines {
padding-left: 4px;
}
.code-tooltip {
box-shadow: 0 1px 1px 0 rgba(0, 28, 36, 0.3);
border-top: 1px solid #eef2f2;
}
.md-fences,
code,
tt {
background-color: #f5f5f5;
padding: 0;
padding: 2px 4px 0px 4px;
font-size: 0.95em;
}
code {
background-color: #f3f4f4;
padding: 0 2px 0 2px;
}
.md-fences {
font-size: 14px;
overflow: auto;
margin: 16px 0;
padding: 12px;
}
.md-task-list-item>input {
margin-left: -1.3em;
}
h4 {
font-size: 1.25em;
margin-top: 1rem;
margin-bottom: 1rem;
font-weight: bold;
line-height: 1.4;
}
figure {
overflow-x: auto;
margin: 1.2em 0px;
max-width: calc(100% + 16px);
padding: 0px;
}
figure>table {
margin: 0px;
}
tr {
break-inside: avoid;
break-after: auto;
}
thead {
display: table-header-group;
}
table {
border-collapse: collapse;
border-spacing: 0px;
width: 100%;
overflow: auto;
break-inside: auto;
text-align: left;
}
table.md-table td {
min-width: 32px;
}
table tr th {
border-bottom: 0px;
}
table {
margin: 0.8em 0;
padding: 0;
word-break: initial;
}
table tr {
border-top: 1px solid #dfe2e5;
margin: 0;
padding: 0;
}
table tr:nth-child(2n),
thead {
background-color: #f8f8f8;
}
table th {
font-weight: bold;
border: 1px solid #dfe2e5;
border-bottom: 0;
margin: 0;
padding: 6px 13px;
}
table td {
border: 1px solid #dfe2e5;
margin: 0;
padding: 6px 13px;
}
table th:first-child,
table td:first-child {
margin-top: 0;
}
table th:last-child,
table td:last-child {
margin-bottom: 0;
}
@media print {
pre {
word-wrap: break-word;
}
}
.md-fences {
background-color: #f8f8f8;
}
#write pre.md-meta-block {
padding: 1rem;
font-size: 85%;
line-height: 1.45;
background-color: #f7f7f7;
border: 0;
border-radius: 3px;
color: #777777;
margin-top: 0 !important;
}
.mathjax-block>.code-tooltip {
bottom: 0.375rem;
}
.md-mathjax-midline {
background: #fafafa;
}
#write>h3.md-focus:before {
left: -1.5625rem;
top: 0.375rem;
}
#write>h4.md-focus:before {
left: -1.5625rem;
top: 0.285714286rem;
}
#write>h5.md-focus:before {
left: -1.5625rem;
top: 0.285714286rem;
}
#write>h6.md-focus:before {
left: -1.5625rem;
top: 0.285714286rem;
}
.md-image>.md-meta {
/*border: 1px solid #ddd;*/
border-radius: 3px;
padding: 2px 0px 0px 4px;
font-size: 0.9em;
color: inherit;
}
.md-tag {
color: #a7a7a7;
opacity: 1;
}
.md-toc {
margin-top: 20px;
padding-bottom: 20px;
}
.sidebar-tabs {
border-bottom: none;
}
#typora-quick-open {
border: 1px solid #ddd;
background-color: #f8f8f8;
}
#typora-quick-open-item {
background-color: #fafafa;
border-color: #fefefe #e5e5e5 #e5e5e5 #eee;
border-style: solid;
border-width: 1px;
}
/** focus mode */
.on-focus-mode blockquote {
border-left-color: rgba(85, 85, 85, 0.12);
}
.context-menu,
.megamenu-content {
font-family: 'Segoe UI', 'Arial', sans-serif;
}
.file-node-content:hover .file-node-icon,
.file-node-content:hover .file-node-open-state {
visibility: visible;
}
.mac-seamless-mode #typora-sidebar {
background-color: #fafafa;
background-color: var(--side-bar-bg-color);
}
.md-lang {
color: #b4654d;
}
.html-for-mac .context-menu {
--item-hover-bg-color: #e6f0fe;
}
#md-notification .btn {
border: 0;
}
.dropdown-menu .divider {
border-color: #e5e5e5;
}
.ty-preferences .window-content {
background-color: #fafafa;
}
.ty-preferences .nav-group-item.active {
color: white;
background: #999;
}
:root {
--mermaid-font-zoom: 1.25em;
}
================================================
FILE: site/src/pages/app/Index/Index.vue
================================================
================================================
FILE: site/src/pages/app/Index/content/Content.vue
================================================
================================================
FILE: site/src/pages/app/Index/header/Header.vue
================================================
================================================
FILE: site/src/pages/app/Index/header/NavBar.vue
================================================
更多
================================================
FILE: site/src/pages/app/Index/header/NavBarDropdown.vue
================================================
GitHub
================================================
FILE: site/src/pages/app/Index/header/NavMore.vue
================================================
微信
支付宝
QQ (724617944)
================================================
FILE: site/src/pages/app/Index/header/NavRouterLink.vue
================================================
文档
组件
================================================
FILE: site/src/pages/app/Index/sider/Sider.vue
================================================
================================================
FILE: site/src/pages/app/Index/sider/SiderMenu.vue
================================================
{{ item.text }}
{{ item.text }}
================================================
FILE: site/src/pages/app/views/Affix.vue
================================================
当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
页面可视范围过小时，慎用此功能以免遮挡页面内容。
固定在最顶部
基础用法 简单使用，当元素不可见时，直接固定在最顶端。
固定在顶部 50px 的位置
基础用法 当滚动到一定距离时再固定。
固定在底部 20px 的位置
基础用法
在屏幕下方固定，可以通过缩小浏览器窗口高度来查看效果。
注意，offset-top和offset-bottom只可以设置一个，如果都设置，会使用offset-top。
固定在顶部 100px 的位置
基础用法 当固定状态发生改变时，会触发事件。
API
================================================
FILE: site/src/pages/app/views/Alert.vue
================================================
当某个页面需要向用户显示警告的信息时。
非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
基础用法
基本使用方法，有四种样式可以选择info、success、warning、error。
信息提示的内容,信息提示的内容，信息提示的,信息提示的内容,信息提示的内容。
成功提示的内容,成功提示的内容，成功提示的,成功提示的内容,成功提示的内容。
警告提示的内容,警告提示的内容，警告提示的,警告提示的内容,警告提示的内容。
错误提示的内容,错误提示的内容，错误提示的,错误提示的内容,错误提示的内容。
含描述信息
含有辅助性文字介绍的警告提示
信息提示的内容,信息提示的内容，信息提示的,信息提示的内容,信息提示的内容。
成功提示的内容,成功提示的内容，成功提示的,成功提示的内容,成功提示的内容。
警告提示的内容,警告提示的内容，警告提示的,警告提示的内容,警告提示的内容。
错误提示的内容,错误提示的内容，错误提示的,错误提示的内容,错误提示的内容。
自定义图标的内容，自定义图标的内容，自定义图标的内容。
图标
设置 show-icon="true" 并会根据 type 属性自动添加不同图标，或者设置属性
icon 自定义图标。
成功提示的内容,成功提示的内容，成功提示的,成功提示的内容,成功提示的内容。
可关闭
显示关闭按钮，点击可关闭提示，也可以自定义关闭内容
顶部公告
设置属性 banner="true" 可以应用顶部公告的样式。
API
================================================
FILE: site/src/pages/app/views/Avatar.vue
================================================
基础用法
头像有三种尺寸，两种形状可选。
属性 size 可以设置为数值，但不能带任何单位只能是数字
U
USER
U
类型
支持三种类型：图片、icon 以及字符，其中 icon 和字符型可以自定义图标颜色及背景色。
U
Lucy
Tom
Edward
自动调整字符大小
对于字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整。
API
================================================
FILE: site/src/pages/app/views/BackTop.vue
================================================
当页面内容区域比较长时；
当用户需要频繁返回顶部查看相关内容时。
向下滚动页面，灰色的按钮为默认效果。
基础用法 默认位置距离页面右部和底部 30px，滚动至距顶端 400px 时显示。
向下滚动页面，蓝色的按钮为自定义效果。
自定义样式 自定义了位置在页面底部 200px,滚动至距顶端 200px 时显示。
API
返回顶端
================================================
FILE: site/src/pages/app/views/Badge.vue
================================================
一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
基础用法 最简单的使用方法。
可以是一个链接
小红点 强迫症患者慎用！
通过设置overflow-count属性设置一个封顶值，当超过时，会显示
${overflowCount}+
封顶数字
不包裹任何元素即是独立使用，可自定样式展现。在右上角的 badge 则限定为红色。
独立使用及自定义样式 设置text属性，可以自定义显示内容。
自定义内容 设置offset属性，可以自定义徽标的位置
自定义位置 用于表示状态的小圆点。
预设：
自定义：
状态点 属性color可以设置更多预设的状态点颜色，或者自定义颜色。
多彩徽标 使用type属性，可以设置不同的颜色。
API
================================================
FILE: site/src/pages/app/views/Breadcrumb.vue
================================================
当系统拥有超过两级以上的层级结构时；
当需要告知用户『你在哪里』时；
当需要向上导航的功能时。
Home
Components
Breadcrumb
基础用法 最简单的用法。
Breadcrumb
带图标 可自定义每项的内容，比如带有一个图标。
Home
Components
Breadcrumb
Home
Components
Breadcrumb
分隔符
通过设置separator属性来自定义分隔符，比如>，也可以接受自定义的HTML字符串。
API
================================================
FILE: site/src/pages/app/views/Button.vue
================================================
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
默认按钮
主要按钮
虚线按钮
文本按钮
信息按钮
成功按钮
警告按钮
危险按钮
按钮类型
按钮类型有：默认按钮、主按钮、虚线按钮、文字按钮以及四种颜色按钮。
通过添加不同的类名创建不同样式的按钮
默认按钮
主要按钮
虚线按钮
文本按钮
信息按钮
成功按钮
警告按钮
危险按钮
幽灵按钮
幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。
搜索
搜索
圆角按钮
搜索
搜索
圆角按钮
图标按钮及按钮形状
通过设置icon属性在button内嵌入一个icon，或者直接在button内添加i标签。
使用button的icon属性，图标位置将添加在最左边，如果需要自定义位置，则直接在button内添加
i标签。
通过添加类名rab-btn-circle，可将按钮置为圆的形状。
主要按钮
默认按钮
虚线按钮
按钮尺寸
按钮有三种尺寸：大、默认（中）、小
通过添加类名rab-btn-lg和rab-btn-sm将按钮设置为大和小尺寸，不设置为默认（中）尺寸。
提交按钮
删除按钮
长按钮
通过添加类名rab-btn-long可将按钮宽度设置为 100%
使按钮适合其父宽度,常用于弹窗内操作按钮。
默认按钮(禁用)
主要按钮(禁用)
虚线按钮(禁用)
文本按钮(禁用)
不可用状态
通过添加disabled属性可将按钮设置为不可用状态。
Loading...
Click me!
Click me!
加载中状态
通过添加loading="true"属性可以让按钮处于加载中状态
基本
Cancel
Confirm
Yesterday
Today
Tomorrow
L
M
M
R
图标
Backward
Forward
圆角
Backward
Forward
尺寸
Large
Large
Default
Default
Small
Small
Large
Large
Default
Default
Small
Small
按钮组合 实现按钮组合的效果
按钮组纵向排列 按钮组纵向排列
API
================================================
FILE: site/src/pages/app/views/Card.vue
================================================
最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
基础用法
包含标题、内容、操作区域。
注意：标签容器内必须具有一个父元素
这是没有边框类型的卡片这是没有边框类型的卡片这是没有边框类型的卡片这是没有边框类型的卡片
无边框
通过设置属性no-border="true" ，可以不添加边框，建议在灰色背景下使用。
禁用悬停阴影
通过设置属性dis-hover="true"来禁用鼠标悬停显示阴影的效果。
卡片阴影
通过设置属性shadow="true"来显示卡片阴影，使用该属性后，no-border和dis-hover将无效，建议在灰色背景下使用。
一套基于TS构建的UI组件库
简洁卡片 只包含内容区域，没有标题。
API
================================================
FILE: site/src/pages/app/views/Carousel.vue
================================================
当有一组平级的内容。
当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。
常用于一组图片或卡片轮播。
基础用法
最基本的用法。
标签容器下必须具有一个父元素
自动切换
设置属性autoplay="true"可以自动轮播，同时可以设置属性autoplay-speed改变自动播放的速度。
渐显
设置属性effect="fade"切换效果为渐显。
API
================================================
FILE: site/src/pages/app/views/Checkbox.vue
================================================
在一组可选项中进行多项选择时；
单独使用可以表示两种状态之间的切换，和switch类似。区别在于切换
switch
会直接触发状态改变，而checkbox一般用于状态标记，需要和提交操作配合。
Checkbox
基础用法 简单的 checkbox
Twitter
Facebook
Github
Snapchat
苹果
西瓜
猕猴桃
组合使用
使用r-checkbox-group配合数组来生成组合。在组合使用时，r-checkbox使用label来自动判断选中状态。
Checkbox
苹果
西瓜
猕猴桃
不可用 通过设置disabled属性来禁用多选框。
苹果
西瓜
猕猴桃
显示边框 设置属性type="border"可以显示边框。
全选
苹果
西瓜
猕猴桃
全选
在实现全选效果时，你可能会用到indeterminate属性。示例代码只是一种写法。
API
================================================
FILE: site/src/pages/app/views/Circle.vue
================================================
显示某项任务进度的百分比；
统计某些指标的占比。
80%
基础用法 n
圆形进度环有一系列的参数可配置，具体可以查看下面的API文档。
{{ percentText }}%
配合外部组件使用 n通过数据的联动和逻辑控制，实现交互效果。
42,001,776
消费人群规模
总占人数
75%
自定义更多样式
通过自定义内容和丰富的配置，可以组合出很多统计效果。
注意！标签容器下必须具有一个父元素。
80%
仪表盘
通过设置属性dashboard="true"，可以很方便地实现仪表盘样式的进度环。
API
================================================
FILE: site/src/pages/app/views/Collapse.vue
================================================
对复杂区域进行分组和隐藏，保持页面的整洁。
手风琴是一种特殊的折叠面板，只允许单个内容区域展开。
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
基础用法
通过设置属性active-index可以同时展开多个面板，这个例子默认展开了第一个。
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
手风琴
通过设置属性accordion="true"开启手风琴模式，每次只能打开一个面板。
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
简洁风格
设置属性simple="true"可以显示为一套没有边框的简洁样式。
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
隐藏箭头
通过给r-collapse-panel设置属性hide-arrow="true"可以隐藏面板的箭头图标
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
狗是一种家养动物。它以忠诚和忠诚而闻名，在世界各地的许多家庭中，它都是受欢迎的客人。
幽灵折叠面板
通过设置属性ghost="true"将折叠面板的背景变成透明。
API
================================================
FILE: site/src/pages/app/views/Color.vue
================================================
Color 色彩
概述
Rabbit UI
推荐使用以下调色板的颜色作为设计和开发规范，以保证页面和组件之间的视觉一致。
主色
Rabbit UI 使用较为安全的蓝色作为主色调，其中 Light Primary 常用于 hover，Dark
Primary 常用于 active。
辅助色
辅助色是具有代表性的颜色，常用于信息提示，比如成功、警告和失败。
中性色
中性色常用于文本、背景、边框、阴影等，可以体现出页面的层次结构。
================================================
FILE: site/src/pages/app/views/CountDown.vue
================================================
当页面某个部分或功能需要进行倒计时
基础用法
最简单的用法
设置的时间格式为YYYY/MM/DD HH:mm:ss或YYYY-MM-DD HH:mm:ss
API
================================================
FILE: site/src/pages/app/views/Divider.vue
================================================
对不同章节的文本段落进行分割。
对行内文字/链接进行分割，例如表格的操作列。
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
标题居中
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
水平分割线 默认为水平分割线，可在中间加入文字。
文本
链接
链接
垂直分割线 使用type="vertical"设置为行内的垂直分割线。
标题居中
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
右侧标题
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
右侧标题
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
标题位置 修改分割线标题的位置。
标题居中
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
右侧标题
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
右侧标题
从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事从前有座山山里有座庙，庙里有个老和尚给小和尚讲故事
分割文字使用正文样式 使用plain可以设置为更轻量的分割文字样式。
API
================================================
FILE: site/src/pages/app/views/Drawer.vue
================================================
抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。
当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。
当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。
Open
Some contents...
Some contents...
Some contents...
基础用法
Top
Left
Bottom
Right
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
Some contents...
自定义位置
Open Inner
Some contents...
在当前 DOM 内打开
多层抽屉
打开第二层抽屉
这是第二层抽屉。
多层抽屉
API
================================================
FILE: site/src/pages/app/views/Dropdown.vue
================================================
当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
下拉菜单
老干妈
炸酱面
葱油饼
黄金糕
冰糖葫芦
下拉菜单
老干妈
炸酱面
葱油饼
黄金糕
冰糖葫芦
基础用法
最简单的下拉菜单，触发对象可以是链接、按钮等各种元素。
本例还展示了禁用项和分隔线。
hover 触发
老干妈
炸酱面
葱油饼
黄金糕
冰糖葫芦
click 触发
老干妈
炸酱面
葱油饼
黄金糕
冰糖葫芦
右键触发
返回
删除
custom 触发
常用于各种自定义下拉内容的场景。
关闭
触发方式
通过设置属性trigger可以更改触发方式，可选项为 click 、
hover(默认)、contextMenu(右键)
菜单(左)
老干妈
炸酱面
葱油饼
黄金糕
冰糖葫芦
菜单(居中)
老干妈
炸酱面
葱油饼
黄金糕
冰糖葫芦
菜单(右)
老干妈
炸酱面
葱油饼
黄金糕
冰糖葫芦
对齐方向
通过设置属性placement可以更改下拉菜单出现的方向，与 Poptip 和 Tooltip
配置一致，支持 12 个方向，详见 API。
北京小吃
豆汁儿
炸酱面
驴打滚
北京烤鸭
壁炉烤鸭
焖炉烤鸭
冰糖葫芦
嵌套用法 下拉菜单可以进行嵌套实现级联的效果，嵌套时注意设置子集的展开方向。
API
================================================
FILE: site/src/pages/app/views/Empty.vue
================================================
当目前没有数据时，用于显式的用户提示。
初始化场景时的引导创建流程。
简单的展示。
立即创建
自定义
设置属性image自定义图片、desc设置描述、
如果设置附属内容，容器下有且只能由一个父节点
无描述
设置属性desc="false"不显示描述。
API
================================================
FILE: site/src/pages/app/views/FAQ.vue
================================================
常见问题
如果有更多的问题需要提问，请到
Github
仓库提交您宝贵的 issue，我们将其收集到这里展示。
为什么把组件的 HTML 代码放到页面上没有效果？
例如你想使用 Alert 组件，那么你首先要做的事情就是在它需要使用的地方全局初始化一次
new Rabbit.Alert() ，NPM 安装则 new Alert()。
rabbit-ui 在移动端体验不佳。
rabbit-ui 并非针对移动端设计。
当我通过关闭按钮或异步关闭 Message 或 Notice 组件后，为什么其提供的 then
接口的回调事件不生效？
组件提供的
Promise接口是当实例自动关闭时才会触发的，并不是通过任意方式关闭组件都会调用该接口，如果您想通过手动移除消息后接着添加回调事件，请使用
onClose api，至于要在异步移除后添加事件，建议是在异步的那个时机里添加。
为什么通过setAttribute重新赋值，组件的内容或状态没有更新？
因为组件的初始化只有一次，所以用 setAttribute
重新赋值是不会有效果的，考虑到一些场景下需要异步更新，所以我们提供了
config 方法，具体请查看对应组件的 api 文档。
使用组件的 api 时显得有些繁琐。
有一些确实会显得比较繁琐，但是 rabbit-ui 内部帮您封装了一些有限的 DOM
操作，例如DOM元素获取并添加点击事件、鼠标移入移出事件等等，这些都不必您亲自操作。
rabbit-ui 覆盖了我的全局样式！
为了方便，我们覆盖了一些全局样式，尽量做到和
rabbit-ui 的样式统一，避免出现组件 ui 外观异常。
================================================
FILE: site/src/pages/app/views/Icon.vue
================================================
Icon 图标
概述
Rabbit UI 的所有图标均来自于开源图标库
iconfont 。
图标合集
点击下面的图标按钮可以直接复制组件代码
================================================
FILE: site/src/pages/app/views/InputNumber.vue
================================================
当需要获取标准数值时。
基础用法 可以通过输入、鼠标点击或键盘的上下键来改变数值大小。
小数 通过设置step属性控制每次改变的精度。
格式化展示
通过formatter格式化数字，以展示具有具体含义的数据，往往需要配合parser一起使用。
formatter属性的值的字符串格式为：反引号包裹 ${value}。
parser属性的值需为字符串的数组，第一个位置为要匹配替换的内容，第二个位置为替换后的结果；若无该属性则使用默认的匹配规则转换。
尺寸
通过设置size属性为large和small将输入框设置为大和小尺寸，不设置为默认尺寸。
禁用状态
不可用
通过设置disabled="true"属性禁用输入框，点击按钮切换状态。
只读 通过设置readonly="true"属性开启只读。
不可编辑 通过设置editable="false"属性控制是否能编辑。
按钮位置
通过设置controls-outside="true"属性可以将按钮位置置于输入框两侧。
API
================================================
FILE: site/src/pages/app/views/Install.vue
================================================
安装
CDN 引入
我们在 npm 发布包内的 rabbit-simple-ui/dist 目录下提供了 rabbit.js
rabbit.min.js 以及 styles/rabbit.css。你也可以通过
jsDelivr
或
UNPKG
进行下载。
示例
通过 CDN 可以快速使用 Rabbit UI 写出一个示例：
Npm 或 Yarn 安装
我们推荐使用 npm 或 yarn
的方式进行开发，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处，也推荐使用
ES2015。
后续将使用按需引入的方式引入 Rabbit UI，由于源文件使用 TS 编写，因此你将需要使用
TS 编写你的项目代码
如果你的网络环境不佳，推荐使用
cnpm 。
如果您使用了此方式安装，并使用 webpack 作为构建工具，请继续阅读
快速上手 章节。
================================================
FILE: site/src/pages/app/views/Introduce.vue
================================================
关于 Rabbit UI
Rabbit UI ，是一个基于 Javascript 并使用 Typescript 编写的开源 UI
组件库，主要使用于 PC 界面。
Rabbit UI提供的组件 HTML 代码奉行着简洁至上、简单表意、易于分辨的准则。
不知你是否有这样的苦恼，例如 Boostrap ，你想使用一个 Modal 组件但是其提供的 HTML
代码多达十几二十行，再加上自己填充的内容就更不用说了，如果不加注释后期难以找到其位置和分辨，
而rabbit-ui提供的代码仅仅几行，不仅清晰还让你更易分辨。
特性
安装
使用 npm 或 yarn 安装
注意：请先阅读安装 章节！
浏览器引入
在浏览器中使用 script 和
link 标签直接引入文件，并使用全局变量 Rabbit。
示例
效果
模拟进度条
重置
版本
兼容
支持所有能运行 Javascript 的地方
支持与其他的 UI 库或框架一起使用
支持 TypeScript
支持现代浏览器和 Internet Explorer 10+
相关链接
================================================
FILE: site/src/pages/app/views/Jumbotron.vue
================================================
当需要展示巨大的标题和段落时使用。
它使用实用程序类来排版和空格，以便在较大的容器中分隔内容。
了解更多
基础用法 最简单的用法，如果添加额外内容则标签容器下必须具有一个父元素
外观 通过设置属性type切换外观背景色
API
================================================
FILE: site/src/pages/app/views/LoadingBar.vue
================================================
LoadingBar 加载进度条
特别提醒： 非 NPM 环境下调用实例方法必须添加Rabbit前缀，反之则无需。
概述
全局创建一个显示页面加载、异步请求、文件上传等的加载进度条。
说明
LoadingBar
只会在全局创建一个，因此在任何位置调用的方法都会控制这同一个组件。主要使用场景是路由切换和Ajax，因为这两者都不能拿到精确的进度，LoadingBar
会模拟进度，当然也可以通过update()方法来传入一个精确的进度，比如在文件上传时会很有用，具体见API。
在路由中使用
在异步请求中使用
开始
完成
错误
基本用法
点击 Start 开始进度，点击 Finish
结束。在调用start()方法后，组件会自动模拟进度，当调用finish()或error()时，补全进度并自动消失。
API
================================================
FILE: site/src/pages/app/views/Message.vue
================================================
可提供成功、警告和错误等反馈信息。
顶部居中显示并自动消失，是一种不打断用户操作的轻量级提示方式。
显示普通提示
普通提示 最基本的提示，默认在3秒后消失。
显示成功提示
显示警告提示
显示错误提示
提示类型 包括成功、失败、警告。
显示普通提示
显示成功提示
显示警告提示
显示错误提示
带背景色
设置属性background为true后，通知提示会显示背景色。
显示加载中...
加载中
进行全局 loading，异步自行移除。需要手动调用destroy方法关闭
显示一个Promise的提示
Promise 接口
可以通过 then 接口在关闭后运行 callback 。以上用例将在每个 Message
将要结束时通过 then 显示新的 Message 。
如果手动通过关闭按钮结束则无效。
显示一个10秒的提示
自定义时长
自定义时长，也可以在config中全局配置，详见API。
显示可关闭的提示
可关闭 设置closable为 true 后可以手动关闭提示。
使用 HTML 片段
使用 HTML 片段 传入 HTML 片段
content属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML
是非常危险的，因为容易导致XSS 攻击
。因此在dangerouslyUseHTMLString
打开的情况下，请确保content的内容是可信的，永远不要 将用户提交的内容赋值给content属性。
API
================================================
FILE: site/src/pages/app/views/MiniModal.vue
================================================
当需要一个简洁的确认框询问用户时。
消息
成功
警告
错误
基础用法 四种基本的对话框，只提供一个确定按钮。
标准
自定义按钮文字
异步关闭
确认对话框
快速弹出确认对话框，并且可以自定义按钮文字及异步关闭。
将dangerouslyUseHTMLString属性设置为
true，content就会被当作 HTML 片段处理。
title 和 content属性虽然支持传入 HTML
片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致
XSS 攻击 。因此在dangerouslyUseHTMLString 打开的情况下，请确保content
的内容是可信的，永远不要 将用户提交的内容赋值给content
属性。
API
Modal instance
通过直接调用以下方法来使用：
Rabbit.MiniModal.info(config)Rabbit.MiniModal.success(config)Rabbit.MiniModal.warning(config)Rabbit.MiniModal.error(config)
================================================
FILE: site/src/pages/app/views/Modal.vue
================================================
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用Modal
在当前页面正中打开一个浮层，承载相应的操作。
另外当需要一个简洁的确认框询问用户时，可以使用MiniModal.confirm()。
显示对话框
基础用法
最简单的使用方法，设置属性visable为 true/false 来显示/隐藏对话框。
可以使用config方法提供的 APIvisible动态控制显示隐藏。
默认按键盘ESC键也可以关闭。
注意！容器内的节点必须具有一个父元素。
不带标题栏
国际化
设置宽度
Some Content...
Some Content...
Some Content...
自定义宽度，单位 px，默认 520px。
对话框的宽度是响应式的，当屏幕尺寸小于 768px 时，宽度会变为自动
auto。
自定义外观 控制是否显示标题栏、自定义按钮文字、自定义宽度。
异步关闭
点击确定后，对话框将在 2秒 后关闭。
异步关闭
设置属性loading="true"后，点击确定按钮对话框不会自动消失，并显示
loading 状态，需要手动关闭对话框，常用于表单提交。
禁用右上角关闭(含Esc键)
禁用遮罩层关闭
禁用关闭 可以禁用关闭和遮罩层关闭
垂直居中
距离顶部20px
自定义位置
可以自定义 Modal 的对话框样式 以及 对话框 Wrap 的 class
名称，从而实现更多自定义的样式，比如垂直居中。
显示全屏对话框
这是一个全屏的对话框
全屏
设置属性fullscreen可以全屏显示。
设置属性footer-hide可以隐藏底部内容。
API
================================================
FILE: site/src/pages/app/views/Notice.vue
================================================
较为复杂的通知内容。
带有交互的通知，给出用户下一步的行动点。
系统主动推送。
打开提醒
基础用法
基本用法，默认在 4.5秒后关闭。如果desc
参数为空或不填，则自动应用仅标题模式下的样式。
建议标题言简意赅，例如"删除成功"，更详细的内容可以放在描述信息里。
带描述信息
消息
成功
警告
错误
仅标题
消息
成功
警告
错误
提醒类型
带有状态图标的提醒。
带描述信息和仅标题。
打开提醒
自定义时长 自定义时长，为 0 则不自动关闭。
打开提醒
Promise 接口
可以通过 then 接口在关闭后运行 callback 。以上用例将在每个 Notice 将要结束时通过
then 显示新的 Notice 。
如果手动通过关闭按钮结束则无效。
打开提醒
使用 HTML 片段
title和desc属性支持传入 HTML 片段
将dangerouslyUseHTMLString属性设置为 true， 就会被当作 HTML
片段处理。
desc属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML
是非常危险的，因为容易导致XSS 攻击
。因此在dangerouslyUseHTMLString
打开的情况下，请确保desc的内容是可信的，永远不要 将用户提交的内容赋值给desc属性。
打开提醒
隐藏关闭按钮
设置属性closable为false可以不显示关闭按钮
API
================================================
FILE: site/src/pages/app/views/PageHeader.vue
================================================
当需要使用户快速理解当前页是什么以及方便用户使用页面功能时使用，通常也可被用作页面间导航。
标准样式
标准页头，适合使用在需要简单描述的场景。
API
================================================
FILE: site/src/pages/app/views/Poptip.vue
================================================
当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
和Tooltip类似，具有很多相同配置，不同点是Poptip
以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
Poptip还confirm确认框，与Modal不同的是，它会出现在就近元素，相对轻量。
hover 激活
click 激活
focus 激活
基础用法 支持三种触发方式：鼠标悬停、点击、聚焦。默认是点击。
上左
上边
上右
下左
下边
下右
位置
组件提供了12个不同的方向显示Poptip，具体配置可查看API。
Click 激活
从浮层内关闭
通过 config 方法提供的visibleapi 来控制提示框的显示和隐藏。
禁用提示
禁用提示 通过设置属性disabled="true"禁止显示提示框
复杂内容
嵌套复杂内容 实现复杂的内容。
长文本
自动换行
设置属性word-wrap，当超出宽度后，文本将自动换行，并两端对齐。
删除
国际化
确认框
通过设置属性confirm开启确认框模式。确认框只会以 click
的形式激活，并且只会显示 title 的内容，忽略 content。
API
================================================
FILE: site/src/pages/app/views/Progress.vue
================================================
在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。
当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
当需要显示一个操作完成的百分比时。
基础用法 标准的进度条。
百分比内显
设置属性text-inside="true"可以将百分比显示在进度条内部。
需要通过属性stroke-width设置一个足够的高度。
渐变色
设置属性stroke-color为数组时，可以显示为渐变色。
数组只能设置为两项。
分段进度条
标准的分段进度条。
API
================================================
FILE: site/src/pages/app/views/Radio.vue
================================================
用于在多个备选项中选中单个状态。
和 Select 的区别是，Radio
所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
Radio
单独使用 最简单的用法。
Apple
Android
Windows
金斑蝶
爪哇犀牛
印度黑羚
组合使用
使用r-radio-group实现一组互斥的选项组。在组合使用时，radio使用label来自动判断。每个
radio 的内容可以自定义。
设置属性icon可以添加前缀图标。
Radio
金斑蝶
爪哇犀牛
印度黑羚
不可用 通过设置属性disabled来禁用单选框。
Apple
Android
Windows
垂直
设置属性direction="vertical"可以垂直显示，按钮样式下无效。
北京
上海
深圳
杭州
北京
上海
深圳
杭州
北京
上海
深圳
杭州
按钮样式
组合使用时可以设置属性type="button"为来应用按钮的样式。
北京
上海
深圳
杭州
北京
上海
深圳
杭州
填底的按钮样式
设置属性button-style="solid"可显示为实色填底的单选按钮样式。
金斑蝶
爪哇犀牛
印度黑羚
显示边框 radio 设置属性type="border"可以显示边框。
北京
上海
深圳
杭州
北京
上海
深圳
杭州
北京
上海
深圳
杭州
尺寸
通过设置属性size为large或small将按钮样式设置为大和小尺寸，不设置为默认(中)尺寸。
API
================================================
FILE: site/src/pages/app/views/Result.vue
================================================
当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。
Success 成功的结果
Info 展示处理结果
Warning 警告类型的结果
Error
复杂的错误反馈。
注意：标签容器内必须具有一个父元素！
403
404
500
自定义图标
API
================================================
FILE: site/src/pages/app/views/Skeleton.vue
================================================
网络较慢，需要长时间等待加载处理的情况下。
图文信息内容较多的列表/卡片中。
只在第一次加载数据的时候使用。
可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。
基础用法 最简单的占位效果。
复杂组合 带有头像占位图的组合。
动画效果 显示动画效果。
自定义段落占位图的宽度
设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度
Vue.js, the progressive javascript framework
An incrementally adoptable ecosystem that scales between a library and a
full-featured framework. Blazing Fast Virtual DOM Minimal Optimization Efforts
显示骨架图
加载占位图 配合其他元素使用
API
================================================
FILE: site/src/pages/app/views/Spin.vue
================================================
页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
基础用法 最简单使用 Spin 的方法。
各种尺寸
居中固定
加载中...
Loading...
自定义内容
登金陵凤凰台
李白
凤凰台上凤凰游，凤去台空江自流。
吴宫花草埋幽径，晋代衣冠成古丘。
三山半落青天外，二水中分白鹭洲。
总为浮云能蔽日，长安不见使人愁。
状态切换
整页显示，3秒后关闭
自定义显示内容
整页加载
API
================================================
FILE: site/src/pages/app/views/Sponsor.vue
================================================
赞助 RabbitUI 的开发
Rabbit UI 是采用 MIT 许可的开源项目，使用完全免费。
但为了项目能够健康持续的发展下去，我们期望获得相应的资金支持。
你可以通过下列的方法来赞助我们的开发。
一次性赞助
你可以通过以下任意一种方式赞助:
支付宝
微信
================================================
FILE: site/src/pages/app/views/Start.vue
================================================
快速开始
在开始之前，推荐先学习 TypeScript 和 ES2015，并正确安装和配置了
Node.js 。 官方指南假设你已了解关于
HTML、CSS 、JavaScript 和 TypeScript 的基础知识。如果你刚开始学习前端，将 UI
库作为你的第一步可能不是最好的主意。
引入 RabbitUI
一般会想到在 webpack 入口页面
main.ts
中直接引入整个包，但请不要这样做，在你需要用到的页面的对应 ts
文件中引入对应组件的构造函数，配置如下：
方式一
从源文件路径引入
方式二
按需引用，借助插件
babel-plugin-import
可以实现按需加载组件，减少文件体积。首先安装，并在文件 .babelrc 中配置：
然后这样按需引入组件，就可以减小体积了：
特别提醒
按需引用仍然需要导入样式，即在 main.ts 或根组件执行
import 'rabbit-simple-ui/dist/styles/rabbit.css';
================================================
FILE: site/src/pages/app/views/Steps.vue
================================================
当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
基础用法 基本用法，组件会根据current自动判断各步骤状态。
迷你版 设置属性size="small"启用迷你版。
带图标的步骤条 通过设置r-step的icon属性可以自定义图标。
下一步
切换步骤 通常配合内容及按钮使用，表示一个流程的处理进度。
垂直方向 设置属性direction="vertical"为在垂直方向展示。
步骤运行错误
设置r-steps的属性status="error"为指定当前步骤状态。
API
================================================
FILE: site/src/pages/app/views/Switch.vue
================================================
需要表示开关状态/两种状态之间的切换时
和checkbox的区别是，切换switch会直接触发状态改变，而checkbox一般用于状态标记，需要和提交操作配合
基础用法 基本用法，状态切换时会触发事件。
尺寸
设置size为large或small使用大号和小号的开关。
文字和图标
设置属性open和close自定义切换状态后显示的内容，建议如果使用2个汉字，将开关尺寸设置为
large。
不可用 设置属性disabled="true"禁用开关
加载中 设置属性loading="true"标识开关操作仍在执行中。
自定义颜色
设置属性true-color和false-color可以自定义背景色。
API
================================================
FILE: site/src/pages/app/views/Tabs.vue
================================================
提供平级的区域将大块内容进行收纳和展现，保持界面整洁。
卡片式的页签，提供可关闭的样式，常用于容器顶部。
标准线条式页签，用于容器内部的主功能切换，这是最常用的 Tabs。
标签一的内容
标签二的内容
标签三的内容
基础用法
active-index与r-tab-pane的index对应，用于标识当前激活的是哪一项，key
值默认从 0 开始，默认激活第一项。可以使用提供的config方法返回的
activeIndex进行动态改变
标签一的内容
标签二的内容
标签三的内容
图标 通过设置属性icon，可以显示一个图标。
标签一的内容
标签二的内容
标签三的内容
迷你型
设置属性size="small"可以显示为迷你型，只在type="line"时有效。
标签一的内容
标签二的内容
标签三的内容
禁用 禁用某一项。
标签一的内容
标签二的内容
标签三的内容
卡片样式
设置属性type="card"可以显示卡片样式，常用于容器顶部。
标签一的内容
标签二的内容
标签三的内容
可关闭
通过设置属性closable可以关闭某一项，仅在type="card"时有效。
当设置了可关闭后，面板的切换将不使用切换动画。
标签一的内容
标签二的内容
标签三的内容
不使用动画 通过设置属性animated="fasle"可以禁用动画。
标签一的内容
标签二的内容
标签三的内容
标签一的内容
标签二的内容
标签三的内容
其它样式 可以根据业务自定义 UI，需要一点额外的样式覆盖。
API
================================================
FILE: site/src/pages/app/views/Tag.vue
================================================
用于标记事物的属性和维度。
进行分类。
标签一
标签二
标签三
基础用法
简单的展示，添加属性closable="true"可以关闭标签。
点击关闭标签时，可以使用onClose方法添加回调事件
标签三
标签四
标签一
标签二
基础用法
通过设置type属性为border或dot来选择不同的样式类型。建议有关闭的某些场景下使用
border，图例的场景下使用 dot。
default
primary
success
error
warning
magenta
red
volcano
orange
gold
yellow
lime
green
cyan
blue
geekblue
purple
Custom Color
标签一
标签二
标签三
标签四
标签一
标签二
标签三
标签四
基础用法
多种预设颜色，可自定义颜色。
标签一
标签二
标签三
标签四
基础用法
设置属性checkable="true"，可以对标签进行选择，属性 `checked`
控制当前选择状态。
默认标签
中号标签
大号标签
基础用法
设置属性size可以显示不同尺寸的标签。
API
================================================
FILE: site/src/pages/app/views/Time.vue
================================================
基础用法
属性time设置一个时间戳或 Date，可自动转为相对于当前的时间。
自动更新间隔 设置自动更新间隔，默认为 60 秒。
不同类型 设置属性type可以根据情况，设置不同的显示类型。
锚点 设置hash属性，相对时间可以点击并定位锚点。
API
================================================
FILE: site/src/pages/app/views/Timeline.vue
================================================
当有一系列信息需按时间排列时，可正序和倒序。
需要有一条时间轴进行视觉上的串联时。
1976s
第一代苹果问世
1984s
发布麦金塔电脑
2007s
发布 iPhone
2010s
发布 iPad
2011.10.05
史蒂夫·乔布斯去世
基础用法 最简单定义一个时间轴的用法。
发布1.0版本
发布2.0版本
重大Bug
推迟发布
发布3.0版本
圆圈颜色
圆圈颜色，绿色用于已完成、成功状态，红色表示告警或错误状态，灰色表示当前任务状态停滞或取消，蓝色可表示正在进行或其他默认状态。
2021-04-01 创建服务器网站
2021-04-01 解决了初始化网络问题
2021-04-01 技术人员进行测试
查看更多
最后一个
通过添加属性pending="true"来标记最后一个为幽灵节点，标识还未完成。
发布里程碑版本
发布1.0版本
发布2.0版本
发布3.0版本
自定义时间轴点 可根据实际场景⾃定义节点
API
================================================
FILE: site/src/pages/app/views/Tooltip.vue
================================================
鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
可用来代替系统默认的 ‘title’ 提示，提供一个’按钮/文字/操作’的文案解释。
鼠标经过这段文字时，会显示一个气泡框
基础用法 最简单的用法
上左
上边
上右
下左
下边
下右
位置 组件提供了12个不同的方向显示Tooltip，具体配置可查看API。
多行
自定义内容
如果需要添加带有HTML代码或其他复杂的内容，抑或是需要动态更新内容，请使用组件提供的响应式API渲染
禁用提示
禁用 通过设置属性disabled可以禁用文字提示。
延时1秒显示
延时
通过设置属性delay可以延时显示文字提示，单位毫秒。
Dark(default)
Light
pink
red
yellow
orange
cyan
green
blue
purple
geekblue
magenta
volcano
gold
lime
主题
设置属性theme可以显示不同的颜色。
有多种预设色彩的文字提示样式，用作不同场景使用。
长文本
自动换行
设置属性max-width，当超出最大值后，文本将自动换行，并两端对齐。
API
================================================
FILE: site/src/pages/app/views/Update.vue
================================================
更新日志
rabbit-simple-ui 严格遵循
Semantic Versioning 2.0.0
语义化版本规范。
发布周期
修订版本号：日常 bugfix 更新
次版本号：带有新特性的向下兼容的版本。
主版本号：含有破坏性更新和新特性，不在发布周期内。
{{ item.version }}
{{ item.time }}
================================================
FILE: site/src/pages/home/Home.vue
================================================
Rabbit UI
一个基于 JavaScript 的简洁 UI 组件库
================================================
FILE: site/src/pages/index.ts
================================================
import HomePage from './home/Home.vue'
import AppPage from './app/Index/Index.vue'
export { HomePage, AppPage }
================================================
FILE: site/src/plugins/antd.ts
================================================
import {
Button,
Select,
Row,
Col,
Menu,
Dropdown,
Popover,
Drawer,
Anchor,
Card
} from 'ant-design-vue'
export default [Button, Select, Row, Col, Menu, Dropdown, Popover, Drawer, Anchor, Card]
================================================
FILE: site/src/router-link-list.ts
================================================
interface A {
text: string
path: string
}
export const DOCSLIST: A[] = [
{ text: '介绍', path: '/docs/introduce' },
{ text: '安装', path: '/docs/install' },
{ text: '快速上手', path: '/docs/start' },
{ text: '常见问题', path: '/docs/faq' },
{ text: '支持我们', path: '/docs/sponsor' },
{ text: '更新日志', path: '/docs/update' }
]
export const COMPONENTSLIST: A[] = [
{ text: 'Affix 图钉', path: '/components/affix' },
{ text: 'Alert 警告提示', path: '/components/alert' },
{ text: 'Avatar 头像', path: '/components/avatar' },
{ text: 'BackTop 返回顶部', path: '/components/back-top' },
{ text: 'Badge 徽标', path: '/components/badge' },
{ text: 'Breadcrumb 面包屑', path: '/components/breadcrumb' },
{ text: 'Button 按钮', path: '/components/button' },
{ text: 'Card 卡片', path: '/components/card' },
{ text: 'Carousel 走马灯', path: '/components/carousel' },
{ text: 'Checkbox 多选框', path: '/components/checkbox' },
{ text: 'Circle 进度环', path: '/components/circle' },
{ text: 'Collapse 折叠面板', path: '/components/collapse' },
{ text: 'Color 色彩', path: '/components/color' },
{ text: 'CountDown 倒计时', path: '/components/count-down' },
{ text: 'Divider 分割线', path: '/components/divider' },
{ text: 'Drawer 抽屉', path: '/components/drawer' },
{ text: 'Dropdown 下拉菜单', path: '/components/dropdown' },
{ text: 'Empty 空状态', path: '/components/empty' },
{ text: 'Icon 图标', path: '/components/icon' },
{ text: 'InputNumber 数字输入框', path: '/components/input-number' },
{ text: 'Jumbotron 巨幕', path: '/components/jumbotron' },
{ text: 'LoadingBar 加载进度条', path: '/components/loading-bar' },
{ text: 'Message 全局提示', path: '/components/message' },
{ text: 'MiniModal 轻量提示框', path: '/components/mini-modal' },
{ text: 'Modal 模态框', path: '/components/modal' },
{ text: 'Notice 通知提醒框', path: '/components/notice' },
{ text: 'PageHeader 页头', path: '/components/page-header' },
{ text: 'Poptip 气泡提示', path: '/components/poptip' },
{ text: 'Progress 进度条', path: '/components/progress' },
{ text: 'Radio 单选框', path: '/components/radio' },
{ text: 'Result 结果', path: '/components/result' },
{ text: 'Skeleton 骨架屏', path: '/components/skeleton' },
{ text: 'Spin 加载中', path: '/components/spin' },
{ text: 'Steps 步骤条', path: '/components/steps' },
{ text: 'Switch 开关', path: '/components/switch' },
{ text: 'Tabs 选项卡', path: '/components/tabs' },
{ text: 'Tag 标签', path: '/components/tag' },
{ text: 'Time 相对时间', path: '/components/time' },
{ text: 'Timeline 时间轴', path: '/components/timeline' },
{ text: 'Tooltip 文字提示', path: '/components/tooltip' }
]
================================================
FILE: site/src/routers/index.ts
================================================
import { createRouter, createWebHistory } from 'vue-router'
import Loading from '../../../src/components/loading-bar'
const routerHistory = createWebHistory()
const router = createRouter({
history: routerHistory,
routes: [
{
path: '/',
meta: {
title: 'Rabbit UI - 一个基于 JavaScript 的简洁 UI 组件库'
},
component: () => import('@/App.vue')
},
{
path: '/docs',
redirect: '/'
},
{
path: '/components',
redirect: '/'
},
{
path: '/docs/introduce',
meta: {
title: '介绍'
},
component: () => import('pages/app/views/Introduce.vue')
},
{
path: '/docs/install',
meta: {
title: '安装'
},
component: () => import('pages/app/views/Install.vue')
},
{
path: '/docs/start',
meta: {
title: '快速上手'
},
component: () => import('pages/app/views/Start.vue')
},
{
path: '/docs/update',
meta: {
title: '更新日志'
},
component: () => import('pages/app/views/Update.vue')
},
{
path: '/docs/sponsor',
meta: {
title: '支持我们'
},
component: () => import('pages/app/views/Sponsor.vue')
},
{
path: '/docs/faq',
meta: {
title: '常见问题'
},
component: () => import('pages/app/views/FAQ.vue')
},
{
path: '/components/affix',
meta: {
title: '图钉'
},
component: () => import('pages/app/views/Affix.vue')
},
{
path: '/components/alert',
meta: {
title: '警告提示'
},
component: () => import('pages/app/views/Alert.vue')
},
{
path: '/components/avatar',
meta: {
title: '头像'
},
component: () => import('pages/app/views/Avatar.vue')
},
{
path: '/components/back-top',
meta: {
title: '返回顶部'
},
component: () => import('pages/app/views/BackTop.vue')
},
{
path: '/components/badge',
meta: {
title: '徽标'
},
component: () => import('pages/app/views/Badge.vue')
},
{
path: '/components/breadcrumb',
meta: {
title: '面包屑'
},
component: () => import('pages/app/views/Breadcrumb.vue')
},
{
path: '/components/button',
meta: {
title: '按钮'
},
component: () => import('pages/app/views/Button.vue')
},
{
path: '/components/card',
meta: {
title: '卡片'
},
component: () => import('pages/app/views/Card.vue')
},
{
path: '/components/carousel',
meta: {
title: '走马灯'
},
component: () => import('pages/app/views/Carousel.vue')
},
{
path: '/components/checkbox',
meta: {
title: '复选框'
},
component: () => import('pages/app/views/Checkbox.vue')
},
{
path: '/components/circle',
meta: {
title: '进度坏'
},
component: () => import('pages/app/views/Circle.vue')
},
{
path: '/components/collapse',
meta: {
title: '折叠面板'
},
component: () => import('pages/app/views/Collapse.vue')
},
{
path: '/components/color',
meta: {
title: '颜色'
},
component: () => import('pages/app/views/Color.vue')
},
{
path: '/components/count-down',
meta: {
title: '倒计时'
},
component: () => import('pages/app/views/CountDown.vue')
},
{
path: '/components/divider',
meta: {
title: '分割线'
},
component: () => import('pages/app/views/Divider.vue')
},
{
path: '/components/drawer',
meta: {
title: '抽屉'
},
component: () => import('pages/app/views/Drawer.vue')
},
{
path: '/components/dropdown',
meta: {
title: '下拉菜单'
},
component: () => import('pages/app/views/Dropdown.vue')
},
{
path: '/components/empty',
meta: {
title: '空状态'
},
component: () => import('pages/app/views/Empty.vue')
},
{
path: '/components/icon',
meta: {
title: '图标'
},
component: () => import('pages/app/views/Icon.vue')
},
{
path: '/components/input-number',
meta: {
title: '数字输入框'
},
component: () => import('pages/app/views/InputNumber.vue')
},
{
path: '/components/jumbotron',
meta: {
title: '巨幕'
},
component: () => import('pages/app/views/Jumbotron.vue')
},
{
path: '/components/loading-bar',
meta: {
title: '加载进度条'
},
component: () => import('pages/app/views/LoadingBar.vue')
},
{
path: '/components/message',
meta: {
title: '消息提示'
},
component: () => import('pages/app/views/Message.vue')
},
{
path: '/components/mini-modal',
meta: {
title: '迷你模态框'
},
component: () => import('pages/app/views/MiniModal.vue')
},
{
path: '/components/modal',
meta: {
title: '模态框'
},
component: () => import('pages/app/views/Modal.vue')
},
{
path: '/components/notice',
meta: {
title: '通知提醒'
},
component: () => import('pages/app/views/Notice.vue')
},
{
path: '/components/page-header',
meta: {
title: '页头'
},
component: () => import('pages/app/views/PageHeader.vue')
},
{
path: '/components/poptip',
meta: {
title: '气泡提示'
},
component: () => import('pages/app/views/Poptip.vue')
},
{
path: '/components/progress',
meta: {
title: '进度条'
},
component: () => import('pages/app/views/Progress.vue')
},
{
path: '/components/radio',
meta: {
title: '单选框'
},
component: () => import('pages/app/views/Radio.vue')
},
{
path: '/components/result',
meta: {
title: '结果'
},
component: () => import('pages/app/views/Result.vue')
},
{
path: '/components/skeleton',
meta: {
title: '骨架屏'
},
component: () => import('pages/app/views/Skeleton.vue')
},
{
path: '/components/spin',
meta: {
title: '加载中'
},
component: () => import('pages/app/views/Spin.vue')
},
{
path: '/components/steps',
meta: {
title: '步骤条'
},
component: () => import('pages/app/views/Steps.vue')
},
{
path: '/components/switch',
meta: {
title: '开关'
},
component: () => import('pages/app/views/Switch.vue')
},
{
path: '/components/tabs',
meta: {
title: '选项卡'
},
component: () => import('pages/app/views/Tabs.vue')
},
{
path: '/components/tag',
meta: {
title: '标签'
},
component: () => import('pages/app/views/Tag.vue')
},
{
path: '/components/time',
meta: {
title: '相对时间'
},
component: () => import('pages/app/views/Time.vue')
},
{
path: '/components/timeline',
meta: {
title: '时间轴'
},
component: () => import('pages/app/views/Timeline.vue')
},
{
path: '/components/tooltip',
meta: {
title: '文字提示'
},
component: () => import('pages/app/views/Tooltip.vue')
}
]
})
export default router
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title as string
}
Loading.start()
next()
})
router.afterEach(() => {
Loading.finish()
window.scrollTo(0, 0)
})
================================================
FILE: site/src/shims-vue.d.ts
================================================
declare module '*.vue' {
import { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
================================================
FILE: site/tsconfig.json
================================================
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"lib": ["esnext", "dom"],
"types": ["vite/client"]
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
================================================
FILE: site/vite.config.ts
================================================
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { defineConfig } from 'vite'
import viteCompression from 'vite-plugin-compression'
// https://vitejs.dev/config/
export default defineConfig({
base: '/',
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
// 让每个插件都打包成独立的文件
return id.toString().split('node_modules/')[1].split('/')[0].toString()
}
}
},
plugins: [
viteCompression({
verbose: true, // 是否在控制台中输出压缩结果
disable: false,
threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
ext: '.gz',
deleteOriginFile: true // 源文件压缩后是否删除(我为了看压缩后的效果，先选择了true)
})
]
}
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
pages: path.resolve(__dirname, 'src/pages')
}
},
plugins: [vue()]
})
================================================
FILE: some-log.md
================================================
## 设计思路
- 整个项目使用的设计模式主要是构造函数模式（创建一个对象使这个对象指向实例对象的类）
- 组件标签命名方式为 `;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-affix', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
events({ onChange }: AffixEvent): void;
} {
const target = $el(el) as HTMLElement;
const { offsetTop, offsetBottom } = Affix.prototype._attrs(target);
const elOffset = getOffset(target);
const elHeight = target.offsetHeight;
const windowHeight = window.innerHeight;
let affixed = false,
offsetType = 'top';
if (offsetBottom >= 0) {
offsetType = 'bottom';
}
return {
events({ onChange }) {
const handler = () => {
const isAffix: boolean = target.classList.contains(`${PREFIX.affix}`);
const scrollTop = getScroll(window, true);
// 固定到顶部时触发事件
if (elOffset.top - offsetTop < scrollTop && offsetType == 'top' && !isAffix) {
affixed = true;
onChange && type.isFn(onChange, affixed);
} else if (
elOffset.top - offsetTop > scrollTop &&
offsetType == 'top' &&
affixed
) {
affixed = false;
onChange && type.isFn(onChange, affixed);
}
// 固定到底部时触发事件
if (
elOffset.top + offsetBottom + elHeight > scrollTop + windowHeight &&
offsetType == 'bottom' &&
!affixed
) {
affixed = true;
onChange && type.isFn(onChange, affixed);
} else if (
elOffset.top + offsetBottom + elHeight < scrollTop + windowHeight &&
offsetType == 'bottom' &&
affixed
) {
affixed = false;
onChange && type.isFn(onChange, affixed);
}
};
handler();
// 这里 useCapture 选项设置为 true 解决了被下面同样的滚动监听覆盖的 bug
// 相当于提高了事件触发优先级
window.addEventListener('scroll', handler, true);
window.addEventListener('resize', handler, true);
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const { offsetTop, offsetBottom, useCapture } = this._attrs(node);
const wrapper = createElem('div');
const cloneElm = this._createCloneElm(wrapper);
node.after(wrapper);
wrapper.appendChild(node);
this._handleScroll(node, cloneElm, offsetTop, offsetBottom, useCapture);
removeAttrs(node, ['offset-top', 'offset-bottom', 'use-capture']);
});
}
private _createCloneElm(node: HTMLElement): HTMLElement {
const element = createElem('div');
setCss(element, 'display', 'none');
node.after(element);
return element;
}
private _handleScroll(
node: HTMLElement,
cloneElm: HTMLElement,
offsetTop: number,
offsetBottom: number,
useCapture: boolean
): void {
const container = node.parentElement!;
const elOffset = getOffset(node);
const elHeight = node.offsetHeight;
const windowHeight = window.innerHeight;
let affix = false,
top: string,
left: string,
width: string,
bottom: string,
offsetType = 'top',
cloneElmWidth: string,
cloneElmHeight: string,
display: string;
if (offsetBottom >= 0) {
offsetType = 'bottom';
}
const scroll = () => {
const isAffix: boolean = node.classList.contains(`${PREFIX.affix}`);
const scrollTop = getScroll(window, true);
// 固定到顶部
if (elOffset.top - offsetTop < scrollTop && offsetType == 'top' && !isAffix) {
affix = true;
display = '';
top = `${offsetTop}px`;
left = `${elOffset.left}px`;
width = `${container.offsetWidth}px`;
cloneElmWidth = `${node.clientWidth}px`;
cloneElmHeight = `${node.clientHeight}px`;
node.classList.add(`${PREFIX.affix}`);
} else if (elOffset.top - offsetTop > scrollTop && offsetType == 'top' && affix) {
top = '';
left = '';
width = '';
affix = false;
display = 'none';
cloneElmWidth = '';
cloneElmHeight = '';
node.classList.remove(`${PREFIX.affix}`);
}
// 固定到底部
if (
elOffset.top + offsetBottom + elHeight > scrollTop + windowHeight &&
offsetType == 'bottom' &&
!affix
) {
affix = true;
left = `${elOffset.left}px`;
width = `${container.offsetWidth}px`;
bottom = `${offsetBottom}px`;
node.classList.add(`${PREFIX.affix}`);
} else if (
elOffset.top + offsetBottom + elHeight < scrollTop + windowHeight &&
offsetType == 'bottom' &&
affix
) {
affix = false;
left = '';
width = '';
bottom = '';
node.classList.remove(`${PREFIX.affix}`);
}
setCss(node, 'top', top);
setCss(node, 'left', left);
setCss(node, 'width', width);
setCss(node, 'bottom', bottom);
setCss(cloneElm, 'width', cloneElmWidth);
setCss(cloneElm, 'height', cloneElmHeight);
setCss(cloneElm, 'display', display);
};
scroll();
window.addEventListener('scroll', scroll, useCapture);
window.addEventListener('resize', scroll, useCapture);
}
private _attrs(node: HTMLElement) {
return {
offsetTop: getNumTypeAttr(node, 'offset-top', 0),
offsetBottom: getNumTypeAttr(node, 'offset-bottom'),
useCapture: getBooleanTypeAttr(node, 'use-capture')
};
}
}
export default Affix;
================================================
FILE: src/components/affix/index.ts
================================================
import Affix from './affix';
export default Affix;
================================================
FILE: src/components/alert/alert.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import {
$el,
bind,
createElem,
getBooleanTypeAttr,
getStrTypeAttr,
removeAttrs,
setHtml
} from '../../dom-utils';
import { moreThanOneNode, warn } from '../../mixins';
import { destroyElem, type, validComps } from '../../utils';
import PREFIX from '../prefix';
interface Config {
config(
el: string
): {
title: string;
icon: string;
events({ onClose }: AlertEvent): void;
};
}
interface AlertEvent {
onClose?: (event: MouseEvent) => void;
}
class Alert implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-alert', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
title: string;
icon: string;
events({ onClose }: AlertEvent): void;
} {
const target = $el(el) as HTMLElement;
validComps(target, 'alert');
const AlertTitle = target.querySelector(`.${PREFIX.alert}-title`)!;
const AlertIcon = target.querySelector(`.${PREFIX.alert}-icon`)!;
return {
get title() {
return setHtml(AlertTitle);
},
set title(newVal: string) {
if (newVal && !type.isStr(newVal)) return;
setHtml(AlertTitle, newVal);
},
get icon() {
return setHtml(AlertIcon);
},
set icon(newVal: string) {
if (!AlertIcon) {
warn(`You need to set the "show-icon" attribute to "true" --> "${el}"`);
return;
}
if (newVal && !type.isStr(newVal)) return;
setHtml(AlertIcon, newVal);
},
events({ onClose }: AlertEvent) {
const AlertClose = target.querySelector(`.${PREFIX.alert}-close`)!;
if (!AlertClose) return;
bind(AlertClose, 'click', (event: Event) => onClose && type.isFn(onClose, event));
}
};
}
private _create(COMPONENTS: NodeListOf) {
COMPONENTS.forEach((node) => {
if (moreThanOneNode(node)) return;
const { icon, type, title, closable, banner, showIcon, closeText } = this._attrs(node);
const placeholderNode = node.firstElementChild;
this._setMainTemplate(node, title);
this._setBanner(node, banner);
this._setIconType(node, type, showIcon, icon, placeholderNode);
this._setDescription(node, placeholderNode);
this._setClosable(node, closable, closeText);
this._handleClose(node);
removeAttrs(node, ['title', 'icon', 'banner', 'closable', 'close-text', 'show-icon']);
});
}
private _setMainTemplate(node: Element, title: string) {
const template = `
${title}
`;
setHtml(node, template);
}
private _setBanner(node: Element, banner: boolean): void {
if (!banner) return;
node.classList.add(`${PREFIX.alert}-with-banner`);
}
private _setIconType(
node: Element,
type: string,
showIcon: boolean,
icon: string,
desc: Element | null
): void {
if (!showIcon) return;
node.classList.add(`${PREFIX.alert}-with-icon`);
const AlertIconWrap = createElem('span');
AlertIconWrap.className = `${PREFIX.alert}-icon`;
if (icon) {
setHtml(AlertIconWrap, icon);
} else {
// 默认为 info 图标
let iconType = 'information-circle';
switch (type) {
case 'success':
iconType = 'checkmark-circle';
break;
case 'warning':
iconType = 'alert';
break;
case 'error':
iconType = 'close-circle';
break;
}
if (desc) {
iconType += '-outline';
}
const AlertIcon = `
${!closeText ? ` `;
node.insertAdjacentHTML('beforeend', AlertClose);
}
private _handleClose(node: Element): void {
const AlertIcon = node.querySelector(`.${PREFIX.alert}-close`);
if (!AlertIcon) return;
bind(AlertIcon, 'click', () => destroyElem(node, { fadeOut: true, destroy: true }));
}
private _attrs(node: Element) {
return {
icon: getStrTypeAttr(node, 'icon', ''),
type: getStrTypeAttr(node, 'type', 'info'),
title: getStrTypeAttr(node, 'title', ''),
closeText: getStrTypeAttr(node, 'close-text', ''),
banner: getBooleanTypeAttr(node, 'banner'),
closable: getBooleanTypeAttr(node, 'closable'),
showIcon: getBooleanTypeAttr(node, 'show-icon')
};
}
}
export default Alert;
================================================
FILE: src/components/alert/index.ts
================================================
import Alert from './alert';
export default Alert;
================================================
FILE: src/components/avatar/avatar.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { $el, bind, getStrTypeAttr, removeAttrs, setCss, setHtml } from '../../dom-utils';
import { warn } from '../../mixins';
import { type, validComps } from '../../utils';
import PREFIX from '../prefix';
interface Config {
config(
el: string
): {
events({ onError }: AvatarEvent): void;
};
}
interface AvatarEvent {
onError: (event: Event) => void;
}
class Avatar implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-avatar', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
events({ onError }: AvatarEvent): void;
} {
const target = $el(el) as HTMLElement;
validComps(target, 'avatar');
const AvatarImage = target.querySelector('img');
return {
events({ onError }: AvatarEvent) {
if (!AvatarImage) {
warn(
`Unable to add an event where the image failed to load for the current avatar --> "${el}"`
);
return;
}
bind(AvatarImage, 'error', (event: Event) => onError && type.isFn(onError, event));
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const { icon, src, alt, size } = this._attrs(node);
this._setSize(node, size);
this._setIcon(node, icon);
this._setImage(node, src, alt);
this._setText(node, icon, src);
removeAttrs(node, ['icon', 'src', 'alt']);
});
}
private _setSize(node: Element, size: string): void {
if (!size) return;
const _size = Number(size);
if (!_size) return;
setCss(node, 'width', `${_size}px`);
setCss(node, 'height', `${_size}px`);
setCss(node, 'fontSize', `${_size / 2}px`);
node.removeAttribute('size');
}
private _setIcon(node: Element, icon: string): void {
if (!icon) return;
node.classList.add(`${PREFIX.avatar}-icon`);
const AvatarIcon = `${text} `;
setHtml(node, AvatarText);
this._setScale(node);
}
// 防止字符型头像的字体溢出边界
private _setScale(node: Element) {
const children = node.querySelector(`.${PREFIX.avatar}-string`)! as HTMLElement;
if (!children) return;
const avatarWidth = node.getBoundingClientRect().width;
const childrenWidth = children.offsetWidth;
if (avatarWidth - 8 < childrenWidth) {
const newScale = `scale(${(avatarWidth - 8) / childrenWidth}) translateX(-50%)`;
setCss(children, 'transform', `${newScale}`);
} else {
setCss(children, 'transform', 'scale(1) translateX(-50%)');
}
}
private _attrs(node: Element) {
return {
icon: getStrTypeAttr(node, 'icon', ''),
src: getStrTypeAttr(node, 'src', ''),
alt: getStrTypeAttr(node, 'alt', ''),
size: getStrTypeAttr(node, 'size', '')
};
}
}
export default Avatar;
================================================
FILE: src/components/avatar/index.ts
================================================
import Avatar from './avatar';
export default Avatar;
================================================
FILE: src/components/back-top/back-top.ts
================================================
import { $el, bind, getNumTypeAttr, removeAttrs, setCss, setHtml } from '../../dom-utils';
import PREFIX from '../prefix';
class BackTop {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-back-top', { all: true });
this._create(this.COMPONENTS);
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const { right, bottom, height, duration } = this._attrs(node);
this._setRight(node, right);
this._setBottom(node, bottom);
this._setAppearance(node);
this._handleScroll(node, height);
this._handleClick(node, duration);
removeAttrs(node, ['right', 'bottom', 'height', 'duration']);
});
}
private _setRight(node: Element, right: number): void {
setCss(node, 'right', `${right}px`);
}
private _setBottom(node: Element, bottom: number): void {
setCss(node, 'bottom', `${bottom}px`);
}
private _setAppearance(node: Element): void {
if (setHtml(node) && setHtml(node) !== ' ') {
setHtml(node, node.innerHTML);
} else {
const template = `
`;
setHtml(node, template);
}
}
private _handleScroll(node: Element, height: number): void {
const visable = (y: number) => {
const scrollY = Math.floor(y);
const visibilityHeight = Math.floor(height);
// 判断页面是否滚动到指定显示的高度
scrollY >= visibilityHeight
? setCss(node, 'display', 'block')
: setCss(node, 'display', '');
};
bind(window, 'scroll', () => {
visable(window.scrollY);
});
}
private _handleClick(node: Element, duration: number): void {
bind(node, 'click', () => {
const sTop: number = document.documentElement.scrollTop || document.body.scrollTop;
this._scrollTop(window, sTop, 0, duration);
});
}
private _scrollTop(el: any, from: number, to: number, duration: number) {
if (!window.requestAnimationFrame) {
window.requestAnimationFrame =
window.webkitRequestAnimationFrame ||
// @ts-ignore
window.mozRequestAnimationFrame ||
// @ts-ignore
window.msRequestAnimationFrame ||
function (callback) {
return window.setTimeout(callback, 1000 / 60);
};
}
const difference = Math.abs(from - to);
const step = Math.ceil((difference / duration) * 25);
const scroll = (start: number, end: number, step: number) => {
let d = start + step > end ? end : start + step;
if (start <= end && d == 0) return;
d = start - step < end ? end : start - step;
el === window ? window.scrollTo(d, d) : (el.scrollTop = d);
window.requestAnimationFrame(() => scroll(d, end, step));
};
scroll(from, to, step);
}
private _attrs(node: Element) {
return {
right: getNumTypeAttr(node, 'right', 30),
bottom: getNumTypeAttr(node, 'bottom', 30),
height: getNumTypeAttr(node, 'height', 400),
duration: getNumTypeAttr(node, 'duration', 500)
};
}
}
export default BackTop;
================================================
FILE: src/components/back-top/index.ts
================================================
import BackTop from './back-top';
export default BackTop;
================================================
FILE: src/components/badge/badge.ts
================================================
import { warn } from '../../mixins';
import { $el, createElem, removeAttrs, setCss, setHtml, setText } from '../../dom-utils';
import { type, validComps } from '../../utils';
import PREFIX from '../prefix';
interface Config {
config(
el: string
): {
count: number;
text: string;
dot: boolean;
};
}
class Badge implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-badge', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
count: number;
text: string;
dot: boolean;
} {
const target = $el(el);
validComps(target, 'badge');
const countContainer = target.querySelector(`.${PREFIX.badge}-count`);
const dotContainer = target.querySelector(`.${PREFIX.badge}-dot`);
const { _getMaxCount, _showZero, _setMaxCount } = Badge.prototype;
const maxCount = _getMaxCount(target);
const showZero = _showZero(target);
return {
get count() {
return countContainer?.textContent;
},
set count(newVal: number) {
if (countContainer && type.isNum(newVal)) {
if (newVal > maxCount) {
_setMaxCount(countContainer, maxCount);
} else {
setText(countContainer, `${newVal}`);
if (newVal <= 0 && !showZero) {
setCss(countContainer, 'display', 'none');
} else {
setCss(countContainer, 'display', '');
}
}
} else {
warn(`The count value of this badge cannot be set --> "${el}"`);
}
},
get text() {
return countContainer?.textContent;
},
set text(newVal: string) {
if (!type.isStr(newVal)) {
warn(`The text value of this badge cannot be set --> "${el}"`);
return;
}
setText(countContainer, newVal);
},
get dot() {
return dotContainer;
},
set dot(newVal: boolean) {
if (!dotContainer) {
warn(`Unable to set this badge to dot --> "${el}"`);
return;
}
if (type.isBol(newVal) && newVal) {
setCss(dotContainer, 'display', '');
} else {
setCss(dotContainer, 'display', 'none');
}
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
this._setCount(node);
this._setStatusWithColor(node);
removeAttrs(node, [
'count',
'text',
'status',
'color',
'show-zero',
'max-count',
'dot'
]);
});
}
private _setCount(node: Element): void {
const count = this._getCount(node);
const maxCount = this._getMaxCount(node);
const BadgeCount = createElem('sup');
BadgeCount.className = `${PREFIX.badge}-count`;
if (count || count === 0) {
// 显示的数字大于maxCount时，显示${maxCount}+
if (count > maxCount) {
this._setMaxCount(BadgeCount, maxCount);
} else {
// 数字为 0 时隐藏或者展示 Badge
if (count <= 0 && !this._showZero(node)) {
setCss(BadgeCount, 'display', 'none');
} else {
setText(BadgeCount, `${count}`);
}
}
this._setDot(node, BadgeCount);
}
if (!this._getStatus(node) && !this._getColor(node)) {
node.appendChild(BadgeCount);
// 状态点外观不需要设置为独立展示
this._setAlone(BadgeCount);
}
this._setText(node, BadgeCount);
this._setOffset(node, BadgeCount);
}
private _setMaxCount(node: Element, maxCount: number): void {
setText(node, `${maxCount}+`);
}
private _setDot(node: Element, children: HTMLElement): void {
if (!this._showDot(node)) return;
// 设置为小红点则不显示任何计数内容
setHtml(children, '');
setCss(children, 'display', '');
children.className = `${PREFIX.badge}-dot`;
}
private _setText(parent: Element, children: HTMLElement): void {
// 区分与标签属性 status 或 color 配合的 text 属性
if (!this._getStatus(parent) && !this._getColor(parent)) {
const text = this._getText(parent);
if (text) {
setCss(children, 'display', '');
setText(children, text);
}
}
}
private _setAlone(children: Element): void {
if (!children.previousElementSibling) {
children.classList.add(`${PREFIX.badge}-count-alone`);
}
}
private _setOffset(parent: Element, children: HTMLElement) {
const offset = this._getOffset(parent);
setCss(children, 'marginTop', `${offset?.x}px`);
setCss(children, 'marginRight', `${offset?.y}px`);
}
private _setStatusWithColor(node: Element): void {
const status = this._getStatus(node);
const color = this._getColor(node);
const text = this._getText(node);
if (!status && !color) return;
const BadgeStatusDot = createElem('span');
const BadgeStatusText = createElem('span');
if ((text && status) || (text && color)) setText(BadgeStatusText, text);
let statusCls: string;
let colorCls = '';
status ? (statusCls = `${PREFIX.badge}-status-${status}`) : (statusCls = '');
// 设置更多预设的状态点颜色，或者自定义颜色
const colorType = [
'blue',
'green',
'red',
'yellow',
'magenta',
'volcano',
'orange',
'gold',
'lime',
'cyan',
'geekblue',
'purple'
];
if (colorType.includes(color)) {
colorCls = `${PREFIX.badge}-status-${color}`;
} else {
setCss(BadgeStatusDot, 'backgroundColor', color);
}
BadgeStatusDot.className = `${PREFIX.badge}-status-dot ${statusCls} ${colorCls}`;
BadgeStatusText.className = `${PREFIX.badge}-status-text`;
node.append(BadgeStatusDot, BadgeStatusText);
}
private _getCount(node: Element) {
return Number(node.getAttribute('count'));
}
private _getMaxCount(node: Element): number {
return Number(node.getAttribute('max-count')) || 99;
}
private _getOffset(
node: Element
):
| {
x: any | number;
y: any | number;
}
| undefined {
// 转为真实数组，如果赋值是 offset = ['0','1'] 这样的则会报错
const offset = JSON.parse(node.getAttribute('offset') || '[]');
// 如果是数组，那么不论写了多少个值都只返回前两个
if (type.isArr(offset) && offset.length > 0) {
return {
x: offset[0],
y: offset[1]
};
}
}
private _getStatus(node: Element): string {
return node.getAttribute('status') || '';
}
private _getColor(node: Element): string {
return node.getAttribute('color') || '';
}
private _getText(node: Element): string {
return node.getAttribute('text') || '';
}
private _showZero(node: Element): boolean {
return node.getAttribute('show-zero') === 'true';
}
private _showDot(node: Element): boolean {
return node.getAttribute('dot') === 'true';
}
}
export default Badge;
================================================
FILE: src/components/badge/index.ts
================================================
import Badge from './badge';
export default Badge;
================================================
FILE: src/components/breadcrumb/breadcrumb.ts
================================================
import { $el, createElem, getStrTypeAttr, removeAttrs, setCss, setHtml } from '../../dom-utils';
import PREFIX from '../prefix';
class Breadcrumb {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-breadcrumb', { all: true });
this._create(this.COMPONENTS);
}
private _create(COMPONENTS: NodeListOf) {
COMPONENTS.forEach((node) => {
const { separator } = this._attrs(node);
this._createItem(node, separator);
removeAttrs(node, ['separator']);
});
}
private _createItem(node: Element, separator: string): void {
const { children } = node;
const Fragment = document.createDocumentFragment();
Array.from(children).forEach((child) => {
const Wrapper = createElem('span');
const Separator = createElem('span');
Separator.className = `${PREFIX.breadcrumb}-item-separator`;
// 设置分隔符
setHtml(Separator, `${separator}`);
child.classList.add(`${PREFIX.breadcrumb}-item-link`);
// 初始化为行内块样式
setCss(child, 'display', 'inline-block');
Wrapper.append(child, Separator);
Fragment.appendChild(Wrapper);
});
node.appendChild(Fragment);
}
private _attrs(node: Element) {
return {
separator: getStrTypeAttr(node, 'separator', '/')
};
}
}
export default Breadcrumb;
================================================
FILE: src/components/breadcrumb/index.ts
================================================
import Breadcrumb from './breadcrumb';
export default Breadcrumb;
================================================
FILE: src/components/button/button.ts
================================================
import {
$el,
createElem,
getBooleanTypeAttr,
getStrTypeAttr,
removeAttrs,
setCss,
setHtml
} from '../../dom-utils';
import { type, validComps } from '../../utils';
import PREFIX from '../prefix';
interface Config {
config(
el: string | Element
): {
loading: boolean;
};
}
class Button implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = '1.1.1';
this.COMPONENTS = $el(`.${PREFIX.button}`, { all: true });
this._getAllBtns(this.COMPONENTS);
}
public config(
el: string | Element
): {
loading: boolean;
} {
const target = typeof el === 'string' ? $el(el) : el;
validComps(target, 'button');
return {
get loading() {
return this.loading;
},
set loading(newVal) {
if (newVal && !type.isBol(newVal)) return;
Button.prototype._setLoading(target, false, newVal);
}
};
}
private _getAllBtns(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const { icon, loading } = this._attrs(node);
this._setIcon(node, icon);
this._setLoading(node, true, loading);
removeAttrs(node, ['icon', 'loading']);
});
}
private _setIcon(node: Element, icon: string): void {
if (!icon) return;
if (node.innerHTML === '') {
node.classList.add(`${PREFIX.button}-icon-only`);
const ButtonIcon = `
;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-card', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
title: string;
extra: string;
} {
const target = $el(el) as HTMLElement;
validComps(target, 'card');
const CardHead = target.querySelector(`.${PREFIX.card}-head`)!;
const CardExtra = target.querySelector(`.${PREFIX.card}-extra`)!;
return {
get title() {
return setHtml(CardHead);
},
set title(newVal: string) {
if (newVal && !type.isStr(newVal)) return;
setHtml(CardHead, newVal);
},
get extra() {
return setHtml(CardExtra);
},
set extra(newVal: string) {
if (newVal && !type.isStr(newVal)) return;
setHtml(CardExtra, newVal);
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
if (moreThanOneNode(node)) return;
const placeholderNode = node.firstElementChild!;
const { title, extra, shadow, noBorder, disHover } = this._attrs(node);
this._isShowBordered(node, noBorder);
this._isShowShadow(node, shadow);
this._isDisHover(node, disHover);
this._setHead(node, title);
this._setBody(node, placeholderNode);
this._setExtra(node, extra);
removeAttrs(node, ['title', 'extra', 'shadow', 'dis-hover', 'bordered']);
});
}
private _isShowBordered(node: Element, noBorder: boolean): void {
if (!noBorder) return;
node.classList.add(`${PREFIX.card}-no-border`);
}
private _isShowShadow(node: Element, shadow: boolean): void {
if (!shadow) return;
node.classList.add(`${PREFIX.card}-shadow`);
}
private _isDisHover(node: Element, disHover: boolean): void {
if (!disHover) return;
node.classList.add(`${PREFIX.card}-dis-hover`);
}
private _setHead(node: Element, title: string): void {
if (!title) return;
const CardHeadTemplate = `${title}
`;
node.insertAdjacentHTML('afterbegin', CardHeadTemplate);
}
private _setBody(node: Element, placeholderNode: Element): void {
const Fragment = document.createDocumentFragment();
const CardBody = createElem('div');
CardBody.className = `${PREFIX.card}-body`;
CardBody.appendChild(placeholderNode);
Fragment.appendChild(CardBody);
node.appendChild(Fragment);
}
private _setExtra(node: Element, extra: string): void {
if (!extra) return;
const CardExtraTemplate = ``;
node.insertAdjacentHTML('beforeend', CardExtraTemplate);
}
private _attrs(node: Element) {
return {
title: getStrTypeAttr(node, 'title', ''),
extra: getStrTypeAttr(node, 'extra', ''),
shadow: getBooleanTypeAttr(node, 'shadow'),
disHover: getBooleanTypeAttr(node, 'dis-hover'),
noBorder: getBooleanTypeAttr(node, 'no-border')
};
}
}
export default Card;
================================================
FILE: src/components/card/index.ts
================================================
import Card from './card';
export default Card;
================================================
FILE: src/components/carousel/carousel.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import {
$el,
bind,
createElem,
getBooleanTypeAttr,
getNumTypeAttr,
getStrTypeAttr,
removeAttrs,
setCss,
setHtml,
siblings
} from '../../dom-utils';
import { moreThanOneNode } from '../../mixins';
import { type, validComps } from '../../utils';
import PREFIX from '../prefix';
interface Config {
config(
el: string
): {
events({ onClick, onChange }: CarouselEvents): void;
};
}
interface CarouselEvents {
// 点击幻灯片时触发，返回索引值
onClick?: (index: number) => void;
// 幻灯片切换时触发，目前激活的幻灯片的索引，原幻灯片的索引
onChange?: ([oldValue, value]: [number, number]) => void;
}
const AUTOPLAYSPEED = 2000;
const DURATION = 520;
class Carousel implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-carousel', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
events({ onClick, onChange }: CarouselEvents): void;
} {
const target = $el(el) as HTMLElement;
validComps(target, 'carousel');
const { _attrs } = Carousel.prototype;
const { autoplay, autoplaySpeed, hoverPause } = _attrs(target);
return {
events({ onClick, onChange }: CarouselEvents) {
const elems = target.querySelectorAll(`.${PREFIX.carousel}-item`);
const LeftArrow = target.querySelector(`.${PREFIX.carousel}-arrow.left`);
const RightArrow = target.querySelector(`.${PREFIX.carousel}-arrow.right`);
const lastIndex = elems.length - 1;
const handleChange = (
siblingType: 'nextElementSibling' | 'previousElementSibling',
newSetElem: Element
) => {
const oldActiveElem = target.querySelector(
`.${PREFIX.carousel}-item.active`
)! as HTMLElement;
const activeElem = oldActiveElem[siblingType] || newSetElem;
const oldValue = Number(oldActiveElem.dataset['index']);
// @ts-ignore
const value = Number(activeElem.dataset['index']);
onChange && type.isFn(onChange, [oldValue, value]);
};
const autoPlayUseChangeEvent = () => {
if (!autoplay) return;
let eventTimer: any = null;
const startEvent = () => {
eventTimer = window.setInterval(() => {
handleChange('nextElementSibling', elems[0]);
}, autoplaySpeed);
};
const pauseEvent = () =>
eventTimer ? window.clearInterval(eventTimer) : false;
startEvent();
if (hoverPause === 'false') return;
bind(target, 'mouseenter', () => pauseEvent());
bind(target, 'mouseleave', () => startEvent());
};
const handleClick = () => {
elems.forEach((elem, index) => {
bind(elem, 'click', () => onClick && type.isFn(onClick, index));
});
};
bind(LeftArrow, 'click', () =>
handleChange('previousElementSibling', elems[lastIndex])
);
bind(RightArrow, 'click', () => handleChange('nextElementSibling', elems[0]));
handleClick();
autoPlayUseChangeEvent();
}
};
}
private _create(components: NodeListOf): void {
components.forEach((node) => {
if (moreThanOneNode(node)) return;
const placeholderNode = node.firstElementChild;
if (!placeholderNode) return;
const carouselItemCount = placeholderNode.childElementCount;
const {
dots,
arrow,
effect,
easing,
radiusDot,
trigger,
autoplay,
hoverPause,
autoplaySpeed
} = this._attrs(node);
this._setMainTemplate(node, dots, arrow);
this._setFadeCls(node, effect);
this._setItem(node, placeholderNode, carouselItemCount, easing);
this._setIndicators(node, carouselItemCount, radiusDot, trigger);
this._autoPlay(autoplay, node, hoverPause, autoplaySpeed);
this._handleArrowClick(node, arrow);
removeAttrs(node, [
'dots',
'arrow',
'effect',
'easing',
'trigger',
'radius-dot',
'autoplay',
'hover-pause',
'autoplay-speed'
]);
});
}
private _setMainTemplate(node: Element, dots: string, arrow: string): void {
const template = `
`;
setHtml(node, template);
}
private _setFadeCls(node: Element, effect: string): void {
effect === 'fade' ? node.classList.add(`${PREFIX.carousel}-${effect}`) : '';
}
private _setItem(
node: Element,
placeholderNode: Element,
carouselItemCount: number,
esaing: string
): void {
const CarouselList = node.querySelector(`.${PREFIX.carousel}-list`);
const Fragment = document.createDocumentFragment();
const children = Array.from(placeholderNode.children);
let i = 0;
for (; i < carouselItemCount; i++) {
const CarouselItem = createElem('div');
CarouselItem.dataset['index'] = `${i}`;
CarouselItem.className = `${PREFIX.carousel}-item`;
CarouselItem.appendChild(children[i]);
this._setEasing(CarouselItem, esaing);
Fragment.appendChild(CarouselItem);
Fragment.firstElementChild?.classList.add('active');
}
CarouselList?.appendChild(Fragment);
}
private _setEasing(item: HTMLElement, easing: string): void {
if (!easing) return;
setCss(item, 'transitionTimingFunction', easing);
}
private _setIndicators(
node: Element,
carouselItemCount: number,
radiusDot: boolean,
trigger: string
): void {
const CarouselDots = node.querySelector(`.${PREFIX.carousel}-dots`);
const Fragment = document.createDocumentFragment();
let i = 0;
for (; i < carouselItemCount; i++) {
const CarouselDot = createElem('li');
CarouselDot.dataset['slideTo'] = `${i}`;
setHtml(
CarouselDot,
`;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-checkbox', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
value: (string | number)[];
checked: boolean;
disabled: boolean;
indeterminate: boolean;
events({ onChange }: CheckboxEvent): void;
} {
const target = $el(el) as HTMLElement;
const isGroup = target.tagName.toLowerCase() == 'r-checkbox-group';
// 排除 group 项
if (!isGroup) {
validComps(target, 'checkbox');
} else {
validComps(target, 'checkbox-group');
}
const {
_attrs,
_setChecked,
_setIndeterminate,
_setMultipleChecks,
_isDisabled
} = Checkbox.prototype;
const { value } = _attrs(target);
return {
get value() {
return value;
},
set value(newVal) {
if (!isGroup) {
warn(`This checkbox is not a child of a group element -->"${el}"`);
return;
}
if (newVal && !type.isArr(newVal)) return;
_setMultipleChecks(target, newVal);
},
get checked() {
return target.dataset['value'] === 'true';
},
set checked(newVal) {
if (newVal && !type.isBol(newVal)) return;
_setChecked(target, newVal);
},
get disabled() {
return _isDisabled(target);
},
set disabled(newVal) {
if (newVal && !type.isBol(newVal)) return;
if (isGroup) return;
newVal
? target.setAttribute('disabled', 'disabled')
: target.removeAttribute('disabled');
const CheckBoxInput = target.querySelector(
`.${PREFIX.checkbox}-input`
) as HTMLInputElement;
CheckBoxInput.disabled = newVal;
},
get indeterminate() {
const isIndeterminate: boolean = target
.querySelector(`.${PREFIX.checkbox}`)!
.classList.contains(`${PREFIX.checkbox}-indeterminate`)!;
return isIndeterminate;
},
set indeterminate(newVal) {
if (newVal && !type.isBol(newVal)) return;
if (isGroup) return;
_setIndeterminate(target, newVal);
},
events({ onChange }: CheckboxEvent) {
let CheckBox: any, checked: any;
isGroup ? (CheckBox = target.querySelectorAll('r-checkbox')) : (CheckBox = target);
const fn = () => {
if (isGroup) {
checked = [];
CheckBox.forEach((elm: HTMLElement) => {
elm.dataset['value'] === 'true'
? checked.push(elm.dataset['label'])
: '';
});
} else {
checked = target.dataset['value'] === 'true';
}
onChange && type.isFn(onChange, checked);
};
bind(target, 'click', fn);
}
};
}
private _create(COMPONENTS: NodeListOf) {
COMPONENTS.forEach((node) => {
const { icon, name, checked, label, indeterminate } = this._attrs(node);
const CheckboxGroupWrapper = this._getGroupWrapper(node);
this._setChecked(node, checked);
this._setMainTemplate(node, name);
this._setLabel(node, label);
this._setDisabled(node);
this._setIcon(node, icon);
this._setIndeterminate(node, indeterminate);
this._handleChange(node);
if (CheckboxGroupWrapper) {
const { value } = this._attrs(CheckboxGroupWrapper);
this._setMultipleChecks(CheckboxGroupWrapper, value);
removeAttrs(CheckboxGroupWrapper, ['value']);
}
removeAttrs(node, ['icon', 'name', 'checked', 'label']);
});
}
private _setChecked(node: Element, checked: boolean): void {
// @ts-ignore
node.dataset['value'] = `${checked}`;
if (!checked) {
if (node.classList.contains(`${PREFIX.checkbox}-checked`)) {
node.classList.remove(`${PREFIX.checkbox}-checked`);
}
} else {
node.classList.add(`${PREFIX.checkbox}-checked`);
}
}
private _setMainTemplate(node: Element, name: string) {
const content = setHtml(node);
const template = `
${content}
`;
setHtml(node, template);
}
private _setLabel(node: Element, label: string): void {
if (!this._getGroupWrapper(node)) return;
// @ts-ignore
node.dataset['label'] = label;
}
private _setDisabled(node: Element): void {
if (!this._isDisabled(node)) return;
const CheckBoxInput = node.querySelector(`.${PREFIX.checkbox}-input`)! as HTMLInputElement;
CheckBoxInput.disabled = true;
}
private _setIcon(node: Element, icon: string): void {
if (!icon) return;
const template = `;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-circle', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
percent: number;
strokeColor: string | string[];
} {
const target = $el(el) as HTMLElement;
const InnerCircle = target.querySelectorAll('path')[1] as SVGPathElement;
const { _attrs, _setPercent, _setStrokeColor } = Circle.prototype;
const { percent, strokeWidth, dashboard, strokeColor } = _attrs(target);
return {
get percent() {
return percent;
},
set percent(newVal: number) {
if (newVal && !type.isNum(newVal)) return;
_setPercent(InnerCircle, newVal, strokeWidth, dashboard);
},
get strokeColor() {
return strokeColor;
},
set strokeColor(newVal: string | string[]) {
if (newVal && !type.isStr(newVal) && !type.isArr(newVal)) return;
_setStrokeColor(InnerCircle, newVal);
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
if (moreThanOneNode(node)) return;
const CircleContent = node.firstElementChild;
const {
size,
percent,
strokeLinecap,
strokeWidth,
strokeColor,
trailColor,
trailWidth,
dashboard
} = this._attrs(node);
this._setSize(node, size);
this._setMainTemplate(
node,
percent,
trailColor,
trailWidth,
strokeLinecap,
strokeWidth,
strokeColor,
dashboard
);
const InnerCircle = node.querySelectorAll('path')[1]! as SVGPathElement;
this._setPercent(InnerCircle, percent, strokeWidth, dashboard);
this._setStrokeColor(InnerCircle, strokeColor);
this._setInnerContent(node, CircleContent);
removeAttrs(node, [
'percent',
'size',
'stroke-linecap',
'stroke-width',
'stroke-color',
'trail-width',
'trail-color',
'dashboard'
]);
});
}
private _setSize(node: HTMLElement, size: number): void {
setCss(node, 'width', `${size}px`);
setCss(node, 'height', `${size}px`);
}
private _setMainTemplate(
node: HTMLElement,
percent: number,
trailColor: string,
trailWidth: number,
strokeLinecap: string,
strokeWidth: number,
strokeColor: string,
dashboard: boolean
): void {
const pathString = this._getPathString(strokeWidth, dashboard);
const { trailStyle, pathStyle } = this._getStyle(strokeWidth, dashboard);
const computedStrokeWidth = percent === 0 && dashboard ? 0 : strokeWidth;
const template = `
`;
setHtml(node, template);
}
private _radius(strokeWidth: number): number {
return 50 - strokeWidth / 2;
}
private _setPercent(
innerCircle: SVGPathElement,
percent: number,
strokeWidth: number,
dashboard: boolean
): void {
const { _radius } = Circle.prototype;
const len = Math.floor(Math.PI * 2 * _radius(strokeWidth));
if (dashboard) {
setCss(innerCircle, 'strokeDasharray', `${(percent / 100) * (len - 75)}px ${len}px`);
} else {
setCss(innerCircle, 'strokeDashoffset', `${((100 - percent) / 100) * len}px`);
}
}
private _setStrokeColor(innerCircle: SVGPathElement, color: string | string[]): void {
const id = `${PREFIX.circle}-${randomStr(3)}`;
const addDefs = (color: string[]) => {
if (color.length > 2) {
warn(
'👇 The stroke-color attribute of circle cannot pass an array of length greater than 2'
);
console.error(innerCircle.parentElement!.parentElement);
return;
}
strokeValue = `url(#${id})`;
const defs = Circle.prototype.showDefs(id, color);
innerCircle.parentElement!.insertAdjacentHTML('beforeend', defs);
};
let strokeValue: string;
if (typeof color === 'string') {
if (color.startsWith('[') && color.endsWith(']')) {
addDefs(JSON.parse(color));
} else {
strokeValue = color;
}
} else if (Array.isArray(color)) {
addDefs(color);
}
innerCircle.setAttribute('stroke', strokeValue!);
}
private _getPathString(strokeWidth: number, dashboard: boolean): string {
const radius = this._radius(strokeWidth);
if (dashboard) {
return `M 50,50 m 0,${radius}
a ${radius},${radius} 0 1 1 0,-${2 * radius}
a ${radius},${radius} 0 1 1 0,${2 * radius}`;
} else {
return `M 50,50 m 0,-${radius}
a ${radius},${radius} 0 1 1 0,${2 * radius}
a ${radius},${radius} 0 1 1 0,-${2 * radius}`;
}
}
private _getStyle(
strokeWidth: number,
dashboard: boolean
): {
trailStyle: string;
pathStyle: string;
} {
const len = Math.floor(Math.PI * 2 * this._radius(strokeWidth));
let trailStyle: string, pathStyle: string;
if (dashboard) {
trailStyle = `
stroke-dasharray: ${len - 75}px ${len}px;
stroke-dashoffset: -${75 / 2}px;
transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s
`;
pathStyle = `
stroke-dashoffset: -${75 / 2}px;
transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .6s ease 0s, stroke .6s, stroke-width .06s ease .6s
`;
} else {
trailStyle = '';
pathStyle = `
stroke-dasharray: ${len}px ${len}px;
transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease
`;
}
return { trailStyle, pathStyle };
}
private showDefs(id: string, color: string[]) {
return `
`;
}
private _setInnerContent(node: HTMLElement, content: Element | null): void {
if (!content) return;
const CircleInner = createElem('div');
CircleInner.className = `${PREFIX.circle}-inner`;
CircleInner.appendChild(content);
node.appendChild(CircleInner);
}
private _attrs(node: HTMLElement) {
return {
size: getNumTypeAttr(node, 'size', 120),
percent: getNumTypeAttr(node, 'percent', 0),
strokeWidth: getNumTypeAttr(node, 'stroke-width', 6),
trailWidth: getNumTypeAttr(node, 'trail-width', 5),
trailColor: getStrTypeAttr(node, 'trail-color', '#eaeef2'),
strokeColor: getStrTypeAttr(node, 'stroke-color', '#1890ff'),
strokeLinecap: getStrTypeAttr(node, 'stroke-linecap', 'round'),
dashboard: getBooleanTypeAttr(node, 'dashboard')
};
}
}
export default Circle;
================================================
FILE: src/components/circle/index.ts
================================================
import Circle from './circle';
export default Circle;
================================================
FILE: src/components/collapse/collapse.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { $el, bind, removeAttrs, siblings, slider } from '../../dom-utils';
import {
getArrTypeAttr,
getBooleanTypeAttr,
getStrTypeAttr,
setCss,
setHtml
} from '../../dom-utils/elem';
import { type, validComps } from '../../utils';
import PREFIX from '../prefix';
interface CollapseEvents {
onChange?: (index: []) => void;
}
interface Config {
config(
el: string
): {
activeIndex: string | number | string[] | number[];
events({ onChange }: CollapseEvents): void;
};
}
class Collapse implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-collapse', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
activeIndex: string | number | string[] | number[];
events({ onChange }: { onChange: (key: []) => void }): void;
} {
const target = $el(el);
validComps(target, 'collapse');
const { _attrs, _dataSetActiveKey, _openByKey } = Collapse.prototype;
const activeIndex = JSON.parse(target.dataset['activeIndex']);
return {
get activeIndex() {
return activeIndex;
},
set activeIndex(newVal: string | number | string[] | number[]) {
if (newVal == activeIndex) return;
_dataSetActiveKey(target, newVal);
_openByKey(target, newVal, target.getAttribute('accordion'));
},
events({ onChange }) {
const panels = target.querySelectorAll('r-collapse-panel');
// 储存已展开面板的 key
const key: string[] = [];
const pushKey = (el: Element, toggle: boolean) => {
const { accordion } = _attrs(target);
// @ts-ignore
const panelKey = el.dataset.panelKey;
if (el.classList.contains(`${PREFIX.collapse}-item-active`)) {
key.push(panelKey);
} else if (toggle) {
const idx = key.indexOf(panelKey);
idx > -1 ? key.splice(idx, 1) : '';
}
// 手风琴模式下每展开一个面板就删除其他的 key
if (accordion) {
siblings(el).forEach((o) => {
const otherIdx = key.indexOf(o.dataset.panelKey);
otherIdx > -1 ? key.splice(otherIdx, 1) : '';
});
}
};
panels.forEach((panel: Element) => {
const header = panel.querySelector(`.${PREFIX.collapse}-header`);
// 存放初始化面板时默认已展开的 key
pushKey(panel, false);
bind(header, 'click', () => {
// 这里用定时器是为了跟移除显示面板样式类名的时机同步
setTimeout(() => {
pushKey(panel, true);
onChange && type.isFn(onChange, key);
}, 150);
});
});
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const { simple, ghost, activekey, accordion } = this._attrs(node);
this._dataSetActiveKey(node, activekey);
this._setGhost(node, ghost);
this._setSimple(node, simple);
this._createChildNodes(node);
this._openByKey(node, activekey, accordion);
removeAttrs(node, ['simple', 'ghost', 'active-key']);
});
}
private _dataSetActiveKey(
node: Element,
activeIndex: string | number | string[] | number[]
): void {
if (activeIndex) {
// @ts-ignore
node.dataset['activeIndex'] = Array.isArray(activeIndex)
? `[${activeIndex}]`
: activeIndex;
}
}
private _setGhost(node: Element, ghost: boolean): void {
ghost ? node.classList.add(`${PREFIX.collapse}-ghost`) : '';
}
private _setSimple(node: Element, simple: boolean): void {
simple ? node.classList.add(`${PREFIX.collapse}-simple`) : '';
}
private _createChildNodes(node: Element): void {
const collapsePanels = node.querySelectorAll('r-collapse-panel');
this._setPanel(node, collapsePanels);
}
private _setPanel(parent: Element, panels: NodeListOf): void {
// 遍历所有面板节点
panels.forEach((panel, index) => {
const { index: key, title, hideArrow } = this._attrs(panel);
// @ts-ignore
// 面板的 key 如果没填则默认为索引值
panel.dataset.panelKey = !key ? index : key;
// 保存面板原先的第一个节点，也就是要填充的内容
const content = panel.firstElementChild;
const arrowIcon = `;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-count-down', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
endTime: string;
events({ onStop }: CountDownEvent): void;
} {
const target = $el(el) as HTMLElement;
validComps(target, 'count-down');
const { _countTime } = CountDown.prototype;
return {
get endTime() {
return '';
},
set endTime(newVal: string) {
if (newVal && !type.isStr(newVal)) return;
_countTime(target, newVal);
},
events({ onStop }: CountDownEvent) {
if (!onStop) return;
bind(target, 'DOMNodeInserted', (e: any) => {
if (e.target.textContent === '00:00:00') {
type.isFn(onStop, true);
}
});
}
};
}
private _create(COMPONENTS: NodeListOf) {
COMPONENTS.forEach((node) => {
const { endTime } = this._attrs(node);
this._countTime(node, endTime);
removeAttrs(node, ['endTime']);
});
}
private _countTime(node: Element, endTime: string): void {
if (!endTime) return;
let timer: any = null;
const countDown = () => {
//获取当前时间
const date = new Date();
const now = date.getTime();
//设置截止时间
const endDate = new Date(endTime);
const _endTime = endDate.getTime();
//时间差
const diff = _endTime - now;
//定义变量 d,h,m,s保存倒计时的时间
let d = 0,
h = 0,
m = 0,
s = 0;
if (diff >= 0) {
d = Math.floor(diff / 1000 / 60 / 60 / 24);
h = Math.floor((diff / 1000 / 60 / 60) % 24);
m = Math.floor((diff / 1000 / 60) % 60);
s = Math.floor((diff / 1000) % 60);
}
const checkTime = (t: any) => {
if (t < 10) t = `0${t}`;
return t;
};
//将0-9的数字前面加上0，例1变为01
d = checkTime(d);
h = checkTime(h);
m = checkTime(m);
s = checkTime(s);
node.textContent = `${h}:${m}:${s}`;
};
countDown();
timer = window.setInterval(countDown, 1000);
bind(node, 'DOMNodeInserted', (e: any) => {
if (e.target.textContent === '00:00:00') {
window.clearInterval(timer);
return;
}
});
}
private _attrs(node: Element) {
return {
endTime: getStrTypeAttr(node, 'end-time', '')
};
}
}
export default CountDown;
================================================
FILE: src/components/count-down/index.ts
================================================
import CountDown from './count-down';
export default CountDown;
================================================
FILE: src/components/divider/divider.ts
================================================
import PREFIX from '../prefix';
import { $el, createElem, getBooleanTypeAttr, getStrTypeAttr, removeAttrs } from '../../dom-utils';
class Divider {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-divider', { all: true });
this._create(this.COMPONENTS);
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
this._setType(node);
this._setDashed(node);
this._setPlain(node);
this._setTitle(node);
removeAttrs(node, ['dashed', 'plain', 'orientation']);
});
}
private _setType(node: Element): void {
const { type } = this._attrs(node);
node.setAttribute('type', `${type}`);
}
private _setDashed(node: Element): void {
const { dashed } = this._attrs(node);
if (dashed) {
node.classList.add(`${PREFIX.divider}-dashed`);
}
}
private _setPlain(node: Element): void {
const { plain } = this._attrs(node);
if (plain) {
node.classList.add(`${PREFIX.divider}-plain`);
}
}
private _setOrientation(node: Element): void {
const { orientation } = this._attrs(node);
node.classList.add(`${PREFIX.divider}-with-text-${orientation}`);
}
private _setTitle(node: Element): void {
if (node.innerHTML == '' || node.innerHTML == ' ') return;
this._setOrientation(node);
const DividerText = createElem('span');
DividerText.className = `${PREFIX.divider}-inner-text`;
DividerText.innerHTML = node.innerHTML;
node.classList.add(`${PREFIX.divider}-with-text`);
node.innerHTML = '';
node.appendChild(DividerText);
}
private _attrs(node: Element) {
return {
type: getStrTypeAttr(node, 'type', 'horizontal'),
orientation: getStrTypeAttr(node, 'orientation', 'center'),
dashed: getBooleanTypeAttr(node, 'dashed'),
plain: getBooleanTypeAttr(node, 'plain')
};
}
}
export default Divider;
================================================
FILE: src/components/divider/index.ts
================================================
import Divider from './divider';
export default Divider;
================================================
FILE: src/components/drawer/drawer.ts
================================================
import PREFIX from '../prefix';
import {
$el,
bind,
createElem,
getBooleanTypeAttr,
getStrTypeAttr,
removeAttrs,
setCss,
setHtml
} from '../../dom-utils';
import { CssTransition, moreThanOneNode, Scrollable } from '../../mixins';
import { type, validComps } from '../../utils';
interface DrawerEvents {
onClose?: () => void;
}
interface Config {
config(
el: string
): {
title: string;
visable: boolean;
events: ({ onClose }: DrawerEvents) => void;
};
}
class Drawer implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.1.1';
this.COMPONENTS = $el('r-drawer', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
title: string;
visable: boolean;
events: ({ onClose }: DrawerEvents) => void;
} {
const target = $el(el);
validComps(target, 'drawer');
const { _handleVisable, _attrs } = Drawer.prototype;
const DrawerMask = target.querySelector(`.${PREFIX.drawer}-mask`);
const DrawerWrap = target.querySelector(`.${PREFIX.drawer}-wrap`);
const _Drawer = target.querySelector(`.${PREFIX.drawer}`);
const DrawerTitle = target.querySelector(`.${PREFIX.drawer}-header-inner`);
const DrawerClose = target.querySelector(`.${PREFIX.drawer}-close`);
return {
get title() {
return setHtml(DrawerTitle);
},
set title(newVal: string) {
if (!type.isStr(newVal)) return;
setHtml(DrawerTitle, newVal);
},
get visable() {
return false;
},
set visable(newVal: boolean) {
if (!type.isBol(newVal)) return;
_handleVisable(newVal, target, [DrawerMask, DrawerWrap, _Drawer]);
},
events({ onClose }) {
// v1.0.1 改用on事件绑定，防止触发回调事件的次数随着每次点击而不断的重复叠加
if (DrawerClose) DrawerClose.onclick = () => onClose && type.isFn(onClose);
if (_attrs(target).maskClosable === 'true')
DrawerWrap.onclick = () => onClose && type.isFn(onClose);
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
this._createDrawerNodes(node);
setCss(node, 'display', 'block');
removeAttrs(node, [
'title',
'width',
'height',
'mask',
'visible',
'closable',
'scrollable',
'lock-scroll'
]);
});
}
private _createDrawerNodes(node: Element): void {
const DrawerMask = createElem('div');
const DrawerWrap = createElem('div');
const Drawer = createElem('div');
const DrawerContent = createElem('div');
const DrawerClose = createElem('a');
const DrawerHeader = createElem('div');
const DrawerHeaderInner = createElem('div');
const DrawerBody = createElem('div');
this._setCls([
DrawerMask,
DrawerWrap,
Drawer,
DrawerContent,
DrawerClose,
DrawerHeader,
DrawerHeaderInner,
DrawerBody
]);
this._setSize(node, Drawer);
this._setPlacement(node, Drawer);
this._setOpenInContainer(node, DrawerMask, DrawerWrap, Drawer);
this._initVisible(node, DrawerMask, DrawerWrap, Drawer);
this._handleClose(node, [DrawerMask, DrawerWrap, Drawer], DrawerClose);
DrawerWrap.appendChild(Drawer);
Drawer.appendChild(DrawerContent);
this._setClosable(node, DrawerContent, DrawerClose);
this._setHeader(node, DrawerContent, DrawerHeader, DrawerHeaderInner);
DrawerContent.appendChild(DrawerBody);
this._setBodyContent(node, DrawerBody);
this._setMask(node, DrawerMask, DrawerWrap, DrawerContent);
node.appendChild(DrawerWrap);
}
private _setCls(elms: HTMLElement[]): void {
const elmsCls = [
`${PREFIX.drawer}-mask`,
`${PREFIX.drawer}-wrap`,
`${PREFIX.drawer}`,
`${PREFIX.drawer}-content`,
`${PREFIX.drawer}-close`,
`${PREFIX.drawer}-header`,
`${PREFIX.drawer}-header-inner`,
`${PREFIX.drawer}-body`
];
let i = 0;
const { length } = elms;
for (; i < length; i++) {
const elm = elms[i];
elm.className = elmsCls[i];
}
}
private _setSize(parent: Element, children: HTMLElement): void {
const { width, height, placement } = this._attrs(parent);
if (placement === 'top' || placement === 'bottom') {
setCss(children, 'height', height);
} else if (placement === 'left' || placement === 'right') {
children.style.width = width;
setCss(children, 'width', width);
}
}
private _setPlacement(parent: Element, children: HTMLElement): void {
const { placement } = this._attrs(parent);
children.classList.add(`${PREFIX.drawer}-${placement}`);
}
private _setOpenInContainer(
parent: Element,
drawerMask: HTMLElement,
drawerWrap: HTMLElement,
drawer: HTMLElement
): void {
const { inner } = this._attrs(parent);
if (!inner) return;
drawerMask.classList.add(`${PREFIX.drawer}-mask-inner`);
drawerWrap.classList.add(`${PREFIX.drawer}-wrap-inner`);
drawer.classList.add(`${PREFIX.drawer}-inner`);
}
private _setMask(
parent: Element,
drawerMask: HTMLElement,
drawerWrap: HTMLElement,
drawerContent: HTMLElement
): void {
let { mask } = this._attrs(parent);
if (parent.getAttribute('mask') == null) mask = true;
if (!mask) {
drawerWrap.classList.add(`${PREFIX.drawer}-no-mask`);
drawerContent.classList.add(`${PREFIX.drawer}-content-no-mask`);
return;
}
parent.appendChild(drawerMask);
}
private _setClosable(parent: Element, children: HTMLElement, drawerClose: HTMLElement): void {
const { closable } = this._attrs(parent);
if (!closable) return;
setHtml(drawerClose, `;
constructor() {
this.VERSION = 'v2.0';
this.COMPONENTS = $el('r-dropdown', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
visible: boolean;
events({ onClick, onVisibleChange, onClickOutside }: DropdownEvents): void;
} {
const target = $el(el) as HTMLElement;
validComps(target, 'dropdown');
const { _attrs, _setVisible, _getChildDisabled } = Dropdown.prototype;
const { trigger, placement } = _attrs(target);
const DropdownRefElm = target.firstElementChild!;
const DropdownMenu = target.querySelector('r-dropdown-menu')! as HTMLElement;
const DropdownItem = DropdownMenu.querySelectorAll('r-dropdown-item');
return {
get visible() {
return DropdownMenu.dataset[STATEKEY] === 'visible';
},
set visible(newVal: boolean) {
if (newVal && !type.isBol(newVal)) return;
_setVisible(target, DropdownMenu, newVal, placement);
},
events({ onClick, onVisibleChange, onClickOutside }) {
// onVisibleChange
const visibleChange = () => {
setTimeout(() => {
const visible = DropdownMenu.dataset[STATEKEY] === 'visible';
onVisibleChange && type.isFn(onVisibleChange, visible);
}, DEFAULTDELAY);
};
// onClick
const itemClickEv = (elem: Element) => {
if (_getChildDisabled(elem)) return false;
// @ts-ignore
const key = elem.dataset[ITEMKEY];
visibleChange();
onClick && type.isFn(onClick, key);
};
if (trigger === 'hover') {
bind(target, 'mouseenter', () => {
if (EVENTTIMER) clearTimeout(EVENTTIMER);
EVENTTIMER = setTimeout(visibleChange, DEFAULTDELAY);
});
bind(target, 'mouseleave', () => {
if (EVENTTIMER) clearTimeout(EVENTTIMER);
if (DropdownMenu.dataset[STATEKEY] === 'visible')
setTimeout(visibleChange, DEFAULTDELAY);
});
}
if (trigger === 'click' || trigger === 'contextMenu') {
onClickOutside &&
clickoutside(target, onClickOutside, DropdownMenu, STATEKEY, 'visible');
}
if (trigger === 'click') {
bind(DropdownRefElm, 'click', visibleChange);
}
if (trigger === 'contextMenu') {
bind(DropdownRefElm, 'contextmenu', visibleChange);
}
DropdownItem.forEach((child) => bind(child, 'click', () => itemClickEv(child)));
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
if (!this._correctCompositionNodes(node)) return;
const { trigger, placement, visible, stopPropagation } = this._attrs(node);
const DropdownMenu = node.querySelector('r-dropdown-menu')! as HTMLElement;
const DropdownItem = DropdownMenu.querySelector('r-dropdown-item')! as HTMLElement;
const { key } = this._attrs(DropdownItem);
this._setVisible(node, DropdownMenu, visible, placement);
this._setChildKey(DropdownItem, key);
this._setStopPropagation(stopPropagation, node, DropdownMenu);
this._handleTrigger(trigger, placement, node, DropdownMenu);
this._handleItemClick(trigger, node, DropdownMenu, placement);
removeAttrs(node, ['key', 'trigger', 'placement', 'visible', 'stop-propagation']);
});
}
private _correctCompositionNodes(node: Element): boolean {
if (node.firstElementChild?.tagName === 'R-DROPDOWN-MENU') {
warn(
'👇 The first child element must be the reference element used to trigger the menu display hidden, not r-dropdown-menu'
);
console.error(node);
return false;
}
if (node.lastElementChild!.tagName !== 'R-DROPDOWN-MENU') {
warn('👇 The last child element tag must be made up of r-dropdown-menu');
console.error(node);
return false;
}
if (node.childElementCount > 2) {
warn('👇 The number of child element nodes in this r-dropdown tag cannot exceed two');
console.error(node);
return false;
}
return true;
}
private _setStopPropagation(stop: boolean, node: Element, child: HTMLElement): void {
if (!stop) return;
bind(node, 'click', (e: MouseEvent) => e.stopPropagation());
bind(child, 'click', (e: MouseEvent) => e.stopPropagation());
}
private _handleTrigger(
type: string,
placement: string,
node: Element,
child: HTMLElement
): void {
if (type === 'custom') return;
const referenceElem = node.firstElementChild!;
// 触发菜单显示隐藏的引用元素如果是禁用状态则不做操作
if (/disabled/.test(referenceElem.className)) return;
if (this._getChildDisabled(referenceElem)) return;
const showMenu = () => {
if (VISIBLETIMER) clearTimeout(VISIBLETIMER);
if (child.dataset[STATEKEY] === 'visible') return;
VISIBLETIMER = setTimeout(
() => this._setVisible(node, child, true, placement),
DEFAULTDELAY
);
};
const hidenMenu = () => {
if (VISIBLETIMER) clearTimeout(VISIBLETIMER);
if (child.dataset[STATEKEY] === 'visible') {
setTimeout(() => this._setVisible(node, child, false, placement), DEFAULTDELAY);
}
};
const clickIsShow = (e: MouseEvent) => {
e.stopPropagation();
if (child.dataset[STATEKEY] === 'hidden') {
showMenu();
} else {
hidenMenu();
}
};
if (type === 'hover') {
bind(node, 'mouseenter', showMenu);
bind(node, 'mouseleave', hidenMenu);
}
// 点击菜单栏以外的地方隐藏
if (type === 'click' || type === 'contextMenu') {
clickoutside(node, hidenMenu);
}
if (type === 'click') {
bind(referenceElem, 'click', (e: MouseEvent) => clickIsShow(e));
}
if (type === 'contextMenu') {
bind(referenceElem, 'contextmenu', (e: MouseEvent) => {
e.preventDefault();
clickIsShow(e);
});
}
}
private _handleItemClick(
type: string,
node: Element,
child: HTMLElement,
placement: string
): void {
if (type === 'custom') return;
const DropdownItems = child.querySelectorAll('r-dropdown-item');
DropdownItems.forEach((item) =>
bind(item, 'click', () => {
if (this._getChildDisabled(item)) return;
this._setVisible(node, child, false, placement);
})
);
}
private _setChildKey(child: HTMLElement, key: string): void {
if (key) {
child.dataset[ITEMKEY] = key;
child.removeAttribute('key');
}
}
private _setVisible(
node: Element,
child: HTMLElement,
visible: boolean,
placement: string
): void {
const { _setPlacement, _setTransitionDrop } = Dropdown.prototype;
if (visible) {
child.dataset[STATEKEY] = 'visible';
_setPlacement(node, child, placement);
_setTransitionDrop('in', child);
} else {
child.dataset[STATEKEY] = 'hidden';
setTimeout(() => {
child.dataset[STATEKEY] === 'hidden' && _setTransitionDrop('out', child);
}, 0);
}
}
private _setPlacement(node: Element, child: HTMLElement, placement: string): void {
const popperPlacement = child.dataset['popperPlacement'] || placement;
if (/^top|right-end|left-end/.test(popperPlacement)) {
setCss(child, 'transformOrigin', 'center bottom');
}
if (/^bottom|right-start|left-start/.test(popperPlacement)) {
setCss(child, 'transformOrigin', 'center top');
}
_Popper._newCreatePopper(node, child, placement, 0);
}
private _setTransitionDrop(type: 'in' | 'out', child: HTMLElement): void {
const transitionCls =
type === 'in' ? { enterCls: DROPENTERCLS } : { leaveCls: DROPLEAVECLS };
CssTransition(child, {
inOrOut: type,
...transitionCls,
rmCls: true,
timeout: 290
});
}
private _getChildDisabled(elem: Element): boolean {
if (
elem.getAttribute('disabled') === 'disabled' ||
elem.getAttribute('disabled') === 'true' ||
elem.getAttribute('disabled') === ''
) {
return true;
}
return false;
}
private _attrs(node: Element) {
return {
key: getStrTypeAttr(node, 'key', ''),
trigger: getStrTypeAttr(node, 'trigger', 'hover'),
placement: getStrTypeAttr(node, 'placement', 'bottom'),
visible: getBooleanTypeAttr(node, 'visible'),
stopPropagation: getBooleanTypeAttr(node, 'stop-propagation')
};
}
}
export default Dropdown;
================================================
FILE: src/components/dropdown/index.ts
================================================
import Dropdown from './dropdown';
export default Dropdown;
================================================
FILE: src/components/empty/empty.ts
================================================
import { $el, getStrTypeAttr, setHtml, removeAttrs } from '../../dom-utils';
import PREFIX from '../prefix';
import DefaultImage from '../../../assets/empty.svg';
class Empty {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-empty', { all: true });
this._create(this.COMPONENTS);
}
private _create(COMPONENTS: NodeListOf) {
COMPONENTS.forEach((node) => {
const { desc, image, imageStyle } = this._attrs(node);
const footerElm = node.firstElementChild;
this._setMainTemplate(node, desc, image, imageStyle);
this._setFooter(node, footerElm);
removeAttrs(node, ['desc', 'image', 'image-style']);
});
}
private _setMainTemplate(node: Element, desc: string, image: string, imageStyle: string): void {
const template = `
${desc == 'false' ? '' : desc}
`;
setHtml(node, template);
}
private _setFooter(node: Element, footerElm: Element | null): void {
if (!footerElm) return;
const footerTpl = ``;
node.insertAdjacentHTML('beforeend', footerTpl);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
node.querySelector(`.${PREFIX.empty}-footer`)!.appendChild(footerElm);
}
private _attrs(node: Element) {
return {
desc: getStrTypeAttr(node, 'desc', '暂无数据'),
image: getStrTypeAttr(node, 'image', `${DefaultImage}`),
imageStyle: getStrTypeAttr(node, 'image-style', '')
};
}
}
export default Empty;
================================================
FILE: src/components/empty/index.ts
================================================
import Empty from './empty';
export default Empty;
================================================
FILE: src/components/input-number/index.ts
================================================
import InputNumber from './input-number';
export default InputNumber;
================================================
FILE: src/components/input-number/input-number.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import {
$el,
bind,
getBooleanTypeAttr,
getNumTypeAttr,
getStrTypeAttr,
removeAttrs,
setHtml
} from '../../dom-utils';
import { warn } from '../../mixins';
import { type, validComps } from '../../utils';
import PREFIX from '../prefix';
interface Config {
config(
el: string
): {
value: number;
step: number;
disabled: boolean;
readOnly: boolean;
editable: boolean;
events({ onChange, onFocus, onBlur }: InputNumberEvents): void;
};
}
interface InputNumberEvents {
onChange?: (value: number) => void;
onFocus?: (event: InputEvent) => void;
onBlur?: () => void;
}
function addNum(num1: number, num2: number): number {
let sq1: number, sq2: number;
try {
sq1 = num1.toString().split('.')[1].length;
} catch (e) {
sq1 = 0;
}
try {
sq2 = num2.toString().split('.')[1].length;
} catch (e) {
sq2 = 0;
}
const m = Math.pow(10, Math.max(sq1, sq2));
return (Math.round(num1 * m) + Math.round(num2 * m)) / m;
}
class InputNumber implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-input-number', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
value: number;
step: number;
disabled: boolean;
readOnly: boolean;
editable: boolean;
events({ onChange, onFocus, onBlur }: InputNumberEvents): void;
} {
const target = $el(el) as HTMLElement;
validComps(target, 'input-number');
const { _attrs, _setValue, _setDisabled } = InputNumber.prototype;
const { min, max, step, disabled, readOnly, editable, precision, formatter } = _attrs(
target
);
const Input = target.querySelector(`.${PREFIX.inputnb}-input`)! as HTMLInputElement;
const ArrowUp = target.querySelector(`.${PREFIX.inputnb}-handler-up`);
const ArrowDown = target.querySelector(`.${PREFIX.inputnb}-handler-down`);
const BtnUp = target.querySelector(`.${PREFIX.inputnb}-controls-outside-up`);
const BtnDown = target.querySelector(`.${PREFIX.inputnb}-controls-outside-down`);
return {
get value() {
return Number(Input.value);
},
set value(newVal: number) {
if (newVal && !type.isNum(newVal)) return;
_setValue(Input, newVal, formatter, precision, min, max);
},
get step() {
return step;
},
set step(newVal: number) {
if (newVal && !type.isNum(newVal)) return;
Input.step = step;
},
get disabled() {
return disabled;
},
set disabled(newVal: boolean) {
if (newVal && !type.isBol(newVal)) return;
_setDisabled(target, Input, newVal);
},
get readOnly() {
return readOnly;
},
set readOnly(newVal: boolean) {
if (newVal && !type.isBol(newVal)) return;
Input.readOnly = newVal;
const disableArrow = (elem1: Element | null, elem2: Element | null) => {
if (elem1) {
// @ts-ignore
elem1.style.pointerEvents = newVal ? 'none' : '';
// @ts-ignore
elem2.style.pointerEvents = newVal ? 'none' : '';
}
};
disableArrow(ArrowUp, ArrowDown);
disableArrow(BtnUp, BtnDown);
},
get editable() {
return editable;
},
set editable(newVal: boolean) {
if (newVal && !type.isBol(newVal)) return;
Input.style.pointerEvents = !newVal ? 'none' : '';
},
events({ onChange, onFocus, onBlur }) {
let value: number;
const changeEv = (e: Event) => {
e.stopPropagation();
value = Number(Input.value);
if (!isNaN(value)) {
onChange && type.isFn(onChange, value);
} else {
warn(`Invalid input value --> '${Input.value}' at '${el}'`);
return;
}
};
if (ArrowUp) {
bind(ArrowUp, 'click', changeEv);
bind(ArrowDown, 'click', changeEv);
}
if (BtnUp) {
bind(BtnUp, 'click', changeEv);
bind(BtnDown, 'click', changeEv);
}
bind(Input, 'keydown', (e: KeyboardEvent) => {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') changeEv(e);
});
bind(Input, 'input', (e: InputEvent) => changeEv(e));
bind(Input, 'focus', (e: InputEvent) => {
e.stopPropagation();
onFocus && type.isFn(onFocus, e);
});
bind(Input, 'blur', (e: InputEvent) => {
e.stopPropagation();
onBlur && type.isFn(onBlur);
});
}
};
}
private _create(COMPONENTS: NodeListOf) {
COMPONENTS.forEach((node) => {
const {
min,
max,
step,
value,
name,
inputId,
parser,
formatter,
precision,
disabled,
editable,
readOnly,
size,
placeholder,
controlsOutside
} = this._attrs(node);
this._setMainTemplate(node);
this._setOutSide(node, controlsOutside);
const Input = node.querySelector(`.${PREFIX.inputnb}-input`)! as HTMLInputElement;
const ArrowUp = node.querySelector(`.${PREFIX.inputnb}-handler-up`);
const ArrowDown = node.querySelector(`.${PREFIX.inputnb}-handler-down`);
const BtnUp = node.querySelector(`.${PREFIX.inputnb}-controls-outside-up`);
const BtnDown = node.querySelector(`.${PREFIX.inputnb}-controls-outside-down`);
this._setInput(Input, min, max, step, name, inputId, placeholder);
this._setValue(Input, value, formatter, precision, min, max);
this._setSize(node, size);
this._setDisabled(node, Input, disabled);
this._setReadonlyAndEditable(Input, readOnly, editable);
this._setHandler(ArrowUp, ArrowDown, BtnUp, BtnDown, value, min, max);
this._handleChange(
Input,
ArrowUp,
ArrowDown,
BtnUp,
BtnDown,
min,
max,
step,
precision,
readOnly,
parser,
formatter
);
removeAttrs(node, [
'min',
'max',
'step',
'value',
'precision',
'size',
'name',
'parser',
'formatter',
'input-id',
'placeholder',
'disabled',
'editable',
'readOnly',
'controls-outside'
]);
});
}
private _setMainTemplate(node: HTMLElement): void {
node.classList.add(`${PREFIX.inputnb}`);
const template = `
`;
setHtml(node, template);
}
private _setOutSide(node: HTMLElement, controlsOutside: boolean): void {
if (!controlsOutside) return;
node.classList.add(`${PREFIX.inputnb}-controls-outside`);
const handlerWrap = node.querySelector(`.${PREFIX.inputnb}-handler-wrap`)!;
const template = `
`;
handlerWrap.insertAdjacentHTML('afterend', template);
handlerWrap.remove();
}
private _setInput(
input: HTMLInputElement,
min: number,
max: number,
step: number,
name: string,
inputId: string,
placeholder: string
): void {
isNaN(min) || min === 0 ? (input.min = `${min}`) : '';
isNaN(max) || min === 0 ? (input.max = `${max}`) : '';
isNaN(step) && step !== 1 ? (input.step = `${step}`) : '';
name ? (input.name = name) : '';
inputId ? (input.id = inputId) : '';
placeholder ? (input.placeholder = placeholder) : '';
}
private _formatterVal(input: HTMLInputElement, formatter: string, val: number): void {
// `约定的 ${value}`替换为 `${val}`
const resVal = formatter.replace('value', 'val');
input.value = `${formatter ? eval(resVal) : val}`;
}
private _parserVal(parser: string, val: string): string {
if (parser) {
const _parser = eval(parser) as any[];
return val.replace(_parser[0], _parser[1]);
} else {
// 如果没有指定从 formatter 里转换回数字的方式，则使用默认正则方式
return val.replace(/[^\d.-]/g, '');
}
}
private _handleChange(
input: HTMLInputElement,
aUp: Element | null,
aDown: Element | null,
btnUp: Element | null,
btnDown: Element | null,
min: number,
max: number,
step: number,
precision: number,
readOnly: boolean,
parser: string,
formatter: string
): void {
if (readOnly) return;
const setValue = (val: number) => {
this._setValue(input, val, formatter, precision, min, max);
this._setHandler(aUp, aDown, btnUp, btnDown, val, min, max);
};
const changeStep = (type: 'up' | 'down'): false | undefined => {
// 如果指定了输入框展示值的格式，那么这里就要用 parser 的值转换为原来的值
const val = this._parserVal(parser, input.value);
const targetVal = Number(val);
if (type === 'up') {
if (addNum(targetVal, step) <= max) {
setValue(targetVal);
} else {
return false;
}
setValue(addNum(targetVal, step));
} else if (type === 'down') {
if (addNum(targetVal, step) >= min) {
setValue(targetVal);
} else {
return false;
}
setValue(addNum(targetVal, -step));
}
};
const handleKeyBoardChange = () => {
bind(input, 'keydown', (e: KeyboardEvent) => {
if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return false;
if (e.key === 'ArrowUp') {
e.preventDefault();
changeStep('up');
}
if (e.key === 'ArrowDown') {
e.preventDefault();
changeStep('down');
}
});
};
const handleInputChange = () => {
bind(input, 'input', (e: InputEvent) => {
e.stopPropagation();
// 当输入框输入时只匹配数字、小数点和减号
const val = input.value.replace(/[^\d.-]/g, '');
setValue(Number(val));
});
};
const handleArrowChange = () => {
if (aUp && aDown) {
bind(aUp, 'click', () => changeStep('up'));
bind(aDown, 'click', () => changeStep('down'));
}
if (btnUp && btnDown) {
bind(btnUp, 'click', () => changeStep('up'));
bind(btnDown, 'click', () => changeStep('down'));
}
};
handleKeyBoardChange();
handleInputChange();
handleArrowChange();
}
private _setValue(
input: HTMLInputElement,
value: number,
formatter: string,
precision: number,
min: number,
max: number
): void {
let targetVal: any = !isNaN(precision) ? value.toFixed(precision) : value;
if ((targetVal && !isNaN(targetVal)) || targetVal === 0) {
if (targetVal > max && !isNaN(max)) {
targetVal = max;
} else if (targetVal < min && !isNaN(min)) {
targetVal = min;
}
// 如果指定了输入框展示值的格式则使用它，否则反之
this._formatterVal(input, formatter, targetVal);
}
}
private _setSize(node: Element, size: string): void {
if (!size) return;
node.classList.add(`${PREFIX.inputnb}-${size}`);
}
private _setReadonlyAndEditable(
input: HTMLInputElement,
readOnly: boolean,
editable: string
): void {
if (readOnly) input.readOnly = true;
if (readOnly || editable === 'false') input.style.pointerEvents = 'none';
}
private _setDisabled(node: HTMLElement, input: HTMLInputElement, disabled: boolean): void {
if (!disabled) {
node.classList.remove(`${PREFIX.inputnb}-disabled`);
input.disabled = false;
} else {
node.classList.add(`${PREFIX.inputnb}-disabled`);
input.disabled = true;
}
}
private _setHandler(
aUp: Element | null,
aDown: Element | null,
btnUp: Element | null,
btnDown: Element | null,
value: number,
min: number,
max: number
): void {
const isSetDisable = (elm1: Element, elm2: Element, outside: boolean) => {
const upDisabledCls = outside ? 'controls-outside-btn' : 'handler-up';
const downDisabledCls = outside ? 'controls-outside-btn' : 'handler-down';
if (Math.ceil(value) >= max) {
elm1.classList.add(`${PREFIX.inputnb}-${upDisabledCls}-disabled`);
} else {
elm1.classList.remove(`${PREFIX.inputnb}-${upDisabledCls}-disabled`);
}
if (Math.ceil(value) <= min) {
elm2.classList.add(`${PREFIX.inputnb}-${downDisabledCls}-disabled`);
} else {
elm2.classList.remove(`${PREFIX.inputnb}-${downDisabledCls}-disabled`);
}
};
if (aUp && aDown) isSetDisable(aUp, aDown, false);
if (btnUp && btnDown) isSetDisable(btnUp, btnDown, true);
}
private _attrs(node: HTMLElement) {
return {
min: getNumTypeAttr(node, 'min', -Infinity),
max: getNumTypeAttr(node, 'max', Infinity),
step: getNumTypeAttr(node, 'step', 1),
value: getNumTypeAttr(node, 'value', 0),
precision: getNumTypeAttr(node, 'precision'),
size: getStrTypeAttr(node, 'size', ''),
name: getStrTypeAttr(node, 'name', ''),
inputId: getStrTypeAttr(node, 'input-id', ''),
parser: getStrTypeAttr(node, 'parser', ''),
formatter: getStrTypeAttr(node, 'formatter', ''),
placeholder: getStrTypeAttr(node, 'placeholder', ''),
disabled: getBooleanTypeAttr(node, 'disabled'),
readOnly: getBooleanTypeAttr(node, 'readonly'),
editable: getStrTypeAttr(node, 'editable', 'true'),
controlsOutside: getBooleanTypeAttr(node, 'controls-outside')
};
}
}
export default InputNumber;
================================================
FILE: src/components/jumbotron/index.ts
================================================
import Jumbotron from './jumbotron';
export default Jumbotron;
================================================
FILE: src/components/jumbotron/jumbotron.ts
================================================
import { $el, getStrTypeAttr, removeAttrs, setHtml } from '../../dom-utils';
import { moreThanOneNode } from '../../mixins';
import PREFIX from '../prefix';
class Jumbotron {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-jumbotron', { all: true });
this._create(this.COMPONENTS);
}
private _create(COMPONENTS: NodeListOf) {
COMPONENTS.forEach((node) => {
if (moreThanOneNode(node)) return;
const placeholderNode = node.firstElementChild;
const { title, subTitle } = this._attrs(node);
this._setMainTemplate(node, title, subTitle);
this._setExtraContent(node, placeholderNode);
removeAttrs(node, ['title', 'sub-title']);
});
}
private _setMainTemplate(node: Element, title: string, subTitle: string): void {
const template = `
`;
setHtml(node, template);
}
private _setExtraContent(node: Element, placeholderNode: Element | null): void {
if (!placeholderNode) return;
const JumbotronContainer = node.querySelector(`.${PREFIX.jumbotron}-container`);
JumbotronContainer?.appendChild(placeholderNode);
}
private _attrs(node: Element) {
return {
title: getStrTypeAttr(node, 'title', ''),
subTitle: getStrTypeAttr(node, 'sub-title', '')
};
}
}
export default Jumbotron;
================================================
FILE: src/components/loading-bar/index.ts
================================================
import $LoadingBar from './loading-bar';
const Loading = new $LoadingBar();
export default Loading;
================================================
FILE: src/components/loading-bar/loading-bar.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { $el, createElem, setCss } from '../../dom-utils';
import { CssTransition } from '../../mixins';
import { type } from '../../utils';
import PREFIX from '../prefix';
interface UpdatelobalAPI {
color?: string; // 进度条的颜色
height?: number; // 进度条高度，单位 px
duration?: number; // 隐藏时的持续时间，单位 ms
failedColor?: string; // 失败时的进度条颜色
}
// 私有方法的接口
interface UpdateAPI {
percent?: number; // 进度条进度
status?: 'primary' | 'success' | 'error'; // 进度状态颜色
show?: boolean; // 是否显示进度条
}
interface Events {
start(): void;
finish(): void;
error(): void;
update(percent: number): void;
destroy(): void;
}
// 全局配置
const DEFAULT_LOADINGBAR: {
color: string;
height: number;
duration: number;
failedColor: string;
} = {
color: 'primary',
height: 2,
duration: 800,
failedColor: 'error'
};
let timer: any;
function createLoadingBarInstance(): HTMLElement {
const LoadingBar = createElem('div');
const LoadingBarInner = createElem('div');
LoadingBar.className = `${PREFIX.loadingBar}`;
LoadingBarInner.className = `${PREFIX.loadingBar}-inner`;
setColor('primary', LoadingBarInner);
// 初始进度
setCss(LoadingBarInner, 'width', '0%');
// 设置进度条高度为全局配置的高度
window.setTimeout(() => {
const height = `${DEFAULT_LOADINGBAR.height}px`;
setCss(LoadingBar, 'height', height);
}, 0);
LoadingBar.appendChild(LoadingBarInner);
document.body.appendChild(LoadingBar);
return LoadingBar;
}
// 设置进度函数
function r_update(options: UpdateAPI): void {
const LBar = $el(`.${PREFIX.loadingBar}`)!;
const LBarInner = $el(`.${PREFIX.loadingBar}-inner`)!;
// 设置进度
setCss(LBarInner, 'width', `${options.percent}%`);
const transitionConfig = {
rmCls: true,
timeout: 200,
enterCls: 'rab-fade-in',
leaveCls: 'rab-fade-out',
hiddenParent: LBar
};
// 是否显示隐藏
if (options.show) {
CssTransition(LBarInner, {
inOrOut: 'in',
...transitionConfig
});
} else {
CssTransition(LBarInner, {
inOrOut: 'out',
...transitionConfig
});
}
setColor(options.status!, LBarInner);
}
// 隐藏进度条
function hide() {
window.setTimeout(() => {
r_update({
show: false
});
window.setTimeout(() => {
r_update({
percent: 0
});
}, 200);
}, DEFAULT_LOADINGBAR.duration);
}
function clearTimer() {
if (timer) {
window.clearInterval(timer);
timer = null;
}
}
// 设置进度条状态背景颜色
function setColor(status: string, elem: any): void {
if (status === 'error') {
// 是否使用全局配置的 failedColor
if (DEFAULT_LOADINGBAR.failedColor && DEFAULT_LOADINGBAR.failedColor !== 'error') {
setCss(elem, 'backgroundColor', DEFAULT_LOADINGBAR.failedColor);
// 在隐藏的持续时间后初始化背景色
window.setTimeout(() => {
setCss(elem, 'backgroundColor', '');
}, DEFAULT_LOADINGBAR.duration);
} else {
elem.classList.add(`${PREFIX.loadingBar}-inner-failed-color-error`);
// 在隐藏的持续时间后设为初始颜色
window.setTimeout(() => {
elem.classList.remove(`${PREFIX.loadingBar}-inner-failed-color-error`);
}, DEFAULT_LOADINGBAR.duration + 200);
}
} else if (status === 'primary') {
// 是否使用全局配置的 color
if (DEFAULT_LOADINGBAR.color && DEFAULT_LOADINGBAR.color !== 'primary') {
setCss(elem, 'backgroundColor', DEFAULT_LOADINGBAR.color);
} else {
elem.classList.add(`${PREFIX.loadingBar}-inner-color-primary`);
}
}
}
class $LoadingBar implements Events {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el(`.${PREFIX.loadingBar}`);
createLoadingBarInstance();
}
public start(): void {
if (timer) return;
let percent = 0;
timer = window.setInterval(() => {
// 计算随机进度
percent += Math.floor(Math.random() * 3 + 1);
// 终止
if (percent > 95) {
clearTimer();
}
r_update({
percent,
status: 'primary',
show: true
});
}, 200);
}
public update(percent: number): void {
clearTimer();
r_update({
percent,
status: 'success',
show: true
});
}
public finish(): void {
clearTimer();
r_update({
percent: 100,
status: 'primary',
show: true
});
hide();
}
public error(): void {
clearTimer();
r_update({
percent: 100,
status: 'error',
show: true
});
hide();
}
public config(options: UpdatelobalAPI): void {
if (options.color && type.isStr(options.color)) {
DEFAULT_LOADINGBAR.color = options.color;
}
if (options.height && type.isNum(options.height)) {
DEFAULT_LOADINGBAR.height = options.height;
}
if (options.duration && type.isNum(options.duration)) {
DEFAULT_LOADINGBAR.duration = options.duration;
}
if (options.failedColor && type.isStr(options.failedColor)) {
DEFAULT_LOADINGBAR.failedColor = options.failedColor;
}
}
public destroy(): void {
clearTimer();
// @ts-ignore
document.body.removeChild($el(`.${PREFIX.loadingBar}`));
}
}
export default $LoadingBar;
================================================
FILE: src/components/message/index.ts
================================================
import R_Message from './message';
const Message = new R_Message();
export default Message;
================================================
FILE: src/components/message/instance.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import PREFIX from '../prefix';
import { $el, bind, createElem, setCss, setHtml } from '../../dom-utils';
import { destroyElem, type, useHTMLString } from '../../utils';
import { CssTransition } from '../../mixins';
export type KeyType = string | number;
export type MessageType = 'info' | 'success' | 'warning' | 'error' | 'loading';
export type MessageConfig = string | Options;
export const PREFIX_KEY = 'rab-message-instance';
export const EnterClass = `${PREFIX.message}-move-enter`;
export const LeaveClass = `${PREFIX.message}-move-leave`;
interface Options {
key?: string | number;
content?: string;
duration?: number;
onClose?: () => void;
closable?: boolean;
background?: boolean;
dangerouslyUseHTMLString?: boolean;
}
const ICONTYPES = {
info: 'ios-information-circle',
success: 'ios-checkmark-circle',
warning: 'ios-alert',
error: 'ios-close-circle',
loading: 'loading-solid'
};
let zIndex = 1010;
let name = 0;
export class CreateInstance {
protected INSTANCES: HTMLElement[];
constructor() {
this.INSTANCES = [];
}
public _init(top: number): void {
const Wrapper = createElem('div');
setCss(Wrapper, 'zIndex', `${zIndex}`);
Wrapper.setAttribute('class', `${PREFIX.message}`);
document.body.appendChild(Wrapper);
setTimeout(() => setCss(Wrapper, 'top', `${top}px`), 0);
}
protected _create(type: MessageType, config: MessageConfig, duration: number): void {
const Message = this._setMainTemplate(type);
const MessageContent = Message.querySelector(`.${PREFIX.messageChild}-content`)!;
this._autoAddZIndex();
this._setIcon(type, Message);
this._setContent(Message, config);
if (typeof config === 'object') {
const { key, closable, onClose, background } = config;
this._setKey(Message, key);
this._setClosable(Message, MessageContent, closable, onClose);
this._setBackground(Message, MessageContent, background);
}
this.INSTANCES.push(Message);
$el(`.${PREFIX.message}`).appendChild(Message);
this._autoClose(Message, config, duration);
}
private _setMainTemplate(type: MessageType): HTMLElement {
const MessageNotice = createElem('div');
const template = `
`;
MessageNotice.dataset['thisName'] = `${name++}`;
MessageNotice.className = `${PREFIX.message}-notice`;
setHtml(MessageNotice, template);
CssTransition(MessageNotice, {
inOrOut: 'in',
enterCls: EnterClass,
rmCls: true,
timeout: 250
});
return MessageNotice;
}
private _setIcon(type: MessageType, elem: HTMLElement): void {
const MessageIcon = elem.querySelector(`.${PREFIX.icon}`)!;
if (type === 'loading') {
MessageIcon.classList.add('rab-load-loop');
}
MessageIcon.classList.add(`${PREFIX.icon}-${ICONTYPES[type]}`);
}
private _setContent(elem: HTMLElement, content: MessageConfig): void {
const MessageText = elem.querySelector(`#${PREFIX.messageChild}-text`)!;
if (typeof content === 'string') {
useHTMLString(MessageText, content, false);
} else if (typeof content === 'object' && content.content) {
useHTMLString(MessageText, content.content, content.dangerouslyUseHTMLString);
}
}
private _setKey(elem: HTMLElement, key?: KeyType): void {
if (!key || (key && !type.isStr(key) && !type.isNum(key))) return;
elem.setAttribute(`${PREFIX_KEY}-key`, `${key}`);
}
private _setClosable(
elem: HTMLElement,
child: Element,
closable?: boolean,
onClose?: () => void
): void {
if (!closable || (closable && !type.isBol(closable))) return;
const template = `
`;
elem.classList.add(`${PREFIX.messageChild}-closable`);
child.insertAdjacentHTML('beforeend', template);
this._handleClose(elem, onClose);
}
private _handleClose(elem: HTMLElement, onClose?: () => void): void {
const MessageCloseBtn = elem.querySelector(`.${PREFIX.messageChild}-close`)!;
bind(MessageCloseBtn, 'click', () => {
this._destroy(elem);
onClose && type.isFn(onClose);
});
}
private _setBackground(elem: HTMLElement, child: Element, background?: boolean): void {
if (!background || (background && !type.isBol(background))) return;
elem.classList.add(`${PREFIX.messageChild}-with-background`);
child.classList.add(`${PREFIX.messageChild}-content-background`);
}
private _autoAddZIndex(): void {
zIndex++;
setCss($el(`.${PREFIX.message}`), 'zIndex', `${zIndex}`);
}
private _autoClose(elem: HTMLElement, config: MessageConfig, duration: number): void {
if (duration || duration === 0 || !config) {
if (duration === 0) return;
setTimeout(() => {
this._destroy(elem);
}, duration * 1000);
} else {
if (typeof config === 'object' && config.duration) {
setTimeout(() => {
this._destroy(elem);
}, config.duration * 1000);
}
}
}
private _destroy(elem: HTMLElement): void {
destroyElem(elem, {
duration: 0.1,
clsEnter: EnterClass,
clsLeave: LeaveClass
});
this.INSTANCES.splice(Number(elem.dataset['thisName']), 1);
}
}
================================================
FILE: src/components/message/message.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { usePromiseCallback } from '../../mixins';
import { destroyElem, destroyElemByKey, type } from '../../utils';
import { CreateInstance, MessageConfig, KeyType, PREFIX_KEY, LeaveClass } from './instance';
interface GlobalConfigs {
top?: number;
duration?: number;
}
interface InstanceMethods {
info(config: MessageConfig): Promise;
success(config: MessageConfig): Promise;
warning(config: MessageConfig): Promise;
error(config: MessageConfig): Promise;
loading(config: MessageConfig): Promise;
config(options: GlobalConfigs): void;
destroy(key?: KeyType): void;
}
const DEFAULTS = {
top: 24,
duration: 3
};
class Message extends CreateInstance implements InstanceMethods {
readonly VERSION: string;
constructor() {
super();
this.VERSION = '2.0';
setTimeout(() => this._init(DEFAULTS.top), 0);
}
public info(config: MessageConfig): Promise {
this._create('info', config, DEFAULTS.duration);
return usePromiseCallback(DEFAULTS.duration, config);
}
public success(config: MessageConfig): Promise {
this._create('success', config, DEFAULTS.duration);
return usePromiseCallback(DEFAULTS.duration, config);
}
public warning(config: MessageConfig): Promise {
this._create('warning', config, DEFAULTS.duration);
return usePromiseCallback(DEFAULTS.duration, config);
}
public error(config: MessageConfig): Promise {
this._create('error', config, DEFAULTS.duration);
return usePromiseCallback(DEFAULTS.duration, config);
}
public loading(config: MessageConfig): Promise {
this._create('loading', config, DEFAULTS.duration);
return usePromiseCallback(DEFAULTS.duration, config);
}
public config(options: GlobalConfigs): void {
if (options.top && type.isNum(options.top)) {
DEFAULTS.top = options.top;
}
if ((options.duration && type.isNum(options.duration)) || options.duration === 0) {
DEFAULTS.duration = options.duration;
}
}
public destroy(key?: KeyType): void {
if (key && (type.isStr(key) || type.isNum(key))) {
destroyElemByKey({
key,
duration: 0.1,
prefixKey: PREFIX_KEY,
clsLeave: LeaveClass
});
} else {
this.INSTANCES.forEach((instance) => {
destroyElem(instance, {
duration: 0.1,
clsLeave: LeaveClass
});
});
this.INSTANCES.length = 0;
}
}
}
export default Message;
================================================
FILE: src/components/mini-modal/index.ts
================================================
import MiniModal from './mini-modal';
export default new MiniModal();
================================================
FILE: src/components/mini-modal/mini-modal.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { $el, bind } from '../../dom-utils';
import { CssTransition, Scrollable } from '../../mixins';
import { type, useHTMLString } from '../../utils';
import Button from '../button';
import PREFIX from '../prefix';
const MiniModalBtn = new Button();
const ICONTYPE = {
info: 'ios-information-circle',
success: 'ios-checkmark-circle',
warning: 'ios-alert',
error: 'ios-close-circle',
confirm: 'ios-help-circle',
loading: 'loading-solid'
};
let DEFAULT_ZINDEX = 1010;
interface MinModalOptions {
width?: string | number;
title?: string;
content?: string;
okText?: string;
cancelText?: string;
loading?: boolean;
keyboard?: boolean;
scrollable?: boolean;
lockScroll?: boolean;
dangerouslyUseHTMLString?: boolean;
onOk?: () => void;
onCancel?: () => void;
}
class MiniModal {
readonly VERSION: string;
constructor() {
this.VERSION = 'v1.0';
}
public info(config: MinModalOptions): void {
this._create('info', config);
}
public success(config: MinModalOptions): void {
this._create('success', config);
}
public warning(config: MinModalOptions): void {
this._create('warning', config);
}
public error(config: MinModalOptions): void {
this._create('error', config);
}
public confirm(config: MinModalOptions): void {
this._create('confirm', config);
}
public remove(): void {
const { ModalParent, ModalMask, ModalWrap } = this._getNode();
this._destroy(ModalParent, ModalMask, ModalWrap);
}
private _create(type: string, config: MinModalOptions): void {
DEFAULT_ZINDEX++;
const {
width = 416,
title = '',
content = '',
okText = '确定',
cancelText = '取消',
loading = false,
keyboard = false,
scrollable = false,
lockScroll = true,
onOk,
onCancel,
dangerouslyUseHTMLString = false
} = config;
// @ts-ignore
const icon = ICONTYPE[type];
const isShowCancelBtn =
type === 'confirm'
? `${cancelText} `
: '';
const template = `
`;
document.body.insertAdjacentHTML('beforeend', template);
const { ModalParent, ModalMask, ModalWrap, Modal } = this._getNode();
this._setMainContent(Modal, title, content, dangerouslyUseHTMLString);
this._setAnimation('in', ModalMask, ModalWrap);
this._setScrollable(scrollable, lockScroll);
this._handleBtnClick(ModalParent, ModalMask, ModalWrap, Modal, loading, onOk, onCancel);
this._keyboardClosed(type, keyboard, ModalParent, ModalMask, ModalWrap, onCancel);
}
private _setMainContent(
modal: Element,
title: string,
content: string,
isUseHTML: boolean
): void {
const ModalHead = modal.querySelector(`.${PREFIX.modal}-confirm-head-title`)!;
const ModalBody = modal.querySelector(`.${PREFIX.modal}-confirm-body`)!;
useHTMLString(ModalHead, title, isUseHTML);
useHTMLString(ModalBody, content, isUseHTML);
}
private _handleBtnClick(
parent: HTMLElement,
mask: Element,
wrap: Element,
modal: Element,
loading: boolean,
onOk: any,
onCancel: any
): void {
const ModalOkBtn = modal.querySelector(`.${PREFIX.button}-primary`)!;
const ModalCacnelBtn = modal.querySelector(`.${PREFIX.button}-text`);
const remove = () => this._destroy(parent, mask, wrap);
const okEv = () => {
onOk && type.isFn(onOk);
if (loading) {
MiniModalBtn.config(ModalOkBtn).loading = loading;
return;
}
remove();
};
const cancelEv = () => {
remove();
onCancel && type.isFn(onCancel);
};
bind(ModalOkBtn, 'click', okEv);
if (ModalCacnelBtn) bind(ModalCacnelBtn, 'click', cancelEv);
}
private _keyboardClosed(
_type: string,
keyboard: boolean,
parent: HTMLElement,
mask: Element,
wrap: Element,
onCancel: any
): void {
if (!keyboard) return;
const event = (e: KeyboardEvent) => {
if (e.key === 'Escape') {
e.stopPropagation();
// 判断页面是否有modal实例，如果有才执行事件，避免重复执行
if (document.body.contains(parent)) {
// 取消的回调，只在MinModal.confirm()下有效
if (_type === 'confirm') onCancel && type.isFn(onCancel);
setTimeout(() => this._destroy(parent, mask, wrap), 0);
}
}
};
window.onkeydown = (e: KeyboardEvent) => event(e);
}
private _destroy(parent: HTMLElement, mask: Element, wrap: Element): void {
this._setAnimation('out', mask, wrap);
setTimeout(() => {
parent.remove();
this._setScrollable(true, false);
}, 150);
}
private _setAnimation(type: 'in' | 'out', elem1: Element, elem2: Element): void {
const maskAniCls =
type === 'in' ? { enterCls: 'rab-fade-in' } : { leaveCls: 'rab-fade-out' };
const modalAniCls =
type === 'in' ? { enterCls: 'zoom-big-enter' } : { leaveCls: 'zoom-big-leave' };
CssTransition(elem1, {
inOrOut: type,
...maskAniCls,
timeout: 250,
rmCls: true
});
CssTransition(elem2, {
inOrOut: type,
...modalAniCls,
timeout: 200,
rmCls: true
});
}
private _setScrollable(scrollable: boolean, lockScroll: boolean): void {
Scrollable({ scroll: scrollable, lock: lockScroll });
}
private _getNode(): {
ModalParent: HTMLElement;
ModalMask: Element;
ModalWrap: Element;
Modal: Element;
} {
const ModalParent = $el(`.${PREFIX.modal}-mini-modal`) as HTMLElement;
const ModalMask = ModalParent.querySelector(`.${PREFIX.modal}-mask`)!;
const ModalWrap = ModalParent.querySelector(`.${PREFIX.modal}-wrap`)!;
const Modal = ModalWrap.querySelector(`.${PREFIX.modal}`)!;
return {
ModalParent,
ModalMask,
ModalWrap,
Modal
};
}
}
export default MiniModal;
================================================
FILE: src/components/modal/index.ts
================================================
import Modal from './modal';
export default Modal;
================================================
FILE: src/components/modal/modal.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import {
$el,
bind,
getBooleanTypeAttr,
getNumTypeAttr,
getStrTypeAttr,
removeAttrs,
setCss,
setHtml
} from '../../dom-utils';
import { CssTransition, moreThanOneNode, Scrollable } from '../../mixins';
import { type, validComps } from '../../utils';
import Button from '../button';
import PREFIX from '../prefix';
interface ModalEvents {
onOk?: () => void;
onCancel?: () => void;
}
interface Config {
config(
el: string
): {
title: string;
visible: boolean;
events({ onOk, onCancel }: ModalEvents): void;
};
}
const RABBIT_BTN = new Button();
class Modal implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.1';
this.COMPONENTS = $el('r-modal', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
title: string;
visible: boolean;
events({ onOk, onCancel }: ModalEvents): void;
} {
const target = $el(el);
validComps(target, 'modal');
const { _attrs, _getModalNode, _handleVisable } = Modal.prototype;
const { loading } = _attrs(target);
const M_Child = _getModalNode(target);
return {
get title() {
return setHtml(M_Child.modalTitle);
},
set title(newVal: string) {
if (type.isStr(newVal)) setHtml(M_Child.modalTitle, newVal);
},
get visible() {
return false;
},
set visible(newVal: boolean) {
if (type.isBol(newVal)) {
// 当设置modal为隐藏状态并且确定按钮是加载中的状态则初始化它
if (!newVal) {
if (loading) RABBIT_BTN.config(M_Child.modalOkBtn).loading = newVal;
}
_handleVisable(newVal, target, [
M_Child.modalMask,
M_Child.modalWrap,
M_Child.modal
]);
}
},
events({ onOk, onCancel }: ModalEvents) {
const { closable, maskClosable } = _attrs(target);
const okEv = () => {
// 是否设置按钮为加载中状态
if (loading) RABBIT_BTN.config(M_Child.modalOkBtn).loading = loading;
onOk && type.isFn(onOk);
};
const cancelEv = () => {
// 如果按钮为加载中状态则初始化其状态
if (loading) RABBIT_BTN.config(M_Child.modalOkBtn).loading = !loading;
// 防止关闭modal后按键esc依然可以触发事件
window.onkeydown = (e: any) => (e.key === 'Escape' ? false : '');
onCancel && type.isFn(onCancel);
};
// 由于内部的_handleClose方法使用addEventListener为触发关闭模态框的元素绑定点击事件，
// 从而与这里绑定的事件造成冲突，一个回调事件同时多次触发的问题
// 因此使用on事件绑定，防止触发回调事件的次数随着每次点击而不断的重复叠加
if (maskClosable === 'true') {
// @ts-ignore
M_Child.modalWrap.onclick = () => cancelEv();
// @ts-ignore
M_Child.modal.onclick = (e: any) => e.stopPropagation();
}
if (closable === 'true') {
// @ts-ignore
M_Child.modalClose.onclick = () => cancelEv();
window.onkeydown = (e: any) => (e.key === 'Escape' ? cancelEv() : '');
}
// @ts-ignore
M_Child.modalOkBtn.onclick = () => okEv();
// @ts-ignore
M_Child.modalCancelBtn.onclick = () => cancelEv();
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
this._createTemplate(node);
setCss(node, 'display', 'block');
removeAttrs(node, [
'width',
'title',
'ok-text',
'class-name',
'cancel-text',
'mask',
'visible',
'scrollable',
'fullscreen',
'lock-scroll',
'footer-hide'
]);
});
}
private _createTemplate(node: Element): void {
// v1.1 增加占位节点的组成数量判断
if (moreThanOneNode(node)) return;
// 获取最初 modal容器下的占位内容
const placeholderNode = node.firstElementChild;
const { width, title, zIndex, okText, cancelText, className } = this._attrs(node);
const template = `
`;
setHtml(node, template);
this._initVisable(node);
this._setHeader(node);
// @ts-ignore
this._setContent(node, placeholderNode);
this._setMask(node);
this._setFullScreen(node);
this._setClosable(node);
this._setFooterHide(node);
this._handleClose(node);
}
private _initVisable(node: Element): void {
const { visible, scrollable } = this._attrs(node);
const { modalMask, modalWrap, modal } = this._getModalNode(node);
let { lockScroll } = this._attrs(node);
!node.getAttribute('lock-scroll') ? (lockScroll = true) : lockScroll;
if (visible) {
setCss(modalMask, 'display', '');
modalWrap.classList.remove(`${PREFIX.modal}-hidden`);
setCss(modal, 'display', '');
Scrollable({ scroll: scrollable, lock: lockScroll });
} else {
setCss(modalMask, 'display', 'none');
modalWrap.classList.add(`${PREFIX.modal}-hidden`);
setCss(modal, 'display', 'none');
}
// @ts-ignore
// 设置初始显示状态
node.dataset.modalVisable = visible;
}
private _setHeader(node: Element): void {
const { title } = this._attrs(node);
if (!title) {
const modalHeader = node.querySelector(`.${PREFIX.modal}-header`);
modalHeader?.remove();
}
}
private _setContent(node: Element, content: Element): void {
const modalBody = node.querySelector(`.${PREFIX.modal}-body`);
if (content) modalBody?.appendChild(content);
}
private _setMask(node: Element): void {
const { _attrs, _getModalNode } = this;
const { mask } = _attrs(node);
if (mask === 'false') {
const { modalMask, modalWrap, modal } = _getModalNode(node);
modalMask.remove();
modalWrap.classList.add(`${PREFIX.modal}-no-mask`);
modal.classList.add(`${PREFIX.modal}-content-no-mask`);
}
}
private _setFullScreen(node: Element): void {
const { fullscreen } = this._attrs(node);
if (fullscreen) {
const { modal } = this._getModalNode(node);
modal.classList.add(`${PREFIX.modal}-fullscreen`);
}
}
private _setClosable(node: Element): void {
const { closable } = this._attrs(node);
if (closable === 'false') {
const { modalClose } = this._getModalNode(node);
modalClose.remove();
}
}
private _setFooterHide(node: Element): void {
const { footerHide } = this._attrs(node);
if (footerHide) {
const modalFooter = node.querySelector(`.${PREFIX.modal}-footer`);
modalFooter?.remove();
}
}
private _handleVisable(visible: boolean, target: Element, children: Element[]): void {
const { _show, _hide } = Modal.prototype;
visible ? _show(target, children) : _hide(target, children);
}
private _handleClose(parent: Element): void {
const { _attrs, _hide, _getModalNode } = this;
const { closable, maskClosable, loading } = _attrs(parent);
const {
modalMask,
modalWrap,
modal,
modalClose,
modalOkBtn,
modalCancelBtn
} = _getModalNode(parent);
const hidden = () => _hide(parent, [modalMask, modalWrap, modal]);
// 右上角关闭按钮
// ESC 键关闭
if (closable === 'true') {
bind(modalClose, 'click', () => hidden());
bind(window, 'keydown', (e: any) => (e.key === 'Escape' ? hidden() : ''));
}
// 遮盖层关闭
if (maskClosable === 'true') {
bind(modalWrap, 'click', () => hidden());
bind(modal, 'click', (e: any) => e.stopPropagation());
}
// 确定和取消按钮关闭
//非加载中状态可以点击关闭模态框
if (!loading) bind(modalOkBtn, 'click', () => hidden());
bind(modalCancelBtn, 'click', () => hidden());
}
private _show(parent: Element, showElm: Element[]): void {
const { _attrs } = Modal.prototype;
const { scrollable } = _attrs(parent);
let { lockScroll } = _attrs(parent);
!parent.getAttribute('lock-scroll') ? (lockScroll = true) : lockScroll;
// @ts-ignore
// 设置当前为显示状态
parent.dataset.modalVisable = 'true';
// showElm[0] 表示遮盖层
// showElm[1] 表示模态框的父容器wrap
// showElm[2] 表示模态框主体
showElm[1].classList.contains(`${PREFIX.modal}-hidden`) &&
showElm[1].classList.remove(`${PREFIX.modal}-hidden`);
CssTransition(showElm[0], {
inOrOut: 'in',
enterCls: 'rab-fade-in',
timeout: 250,
rmCls: true
});
CssTransition(showElm[2], {
inOrOut: 'in',
enterCls: 'zoom-big-enter',
timeout: 250,
rmCls: true
});
Scrollable({ scroll: scrollable, lock: lockScroll });
}
private _hide(parent: Element, hiddenElm: Element[]): void {
// @ts-ignore
// 设置当前为隐藏状态
parent.dataset.modalVisable = 'false';
// hiddenElm[0] 表示遮盖层
// hiddenElm[1] 表示模态框的父容器wrap
// hiddenElm[2] 表示模态框主体
CssTransition(hiddenElm[0], {
inOrOut: 'out',
leaveCls: 'rab-fade-out',
rmCls: true,
timeout: 250
});
CssTransition(hiddenElm[2], {
inOrOut: 'out',
leaveCls: 'zoom-big-leave',
rmCls: true,
timeout: 250
});
setTimeout(() => {
hiddenElm[1].classList.add(`${PREFIX.modal}-hidden`);
setCss(hiddenElm[2], 'display', 'none');
Scrollable({ scroll: true, lock: true, node: parent, tagName: 'modal' });
}, 240);
}
private _getModalNode(node: Element) {
const modalMask = node.querySelector(`.${PREFIX.modal}-mask`)!;
const modalWrap = node.querySelector(`.${PREFIX.modal}-wrap`)!;
const modal = modalWrap.querySelector(`.${PREFIX.modal}`)!;
const modalClose = modalWrap.querySelector(`.${PREFIX.modal}-close`)!;
const modalTitle = modal.querySelector(`.${PREFIX.modal}-header-inner`)!;
const modalOkBtn = modal.querySelector('#modalBtn2')!;
const modalCancelBtn = modal.querySelector('#modalBtn1')!;
return {
modalMask,
modalWrap,
modal,
modalClose,
modalTitle,
modalOkBtn,
modalCancelBtn
};
}
private _attrs(node: Element) {
return {
mask: getStrTypeAttr(node, 'mask', 'true'),
width: getStrTypeAttr(node, 'width', '520px'),
title: getStrTypeAttr(node, 'title', ''),
okText: getStrTypeAttr(node, 'ok-text', '确定'),
closable: getStrTypeAttr(node, 'closable', 'true'),
className: getStrTypeAttr(node, 'class-name', ''),
cancelText: getStrTypeAttr(node, 'cancel-text', '取消'),
maskClosable: getStrTypeAttr(node, 'mask-closable', 'true'),
zIndex: getNumTypeAttr(node, 'z-index', 1000),
visible: getBooleanTypeAttr(node, 'visible'),
loading: getBooleanTypeAttr(node, 'loading'),
scrollable: getBooleanTypeAttr(node, 'scrollable'),
lockScroll: getBooleanTypeAttr(node, 'lock-scroll'),
fullscreen: getBooleanTypeAttr(node, 'fullscreen'),
footerHide: getBooleanTypeAttr(node, 'footer-hide')
};
}
}
export default Modal;
================================================
FILE: src/components/notice/index.ts
================================================
import $Notice from './notice';
const Notice = new $Notice();
export default Notice;
================================================
FILE: src/components/notice/notice.ts
================================================
import { CssTransition, warn } from '../../mixins';
import { type, destroyElem, destroyElemByKey, useHTMLString } from '../../utils';
import { usePromiseCallback } from '../../mixins';
import PREFIX from '../prefix';
import { $el, createElem, setCss, setHtml } from '../../dom-utils';
interface NoticeGlobalAPI {
top?: number; // 通知组件距离顶端的距离，单位像素
duration?: number; // 默认自动关闭的延时，单位秒
}
interface NoticeOptions {
key?: string | number; // 当前通知的唯一标识
icon?: string; // 自定义图标
title?: string; // 通知提醒的标题
desc?: string; // 通知提醒的内容，为空或不填时，自动应用仅标题模式下的样式
style?: string; // 自定义内联样式
onClose?: () => void; // 点击通知关闭按钮时的回调
onClick?: () => void; // 点击通知时触发的回调函数
duration?: number; // 自动关闭的延时，单位秒，不关闭可以写 0
closable?: boolean; // 是否显示右上角关闭按钮，默认为 true
className?: string; // 自定义 CSS class
dangerouslyUseHTMLString?: boolean;
}
interface Events {
open(config: NoticeOptions): Promise;
info(config: NoticeOptions): Promise;
success(config: NoticeOptions): Promise;
warning(config: NoticeOptions): Promise;
error(config: NoticeOptions): Promise;
close(key: string): void;
destroy(): void;
}
const NotPrefixKey = 'rab-notice';
const NotMoveEnter = `${PREFIX.notice}-move-enter`;
const NotMoveLeave = `${PREFIX.notice}-move-leave`;
const iconTypes = {
info: 'ios-information-circle',
success: 'ios-checkmark-circle',
warning: 'ios-alert',
error: 'ios-close-circle',
loading: 'loading-solid'
};
const DEFAULT_NOTICE: {
top: number;
duration: number;
} = {
top: 24,
duration: 4.5
};
let zIndex = 1180;
// 创建实例的最外层父容器
function createNoticeInsanceWrapper(): HTMLElement {
const NoticeWrapper = createElem('div');
NoticeWrapper.className = `${PREFIX.notice}`;
setCss(NoticeWrapper, 'zIndex', `${zIndex}`);
setCss(NoticeWrapper, 'right', '0');
setTimeout(() => setCss(NoticeWrapper, 'top', `${DEFAULT_NOTICE.top}px`), 0);
document.body.appendChild(NoticeWrapper);
return NoticeWrapper;
}
class $Notice implements Events {
readonly VERSION: string;
readonly instances: Array;
constructor() {
this.VERSION = 'v1.0';
// 存储已经创建的实例，在 destroy方法里需要用到
this.instances = [];
createNoticeInsanceWrapper();
}
public open(config: NoticeOptions): Promise {
this._createInstance('normal', config);
return usePromiseCallback(DEFAULT_NOTICE.duration, config.duration);
}
public info(config: NoticeOptions): Promise {
this._createInstance('info', config);
return usePromiseCallback(DEFAULT_NOTICE.duration, config.duration);
}
public success(config: NoticeOptions): Promise {
this._createInstance('success', config);
return usePromiseCallback(DEFAULT_NOTICE.duration, config.duration);
}
public warning(config: NoticeOptions): Promise {
this._createInstance('warning', config);
return usePromiseCallback(DEFAULT_NOTICE.duration, config.duration);
}
public error(config: NoticeOptions): Promise {
this._createInstance('error', config);
return usePromiseCallback(DEFAULT_NOTICE.duration, config.duration);
}
public config(options: NoticeGlobalAPI): void {
if (options.top) {
DEFAULT_NOTICE.top = options.top;
}
if (options.duration || options.duration === 0) {
DEFAULT_NOTICE.duration = options.duration;
}
}
public close(key: string): void {
destroyElemByKey({
key,
duration: 0.1,
clsLeave: NotMoveLeave,
prefixKey: NotPrefixKey
});
}
public destroy(): void {
this.instances.forEach((instance) => {
destroyElem(instance, {
clsLeave: NotMoveLeave,
duration: 0.1
});
});
// 清空存放的所有实例
this.instances.length = 0;
}
private _autoSetZindex(): void {
zIndex++;
setCss($el(`.${PREFIX.notice}`), 'zIndex', `${zIndex}`);
}
private _createInstance(type: string, config: NoticeOptions): HTMLElement {
this._autoSetZindex();
const Notice = createElem('div');
const NoticeContent = createElem('div');
const NoticeCustomContent = createElem('div');
const NoticeTitle = createElem('div');
const NoticeDesc = createElem('div');
this._setCls(
type,
[Notice, NoticeContent, NoticeCustomContent, NoticeTitle, NoticeDesc],
config.className
);
this._setKey(Notice, config.key);
this._setTitle(NoticeTitle, config.title, config.dangerouslyUseHTMLString);
this._setDesc(
Notice,
NoticeCustomContent,
NoticeDesc,
config.desc,
config.dangerouslyUseHTMLString
);
this._setIcon(type, NoticeCustomContent, NoticeDesc, config.icon);
this._setClosable(Notice, config.closable, config.onClose);
this._customStyle(Notice, config.style);
NoticeCustomContent.append(NoticeTitle, NoticeDesc);
NoticeContent.appendChild(NoticeCustomContent);
Notice.appendChild(NoticeContent);
document.querySelector(`.${PREFIX.notice}`)?.appendChild(Notice);
CssTransition(Notice, {
inOrOut: 'in',
enterCls: NotMoveEnter
});
this.instances.push(Notice);
this._handleNoticeClick(Notice, config.onClick);
this._autoClose(Notice, config.duration);
return Notice;
}
private _setCls(type: string, nodes: Array, customCls?: string): void {
const nodesCls = [
`${PREFIX.noticeChild} ${customCls ? customCls : ''}`,
`${PREFIX.noticeChild}-content`,
`${PREFIX.noticeChild}-custom-content ${PREFIX.notice}-with-${type}`,
`${PREFIX.notice}-title`,
`${PREFIX.notice}-desc`
];
let i = 0;
const { length } = nodes;
for (; i < length; i++) {
const node = nodes[i];
node.className = nodesCls[i];
}
}
private _setKey(node: HTMLElement, key: any): void {
if (!key) return;
node.setAttribute(`${NotPrefixKey}-key`, key);
}
private _setTitle(node: HTMLElement, title?: string, dangerouslyUseHTMLString?: boolean): void {
// 必须设置一个通知提醒标题
if (!title) {
warn('You must set a notification to remind the title');
return;
}
// 是否支持传入 HTML 片段
useHTMLString(node, title, dangerouslyUseHTMLString);
}
private _setDesc(
parent: HTMLElement,
children_custm: HTMLElement,
child_desc: HTMLElement,
desc?: string,
dangerouslyUseHTMLString?: boolean
): void {
if (!desc) return;
parent.classList.add(`${PREFIX.noticeChild}-with-desc`);
children_custm.classList.add(`${PREFIX.notice}-with-desc`);
// 是否支持传入 HTML 片段
useHTMLString(child_desc, desc, dangerouslyUseHTMLString);
}
private _setIcon(
type: string,
child_custom: HTMLElement,
child_desc: HTMLElement,
customIcon?: string
): void {
// 不带状态图标的类型
if (type === 'noraml') return;
if (type !== 'normal' || customIcon) {
child_custom.classList.add(`${PREFIX.notice}-with-icon`);
}
let isOutline = '';
// 带有状态图标并且是否带有提示内容，如果有则将图标设为 outline 外观
if (child_desc.innerHTML) isOutline = '-outline';
const NoticeIcon = createElem('span');
NoticeIcon.className = `${PREFIX.notice}-icon ${PREFIX.notice}-icon-${type}`;
// 是否自定义状态图标
if (customIcon) {
setHtml(NoticeIcon, customIcon);
} else {
// @ts-ignore
const defaultIcon = `;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-page-header', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
events({ onBack }: PHEvent): void;
} {
const target = $el(el) as HTMLElement;
validComps(target, 'page-header');
const backButton = target.querySelector(`.${PREFIX.pageHeader}-back`);
return {
events({ onBack }) {
bind(backButton, 'click', () => {
type.isFn(onBack);
});
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const { title, subTitle } = this._attrs(node);
this._setMainTemplate(node, title, subTitle);
removeAttrs(node, ['title', 'sub-title']);
});
}
private _setMainTemplate(node: Element, title: string, subTitle: string): void {
const template = `
`;
setHtml(node, template);
}
private _attrs(node: Element) {
return {
title: getStrTypeAttr(node, 'title', ''),
subTitle: getStrTypeAttr(node, 'sub-title', '')
};
}
}
export default PageHeader;
================================================
FILE: src/components/poptip/index.ts
================================================
import Poptip from './poptip';
export default Poptip;
================================================
FILE: src/components/poptip/poptip.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import {
$el,
bind,
getBooleanTypeAttr,
getNumTypeAttr,
getStrTypeAttr,
removeAttrs,
setCss,
setHtml
} from '../../dom-utils';
import { clickoutside, CssTransition, _arrow, _Popper } from '../../mixins';
import { type, validComps } from '../../utils';
import PREFIX from '../prefix';
interface Config {
config(
el: string
): {
visible: boolean;
disabled: boolean;
title: string;
content: string;
events: ({ onPopperShow, onPopperHide, onOk, onCancel }: PoptipEvents) => void;
};
}
interface PoptipEvents {
onPopperShow?: () => void;
onPopperHide?: () => void;
onOk?: () => void;
onCancel?: () => void;
}
const STATEKEY = 'visibleState';
const DEFAULTDELAY = 80;
let VISIBLETIMER: any = null,
EVENTTIMER: any = null;
class Poptip implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v2.0';
this.COMPONENTS = $el('r-poptip', { all: true });
this._create(this.COMPONENTS);
_arrow.scrollUpdate();
}
public config(
el: string
): {
visible: boolean;
disabled: boolean;
title: string;
content: string;
events: ({ onPopperShow, onPopperHide, onOk, onCancel }: PoptipEvents) => void;
} {
const target = $el(el) as HTMLElement;
validComps(target, 'poptip');
const { _attrs, _setVisible, _handleTrigger } = Poptip.prototype;
const { trigger, title, content, disabled, placement, offset, confirm } = _attrs(target);
const PoptipRefElem = target.querySelector(`.${PREFIX.poptip}-rel`)! as HTMLElement;
const PoptipPopper = target.querySelector(`.${PREFIX.poptip}-popper`)! as HTMLElement;
const PoptipTitle = target.querySelector(`.${PREFIX.poptip}-title`)!;
const PoptipContent = target.querySelector(`.${PREFIX.poptip}-body-content`)!;
return {
get visible() {
return PoptipPopper.dataset[STATEKEY] === 'show';
},
set visible(newVal: boolean) {
if (newVal && !type.isBol(newVal)) return;
_setVisible(newVal, PoptipRefElem, PoptipPopper, placement, offset);
},
get disabled() {
return disabled;
},
set disabled(newVal: boolean) {
if (newVal && !type.isBol(newVal)) return;
_handleTrigger(
trigger,
confirm,
newVal,
target,
PoptipRefElem,
PoptipPopper,
placement,
offset
);
},
get title() {
return title;
},
set title(newVal: string) {
if (newVal && !type.isStr(newVal)) return;
setHtml(PoptipTitle, newVal);
},
get content() {
return content;
},
set content(newVal: string) {
if (newVal && !type.isStr(newVal)) return;
setHtml(PoptipContent, newVal);
},
events({ onPopperShow, onPopperHide, onOk, onCancel }) {
const visibleEvent = (show: boolean) => {
if (show) {
onPopperShow && type.isFn(onPopperShow);
} else {
onPopperHide && type.isFn(onPopperHide);
}
};
const toogleEv = () => {
setTimeout(() => {
PoptipPopper.dataset[STATEKEY] === 'show'
? visibleEvent(true)
: visibleEvent(false);
}, 200);
};
const clickoutsideEv = () => {
if (PoptipPopper.style.visibility === 'visible') {
setTimeout(() => visibleEvent(false), DEFAULTDELAY);
}
};
if (!confirm) {
if (trigger === 'hover') {
bind(target, 'mouseenter', () => {
if (EVENTTIMER) clearTimeout(EVENTTIMER);
EVENTTIMER = setTimeout(() => visibleEvent(true), DEFAULTDELAY);
});
bind(target, 'mouseleave', () => {
if (EVENTTIMER) clearTimeout(EVENTTIMER);
if (PoptipPopper.dataset[STATEKEY] === 'show')
setTimeout(() => visibleEvent(false), DEFAULTDELAY);
});
}
if (trigger === 'focus') {
bind(PoptipRefElem, 'mousedown', () => visibleEvent(true));
bind(PoptipRefElem, 'mouseup', () => visibleEvent(false));
}
}
if (trigger === 'click' || trigger === 'focus') {
clickoutside(target, clickoutsideEv);
}
if (trigger === 'click') {
bind(PoptipRefElem, 'click', toogleEv);
}
if (confirm) {
const PoptipOkBtn = PoptipPopper.querySelector(`.${PREFIX.button}-primary`);
const PoptipCancelBtn = PoptipPopper.querySelector(`.${PREFIX.button}-text`);
bind(PoptipOkBtn, 'click', () => onOk && type.isFn(onOk));
bind(PoptipCancelBtn, 'click', () => onCancel && type.isFn(onCancel));
}
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const ReferenceElem = node.firstElementChild || node.innerHTML;
const {
trigger,
title,
content,
placement,
padding,
offset,
confirm,
visible,
width,
wordWrap,
disabled,
okText,
cancelText
} = this._attrs(node);
this.setMainTemplate(node, title, content, placement);
const PoptipRel = node.querySelector(`.${PREFIX.poptip}-rel`)!;
const PoptipPopper = node.querySelector(
`.${PREFIX.poptip}-popper`
)! as HTMLEmbedElement;
this.addReferenceElem(PoptipRel, ReferenceElem);
this.setConfirmTemplate(confirm, node, title, okText, cancelText);
this._setPlacement(PoptipRel, PoptipPopper, placement, offset);
this._setVisible(visible, PoptipRel, PoptipPopper, placement, offset);
this._setPadding(node, padding);
this._setWidthAndWordWrap(PoptipPopper, width, wordWrap);
this._handleTrigger(
trigger,
confirm,
disabled,
node,
PoptipRel,
PoptipPopper,
placement,
offset
);
this._handleBtnClick(PoptipRel, PoptipPopper, placement, offset);
removeAttrs(node, [
'width',
'title',
'offset',
'content',
'confirm',
'visible',
'padding',
'disabled',
'trigger',
'placement',
'word-wrap',
'ok-text',
'cancel-text'
]);
});
}
private setMainTemplate(
node: Element,
title: string,
content: string,
placement: string
): void {
const template = `
${title ? `
${title}
` : ''}
`;
setHtml(node, template);
}
private addReferenceElem(child: Element, ReferenceElem: string | Element): void {
if (typeof ReferenceElem === 'string') {
setHtml(child, ReferenceElem);
} else if (ReferenceElem instanceof Element) {
child.appendChild(ReferenceElem);
}
}
private setConfirmTemplate(
confirm: boolean,
node: Element,
title: string,
okText: string,
cancelText: string
): void {
if (!confirm) return;
const template = `
${title}
`;
const PoptipBody = node.querySelector(`.${PREFIX.poptip}-body`)!;
setHtml(PoptipBody, template);
node.querySelector(`.${PREFIX.poptip}-title`)!.remove();
node.classList.add(`${PREFIX.poptip}-confirm`);
}
private _handleTrigger(
type: string,
confirm: boolean,
disabled: boolean,
node: Element,
refElem: Element,
popper: HTMLElement,
placement: string,
offset: number
): void {
if (disabled) return;
const show = (show: boolean, e?: MouseEvent) => {
if (e) e.stopPropagation();
this._setVisible(show, refElem, popper, placement, offset);
};
if (!confirm) {
if (type === 'hover') {
bind(node, 'mouseenter', (e: MouseEvent) => {
if (VISIBLETIMER) clearTimeout(VISIBLETIMER);
if (popper.dataset[STATEKEY] === 'show') return;
VISIBLETIMER = setTimeout(() => show(true, e), DEFAULTDELAY);
});
bind(node, 'mouseleave', (e: MouseEvent) => {
if (VISIBLETIMER) clearTimeout(VISIBLETIMER);
if (popper.dataset[STATEKEY] === 'show')
setTimeout(() => show(false, e), DEFAULTDELAY);
});
}
if (type === 'focus') {
bind(refElem, 'mousedown', (e: MouseEvent) => show(true, e));
bind(refElem, 'mouseup', (e: MouseEvent) => show(false, e));
}
}
if (type === 'click') {
const hide = () => {
if (popper.dataset[STATEKEY] === 'close') return;
show(false);
};
const clickEv = (e: MouseEvent) => {
const poppers = document.querySelectorAll(`.${PREFIX.poptip}-popper`);
poppers.forEach((child) => {
const otherPopper = child as HTMLElement;
if (otherPopper.dataset[STATEKEY] === 'show') {
this._setVisible(false, refElem, otherPopper, placement, offset);
}
});
popper.style.visibility === 'visible' ? show(false, e) : show(true, e);
};
clickoutside(node, hide);
bind(refElem, 'click', (e: MouseEvent) => clickEv(e));
}
}
private _handleBtnClick(
refElem: Element,
popper: HTMLElement,
placement: string,
offset: number
): void {
const PoptipOkBtn = popper.querySelector(`.${PREFIX.button}-primary`);
const PoptipCancelBtn = popper.querySelector(`.${PREFIX.button}-text`);
if (!PoptipOkBtn) return;
const hidden = () => this._setVisible(false, refElem, popper, placement, offset);
bind(PoptipOkBtn, 'click', hidden);
bind(PoptipCancelBtn, 'click', hidden);
}
private _setVisible(
visible: boolean,
refElem: Element,
popper: HTMLElement,
placement: string,
offset: number
): void {
const { _setPlacement, _visibleTransition } = Poptip.prototype;
if (visible) {
popper.dataset[STATEKEY] = 'show';
_visibleTransition('in', popper);
_setPlacement(refElem, popper, placement, offset);
} else {
popper.dataset[STATEKEY] = 'close';
setTimeout(() => {
popper.dataset[STATEKEY] === 'close' && _visibleTransition('out', popper);
}, 0);
}
}
private _setPlacement(
refElem: Element,
popper: HTMLElement,
placement: string,
offset: number
): void {
_Popper._newCreatePopper(refElem, popper, placement, offset);
}
private _visibleTransition(type: 'in' | 'out', popper: HTMLElement): void {
const aniCls =
type === 'in'
? { enterCls: 'zoom-big-fast-enter' }
: { leaveCls: 'zoom-big-fast-leave' };
CssTransition(popper, {
inOrOut: type,
...aniCls,
rmCls: true,
timeout: 190
});
}
private _setWidthAndWordWrap(child: Element, width: number, wordWrap: boolean): void {
setCss(child, 'width', `${width}px`);
if (!wordWrap) return;
const PoptipBodyContent = child.querySelector(`.${PREFIX.poptip}-body-content`)!;
PoptipBodyContent.classList.add(`${PREFIX.poptip}-body-content-word-wrap`);
}
private _setPadding(node: Element, padding: string): void {
if (!padding) return;
setCss(node.querySelector(`.${PREFIX.poptip}-title`)!, 'padding', padding);
setCss(node.querySelector(`.${PREFIX.poptip}-body`)!, 'padding', padding);
}
private _attrs(node: Element) {
return {
width: getNumTypeAttr(node, 'width', -1),
offset: getNumTypeAttr(node, 'offset', 0),
title: getStrTypeAttr(node, 'title', ''),
okText: getStrTypeAttr(node, 'ok-text', '确定'),
content: getStrTypeAttr(node, 'content', ''),
trigger: getStrTypeAttr(node, 'trigger', 'click'),
padding: getStrTypeAttr(node, 'padding', ''),
placement: getStrTypeAttr(node, 'placement', 'top'),
cancelText: getStrTypeAttr(node, 'cancel-text', '取消'),
confirm: getBooleanTypeAttr(node, 'confirm'),
visible: getBooleanTypeAttr(node, 'visible'),
disabled: getBooleanTypeAttr(node, 'disabled'),
wordWrap: getBooleanTypeAttr(node, 'word-wrap')
};
}
}
export default Poptip;
================================================
FILE: src/components/prefix.ts
================================================
const prefixCls = 'rab-';
export default {
affix: `${prefixCls}affix`,
alert: `${prefixCls}alert`,
avatar: `${prefixCls}avatar`,
backtop: `${prefixCls}back-top`,
badge: `${prefixCls}badge`,
breadcrumb: `${prefixCls}breadcrumb`,
button: `${prefixCls}btn`,
card: `${prefixCls}card`,
carousel: `${prefixCls}carousel`,
checkbox: `${prefixCls}checkbox`,
circle: `${prefixCls}chart-circle`,
collapse: `${prefixCls}collapse`,
divider: `${prefixCls}divider`,
drawer: `${prefixCls}drawer`,
dropdown: `${prefixCls}dropdown`,
empty: `${prefixCls}empty`,
jumbotron: `${prefixCls}jumbotron`,
inputnb: `${prefixCls}input-number`,
icon: `${prefixCls}icon`,
loadingBar: `${prefixCls}loading-bar`,
message: `${prefixCls}message`,
messageChild: `${prefixCls}message-notice`,
modal: `${prefixCls}modal`,
notice: `${prefixCls}notice`,
pageHeader: `${prefixCls}page-header`,
poptip: `${prefixCls}poptip`,
noticeChild: `${prefixCls}notice-notice`,
progress: `${prefixCls}progress`,
radio: `${prefixCls}radio`,
rate: `${prefixCls}rate`,
result: `${prefixCls}result`,
select: `${prefixCls}select`,
skeleton: `${prefixCls}skeleton`,
switch: `${prefixCls}switch`,
tabs: `${prefixCls}tabs`,
tag: `${prefixCls}tag`,
spin: `${prefixCls}spin`,
steps: `${prefixCls}steps`,
time: `${prefixCls}time`,
timeline: `${prefixCls}timeline`,
tooltip: `${prefixCls}tooltip`
};
================================================
FILE: src/components/progress/index.ts
================================================
import Progress from './progress';
export default Progress;
================================================
FILE: src/components/progress/progress.ts
================================================
import { type, validComps } from '../../utils';
import { $el, createElem, removeAttrs, setCss, setHtml, setText } from '../../dom-utils';
import PREFIX from '../prefix';
interface Config {
config(
el: string
): {
percent: number;
successPercent: number;
};
}
const PrgesIconType = {
success: ';
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-progress', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
percent: number;
successPercent: number;
} {
const target = $el(el);
validComps(target, 'progress');
const progress = target.querySelector(`.${PREFIX.progress}-bg`);
const progressSucs = target.querySelector(`.${PREFIX.progress}-success-bg`);
const progressText = target.querySelector(`.${PREFIX.progress}-inner-text`);
return {
get percent() {
return progress;
},
set percent(newVal: number) {
if (!type.isNum(newVal) || newVal == progress.style.width) return;
if (progressText) setHtml(progressText, `${newVal}%`);
setCss(progress, 'width', `${newVal}%`);
},
get successPercent() {
return progressSucs;
},
set successPercent(newVal) {
if (!type.isNum(newVal) || newVal == progressSucs.style.width) return;
setCss(progressSucs, 'width', `${newVal}%`);
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
this._createChildNodes(node);
removeAttrs(node, [
'percent',
'show-text',
'text-inside',
'stroke-width',
'stroke-color',
'success-percent'
]);
});
}
private _createChildNodes(wrapper: Element): void {
const PgrsOuter = createElem('div');
const PgrsInner = createElem('div');
const PgrsBar = createElem('div');
const PgrsBarSucess = createElem('div');
PgrsOuter.className = `${PREFIX.progress}-outer`;
PgrsInner.className = `${PREFIX.progress}-inner`;
PgrsBar.className = `${PREFIX.progress}-bg`;
PgrsBarSucess.className = `${PREFIX.progress}-success-bg`;
this._setPercent(wrapper, PgrsBar, PgrsBarSucess);
this._setStrokeWidth(wrapper, PgrsBar, PgrsBarSucess);
this._setStrokeColor(wrapper, PgrsBar);
PgrsInner.append(PgrsBar, PgrsBarSucess);
PgrsOuter.appendChild(PgrsInner);
wrapper.appendChild(PgrsOuter);
this._showText(wrapper, PgrsBar);
}
private _setPercent(wrapper: Element, bar: HTMLElement, successBar: HTMLElement): void {
const percent = `${this._getPercent(wrapper)}%`;
const successPercent = `${this._getSuccessPercent(wrapper)}%`;
setCss(bar, 'width', percent);
setCss(successBar, 'width', successPercent);
}
private _setStrokeWidth(wrapper: Element, bar: HTMLElement, successBar: HTMLElement): void {
const strokeWidth = `${this._getStrokeWidth(wrapper)}px`;
setCss(bar, 'height', strokeWidth);
setCss(successBar, 'height', strokeWidth);
}
private _showText(wrapper: Element, PgrsBar: HTMLElement): void {
if (!this._isShowText(wrapper)) return;
const PgrsTextWrapper = createElem('div');
const PgresText = createElem('span');
PgrsTextWrapper.className = `${PREFIX.progress}-text`;
PgresText.className = `${PREFIX.progress}-inner-text`;
const percentText = `${this._getPercent(wrapper)}%`;
setText(PgresText, percentText);
if (!this._isTextInside(wrapper)) {
wrapper.className = `${PREFIX.progress}-show-info`;
if (this._getStatus(wrapper) === 'success') {
setHtml(PgresText, PrgesIconType.success);
} else if (this._getStatus(wrapper) === 'warning') {
setHtml(PgresText, PrgesIconType.warning);
} else if (this._getStatus(wrapper) === 'wrong') {
setHtml(PgresText, PrgesIconType.wrong);
}
PgrsTextWrapper.appendChild(PgresText);
wrapper.appendChild(PgrsTextWrapper);
} else {
PgrsBar.appendChild(PgresText);
}
}
private _setStrokeColor(wrapper: Element, PgrsBar: HTMLElement): void {
const { from, to } = this._getStrokeColor(wrapper);
if (from.length || to.length) {
const strokeColor = `linear-gradient(to right, ${from} 0%, ${to} 100%)`;
setCss(PgrsBar, 'backgroundImage', strokeColor);
}
}
private _getStatus(node: Element): string | null {
return node.getAttribute('status');
}
private _getPercent(node: Element): string {
return node.getAttribute('percent') || '0';
}
private _getSuccessPercent(node: Element): string {
return node.getAttribute('success-percent') || '0';
}
private _getStrokeWidth(node: Element): string {
return node.getAttribute('stroke-width') || '10';
}
private _getStrokeColor(
node: Element
): {
from: Array;
to: Array;
} {
if (!node.getAttribute('stroke-color')) {
return {
from: [],
to: []
};
} else {
/**
* 转为真实数组
* "['','']" -> ['','']
*/
const strArr: string = node.getAttribute('stroke-color')?.replace(/'/g, '"') || '';
const colorArr = JSON.parse(strArr);
return {
from: colorArr[0],
to: colorArr[1]
};
}
}
private _isTextInside(node: Element): boolean {
return node.getAttribute('text-inside') === 'true';
}
private _isShowText(node: Element): boolean {
if (node.getAttribute('show-text') === 'false') return false;
else return true;
}
}
export default Progress;
================================================
FILE: src/components/radio/index.ts
================================================
import Radio from './radio';
export default Radio;
================================================
FILE: src/components/radio/radio.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { type, validComps } from '../../utils';
import {
$el,
bind,
getBooleanTypeAttr,
getStrTypeAttr,
removeAttrs,
setHtml,
siblings
} from '../../dom-utils';
import PREFIX from '../prefix';
interface Config {
config(
el: string
): {
checked: boolean;
value: string;
events({ onChange }: RadioEvent): void;
};
}
interface ItemData {
index: number;
label: string;
current: Element;
}
interface RadioEvent {
onChange: (param: boolean & ItemData) => void;
}
class Radio implements Config {
readonly VERSION: string;
private COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-radio', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
checked: boolean;
value: string;
events({ onChange }: RadioEvent): void;
} {
const target = $el(el) as HTMLElement;
const isGroup = target.tagName.toLowerCase() == 'r-radio-group';
// 排除 group 项
if (!isGroup) {
validComps(target, 'radio');
} else {
validComps(target, 'radio-group');
}
const {
_isChecked,
_isDisabled,
_setSingleChecked,
_setCurrentlyChecked
} = Radio.prototype;
return {
get checked() {
return !isGroup && _isChecked(target);
},
set checked(newVal: boolean) {
if (isGroup || !type.isBol(newVal)) return;
_setSingleChecked(target, newVal);
},
get value() {
// @ts-ignore
return isGroup && target.getAttribute('value');
},
set value(newVal: string) {
if (!isGroup && !type.isStr(newVal)) return;
Array.from(target.children).forEach((child) => {
const label = child.getAttribute('label')!;
_setCurrentlyChecked(child, newVal, label);
});
},
events({ onChange }) {
if (!isGroup) {
bind(target, 'click', () => {
if (_isDisabled(target)) return false;
onChange && type.isFn(onChange, true);
});
} else {
const data = Object.create(null);
bind(target, 'click', () => {
Array.from(target.children).forEach((child, index) => {
if (_isDisabled(child)) return false;
data['index'] = index;
data['label'] = child.getAttribute('label');
data['current'] = child;
if (_isChecked(child)) onChange && type.isFn(onChange, data);
});
});
}
}
};
}
private _create(COMPONENTS: NodeListOf) {
COMPONENTS.forEach((node) => {
const { checked, label, icon, name } = this._attrs(node);
const content = setHtml(node);
const RadioGroupWrapper = this._getGroupElm(node);
if (RadioGroupWrapper) {
const { value } = this._attrs(RadioGroupWrapper);
this._setCurrentlyChecked(node, value, label);
}
this._setMainTemplate(node, content, name);
this._setSingleChecked(node, checked, RadioGroupWrapper);
this._setIcon(node, icon);
this._handleClick(node, RadioGroupWrapper);
removeAttrs(node, ['checked', 'icon']);
});
}
private _setMainTemplate(node: Element, content: string, name: string): void {
const template = `
${content}
`;
setHtml(node, template);
}
// 设置单个radio选中
private _setSingleChecked(
node: Element,
checked: boolean,
groupWrapper?: Element | null
): void {
if (groupWrapper) return;
checked
? node.classList.add(`${PREFIX.radio}-checked`)
: node.classList.remove(`${PREFIX.radio}-checked`);
}
// 设置radio组的当前选中项
private _setCurrentlyChecked(node: Element, value: string, label: string): void {
if (value !== label) return;
node.classList.add(`${PREFIX.radio}-wrapper-checked`);
node.classList.add(`${PREFIX.radio}-checked`);
siblings(node).forEach((o: Element) => {
o.classList.remove(`${PREFIX.radio}-wrapper-checked`);
o.classList.remove(`${PREFIX.radio}-checked`);
});
}
private _setIcon(node: Element, icon: string): void {
if (!icon) return;
const template = `;
constructor() {
this.VERSION = 'v1.1';
this.COMPONENTS = $el('r-result', { all: true });
this._create(this.COMPONENTS);
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
// v1.1 增加占位节点的组成数量判断
if (moreThanOneNode(node)) return;
const { status, title, subTitle, icon, extra } = this._attrs(node);
const placeholderNode = node.firstElementChild;
this._setMainTemplate(node);
this._setStatus(node, status);
this._setTitle(node, title, subTitle);
this._setExtraContent(node, extra);
this._setComplexDesc(node, placeholderNode!);
this._setCustomIcon(node, icon);
removeAttrs(node, ['title', 'subtitle', 'status', 'icon', 'extra']);
});
}
private _setMainTemplate(node: Element): void {
const template = `
`;
setHtml(node, template);
}
private _setStatus(node: Element, status: string): void {
node.classList.add(`${PREFIX.result}-${status}`);
const ResultIcon = node.querySelector(`.${PREFIX.result}-icon`)!;
const I = ResultIcon.querySelector('i')!;
const iconType = this._getStatusIcon(status);
const otherStatus = ['403', '404', '500'];
if (otherStatus.includes(status)) {
ResultIcon.classList.add(`${PREFIX.result}-image`);
ResultIcon.removeChild(I);
setHtml(ResultIcon, `;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-skeleton', { all: true });
this._create(this.COMPONENTS);
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const {
active,
title,
paragraph,
avatar,
titleWidth,
paragraphRows,
paragraphWidth,
avatarSize,
avatarShape
} = this._attrs(node);
this._setActive(node, active);
this._setMainTemplate(node);
this._setTitle(node, title, titleWidth);
this._showParagraph(node, paragraph, paragraphRows, paragraphWidth);
this._showAvatar(node, avatar, avatarSize, avatarShape);
removeAttrs(node, [
'active',
'title',
'paragraph',
'avatar',
'title-width',
'paragraph-width',
'paragraph-rows',
'avatar-shape',
'avatar-size'
]);
});
}
private _setActive(node: Element, active: boolean): void {
if (!active) return;
node.classList.add(`${PREFIX.skeleton}-active`);
}
private _setMainTemplate(node: Element): void {
const template = `
`;
setHtml(node, template);
}
private _setTitle(node: Element, isShow: string, width: number): void {
const Title = node.querySelector(`.${PREFIX.skeleton}-title`)!;
this._setTitleWidth(Title, width);
if (isShow === 'false') {
node.removeChild(Title);
}
}
private _setTitleWidth(titleElm: Element, titleWidth: number): void {
setCss(titleElm, 'width', `${titleWidth}%`);
}
private _showParagraph(node: Element, isShow: string, rows: number, rowsWidth: any): void {
const Paragraph = node.querySelector(`.${PREFIX.skeleton}-paragraph`)!;
this._setParagraphRows(Paragraph, rows);
this._setParagraphRowsWidth(Paragraph, rowsWidth);
if (isShow === 'false') {
node.removeChild(Paragraph!);
}
}
private _setParagraphRows(pgELm: Element, rows: number): void {
if (!rows) return;
const Fragment = document.createDocumentFragment();
let i = 0;
for (; i < rows; i++) {
const Row = createElem('li');
Fragment.appendChild(Row);
}
setHtml(pgELm, '');
pgELm.appendChild(Fragment);
}
private _setParagraphRowsWidth(pgELm: Element, width: number | number[] | string[]): void {
if (typeof width === 'number') {
setCss(pgELm.querySelector(`.${PREFIX.skeleton}-paragraph > li`), 'width', `${width}%`);
}
if (Array.isArray(width) && width.length) {
const Rows = pgELm.querySelectorAll(`.${PREFIX.skeleton}-paragraph > li`);
let i = 0;
for (; i < width.length; i++) {
const rowWidth = width[i];
const Row = Rows[i];
Row ? setCss(Row, 'width', `${rowWidth}%`) : null;
}
}
}
private _showAvatar(node: Element, avatar: boolean, size: string, shape: string): void {
if (!avatar) return;
const template = `
`;
node.insertAdjacentHTML('afterbegin', template);
node.classList.add(`${PREFIX.skeleton}-with-avatar`);
setCss(node.querySelector(`.${PREFIX.skeleton}-title`), 'width', '50%');
}
private _attrs(node: Element) {
return {
active: getBooleanTypeAttr(node, 'active'),
avatar: getBooleanTypeAttr(node, 'avatar'),
title: getStrTypeAttr(node, 'title', 'true'),
paragraph: getStrTypeAttr(node, 'paragraph', 'true'),
avatarSize: getStrTypeAttr(node, 'avatar-size', 'large'),
avatarShape: getStrTypeAttr(node, 'avatar-shape', 'circle'),
titleWidth: getNumTypeAttr(node, 'title-width'),
paragraphWidth:
getNumTypeAttr(node, 'paragraph-width', 0) ||
getArrTypeAttr(node, 'paragraph-width'),
paragraphRows: getNumTypeAttr(node, 'paragraph-rows')
};
}
}
export default Skeleton;
================================================
FILE: src/components/spin/index.ts
================================================
import Spin from './spin';
export default Spin;
================================================
FILE: src/components/spin/spin.ts
================================================
import PREFIX from '../prefix';
import { $el, setHtml } from '../../dom-utils';
import { CssTransition, Scrollable } from '../../mixins';
import { destroyElem } from '../../utils';
let spinZIndex = 2010;
class Spin {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-spin', { all: true });
this._create(this.COMPONENTS);
}
public show({ content = '' } = {}): void {
Scrollable({ scroll: false, lock: false });
const template = `
${this._createChildTemplate(content)}
`;
const fragment = document.createRange().createContextualFragment(template);
document.body.appendChild(fragment);
CssTransition($el(`.${PREFIX.spin}-fullscreen`), {
inOrOut: 'in',
enterCls: 'rab-fade-in'
});
}
public hide(): void {
Scrollable({ scroll: true, lock: true });
const spinElem = $el(`.${PREFIX.spin}-fullscreen`);
if (spinElem) destroyElem(spinElem, { fadeOut: true });
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const customContent = setHtml(node);
customContent ? node.classList.add(`${PREFIX.spin}-show-text`) : '';
setHtml(node, this._createChildTemplate(customContent));
});
}
private _createChildTemplate(content: string): string {
const template = `
`;
return template;
}
}
export default Spin;
================================================
FILE: src/components/steps/index.ts
================================================
import Steps from './steps';
export default Steps;
================================================
FILE: src/components/steps/steps.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import {
$el,
getNumTypeAttr,
getStrTypeAttr,
nextAll,
prevAll,
removeAttrs,
setCss,
setHtml
} from '../../dom-utils';
import { warn } from '../../mixins';
import { type, validComps } from '../../utils';
import PREFIX from '../prefix';
interface Config {
config(
el: string
): {
current: number;
title: string;
content: string;
status: string;
itemStatus: string[];
};
}
class Steps implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = '1.0';
this.COMPONENTS = $el('r-steps', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
current: number;
title: string;
content: string;
status: string;
itemStatus: string[];
} {
const target = $el(el) as HTMLElement;
validComps(target, 'steps');
const { _setCurrentStep, _setStatus, _setStatusIcon } = Steps.prototype;
const _current = target.dataset['current']!;
const StepsTitle = target.querySelector(`.${PREFIX.steps}-title`)!;
const StepsContent = target.querySelector(`.${PREFIX.steps}-content`)!;
const StepsStep = target.querySelectorAll('r-step')!;
const setTitleOrContent = (elem: Element, val: string) => {
if (val && !type.isStr(val)) return;
setHtml(elem, val);
};
return {
get current() {
return Number(target.dataset['current']);
},
set current(newVal: number) {
if (!type.isNum(newVal)) return;
_setCurrentStep(target, newVal, target.dataset['status']!);
},
get title() {
return setHtml(StepsTitle);
},
set title(newVal: string) {
setTitleOrContent(StepsTitle, newVal);
},
get content() {
return setHtml(StepsContent);
},
set content(newVal: string) {
setTitleOrContent(StepsContent, newVal);
},
get status() {
return target.dataset['status']!;
},
set status(newVal: string) {
if (newVal && !type.isStr(newVal)) return;
const currentStep = target.querySelector(`r-step[data-index="${_current}"]`)!;
_setStatus(target, currentStep, newVal);
},
get itemStatus() {
return [];
},
set itemStatus(newVal: string[]) {
if (newVal && !type.isArr(newVal)) return;
const changeStatus = (elem: Element, status: string) => {
elem.setAttribute('status', status);
_setStatusIcon(status, elem);
};
if (newVal.length == 1) {
const step = StepsStep[0];
changeStatus(step, newVal[0]);
return;
}
StepsStep.forEach((step, idx) =>
newVal[idx] ? changeStatus(step, newVal[idx]) : ''
);
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const { current, status, direction } = this._attrs(node);
const StepsStepItem = node.querySelectorAll('r-step');
this._setDirection(node, direction);
this._setStepChildren(StepsStepItem);
this._setCurrentStep(node, current, status);
removeAttrs(node, ['current', 'status']);
});
}
private _setDirection(node: Element, direction: string): void {
node.setAttribute('direction', `${direction}`);
}
private _setStepChildren(stepItem: NodeListOf): void {
stepItem.forEach((step, idx) => {
// @ts-ignore
step.dataset['index'] = `${idx}`;
this._setStatusFlag(step);
const { icon, title, content } = this._attrs(step);
const stepsText = idx + 1;
const template = `
`;
setHtml(step, template);
this._setCustomIcon(step, icon);
removeAttrs(step, ['title', 'content', 'icon']);
});
}
private _setStatusFlag(step: Element): void {
const status = step.getAttribute('status');
// 如果用户在步骤项设置了status则为该项打上标记，避免被自动设置的默认状态覆盖
if (status) {
// @ts-ignore
step.dataset['specifiesStatus'] = status;
}
}
private _setCurrentStep(node: Element, current: number, status: string): void {
const len = node.childElementCount - 1;
// 防止溢出边界
if (current > len) {
warn(
`The currently active step item you set does not exist in the . --> "${current}"`
);
console.error(node);
current = len;
}
// @ts-ignore
node.dataset['current'] = current;
const { _setStatus } = Steps.prototype;
const currentStep = node.querySelector(`r-step[data-index="${current}"]`)!;
_setStatus(node, currentStep, status);
}
private _setStatus(node: Element, currentStep: Element, status: string): void {
// @ts-ignore
node.dataset['status'] = status;
const { _setStatusIcon, _setPrevAndNextStatus, _setNextError } = Steps.prototype;
// @ts-ignore
const isAutoStatus = currentStep.dataset['autoStatus'];
const selfStatus = currentStep.getAttribute('status');
// 1.如果步骤项设置了status则优先使用该状态，不包括打上autoStatus的标记项。
// 2.如果步骤项父容器指定了某项步骤项为活跃状态，并且指定了 status 则使用该状态。
if (selfStatus && isAutoStatus !== '') {
currentStep.setAttribute('status', selfStatus);
_setStatusIcon(selfStatus, currentStep);
} else {
currentStep.setAttribute('status', status);
_setStatusIcon(status, currentStep);
}
_setPrevAndNextStatus('prev', currentStep, _setStatusIcon);
_setPrevAndNextStatus('next', currentStep, _setStatusIcon);
_setNextError(node);
}
private _setPrevAndNextStatus(
type: 'prev' | 'next',
currentStep: Element,
setStatusIcon: any
): void {
// @ts-ignore
const func = type === 'prev' ? prevAll : nextAll;
const defaultStatus = type === 'prev' ? 'finish' : 'wait';
func(currentStep).forEach((step) => {
// @ts-ignore
const hasSetStatus = step.dataset['specifiesStatus'];
// 当前步骤项位置的其他节点如果没有提示设置status，则默认设置为 finish / wait，并打上标记
// 如果其中有某个设置了则略过
if (!hasSetStatus) {
// @ts-ignore
step.dataset['autoStatus'] = '';
step.setAttribute('status', defaultStatus);
setStatusIcon(defaultStatus, step);
} else {
setStatusIcon(hasSetStatus, step);
}
});
}
private _setStatusIcon(status: string, step: Element): void {
// @ts-ignore
const isUseCustomIcon: boolean = step.dataset['useIcon'] === 'true';
// 如果使用了自定义图标则略过
if (isUseCustomIcon) return;
const StepsIcon = step.querySelector('#stepsIcon')!;
const StepsText = StepsIcon.nextElementSibling!;
// 步骤项状态不为finish或error则显示步骤数字、隐藏图标容器，反之。
if (status !== 'finish' && status !== 'error') {
setCss(StepsIcon, 'display', 'none');
setCss(StepsText, 'display', '');
return;
}
setCss(StepsIcon, 'display', '');
setCss(StepsText, 'display', 'none');
let iconType = '';
if (status === 'finish') {
iconType = 'ios-checkmark';
}
if (status === 'error') {
iconType = 'ios-close';
}
StepsIcon.className = `${PREFIX.steps}-icon ${PREFIX.icon} ${PREFIX.icon}-${iconType}`;
}
private _setCustomIcon(step: Element, icon: string): void {
if (!icon) return;
// @ts-ignore
step.dataset['useIcon'] = 'true';
step.classList.add(`${PREFIX.steps}-custom`);
const StepsIcon = step.querySelector('#stepsIcon')!;
StepsIcon.classList.add(`${PREFIX.icon}`);
StepsIcon.classList.add(`${PREFIX.icon}-${icon}`);
setCss(StepsIcon.nextElementSibling!, 'display', 'none');
}
private _setNextError(node: Element): void {
const StepsStep = node.querySelectorAll('r-step');
StepsStep.forEach((step, idx) => {
if (step.getAttribute('status') === 'error' && idx !== 0) {
const prevStep = StepsStep[idx - 1];
if (prevStep.getAttribute('status') === 'error') {
prevStep.classList.add(`${PREFIX.steps}-next-error`);
} else {
prevStep.classList.remove(`${PREFIX.steps}-next-error`);
}
}
});
}
private _attrs(node: Element) {
return {
current: getNumTypeAttr(node, 'current', 0),
icon: getStrTypeAttr(node, 'icon', ''),
title: getStrTypeAttr(node, 'title', ''),
status: getStrTypeAttr(node, 'status', 'process'),
content: getStrTypeAttr(node, 'content', ''),
direction: getStrTypeAttr(node, 'direction', 'horizontal')
};
}
}
export default Steps;
================================================
FILE: src/components/switch/index.ts
================================================
import Switch from './switch';
export default Switch;
================================================
FILE: src/components/switch/switch.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import {
$el,
bind,
getBooleanTypeAttr,
getStrTypeAttr,
removeAttrs,
setCss,
setHtml
} from '../../dom-utils';
import { type, validComps } from '../../utils';
import PREFIX from '../prefix';
interface Config {
config(
el: string
): {
checked: boolean;
disabled: boolean;
loading: boolean;
events({ onChange }: SwitchEvent): void;
};
}
interface SwitchEvent {
onChange?: (checked: boolean) => void;
}
class Switch implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = '1.0';
this.COMPONENTS = $el('r-switch', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
checked: boolean;
disabled: boolean;
loading: boolean;
events({ onChange }: SwitchEvent): void;
} {
const target = $el(el) as HTMLElement;
validComps(target, 'switch');
const Input = target.querySelector('input[type="hidden"]') as HTMLInputElement;
const isChecked: boolean = Input.value === 'true';
const isDisabled: boolean = target.classList.contains(`${PREFIX.switch}-disabled`);
const isLoading: boolean = target.classList.contains(`${PREFIX.switch}-loading`);
const changeState = (flag: boolean, state: boolean, cls: string) => {
if (flag && !type.isBol(flag)) return;
if (flag && state) return;
else target.classList.add(`${PREFIX.switch}-${cls}`);
if (flag == false) target.classList.remove(`${PREFIX.switch}-${cls}`);
};
return {
get checked() {
return isChecked;
},
set checked(newVal: boolean) {
changeState(newVal, isChecked, 'checked');
},
get disabled() {
return isDisabled;
},
set disabled(newVal: boolean) {
changeState(newVal, isDisabled, 'disabled');
},
get loading() {
return isLoading;
},
set loading(newVal: boolean) {
changeState(newVal, isLoading, 'loading');
},
events({ onChange }: SwitchEvent) {
let checked: boolean;
const handler = () => {
checked = JSON.parse(Input.value);
onChange && type.isFn(onChange, checked);
};
bind(target, 'click', handler);
}
};
}
private _create(COMPONENTS: NodeListOf) {
COMPONENTS.forEach((node) => {
node.setAttribute('tabindex', '0');
const {
checked,
loading,
disabled,
size,
open,
close,
trueColor,
falseColor
} = this._attrs(node);
this._setSize(node, size);
this._setMainTemplate(node);
this._setDisabled(node, disabled);
this._setLoading(node, loading);
this._setStatusBgc(node, checked, trueColor, falseColor);
const SwitchInner = node.querySelector(`.${PREFIX.switch}-inner`)!;
const HiddenInput = node.querySelector('input[type="hidden"]') as HTMLInputElement;
this._setChecked(node, HiddenInput, checked);
this._setStatusText(SwitchInner, checked, open, close);
this._handleChange(node, HiddenInput, SwitchInner, {
open,
close,
trueColor,
falseColor
});
removeAttrs(node, [
'checked',
'loading',
'disabled',
'size',
'open',
'close',
'true-color',
'false-color'
]);
});
}
private _setDisabled(node: Element, disabled: boolean) {
if (!disabled) return;
node.classList.add(`${PREFIX.switch}-disabled`);
}
private _setLoading(node: Element, loading: boolean): void {
if (!loading) return;
node.classList.add(`${PREFIX.switch}-loading`);
}
private _setSize(node: Element, size: string): void {
if (!size || size === 'default') return;
node.classList.add(`${PREFIX.switch}-${size}`);
}
private _setMainTemplate(node: Element): void {
const template = `
;
constructor() {
this.VERSION = '1.0';
this.COMPONENTS = $el('r-tabs', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
activeIndex: string;
events({ onClick, onTabRemove }: TabsEvents): void;
} {
const target = $el(el) as HTMLElement;
validComps(target, 'tabs');
const TabTabs = target.querySelectorAll(`.${PREFIX.tabs}-tab`);
const TabPanes = target.querySelectorAll('r-tab-pane');
const { _attrs, _changeTab, _changePane } = Tabs.prototype;
const { activeIndex } = _attrs(target);
return {
get activeIndex() {
return activeIndex;
},
set activeIndex(newVal: string) {
if (!type.isStr(newVal)) return;
TabPanes.forEach((pane, i) => {
const p = pane as HTMLElement;
if (newVal !== p.dataset.paneKey) return;
_changeTab(TabTabs[i], true);
_changePane([false, p.parentElement!, i, 'true', p]);
});
},
events({ onClick, onTabRemove }) {
TabTabs.forEach((tab, i) => {
const tabClose = tab.querySelector(`.${PREFIX.tabs}-close`);
const clickEv = () => {
const TabPane = TabPanes[i] as HTMLElement;
const key = TabPane.dataset.paneKey;
onClick && type.isFn(onClick, key);
if (!tabClose) return;
onTabRemove && type.isFn(onTabRemove, key);
};
bind(tab, 'click', clickEv);
if (!tabClose) return;
bind(tabClose, 'click', clickEv);
});
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const tabPanes = node.querySelectorAll('r-tab-pane');
const { activeIndex, size, type, closable, animated } = this._attrs(node);
this._setType(node, type);
this._setSize(node, type, size);
this._setNoAnimation(node, animated);
this._setBodyTemplate(node);
this._setTabPane([node, tabPanes, activeIndex, type, animated, closable]);
removeAttrs(node, ['active-index', 'type', 'size', 'closable', 'animated']);
});
}
private _setType(node: Element, type: string): void {
if (type !== 'card') return;
node.classList.add(`${PREFIX.tabs}-${type}`);
}
private _setSize(node: Element, type: string, size: string): void {
if (type !== 'line' || size !== 'small') return;
node.classList.add(`${PREFIX.tabs}-mini`);
}
private _setNoAnimation(node: Element, animated: string): void {
if (animated === 'true') return;
node.classList.add(`${PREFIX.tabs}-no-animation`);
}
private _setBodyTemplate(node: Element): void {
const template = `
`;
setHtml(node, template);
}
private _setTabPane(
args: [Element, NodeListOf, string, string, string, boolean]
): void {
const [node, panes, activekey, type, animated, closable] = args;
const TabNav = node.querySelector(`.${PREFIX.tabs}-nav`);
const TabPaneContainer = node.querySelector(`.${PREFIX.tabs}-content`);
const Fragment = document.createDocumentFragment();
panes.forEach((pane, idx) => {
const { index: key, tab, icon, closable: separateClose, disabled } = this._paneAttrs(
pane
);
const TabsTab: HTMLElement = this._setTab(TabNav!, tab);
this._setTabIcon(TabsTab, icon);
this._setTabClosable([TabsTab, type, closable, separateClose]);
this._setTabDisabled(TabsTab, disabled);
setCss(pane, 'display', `${animated === 'true' ? 'block' : 'none'}`);
this._setPaneKey(pane, key, idx);
this._setActive([closable, TabPaneContainer!, TabsTab, pane, activekey, idx, animated]);
this._handleToggle([closable, TabsTab, pane, idx, disabled, animated]);
this._handleRemove(TabsTab, pane);
Fragment.appendChild(pane);
removeAttrs(pane, ['index', 'tab', 'icon', 'disabled', 'closable']);
});
TabPaneContainer?.appendChild(Fragment);
}
private _setTab(tabsNav: Element, content: string): HTMLElement {
const TabsTab = createElem('div');
TabsTab.className = `${PREFIX.tabs}-tab`;
setHtml(TabsTab, content);
tabsNav.appendChild(TabsTab);
return TabsTab;
}
private _setTabIcon(tabElm: Element, icon: string): void {
if (!icon) return;
const Icon = createElem('i');
Icon.className = `${PREFIX.icon} ${PREFIX.icon}-${icon}`;
tabElm.prepend(Icon);
}
private _setTabClosable(args: [Element, string, boolean, string]): void {
const [tabElm, type, closable, separateClose] = args;
if (!closable || type !== 'card') return;
const CloseIcon = createElem('icon');
CloseIcon.className = `${PREFIX.icon} ${PREFIX.icon}-ios-close ${PREFIX.tabs}-close`;
// 单独设置当前选项是否可以关闭页签
if (separateClose === 'false') return;
tabElm.appendChild(CloseIcon);
}
private _setTabDisabled(tabsTab: Element, disabled: boolean): void {
if (!disabled) return;
tabsTab.classList.add(`${PREFIX.tabs}-tab-disabled`);
}
private _setPaneKey(pane: Element, key: string, idx: number): void {
// 当前面板的 key 如果不填则默认为其索引值
// @ts-ignore
pane.dataset.paneKey = !key ? idx : key;
}
private _setActive(args: [boolean, Element, Element, Element, string, number, string]): void {
const [closable, paneContainer, tabsTab, pane, activekey, idx, animated] = args;
// @ts-ignore
const isEqual = activekey === pane.dataset.paneKey;
if (isEqual) {
this._changeTab(tabsTab);
this._changePane([closable, paneContainer, idx]);
}
setCss(pane, 'visibility', `${isEqual ? 'visible' : 'hidden'}`);
if (animated === 'false') {
setCss(pane, 'display', `${isEqual ? 'block' : 'none'}`);
}
}
private _handleToggle(args: [boolean, Element, Element, number, boolean, string]): void {
const [closable, tabsTab, pane, idx, disabled, animated] = args;
bind(tabsTab, 'click', () => {
if (disabled) return false;
this._changeTab(tabsTab);
this._changePane([closable, pane.parentElement!, idx, animated, pane]);
});
}
private _handleRemove(tabsTab: Element, pane: Element): void {
const TabClose = tabsTab.querySelector(`.${PREFIX.tabs}-close`);
if (!TabClose) return;
/**
* @param elm1 tabs的选项
* @param elm2 tabs的面板
*/
const changeActive = (elm1: Element, elm2: Element) => {
if (tabsTab.classList.contains(`${PREFIX.tabs}-tab-active`)) {
this._changeTab(elm1, false);
}
setCss(elm2, 'display', 'block');
setCss(elm2, 'visibility', 'visible');
};
const removeEv = () => {
const prevTab = tabsTab.previousElementSibling;
const nextTab = tabsTab.nextElementSibling;
const prevPane = pane.previousElementSibling;
const nextPane = pane.nextElementSibling;
if (nextTab && nextPane) {
changeActive(nextTab, nextPane);
} else if (prevTab && prevPane) {
changeActive(prevTab, prevPane);
}
tabsTab.remove();
pane.remove();
};
bind(TabClose, 'click', (e: Event) => {
e.stopPropagation();
removeEv();
});
}
private _changeTab(tabsTab: Element, siblingsChange = true): void {
tabsTab.classList.add(`${PREFIX.tabs}-tab-active`);
tabsTab.classList.add(`${PREFIX.tabs}-tab-focused`);
if (!siblingsChange) return;
siblings(tabsTab).forEach((o) => {
o.classList.remove(`${PREFIX.tabs}-tab-active`);
o.classList.remove(`${PREFIX.tabs}-tab-focused`);
});
}
private _changePane(args: [boolean, Element, number, string?, Element?]): void {
const [closable, paneContainer, idx, animated, pane] = args;
// 如果选项卡启用了可关闭功能，则不使用动画切换，这为了减少 tab 删除操作的工作量
if (!closable) {
const translateX = idx * 100;
setCss(paneContainer, 'transform', `translateX(-${translateX}%)`);
}
// 是否要一并更改面板项
if (!pane) return;
setCss(pane, 'display', 'block');
setCss(pane, 'visibility', 'visible');
siblings(pane).forEach((o) => {
if (animated === 'false' || closable) setCss(o, 'display', 'none');
setCss(o, 'visibility', 'hidden');
});
}
private _attrs(node: Element) {
return {
activeIndex: getStrTypeAttr(node, 'active-index', '0'),
type: getStrTypeAttr(node, 'type', 'line'),
size: getStrTypeAttr(node, 'size', 'default'),
animated: getStrTypeAttr(node, 'animated', 'true'),
closable: getBooleanTypeAttr(node, 'closable')
};
}
private _paneAttrs(pane: Element) {
return {
tab: getStrTypeAttr(pane, 'tab', ''),
index: getStrTypeAttr(pane, 'index', ''),
icon: getStrTypeAttr(pane, 'icon', ''),
closable: getStrTypeAttr(pane, 'closable', 'true'),
disabled: getBooleanTypeAttr(pane, 'disabled')
};
}
}
export default Tabs;
================================================
FILE: src/components/tag/index.ts
================================================
import Tag from './tag';
export default Tag;
================================================
FILE: src/components/tag/tag.ts
================================================
import {
$el,
bind,
getBooleanTypeAttr,
getStrTypeAttr,
removeAttrs,
setCss,
setHtml
} from '../../dom-utils';
import { destroyElem, validComps } from '../../utils';
import { isFn } from '../../utils/check-type';
import PREFIX from '../prefix';
interface Config {
config(
el: string
): {
events({ onClose, onChange }: TagEvents): void;
};
}
interface TagEvents {
onClose?: ($this: Element) => void;
onChange?: (checked: boolean) => void;
}
class Tag implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = '1.0';
this.COMPONENTS = $el('r-tag', { all: true });
this._create(this.COMPONENTS);
}
public config(
el: string
): {
events({ onClose, onChange }: TagEvents): void;
} {
const target = $el(el);
validComps(target, 'tag');
const CloseIcon = target.querySelector(`.${PREFIX.icon}-ios-close`);
const $this = target;
let checked: boolean;
return {
events({ onClose, onChange }: TagEvents) {
bind(target, 'click', () => {
checked = target.dataset.checked === 'true' ? true : false;
onChange && isFn(onChange, checked);
});
if (!CloseIcon) return;
bind(CloseIcon, 'click', (e: Event) => {
e.stopPropagation();
onClose && isFn(onClose, $this);
});
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const { type, size, color, checked, checkable, closable } = this._attrs(node);
this._setMainTemplate(node);
this._setType(node, type);
this._setIsChecked(node, checked);
this._setSize(node, size);
this._setColor(node, type, checkable, color);
this._setClosable(node, closable);
this._setCheckable(node, checkable);
this._handleClose(node, closable);
removeAttrs(node, ['type', 'size', 'color', 'checked', 'checkable', 'closable']);
});
}
private _setMainTemplate(node: Element): void {
const content = setHtml(node);
setHtml(node, `${content} `);
}
private _setType(node: Element, type: string) {
if (type) node.classList.add(`${PREFIX.tag}-${type}`);
if (type === 'dot') {
node.insertAdjacentHTML('afterbegin', `;
public locale: (str: string) => string;
constructor() {
this.VERSION = 'v1.0';
this.COMPONENTS = $el('r-time', { all: true });
// 配置默认语言 (全局)
dayjs.locale('zh-cn');
// 改变语言配置 (全局)，需自行引入 dayjs 语言包
// 注意！通过 script 标签引入 rabbitjs 的情况下，通过这个函数设置语言是无效的
this.locale = (str) => dayjs.locale(str);
this._create(this.COMPONENTS);
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const { type, time, interval, hash } = this._attrs(node);
this._setTime(node, type, time, interval);
this._handleClick(node, hash);
removeAttrs(node, ['time', 'type', 'hash', 'interval']);
});
}
private _setTime(node: Element, type: string, time: string, interval: number): void {
const timeStamp = eval(time);
let seconds = 0;
const timer = () => {
if (type === 'relative') {
dayjs.extend(relativeTime);
let _relativeTime = dayjs(timeStamp).fromNow();
// 如果自动更新的间隔小于60则是要通过秒更新时间而不是分钟
// 当秒数走到60秒后就转换为 “x分钟前” 显示
if (interval < 60) {
const Chinese = ['zh', 'zh-cn', 'zh-hk', 'zh-tw'];
// 语言环境为中文才进行并显示秒级别更新
if (Chinese.includes(dayjs.locale())) {
seconds++;
setText(node, `${seconds}秒前`);
}
} else {
setText(node, _relativeTime);
}
// 这段为设置中文状态下的情景
if (_relativeTime === '几秒前') {
_relativeTime = '刚刚';
} else {
setText(node, _relativeTime);
}
} else if (type === 'date') {
const date = dayjs(timeStamp).format('YYYY-MM-DD');
setText(node, date);
} else if (type === 'datetime') {
const dataTime = dayjs(timeStamp).format('YYYY-MM-DD-HH:mm:ss');
setText(node, dataTime);
}
return timer;
};
setTimeout(() => {
window.setInterval(timer(), interval * 1000);
}, 0);
}
private _handleClick(node: Element, hash: string): void {
if (!hash) return;
node.classList.add(`${PREFIX.time}-with-hash`);
node.addEventListener('click', () => (window.location.hash = hash));
}
private _attrs(node: Element) {
return {
time: getStrTypeAttr(node, 'time', ''),
type: getStrTypeAttr(node, 'type', 'relative'),
hash: getStrTypeAttr(node, 'hash', ''),
interval: getNumTypeAttr(node, 'interval', 60)
};
}
}
export default Time;
================================================
FILE: src/components/timeline/index.ts
================================================
import Timeline from './timeline';
export default Timeline;
================================================
FILE: src/components/timeline/timeline.ts
================================================
import { $el, createElem, removeAttrs, setCss, setHtml } from '../../dom-utils';
import PREFIX from '../prefix';
class Timeline {
readonly VERSION: string;
readonly COMPONENTS: any;
constructor() {
this.VERSION = '1.0';
this.COMPONENTS = $el('r-timeline > r-timeline-item', { all: true });
this._create(this.COMPONENTS);
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const TimelineItem = node;
const TimelineTail = createElem('div');
const TimelineHead = createElem('div');
const TimelineContent = createElem('div');
this._setCls(TimelineTail, TimelineHead, TimelineContent);
this._setColor(TimelineItem, TimelineHead);
this._setDot(TimelineItem, TimelineHead);
this._setContent(TimelineItem, TimelineContent);
TimelineItem.append(TimelineTail, TimelineHead, TimelineContent);
removeAttrs(TimelineItem, ['dot']);
});
}
private _setCls(node1: HTMLElement, node2: HTMLElement, node3: HTMLElement): void {
node1.className = `${PREFIX.timeline}-item-tail`;
node2.className = `${PREFIX.timeline}-item-head`;
node3.className = `${PREFIX.timeline}-item-content`;
}
private _setContent(parent: Element, node1: HTMLElement): void {
setHtml(node1, parent.innerHTML);
// 清空原先的内容
setHtml(parent, '');
}
private _setColor(parent: Element, node: HTMLElement): void {
const colors = this._getStatusColor(parent);
// 设置预设颜色或者自定义颜色
if (colors === 'blue' || colors === 'red' || colors === 'gray' || colors === 'green') {
node.classList.add(`${PREFIX.timeline}-item-head-${colors}`);
} else {
setCss(node, 'color', colors);
setCss(node, 'borderColor', colors);
}
}
// 自定义时间轴点的内容
private _setDot(parent: Element, node: HTMLElement): void {
if (!this._getDotContent(parent)) return;
node.classList.add(`${PREFIX.timeline}-item-head-custom`);
const content = this._getDotContent(parent);
setHtml(node, content);
}
private _getStatusColor(node: Element): string {
return node.getAttribute('color') || 'blue';
}
private _getDotContent(parent: Element): string {
return parent.getAttribute('dot') || '';
}
}
export default Timeline;
================================================
FILE: src/components/tooltip/index.ts
================================================
import Tooltip from './tooltip';
export default Tooltip;
================================================
FILE: src/components/tooltip/tooltip.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import {
$el,
bind,
getBooleanTypeAttr,
getNumTypeAttr,
getStrTypeAttr,
removeAttrs,
setCss,
setHtml
} from '../../dom-utils';
import { CssTransition, _arrow, _Popper } from '../../mixins';
import { type, validComps } from '../../utils';
import PREFIX from '../prefix';
const STATEKEY = 'tooltipState';
const DEFAULTDELAY = 80;
const EnterCls = 'zoom-big-fast-enter';
const LeaveCls = 'zoom-big-fast-leave';
const CssTransitonCommonConfig = {
rmCls: true,
timeout: 80,
enterCls: EnterCls,
leaveCls: LeaveCls
};
let VISIBLETIMER: any, EVENTTIMER: any;
interface Config {
config(
el: string
): {
content: string | number;
always: boolean;
disabled: boolean;
events: ({ onVisibleChange }: TooltipEvent) => void;
};
}
interface TooltipEvent {
onVisibleChange?: (visable: boolean) => void;
}
class Tooltip implements Config {
readonly VERSION: string;
readonly COMPONENTS: NodeListOf;
constructor() {
this.VERSION = 'v2.0';
this.COMPONENTS = $el('r-tooltip', { all: true });
this._create(this.COMPONENTS);
_arrow.scrollUpdate();
}
public config(
el: string
): {
content: string | number;
always: boolean;
disabled: boolean;
events: ({ onVisibleChange }: TooltipEvent) => void;
} {
const target = $el(el) as HTMLElement;
validComps(target, 'tooltip');
const { _attrs, _setAlwaysShow, _handleMouseEv } = Tooltip.prototype;
const { delay, always, disabled, offset, placement } = _attrs(target);
const TooltipPopper = target.querySelector(`.${PREFIX.tooltip}-popper`)! as HTMLElement;
const TooltipInner = target.querySelector(`.${PREFIX.tooltip}-inner`)!;
return {
get content() {
return setHtml(TooltipInner);
},
set content(newVal: string | number) {
if (newVal && !type.isStr(newVal) && !type.isNum(newVal)) return;
setHtml(TooltipInner, `${newVal}`);
},
get always() {
return always;
},
set always(newVal: boolean) {
if (newVal && !type.isBol(newVal)) return;
_setAlwaysShow(TooltipPopper, newVal);
},
get disabled() {
return disabled;
},
set disabled(newVal: boolean) {
if (newVal && !type.isBol(newVal)) return;
_handleMouseEv(
target,
TooltipPopper,
delay,
offset,
placement,
this.always,
newVal
);
},
events({ onVisibleChange }) {
const event = () => {
const visable: boolean = TooltipPopper.dataset[STATEKEY] === 'show';
onVisibleChange && type.isFn(onVisibleChange, visable);
};
const show = () => {
if (EVENTTIMER) clearTimeout(EVENTTIMER);
EVENTTIMER = setTimeout(event, delay);
};
const close = () => {
if (EVENTTIMER) clearTimeout(EVENTTIMER);
// 当鼠标移出tooltip后判断当前状态如果为 show，
// 那么说明气泡显示过了，该执行移出事件了。
// 避免了即使鼠标移出但没有显示过气泡而依然执行事件。
if (TooltipPopper.dataset[STATEKEY] === 'show') setTimeout(event, DEFAULTDELAY);
};
bind(target, 'mouseenter', show);
bind(target, 'mouseleave', close);
}
};
}
private _create(COMPONENTS: NodeListOf): void {
COMPONENTS.forEach((node) => {
const {
content,
theme,
placement,
offset,
maxWidth,
delay,
always,
disabled
} = this._attrs(node);
const children = !node.firstElementChild
? node.innerHTML.trim()
: node.firstElementChild;
this._setMainTemplate(node, content, theme, placement);
const TooltipPopper = node.querySelector(`.${PREFIX.tooltip}-popper`)! as HTMLElement;
this._setReferencesElem(node, children);
this._setPopper(node, TooltipPopper, placement, offset);
this._setMaxWidth(node, maxWidth);
this._setAlwaysShow(TooltipPopper, always);
this._handleMouseEv(node, TooltipPopper, delay, offset, placement, always, disabled);
removeAttrs(node, ['content', 'theme', 'delay', 'max-width', 'disabled', 'offset']);
});
}
private _setMainTemplate(
node: Element,
content: string,
theme: string,
placement: string
): void {
const template = `
`;
setHtml(node, template);
}
private _setReferencesElem(node: Element, children: Element | string): void {
const TooltipRel = node.querySelector(`.${PREFIX.tooltip}-rel`)!;
if (children instanceof Element) {
TooltipRel.appendChild(children);
} else {
setHtml(TooltipRel, children);
}
}
private _setMaxWidth(node: Element, width: string): void {
if (!width) return;
const TooltipInner = node.querySelector(`.${PREFIX.tooltip}-inner`)!;
TooltipInner.classList.add(`${PREFIX.tooltip}-with-width`);
setCss(TooltipInner, 'maxWidth', `${width}px`);
}
private _setAlwaysShow(children: HTMLElement, always: boolean): void {
if (!always) setCss(children, 'display', 'none');
children.dataset[STATEKEY] = 'pending';
}
private _handleMouseEv(
node: Element,
children: HTMLElement,
delay: number,
offset: number,
placement: string,
always: boolean,
disabled: boolean
): void {
if (always || disabled) return;
const setVisable = (mode: 'in' | 'out') => {
if (mode === 'in') this._setPopper(node, children, placement, offset);
children.dataset[STATEKEY] = mode === 'in' ? 'show' : 'close';
CssTransition(children, {
inOrOut: mode,
...CssTransitonCommonConfig
});
};
const show = () => {
if (VISIBLETIMER) clearTimeout(VISIBLETIMER);
VISIBLETIMER = setTimeout(() => setVisable('in'), delay);
};
const hide = () => {
if (VISIBLETIMER) clearTimeout(VISIBLETIMER);
if (children.dataset[STATEKEY] === 'show')
setTimeout(() => setVisable('out'), DEFAULTDELAY);
};
bind(node, 'mouseenter', show);
bind(node, 'mouseleave', hide);
}
private _setPopper(
node: Element,
children: HTMLElement,
placement: string,
offset: number
): any {
return _Popper._newCreatePopper(node, children, placement, offset);
}
private _attrs(node: Element) {
return {
theme: getStrTypeAttr(node, 'theme', 'dark'),
content: getStrTypeAttr(node, 'content', ''),
maxWidth: getStrTypeAttr(node, 'max-width', ''),
placement: getStrTypeAttr(node, 'placement', 'top'),
delay: getNumTypeAttr(node, 'delay', DEFAULTDELAY),
offset: getNumTypeAttr(node, 'offset', 0),
always: getBooleanTypeAttr(node, 'always'),
disabled: getBooleanTypeAttr(node, 'disabled')
};
}
}
export default Tooltip;
================================================
FILE: src/dom-utils/bind.ts
================================================
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/**
* 解决事件监听兼容性问题
* @param {Object} obj对象
* @param {String} type事件类型,不带'on'前缀
* @param {Function} callback事件处理程序
*/
export function bind(obj: Element | HTMLElement | Window | any, type: string, callback: any): void {
if (obj.addEventListener) {
// W3C内核
obj.addEventListener(type, callback);
} else {
// IE内核
obj.attachEvent(`on${type}`, callback);
}
}
/**
* 解决移除事件监听兼容性问题
* @param {Object} obj对象
* @param {String} type事件类型,不带'on'前缀
* @param {Function} callback事件处理程序
*/
export function unbind(obj: Element | HTMLElement | Window | any, type: string, callback: any) {
if (obj.removeEventListener) {
// W3C内核
obj.removeEventListener(type, callback);
} else {
// IE内核
obj.detachEvent(`on${type}`, callback);
}
}
================================================
FILE: src/dom-utils/elem.ts
================================================
/**
* 获取元素
* @param node
* @param options 选项 all 表示是否获取所有节点
*/
export function $el(
node: string | Element | any,
options?: { all: boolean }
): Element | HTMLElement | null | NodeListOf | NodeListOf | any {
if (options?.all) {
return document.querySelectorAll(node);
} else {
return document.querySelector(node);
}
}
export function createElem(tagName: string): HTMLElement {
return document.createElement(tagName);
}
export function setCss(node: Element | HTMLElement | any, styeName: string, value: string): string {
return (node.style[styeName] = value);
}
export function setHtml(node: Element, value?: string): string {
if (value || value === '') {
return (node.innerHTML = value);
} else {
return node.innerHTML;
}
}
export function setText(node: Element, value?: string): string {
if (value || value === '') {
return (node.textContent = value);
} else {
return node.textContent || '';
}
}
// 通用的标签属性获取方法
// 获取后的值由原先的字符串类型转换成对应类型
// Return String type
export function getStrTypeAttr(node: Element, attrName: string, defaultVal: string): string | any {
return node.getAttribute(attrName) || defaultVal;
}
// Return Boolean type
export function getBooleanTypeAttr(node: Element, attrName: string): boolean {
return node.getAttribute(attrName) === 'true';
}
// Return Number type
export function getNumTypeAttr(node: Element, attrName: string, defaultVal?: number): number | any {
return Number(node.getAttribute(attrName)) || defaultVal;
}
// Return Array type
export function getArrTypeAttr(node: Element, attrName: string): Array {
const attr = node.getAttribute(attrName)?.replace(/'/g, '"') || '[]';
const array: [string | number] = JSON.parse(attr);
return array;
}
================================================
FILE: src/dom-utils/index.ts
================================================
import { bind, unbind } from './bind';
import {
$el,
createElem,
setCss,
setHtml,
setText,
getStrTypeAttr,
getNumTypeAttr,
getArrTypeAttr,
getBooleanTypeAttr
} from './elem';
import { prevAll, nextAll } from './prev&next';
import removeAttrs from './remove-attrs';
import siblings from './siblings';
import slider from './slide';
export {
bind,
unbind,
$el,
createElem,
setCss,
setHtml,
setText,
prevAll,
nextAll,
removeAttrs,
siblings,
slider,
getStrTypeAttr,
getNumTypeAttr,
getArrTypeAttr,
getBooleanTypeAttr
};
================================================
FILE: src/dom-utils/prev&next.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
export function prevAll(el: Element): Element[] {
const Parent = el.parentElement;
const Child = Parent!.children;
const prevChildren = [];
let i = 0;
const { length } = Child;
for (; i < length; i++) {
const _child = Child[i];
if (_child == el) {
break;
}
prevChildren.push(_child);
}
return prevChildren;
}
export function nextAll(el: Element): Element[] {
const Parent = el.parentElement;
const Child = Parent!.children;
const nextChildren = [];
const { length } = Child;
const start = 0;
let i = length - 1;
for (; i >= start; i--) {
const _child = Child[i];
if (_child == el) {
break;
}
nextChildren.unshift(_child);
}
return nextChildren;
}
================================================
FILE: src/dom-utils/remove-attrs.ts
================================================
/**
* 移除组件标签的自定义属性
* 1.非关联css的属性
* 2.仅取值属性
* 3.非业务逻辑代码要用的属性
*/
export default function removeAttrs(elem: Element, attrs: Array): void {
const len = attrs.length;
let i = 0,
attrName = '';
for (; i < len; i++) {
attrName = attrs[i];
if (elem.hasAttribute(attrName)) {
elem.removeAttribute(attrName);
}
}
}
================================================
FILE: src/dom-utils/siblings.ts
================================================
export default function siblings(elem: Element): any[] {
const r = [];
let n = elem.parentNode?.firstChild;
for (; n; n = n.nextSibling) {
if (n.nodeType === 1 && n !== elem) {
r.push(n);
}
}
return r;
}
================================================
FILE: src/dom-utils/slide.ts
================================================
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable prefer-rest-params */
// @ts-nocheck
export default window.Slider = (() => {
// 定义Slider对象
const Slider = {
slideDown: (el: Element, time: number) => {
void 0;
},
slideUp: (el: Element, time: number) => {
void 0;
}
};
// I.定义一个TimerManager类
// 1）构造函数
function TimerManager() {
this.timers = []; // 保存定时器
this.args = []; // 保存定时器的参数
this.isFiring = false;
}
// 2）静态方法：为element添加一个TimerManager实例
TimerManager.makeInstance = function (element) {
// 如果element.__TimerManager__上没有TimerManager，就为其添加一个
if (!element.__TimerManager__ || element.__TimerManager__.constructor != TimerManager) {
element.__TimerManager__ = new TimerManager();
}
};
// 3）扩展TimerManager原型，分别实现add，fire，next方法
TimerManager.prototype.add = function (timer, args) {
this.timers.push(timer);
this.args.push(args);
this.fire();
};
TimerManager.prototype.fire = function () {
if (!this.isFiring) {
const timer = this.timers.shift(), // 取出定时器
args = this.args.shift(); // 取出定时器参数
if (timer && args) {
this.isFiring = true;
// 传入参数，执行定时器函数
timer(args[0], args[1]);
}
}
};
TimerManager.prototype.next = function () {
this.isFiring = false;
this.fire();
};
// II. 修改动画函数并在定时器结束后调用element.__TimerManager__.next()
// 1）下滑函数
function fnSlideDown(element, time) {
if (element.offsetHeight == 0) {
//如果当前高度为0，则执行下拉动画
// 获取元素总高度
element.style.display = 'block'; // 1.显示元素，元素变为可见
const totalHeight = element.offsetHeight; // 2.保存总高度
element.style.height = '0px'; // 3.再将元素高度设置为0，元素又变为不可见
// 定义一个变量保存元素当前高度
let currentHeight = 0; // 当前元素高度为0
// 计算每次增加的值
const increment = totalHeight / (time / 10);
// 开始循环定时器
const timer = setInterval(() => {
// 增加一部分高度
currentHeight += increment;
// 把当前高度赋值给height属性
element.style.height = `${currentHeight}px`;
// 如果当前高度大于或等于总高度则关闭定时器
if (currentHeight >= totalHeight) {
// 关闭定时器
clearInterval(timer);
// 把高度设置为总高度
element.style.height = `${totalHeight}px`;
if (
element.__TimerManager__ &&
element.__TimerManager__.constructor == TimerManager
) {
element.__TimerManager__.next();
}
}
}, 10);
} else {
// 如果当前高度不为0，则直接执行队列里的下一个函数
if (element.__TimerManager__ && element.__TimerManager__.constructor == TimerManager) {
element.__TimerManager__.next();
}
}
}
// 2）上拉函数
function fnSlideUp(element, time) {
if (element.offsetHeight > 0) {
// 如果当前高度不为0，则执行上滑动画
// 获取元素总高度
const totalHeight = element.offsetHeight;
// 定义一个变量保存元素当前高度
let currentHeight = totalHeight;
// 计算每次减去的值
const decrement = totalHeight / (time / 10);
// 开始循环定时器
const timer = setInterval(() => {
// 减去当前高度的一部分
currentHeight -= decrement;
// 把当前高度赋值给height属性
element.style.height = `${currentHeight}px`;
// 如果当前高度小于等于0，就关闭定时器
if (currentHeight <= 0) {
// 关闭定时器
clearInterval(timer);
// 把元素display设置为none
element.style.display = 'none';
// 把元素高度值还原
element.style.height = `${totalHeight}px`;
if (
element.__TimerManager__ &&
element.__TimerManager__.constructor == TimerManager
) {
element.__TimerManager__.next();
}
}
}, 10);
} else {
// 如果当前高度为0， 则直接执行队列里的下一个函数
if (element.__TimerManager__ && element.__TimerManager__.constructor == TimerManager) {
element.__TimerManager__.next();
}
}
}
// III.定义外部访问接口
// 1）下拉接口
Slider.slideDown = function (element, time) {
TimerManager.makeInstance(element);
element.__TimerManager__.add(fnSlideDown, arguments);
return this;
};
// 2）上滑接口
Slider.slideUp = function (element, time) {
TimerManager.makeInstance(element);
element.__TimerManager__.add(fnSlideUp, arguments);
return this;
};
// 返回Slider对象
return Slider;
})();
================================================
FILE: src/images.d.ts
================================================
declare module '*.svg';
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.gif';
declare module '*.bmp';
declare module '*.tiff';
================================================
FILE: src/index.ts
================================================
import * as Rabbit from './rabbit-simple-ui';
export default Rabbit;
================================================
FILE: src/mixins/arrow.ts
================================================
// 更新popver弹窗或下拉菜单的箭头方向
import { $el } from '../dom-utils';
export function scrollUpdate(): void {
const tooltips = $el('.rab-tooltip-popper', { all: true });
const poptips = $el('.rab-poptip-popper', { all: true });
const scrollEv = (target: NodeListOf) => {
target.forEach((node: HTMLElement) => {
const { popperPlacement } = node.dataset;
const xPlacement = node.getAttribute('x-placement');
if (xPlacement != popperPlacement) {
node.setAttribute('x-placement', popperPlacement!);
}
});
};
// 当页面有这些组件存在时才做滚动监听
if (tooltips.length > 0) {
window.addEventListener('scroll', () => scrollEv(tooltips));
}
if (poptips.length > 0) {
window.addEventListener('scroll', () => scrollEv(poptips));
}
}
================================================
FILE: src/mixins/cb-promise.ts
================================================
/**
* 用于实例组件关闭后返回 promise，提供 then 接口在关闭后运行 callback
* @param duration 组件关闭的时间，这里是用于组件没自己的配置项时，设为全局时间
* @param compConfig 组件的配置项，这里是用于是否切换为组件自己设置的时间
*/
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export default function usePromiseCallback(duration: number, compConfig?: any): Promise {
// promise 触发的时机为默认时间
let timeout: number = duration;
// 当组件参数以对象形式传递，并且设置了自己的 duration则修改 promise的触发时机
if (compConfig && typeof compConfig === 'object') {
if (compConfig.duration || compConfig.duration === 0) {
timeout = compConfig.duration;
} else {
timeout = duration;
}
}
return promiseCb(timeout);
}
function promiseCb(duration: number): Promise {
let timer = null;
return new Promise((afterClose) => {
timer = setTimeout(afterClose, duration * 1000);
// duration 为 0 则说明当前组件不自动关闭
duration === 0 ? clearTimeout(timer) : timer;
});
}
================================================
FILE: src/mixins/clickoutside.ts
================================================
import { bind } from '../dom-utils';
/**
* 用于点击外部关闭下拉菜单或气泡提示框
* @param elem
* @param callback 关闭事件回调
* @param child
* @param datasetKey
* @param datasetVal 要被关闭的对象状态是否已经处于打开状态，如果是那么点击其以外的区域才执行事件回调
*/
export default function clickOutside(
elem: Element,
callback: (arg?: any) => any,
child?: Element,
datasetKey?: string,
datasetVal?: string
): void {
const ev = (e: Event) => {
if (datasetKey) {
if (child) {
// @ts-ignore
child.dataset[datasetKey] === datasetVal && callback(e);
} else {
// @ts-ignore
child.dataset[datasetKey] === datasetVal && callback(e);
}
} else {
callback();
}
};
bind(document, 'click', (e: Event) => ev(e));
bind(elem, 'click', (e: MouseEvent) => e.stopPropagation());
}
================================================
FILE: src/mixins/css-transition.ts
================================================
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable @typescript-eslint/no-non-null-assertion */
interface Config {
inOrOut?: 'in' | 'out'; // 进场或者出场
enterCls?: 'rab-fade-in' | string; // 进场动画
leaveCls?: 'rab-fade-out' | string; // 出场动画
rmCls?: boolean; // 动画结束后是否移除动画类名
timeout?: number; // 过渡效果的持续时间
hiddenParent?: Element | HTMLElement | any; // 是否将父元素一起隐藏
}
export default function CssTransition(
elem: any,
{ enterCls, leaveCls, inOrOut, rmCls, timeout, hiddenParent }: Config
): void {
const removeClassAfterTransition = (aniClassName: string): void => {
if (rmCls) {
setTimeout(() => {
aniClassName ? elem.classList.remove(aniClassName) : '';
}, timeout);
}
};
if (inOrOut === 'in') {
// 如果父元素被隐藏则变为显示
if (hiddenParent) {
hiddenParent.style.display = '';
hiddenParent.style.opacity = '1';
hiddenParent.style.visibility = 'visible';
}
// if (elem.style.display === 'none') elem.style.display = '';
// if (elem.style.opacity === '0') elem.style.opacity = '1';
// if (elem.style.visibility === 'hidden') elem.style.visibility = 'visible';
elem.style.display = '';
elem.style.opacity = '1';
elem.style.visibility = 'visible';
elem.classList.add(enterCls);
removeClassAfterTransition(enterCls!);
} else if (inOrOut === 'out') {
if (elem.classList.contains(enterCls)) {
elem.classList.replace(enterCls, leaveCls);
} else {
elem.classList.add(leaveCls);
}
removeClassAfterTransition(leaveCls!);
// 过渡效果持续时间后隐藏元素
setTimeout(() => {
if (hiddenParent) hiddenParent.style.display = 'none';
elem.style.display = 'none';
elem.style.opacity = '0';
elem.style.visibility = 'hidden';
}, timeout);
}
}
================================================
FILE: src/mixins/index.ts
================================================
import * as _arrow from './arrow';
import usePromiseCallback from './cb-promise';
import clickoutside from './clickoutside';
import CssTransition from './css-transition';
import moreThanOneNode from './one-node';
import Scrollable from './scrollable';
import * as _Popper from './tooltip';
import warn from './warn';
export {
warn,
_arrow,
CssTransition,
moreThanOneNode,
Scrollable,
usePromiseCallback,
clickoutside,
_Popper
};
================================================
FILE: src/mixins/one-node.ts
================================================
import { warn } from '.';
/**
* 检查组件标签下是否具有一个父元素，
* 不允许组件下有多个子节点用于添加额外内容，只有由一个节点组成。
*/
export default function moreThanOneNode(node: Element): boolean {
if (node.childElementCount > 1) {
warn(`The <${node.tagName.toLowerCase()}> tag must have a parent element`);
return true;
}
return false;
}
================================================
FILE: src/mixins/scrollable.ts
================================================
import { setCss } from '../dom-utils';
interface Options {
scroll?: boolean;
lock?: boolean;
node?: Element;
tagName?: string;
}
export default function scrollable({ scroll = false, lock = false, node, tagName }: Options): void {
// 是否禁止对页面滚动条的修改
// 页面是否可以滚动
if (lock && !scroll) {
setCss(document.body, 'paddingRight', '17px');
setCss(document.body, 'overflow', 'hidden');
} else {
setCss(document.body, 'paddingRight', '');
setCss(document.body, 'overflow', '');
}
const prevNode = node?.previousElementSibling;
// 解决抽屉或对话框组件在同时打开多个的情况下，只关闭了一个窗口而页面滚动条恢复出现的bug
if (prevNode) {
const prevTagName = prevNode.tagName.toLocaleLowerCase().replace(/r-/, '');
if (prevTagName === tagName) {
// @ts-ignore
if (prevNode.dataset[`${prevTagName}Visable`] === 'true') {
scrollable({ scroll: false, lock: true });
}
}
}
}
================================================
FILE: src/mixins/tooltip.ts
================================================
import { createPopper } from '@popperjs/core';
export function _newCreatePopper(
reference: Element,
popper: HTMLElement,
placement: string | any,
offset: number
): any {
return createPopper(reference, popper, {
placement: placement, // 设置位置
modifiers: [
{
name: 'computeStyles',
options: {
gpuAcceleration: false // 使用top/left属性。否则会和弹出器动画冲突
}
},
{
name: 'computeStyles',
options: {
adaptive: false // 避免重新计算弹出器位置从而造成位置牛头不对马嘴
}
},
{
name: 'offset',
options: {
offset: [offset] // 自定义弹出器出现位置的偏移量
}
}
]
});
}
================================================
FILE: src/mixins/warn.ts
================================================
export default function warn(msg: unknown): void {
console.error(`[Rabbit] Error: ${msg}`);
return;
}
================================================
FILE: src/rabbit-simple-ui.ts
================================================
import Affix from './components/affix';
import Alert from './components/alert';
import Avatar from './components/avatar';
import BackTop from './components/back-top';
import Badge from './components/badge';
import Breadcrumb from './components/breadcrumb';
import Button from './components/button';
import Card from './components/card';
import Carousel from './components/carousel';
import Checkbox from './components/checkbox';
import Circle from './components/circle';
import Collapse from './components/collapse';
import CountDown from './components/count-down';
import Divider from './components/divider';
import Drawer from './components/drawer';
import Dropdown from './components/dropdown';
import Empty from './components/empty';
import InputNumber from './components/input-number';
import Jumbotron from './components/jumbotron';
import Loading from './components/loading-bar';
import Message from './components/message';
import Modal from './components/modal';
import MiniModal from './components/mini-modal';
import Notice from './components/notice';
import PageHeader from './components/page-header';
import Poptip from './components/poptip';
import Progress from './components/progress';
import Radio from './components/radio';
import Result from './components/result';
import Skeleton from './components/skeleton';
import Spin from './components/spin';
import Steps from './components/steps';
import Switch from './components/switch';
import Tabs from './components/tabs';
import Tag from './components/tag';
import Time from './components/time';
import Timeline from './components/timeline';
import Tooltip from './components/tooltip';
export {
Affix,
Alert,
Avatar,
BackTop,
Badge,
Breadcrumb,
Button,
Card,
Carousel,
Checkbox,
Circle,
Collapse,
CountDown,
Divider,
Drawer,
Dropdown,
Empty,
InputNumber,
Jumbotron,
Loading,
Message,
Modal,
MiniModal,
Notice,
PageHeader,
Poptip,
Progress,
Radio,
Result,
Skeleton,
Spin,
Steps,
Switch,
Tabs,
Tag,
Time,
Timeline,
Tooltip
};
================================================
FILE: src/styles/README.md
================================================
# 样式库说明
## 目录
|-- animation (动画)
|-- common (全局样式)
|-- components (组件样式)
|-- mixins (混入)
## 相关链接
- 感谢 [ViewUI](https://github.com/view-design/ViewUI) 提供的相关代码
- [阿里巴巴矢量图标库](https://www.iconfont.cn/)
================================================
FILE: src/styles/animation/ease.less
================================================
@-webkit-keyframes rabEaseIn {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes rabEaseIn {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes rabEaseOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.9);
}
}
@keyframes rabEaseOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.9);
}
}
================================================
FILE: src/styles/animation/fade.less
================================================
.fade(@className,@keyframes) {
.rab-fade-@{className} {
-webkit-animation: @keyframes 0.3s ease-in-out;
animation: @keyframes 0.3s ease-in-out;
}
}
.fade(in,rabFadeIn);
.fade(out,rabFadeOut);
@-webkit-keyframes rabFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes rabFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes rabFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes rabFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
================================================
FILE: src/styles/animation/index.less
================================================
@import 'fade';
@import 'move';
@import 'ease';
@import 'slide';
================================================
FILE: src/styles/animation/move.less
================================================
// @className 动画类名
// @keyframes 动画
// @direction 动画方向
// @duration 持续时间
// @time-function 过渡效果函数
.move(@className, @keyframes, @direction, @duration, @time-function) {
.@{css-prefix}@{className}-move-@{direction} {
animation: @keyframes @duration @time-function;
}
}
// message组件的动画
@-webkit-keyframes rabMessageMoveIn {
0% {
opacity: 0;
padding: 0;
transform: translateY(-40%);
}
100% {
opacity: 1;
padding: 8px;
}
}
@keyframes rabMessageMoveIn {
0% {
opacity: 0;
padding: 0;
transform: translateY(-40%);
}
100% {
opacity: 1;
padding: 8px;
}
}
@-webkit-keyframes rabMessageMoveOut {
0% {
max-height: 150px;
padding: 8px;
opacity: 1;
}
100% {
max-height: 0;
padding: 0;
opacity: 0;
}
}
@keyframes rabMessageMoveOut {
0% {
max-height: 150px;
padding: 8px;
opacity: 1;
}
100% {
max-height: 0;
padding: 0;
opacity: 0;
}
}
// notice组件的动画
@-webkit-keyframes rabNoticeMoveIn {
0% {
opacity: 0;
transform-origin: 0 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform-origin: 0 0;
transform: translateX(0%);
}
}
@keyframes rabNoticeMoveIn {
0% {
opacity: 0;
transform-origin: 0 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform-origin: 0 0;
transform: translateX(0%);
}
}
@-webkit-keyframes rabNoticeMoveOut {
0% {
opacity: 1;
transform-origin: 0 0;
transform: translateX(0);
}
70% {
transform-origin: 0 0;
transform: translateX(100%);
height: auto;
padding: 16px;
margin-bottom: 10px;
opacity: 0;
}
100% {
transform-origin: 0 0;
transform: translateX(100%);
height: 0;
padding: 0;
margin-bottom: 0;
opacity: 0;
}
}
@keyframes rabNoticeMoveOut {
0% {
transform-origin: 0 0;
opacity: 1;
transform: translateX(0);
}
70% {
transform-origin: 0 0;
transform: translateX(100%);
height: auto;
padding: 16px;
margin-bottom: 10px;
opacity: 0;
}
100% {
transform-origin: 0 0;
transform: translateX(100%);
height: 0;
padding: 0;
margin-bottom: 0;
opacity: 0;
}
}
// drawer组件的动画
@-webkit-keyframes rabDrawerMoveRightIn {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes rabDrawerMoveRightIn {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@-webkit-keyframes rabDrawerMoveRightOut {
0% {
opacity: 1;
transform: translateX(0%);
}
100% {
opacity: 0;
transform: translateX(100%);
}
}
@keyframes rabDrawerMoveRightOut {
0% {
opacity: 1;
transform: translateX(0%);
}
100% {
opacity: 0;
transform: translateX(100%);
}
}
// drawer left
@-webkit-keyframes rabDrawerMoveLeftIn {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes rabDrawerMoveLeftIn {
0% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@-webkit-keyframes rabDrawerMoveLeftOut {
0% {
opacity: 1;
transform: translateX(0%);
}
100% {
opacity: 0;
transform: translateX(-100%);
}
}
@keyframes rabDrawerMoveLeftOut {
0% {
opacity: 1;
transform: translateX(0%);
}
100% {
opacity: 0;
transform: translateX(-100%);
}
}
// drawer top
@-webkit-keyframes rabDrawerMoveTopIn {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes rabDrawerMoveTopIn {
0% {
opacity: 0;
transform: translateY(-100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@-webkit-keyframes rabDrawerMoveTopOut {
0% {
opacity: 1;
transform: translateY(0%);
}
100% {
opacity: 0;
transform: translateY(-100%);
}
}
@keyframes rabDrawerMoveTopOut {
0% {
opacity: 1;
transform: translateY(0%);
}
100% {
opacity: 0;
transform: translateY(-100%);
}
}
// drawer bottom
@-webkit-keyframes rabDrawerMoveBottomIn {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes rabDrawerMoveBottomIn {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@-webkit-keyframes rabDrawerMoveBottomOut {
0% {
opacity: 1;
transform: translateY(0%);
}
100% {
opacity: 0;
transform: translateY(100%);
}
}
@keyframes rabDrawerMoveBottomOut {
0% {
opacity: 1;
transform: translateY(0%);
}
100% {
opacity: 0;
transform: translateY(100%);
}
}
================================================
FILE: src/styles/animation/slide.less
================================================
@-webkit-keyframes rabTransitionDropIn {
0% {
opacity: 0;
transform: scaleY(0.8);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}
@keyframes rabTransitionDropIn {
0% {
opacity: 0;
transform: scaleY(0.8);
}
100% {
opacity: 1;
transform: scaleY(1);
}
}
@-webkit-keyframes rabTransitionDropOut {
0% {
opacity: 1;
transform: scaleY(1);
}
100% {
opacity: 0;
transform: scaleY(0.8);
}
}
@keyframes rabTransitionDropOut {
0% {
opacity: 1;
transform: scaleY(1);
}
100% {
opacity: 0;
transform: scaleY(0.8);
}
}
@-webkit-keyframes rabSlideUpIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0.8);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
}
@keyframes rabSlideUpIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0.8);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
}
@-webkit-keyframes rabSlideUpOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0.8);
}
}
@keyframes rabSlideUpOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(0.8);
}
}
@-webkit-keyframes rabSlideDownIn {
0% {
opacity: 0;
transform-origin: 100% 100%;
transform: scaleY(0.8);
}
100% {
opacity: 1;
transform-origin: 100% 100%;
transform: scaleY(1);
}
}
@keyframes rabSlideDownIn {
0% {
opacity: 0;
transform-origin: 100% 100%;
transform: scaleY(0.8);
}
100% {
opacity: 1;
transform-origin: 100% 100%;
transform: scaleY(1);
}
}
@-webkit-keyframes rabSlideDownOut {
0% {
opacity: 1;
transform-origin: 100% 100%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 100% 100%;
transform: scaleY(0.8);
}
}
@keyframes rabSlideDownOut {
0% {
opacity: 1;
transform-origin: 100% 100%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 100% 100%;
transform: scaleY(0.8);
}
}
@-webkit-keyframes rabSlideLeftIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleX(0.8);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleX(1);
}
}
@keyframes rabSlideLeftIn {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleX(0.8);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleX(1);
}
}
@-webkit-keyframes rabSlideLeftOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleX(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleX(0.8);
}
}
@keyframes rabSlideLeftOut {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleX(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleX(0.8);
}
}
@-webkit-keyframes rabSlideRightIn {
0% {
opacity: 0;
transform-origin: 100% 0%;
transform: scaleX(0.8);
}
100% {
opacity: 1;
transform-origin: 100% 0%;
transform: scaleX(1);
}
}
@keyframes rabSlideRightIn {
0% {
opacity: 0;
transform-origin: 100% 0%;
transform: scaleX(0.8);
}
100% {
opacity: 1;
transform-origin: 100% 0%;
transform: scaleX(1);
}
}
@-webkit-keyframes rabSlideRightOut {
0% {
opacity: 1;
transform-origin: 100% 0%;
transform: scaleX(1);
}
100% {
opacity: 0;
transform-origin: 100% 0%;
transform: scaleX(0.8);
}
}
@keyframes rabSlideRightOut {
0% {
opacity: 1;
transform-origin: 100% 0%;
transform: scaleX(1);
}
100% {
opacity: 0;
transform-origin: 100% 0%;
transform: scaleX(0.8);
}
}
================================================
FILE: src/styles/animation/zoom.less
================================================
.zoom(@className, @keyframes) {
.zoom-big-@{className} {
-webkit-animation: @keyframes 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
animation: @keyframes 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
}
.zoom(enter, rabZoomBigIn);
.zoom(leave, rabZoomBigOut);
.zoom(fast-enter, rabZoomBigFastIn);
.zoom(fast-leave, rabZoomBigFastOut);
@-webkit-keyframes rabZoomBigIn {
0% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes rabZoomBigIn {
0% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes rabZoomBigOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
}
}
@keyframes rabZoomBigOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
}
}
@-webkit-keyframes rabZoomBigFastIn {
0% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes rabZoomBigFastIn {
0% {
-webkit-transform: scale(0.6);
transform: scale(0.6);
opacity: 0;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes rabZoomBigFastOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.85);
transform: scale(0.85);
opacity: 0;
}
}
@keyframes rabZoomBigFastOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
-webkit-transform: scale(0.85);
transform: scale(0.85);
opacity: 0;
}
}
================================================
FILE: src/styles/color/bezierEasing.less
================================================
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */
.bezierEasingMixin() {
@functions: ~`(function() {
var NEWTON_ITERATIONS = 4;
var NEWTON_MIN_SLOPE = 0.001;
var SUBDIVISION_PRECISION = 0.0000001;
var SUBDIVISION_MAX_ITERATIONS = 10;
var kSplineTableSize = 11;
var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
var float32ArraySupported = typeof Float32Array === 'function';
function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
function C (aA1) { return 3.0 * aA1; }
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }
function binarySubdivide (aX, aA, aB, mX1, mX2) {
var currentX, currentT, i = 0;
do {
currentT = aA + (aB - aA) / 2.0;
currentX = calcBezier(currentT, mX1, mX2) - aX;
if (currentX > 0.0) {
aB = currentT;
} else {
aA = currentT;
}
} while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
return currentT;
}
function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
var currentSlope = getSlope(aGuessT, mX1, mX2);
if (currentSlope === 0.0) {
return aGuessT;
}
var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
aGuessT -= currentX / currentSlope;
}
return aGuessT;
}
var BezierEasing = function (mX1, mY1, mX2, mY2) {
if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
throw new Error('bezier x values must be in [0, 1] range');
}
// Precompute samples table
var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
if (mX1 !== mY1 || mX2 !== mY2) {
for (var i = 0; i < kSplineTableSize; ++i) {
sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
}
}
function getTForX (aX) {
var intervalStart = 0.0;
var currentSample = 1;
var lastSample = kSplineTableSize - 1;
for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
intervalStart += kSampleStepSize;
}
--currentSample;
// Interpolate to provide an initial guess for t
var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
var guessForT = intervalStart + dist * kSampleStepSize;
var initialSlope = getSlope(guessForT, mX1, mX2);
if (initialSlope >= NEWTON_MIN_SLOPE) {
return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
} else if (initialSlope === 0.0) {
return guessForT;
} else {
return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
}
}
return function BezierEasing (x) {
if (mX1 === mY1 && mX2 === mY2) {
return x; // linear
}
// Because JavaScript number are imprecise, we should guarantee the extremes are right.
if (x === 0) {
return 0;
}
if (x === 1) {
return 1;
}
return calcBezier(getTForX(x), mY1, mY2);
};
};
this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
// less 3 requires a return
return '';
})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
================================================
FILE: src/styles/color/colorPalette.less
================================================
/* stylelint-disable no-duplicate-selectors */
@import "bezierEasing";
@import "tinyColor";
// We create a very complex algorithm which take the place of original tint/shade color system
// to make sure no one can understand it 👻
// and create an entire color palette magicly by inputing just a single primary color.
// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
.colorPaletteMixin() {
@functions: ~`(function() {
var hueStep = 2;
var saturationStep = 16;
var saturationStep2 = 5;
var brightnessStep1 = 5;
var brightnessStep2 = 15;
var lightColorCount = 5;
var darkColorCount = 4;
var getHue = function(hsv, i, isLight) {
var hue;
if (hsv.h >= 60 && hsv.h <= 240) {
hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
} else {
hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
}
if (hue < 0) {
hue += 360;
} else if (hue >= 360) {
hue -= 360;
}
return Math.round(hue);
};
var getSaturation = function(hsv, i, isLight) {
var saturation;
if (isLight) {
saturation = Math.round(hsv.s * 100) - saturationStep * i;
} else if (i == darkColorCount) {
saturation = Math.round(hsv.s * 100) + saturationStep;
} else {
saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
}
if (saturation > 100) {
saturation = 100;
}
if (isLight && i === lightColorCount && saturation > 10) {
saturation = 10;
}
if (saturation < 6) {
saturation = 6;
}
return Math.round(saturation);
};
var getValue = function(hsv, i, isLight) {
if (isLight) {
return Math.round(hsv.v * 100) + brightnessStep1 * i;
}
return Math.round(hsv.v * 100) - brightnessStep2 * i;
};
this.colorPalette = function(color, index) {
var isLight = index <= 6;
var hsv = tinycolor(color).toHsv();
var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
return tinycolor({
h: getHue(hsv, i, isLight),
s: getSaturation(hsv, i, isLight),
v: getValue(hsv, i, isLight),
}).toHexString();
};
})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.colorPaletteMixin();
================================================
FILE: src/styles/color/colors.less
================================================
@import 'colorPalette';
// color palettes
@blue-1: color(~`colorPalette("@{blue-6}", 1)`);
@blue-2: color(~`colorPalette("@{blue-6}", 2)`);
@blue-3: color(~`colorPalette("@{blue-6}", 3)`);
@blue-4: color(~`colorPalette("@{blue-6}", 4)`);
@blue-5: color(~`colorPalette("@{blue-6}", 5)`);
@blue-6: #1890ff;
@blue-7: color(~`colorPalette("@{blue-6}", 7)`);
@blue-8: color(~`colorPalette("@{blue-6}", 8)`);
@blue-9: color(~`colorPalette("@{blue-6}", 9)`);
@blue-10: color(~`colorPalette("@{blue-6}", 10)`);
@purple-1: color(~`colorPalette("@{purple-6}", 1)`);
@purple-2: color(~`colorPalette("@{purple-6}", 2)`);
@purple-3: color(~`colorPalette("@{purple-6}", 3)`);
@purple-4: color(~`colorPalette("@{purple-6}", 4)`);
@purple-5: color(~`colorPalette("@{purple-6}", 5)`);
@purple-6: #722ed1;
@purple-7: color(~`colorPalette("@{purple-6}", 7)`);
@purple-8: color(~`colorPalette("@{purple-6}", 8)`);
@purple-9: color(~`colorPalette("@{purple-6}", 9)`);
@purple-10: color(~`colorPalette("@{purple-6}", 10)`);
@cyan-1: color(~`colorPalette("@{cyan-6}", 1)`);
@cyan-2: color(~`colorPalette("@{cyan-6}", 2)`);
@cyan-3: color(~`colorPalette("@{cyan-6}", 3)`);
@cyan-4: color(~`colorPalette("@{cyan-6}", 4)`);
@cyan-5: color(~`colorPalette("@{cyan-6}", 5)`);
@cyan-6: #13c2c2;
@cyan-7: color(~`colorPalette("@{cyan-6}", 7)`);
@cyan-8: color(~`colorPalette("@{cyan-6}", 8)`);
@cyan-9: color(~`colorPalette("@{cyan-6}", 9)`);
@cyan-10: color(~`colorPalette("@{cyan-6}", 10)`);
@green-1: color(~`colorPalette("@{green-6}", 1)`);
@green-2: color(~`colorPalette("@{green-6}", 2)`);
@green-3: color(~`colorPalette("@{green-6}", 3)`);
@green-4: color(~`colorPalette("@{green-6}", 4)`);
@green-5: color(~`colorPalette("@{green-6}", 5)`);
@green-6: #52c41a;
@green-7: color(~`colorPalette("@{green-6}", 7)`);
@green-8: color(~`colorPalette("@{green-6}", 8)`);
@green-9: color(~`colorPalette("@{green-6}", 9)`);
@green-10: color(~`colorPalette("@{green-6}", 10)`);
@magenta-1: color(~`colorPalette("@{magenta-6}", 1)`);
@magenta-2: color(~`colorPalette("@{magenta-6}", 2)`);
@magenta-3: color(~`colorPalette("@{magenta-6}", 3)`);
@magenta-4: color(~`colorPalette("@{magenta-6}", 4)`);
@magenta-5: color(~`colorPalette("@{magenta-6}", 5)`);
@magenta-6: #eb2f96;
@magenta-7: color(~`colorPalette("@{magenta-6}", 7)`);
@magenta-8: color(~`colorPalette("@{magenta-6}", 8)`);
@magenta-9: color(~`colorPalette("@{magenta-6}", 9)`);
@magenta-10: color(~`colorPalette("@{magenta-6}", 10)`);
// alias of magenta
@pink-1: color(~`colorPalette("@{pink-6}", 1)`);
@pink-2: color(~`colorPalette("@{pink-6}", 2)`);
@pink-3: color(~`colorPalette("@{pink-6}", 3)`);
@pink-4: color(~`colorPalette("@{pink-6}", 4)`);
@pink-5: color(~`colorPalette("@{pink-6}", 5)`);
@pink-6: #eb2f96;
@pink-7: color(~`colorPalette("@{pink-6}", 7)`);
@pink-8: color(~`colorPalette("@{pink-6}", 8)`);
@pink-9: color(~`colorPalette("@{pink-6}", 9)`);
@pink-10: color(~`colorPalette("@{pink-6}", 10)`);
@red-1: color(~`colorPalette("@{red-6}", 1)`);
@red-2: color(~`colorPalette("@{red-6}", 2)`);
@red-3: color(~`colorPalette("@{red-6}", 3)`);
@red-4: color(~`colorPalette("@{red-6}", 4)`);
@red-5: color(~`colorPalette("@{red-6}", 5)`);
@red-6: #f5222d;
@red-7: color(~`colorPalette("@{red-6}", 7)`);
@red-8: color(~`colorPalette("@{red-6}", 8)`);
@red-9: color(~`colorPalette("@{red-6}", 9)`);
@red-10: color(~`colorPalette("@{red-6}", 10)`);
@orange-1: color(~`colorPalette("@{orange-6}", 1)`);
@orange-2: color(~`colorPalette("@{orange-6}", 2)`);
@orange-3: color(~`colorPalette("@{orange-6}", 3)`);
@orange-4: color(~`colorPalette("@{orange-6}", 4)`);
@orange-5: color(~`colorPalette("@{orange-6}", 5)`);
@orange-6: #fa8c16;
@orange-7: color(~`colorPalette("@{orange-6}", 7)`);
@orange-8: color(~`colorPalette("@{orange-6}", 8)`);
@orange-9: color(~`colorPalette("@{orange-6}", 9)`);
@orange-10: color(~`colorPalette("@{orange-6}", 10)`);
@yellow-1: color(~`colorPalette("@{yellow-6}", 1)`);
@yellow-2: color(~`colorPalette("@{yellow-6}", 2)`);
@yellow-3: color(~`colorPalette("@{yellow-6}", 3)`);
@yellow-4: color(~`colorPalette("@{yellow-6}", 4)`);
@yellow-5: color(~`colorPalette("@{yellow-6}", 5)`);
@yellow-6: #fadb14;
@yellow-7: color(~`colorPalette("@{yellow-6}", 7)`);
@yellow-8: color(~`colorPalette("@{yellow-6}", 8)`);
@yellow-9: color(~`colorPalette("@{yellow-6}", 9)`);
@yellow-10: color(~`colorPalette("@{yellow-6}", 10)`);
@volcano-1: color(~`colorPalette("@{volcano-6}", 1)`);
@volcano-2: color(~`colorPalette("@{volcano-6}", 2)`);
@volcano-3: color(~`colorPalette("@{volcano-6}", 3)`);
@volcano-4: color(~`colorPalette("@{volcano-6}", 4)`);
@volcano-5: color(~`colorPalette("@{volcano-6}", 5)`);
@volcano-6: #fa541c;
@volcano-7: color(~`colorPalette("@{volcano-6}", 7)`);
@volcano-8: color(~`colorPalette("@{volcano-6}", 8)`);
@volcano-9: color(~`colorPalette("@{volcano-6}", 9)`);
@volcano-10: color(~`colorPalette("@{volcano-6}", 10)`);
@geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`);
@geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`);
@geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`);
@geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`);
@geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`);
@geekblue-6: #2f54eb;
@geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`);
@geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`);
@geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`);
@geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`);
@lime-1: color(~`colorPalette("@{lime-6}", 1)`);
@lime-2: color(~`colorPalette("@{lime-6}", 2)`);
@lime-3: color(~`colorPalette("@{lime-6}", 3)`);
@lime-4: color(~`colorPalette("@{lime-6}", 4)`);
@lime-5: color(~`colorPalette("@{lime-6}", 5)`);
@lime-6: #a0d911;
@lime-7: color(~`colorPalette("@{lime-6}", 7)`);
@lime-8: color(~`colorPalette("@{lime-6}", 8)`);
@lime-9: color(~`colorPalette("@{lime-6}", 9)`);
@lime-10: color(~`colorPalette("@{lime-6}", 10)`);
@gold-1: color(~`colorPalette("@{gold-6}", 1)`);
@gold-2: color(~`colorPalette("@{gold-6}", 2)`);
@gold-3: color(~`colorPalette("@{gold-6}", 3)`);
@gold-4: color(~`colorPalette("@{gold-6}", 4)`);
@gold-5: color(~`colorPalette("@{gold-6}", 5)`);
@gold-6: #faad14;
@gold-7: color(~`colorPalette("@{gold-6}", 7)`);
@gold-8: color(~`colorPalette("@{gold-6}", 8)`);
@gold-9: color(~`colorPalette("@{gold-6}", 9)`);
@gold-10: color(~`colorPalette("@{gold-6}", 10)`);
================================================
FILE: src/styles/color/tinyColor.less
================================================
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.tinyColorMixin() {
@functions: ~`(function() {
// TinyColor v1.4.1
// https://github.com/bgrins/TinyColor
// 2016-07-07, Brian Grinstead, MIT License
var trimLeft = /^\s+/,
trimRight = /\s+$/,
tinyCounter = 0,
mathRound = Math.round,
mathMin = Math.min,
mathMax = Math.max,
mathRandom = Math.random;
function tinycolor (color, opts) {
color = (color) ? color : '';
opts = opts || { };
// If input is already a tinycolor, return itself
if (color instanceof tinycolor) {
return color;
}
// If we are called as a function, call using new instead
if (!(this instanceof tinycolor)) {
return new tinycolor(color, opts);
}
var rgb = inputToRGB(color);
this._originalInput = color,
this._r = rgb.r,
this._g = rgb.g,
this._b = rgb.b,
this._a = rgb.a,
this._roundA = mathRound(100*this._a) / 100,
this._format = opts.format || rgb.format;
this._gradientType = opts.gradientType;
// Don't let the range of [0,255] come back in [0,1].
// Potentially lose a little bit of precision here, but will fix issues where
// .5 gets interpreted as half of the total, instead of half of 1
// If it was supposed to be 128, this was already taken care of by inputToRgb
if (this._r < 1) { this._r = mathRound(this._r); }
if (this._g < 1) { this._g = mathRound(this._g); }
if (this._b < 1) { this._b = mathRound(this._b); }
this._ok = rgb.ok;
this._tc_id = tinyCounter++;
}
tinycolor.prototype = {
isDark: function() {
return this.getBrightness() < 128;
},
isLight: function() {
return !this.isDark();
},
isValid: function() {
return this._ok;
},
getOriginalInput: function() {
return this._originalInput;
},
getFormat: function() {
return this._format;
},
getAlpha: function() {
return this._a;
},
getBrightness: function() {
//http://www.w3.org/TR/AERT#color-contrast
var rgb = this.toRgb();
return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
},
getLuminance: function() {
//http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
var rgb = this.toRgb();
var RsRGB, GsRGB, BsRGB, R, G, B;
RsRGB = rgb.r/255;
GsRGB = rgb.g/255;
BsRGB = rgb.b/255;
if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);}
if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);}
if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);}
return (0.2126 * R) + (0.7152 * G) + (0.0722 * B);
},
setAlpha: function(value) {
this._a = boundAlpha(value);
this._roundA = mathRound(100*this._a) / 100;
return this;
},
toHsv: function() {
var hsv = rgbToHsv(this._r, this._g, this._b);
return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a };
},
toHsvString: function() {
var hsv = rgbToHsv(this._r, this._g, this._b);
var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
return (this._a == 1) ?
"hsv(" + h + ", " + s + "%, " + v + "%)" :
"hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")";
},
toHsl: function() {
var hsl = rgbToHsl(this._r, this._g, this._b);
return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a };
},
toHslString: function() {
var hsl = rgbToHsl(this._r, this._g, this._b);
var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
return (this._a == 1) ?
"hsl(" + h + ", " + s + "%, " + l + "%)" :
"hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")";
},
toHex: function(allow3Char) {
return rgbToHex(this._r, this._g, this._b, allow3Char);
},
toHexString: function(allow3Char) {
return '#' + this.toHex(allow3Char);
},
toHex8: function(allow4Char) {
return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
},
toHex8String: function(allow4Char) {
return '#' + this.toHex8(allow4Char);
},
toRgb: function() {
return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };
},
toRgbString: function() {
return (this._a == 1) ?
"rgb(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" :
"rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")";
},
toPercentageRgb: function() {
return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a };
},
toPercentageRgbString: function() {
return (this._a == 1) ?
"rgb(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" :
"rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
},
toName: function() {
if (this._a === 0) {
return "transparent";
}
if (this._a < 1) {
return false;
}
return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
},
toFilter: function(secondColor) {
var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a);
var secondHex8String = hex8String;
var gradientType = this._gradientType ? "GradientType = 1, " : "";
if (secondColor) {
var s = tinycolor(secondColor);
secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a);
}
return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")";
},
toString: function(format) {
var formatSet = !!format;
format = format || this._format;
var formattedString = false;
var hasAlpha = this._a < 1 && this._a >= 0;
var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");
if (needsAlphaFormat) {
// Special case for "transparent", all other non-alpha formats
// will return rgba when there is transparency.
if (format === "name" && this._a === 0) {
return this.toName();
}
return this.toRgbString();
}
if (format === "rgb") {
formattedString = this.toRgbString();
}
if (format === "prgb") {
formattedString = this.toPercentageRgbString();
}
if (format === "hex" || format === "hex6") {
formattedString = this.toHexString();
}
if (format === "hex3") {
formattedString = this.toHexString(true);
}
if (format === "hex4") {
formattedString = this.toHex8String(true);
}
if (format === "hex8") {
formattedString = this.toHex8String();
}
if (format === "name") {
formattedString = this.toName();
}
if (format === "hsl") {
formattedString = this.toHslString();
}
if (format === "hsv") {
formattedString = this.toHsvString();
}
return formattedString || this.toHexString();
},
clone: function() {
return tinycolor(this.toString());
},
_applyModification: function(fn, args) {
var color = fn.apply(null, [this].concat([].slice.call(args)));
this._r = color._r;
this._g = color._g;
this._b = color._b;
this.setAlpha(color._a);
return this;
},
lighten: function() {
return this._applyModification(lighten, arguments);
},
brighten: function() {
return this._applyModification(brighten, arguments);
},
darken: function() {
return this._applyModification(darken, arguments);
},
desaturate: function() {
return this._applyModification(desaturate, arguments);
},
saturate: function() {
return this._applyModification(saturate, arguments);
},
greyscale: function() {
return this._applyModification(greyscale, arguments);
},
spin: function() {
return this._applyModification(spin, arguments);
},
_applyCombination: function(fn, args) {
return fn.apply(null, [this].concat([].slice.call(args)));
},
analogous: function() {
return this._applyCombination(analogous, arguments);
},
complement: function() {
return this._applyCombination(complement, arguments);
},
monochromatic: function() {
return this._applyCombination(monochromatic, arguments);
},
splitcomplement: function() {
return this._applyCombination(splitcomplement, arguments);
},
triad: function() {
return this._applyCombination(triad, arguments);
},
tetrad: function() {
return this._applyCombination(tetrad, arguments);
}
};
// If input is an object, force 1 into "1.0" to handle ratios properly
// String input requires "1.0" as input, so 1 will be treated as 1
tinycolor.fromRatio = function(color, opts) {
if (typeof color == "object") {
var newColor = {};
for (var i in color) {
if (color.hasOwnProperty(i)) {
if (i === "a") {
newColor[i] = color[i];
}
else {
newColor[i] = convertToPercentage(color[i]);
}
}
}
color = newColor;
}
return tinycolor(color, opts);
};
// Given a string or object, convert that input to RGB
// Possible string inputs:
//
// "red"
// "#f00" or "f00"
// "#ff0000" or "ff0000"
// "#ff000000" or "ff000000"
// "rgb 255 0 0" or "rgb (255, 0, 0)"
// "rgb 1.0 0 0" or "rgb (1, 0, 0)"
// "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
// "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
// "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
// "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
// "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
//
function inputToRGB(color) {
var rgb = { r: 0, g: 0, b: 0 };
var a = 1;
var s = null;
var v = null;
var l = null;
var ok = false;
var format = false;
if (typeof color == "string") {
color = stringInputToObject(color);
}
if (typeof color == "object") {
if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
rgb = rgbToRgb(color.r, color.g, color.b);
ok = true;
format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
}
else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
s = convertToPercentage(color.s);
v = convertToPercentage(color.v);
rgb = hsvToRgb(color.h, s, v);
ok = true;
format = "hsv";
}
else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
s = convertToPercentage(color.s);
l = convertToPercentage(color.l);
rgb = hslToRgb(color.h, s, l);
ok = true;
format = "hsl";
}
if (color.hasOwnProperty("a")) {
a = color.a;
}
}
a = boundAlpha(a);
return {
ok: ok,
format: color.format || format,
r: mathMin(255, mathMax(rgb.r, 0)),
g: mathMin(255, mathMax(rgb.g, 0)),
b: mathMin(255, mathMax(rgb.b, 0)),
a: a
};
}
// Conversion Functions
// --------------------
// rgbToHsl, rgbToHsv, hslToRgb, hsvToRgb modified from:
//
// rgbToRgb
// Handle bounds / percentage checking to conform to CSS color spec
//
function desaturate(color, amount) {
amount = (amount === 0) ? 0 : (amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.s -= amount / 100;
hsl.s = clamp01(hsl.s);
return tinycolor(hsl);
}
function saturate(color, amount) {
amount = (amount === 0) ? 0 : (amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.s += amount / 100;
hsl.s = clamp01(hsl.s);
return tinycolor(hsl);
}
function greyscale(color) {
return tinycolor(color).desaturate(100);
}
function lighten (color, amount) {
amount = (amount === 0) ? 0 : (amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.l += amount / 100;
hsl.l = clamp01(hsl.l);
return tinycolor(hsl);
}
function brighten(color, amount) {
amount = (amount === 0) ? 0 : (amount || 10);
var rgb = tinycolor(color).toRgb();
rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100))));
rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100))));
rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100))));
return tinycolor(rgb);
}
function darken (color, amount) {
amount = (amount === 0) ? 0 : (amount || 10);
var hsl = tinycolor(color).toHsl();
hsl.l -= amount / 100;
hsl.l = clamp01(hsl.l);
return tinycolor(hsl);
}
// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
// Values outside of this range will be wrapped into this range.
function spin(color, amount) {
var hsl = tinycolor(color).toHsl();
var hue = (hsl.h + amount) % 360;
hsl.h = hue < 0 ? 360 + hue : hue;
return tinycolor(hsl);
}
// Combination Functions
// ---------------------
// Thanks to jQuery xColor for some of the ideas behind these
//
function complement(color) {
var hsl = tinycolor(color).toHsl();
hsl.h = (hsl.h + 180) % 360;
return tinycolor(hsl);
}
function triad(color) {
var hsl = tinycolor(color).toHsl();
var h = hsl.h;
return [
tinycolor(color),
tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),
tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })
];
}
function tetrad(color) {
var hsl = tinycolor(color).toHsl();
var h = hsl.h;
return [
tinycolor(color),
tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }),
tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),
tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })
];
}
function splitcomplement(color) {
var hsl = tinycolor(color).toHsl();
var h = hsl.h;
return [
tinycolor(color),
tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}),
tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l})
];
}
function analogous(color, results, slices) {
results = results || 6;
slices = slices || 30;
var hsl = tinycolor(color).toHsl();
var part = 360 / slices;
var ret = [tinycolor(color)];
for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) {
hsl.h = (hsl.h + part) % 360;
ret.push(tinycolor(hsl));
}
return ret;
}
function monochromatic(color, results) {
results = results || 6;
var hsv = tinycolor(color).toHsv();
var h = hsv.h, s = hsv.s, v = hsv.v;
var ret = [];
var modification = 1 / results;
while (results--) {
ret.push(tinycolor({ h: h, s: s, v: v}));
v = (v + modification) % 1;
}
return ret;
}
// Utility Functions
// ---------------------
tinycolor.mix = function(color1, color2, amount) {
amount = (amount === 0) ? 0 : (amount || 50);
var rgb1 = tinycolor(color1).toRgb();
var rgb2 = tinycolor(color2).toRgb();
var p = amount / 100;
var rgba = {
r: ((rgb2.r - rgb1.r) * p) + rgb1.r,
g: ((rgb2.g - rgb1.g) * p) + rgb1.g,
b: ((rgb2.b - rgb1.b) * p) + rgb1.b,
a: ((rgb2.a - rgb1.a) * p) + rgb1.a
};
return tinycolor(rgba);
};
// Readability Functions
// ---------------------
// false
// tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false
tinycolor.isReadable = function(color1, color2, wcag2) {
var readability = tinycolor.readability(color1, color2);
var wcag2Parms, out;
out = false;
wcag2Parms = validateWCAG2Parms(wcag2);
switch (wcag2Parms.level + wcag2Parms.size) {
case "AAsmall":
case "AAAlarge":
out = readability >= 4.5;
break;
case "AAlarge":
out = readability >= 3;
break;
case "AAAsmall":
out = readability >= 7;
break;
}
return out;
};
// mostReadable
// Given a base color and a list of possible foreground or background
// colors for that base, returns the most readable color.
// Optionally returns Black or White if the most readable color is unreadable.
// *Example*
// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
// tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff"
// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3"
// tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff"
tinycolor.mostReadable = function(baseColor, colorList, args) {
var bestColor = null;
var bestScore = 0;
var readability;
var includeFallbackColors, level, size ;
args = args || {};
includeFallbackColors = args.includeFallbackColors ;
level = args.level;
size = args.size;
for (var i= 0; i < colorList.length ; i++) {
readability = tinycolor.readability(baseColor, colorList[i]);
if (readability > bestScore) {
bestScore = readability;
bestColor = tinycolor(colorList[i]);
}
}
if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) {
return bestColor;
}
else {
args.includeFallbackColors=false;
return tinycolor.mostReadable(baseColor,["#fff", "#000"],args);
}
};
// Big List of Colors
// ------------------
//
var names = tinycolor.names = {
aliceblue: "f0f8ff",
antiquewhite: "faebd7",
aqua: "0ff",
aquamarine: "7fffd4",
azure: "f0ffff",
beige: "f5f5dc",
bisque: "ffe4c4",
black: "000",
blanchedalmond: "ffebcd",
blue: "00f",
blueviolet: "8a2be2",
brown: "a52a2a",
burlywood: "deb887",
burntsienna: "ea7e5d",
cadetblue: "5f9ea0",
chartreuse: "7fff00",
chocolate: "d2691e",
coral: "ff7f50",
cornflowerblue: "6495ed",
cornsilk: "fff8dc",
crimson: "dc143c",
cyan: "0ff",
darkblue: "00008b",
darkcyan: "008b8b",
darkgoldenrod: "b8860b",
darkgray: "a9a9a9",
darkgreen: "006400",
darkgrey: "a9a9a9",
darkkhaki: "bdb76b",
darkmagenta: "8b008b",
darkolivegreen: "556b2f",
darkorange: "ff8c00",
darkorchid: "9932cc",
darkred: "8b0000",
darksalmon: "e9967a",
darkseagreen: "8fbc8f",
darkslateblue: "483d8b",
darkslategray: "2f4f4f",
darkslategrey: "2f4f4f",
darkturquoise: "00ced1",
darkviolet: "9400d3",
deeppink: "ff1493",
deepskyblue: "00bfff",
dimgray: "696969",
dimgrey: "696969",
dodgerblue: "1e90ff",
firebrick: "b22222",
floralwhite: "fffaf0",
forestgreen: "228b22",
fuchsia: "f0f",
gainsboro: "dcdcdc",
ghostwhite: "f8f8ff",
gold: "ffd700",
goldenrod: "daa520",
gray: "808080",
green: "008000",
greenyellow: "adff2f",
grey: "808080",
honeydew: "f0fff0",
hotpink: "ff69b4",
indianred: "cd5c5c",
indigo: "4b0082",
ivory: "fffff0",
khaki: "f0e68c",
lavender: "e6e6fa",
lavenderblush: "fff0f5",
lawngreen: "7cfc00",
lemonchiffon: "fffacd",
lightblue: "add8e6",
lightcoral: "f08080",
lightcyan: "e0ffff",
lightgoldenrodyellow: "fafad2",
lightgray: "d3d3d3",
lightgreen: "90ee90",
lightgrey: "d3d3d3",
lightpink: "ffb6c1",
lightsalmon: "ffa07a",
lightseagreen: "20b2aa",
lightskyblue: "87cefa",
lightslategray: "789",
lightslategrey: "789",
lightsteelblue: "b0c4de",
lightyellow: "ffffe0",
lime: "0f0",
limegreen: "32cd32",
linen: "faf0e6",
magenta: "f0f",
maroon: "800000",
mediumaquamarine: "66cdaa",
mediumblue: "0000cd",
mediumorchid: "ba55d3",
mediumpurple: "9370db",
mediumseagreen: "3cb371",
mediumslateblue: "7b68ee",
mediumspringgreen: "00fa9a",
mediumturquoise: "48d1cc",
mediumvioletred: "c71585",
midnightblue: "191970",
mintcream: "f5fffa",
mistyrose: "ffe4e1",
moccasin: "ffe4b5",
navajowhite: "ffdead",
navy: "000080",
oldlace: "fdf5e6",
olive: "808000",
olivedrab: "6b8e23",
orange: "ffa500",
orangered: "ff4500",
orchid: "da70d6",
palegoldenrod: "eee8aa",
palegreen: "98fb98",
paleturquoise: "afeeee",
palevioletred: "db7093",
papayawhip: "ffefd5",
peachpuff: "ffdab9",
peru: "cd853f",
pink: "ffc0cb",
plum: "dda0dd",
powderblue: "b0e0e6",
purple: "800080",
rebeccapurple: "663399",
red: "f00",
rosybrown: "bc8f8f",
royalblue: "4169e1",
saddlebrown: "8b4513",
salmon: "fa8072",
sandybrown: "f4a460",
seagreen: "2e8b57",
seashell: "fff5ee",
sienna: "a0522d",
silver: "c0c0c0",
skyblue: "87ceeb",
slateblue: "6a5acd",
slategray: "708090",
slategrey: "708090",
snow: "fffafa",
springgreen: "00ff7f",
steelblue: "4682b4",
tan: "d2b48c",
teal: "008080",
thistle: "d8bfd8",
tomato: "ff6347",
turquoise: "40e0d0",
violet: "ee82ee",
wheat: "f5deb3",
white: "fff",
whitesmoke: "f5f5f5",
yellow: "ff0",
yellowgreen: "9acd32"
};
// Make it easy to access colors via hexNames[hex]
var hexNames = tinycolor.hexNames = flip(names);
// Utilities
// ---------
// { 'name1': 'val1' } becomes { 'val1': 'name1' }
function flip(o) {
var flipped = { };
for (var i in o) {
if (o.hasOwnProperty(i)) {
flipped[o[i]] = i;
}
}
return flipped;
}
// Return a valid alpha value [0,1] with all invalid values being set to 1
function boundAlpha(a) {
a = parseFloat(a);
if (isNaN(a) || a < 0 || a > 1) {
a = 1;
}
return a;
}
// Take input from [0, n] and return it as [0, 1]
function bound01(n, max) {
if (isOnePointZero(n)) { n = "100%"; }
var processPercent = isPercentage(n);
n = mathMin(max, mathMax(0, parseFloat(n)));
// Automatically convert percentage into number
if (processPercent) {
n = parseInt(n * max, 10) / 100;
}
// Handle floating point rounding errors
if ((Math.abs(n - max) < 0.000001)) {
return 1;
}
// Convert into [0, 1] range if it isn't already
return (n % max) / parseFloat(max);
}
// Force a number between 0 and 1
function clamp01(val) {
return mathMin(1, mathMax(0, val));
}
// Parse a base-16 hex value into a base-10 integer
function parseIntFromHex(val) {
return parseInt(val, 16);
}
// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
//
function isOnePointZero(n) {
return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1;
}
// Check to see if string passed in is a percentage
function isPercentage(n) {
return typeof n === "string" && n.indexOf('%') != -1;
}
// Force a hex value to have 2 characters
function pad2(c) {
return c.length == 1 ? '0' + c : '' + c;
}
// Replace a decimal with it's percentage value
function convertToPercentage(n) {
if (n <= 1) {
n = (n * 100) + "%";
}
return n;
}
// Converts a decimal to a hex value
function convertDecimalToHex(d) {
return Math.round(parseFloat(d) * 255).toString(16);
}
// Converts a hex value to a decimal
function convertHexToDecimal(h) {
return (parseIntFromHex(h) / 255);
}
var matchers = (function() {
//
var CSS_INTEGER = "[-\\+]?\\d+%?";
//
var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
// Allow positive/negative integer/number. Don't capture the either/or, just the entire outcome.
var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
// Actual matching.
// Parentheses and commas are optional, but not required.
// Whitespace can take the place of commas or opening paren
var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
return {
CSS_UNIT: new RegExp(CSS_UNIT),
rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
};
})();
// isValidCSSUnit
// Take in a single string / number and check to see if it looks like a CSS unit
// (see matchers above for definition).
function isValidCSSUnit(color) {
return !!matchers.CSS_UNIT.exec(color);
}
// stringInputToObject
// Permissive string parsing. Take in a number of formats, and output an object
// based on detected format. Returns { r, g, b } or { h, s, l } or { h, s, v}
function stringInputToObject(color) {
color = color.replace(trimLeft, '').replace(trimRight, '').toLowerCase();
var named = false;
if (names[color]) {
color = names[color];
named = true;
}
else if (color == 'transparent') {
return { r: 0, g: 0, b: 0, a: 0, format: "name" };
}
// Try to match string input using regular expressions.
// Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
// Just return an object and let the conversion functions handle that.
// This way the result will be the same whether the tinycolor is initialized with string or object.
var match;
if ((match = matchers.rgb.exec(color))) {
return { r: match[1], g: match[2], b: match[3] };
}
if ((match = matchers.rgba.exec(color))) {
return { r: match[1], g: match[2], b: match[3], a: match[4] };
}
if ((match = matchers.hsl.exec(color))) {
return { h: match[1], s: match[2], l: match[3] };
}
if ((match = matchers.hsla.exec(color))) {
return { h: match[1], s: match[2], l: match[3], a: match[4] };
}
if ((match = matchers.hsv.exec(color))) {
return { h: match[1], s: match[2], v: match[3] };
}
if ((match = matchers.hsva.exec(color))) {
return { h: match[1], s: match[2], v: match[3], a: match[4] };
}
if ((match = matchers.hex8.exec(color))) {
return {
r: parseIntFromHex(match[1]),
g: parseIntFromHex(match[2]),
b: parseIntFromHex(match[3]),
a: convertHexToDecimal(match[4]),
format: named ? "name" : "hex8"
};
}
if ((match = matchers.hex6.exec(color))) {
return {
r: parseIntFromHex(match[1]),
g: parseIntFromHex(match[2]),
b: parseIntFromHex(match[3]),
format: named ? "name" : "hex"
};
}
if ((match = matchers.hex4.exec(color))) {
return {
r: parseIntFromHex(match[1] + '' + match[1]),
g: parseIntFromHex(match[2] + '' + match[2]),
b: parseIntFromHex(match[3] + '' + match[3]),
a: convertHexToDecimal(match[4] + '' + match[4]),
format: named ? "name" : "hex8"
};
}
if ((match = matchers.hex3.exec(color))) {
return {
r: parseIntFromHex(match[1] + '' + match[1]),
g: parseIntFromHex(match[2] + '' + match[2]),
b: parseIntFromHex(match[3] + '' + match[3]),
format: named ? "name" : "hex"
};
}
return false;
}
function validateWCAG2Parms(parms) {
// return valid WCAG2 parms for isReadable.
// If input parms are invalid, return {"level":"AA", "size":"small"}
var level, size;
parms = parms || {"level":"AA", "size":"small"};
level = (parms.level || "AA").toUpperCase();
size = (parms.size || "small").toLowerCase();
if (level !== "AA" && level !== "AAA") {
level = "AA";
}
if (size !== "small" && size !== "large") {
size = "small";
}
return {"level":level, "size":size};
}
this.tinycolor = tinycolor;
})()`;
}
// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.tinyColorMixin();
================================================
FILE: src/styles/common/article.less
================================================
.rab-article {
h1 {
font-size: 26px;
font-weight: normal;
}
h2 {
font-size: 20px;
font-weight: normal;
}
h3 {
font-size: 16px;
font-weight: normal;
}
h4 {
font-size: 14px;
font-weight: normal;
}
h5 {
font-size: 12px;
font-weight: normal;
}
h6 {
font-size: 12px;
font-weight: normal;
}
blockquote {
padding: 5px 5px 3px 10px;
line-height: 1.5;
border-left: 4px solid #ddd;
margin-bottom: 20px;
color: #666;
font-size: 14px;
}
ul:not([class^='rab-']) {
padding-left: 40px;
list-style-type: disc;
}
li:not([class^='rab-']) {
margin-bottom: 5px;
font-size: 14px;
}
ul ul:not([class^='rab-']),
ol ul:not([class^='rab-']) {
list-style-type: circle;
}
p {
margin: 5px;
font-size: 14px;
}
}
================================================
FILE: src/styles/common/base.less
================================================
@import 'normalize';
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*:before,
*:after {
box-sizing: border-box;
}
body {
font-family: @font-family;
font-size: @font-size-base;
line-height: @line-height-base;
color: @text-color;
background-color: @body-background;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
input::-ms-clear,
input::-ms-reveal {
display: none;
}
a {
color: @link-color;
background: transparent;
text-decoration: none;
outline: none;
cursor: pointer;
transition: color @transition-time ease;
&:hover {
color: @link-hover-color;
}
&:active {
color: @link-active-color;
}
&:active,
&:hover {
outline: 0;
text-decoration: none;
}
&[disabled] {
color: #ccc;
cursor: @cursor-disabled;
pointer-events: none;
}
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
code {
padding: 0.2em 0.4em;
margin: 0;
font-size: 85%;
background-color: #fff5f5;
border-radius: 3px;
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
color: #fa795e;
}
code,
kbd,
pre,
samp {
font-family: @code-family;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
================================================
FILE: src/styles/common/iconfont/icons-font.less
================================================
@font-face {
font-family: @icons-font-family;
src: url('@{icons-font-path}/iconfont.eot');
src: url('@{icons-font-path}/iconfont.eot?#iefix') format('embedded-opentype'),
url('@{icons-font-path}/iconfont.woff2') format('woff2'),
url('@{icons-font-path}/iconfont.woff') format('woff'),
url('@{icons-font-path}/iconfont.ttf') format('truetype'),
url('@{icons-font-path}/iconfont.svg#iconfont') format('svg');
font-weight: normal;
font-style: normal;
}
.rab-icon() {
display: inline-block;
font-family: @icons-font-family;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: optimizeLegibility;
line-height: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
vertical-align: inherit;
text-align: center;
}
.rab-icon {
.rab-icon();
}
================================================
FILE: src/styles/common/iconfont/icons-icons.less
================================================
.@{icons-prefix}ios-alert-outline:before {
content: "\e8b7";
}
.@{icons-prefix}rabbit:before {
content: "\e600";
}
.@{icons-prefix}403:before {
content: "\e8b6";
}
.@{icons-prefix}500:before {
content: "\e8bc";
}
.@{icons-prefix}4042:before {
content: "\ef05";
}
.@{icons-prefix}loading-solid:before {
content: "\e8b4";
}
.@{icons-prefix}loading1:before {
content: "\e8b5";
}
.@{icons-prefix}md-arrow-dropup-circle:before {
content: "\e638";
}
.@{icons-prefix}md-swap:before {
content: "\e738";
}
.@{icons-prefix}ios-person-add:before {
content: "\e838";
}
.@{icons-prefix}md-arrow-dropup:before {
content: "\e639";
}
.@{icons-prefix}md-sunny:before {
content: "\e739";
}
.@{icons-prefix}ios-phone-landscape:before {
content: "\e839";
}
.@{icons-prefix}md-arrow-round-down:before {
content: "\e63a";
}
.@{icons-prefix}md-subway:before {
content: "\e73a";
}
.@{icons-prefix}ios-photos:before {
content: "\e83a";
}
.@{icons-prefix}md-arrow-forward:before {
content: "\e63b";
}
.@{icons-prefix}md-switch:before {
content: "\e73b";
}
.@{icons-prefix}ios-pin:before {
content: "\e83b";
}
.@{icons-prefix}md-arrow-round-back:before {
content: "\e63c";
}
.@{icons-prefix}md-tablet-landscape:before {
content: "\e73c";
}
.@{icons-prefix}ios-pie:before {
content: "\e83c";
}
.@{icons-prefix}md-arrow-up:before {
content: "\e63d";
}
.@{icons-prefix}md-sync:before {
content: "\e73d";
}
.@{icons-prefix}ios-pint:before {
content: "\e83d";
}
.@{icons-prefix}md-arrow-round-up:before {
content: "\e63e";
}
.@{icons-prefix}md-text:before {
content: "\e73e";
}
.@{icons-prefix}ios-partly-sunny:before {
content: "\e83e";
}
.@{icons-prefix}md-arrow-round-forward:before {
content: "\e63f";
}
.@{icons-prefix}md-tablet-portrait:before {
content: "\e73f";
}
.@{icons-prefix}ios-planet:before {
content: "\e83f";
}
.@{icons-prefix}md-backspace:before {
content: "\e640";
}
.@{icons-prefix}md-tennisball:before {
content: "\e740";
}
.@{icons-prefix}ios-pizza:before {
content: "\e840";
}
.@{icons-prefix}md-at:before {
content: "\e641";
}
.@{icons-prefix}md-thermometer:before {
content: "\e741";
}
.@{icons-prefix}ios-play:before {
content: "\e841";
}
.@{icons-prefix}md-attach:before {
content: "\e642";
}
.@{icons-prefix}md-thumbs-up:before {
content: "\e742";
}
.@{icons-prefix}ios-play-circle:before {
content: "\e842";
}
.@{icons-prefix}md-basket:before {
content: "\e643";
}
.@{icons-prefix}md-thumbs-down:before {
content: "\e743";
}
.@{icons-prefix}ios-podium:before {
content: "\e843";
}
.@{icons-prefix}md-battery-dead:before {
content: "\e644";
}
.@{icons-prefix}md-stats:before {
content: "\e744";
}
.@{icons-prefix}ios-power:before {
content: "\e844";
}
.@{icons-prefix}md-basketball:before {
content: "\e645";
}
.@{icons-prefix}md-thunderstorm:before {
content: "\e745";
}
.@{icons-prefix}ios-pricetag:before {
content: "\e845";
}
.@{icons-prefix}md-battery-charging:before {
content: "\e646";
}
.@{icons-prefix}md-time:before {
content: "\e746";
}
.@{icons-prefix}ios-pricetags:before {
content: "\e846";
}
.@{icons-prefix}md-battery-full:before {
content: "\e647";
}
.@{icons-prefix}md-timer:before {
content: "\e747";
}
.@{icons-prefix}ios-print:before {
content: "\e847";
}
.@{icons-prefix}md-bed:before {
content: "\e648";
}
.@{icons-prefix}md-today:before {
content: "\e748";
}
.@{icons-prefix}ios-pulse:before {
content: "\e848";
}
.@{icons-prefix}md-baseball:before {
content: "\e649";
}
.@{icons-prefix}md-transgender:before {
content: "\e749";
}
.@{icons-prefix}ios-qr-scanner:before {
content: "\e849";
}
.@{icons-prefix}md-barcode:before {
content: "\e64a";
}
.@{icons-prefix}md-trash:before {
content: "\e74a";
}
.@{icons-prefix}ios-quote:before {
content: "\e84a";
}
.@{icons-prefix}md-beaker:before {
content: "\e64b";
}
.@{icons-prefix}md-trending-down:before {
content: "\e74b";
}
.@{icons-prefix}ios-radio-button-off:before {
content: "\e84b";
}
.@{icons-prefix}md-bluetooth:before {
content: "\e64c";
}
.@{icons-prefix}md-trending-up:before {
content: "\e74c";
}
.@{icons-prefix}ios-radio-button-on:before {
content: "\e84c";
}
.@{icons-prefix}md-body:before {
content: "\e64d";
}
.@{icons-prefix}md-tv:before {
content: "\e74d";
}
.@{icons-prefix}ios-radio:before {
content: "\e84d";
}
.@{icons-prefix}md-bonfire:before {
content: "\e64e";
}
.@{icons-prefix}md-trophy:before {
content: "\e74e";
}
.@{icons-prefix}ios-recording:before {
content: "\e84e";
}
.@{icons-prefix}md-bicycle:before {
content: "\e64f";
}
.@{icons-prefix}md-umbrella:before {
content: "\e74f";
}
.@{icons-prefix}ios-redo:before {
content: "\e84f";
}
.@{icons-prefix}md-beer:before {
content: "\e650";
}
.@{icons-prefix}md-undo:before {
content: "\e750";
}
.@{icons-prefix}ios-refresh:before {
content: "\e850";
}
.@{icons-prefix}md-book:before {
content: "\e651";
}
.@{icons-prefix}md-videocam:before {
content: "\e751";
}
.@{icons-prefix}ios-refresh-circle:before {
content: "\e851";
}
.@{icons-prefix}md-boat:before {
content: "\e652";
}
.@{icons-prefix}md-volume-mute:before {
content: "\e752";
}
.@{icons-prefix}ios-remove:before {
content: "\e852";
}
.@{icons-prefix}md-bookmark:before {
content: "\e653";
}
.@{icons-prefix}md-volume-low:before {
content: "\e753";
}
.@{icons-prefix}ios-remove-circle-outline:before {
content: "\e853";
}
.@{icons-prefix}md-bookmarks:before {
content: "\e654";
}
.@{icons-prefix}md-volume-high:before {
content: "\e754";
}
.@{icons-prefix}ios-remove-circle:before {
content: "\e854";
}
.@{icons-prefix}md-bowtie:before {
content: "\e655";
}
.@{icons-prefix}md-train:before {
content: "\e755";
}
.@{icons-prefix}ios-reorder:before {
content: "\e855";
}
.@{icons-prefix}md-briefcase:before {
content: "\e656";
}
.@{icons-prefix}md-walk:before {
content: "\e756";
}
.@{icons-prefix}ios-resize:before {
content: "\e856";
}
.@{icons-prefix}md-browsers:before {
content: "\e657";
}
.@{icons-prefix}md-wallet:before {
content: "\e757";
}
.@{icons-prefix}ios-repeat:before {
content: "\e857";
}
.@{icons-prefix}md-brush:before {
content: "\e658";
}
.@{icons-prefix}md-unlock:before {
content: "\e758";
}
.@{icons-prefix}ios-rainy:before {
content: "\e858";
}
.@{icons-prefix}md-bug:before {
content: "\e659";
}
.@{icons-prefix}md-warning:before {
content: "\e759";
}
.@{icons-prefix}ios-return-left:before {
content: "\e859";
}
.@{icons-prefix}md-build:before {
content: "\e65a";
}
.@{icons-prefix}md-volume-off:before {
content: "\e75a";
}
.@{icons-prefix}ios-restaurant:before {
content: "\e85a";
}
.@{icons-prefix}md-bulb:before {
content: "\e65b";
}
.@{icons-prefix}md-water:before {
content: "\e75b";
}
.@{icons-prefix}ios-return-right:before {
content: "\e85b";
}
.@{icons-prefix}md-business:before {
content: "\e65c";
}
.@{icons-prefix}md-watch:before {
content: "\e75c";
}
.@{icons-prefix}ios-rewind:before {
content: "\e85c";
}
.@{icons-prefix}md-cafe:before {
content: "\e65d";
}
.@{icons-prefix}md-woman:before {
content: "\e75d";
}
.@{icons-prefix}ios-reverse-camera:before {
content: "\e85d";
}
.@{icons-prefix}md-bus:before {
content: "\e65e";
}
.@{icons-prefix}md-wine:before {
content: "\e75e";
}
.@{icons-prefix}ios-ribbon:before {
content: "\e85e";
}
.@{icons-prefix}md-calculator:before {
content: "\e65f";
}
.@{icons-prefix}md-wifi:before {
content: "\e75f";
}
.@{icons-prefix}ios-rocket:before {
content: "\e85f";
}
.@{icons-prefix}md-call:before {
content: "\e660";
}
.@{icons-prefix}ios-add:before {
content: "\e760";
}
.@{icons-prefix}ios-rose:before {
content: "\e860";
}
.@{icons-prefix}md-car:before {
content: "\e661";
}
.@{icons-prefix}ios-add-circle:before {
content: "\e761";
}
.@{icons-prefix}ios-sad:before {
content: "\e861";
}
.@{icons-prefix}md-camera:before {
content: "\e662";
}
.@{icons-prefix}ios-add-circle-outline:before {
content: "\e762";
}
.@{icons-prefix}ios-save:before {
content: "\e862";
}
.@{icons-prefix}md-card:before {
content: "\e663";
}
.@{icons-prefix}ios-albums:before {
content: "\e763";
}
.@{icons-prefix}ios-search:before {
content: "\e863";
}
.@{icons-prefix}md-cash:before {
content: "\e664";
}
.@{icons-prefix}ios-airplane:before {
content: "\e764";
}
.@{icons-prefix}ios-school:before {
content: "\e864";
}
.@{icons-prefix}md-cellular:before {
content: "\e665";
}
.@{icons-prefix}ios-alarm:before {
content: "\e765";
}
.@{icons-prefix}ios-send:before {
content: "\e865";
}
.@{icons-prefix}md-cart:before {
content: "\e666";
}
.@{icons-prefix}ios-alert:before {
content: "\e766";
}
.@{icons-prefix}ios-share:before {
content: "\e866";
}
.@{icons-prefix}md-calendar:before {
content: "\e667";
}
.@{icons-prefix}ios-analytics:before {
content: "\e767";
}
.@{icons-prefix}ios-settings:before {
content: "\e867";
}
.@{icons-prefix}md-chatbubbles:before {
content: "\e668";
}
.@{icons-prefix}ios-appstore:before {
content: "\e768";
}
.@{icons-prefix}ios-share-alt:before {
content: "\e868";
}
.@{icons-prefix}md-chatboxes:before {
content: "\e669";
}
.@{icons-prefix}ios-aperture:before {
content: "\e769";
}
.@{icons-prefix}ios-shirt:before {
content: "\e869";
}
.@{icons-prefix}md-checkbox:before {
content: "\e66a";
}
.@{icons-prefix}ios-apps:before {
content: "\e76a";
}
.@{icons-prefix}ios-shuffle:before {
content: "\e86a";
}
.@{icons-prefix}md-checkmark:before {
content: "\e66b";
}
.@{icons-prefix}ios-archive:before {
content: "\e76b";
}
.@{icons-prefix}ios-skip-backward:before {
content: "\e86b";
}
.@{icons-prefix}md-checkbox-outline:before {
content: "\e66c";
}
.@{icons-prefix}ios-american-football:before {
content: "\e76c";
}
.@{icons-prefix}ios-skip-forward:before {
content: "\e86c";
}
.@{icons-prefix}md-checkmark-circle:before {
content: "\e66d";
}
.@{icons-prefix}ios-arrow-back:before {
content: "\e76d";
}
.@{icons-prefix}ios-speedometer:before {
content: "\e86d";
}
.@{icons-prefix}md-checkmark-circle-outline:before {
content: "\e66e";
}
.@{icons-prefix}ios-arrow-down:before {
content: "\e76e";
}
.@{icons-prefix}ios-square:before {
content: "\e86e";
}
.@{icons-prefix}md-clipboard:before {
content: "\e66f";
}
.@{icons-prefix}ios-arrow-dropdown-circle:before {
content: "\e76f";
}
.@{icons-prefix}ios-square-outline:before {
content: "\e86f";
}
.@{icons-prefix}md-close:before {
content: "\e670";
}
.@{icons-prefix}ios-arrow-dropdown:before {
content: "\e770";
}
.@{icons-prefix}ios-star:before {
content: "\e870";
}
.@{icons-prefix}md-close-circle:before {
content: "\e671";
}
.@{icons-prefix}ios-arrow-dropleft:before {
content: "\e771";
}
.@{icons-prefix}ios-star-half:before {
content: "\e871";
}
.@{icons-prefix}md-clock:before {
content: "\e672";
}
.@{icons-prefix}ios-arrow-dropleft-circle:before {
content: "\e772";
}
.@{icons-prefix}ios-star-outline:before {
content: "\e872";
}
.@{icons-prefix}md-close-circle-outline:before {
content: "\e673";
}
.@{icons-prefix}ios-arrow-dropright-circle:before {
content: "\e773";
}
.@{icons-prefix}ios-stats:before {
content: "\e873";
}
.@{icons-prefix}md-cloud:before {
content: "\e674";
}
.@{icons-prefix}ios-arrow-dropright:before {
content: "\e774";
}
.@{icons-prefix}ios-snow:before {
content: "\e874";
}
.@{icons-prefix}md-cloud-circle:before {
content: "\e675";
}
.@{icons-prefix}ios-arrow-dropup:before {
content: "\e775";
}
.@{icons-prefix}ios-stopwatch:before {
content: "\e875";
}
.@{icons-prefix}md-cloud-done:before {
content: "\e676";
}
.@{icons-prefix}ios-arrow-dropup-circle:before {
content: "\e776";
}
.@{icons-prefix}ios-sunny:before {
content: "\e876";
}
.@{icons-prefix}md-cloud-download:before {
content: "\e677";
}
.@{icons-prefix}ios-arrow-forward:before {
content: "\e777";
}
.@{icons-prefix}ios-subway:before {
content: "\e877";
}
.@{icons-prefix}md-cloud-outline:before {
content: "\e678";
}
.@{icons-prefix}ios-arrow-round-back:before {
content: "\e778";
}
.@{icons-prefix}ios-swap:before {
content: "\e878";
}
.@{icons-prefix}md-cloudy:before {
content: "\e679";
}
.@{icons-prefix}ios-arrow-round-down:before {
content: "\e779";
}
.@{icons-prefix}ios-switch:before {
content: "\e879";
}
.@{icons-prefix}md-cloudy-night:before {
content: "\e67a";
}
.@{icons-prefix}ios-arrow-round-forward:before {
content: "\e77a";
}
.@{icons-prefix}ios-tablet-landscape:before {
content: "\e87a";
}
.@{icons-prefix}md-code-download:before {
content: "\e67b";
}
.@{icons-prefix}ios-arrow-round-up:before {
content: "\e77b";
}
.@{icons-prefix}ios-sync:before {
content: "\e87b";
}
.@{icons-prefix}md-code-working:before {
content: "\e67c";
}
.@{icons-prefix}ios-arrow-up:before {
content: "\e77c";
}
.@{icons-prefix}ios-tablet-portrait:before {
content: "\e87c";
}
.@{icons-prefix}md-color-fill:before {
content: "\e67d";
}
.@{icons-prefix}ios-at:before {
content: "\e77d";
}
.@{icons-prefix}ios-text:before {
content: "\e87d";
}
.@{icons-prefix}md-color-filter:before {
content: "\e67e";
}
.@{icons-prefix}ios-attach:before {
content: "\e77e";
}
.@{icons-prefix}ios-thermometer:before {
content: "\e87e";
}
.@{icons-prefix}md-cog:before {
content: "\e67f";
}
.@{icons-prefix}ios-backspace:before {
content: "\e77f";
}
.@{icons-prefix}ios-tennisball:before {
content: "\e87f";
}
.@{icons-prefix}md-compass:before {
content: "\e680";
}
.@{icons-prefix}ios-barcode:before {
content: "\e780";
}
.@{icons-prefix}ios-thumbs-down:before {
content: "\e880";
}
.@{icons-prefix}md-color-palette:before {
content: "\e681";
}
.@{icons-prefix}ios-basketball:before {
content: "\e781";
}
.@{icons-prefix}ios-thunderstorm:before {
content: "\e881";
}
.@{icons-prefix}md-color-wand:before {
content: "\e682";
}
.@{icons-prefix}ios-basket:before {
content: "\e782";
}
.@{icons-prefix}ios-thumbs-up:before {
content: "\e882";
}
.@{icons-prefix}md-cloud-upload:before {
content: "\e683";
}
.@{icons-prefix}ios-battery-charging:before {
content: "\e783";
}
.@{icons-prefix}ios-time:before {
content: "\e883";
}
.@{icons-prefix}md-contact:before {
content: "\e684";
}
.@{icons-prefix}ios-battery-dead:before {
content: "\e784";
}
.@{icons-prefix}ios-today:before {
content: "\e884";
}
.@{icons-prefix}md-contacts:before {
content: "\e685";
}
.@{icons-prefix}ios-baseball:before {
content: "\e785";
}
.@{icons-prefix}ios-timer:before {
content: "\e885";
}
.@{icons-prefix}md-code:before {
content: "\e686";
}
.@{icons-prefix}ios-beaker:before {
content: "\e786";
}
.@{icons-prefix}ios-train:before {
content: "\e886";
}
.@{icons-prefix}md-contrast:before {
content: "\e687";
}
.@{icons-prefix}ios-bed:before {
content: "\e787";
}
.@{icons-prefix}ios-trash:before {
content: "\e887";
}
.@{icons-prefix}md-construct:before {
content: "\e688";
}
.@{icons-prefix}ios-beer:before {
content: "\e788";
}
.@{icons-prefix}ios-trending-down:before {
content: "\e888";
}
.@{icons-prefix}md-copy:before {
content: "\e689";
}
.@{icons-prefix}ios-bluetooth:before {
content: "\e789";
}
.@{icons-prefix}ios-transgender:before {
content: "\e889";
}
.@{icons-prefix}md-contract:before {
content: "\e68a";
}
.@{icons-prefix}ios-bicycle:before {
content: "\e78a";
}
.@{icons-prefix}ios-trending-up:before {
content: "\e88a";
}
.@{icons-prefix}md-create:before {
content: "\e68b";
}
.@{icons-prefix}ios-boat:before {
content: "\e78b";
}
.@{icons-prefix}ios-trophy:before {
content: "\e88b";
}
.@{icons-prefix}md-crop:before {
content: "\e68c";
}
.@{icons-prefix}ios-battery-full:before {
content: "\e78c";
}
.@{icons-prefix}ios-tv:before {
content: "\e88c";
}
.@{icons-prefix}md-cube:before {
content: "\e68d";
}
.@{icons-prefix}ios-body:before {
content: "\e78d";
}
.@{icons-prefix}ios-undo:before {
content: "\e88d";
}
.@{icons-prefix}md-cut:before {
content: "\e68e";
}
.@{icons-prefix}ios-book:before {
content: "\e78e";
}
.@{icons-prefix}ios-umbrella:before {
content: "\e88e";
}
.@{icons-prefix}md-disc:before {
content: "\e68f";
}
.@{icons-prefix}ios-bookmark:before {
content: "\e78f";
}
.@{icons-prefix}ios-unlock:before {
content: "\e88f";
}
.@{icons-prefix}md-desktop:before {
content: "\e690";
}
.@{icons-prefix}ios-bonfire:before {
content: "\e790";
}
.@{icons-prefix}ios-videocam:before {
content: "\e890";
}
.@{icons-prefix}md-document:before {
content: "\e691";
}
.@{icons-prefix}ios-bowtie:before {
content: "\e791";
}
.@{icons-prefix}ios-volume-high:before {
content: "\e891";
}
.@{icons-prefix}md-download:before {
content: "\e692";
}
.@{icons-prefix}ios-bookmarks:before {
content: "\e792";
}
.@{icons-prefix}ios-volume-low:before {
content: "\e892";
}
.@{icons-prefix}md-done-all:before {
content: "\e693";
}
.@{icons-prefix}ios-briefcase:before {
content: "\e793";
}
.@{icons-prefix}ios-volume-mute:before {
content: "\e893";
}
.@{icons-prefix}md-easel:before {
content: "\e694";
}
.@{icons-prefix}ios-browsers:before {
content: "\e794";
}
.@{icons-prefix}ios-volume-off:before {
content: "\e894";
}
.@{icons-prefix}md-exit:before {
content: "\e695";
}
.@{icons-prefix}ios-brush:before {
content: "\e795";
}
.@{icons-prefix}ios-wallet:before {
content: "\e895";
}
.@{icons-prefix}md-expand:before {
content: "\e696";
}
.@{icons-prefix}ios-build:before {
content: "\e796";
}
.@{icons-prefix}ios-warning:before {
content: "\e896";
}
.@{icons-prefix}md-eye:before {
content: "\e697";
}
.@{icons-prefix}ios-bulb:before {
content: "\e797";
}
.@{icons-prefix}ios-walk:before {
content: "\e897";
}
.@{icons-prefix}md-eye-off:before {
content: "\e698";
}
.@{icons-prefix}ios-bug:before {
content: "\e798";
}
.@{icons-prefix}ios-water:before {
content: "\e898";
}
.@{icons-prefix}md-fastforward:before {
content: "\e699";
}
.@{icons-prefix}ios-bus:before {
content: "\e799";
}
.@{icons-prefix}ios-wifi:before {
content: "\e899";
}
.@{icons-prefix}md-female:before {
content: "\e69a";
}
.@{icons-prefix}ios-cafe:before {
content: "\e79a";
}
.@{icons-prefix}ios-watch:before {
content: "\e89a";
}
.@{icons-prefix}md-fitness:before {
content: "\e69b";
}
.@{icons-prefix}ios-business:before {
content: "\e79b";
}
.@{icons-prefix}ios-wine:before {
content: "\e89b";
}
.@{icons-prefix}md-film:before {
content: "\e69c";
}
.@{icons-prefix}ios-calculator:before {
content: "\e79c";
}
.@{icons-prefix}ios-woman:before {
content: "\e89c";
}
.@{icons-prefix}md-flag:before {
content: "\e69d";
}
.@{icons-prefix}ios-calendar:before {
content: "\e79d";
}
.@{icons-prefix}logo-android:before {
content: "\e89d";
}
.@{icons-prefix}md-flash:before {
content: "\e69e";
}
.@{icons-prefix}ios-call:before {
content: "\e79e";
}
.@{icons-prefix}logo-bitbucket:before {
content: "\e89e";
}
.@{icons-prefix}md-flashlight:before {
content: "\e69f";
}
.@{icons-prefix}ios-camera:before {
content: "\e79f";
}
.@{icons-prefix}logo-apple:before {
content: "\e89f";
}
.@{icons-prefix}md-flask:before {
content: "\e6a0";
}
.@{icons-prefix}ios-car:before {
content: "\e7a0";
}
.@{icons-prefix}logo-bitcoin:before {
content: "\e8a0";
}
.@{icons-prefix}md-flash-off:before {
content: "\e6a1";
}
.@{icons-prefix}ios-card:before {
content: "\e7a1";
}
.@{icons-prefix}logo-buffer:before {
content: "\e8a1";
}
.@{icons-prefix}md-egg:before {
content: "\e6a2";
}
.@{icons-prefix}ios-cart:before {
content: "\e7a2";
}
.@{icons-prefix}logo-chrome:before {
content: "\e8a2";
}
.@{icons-prefix}md-folder:before {
content: "\e6a3";
}
.@{icons-prefix}ios-cellular:before {
content: "\e7a3";
}
.@{icons-prefix}logo-css:before {
content: "\e8a3";
}
.@{icons-prefix}md-finger-print:before {
content: "\e6a4";
}
.@{icons-prefix}ios-cash:before {
content: "\e7a4";
}
.@{icons-prefix}logo-closed-captioning:before {
content: "\e8a4";
}
.@{icons-prefix}md-filing:before {
content: "\e6a5";
}
.@{icons-prefix}ios-chatboxes:before {
content: "\e7a5";
}
.@{icons-prefix}logo-designernews:before {
content: "\e8a5";
}
.@{icons-prefix}md-flower:before {
content: "\e6a6";
}
.@{icons-prefix}ios-checkbox:before {
content: "\e7a6";
}
.@{icons-prefix}logo-angular:before {
content: "\e8a6";
}
.@{icons-prefix}md-flame:before {
content: "\e6a7";
}
.@{icons-prefix}ios-chatbubbles:before {
content: "\e7a7";
}
.@{icons-prefix}logo-codepen:before {
content: "\e8a7";
}
.@{icons-prefix}md-folder-open:before {
content: "\e6a8";
}
.@{icons-prefix}ios-checkmark:before {
content: "\e7a8";
}
.@{icons-prefix}logo-dribbble:before {
content: "\e8a8";
}
.@{icons-prefix}md-gift:before {
content: "\e6a9";
}
.@{icons-prefix}ios-checkmark-circle:before {
content: "\e7a9";
}
.@{icons-prefix}logo-dropbox:before {
content: "\e8a9";
}
.@{icons-prefix}md-funnel:before {
content: "\e6aa";
}
.@{icons-prefix}ios-checkbox-outline:before {
content: "\e7aa";
}
.@{icons-prefix}logo-facebook:before {
content: "\e8aa";
}
.@{icons-prefix}md-football:before {
content: "\e6ab";
}
.@{icons-prefix}ios-checkmark-circle-outline:before {
content: "\e7ab";
}
.@{icons-prefix}logo-flickr:before {
content: "\e8ab";
}
.@{icons-prefix}md-git-commit:before {
content: "\e6ac";
}
.@{icons-prefix}ios-clipboard:before {
content: "\e7ac";
}
.@{icons-prefix}logo-euro:before {
content: "\e8ac";
}
.@{icons-prefix}md-git-branch:before {
content: "\e6ad";
}
.@{icons-prefix}ios-clock:before {
content: "\e7ad";
}
.@{icons-prefix}logo-foursquare:before {
content: "\e8ad";
}
.@{icons-prefix}md-git-compare:before {
content: "\e6ae";
}
.@{icons-prefix}ios-close:before {
content: "\e7ae";
}
.@{icons-prefix}logo-freebsd-devil:before {
content: "\e8ae";
}
.@{icons-prefix}md-git-merge:before {
content: "\e6af";
}
.@{icons-prefix}ios-close-circle-outline:before {
content: "\e7af";
}
.@{icons-prefix}logo-game-controller-a:before {
content: "\e8af";
}
.@{icons-prefix}md-git-pull-request:before {
content: "\e6b0";
}
.@{icons-prefix}ios-close-circle:before {
content: "\e7b0";
}
.@{icons-prefix}logo-github:before {
content: "\e8b0";
}
.@{icons-prefix}md-git-network:before {
content: "\e6b1";
}
.@{icons-prefix}ios-cloud:before {
content: "\e7b1";
}
.@{icons-prefix}logo-google:before {
content: "\e8b1";
}
.@{icons-prefix}md-glasses:before {
content: "\e6b2";
}
.@{icons-prefix}ios-cloud-circle:before {
content: "\e7b2";
}
.@{icons-prefix}logo-game-controller-b:before {
content: "\e8b2";
}
.@{icons-prefix}md-grid:before {
content: "\e6b3";
}
.@{icons-prefix}ios-cloud-done:before {
content: "\e7b3";
}
.@{icons-prefix}logo-googleplus:before {
content: "\e8b3";
}
.@{icons-prefix}md-happy:before {
content: "\e6b4";
}
.@{icons-prefix}ios-cloud-download:before {
content: "\e7b4";
}
.@{icons-prefix}md-hammer:before {
content: "\e6b5";
}
.@{icons-prefix}ios-cloud-upload:before {
content: "\e7b5";
}
.@{icons-prefix}md-headset:before {
content: "\e6b6";
}
.@{icons-prefix}ios-cloud-outline:before {
content: "\e7b6";
}
.@{icons-prefix}md-hand:before {
content: "\e6b7";
}
.@{icons-prefix}ios-cloudy:before {
content: "\e7b7";
}
.@{icons-prefix}md-heart-dislike:before {
content: "\e6b8";
}
.@{icons-prefix}ios-code:before {
content: "\e7b8";
}
.@{icons-prefix}md-heart:before {
content: "\e6b9";
}
.@{icons-prefix}ios-cloudy-night:before {
content: "\e7b9";
}
.@{icons-prefix}md-heart-empty:before {
content: "\e6ba";
}
.@{icons-prefix}ios-code-download:before {
content: "\e7ba";
}
.@{icons-prefix}md-heart-half:before {
content: "\e6bb";
}
.@{icons-prefix}ios-code-working:before {
content: "\e7bb";
}
.@{icons-prefix}md-help:before {
content: "\e6bc";
}
.@{icons-prefix}ios-color-fill:before {
content: "\e7bc";
}
.@{icons-prefix}md-help-buoy:before {
content: "\e6bd";
}
.@{icons-prefix}ios-cog:before {
content: "\e7bd";
}
.@{icons-prefix}md-help-circle-outline:before {
content: "\e6be";
}
.@{icons-prefix}ios-color-palette:before {
content: "\e7be";
}
.@{icons-prefix}md-home:before {
content: "\e6bf";
}
.@{icons-prefix}ios-color-filter:before {
content: "\e7bf";
}
.@{icons-prefix}md-hourglass:before {
content: "\e6c0";
}
.@{icons-prefix}ios-compass:before {
content: "\e7c0";
}
.@{icons-prefix}md-ice-cream:before {
content: "\e6c1";
}
.@{icons-prefix}ios-color-wand:before {
content: "\e7c1";
}
.@{icons-prefix}md-globe:before {
content: "\e6c2";
}
.@{icons-prefix}ios-construct:before {
content: "\e7c2";
}
.@{icons-prefix}md-image:before {
content: "\e6c3";
}
.@{icons-prefix}ios-contact:before {
content: "\e7c3";
}
.@{icons-prefix}md-help-circle:before {
content: "\e6c4";
}
.@{icons-prefix}ios-contract:before {
content: "\e7c4";
}
.@{icons-prefix}md-infinite:before {
content: "\e6c5";
}
.@{icons-prefix}ios-contacts:before {
content: "\e7c5";
}
.@{icons-prefix}md-information:before {
content: "\e6c6";
}
.@{icons-prefix}ios-create:before {
content: "\e7c6";
}
.@{icons-prefix}md-images:before {
content: "\e6c7";
}
.@{icons-prefix}ios-crop:before {
content: "\e7c7";
}
.@{icons-prefix}md-information-circle:before {
content: "\e6c8";
}
.@{icons-prefix}ios-contrast:before {
content: "\e7c8";
}
.@{icons-prefix}md-information-circle-outline:before {
content: "\e6c9";
}
.@{icons-prefix}ios-copy:before {
content: "\e7c9";
}
.@{icons-prefix}md-jet:before {
content: "\e6ca";
}
.@{icons-prefix}ios-cut:before {
content: "\e7ca";
}
.@{icons-prefix}md-journal:before {
content: "\e6cb";
}
.@{icons-prefix}ios-cube:before {
content: "\e7cb";
}
.@{icons-prefix}md-key:before {
content: "\e6cc";
}
.@{icons-prefix}ios-desktop:before {
content: "\e7cc";
}
.@{icons-prefix}md-keypad:before {
content: "\e6cd";
}
.@{icons-prefix}ios-document:before {
content: "\e7cd";
}
.@{icons-prefix}md-laptop:before {
content: "\e6ce";
}
.@{icons-prefix}ios-disc:before {
content: "\e7ce";
}
.@{icons-prefix}md-leaf:before {
content: "\e6cf";
}
.@{icons-prefix}ios-download:before {
content: "\e7cf";
}
.@{icons-prefix}md-link:before {
content: "\e6d0";
}
.@{icons-prefix}ios-done-all:before {
content: "\e7d0";
}
.@{icons-prefix}md-list:before {
content: "\e6d1";
}
.@{icons-prefix}ios-easel:before {
content: "\e7d1";
}
.@{icons-prefix}md-list-box:before {
content: "\e6d2";
}
.@{icons-prefix}ios-egg:before {
content: "\e7d2";
}
.@{icons-prefix}md-locate:before {
content: "\e6d3";
}
.@{icons-prefix}ios-exit:before {
content: "\e7d3";
}
.@{icons-prefix}md-lock:before {
content: "\e6d4";
}
.@{icons-prefix}ios-expand:before {
content: "\e7d4";
}
.@{icons-prefix}md-mail:before {
content: "\e6d5";
}
.@{icons-prefix}ios-eye:before {
content: "\e7d5";
}
.@{icons-prefix}md-magnet:before {
content: "\e6d6";
}
.@{icons-prefix}ios-fastforward:before {
content: "\e7d6";
}
.@{icons-prefix}md-log-out:before {
content: "\e6d7";
}
.@{icons-prefix}ios-eye-off:before {
content: "\e7d7";
}
.@{icons-prefix}md-male:before {
content: "\e6d8";
}
.@{icons-prefix}ios-filing:before {
content: "\e7d8";
}
.@{icons-prefix}md-mail-unread:before {
content: "\e6d9";
}
.@{icons-prefix}ios-female:before {
content: "\e7d9";
}
.@{icons-prefix}md-man:before {
content: "\e6da";
}
.@{icons-prefix}ios-film:before {
content: "\e7da";
}
.@{icons-prefix}md-log-in:before {
content: "\e6db";
}
.@{icons-prefix}ios-flag:before {
content: "\e7db";
}
.@{icons-prefix}md-mail-open:before {
content: "\e6dc";
}
.@{icons-prefix}ios-fitness:before {
content: "\e7dc";
}
.@{icons-prefix}md-map:before {
content: "\e6dd";
}
.@{icons-prefix}ios-flame:before {
content: "\e7dd";
}
.@{icons-prefix}md-medal:before {
content: "\e6de";
}
.@{icons-prefix}ios-flash:before {
content: "\e7de";
}
.@{icons-prefix}md-medical:before {
content: "\e6df";
}
.@{icons-prefix}ios-finger-print:before {
content: "\e7df";
}
.@{icons-prefix}md-medkit:before {
content: "\e6e0";
}
.@{icons-prefix}ios-flashlight:before {
content: "\e7e0";
}
.@{icons-prefix}md-megaphone:before {
content: "\e6e1";
}
.@{icons-prefix}ios-flash-off:before {
content: "\e7e1";
}
.@{icons-prefix}md-menu:before {
content: "\e6e2";
}
.@{icons-prefix}ios-flask:before {
content: "\e7e2";
}
.@{icons-prefix}md-mic:before {
content: "\e6e3";
}
.@{icons-prefix}ios-flower:before {
content: "\e7e3";
}
.@{icons-prefix}md-mic-off:before {
content: "\e6e4";
}
.@{icons-prefix}ios-folder:before {
content: "\e7e4";
}
.@{icons-prefix}md-microphone:before {
content: "\e6e5";
}
.@{icons-prefix}ios-folder-open:before {
content: "\e7e5";
}
.@{icons-prefix}md-moon:before {
content: "\e6e6";
}
.@{icons-prefix}ios-football:before {
content: "\e7e6";
}
.@{icons-prefix}md-more:before {
content: "\e6e7";
}
.@{icons-prefix}ios-git-branch:before {
content: "\e7e7";
}
.@{icons-prefix}md-move:before {
content: "\e6e8";
}
.@{icons-prefix}ios-gift:before {
content: "\e7e8";
}
.@{icons-prefix}md-musical-notes:before {
content: "\e6e9";
}
.@{icons-prefix}ios-git-commit:before {
content: "\e7e9";
}
.@{icons-prefix}md-musical-note:before {
content: "\e6ea";
}
.@{icons-prefix}ios-git-compare:before {
content: "\e7ea";
}
.@{icons-prefix}md-navigate:before {
content: "\e6eb";
}
.@{icons-prefix}ios-git-network:before {
content: "\e7eb";
}
.@{icons-prefix}md-notifications:before {
content: "\e6ec";
}
.@{icons-prefix}ios-glasses:before {
content: "\e7ec";
}
.@{icons-prefix}md-notifications-off:before {
content: "\e6ed";
}
.@{icons-prefix}ios-git-pull-request:before {
content: "\e7ed";
}
.@{icons-prefix}md-nuclear:before {
content: "\e6ee";
}
.@{icons-prefix}ios-hammer:before {
content: "\e7ee";
}
.@{icons-prefix}md-nutrition:before {
content: "\e6ef";
}
.@{icons-prefix}ios-grid:before {
content: "\e7ef";
}
.@{icons-prefix}md-notifications-outline:before {
content: "\e6f0";
}
.@{icons-prefix}ios-git-merge:before {
content: "\e7f0";
}
.@{icons-prefix}md-options:before {
content: "\e6f1";
}
.@{icons-prefix}ios-funnel:before {
content: "\e7f1";
}
.@{icons-prefix}md-outlet:before {
content: "\e6f2";
}
.@{icons-prefix}ios-hand:before {
content: "\e7f2";
}
.@{icons-prefix}md-open:before {
content: "\e6f3";
}
.@{icons-prefix}ios-happy:before {
content: "\e7f3";
}
.@{icons-prefix}md-paper:before {
content: "\e6f4";
}
.@{icons-prefix}ios-headset:before {
content: "\e7f4";
}
.@{icons-prefix}md-paper-plane:before {
content: "\e6f5";
}
.@{icons-prefix}ios-heart:before {
content: "\e7f5";
}
.@{icons-prefix}md-partly-sunny:before {
content: "\e6f6";
}
.@{icons-prefix}ios-globe:before {
content: "\e7f6";
}
.@{icons-prefix}md-pause:before {
content: "\e6f7";
}
.@{icons-prefix}ios-heart-empty:before {
content: "\e7f7";
}
.@{icons-prefix}md-people:before {
content: "\e6f8";
}
.@{icons-prefix}ios-heart-dislike:before {
content: "\e7f8";
}
.@{icons-prefix}md-paw:before {
content: "\e6f9";
}
.@{icons-prefix}ios-heart-half:before {
content: "\e7f9";
}
.@{icons-prefix}md-pie:before {
content: "\e6fa";
}
.@{icons-prefix}ios-help:before {
content: "\e7fa";
}
.@{icons-prefix}md-pizza:before {
content: "\e6fb";
}
.@{icons-prefix}ios-help-buoy:before {
content: "\e7fb";
}
.@{icons-prefix}md-play-circle:before {
content: "\e6fc";
}
.@{icons-prefix}ios-help-circle:before {
content: "\e7fc";
}
.@{icons-prefix}md-podium:before {
content: "\e6fd";
}
.@{icons-prefix}ios-home:before {
content: "\e7fd";
}
.@{icons-prefix}md-phone-landscape:before {
content: "\e6fe";
}
.@{icons-prefix}ios-hourglass:before {
content: "\e7fe";
}
.@{icons-prefix}md-play:before {
content: "\e6ff";
}
.@{icons-prefix}ios-image:before {
content: "\e7ff";
}
.@{icons-prefix}md-pin:before {
content: "\e700";
}
.@{icons-prefix}ios-information:before {
content: "\e800";
}
.@{icons-prefix}logo-hackernews:before {
content: "\e601";
}
.@{icons-prefix}md-phone-portrait:before {
content: "\e701";
}
.@{icons-prefix}ios-images:before {
content: "\e801";
}
.@{icons-prefix}logo-model-s:before {
content: "\e602";
}
.@{icons-prefix}md-person-add:before {
content: "\e702";
}
.@{icons-prefix}ios-ice-cream:before {
content: "\e802";
}
.@{icons-prefix}logo-pinterest:before {
content: "\e603";
}
.@{icons-prefix}md-photos:before {
content: "\e703";
}
.@{icons-prefix}ios-information-circle:before {
content: "\e803";
}
.@{icons-prefix}logo-linkedin:before {
content: "\e604";
}
.@{icons-prefix}md-planet:before {
content: "\e704";
}
.@{icons-prefix}ios-jet:before {
content: "\e804";
}
.@{icons-prefix}logo-rss:before {
content: "\e605";
}
.@{icons-prefix}md-person:before {
content: "\e705";
}
.@{icons-prefix}ios-information-circle-outline:before {
content: "\e805";
}
.@{icons-prefix}logo-npm:before {
content: "\e606";
}
.@{icons-prefix}md-pint:before {
content: "\e706";
}
.@{icons-prefix}ios-journal:before {
content: "\e806";
}
.@{icons-prefix}logo-no-smoking:before {
content: "\e607";
}
.@{icons-prefix}md-pricetag:before {
content: "\e707";
}
.@{icons-prefix}ios-key:before {
content: "\e807";
}
.@{icons-prefix}logo-tumblr:before {
content: "\e608";
}
.@{icons-prefix}md-refresh:before {
content: "\e708";
}
.@{icons-prefix}ios-keypad:before {
content: "\e808";
}
.@{icons-prefix}logo-markdown:before {
content: "\e609";
}
.@{icons-prefix}md-pulse:before {
content: "\e709";
}
.@{icons-prefix}ios-help-circle-outline:before {
content: "\e809";
}
.@{icons-prefix}logo-steam:before {
content: "\e60a";
}
.@{icons-prefix}md-radio:before {
content: "\e70a";
}
.@{icons-prefix}ios-laptop:before {
content: "\e80a";
}
.@{icons-prefix}logo-playstation:before {
content: "\e60b";
}
.@{icons-prefix}md-rainy:before {
content: "\e70b";
}
.@{icons-prefix}ios-infinite:before {
content: "\e80b";
}
.@{icons-prefix}logo-octocat:before {
content: "\e60c";
}
.@{icons-prefix}md-print:before {
content: "\e70c";
}
.@{icons-prefix}ios-leaf:before {
content: "\e80c";
}
.@{icons-prefix}logo-python:before {
content: "\e60d";
}
.@{icons-prefix}md-quote:before {
content: "\e70d";
}
.@{icons-prefix}ios-link:before {
content: "\e80d";
}
.@{icons-prefix}logo-javascript:before {
content: "\e60e";
}
.@{icons-prefix}md-qr-scanner:before {
content: "\e70e";
}
.@{icons-prefix}ios-list:before {
content: "\e80e";
}
.@{icons-prefix}logo-tux:before {
content: "\e60f";
}
.@{icons-prefix}md-pricetags:before {
content: "\e70f";
}
.@{icons-prefix}ios-list-box:before {
content: "\e80f";
}
.@{icons-prefix}logo-twitter:before {
content: "\e610";
}
.@{icons-prefix}md-recording:before {
content: "\e710";
}
.@{icons-prefix}ios-locate:before {
content: "\e810";
}
.@{icons-prefix}logo-vk:before {
content: "\e611";
}
.@{icons-prefix}md-power:before {
content: "\e711";
}
.@{icons-prefix}ios-lock:before {
content: "\e811";
}
.@{icons-prefix}logo-sass:before {
content: "\e612";
}
.@{icons-prefix}md-remove-circle:before {
content: "\e712";
}
.@{icons-prefix}ios-log-in:before {
content: "\e812";
}
.@{icons-prefix}logo-yen:before {
content: "\e613";
}
.@{icons-prefix}md-remove:before {
content: "\e713";
}
.@{icons-prefix}ios-log-out:before {
content: "\e813";
}
.@{icons-prefix}logo-slack:before {
content: "\e614";
}
.@{icons-prefix}md-redo:before {
content: "\e714";
}
.@{icons-prefix}ios-magnet:before {
content: "\e814";
}
.@{icons-prefix}logo-snapchat:before {
content: "\e615";
}
.@{icons-prefix}md-reorder:before {
content: "\e715";
}
.@{icons-prefix}ios-mail-open:before {
content: "\e815";
}
.@{icons-prefix}logo-vimeo:before {
content: "\e616";
}
.@{icons-prefix}md-radio-button-on:before {
content: "\e716";
}
.@{icons-prefix}ios-mail:before {
content: "\e816";
}
.@{icons-prefix}md-add-circle:before {
content: "\e617";
}
.@{icons-prefix}md-refresh-circle:before {
content: "\e717";
}
.@{icons-prefix}ios-mail-unread:before {
content: "\e817";
}
.@{icons-prefix}md-add:before {
content: "\e618";
}
.@{icons-prefix}md-repeat:before {
content: "\e718";
}
.@{icons-prefix}ios-male:before {
content: "\e818";
}
.@{icons-prefix}logo-usd:before {
content: "\e619";
}
.@{icons-prefix}md-return-left:before {
content: "\e719";
}
.@{icons-prefix}ios-man:before {
content: "\e819";
}
.@{icons-prefix}md-alarm:before {
content: "\e61a";
}
.@{icons-prefix}md-remove-circle-outline:before {
content: "\e71a";
}
.@{icons-prefix}ios-map:before {
content: "\e81a";
}
.@{icons-prefix}md-airplane:before {
content: "\e61b";
}
.@{icons-prefix}md-return-right:before {
content: "\e71b";
}
.@{icons-prefix}ios-medical:before {
content: "\e81b";
}
.@{icons-prefix}logo-yahoo:before {
content: "\e61c";
}
.@{icons-prefix}md-restaurant:before {
content: "\e71c";
}
.@{icons-prefix}ios-medkit:before {
content: "\e81c";
}
.@{icons-prefix}logo-whatsapp:before {
content: "\e61d";
}
.@{icons-prefix}md-rewind:before {
content: "\e71d";
}
.@{icons-prefix}ios-menu:before {
content: "\e81d";
}
.@{icons-prefix}logo-xing:before {
content: "\e61e";
}
.@{icons-prefix}md-reverse-camera:before {
content: "\e71e";
}
.@{icons-prefix}ios-medal:before {
content: "\e81e";
}
.@{icons-prefix}logo-windows:before {
content: "\e61f";
}
.@{icons-prefix}md-ribbon:before {
content: "\e71f";
}
.@{icons-prefix}ios-megaphone:before {
content: "\e81f";
}
.@{icons-prefix}md-apps:before {
content: "\e620";
}
.@{icons-prefix}md-rocket:before {
content: "\e720";
}
.@{icons-prefix}ios-mic:before {
content: "\e820";
}
.@{icons-prefix}logo-nodejs:before {
content: "\e621";
}
.@{icons-prefix}md-rose:before {
content: "\e721";
}
.@{icons-prefix}ios-mic-off:before {
content: "\e821";
}
.@{icons-prefix}md-american-football:before {
content: "\e622";
}
.@{icons-prefix}md-school:before {
content: "\e722";
}
.@{icons-prefix}ios-microphone:before {
content: "\e822";
}
.@{icons-prefix}logo-skype:before {
content: "\e623";
}
.@{icons-prefix}md-save:before {
content: "\e723";
}
.@{icons-prefix}ios-moon:before {
content: "\e823";
}
.@{icons-prefix}logo-wordpress:before {
content: "\e624";
}
.@{icons-prefix}md-radio-button-off:before {
content: "\e724";
}
.@{icons-prefix}ios-more:before {
content: "\e824";
}
.@{icons-prefix}md-aperture:before {
content: "\e625";
}
.@{icons-prefix}md-sad:before {
content: "\e725";
}
.@{icons-prefix}ios-move:before {
content: "\e825";
}
.@{icons-prefix}md-arrow-back:before {
content: "\e626";
}
.@{icons-prefix}md-send:before {
content: "\e726";
}
.@{icons-prefix}ios-musical-note:before {
content: "\e826";
}
.@{icons-prefix}logo-reddit:before {
content: "\e627";
}
.@{icons-prefix}md-resize:before {
content: "\e727";
}
.@{icons-prefix}ios-navigate:before {
content: "\e827";
}
.@{icons-prefix}logo-twitch:before {
content: "\e628";
}
.@{icons-prefix}md-settings:before {
content: "\e728";
}
.@{icons-prefix}ios-musical-notes:before {
content: "\e828";
}
.@{icons-prefix}md-alert:before {
content: "\e629";
}
.@{icons-prefix}md-shirt:before {
content: "\e729";
}
.@{icons-prefix}ios-notifications:before {
content: "\e829";
}
.@{icons-prefix}md-archive:before {
content: "\e62a";
}
.@{icons-prefix}md-share-alt:before {
content: "\e72a";
}
.@{icons-prefix}ios-notifications-off:before {
content: "\e82a";
}
.@{icons-prefix}md-appstore:before {
content: "\e62b";
}
.@{icons-prefix}md-skip-backward:before {
content: "\e72b";
}
.@{icons-prefix}ios-notifications-outline:before {
content: "\e82b";
}
.@{icons-prefix}logo-youtube:before {
content: "\e62c";
}
.@{icons-prefix}md-shuffle:before {
content: "\e72c";
}
.@{icons-prefix}ios-nuclear:before {
content: "\e82c";
}
.@{icons-prefix}md-arrow-dropdown:before {
content: "\e62d";
}
.@{icons-prefix}md-skip-forward:before {
content: "\e72d";
}
.@{icons-prefix}ios-open:before {
content: "\e82d";
}
.@{icons-prefix}md-arrow-dropdown-circle:before {
content: "\e62e";
}
.@{icons-prefix}md-share:before {
content: "\e72e";
}
.@{icons-prefix}ios-nutrition:before {
content: "\e82e";
}
.@{icons-prefix}logo-xbox:before {
content: "\e62f";
}
.@{icons-prefix}md-square:before {
content: "\e72f";
}
.@{icons-prefix}ios-options:before {
content: "\e82f";
}
.@{icons-prefix}md-add-circle-outline:before {
content: "\e630";
}
.@{icons-prefix}md-square-outline:before {
content: "\e730";
}
.@{icons-prefix}ios-outlet:before {
content: "\e830";
}
.@{icons-prefix}md-arrow-dropleft:before {
content: "\e631";
}
.@{icons-prefix}md-speedometer:before {
content: "\e731";
}
.@{icons-prefix}ios-paper:before {
content: "\e831";
}
.@{icons-prefix}md-analytics:before {
content: "\e632";
}
.@{icons-prefix}md-search:before {
content: "\e732";
}
.@{icons-prefix}ios-pause:before {
content: "\e832";
}
.@{icons-prefix}md-arrow-dropright:before {
content: "\e633";
}
.@{icons-prefix}md-star:before {
content: "\e733";
}
.@{icons-prefix}ios-paw:before {
content: "\e833";
}
.@{icons-prefix}md-albums:before {
content: "\e634";
}
.@{icons-prefix}md-snow:before {
content: "\e734";
}
.@{icons-prefix}ios-paper-plane:before {
content: "\e834";
}
.@{icons-prefix}md-arrow-dropleft-circle:before {
content: "\e635";
}
.@{icons-prefix}md-star-half:before {
content: "\e735";
}
.@{icons-prefix}ios-person:before {
content: "\e835";
}
.@{icons-prefix}md-arrow-down:before {
content: "\e636";
}
.@{icons-prefix}md-stopwatch:before {
content: "\e736";
}
.@{icons-prefix}ios-phone-portrait:before {
content: "\e836";
}
.@{icons-prefix}md-arrow-dropright-circle:before {
content: "\e637";
}
.@{icons-prefix}md-star-outline:before {
content: "\e737";
}
.@{icons-prefix}ios-people:before {
content: "\e837";
}
================================================
FILE: src/styles/common/iconfont/icons-variables.less
================================================
@icons-font-path: './fonts';
@icons-font-family: 'Iconfont';
@icons-prefix: rab-icon-;
================================================
FILE: src/styles/common/iconfont/icons.less
================================================
@import "./icons-variables.less";
@import "./icons-font.less";
@import "./icons-icons.less";
================================================
FILE: src/styles/common/index.less
================================================
@import 'base';
@import 'iconfont/icons';
@import 'article';
================================================
FILE: src/styles/common/normalize.less
================================================
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
resize: vertical;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
================================================
FILE: src/styles/components/affix.less
================================================
@import '../custom.less';
@affix-tag-name: r-affix;
@affix-prefix-cls: ~'@{css-prefix}affix';
@{affix-tag-name} {
display: block;
}
.@{affix-prefix-cls} {
position: fixed;
z-index: @zindex-affix;
}
================================================
FILE: src/styles/components/alert.less
================================================
@import '../custom.less';
@import '../mixins/content.less';
@alert-tag-name: r-alert;
@alert-prefix-cls: ~'@{css-prefix}alert';
@icon-prefix-cls: ~'@{css-prefix}icon';
@{alert-tag-name} {
color: @text-color;
font-size: @font-size-base;
line-height: @line-height-base;
position: relative;
display: block;
padding: 8px 15px;
margin-bottom: 10px;
word-wrap: break-word;
border-radius: @border-radius-base;
border: @border-width-base @border-style-base tint(@primary-color, 65%);
background-color: tint(@primary-color, 92%);
.@{alert-prefix-cls}-icon {
color: @primary-color;
}
&[type='success'] {
border: @border-width-base @border-style-base tint(@success-color, 65%);
background-color: #f6ffed;
.@{alert-prefix-cls}-icon {
color: @success-color;
}
}
&[type='info'] {
border: @border-width-base @border-style-base tint(@primary-color, 65%);
background-color: tint(@primary-color, 92%);
.@{alert-prefix-cls}-icon {
color: @primary-color;
}
}
&[type='warning'] {
border: @border-width-base @border-style-base tint(@warning-color, 65%);
background-color: #fffbe6;
.@{alert-prefix-cls}-icon {
color: @warning-color;
}
}
&[type='error'] {
border: @border-width-base @border-style-base tint(@error-color, 65%);
background-color: #fff2f0;
.@{alert-prefix-cls}-icon {
color: @error-color;
}
}
}
.@{alert-prefix-cls} {
&-with-icon {
padding: 8px 48px 8px 35px;
}
&-icon {
font-size: @font-size-large;
top: 6px;
left: 12px;
position: absolute;
}
&-title {
color: @text-color;
}
&-desc {
font-size: @font-size-base;
color: @text-color;
line-height: 22px;
display: none;
p {
margin-bottom: 0;
}
}
&-close {
.content-close();
top: 10px;
}
&-with-desc&-with-icon {
padding: 16px 16px 16px 69px;
}
&-with-desc {
padding: 16px;
position: relative;
border-radius: @border-radius-base;
margin-bottom: 10px;
color: @text-color;
line-height: @line-height-base;
.@{alert-prefix-cls} {
&-desc {
display: block;
}
&-title {
font-size: @font-size-large;
color: @title-color;
display: block;
margin-bottom: 4px;
}
&-icon {
top: 50%;
left: 22px;
transform: translateY(-50%);
font-size: 32px;
}
}
}
&-with-banner {
border: 0 !important;
border-radius: 0 !important;
}
}
================================================
FILE: src/styles/components/avatar.less
================================================
@import '../custom.less';
@avatar-tag-name: r-avatar;
@avatar-prefix-cls: ~'@{css-prefix}avatar';
@{avatar-tag-name} {
display: inline-block;
text-align: center;
background: @avatar-bg;
color: @avatar-color;
white-space: nowrap;
position: relative;
overflow: hidden;
vertical-align: middle;
.rab-icon {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
&[size='large'] {
.avatar-size(@avatar-size-lg, @avatar-font-size-lg);
}
.avatar-size(@avatar-size-base, @avatar-font-size-base);
&[size='small'] {
.avatar-size(@avatar-size-sm, @avatar-font-size-sm);
}
&[shape='circle'] {
border-radius: 50%;
}
&[shape='square'] {
border-radius: @avatar-border-radius;
}
& > img {
width: 100%;
height: 100%;
}
}
.@{avatar-prefix-cls} {
&-image {
background: transparent;
}
&-string {
position: absolute;
left: 50%;
transform-origin: 0 center;
}
}
.avatar-size(@size, @font-size) {
width: @size;
height: @size;
line-height: @size;
border-radius: 50%;
&.@{avatar-prefix-cls}-icon {
font-size: @font-size;
}
}
================================================
FILE: src/styles/components/back-top.less
================================================
@import '../custom.less';
@backtop-tag-name: r-back-top;
@backtop-prefix-cls: ~'@{css-prefix}back-top';
@{backtop-tag-name} {
z-index: @zindex-back-top;
position: fixed;
cursor: pointer;
display: none;
.rab-icon {
position: relative;
top: -3px;
color: @white;
font-size: 24px;
padding: 20px @padding-sm;
}
}
.@{backtop-prefix-cls} {
&-inner {
background-color: rgba(0, 0, 0, 0.5);
border-radius: @border-radius-base;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
transition: all @transition-time @ease-in-out;
&:hover {
background-color: rgba(0, 0, 0, 0.7);
}
}
}
================================================
FILE: src/styles/components/badge.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@import '../color/colors.less';
@badge-tag-name: r-badge;
@badge-prefix-cls: ~'@{css-prefix}badge';
@{badge-tag-name} {
position: relative;
display: inline-block;
&[type='primary'] {
.@{badge-prefix-cls}-count {
background: @primary-color;
}
}
&[type='success'] {
.@{badge-prefix-cls}-count {
background: @success-color;
}
}
&[type='error'] {
.@{badge-prefix-cls}-count {
background: @error-color;
}
}
&[type='warning'] {
.@{badge-prefix-cls}-count {
background: @warning-color;
}
}
&[type='info'] {
.@{badge-prefix-cls}-count {
background: @info-color;
}
}
&[type='normal'] {
.@{badge-prefix-cls}-count {
background: @normal-color;
color: @subsidiary-color;
}
}
}
.@{badge-prefix-cls} {
&-count {
font-family: 'Monospaced Number';
line-height: 1;
vertical-align: middle;
position: absolute;
transform: translateX(50%);
top: -10px;
right: 0;
height: 20px;
border-radius: 10px;
min-width: 20px;
background: @error-color;
border: @border-width-base @border-style-base transparent;
color: @white;
line-height: 17px;
text-align: center;
padding: 0 6px;
font-size: @font-size-small;
white-space: nowrap;
transform-origin: -10% center;
z-index: 10;
box-shadow: 0 0 0 1px @white;
&-custom {
background: transparent;
color: inherit;
border-color: transparent;
box-shadow: none;
}
a,
a:hover {
color: @white;
}
&-alone {
top: auto;
display: block;
position: relative;
transform: translateX(0);
}
}
&-dot {
position: absolute;
transform: translateX(-50%);
transform-origin: 0 center;
top: -4px;
right: -8px;
.square(8px);
border-radius: 100%;
background: @error-color;
z-index: 10;
box-shadow: 0 0 0 1px @white;
}
&-status {
line-height: inherit;
vertical-align: baseline;
&-dot {
.square(6px);
display: inline-block;
border-radius: 50%;
vertical-align: middle;
position: relative;
top: -1px;
}
&-success {
background-color: @success-color;
}
&-processing {
background-color: @processing-color;
position: relative;
&:after {
position: absolute;
top: 0;
left: 0;
.square(100%);
border-radius: 50%;
border: @border-width-base @border-style-base @processing-color;
content: '';
animation: rabStatusProcessing 1.2s infinite ease-in-out;
}
}
&-default {
background-color: @normal-color;
}
&-error {
background-color: @error-color;
}
&-warning {
background-color: @warning-color;
}
&-text {
display: inline-block;
color: @text-color;
font-size: @font-size-base;
margin-left: 6px;
}
// 状态点预设颜色
@colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue,
geekblue, purple;
// 生成状态点颜色类名
.make-color-classes(@i: length(@colors)) when (@i > 0) {
.make-color-classes(@i - 1);
@color: extract(@colors, @i);
@darkColor: '@{color}-6';
&-@{color} {
background-color: @@darkColor;
}
}
.make-color-classes();
}
}
@keyframes rabStatusProcessing {
0% {
transform: scale(0.8);
opacity: 0.5;
}
100% {
transform: scale(2.4);
opacity: 0;
}
}
================================================
FILE: src/styles/components/breadcrumb.less
================================================
@import '../custom.less';
@breadcrumb-tag-name: r-breadcrumb;
@breadcrumb-prefix-cls: ~'@{css-prefix}breadcrumb';
@{breadcrumb-tag-name} {
display: block;
color: #999;
font-size: @font-size-base;
a {
color: @text-color;
transition: color @transition-time @ease-in-out;
&:hover {
color: tint(@primary-color, 20%);
}
}
& > span:last-child {
font-weight: bold;
color: @text-color;
}
& > span:last-child .@{breadcrumb-prefix-cls}-item-separator {
display: none;
}
}
.@{breadcrumb-prefix-cls} {
&-item-separator {
margin: 0 8px;
color: @border-color-base;
}
&-item-link {
> .rab-icon + span {
margin-left: 4px;
}
}
}
================================================
FILE: src/styles/components/button.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@import '../mixins/button.less';
@btn-prefix-cls: ~'@{css-prefix}btn';
.@{btn-prefix-cls} {
.btn();
.btn-default();
&-long {
width: 100%;
}
& > .rab-icon-loading-solid {
margin-right: 4px;
}
& > .rab-icon + span,
& > span + .rab-icon {
margin-left: 4px;
}
&-primary {
.btn-primary();
.@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical)
&:not(:first-child):not(:last-child) {
border-right-color: @btn-group-border;
border-left-color: @btn-group-border;
}
.@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) &:first-child {
&:not(:last-child) {
border-right-color: @btn-group-border;
&[disabled] {
border-right-color: @btn-default-border;
}
}
}
.@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical)
&:last-child:not(:first-child),
.@{btn-prefix-cls}-group:not(.@{btn-prefix-cls}-group-vertical) & + .@{btn-prefix-cls} {
border-left-color: @btn-group-border;
&[disabled] {
border-left-color: @btn-default-border;
}
}
.@{btn-prefix-cls}-group-vertical &:not(:first-child):not(:last-child) {
border-top-color: @btn-group-border;
border-bottom-color: @btn-group-border;
}
.@{btn-prefix-cls}-group-vertical &:first-child {
&:not(:last-child) {
border-bottom-color: @btn-group-border;
&[disabled] {
border-top-color: @btn-default-border;
}
}
}
.@{btn-prefix-cls}-group-vertical &:last-child:not(:first-child),
.@{btn-prefix-cls}-group-vertical & + .@{btn-prefix-cls} {
border-top-color: @btn-group-border;
&[disabled] {
border-bottom-color: @btn-default-border;
}
}
}
&-dashed {
.btn-dashed();
}
&-text {
.btn-text();
}
&-success {
.btn-color(@success-color);
}
&-warning {
.btn-color(@warning-color);
}
&-error {
.btn-color(@error-color);
}
&-info {
.btn-color(@info-color);
}
&-circle,
&-circle-outline {
.btn-circle(@btn-prefix-cls);
}
&:before {
position: absolute;
top: -1px;
left: -1px;
bottom: -1px;
right: -1px;
background: @white;
opacity: 0.35;
content: '';
border-radius: inherit;
z-index: 1;
transition: opacity @transition-time;
pointer-events: none;
display: none;
}
&&-loading {
pointer-events: none;
position: relative;
&:before {
display: block;
}
}
&-group {
.btn-group(@btn-prefix-cls);
}
&-group-vertical {
.btn-group-vertical(@btn-prefix-cls);
}
&-ghost {
color: @white;
background: transparent;
&:hover {
background: transparent;
}
}
&-ghost&-dashed,
&-ghost&-default {
color: @white;
border-color: @white;
&:hover {
color: tint(@primary-color, 20%);
border-color: tint(@primary-color, 20%);
}
}
&-ghost&-primary {
color: @primary-color;
&:hover {
color: tint(@primary-color, 20%);
background: fade(tint(@primary-color, 95%), 50%);
}
}
&-ghost&-info {
color: @info-color;
&:hover {
color: tint(@info-color, 20%);
background: fade(tint(@info-color, 95%), 50%);
}
}
&-ghost&-success {
color: @success-color;
&:hover {
color: tint(@success-color, 20%);
background: fade(tint(@success-color, 95%), 50%);
}
}
&-ghost&-warning {
color: @warning-color;
&:hover {
color: tint(@warning-color, 20%);
background: fade(tint(@warning-color, 95%), 50%);
}
}
&-ghost&-error {
color: @error-color;
&:hover {
color: tint(@error-color, 20%);
background: fade(tint(@error-color, 95%), 50%);
}
}
&-ghost&-default[disabled],
&-ghost&-dashed[disabled],
&-ghost&-primary[disabled],
&-ghost&-info[disabled],
&-ghost&-success[disabled],
&-ghost&-warning[disabled],
&-ghost&-error[disabled] {
background: transparent;
color: fade(#000, 25%);
border-color: @btn-disable-border;
}
&-ghost&-text[disabled] {
background: transparent;
color: fade(#000, 25%);
}
&-sm {
font-size: @font-size-small;
}
}
a.@{btn-prefix-cls} {
padding-top: 0.1px;
line-height: @btn-height-base - 2px;
&-lg {
line-height: @btn-height-large - 2px;
}
&-sm {
line-height: @btn-height-small - 2px;
}
}
================================================
FILE: src/styles/components/card.less
================================================
@import '../custom.less';
@import '../mixins/content.less';
@card-tag-name: r-card;
@card-prefix-cls: ~'@{css-prefix}card';
@{card-tag-name} {
display: block;
background: @white;
border: @border-width-base @border-style-base @border-color-split;
border-radius: @border-radius-base;
font-size: @font-size-base;
position: relative;
transition: all @transition-time @ease-in-out;
&:not(.@{card-prefix-cls}-shadow) {
&:hover {
box-shadow: @shadow-base;
border-color: #eee;
}
}
}
.@{card-prefix-cls} {
&-no-border {
border: none !important;
}
&-shadow {
box-shadow: @shadow-card;
}
&-dis-hover {
&:hover {
box-shadow: none !important;
border-color: @border-color-split !important;
}
}
&-dis-hover&-bordered {
&:hover {
border-color: @border-color-split !important;
}
}
&-head {
.content-header();
}
&-extra {
position: absolute;
right: 16px;
top: 14px;
}
&-body {
padding: @padding-md;
}
}
================================================
FILE: src/styles/components/carousel.less
================================================
@import '../custom.less';
@carousel-tag-name: r-carousel;
@carousel-prefix-cls: ~'@{css-prefix}carousel';
@{carousel-tag-name} {
position: relative;
display: block;
}
.@{carousel-prefix-cls} {
&-list {
position: relative;
width: 100%;
overflow: hidden;
}
&-item {
position: relative;
display: none;
float: left;
width: 100%;
margin-right: -100%;
backface-visibility: hidden;
transition: transform 0.5s ease;
&.active,
&-next,
&-prev {
display: block;
}
&-next:not(&-left),
.active&-right {
transform: translateX(100%);
}
&-prev:not(&-right),
.active&-left {
transform: translateX(-100%);
}
}
&-fade &-item {
opacity: 0;
transition-property: opacity;
transform: none;
}
&-fade &-item.active,
&-fade &-item-next&-item-left,
&-fade &-item-prev&-item-right {
z-index: 1;
opacity: 1;
}
&-fade .active&-item-left,
&-fade .active&-item-right {
z-index: 0;
opacity: 0;
transition: opacity 0.5s ease 0s;
}
&-arrow {
border: 0;
padding: 0;
margin: 0;
outline: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: none;
position: absolute;
top: 50%;
z-index: 10;
transform: translateY(-50%);
transition: @transition-time;
background-color: rgba(31, 45, 61, 0.11);
color: @white;
&:hover {
background-color: rgba(31, 45, 61, 0.5);
}
text-align: center;
font-size: 1em;
font-family: inherit;
line-height: inherit;
& > * {
vertical-align: baseline;
}
&.left {
left: 16px;
}
&.right {
right: 16px;
}
&-always {
display: inherit;
}
&-hover {
display: inherit;
opacity: 0;
}
}
@{carousel-tag-name}:hover &-arrow-hover {
opacity: 1;
}
&-dots {
@padding: 7px;
z-index: 10;
display: none;
position: relative;
&-inside {
display: block;
position: absolute;
bottom: 10px - @padding;
}
&-outside {
display: block;
margin-top: 10px - @padding;
}
list-style: none;
text-align: center;
padding: 0;
width: 100%;
height: 3px + @padding * 2;
li {
position: relative;
display: inline-block;
vertical-align: top;
text-align: center;
margin: 0 2px;
padding: @padding 0;
cursor: pointer;
button {
width: 16px;
height: 3px;
border: 0;
cursor: pointer;
background: #8391a5;
opacity: 0.3;
display: block;
border-radius: 1px;
outline: none;
font-size: 0;
color: transparent;
transition: all 0.5s;
&.radius {
width: 9px;
height: 9px;
border-radius: 50%;
}
}
&:hover > button {
opacity: 0.7;
}
&.@{carousel-prefix-cls}-active > button {
opacity: 1;
width: 24px;
&.radius {
width: 9px;
}
}
}
}
}
================================================
FILE: src/styles/components/checkbox.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@import '../mixins/checkbox.less';
@checkbox-tag-name: r-checkbox;
@checkbox-group-tag: r-checkbox-group;
@checkbox-prefix-cls: ~'@{css-prefix}checkbox';
@checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
// 普通状态
.@{checkbox-prefix-cls} {
&-focus {
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
z-index: 1;
}
display: inline-block;
vertical-align: middle;
white-space: nowrap;
cursor: pointer;
position: relative;
line-height: 1;
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: #bcbcbc;
}
}
&-inner {
display: inline-block;
.square(16px);
position: relative;
top: 0;
left: 0;
border: 1px solid @border-color-base;
border-radius: 2px;
background-color: #fff;
transition: border-color @transition-time @ease-in-out,
background-color @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:after {
content: '';
display: table;
.size(4px, 8px);
position: absolute;
top: 1px;
left: 4px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
transform: rotate(45deg) scale(0);
transition: all @transition-time @ease-in-out;
}
}
&-input {
.square(100%);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
cursor: pointer;
opacity: 0;
&[disabled] {
cursor: @cursor-disabled;
}
}
& + .rab-icon {
position: relative;
top: 1px;
margin-left: 5px;
}
}
// 选中状态
.@{checkbox-prefix-cls}-checked {
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @primary-color;
}
}
.@{checkbox-inner-prefix-cls} {
border-color: @primary-color;
background-color: @primary-color;
&:after {
content: '';
display: table;
width: 4px;
height: 8px;
position: absolute;
top: 2px;
left: 5px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
transform: rotate(45deg) scale(1);
transition: all @transition-time @ease-in-out;
}
}
}
// 半选状态
.@{checkbox-prefix-cls}-indeterminate {
.@{checkbox-inner-prefix-cls}:after {
content: '';
.size(10px, 1px);
transform: scale(1);
position: absolute;
left: 2px;
top: 6px;
}
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @primary-color;
}
}
.@{checkbox-inner-prefix-cls} {
background-color: @primary-color;
border-color: @primary-color;
}
&[disabled] {
.@{checkbox-inner-prefix-cls} {
background-color: #f3f3f3;
border-color: @border-color-base;
}
.@{checkbox-inner-prefix-cls}:after {
border-color: @input-placeholder-color;
}
}
}
@{checkbox-tag-name} {
cursor: pointer;
font-size: @font-size-base;
display: inline-block;
margin-right: 8px;
&[disabled],
&[disabled] .@{checkbox-prefix-cls} {
cursor: @cursor-disabled;
}
// 禁用
&[disabled] {
.@{checkbox-prefix-cls} {
&-checked {
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @border-color-base;
}
}
.@{checkbox-inner-prefix-cls} {
background-color: #f3f3f3;
border-color: @border-color-base;
&:after {
animation-name: none;
border-color: #ccc;
}
}
}
.@{checkbox-inner-prefix-cls} {
border-color: @border-color-base;
background-color: #f3f3f3;
&:after {
animation-name: none;
border-color: #ccc;
}
}
.@{checkbox-inner-prefix-cls}-input {
cursor: default;
}
& + span {
color: #ccc;
cursor: @cursor-disabled;
}
&:hover {
.@{checkbox-inner-prefix-cls} {
border-color: @border-color-base;
}
}
}
}
&[type='border'] {
border: 1px solid @border-color-base;
border-radius: @btn-border-radius;
height: @btn-height-base;
line-height: @btn-height-base - 1px;
padding: @btn-padding-base;
transition: border @transition-time @ease-in-out;
}
.checkbox-size();
& + span,
.@{checkbox-prefix-cls} + span {
margin-right: 4px;
}
}
.@{checkbox-prefix-cls}-checked[type='border'] {
border-color: @primary-color;
}
@{checkbox-group-tag} {
display: block;
font-size: @font-size-base;
@{checkbox-tag-name} {
display: inline-block;
}
.checkbox-size();
}
.size-with-border(small, @btn-height-small, 1px, @btn-padding-small);
.size-with-border(large, @btn-height-large, 3px, @btn-padding-large);
================================================
FILE: src/styles/components/circle.less
================================================
@import '../custom.less';
@circle-tag-name: r-circle;
@circle-prefix-cls: ~"@{css-prefix}chart-circle";
@{circle-tag-name} {
display: inline-block;
position: relative;
}
.@{circle-prefix-cls}{
&-inner {
width: 100%;
text-align: center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
line-height: 0;
}
}
================================================
FILE: src/styles/components/collapse.less
================================================
@import '../custom.less';
@collapse-tag-name: r-collapse;
@collapse-panel-tag: r-collapse-panel;
@collapse-prefix-cls: ~'@{css-prefix}collapse';
@{collapse-tag-name} {
display: block;
background-color: @background-color-base;
border-radius: @border-radius-base;
border: @border-width-base @border-style-base @border-color-base;
}
@{collapse-panel-tag} {
display: none;
border-top: @border-width-base @border-style-base @border-color-base;
&:first-child {
border-top: 0;
}
> .@{collapse-prefix-cls}-header {
height: 38px;
line-height: 38px;
padding-left: @padding-md;
color: #666;
cursor: pointer;
position: relative;
border-bottom: @border-width-base @border-style-base transparent;
> i {
transition: transform @transition-time @ease-in-out;
margin-right: 14px;
}
}
&.@{collapse-prefix-cls}-item-active > .@{collapse-prefix-cls}-header {
border-bottom: @border-width-base @border-style-base @border-color-base;
> i {
transform: rotate(90deg);
}
}
&:last-child {
> .@{collapse-prefix-cls}-content {
border-radius: 0 0 @border-radius-base @border-radius-base;
}
}
}
.@{collapse-prefix-cls} {
&-simple,
&-ghost {
border-top: none;
border-left: none;
border-right: none;
border-radius: 0;
}
&-simple > @{collapse-panel-tag}&-item-active > &-header,
&-ghost > @{collapse-panel-tag}&-item-active > &-header {
border-bottom: @border-width-base @border-style-base transparent;
}
&-content {
display: none;
overflow: hidden;
color: @text-color;
padding: 0 @padding-md;
background-color: @white;
& > &-box {
padding-top: @padding-md;
padding-bottom: @padding-md;
}
}
&-simple > @{collapse-panel-tag} > &-content > &-content-box {
padding-top: 0;
}
&-simple &-content {
background-color: @background-color-base;
}
&-ghost {
border-bottom: none;
}
&-ghost > @{collapse-panel-tag} {
border-top: none;
}
&-ghost > @{collapse-panel-tag} > &-content > &-content-box {
padding-top: 12px;
padding-bottom: 12px;
}
&-ghost,
&-ghost &-content {
background-color: @white;
}
&-item-active > &-content {
display: block;
}
}
================================================
FILE: src/styles/components/count-down.less
================================================
@count-down-tag-name: r-count-down;
@{count-down-tag-name} {
display: inline-block;
font-size: 20px;
}
================================================
FILE: src/styles/components/divider.less
================================================
@import '../custom.less';
@import '../mixins/common.less';
@divider-tag-name: r-divider;
@divider-prefix-cls: ~'@{css-prefix}divider';
@{divider-tag-name} {
.reset-component();
background: @border-color-split;
&,
&[type='vertical'] {
margin: 0 8px;
display: inline-block;
height: 0.9em;
width: 1px;
vertical-align: middle;
position: relative;
top: -0.06em;
}
&[type='horizontal'] {
display: block;
height: 1px;
width: 100%;
min-width: 100%;
margin: 24px 0;
clear: both;
}
&[type='horizontal'].@{divider-prefix-cls}-with-text-center,
&[type='horizontal'].@{divider-prefix-cls}-with-text-left,
&[type='horizontal'].@{divider-prefix-cls}-with-text-right {
display: table;
white-space: nowrap;
text-align: center;
background: transparent;
font-weight: 500;
color: @title-color;
font-size: @font-size-large;
margin: 16px 0;
&:before,
&:after {
content: '';
display: table-cell;
position: relative;
top: 50%;
width: 50%;
border-top: 1px solid @border-color-split;
transform: translateY(50%);
}
}
&[type='horizontal'][size='small'].@{divider-prefix-cls}-with-text-center,
&[type='horizontal'][size='small'].@{divider-prefix-cls}-with-text-left,
&[type='horizontal'][size='small'].@{divider-prefix-cls}-with-text-right {
font-size: @font-size-base;
margin: 8px 0;
}
&[type='horizontal'].@{divider-prefix-cls}-with-text-left,
&[type='horizontal'].@{divider-prefix-cls}-with-text-right {
.@{divider-prefix-cls}-inner-text {
display: inline-block;
padding: 0 10px;
}
}
&[type='horizontal'].@{divider-prefix-cls}-with-text-left {
&:before {
top: 50%;
width: 5%;
}
&:after {
top: 50%;
width: 95%;
}
}
&[type='horizontal'].@{divider-prefix-cls}-with-text-right {
&:before {
top: 50%;
width: 95%;
}
&:after {
top: 50%;
width: 5%;
}
}
&[type='horizontal'].@{divider-prefix-cls}-with-text.@{divider-prefix-cls}-dashed,
&[type='horizontal'].@{divider-prefix-cls}-with-text-left.@{divider-prefix-cls}-dashed,
&[type='horizontal'].@{divider-prefix-cls}-with-text-right.@{divider-prefix-cls}-dashed {
border-top: 0;
&:before,
&:after {
border-style: dashed none none;
}
}
}
.@{divider-prefix-cls} {
&-inner-text {
display: inline-block;
padding: 0 24px;
}
&-dashed {
background: none;
border-top: 1px dashed @border-color-split;
}
&-plain&-with-text,
&-plain&-with-text-left,
&-plain&-with-text-right {
color: @text-color !important;
font-weight: normal !important;
font-size: @font-size-base !important;
}
}
================================================
FILE: src/styles/components/drawer.less
================================================
@import '../custom.less';
@import '../mixins/mask.less';
@import '../mixins/content.less';
@import '../animation/move.less';
@drawer-tag-name: r-drawer;
@drawer-prefix-cls: ~'@{css-prefix}drawer';
@drawer-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
@{drawer-tag-name} {
display: none;
}
.@{drawer-prefix-cls} {
width: auto;
height: 100%;
position: fixed;
&-inner {
position: absolute;
}
&-top,
&-bottom {
width: 100%;
left: 0;
}
&-left,
&-right {
top: 0;
height: 100%;
}
&-left {
left: 0;
}
&-right {
right: 0;
}
&-top {
top: 0;
}
&-bottom {
bottom: 0;
}
&-hidden {
display: none !important;
}
&-wrap {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-drawer;
-webkit-overflow-scrolling: touch;
outline: 0;
&-inner {
position: absolute;
overflow: hidden;
}
&-dragging {
user-select: none;
}
}
&-wrap * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
&-mask {
.mask();
&-inner {
position: absolute;
}
}
&-content {
width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
background-color: #fff;
border: 0;
background-clip: padding-box;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
&-no-mask {
pointer-events: auto;
}
}
&-header {
.content-header();
}
&-close {
z-index: 1;
.content-close(0, 28px);
}
&-body {
width: 100%;
height: calc(~'100% - 51px');
padding: 16px;
font-size: @font-size-base;
line-height: 1.5;
word-wrap: break-word;
position: absolute;
overflow: auto;
}
&-no-header &-body {
height: 100%;
}
&-no-mask {
pointer-events: none;
.@{drawer-prefix-cls}-drag {
pointer-events: auto;
}
}
&-drag {
top: 0;
height: 100%;
width: 0;
position: absolute;
&-left {
right: 0;
}
&-move-trigger {
width: 8px;
height: 100px;
line-height: 100px;
position: absolute;
top: 50%;
background: rgb(243, 243, 243);
transform: translate(-50%, -50%);
border-radius: ~'4px / 6px';
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
cursor: col-resize;
&-point {
display: inline-block;
width: 50%;
transform: translateX(50%);
i {
display: block;
border-bottom: 1px solid rgb(192, 192, 192);
padding-bottom: 2px;
}
}
}
}
}
.move(drawer-top, rabDrawerMoveTopIn, enter, 0.55s, @drawer-timing-function);
.move(drawer-bottom, rabDrawerMoveBottomIn, enter, 0.55s, @drawer-timing-function);
.move(drawer-left, rabDrawerMoveLeftIn, enter, 0.55s, @drawer-timing-function);
.move(drawer-right, rabDrawerMoveRightIn, enter, 0.55s, @drawer-timing-function);
.move(drawer-top, rabDrawerMoveTopOut, leave, 0.5s, @drawer-timing-function);
.move(drawer-bottom, rabDrawerMoveBottomOut, leave, 0.5s, @drawer-timing-function);
.move(drawer-left, rabDrawerMoveLeftOut, leave, 0.5s, @drawer-timing-function);
.move(drawer-right, rabDrawerMoveRightOut, leave, 0.5s, @drawer-timing-function);
================================================
FILE: src/styles/components/dropdown.less
================================================
@import '../custom.less';
@import '../color/colorPalette.less';
@import '../animation/slide.less';
@import '../mixins/select.less';
@dropdown-tag-name: r-dropdown;
@dropdown-menu-tag-name: r-dropdown-menu;
@dropdown-item-tag-name: r-dropdown-item;
@dropdown-prefix-cls: ~'@{css-prefix}dropdown';
@select-dropdown-prefix-cls: ~'@{css-prefix}select-dropdown';
@dropdown-item-prefix-cls: ~'@{dropdown-prefix-cls}-item';
@{dropdown-tag-name} {
display: inline-block;
position: relative;
@{dropdown-menu-tag-name} {
overflow: visible;
max-height: none;
}
}
@{dropdown-menu-tag-name} {
width: inherit;
max-height: 200px;
overflow: auto;
display: block;
visibility: hidden;
min-width: 100px;
padding: 5px 0;
box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
position: absolute;
background-color: @white;
box-sizing: border-box;
border-radius: @border-radius-base;
z-index: @zindex-select;
}
@{dropdown-item-tag-name} {
&[selected],
&[selected]:hover {
background: ~`colorPalette('@{primary-color}', 1) `;
}
&[danger] {
color: @error-color;
&:hover {
color: @white;
background-color: @error-color;
}
}
}
.select-item(@dropdown-prefix-cls, @dropdown-item-tag-name, @dropdown-item-prefix-cls);
.transition-drop {
&-enter {
animation: rabTransitionDropIn @animation-time ease-in-out;
}
&-leave {
animation: rabTransitionDropOut @animation-time ease-in-out;
}
}
================================================
FILE: src/styles/components/empty.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@empty-tag-name: r-empty;
@empty-prefix-cls: ~'@{css-prefix}empty';
@icon-prefix-cls: ~'@{css-prefix}icon';
@{empty-tag-name} {
display: block;
margin: 0 8px;
font-size: @font-size-base;
line-height: 22px;
text-align: center;
}
.@{empty-prefix-cls} {
&-image {
height: 100px;
margin-bottom: 12px;
img {
height: 100%;
}
}
&-description {
margin: 0;
color: @subsidiary-color;
}
&-footer {
margin-top: 12px;
}
}
================================================
FILE: src/styles/components/index.less
================================================
@import './affix';
@import './alert';
@import './avatar';
@import './back-top';
@import './badge';
@import './breadcrumb';
@import './button';
@import './card';
@import './carousel';
@import './checkbox';
@import './circle';
@import './collapse';
@import './count-down';
@import './divider';
@import './drawer';
@import './dropdown';
@import './empty.less';
@import './input-number.less';
@import './jumbotron';
@import './loading-bar';
@import './message';
@import './modal';
@import './notice';
@import './page-header';
@import './poptip';
@import './progress';
@import './radio';
@import './result.less';
@import './skeleton.less';
@import './spin';
@import './steps';
@import './switch';
@import './tabs';
@import './tag.less';
@import './time';
@import './timeline';
@import './tooltip';
================================================
FILE: src/styles/components/input-number.less
================================================
@import '../custom.less';
@import '../mixins/common.less';
@import '../mixins/input.less';
@input-number-tag: r-input-number;
@input-number-prefix-cls: ~"@{css-prefix}input-number";
.handler-disabled() {
opacity: 0.72;
color: #ccc !important;
cursor: @cursor-disabled;
}
.@{input-number-prefix-cls} {
@radius-wrap: 0 @btn-border-radius @btn-border-radius 0;
.input();
margin: 0;
padding: 0;
width: 80px;
height: @input-height-base;
line-height: @input-height-base;
vertical-align: middle;
border: 1px solid @border-color-base;
border-radius: @btn-border-radius;
overflow: hidden;
cursor: default;
&-handler-wrap {
width: 22px;
height: 100%;
border-left: 1px solid @border-color-base;
border-radius: @radius-wrap;
background: @white;
position: absolute;
top: 0;
right: 0;
opacity: 0;
transition: opacity @transition-time @ease-in-out;
}
&:hover &-handler-wrap {
opacity: 1;
}
&-handler-up {
cursor: pointer;
&-inner {
top: -1px;
}
}
&-handler-down {
border-top: 1px solid @border-color-base;
top: -1px;
cursor: pointer;
}
&-handler {
display: block;
width: 100%;
height: (@input-height-base / 2);
line-height: 0;
text-align: center;
overflow: hidden;
color: #999;
position: relative;
&:hover &-up-inner,
&:hover &-down-inner {
color: tint(@primary-color, 20%);
}
}
&-handler-up-inner,
&-handler-down-inner {
width: 12px;
height: 12px;
line-height: 12px;
font-size: 14px;
color: #999;
user-select: none;
position: absolute;
right: 5px;
transition: all @transition-time linear;
}
&:hover {
.hover();
}
&-focused {
.active();
}
&-disabled {
.disabled();
}
&-input-wrap {
overflow: hidden;
height: @input-height-base;
}
&-input {
width: 100%;
height: @input-height-base;
line-height: @input-height-base;
padding: 0 7px;
text-align: left;
outline: 0;
-moz-appearance: textfield;
color: #666;
border: 0;
border-radius: @btn-border-radius;
transition: all @transition-time linear;
&::-webkit-outer-spin-button,&::-webkit-inner-spin-button {
-webkit-appearance: none;
}
&[disabled] {
.disabled();
}
&::placeholder {
color: @input-placeholder-color;
}
}
&-large {
padding: 0;
.@{input-number-prefix-cls}-input-wrap {
height: @input-height-large;
}
.@{input-number-prefix-cls}-handler {
height: (@input-height-large / 2);
}
input {
height: @input-height-large;
line-height: @input-height-large;
}
.@{input-number-prefix-cls}-handler-up-inner {
top: 1px;
}
.@{input-number-prefix-cls}-handler-down-inner {
bottom: 5px;
}
}
&-small {
padding: 0;
.@{input-number-prefix-cls}-input-wrap {
height: @input-height-small;
}
.@{input-number-prefix-cls}-handler {
height: (@input-height-small / 2);
}
input {
height: @input-height-small;
line-height: @input-height-small;
margin-top: -1px;
vertical-align: top;
}
.@{input-number-prefix-cls}-handler-up-inner {
top: -4px;
}
.@{input-number-prefix-cls}-handler-down-inner {
bottom: 2px;
}
}
&-handler-down-disabled,
&-handler-up-disabled,
&-disabled {
.@{input-number-prefix-cls}-handler-down-inner,
.@{input-number-prefix-cls}-handler-up-inner {
.handler-disabled();
}
}
&-disabled {
.@{input-number-prefix-cls}-input {
opacity: 0.72;
cursor: @cursor-disabled;
background-color: #f3f3f3;
}
.@{input-number-prefix-cls}-handler-wrap {
display: none;
}
.@{input-number-prefix-cls}-handler {
.handler-disabled();
}
}
&-controls-outside{
width: 80px + 32px * 2;
padding: 0 32px;
.@{input-number-prefix-cls}-input{
border-radius: 0;
text-align: center;
}
&-btn{
display: inline-block;
width: 32px;
height: 32px;
line-height: 30px;
position: absolute;
top: 0;
text-align: center;
background-color: @input-group-bg;
color: @input-color;
cursor: pointer;
i{
font-size: 16px;
}
&:hover i{
color: @primary-color;
}
&-disabled, &-disabled:hover{
cursor: @cursor-disabled;
i{
color: #ccc;
}
}
}
&-up{
right: 0;
border-left: 1px solid @input-border-color;
}
&-down{
left: 0;
border-right: 1px solid @input-border-color;
}
}
&-disabled&-controls-outside{
.@{input-number-prefix-cls}-controls-outside-btn{
cursor: @cursor-disabled;
i{
color: #ccc;
}
}
}
&-large&-controls-outside{
width: 80px + 40px *2;
padding: 0 40px;
.@{input-number-prefix-cls}-controls-outside-btn{
width: 40px;
height: 40px;
line-height: 38px;
i{
font-size: 20px;
}
}
}
&-small&-controls-outside{
width: 80px + 24px *2;
padding: 0 24px;
.@{input-number-prefix-cls}-controls-outside-btn{
width: 24px;
height: 24px;
line-height: 22px;
i{
font-size: 14px;
}
}
}
}
================================================
FILE: src/styles/components/jumbotron.less
================================================
@import '../custom.less';
@jumbotron-tag-name: r-jumbotron;
@jumbotron-prefix-cls: ~'@{css-prefix}jumbotron';
@{jumbotron-tag-name} {
display: block;
padding: 2rem 1rem;
margin-bottom: 32px;
background-color: @normal-color;
border-radius: @border-radius-base;
&[type='light'] {
background-color: @white;
}
&[type='dark'] {
background-color: @black;
.@{jumbotron-prefix-cls} {
&-title {
color: fade(@white, 80%);
}
&-subtitle {
color: fade(@white, 85%);
}
}
}
@media (min-width: @screen-sm-min) {
padding: 3rem 2rem;
}
}
.@{jumbotron-prefix-cls} {
&-container {
width: 100%;
padding-right: @padding-md - 1;
padding-left: @padding-md - 1;
margin-right: auto;
margin-left: auto;
@media (min-width: @screen-sm-min) {
max-width: 540px;
}
@media (min-width: @screen-md-min) {
max-width: 720px;
}
@media (min-width: @screen-md-min) {
max-width: 960px;
}
@media (min-width: @screen-md-min) {
max-width: 1140px;
}
}
&-title {
color: @title-color;
font-size: 3.5rem;
font-weight: 300;
line-height: 1.5;
}
&-subtitle {
font-size: 1.25rem;
font-weight: 300;
margin-bottom: 16px;
}
}
================================================
FILE: src/styles/components/loading-bar.less
================================================
@import '../custom.less';
@loading-bar-prefix-cls: ~"@{css-prefix}loading-bar";
.@{loading-bar-prefix-cls} {
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: @zindex-loading-bar;
pointer-events: none;
&-inner {
height: 100%;
transition: width @transition-time linear;
&-color-primary {
background-color: @primary-color;
}
&-failed-color-error {
background-color: @error-color;
}
}
}
================================================
FILE: src/styles/components/message.less
================================================
@import '../animation/move.less';
@import '../color/colorPalette.less';
@import '../custom.less';
@import '../mixins/close.less';
@message-prefix-cls: ~'@{css-prefix}message';
@icon-prefix-cls: ~'@{css-prefix}icon';
@message-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
.@{message-prefix-cls} {
font-size: @font-size-base;
position: fixed;
z-index: @zindex-message;
width: 100%;
top: 16px;
left: 0;
pointer-events: none;
&-notice {
padding: 8px;
text-align: center;
transition: height @animation-time @ease-in-out, padding @animation-time @ease-in-out;
&:first-child {
margin-top: -8px;
}
&-close {
position: absolute;
right: 4px;
top: 10px;
color: #999;
outline: none;
i.@{icon-prefix-cls} {
.close-base(4px);
}
}
}
&-notice-content {
display: inline-block;
pointer-events: all;
padding: @padding-xs + 2 @padding-md;
border-radius: @border-radius-base;
box-shadow: @shadow-base;
background: @white;
position: relative;
&-text {
display: inline-block;
}
}
&-notice-closable {
.@{message-prefix-cls}-notice-content-text {
padding-right: 32px;
}
}
&-success .@{icon-prefix-cls} {
color: @success-color;
}
&-error .@{icon-prefix-cls} {
color: @error-color;
}
&-warning .@{icon-prefix-cls} {
color: @warning-color;
}
&-info .@{icon-prefix-cls},
&-loading .@{icon-prefix-cls} {
color: @primary-color;
}
.@{icon-prefix-cls} {
margin-right: 8px;
font-size: 18px;
position: relative;
top: 1px;
// 修复 loading 图标旋转左右晃动
&-loading-solid {
height: 5px;
}
}
&-notice-with-background {
.@{message-prefix-cls}-notice-content {
&-background {
box-shadow: none;
border-radius: 4px;
}
&-info {
background: ~`colorPalette('@{primary-color}', 0.6) `;
color: ~`colorPalette('@{primary-color}', 6) `;
border: 1px solid~`colorPalette('@{primary-color}', 1.5) `;
}
&-success {
background: ~`colorPalette('@{success-color}', 1.2) `;
color: ~`colorPalette('@{success-color}', 6) `;
border: 1px solid~`colorPalette('@{success-color}', 2) `;
}
&-warning {
background: ~`colorPalette('@{warning-color}', 1) `;
color: ~`colorPalette('@{warning-color}', 6) `;
border: 1px solid~`colorPalette('@{warning-color}', 2) `;
}
&-error {
background: ~`colorPalette('@{error-color}', 1) `;
color: ~`colorPalette('@{error-color}', 6) `;
border: 1px solid~`colorPalette('@{error-color}', 2) `;
}
}
}
}
.move(message, rabMessageMoveIn, enter, @animation-time, @message-timing-function);
.move(message, rabMessageMoveOut, leave, @animation-time, @message-timing-function);
================================================
FILE: src/styles/components/modal.less
================================================
@import '../custom.less';
@import '../mixins/mask.less';
@import '../mixins/content.less';
@import '../animation/zoom.less';
@modal-tag-name: r-modal;
@modal-prefix-cls: ~'@{css-prefix}modal';
@confirm-prefix-cls: ~'@{css-prefix}modal-confirm';
@{modal-tag-name} {
display: none;
}
.@{modal-prefix-cls} {
width: auto;
margin: 0 auto;
position: relative;
outline: none;
top: 100px;
&.zoom-big-enter,
&.zoom-big-leave {
animation-duration: 0.3s;
}
&-hidden {
display: none !important;
}
&-wrap {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: @zindex-modal;
-webkit-overflow-scrolling: touch;
outline: 0;
}
&-wrap * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
&-mask {
.mask();
}
&-content {
position: relative;
background-color: @white;
border: 0;
border-radius: @border-radius-base;
background-clip: padding-box;
box-shadow: @shadow-down;
&-no-mask {
pointer-events: auto;
}
}
&-header {
.content-header();
}
&-close {
z-index: 1;
.content-close(8px, 31px);
}
&-body {
padding: @padding-md;
font-size: @font-size-base;
line-height: @line-height-base;
p {
margin: 0;
}
}
&-footer {
border-top: @border-width-base @border-style-base @border-color-split;
padding: @padding-sm @padding-md+2 @padding-sm @padding-md+2;
text-align: right;
button + button {
margin-left: 8px;
margin-bottom: 0;
}
}
&-fullscreen {
width: 100% !important;
top: 0;
bottom: 0;
position: absolute;
@modal-header-height: 51px;
@modal-footer-height: 61px;
.@{modal-prefix-cls}-content {
width: 100%;
border-radius: 0;
position: absolute;
top: 0;
bottom: 0;
}
.@{modal-prefix-cls}-body {
width: 100%;
overflow: auto;
position: absolute;
top: @modal-header-height;
bottom: @modal-footer-height;
}
&-no-header .@{modal-prefix-cls}-body {
top: 0;
}
&-no-footer .@{modal-prefix-cls}-body {
bottom: 0;
}
.@{modal-prefix-cls}-footer {
position: absolute;
width: 100%;
bottom: 0;
}
}
&-no-mask {
pointer-events: none;
}
}
@media (max-width: @screen-sm) {
.@{modal-prefix-cls} {
width: auto !important;
margin: 10px;
}
.@{modal-prefix-cls}-fullscreen {
width: 100% !important;
margin: 0;
}
.vertical-center-modal {
.@{modal-prefix-cls} {
flex: 1;
}
}
}
.@{confirm-prefix-cls} {
padding: 6px @padding-md @padding-xs;
&-head {
padding: 0 @padding-sm 0 0;
&-icon {
display: inline-block;
font-size: 30px;
vertical-align: middle;
position: relative;
top: -8px;
&-info {
color: @primary-color;
}
&-success {
color: @success-color;
}
&-warning {
color: @warning-color;
}
&-error {
color: @error-color;
}
&-confirm {
color: @warning-color;
}
}
&-title {
display: inline-block;
vertical-align: middle;
margin-left: 10px;
font-size: @font-size-large;
color: @title-color;
font-weight: 500;
}
}
&-body {
padding-left: 44px;
font-size: @font-size-base;
color: @text-color;
position: relative;
p {
margin: 0;
}
}
&-footer {
margin-top: 20px;
text-align: right;
button + button {
margin-left: 8px;
margin-bottom: 0;
}
}
}
================================================
FILE: src/styles/components/notice.less
================================================
@import '../animation/move.less';
@import '../custom.less';
@import '../mixins/close.less';
@notice-prefix-cls: ~'@{css-prefix}notice';
@icon-prefix-cls: ~'@{css-prefix}icon';
@notice-width: 384px;
@notice-padding: 16px;
@notice-margin-bottom: 10px;
@notice-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
.@{notice-prefix-cls} {
margin-right: 24px;
position: fixed;
z-index: @zindex-notification;
&-content-with-icon {
margin-left: 51px;
}
&-with-desc&-with-icon &-title {
margin-left: 51px;
}
&-notice {
width: @notice-width;
max-width: calc(100vw - 24px * 2);
margin-bottom: @notice-margin-bottom;
margin-left: auto;
padding: @notice-padding;
border-radius: @border-radius-base + 2;
box-shadow: @shadow-base;
background: @white;
line-height: 1.5;
position: relative;
overflow: hidden;
&-close {
position: absolute;
top: 16px;
right: 22px;
color: #999;
outline: none;
i {
.close-base(4px);
}
}
&-with-desc {
.@{notice-prefix-cls}-notice-close {
top: 11px;
}
}
}
&-title {
font-size: @font-size-large;
line-height: @font-size-large + 3;
color: @title-color;
padding-right: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&-with-desc &-title {
margin-bottom: 8px;
}
&-desc {
font-size: @font-size-base;
color: @text-color;
text-align: justify;
line-height: 1.5;
}
&-with-desc&-with-icon &-desc {
margin-left: 51px;
}
&-with-icon &-title {
margin-left: 26px;
}
&-icon {
position: absolute;
top: 10px;
font-size: @font-size-large + 4;
&-success {
color: @success-color;
}
&-info {
color: @primary-color;
}
&-warning {
color: @warning-color;
}
&-error {
color: @error-color;
}
}
&-with-desc &-icon {
font-size: 36px;
top: 1px;
}
&-custom-content {
position: relative;
}
}
.move(notice, rabNoticeMoveIn, enter, 0.35s, @notice-timing-function);
.move(notice, rabNoticeMoveOut, leave, 0.5s, @notice-timing-function);
================================================
FILE: src/styles/components/page-header.less
================================================
@import '../custom.less';
@page-header-tag-name: r-page-header;
@page-header-prefix-cls: ~'@{css-prefix}page-header';
@icon-prefix-cls: ~'@{css-prefix}icon';
@{page-header-tag-name} {
display: block;
font-size: @font-size-base;
line-height: @line-height-base;
position: relative;
padding: @padding-sm @padding-lg;
background-color: @white;
}
.@{page-header-prefix-cls} {
&-heading {
width: 100%;
display: flex;
align-items: baseline;
overflow: hidden;
&-title {
display: block;
float: left;
padding-right: @padding-sm;
color: @title-color;
font-size: 20px;
line-height: 40px;
}
&-sub-title {
color: @subsidiary-color;
font-size: @font-size-base;
}
}
&-back {
margin-right: 12px;
display: flex;
align-items: center;
transition: color 0.3s;
color: @title-color;
cursor: pointer;
&:hover {
color: @primary-color;
}
.@{icon-prefix-cls} {
font-size: 21px;
}
}
}
================================================
FILE: src/styles/components/poptip.less
================================================
@import '../custom.less';
@import '../mixins/tooltip.less';
@import '../animation/zoom.less';
@poptip-tag-name: r-poptip;
@poptip-prefix-cls: ~'@{css-prefix}poptip';
@poptip-arrow: ~'@{poptip-prefix-cls}-arrow';
@poptip-max-width: 250px;
@poptip-arrow-width: 7px;
@poptip-arrow-outer-width: (@poptip-arrow-width + 1);
@poptip-distance: @poptip-arrow-width - 1 + 4;
@poptip-arrow-color: hsla(0, 0%, 85%, 0.5);
@{poptip-tag-name} {
display: inline-block;
}
.@{poptip-prefix-cls} {
&-rel {
display: inline-block;
position: relative;
}
&-title {
min-width: 177px;
min-height: 32px;
margin: 0;
padding: @padding-xs @padding-md;
position: relative;
border-bottom: @border-width-base @border-style-base @border-color-split;
color: @title-color;
font-size: @font-size-base;
font-weight: 500;
// &-inner {
// color: @title-color;
// font-size: @font-size-base;
// font-weight: 500;
// }
}
&-body {
padding: @padding-sm @padding-md;
&-content {
color: @text-color;
overflow: auto;
&-word-wrap {
white-space: normal;
text-align: justify;
}
// &-inner {
// color: @text-color;
// }
}
}
&-inner {
width: 100%;
background-color: @white;
background-clip: padding-box;
border-radius: @border-radius-base;
box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%),
0 9px 28px 8px rgb(0 0 0 / 5%);
white-space: nowrap;
text-align: left;
}
&-popper {
min-width: 170px;
font-size: @font-size-base;
will-change: top, left;
.popper(@poptip-arrow, @poptip-arrow-width, @poptip-distance, @poptip-arrow-color);
visibility: hidden;
opacity: 0;
&[x-placement^='top'] .@{poptip-arrow}:after {
content: ' ';
bottom: 1px;
margin-left: -@poptip-arrow-width;
border-bottom-width: 0;
border-top-width: @poptip-arrow-width;
border-top-color: @white;
}
&[x-placement^='right'] .@{poptip-arrow}:after {
content: ' ';
left: 1px;
bottom: -@poptip-arrow-width;
border-left-width: 0;
border-right-width: @poptip-arrow-width;
border-right-color: @white;
}
&[x-placement^='bottom'] .@{poptip-arrow}:after {
content: ' ';
top: 1px;
margin-left: -@poptip-arrow-width;
border-top-width: 0;
border-bottom-width: @poptip-arrow-width;
border-bottom-color: @white;
}
&[x-placement^='left'] .@{poptip-arrow}:after {
content: ' ';
right: 1px;
border-right-width: 0;
border-left-width: @poptip-arrow-width;
border-left-color: @white;
bottom: -@poptip-arrow-width;
}
}
&-arrow {
&,
&:after {
display: block;
width: 0;
height: 0;
position: absolute;
border-color: transparent;
border-style: @border-style-base;
}
}
&-arrow {
border-width: @poptip-arrow-outer-width;
}
&-arrow:after {
content: '';
border-width: @poptip-arrow-width;
}
&-confirm &-popper {
max-width: 300px;
}
&-confirm &-inner {
white-space: normal;
}
&-confirm &-body {
padding: @padding-md @padding-md @padding-xs;
.rab-icon {
font-size: @font-size-large + 2;
color: @warning-color;
line-height: 16px;
position: absolute;
}
&-message {
padding: 0 0 @padding-sm @padding-sm * 2;
color: @title-color;
}
}
&-confirm &-footer {
text-align: right;
margin-bottom: 6px;
button {
margin-left: 4px;
}
}
}
================================================
FILE: src/styles/components/progress.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@progress-tag-name: r-progress;
@progress-prefix-cls: ~'@{css-prefix}progress';
@icon-prefix-cls: ~'@{css-prefix}icon';
.@{progress-prefix-cls} {
&-outer {
display: inline-block;
width: 100%;
margin-right: 0;
padding-right: 0;
.@{progress-prefix-cls}-show-info & {
padding-right: 55px;
margin-right: -55px;
}
}
&-inner {
display: inline-block;
width: 100%;
background-color: #f3f3f3;
border-radius: 100px;
vertical-align: middle;
position: relative;
&-text {
display: inline-block;
vertical-align: middle;
font-size: @font-size-small;
margin: 0 6px;
}
}
&-bg {
text-align: right;
border-radius: 100px;
background-color: @primary-color;
transition: all 0.4s;
position: relative;
&:after {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.@{progress-prefix-cls}-inner-text {
color: @white;
}
}
&-success-bg {
border-radius: 100px;
background-color: @success-color;
transition: all 0.4s;
position: absolute;
top: 0;
left: 0;
}
&-text {
display: inline-block;
margin-left: 5px;
text-align: left;
font-size: 1em;
vertical-align: middle;
color: @subsidiary-color;
}
}
@{progress-tag-name} {
display: inline-block;
width: 100%;
line-height: @line-height-base;
font-size: @font-size-small;
position: relative;
&[status='active'] {
.@{progress-prefix-cls}-bg:before {
content: '';
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: @white;
border-radius: 10px;
-webkit-animation: rab-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
animation: rab-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}
}
&[status='success'] {
.@{progress-prefix-cls} {
&-bg {
background-color: @success-color;
}
&-text {
color: @success-color;
}
}
}
&[status='warning'] {
.@{progress-prefix-cls} {
&-bg {
background-color: @warning-color;
}
&-text {
color: @warning-color;
}
}
}
&[status='wrong'] {
.@{progress-prefix-cls} {
&-bg {
background-color: @error-color;
}
&-text {
color: @error-color;
}
}
}
}
@-webkit-keyframes rab-progress-active {
0% {
opacity: 0.3;
width: 0;
}
100% {
opacity: 0;
width: 100%;
}
}
@keyframes rab-progress-active {
0% {
opacity: 0.3;
width: 0;
}
100% {
opacity: 0;
width: 100%;
}
}
@-webkit-keyframes rab-progress-active-vertical {
0% {
opacity: 0.3;
height: 0;
}
100% {
opacity: 0;
height: 100%;
}
}
@keyframes rab-progress-active-vertical {
0% {
opacity: 0.3;
height: 0;
}
100% {
opacity: 0;
height: 100%;
}
}
================================================
FILE: src/styles/components/radio.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@radio-tag-name: r-radio;
@radio-group-tag: r-radio-group;
@radio-prefix-cls: ~'@{css-prefix}radio';
@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
@radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
@radio-group-button-prefix-cls: ~'@{radio-group-prefix-cls}-btn';
@{radio-tag-name} {
margin-right: 8px;
font-size: @font-size-base;
vertical-align: middle;
display: inline-block;
position: relative;
white-space: nowrap;
cursor: pointer;
&[size='large'] {
.@{radio-prefix-cls} {
& .@{radio-inner-prefix-cls} {
.square(14px);
&:after {
.square(8px);
}
}
}
}
&[size='small'] {
font-size: @font-size-large;
.@{radio-prefix-cls} {
font-size: @font-size-large;
& .@{radio-inner-prefix-cls} {
.square(18px);
&:after {
.square(12px);
}
}
}
}
&[disabled] {
cursor: not-allowed;
.@{radio-prefix-cls} {
cursor: not-allowed;
&:hover .@{radio-prefix-cls}-inner {
border-color: #dcdee2;
}
&-inner {
border-color: #dcdee2;
background-color: #f3f3f3;
&::after {
background-color: #cccccc;
}
}
&-input {
cursor: not-allowed;
}
& + span {
color: #ccc;
}
}
}
&[type='border'] {
border: @border-width-base @border-style-base @border-color-base;
border-radius: @btn-border-radius;
height: @btn-height-base;
line-height: @btn-height-base - 2px;
padding: @btn-padding-base;
transition: border @transition-time @ease-in-out;
&.@{radio-prefix-cls}-wrapper-checked {
border-color: @primary-color;
}
}
&[type='border'][disabled] {
.@{radio-prefix-cls}{
border-color: @btn-disable-border;
}
}
}
@{radio-tag-name}[size='small'][type='border'] .@{radio-prefix-cls},
@{radio-group-tag}[size='small'] @{radio-tag-name}[type='border'] .@{radio-prefix-cls} {
height: @btn-height-small;
line-height: @btn-height-small - 2px;
padding: @btn-padding-small;
}
@{radio-tag-name}[size='large'][type='border'] .@{radio-prefix-cls},
@{radio-group-tag}[size='large'] @{radio-tag-name}[type='border'] .@{radio-prefix-cls} {
height: @btn-height-large;
line-height: @btn-height-large - 4px;
padding: @btn-padding-large;
}
@{radio-group-tag} {
display: inline-block;
font-size: @font-size-base;
vertical-align: middle;
&[direction="vertical"] {
@{radio-tag-name} {
display: block;
height: 30px;
line-height: 30px;
}
}
}
.@{radio-prefix-cls}-focus {
.@{radio-prefix-cls}-inner {
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
z-index: 1;
}
}
.@{radio-prefix-cls} {
display: inline-block;
margin-right: 4px;
white-space: nowrap;
position: relative;
vertical-align: middle;
cursor: pointer;
&:hover {
.@{radio-inner-prefix-cls} {
border-color: #bcbcbc;
}
}
&-inner {
display: inline-block;
.square(16px);
position: relative;
top: 0;
left: 0;
background-color: @white;
border: @border-width-base @border-style-base @border-color-base;
border-radius: 50%;
transition: all @transition-time @ease-in-out;
&:after {
position: absolute;
.square(8px);
left: 3px;
top: 3px;
border-radius: 50%;
display: table;
border-top: 0;
border-left: 0;
content: ' ';
background-color: @primary-color;
opacity: 0;
transition: all @transition-time @ease-in-out;
transform: scale(0);
}
}
&-input {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
opacity: 0;
cursor: pointer;
}
}
// 选中状态 - Selected state
.@{radio-prefix-cls}-checked {
.@{radio-inner-prefix-cls} {
border-color: @primary-color;
&:after {
opacity: 1;
transform: scale(1);
transition: all @transition-time @ease-in-out;
}
}
&:hover:not([disabled]) {
.@{radio-inner-prefix-cls} {
border-color: @primary-color;
}
}
}
span.@{radio-prefix-cls} + * {
margin-left: 2px;
margin-right: 2px;
vertical-align: baseline;
}
// 按钮样式 - Button style
@{radio-group-tag}[type='button'] {
font-size: 0;
-webkit-text-size-adjust: none;
.@{radio-prefix-cls} {
width: 0;
margin-right: 0;
}
@{radio-tag-name} {
display: inline-block;
height: @btn-circle-size;
line-height: @btn-circle-size - 2px;
margin: 0;
padding: 0 @padding-md - 1px;
font-size: @font-size-base;
color: @btn-default-color;
transition: all @transition-time @ease-in-out;
cursor: pointer;
border: @border-width-base @border-style-base @border-color-base;
border-left: 0;
background: @white;
position: relative;
> span {
margin-left: 0;
}
&:before,
&:after {
content: '';
display: block;
position: absolute;
.size(1px, 100%);
left: -1px;
top: 0;
background: @border-color-base;
transition: all @transition-time @ease-in-out;
}
&:after {
height: @btn-circle-size + 4px;
left: -1px;
top: -3px;
background: fade(@primary-color, 20%);
opacity: 0;
}
&:first-child {
border-radius: @btn-border-radius 0 0 @btn-border-radius;
border-left: @border-width-base @border-style-base @border-color-base;
&:before,
&:after {
display: none;
}
}
&:last-child {
border-radius: 0 @btn-border-radius @btn-border-radius 0;
}
&:first-child:last-child {
border-radius: @btn-border-radius;
}
&:hover {
position: relative;
color: @primary-color;
& .@{radio-prefix-cls} {
background-color: black;
}
}
.@{radio-prefix-cls}-inner,
input {
opacity: 0;
.square(0);
}
&.@{radio-prefix-cls}-checked {
background: @white;
border-color: @primary-color;
color: @primary-color;
box-shadow: -1px 0 0 0 @primary-color;
z-index: 1;
&:before {
background: @primary-color;
opacity: 0.1;
}
&.@{radio-prefix-cls}-focus {
.@{radio-prefix-cls}-inner {
box-shadow: -1px 0 0 0 @primary-color, 0 0 0 2px fade(@primary-color, 20%);
transition: all @transition-time @ease-in-out;
&:after {
left: -3px;
top: -3px;
opacity: 1;
background: fade(@primary-color, 20%);
}
&:first-child {
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
}
}
}
&:first-child {
border-color: @primary-color;
box-shadow: none;
}
&:hover {
border-color: tint(@primary-color, 20%);
color: tint(@primary-color, 20%);
}
&:active {
border-color: shade(@primary-color, 5%);
color: shade(@primary-color, 5%);
}
}
}
}
@{radio-group-tag} {
&[type='button'] {
@{radio-tag-name} {
&.@{radio-prefix-cls}-wrapper-checked {
background: @white;
border-color: @primary-color;
color: @primary-color;
box-shadow: -1px 0 0 0 @primary-color;
z-index: 1;
&:first-child {
border-color: @primary-color;
box-shadow: none;
}
}
&[disabled] {
border-color: @border-color-base;
background-color: @background-color-base;
cursor: @cursor-disabled;
color: #ccc;
&:first-child,
&:hover {
border-color: @border-color-base;
background-color: @background-color-base;
color: #ccc;
}
&:first-child {
border-left-color: @border-color-base;
}
&.@{radio-prefix-cls}-wrapper-checked {
color: @white;
background-color: #e6e6e6;
border-color: @border-color-base;
box-shadow: none !important;
}
}
}
}
&[button-style='solid'] @{radio-tag-name}:not([disabled]).@{radio-prefix-cls}-wrapper-checked {
background: @primary-color;
color: @white;
&:hover {
background: tint(@primary-color, 20%);
color: @white;
}
}
&[size='large'][type='button'] @{radio-tag-name} {
height: @btn-circle-size-large;
line-height: @btn-circle-size-large - 2px;
font-size: @font-size-large;
&:after {
height: @btn-circle-size-large + 4px;
}
}
&[size='small'][type='button'] @{radio-tag-name} {
height: @btn-circle-size-small;
line-height: @btn-circle-size-small - 2px;
padding: 0 @padding-sm;
font-size: @font-size-base;
&:after {
height: @btn-circle-size-small + 4px;
}
&:first-child {
border-radius: @btn-border-radius-small 0 0 @btn-border-radius-small;
}
&:last-child {
border-radius: 0 @btn-border-radius-small @btn-border-radius-small 0;
}
}
}
================================================
FILE: src/styles/components/result.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@result-tag-name: r-result;
@result-prefix-cls: ~'@{css-prefix}result';
@icon-prefix-cls: ~'@{css-prefix}icon';
@{result-tag-name} {
display: block;
padding: 48px 32px;
}
.@{result-prefix-cls} {
&-info {
.@{result-prefix-cls}-icon .@{icon-prefix-cls} {
color: @primary-color;
}
}
&-success {
.@{result-prefix-cls}-icon .@{icon-prefix-cls} {
color: @success-color;
}
}
&-warning {
.@{result-prefix-cls}-icon .@{icon-prefix-cls} {
color: @warning-color;
}
}
&-error {
.@{result-prefix-cls}-icon .@{icon-prefix-cls} {
color: @error-color;
}
}
&-image {
.size(350px,280px);
margin: auto;
}
&-icon {
margin-bottom: 24px;
text-align: center;
& > .@{icon-prefix-cls} {
font-size: 90px;
}
}
&-title {
color: @title-color;
font-size: 24px;
text-align: center;
}
&-subtitle {
color: @subsidiary-color;
font-size: @font-size-base;
margin-top: 12px;
text-align: center;
}
&-extra {
margin: 24px 0 0;
text-align: center;
& > * {
margin-right: 8px;
}
& > :last-child {
margin-right: 0;
}
}
&-content {
margin-top: 24px;
padding: @padding-lg 40px;
background-color: @background-color-base;
}
}
================================================
FILE: src/styles/components/skeleton.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@skeleton-tag-name: r-skeleton;
@skeleton-prefix-cls: ~'@{css-prefix}skeleton';
@skeleton-bgc: #f2f2f2;
@{skeleton-tag-name} {
display: table;
width: 100%;
}
.@{skeleton-prefix-cls} {
&-header,
&-content {
display: table-cell;
vertical-align: top;
}
&-header {
padding-right: 16px;
}
&-header &-avatar {
display: inline-block;
vertical-align: top;
background: @skeleton-bgc;
.size(32px,32px);
line-height: 32px;
}
&-header &-avatar-large {
.size(40px,40px);
line-height: 40px;
}
&-header &-avatar-small {
.size(24px,24px);
line-height: 24px;
}
&-header &-avatar&-avatar-circle {
border-radius: 50%;
}
&-header &-avatar&-avatar-square {
border-radius: 0;
}
&-content {
width: 100%;
.@{skeleton-prefix-cls} {
&-title {
.size(100%,16px);
margin-top: 16px;
background: @skeleton-bgc;
}
&-paragraph {
padding: 0;
li {
.size(100%,16px);
list-style: none;
background: @skeleton-bgc;
&:last-child:not(:first-child):not(:nth-child(2)) {
width: 61%;
}
}
li + li {
margin-top: 16px;
}
}
}
.@{skeleton-prefix-cls}-title + .@{skeleton-prefix-cls}-paragraph {
margin-top: 24px;
}
}
&-with-avatar {
.@{skeleton-prefix-cls}-content .@{skeleton-prefix-cls}-title {
margin-top: 12px;
}
.@{skeleton-prefix-cls}-content
.@{skeleton-prefix-cls}-title
+ .@{skeleton-prefix-cls}-paragraph {
margin-top: 28px;
}
}
&-active {
.@{skeleton-prefix-cls}-header .@{skeleton-prefix-cls}-avatar,
.@{skeleton-prefix-cls}-content .@{skeleton-prefix-cls}-title,
.@{skeleton-prefix-cls}-content .@{skeleton-prefix-cls}-paragraph > li {
background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
background-size: 400% 100%;
-webkit-animation: rab-skeleton-loading 1.4s ease infinite;
animation: rab-skeleton-loading 1.4s ease infinite;
}
}
}
@-webkit-keyframes rab-skeleton-loading {
from {
background-position: 100% 50%;
}
to {
background-position: 0 50%;
}
}
@keyframes rab-skeleton-loading {
from {
background-position: 100% 50%;
}
to {
background-position: 0 50%;
}
}
================================================
FILE: src/styles/components/spin.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@spin-tag-name: r-spin;
@spin-prefix-cls: ~'@{css-prefix}spin';
@spin-dot-size-small: 12px;
@spin-dot-size: 20px;
@spin-dot-size-large: 32px;
@table-prefix-cls: ~'@{css-prefix}table';
@{spin-tag-name} {
color: @primary-color;
vertical-align: middle;
text-align: center;
&[size='small'] {
.@{spin-prefix-cls}-dot {
.square(@spin-dot-size-small);
}
}
&[size='large'] {
.@{spin-prefix-cls}-dot {
.square(@spin-dot-size-large);
}
}
&[fix] {
position: absolute;
top: 0;
left: 0;
z-index: @zindex-spin;
.square(100%);
background-color: rgba(255, 255, 255, 0.9);
.@{spin-prefix-cls} {
&-main {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
&-dot {
display: inline-block;
}
}
}
}
.@{spin-prefix-cls} {
&-dot {
position: relative;
display: block;
border-radius: 50%;
background-color: @primary-color;
.square(@spin-dot-size);
animation: ani-spin-bounce 1s 0s ease-in-out infinite;
}
&-fullscreen {
z-index: @zindex-spin-fullscreen;
&-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
&-text,
&-show-text &-dot {
display: none !important;
}
&-show-text &-text {
display: block !important;
}
&-text {
.rab-icon-loading1 {
font-size: 24px;
height: 8px;
}
}
}
.@{table-prefix-cls}-wrapper {
@{spin-tag-name}[fix] {
border: none;
}
}
.@{table-prefix-cls}-wrapper-with-border {
@{spin-tag-name}[fix] {
border: 1px solid @border-color-base;
border-top: 0;
border-left: 0;
}
}
@keyframes ani-spin-bounce {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
opacity: 0;
}
}
================================================
FILE: src/styles/components/steps.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@steps-tag-name: r-steps;
@step-tag-name: r-step;
@steps-prefix-cls: ~'@{css-prefix}steps';
@steps-wait-icon-color: #ccc;
@steps-wait-title-color: #999;
@steps-wait-description-color: @steps-wait-title-color;
@steps-wait-tail-color: @border-color-split;
@steps-title-color: #666;
@{steps-tag-name} {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
font-size: 0;
line-height: @line-height-base;
.@{steps-prefix-cls}-head,
.@{steps-prefix-cls}-main {
position: relative;
display: inline-block;
vertical-align: top;
}
.@{steps-prefix-cls}-head {
background: @white;
}
.@{steps-prefix-cls}-head-inner {
display: block;
.square(26px);
line-height: 24px;
margin-right: 8px;
text-align: center;
border: @border-width-base @border-style-base @steps-wait-icon-color;
border-radius: 50%;
font-size: @font-size-base;
transition: background-color @transition-time @ease-in-out;
> .@{steps-prefix-cls}-icon {
position: relative;
top: 3.5px;
&.rab-icon {
font-size: 24px;
&-ios-checkmark-empty,
&-ios-close-empty {
font-weight: bold;
}
}
}
}
.@{steps-prefix-cls}-main {
margin-top: 2.5px;
display: inline;
}
.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-title {
margin-top: 2.5px;
}
.@{steps-prefix-cls}-title {
display: inline-block;
margin-bottom: 4px;
padding-right: 10px;
font-size: @font-size-base;
font-weight: bold;
color: #666;
background: @white;
> a:first-child:last-child {
color: #666;
}
}
.@{steps-prefix-cls}-item-last {
.@{steps-prefix-cls}-title {
padding-right: 0;
width: 100%;
}
}
.@{steps-prefix-cls}-content {
font-size: @font-size-small;
color: #999;
}
.@{steps-prefix-cls}-tail {
width: 100%;
padding: 0 10px;
position: absolute;
left: 0;
top: 13px;
> i {
display: inline-block;
.size(100%, 1px);
vertical-align: top;
background: @border-color-split;
border-radius: 1px;
position: relative;
&:after {
content: '';
.size(0, 100%);
background: @border-color-split;
opacity: 0;
position: absolute;
top: 0;
}
}
}
&[size='small'] {
.@{steps-prefix-cls}-head-inner {
.square(18px);
line-height: 16px;
margin-right: 10px;
text-align: center;
border-radius: 50%;
font-size: @font-size-small;
> .@{steps-prefix-cls}-icon.rab-icon {
font-size: @font-size-large;
top: 1px;
}
}
.@{steps-prefix-cls}-main {
margin-top: 0;
}
.@{steps-prefix-cls}-title {
margin-bottom: 4px;
margin-top: 0;
color: #666;
font-size: @font-size-small;
font-weight: bold;
}
.@{steps-prefix-cls}-content {
font-size: @font-size-small;
color: #999;
padding-left: 30px;
}
.@{steps-prefix-cls}-tail {
top: 8px;
padding: 0 8px;
> i {
.size(100%, 1px);
border-radius: 1px;
}
}
}
&[size='small'] @{step-tag-name} .@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner,
@{step-tag-name} .@{steps-prefix-cls}-custom .@{steps-prefix-cls}-head-inner {
.square(inherit);
line-height: inherit;
border-radius: 0;
border: 0;
background: none;
}
}
@{step-tag-name} {
display: inline-block;
position: relative;
vertical-align: top;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
&:last-child {
-webkit-box-flex: 0;
-ms-flex: 0;
flex: none;
}
&[status='wait'] {
.@{steps-prefix-cls}-head-inner {
background-color: @white;
> .@{steps-prefix-cls}-icon,
span {
color: @steps-wait-icon-color;
}
}
.@{steps-prefix-cls}-title {
color: @steps-wait-title-color;
}
.@{steps-prefix-cls}-content {
color: @steps-wait-description-color;
}
.@{steps-prefix-cls}-tail > i {
background-color: @steps-wait-tail-color;
}
}
&[status='process'] {
.@{steps-prefix-cls}-head-inner {
border-color: @primary-color;
background-color: @primary-color;
> .@{steps-prefix-cls}-icon,
span {
color: @white;
}
}
.@{steps-prefix-cls}-title {
color: @steps-title-color;
}
.@{steps-prefix-cls}-content {
color: @steps-title-color;
}
.@{steps-prefix-cls}-tail > i {
background-color: @border-color-split;
}
}
&[status='finish'] {
.@{steps-prefix-cls}-head-inner {
background-color: @white;
border-color: @primary-color;
> .@{steps-prefix-cls}-icon,
span {
color: @primary-color;
}
}
.@{steps-prefix-cls}-tail > i::after {
width: 100%;
background: @primary-color;
transition: all @transition-time @ease-in-out;
opacity: 1;
}
.@{steps-prefix-cls}-title {
color: @steps-wait-title-color;
}
.@{steps-prefix-cls}-content {
color: @steps-wait-description-color;
}
}
&[status='error'] {
.@{steps-prefix-cls}-head-inner {
color: @error-color;
background-color: @white;
border-color: @error-color;
> .@{steps-prefix-cls}-icon {
color: @error-color;
}
}
.@{steps-prefix-cls}-title {
color: @error-color;
}
.@{steps-prefix-cls}-content {
color: @error-color;
}
.@{steps-prefix-cls}-tail > i {
background-color: @border-color-split;
}
}
&.@{steps-prefix-cls}-next-error {
.@{steps-prefix-cls}-tail > i,
.@{steps-prefix-cls}-tail > i:after {
background-color: @error-color;
}
}
&.@{steps-prefix-cls}-custom {
.@{steps-prefix-cls}-head-inner {
background: none;
border: 0;
.square(auto);
> .@{steps-prefix-cls}-icon {
font-size: 22px;
top: 4px;
.square(22px);
}
}
}
&[status='process'].@{steps-prefix-cls}-custom {
.@{steps-prefix-cls}-head-inner > .@{steps-prefix-cls}-icon {
color: @primary-color;
}
}
&:last-child .@{steps-prefix-cls}-tail {
display: none;
}
}
@{steps-tag-name} {
&[direction='vertical'] {
display: block;
@{step-tag-name} {
display: block;
overflow: visible;
}
.@{steps-prefix-cls}-tail {
position: absolute;
left: 13px;
top: 0;
.size(1px, 100%);
padding: 30px 0 4px 0;
> i {
.size(1px, 100%);
&:after {
.size(100%, 0);
}
}
}
&[status='finish'] {
.@{steps-prefix-cls}-tail > i:after {
height: 100%;
}
}
.@{steps-prefix-cls}-head {
float: left;
&-inner {
margin-right: 16px;
}
}
.@{steps-prefix-cls}-main {
min-height: 47px;
overflow: hidden;
display: block;
.@{steps-prefix-cls}-title {
line-height: 26px;
}
.@{steps-prefix-cls}-content {
padding-bottom: 12px;
padding-left: 0;
}
}
.@{steps-prefix-cls}-custom .@{steps-prefix-cls}-icon {
left: 4px;
}
&[size='small'] .@{steps-prefix-cls}-custom .@{steps-prefix-cls}-icon {
left: 0;
}
&[size='small'] {
.@{steps-prefix-cls}-tail {
position: absolute;
left: 9px;
top: 0;
padding: 22px 0 4px 0;
> i {
height: 100%;
}
}
.@{steps-prefix-cls}-title {
line-height: 18px;
}
}
}
&[direction='horizontal'] {
&.@{steps-prefix-cls}-hidden {
visibility: hidden;
}
.@{steps-prefix-cls}-content {
padding-left: 35px;
}
@{step-tag-name}:not(:first-child) .@{steps-prefix-cls}-head {
padding-left: 10px;
margin-left: -10px;
}
}
}
================================================
FILE: src/styles/components/switch.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@switch-tag-name: r-switch;
@switch-prefix-cls: ~'@{css-prefix}switch';
@{switch-tag-name} {
display: inline-block;
.size(44px,22px);
line-height: 20px;
vertical-align: middle;
border: 1px solid transparent;
border-radius: 100px;
background-color: fade(#000, 25%);
position: relative;
cursor: pointer;
user-select: none;
transition: all @transition-time @ease-in-out;
&:before {
content: '';
display: none;
.square(14px);
border-radius: 50%;
background-color: transparent;
position: absolute;
left: 3px;
top: 3px;
z-index: 1;
border: 1px solid @primary-color;
border-color: transparent transparent transparent @primary-color;
animation: rab-switch-loading 1s linear;
animation-iteration-count: infinite;
}
&::after {
content: '';
.square(18px);
border-radius: 18px;
background-color: @white;
position: absolute;
left: 1px;
top: 1px;
cursor: pointer;
transition: left @transition-time @ease-in-out, width @transition-time @ease-in-out;
box-shadow: 0 2px 4px 0 rgb(0 35 11 / 20%);
}
&:active:after {
width: 26px;
}
&:focus {
box-shadow: 0 0 0 2px fade(@primary-color, 20%);
outline: 0;
}
&:focus:hover {
box-shadow: none;
}
}
.@{switch-prefix-cls} {
&-loading {
opacity: 0.4;
&:before {
display: block;
}
}
&-inner {
color: @white;
font-size: @font-size-small;
position: absolute;
left: 23px;
i {
.square(12px);
text-align: center;
position: relative;
}
}
&-small {
.size(28px,16px);
line-height: 14px;
&:after {
.square(12px);
}
&:active:after {
width: 14px;
}
&:before {
.square(10px);
left: 2px;
top: 2px;
}
}
&-small&-checked:after {
left: 13px;
}
&-small&-checked:before {
left: 14px;
}
&-small:active&-checked:after {
left: 11px;
}
&-large {
width: 56px;
&:active:after {
width: 26px;
}
}
&-large:active:after {
width: 30px;
}
&-large&-checked:after {
left: 35px;
}
&-large&-checked:before {
left: 37px;
}
&-large:active&-checked:after {
left: 23px;
}
&-checked {
border-color: @primary-color;
background-color: @primary-color;
.@{switch-prefix-cls}-inner {
left: 7px;
}
&:after {
left: 23px;
}
&:before {
left: 25px;
}
&:active:after {
left: 15px;
}
}
&-disabled {
cursor: @cursor-disabled;
opacity: 0.4;
&:after {
background: @white;
cursor: not-allowed;
}
.@{switch-prefix-cls}-inner {
color: @white;
}
}
&-disabled&-checked {
border-color: @primary-color;
background-color: @primary-color;
opacity: 0.4;
&:after {
background: @white;
}
.@{switch-prefix-cls}-inner {
color: @white;
}
}
}
@keyframes rab-switch-loading {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
================================================
FILE: src/styles/components/tabs.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@import '../mixins/clearfix.less';
@tabs-tag-name: r-tabs;
@tab-pane: r-tab-pane;
@tabs-prefix-cls: ~"@{css-prefix}tabs";
@{tabs-tag-name} {
display: block;
position: relative;
overflow: hidden;
color: @text-color;
.clearfix();
}
.@{tabs-prefix-cls} {
&-bar {
outline: none;
border-bottom: @border-width-base @border-style-base @border-color-base;
margin-bottom: 16px;
}
&-nav-container {
margin-bottom: -1px;
line-height: @line-height-base;
font-size: @font-size-base;
white-space: nowrap;
position: relative;
.clearfix();
// 设置溢出滚动条样式
::-webkit-scrollbar {
height: 4px;
background-color: #fff;
}
::-webkit-scrollbar-thumb {
border-radius: 20px;
background-color: @border-color-base;
}
}
&-nav-container:focus {
outline: none;
.@{tabs-prefix-cls}-tab-focused {
border-color: @link-hover-color !important;
}
}
&-nav-container-scrolling {
padding-left: 32px;
padding-right: 32px;
}
&-nav-wrap {
position: relative;
overflow-x: auto;
overflow-y: hidden;
}
&-nav-right{
float: right;
margin-left: 5px;
}
&-nav-prev, &-nav-next{
width: 32px;
text-align: center;
position: absolute;
line-height: 32px;
cursor: pointer;
i{
font-size: 16px;
}
}
&-nav {
padding-left: 0;
margin: 0;
float: left;
list-style: none;
position: relative;
transition: transform 0.5s @ease-in-out;
&:before,
&:after {
display: table;
content: " ";
}
&:after {
clear: both;
}
.@{tabs-prefix-cls}-tab-disabled {
cursor: not-allowed !important;
color: #ccc !important;
}
.@{tabs-prefix-cls}-tab {
display: inline-block;
height: 100%;
padding: @padding-xs @padding-md;
margin-right: 16px;
cursor: pointer;
text-decoration: none;
position: relative;
transition: color .3s @ease-in-out;
&:hover {
color: @link-hover-color;
}
&:active {
color: @link-active-color;
}
.@{css-prefix-iconfont} {
.size(14px,14px);
margin-right: 8px;
}
}
.@{tabs-prefix-cls}-tab-active {
color: @primary-color;
&::after {
content: '';
.size(100%,2px);
background-color: @primary-color;
position: absolute;
left: 0;
bottom: 0;
z-index: 1;
}
}
}
&-mini &-nav-container {
font-size: @font-size-base;
}
&-mini &-tab {
margin-right: 0;
padding: @padding-xs @padding-md;
font-size: @font-size-small;
}
// card style
&-card > &-bar &-nav-container {
height: 32px;
}
&-card > &-bar &-tab {
margin: 0;
margin-right: 4px;
height: 31px;
padding: 5px @padding-md 4px;
border: @border-width-base @border-style-base @border-color-base;
border-bottom: 0;
border-radius: @btn-border-radius @btn-border-radius 0 0;
transition: all 0.3s @ease-in-out;
background: @background-color-base;
}
&-card > &-bar &-tab-active {
height: 32px;
padding-bottom: 5px;
background: @white;
transform: translateZ(0);
border-color: @border-color-base;
color: @primary-color;
&::after {
display: none;
}
}
&-card > &-bar &-nav-wrap {
margin-bottom: 0;
}
&-card > &-bar &-tab &-close {
.size(0,22px);
font-size: 22px;
margin-right: 0;
color: @legend-color;
text-align: right;
vertical-align: middle;
overflow: hidden;
position: relative;
top: 5px;
transform-origin: 100% 50%;
transition: all 0.3s @ease-in-out;
&:hover {
color: #444;
}
}
&-card > &-bar &-tab-active &-close,
&-card > &-bar &-tab:hover &-close {
width: 22px;
transform: translateZ(0);
margin-right: -6px;
}
}
.@{tabs-prefix-cls}-no-animation{
> .@{tabs-prefix-cls}-content {
transform: none!important;
> .@{tabs-prefix-cls}-tabpane-inactive {
display: none;
}
}
}
@{tabs-tag-name} {
.@{tabs-prefix-cls}-content-animated {
display: flex;
flex-direction: row;
will-change: transform;
transition: transform .3s @ease-in-out;
}
@{tab-pane}{
display: none;
flex-shrink: 0;
width: 100%;
transition: opacity .3s;
opacity: 1;
outline: none;
}
.@{tabs-prefix-cls}-tabpane-inactive {
opacity: 0;
height: 0;
}
}
================================================
FILE: src/styles/components/tag.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@import '../color/colors.less';
@tag-tag-name: r-tag;
@tag-prefix-cls: ~"@{css-prefix}tag";
@tag-close-prefix-cls: rab-icon-ios-close;
@{tag-tag-name} {
display: inline-block;
height: 22px;
line-height: 22px;
margin: 2px 4px 2px 0;
padding: 0 8px;
border: 1px solid @border-color-split;
border-radius: @btn-border-radius-small;
background: @background-color-base;
font-size: @tag-font-size;
vertical-align: middle;
opacity: 1;
overflow: hidden;
&:hover {
opacity: 0.85;
}
.@{tag-close-prefix-cls} {
.iconfont-size-under-12px(20px);
cursor: pointer;
margin-left: 2px;
color: #666;
opacity: 0.66;
position: relative;
top: -5px;
&:hover {
opacity: 1;
}
}
}
.@{tag-prefix-cls} {
&-size-large{
height: 32px;
line-height: 32px;
padding: 0 12px;
}
&-size-medium{
height: 28px;
line-height: 28px;
padding: 0 10px;
}
// for color and unchecked
@{tag-tag-name}:not(&-border):not(&-dot):not(&-checked){
background: transparent;
border: 0;
color: @text-color;
.@{tag-close-prefix-cls} {
color: @text-color !important;
}
}
&-color{
&-error{
color: @error-color !important;
border-color: @error-color;
}
&-success{
color: @success-color !important;
border-color: @success-color;
}
&-primary{
color: @link-color !important;
border-color: @link-color;
}
&-warning{
color: @warning-color !important;
border-color: @warning-color;
}
&-white{
color: rgb(255, 255, 255) !important;
}
}
&-dot{
height: 32px;
line-height: 32px;
border: 1px solid @border-color-split !important;
color: @text-color !important;
background: @white !important;
padding: 0 12px;
&-inner{
display: inline-block;
width: 12px;
height: 12px;
margin-right: 8px;
border-radius: 50%;
background: @border-color-split;
position: relative;
top: 1px;
}
.@{tag-close-prefix-cls} {
color: #666 !important;
margin-left: 12px !important;
}
}
&-border{
height: 24px;
line-height: 24px;
border: 1px solid @border-color-split;
color: @border-color-split;
background: @white !important;
position: relative;
.@{tag-close-prefix-cls} {
color: #666;
margin-left: 12px !important;
}
&:after{
content: "";
display: none;
width: 1px;
background: currentColor;
position: absolute;
top: 0;
bottom: 0;
right: 22px;
}
&.@{tag-prefix-cls}-closable {
&:after{
display: block;
}
.@{tag-close-prefix-cls} {
margin-left: 18px !important;
left: 4px;
top: -5px;
}
}
&.@{tag-prefix-cls}-primary {
color: @link-color !important;
border: 1px solid @link-color !important;
&:after{
background: @link-color;
}
.@{tag-close-prefix-cls}{
color: @link-color !important;
}
}
&.@{tag-prefix-cls}-success {
color: @success-color !important;
border: 1px solid @success-color !important;
&:after{
background: @success-color;
}
.@{tag-close-prefix-cls}{
color: @success-color !important;
}
}
&.@{tag-prefix-cls}-warning {
color: @warning-color !important;
border: 1px solid @warning-color !important;
&:after{
background: @warning-color;
}
.@{tag-close-prefix-cls}{
color: @warning-color !important;
}
}
&.@{tag-prefix-cls}-error {
color: @error-color !important;
border: 1px solid @error-color !important;
&:after{
background: @error-color;
}
.@{tag-close-prefix-cls}{
color: @error-color !important;
}
}
}
&-text {
a:first-child:last-child {
display: inline-block;
margin: 0 -8px;
padding: 0 8px;
}
color: @text-color;
}
&-primary,
&-success,
&-warning,
&-error {
border: 0;
&,
a,
a:hover,
.@{tag-close-prefix-cls},
.@{tag-close-prefix-cls}:hover {
color: @white;
}
}
&-primary,
&-primary&-dot &-dot-inner
{
background: @link-color;
}
&-success,
&-success&-dot &-dot-inner
{
background: @success-color;
}
&-warning,
&-warning&-dot &-dot-inner
{
background: @warning-color;
}
&-error,
&-error&-dot &-dot-inner
{
background: @error-color;
}
@colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple;
.make-color-classes(@i: length(@colors)) when (@i > 0) {
.make-color-classes(@i - 1);
@color: extract(@colors, @i);
@lightColor: "@{color}-1";
@lightBorderColor: "@{color}-3";
@darkColor: "@{color}-6";
&-@{color} {
line-height: 20px;
background: @@lightColor;
border-color: @@lightBorderColor;
.@{tag-prefix-cls}-text{
color: @@darkColor !important;
}
&.@{tag-prefix-cls}-dot{
line-height: 32px;
}
}
.rab-tag-size-large&-@{color} {
line-height: 30px;
}
.rab-tag-size-medium&-@{color} {
line-height: 26px;
}
}
.make-color-classes();
}
================================================
FILE: src/styles/components/time.less
================================================
@import '../custom.less';
@time-tag-name: r-time;
@time-prefix-cls: ~'@{css-prefix}time';
@{time-tag-name} {
display: inline-block;
}
.@{time-prefix-cls} {
&-with-hash {
cursor: pointer;
&:hover {
text-decoration: underline;
}
}
}
================================================
FILE: src/styles/components/timeline.less
================================================
@import '../custom.less';
@import '../mixins/size.less';
@timeline-tag-name: r-timeline;
@timeline-prefix-cls: ~'@{css-prefix}timeline';
@timeline-color: @border-color-split;
.@{timeline-prefix-cls} {
&-item {
&-tail {
height: 100%;
border-left: @border-width-base @border-style-base @timeline-color;
position: absolute;
left: 5px;
top: 0;
}
&-head {
.size(13px,13px);
background-color: @white;
border-radius: 50%;
border: 1px @border-style-base transparent;
position: absolute;
&-blue {
border-color: @primary-color;
color: @primary-color;
}
&-red {
border-color: @error-color;
color: @error-color;
}
&-green {
border-color: @success-color;
color: @success-color;
}
&-gray {
border-color: #ccc;
color: #ccc;
}
}
&-head-custom {
.size(40px,auto);
margin-top: 6px;
padding: 3px 0;
text-align: center;
line-height: @line-height-base;
border: 0;
border-radius: 0;
font-size: @font-size-base;
position: absolute;
left: -15px;
transform: translateY(-50%);
.rab-icon {
font-size: @font-size-large;
}
}
&-content {
padding: 1px 1px 10px 22px;
font-size: @font-size-base;
position: relative;
top: -10px;
}
}
}
@{timeline-tag-name} {
display: block;
margin: 0;
padding: 0;
&-item {
display: block;
margin: 0 !important;
padding: 0 0 @padding-sm 0;
position: relative;
&:last-child {
.@{timeline-prefix-cls}-item-tail {
display: none;
}
}
}
&[pending='true'] @{timeline-tag-name}-item:nth-last-of-type(2) {
.@{timeline-prefix-cls}-item-tail {
border-left: @border-width-base dotted @timeline-color;
}
.@{timeline-prefix-cls}-item-content {
min-height: 48px;
}
}
}
================================================
FILE: src/styles/components/tooltip.less
================================================
@import '../color/colors.less';
@import '../custom.less';
@import '../mixins/tooltip.less';
@import '../animation/zoom.less';
@tooltip-tag-name: r-tooltip;
@tooltip-prefix-cls: ~'@{css-prefix}tooltip';
@tooltip-arrow: ~'@{tooltip-prefix-cls}-arrow';
@tooltip-max-width: 250px;
@tooltip-arrow-width: 5px;
@tooltip-distance: @tooltip-arrow-width - 1 + 4;
@tooltip-arrow-width-light: 7px;
@tooltip-distance-light: @tooltip-arrow-width-light - 1 + 4;
@tooltip-arrow-outer-width-light: (@tooltip-arrow-width-light + 1);
@tooltip-arrow-color: hsla(0, 0%, 85%, 0.5);
@{tooltip-tag-name} {
display: inline-block;
.@{tooltip-prefix-cls} {
&-rel {
display: inline-block;
position: relative;
width: inherit;
}
&-popper {
.popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @tooltip-bg);
}
&-inner {
max-width: @tooltip-max-width;
min-height: 34px;
padding: 8px 12px;
color: @tooltip-color;
text-align: left;
text-decoration: none;
background-color: @tooltip-bg;
border-radius: @border-radius-base;
box-shadow: @shadow-base;
white-space: nowrap;
}
&-with-width {
white-space: pre-wrap;
text-align: justify;
word-wrap: break-word;
word-break: break-all;
}
&-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
}
}
.@{tooltip-prefix-cls} {
&-light&-popper {
.popper(@tooltip-arrow, @tooltip-arrow-width-light, @tooltip-distance-light, @tooltip-arrow-color);
&[x-placement^='top'] .@{tooltip-arrow}:after {
content: ' ';
bottom: 1px;
margin-left: -@tooltip-arrow-width-light;
border-bottom-width: 0;
border-top-width: @tooltip-arrow-width-light;
border-top-color: @white;
}
&[x-placement^='right'] .@{tooltip-arrow}:after {
content: ' ';
left: 1px;
bottom: -@tooltip-arrow-width-light;
border-left-width: 0;
border-right-width: @tooltip-arrow-width-light;
border-right-color: @white;
}
&[x-placement^='bottom'] .@{tooltip-arrow}:after {
content: ' ';
top: 1px;
margin-left: -@tooltip-arrow-width-light;
border-top-width: 0;
border-bottom-width: @tooltip-arrow-width-light;
border-bottom-color: @white;
}
&[x-placement^='left'] .@{tooltip-arrow}:after {
content: ' ';
right: 1px;
border-right-width: 0;
border-left-width: @tooltip-arrow-width-light;
border-left-color: @white;
bottom: -@tooltip-arrow-width-light;
}
}
&-light &-inner {
background-color: @white;
color: @text-color;
}
&-light {
.@{tooltip-arrow} {
&:after {
display: block;
width: 0;
height: 0;
position: absolute;
border-color: transparent;
border-style: solid;
content: '';
border-width: @tooltip-arrow-width-light;
}
border-width: @tooltip-arrow-outer-width-light;
}
}
}
// v2.0，新增多种可选的预设颜色
@preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue,
purple;
.generator-tooltip-preset-color(@i: length(@preset-colors)) when (@i > 0) {
.generator-tooltip-preset-color(@i - 1);
@color: extract(@preset-colors, @i);
@lightColor: '@{color}-6';
.@{tooltip-prefix-cls} {
&-popper&-@{color} {
.popper(@tooltip-arrow, @tooltip-arrow-width, @tooltip-distance, @@lightColor);
.@{tooltip-prefix-cls}-inner {
background-color: @@lightColor;
}
}
}
}
.generator-tooltip-preset-color();
================================================
FILE: src/styles/copyright.less
================================================
/*!
* RabbitUI
* Web: https://www.rabbitui.cn
* Github: https://github.com/niu-grandpa/rabbit-ui
* Author: 钟瑞鸿 (Ryan John)
*/
================================================
FILE: src/styles/custom.less
================================================
// Prefix
@css-prefix: rab-;
@css-prefix-iconfont: rab-icon;
// Color
@primary-color: #1890ff;
@info-color: #2db7f5;
@success-color: #52c41a;
@processing-color: @primary-color;
@warning-color: #faad14;
@error-color: #ff4d4f;
@normal-color: #e6ebf1;
@disabled-color: #c5c8ce;
@link-color: #1890ff;
@link-hover-color: tint(@link-color, 20%);
@link-active-color: shade(@link-color, 5%);
@selected-color: fade(@primary-color, 90%);
@tooltip-color: #fff;
@subsidiary-color: #808695;
@rate-star-color: #faad14;
@white: #fff;
@black: #141414;
// Base
@body-background: #fff;
@component-background: #fff;
@font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
sans-serif, Apple Color, Segoe UI, Segoe UI Symbol, Noto Color;
@code-family: Consolas, Menlo, Courier, monospace;
@title-color: #2c3e50;
@text-color: #55585e;
@text-color-secondary: fade(@black, 45%);
@heading-color: fade(#000, 85%);
@heading-color-dark: fade(@white, 100%);
@font-size-base: 14px;
@font-size-small: 12px;
@font-size-large: @font-size-base + 2px;
@line-height-base: 1.5;
@line-height-computed: floor((@font-size-base * @line-height-base));
@border-radius-base: 2px;
@cursor-disabled: not-allowed;
// vertical paddings
@padding-lg: 24px; // containers
@padding-md: 16px; // small containers and buttons
@padding-sm: 12px; // Form controls and items
@padding-xs: 8px; // small items
// Border color
@border-color-base: #dcdee2; // outside
@border-color-split: #e8eaec; // inside
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border
// Background color
@background-color-base: #fafafa; // base
@background-color-select-hover: @input-disabled-bg;
@tooltip-bg: rgba(0, 0, 0, 0.75);
@head-bg: #f9fafc;
@table-thead-bg: #f8f8f9;
@table-td-stripe-bg: #f8f8f9;
@table-td-hover-bg: #ebf7ff;
@table-td-highlight-bg: #ebf7ff;
@menu-dark-title: #55585e;
@menu-dark-active-bg: #363e4f;
@menu-dark-subsidiary-color: rgba(255, 255, 255, 0.7);
@menu-dark-group-title-color: rgba(255, 255, 255, 0.36);
@date-picker-cell-hover-bg: #e1f0fe;
// Shadow
@shadow-color: rgba(0, 0, 0, 0.15);
@shadow-base: @shadow-down;
@shadow-card: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
@shadow-up: 0 -1px 6px @shadow-color;
@shadow-down: 0 4px 12px @shadow-color;
@shadow-left: -1px 0 6px @shadow-color;
@shadow-right: 1px 0 6px @shadow-color;
// Button
@btn-height-base: 32px;
@btn-height-large: 40px;
@btn-height-small: 24px;
@btn-padding-base: 0 @padding-md - 1px;
@btn-padding-large: @btn-padding-base;
@btn-padding-small: 0 @padding-xs - 1px;
@btn-font-weight: normal;
@btn-padding-base-icon: 5px 15px 6px;
@btn-padding-large-icon: 6px 15px 6px 15px;
@btn-padding-small-icon: 1px 7px 2px;
@btn-font-size: @font-size-base;
@btn-font-size-large: @font-size-large;
@btn-font-size-small: @font-size-base;
@btn-border-radius: 2px;
@btn-border-radius-small: 1px;
@btn-group-border: hsla(0, 0%, 100%, 0.5);
@btn-disable-color: #c5c8ce;
@btn-disable-bg: @background-color-base;
@btn-disable-border: @border-color-base;
@btn-default-color: @text-color;
@btn-default-bg: #fff;
@btn-default-border: @border-color-base;
@btn-primary-color: #fff;
@btn-primary-bg: @primary-color;
@btn-ghost-color: @text-color;
@btn-ghost-bg: #fff;
@btn-ghost-border: @border-color-base;
@btn-circle-size: @btn-height-base;
@btn-circle-size-large: @btn-height-large;
@btn-circle-size-small: @btn-height-small;
@btn-square-size: @btn-height-base;
@btn-square-size-large: @btn-height-large;
@btn-square-size-small: @btn-height-small;
// Layout and Grid
@grid-columns: 24;
@grid-gutter-width: 0;
@layout-body-background: #f5f7f9;
@layout-header-background: #55585e;
@layout-header-height: 64px;
@layout-header-padding: 0 50px;
@layout-footer-padding: 24px 50px;
@layout-footer-background: @layout-body-background;
@layout-sider-background: @layout-header-background;
@layout-trigger-height: 48px;
@layout-trigger-color: #fff;
@layout-zero-trigger-width: 36px;
@layout-zero-trigger-height: 42px;
// Legend
@legend-color: #999;
// Input
@input-height-base: 32px;
@input-height-large: 40px;
@input-height-small: 24px;
@input-padding-horizontal: 7px;
@input-padding-vertical-base: 4px;
@input-padding-vertical-small: 1px;
@input-padding-vertical-large: 6px;
@input-placeholder-color: @btn-disable-color;
@input-color: @text-color;
@input-border-color: @border-color-base;
@input-bg: #fff;
@input-group-bg: #f8f8f9;
@input-hover-border-color: @primary-color;
@input-focus-border-color: @primary-color;
@input-disabled-bg: #f3f3f3;
// Tag
@tag-font-size: 12px;
// Media queries breakpoints
// Extra small screen / phone
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-xs-max: (@screen-xs-min - 1);
// Small screen / tablet
@screen-sm: 576px;
@screen-sm-min: @screen-sm;
@screen-sm-max: (@screen-sm-min - 1);
// Medium screen / desktop
@screen-md: 768px;
@screen-md-min: @screen-md;
@screen-md-max: (@screen-md-min - 1);
// Large screen / wide desktop
@screen-lg: 992px;
@screen-lg-min: @screen-lg;
@screen-lg-max: (@screen-lg-min - 1);
// Extra large screen / full hd
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;
@screen-xl-max: (@screen-xl-min - 1);
// Extra extra large screen / large descktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;
@screen-xxl-max: (@screen-xxl-min - 1);
// Z-index
@zindex-spin: 8;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-select: 900;
@zindex-modal: 1000;
@zindex-drawer: 1000;
@zindex-message: 1010;
@zindex-notification: 1010;
@zindex-tooltip: 1060;
@zindex-transfer: 1060;
@zindex-loading-bar: 2000;
@zindex-spin-fullscreen: 2010;
// Animation
@animation-time: 0.3s;
@animation-time-quick: 0.15s;
@transition-time: 0.2s;
@ease-in-out: ease-in-out;
// Slider
@slider-color: tint(@primary-color, 20%);
@slider-height: 4px;
@slider-margin: 16px 0;
@slider-button-wrap-size: 18px;
@slider-button-wrap-offset: -5px;
@slider-disabled-color: #ccc;
// Avatar
@avatar-size-base: 32px;
@avatar-size-lg: 40px;
@avatar-size-sm: 24px;
@avatar-font-size-base: 18px;
@avatar-font-size-lg: 24px;
@avatar-font-size-sm: 14px;
@avatar-bg: #ccc;
@avatar-color: #fff;
@avatar-border-radius: @border-radius-base;
// Anchor
@anchor-border-width: 2px;
// List
@list-header-background: transparent;
@list-footer-background: transparent;
@list-empty-text-padding: @padding-md;
@list-item-padding: @padding-sm 0;
@list-item-meta-margin-bottom: @padding-md;
@list-item-meta-avatar-margin-right: @padding-md;
@list-item-meta-title-margin-bottom: @padding-sm;
================================================
FILE: src/styles/index.less
================================================
@import './copyright.less';
@import './custom';
@import './mixins/index';
@import './common/index';
@import './animation/index';
@import './components/index';
================================================
FILE: src/styles/mixins/button.less
================================================
.button-size(@height; @padding; @font-size; @border-radius) {
height: @height;
padding: @padding;
font-size: @font-size;
border-radius: @border-radius;
}
.button-color(@color; @background; @border) {
color: @color;
background-color: @background;
border-color: @border;
>a:only-child {
color: currentColor;
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: transparent;
}
}
}
.button-variant(@color; @background; @border) {
.button-color(@color; @background; @border);
&:hover //&:focus
{
.button-color(tint(@color, 20%); tint(@background, 20%); tint(@border, 20%));
}
&:active,
&.active {
.button-color(shade(@color, 5%); shade(@background, 5%); shade(@background, 5%));
}
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
.button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
}
}
}
.button-group-base(@btnClassName) {
position: relative;
display: inline-block;
vertical-align: middle;
>.@{btnClassName} {
position: relative;
float: left;
&:hover,
//&:focus,
&:active,
&.active {
z-index: 2;
}
}
&-circle .@{btnClassName} {
border-radius: @btn-circle-size;
}
// size
&-lg&-circle .@{btnClassName} {
border-radius: @btn-circle-size-large;
}
&-lg {
&>.@{btnClassName} {
.button-size(@btn-height-large; @btn-padding-large; @btn-font-size-large; @btn-border-radius);
}
}
&-sm&-circle .@{btnClassName} {
border-radius: @btn-circle-size-small;
}
&-sm {
&>.@{btnClassName} {
.button-size(@btn-height-small; @btn-padding-small; @btn-font-size; @btn-border-radius-small);
>.@{css-prefix-iconfont} {
font-size: @btn-font-size;
}
}
}
&-sm .@{btnClassName}-icon-only {
.square(@btn-height-small);
padding: 0;
}
&-lg .@{btnClassName}-icon-only {
.square(@btn-height-large);
padding: 0;
}
}
.button-group-vertical-base(@btnClassName) {
display: inline-block;
vertical-align: middle;
>.@{btnClassName} {
display: block;
width: 100%;
max-width: 100%;
float: none;
min-width: @btn-height-base;
}
&.@{btnClassName}-group-small>.@{btnClassName} {
min-width: @btn-height-small;
}
&.@{btnClassName}-group-large>.@{btnClassName} {
min-width: @btn-height-large;
}
}
// square button: the content only contains icon
.btn-square(@btnClassName) {
.square(@btn-square-size);
.button-size(@btn-square-size; 0; @font-size-base + 2px; @btn-border-radius);
&.@{btnClassName}-large {
.square(@btn-square-size-large);
.button-size(@btn-square-size-large; 0; @btn-font-size-large + 2px; @btn-border-radius);
}
&.@{btnClassName}-small {
.square(@btn-square-size-small);
.button-size(@btn-square-size-small; 0; @font-size-base; @btn-border-radius);
}
}
.btn() {
display: inline-block;
margin-bottom: 0;
font-weight: @btn-font-weight;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
line-height: @line-height-base;
user-select: none;
.button-size(@btn-height-base; @btn-padding-base; @btn-font-size; @btn-border-radius);
transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear, box-shadow @transition-time linear;
>.@{css-prefix-iconfont} {
line-height: 1.5;
margin: 0 4px;
height: 26px;
}
&-icon-only&-circle>.@{css-prefix-iconfont} {
vertical-align: baseline;
}
>span,
>i {
display: inline-block;
vertical-align: initial;
}
&,
&:active,
&:focus {
outline: 0;
}
&:not([disabled]):hover {
text-decoration: none;
}
&:not([disabled]):active {
outline: 0;
}
&.disabled,
&[disabled] {
cursor: @cursor-disabled;
>* {
pointer-events: none;
}
}
&-lg {
.button-size(@btn-height-large; @btn-padding-large; @btn-font-size-large; @btn-border-radius);
}
&-sm {
.button-size(@btn-height-small; @btn-padding-small; @btn-font-size; @btn-border-radius-small);
}
&-icon-only {
.btn-square(@btn-prefix-cls);
}
}
// Default
.btn-default() {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
&:hover //&:focus
{
.button-color(tint(@primary-color, 20%); white; tint(@primary-color, 20%));
}
&:active,
&.active {
.button-color(shade(@primary-color, 5%); white; shade(@primary-color, 5%));
}
.active-btn-color(@primary-color);
}
// Primary
.btn-primary() {
.button-variant(@btn-primary-color; @btn-primary-bg; @primary-color);
&:hover,
//&:focus,
&:active,
&.active {
color: @btn-primary-color;
}
.active-btn-color(@primary-color);
}
// Ghost
.btn-ghost() {
.button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
&:hover //&:focus
{
.button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
}
&:active,
&.active {
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
}
.active-btn-color(@primary-color);
}
// Dashed
.btn-dashed() {
.button-variant(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
border-style: dashed;
&:hover //&:focus
{
.button-color(tint(@primary-color, 20%); @btn-ghost-bg; tint(@primary-color, 20%));
}
&:active,
&.active {
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; shade(@primary-color, 5%));
}
.active-btn-color(@primary-color);
}
// Text
.btn-text() {
.button-variant(@btn-ghost-color, transparent, transparent);
// for disabled
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
.button-color(@btn-disable-color; @btn-ghost-bg; transparent);
}
}
&:hover //&:focus
{
.button-color(tint(@primary-color, 20%); @btn-ghost-bg; transparent);
}
&:active,
&.active {
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; transparent);
}
.active-btn-color(@primary-color);
}
// Color
// for tabindex
.active-btn-color(@color) {
&:focus {
box-shadow: 0 0 0 2px fade(@color, 20%);
}
}
.btn-color(@color) {
.button-variant(@btn-primary-color; @color; @color);
&:hover,
//&:focus,
&:active,
&.active {
color: @btn-primary-color;
}
.active-btn-color(@color);
}
// Circle for Icon
.btn-circle(@btnClassName: ivu-btn) {
border-radius: @btn-circle-size;
&.@{btnClassName}-large {
border-radius: @btn-circle-size-large;
}
&.@{btnClassName}-size {
border-radius: @btn-circle-size-small;
}
&.@{btnClassName}-icon-only {
.square(@btn-circle-size);
.button-size(@btn-height-base; 0; @font-size-base + 2; 50%);
&.@{btnClassName}-large {
.square(@btn-circle-size-large);
.button-size(@btn-height-large; 0; @btn-font-size-large + 2; 50%);
}
&.@{btnClassName}-small {
.square(@btn-circle-size-small);
.button-size(@btn-height-small; 0; @font-size-base; 50%);
}
}
}
// Group
.btn-group(@btnClassName: ivu-btn) {
.button-group-base(@btnClassName);
.@{btnClassName}+.@{btnClassName},
.@{btnClassName}+&,
&+.@{btnClassName},
&+& {
margin-left: -1px;
}
.@{btnClassName}:not(:first-child):not(:last-child) {
border-radius: 0;
}
&:not(&-vertical)>.@{btnClassName}:first-child {
margin-left: 0;
&:not(:last-child) {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}
&:not(&-vertical)>.@{btnClassName}:last-child:not(:first-child) {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
&>& {
float: left;
}
&>&:not(:first-child):not(:last-child)>.@{btnClassName} {
border-radius: 0;
}
&:not(&-vertical)>&:first-child:not(:last-child) {
>.@{btnClassName}:last-child {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
padding-right: 8px;
}
}
&:not(&-vertical)>&:last-child:not(:first-child)>.@{btnClassName}:first-child {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
padding-left: 8px;
}
}
.btn-group-vertical(@btnClassName: ivu-btn) {
.button-group-vertical-base(@btnClassName);
.@{btnClassName}+.@{btnClassName},
.@{btnClassName}+&,
&+.@{btnClassName},
&+& {
margin-top: -1px;
margin-left: 0px;
}
>.@{btnClassName}:first-child {
margin-top: 0;
&:not(:last-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
>.@{btnClassName}:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
&>&:first-child:not(:last-child) {
>.@{btnClassName}:last-child {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding-bottom: 8px;
}
}
&>&:last-child:not(:first-child)>.@{btnClassName}:first-child {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
padding-top: 8px;
}
}
================================================
FILE: src/styles/mixins/caret.less
================================================
// sortable
.sortable() {
display: inline-block;
width: 14px;
height: 12px;
margin-top: -1px;
vertical-align: middle;
overflow: hidden;
cursor: pointer;
position: relative;
i {
display: block;
height: 6px;
line-height: 6px;
overflow: hidden;
position: absolute;
color: @btn-disable-color;
transition: color @transition-time @ease-in-out;
font-size: @font-size-large;
&:hover{
color: inherit;
}
&.on{
color: @primary-color;
}
&:first-child{
top: 0;
}
&:last-child{
bottom: 0;
}
}
}
================================================
FILE: src/styles/mixins/checkbox.less
================================================
.checkbox-size() {
&[size='large'] {
font-size: @font-size-large;
.@{checkbox-inner-prefix-cls} {
.square(18px);
&:after {
.size(5px, 9px);
}
}
&.@{checkbox-prefix-cls}-checked {
.@{checkbox-inner-prefix-cls} {
&:after {
width: 6px;
height: 10px;
}
}
}
.@{checkbox-prefix-cls}-indeterminate {
.@{checkbox-inner-prefix-cls}:after {
width: 12px;
top: 7px;
}
}
}
&[size='small'] {
font-size: @font-size-base;
.@{checkbox-inner-prefix-cls} {
.square(14px);
&:after {
top: 0;
left: 3px;
}
}
&.@{checkbox-prefix-cls}-checked {
.@{checkbox-inner-prefix-cls} {
&:after {
top: 1px;
left: 4px;
}
}
}
.@{checkbox-prefix-cls}-indeterminate {
.@{checkbox-inner-prefix-cls}:after {
width: 8px;
top: 5px;
}
}
}
}
.size-with-border(@size, @height, @px, @padding) {
@{checkbox-tag-name}[size=~'"@{size}"'][type='border'],
@{checkbox-group-tag}[size=~'"@{size}"'] @{checkbox-tag-name}[type='border'] {
height: @height;
line-height: @height - @px;
padding: @padding;
}
}
================================================
FILE: src/styles/mixins/clearfix.less
================================================
.clearfix() {
zoom: 1;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
}
================================================
FILE: src/styles/mixins/close.less
================================================
.close-base(@top: 0, @icon-font-size: 22px) {
font-size: @icon-font-size;
color: @legend-color;
transition: color @transition-time ease;
position: relative;
top: @top;
&:hover {
color: #666;
}
}
================================================
FILE: src/styles/mixins/common.less
================================================
.placeholder(@color: @input-placeholder-color) {
// Firefox
&::-moz-placeholder {
color: @color;
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
}
// Internet Explorer 10+
&:-ms-input-placeholder {
color: @color;
}
// Safari and Chrome
&::-webkit-input-placeholder {
color: @color;
}
}
// for select and input like component's arrow
.inner-arrow() {
position: absolute;
top: 50%;
right: 8px;
line-height: @line-height-base;
transform: translateY(-50%);
font-size: @font-size-base;
color: @subsidiary-color;
transition: all @transition-time @ease-in-out;
}
.reset-component() {
font-family: @font-family;
font-size: @font-size-base;
line-height: @line-height-base;
color: @text-color;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
================================================
FILE: src/styles/mixins/content.less
================================================
@import './close.less';
@icon-prefix-cls: ~'@{css-prefix}icon';
.content-header() {
border-bottom: 1px solid @border-color-split;
padding: 14px 16px;
line-height: @line-height-base;
font-size: @font-size-large;
color: @title-color;
p,
&-inner {
display: inline-block;
width: 100%;
height: 20px;
line-height: 20px;
font-size: @font-size-large;
color: @title-color;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.content-close(@top: 0, @icon-font-size: 22px) {
font-size: @font-size-small;
position: absolute;
right: 8px;
top: 8px;
overflow: hidden;
cursor: pointer;
.@{icon-prefix-cls}-ios-close {
.close-base(@top, @icon-font-size);
}
}
================================================
FILE: src/styles/mixins/index.less
================================================
@import 'common';
@import 'clearfix';
@import 'button';
@import 'layout';
@import 'size';
@import 'loading';
@import 'close';
@import 'input';
@import 'mask';
@import 'content'; // card、modal
@import 'tooltip';
@import 'select';
@import 'caret';
================================================
FILE: src/styles/mixins/input.less
================================================
.hover(@color: @input-hover-border-color) {
border-color: tint(@color, 20%);
}
.hover-error() {
border-color: @error-color;
}
.active(@color: @input-hover-border-color) {
border-color: tint(@color, 20%);
outline: 0;
box-shadow: 0 0 0 2px fade(@color, 20%);
}
.active-error() {
border-color: @error-color;
outline: 0;
box-shadow: 0 0 0 2px fade(@error-color, 20%);
}
.disabled() {
background-color: @input-disabled-bg;
opacity: 1;
cursor: @cursor-disabled;
color: #ccc;
&:hover {
.hover(@input-border-color);
}
}
.input-large() {
font-size: @font-size-large;
padding: @input-padding-vertical-large @input-padding-horizontal;
height: @input-height-large;
}
.input-small() {
padding: @input-padding-vertical-small @input-padding-horizontal;
height: @input-height-small;
border-radius: @btn-border-radius-small;
}
.input() {
display: inline-block;
width: 100%;
height: @input-height-base;
line-height: @line-height-base;
padding: @input-padding-vertical-base @input-padding-horizontal;
font-size: @font-size-base;
border: 1px solid @input-border-color;
border-radius: @btn-border-radius;
color: @input-color;
background-color: @input-bg;
background-image: none;
position: relative;
cursor: text;
.placeholder();
transition: border @transition-time @ease-in-out, background @transition-time @ease-in-out, box-shadow @transition-time @ease-in-out;
&:hover {
.hover();
}
&:focus {
.active();
}
&[disabled],
fieldset[disabled] & {
.disabled();
}
// Reset height for textarea
textarea& {
max-width: 100%;
height: auto;
min-height: @input-height-base;
vertical-align: bottom;
font-size: @font-size-base;
}
// Size
&-large {
.input-large();
}
&-small {
.input-small();
}
}
.input-error() {
border: 1px solid @error-color;
&:hover {
.hover-error();
}
&:focus {
.active-error();
}
}
.input-group(@inputClass) {
display: table;
width: 100%;
border-collapse: separate;
position: relative;
font-size: @font-size-base;
.ivu-form-inline &{
top: 1px; // fixed when using in form inline,
}
&-large{
font-size: @font-size-large;
}
// Undo padding and float of grid classes
&[class*="col-"] {
float: none;
padding-left: 0;
padding-right: 0;
}
> [class*="col-"] {
padding-right: 8px;
}
&-prepend,
&-append,
> .@{inputClass} {
display: table-cell;
//&:not(:first-child):not(:last-child) {
// border-radius: 0;
//}
}
&-with-prepend .@{inputClass},
&-with-prepend&-small .@{inputClass}
{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&-with-append .@{inputClass},
&-with-append&-small .@{inputClass}
{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&-prepend .@{css-prefix}btn,
&-append .@{css-prefix}btn
{
border-color: transparent;
background-color: transparent;
color: inherit;
margin: -(@input-padding-vertical-base + 2) (-@input-padding-horizontal);
}
&-prepend,
&-append
{
width: 1px; // To make addon/wrap as small as possible
white-space: nowrap;
vertical-align: middle;
}
.@{inputClass} {
width: 100%;
float: left;
margin-bottom: 0;
position: relative;
z-index: 2;
}
&-prepend,
&-append
{
padding: @input-padding-vertical-base @input-padding-horizontal;
font-size: inherit;
font-weight: normal;
line-height: 1;
color: @input-color;
text-align: center;
background-color: @input-group-bg;
border: 1px solid @input-border-color;
border-radius: @btn-border-radius;
// Reset Select's style in addon
.@{css-prefix}select {
margin: -(@input-padding-vertical-base + 1) (-@input-padding-horizontal); // lesshint spaceAroundOperator: false
&-selection {
background-color: inherit;
margin: -1px;
border: 1px solid transparent;
}
&-visible .@{css-prefix}select-selection{
box-shadow: none;
}
}
}
// Reset rounded corners
> span > .@{inputClass}:first-child,
> .@{inputClass}:first-child,
&-prepend
{
border-bottom-right-radius: 0 !important;
border-top-right-radius: 0 !important;
// Reset Select's style in addon
.@{css-prefix}-select .@{css-prefix}-select-selection {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
}
&-prepend {
border-right: 0;
}
&-append {
border-left: 0;
}
> .@{inputClass}:last-child,
&-append
{
border-bottom-left-radius: 0 !important;
border-top-left-radius: 0 !important;
// Reset Select's style in addon
.@{css-prefix}-select .@{css-prefix}-select-selection {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
}
// Sizing options
&-large .@{inputClass},
&-large > &-prepend,
&-large > &-append
{
.input-large();
}
&-small .@{inputClass},
&-small > &-prepend,
&-small > &-append
{
.input-small();
}
}
.input-group-error{
&-prepend,
&-append
{
background-color: #fff;
border: 1px solid @error-color;
.@{css-prefix}select {
&-selection {
background-color: inherit;
border: 1px solid transparent;
}
}
}
&-prepend {
border-right: 0;
}
&-append {
border-left: 0;
}
}
================================================
FILE: src/styles/mixins/layout.less
================================================
@row-prefix-cls: ~'@{css-prefix}row';
@col-prefix-cls: ~'@{css-prefix}col';
.make-row(@gutter: @grid-gutter-width) {
position: relative;
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
height: auto;
.clearfix();
}
.float-grid-columns(@class) {
.col(@index) {
// initial
@item: ~'.@{col-prefix-cls}-span@{class}-@{index}';
.col((@index + 1), @item);
}
.col(@index, @list) when (@index =< @grid-columns) {
// general
@item: ~'.@{col-prefix-cls}-span@{class}-@{index}';
.col((@index + 1), ~'@{list}, @{item}');
}
.col(@index, @list) when (@index > @grid-columns) {
// terminal
@{list} {
float: left;
flex: 0 0 auto;
}
}
.col(1); // kickstart it
}
.loop-grid-columns(@index, @class) when (@index > 0) {
.@{col-prefix-cls}-span@{class}-@{index} {
display: block;
width: percentage((@index / @grid-columns));
}
.@{col-prefix-cls}@{class}-push-@{index} {
left: percentage((@index / @grid-columns));
}
.@{col-prefix-cls}@{class}-pull-@{index} {
right: percentage((@index / @grid-columns));
}
.@{col-prefix-cls}@{class}-offset-@{index} {
margin-left: percentage((@index / @grid-columns));
}
.@{col-prefix-cls}@{class}-order-@{index} {
order: @index;
}
.loop-grid-columns((@index - 1), @class);
}
.loop-grid-columns(@index, @class) when (@index = 0) {
.@{col-prefix-cls}-span@{class}-@{index} {
display: none;
}
.@{col-prefix-cls}@{class}-push-@{index} {
left: auto;
}
.@{col-prefix-cls}@{class}-pull-@{index} {
right: auto;
}
.@{col-prefix-cls}@{class}-offset-@{index} {
margin-left: 0;
}
.@{col-prefix-cls}@{class}-order-@{index} {
order: 0;
}
}
.make-grid(@class: ~'') {
.float-grid-columns(@class);
.loop-grid-columns(@grid-columns, @class);
}
================================================
FILE: src/styles/mixins/loading.less
================================================
// Loading for loop
.rab-load-loop {
-webkit-animation: ani-load-loop 1s linear infinite;
animation: ani-load-loop 1s linear infinite;
}
@-webkit-keyframes ani-load-loop {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@keyframes ani-load-loop {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
================================================
FILE: src/styles/mixins/mask.less
================================================
.mask() {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(45, 45, 45, 0.55);
height: 100%;
z-index: @zindex-modal;
&-hidden {
display: none;
}
}
================================================
FILE: src/styles/mixins/select.less
================================================
.select-item(@size-class, @item-tag , @item-class) {
@{item-tag} {
display: block;
margin: 0;
line-height: normal;
padding: 7px 16px;
clear: both;
color: @text-color;
font-size: @font-size-base !important;
white-space: nowrap;
cursor: pointer;
transition: all 0.3s @ease-in-out;
&:hover {
background: @background-color-select-hover;
}
&[disabled] {
color: @btn-disable-color;
cursor: @cursor-disabled;
&:hover {
color: @btn-disable-color;
background-color: #fff;
cursor: @cursor-disabled;
}
}
&[selected],
&[selected]:hover {
color: @primary-color;
background: fade(@selected-color, 10%);
}
&[selected].@{item-class}-focus {
background: shade(@selected-color, 10%);
}
&[divided] {
margin-top: 5px;
border-top: 1px solid @border-color-split;
&:before {
content: '';
height: 5px;
display: block;
margin: 0 -16px;
background-color: #fff;
position: relative;
top: -7px;
}
}
}
.@{item-class} {
&-focus {
background: @background-color-select-hover;
}
&-enter {
color: @primary-color;
font-weight: bold;
float: right;
}
}
.@{size-class}-large @{item-tag} {
padding: 7px 16px 8px;
font-size: @font-size-base !important;
}
@-moz-document url-prefix() {
@{item-tag} {
white-space: normal;
}
}
}
================================================
FILE: src/styles/mixins/size.less
================================================
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// fix chrome 12px bug, support ie
.iconfont-size-under-12px(@size, @rotate: 0deg) {
display: inline-block;
@font-scale: unit((@size / @font-size-base));
font-size: @font-size-base;
font-size: ~'@{size} \9'; // ie8-9
transform: scale(@font-scale) rotate(@rotate);
:root & {
font-size: @font-size-base; // reset ie9 and above
}
}
================================================
FILE: src/styles/mixins/tooltip.less
================================================
.popper(@arrow, @arrow-width, @arrow-distance, @bg){
display: block;
visibility: visible;
font-size: @font-size-base;
line-height: @line-height-base;
position: absolute;
z-index: @zindex-tooltip;
&[x-placement^="top"] {
padding: @arrow-width 0 @arrow-distance 0;
}
&[x-placement^="right"] {
padding: 0 @arrow-width 0 @arrow-distance;
}
&[x-placement^="bottom"] {
padding: @arrow-distance 0 @arrow-width 0;
}
&[x-placement^="left"] {
padding: 0 @arrow-distance 0 @arrow-width;
}
&[x-placement^="top"] .@{arrow} {
bottom: @arrow-distance - @arrow-width;
border-width: @arrow-width @arrow-width 0;
border-top-color: @bg;
}
&[x-placement="top"] .@{arrow} {
left: 50%;
margin-left: -@arrow-width;
}
&[x-placement="top-start"] .@{arrow} {
left: 16px;
}
&[x-placement="top-end"] .@{arrow} {
right: 16px;
}
&[x-placement^="right"] .@{arrow} {
left: @arrow-distance - @arrow-width;
border-width: @arrow-width @arrow-width @arrow-width 0;
border-right-color: @bg;
}
&[x-placement="right"] .@{arrow} {
top: 50%;
margin-top: -@arrow-width;
}
&[x-placement="right-start"] .@{arrow} {
top: 8px;
}
&[x-placement="right-end"] .@{arrow} {
bottom: 8px;
}
&[x-placement^="left"] .@{arrow} {
right: @arrow-distance - @arrow-width;
border-width: @arrow-width 0 @arrow-width @arrow-width;
border-left-color: @bg;
}
&[x-placement="left"] .@{arrow} {
top: 50%;
margin-top: -@arrow-width;
}
&[x-placement="left-start"] .@{arrow} {
top: 8px;
}
&[x-placement="left-end"] .@{arrow} {
bottom: 8px;
}
&[x-placement^="bottom"] .@{arrow} {
top: @arrow-distance - @arrow-width;
border-width: 0 @arrow-width @arrow-width;
border-bottom-color: @bg;
}
&[x-placement="bottom"] .@{arrow} {
left: 50%;
margin-left: -@arrow-width;
}
&[x-placement="bottom-start"] .@{arrow} {
left: 16px;
}
&[x-placement="bottom-end"] .@{arrow} {
right: 16px;
}
}
================================================
FILE: src/utils/check-type.ts
================================================
/* eslint-disable @typescript-eslint/no-non-null-assertion */
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import warn from '../mixins/warn';
const typeOf = (r: any): string => {
const s = Object.prototype.toString.call(r);
return s.match(/\[object (.*?)\]/)![1].toLowerCase();
};
const errMsg = (right: string, wrong: string): boolean => {
warn(
`The expected type accepted is ${right}, but the error type currently in use is --> ${wrong}`
);
return false;
};
export const isUndef = (r: any): boolean => typeof r === 'undefined';
export const isStr = (r: any): boolean =>
typeof r === 'string' ? true : errMsg('string', typeOf(r));
export const isNum = (r: any): boolean =>
typeof r === 'number' ? true : errMsg('number', typeOf(r));
export const isBol = (r: any): boolean =>
typeof r === 'boolean' ? true : errMsg('boolean', typeOf(r));
/**
*
* @param r 函数名
* @param param 回调附带的参数。有多个参数时使用数组传递
*/
export const isFn = (r: any, param?: [...any] | any): any =>
typeof r === 'function' ? r(param) : errMsg('function', typeOf(r));
export const isObj = (r: any): boolean =>
r.constructor === Object ? true : errMsg('object', typeOf(r));
export const isArr = (r: any): boolean =>
r.constructor === Array ? true : errMsg('array', typeOf(r));
================================================
FILE: src/utils/destroy.ts
================================================
import { warn, CssTransition } from '../mixins';
interface Options {
key?: string | number;
prefixKey?: string;
fadeOut?: boolean;
clsLeave?: string;
clsEnter?: string;
destroy?: boolean;
duration?: number;
transitionTime?: number;
}
export function destroyElem(
elem: any,
{
fadeOut = false,
clsLeave,
clsEnter,
duration = 3,
transitionTime = 250,
destroy = true
}: Options
): void {
let timer = null;
// 方式一：是否只用淡出效果
if (fadeOut) {
isDismiss();
CssTransition(elem, {
inOrOut: 'out',
enterCls: 'rab-fade-in',
leaveCls: 'rab-fade-out',
timeout: 250
});
return;
}
// 方式二：手动配置过渡效果和过渡时间
timer = setTimeout(() => {
isDismiss();
CssTransition(elem, {
inOrOut: 'out',
enterCls: clsEnter,
leaveCls: clsLeave,
timeout: transitionTime
});
}, duration * 1000);
// 自动关闭的延时为 0 则不关闭
duration <= 0 ? clearTimeout(timer) : timer;
// 判断需要销毁或者是仅隐藏元素
function isDismiss() {
setTimeout(() => {
if (destroy) {
elem.remove();
elem = null; // 释放内存
}
}, transitionTime);
}
}
export function destroyElemByKey(options: Options): void {
const { prefixKey, key } = options;
const target = document.querySelector(`[${prefixKey}-key="${key}"]`);
// 传入的key是否选取得到对应的元素
if (target) {
destroyElem(target, options);
}
}
================================================
FILE: src/utils/index.ts
================================================
import * as type from './check-type';
import { destroyElem, destroyElemByKey } from './destroy';
import randomStr from './random-str';
import useHTMLString from './use-html-string';
import validComps from './validComps';
export { type, destroyElem, destroyElemByKey, randomStr, useHTMLString, validComps };
================================================
FILE: src/utils/random-str.ts
================================================
// 生成随机字符串
export default function (len = 32): string {
const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
const maxPos = $chars.length;
let str = '',
i = 0;
for (; i < len; i++) {
str += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return str;
}
================================================
FILE: src/utils/use-html-string.ts
================================================
import { setHtml, setText } from '../dom-utils';
/**
* 设置属性是否支持传入 HTML 片段
* @param elem
* @param content
* @param use
*/
export default function isUseHTMLString(elem: Element, content: string, use?: boolean): void {
use ? setHtml(elem, content) : setText(elem, content);
}
================================================
FILE: src/utils/validComps.ts
================================================
/**
* 检查是否为有效并且正确的组件
*/
export default function validComps(target: Element, compName: string): void {
const r = '[Rabbit] Error: ';
if (!target) {
throw new Error(
`The target element you selected for configuration does not exist -- > '${target}'. This error occurred in the ${compName} component`
);
}
const targetName = target.tagName.toLowerCase().replace(/r-/, '');
if (targetName !== compName) {
throw (new Error().message = `${r}The configured component was selected incorrectly, it is not a ${compName} component --> "${targetName}"`);
}
}
================================================
FILE: tsconfig.json
================================================
{
"exclude": ["node_modules", "examples", "site"],
"include": ["src/**/*.ts"],
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "es2015",
"strict": true,
"jsx": "preserve",
"declaration": false,
"incremental": true,
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": false,
"baseUrl": ".",
"lib": ["es5", "es2015.promise", "dom", "dom.iterable", "scripthost"],
"downlevelIteration": true
}
}
================================================
FILE: tsconfig.tsbuildinfo
================================================
{
"program": {
"fileInfos": {
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es5.d.ts": {
"version": "c9a1f03d6ba0fe3c871eb0dd81622e78fbb61ade70878b34d48a341a690c59e9",
"signature": "c9a1f03d6ba0fe3c871eb0dd81622e78fbb61ade70878b34d48a341a690c59e9",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.d.ts": {
"version": "dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6",
"signature": "dc47c4fa66b9b9890cf076304de2a9c5201e94b740cffdf09f87296d877d71f6",
"affectsGlobalScope": false
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2016.d.ts": {
"version": "7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467",
"signature": "7a387c58583dfca701b6c85e0adaf43fb17d590fb16d5b2dc0a2fbd89f35c467",
"affectsGlobalScope": false
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2017.d.ts": {
"version": "8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9",
"signature": "8a12173c586e95f4433e0c6dc446bc88346be73ffe9ca6eec7aa63c8f3dca7f9",
"affectsGlobalScope": false
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2018.d.ts": {
"version": "5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06",
"signature": "5f4e733ced4e129482ae2186aae29fde948ab7182844c3a5a51dd346182c7b06",
"affectsGlobalScope": false
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.dom.d.ts": {
"version": "38130cdd16bd2318b9362f9d60dd9670f7e38708bb6131cf11fc78a41b2c34a0",
"signature": "38130cdd16bd2318b9362f9d60dd9670f7e38708bb6131cf11fc78a41b2c34a0",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.dom.iterable.d.ts": {
"version": "fb0c09b697dc42afa84d1587e3c994a2f554d2a45635e4f0618768d16a86b69a",
"signature": "fb0c09b697dc42afa84d1587e3c994a2f554d2a45635e4f0618768d16a86b69a",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.scripthost.d.ts": {
"version": "097a57355ded99c68e6df1b738990448e0bf170e606707df5a7c0481ff2427cd",
"signature": "097a57355ded99c68e6df1b738990448e0bf170e606707df5a7c0481ff2427cd",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.core.d.ts": {
"version": "46ee15e9fefa913333b61eaf6b18885900b139867d89832a515059b62cf16a17",
"signature": "46ee15e9fefa913333b61eaf6b18885900b139867d89832a515059b62cf16a17",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.collection.d.ts": {
"version": "43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c",
"signature": "43fb1d932e4966a39a41b464a12a81899d9ae5f2c829063f5571b6b87e6d2f9c",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.generator.d.ts": {
"version": "cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a",
"signature": "cdccba9a388c2ee3fd6ad4018c640a471a6c060e96f1232062223063b0a5ac6a",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.iterable.d.ts": {
"version": "42f5e41e5893da663dbf0394268f54f1da4b43dc0ddd2ea4bf471fe5361d6faf",
"signature": "42f5e41e5893da663dbf0394268f54f1da4b43dc0ddd2ea4bf471fe5361d6faf",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.promise.d.ts": {
"version": "0b7a905675e6cb4211c128f0a3aa47d414b275180a299a9aad5d3ec298abbfc4",
"signature": "0b7a905675e6cb4211c128f0a3aa47d414b275180a299a9aad5d3ec298abbfc4",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.proxy.d.ts": {
"version": "dfff68b3c34338f6b307a25d4566de15eed7973b0dc5d69f9fde2bcac1c25315",
"signature": "dfff68b3c34338f6b307a25d4566de15eed7973b0dc5d69f9fde2bcac1c25315",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.reflect.d.ts": {
"version": "cb609802a8698aa28b9c56331d4b53f590ca3c1c3a255350304ae3d06017779d",
"signature": "cb609802a8698aa28b9c56331d4b53f590ca3c1c3a255350304ae3d06017779d",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.symbol.d.ts": {
"version": "3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93",
"signature": "3013574108c36fd3aaca79764002b3717da09725a36a6fc02eac386593110f93",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts": {
"version": "4670208dd7da9d6c774ab1b75c1527a810388c7989c4905de6aaea8561cb9dce",
"signature": "4670208dd7da9d6c774ab1b75c1527a810388c7989c4905de6aaea8561cb9dce",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2016.array.include.d.ts": {
"version": "3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006",
"signature": "3be5a1453daa63e031d266bf342f3943603873d890ab8b9ada95e22389389006",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2017.object.d.ts": {
"version": "17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a",
"signature": "17bb1fc99591b00515502d264fa55dc8370c45c5298f4a5c2083557dccba5a2a",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts": {
"version": "b5e4c2d67aa844ed503b29cd4ca2ede1a229ac7fe874613b2c996fa9c581a25f",
"signature": "b5e4c2d67aa844ed503b29cd4ca2ede1a229ac7fe874613b2c996fa9c581a25f",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2017.string.d.ts": {
"version": "6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577",
"signature": "6a6b173e739a6a99629a8594bfb294cc7329bfb7b227f12e1f7c11bc163b8577",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2017.intl.d.ts": {
"version": "12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d",
"signature": "12a310447c5d23c7d0d5ca2af606e3bd08afda69100166730ab92c62999ebb9d",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts": {
"version": "b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e",
"signature": "b0124885ef82641903d232172577f2ceb5d3e60aed4da1153bab4221e1f6dd4e",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts": {
"version": "0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a",
"signature": "0eb85d6c590b0d577919a79e0084fa1744c1beba6fd0d4e951432fa1ede5510a",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2018.asynciterable.d.ts": {
"version": "a40c4d82bf13fcded295ac29f354eb7d40249613c15e07b53f2fc75e45e16359",
"signature": "a40c4d82bf13fcded295ac29f354eb7d40249613c15e07b53f2fc75e45e16359",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2018.intl.d.ts": {
"version": "df9c8a72ca8b0ed62f5470b41208a0587f0f73f0a7db28e5a1272cf92537518e",
"signature": "df9c8a72ca8b0ed62f5470b41208a0587f0f73f0a7db28e5a1272cf92537518e",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2018.promise.d.ts": {
"version": "bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c",
"signature": "bb2d3fb05a1d2ffbca947cc7cbc95d23e1d053d6595391bd325deb265a18d36c",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2018.regexp.d.ts": {
"version": "c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8",
"signature": "c80df75850fea5caa2afe43b9949338ce4e2de086f91713e9af1a06f973872b8",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2020.bigint.d.ts": {
"version": "7b5a10e3c897fabece5a51aa85b4111727d7adb53c2734b5d37230ff96802a09",
"signature": "7b5a10e3c897fabece5a51aa85b4111727d7adb53c2734b5d37230ff96802a09",
"affectsGlobalScope": true
},
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.esnext.intl.d.ts": {
"version": "89bf2b7a601b73ea4311eda9c41f86a58994fec1bee3b87c4a14d68d9adcdcbd",
"signature": "89bf2b7a601b73ea4311eda9c41f86a58994fec1bee3b87c4a14d68d9adcdcbd",
"affectsGlobalScope": true
},
"./src/images.d.ts": {
"version": "f5765a98fc28e4468fde2802c47227da6105c293ecc066cceb341a141dc2574f",
"signature": "f5765a98fc28e4468fde2802c47227da6105c293ecc066cceb341a141dc2574f",
"affectsGlobalScope": false
},
"./node_modules/tslib/tslib.d.ts": {
"version": "4576b4e61049f5ffd7c9e935cf88832e089265bdb15ffc35077310042cbbbeea",
"signature": "4576b4e61049f5ffd7c9e935cf88832e089265bdb15ffc35077310042cbbbeea",
"affectsGlobalScope": false
},
"./src/mixins/warn.ts": {
"version": "72f0a468016ddc192affab2189115d3de4664478a9660742389364657c877785",
"signature": "6531eeae6b0ae2da21884fac8e88024b04515654b44be0acf9f5485c8ed606bc",
"affectsGlobalScope": false
},
"./src/dom-utils/bind.ts": {
"version": "6efe2d097d02fc5267443b554eb203b8fee01b67939610e47f64883126d94832",
"signature": "9935e05ce8519b8a0b02fa1d61d6dcc66fd7c6227b5f40e95ca58a42b612f6b4",
"affectsGlobalScope": false
},
"./src/dom-utils/elem.ts": {
"version": "2a98f28fbf93373d3cbce3c6a9077cb29d6ba73dd07d652169c24fcb2f3c7a09",
"signature": "c4ab02ddeb42665003d4d9c3c3f8654647a0ff26541514688efc5624adbe1fba",
"affectsGlobalScope": false
},
"./src/dom-utils/prev&next.ts": {
"version": "037868f14683e62b4040a469810ddc2760b9ed9cd64ac97d81224908c1baca8c",
"signature": "fc945bfbb7b49d426a9beaaa31667c39ce6d167fec18d73b6958d9b208b3f396",
"affectsGlobalScope": false
},
"./src/dom-utils/remove-attrs.ts": {
"version": "9ffb7e9d19d5b7d7ba917aae7467058ecd3f89375c6b408a9a58cb564f919f54",
"signature": "bc6a30c96179b318b0b34503ef1c1b3bd507ca2ae2836c1cdc23bc682299210b",
"affectsGlobalScope": false
},
"./src/dom-utils/siblings.ts": {
"version": "a10b5227c5ab33ae1c91bef596850edd8c5c467a39e629a204cc2fe565b7a256",
"signature": "8b2e85d48d8782a51be91d1f41dd253b10a9d782545d0c6ef8da9cb260384ace",
"affectsGlobalScope": false
},
"./src/dom-utils/slide.ts": {
"version": "ca948b52e4b22a734ac77cdc57105c65187d82529eb7324a387ada97be31470c",
"signature": "cc40818009baadba6b675c9108cec8f30f338077131d4fe5c02f59669cdbe446",
"affectsGlobalScope": false
},
"./src/dom-utils/index.ts": {
"version": "3d8ab1471414b108bde6b2bdb1d5d43f9218ca996e4863145fb6c75e3190b429",
"signature": "03cf93df6d6c56da0ec719cdfc58a82746321575e85c9625a4be8be5301feb2b",
"affectsGlobalScope": false
},
"./src/mixins/arrow.ts": {
"version": "fd539b76ad39c69f6c360872a7e948941e583e30f2f6ff2b7df7407a8a98307e",
"signature": "36bba9b640ab96df7f0c18015001d9fd72dd7a3b90c2c4a065fa7f9b65e5b541",
"affectsGlobalScope": false
},
"./src/mixins/css-transition.ts": {
"version": "4cc9f08627ce745a062cf3f57c78fc3a5ad1998a025638bef32a0448e9cc6fd8",
"signature": "d7a0335202f3733d9bb9271df42f4851382f746203f7d896d145c14db0867e92",
"affectsGlobalScope": false
},
"./src/mixins/scrollable.ts": {
"version": "a453379df0d8d568e746f024ec486ea7f3b069a98facd59b083b4fccf5ed7945",
"signature": "35ec31b35443f1d8c3a74a801fdf5bfde3d323a738790c34c10587137c88897d",
"affectsGlobalScope": false
},
"./src/mixins/cb-promise.ts": {
"version": "5c7bfca92ad5e1a200e55a3840adb99eb8880f887292c58b5877873be61f8f8f",
"signature": "7d8c71d579fdf679f8ded994c8483f6b77af393d5de9b29e2801ac2e988b0791",
"affectsGlobalScope": false
},
"./src/mixins/click-outside.ts": {
"version": "504076896142cd028b2327132e446572514ebf7d89be548e8512c3481aad001e",
"signature": "2a0ae119bbea569f2515dc726ddc8b08ea165b8a8c494ff1becf927bad91af05",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/enums.d.ts": {
"version": "3192b54876effeb978785858ec960ba7c57f81171070b5a0054a011ca09795f2",
"signature": "3192b54876effeb978785858ec960ba7c57f81171070b5a0054a011ca09795f2",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/modifiers/popperoffsets.d.ts": {
"version": "1e77c0e8b7ce3c4568bc06f28be0e17844df09879679d5911d6d656276546f44",
"signature": "1e77c0e8b7ce3c4568bc06f28be0e17844df09879679d5911d6d656276546f44",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/modifiers/flip.d.ts": {
"version": "93404d6cc4b10b517a4612c6af4ebd2e884e9231f6b5a106a8cae228611ab35f",
"signature": "93404d6cc4b10b517a4612c6af4ebd2e884e9231f6b5a106a8cae228611ab35f",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/modifiers/hide.d.ts": {
"version": "698e5e5810b1a4b874e8001947f3aa821c5afe9b8646835173d0edb30684042f",
"signature": "698e5e5810b1a4b874e8001947f3aa821c5afe9b8646835173d0edb30684042f",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/modifiers/offset.d.ts": {
"version": "975f2c755adfb08c939b418daab31f743625d1ebe3755bd6cd6c95337d0dd975",
"signature": "975f2c755adfb08c939b418daab31f743625d1ebe3755bd6cd6c95337d0dd975",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/modifiers/eventlisteners.d.ts": {
"version": "3536aa6999475104d3efe7ce04848b504420290759139332317eada6fed92a49",
"signature": "3536aa6999475104d3efe7ce04848b504420290759139332317eada6fed92a49",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/modifiers/computestyles.d.ts": {
"version": "5950b96952b0315e379daa3acc9352745f1abc2eff2fe4019ed9878fe314bc07",
"signature": "5950b96952b0315e379daa3acc9352745f1abc2eff2fe4019ed9878fe314bc07",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/modifiers/arrow.d.ts": {
"version": "f8e425cb20db2f8ad8b881e569a720ac69cc1ed62cea84de49a91c0579ce1aab",
"signature": "f8e425cb20db2f8ad8b881e569a720ac69cc1ed62cea84de49a91c0579ce1aab",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/modifiers/preventoverflow.d.ts": {
"version": "aeca184ccde8423a7cfec9de34f36486cceef5c456ad65586875b53733633181",
"signature": "aeca184ccde8423a7cfec9de34f36486cceef5c456ad65586875b53733633181",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/modifiers/applystyles.d.ts": {
"version": "7475302435289b5b18c6bed0bea1216a6aaad51ef81ceb28a2349abd7b08d2c8",
"signature": "7475302435289b5b18c6bed0bea1216a6aaad51ef81ceb28a2349abd7b08d2c8",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/types.d.ts": {
"version": "4350ebb995d09685304585edd3de5f5ec75b3a82ea2106b558f93871d6464c12",
"signature": "4350ebb995d09685304585edd3de5f5ec75b3a82ea2106b558f93871d6464c12",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/modifiers/index.d.ts": {
"version": "5ea98f44cc9de1fe05d037afe4813f3dcd3a8c5de43bdd7db24624a364fad8e6",
"signature": "5ea98f44cc9de1fe05d037afe4813f3dcd3a8c5de43bdd7db24624a364fad8e6",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/utils/detectoverflow.d.ts": {
"version": "1327fc0ade4b997e580f63d8557a724caadce61beb9653fbbc74871ab1d1923d",
"signature": "1327fc0ade4b997e580f63d8557a724caadce61beb9653fbbc74871ab1d1923d",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/createpopper.d.ts": {
"version": "3dc70cdbe0813d00687a84e2da850fbae6e4717590a6723efcef59aa18f7eaaf",
"signature": "3dc70cdbe0813d00687a84e2da850fbae6e4717590a6723efcef59aa18f7eaaf",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/popper-lite.d.ts": {
"version": "49837b293d0f7c8df1a65186369efa1a1a3c5a37ceedac2b55cca9e307906c72",
"signature": "49837b293d0f7c8df1a65186369efa1a1a3c5a37ceedac2b55cca9e307906c72",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/popper.d.ts": {
"version": "dae7cc4e7134a9a42f6ca914367f39fd46a099f740d9ffc75e4031cd6ea675b9",
"signature": "dae7cc4e7134a9a42f6ca914367f39fd46a099f740d9ffc75e4031cd6ea675b9",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/lib/index.d.ts": {
"version": "d479a5128f27f63b58d57a61e062bd68fa43b684271449a73a4d3e3666a599a7",
"signature": "d479a5128f27f63b58d57a61e062bd68fa43b684271449a73a4d3e3666a599a7",
"affectsGlobalScope": false
},
"./node_modules/@popperjs/core/index.d.ts": {
"version": "6f308b141358ac799edc3e83e887441852205dc1348310d30b62c69438b93ca0",
"signature": "6f308b141358ac799edc3e83e887441852205dc1348310d30b62c69438b93ca0",
"affectsGlobalScope": false
},
"./src/utils/check-type.ts": {
"version": "2578444e781b3c9c8fd2e3b8d17e0bc08b20ca1386ddee6ef0126165db45fc1d",
"signature": "e1127a11e5a71ec37e05985ee500153973847000c930566288358abec224d0c3",
"affectsGlobalScope": false
},
"./src/utils/destroy.ts": {
"version": "49c9470591e5e730c3693d4c431b863f1324df26dea54b4aa3f645c3cc849d49",
"signature": "c0d05fa38e9dced5642fe2cd791b385e1ea5ab6a13effd0313d263f6352fdde3",
"affectsGlobalScope": false
},
"./src/utils/use-html-string.ts": {
"version": "298d318d75fb77f76c29b48fd9626cbb379f2c59405373021c4309c9a6543011",
"signature": "7a2bcf5ec5d1295c91843475fdc853ba03e5546ffefa2a00927021f6f25a0187",
"affectsGlobalScope": false
},
"./src/utils/validcomps.ts": {
"version": "9f735530b4cab90a4fbc4ecac0b243bba09bef7ad28b032c73373b3d9100c277",
"signature": "093841d2057c2bdf6f5c6a4578c8ce74891ed72131e3d79cb8511c2dff671367",
"affectsGlobalScope": false
},
"./src/utils/index.ts": {
"version": "536ac4645da220a02792bfd38dbdbb2ec94d20e6f7000be260202bf746e9106e",
"signature": "4777fe393394b57ed4faddd2d26d5380fbb8e933ea90959a3cbe60296900b011",
"affectsGlobalScope": false
},
"./src/mixins/tooltip.ts": {
"version": "17a9b8260593750830e9db2b42c9e30f31b63f4e53b122c2bf8074797b6d4aa2",
"signature": "fd1887dfe8d90293b76f71f8472583ca39ecc8b82eb304e02c2c874e254e8733",
"affectsGlobalScope": false
},
"./src/mixins/index.ts": {
"version": "9732b8e25bf13f0a0608dce9616244d33c5e8fe3d791c80046f4de7728b3a730",
"signature": "dbf2e84474d8dee93270b582b424d51c3b5048268ef552a857f241344097bddd",
"affectsGlobalScope": false
},
"./src/components/prefix.ts": {
"version": "d4dff0cd7a48beb36637b819ca19ac0a5976ae1b1936fb55159ea9084f667add",
"signature": "40a5302864eaa7c263e4eeaf0db70729f3977d2150aa56cf914be784f9140f8f",
"affectsGlobalScope": false
},
"./src/components/alert/alert.ts": {
"version": "681e9c89cd75212e49d01c98f7489f204f2dd1aab356735515b80d0508b482b3",
"signature": "54bb0b2ea216f9df2b6c8945c66dbd11f0133c441399106352d7a6993e0318a5",
"affectsGlobalScope": false
},
"./src/components/alert/index.ts": {
"version": "91501075e148d298fb81e45dac4a54d2715d4459df62e8918cd0300ff842774c",
"signature": "91501075e148d298fb81e45dac4a54d2715d4459df62e8918cd0300ff842774c",
"affectsGlobalScope": false
},
"./src/components/avatar/avatar.ts": {
"version": "6261fb49988af6c986632665ccfbf01e20c2b8fdf3881fe10cc336dd1d09b83d",
"signature": "0872993d8aad8e8e44d0277237bcaa4b98f6fec89cb62c33fa4624bbbc7b3654",
"affectsGlobalScope": false
},
"./src/components/avatar/index.ts": {
"version": "5e781fab2f432e6dca017e71756f60733042e4deb15a0584011778362d4ee554",
"signature": "5e781fab2f432e6dca017e71756f60733042e4deb15a0584011778362d4ee554",
"affectsGlobalScope": false
},
"./src/components/back-top/back-top.ts": {
"version": "d1bdd0295a510210a13cd180087357e78892220b7f3864016d7719d33977dd00",
"signature": "777539f8e991422f32598f9cbddf5ce685005778fde399d05fb462eeb1408ec4",
"affectsGlobalScope": false
},
"./src/components/back-top/index.ts": {
"version": "a829cf21d958fd41bec56d56b45626bbfd687e4b6102019091b6a520be56d6da",
"signature": "a829cf21d958fd41bec56d56b45626bbfd687e4b6102019091b6a520be56d6da",
"affectsGlobalScope": false
},
"./src/components/badge/badge.ts": {
"version": "ea996258a9c225e3b2c0da03d04440b080887e4c096498b9815262eed054f63f",
"signature": "6f929f4b243d9f728dc4cc616812301edc75bc17a86d5b3f6d1631f4a7724368",
"affectsGlobalScope": false
},
"./src/components/badge/index.ts": {
"version": "708b8c3a7df21465f36cbe358a1692ac398727a7f0f0ebaaa338a3ce7327578f",
"signature": "708b8c3a7df21465f36cbe358a1692ac398727a7f0f0ebaaa338a3ce7327578f",
"affectsGlobalScope": false
},
"./src/components/button/button.ts": {
"version": "9b334ee7398f16642d7e05cce3f6a1bb96a175dafa9aca7ea159a68eee8e31c9",
"signature": "89ebe21f1b6f6abcf68e4b1e06bb5574fca1a7f29c56a7756d5b4eb849f738cf",
"affectsGlobalScope": false
},
"./src/components/button/index.ts": {
"version": "e76ca8e1afd7ae919129aefa1c7430493c72fd637f65b7c474242a6e2b757847",
"signature": "e76ca8e1afd7ae919129aefa1c7430493c72fd637f65b7c474242a6e2b757847",
"affectsGlobalScope": false
},
"./src/components/card/card.ts": {
"version": "e68a978d246345a07cd2ab5c17b86e44d0d767f1724722fbda685fab30cf4d21",
"signature": "4e4d4c380b490f358dc014023728e35c432bafd415d977881934647dbfb584e3",
"affectsGlobalScope": false
},
"./src/components/card/index.ts": {
"version": "e8403ddc20ffc170cd459f29eda08b7a9fb2bbe219914546bb6c3b1b57088deb",
"signature": "e8403ddc20ffc170cd459f29eda08b7a9fb2bbe219914546bb6c3b1b57088deb",
"affectsGlobalScope": false
},
"./src/components/collapse/collapse.ts": {
"version": "3c42363c9ea690893692f436a9fca988b836536d1f26e2aaa97d4de5a8e6697d",
"signature": "aadf593014afdb79a5cc96124db428c7811c4520eb16f9ead577786084390465",
"affectsGlobalScope": false
},
"./src/components/collapse/index.ts": {
"version": "197ee52e84c5ef4bede9d776892c3bb95d89312f57d604d3f19b15eb56bb6896",
"signature": "197ee52e84c5ef4bede9d776892c3bb95d89312f57d604d3f19b15eb56bb6896",
"affectsGlobalScope": false
},
"./src/components/divider/divider.ts": {
"version": "085577c81d084519b5ef6ee2e577fd0827c59e0342f878ada25429a7bc9e7503",
"signature": "4350cb871975f9b3202c8b7a680ebf456e722c211396b7be63a482e00fe564fc",
"affectsGlobalScope": false
},
"./src/components/divider/index.ts": {
"version": "8da33abe5170c138c809c26533b015801f0a09417a35e3bd9054c74d19c5f4f6",
"signature": "8da33abe5170c138c809c26533b015801f0a09417a35e3bd9054c74d19c5f4f6",
"affectsGlobalScope": false
},
"./src/components/drawer/drawer.ts": {
"version": "690b003c0aa8489682a87b63a7ba7fe51b76c23a71bba2aaa970cb9acdf49b5c",
"signature": "43f90b8ad757d20f4608891ed0ee9fa68cc8762a66316a6e29a817df21f8b0d8",
"affectsGlobalScope": false
},
"./src/components/drawer/index.ts": {
"version": "287ab6bb1016242eeed5ae11e0c2039aa7ccf1f5ac415f057c4fbbd35bd994ea",
"signature": "287ab6bb1016242eeed5ae11e0c2039aa7ccf1f5ac415f057c4fbbd35bd994ea",
"affectsGlobalScope": false
},
"./src/components/dropdown/dropdown.ts": {
"version": "3b3272ac48f2962f894c0f327cd249ace4db20241f388a4e64a8f188c6d8d5c5",
"signature": "f7ea07eb6b1fbb8206b56d7b307614b5a01f2cd4eca8074d089bc2f891ed97b4",
"affectsGlobalScope": false
},
"./src/components/dropdown/index.ts": {
"version": "3a84ba7ff9620d496d912ae6a470fef357ff1141d90595110537da3eafc40927",
"signature": "3a84ba7ff9620d496d912ae6a470fef357ff1141d90595110537da3eafc40927",
"affectsGlobalScope": false
},
"./src/components/loading-bar/loading-bar.ts": {
"version": "9fdc18ccac3f200915bc404c8f8cd0f16d638bac6e50b5092976934d09e4b96f",
"signature": "828469846804e91309f8a15cec3d695a82ad6bccc5918223d794b0d5d12f7520",
"affectsGlobalScope": false
},
"./src/components/loading-bar/index.ts": {
"version": "bea1670bee73290a68352419573ea6f8877486d433df8c867e2c99bc32b73b7e",
"signature": "04883978e224d728323f8eefc3a66ed511adf2ecdf8c00d0d704d8ca4791af22",
"affectsGlobalScope": false
},
"./src/components/message/message.ts": {
"version": "f6277e64352fd9b560c69af23bf9773f3268633414b5e60af5561e0938e755a8",
"signature": "f268e41424b184e49221709de55a05b985c71fd3e56cd19b043eaca047d4d47b",
"affectsGlobalScope": false
},
"./src/components/message/index.ts": {
"version": "43d9b278fa89924613fb9428e339b9ba53cd8e025ad40d3cb569d4be4611c024",
"signature": "6cbf4d551486168c7d2f409bf4073f972a52f1e30e69804339495909bc6fd9b5",
"affectsGlobalScope": false
},
"./src/components/modal/modal.ts": {
"version": "c348aa62fa74bbbffb8566757300de9e4adfe0bdac1c4bf21e555edbc34de3f3",
"signature": "9134234d69fdcdfd85e479b39631457d235570342fabf637ddda6042216e802b",
"affectsGlobalScope": false
},
"./src/components/modal/index.ts": {
"version": "72dd030a397769b3bfe248a1c0d69cf9526ed64fa205e6aed0f1894c9349b3e9",
"signature": "72dd030a397769b3bfe248a1c0d69cf9526ed64fa205e6aed0f1894c9349b3e9",
"affectsGlobalScope": false
},
"./src/components/notice/notice.ts": {
"version": "96158b5561e64481be9f52ad0c51311b134e4d4c1814d4cd1f675047d3b5d50c",
"signature": "791d1175f8fc601f97cee1279f565acb6a3b1c35d841f9fdf27369fd2ec18445",
"affectsGlobalScope": false
},
"./src/components/notice/index.ts": {
"version": "0b02e0b2e9d9f02e4fb158061f70343095e4bf03c66fb9240006cfe468884511",
"signature": "98ddda86688b67bf72e4429b39e49e8ce5fe51d98e5f3c2cc8a7a43adc03c96d",
"affectsGlobalScope": false
},
"./src/components/poptip/poptip.ts": {
"version": "5b5dbc9ffa6952b961a3993660bc27244bc2187390b36c5655c787f60b0491c6",
"signature": "837cff6f3e060b084ec1a556223ff4fc2bbe4d608c0efe51a7089b8388e5f3b9",
"affectsGlobalScope": false
},
"./src/components/poptip/index.ts": {
"version": "254786a7c45ccde2e18646174a8195d64141e068b22d60a55cd0ab8b4a831491",
"signature": "254786a7c45ccde2e18646174a8195d64141e068b22d60a55cd0ab8b4a831491",
"affectsGlobalScope": false
},
"./src/components/progress/progress.ts": {
"version": "054c88fdf299454611edb23fe4dd517a6c3621fc9d61212f154675414bae2653",
"signature": "0729e2110148cf9489c697ad3ce94842db7ecc85ed995fc90b570921e43b2f0a",
"affectsGlobalScope": false
},
"./src/components/progress/index.ts": {
"version": "18732fe4651f9b8bb6d0732bfa8ff3f18d76648417e3996720ef4cd74f39e2b2",
"signature": "18732fe4651f9b8bb6d0732bfa8ff3f18d76648417e3996720ef4cd74f39e2b2",
"affectsGlobalScope": false
},
"./src/components/result/result.ts": {
"version": "6ee56e5fbd75d903f101f8042ff515576dd2a78534e88feddb54bc2fd178250e",
"signature": "89d238858d8f1f4750d5aec1c1deab8c50eba29da0b49ea41d7d046dcb6ca950",
"affectsGlobalScope": false
},
"./src/components/result/index.ts": {
"version": "2e44f1646c4ed7561a9c35e3d9f4a410cdf3b45980574a5aaea0f4d5be990c0a",
"signature": "2e44f1646c4ed7561a9c35e3d9f4a410cdf3b45980574a5aaea0f4d5be990c0a",
"affectsGlobalScope": false
},
"./src/components/skeleton/skeleton.ts": {
"version": "0fb7415cd0450bfb84d21b89d81d871ee9957f8f6210b67b14f7410df4bd25a1",
"signature": "1efb165521dbe8e1811e4feda704a0630622ef9d7801ee02f5bd284ded3d8ba8",
"affectsGlobalScope": false
},
"./src/components/skeleton/index.ts": {
"version": "08214caaff128e32cbe0990b3b36259a7ccbb39c3c9f919ae42c9ea4c817da04",
"signature": "08214caaff128e32cbe0990b3b36259a7ccbb39c3c9f919ae42c9ea4c817da04",
"affectsGlobalScope": false
},
"./src/components/spin/spin.ts": {
"version": "ce637ab8435db16d619cf98b767a7a27fb1a2c43e1c5c904e1bbaae51e4d08bf",
"signature": "27f86a563d0564586f557fd08f335a433ab649998f13d6703c5f2313a198e4b3",
"affectsGlobalScope": false
},
"./src/components/spin/index.ts": {
"version": "b1e6419780f3e8434ef394c4e8744c290fcb0c6d22a16cd543fed03ab1db0a78",
"signature": "b1e6419780f3e8434ef394c4e8744c290fcb0c6d22a16cd543fed03ab1db0a78",
"affectsGlobalScope": false
},
"./src/components/steps/steps.ts": {
"version": "af467b881e8042172db6cc99fef08471331bc7ae90b36da936ea207cbb0961de",
"signature": "3ab106d74e0d419b614d7d85806d773a1731fb10a91d3fd732ce969d358f40af",
"affectsGlobalScope": false
},
"./src/components/steps/index.ts": {
"version": "4c87a563a494b05c086bf83eb4b6bef45a7526563adb19a1bf4c3ff829989355",
"signature": "4c87a563a494b05c086bf83eb4b6bef45a7526563adb19a1bf4c3ff829989355",
"affectsGlobalScope": false
},
"./src/components/switch/switch.ts": {
"version": "942c7fd16aa4ab3335ebb630ca8d8aac836e0e94cdd3b9818800382edd6f4fec",
"signature": "8c5ce3f69a094104b4dcf5f51d3b08f0b31fbde073a542068d58ec464889f305",
"affectsGlobalScope": false
},
"./src/components/switch/index.ts": {
"version": "54b35d8c5351938696ddbfd85bb4ae25d5c6252462d0a7abb8bfbf2375a0d76c",
"signature": "54b35d8c5351938696ddbfd85bb4ae25d5c6252462d0a7abb8bfbf2375a0d76c",
"affectsGlobalScope": false
},
"./src/components/tabs/tabs.ts": {
"version": "4cb6402f1a756f3b07c4b5536ca65662a802a8af1d8d8df51869ef1231b911b0",
"signature": "42a13b554813a0d6a73fae712553bb7d65d0aab5abf3359904e3eaf76ebc4958",
"affectsGlobalScope": false
},
"./src/components/tabs/index.ts": {
"version": "13493ed8c69ebac1a3f4172b45b6a0e0b2beb4e868291bc113c7f26546d28fbb",
"signature": "13493ed8c69ebac1a3f4172b45b6a0e0b2beb4e868291bc113c7f26546d28fbb",
"affectsGlobalScope": false
},
"./node_modules/moment/ts3.1-typings/moment.d.ts": {
"version": "f97edc4d3b4dd0b32766e9633086497565c37657fb591cc84a35864db4bc2fc5",
"signature": "f97edc4d3b4dd0b32766e9633086497565c37657fb591cc84a35864db4bc2fc5",
"affectsGlobalScope": false
},
"./src/components/time/time.ts": {
"version": "6d8446fe7ea8258750644bb5e834a428140040392d5943c0ddc0d6c9fd8acc41",
"signature": "226e96cd67b3f7ebb632e2b5012051f24abd6e96a6abefe5f075baf63d20bd4d",
"affectsGlobalScope": false
},
"./src/components/time/index.ts": {
"version": "f7fe140c7f289aed053ec9f92229da3b62b26898468dc8852b6bbb9ae62d56f5",
"signature": "f7fe140c7f289aed053ec9f92229da3b62b26898468dc8852b6bbb9ae62d56f5",
"affectsGlobalScope": false
},
"./src/components/timeline/timeline.ts": {
"version": "5f39feefce3157d4af00bc212f3ade0a16b317e0c6895a786f6f298862bb2c32",
"signature": "d8b130c94cefdac4724d73bb77097db33ae4ca7fb5868f93363a684b35c8f917",
"affectsGlobalScope": false
},
"./src/components/timeline/index.ts": {
"version": "ec82b2fe654d8f6e991b8b7742671839e47dff8eb3b13b4f6e3dc47b80c14b54",
"signature": "ec82b2fe654d8f6e991b8b7742671839e47dff8eb3b13b4f6e3dc47b80c14b54",
"affectsGlobalScope": false
},
"./src/components/tooltip/tooltip.ts": {
"version": "50c105becc2ed8ed5cfe78996c7686c196ae5ed392c266bd28f45e5f60be17be",
"signature": "f9820d9de33f7f775bd8aa201389f9c321906451cd5b2c96df4e7f45c4c0bf62",
"affectsGlobalScope": false
},
"./src/components/tooltip/index.ts": {
"version": "6875d2e37aaadd389d11e10631ba12972ff597112d7cd7b0ed57fb738a0775f5",
"signature": "6875d2e37aaadd389d11e10631ba12972ff597112d7cd7b0ed57fb738a0775f5",
"affectsGlobalScope": false
},
"./src/rabbit-design.ts": {
"version": "224df54e109b4666b114934e805cedfd11b7e5c270f7987d887813d062f48e5f",
"signature": "c1ade3bdebb683d7c249d62124d901ed174319bc29e78734724240ee5ed326b9",
"affectsGlobalScope": false
},
"./src/index.ts": {
"version": "8dba5de92bf59161c0920820c2c543a56fc3812ad636087f590d06066e06d502",
"signature": "2ec38789a49751baf083f48672848bf505dbc4ed8cb607e82f6e8d4b4c40fa2c",
"affectsGlobalScope": false
},
"./node_modules/@types/anymatch/index.d.ts": {
"version": "48b52264fa193879a074197839dbb4796fa07e86350ff888e5361e06aa46df76",
"signature": "48b52264fa193879a074197839dbb4796fa07e86350ff888e5361e06aa46df76",
"affectsGlobalScope": false
},
"./node_modules/@types/eslint/helpers.d.ts": {
"version": "f345b0888d003fd69cb32bad3a0aa04c615ccafc572019e4bd86a52bd5e49e46",
"signature": "f345b0888d003fd69cb32bad3a0aa04c615ccafc572019e4bd86a52bd5e49e46",
"affectsGlobalScope": true
},
"./node_modules/@types/json-schema/index.d.ts": {
"version": "b2be568d8ce95fcb26eebd04c035d94825655fdf689bf67d799f5ff8cbbb1024",
"signature": "b2be568d8ce95fcb26eebd04c035d94825655fdf689bf67d799f5ff8cbbb1024",
"affectsGlobalScope": false
},
"./node_modules/@types/estree/index.d.ts": {
"version": "6a38e250306ceccbab257d11b846d5bd12491157d20901fa01afe4050c93c1b5",
"signature": "6a38e250306ceccbab257d11b846d5bd12491157d20901fa01afe4050c93c1b5",
"affectsGlobalScope": false
},
"./node_modules/@types/eslint/index.d.ts": {
"version": "edb3e2f61a2a6e29a5f9043f73adf65951d52b4c1f22e84050381f7ef0d77318",
"signature": "edb3e2f61a2a6e29a5f9043f73adf65951d52b4c1f22e84050381f7ef0d77318",
"affectsGlobalScope": false
},
"./node_modules/@types/eslint-scope/index.d.ts": {
"version": "274bda283ef15f4205603ca9967313fc013aa77ae89f2cbeab5fbd51439e96ed",
"signature": "274bda283ef15f4205603ca9967313fc013aa77ae89f2cbeab5fbd51439e96ed",
"affectsGlobalScope": false
},
"./node_modules/@types/node/globals.d.ts": {
"version": "215d8d9a2c480fd460127edc048d68d9931d3b27f95132253a6e71975f060bb1",
"signature": "215d8d9a2c480fd460127edc048d68d9931d3b27f95132253a6e71975f060bb1",
"affectsGlobalScope": true
},
"./node_modules/@types/node/async_hooks.d.ts": {
"version": "c438b413e94ff76dfa20ae005f33a1c84f2480d1d66e0fd687501020d0de9b50",
"signature": "c438b413e94ff76dfa20ae005f33a1c84f2480d1d66e0fd687501020d0de9b50",
"affectsGlobalScope": false
},
"./node_modules/@types/node/buffer.d.ts": {
"version": "bc6a78961535181265845bf9b9e8a147ffd0ca275097ceb670a9b92afa825152",
"signature": "bc6a78961535181265845bf9b9e8a147ffd0ca275097ceb670a9b92afa825152",
"affectsGlobalScope": false
},
"./node_modules/@types/node/child_process.d.ts": {
"version": "987249e7b75023387c5fd9dc2f959ee777cb8989b7900f5a9eb4a67d290f2cba",
"signature": "987249e7b75023387c5fd9dc2f959ee777cb8989b7900f5a9eb4a67d290f2cba",
"affectsGlobalScope": false
},
"./node_modules/@types/node/cluster.d.ts": {
"version": "123ec69e4b3a686eb49afd94ebe3292a5c84a867ecbcb6bb84bdd720a12af803",
"signature": "123ec69e4b3a686eb49afd94ebe3292a5c84a867ecbcb6bb84bdd720a12af803",
"affectsGlobalScope": false
},
"./node_modules/@types/node/console.d.ts": {
"version": "eb5197aade83cb0e360ac407289c53a8009e8fdae7939892a0240d30444496b6",
"signature": "eb5197aade83cb0e360ac407289c53a8009e8fdae7939892a0240d30444496b6",
"affectsGlobalScope": true
},
"./node_modules/@types/node/constants.d.ts": {
"version": "90c85ddbb8de82cd19198bda062065fc51b7407c0f206f2e399e65a52e979720",
"signature": "90c85ddbb8de82cd19198bda062065fc51b7407c0f206f2e399e65a52e979720",
"affectsGlobalScope": false
},
"./node_modules/@types/node/crypto.d.ts": {
"version": "2636f61a2d5f76d4039c7110f65c407a028ec5265e03d855fc2cf62b198ac415",
"signature": "2636f61a2d5f76d4039c7110f65c407a028ec5265e03d855fc2cf62b198ac415",
"affectsGlobalScope": false
},
"./node_modules/@types/node/dgram.d.ts": {
"version": "7e050b767ed10c7ffbc01f314defbf420bf0b5d54ce666e1c87507c035dfc191",
"signature": "7e050b767ed10c7ffbc01f314defbf420bf0b5d54ce666e1c87507c035dfc191",
"affectsGlobalScope": false
},
"./node_modules/@types/node/dns.d.ts": {
"version": "7db7569fbb3e2b01ba8751c761cdd3f0debd104170d5665b7dc20a11630df3a9",
"signature": "7db7569fbb3e2b01ba8751c761cdd3f0debd104170d5665b7dc20a11630df3a9",
"affectsGlobalScope": false
},
"./node_modules/@types/node/domain.d.ts": {
"version": "cde4d7f6274468180fa39847b183aec22626e8212ff885d535c53f4cd7c225fd",
"signature": "cde4d7f6274468180fa39847b183aec22626e8212ff885d535c53f4cd7c225fd",
"affectsGlobalScope": true
},
"./node_modules/@types/node/events.d.ts": {
"version": "365e8358843a23944be84b810b1f774ea0223adfccc085f30fd7f4c13dc8a09f",
"signature": "365e8358843a23944be84b810b1f774ea0223adfccc085f30fd7f4c13dc8a09f",
"affectsGlobalScope": true
},
"./node_modules/@types/node/fs.d.ts": {
"version": "f87f95c015900102a5c0edcdebb17596de1382510e6cc17ab79f375d3505bb12",
"signature": "f87f95c015900102a5c0edcdebb17596de1382510e6cc17ab79f375d3505bb12",
"affectsGlobalScope": false
},
"./node_modules/@types/node/fs/promises.d.ts": {
"version": "05b5679a897598ebe556ee93415b3af1f456e674ea82e4d7afcd716bfe43aa98",
"signature": "05b5679a897598ebe556ee93415b3af1f456e674ea82e4d7afcd716bfe43aa98",
"affectsGlobalScope": false
},
"./node_modules/@types/node/http.d.ts": {
"version": "35fe02b2c10616cc7ac3db9c15778df7ed9c99276889efdd9be31f342841cfcd",
"signature": "35fe02b2c10616cc7ac3db9c15778df7ed9c99276889efdd9be31f342841cfcd",
"affectsGlobalScope": false
},
"./node_modules/@types/node/http2.d.ts": {
"version": "1c3fe66943f587685aa4a42f664f794655da1767401d2f85910177dac78aa45d",
"signature": "1c3fe66943f587685aa4a42f664f794655da1767401d2f85910177dac78aa45d",
"affectsGlobalScope": false
},
"./node_modules/@types/node/https.d.ts": {
"version": "c969bf4c7cdfe4d5dd28aa09432f99d09ad1d8d8b839959646579521d0467d1a",
"signature": "c969bf4c7cdfe4d5dd28aa09432f99d09ad1d8d8b839959646579521d0467d1a",
"affectsGlobalScope": false
},
"./node_modules/@types/node/inspector.d.ts": {
"version": "6c3857edaeeaaf43812f527830ebeece9266b6e8eb5271ab6d2f0008306c9947",
"signature": "6c3857edaeeaaf43812f527830ebeece9266b6e8eb5271ab6d2f0008306c9947",
"affectsGlobalScope": false
},
"./node_modules/@types/node/module.d.ts": {
"version": "bc6a77e750f4d34584e46b1405b771fb69a224197dd6bafe5b0392a29a70b665",
"signature": "bc6a77e750f4d34584e46b1405b771fb69a224197dd6bafe5b0392a29a70b665",
"affectsGlobalScope": false
},
"./node_modules/@types/node/net.d.ts": {
"version": "8de97668870cfb20fc9d355d2ef379e897bdd8a98c889c7d8a6de40ee408ad52",
"signature": "8de97668870cfb20fc9d355d2ef379e897bdd8a98c889c7d8a6de40ee408ad52",
"affectsGlobalScope": false
},
"./node_modules/@types/node/os.d.ts": {
"version": "ed4ae81196cccc10f297d228bca8d02e31058e6d723a3c5bc4be5fb3c61c6a34",
"signature": "ed4ae81196cccc10f297d228bca8d02e31058e6d723a3c5bc4be5fb3c61c6a34",
"affectsGlobalScope": false
},
"./node_modules/@types/node/path.d.ts": {
"version": "84044697c8b3e08ef24e4b32cfe6440143d07e469a5e34bda0635276d32d9f35",
"signature": "84044697c8b3e08ef24e4b32cfe6440143d07e469a5e34bda0635276d32d9f35",
"affectsGlobalScope": false
},
"./node_modules/@types/node/perf_hooks.d.ts": {
"version": "4982d94cb6427263c8839d8d6324a8bbe129e931deb61a7380f8fad17ba2cfc0",
"signature": "4982d94cb6427263c8839d8d6324a8bbe129e931deb61a7380f8fad17ba2cfc0",
"affectsGlobalScope": false
},
"./node_modules/@types/node/process.d.ts": {
"version": "ae4bc1dd4d9de7bbea6ce419db45af82a81358e6014c9e1235b5d252e06f8ab8",
"signature": "ae4bc1dd4d9de7bbea6ce419db45af82a81358e6014c9e1235b5d252e06f8ab8",
"affectsGlobalScope": true
},
"./node_modules/@types/node/punycode.d.ts": {
"version": "3f6a1fd73c9dc3bd7f4b79bc075297ca6527904df69b0f2c2c94e4c4c7d9a32c",
"signature": "3f6a1fd73c9dc3bd7f4b79bc075297ca6527904df69b0f2c2c94e4c4c7d9a32c",
"affectsGlobalScope": false
},
"./node_modules/@types/node/querystring.d.ts": {
"version": "884560fda6c3868f925f022adc3a1289fe6507bbb45adb10fa1bbcc73a941bb0",
"signature": "884560fda6c3868f925f022adc3a1289fe6507bbb45adb10fa1bbcc73a941bb0",
"affectsGlobalScope": false
},
"./node_modules/@types/node/readline.d.ts": {
"version": "6b2bb67b0942bcfce93e1d6fad5f70afd54940a2b13df7f311201fba54b2cbe9",
"signature": "6b2bb67b0942bcfce93e1d6fad5f70afd54940a2b13df7f311201fba54b2cbe9",
"affectsGlobalScope": false
},
"./node_modules/@types/node/repl.d.ts": {
"version": "acbed967a379b3e9f73237ba9473f8b337eeea14b7dc64d445430b5d695751da",
"signature": "acbed967a379b3e9f73237ba9473f8b337eeea14b7dc64d445430b5d695751da",
"affectsGlobalScope": false
},
"./node_modules/@types/node/stream.d.ts": {
"version": "272a46cc8f494677af587d17939e61e7db2b1925633e4da0c186ba17f6732521",
"signature": "272a46cc8f494677af587d17939e61e7db2b1925633e4da0c186ba17f6732521",
"affectsGlobalScope": false
},
"./node_modules/@types/node/string_decoder.d.ts": {
"version": "d67e08745494b000da9410c1ae2fdc9965fc6d593fe0f381a47491f75417d457",
"signature": "d67e08745494b000da9410c1ae2fdc9965fc6d593fe0f381a47491f75417d457",
"affectsGlobalScope": false
},
"./node_modules/@types/node/timers.d.ts": {
"version": "b40652bf8ce4a18133b31349086523b219724dca8df3448c1a0742528e7ad5b9",
"signature": "b40652bf8ce4a18133b31349086523b219724dca8df3448c1a0742528e7ad5b9",
"affectsGlobalScope": false
},
"./node_modules/@types/node/tls.d.ts": {
"version": "c52eb62e3388a01b966c57bd14ca0ee9d5f6e656d6a18f6ce6b7cdece63734a3",
"signature": "c52eb62e3388a01b966c57bd14ca0ee9d5f6e656d6a18f6ce6b7cdece63734a3",
"affectsGlobalScope": false
},
"./node_modules/@types/node/trace_events.d.ts": {
"version": "a77fdb357c78b70142b2fdbbfb72958d69e8f765fd2a3c69946c1018e89d4638",
"signature": "a77fdb357c78b70142b2fdbbfb72958d69e8f765fd2a3c69946c1018e89d4638",
"affectsGlobalScope": false
},
"./node_modules/@types/node/tty.d.ts": {
"version": "3c2ac350c3baa61fd2b1925844109e098f4376d0768a4643abc82754fd752748",
"signature": "3c2ac350c3baa61fd2b1925844109e098f4376d0768a4643abc82754fd752748",
"affectsGlobalScope": false
},
"./node_modules/@types/node/url.d.ts": {
"version": "80ffc1786a5dab91b4aa59a72720f02f25df8b7c76b593e04d5e381aec284ccb",
"signature": "80ffc1786a5dab91b4aa59a72720f02f25df8b7c76b593e04d5e381aec284ccb",
"affectsGlobalScope": false
},
"./node_modules/@types/node/util.d.ts": {
"version": "f5b9d446783f075eed9e93dfba1a5055b3fd61aab285fef3bbc761eadf598204",
"signature": "f5b9d446783f075eed9e93dfba1a5055b3fd61aab285fef3bbc761eadf598204",
"affectsGlobalScope": false
},
"./node_modules/@types/node/v8.d.ts": {
"version": "289be113bad7ee27ee7fa5b1e373c964c9789a5e9ed7db5ddcb631371120b953",
"signature": "289be113bad7ee27ee7fa5b1e373c964c9789a5e9ed7db5ddcb631371120b953",
"affectsGlobalScope": false
},
"./node_modules/@types/node/vm.d.ts": {
"version": "baf0b82ffc5d2616f44a6fb1f81e8d798545bebf0c30f5d8b003a1dba1acfb3f",
"signature": "baf0b82ffc5d2616f44a6fb1f81e8d798545bebf0c30f5d8b003a1dba1acfb3f",
"affectsGlobalScope": false
},
"./node_modules/@types/node/worker_threads.d.ts": {
"version": "c6a5b34f1e725019445754f1e733585f113e0dced75f137bd3c4af5853d3f6ab",
"signature": "c6a5b34f1e725019445754f1e733585f113e0dced75f137bd3c4af5853d3f6ab",
"affectsGlobalScope": false
},
"./node_modules/@types/node/zlib.d.ts": {
"version": "15fbe50526244954eb2f933546bca6cdcf0db16c9428d099b3b386c1db5799ab",
"signature": "15fbe50526244954eb2f933546bca6cdcf0db16c9428d099b3b386c1db5799ab",
"affectsGlobalScope": false
},
"./node_modules/@types/node/ts3.4/base.d.ts": {
"version": "d44028ae0127eb3e9fcfa5f55a8b81d64775ce15aca1020fe25c511bbb055834",
"signature": "d44028ae0127eb3e9fcfa5f55a8b81d64775ce15aca1020fe25c511bbb055834",
"affectsGlobalScope": false
},
"./node_modules/@types/node/globals.global.d.ts": {
"version": "2708349d5a11a5c2e5f3a0765259ebe7ee00cdcc8161cb9990cb4910328442a1",
"signature": "2708349d5a11a5c2e5f3a0765259ebe7ee00cdcc8161cb9990cb4910328442a1",
"affectsGlobalScope": true
},
"./node_modules/@types/node/wasi.d.ts": {
"version": "4e0a4d84b15692ea8669fe4f3d05a4f204567906b1347da7a58b75f45bae48d3",
"signature": "4e0a4d84b15692ea8669fe4f3d05a4f204567906b1347da7a58b75f45bae48d3",
"affectsGlobalScope": false
},
"./node_modules/@types/node/ts3.6/base.d.ts": {
"version": "ad1ae5ae98eceb9af99061e83e867b9897d267aebc8f3b938c9424deabadf4bb",
"signature": "ad1ae5ae98eceb9af99061e83e867b9897d267aebc8f3b938c9424deabadf4bb",
"affectsGlobalScope": false
},
"./node_modules/@types/node/assert.d.ts": {
"version": "6fbe72eed85e363ad83b763e03be824558c6ea7456c7259a48bcf0afdeb9d7e4",
"signature": "6fbe72eed85e363ad83b763e03be824558c6ea7456c7259a48bcf0afdeb9d7e4",
"affectsGlobalScope": false
},
"./node_modules/@types/node/base.d.ts": {
"version": "e61a21e9418f279bc480394a94d1581b2dee73747adcbdef999b6737e34d721b",
"signature": "e61a21e9418f279bc480394a94d1581b2dee73747adcbdef999b6737e34d721b",
"affectsGlobalScope": false
},
"./node_modules/@types/node/index.d.ts": {
"version": "5825520e2099309182c6e2a2b3061b060d42a098c58f67d1754880a7e2cce99a",
"signature": "5825520e2099309182c6e2a2b3061b060d42a098c58f67d1754880a7e2cce99a",
"affectsGlobalScope": false
},
"./node_modules/@types/minimatch/index.d.ts": {
"version": "1d1e6bd176eee5970968423d7e215bfd66828b6db8d54d17afec05a831322633",
"signature": "1d1e6bd176eee5970968423d7e215bfd66828b6db8d54d17afec05a831322633",
"affectsGlobalScope": false
},
"./node_modules/@types/glob/index.d.ts": {
"version": "393137c76bd922ba70a2f8bf1ade4f59a16171a02fb25918c168d48875b0cfb0",
"signature": "393137c76bd922ba70a2f8bf1ade4f59a16171a02fb25918c168d48875b0cfb0",
"affectsGlobalScope": false
},
"./node_modules/@types/html-minifier-terser/index.d.ts": {
"version": "6767cce098e1e6369c26258b7a1f9e569c5467d501a47a090136d5ea6e80ae6d",
"signature": "6767cce098e1e6369c26258b7a1f9e569c5467d501a47a090136d5ea6e80ae6d",
"affectsGlobalScope": false
},
"./node_modules/@types/parse-json/index.d.ts": {
"version": "2b8264b2fefd7367e0f20e2c04eed5d3038831fe00f5efbc110ff0131aab899b",
"signature": "2b8264b2fefd7367e0f20e2c04eed5d3038831fe00f5efbc110ff0131aab899b",
"affectsGlobalScope": false
},
"./node_modules/@types/q/index.d.ts": {
"version": "f9a2dd6a6084665f093ed0e9664b8e673be2a45e342a59dd4e0e4e552e68a9ad",
"signature": "f9a2dd6a6084665f093ed0e9664b8e673be2a45e342a59dd4e0e4e552e68a9ad",
"affectsGlobalScope": false
},
"./node_modules/@types/source-list-map/index.d.ts": {
"version": "67fc055eb86a0632e2e072838f889ffe1754083cb13c8c80a06a7d895d877aae",
"signature": "67fc055eb86a0632e2e072838f889ffe1754083cb13c8c80a06a7d895d877aae",
"affectsGlobalScope": false
},
"./node_modules/@types/tapable/index.d.ts": {
"version": "d558a0fe921ebcc88d3212c2c42108abf9f0d694d67ebdeba37d7728c044f579",
"signature": "d558a0fe921ebcc88d3212c2c42108abf9f0d694d67ebdeba37d7728c044f579",
"affectsGlobalScope": false
},
"./node_modules/source-map/source-map.d.ts": {
"version": "2887592574fcdfd087647c539dcb0fbe5af2521270dad4a37f9d17c16190d579",
"signature": "2887592574fcdfd087647c539dcb0fbe5af2521270dad4a37f9d17c16190d579",
"affectsGlobalScope": false
},
"./node_modules/@types/uglify-js/index.d.ts": {
"version": "0215efc2c3f40fd9ec91f19d277afc9efba41cee054fd0be4c92e75cb10cf2c0",
"signature": "0215efc2c3f40fd9ec91f19d277afc9efba41cee054fd0be4c92e75cb10cf2c0",
"affectsGlobalScope": false
},
"./node_modules/tapable/tapable.d.ts": {
"version": "b395ec0779c66de885f97974534e95ee2c8bbf9acaf5857a6782ddc32972b6d8",
"signature": "b395ec0779c66de885f97974534e95ee2c8bbf9acaf5857a6782ddc32972b6d8",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts": {
"version": "b90c59ac4682368a01c83881b814738eb151de8a58f52eb7edadea2bcffb11b9",
"signature": "b90c59ac4682368a01c83881b814738eb151de8a58f52eb7edadea2bcffb11b9",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack-sources/lib/source.d.ts": {
"version": "8560a87b2e9f8e2c3808c8f6172c9b7eb6c9b08cb9f937db71c285ecf292c81d",
"signature": "8560a87b2e9f8e2c3808c8f6172c9b7eb6c9b08cb9f937db71c285ecf292c81d",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack-sources/lib/compatsource.d.ts": {
"version": "ffe3931ff864f28d80ae2f33bd11123ad3d7bad9896b910a1e61504cc093e1f5",
"signature": "ffe3931ff864f28d80ae2f33bd11123ad3d7bad9896b910a1e61504cc093e1f5",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack-sources/lib/concatsource.d.ts": {
"version": "083c1bd82f8dc3a1ed6fc9e8eaddf141f7c05df418eca386598821e045253af9",
"signature": "083c1bd82f8dc3a1ed6fc9e8eaddf141f7c05df418eca386598821e045253af9",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack-sources/lib/originalsource.d.ts": {
"version": "274ebe605bd7f71ce161f9f5328febc7d547a2929f803f04b44ec4a7d8729517",
"signature": "274ebe605bd7f71ce161f9f5328febc7d547a2929f803f04b44ec4a7d8729517",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack-sources/lib/prefixsource.d.ts": {
"version": "6ca0207e70d985a24396583f55836b10dc181063ab6069733561bfde404d1bad",
"signature": "6ca0207e70d985a24396583f55836b10dc181063ab6069733561bfde404d1bad",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack-sources/lib/rawsource.d.ts": {
"version": "5908142efeaab38ffdf43927ee0af681ae77e0d7672b956dfb8b6c705dbfe106",
"signature": "5908142efeaab38ffdf43927ee0af681ae77e0d7672b956dfb8b6c705dbfe106",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack-sources/lib/replacesource.d.ts": {
"version": "f772b188b943549b5c5eb803133314b8aa7689eced80eed0b70e2f30ca07ab9c",
"signature": "f772b188b943549b5c5eb803133314b8aa7689eced80eed0b70e2f30ca07ab9c",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack-sources/lib/sizeonlysource.d.ts": {
"version": "0026b816ef05cfbf290e8585820eef0f13250438669107dfc44482bac007b14f",
"signature": "0026b816ef05cfbf290e8585820eef0f13250438669107dfc44482bac007b14f",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack-sources/lib/sourcemapsource.d.ts": {
"version": "8ef5aad624890acfe0fa48230edce255f00934016d16acb8de0edac0ea5b21bb",
"signature": "8ef5aad624890acfe0fa48230edce255f00934016d16acb8de0edac0ea5b21bb",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack-sources/lib/index.d.ts": {
"version": "9af6248ff4baf0c1ddc62bb0bc43197437bd5fb2c95ff8e10e4cf2e699ea45c1",
"signature": "9af6248ff4baf0c1ddc62bb0bc43197437bd5fb2c95ff8e10e4cf2e699ea45c1",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack-sources/lib/cachedsource.d.ts": {
"version": "d84398556ba4595ee6be554671da142cfe964cbdebb2f0c517a10f76f2b016c0",
"signature": "d84398556ba4595ee6be554671da142cfe964cbdebb2f0c517a10f76f2b016c0",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack-sources/index.d.ts": {
"version": "89b42f8ee5d387a39db85ee2c7123a391c3ede266a2bcd502c85ad55626c3b2b",
"signature": "89b42f8ee5d387a39db85ee2c7123a391c3ede266a2bcd502c85ad55626c3b2b",
"affectsGlobalScope": false
},
"./node_modules/@types/webpack/index.d.ts": {
"version": "6a11a44c28aeb36e551aad316a3c30e5edd9244396378f664dea164c4ce49fe0",
"signature": "6a11a44c28aeb36e551aad316a3c30e5edd9244396378f664dea164c4ce49fe0",
"affectsGlobalScope": false
}
},
"options": {
"target": 1,
"module": 5,
"strict": true,
"jsx": 1,
"declaration": true,
"incremental": true,
"importHelpers": true,
"moduleResolution": 2,
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": false,
"baseUrl": "./",
"lib": [
"lib.es5.d.ts",
"lib.es2015.promise.d.ts",
"lib.dom.d.ts",
"lib.dom.iterable.d.ts",
"lib.scripthost.d.ts"
],
"configFilePath": "./tsconfig.json"
},
"referencedMap": {
"./node_modules/@popperjs/core/index.d.ts": [
"./node_modules/@popperjs/core/lib/index.d.ts"
],
"./node_modules/@popperjs/core/lib/createpopper.d.ts": [
"./node_modules/@popperjs/core/lib/types.d.ts",
"./node_modules/@popperjs/core/lib/utils/detectoverflow.d.ts"
],
"./node_modules/@popperjs/core/lib/index.d.ts": [
"./node_modules/@popperjs/core/lib/createpopper.d.ts",
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/index.d.ts",
"./node_modules/@popperjs/core/lib/popper-lite.d.ts",
"./node_modules/@popperjs/core/lib/popper.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/applystyles.d.ts": [
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/arrow.d.ts": [
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/computestyles.d.ts": [
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/eventlisteners.d.ts": [
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/flip.d.ts": [
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/hide.d.ts": [
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/index.d.ts": [
"./node_modules/@popperjs/core/lib/modifiers/applystyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/arrow.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/computestyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/eventlisteners.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/flip.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/hide.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/offset.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/popperoffsets.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/preventoverflow.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/offset.d.ts": [
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/popperoffsets.d.ts": [
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/preventoverflow.d.ts": [
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/popper-lite.d.ts": [
"./node_modules/@popperjs/core/lib/createpopper.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/computestyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/eventlisteners.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/popper.d.ts": [
"./node_modules/@popperjs/core/lib/createpopper.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/arrow.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/computestyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/eventlisteners.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/flip.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/index.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/offset.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/preventoverflow.d.ts",
"./node_modules/@popperjs/core/lib/popper-lite.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/types.d.ts": [
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/applystyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/arrow.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/computestyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/eventlisteners.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/flip.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/hide.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/offset.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/popperoffsets.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/preventoverflow.d.ts"
],
"./node_modules/@popperjs/core/lib/utils/detectoverflow.d.ts": [
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@types/eslint-scope/index.d.ts": [
"./node_modules/@types/eslint/index.d.ts",
"./node_modules/@types/estree/index.d.ts"
],
"./node_modules/@types/eslint/index.d.ts": [
"./node_modules/@types/eslint/helpers.d.ts",
"./node_modules/@types/estree/index.d.ts",
"./node_modules/@types/json-schema/index.d.ts"
],
"./node_modules/@types/glob/index.d.ts": [
"./node_modules/@types/minimatch/index.d.ts",
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/index.d.ts"
],
"./node_modules/@types/node/base.d.ts": [
"./node_modules/@types/node/assert.d.ts",
"./node_modules/@types/node/ts3.6/base.d.ts"
],
"./node_modules/@types/node/child_process.d.ts": [
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/fs.d.ts",
"./node_modules/@types/node/net.d.ts",
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/node/cluster.d.ts": [
"./node_modules/@types/node/child_process.d.ts",
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/net.d.ts"
],
"./node_modules/@types/node/console.d.ts": [
"./node_modules/@types/node/util.d.ts"
],
"./node_modules/@types/node/constants.d.ts": [
"./node_modules/@types/node/crypto.d.ts",
"./node_modules/@types/node/fs.d.ts",
"./node_modules/@types/node/os.d.ts"
],
"./node_modules/@types/node/crypto.d.ts": [
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/node/dgram.d.ts": [
"./node_modules/@types/node/dns.d.ts",
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/net.d.ts"
],
"./node_modules/@types/node/domain.d.ts": [
"./node_modules/@types/node/events.d.ts"
],
"./node_modules/@types/node/fs.d.ts": [
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/fs/promises.d.ts",
"./node_modules/@types/node/stream.d.ts",
"./node_modules/@types/node/url.d.ts"
],
"./node_modules/@types/node/fs/promises.d.ts": [
"./node_modules/@types/node/fs.d.ts"
],
"./node_modules/@types/node/http.d.ts": [
"./node_modules/@types/node/net.d.ts",
"./node_modules/@types/node/stream.d.ts",
"./node_modules/@types/node/url.d.ts"
],
"./node_modules/@types/node/http2.d.ts": [
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/fs.d.ts",
"./node_modules/@types/node/http.d.ts",
"./node_modules/@types/node/net.d.ts",
"./node_modules/@types/node/stream.d.ts",
"./node_modules/@types/node/tls.d.ts",
"./node_modules/@types/node/url.d.ts"
],
"./node_modules/@types/node/https.d.ts": [
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/http.d.ts",
"./node_modules/@types/node/tls.d.ts",
"./node_modules/@types/node/url.d.ts"
],
"./node_modules/@types/node/index.d.ts": [
"./node_modules/@types/node/base.d.ts"
],
"./node_modules/@types/node/inspector.d.ts": [
"./node_modules/@types/node/events.d.ts"
],
"./node_modules/@types/node/module.d.ts": [
"./node_modules/@types/node/url.d.ts"
],
"./node_modules/@types/node/net.d.ts": [
"./node_modules/@types/node/dns.d.ts",
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/node/perf_hooks.d.ts": [
"./node_modules/@types/node/async_hooks.d.ts"
],
"./node_modules/@types/node/process.d.ts": [
"./node_modules/@types/node/tty.d.ts"
],
"./node_modules/@types/node/readline.d.ts": [
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/node/repl.d.ts": [
"./node_modules/@types/node/readline.d.ts",
"./node_modules/@types/node/util.d.ts",
"./node_modules/@types/node/vm.d.ts"
],
"./node_modules/@types/node/stream.d.ts": [
"./node_modules/@types/node/events.d.ts"
],
"./node_modules/@types/node/tls.d.ts": [
"./node_modules/@types/node/crypto.d.ts",
"./node_modules/@types/node/dns.d.ts",
"./node_modules/@types/node/net.d.ts",
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/node/ts3.4/base.d.ts": [
"./node_modules/@types/node/async_hooks.d.ts",
"./node_modules/@types/node/buffer.d.ts",
"./node_modules/@types/node/child_process.d.ts",
"./node_modules/@types/node/cluster.d.ts",
"./node_modules/@types/node/console.d.ts",
"./node_modules/@types/node/constants.d.ts",
"./node_modules/@types/node/crypto.d.ts",
"./node_modules/@types/node/dgram.d.ts",
"./node_modules/@types/node/dns.d.ts",
"./node_modules/@types/node/domain.d.ts",
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/fs.d.ts",
"./node_modules/@types/node/fs/promises.d.ts",
"./node_modules/@types/node/globals.d.ts",
"./node_modules/@types/node/http.d.ts",
"./node_modules/@types/node/http2.d.ts",
"./node_modules/@types/node/https.d.ts",
"./node_modules/@types/node/inspector.d.ts",
"./node_modules/@types/node/module.d.ts",
"./node_modules/@types/node/net.d.ts",
"./node_modules/@types/node/os.d.ts",
"./node_modules/@types/node/path.d.ts",
"./node_modules/@types/node/perf_hooks.d.ts",
"./node_modules/@types/node/process.d.ts",
"./node_modules/@types/node/punycode.d.ts",
"./node_modules/@types/node/querystring.d.ts",
"./node_modules/@types/node/readline.d.ts",
"./node_modules/@types/node/repl.d.ts",
"./node_modules/@types/node/stream.d.ts",
"./node_modules/@types/node/string_decoder.d.ts",
"./node_modules/@types/node/timers.d.ts",
"./node_modules/@types/node/tls.d.ts",
"./node_modules/@types/node/trace_events.d.ts",
"./node_modules/@types/node/tty.d.ts",
"./node_modules/@types/node/url.d.ts",
"./node_modules/@types/node/util.d.ts",
"./node_modules/@types/node/v8.d.ts",
"./node_modules/@types/node/vm.d.ts",
"./node_modules/@types/node/worker_threads.d.ts",
"./node_modules/@types/node/zlib.d.ts"
],
"./node_modules/@types/node/ts3.6/base.d.ts": [
"./node_modules/@types/node/globals.global.d.ts",
"./node_modules/@types/node/ts3.4/base.d.ts",
"./node_modules/@types/node/wasi.d.ts"
],
"./node_modules/@types/node/tty.d.ts": [
"./node_modules/@types/node/net.d.ts"
],
"./node_modules/@types/node/url.d.ts": [
"./node_modules/@types/node/querystring.d.ts"
],
"./node_modules/@types/node/v8.d.ts": [
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/node/worker_threads.d.ts": [
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/fs/promises.d.ts",
"./node_modules/@types/node/stream.d.ts",
"./node_modules/@types/node/url.d.ts",
"./node_modules/@types/node/vm.d.ts"
],
"./node_modules/@types/node/zlib.d.ts": [
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/uglify-js/index.d.ts": [
"./node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack-sources/index.d.ts": [
"./node_modules/@types/node/index.d.ts",
"./node_modules/@types/webpack-sources/lib/cachedsource.d.ts",
"./node_modules/@types/webpack-sources/lib/compatsource.d.ts",
"./node_modules/@types/webpack-sources/lib/concatsource.d.ts",
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/originalsource.d.ts",
"./node_modules/@types/webpack-sources/lib/prefixsource.d.ts",
"./node_modules/@types/webpack-sources/lib/rawsource.d.ts",
"./node_modules/@types/webpack-sources/lib/replacesource.d.ts",
"./node_modules/@types/webpack-sources/lib/sizeonlysource.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts",
"./node_modules/@types/webpack-sources/lib/sourcemapsource.d.ts"
],
"./node_modules/@types/webpack-sources/lib/cachedsource.d.ts": [
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts",
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack-sources/lib/compatsource.d.ts": [
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts"
],
"./node_modules/@types/webpack-sources/lib/concatsource.d.ts": [
"./node_modules/@types/source-list-map/index.d.ts",
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts",
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack-sources/lib/index.d.ts": [
"./node_modules/@types/webpack-sources/lib/cachedsource.d.ts",
"./node_modules/@types/webpack-sources/lib/compatsource.d.ts",
"./node_modules/@types/webpack-sources/lib/concatsource.d.ts",
"./node_modules/@types/webpack-sources/lib/originalsource.d.ts",
"./node_modules/@types/webpack-sources/lib/prefixsource.d.ts",
"./node_modules/@types/webpack-sources/lib/rawsource.d.ts",
"./node_modules/@types/webpack-sources/lib/replacesource.d.ts",
"./node_modules/@types/webpack-sources/lib/sizeonlysource.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts",
"./node_modules/@types/webpack-sources/lib/sourcemapsource.d.ts",
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack-sources/lib/originalsource.d.ts": [
"./node_modules/@types/source-list-map/index.d.ts",
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts",
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack-sources/lib/prefixsource.d.ts": [
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts"
],
"./node_modules/@types/webpack-sources/lib/rawsource.d.ts": [
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts"
],
"./node_modules/@types/webpack-sources/lib/replacesource.d.ts": [
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts"
],
"./node_modules/@types/webpack-sources/lib/sizeonlysource.d.ts": [
"./node_modules/@types/webpack-sources/lib/source.d.ts"
],
"./node_modules/@types/webpack-sources/lib/source.d.ts": [
"./node_modules/@types/node/crypto.d.ts",
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack-sources/lib/sourcemapsource.d.ts": [
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts",
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack/index.d.ts": [
"./node_modules/@types/anymatch/index.d.ts",
"./node_modules/@types/node/crypto.d.ts",
"./node_modules/@types/node/index.d.ts",
"./node_modules/@types/uglify-js/index.d.ts",
"./node_modules/@types/webpack-sources/index.d.ts",
"./node_modules/source-map/source-map.d.ts",
"./node_modules/tapable/tapable.d.ts"
],
"./src/components/alert/alert.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/mixins/index.ts",
"./src/utils/index.ts"
],
"./src/components/alert/index.ts": [
"./src/components/alert/alert.ts"
],
"./src/components/avatar/avatar.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/mixins/index.ts"
],
"./src/components/avatar/index.ts": [
"./src/components/avatar/avatar.ts"
],
"./src/components/back-top/back-top.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts"
],
"./src/components/back-top/index.ts": [
"./src/components/back-top/back-top.ts"
],
"./src/components/badge/badge.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/mixins/index.ts",
"./src/utils/index.ts"
],
"./src/components/badge/index.ts": [
"./src/components/badge/badge.ts"
],
"./src/components/button/button.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/utils/index.ts"
],
"./src/components/button/index.ts": [
"./src/components/button/button.ts"
],
"./src/components/card/card.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/utils/index.ts"
],
"./src/components/card/index.ts": [
"./src/components/card/card.ts"
],
"./src/components/collapse/collapse.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/elem.ts",
"./src/dom-utils/index.ts",
"./src/utils/index.ts"
],
"./src/components/collapse/index.ts": [
"./src/components/collapse/collapse.ts"
],
"./src/components/divider/divider.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts"
],
"./src/components/divider/index.ts": [
"./src/components/divider/divider.ts"
],
"./src/components/drawer/drawer.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/mixins/index.ts",
"./src/utils/index.ts"
],
"./src/components/drawer/index.ts": [
"./src/components/drawer/drawer.ts"
],
"./src/components/dropdown/dropdown.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/mixins/index.ts",
"./src/utils/index.ts"
],
"./src/components/dropdown/index.ts": [
"./src/components/dropdown/dropdown.ts"
],
"./src/components/loading-bar/index.ts": [
"./src/components/loading-bar/loading-bar.ts"
],
"./src/components/loading-bar/loading-bar.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/mixins/index.ts",
"./src/utils/index.ts"
],
"./src/components/message/index.ts": [
"./src/components/message/message.ts"
],
"./src/components/message/message.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/mixins/index.ts",
"./src/utils/index.ts"
],
"./src/components/modal/index.ts": [
"./src/components/modal/modal.ts"
],
"./src/components/modal/modal.ts": [
"./src/components/button/index.ts",
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/mixins/index.ts",
"./src/utils/index.ts"
],
"./src/components/notice/index.ts": [
"./src/components/notice/notice.ts"
],
"./src/components/notice/notice.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/mixins/index.ts",
"./src/utils/index.ts"
],
"./src/components/poptip/index.ts": [
"./src/components/poptip/poptip.ts"
],
"./src/components/poptip/poptip.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/mixins/index.ts",
"./src/mixins/tooltip.ts",
"./src/utils/index.ts"
],
"./src/components/progress/index.ts": [
"./src/components/progress/progress.ts"
],
"./src/components/progress/progress.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/utils/index.ts"
],
"./src/components/result/index.ts": [
"./src/components/result/result.ts"
],
"./src/components/result/result.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/images.d.ts"
],
"./src/components/skeleton/index.ts": [
"./src/components/skeleton/skeleton.ts"
],
"./src/components/skeleton/skeleton.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts"
],
"./src/components/spin/index.ts": [
"./src/components/spin/spin.ts"
],
"./src/components/spin/spin.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/mixins/index.ts",
"./src/utils/index.ts"
],
"./src/components/steps/index.ts": [
"./src/components/steps/steps.ts"
],
"./src/components/steps/steps.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/mixins/index.ts",
"./src/utils/index.ts"
],
"./src/components/switch/index.ts": [
"./src/components/switch/switch.ts"
],
"./src/components/switch/switch.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/utils/index.ts"
],
"./src/components/tabs/index.ts": [
"./src/components/tabs/tabs.ts"
],
"./src/components/tabs/tabs.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/utils/index.ts"
],
"./src/components/time/index.ts": [
"./src/components/time/time.ts"
],
"./src/components/time/time.ts": [
"./node_modules/moment/ts3.1-typings/moment.d.ts",
"./src/components/prefix.ts",
"./src/dom-utils/index.ts"
],
"./src/components/timeline/index.ts": [
"./src/components/timeline/timeline.ts"
],
"./src/components/timeline/timeline.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts"
],
"./src/components/tooltip/index.ts": [
"./src/components/tooltip/tooltip.ts"
],
"./src/components/tooltip/tooltip.ts": [
"./src/components/prefix.ts",
"./src/dom-utils/index.ts",
"./src/mixins/index.ts",
"./src/utils/index.ts"
],
"./src/dom-utils/index.ts": [
"./src/dom-utils/bind.ts",
"./src/dom-utils/elem.ts",
"./src/dom-utils/prev&next.ts",
"./src/dom-utils/remove-attrs.ts",
"./src/dom-utils/siblings.ts",
"./src/dom-utils/slide.ts"
],
"./src/index.ts": [
"./src/rabbit-design.ts"
],
"./src/mixins/arrow.ts": [
"./src/dom-utils/index.ts"
],
"./src/mixins/click-outside.ts": [
"./src/dom-utils/index.ts",
"./src/mixins/index.ts"
],
"./src/mixins/index.ts": [
"./src/mixins/arrow.ts",
"./src/mixins/cb-promise.ts",
"./src/mixins/click-outside.ts",
"./src/mixins/css-transition.ts",
"./src/mixins/scrollable.ts",
"./src/mixins/tooltip.ts",
"./src/mixins/warn.ts"
],
"./src/mixins/scrollable.ts": [
"./src/dom-utils/index.ts"
],
"./src/mixins/tooltip.ts": [
"./node_modules/@popperjs/core/index.d.ts",
"./src/dom-utils/index.ts",
"./src/utils/index.ts"
],
"./src/rabbit-design.ts": [
"./src/components/alert/index.ts",
"./src/components/avatar/index.ts",
"./src/components/back-top/index.ts",
"./src/components/badge/index.ts",
"./src/components/button/index.ts",
"./src/components/card/index.ts",
"./src/components/collapse/index.ts",
"./src/components/divider/index.ts",
"./src/components/drawer/index.ts",
"./src/components/dropdown/index.ts",
"./src/components/loading-bar/index.ts",
"./src/components/message/index.ts",
"./src/components/modal/index.ts",
"./src/components/notice/index.ts",
"./src/components/poptip/index.ts",
"./src/components/progress/index.ts",
"./src/components/result/index.ts",
"./src/components/skeleton/index.ts",
"./src/components/spin/index.ts",
"./src/components/steps/index.ts",
"./src/components/switch/index.ts",
"./src/components/tabs/index.ts",
"./src/components/time/index.ts",
"./src/components/timeline/index.ts",
"./src/components/tooltip/index.ts"
],
"./src/utils/check-type.ts": [
"./src/mixins/warn.ts"
],
"./src/utils/destroy.ts": [
"./src/mixins/index.ts"
],
"./src/utils/index.ts": [
"./src/utils/check-type.ts",
"./src/utils/destroy.ts",
"./src/utils/use-html-string.ts",
"./src/utils/validcomps.ts"
],
"./src/utils/use-html-string.ts": [
"./src/dom-utils/index.ts"
]
},
"exportedModulesMap": {
"./node_modules/@popperjs/core/index.d.ts": [
"./node_modules/@popperjs/core/lib/index.d.ts"
],
"./node_modules/@popperjs/core/lib/createpopper.d.ts": [
"./node_modules/@popperjs/core/lib/types.d.ts",
"./node_modules/@popperjs/core/lib/utils/detectoverflow.d.ts"
],
"./node_modules/@popperjs/core/lib/index.d.ts": [
"./node_modules/@popperjs/core/lib/createpopper.d.ts",
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/index.d.ts",
"./node_modules/@popperjs/core/lib/popper-lite.d.ts",
"./node_modules/@popperjs/core/lib/popper.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/applystyles.d.ts": [
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/arrow.d.ts": [
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/computestyles.d.ts": [
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/eventlisteners.d.ts": [
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/flip.d.ts": [
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/hide.d.ts": [
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/index.d.ts": [
"./node_modules/@popperjs/core/lib/modifiers/applystyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/arrow.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/computestyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/eventlisteners.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/flip.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/hide.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/offset.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/popperoffsets.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/preventoverflow.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/offset.d.ts": [
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/popperoffsets.d.ts": [
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/modifiers/preventoverflow.d.ts": [
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/popper-lite.d.ts": [
"./node_modules/@popperjs/core/lib/createpopper.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/computestyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/eventlisteners.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/popper.d.ts": [
"./node_modules/@popperjs/core/lib/createpopper.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/arrow.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/computestyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/eventlisteners.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/flip.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/index.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/offset.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/preventoverflow.d.ts",
"./node_modules/@popperjs/core/lib/popper-lite.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@popperjs/core/lib/types.d.ts": [
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/applystyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/arrow.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/computestyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/eventlisteners.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/flip.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/hide.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/offset.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/popperoffsets.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/preventoverflow.d.ts"
],
"./node_modules/@popperjs/core/lib/utils/detectoverflow.d.ts": [
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts"
],
"./node_modules/@types/eslint-scope/index.d.ts": [
"./node_modules/@types/eslint/index.d.ts",
"./node_modules/@types/estree/index.d.ts"
],
"./node_modules/@types/eslint/index.d.ts": [
"./node_modules/@types/eslint/helpers.d.ts",
"./node_modules/@types/estree/index.d.ts",
"./node_modules/@types/json-schema/index.d.ts"
],
"./node_modules/@types/glob/index.d.ts": [
"./node_modules/@types/minimatch/index.d.ts",
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/index.d.ts"
],
"./node_modules/@types/node/base.d.ts": [
"./node_modules/@types/node/assert.d.ts",
"./node_modules/@types/node/ts3.6/base.d.ts"
],
"./node_modules/@types/node/child_process.d.ts": [
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/fs.d.ts",
"./node_modules/@types/node/net.d.ts",
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/node/cluster.d.ts": [
"./node_modules/@types/node/child_process.d.ts",
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/net.d.ts"
],
"./node_modules/@types/node/console.d.ts": [
"./node_modules/@types/node/util.d.ts"
],
"./node_modules/@types/node/constants.d.ts": [
"./node_modules/@types/node/crypto.d.ts",
"./node_modules/@types/node/fs.d.ts",
"./node_modules/@types/node/os.d.ts"
],
"./node_modules/@types/node/crypto.d.ts": [
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/node/dgram.d.ts": [
"./node_modules/@types/node/dns.d.ts",
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/net.d.ts"
],
"./node_modules/@types/node/domain.d.ts": [
"./node_modules/@types/node/events.d.ts"
],
"./node_modules/@types/node/fs.d.ts": [
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/fs/promises.d.ts",
"./node_modules/@types/node/stream.d.ts",
"./node_modules/@types/node/url.d.ts"
],
"./node_modules/@types/node/fs/promises.d.ts": [
"./node_modules/@types/node/fs.d.ts"
],
"./node_modules/@types/node/http.d.ts": [
"./node_modules/@types/node/net.d.ts",
"./node_modules/@types/node/stream.d.ts",
"./node_modules/@types/node/url.d.ts"
],
"./node_modules/@types/node/http2.d.ts": [
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/fs.d.ts",
"./node_modules/@types/node/http.d.ts",
"./node_modules/@types/node/net.d.ts",
"./node_modules/@types/node/stream.d.ts",
"./node_modules/@types/node/tls.d.ts",
"./node_modules/@types/node/url.d.ts"
],
"./node_modules/@types/node/https.d.ts": [
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/http.d.ts",
"./node_modules/@types/node/tls.d.ts",
"./node_modules/@types/node/url.d.ts"
],
"./node_modules/@types/node/index.d.ts": [
"./node_modules/@types/node/base.d.ts"
],
"./node_modules/@types/node/inspector.d.ts": [
"./node_modules/@types/node/events.d.ts"
],
"./node_modules/@types/node/module.d.ts": [
"./node_modules/@types/node/url.d.ts"
],
"./node_modules/@types/node/net.d.ts": [
"./node_modules/@types/node/dns.d.ts",
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/node/perf_hooks.d.ts": [
"./node_modules/@types/node/async_hooks.d.ts"
],
"./node_modules/@types/node/process.d.ts": [
"./node_modules/@types/node/tty.d.ts"
],
"./node_modules/@types/node/readline.d.ts": [
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/node/repl.d.ts": [
"./node_modules/@types/node/readline.d.ts",
"./node_modules/@types/node/util.d.ts",
"./node_modules/@types/node/vm.d.ts"
],
"./node_modules/@types/node/stream.d.ts": [
"./node_modules/@types/node/events.d.ts"
],
"./node_modules/@types/node/tls.d.ts": [
"./node_modules/@types/node/crypto.d.ts",
"./node_modules/@types/node/dns.d.ts",
"./node_modules/@types/node/net.d.ts",
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/node/ts3.4/base.d.ts": [
"./node_modules/@types/node/async_hooks.d.ts",
"./node_modules/@types/node/buffer.d.ts",
"./node_modules/@types/node/child_process.d.ts",
"./node_modules/@types/node/cluster.d.ts",
"./node_modules/@types/node/console.d.ts",
"./node_modules/@types/node/constants.d.ts",
"./node_modules/@types/node/crypto.d.ts",
"./node_modules/@types/node/dgram.d.ts",
"./node_modules/@types/node/dns.d.ts",
"./node_modules/@types/node/domain.d.ts",
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/fs.d.ts",
"./node_modules/@types/node/fs/promises.d.ts",
"./node_modules/@types/node/globals.d.ts",
"./node_modules/@types/node/http.d.ts",
"./node_modules/@types/node/http2.d.ts",
"./node_modules/@types/node/https.d.ts",
"./node_modules/@types/node/inspector.d.ts",
"./node_modules/@types/node/module.d.ts",
"./node_modules/@types/node/net.d.ts",
"./node_modules/@types/node/os.d.ts",
"./node_modules/@types/node/path.d.ts",
"./node_modules/@types/node/perf_hooks.d.ts",
"./node_modules/@types/node/process.d.ts",
"./node_modules/@types/node/punycode.d.ts",
"./node_modules/@types/node/querystring.d.ts",
"./node_modules/@types/node/readline.d.ts",
"./node_modules/@types/node/repl.d.ts",
"./node_modules/@types/node/stream.d.ts",
"./node_modules/@types/node/string_decoder.d.ts",
"./node_modules/@types/node/timers.d.ts",
"./node_modules/@types/node/tls.d.ts",
"./node_modules/@types/node/trace_events.d.ts",
"./node_modules/@types/node/tty.d.ts",
"./node_modules/@types/node/url.d.ts",
"./node_modules/@types/node/util.d.ts",
"./node_modules/@types/node/v8.d.ts",
"./node_modules/@types/node/vm.d.ts",
"./node_modules/@types/node/worker_threads.d.ts",
"./node_modules/@types/node/zlib.d.ts"
],
"./node_modules/@types/node/ts3.6/base.d.ts": [
"./node_modules/@types/node/globals.global.d.ts",
"./node_modules/@types/node/ts3.4/base.d.ts",
"./node_modules/@types/node/wasi.d.ts"
],
"./node_modules/@types/node/tty.d.ts": [
"./node_modules/@types/node/net.d.ts"
],
"./node_modules/@types/node/url.d.ts": [
"./node_modules/@types/node/querystring.d.ts"
],
"./node_modules/@types/node/v8.d.ts": [
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/node/worker_threads.d.ts": [
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/fs/promises.d.ts",
"./node_modules/@types/node/stream.d.ts",
"./node_modules/@types/node/url.d.ts",
"./node_modules/@types/node/vm.d.ts"
],
"./node_modules/@types/node/zlib.d.ts": [
"./node_modules/@types/node/stream.d.ts"
],
"./node_modules/@types/uglify-js/index.d.ts": [
"./node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack-sources/index.d.ts": [
"./node_modules/@types/node/index.d.ts",
"./node_modules/@types/webpack-sources/lib/cachedsource.d.ts",
"./node_modules/@types/webpack-sources/lib/compatsource.d.ts",
"./node_modules/@types/webpack-sources/lib/concatsource.d.ts",
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/originalsource.d.ts",
"./node_modules/@types/webpack-sources/lib/prefixsource.d.ts",
"./node_modules/@types/webpack-sources/lib/rawsource.d.ts",
"./node_modules/@types/webpack-sources/lib/replacesource.d.ts",
"./node_modules/@types/webpack-sources/lib/sizeonlysource.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts",
"./node_modules/@types/webpack-sources/lib/sourcemapsource.d.ts"
],
"./node_modules/@types/webpack-sources/lib/cachedsource.d.ts": [
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts",
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack-sources/lib/compatsource.d.ts": [
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts"
],
"./node_modules/@types/webpack-sources/lib/concatsource.d.ts": [
"./node_modules/@types/source-list-map/index.d.ts",
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts",
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack-sources/lib/index.d.ts": [
"./node_modules/@types/webpack-sources/lib/cachedsource.d.ts",
"./node_modules/@types/webpack-sources/lib/compatsource.d.ts",
"./node_modules/@types/webpack-sources/lib/concatsource.d.ts",
"./node_modules/@types/webpack-sources/lib/originalsource.d.ts",
"./node_modules/@types/webpack-sources/lib/prefixsource.d.ts",
"./node_modules/@types/webpack-sources/lib/rawsource.d.ts",
"./node_modules/@types/webpack-sources/lib/replacesource.d.ts",
"./node_modules/@types/webpack-sources/lib/sizeonlysource.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts",
"./node_modules/@types/webpack-sources/lib/sourcemapsource.d.ts",
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack-sources/lib/originalsource.d.ts": [
"./node_modules/@types/source-list-map/index.d.ts",
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts",
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack-sources/lib/prefixsource.d.ts": [
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts"
],
"./node_modules/@types/webpack-sources/lib/rawsource.d.ts": [
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts"
],
"./node_modules/@types/webpack-sources/lib/replacesource.d.ts": [
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts"
],
"./node_modules/@types/webpack-sources/lib/sizeonlysource.d.ts": [
"./node_modules/@types/webpack-sources/lib/source.d.ts"
],
"./node_modules/@types/webpack-sources/lib/source.d.ts": [
"./node_modules/@types/node/crypto.d.ts",
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack-sources/lib/sourcemapsource.d.ts": [
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts",
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts"
],
"./node_modules/@types/webpack/index.d.ts": [
"./node_modules/@types/anymatch/index.d.ts",
"./node_modules/@types/node/crypto.d.ts",
"./node_modules/@types/node/index.d.ts",
"./node_modules/@types/uglify-js/index.d.ts",
"./node_modules/@types/webpack-sources/index.d.ts",
"./node_modules/source-map/source-map.d.ts",
"./node_modules/tapable/tapable.d.ts"
],
"./src/components/alert/index.ts": [
"./src/components/alert/alert.ts"
],
"./src/components/avatar/index.ts": [
"./src/components/avatar/avatar.ts"
],
"./src/components/back-top/index.ts": [
"./src/components/back-top/back-top.ts"
],
"./src/components/badge/index.ts": [
"./src/components/badge/badge.ts"
],
"./src/components/button/index.ts": [
"./src/components/button/button.ts"
],
"./src/components/card/index.ts": [
"./src/components/card/card.ts"
],
"./src/components/collapse/index.ts": [
"./src/components/collapse/collapse.ts"
],
"./src/components/divider/index.ts": [
"./src/components/divider/divider.ts"
],
"./src/components/drawer/index.ts": [
"./src/components/drawer/drawer.ts"
],
"./src/components/dropdown/index.ts": [
"./src/components/dropdown/dropdown.ts"
],
"./src/components/loading-bar/index.ts": [
"./src/components/loading-bar/loading-bar.ts"
],
"./src/components/message/index.ts": [
"./src/components/message/message.ts"
],
"./src/components/modal/index.ts": [
"./src/components/modal/modal.ts"
],
"./src/components/notice/index.ts": [
"./src/components/notice/notice.ts"
],
"./src/components/poptip/index.ts": [
"./src/components/poptip/poptip.ts"
],
"./src/components/progress/index.ts": [
"./src/components/progress/progress.ts"
],
"./src/components/result/index.ts": [
"./src/components/result/result.ts"
],
"./src/components/skeleton/index.ts": [
"./src/components/skeleton/skeleton.ts"
],
"./src/components/spin/index.ts": [
"./src/components/spin/spin.ts"
],
"./src/components/steps/index.ts": [
"./src/components/steps/steps.ts"
],
"./src/components/switch/index.ts": [
"./src/components/switch/switch.ts"
],
"./src/components/tabs/index.ts": [
"./src/components/tabs/tabs.ts"
],
"./src/components/time/index.ts": [
"./src/components/time/time.ts"
],
"./src/components/timeline/index.ts": [
"./src/components/timeline/timeline.ts"
],
"./src/components/tooltip/index.ts": [
"./src/components/tooltip/tooltip.ts"
],
"./src/dom-utils/index.ts": [
"./src/dom-utils/bind.ts",
"./src/dom-utils/elem.ts",
"./src/dom-utils/prev&next.ts",
"./src/dom-utils/remove-attrs.ts",
"./src/dom-utils/siblings.ts",
"./src/dom-utils/slide.ts"
],
"./src/index.ts": [
"./src/rabbit-design.ts"
],
"./src/mixins/index.ts": [
"./src/mixins/arrow.ts",
"./src/mixins/cb-promise.ts",
"./src/mixins/click-outside.ts",
"./src/mixins/css-transition.ts",
"./src/mixins/scrollable.ts",
"./src/mixins/tooltip.ts",
"./src/mixins/warn.ts"
],
"./src/rabbit-design.ts": [
"./src/components/alert/index.ts",
"./src/components/avatar/index.ts",
"./src/components/back-top/index.ts",
"./src/components/badge/index.ts",
"./src/components/button/index.ts",
"./src/components/card/index.ts",
"./src/components/collapse/index.ts",
"./src/components/divider/index.ts",
"./src/components/drawer/index.ts",
"./src/components/dropdown/index.ts",
"./src/components/loading-bar/index.ts",
"./src/components/message/index.ts",
"./src/components/modal/index.ts",
"./src/components/notice/index.ts",
"./src/components/poptip/index.ts",
"./src/components/progress/index.ts",
"./src/components/result/index.ts",
"./src/components/skeleton/index.ts",
"./src/components/spin/index.ts",
"./src/components/steps/index.ts",
"./src/components/switch/index.ts",
"./src/components/tabs/index.ts",
"./src/components/time/index.ts",
"./src/components/timeline/index.ts",
"./src/components/tooltip/index.ts"
],
"./src/utils/index.ts": [
"./src/utils/check-type.ts",
"./src/utils/destroy.ts",
"./src/utils/use-html-string.ts",
"./src/utils/validcomps.ts"
]
},
"semanticDiagnosticsPerFile": [
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.dom.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.dom.iterable.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.collection.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.core.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.generator.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.iterable.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.promise.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.proxy.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.reflect.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.symbol.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2016.array.include.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2016.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2017.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2017.intl.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2017.object.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2017.string.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2018.asynciterable.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2018.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2018.intl.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2018.promise.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2018.regexp.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es2020.bigint.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.es5.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.esnext.intl.d.ts",
"../../../../../appdata/roaming/npm/node_modules/typescript/lib/lib.scripthost.d.ts",
"./node_modules/@popperjs/core/index.d.ts",
"./node_modules/@popperjs/core/lib/createpopper.d.ts",
"./node_modules/@popperjs/core/lib/enums.d.ts",
"./node_modules/@popperjs/core/lib/index.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/applystyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/arrow.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/computestyles.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/eventlisteners.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/flip.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/hide.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/index.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/offset.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/popperoffsets.d.ts",
"./node_modules/@popperjs/core/lib/modifiers/preventoverflow.d.ts",
"./node_modules/@popperjs/core/lib/popper-lite.d.ts",
"./node_modules/@popperjs/core/lib/popper.d.ts",
"./node_modules/@popperjs/core/lib/types.d.ts",
"./node_modules/@popperjs/core/lib/utils/detectoverflow.d.ts",
"./node_modules/@types/anymatch/index.d.ts",
"./node_modules/@types/eslint-scope/index.d.ts",
"./node_modules/@types/eslint/helpers.d.ts",
"./node_modules/@types/eslint/index.d.ts",
"./node_modules/@types/estree/index.d.ts",
"./node_modules/@types/glob/index.d.ts",
"./node_modules/@types/html-minifier-terser/index.d.ts",
"./node_modules/@types/json-schema/index.d.ts",
"./node_modules/@types/minimatch/index.d.ts",
"./node_modules/@types/node/assert.d.ts",
"./node_modules/@types/node/async_hooks.d.ts",
"./node_modules/@types/node/base.d.ts",
"./node_modules/@types/node/buffer.d.ts",
"./node_modules/@types/node/child_process.d.ts",
"./node_modules/@types/node/cluster.d.ts",
"./node_modules/@types/node/console.d.ts",
"./node_modules/@types/node/constants.d.ts",
"./node_modules/@types/node/crypto.d.ts",
"./node_modules/@types/node/dgram.d.ts",
"./node_modules/@types/node/dns.d.ts",
"./node_modules/@types/node/domain.d.ts",
"./node_modules/@types/node/events.d.ts",
"./node_modules/@types/node/fs.d.ts",
"./node_modules/@types/node/fs/promises.d.ts",
"./node_modules/@types/node/globals.d.ts",
"./node_modules/@types/node/globals.global.d.ts",
"./node_modules/@types/node/http.d.ts",
"./node_modules/@types/node/http2.d.ts",
"./node_modules/@types/node/https.d.ts",
"./node_modules/@types/node/index.d.ts",
"./node_modules/@types/node/inspector.d.ts",
"./node_modules/@types/node/module.d.ts",
"./node_modules/@types/node/net.d.ts",
"./node_modules/@types/node/os.d.ts",
"./node_modules/@types/node/path.d.ts",
"./node_modules/@types/node/perf_hooks.d.ts",
"./node_modules/@types/node/process.d.ts",
"./node_modules/@types/node/punycode.d.ts",
"./node_modules/@types/node/querystring.d.ts",
"./node_modules/@types/node/readline.d.ts",
"./node_modules/@types/node/repl.d.ts",
"./node_modules/@types/node/stream.d.ts",
"./node_modules/@types/node/string_decoder.d.ts",
"./node_modules/@types/node/timers.d.ts",
"./node_modules/@types/node/tls.d.ts",
"./node_modules/@types/node/trace_events.d.ts",
"./node_modules/@types/node/ts3.4/base.d.ts",
"./node_modules/@types/node/ts3.6/base.d.ts",
"./node_modules/@types/node/tty.d.ts",
"./node_modules/@types/node/url.d.ts",
"./node_modules/@types/node/util.d.ts",
"./node_modules/@types/node/v8.d.ts",
"./node_modules/@types/node/vm.d.ts",
"./node_modules/@types/node/wasi.d.ts",
"./node_modules/@types/node/worker_threads.d.ts",
"./node_modules/@types/node/zlib.d.ts",
"./node_modules/@types/parse-json/index.d.ts",
"./node_modules/@types/q/index.d.ts",
"./node_modules/@types/source-list-map/index.d.ts",
"./node_modules/@types/tapable/index.d.ts",
"./node_modules/@types/uglify-js/index.d.ts",
"./node_modules/@types/webpack-sources/index.d.ts",
"./node_modules/@types/webpack-sources/lib/cachedsource.d.ts",
"./node_modules/@types/webpack-sources/lib/compatsource.d.ts",
"./node_modules/@types/webpack-sources/lib/concatsource.d.ts",
"./node_modules/@types/webpack-sources/lib/index.d.ts",
"./node_modules/@types/webpack-sources/lib/originalsource.d.ts",
"./node_modules/@types/webpack-sources/lib/prefixsource.d.ts",
"./node_modules/@types/webpack-sources/lib/rawsource.d.ts",
"./node_modules/@types/webpack-sources/lib/replacesource.d.ts",
"./node_modules/@types/webpack-sources/lib/sizeonlysource.d.ts",
"./node_modules/@types/webpack-sources/lib/source.d.ts",
"./node_modules/@types/webpack-sources/lib/sourcemapsource.d.ts",
"./node_modules/@types/webpack-sources/node_modules/source-map/source-map.d.ts",
[
"./node_modules/@types/webpack/index.d.ts",
[
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 1707,
"length": 7,
"messageText": "Module '\"../../tapable/tapable\"' has no exported member 'Tapable'.",
"category": 1,
"code": 2305
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 44271,
"length": 17,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 44311,
"length": 17,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 44357,
"length": 24,
"messageText": "Generic type 'AsyncSeriesWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 44409,
"length": 24,
"messageText": "Generic type 'AsyncSeriesWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 44461,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 44495,
"length": 17,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 44540,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 44635,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 44667,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 44903,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 44938,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 44983,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45035,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45090,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45126,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45169,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45206,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45239,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45286,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45324,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45368,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45417,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45465,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45512,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45565,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45611,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45660,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45706,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45750,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45786,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45819,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45854,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45887,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45924,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 45960,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 46000,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 46030,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 46067,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 46113,
"length": 7,
"messageText": "Generic type 'HookMap' requires 1 type argument(s).",
"category": 1,
"code": 2314
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 46169,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 46226,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 46265,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 46471,
"length": 24,
"messageText": "Generic type 'AsyncSeriesWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 46523,
"length": 24,
"messageText": "Generic type 'AsyncSeriesWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 46581,
"length": 17,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 46626,
"length": 24,
"messageText": "Generic type 'AsyncSeriesWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 47200,
"length": 8,
"messageText": "Generic type 'SyncHook' requires between 1 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 47228,
"length": 8,
"messageText": "Generic type 'SyncHook' requires between 1 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 47278,
"length": 22,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 47336,
"length": 22,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 47402,
"length": 22,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 47508,
"length": 8,
"messageText": "Generic type 'SyncHook' requires between 1 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 47553,
"length": 22,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 47606,
"length": 22,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 47667,
"length": 22,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 48452,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 49232,
"length": 8,
"messageText": "Generic type 'SyncHook' requires between 1 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 49265,
"length": 8,
"messageText": "Generic type 'SyncHook' requires between 1 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 49407,
"length": 8,
"messageText": "Generic type 'SyncHook' requires between 1 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 49456,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 49501,
"length": 8,
"messageText": "Generic type 'SyncHook' requires between 1 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 49651,
"length": 15,
"messageText": "Generic type 'AsyncSeriesHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 49923,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 49960,
"length": 15,
"messageText": "Generic type 'AsyncSeriesHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 50213,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 50254,
"length": 8,
"messageText": "Generic type 'SyncHook' requires between 1 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 50363,
"length": 21,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 50423,
"length": 21,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 50491,
"length": 21,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 50842,
"length": 40,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 50905,
"length": 40,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 50978,
"length": 40,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 51047,
"length": 40,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 51112,
"length": 40,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 51180,
"length": 40,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 51833,
"length": 17,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 51872,
"length": 17,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 51911,
"length": 17,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 51951,
"length": 17,
"messageText": "Generic type 'SyncWaterfallHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 51988,
"length": 8,
"messageText": "Generic type 'SyncHook' requires between 1 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 55317,
"length": 25,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 55414,
"length": 15,
"messageText": "Generic type 'AsyncSeriesHook' requires between 1 and 2 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 56292,
"length": 8,
"messageText": "Generic type 'SyncHook' requires between 1 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 56327,
"length": 8,
"messageText": "Generic type 'SyncHook' requires between 1 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 56367,
"length": 8,
"messageText": "Generic type 'SyncHook' requires between 1 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 56496,
"length": 12,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 57326,
"length": 8,
"messageText": "Generic type 'SyncHook' requires between 1 and 3 type arguments.",
"category": 1,
"code": 2707
},
{
"file": "./node_modules/@types/webpack/index.d.ts",
"start": 60245,
"length": 37,
"messageText": "Generic type 'SyncBailHook' requires between 2 and 3 type arguments.",
"category": 1,
"code": 2707
}
]
],
"./node_modules/moment/ts3.1-typings/moment.d.ts",
"./node_modules/source-map/source-map.d.ts",
"./node_modules/tapable/tapable.d.ts",
"./node_modules/tslib/tslib.d.ts",
"./src/components/alert/alert.ts",
"./src/components/alert/index.ts",
"./src/components/avatar/avatar.ts",
"./src/components/avatar/index.ts",
"./src/components/back-top/back-top.ts",
"./src/components/back-top/index.ts",
"./src/components/badge/badge.ts",
"./src/components/badge/index.ts",
"./src/components/button/button.ts",
"./src/components/button/index.ts",
"./src/components/card/card.ts",
"./src/components/card/index.ts",
[
"./src/components/collapse/collapse.ts",
[
{
"file": "./src/components/collapse/collapse.ts",
"start": 3553,
"length": 16,
"code": 2345,
"category": 1,
"messageText": {
"messageText": "Argument of type '(string | number)[]' is not assignable to parameter of type 'string | number | string[] | number[]'.",
"category": 1,
"code": 2345,
"next": [
{
"messageText": "Type '(string | number)[]' is not assignable to type 'string[]'.",
"category": 1,
"code": 2322,
"next": [
{
"messageText": "Type 'string | number' is not assignable to type 'string'.",
"category": 1,
"code": 2322,
"next": [
{
"messageText": "Type 'number' is not assignable to type 'string'.",
"category": 1,
"code": 2322
}
]
}
]
}
]
}
},
{
"file": "./src/components/collapse/collapse.ts",
"start": 3736,
"length": 16,
"code": 2345,
"category": 1,
"messageText": {
"messageText": "Argument of type '(string | number)[]' is not assignable to parameter of type 'string | number | string[] | number[]'.",
"category": 1,
"code": 2345,
"next": [
{
"messageText": "Type '(string | number)[]' is not assignable to type 'string[]'.",
"category": 1,
"code": 2322
}
]
}
}
]
],
"./src/components/collapse/index.ts",
"./src/components/divider/divider.ts",
"./src/components/divider/index.ts",
"./src/components/drawer/drawer.ts",
"./src/components/drawer/index.ts",
"./src/components/dropdown/dropdown.ts",
"./src/components/dropdown/index.ts",
"./src/components/loading-bar/index.ts",
"./src/components/loading-bar/loading-bar.ts",
"./src/components/message/index.ts",
"./src/components/message/message.ts",
"./src/components/modal/index.ts",
"./src/components/modal/modal.ts",
"./src/components/notice/index.ts",
"./src/components/notice/notice.ts",
"./src/components/poptip/index.ts",
"./src/components/poptip/poptip.ts",
"./src/components/prefix.ts",
"./src/components/progress/index.ts",
"./src/components/progress/progress.ts",
"./src/components/result/index.ts",
"./src/components/result/result.ts",
"./src/components/skeleton/index.ts",
"./src/components/skeleton/skeleton.ts",
"./src/components/spin/index.ts",
"./src/components/spin/spin.ts",
"./src/components/steps/index.ts",
"./src/components/steps/steps.ts",
"./src/components/switch/index.ts",
"./src/components/switch/switch.ts",
"./src/components/tabs/index.ts",
"./src/components/tabs/tabs.ts",
"./src/components/time/index.ts",
"./src/components/time/time.ts",
"./src/components/timeline/index.ts",
"./src/components/timeline/timeline.ts",
"./src/components/tooltip/index.ts",
"./src/components/tooltip/tooltip.ts",
"./src/dom-utils/bind.ts",
"./src/dom-utils/elem.ts",
"./src/dom-utils/index.ts",
"./src/dom-utils/prev&next.ts",
"./src/dom-utils/remove-attrs.ts",
"./src/dom-utils/siblings.ts",
"./src/dom-utils/slide.ts",
"./src/images.d.ts",
"./src/index.ts",
"./src/mixins/arrow.ts",
"./src/mixins/cb-promise.ts",
"./src/mixins/click-outside.ts",
"./src/mixins/css-transition.ts",
"./src/mixins/index.ts",
"./src/mixins/scrollable.ts",
"./src/mixins/tooltip.ts",
"./src/mixins/warn.ts",
"./src/rabbit-design.ts",
"./src/utils/check-type.ts",
"./src/utils/destroy.ts",
"./src/utils/index.ts",
"./src/utils/use-html-string.ts",
"./src/utils/validcomps.ts"
]
},
"version": "4.0.3"
}
================================================
FILE: workspace.code-workspace
================================================
{
"folders": [
{
"path": "."
}
],
"settings": {}
}
微信
支付宝
QQ (724617944)
