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

package/components/dialog/base.vdt

@@ -48,23 +48,22 @@ const dialog = (
                         v-if={!hideClose && !$props.hideClose}
                         ev-mousedown={stopPropagation}
                     >
-                        <Icon class="ion-ios-close-empty" />
+                        <Icon class="k-icon-close" />
                     </Button>
                 </div>
                 <div class="k-dialog-body"><b:body>{children}</b:body></div>
                 <b:footer-wrapper>
                     <div class="k-dialog-footer">
                         <b:footer>
+                            <Button class="k-dialog-cancel" 
+                                ev-click={this.cancel}
+                            >{cancelText}</Button>
                             <Button class="k-dialog-ok" 
                                 type="primary"
                                 ev-click={this.ok} 
                                 loading={loading}
                                 disabled={disabledOk}
                             >{okText}</Button>
-                            <Button class="k-dialog-cancel" 
-                                type="secondary"
-                                ev-click={this.cancel}
-                            >{cancelText}</Button>
                         </b:footer>
                     </div>
                 </b:footer-wrapper>

package/components/dialog/index.spec.ts

@@ -87,7 +87,7 @@ describe('Dialog', () => {
         }
 
         const [instance] = mount(Demo);
-        expect(getElement('.k-dialog-footer')!.innerText).to.eql('dialog footer 确定取消');
+        expect(getElement('.k-dialog-footer')!.innerText).to.eql('dialog footer 取消确定');
     });
 
     it('basic test', async () => {
@@ -193,7 +193,7 @@ describe('Dialog', () => {
         Dialog.success({content: 'test'}).then(cb);
         await wait();
         let dialog = expectDialog();
-        dialog.querySelector<HTMLElement>('.k-btn')!.click();
+        dialog.querySelector<HTMLElement>('.k-dialog-ok')!.click();
         await wait();
         expect(cb.callCount).to.eql(1);
 
@@ -209,7 +209,7 @@ describe('Dialog', () => {
         Dialog.error({title: 'error', content: 'test'});
         await wait();
         dialog = expectDialog();
-        dialog.querySelector<HTMLElement>('.k-btn')!.click();
+        dialog.querySelector<HTMLElement>('.k-dialog-ok')!.click();
 
         const cb2 = sinon.spy();
         Dialog.confirm({content: 'test', closable: false}).then(() => {}, cb2);
@@ -218,7 +218,7 @@ describe('Dialog', () => {
         overlay.click();
         await wait();
         expect(cb2.callCount).to.eql(0);
-        getElement('.k-dialog')!.querySelector<HTMLElement>('.k-btn')!.click();
+        getElement('.k-dialog')!.querySelector<HTMLElement>('.k-dialog-ok')!.click();
     });
 
     it('should double check for closing dialog', async () => {

package/components/dialog/styles.ts

@@ -9,32 +9,33 @@ const defaults = {
     get borderRadius() { return theme.borderRadius },
     get transition() { return theme.transition.large },
     padding: '0',
-    margin: '0 20px',
+    margin: '0 24px',
     get color() { return theme.color.text },
     get fontSize() { return theme.fontSize },
-    get boxShadow() { return theme.boxShadow },
+    get boxShadow() { return theme.largeBoxShadow },
 
     // header
     header: {
-        fontSize: '16px',
+        fontSize: '14px',
+        fontWeight: '500',
         get color() { return theme.color.title },
-        height: '61px',
-        border: `1px solid #eaeaea`,
-        closeTop: '16px',
+        height: '52px',
+        border: `1px solid #e2e5e8`,
+        closeTop: '9px',
         closeRight: '-9px',
-        closeIconFontSize: '44px',
+        closeIconFontSize: '16px',
     },
 
     // body
     body: {
-        padding: `20px`,
+        padding: `24px`,
     },
 
     // footer
     footer: {
-        padding: `20px 0`,
-        btnGap: `12px`,
-        border: `1px solid #eaeaea`,
+        padding: `16px 0`,
+        btnGap: `8px`,
+        border: `1px solid #e2e5e8`,
     },
 
     // transition
@@ -47,13 +48,14 @@ const defaults = {
 
     // alert dialog
     alert: {
-        padding: `0 20px`,
+        padding: `0 24px`,
         bodyMarginTop: `-25px`,
         tipIconMarginBottom: '10px',
         tipIconFontSize: '37px',
         tipIconLineHeight: '37px',
 
         // with title
+        titleFontWeight: '500',
         titleTipIconFontSize: '37px',
         titleFontSize: '14px',
         wrapperPaddingLeft: '8px',
@@ -117,6 +119,7 @@ export function makeDialogStyles() {
             font-size: ${dialog.header.fontSize};
             color: ${dialog.header.color};
             position: relative;
+            font-weight: ${dialog.header.fontWeight};
         }
         .k-dialog-title {
             display: inline-block;
@@ -128,6 +131,7 @@ export function makeDialogStyles() {
             .k-icon {
                 font-size: ${dialog.header.closeIconFontSize};
             }
+
         }
 
         // body
@@ -228,7 +232,8 @@ export function makeAlertStyles() {
                 .k-alert-dialog-title {
                     line-height: ${dialog.alert.tipIconLineHeight};
                     font-size: ${dialog.alert.titleFontSize};
-                }
+                    font-weight: ${dialog.alert.titleFontWeight};
+                }    
             }
         }
     ` 

package/components/drawer/styles.ts

@@ -11,7 +11,7 @@ export const placements = ['top', 'right', 'bottom', 'left'] as const;
 
 const defaults = {
     get transition() { return theme.transition.large },
-    get boxShadow() { return theme.boxShadow }
+    get boxShadow() { return theme.largeBoxShadow },
 };
 
 let drawer: typeof defaults;
@@ -21,8 +21,6 @@ setDefault(() => {
 
 export function makeStyles(overlay: boolean) {
     return css`
-        box-shadow: none;
-        border-radius: 0;
         position: fixed !important;
         background: transparent !important;
         box-shadow: none !important;
@@ -53,6 +51,7 @@ export function makeStyles(overlay: boolean) {
         ${placements.map((placement) => {
             let positionValue: string = '';
             let transformValue: string = '';
+            let borderRadius: string = '';
             placements.forEach((p) => {
                 // Set top to `0 !important` when overlay is false and placement is right or left
                 // Because dialog without overlay don't have positional parent element
@@ -63,16 +62,24 @@ export function makeStyles(overlay: boolean) {
                     : `${p}: 0;`;
             });
 
-            if(placement === 'left' || placement === 'right') {
+            if (placement === 'left' || placement === 'right') {
                 positionValue += 'height: 100% !important;';
-                transformValue = placement === 'left'
-                    ? 'translateX(-100%)'
-                    : 'translateX(100%)';
+                if (placement === 'left') {
+                    borderRadius = `0 ${theme.largeBorderRadius} ${theme.largeBorderRadius} 0`;
+                    transformValue = 'translateX(-100%)';
+                } else {
+                    borderRadius = `${theme.largeBorderRadius} 0 0 ${theme.largeBorderRadius}`;
+                    transformValue = 'translateX(100%)';
+                }
             } else {
                 positionValue += 'width: 100% !important;';
-                transformValue = placement === 'top'
-                    ? 'translateY(-100%)'
-                    : 'translateY(100%)';	
+                if (placement === 'top') {
+                    borderRadius = `0 0 ${theme.largeBorderRadius} ${theme.largeBorderRadius}`;
+                    transformValue = 'translateY(-100%)';
+                } else {
+                    borderRadius = `${theme.largeBorderRadius} ${theme.largeBorderRadius} 0 0`;
+                    transformValue = 'translateY(100%)';
+                }
             }
 
             return `
@@ -86,6 +93,9 @@ export function makeStyles(overlay: boolean) {
                             transform: ${transformValue};
                         }
                     }
+                    .k-drawer-content {
+                        border-radius: ${borderRadius};
+                    }
                 }
             `
         })}

package/components/dropdown/demos/tooltip.md

@@ -19,7 +19,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Tooltip} from 'kpc';
             <Tooltip content="disabled">
                 <DropdownItem disabled>item 3</DropdownItem>
             </Tooltip>
-            <Dropdown position={{my: 'left top', at: 'right top'}}>
+            <Dropdown position={{my: 'left top', at: 'right top'}} trigger="click">
                 <Tooltip content="This is a nested Dropdown.">
                     <DropdownItem>item 4</DropdownItem>
                 </Tooltip>

package/components/dropdown/index.spec.ts

@@ -363,4 +363,4 @@ describe('Dropdown', () => {
         await wait(800);
         expect(getElement('.k-dropdown-menu')).to.not.be.exist;
     });
-});
+});

package/components/dropdown/styles.ts

@@ -33,7 +33,7 @@ export function makeMenuStyles() {
         min-width: ${dropdown.menu.minWidth};
         background: ${dropdown.menu.bgColor};
         border-radius: ${dropdown.menu.borderRadius};
-        box-shadow: ${theme.boxShadow};
+        box-shadow: ${theme.middleBoxShadow};
         font-size: ${dropdown.menu.fontSize};
         z-index: ${dropdown.menu.zIndex};
         top: 0;

package/components/form/index.spec.ts

@@ -21,7 +21,7 @@ RemoteDemo.prototype.validateUserName = function(value) {
 };
 
 describe('Form', () => {
-    // afterEach(() => unmount());
+    afterEach(() => unmount());
 
     it('validate', async () => {
         const [instance, element] = mount(BasicDemo, null, basicDemoData);

package/components/form/item.vdt

@@ -68,7 +68,7 @@ const {ellipsis, message, errorRef} = this.error;
                     {message.value}
                 </div>
                 <Tooltip hoverable position="bottom">
-                    <Icon class="ion-ios-information-outline k-form-error-more" size="small" />
+                    <Icon class="ion-ios-information-outline k-form-error-more" size="small" color="inherit" />
                     <b:content>
                         {message.value}
                     </b:content>

package/components/form/styles.ts

@@ -7,9 +7,9 @@ const defaults = {
     item: {
         gap: `24px`,
         labelWidth: `80px`,
-        get labelLineHeight() { return theme.default.height },
+        get labelHeight() { return theme.default.height },
         labelTextAlign: 'right',
-        labelGap: '10px',
+        labelGap: '16px',
         get starColor() { return theme.color.danger },
         starGap: '3px',
 
@@ -40,29 +40,27 @@ setDefault(() => {
 
 export function makeItemStyles() {
     return css`
-        display: table;
+        display: flex;
         position: relative;
-        table-layout: fixed;
         &:not(:last-of-type) {
             margin-bottom: ${form.item.gap};
         }
-        &.k-fluid {
-            width: 100%;
+        &.k-fluid > .k-form-content {
+            flex: 1;
         }
         .k-form-label {
-            display: table-cell;
+            display: flex;
+            align-items: center;
+            justify-content: ${form.item.labelTextAlign === 'right' ? 'end' : 'start'};
             width: ${form.item.labelWidth};
-            text-align: ${form.item.labelTextAlign};
             padding-right: ${form.item.labelGap};
-            line-height: ${form.item.labelLineHeight};
+            max-height: ${form.item.labelHeight};
         }
         .k-form-star {
             color: ${form.item.starColor};
             margin-right: ${form.item.starGap};
         }
         .k-form-content {
-            display: table-cell;
-            vertical-align: middle;
             position: relative;
         }
 
@@ -106,17 +104,15 @@ export function makeItemStyles() {
         }
 
         // nested
-        .k-form-item {
-            &,
-            .k-form-content {
-                display: block;
-                width: auto;
-            }
-        }
+        // .k-form-item {
+            // &,
+            // .k-form-content {
+                // width: auto;
+            // }
+        // }
 
         // append
         .k-form-append {
-            display: table-cell;
             padding: ${form.item.appendPadding};
             vertical-align: middle;
         }
@@ -128,7 +124,7 @@ export function makeFormStyles() {
         // layout
         &.k-inline {
             .k-form-item {
-                display: inline-block;
+                display: inline-flex;
                 vertical-align: top;
                 margin-right: ${form.item.inlineGap};
             }
@@ -137,15 +133,14 @@ export function makeFormStyles() {
             }
         }
         &.k-vertical {
-            .k-form-item,
-            .k-form-label,
-            .k-form-content {
-                display: block;
+            .k-form-item {
+                flex-direction: column;
             }
             .k-form-label {
                 width: auto;
                 text-align: left;
-                line-height: inherit;
+                padding: 0;
+                justify-content: start;
                 margin-bottom: ${form.item.verticalLabelGap};
             }
         }
@@ -155,7 +150,7 @@ export function makeFormStyles() {
             return css`
                 &.k-${size} {
                     .k-form-item:not(:last-of-type) {
-                        margin: ${form.item[`${size}Gap` as const]}
+                        margin-bottom: ${form.item[`${size}Gap` as const]}
                     }
                     &.k-inline {
                         .k-form-item {

package/components/grid/useGutter.ts

@@ -1,15 +1,16 @@
 import {useInstance} from 'intact';
 import {createContext} from '../context';
 import {hasDocumentAvailable, isObject, isNullOrUndefined} from 'intact-shared';
-import type * as EnquireJs from 'enquire.js';
+// import type * as EnquireJs from 'enquire.js';
+import enquire from 'enquire.js';
 import type {Row} from './row';
 import {useState} from '../../hooks/useState';
 import {Breakpoint, responsiveMap} from './constants';
 
-let enquire: typeof EnquireJs;
-if (hasDocumentAvailable) {
-    enquire = require('enquire.js');
-}
+// let enquire: typeof EnquireJs;
+// if (hasDocumentAvailable) {
+    // enquire = require('enquire.js');
+// }
 
 export const context = createContext<number>(0);
 
@@ -24,7 +25,7 @@ export function useGutter() {
         xs: false,
     });
 
-    if (enquire) {
+    if (hasDocumentAvailable) {
         for (const key in responsiveMap) {
             enquire.register(responsiveMap[key as Breakpoint], {
                 match() {

package/components/icon/demos/disabled.md

@@ -0,0 +1,21 @@
+---
+title: 禁用状态
+order: 2
+---
+
+添加`diasbled`属性
+
+```vdt
+import {Icon} from 'kpc';
+
+<div>
+    <Icon class="ion-happy-outline" disabled />
+    <Icon class="ion-happy-outline" disabled hoverable />
+    <Icon class="ion-happy-outline" disabled color="primary" />
+</div>
+```
+
+```styl
+.k-icon
+    margin-right 8px
+```

package/components/icon/demos/icons.md

@@ -1,6 +1,6 @@
 ---
 title: King-Design Icons
-order: 1
+order: 3
 ---
 
 
@@ -36,121 +36,92 @@ export default class extends Component {
     static defaults() {
         return {
             fonts: [
-                'alert',
-                'alarm',
-                'calendar',
-                'application',
-                'arrow-right',
-                'arrow-up',
-                'arrow-left',
-                'arrow-down',
-                'arrow-expand',
-                'arrow-left-circled',
-                'arrow-right-circled',
-                'close',
-                'bill',
-                'change',
-                'cloud-download',
-                'content-squared',
-                'cloud',
-                'arrow-move',
-                'code-download',
-                'cloud-server',
-                'arrow-shrink',
-                'clone',
-                'cloud-servers',
-                'cart',
-                'delete',
-                'fault-outline',
-                'calculate',
-                'arrow-swap',
-                'download',
-                'information',
-                'internet',
-                'edit',
-                'search',
-                'code-working',
-                'heart',
-                'content',
-                'cut',
-                'money-square',
-                'logout',
-                'cloud-upload',
-                'lock',
-                'corporate',
-                'truth-none',
-                'resize',
-                'protect',
-                'time',
-                'date',
-                'document-change',
-                'scanner',
-                'notification',
-                'notification-outline',
-                'silent',
-                'heart-outline',
-                'share',
-                'pay',
-                'picture',
-                'desktop',
-                'earphone',
-                'cube',
-                'user-verify',
-                'fault',
-                'location',
-                'down-squared',
-                'pay-dollar',
-                'paperclip',
-                'settings',
-                'home',
-                'more',
-                'phonecall',
-                'tag',
-                'truth-circled',
-                'refresh',
-                'watch',
-                'images',
-                'sort',
-                'money-circled',
-                'trade',
-                'star-outline',
-                'minus-circled',
-                'right',
-                'left',
-                'up',
-                'down',
-                'upward',
-                'up-circled',
-                'pin',
-                'hide',
-                'users',
-                'user',
-                'return-right',
-                'message',
-                'paper',
-                'phonecall-prohibit',
-                'speedometer',
-                'settings-horizontal',
-                'phone',
-                'star',
-                'play',
-                'refresh-lock',
-                'shield',
-                'panel',
-                'structure',
-                'settings-vertical',
-                'printer',
-                'stop',
-                'return-left',
-                'question',
-                'unlock',
-                'sound-off',
-                'up-squared',
-                'sound-on',
-                'upload',
-                'tool',
-                'visible',
-                'truth',
+                "tag",
+                "clone",
+                "information-fill",
+                "warning-fill",
+                "success-fill",
+                "error-fill",
+                "question-fill",
+                "information", 
+                "cloud", 
+                "pin", 
+                "home", 
+                "cut", 
+                "servers", 
+                "internet", 
+                "mail", 
+                "paper", 
+                "phone", 
+                "panel", 
+                "alarm", 
+                "notification-outline", 
+                "earphone", 
+                "settings-horizontal", 
+                "message", 
+                "heart-outline", 
+                "return-right", 
+                "picture", 
+                "logout", 
+                "all", 
+                "drag", 
+                "settings-vertical", 
+                "more", 
+                "more-circled", 
+                "folder", 
+                "unlock", 
+                "user", 
+                "folder-open", 
+                "lock", 
+                "users", 
+                "edit", 
+                "location", 
+                "delete", 
+                "edit2", 
+                "settings", 
+                "calendar", 
+                "search", 
+                "alert", 
+                "question", 
+                "zoom-in", 
+                "zoom-out",
+                "fault-outline", 
+                "truth-circled", 
+                "hide", 
+                "visible", 
+                "time", 
+                "refresh", 
+                "batchsearch", 
+                "refresh2", 
+                "upload", 
+                "download", 
+                "left-squared", 
+                "right-squared", 
+                "down-squared", 
+                "up-squared", 
+                "arrow-right-circled", 
+                "arrow-down-circled", 
+                "arrow-left-circled", 
+                "arrow-up-circled", 
+                "arrow-up-big", 
+                "arrow-left-big", 
+                "arrow-down", 
+                "arrow-right-big", 
+                "arrow-right", 
+                "sortfill", 
+                "arrow-left", 
+                "arrow-up", 
+                "arrow-down-big", 
+                "sort", 
+                "sortbig", 
+                "truth", 
+                "check", 
+                "close-big", 
+                "add-small",
+                "minus", 
+                "close", 
+                "minuss-mall", 
+                "add-big"
             ]
         }
     }

package/components/icon/index.md

@@ -13,3 +13,4 @@ sidebar: doc
 | color | 图标颜色 | `"default"` | `"primary"` | `"danger"` | `"warning"` | `"success"` | `string` | `undefined` |
 | rotate | 是否一直旋转图标 | `boolean` | `false` |
 | hoverable | 图标是否具有`hover`效果 | `boolean` | `false` |
+| disbaled | 是否展示disabled状态 | `boolean` | `false` |