@element-plus/nightly 0.0.20250908 → 0.0.20250909

package/es/components/color-picker-panel/src/color-picker-panel2.mjs

@@ -1,123 +1,29 @@
-import { defineComponent, ref, inject, onMounted, nextTick, watch, provide, computed, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createVNode, createBlock, createCommentVNode, renderSlot } from 'vue';
-import { ElInput } from '../../input/index.mjs';
-import AlphaSlider from './components/alpha-slider.mjs';
-import HueSlider from './components/hue-slider.mjs';
-import Predefine from './components/predefine.mjs';
-import SvPanel from './components/sv-panel.mjs';
-import { colorPickerPanelProps, colorPickerPanelEmits, ROOT_COMMON_COLOR_INJECTION_KEY, colorPickerPanelContextKey } from './color-picker-panel.mjs';
-import { useCommonColor } from './composables/use-common-color.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { useFormDisabled } from '../../form/src/hooks/use-form-common-props.mjs';
+import { isNil } from 'lodash-unified';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
 import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
+import { isString } from '@vue/shared';
 
-const __default__ = defineComponent({
-  name: "ElColorPickerPanel"
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: colorPickerPanelProps,
-  emits: colorPickerPanelEmits,
-  setup(__props, { expose, emit }) {
-    const props = __props;
-    const ns = useNamespace("color-picker-panel");
-    const disabled = useFormDisabled();
-    const hue = ref();
-    const sv = ref();
-    const alpha = ref();
-    const inputRef = ref();
-    const customInput = ref("");
-    const { color } = inject(ROOT_COMMON_COLOR_INJECTION_KEY, () => useCommonColor(props, emit), true);
-    function handleConfirm() {
-      color.fromString(customInput.value);
-      if (color.value !== customInput.value) {
-        customInput.value = color.value;
-      }
-    }
-    onMounted(() => {
-      if (props.modelValue) {
-        customInput.value = color.value;
-      }
-      nextTick(() => {
-        var _a, _b, _c;
-        (_a = hue.value) == null ? void 0 : _a.update();
-        (_b = sv.value) == null ? void 0 : _b.update();
-        (_c = alpha.value) == null ? void 0 : _c.update();
-      });
-    });
-    watch(() => props.modelValue, (newVal) => {
-      if (newVal && newVal !== color.value) {
-        color.fromString(newVal);
-      }
-    });
-    watch(() => color.value, (val) => {
-      emit(UPDATE_MODEL_EVENT, val);
-      customInput.value = val;
-    });
-    provide(colorPickerPanelContextKey, {
-      currentColor: computed(() => color.value)
-    });
-    expose({
-      color,
-      inputRef
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass([unref(ns).b(), unref(ns).is("disabled", unref(disabled)), unref(ns).is("border", _ctx.border)])
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(unref(ns).e("wrapper"))
-        }, [
-          createVNode(HueSlider, {
-            ref_key: "hue",
-            ref: hue,
-            class: "hue-slider",
-            color: unref(color),
-            vertical: "",
-            disabled: unref(disabled)
-          }, null, 8, ["color", "disabled"]),
-          createVNode(SvPanel, {
-            ref_key: "sv",
-            ref: sv,
-            color: unref(color),
-            disabled: unref(disabled)
-          }, null, 8, ["color", "disabled"])
-        ], 2),
-        _ctx.showAlpha ? (openBlock(), createBlock(AlphaSlider, {
-          key: 0,
-          ref_key: "alpha",
-          ref: alpha,
-          color: unref(color),
-          disabled: unref(disabled)
-        }, null, 8, ["color", "disabled"])) : createCommentVNode("v-if", true),
-        _ctx.predefine ? (openBlock(), createBlock(Predefine, {
-          key: 1,
-          ref: "predefine",
-          "enable-alpha": _ctx.showAlpha,
-          color: unref(color),
-          colors: _ctx.predefine,
-          disabled: unref(disabled)
-        }, null, 8, ["enable-alpha", "color", "colors", "disabled"])) : createCommentVNode("v-if", true),
-        createElementVNode("div", {
-          class: normalizeClass(unref(ns).e("footer"))
-        }, [
-          createVNode(unref(ElInput), {
-            ref_key: "inputRef",
-            ref: inputRef,
-            modelValue: customInput.value,
-            "onUpdate:modelValue": ($event) => customInput.value = $event,
-            "validate-event": false,
-            size: "small",
-            disabled: unref(disabled),
-            onChange: handleConfirm
-          }, null, 8, ["modelValue", "onUpdate:modelValue", "disabled"]),
-          renderSlot(_ctx.$slots, "footer")
-        ], 2)
-      ], 2);
-    };
+const colorPickerPanelProps = buildProps({
+  modelValue: {
+    type: definePropType(String),
+    default: void 0
+  },
+  border: {
+    type: Boolean,
+    default: true
+  },
+  showAlpha: Boolean,
+  colorFormat: String,
+  disabled: Boolean,
+  predefine: {
+    type: definePropType(Array)
   }
 });
