@king-design/intact 2.0.0-beta.0

package/components/select/useBaseLabel.ts

@@ -0,0 +1,78 @@
+import {Children, useInstance, Component} from 'intact';
+import {isNullOrUndefined, isStringOrNumber} from 'intact-shared';
+import {isEmptyString} from '../utils';
+
+type BaseLabelProps = {
+    value: any,
+    multiple: boolean,
+}
+
+export function useBaseLabel<T, C extends Component<P>, P extends BaseLabelProps>(
+    getChildren: () => T,
+    findLabelFromChildren: (children: T, value: any) => Children,
+) {
+    const instance = useInstance() as C;
+    const labelMap: Map<any, Children> = new Map();
+
+    function getLabel() {
+        const {value, multiple} = instance.get();
+        const children = getChildren();
+
+        if (isNullOrUndefined(value)) return;
+
+        if (!multiple) {
+            return findLabel(children, value);
+        } else {
+            const labels: Children[] = [];
+            value.forEach((value: any) => {
+                const label = findLabel(children, value);
+                if (!isNullOrUndefined(label)) {
+                    labels.push(label);
+                }
+            });
+
+            return labels;
+        }
+    }
+
+    function findLabel(children: T, value: any): Children | null {
+        let label = findLabelFromChildren(children, value);
+
+        if (isNullOrUndefined(label)) {
+            label = labelMap.get(value);
+        } else {
+            labelMap.set(value, label);
+        }
+
+        label = isEmptyString(label) ? (isStringOrNumber(value) ? value : null) : label;
+
+        return label;
+    }
+
+    function cleanMap() {
+        const {value, multiple} = instance.get();
+
+        if (isNullOrUndefined(value)) {
+            labelMap.clear();
+            return;
+        }
+
+        if (multiple) {
+            labelMap.forEach((item, key) => {
+                if (!value.includes(key)) {
+                    labelMap.delete(key);
+                }
+            });
+            return;
+        }
+        labelMap.forEach((item, key) => {
+            if (key !== value) {
+                labelMap.delete(key);
+            }
+        });
+    }
+ 
+    instance.watch('value', cleanMap, {inited: true});
+
+    return {getLabel};
+}

package/components/select/useCard.ts

@@ -0,0 +1,34 @@
+import {Component, TypeDefs, useInstance, Children, Blocks, createRef, NonNullableRefObject} from 'intact';
+import {eachChildren, isComponentVNode, last} from '../utils';
+import {EMPTY_OBJ} from 'intact-shared';
+import {OptionGroup} from './group';
+import {useState} from '../../hooks/useState';
+
+export function useCard(defaultActiveIndex: NonNullableRefObject<number[]>) {
+    const children = useInstance()!.get('children');
+    const activeIndex = useState<number>(last(defaultActiveIndex.value) || 0);
+
+    function process(children: Children) {
+        const groupLabels: Children[] | Blocks[string][] = [];
+        const _children: Children[] = [];
+        let index = 0;
+        eachChildren(children, vNode => {
+            if (isComponentVNode(vNode, OptionGroup)) {
+                const props = vNode.props || EMPTY_OBJ;
+                const label = (props.$blocks || EMPTY_OBJ).label || props.label;
+                groupLabels.push(label); 
+                
+                if (index === activeIndex.value) {
+                    _children.push(vNode);
+                }
+                index++;
+            } else {
+                _children.push(vNode);
+            }
+        });
+
+        return {labels: groupLabels, group: _children};
+    }
+
+    return {process, activeIndex};
+}

package/components/select/useEqualWidth.ts

@@ -0,0 +1,16 @@
+import {useInstance, findDomFromVNode} from 'intact';
+import type {BaseSelect} from './base';
+
+export function useEqualWidth() {
+    const instance = useInstance() as BaseSelect;
+
+    instance.watch('_show', setWidth, {presented: true});
+
+    function setWidth(v: boolean | undefined) {
+        if (!v) return;
+
+        const menuElement = findDomFromVNode(instance.dropdownRef.value!.menuVNode!, true) as HTMLElement;
+        const entity = findDomFromVNode(instance.$lastInput!, true) as HTMLElement; 
+        menuElement.style.minWidth = `${entity.offsetWidth}px`;
+    }
+}

