Merge branch 'revision-menu'

components/divider/demos/basic.md

@@ -0,0 +1,35 @@
+---
+title: 基本用法
+order: 0
+---
+
+`Divider`组件为区域内容的分割线，`dashed`属性可定义为虚线。
+
+```vdt
+import {Card, Divider} from 'kpc';
+
+<div>
+    <Card>
+        <div>默认直线</div>
+        <Divider/>
+        <div>虚线</div>
+        <Divider borderType={this.get('border')}/>
+    </Card>
+</div>
+```
+
+```ts
+
+interface Props {
+    border?: 'solid' | 'dashed' | 'dotted' | 'double'
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            border: 'dashed'
+        } as Props;
+    }
+}
+```

components/divider/demos/horizontal.md

@@ -0,0 +1,31 @@
+---
+title: 排列
+order: 2
+---
+
+通过`type`属性设置排列方式。
+
+```vdt
+import {Card, Divider, Icon} from 'kpc';
+
+<div class="divider-content">
+    Text
+    <Divider type="vertical"></Divider>
+    <a href="#">Link</a>
+    <Divider type="vertical">Text</Divider>
+    <a href="#">Link</a>
+</div>
+```
+
+```styl
+.divider-content
+    height 20px
+    display flex
+    align-items center
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+}
+```

components/divider/demos/margin.md

@@ -0,0 +1,32 @@
+---
+title: 外边距
+order: 3
+---
+
+通过`type`属性设置排列方式。
+
+```vdt
+import {Divider} from 'kpc';
+
+<div>
+    <div v-for={this.get('margin')}>
+        margin {$value}
+        <Divider margin={$value}/>
+    </div>
+    自定义margin
+    <Divider margin={30}/>
+    自定义margin
+    <Divider style={{margin: '8px 0 0 0'}}/>
+</div>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            margin: ['large', 'default', 'small', 'none'] as const
+        }
+    }
+}
+```

components/divider/demos/text.md

@@ -0,0 +1,27 @@
+---
+title: 文字及位置
+order: 1
+---
+
+`Divider`分割线可以设置文字，文字位置通过`position`属性设置。
+
+```vdt
+import {Card, Divider} from 'kpc';
+
+<div>
+    <Card>
+        <div>卡片内容</div>
+        <Divider>Text</Divider>
+        <div>卡片内容</div>
+        <Divider position="left">Text</Divider>
+        <div>卡片内容</div>
+        <Divider position="right">Text</Divider>
+    </Card>
+</div>
+```
+
+```ts
+export default class extends Component {
+    static template = template;
+}
+```

components/divider/index.md

@@ -0,0 +1,16 @@
+---
+title: 分割线
+category: 组件
+order: 30
+sidebar: doc
+---
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| borderType | 定义线的类型 | `"solid"` | `"dashed"` | `"dotted"` | `"double"` | `"solid"` |
+| position | 定义文字位置 | `"left"` | `"right"` | `"center"` | `"center"` |
+| type | 定义菜单排列方式：垂直，水平 | `"vertical"` | `"horizontal"` | `"vertical"` |
+| theme | 定义菜单主题 | `"light"` | `"dark"` | `"light"` |
+| margin | 定义`Divider`外边距 | `"large"` | `"default"` | `"small"` | `"none"` | `number` | `"default"` |

components/divider/index.ts

@@ -0,0 +1,36 @@
+import {Component, TypeDefs} from 'intact';
+import template from './index.vdt';
+import { useConfigContext } from '../config';
+
+export interface DividerProps {
+    borderType?: 'solid' | 'dashed' | 'dotted' | 'double',
+    position?: 'left' | 'right' | 'center',
+    type?: 'vertical' | 'horizontal',
+    theme?: 'light' | 'dark',
+    margin?: 'large' | 'default' | 'small' | 'none' | number,
+}
+
+const typeDefs: Required<TypeDefs<DividerProps>> = {
+    borderType: ['solid', 'dashed', 'dotted', 'double'],
+    position: ['left', 'right', 'center'],
+    type: ['vertical', 'horizontal'],
+    theme: ['light', 'dark'],
+    margin: ['large', 'default', 'small', 'none', Number]
+};
+
+const defaults = (): Partial<DividerProps> => ({
+    borderType: 'solid',
+    position: 'center',
+    type: 'horizontal',
+    theme: 'light',
+    margin: 'default'
+});
+
+export class Divider extends Component<DividerProps> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+
+    private config = useConfigContext();
+}
+

components/divider/index.vdt

