naive-ui 2.35.0 → 2.37.0

package/es/dialog/src/Dialog.mjs

@@ -0,0 +1,212 @@
+import { h, defineComponent, computed } from 'vue';
+import { InfoIcon, SuccessIcon, WarningIcon, ErrorIcon } from "../../_internal/icons/index.mjs";
+import { useConfig, useRtl, useTheme, useThemeClass } from "../../_mixins/index.mjs";
+import { render, createKey, resolveWrappedSlot, resolveSlot } from "../../_utils/index.mjs";
+import { NBaseIcon, NBaseClose } from "../../_internal/index.mjs";
+import { NButton } from "../../button/index.mjs";
+import { dialogLight } from "../styles/index.mjs";
+import { dialogProps } from "./dialogProps.mjs";
+import style from "./styles/index.cssr.mjs";
+import { getMargin } from 'seemly';
+const iconRenderMap = {
+  default: () => h(InfoIcon, null),
+  info: () => h(InfoIcon, null),
+  success: () => h(SuccessIcon, null),
+  warning: () => h(WarningIcon, null),
+  error: () => h(ErrorIcon, null)
+};
+export const NDialog = defineComponent({
+  name: 'Dialog',
+  alias: ['NimbusConfirmCard',
+  // deprecated
+  'Confirm' // deprecated
+  ],
+  props: Object.assign(Object.assign({}, useTheme.props), dialogProps),
+  setup(props) {
+    const {
+      mergedComponentPropsRef,
+      mergedClsPrefixRef,
+      inlineThemeDisabled,
+      mergedRtlRef
+    } = useConfig(props);
+    const rtlEnabledRef = useRtl('Dialog', mergedRtlRef, mergedClsPrefixRef);
+    const mergedIconPlacementRef = computed(() => {
+      var _a, _b;
+      const {
+        iconPlacement
+      } = props;
+      return iconPlacement || ((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Dialog) === null || _b === void 0 ? void 0 : _b.iconPlacement) || 'left';
+    });
+    function handlePositiveClick(e) {
+      const {
+        onPositiveClick
+      } = props;
+      if (onPositiveClick) onPositiveClick(e);
+    }
+    function handleNegativeClick(e) {
+      const {
+        onNegativeClick
+      } = props;
+      if (onNegativeClick) onNegativeClick(e);
+    }
+    function handleCloseClick() {
+      const {
+        onClose
+      } = props;
+      if (onClose) onClose();
+    }
+    const themeRef = useTheme('Dialog', '-dialog', style, dialogLight, props, mergedClsPrefixRef);
+    const cssVarsRef = computed(() => {
+      const {
+        type
+      } = props;
+      const iconPlacement = mergedIconPlacementRef.value;
+      const {
+        common: {
+          cubicBezierEaseInOut
+        },
+        self: {
+          fontSize,
+          lineHeight,
+          border,
+          titleTextColor,
+          textColor,
+          color,
+          closeBorderRadius,
+          closeColorHover,
+          closeColorPressed,
+          closeIconColor,
+          closeIconColorHover,
+          closeIconColorPressed,
+          closeIconSize,
+          borderRadius,
+          titleFontWeight,
+          titleFontSize,
+          padding,
+          iconSize,
+          actionSpace,
+          contentMargin,
+          closeSize,
+          [iconPlacement === 'top' ? 'iconMarginIconTop' : 'iconMargin']: iconMargin,
+          [iconPlacement === 'top' ? 'closeMarginIconTop' : 'closeMargin']: closeMargin,
+          [createKey('iconColor', type)]: iconColor
+        }
+      } = themeRef.value;
+      const iconMarginDiscrete = getMargin(iconMargin);
+      return {
+        '--n-font-size': fontSize,
+        '--n-icon-color': iconColor,
+        '--n-bezier': cubicBezierEaseInOut,
+        '--n-close-margin': closeMargin,
+        '--n-icon-margin-top': iconMarginDiscrete.top,
+        '--n-icon-margin-right': iconMarginDiscrete.right,
+        '--n-icon-margin-bottom': iconMarginDiscrete.bottom,
+        '--n-icon-margin-left': iconMarginDiscrete.left,
+        '--n-icon-size': iconSize,
+        '--n-close-size': closeSize,
+        '--n-close-icon-size': closeIconSize,
+        '--n-close-border-radius': closeBorderRadius,
+        '--n-close-color-hover': closeColorHover,
+        '--n-close-color-pressed': closeColorPressed,
+        '--n-close-icon-color': closeIconColor,
+        '--n-close-icon-color-hover': closeIconColorHover,
+        '--n-close-icon-color-pressed': closeIconColorPressed,
+        '--n-color': color,
+        '--n-text-color': textColor,
+        '--n-border-radius': borderRadius,
+        '--n-padding': padding,
+        '--n-line-height': lineHeight,
+        '--n-border': border,
+        '--n-content-margin': contentMargin,
+        '--n-title-font-size': titleFontSize,
+        '--n-title-font-weight': titleFontWeight,
+        '--n-title-text-color': titleTextColor,
+        '--n-action-space': actionSpace
+      };
+    });
+    const themeClassHandle = inlineThemeDisabled ? useThemeClass('dialog', computed(() => `${props.type[0]}${mergedIconPlacementRef.value[0]}`), cssVarsRef, props) : undefined;
+    return {
+      mergedClsPrefix: mergedClsPrefixRef,
+      rtlEnabled: rtlEnabledRef,
+      mergedIconPlacement: mergedIconPlacementRef,
+      mergedTheme: themeRef,
+      handlePositiveClick,
+      handleNegativeClick,
+      handleCloseClick,
+      cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
+      themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
+      onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
+    };
+  },
+  render() {
+    var _a;
+    const {
+      bordered,
+      mergedIconPlacement,
+      cssVars,
+      closable,
+      showIcon,
+      title,
+      content,
+      action,
+      negativeText,
+      positiveText,
+      positiveButtonProps,
+      negativeButtonProps,
+      handlePositiveClick,
+      handleNegativeClick,
+      mergedTheme,
+      loading,
+      type,
+      mergedClsPrefix
+    } = this;
+    (_a = this.onRender) === null || _a === void 0 ? void 0 : _a.call(this);
+    const icon = showIcon ? h(NBaseIcon, {
+      clsPrefix: mergedClsPrefix,
+      class: `${mergedClsPrefix}-dialog__icon`
+    }, {
+      default: () => resolveWrappedSlot(this.$slots.icon, children => children || (this.icon ? render(this.icon) : iconRenderMap[this.type]()))
+    }) : null;
+    const actionNode = resolveWrappedSlot(this.$slots.action, children => children || positiveText || negativeText || action ? h("div", {
+      class: `${mergedClsPrefix}-dialog__action`
+    }, children || (action ? [render(action)] : [this.negativeText && h(NButton, Object.assign({
+      theme: mergedTheme.peers.Button,
+      themeOverrides: mergedTheme.peerOverrides.Button,
+      ghost: true,
+      size: "small",
+      onClick: handleNegativeClick
+    }, negativeButtonProps), {
+      default: () => render(this.negativeText)
+    }), this.positiveText && h(NButton, Object.assign({
+      theme: mergedTheme.peers.Button,
+      themeOverrides: mergedTheme.peerOverrides.Button,
+      size: "small",
+      type: type === 'default' ? 'primary' : type,
+      disabled: loading,
+      loading: loading,
+      onClick: handlePositiveClick
+    }, positiveButtonProps), {
+      default: () => render(this.positiveText)
+    })])) : null);
+    return h("div", {
+      class: [`${mergedClsPrefix}-dialog`, this.themeClass, this.closable && `${mergedClsPrefix}-dialog--closable`, `${mergedClsPrefix}-dialog--icon-${mergedIconPlacement}`, bordered && `${mergedClsPrefix}-dialog--bordered`, this.rtlEnabled && `${mergedClsPrefix}-dialog--rtl`],
+      style: cssVars,
+      role: "dialog"
+    }, closable ? resolveWrappedSlot(this.$slots.close, node => {
+      const classNames = [`${mergedClsPrefix}-dialog__close`, this.rtlEnabled && `${mergedClsPrefix}-dialog--rtl`];
+      return node ? h("div", {
+        class: classNames
+      }, node) : h(NBaseClose, {
+        clsPrefix: mergedClsPrefix,
+        class: classNames,
+        onClick: this.handleCloseClick
+      });
+    }) : null, showIcon && mergedIconPlacement === 'top' ? h("div", {
+      class: `${mergedClsPrefix}-dialog-icon-container`
+    }, icon) : null, h("div", {
+      class: `${mergedClsPrefix}-dialog__title`
+    }, showIcon && mergedIconPlacement === 'left' ? icon : null, resolveSlot(this.$slots.header, () => [render(title)])), h("div", {
+      class: [`${mergedClsPrefix}-dialog__content`, actionNode ? '' : `${mergedClsPrefix}-dialog__content--last`]
+    }, resolveSlot(this.$slots.default, () => [render(content)])), actionNode);
+  }
+});

