@canlooks/can-ui 0.0.90 → 0.0.92

package/documentation/dist/components/segmented.md

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

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

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

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

@@ -0,0 +1,30 @@
+# 入口组件
+
+## <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

@@ -0,0 +1,238 @@
+# 全局方法
+
+## 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

@@ -0,0 +1,57 @@
+# 图标
+
+## 图标库
+
+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

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

package/documentation/dist/guide/startup.md

@@ -0,0 +1,23 @@
+# 开始
+## 安装
+
+```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"/>
+    )
+}
+```