-var ColorPickerPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "color-picker-panel.vue"]]);
+const colorPickerPanelEmits = {
+  [UPDATE_MODEL_EVENT]: (val) => isString(val) || isNil(val)
+};
+const ROOT_COMMON_COLOR_INJECTION_KEY = Symbol("colorCommonPickerKey");
+const colorPickerPanelContextKey = Symbol("colorPickerPanelContextKey");
 
-export { ColorPickerPanel as default };
+export { ROOT_COMMON_COLOR_INJECTION_KEY, colorPickerPanelContextKey, colorPickerPanelEmits, colorPickerPanelProps };
 //# sourceMappingURL=color-picker-panel2.mjs.map

package/es/components/color-picker-panel/src/color-picker-panel2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-picker-panel2.mjs","sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.vue"],"sourcesContent":["<template>\n  <div :class=\"[ns.b(), ns.is('disabled', disabled), ns.is('border', border)]\">\n    <div :class=\"ns.e('wrapper')\">\n      <hue-slider\n        ref=\"hue\"\n        class=\"hue-slider\"\n        :color=\"color\"\n        vertical\n        :disabled=\"disabled\"\n      />\n      <sv-panel ref=\"sv\" :color=\"color\" :disabled=\"disabled\" />\n    </div>\n    <alpha-slider\n      v-if=\"showAlpha\"\n      ref=\"alpha\"\n      :color=\"color\"\n      :disabled=\"disabled\"\n    />\n    <predefine\n      v-if=\"predefine\"\n      ref=\"predefine\"\n      :enable-alpha=\"showAlpha\"\n      :color=\"color\"\n      :colors=\"predefine\"\n      :disabled=\"disabled\"\n    />\n    <div :class=\"ns.e('footer')\">\n      <el-input\n        ref=\"inputRef\"\n        v-model=\"customInput\"\n        :validate-event=\"false\"\n        size=\"small\"\n        :disabled=\"disabled\"\n        @change=\"handleConfirm\"\n      />\n      <slot name=\"footer\" />\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, nextTick, onMounted, provide, ref, watch } from 'vue'\nimport { ElInput } from '@element-plus/components/input'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { useNamespace } from '@element-plus/hooks'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport AlphaSlider from './components/alpha-slider.vue'\nimport HueSlider from './components/hue-slider.vue'\nimport Predefine from './components/predefine.vue'\nimport SvPanel from './components/sv-panel.vue'\nimport {\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  colorPickerPanelContextKey,\n  colorPickerPanelEmits,\n  colorPickerPanelProps,\n} from './color-picker-panel'\nimport { useCommonColor } from './composables/use-common-color'\n\nimport type { InputInstance } from '@element-plus/components/input'\n\ndefineOptions({\n  name: 'ElColorPickerPanel',\n})\nconst props = defineProps(colorPickerPanelProps)\nconst emit = defineEmits(colorPickerPanelEmits)\n\nconst ns = useNamespace('color-picker-panel')\nconst disabled = useFormDisabled()\nconst hue = ref<InstanceType<typeof HueSlider>>()\nconst sv = ref<InstanceType<typeof SvPanel>>()\nconst alpha = ref<InstanceType<typeof AlphaSlider>>()\nconst inputRef = ref<InputInstance>()\nconst customInput = ref('')\n\nconst { color } = inject(\n  ROOT_COMMON_COLOR_INJECTION_KEY,\n  () => useCommonColor(props, emit),\n  true\n)\n\nfunction handleConfirm() {\n  color.fromString(customInput.value)\n  if (color.value !== customInput.value) {\n    customInput.value = color.value\n  }\n}\n\nonMounted(() => {\n  if (props.modelValue) {\n    customInput.value = color.value\n  }\n  nextTick(() => {\n    hue.value?.update()\n    sv.value?.update()\n    alpha.value?.update()\n  })\n})\n\nwatch(\n  () => props.modelValue,\n  (newVal) => {\n    if (newVal && newVal !== color.value) {\n      color.fromString(newVal)\n    }\n  }\n)\n\nwatch(\n  () => color.value,\n  (val) => {\n    emit(UPDATE_MODEL_EVENT, val)\n    customInput.value = val\n  }\n)\n\nprovide(colorPickerPanelContextKey, {\n  currentColor: computed(() => color.value),\n})\n\ndefineExpose({\n  /**\n   * @description current color object\n   */\n  color,\n  /**\n   * @description custom input ref\n   */\n  inputRef,\n})\n</script>\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createVNode"],"mappings":"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"}
+{"version":3,"file":"color-picker-panel2.mjs","sources":["../../../../../../packages/components/color-picker-panel/src/color-picker-panel.ts"],"sourcesContent":["import { isNil } from 'lodash-unified'\nimport { buildProps, definePropType, isString } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\n\nimport type {\n  ComputedRef,\n  ExtractPropTypes,\n  InjectionKey,\n  __ExtractPublicPropTypes,\n} from 'vue'\nimport type ColorPickerPanel from './color-picker-panel.vue'\nimport type Color from './utils/color'\n\nexport const colorPickerPanelProps = buildProps({\n  /**\n   * @description binding value\n   */\n  modelValue: {\n    type: definePropType<string | null>(String),\n    default: undefined,\n  },\n  /**\n   * @description whether the color picker is bordered\n   */\n  border: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether to display the alpha slider\n   */\n  showAlpha: Boolean,\n  /**\n   * @description color format of v-model\n   */\n  colorFormat: String,\n  /**\n   * @description whether to disable the color picker\n   */\n  disabled: Boolean,\n  /**\n   * @description predefined color options\n   */\n  predefine: {\n    type: definePropType<string[]>(Array),\n  },\n} as const)\nexport const colorPickerPanelEmits = {\n  [UPDATE_MODEL_EVENT]: (val: string | null) => isString(val) || isNil(val),\n}\n\nexport type ColorPickerPanelProps = ExtractPropTypes<\n  typeof colorPickerPanelProps\n>\nexport type ColorPickerPanelPropsPublic = __ExtractPublicPropTypes<\n  typeof colorPickerPanelProps\n>\nexport type ColorPickerPanelEmits = typeof colorPickerPanelEmits\nexport type ColorPickerPanelInstance = InstanceType<typeof ColorPickerPanel> &\n  unknown\n\nexport interface ColorPickerPanelContext {\n  currentColor: ComputedRef<string>\n}\n\nexport interface CommonColorContext {\n  color: Color\n}\n\nexport const ROOT_COMMON_COLOR_INJECTION_KEY: InjectionKey<CommonColorContext> =\n  Symbol('colorCommonPickerKey')\nexport const colorPickerPanelContextKey: InjectionKey<ColorPickerPanelContext> =\n  Symbol('colorPickerPanelContextKey')\n"],"names":[],"mappings":";;;;;AAGY,MAAC,qBAAqB,GAAG,UAAU,CAAC;AAChD,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,WAAW,EAAE,MAAM;AACrB,EAAE,QAAQ,EAAE,OAAO;AACnB,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,GAAG;AACH,CAAC,EAAE;AACS,MAAC,qBAAqB,GAAG;AACrC,EAAE,CAAC,kBAAkB,GAAG,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,GAAG,CAAC;AAC5D,EAAE;AACU,MAAC,+BAA+B,GAAG,MAAM,CAAC,sBAAsB,EAAE;AAClE,MAAC,0BAA0B,GAAG,MAAM,CAAC,4BAA4B;;;;"}

