@duskmoon-dev/components 0.1.2

package/dist/components/upload/Upload.types.d.ts

@@ -0,0 +1,55 @@
+import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+export type UploadListType = "text" | "picture" | "picture-card";
+export type UploadFileStatus = "uploading" | "done" | "error" | "removed";
+export interface UploadFile<T = unknown> {
+    uid?: string;
+    name: string;
+    status?: UploadFileStatus;
+    percent?: number;
+    size?: number;
+    type?: string;
+    url?: string;
+    thumbUrl?: string;
+    response?: T;
+    error?: Error;
+    originFileObj?: File;
+}
+export interface UploadChangeParam<T = unknown> {
+    file: UploadFile<T>;
+    fileList: UploadFile<T>[];
+    event?: ProgressEvent | {
+        percent?: number;
+    };
+}
+export interface UploadRequestOption<T = unknown> {
+    action?: string;
+    file: File;
+    filename: string;
+    onError?: (error: Error) => void;
+    onProgress?: (event: {
+        percent?: number;
+    }) => void;
+    onSuccess?: (response?: T) => void;
+}
+export type UploadBeforeUploadResult = boolean | File | Blob | UploadListIgnore | Promise<boolean | File | Blob | UploadListIgnore>;
+export type UploadListIgnore = symbol;
+export interface UploadProps extends Omit<ComponentProps<"div">, "children" | "defaultValue" | "onChange"> {
+    accept?: string;
+    action?: string;
+    beforeUpload?: (file: File, fileList: File[]) => UploadBeforeUploadResult;
+    children?: ReactNode;
+    customRequest?: (options: UploadRequestOption) => void;
+    defaultFileList?: UploadFile[];
+    disabled?: boolean;
+    fileList?: UploadFile[];
+    listType?: UploadListType;
+    multiple?: boolean;
+    onChange?: (info: UploadChangeParam) => void;
+    onPreview?: (file: UploadFile) => void;
+    onRemove?: (file: UploadFile) => boolean | Promise<boolean> | void;
+}
+export type UploadDraggerProps = UploadProps;
+export type UploadComponent = ForwardRefExoticComponent<UploadProps & RefAttributes<HTMLDivElement>> & {
+    Dragger: ForwardRefExoticComponent<UploadDraggerProps & RefAttributes<HTMLDivElement>>;
+    LIST_IGNORE: UploadListIgnore;
+};

package/dist/components/upload/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Upload";
+export * from "./Upload.types";

package/dist/components/upload/index.js

