@canlooks/can-ui 0.0.25 → 0.0.26

package/documentation/dist/atom-one-dark.min.css

@@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}

package/documentation/dist/components/accordion.md

@@ -0,0 +1,38 @@
+# Accordion 手风琴
+
+## 示例
+
+```tsx
+import {Accordion, Flex} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex width="100%" direction="column" compact>
+            <Accordion title="标题1">
+                内容1
+            </Accordion>
+            <Accordion title="标题2">
+                内容2
+            </Accordion>
+            <Accordion title="标题3">
+                内容3
+            </Accordion>
+        </>
+    )
+}
+```
+
+## Props
+
+| 属性               | 类型                                                  | 默认值        | 说明                               |
+|------------------|-----------------------------------------------------|------------|----------------------------------|
+| size             | 'small' \| 'medium'                      \| 'large' | Theme.size | 组件的尺寸，默认由[Theme](/guide/theme)传递 |
+| title            | ReactNode                                           | -          | 标题                               |
+| prefix           | ReactNode                                           | -          | 标题的前缀                            |
+| suffix           | ReactNode                                           | -          | 标题的后缀                            |
+| expandIcon       | ReactNode \| ((expanded: boolean) => ReactNode)     | -          | 展开与折叠图标                          |
+| defaultExpanded  | boolean                                             | false      | 默认展开状态                           |
+| expanded         | boolean                                             | -          | 受控的展开状态                          |
+| onExpandedChange | (expanded: boolean) => void                         | -          | 展开回调                             |
+| readOnly         | boolean                                             | false      |                                  |
+| disabled         | boolean                                             | false      |                                  |

package/documentation/dist/components/actionSheet.md

@@ -0,0 +1,49 @@
+# ActionSheet 上拉菜单
+
+## 示例
+
+```tsx
+import {ActionSheet} from '@canlooks/can-ui'
+
+export default function Index() {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+        <>
+            <Button onClick={() => setOpen(true)}>打开上拉菜单</Button>
+            <ActionSheet
+                open={open}
+                onClose={() => setOpen(false)}
+                title="标题"
+                actions={[
+                    {label: '选项1', onClick: () => console.log('选项1')},
+                    {label: '选项2', onClick: () => console.log('选项2')}
+                ]}
+            />
+        </>
+    )
+}
+```
+
+## Props
+
+| 属性             | 类型                                      | 默认值   | 说明                  |
+|----------------|-----------------------------------------|-------|---------------------|
+| title          | ReactNode                               | -     | 标题                  |
+| actions        | [MenuItemProps](/components/menuItem)[] | -     | 菜单                  |
+| placement      | 'top' \| 'bottom'                       | -     | 弹出菜单的位置             |
+| maskClosable   | boolean                                 | false | 是否可通过点击遮罩层关闭对话框     |
+| escapeClosable | boolean                                 | true  | 是否可通过键盘的【ESC】键关闭对话框 |
+| onAction       | (action) => void                        | -     | 点击选项                |
+| onConfirm      | (e) => void                             | -     | 点击确定                |
+| onCancel       | (e) => void                             | -     | 点击取消                |
+| defaultOpen    | boolean                                 | false | 默认打开状态              |
+| open           | boolean                                 | -     | 受控的打开状态             |
+| onClose        | (reason) => void                        | -     | 关闭回调                |
+| showConfirm    | boolean                                 | false | 是否显示确定选项            |
+| confirmText    | ReactNode                               | '确定'  |                     |
+| confirmProps   | [MenuItemProps](/components/menuItem)   | -     |                     |
+| showCancel     | boolean                                 | true  | 是否显示取消选项            |
+| cancelText     | ReactNode                               | '取消'  |                     |
+| cancelProps    | [MenuItemProps](/components/menuItem)   | -     |                     |
+| slideProps     | TransitionBaseProps                     | -     | 传递给<Slide/>动画组件的属性  |

package/documentation/dist/components/alert.md

