@duskmoon-dev/components 0.1.2

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

@@ -0,0 +1,520 @@
+"use client";
+
+// ../../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/button.ts
+var buttonBaseClass = "btn";
+var buttonColorClasses = {
+  primary: "btn-primary",
+  secondary: "btn-secondary",
+  tertiary: "btn-tertiary",
+  info: "btn-info",
+  success: "btn-success",
+  warning: "btn-warning",
+  error: "btn-error"
+};
+var buttonAppearanceClasses = {
+  filled: "",
+  outline: "btn-outline",
+  tonal: "btn-tonal",
+  ghost: "btn-ghost",
+  text: "btn-text"
+};
+var buttonShapeClasses = {
+  rect: "",
+  circle: "btn-circle",
+  square: "btn-square"
+};
+var buttonSizeClasses = {
+  xs: "btn-xs",
+  sm: "btn-sm",
+  md: "btn-md",
+  lg: "btn-lg"
+};
+var buttonBlockClass = "btn-block";
+var buttonIsLoadingClass = "btn-loading";
+function getButtonClasses({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  className
+}) {
+  return cn(buttonBaseClass, buttonColorClasses[color], buttonAppearanceClasses[appearance], buttonShapeClasses[shape], buttonSizeClasses[size], block && buttonBlockClass, isLoading && buttonIsLoadingClass, className);
+}
+
+// src/components/button/Button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Button({
+  color = "primary",
+  appearance = "filled",
+  shape = "rect",
+  size = "md",
+  block,
+  isLoading,
+  leftIcon,
+  rightIcon,
+  className,
+  children,
+  disabled,
+  ref,
+  ...props
+}) {
+  const classes = getButtonClasses({
+    color,
+    appearance,
+    shape,
+    size,
+    block,
+    isLoading,
+    className
+  });
+  return /* @__PURE__ */ jsxs("button", {
+    ref,
+    className: classes,
+    disabled: disabled || isLoading,
+    "aria-busy": isLoading,
+    "aria-disabled": disabled || isLoading,
+    ...props,
+    children: [
+      isLoading && /* @__PURE__ */ jsx("span", {
+        className: "btn-spinner"
+      }),
+      !isLoading && leftIcon && /* @__PURE__ */ jsx("span", {
+        className: "btn-icon-left",
+        children: leftIcon
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: "btn-content",
+        children
+      }),
+      !isLoading && rightIcon && /* @__PURE__ */ jsx("span", {
+        className: "btn-icon-right",
+        children: rightIcon
+      })
+    ]
+  });
+}
+// src/components/dropdown/Dropdown.tsx
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useId,
+  useState
+} from "react";
+
+// src/classes/dropdown.ts
+var dropdownWrapperClass = "dropdown-wrapper";
+var dropdownBaseClass = "popover dropdown";
+var dropdownOpenClass = "popover-show dropdown-open";
+var dropdownArrowClass = "popover-arrow dropdown-arrow";
+var dropdownMenuClass = "menu dropdown-menu";
+var dropdownButtonClass = "dropdown-button";
+var dropdownPlacementClasses = {
+  top: "popover-top dropdown-top",
+  bottom: "popover-bottom dropdown-bottom",
+  left: "popover-left dropdown-left",
+  right: "popover-right dropdown-right",
+  topLeft: "popover-top dropdown-top-left",
+  topRight: "popover-top dropdown-top-right",
+  bottomLeft: "popover-bottom dropdown-bottom-left",
+  bottomRight: "popover-bottom dropdown-bottom-right"
+};
+function getDropdownClasses({
+  placement = "bottomLeft",
+  open,
+  arrow,
+  className
+}) {
+  return cn(dropdownBaseClass, dropdownPlacementClasses[placement], open && dropdownOpenClass, !arrow && "popover-no-arrow dropdown-no-arrow", className);
+}
+
+// src/classes/menu.ts
+var menuBaseClass = "menu";
+var menuShowClass = "menu-show";
+var menuItemClass = "menu-item";
+var menuItemActiveClass = "menu-item-active";
+var menuItemDisabledClass = "menu-item-disabled";
+var menuItemIconClass = "menu-item-icon";
+var menuItemTrailingClass = "menu-item-trailing";
+var menuItemSubmenuClass = "menu-item-submenu";
+var menuDividerClass = "menu-divider";
+var menuLabelClass = "menu-label";
+var menuSubmenuClass = "menu-submenu";
+var menuCompactClass = "menu-compact";
+var menuWideClass = "menu-wide";
+var menuModeClasses = {
+  vertical: "menu-vertical",
+  horizontal: "menu-horizontal",
+  inline: "menu-inline"
+};
+var menuThemeClasses = {
+  light: "",
+  dark: "menu-dark menu-surface-container-highest"
+};
+var menuSizeClasses = {
+  sm: menuCompactClass,
+  md: "",
+  lg: menuWideClass
+};
+function getMenuClasses({
+  mode = "vertical",
+  theme = "light",
+  size = "md",
+  inlineCollapsed,
+  disabled,
+  className
+}) {
+  return cn(menuBaseClass, menuShowClass, menuModeClasses[mode], menuThemeClasses[theme], menuSizeClasses[size], inlineCollapsed && "menu-inline-collapsed", disabled && menuItemDisabledClass, className);
+}
+function getMenuItemClasses({
+  active,
+  disabled,
+  danger,
+  submenu,
+  className
+}) {
+  return cn(menuItemClass, active && menuItemActiveClass, disabled && menuItemDisabledClass, danger && "menu-item-danger", submenu && menuItemSubmenuClass, className);
+}
+
+// src/components/dropdown/Dropdown.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function hasTrigger(triggers, trigger) {
+  return (triggers ?? ["hover"]).includes(trigger);
+}
+function callHandler(handler, event) {
+  handler?.(event);
+}
+function renderMenuItem(item, onClick, close) {
+  if (item.type === "divider") {
+    return /* @__PURE__ */ jsx2("li", {
+      className: menuDividerClass
+    }, String(item.key));
+  }
+  return /* @__PURE__ */ jsx2("li", {
+    children: /* @__PURE__ */ jsxs2("button", {
+      type: "button",
+      className: cn(menuItemClass, item.danger && "menu-item-danger", item.className),
+      disabled: item.disabled,
+      onClick: (event) => {
+        onClick?.({ key: String(item.key), item, domEvent: event });
+        close();
+      },
+      children: [
+        item.icon ? /* @__PURE__ */ jsx2("span", {
+          className: "menu-item-icon",
+          children: item.icon
+        }) : null,
+        /* @__PURE__ */ jsx2("span", {
+          children: item.label
+        })
+      ]
+    })
+  }, String(item.key));
+}
+var DropdownRoot = forwardRef(({
+  arrow,
+  children,
+  className,
+  defaultOpen,
+  destroyPopupOnHide,
+  disabled,
+  dropdownRender,
+  menu,
+  onContextMenu,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onOpenChange,
+  open,
+  overlay,
+  placement = "bottomLeft",
+  trigger = ["hover"],
+  ...props
+}, ref) => {
+  const [internalOpen, setInternalOpen] = useState(Boolean(defaultOpen));
+  const isControlled = open !== undefined;
+  const visible = isControlled ? open : internalOpen;
+  const overlayId = useId();
+  function setVisible(nextOpen) {
+    if (disabled)
+      return;
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen);
+  }
+  const close = () => setVisible(false);
+  const toggleVisible = () => setVisible(!visible);
+  const menuNode = overlay ?? (menu?.items ? /* @__PURE__ */ jsx2("ul", {
+    className: dropdownMenuClass,
+    children: menu.items.map((item) => renderMenuItem(item, menu.onClick, close))
+  }) : null);
+  const popup = dropdownRender ? dropdownRender(menuNode) : menuNode;
+  const shouldRenderPopup = !destroyPopupOnHide || visible;
+  const triggerProps = {
+    "aria-controls": visible ? overlayId : undefined,
+    "aria-expanded": visible || undefined,
+    onMouseEnter: hasTrigger(trigger, "hover") ? () => setVisible(true) : undefined,
+    onMouseLeave: hasTrigger(trigger, "hover") ? () => setVisible(false) : undefined,
+    onClick: hasTrigger(trigger, "click") ? toggleVisible : undefined,
+    onContextMenu: hasTrigger(trigger, "contextMenu") ? (event) => {
+      event.preventDefault();
+      toggleVisible();
+    } : undefined
+  };
+  const triggerNode = isValidElement(children) ? cloneElement(children, {
+    "aria-controls": triggerProps["aria-controls"] ?? children.props["aria-controls"],
+    "aria-expanded": triggerProps["aria-expanded"] ?? children.props["aria-expanded"],
+    onMouseEnter: (event) => {
+      callHandler(children.props.onMouseEnter, event);
+      triggerProps.onMouseEnter?.();
+      onMouseEnter?.(event);
+    },
+    onMouseLeave: (event) => {
+      callHandler(children.props.onMouseLeave, event);
+      triggerProps.onMouseLeave?.();
+      onMouseLeave?.(event);
+    },
+    onClick: (event) => {
+      callHandler(children.props.onClick, event);
+      triggerProps.onClick?.();
+      onClick?.(event);
+    },
+    onContextMenu: (event) => {
+      callHandler(children.props.onContextMenu, event);
+      triggerProps.onContextMenu?.(event);
+      onContextMenu?.(event);
+    }
+  }) : /* @__PURE__ */ jsx2("span", {
+    role: "button",
+    tabIndex: disabled ? -1 : 0,
+    "aria-disabled": disabled || undefined,
+    "aria-controls": triggerProps["aria-controls"],
+    "aria-expanded": triggerProps["aria-expanded"],
+    onMouseEnter: (event) => {
+      triggerProps.onMouseEnter?.();
+      onMouseEnter?.(event);
+    },
+    onMouseLeave: (event) => {
+      triggerProps.onMouseLeave?.();
+      onMouseLeave?.(event);
+    },
+    onClick: (event) => {
+      triggerProps.onClick?.();
+      onClick?.(event);
+    },
+    onKeyDown: (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        triggerProps.onClick?.();
+      }
+    },
+    onContextMenu: (event) => {
+      triggerProps.onContextMenu?.(event);
+      onContextMenu?.(event);
+    },
+    children
+  });
+  return /* @__PURE__ */ jsxs2("span", {
+    ...props,
+    ref,
+    className: dropdownWrapperClass,
+    children: [
+      triggerNode,
+      shouldRenderPopup ? /* @__PURE__ */ jsxs2("span", {
+        id: overlayId,
+        role: "menu",
+        className: getDropdownClasses({
+          placement,
+          open: visible,
+          arrow,
+          className
+        }),
+        children: [
+          popup,
+          arrow ? /* @__PURE__ */ jsx2("span", {
+            className: dropdownArrowClass
+          }) : null
+        ]
+      }) : null
+    ]
+  });
+});
+DropdownRoot.displayName = "Dropdown";
+var DropdownButton = forwardRef(({
+  buttonsRender,
+  children,
+  disabled,
+  menu,
+  onClick,
+  trigger = ["click"],
+  ...props
+}, ref) => {
+  const buttons = [
+    /* @__PURE__ */ jsx2(Button, {
+      disabled,
+      onClick,
+      children
+    }, "primary"),
+    /* @__PURE__ */ jsx2(Button, {
+      "aria-label": "Open dropdown",
+      disabled,
+      children: "v"
+    }, "trigger")
+  ];
+  const renderedButtons = buttonsRender ? buttonsRender(buttons) : buttons;
+  return /* @__PURE__ */ jsx2(DropdownRoot, {
+    ...props,
+    ref,
+    menu,
+    trigger,
+    disabled,
+    children: /* @__PURE__ */ jsx2("span", {
+      className: dropdownButtonClass,
+      children: renderedButtons
+    })
+  });
+});
+DropdownButton.displayName = "Dropdown.Button";
+var Dropdown = Object.assign(DropdownRoot, {
+  Button: DropdownButton
+});
+// src/components/dm-toolbar/DmToolbar.tsx
+import { useMemo } from "react";
+
+// src/classes/dm-toolbar.ts
+var dmToolbarBaseClass = "dm-toolbar";
+var dmToolbarItemClass = "dm-toolbar-item";
+var dmToolbarPrimaryItemClass = "dm-toolbar-primary-item";
+var dmToolbarSecondaryItemClass = "dm-toolbar-secondary-item";
+var dmToolbarMoreClass = "dm-toolbar-more";
+function getDmToolbarClasses({
+  className
+}) {
+  return cn(dmToolbarBaseClass, className);
+}
+function getDmToolbarItemClasses({
+  primary,
+  className
+}) {
+  return cn(dmToolbarItemClass, primary ? dmToolbarPrimaryItemClass : dmToolbarSecondaryItemClass, className);
+}
+
+// src/components/dm-toolbar/DmToolbar.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function isPrimary(item) {
+  return item.type === "primary";
+}
+function renderToolbarItem(item, index) {
+  const {
+    title,
+    menu,
+    type,
+    htmlType = "button",
+    color,
+    appearance,
+    ...buttonPropsWithKey
+  } = item;
+  const buttonProps = { ...buttonPropsWithKey };
+  delete buttonProps.key;
+  const button = /* @__PURE__ */ jsx3(Button, {
+    ...buttonProps,
+    type: htmlType,
+    color: color ?? (type === "primary" ? "primary" : "secondary"),
+    appearance: appearance ?? (type === "primary" ? "filled" : "outline"),
+    children: title
+  });
+  if (!menu?.items?.length)
+    return button;
+  return /* @__PURE__ */ jsx3(Dropdown, {
+    trigger: ["click"],
+    menu,
+    children: button
+  }, `dropdown-${index}`);
+}
+function toOverflowMenu(items) {
+  return {
+    items: items.map((item, index) => ({
+      key: item.key ?? index,
+      label: item.title,
+      disabled: item.disabled
+    })),
+    onClick: ({ key, domEvent }) => {
+      const target = items.find((item, index) => String(item.key ?? index) === key);
+      target?.onClick?.(domEvent);
+    }
+  };
+}
+function DmToolbar({
+  items = [],
+  className,
+  style,
+  moreText = "More",
+  maxVisibleSecondaryItems
+}) {
+  const { visibleSecondaryItems, overflowSecondaryItems, primaryItems } = useMemo(() => {
+    const primaryItems2 = items.filter(isPrimary);
+    const secondaryItems = items.filter((item) => !isPrimary(item));
+    const visibleLimit = maxVisibleSecondaryItems === undefined ? secondaryItems.length : Math.max(0, maxVisibleSecondaryItems);
+    const visibleSecondaryItems2 = visibleLimit === 0 ? [] : secondaryItems.slice(-visibleLimit);
+    const overflowSecondaryItems2 = visibleLimit >= secondaryItems.length ? [] : secondaryItems.slice(0, secondaryItems.length - visibleLimit);
+    return { visibleSecondaryItems: visibleSecondaryItems2, overflowSecondaryItems: overflowSecondaryItems2, primaryItems: primaryItems2 };
+  }, [items, maxVisibleSecondaryItems]);
+  const showMore = overflowSecondaryItems.length > 0;
+  return /* @__PURE__ */ jsxs3("div", {
+    className: getDmToolbarClasses({ className }),
+    style,
+    children: [
+      visibleSecondaryItems.map((item, index) => /* @__PURE__ */ jsx3("span", {
+        className: getDmToolbarItemClasses({}),
+        children: renderToolbarItem(item, index)
+      }, item.key ?? `secondary-${index}`)),
+      showMore ? /* @__PURE__ */ jsx3(Dropdown, {
+        trigger: ["click"],
+        menu: toOverflowMenu(overflowSecondaryItems),
+        children: /* @__PURE__ */ jsx3(Button, {
+          type: "button",
+          className: dmToolbarMoreClass,
+          color: "secondary",
+          appearance: "outline",
+          children: moreText
+        })
+      }) : null,
+      primaryItems.map((item, index) => /* @__PURE__ */ jsx3("span", {
+        className: getDmToolbarItemClasses({ primary: true }),
+        children: renderToolbarItem(item, index)
+      }, item.key ?? `primary-${index}`))
+    ]
+  });
+}
+DmToolbar.displayName = "DmToolbar";
+export {
+  DmToolbar
+};

