@duskmoon-dev/components 0.1.2

package/dist/components/dm-status/index.js

@@ -0,0 +1,369 @@
+"use client";
+
+// src/components/empty/Empty.tsx
+import { forwardRef } 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/empty.ts
+var emptyBaseClass = "empty";
+var emptyImageClass = "empty-image";
+var emptyDescriptionClass = "empty-description";
+var emptyFooterClass = "empty-footer";
+function getEmptyClasses({ className }) {
+  return cn(emptyBaseClass, className);
+}
+
+// src/components/empty/Empty.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultImage = /* @__PURE__ */ jsxs("svg", {
+  "aria-hidden": "true",
+  focusable: "false",
+  viewBox: "0 0 64 48",
+  width: "64",
+  height: "48",
+  children: [
+    /* @__PURE__ */ jsx("rect", {
+      x: "8",
+      y: "12",
+      width: "48",
+      height: "28",
+      rx: "4",
+      fill: "currentColor",
+      opacity: "0.16"
+    }),
+    /* @__PURE__ */ jsx("path", {
+      d: "M16 20h32M16 28h20",
+      stroke: "currentColor",
+      strokeWidth: "3",
+      strokeLinecap: "round",
+      opacity: "0.38"
+    })
+  ]
+});
+var simpleImage = /* @__PURE__ */ jsx("svg", {
+  "aria-hidden": "true",
+  focusable: "false",
+  viewBox: "0 0 48 36",
+  width: "48",
+  height: "36",
+  children: /* @__PURE__ */ jsx("rect", {
+    x: "6",
+    y: "10",
+    width: "36",
+    height: "20",
+    rx: "3",
+    fill: "currentColor",
+    opacity: "0.16"
+  })
+});
+var EmptyBase = forwardRef(({
+  image = defaultImage,
+  imageStyle,
+  description = "No data",
+  children,
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsxs("div", {
+  ref,
+  className: getEmptyClasses({ className }),
+  ...props,
+  children: [
+    image !== null && image !== false ? /* @__PURE__ */ jsx("div", {
+      className: emptyImageClass,
+      style: imageStyle,
+      children: image
+    }) : null,
+    description !== false ? /* @__PURE__ */ jsx("div", {
+      className: emptyDescriptionClass,
+      children: description
+    }) : null,
+    children ? /* @__PURE__ */ jsx("div", {
+      className: emptyFooterClass,
+      children
+    }) : null
+  ]
+}));
+EmptyBase.displayName = "Empty";
+var Empty = EmptyBase;
+Empty.PRESENTED_IMAGE_DEFAULT = defaultImage;
+Empty.PRESENTED_IMAGE_SIMPLE = simpleImage;
+// src/components/spin/Spin.tsx
+import { forwardRef as forwardRef2, useEffect, useState } from "react";
+
+// src/classes/spin.ts
+var spinBaseClass = "spin";
+var spinSpinningClass = "spin-spinning";
+var spinNestedLoadingClass = "spin-nested-loading";
+var spinContainerClass = "spin-container";
+var spinBlurClass = "spin-blur";
+var spinDotClass = "spin-dot";
+var spinTipClass = "spin-tip";
+var spinFullscreenClass = "spin-fullscreen";
+var spinSizeClasses = {
+  small: "spin-sm progress-circular-sm",
+  default: "spin-md progress-circular-md",
+  large: "spin-lg progress-circular-lg"
+};
+function getSpinClasses({
+  spinning,
+  size = "default",
+  fullscreen,
+  className
+}) {
+  return cn(spinBaseClass, "progress-circular progress-circular-indeterminate", spinSizeClasses[size], spinning && spinSpinningClass, fullscreen && spinFullscreenClass, className);
+}
+
+// src/components/spin/Spin.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultIndicator;
+function setDefaultIndicator(indicator) {
+  defaultIndicator = indicator;
+}
+function useDelayedSpinning(spinning, delay) {
+  const [delayedActive, setDelayedActive] = useState(false);
+  const hasDelay = Boolean(delay && delay > 0);
+  useEffect(() => {
+    if (!hasDelay) {
+      return;
+    }
+    if (!spinning) {
+      const resetTimer2 = window.setTimeout(() => setDelayedActive(false), 0);
+      return () => window.clearTimeout(resetTimer2);
+    }
+    const resetTimer = window.setTimeout(() => setDelayedActive(false), 0);
+    const showTimer = window.setTimeout(() => setDelayedActive(true), delay);
+    return () => {
+      window.clearTimeout(resetTimer);
+      window.clearTimeout(showTimer);
+    };
+  }, [delay, hasDelay, spinning]);
+  if (!hasDelay) {
+    return spinning;
+  }
+  return spinning && delayedActive;
+}
+var SpinBase = forwardRef2(({
+  spinning = true,
+  size = "default",
+  tip,
+  indicator,
+  delay,
+  fullscreen,
+  wrapperClassName,
+  className,
+  children,
+  ...props
+}, ref) => {
+  const active = useDelayedSpinning(spinning, delay);
+  const finalIndicator = indicator ?? defaultIndicator;
+  const spin = /* @__PURE__ */ jsxs2("div", {
+    ref,
+    role: "status",
+    "aria-live": "polite",
+    "aria-busy": active,
+    className: getSpinClasses({
+      spinning: active,
+      size,
+      fullscreen,
+      className
+    }),
+    ...props,
+    children: [
+      finalIndicator ?? /* @__PURE__ */ jsx2("span", {
+        className: spinDotClass
+      }),
+      tip ? /* @__PURE__ */ jsx2("div", {
+        className: spinTipClass,
+        children: tip
+      }) : null
+    ]
+  });
+  if (!children) {
+    return spin;
+  }
+  return /* @__PURE__ */ jsxs2("div", {
+    className: cn(spinNestedLoadingClass, wrapperClassName),
+    children: [
+      active ? spin : null,
+      /* @__PURE__ */ jsx2("div", {
+        className: cn(spinContainerClass, active && spinBlurClass),
+        children
+      })
+    ]
+  });
+});
+SpinBase.displayName = "Spin";
+var Spin = SpinBase;
+Spin.setDefaultIndicator = setDefaultIndicator;
+// src/components/dm-status/DmStatus.tsx
+import { forwardRef as forwardRef3 } from "react";
+
+// src/classes/dm-status.ts
+var dmStatusBaseClass = "dm-status";
+var dmStatusLoadingClass = "dm-status-loading";
+var dmStatusContentClass = "dm-status-content";
+var dmStatusImageClass = "dm-status-image";
+var dmStatusTypeClasses = {
+  empty: "dm-status-empty",
+  loading: "dm-status-loading-state",
+  error: "dm-status-error",
+  success: "dm-status-success"
+};
+function getDmStatusClasses({
+  status,
+  className
+}) {
+  return cn(dmStatusBaseClass, dmStatusTypeClasses[status], className);
+}
+
+// src/components/dm-status/DmStatus.tsx
+import { jsx as jsx3, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+var defaultDescriptions = {
+  empty: "No data",
+  error: "Loading failed"
+};
+var emptyImage = /* @__PURE__ */ jsxs3("svg", {
+  "aria-hidden": "true",
+  focusable: "false",
+  viewBox: "0 0 96 72",
+  width: "96",
+  height: "72",
+  children: [
+    /* @__PURE__ */ jsx3("rect", {
+      x: "14",
+      y: "18",
+      width: "68",
+      height: "40",
+      rx: "6",
+      fill: "currentColor",
+      opacity: "0.12"
+    }),
+    /* @__PURE__ */ jsx3("path", {
+      d: "M28 31h40M28 42h24",
+      stroke: "currentColor",
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      opacity: "0.32"
+    })
+  ]
+});
+var errorImage = /* @__PURE__ */ jsxs3("svg", {
+  "aria-hidden": "true",
+  focusable: "false",
+  viewBox: "0 0 96 72",
+  width: "96",
+  height: "72",
+  children: [
+    /* @__PURE__ */ jsx3("circle", {
+      cx: "48",
+      cy: "36",
+      r: "25",
+      fill: "currentColor",
+      opacity: "0.12"
+    }),
+    /* @__PURE__ */ jsx3("path", {
+      d: "M39 27l18 18M57 27L39 45",
+      stroke: "currentColor",
+      strokeWidth: "5",
+      strokeLinecap: "round",
+      opacity: "0.48"
+    })
+  ]
+});
+function normalizeHeight(height) {
+  if (typeof height === "number") {
+    return `${height}px`;
+  }
+  return height ?? "100%";
+}
+function normalizeImage(image, imageStyle) {
+  if (typeof image !== "string") {
+    return image;
+  }
+  return /* @__PURE__ */ jsx3("img", {
+    src: image,
+    alt: "",
+    className: dmStatusImageClass,
+    style: imageStyle
+  });
+}
+var DmStatus = forwardRef3(({
+  status = "empty",
+  height,
+  style,
+  loadingProps,
+  description,
+  image,
+  imageStyle,
+  className,
+  children,
+  ...props
+}, ref) => {
+  if (status === "success") {
+    return /* @__PURE__ */ jsx3(Fragment, {
+      children
+    });
+  }
+  const mergedStyle = {
+    height: normalizeHeight(height),
+    ...style
+  };
+  if (status === "loading") {
+    return /* @__PURE__ */ jsx3("div", {
+      ref,
+      className: getDmStatusClasses({ status, className }),
+      style: mergedStyle,
+      ...props,
+      children: /* @__PURE__ */ jsx3(Spin, {
+        ...loadingProps,
+        wrapperClassName: dmStatusLoadingClass,
+        children
+      })
+    });
+  }
+  const finalImage = normalizeImage(image ?? (status === "error" ? errorImage : emptyImage), imageStyle);
+  const finalDescription = description ?? defaultDescriptions[status === "error" ? "error" : "empty"];
+  return /* @__PURE__ */ jsx3("div", {
+    ref,
+    className: getDmStatusClasses({ status, className }),
+    style: mergedStyle,
+    ...props,
+    children: /* @__PURE__ */ jsx3("div", {
+      className: dmStatusContentClass,
+      children: /* @__PURE__ */ jsx3(Empty, {
+        image: finalImage,
+        imageStyle: typeof image === "string" ? undefined : imageStyle,
+        description: finalDescription,
+        children
+      })
+    })
+  });
+});
+DmStatus.displayName = "DmStatus";
+export {
+  DmStatus
+};

package/dist/components/dm-table/DmTable.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { TableRecord } from "../table/Table.types";
+import type { DmTableColumnType, DmTableProps } from "./DmTable.types";
+export declare function filterDmTableColumn<T>(column: DmTableColumnType<T>): DmTableColumnType<T> | false | null;
+export declare function DmTable<T extends TableRecord = TableRecord>({ name, extra, indicators, pagination, columns: inputColumns, columnSettingVisible, onColumnsChange, columnState, searchProps, tableExtra, className, dataSource, rowSelection, ...props }: DmTableProps<T>): React.JSX.Element;
+export declare namespace DmTable {
+    var displayName: string;
+}

package/dist/components/dm-table/DmTable.types.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+import type { DmPaginationProps } from "../dm-pagination";
+import type { DmSearchItem, DmSearchProps } from "../dm-search";
+import type { TableColumnType, TableProps, TableRecord } from "../table/Table.types";
+export interface DmTableColumnType<T = TableRecord> extends TableColumnType<T> {
+    hideInTable?: boolean;
+    onlySearch?: boolean;
+    search?: false | DmSearchItem["search"];
+    children?: DmTableColumnsType<T>;
+}
+export type DmTableColumnsType<T = TableRecord> = DmTableColumnType<T>[];
+export interface DmTableProps<T = TableRecord> extends Omit<TableProps<T>, "columns" | "pagination"> {
+    name?: ReactNode;
+    extra?: ReactNode;
+    indicators?: ReactNode;
+    onColumnsChange?: (columns: DmTableColumnsType<T>) => void;
+    columnSettingVisible?: boolean;
+    columnState?: {
+        persistenceKey: string;
+        persistenceType?: "localStorage";
+    };
+    columns: DmTableColumnsType<T>;
+    searchProps?: Omit<DmSearchProps, "items"> & {
+        items?: DmSearchItem[];
+    };
+    tableExtra?: ReactNode;
+    pagination?: false | DmPaginationProps;
+}

package/dist/components/dm-table/index.d.ts

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