package/es/dialog/src/DialogEnvironment.d.ts

@@ -177,8 +177,8 @@ export declare const NDialogEnvironment: import("vue").DefineComponent<{
     iconPlacement: PropType<import("./interface").IconPlacement>;
 }>>, {
     type: "default" | "error" | "info" | "success" | "warning";
-    autoFocus: boolean;
     loading: boolean;
+    autoFocus: boolean;
     bordered: boolean;
     showIcon: boolean;
     closable: boolean;

package/es/dialog/src/DialogEnvironment.mjs

@@ -0,0 +1,172 @@
+// use absolute path to make sure no circular ref of style
+// this -> modal-index -> modal-style
+import { h, defineComponent, ref } from 'vue';
+import NModal from "../../modal/src/Modal.mjs";
+import { keep } from "../../_utils/index.mjs";
+import { NDialog } from "./Dialog.mjs";
+import { dialogProps, dialogPropKeys } from "./dialogProps.mjs";
+export const exposedDialogEnvProps = Object.assign(Object.assign({}, dialogProps), {
+  onAfterEnter: Function,
+  onAfterLeave: Function,
+  transformOrigin: String,
+  blockScroll: {
+    type: Boolean,
+    default: true
+  },
+  closeOnEsc: {
+    type: Boolean,
+    default: true
+  },
+  onEsc: Function,
+  autoFocus: {
+    type: Boolean,
+    default: true
+  },
+  internalStyle: [String, Object],
+  maskClosable: {
+    type: Boolean,
+    default: true
+  },
+  onPositiveClick: Function,
+  onNegativeClick: Function,
+  onClose: Function,
+  onMaskClick: Function
+});
+export const NDialogEnvironment = defineComponent({
+  name: 'DialogEnvironment',
+  props: Object.assign(Object.assign({}, exposedDialogEnvProps), {
+    internalKey: {
+      type: String,
+      required: true
+    },
+    to: [String, Object],
+    // private
+    onInternalAfterLeave: {
+      type: Function,
+      required: true
+    }
+  }),
+  setup(props) {
+    const showRef = ref(true);
+    function handleAfterLeave() {
+      const {
+        onInternalAfterLeave,
+        internalKey,
+        onAfterLeave
+      } = props;
+      if (onInternalAfterLeave) onInternalAfterLeave(internalKey);
+      if (onAfterLeave) onAfterLeave();
+    }
+    function handlePositiveClick(e) {
+      const {
+        onPositiveClick
+      } = props;
+      if (onPositiveClick) {
+        void Promise.resolve(onPositiveClick(e)).then(result => {
+          if (result === false) return;
+          hide();
+        });
+      } else {
+        hide();
+      }
+    }
+    function handleNegativeClick(e) {
+      const {
+        onNegativeClick
+      } = props;
+      if (onNegativeClick) {
+        void Promise.resolve(onNegativeClick(e)).then(result => {
+          if (result === false) return;
+          hide();
+        });
+      } else {
+        hide();
+      }
+    }
+    function handleCloseClick() {
+      const {
+        onClose
+      } = props;
+      if (onClose) {
+        void Promise.resolve(onClose()).then(result => {
+          if (result === false) return;
+          hide();
+        });
+      } else {
+        hide();
+      }
+    }
+    function handleMaskClick(e) {
+      const {
+        onMaskClick,
+        maskClosable
+      } = props;
+      if (onMaskClick) {
+        onMaskClick(e);
+        maskClosable && hide();
+      }
+    }
+    function handleEsc() {
+      const {
+        onEsc
+      } = props;
+      if (onEsc) {
+        onEsc();
+      }
+    }
+    function hide() {
+      showRef.value = false;
+    }
+    function handleUpdateShow(value) {
+      showRef.value = value;
+    }
+    return {
+      show: showRef,
+      hide,
+      handleUpdateShow,
+      handleAfterLeave,
+      handleCloseClick,
+      handleNegativeClick,
+      handlePositiveClick,
+      handleMaskClick,
+      handleEsc
+    };
+  },
+  render() {
+    const {
+      handlePositiveClick,
+      handleUpdateShow,
+      handleNegativeClick,
+      handleCloseClick,
+      handleAfterLeave,
+      handleMaskClick,
+      handleEsc,
+      to,
+      maskClosable,
+      show
+    } = this;
+    return h(NModal, {
+      show: show,
+      onUpdateShow: handleUpdateShow,
+      onMaskClick: handleMaskClick,
+      onEsc: handleEsc,
+      to: to,
+      maskClosable: maskClosable,
+      onAfterEnter: this.onAfterEnter,
+      onAfterLeave: handleAfterLeave,
+      closeOnEsc: this.closeOnEsc,
+      blockScroll: this.blockScroll,
+      autoFocus: this.autoFocus,
+      transformOrigin: this.transformOrigin,
+      internalAppear: true,
+      internalDialog: true
+    }, {
+      default: () => h(NDialog, Object.assign({}, keep(this.$props, dialogPropKeys), {
+        style: this.internalStyle,
+        onClose: handleCloseClick,
+        onNegativeClick: handleNegativeClick,
+        onPositiveClick: handlePositiveClick
+      }))
+    });
+  }
+});

package/es/dialog/src/DialogProvider.d.ts

@@ -49,10 +49,10 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
         onAfterLeave?: (() => void) | undefined;
         title?: string | (() => import("vue").VNodeChild) | undefined;
         action?: (() => import("vue").VNodeChild) | undefined;
+        loading?: boolean | undefined;
         autoFocus?: boolean | undefined;
         positiveText?: string | undefined;
         negativeText?: string | undefined;
-        loading?: boolean | undefined;
         bordered?: boolean | undefined;
         showIcon?: boolean | undefined;
         closable?: boolean | undefined;
@@ -63,14 +63,15 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
             type?: import("../../button/src/interface").Type | undefined;
             tag?: keyof HTMLElementTagNameMap | undefined;
             block?: boolean | undefined;
+            size?: import("../../button/src/interface").Size | undefined;
             color?: string | undefined;
             round?: boolean | undefined;
             dashed?: boolean | undefined;
-            size?: import("../../button/src/interface").Size | undefined;
             text?: boolean | undefined;
             circle?: boolean | undefined;
             disabled?: boolean | undefined;
             onClick?: import("../../_utils").MaybeArray<(e: MouseEvent) => void> | undefined;
+            loading?: boolean | undefined;
             focusable?: boolean | undefined;
             strong?: boolean | undefined;
             themeOverrides?: {
@@ -385,7 +386,6 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
                     name: "common";
                 } | undefined;
             } | undefined;