@@ -0,0 +1,388 @@
+"use client";
+
+// src/components/upload/Upload.tsx
+import React, { forwardRef, useLayoutEffect, useRef, useState } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/upload.ts
+var uploadBaseClass = "file-upload";
+var uploadTriggerClass = "file-upload-trigger";
+var uploadInputClass = "file-upload-input";
+var uploadDropzoneClass = "file-upload-dropzone";
+var uploadDropzoneDragoverClass = "file-upload-dropzone-dragover";
+var uploadListClass = "file-upload-list";
+var uploadItemClass = "file-upload-item";
+var uploadItemInfoClass = "file-upload-item-info";
+var uploadItemNameClass = "file-upload-item-name";
+var uploadItemSizeClass = "file-upload-item-size";
+var uploadItemActionsClass = "file-upload-item-actions";
+var uploadPreviewClass = "file-upload-item-preview";
+var uploadRemoveClass = "file-upload-item-remove";
+var uploadProgressClass = "file-upload-progress";
+var uploadProgressBarClass = "file-upload-progress-bar";
+var uploadListTypeClasses = {
+  text: "file-upload-list-text",
+  picture: "file-upload-list-picture",
+  "picture-card": "file-upload-list-picture-card"
+};
+function getUploadClasses({
+  disabled,
+  dragger,
+  dragover,
+  className
+}) {
+  return cn(uploadBaseClass, dragger && "file-upload-dragger", disabled && "file-upload-disabled", dragover && uploadDropzoneDragoverClass, className);
+}
+function getUploadListClasses({
+  listType = "text",
+  className
+}) {
+  return cn(uploadListClass, uploadListTypeClasses[listType], className);
+}
+function getUploadItemClasses({
+  status,
+  className
+}) {
+  return cn(uploadItemClass, status === "error" && "file-upload-item-error", status === "done" && "file-upload-item-success", className);
+}
+
+// src/components/upload/Upload.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var LIST_IGNORE = Symbol("Upload.LIST_IGNORE");
+var uidSeed = 0;
+function nextUid() {
+  uidSeed += 1;
+  return `upload-${Date.now()}-${uidSeed}`;
+}
+function ensureUid(file) {
+  return file.uid ? file : { ...file, uid: nextUid() };
+}
+function fileToUploadFile(file) {
+  return {
+    uid: nextUid(),
+    name: file.name,
+    size: file.size,
+    type: file.type,
+    status: "uploading",
+    percent: 0,
+    originFileObj: file
+  };
+}
+function toFileList(files) {
+  return Array.from(files);
+}
+function formatSize(size) {
+  if (size === undefined)
+    return null;
+  if (size < 1024)
+    return `${size} B`;
+  if (size < 1024 * 1024)
+    return `${Math.round(size / 102.4) / 10} KB`;
+  return `${Math.round(size / 1024 / 102.4) / 10} MB`;
+}
+function joinClasses(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function UploadRoot({
+  accept,
+  action,
+  beforeUpload,
+  children,
+  className,
+  customRequest,
+  defaultFileList = [],
+  disabled,
+  fileList,
+  listType = "text",
+  multiple,
+  onChange,
+  onPreview,
+  onRemove,
+  dragger,
+  ...props
+}, ref) {
+  const inputRef = useRef(null);
+  const [dragover, setDragover] = useState(false);
+  const [internalFileList, setInternalFileList] = useState(() => defaultFileList.map(ensureUid));
+  const controlled = fileList !== undefined;
+  const mergedFileList = (controlled ? fileList : internalFileList).map(ensureUid);
+  const currentFileListRef = useRef(mergedFileList);
+  useLayoutEffect(() => {
+    currentFileListRef.current = mergedFileList;
+  }, [mergedFileList]);
+  function commitFileList(nextFileList, file, event) {
+    currentFileListRef.current = nextFileList;
+    if (!controlled) {
+      setInternalFileList(nextFileList);
+    }
+    onChange?.({ file, fileList: nextFileList, event });
+  }
+  function replaceFile(uid, patch, event) {
+    const nextFileList = currentFileListRef.current.map((item) => item.uid === uid ? { ...item, ...patch } : item);
+    const nextFile = nextFileList.find((item) => item.uid === uid);
+    if (nextFile) {
+      commitFileList(nextFileList, nextFile, event);
+    }
+  }
+  function startRequest(uploadFile, sourceFile) {
+    if (!customRequest) {
+      replaceFile(uploadFile.uid, { status: "done", percent: 100 });
+      return;
+    }
+    customRequest({
+      action,
+      file: sourceFile,
+      filename: sourceFile.name,
+      onProgress: (event) => {
+        replaceFile(uploadFile.uid, { percent: event.percent }, event);
+      },
+      onSuccess: (response) => {
+        replaceFile(uploadFile.uid, {
+          status: "done",
+          percent: 100,
+          response
+        });
+      },
+      onError: (error) => {
+        replaceFile(uploadFile.uid, { status: "error", error });
+      }
+    });
+  }
+  async function addFiles(files) {
+    if (disabled) {
+      return;
+    }
+    for (const sourceFile of files) {
+      let uploadSource = sourceFile;
+      if (beforeUpload) {
+        const result = await beforeUpload(sourceFile, files);
+        if (result === LIST_IGNORE) {
+          continue;
+        }
+        const uploadFile = fileToUploadFile(sourceFile);
+        if (result === false) {
+          const nextFile3 = {
+            ...uploadFile,
+            status: undefined,
+            percent: undefined
+          };
+          commitFileList([...currentFileListRef.current, nextFile3], nextFile3);
+          continue;
+        }
+        if (result instanceof File) {
+          uploadSource = result;
+        } else if (result instanceof Blob) {
+          uploadSource = new File([result], sourceFile.name, {
+            type: result.type || sourceFile.type
+          });
+        }
+        const nextFile2 = fileToUploadFile(uploadSource);
+        commitFileList([...currentFileListRef.current, nextFile2], nextFile2);
+        startRequest(nextFile2, uploadSource);
+        continue;
+      }
+      const nextFile = fileToUploadFile(uploadSource);
+      commitFileList([...currentFileListRef.current, nextFile], nextFile);
+      startRequest(nextFile, uploadSource);
+    }
+  }
+  function openFileDialog() {
+    if (!disabled) {
+      inputRef.current?.click();
+    }
+  }
+  function commitRemove(file) {
+    const removedFile = { ...file, status: "removed" };
+    const nextFileList = currentFileListRef.current.filter((item) => item.uid !== file.uid);
+    commitFileList(nextFileList, removedFile);
+  }
+  function removeFile(file) {
+    if (disabled) {
+      return;
+    }
+    const allowed = onRemove?.(file);
+    if (allowed instanceof Promise) {
+      allowed.then((nextAllowed) => {
+        if (nextAllowed !== false) {
+          commitRemove(file);
+        }
+      });
+      return;
+    }
+    if (allowed !== false) {
+      commitRemove(file);
+    }
+  }
+  function renderTrigger() {
+    const trigger = children ?? /* @__PURE__ */ jsx("button", {
+      type: "button",
+      children: "Upload"
+    });
+    if (dragger) {
+      return /* @__PURE__ */ jsx("div", {
+        className: uploadDropzoneClass,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-disabled": disabled,
+        onClick: openFileDialog,
+        onKeyDown: (event) => {
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            openFileDialog();
+          }
+        },
+        onDragEnter: (event) => {
+          event.preventDefault();
+          if (!disabled)
+            setDragover(true);
+        },
+        onDragOver: (event) => {
+          event.preventDefault();
+          if (!disabled)
+            setDragover(true);
+        },
+        onDragLeave: () => setDragover(false),
+        onDrop: (event) => {
+          event.preventDefault();
+          setDragover(false);
+          addFiles(toFileList(event.dataTransfer.files));
+        },
+        children: trigger
+      });
+    }
+    if (React.isValidElement(trigger)) {
+      return React.cloneElement(trigger, {
+        className: joinClasses(uploadTriggerClass, trigger.props.className),
+        onClick: (event) => {
+          trigger.props.onClick?.(event);
+          openFileDialog();
+        }
+      });
+    }
+    return /* @__PURE__ */ jsx("button", {
+      type: "button",
+      className: uploadTriggerClass,
+      disabled,
+      onClick: openFileDialog,
+      children: trigger
+    });
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getUploadClasses({
+      disabled,
+      dragger,
+      dragover,
+      className
+    }),
+    children: [
+      /* @__PURE__ */ jsx("input", {
+        ref: inputRef,
+        className: uploadInputClass,
+        type: "file",
+        hidden: true,
+        accept,
+        multiple,
+        disabled,
+        onChange: (event) => {
+          addFiles(toFileList(event.currentTarget.files ?? []));
+          event.currentTarget.value = "";
+        }
+      }),
+      renderTrigger(),
+      mergedFileList.length > 0 ? /* @__PURE__ */ jsx("div", {
+        className: getUploadListClasses({ listType }),
+        children: mergedFileList.map((file) => {
+          const size = formatSize(file.size);
+          return /* @__PURE__ */ jsxs("div", {
+            className: getUploadItemClasses({ status: file.status }),
+            children: [
+              /* @__PURE__ */ jsxs("div", {
+                className: uploadItemInfoClass,
+                children: [
+                  /* @__PURE__ */ jsx("button", {
+                    type: "button",
+                    className: uploadPreviewClass,
+                    disabled,
+                    onClick: () => onPreview?.(file),
+                    children: /* @__PURE__ */ jsx("span", {
+                      className: uploadItemNameClass,
+                      children: file.name
+                    })
+                  }),
+                  size ? /* @__PURE__ */ jsx("span", {
+                    className: uploadItemSizeClass,
+                    children: size
+                  }) : null,
+                  typeof file.percent === "number" ? /* @__PURE__ */ jsx("div", {
+                    className: uploadProgressClass,
+                    role: "progressbar",
+                    "aria-valuemin": 0,
+                    "aria-valuemax": 100,
+                    "aria-valuenow": file.percent,
+                    children: /* @__PURE__ */ jsx("div", {
+                      className: uploadProgressBarClass,
+                      style: {
+                        width: `${Math.max(0, Math.min(100, file.percent))}%`
+                      }
+                    })
+                  }) : null
+                ]
+              }),
+              /* @__PURE__ */ jsx("div", {
+                className: uploadItemActionsClass,
+                children: /* @__PURE__ */ jsx("button", {
+                  type: "button",
+                  className: uploadRemoveClass,
+                  disabled,
+                  "aria-label": `Remove ${file.name}`,
+                  onClick: () => removeFile(file),
+                  children: "x"
+                })
+              })
+            ]
+          }, file.uid);
+        })
+      }) : null
+    ]
+  });
+}
+var UploadFrame = forwardRef(UploadRoot);
+UploadFrame.displayName = "Upload";
+var Dragger = forwardRef((props, ref) => /* @__PURE__ */ jsx(UploadFrame, {
+  ...props,
+  ref,
+  dragger: true
+}));
+Dragger.displayName = "Upload.Dragger";
+var Upload = UploadFrame;
+Upload.Dragger = Dragger;
+Upload.LIST_IGNORE = LIST_IGNORE;
+export {
+  Upload
+};