@@ -0,0 +1,35 @@
+import {makeStyles} from './styles';
+import {getRestProps, addStyle} from '../utils';
+
+const {
+    children, className, borderType, 
+    position, type, theme, margin,
+    style
+} = this.get();
+const { k } = this.config;
+const _style = {};
+if (typeof margin === 'number') {
+    const _margin = type === 'vertical' ? `0 ${margin}px` : `${margin}px 0`;
+    _style.margin = _margin;
+}
+
+const classNameObj = {
+    [`${k}-divider`]: true,
+    [`${k}-${theme === 'dark' ? 'dark' : 'light'}`]: theme,
+    [`${k}-${type}`]: type,
+    [`${k}-${margin}`]: margin && typeof margin !== 'number',
+    [`${k}-with-text`]: children && type === 'horizontal',
+    [`${k}-${position}`]: position !== 'center',
+    [makeStyles(k, borderType)]: true,
+    [className]: className,
+};
+
+<div
+    {...getRestProps(this)}
+    class={classNameObj}
+    style={addStyle(style, _style)}
+>
+    <div v-if={children && type === 'horizontal'} class={`${k}-divider-text`}>
+        {children}
+    </div>
+</div>

components/divider/styles.ts

@@ -0,0 +1,109 @@
+import {css} from '@emotion/css';
+import {theme, setDefault} from '../../styles/theme';
+import {deepDefaults} from '../../styles/utils';
+import '../../styles/global';
+import { cache } from '../utils';
+
+const sizes = ['large', 'default', 'small'] as const;
+
+const defaults = {
+    positionOffset: '5%',
+    get borderColor() { return theme.color.darkBorder },
+
+    light: {
+        get borderColor() { return theme.color.disabledBg },
+    },
+
+    large: {
+        get margin() { return theme.large.padding},
+    }
+
+};
+
+let divider: typeof defaults;
+setDefault(() => {
+    divider = deepDefaults(theme, {divider: defaults}).divider;
+    makeStyles?.clearCache();
+});
+
+export const makeStyles = cache(function makeStyles(k: string, borderType: string) {
+    return css`
+        &.${k}-divider {
+            padding: 0;
+            border-top: 1px ${borderType} ${divider.borderColor};
+        }
+
+        &.${k}-light {
+            border-top-color: ${divider.light.borderColor};
+            &.${k}-with-text {
+                &::before, &::after {
+                    border-top-color: ${divider.light.borderColor};
+                }
+            }
+            &.${k}-vertical {
+                border-right-color: ${divider.light.borderColor};
+            }
+        }
+
+        &.${k}-vertical {
+            border-top: 0; 
+            display: inline-block;
+            height: 100%;
+            border-right: 1px solid ${divider.borderColor};
+            vertical-align: middle;
+        }
+
+        &.${k}-horizontal {
+            width: 100%;
+            min-width: 100%;
+        }
+
+        &.${k}-with-text {
+            border-top: 0;
+            display: flex;
+            align-items: center;
+            white-space: nowrap;
+            text-align: center;
+            &::before, &::after {
+                width: 50%;
+                content: '';
+                transform: translateY(50%);
+                border-top: 1px solid ${divider.borderColor};
+            }
+        }
+
+        .${k}-divider-text {
+            padding: 0 16px;
+        }
+
+        &.${k}-left {
+            &::before {
+                width: ${divider.positionOffset};
+            }
+            &::after {
+                width: calc(100% - ${divider.positionOffset});
+            }
+        }
+
+        &.${k}-right {
+            &::before {
+                width: calc(100% - ${divider.positionOffset});
+            }
+            &::after {
+                width: ${divider.positionOffset};
+            }
+        }
+
+        // margin sizes
+        ${sizes.map(size => {
+            return css`
+                &.${k}-${size} {
+                    margin: ${theme[size].margin} 0;
+                    &.${k}-vertical {
+                        margin: 0 ${theme[size].margin};
+                    }
+                }
+            `;
+        })}
+    `;
+});

components/ellipsis/demos/basic.md

@@ -0,0 +1,44 @@
+---
+title: 基本用法
+order: 0
+---
+
+`width`属性可定义可展示的宽度，若不设置`width`，默认父级宽度为准。`maxLines`设置多行忽略最大行数。
+
+```vdt
+import {Ellipsis, Split} from 'kpc';
+
+<Split style="width: 400px">
+    <b:first>
+        <Ellipsis class="panel">测试测试测试测试测试测试</Ellipsis>
+        <br/>
+        <Ellipsis class="panel" maxLines={2}>最大几行忽略最大几行忽略最大几行忽略</Ellipsis>
+    </b:first>
+    <b:last>
+        <Ellipsis class="panel" disabled={this.get('disabled')}>不展示tooltip不展示tooltip</Ellipsis>
+    </b:last>
+</Split>
+```
+
+```styl
+.k-split
+    border 1px solid #ccc
+    height 200px
+    margin-bottom 20px
+.panel
+    margin 10px
+```
+```ts
+interface Props {
+    disabled?: boolean
+}
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            disabled: true
+        };
+    }
+}
+```