@king-design/intact 2.0.9 → 2.0.11

package/components/dialog/base.ts

@@ -31,6 +31,7 @@ export interface BaseDialogProps {
     escClosable?: boolean
     width?: string | number
     mode?: 'destroy' | 'hide'
+    draggable?: boolean
 }
 
 export interface BaseDialogEvents {
@@ -68,6 +69,7 @@ const typeDefs: Required<TypeDefs<BaseDialogProps>> = {
     escClosable: Boolean,
     width: [String, Number],
     mode: ['destroy', 'hide'],
+    draggable: Boolean,
 };
 
 const defaults = (): Partial<BaseDialogProps> => ({
@@ -80,6 +82,7 @@ const defaults = (): Partial<BaseDialogProps> => ({
     closable: true,
     escClosable: true,
     mode: 'hide',
+    draggable: true,
 });
 
 const events: Events<BaseDialogEvents> = {

package/components/dialog/demos/block.md

@@ -105,13 +105,13 @@ export default class Demo extends React.Component {
                 >Show No Footer Dialog</Button>
                 <Dialog value={this.state.show}
                     onChangeValue={(show) => this.setState({show})}
-                    b-header={
+                    slotHeader={
                         <div className="k-title">
                             <i className="ion-person"></i>
                             Custom Header
                         </div>
                     }
-                    b-footer={
+                    slotFooter={
                         <React.Fragment>
                             Custom Footer
                             <Button type="primary" onClick={() => this.setState({show: false})}>确认</Button>
@@ -124,8 +124,8 @@ export default class Demo extends React.Component {
                 <Dialog value={this.state.show1}
                     onChangeValue={(show1) => this.setState({show1})}
                     title="No Footer"
-                    b-body="body"
-                    b-footer-wrapper=""
+                    slotBody="body"
+                    slotFooterWrapper=""
                 >
                 </Dialog>
             </div>

package/components/dialog/index.md

@@ -53,6 +53,7 @@ sidebar: doc
 | escClosable | 是否按ESC时关闭弹窗 | `boolean` | `true` |
 | width | 指定弹窗宽度，`number`类型时，单位为`px`；`string`类型时，需要指定单位 | `number` | `string` | `undefined` |
 | mode | 指定主体元素在关闭状态下的渲染方式，`"destroy"`代表直接销毁，`"hide"`代表只是隐藏 | `"destroy"` | `"hide"` | `"hide"` |
+| draggable | 弹窗是否可拖拽 | `boolean` | `true` |
 
 ```ts
 export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)

package/components/dialog/useDraggable.ts

@@ -5,7 +5,7 @@ import type {Dialog} from './index';
 
 export function useDraggable(
     dialogRef: RefObject<HTMLDivElement>,
-    areaRef: RefObject<HTMLDivElement>
+    areaRef: RefObject<HTMLDivElement>,
 ) {
     const component = useInstance() as Dialog;
     let x = 0;
@@ -60,5 +60,7 @@ export function useDraggable(
         style.top = `${top}px`;
     }
 
-    return useBaseDraggable({onStart, onMove});
+    return useBaseDraggable({onStart, onMove, disable() {
+        return !component.get('draggable');
+    }});
 }

package/components/dialog/useEscClosable.ts

@@ -32,7 +32,7 @@ export function useEscClosable() {
                 throw new Error('The dialog has handled hide callback. Maybe it is a bug of KPC');
             }
         }
-        dialogs.splice(0, index);
+        dialogs.splice(index, 1);
 
         if (!dialogs.length) {
             document.removeEventListener('keydown', escClose);

package/components/drawer/index.ts

@@ -15,6 +15,7 @@ const typeDefs: Required<TypeDefs<DrawerProps>> = {
 const defaults = (): Partial<DrawerProps> => ({
     ...BaseDialog.defaults(),
     placement: 'right',
+    draggable: false,
 });
 
 export class Drawer extends BaseDialog<DrawerProps> {

package/components/portal.ts

@@ -132,12 +132,18 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         }
         if (!this.container) {
             // find the closest dialog if exists
-            let tmp;
-            if ((tmp = this.dialog) && (tmp !== this.$senior) && (tmp = tmp.dialogRef.value)) {
-                this.container = tmp;
-            } else {
-                this.container = document.body;
-            }
+            this.container = parentDom.closest('.k-dialog') || document.body;
+
+            /**
+             * @FIXME: We cannot get parent ref from sub component in Vue
+             */
+            // find the closest dialog if exists
+            // let tmp;
+            // if ((tmp = this.dialog) && (tmp !== this.$senior) && (tmp = tmp.dialogRef.value)) {
+                // this.container = tmp;
+            // } else {
+                // this.container = document.body;
+            // }
         }
     }
 }

package/components/select/base.ts

@@ -88,6 +88,9 @@ export abstract class BaseSelect<
     E extends BaseSelectEvents = BaseSelectEvents,
     B extends BaseSelectBlocks<any> = BaseSelectBlocks<any>,
 > extends Component<T, E, B> {
+    // for intact-react, intact-vue-next and intact-vue
+    static $doubleVNodes = true;
+
     static template = template;
     static typeDefs = typeDefs;
     static defaults = defaults;

package/components/select/useBaseLabel.ts

@@ -1,10 +1,11 @@
 import {Children, useInstance, Component} from 'intact';
 import {isNullOrUndefined, isStringOrNumber} from 'intact-shared';
-import {isEmptyString} from '../utils';
+import {isEmptyString, getTextByChildren} from '../utils';
 
 type BaseLabelProps = {
     value: any,
     multiple: boolean,
+    filterable: boolean,
 }
 
 export function useBaseLabel<T, C extends Component<P>, P extends BaseLabelProps>(
@@ -41,6 +42,10 @@ export function useBaseLabel<T, C extends Component<P>, P extends BaseLabelProps
         if (isNullOrUndefined(label)) {
             label = labelMap.get(value);
         } else {
+            if (instance.get('filterable')) {
+                label = getTextByChildren(label);
+            }
+
             labelMap.set(value, label);
         }