@digitalc/dxp-ui 0.0.4 → 0.0.5-alpha-gomo.1

package/es/components/Toast/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { MessageArgsProps } from 'antd';
+import './style/index.less';
+export type ToastProps = MessageArgsProps & {
+    width?: string;
+    linkProps?: {
+        text: string;
+        url?: string;
+        _blank?: boolean;
+        onClick?: () => void;
+    };
+};
+export declare const Toast: {
+    useMessage: () => readonly [{
+        open: (config: ToastProps) => import("antd/es/message/interface").MessageType;
+        info: (content: React.ReactNode, duration?: number, onClose?: () => void) => void;
+        success: (content: React.ReactNode, duration?: number, onClose?: () => void) => void;
+        error: (content: React.ReactNode, duration?: number, onClose?: () => void) => void;
+        warning: (content: React.ReactNode, duration?: number, onClose?: () => void) => void;
+        loading: (content: React.ReactNode, duration?: number, onClose?: () => void) => void;
+        destroy: (key?: React.Key | undefined) => void;
+    }, React.ReactElement<unknown, string | React.JSXElementConstructor<any>>];
+    config: (config: import("antd/es/message/interface").ConfigOptions) => void;
+    destroy: (key?: React.Key | undefined) => void;
+    useInternalMessage: typeof import("antd/es/message/useMessage").default;
+};

package/es/components/Toast/index.js

