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

package/components/timeline/styles.ts

@@ -60,19 +60,19 @@ setDefault(() => {
     timeline = deepDefaults(theme, {timeline: defaults}).timeline;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         font-size: ${timeline.fontSize};
         padding-top: calc(${theme.lineHeight}em / 2);
     `;
 }
 
-export function makeItemStyles() {
+export function makeItemStyles(k: string) {
     return css`
         position: relative;
         padding: ${timeline.padding};
        
-        .k-timeline-indicator {
+        .${k}-timeline-indicator {
             width: ${timeline.indicator.width};
             position: absolute;
             left: 0;
@@ -80,20 +80,20 @@ export function makeItemStyles() {
             height: 100%;
             text-align: center;
         }
-        .k-timeline-dot {
+        .${k}-timeline-dot {
             position: relative;
             z-index: 1;
             transform: translateY(-50%);
         }
            
-        .k-timeline-circle {
+        .${k}-timeline-circle {
             position: relative;
             background: ${theme.color.primary};
             border-radius: 50%;
             left: 50%;
         }
            
-        .k-timeline-line {
+        .${k}-timeline-line {
             position: absolute;
             height: 100%;
             border-left: ${timeline.lineBorder};
@@ -101,13 +101,13 @@ export function makeItemStyles() {
             left: 50%;
         }
 
-        .k-timeline-content {
+        .${k}-timeline-content {
             position: relative;
             top: calc(-0.5 * ${theme.lineHeight}em);
         }
      
         &:last-of-type {
-            .k-timeline-line {
+            .${k}-timeline-line {
                 display: none;
             }
         }
@@ -117,11 +117,11 @@ export function makeItemStyles() {
             const typeStyles = timeline[type];
 
             return css`
-                &.k-${type} {
-                    .k-timeline-indicator {
+                &.${k}-${type} {
+                    .${k}-timeline-indicator {
                         color: ${typeStyles.color};
                     }
-                    .k-timeline-circle {
+                    .${k}-timeline-circle {
                         background: ${typeStyles.color};
                     }
                 }
@@ -132,7 +132,7 @@ export function makeItemStyles() {
         ${sizes.map(size => {
             const styles = timeline[size];
             const sizeClassName = css`
-                .k-timeline-circle {
+                .${k}-timeline-circle {
                     width: ${styles.width};
                     height: ${styles.width};
                     // when we use translateX(-50%) the line can not position at center of dot
@@ -142,7 +142,7 @@ export function makeItemStyles() {
             if (size === 'default') return sizeClassName;
 
             return css`
-                &.k-${size} {
+                &.${k}-${size} {
                     ${sizeClassName};
                 }
             `

package/components/timeline/timeline.ts

@@ -1,8 +1,11 @@
 import {Component} from 'intact';
 import template from './timeline.vdt';
+import { useConfigContext } from '../config';
 
 export interface TimelineProps { }
 
 export class Timeline extends Component<TimelineProps> {
     static template = template;
+
+    private config = useConfigContext();
 }

package/components/timeline/timeline.vdt

@@ -2,11 +2,12 @@ import {getRestProps} from '../utils';
 import {makeStyles} from './styles';
 
 const {className, children} = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-timeline': true,
+    [`${k}-timeline`]: true,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 <div class={classNameObj} {...getRestProps(this)}>

package/components/timepicker/panelPicker.vdt

@@ -17,11 +17,13 @@ const {
     getTimeValue,
 } = this.value;
 const lastValue = last(value);
+const { k } = this.config;
+
 const classNameObj = {
-    'k-time-content': true,
-    'k-range': range,
+    [`${k}-time-content`]: true,
+    [`${k}-range`]: range,
     [className]: className,
-    [makePanelStyles()]: true,
+    [makePanelStyles(k)]: true,
 };
 const options = this.step.options.value;
 const {isDisabledTime, isDisabledTimeByStep, isDisabledConfirm} = this.disabled;
@@ -30,8 +32,8 @@ const {getValueFormat, getValueString} = this.formats;
 const generatePanel = flag => {
     const timeValue = getTimeValue(flag); 
     return (
-        <div class="k-datepicker-calendar-wrapper">
-            <div v-if={range} class="k-timepicker-title">
+        <div class={`${k}-datepicker-calendar-wrapper`}>
+            <div v-if={range} class={`${k}-timepicker-title`}>
                 {flag === PanelFlags.Start ? _$('开始时间') : _$('结束时间')}
             </div>
             <DatepickerTime
@@ -42,7 +44,7 @@ const generatePanel = flag => {
                 flag={flag}
                 isDisabledTime={isDisabledTime}
             />
-            <div class="k-datepicker-time" v-else>
+            <div class={`${k}-datepicker-time`} v-else>
                 <ScrollSelect
                     value={timeValue ? getValueString(timeValue) : timeValue}
                     ev-$change:value={v => onChangeTimeByStep(v, flag)}
@@ -54,15 +56,15 @@ const generatePanel = flag => {
     );
 };
 
-<t:super class="k-timepicker">
+<t:super class={`${k}-timepicker`}>
     <b:base-menu>
         <DropdownMenu class={classNameObj}>
-            <div class="k-datepicker-wrapper">
-                <div class="k-datepicker-calendars">
+            <div class={`${k}-datepicker-wrapper`}>
+                <div class={`${k}-datepicker-calendars`}>
                     {generatePanel(PanelFlags.Start)}
                     {range ? generatePanel(PanelFlags.End) : null} 
                 </div>
-                <div class="k-datepicker-footer">
+                <div class={`${k}-datepicker-footer`}>
                     <Button type="primary" size="small"
                         disabled={isDisabledConfirm()}
                         ev-click={onConfirm}
@@ -72,6 +74,6 @@ const generatePanel = flag => {
         </DropdownMenu>
     </b:base-menu>
     <b:suffix>
-        <Icon class="k-icon-time" />
+        <Icon class={`${k}-icon-time`} />
     </b:suffix>
 </t:super>

package/components/timepicker/selectPicker.ts

@@ -9,6 +9,7 @@ import template from './selectPicker.vdt';
 import {useFormats} from './useFormats';
 import {useDisabled} from '../datepicker/useDisabled';
 import {useStep} from './useStep';
+import { useConfigContext } from '../config';
 
 export class SelectPicker extends Component<TimepickerProps, TimepickerEvents, TimepickerBlocks> {
     static template = template;
@@ -17,4 +18,5 @@ export class SelectPicker extends Component<TimepickerProps, TimepickerEvents, T
     public formats = useFormats();
     public disabled = useDisabled(this.formats);
     public step = useStep(this.disabled, this.formats); 
+    private config = useConfigContext();
 }

package/components/timepicker/selectPicker.vdt

@@ -4,6 +4,7 @@ import {_$} from '../../i18n';
 
 const {className, value, placeholder, ...rest} = this.get();
 const options = this.step.options.value;
+const { k } = this.config;
 
 <Select
     v-model="value"
@@ -14,7 +15,7 @@ const options = this.step.options.value;
 >
     <Option v-for={options} value={$value.value}>{$value.label}</Option>
     <b:suffix>
-        <Icon class="k-icon-time" />
+        <Icon class={`${k}-icon-time`} />
     </b:suffix>
 </Select>
 

package/components/timepicker/styles.ts

@@ -23,32 +23,32 @@ setDefault(() => {
     timepicker = deepDefaults(theme, {timepicker: defaults}).timepicker;
 });
 
-export function makePanelStyles() {
+export function makePanelStyles(k: string) {
     return cx(
-        makePanelStylesBase(),
+        makePanelStylesBase(k),
         css`
-            &.k-time-content {
-                .k-datepicker-time {
+            &.${k}-time-content {
+                .${k}-datepicker-time {
                     padding: ${timepicker.padding};
                 }
-                .k-scroll-select {
+                .${k}-scroll-select {
                     height: ${timepicker.scrollHeight};
                 }   
             }
-            &.k-range {
-                .k-datepicker-time {
+            &.${k}-range {
+                .${k}-datepicker-time {
                     width: auto;
                     border: ${timepicker.border};
                 }
-                .k-scroll-select {
+                .${k}-scroll-select {
                     height: ${timepicker.range.scrollHeight};
                 }
-                .k-datepicker-calendar-wrapper {
+                .${k}-datepicker-calendar-wrapper {
                     padding: ${timepicker.range.padding};
                     width: ${timepicker.range.width};
                     border: none;
                 }
-                .k-timepicker-title {
+                .${k}-timepicker-title {
                     text-align: center;
                     margin-bottom: ${timepicker.range.titleGap};
                 }

package/components/tip/index.vdt

@@ -3,15 +3,16 @@ import {Icon} from '../icon';
 import {makeStyles} from './styles';
 
 const {children, closable, type, disabled} = this.get();
+const { k } = this.config;
 const classNameObj = {
-    'k-tip': true,
-    [makeStyles()]: true,
+    [`${k}-tip`]: true,
+    [makeStyles(k)]: true,
 };
 
 <t:super class={classNameObj} name="k-fade">
     <b:body>
-        <div class="k-tip-wrapper">
-            <div v-if={$blocks.title} class="k-tip-title">
+        <div class={`${k}-tip-wrapper`}>
+            <div v-if={$blocks.title} class={`${k}-tip-title`}>
                 <b:title />
             </div>
             {children}
@@ -22,11 +23,11 @@ const classNameObj = {
             type={!$blocks.close ? 'none' : 'link'}
             icon={!$blocks.close}
             ev-click={this.onClose}
-            class="k-tip-close"
+            class={`${k}-tip-close`}
         >
             <template>
                 <b:close>
-                    <Icon class="k-icon-close"
+                    <Icon class={`${k}-icon-close`}
                         hoverable={!disabled}
                     />
                 </b:close>

package/components/tip/styles.ts

@@ -18,32 +18,32 @@ setDefault(() => {
     tip = deepDefaults(theme, {tip: defaults}).tip;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
-        // Tip extends Tag, so we add k-tip to increase the priority of class
-        &.k-tip {
+        // Tip extends Tag, so we add.${k}-tip to increase the priority of class
+        &.${k}-tip {
             display: flex;
             height: auto;
             padding: 0;
             color: ${tip.color} !important;
             align-items: flex-start;
         }
-        .k-tip-wrapper {
+        .${k}-tip-wrapper {
             flex: 1;
             padding: ${tip.padding};
         }
 
-        .k-tip-title {
+        .${k}-tip-title {
             font-size: ${tip.title.fontSize};
             margin-bottom: ${tip.title.gap};
             font-weight: ${tip.title.fontWeight}
         }
 
-        &.k-fade-leave-active {
+        &.${k}-fade-leave-active {
             position: relative;
         }
 
-        .k-tip-close:hover {
+        .${k}-tip-close:hover {
             background: none;
         }
     `;

package/components/tooltip/content.vdt

@@ -9,22 +9,23 @@ const {
 } = this.dropdown.get();
 const {children} = this.get();
 const {arrowRef, arrowType} = this.arrow;
+const { k } = this.config;
 
 const classNameObj = {
-    'k-tooltip-content': true,
-    'k-hoverable': hoverable || trigger === 'click',
-    'k-always': always,
-    [`k-${theme}`]: true,
-    [`k-${size}`]: size !== 'default',
+    [`${k}-tooltip-content`]: true,
+    [`${k}-hoverable`]: hoverable || trigger === 'click',
+    [`${k}-always`]: always,
+    [`${k}-${theme}`]: true,
+    [`${k}-${size}`]: size !== 'default',
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
     [$props.className]: $props.className,
 };
 
 <t:super
     value={!!value && !this.isEmptyChildren}
     transition={{
-        name: 'k-fade',
+        name: `${k}-fade`,
         onEnter: this.onEnter,
         onAfterLeave: this.onAfterLeave,
         onLeaveCancelled: this.onAfterLeave,
@@ -33,7 +34,7 @@ const classNameObj = {
 >
     <b:children>
         <b:body>{children}</b:body>
-        <div class="k-tooltip-footer" v-if={confirm} key="tooltip-footer">
+        <div class={`${k}-tooltip-footer`} v-if={confirm} key="tooltip-footer">
             <b:footer>
                 <Button ev-click={this.cancel} size="small">{cancelText}</Button>
                 <Button type="primary" ev-click={this.ok} size="small">{okText}</Button>
@@ -42,8 +43,8 @@ const classNameObj = {
         <i v-if={showArrow}
             key="tooltip-arrow"
             class={{
-                "k-tooltip-arrow": true,
-                [`k-${arrowType.value}`]: arrowType.value,
+                [`${k}-tooltip-arrow`]: true,
+                [`${k}-${arrowType.value}`]: arrowType.value,
             }}
             ref={arrowRef}
         ></i>

package/components/tooltip/styles.ts

@@ -47,29 +47,29 @@ const directionMap = {
     right: 'left',
 };
 
-export default function makeStyles() {
+export default function makeStyles(k: string) {
     const arrowLong = tooltip.arrow.width;
     const arrowShort = `calc(${arrowLong} - 1px)`;
 
-    // use &.k-tooltip-content to override css in dropdown menu
+    // use &.${k}-tooltip-content to override css in dropdown menu
     return css`
-        &.k-tooltip-content {
+        &.${k}-tooltip-content {
             max-width: ${tooltip.maxWidth};
             min-width: 0;
             padding: ${tooltip.padding};
             line-height: ${tooltip.lineHeight};
-            word-wrap: break-word;
+            word-wrap: bre.${k}-word;
             pointer-events: none;
             box-shadow: ${tooltip.boxShadow};
 
             // hoverable
-            &.k-hoverable,
-            &.k-always {
+            &.${k}-hoverable,
+            &.${k}-always {
                 pointer-events: all;
             }
 
             // arrow
-            .k-tooltip-arrow {
+            .${k}-tooltip-arrow {
                 pointer-events: none;
                 &:before, & {
                     position: absolute;
@@ -80,8 +80,8 @@ export default function makeStyles() {
                 &:before {
                     content: ' ';
                 }
-                &.k-top,
-                &.k-bottom {
+                &.${k}-top,
+                &.${k}-bottom {
                     &:before, & {
                         border-width: ${arrowLong} ${arrowShort};
                     }
@@ -89,20 +89,20 @@ export default function makeStyles() {
                         left: calc(-1 * ${arrowShort});
                     }
                 }
-                &.k-top {
+                &.${k}-top {
                     top: calc(-2 * ${arrowLong});
                     &:before {
                         top: calc(-${arrowLong} + 1px);
                     }
                 }
-                &.k-bottom {
+                &.${k}-bottom {
                     bottom: calc(-2 * ${arrowLong});
                     &:before {
                         bottom: calc(-${arrowLong} + 1px);
                     }
                 }
-                &.k-left,
-                &.k-right {
+                &.${k}-left,
+                &.${k}-right {
                     &:before, & {
                         border-width: ${arrowShort} ${arrowLong};
                     }
@@ -110,13 +110,13 @@ export default function makeStyles() {
                         top: calc(-1 * ${arrowShort});
                     }
                 }
-                &.k-left {
+                &.${k}-left {
                     left: calc(-2 * ${arrowLong});
                     &:before {
                         left: calc(-${arrowLong} + 1px);
                     }
                 }
-                &.k-right {
+                &.${k}-right {
                     right: calc(-2 * ${arrowLong});
                     &:before {
                         right: calc(-${arrowLong} + 1px);
@@ -140,14 +140,14 @@ export default function makeStyles() {
                 }
 
                 return css`
-                    &.k-${theme} {
+                    &.${k}-${theme} {
                         background: ${bgColor};
                         color: ${color};
-                        .k-tooltip-arrow {
+                        .${k}-tooltip-arrow {
                             ${Object.keys(directionMap).map(direction => {
                                 const borderDirection = directionMap[direction as keyof typeof directionMap];
                                 return css`
-                                    &.k-${direction} {
+                                    &.${k}-${direction} {
                                         border-${borderDirection}-color: ${borderColor};
                                         &:before {
                                             border-${borderDirection}-color: ${bgColor};
@@ -161,15 +161,15 @@ export default function makeStyles() {
             })}
 
             // confirm
-            .k-tooltip-footer {
+            .${k}-tooltip-footer {
                 padding-top: ${tooltip.confirm.gaps};
-                .k-btn:not(:first-of-type) {
+                .${k}-btn:not(:first-of-type) {
                     margin-left: ${tooltip.confirm.gaps};
                 }
             }
 
             // size
-            &.k-small {
+            &.${k}-small {
                 padding: ${tooltip.smallPadding};
             }
         }

package/components/transfer/index.ts

@@ -5,6 +5,7 @@ import {useTransfer} from './useTransfer';
 import {useFilter, Model} from './useFilter';
 import {useCheck, CheckedKeys} from './useCheck';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 // type KeysOfType<T, U> = {
     // [P in keyof T as T[P] extends U ? P : never]: T[P]
@@ -105,6 +106,7 @@ export class Transfer<
     private transfer = useTransfer();
     private filter = useFilter(this.transfer.rightData);
     private check = useCheck(this.filter);
+    private config = useConfigContext();
 
     public getData() {
         return this.transfer.rightData.value;

package/components/transfer/index.vdt

@@ -14,21 +14,22 @@ const {
 const {getShowedData} = this.filter;
 const {enableAdd, enableRemove, add, remove} = this.transfer;
 const {isCheckAll, toggleCheckAll, onCheckboxChange, isIndeterminate} = this.check;
+const { k } = this.config;
 
 const classNameObj = {
-    'k-transfer': true,
+    [`${k}-transfer`]: true,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 const Panel = (model) => {
     const title = this.get(`${model}Title`);
     const data = getShowedData(model);
 
-    return <div class="k-transfer-panel">
-        <div class="k-transfer-title">
+    return <div class={`${k}-transfer-panel`}>
+        <div class={`${k}-transfer-title`}>
             <b:header params={model}>
-                <div class="k-transfer-count">
+                <div class={`${k}-transfer-count`}>
                     {this.get(`${model}CheckedKeys.length`)} /
                     {data.length}
                 </div>
@@ -46,15 +47,15 @@ const Panel = (model) => {
                 size="small"
             >
                 <b:prefix>
-                    <Icon class="k-icon-search" size="small" />
+                    <Icon class={`${k}-icon-search`} size="small" />
                 </b:prefix>
             </Input>
         </b:filter>
-        <div class="k-transfer-list">
+        <div class={`${k}-transfer-list`}>
             <b:list params={model}>
                 <TransitionGroup name="k-fade">
                     <div v-for={data} 
-                        class={{"k-transfer-item": true, "k-disabled": $value.disabled}}
+                        class={{[`${k}-transfer-item`]: true, [`${k}-disabled`]: $value.disabled}}
                         key={$value[keyName] || $value[labelName] || $value}
                     >
                         <Checkbox v-model={`${model}CheckedKeys`} name={model}
@@ -77,14 +78,14 @@ const Panel = (model) => {
 
 <div class={classNameObj} {...getRestProps(this)}>
     {Panel('left')}
-    <div class="k-transfer-arrows">
+    <div class={`${k}-transfer-arrows`}>
         <Button circle icon 
             disabled={!enableRemove()}
             ev-click={remove}
             type="primary"
             size="large"
         >
-            <Icon class="k-transfer-icon k-icon-left" />
+            <Icon class={`${k}-transfer-icon ${k}-icon-left`} />
         </Button>
         <Button circle icon 
             disabled={!enableAdd()}
@@ -92,7 +93,7 @@ const Panel = (model) => {
             type="primary"
             size="large"
         >
-            <Icon class="k-transfer-icon k-icon-right" />
+            <Icon class={`${k}-transfer-icon ${k}-icon-right`} />
         </Button>
     </div>
     {Panel('right')}