klun-ui 0.1.4 → 0.1.6

package/dist/{chunk-OZ5MAWZC.js → chunk-Z2TY6K3O.js}

@@ -9836,29 +9836,83 @@ function Confirm(opts = {}) {
     root.render(/* @__PURE__ */ jsx(ConfirmDialog, { opts, onClose: close }));
   });
 }
-var Drawer = forwardRef(function Drawer2({ open, onClose, title, side = "right", width = 400, children, footer, className, style, ...props }, ref) {
+var Drawer = forwardRef(function Drawer2({
+  open,
+  onClose,
+  title,
+  placement,
+  side,
+  width = 378,
+  height = 378,
+  size = "default",
+  closable = true,
+  maskClosable = true,
+  mask = true,
+  keyboard = true,
+  extra,
+  footer,
+  zIndex,
+  afterOpenChange,
+  children,
+  className,
+  style,
+  ...props
+}, ref) {
   const { drawer } = useLocale();
+  const place = placement ?? side ?? "right";
+  const horizontal = place === "left" || place === "right";
+  const prevOpen = useRef(open);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape" && keyboard && closable) onClose?.();
+    };
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open, keyboard, closable, onClose]);
+  useEffect(() => {
+    if (prevOpen.current !== open) {
+      afterOpenChange?.(open);
+      prevOpen.current = open;
+    }
+  }, [open]);
   if (!open) return null;
-  return /* @__PURE__ */ jsx("div", { className: cx("klun-drawer", `klun-drawer--${side}`), onClick: onClose, children: /* @__PURE__ */ jsxs(
+  const axis = size === "large" ? 736 : horizontal ? width : height;
+  const panelStyle = horizontal ? { width: axis, height: "100%", ...style } : { height: axis, width: "100%", ...style };
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
-      role: "dialog",
-      "aria-modal": "true",
-      onClick: (e) => e.stopPropagation(),
-      className: cx("klun-drawer__panel", className),
-      style: { width, ...style },
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "klun-drawer__header", children: [
-          /* @__PURE__ */ jsx("div", { className: "klun-drawer__title", children: title }),
-          /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, "aria-label": drawer.close, className: "klun-drawer__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" }) }) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "klun-drawer__body", children }),
-        footer ? /* @__PURE__ */ jsx("div", { className: "klun-drawer__footer", children: footer }) : null
-      ]
+      className: cx("klun-drawer", `klun-drawer--${place}`, !mask && "klun-drawer--no-mask"),
+      style: zIndex != null ? { zIndex } : void 0,
+      onClick: maskClosable ? onClose : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          role: "dialog",
+          "aria-modal": "true",
+          onClick: (e) => e.stopPropagation(),
+          className: cx("klun-drawer__panel", className),
+          style: panelStyle,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "klun-drawer__header", children: [
+              /* @__PURE__ */ jsx("div", { className: "klun-drawer__title", children: title }),
+              extra ? /* @__PURE__ */ jsx("div", { className: "klun-drawer__extra", children: extra }) : null,
+              closable ? /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, "aria-label": drawer.close, className: "klun-drawer__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
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "klun-drawer__body", children }),
+            footer ? /* @__PURE__ */ jsx("div", { className: "klun-drawer__footer", children: footer }) : null
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 Drawer.displayName = "Drawer";
 var Dropdown = forwardRef(function Dropdown2({ trigger, items: items2 = [], align = "left", width = 220, className, ...props }, ref) {
@@ -9916,46 +9970,133 @@ var Dropdown = forwardRef(function Dropdown2({ trigger, items: items2 = [], alig
   ] });
 });
 Dropdown.displayName = "Dropdown";
-var Modal = forwardRef(function Modal2({ open, onClose, title, description, icon, children, footer, width = 440, closable = true, closeOnBackdrop = true, className, style, ...props }, ref) {
+var Modal = forwardRef(function Modal2({
+  open,
+  onClose,
+  onOk,
+  onCancel,
+  title,
+  description,
+  icon,
+  footer,
+  okText,
+  cancelText,
+  confirmLoading = false,
+  okType = "primary",
+  okButtonProps,
+  cancelButtonProps,
+  width = 520,
+  centered = false,
+  closable = true,
+  maskClosable,
+  closeOnBackdrop,
+  keyboard = true,
+  mask = true,
+  draggable = false,
+  zIndex,
+  afterClose,
+  afterOpenChange,
+  children,
+  className,
+  style,
+  ...props
+}, ref) {
   const { modal } = useLocale();
+  const cancel = onCancel ?? onClose;
+  const backdropClosable = maskClosable ?? closeOnBackdrop ?? true;
+  const [pos, setPos] = useState({ x: 0, y: 0 });
+  const drag = useRef(null);
+  const prevOpen = useRef(open);
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
-      if (e.key === "Escape" && closable) onClose?.();
+      if (e.key === "Escape" && keyboard && closable) cancel?.();
     };
     document.addEventListener("keydown", onKey);
-    const prev = document.body.style.overflow;
+    const prevOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
     return () => {
       document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = prev;
+      document.body.style.overflow = prevOverflow;
     };
-  }, [open, closable, onClose]);
+  }, [open, keyboard, closable, cancel]);
+  useEffect(() => {
+    if (open) setPos({ x: 0, y: 0 });
+    if (prevOpen.current !== open) {
+      afterOpenChange?.(open);
+      if (!open) afterClose?.();
+      prevOpen.current = open;
+    }
+  }, [open]);
   if (!open) return null;
