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

package/components/badge/styles.ts

@@ -34,7 +34,7 @@ export default function makeStyles() {
             right: 0;
             transform: translate(50%, -50%);
             background: ${badge.bgColor};
-            font-size: 75%;
+            font-size: 85%;
             vertical-align: baseline;
         }
             

package/components/breadcrumb/demos/separator.md

@@ -26,7 +26,7 @@ import {Breadcrumb, BreadcrumbItem, Icon} from 'kpc';
 
 ```styl
 .separator
-    color #ffa133
+    color #0091ea
     vertical-align middle
 i
     margin-right 3px

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 />
@@ -61,6 +61,13 @@ import {Button, ButtonGroup} from 'kpc';
         <Button value="guangzhou" size="small">广州</Button>
         <Button value="shenzhen" size="small">深圳</Button>
     </ButtonGroup>
+    <p>有间隔的按钮组</p>
+    <ButtonGroup checkType="radio" v-model="city" seperate>
+        <Button value="beijing">北京</Button>
+        <Button value="shanghai">上海</Button>
+        <Button value="guangzhou">广州</Button>
+        <Button value="shenzhen">深圳</Button>
+    </ButtonGroup>
 </div>
 ```
 

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

@@ -8,13 +8,15 @@ export interface ButtonGroupProps {
     value?: any
     checkType?: 'none' | 'radio' | 'checkbox' 
     fluid?: boolean
+    seperate?: boolean
 }
 
 const typeDefs: Required<TypeDefs<ButtonGroupProps>> = {
     vertical: Boolean,
     value: null,
     fluid: Boolean,
-    checkType: ['none', 'radio', 'checkbox']
+    checkType: ['none', 'radio', 'checkbox'],
+    seperate: Boolean,
 };
 
 const defaults = (): Partial<ButtonGroupProps> => ({

package/components/button/group.vdt

@@ -1,12 +1,13 @@
 import {getRestProps} from '../utils';
 import {makeButtonGroupStyles} from './styles';
 
-const {className, vertical, children, fluid} = this.get();
+const {className, vertical, children, fluid, seperate} = this.get();
 
 const classNameObj = {
     'k-btns': true,
     'k-vertical': vertical,
     'k-fluid': fluid,
+    'k-seperate': seperate,
     [className]: className,
     [makeButtonGroupStyles()]: true,
 };

package/components/button/index.md

@@ -32,6 +32,7 @@ sidebar: doc
 | checkType | 指定按钮组为单选或复选类型，此时需要给每个按钮指定`value`来作为选中的值 | `"radio"` | `"checkbox"` | `"none"` | `"none"` |
 | value | 对于`radio`和`checkbox`类型按钮组，该值表示选中的按钮的值，可以使用`v-model`进行双向绑定 | `*` | `undefined` |
 | fluid | 是否宽度100% | `boolean` | `false` |
+| seperate | 是否展示间隔 | `boolean` | `false` |
 
 # 方法
 

package/components/button/index.vdt

@@ -67,7 +67,7 @@ const typeStyles = theme[type];
 const waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
 
 <Wave disabled={loading || disabled || type === 'none' || type === 'link'}
-    inset="-2px"
+    inset={type === 'flat' ? '-1px' : '-2px'}
     color={waveColor}
 >
     <DynamicButton 

package/components/button/styles.ts

@@ -29,10 +29,10 @@ 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}` },
+    get padding() { return `0 16px` },
     get borderColor() { return theme.color.border },
     get borderRadius() { return theme.borderRadius },
     get fontSize() { return theme.default.fontSize },
@@ -97,6 +97,11 @@ const btnSizeStyles = sizes.reduce((memo, size) => {
         get height() { return theme[size].height },
         get padding() { return `0 ${theme[size].padding}` },
     };
+    if (size === 'large') {
+        Object.defineProperty(memo[size], 'padding', {
+            value: `0 24px`,
+        });
+    }
 
     return memo; 
 }, {} as {[key in Sizes]: SizeStyles});
@@ -114,7 +119,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 +240,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 +254,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];
 
@@ -406,7 +417,9 @@ export function makeButtonStyles({iconSide}: {iconSide?: string}) {
 
 export function makeButtonGroupStyles() {
     return css`
-        display: inline-block;
+        display: inline-flex;
+        align-items: center;
+        flex-wrap: wrap;
         vertical-align: middle;
         .k-btn {
             margin: 0;
@@ -464,8 +477,8 @@ export function makeButtonGroupStyles() {
             
         // vertical
         &.k-vertical {
+            flex-direction: column;
             > .k-btn {
-                display: block;
                 &:not(.k-btn-icon) {
                     width: 100%;
                 }
@@ -497,5 +510,13 @@ export function makeButtonGroupStyles() {
                 })}
             }
         }
+
+        // seperate
+        &.k-seperate {
+            gap: 8px;
+            > .k-btn {
+                border-radius: ${button.borderRadius} !important;
+            }
+        }
     `;
 }

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/checkbox/styles.ts

@@ -26,11 +26,11 @@ const defaults = {
 
     
     inner: {
-        width: '5px',
+        width: '6px',
         height: '10px',
         top: '0px',
-        left: '5px',
-        border: '1px solid #fff',
+        left: '4px',
+        border: '2px solid #fff',
     },
 
     // disabled
@@ -48,11 +48,6 @@ const defaults = {
             },
         } 
     },
-
-    // indeterminate
-    indeterminate: {
-        innerLeft: '4px',
-    }
 };
 
 let checkbox: typeof defaults;
@@ -91,7 +86,9 @@ export default function makeStyles() {
                 transform: rotate(45deg) scale(0);
                 transition: all ${checkbox.transition};
             }
-            &:hover {
+        }
+        &:hover {
+            .k-checkbox-wrapper {
                 border: ${checkbox.hoverBorder}
             }
         }
@@ -125,7 +122,6 @@ export default function makeStyles() {
                 &:before {
                     transform: rotate(90deg) scale(1);
                     border-bottom: 0;
-                    left: ${checkbox.indeterminate.innerLeft};
                 }
             }
       

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/collapse/styles.ts

@@ -35,7 +35,6 @@ export function makeStyles() {
             .${kls('arrow')} {
                 float: left;
                 margin-right: ${collapse.titleMarginRight};
-                transform-origin: center center 0;
             }
         }
 
@@ -69,7 +68,6 @@ export function makeItemStyles() {
             transition: transform ${collapse.transition};
             line-height: ${collapseItem.titleHeight};
             height: ${collapseItem.titleHeight};
-            transform-origin: left center 0;
         }
 
         &:not(.k-disabled) {

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>