@king-design/intact 2.0.0-beta.0

package/components/badge/demos/disabled.md

@@ -0,0 +1,28 @@
+---
+title: 禁用状态
+order: 2
+---
+
+不管是哪种展示类型，只要添加`disabled`属性，就不展示徽标
+
+```vdt
+import {Badge, Button} from 'kpc';
+
+<div>
+    <Badge disabled>Message</Badge>
+    <Badge disabled>
+        <Button>Message</Button>
+    </Badge>
+    <Badge text={19} disabled>
+        <Button>Message</Button>
+    </Badge>
+    <Badge text={100} max={99} disabled>
+        <Button>Message</Button>
+    </Badge>
+</div>
+```
+
+```styl
+.k-badge
+    margin-right 30px
+```

package/components/badge/demos/text.md

@@ -0,0 +1,29 @@
+---
+title: 展示文字
+order: 0
+---
+
+通过`text`属性，展示文案。如果`text`为`Number`类型，还可以指定`max`来规定最大展示数字，
+超过该数字，后面添加加号`+`
+
+```vdt
+import {Badge, Button} from 'kpc';
+
+<div>
+    <Badge text="new">Message</Badge>
+    <Badge text={6}>
+        <Button>Message</Button>
+    </Badge>
+    <Badge text={19}>
+        <Button>Message</Button>
+    </Badge>
+    <Badge text={100} max={99}>
+        <Button>Message</Button>
+    </Badge>
+</div>
+```
+
+```styl
+.k-badge
+    margin-right 30px
+```

package/components/badge/index.md

@@ -0,0 +1,14 @@
+---
+title: 徽标
+order: 0.1 
+category: 组件
+sidebar: doc
+---
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| text | 要展示的文案，不指定该属性，则展示红点 | `String` | `Number` | `undefined` |
+| max | 如果`text`属性`Number`类型，可以通过该属性指定最大数字 | `Number` | `undefined` |
+| disabled | 禁用徽标展示 | `Boolean` | `false` |

package/components/badge/index.ts

@@ -0,0 +1,20 @@
+import {Component, TypeDefs} from 'intact';
+import template from './index.vdt';
+
+export interface BadgeProps {
+    text?: string | number
+    max?: number
+    disabled?: boolean
+}
+
+const typeDefs: Required<TypeDefs<BadgeProps>> = {
+    text: [String, Number],
+    max: Number,
+    disabled: Boolean,
+};
+
+export class Badge extends Component<BadgeProps> {
+    static template = template;
+    static typeDefs = typeDefs;
+}
+

package/components/badge/index.vdt

@@ -0,0 +1,23 @@
+import {getRestProps} from '../utils';
+import makeStyles from './styles';
+
+let {
+    className, children, text, disabled, max
+} = this.get();
+
+if (typeof text === 'number' && max && text > max) {
+    text = `${max}+`;
+}
+
+const classNameObj = {
+    'k-badge': true,
+    [className]: className,
+    'k-has-text': text != null,
+    'k-alone': !children,
+    [makeStyles()]: true,
+};
+
+<div {...getRestProps(this)} class={classNameObj}>
+    {children}
+    <sup class="k-badge-text" v-if={!disabled}>{text}</sup>
+</div>

package/components/badge/styles.ts