package/dist/components/dm-tree/DmTree.d.ts

@@ -0,0 +1,3 @@
+import type { DmTreeComponent } from "./DmTree.types";
+export declare const DmTree: DmTreeComponent;
+export default DmTree;

package/dist/components/dm-tree/DmTree.types.d.ts

@@ -0,0 +1,70 @@
+import type { ComponentProps, ReactElement, ReactNode } from "react";
+import type { TreeDataNode, TreeKey, TreeProps } from "../tree/Tree.types";
+import type { DmTabsItem } from "../dm-tabs/DmTabs.types";
+export type DmTreeDataNode = Record<string, unknown> & {
+    key?: TreeKey;
+    title?: ReactNode;
+    children?: readonly DmTreeDataNode[];
+};
+export interface DmTreeFieldNames<TDataNode extends DmTreeDataNode = TreeDataNode> {
+    title?: keyof TDataNode | string;
+    key?: keyof TDataNode | string;
+    children?: keyof TDataNode | string;
+}
+export interface DmTreeToolbarButton<TDataNode extends DmTreeDataNode = TreeDataNode> {
+    label: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    onClick?: (selectedKey: TreeKey | undefined, getSelectedItem: () => TDataNode | undefined) => void;
+}
+export interface DmTreeItemAction<TDataNode extends DmTreeDataNode = TreeDataNode> {
+    icon: ReactNode;
+    title?: string;
+    disabled?: boolean | ((item: TDataNode) => boolean);
+    show?: boolean | ((item: TDataNode) => boolean);
+    onClick?: (item: TDataNode) => void;
+}
+export interface DmTreeAllItem {
+    value: TreeKey;
+    label: ReactNode;
+}
+export interface DmTreeCommonProps<TDataNode extends DmTreeDataNode = TreeDataNode> extends Omit<TreeProps<TreeDataNode>, "treeData" | "children" | "onChange" | "onSelect" | "titleRender"> {
+    treeData: TDataNode[];
+    selectedKey?: TreeKey;
+    showAll?: boolean;
+    allItem?: DmTreeAllItem;
+    buttonTopToolbar?: DmTreeToolbarButton<TDataNode>[] | ((selectedKey: TreeKey | undefined, getSelectedItem: () => TDataNode | undefined) => ReactNode);
+    iconTopToolbar?: DmTreeToolbarButton<TDataNode>[] | ((selectedKey: TreeKey | undefined, getSelectedItem: () => TDataNode | undefined) => ReactNode);
+    customTopToolbar?: ReactNode;
+    itemToolbar?: DmTreeItemAction<TDataNode>[] | ((item: TDataNode) => ReactNode);
+    itemToolbarAlwaysShow?: boolean;
+    beforeSelect?: (selectItem: TDataNode, selectedKey: TreeKey, beforeSelectKey: TreeKey | undefined) => boolean | Promise<boolean> | void;
+    onChange?: (selectItem: TDataNode | undefined, selectKey: TreeKey | undefined, beforeSelectKey: TreeKey | undefined) => void;
+    loading?: boolean;
+    showSearch?: boolean;
+    searchPlaceholder?: string;
+    customSearch?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    beforeIcon?: ReactNode | ((item: TDataNode) => ReactNode);
+    emptyNode?: ReactNode;
+    width?: number | string;
+    minNodeWidth?: number | string;
+    fieldNames?: DmTreeFieldNames<TDataNode>;
+}
+export interface DmTreeOptionItem<TDataNode extends DmTreeDataNode = TreeDataNode> extends Omit<DmTabsItem, "children"> {
+    loading?: boolean;
+    TreeSetting: DmTreeCommonProps<TDataNode>;
+}
+export interface DmTreeOptionProps<TDataNode extends DmTreeDataNode = TreeDataNode> extends Omit<ComponentProps<"div">, "onChange"> {
+    isTabTree: true;
+    items: DmTreeOptionItem<TDataNode>[];
+    defaultActiveKey?: string;
+    activeKey?: string;
+    clearOtherSelection?: boolean;
+    width?: number | string;
+    minNodeWidth?: number | string;
+    onChange?: (activeKey: string) => void;
+}
+export type DmTreeProps<TDataNode extends DmTreeDataNode = TreeDataNode> = (DmTreeCommonProps<TDataNode> & {
+    isTabTree?: false;
+}) | DmTreeOptionProps<TDataNode>;
+export type DmTreeComponent = <TDataNode extends DmTreeDataNode = TreeDataNode>(props: DmTreeProps<TDataNode>) => ReactElement | null;

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

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