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

package/components/radio/index.ts

@@ -2,6 +2,7 @@ import {Component, ComponentConstructor, TypeDefs, inject, createRef} from 'inta
 import {bind} from '../utils';
 import template from './index.vdt';
 import type {CommonInputHTMLAttributes, Events} from '../types';
+import { useConfigContext } from '../config';
 
 export interface RadioProps<Value = false, True = true> extends CommonInputHTMLAttributes {
     disabled?: boolean
@@ -40,6 +41,7 @@ export class Radio<
     static events = events;
 
     private elementRef = createRef<HTMLInputElement>();
+    private config = useConfigContext();
 
     @bind
     private onKeypress(e: KeyboardEvent): void {

package/components/radio/index.vdt

@@ -7,13 +7,14 @@ const {
     children, value, ref, key, title, ...rest
 } = this.get();
 const isChecked = value === trueValue;
+const { k } = this.config;
 
 const classNameObj = {
-    'k-radio': true,
-    'k-disabled': disabled,
-    'k-checked': isChecked,
+    [`${k}-radio`]: true,
+    [`${k}-disabled`]: disabled,
+    [`${k}-checked`]: isChecked,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 // let evClick;
@@ -43,7 +44,7 @@ const events = [
     ev-click={this.fixClick}
 >
     <Wave disabled={disabled} inset="-2px">
-        <span class="k-radio-wrapper">
+        <span class={`${k}-radio-wrapper`}>
             <input
                 { ...getRestProps(this, rest) }
                 type="radio"
@@ -56,5 +57,5 @@ const events = [
             />
         </span>
     </Wave>
-    <span class="k-radio-text" v-if={children}>{children}</span>
+    <span class={`${k}-radio-text`} v-if={children}>{children}</span>
 </label>

package/components/radio/styles.ts

@@ -36,13 +36,13 @@ setDefault(() => {
     radio = deepDefaults(theme, {radio: defaults}).radio;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
         cursor: pointer;
         vertical-align: middle;
-        .k-radio-wrapper {
+        .${k}-radio-wrapper {
             width: ${radio.width};
             height: ${radio.width};
             border: 1px solid ${radio.borderColor};
@@ -69,7 +69,7 @@ export function makeStyles() {
             }
         }
         &:hover {
-            .k-radio-wrapper {
+            .${k}-radio-wrapper {
                 border: 1px solid ${radio.hoverBorderColor};
             }
         }
@@ -81,14 +81,14 @@ export function makeStyles() {
             cursor: pointer;
             position: absolute;
         }    
-        .k-radio-text {
+        .${k}-radio-text {
             margin-left: ${radio.textGap};
             flex: 0 1 auto;
         }
 
         // checked
-        &.k-checked {
-            .k-radio-wrapper {
+        &.${k}-checked {
+            .${k}-radio-wrapper {
                 border-color: ${radio.checkedColor};
                 &:before {
                     transform: scale(1);
@@ -99,24 +99,24 @@ export function makeStyles() {
         // focus
         &:focus {
             outline: none;
-            .k-radio-wrapper {
+            .${k}-radio-wrapper {
                 border-color: ${radio.checkedColor};
             }    
         }    
 
         // disabled
-        &.k-disabled {
+        &.${k}-disabled {
             color: ${radio.disabled.color};
             cursor: not-allowed;
-            .k-radio-wrapper {
+            .${k}-radio-wrapper {
                 border-color: ${radio.disabled.borderColor};
                 background: ${radio.disabled.bgColor};   
             }
             input {
                 cursor: not-allowed;
             }
-            &.k-checked {
-                .k-radio-wrapper {
+            &.${k}-checked {
+                .${k}-radio-wrapper {
                     border-color: ${radio.disabled.checked.borderColor};
                     background: ${radio.disabled.checked.bgColor};
                     &:before {

package/components/rate/index.ts

@@ -2,6 +2,7 @@ import {Component, TypeDefs} from 'intact';
 import template from './index.vdt';
 import {useActiveValue} from './useActiveValue';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 export interface RateProps {
     value?: number,
@@ -43,4 +44,5 @@ export class Rate extends Component<RateProps, RateEvents, RateBlocks> {
     static events = events;
 
     private activeValue = useActiveValue();
+    private config = useConfigContext();
 }

package/components/rate/index.vdt

@@ -5,12 +5,13 @@ import {Icon} from '../icon';
 
 const {className, count, disabled, half} = this.get();
 const {activeValue, onClick, onMouseEnter, onMouseLeaveComponent} = this.activeValue;
+const { k } = this.config;
 
 const classNameObj = {
-    'k-rate': true,
-    'k-disabled': disabled,
+    [`${k}-rate`]: true,
+    [`${k}-disabled`]: disabled,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 const icon = <b:icon><Icon class="ion-android-star" /></b:icon>
@@ -26,13 +27,13 @@ const rateIcon = function(className, step) {
 const items = [];
 for(let i = 0; i < count; i++) {
     const className = activeValue.value >= i + 1 ? 
-        'k-full' : activeValue.value === i + 0.5 ? 
-            'k-half' : null;
+        [`${k}-full`] : activeValue.value === i + 0.5 ? 
+            [`${k}-half`] : null;
     const halfStep = half ? i + 0.5 : i + 1;
     const item = (
-        <div class={{"k-rate-item": true, [className]: className}}>
-            {rateIcon("k-rate-first", halfStep)}
-            {rateIcon("k-rate-second", i + 1)}
+        <div class={{[`${k}-rate-item`]: true, [className]: className}}>
+            {rateIcon(`${k}-rate-first`, halfStep)}
+            {rateIcon(`${k}-rate-second`, i + 1)}
         </div>
     );
     items.push(item);

package/components/rate/styles.ts

@@ -20,10 +20,10 @@ setDefault(() => {
     rate = deepDefaults(theme, {rate: defaults}).rate;
 });
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         display: inline-block;
-        .k-rate-item {
+        .${k}-rate-item {
             display: inline-block;
             margin-right: ${rate.item.gap};
             cursor: pointer;
@@ -33,16 +33,16 @@ export function makeStyles() {
             &:hover {
                 transform: ${rate.item.hoverTransform};
             }
-            &.k-full {
+            &.${k}-full {
                 color: ${rate.activeColor};
             }
-            &.k-half {
-                .k-rate-first {
+            &.${k}-half {
+                .${k}-rate-first {
                     color: ${rate.activeColor};
                 }
             }
         }
-        .k-rate-first {
+        .${k}-rate-first {
             position: absolute;
             top: 0;
             left: 0;
@@ -50,14 +50,14 @@ export function makeStyles() {
             height: 100%;
             overflow: hidden;
         }
-        .k-icon {
+        .${k}-icon {
             font-size: ${rate.iconFontSize};
             color: inherit;
         }
             
         // disabled
-        &.k-disabled {
-            .k-rate-item {
+        &.${k}-disabled {
+            .${k}-rate-item {
                 cursor: default;
                 &:hover {
                     transform: none;

package/components/scrollSelect/index.ts

@@ -4,6 +4,7 @@ import {bind, toggleArray} from '../utils';
 import {useList} from './useList';
 import {useTranslate} from './useTranslate';
 import {useMouseEvents} from './useMouseEvents';
+import { useConfigContext } from '../config';
 
 export interface ScrollSelectProps<T = any> {
     value?: T 
@@ -50,4 +51,5 @@ export class ScrollSelect<T = any> extends Component<ScrollSelectProps<T>, Scrol
         this.translate.translate,
         this.list,
     );
+    private config = useConfigContext();
 }

package/components/scrollSelect/index.vdt

@@ -2,18 +2,19 @@ import {makeStyles} from './styles';
 import {getRestProps} from '../utils';
 
 const {value, disabled, disable} = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-scroll-select': true, 
-    'k-dragging': this.mouseEvents.dragging.value,
-    'k-disabled': disabled,
-    [makeStyles()]: true,
+    [`${k}-scroll-select`]: true, 
+    [`${k}-dragging`]: this.mouseEvents.dragging.value,
+    [`${k}-disabled`]: disabled,
+    [makeStyles(k)]: true,
 }
 
 const {onStart, onWheel, onClick} = this.mouseEvents;
 
 <div {...getRestProps(this)} class={classNameObj}>
-    <div class="k-scroll-select-wrapper"
+    <div class={`${k}-scroll-select-wrapper`}
         style={{
             transform: `translateY(${this.translate.translate.value}px)`,
             marginTop: `${this.mouseEvents.marginTop.value}px`,
@@ -23,16 +24,16 @@ const {onStart, onWheel, onClick} = this.mouseEvents;
     >
         <div
             class={{
-                "k-scroll-select-item": true,
-                "k-active": $value.value === value,
-                "k-disabled": disabled || disable && disable.call(this, $value.value), 
+                [`${k}-scroll-select-item`]: true,
+                [`${k}-active`]: $value.value === value,
+                [`${k}-disabled`]: disabled || disable && disable.call(this, $value.value), 
             }}
             v-for={this.list.data.value}
             ev-click={!disabled ? onClick.bind(this, $value, $key) : null}
         >{$value.label}</div>
     </div>
-    <div class="k-scroll-select-append" v-if={$blocks.append}>
+    <div class={`${k}-scroll-select-append`} v-if={$blocks.append}>
         <b:append />
     </div>
-    <div class="k-scroll-select-border"></div>
+    <div class={`${k}-scroll-select-border`}></div>
 </div>

package/components/scrollSelect/styles.ts

@@ -32,7 +32,7 @@ setDefault(() => {
 
 export {scrollSelect};
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         text-align: center;
         overflow: hidden;
@@ -40,23 +40,23 @@ export function makeStyles() {
         height: ${scrollSelect.height};
         user-select: none;
         position: relative;
-        .k-scroll-select-wrapper {
+        .${k}-scroll-select-wrapper {
             transition: transform ${scrollSelect.transition};
         }
-        &.k-dragging {
-            .k-scroll-select-wrapper {
+        &.${k}-dragging {
+            .${k}-scroll-select-wrapper {
                 transition: none;
             }
         }
 
-        &.k-disabled {
-            .k-scroll-select-item {
+        &.${k}-disabled {
+            .${k}-scroll-select-item {
                 cursor: not-allowed;
                 color: ${scrollSelect.item.disabledColor};
             }
         }
 
-        .k-scroll-select-item {
+        .${k}-scroll-select-item {
             line-height: ${scrollSelect.item.height};
             color: ${scrollSelect.item.color};
             cursor: pointer;
@@ -64,23 +64,23 @@ export function makeStyles() {
             &:hover {
                 background: ${scrollSelect.item.hoverBgColor };
             }
-            &.k-active {
+            &.${k}-active {
                 color: ${scrollSelect.item.activeColor};
                 font-size: ${scrollSelect.item.activeFontSize};
             }
-            &.k-disabled {
+            &.${k}-disabled {
                 color: ${scrollSelect.item.disabledColor};
             }
         }
 
-        .k-scroll-select-append {
+        .${k}-scroll-select-append {
             position: absolute;
             top: 50%;
             right: 0;
             transform: translateY(-50%);
         }
 
-        .k-scroll-select-border {
+        .${k}-scroll-select-border {
             position: absolute;
             width: 100%;
             top: 50%;

package/components/select/base.ts

@@ -19,6 +19,7 @@ import {useFocusout} from './useFocusout';
 import type {Events} from '../types';
 import {isNullOrUndefined} from 'intact-shared';
 import { useDraggable } from './useDraggble';
+import { useConfigContext } from '../config';
 
 export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach = V | null> {
     value?: Multipe extends true ? V[] : Attach
@@ -106,6 +107,7 @@ export abstract class BaseSelect<
     public input = useInput(this.resetKeywords);
     private focusout = useFocusout();
     private draggable = useDraggable();
+    protected config = useConfigContext();
 
     init() {
         provide(SELECT, this);

package/components/select/base.vdt

@@ -19,18 +19,19 @@ const {
     position, flat, nowrap,
     draggable,
 } = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-select': true,
-    'k-disabled': disabled,
-    [`k-${size}`]: size !== 'default',
-    'k-fluid': fluid,
-    'k-inline': inline,
-    'k-flat': flat,
-    'k-nowrap': nowrap,
+    [`${k}-select`]: true,
+    [`${k}-disabled`]: disabled,
+    [`${k}-${size}`]: size !== 'default',
+    [`${k}-fluid`]: fluid,
+    [`${k}-inline`]: inline,
+    [`${k}-flat`]: flat,
+    [`${k}-nowrap`]: nowrap,
     [className]: className,
     [$props.className]: $props.className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 const placeholder = this.getPlaceholder();
@@ -39,7 +40,7 @@ const hasValue = this.hasValue();
 const {onInput, inputRef, keywords: {value: keywords}} = this.input;
 const {onFocusout, triggerRef} = this.focusout;
 const filterInput = <Input v-if={filterable}
-    class="k-select-input"
+    class={`${k}-select-input`}
     value={keywords}
     ev-$change:value={onInput}
     disabled={disabled}
@@ -73,10 +74,10 @@ const filterInput = <Input v-if={filterable}
                     style={!isNullOrUndefined(width) ? addStyle(style, {width: `${width}px`}) : style}
                     ref={triggerRef}
                 >
-                    <div class="k-select-prefix" v-if={$blocks.prefix}>
+                    <div class={`${k}-select-prefix`} v-if={$blocks.prefix}>
                         <b:prefix />
                     </div>
-                    <div class="k-select-main">
+                    <div class={`${k}-select-main`}>
                         <input type="hidden" value={value} name={name} key="hidden-input" />
                         {/* TODO: Need mode on Transition */}
                         <TransitionGroup name="k-fade" appear={false}>
@@ -94,16 +95,16 @@ const filterInput = <Input v-if={filterable}
                                 waveDisabled={true}
                                 flat={flat}
                             />
-                            <div class="k-select-placeholder c-ellipsis"
+                            <div class={`${k}-select-placeholder c-ellipsis`}
                                 v-else-if={!filterable && !hasValue}
                                 key="placeholder"
                             >{placeholder}</div>
-                            <div class="k-select-value c-ellipsis" v-else-if={!multiple} key="value">
+                            <div class={`${k}-select-value c-ellipsis`} v-else-if={!multiple} key="value">
                                 <b:value params={[value, label]}>
                                     {label}
                                 </b:value>
                             </div>
-                            <div v-else key="values" class="k-select-values">
+                            <div v-else key="values" class={`${k}-select-values`}>
                                 <b:values params={[value, label]}>
                                     <Tags v-if={label && label.length || filterable}
                                         nowrap={nowrap}
@@ -139,19 +140,19 @@ const filterInput = <Input v-if={filterable}
                             </div>
                         </TransitionGroup>
                     </div>
-                    <span class="k-select-suffix" v-if={!hideIcon || clearable || loading || $blocks.suffix}>
+                    <span class={`${k}-select-suffix`} v-if={!hideIcon || clearable || loading || $blocks.suffix}>
                         <Icon v-if={clearable && !disabled}
-                            class={{"k-select-clear ion-ios-close": true, "k-show": hasValue}}
+                            class={{[`${k}-select-clear ion-ios-close`]: true, [`${k}-show`]: hasValue}}
                             ev-click={this.clear}
                             hoverable
                         />
-                        <span class="k-select-suffix-icon">
+                        <span class={`${k}-select-suffix-icon`}>
                             <b:suffix>
                                 <Icon class="ion-load-c" rotate v-if={loading} />
                                 <template v-else-if={!hideIcon}>
-                                    <Icon class="k-icon-search" v-if={filterable && show} />
+                                    <Icon class={`${k}-icon-search`} v-if={filterable && show} />
                                     <Icon v-else
-                                        class="k-select-arrow k-icon-down"
+                                        class={`${k}-select-arrow ${k}-icon-down`}
                                         disabled={$props.isDisableArrow}
                                     />
                                 </template>

package/components/select/group.ts

@@ -2,6 +2,7 @@ import {Component, TypeDefs, inject, Children, VNode} from 'intact';
 import template from './group.vdt';
 import {SELECT} from './constants';
 import type {Select} from './select';
+import { useConfigContext } from '../config';
 
 export interface OptionGroupProps {
     label?: Children 
@@ -22,4 +23,5 @@ export class OptionGroup extends Component<OptionGroupProps, OptionGroupEvents,
     static typeDefs = typeDefs;
 
     private select: Select = inject(SELECT)!;
+    private config = useConfigContext();
 }

package/components/select/group.vdt

@@ -3,15 +3,16 @@ import {getRestProps} from '../utils';
 
 const {children, label, className} = this.get();
 const {card} = this.select.get();
+const { k } = this.config;
 
 const classNameObj = {
-    "k-select-group": true,
+    [`${k}-select-group`]: true,
     [className]: className,
-    [makeGroupStyles()]: true,
+    [makeGroupStyles(k)]: true,
 }
 
 <div {...getRestProps(this)} class={classNameObj}>
-    <div class="k-select-group-label" v-if={!card}>
+    <div class={`${k}-select-group-label`} v-if={!card}>
         <b:label>{label}</b:label>
     </div>
     {children}

package/components/select/menu.ts

@@ -6,6 +6,7 @@ import {isNullOrUndefined, isStringOrNumber, EMPTY_OBJ} from 'intact-shared';
 import {getTextByChildren, eachChildren} from '../utils';
 import {useCard} from './useCard';
 import {useSearchable} from './useSearchable';
+import { useConfigContext } from '../config';
 
 export class SelectMenu extends Component<{values: any[]}> {
     static template = template;
@@ -13,4 +14,5 @@ export class SelectMenu extends Component<{values: any[]}> {
     public select: Select<any, boolean> = inject(SELECT)!;
     private card = useCard(this.select.label.activeIndices);
     private searchable = useSearchable();
+    private config = useConfigContext();
 }

package/components/select/menu.vdt

@@ -12,13 +12,14 @@ import {Tabs, Tab} from '../tabs';
 
 let {children, className} = this.get();
 const {card, searchable, multiple} = this.select.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-select-menu': true,
-    'k-card': card,
-    'k-searchable': searchable,
+    [`${k}-select-menu`]: true,
+    [`${k}-card`]: card,
+    [`${k}-searchable`]: searchable,
     [className]: className,
-    [makeMenuStyles()]: true,
+    [makeMenuStyles(k)]: true,
 }
 
 if (card) {
@@ -41,7 +42,7 @@ if (card) {
 
 if (isEmptyChildren(children)) {
     children = (
-        <div v-else class="k-select-empty">
+        <div v-else class={`${k}-select-empty`}>
             {_$('无数据')}
         </div>
     );
@@ -54,16 +55,16 @@ if (searchable) {
 
     children = (
         <Provider value={checkedKeys}>
-            <div class="k-select-header">
+            <div class={`${k}-select-header`}>
                 <Input fluid size="small" placeholder={_$('请输入关键字')}
                     value={keywords.value}
                     ev-$change:value={onInput}
                     clearable
                     waveDisabled={true}
                 >
-                    <b:suffix><Icon class="k-icon-search" /></b:suffix>
+                    <b:suffix><Icon class={`${k}-icon-search`} /></b:suffix>
                 </Input>
-                <div class="k-select-op" v-if={multiple}>
+                <div class={`${k}-select-op`} v-if={multiple}>
                     <Button type="link" size="small"
                         ev-click={selectAll}
                     >{_$('全选')}</Button>
@@ -75,10 +76,10 @@ if (searchable) {
                     >{_$('清空')}</Button>
                 </div>
             </div>
-            <div class="k-select-body">
+            <div class={`${k}-select-body`}>
                 {children}
             </div>
-            <div class="k-select-footer" v-if={multiple}>
+            <div class={`${k}-select-footer`} v-if={multiple}>
                 <Button size="small" ev-click={this.select.hide}>{_$('取消')}</Button>
                 <Button type="primary" size="small" ev-click={confirm}>{_$('确定')}</Button>
             </div>

package/components/select/option.ts

@@ -3,7 +3,7 @@ import template from './option.vdt';
 import {bind, toggleArray} from '../utils';
 import {SELECT} from './constants';
 import type {Select} from './select';
-import {useRecordItem} from '../../hooks/useRecordComponent';
+import { useConfigContext } from '../config';
 
 export interface OptionProps {
     value: any
@@ -24,6 +24,7 @@ export class Option extends Component<OptionProps> {
     static typeDefs = typeDefs;
 
     private select: Select<any> = inject(SELECT)!;
+    private config = useConfigContext();
 
     @bind
     private onSelect() {

package/components/select/option.vdt

@@ -8,12 +8,13 @@ import {context} from './useSearchable';
 
 const {children, className, disabled, label} = this.get();
 const {multiple, searchable} = this.select.get();
+const { k } = this.config;
 
 const isActive = this.isActive();
 const classNameObj = {
-    'k-select-option': true,
+    [`${k}-select-option`]: true,
     [className]: className,
-    'k-active': isActive,
+    [`${k}-active`]: isActive,
 };
 
 let _children = isEmptyChildren(children) ? label : children;
@@ -42,7 +43,7 @@ if (searchable && multiple) {
     {_children}
     <Transition name="k-scale" v-if={!searchable}>
         <Icon v-if={multiple && isActive}
-            class="k-select-checkmark ion-ios-checkmark-empty"
+            class={`${k}-select-checkmark ion-ios-checkmark-empty`}
             color="primary"
         />
     </Transition>