@king-design/intact 3.1.6 → 3.2.0

package/components/menu/styles.ts

@@ -9,18 +9,28 @@ const sizes = ['large', 'small'] as const;
 const defaults = {
     get transition() { return theme.transition.large },
     width: '200px',
-    bgColor: '#262626',
+    bgColor: '#1c1c20',
     fontSize: '14px',
     get borderRadius() { return theme.borderRadius },
+    get border() { return `1px solid ${theme.color.darkBorder}` },
 
     item: {
         height: '40px',
-        padding: '0 21px',
-        color: '#b2b2b2',
+        padding: '0 17px',
+        bodyPadding: '0 4px',
+        color: '#aeaeb9',
         hoverColor: '#fff',
-        get disabledColor() { return theme.color.text },
+        disabledColor: '#53535a',
         get activeBgColor() { return theme.color.primary },
-        dotFontSize: '12px'
+        get hoverBgColor() { return palette(theme.color.primary, 4) },
+        dotFontSize: '12px',
+        subTitleColor: '#858592',
+    },
+
+    title: {
+        height: '40px',
+        padding: '0 17px',
+        color: '#fff',
     },
 
     icon: {
@@ -29,33 +39,24 @@ const defaults = {
     },
 
     header: {
-        height: '50px',
+        height: '52px',
         fontSize: '14px',
+        color: '#fff',
         borderBottom: '1px solid #1b1b1d',
     },
 
-    // sub-menu
-    subBgColor: '#000',
-
     light: {
-        bgColor: '#e5e5e9',
-        subBgColor:  '#d5d5d9',
-        border: '1px solid #d5d5d9',
-        item: {
-            get color() { return theme.color.text }, 
-            get hoverColor() { return theme.color.primary }, 
-            disabledColor: '#999'
-        },
-    },
-
-    white: {
         bgColor: '#fff',
-        subBgColor:  '#fafafa',
-        border: '1px solid #eee',
+        get border() { return `1px solid ${theme.color.disabledBg}` },
         item: {
             get color() { return theme.color.text }, 
             get hoverColor() { return theme.color.primary }, 
-            get disabledColor() { return theme.color.disabled },
+            get hoverBg() { return theme.color.hoverBg },
+            disabledColor: '#b6bec2',
+            subTitleColor: '#5e686f',
+        },
+        title: {
+            get color() { return theme.color.title }, 
         },
         active: {
             get color() { return theme.color.primary },
@@ -99,6 +100,7 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
             transition: width ${menu.transition};
             background: ${menu.bgColor};
             font-size: ${menu.fontSize};
+            position: relative;
         }
 
         .${k}-icon {
@@ -108,62 +110,129 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
             flex-shrink: 0;
         }
 
-
         // header
         .${k}-menu-header {
             height: ${menu.header.height};
+            padding: 0 21px;
+            color: ${menu.header.color};
             font-size: ${menu.header.fontSize};
             font-weight: bold;
-            border-bottom: ${menu.header.borderBottom};
         }
 
-        // theme
-        ${(['light', 'white'] as const).map(theme => {
-            const styles = menu[theme];
-            return css`
-                &.${k}-${theme} {
-                    background: ${styles.bgColor};
-                    .${k}-menu-header {
-                        color: ${styles.item.color};
-                        border-bottom: ${styles.border};
+        .${k}-menu-body {
+            padding: ${menu.item.bodyPadding};
+            max-height: calc(100vh - ${menu.header.height});
+            overflow-y: auto;
+        }
+
+        // menu title
+        .${k}-menu-title {
+            height: ${menu.title.height};
+            border-top: ${menu.border};
+            margin-top: 4px;
+            .${k}-menu-name {
+                transition: all ${menu.transition};
+                height: ${menu.title.height};
+                color: ${menu.title.color};
+                font-weight: bold;
+            }
+        }
+
+        // menu arrow
+        .${k}-menu-arrow-box {
+            width: 14px;
+            height: 60px;
+            cursor: pointer;
+            background: ${menu.bgColor};
+            border-radius: 0 8px 8px 0;
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            top: 50%;
+            left: calc(${menu.width} - 2px);
+            transition: left ${menu.transition};
+            transform: translateY(-50%);
+            border: ${menu.border};
+            border-left: none;
+            .${k}-icon {
+                margin-right: 0;
+            }
+            &:hover {
+                .${k}-menu-arrow:before {
+                    color: ${menu.item.activeBgColor};
+                }
+            }
+        }
+
+        // theme light
+        &.${k}-light {
+            border: 1px solid ${theme.color.disabledBg};
+            background: ${menu.light.bgColor};
+            .${k}-menu-header {
+                color: ${menu.light.title.color};
+            }
+            .${k}-menu-item {
+                .${k}-menu-item-title {
+                    color: ${menu.light.item.color};
+                    &:hover {
+                        background: ${menu.light.item.hoverBg};
                     }
-                    .${k}-menu-item {
-                        .${k}-menu-title {
-                            color: ${styles.item.color};
-                            &:hover {
-                                color: ${styles.item.hoverColor};
-                            }
-                        }
-                        &.${k}-highlighted {
-                            > .${k}-menu-title {
-                                color: ${styles.item.hoverColor};
-                            }
-                        }
-                        &.${k}-disabled {
-                            > .${k}-menu-title {
-                                color: ${styles.item.disabledColor} !important;
-                            }
-                        }
+                }
+                .${k}-menu-item-arrow {
+                    color: ${menu.light.item.color};
+                }
+                &.${k}-highlighted {
+                    > .${k}-menu-item-title {
+                        color: ${menu.light.item.hoverColor};
                     }
-                    .${k}-menu:not(.${k}-dropdown-menu) {
-                        background: ${styles.subBgColor};
+                }
+                &.${k}-disabled {
+                    > .${k}-menu-item-title {
+                        color: ${menu.light.item.disabledColor} !important;
                     }
+                }
+            }
 
-                    &.${k}-horizontal {
-                        .${k}-menu-header {
-                            border-right: ${styles.border};
-                        }
+            .${k}-menu-title {
+                border-top: ${menu.light.border};
+                .${k}-menu-name {
+                    color: ${menu.light.title.color};
+                }
+            }
+            
+            .${k}-menu-arrow-box {
+                background: ${menu.light.bgColor};
+                border: ${menu.light.border};
+                border-left: none;
+                &:hover {
+                    .${k}-menu-arrow:before {
+                        color: ${menu.light.active.color};
                     }
                 }
-            `;
-        })}
+            }
+            .${k}-menu:not(.${k}-dropdown-menu) {
+                background: ${menu.light.bgColor};
+            }
 
-        &.${k}-white {
+            &.${k}-horizontal {
+                .${k}-menu-header {
+                    border-right: ${menu.light.border};
+                }
+                .${k}-menu-body > .${k}-menu-title {
+                    border-right: ${menu.light.border};
+                }
+            }
             // active
             .${k}-menu-item.${k}-active {
-                > .${k}-menu-title {
-                    color: ${menu.white.active.color } !important;
-                    background: ${menu.white.active.bgColor};
+                > .${k}-menu-item-title {
+                    color: ${menu.light.active.color } !important;
+                    background: ${menu.light.active.bgColor};
+                }
+            }
+            .${k}-sub-menu {
+                .${k}-menu-item-title, .${k}-menu-item-arrow {
+                    color: ${menu.light.item.subTitleColor} !important;
                 }
             }
         }
@@ -179,26 +248,45 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
                     .${k}-menu {
                         font-size: ${styles.fontSize}; 
                     }
+                    .${k}-menu-arrow-box {
+                        left: calc(${styles.width} - 2px); 
+                    }
                 }
             `;
         })}
 
         // collapse
         &.${k}-collapsed {
-            width: calc(${menu.icon.width} + ${getLeft(menu.item.padding)} * 2);
+            width: calc(${menu.icon.width} + (${getLeft(menu.item.padding)} + ${getLeft(menu.item.bodyPadding)}) * 2);
             .${k}-icon {
                 margin-right: 0;
             }
-            .${k}-menu-arrow {
+            .${k}-menu-item-arrow {
                 display: none;
             }
         }
 
+        // show collapse arrow
+        &.${k}-collapsed-arrow {
+            width: 0px;
+            border-left: none;
+            .${k}-menu-body {
+                overflow: hidden;
+                padding: 0;
+            }
+            .${k}-menu-arrow-box {
+                left: 0;
+                .${k}-menu-arrow:before {
+                    transform: rotateY(180deg);
+                }
+            }
+        }
+
         // dropdown
         &.${k}-dropdown-menu {
-            width: auto;
+            width: fit-content;
             min-width: ${menu.dropdown.minWidth};
-            .${k}-menu-arrow {
+            .${k}-menu-item-arrow {
                 transform: rotate(-90deg)
             }
         }
@@ -207,10 +295,13 @@ export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
         &.${k}-horizontal {
             width: auto;
             display: flex;
-            align-items: center;
-            .${k}-menu-header {
-                border-bottom: none;
-                border-right: ${menu.header.borderBottom};
+            .${k}-menu-body {
+                display: flex;
+                align-items: center;
+                .${k}-menu-title {
+                    border-top: none;
+                    border-right: ${menu.border};
+                }
             }
         }
     `
@@ -232,11 +323,17 @@ export const makeTitleStyles = cache(function makeTitleStyles(k: string) {
 export const makeItemStyles = cache(function makeItemStyles(k: string) {
     const item = menu.item;
     return css`
-        .${k}-menu-title {
+        .${k}-menu-item-title {
+            transition: all ${menu.transition};
             cursor: pointer;
             height: ${item.height};
             &:hover {
-                color: ${item.hoverColor};
+                padding: ${item.padding};
+                border-radius: ${menu.borderRadius};
+                background: #2a2a30;
+            }
+            & > .${k}-menu-item-arrow:before {
+                font-size: small;
             }
         }
         .${k}-menu-name {
@@ -253,39 +350,41 @@ export const makeItemStyles = cache(function makeItemStyles(k: string) {
                 color: inherit;
             }
         }
-        .${k}-menu-arrow {
-            transition: transform ${menu.transition};
+        .${k}-menu-item-arrow {
+            color: ${item.color};
             margin: 0 0 0 ${menu.icon.gap};
+            transition: transform ${menu.transition};
         }
 
         // expanded
         &.${k}-expanded {
-            > .${k}-menu-title {
+            > .${k}-menu-item-title {
                 color: ${item.hoverColor};
-                .${k}-menu-arrow {
-                    transform: rotateX(180deg);
+                .${k}-menu-item-arrow {
+                    transform: rotate(180deg);
                 }
             }
         }
 
         // highlighted
         &.${k}-highlighted {
-            > .${k}-menu-title {
-                color: ${item.hoverColor};
+            > .${k}-menu-item-title {
+                color: ${menu.light.item.hoverColor};
             }
         }
 
         // active
         &.${k}-active {
-            > .${k}-menu-title {
-                color: ${item.hoverColor} !important;
-                background: ${item.activeBgColor};
+            > .${k}-menu-item-title {
+                border-radius: ${menu.borderRadius};
+                color: ${item.activeBgColor} !important;
+                background: ${item.hoverBgColor};
             }
         }
 
         // disabled
         &.${k}-disabled {
-            > .${k}-menu-title {
+            > .${k}-menu-item-title {
                 color: ${item.disabledColor} !important;
                 cursor: not-allowed;
             }
@@ -300,14 +399,22 @@ export const makeItemStyles = cache(function makeItemStyles(k: string) {
 });
 
 export const makeNestedMenuStyles = cache(function makeNestedMenuStyles(k: string, hasIcon: boolean, parentPaddingLeft: string = getLeft(menu.item.padding)) {
-    const paddingLeft = `${parentPaddingLeft}${hasIcon ? ' + ' + menu.icon.width : ''} + ${menu.icon.gap}`;
+    const paddingLeft = `${parentPaddingLeft}${hasIcon ? ' + ' + menu.icon.width + ' + ' + menu.icon.gap : ''}`;
     return [
         css`
             &.${k}-menu {
+                position: relative;
                 width: auto;
-                background: ${menu.subBgColor};
-                .${k}-menu-title {
-                    padding-left: calc(${paddingLeft});
+                background: ${menu.bgColor};
+                border: none;
+                .${k}-menu-body {
+                    padding: 0;
+                    .${k}-menu-item-title {
+                        padding-left: calc(${paddingLeft});
+                    }
+                    .${k}-menu-item-title, .${k}-menu-item-arrow {
+                        color: ${menu.item.subTitleColor};
+                    }
                 }
             }
         `,

package/components/menu/title.ts

@@ -0,0 +1,12 @@
+import {Component, inject} from 'intact';
+import {ROOT_MENU, Menu} from './menu'
+import template from './title.vdt';
+import { useConfigContext } from '../config';
+
+export class MenuTitle extends Component {
+    static template = template;
+
+    public rootMenu = inject<Menu>(ROOT_MENU)!;
+    private config =  useConfigContext();
+}
+

package/components/menu/title.vdt

@@ -0,0 +1,25 @@
+import {Icon} from '../icon';
+import {getRestProps, findChildren, isComponentVNode} from '../utils';
+import {makeTitleStyles} from './styles';
+
+const rootMenu = this.rootMenu;
+const {collapse} = rootMenu.get();
+const {children, className} = this.get();
+const { k } = this.config;
+
+const classNameObj = {
+    [`${k}-menu-title`]: true,
+    [className]: className,
+};
+
+<div class={classNameObj} {...getRestProps(this)}>
+    <div class={{
+        [`${k}-menu-name`]: true,
+        [makeTitleStyles(k)]: true
+    }}>
+        <span v-if={!collapse}>{children}</span>
+        <template v-else>
+            {findChildren(children, vNode => isComponentVNode(vNode, Icon))}
+        </template>
+    </div>
+</div>

package/components/radio/styles.ts

@@ -7,7 +7,7 @@ import { cache } from '../utils';
 const defaults = {
     width: '16px',
     get transition() { return theme.transition.small },
-    get borderColor() { return theme.color.darkBorder; },
+    get borderColor() { return theme.color.border; },
     get hoverBorderColor() { return theme.color.primary; },
     bgColor: '#fff',
     textGap: '8px',

package/components/select/demos/searchable.md

@@ -13,7 +13,7 @@ import {Select, Option} from 'kpc';
 
 <div>
     <Select v-model="day" searchable>
-        <Option value="Monday">星期一</Option>
+        <Option value="Monday" disabled>星期一</Option>
         <Option value="Tuesday">星期二</Option>
         <Option value="Wednesday">星期三</Option>
         <Option value="Thursday">星期四</Option>
@@ -22,7 +22,7 @@ import {Select, Option} from 'kpc';
         <Option value="Sunday">星期天</Option>
     </Select>
     <Select v-model="days" searchable multiple>
-        <Option value="Monday">星期一</Option>
+        <Option value="Monday" disabled>星期一</Option>
         <Option value="Tuesday">星期二</Option>
         <Option value="Wednesday">星期三</Option>
         <Option value="Thursday">星期四</Option>

package/components/select/index.spec.ts

@@ -262,7 +262,7 @@ describe('Select', () => {
         selectAll.click();
         confirm.click();
         await wait();
-        expect(instance.get('days')).have.length(7);
+        expect(instance.get('days')).have.length(6);
 
         // unselect all
         select.click();

package/components/select/option.vdt

@@ -28,6 +28,7 @@ if (searchable && multiple) {
                     value={value.value}
                     ev-$change:value={value.set}
                     trueValue={this.get('value')}
+                    disabled={disabled}
                 >{children}</Checkbox>
             )}
         </Consumer>

package/components/select/select.ts

@@ -77,7 +77,10 @@ export class Select<
         const loop = (children: Children) => {
             eachChildren(children, vNode => {
                 if (isComponentVNode(vNode, Option)) {
-                    values.push((vNode.props! as OptionProps).value); 
+                    const props = vNode.props as OptionProps;
+                    if (!props.disabled) {
+                        values.push(props.value); 
+                    }
                 } else if (isComponentVNode(vNode, OptionGroup)) {
                     loop(vNode.props!.children);
                 }

package/components/table/column.vdt

@@ -14,6 +14,7 @@ import {context as FixedColumnsContext} from './useFixedColumns';
 import {stopPropagation} from '../utils';
 import {Input} from '../input';
 import {_$} from '../../i18n';
+import {ignoreSortable} from './useSortable';
 
 const {title, fixed, group, multiple, key, sortable, cols, rows} = this.get();
 const {
@@ -57,6 +58,7 @@ const { k } = this.config;
                                                     e._vNode = this.$vNode;
                                                     onStart(e);
                                                 }} 
+                                                ev-click={ignoreSortable}
                                             />
                                             <div class={`${k}-table-title`}>
                                                 <div class={`${k}-table-title-text c-ellipsis`}>
@@ -70,7 +72,7 @@ const { k } = this.config;
                                                     ref={dropdownRef}
                                                 >
                                                     <Icon class={`${k}-icon-down-squared ${k}-table-group`}
-                                                        ev-click={e => e._ignoreSortable = true}
+                                                        ev-click={ignoreSortable}
                                                         hoverable
                                                         color={isEmptyValue(groupValue) ? null : 'primary'}
                                                     />
@@ -114,8 +116,8 @@ const { k } = this.config;
                                                 <div v-if={sortable}
                                                     class={{[`${k}-column-sort`]: true, [`${k}-${type}`]: type}}
                                                 >
-                                                    <Icon class={`${k}-icon-up ${k}-asc`} size="mini" />
-                                                    <Icon class={`${k}-icon-down ${k}-desc`} size="mini" />
+                                                    <Icon class={`${k}-icon-up-bold ${k}-asc`} size="mini" />
+                                                    <Icon class={`${k}-icon-down-bold ${k}-desc`} size="mini" />
                                                 </div>
                                             </div>
                                         </th>

package/components/table/demos/sort.md

@@ -18,6 +18,7 @@ import {Table, TableColumn} from 'kpc';
     sort={this.get('sort')}
     ev-$change:sort={this._onSort}
     rowKey={item => item.name}
+    resizable
 >
     <TableColumn title='姓名' key='name' sortable />
     <TableColumn title='年龄' key='age' sortable />

package/components/table/useSortable.ts

@@ -2,6 +2,8 @@ import {useInstance} from 'intact';
 import {createContext} from '../context';
 import type {Table, TableSortValue} from './table';
 
+type SortEvent = Event & { _ignoreSortable?: boolean };
+
 export const context = createContext();
 
 export function useSortable() {
@@ -10,7 +12,7 @@ export function useSortable() {
     // if the same column has been clicked three times consecutively,
     // then let the third click to reset the sort
     let count = 0;
-    function onChange(key: string, event: Event & {_ignoreSortable?: boolean}) {
+    function onChange(key: string, event: SortEvent) {
         // ignore when click group dropdown menu
         if (event._ignoreSortable) return;
 
@@ -31,5 +33,9 @@ export function useSortable() {
         instance.set('sort', sort);
     }
 
-    return {onChange};
+    return {onChange, ignoreSortable};
+}
+
+export function ignoreSortable(e: SortEvent) {
+    e._ignoreSortable = true;
 }

package/es/components/config/index.spec.js

@@ -1,29 +1,37 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
-import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import { Component } from 'intact';
-import { mount, wait } from '../../test/utils';
+import { mount, unmount, wait } from '../../test/utils';
 import { ConfigProvider } from '.';
 import { Button, ButtonGroup } from '../button';
 describe('Config', function () {
-  // afterEach(async () => {
-  // unmount();
-  // });
-  it('should change classname prefix', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          unmount();
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it('should change classname prefix', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
     var Demo, _mount, instance, element;
-    return _regeneratorRuntime.wrap(function _callee$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+    return _regeneratorRuntime.wrap(function _callee2$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
           Demo = /*#__PURE__*/function (_Component) {
             _inheritsLoose(Demo, _Component);
             function Demo() {
-              var _context;
+              var _context2;
               var _this;
               for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
                 args[_key] = arguments[_key];
               }
-              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context2 = [this]).call(_context2, args)) || this;
               _this.ConfigProvider = ConfigProvider;
               _this.ButtonGroup = ButtonGroup;
               _this.Button = Button;
@@ -40,19 +48,19 @@ describe('Config', function () {
           _mount = mount(Demo), instance = _mount[0], element = _mount[1];
           expect(element.innerHTML).to.matchSnapshot();
           instance.set('k', 'a');
-          _context2.next = 7;
+          _context3.next = 7;
           return wait();
         case 7:
           expect(element.innerHTML).to.matchSnapshot();
           instance.set('k', 'b');
-          _context2.next = 11;
+          _context3.next = 11;
           return wait();
         case 11:
           expect(element.innerHTML).to.matchSnapshot();
         case 12:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
-    }, _callee);
+    }, _callee2);
   })));
 });