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

package/components/card/column.vdt

@@ -1,6 +1,7 @@
 import {addStyle, getRestProps} from '../utils';
 
 const {children, className, width, style, center} = this.get();
+const { k } = this.config;
 
 let _style = style;
 if (width) {
@@ -8,9 +9,9 @@ if (width) {
 }
 
 const classNameObj = {
-    'k-card-column': true,
-    'k-fluid': !width,
-    'k-center': center,
+    [`${k}-card-column`]: true,
+    [`${k}-fluid`]: !width,
+    [`${k}-center`]: center,
     [className]: className,
 }
 

package/components/card/index.ts

@@ -1,6 +1,7 @@
-import {Component, VNode, TypeDefs, inject, createRef} from 'intact';
+import {Component, VNode, TypeDefs} from 'intact';
 import template from './index.vdt';
 export * from './column';
+import { useConfigContext } from '../config';
 
 export interface CardProps {
     title?: string | VNode
@@ -28,5 +29,7 @@ export class Card extends Component<CardProps, CardEvents, CardBlocks> {
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
+
+    private config = useConfigContext();
 }
 

package/components/card/index.vdt

@@ -5,6 +5,7 @@ import {makeStyles} from './styles';
 const {
     children, className, title, type
 } = this.get();
+const { k } = this.config;
 
 const hasHeader = $blocks.header || $blocks.title || title || $blocks.extra;
 let hasColumn = false;
@@ -18,26 +19,26 @@ if (children && children.length) {
     }
 }
 const classNameObj = {
-    'k-card': true,
-    'k-shadow': type === 'shadow',
-    'k-border': type === 'border',
-    'k-none': type === 'none',
-    'k-no-header': !hasHeader,
-    'k-card-grid': hasColumn,
+    [`${k}-card`]: true,
+    [`${k}-shadow`]: type === 'shadow',
+    [`${k}-border`]: type === 'border',
+    [`${k}-none`]: type === 'none',
+    [`${k}-no-header`]: !hasHeader,
+    [`${k}-card-grid`]: hasColumn,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 <div class={classNameObj} {...getRestProps(this)}>
-    <div class="k-card-header c-clearfix" v-if={hasHeader}>
+    <div class={`${k}-card-header c-clearfix`} v-if={hasHeader}>
         <b:header>
-            <div class="k-card-title"><b:title>{title}</b:title></div>
-            <div class="k-card-extra" v-if={$blocks.extra}>
+            <div class={`${k}-card-title`}><b:title>{title}</b:title></div>
+            <div class={`${k}-card-extra`} v-if={$blocks.extra}>
                 <b:extra />
             </div>
         </b:header>
     </div>
-    <div class="k-card-body">
+    <div class={`${k}-card-body`}>
         {children}
     </div>
 </div>

package/components/card/styles.ts

@@ -18,73 +18,73 @@ setDefault(() => {
     card = deepDefaults(theme, {card: defaults}).card;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         border-radius: ${card.borderRadius};
         background: ${card.bgColor};
-        .k-card-header {
+        .${k}-card-header {
             height: ${card.headerHeight};
             line-height: ${card.headerHeight};
             padding: 0 ${card.padding};
         }
-        .k-card-title {
+        .${k}-card-title {
             font-size: ${card.headerFontSize};
             display: inline-block;
         }
-        .k-card-extra {
+        .${k}-card-extra {
             float: right;
             height: 100%;
             display: flex;
             align-items: center;
         }
 
-        .k-card-body {
+        .${k}-card-body {
             padding: 0 ${card.padding} ${card.padding};
         }
 
         // type
-        &.k-shadow {
+        &.${k}-shadow {
             box-shadow: ${card.boxShadow};
         }
-        &.k-none {
+        &.${k}-none {
             box-shadow: none;
         }
-        &.k-border {
+        &.${k}-border {
             border: ${card.border};
-            .k-card-header {
+            .${k}-card-header {
                 border-bottom: ${card.border};
             }
-            .k-card-body {
+            .${k}-card-body {
                 padding-top: ${card.padding};
             }
         }
-        &.k-no-header {
-            .k-card-body {
+        &.${k}-no-header {
+            .${k}-card-body {
                 padding-top: ${card.padding};
             }
         }  
     
         // grid
-        &.k-card-grid {
-            .k-card-body {
+        &.${k}-card-grid {
+            .${k}-card-body {
                 display: flex;
                 padding: 0;
             }
-            &.k-border {
-                .k-card-column:not(:last-of-type) {
+            &.${k}-border {
+                .${k}-card-column:not(:last-of-type) {
                     border-right: ${card.border};
                 }
             }
         }
 
-        .k-card-column {
+        .${k}-card-column {
             display: flex;
             align-items: center;
             padding: ${card.padding}; 
-            &.k-fluid {
+            &.${k}-fluid {
                 flex: 1;
             }
-            &.k-center {
+            &.${k}-center {
                 justify-content: center;
             }
         }

package/components/carousel/index.ts

@@ -5,6 +5,8 @@ import {useSlide} from './useSlide';
 import {bind} from '../utils';
 import type {CarouselItem} from './item';
 import {useAutoplay} from './useAutoplay';
+import { useConfigContext } from '../config';
+
 export * from './item';
 
 export interface CarouselProps {
@@ -40,6 +42,7 @@ export class Carousel extends Component<CarouselProps> {
         this.items.getItemsWithCloned
     );
     private autoplay = useAutoplay(this.next);
+    private config = useConfigContext();
    
     public isActive(value: string) {
         return this.get('value') === value;

package/components/carousel/index.vdt

@@ -7,14 +7,15 @@ import {linkEvent} from 'intact';
 
 const {className, children, arrow, effect} = this.get();
 const {translate, shouldTransition, elementRef, isSlide} = this.slide;
+const { k } = this.config;
 
 const classNameObj = {
-    'k-carousel': true,
+    [`${k}-carousel`]: true,
     [className]: className,
-    [`k-${arrow}`]: true,
-    'k-stop': !shouldTransition.value,
-    [`k-${effect}`]: true,
-    [makeStyles()]: true,
+    [`${k}-${arrow}`]: true,
+    [`${k}-stop`]: !shouldTransition.value,
+    [`${k}-${effect}`]: true,
+    [makeStyles(k)]: true,
 };
 
 const {getItems, getItemsWithCloned} = this.items;
@@ -26,26 +27,26 @@ const {stop, play} = this.autoplay;
     ev-mouseenter={stop}
     ev-mouseleave={play}
 >
-    <div class="k-carousel-wrapper"
+    <div class={`${k}-carousel-wrapper`}
         style={{
             transform: isSlide() ? `translate3d(${translate.value}px, 0, 0)` : undefined,
         }} 
     >
         {getItemsWithCloned()}
     </div>
-    <Button icon circle type="none" size="large" class="k-carousel-btn k-prev"
+    <Button icon circle type="none" size="large" class={`${k}-carousel-btn ${k}-prev`}
         ev-click={this.prev}
     >
-        <Icon class="k-icon-left" />
+        <Icon class={`${k}-icon-left`} />
     </Button>
-    <Button icon circle type="none" size="large" class="k-carousel-btn k-next"
+    <Button icon circle type="none" size="large" class={`${k}-carousel-btn ${k}-next`}
         ev-click={this.next}
     >
-        <Icon class="k-icon-right" />
+        <Icon class={`${k}-icon-right`} />
     </Button>
-    <div class="k-carousel-indicator c-clearfix">
+    <div class={`${k}-carousel-indicator c-clearfix`}>
         <div v-for={getItems()}
-            class={{'k-carousel-dot': true, 'k-active': this.isActive($value.props.value)}}
+            class={{[`${k}-carousel-dot`]: true, [`${k}-active`]: this.isActive($value.props.value)}}
             ev-click={linkEvent($key, this.setIndex)}
         ></div>
     </div>

package/components/carousel/item.ts

@@ -1,6 +1,7 @@
 import {Component, TypeDefs} from 'intact';
 import template from './item.vdt';
 import type {Carousel} from './';
+import { useConfigContext } from '../config';
 
 export interface CarouselItemProps {
     value?: string,
@@ -18,4 +19,6 @@ const typeDefs: Required<TypeDefs<CarouselItemProps>> = {
 export class CarouselItem extends Component<CarouselItemProps> {
     static template = template; 
     static typeDefs = typeDefs;
+
+    private config = useConfigContext();
 }

package/components/carousel/item.vdt

@@ -5,12 +5,13 @@ import {makeItemStyles} from './styles';
 const {className, children, value, cloned} = this.get();
 const parent = this.$senior;
 const active = parent.isActive(value);
+const { k } = this.config;
 const classNameObj = {
-    'k-carousel-item': true,
+    [`${k}-carousel-item`]: true,
     [className]: className,
-    'k-active': active,
-    'k-cloned': cloned,
-    [makeItemStyles()]: true,
+    [`${k}-active`]: active,
+    [`${k}-cloned`]: cloned,
+    [makeItemStyles(k)]: true,
 };
 const isSlide = parent.get('effect') === 'slide';
 

package/components/carousel/styles.ts

@@ -39,18 +39,18 @@ setDefault(() => {
     carousel = deepDefaults(theme, {carousel: defaults}).carousel;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         height: ${carousel.height};
         position: relative;
         overflow: hidden;
-        .k-carousel-indicator {
+        .${k}-carousel-indicator {
             position: absolute;
             left: 50%;
             transform: translateX(-50%);
             bottom: ${carousel.indicator.bottom};
         }
-        .k-carousel-dot {
+        .${k}-carousel-dot {
             height: ${carousel.indicator.height};
             float: left;
             margin: ${carousel.dot.margin};
@@ -65,13 +65,13 @@ export function makeStyles() {
                 opacity: ${carousel.dot.opacity};
                 transition: width ${carousel.transition};
             }
-            &.k-active:before {
+            &.${k}-active:before {
                 opacity: ${carousel.dot.active.opacity};
                 width: ${carousel.dot.active.width};
             }
         }
 
-        .k-carousel-btn {
+        .${k}-carousel-btn {
             position: absolute;
             background: ${carousel.arrow.bgColor} !important;
             top: 50%;
@@ -83,67 +83,67 @@ export function makeStyles() {
                 opacity: ${carousel.arrow.hoverOpacity} !important;
                 background: ${carousel.arrow.bgColor};
             }
-            &.k-prev {
+            &.${k}-prev {
                 left: ${carousel.arrow.left};
             }
-            &.k-next {
+            &.${k}-next {
                 right: ${carousel.arrow.right};
             }
         }
 
         // hover
-        &.k-hover {
-            .k-carousel-btn {
+        &.${k}-hover {
+            .${k}-carousel-btn {
                 opacity: 0;
             }
             &:hover {
-                .k-carousel-btn {
+                .${k}-carousel-btn {
                     opacity: ${carousel.arrow.opacity};
                 }
             }
         }
 
         // never
-        &.k-never {
-            .k-carousel-btn {
+        &.${k}-never {
+            .${k}-carousel-btn {
                 display: none;
             }
         }
 
-        &.k-slide {
-            .k-carousel-wrapper {
+        &.${k}-slide {
+            .${k}-carousel-wrapper {
                 transition: transform ${carousel.transition};
                 white-space: nowrap;
             }
         }
 
-        &.k-stop {
-            .k-carousel-wrapper {
+        &.${k}-stop {
+            .${k}-carousel-wrapper {
                 transition: none;
             }
         }
 
-        &.k-fade {
-            .k-carousel-item {
+        &.${k}-fade {
+            .${k}-carousel-item {
                 position: absolute;
             }
         }
     `;
 }
 
-export function makeItemStyles() {
+export function makeItemStyles(k: string) {
     return css`
         display: inline-block;
         width: 100%;
         height: 100%;
 
         // fade
-        &.k-carousel-fade-enter-active,
-        &.k-carousel-fade-leave-active {
+        &.${k}-carousel-fade-enter-active,
+        &.${k}-carousel-fade-leave-active {
             transition: opacity ${carousel.transition};
         }
-        &.k-carousel-fade-enter-from,
-        &.k-carousel-fade-leave-to {
+        &.${k}-carousel-fade-enter-from,
+        &.${k}-carousel-fade-leave-to {
             opacity: 0;
         }
     `

package/components/cascader/index.vdt

@@ -4,10 +4,10 @@ import {_$} from '../../i18n';
 import {makeMenuStyles, makeFilterMenuStyles} from './styles';
 
 const {data, trigger, filterable, fields} = this.get();
-const baseMenuStyles = makeMenuStyles();
+const { k } = this.config;
 const classNameObj = {
-    'k-cascader-menu': true,
-    [baseMenuStyles]: true,
+    [`${k}-cascader-menu`]: true,
+    [makeMenuStyles(k)]: true,
 };
 const getField = this.fields;
 
@@ -15,9 +15,9 @@ const {values, isShowed, isSelected, onSelect, toggleShowedValue} = this.value;
 const Options = (data, level, loaded, parentSelected) => {
     if (!data.length) {
         if (!loaded) {
-            return <Icon class="ion-load-c k-cascader-loading" rotate />
+            return <Icon class={`ion-load-c ${k}-cascader-loading`} rotate />
         } else {
-            return <div class="k-cascader-empty">{_$('无数据')}</div>
+            return <div class={`${k}-cascader-empty`}>{_$('无数据')}</div>
         }
     }
 
@@ -32,15 +32,15 @@ const Options = (data, level, loaded, parentSelected) => {
                 <DropdownItem
                     disabled={getField(item, 'disabled')}
                     class={{
-                        'k-cascader-option': true,
-                        'k-active': showed,
-                        'k-selected': selected,
+                        [`${k}-cascader-option`]: true,
+                        [`${k}-active`]: showed,
+                        [`${k}-selected`]: selected,
                     }}
                     ev-select={onSelect.bind(null, value, level)}
                 >
                     {getField(item, 'label')}
                     <Icon v-if={children}
-                        class="k-cascader-arrow k-icon-right"
+                        class={`${k}-cascader-arrow ${k}-icon-right`}
                     /> 
                 </DropdownItem>
             );
@@ -68,7 +68,7 @@ const Options = (data, level, loaded, parentSelected) => {
 }
 
 const {filter, keywords: {value: keywords}, selectByFilter} = this.filterable;
-<t:super class="k-cascader">
+<t:super class={`${k}-cascader`}>
     <b:base-menu>
         <DropdownMenu 
             v-if={!filterable || !keywords}
@@ -80,14 +80,14 @@ const {filter, keywords: {value: keywords}, selectByFilter} = this.filterable;
         <DropdownMenu v-else
             key="filter"
             class={{
-                'k-cascader-filter': true,
+                [`${k}-cascader-filter`]: true,
                 [baseMenuStyles]: true,
-                [makeFilterMenuStyles()]: true,
+                [makeFilterMenuStyles(k)]: true,
             }}
         >
             {(() => {
                 const items = filter();
-                if (!items.length) return <div class="k-cascader-empty">{_$('无匹配数据')}</div>
+                if (!items.length) return <div class={`${k}-cascader-empty`}>{_$('无匹配数据')}</div>
 
                 return <DropdownItem v-for={items}
                     ev-select={selectByFilter.bind(null, $value)}

package/components/cascader/styles.ts

@@ -30,42 +30,42 @@ setDefault(() => {
     cascader = deepDefaults(theme, {cascader: defaults}).cascader;
 });
 
-export function makeMenuStyles() {
+export function makeMenuStyles(k: string) {
     return css`
         min-width: ${cascader.width} !important;
         height: ${cascader.height};
         overflow: auto;
-        .k-cascader-arrow {
+        .${k}-cascader-arrow {
             float: right;
             height: 100%;
             margin-left: ${cascader.arrowGap};
             line-height: inherit;
         }
 
-        .k-cascader-loading {
+        .${k}-cascader-loading {
             display: block;
             text-align: center;
             margin-top: ${cascader.loadingGap};
         }
 
-        .k-cascader-empty {
+        .${k}-cascader-empty {
             padding: ${cascader.empty.padding};
             color: ${cascader.empty.color};
             text-align: center;
         }
 
-        .k-cascader-option {
-            &.k-selected {
+        .${k}-cascader-option {
+            &.${k}-selected {
                 color: ${cascader.selectedColor};
             }
-            &.k-active {
+            &.${k}-active {
                 background: ${cascader.activeBgColor};
             }
         }
     `; 
 }
 
-export function makeFilterMenuStyles() {
+export function makeFilterMenuStyles(k: string) {
     return css`
         min-width: ${cascader.filter.minWidth} !important;
         height: auto;

package/components/checkbox/index.ts

@@ -3,6 +3,7 @@ import template from './index.vdt';
 import {bind} from '../utils';
 import {isArray} from 'intact-shared';
 import {CommonInputHTMLAttributes, Events} from '../types';
+import { useConfigContext } from '../config';
 
 export interface CheckboxProps<V = boolean> extends CommonInputHTMLAttributes {
     disabled?: boolean
@@ -42,6 +43,7 @@ export class Checkbox<V = boolean> extends Component<CheckboxProps<V>, CheckboxE
     static events = events;
 
     private inputRef = createRef<HTMLInputElement>();
+    private config = useConfigContext();
 
     private isChecked(){
         const {value, trueValue} = this.get();

package/components/checkbox/index.vdt

@@ -9,14 +9,15 @@ const {
 } = this.get();
 
 const isChecked = this.isChecked();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-checkbox': true,
-    'k-disabled': disabled,
-    'k-checked': isChecked,
-    'k-indeterminate': indeterminate,
+    [`${k}-checkbox`]: true,
+    [`${k}-disabled`]: disabled,
+    [`${k}-checked`]: isChecked,
+    [`${k}-indeterminate`]: indeterminate,
     [className]: className,
-    [makeStyles()]: true
+    [makeStyles(k)]: true
 };
 
 const events = [
@@ -46,7 +47,7 @@ const events = [
     {...events}
 >
     <Wave disabled={disabled} inset="-2px">
-        <span class="k-checkbox-wrapper">
+        <span class={`${k}-checkbox-wrapper`}>
             <input
                 type="checkbox" 
                 checked={isChecked}
@@ -60,5 +61,5 @@ const events = [
             />
         </span>
     </Wave>
-    <span class="k-checkbox-text" v-if={children}>{children}</span>
+    <span class={`${k}-checkbox-text`} v-if={children}>{children}</span>
 </label>