package/es/components/color-picker-panel/src/components/predefine.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, inject, ref, watch, watchEffect, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle } from 'vue';
-import { colorPickerPanelContextKey } from '../color-picker-panel.mjs';
+import { colorPickerPanelContextKey } from '../color-picker-panel2.mjs';
 import Color from '../utils/color.mjs';
 import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
 import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';

package/es/components/dialog/index.mjs

@@ -1,6 +1,6 @@
-import Dialog from './src/dialog.mjs';
+import Dialog from './src/dialog2.mjs';
 export { useDialog } from './src/use-dialog.mjs';
-export { dialogContextKey, dialogEmits, dialogProps } from './src/dialog2.mjs';
+export { dialogContextKey, dialogEmits, dialogProps } from './src/dialog.mjs';
 export { DEFAULT_DIALOG_TRANSITION, dialogInjectionKey } from './src/constants.mjs';
 import { withInstall } from '../../utils/vue/install.mjs';
 

package/es/components/dialog/src/dialog.mjs

@@ -1,179 +1,79 @@
-import { defineComponent, useSlots, computed, ref, provide, openBlock, createBlock, unref, withCtx, createVNode, Transition, mergeProps, withDirectives, createElementVNode, normalizeClass, normalizeStyle, createSlots, renderSlot, createCommentVNode, vShow } from 'vue';
-import { ElOverlay } from '../../overlay/index.mjs';
-import ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';
-import { ElTeleport } from '../../teleport/index.mjs';
-import ElDialogContent from './dialog-content2.mjs';
-import { dialogInjectionKey } from './constants.mjs';
-import { dialogProps, dialogEmits } from './dialog2.mjs';
-import { useDialog } from './use-dialog.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { useDeprecated } from '../../../hooks/use-deprecated/index.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { useSameTarget } from '../../../hooks/use-same-target/index.mjs';
+import { dialogContentProps } from './dialog-content.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { teleportProps } from '../../teleport/src/teleport.mjs';
+import { UPDATE_MODEL_EVENT } from '../../../constants/event.mjs';
+import { isBoolean } from '../../../utils/types.mjs';
 
