@king-design/intact 3.1.1-beta.3 → 3.1.2

package/components/message/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     get transition() { return theme.transition.middle },
@@ -32,9 +33,11 @@ const defaults = {
 let message: typeof defaults;
 setDefault(() => {
     message = deepDefaults(theme, {message: defaults}).message;
+    makeMessagesStyles?.clearCache();
+    makeMessageStyles?.clearCache();
 });
 
-export function makeMessagesStyles(k: string) {
+export const makeMessagesStyles = cache(function makeMessagesStyles(k: string) {
     return css`
         position: fixed;
         top: ${message.top};
@@ -43,9 +46,9 @@ export function makeMessagesStyles(k: string) {
         pointer-events: none;
         z-index: ${theme.maxZIndex + 1};
     `;
-}
+});
 
-export function makeMessageStyles(k: string) {
+export const makeMessageStyles = cache(function makeMessageStyles(k: string) {
     return css`
         text-align: center;
         width: 100%;
@@ -121,5 +124,4 @@ export function makeMessageStyles(k: string) {
             transition: transform ${message.transition};
         }
     `;
-}
-
+});

package/components/pagination/styles.ts

@@ -3,6 +3,7 @@ import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, Sizes}  from '../../styles/utils';
 import '../../styles/global';
 import {button}  from '../button/styles';
+import { cache } from '../utils';
 
 type SizeStyles = {
     fontSize: string,
@@ -55,9 +56,10 @@ const defaults = deepDefaults(
 let pagination: typeof defaults;
 setDefault(() => {
     pagination = deepDefaults(theme, {pagination: defaults}).pagination;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         font-size: ${pagination.fontSize};
         > * {   
@@ -145,4 +147,4 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});

package/components/popover/content.vdt

@@ -1,5 +1,5 @@
 import {Icon} from '../icon';
-import makeStyles from "./styles";
+import {makeStyles} from "./styles";
 
 const { type, title, content } = this.get();
 const { k } = this.config;

package/components/popover/demos/basic.md

@@ -14,6 +14,7 @@ import {Popover, Button} from 'kpc';
         ev-ok={this.ok}
         ev-cancel={this.cancel}
         ref="popover1"
+        size="small"
     >
         <Button>删除</Button>
     </Popover>

package/components/popover/styles.ts

@@ -1,6 +1,7 @@
 import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
+import { cache } from '../utils';
 
 const defaults = {
     width: '320px',
@@ -10,16 +11,20 @@ const defaults = {
         fontSize: '14px',
         lineHeight: '20px',
         fontWeight: 500,
+    },
+    small: {
+        width: '240px',
     }
 };
 
 let popover: typeof defaults;
 setDefault(() => {
     popover = deepDefaults(theme, {popover: defaults}).popover;
+    makeStyles?.clearCache();
 });
 
 
-export default function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         // increase priority
         &.${k}-tooltip-content.${k}-popover {
@@ -41,5 +46,10 @@ export default function makeStyles(k: string) {
             .${k}-tooltip-footer {
                 text-align: right;
             }
+            &.${k}-small {
+                padding: ${popover.padding};
+                width: ${popover.small.width};
+            }
+        }
     `;
-}
+});

package/components/progress/styles.ts

@@ -2,6 +2,7 @@ import {css, keyframes} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 export const types = ['active', 'normal', 'error', 'success', 'warning'] as const;
 
@@ -70,9 +71,10 @@ const defaults = {
 let progress: typeof defaults;
 setDefault(() => {
     progress = deepDefaults(theme, {progress: defaults}).progress;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         position: relative;
         line-height: 1;
@@ -234,6 +236,4 @@ export function makeStyles(k: string) {
             })}
         }
     `
-}
-
-
+});

package/components/radio/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {deepDefaults, darken, palette} from '../../styles/utils';
 import {theme, setDefault} from '../../styles/theme';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     width: '16px',
@@ -34,9 +35,10 @@ const defaults = {
 let radio: typeof defaults;
 setDefault(() => {
     radio = deepDefaults(theme, {radio: defaults}).radio;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
@@ -126,4 +128,4 @@ export function makeStyles(k: string) {
             }
         }            
     `;
-}
+});

package/components/rate/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     color: '#ccc',
@@ -18,9 +19,10 @@ const defaults = {
 let rate: typeof defaults;
 setDefault(() => {
     rate = deepDefaults(theme, {rate: defaults}).rate;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-block;
         .${k}-rate-item {
@@ -65,4 +67,4 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});

package/components/scrollSelect/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes, getRight, getLeft} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 type SizeStyles = {
     padding?: string,
@@ -28,11 +29,12 @@ const defaults = {
 let scrollSelect: typeof defaults;
 setDefault(() => {
     scrollSelect = deepDefaults(theme, {scrollSelect: defaults}).scrollSelect;
+    makeStyles?.clearCache();
 });
 
 export {scrollSelect};
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         text-align: center;
         overflow: hidden;
@@ -91,4 +93,4 @@ export function makeStyles(k: string) {
             pointer-events: none;
         }
     `;
-}
+});