-            loading?: boolean | undefined;
             bordered?: boolean | undefined;
             textColor?: string | undefined;
             renderIcon?: (() => import("vue").VNodeChild) | undefined;
@@ -402,14 +402,15 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
             type?: import("../../button/src/interface").Type | undefined;
             tag?: keyof HTMLElementTagNameMap | undefined;
             block?: boolean | undefined;
+            size?: import("../../button/src/interface").Size | undefined;
             color?: string | undefined;
             round?: boolean | undefined;
             dashed?: boolean | undefined;
-            size?: import("../../button/src/interface").Size | undefined;
             text?: boolean | undefined;
             circle?: boolean | undefined;
             disabled?: boolean | undefined;
             onClick?: import("../../_utils").MaybeArray<(e: MouseEvent) => void> | undefined;
+            loading?: boolean | undefined;
             focusable?: boolean | undefined;
             strong?: boolean | undefined;
             themeOverrides?: {
@@ -724,7 +725,6 @@ export declare const NDialogProvider: import("vue").DefineComponent<{
                     name: "common";
                 } | undefined;
             } | undefined;
-            loading?: boolean | undefined;
             bordered?: boolean | undefined;
             textColor?: string | undefined;
             renderIcon?: (() => import("vue").VNodeChild) | undefined;