-const __default__ = defineComponent({
-  name: "ElDialog",
-  inheritAttrs: false
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: dialogProps,
-  emits: dialogEmits,
-  setup(__props, { expose }) {
-    const props = __props;
-    const slots = useSlots();
-    useDeprecated({
-      scope: "el-dialog",
-      from: "the title slot",
-      replacement: "the header slot",
-      version: "3.0.0",
-      ref: "https://element-plus.org/en-US/component/dialog.html#slots"
-    }, computed(() => !!slots.title));
-    const ns = useNamespace("dialog");
-    const dialogRef = ref();
-    const headerRef = ref();
-    const dialogContentRef = ref();
-    const {
-      visible,
-      titleId,
-      bodyId,
-      style,
-      overlayDialogStyle,
-      rendered,
-      transitionConfig,
-      zIndex,
-      _draggable,
-      _alignCenter,
-      _overflow,
-      handleClose,
-      onModalClick,
-      onOpenAutoFocus,
-      onCloseAutoFocus,
-      onCloseRequested,
-      onFocusoutPrevented
-    } = useDialog(props, dialogRef);
-    provide(dialogInjectionKey, {
-      dialogRef,
-      headerRef,
-      bodyId,
-      ns,
-      rendered,
-      style
-    });
-    const overlayEvent = useSameTarget(onModalClick);
-    const penetrable = computed(() => props.modalPenetrable && !props.modal && !props.fullscreen);
-    const resetPosition = () => {
-      var _a;
-      (_a = dialogContentRef.value) == null ? void 0 : _a.resetPosition();
-    };
-    expose({
-      visible,
-      dialogContentRef,
-      resetPosition,
-      handleClose
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(ElTeleport), {
-        to: _ctx.appendTo,
-        disabled: _ctx.appendTo !== "body" ? false : !_ctx.appendToBody
-      }, {
-        default: withCtx(() => [
-          createVNode(Transition, mergeProps(unref(transitionConfig), { persisted: "" }), {
-            default: withCtx(() => {
-              var _a;
-              return [
-                withDirectives(createVNode(unref(ElOverlay), {
-                  "custom-mask-event": "",
-                  mask: _ctx.modal,
-                  "overlay-class": [
-                    (_a = _ctx.modalClass) != null ? _a : "",
-                    `${unref(ns).namespace.value}-modal-dialog`,
-                    unref(ns).is("penetrable", unref(penetrable))
-                  ],
-                  "z-index": unref(zIndex)
-                }, {
-                  default: withCtx(() => [
-                    createElementVNode("div", {
-                      role: "dialog",
-                      "aria-modal": "true",
-                      "aria-label": _ctx.title || void 0,
-                      "aria-labelledby": !_ctx.title ? unref(titleId) : void 0,
-                      "aria-describedby": unref(bodyId),
-                      class: normalizeClass(`${unref(ns).namespace.value}-overlay-dialog`),
-                      style: normalizeStyle(unref(overlayDialogStyle)),
-                      onClick: unref(overlayEvent).onClick,
-                      onMousedown: unref(overlayEvent).onMousedown,
-                      onMouseup: unref(overlayEvent).onMouseup
-                    }, [
-                      createVNode(unref(ElFocusTrap), {
-                        loop: "",
-                        trapped: unref(visible),
-                        "focus-start-el": "container",
-                        onFocusAfterTrapped: unref(onOpenAutoFocus),
-                        onFocusAfterReleased: unref(onCloseAutoFocus),
-                        onFocusoutPrevented: unref(onFocusoutPrevented),
-                        onReleaseRequested: unref(onCloseRequested)
-                      }, {
-                        default: withCtx(() => [
-                          unref(rendered) ? (openBlock(), createBlock(ElDialogContent, mergeProps({
-                            key: 0,
-                            ref_key: "dialogContentRef",
-                            ref: dialogContentRef
-                          }, _ctx.$attrs, {
-                            center: _ctx.center,
-                            "align-center": unref(_alignCenter),
-                            "close-icon": _ctx.closeIcon,
-                            draggable: unref(_draggable),
-                            overflow: unref(_overflow),
-                            fullscreen: _ctx.fullscreen,
-                            "header-class": _ctx.headerClass,
-                            "body-class": _ctx.bodyClass,
-                            "footer-class": _ctx.footerClass,
-                            "show-close": _ctx.showClose,
-                            title: _ctx.title,
-                            "aria-level": _ctx.headerAriaLevel,
-                            onClose: unref(handleClose)
-                          }), createSlots({
-                            header: withCtx(() => [
-                              !_ctx.$slots.title ? renderSlot(_ctx.$slots, "header", {
-                                key: 0,
-                                close: unref(handleClose),
-                                titleId: unref(titleId),
-                                titleClass: unref(ns).e("title")
-                              }) : renderSlot(_ctx.$slots, "title", { key: 1 })
-                            ]),
-                            default: withCtx(() => [
-                              renderSlot(_ctx.$slots, "default")
-                            ]),
-                            _: 2
-                          }, [
-                            _ctx.$slots.footer ? {
-                              name: "footer",
-                              fn: withCtx(() => [
-                                renderSlot(_ctx.$slots, "footer")
-                              ])
-                            } : void 0
-                          ]), 1040, ["center", "align-center", "close-icon", "draggable", "overflow", "fullscreen", "header-class", "body-class", "footer-class", "show-close", "title", "aria-level", "onClose"])) : createCommentVNode("v-if", true)
-                        ]),
-                        _: 3
-                      }, 8, ["trapped", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusoutPrevented", "onReleaseRequested"])
-                    ], 46, ["aria-label", "aria-labelledby", "aria-describedby", "onClick", "onMousedown", "onMouseup"])
-                  ]),
-                  _: 3
-                }, 8, ["mask", "overlay-class", "z-index"]), [
-                  [vShow, unref(visible)]
-                ])
-              ];
-            }),
-            _: 3
-          }, 16)
-        ]),
-        _: 3
-      }, 8, ["to", "disabled"]);
-    };
+const dialogProps = buildProps({
+  ...dialogContentProps,
+  appendToBody: Boolean,
+  appendTo: {
+    type: teleportProps.to.type,
+    default: "body"
+  },
+  beforeClose: {
+    type: definePropType(Function)
+  },
+  destroyOnClose: Boolean,
+  closeOnClickModal: {
+    type: Boolean,
+    default: true
+  },
+  closeOnPressEscape: {
+    type: Boolean,
+    default: true
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  modal: {
+    type: Boolean,
+    default: true
+  },
+  modalPenetrable: Boolean,
+  openDelay: {
+    type: Number,
+    default: 0
+  },
+  closeDelay: {
+    type: Number,
+    default: 0
+  },
+  top: {
+    type: String
+  },
+  modelValue: Boolean,
+  modalClass: String,
+  headerClass: String,
+  bodyClass: String,
+  footerClass: String,
+  width: {
+    type: [String, Number]
+  },
+  zIndex: {
+    type: Number
+  },
+  trapFocus: Boolean,
+  headerAriaLevel: {
+    type: String,
+    default: "2"
+  },
+  transition: {
+    type: definePropType([String, Object]),
+    default: void 0
   }
 });
-var Dialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "dialog.vue"]]);
+const dialogEmits = {
+  open: () => true,
+  opened: () => true,
+  close: () => true,
+  closed: () => true,
+  [UPDATE_MODEL_EVENT]: (value) => isBoolean(value),
+  openAutoFocus: () => true,
+  closeAutoFocus: () => true
+};
+const dialogContextKey = Symbol("dialogContextKey");
 
-export { Dialog as default };
+export { dialogContextKey, dialogEmits, dialogProps };
 //# sourceMappingURL=dialog.mjs.map

package/es/components/dialog/src/dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.mjs","sources":["../../../../../../packages/components/dialog/src/dialog.vue"],"sourcesContent":["<template>\n  <el-teleport\n    :to=\"appendTo\"\n    :disabled=\"appendTo !== 'body' ? false : !appendToBody\"\n  >\n    <transition v-bind=\"transitionConfig\">\n      <el-overlay\n        v-show=\"visible\"\n        custom-mask-event\n        :mask=\"modal\"\n        :overlay-class=\"[\n          modalClass ?? '',\n          `${ns.namespace.value}-modal-dialog`,\n          ns.is('penetrable', penetrable),\n        ]\"\n        :z-index=\"zIndex\"\n      >\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-label=\"title || undefined\"\n          :aria-labelledby=\"!title ? titleId : undefined\"\n          :aria-describedby=\"bodyId\"\n          :class=\"`${ns.namespace.value}-overlay-dialog`\"\n          :style=\"overlayDialogStyle\"\n          @click=\"overlayEvent.onClick\"\n          @mousedown=\"overlayEvent.onMousedown\"\n          @mouseup=\"overlayEvent.onMouseup\"\n        >\n          <el-focus-trap\n            loop\n            :trapped=\"visible\"\n            focus-start-el=\"container\"\n            @focus-after-trapped=\"onOpenAutoFocus\"\n            @focus-after-released=\"onCloseAutoFocus\"\n            @focusout-prevented=\"onFocusoutPrevented\"\n            @release-requested=\"onCloseRequested\"\n          >\n            <el-dialog-content\n              v-if=\"rendered\"\n              ref=\"dialogContentRef\"\n              v-bind=\"$attrs\"\n              :center=\"center\"\n              :align-center=\"_alignCenter\"\n              :close-icon=\"closeIcon\"\n              :draggable=\"_draggable\"\n              :overflow=\"_overflow\"\n              :fullscreen=\"fullscreen\"\n              :header-class=\"headerClass\"\n              :body-class=\"bodyClass\"\n              :footer-class=\"footerClass\"\n              :show-close=\"showClose\"\n              :title=\"title\"\n              :aria-level=\"headerAriaLevel\"\n              @close=\"handleClose\"\n            >\n              <template #header>\n                <slot\n                  v-if=\"!$slots.title\"\n                  name=\"header\"\n                  :close=\"handleClose\"\n                  :title-id=\"titleId\"\n                  :title-class=\"ns.e('title')\"\n                />\n                <slot v-else name=\"title\" />\n              </template>\n              <slot />\n              <template v-if=\"$slots.footer\" #footer>\n                <slot name=\"footer\" />\n              </template>\n            </el-dialog-content>\n          </el-focus-trap>\n        </div>\n      </el-overlay>\n    </transition>\n  </el-teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, useSlots } from 'vue'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport { useDeprecated, useNamespace, useSameTarget } from '@element-plus/hooks'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport ElTeleport from '@element-plus/components/teleport'\nimport ElDialogContent from './dialog-content.vue'\nimport { dialogInjectionKey } from './constants'\nimport { dialogEmits, dialogProps } from './dialog'\nimport { useDialog } from './use-dialog'\n\ndefineOptions({\n  name: 'ElDialog',\n  inheritAttrs: false,\n})\n\nconst props = defineProps(dialogProps)\ndefineEmits(dialogEmits)\nconst slots = useSlots()\n\nuseDeprecated(\n  {\n    scope: 'el-dialog',\n    from: 'the title slot',\n    replacement: 'the header slot',\n    version: '3.0.0',\n    ref: 'https://element-plus.org/en-US/component/dialog.html#slots',\n  },\n  computed(() => !!slots.title)\n)\n\nconst ns = useNamespace('dialog')\nconst dialogRef = ref<HTMLElement>()\nconst headerRef = ref<HTMLElement>()\nconst dialogContentRef = ref()\n\nconst {\n  visible,\n  titleId,\n  bodyId,\n  style,\n  overlayDialogStyle,\n  rendered,\n  transitionConfig,\n  zIndex,\n  _draggable,\n  _alignCenter,\n  _overflow,\n  handleClose,\n  onModalClick,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onCloseRequested,\n  onFocusoutPrevented,\n} = useDialog(props, dialogRef)\n\nprovide(dialogInjectionKey, {\n  dialogRef,\n  headerRef,\n  bodyId,\n  ns,\n  rendered,\n  style,\n})\n\nconst overlayEvent = useSameTarget(onModalClick)\n\nconst penetrable = computed(\n  () => props.modalPenetrable && !props.modal && !props.fullscreen\n)\n\nconst resetPosition = () => {\n  dialogContentRef.value?.resetPosition()\n}\n\ndefineExpose({\n  /** @description whether the dialog is visible */\n  visible,\n  dialogContentRef,\n  resetPosition,\n  handleClose,\n})\n</script>\n"],"names":["_openBlock","_createBlock","_unref"],"mappings":";;;;;;;;;;;;;mCAyFc,CAAA;AAAA,EACZ,IAAM,EAAA,UAAA;AAAA,EACN,YAAc,EAAA,KAAA;AAChB,CAAA,CAAA,CAAA;;;;;;;AAIA,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AAEvB,IAAA,aAAA,CAAA;AAAA,MACE,KAAA,EAAA,WAAA;AAAA,MAAA,IACS,EAAA,gBAAA;AAAA,MAAA,WACD,EAAA,iBAAA;AAAA,MAAA,OACO,EAAA,OAAA;AAAA,MAAA,GACJ,EAAA,4DAAA;AAAA,KAAA,EAAA,QACJ,CAAA,MAAA,CAAA,CAAA,KAAA,CAAA,KAAA,CAAA,CAAA,CAAA;AAAA,IACP,MAAA,EAAA,GAAA,YAAA,CAAA,QAAA,CAAA,CAAA;AAAA,IAAA,MACS,SAAA,GAAO;AAAY,IAC9B,MAAA,SAAA,GAAA,GAAA,EAAA,CAAA;AAEA,IAAM,MAAA,mBAA0B,GAAA,EAAA,CAAA;AAChC,IAAA,MAAM;AACN,MAAA;AACA,MAAA;AAEA,MAAM,MAAA;AAAA,MACJ,KAAA;AAAA,MACA,kBAAA;AAAA,MACA,QAAA;AAAA,MACA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,MACA,gBAAA;AAAA,MACA,gBAAA;AAAA,MACA,mBAAA;AAAA,KACA,GAAA,SAAA,CAAA,KAAA,EAAA,SAAA,CAAA,CAAA;AAAA,IACA,OAAA,CAAA,kBAAA,EAAA;AAAA,MACA,SAAA;AAAA,MACF,SAAc;AAEd,MAAA,MAAQ;AAAoB,MAC1B,EAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,KACA,CAAA,CAAA;AAAA,IACA,MAAA,YAAA,GAAA,aAAA,CAAA,YAAA,CAAA,CAAA;AAAA,IACA,MAAA,UAAA,GAAA,QAAA,CAAA,MAAA,KAAA,CAAA,eAAA,IAAA,CAAA,KAAA,CAAA,KAAA,IAAA,CAAA,KAAA,CAAA,UAAA,CAAA,CAAA;AAAA,IACF,MAAC,aAAA,GAAA,MAAA;AAED,MAAM,IAAA,EAAA,CAAA;AAEN,MAAA,CAAA,EAAA,GAAmB,gBAAA,CAAA,KAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAA,EAAA,CAAA;AAAA,KAAA,CACjB;AAAsD,IACxD,MAAA,CAAA;AAEA,MAAA;AACE,MAAA,gBAAA;AAAsC,MACxC,aAAA;AAEA,MAAa,WAAA;AAAA,KAAA,CAAA,CAAA;AAAA,IAEX,OAAA,CAAA,IAAA,EAAA,MAAA,KAAA;AAAA,MACA,OAAAA,SAAA,EAAA,EAAAC,WAAA,CAAAC,KAAA,CAAA,UAAA,CAAA,EAAA;AAAA,QACA,EAAA,EAAA,IAAA,CAAA,QAAA;AAAA,QACA,QAAA,EAAA,IAAA,CAAA,QAAA,KAAA,MAAA,GAAA,KAAA,GAAA,CAAA,IAAA,CAAA,YAAA;AAAA,OACD,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialog.mjs","sources":["../../../../../../packages/components/dialog/src/dialog.ts"],"sourcesContent":["import { buildProps, definePropType, isBoolean } from '@element-plus/utils'\nimport { UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport { teleportProps } from '@element-plus/components/teleport'\nimport { dialogContentProps } from './dialog-content'\n\nimport type {\n  ExtractPropTypes,\n  InjectionKey,\n  TransitionProps,\n  __ExtractPublicPropTypes,\n} from 'vue'\nimport type Dialog from './dialog.vue'\n\ntype DoneFn = (cancel?: boolean) => void\n\nexport type DialogBeforeCloseFn = (done: DoneFn) => void\n\nexport type DialogTransition = string | TransitionProps\n\nexport const dialogProps = buildProps({\n  ...dialogContentProps,\n  /**\n   * @description whether to append Dialog itself to body. A nested Dialog should have this attribute set to `true`\n   */\n  appendToBody: Boolean,\n  /**\n   * @description which element the Dialog appends to\n   */\n  appendTo: {\n    type: teleportProps.to.type,\n    default: 'body',\n  },\n  /**\n   * @description callback before Dialog closes, and it will prevent Dialog from closing, use done to close the dialog\n   */\n  beforeClose: {\n    type: definePropType<DialogBeforeCloseFn>(Function),\n  },\n  /**\n   * @description destroy elements in Dialog when closed\n   */\n  destroyOnClose: Boolean,\n  /**\n   * @description whether the Dialog can be closed by clicking the mask\n   */\n  closeOnClickModal: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether the Dialog can be closed by pressing ESC\n   */\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether scroll of body is disabled while Dialog is displayed\n   */\n  lockScroll: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether a mask is displayed\n   */\n  modal: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether the mask is penetrable\n   */\n  modalPenetrable: Boolean,\n  /**\n   * @description the Time(milliseconds) before open\n   */\n  openDelay: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description the Time(milliseconds) before close\n   */\n  closeDelay: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description value for `margin-top` of Dialog CSS, default is 15vh\n   */\n  top: {\n    type: String,\n  },\n  /**\n   * @description visibility of Dialog\n   */\n  modelValue: Boolean,\n  /**\n   * @description custom class names for mask\n   */\n  modalClass: String,\n  /**\n   * @description custom class names for header wrapper\n   */\n  headerClass: String,\n  /**\n   * @description custom class names for body wrapper\n   */\n  bodyClass: String,\n  /**\n   * @description custom class names for footer wrapper\n   */\n  footerClass: String,\n  /**\n   * @description width of Dialog, default is 50%\n   */\n  width: {\n    type: [String, Number],\n  },\n  /**\n   * @description same as z-index in native CSS, z-order of dialog\n   */\n  zIndex: {\n    type: Number,\n  },\n  trapFocus: Boolean,\n  /**\n   * @description header's aria-level attribute\n   */\n  headerAriaLevel: {\n    type: String,\n    default: '2',\n  },\n  /**\n   * @description custom transition configuration for dialog animation, it can be a string (transition name) or an object with Vue transition props\n   */\n  transition: {\n    type: definePropType<DialogTransition>([String, Object]),\n    default: undefined,\n  },\n} as const)\n\nexport type DialogProps = ExtractPropTypes<typeof dialogProps>\nexport type DialogPropsPublic = __ExtractPublicPropTypes<typeof dialogProps>\n\nexport const dialogEmits = {\n  open: () => true,\n  opened: () => true,\n  close: () => true,\n  closed: () => true,\n  [UPDATE_MODEL_EVENT]: (value: boolean) => isBoolean(value),\n  openAutoFocus: () => true,\n  closeAutoFocus: () => true,\n}\nexport type DialogEmits = typeof dialogEmits\nexport type DialogInstance = InstanceType<typeof Dialog> & unknown\nexport interface DialogConfigContext {\n  alignCenter?: boolean\n  draggable?: boolean\n  overflow?: boolean\n  transition?: DialogTransition\n}\n\nexport const dialogContextKey: InjectionKey<DialogConfigContext> =\n  Symbol('dialogContextKey')\n"],"names":[],"mappings":";;;;;;AAIY,MAAC,WAAW,GAAG,UAAU,CAAC;AACtC,EAAE,GAAG,kBAAkB;AACvB,EAAE,YAAY,EAAE,OAAO;AACvB,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,aAAa,CAAC,EAAE,CAAC,IAAI;AAC/B,IAAI,OAAO,EAAE,MAAM;AACnB,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,cAAc,CAAC,QAAQ,CAAC;AAClC,GAAG;AACH,EAAE,cAAc,EAAE,OAAO;AACzB,EAAE,iBAAiB,EAAE;AACrB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,eAAe,EAAE,OAAO;AAC1B,EAAE,SAAS,EAAE;AACb,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,UAAU,EAAE,OAAO;AACrB,EAAE,UAAU,EAAE,MAAM;AACpB,EAAE,WAAW,EAAE,MAAM;AACrB,EAAE,SAAS,EAAE,MAAM;AACnB,EAAE,WAAW,EAAE,MAAM;AACrB,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;AAC1B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,SAAS,EAAE,OAAO;AACpB,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,WAAW,GAAG;AAC3B,EAAE,IAAI,EAAE,MAAM,IAAI;AAClB,EAAE,MAAM,EAAE,MAAM,IAAI;AACpB,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,MAAM,EAAE,MAAM,IAAI;AACpB,EAAE,CAAC,kBAAkB,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,KAAK,CAAC;AACnD,EAAE,aAAa,EAAE,MAAM,IAAI;AAC3B,EAAE,cAAc,EAAE,MAAM,IAAI;AAC5B,EAAE;AACU,MAAC,gBAAgB,GAAG,MAAM,CAAC,kBAAkB;;;;"}