@@ -0,0 +1,175 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import "antd/es/message/style";
+import _message from "antd/es/message";
+var _excluded = ["type", "className", "duration", "icon", "width", "linkProps", "content"],
+  _excluded2 = ["contextHolder"];
+import React from 'react';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import classNames from 'classnames';
+import { theme } from "../../utils/theme";
+import { cssClasses } from "../../constants";
+import Icon from "../Icon";
+import { designTokens } from "./designTokens";
+import "./style/index.less";
+
+// 直接继承并扩展（如果需要）
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 全局配置（可选）
+_message.config({
+  top: 24,
+  duration: 0,
+  maxCount: 3,
+  prefixCls: cssClasses.PREFIX + '-toast'
+});
+
+// 自定义 useMessage 钩子
+var _useMessage = function useMessage() {
+  var _message$useMessage = _message.useMessage(),
+    _message$useMessage2 = _slicedToArray(_message$useMessage, 2),
+    messageApi = _message$useMessage2[0],
+    contextHolder = _message$useMessage2[1];
+  var prefixCls = cssClasses.PREFIX + '-toast';
+
+  // 使用 useStyleRegister 注册自定义样式
+  var useCustomToastStyle = function useCustomToastStyle() {
+    var colorText = designTokens.colorText,
+      contentBg = designTokens.contentBg,
+      borderRadiusLG = designTokens.borderRadiusLG,
+      colorWarning = designTokens.colorWarning,
+      colorSuccess = designTokens.colorSuccess,
+      colorInfo = designTokens.colorInfo,
+      contentPadding = designTokens.contentPadding,
+      horizontalGap = designTokens.horizontalGap;
+    var hashId = useStyleRegister({
+      theme: theme,
+      token: {},
+      path: [prefixCls + '-toast']
+    }, function () {
+      return "\n      div[class*=\"-message\"] div[class*=\"-message-notice-wrapper\"] .".concat(prefixCls, " div[class*=\"-message-notice-content\"] {\n        position: relative;\n        min-width: 300px;\n        background-color: ").concat(contentBg, ";\n        color: ").concat(colorText, ";\n        border-radius: ").concat(borderRadiusLG, "px;\n        padding: ").concat(contentPadding, ";\n        text-align: left;\n      }\n\n      div[class*=\"-message\"] div[class*=\"-message-notice-wrapper\"] .").concat(prefixCls, " div[class*=\"message-notice-content\"]  div[class*=\"message-custom-content\"] > :nth-child(2),\n      div[class*=\"message-notice\"] .").concat(prefixCls, ".full div[class*=\"message-notice-content\"] {\n        width: 100%;\n      }\n\n      div[class*=\"-message\"] div[class*=\"-message-notice-wrapper\"] .").concat(prefixCls, " i {\n        margin-inline-end: ").concat(horizontalGap, "!important;\n      }\n\n      div[class*=\"-message\"] div[class*=\"-message-notice-wrapper\"] .").concat(prefixCls, "-success i {\n        color: ").concat(colorSuccess, "!important;\n      }\n\n      div[class*=\"-message\"] div[class*=\"-message-notice-wrapper\"] .").concat(prefixCls, "-error i {\n        color: ").concat(colorInfo, "!important;\n      }\n\n      div[class*=\"-message\"] div[class*=\"-message-notice-wrapper\"] .").concat(prefixCls, "-warning i {\n        color: ").concat(colorWarning, "!important;\n      }\n    ");
+    });
+    return hashId;
+  };
+  var hashId = useCustomToastStyle();
+  // 统一的自定义 open 方法
+  var dxpOpen = function dxpOpen(config) {
+    var type = config.type,
+      className = config.className,
+      duration = config.duration,
+      icon = config.icon,
+      width = config.width,
+      linkProps = config.linkProps,
+      content = config.content,
+      rest = _objectWithoutProperties(config, _excluded);
+    // 根据 type 设置不同的图标
+    var getIcon = function getIcon(type) {
+      switch (type) {
+        case 'success':
+          return /*#__PURE__*/_jsx(Icon, {
+            name: 'icon-Completed',
+            size: designTokens.sizingToastIcon
+          });
+        case 'error':
+          return /*#__PURE__*/_jsx(Icon, {
+            name: 'icon-Alert',
+            size: designTokens.sizingToastIcon
+          });
+        case 'warning':
+          return /*#__PURE__*/_jsx(Icon, {
+            name: 'icon-a-Inprogress',
+            size: designTokens.sizingToastIcon
+          });
+        default:
+          return /*#__PURE__*/_jsx("span", {});
+      }
+    };
+
+    // 处理链接属性
+    var finalContent = content;
+    if (linkProps) {
+      var text = linkProps.text,
+        url = linkProps.url,
+        _blank = linkProps._blank,
+        onClick = linkProps.onClick;
+      var handleLinkClick = function handleLinkClick(e) {
+        e.preventDefault();
+        if (onClick) {
+          onClick();
+        } else if (url) {
+          window.open(url, _blank ? '_blank' : '_self');
+        }
+      };
+
+      // 创建链接元素
+      var linkElement = /*#__PURE__*/_jsx("a", {
+        href: url,
+        onClick: handleLinkClick,
+        style: {
+          color: designTokens.colorLinkText,
+          marginLeft: designTokens.horizontalGap
+        },
+        children: text
+      });
+
+      // 根据content类型处理
+      finalContent = /*#__PURE__*/_jsxs("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          width: '100%'
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          style: {
+            flex: 1,
+            wordWrap: 'break-word'
+          },
+          children: content
+        }), linkElement]
+      });
+    }
+    return messageApi.open(_objectSpread(_objectSpread({}, rest), {}, {
+      content: finalContent,
+      type: type,
+      duration: duration,
+      className: classNames(prefixCls, "".concat(prefixCls, "-").concat(type), hashId, width === 'full' && 'full', className),
+      icon: icon || getIcon(type)
+    }));
+  };
+
+  // 快捷方法生成器
+  var createToast = function createToast(type) {
+    return function (content, duration, onClose) {
+      dxpOpen({
+        type: type,
+        content: content,
+        duration: duration,
+        onClose: onClose
+      });
+    };
+  };
+  return {
+    contextHolder: contextHolder,
+    open: dxpOpen,
+    // 强制所有 open 都走自定义
+    info: createToast('info'),
+    success: createToast('success'),
+    error: createToast('error'),
+    warning: createToast('warning'),
+    loading: createToast('loading'),
+    destroy: messageApi.destroy
+  };
+};
+
+// 导出与 antd message 一致的 API
+export var Toast = {
+  useMessage: function useMessage() {
+    var _useMessage2 = _useMessage(),
+      contextHolder = _useMessage2.contextHolder,
+      rest = _objectWithoutProperties(_useMessage2, _excluded2);
+    return [rest, contextHolder];
+  },
+  config: _message.config,
+  destroy: _message.destroy,
+  useInternalMessage: _message.useMessage // 保留原始 hook
+};

package/es/components/Toast/style/index.less

