@yqg/slimfit 0.0.1 → 0.0.2

package/lib/esm/tabs/style.less

@@ -0,0 +1,235 @@
+@import '../style/index.css';
+
+// 按照设计给的设计稿调整样式 (line 或者 editable-line 类型)
+.slimfit-tabs-design {
+  // 去掉 antd 默认的提示可以滚动的样式
+  &.slimfit-tabs-with-scroll-indicator {
+    .ant-tabs-nav-wrap-ping-top {
+      &::before {
+        opacity: 0 !important;
+      }
+    }
+    .ant-tabs-nav-wrap-ping-bottom {
+      &::after {
+        opacity: 0 !important;
+      }
+    }
+    .ant-tabs-nav-wrap-ping-left {
+      &::before {
+        opacity: 0 !important;
+      }
+    }
+    .ant-tabs-nav-wrap-ping-right {
+      &::after {
+        opacity: 0 !important;
+      }
+    }
+    .ant-tabs-nav-operations {
+      display: none !important;
+    }
+  }
+
+  // 竖版样式
+  &.slimfit-tabs-vertical {
+    &.ant-tabs-large {
+      .ant-tabs-tab {
+        font-size: 16px;
+        line-height: 22px;
+        padding: 11px 20px;
+      }
+    }
+
+    &.ant-tabs-small {
+      .ant-tabs-tab {
+        line-height: 22px;
+        padding: 7px 20px;
+      }
+    }
+
+    .ant-tabs-tab {
+      &:not(.ant-tabs-tab-disabled, .ant-tabs-tab-active) {
+        &:hover {
+          background-color: var(--color-fill-300);
+          color: unset !important;
+        }
+      }
+
+      &.ant-tabs-tab-disabled {
+        color: var(--color-neutral-400) !important;
+        cursor: not-allowed !important;
+      }
+
+      &.ant-tabs-tab-active {
+        font-weight: 400 !important;
+      }
+    }
+
+    .slimfit-tabs-tab-bar-extra-right-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+
+      &:not(:empty) {
+        margin-top: 12px;
+      }
+    }
+
+    .slimfit-tabs-tab-bar-extra-left-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      &:not(:empty) {
+        margin-bottom: 12px;
+      }
+    }
+  }
+
+  // 横版样式
+  &.slimfit-tabs-horizontal {
+    &.ant-tabs-large {
+      // 这里改变 padding 的时候需要注意更改 indicator 的宽度, tabbar-item 间的间距也需要调整.
+      .ant-tabs-tab {
+        font-size: 16px;
+        line-height: 22px;
+        padding: 1px 4px;
+        border-radius: 2px;
+        margin-top: 13px;
+        margin-bottom: 13px;
+      }
+    }
+
+    &.ant-tabs-small {
+      // 同上.
+      .ant-tabs-tab {
+        line-height: 20px;
+        padding: 1px 4px;
+        border-radius: 2px;
+        margin-top: 11px;
+        margin-bottom: 11px;
+      }
+    }
+
+    .ant-tabs-tab {
+      &:not(.ant-tabs-tab-disabled, .ant-tabs-tab-active) {
+        &:hover {
+          color: var(--color-neutral-950) !important;
+          background-color: var(--color-fill-300);
+        }
+      }
+
+      &.ant-tabs-tab-disabled {
+        color: var(--color-neutral-400) !important;
+        cursor: not-allowed !important;
+      }
+
+      &.ant-tabs-tab-active {
+        font-weight: 400 !important;
+      }
+    }
+
+    .slimfit-tabs-tab-bar-extra-right-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-right: 20px;
+
+      &:not(:empty) {
+        margin-left: 28px;
+      }
+    }
+
+    .slimfit-tabs-tab-bar-extra-left-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-left: 20px;
+
+      &:not(:empty) {
+        margin-right: 12px;
+      }
+    }
+
+    .ant-tabs-tab {
+      & + .ant-tabs-tab {
+        margin-left: 24px;
+      }
+    }
+  }
+
+  // icon 与文字间距
+  .ant-tabs-tab-icon {
+    margin-inline-end: 8px !important;
+  }
+
+  .slimfit-tabs-editable-line-label-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /** 新增的元素样式 start */
+  .slimfit-tabs-editable-line-add-icon {
+    color: var(--color-neutral-800);
+    cursor: pointer;
+  }
+
+  .slimfit-tabs-editable-line-remove-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 8px;
+    color: var(--color-neutral-800);
+    cursor: pointer;
+  }
+
+  .slimfit-tabs-tab-bar-scroll-indicator {
+    color: var(--color-neutral-800);
+  }
+  /** 新增的元素样式 end */
+}
+
+// more dropdown 的样式
+.ant-tabs-dropdown {
+  .slimfit-tabs-editable-line-label-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
+
+// 所有 type 的公共样式（最大宽度、最小宽度、间距、文字溢出处理...）
+.slimfit-tabs {
+  &.slimfit-tabs-vertical {
+    .ant-tabs-tab {
+      min-width: 90px;
+      max-width: 220px;
+      box-sizing: border-box;
+      & + .ant-tabs-tab {
+        margin-top: 2px !important;
+      }
+
+      div {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  // 取消 tab focus 时的高亮 & 过渡动画导致字重变化时某一帧模糊
+  .ant-tabs-tab {
+    &:not(.ant-tabs-tab-active) {
+      .ant-tabs-tab-btn {
+        &:focus {
+          color: unset;
+        }
+      }
+    }
+
+    .ant-tabs-tab-btn {
+      transition: none !important;
+    }
+  }
+}

package/lib/esm/tabs/tabs.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import './style.less';
+import type { TabsProps } from './typings';
+export declare const Tabs: React.FC<TabsProps>;
+export default Tabs;

package/lib/esm/tabs/tabs.js

@@ -0,0 +1,85 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["scrollIndicator"];
+import { Tabs as AntdTabs } from 'antd';
+import classNames from 'classnames';
+import { useEditableLine, useScrollIndicator } from "./hooks";
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Tabs = function Tabs(props) {
+  var scrollIndicator = props.scrollIndicator,
+    antdProps = _objectWithoutProperties(props, _excluded);
+  var items = antdProps.items,
+    tabPosition = antdProps.tabPosition,
+    onTabScroll = antdProps.onTabScroll,
+    className = antdProps.className,
+    type = antdProps.type,
+    size = antdProps.size,
+    onEdit = antdProps.onEdit,
+    removeIcon = antdProps.removeIcon,
+    addIcon = antdProps.addIcon,
+    hideAdd = antdProps.hideAdd;
+  var vertical = tabPosition === 'left' || tabPosition === 'right';
+
+  // 设计只给了 type(line) 的设计稿
+  var design = !type || type === 'line' || type === 'editable-line';
+  // 设计没有给 middle 的大小，这里限制一下
+  var antdSize = design ? size === 'middle' || !size ? 'small' : size : size;
+  var _useScrollIndicator = useScrollIndicator({
+      items: items,
+      scrollIndicator: scrollIndicator,
+      vertical: vertical,
+      design: design
+    }),
+    ScrollIndicatorPrev = _useScrollIndicator.ScrollIndicatorPrev,
+    ScrollIndicatorNext = _useScrollIndicator.ScrollIndicatorNext,
+    scrollIndicatorRenderTabBar = _useScrollIndicator.scrollIndicatorRenderTabBar,
+    scrollIndicatorTabBarScrollListener = _useScrollIndicator.scrollIndicatorTabBarScrollListener,
+    scrollIndicatorClassName = _useScrollIndicator.scrollIndicatorClassName;
+  var _useEditableLine = useEditableLine({
+      items: items,
+      type: type,
+      removeIcon: removeIcon,
+      addIcon: addIcon,
+      hideAdd: hideAdd,
+      onEdit: onEdit,
+      size: size
+    }),
+    antdItems = _useEditableLine.items,
+    antdType = _useEditableLine.type,
+    EditableLineAdd = _useEditableLine.EditableLineAdd;
+  var indicator = design ? {
+    size: function size(origin) {
+      return !vertical ? origin - 8 : antdSize === 'small' ? 18 : 20;
+    }
+  } : undefined;
+  var handleTabScroll = function handleTabScroll() {
+    scrollIndicatorTabBarScrollListener();
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    onTabScroll === null || onTabScroll === void 0 || onTabScroll.apply(void 0, args);
+  };
+  return /*#__PURE__*/_jsx(AntdTabs, _objectSpread(_objectSpread({
+    tabBarExtraContent: {
+      left: /*#__PURE__*/_jsx("span", {
+        className: "slimfit-tabs-tab-bar-extra-left-content",
+        children: /*#__PURE__*/_jsx(ScrollIndicatorPrev, {})
+      }),
+      right: /*#__PURE__*/_jsxs("span", {
+        className: "slimfit-tabs-tab-bar-extra-right-content",
+        children: [/*#__PURE__*/_jsx(ScrollIndicatorNext, {}), /*#__PURE__*/_jsx(EditableLineAdd, {})]
+      })
+    },
+    renderTabBar: scrollIndicatorRenderTabBar,
+    indicator: indicator
+  }, antdProps), {}, {
+    items: antdItems,
+    size: antdSize,
+    type: antdType,
+    onTabScroll: handleTabScroll,
+    className: classNames(className, 'slimfit-tabs', vertical ? 'slimfit-tabs-vertical' : 'slimfit-tabs-horizontal', design && 'slimfit-tabs-design', scrollIndicatorClassName)
+  }));
+};
+export default Tabs;

package/lib/esm/tabs/typings.d.ts

@@ -0,0 +1,7 @@
+import type { TabsProps as AntdTabsProps } from 'antd';
+export type { AntdTabsProps };
+export interface TabsProps extends Omit<AntdTabsProps, 'type'> {
+    className?: string;
+    type?: 'line' | 'card' | 'editable-card' | 'editable-line';
+    scrollIndicator?: boolean;
+}

package/lib/esm/tabs/typings.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as Tag } from './tag';
+export type { TagProps } from './tag';

package/lib/esm/tag/index.js

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

package/lib/esm/tag/style.less

@@ -0,0 +1,32 @@
+/* Tag 组件样式 - 根据设计稿规范 */
+.slimfit-tag {
+  display: inline-flex;
+  align-items: center;
+  padding-inline: 0.5rem;
+  border: none;
+
+  &.slimfit-tag-disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  &.slimfit-tag-clickable {
+    cursor: pointer;
+  }
+
+  &:hover {
+    background-color: var(--slimfit-hover-bg);
+  }
+
+  > .anticon + span {
+    margin-inline-start: 0.25rem;
+  }
+
+  .anticon {
+    color: var(--slimfit-color-icon);
+  }
+
+  .ant-tag-close-icon {
+    margin-inline-start: 0.25rem !important;
+  }
+}

package/lib/esm/tag/tag.d.ts

@@ -0,0 +1,11 @@
+import { type TagProps as AntdTagProps } from 'antd';
+import React from 'react';
+import './style.less';
+export interface TagProps extends AntdTagProps {
+    type?: 'text' | 'deep' | 'shallow';
+    color?: 'default' | 'info' | 'success' | 'minor' | 'warning' | 'error' | 'red' | 'tangerine' | 'orange' | 'yellow' | 'lemonYellow' | 'grassGreen' | 'green' | 'cyan' | 'blue' | 'purple' | 'magenta' | 'neutral';
+    disabled?: boolean;
+    category?: boolean;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+export default Tag;

package/lib/esm/tag/tag.js

@@ -0,0 +1,149 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["type", "color", "disabled", "category", "className", "style", "onClick"];
+import { Tag as AntdTag } from 'antd';
+import classNames from 'classnames';
+import React, { useCallback, useMemo } from 'react';
+import { ConfigProvider } from "../config-provider";
+import { colors } from "../constant/colors";
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var COLOR_MAP = {
+  info: 'fi',
+  success: 'green',
+  minor: 'yellow',
+  warning: 'orange',
+  error: 'red',
+  red: 'red',
+  tangerine: 'tangerine',
+  orange: 'orange',
+  yellow: 'yellow',
+  lemonYellow: 'lemonYellow',
+  grassGreen: 'grassGreen',
+  green: 'green',
+  cyan: 'cyan',
+  blue: 'blue',
+  purple: 'purple',
+  magenta: 'magenta'
+};
+var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$category = _ref.category,
+    category = _ref$category === void 0 ? false : _ref$category,
+    className = _ref.className,
+    style = _ref.style,
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var getColorToken = useCallback(function () {
+    var colorKey = COLOR_MAP[color];
+    if (colorKey) {
+      var colorConfig = colors[colorKey];
+      return {
+        deepBg: colorConfig[600],
+        disabledDeepBg: colorConfig[400],
+        shallowBg: colorConfig[100],
+        disabledShallowBg: colorConfig[100],
+        enabledText: colorConfig[600],
+        disabledText: colorConfig[400]
+      };
+    }
+    if (color === 'default') {
+      return {
+        deepBg: colors.neutral[50],
+        disabledDeepBg: colors.neutral[50],
+        shallowBg: colors.neutral[50],
+        disabledShallowBg: colors.neutral[50],
+        enabledText: colors.neutral[950],
+        disabledText: colors.neutral[400]
+      };
+    }
+    return {};
+  }, [color]);
+  var getDesignToken = useCallback(function () {
+    var colorTokens = getColorToken();
+    var defaultColor = disabled ? colorTokens === null || colorTokens === void 0 ? void 0 : colorTokens.disabledText : colorTokens === null || colorTokens === void 0 ? void 0 : colorTokens.enabledText;
+    if (category) {
+      if (type === 'text') {
+        return {
+          defaultColor: defaultColor,
+          defaultBg: 'transparent',
+          colorIcon: defaultColor,
+          hoverBg: !disabled && colors.fill[300]
+        };
+      }
+      return {
+        defaultColor: defaultColor,
+        defaultBg: disabled ? colorTokens === null || colorTokens === void 0 ? void 0 : colorTokens.disabledShallowBg : colorTokens === null || colorTokens === void 0 ? void 0 : colorTokens.shallowBg,
+        colorIcon: defaultColor,
+        hoverBg: !disabled && colors.fi[100]
+      };
+    }
+    switch (type) {
+      case 'text':
+        return {
+          defaultColor: disabled ? colors.neutral[400] : colors.neutral[950],
+          defaultBg: colors.neutral[0],
+          colorIcon: defaultColor
+        };
+      case 'deep':
+        return {
+          defaultColor: colors.neutral[0],
+          defaultBg: disabled ? colorTokens === null || colorTokens === void 0 ? void 0 : colorTokens.disabledDeepBg : colorTokens === null || colorTokens === void 0 ? void 0 : colorTokens.deepBg,
+          colorIcon: colors.neutral[0]
+        };
+      case 'shallow':
+        return {
+          defaultColor: defaultColor,
+          defaultBg: disabled ? colorTokens === null || colorTokens === void 0 ? void 0 : colorTokens.disabledShallowBg : colorTokens === null || colorTokens === void 0 ? void 0 : colorTokens.shallowBg,
+          colorIcon: defaultColor
+        };
+      default:
+        return {};
+    }
+  }, [type, disabled, category, getColorToken]);
+  var mergedClassName = useMemo(function () {
+    return classNames('slimfit-tag', {
+      'slimfit-tag-disabled': disabled
+    }, {
+      'slimfit-tag-clickable': onClick
+    }, className);
+  }, [disabled, onClick, className]);
+  var mergedStyle = useMemo(function () {
+    var _getDesignToken = getDesignToken(),
+      colorIcon = _getDesignToken.colorIcon,
+      hoverBg = _getDesignToken.hoverBg,
+      defaultBg = _getDesignToken.defaultBg;
+    return _objectSpread({
+      '--slimfit-color-icon': colorIcon,
+      '--slimfit-hover-bg': hoverBg || defaultBg
+    }, style);
+  }, [type, disabled, onClick, getColorToken, getDesignToken, style]);
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: {
+      components: {
+        Tag: getDesignToken()
+      },
+      token: {
+        borderRadius: 0,
+        fontSizeSM: 12,
+        lineHeightSM: 5 / 3
+      }
+    },
+    children: /*#__PURE__*/_jsx(AntdTag, _objectSpread({
+      ref: ref,
+      className: mergedClassName,
+      style: mergedStyle
+      // 默认无边框
+      ,
+      bordered: false,
+      onClick: onClick
+    }, props))
+  });
+});
+Tag.displayName = 'Tag';
+export default Tag;

