naive-ui 2.40.4 → 2.41.1

package/es/locales/common/kmKH.mjs

@@ -0,0 +1,124 @@
+const kmKH = {
+  name: 'km-KH',
+  global: {
+    undo: 'បោះបង់',
+    redo: 'ធ្វើឡើងវិញ',
+    confirm: 'បញ្ជាក់',
+    clear: 'ច្បាស់'
+  },
+  Popconfirm: {
+    positiveText: 'បញ្ជាក់',
+    negativeText: 'បោះបង់'
+  },
+  Cascader: {
+    placeholder: 'សូមជ្រើសរើស',
+    loading: 'ការផ្ទុក',
+    loadingRequiredMessage: label => `អាចជ្រើសរើសបានតែបន្ទាប់ពីផ្ទុកថ្នាំងកូន  ${label} ទាំងអស់។`
+  },
+  Time: {
+    dateFormat: 'yyyy-MM-dd',
+    dateTimeFormat: 'yyyy-MM-dd HH:mm:ss'
+  },
+  DatePicker: {
+    yearFormat: 'yyyyឆ្នាំ',
+    monthFormat: 'MMM',
+    dayFormat: 'eeeeee',
+    yearTypeFormat: 'yyyy',
+    monthTypeFormat: 'yyyy-MM',
+    dateFormat: 'yyyy-MM-dd',
+    dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
+    quarterFormat: 'yyyy-qqq',
+    weekFormat: 'YYYY-wសប្តាហ៍',
+    clear: 'ច្បាស់',
+    now: 'ឥឡូវនេះ',
+    confirm: 'បញ្ជាក់',
+    selectTime: 'ជ្រើសរើសកាលបរិច្ឆេទ',
+    selectDate: 'ជ្រើសរើសកាលបរិច្ឆេទ',
+    datePlaceholder: 'ជ្រើសរើសកាលបរិច្ឆេទ',
+    datetimePlaceholder: 'ជ្រើសរើសពេលវេលាកាលបរិច្ឆេទ',
+    monthPlaceholder: 'ជ្រើសរើសខែ',
+    yearPlaceholder: 'ជ្រើសរើសឆ្នាំ',
+    quarterPlaceholder: 'ជ្រើសរើសត្រីមាស',
+    weekPlaceholder: 'ជ្រើសរើសសប្តាហ៍',
+    startDatePlaceholder: 'កាលបរិច្ឆេទចាប់ផ្តើម',
+    endDatePlaceholder: 'កាលបរិច្ឆេទបញ្ចប់',
+    startDatetimePlaceholder: 'កាលបរិច្ឆេទចាប់ផ្តើម',
+    endDatetimePlaceholder: 'កាលបរិច្ឆេទបញ្ចប់',
+    startMonthPlaceholder: 'ខែចាប់ផ្តើម',
+    endMonthPlaceholder: 'ចុងខែ',
+    monthBeforeYear: false,
+    firstDayOfWeek: 0,
+    today: 'ថ្ងៃនេះ'
+  },
+  DataTable: {
+    checkTableAll: 'ជ្រើសរើសទិន្នន័យតារាងទាំងអស់។',
+    uncheckTableAll: 'ដកការជ្រើសរើសទិន្នន័យតារាងទាំងអស់។',
+    confirm: 'បញ្ជាក់',
+    clear: 'កំណត់ឡើងវិញ'
+  },
+  LegacyTransfer: {
+    sourceTitle: 'ធាតុប្រភព',
+    targetTitle: 'ធាតុគោលដៅ'
+  },
+  Transfer: {
+    selectAll: 'ជ្រើសរើសទាំងអស់។',
+    clearAll: 'ច្បាស់',
+    unselectAll: 'ដកការជ្រើសរើសទាំងអស់។',
+    total: num => `ទូទៅ ${num} ធាតុ`,
+    selected: num => `បានជ្រើសរើស ${num} ធាតុ`
+  },
+  Empty: {
+    description: 'គ្មានទិន្នន័យ'
+  },
+  Select: {
+    placeholder: 'សូមជ្រើសរើស'
+  },
+  TimePicker: {
+    placeholder: 'សូមជ្រើសរើសពេលវេលាមួយ។',
+    positiveText: 'បញ្ជាក់',
+    negativeText: 'បោះបង់',
+    now: 'ឥឡូវនេះ',
+    clear: 'ច្បាស់'
+  },
+  Pagination: {
+    goto: 'លោតទៅ',
+    selectionSuffix: 'ទំព័រ'
+  },
+  DynamicTags: {
+    add: 'បន្ថែមទៅ'
+  },
+  Log: {
+    loading: 'ការផ្ទុក'
+  },
+  Input: {
+    placeholder: 'សូមបញ្ចូល'
+  },
+  InputNumber: {
+    placeholder: 'សូមបញ្ចូល'
+  },
+  DynamicInput: {
+    create: 'បន្ថែមទៅ'
+  },
+  ThemeEditor: {
+    title: 'កម្មវិធីនិពន្ធប្រធានបទ',
+    clearAllVars: 'សម្អាតអថេរទាំងអស់។',
+    clearSearch: 'ជម្រះការស្វែងរក',
+    filterCompName: 'តម្រងឈ្មោះសមាសភាគ',
+    filterVarName: 'ត្រងឈ្មោះអថេរ',
+    import: 'នាំចូល',
+    export: 'នាំចេញ',
+    restore: 'ស្តារលំនាំដើម'
+  },
+  Image: {
+    tipPrevious: 'រូបភាពមុន។（←）',
+    tipNext: 'បន្ទាប់（→）',
+    tipCounterclockwise: 'បង្វិលឆ្វេង',
+    tipClockwise: 'បង្វិលស្តាំ',
+    tipZoomOut: 'បង្រួម ',
+    tipZoomIn: 'ពង្រីក',
+    tipDownload: 'ទាញយក',
+    tipClose: 'ការបិទ（Esc）',
+    tipOriginalSize: 'ធ្វើមាត្រដ្ឋានទៅទំហំដើម'
+  }
+};
+export default kmKH;

