@canlooks/can-ui 0.0.85 → 0.0.87

package/documentation/dist/components/highlight.md

@@ -0,0 +1,26 @@
+# Highlight 高亮文本
+
+## 示例
+
+```tsx
+import {Highlight} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <div>
+            <Highlight keywords="高亮">高亮文本</Highlight>
+        </div>
+    )
+}
+```
+
+## Props
+
+| 属性                 | 类型                          | 默认值 | 说明                 |
+|--------------------|-----------------------------|-----|--------------------|
+| keywords           | string \| string[]          | -   | 高亮的关键词             |
+| highlightClassName | string                      | -   | 高亮元素的类名            |
+| highlightStyle     | CSSProperties               | -   | 高亮元素的样式            |
+| renderHighlight    | (text: string) => ReactNode | -   | 自定义渲染高亮元素          |
+| children           | string                      | -   | 文本，`content`属性的别名  |
+| content            | string                      | -   | 文本，`children`属性的别名 |

package/documentation/dist/components/image.md

@@ -0,0 +1,90 @@
+# Image 图片
+
+## 普通示例
+
+```tsx
+import {Image} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Image src="/logo.png" style={{width: 100, height: 100}}/>
+    )
+}
+```
+
+## 相册预览示例
+
+```tsx
+import {Flex, Gallery, Image} from '@canlooks/can-ui'
+
+export default function Index() {
+    const src1 = 'https://picsum.photos/seed/seed1/100'
+    const src2 = 'https://picsum.photos/seed/seed2/100'
+    const src3 = 'https://files.codelife.cc/wallhaven/full/gj/wallhaven-gj8v93.png'
+
+    const [open, setOpen] = React.useState(false)
+    const [index, setIndex] = React.useState(0)
+
+    const previewHandler = (e: React.MouseEvent<HTMLDivElement>, index: number) => {
+        e.preventDefault()
+        setOpen(true)
+        setIndex(index)
+    }
+
+    return (
+        <>
+            <Flex gap={12}>
+                <Image src={src1} style={{width: 100, height: 100}} onPreview={e => previewHandler(e, 0)}/>
+                <Image src={src2} style={{width: 100, height: 100}} onPreview={e => previewHandler(e, 1)}/>
+                <Image src={src3} style={{width: 100, height: 100}} onPreview={e => previewHandler(e, 2)}/>
+            </Flex>
+
+            <Gallery
+                open={open}
+                onOpenChange={setOpen}
+                index={index}
+                onIndexChange={setIndex}
+                src={[src1, src2, src3]}
+            />
+        </>
+    )
+}
+```
+
+## ImageProps
+
+| 属性             | 类型                                      | 默认值  | 说明                                             |
+|----------------|-----------------------------------------|------|------------------------------------------------|
+| src            | string                                  | -    |                                                |
+| fallback       | string                                  | -    | 加载失败时会自动加载fallback                             |
+| renderLoading  | ReactNode                               | -    | 自定义渲染loading展位符，若指定为`false`或`null`会禁用loading功能 |
+| objectFit      | CSSProperties['objectFit']              | -    |                                                |
+| objectPosition | CSSProperties['objectPosition']         | -    |                                                |
+| actions        | ReactNode                               | -    | 自定义渲染操作，默认为`预览`按钮                              |
+| previewable    | boolean                                 | true | 是否可预览                                          |
+| previewProps   | [ImagePreviewProps](#ImagePreviewProps) | -    | 传递至`<ImagePreview/>`组件的属性                      |
+| onPreview      | (event) => void                         | -    | 点击预览按钮                                         |
+| onLoad         | ImgHTMLAttributes['onLoad']             | -    | 传递至`<img/>`元素                                  |
+| onError        | ImgHTMLAttributes['onError']            | -    | 传递至`<img/>`元素                                  |
+| alt            | ImgHTMLAttributes['alt']                | -    | 传递至`<img/>`元素                                  |
+| width          | ImgHTMLAttributes['width']              | -    | 传递至`<img/>`元素                                  |
+| height         | ImgHTMLAttributes['height']             | -    | 传递至`<img/>`元素                                  |
+| imgProps       | ImgHTMLAttributes                       | -    | 传递至`<img/>`元素                                  |
+
+## ImagePreviewProps
+
+`<ImagePreview/>`组件继承了`<Modal/>`组件的所有属性，此外还有如下属性：
+
+| 属性                    | 类型                                                                                   | 默认值  | 说明                 |
+|-----------------------|--------------------------------------------------------------------------------------|------|--------------------|
+| src                   | string[]                                                                             | -    |                    |
+| defaultIndex          | number                                                                               | 0    | 默认预览的图片下标（对应`src`） |
+| index                 | number                                                                               | -    | 受控的预览下标            |
+| onIndexChange         | (index) => void                                                                      | -    |                    |
+| defaultOpen           | boolean                                                                              | -    |                    |
+| onOpenChange          | (open) => void                                                                       | -    |                    |
+| showRotate            | boolean                                                                              | true | 是否渲染旋转按钮           |
+| showZoom              | boolean                                                                              | true | 是否渲染放大缩小按钮         |
+| showClose             | boolean                                                                              | true | 是否渲染关闭按钮           |
+| renderControl         | ReactNode                                                                            | -    | 自定义渲染控制按钮          |
+| transformWrapperProps | [ReactZoomPanPinchProps](https://github.com/BetterTyped/react-zoom-pan-pinch#readme) | -    |                    |

package/documentation/dist/components/input.md

@@ -0,0 +1,39 @@
+# Input 输入框
+
+## 示例
+
+```tsx
+import {Input} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex width={300} gap={15} direction="column">
+            <Input
+                prefix={<Icon icon={faUser}/>}
+                suffix="后缀"
+                placeholder="请输入内容"
+            />
+            <Input variant="underlined" placeholder="请输入内容"/>
+            <Input variant="plain" placeholder="请输入内容"/>
+            <Input shape="rounded" placeholder="请输入内容"/>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+`<Input/>`组件继承了`<input/>`元素的全部属性，此外还有如下属性：
+
+| 属性             | 类型                                               | 默认值        | 说明                 |
+|----------------|--------------------------------------------------|------------|--------------------|
+| inputProps     | InputHTMLAttributes                              | -          | 传递至`<input/>`元素的属性 |
+| widthAdaptable | boolean                                          | false      | 是否根据内容自动调整宽度       |
+| variant        | 'outlined' \| 'underlined' \| 'plain'            | 'outlined' |                    |
+| size           | 'small' \| 'medium'                   \| 'large' |            |                    |
+| color          | string                                           | -          |                    |
+| prefix         | ReactNode                                        | -          | 前缀                 |
+| suffix         | ReactNode                                        | -          | 后缀                 |
+| clearable      | boolean                                          | true       | 是否显示清空按钮           |
+| onClear        | () => void                                       | -          |                    |
+| loading        | boolean                                          | false      |                    |

package/documentation/dist/components/loading.md

@@ -0,0 +1,46 @@
+# Loading 加载中
+
+## LoadingIndicator
+
+```tsx
+import {LoadingIndicator} from '@canlooks/can-ui'
+
+export default function () {
+    return <LoadingIndicator/>
+}
+```
+
+### LoadingIndicatorProps
+
+| 属性    | 类型     | 默认值       | 说明 |
+|-------|--------|-----------|----|
+| size  | number | -         | 尺寸 |
+| width | number | -         | 粗细 |
+| color | string | 'primary' |    |
+
+## Loading
+
+```tsx
+import {Loading} from '@canlooks/can-ui'
+
+export default function () {
+    return (
+        <Loading
+            open
+            progress={46}
+        >
+            <div style={{height: 150}}/>
+        </Loading>
+    )
+}
+```
+
+### LoadingProps
+
+| 属性             | 类型                                              | 默认值       | 说明                    |
+|----------------|-------------------------------------------------|-----------|-----------------------|
+| text           | ReactNode                                       | '加载中...'  |                       |
+| progress       | number                                          | -         | 若指定该字段会显示进度条          |
+| color          | string                                          | 'primary' |                       |
+| indicatorProps | [LoadingIndicatorProps](#LoadingIndicatorProps) | -         |                       |
+| progressProps  | [ProgressProps](/components/progress)           | -         | 传递至`<Progress/>`组件的属性 |

package/documentation/dist/components/menu.md

@@ -0,0 +1,85 @@
+# Menu 菜单
+
+## Menu示例
+
+```tsx
+import {Menu} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Menu
+            style={{width: 300}}
+            items={[
+                {label: '选项1', value: 1},
+                {label: '选项2', value: 2},
+            ]}
+        />
+    )
+}
+```
+
+## menuProps
+
+| 属性               | 类型                                                  | 默认值     | 说明                               |
+|------------------|-----------------------------------------------------|---------|----------------------------------|
+| items            | [MenuItemProps](#menuItemProps)[]                   | -       |                                  |
+| primaryKey       | string \| number                                    | 'value' | item中的主键                         |
+| labelKey         | string \| number                                    | 'value' | item中作为label的键                   |
+| childrenKey      | string \| number                                    | 'value' | item中作为children的键，若存在该字段，则会渲染子菜单 |
+| defaultExpanded  | (string \| number)[]                                | -       |                                  |
+| expanded         | (string \| number)[]                                | -       |                                  |
+| onExpandedChange | (expanded) => void                                  | -       |                                  |
+| multiple         | boolean                                             | false   | 是否支持多选                           |
+| defaultValue     | string \| number \| (string \| number)[]            |         |                                  |
+| value            | string \| number \| (string \| number)[]            |         |                                  |
+| onChange         | (value) => void                                     |         |                                  |
+| size             | 'small' \| 'medium'                      \| 'large' | 'large' |                                  |
+| showCheckbox     | boolean                                             | false   |                                  |
+| ellipsis         | boolean                                             | false   |                                  |
+| indent           | number                                              | 24      |                                  |
+
+## MenuItem可单独使用
+
+```tsx
+import {MenuItem} from '@canlooks/can-ui'
+import {Icon} from '@canlooks/can-ui'
+import {faUser} from '@fortawesome/free-solid-svg-icons'
+
+export default function Index() {
+    return (
+        <div style={{width: 300}}>
+            <MenuItem
+                prefix={<Icon icon={faUser}/>}
+                label="选项1"
+                suffix="这是一个选项"
+                selected
+                defaultExpanded
+            >
+                <MenuItem label="选项1-1"/>
+                <MenuItem label="选项1-2"/>
+            </MenuItem>
+        </div>
+    )
+}
+```
+
+## MenuItemProps
+
+| 属性               | 类型                                                  | 默认值     | 说明                                           |
+|------------------|-----------------------------------------------------|---------|----------------------------------------------|
+| size             | 'small' \| 'medium'                      \| 'large' | 'large' |                                              |
+| color            | string                                              | -       |                                              |
+| emphasized       | boolean                                             | false   | 是否强调颜色，如果指定了`color`建议同时指定`emphasized`为`true` |
+| selected         | boolean                                             | false   | 是否选中状态                                       |
+| disabled         | boolean                                             | false   |                                              |
+| showCheckbox     | boolean                                             | false   |                                              |
+| checkboxProps    | [checkboxProps](/components/checkbox)               | -       |                                              |
+| ellipsis         | boolean                                             | false   |                                              |
+| prefix           | ReactNode                                           | -       |                                              |
+| label            | ReactNode                                           | -       |                                              |
+| suffix           | ReactNode                                           | -       |                                              |
+| indent           | number                                              | 24      |                                              |
+| expandIcon       | ReactNode                                           | -       |                                              |
+| defaultExpanded  | boolean                                             | -       |                                              |
+| expanded         | boolean                                             | -       |                                              |
+| onExpandedChange | (expanded) => void                                  | -       |                                              |

package/documentation/dist/components/pagination.md

@@ -0,0 +1,38 @@
+# Pagination 分页器
+
+## 示例
+
+若不指定`children`默认会开启所有功能，或者通过`children`指定功能及顺序。
+
+```tsx
+import {Flex, Pagination} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex direction="column" gap={24}>
+            <Pagination total={50}/>
+
+            <Pagination>
+                <Pagination.Counter/>
+                <Pagination.Pager/>
+                <Pagination.Sizer/>
+                <Pagination.Jumper/>
+            </Pagination>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性               | 类型                             | 默认值      | 说明      |
+|------------------|--------------------------------|----------|---------|
+| size             | 'small' \| 'medium' \| 'large' | 'medium' |         |
+| total            | number                         |          | 数据的总条数  |
+| defaultPage      | number                         |          | 页码，从1开始 |
+| page             | number                         |          |         |
+| onPageChange     | (page) => void                 |          |         |
+| defaultPageSize  | number                         | 10       | 每页的条数   |
+| pageSize         | number                         |          |         |
+| onPageSizeChange | (pageSize) => void             |          |         |
+| onChange         | (page, pageSize) => void       |          |         |

