@duskmoon-dev/components 0.1.2

package/dist/components/dm-pagination/DmPagination.d.ts

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

package/dist/components/dm-pagination/DmPagination.types.d.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties } from "react";
+import type { PaginationProps, PaginationShowTotal } from "../pagination/Pagination.types";
+import type { DmPaginationAlign } from "../../classes/dm-pagination";
+export interface DmPaginationLocale {
+    refresh?: string;
+    showTotal?: (total: number, range: [number, number], selectedTotal: number) => string;
+    showTotalSimple?: (total: number, range: [number, number], selectedTotal: number) => string;
+    selected?: (selectedTotal: number) => string;
+}
+export interface DmPaginationProps extends Omit<PaginationProps, "children" | "showTotal"> {
+    selectedTotal?: number;
+    refresh?: () => void;
+    showRefresh?: boolean;
+    showPagination?: boolean;
+    loading?: boolean;
+    wrapperStyle?: CSSProperties;
+    align?: DmPaginationAlign;
+    showTotalFullMessage?: boolean;
+    responsiveSimple?: boolean;
+    locale?: DmPaginationLocale;
+    showTotal?: PaginationShowTotal;
+}

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

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

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

@@ -0,0 +1,469 @@
+"use client";
+
+// src/components/pagination/Pagination.tsx
+import {
+  forwardRef,
+  useMemo,
+  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/pagination.ts
+var paginationBaseClass = "pagination";
+var paginationItemClass = "pagination-item";
+var paginationItemActiveClass = "pagination-item-active";
+var paginationItemDisabledClass = "pagination-item-disabled";
+var paginationPrevClass = "pagination-prev";
+var paginationNextClass = "pagination-next";
+var paginationEllipsisClass = "pagination-ellipsis";
+var paginationCompactClass = "pagination-compact";
+var paginationInfoClass = "pagination-info";
+var paginationInfoTextClass = "pagination-info-text";
+var paginationInputClass = "pagination-input";
+var paginationResponsiveClass = "pagination-responsive";
+var paginationSizeClasses = {
+  sm: "pagination-sm",
+  md: "",
+  lg: "pagination-lg"
+};
+function getPaginationClasses({
+  size = "md",
+  compact,
+  className
+}) {
+  return cn(paginationBaseClass, paginationResponsiveClass, paginationSizeClasses[size], compact && paginationCompactClass, className);
+}
+function getPaginationItemClasses({
+  active,
+  disabled
+}) {
+  return cn(paginationItemClass, active && paginationItemActiveClass, disabled && paginationItemDisabledClass);
+}
+
+// src/components/pagination/Pagination.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultPageSizeOptions = [10, 20, 50, 100];
+function toPositiveInteger(value, fallback) {
+  if (!Number.isFinite(value) || value === undefined) {
+    return fallback;
+  }
+  return Math.max(1, Math.floor(value));
+}
+function clampPage(page, pageCount) {
+  return Math.min(pageCount, Math.max(1, Math.floor(page)));
+}
+function getPageCount(total, pageSize) {
+  return Math.max(1, Math.ceil(Math.max(0, total) / pageSize));
+}
+function getRange(current, pageSize, total) {
+  if (total <= 0) {
+    return [0, 0];
+  }
+  const start = (current - 1) * pageSize + 1;
+  const end = Math.min(total, current * pageSize);
+  return [start, end];
+}
+function getPageTokens(current, pageCount) {
+  if (pageCount <= 7) {
+    return Array.from({ length: pageCount }, (_, index) => index + 1);
+  }
+  const pages = new Set([1, pageCount, current - 1, current, current + 1]);
+  if (current <= 4) {
+    [2, 3, 4, 5].forEach((page) => pages.add(page));
+  }
+  if (current >= pageCount - 3) {
+    [pageCount - 4, pageCount - 3, pageCount - 2, pageCount - 1].forEach((page) => pages.add(page));
+  }
+  const sortedPages = Array.from(pages).filter((page) => page >= 1 && page <= pageCount).sort((first, second) => first - second);
+  return sortedPages.reduce((tokens, page) => {
+    const previous = tokens[tokens.length - 1];
+    if (typeof previous === "number") {
+      const gap = page - previous;
+      if (gap === 2) {
+        tokens.push(previous + 1);
+      } else if (gap > 2) {
+        tokens.push("ellipsis");
+      }
+    }
+    tokens.push(page);
+    return tokens;
+  }, []);
+}
+function getSizeOptions(pageSize) {
+  return Array.from(new Set([...defaultPageSizeOptions, pageSize])).sort((first, second) => first - second);
+}
+var Pagination = forwardRef(({
+  current,
+  defaultCurrent = 1,
+  pageSize,
+  defaultPageSize = 10,
+  total = 0,
+  onChange,
+  disabled,
+  simple,
+  showSizeChanger,
+  showQuickJumper,
+  showTotal,
+  size = "md",
+  className,
+  ...props
+}, ref) => {
+  const isCurrentControlled = current !== undefined;
+  const isPageSizeControlled = pageSize !== undefined;
+  const [internalCurrent, setInternalCurrent] = useState(defaultCurrent);
+  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
+  const [quickJumpValue, setQuickJumpValue] = useState("");
+  const mergedPageSize = toPositiveInteger(pageSize ?? internalPageSize, defaultPageSize);
+  const pageCount = getPageCount(total, mergedPageSize);
+  const mergedCurrent = clampPage(toPositiveInteger(current ?? internalCurrent, defaultCurrent), pageCount);
+  const pageTokens = useMemo(() => getPageTokens(mergedCurrent, pageCount), [mergedCurrent, pageCount]);
+  const range = getRange(mergedCurrent, mergedPageSize, total);
+  function changePage(nextPage, nextPageSize = mergedPageSize) {
+    const nextPageCount = getPageCount(total, nextPageSize);
+    const normalizedPage = clampPage(nextPage, nextPageCount);
+    if (!isCurrentControlled) {
+      setInternalCurrent(normalizedPage);
+    }
+    if (!isPageSizeControlled) {
+      setInternalPageSize(nextPageSize);
+    }
+    onChange?.(normalizedPage, nextPageSize);
+  }
+  function handlePageSizeChange(event) {
+    const nextPageSize = toPositiveInteger(Number(event.currentTarget.value), mergedPageSize);
+    const nextPage = clampPage(mergedCurrent, getPageCount(total, nextPageSize));
+    changePage(nextPage, nextPageSize);
+  }
+  function jumpToInputPage(value) {
+    const nextPage = Number(value);
+    if (!Number.isFinite(nextPage)) {
+      return;
+    }
+    changePage(nextPage);
+    setQuickJumpValue("");
+  }
+  function handleQuickJumpKeyDown(event) {
+    if (event.key !== "Enter") {
+      return;
+    }
+    jumpToInputPage(event.currentTarget.value);
+  }
+  const previousDisabled = disabled || mergedCurrent <= 1;
+  const nextDisabled = disabled || mergedCurrent >= pageCount;
+  return /* @__PURE__ */ jsxs("nav", {
+    ...props,
+    ref,
+    className: getPaginationClasses({ size, compact: simple, className }),
+    children: [
+      showTotal ? /* @__PURE__ */ jsx("div", {
+        className: paginationInfoClass,
+        children: /* @__PURE__ */ jsx("span", {
+          className: paginationInfoTextClass,
+          children: showTotal(total, range)
+        })
+      }) : null,
+      /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: paginationPrevClass,
+        disabled: previousDisabled,
+        "aria-label": "Previous page",
+        onClick: () => changePage(mergedCurrent - 1),
+        children: "Prev"
+      }),
+      simple ? /* @__PURE__ */ jsxs("div", {
+        className: paginationInputClass,
+        children: [
+          /* @__PURE__ */ jsx("input", {
+            "aria-label": "Current page",
+            type: "number",
+            min: 1,
+            max: pageCount,
+            value: quickJumpValue || String(mergedCurrent),
+            disabled,
+            onChange: (event) => setQuickJumpValue(event.currentTarget.value),
+            onKeyDown: handleQuickJumpKeyDown,
+            onBlur: (event) => {
+              if (event.currentTarget.value !== String(mergedCurrent)) {
+                jumpToInputPage(event.currentTarget.value);
+              }
+            }
+          }),
+          /* @__PURE__ */ jsxs("span", {
+            className: paginationInfoTextClass,
+            children: [
+              "/ ",
+              pageCount
+            ]
+          })
+        ]
+      }) : pageTokens.map((pageToken, index) => pageToken === "ellipsis" ? /* @__PURE__ */ jsx("span", {
+        "aria-hidden": "true",
+        className: paginationEllipsisClass
+      }, `ellipsis-${index}`) : /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: getPaginationItemClasses({
+          active: pageToken === mergedCurrent,
+          disabled
+        }),
+        disabled,
+        "aria-current": pageToken === mergedCurrent ? "page" : undefined,
+        "aria-label": `Page ${pageToken}`,
+        onClick: () => changePage(pageToken),
+        children: pageToken
+      }, pageToken)),
+      /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: paginationNextClass,
+        disabled: nextDisabled,
+        "aria-label": "Next page",
+        onClick: () => changePage(mergedCurrent + 1),
+        children: "Next"
+      }),
+      showSizeChanger ? /* @__PURE__ */ jsx("div", {
+        className: paginationInputClass,
+        children: /* @__PURE__ */ jsx("select", {
+          "aria-label": "Page size",
+          value: mergedPageSize,
+          disabled,
+          onChange: handlePageSizeChange,
+          children: getSizeOptions(mergedPageSize).map((option) => /* @__PURE__ */ jsxs("option", {
+            value: option,
+            children: [
+              option,
+              " / page"
+            ]
+          }, option))
+        })
+      }) : null,
+      showQuickJumper && !simple ? /* @__PURE__ */ jsx("div", {
+        className: paginationInputClass,
+        children: /* @__PURE__ */ jsx("input", {
+          "aria-label": "Jump to page",
+          type: "number",
+          min: 1,
+          max: pageCount,
+          value: quickJumpValue,
+          disabled,
+          onChange: (event) => setQuickJumpValue(event.currentTarget.value),
+          onKeyDown: handleQuickJumpKeyDown
+        })
+      }) : null
+    ]
+  });
+});
+Pagination.displayName = "Pagination";
+// src/components/dm-pagination/DmPagination.tsx
+import {
+  forwardRef as forwardRef2,
+  useEffect,
+  useMemo as useMemo2,
+  useRef,
+  useState as useState2
+} from "react";
+
+// src/classes/dm-pagination.ts
+var dmPaginationBaseClass = "dm-pagination";
+var dmPaginationHiddenClass = "dm-pagination-hidden";
+var dmPaginationPagerClass = "dm-pagination-pager";
+var dmPaginationRefreshClass = "dm-pagination-refresh";
+var dmPaginationRefreshLoadingClass = "dm-pagination-refresh-loading";
+var dmPaginationSelectedClass = "dm-pagination-selected";
+var dmPaginationAlignClasses = {
+  left: "dm-pagination-left",
+  center: "dm-pagination-center",
+  right: "dm-pagination-right"
+};
+function getDmPaginationClasses({
+  align = "right",
+  hidden,
+  className
+}) {
+  return cn(dmPaginationBaseClass, dmPaginationAlignClasses[align], hidden && dmPaginationHiddenClass, className);
+}
+function getDmPaginationRefreshClasses({
+  loading,
+  className
+}) {
+  return cn(dmPaginationRefreshClass, loading && dmPaginationRefreshLoadingClass, className);
+}
+
+// src/components/dm-pagination/DmPagination.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultLocale = {
+  refresh: "Refresh",
+  showTotal: (total, range) => `${range[0]}-${range[1]} of ${total}`,
+  showTotalSimple: (total, range) => `${range[0]}-${range[1]} / ${total}`,
+  selected: (selectedTotal) => `, ${selectedTotal} selected`
+};
+function getResponsiveSimple({
+  width,
+  total,
+  showRefresh,
+  showSizeChanger
+}) {
+  let reservedWidth = 0;
+  if (!showRefresh)
+    reservedWidth += 100;
+  if (!showSizeChanger)
+    reservedWidth += 100;
+  if (width < 900 - reservedWidth)
+    return total >= 100;
+  if (width < 1100 - reservedWidth)
+    return total >= 1000;
+  if (width < 1220 - reservedWidth)
+    return total >= 99999;
+  if (width < 1300 - reservedWidth)
+    return total >= 999999;
+  if (width < 1450 - reservedWidth)
+    return total >= 9999999;
+  return false;
+}
+function useElementWidth() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState2(1000);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || typeof ResizeObserver === "undefined")
+      return;
+    const observer = new ResizeObserver(([entry]) => {
+      setWidth(entry?.contentRect.width || element.getBoundingClientRect().width);
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, width];
+}
+function renderSelected(selectedTotal, locale) {
+  if (!selectedTotal)
+    return null;
+  return /* @__PURE__ */ jsx2("span", {
+    className: dmPaginationSelectedClass,
+    children: locale.selected(selectedTotal)
+  });
+}
+var DmPagination = forwardRef2(({
+  selectedTotal = 0,
+  loading = false,
+  total = 0,
+  showRefresh = true,
+  showPagination = true,
+  wrapperStyle,
+  className,
+  align = "right",
+  showTotalFullMessage = false,
+  showSizeChanger = true,
+  responsiveSimple = true,
+  refresh,
+  simple,
+  showQuickJumper,
+  showTotal,
+  locale,
+  ...props
+}, ref) => {
+  const [measureRef, width] = useElementWidth();
+  const mergedLocale = useMemo2(() => ({ ...defaultLocale, ...locale }), [locale]);
+  const isRefreshVisible = showRefresh && Boolean(refresh);
+  const shouldRender = showPagination || isRefreshVisible;
+  const responsiveSimpleMode = responsiveSimple ? getResponsiveSimple({
+    width,
+    total,
+    showRefresh,
+    showSizeChanger
+  }) : false;
+  const mergedSimple = simple ?? responsiveSimpleMode;
+  const mergedShowQuickJumper = showQuickJumper ?? !mergedSimple;
+  const totalRenderer = useMemo2(() => {
+    if (showTotal)
+      return showTotal;
+    return (nextTotal, range) => {
+      if (Number(nextTotal) === 0)
+        return "";
+      const selected = renderSelected(selectedTotal, mergedLocale);
+      const message = mergedSimple && !showTotalFullMessage ? mergedLocale.showTotalSimple(nextTotal, range, selectedTotal) : mergedLocale.showTotal(nextTotal, range, selectedTotal);
+      return /* @__PURE__ */ jsxs2("span", {
+        title: `${mergedLocale.showTotal(nextTotal, range, selectedTotal)}${selectedTotal ? mergedLocale.selected(selectedTotal) : ""}`,
+        children: [
+          message,
+          selected
+        ]
+      });
+    };
+  }, [
+    mergedLocale,
+    mergedSimple,
+    selectedTotal,
+    showTotal,
+    showTotalFullMessage
+  ]);
+  if (!shouldRender)
+    return null;
+  return /* @__PURE__ */ jsxs2("div", {
+    ref: (element) => {
+      measureRef.current = element;
+      if (typeof ref === "function") {
+        ref(element);
+      } else if (ref) {
+        ref.current = element;
+      }
+    },
+    className: getDmPaginationClasses({ align, className }),
+    style: wrapperStyle,
+    children: [
+      showPagination ? /* @__PURE__ */ jsx2("div", {
+        className: dmPaginationPagerClass,
+        children: /* @__PURE__ */ jsx2(Pagination, {
+          ...props,
+          total,
+          simple: mergedSimple,
+          showQuickJumper: mergedShowQuickJumper,
+          showSizeChanger,
+          showTotal: totalRenderer
+        })
+      }) : null,
+      isRefreshVisible ? /* @__PURE__ */ jsxs2("button", {
+        type: "button",
+        className: getDmPaginationRefreshClasses({ loading }),
+        disabled: loading || props.disabled,
+        "aria-busy": loading || undefined,
+        onClick: refresh,
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            "aria-hidden": "true",
+            children: "Reload"
+          }),
+          /* @__PURE__ */ jsx2("span", {
+            children: mergedLocale.refresh
+          })
+        ]
+      }) : null
+    ]
+  });
+});
+DmPagination.displayName = "DmPagination";
+export {
+  DmPagination
+};

package/dist/components/dm-pro-table/DmProTable.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { TableRecord } from "../table/Table.types";
+import type { DmProTableProps } from "./DmProTable.types";
+export declare function DmProTable<T extends TableRecord = TableRecord>({ headerTitle, toolBarRender, toolbarItems, showTitleBar, columnSettingVisible, className, ...props }: DmProTableProps<T>): React.JSX.Element;
+export declare namespace DmProTable {
+    var displayName: string;
+}

package/dist/components/dm-pro-table/DmProTable.types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import type { DmProTableInnerProps } from "../dm-pro-table-inner";
+import type { DmToolbarItem } from "../dm-toolbar";
+import type { TableRecord } from "../table/Table.types";
+export interface DmProTableProps<T = TableRecord> extends DmProTableInnerProps<T> {
+    headerTitle?: ReactNode;
+    toolBarRender?: (() => ReactNode[] | ReactNode) | ReactNode[] | ReactNode;
+    toolbarItems?: DmToolbarItem[];
+    showTitleBar?: boolean;
+    columnSettingVisible?: boolean;
+    onSortChanged?: (sortColumns: Array<{
+        columnKey?: string | number;
+        order?: string | null;
+    }>) => void;
+}

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

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