package/es/locales/common/ugCN.d.ts

@@ -0,0 +1,3 @@
+import type { NLocale } from './enUS';
+declare const ugCN: NLocale;
+export default ugCN;

package/es/locales/common/ugCN.mjs

@@ -0,0 +1,124 @@
+const ugCN = {
+  name: 'ug-CN',
+  global: {
+    undo: 'قالدۇرۇش',
+    redo: 'قايتا',
+    confirm: 'جەزملەش',
+    clear: 'تازلاش'
+  },
+  Popconfirm: {
+    positiveText: 'جەزملەش',
+    negativeText: 'بىكار قىلىش'
+  },
+  Cascader: {
+    placeholder: 'تاللاڭ',
+    loading: 'يۈكلەۋاتىدۇ',
+    loadingRequiredMessage: label => `جەمئى ${label} تۈگۈننى يۈكلەپ بولغاندىن كېيىن تاللىغىلى بولىدۇ`
+  },
+  Time: {
+    dateFormat: 'yyyy-MM-dd',
+    dateTimeFormat: 'yyyy-MM-dd HH:mm:ss'
+  },
+  DatePicker: {
+    yearFormat: 'yyyy-يىل',
+    monthFormat: 'MMM',
+    dayFormat: 'eeeeee',
+    yearTypeFormat: 'yyyy',
+    monthTypeFormat: 'yyyy-MM',
+    dateFormat: 'yyyy-MM-dd',
+    dateTimeFormat: 'yyyy-MM-dd HH:mm:ss',
+    quarterFormat: 'yyyy-qqq',
+    weekFormat: 'YYYY-wھەپتە',
+    clear: 'تازلاش',
+    now: 'مۇشۇ ۋاقىت',
+    confirm: 'جەزملەش',
+    selectTime: 'ۋاقىت تاللاڭ',
+    selectDate: 'چىسلا تاللاڭ',
+    datePlaceholder: 'چىسلا تاللاڭ',
+    datetimePlaceholder: 'چىسلا ۋاقىت تاللاڭ',
+    monthPlaceholder: 'ئاي تاللاڭ',
+    yearPlaceholder: 'يىل تاللاڭ',
+    quarterPlaceholder: 'پەسىل تاللاڭ',
+    weekPlaceholder: 'ھەپتە تاللاڭ',
+    startDatePlaceholder: 'باشلىنىش ۋاقتى',
+    endDatePlaceholder: 'ئاخىرلىشىش ۋاقتى',
+    startDatetimePlaceholder: 'باشلىندىغان چىسلا ۋاقىت',
+    endDatetimePlaceholder: 'ئاخىرلىشىدىغان چىسلا ۋاقىت',
+    startMonthPlaceholder: 'باشلىندىغان ئاي',
+    endMonthPlaceholder: 'ئاخىرلىشىدىغان ئاي',
+    monthBeforeYear: false,
+    firstDayOfWeek: 0,
+    today: 'بۈگۈن'
+  },
+  DataTable: {
+    checkTableAll: 'ھەممە ئۇچۇرنى تاللاش',
+    uncheckTableAll: 'تاللاشنى بىكار قىلىش',
+    confirm: 'جەزملەش',
+    clear: 'تازلاش'
+  },
+  LegacyTransfer: {
+    sourceTitle: 'ئەسلى تۈر',
+    targetTitle: 'نىشان تۈر'
+  },
+  Transfer: {
+    selectAll: 'ھەممىنى تاللاش',
+    clearAll: 'تازلاش',
+    unselectAll: 'ھەممىنى بىكار قىلىش',
+    total: num => `جەمئى ${num} تۈر`,
+    selected: num => `${num} تۈر تاللاندى`
+  },
+  Empty: {
+    description: 'ئۇچۇر يوق'
+  },
+  Select: {
+    placeholder: 'تاللاڭ'
+  },
+  TimePicker: {
+    placeholder: 'ۋاقىت تاللاڭ',
+    positiveText: 'جەزملەش',
+    negativeText: 'بىكار قىلىش',
+    now: 'مۇشۇ ۋاقىت',
+    clear: 'تازلاش'
+  },
+  Pagination: {
+    goto: 'ئاتلاش',
+    selectionSuffix: 'بەت'
+  },
+  DynamicTags: {
+    add: 'قوشۇش'
+  },
+  Log: {
+    loading: 'يۈكلەۋاتىدۇ'
+  },
+  Input: {
+    placeholder: 'كىرگۈزۈڭ'
+  },
+  InputNumber: {
+    placeholder: 'كىرگۈزۈڭ'
+  },
+  DynamicInput: {
+    create: 'قوشۇش'
+  },
+  ThemeEditor: {
+    title: 'ئۇسلوب تەھرىرلىگۈچ',
+    clearAllVars: 'ھەممە پارامىتىرنى تازلاش',
+    clearSearch: 'ئىزدەشنى تازلاش',
+    filterCompName: 'ۋىجىت ئىسمىنى فىلتىرلاش',
+    filterVarName: 'پارامىتېرنى فىلتىرلاش',
+    import: 'ئەكىرىش',
+    export: 'چىقىرىش',
+    restore: 'ئەسلىگە قايتۇرۇش'
+  },
+  Image: {
+    tipPrevious: '（←）ئالدىنقىسى',
+    tipNext: 'كېيىنكىسى（→）',
+    tipCounterclockwise: 'سولغا چۆرۈش',
+    tipClockwise: 'ئوڭغا چۆرۈش',
+    tipZoomOut: 'كىچىكلىتىش',
+    tipZoomIn: 'چوڭايتىش',
+    tipDownload: 'چۈشۈرۈش',
+    tipClose: 'تاقاش（Esc）',
+    tipOriginalSize: 'ئەسلىگە قايتۇرۇش'
+  }
+};
+export default ugCN;

