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

package/components/select/demos/size.md

@@ -45,6 +45,44 @@ import {Select, Option} from 'kpc';
         <Option value="Saturday">星期六</Option>
         <Option value="Sunday">星期天</Option>
     </Select>
+    <br /><br />
+    <Select v-model="days" size="large" multiple>
+        <Option value="Monday">星期一</Option>
+        <Option value="Tuesday">星期二</Option>
+        <Option value="Wednesday">星期三</Option>
+        <Option value="Thursday">星期四</Option>
+        <Option value="Friday">星期五</Option>
+        <Option value="Saturday">星期六</Option>
+        <Option value="Sunday">星期天</Option>
+    </Select>
+    <Select v-model="days" multiple>
+        <Option value="Monday">星期一</Option>
+        <Option value="Tuesday">星期二</Option>
+        <Option value="Wednesday">星期三</Option>
+        <Option value="Thursday">星期四</Option>
+        <Option value="Friday">星期五</Option>
+        <Option value="Saturday">星期六</Option>
+        <Option value="Sunday">星期天</Option>
+    </Select>
+    <Select v-model="days" size="small" multiple>
+        <Option value="Monday">星期一</Option>
+        <Option value="Tuesday">星期二</Option>
+        <Option value="Wednesday">星期三</Option>
+        <Option value="Thursday">星期四</Option>
+        <Option value="Friday">星期五</Option>
+        <Option value="Saturday">星期六</Option>
+        <Option value="Sunday">星期天</Option>
+    </Select>
+    <Select v-model="days" size="mini" multiple>
+        <Option value="Monday">星期一</Option>
+        <Option value="Tuesday">星期二</Option>
+        <Option value="Wednesday">星期三</Option>
+        <Option value="Thursday">星期四</Option>
+        <Option value="Friday">星期五</Option>
+        <Option value="Saturday">星期六</Option>
+        <Option value="Sunday">星期天</Option>
+    </Select>
+
 </div>
 ```
 
@@ -56,13 +94,15 @@ import {Select, Option} from 'kpc';
 ```ts
 interface Props {
    day?: string | null
+   days?: string[]
 }
 
 export default class extends Component {
     static template = template;
     static defaults() {
         return {
-            day: null
+            day: null,
+            days: [],
         } as Props;
     }
 }

package/components/select/index.md

@@ -33,6 +33,8 @@ sidebar: doc
 | autoDisableArrow | 是否在没有更多可选项时，给箭头一个`disabled`状态来提示用户 | `boolean` | `false` |
 | show | 是否展示菜单项 | `boolean` | `false` |
 | position | 菜单弹出的位置，默认与触发器左侧对齐向下偏移`8px`的地方 | `Position` | `"left"` | `"bottom"` | `"right"` | `"top"` | `{my: 'left top+8', 'left bottom'}` |
+| flat | 是否展示扁平样式 | `boolean` | `false` |
+| draggable | 多选值是否支持拖动排序 | `boolean` | `false` |
 
 ```ts
 type Position = {

package/components/select/index.spec.ts

@@ -46,7 +46,7 @@ describe('Select', () => {
         const dropdown = getElement('.k-select-menu')!;
         expect(dropdown.innerHTML).to.matchSnapshot();
 
-        const close = element.querySelector('.k-select-close') as HTMLElement;
+        const close = element.querySelector('.k-tag-close') as HTMLElement;
         close.click();
         await wait();
         expect(instance.get('days')!.length).to.eql(2);
@@ -108,7 +108,7 @@ describe('Select', () => {
         expect(dropdown.innerHTML).to.matchSnapshot();
         expect(instance.get('days')).to.eql(['Monday', 'Tuesday']);
         // delete
-        const deleteBtn = element.querySelector('.k-select-close') as HTMLElement;
+        const deleteBtn = element.querySelector('.k-tag-close') as HTMLElement;
         deleteBtn.click();
         await wait();
         expect(instance.get('days')).to.eql(['Tuesday']);

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(
@@ -22,11 +20,9 @@ const defaults = deepDefaults(
         get focusBorder() { return `1px solid ${theme.color.primary}` },
         // get hoverBorder() { return `1px solid ${theme.color.darkBorder}` },
         get hoverBorder() { return `1px solid ${theme.color.primary}` },
-        get iconColor() { return theme.color.placeholder },
         get activeColor() { return theme.color.primary },
         get borderRadius() { return theme.borderRadius },
         suffixGap: '10px',
-        disabledArrowColor: '#e5e5e5',
 
         clearGap: `8px`,
         get placeholderColor() { return theme.color.placeholder },
@@ -58,15 +54,15 @@ const defaults = deepDefaults(
         },
         tag: {
             margin: `3px 8px 3px 0`,
-            padding: `3px 8px`,
+            padding: `1px 8px`,
             get borderRadius() { return theme.borderRadius },
             get bgColor() { return theme.color.bg },
-            disabledBgColor: '#eee',
+            disabledBgColor: '#f8f9fa',
 
             delete: {
                 gap: `8px`,
                 fontSize: '14px',
-                get color() { return theme.color.placeholder },
+                get color() { return theme.color.lightBlack },
             }
         },
 
@@ -96,28 +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`,
-        }
-
-        if (size === 'large') {
-            // use default padding for large size
-            Object.defineProperty(memo.large, 'padding', {
-                get() {
-                    return `0 ${theme.default.padding}`;
-                }
-            });
-            Object.defineProperty(memo.large, 'fontSize', {
-                get() {
-                    return theme.default.fontSize;
-                }
-            });
         }
 
         return memo;
@@ -148,11 +133,11 @@ export default function makeStyles() {
         }
         .k-select-prefix,
         .k-select-suffix {
-            color: ${select.iconColor};
             position: relative;
         }
         .k-select-suffix {
             margin-left: ${select.suffixGap};
+            // margin-top: 1px;
         }
 
         .k-select-placeholder {
@@ -160,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%;
         }
@@ -193,9 +183,6 @@ export default function makeStyles() {
         .k-select-arrow {
             display: inline-block;
             transition: transform ${select.transition};
-            &.k-disabled {
-                color: ${select.disabledArrowColor};
-            }
         }
 
         // show
@@ -210,47 +197,14 @@ 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;
+            height: auto;
         }
-        .k-select-close {
-            margin-left: ${select.tag.delete.gap};
-            font-size: ${select.tag.delete.fontSize};
-            color: ${select.tag.delete.color};
-        }
-        // .k-select-input {
-            // margin-right: ${getRight(select.tag.margin)};
-        // }
 
         // size
         ${sizes.map(size => {
@@ -279,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});
-    }
 }