@king-design/intact 2.0.8 → 2.0.10

package/components/datepicker/index.spec.ts

@@ -142,32 +142,38 @@ describe('Datepicker', () => {
             const [monthValues1, monthValues2]= content.querySelectorAll<HTMLElement>('.k-month-values');
 
             nextMonth.click();
+            const monthStart = (month + 1) % 12 + 1;
+            const yearStart = year + Math.floor((month + 1) / 12);
+            const monthEnd = (month + 2) % 12 + 1;
+            const yearEnd = year + Math.floor((month + 2) / 12);
             await wait();
-            expect(monthValues1.textContent).to.eql(`${year}年${month + 1 + 1}月`);
-            expect(monthValues2.textContent).to.eql(`${year}年${month + 1 + 2}月`);
+            expect(monthValues1.textContent).to.eql(`${yearStart}年${monthStart}月`);
+            expect(monthValues2.textContent).to.eql(`${yearEnd}年${monthEnd}月`);
 
             nextYear.click();
             await wait();
-            expect(monthValues1.textContent).to.eql(`${year + 1}年${month + 1 + 1}月`);
-            expect(monthValues2.textContent).to.eql(`${year + 1}年${month + 1 + 2}月`);
+            expect(monthValues1.textContent).to.eql(`${yearStart + 1}年${monthStart}月`);
+            expect(monthValues2.textContent).to.eql(`${yearEnd + 1}年${monthEnd}月`);
 
             const [prevYear] = panel2.querySelectorAll<HTMLElement>('.k-prev');
             prevYear.click();
             await wait();
-            expect(monthValues1.textContent).to.eql(`${year}年${month + 1 + 1}月`);
-            expect(monthValues2.textContent).to.eql(`${year}年${month + 1 + 2}月`);
+            expect(monthValues1.textContent).to.eql(`${yearStart}年${monthStart}月`);
+            expect(monthValues2.textContent).to.eql(`${yearEnd}年${monthEnd}月`);
 
             // year panel
             dispatchEvent(monthValues1.firstElementChild!, 'click');
             dispatchEvent(monthValues2.firstElementChild!, 'click');
             await wait();
-            expect(monthValues1.textContent).to.eql(`${startYear}年 - ${startYear + 9}年`);
-            expect(monthValues1.textContent).to.eql(monthValues2.textContent);
+            const firstDecadeStart = Math.floor(yearStart / 10) * 10;
+            const secondDecadeStart = Math.floor(yearEnd / 10) * 10; 
+            expect(monthValues1.textContent).to.eql(`${firstDecadeStart}年 - ${firstDecadeStart + 9}年`);
+            expect(monthValues1.textContent).to.eql(`${secondDecadeStart}年 - ${secondDecadeStart + 9}年`);
 
             nextYear.click();
             await wait();
-            expect(monthValues1.textContent).to.eql(`${startYear + 10}年 - ${startYear + 19}年`);
-            expect(monthValues1.textContent).to.eql(monthValues2.textContent);
+            expect(monthValues1.textContent).to.eql(`${firstDecadeStart + 10}年 - ${secondDecadeStart + 19}年`);
+            expect(monthValues1.textContent).to.eql(`${secondDecadeStart + 10}年 - ${secondDecadeStart + 19}年`);
         });
 
         it('range year', async () => {

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/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

@@ -22,13 +22,17 @@ export function useEscClosable() {
     });
 
     function onHide() {
-        const dialog = dialogs.pop();
+        // the order is uncertain in different frameworks
+        const index = dialogs.indexOf(instance);
+        // const dialog = dialogs.pop();
         // const dialog = dialogs.shift();
         if (process.env.NODE_ENV !== 'production') {
-            if (dialog !== instance) {
-                throw new Error('The dialog has handled hide callback. It is a bug of KPC');
+            // if (dialog !== instance) {
+            if (index === -1) {
+                throw new Error('The dialog has handled hide callback. Maybe it is a bug of KPC');
             }
         }
+        dialogs.splice(0, index);
 
         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

@@ -6,14 +6,10 @@ import {
     createCommentVNode,
     createTextVNode,
     mount,
-    removeVNodeDom,
     patch,
     remove,
     TypeDefs,
-    provide,
     inject,
-    nextTick,
-    callAll,
 } from 'intact';
 import {isString} from 'intact-shared';
 import {DIALOG} from './dialog/constants';
@@ -42,6 +38,7 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
     private dialog: Dialog | null = inject(DIALOG, null);
     public mountedQueue?: Function[];
     public mountedDone?: boolean;
+    public $isPortal = true;
 
     $render(
         lastVNode: VNodeComponentClass<this> | null,
@@ -50,46 +47,29 @@ export class Portal<T extends PortalProps = PortalProps> extends Component<T> {
         anchor: IntactDom | null,
         mountedQueue: Function[]
     ) {
+        /**
+         * In React, we cannot render real elements in mountedQueue.
+         * Because the rendering time of react element is uncontrollable
+         */
+
+        const nextProps = nextVNode.props!;
+        const fakeContainer = document.createDocumentFragment();
+
         mountedQueue.push(() => {
-            const nextProps = nextVNode.props!;
             const parentDom = this.$lastInput!.dom!.parentElement!;
-            /**
-             * initialize a new mountedQueue to place the callbacks of sub-components to it,
-             * so that we can call them before the sibling components of the Portal
-             */
-            const mountedQueue: Function[] = [];
             this.initContainer(nextProps.container, parentDom, anchor);
-
-            /**
-             * Because we render real elements following parent has rendered.
-             * In React, the $promises have done. Then we cannot add any promise to it.
-             * We should find the parent component who holds the $promises object, and
-             * reset it to let remaining element children add promise to it.
-             */
-            const parent = getParent(this) as any;
-            if (parent) {
-                parent.$promises.reset();
-            }
-
-            mount(
-                nextProps.children as VNode,
-                this.container!,
-                this,
-                this.$SVG,
-                null,
-                mountedQueue,
-            );
-
-            // in react, we should wait for all promises to resolve
-            if (parent) {
-                (Component as any).FakePromise.all(parent.$promises).then(() => {
-                    callAll(mountedQueue);
-                });
-            } else {
-                callAll(mountedQueue);
-            }
+            this.container!.appendChild(fakeContainer);
         });
 
+        mount(
+            nextProps.children as VNode,
+            fakeContainer as any,
+            this,
+            this.$SVG,
+            null,
+            mountedQueue,
+        );
+
         super.$render(lastVNode, nextVNode, parentDom, anchor, mountedQueue);
     }
 
@@ -152,22 +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 = tmp.dialogRef.value)) {
-                this.container = tmp;
-            } else {
-                this.container = document.body;
-            }
-        }
-    }
-}
+            this.container = parentDom.closest('.k-dialog') || document.body;
 
-function getParent($senior: Component): Component | null {
-    while ($senior = $senior.$senior as Component) {
-        if (($senior as any)._reactInternals) {
-            return $senior;
+            /**
+             * @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;
+            // }
         }
     }
-    return null;
 }
-

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);
         }