@geelato/web-vue 2.57.1 → 2.58.2

package/es/drawer/drawer.d.ts

@@ -87,6 +87,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    fullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, {
     prefixCls: string;
     style: import("vue").ComputedRef<CSSProperties>;
@@ -102,8 +110,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     handleMask: (e: Event) => void;
     isFixed: import("vue").ComputedRef<boolean>;
     teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+    mergedFullscreen: import("vue").ComputedRef<boolean>;
+    toggleFullscreen: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:visible': (visible: boolean) => true;
+    'update:fullscreen': (fullscreen: boolean) => true;
     ok: (e: Event) => true;
     cancel: (e: Event) => true;
     open: () => true;
@@ -197,12 +208,21 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: BooleanConstructor;
         default: boolean;
     };
+    fullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onOpen?: (() => any) | undefined;
     onCancel?: ((e: Event) => any) | undefined;
     onClose?: (() => any) | undefined;
     "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
     onOk?: ((e: Event) => any) | undefined;
+    "onUpdate:fullscreen"?: ((fullscreen: boolean) => any) | undefined;
     onBeforeOpen?: (() => any) | undefined;
     onBeforeClose?: (() => any) | undefined;
 }>, {
@@ -213,15 +233,17 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     footer: boolean;
     header: boolean;
     mask: boolean;
-    closable: boolean;
     height: string | number;
     width: string | number;
+    closable: boolean;
     defaultVisible: boolean;
     maskClosable: boolean;
     escToClose: boolean;
     placement: "top" | "bottom" | "left" | "right";
     okLoading: boolean;
     hideCancel: boolean;
+    fullscreen: boolean;
+    showFullscreen: boolean;
 }, {}, {
     ClientOnly: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
@@ -238,7 +260,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: PropType<"normal" | "success" | "warning" | "danger">;
             };
             size: {
-                type: PropType<"mini" | "medium" | "large" | "small">;
+                type: PropType<"mini" | "small" | "medium" | "large">;
             };
             long: {
                 type: BooleanConstructor;
@@ -297,7 +319,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: PropType<"normal" | "success" | "warning" | "danger">;
             };
             size: {
-                type: PropType<"mini" | "medium" | "large" | "small">;
+                type: PropType<"mini" | "small" | "medium" | "large">;
             };
             long: {
                 type: BooleanConstructor;
@@ -349,7 +371,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             type: PropType<"normal" | "success" | "warning" | "danger">;
         };
         size: {
-            type: PropType<"mini" | "medium" | "large" | "small">;
+            type: PropType<"mini" | "small" | "medium" | "large">;
         };
         long: {
             type: BooleanConstructor;
@@ -402,7 +424,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: PropType<"round" | "circle" | "square">;
             };
             size: {
-                type: PropType<"mini" | "medium" | "large" | "small">;
+                type: PropType<"mini" | "small" | "medium" | "large">;
             };
             disabled: {
                 type: BooleanConstructor;
@@ -420,7 +442,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: PropType<"round" | "circle" | "square">;
             };
             size: {
-                type: PropType<"mini" | "medium" | "large" | "small">;
+                type: PropType<"mini" | "small" | "medium" | "large">;
             };
             disabled: {
                 type: BooleanConstructor;
@@ -435,7 +457,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: {
@@ -449,7 +471,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: {
@@ -457,9 +479,11 @@ 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>;
     IconClose: any;
+    IconFullscreen: any;
+    IconFullscreenExit: any;
 }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/drawer/drawer.js

@@ -4,6 +4,8 @@ import ClientOnly from "../_components/client-only.js";
 import Button from "../button/index.js";
 import IconHover from "../_components/icon-hover.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 { useI18n } from "../locale/index.js";
 import { useOverflow } from "../_hooks/use-overflow.js";
 import { on, off } from "../_utils/dom.js";
@@ -19,7 +21,9 @@ const _sfc_main = defineComponent({
     ClientOnly,
     ArcoButton: Button,
     IconHover,
-    IconClose
+    IconClose,
+    IconFullscreen,
+    IconFullscreenExit
   },
   inheritAttrs: false,
   props: {
@@ -108,10 +112,19 @@ const _sfc_main = defineComponent({
     hideCancel: {
       type: Boolean,
       default: false
+    },
+    fullscreen: {
+      type: Boolean,
+      default: false
+    },
+    showFullscreen: {
+      type: Boolean,
+      default: false
     }
   },
   emits: {
     "update:visible": (visible) => true,
+    "update:fullscreen": (fullscreen) => true,
     "ok": (e) => true,
     "cancel": (e) => true,
     "open": () => true,
@@ -124,10 +137,17 @@ const _sfc_main = defineComponent({
     const prefixCls = getPrefixCls("drawer");
     const { t } = useI18n();
     const _visible = ref(props.defaultVisible);
+    const _fullscreen = ref(props.fullscreen);
     const computedVisible = computed(() => {
       var _a;
       return (_a = props.visible) != null ? _a : _visible.value;
     });
+    const mergedFullscreen = computed(
+      () => {
+        var _a;
+        return (_a = props.fullscreen) != null ? _a : _fullscreen.value;
+      }
+    );
     const _okLoading = ref(false);
     const mergedOkLoading = computed(() => props.okLoading || _okLoading.value);
     const { teleportContainer, containerRef } = useTeleportContainer({
@@ -214,6 +234,11 @@ const _sfc_main = defineComponent({
         close();
       }
     };
+    const toggleFullscreen = () => {
+      const next = !mergedFullscreen.value;
+      _fullscreen.value = next;
+      emit("update:fullscreen", next);
+    };
     const handleMask = (e) => {
       if (props.maskClosable) {
         handleCancel(e);
@@ -257,6 +282,14 @@ const _sfc_main = defineComponent({
         removeGlobalKeyDownListener();
       }
     });
+    watch(
+      () => props.fullscreen,
+      (val) => {
+        if (_fullscreen.value !== val) {
+          _fullscreen.value = !!val;
+        }
+      }
+    );
     const style = computed(() => {
       var _a;
       const style2 = {
@@ -284,13 +317,17 @@ const _sfc_main = defineComponent({
       handleClose,
       handleMask,
       isFixed,
-      teleportContainer
+      teleportContainer,
+      mergedFullscreen,
+      toggleFullscreen
     };
   }
 });
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  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, {
@@ -328,7 +365,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           }, {
             default: withCtx(() => [
               withDirectives(createElementVNode("div", {
-                class: normalizeClass(_ctx.prefixCls),
+                class: normalizeClass([
+                  _ctx.prefixCls,
+                  { [`${_ctx.prefixCls}-fullscreen`]: _ctx.mergedFullscreen }
+                ]),
                 style: normalizeStyle(_ctx.style)
               }, [
                 _ctx.header ? (openBlock(), createElementBlock("div", {
@@ -344,13 +384,28 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                         createTextVNode(toDisplayString(_ctx.title), 1)
                       ])
                     ], 2)) : createCommentVNode("v-if", true),
-                    _ctx.closable ? (openBlock(), createElementBlock("div", {
+                    _ctx.showFullscreen ? (openBlock(), createElementBlock("div", {
                       key: 1,
                       tabindex: "-1",
                       role: "button",
+                      "aria-label": "Fullscreen",
+                      class: normalizeClass(`${_ctx.prefixCls}-fullscreen-btn`),
+                      onClick: _cache[1] || (_cache[1] = (...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.closable ? (openBlock(), createElementBlock("div", {
+                      key: 2,
+                      tabindex: "-1",
+                      role: "button",
                       "aria-label": "Close",
                       class: normalizeClass(`${_ctx.prefixCls}-close-btn`),
-                      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleCancel && _ctx.handleCancel(...args))
+                      onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleCancel && _ctx.handleCancel(...args))
                     }, [
                       createVNode(_component_icon_hover, null, {
                         default: withCtx(() => [

package/es/drawer/index.d.ts

@@ -90,12 +90,21 @@ declare const Drawer: {
             type: BooleanConstructor;
             default: boolean;
         };
+        fullscreen: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        showFullscreen: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & Readonly<{
         onOpen?: (() => any) | undefined;
         onCancel?: ((e: Event) => any) | undefined;
         onClose?: (() => any) | undefined;
         "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
         onOk?: ((e: Event) => any) | undefined;
+        "onUpdate:fullscreen"?: ((fullscreen: boolean) => any) | undefined;
         onBeforeOpen?: (() => any) | undefined;
         onBeforeClose?: (() => any) | undefined;
     }>, {
@@ -113,8 +122,11 @@ declare const Drawer: {
         handleMask: (e: Event) => void;
         isFixed: import("vue").ComputedRef<boolean>;
         teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+        mergedFullscreen: import("vue").ComputedRef<boolean>;
+        toggleFullscreen: () => void;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'update:visible': (visible: boolean) => true;
+        'update:fullscreen': (fullscreen: boolean) => true;
         ok: (e: Event) => true;
         cancel: (e: Event) => true;
         open: () => true;
@@ -129,15 +141,17 @@ declare const Drawer: {
         footer: boolean;
         header: boolean;
         mask: boolean;
-        closable: boolean;
         height: string | number;
         width: string | number;
+        closable: boolean;
         defaultVisible: boolean;
         maskClosable: boolean;
         escToClose: boolean;
         placement: "top" | "bottom" | "left" | "right";
         okLoading: boolean;
         hideCancel: boolean;
+        fullscreen: boolean;
+        showFullscreen: boolean;
     }, true, {}, {}, {
         ClientOnly: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
             [key: string]: any;
@@ -154,7 +168,7 @@ declare const Drawer: {
                     type: import("vue").PropType<"normal" | "success" | "warning" | "danger">;
                 };
                 size: {
-                    type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+                    type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
                 };
                 long: {
                     type: BooleanConstructor;
@@ -213,7 +227,7 @@ declare const Drawer: {
                     type: import("vue").PropType<"normal" | "success" | "warning" | "danger">;
                 };
                 size: {
-                    type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+                    type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
                 };
                 long: {
                     type: BooleanConstructor;
@@ -265,7 +279,7 @@ declare const Drawer: {
                 type: import("vue").PropType<"normal" | "success" | "warning" | "danger">;
             };
             size: {
-                type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+                type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
             };
             long: {
                 type: BooleanConstructor;
@@ -318,7 +332,7 @@ declare const Drawer: {
                     type: import("vue").PropType<"round" | "circle" | "square">;
                 };
                 size: {
-                    type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+                    type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
                 };
                 disabled: {
                     type: BooleanConstructor;
@@ -336,7 +350,7 @@ declare const Drawer: {
                     type: import("vue").PropType<"round" | "circle" | "square">;
                 };
                 size: {
-                    type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+                    type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
                 };
                 disabled: {
                     type: BooleanConstructor;
@@ -351,7 +365,7 @@ declare const Drawer: {
                 type: StringConstructor;
             };
             size: {
-                type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+                type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
                 default: string;
             };
             disabled: {
@@ -365,7 +379,7 @@ declare const Drawer: {
                 type: StringConstructor;
             };
             size: {
-                type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+                type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
                 default: string;
             };
             disabled: {
@@ -373,10 +387,12 @@ declare const Drawer: {
                 default: boolean;
             };
         }>> & Readonly<{}>, {
+            size: "mini" | "small" | "medium" | "large";
             disabled: boolean;
-            size: "mini" | "medium" | "large" | "small";
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         IconClose: any;
+        IconFullscreen: any;
+        IconFullscreenExit: any;
     } & import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -471,12 +487,21 @@ declare const Drawer: {
             type: BooleanConstructor;
             default: boolean;
         };
+        fullscreen: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        showFullscreen: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
     }>> & Readonly<{
         onOpen?: (() => any) | undefined;
         onCancel?: ((e: Event) => any) | undefined;
         onClose?: (() => any) | undefined;
         "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
         onOk?: ((e: Event) => any) | undefined;
+        "onUpdate:fullscreen"?: ((fullscreen: boolean) => any) | undefined;
         onBeforeOpen?: (() => any) | undefined;
         onBeforeClose?: (() => any) | undefined;
     }>, {
@@ -494,6 +519,8 @@ declare const Drawer: {
         handleMask: (e: Event) => void;
         isFixed: import("vue").ComputedRef<boolean>;
         teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+        mergedFullscreen: import("vue").ComputedRef<boolean>;
+        toggleFullscreen: () => void;
     }, {}, {}, {}, {
         unmountOnClose: boolean;
         popupContainer: string | HTMLElement;
@@ -502,15 +529,17 @@ declare const Drawer: {
         footer: boolean;
         header: boolean;
         mask: boolean;
-        closable: boolean;
         height: string | number;
         width: string | number;
+        closable: boolean;
         defaultVisible: boolean;
         maskClosable: boolean;
         escToClose: boolean;
         placement: "top" | "bottom" | "left" | "right";
         okLoading: boolean;
         hideCancel: boolean;
+        fullscreen: boolean;
+        showFullscreen: boolean;
     }>;
     __isFragment?: undefined;
     __isTeleport?: undefined;
@@ -602,12 +631,21 @@ declare const Drawer: {
         type: BooleanConstructor;
         default: boolean;
     };
+    fullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showFullscreen: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{
     onOpen?: (() => any) | undefined;
     onCancel?: ((e: Event) => any) | undefined;
     onClose?: (() => any) | undefined;
     "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
     onOk?: ((e: Event) => any) | undefined;
+    "onUpdate:fullscreen"?: ((fullscreen: boolean) => any) | undefined;
     onBeforeOpen?: (() => any) | undefined;
     onBeforeClose?: (() => any) | undefined;
 }>, {
@@ -625,8 +663,11 @@ declare const Drawer: {
     handleMask: (e: Event) => void;
     isFixed: import("vue").ComputedRef<boolean>;
     teleportContainer: import("vue").Ref<string | HTMLElement | undefined, string | HTMLElement | undefined>;
+    mergedFullscreen: import("vue").ComputedRef<boolean>;
+    toggleFullscreen: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:visible': (visible: boolean) => true;
+    'update:fullscreen': (fullscreen: boolean) => true;
     ok: (e: Event) => true;
     cancel: (e: Event) => true;
     open: () => true;
@@ -641,15 +682,17 @@ declare const Drawer: {
     footer: boolean;
     header: boolean;
     mask: boolean;
-    closable: boolean;
     height: string | number;
     width: string | number;
+    closable: boolean;
     defaultVisible: boolean;
     maskClosable: boolean;
     escToClose: boolean;
     placement: "top" | "bottom" | "left" | "right";
     okLoading: boolean;
     hideCancel: boolean;
+    fullscreen: boolean;
+    showFullscreen: boolean;
 }, {}, string, {}, {
     ClientOnly: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
@@ -666,7 +709,7 @@ declare const Drawer: {
                 type: import("vue").PropType<"normal" | "success" | "warning" | "danger">;
             };
             size: {
-                type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+                type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
             };
             long: {
                 type: BooleanConstructor;
@@ -725,7 +768,7 @@ declare const Drawer: {
                 type: import("vue").PropType<"normal" | "success" | "warning" | "danger">;
             };
             size: {
-                type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+                type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
             };
             long: {
                 type: BooleanConstructor;
@@ -777,7 +820,7 @@ declare const Drawer: {
             type: import("vue").PropType<"normal" | "success" | "warning" | "danger">;
         };
         size: {
-            type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+            type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
         };
         long: {
             type: BooleanConstructor;
@@ -830,7 +873,7 @@ declare const Drawer: {
                 type: import("vue").PropType<"round" | "circle" | "square">;
             };
             size: {
-                type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+                type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
             };
             disabled: {
                 type: BooleanConstructor;
@@ -848,7 +891,7 @@ declare const Drawer: {
                 type: import("vue").PropType<"round" | "circle" | "square">;
             };
             size: {
-                type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+                type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
             };
             disabled: {
                 type: BooleanConstructor;
@@ -863,7 +906,7 @@ declare const Drawer: {
             type: StringConstructor;
         };
         size: {
-            type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+            type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
             default: string;
         };
         disabled: {
@@ -877,7 +920,7 @@ declare const Drawer: {
             type: StringConstructor;
         };
         size: {
-            type: import("vue").PropType<"mini" | "medium" | "large" | "small">;
+            type: import("vue").PropType<"mini" | "small" | "medium" | "large">;
             default: string;
         };
         disabled: {
@@ -885,10 +928,12 @@ declare const Drawer: {
             default: boolean;
         };
     }>> & Readonly<{}>, {
+        size: "mini" | "small" | "medium" | "large";
         disabled: boolean;
-        size: "mini" | "medium" | "large" | "small";
     }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     IconClose: any;
+    IconFullscreen: any;
+    IconFullscreenExit: any;
 } & import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     open: (config: DrawerConfig, appContext?: AppContext | undefined) => {
         close: () => void;

package/es/drawer/style/index.css

@@ -64,6 +64,12 @@
   font-size: 12px;
   cursor: pointer;
 }
+.arco-drawer-header .arco-drawer-fullscreen-btn {
+  margin-left: 8px;
+  color: var(--color-text-1);
+  font-size: 12px;
+  cursor: pointer;
+}
 .arco-drawer-footer {
   flex-shrink: 0;
   box-sizing: border-box;
@@ -83,6 +89,10 @@
   overflow: auto;
   color: var(--color-text-1);
 }
+.arco-drawer-fullscreen {
+  width: 100% !important;
+  height: 100% !important;
+}
 .fade-drawer-enter-from,
 .fade-drawer-appear-from {
   opacity: 0;

package/es/drawer/style/index.less

@@ -54,6 +54,13 @@
       font-size: @drawer-font-size-close-icon;
       cursor: pointer;
     }
+
+    .@{drawer-prefix-cls}-fullscreen-btn {
+      margin-left: 8px;
+      color: @drawer-color-header-text;
+      font-size: @drawer-font-size-close-icon;
+      cursor: pointer;
+    }
   }
 
   &-footer {
@@ -79,6 +86,11 @@
   }
 }
 
+.@{drawer-prefix-cls}-fullscreen {
+  width: 100% !important;
+  height: 100% !important;
+}
+
 .fade-drawer-enter-from,
 .fade-drawer-appear-from {
   opacity: 0;