@canlooks/can-ui 0.0.70 → 0.0.72

package/documentation/dist/components/highlight.md

@@ -1,26 +0,0 @@
-# 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

@@ -1,90 +0,0 @@
-# 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

@@ -1,39 +0,0 @@
-# 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

@@ -1,46 +0,0 @@
-# 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

@@ -1,85 +0,0 @@
-# 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

@@ -1,38 +0,0 @@
-# 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

@@ -1,56 +0,0 @@
-# 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

@@ -1,30 +0,0 @@
-# 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

@@ -1,43 +0,0 @@
-# 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

@@ -1,37 +0,0 @@
-# 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

@@ -1,35 +0,0 @@
-# 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

@@ -1,41 +0,0 @@
-# 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

@@ -1,31 +0,0 @@
-# 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'   | 是否自动隐藏滚动条                                    |