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

package/components/dropdown/demos/nested.md

@@ -66,7 +66,7 @@ import {Dropdown, DropdownMenu, DropdownItem, Button, Icon} from 'kpc';
 /.dropdown-demo.k-dropdown-menu
     .k-icon
         float right
-        height 32px
+        line-height 32px
         &:before
             font-size inherit
 .k-icon

package/components/dropdown/dropdown.ts

@@ -22,6 +22,7 @@ import {useShowHideEvents} from '../../hooks/useShowHideEvents';
 import {usePosition, FeedbackCallback} from './usePosition';
 import type {Events} from '../types';
 import { Virtual } from '../virtual';
+import { useConfigContext } from '../config';
 
 export type Position = Options 
 export type PositionShorthand = 'left' | 'bottom' | 'right' | 'top'
@@ -114,8 +115,9 @@ export class Dropdown<
         const [trigger, menu] = children as DropdownChildren;
         const props = this.initEventCallbacks(); 
         let {className, value, container} = this.get();
+        const { k } = this.config;
         className = cx({
-            'k-dropdown-open': value,
+            [`${k}-dropdown-open`]: value,
             [className!]: !!className,
         });
     
@@ -132,6 +134,7 @@ export class Dropdown<
     public rootDropdown: Dropdown | null = null;
     public showedDropdown: Dropdown | null = null;
     public positionHook = usePosition();
+    private config = useConfigContext();
 
     protected timer: number | undefined = undefined;
 

package/components/dropdown/item.ts

@@ -6,6 +6,7 @@ import {Dropdown, DROPDOWN} from './dropdown';
 import {DropdownMenu, DROPDOWN_MENU} from './menu';
 import {IgnoreClickEvent} from '../../hooks/useDocumentClick';
 import { Dropdown as ExportDropdown, DropdownMenu as ExportDropdownMenu } from '.';
