@king-design/intact 2.1.1 → 3.0.0-beta.1

package/README.md

@@ -96,7 +96,7 @@ Welcome to join us by QQ. Group Number: 529739732
 
 ## Develop 
 
-> Require `node@10` and `npm@6.9` or above.
+> Require `node@10 ~ node@14` and `npm@6.9` or above.
 
 ```shell
 git clone https://github.com/ksc-fe/kpc.git

package/components/button/demos/basic.md

@@ -17,6 +17,7 @@ import {Button} from 'kpc';
     <Button type="success">success</Button>
     <Button type="none">none</Button>
     <Button type="link">link</Button>
+    <Button type="flat">flat</Button>
 </div>
 ```
 

package/components/button/demos/group.md

@@ -20,6 +20,11 @@ import {Button, ButtonGroup} from 'kpc';
         <Button type="danger">关机</Button>
         <Button type="danger">重启</Button>
     </ButtonGroup>
+    <ButtonGroup>
+        <Button type="flat">开机</Button>
+        <Button type="flat">关机</Button>
+        <Button type="flat">重启</Button>
+    </ButtonGroup>
     <ButtonGroup>
         <Button type="primary">
             <i class="k-icon ion-ios-arrow-left"></i>上一页
@@ -43,6 +48,12 @@ import {Button, ButtonGroup} from 'kpc';
         <Button value="guangzhou">广州</Button>
         <Button value="shenzhen">深圳</Button>
     </ButtonGroup>
+    <ButtonGroup checkType="radio" v-model="city">
+        <Button type="flat" value="beijing">北京</Button>
+        <Button type="flat" value="shanghai">上海</Button>
+        <Button type="flat" value="guangzhou">广州</Button>
+        <Button type="flat" value="shenzhen">深圳</Button>
+    </ButtonGroup>
     <p>多选按钮组</p>
     <ButtonGroup checkType="checkbox" v-model="cities">
         <Button value="beijing" size="small">北京</Button>

package/components/button/demos/icon.md

@@ -14,6 +14,7 @@ import {Button, Icon} from 'kpc';
     <Button icon><Icon class="ion-ios-search" /></Button>
     <Button icon circle><Icon class="ion-ios-search" /></Button>
     <Button icon circle type="none"><Icon class="ion-ios-search" /></Button>
+    <Button icon circle type="flat"><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>

package/components/button/index.md

@@ -11,7 +11,7 @@ sidebar: doc
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| type | 按钮类型 | `"default"` | `"primary"` | `"warning"` | `"danger"` | `"success"` | `"none"` | `"secondary" `| `"link"`| `"default"` |
+| type | 按钮类型 | `"default"` | `"primary"` | `"warning"` | `"danger"` | `"success"` | `"none"` | `"secondary" `| `"link"` | `"flat"` | `"default"` |
 | size | 按钮尺寸 | `"default"` | `"small"` | `"mini"` | `"default"` |
 | icon | 是否为图标按钮（宽高相等）| `boolean` | `false` |
 | circle | 是否为圆角按钮 | `boolean` | `false` |

package/components/button/index.ts