package/es/locales/date/kmKH.d.ts

@@ -0,0 +1,3 @@
+import type { NDateLocale } from './enUS';
+declare const dateKmKH: NDateLocale;
+export default dateKmKH;

package/es/locales/date/kmKH.mjs

@@ -0,0 +1,6 @@
+import { km } from 'date-fns/locale';
+const dateKmKH = {
+  name: 'km-KH',
+  locale: km
+};
+export default dateKmKH;

package/es/locales/date/ugCN.d.ts

@@ -0,0 +1,3 @@
+import type { NDateLocale } from './enUS';
+declare const dateUgCN: NDateLocale;
+export default dateUgCN;

package/es/locales/date/ugCN.mjs

@@ -0,0 +1,6 @@
+import { ug } from 'date-fns/locale';
+const dateUgCN = {
+  name: 'ug-CN',
+  locale: ug
+};
+export default dateUgCN;

package/es/locales/index.d.ts

@@ -13,6 +13,7 @@ export { default as frFR } from './common/frFR';
 export { default as idID } from './common/idID';
 export { default as itIT } from './common/itIT';
 export { default as jaJP } from './common/jaJP';
+export { default as kmKH } from './common/kmKH';
 export { default as koKR } from './common/koKR';
 export { default as nbNO } from './common/nbNO';
 export { default as nlNL } from './common/nlNL';
