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

package/components/select/styles.ts

@@ -114,7 +114,7 @@ setDefault(() => {
     select = deepDefaults(theme, {select: defaults}).select;
 });
 
-export default function makeStyles() {
+export default function makeStyles(k: string) {
     return css`
         display: inline-flex;
         align-items: center;
@@ -127,37 +127,37 @@ export default function makeStyles() {
         background: ${select.bgColor};
         transition: border ${select.transition}, background ${select.transition}, box-shadow ${select.transition};
         border-radius: ${select.borderRadius};
-        .k-select-main {
+        .${k}-select-main {
             flex: 1;
             min-width: 0;
         }
-        .k-select-prefix,
-        .k-select-suffix {
+        .${k}-select-prefix,
+        .${k}-select-suffix {
             display: flex;
             align-items: center;
             position: relative;
         }
-        .k-select-suffix {
+        .${k}-select-suffix {
             margin-left: ${select.suffixGap};
             // margin-top: 1px;
         }
 
-        .k-select-placeholder {
+        .${k}-select-placeholder {
             color: ${select.placeholderColor};
             user-select: none;
         }
 
-        // add .k-input to increase priority
-        .k-input .k-input-inner {
+        // add .${k}-input to increase priority
+        .${k}-input .${k}-input-inner {
             background: transparent;
         }
 
-        &.k-fluid {
+        &.${k}-fluid {
             width: 100%;
         }
 
         // clearable
-        .k-select-clear {
+        .${k}-select-clear {
             opacity: 0;
             transition: opacity ${select.transition}, color ${select.transition} !important;
             pointer-events: none;
@@ -169,29 +169,29 @@ export default function makeStyles() {
         }
         &:hover {
             border: ${select.hoverBorder};
-            .k-select-clear.k-show {
+            .${k}-select-clear.${k}-show {
                 opacity: 1;
                 pointer-events: all;
-                + .k-select-suffix-icon {
+                + .${k}-select-suffix-icon {
                     opacity: 0;
                 }
             }
         }
-        .k-select-suffix-icon {
+        .${k}-select-suffix-icon {
             display: inline-flex;
             align-items: center;
             transition: opacity ${select.transition};
         }
 
-        .k-select-arrow {
+        .${k}-select-arrow {
             display: inline-block;
             transition: transform ${select.transition};
         }
 
         // show
-        &.k-dropdown-open {
+        &.${k}-dropdown-open {
             border: ${select.focusBorder};
-            .k-select-arrow {
+            .${k}-select-arrow {
                 transform: rotateX(180deg);
             }
         }
@@ -201,11 +201,11 @@ export default function makeStyles() {
         }
 
         // multiple
-        .k-tags {
+        .${k}-tags {
             padding: 3px 0;
         }
-        .k-tag {
-            word-break: break-word;
+        .${k}-tag {
+            word-break: bre.${k}-word;
             height: auto;
             max-width: calc(100% - ${getRight(select.tag.margin)} - 1px);
         }
@@ -220,55 +220,55 @@ export default function makeStyles() {
             `;
             if (size === 'default') return className;
             return css`
-                &.k-${size}  {
+                &.${k}-${size}  {
                     ${className}
                 }
             `
         })}
 
         // inline