package/dist/components/watermark/Watermark.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { WatermarkProps } from "./Watermark.types";
+export declare const Watermark: React.ForwardRefExoticComponent<Omit<WatermarkProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/watermark/Watermark.types.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps, CSSProperties, ReactNode } from "react";
+export interface WatermarkFont {
+    color?: string;
+    fontSize?: number;
+    fontWeight?: CSSProperties["fontWeight"];
+    fontFamily?: string;
+    fontStyle?: CSSProperties["fontStyle"];
+}
+export interface WatermarkProps extends Omit<ComponentProps<"div">, "content"> {
+    content?: ReactNode;
+    image?: string;
+    width?: number;
+    height?: number;
+    rotate?: number;
+    zIndex?: number;
+    gap?: [number, number];
+    offset?: [number, number];
+    font?: WatermarkFont;
+    inherit?: boolean;
+}

package/dist/components/watermark/index.d.ts

@@ -0,0 +1,2 @@
+export { Watermark } from "./Watermark";
+export type { WatermarkFont, WatermarkProps } from "./Watermark.types";

package/dist/components/watermark/index.js

@@ -0,0 +1,109 @@
+"use client";
+
+// src/components/watermark/Watermark.tsx
+import { forwardRef, useMemo } from "react";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return clsx(inputs);
+}
+// src/classes/watermark.ts
+var watermarkBaseClass = "watermark";
+var watermarkContentClass = "watermark-content";
+function getWatermarkClasses({ className }) {
+  return cn(watermarkBaseClass, className);
+}
+
+// src/components/watermark/Watermark.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function encodeSvg(svg) {
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+function createWatermarkSvg({
+  content,
+  image,
+  width,
+  height,
+  rotate,
+  font
+}) {
+  const text = typeof content === "string" || typeof content === "number" ? String(content) : "";
+  const color = font?.color ?? "rgba(0, 0, 0, 0.12)";
+  const fontSize = font?.fontSize ?? 16;
+  const viewWidth = width ?? 180;
+  const viewHeight = height ?? 120;
+  if (image) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="${viewWidth}" height="${viewHeight}" viewBox="0 0 ${viewWidth} ${viewHeight}"><g transform="rotate(${rotate ?? -22} ${viewWidth / 2} ${viewHeight / 2})"><image href="${image}" width="${viewWidth}" height="${viewHeight}" opacity="0.16"/></g></svg>`;
+  }
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${viewWidth}" height="${viewHeight}" viewBox="0 0 ${viewWidth} ${viewHeight}"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="${color}" font-size="${fontSize}" font-family="${font?.fontFamily ?? "sans-serif"}" font-weight="${font?.fontWeight ?? 400}" font-style="${font?.fontStyle ?? "normal"}" transform="rotate(${rotate ?? -22} ${viewWidth / 2} ${viewHeight / 2})">${text}</text></svg>`;
+}
+var Watermark = forwardRef(({
+  children,
+  className,
+  content,
+  image,
+  width = 180,
+  height = 120,
+  rotate = -22,
+  zIndex = 9,
+  gap = [100, 100],
+  offset = [0, 0],
+  font,
+  inherit,
+  style,
+  ...props
+}, ref) => {
+  const backgroundImage = useMemo(() => encodeSvg(createWatermarkSvg({ content, image, width, height, rotate, font })), [content, font, height, image, rotate, width]);
+  return /* @__PURE__ */ jsxs("div", {
+    ...props,
+    ref,
+    className: getWatermarkClasses({ className }),
+    style: { position: "relative", ...style },
+    children: [
+      /* @__PURE__ */ jsx("div", {
+        className: watermarkContentClass,
+        children
+      }),
+      /* @__PURE__ */ jsx("div", {
+        "aria-hidden": "true",
+        "data-watermark-source": image ?? (typeof content === "string" || typeof content === "number" ? String(content) : undefined),
+        "data-inherit": inherit || undefined,
+        style: {
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "none",
+          zIndex,
+          backgroundImage,
+          backgroundRepeat: "repeat",
+          backgroundSize: `${width + gap[0]}px ${height + gap[1]}px`,
+          backgroundPosition: `${offset[0]}px ${offset[1]}px`
+        }
+      })
+    ]
+  });
+});
+Watermark.displayName = "Watermark";
+export {
+  Watermark
+};

