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

package/components/transfer/styles.ts

@@ -43,15 +43,15 @@ setDefault(() => {
     transfer = deepDefaults(theme, {transfer: defaults}).transfer;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         font-size: ${transfer.fontSize};
-        .k-transfer-panel,
-        .k-transfer-arrows {
+        .${k}-transfer-panel,
+        .${k}-transfer-arrows {
             display: inline-block;
             vertical-align: middle;
         }
-        .k-transfer-panel {
+        .${k}-transfer-panel {
             width: ${transfer.panel.width};
             border: ${transfer.panel.border};
             border-radius: ${transfer.panel.borderRadius}; 
@@ -61,37 +61,37 @@ export function makeStyles() {
             overflow: auto;
         }
 
-        .k-transfer-title {
+        .${k}-transfer-title {
             line-height: ${transfer.title.lineHeight};
             background: ${transfer.title.bgColor};
             padding: ${transfer.title.padding};
-            .k-checkbox {
+            .${k}-checkbox {
                 color: ${transfer.title.color}; 
                 font-size: ${transfer.title.fontSize};
             }
         }
-        .k-transfer-count {
+        .${k}-transfer-count {
             float: right;
             margin-left: ${transfer.title.countGap};
         }
-        .k-transfer-list {
+        .${k}-transfer-list {
             overflow: auto;
             position: relative;
             flex: 1;
         }
-        .k-transfer-item {
+        .${k}-transfer-item {
             color: ${transfer.item.color};
             background: ${transfer.item.bgColor};
             user-select: none;
             width: 100%;
-            &:not(.k-disabled):hover {
+            &:not(.${k}-disabled):hover {
                 background: ${transfer.item.hoverBgColor};
                 color: ${transfer.item.hoverColor};
                 p {
                     color: ${transfer.item.hoverColor};
                 }
             }
-            .k-checkbox {
+            .${k}-checkbox {
                 padding: ${transfer.item.padding};
                 display: flex;
             }
@@ -99,19 +99,19 @@ export function makeStyles() {
                 margin: 0;
                 color: ${transfer.item.descColor};
             }
-            &.k-disabled {
+            &.${k}-disabled {
                 p {
                     color: ${theme.color.disabled};
                 }
             }
         }
-        .k-input {
+        .${k}-input {
             width: auto;
             margin: ${transfer.searchGap};
         }
 
-        .k-transfer-arrows {
-            .k-btn {
+        .${k}-transfer-arrows {
+            .${k}-btn {
                 display: flex;
                 margin: ${transfer.arrow.gap};
             }

package/components/tree/index.ts

@@ -9,6 +9,7 @@ import {useFilter} from './useFilter';
 import {useDraggable, Mode} from './useDraggable';
 import {useTransitionEvent} from './useTransitionEvent';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 export type {
     Node as TreeNode,
@@ -98,6 +99,7 @@ export class Tree<K extends Key = Key> extends Component<TreeProps<K>, TreeEvent
     private filter = useFilter(this.nodes.getNodes, this.expanded.get);
     private draggable = useDraggable();
     private transition = useTransitionEvent();
+    private config = useConfigContext();
 
     public getCheckedData(leafOnly: boolean = false) {
         return this.checked.getCheckedData(leafOnly);

package/components/tree/index.vdt

@@ -12,6 +12,8 @@ const toggleChecked = this.checked.toggle;
 const selectedKeys = this.selected.get();
 const toggleSelected = this.selected.toggle;
 const {onDragStart, onDragOver, onDragEnd, draggingKey, overKey, mode} = this.draggable;
+const { k } = this.config;
+
 const treeNodes = (nodes) => {
     return nodes.map((node, index) => {
         if (!node.filter) return; 
@@ -22,26 +24,26 @@ const treeNodes = (nodes) => {
         const disabled = data.disabled;
         const selected = selectable && selectedKeys.has(key);
         const classNameObj = {
-            'k-tree-node': true,
-            'k-expanded': expanded,
-            'k-disabled': disabled,
-            'k-selected': selected,
-            'k-dragging': key === draggingKey.value,
+            [`${k}-tree-node`]: true,
+            [`${k}-expanded`]: expanded,
+            [`${k}-disabled`]: disabled,
+            [`${k}-selected`]: selected,
+            [`${k}-dragging`]: key === draggingKey.value,
         };
         const labelClassNameObj = {
-            'k-tree-label': true,
-            'k-tree-leaf': !node.children,
+            [`${k}-tree-label`]: true,
+            [`${k}-tree-leaf`]: !node.children,
         };
         if (key === overKey.value) {
             switch (mode.value) {
                 case Mode.Before:
-                    labelClassNameObj['k-before'] = true;
+                    labelClassNameObj[[`${k}-before`]] = true;
                     break;
                 case Mode.After:
-                    labelClassNameObj['k-after'] = true;
+                    labelClassNameObj[[`${k}-after`]] = true;
                     break;
                 case Mode.Inner:
-                    labelClassNameObj['k-inner'] = true;
+                    labelClassNameObj[[`${k}-inner`]] = true;
                     break;
             }
         }
@@ -54,7 +56,7 @@ const treeNodes = (nodes) => {
                 ev-dragend={draggable && onDragEnd}
             >
                 <div class={labelClassNameObj}>
-                    <Icon class="k-tree-icon ion-android-arrow-dropdown" 
+                    <Icon class={`${k}-tree-icon ion-android-arrow-dropdown`} 
                         v-if={node.children && node.loaded !== false}
                         hoverable
                         ev-click={(e) => {
@@ -63,7 +65,7 @@ const treeNodes = (nodes) => {
                             toggleExpanded(node);
                         }}
                     />
-                    <Icon class="k-tree-icon ion-load-c" rotate
+                    <Icon class={`${k}-tree-icon ion-load-c`} rotate
                         v-if={node.loaded === false}
                     />
                     <Checkbox v-if={checkbox} 
@@ -71,9 +73,9 @@ const treeNodes = (nodes) => {
                         disabled={disabled}
                         indeterminate={node.indeterminate}
                         ev-$change:value={() => toggleChecked(node)}
-                        class="k-tree-checkbox"
+                        class={`${k}-tree-checkbox`}
                     />
-                    <div class="k-tree-text c-ellipsis"
+                    <div class={`${k}-tree-text c-ellipsis`}
                         ev-click={linkEvent(node, this.onClick)}
                     >
                         <b:label params={[data, node, index]}>
@@ -82,7 +84,7 @@ const treeNodes = (nodes) => {
                     </div>
                 </div>
                 <Transition {...this.transition}>
-                    <div class="k-tree" v-if={expanded && node.children}>
+                    <div class={`${k}-tree`} v-if={expanded && node.children}>
                         <TransitionGroup {...this.transition}>
                             {treeNodes(node.children)}
                         </TransitionGroup>
@@ -94,11 +96,11 @@ const treeNodes = (nodes) => {
 };
 
 const classNameObj = {
-    'k-tree': true,
-    'k-line': showLine,
-    'k-selectable': selectable,
+    [`${k}-tree`]: true,
+    [`${k}-line`]: showLine,
+    [`${k}-selectable`]: selectable,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 <div class={classNameObj} {...getRestProps(this)}>

package/components/tree/styles.ts

@@ -39,18 +39,18 @@ setDefault(() => {
     tree = deepDefaults(theme, {tree: defaults}).tree;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         font-size: ${tree.fontSize};
         line-height: ${tree.lineHeight};
         position: relative;
-        .k-tree-label {
+        .${k}-tree-label {
             position: relative;
             display: flex;
             align-items: center;
             // dragging
-            &.k-before,
-            &.k-after {
+            &.${k}-before,
+            &.${k}-after {
                 &:before {
                     position: absolute;
                     content: '';
@@ -60,31 +60,31 @@ export function makeStyles() {
                     left: 0;
                 }
             }
-            &.k-before:before {
+            &.${k}-before:before {
                 top: 0;
             }
-            &.k-after:before {
+            &.${k}-after:before {
                 bottom: 0;
             }
-            &.k-inner {
+            &.${k}-inner {
                 background: ${tree.selected.bgColor};
             }
         }
-        .k-tree-icon,
-        .k-tree-text {
+        .${k}-tree-icon,
+        .${k}-tree-text {
             cursor: pointer; 
         }
-        .k-tree-text {
+        .${k}-tree-text {
             padding: ${tree.textPadding};
             border-radius: ${tree.borderRadius};
             flex: 1;
         }
 
-        .k-tree-leaf {
+        .${k}-tree-leaf {
             padding-left: ${tree.leafIndent};
         }
 
-        .k-tree-icon {
+        .${k}-tree-icon {
             width: ${tree.iconWidth};
             text-align: center;
             color: ${tree.iconColor};
@@ -94,58 +94,58 @@ export function makeStyles() {
             }
         }
 
-        .k-tree-checkbox {
+        .${k}-tree-checkbox {
             margin-right: ${tree.checkboxGap};
         }
 
         // selectable
-        &.k-selectable {
-            .k-tree-node {
-                &.k-selected {
-                    > .k-tree-label .k-tree-text {
+        &.${k}-selectable {
+            .${k}-tree-node {
+                &.${k}-selected {
+                    > .${k}-tree-label .${k}-tree-text {
                         background: ${tree.selected.bgColor} !important;
                     }
                 }
             }
         }
 
-        .k-tree-node {
+        .${k}-tree-node {
             background: #fff;
-            &:not(.k-disabled) {
-                > .k-tree-label .k-tree-text:hover {
+            &:not(.${k}-disabled) {
+                > .${k}-tree-label .${k}-tree-text:hover {
                     background: ${theme.color.bg};
                 }
             }
-            &.k-expanded {
-                > .k-tree-label .k-tree-icon:before {
+            &.${k}-expanded {
+                > .${k}-tree-label .${k}-tree-icon:before {
                     transform: rotate(0);
                 }
             }
-            &.k-disabled {
-                > .k-tree-label {
+            &.${k}-disabled {
+                > .${k}-tree-label {
                     color: ${tree.disabledColor};
-                    .k-tree-text {
+                    .${k}-tree-text {
                         cursor: not-allowed;
                     }
                 }
             }
 
-            &.k-dragging {
+            &.${k}-dragging {
                 background: ${tree.dragging.bgColor};
                 // opacity: 0.4;
-                .k-tree-node {
+                .${k}-tree-node {
                     background: ${tree.dragging.bgColor};
                 }
             }
         }
 
-        .k-tree {
+        .${k}-tree {
             margin-left: ${tree.marginLeft};
             padding-left: ${tree.paddingLeft};
         }
 
         // showLine
-        &.k-line .k-tree {
+        &.${k}-line .${k}-tree {
             border-left: ${tree.line} 
         }
     `;

package/components/treeSelect/index.vdt

@@ -13,11 +13,13 @@ const {
     onChangeCheckedKeys, onChangeSelectedKeys,
 } = this.value;
 
+const { k } = this.config;
+
 <t:super>
     <b:base-menu>
         <DropdownMenu class={{
-            'k-tree-select-menu': true,
-            [makeStyles()]: true,
+            [`${k}-tree-select-menu`]: true,
+            [makeStyles(k)]: true,
         }}>
             <Tree 
                 ref={treeRef}

package/components/treeSelect/styles.ts

@@ -14,7 +14,7 @@ setDefault(() => {
     treeSelect = deepDefaults(theme, {treeSelect: defaults}).treeSelect;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         min-width: auto;
         max-height: ${treeSelect.maxHeight};

package/components/upload/index.ts

@@ -8,6 +8,7 @@ import {useDrag} from './useDrag';
 import {useShowImage} from './useShowImage';
 import type {RequestError} from './ajaxUploader';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 export type {RequestError, UploadFileStatus};
 
@@ -103,6 +104,7 @@ export class Upload extends Component<UploadProps, UploadEvents, UploadBlocks> {
     private files = useFiles(this.accept.isValidType, this.upload);
     private drag = useDrag(this.files.addFiles);
     private showImage = useShowImage();
+    private config = useConfigContext();
 
     public submit() {
         this.get('files')!.forEach(file => {

package/components/upload/index.vdt

@@ -14,13 +14,15 @@ const {
 } = this.get();
 
 const drag = this.drag;
+const { k } = this.config;
+
 const classNameObj = {
-    'k-upload': true,
+    [`${k}-upload`]: true,
     [className]: className,
-    'k-drag': type === 'drag', 
-    'k-dragover': drag.dragOver.value, 
-    'k-gallery': type === 'gallery',
-    [makeStyles()]: true,
+    [`${k}-drag`]: type === 'drag', 
+    [`${k}-dragover`]: drag.dragOver.value, 
+    [`${k}-gallery`]: type === 'gallery',
+    [makeStyles(k)]: true,
 };
 
 const events = {
@@ -34,21 +36,21 @@ if (type === 'drag') {
 }
 
 const handle = (
-    <div class="k-upload-handle" {...events}>
+    <div class={`${k}-upload-handle`} {...events}>
         <b:content>
             <b:children v-if={children}>{children}</b:children>
             <template v-else-if={type !== 'gallery'}>
                 <Button v-if={type === 'select'}>
-                    <Icon class="k-icon-upload" />
+                    <Icon class={`${k}-icon-upload`} />
                     {_$('点击上传')}
                 </Button>
-                <div class="k-upload-area" v-else>
-                    <Icon class="k-icon-add-bold" />
+                <div class={`${k}-upload-area`} v-else>
+                    <Icon class={`${k}-icon-add-bold`} />
                     <div innerHTML={_$('将文件拖到此处，或<a>点击上传</a>')}></div>
                 </div>
             </template>
-            <div v-else class="k-upload-picture-card k-upload-add">
-                <Icon class="k-icon-add-bold" size="large" />
+            <div v-else class={`${k}-upload-picture-card ${k}-upload-add`}>
+                <Icon class={`${k}-icon-add-bold`} size="large" />
                 <div>{_$('上传图片')}</div>
             </div>
         </b:content>
@@ -57,7 +59,7 @@ const handle = (
 
 const {removeFile} = this.files;
 const closeBtn = (value, index) => (
-    <Icon class="k-upload-close k-icon-delete"
+    <Icon class={`${k}-upload-close ${k}-icon-delete`}
         ev-click={() => removeFile(value, index)}
         hoverable
     />
@@ -76,30 +78,30 @@ const {show, close, image, isShow} = this.showImage;
         webkitdirectory={directory ? '' : undefined}
     />
 
-    <div v-if={type === 'gallery'} class="k-upload-pictures">
+    <div v-if={type === 'gallery'} class={`${k}-upload-pictures`}>
         <TransitionGroup name="k-dropdown">
             <div
                 class={{
-                    "k-upload-picture k-upload-picture-card": true, 
-                    'k-error': $value.status === UploadFileStatus.Error,
+                    [`${k}-upload-picture ${k}-upload-picture-card`]: true, 
+                    [`${k}-error`]: $value.status === UploadFileStatus.Error,
                 }}
                 v-for={files}
                 key={$value.uid}
             >
-                <img class="k-upload-img" src={$value.url} />
+                <img class={`${k}-upload-img`} src={$value.url} />
                 <Transition name="k-fade">
-                    <div class="k-upload-overlap" key="overlap"
+                    <div class={`${k}-upload-overlap`} key="overlap"
                         v-if={
                             $value.status === UploadFileStatus.Ready || 
                             $value.status === UploadFileStatus.Uploading
                         }
                     >
                         <Progress percent={$value.percent} size="mini"
-                            class="k-upload-progress"
+                            class={`${k}-upload-progress`}
                         />
                     </div>
-                    <div class="k-upload-overlap k-upload-icons" v-else>
-                        <Icon class="k-upload-zoom ion-ios-eye-outline" size="large"
+                    <div class={`${k}-upload-overlap ${k}-upload-icons`} v-else>
+                        <Icon class={`${k}-upload-zoom ion-ios-eye-outline`} size="large"
                             hoverable
                             ev-click={() => show($value)}
                         />
@@ -114,32 +116,32 @@ const {show, close, image, isShow} = this.showImage;
     </div>
     <template v-else>{handle}</template>
 
-    <div class="k-upload-tip" v-if={$blocks.tip}><b:tip /></div>
+    <div class={`${k}-upload-tip`} v-if={$blocks.tip}><b:tip /></div>
 
-    <div class="k-upload-files" v-if={type !== 'gallery'}>
+    <div class={`${k}-upload-files`} v-if={type !== 'gallery'}>
         <TransitionGroup {...expandAnimationCallbacks}>
             <div v-for={files} 
                 class={{
-                    "k-upload-file": true,
-                    'k-error': $value.status === UploadFileStatus.Error
+                    [`${k}-upload-file`]: true,
+                    [`${k}-error`]: $value.status === UploadFileStatus.Error
                 }}
                 key={$value.uid}
             >
-                <div class="k-upload-file-main">
-                    <div class="k-upload-name c-ellipsis">
-                        <Icon class="k-upload-file-icon ion-document" />
-                        <span class="k-upload-file-name">{$value.name}</span>
-                        <Icon class="k-upload-status-icon k-icon-success-fill" 
+                <div class={`${k}-upload-file-main`}>
+                    <div class={`${k}-upload-name c-ellipsis`}>
+                        <Icon class={`${k}-upload-file-icon ion-document`} />
+                        <span class={`${k}-upload-file-name`}>{$value.name}</span>
+                        <Icon class={`${k}-upload-status-icon ${k}-icon-success-fill`} 
                             v-if={$value.status === UploadFileStatus.Done}
                         />
-                        <Icon class="k-upload-status-icon k-icon-error-fill"
+                        <Icon class={`${k}-upload-status-icon ${k}-icon-error-fill`}
                             v-else-if={$value.status === UploadFileStatus.Error}
                         />
                     </div>
                     <Transition {...expandAnimationCallbacks}>
                         <Progress percent={$value.percent}
                             size="mini"
-                            class="k-upload-progress"
+                            class={`${k}-upload-progress`}
                             v-if={
                                 $value.status === UploadFileStatus.Ready || 
                                 $value.status === UploadFileStatus.Uploading
@@ -156,7 +158,7 @@ const {show, close, image, isShow} = this.showImage;
         key="dialog" 
         value={isShow.value}
         ev-close={close}
-        class={{"k-upload-dialog": true, [makeUploadDialogStyles()]: true}}
+        class={{[`${k}-upload-dialog`]: true, [makeUploadDialogStyles(k)]: true}}
     >
         <a v-if={image.value} href={image.value.url} target="_blank">
             <img src={image.value.url} />