@king-design/intact 3.0.0 → 3.1.0-beta.0

package/components/table/styles.ts

@@ -73,13 +73,13 @@ setDefault(() => {
     table = deepDefaults(theme, {table: defaults}).table;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         font-size: ${table.fontSize};
         color: ${table.color};
         position: relative;
         z-index: 0;
-        .k-table-wrapper {
+        .${k}-table-wrapper {
             border-bottom: ${table.border};
             overflow: auto;
             border-radius: ${table.borderRadius};
@@ -129,13 +129,13 @@ export function makeStyles() {
                 display: none;
             }
         }
-        .k-table-title {
+        .${k}-table-title {
             display: inline-flex;
             align-items: center;
             max-width: 100%;
             color: ${table.thead.color};
         }
-        .k-table-title-text {
+        .${k}-table-title-text {
             flex: 1;
             display: inline-flex;
             line-height: 1.4;
@@ -157,14 +157,14 @@ export function makeStyles() {
             padding: ${table.tbody.padding};
             border-bottom: ${table.border};
             background: ${table.bgColor};
-            word-wrap: break-word;
+            word-wrap: bre.${k}-word;
             // overflow: hidden;
             // text-overflow: ellipsis;
         }
 
         // fixed
-        .k-fixed-left,
-        .k-fixed-right {
+        .${k}-fixed-left,
+        .${k}-fixed-right {
             position: sticky;
             z-index: 1;
             &:after {
@@ -178,53 +178,53 @@ export function makeStyles() {
                 pointer-events: none;
             }
         }
-        .k-fixed-left:after {
+        .${k}-fixed-left:after {
             right: -11px;
         }
-        .k-fixed-right:after {
+        .${k}-fixed-right:after {
             left: -11px;
         }
-        &.k-scroll-left .k-fixed-right:after {
+        &.${k}-scroll-left .${k}-fixed-right:after {
             box-shadow: ${table.fixRightShadow};
         }
-        &.k-scroll-right .k-fixed-left:after {
+        &.${k}-scroll-right .${k}-fixed-left:after {
             box-shadow: ${table.fixLeftShadow};
         }
-        &.k-scroll-middle {
-            .k-fixed-left:after {
+        &.${k}-scroll-middle {
+            .${k}-fixed-left:after {
                 box-shadow: ${table.fixLeftShadow};
             }
-            .k-fixed-right:after {
+            .${k}-fixed-right:after {
                 box-shadow: ${table.fixRightShadow};
             }
         }
-        .k-fixed-right + .k-fixed-right:after {
+        .${k}-fixed-right + .${k}-fixed-right:after {
             display: none;
         }
 
         // sticky header
-        .k-table-affix-header {
+        .${k}-table-affix-header {
             position: sticky;
             top: 0;
             left: 0;
-            .k-affix-wrapper {
+            .${k}-affix-wrapper {
                 overflow: hidden;
             }
-            &.k-fixed {
+            &.${k}-fixed {
                 position: relative;
             }
         }
 
         // type
-        &.k-border,
-        &.k-grid {
-            .k-table-wrapper {
+        &.${k}-border,
+        &.${k}-grid {
+            .${k}-table-wrapper {
                 border-top: ${table.border};
                 border-left: ${table.border};
                 border-right: ${table.border};
             }
         }
-        &.k-grid {
+        &.${k}-grid {
             td:not(:last-of-type),
             th:not(:last-of-type) {
                 border-right: ${table.border};
@@ -235,94 +235,94 @@ export function makeStyles() {
         }
 
         // stripe
-        &.k-stripe {
+        &.${k}-stripe {
             tr:nth-child(even):not(:hover) td {
                 background: ${table.stripeBgColor};
             }
         }
 
         // group
-        .k-table-group {
+        .${k}-table-group {
             margin-left: ${table.group.gap};
         } 
 
         // force checkbox / radio vertical align middle
-        .k-table-check {
-            .k-checkbox,
-            .k-radio {
+        .${k}-table-check {
+            .${k}-checkbox,
+            .${k}-radio {
                 position: relative;
                 top: -1px;
             }
         }
 
         // sortable
-        .k-column-sortable {
+        .${k}-column-sortable {
             cursor: pointer;
         }
-        .k-column-sort {
-            .k-icon {
+        .${k}-column-sort {
+            .${k}-icon {
                 display: block;
                 height: ${table.sort.iconHeight};
                 line-height: ${table.sort.iconHeight};
                 margin: 0 0 1px ${table.sort.gap};
             }
-            &.k-desc .k-icon.k-desc,
-            &.k-asc .k-icon.k-asc {
+            &.${k}-desc .${k}-icon.${k}-desc,
+            &.${k}-asc .${k}-icon.${k}-asc {
                 color: ${table.sort.enabledColor};
             }
         }
 
         // loading
-        .k-table-spin.k-overlay {
+        .${k}-table-spin.${k}-overlay {
             z-index: 2;
         }
 
         // empty
-        .k-table-empty {
+        .${k}-table-empty {
             text-align: center;
         }
 
         // expand
-        tr.k-expand {
+        tr.${k}-expand {
             td {
                 padding: 0;
                 background: #fdfcff;
             }
         }
-        &.k-with-expand {
-            tr:not(.k-expand) {
+        &.${k}-with-expand {
+            tr:not(.${k}-expand) {
                 td {
                     border-bottom: none;
                 }
             }
         }
-        .k-table-expand {
+        .${k}-table-expand {
             border-top: ${table.border};
             box-sizing: content-box;
         }
 
         // select
-        tbody tr.k-selected td {
+        tbody tr.${k}-selected td {
             background: ${table.selectedBgColor};
         }
 
         // tree
-        // tr.k-hidden {
+        // tr.${k}-hidden {
             // display: none;
         // }
-        .k-table-arrow {
+        .${k}-table-arrow {
             margin-right: ${table.arrow.gap};
             transition: transform ${table.transition};
             position: relative;
             top: -1px;
         }
-        tr.k-spreaded {
-            .k-table-arrow {
+        tr.${k}-spreaded {
+            .${k}-table-arrow {
                 transform: rotate(90deg);
             }
         }
 
-        .k-table-resize {
+        .${k}-table-resize {
             height: 100%;
             width: ${table.resizeWidth};
             position: absolute;
@@ -332,52 +332,54 @@ export function makeStyles() {
         }
 
         // draggable
-        tr.k-dragging {
+        tr.${k}-dragging {
             opacity: ${table.draggingOpacity};
         }
 
         // sticky scrollbar
-        .k-table-scrollbar {
+        .${k}-table-scrollbar {
             overflow-x: auto;
             overflow-y: hidden;
         }
-        .k-table-scrollbar-inner {
+        .${k}-table-scrollbar-inner {
             height: 1px;
         }
 
         // align
         ${aligns.map(type => {
             return css`
-                .k-align-${type} {
+                .${k}-align-${type} {
                     text-align: ${type};
                 }
             `;
         })}
 
         // pagination
-        > .k-pagination {
+        > .${k}-pagination {
             margin: 16px 0;
         }
     `;
 }
 
-export function makeGroupMenuStyles() {
+export function makeGroupMenuStyles(k: string) {
     return css`
-        max-height: ${table.group.menuMaxHeight};
         min-width: ${table.group.menuMinWidth} !important;
-        overflow: auto;
-        .k-dropdown-item.k-active {
+        .${k}-dropdown-item.${k}-active {
             color: ${table.group.activeColor};
         }
-        .k-table-group-header {
+        .${k}-table-group-header {
             padding: ${table.group.headerPadding};
             border-bottom: ${table.group.headerBorder};
         }
-        .k-table-group-footer {
+        .${k}-table-group-body {
+            max-height: ${table.group.menuMaxHeight};
+            overflow: auto;
+        }
+        .${k}-table-group-footer {
             text-align: right;
             border-top: ${table.group.headerBorder};
             padding: 8px;
-            .k-btn {
+            .${k}-btn {
                 margin-left: 8px;
             }
         }

package/components/table/table.ts

@@ -22,6 +22,7 @@ import {useScroll} from './useScroll';
 import type {Events} from '../types';
 import type {PaginationProps, PaginationChangeData} from '../pagination';
 import { usePagination } from './usePagination';
+import { useConfigContext } from '../config';
 
 export interface TableProps<
     T = any,
@@ -74,7 +75,7 @@ export interface TableEvents<T = any, K extends TableRowKey = number> {
     uncheckRow: [T, number, K]
     checkAll: []
     uncheckAll: []
-    changePage: [PaginationChangeData]
+    page: [PaginationChangeData]
 }
 
 export interface TableBlocks<T = unknown> {
@@ -151,7 +152,7 @@ const events: Events<TableEvents> = {
     uncheckRow: true,
     checkAll: true,
     uncheckAll: true,
-    changePage: true,
+    page: true,
 };
 
 export class Table<
@@ -215,6 +216,7 @@ export class Table<
         this.width.tableRef,
         this.fixedColumns.setScrollPosition,
     );
+    private config = useConfigContext();
 
     public checkAll() {
         this.checked.toggleCheckedAll(true);

package/components/table/table.vdt

@@ -32,16 +32,17 @@ const {columns, cols, maxRows, maxCols} = this.columns.getData();
 const {scrollPosition, hasFixed, getHasFixedLeft, getOffsetMap} = this.fixedColumns;
 const {scrollRef} = this.scroll;
 const {stickHeader, excludeStickHeader, elementRef, headRef} = this.stickyHeader;
+const { k } = this.config;
 const classNameObj = {
-    'k-table': true,
-    'k-fix-header': fixHeader,
-    [`k-scroll-${scrollPosition.value}`]: scrollPosition.value,
-    'k-fix-columns': hasFixed.value,
-    [`k-${type}`]: type && type !== 'default',
-    'k-stripe': stripe,
-    'k-with-expand': $blocks.expand,
+    [`${k}-table`]: true,
+    [`${k}-fix-header`]: fixHeader,
+    [`${k}-scroll-${scrollPosition.value}`]: scrollPosition.value,
+    [`${k}-fix-columns`]: hasFixed.value,
+    [`${k}-${type}`]: type && type !== 'default',
+    [`${k}-stripe`]: stripe,
+    [`${k}-with-expand`]: $blocks.expand,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 const style = isStringOrNumber(fixHeader) ? 
     {maxHeight: `${fixHeader}px`} :
@@ -119,7 +120,7 @@ const tbody = (
     <tbody>
         {!hasData ? 
             <tr key="table-empty">
-                <td colspan={colCount} class="k-table-empty">
+                <td colspan={colCount} class={`${k}-table-empty`}>
                     <b:empty>{_$('/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~')}</b:empty>
                 </td>
             </tr> :
@@ -181,12 +182,12 @@ const tbody = (
                     if ($blocks.expand) {
                         const expanded = isExpanded(key);
                         rows.push(
-                            <tr class={{"k-expand": true, 'k-expanded': expanded}}
+                            <tr class={{[`${k}-expand`]: true, [`${k}-expanded`]: expanded}}
                                 key={`${key}.$expand`}
                             >
                                 <td colspan={colCount}>
                                     <Transition {...expandAnimationCallbacks}>
-                                        <div v-if={expanded} class="k-table-expand">
+                                        <div v-if={expanded} class={`${k}-table-expand`}>
                                             <b:expand params={[value, index]} />
                                         </div>
                                     </Transition>
@@ -223,11 +224,11 @@ const {
 } = this.pagination;
 
 <div class={classNameObj} ref={elementRef}>
-    <div class="k-table-wrapper" style={style} ref={scrollRef}>
+    <div class={`${k}-table-wrapper`} style={style} ref={scrollRef}>
         <Affix v-if={!isNull(stickHeader.value)}
             top={stickHeader.value}
             exclude={excludeStickHeader}
-            class="k-table-affix-header"
+            class={`${k}-table-affix-header`}
         >
             <table ref={headRef} style={{width: tableWidthPx}}>
                 <template>{colgroup}</template>
@@ -250,15 +251,15 @@ const {
         ev-change={onPageChange}
     />
     <Transition name="k-fade">
-        <Spin v-if={loading} overlay size="small" class="k-table-spin" />
+        <Spin v-if={loading} overlay size="small" class={`${k}-table-spin`} />
     </Transition>
     <Affix v-if={!isNull(stickScrollbar.value)}
         bottom={stickScrollbar.value}
         shouldFix={shouldStickScrollbar}
         style={stickScrollbarStyle.value}
     >
-        <div class="k-table-scrollbar" ref={scrollbarRef} ev-scroll={onScrollbarScroll}>
-            <div class="k-table-scrollbar-inner" style={{width: tableActualWidth.value}}></div>
+        <div class={`${k}-table-scrollbar`} ref={scrollbarRef} ev-scroll={onScrollbarScroll}>
+            <div class={`${k}-table-scrollbar-inner`} style={{width: tableActualWidth.value}}></div>
         </div>
     </Affix>
 </div>

package/components/table/usePagination.ts

@@ -64,7 +64,7 @@ export function usePagination() {
             });
         }
 
-        instance.trigger('changePage', data);
+        instance.trigger('page', data);
     }
 
     return { data, value, limit, onChange, paginationRef };

package/components/tabs/index.ts

@@ -6,6 +6,8 @@ import {TabProps} from './tab';
 import {useActiveBar} from './useActiveBar';
 import {useScroll} from './useScroll';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
+
 export * from './tab';
 
 export interface TabsProps<T = any> {
@@ -47,6 +49,7 @@ export class Tabs<T = any> extends Component<TabsProps<T>, TabsEvents<T>> {
 
     private activeBar = useActiveBar();
     private scroll = useScroll();
+    public config = useConfigContext();
 
     init() {
         provide(TABS, this);

package/components/tabs/index.vdt

@@ -8,42 +8,44 @@ const {
     isScroll, offset, enablePrev, enableNext,
     prev, next, scrollRef, wrapperRef
 } = this.scroll;
+const { k } = this.config;
+
 const classNameObj = {
-    'k-tabs': true,
-    [`k-size-${size}`]: size,
-    'k-vertical': vertical,
-    [`k-type-${type}`]: true,
-    [`k-is-scroll`]: isScroll.value,
+    [`${k}-tabs`]: true,
+    [`${k}-size-${size}`]: size,
+    [`${k}-vertical`]: vertical,
+    [`${k}-type-${type}`]: true,
+    [`${k}-is-scroll`]: isScroll.value,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 <div class={classNameObj} {...getRestProps(this)}>
-    <Button class="k-tabs-prev" type="none" icon
+    <Button class={`${k}-tabs-prev`} type="none" icon
         v-if={isScroll.value}
         key="prev"
         size={size}
         disabled={!enablePrev.value}
         ev-click={prev}
     >
-        <Icon class={vertical ? "k-icon-up" : "k-icon-left"} />
+        <Icon class={vertical ? `${k}-icon-up` : `${k}-icon-left`} />
     </Button>
-    <div class="k-tabs-scroll c-clearfix" ref={scrollRef}>
-        <div class="k-tabs-wrapper"
+    <div class={`${k}-tabs-scroll c-clearfix`} ref={scrollRef}>
+        <div class={`${k}-tabs-wrapper`}
             ref={wrapperRef}
             style={{transform: vertical ? `translateY(${offset.value}px)` : `translateX(${offset.value}px)`}}
         >
             {children}
-            <div class="k-tabs-active-bar" style={this.activeBar.value}></div>
+            <div class={`${k}-tabs-active-bar`} style={this.activeBar.value}></div>
         </div>
     </div>
-    <Button class="k-tabs-next" type="none" icon
+    <Button class={`${k}-tabs-next`} type="none" icon
         v-if={isScroll.value}
         key="next"
         size={size}
         disabled={!enableNext.value}
         ev-click={next}
     >
-        <Icon class={vertical ? "k-icon-down" : "k-icon-right"} />
+        <Icon class={vertical ? `${k}-icon-down` : `${k}-icon-right`} />
     </Button>
 </div>