package/es/dialog/src/DialogProvider.mjs

@@ -0,0 +1,81 @@
+import { defineComponent, Fragment, ref, h, provide, reactive } from 'vue';
+import { createId } from 'seemly';
+import { useClicked, useClickPosition } from 'vooks';
+import { omit } from "../../_utils/index.mjs";
+import { NDialogEnvironment } from "./DialogEnvironment.mjs";
+import { dialogApiInjectionKey, dialogProviderInjectionKey, dialogReactiveListInjectionKey } from "./context.mjs";
+export const dialogProviderProps = {
+  injectionKey: String,
+  to: [String, Object]
+};
+export const NDialogProvider = defineComponent({
+  name: 'DialogProvider',
+  props: dialogProviderProps,
+  setup() {
+    const dialogListRef = ref([]);
+    const dialogInstRefs = {};
+    function create(options = {}) {
+      const key = createId();
+      const dialogReactive = reactive(Object.assign(Object.assign({}, options), {
+        key,
+        destroy: () => {
+          dialogInstRefs[`n-dialog-${key}`].hide();
+        }
+      }));
+      dialogListRef.value.push(dialogReactive);
+      return dialogReactive;
+    }
+    const typedApi = ['info', 'success', 'warning', 'error'].map(type => options => {
+      return create(Object.assign(Object.assign({}, options), {
+        type
+      }));
+    });
+    function handleAfterLeave(key) {
+      const {
+        value: dialogList
+      } = dialogListRef;
+      dialogList.splice(dialogList.findIndex(dialog => dialog.key === key), 1);
+    }
+    function destroyAll() {
+      Object.values(dialogInstRefs).forEach(dialogInstRef => {
+        dialogInstRef.hide();
+      });
+    }
+    const api = {
+      create,
+      destroyAll,
+      info: typedApi[0],
+      success: typedApi[1],
+      warning: typedApi[2],
+      error: typedApi[3]
+    };
+    provide(dialogApiInjectionKey, api);
+    provide(dialogProviderInjectionKey, {
+      clickedRef: useClicked(64),
+      clickPositionRef: useClickPosition()
+    });
+    provide(dialogReactiveListInjectionKey, dialogListRef);
+    return Object.assign(Object.assign({}, api), {
+      dialogList: dialogListRef,
+      dialogInstRefs,
+      handleAfterLeave
+    });
+  },
+  render() {
+    var _a, _b;
+    return h(Fragment, null, [this.dialogList.map(dialog => h(NDialogEnvironment, omit(dialog, ['destroy', 'style'], {
+      internalStyle: dialog.style,
+      to: this.to,
+      ref: inst => {
+        if (inst === null) {
+          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+          delete this.dialogInstRefs[`n-dialog-${dialog.key}`];
+        } else {
+          this.dialogInstRefs[`n-dialog-${dialog.key}`] = inst;
+        }
+      },
+      internalKey: dialog.key,
+      onInternalAfterLeave: this.handleAfterLeave
+    }))), (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a)]);
+  }
+});