+import { useConfigContext } from '../config';
 
 export interface DropdownItemProps {
     disabled?: boolean
@@ -42,6 +43,7 @@ export class DropdownItem extends Component<DropdownItemProps, DropdownItemEvent
     private dropdown: Dropdown | null = null;
     private keyboard: ReturnType<typeof useKeyboardForDropdownItem> | null = null;
     private dropdownMenu: DropdownMenu | null = null;
+    private config = useConfigContext();
 
     init() {
         this.dropdown = inject<Dropdown>(DROPDOWN)!;

package/components/dropdown/item.vdt

@@ -6,13 +6,14 @@ const {
 
     _isFocus,
 } = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-dropdown-item': true,
-    'k-disabled': disabled,
+    [`${k}-dropdown-item`]: true,
+    [`${k}-disabled`]: disabled,
     [className]: className,
-    'k-hover': this.keyboard.isFocus.value,
-    [makeItemStyles()]: true,
+    [`${k}-hover`]: this.keyboard.isFocus.value,
+    [makeItemStyles(k)]: true,
 }
 
 <div {...getRestProps(this)}

package/components/dropdown/menu.ts

@@ -6,6 +6,7 @@ import {useTransition} from './useTransition';
 import {useMenuKeyboard} from './useKeyboard';
 import {useMouseOutsidable} from '../../hooks/useMouseOutsidable';
 import {FeedbackCallback} from './usePosition';
+import { useConfigContext } from '../config';
 
 export interface DropdownMenuProps { }
 export interface DropdownMenuEvents { }
@@ -25,6 +26,7 @@ export class DropdownMenu<
     public keyboard = useKeyboardForDropdownMenu(this.dropdown);
 
     private transition = useTransition((callback: FeedbackCallback) => this.dropdown.position(callback));
+    private config = useConfigContext();
 
     init() {
         provide(DROPDOWN_MENU, this);

package/components/dropdown/menu.vdt

@@ -3,12 +3,13 @@ import {makeMenuStyles} from './styles';
 
 const {value, trigger, container} = this.dropdown.get();
 const {children, className} = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-dropdown-menu': true,
+    [`${k}-dropdown-menu`]: true,
     [className]: className,
     [$props.className]: $props.className,
-    [makeMenuStyles()]: true,
+    [makeMenuStyles(k)]: true,
 };
 
 const transition = $props.transition || {css: false, ...this.transition};

package/components/dropdown/styles.ts

@@ -27,7 +27,7 @@ setDefault(() => {
     dropdown = deepDefaults(theme, {dropdown: defaults}).dropdown;
 });
 
-export function makeMenuStyles() {
+export function makeMenuStyles(k: string) {
     return css`
         position: absolute;
         min-width: ${dropdown.menu.minWidth};
@@ -40,20 +40,20 @@ export function makeMenuStyles() {
         left: 0;
         
         // nested dropdown
-        .k-dropdown {
+        .${k}-dropdown {
             display: block;
         }
     `
 }
 
-export function makeItemStyles() {
+export function makeItemStyles(k: string) {
     return css`
         padding: ${dropdown.item.padding};
         cursor: pointer;
         white-space: nowrap;
         height: ${dropdown.item.height};
         line-height: ${dropdown.item.height};
-        &.k-hover {
+        &.${k}-hover {
             background: ${dropdown.item.hoverBgColor};
         }
         &:first-of-type {
@@ -64,25 +64,25 @@ export function makeItemStyles() {
         }
 
         // disabled
-        &.k-disabled {
+        &.${k}-disabled {
             background: ${dropdown.item.disabledBgColor};
             color: ${dropdown.item.disabledColor};
             cursor: not-allowed;
         }
 
         // checkbox / radio
-        .k-checkbox,
-        .k-radio {
+        .${k}-checkbox,
+        .${k}-radio {
             display: flex;
             margin: 0 -${getRight(dropdown.item.padding)} 0 -${getLeft(dropdown.item.padding)};
             padding: ${dropdown.item.padding};
         }
-        .k-checkbox-wrapper,
-        .k-radio-wrapper {
+        .${k}-checkbox-wrapper,
+        .${k}-radio-wrapper {
             vertical-align: text-bottom;
         }
-        .k-checkbox-text,
-        .k-radio-text {
+        .${k}-checkbox-text,
+        .${k}-radio-text {
             vertical-align: baseline;
         }
     `

package/components/dropdown/usePosition.ts

@@ -3,6 +3,7 @@ import type {Dropdown} from './';
 import {Options, position, Feedback} from '../position';
 import {noop} from 'intact-shared';
 import {isObject} from 'intact-shared';
+import { isEqualObject } from '../utils';
 
 export type FeedbackCallback = (feedback: Feedback) => void;
 
@@ -23,7 +24,7 @@ export function usePosition() {
                 isObject(newValue) && isObject(oldValue) &&
                 // is not event object
                 !(newValue instanceof Event) &&
-                JSON.stringify(newValue) === JSON.stringify(oldValue)
+                isEqualObject(newValue, oldValue)
             )  {
                 return;
             }

package/components/editable/index.ts

@@ -4,6 +4,7 @@ import {_$} from '../../i18n';
 import {bind} from '../utils';
 import type {Input} from '../input';
 import type {Events} from '../types';
+import { useConfigContext } from '../config';
 
 type Value = string | number
 
@@ -54,6 +55,7 @@ export class Editable<
     static events = events;
 
     private inputRef = createRef<Input>();
+    private config = useConfigContext();
 
     @bind
     private edit() {

package/components/editable/index.vdt

@@ -8,18 +8,19 @@ const {
     value, validate, disabled, 
     tip, invalid
 } = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-editable': true,
-    'k-editing': editing,
-    'k-disabled': disabled,
-    'k-invalid': invalid,
+    [`${k}-editable`]: true,
+    [`${k}-editing`]: editing,
+    [`${k}-disabled`]: disabled,
+    [`${k}-invalid`]: invalid,
     [className]: className,
-    [makeStyles()]: true
+    [makeStyles(k)]: true
 };
 
 <div {...getRestProps(this)} class={classNameObj}>
-    <Icon class="k-icon-edit k-editable-icon" title={tip}
+    <Icon class={`${k}-icon-edit ${k}-editable-icon`} title={tip}
         v-if={!disabled && !editing}
         ev-click={this.edit}
         hoverable

package/components/editable/styles.ts

@@ -20,11 +20,11 @@ setDefault(() => {
 
 export {editable};
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         display: inline-block;
         line-height: ${editable.lineHeight};
-        .k-editable-icon {
+        .${k}-editable-icon {
             float: right;
             cursor: pointer;
             margin: ${editable.iconGap};
@@ -32,8 +32,8 @@ export function makeStyles() {
         }
 
         // invalid
-        &.k-invalid {
-            .k-input-inner {
+        &.${k}-invalid {
+            .${k}-input-inner {
                 border: ${editable.invalid.border} !important;
             }
         }

package/components/form/form.ts

@@ -4,6 +4,7 @@ import {useRecordParent} from '../../hooks/useRecordComponent';
 import {addMethod} from './methods';
 import {bind} from '../utils';
 import type {FormItem} from './item';
+import { useConfigContext } from '../config';
 
 interface FormHTMLAttributes {
     acceptcharset?: string
@@ -50,6 +51,7 @@ export class Form extends Component<FormProps, FormEvents> {
     static addMethod = addMethod;
 
     private items = useRecordParent<FormItem>(RECORD_KEY);
+    private config = useConfigContext();
 
     init() {
         provide(FORM, this);

package/components/form/form.vdt

@@ -2,13 +2,14 @@ import {getRestProps} from '../utils';
 import {makeFormStyles} from './styles';
 
 const {children, className, layout, size} = this.get();
+const { k } = this.config;
 
 const classNameObj = {
-    'k-form': true,
+    [`${k}-form`]: true,
     [className]: className,
-    [`k-${layout}`]: layout,
-    [`k-${size}`]: size !== 'default',
-    [makeFormStyles()]: true,
+    [`${k}-${layout}`]: layout,
+    [`${k}-${size}`]: size !== 'default',
+    [makeFormStyles(k)]: true,
 };
 
 <form {...getRestProps(this)}

package/components/form/item.ts

@@ -8,6 +8,7 @@ import {isFunction, isString, EMPTY_OBJ} from 'intact-shared';
 import {useError} from './useError';
 import {useValidate} from './useValidate';
 import {useDirty} from './useDirty';
+import { useConfigContext } from '../config';
 
 export interface FormItemProps {
     value?: any
@@ -66,6 +67,7 @@ export class FormItem extends Component<FormItemProps, FormItemEvents, FormItemB
         this.error.message,
         this.dirty.isDirty,
     );
+    private config = useConfigContext();
 
     init() {
         useRecordItem(RECORD_KEY);

package/components/form/item.vdt

@@ -15,14 +15,15 @@ const {
     isValid: {value: isValid},
     errorClassName: {value: customErrorClassName},
 } = this.validateHook;
+const { k } = this.config;
 
 const classNameObj = {
-    'k-form-item': true,
-    'k-invalid': isDirty && !isValid,
-    'k-valid': isDirty && isValid,
+    [`${k}-form-item`]: true,
+    [`${k}-invalid`]: isDirty && !isValid,
+    [`${k}-valid`]: isDirty && isValid,
     [className]: className,
-    'k-fluid': fluid,
-    [makeItemStyles()]: true,
+    [`${k}-fluid`]: fluid,
+    [makeItemStyles(k)]: true,
 };
 
 const starOnRequired = this.form && this.form.get('starOnRequired');
@@ -43,13 +44,13 @@ const {ellipsis, message, errorRef} = this.error;
     ev-change={onChange}
     ev-focusout={onFocusout}
 >
-    <label for={htmlFor} class="k-form-label" v-if={!hideLabel}
+    <label for={htmlFor} class={`${k}-form-label`} v-if={!hideLabel}
         style={labelStyle}
     >
-        <span class="k-form-star" v-if={starOnRequired && rules && rules.required}>*</span>
+        <span class={`${k}-form-star`} v-if={starOnRequired && rules && rules.required}>*</span>
         <b:label>{label}</b:label>
     </label>
-    <div class="k-form-content">
+    <div class={`${k}-form-content`}>
         <ErrorContext.Provider value={isDirty && !isValid}>
             <template>
                 <b:content>{children}</b:content>
@@ -58,17 +59,17 @@ const {ellipsis, message, errorRef} = this.error;
         <Transition key="error" name="k-fade" >
             <div v-if={isDirty && !isValid}
                 class={{
-                    "k-form-error": true,
+                    [`${k}-form-error`]: true,
                     [errorClassName]: errorClassName,
                     [customErrorClassName]: customErrorClassName,
-                    'k-ellipsis': ellipsis.value
+                    [`${k}-ellipsis`]: ellipsis.value
                 }}
             >
-                <div class="k-error-message c-ellipsis" ref={errorRef}>
+                <div class={`${k}-error-message c-ellipsis`} ref={errorRef}>
                     {message.value}
                 </div>
                 <Tooltip hoverable position="bottom">
-                    <Icon class="ion-ios-information-outline k-form-error-more" size="small" color="inherit" />
+                    <Icon class={`ion-ios-information-outline ${k}-form-error-more`} size="small" color="inherit" />
                     <b:content>
                         {message.value}
                     </b:content>
@@ -76,7 +77,7 @@ const {ellipsis, message, errorRef} = this.error;
             </div>
         </Transition>
     </div>
-    <div class="k-form-append" v-if={$blocks.append}>
+    <div class={`${k}-form-append`} v-if={$blocks.append}>
         <b:append /> 
     </div>
 </div>

package/components/form/styles.ts

@@ -38,34 +38,35 @@ setDefault(() => {
     form = deepDefaults(theme, {form: defaults}).form;
 });
 
-export function makeItemStyles() {
+export function makeItemStyles(k: string) {
     return css`
         display: flex;
         position: relative;
         &:not(:last-of-type) {
             margin-bottom: ${form.item.gap};
         }
-        &.k-fluid > .k-form-content {
+        &.${k}-fluid > .${k}-form-content {
             flex: 1;
         }
-        .k-form-label {
+        .${k}-form-label {
             display: flex;
             align-items: center;
             justify-content: ${form.item.labelTextAlign === 'right' ? 'end' : 'start'};
             width: ${form.item.labelWidth};
             padding-right: ${form.item.labelGap};
             max-height: ${form.item.labelHeight};
+            flex-shrink: 0;
         }
-        .k-form-star {
+        .${k}-form-star {
             color: ${form.item.starColor};
             margin-right: ${form.item.starGap};
         }
-        .k-form-content {
+        .${k}-form-content {
             position: relative;
         }
 
         // invalid
-        .k-form-error {
+        .${k}-form-error {
             position: absolute;
             color: ${form.item.errorColor};
             font-size: ${form.item.errorFontSize};
@@ -73,70 +74,70 @@ export function makeItemStyles() {
             right: 0;
             display: flex;
             align-items: center;
-            &.k-ellipsis {
-                .k-form-error-more {
+            &.${k}-ellipsis {
+                .${k}-form-error-more {
                     display: inline-block;
                 }
             }
         }
-        .k-form-error-more {
+        .${k}-form-error-more {
             line-height: ${form.item.errorFontSize};
             display: none;
         }
-        &.k-invalid {
+        &.${k}-invalid {
             // input
-            .k-input {
-                .k-input-wrapper {
+            .${k}-input {
+                .${k}-input-wrapper {
                     border: ${form.item.invalidBorder};
                     position: relative;
                     z-index: 1
                 }
             }
             // select / checkbox / radio
-            .k-select,
-            .k-checkbox-wrapper,
-            .k-radio-wrapper {
+            .${k}-select,
+            .${k}-checkbox-wrapper,
+            .${k}-radio-wrapper {
                 border: ${form.item.invalidBorder} !important;
             }
-            .k-select .k-input .k-input-wrapper {
+            .${k}-select .${k}-input .${k}-input-wrapper {
                 border: none;
             }
         }
 
         // nested
-        // .k-form-item {
+        // .${k}-form-item {
             // &,
-            // .k-form-content {
+            // .${k}-form-content {
                 // width: auto;
             // }
         // }
 
         // append
-        .k-form-append {
+        .${k}-form-append {
             padding: ${form.item.appendPadding};
             vertical-align: middle;
         }
     `
 }
 
-export function makeFormStyles() {
+export function makeFormStyles(k: string) {
     return css`
         // layout
-        &.k-inline {
-            .k-form-item {
+        &.${k}-inline {
+            .${k}-form-item {
                 display: inline-flex;
                 vertical-align: top;
                 margin-right: ${form.item.inlineGap};
             }
-            .k-form-label {
+            .${k}-form-label {
                 width: auto;
             }
         }
-        &.k-vertical {
-            .k-form-item {
+        &.${k}-vertical {
+            .${k}-form-item {
                 flex-direction: column;
             }
-            .k-form-label {
+            .${k}-form-label {
                 width: auto;
                 text-align: left;
                 padding: 0;
@@ -148,12 +149,12 @@ export function makeFormStyles() {
         // size
         ${(['small', 'mini'] as const).map(size => {
             return css`
-                &.k-${size} {
-                    .k-form-item:not(:last-of-type) {
+                &.${k}-${size} {
+                    .${k}-form-item:not(:last-of-type) {
                         margin-bottom: ${form.item[`${size}Gap` as const]}
                     }
-                    &.k-inline {
-                        .k-form-item {
+                    &.${k}-inline {
+                        .${k}-form-item {
                             margin-right: ${form.item[`${size}InlineGap` as const]}
                         }
                     }

package/components/grid/col.ts

@@ -2,6 +2,7 @@ import {Component, TypeDefs} from 'intact';
 import template from './col.vdt';
 import {PrimitiveValue, Value, BreakpointValues, breakpoints, Breakpoint} from './constants';
 import {useBreakpoints} from './useBreakpoints';
+import { useConfigContext } from '../config';
 
 export type BaseColProps = {
     span?: PrimitiveValue, 
@@ -33,4 +34,5 @@ export class Col extends Component<ColProps> {
     static typeDefs = typeDefs;
 
     private breakpoints = useBreakpoints();
+    private config = useConfigContext();
 }

package/components/grid/col.vdt

@@ -3,26 +3,27 @@ import {makeColStyles} from './styles';
 import {context as GutterContext, gutterStyle} from './useGutter';
 
 const {className, children, span, style, offset, push, pull, order} = this.get();
+const { k } = this.config;
 
 <GutterContext.Consumer>
     {gutter => {
         const classNameObj = {
-            'k-col': true,
-            [`k-${span}`]: span,
-            [`k-offset-${offset}`]: offset,
-            [`k-pull-${pull}`]: pull,
-            [`k-push-${push}`]: push,
-            [`k-order-${order}`]: order,
+            [`${k}-col`]: true,
+            [`${k}-${span}`]: span,
+            [`${k}-offset-${offset}`]: offset,
+            [`${k}-pull-${pull}`]: pull,
+            [`${k}-push-${push}`]: push,
+            [`${k}-order-${order}`]: order,
             [className]: className && !gutter,
-            [makeColStyles()]: true,
-            ...this.breakpoints.getBreakpointsClassName(),
+            [makeColStyles(k)]: true,
+            ...this.breakpoints.getBreakpointsClassName(k),
         };
         const newStyle = gutter ? gutterStyle(gutter, style, 'padding') : style;
 
         return (
             <div class={classNameObj} {...getRestProps(this)} style={newStyle}>
                 {gutter ? 
-                    <div class={{'k-col-wrapper': true, [className]: className}}>{children}</div> :
+                    <div class={{[`${k}-col-wrapper`]: true, [className]: className}}>{children}</div> :
                     children
                 }
             </div>

package/components/grid/row.ts

@@ -2,6 +2,7 @@ import {Component, TypeDefs} from 'intact';
 import template from './row.vdt';
 import {useGutter} from './useGutter';
 import {Value} from './constants';
+import { useConfigContext } from '../config';
 
 export interface RowProps {
     gutter?: Value 
@@ -20,4 +21,5 @@ export class Row extends Component<RowProps> {
     static typeDefs = typeDefs;
 
     private gutter = useGutter();
+    private config = useConfigContext();
 }

package/components/grid/row.vdt

@@ -3,12 +3,13 @@ import {makeRowStyles} from './styles';
 import {context as GutterContext, gutterStyle} from './useGutter';
 
 const {className, children, style, justify, align} = this.get();
+const { k } = this.config;
 const classNameObj = {
-    'k-row': true,
-    [`k-justify-${justify}`]: justify,
-    [`k-align-${align}`]: align,
+    [`${k}-row`]: true,
+    [`${k}-justify-${justify}`]: justify,
+    [`${k}-align-${align}`]: align,
     [className]: className,
-    [makeRowStyles()]: true,
+    [makeRowStyles(k)]: true,
 };
 const gutter = this.gutter.getGutter();
 const newStyle = gutter ? gutterStyle(gutter, style, 'margin') : style;