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

package/components/button/demos/basic.md

@@ -3,7 +3,7 @@ title: 按钮类型
 order: 0
 ---
 
-有如下几种类型：默认按钮，主按钮，次按钮，警告按钮，危险按钮，成功按钮，文字按钮，超链接按钮
+有如下几种类型：默认按钮，主按钮，次按钮，警告按钮，危险按钮，成功按钮，文字按钮，超链接按钮，扁平按钮
 
 ```vdt
 import {Button} from 'kpc';

package/components/button/demos/disabled.md

@@ -11,7 +11,8 @@ 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 icon circle><i class="k-icon k-icon-search"></i></Button>
     <Button disabled type="link">link</Button>
+    <Button disabled type="flat">flat</Button>
 </div>
 ```

package/components/button/demos/group.md

@@ -27,10 +27,10 @@ import {Button, ButtonGroup} from 'kpc';
     </ButtonGroup>
     <ButtonGroup>
         <Button type="primary">
-            <i class="k-icon ion-ios-arrow-left"></i>上一页
+            <i class="k-icon k-icon-left"></i>上一页
         </Button>
         <Button type="primary">
-            下一页<i class="k-icon ion-ios-arrow-right"></i>
+            下一页<i class="k-icon k-icon-right"></i>
         </Button>
     </ButtonGroup>
     <br /><br />

package/components/button/demos/icon.md

@@ -11,13 +11,13 @@ order: 1
 import {Button, Icon} from 'kpc';
 
 <div>
-    <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>
+    <Button icon><Icon class="k-icon-search" /></Button>
+    <Button icon circle><Icon class="k-icon-search" /></Button>
+    <Button icon circle type="none"><Icon class="k-icon-search" /></Button>
+    <Button icon circle type="flat"><Icon class="k-icon-search" /></Button>
+    <Button type="danger" size="large" icon circle><Icon class="k-icon-search" size="large" /></Button>
+    <Button type="primary"><Icon class="k-icon-search" size="small" />搜索</Button>
+    <Button circle type='primary'><Icon class="k-icon-search" size="small" />搜索</Button>
 </div>
 ```
 

package/components/button/demos/loading.md

@@ -13,7 +13,7 @@ import {Button, Icon} from 'kpc';
 
 <div>
     <Button type="primary" loading>确认</Button>
-    <Button icon circle loading><i class="k-icon ion-ios-search"></i></Button>
+    <Button icon circle loading><i class="k-icon k-icon-search"></i></Button>
     <br /> <br />
     <Button type="primary" 
         loading={this.get('loading1')}
@@ -22,15 +22,15 @@ import {Button, Icon} from 'kpc';
     <Button type="primary" 
         loading={this.get('loading2')}
         ev-click={this.onClick.bind(this, 'loading2')}
-    ><Icon class="ion-ios-search" />点击加载</Button>
+    ><Icon class="k-icon-search" />点击加载</Button>
     <Button icon circle
         loading={this.get('loading3')}
         ev-click={this.onClick.bind(this, 'loading3')}
-    ><Icon class="ion-ios-search" /></Button>
+    ><Icon class="k-icon-search" /></Button>
     <Button type="primary" 
         loading={this.get('loading4')}
         ev-click={this.onClick.bind(this, 'loading4')}
-    >图标在右侧<Icon class="ion-ios-search" /></Button>
+    >图标在右侧<Icon class="k-icon-search" /></Button>
 </div>
 ```
 

package/components/button/demos/size.md

@@ -14,10 +14,10 @@ import {Button, Icon} from 'kpc';
     <Button size="small">small</Button>
     <Button size="mini">mini</Button>
     <br /><br />
