@king-design/intact 2.0.13-beta.0 → 2.0.14

package/components/cascader/index.md

@@ -29,6 +29,7 @@ sidebar: doc
 | format | 自定义结果显示，组件会将当前选择的所有数据项以数组的格式作为参数传入 | `Function` | `(values: string[]) => values.map(value => value.label).join(' / ')` |
 | loadData | 如果`data`中的`children`属性值为空数组`[]`，则可以使用该属性定义动态加载逻辑，组件会将当前选中的数据项作为参数传入 | `(data: CascaderData<V>) => any` | `undefined` |
 | filter | 如果可搜索，你可以传入`filter`改变搜索逻辑，组件会将搜索关键词和数据项作为参数传入 | `(keywords: string, data: CascaderData<V>) => boolean` | `(keywords: string, data: CascaderData<V>) => data.label.includes(keywords)` |
+| show | 是否展示菜单项 | `boolean` | `false` |
 
 ```ts
 export type CascaderData<V> = {

package/components/cascader/useValue.ts

@@ -36,7 +36,7 @@ export function useValue() {
         }
     });
 
-    instance.watch('_show', value => {
+    instance.watch('show', value => {
         if (value) {
             showedValue.set(last(values.value) || []);
         }

package/components/code/index.md

@@ -17,7 +17,7 @@ sidebar: doc
 | readOnly | 是否只读 | `boolean` | `false` |
 | width | 指定宽度，需要带单位 | `string` | `100%` |
 | height | 指定高度，需要带单位 | `string` | `100%` |
-| options | 其它可选的配置，会传给`monaco.editor.create()`方法，可选值参考[options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html) | [`editor.IStandaloneEditorConstructionOptions`](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html) | `{}` |
+| options | 其它可选的配置，会传给`monaco.editor.create()`方法，可选值参考[options](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html) | [`editor.IStandaloneEditorConstructionOptions`](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneEditorConstructionOptions.html) | `{}` |
 
 > 例如：通过`options`可以隐藏右侧代码的缩影(minimap): `options = {minimap: {enabled: false}}`
 
@@ -25,4 +25,4 @@ sidebar: doc
 
 | 事件名 | 说明 | 参数 |
 | --- | --- | --- |
-| ready | 组件加载并实例化完成触发 | (editor: [editor.IStandaloneCodeEditor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneCodeEditor.html), Editor: typeof [editor](https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html)) => void |
+| ready | 组件加载并实例化完成触发 | (editor: [editor.IStandaloneCodeEditor](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneCodeEditor.html), Editor: typeof [editor](https://microsoft.github.io/monaco-editor/docs.html#modules/editor.html), Monaco: typeof [monaco](https://microsoft.github.io/monaco-editor/docs.html)) => void |

package/components/code/index.ts

@@ -1,6 +1,6 @@
 import {Component, TypeDefs, createRef} from 'intact';
 import template from './index.vdt';
-import type {editor} from 'monaco-editor';
+import type {editor, default as monaco} from 'monaco-editor';
 import {useEditor} from './useEditor';
 import type {Events} from '../types';
 
@@ -15,7 +15,7 @@ export interface CodeProps {
 }
 
 export interface CodeEvents {
-    ready: [editor.IStandaloneCodeEditor, typeof editor]
+    ready: [editor.IStandaloneCodeEditor, typeof editor, typeof monaco]
 }
 
 const typeDefs: Required<TypeDefs<CodeProps>> = {

package/components/code/useEditor.ts

@@ -33,7 +33,7 @@ export function useEditor() {
 
             loading.set(false);
 
-            instance.trigger('ready', codeEditor, Editor);
+            instance.trigger('ready', codeEditor, Editor, monaco);
         });
     });
 

package/components/datepicker/index.md

@@ -30,6 +30,7 @@ sidebar: doc
 | disabledDate | 该属性值是一个函数，用于定义那些日期被禁止选择，函数参数为日期字符串，返回`true`则表示禁用该日期 | `(v: Dayjs) => boolean` | `undefined` |
 | type | 组件类型：`"date"` 只选择日期；`"datetime"` 选择日期和时间；`"year"` 选择年份；`"month"` 选择月份 | `"date"` | `"datetime"` | `"year"` | `"month"` | `"date"` |
 | shortcuts | 指定快捷方式 | `Shortcut[]` | `undefined` |
+| show | 是否展示菜单项 | `boolean` | `false` |
 
 ```ts
 import {Dayjs} from 'dayjs';