package/es/dialog/src/composables.mjs

@@ -0,0 +1,17 @@
+import { inject } from 'vue';
+import { dialogApiInjectionKey, dialogReactiveListInjectionKey } from "./context.mjs";
+import { throwError } from "../../_utils/index.mjs";
+export function useDialog() {
+  const dialog = inject(dialogApiInjectionKey, null);
+  if (dialog === null) {
+    throwError('use-dialog', 'No outer <n-dialog-provider /> founded.');
+  }
+  return dialog;
+}
+export function useDialogReactiveList() {
+  const dialogReactiveList = inject(dialogReactiveListInjectionKey, null);
+  if (dialogReactiveList === null) {
+    throwError('use-dialog-reactive-list', 'No outer <n-dialog-provider /> founded.');
+  }
+  return dialogReactiveList;
+}

package/es/dialog/src/context.mjs

@@ -0,0 +1,4 @@
+import { createInjectionKey } from "../../_utils/index.mjs";
+export const dialogProviderInjectionKey = createInjectionKey('n-dialog-provider');
+export const dialogApiInjectionKey = createInjectionKey('n-dialog-api');
+export const dialogReactiveListInjectionKey = createInjectionKey('n-dialog-reactive-list');

package/es/dialog/src/dialogProps.d.ts

@@ -32,4 +32,4 @@ declare const dialogProps: {
 };
 export type DialogProps = ExtractPublicPropTypes<typeof dialogProps>;
 export { dialogProps };
