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

package/components/radio/styles.ts

@@ -67,10 +67,13 @@ export function makeStyles() {
                 transform: scale(0);
                 transition: all ${radio.transition};
             }
-            &:hover {
+        }
+        &:hover {
+            .k-radio-wrapper {
                 border: 1px solid ${radio.hoverBorderColor};
             }
         }
+
         input {
             width: 100%;
             height: 100%;

package/components/scrollSelect/styles.ts

@@ -19,7 +19,7 @@ const defaults = {
         get color() { return theme.color.text },
         get activeColor() { return theme.color.primary },
         get hoverBgColor() { return theme.color.bg },
-        activeFontSize: `1.1em`,
+        activeFontSize: `1.3em`,
         get disabledColor() { return theme.color.disabled },
         border: `1px solid #e5e5e5`,
     }

package/components/select/base.vdt

@@ -148,10 +148,13 @@ const filterInput = <Input v-if={filterable}
                         <span class="k-select-suffix-icon">
                             <b:suffix>
                                 <Icon class="ion-load-c" rotate v-if={loading} />
-                                <Icon v-else-if={!hideIcon}
-                                    class="k-select-arrow k-icon-down"
-                                    disabled={$props.isDisableArrow}
-                                />
+                                <template v-else-if={!hideIcon}>
+                                    <Icon class="k-icon-search" v-if={filterable && show} />
+                                    <Icon v-else
+                                        class="k-select-arrow k-icon-down"
+                                        disabled={$props.isDisableArrow}
+                                    />
+                                </template>
                             </b:suffix>
                         </span>
                     </span>

package/components/select/styles.ts

@@ -11,7 +11,7 @@ type SizeStyles = {
 
 const defaults = deepDefaults(
     {
-        get transition() { return theme.transition.middle },
+        get transition() { return theme.transition.large },
         width: `300px`,
         get height() { return theme.default.height },
         bgColor: '#fff',

package/components/switch/styles.ts

@@ -6,6 +6,7 @@ import '../../styles/global';
 const defaults = {
     get transition() { return theme.transition.middle },
     get bgColor() { return theme.color.border },
+    get hoverBgColor() { return theme.color.placeholder },
     fontSize: `12px`,
     color: '#fff',
     handleBorderRadius: `100%`,
@@ -16,7 +17,8 @@ const defaults = {
         get bgColor() { return theme.color.primary },
         get disabledBgColor() {
             return palette(theme.color.primary, -3);
-        }
+        },
+        get hoverBgColor() { return theme.color.linkHover },
     },
 
     // default
@@ -66,6 +68,7 @@ export function makeStyles() {
         user-select: none;
         overflow: hidden;
         box-sizing: content-box;
+        transition: background ${kswitch.transition};
         input {
             opacity: 0;
             position: absolute;
@@ -91,6 +94,13 @@ export function makeStyles() {
             background: ${kswitch.bgColor};
             transition: all ${kswitch.transition};
         }
+        &:hover {
+            &,
+            .k-switch-bar,
+            .k-switch-wrapper {
+                background: ${kswitch.hoverBgColor};
+            }
+        }
         .k-switch-handle {
             border-radius: ${kswitch.handleBorderRadius};
             background: ${kswitch.handleBgColor};
@@ -168,6 +178,12 @@ export function makeStyles() {
             .k-switch-bar {
                 width: 100%;
             }
+            &:hover {
+                .k-switch-bar,
+                .k-switch-wrapper {
+                    background: ${kswitch.checked.hoverBgColor};
+                }
+            }
         }
 
         // disabled

package/components/table/column.vdt

@@ -95,9 +95,10 @@ const {
                                                             </DropdownItem>
                                                         </div>
                                                         <div class="k-table-group-footer" v-if={multiple}>
-                                                            <Button type="none" size="small"
+                                                            <Button size="small"
                                                                 disabled={isEmptyValue(localGroupValue.value)}
-                                                                ev-click={reset}
+                                                                type="secondary"
+                                                                ev-click={() => reset(onChange)}
                                                             >重置</Button>
                                                             <Button type="primary" size="small"
                                                                 ev-click={() => confirm(onChange)}

package/components/table/demos/pagination.md

@@ -17,6 +17,7 @@ import {Table, TableColumn, Switch} from 'kpc';
     ref="table"
     draggable
     rowKey={item => item.name}
+    ev-page={this.onChangePage}
 >
     <TableColumn title="Name" key="name" />
     <TableColumn title="IP" key="ip" />
@@ -49,5 +50,10 @@ export default class extends Component {
             data, 
         };
     }
+
+    @bind
+    onChangePage(data: { value: number, limit: number }) {
+        console.log(data);
+    }
 }
 ```

package/components/table/demos/showIndeterminate.md

@@ -1,5 +1,5 @@
 ---
-title: 半选中状态
+title: 取消表头半选中状态
 order: 28
 ---
 
@@ -13,7 +13,7 @@ import {Table, TableColumn} from 'kpc';
         data={this.get('data')} 
         resizable 
         ref="__test" 
-        showIndeterminate={true}
+        showIndeterminate={false}
         checkedKeys={[0]}
     >
         <TableColumn key="a" title="表头1" />

package/components/table/index.md

@@ -37,7 +37,7 @@ sidebar: doc
 | tooltipPosition | 行提示的位置 | `"left"` | `"bottom"` | `"right"` | `"top"` | `Position` | `"top"` |
 | tooltipContainer | 指定行提示弹层追加的位置，默认：`Dialog`类型的组件会追加到`Dialog`中，其他会追加到`body`中。你可以传入函数返回一个DOM用来作为插入的容器，或者传入字符串用来给`querySelector`进行查询 | `Container` | `undefined` |
 | keepStatus | 是否在行销毁的时候，保持该行在`checkedKeys` | `selectedKeys` | `spreadKeys` | `expandedKeys`中的`key`值，默认会同步删除（仅在销毁行的时候有效，如果整个`Table`被销毁，则不会执行该逻辑） | `boolean` | `false` |
-| showIndeterminate | 表头的`Checkbox`是否支持展示半选中状态 | `boolean` | `false` |
+| showIndeterminate | 表头的`Checkbox`是否支持展示半选中状态 | `boolean` | `true` |
 | resizable | 是否可以表头拖动 | `boolean` | `false` |
 | minColWidth | 指定所有列拖动时的最小宽度 | `number` | `40` |
 | widthStoreKey | 如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到`localStorage`中的`key` | `string` | `undefined` |
@@ -167,3 +167,4 @@ export type TableColumnGroupItem = {
 | uncheckRow | 手动取消选中某行触发 | `(data: T, index: number, key: TableRowKey) => void` |
 | checkAll | 手动全选触发 | `() => void` |
 | uncheckAll | 手动取消全选触发 | `() => void` |
+| page | 当内置翻页改变页码或每页数量时触发 | `({value: number, limit: number}) => void` |

package/components/table/index.spec.ts

@@ -606,7 +606,7 @@ describe('Table', () => {
         const pagination = table.pagination.paginationRef;
         const spy = sinon.spy();
 
-        table.on('changePage', spy);
+        table.on('page', spy);
 
         // check all
         table.checkAll(); 

package/components/table/row.ts

@@ -12,6 +12,7 @@ import type {TableColumnProps} from './column';
 import type {TableProps, TableRowKey} from './table';
 import {bind} from '../utils';
 import type {TableGrid} from './useMerge';
+import { isEqualObject } from '../utils';
 
 export interface TableRowProps {
     key: TableRowKey
@@ -65,7 +66,14 @@ export class TableRow extends Component<TableRowProps> {
         for (key in lastProps) {
             // ignore index
             if (key === 'index') continue;
-            if (lastProps[key] !== nextProps[key]) {
+            const lastValue = lastProps[key];
+            const nextValue = nextProps[key];
+            // deeply compare for offsetMap
+            if (key === 'offsetMap' && isEqualObject(lastValue, nextValue)) {
+                continue;
+            }
+
+            if (lastValue !== nextValue) {
                 isSame = false;
                 break;
             }

package/components/table/styles.ts

@@ -138,6 +138,7 @@ export function makeStyles() {
         .k-table-title-text {
             flex: 1;
             display: inline-flex;
+            line-height: 1.4;
         }
 
         // tbody
@@ -362,9 +363,7 @@ export function makeStyles() {
 
 export function makeGroupMenuStyles() {
     return css`
-        max-height: ${table.group.menuMaxHeight};
         min-width: ${table.group.menuMinWidth} !important;
-        overflow: auto;
         .k-dropdown-item.k-active {
             color: ${table.group.activeColor};
         }
@@ -372,6 +371,10 @@ export function makeGroupMenuStyles() {
             padding: ${table.group.headerPadding};
             border-bottom: ${table.group.headerBorder};
         }
+        .k-table-group-body {
+            max-height: ${table.group.menuMaxHeight};
+            overflow: auto;
+        }
         .k-table-group-footer {
             text-align: right;
             border-top: ${table.group.headerBorder};

package/components/table/table.ts

@@ -74,7 +74,7 @@ export interface TableEvents<T = any, K extends TableRowKey = number> {
     uncheckRow: [T, number, K]
     checkAll: []
     uncheckAll: []
-    changePage: [PaginationChangeData]
+    page: [PaginationChangeData]
 }
 
 export interface TableBlocks<T = unknown> {
@@ -140,6 +140,7 @@ const defaults = (): Partial<TableProps> => ({
     indent: 32,
     minColWidth: 40,
     animation: true,
+    showIndeterminate: true,
 });
 
 const events: Events<TableEvents> = {
@@ -150,7 +151,7 @@ const events: Events<TableEvents> = {
     uncheckRow: true,
     checkAll: true,
     uncheckAll: true,
-    changePage: true,
+    page: true,
 };
 
 export class Table<

package/components/table/useGroup.ts

@@ -54,8 +54,9 @@ export function useGroup() {
         dropdownRef.value!.hide(true);
     }
 
-    function reset() {
+    function reset(onChange: ContextValue['onChange']) {
         localGroupValue.set([]);
+        confirm(onChange);
     }
 
     function isEmptyValue(groupValue: any) {

package/components/table/usePagination.ts

@@ -64,7 +64,7 @@ export function usePagination() {
             });
         }
 
-        instance.trigger('changePage', data);
+        instance.trigger('page', data);
     }
 
     return { data, value, limit, onChange, paginationRef };

package/components/tabs/demos/closable.md

@@ -30,7 +30,7 @@ import {Tabs, Tab, Button, ButtonGroup, Icon} from 'kpc';
             key={$value.value}
             closable={$value.value !== 10}
         >
-            <Icon class="k-icon-paper" size={this.get('size')} style="margin-right: 8px;" />
+            <Icon class="k-icon-paper" size={this.get('size')} style="margin-right: 8px;" color="inherit" />
             {$value.label}
         </Tab>
     </Tabs>

package/components/tip/styles.ts

@@ -9,7 +9,7 @@ const defaults = {
         gap: '8px',
         fontWeight: '500'
     },
-    get color() { return theme.color.title },
+    get color() { return theme.color.text },
     get padding() { return `6px ${theme.default.padding}` },
 };
 

package/components/tooltip/index.spec.ts

@@ -8,6 +8,7 @@ import {Tooltip} from './';
 import {Dialog} from '../dialog';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
 import { tooltip as tooltipTheme } from './styles';
+import { Select, Option } from '../select';
 
 describe('Tooltip', () => {
     afterEach((done) => {
@@ -378,4 +379,33 @@ describe('Tooltip', () => {
         const newWidth = content.offsetWidth;
         expect(newWidth).to.eql(width);
     });
+
+    it('should not impact select when wrap select with tooltip', async () => {
+        class Demo extends Component {
+            static template = `
+                const {Tooltip, Select, Option} = this;
+                <Tooltip>
+                    <Select>
+                        <Option value="1">Option 1</Option>
+                        <Option value="2">Option 2</Option>
+                    </Select>
+                </Tooltip>
+            `
+            private Tooltip = Tooltip;
+            private Select = Select;
+            private Option = Option;
+        }
+
+        const [instance, element] = mount(Demo);
+        dispatchEvent(element, 'mouseenter');
+        await wait();
+        dispatchEvent(element, 'click');
+        await wait();
+
+        const menu = getElement(".k-select-menu")!;
+        dispatchEvent(element, 'mouseleave');
+        await wait(500);
+
+        expect(menu.style.display).to.eql('');
+    });
 });

package/components/tooltip/tooltip.ts

@@ -86,6 +86,9 @@ export class Tooltip<
         if (this.get('hoverable')) {
             return super.hide(immediately);
         }
+        // tooltip can show any number sub-tooltips, we should not close the showed tooltip
+        // #885
+        this.showedDropdown = null;
         super.hide(true);
     }
 }

package/components/utils.ts

@@ -291,6 +291,21 @@ export function isEqualArray(a: EqualArrayValue, b: EqualArrayValue): boolean {
     return false;
 }
 
+export function isEqualObject(a: Record<string, any>, b: Record<string, any>): boolean {
+    if (a === b) return true;
+    if (a && b) {
+        const keysA = Object.keys(a);
+        const keysB = Object.keys(b);
+        if (keysA.length !== keysB.length) return false;
+
+        return keysA.every((key) => {
+            return a[key] === b[key];
+        });
+    }
+
+    return false;
+}
+
 export function last<T>(arr: T[]): T | undefined {
     return arr[arr.length - 1];
 }

package/components/virtual.ts

@@ -64,13 +64,15 @@ export class Virtual extends Component<any> {
             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;
+            if (!data) return props;
+
+            const on = data.on || EMPTY_OBJ;
             const events: Record<string, Function> = {};
             for (let key in on) {
                 events[`ev-${key}`] = on[key];
             }
 
-            return {...props, ...events};
+            return {...props, ...events, className: data.staticClass};
         }
 
         return props;

package/es/components/badge/styles.js

@@ -22,5 +22,5 @@ setDefault(function () {
   }).badge;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.k-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:75%;vertical-align:baseline;}&.k-has-text>.k-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.k-alone>.k-badge-text{position:static;transform:none;}");
+  return /*#__PURE__*/css("display:inline-block;position:relative;vertical-align:middle;>.k-badge-text{display:inline-block;position:absolute;width:", badge.width, ";height:", badge.height, ";border-radius:50%;top:0;right:0;transform:translate(50%, -50%);background:", badge.bgColor, ";font-size:85%;vertical-align:baseline;}&.k-has-text>.k-badge-text{width:auto;height:", badge.textHeight, ";line-height:", badge.textHeight, ";border-radius:calc(", badge.textHeight, " / 2);padding:0 ", badge.textPadding, ";color:", badge.textColor, ";}&.k-alone>.k-badge-text{position:static;transform:none;}");
 }

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

@@ -4,6 +4,7 @@ export interface ButtonGroupProps {
     value?: any;
     checkType?: 'none' | 'radio' | 'checkbox';
     fluid?: boolean;
+    seperate?: boolean;
 }
 export declare class ButtonGroup extends Component<ButtonGroupProps> {
     static template: string | import("intact").Template<any>;

package/es/components/button/group.js

@@ -7,7 +7,8 @@ var typeDefs = {
   vertical: Boolean,
   value: null,
   fluid: Boolean,
-  checkType: ['none', 'radio', 'checkbox']
+  checkType: ['none', 'radio', 'checkbox'],
+  seperate: Boolean
 };
 
 var defaults = function defaults() {

package/es/components/button/group.vdt.js

@@ -13,12 +13,14 @@ export default function ($props, $blocks, $__proto__) {
       className = _this$get.className,
       vertical = _this$get.vertical,
       children = _this$get.children,
-      fluid = _this$get.fluid;
+      fluid = _this$get.fluid,
+      seperate = _this$get.seperate;
 
   var classNameObj = (_classNameObj = {
     'k-btns': true,
     'k-vertical': vertical,
-    'k-fluid': fluid
+    'k-fluid': fluid,
+    'k-seperate': seperate
   }, _classNameObj[className] = className, _classNameObj[makeButtonGroupStyles()] = true, _classNameObj);
   return _$cv('div', _extends({
     'className': _$cn(classNameObj)

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

@@ -78,7 +78,7 @@ export default function ($props, $blocks, $__proto__) {
   var waveColor = typeStyles && typeStyles.borderColor || theme.primary.borderColor;
   return _$cc(Wave, {
     'disabled': loading || disabled || type === 'none' || type === 'link',
-    'inset': '-2px',
+    'inset': type === 'flat' ? '-1px' : '-2px',
     'color': waveColor,
     'children': _$cc(DynamicButton, _extends({
       'className': _$cn(classNameObj),

package/es/components/button/styles.js

@@ -14,7 +14,7 @@ var btnStyles = {
   lineHeight: '1.15',
 
   get padding() {
-    return "0 " + theme.default.padding;
+    return "0 16px";
   },
 
   get borderColor() {
@@ -146,6 +146,13 @@ var btnSizeStyles = sizes.reduce(function (memo, size) {
     }
 
   };
+
+  if (size === 'large') {
+    Object.defineProperty(memo[size], 'padding', {
+      value: "0 24px"
+    });
+  }
+
   return memo;
 }, {});
 var defaults = deepDefaults({
@@ -255,13 +262,13 @@ export function makeButtonStyles(_ref) {
   }) + "\n                    }\n                }\n            ", ";"));
 }
 export function makeButtonGroupStyles() {
-  return /*#__PURE__*/css("display:inline-block;vertical-align:middle;.k-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.k-active{z-index:1;position:relative;}}&.k-fluid{width:100%;}&:not(.k-vertical){>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;flex-wrap:wrap;vertical-align:middle;.k-btn{margin:0;vertical-align:middle;&:hover,&:focus,&.k-active{z-index:1;position:relative;}}&.k-fluid{width:100%;}&:not(.k-vertical){>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.k-", type, ":not(:first-child){border-left-color:", borderColor, ";}&.k-", type, ":not(:last-child){border-right-color:", borderColor, ";}");
-  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.k-fluid{display:flex;>.k-btn{flex:1;}}}&.k-vertical{>.k-btn{display:block;", _mapInstanceProperty(types).call(types, function (type) {
+  }), ";&:not(:first-child){margin-left:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;}}&.k-fluid{display:flex;>.k-btn{flex:1;}}}&.k-vertical{flex-direction:column;>.k-btn{", _mapInstanceProperty(types).call(types, function (type) {
     if (type === 'active') return;
     var borderColor = button.group[type].borderColor;
     return /*#__PURE__*/css("&.k-", type, ":not(:first-child){border-top-color:", borderColor, ";}&.k-", type, ":not(:last-child){border-bottom-color:", borderColor, ";}");
-  }), ";&:not(.k-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}");
+  }), ";&:not(.k-btn-icon){width:100%;}&:not(:first-child){margin-top:-1px;&:not(:last-child){border-radius:0;}}&:not(:only-child):first-child{border-bottom-left-radius:0;border-bottom-right-radius:0;}&:not(:only-child):last-child{border-top-left-radius:0;border-top-right-radius:0;}}}&.k-seperate{gap:8px;>.k-btn{border-radius:", button.borderRadius, "!important;}}");
 }

package/es/components/checkbox/styles.js

@@ -38,11 +38,11 @@ var defaults = {
 
   },
   inner: {
-    width: '5px',
+    width: '6px',
     height: '10px',
     top: '0px',
-    left: '5px',
-    border: '1px solid #fff'
+    left: '4px',
+    border: '2px solid #fff'
   },
   // disabled
   disabled: {
@@ -69,10 +69,6 @@ var defaults = {
       }
 
     }
-  },
-  // indeterminate
-  indeterminate: {
-    innerLeft: '4px'
   }
 };
 var checkbox;
@@ -82,5 +78,5 @@ setDefault(function () {
   }).checkbox;
 });
 export default function makeStyles() {
-  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}&:hover{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;left:", checkbox.indeterminate.innerLeft, ";}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
+  return /*#__PURE__*/css("display:inline-flex;align-items:center;cursor:pointer;vertical-align:middle;.k-checkbox-wrapper{width:", checkbox.width, ";height:", checkbox.width, ";border:1px solid ", checkbox.borderColor, ";border-radius:", checkbox.borderRadius, ";position:relative;transition:all ", checkbox.transition, ";background:", checkbox.bgColor, ";flex:0 0 auto;&:before{content:\"\";display:block;position:absolute;width:", checkbox.inner.width, ";height:", checkbox.inner.height, ";top:", checkbox.inner.top, ";left:", checkbox.inner.left, ";border:", checkbox.inner.border, ";border-top:0;border-left:0;transform:rotate(45deg) scale(0);transition:all ", checkbox.transition, ";}}&:hover{.k-checkbox-wrapper{border:", checkbox.hoverBorder, ";}}input{width:100%;height:100%;opacity:0;cursor:pointer;position:absolute;left:0;top:0;margin:0;}.k-checkbox-text{margin-left:", checkbox.text.gap, ";flex:0 1 auto;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";background:", checkbox.checked.bgColor, ";}}&.k-indeterminate{.k-checkbox-wrapper{&:before{transform:rotate(90deg) scale(1);border-bottom:0;}}}&.k-checked{.k-checkbox-wrapper{&:before{transform:rotate(45deg) scale(1);}}}&:focus{outline:none;.k-checkbox-wrapper{border-color:", checkbox.checked.borderColor, ";}}&.k-disabled{color:", checkbox.disabled.color, ";cursor:not-allowed;.k-checkbox-wrapper{border-color:", checkbox.disabled.borderColor, ";background:", checkbox.disabled.bgColor, ";&:before{border-color:", checkbox.disabled.innerColor, ";}}input{cursor:not-allowed;}&.k-checked,&.k-indeterminate{.k-checkbox-wrapper{border-color:", checkbox.disabled.checked.borderColor, ";background:", checkbox.disabled.checked.bgColor, ";}}}");
 }

package/es/components/collapse/styles.js

@@ -32,9 +32,9 @@ setDefault(function () {
   }).collapse;
 });
 export function makeStyles() {
-  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.k-left{.", kls('arrow'), "{float:left;margin-right:", collapse.titleMarginRight, ";transform-origin:center center 0;}}&.k-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
+  return /*#__PURE__*/css("font-size:", collapse.fontSize, ";&.k-left{.", kls('arrow'), "{float:left;margin-right:", collapse.titleMarginRight, ";}}&.k-border{border-radius:", collapse.borderRadius, ";padding:", collapse.borderPadding, ";border:", collapse.collBorder, ";}");
 }
 export function makeItemStyles() {
   var collapseItem = collapse.item;
-  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}.", kls('title'), "{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";}.", kls('arrow'), "{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";transform-origin:left center 0;}&:not(.k-disabled){.", kls('title'), "{&:hover{color:", theme.color.primary, ";}}}.", kls('content'), "{overflow:hidden;.", kls('wrapper'), "{overflow:hidden;padding:", collapseItem.contentPadding, ";}}&.k-active{.", kls('arrow'), "{transform:rotate(90deg);}}&.k-disabled{color:", theme.color.disabledBorder, ";.", kls('title'), "{cursor:not-allowed;}}");
+  return /*#__PURE__*/css("border-bottom:", collapseItem.borderBottom, ";&:last-of-type{border-bottom-color:transparent;}.", kls('title'), "{cursor:pointer;font-weight:bold;height:", collapseItem.titleHeight, ";line-height:", collapseItem.titleHeight, ";transition:color ", collapse.transition, ";}.", kls('arrow'), "{float:right;transition:transform ", collapse.transition, ";line-height:", collapseItem.titleHeight, ";height:", collapseItem.titleHeight, ";}&:not(.k-disabled){.", kls('title'), "{&:hover{color:", theme.color.primary, ";}}}.", kls('content'), "{overflow:hidden;.", kls('wrapper'), "{overflow:hidden;padding:", collapseItem.contentPadding, ";}}&.k-active{.", kls('arrow'), "{transform:rotate(90deg);}}&.k-disabled{color:", theme.color.disabledBorder, ";.", kls('title'), "{cursor:not-allowed;}}");
 }

package/es/components/dropdown/dropdown.js

@@ -28,7 +28,8 @@ var typeDefs = {
 var defaults = function defaults() {
   return {
     trigger: 'hover',
-    of: 'self'
+    of: 'self',
+    value: false
   };
 };
 

package/es/components/dropdown/usePosition.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/extends";
-import _JSON$stringify from "@babel/runtime-corejs3/core-js/json/stringify";
 import { useInstance, findDomFromVNode } from 'intact';
 import { position } from '../position';
 import { noop } from 'intact-shared';
 import { isObject } from 'intact-shared';
+import { isEqualObject } from '../utils';
 export function usePosition() {
   var instance = useInstance();
   var positioned = {
@@ -18,7 +18,7 @@ export function usePosition() {
     instance.watch(item, function (newValue, oldValue) {
       // return if object is the same
       if (isObject(newValue) && isObject(oldValue) && // is not event object
-      !(newValue instanceof Event) && _JSON$stringify(newValue) === _JSON$stringify(oldValue)) {
+      !(newValue instanceof Event) && isEqualObject(newValue, oldValue)) {
         return;
       }
 

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

@@ -12,6 +12,7 @@ import { mount, unmount, dispatchEvent, wait } from '../../test/utils';
 import { Component } from 'intact';
 import { Form, FormItem } from './';
 import { Input } from '../input';
+import { Select } from '../select';
 
 RemoteDemo.prototype.validateUserName = function (value) {
   // mock api
@@ -1317,4 +1318,48 @@ describe('Form', function () {
       }
     }, _callee7);
   })));
+  it('should not validate when select is disabled on init', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount8, instance, element;
+
+    return _regeneratorRuntime.wrap(function _callee8$(_context11) {
+      while (1) {
+        switch (_context11.prev = _context11.next) {
+          case 0:
+            Demo = /*#__PURE__*/function (_Component3) {
+              _inheritsLoose(Demo, _Component3);
+
+              function Demo() {
+                var _context10;
+
+                var _this3;
+
+                for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                  args[_key3] = arguments[_key3];
+                }
+
+                _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context10 = [this]).call(_context10, args)) || this;
+                _this3.Form = Form;
+                _this3.FormItem = FormItem;
+                _this3.Select = Select;
+                return _this3;
+              }
+
+              return Demo;
+            }(Component);
+
+            Demo.template = "\n                const {Form, FormItem, Select} = this;\n                <Form ref=\"form\">\n                    <FormItem rules={{required: true}}>\n                        <Select disabled />\n                    </FormItem>\n                </Form>\n            ";
+            _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
+            _context11.next = 5;
+            return wait(500);
+
+          case 5:
+            expect(element.querySelector('.k-form-error')).to.be.null;
+
+          case 6:
+          case "end":
+            return _context11.stop();
+        }
+      }
+    }, _callee8);
+  })));
 });