package/components/select/base.ts

@@ -121,9 +121,10 @@ export abstract class BaseSelect<
 
     @bind
     position() {
-        const dropdown = this.dropdownRef.value!;
+        let dropdown = this.dropdownRef.value!;
         if (dropdown.get('value')) {
-            dropdown.position();
+            do { dropdown.position() }
+            while (dropdown = dropdown.showedDropdown!)
         }
     }
 

package/components/select/base.vdt

@@ -2,7 +2,7 @@ import {TransitionGroup, Transition} from 'intact';
 import {Input} from '../input';
 import {Icon} from '../icon';
 import {isNullOrUndefined, isStringOrNumber} from 'intact-shared';
-import makeStyles from './styles';
+import {makeStyles} from './styles';
 import {Dropdown} from '../dropdown';
 import {getRestProps, addStyle} from '../utils';
 import {Wave} from '../wave';

package/components/select/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes, getRight, getLeft} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 type SizeStyles = {
     padding?: string,
@@ -112,9 +113,12 @@ const defaults = deepDefaults(
 let select: typeof defaults;
 setDefault(() => {
     select = deepDefaults(theme, {select: defaults}).select;
+    makeStyles?.clearCache();
+    makeMenuStyles?.clearCache();
+    makeGroupStyles?.clearCache();
 });
 
-export default function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
@@ -275,9 +279,9 @@ export default function makeStyles(k: string) {
             }
         }
     `;
-}
+});
 
-export function makeMenuStyles(k: string) {
+export const makeMenuStyles = cache(function makeMenuStyles(k: string) {
     const searchable = select.searchable;
     
     return css`
@@ -367,13 +371,13 @@ export function makeMenuStyles(k: string) {
             font-size: ${select.multiple.checkmark.fontSize};
         }
     `;
-}
+});
 
-export function makeGroupStyles(k: string) {
+export const makeGroupStyles = cache(function makeGroupStyles(k: string) {
     return css`
         .${k}-select-group-label {
             color: ${select.group.labelColor};
             padding: ${select.group.labelPadding};
         }
     `
-}
+});

package/components/skeleton/styles.ts

@@ -2,6 +2,7 @@ import {deepDefaults}  from '../../styles/utils';
 import { theme, setDefault } from '../../styles/theme';
 import {css, keyframes} from '@emotion/css';
 import '../../styles/global';
+import { cache } from '../utils';
 
 export const kls = (className: string, k: string) => `${k}-skeleton-${className}`;
 
@@ -16,9 +17,11 @@ const defaults = {
 let skeleton: typeof defaults;
 setDefault(() => {
     skeleton = deepDefaults(theme, {skeleton: defaults}).skeleton;
+    makeStyles?.clearCache();
+    makeItemStyles?.clearCache();
 });
 
-export function makeStyles(k: string, size: ItemSize) {
+export const makeStyles = cache(function makeStyles(k: string, size: ItemSize) {
     return css`
         &.${k}-animated {
             .${kls('item', k)} {
@@ -53,7 +56,7 @@ export function makeStyles(k: string, size: ItemSize) {
             height: ${theme[size].height}
         }
     `;
-}
+});
 
 const skeletonLoading = keyframes`
     0% {
@@ -64,7 +67,7 @@ const skeletonLoading = keyframes`
     }
 `;
 
-export function makeItemStyles(k: string) {
+export const makeItemStyles = cache(function makeItemStyles(k: string) {
     const skeletonItem = skeleton.item;
     return css`
         & > div {
@@ -102,4 +105,4 @@ export function makeItemStyles(k: string) {
             background: ${skeletonItem.bgColor};
         }
     `;
-}
+});

package/components/slider/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     get transition() { return theme.transition.middle },
@@ -51,9 +52,10 @@ const defaults = {
 let slider: typeof defaults;
 setDefault(() => {
     slider = deepDefaults(theme, {slider: defaults}).slider;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         position: relative;
         outline: none;
@@ -197,4 +199,4 @@ export function makeStyles(k: string) {
             white-space: nowrap;
         }
     `;
-}
+});

package/components/spin/styles.ts

@@ -2,6 +2,7 @@ import {css, keyframes} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, Sizes} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     width: `40px`,
@@ -16,9 +17,10 @@ const defaults = {
 let spin: typeof defaults;
 setDefault(() => {
     spin = deepDefaults(theme, {spin: defaults}).spin;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     const width = spin.strokeWidth;
     const r = 120 - 60 - (width / 2);
     const c = Math.round(2 * 3.14 * r);
@@ -89,6 +91,4 @@ export function makeStyles(k: string) {
             background: rgba(255, 255, 255, .5);
         }
     `;
-}
-
-
+});

package/components/spinner/styles.ts

@@ -2,7 +2,7 @@ import {css} from '@emotion/css';
 import {deepDefaults, sizes, palette} from '../../styles/utils';
 import {theme, setDefault} from '../../styles/theme';
 import '../../styles/global';
-import spin from '~/components/spin';
+import { cache } from '../utils';
 
 const defaults = {
     get borderRadius() { return theme.borderRadius },
@@ -49,9 +49,10 @@ const defaults = {
 let spinner: typeof defaults;
 setDefault(() => {
     spinner = deepDefaults(theme, {spinner: defaults}).spinner;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-block;
         vertical-align: middle;
@@ -159,4 +160,4 @@ export function makeStyles(k: string) {
             }
         })}
     `;
-}
+});

package/components/split/styles.ts

@@ -2,6 +2,7 @@ import {theme, setDefault} from '../../styles/theme';
 import {css} from '@emotion/css';
 import '../../styles/global';
 import {deepDefaults}  from '../../styles/utils';
+import { cache } from '../utils';
 
 export type Mode = 'horizontal' | 'vertical';
 
@@ -37,9 +38,10 @@ const defaults = {
 let split: typeof defaults;
 setDefault(() => {
     split = deepDefaults(theme, {split: defaults}).split;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: flex;
         height: 100%;
@@ -126,4 +128,4 @@ export function makeStyles(k: string) {
             }
         }
     `;
-}
+});

package/components/steps/index.vdt

@@ -1,6 +1,6 @@
 import {getRestProps, eachChildren} from '../utils';
 import {Step} from './step';
-import {makeStepsStyles} from './styles';
+import {makeStyles} from './styles';
 import {context as StepsContext} from './context';
 
 const {
@@ -16,7 +16,7 @@ const classNameObj = {
     [`${k}-${type}`]: true,
     [`${k}-clickable`]: clickable,
     [`${k}-vertical`]: vertical,
-    [makeStepsStyles(k)]: true,
+    [makeStyles(k)]: true,
 };
 
 let stepIndex = 0;

package/components/steps/styles.ts

@@ -2,6 +2,7 @@ import {css, cx} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, palette}  from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     gap: '10px',
@@ -78,11 +79,12 @@ const defaults = {
 let steps: typeof defaults;
 setDefault(() => {
     steps = deepDefaults(theme, {steps: defaults}).steps;
+    makeStyles?.clearCache();
 });
 
 const stepStatus = ['done', 'active', 'error'] as const; 
 
-export function makeStepsStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: flex;
 
@@ -118,7 +120,7 @@ export function makeStepsStyles(k: string) {
 
         ${makeVerticalStyles(k)};
     `;
-}
+});
 
 function makeDefaultStyles(k: string) {
     const defaults = steps.default;
@@ -383,7 +385,7 @@ function makeSimpleStyles(k: string) {
             }
         }
     `;
-}
+};
 
 function center(flex: 'flex' | 'inline-flex' = 'flex') {
     return css`
@@ -393,7 +395,7 @@ function center(flex: 'flex' | 'inline-flex' = 'flex') {
     `;
 }
 
-export function makeCommonStyles(k: string) {
+function makeCommonStyles(k: string) {
     return css`
         .${k}-step {
             position: relative; 
@@ -427,7 +429,7 @@ export function makeCommonStyles(k: string) {
     `;
 }
 
-export function makeVerticalStyles(k: string) {
+function makeVerticalStyles(k: string) {
     const verticalLine = steps.vertical.line;
 
     return css`

package/components/switch/styles.ts

@@ -2,6 +2,7 @@ import {css} from '@emotion/css';
 import {theme, setDefault} from '../../styles/theme';
 import {deepDefaults, sizes, palette} from '../../styles/utils';
 import '../../styles/global';
+import { cache } from '../utils';
 
 const defaults = {
     get transition() { return theme.transition.middle },
@@ -56,9 +57,10 @@ const defaults = {
 let kswitch: typeof defaults;
 setDefault(() => {
     kswitch = deepDefaults(theme, {switch: defaults}).switch;
+    makeStyles?.clearCache();
 });
 
-export function makeStyles(k: string) {
+export const makeStyles = cache(function makeStyles(k: string) {
     return css`
         display: inline-block;
         vertical-align: middle;
@@ -206,4 +208,4 @@ export function makeStyles(k: string) {
             }
         }
     `;    
-}
+});

package/components/table/column.ts

@@ -22,6 +22,7 @@ export interface TableColumnProps {
     cols?: number
     rows?: number
     prevVNode?: VNodeComponentClass<TableColumn> | null
+    nextVNode?: VNodeComponentClass<TableColumn> | null
 }
 
 export interface TableColumnEvents { }
@@ -58,6 +59,7 @@ const typeDefs: Required<TypeDefs<TableColumnProps>> = {
     cols: null,
     rows: null,
     prevVNode: null,
+    nextVNode: null,
 };
 
 export class TableColumn<T = any> extends Component<TableColumnProps, TableColumnEvents, TableColumnBlocks<T>> {

package/components/table/column.vdt

@@ -19,7 +19,7 @@ const {title, fixed, group, multiple, key, sortable, cols, rows} = this.get();
 const {
     onSelect, isChecked, keywords, filteredGroup,
     onShow, reset, confirm, dropdownRef,
-    localGroupValue, isEmptyValue,
+    localGroupValue, isEmptyValue, checkAll,
 } = this.group;
 const { k } = this.config;
 
@@ -96,14 +96,18 @@ const { k } = this.config;
                                                             </DropdownItem>
                                                         </div>
                                                         <div class={`${k}-table-group-footer`} v-if={multiple}>
+                                                            <Button size="mini"
+                                                                type="link"
+                                                                ev-click={checkAll}
+                                                            >{_$('全选')}</Button>
                                                             <Button size="small"
                                                                 disabled={isEmptyValue(localGroupValue.value)}
                                                                 type="secondary"
                                                                 ev-click={() => reset(onChange)}
-                                                            >重置</Button>
+                                                            >{_$('重置')}</Button>
                                                             <Button type="primary" size="small"
                                                                 ev-click={() => confirm(onChange)}
-                                                            >确定</Button>
+                                                            >{_$('确定')}</Button>
                                                         </div>
                                                     </DropdownMenu>
                                                 </Dropdown>

package/components/table/demos/basic.md

@@ -10,8 +10,8 @@ order: 0
 import {Table, TableColumn} from 'kpc';
 
 <Table data={this.get('data')} resizable>
-    <TableColumn key="a" title="Title 1" />
-    <TableColumn key="b" title="Title 2" />
+    <TableColumn key="a" title="Title 1" minWidth={200}/>
+    <TableColumn key="b" title="Title 2" minWidth={300} />
 </Table>
 ```
 

package/components/table/demos/fixColumn.md

@@ -9,6 +9,8 @@ order: 14
 > 固定列通过`position: sticky`来实现，所以对于非首/尾列，需要指定它们之前或之后的列的固定宽度`width`来
 > 帮助该列来确定固定的位置 
 
+> @since 3.1.2 `width`属性不再是必须的
+
 ```vdt
 import {Table, TableColumn} from 'kpc';
 
@@ -34,7 +36,7 @@ import {Table, TableColumn} from 'kpc';
         <TableColumn key="column1" title="Column1" width="300" />
         <TableColumn key="column2" title="Column2" width="300" />
         <TableColumn key="column3" title="Column3" width="300" />
-        <TableColumn key="column4" title="Column4" width="300" />
+        <TableColumn key="column4" title="Column4" width="300" fixed="right" />
         <TableColumn fixed="right" key="action" title="Action" width="200">
             <b:template args="data">
                 <a>action</a>