@geelato/web-vue 2.57.1 → 2.58.2

package/es/modal/modal.js

@@ -6,8 +6,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_icon_check_circle_fill = resolveComponent("icon-check-circle-fill");
   const _component_icon_exclamation_circle_fill = resolveComponent("icon-exclamation-circle-fill");
   const _component_icon_close_circle_fill = resolveComponent("icon-close-circle-fill");
-  const _component_icon_close = resolveComponent("icon-close");
+  const _component_icon_fullscreen = resolveComponent("icon-fullscreen");
+  const _component_icon_fullscreen_exit = resolveComponent("icon-fullscreen-exit");
   const _component_icon_hover = resolveComponent("icon-hover");
+  const _component_icon_close = resolveComponent("icon-close");
   const _component_arco_button = resolveComponent("arco-button");
   const _component_client_only = resolveComponent("client-only");
   return openBlock(), createBlock(_component_client_only, null, {
@@ -40,8 +42,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           createElementVNode("div", {
             ref: "wrapperRef",
             class: normalizeClass(_ctx.wrapperCls),
-            onClick: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.handleMaskClick && _ctx.handleMaskClick(...args), ["self"])),
-            onMousedown: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.handleMaskMouseDown && _ctx.handleMaskMouseDown(...args), ["self"]))
+            onClick: _cache[3] || (_cache[3] = withModifiers((...args) => _ctx.handleMaskClick && _ctx.handleMaskClick(...args), ["self"])),
+            onMousedown: _cache[4] || (_cache[4] = withModifiers((...args) => _ctx.handleMaskMouseDown && _ctx.handleMaskMouseDown(...args), ["self"]))
           }, [
             createVNode(Transition, {
               name: _ctx.modalAnimationName,
@@ -59,7 +61,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   !_ctx.hideTitle && (_ctx.$slots.title || _ctx.title || _ctx.closable) ? (openBlock(), createElementBlock("div", {
                     key: 0,
                     class: normalizeClass(`${_ctx.prefixCls}-header`),
-                    onMousedown: _cache[1] || (_cache[1] = (...args) => _ctx.handleMoveDown && _ctx.handleMoveDown(...args))
+                    onMousedown: _cache[2] || (_cache[2] = (...args) => _ctx.handleMoveDown && _ctx.handleMoveDown(...args))
                   }, [
                     _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("div", {
                       key: 0,
@@ -81,13 +83,28 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                         createTextVNode(toDisplayString(_ctx.title), 1)
                       ])
                     ], 2)) : createCommentVNode("v-if", true),
-                    !_ctx.simple && _ctx.closable ? (openBlock(), createElementBlock("div", {
+                    !_ctx.simple && _ctx.showFullscreen ? (openBlock(), createElementBlock("div", {
                       key: 1,
                       tabindex: "-1",
                       role: "button",
+                      "aria-label": "Fullscreen",
+                      class: normalizeClass(`${_ctx.prefixCls}-fullscreen-btn`),
+                      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.toggleFullscreen && _ctx.toggleFullscreen(...args))
+                    }, [
+                      createVNode(_component_icon_hover, null, {
+                        default: withCtx(() => [
+                          !_ctx.mergedFullscreen ? (openBlock(), createBlock(_component_icon_fullscreen, { key: 0 })) : (openBlock(), createBlock(_component_icon_fullscreen_exit, { key: 1 }))
+                        ]),
+                        _: 1
+                      })
+                    ], 2)) : createCommentVNode("v-if", true),
+                    !_ctx.simple && _ctx.closable ? (openBlock(), createElementBlock("div", {
+                      key: 2,
+                      tabindex: "-1",
+                      role: "button",
                       "aria-label": "Close",
                       class: normalizeClass(`${_ctx.prefixCls}-close-btn`),
-                      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleCancel && _ctx.handleCancel(...args))
+                      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleCancel && _ctx.handleCancel(...args))
                     }, [
                       createVNode(_component_icon_hover, null, {
                         default: withCtx(() => [

package/es/modal/modal.vue_vue_type_script_lang.js

@@ -4,6 +4,8 @@ import ClientOnly from "../_components/client-only.js";
 import IconHover from "../_components/icon-hover.js";
 import Button from "../button/index.js";
 import IconClose from "../icon/icon-close/index.js";
+import IconFullscreen from "../icon/icon-fullscreen/index.js";
+import IconFullscreenExit from "../icon/icon-fullscreen-exit/index.js";
 import IconInfoCircleFill from "../icon/icon-info-circle-fill/index.js";
 import IconCheckCircleFill from "../icon/icon-check-circle-fill/index.js";
 import IconExclamationCircleFill from "../icon/icon-exclamation-circle-fill/index.js";
@@ -23,6 +25,8 @@ var _sfc_main = defineComponent({
     ArcoButton: Button,
     IconHover,
     IconClose,
+    IconFullscreen,
+    IconFullscreenExit,
     IconInfoCircleFill,
     IconCheckCircleFill,
     IconExclamationCircleFill,
@@ -129,6 +133,10 @@ var _sfc_main = defineComponent({
       type: Boolean,
       default: false
     },
+    showFullscreen: {
+      type: Boolean,
+      default: false
+    },
     maskAnimationName: {
       type: String,
       default: (props) => {
@@ -163,6 +171,7 @@ var _sfc_main = defineComponent({
   },
   emits: {
     "update:visible": (visible) => true,
+    "update:fullscreen": (fullscreen) => true,
     "ok": (e) => true,
     "cancel": (e) => true,
     "open": () => true,
@@ -191,6 +200,11 @@ var _sfc_main = defineComponent({
     });
     const _okLoading = ref(false);
     const mergedOkLoading = computed(() => props.okLoading || _okLoading.value);
+    const _fullscreen = ref(props.fullscreen);
+    const mergedFullscreen = computed(() => {
+      var _a;
+      return (_a = props.fullscreen) != null ? _a : _fullscreen.value;
+    });
     const mergedDraggable = computed(() => props.draggable && !props.fullscreen);
     const {
       teleportContainer,
@@ -353,7 +367,15 @@ var _sfc_main = defineComponent({
       if (position.value) {
         position.value = void 0;
       }
+      if (_fullscreen.value !== fullscreen.value) {
+        _fullscreen.value = !!fullscreen.value;
+      }
     });
+    const toggleFullscreen = () => {
+      const next = !mergedFullscreen.value;
+      _fullscreen.value = next;
+      emit("update:fullscreen", next);
+    };
     const wrapperCls = computed(() => [`${prefixCls}-wrapper`, {
       [`${prefixCls}-wrapper-align-center`]: props.alignCenter && !props.fullscreen,
       [`${prefixCls}-wrapper-moved`]: Boolean(position.value)
@@ -361,7 +383,7 @@ var _sfc_main = defineComponent({
     const modalCls = computed(() => [`${prefixCls}`, props.modalClass, {
       [`${prefixCls}-simple`]: props.simple,
       [`${prefixCls}-draggable`]: mergedDraggable.value,
-      [`${prefixCls}-fullscreen`]: props.fullscreen
+      [`${prefixCls}-fullscreen`]: mergedFullscreen.value
     }]);
     const mergedModalStyle = computed(() => {
       var _a;
@@ -400,7 +422,9 @@ var _sfc_main = defineComponent({
       wrapperCls,
       modalCls,
       teleportContainer,
-      handleMoveDown
+      handleMoveDown,
+      mergedFullscreen,
+      toggleFullscreen
     };
   }
 });

package/es/modal/style/index.css

@@ -116,7 +116,13 @@
   margin-left: 12px;
 }
 .arco-modal-close-btn {
-  margin-left: -12px;
+  margin-left: 8px;
+  color: var(--color-text-1);
+  font-size: 12px;
+  cursor: pointer;
+}
+.arco-modal-fullscreen-btn {
+  margin-left: 8px;
   color: var(--color-text-1);
   font-size: 12px;
   cursor: pointer;

package/es/modal/style/index.less

@@ -127,7 +127,14 @@
   }
 
   &-close-btn {
-    margin-left: -@modal-font-size-close-icon;
+    margin-left: 8px;
+    color: @modal-color-header-text;
+    font-size: @modal-font-size-close-icon;
+    cursor: pointer;
+  }
+
+  &-fullscreen-btn {
+    margin-left: 8px;
     color: @modal-color-header-text;
     font-size: @modal-font-size-close-icon;
     cursor: pointer;

package/es/notification/notification.d.ts

@@ -47,8 +47,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {
-    duration: number;
     type: "error" | "success" | "warning" | "info";
+    duration: number;
     closable: boolean;
     showIcon: boolean;
     resetOnUpdate: boolean;
@@ -58,7 +58,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: StringConstructor;
         };
         size: {
-            type: PropType<"mini" | "medium" | "large" | "small">;
+            type: PropType<"mini" | "small" | "medium" | "large">;
             default: string;
         };
         disabled: {
@@ -72,7 +72,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: StringConstructor;
         };
         size: {
-            type: PropType<"mini" | "medium" | "large" | "small">;
+            type: PropType<"mini" | "small" | "medium" | "large">;
             default: string;
         };
         disabled: {
@@ -80,8 +80,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
     }>> & Readonly<{}>, {
+        size: "mini" | "small" | "medium" | "large";
         disabled: boolean;
-        size: "mini" | "medium" | "large" | "small";
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     IconInfoCircleFill: any;
     IconCheckCircleFill: any;

package/es/page-header/index.d.ts

@@ -25,7 +25,7 @@ declare const PageHeader: {
                 type: StringConstructor;
             };
             size: {
-                type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+                type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
                 default: string;
             };
             disabled: {
@@ -39,7 +39,7 @@ declare const PageHeader: {
                 type: StringConstructor;
             };
             size: {
-                type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+                type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
                 default: string;
             };
             disabled: {
@@ -47,8 +47,8 @@ declare const PageHeader: {
                 default: boolean;
             };
         }>> & Readonly<{}>, {
+            size: "mini" | "small" | "medium" | "large";
             disabled: boolean;
-            size: "mini" | "medium" | "large" | "small";
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         IconLeft: any;
     } & import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
@@ -102,7 +102,7 @@ declare const PageHeader: {
             type: StringConstructor;
         };
         size: {
-            type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+            type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
             default: string;
         };
         disabled: {
@@ -116,7 +116,7 @@ declare const PageHeader: {
             type: StringConstructor;
         };
         size: {
-            type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+            type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
             default: string;
         };
         disabled: {
@@ -124,8 +124,8 @@ declare const PageHeader: {
             default: boolean;
         };
     }>> & Readonly<{}>, {
+        size: "mini" | "small" | "medium" | "large";
         disabled: boolean;
-        size: "mini" | "medium" | "large" | "small";
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     IconLeft: any;
 } & import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {

package/es/page-header/page-header.d.ts

@@ -28,7 +28,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: StringConstructor;
         };
         size: {
-            type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+            type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
             default: string;
         };
         disabled: {
@@ -42,7 +42,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: StringConstructor;
         };
         size: {
-            type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+            type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
             default: string;
         };
         disabled: {
@@ -50,8 +50,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
     }>> & Readonly<{}>, {
+        size: "mini" | "small" | "medium" | "large";
         disabled: boolean;
-        size: "mini" | "medium" | "large" | "small";
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     IconLeft: any;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/es/pagination/index.d.ts

@@ -53,7 +53,7 @@ declare const Pagination: {
             type: import("vue").PropType<import("..").SelectProps>;
         };
         size: {
-            type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+            type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
         };
         pageItemStyle: {
             type: import("vue").PropType<import("vue").CSSProperties>;
@@ -155,7 +155,7 @@ declare const Pagination: {
             type: import("vue").PropType<import("..").SelectProps>;
         };
         size: {
-            type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+            type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
         };
         pageItemStyle: {
             type: import("vue").PropType<import("vue").CSSProperties>;
@@ -249,7 +249,7 @@ declare const Pagination: {
         type: import("vue").PropType<import("..").SelectProps>;
     };
     size: {
-        type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+        type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
     };
     pageItemStyle: {
         type: import("vue").PropType<import("vue").CSSProperties>;

package/es/pagination/page-jumper.d.ts

@@ -101,14 +101,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             size: {
-                type: PropType<"mini" | "medium" | "large" | "small">;
+                type: PropType<"mini" | "small" | "medium" | "large">;
             };
             allowClear: {
                 type: BooleanConstructor;
                 default: boolean;
             };
             modelEvent: {
-                type: PropType<"input" | "change">;
+                type: PropType<"change" | "input">;
                 default: string;
             };
             readOnly: {
@@ -119,12 +119,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: ObjectConstructor;
             };
         }>> & Readonly<{
-            onFocus?: ((ev: FocusEvent) => any) | undefined;
             onClear?: ((ev: Event) => any) | undefined;
+            onChange?: ((value: number | undefined, ev: Event) => any) | undefined;
+            onFocus?: ((ev: FocusEvent) => any) | undefined;
             onInput?: ((value: number | undefined, inputValue: string, ev: Event) => any) | undefined;
             onBlur?: ((ev: FocusEvent) => any) | undefined;
             "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
-            onChange?: ((value: number | undefined, ev: Event) => any) | undefined;
             onKeydown?: ((ev: KeyboardEvent) => any) | undefined;
         }>, {
             inputRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
@@ -142,14 +142,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             keydown: (ev: KeyboardEvent) => true;
         }, import("vue").PublicProps, {
             disabled: boolean;
-            mode: "button" | "embed";
             error: boolean;
             allowClear: boolean;
+            mode: "button" | "embed";
             max: number;
             step: number;
             min: number;
             hideButton: boolean;
-            modelEvent: "input" | "change";
+            modelEvent: "change" | "input";
             readOnly: boolean;
         }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
             P: {};
@@ -198,14 +198,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             size: {
-                type: PropType<"mini" | "medium" | "large" | "small">;
+                type: PropType<"mini" | "small" | "medium" | "large">;
             };
             allowClear: {
                 type: BooleanConstructor;
                 default: boolean;
             };
             modelEvent: {
-                type: PropType<"input" | "change">;
+                type: PropType<"change" | "input">;
                 default: string;
             };
             readOnly: {
@@ -216,12 +216,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: ObjectConstructor;
             };
         }>> & Readonly<{
-            onFocus?: ((ev: FocusEvent) => any) | undefined;
             onClear?: ((ev: Event) => any) | undefined;
+            onChange?: ((value: number | undefined, ev: Event) => any) | undefined;
+            onFocus?: ((ev: FocusEvent) => any) | undefined;
             onInput?: ((value: number | undefined, inputValue: string, ev: Event) => any) | undefined;
             onBlur?: ((ev: FocusEvent) => any) | undefined;
             "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
-            onChange?: ((value: number | undefined, ev: Event) => any) | undefined;
             onKeydown?: ((ev: KeyboardEvent) => any) | undefined;
         }>, {
             inputRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
@@ -231,14 +231,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             blur(): void;
         }, {
             disabled: boolean;
-            mode: "button" | "embed";
             error: boolean;
             allowClear: boolean;
+            mode: "button" | "embed";
             max: number;
             step: number;
             min: number;
             hideButton: boolean;
-            modelEvent: "input" | "change";
+            modelEvent: "change" | "input";
             readOnly: boolean;
         }>;
         __isFragment?: undefined;
@@ -284,14 +284,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             default: boolean;
         };
         size: {
-            type: PropType<"mini" | "medium" | "large" | "small">;
+            type: PropType<"mini" | "small" | "medium" | "large">;
         };
         allowClear: {
             type: BooleanConstructor;
             default: boolean;
         };
         modelEvent: {
-            type: PropType<"input" | "change">;
+            type: PropType<"change" | "input">;
             default: string;
         };
         readOnly: {
@@ -302,12 +302,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: ObjectConstructor;
         };
     }>> & Readonly<{
-        onFocus?: ((ev: FocusEvent) => any) | undefined;
         onClear?: ((ev: Event) => any) | undefined;
+        onChange?: ((value: number | undefined, ev: Event) => any) | undefined;
+        onFocus?: ((ev: FocusEvent) => any) | undefined;
         onInput?: ((value: number | undefined, inputValue: string, ev: Event) => any) | undefined;
         onBlur?: ((ev: FocusEvent) => any) | undefined;
         "onUpdate:modelValue"?: ((value: number | undefined) => any) | undefined;
-        onChange?: ((value: number | undefined, ev: Event) => any) | undefined;
         onKeydown?: ((ev: KeyboardEvent) => any) | undefined;
     }>, {
         inputRef: import("vue").Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
@@ -325,14 +325,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         keydown: (ev: KeyboardEvent) => true;
     }, string, {
         disabled: boolean;
-        mode: "button" | "embed";
         error: boolean;
         allowClear: boolean;
+        mode: "button" | "embed";
         max: number;
         step: number;
         min: number;
         hideButton: boolean;
-        modelEvent: "input" | "change";
+        modelEvent: "change" | "input";
         readOnly: boolean;
     }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
         install: (app: import("vue").App<any>, options?: import("../_utils/types").ArcoOptions | undefined) => void;