package/lib/esm/themes/components/breadcrumb.d.ts

@@ -0,0 +1,4 @@
+declare const _default: (Partial<import("antd/es/breadcrumb/style").ComponentToken> & Partial<import("antd/es/theme/internal").AliasToken> & {
+    algorithm?: boolean | import("antd").MappingAlgorithm | import("antd").MappingAlgorithm[] | undefined;
+}) | undefined;
+export default _default;

package/lib/esm/themes/components/breadcrumb.js

@@ -0,0 +1,15 @@
+import { colors, semantic } from "../../constant/colors";
+export default {
+  // 面包屑项文字颜色
+  itemColor: colors.neutral[500],
+  // 最后一项（当前页）文字颜色
+  lastItemColor: colors.neutral[950],
+  // 链接颜色
+  linkColor: semantic.primary,
+  // 链接悬停颜色
+  linkHoverColor: semantic.primary,
+  // 分隔符颜色
+  separatorColor: colors.neutral[500],
+  // 分隔符边距
+  separatorMargin: 4
+};

package/lib/esm/themes/components/button.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    defaultColor: string;
+    defaultHoverBg: string;
+    defaultBorderColor: string;
+    defaultHoverBorderColor: string;
+    defaultHoverColor: string;
+    textHoverBg: string;
+    colorLinkHover: string;
+    linkHoverBg: string;
+    opacityLoading: number;
+    paddingInline: number;
+    paddingInlineSM: number;
+};
+export default _default;