package/components/select/useFilterable.ts

@@ -0,0 +1,109 @@
+import {
+    useInstance,
+    nextTick,
+    createVNode as h,
+    Children,
+    VNode,
+    VNodeComponentClass,
+    directClone,
+    createRef,
+    Props,
+} from 'intact';
+import {useState, State} from '../../hooks/useState';
+import type {Select, SelectProps} from './select';
+import {Option, OptionProps} from './option';
+import {OptionGroup, OptionGroupProps} from './group';
+import {isNullOrUndefined, EMPTY_OBJ, isStringOrNumber} from 'intact-shared';
+import {getTextByChildren, mapChildren, isComponentVNode} from '../utils';
+import type {Input} from '../input';
+
+export function useFilterable(keywords: State<string>) {
+    const component = useInstance() as Select;
+
+    function getCreatedVNode(children: (VNode | string | number)[]) {
+        const {creatable, filterable} = component.get();
+        const _keywords = keywords.value;
+        if (creatable && filterable && _keywords) {
+            if (!children.find(vNode => {
+                // TODO: create Option for OptionGroup
+                if ((vNode as VNode).tag === Option) {
+                    const props = (vNode as VNode).props;
+                    if (isNullOrUndefined(props)) return false;
+                    if (props.value === _keywords || props.label.trim() === _keywords) {
+                        return true;
+                    }
+                }
+                return false;
+            })) {
+                return h(Option, {value: _keywords, label: _keywords});
+            }
+        }
+    }
+
+    function filter(children: Children) {
+        let {filterable, filter, searchable} = component.get();
+
+        if (!filterable && !searchable) return children;
+
+        if (isNullOrUndefined(filter)) {
+            filter = defaultFilter;
+        }
+
+        const loop = (children: Children) => {
+            const _children: (VNode | string | number)[] = [];
+            mapChildren(children, vNode => {
+                if (isComponentVNode(vNode, Option)) {
+                    const props = vNode.props as Props<OptionProps>;
+                    if (isNullOrUndefined(props)) return;
+
+                    vNode = directClone(vNode as VNode);
+
+                    if (isNullOrUndefined(props.label)) {
+                        vNode.props = {...props, label: getTextByChildren(props.children)};
+                    }
+
+                    if (filter!(keywords.value, vNode.props)) {
+                        _children.push(vNode);
+                    }
+                } else if (isComponentVNode(vNode, OptionGroup)) {
+                    const props = vNode.props;
+                    if (isNullOrUndefined(props)) return;
+
+                    const children = loop(props.children);
+                    if (!children.length) return;
+
+                    vNode = directClone(vNode);
+                    vNode.props = {...props, children};
+
+                    _children.push(vNode);
+                } else {
+                    _children.push(vNode);
+                }
+            });
+
+            return _children;
+        }
+
+        return loop(children);
+    }
+
+    return {getCreatedVNode, filter};
+}
+
+function defaultFilter(keywords: string, props: any): boolean {
+    if (keywords === '') return true;
+
+    keywords = keywords.toLowerCase();
+
+    const label = props.label;
+    if (!isNullOrUndefined(label) && ~label.toLowerCase().indexOf(keywords)) {
+        return true;
+    }
+
+    const value = props.value;
+    if (isStringOrNumber(value) && ~String(value).toLowerCase().indexOf(keywords)) {
+        return true;
+    }
+
+    return false;
+}

package/components/select/useFocusout.ts