-  return /* @__PURE__ */ jsx("div", { className: "klun-modal", onClick: closeOnBackdrop && closable ? onClose : void 0, children: /* @__PURE__ */ jsxs(
+  const startDrag = (e) => {
+    if (!draggable) return;
+    if (e.target.closest(".klun-modal__close")) return;
+    drag.current = { sx: e.clientX, sy: e.clientY, ox: pos.x, oy: pos.y };
+    const move = (ev) => {
+      if (!drag.current) return;
+      setPos({
+        x: drag.current.ox + (ev.clientX - drag.current.sx),
+        y: drag.current.oy + (ev.clientY - drag.current.sy)
+      });
+    };
+    const up = () => {
+      drag.current = null;
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+    };
+    document.addEventListener("mousemove", move);
+    document.addEventListener("mouseup", up);
+  };
+  const defaultFooter = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { variant: "neutral", appearance: "stroke", disabled: confirmLoading, onClick: cancel, ...cancelButtonProps, children: cancelText ?? "Cancel" }),
+    /* @__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 = {
+    width,
+    ...pos.x || pos.y ? { transform: `translate(${pos.x}px, ${pos.y}px)` } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      ref,
-      role: "dialog",
-      "aria-modal": "true",
-      onClick: (e) => e.stopPropagation(),
-      className: cx("klun-modal__dialog", className),
-      style: { width, ...style },
-      ...props,
-      children: [
-        title || icon ? /* @__PURE__ */ jsxs("div", { className: "klun-modal__header", children: [
-          icon ? /* @__PURE__ */ jsx("div", { className: "klun-modal__icon", children: icon }) : null,
-          /* @__PURE__ */ jsxs("div", { className: "klun-modal__heading", children: [
-            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: onClose, "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
-        ] }) : null,
-        children ? /* @__PURE__ */ jsx("div", { className: "klun-modal__body", children }) : null,
-        footer ? /* @__PURE__ */ jsx("div", { className: cx("klun-modal__footer", !children && "klun-modal__footer--flush"), children: footer }) : null
-      ]
+      className: cx("klun-modal", centered && "klun-modal--centered", !mask && "klun-modal--no-mask"),
+      style: zIndex != null ? { zIndex } : void 0,
+      onClick: backdropClosable && closable ? cancel : void 0,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          role: "dialog",
+          "aria-modal": "true",
+          onClick: (e) => e.stopPropagation(),
+          className: cx("klun-modal__dialog", className),
+          style: dialogStyle,
+          ...props,
+          children: [
+            title || icon ? /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cx("klun-modal__header", draggable && "klun-modal__header--draggable"),
+                onMouseDown: startDrag,
+                children: [
+                  icon ? /* @__PURE__ */ jsx("div", { className: "klun-modal__icon", children: icon }) : null,
+                  /* @__PURE__ */ jsxs("div", { className: "klun-modal__heading", children: [
+                    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
+                ]
+              }
+            ) : null,
+            children ? /* @__PURE__ */ jsx("div", { className: "klun-modal__body", children }) : null,
+            resolvedFooter ? /* @__PURE__ */ jsx("div", { className: cx("klun-modal__footer", !children && "klun-modal__footer--flush"), children: resolvedFooter }) : null
+          ]
+        }
+      )
     }
-  ) });
+  );
 });
 Modal.displayName = "Modal";
 var Popconfirm = forwardRef(function Popconfirm2({
@@ -10068,5 +10209,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, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, CopyButton, CounterInput, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DigitInput, Divider, Drawer, Dropdown, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, 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, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW };
-//# sourceMappingURL=chunk-OZ5MAWZC.js.map
-//# sourceMappingURL=chunk-OZ5MAWZC.js.map
+//# sourceMappingURL=chunk-Z2TY6K3O.js.map
+//# sourceMappingURL=chunk-Z2TY6K3O.js.map