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

package/components/select/demos/draggable.md

@@ -0,0 +1,55 @@
+---
+title: 多选值拖动排序
+order: 13 
+---
+
+`Select`添加`draggable`属性，多选时，可以拖动值进行排序
+
+```vdt
+import {Select, Option} from 'kpc';
+
+<div>
+    <Select multiple draggable 
+        v-model="days1"
+    >
+        <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>
+    {JSON.stringify(this.get('days1'))}
+    <br /><br />
+    <Select multiple draggable nowrap
+        v-model="days2"
+    >
+        <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>
+    {JSON.stringify(this.get('days2'))}
+</div>
+```
+
+```ts
+interface Props {
+   days1?: string[]
+   days2?: string[]
+}
+
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            days1: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],
+            days2: ['Monday', 'Tuesday', 'Wednesday', 'Thursday'],
+        } as Props;
+    }
+}
+```

package/components/select/demos/flat.md

@@ -0,0 +1,42 @@
+---
+title: 扁平化样式 
+order: 11 
+---
+
+`Select`添加`flat`属性，展示扁平化样式
+
+```vdt
+import {Select, Option} from 'kpc';
+
+<div>
+    <Select flat>
+        <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>
+    <br /><br />
+    <Select flat 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>
+    <br /><br />
+    <Select flat disabled multiple value={['Monday', 'Tuesday']}>
+        <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>
+```

package/components/select/demos/nowrap.md

@@ -0,0 +1,24 @@
+---
+title: 单行展示多选的值
+order: 12 
+---
+
+`Select`添加`nowrap`属性，多选时，所有值仅展示单行
+
+```vdt
+import {Select, Option} from 'kpc';
+
+<div>
+    <Select multiple filterable clearable nowrap
+        value={['Monday', 'Tuesday', 'Wednesday', 'Thursday']}
+    >
+        <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>
+```

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

@@ -32,8 +32,20 @@ sidebar: doc
 | card | 是否展示`card`模式 | `boolean` | `false` |
 | 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 = {
+    my?: string | [string, string]
+    at?: string | [string, string]
+    collision?: Collision | [Collision, Collision] 
+    collisionDirection?: ['left'] | ['top'] | ['left', 'top']
+}
+
+type Collision = 'fit' | 'flip' | 'flipfit' | 'none'
+
 export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
 ```
 

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']);
@@ -256,11 +256,12 @@ describe('Select', () => {
         await wait();
         const dropdown = getElement('.k-select-menu')!;
         const [selectAll, toggleSelect, unselectAll] = dropdown.querySelectorAll<HTMLElement>('.k-select-op .k-btn');
-        const [confirm, cancel] = dropdown.querySelectorAll<HTMLElement>('.k-select-footer .k-btn');
+        const [cancel, confirm] = dropdown.querySelectorAll<HTMLElement>('.k-select-footer .k-btn');
 
         // select all
         selectAll.click();
         confirm.click();
+        await wait();
         expect(instance.get('days')).have.length(7);
 
         // unselect all
@@ -268,6 +269,7 @@ describe('Select', () => {
         await wait();
         unselectAll.click();
         confirm.click();
+        await wait();
         expect(instance.get('days')).have.length(0);
 
         // toggle select
@@ -281,6 +283,7 @@ describe('Select', () => {
         await wait();
         toggleSelect.click();
         confirm.click();
+        await wait();
         expect(instance.get('days')).have.length(5);
         expect(instance.get('days')).include('Monday')
     });

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>
@@ -61,26 +61,26 @@ if (searchable) {
                     clearable
                     waveDisabled={true}
                 >
-                    <b:suffix><Icon class="ion-ios-search" /></b:suffix>
+                    <b:suffix><Icon class="k-icon-search" /></b:suffix>
                 </Input>
                 <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">
                 {children}
             </div>
             <div class="k-select-footer" v-if={multiple}>
-                <Button type="primary" size="small" ev-click={confirm}>{_$('确定')}</Button>
                 <Button size="small" ev-click={this.select.hide}>{_$('取消')}</Button>
+                <Button type="primary" size="small" ev-click={confirm}>{_$('确定')}</Button>
             </div>
         </Provider>
     );

package/components/select/option.vdt

@@ -43,6 +43,7 @@ if (searchable && multiple) {
     <Transition name="k-scale" v-if={!searchable}>
         <Icon v-if={multiple && isActive}
             class="k-select-checkmark ion-ios-checkmark-empty"
+            color="primary"
         />
     </Transition>
 </DropdownItem>

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;
@@ -132,11 +133,13 @@ export default function makeStyles() {
         }
         .k-select-prefix,
         .k-select-suffix {
+            display: flex;
+            align-items: center;
             position: relative;
         }
         .k-select-suffix {
             margin-left: ${select.suffixGap};
-            margin-top: 2px;
+            // margin-top: 1px;
         }
 
         .k-select-placeholder {
@@ -144,6 +147,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%;
         }
@@ -170,7 +178,8 @@ export default function makeStyles() {
             }
         }
         .k-select-suffix-icon {
-            display: inline-block;
+            display: inline-flex;
+            align-items: center;
             transition: opacity ${select.transition};
         }
 
@@ -191,42 +200,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;
-        }
-        .k-select-close {
-            margin-left: ${select.tag.delete.gap};
-            font-size: ${select.tag.delete.fontSize};
+            height: auto;
+            max-width: calc(100% - ${getRight(select.tag.margin)} - 1px);
         }
 
         // size
@@ -256,6 +237,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/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>