@king-design/intact 3.0.0-beta.0 → 3.0.0-beta.2

package/components/checkbox/demos/group.md

@@ -20,7 +20,7 @@ import {Checkbox} from 'kpc';
 
 ```styl
 .k-checkbox
-    margin-right 20px
+    margin-right 24px
 ```
 
 ```ts

package/components/checkbox/demos/indeterminate.md

@@ -25,7 +25,7 @@ import {Checkbox} from 'kpc';
 
 ```styl
 .k-checkbox
-    margin-right 20px
+    margin-right 24px
 ```
 
 ```ts

package/components/checkbox/demos/value.md

@@ -26,7 +26,7 @@ import {Checkbox} from 'kpc';
 
 ```styl
 .k-checkbox
-    margin-right 20px
+    margin-right 24px
 ```
 
 ```ts

package/components/code/demos/basic.md

@@ -12,7 +12,7 @@ order: 0
 > `import {Code} from '@king-design/react';`
 
 组件可以通过`v-model`双向绑定编辑的代码，通过`height`指定组件的高度（需要带单位），默认`100%`；通过
-`language`可以指定编程语言，默认为`javasript`
+`language`可以指定编程语言，默认为`javascript`
 
 > `Code`组件基于[Monaco Editor@0.26](https://github.com/Microsoft/monaco-editor)，使用该组件之前，你需要
 > 安装[monaco-editor-webpack-plugin@4](https://github.com/Microsoft/monaco-editor-webpack-plugin)插件，

package/components/collapse/item.vdt

@@ -21,7 +21,7 @@ const classNameObj = {
 <div class={classNameObj} {...getRestProps(this)}>
     <div class={kls('title')} ev-click={this.toggle}>
         <b:title>{title}</b:title>
-        <Icon class={{[kls('arrow')]: true, 'ion-ios-arrow-right': true}} hoverable={!disabled}></Icon>
+        <Icon class={{[kls('arrow')]: true, 'k-icon-right': true}} hoverable={!disabled}></Icon>
     </div>
     <Transition
         show={isActive}

package/components/colorpicker/index.md

@@ -14,3 +14,19 @@ sidebar: doc
 | size | 组件尺寸 | `"large"` | `"default"` | `"small"` | `"mini"` | `"default"` |
 | disabled | 是否禁用 | `boolean` | `false` |
 | show | 是否展示颜色选择面板 | `boolean` | `false` |
+| container | 指定弹出菜单追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
+| position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom', collison: 'fit'}` |
+
+```ts
+type Position = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+    collisionDirection?: ['left'] | ['top'] | ['left', 'top']
+}
+
+type Collision = 'fit' | 'flip' | 'flipfit' | 'none'
+
+export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+```
+

package/components/colorpicker/index.ts

@@ -2,6 +2,7 @@ import {Component, TypeDefs} from 'intact';
 import template from './index.vdt';
 import {sizes, Sizes} from '../../styles/utils';
 import {Container} from '../portal';
