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

package/components/switch/styles.ts

@@ -58,7 +58,7 @@ setDefault(() => {
     kswitch = deepDefaults(theme, {switch: defaults}).switch;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         display: inline-block;
         vertical-align: middle;
@@ -73,35 +73,35 @@ export function makeStyles() {
             opacity: 0;
             position: absolute;
         }
-        .k-switch-bar,
-        .k-switch-off {
+        .${k}-switch-bar,
+        .${k}-switch-off {
             box-sizing: border-box;
         }
-        .k-switch-bar {
+        .${k}-switch-bar {
             position: absolute;
             text-align: right;
             overflow: hidden;
         }
-        .k-switch-wrapper {
+        .${k}-switch-wrapper {
             display: inline-block;
             position: relative;
             z-index: 1;
             border-radius: ${kswitch.handleBorderRadius};
         }
-        .k-switch-bar,
-        .k-switch-wrapper {
+        .${k}-switch-bar,
+        .${k}-switch-wrapper {
             height: 100%;
             background: ${kswitch.bgColor};
             transition: all ${kswitch.transition};
         }
         &:hover {
             &,
-            .k-switch-bar,
-            .k-switch-wrapper {
+            .${k}-switch-bar,
+            .${k}-switch-wrapper {
                 background: ${kswitch.hoverBgColor};
             }
         }
-        .k-switch-handle {
+        .${k}-switch-handle {
             border-radius: ${kswitch.handleBorderRadius};
             background: ${kswitch.handleBgColor};
             height: 100%;
@@ -115,8 +115,8 @@ export function makeStyles() {
         }
 
         // text
-        .k-switch-on,
-        .k-switch-off {
+        .${k}-switch-on,
+        .${k}-switch-off {
             position: absolute;
             font-size: ${kswitch.fontSize};
             color: ${kswitch.color};
@@ -124,9 +124,9 @@ export function makeStyles() {
         }
 
         // dragging
-        &.k-dragging {
-            .k-switch-bar,
-            .k-switch-wrapper {
+        &.${k}-dragging {
+            .${k}-switch-bar,
+            .${k}-switch-wrapper {
                 background: ${kswitch.checked.bgColor};
                 transition: background ${kswitch.transition};
             }
@@ -139,30 +139,30 @@ export function makeStyles() {
         ${sizes.map(size => {
             const {width, height, padding} = kswitch[size];
             return css`
-               &.k-${size},
-               &.k-${size} .k-switch-on,
-               &.k-${size} .k-switch-off {
+               &.${k}-${size},
+               &.${k}-${size} .${k}-switch-on,
+               &.${k}-${size} .${k}-switch-off {
                    width: ${width};
                    height: ${height};
                }
-               &.k-${size} {
+               &.${k}-${size} {
                    border-radius: ${height};
-                   .k-switch-bar {
+                   .${k}-switch-bar {
                        width: ${height};
                        border-radius: ${height};
                    }
-                   .k-switch-wrapper {
+                   .${k}-switch-wrapper {
                        padding: ${padding};
                    }
-                   .k-switch-on,
-                   .k-switch-off {
+                   .${k}-switch-on,
+                   .${k}-switch-off {
                        line-height: ${height};
                        left: 0;
                    }
-                   .k-switch-on {
+                   .${k}-switch-on {
                        padding: 0 ${height} 0 calc(${height} / 3);
                    }
-                   .k-switch-off {
+                   .${k}-switch-off {
                        padding: 0 calc(${height} / 3) 0 ${height};
                    }
                }
@@ -170,37 +170,37 @@ export function makeStyles() {
         })}
 
         // checked
-        &.k-checked {
-            .k-switch-bar,
-            .k-switch-wrapper {
+        &.${k}-checked {
+            .${k}-switch-bar,
+            .${k}-switch-wrapper {
                 background: ${kswitch.checked.bgColor};
             }
-            .k-switch-bar {
+            .${k}-switch-bar {
                 width: 100%;
             }
             &:hover {
-                .k-switch-bar,
-                .k-switch-wrapper {
+                .${k}-switch-bar,
+                .${k}-switch-wrapper {
                     background: ${kswitch.checked.hoverBgColor};
                 }
             }
         }
 
         // disabled
-        &.k-disabled {
+        &.${k}-disabled {
             &,
-            .k-switch-handle {
+            .${k}-switch-handle {
                 cursor: not-allowed;
             }
             &,
-            .k-switch-bar,
-            .k-switch-wrapper {
+            .${k}-switch-bar,
+            .${k}-switch-wrapper {
                 background: ${kswitch.disabledBgColor};
             }
-            &.k-checked {
+            &.${k}-checked {
                 &,
-                .k-switch-bar,
-                .k-switch-wrapper {
+                .${k}-switch-bar,
+                .${k}-switch-wrapper {
                     background: ${kswitch.checked.disabledBgColor};
                 }
             }

package/components/table/cell.ts

@@ -3,6 +3,7 @@ import template from './cell.vdt';
 import type {TableColumnProps} from './column';
 import type {TableProps} from './table';
 import type {TableGrid} from './useMerge';
+import { useConfigContext } from '../config';
 
 export interface TableCellProps {
     props: Props<TableColumnProps>
@@ -22,6 +23,8 @@ export interface TableCellProps {
 export class TableCell extends Component<TableCellProps> {
     static template = template;
 
+    private config = useConfigContext();
+
     $update(
         lastVNode: VNodeComponentClass<this>,
         nextVNode: VNodeComponentClass<this>,

package/components/table/cell.vdt

@@ -9,6 +9,7 @@ const {
     data, checkType, indent, grid,
     colspan, rowspan, onClickArrow, hasChildren,
 } = this.get();
+const { k } = this.config;
 
 const blocks = props.$blocks; 
 let children = get(data, props.key);
@@ -33,10 +34,10 @@ if (columnIndex === 0 && indent) {
 >
     <Button v-if={columnIndex === 0 && hasChildren}
         type="none" icon circle size="mini"
-        class="k-table-arrow"
+        class={`${k}-table-arrow`}
         ev-click={onClickArrow}
     >
-        <Icon class="k-icon-right" size="small" />
+        <Icon class={`${k}-icon-right`} size="small" />
     </Button>
     {children}
 </td>

package/components/table/column.ts

@@ -1,6 +1,7 @@
 import {Component, TypeDefs, Children, VNodeComponentClass, VNode, createRef} from 'intact';
 import template from './column.vdt';
 import {useGroup} from './useGroup';
+import { useConfigContext } from '../config';
 
 export interface TableColumnProps {
     key: string
@@ -66,4 +67,5 @@ export class TableColumn<T = any> extends Component<TableColumnProps, TableColum
     public elementRef = createRef<HTMLElement>();
 
     private group = useGroup();
+    private config = useConfigContext();
 }

package/components/table/column.vdt

@@ -21,6 +21,7 @@ const {
     onShow, reset, confirm, dropdownRef,
     localGroupValue, isEmptyValue,
 } = this.group;
+const { k } = this.config;
 
 <TableContext.Consumer>
     {checkType => {
@@ -34,7 +35,7 @@ const {
                                     {(offsetMap) => {
                                         const {className, style} = getClassAndStyleForFixed(this.get(), offsetMap[key], checkType);
                                         const classNameObj = {
-                                            'k-column-sortable': sortable,
+                                            [`${k}-column-sortable`]: sortable,
                                             [className]: className,
                                         }
 
@@ -51,14 +52,14 @@ const {
                                             ref={this.elementRef}
                                         >
                                             <div v-if={resizable && this.$vNode.props.prevVNode}
-                                                class="k-table-resize"
+                                                class={`${k}-table-resize`}
                                                 ev-mousedown={e => {
                                                     e._vNode = this.$vNode;
                                                     onStart(e);
                                                 }} 
                                             />
-                                            <div class="k-table-title">
-                                                <div class="k-table-title-text c-ellipsis">
+                                            <div class={`${k}-table-title`}>
+                                                <div class={`${k}-table-title-text c-ellipsis`}>
                                                     <b:title>{title}</b:title>
                                                 </div>
                                                 <Dropdown v-if={group}
@@ -68,33 +69,33 @@ const {
                                                     ev-show={() => onShow(groupValue)}
                                                     ref={dropdownRef}
                                                 >
-                                                    <Icon class="k-icon-down-squared k-table-group"
+                                                    <Icon class={`${k}-icon-down-squared ${k}-table-group`}
                                                         ev-click={e => e._ignoreSortable = true}
                                                         hoverable
                                                         color={isEmptyValue(groupValue) ? null : 'primary'}
                                                     />
-                                                    <DropdownMenu class={{"k-table-group-dropdown": true, [makeGroupMenuStyles()]: true}}>
-                                                        <div class="k-table-group-header">
+                                                    <DropdownMenu class={{[`${k}-table-group-dropdown`]: true, [makeGroupMenuStyles(k)]: true}}>
+                                                        <div class={`${k}-table-group-header`}>
                                                             <Input size="small" fluid
                                                                 placeholder={_$('请输入关键字')}
                                                                 value={keywords.value}
                                                                 ev-$change:value={keywords.set}
                                                                 clearable
                                                             >
-                                                                <b:suffix><Icon class="k-icon-search" /></b:suffix>
+                                                                <b:suffix><Icon class={`${k}-icon-search`} /></b:suffix>
                                                             </Input>
                                                         </div>
-                                                        <div class="k-table-group-body">
+                                                        <div class={`${k}-table-group-body`}>
                                                             <DropdownItem v-for={filteredGroup.value}
                                                                 ev-select={() => onSelect($value.value, onChange)}
                                                                 hideOnSelect={!multiple}
-                                                                class={{'k-active': (checked = isChecked($value.value))}}
+                                                                class={{[`${k}-active`]: (checked = isChecked($value.value))}}
                                                             >
                                                                 <Checkbox v-if={multiple} value={checked}>{$value.label}</Checkbox>
                                                                 <span v-else>{$value.label}</span>
                                                             </DropdownItem>
                                                         </div>
-                                                        <div class="k-table-group-footer" v-if={multiple}>
+                                                        <div class={`${k}-table-group-footer`} v-if={multiple}>
                                                             <Button size="small"
                                                                 disabled={isEmptyValue(localGroupValue.value)}
                                                                 type="secondary"
@@ -107,10 +108,10 @@ const {
                                                     </DropdownMenu>
                                                 </Dropdown>
                                                 <div v-if={sortable}
-                                                    class={{'k-column-sort': true, [`k-${type}`]: type}}
+                                                    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 ${k}-asc`} size="mini" />
+                                                    <Icon class={`${k}-icon-down ${k}-desc`} size="mini" />
                                                 </div>
                                             </div>
                                         </th>

package/components/table/row.ts

@@ -13,6 +13,7 @@ import type {TableProps, TableRowKey} from './table';
 import {bind} from '../utils';
 import type {TableGrid} from './useMerge';
 import { isEqualObject } from '../utils';
+import { useConfigContext } from '../config';
 
 export interface TableRowProps {
     key: TableRowKey
@@ -50,6 +51,8 @@ type DragCallback = (e: MouseEvent, tableRow: TableRow) => void
 export class TableRow extends Component<TableRowProps> {
     static template = template;
 
+    private config = useConfigContext();
+
     $update(
         lastVNode: VNodeComponentClass<this>,
         nextVNode: VNodeComponentClass<this>,

package/components/table/row.vdt

@@ -13,13 +13,15 @@ const {
     hasChildren, indent, key, offsetMap,
     draggable, draggingKey, animation,
 } = this.get();
+const { k } = this.config;
+
 const classNameObj = {
-    'k-disabled': disabled,
-    'k-checked': checked,
-    'k-selected': selected,
-    /* 'k-hidden': hidden, */
-    'k-spreaded': spreaded,
-    'k-dragging': draggingKey === key,
+    [`${k}-disabled`]: disabled,
+    [`${k}-checked`]: checked,
+    [`${k}-selected`]: selected,
+    /* [`${k}-hidden`]: hidden, */
+    [`${k}-spreaded`]: spreaded,
+    [`${k}-dragging`]: draggingKey === key,
     [className]: className,
 };
 
@@ -37,7 +39,7 @@ const pushCheckTypeVNode = (children) => {
         <td key="$checktype"
             {...getClassAndStyleForFixed({
                 fixed: hasFixedLeft ? 'left' : false,
-                className: 'k-table-check'
+                className: [`${k}-table-check`]
             }, 0)}
             {...spans}
         >{children}</td>

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,54 +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`
         min-width: ${table.group.menuMinWidth} !important;
-        .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-body {
+        .${k}-table-group-body {
             max-height: ${table.group.menuMaxHeight};
             overflow: auto;
         }
-        .k-table-group-footer {
+        .${k}-table-group-footer {
             text-align: right;
             border-top: ${table.group.headerBorder};
             padding: 8px;
-            .k-btn {
+            .${k}-btn {
                 margin-left: 8px;
             }
         }