@@ -0,0 +1,60 @@
+import {css, cx} from '@emotion/css';
+import {theme, setDefault} from '../../styles/theme';
+import {deepDefaults, palette}  from '../../styles/utils';
+import '../../styles/global';
+
+const defaults = {
+    width: '8px',
+    get height() { return badge.width },
+    bgColor: '#ff4133',
+
+    // has-text
+    textHeight: '16px',
+    textPadding: '5px',
+    textColor: '#fff',
+};
+
+let badge: any;
+setDefault(() => {
+    badge = deepDefaults(theme, {badge: defaults}).badge;
+});
+
+export default function makeStyles() {
+    return css`
+        display: inline-block;
+        position: relative;
+        vertical-align: middle;
+        > .k-badge-text {
+            display: inline-block;
+            position: absolute;
+            width: ${badge.width};
+            height: ${badge.height};
+            border-radius: 50%;
+            top: 0;
+            right: 0;
+            transform: translate(50%, -50%);
+            background: ${badge.bgColor};
+            font-size: 75%;
+            vertical-align: baseline;
+        }
+            
+        // has-text
+        &.k-has-text
+            > .k-badge-text {
+                width: auto;
+                height: ${badge.textHeight};
+                line-height: ${badge.textHeight};
+                border-radius: calc(${badge.textHeight} / 2);
+                padding: 0 ${badge.textPadding};
+                color: ${badge.textColor};
+            }
+                
+        // alone
+        &.k-alone
+            > .k-badge-text {
+                position: static;
+                transform: none;
+            }            
+    `;
+}
+

package/components/breadcrumb/demos/basic.md

@@ -0,0 +1,18 @@
+---
+title: 基础用法
+order: 0
+---
+
+通过添加`to`属性，来展示超链接
+
+> `to`属性支持`vue-router`或者`react-router` `push`方法参数用法
+
+```vdt
+import {Breadcrumb, BreadcrumbItem} from 'kpc';
+
+<Breadcrumb>
+    <BreadcrumbItem to="#/">item 1</BreadcrumbItem>
+    <BreadcrumbItem to="/components/breadcrumb/">item 2</BreadcrumbItem>
+    <BreadcrumbItem>item 3</BreadcrumbItem>
+</Breadcrumb>
+```

package/components/breadcrumb/demos/separator.md

@@ -0,0 +1,33 @@
+---
+title: 指定分隔符
+order: 1
+---
+
+通过`separator`属性或者`separator`扩展点可以指定分隔符
+
+```vdt
+import {Breadcrumb, BreadcrumbItem, Icon} from 'kpc';
+
+<Breadcrumb>
+    <b:separator>
+        <Icon class="ion-ios-arrow-thin-right separator" size="large" />
+    </b:separator>
+    <BreadcrumbItem to="/">
+        <Icon class="ion-home" /> item 1
+    </BreadcrumbItem>
+    <BreadcrumbItem to="/components/breadcrumb/">
+        <Icon class="ion-earth" /> item 2
+    </BreadcrumbItem>
+    <BreadcrumbItem>
+        <Icon class="ion-planet" /> item 3
+    </BreadcrumbItem>
+</Breadcrumb>
+```
+
+```styl
+.separator
+    color #ffa133
+    vertical-align middle
+i
+    margin-right 3px
+```

package/components/breadcrumb/index.md

@@ -0,0 +1,35 @@
+---
+title: 面包屑
+category: 组件
+order: 16 
+sidebar: doc
+---
+
+# 属性
+
+## Breadcrumb
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| separator | 指定分隔符 | `String` | `undefined` |
+
+## BreadcrumbItem
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| to | 指定超链接地址 | `String` | `undefined` |
+| separator | 指定分隔符，会覆盖`Breadcrumb`中的定义 | `String` | `">"` |
+
+# 扩展点
+
+## Breadcrumb
+
+| 名称 | 说明 |
+| --- | --- |
+| separator | 扩展分隔符 |
+
+## BreadcrumbItem
+
+| 名称 | 说明 |
+| --- | --- |
+| separator | 扩展分隔符，优先级高于`Breadcrumb`中的定义 |

package/components/breadcrumb/index.spec.ts