@@ -0,0 +1,40 @@
+import {useInstance, createRef} from 'intact';
+import {BaseSelect} from './base';
+
+/**
+ * don't trigger focusout event when layer is showing,
+ * only trigger focusout when it hidden to make FormItem to validate it
+ * #449
+ */
+export function useFocusout() {
+    const instance = useInstance() as BaseSelect;
+    const triggerRef = createRef<HTMLElement>();
+
+    instance.on('hide', () => {
+        // add _dispatch true to let Input knowns ignore this event
+        // and don't endInput, #523
+        dispatchEvent(triggerRef.value!, 'focusout', {_dispatch: true});
+    });
+
+    function onFocusout(e: FocusEvent) {
+        instance.trigger('focusout', e);
+        if (instance.get('_show')) {
+            e.stopPropagation();
+        }
+    }
+
+    return {onFocusout, triggerRef};
+}
+
+function dispatchEvent(target: Element, eventName: string, options?: Record<string, any>) {
+    let event: Event;
+    if (document.createEvent) {
+        event = document.createEvent('Event');
+        event.initEvent(eventName, true, true);
+    } else if (typeof CustomEvent !== 'undefined') {
+        event = new CustomEvent(eventName);
+    }
+    Object.assign(event!, options);
+    target.dispatchEvent(event!);
+}
+

package/components/select/useInput.ts

@@ -0,0 +1,62 @@
+import {
+    useInstance,
+    nextTick,
+    createVNode as h,
+    Children,
+    VNode,
+    VNodeComponentClass,
+    directClone,
+    createRef,
+    Props,
+} from 'intact';
+import {useState, State} from '../../hooks/useState';
+import type {Select, SelectProps} from './select';
+import {Option, OptionProps} from './option';
+import {OptionGroup, OptionGroupProps} from './group';
+import {isNullOrUndefined, EMPTY_OBJ, isStringOrNumber} from 'intact-shared';
+import {getTextByChildren, mapChildren, isComponentVNode} from '../utils';
+import type {Input} from '../input';
+
+export function useInput(resetKeywords: (keywords: State<string>) => void) {
+    const component = useInstance() as Select;
+    const keywords = useState('');
+    const inputRef = createRef<Input>();
+
+    function onInput(value: string) {
+        keywords.set(value.trim());
+
+        const dropdown = component.dropdownRef.value!;
+        // the position may be flip, and the select input height may change height too,
+        // so we should reset the position
+        nextTick(() => {
+            dropdown.focusFirst();
+            dropdown.position();
+        });
+    }
+
+    // if menu showed and value changed on multiple mode
+    // focus the input
+    function focusInput() {
+        if (component.get('filterable')) {
+            inputRef.value!.focus();
+        }
+    }
+
+    component.on('$changed:_show', show => {
+        if (show) {
+            focusInput();
+            resetKeywords(keywords);
+        } else if (component.get('multiple')) {
+            resetKeywords(keywords);
+        }
+    });
+    component.on('$changed:value', () => {
+        const {multiple, filterable} = component.get();
+        if (multiple && filterable) {
+            focusInput();
+            resetKeywords(keywords);
+        }
+    });
+
+    return {onInput, keywords, inputRef};
+}

package/components/select/useLabel.ts

@@ -0,0 +1,50 @@
+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 useLabel() {
+    const instance = useInstance() as Select;
+    const activeIndices = createRef<number[]>([]);
+
+    const {getLabel} = useBaseLabel(
+        () => instance.get('children'),
+        findLabel
+    );
+
+    function findLabel(children: Children, value: any) {
+        let label: Children = null;
+        let index = 0;
+        activeIndices.value = [];
+        const loop = (children: Children) => {
+            return findChildren(children, (vNode) => {
+                if (isComponentVNode(vNode, Option)) {
+                    const props = vNode.props as Props<OptionProps>;
+                    if (isNullOrUndefined(props)) return false;
+                    if (props.value === value) {
+                        label = props.label;
+                        if (isNullOrUndefined(label)) {
+                            label = props.children;
+                        }
+                        return true;
+                    }
+                } else if (isComponentVNode(vNode, OptionGroup)) {
+                    if (loop((vNode.props || EMPTY_OBJ).children)) {
+                        activeIndices.value.push(index);
+                        return true;
+                    }
+                    index++;
+                }
+                return false;
+            });
+        };
+        loop(children);
+
+        return label;
+    }
+
+    return {getLabel, activeIndices};
+}

