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

package/components/colorpicker/styles.ts

@@ -92,11 +92,11 @@ setDefault(() => {
 
 const _sizes = ['large', 'small', 'mini'] as const;
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         display: inline-block;
         vertical-align: middle;
-        .k-colorpicker-color {
+        .${k}-colorpicker-color {
             height: ${colorpicker.height};
             width: ${colorpicker.width};
             border: ${colorpicker.border};
@@ -105,7 +105,7 @@ export function makeStyles() {
             background: ${colorpicker.bgColor};
             padding: ${colorpicker.padding};
         }
-        .k-colorpicker-inner {
+        .${k}-colorpicker-inner {
             border-radius: ${colorpicker.innerBorderRadius};
             height: 100%;
         }
@@ -114,8 +114,8 @@ export function makeStyles() {
         ${_sizes.map(size => {
             const styles = colorpicker[size];
             return css`
-                &.k-${size} {
-                    .k-colorpicker-color {
+                &.${k}-${size} {
+                    .${k}-colorpicker-color {
                         height: ${styles.height};
                         width: ${styles.width};
                         ${(styles as any).padding && `padding: ${(styles as any).padding}`}
@@ -125,8 +125,8 @@ export function makeStyles() {
         })}
 
         // disabled
-        &.k-disabled {
-            .k-colorpicker-color {
+        &.${k}-disabled {
+            .${k}-colorpicker-color {
                 background: ${colorpicker.disabled.bgColor};
                 border-color: ${colorpicker.disabled.borderColor};
                 cursor: ${colorpicker.disabled.cursor};
@@ -135,63 +135,63 @@ export function makeStyles() {
     `;
 }
 
-export function makePanelStyles() {
+export function makePanelStyles(k: string) {
     return css`
         padding: ${colorpicker.panel.padding};
         width: ${colorpicker.panel.width};
-        .k-colorpicker-saturation {
+        .${k}-colorpicker-saturation {
             height: ${colorpicker.panel.saturationHeight};
             position: relative;
             overflow: hidden;
             user-select: none
         }
-        .k-colorpicker-white,
-        .k-colorpicker-black {
+        .${k}-colorpicker-white,
+        .${k}-colorpicker-black {
             position: absolute;
             width: 100%;
             height: 100%;
         }
-        .k-colorpicker-white {
+        .${k}-colorpicker-white {
             background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0));
         }
-        .k-colorpicker-black {
+        .${k}-colorpicker-black {
             background: linear-gradient(0, #000, rgba(0, 0, 0, 0));
         }
-        .k-colorpicker-pointer {
+        .${k}-colorpicker-pointer {
             position: absolute;
         }
-        .k-colorpicker-circle {
+        .${k}-colorpicker-circle {
             width: ${colorpicker.panel.circle.width};
             height: ${colorpicker.panel.circle.width};
             box-shadow: ${colorpicker.panel.circle.boxShadow};
             border-radius: 50%;
             transform: translate(-50%, -50%);
         }
-        .k-colorpicker-controls {
+        .${k}-colorpicker-controls {
             display: flex;
             margin-top: ${colorpicker.panel.gutter};
         }
-        .k-colorpicker-sliders {
+        .${k}-colorpicker-sliders {
             flex: 1;
-            .k-slider {
+            .${k}-slider {
                 margin-bottom: ${colorpicker.panel.gutter};
             }
-            .k-slider-track-wrapper,
-            .k-slider-track {
+            .${k}-slider-tra.${k}-wrapper,
+            .${k}-slider-track {
                 height: ${colorpicker.slider.height};
             }
-            .k-slider-track-wrapper {
+            .${k}-slider-tra.${k}-wrapper {
                 cursor: ${colorpicker.slider.cursor};
             }
-            .k-slider-track {
+            .${k}-slider-track {
                 border-radius: ${colorpicker.slider.borderRadius};
                 margin: 0 calc(${colorpicker.slider.thumb.width} / 2 + 1px);
                 background-color: transparent;
             }
-            .k-slider-bar {
+            .${k}-slider-bar {
                 background: transparent;
             }
-            .k-slider-thumb {
+            .${k}-slider-thumb {
                 height: ${colorpicker.slider.thumb.height};
                 width: ${colorpicker.slider.thumb.width};
                 border: ${colorpicker.slider.thumb.border};
@@ -205,73 +205,73 @@ export function makePanelStyles() {
                 }
             }
         }
-        .k-colorpicker-hue {
-            .k-slider-track-wrapper {
+        .${k}-colorpicker-hue {
+            .${k}-slider-tra.${k}-wrapper {
                 background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
             }
         }
-        .k-colorpicker-alpha {
+        .${k}-colorpicker-alpha {
             background-size: contain;
         }
-        .k-colorpicker-alpha-bg {
+        .${k}-colorpicker-alpha-bg {
             background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMElEQVQ4T2N89uzZfwY8QFJSEp80A+OoAcMiDP7//483HTx//hx/Ohg1gIFx6IcBALl+VXknOCvFAAAAAElFTkSuQmCC");
         }
-        .k-colorpicker-color-wrapper {
+        .${k}-colorpicker-color-wrapper {
             width: ${colorpicker.color.width};
             height: ${colorpicker.color.height};
             border-radius: ${colorpicker.color.borderRadius};
             margin-left: ${colorpicker.panel.gutter};
             overflow: hidden;
         }
-        .k-colorpicker-color {
+        .${k}-colorpicker-color {
             height: 100%;
             box-shadow: ${colorpicker.color.boxShadow};
         }
 
         // input
-        .k-colorpicker-input.k-small {
-            .k-input-inner {
+        .${k}-colorpicker-input.${k}-small {
+            .${k}-input-inner {
                 height: ${colorpicker.input.height};
                 line-height: ${colorpicker.input.height};
                 padding: ${colorpicker.input.padding};
                 font-size: ${colorpicker.panel.fontSize};
             }
         }
-        .k-colorpicker-text {
+        .${k}-colorpicker-text {
             text-align: center;
             font-size: ${colorpicker.panel.fontSize};
             padding: ${colorpicker.input.textPadding};
         }
 
         // presets
-        .k-colorpicker-presets {
+        .${k}-colorpicker-presets {
             border-top: ${colorpicker.presets.delimiter};
             margin: 0 -${colorpicker.panel.padding};
             overflow: hidden;
         }
-        .k-colorpicker-preset-color-wrapper {
+        .${k}-colorpicker-preset-color-wrapper {
             float: left;
             border-radius: ${colorpicker.presets.borderRadius};
             cursor: pointer;
             overflow: hidden;
             margin: ${colorpicker.panel.padding} 0 0 ${colorpicker.panel.padding};
         }
-        .k-colorpicker-preset-color {
+        .${k}-colorpicker-preset-color {
             width: ${colorpicker.presets.width};
             height: ${colorpicker.presets.height};
             box-shadow: ${colorpicker.presets.boxShadow};
         }
 
-        .k-colorpicker-drag {
+        .${k}-colorpicker-drag {
             cursor: ew-resize;
             user-select: none;
         }
     `
 }
 
-export function makeAlphaBgColor({r, g, b}: ColorFormats.RGBA) {
+export function makeAlphaBgColor({r, g, b}: ColorFormats.RGBA, k: string) {
     return css`
-        .k-slider-track-wrapper {
+        .${k}-slider-tra.${k}-wrapper {
             background: linear-gradient(to right, rgba(${r}, ${g}, ${b}, 0) 0%, rgb(${r}, ${g}, ${b}) 100%);
         }
     `;

package/components/config/index.spec.ts

@@ -0,0 +1,49 @@
+import { Component } from 'intact';
+import {mount, unmount, dispatchEvent, wait, getElement} from '../../test/utils';
+import { ConfigProvider } from '.';
+import { Button, ButtonGroup } from '../button';
+
+describe('Config', () => {
+    // afterEach(async () => {
+        // unmount();
+    // });
+
+    it('should change classname prefix', async function() {
+        class Demo extends Component<{k: string}> {
+            static template = `
+                const { ConfigProvider, ButtonGroup, Button } = this;
+                <div>
+                    <ConfigProvider value={{classNamePrefix: this.get('k')}}>
+                        <ButtonGroup>
+                            <Button ev-click={() => this.set('k', 'a')}>change to a</Button>
+                            <Button type="primary" ev-click={() => this.set('k', 'b')}>change to b</Button>
+                        </ButtonGroup>
+                    </ConfigProvider>
+                    <Button>should not change</Button>
+                </div>
+            `
+
+            static defaults() {
+                return {
+                    k: null
+                }
+            }
+
+            ConfigProvider = ConfigProvider;
+            ButtonGroup = ButtonGroup;
+            Button = Button;
+        }
+
+        const [instance, element] = mount(Demo);
+
+        expect(element.innerHTML).to.matchSnapshot();
+
+        instance.set('k', 'a');
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+
+        instance.set('k', 'b');
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+    });
+});

package/components/config/index.ts

@@ -0,0 +1,28 @@
+import { createContext, ProviderProps } from '../context';
+import { EMPTY_OBJ } from 'intact';
+import {makeIconStyles} from '../../styles/fonts/iconfont';
+
+export interface ConfigProps {
+    classNamePrefix?: string 
+}
+
+const {
+    Provider: ConfigProvider,
+    Consumer: ConfigConsumer,
+    useContext,
+} = createContext<ConfigProps>(EMPTY_OBJ);
+
+function useConfigContext() {
+    const config = useContext();
+
+    return {
+        cls: (name: string) => `${config.value!.classNamePrefix || 'k'}-${name}`,
+        get k() { return config.value!.classNamePrefix || 'k' },
+    }
+}
+
+export {
+    ConfigProvider,
+    ConfigConsumer,
+    useConfigContext,
+}

package/components/context.ts

@@ -13,7 +13,13 @@ type ProviderConstructor<T> = ComponentConstructor<Component<ProviderProps<T>>>
 type ConsumerConstructor<T> = ComponentConstructor<Component<ConsumerProps<T>>> 
 
 let id = 0;
-export function createContext<T = any>(defaultValue?: T): {Provider: ProviderConstructor<T>, Consumer: ConsumerConstructor<T>} {
+export function createContext<T = any>(defaultValue?: T):
+    {
+        Provider: ProviderConstructor<T>,
+        Consumer: ConsumerConstructor<T>,
+        useContext: () => RefObject<T | undefined>
+    }
+{
     const injectionKey = `$Context-${id++}`;
 
     class Provider extends Component<ProviderProps<T>> {
@@ -34,10 +40,14 @@ export function createContext<T = any>(defaultValue?: T): {Provider: ProviderCon
     class Consumer extends Component<ConsumerProps<T>> {
         static template = consumerTemplate;
 
-        private ref = inject(injectionKey, null);
+        private ref = inject<RefObject<T | undefined>>(injectionKey, createRef(defaultValue));
+    }
+
+    function useContext() {
+        return inject<RefObject<T | undefined>>(injectionKey, createRef(defaultValue));
     }
 
-    return {Provider, Consumer};
+    return {Provider, Consumer, useContext};
 }
 
 function providerTemplate(this: Component) {

package/components/copy/index.ts

@@ -2,6 +2,7 @@ import { Component, TypeDefs } from 'intact';
 import template from './index.vdt';
 import { useCopy } from './useCopy';
 import { Events } from '../types';
+import { useConfigContext } from '../config';
 
 export interface CopyProps {
     text: string;
@@ -33,5 +34,6 @@ export class Copy extends Component<CopyProps, CopyEvents> {
     static defaults = defaults;
     static events = events;
 
-    private copy = useCopy()
+    private copy = useCopy();
+    private config = useConfigContext();
 }

package/components/copy/index.vdt

@@ -7,17 +7,18 @@ import { _$ } from '../../i18n';
 
 const { children, className } = this.get();
 const { startCopy, success } = this.copy;
+const { k } = this.config;
 
 const classNameObj = {
-    [`k-copy`]: true,
-    [makeStyles()]: true,
+    [`${k}-copy`]: true,
+    [makeStyles(k)]: true,
     [className]: className,
 }
 
 <Transition name="k-fade">
     <Virtual ev-click={startCopy} class={classNameObj} {...getRestProps(this)}>
         <template v-if={children}>{children}</template>
-        <Icon key="1" v-else-if={!success.value} class="k-icon-clone" hoverable title={_$('复制')} />
-        <Icon key="2" v-else class="k-icon-check" hoverable color="success" />
+        <Icon key="1" v-else-if={!success.value} class={`${k}-icon-clone`} hoverable title={_$('复制')} />
+        <Icon key="2" v-else class={`${k}-icon-check`} hoverable color="success" />
     </Virtual>
 </Transition>

package/components/copy/styles.ts

@@ -1,7 +1,7 @@
 import {css} from '@emotion/css';
 import '../../styles/global';
 
-export function makeStyles() {
+export function makeStyles(k: string) {
     return css`
         cursor: pointer;
         vertical-align: middle;

package/components/datepicker/calendar.ts

@@ -13,6 +13,7 @@ import {useMonths} from './useMonths';
 import {StateValue} from './basepicker';
 import {useStatus} from './useStatus';
 import {PanelFlags} from './usePanel';
+import { useConfigContext } from '../config';
 
 export interface DatepickerCalendarProps {
     value: StateValue
@@ -39,6 +40,7 @@ export class DatepickerCalendar extends Component<DatepickerCalendarProps, Datep
     public days = useDays(this.showDate.date, this.status, this.datepicker.focusDate.focusDate);
     public years = useYears(this.showDate.date, this.status, this.datepicker.focusDate.focusDate);
     public months = useMonths(this.showDate.date, this.status, this.datepicker.focusDate.focusDate);
+    private config = useConfigContext();
 
     @bind
     triggerChange(value: Dayjs) {

package/components/datepicker/calendar.vdt

@@ -8,22 +8,23 @@ import {getNowDate} from './helpers';
 const type = this.type.value;
 const isYear = type === 'year';
 const isYearOrMonth = isYear || type === 'month';
+const { k } = this.config;
 const classNameObj = {
-    'k-datepicker-calendar': true,
-    [makeCalendarStyles()]: true,
+    [`${k}-datepicker-calendar`]: true,
+    [makeCalendarStyles(k)]: true,
 };
 const now = getNowDate();
 const {focusDate, reset: resetFocusDate} = this.datepicker.focusDate;
 const getItems = (data, onClick) => {
     return <div v-for={data}
         class={{
-            "k-calendar-item": true,
-            "k-exceed": $value.isExceed,
-            "k-active": $value.isActive,
-            "k-today": $value.isToday,
-            "k-disabled": $value.isDisabled, 
-            "k-hover": $value.isHover,
-            "k-in-range": $value.isInRange,
+            [`${k}-calendar-item`]: true,
+            [`${k}-exceed`]: $value.isExceed,
+            [`${k}-active`]: $value.isActive,
+            [`${k}-today`]: $value.isToday,
+            [`${k}-disabled`]: $value.isDisabled, 
+            [`${k}-hover`]: $value.isHover,
+            [`${k}-in-range`]: $value.isInRange,
         }}
         ev-click={
             !$value.isDisabled ? e => {
@@ -33,7 +34,7 @@ const getItems = (data, onClick) => {
         }
         ev-mouseenter={() => focusDate.set($value.value)}
     >
-        <div class="k-value">{$value.label}</div>
+        <div class={`${k}-value`}>{$value.label}</div>
     </div>
 };
 
@@ -46,62 +47,62 @@ const {
 } = this.showDate;
 
 <div class={classNameObj}>
-    <div class="k-datepicker-month">
-        <div class="k-left-btns">
-            <Button icon type="none" size="small" class="k-prev"
+    <div class={`${k}-datepicker-month`}>
+        <div class={`${k}-left-btns`}>
+            <Button icon type="none" size="small" class={`${k}-prev`}
                 tagName="div"
                 ev-click={isYear ? prevTenYears : prevYear}
             >
-                <Icon class="k-icon-left" size="small" />
-                <Icon class="k-icon-left" size="small" />
+                <Icon class={`${k}-icon-left`} size="small" />
+                <Icon class={`${k}-icon-left`} size="small" />
             </Button>
-            <Button icon type="none" size="small" class="k-prev"
+            <Button icon type="none" size="small" class={`${k}-prev`}
                 tagName="div"
                 ev-click={prevMonth}
                 v-if={!isYearOrMonth}
             >
-                <Icon class="k-icon-left" size="small" />
+                <Icon class={`${k}-icon-left`} size="small" />
             </Button>
         </div>
-        <div class="k-month-values">
+        <div class={`${k}-month-values`}>
             <template v-if={!isYear}>
                 <span v-for={getDateLabel()}
-                     class="k-month-value" 
+                     class={`${k}-month-value`} 
                      ev-click={$value.onClick}
                 >{$value.value}</span>
             </template>
-            <span v-else class="k-month-value">
+            <span v-else class={`${k}-month-value`}>
                 {this.years.getYearLabel()} 
             </span>
         </div>
-        <div class="k-right-btns">
-            <Button icon type="none" size="small" class="k-next"
+        <div class={`${k}-right-btns`}>
+            <Button icon type="none" size="small" class={`${k}-next`}
                 tagName="div"
                 ev-click={nextMonth}
                 v-if={!isYearOrMonth}
             >
-                <Icon class="k-icon-right" size="small" />
+                <Icon class={`${k}-icon-right`} size="small" />
             </Button>
-            <Button icon type="none" size="small" class="k-next"
+            <Button icon type="none" size="small" class={`${k}-next`}
                 tagName="div"
                 ev-click={isYear ? nextTenYears : nextYear}
             >
-                <Icon class="k-icon-right" size="small" />
-                <Icon class="k-icon-right" size="small" />
+                <Icon class={`${k}-icon-right`} size="small" />
+                <Icon class={`${k}-icon-right`} size="small" />
             </Button>
         </div>
     </div>
     <template v-if={!isYearOrMonth}>
-        <div class="k-weekdays">
-            <div class="k-weekday"
+        <div class={`${k}-weekdays`}>
+            <div class={`${k}-weekday`}
                 v-for={[_$('日'), _$('一'), _$('二'), _$('三'), _$('四'), _$('五'), _$('六')]}
             >{$value}</div>
         </div>
-        <div class="k-days" ev-mouseleave={resetFocusDate}>
+        <div class={`${k}-days`} ev-mouseleave={resetFocusDate}>
             {getItems(getDays(now), onClickDay)}
         </div>
     </template>
-    <div v-else class="k-years" ev-mouseleave={resetFocusDate}>
+    <div v-else class={`${k}-years`} ev-mouseleave={resetFocusDate}>
         {isYear ?
             getItems(this.years.getYears(now), this.years.onClick) :
             getItems(this.months.getMonths(now), this.months.onClick)

package/components/datepicker/index.vdt

@@ -19,10 +19,11 @@ const {
     onChangeDateForRange,
     getTimeValue,
 } = this.value;
+const { k } = this.config;
 const classNameObj = {
-    'k-datepicker-content': true,
+    [`${k}-datepicker-content`]: true,
     [className]: className,
-    [makePanelStyles()]: true,
+    [makePanelStyles(k)]: true,
 };
 
 const {isDisabledTime, isDisabledConfirm} = this.disabled;
@@ -31,7 +32,7 @@ const generatePanel = (flag) => {
     const panel = getPanel(flag);
     const timeValue = getTimeValue(flag);
     return (
-        <div class="k-datepicker-calendar-wrapper">
+        <div class={`${k}-datepicker-calendar-wrapper`}>
             {(() => {
                 if (type === 'datetime') {
                     let dateString = '0000-00-00';
@@ -72,24 +73,24 @@ const generatePanel = (flag) => {
     );
 };
 
-<t:super class="k-datepicker">
+<t:super class={`${k}-datepicker`}>
     <b:base-menu>
         <DropdownMenu class={classNameObj}>
-            <div class="k-datepicker-shortcuts" v-if={shortcuts && shortcuts.length}>
+            <div class={`${k}-datepicker-shortcuts`} v-if={shortcuts && shortcuts.length}>
                 {shortcuts.map($value => {
                     const label = isFunction($value.label) ? $value.label() : $value.label;
-                    return <div class="k-datepicker-shortcut c-ellipsis"
+                    return <div class={`${k}-datepicker-shortcut c-ellipsis`}
                         title={label}
                         ev-click={linkEvent($value, this.setByShortcut)}
                     >{label}</div>
                 })}
             </div>
-            <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 v-if={type === 'datetime'} class="k-datepicker-footer">
+                <div v-if={type === 'datetime'} class={`${k}-datepicker-footer`}>
                     <Button type="primary" size="small"
                         disabled={isDisabledConfirm()}
                         ev-click={onConfirm}
@@ -99,6 +100,6 @@ const generatePanel = (flag) => {
         </DropdownMenu>
     </b:base-menu>
     <b:suffix>
-        <Icon class="k-icon-calendar" />
+        <Icon class={`${k}-icon-calendar`} />
     </b:suffix>
 </t:super>