@@ -0,0 +1,9 @@
+@import './variables.less';
+
+// 基础按钮样式
+@components: toast;
+
+// 使用字符串拼接
+.@{prefix}-@{components}{
+  // background: @btn-primary-bg-default ;
+}

package/es/components/Toast/style/variables.less

@@ -0,0 +1,12 @@
+
+@import '../../../style/variables.less';
+
+
+:root {
+  --colorToastBackground: #242328;
+  --colorToastTextInverse: #ffffff;
+}
+
+// Primary bg
+@toast-primary-bg-default: var(--colorToastBackground);
+@toast-primary-text-default: var(--colorToastTextInverse);

package/es/components/Toggle/designTokens.d.ts

@@ -0,0 +1,9 @@
+declare const designTokens: {
+    handleBg: any;
+    colorPrimary: any;
+    colorPrimaryHover: any;
+    colorTextQuaternary: any;
+    colorTextTertiary: any;
+    colorTextLightSolid: any;
+};
+export default designTokens;

package/es/components/Toggle/designTokens.js

@@ -0,0 +1,13 @@
+import TokenManager from "../../utils/tokenManager";
+var designTokens = {
+  handleBg: TokenManager.tokenKey('colorToggleOn'),
+  // 滑块背景色 colorToggleOn colorToggleOff
+  colorPrimary: TokenManager.tokenKey('colorToggleBaseActive'),
+  // colorToggleBaseActive '#3434E1'
+  colorPrimaryHover: TokenManager.tokenKey('colorToggleBaseActive'),
+  colorTextQuaternary: TokenManager.tokenKey('colorToggleBase'),
+  // colorToggleBase
+  colorTextTertiary: TokenManager.tokenKey('colorToggleBase'),
+  colorTextLightSolid: TokenManager.tokenKey('colorToggleBase')
+};
+export default designTokens;

