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

package/components/utils.ts

@@ -181,19 +181,22 @@ export function findChildren(children: Children, callback: MapCallback<boolean>)
     if (isInvalid(children)) return found;
 
     let index = -1;
-    const loop = (children: ValidVNode | NormalizedChildren[] | Children[]) => {
+    const loop = (children: ValidVNode | NormalizedChildren[] | Children[]): boolean => {
         if (Array.isArray(children)) {
             for (let i = 0; i < children.length; i++) {
                 const vNode = children[i];
                 if (isInvalid(vNode)) continue;
                 if (loop(vNode)) {
                     found = vNode as ValidVNode;
-                    break;
+                    return true;
                 }
             }
-        } else {
-            return callback(children, ++index);
+        } else if (callback(children, ++index)) {
+            found = children as ValidVNode;
+            return true;
         }
+
+        return false;
     }
 
     loop(children);
@@ -357,3 +360,21 @@ export function nextFrame(fn: () => void) {
         requestAnimationFrame(fn);
     });
 }
+
+export function selectValue(elem: HTMLInputElement | HTMLTextAreaElement) {
+    if (elem.select) {
+        elem.select();
+    } else if (elem.setSelectionRange) {
+        // mobile safari
+        elem.focus();
+        elem.setSelectionRange(0, elem.value.length);
+    }
+}
+
+export function swap(list: any[], from: number, to: number) {
+    const newList = list.slice(0);
+    const item = newList.splice(from, 1)[0];
+    newList.splice(to, 0, item);
+
+    return newList;
+}

package/components/virtual.ts

@@ -0,0 +1,98 @@
+import {
+    Component,
+    VNode,
+    directClone,
+    createVNode,
+} from 'intact';
+import { isTextChildren } from './utils';
+import { EMPTY_OBJ, isFunction, hasOwn } from 'intact-shared';
+import { cx } from '@emotion/css';
+
+const reactEventReg = /on[A-Z]/;
+
+export class Virtual extends Component<any> {
+    static template(this: Virtual) {
+        const { children, ...props } = this.get();
+
+        if (process.env.NODE_ENV !== 'production') {
+            if (!children || (Array.isArray(children) && children.length !== 1)) {
+                throw new Error('Component must receive one children');
+            }
+        }
+
+        const vNode = Array.isArray(children) ? children[0] : children;
+        const clonedVNode = isTextChildren(vNode)
+            ? createVNode('span', null, vNode)
+            : directClone(vNode as VNode);
+
+        const vNodeProps = this.vNodeProps = this.getVNodeProps(clonedVNode.props || EMPTY_OBJ);
+        const eventProps = this.getEventProps();
+
+        //  merge className 
+        let className = clonedVNode.className || vNodeProps.className;
+        className = cx({
+            [className!]: !!className,
+            [props.className!]: !!props.className,
+        });
+
+        clonedVNode.props = { ...props, ...vNodeProps, ...eventProps, className };
+        clonedVNode.className = className;
+
+        return clonedVNode;
+    }
+
+    private vNodeProps: any = null;
+
+    private getVNodeProps(props: any) {
+        const vnode = props.vnode;
+
+        if (!vnode) return props;
+
+        // maybe we render the intact component in react slot property, in this case
+        // the $isReact is false. so use the vnode $$typeof field as gauge
+        if (vnode.$$typeof || vnode.__v_isVNode /* vue3 vnode */) {
+            const _props = vnode.props;
+            if (!_props) return props;
+
+            const events: Record<string, Function> = {};
+            for (let key in _props) {
+                if (reactEventReg.test(key)) {
+                    events[`ev-${key.substring(2).toLowerCase()}`] = _props[key];
+                }
+            }
+
+            return {...props, ...events, className: _props.className || _props.class /* vue-next */};
+        } else if (hasOwn.call(vnode, 'componentOptions') /* vue2 vnode */) {
+            const data = vnode.data;
+            const on = data && data.on || EMPTY_OBJ;
+            const events: Record<string, Function> = {};
+            for (let key in on) {
+                events[`ev-${key}`] = on[key];
+            }
+
+            return {...props, ...events};
+        }
+
+        return props;
+    }
+
+    private getEventProps() {
+        const props: Record<string, Function> = {};
+
+        for (let prop in this.get()) {
+            if (prop.startsWith('ev-')) {
+                props[prop] = (e: MouseEvent) => this.callEvent(prop, e);
+            }
+        }
+
+        return props;
+    }
+
+
+    private callEvent(name: string, e: MouseEvent) {
+        const callback = this.vNodeProps[name];
+        const callbackOnVirtual = this.get<Function>(name);
+        if (isFunction(callback)) callback(e);
+        if (isFunction(callbackOnVirtual)) callbackOnVirtual(e);
+    }
+}