package/documentation/dist/components/pickerDialog.md

@@ -0,0 +1,56 @@
+# PickerDialog 选择对话框
+
+## 示例
+
+```tsx
+import {Button, DataGrid, PickerDialog} from '@canlooks/can-ui'
+
+export default function Index() {
+    const [open, setOpen] = React.useState(false)
+    
+    const rows = React.useMemo(() => [
+        {value: 1, label: '选项1', description: '这是选项1'},
+        {value: 2, label: '选项2', description: '这是选项2'},
+        {value: 3, label: '选项3', description: '这是选项3'},
+        {value: 4, label: '选项4', description: '这是选项4'},
+        {value: 5, label: '选项5', description: '这是选项5'},
+        {value: 6, label: '选项6', description: '这是选项6'},
+        {value: 7, label: '选项7', description: '这是选项7'},
+        {value: 8, label: '选项8', description: '这是选项8'}
+    ], [])
+    
+    const rowsGroup = React.useMemo(() => Map.groupBy(rows, item => item.value), [rows])
+
+    return (
+        <>
+            <Button onClick={() => setOpen(true)}>打开选择对话框</Button>
+            <PickerDialog
+                open={open}
+                onClose={() => setOpen(false)}
+                title="选择对话框"
+                options={rows}
+                multiple
+                primaryKey="value"
+                selectedItemProps={value => {
+                    const item = rowsGroup.get(value)[0]
+                    return {
+                        title: item.label,
+                        description: item.description
+                    }
+                }}
+            >
+                <DataGrid
+                    primaryKey="value"
+                    columns={[
+                        {
+                            title: 'Label',
+                            field: 'label',
+                        }
+                    ]}
+                    rows={rows}
+                />
+            </PickerDialog>
+        </>
+    )
+}
+```