package/components/select/useSearchable.ts

@@ -0,0 +1,61 @@
+import {useInstance, Children} from 'intact';
+import type {SelectMenu} from './menu';
+import {useState} from '../../hooks/useState';
+import {isNullOrUndefined} from 'intact-shared';
+import {createContext} from '../context';
+import {eachChildren, isComponentVNode} from '../utils';
+import {Option, OptionProps} from './option';
+import {OptionGroup, OptionGroupProps} from './group';
+
+export const context = createContext();
+
+export function useSearchable() {
+    const menu = useInstance() as SelectMenu;
+    const select = menu.select!;
+    const checkedKeys = useState<any[]>([]);
+
+    function selectAll() {
+        checkedKeys.set(addKeys(checkedKeys.value, menu.get('values')));
+    }
+
+    function unselectAll() {
+        checkedKeys.set(removeKeys(checkedKeys.value, menu.get('values')));
+    }
+
+    function toggleSelect() {
+        const checked: any[] = [];
+        const unchecked: any[] = [];
+        menu.get('values').forEach(item => {
+            if (checkedKeys.value.indexOf(item) > -1) {
+                checked.push(item);
+            } else {
+                unchecked.push(item);
+            }
+        });
+
+        checkedKeys.set(removeKeys(addKeys(checkedKeys.value, unchecked), checked));
+    }
+
+    function confirm() {
+        select.set('value', checkedKeys.value);
+        select.hide();
+    }
+
+    function initCheckedKeys() {
+        const value = select.get('value');
+        checkedKeys.set(isNullOrUndefined(value) ? [] : value); 
+    }
+
+    select.watch('value', initCheckedKeys);
+    select.on('hide', initCheckedKeys)
+
+    return {checkedKeys, selectAll, unselectAll, toggleSelect, confirm};
+}
+
+function addKeys(origin: any[] | null | undefined, keys: any[]) {
+    return Array.from(new Set([...keys, ...(origin || [])]));
+}
+
+function removeKeys(origin: any[] | null | undefined, keys: any[]) {
+    return (origin || []).filter(item => keys.indexOf(item) < 0);
+}

package/components/slider/demos/basic.md

@@ -0,0 +1,55 @@
+---
+title: 基础用法
+order: 0
+---
+
+用`min`和`max`指定取值范围，`v-model`进行双向数据绑定。动态改变组件的取值范围，组件会修正`value`
+值不让它超出该范围
+
+```vdt
+import {Slider, Button} from 'kpc';
+
+<div>
+    <Slider v-model="value1" min={this.get('min')} max={this.get('max')} unit="MB"/>
+    <Slider v-model="value2" min={50} max={500} ref="__test" />
+    <Button ev-click={this._changeRange}>Change Range Randomly</Button>
+</div>
+```
+
+```ts
+import {bind} from 'kpc';
+
+interface Props {
+    value1?: number
+    value2?: number
+    min: number
+    max: number
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            'value1': 60,
+            'value2': 277,
+            'min': 0,
+            'max': 100,
+        }
+    }
+
+    @bind
+    _changeRange() {
+        const max = Math.floor(Math.random() * 100);
+        const min = Math.floor(Math.random() * max);
+        this.set({max, min});
+    }
+}
+```
+
+```vue-methods
+_changeRange() {
+    this.max = Math.floor(Math.random() * 100);
+    this.min = Math.floor(Math.random() * this.max);
+}
+```

package/components/slider/demos/disabled.md

@@ -0,0 +1,15 @@
+---
+title: 禁用组件
+order: 3
+---
+
+添加`disabled`禁用组件
+
+```vdt
+import {Slider} from 'kpc';
+
+<div>
+    <Slider disabled value={50} ref="__test" />
+    <Slider disabled range value={[55, 80]} min={50} max={100} />
+</div>
+```