-    <Button icon circle size="large"><Icon class="ion-ios-search" size="large" /></Button>
-    <Button icon circle><Icon class="ion-ios-search" /></Button>
-    <Button icon circle size="small"><Icon class="ion-ios-search" size="small" /></Button>
-    <Button icon circle size="mini"><Icon class="ion-ios-search" size="mini" /></Button>
+    <Button icon circle size="large"><Icon class="k-icon-search" size="large" /></Button>
+    <Button icon circle><Icon class="k-icon-search" /></Button>
+    <Button icon circle size="small"><Icon class="k-icon-search" size="small" /></Button>
+    <Button icon circle size="mini"><Icon class="k-icon-search" size="mini" /></Button>
 </div>
 ```
 

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.lightBlack },
+    get color() { return theme.color.text },
     bgColor: '#fff',
     lineHeight: '1.15',
     get padding() { return `0 ${theme.default.padding}` },
@@ -114,7 +114,8 @@ const defaults = deepDefaults(
         link: {
             get color() { return theme.color.link },
             get hoverColor() { return theme.color.linkHover },
-            get hoverBgColor() { return theme.color.hoverBg },
+            hoverBgColor: 'transparent',
+            // get hoverBgColor() { return theme.color.hoverBg },
         },
 
         none: {
@@ -234,16 +235,6 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
                 }
             }
 
-            // disabled
-            &.k-disabled {
-                &, &:hover {
-                    color: ${button.disabled.color};
-                    background: ${button.disabled.bgColor};
-                    border-color: ${button.disabled.borderColor};
-                    cursor: not-allowed
-                }
-            }
-
             &.k-none,
             &.k-link,
             &.k-flat {
@@ -258,11 +249,26 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
             &.k-none:hover {
                 background: ${button.none.hoverBgColor};
             }
-
             &.k-flat {
                 background: ${button.none.hoverBgColor};
             }
 
+            // disabled
+            &.k-disabled {
+                &, &:hover {
+                    color: ${button.disabled.color};
+                    background: ${button.disabled.bgColor};
+                    border-color: ${button.disabled.borderColor};
+                    cursor: not-allowed
+                }
+            }
+            &.k-none.k-disabled,
+            &.k-link.k-disabled {
+                &, &:hover {
+                    background: transparent;
+                }
+            }
+
             ${sizes.map(size => {
                 const styles = button[size];
 

package/components/carousel/index.vdt

@@ -36,12 +36,12 @@ const {stop, play} = this.autoplay;
     <Button icon circle type="none" size="large" class="k-carousel-btn k-prev"
         ev-click={this.prev}
     >
-        <Icon class="ion-ios-arrow-left" />
+        <Icon class="k-icon-left" />
     </Button>
     <Button icon circle type="none" size="large" class="k-carousel-btn k-next"
         ev-click={this.next}
     >
-        <Icon class="ion-ios-arrow-right" />
+        <Icon class="k-icon-right" />
     </Button>
     <div class="k-carousel-indicator c-clearfix">
         <div v-for={getItems()}

package/components/cascader/index.vdt

@@ -40,7 +40,7 @@ const Options = (data, level, loaded, parentSelected) => {
                 >
                     {getField(item, 'label')}
                     <Icon v-if={children}
-                        class="k-cascader-arrow ion-ios-arrow-right"
+                        class="k-cascader-arrow k-icon-right"
                     /> 
                 </DropdownItem>
             );

package/components/checkbox/demos/basic.md

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

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/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/copy/index.vdt

@@ -18,6 +18,6 @@ const classNameObj = {
     <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" />
+        <Icon key="2" v-else class="k-icon-check" hoverable color="success" />
     </Virtual>
 </Transition>

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/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.spec.ts

@@ -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/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;
@@ -149,10 +153,11 @@ export function makeCalendarStyles() {
             align-items: center;
             cursor: pointer;
             position: relative;
+            border-radius: ${datepicker.item.borderRadius};
             .k-value {
                 border-radius: ${datepicker.item.borderRadius};
             }
-            &.k-hover .k-value {
+            &.k-hover {
                 background: ${datepicker.item.hoverBgColor};
             }
             &.k-exceed {

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};
 }

package/components/dialog/styles.ts

@@ -23,7 +23,7 @@ const defaults = {
         border: `1px solid #e2e5e8`,
         closeTop: '9px',
         closeRight: '-9px',
-        closeIconFontSize: '16px',
+        closeIconFontSize: '22px',
     },
 
     // body

package/components/dropdown/demos/basic.md

@@ -16,7 +16,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 <div>
     <Dropdown>
         <Button type="primary">
-            hover <Icon class="ion-ios-arrow-down" />
+            hover <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>

package/components/dropdown/demos/checkbox.md

@@ -10,7 +10,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Checkbox, Button, Icon} from 'kpc'
 
 <div>
     <Dropdown>
-        <Button>More<Icon class="ion-ios-arrow-right" /></Button>
+        <Button>More<Icon class="k-icon-right" /></Button>
         <DropdownMenu class="checkbox-menu">
             <DropdownItem hideOnSelect={false}>
                 <Checkbox v-model="checked"

package/components/dropdown/demos/disabled.md

@@ -13,7 +13,7 @@ import {Icon} from 'kpc';
 <div>
     <Dropdown disabled>
         <Button type="primary">
-            disabled <Icon class="ion-ios-arrow-down" />
+            disabled <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>
@@ -24,7 +24,7 @@ import {Icon} from 'kpc';
 
     <Dropdown>
         <Button type="primary">
-            disabled item <Icon class="ion-ios-arrow-down" />
+            disabled item <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>

package/components/dropdown/demos/nested.md

@@ -12,7 +12,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 <div>
     <Dropdown trigger="click">
         <Button type="primary">
-            click <Icon class="ion-ios-arrow-down" />
+            click <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu class="dropdown-demo">
             <DropdownItem>item 1</DropdownItem>