package/lib/esm/themes/components/button.js

@@ -0,0 +1,31 @@
+import { colors, semantic } from "../../constant/colors";
+
+/**
+ * Button 组件主题配置
+ *
+ * 基于 Ant Design 的 Component Token 系统自定义 Button 样式
+ * @see https://ant.design/components/button-cn#design-token
+ */
+export default {
+  // 默认按钮（outlined）文字颜色
+  defaultColor: semantic.primary,
+  // 默认按钮 hover 时的背景色
+  defaultHoverBg: semantic.primaryLight,
+  defaultBorderColor: '#1415351A',
+  // 默认按钮 hover 时的边框颜色（hover 不变色）
+  defaultHoverBorderColor: 'var(--ant-button-default-border-color)',
+  // 默认按钮 hover 时的文字颜色
+  defaultHoverColor: semantic.primary,
+  // Text 类型按钮 hover 时的背景色
+  textHoverBg: colors.fill[300],
+  // Link 类型按钮 hover 时的文字颜色
+  colorLinkHover: semantic.primary,
+  // Link 类型按钮 hover 时的背景色
+  linkHoverBg: semantic.primaryLight,
+  // 加载状态时的透明度（1 表示保持完全不透明，不降低透明度）
+  opacityLoading: 1,
+  // 按钮内边距（左右）
+  paddingInline: 20,
+  // 小尺寸按钮内边距（左右）
+  paddingInlineSM: 10
+};