@@ -0,0 +1,38 @@
+# Alert 提示框
+
+## 示例
+
+```tsx
+import {Alert, Flex} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex width="100%" direction="column" gap={12}>
+            <Alert status="info" title="这是一条信息提示" description="这里是消息的内容"/>
+            <Alert status="success" title="这是一条信息提示" description="这里是消息的内容"/>
+            <Alert status="warning" title="这是一条信息提示" description="这里是消息的内容" closable/>
+            <Alert status="error" title="这是一条信息提示" description="这里是消息的内容"/>
+            <Alert variant="filled" title="这是一条信息提示" description="这里是消息的内容"/>
+            <Alert variant="outlined" title="这是一条信息提示" description="这里是消息的内容"/>
+            <Alert loading title="这是一条信息提示" description="这里是消息的内容"/>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性          | 类型                                                          | 默认值        | 说明       |
+|-------------|-------------------------------------------------------------|------------|----------|
+| variant     | 'filled' \| 'outlined' \| 'standard'                        | 'standard' | 样式       |
+| status      | 'success' \| 'error'                 \| 'warning' \| 'info' | 'error'    | 状态       |
+| color       | string                                                      | -          | 颜色       |
+| showIcon    | boolean                                                     | true       | 是否显示图标   |
+| icon        | ReactNode                                                   | -          | 图标       |
+| title       | ReactNode                                                   | -          | 标题       |
+| description | ReactNode                                                   | -          | 说明       |
+| prefix      | ReactNode                                                   | -          | 前缀内容     |
+| suffix      | ReactNode                                                   | -          | 后缀内容     |
+| closable    | boolean                                                     | false      | 是否渲染关闭按钮 |
+| onClose     | (e) => void                                                 | -          | 关闭回调     |
+| loading     | boolean                                                     | false      | 加载状态     |

package/documentation/dist/components/anchorList.md

@@ -0,0 +1,36 @@
+# AnchorList 锚点列表
+
+## 示例
+
+```tsx
+import {AnchorList} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <AnchorList
+            style={{width: '100%'}}
+            anchors={[
+                {id: 'anchor1', label: '锚点1'},
+                {id: 'anchor2', label: '锚点2', active: true},
+                {id: 'anchor2-1', label: '锚点2-1', level: 1},
+                {id: 'anchor2-2', label: '锚点2-2', level: 1},
+                {id: 'anchor3', label: '锚点3'},
+            ]}
+        />
+    )
+}
+```
+
+**锚点中的`active`状态通常无需手动设置，若滚动元素中有对应id的元素，会根据滚动位置自动计算。**
+
+## Props
+
+| 属性               | 类型                                                                                     | 默认值       | 说明           |
+|------------------|----------------------------------------------------------------------------------------|-----------|--------------|
+| anchors          | {<br/>id: string,<br/> label: string,<br/> level: number,<br/> active: boolean<br/>}[] | -         | 锚点列表         |
+| renderAnchorItem | (item: AnchorItem, active: boolean) => void                                            | -         | 渲染锚点的方法      |
+| indent           | number                                                                                 | 24        | 缩进           |
+| scroller         | Element                                                                                | document  | 滚动元素         |
+| routeMode        | 'history' \| 'location'                                                                | 'history' | 路由跳转模式       |
+| offset           | number                                                                                 | 0         | 目标元素距离顶部的偏移量 |
+| scrollBehavior   | 'auto' \| 'instant'                          \| 'smooth'                               | 'auto'    |              |

package/documentation/dist/components/autocomplete.md

@@ -0,0 +1,68 @@
+# Autocomplete 自动填充
+
+## 基础示例
+
+```tsx
+import {Autocomplete} from '@canlooks/can-ui'
+
+export default function Index() {
+    const options = [
+        {label: 'Apple', value: 'apple'},
+        {label: 'Banana', value: 'banana'},
+        {label: 'Cherry', value: 'cherry'}
+    ]
+
+    return (
+        <Autocomplete
+            style={{width: 300}}
+            options={options}
+        />
+    )
+}
+```
+
+## 动态数据
+
+```tsx
+import {Autocomplete} from '@canlooks/can-ui'
+
+export default function Index() {
+    const [options, setOptions] = React.useState([])
+
+    const loadOptions = (inputValue: string) => {
+        return new Promise((resolve) => {
+            inputValue
+                ? setTimeout(() => {
+                    resolve([
+                        {label: 'Apple', value: 'apple'},
+                        {label: 'Banana', value: 'banana'},
+                        {label: 'Cherry', value: 'cherry'}
+                    ])
+                }, 1000)
+                : resolve([])
+        })
+    }
+
+    return (
+        <Autocomplete
+            style={{width: 300}}
+            loadOptions={loadOptions}
+        />
+    )
+}
+```
+
+## Props
+
+`<Autocomplete/>`组件继承了`<Input/>`组件的所有属性外，还有如下属性：
+
+| 属性          | 类型                                           | 默认值     | 说明               |
+|-------------|----------------------------------------------|---------|------------------|
+| options     | [MenuItemProps](/components/menuItem)[]      | -       | 选项               |
+| loadOptions | (inputValue) => options \| Promise\<options> | -       | 动态加载的选项          |
+| primaryKey  | string \| number                             | 'value' | 指定选项中的主键名        |
+| labelKey    | string \| number                             | 'label' | 指定选项中用于当作label的键 |
+| onSelect    | (selectedValue, option) => void              | -       | 选中回调             |
+| renderInput | (inputProps) => ReactElement                 | -       | 自定义渲染输入框         |
+| popperProps | [PopperProps](/components/popper)            | -       | 传递给`Popper`组件的属性 |
+| popperRef   | [PopperRef](/components/popper)              | -       |                  |

package/documentation/dist/components/avatar.md

@@ -0,0 +1,79 @@
+# Avatar 头像
+
+## Avatar
+
+```tsx
+import {Avatar, Flex, Icon} from '@canlooks/can-ui'
+import {faUser} from '@fortawesome/free-solid-svg-icons'
+
+export default function Index() {
+    const src = 'https://avatars.githubusercontent.com/u/47269261?v=4'
+
+    return (
+        <Flex
+            width="100%"
+            gap={12}
+            alignItems="center"
+            justifyContent="center"
+        >
+            <Avatar size="small" src=""/>
+            <Avatar src={src}/>
+            <Avatar size="large" src={src}/>
+            <Avatar>
+                <Icon icon={faUser}/>
+            </Avatar>
+            <Avatar shape="square">
+                <Icon icon={faUser}/>
+            </Avatar>
+            <Avatar color="primary">
+                <Icon icon={faUser}/>
+            </Avatar>
+        </Flex>
+    )
+}
+```
+
+### Avatar Props
+
+| 属性       | 类型                     | 默认值        | 说明                     |
+|----------|------------------------|------------|------------------------|
+| color    | Color                  | -          | 颜色                     |
+| size     | string \| number       | 'medium'   | 尺寸                     |
+| shape    | 'circular' \| 'square' | 'circular' | 形状                     |
+| src      | string                 | -          | 若不指定`src`则渲染`children` |
+| children | ReactNode              | -          | 若不指定`children`则使用`src` |
+| imgProps | ImgHTMLAttributes      | -          | 传递给`<img/>`标签的属性       |
+
+## AvatarGroup
+
+```tsx
+import {AvatarGroup, Flex} from '@canlooks/can-ui'
+import {faUser} from '@fortawesome/free-solid-svg-icons'
+
+export default function Index() {
+    const src = 'https://avatars.githubusercontent.com/u/47269261?v=4'
+
+    return (
+        <AvatarGroup
+            items={[
+                {src},
+                {children: <Icon icon={faUser}/>},
+                {src},
+                {children: <Icon icon={faUser}/>},
+                {src},
+                {children: <Icon icon={faUser}/>}
+            ]}
+        />
+    )
+}
+```
+
+### AvatarGroup Props
+
+| 属性            | 类型                     | 默认值  | 说明                         |
+|---------------|------------------------|------|----------------------------|
+| items         | AvatarProps[]          | -    |                            |
+| hoverable     | boolean                | true | 是否可以hover交互                |
+| max           | number                 | 5    | 最大显示数量                     |
+| total         | number                 | -    | 总数，若不指定则取items或children的长度 |
+| renderSurplus | (surplus) => ReactNode | -    | 超过最大限制时，渲染的额外内容            |

package/documentation/dist/components/badge.md

@@ -0,0 +1,33 @@
+# Badge 角标
+
+## 示例
+
+```tsx
+import {Badge, Flex} from '@canlooks/can-ui'
+import {faUser} from '@fortawesome/free-solid-svg-icons'
+
+export default function Index() {
+    return (
+        <Flex alignItems="center" justifyContent="center" gap={24}>
+            <Badge count={100}>
+                <Avatar>
+                    <Icon icon={faUser}/>
+                </Avatar>
+            </Badge>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性        | 类型                  | 默认值        | 说明            |
+|-----------|---------------------|------------|---------------|
+| count     | number              | -          | 角标数值          |
+| color     | string              | 'error'    | 颜色            |
+| placement | string              | 'topRight' | 位置            |
+| variant   | 'dot' \| 'standard' | 'standard' | 角标样式          |
+| max       | number              | 99         | 最大数值，超过会显示`+` |
+| showZero  | boolean             | false      | 数量为0时是否显示角标   |
+| offsetX   | number              | 0          | 位置偏移量         |
+| offsetY   | number              | 0          | 位置偏移量         |

package/documentation/dist/components/bottomNavigation.md

@@ -0,0 +1,39 @@
+# BottomNavigation 底部导航
+
+## 示例
+
+```tsx
+import {BottomNavigation, Icon} from '@canlooks/can-ui'
+import {faUser} from '@fortawesome/free-solid-svg-icons'
+
+export default function Index() {
+    return (
+        <div style={{
+            width: '100%',
+            height: 56,
+            position: 'relative'
+        }}>
+            <BottomNavigation
+                items={[
+                    {value: 'index', label: '首页'},
+                    {value: 'about', label: '关于'},
+                    {value: 'me', label: '我的', icon: <Icon icon={faUser}/>},
+                ]}
+            />
+        </div>
+    )
+}
+```
+
+## Props
+
+| 属性                | 类型                                                                                                                          | 默认值                                   | 说明              |
+|-------------------|-----------------------------------------------------------------------------------------------------------------------------|---------------------------------------|-----------------|
+| items             | {<br/>value: string,<br/>icon: ReactNode,<br/>label: ReactNode,<br/>showLabelInactive: boolean,<br/>active: boolean<br/>}[] | -                                     |                 |
+| showLabelInactive | boolean                                                                                                                     | items数量小于等于3时默认为`true`<br/>否则为`false` | 未激活状态下是否显示label |
+| primaryKey        | string \| number                                                                                                            | 'value'                               | 选项的主键           |
+| labelKey          | string \| number                                                                                                            | 'label'                               | 作为`label`的键     |
+| defaultValue      | string \| number                                                                                                            | -                                     | 默认值             |
+| value             | string \| number                                                                                                            | -                                     | 受控的值            |
+| onChange          | (value) => void                                                                                                             | -                                     | 值变化的回调          |
+

package/documentation/dist/components/breadcrumb.md

@@ -0,0 +1,28 @@
+# Breadcrumb 面包屑
+
+## 示例
+
+```tsx
+import {Breadcrumb, Icon} from '@canlooks/can-ui'
+import {faUser} from '@fortawesome/free-solid-svg-icons'
+
+export default function Index() {
+    return (
+        <Breadcrumb
+            items={[
+                {label: 'Home'},
+                {label: 'Components'},
+                {label: 'Me', icon: <Icon icon={faUser}/>}
+            ]}
+        />
+    )
+}
+```
+
+## Props
+
+| 属性        | 类型                                  | 默认值   | 说明  |
+|-----------|-------------------------------------|-------|-----|
+| items     | [ButtonProps](/components/button)[] | -     |     |
+| separator | ReactNode                           | '/'   | 分隔符 |
+| readOnly  | boolean                             | false |     |

package/documentation/dist/components/bubbleConfirm.md

@@ -0,0 +1,34 @@
+# BubbleConfirm 气泡确认框
+
+## 示例
+
+```tsx
+import {BubbleConfirm, Button} from '@canlooks/can-ui'
+
+export default function Index() {
+    const onConfirm = async () => {
+        await new Promise(resolve => setTimeout(resolve, 1000))
+    }
+
+    return (
+        <BubbleConfirm
+            title="这里是标题"
+            content="这里是气泡确认框的内容"
+            onConfirm={onConfirm}
+        >
+            <Button>确认</Button>
+        </BubbleConfirm>
+    )
+}
+```
+
+## Props
+
+| 属性        | 类型          | 默认值   | 说明                                |
+|-----------|-------------|-------|-----------------------------------|
+| icon      | ReactNode   | -     |                                   |
+| title     | ReactNode   | -     |                                   |
+| footer    | ReactNode   | -     | 自定以渲染footer，若不指定则使用默认的`取消`与`确定`按钮 |
+| showArrow | boolean     | true  | 是否显示气泡的箭头                         |
+| loading   | boolean     | false |                                   |
+| onConfirm | (e) => void | -     | 确认回调                              |

package/documentation/dist/components/button.md

@@ -0,0 +1,62 @@
+# Button 按钮
+
+## 示例
+
+```tsx
+import {Button, Flex} from '@canlooks/can-ui'
+
+export default function Index() {
+    const rowProps = {
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 12
+    }
+
+    return (
+        <Flex width="100%" direction="column" gap={12}>
+            <Flex {...rowProps}>
+                <Button>按钮</Button>
+                <Button variant="flatted">按钮</Button>
+                <Button variant="outlined">按钮</Button>
+                <Button variant="dashed">按钮</Button>
+                <Button variant="ghost">按钮</Button>
+                <Button variant="text">按钮</Button>
+                <Button variant="plain">按钮</Button>
+            </Flex>
+            <Flex {...rowProps}>
+                <Button color="success">按钮</Button>
+                <Button color="warning">按钮</Button>
+                <Button color="error">按钮</Button>
+                <Button color="info">按钮</Button>
+                <Button loading>按钮</Button>
+            </Flex>
+            <Flex {...rowProps}>
+                <Button size="small">按钮</Button>
+                <Button size="large">按钮</Button>
+            </Flex>
+            <Flex {...rowProps}>
+                <Button shape="circular">钮</Button>
+                <Button shape="rounded">按钮</Button>
+            </Flex>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+`<Button/>`组件继承了`<button/>`元素的所有属性，除此之外还有以下属性：
+
+| 属性          | 类型                                                                                                        | 默认值          | 说明            |
+|-------------|-----------------------------------------------------------------------------------------------------------|--------------|---------------|
+| color       | string                                                                                                    | -            |               |
+| shape       | 'square' \| 'circular' \| 'rounded'                                                                       | 'square'     | 形状            |
+| size        | 'small' \| 'medium' \| 'large'                                                                            | 'medium'     | 尺寸            |
+| variant     | 'flatted'                           \| 'filled' \| 'outlined' \| 'dashed' \| 'ghost' \| 'text' \| 'plain' | 'filled'     | 样式            |
+| orientation | 'horizontal' \| 'vertical'                                                                                | 'horizontal' | 前后缀的排列方向      |
+| prefix      | ReactNode                                                                                                 | -            |               |
+| suffix      | ReactNode                                                                                                 | -            |               |
+| loading     | boolean                                                                                                   | false        |               |
+| readOnly    | boolean                                                                                                   | false        |               |
+| icon        | ReactNode                                                                                                 | -            | prefix属性的别名   |
+| label       | ReactNode                                                                                                 | -            | children属性的别名 |

package/documentation/dist/components/card.md

@@ -0,0 +1,30 @@
+# Card 卡片
+
+## 示例
+
+```tsx
+import {Card, Flex} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex gap={12} wrap="wrap">
+            <Card>Card</Card>
+            <Card bordered>Card</Card>
+            <Card elevation={1}>Card</Card>
+            <Card elevation={2}>Card</Card>
+            <Card elevation={3}>Card</Card>
+            <Card elevation={4}>Card</Card>
+            <Card elevation={5}>Card</Card>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性           | 类型      | 默认值                                | 说明             |
+|--------------|---------|------------------------------------|----------------|
+| flexable     | boolean | false                              | 卡片内容是否使用flex布局 |
+| bordered     | boolean | false                              | 是否渲染边框         |
+| elevation    | number  | 0                                  | 支持0-5          |
+| borderRadius | number  | [Theme.borderRadius](/guide/theme) | 圆角             |

package/documentation/dist/components/cascade.md

@@ -0,0 +1,48 @@
+# Cascade 级联选择器
+
+## 示例
+
+```tsx
+import {Cascade} from '@canlooks/can-ui'
+
+export default function Index() {
+    const options = [
+        {
+            value: 'zhejiang',
+            label: 'Zhejiang',
+            children: [
+                {
+                    value: 'hangzhou',
+                    label: 'Hangzhou',
+                    children: [
+                        {
+                            value: 'xihu',
+                            label: 'West Lake',
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            value: 'jiangsu',
+            label: 'Jiangsu',
+            children: [
+                {
+                    value: 'nanjing',
+                    label: 'Nanjing',
+                    children: [
+                        {
+                            value: 'zhonghuamen',
+                            label: 'Zhong Hua Men',
+                        },
+                    ],
+                },
+            ],
+        },
+    ]
+
+    return (
+        <Cascade options={options} style={{width: 200}}/>
+    )
+}
+```

package/documentation/dist/components/checkbox.md

@@ -0,0 +1,13 @@
+# Checkbox 选择框
+
+## 示例
+
+```tsx
+import {Checkbox, CheckboxGroup} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Checkbox label="选择"/>
+    )
+}
+```

package/documentation/dist/components/colorPicker.md

@@ -0,0 +1,27 @@
+# ColorPicker 颜色选择
+
+## 示例
+
+```tsx
+import {ColorPicker} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <ColorPicker/>
+    )
+}
+```
+
+## Props
+
+颜色选择器的值使用`Color`对象，详情请查看[官方文档](https://github.com/Qix-/color)。
+
+| 属性           | 类型                             | 默认值      | 说明    |
+|--------------|--------------------------------|----------|-------|
+| size         | 'small' \| 'medium' \| 'large' | 'medium' |       |
+| shape        | 'square' \| 'circular'         | 'square' |       |
+| label        | ReactNode                      | '自定义'    |       |
+| presets      | Color[]                        | -        | 预设的颜色 |
+| defaultValue | Color                          | -        | 默认的颜色 |
+| value        | Color                          | -        | 受控的颜色 |
+| onChange     | (Color) => void                | -        | 变化回调  |