package/es/components/button/index.d.ts

@@ -14,7 +14,7 @@ interface ButtonHTMLAttributes {
     download?: string;
 }
 export interface ButtonProps extends ButtonHTMLAttributes {
-    type?: Colors | 'none' | 'secondary' | 'link';
+    type?: Colors | 'none' | 'secondary' | 'link' | 'flat';
     size?: Sizes;
     icon?: boolean;
     circle?: boolean;

package/es/components/button/index.js

@@ -7,7 +7,7 @@ import { bind } from '../utils';
 import { BUTTON_GROUP } from './constants';
 export * from './group';
 var typeDefs = {
-  type: ['default', 'primary', 'warning', 'danger', 'success', 'none', 'secondary', 'link'],
+  type: ['default', 'primary', 'warning', 'danger', 'success', 'none', 'secondary', 'link', 'flat'],
   size: ['large', 'default', 'small', 'mini'],
   icon: Boolean,
   circle: Boolean,

package/es/components/button/styles.d.ts

@@ -24,7 +24,7 @@ declare const defaults: {
     link: {
         readonly color: string;
         readonly hoverColor: string;
-        readonly hoverBgColor: string;
+        hoverBgColor: string;
     };
     none: {
         readonly hoverBgColor: string;

package/es/components/button/styles.js

@@ -7,7 +7,7 @@ export var types = ['primary', 'warning', 'danger', 'active', 'success'];
 var sizes = ['large', 'small', 'mini'];
 var btnStyles = {
   get color() {
-    return theme.color.lightBlack;
+    return theme.color.text;
   },
 
   bgColor: '#fff',
@@ -181,9 +181,7 @@ var defaults = deepDefaults({
       return theme.color.linkHover;
     },
 
-    get hoverBgColor() {
-      return theme.color.hoverBg;
-    }
+    hoverBgColor: 'transparent' // get hoverBgColor() { return theme.color.hoverBg },
 
   },
   none: {
@@ -238,7 +236,7 @@ export function makeButtonStyles(_ref) {
   css("display:inline-flex;align-items:center;justify-content:center;cursor:pointer;height:", button.height, ";padding:", button.padding, ";outline:none;vertical-align:middle;color:", button.color, ";background:", button.bgColor, ";border-radius:", button.borderRadius, ";border:1px solid ", button.borderColor, ";font-size:", button.fontSize, ";white-space:nowrap;transition:all ", button.transition, ";line-height:", button.lineHeight, ";.k-icon{color:inherit;}&:hover,&:focus{border-color:", button.hoverBorderColor, ";color:", button.hoverColor, ";}&:active{background:", palette(theme.color.primary, -4), ";}.k-button-input{position:absolute;opacity:0;width:0;height:0;}", _mapInstanceProperty(types).call(types, function (type) {
     var typeStyles = button[type];
     return /*#__PURE__*/css("&.k-", type, "{background:", typeStyles.bgColor, ";color:", typeStyles.color, ";border-color:", typeStyles.borderColor, ";&:hover,&:focus{background:", palette(typeStyles.bgColor, -1), ";border-color:", typeStyles.hoverBorderColor, ";color:", typeStyles.color, ";}&:active{background:", palette(typeStyles.bgColor, 1), ";border-color:", palette(typeStyles.borderColor, 1), ";}}");
-  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none,&.k-link{background:transparent;&,&:hover{border:none;}&.k-active{color:", theme.color.primary, ";}}&.k-none:hover{background:", button.none.hoverBgColor, ";}", _mapInstanceProperty(sizes).call(sizes, function (size) {
+  }), "&.k-secondary{color:", secondary.color, ";border-color:", secondary.borderColor, ";&:hover,&:focus{background:", secondary.hoverBgColor, ";}&:active{background:", secondary.activeBgColor, ";}}&.k-link{color:", link.color, ";&:hover{color:", link.hoverColor, ";background:", link.hoverBgColor, ";}}&.k-none,&.k-link,&.k-flat{background:transparent;&,&:hover{border:none;}&.k-active{color:", theme.color.primary, ";}}&.k-none:hover{background:", button.none.hoverBgColor, ";}&.k-flat{background:", button.none.hoverBgColor, ";}&.k-disabled{&,&:hover{color:", button.disabled.color, ";background:", button.disabled.bgColor, ";border-color:", button.disabled.borderColor, ";cursor:not-allowed;}}&.k-none.k-disabled,&.k-link.k-disabled{&,&:hover{background:transparent;}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
     var styles = button[size];
     return /*#__PURE__*/css("&.k-", size, "{font-size:", styles.fontSize, ";height:", styles.height, ";padding:", styles.padding, ";&.k-btn-icon{width:", styles.height, ";}}");
   }), "&.k-btn-icon{width:", button.height, ";padding:0;.k-icon{margin:0;}}&.k-fluid{width:100%;padding:0;}&.k-circle{border-radius:calc(", button.large.height, " / 2);}&.k-loading{", _mapInstanceProperty(types).call(types, function (type) {

package/es/components/carousel/index.vdt.js

@@ -7,10 +7,10 @@ import { Icon } from '../icon';
 import { makeStyles } from './styles';
 import { linkEvent } from 'intact';
 var _$tmp0 = {
-  'className': 'ion-ios-arrow-left'
+  'className': 'k-icon-left'
 };
 var _$tmp1 = {
-  'className': 'ion-ios-arrow-right'
+  'className': 'k-icon-right'
 };
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj;

package/es/components/cascader/index.d.ts

@@ -1,28 +1,39 @@
 import { TypeDefs } from 'intact';
 import { BaseSelect, BaseSelectProps, BaseSelectEvents, BaseSelectBlocks } from '../select/base';
-export interface CascaderProps<V = any, Multipe extends boolean = boolean> extends BaseSelectProps<V[], Multipe> {
-    data?: CascaderData<V>[];
+export interface CascaderProps<V = any, Multipe extends boolean = boolean, Data extends BaseCascaderData = CascaderData<V>> extends BaseSelectProps<V[], Multipe> {
+    data?: Data[];
     trigger?: 'click' | 'hover';
     changeOnSelect?: boolean;
     format?: (labels: string[]) => string;
-    loadData?: (data: CascaderData<V>) => any;
-    filter?: (keywords: string, data: CascaderData<V>) => boolean;
+    loadData?: (data: Data) => any;
+    filter?: (keywords: string, data: Data) => boolean;
+    fields?: CascaderFields<Data>;
 }
-export declare type CascaderData<V> = {
+export declare type CascaderFields<Data> = {
+    value?: keyof Data;
+    label?: keyof Data;
+    children?: keyof Data;
+    disabled?: keyof Data;
+};
+export interface BaseCascaderData {
+    loaded?: boolean;
+    [key: string]: any;
+}
+export interface CascaderData<V> extends BaseCascaderData {
     value: V;
     label: string;
-    disabled?: boolean;
-    loaded?: boolean;
     children?: CascaderData<V>[];
-};
+    disabled?: boolean;
+}
 export interface CascaderEvents extends BaseSelectEvents {
 }
 export interface CascaderBlocks<V> extends BaseSelectBlocks<V> {
 }
-export declare class Cascader<V = any, Multipe extends boolean = false> extends BaseSelect<CascaderProps<V, Multipe>, CascaderEvents, CascaderBlocks<V>> {
+export declare class Cascader<V = any, Multipe extends boolean = false, Data extends BaseCascaderData = CascaderData<V>> extends BaseSelect<CascaderProps<V, Multipe, Data>, CascaderEvents, CascaderBlocks<V>> {
     static template: string | import("intact").Template<any>;
-    static typeDefs: Required<TypeDefs<CascaderProps<any, boolean>>>;
-    static defaults: () => Partial<CascaderProps<any, boolean>>;
+    static typeDefs: Required<TypeDefs<CascaderProps<any, boolean, CascaderData<any>>>>;
+    static defaults: () => Partial<CascaderProps<any, boolean, CascaderData<any>>>;
+    private fields;
     private value;
     private label;
     private load;

package/es/components/cascader/index.js

@@ -1,6 +1,5 @@
 import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
 import template from './index.vdt';
 import { BaseSelect } from '../select/base';
@@ -10,6 +9,7 @@ import { useValue } from './useValue';
 import { useLabel } from './useLabel';
 import { useLoad } from './useLoad';
 import { useFilterable } from './useFilterable';
+import { useFields } from './useFields';
 
 var typeDefs = _extends({}, BaseSelect.typeDefs, {
   data: Array,
@@ -17,7 +17,8 @@ var typeDefs = _extends({}, BaseSelect.typeDefs, {
   changeOnSelect: Boolean,
   format: Function,
   loadData: Function,
-  filter: Function
+  filter: Function,
+  fields: Object
 });
 
 var defaults = function defaults() {
@@ -26,11 +27,6 @@ var defaults = function defaults() {
     trigger: 'click',
     format: function format(labels) {
       return labels.join(' / ');
-    },
-    filter: function filter(keywords, data) {
-      var _context;
-
-      return _includesInstanceProperty(_context = data.label).call(_context, keywords);
     }
   });
 };
@@ -39,7 +35,7 @@ export var Cascader = /*#__PURE__*/function (_BaseSelect) {
   _inheritsLoose(Cascader, _BaseSelect);
 
   function Cascader() {
-    var _context2;
+    var _context;
 
     var _this;
 
@@ -47,11 +43,12 @@ export var Cascader = /*#__PURE__*/function (_BaseSelect) {
       args[_key] = arguments[_key];
     }
 
-    _this = _BaseSelect.call.apply(_BaseSelect, _concatInstanceProperty(_context2 = [this]).call(_context2, args)) || this;
+    _this = _BaseSelect.call.apply(_BaseSelect, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+    _this.fields = useFields();
     _this.value = useValue();
-    _this.label = useLabel();
-    _this.load = useLoad();
-    _this.filterable = useFilterable(_this.input.keywords, _this.value.setValue);
+    _this.label = useLabel(_this.fields);
+    _this.load = useLoad(_this.fields);
+    _this.filterable = useFilterable(_this.input.keywords, _this.value.setValue, _this.fields);
     _this.positionObj = {
       my: 'left top',
       at: 'right top',

package/es/components/cascader/index.spec.js

@@ -366,4 +366,85 @@ describe('Cascader', function () {
       }
     }, _callee8);
   })));
+  it('specify fields', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount8, instance, element, select, dropdown1, _dropdown1$querySelec5, item1, dropdown2, _dropdown2$querySelec4, item11;
+
+    return _regeneratorRuntime.wrap(function _callee9$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component2) {
+              _inheritsLoose(Demo, _Component2);
+
+              function Demo() {
+                var _context10;
+
+                var _this2;
+
+                for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                  args[_key2] = arguments[_key2];
+                }
+
+                _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context10 = [this]).call(_context10, args)) || this;
+                _this2.Cascader = Cascader;
+                return _this2;
+              }
+
+              Demo.defaults = function defaults() {
+                return {
+                  value: [],
+                  data: [{
+                    v: 'beijing',
+                    l: '北京',
+                    c: [{
+                      v: 'haidian',
+                      l: '海淀区'
+                    }]
+                  }, {
+                    v: 'hunan',
+                    l: '湖南',
+                    c: [{
+                      v: 'haidian',
+                      l: '海淀区'
+                    }]
+                  }]
+                };
+              };
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Cascader} = this;\n                <Cascader data={this.get('data')}\n                    v-model=\"value\"\n                    fields={{value: 'v', label: 'l', children: 'c'}}\n                />\n            ";
+            _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
+            select = element;
+            select.click();
+            _context11.next = 7;
+            return wait();
+
+          case 7:
+            dropdown1 = getElement('.k-cascader-menu');
+            _dropdown1$querySelec5 = dropdown1.querySelectorAll(':scope > .k-dropdown-item'), item1 = _dropdown1$querySelec5[0];
+            item1.click();
+            _context11.next = 12;
+            return wait();
+
+          case 12:
+            expect(dropdown1.innerHTML).to.matchSnapshot();
+            dropdown2 = getElement('.k-cascader-menu');
+            _dropdown2$querySelec4 = dropdown2.querySelectorAll(':scope > .k-dropdown-item'), item11 = _dropdown2$querySelec4[0];
+            item11.click();
+            _context11.next = 18;
+            return wait();
+
+          case 18:
+            expect(element.innerHTML).to.matchSnapshot();
+            expect(instance.get('value')).to.eql(['beijing', 'haidian']);
+
+          case 20:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee9);
+  })));
 });

package/es/components/cascader/index.vdt.js

@@ -11,7 +11,7 @@ var _$tmp0 = {
   'rotate': true
 };
 var _$tmp1 = {
-  'className': 'k-cascader-arrow ion-ios-arrow-right'
+  'className': 'k-cascader-arrow k-icon-right'
 };
 var _$tmp2 = {
   'className': 'k-cascader'
@@ -27,12 +27,14 @@ export default function ($props, $blocks, $__proto__) {
   var _this$get = this.get(),
       data = _this$get.data,
       trigger = _this$get.trigger,
-      filterable = _this$get.filterable;
+      filterable = _this$get.filterable,
+      fields = _this$get.fields;
 
   var baseMenuStyles = makeMenuStyles();
   var classNameObj = (_classNameObj = {
     'k-cascader-menu': true
   }, _classNameObj[baseMenuStyles] = true, _classNameObj);
+  var getField = this.fields;
 
   var _this$value = this.value,
       values = _valuesInstanceProperty(_this$value),
@@ -51,31 +53,31 @@ export default function ($props, $blocks, $__proto__) {
     }
 
     return _mapInstanceProperty(data).call(data, function (item, index) {
-      var value = item.value;
+      var value = getField(item, 'value');
       var showed = isShowed(value, level);
       var selected = parentSelected && isSelected(value, level);
-      var children = item.children;
+      var children = getField(item, 'children');
 
       var Item = function Item() {
         return _$cc(DropdownItem, {
-          'disabled': item.disabled,
+          'disabled': getField(item, 'disabled'),
           'className': _$cn({
             'k-cascader-option': true,
             'k-active': showed,
             'k-selected': selected
           }),
           'ev-select': onSelect.bind(null, value, level),
-          'children': [item.label, children ? _$cc(Icon, _$tmp1) : undefined]
+          'children': [getField(item, 'label'), children ? _$cc(Icon, _$tmp1) : undefined]
         });
       };
 
       return children ? _$cc(Dropdown, {
         'position': _this.positionObj,
         'of': 'parent',
-        'disabled': item.disabled,
+        'disabled': getField(item, 'disabled'),
         'trigger': trigger,
         'value': showed,
-        'ev-$changed:value': toggleShowedValue.bind(null, value, level),
+        'ev-$change:value': toggleShowedValue.bind(null, value, level),
         'ev-show': _this.load.bind(null, item),
         'children': [Item(), _$cc(DropdownMenu, {
           'className': _$cn(classNameObj),
@@ -116,7 +118,7 @@ export default function ($props, $blocks, $__proto__) {
               'children': function () {
                 // highlight keywords
                 var label = _mapInstanceProperty($value).call($value, function (item) {
-                  return item.label;
+                  return getField(item, 'label');
                 }).join(' / ');
 
                 var labels = label.split(keywords);

package/es/components/cascader/styles.js

@@ -43,7 +43,7 @@ setDefault(function () {
   }).cascader;
 });
 export function makeMenuStyles() {
-  return /*#__PURE__*/css("min-width:", cascader.width, "!important;min-height:", cascader.height, ";.k-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.k-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.k-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.k-cascader-option{&.k-selected{color:", cascader.selectedColor, ";}&.k-active{background:", cascader.activeBgColor, ";}}");
+  return /*#__PURE__*/css("min-width:", cascader.width, "!important;height:", cascader.height, ";overflow:auto;.k-cascader-arrow{float:right;height:100%;margin-left:", cascader.arrowGap, ";line-height:inherit;}.k-cascader-loading{display:block;text-align:center;margin-top:", cascader.loadingGap, ";}.k-cascader-empty{padding:", cascader.empty.padding, ";color:", cascader.empty.color, ";text-align:center;}.k-cascader-option{&.k-selected{color:", cascader.selectedColor, ";}&.k-active{background:", cascader.activeBgColor, ";}}");
 }
 export function makeFilterMenuStyles() {
   return /*#__PURE__*/css("min-width:", _filterInstanceProperty(cascader).minWidth, "!important;height:auto;max-height:", _filterInstanceProperty(cascader).maxHeight, ";em{font-style:normal;color:", _filterInstanceProperty(cascader).highlightColor, ";}");

package/es/components/cascader/useFields.d.ts

@@ -0,0 +1,2 @@
+import type { CascaderData, BaseCascaderData } from './';
+export declare function useFields(): <Data extends BaseCascaderData = CascaderData<unknown>, Key extends keyof Data = keyof Data>(data: Data, key: Key) => Data[Key];

package/es/components/cascader/useFields.js

@@ -0,0 +1,18 @@
+import { useInstance } from 'intact';
+export function useFields() {
+  var instance = useInstance();
+  return function getField(data, key) {
+    var _instance$get = instance.get(),
+        fields = _instance$get.fields;
+
+    if (fields) {
+      var field = fields[key];
+
+      if (field) {
+        return data[field];
+      }
+    }
+
+    return data[key];
+  };
+}

package/es/components/cascader/useFilterable.d.ts

@@ -1,7 +1,8 @@
 import type { CascaderData } from './';
 import { State } from '../../hooks/useState';
 import type { Value } from './useValue';
-export declare function useFilterable(keywords: State<string>, setValue: (value: Value) => void): {
+import type { useFields } from './useFields';
+export declare function useFilterable(keywords: State<string>, setValue: (value: Value) => void, getField: ReturnType<typeof useFields>): {
     filter: () => CascaderData<any>[][];
     selectByFilter: (data: CascaderData<any>[]) => void;
     keywords: State<string>;

package/es/components/cascader/useFilterable.js

@@ -1,16 +1,25 @@
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
 import { useInstance } from 'intact';
-export function useFilterable(keywords, setValue) {
+export function useFilterable(keywords, setValue, getField) {
   var instance = useInstance();
 
   function filter() {
+    var ret = [];
+
     var _instance$get = instance.get(),
         data = _instance$get.data,
         filter = _filterInstanceProperty(_instance$get);
 
-    var ret = [];
+    if (!filter) {
+      filter = function filter(keywords, data) {
+        var _context;
+
+        return _includesInstanceProperty(_context = getField(data, 'label')).call(_context, keywords);
+      };
+    }
 
     var loop = function loop(data, prefix, valid, disabled) {
       if (prefix === void 0) {
@@ -28,14 +37,16 @@ export function useFilterable(keywords, setValue) {
       data.forEach(function (item) {
         var _valid = valid || filter(keywords.value, item);
 
-        var _disabled = disabled || item.disabled;
+        var _disabled = disabled || getField(item, 'disabled');
 
         var _prefix = _sliceInstanceProperty(prefix).call(prefix, 0);
 
         _prefix.push(item);
 
-        if (item.children) {
-          loop(item.children, _prefix, _valid, _disabled);
+        var children = getField(item, 'children');
+
+        if (children) {
+          loop(children, _prefix, _valid, _disabled);
         } else if (_valid) {
           _prefix.disabled = _disabled;
           ret.push(_prefix);
@@ -49,7 +60,7 @@ export function useFilterable(keywords, setValue) {
 
   function selectByFilter(data) {
     var value = _mapInstanceProperty(data).call(data, function (item) {
-      return item.value;
+      return getField(item, 'value');
     });
 
     setValue(value);

package/es/components/cascader/useLabel.d.ts

@@ -1,3 +1,4 @@
-export declare function useLabel(): {
+import type { useFields } from './useFields';
+export declare function useLabel(getField: ReturnType<typeof useFields>): {
     getLabel: () => import("intact").Children;
 };

package/es/components/cascader/useLabel.js

@@ -1,6 +1,6 @@
 import { useInstance } from 'intact';
 import { useBaseLabel } from '../select/useBaseLabel';
-export function useLabel() {
+export function useLabel(getField) {
   var instance = useInstance();
 
   function findLabel(data, value) {
@@ -16,9 +16,9 @@ export function useLabel() {
       for (var i = 0; i < data.length; i++) {
         var item = data[i];
 
-        if (item.value === value[level]) {
-          labels.push(item.label);
-          var children = item.children;
+        if (getField(item, 'value') === value[level]) {
+          labels.push(getField(item, 'label'));
+          var children = getField(item, 'children');
 
           if (children) {
             loop(children, level + 1);

package/es/components/cascader/useLoad.d.ts

@@ -1,2 +1,3 @@
 import type { CascaderData } from './';
-export declare function useLoad(): (item: CascaderData<any>) => Promise<void>;
+import type { useFields } from './useFields';
+export declare function useLoad(getField: ReturnType<typeof useFields>): (item: CascaderData<any>) => Promise<void>;