-        &.k-inline {
+        &.${k}-inline {
             width: auto;
             border: none;
             min-height: 0;
             background: transparent;
-            .k-select-placeholder,
-            .k-select-value {
+            .${k}-select-placeholder,
+            .${k}-select-value {
                 line-height: inherit;
             }
         }
 
         // flat
-        &.k-flat {
+        &.${k}-flat {
             border: none;
             background: ${theme.color.bg};
             color: ${defaults.flat.color};
-            .k-tag {
+            .${k}-tag {
                 background: ${select.tag.disabledBgColor};
             }
         }
 
         // disabled (should place at last)
-        &.k-disabled {
+        &.${k}-disabled {
             color: ${select.disabled.color};
             cursor: not-allowed;
             background: ${select.disabled.bgColor};
             border-color: ${select.disabled.borderColor};
-            .k-tag {
+            .${k}-tag {
                 background: ${select.tag.disabledBgColor};
             }
         }
 
         // nowrap
-        &.k-nowrap {
-            .k-select-values {
+        &.${k}-nowrap {
+            .${k}-select-values {
                 display: flex;
                 align-items: center;
             }
-            .k-tags {
+            .${k}-tags {
                 flex: 1;
             }
-            .k-select-text {
+            .${k}-select-text {
                 white-space: nowrap;
                 overflow: hidden;
                 text-overlay: ellipsis;
@@ -277,7 +277,7 @@ export default function makeStyles() {
     `;
 }
 
-export function makeMenuStyles() {
+export function makeMenuStyles(k: string) {
     const searchable = select.searchable;
     
     return css`
@@ -287,81 +287,81 @@ export function makeMenuStyles() {
         &:not([class*="-active"]) {
             transition: left ${select.transition}, top ${select.transition};
         }
-        .k-select-empty {
+        .${k}-select-empty {
             padding: ${select.empty.padding};
             color: ${select.empty.color};
             text-align: center;
         }
-        .k-select-option {
+        .${k}-select-option {
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            &.k-active {
+            &.${k}-active {
                 color: ${select.activeColor};
             }
         }
 
         // card
-        &.k-card {
+        &.${k}-card {
             display: flex;
             height: ${select.card.height};
-            .k-tabs {
+            .${k}-tabs {
                 border: none;
                 overflow: auto;
             }
-            .k-select-group {
+            .${k}-select-group {
                 flex: 1;
                 overflow: auto;
             }
-            .k-select-option.k-hover {
+            .${k}-select-option.${k}-hover {
                 background: ${select.card.itemHoverBgColor};
                 color: ${select.card.itemHoverColor};
             }
         }
 
         // searchable
-        &.k-searchable {
+        &.${k}-searchable {
             max-height: none;
             padding: ${searchable.padding};
-            .k-select-option {
+            .${k}-select-option {
                 padding: ${searchable.optionPadding};
             }
         }
-        .k-select-header {
+        .${k}-select-header {
             display: flex;
             padding: ${searchable.header.padding};
             border-bottom: ${searchable.border};
             margin-bottom: ${searchable.header.gap};
         }
-        .k-select-op {
+        .${k}-select-op {
             white-space: nowrap;
-            .k-btn {
+            .${k}-btn {
                 padding: ${searchable.header.btnPadding};
                 margin-left: ${searchable.header.btnGap};
             }
         }
-        .k-select-body {
+        .${k}-select-body {
             max-height: ${select.menuMaxHeight};
             overflow: auto;
         }
-        .k-select-footer {
+        .${k}-select-footer {
             border-top: ${searchable.border};
             padding: ${searchable.footer.padding};
             text-align: right;
             margin-top: ${searchable.footer.gap};
-            .k-btn {
+            .${k}-btn {
                 margin-left: ${searchable.footer.btnGap};
             }
         }
-        .k-select-option {
-            .k-checkbox {
+        .${k}-select-option {
+            .${k}-checkbox {
                 margin: 0 -${getRight(searchable.optionPadding)} 0 -${getLeft(searchable.optionPadding)};
                 padding: ${searchable.optionPadding};
             }
         }
 
         // multiple checkmark
-        .k-select-checkmark {
+        .${k}-select-checkmark {
             float: right;
             height: 100%;
             font-size: ${select.multiple.checkmark.fontSize};
@@ -369,9 +369,9 @@ export function makeMenuStyles() {
     `;
 }
 
-export function makeGroupStyles() {
+export function makeGroupStyles(k: string) {
     return css`
-        .k-select-group-label {
+        .${k}-select-group-label {
             color: ${select.group.labelColor};
             padding: ${select.group.labelPadding};
         }

package/components/skeleton/item.ts

@@ -1,5 +1,6 @@
 import {Component, TypeDefs} from 'intact';
 import template from './item.vdt';
+import { useConfigContext } from '../config';
 
 type ItemType = 'text' | 'avator' | 'image' | 'button' | 'input';
 
@@ -25,6 +26,8 @@ export class SkeletonItem extends Component<SkeletonItemProps, SkeletonItemEvent
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
+
+    private config = useConfigContext();
 }
 
 

package/components/skeleton/item.vdt

@@ -1,16 +1,17 @@
-import {makeItemStyles} from './style';
+import {makeItemStyles} from './styles';
 import {getRestProps} from '../utils';
 
 const {type} = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-skeleton-item': true,
-    [makeItemStyles()]: true
+    [`${k}-skeleton-item`]: true,
+    [makeItemStyles(k)]: true
 };
 
 const ItemklsObj = {
-    'k-skeleton-item-box': true,
-    [`skeleton-item-${type}`]: true
+    [`${k}-skeleton-item-box`]: true,
+    [`${k}-skeleton-item-${type}`]: true
 };
 
 const skeletonItem = <div class={ItemklsObj} {...getRestProps(this)}>

package/components/skeleton/skeleton.ts

@@ -1,5 +1,6 @@
 import {Component, TypeDefs} from 'intact';
 import template from './skeleton.vdt';
+import { useConfigContext } from '../config';
 
 export interface SkeletonProps {
     loading: boolean
@@ -30,4 +31,6 @@ export class Skeleton extends Component<SkeletonProps, SkeletonEvents, SkeletonB
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;
+
+    private config = useConfigContext();
 }

package/components/skeleton/skeleton.vdt

@@ -1,7 +1,8 @@
 import {SkeletonItem} from './item';
-import {makeStyles, kls} from './style';
+import {makeStyles, kls} from './styles';
 
 const {rows, avator, animated, children, loading, size} = this.get();
+const { k } = this.config;
 
 const targetRows = typeof rows !== 'number'
     ? 3
@@ -13,9 +14,9 @@ const skeletonList = Array(targetRows + 2).fill();
 const skeletonItems = <SkeletonItem v-for={skeletonList}></SkeletonItem>;
 
 const classNameObj = {
-    'k-skeleton': true,
-    'k-animated': animated,
-    [makeStyles(size)]: true
+    [`${k}-skeleton`]: true,
+    [`${k}-animated`]: animated,
+    [makeStyles(k, size)]: true
 };
 
 <div class={classNameObj} v-if={loading}>
@@ -23,10 +24,10 @@ const classNameObj = {
         <div>{children}</div>
     </template>
     <template v-else>
-        <div v-if={avator} class={kls('avator-box')}>
+        <div v-if={avator} class={kls('avator-box', k)}>
             <SkeletonItem type="avator"></SkeletonItem>
-            <div class="k-skeleton-items">{skeletonItems}</div>
+            <div class={`${k}-skeleton-items`}>{skeletonItems}</div>
         </div>
-        <div class="k-skeleton-items" v-else>{skeletonItems}</div>
+        <div class={`${k}-skeleton-items`} v-else>{skeletonItems}</div>
     </template>
 </div>

package/components/skeleton/{style.ts → styles.ts}

@@ -3,7 +3,7 @@ import { theme, setDefault } from '../../styles/theme';
 import {css, keyframes} from '@emotion/css';
 import '../../styles/global';
 
-export const kls = (className: string) => `k-skeleton-${className}`;
+export const kls = (className: string, k: string) => `${k}-skeleton-${className}`;
 
 type ItemSize = 'default' | 'large' | 'small' | 'mini';
 
@@ -18,38 +18,38 @@ setDefault(() => {
     skeleton = deepDefaults(theme, {skeleton: defaults}).skeleton;
 });
 
-export function makeStyles(size: ItemSize) {
+export function makeStyles(k: string, size: ItemSize) {
     return css`
-        &.k-animated {
-            .${kls('item')} {
-                & > .k-skeleton-item-box {
+        &.${k}-animated {
+            .${kls('item', k)} {
+                & > .${k}-skeleton-item-box {
                     background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%);
                     background-size: 400% 100%;
                     animation: ${skeletonLoading} 1.4s ease infinite;
                 }
             }
         }
-        .k-skeleton-items {
-            .${kls('item')}:first-child {
-                .skeleton-item-text {
+        .${k}-skeleton-items {
+            .${kls('item', k)}:first-child {
+                .${k}-skeleton-item-text {
                     width: 33%;
                 }
             }
-            .${kls('item')}:last-child {
-                .skeleton-item-text {
+            .${kls('item', k)}:last-child {
+                .${k}-skeleton-item-text {
                     width: 61%;
                 }
             }    
         }
-        .${kls('avator-box')} {
+        .${kls('avator-box', k)} {
             display: flex;
             & > div:last-child {
                 flex-grow: 1;
                 padding-left: 20px;
             }
         }
-        .skeleton-item-button,
-        .skeleton-item-input {
+        .${k}-skeleton-item-button,
+        .${k}-skeleton-item-input {
             height: ${theme[size].height}
         }
     `;
@@ -64,24 +64,24 @@ const skeletonLoading = keyframes`
     }
 `;
 
-export function makeItemStyles() {
+export function makeItemStyles(k: string) {
     const skeletonItem = skeleton.item;
     return css`
         & > div {
             background: ${skeletonItem.bgColor}
         }        
-        .skeleton-item-text {
+        .${k}-skeleton-item-text {
             width: 100%;
             height: 16px;
             border-radius: 4px;
             margin-top: 16px;
         }
-        .skeleton-item-avator {
+        .${k}-skeleton-item-avator {
             width: 40px;
             height: 40px;
             border-radius: 50%;
         }
-        .skeleton-item-image {
+        .${k}-skeleton-item-image {
             display: flex;
             justify-content: center;
             align-items: center;
@@ -93,11 +93,11 @@ export function makeItemStyles() {
                 fill: ${skeletonItem.bgColor};
             }
         }
-        .skeleton-item-button {
+        .${k}-skeleton-item-button {
             width: 64px;
             background: ${skeletonItem.bgColor};
         }
-        .skeleton-item-input {
+        .${k}-skeleton-item-input {
             width: 160px;
             background: ${skeletonItem.bgColor};
         }

package/components/slider/index.ts

@@ -12,6 +12,7 @@ import {usePoints} from './usePoints';
 import {Marks, useMarks} from './useMarks';
 import {useTooltip} from './useTooltip';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 export interface SliderProps<Range extends boolean = boolean> {
     max?: number
@@ -120,4 +121,5 @@ export class Slider<
         this.step
     );
     private marks = useMarks();
+    private config = useConfigContext();
 }

package/components/slider/index.vdt

@@ -16,13 +16,14 @@ const {
     firstThumbRef, secondThumbRef,
     onFocusin
 } = this.draggable;
+const { k } = this.config;
 
 const classNameObj = {
-    'k-slider': true,
-    'k-disabled': disabled,
-    'k-dragging': dragging.value || !animate,
+    [`${k}-slider`]: true,
+    [`${k}-disabled`]: disabled,
+    [`${k}-dragging`]: dragging.value || !animate,
     [className]: className,
-    [makeStyles()]: true,
+    [makeStyles(k)]: true,
 };
 
 const {barStyle, thumbFirstStyle, thumbSecondStyle} = this.styles();
@@ -33,14 +34,14 @@ const tooltipProps = getTooltipProps();
 const tooltip = value => <b:tooltip params={value}>{value}</b:tooltip>
 const createThumb = (thumbStyle, isFirst, ref, value, tooltipRef) => {
     return (
-        <div class="k-slider-thumb-wrapper" style={thumbStyle}>
+        <div class={`${k}-slider-thumb-wrapper`} style={thumbStyle}>
             <Tooltip
                 disabled={!showTooltip}
                 ref={tooltipRef}
                 {...tooltipProps}
-                class="k-slider-tooltip"
+                class={`${k}-slider-tooltip`}
             >
-                <div class="k-slider-thumb"
+                <div class={`${k}-slider-thumb`}
                     tabindex={disabled ? '-1' : '0'}
                     ev-mousedown={onStart}
                     ev-focusin={linkEvent(isFirst, onFocusin)}
@@ -59,10 +60,10 @@ const {onClickTrack, setOneValue} = this.click;
 const points = this.points();
 const marks = this.marks();
 <div class={classNameObj} {...getRestProps(this)}>
-    <div class="k-slider-main">
-        <div class="k-slider-track-wrapper" ev-click={onClickTrack}>
-            <div class="k-slider-track" ref={trackRef}>
-                <div class="k-slider-bar" style={barStyle}></div>
+    <div class={`${k}-slider-main`}>
+        <div class={`${k}-slider-track-wrapper`} ev-click={onClickTrack}>
+            <div class={`${k}-slider-track`} ref={trackRef}>
+                <div class={`${k}-slider-bar`} style={barStyle}></div>
                 {createThumb(
                     thumbFirstStyle,
                     true,
@@ -80,24 +81,24 @@ const marks = this.marks();
                     )}
                 </template>
                 <i v-for={points}
-                    class={{'k-slider-point': true, 'k-active': $value.active}}
+                    class={{[`${k}-slider-point`]: true, [`${k}-active`]: $value.active}}
                     style={$value.style}
                 ></i>
             </div>
         </div>
-        <div class="k-slider-marks" v-if={marks.length}>
+        <div class={`${k}-slider-marks`} v-if={marks.length}>
             <span v-for={marks}
                 style={$value.style}
                 ev-click={linkEvent($value.value, setOneValue)}
-                class={{'k-active': $value.active}}
+                class={{[`${k}-active`]: $value.active}}
             >{$value.text}</span>
         </div>
-        <div class="k-slider-ends" v-else-if={showEnd}>
+        <div class={`${k}-slider-ends`} v-else-if={showEnd}>
             <span ev-click={linkEvent(min, setOneValue)}>{min + unit}</span>
             <span ev-click={linkEvent(max, setOneValue)}>{max + unit}</span>
         </div>
     </div>
-    <div class="k-slider-spinner" v-if={showInput}>
+    <div class={`${k}-slider-spinner`} v-if={showInput}>
         {(() => {
             const props = {
                 disabled,
@@ -117,7 +118,7 @@ const marks = this.marks();
                     {...spinnerProps}
                 />
                 <template v-if={range}>
-                    <span class="k-slider-spinner-sep">-</span>
+                    <span class={`${k}-slider-spinner-sep`}>-</span>
                     <Spinner
                         {...props}
                         min={value[0]}