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

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,
@@ -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/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>

package/components/tabs/styles.ts

@@ -83,31 +83,31 @@ setDefault(() => {
     tabs = deepDefaults(theme, {tabs: defaults}).tabs;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
-        ${makeCommonStyles()};
-        ${makeScrollStyles()};
+        ${makeCommonStyles(k)};
+        ${makeScrollStyles(k)};
 
-        &.k-type-default {
-            ${makeDefaultStyles()}
+        &.${k}-type-default {
+            ${makeDefaultStyles(k)}
         }
 
-        &.k-type-card {
-            ${makeCardStyles()};
+        &.${k}-type-card {
+            ${makeCardStyles(k)};
         }
 
-        &.k-type-flat-card {
-            ${makeFlatCardStyles()};
+        &.${k}-type-flat-card {
+            ${makeFlatCardStyles(k)};
         }
     `;
 }
 
-function makeCommonStyles() {
+function makeCommonStyles(k: string) {
     const active = tabs.active;
     const bar = active.bar;
     return css`
         position: relative;
-        .k-tab {
+        .${k}-tab {
             display: inline-flex;
             cursor: pointer;
             text-align: center;
@@ -116,22 +116,22 @@ function makeCommonStyles() {
             white-space: nowrap;
             text-overflow: ellipsis;
             &:hover,
-            &.k-active {
+            &.${k}-active {
                 color: ${active.color};
             }
-            &.k-disabled {
+            &.${k}-disabled {
                 color: ${theme.color.disabled};
                 cursor: not-allowed;
             }
         }
-        .k-tab-close {
+        .${k}-tab-close {
             margin-right: -${tabs.closeGap};
             margin-left: ${tabs.closeGap};
             color: ${theme.color.lightBlack};
         }
 
         // active-bar
-        .k-tabs-active-bar {
+        .${k}-tabs-active-bar {
             transition: all ${tabs.transition};
             position: absolute;
             left: 0;
@@ -141,12 +141,12 @@ function makeCommonStyles() {
         }
 
         // vertical
-        &.k-vertical {
+        &.${k}-vertical {
             display: inline-block;
-            .k-tab {
+            .${k}-tab {
                 display: block;
             }
-            .k-tabs-active-bar {
+            .${k}-tabs-active-bar {
                 left: auto;
                 top: 0;
                 right: 0;
@@ -158,21 +158,21 @@ function makeCommonStyles() {
         // size
         ${sizes.map(size => {
             const styles = tabs[size];
-            return `
-                &.k-size-${size} {
-                    .k-tab {
+            return css`
+                &.${k}-size-${size} {
+                    .${k}-tab {
                         font-size: ${styles.fontSize};
                         height: ${styles.height};
                         line-height: ${styles.height};
                         padding: ${styles.padding};
                     }
-                    .k-tab-close .k-icon {
+                    .${k}-tab-close .${k}-icon {
                         font-size: ${styles.closeFontSize};
                     }
-                    &:not(.k-vertical).k-is-scroll {
+                    &:not(.${k}-vertical).${k}-is-scroll {
                         padding: 0 ${styles.navigatorWidth};
                     }
-                    &.k-vertical.k-is-scroll {
+                    &.${k}-vertical.${k}-is-scroll {
                         padding: ${styles.navigatorWidth} 0;
                     }
                 }
@@ -181,88 +181,88 @@ function makeCommonStyles() {
     `;
 }
 
-function makeScrollStyles() {
+function makeScrollStyles(k: string) {
     return css`
         overflow: hidden;
-        .k-tabs-scroll {
+        .${k}-tabs-scroll {
             overflow: hidden;
             position: relative;
             // @referece https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue
             padding-bottom: 1px;
             margin-bottom: -1px;
         }
-        &.k-type-card,
-        &.k-type-flat-card {
-            .k-tabs-scroll {
+        &.${k}-type-card,
+        &.${k}-type-flat-card {
+            .${k}-tabs-scroll {
                 padding-bottom: 0;
                 margin-bottom: 0;
             }
         }
-        .k-tabs-wrapper {
+        .${k}-tabs-wrapper {
             white-space: nowrap;
             transition: transform ${tabs.transition};
         }
-        .k-tabs-prev,
-        .k-tabs-next {
+        .${k}-tabs-prev,
+        .${k}-tabs-next {
             position: absolute;
-            &:not(.k-disabled) {
+            &:not(.${k}-disabled) {
                 box-shadow: ${theme.boxShadow};
             }
         }
 
-        &:not(.k-vertical) {
-            .k-tabs-wrapper {
+        &:not(.${k}-vertical) {
+            .${k}-tabs-wrapper {
                 float: left;
             }
-            .k-tabs-prev,
-            .k-tabs-next {
+            .${k}-tabs-prev,
+            .${k}-tabs-next {
                 top: 0;
             }
-            .k-tabs-prev {
+            .${k}-tabs-prev {
                 left: 0;
             }
-            .k-tabs-next {
+            .${k}-tabs-next {
                 right: 0;
             }
         }
 
-        &.k-vertical {
+        &.${k}-vertical {
             &,
-            .k-tabs-scroll {
+            .${k}-tabs-scroll {
                 height: 100%
             }
 
             /* increase specificity, making sure the width is working */
-            .k-tabs-prev,
-            .k-tabs-next {
+            .${k}-tabs-prev,
+            .${k}-tabs-next {
                 width: 100% !important;
                 left: 0;
             }
-            .k-tabs-prev {
+            .${k}-tabs-prev {
                 top: 0;
             }
-            .k-tabs-next {
+            .${k}-tabs-next {
                 bottom: 0;
             }
         }
     `;
 }
 
-function makeDefaultStyles() {
+function makeDefaultStyles(k: string) {
     return css`
         border-bottom: ${tabs.border};
-        &.k-vertical {
+        &.${k}-vertical {
             border-bottom: none;
             border-right: ${tabs.border};
         }
     `;
 }
 
-function makeCardCommonStyles() {
+function makeCardCommonStyles(k: string) {
     return css`
         border-radius: ${tabs.card.borderRadius};
         background-color: ${tabs.card.bgColor};
-        .k-tabs-active-bar {
+        .${k}-tabs-active-bar {
             background: #fff;
             top: 0;
             height: auto;
@@ -271,18 +271,18 @@ function makeCardCommonStyles() {
     `
 }
 
-function makeCardStyles() {
+function makeCardStyles(k: string) {
     const borderRadius = tabs.card.borderRadius;
     return css`
-        ${makeCardCommonStyles()};
-        .k-tabs-active-bar {
+        ${makeCardCommonStyles(k)};
+        .${k}-tabs-active-bar {
             border-radius: ${borderRadius} ${borderRadius} 0px 0px;
             box-shadow: ${theme.boxShadow};
         }
 
         // vertical card
-        &.k-vertical {
-            .k-tabs-active-bar {
+        &.${k}-vertical {
+            .${k}-tabs-active-bar {
                 width: 100%;
                 left: 0;
                 border-radius: ${borderRadius} 0px 0px ${borderRadius};
@@ -291,22 +291,22 @@ function makeCardStyles() {
     `;
 }
 
-function makeFlatCardStyles() {
+function makeFlatCardStyles(k: string) {
     const padding = tabs.flatCard.padding;
     return css`
-        ${makeCardCommonStyles()};
+        ${makeCardCommonStyles(k)};
         padding: 0 ${padding};
 
-        .k-tabs-active-bar {
+        .${k}-tabs-active-bar {
             top: ${padding};
             height: calc(100% - ${padding} * 2);
             border-radius: ${tabs.card.borderRadius};
         }
 
         // vertical card
-        &.k-vertical {
+        &.${k}-vertical {
             padding: ${padding} 0;
-            .k-tabs-active-bar {
+            .${k}-tabs-active-bar {
                 left: ${padding};
                 width: calc(100% - ${padding} * 2);
             }

package/components/tabs/tab.ts

@@ -3,6 +3,7 @@ import template from './tab.vdt';
 import {TABS} from './constants';
 import type {Tabs} from './';
 import {bind} from '../utils';
+import { useConfigContext } from '../config';
 
 export interface TabProps {
     value?: any
@@ -25,7 +26,8 @@ const typeDefs: Required<TypeDefs<TabProps>> = {
 export class Tab extends Component<TabProps, TabEvents> {
     static template = template;
 
-    private tabs = inject<Tabs>(TABS)!
+    private tabs = inject<Tabs>(TABS)!;
+    private config = useConfigContext();
 
     @bind
     private onClick(e: MouseEvent) {

package/components/tabs/tab.vdt

@@ -5,11 +5,12 @@ import {isNullOrUndefined} from 'intact-shared';
 
 const {value, children, className, disabled, closable} = this.get();
 const {value: currentValue} = this.tabs.get();
+const { k } = this.config;
 const classNameObj = {
-    'k-tab': true, 
-    'k-active': !isNullOrUndefined(value) && value === currentValue,
+    [`${k}-tab`]: true, 
+    [`${k}-active`]: !isNullOrUndefined(value) && value === currentValue,
     [className]: className,
-    'k-disabled': disabled,
+    [`${k}-disabled`]: disabled,
 };
 
 <div 
@@ -22,7 +23,7 @@ const classNameObj = {
         icon
         disabled={disabled} 
         size="mini"
-        class="k-tab-close"
+        class={`${k}-tab-close`}
         v-if={isNullOrUndefined(closable) ? this.tabs.get('closable') : closable}
         ev-click={this.remove}
     >

package/components/tabs/useActiveBar.ts

@@ -14,7 +14,8 @@ export function useActiveBar() {
 
     function generateStyle() {
         const element = findDomFromVNode(instance.$lastInput!, true) as HTMLElement;
-        const activeTab = element.querySelector('.k-tab.k-active') as HTMLElement | null;
+        const { k } = instance.config;
+        const activeTab = element.querySelector(`.${k}-tab.${k}-active`) as HTMLElement | null;
 
         if (!activeTab) {
             const oldStyles = styles.value;

package/components/tabs/useScroll.ts

@@ -89,9 +89,10 @@ export function useScroll() {
 
     function scrollActiveToView() {
         const {vertical} = instance.get();
+        const { k } = instance.config;
 
         const activeTab = scrollRef.value!.querySelector(
-            '.k-tab.k-active'
+            `.${k}-tab.${k}-active`
         ) as HTMLElement;
         if (activeTab) {
             let _offset = offset.value;

package/components/tag/base.ts

@@ -3,6 +3,7 @@ import {bind} from '../utils';
 import template from './index.vdt';
 import {sizes, Sizes} from '../../styles/utils';
 import type {Events, Colors} from '../types';
+import { useConfigContext } from '../config';
 
 export interface TagProps {
     type?: Colors 
@@ -48,6 +49,8 @@ export class Tag<
     static defaults = defaults;
     static events = events;
 
+    private config = useConfigContext();
+
     @bind
     private onClose(e: MouseEvent): void {
         e.stopPropagation();

package/components/tag/index.vdt

@@ -7,27 +7,28 @@ const {
     className, children, type, border,
     disabled, closable, closed, size
 } = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-tag': !$props.className,
+    [`${k}-tag`]: !$props.className,
     [className]: className,
-    [`k-${type}`]: type !== 'default',
-    [`k-${size}`]: size !== 'default',
-    [`k-${border}`]: border,
-    'k-disabled': disabled,
-    'k-closable': closable,
-    [makeStyles()]: true,
+    [`${k}-${type}`]: type !== 'default',
+    [`${k}-${size}`]: size !== 'default',
+    [`${k}-${border}`]: border,
+    [`${k}-disabled`]: disabled,
+    [`${k}-closable`]: closable,
+    [makeStyles(k)]: true,
     [$props.className]: $props.className,
 };
 
-<Transition name={$props.name || 'k-scale'}>
+<Transition name={$props.name || `${k}-scale`}>
     <div v-if={!closed}
         class={classNameObj}
         {...getRestProps(this)}
     >
         <b:body>{children}</b:body>
         <b:_close>
-            <Icon class="k-tag-close ion-ios-close-empty"
+            <Icon class={`${k}-tag-close ion-ios-close-empty`}
                 color={type}
                 hoverable={!disabled}
                 v-if={closable}

package/components/tag/styles.ts

@@ -87,7 +87,7 @@ setDefault(() => {
 
 export { tag };
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
@@ -96,13 +96,13 @@ export function makeStyles() {
         border-radius: ${tag.borderRadius};
         font-size: ${tag.fontSize};
         height: ${tag.height};
-        .k-tag-close {
+        .${k}-tag-close {
             font-size: ${tag.close.fontSize};
             margin-left: ${tag.close.gap};
             width: ${tag.close.width};
         }
 
-        &.k-none {
+        &.${k}-none {
             border: none;
             background: ${tag.none.bgColor};
         }
@@ -110,7 +110,7 @@ export function makeStyles() {
         ${types.map(t => {
             const styles = tag[t];
             return css`
-                &.k-${t} {
+                &.${k}-${t} {
                     color: ${styles.color};
                     border-color: ${styles.color};
                     background: ${styles.bgColor};
@@ -122,11 +122,11 @@ export function makeStyles() {
             if (s === 'default') return;
             const styles = tag[s];
             return css `
-                &.k-${s} {
+                &.${k}-${s} {
                     padding: ${styles.padding};
                     height: ${styles.height};
                     font-size: ${styles.fontSize};
-                    .k-tag-close {
+                    .${k}-tag-close {
                         font-size: ${styles.close.fontSize};
                         margin-left: ${styles.close.gap};
                     }
@@ -135,40 +135,40 @@ export function makeStyles() {
         })}
 
         // border
-        &.k-dashed {
+        &.${k}-dashed {
             border-style: dashed;
         }
 
         // draggable
-        &.k-dragging {
+        &.${k}-dragging {
             opacity: 0;
         }
     `;
 }
 
-export function makeTagsStyles() {
+export function makeTagsStyles(k: string) {
     return css`
         display: flex;
         flex-wrap: wrap;
         gap: ${defaults.tags.gap};
         position: relative;
         overflow: hidden;
-        &.k-nowrap {
+        &.${k}-nowrap {
             flex-wrap: nowrap;
-            .k-tag {
+            .${k}-tag {
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 flex-shrink: 0;
             }
         }
-        .k-tags-more {
+        .${k}-tags-more {
             cursor: default;
             font-family: monospace;
         }
 
         // draggable
-        .k-tag.k-draggable {
+        .${k}-tag.${k}-draggable {
             cursor: move;
         }
     `;