package/documentation/dist/components/placeholder.md

@@ -0,0 +1,30 @@
+# Placeholder 占位符
+
+## 示例
+
+```tsx
+import {Flex, Placeholder} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex wrap="wrap" gap={12}>
+            <Placeholder/>
+            <Placeholder status="searching"/>
+            <Placeholder status="success"/>
+            <Placeholder status="error"/>
+            <Placeholder status="warning"/>
+            <Placeholder status="info" description="这是描述信息"/>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性          | 类型                                                                   | 默认值     | 说明 |
+|-------------|----------------------------------------------------------------------|---------|----|
+| status      | 'empty' \| 'searching' \|'success' \| 'error' \| 'warning' \| 'info' | 'empty' |    |
+| image       | ReactNode                                                            |         |
+| title       | ReactNode                                                            |         |
+| description | ReactNode                                                            |         |
+| extra       | ReactNode                                                            |         |

package/documentation/dist/components/progress.md

@@ -0,0 +1,43 @@
+# Progress 进度条
+
+## 示例
+
+```tsx
+import {Progress} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex width="100%" direction="column" gap={24}>
+            <Progress value={23.45}/>
+            <Flex>
+                <Flex flex={1} justifyContent="center">
+                    <Progress variant="circular" value={23.45}/>
+                </Flex>
+                <Flex flex={1} justifyContent="center">
+                    <Progress variant="gauge" value={23.45}/>
+                </Flex>
+                <Flex flex={1} justifyContent="center">
+                    <Progress variant="circular" indeterminate/>
+                </Flex>
+            </Flex>
+            <Progress indeterminate/>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性            | 类型                                                              | 默认值       | 说明                              |
+|---------------|-----------------------------------------------------------------|-----------|---------------------------------|
+| showInfo      | boolean                                                         | true      | 是否显示文字                          |
+| renderInfo    | (value: number) => ReactNode                                    | -         |                                 |
+| color         | string                                                          | 'primary' |                                 |
+| status        | 'default' \| 'processing'    \| 'success' \| 'error'            | 'default' |                                 |
+| variant       | 'linear' \| 'circular'                               \| 'gauge' | 'linear'  |                                 |
+| gapDegree     | number                                                          | 90        | `variant`为`gauge`时有效，下方缺口的角度    |
+| size          | number                                                          | 60        | `variant`为`circular`时有效，表示圆圈的大小 |
+| barWidth      | number                                                          | 4         | 表示进度条粗细,或圆环的宽度                  |
+| indeterminate | boolean                                                         | false     | 若为`true`，则会一直播放动画               |
+| strokeLinecap | SVGAttributes<SVGCircleElement>['strokeLinecap']                | -         | 传递至`<circle/>`元素的属性             |
+| value         | number                                                          | 0         | 百分比，0 - 100                     |