package/lib/esm/themes/components/calendar.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    controlItemBgHover: string;
+    controlItemBgActive: string;
+    colorText: string;
+    colorTextDisabled: string;
+};
+export default _default;

package/lib/esm/themes/components/calendar.js

@@ -0,0 +1,7 @@
+import { colors } from "../../constant/colors";
+export default {
+  controlItemBgHover: colors.neutral[50],
+  controlItemBgActive: colors.fi[100],
+  colorText: colors.neutral[950],
+  colorTextDisabled: colors.neutral[400]
+};

package/lib/esm/themes/components/cascader.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    colorBgContainerDisabled: string;
+    optionPadding: string;
+    optionActiveBg: string;
+    multipleItemBg: string;
+    fontSizeIcon: number;
+    optionSelectedBg: string;
+    optionSelectedFontWeight: number;
+};
+export default _default;

package/lib/esm/themes/components/cascader.js

@@ -0,0 +1,11 @@
+import { colors } from "../../constant/colors";
+export default {
+  colorBgContainerDisabled: colors.fill[200],
+  optionPadding: '9px 16px',
+  optionActiveBg: colors.fill[100],
+  //标签
+  multipleItemBg: colors.neutral[50],
+  fontSizeIcon: 17,
+  optionSelectedBg: colors.fill[200],
+  optionSelectedFontWeight: 400
+};

package/lib/esm/themes/components/date-picker.d.ts

@@ -0,0 +1,21 @@
+declare const _default: {
+    activeBorderColor: string;
+    hoverBorderColor: string;
+    cellActiveWithRangeBg: string;
+    controlItemBgActive: string;
+    activeShadow: string;
+    cellHoverBg: string;
+    timeCellHeight: number;
+    colorText: string;
+    marginXXS: number;
+    cellHeight: number;
+    cellWidth: number;
+    paddingXXS: number;
+    colorIcon: string;
+    colorTextHeading: string;
+    fontWeightStrong: number;
+    colorBorder: string;
+    paddingXS: number;
+    textHeight: number;
+};
+export default _default;