klun-ui 0.1.11 → 0.1.12

package/dist/{chunk-N4NBEKYR.js → chunk-3XJ5FN4P.js}

@@ -188,7 +188,7 @@ var enUS = {
   },
   timePicker: { am: "AM", pm: "PM" },
   pagination: { previous: "Previous", next: "Next" },
-  modal: { close: "Close" },
+  modal: { close: "Close", maximize: "Maximize", restore: "Restore" },
   drawer: { close: "Close" },
   alert: { dismiss: "Dismiss" },
   banner: { dismiss: "Dismiss" },
@@ -282,7 +282,7 @@ var zhCN = {
   },
   timePicker: { am: "\u4E0A\u5348", pm: "\u4E0B\u5348" },
   pagination: { previous: "\u4E0A\u4E00\u9875", next: "\u4E0B\u4E00\u9875" },
-  modal: { close: "\u5173\u95ED" },
+  modal: { close: "\u5173\u95ED", maximize: "\u6700\u5927\u5316", restore: "\u8FD8\u539F" },
   drawer: { close: "\u5173\u95ED" },
   alert: { dismiss: "\u5173\u95ED" },
   banner: { dismiss: "\u5173\u95ED" },
@@ -10380,6 +10380,8 @@ var Modal = forwardRef(function Modal2({
   keyboard = true,
   mask = true,
   draggable = false,
+  maximizable = false,
+  defaultMaximized = false,
   zIndex,
   afterClose,
   afterOpenChange,
@@ -10392,6 +10394,7 @@ var Modal = forwardRef(function Modal2({
   const cancel = onCancel ?? onClose;
   const backdropClosable = maskClosable ?? closeOnBackdrop ?? true;
   const [pos, setPos] = useState({ x: 0, y: 0 });
+  const [maximized, setMaximized] = useState(defaultMaximized);
   const drag = useRef(null);
   const prevOpen = useRef(open);
   useEffect(() => {
@@ -10408,7 +10411,10 @@ var Modal = forwardRef(function Modal2({
     };
   }, [open, keyboard, closable, cancel]);
   useEffect(() => {
-    if (open) setPos({ x: 0, y: 0 });
+    if (open) {
+      setPos({ x: 0, y: 0 });
+      setMaximized(defaultMaximized);
+    }
     if (prevOpen.current !== open) {
       afterOpenChange?.(open);
       if (!open) afterClose?.();
@@ -10417,8 +10423,8 @@ var Modal = forwardRef(function Modal2({
   }, [open]);
   if (!open) return null;
   const startDrag = (e) => {
-    if (!draggable) return;
-    if (e.target.closest(".klun-modal__close")) return;
+    if (!draggable || maximized) return;
+    if (e.target.closest(".klun-modal__actions")) return;
     drag.current = { sx: e.clientX, sy: e.clientY, ox: pos.x, oy: pos.y };
     const move = (ev) => {
       if (!drag.current) return;
@@ -10440,7 +10446,7 @@ var Modal = forwardRef(function Modal2({
     /* @__PURE__ */ jsx(Button, { variant: okType === "danger" ? "error" : "primary", loading: confirmLoading, onClick: onOk, ...okButtonProps, children: okText ?? "OK" })
   ] });
   const resolvedFooter = footer === null ? null : footer !== void 0 ? footer : defaultFooter;
-  const dialogStyle = {
+  const dialogStyle = maximized ? { ...style } : {
     width,
     ...pos.x || pos.y ? { transform: `translate(${pos.x}px, ${pos.y}px)` } : null,
     ...style
@@ -10458,14 +10464,14 @@ var Modal = forwardRef(function Modal2({
           role: "dialog",
           "aria-modal": "true",
           onClick: (e) => e.stopPropagation(),
-          className: cx("klun-modal__dialog", className),
+          className: cx("klun-modal__dialog", maximized && "klun-modal__dialog--maximized", className),
           style: dialogStyle,
           ...props,
           children: [
             title || icon ? /* @__PURE__ */ jsxs(
               "div",
               {
-                className: cx("klun-modal__header", draggable && "klun-modal__header--draggable"),
+                className: cx("klun-modal__header", draggable && !maximized && "klun-modal__header--draggable"),
                 onMouseDown: startDrag,
                 children: [
                   icon ? /* @__PURE__ */ jsx("div", { className: "klun-modal__icon", children: icon }) : null,
@@ -10473,7 +10479,19 @@ var Modal = forwardRef(function Modal2({
                     title ? /* @__PURE__ */ jsx("div", { className: "klun-modal__title", children: title }) : null,
                     description ? /* @__PURE__ */ jsx("div", { className: "klun-modal__description", children: description }) : null
                   ] }),
-                  closable ? /* @__PURE__ */ jsx("button", { type: "button", onClick: cancel, "aria-label": modal.close, className: "klun-modal__close", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }) : null
+                  maximizable || closable ? /* @__PURE__ */ jsxs("div", { className: "klun-modal__actions", children: [
+                    maximizable ? /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => setMaximized((m) => !m),
+                        "aria-label": maximized ? modal.restore ?? "Restore" : modal.maximize ?? "Maximize",
+                        className: "klun-modal__action",
+                        children: maximized ? /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M8 4v4H4M12 16v-4h4M12 4v4h4M8 16v-4H4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M4 8V4h4M16 12v4h-4M16 8V4h-4M4 12v4h4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                      }
+                    ) : null,
+                    closable ? /* @__PURE__ */ jsx("button", { type: "button", onClick: cancel, "aria-label": modal.close, className: "klun-modal__action klun-modal__close", children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M5 5l10 10M15 5L5 15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) }) : null
+                  ] }) : null
                 ]
               }
             ) : null,
@@ -10661,5 +10679,5 @@ var Popconfirm = forwardRef(function Popconfirm2({
 Popconfirm.displayName = "Popconfirm";
 
 export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu2 as ContextMenu, CopyButton, CounterInput, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DigitInput, Divider, Drawer, Dropdown, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Masonry, Menu, Message, Modal, Money, Notification, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner2 as Spinner, Splitter2 as Splitter, SplitterPanel, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, Wizard, arSA, deDE, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, plPL, primaryColorVars, ptBR, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
-//# sourceMappingURL=chunk-N4NBEKYR.js.map
-//# sourceMappingURL=chunk-N4NBEKYR.js.map
+//# sourceMappingURL=chunk-3XJ5FN4P.js.map
+//# sourceMappingURL=chunk-3XJ5FN4P.js.map