package/components/slider/demos/dynamicStep.md

@@ -0,0 +1,38 @@
+---
+title: 动态步长
+order: 1.1
+---
+
+动态步长是指，步长`step`不是固定不变的，而是定义在不同的取值区间，`step`取不同的步长值。
+
+通过对象`Object`设置，此时`key`表示小于当前值时`step`的取值，其中`$`代表`Number.POSITIVE_INFINITY`
+
+```vdt
+import {Slider} from 'kpc';
+
+<Slider v-model="value1" min={0} max={500}
+    step={{
+        // 0~100 step: 10
+        '100': 10,
+        // 100~500 step: 50
+        '500': 50
+    }}
+    showTooltip
+    points 
+/>
+```
+
+```ts
+interface Props {
+    value1?: number
+}
+
+export default class extends Component<Props> {
+    static template = template;
+    static defaults() {
+        return {
+            value1: 0,
+        };
+    }
+}
+```

package/components/slider/demos/marks.md

@@ -0,0 +1,56 @@
+---
+title: 展示标签
+order: 5
+---
+
+通过`marks`属性，可以给`Slider`标注刻度，该属性类型为`Object`，`key`表示组件的值，`value`为该
+值对应展示的标注文案。如果`value`为`String`类型，则直接展示成文案；如果`value`为`Array`，则数组
+第一项为未选中状态的文案，第二项为选中状态的文案，如果没有定义第二项，则会取第一项作为选中状态的文案，
+此时与`value`为`String`类型的表现是一样的。
+
+```vdt
+import {Slider} from 'kpc';
+
+<div>
+    <Slider min={1} max={12} value={6} 
+        showInput={false}
+        marks={this.get('marks')}
+    />
+    <Slider min={1} max={12} value={[2, 6]} 
+        showInput={false}
+        range
+        marks={this.get('marks')}
+    />
+</div>
+```
+
+```ts
+import {SliderMarks} from 'kpc';
+
+interface Props {
+    marks: SliderMarks
+}
+
+export default class extends Component {
+    static template = template;
+
+    static defaults() {
+        return {
+            marks: {
+                1: ['1', '1月'],
+                2: ['2', '2月'],
+                3: ['3', '3月'],
+                4: ['4', '4月'],
+                5: ['5', '5月'],
+                6: ['6', '6月'],
+                7: ['7', '7月'],
+                8: ['8', '8月'],
+                9: ['9', '9月'],
+                10: ['1年'],
+                11: '2年',
+                12: '3年',
+            }
+        } as Props;
+    }
+}
+```

package/components/slider/demos/points.md

@@ -0,0 +1,19 @@
+---
+title: 展示间隔点
+order: 4
+---
+
+给`Slider`指定`points`属性，可以展示间隔点。组件默认会根据`step`展示间隔点，你也可以通过数组指定哪些点
+需要展示间隔点。
+
+```vdt
+import {Slider} from 'kpc';
+
+<div>
+    <Slider value={45} step={5} points showInput={false}/>
+    <Slider value={[0.3, 0.6]} min={0} max={1} step={0.1} range points />
+    <Slider value={45} step={5} showInput={false} 
+        points={[0, 35, 95, 100]}
+    />
+</div>
+```

package/components/slider/demos/range.md

@@ -0,0 +1,28 @@
+---
+title: 范围选择
+order: 3
+---
+
+指定`range`使组件支持范围选择，此时`v-model`绑定的数据为数组，并且不会展示`input`输入框。
+
+```vdt
+import {Slider} from 'kpc';
+
+<Slider range v-model="values" ev-change={(v) => console.log(v)}/>
+```
+
+```ts
+interface Props {
+    values?: [number, number]
+}
+
+export default class extends Component<Props> {
+    static template = template;
+
+    static defaults() {
+        return {
+            values: [50, 76],
+        } as Props;
+    }
+}
+```