@@ -0,0 +1,51 @@
+import Demo from '~/components/breadcrumb/demos/basic';
+import {mount, dispatchEvent, unmount} from '../../test/utils';
+// import Vue from 'vue';
+// import VueRouter from 'vue-router';
+import {Breadcrumb, BreadcrumbItem} from './';
+
+// Vue.use(VueRouter);
+
+describe('Breadcrumb', () => {
+    afterEach(() => {unmount()});
+
+    it('should go to the url set by to', () => {
+        const [instance, element] = mount(Demo);
+
+        dispatchEvent(element.children[0].children[0], 'click');
+        expect(location.hash).to.eql('#/');
+    });
+
+    // it('should go to the url when use vue-router', () => {
+        // const Test = {
+            // template: (`
+                // <Breadcrumb>
+                    // <BreadcrumbItem to="index">Home</BreadcrumbItem>
+                    // <BreadcrumbItem>Detail</BreadcrumbItem>
+                // </Breadcrumb>
+            // `),
+            // components: {
+                // Breadcrumb, BreadcrumbItem,
+            // }
+        // };
+        // const router = new VueRouter({
+            // mode: 'history',
+            // routes: [
+                // {path: '*', component: Test}
+            // ]
+        // });
+
+        // const container = document.createElement('div');
+        // document.body.appendChild(container);
+
+        // const app = new Vue({
+            // router,
+            // render: h => h('router-view')
+        // }).$mount(container);
+
+        // app.$el.querySelector('a').click();
+        // expect(location.pathname).to.eql('/index');
+        // history.back();
+        // document.body.removeChild(app.$el);
+    // });
+});

package/components/breadcrumb/index.ts

@@ -0,0 +1,27 @@
+import {Component, TypeDefs} from 'intact';
+import template from './index.vdt';
+export * from './item';
+
+export interface BreadcrumbProps {
+    separator?: string
+}
+
+export interface BreadcrumbEvents { }
+
+export interface BreadcrumbBlocks {
+    separator: null
+}
+
+const typeDefs: Required<TypeDefs<BreadcrumbProps>> = {
+    separator: String,
+};
+
+const defaults = (): Partial<BreadcrumbProps> => ({
+    separator: '>'
+});
+
+export class Breadcrumb extends Component<BreadcrumbProps, BreadcrumbEvents, BreadcrumbBlocks> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+}

package/components/breadcrumb/index.vdt

@@ -0,0 +1,38 @@
+import {getRestProps, mapChildren} from '../utils';
+import {BreadcrumbItem} from './item';
+import makeStyles from './styles';
+
+const {children, separator, className} = this.get();
+
+const classNameObj = {
+    'k-breadcrumb': true,
+    [className]: className,
+    [makeStyles()]: true,
+};
+
+const separatorVNode = (
+    <span class="k-breadcrumb-separator">
+        <b:separator>{separator}</b:separator>
+    </span>
+);
+const vNodes = [];
+let lastIndex = -1;
+let separatorAmount = 0;
+mapChildren(children, (vNode, index) => {
+    vNodes.push(vNode);
+    if (vNode.tag === BreadcrumbItem) {
+        lastIndex = index;
+        separatorAmount++;
+        vNodes.push(separatorVNode);
+    }
+});
+// remove the last BreadcrumbItem's separator,
+// because it may have other vNodes follow the last BreadcrumbItem.
+// we record the last separator's index and splice array like bellow to remove it
+if (lastIndex > -1) {
+    vNodes.splice(lastIndex + separatorAmount, 1);
+}
+
+<div class={classNameObj} {...getRestProps(this)}>
+    {vNodes}
+</div>

package/components/breadcrumb/item.ts

@@ -0,0 +1,34 @@
+import {Component, TypeDefs, VNode} from 'intact';
+import {bind} from '../utils';
+import template from './item.vdt';
+import {isExternalLink} from '../utils';
+import {useRouter} from '../../hooks/useRouter';
+
+export interface BreadcrumbItemProps {
+    to?: string,
+}
+
+const typeDefs: Required<TypeDefs<BreadcrumbItemProps>> = {
+    to: String,
+};
+
+export class BreadcrumbItem extends Component<BreadcrumbItemProps> {
+    static template = template;
+    static typeDefs = typeDefs;
+
+    private router = useRouter();
+
+    @bind
+    private onClick(): void  {
+        const to = this.get('to');
+
+        if (to) {
+            const router = this.router.value;
+            if (router && !isExternalLink(to)) {
+                router.push(to!);
+            } else {
+                window.location.href = to!;
+            }
+        }
+    }
+}