package/dist/index.d.ts

@@ -0,0 +1,100 @@
+export * from "./theme";
+export * from "./utils";
+export * from "./infrastructure";
+import { getDmDatePickerLocale, getDmTheme, getUnstableRender, onDmThemeUpdate, setDmDatePickerLocale, setDmPrefixCls, setDmPrimaryColor, theme, unstableSetRender, usePersistedPageSize, version } from "./infrastructure";
+export { getDmDatePickerLocale, getDmTheme, getUnstableRender, onDmThemeUpdate, setDmDatePickerLocale, setDmPrefixCls, setDmPrimaryColor, theme, unstableSetRender, usePersistedPageSize, version, };
+export type { GetProp, GetProps, GetRef } from "./infrastructure";
+export type { Breakpoint } from "./components/grid";
+export * from "./components/button";
+export * from "./components/calendar";
+export * from "./components/card";
+export * from "./components/carousel";
+export * from "./components/cascader";
+export * from "./components/badge";
+export * from "./components/breadcrumb";
+export * from "./components/alert";
+export * from "./components/affix";
+export * from "./components/anchor";
+export * from "./components/app";
+export * from "./components/auto-complete";
+export * from "./components/avatar";
+export * from "./components/back-top";
+export * from "./components/checkbox";
+export * from "./components/col";
+export * from "./components/collapse";
+export * from "./components/config-provider";
+export * from "./components/color-picker";
+export * from "./components/date-picker";
+export * from "./components/descriptions";
+export * from "./components/divider";
+export * from "./components/drawer";
+export * from "./components/dm-auxiliary";
+export * from "./components/dm-breadcrumb";
+export * from "./components/dm-drawer";
+export * from "./components/dm-layout";
+export * from "./components/dm-menu";
+export * from "./components/dm-message";
+export * from "./components/dm-date-picker";
+export * from "./components/dm-infinite-scroll";
+export * from "./components/dm-page-header";
+export * from "./components/dm-pagination";
+export * from "./components/dm-pro-table";
+export * from "./components/dm-pro-table-inner";
+export * from "./components/dm-provider";
+export * from "./components/dm-query";
+export * from "./components/dm-search";
+export * from "./components/dm-splitter";
+export * from "./components/dm-status";
+export * from "./components/dm-tabs";
+export * from "./components/dm-table";
+export * from "./components/dm-toolbar";
+export * from "./components/dm-tree";
+export * from "./components/dm-truncate";
+export * from "./components/dropdown";
+export * from "./components/empty";
+export * from "./components/flex";
+export * from "./components/float-button";
+export * from "./components/form";
+export * from "./components/grid";
+export * from "./components/image";
+export * from "./components/input";
+export * from "./components/input-number";
+export * from "./components/layout";
+export * from "./components/list";
+export * from "./components/mentions";
+export * from "./components/menu";
+export * from "./components/message";
+export * from "./components/modal";
+export * from "./components/notification";
+export * from "./components/pagination";
+export * from "./components/popover";
+export * from "./components/popconfirm";
+export * from "./components/progress";
+export * from "./components/qr-code";
+export * from "./components/radio";
+export * from "./components/rate";
+export * from "./components/result";
+export * from "./components/row";
+export * from "./components/segmented";
+export * from "./components/select";
+export * from "./components/skeleton";
+export * from "./components/slider";
+export * from "./components/space";
+export * from "./components/spin";
+export * from "./components/splitter";
+export * from "./components/statistic";
+export * from "./components/steps";
+export * from "./components/switch";
+export * from "./components/tabs";
+export * from "./components/tag";
+export * from "./components/table";
+export * from "./components/time-picker";
+export * from "./components/timeline";
+export * from "./components/tooltip";
+export * from "./components/tour";
+export * from "./components/transfer";
+export * from "./components/tree";
+export * from "./components/tree-select";
+export * from "./components/typography";
+export * from "./components/upload";
+export * from "./components/watermark";