package/documentation/dist/components/radio.md

@@ -0,0 +1,37 @@
+# Radio 单选框
+
+## 示例
+
+```tsx
+import {Radio} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Radio label="选择"/>
+    )
+}
+```
+
+## RadioGroup
+
+```tsx
+import {RadioGroup} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <RadioGroup
+            defaultValue={1}
+            items={[
+                {
+                    label: '选项1',
+                    value: 1
+                },
+                {
+                    label: '选项2',
+                    value: 2
+                }
+            ]}
+        />
+    )
+}
+```

package/documentation/dist/components/rating.md

@@ -0,0 +1,35 @@
+# Rating 评分
+
+## 示例
+
+```tsx
+import {Flex, Rating} from '@canlooks/can-ui'
+import React from 'react'
+
+export default function Index() {
+    const [value, setValue] = React.useState(1.5)
+
+    return (
+        <Flex gap={24}>
+            <Rating value={value} onChange={setValue} allowHalf/>
+            <div>{value.toFixed(1)}分</div>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性                    | 类型                                                | 默认值       | 说明                                 |
+|-----------------------|---------------------------------------------------|-----------|------------------------------------|
+| color                 | string                                            | '#FFCC00' |                                    |
+| size                  | 'small' \| 'medium' \| 'large'                    | 'medium'  |                                    |
+| count                 | number                                            | 5         | 星星的数量                              |
+| renderStar            | ReactNode \| ({index, active, half}) => ReactNode | -         | 自定义渲染星星                            |
+| allowHalf             | boolean                                           | false     | 允许选中半颗星                            |
+| highlightSelectedOnly | boolean                                           | false     | 是否只高亮选中的星星，默认`false`表示从第一颗星开始高亮至选中 |
+| defaultValue          | number                                            | -         |                                    |
+| value                 | number                                            | -         |                                    |
+| onChange              | (value) => void                                   | -         |                                    |
+| readOnly              | boolean                                           |           |                                    |
+| disabled              | boolean                                           |           |                                    |

package/documentation/dist/components/resizable.md

@@ -0,0 +1,41 @@
+# Resizable 尺寸调整
+
+## 示例
+
+鼠标可拖拽`left`与`right`之间的边框调整尺寸
+
+```tsx
+import {Flex, Resizable} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Flex width="100%">
+            <Resizable
+                handlers="r"
+                style={{padding: 24, background: 'pink'}}
+            >
+                left
+            </Resizable>
+            <Flex
+                flex={1}
+                style={{padding: 24, background: 'yellow'}}
+            >
+                right
+            </Flex>
+        </Flex>
+    )
+}
+```
+
+## Props
+
+| 属性             | 类型                      | 默认值                                          | 说明                   |
+|----------------|-------------------------|----------------------------------------------|----------------------|
+| variant        | 'mouse' \| 'touch'      | 'mouse'                                      | 触屏端建议使用`touch`       |
+| handles        | string \| string[]      | ['t', 'r', 'b', 'l', 'tl', 'tr', 'br', 'bl'] |                      |
+| handleSize     | number                  |                                              |                      |
+| handleColor    | string                  |                                              |                      |
+| handlePosition | 'outside' \| 'inside'   | 'outside'                                    | `variant`为`touch`时生效 |
+| fixedRatio     | boolean                 | false                                        | 是否固定长宽比例             |
+| onResize       | (width, height) => void | -                                            |                      |
+| onResizeEnd    | (width, height) => void | -                                            |                      |

package/documentation/dist/components/scrollbar.md

@@ -0,0 +1,31 @@
+# Scrollbar 滚动条
+
+## 示例
+
+```tsx
+import {Scrollbar} from '@canlooks/can-ui'
+
+export default function Index() {
+    return (
+        <Scrollbar style={{height: 200}}>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+            <p>这里有很长很长的内容</p>
+        </Scrollbar>
+    )
+}
+```
+
+## Props
+
+| 属性       | 类型                   | 默认值       | 说明                                           |
+|----------|----------------------|-----------|----------------------------------------------|
+| variant  | 'contain' \| 'cover' | 'contain' | `contain`: 滚动条会挤压内容区域<br/>`cover` 滚动条会覆盖在内容上 |
+| autoHide | boolean              | true      | 是否自动隐藏滚动条                                    |
+| size     | string \| number     | '0.8em'   | 是否自动隐藏滚动条                                    |