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

package/components/select/menu.vdt

@@ -26,10 +26,10 @@ if (card) {
     const {labels, group} = process(children);
     children = (
         <template>
-            <Tabs vertical type="border-card"
+            <Tabs vertical type="card"
                 value={activeIndex.value}
                 ev-$change:value={activeIndex.set}
-            > 
+            >
                 <Tab v-for={labels} value={$key}>
                     {isFunction($value) /* is <b:label> block */ ? $value(noop) : $value}
                 </Tab>
@@ -66,13 +66,13 @@ if (searchable) {
                 <div class="k-select-op" v-if={multiple}>
                     <Button type="link" size="small"
                         ev-click={selectAll}
-                    >{_$('全选')}</Button>  
+                    >{_$('全选')}</Button>
                     <Button type="link" size="small"
                         ev-click={toggleSelect}
-                    >{_$('反选')}</Button> 
+                    >{_$('反选')}</Button>
                     <Button type="link" size="small"
                         ev-click={unselectAll}
-                    >{_$('清空')}</Button>  
+                    >{_$('清空')}</Button>
                 </div>
             </div>
             <div class="k-select-body">

package/components/select/styles.ts

@@ -7,8 +7,6 @@ type SizeStyles = {
     padding?: string,
     height: string,
     fontSize: string,
-    multipleGap: string,
-    multipleMargin: string,
 }
 
 const defaults = deepDefaults(
@@ -94,14 +92,17 @@ const defaults = deepDefaults(
                 btnGap: `8px`,
             },
         },
+
+        // flat
+        flat: {
+            get color() { return theme.color.lightBlack },
+        },
     },
     sizes.reduce((memo, size) => {
         memo[size] = {
             get padding() { return `0 ${theme[size].padding}` },
             get height() { return theme[size].height },
             get fontSize() { return theme[size].fontSize },
-            multipleGap: `1px`,
-            multipleMargin: `0 2px 1px 0`,
         }
 
         return memo;
@@ -136,7 +137,7 @@ export default function makeStyles() {
         }
         .k-select-suffix {
             margin-left: ${select.suffixGap};
-            margin-top: 2px;
+            // margin-top: 1px;
         }
 
         .k-select-placeholder {
@@ -144,6 +145,11 @@ export default function makeStyles() {
             user-select: none;
         }
 
+        // add .k-input to increase priority
+        .k-input .k-input-inner {
+            background: transparent;
+        }
+
         &.k-fluid {
             width: 100%;
         }
@@ -191,42 +197,13 @@ export default function makeStyles() {
             border: ${select.focusBorder};
         }
 
-        // disabled
-        &.k-disabled {
-            color: ${select.disabled.color};
-            cursor: not-allowed;
-            background: ${select.disabled.bgColor};
-            border-color: ${select.disabled.borderColor};
-            .k-select-tag {
-                background: ${select.tag.disabledBgColor};
-            }
-        }
-
         // multiple
-        .k-select-values {
-            display: inline-block;
-            margin-right: -${getRight(select.tag.margin)};
-            width: 100%;
-            &.k-with-values {
-                margin: 0;
-            }
+        .k-tags {
+            padding: 3px 0;
         }
-        .k-select-tag {
-            display: inline-flex;
-            align-items: center;
-            padding: ${select.tag.padding};
-            background: ${select.tag.bgColor};
-            border-radius: ${select.tag.borderRadius};
-            margin: ${select.tag.margin};
-            max-width: calc(100% - ${getRight(select.tag.margin)} - 1px);
-        }
-        .k-select-text {
-            max-width: calc(100% - 18px);
+        .k-tag {
             word-break: break-word;
-        }
-        .k-select-close {
-            margin-left: ${select.tag.delete.gap};
-            font-size: ${select.tag.delete.fontSize};
+            height: auto;
         }
 
         // size
@@ -256,6 +233,43 @@ export default function makeStyles() {
                 line-height: inherit;
             }
         }
+
+        // flat
+        &.k-flat {
+            border: none;
+            background: ${theme.color.bg};
+            color: ${defaults.flat.color};
+            .k-tag {
+                background: ${select.tag.disabledBgColor};
+            }
+        }
+
+        // disabled (should place at last)
+        &.k-disabled {
+            color: ${select.disabled.color};
+            cursor: not-allowed;
+            background: ${select.disabled.bgColor};
+            border-color: ${select.disabled.borderColor};
+            .k-tag {
+                background: ${select.tag.disabledBgColor};
+            }
+        }
+
+        // nowrap
+        &.k-nowrap {
+            .k-select-values {
+                display: flex;
+                align-items: center;
+            }
+            .k-tags {
+                flex: 1;
+            }
+            .k-select-text {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overlay: ellipsis;
+            }
+        }
     `;
 }
 

package/components/select/useDraggble.ts

@@ -0,0 +1,12 @@
+import { useInstance } from 'intact';
+import type {Select } from './select';
+import {swap} from '../utils';
+import type { TagsDragEndParam } from '../tag';
+
+export function useDraggable() {
+    const instance = useInstance() as Select<any, true>;
+
+    return function onEnd({key, from, to}: TagsDragEndParam) {
+        instance.set('value', swap(instance.get('value')!, from, to));
+    }
+}

package/components/select/useNowrap.ts

@@ -0,0 +1,24 @@
+import {Children, VNodeComponentClass, VNode, useInstance, watch, createRef, Props} from 'intact';
+import {isNullOrUndefined, isStringOrNumber, EMPTY_OBJ} from 'intact-shared';
+import {findChildren, isEmptyString, ValidVNode, isComponentVNode} from '../utils';
+import {Option, OptionProps} from './option';
+import {OptionGroup, OptionGroupProps} from './group';
+import type {Select, SelectProps} from './select';
+import {useBaseLabel} from './useBaseLabel';
+
+export function useNowrap() {
+    const instance = useInstance() as Select;
+    const containerRef = createRef<HTMLDivElement>();
+
+    instance.watch('value', refresh, { presented: true }); 
+
+    function refresh() {
+        if (!instance.get('multiple')) return;
+        const container = containerRef.value!;
+        const width = container.getBoundingClientRect().width;
+
+        console.log('aaa', width);
+    }
+
+    return { containerRef };
+}

package/components/slider/index.spec.ts

@@ -51,7 +51,8 @@ describe('Slider', () => {
     it('range test', async () => {
         const [instance, element] = mount(RangeDemo);
 
-        const windowWidth = 800; //document.documentElement.clientWidth;
+        // const windowWidth = 800; //document.documentElement.clientWidth;
+        const windowWidth = element.querySelector('.k-slider-main')!.clientWidth;
         const [first, second] = element.querySelectorAll<HTMLElement>('.k-slider-thumb');
 
         // drag
@@ -87,6 +88,36 @@ describe('Slider', () => {
         instance.set<number>('values', 1);
         await wait();
         expect(instance.get('values')).eql([1, 1]);
+
+        // increase first value
+        const increaseBtn = element.querySelector('.k-right') as HTMLElement;
+        increaseBtn.click();
+        await wait();
+        expect(instance.get('values')).eql([2, 2]);
+
+        // should disable second spinner's decrease button
+        const decreaseBtn = element.querySelector('.k-spinner:last-of-type .k-left') as HTMLElement;
+        decreaseBtn.click();
+        await wait();
+        expect(instance.get('values')).eql([2, 2]);
+
+        // input value
+        const [firstInput, secondInput] = element.querySelectorAll<HTMLInputElement>('.k-input-inner');
+        dispatchEvent(firstInput, 'focusin');
+        firstInput.value = '5';
+        dispatchEvent(firstInput, 'input');
+        firstInput.value = '50';
+        dispatchEvent(firstInput, 'input');
+        dispatchEvent(firstInput, 'change');
+        dispatchEvent(secondInput, 'focusin');
+        await wait();
+        secondInput.value = '6';
+        dispatchEvent(secondInput, 'input');
+        secondInput.value = '60';
+        dispatchEvent(secondInput, 'input');
+        dispatchEvent(secondInput, 'change');
+        await wait();
+        expect(instance.get('values')).eql([50, 60]);
     });
 
     it('keyboard operation for basic', async () => {

package/components/slider/index.ts

@@ -17,7 +17,7 @@ export interface SliderProps<Range extends boolean = boolean> {
     max?: number
     min?: number
     value?: Value<Range>
-    range?: Range 
+    range?: Range
     unit?: string
     showEnd?: boolean
     showInput?: boolean
@@ -81,7 +81,7 @@ const events: Events<SliderEvents> = {
 };
 
 export class Slider<
-    Range extends boolean = false 
+    Range extends boolean = false
 > extends Component<SliderProps<Range>, SliderEvents<Range>, SliderBlocks<Range>> {
     static template = template;
     static typeDefs = typeDefs;

package/components/slider/index.vdt

@@ -26,7 +26,7 @@ const classNameObj = {
 };
 
 const {barStyle, thumbFirstStyle, thumbSecondStyle} = this.styles();
-const {onSpinnerChange} = this.value;
+const {onSpinnerChange, onLeftSpinnerChange, onRightSpinnerChange} = this.value;
 const {onKeydown, onKeyup} = this.keyboard;
 const {firstTooltipRef, secondTooltipRef, getTooltipProps, hide} = this.tooltip;
 const tooltipProps = getTooltipProps();
@@ -42,7 +42,7 @@ const createThumb = (thumbStyle, isFirst, ref, value, tooltipRef) => {
             >
                 <div class="k-slider-thumb"
                     tabindex={disabled ? '-1' : '0'}
-                    ev-mousedown={onStart} 
+                    ev-mousedown={onStart}
                     ev-focusin={linkEvent(isFirst, onFocusin)}
                     ev-focusout={hide}
                     ev-keydown={onKeydown}
@@ -79,7 +79,7 @@ const marks = this.marks();
                         secondTooltipRef,
                     )}
                 </template>
-                <i v-for={points} 
+                <i v-for={points}
                     class={{'k-slider-point': true, 'k-active': $value.active}}
                     style={$value.style}
                 ></i>
@@ -97,18 +97,36 @@ const marks = this.marks();
             <span ev-click={linkEvent(max, setOneValue)}>{max + unit}</span>
         </div>
     </div>
-    <div class="k-slider-spinner" v-if={showInput && !range}>
-        <Spinner
-            disabled={disabled}
-            max={max}
-            min={min}
-            step={step || 0.01}
-            vertical
-            value={value}
-            suffix={unit}
-            forceStep={!!step && forceStep}
-            ev-$change:value={onSpinnerChange}
-            {...spinnerProps}
-        />
+    <div class="k-slider-spinner" v-if={showInput}>
+        {(() => {
+            const props = {
+                disabled,
+                min,
+                max,
+                step: step || 0.01,
+                vertical: true,
+                suffix: unit,
+                forceStep: !!step && forceStep,
+            };
+
+            return <template>
+                <Spinner
+                    {...props}
+                    value={range ? value[0] : value}
+                    ev-$change:value={range ? onLeftSpinnerChange : onSpinnerChange}
+                    {...spinnerProps}
+                />
+                <template v-if={range}>
+                    <span class="k-slider-spinner-sep">-</span>
+                    <Spinner
+                        {...props}
+                        min={value[0]}
+                        value={range ? value[1] : value}
+                        ev-$change:value={onRightSpinnerChange}
+                        {...spinnerProps}
+                    />
+                </template>
+            </template>
+        })()}
     </div>
 </div>

package/components/slider/styles.ts

@@ -5,35 +5,36 @@ import '../../styles/global';
 
 const defaults = {
     get transition() { return theme.transition.middle },
-    height: '4px',
-    
-    bgColor: '#e5e5e5',
+    height: '6px',
+
+    bgColor: '#F0F2F4',
     get barColor() { return theme.color.primary },
-    borderRadius: '2px',
+    get borderRadius() { return theme.borderRadius },
 
     thumb: {
         height: '12px',
         width: '12px',
-        get border() { return `2px solid ${slider.barColor}` },
+        get border() { return `3px solid #fff` },
         borderRadius: '50%',
-        bgColor: '#fff',
-        hoverTransform: 'scale(1.5)',
-        hoverBgColor: '#fff',
-        disabledBgColor: '#fff',
+        get bgColor() { return slider.barColor },
+        hoverTransform: 'scale(1.25)',
+        get hoverBgColor() { return slider.barColor },
+        boxShadow: '0px 0px 5px 0px rgba(0, 0, 0, 0.08)',
     },
 
     endPadding: '10px 0 0',
 
     disabled: {
         get color() { return theme.color.disabled },
-        get bgColor() { return theme.color.disabledBg },
+        // might be calculate according to the bar color
+        bgColor: '#B5E3FF',
     },
 
     // spinnerWidth: '124px',
     spinnerGap: '16px',
 
     point: {
-        width: '8px',
+        width: '10px',
         get height() { return slider.point.width },
         bgColor: '#fff',
         borderRadius: '50%',
@@ -89,12 +90,14 @@ export function makeStyles() {
             z-index: 1;
         }
         .k-slider-thumb {
+            box-sizing: content-box;
             height: ${slider.thumb.height};
             width: ${slider.thumb.width};
             transition: all ${slider.transition};
             border: ${slider.thumb.border};
             border-radius: ${slider.thumb.borderRadius};
             background-color: ${slider.thumb.bgColor};
+            box-shadow: ${slider.thumb.boxShadow};
             outline: none;
             &:hover,
             &:focus {
@@ -113,6 +116,10 @@ export function makeStyles() {
         .k-slider-spinner {
             margin-left: ${slider.spinnerGap};
         }
+        .k-slider-spinner-sep {
+            display: inline-block;
+            margin: auto 8px;
+        }
 
         // dragging
         &.k-dragging {
@@ -131,10 +138,11 @@ export function makeStyles() {
                 cursor: not-allowed;
             }
             .k-slider-bar {
-                background-color: ${slider.disabled.color};
+                background-color: ${slider.disabled.bgColor};
             }
             .k-slider-thumb {
-                border-color: ${slider.disabled.color};
+                border-color: #fff;
+                background-color: ${slider.disabled.bgColor};
                 &:hover,
                 &:focus {
                     background-color: ${slider.disabled.bgColor};

package/components/slider/useValue.ts

@@ -29,7 +29,7 @@ export function useValue(getStep: NormalizedGetStep, getDragging: () => boolean)
     }
 
     function fixValue(value: Value, fixShowValue: boolean) {
-        const fixedValue = getFixedValue(value); 
+        const fixedValue = getFixedValue(value);
         showValue.set(fixShowValue ? fixedValue: value);
         setValue(fixedValue);
     }
@@ -60,7 +60,7 @@ export function useValue(getStep: NormalizedGetStep, getDragging: () => boolean)
     function fix(value: number): number {
         const {max, forceStep} = instance.get();
         const [step, min] = getStep(value);
-        
+
         if (min > max!) {
             if (process.env.NODE_ENV !== 'production') {
                 error(`[Slider] min must less than or equal to max, but got min: ${min} max: ${max}`);
@@ -71,11 +71,21 @@ export function useValue(getStep: NormalizedGetStep, getDragging: () => boolean)
         return minMaxStep(value, min, max!, forceStep ? step : null);
     }
 
-    function onSpinnerChange(v: number) {
+    function onSpinnerChange(v: Value) {
         showValue.set(v);
         instance.set({value: v});
     }
 
+    function onLeftSpinnerChange(v: number) {
+        const secondValue = (showValue.value as Value<true>)[1];
+        onSpinnerChange([v, Math.max(v, secondValue)]);
+    }
+
+    function onRightSpinnerChange(v: number) {
+        const firstValue = (showValue.value as Value<true>)[0];
+        onSpinnerChange([Math.min(v, firstValue), v]);
+    }
+
     function triggerChangeEvent(oldValue: Value) {
         const {value} = instance.get();
         if (isEqualValue(value!, oldValue)) return;
@@ -86,6 +96,8 @@ export function useValue(getStep: NormalizedGetStep, getDragging: () => boolean)
     return {
         showValue,
         onSpinnerChange,
+        onLeftSpinnerChange,
+        onRightSpinnerChange,
         setValue,
         triggerChangeEvent,
         fixValue,

package/components/spinner/index.md

@@ -37,4 +37,4 @@ export type StepFunction = (value: number) => number
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| change | `value`值变化时触发，与默认事件`$change:value`不同的是，该事件仅在`input` `change`事件触发或者点击加减按钮改变`value`时触发 | `(value: number) => void` |
+| change | `value`值变化时触发，与默认事件`$change:value`不同的是，该事件仅在输入框`change`事件触发或者点击加减按钮改变`value`时触发 | `(value: number) => void` |

package/components/spinner/index.ts

@@ -88,13 +88,4 @@ export class Spinner extends Component<SpinnerProps, SpinnerEvents> {
         const {value, max, disabled} = this.get();
         return disabled || value! >= max!;
     }
-
-    // we need change value as long as the input is valid, #213
-    @bind
-    private onInput(e: InputEvent) {
-        const val = (e.target as HTMLInputElement).value;
-        const {value} = this.value.getFixedValue(val.trim(), this.get('value')!);
-        this.value.showValue.set(val);
-        this.set({value});
-    }
 }

package/components/spinner/index.vdt

@@ -13,7 +13,8 @@ const classNameObj = {
     'k-vertical': vertical,
     [makeStyles()]: true,
 };
-const {decrease, increase, changeValue, onFocusin} = this.change;
+const {decrease, increase, onChangeValue, onFocusin} = this.change;
+const {showValue, onInput} = this.value;
 
 <div class={classNameObj} {...getRestProps(this)}>
     <Button icon ev-click={decrease}
@@ -21,6 +22,7 @@ const {decrease, increase, changeValue, onFocusin} = this.change;
         class="k-spinner-btn k-left"
         size={size}
         type="none"
+        tabindex="-1"
     >
         <Icon v-if={!vertical} class="k-spinner-icon k-icon-minus-small" />
         <Icon v-else class="k-spinner-icon k-icon-arrow-down" />
@@ -28,10 +30,10 @@ const {decrease, increase, changeValue, onFocusin} = this.change;
     <Input
         class="k-spinner-input"
         disabled={disabled} 
-        ev-change={changeValue}
+        ev-change={onChangeValue}
         ev-focusin={onFocusin}
-        value={this.value.showValue.value}
-        ev-input={this.onInput}
+        value={showValue.value}
+        ev-input={onInput}
         size={size}
         width={width}
     />
@@ -40,6 +42,7 @@ const {decrease, increase, changeValue, onFocusin} = this.change;
         class="k-spinner-btn k-right"
         size={size}
         type="none"
+        tabindex="-1"
     >
         <Icon v-if={!vertical} class="k-spinner-icon k-icon-add-small" />
         <Icon v-else class="k-spinner-icon k-icon-arrow-up" />

package/components/spinner/useChange.ts

@@ -24,7 +24,7 @@ export function useChange(
         fixAndTriggerChange(Number((value! - step).toFixed(10)), 0);
     }
 
-    function changeValue(e: Event) {
+    function onChangeValue(e: Event) {
         fixAndTriggerChange(
             (e.target as HTMLInputElement).value.trim(),
             instance.get('value')!,
@@ -42,5 +42,5 @@ export function useChange(
         }
     }
 
-    return {increase, decrease, changeValue, onFocusin};
+    return {increase, decrease, onChangeValue, onFocusin};
 }

package/components/spinner/useValue.ts

@@ -60,7 +60,15 @@ export function useValue(
         return {valueString, value};
     }
 
-    return {showValue, fixValue, getFixedValue};
+    // we need change value as long as the input is valid, #213
+    function onInput(e: InputEvent) {
+        const val = (e.target as HTMLInputElement).value;
+        const {value} = getFixedValue(val.trim(), instance.get('value')!);
+        showValue.set(val);
+        instance.set({value});
+    }
+
+    return {showValue, fixValue, getFixedValue, onInput};
 }
 
 /**

package/components/split/index.vdt

@@ -1,5 +1,7 @@
 import {makeStyles} from './style';
 import {kls} from './style';
+import { MemoBlock } from './memo';
+import { getRestProps } from '../utils';
 
 const {mode} = this.get();
 const {firstSize, lastSize} = this.size;
@@ -15,12 +17,16 @@ const classNameObj = {
 
 const stylePropName = mode === 'horizontal' ? 'width' : 'height';
 
-<div class={classNameObj} ref={elementRef}>
+<div class={classNameObj} ref={elementRef} {...getRestProps(this)}>
     <div class={kls('first')}
         ref={firstRef}
         style={{[stylePropName]: firstSize.value}}
     >
-        <b:first />
+        <MemoBlock block={$blocks.first}>
+            <template>
+                <b:first />
+            </template>
+        </MemoBlock>
     </div>
     <div class={kls('line-wrapper')} ev-mousedown={start}>
         <b:drag>
@@ -33,6 +39,10 @@ const stylePropName = mode === 'horizontal' ? 'width' : 'height';
         style={{[stylePropName]: lastSize.value}}
         ref={lastRef}
     >
-        <b:last />
+        <MemoBlock block={$blocks.last}>
+            <template>
+                <b:last />
+            </template>
+        </MemoBlock>
     </div>
 </div>

package/components/split/memo.ts

@@ -0,0 +1,29 @@
+import {Component, Props, VNodeComponentClass, IntactDom} from 'intact';
+
+interface MemoBlockProps {
+    block: Function
+}
+
+export class MemoBlock extends Component<MemoBlockProps> {
+    static template = function(this: MemoBlock) {
+        const props = this.$props;
+
+        return props.children;
+    }
+
+    $update(
+        lastVNode: VNodeComponentClass<this>,
+        nextVNode: VNodeComponentClass<this>,
+        parentDom: Element,
+        anchor: IntactDom | null,
+        mountedQueue: Function[],
+        force: boolean
+    ) {
+        const lastProps = lastVNode.props!;
+        const nextProps = nextVNode.props!;
+
+        if (lastProps.block === nextProps.block) return;
+
+        super.$update(lastVNode, nextVNode, parentDom, anchor, mountedQueue, force);
+    }
+}