package/es/components/Toggle/index.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export type SwitchSize = 'small' | 'default';
+export declare type SwitchChangeEventHandler = (checked: boolean, event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+export declare type SwitchClickEventHandler = SwitchChangeEventHandler;
+export interface IToggleProps {
+    prefixCls?: string;
+    size?: SwitchSize;
+    className?: string;
+    rootClassName?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    value?: boolean;
+    defaultValue?: boolean;
+    onChange?: SwitchChangeEventHandler;
+    onClick?: SwitchClickEventHandler;
+    checkedChildren?: React.ReactNode;
+    unCheckedChildren?: React.ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+    autoFocus?: boolean;
+    style?: React.CSSProperties;
+    title?: string;
+    tabIndex?: number;
+    id?: string;
+}
+declare const Toggle: (props: IToggleProps) => React.JSX.Element;
+export default Toggle;

package/es/components/Toggle/index.js

@@ -0,0 +1,21 @@
+import "antd/es/config-provider/style";
+import _ConfigProvider from "antd/es/config-provider";
+import "antd/es/switch/style";
+import _Switch from "antd/es/switch";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import React from 'react';
+import { BASE_CLASS_PREFIX } from "../../constants";
+import designTokens from "./designTokens";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Toggle = function Toggle(props) {
+  return /*#__PURE__*/_jsx(_ConfigProvider, {
+    prefixCls: BASE_CLASS_PREFIX,
+    theme: {
+      components: {
+        Switch: _objectSpread({}, designTokens)
+      }
+    },
+    children: /*#__PURE__*/_jsx(_Switch, _objectSpread({}, props))
+  });
+};
+export default Toggle;

package/es/components/index.d.ts

@@ -2,3 +2,48 @@ export { default as Button } from './Button';
 export type { ButtonProps } from './Button';
 export { default as Text } from './Text';
 export type { TextProps } from './Text';
+export { default as Amount } from './Amount';
+export type { AmountProps } from './Amount';
+export { default as Divider } from './Divider';
+export type { DividerProps } from './Divider';
+export { default as Tabs } from './Tabs';
+export type { TabsProps } from './Tabs';
+export { default as Chip } from './Chip';
+export type { ChipProps } from './Chip';
+export { default as Modal } from './Modal';
+export type { ModalProps } from './Modal';
+export { default as StickyFooter } from './StickyFooter';
+export type { StickyFooterProps } from './StickyFooter';
+export { default as Tag } from './Tag';
+export type { TagProps } from './Tag';
+export { default as TextInputInside } from './TextInputInside';
+export type { TextInputInsideProps } from './TextInputInside';
+export { default as TextInputOutside } from './TextInputOutside';
+export type { TextInputOutsideProps } from './TextInputOutside';
+export { default as Search } from './Search';
+export type { SearchProps } from './Search';
+export { default as Accordion } from './Accordion';
+export type { AccordionProps } from './Accordion';
+export { default as Toggle } from './Toggle';
+export type { IToggleProps } from './Toggle';
+export { default as Image } from './Image';
+export type { IImageProps } from './Image';
+export { BackImageEunm } from './Image';
+export { default as Icon } from './Icon';
+export type { IIconProps } from './Icon';
+export { default as TextLink, TextLinkEnum } from './TextLink';
+export type { ITextLinkProps } from './TextLink';
+export { Toast } from './Toast';
+export type { ToastProps } from './Toast';
+export { default as Stepper } from './Stepper';
+export type { StepperProps } from './Stepper';
+export { default as IconButton } from './IconButton';
+export { default as IconButtonGroup } from './IconButtonGroup';
+export type { IconButtonProps } from './IconButton';
+export { default as Drawer } from './Drawer';
+export type { BottomDrawerProps, DrawerType } from './Drawer';
+export { DrawerTypeEnum } from './Drawer';
+export { default as Navigation } from './Navigation';
+export type { RightLinkConfig, RightIcon, TitleIconBadgeConfig, INavigationProps } from './Navigation';
+export { default as ListItem } from './ListItem';
+export { ListItemTypes, TAPPABLE_AREAS } from './ListItem';

package/es/components/index.js

@@ -1,5 +1,29 @@
-"use client";
+'use client';
 
 export { default as Button } from "./Button";
 export { default as Text } from "./Text";
-//# sourceMappingURL=index.js.map
+export { default as Amount } from "./Amount";
+export { default as Divider } from "./Divider";
+export { default as Tabs } from "./Tabs";
+export { default as Chip } from "./Chip";
+export { default as Modal } from "./Modal";
+export { default as StickyFooter } from "./StickyFooter";
+export { default as Tag } from "./Tag";
+export { default as TextInputInside } from "./TextInputInside";
+export { default as TextInputOutside } from "./TextInputOutside";
+export { default as Search } from "./Search";
+export { default as Accordion } from "./Accordion";
+export { default as Toggle } from "./Toggle";
+export { default as Image } from "./Image";
+export { BackImageEunm } from "./Image";
+export { default as Icon } from "./Icon";
+export { default as TextLink, TextLinkEnum } from "./TextLink";
+export { Toast } from "./Toast";
+export { default as Stepper } from "./Stepper";
+export { default as IconButton } from "./IconButton";
+export { default as IconButtonGroup } from "./IconButtonGroup";
+export { default as Drawer } from "./Drawer";
+export { DrawerTypeEnum } from "./Drawer";
+export { default as Navigation } from "./Navigation";
+export { default as ListItem } from "./ListItem";
+export { ListItemTypes, TAPPABLE_AREAS } from "./ListItem";

package/es/constants/index.d.ts

@@ -3,6 +3,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
+    readonly breakpoint: readonly ["desktop", "mobile"];
     readonly sizes: readonly ["default", "small", "large"];
     readonly iconPositions: readonly ["left", "right"];
     readonly htmlTypes: readonly ["button", "reset", "submit"];

package/es/constants/index.js

@@ -4,6 +4,7 @@ var cssClasses = {
   PREFIX: "".concat(BASE_CLASS_PREFIX)
 };
 var strings = {
+  breakpoint: ['desktop', 'mobile'],
   sizes: ['default', 'small', 'large'],
   iconPositions: ['left', 'right'],
   htmlTypes: ['button', 'reset', 'submit'],
@@ -13,5 +14,4 @@ var strings = {
   DEFAULT_ICON_POSITION: 'left'
 };
 var numbers = {};
-export { BASE_CLASS_PREFIX, cssClasses, numbers, strings };
-//# sourceMappingURL=index.js.map
+export { BASE_CLASS_PREFIX, cssClasses, numbers, strings };