@@ -21,7 +21,7 @@ interface ButtonHTMLAttributes {
 }
 
 export interface ButtonProps extends ButtonHTMLAttributes {
-    type?: Colors | 'none' | 'secondary' | 'link'
+    type?: Colors | 'none' | 'secondary' | 'link' | 'flat'
     size?: Sizes,
     icon?: boolean
     circle?: boolean
@@ -42,7 +42,7 @@ export interface ButtonEvents {
 }
 
 const typeDefs: Required<TypeDefs<Omit<ButtonProps, keyof ButtonHTMLAttributes>>> = {
-    type: ['default', 'primary', 'warning', 'danger', 'success', 'none', 'secondary', 'link'],
+    type: ['default', 'primary', 'warning', 'danger', 'success', 'none', 'secondary', 'link', 'flat'],
     size: ['large', 'default', 'small', 'mini'],
     icon: Boolean,
     circle: Boolean,

package/components/button/styles.ts

@@ -29,7 +29,7 @@ export const types = ['primary', 'warning', 'danger', 'active', 'success'] as co
 const sizes = ['large', 'small', 'mini'] as const;
 
 const btnStyles = {
-    get color() { return theme.color.text },
+    get color() { return theme.color.lightBlack },
     bgColor: '#fff',
     lineHeight: '1.15',
     get padding() { return `0 ${theme.default.padding}` },
@@ -171,6 +171,9 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
             white-space: nowrap;
             transition: all ${button.transition};
             line-height: ${button.lineHeight};
+            .k-icon {
+                color: inherit;
+            }
             &:hover,
             &:focus {
                 border-color: ${button.hoverBorderColor};
@@ -242,7 +245,8 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
             }
 
             &.k-none,
-            &.k-link {
+            &.k-link,
+            &.k-flat {
                 background: transparent;
                 &, &:hover {
                     border: none;
@@ -255,6 +259,10 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                 background: ${button.none.hoverBgColor};
             }
 
+            &.k-flat {
+                background: ${button.none.hoverBgColor};
+            }
+
             ${sizes.map(size => {
                 const styles = button[size];
 

package/components/card/styles.ts

@@ -6,7 +6,8 @@ import '../../styles/global';
 const defaults = {
     border: '1px solid #e5e5e5',
     padding: '16px',
-    boxShadow: '0 0 8px 0 rgba(0, 0, 0, .05)',
+    get boxShadow() { return theme.boxShadow },
+    get borderRadius() {return theme.largeBorderRadius},
     headerHeight: '48px',
     headerFontSize: '14px',
     bgColor: '#fff',
@@ -19,7 +20,7 @@ setDefault(() => {
 
 export function makeStyles() {
     return css`
-        border-radius: ${theme.borderRadius};
+        border-radius: ${card.borderRadius};
         background: ${card.bgColor};
         .k-card-header {
             height: ${card.headerHeight};

package/components/checkbox/styles.ts

@@ -4,10 +4,13 @@ import {deepDefaults, palette, getLeft}  from '../../styles/utils';
 import '../../styles/global';
 
 const defaults = {
-    width: '14px',
-    get borderColor() { return theme.color.darkBorder },
+    width: '16px',
+    get borderColor() { return theme.color.border },
     get borderRadius() { return theme.borderRadius },
     get transition() { return theme.transition.small },
+    get hoverBorder() {
+        return `1px solid ${theme.color.primary}`
+    },
     bgColor: '#fff',
     
     // text
@@ -21,11 +24,12 @@ const defaults = {
         get bgColor() { return checkbox.checked.borderColor },
     },
 
+    
     inner: {
         width: '5px',
         height: '10px',
-        top: '-1px',
-        left: '4px',
+        top: '0px',
+        left: '5px',
         border: '1px solid #fff',
     },
 
@@ -34,12 +38,20 @@ const defaults = {
         get color() { return theme.color.disabled },
         get borderColor() { return theme.color.disabledBorder },
         get bgColor() { return theme.color.disabledBg }, 
-        get innerColor() { return theme.color.disabledBorder }, 
+        innerColor: '#fff',
+        checked:{
+            get borderColor() {
+                return palette(theme.color.primary, -3)
+            },
+            get bgColor() {
+                return palette(theme.color.primary, -3)
+            },
+        } 
     },
 
     // indeterminate
     indeterminate: {
-        innerLeft: '3px'
+        innerLeft: '4px',
     }
 };
 
@@ -79,6 +91,9 @@ export default function makeStyles() {
                 transform: rotate(45deg) scale(0);
                 transition: all ${checkbox.transition};
             }
+            &:hover {
+                border: ${checkbox.hoverBorder}
+            }
         }
 
         input {
@@ -113,6 +128,7 @@ export default function makeStyles() {
                     left: ${checkbox.indeterminate.innerLeft};
                 }
             }
+      
         }
         &.k-checked {
             .k-checkbox-wrapper {
@@ -120,6 +136,7 @@ export default function makeStyles() {
                     transform: rotate(45deg) scale(1);
                 }
             }
+        
         }
             
         // focus
@@ -146,6 +163,14 @@ export default function makeStyles() {
             input {
                 cursor: not-allowed;
             }
+            &.k-checked,
+            &.k-indeterminate {
+              .k-checkbox-wrapper {
+                  border-color: ${checkbox.disabled.checked.borderColor};
+                  background: ${checkbox.disabled.checked.bgColor};
+              }
+            }
+          
         }
     `;
 }

package/components/collapse/styles.ts

@@ -11,6 +11,9 @@ const defaults = {
     titleMarginRight: '8px',
     borderPadding: '0 24px',
     collBorder: '1px solid #eee',
+    get borderRadius() {
+        return theme.largeBorderRadius
+    },
 
     item: {
         borderBottom: '1px solid #e5e5e5',
@@ -37,7 +40,7 @@ export function makeStyles() {
         }
 
         &.k-border {
-            border-radius: ${theme.borderRadius};
+            border-radius: ${collapse.borderRadius};
             padding: ${collapse.borderPadding};
             border: ${collapse.collBorder};
         }

package/components/copy/demos/basic.md

@@ -0,0 +1,12 @@
+---
+title: 基本用法
+order: 0
+---
+
+组件接收任意合法的字符串当做`text`值
+
+```vdt
+import {Copy} from 'kpc';
+
+<Copy text="Hello King Desgin!" />
+```

package/components/copy/demos/children.md

@@ -0,0 +1,37 @@
+---
+title: 自定义复制按钮
+order: 1
+---
+
+传入一个唯一的子元素当作`children`，则点击该子元素即可复制相应内容
+
+> `Copy`组件不会产生任何额外的元素
+
+```vdt
+import {Copy, Button, Icon} from 'kpc';
+
+<div>
+    <Copy text="Hello King Desgin!">
+        Copy
+    </Copy>
+    <Copy text="Hello King Desgin!">
+        <Button>Copy</Button>
+    </Copy>
+    <Copy text="Hello King Desgin!">
+        <Button type="link" size="mini">Copy</Button>
+    </Copy>
+    <Copy text="Hello King Desgin!">
+        <Icon class="ion-ios-copy" size="large" hoverable />
+    </Copy>
+    <Copy text="Hello King Desgin!">
+        <Button icon circle>
+            <Icon class="ion-ios-copy-outline" />
+        </Button>
+    </Copy>
+</div>
+```
+
+```styl
+.k-copy
+    margin-right 18px
+```

package/components/copy/index.md

@@ -0,0 +1,21 @@
+---
+title: 复制
+category: 组件
+order: 99
+sidebar: doc
+---
+
+# 属性
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| text | 复制文案值 | `string` | `undefined` |
+| showMessage | 复制成功/失败时，是否展示Message | `boolean` | `true` |
+
+# 事件
+
+| 事件名 | 说明 | 参数 |
+| --- | --- | --- |
+| success | 复制成功时触发 | `(value: string) => void` |
+| error | 复制失败时触发 | `() => void` |
+

package/components/copy/index.spec.ts

@@ -0,0 +1,21 @@
+import BasicDemo from '~/components/copy/demos/basic';
+import {mount, unmount, dispatchEvent, wait, getElement} from '../../test/utils';
+
+describe('Copy', () => {
+    afterEach(async () => {
+        unmount();
+    });
+
+    it('should copy', async function() {
+        const [instance, element] = mount(BasicDemo);
+        
+        element.click();
+        try {
+            const text = await navigator.clipboard.readText();
+            expect(text).to.eql('Hello King Desgin!');
+        } catch (e) {
+            // Read permisson denied 
+            console.log(e);
+        }
+    });
+});

package/components/copy/index.ts

@@ -0,0 +1,37 @@
+import { Component, TypeDefs } from 'intact';
+import template from './index.vdt';
+import { useCopy } from './useCopy';
+import { Events } from '../types';
+
+export interface CopyProps {
+    text: string;
+    showMessage?: boolean;
+}
+
+export interface CopyEvents {
+    success: [string]
+    error: []
+}
+
+const typeDefs: Required<TypeDefs<CopyProps>> = {
+    text: String,
+    showMessage: Boolean,
+};
+
+const defaults = (): Partial<CopyProps> => ({
+    showMessage: true,
+});
+
+const events: Events<CopyEvents> = {
+    success: true,
+    error: true,
+};
+
+export class Copy extends Component<CopyProps, CopyEvents> {
+    static template = template;
+    static typeDefs = typeDefs;
+    static defaults = defaults;
+    static events = events;
+
+    private copy = useCopy()
+}

package/components/copy/index.vdt

@@ -0,0 +1,23 @@
+import { Icon } from '../icon';
+import { getRestProps } from '../utils';
+import { Virtual } from '../virtual';
+import { Transition } from 'intact';
+import { makeStyles } from './styles';
+import { _$ } from '../../i18n';
+
+const { children, className } = this.get();
+const { startCopy, success } = this.copy;
+
+const classNameObj = {
+    [`k-copy`]: true,
+    [makeStyles()]: true,
+    [className]: className,
+}
+
+<Transition name="k-fade">
+    <Virtual ev-click={startCopy} class={classNameObj} {...getRestProps(this)}>
+        <template v-if={children}>{children}</template>
+        <Icon key="1" v-else-if={!success.value} class="k-icon-clone" hoverable title={_$('复制')} />
+        <Icon key="2" v-else class="k-icon-truth" hoverable color="success" />
+    </Virtual>
+</Transition>

package/components/copy/styles.ts

@@ -0,0 +1,9 @@
+import {css} from '@emotion/css';
+import '../../styles/global';
+
+export function makeStyles() {
+    return css`
+        cursor: pointer;
+        vertical-align: middle;
+    `
+}

package/components/copy/useCopy.ts

@@ -0,0 +1,91 @@
+import { Message } from '../message';
+import { useInstance } from 'intact';
+import type { Copy } from './';
+import { selectValue } from '../utils';
+import { useState } from '../../hooks/useState';
+import { _$ } from '../../i18n';
+
+export function useCopy() {
+    const instance = useInstance() as Copy;
+    const success = useState(false);
+    let timer: number;
+
+    return {
+        startCopy: () => {
+            const { text, showMessage } = instance.get();
+
+            if (clipboardCopy(text) || commandCopy(text)) {
+                showMessage && Message.success({ content: _$('复制成功') });
+                success.set(true);
+                clearTimeout(timer);
+                timer = window.setTimeout(() => {
+                    success.set(false);
+                }, 1000);
+                instance.trigger('success', text);
+            } else {
+                showMessage && Message.error({ content: _$('复制失败') });
+                success.set(false);
+                instance.trigger('error');
+            }
+        },
+        success,
+    };
+}
+
+// @reference: https://github.com/zenorocha/clipboard.js/blob/master/src/common/create-fake-element.js
+function createFakeElement(value: string) {
+    const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
+    const fakeElement = document.createElement('textarea');
+    // Prevent zooming on iOS
+    fakeElement.style.fontSize = '12pt';
+    // Reset box model
+    fakeElement.style.border = '0';
+    fakeElement.style.padding = '0';
+    fakeElement.style.margin = '0';
+    // Move element out of screen horizontally
+    fakeElement.style.position = 'absolute';
+    fakeElement.style[isRTL ? 'right' : 'left'] = '-9999px';
+    // Move element to the same position vertically
+    let yPosition = window.pageYOffset || document.documentElement.scrollTop;
+    fakeElement.style.top = `${yPosition}px`;
+
+    fakeElement.setAttribute('readonly', '');
+    fakeElement.value = value;
+
+    return fakeElement;
+}
+
+function clipboardCopy(text: string) {
+    try {
+        navigator.clipboard.writeText(text);
+
+        return true;
+    } catch (e) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.log(e);
+        }
+        return false;
+    }
+}
+
+function commandCopy(text: string) {
+    const fakeElement = createFakeElement(text);
+    document.body.appendChild(fakeElement);
+    selectValue(fakeElement);
+
+    let result: boolean;
+    try {
+        document.execCommand('copy');
+        result = true;
+    } catch (e) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.log(e);
+        }
+        result = false;
+    }
+
+    document.body.removeChild(fakeElement);
+
+    return result;
+}
+

package/components/datepicker/demos/basic.md

@@ -10,6 +10,7 @@ import {Datepicker} from 'kpc';
 
 <div>
     <Datepicker v-model="date" ref="__demo" />
+    <Datepicker v-model="date" flat />
     <Datepicker disabled value="2018-01-01"/>
 </div>
 ```

package/components/datepicker/index.md

@@ -32,6 +32,8 @@ sidebar: doc
 | shortcuts | 指定快捷方式 | `Shortcut[]` | `undefined` |
 | show | 是否展示菜单项 | `boolean` | `false` |
 | position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |
+| flat | 是否展示扁平样式 | `boolean` | `false` |
+| draggable | 多选值是否支持拖动排序 | `boolean` | `false` |
 
 ```ts
 import {Dayjs} from 'dayjs';

package/components/datepicker/index.spec.ts

@@ -115,7 +115,7 @@ describe('Datepicker', () => {
             input.click();
             await wait();
             content = getElement('.k-datepicker-content')!;
-            const [yearDom, monthDom] = Array.from(content.querySelectorAll('.k-month-value'));
+            const [yearDom, monthDom] = Array.from(content.querySelectorAll<HTMLElement>('.k-month-value'));
             yearDom.click();
             await wait();
             (content.querySelector('.k-today') as HTMLElement).click();
@@ -282,7 +282,7 @@ describe('Datepicker', () => {
 
             await wait();
             // remove specified item
-            const close = element.querySelector('.k-select-close') as HTMLElement;
+            const close = element.querySelector('.k-tag-close') as HTMLElement;
             close.click();
             expect(instance.get('date')).have.lengthOf(0);
 

package/components/datepicker/index.vdt

@@ -42,7 +42,7 @@ const generatePanel = (flag) => {
                         timeString = valueString[1];
                     }
                     return (
-                        <Tabs type="border-card"
+                        <Tabs type="card"
                             value={panel.value}
                             ev-$change:value={panel.set}
                         >
@@ -87,7 +87,7 @@ const generatePanel = (flag) => {
             <div class="k-datepicker-wrapper">
                 <div class="k-datepicker-calendars">
                     {generatePanel(PanelFlags.Start)}
-                    {range ? generatePanel(PanelFlags.End) : null} 
+                    {range ? generatePanel(PanelFlags.End) : null}
                 </div>
                 <div v-if={type === 'datetime'} class="k-datepicker-footer">
                     <Button type="primary" size="small"

package/components/datepicker/styles.ts

@@ -23,7 +23,9 @@ const defaults = {
         },
 
         disabled: {
-            color: '#ccc',
+            get color() {
+                return theme.color.disabled
+            },
             hoverBgColor: 'none',
         },
 
@@ -147,20 +149,22 @@ export function makeCalendarStyles() {
             align-items: center;
             cursor: pointer;
             position: relative;
-            border-radius: ${datepicker.item.borderRadius};
-            &.k-hover {
+            .k-value {
+                border-radius: ${datepicker.item.borderRadius};
+            }
+            &.k-hover .k-value {
                 background: ${datepicker.item.hoverBgColor};
             }
             &.k-exceed {
                 color: ${datepicker.item.exceedColor};
             }
-            &.k-today {
+            &.k-today .k-value {
                 border: ${datepicker.item.todayBorder};
             }
             &.k-active {
                 background: ${datepicker.item.active.bgColor};
                 color: ${datepicker.item.active.color};
-                &.k-today {
+                &.k-today .k-value {
                     border-color: ${datepicker.item.active.todayBorderColor};
                 }
             }
@@ -183,6 +187,10 @@ export function makeCalendarStyles() {
             }
             .k-value {
                 flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100%;
             }
         }
         .k-days {

package/components/dialog/alert.vdt

@@ -19,12 +19,16 @@ const classNameObj = {
     <b:header />
     <b:body>
         <div class="k-dialog-tip-icon">
-            <Icon class={iconClassName || {
-                "ion-ios-checkmark": type === 'success',
-                "ion-ios-information": type === 'warning',
-                "ion-ios-close": type === 'error',
-                "ion-ios-help": type === 'confirm',
-            }} v-if={!hideIcon && !icon} />
+            <Icon 
+                v-if={!hideIcon && !icon}
+                class={iconClassName || {
+                    "k-icon-success-fill": type === 'success',
+                    "k-icon-warning-fill": type === 'warning',
+                    "k-icon-error-fill": type === 'error',
+                    "k-icon-question-fill": type === 'confirm',
+                }}
+                color={type === 'error' ? 'danger' : type === 'confirm' ? 'primary' : type}
+            />
             {icon}
         </div>
         <div class="k-alert-dialog-wrapper">