+import {Dropdown, DropdownProps} from '../dropdown';
 
 export interface ColorpickerProps {
     value: string
@@ -10,6 +11,7 @@ export interface ColorpickerProps {
     disabled?: boolean
     container?: Container
     show?: boolean
+    position?: DropdownProps['position']
 }
 
 export interface ColorpickerEvents { }
@@ -24,6 +26,7 @@ const typeDefs: Required<TypeDefs<ColorpickerProps>> = {
     disabled: Boolean,
     container: [Function, String],
     show: Boolean,
+    position: Dropdown.typeDefs.position,
 };
 
 const defaults = (): Partial<ColorpickerProps> => ({
@@ -33,6 +36,7 @@ const defaults = (): Partial<ColorpickerProps> => ({
         '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF'
     ], 
     size: 'default',
+    position: {collision: 'fit'},
 });
 
 export class Colorpicker extends Component<ColorpickerProps, ColorpickerEvents> {

package/components/colorpicker/index.vdt

@@ -6,7 +6,8 @@ import {Dropdown, DropdownMenu} from '../dropdown';
 
 const {
     className, transition, presets,
-    value, size, disabled, container
+    value, size, disabled, container,
+    position,
 } = this.get();
 
 const classNameObj = {
@@ -19,7 +20,7 @@ const classNameObj = {
 
 <div class={classNameObj} {...getRestProps(this)}>
     <Dropdown
-        position={{my: 'left top+8', at: 'left bottom', collision: 'flip'}}
+        position={position}
         trigger="click"
         disabled={disabled}
         container={container}

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-check" 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/calendar.vdt

@@ -52,15 +52,15 @@ const {
                 tagName="div"
                 ev-click={isYear ? prevTenYears : prevYear}
             >
-                <Icon class="ion-ios-arrow-left" size="small" />
-                <Icon class="ion-ios-arrow-left" size="small" />
+                <Icon class="k-icon-left" size="small" />
+                <Icon class="k-icon-left" size="small" />
             </Button>
             <Button icon type="none" size="small" class="k-prev"
                 tagName="div"
                 ev-click={prevMonth}
                 v-if={!isYearOrMonth}
             >
-                <Icon class="ion-ios-arrow-left" size="small" />
+                <Icon class="k-icon-left" size="small" />
             </Button>
         </div>
         <div class="k-month-values">
@@ -80,14 +80,14 @@ const {
                 ev-click={nextMonth}
                 v-if={!isYearOrMonth}
             >
-                <Icon class="ion-ios-arrow-right" size="small" />
+                <Icon class="k-icon-right" size="small" />
             </Button>
             <Button icon type="none" size="small" class="k-next"
                 tagName="div"
                 ev-click={isYear ? nextTenYears : nextYear}
             >
-                <Icon class="ion-ios-arrow-right" size="small" />
-                <Icon class="ion-ios-arrow-right" size="small" />
+                <Icon class="k-icon-right" size="small" />
+                <Icon class="k-icon-right" size="small" />
             </Button>
         </div>
     </div>

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/demos/datetime.md

@@ -18,6 +18,11 @@ import {Datepicker} from 'kpc';
 </div>
 ```
 
+```styl
+.k-datepicker
+    margin-right 20px
+```
+
 ```ts
 interface Props {
     datetime1?: string | null
@@ -35,7 +40,3 @@ export default class extends Component<Props> {
 }
 ```
 
-```styl
-.k-datepicker
-    margin-right 20px
-```

package/components/datepicker/index.md

@@ -31,6 +31,9 @@ sidebar: doc
 | type | 组件类型：`"date"` 只选择日期；`"datetime"` 选择日期和时间；`"year"` 选择年份；`"month"` 选择月份 | `"date"` | `"datetime"` | `"year"` | `"month"` | `"date"` |
 | 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';
@@ -41,6 +44,16 @@ export type Shortcut = {
     label: (() => string | VNode) | string | VNode 
     value: () => Value | [Value, Value]
 }
+
+type Position = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+    collisionDirection?: ['left'] | ['top'] | ['left', 'top']
+}
+
+type Collision = 'fit' | 'flip' | 'flipfit' | 'none'
+
 export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
 ```
 

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);
 
@@ -448,6 +448,16 @@ describe('Datepicker', () => {
             content.querySelector<HTMLElement>('.k-btn')!.click();
             await wait();
             expect(instance.get('datetimeRange')).have.lengthOf(1);
+
+            // select the first value in end panel
+            calendar2.querySelectorAll<HTMLElement>('.k-calendar-item')[17].click();
+            calendar2.querySelectorAll<HTMLElement>('.k-calendar-item')[17].click();
+            await wait();
+            content.querySelector<HTMLElement>('.k-btn')!.click();
+            await wait();
+            const values = instance.get('datetimeRange')!;
+            expect(values).have.lengthOf(2);
+            expect(values[1][1].includes('23:59:59')).to.be.true;
         });
     });
 
@@ -531,7 +541,7 @@ describe('Datepicker', () => {
             await wait();
             const value2 = instance.get('time')!;
             expect(value2).have.lengthOf(2);
-            expect(value2.map(item => item.split(' ')[1])).eql(['01:00:00', '23:00:00']);
+            expect(value2.map(item => item.split(' ')[1])).eql(['01:00:00', '22:59:59']);
         });
 
         it('year', async () => {

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

@@ -117,6 +117,10 @@ export function makeCalendarStyles() {
             display: flex;
             padding: ${datepicker.month.padding};
         }
+        .k-prev .k-icon,
+        .k-next .k-icon {
+            margin: 0 -5px !important;
+        }
         .k-month-values {
             flex: 1;
             font-size: 14px;
@@ -150,19 +154,22 @@ export function makeCalendarStyles() {
             cursor: pointer;
             position: relative;
             border-radius: ${datepicker.item.borderRadius};
+            .k-value {
+                border-radius: ${datepicker.item.borderRadius};
+            }
             &.k-hover {
                 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};
                 }
             }
@@ -185,6 +192,10 @@ export function makeCalendarStyles() {
             }
             .k-value {
                 flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100%;
             }
         }
         .k-days {

package/components/datepicker/useValue.ts

@@ -7,11 +7,12 @@ import {
     DayjsValueRange,
     DayjsValue,
 } from './basepicker';
-import {Dayjs} from 'dayjs';
+import dayjs, {Dayjs} from 'dayjs';
 import {Datepicker} from './index';
 import type {useFormats} from './useFormats';
 import type {useDisabled} from './useDisabled';
 import {last} from '../utils';
+import { endTime } from './helpers';
 import {PanelTypes, PanelFlags, usePanel} from './usePanel';
 
 export function useValue(
@@ -50,23 +51,25 @@ export function useValue(
 
     function onChangeDate(v: Dayjs, flag: PanelFlags) {
         const {multiple, type, range} = instance.get();
-        let _value: StateValueItem = v;
-
-        // the datetime must be greater than minDate, #406
-        const minDate = disabled.minDate.value;
-        if (minDate && _value.isBefore(minDate)) {
-            _value = minDate;
-        }
+        let _value: StateValueItem;
 
         if (range) {
             const oldValue = last(value.value as StateValueRange[]);
             if (!oldValue || oldValue.length === 2) {
-                _value = [v];
+                /**
+                 * if we select the first value or re-select the value
+                 * no matter what the flag is, we should set flag to start panel
+                 * #877
+                 */
+                flag = PanelFlags.Start;
+                _value = [fixDatetimeWithMinDate(v)];
             } else {
-                _value = [oldValue[0], v];
+                _value = [oldValue[0], fixDatetimeWithMaxDate(v)];
                 (_value as DayjsValueRange).sort((a, b) => a.isAfter(b) ? 1 : -1);
             }
             instance.trigger('selecting', _value);
+        } else {
+            _value = fixDatetimeWithMinDate(v);
         }
 
         setValue(_value, false);
@@ -78,5 +81,27 @@ export function useValue(
         }
     }
 
+    function fixDatetimeWithMinDate(v: Dayjs) {
+        // the datetime must be greater than minDate, #406
+        const minDate = disabled.minDate.value;
+        if (minDate && v.isBefore(minDate)) {
+            return minDate;
+        }
+        return v;
+    }
+
+    function fixDatetimeWithMaxDate(v: Dayjs) {
+        // the tiem of end datetime should be set to 23:59:59, #878
+        const maxDate = disabled.maxDate.value;
+        const date = v.toDate();
+
+        endTime(date);
+        v = dayjs(date);
+        if (maxDate && v.isAfter(maxDate)) {
+            return maxDate;
+        }
+        return v;
+    }
+
     return {value, setValue, onChangeDate, ...rest};
 }