@@ -43,6 +44,7 @@ export { default as dateFrFR } from './date/frFR';
 export { default as dateIdID } from './date/idID';
 export { default as dateItIT } from './date/itIT';
 export { default as dateJaJP } from './date/jaJP';
+export { default as dateKmKH } from './date/kmKH';
 export { default as dateKoKR } from './date/koKR';
 export { default as dateNbNO } from './date/nbNO';
 export { default as dateNlNL } from './date/nlNL';
@@ -53,6 +55,7 @@ export { default as dateSkSK } from './date/skSK';
 export { default as dateSvSE } from './date/svSE';
 export { default as dateThTH } from './date/thTH';
 export { default as dateTrTR } from './date/trTR';
+export { default as dateUgCN } from './date/ugCN';
 export { default as dateUkUA } from './date/ukUA';
 export { default as dateUzUZ } from './date/uzUZ';
 export { default as dateViVN } from './date/viVN';

package/es/locales/index.mjs

@@ -12,6 +12,7 @@ export { default as frFR } from "./common/frFR.mjs";
 export { default as idID } from "./common/idID.mjs";
 export { default as itIT } from "./common/itIT.mjs";
 export { default as jaJP } from "./common/jaJP.mjs";
+export { default as kmKH } from "./common/kmKH.mjs";
 export { default as koKR } from "./common/koKR.mjs";
 export { default as nbNO } from "./common/nbNO.mjs";
 export { default as nlNL } from "./common/nlNL.mjs";
@@ -41,6 +42,7 @@ export { default as dateFrFR } from "./date/frFR.mjs";
 export { default as dateIdID } from "./date/idID.mjs";
 export { default as dateItIT } from "./date/itIT.mjs";
 export { default as dateJaJP } from "./date/jaJP.mjs";
+export { default as dateKmKH } from "./date/kmKH.mjs";
 export { default as dateKoKR } from "./date/koKR.mjs";
 export { default as dateNbNO } from "./date/nbNO.mjs";
 export { default as dateNlNL } from "./date/nlNL.mjs";
@@ -51,6 +53,7 @@ export { default as dateSkSK } from "./date/skSK.mjs";
 export { default as dateSvSE } from "./date/svSE.mjs";
 export { default as dateThTH } from "./date/thTH.mjs";
 export { default as dateTrTR } from "./date/trTR.mjs";
+export { default as dateUgCN } from "./date/ugCN.mjs";
 export { default as dateUkUA } from "./date/ukUA.mjs";
 export { default as dateUzUZ } from "./date/uzUZ.mjs";
 export { default as dateViVN } from "./date/viVN.mjs";

package/es/mention/index.d.ts

@@ -1,3 +1,3 @@
 export type { MentionInst, MentionOption } from './src/interface';
 export { mentionProps, default as NMention } from './src/Mention';
-export type { MentionProps } from './src/Mention';
+export type { MentionProps, MentionSlots } from './src/Mention';

package/es/mention/src/Mention.d.ts

@@ -1,11 +1,11 @@
 import type { RenderLabel } from '../../_internal/select-menu/src/interface';
 import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
