@canlooks/can-ui 0.0.70 → 0.0.72

package/documentation/dist/components/segmented.md

@@ -1,57 +0,0 @@
-# Segmented 段落选择器
-
-## 示例
-
-```tsx
-import {Segmented} from '@canlooks/can-ui'
-
-export default function Index() {
-    return (
-        <Segmented
-            options={[
-                {
-                    label: '选项1',
-                    value: 1
-                },
-                {
-                    label: '选项2',
-                    value: 2
-                },
-                {
-                    label: '选项3',
-                    value: 3
-                }
-            ]}
-            defaultValue={1}
-        />
-    )
-}
-```
-
-## SegmentedProps
-
-| 属性             | 类型                                                                     | 默认值                | 说明                   |
-|----------------|------------------------------------------------------------------------|--------------------|----------------------|
-| options        | [SegmentedOptionProps](#SegmentedOptionProps)[]                        | -                  |                      |
-| orientation    | 'horizontal'                                             \| 'vertical' | 'horizontal'       |                      |
-| size           | 'small' \| 'medium'                           \| 'large'               | 'medium'           |                      |
-| labelKey       | string                                                                 | 'label'            | `option`中用做`label`的键 |
-| primaryKey     | string                                                                 | 'value'            | `option`中用做主键的键      |
-| fullWidth      | boolean                                                                | false              | 是否占满整行               |
-| indicatorColor | string                                                                 | background.content | 指示器的颜色               |
-| defaultValue   |                                                                        | -                  |                      |
-| value          |                                                                        | -                  |                      |
-| onChange       | (value) => void                                                        | -                  |                      |
-| readOnly       | boolean                                                                | false              |                      |
-| disabled       | boolean                                                                | false              |                      |
-
-## SegmentedOptionProps
-
-| 属性          | 类型                                                                     | 默认值   | 说明          |
-|-------------|------------------------------------------------------------------------|-------|-------------|
-| orientation | 'horizontal'                                             \| 'vertical' | -     |             |
-| prefix      | ReactNode                                                              | -     | 前缀，通常用于渲染图标 |
-| suffix      | ReactNode                                                              | -     | 后缀          |
-| value       | string \| number                                                       | -     |             |
-| label       | ReactNode                                                              | -     |             |
-| disabled    | boolean                                                                | false |             |

package/documentation/dist/components/select.md

@@ -1,30 +0,0 @@
-# Select 选择器
-
-## 示例
-
-```tsx
-import {Select} from '@canlooks/can-ui'
-
-export default function Index() {
-    return (
-        <Select
-            style={{width: 200}}
-            options={[
-                {
-                    label: '选项1',
-                    value: 1
-                },
-                {
-                    label: '选项2',
-                    value: 2
-                },
-                {
-                    label: '选项3',
-                    value: 3
-                }
-            ]}
-            defaultValue={1}
-        />
-    )
-}
-```

package/documentation/dist/components/skeleton.md

@@ -1,26 +0,0 @@
-# Skeleton 骨架屏
-
-## 示例
-
-```tsx
-import {Flex, Skeleton} from '@canlooks/can-ui'
-
-export default function Index() {
-    return (
-        <Flex width="100%" direction="column" gap={24}>
-            <Skeleton/>
-            <Skeleton.Card/>
-            <Skeleton.Table/>
-        </Flex>
-    )
-}
-```
-
-## Props
-
-| 属性        | 类型                                       | 默认值       | 说明              |
-|-----------|------------------------------------------|-----------|-----------------|
-| variant   | 'circular' \| 'rectangular' \| 'rounded' | 'rounded' |                 |
-| animation | boolean                                  | true      | 是否播放动画          |
-| width     | string \| number                         | -         | 同`style.width`  |
-| height    | string \| number                         | -         | 同`style.height` |

package/documentation/dist/components/slidableActions.md

@@ -1,53 +0,0 @@
-# SlidableActions 滑动操作
-
-## 示例
-
-```tsx
-import {SlidableActions} from '@canlooks/can-ui'
-
-export default function Index() {
-    return (
-        <SlidableActions
-            style={{width: 400}}
-            leftActions={[
-                {
-                    label: '操作1',
-                    color: 'warning'
-                },
-                {
-                    label: '操作2',
-                    color: 'info'
-                }
-            ]}
-            rightActions={{
-                label: '删除',
-                color: 'error'
-            }}
-        >
-            <MenuItem label="左右滑动显示更多操作"/>
-        </SlidableActions>
-    )
-}
-```
-
-## Props
-
-| 属性                     | 类型                                        | 默认值        | 说明              |
-|------------------------|-------------------------------------------|------------|-----------------|
-| leftActions            | [ActionType](#ActionType) \| ActionType[] | -          |                 |
-| rightActions           | ActionType \| ActionType[]                | -          |                 |
-| autoReturn             | boolean                                   | true       | 点击action后是否自动归位 |
-| bounceElementTranslate | number                                    | 12         | 元素弹性移动距离        |
-| bounceDragDistance     | number                                    | 240        | 手指弹性拖拽距离        |
-| effectiveSpeed         | number                                    | 450 (px/s) | 滑动生效的速度         |
-| disabled               | boolean                                   | false      |                 |
-
-## ActionType
-
-| 属性          | 类型                                      | 默认值       | 说明                  |
-|-------------|-----------------------------------------|-----------|---------------------|
-| color       | string                                  | 'default' |                     |
-| label       | ReactNode                               | -         |                     |
-| icon        | ReactNode                               | -         |                     |
-| autoReturn  | boolean                                 | true      | 点击当前action后是否自动归位   |
-| buttonProps | [ButtonProps](/components/button#Props) | -         | 传递至`<Button/>`组件的属性 |

package/documentation/dist/guide/appComponent.md

@@ -1,30 +0,0 @@
-# 入口组件
-
-## <App\/>
-
-通常使用`<App/>`组件作为入口组件，该组件定义了[全局方法](globalMethods)与顶层样式，也便于[自定义主题](theme)
-
-如果你使用`npx create-canlooks`脚手架程序创建项目，你会得到类似这样的代码：
-
-```tsx no-preview
-import {App} from '@canlooks/can-ui'
-
-export default function Root() {
-    return (
-        <App>
-            {/*your top component here*/}
-        </App>
-    )
-}
-```
-
-## Props
-
-`<App/>`组件继承了`<div/>`元素的所有属性，此外还有以下属性：
-
-| 属性        | 类型                           | 默认值   | 说明                                           |
-|-----------|------------------------------|-------|----------------------------------------------|
-| theme     | [ThemeDefinition](theme)     | -     | 传递给[<ThemeProvider\/>](theme)组件的属性           |
-| fill      | boolean                      | true  | <App\/>组件是否填满父元素，component为`null`或`false`时无效 |
-| children  | ReactNode                    | -     | 子组件                                          |
-| component | ElementType \| null \| false | 'div' | 使用特定的组件渲染，若指定为`null`或`false`则不会渲染组件          |

package/documentation/dist/guide/globalMethods.md

@@ -1,238 +0,0 @@
-# 全局方法
-
-## App.dialog
-
-- `App.dialog.info(props, [...args])`
-- `App.dialog.success(props, [...args])`
-- `App.dialog.warning(props, [...args])`
-- `App.dialog.error(props, [...args])`
-- `App.dialog.confirm(props, [...args])`
-
-`args`会传递至`props.onConfirm`与`props.onCancel`回调中
-
-```tsx
-import {App, Flex, Button} from '@canlooks/can-ui'
-
-export default function Index() {
-    const onClick = async (type: 'info' | 'success' | 'warning' | 'error' | 'confirm') => {
-        await App.dialog[type]({
-            title: '对话框',
-            content: '这是一个对话框'
-        })
-    }
-
-    return (
-        <Flex gap={12} wrap="wrap">
-            <Button onClick={() => onClick('info')}>info</Button>
-            <Button onClick={() => onClick('success')}>success</Button>
-            <Button onClick={() => onClick('warning')}>warning</Button>
-            <Button onClick={() => onClick('error')}>error</Button>
-            <Button onClick={() => onClick('confirm')}>confirm</Button>
-        </Flex>
-    )
-}
-```
-
-### dialog props
-
-| 属性                | 类型                                   | 默认值                                  | 说明                                                             |
-|-------------------|--------------------------------------|--------------------------------------|----------------------------------------------------------------|
-| icon              | ReactNode                            | [<StatusIcon\/>](/components/status) |                                                                |
-| title             | ReactNode                            |                                      |                                                                |
-| footer            | ReactNode                            |                                      |                                                                |
-| prefix            | ReactNode                            |                                      |                                                                |
-| suffix            | ReactNode                            |                                      |                                                                |
-| content           | ReactNode                            |                                      |                                                                |
-| width             | string \| number                     | 360                                  | 对话框的宽度                                                         |
-| minWidth          | string \| number                     |                                      |                                                                |
-| maxWidth          | string \| number                     | 100%                                 |                                                                |
-| showClose         | boolean                              |                                      | 是否显示关闭按钮                                                       |
-| closeProps        | [ButtonProps](/components/button#Props)    |                                      |                                                                |
-| showConfirm       | boolean                              | true                                 | 是否显示确定按钮                                                       |
-| confirmText       | ReactNode                            | '确定'                                 |                                                                |
-| confirmProps      | [ButtonProps](/components/button#Props)    |                                      |                                                                |
-| onConfirm         | (...args) => void                    |                                      |                                                                |
-| confirmLoading    | boolean                              |                                      | 确定按钮的加载状态                                                      |
-| showCancel        | boolean                              | true                                 | 取消按钮                                                           |
-| cancelText        | ReactNode                            | '取消'                                 |                                                                |
-| cancelProps       | [ButtonProps](/components/button#Props)    |                                      |                                                                |
-| onCancel          | (...args) => void                    |                                      |                                                                |
-| draggable         | boolean                              |                                      | 对话框是否可拖拽                                                       |
-| maskClosable      | boolean                              | true                                 | 是否可以点击遮罩层关闭                                                    |
-| onMaskClick       | MouseEventHandler                    |                                      | 点击遮罩层                                                          |
-| escapeClosable    | boolean                              | false                                | 是否可以点击`ESC`关闭                                                  |
-| defaultOpen       | boolean                              |                                      | 打开状态                                                           |
-| open              | boolean                              |                                      | 受控的打开状态                                                        |
-| onOpened          | () => void                           | 打开动画结束后                              |                                                                |
-| onClose           | (closeReason: string) => void        |                                      |                                                                |
-| onClosed          | () => void                           | 关闭动画结束后                              |                                                                |
-| container         | Element \| () => Element             | document.body                        | 容器元素，自定义渲染在DOM树的位置                                             |
-| forceRender       | boolean                              | undefined                            | `true`-强制渲染<br>`false`-关闭后销毁<br/>`undeinfed`-第一次打开时渲染，后跟随父组件销毁 |
-| singleLayer       | boolean                              | true                                 | 是否只显示一层遮罩                                                      |
-| removeFocusOnOpen | boolean                              | true                                 | 打开时是否移除当前焦点                                                    |
-| modalProps        | [ModalProps](/components/transition) |                                      | 传递给`<Modal/>`组件属性                                              |
-| maskProps         | DOMAttributes                        |                                      | 传递给遮罩层元素的属性                                                    |
-
----
-
-## App.message
-
-- `App.message.info(content|props)`
-- `App.message.success(content|props)`
-- `App.message.warning(content|props)`
-- `App.message.error(content|props)`
-
-```tsx
-import {App, Flex, Button} from '@canlooks/can-ui'
-
-export default function Index() {
-    const onClick = async (type: 'info' | 'success' | 'warning' | 'error') => {
-        await App.message[type]('这是一个消息框')
-    }
-
-    return (
-        <Flex gap={12} wrap="wrap">
-            <Button onClick={() => onClick('info')}>info</Button>
-            <Button onClick={() => onClick('success')}>success</Button>
-            <Button onClick={() => onClick('warning')}>warning</Button>
-            <Button onClick={() => onClick('error')}>error</Button>
-        </Flex>
-    )
-}
-```
-
-### message props
-
-| 属性                 | 类型                      | 默认值        | 说明       |
-|--------------------|-------------------------|------------|----------|
-| variant            | 'filled' \| 'outlined'  | 'outlined' | 弹框的样式    |
-| color              | string                  | 'primary'  |          |
-| icon               | ReactNode               |            |          |
-| title              | ReactNode               |            |          |
-| content            | ReactNode               |            |          |
-| showClose          | boolean                 | false      | 是否显示关闭按钮 |
-| placement          | string                  | 'top'      | 弹框弹出的位置  |
-| duration           | number                  | 3000       | 关闭延迟     |
-| onAutoClose        | () => void              |            | 自动关闭时    |
-| onCloseButtonClick | (e: MouseEvent) => void |            | 点击关闭按钮时  |
-
----
-
-## App.notification
-
-- `App.message.notification(content|props)`
-- `App.message.notification(content|props)`
-- `App.message.notification(content|props)`
-- `App.message.notification(content|props)`
-
-```tsx
-import {App, Flex, Button} from '@canlooks/can-ui'
-
-export default function Index() {
-    const onClick = async (type: 'info' | 'success' | 'warning' | 'error') => {
-        await App.notification[type]({
-            title: '通知',
-            content: '这是一个通知框'
-        })
-    }
-
-    return (
-        <Flex gap={12} wrap="wrap">
-            <Button onClick={() => onClick('info')}>info</Button>
-            <Button onClick={() => onClick('success')}>success</Button>
-            <Button onClick={() => onClick('warning')}>warning</Button>
-            <Button onClick={() => onClick('error')}>error</Button>
-        </Flex>
-    )
-}
-```
-
----
-
-### notification props
-
-notification方法接受与[message](#message%20props)方法相同的属性
-
----
-
-## App.actionSheet
-
-- `App.actionSheet.confirm(title|props, [...args])`
-- `App.actionSheet.open(props, [...args])`
-
-```tsx
-import {App, Flex, Button} from '@canlooks/can-ui'
-
-export default function Index() {
-    const onClick = async (type: 'confirm' | 'open') => {
-        const selected = await App.actionSheet[type]({
-            title: '弹出菜单',
-            actions: [
-                {label: '选项1'},
-                {label: '选项2'}
-            ]
-        })
-    }
-
-    return (
-        <Flex gap={12} wrap="wrap">
-            <Button onClick={() => onClick('confirm')}>confirm</Button>
-            <Button onClick={() => onClick('open')}>open</Button>
-        </Flex>
-    )
-}
-```
-
-### actionSheet props
-
-| 属性                | 类型                                   | 默认值                                   | 说明                                                             |
-|-------------------|--------------------------------------|---------------------------------------|----------------------------------------------------------------|
-| title             | ReactNode                            |                                       |                                                                |
-| actions           | ReactNode                            | [MenuItemProps](/components/menuItem#MenuItemProps) |                                                                |
-| placement         | 'top' \| 'bottom'                    | 'bottom'                              | 菜单弹出的位置                                                        |
-| maskClosable      | boolean                              | true                                  | 是否可以点击遮罩层关闭                                                    |
-| escapeClosable    | boolean                              | false                                 | 是否可以点击`ESC`关闭                                                  |
-| onAction          | (action) => void                     |                                       | 点击选项                                                           |
-| onConfirm         | (e: MouseEvent) => void              |                                       | 点击确定                                                           |
-| showConfirm       | boolean                              | true                                  | 是否显示确定选项，`actionSheet.confirm`方法有效                             |
-| confirmText       | ReactNode                            | '确定'                                  |                                                                |
-| confirmProps      | [ButtonProps](/components/button#Props)    |                                       |                                                                |
-| showCancel        | boolean                              | true                                  | 是否显示取消选项，`actionSheet.confirm`方法有效                             |
-| cancelText        | ReactNode                            | '取消'                                  |                                                                |
-| cancelProps       | [ButtonProps](/components/button#Props)    |                                       |                                                                |
-| onCancel          | (e: MouseEvent) => void              |                                       | 点击取消                                                           |
-| defaultOpen       | boolean                              |                                       | 打开状态                                                           |
-| open              | boolean                              |                                       | 受控的打开状态                                                        |
-| onOpened          | () => void                           | 打开动画结束后                               |                                                                |
-| onClose           | (closeReason: string) => void        |                                       |                                                                |
-| onClosed          | () => void                           | 关闭动画结束后                               |                                                                |
-| container         | Element \| () => Element             | document.body                         | 容器元素，自定义渲染在DOM树的位置                                             |
-| forceRender       | boolean                              | undefined                             | `true`-强制渲染<br>`false`-关闭后销毁<br/>`undeinfed`-第一次打开时渲染，后跟随父组件销毁 |
-| singleLayer       | boolean                              | true                                  | 是否只显示一层遮罩                                                      |
-| removeFocusOnOpen | boolean                              | true                                  | 打开时是否移除当前焦点                                                    |
-| slideProps        | [SlideProps](/components/transition) |                                       | 传递给`<Slide/>`的属性                                               |
-| maskProps         | DOMAttributes                        |                                       | 传递给遮罩层元素的属性                                                    |
-
----
-
-## useAppContext()
-
-如果你的应用使用了多个`<App/>`（入口组件），比如定义[局部样式](theme)。
-
-此时直接使用App全局方法，可能会导致上下文混淆，因此建议使用`useAppContext()`方法：
-
-```tsx no-preview
-import {useAppContext} from '@canlooks/can-ui'
-
-export default function Index() {
-    const {dialog, message, notification, actionSheet} = useAppContext()
-
-    const someMethod = () => {
-        dialog.confirm({
-            title: '对话框'
-        })
-    }
-    
-    // ...
-}
-```

package/documentation/dist/guide/icon.md

@@ -1,57 +0,0 @@
-# 图标
-
-## 图标库
-
-CanUI并不内置图标，但对主流的图标库均做了样式适配，你可以使用任何你喜欢的图标库，比如
-- [Font Awesome](https://fontawesome.com/)
-- [Material Design Icons](https://materialdesignicons.com/)
-- [Ant Design Icons](https://ant.design/components/icon/)
-- [Heroicons](https://heroicons.com/)
-- [Feather Icons](https://feathericons.com/)
-- [Ionicons](https://ionicons.com/)
-
-等等。
-
-CanUI默认使用`Font Awesome`并加入依赖项可直接使用。如果你想使用其他图标库，需要额外安装。
-
-## <Icon\/>
-
-`<Icon/>`组件支持fontAwesome图标库，将fontAwesome导出的图标传入`icon`属性即可。
-
-```tsx
-import {Icon} from '@canlooks/can-ui'
-import {faUser} from '@fortawesome/free-solid-svg-icons'
-
-export default function Index() {
-    return (
-        <Icon icon={faUser}/>
-    )
-}
-```
-
-### Props
-
-`<Icon/>`组件的属性继承于`FontAwesomeIconProps`，详情请查看[fontAwesome官方文档](https://fontawesome.com/)
-
-## 其他图标库
-
-使用其他图标库需要额外安装：
-
-### 以Material Design Icons为例
-
-```bash
-npm i @mdi/react @mdi/js
-```
-
-然后像其官网介绍的那样使用即可：
-
-```tsx no-preview
-import Icon from '@mdi/react'
-import {mdiAccount} from '@mdi/js'
-
-export default function Index() {
-    return (
-        <Icon path={mdiAccount} size={1}/>
-    )
-}
-```

package/documentation/dist/guide/introduction.md

@@ -1,2 +0,0 @@
-# 介绍
-无

package/documentation/dist/guide/startup.md

@@ -1,23 +0,0 @@
-# 开始
-## 安装
-
-```bash
-npm i @canlooks/can-ui
-```
-或使用脚手架程序
-```bash
-npx create-canlooks
-```
-
-## 使用
-你可以不进行任何配置就像使用其他`React`组件一样使用`CanUI`组件。
-
-```tsx
-import {Alert} from '@canlooks/can-ui'
-
-export default function Hello() {
-    return (
-        <Alert title="Hello Canlooks" status="success"/>
-    )
-}
-```