package/components/form/styles.ts

@@ -107,8 +107,11 @@ export function makeItemStyles() {
 
         // nested
         .k-form-item {
-            display: block;
-            width: auto;
+            &,
+            .k-form-content {
+                display: block;
+                width: auto;
+            }
         }
 
         // append

package/components/select/base.ts

@@ -35,8 +35,7 @@ export interface BaseSelectProps<V, Multipe extends boolean = boolean, Attach =
     placeholder?: Children
     container?: Container
     width?: string | number
-
-    _show?: boolean
+    show?: boolean
 }
 
 export interface BaseSelectEvents {
@@ -68,8 +67,7 @@ const typeDefs: Required<TypeDefs<BaseSelectProps<any>>> = {
     placeholder: [String, Number],
     container: [Function, String],
     width: [String, Number],
-
-    _show: Boolean,
+    show: Boolean,
 };
 
 const defaults = (): Partial<BaseSelectProps<any>> => ({
@@ -102,7 +100,7 @@ export abstract class BaseSelect<
 
     init() {
         provide(SELECT, this);
-        useShowHideEvents('_show');
+        useShowHideEvents('show');
         // this.input = useInput();
 
         this.watch('value', this.position, {presented: true});
@@ -121,12 +119,12 @@ export abstract class BaseSelect<
 
     @bind
     show() {
-        this.set('_show', true);
+        this.set('show', true);
     }
 
     @bind
     hide() {
-        this.set('_show', false);
+        this.set('show', false);
     }
 
     public resetKeywords(keywords: State<string>) {

package/components/select/base.vdt

@@ -14,9 +14,7 @@ const {
     size, hideIcon, fluid,
     clearable, filterable,
     className, container,
-    inline, style, width,
-
-    _show,
+    inline, style, width, show,
 } = this.get();
 
 const classNameObj = {
@@ -44,7 +42,7 @@ const {onFocusout, triggerRef} = this.focusout;
                 ref={this.dropdownRef}
                 disabled={disabled}
                 container={container}
-                v-model="_show"
+                v-model="show"
             >
                 <div {...getRestProps(this)} 
                     class={classNameObj}
@@ -62,7 +60,7 @@ const {onFocusout, triggerRef} = this.focusout;
                         {/* TODO: Need mode on Transition */}
                         <TransitionGroup name="k-fade" appear={false}>
                             <Input v-if={!multiple && filterable}
-                                value={_show ? keywords : label}
+                                value={show ? keywords : label}
                                 ev-$change:value={onInput}
                                 disabled={disabled}
                                 placeholder={label || placeholder}
@@ -71,7 +69,7 @@ const {onFocusout, triggerRef} = this.focusout;
                                 fluid
                                 inline
                                 key="input"
-                                readonly={!_show}
+                                readonly={!show}
                                 waveDisabled={true}
                             />
                             <div class="k-select-placeholder c-ellipsis"
@@ -128,7 +126,7 @@ const {onFocusout, triggerRef} = this.focusout;
                                     inline
                                     size={size}
                                     key="filter"
-                                    readonly={!_show}
+                                    readonly={!show}
                                     waveDisabled={true}
                                 />
                             </div>

package/components/select/demos/basic.md

@@ -11,7 +11,7 @@ import {Select, Option} from 'kpc';
 
 <div>
     <div style="margin-bottom: 16px;">
-        <Select v-model="day">
+        <Select v-model="day" show={true}>
             <Option value="Monday">星期一</Option>
             <Option value="Tuesday">星期二</Option>
             <Option value="Wednesday">星期三</Option>

package/components/select/index.md

@@ -31,6 +31,7 @@ sidebar: doc
 | labelMap | 建立值`value`到展示标签`label`的映射，可以在`value`不在`Option`集合中时，依然能够正确展示相应的`label` | `Map<any, string>` | `new Map()` |
 | card | 是否展示`card`模式 | `boolean` | `false` |
 | autoDisableArrow | 是否在没有更多可选项时，给箭头一个`disabled`状态来提示用户 | `boolean` | `false` |
+| show | 是否展示菜单项 | `boolean` | `false` |
 
 ```ts
 export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)

package/components/select/useEqualWidth.ts

@@ -4,7 +4,7 @@ import type {BaseSelect} from './base';
 export function useEqualWidth() {
     const instance = useInstance() as BaseSelect;
 
-    instance.watch('_show', setWidth, {presented: true});
+    instance.watch('show', setWidth, {presented: true});
 
     function setWidth(v: boolean | undefined) {
         if (!v) return;

package/components/select/useFocusout.ts

@@ -18,7 +18,7 @@ export function useFocusout() {
 
     function onFocusout(e: FocusEvent) {
         instance.trigger('focusout', e);
-        if (instance.get('_show')) {
+        if (instance.get('show')) {
             e.stopPropagation();
         }
     }

package/components/select/useInput.ts

@@ -42,7 +42,7 @@ export function useInput(resetKeywords: (keywords: State<string>) => void) {
         }
     }
 
-    component.on('$changed:_show', show => {
+    component.on('$changed:show', show => {
         if (show) {
             focusInput();
             resetKeywords(keywords);

package/components/table/demos/animation.md

@@ -5,6 +5,8 @@ order: 20
 
 一个简单的`Table`，点击按钮，即可查看新增表格的动效。
 
+通过`animation`可以禁用动效，取值为`false`时，禁用行和列动画；或者通过数组分别指定禁用行和列动画，如：`[false, true]`，只禁用列动画
+
 ```vdt
 import {Table, TableColumn, Button} from 'kpc';
 
@@ -21,6 +23,11 @@ import {Table, TableColumn, Button} from 'kpc';
         <TableColumn v-if={this.get('isShow')} key="b" title="Title 2"/>
         <TableColumn key="c" title="Title 3" />
     </Table>
+    <Table data={this.get('data')} resizable rowKey={row => row.a} animation={false}>
+        <TableColumn key="a" title="Title 1" />
+        <TableColumn v-if={this.get('isShow')} key="b" title="Title 2"/>
+        <TableColumn key="c" title="Title 3" />
+    </Table>
 </div>
 ```
 

package/components/table/index.md

@@ -42,6 +42,7 @@ sidebar: doc
 | minColWidth | 指定所有列拖动时的最小宽度 | `number` | `40` |
 | widthStoreKey | 如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到`localStorage`中的`key` | `string` | `undefined` |
 | draggable | 表格行是否可拖动 | `boolean` | `false` |
+| animation | 是否开启动效，默认开启。可以通过`true` `false`全部设置，或者通过数组单独设置行和列的动效 | `boolean` &#124 `[boolean, boolean]` | `true` |
 
 ```ts
 import {Props} from 'intact';

package/components/table/row.ts

@@ -35,6 +35,7 @@ export interface TableRowProps {
     onToggleSpreadRow: (key: TableRowKey) => void
     onBeforeUnmount: (key: TableRowKey) => void
     offsetMap: Record<Key, number>
+    animation: boolean
 
     draggable: boolean
     draggingKey: TableRowKey | null

package/components/table/row.vdt

@@ -3,7 +3,7 @@ import {getClassAndStyleForFixed} from './useFixedColumns';
 import {Checkbox} from '../checkbox';
 import {Radio} from '../radio';
 import {TableCell} from './cell';
-import {createElementVNode, className as cx} from 'intact';
+import {createElementVNode, className as cx, createFragment} from 'intact';
 
 const {
     cols, data, checkType, hasFixedLeft,
@@ -11,7 +11,7 @@ const {
     grid, index: rowIndex, indeterminate,
     allDisabled, selected, /* hidden,  */spreaded,
     hasChildren, indent, key, offsetMap,
-    draggable, draggingKey,
+    draggable, draggingKey, animation,
 } = this.get();
 const classNameObj = {
     'k-disabled': disabled,
@@ -89,7 +89,9 @@ cols.forEach((props, columnIndex) => {
     );
 });
 
-const rows = <TransitionGroup name="k-fade-expand" move={false}>{vNodes}</TransitionGroup>
+const rows = animation ?
+    <TransitionGroup name="k-fade-expand" move={false}>{vNodes}</TransitionGroup> :
+    createFragment(vNodes, 8);
 /* const rows = vNodes; */
 
 // for performance, no normalize

package/components/table/table.ts

@@ -59,6 +59,7 @@ export interface TableProps<
     minColWidth?: number
     widthStoreKey?: string
     draggable?: boolean
+    animation?: boolean | [boolean, boolean]
 }
 
 export interface TableEvents<T = any, K extends TableRowKey = number> {
@@ -116,6 +117,7 @@ const typeDefs: Required<TypeDefs<TableProps<unknown>>> = {
     minColWidth: Number,
     widthStoreKey: String,
     draggable: Boolean,
+    animation: [Boolean, Array],
 };
 
 const defaults = (): Partial<TableProps> => ({
@@ -126,6 +128,7 @@ const defaults = (): Partial<TableProps> => ({
     childrenKey: 'children',
     indent: 32,
     minColWidth: 40,
+    animation: true,
 });
 
 const events: Events<TableEvents> = {

package/components/table/table.vdt

@@ -23,8 +23,9 @@ const {
     rowClassName, group, sort, loading,
     merge, childrenKey, indent, tooltipPosition,
     tooltipContainer, showIndeterminate, resizable,
-    draggable,
+    draggable, animation: _animation,
 } = this.get();
+const animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
 const {columns, cols, maxRows, maxCols} = this.columns.getData();
 const {scrollPosition, hasFixed, getHasFixedLeft, getOffsetMap} = this.fixedColumns;
 const {scrollRef} = this.scroll;
@@ -71,23 +72,29 @@ const thead = (
                     <FixedColumnsContext.Provider value={offsetMap}>
                         <thead>
                             <tr v-for={columns}>
-                                <TransitionGroup name="k-fade-expand" move={false}>
-                                    <th v-if={$key === 0 && checkType !== 'none'}
-                                        {...getClassAndStyleForFixed({
-                                            fixed: hasFixedLeft ? 'left' : false,
-                                        }, 0)}
-                                        rowspan={maxRows}
-                                        key="$checktype"
-                                    >
-                                        <Checkbox v-if={checkType === 'checkbox'}
-                                            value={allCheckedStatus === AllCheckedStatus.All}
-                                            indeterminate={showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate}
-                                            ev-$change:value={toggleCheckedAll}
-                                            disabled={!hasData}
-                                        />
-                                    </th>
-                                    {$value}
-                                </TransitionGroup>
+                                {(() => {
+                                    const ths = <template>
+                                        <th v-if={$key === 0 && checkType !== 'none'}
+                                            {...getClassAndStyleForFixed({
+                                                fixed: hasFixedLeft ? 'left' : false,
+                                            }, 0)}
+                                            rowspan={maxRows}
+                                            key="$checktype"
+                                        >
+                                            <Checkbox v-if={checkType === 'checkbox'}
+                                                value={allCheckedStatus === AllCheckedStatus.All}
+                                                indeterminate={showIndeterminate && allCheckedStatus == AllCheckedStatus.Indeterminate}
+                                                ev-$change:value={toggleCheckedAll}
+                                                disabled={!hasData}
+                                            />
+                                        </th>
+                                        {$value}
+                                    </template>
+
+                                    return animation[1] ?
+                                        <TransitionGroup name="k-fade-expand" move={false}>{ths}</TransitionGroup> :
+                                        ths;
+                                })()}
                             </tr>
                         </thead>
                     </FixedColumnsContext.Provider>
@@ -114,84 +121,85 @@ const tbody = (
                     <b:empty>{_$('/(ㄒoㄒ)/~~ 没有找到亲要的数据哦~')}</b:empty>
                 </td>
             </tr> :
-            <TransitionGroup name="k-fade-in-left" move={!draggingKey.value}>
-                {(() => {
-                    const rows = [];
-                    loopData((value, index, level, hidden) => {
-                        // don't render if row is hidden
-                        if (hidden) return hidden;
+            (() => {
+                const rows = [];
+                loopData((value, index, level, hidden) => {
+                    // don't render if row is hidden
+                    if (hidden) return hidden;
 
-                        const status = allStatus[index];
-                        const key = allKeys[index];
-                        const spreaded = isSpreaded(key);
-                        const hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
-                        const indentSize = indent ? indent * level : 0; 
+                    const status = allStatus[index];
+                    const key = allKeys[index];
+                    const spreaded = isSpreaded(key);
+                    const hasChildren = !!childrenKey && Array.isArray(value[childrenKey]);
+                    const indentSize = indent ? indent * level : 0; 
 
-                        let row = <TableRow
-                            key={key}
-                            cols={cols}
-                            data={value}
-                            checkType={checkType}
-                            hasFixedLeft={hasFixedLeft}
-                            onClick={this.clickRow}
-                            checked={status.checked}
-                            indeterminate={status.indeterminate}
-                            index={index}
-                            disabled={status.disabled}
-                            allDisabled={status.allDisabled}
-                            className={rowClassName && rowClassName(value, index, key)}
-                            merge={merge}
-                            grid={getGrid()}
-                            onChangeChecked={onChangeChecked}
-                            selected={isSelected(key)}
-                            spreaded={spreaded}
-                            hasChildren={hasChildren}
-                            indent={indentSize}
-                            onToggleSpreadRow={toggleSpreadRow}
-                            onBeforeUnmount={this.resetRowStatus.onRowBeforeUnmount}
-                            offsetMap={offsetMap}
+                    let row = <TableRow
+                        key={key}
+                        cols={cols}
+                        data={value}
+                        checkType={checkType}
+                        hasFixedLeft={hasFixedLeft}
+                        onClick={this.clickRow}
+                        checked={status.checked}
+                        indeterminate={status.indeterminate}
+                        index={index}
+                        disabled={status.disabled}
+                        allDisabled={status.allDisabled}
+                        className={rowClassName && rowClassName(value, index, key)}
+                        merge={merge}
+                        grid={getGrid()}
+                        onChangeChecked={onChangeChecked}
+                        selected={isSelected(key)}
+                        spreaded={spreaded}
+                        hasChildren={hasChildren}
+                        indent={indentSize}
+                        onToggleSpreadRow={toggleSpreadRow}
+                        onBeforeUnmount={this.resetRowStatus.onRowBeforeUnmount}
+                        offsetMap={offsetMap}
+                        animation={animation[1]}
 
-                            draggable={draggable}
-                            draggingKey={draggingKey.value}
-                            onRowDragStart={onRowDragStart}
-                            onRowDragEnd={onRowDragEnd}
-                            onRowDragOver={onRowDragOver}
-                        />
+                        draggable={draggable}
+                        draggingKey={draggingKey.value}
+                        onRowDragStart={onRowDragStart}
+                        onRowDragEnd={onRowDragEnd}
+                        onRowDragOver={onRowDragOver}
+                    />
 
-                        if ($blocks.tooltip) {
-                            const content = <b:tooltip params={[value, index]} />;
-                            row = (
-                                <Tooltip key={key} position={tooltipPosition} container={tooltipContainer}>
-                                    <template>{row}</template>
-                                    <b:content>{content}</b:content>
-                                </Tooltip>
-                            );
-                        }
+                    if ($blocks.tooltip) {
+                        const content = <b:tooltip params={[value, index]} />;
+                        row = (
+                            <Tooltip key={key} position={tooltipPosition} container={tooltipContainer}>
+                                <template>{row}</template>
+                                <b:content>{content}</b:content>
+                            </Tooltip>
+                        );
+                    }
 
-                        rows.push(row);
-                        if ($blocks.expand) {
-                            const expanded = isExpanded(key);
-                            rows.push(
-                                <tr class={{"k-expand": true, 'k-expanded': expanded}}
-                                    key={`${key}.$expand`}
-                                >
-                                    <td colspan={colCount}>
-                                        <Transition {...expandAnimationCallbacks}>
-                                            <div v-if={expanded} class="k-table-expand">
-                                                <b:expand params={[value, index]} />
-                                            </div>
-                                        </Transition>
-                                    </td>
-                                </tr>
-                            );
-                        }
+                    rows.push(row);
+                    if ($blocks.expand) {
+                        const expanded = isExpanded(key);
+                        rows.push(
+                            <tr class={{"k-expand": true, 'k-expanded': expanded}}
+                                key={`${key}.$expand`}
+                            >
+                                <td colspan={colCount}>
+                                    <Transition {...expandAnimationCallbacks}>
+                                        <div v-if={expanded} class="k-table-expand">
+                                            <b:expand params={[value, index]} />
+                                        </div>
+                                    </Transition>
+                                </td>
+                            </tr>
+                        );
+                    }
 
-                        return hidden || !spreaded;
-                    });
+                    return hidden || !spreaded;
+                });
 
-                    return rows;
-                })()}
-            </TransitionGroup>
+                return animation[0] ?
+                    <TransitionGroup name="k-fade-in-left" move={!draggingKey.value}>{rows}</TransitionGroup> :
+                    rows;
+            })()
         }
     </tbody>
 );

package/components/tooltip/index.ts

@@ -20,7 +20,7 @@ export interface TooltipBlocks extends BaseTooltipBlocks, TooltipContentBlocks {
     content: null
 }
 
-declare class _Tooltip extends BaseTooltip<TooltipProps, TooltipEvents, TooltipBlocks> { }
+export declare class _Tooltip extends BaseTooltip<TooltipProps, TooltipEvents, TooltipBlocks> { }
 
 function Wrapper(props: Props<TooltipProps, BaseTooltip>) {
     let {children, content, $blocks, ...rest} = props;

package/components/treeSelect/index.md

@@ -32,6 +32,7 @@ sidebar: doc
 | defaultExpandAll | 是否默认展开所有节点 | `boolean` | `true` |
 | checkbox | 是否展示复选框 | `boolean` | `false` |
 | filter | 当支持筛选时，可以自定义筛选规则 | `(keywords: string, data: TreeDataItem<K>) => boolean` | `undefined` |
+| show | 是否展示菜单项 | `boolean` | `false` |
 
 ```ts
 import {Key, Children} from 'intact';

package/components/wave/index.ts

@@ -77,7 +77,7 @@ export class Wave extends Component<WaveProps> {
         this.resetAnimation();
       
         instance!.addEventListener('animationend', this.resetAnimation);
-        this.timer = window.setTimeout(() => {        
+        this.timer = window.setTimeout(() => {
             instance!.classList.add(this.className);
         });
     }

package/components/wave/styles.ts

@@ -39,6 +39,7 @@ export function makeStyles(color: string, inset: string) {
             animation: ${waveEffect} .2s ease-in;
             animation-fill-mode: forwards;
             border: 2px solid ${color};
+            pointer-events: none;
         }
         &.k-circle,
         &.k-radio-wrapper {
@@ -47,4 +48,4 @@ export function makeStyles(color: string, inset: string) {
             }
         }
     `;
-}
+}

package/es/components/cascader/useValue.js

@@ -36,7 +36,7 @@ export function useValue() {
       });
     }
   });
-  instance.watch('_show', function (value) {
+  instance.watch('show', function (value) {
     if (value) {
       showedValue.set(last(values.value) || []);
     }

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

@@ -1,5 +1,5 @@
 import { Component, TypeDefs } from 'intact';
-import type { editor } from 'monaco-editor';
+import type { editor, default as monaco } from 'monaco-editor';
 import type { Events } from '../types';
 export interface CodeProps {
     value?: string;
@@ -11,7 +11,7 @@ export interface CodeProps {
     options?: editor.IStandaloneEditorConstructionOptions;
 }
 export interface CodeEvents {
-    ready: [editor.IStandaloneCodeEditor, typeof editor];
+    ready: [editor.IStandaloneCodeEditor, typeof editor, typeof monaco];
 }
 export declare class Code extends Component<CodeProps, CodeEvents> {
     static template: string | import("intact").Template<any>;

package/es/components/code/useEditor.js

@@ -29,7 +29,7 @@ export function useEditor() {
       }, options));
       watch(Editor, codeEditor);
       loading.set(false);
-      instance.trigger('ready', codeEditor, Editor);
+      instance.trigger('ready', codeEditor, Editor, monaco);
     });
   });
   onBeforeUnmount(function () {

package/es/components/form/styles.js

@@ -50,7 +50,7 @@ setDefault(function () {
   }).form;
 });
 export function makeItemStyles() {
-  return /*#__PURE__*/css("display:table;position:relative;table-layout:fixed;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.k-fluid{width:100%;}.k-form-label{display:table-cell;width:", form.item.labelWidth, ";text-align:", form.item.labelTextAlign, ";padding-right:", form.item.labelGap, ";line-height:", form.item.labelLineHeight, ";}.k-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.k-form-content{display:table-cell;vertical-align:middle;position:relative;}.k-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.k-ellipsis{.k-form-error-more{display:inline-block;}}}.k-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.k-invalid{.k-input{.k-input-inner{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.k-select,.k-checkbox-wrapper,.k-radio-wrapper{border:", form.item.invalidBorder, "!important;}.k-select .k-input .k-input-inner{border:none;}}.k-form-item{display:block;width:auto;}.k-form-append{display:table-cell;padding:", form.item.appendPadding, ";vertical-align:middle;}");
+  return /*#__PURE__*/css("display:table;position:relative;table-layout:fixed;&:not(:last-of-type){margin-bottom:", form.item.gap, ";}&.k-fluid{width:100%;}.k-form-label{display:table-cell;width:", form.item.labelWidth, ";text-align:", form.item.labelTextAlign, ";padding-right:", form.item.labelGap, ";line-height:", form.item.labelLineHeight, ";}.k-form-star{color:", form.item.starColor, ";margin-right:", form.item.starGap, ";}.k-form-content{display:table-cell;vertical-align:middle;position:relative;}.k-form-error{position:absolute;color:", form.item.errorColor, ";font-size:", form.item.errorFontSize, ";left:0;right:0;display:flex;align-items:center;&.k-ellipsis{.k-form-error-more{display:inline-block;}}}.k-form-error-more{line-height:", form.item.errorFontSize, ";display:none;}&.k-invalid{.k-input{.k-input-inner{border:", form.item.invalidBorder, ";position:relative;z-index:1;}}.k-select,.k-checkbox-wrapper,.k-radio-wrapper{border:", form.item.invalidBorder, "!important;}.k-select .k-input .k-input-inner{border:none;}}.k-form-item{&,.k-form-content{display:block;width:auto;}}.k-form-append{display:table-cell;padding:", form.item.appendPadding, ";vertical-align:middle;}");
 }
 export function makeFormStyles() {
   var _context;