@@ -21,13 +21,13 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
             <Dropdown position={{my: 'left top', at: 'right top'}} class="dropdown-demo">
                 <DropdownItem>
                     <span>hover</span>
-                    <i class="ion-ios-arrow-right"></i>
+                    <Icon class="k-icon-right" />
                 </DropdownItem>
                 <DropdownMenu class="dropdown-demo">
                     <Dropdown position={{my: 'left top', at: 'right top'}}>
                         <DropdownItem>
                             <span>hover</span>
-                            <i class="ion-ios-arrow-right"></i>
+                            <Icon class="k-icon-right" />
                         </DropdownItem>
                         <DropdownMenu class="dropdown-demo">
                             <DropdownItem>item 1</DropdownItem>
@@ -40,13 +40,13 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
             <Dropdown trigger="click" position={{my: 'left top', at: 'right top'}}>
                 <DropdownItem>
                     <span>click</span>
-                    <i class="ion-ios-arrow-right"></i>
+                    <Icon class="k-icon-right" />
                 </DropdownItem>
                 <DropdownMenu class="dropdown-demo">
                     <Dropdown trigger="click" position={{my: 'left top', at: 'right top'}}>
                         <DropdownItem>
                             <span>click</span>
-                            <i class="ion-ios-arrow-right"></i>
+                            <Icon class="k-icon-right" />
                         </DropdownItem>
                         <DropdownMenu class="dropdown-demo">
                             <DropdownItem>item 1</DropdownItem>
@@ -64,7 +64,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 
 ```styl
 /.dropdown-demo.k-dropdown-menu
-    .ion-ios-arrow-right
+    .k-icon
         float right
         height 32px
         &:before

package/components/dropdown/demos/position.md

@@ -12,7 +12,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 <div>
     <Dropdown position={{my: 'left top', at: 'left bottom+5'}}>
         <Button type="primary">
-            left <Icon class="ion-ios-arrow-down" />
+            left <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>
@@ -23,7 +23,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 
     <Dropdown position={{my: 'right top', at: 'right bottom+5'}}>
         <Button type="primary">
-            right <Icon class="ion-ios-arrow-down" />
+            right <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>
@@ -34,7 +34,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 
     <Dropdown position="top">
         <Button type="primary">
-            top center <Icon class="ion-ios-arrow-down" />
+            top center <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>

package/components/dropdown/demos/trigger.md

@@ -14,7 +14,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon, Input} from 'kpc';
 <div>
     <Dropdown>
         <Button type="primary">
-            hover <Icon class="ion-ios-arrow-down" />
+            hover <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>
@@ -25,7 +25,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon, Input} from 'kpc';
 
     <Dropdown trigger="click">
         <Button type="primary">
-            click <Icon class="ion-ios-arrow-down" />
+            click <Icon class="k-icon-down" />
         </Button>
         <DropdownMenu>
             <DropdownItem>item 1</DropdownItem>

package/components/form/demos/basic.md

@@ -110,7 +110,7 @@ import {
     </FormItem>
     <FormItem>
         <Button type="primary" htmlType="submit" ev-click={this.handleSubmit}>提交</Button>
-        <Button style="margin-left: 20px" ev-click={this.reset}>重置</Button>
+        <Button style="margin-left: 8px" ev-click={this.reset}>重置</Button>
     </FormItem>
 </Form>
 ```
@@ -121,7 +121,7 @@ import {
     width 300px
 .k-radio
 .k-checkbox
-    margin-right 10px
+    margin-right 24px
 
 @media (max-width: 768px) 
     .k-form-item

package/components/form/demos/custom.md

@@ -36,16 +36,14 @@ import {Form, FormItem, Input, Button} from 'kpc';
                 <Button ev-click={this.remove.bind(self, $key)}>删除</Button>
             </b:append>
         </FormItem>
+    </FormItem>
+    <FormItem>
         <Button ev-click={this.add}>添加</Button>
     </FormItem>
 </Form>
 ```
 
 ```styl
-.k-form-item
-    .k-form-item
-        margin-bottom 20px
-
 @media (max-width: 768px)
     .k-form-item
         width 100%

package/components/form/styles.ts

@@ -86,7 +86,7 @@ export function makeItemStyles() {
         &.k-invalid {
             // input
             .k-input {
-                .k-input-inner {
+                .k-input-wrapper {
                     border: ${form.item.invalidBorder};
                     position: relative;
                     z-index: 1
@@ -98,7 +98,7 @@ export function makeItemStyles() {
             .k-radio-wrapper {
                 border: ${form.item.invalidBorder} !important;
             }
-            .k-select .k-input .k-input-inner {
+            .k-select .k-input .k-input-wrapper {
                 border: none;
             }
         }