package/components/breadcrumb/item.vdt

@@ -0,0 +1,12 @@
+import {getRestProps} from '../utils';
+
+const {to, children, className} = this.get();
+const classNameObj = {
+    'k-breadcrumb-item': true,
+    [className]: className,
+};
+
+<div class={classNameObj} {...getRestProps(this)}>
+    <a v-if={to} ev-click={this.onClick} class="k-breadcrumb-link">{children}</a>
+    <span v-else class="k-breadcrumb-link">{children}</span>
+</div>

package/components/breadcrumb/styles.ts

@@ -0,0 +1,42 @@
+import {css, cx} from '@emotion/css';
+import {deepDefaults, darken} from '../../styles/utils';
+import {theme, setDefault} from '../../styles/theme';
+import '../../styles/global';
+
+const defaults = {
+    fontSize: '14px',
+    get color() { return theme.color.lightBlack },
+    get hoverColor() {return theme.color.primary },
+    gap: '6px',
+    activeFontWeight: 'normal',
+    activeColor: `#262626`,
+};
+
+let breadcrumb: any;
+setDefault(() => {
+    breadcrumb = deepDefaults(theme, {breadcrumb: defaults}).breadcrumb;
+});
+
+export default function makeStyles() {
+    return css`
+        font-size: ${breadcrumb.fontSize};
+        .k-breadcrumb-item {
+            display: inline-block;
+            &:last-of-type .k-breadcrumb-link {
+                font-weight: ${breadcrumb.activeFontWeight};
+                color: ${breadcrumb.activeColor};
+            }
+        }
+        .k-breadcrumb-link,
+        .k-breadcrumb-link a {
+            color: ${breadcrumb.color};
+        }
+        a.k-breadcrumb-link:hover,
+        .k-breadcrumb-link a:hover {
+            color: ${breadcrumb.hoverColor};
+        }
+        .k-breadcrumb-separator {
+            margin: 0 ${breadcrumb.gap};
+        }
+    `
+}

package/components/button/constants.ts

@@ -0,0 +1 @@
+export const BUTTON_GROUP = 'ButtonGroup';

package/components/button/demos/basic.md

@@ -0,0 +1,26 @@
+---
+title: 按钮类型
+order: 0
+---
+
+有如下几种类型：默认按钮，主按钮，次按钮，警告按钮，危险按钮，成功按钮，文字按钮，超链接按钮
+
+```vdt
+import {Button} from 'kpc';
+
+<div>
+    <Button>default</Button>
+    <Button type="primary">primary</Button>
+    <Button type="secondary">secondary</Button>
+    <Button type="warning">warning</Button>
+    <Button type="danger">danger</Button>
+    <Button type="success">success</Button>
+    <Button type="none">none</Button>
+    <Button type="link">link</Button>
+</div>
+```
+
+```styl
+.k-btn
+    margin-right 20px
+```

package/components/button/demos/disabled.md

@@ -0,0 +1,17 @@
+---
+title: 禁用状态
+order: 5
+---
+
+添加`disabled`属性，可以禁用按钮
+
+```vdt
+import {Button} from 'kpc';
+
+<div>
+    <Button disabled>disabled</Button>
+    <Button disabled type="none">disabled text</Button>
+    <Button disabled icon circle><i class="k-icon ion-ios-search"></i></Button>
+    <Button disabled type="link">link</Button>
+</div>
+```

package/components/button/demos/ghost.md

