@yqg/slimfit 0.0.1 → 0.0.2

package/lib/esm/drawer/drawer.js

@@ -0,0 +1,162 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "title", "size", "width", "height", "onBack", "showFooter", "footer", "okText", "cancelText", "onOk", "showNavigation", "onPrev", "onNext", "prevDisabled", "nextDisabled", "onClose"];
+import { Drawer as AntdDrawer } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import { Button } from "../button";
+import { IconChevronDown, IconChevronLeft, IconChevronUp } from "../icon";
+import i18n from "../locale";
+import "./style.less";
+
+// 抽屉尺寸类型定义
+
+// 抽屉位置类型定义
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+// 尺寸映射常量
+var SIZE_MAP = {
+  small: 640,
+  default: 800,
+  large: 960,
+  extraLarge: 1152
+};
+var Drawer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    title = _ref.title,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
+    width = _ref.width,
+    height = _ref.height,
+    onBack = _ref.onBack,
+    _ref$showFooter = _ref.showFooter,
+    showFooter = _ref$showFooter === void 0 ? true : _ref$showFooter,
+    footer = _ref.footer,
+    okText = _ref.okText,
+    cancelText = _ref.cancelText,
+    onOk = _ref.onOk,
+    _ref$showNavigation = _ref.showNavigation,
+    showNavigation = _ref$showNavigation === void 0 ? false : _ref$showNavigation,
+    onPrev = _ref.onPrev,
+    onNext = _ref.onNext,
+    _ref$prevDisabled = _ref.prevDisabled,
+    prevDisabled = _ref$prevDisabled === void 0 ? false : _ref$prevDisabled,
+    _ref$nextDisabled = _ref.nextDisabled,
+    nextDisabled = _ref$nextDisabled === void 0 ? false : _ref$nextDisabled,
+    onClose = _ref.onClose,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // 根据 placement 判断是水平方向还是垂直方向
+  var placement = props.placement || 'right';
+  var isHorizontal = placement === 'left' || placement === 'right';
+
+  // 根据 size 和显式传入的 width/height 属性设置尺寸
+  // width/height 优先级更高
+  var getWidth = function getWidth() {
+    if (!isHorizontal) return undefined; // 垂直方向不设置 width
+    if (width) return width;
+    return SIZE_MAP[size];
+  };
+  var getHeight = function getHeight() {
+    if (isHorizontal) return undefined; // 水平方向不设置 height
+    if (height) return height;
+    return SIZE_MAP[size];
+  };
+
+  // 渲染自定义标题
+  var renderTitle = function renderTitle() {
+    if (!title && !onBack) return null;
+    return /*#__PURE__*/_jsxs("div", {
+      className: "slimfit-drawer-title",
+      children: [onBack && /*#__PURE__*/_jsx(Button, {
+        type: "text",
+        size: "small",
+        icon: /*#__PURE__*/_jsx(IconChevronLeft, {}),
+        onClick: onBack,
+        "aria-label": i18n.t('Drawer.back')
+      }), title && /*#__PURE__*/_jsx("span", {
+        className: "slimfit-drawer-title-text",
+        children: title
+      })]
+    });
+  };
+
+  // 渲染默认页脚
+  var renderDefaultFooter = function renderDefaultFooter() {
+    var handleOk = function handleOk() {
+      onOk === null || onOk === void 0 || onOk();
+    };
+    var handleCancel = function handleCancel(e) {
+      onClose === null || onClose === void 0 || onClose(e);
+    };
+    return /*#__PURE__*/_jsxs("div", {
+      className: "slimfit-drawer-footer",
+      children: [onOk && /*#__PURE__*/_jsx(Button, {
+        type: "primary",
+        onClick: handleOk,
+        children: okText || i18n.t('Drawer.okText')
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleCancel,
+        children: cancelText || i18n.t('Drawer.cancelText')
+      })]
+    });
+  };
+
+  // 渲染页脚
+  var renderFooter = function renderFooter() {
+    if (!showFooter) return null;
+    if (footer) {
+      return /*#__PURE__*/_jsx("div", {
+        className: "slimfit-drawer-footer",
+        children: footer
+      });
+    }
+    return renderDefaultFooter();
+  };
+
+  // 渲染导航按钮
+  var renderNavigationButtons = function renderNavigationButtons() {
+    if (!showNavigation || !props.open) return null;
+    return /*#__PURE__*/_jsxs("div", {
+      className: classNames('slimfit-drawer-navigation', "slimfit-drawer-navigation-".concat(placement)),
+      children: [/*#__PURE__*/_jsx(Button, {
+        type: "text",
+        size: "middle",
+        shape: "circle",
+        icon: /*#__PURE__*/_jsx(IconChevronUp, {}),
+        className: classNames('slimfit-drawer-nav-btn', 'slimfit-drawer-nav-btn-prev'),
+        disabled: prevDisabled,
+        onClick: onPrev,
+        title: i18n.t('Drawer.prev'),
+        "aria-label": i18n.t('Drawer.prev')
+      }), /*#__PURE__*/_jsx(Button, {
+        type: "text",
+        size: "middle",
+        shape: "circle",
+        icon: /*#__PURE__*/_jsx(IconChevronDown, {}),
+        className: classNames('slimfit-drawer-nav-btn', 'slimfit-drawer-nav-btn-next'),
+        disabled: nextDisabled,
+        onClick: onNext,
+        title: i18n.t('Drawer.next'),
+        "aria-label": i18n.t('Drawer.next')
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsx(AntdDrawer, _objectSpread(_objectSpread({}, props), {}, {
+    ref: ref,
+    className: classNames('slimfit-drawer', {
+      'slimfit-drawer-with-navigation': showNavigation
+    }, className),
+    width: getWidth(),
+    height: getHeight(),
+    title: renderTitle(),
+    footer: renderFooter(),
+    onClose: onClose,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "slimfit-drawer-content",
+      children: [children, renderNavigationButtons()]
+    })
+  }));
+});
+Drawer.displayName = 'Drawer';
+export default Drawer;

package/lib/esm/drawer/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Drawer } from './drawer';
+export type { DrawerPlacement, DrawerProps, DrawerSize } from './drawer';

package/lib/esm/drawer/index.js

@@ -0,0 +1 @@
+export { default as Drawer } from "./drawer";

package/lib/esm/drawer/style.less

@@ -0,0 +1,142 @@
+@import '../style/theme-vars.css';
+
+.slimfit-drawer {
+  .ant-drawer-content {
+    border-radius: 5px;
+    box-shadow: 0px 1px 2px 0px var(--color-line-200),
+      0px -1px 2px 0px var(--color-line-300);
+  }
+
+  .ant-drawer-header {
+    border-bottom: var(--ant-line-width) solid var(--color-line-200);
+    position: relative;
+
+    .slimfit-drawer-title {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding-right: 40px; // 为关闭按钮留出空间
+
+      .slimfit-drawer-title-text {
+        color: var(--color-neutral-950);
+        font-weight: 600;
+        font-size: 16px;
+        flex: 1;
+      }
+    }
+  }
+
+  .ant-drawer-body {
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .ant-drawer-close {
+    position: absolute;
+    top: 16px;
+    right: 24px;
+    color: var(--color-neutral-500);
+    width: var(--ant-drawer-close-btn-size);
+    height: var(--ant-drawer-close-btn-size);
+
+    &:hover {
+      color: var(--color-neutral-900);
+      background-color: var(--color-neutral-100);
+    }
+  }
+
+  // 内容区域样式
+  .slimfit-drawer-content {
+    padding: 24px;
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+    position: relative; // 为导航按钮提供定位上下文
+  }
+
+  // 页脚样式
+  .slimfit-drawer-footer {
+    border-top: var(--ant-line-width) solid var(--color-line-200);
+    background-color: var(--color-neutral-0);
+
+    // 按钮间距
+    .ant-btn + .ant-btn {
+      margin-left: 10px;
+    }
+  }
+}
+
+// 导航按钮样式
+.slimfit-drawer-navigation {
+  position: absolute;
+  z-index: calc(
+    var(--ant-z-index-popup-base) + 1
+  ); // 确保在抽屉之上（使用全局 z-index-popup-base，Drawer 的 zIndexPopup 基于此）
+
+  // 右侧抽屉的导航按钮位置
+  &.slimfit-drawer-navigation-right {
+    left: -52px; // 在抽屉左侧，16px + 36px(按钮宽度)
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  // 左侧抽屉的导航按钮位置
+  &.slimfit-drawer-navigation-left {
+    right: -52px; // 在抽屉右侧，16px + 36px(按钮宽度)
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  // 顶部抽屉的导航按钮位置
+  &.slimfit-drawer-navigation-top {
+    bottom: -52px; // 在抽屉下方，16px + 36px(按钮高度)
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+
+  // 底部抽屉的导航按钮位置
+  &.slimfit-drawer-navigation-bottom {
+    top: -52px; // 在抽屉上方，16px + 36px(按钮高度)
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+}
+
+// 导航按钮基础样式
+.slimfit-drawer-nav-btn {
+  padding: 0;
+
+  border: var(--ant-line-width) var(--ant-line-type) var(--color-neutral-300);
+  background-color: var(--color-neutral-0);
+
+  box-shadow: 0 2px 8px
+    color-mix(in srgb, var(--color-neutral-950) 10%, transparent);
+
+  // 禁用状态（支持原生 disabled 属性和 slimfit-disabled 类名）
+  &:disabled,
+  &.slimfit-disabled {
+    background-color: var(--color-neutral-0);
+    border-color: var(--color-neutral-200);
+    color: var(--color-neutral-400);
+    box-shadow: none;
+
+    &:hover {
+      transform: none;
+      box-shadow: none;
+    }
+  }
+}

package/lib/esm/form/form-mode-context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { FormModeContextValue } from '../form-mode/types';
+export declare const InternalFormModeContext: import("react").Context<FormModeContextValue | null>;
+export declare const useFormModeContext: () => FormModeContextValue | null;

package/lib/esm/form/form-mode-context.js

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+// Form 内部私有 Context，用户不需要感知
+export var InternalFormModeContext = /*#__PURE__*/createContext(null);
+export var useFormModeContext = function useFormModeContext() {
+  return useContext(InternalFormModeContext);
+};

package/lib/esm/form/form.d.ts

@@ -0,0 +1,22 @@
+import type { FormProps as AntdFormProps } from 'antd';
+import { Form as AntdForm } from 'antd';
+import React from 'react';
+import type { FormMode, FormModeConfig } from '../form-mode/types';
+import './style.less';
+export interface SlimFitFormProps extends Omit<AntdFormProps, 'children'> {
+    mode?: FormMode;
+    formModeConfig?: Omit<FormModeConfig, 'mode'>;
+    children?: React.ReactNode;
+}
+type CompoundForm = React.FC<SlimFitFormProps> & {
+    Item: typeof AntdForm.Item;
+    List: typeof AntdForm.List;
+    ErrorList: typeof AntdForm.ErrorList;
+    Provider: typeof AntdForm.Provider;
+    useForm: typeof AntdForm.useForm;
+    useFormInstance: typeof AntdForm.useFormInstance;
+    useWatch: typeof AntdForm.useWatch;
+};
+declare const Form: CompoundForm;
+export type { SlimFitFormProps as FormProps };
+export default Form;

package/lib/esm/form/form.js

@@ -0,0 +1,94 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+var _excluded = ["mode", "formModeConfig", "colon", "children"];
+import { Form as AntdForm } from 'antd';
+import { ConfigContext } from 'antd/es/config-provider';
+import React from 'react';
+import { IconInfoCircle } from "../icon/icons";
+import { InternalFormModeContext } from "./form-mode-context";
+import "./style.less";
+
+/**
+ * 处理 tooltip 属性，注入 SlimFit 默认图标
+ * - 字符串或 ReactNode：转换为对象并添加 IconInfoCircle 图标
+ * - 对象但没有 icon：添加 IconInfoCircle 图标
+ * - 已有自定义 icon：保持不变
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+function normalizeTooltip(tooltip) {
+  if (!tooltip) return tooltip;
+  // 字符串或 ReactNode，转换为对象并添加默认图标
+  if (typeof tooltip === 'string' || /*#__PURE__*/React.isValidElement(tooltip)) {
+    return {
+      title: tooltip,
+      icon: /*#__PURE__*/_jsx(IconInfoCircle, {})
+    };
+  }
+  // 对象但没有 icon，添加默认图标
+  if (_typeof(tooltip) === 'object' && !('icon' in tooltip && tooltip.icon)) {
+    return _objectSpread(_objectSpread({}, tooltip), {}, {
+      icon: /*#__PURE__*/_jsx(IconInfoCircle, {})
+    });
+  }
+  // 已有自定义 icon，保持不变
+  return tooltip;
+}
+var FormComponent = function FormComponent(_ref) {
+  var _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'edit' : _ref$mode,
+    _ref$formModeConfig = _ref.formModeConfig,
+    formModeConfig = _ref$formModeConfig === void 0 ? {} : _ref$formModeConfig,
+    _ref$colon = _ref.colon,
+    colon = _ref$colon === void 0 ? false : _ref$colon,
+    children = _ref.children,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var _React$useContext = React.useContext(ConfigContext),
+    locale = _React$useContext.locale;
+  var contextValue = {
+    mode: mode,
+    config: _objectSpread(_objectSpread({
+      showEmptyValue: true,
+      preserveLayout: true
+    }, formModeConfig), {}, {
+      mode: mode
+    }),
+    locale: locale // 传递 Ant Design 的 locale
+  };
+  return /*#__PURE__*/_jsx(InternalFormModeContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/_jsx(AntdForm, _objectSpread(_objectSpread({
+      colon: colon
+    }, restProps), {}, {
+      children: children
+    }))
+  });
+};
+
+/**
+ * 自定义 Form.Item 组件
+ * 自动为 tooltip 注入 SlimFit 的 IconInfoCircle 图标
+ */
+var FormItem = function FormItem(props) {
+  var normalizedTooltip = normalizeTooltip(props.tooltip);
+  return /*#__PURE__*/_jsx(AntdForm.Item, _objectSpread(_objectSpread({}, props), {}, {
+    tooltip: normalizedTooltip
+  }));
+};
+
+// 保持 Form.Item 的静态属性
+FormItem.useStatus = AntdForm.Item.useStatus;
+
+// 创建一个具有静态属性的复合组件
+
+var Form = FormComponent;
+
+// 保持 Antd Form 的所有静态属性
+Form.Item = FormItem;
+Form.List = AntdForm.List;
+Form.ErrorList = AntdForm.ErrorList;
+Form.Provider = AntdForm.Provider;
+Form.useForm = AntdForm.useForm;
+Form.useFormInstance = AntdForm.useFormInstance;
+Form.useWatch = AntdForm.useWatch;
+export default Form;

package/lib/esm/form/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Form } from './form';
+export type { FormProps } from './form';

package/lib/esm/form/index.js

@@ -0,0 +1 @@
+export { default as Form } from "./form";

package/lib/esm/form/style.less

@@ -0,0 +1,61 @@
+/**
+ * 必填星号位置调整
+ * 
+ */
+.ant-form-item-required::before {
+  display: none !important;
+}
+
+.ant-form-item-required::after {
+  content: '*' !important;
+  display: inline-block !important;
+  color: var(--color-function-error, #f54046);
+  margin-left: 2px;
+  font-family: SimSun, sans-serif;
+  font-size: inherit;
+  line-height: 1;
+}
+
+/**
+ * Label 布局调整
+ * Token 无法控制 flexbox 排序
+ */
+.ant-form-item-label > label {
+  display: inline-flex !important;
+  align-items: center;
+}
+
+.ant-form-item-tooltip {
+  order: 1;
+  margin-left: 4px;
+}
+
+/**
+ * 水平布局样式
+ * Token labelColonMarginInlineEnd 只能控制冒号间距，无法控制整体 padding
+ */
+.ant-form-horizontal {
+  .ant-form-item-label {
+    padding-right: 20px;
+
+    > label::after {
+      display: none;
+    }
+  }
+}
+
+/**
+ * 成功状态边框样式
+ * Ant Design 默认没有成功状态的绿色边框，需要手动添加
+ * 通过 validateStatus="success" 触发 .ant-form-item-has-success 类名
+ */
+.ant-form-item-has-success {
+  .ant-input,
+  .ant-input-affix-wrapper,
+  .ant-select-selector,
+  .ant-picker,
+  .ant-input-number,
+  .ant-input-number-affix-wrapper {
+    border-color: var(--color-function-success, #17c36d) !important;
+  }
+}

package/lib/esm/form-mode/index.d.ts

@@ -0,0 +1,3 @@
+export * from './readonly-renderers';
+export * from './types';
+export * from './with-form-mode';

package/lib/esm/form-mode/index.js

@@ -0,0 +1,3 @@
+export * from "./readonly-renderers";
+export * from "./types";
+export * from "./with-form-mode";

package/lib/esm/form-mode/readonly-renderers.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ReadonlyRendererProps } from './types';
+export declare const TextReadonlyRenderer: React.FC<ReadonlyRendererProps>;
+export declare const SelectReadonlyRenderer: React.FC<ReadonlyRendererProps>;
+export declare const TreeSelectReadonlyRenderer: React.FC<ReadonlyRendererProps>;
+export declare const RadioReadonlyRenderer: React.FC<ReadonlyRendererProps>;
+export declare const SwitchReadonlyRenderer: React.FC<ReadonlyRendererProps>;
+export declare const UploadReadonlyRenderer: React.FC<ReadonlyRendererProps>;
+export declare const DatePickerReadonlyRenderer: React.FC<ReadonlyRendererProps>;
+export declare const RangePickerReadonlyRenderer: React.FC<ReadonlyRendererProps>;
+export declare function getReadonlyRenderer(componentType: string): React.FC<ReadonlyRendererProps>;
+export declare function registerReadonlyRenderer(componentType: string, renderer: React.FC<ReadonlyRendererProps>): void;