-import type { FormValidationStatus } from '../../form/src/interface';
+import type { FormValidationStatus } from '../../form/src/public-types';
 import type { Size as InputSize } from '../../input/src/interface';
 import type { SelectBaseOption, SelectGroupOption, SelectIgnoredOption } from '../../select/src/interface';
 import type { MentionOption } from './interface';
 import { type TreeNode } from 'treemate';
-import { type PropType } from 'vue';
+import { type PropType, type SlotsType, type VNode } from 'vue';
 import { type FollowerInst, type FollowerPlacement } from 'vueuc';
 export declare const mentionProps: {
     readonly to: {
@@ -469,6 +469,10 @@ export declare const mentionProps: {
     }>>>;
 };
 export type MentionProps = ExtractPublicPropTypes<typeof mentionProps>;
+export interface MentionSlots {
+    default?: () => VNode[];
+    empty?: () => VNode[];
+}
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     readonly to: {
         type: PropType<HTMLElement | string | boolean>;
@@ -1662,5 +1666,5 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly placement: FollowerPlacement;
     readonly defaultValue: string;
     readonly internalDebug: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, SlotsType<MentionSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/mention/src/Mention.mjs

@@ -84,6 +84,7 @@ export const mentionProps = Object.assign(Object.assign({}, useTheme.props), {
 export default defineComponent({
   name: 'Mention',
   props: mentionProps,
+  slots: Object,
   setup(props) {
     const {
       namespaceRef,

package/es/modal/index.d.ts

@@ -1,5 +1,5 @@
 export { useModal, useModalReactiveList } from './src/composables';
 export { modalProps, default as NModal } from './src/Modal';
-export type { ModalProps } from './src/Modal';
+export type { ModalProps, ModalSlots } from './src/Modal';
 export { modalProviderProps, NModalProvider } from './src/ModalProvider';
 export type { ModalApiInjection as ModalApi, ModalOptions, ModalProviderInst, ModalProviderProps, ModalReactive } from './src/ModalProvider';

package/es/modal/src/BodyWrapper.d.ts

@@ -1,4 +1,6 @@
-import { type ComponentPublicInstance, type PropType, type VNode, type VNodeChild } from 'vue';
+import type { ModalDraggableOptions } from './interface';
+import type { ModalSlots } from './Modal';
+import { type ComponentPublicInstance, type PropType, type SlotsType, type VNode, type VNodeChild } from 'vue';
 import { type ScrollbarInst } from '../../_internal';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     renderMask: PropType<() => VNodeChild>;
@@ -23,7 +25,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: FunctionConstructor;
         required: true;
     };
-    onAfterEnter: PropType<() => void>;
+    onAfterEnter: PropType<(el: HTMLElement) => void>;
     onEsc: PropType<(e: KeyboardEvent) => void>;
     icon: PropType<() => VNodeChild>;
     type: {
@@ -96,6 +98,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     blockScroll: BooleanConstructor;
+    draggable: {
+        type: PropType<boolean | ModalDraggableOptions>;
+        default: boolean;
+    };
 }>, {
     mergedTheme: import("vue").Ref<{
         common: import("../..").ThemeCommonVars;
@@ -1155,15 +1161,19 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         handleMouseEnterWrapper: () => void;
         handleMouseLeaveWrapper: () => void;
     } | null>;
+    draggableClass: import("vue").ComputedRef<"" | "n-draggable">;
     displayed: import("vue").Ref<boolean, boolean>;
     childNodeRef: import("vue").Ref<VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null, VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }> | null>;
+    cardHeaderClass: import("vue").ComputedRef<string>;
+    dialogTitleClass: import("vue").ComputedRef<string>;
     handlePositiveClick: () => void;
     handleNegativeClick: () => void;
     handleCloseClick: () => void;
+    handleAfterEnter: (el: Element) => void;
     handleAfterLeave: () => void;
     handleBeforeLeave: (el: HTMLElement) => void;
     handleEnter: (el: HTMLElement) => void;
@@ -1190,7 +1200,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: FunctionConstructor;
         required: true;
     };
-    onAfterEnter: PropType<() => void>;
+    onAfterEnter: PropType<(el: HTMLElement) => void>;
     onEsc: PropType<(e: KeyboardEvent) => void>;
     icon: PropType<() => VNodeChild>;
     type: {
@@ -1263,10 +1273,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: boolean;
     };
     blockScroll: BooleanConstructor;
+    draggable: {
+        type: PropType<boolean | ModalDraggableOptions>;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     type: "error" | "default" | "info" | "success" | "warning";
     tag: keyof HTMLElementTagNameMap;
     size: "small" | "medium" | "large" | "huge";
+    draggable: boolean | ModalDraggableOptions;
     loading: boolean;
     autoFocus: boolean;
     bordered: boolean;
@@ -1275,7 +1290,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     hoverable: boolean;
     embedded: boolean;
     segmented: boolean | import("../../card").CardSegmented;
-    blockScroll: boolean;
     trapFocus: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    blockScroll: boolean;
+}, SlotsType<ModalSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/modal/src/BodyWrapper.mjs

@@ -1,19 +1,21 @@
 import { clickoutside } from 'vdirs';
-import { cloneVNode, computed, defineComponent, h, inject, mergeProps, nextTick, provide, ref, toRef, Transition, vShow, watch, withDirectives } from 'vue';
+import { cloneVNode, computed, defineComponent, h, inject, mergeProps, nextTick, normalizeClass, provide, ref, toRef, Transition, vShow, watch, withDirectives } from 'vue';
 import { VFocusTrap } from 'vueuc';
 import { NScrollbar } from "../../_internal/index.mjs";
-import { getFirstSlotVNode, keep, useLockHtmlScroll, warn } from "../../_utils/index.mjs";
+import { getFirstSlotVNodeWithTypedProps, keep, useLockHtmlScroll, warn } from "../../_utils/index.mjs";
 import { NCard } from "../../card/index.mjs";
 import { cardBasePropKeys } from "../../card/src/Card.mjs";
 import { NDialog } from "../../dialog/src/Dialog.mjs";
 import { dialogPropKeys } from "../../dialog/src/dialogProps.mjs";
 import { drawerBodyInjectionKey } from "../../drawer/src/interface.mjs";
 import { popoverBodyInjectionKey } from "../../popover/src/interface.mjs";
+import { useDragModal } from "./composables.mjs";
 import { modalBodyInjectionKey, modalInjectionKey } from "./interface.mjs";
 import { presetProps } from "./presetProps.mjs";
 export default defineComponent({
   name: 'ModalBody',
   inheritAttrs: false,
+  slots: Object,
   props: Object.assign(Object.assign({
     show: {
       type: Boolean,
@@ -32,7 +34,11 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
-    blockScroll: Boolean
+    blockScroll: Boolean,
+    draggable: {
+      type: [Boolean, Object],
+      default: false
+    }
   }, presetProps), {
     renderMask: Function,
     // events
@@ -66,11 +72,35 @@ export default defineComponent({
     const displayedRef = ref(props.show);
     const transformOriginXRef = ref(null);
     const transformOriginYRef = ref(null);
+    const NModal = inject(modalInjectionKey);
+    let mousePosition = null;
+    watch(toRef(props, 'show'), value => {
+      if (value) {
+        mousePosition = NModal.getMousePosition();
+      }
+    }, {
+      immediate: true
+    });
+    const {
+      stopDrag,
+      startDrag,
+      draggableRef,
+      draggableClassRef
+    } = useDragModal(toRef(props, 'draggable'), {
+      onEnd: el => {
+        syncTransformOrigin(el);
+      }
+    });
+    const dialogTitleClassRef = computed(() => {
+      return normalizeClass([props.titleClass, draggableClassRef.value]);
+    });
+    const cardHeaderClassRef = computed(() => {
+      return normalizeClass([props.headerClass, draggableClassRef.value]);
+    });
     watch(toRef(props, 'show'), value => {
       if (value) displayedRef.value = true;
     });
     useLockHtmlScroll(computed(() => props.blockScroll && displayedRef.value));
-    const NModal = inject(modalInjectionKey);
     function styleTransformOrigin() {
       if (NModal.transformOriginRef.value === 'center') {
         return '';
@@ -93,7 +123,6 @@ export default defineComponent({
       if (NModal.transformOriginRef.value === 'center') {
         return;
       }
-      const mousePosition = NModal.getMousePosition();
       if (!mousePosition) {
         return;
       }
@@ -103,12 +132,10 @@ export default defineComponent({
         offsetLeft,
         offsetTop
       } = el;
-      if (mousePosition) {
-        const top = mousePosition.y;
-        const left = mousePosition.x;
-        transformOriginXRef.value = -(offsetLeft - left);
-        transformOriginYRef.value = -(offsetTop - top - scrollTop);
-      }
+      const top = mousePosition.y;
+      const left = mousePosition.x;
+      transformOriginXRef.value = -(offsetLeft - left);
+      transformOriginYRef.value = -(offsetTop - top - scrollTop);
       el.style.transformOrigin = styleTransformOrigin();
     }
     function handleEnter(el) {
@@ -120,10 +147,16 @@ export default defineComponent({
       el.style.transformOrigin = styleTransformOrigin();
       props.onBeforeLeave();
     }
+    function handleAfterEnter(el) {
+      const element = el;
+      draggableRef.value && startDrag(element);
+      props.onAfterEnter && props.onAfterEnter(element);
+    }
     function handleAfterLeave() {
       displayedRef.value = false;
       transformOriginXRef.value = null;
       transformOriginYRef.value = null;
+      stopDrag();
       props.onAfterLeave();
     }
     function handleCloseClick() {
@@ -161,11 +194,15 @@ export default defineComponent({
       mergedClsPrefix: NModal.mergedClsPrefixRef,
       bodyRef,
       scrollbarRef,
+      draggableClass: draggableClassRef,
       displayed: displayedRef,
       childNodeRef,
+      cardHeaderClass: cardHeaderClassRef,
+      dialogTitleClass: dialogTitleClassRef,
       handlePositiveClick,
       handleNegativeClick,
       handleCloseClick,
+      handleAfterEnter,
       handleAfterLeave,
       handleBeforeLeave,
       handleEnter
@@ -176,6 +213,7 @@ export default defineComponent({
       $slots,
       $attrs,
       handleEnter,
+      handleAfterEnter,
       handleAfterLeave,
       handleBeforeLeave,
       preset,
@@ -183,7 +221,9 @@ export default defineComponent({
     } = this;
     let childNode = null;
     if (!preset) {
-      childNode = getFirstSlotVNode($slots);
+      childNode = getFirstSlotVNodeWithTypedProps('default', $slots.default, {
+        draggableClass: this.draggableClass
+      });
       if (!childNode) {
         warn('modal', 'default slot is empty');
         return;
@@ -216,7 +256,7 @@ export default defineComponent({
               name: "fade-in-scale-up-transition",
               appear: (_a = this.appear) !== null && _a !== void 0 ? _a : this.isMounted,
               onEnter: handleEnter,
-              onAfterEnter: this.onAfterEnter,
+              onAfterEnter: handleAfterEnter,
               onAfterLeave: handleAfterLeave,
               onBeforeLeave: handleBeforeLeave
             }, {
@@ -236,6 +276,7 @@ export default defineComponent({
                   theme: this.mergedTheme.peers.Dialog,
                   themeOverrides: this.mergedTheme.peerOverrides.Dialog
                 }, keep(this.$props, dialogPropKeys), {
+                  titleClass: this.dialogTitleClass,
                   "aria-modal": "true"
                 }), $slots) : this.preset === 'card' ? h(NCard, Object.assign({}, this.$attrs, {
                   ref: "bodyRef",
@@ -243,6 +284,7 @@ export default defineComponent({
                   theme: this.mergedTheme.peers.Card,
                   themeOverrides: this.mergedTheme.peerOverrides.Card
                 }, keep(this.$props, cardBasePropKeys), {
+                  headerClass: this.cardHeaderClass,
                   "aria-modal": "true",
                   role: "dialog"
                 }), $slots) : this.childNodeRef = childNode, dirs);