@@ -0,0 +1,28 @@
+---
+title: 幽灵按钮
+order: 6
+---
+
+给组件添加`ghost`属性，可以展示透明背景的按钮，常用于深色背景下
+
+```vdt
+import {Button} from 'kpc';
+
+<div class="wrapper">
+    <Button ghost>default</Button>
+    <Button type="primary" ghost>primay</Button>
+    <Button type="warning" ghost>warning</Button>
+    <Button type="danger" ghost>danger</Button>
+    <Button type="success" ghost>success</Button>
+    <Button type="none" ghost>none</Button>
+    <Button type="primary" ghost disabled>primay</Button>
+</div>
+```
+
+```styl
+.wrapper
+    background #5a5a5d
+    padding 20px
+.k-btn
+    margin-right 20px
+```

package/components/button/demos/group.md

@@ -0,0 +1,77 @@
+---
+title: 按钮组
+order: 1
+---
+
+将`Button`作为`ButtonGroup`的子元素，可以展示按钮组。给`ButtonGroup`添加`vertical`属性，
+可以是按钮组纵向排列。给`ButtonGroup`添加`checkType`属性，可以使按钮组拥有单选或复选能力。
+
+```vdt
+import {Button, ButtonGroup} from 'kpc';
+
+<div>
+    <ButtonGroup>
+        <Button>开机</Button>
+        <Button>关机</Button>
+        <Button>重启</Button>
+    </ButtonGroup>
+    <ButtonGroup>
+        <Button type="danger">开机</Button>
+        <Button type="danger">关机</Button>
+        <Button type="danger">重启</Button>
+    </ButtonGroup>
+    <ButtonGroup>
+        <Button type="primary">
+            <i class="k-icon ion-ios-arrow-left"></i>上一页
+        </Button>
+        <Button type="primary">
+            下一页<i class="k-icon ion-ios-arrow-right"></i>
+        </Button>
+    </ButtonGroup>
+    <br /><br />
+    <p>纵向按钮组</p>
+    <ButtonGroup vertical>
+        <Button type="primary">开机</Button>
+        <Button type="primary">关机</Button>
+        <Button type="primary">重启</Button>
+    </ButtonGroup>
+    <br /><br />
+    <p>radio按钮组</p>
+    <ButtonGroup checkType="radio" v-model="city">
+        <Button value="beijing">北京</Button>
+        <Button value="shanghai" ref="__radioShanghai">上海</Button>
+        <Button value="guangzhou">广州</Button>
+        <Button value="shenzhen">深圳</Button>
+    </ButtonGroup>
+    <p>checkbox按钮组</p>
+    <ButtonGroup checkType="checkbox" v-model="cities">
+        <Button value="beijing" size="small">北京</Button>
+        <Button value="shanghai" size="small" ref="__checkboxShanghai">上海</Button>
+        <Button value="guangzhou" size="small">广州</Button>
+        <Button value="shenzhen" size="small">深圳</Button>
+    </ButtonGroup>
+</div>
+```
+
+```styl
+.k-btns
+    margin-right 20px
+```
+
+```ts
+interface Props {
+    city?: string
+    cities?: string[]
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            city: 'beijing',
+            cities: []
+        } as Props;
+    } 
+}
+```

package/components/button/demos/icon.md

@@ -0,0 +1,25 @@
+---
+title: 图标按钮
+order: 1
+---
+
+给`Button`添加`icon`属性，可以展示图标按钮。图标按钮仅仅是使按钮的宽高相等，
+此时你可以将任意图标元素作为它的子元素。`circle`属性可以展示圆形图标。如果
+你不需要宽高相等的图标按钮，而仅仅是带图标的文字按钮，去掉`icon`属性即可。
+
+```vdt
+import {Button, Icon} from 'kpc';
+
+<div>
+    <Button icon><Icon class="ion-ios-search" /></Button>
+    <Button icon circle><Icon class="ion-ios-search" /></Button>
+    <Button type="danger" size="large" icon circle><Icon class="ion-ios-search" size="large" /></Button>
+    <Button type="primary"><Icon class="ion-ios-search" size="small" />搜索</Button>
+    <Button circle type='primary'><Icon class="ion-ios-search" size="small" />搜索</Button>
+</div>
+```
+
+```styl
+.k-btn
+    margin-right 20px
+```