-export declare const dialogPropKeys: ("type" | "content" | "icon" | "title" | "action" | "positiveText" | "negativeText" | "loading" | "bordered" | "showIcon" | "closable" | "onClose" | "iconPlacement" | "positiveButtonProps" | "negativeButtonProps" | "onPositiveClick" | "onNegativeClick")[];
+export declare const dialogPropKeys: ("type" | "content" | "icon" | "title" | "action" | "loading" | "positiveText" | "negativeText" | "bordered" | "showIcon" | "closable" | "onClose" | "iconPlacement" | "positiveButtonProps" | "negativeButtonProps" | "onPositiveClick" | "onNegativeClick")[];

package/es/dialog/src/dialogProps.mjs

@@ -0,0 +1,31 @@
+import { keysOf } from "../../_utils/index.mjs";
+const dialogProps = {
+  icon: Function,
+  type: {
+    type: String,
+    default: 'default'
+  },
+  title: [String, Function],
+  closable: {
+    type: Boolean,
+    default: true
+  },
+  negativeText: String,
+  positiveText: String,
+  positiveButtonProps: Object,
+  negativeButtonProps: Object,
+  content: [String, Function],
+  action: Function,
+  showIcon: {
+    type: Boolean,
+    default: true
+  },
+  loading: Boolean,
+  bordered: Boolean,
+  iconPlacement: String,
+  onPositiveClick: Function,
+  onNegativeClick: Function,
+  onClose: Function
+};
+export { dialogProps };
+export const dialogPropKeys = keysOf(dialogProps);

package/es/dialog/src/interface.mjs

@@ -0,0 +1 @@
+export {};