@king-design/intact 3.1.0-beta.1 → 3.1.0-beta.3

package/components/colorpicker/styles.ts

@@ -176,11 +176,11 @@ export function makePanelStyles(k: string) {
             .${k}-slider {
                 margin-bottom: ${colorpicker.panel.gutter};
             }
-            .${k}-slider-tra.${k}-wrapper,
+            .${k}-slider-track-wrapper,
             .${k}-slider-track {
                 height: ${colorpicker.slider.height};
             }
-            .${k}-slider-tra.${k}-wrapper {
+            .${k}-slider-track-wrapper {
                 cursor: ${colorpicker.slider.cursor};
             }
             .${k}-slider-track {
@@ -206,7 +206,7 @@ export function makePanelStyles(k: string) {
             }
         }
         .${k}-colorpicker-hue {
-            .${k}-slider-tra.${k}-wrapper {
+            .${k}-slider-track-wrapper {
                 background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
             }
         }
@@ -271,7 +271,7 @@ export function makePanelStyles(k: string) {
 
 export function makeAlphaBgColor({r, g, b}: ColorFormats.RGBA, k: string) {
     return css`
-        .${k}-slider-tra.${k}-wrapper {
+        .${k}-slider-track-wrapper {
             background: linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgb(${r}, ${g}, ${b}) 100%);
         }
     `;

package/components/copy/index.spec.ts

@@ -1,5 +1,8 @@
 import BasicDemo from '~/components/copy/demos/basic';
 import {mount, unmount, dispatchEvent, wait, getElement} from '../../test/utils';
+import { Tooltip } from '../tooltip';
+import { Component } from 'intact';
+import { Copy } from '.';
 
 describe('Copy', () => {
     afterEach(async () => {
@@ -18,4 +21,29 @@ describe('Copy', () => {
             console.log(e);
         }
     });
+
+    it('wrap copy with tooltip', async () => {
+        class Demo extends Component {
+            static template = `
+                const { Tooltip, Copy } = this;
+                <Tooltip content="test">
+                    <Copy text="test" />
+                </Tooltip>
+            `;
+            Tooltip = Tooltip;
+            Copy = Copy;
+        }
+
+        const [instance, element] = mount(Demo);
+
+        element.click();
+        await wait();
+        try {
+            const text = await navigator.clipboard.readText();
+            expect(text).to.eql('test');
+        } catch (e) {
+            // Read permisson denied 
+            console.log(e);
+        }
+    });
 });

package/components/copy/index.ts

@@ -12,6 +12,7 @@ export interface CopyProps {
 export interface CopyEvents {
     success: [string]
     error: []
+    click: [MouseEvent]
 }
 
 const typeDefs: Required<TypeDefs<CopyProps>> = {
@@ -26,6 +27,7 @@ const defaults = (): Partial<CopyProps> => ({
 const events: Events<CopyEvents> = {
     success: true,
     error: true,
+    click: true,
 };
 
 export class Copy extends Component<CopyProps, CopyEvents> {

package/components/copy/useCopy.ts

@@ -11,7 +11,7 @@ export function useCopy() {
     let timer: number;
 
     return {
-        startCopy: () => {
+        startCopy: (e: MouseEvent) => {
             const { text, showMessage } = instance.get();
 
             if (clipboardCopy(text) || commandCopy(text)) {
@@ -27,6 +27,8 @@ export function useCopy() {
                 success.set(false);
                 instance.trigger('error');
             }
+
+            instance.trigger('click', e);
         },
         success,
     };
@@ -57,15 +59,18 @@ function createFakeElement(value: string) {
 
 function clipboardCopy(text: string) {
     try {
-        navigator.clipboard.writeText(text);
+        if (navigator.clipboard/* && window.isSecureContext */) {
+            navigator.clipboard.writeText(text);
 
-        return true;
+            return true;
+        }
     } catch (e) {
         if (process.env.NODE_ENV !== 'production') {
             console.log(e);
         }
-        return false;
     }
+
+    return false;
 }
 
 function commandCopy(text: string) {

package/components/dialog/base.ts

@@ -179,7 +179,7 @@ export class BaseDialog<
 
     @bind
     private onClickWrapper(e: MouseEvent) {
-        if (this.get('closable')) {
+        if (this.get('closable') && e.target === this.overlayRef.value) {
             this.terminate();
         }
     }

package/components/dialog/base.vdt

@@ -90,8 +90,8 @@ const dialog = (
                 ev-click={this.onClickWrapper}
                 class={`${k}-dialog-overlay`}
                 ref={this.overlayRef}
-            ></div>
+            >{dialog}</div>
         </Transition>
-        {dialog}
+        <template v-else>{dialog}</template>
     </div>
 </Portal>

package/components/dialog/styles.ts

@@ -168,6 +168,7 @@ export function makeWrapperStyles(k: string) {
             width: 100%;
             height: 100%;
             background: rgba(0, 0, 0, .5);
+            overflow: auto;
         }
     `;
 }

package/components/editable/index.vdt

@@ -2,6 +2,7 @@ import {getRestProps} from '../utils';
 import {Input} from '../input';
 import {Icon} from '../icon';
 import {makeStyles} from './styles';
+import { Tooltip } from '../tooltip';
 
 const {
     children, className, editing, 
@@ -20,11 +21,12 @@ const classNameObj = {
 };
 
 <div {...getRestProps(this)} class={classNameObj}>
-    <Icon class={`${k}-icon-edit ${k}-editable-icon`} title={tip}
-        v-if={!disabled && !editing}
-        ev-click={this.edit}
-        hoverable
-    />
+    <Tooltip v-if={!disabled && !editing} content={tip}>
+        <Icon class={`${k}-icon-edit ${k}-editable-icon`}
+            ev-click={this.edit}
+            hoverable
+        />
+    </Tooltip>
     <div class="c-ellipsis">
         <template v-if={!editing}>{children}</template>
         <Input v-else

package/components/layout/aside.ts

@@ -12,6 +12,7 @@ export interface AsideProps {
     fixed?: boolean
     theme?: MenuProps['theme']
     width?: number | string
+    collapsedWidth?: number | string
 }
 
 const typeDefs: Required<TypeDefs<AsideProps>> = {
@@ -19,6 +20,7 @@ const typeDefs: Required<TypeDefs<AsideProps>> = {
     fixed: Boolean,
     theme: themes,
     width: [Number, String],
+    collapsedWidth: [Number, String],
 };
 
 const defaults = (): Partial<AsideProps> => ({
@@ -35,9 +37,9 @@ export class Aside extends Component<AsideProps> {
     private config = useConfigContext();
 
     private getStyles() {
-        const {fixed, width, collapse} = this.get();
+        const {fixed, width, collapse, collapsedWidth} = this.get();
         const style = addStyle(this.get<string>('style'), {
-            width: !collapse ? getStyle(width!) : getCollapseWidth(),
+            width: !collapse ? getStyle(width!) : getCollapseWidth(collapsedWidth),
         });
 
         if (!fixed) return style; 

package/components/layout/body.ts

@@ -4,6 +4,7 @@ import {LAYOUT, getStyle, BODY} from './helpers';
 import type {Layout} from './layout';
 import {addStyle} from '../utils';
 import { useConfigContext } from '../config';
+import { makeBodyStyles } from './styles';
 
 export class Body extends Component {
     static template = template;
@@ -21,6 +22,7 @@ export class Body extends Component {
         return {
             [`${k}-layout-body`]: true,
             [className as string]: className,
+            [makeBodyStyles(k)]: true,
         };
     }
 

package/components/layout/index.md

@@ -25,3 +25,4 @@ sidebar: doc
 | collapse | 是否收起侧边栏 | `boolean` | `false` |
 | theme | 主题颜色 | `"dark"` | `"light"` | `"white"` | `"dark"` |
 | width | 宽度 | `string` | `number` | `"200px"` |
+| collapsedWidth | 侧边栏收缩的宽度 | `string` | `number` | `"58px"` |

package/components/layout/styles.ts

@@ -3,6 +3,8 @@ import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, getLeft, setAlpha} from '../../styles/utils';
 import '../../styles/global';
 import {menu} from '../menu/styles';
+import { isNullOrUndefined } from 'intact-shared';
+import { getStyle } from './helpers';
 
 const sizes = ['small', 'large'] as const;
 export const themes = ['light', 'dark', 'white'] as const;
@@ -32,8 +34,8 @@ setDefault(() => {
     layout = deepDefaults(theme, {layout: defaults}).layout;
 });
 
-export function getCollapseWidth() {
-    return layout.collapsedWidth;
+export function getCollapseWidth(collapsedWidth?: string | number) {
+    return isNullOrUndefined(collapsedWidth) ? layout.collapsedWidth : getStyle(collapsedWidth);
 }
 
 export function makeLayoutStyles(k: string) {
@@ -131,3 +133,9 @@ export function makeAsideStyles(k: string) {
     `
 }
 
+export function makeBodyStyles(k: string) {
+    return css`
+        transition: padding-left ${layout.transition};
+    `
+}
+

package/components/layout/useParse.ts

@@ -34,7 +34,7 @@ export function useParse() {
                     asideWidth = props.width;
                 }
                 if (props.collapse) {
-                    asideWidth = getCollapseWidth();
+                    asideWidth = getCollapseWidth(props.collapsedWidth);
                 }
                 if (props.fixed) {
                     hasFixedAside = true;

package/components/menu/demos/basic.md

@@ -26,7 +26,7 @@ import {Menu, MenuItem, Icon} from 'kpc';
     </MenuItem>
     <MenuItem key="2" disabled><Icon class="ion-star" />menu 2</MenuItem>
     <MenuItem key="3">
-        <i class="k-icon ion-heart"></i>menu 3
+        <Icon class="ion-heart" />menu 3
         <Menu>
             <MenuItem key="3-1">sub menu 1</MenuItem>
             <MenuItem key="3-2">sub menu 2</MenuItem>

package/components/menu/item.vdt

@@ -5,7 +5,7 @@ import {Icon} from '../icon';
 import {Menu} from './menu';
 import {getRestProps, expandAnimationCallbacks} from '../utils';
 import {isNullOrUndefined} from 'intact-shared';
-import {makeItemStyles, makeTitleStyles} from './styles';
+import {makeItemStyles, makeTitleStyles, makeNestedMenuStyles} from './styles';
 
 const rootMenu = this.rootMenu;
 const {theme, type, dot: rootDot} = rootMenu.get();
@@ -18,6 +18,7 @@ const {
     tooltipContents, iconVNode, titleVNodes,
     position, isCollapse,
 } = this.dropdown();
+
 const { k } = this.config;
 const classNameObj = {
     [`${k}-menu-item`]: true,
@@ -48,7 +49,21 @@ const title = (children) => (
             key="subMenu"
             {...expandAnimationCallbacks}
         >
-            {subMenuVNode}
+            {(() => {
+                if (subMenuVNode) {
+                    const paddingLeft = this.parentMenu.get('_paddingLeft');
+                    const [_classname, _paddingLeft] = makeNestedMenuStyles(k, showDot || !!iconVNode, paddingLeft);
+                    const className = _$cn({
+                        [_classname]: true,
+                        [subMenuVNode.className]: subMenuVNode.className,
+                    });
+                    const clonedVNode = directClone(subMenuVNode);
+                    clonedVNode.props = { ...clonedVNode.props, className, _paddingLeft };
+                    clonedVNode.className = className;
+
+                    return clonedVNode;
+                }
+            })()}
         </Transition>
     </template>
 

package/components/menu/menu.ts

@@ -12,6 +12,8 @@ export interface MenuProps<K extends Key = Key> {
     size?: 'large' | 'default' | 'small' 
     accordion?: boolean
     dot?: boolean
+
+    _paddingLeft?: string 
 }
 
 export interface MenuEvents { }
@@ -29,6 +31,8 @@ const typeDefs: Required<TypeDefs<MenuProps>> = {
     size: ['large', 'default', 'small'],
     accordion: Boolean,
     dot: Boolean,
+
+    _paddingLeft: String,
 };
 
 const defaults = (): Partial<MenuProps> => ({

package/components/menu/menu.vdt

@@ -41,7 +41,7 @@ const content = (
     <div v-if={!isDropdownMenu}
         {...getRestProps(this)}
         class={classNameObj}
-    >{content}{}</div>
+    >{content}</div>
     <DropdownMenu v-else 
         {...getRestProps(this)}
         class={classNameObj}

package/components/menu/styles.ts

@@ -96,20 +96,6 @@ export function makeMenuStyles(k: string) {
             font-size: ${menu.fontSize};
         }
 
-        // nested menu
-        &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) {
-            width: auto;
-            background: ${menu.subBgColor};
-            .${k}-menu-title {
-                padding-left: calc(${getLeft(menu.item.padding)} + ${menu.icon.width} + ${menu.icon.gap});
-            }
-        }
-        &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) {
-            .${k}-menu-title {
-                padding-left: calc(${getLeft(menu.item.padding)} + ${menu.icon.width} * 2 + ${menu.icon.gap});
-            }
-        }
-
         .${k}-icon {
             width: ${menu.icon.width};
             margin-right: ${menu.icon.gap};
@@ -244,7 +230,6 @@ export function makeItemStyles(k: string) {
         .${k}-menu-title {
             cursor: pointer;
             height: ${menu.item.height};
-            transition: all ${menu.transition};
             &:hover {
                 color: ${menu.item.hoverColor};
             }
@@ -259,10 +244,13 @@ export function makeItemStyles(k: string) {
                 text-overflow: ellipsis;
                 min-width: 0;
             }
+            .${k}-icon {
+                color: inherit;
+            }
         }
         .${k}-menu-arrow {
             transition: transform ${menu.transition};
-            margin-left: ${menu.icon.gap};
+            margin: 0 0 0 ${menu.icon.gap};
         }
 
         // expanded
@@ -305,3 +293,19 @@ export function makeItemStyles(k: string) {
         }
     `
 }
+
+export function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft: string = getLeft(menu.item.padding)) {
+    const paddingLeft = `${parentPaddingLeft}${hasIcon ? ' + ' + menu.icon.width : ''} + ${menu.icon.gap}`;
+    return [
+        css`
+            &.${k}-menu {
+                width: auto;
+                background: ${menu.subBgColor};
+                .${k}-menu-title {
+                    padding-left: calc(${paddingLeft});
+                }
+            }
+        `,
+        paddingLeft,
+    ]
+}

package/components/menu/useDropdown.ts

@@ -45,16 +45,13 @@ export function useDropdown(rootMenu: Menu, parentMenu: Menu) {
         eachChildren(children, vNode => {
             if (isComponentVNode(vNode, Menu)) {
                 subMenuVNode = vNode;
-            } else if (isTopItem && isCollapse) {
-                if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
-                    tooltipContents.push(vNode);
-                } else if (!iconVNode && isComponentVNode(vNode, Icon)) {
-                    iconVNode = vNode;
-                }
             } else {
                 if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
                     // wrap with span for showing text ellipsis
                     vNode = createVNode('span', null, vNode);
+                    tooltipContents.push(vNode);
+                } else if (!iconVNode && isComponentVNode(vNode, Icon)) {
+                    iconVNode = vNode;
                 }
                 titleVNodes.push(vNode);
             }

package/components/message/styles.ts

@@ -74,8 +74,8 @@ export function makeMessageStyles(k: string) {
             display: inline-block;
             padding: ${message.padding};
             vertical-align: middle;
-            word-break: bre.${k}-word;
-            word-wrap: bre.${k}-word;
+            word-break: break-word;
+            word-wrap: break-word;
         }
         .${k}-message-close {
             vertical-align: middle;

package/components/select/styles.ts

@@ -205,7 +205,7 @@ export default function makeStyles(k: string) {
             padding: 3px 0;
         }
         .${k}-tag {
-            word-break: bre.${k}-word;
+            word-break: break-word;
             height: auto;
             max-width: calc(100% - ${getRight(select.tag.margin)} - 1px);
         }

package/components/table/cell.vdt

@@ -20,7 +20,7 @@ if (blocks) {
     }
 }
 
-let {className, style} = getClassAndStyleForFixed(props, offset, checkType);
+let {className, style} = getClassAndStyleForFixed(props, offset, k, checkType);
 if (columnIndex === 0 && indent) {
     style || (style = {});
     style.paddingLeft = `${indent}px`;

package/components/table/column.vdt

@@ -33,7 +33,7 @@ const { k } = this.config;
                             {({resizable, onStart}) => {
                                 return <FixedColumnsContext.Consumer>
                                     {(offsetMap) => {
-                                        const {className, style} = getClassAndStyleForFixed(this.get(), offsetMap[key], checkType);
+                                        const {className, style} = getClassAndStyleForFixed(this.get(), offsetMap[key], k, checkType);
                                         const classNameObj = {
                                             [`${k}-column-sortable`]: sortable,
                                             [className]: className,

package/components/table/row.vdt

@@ -39,8 +39,8 @@ const pushCheckTypeVNode = (children) => {
         <td key="$checktype"
             {...getClassAndStyleForFixed({
                 fixed: hasFixedLeft ? 'left' : false,
-                className: [`${k}-table-check`]
-            }, 0)}
+                className: [`${k}-table-check`],
+            }, 0, k)}
             {...spans}
         >{children}</td>
     )

package/components/table/styles.ts

@@ -90,7 +90,7 @@ export function makeStyles(k: string) {
             border-spacing: 0;
             table-layout: fixed;
             td, 
-            th{
+            th {
                 transition: all ${table.transition};  
             }
         }
@@ -157,7 +157,7 @@ export function makeStyles(k: string) {
             padding: ${table.tbody.padding};
             border-bottom: ${table.border};
             background: ${table.bgColor};
-            word-wrap: bre.${k}-word;
+            word-wrap: break-word;
             // overflow: hidden;
             // text-overflow: ellipsis;
         }

package/components/table/table.vdt

@@ -80,7 +80,7 @@ const thead = hideHeader ? null : (
                                         <th v-if={$key === 0 && checkType !== 'none'}
                                             {...getClassAndStyleForFixed({
                                                 fixed: hasFixedLeft ? 'left' : false,
-                                            }, 0)}
+                                            }, 0, k)}
                                             rowspan={maxRows}
                                             key="$checktype"
                                         >

package/components/table/useFixedColumns.ts

@@ -146,14 +146,15 @@ export function useFixedColumns(
 export function getClassAndStyleForFixed(
     {className, fixed, align}: Props<TableColumnProps>,
     offset: number,
+    k: string,
     checkType?: TableProps['checkType'],
 ) {
     const extraOffset = checkType && checkType !== 'none' && fixed === 'left' ? 40 : 0;
     return {
         className: cx({
             [className as string]: !!className,
-            [`k-fixed-${fixed}`]: !!fixed,
-            [`k-align-${align}`]: !!align,
+            [`${k}-fixed-${fixed}`]: !!fixed,
+            [`${k}-align-${align}`]: !!align,
         }),
         style: fixed ? {[fixed]: `${offset + extraOffset}px`} : null,
     };

package/components/tooltip/styles.ts

@@ -58,7 +58,7 @@ export default function makeStyles(k: string) {
             min-width: 0;
             padding: ${tooltip.padding};
             line-height: ${tooltip.lineHeight};
-            word-wrap: bre.${k}-word;
+            word-wrap: break-word;
             pointer-events: none;
             box-shadow: ${tooltip.boxShadow};