@yqg/slimfit 0.0.1 → 0.0.2

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { DatePickerProps as AntdDatePickerProps } from 'antd';
+import type { RangePickerProps as AntdRangePickerProps } from 'antd/es/date-picker/generatePicker/interface';
+import { WithFormModeProps } from '../form-mode/types';
+import './style.less';
+export type DatePickerProps = AntdDatePickerProps & WithFormModeProps;
+export type YearPickerProps = AntdDatePickerProps & WithFormModeProps;
+export type MonthPickerProps = AntdDatePickerProps & WithFormModeProps;
+export type WeekPickerProps = AntdDatePickerProps & WithFormModeProps;
+export type QuarterPickerProps = AntdDatePickerProps & WithFormModeProps;
+export type RangePickerProps = AntdRangePickerProps & WithFormModeProps & React.RefAttributes<any>;
+declare const DatePicker: React.ForwardRefExoticComponent<Omit<Omit<DatePickerProps, "ref"> & React.RefAttributes<any> & WithFormModeProps, "ref"> & React.RefAttributes<any>>;
+declare const YearPicker: React.ForwardRefExoticComponent<Omit<Omit<YearPickerProps, "ref"> & React.RefAttributes<any> & WithFormModeProps, "ref"> & React.RefAttributes<any>>;
+declare const MonthPicker: React.ForwardRefExoticComponent<Omit<Omit<MonthPickerProps, "ref"> & React.RefAttributes<any> & WithFormModeProps, "ref"> & React.RefAttributes<any>>;
+declare const WeekPicker: React.ForwardRefExoticComponent<Omit<Omit<WeekPickerProps, "ref"> & React.RefAttributes<any> & WithFormModeProps, "ref"> & React.RefAttributes<any>>;
+declare const QuarterPicker: React.ForwardRefExoticComponent<Omit<Omit<QuarterPickerProps, "ref"> & React.RefAttributes<any> & WithFormModeProps, "ref"> & React.RefAttributes<any>>;
+declare const RangePicker: React.ForwardRefExoticComponent<Omit<Omit<RangePickerProps, "ref"> & React.RefAttributes<any> & WithFormModeProps, "ref"> & React.RefAttributes<any>>;
+type DatePickerType = typeof DatePicker & {
+    RangePicker: typeof RangePicker;
+    YearPicker: typeof YearPicker;
+    MonthPicker: typeof MonthPicker;
+    WeekPicker: typeof WeekPicker;
+    QuarterPicker: typeof QuarterPicker;
+};
+declare const _default: DatePickerType;
+export default _default;

package/lib/esm/date-picker/date-picker.js

@@ -0,0 +1,122 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "popupClassName", "prevIcon", "nextIcon", "superPrevIcon", "superNextIcon"],
+  _excluded2 = ["separator"];
+import { mergeDeep } from '@yqg/beetle';
+import { DatePicker as AntdDatePicker } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import { ConfigProvider } from "../config-provider";
+import { IconChevronLeft, IconChevronRight, IconDoubleArrowLeft, IconDoubleArrowRight } from "../icon";
+import { withFormMode } from "../form-mode";
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var AntdDateRangePicker = AntdDatePicker.RangePicker,
+  AntdDateYearPicker = AntdDatePicker.YearPicker,
+  AntdDateMonthPicker = AntdDatePicker.MonthPicker,
+  AntdDateWeekPicker = AntdDatePicker.WeekPicker,
+  AntdDateQuarterPicker = AntdDatePicker.QuarterPicker;
+var DatePickerTheme = {
+  components: {
+    DatePicker: {
+      borderRadiusSM: '50%',
+      padding: 10
+    }
+  }
+};
+var YearPickerTheme = mergeDeep(DatePickerTheme, {
+  components: {
+    DatePicker: {
+      withoutTimeCellHeight: 36
+    }
+  }
+});
+var useDatePickerProps = function useDatePickerProps(props) {
+  var className = props.className,
+    popupClassName = props.popupClassName,
+    prevIcon = props.prevIcon,
+    nextIcon = props.nextIcon,
+    superPrevIcon = props.superPrevIcon,
+    superNextIcon = props.superNextIcon,
+    rest = _objectWithoutProperties(props, _excluded);
+  return _objectSpread({
+    className: classNames('slimfit-date-picker', className),
+    popupClassName: classNames('slimfit-date-picker-popup', popupClassName),
+    prevIcon: prevIcon || /*#__PURE__*/_jsx(IconChevronLeft, {}),
+    nextIcon: nextIcon || /*#__PURE__*/_jsx(IconChevronRight, {}),
+    superPrevIcon: superPrevIcon || /*#__PURE__*/_jsx(IconDoubleArrowLeft, {}),
+    superNextIcon: superNextIcon || /*#__PURE__*/_jsx(IconDoubleArrowRight, {})
+  }, rest);
+};
+var DatePicker = withFormMode( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var datePickerProps = useDatePickerProps(props);
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: DatePickerTheme,
+    children: /*#__PURE__*/_jsx(AntdDatePicker, _objectSpread({
+      ref: ref
+    }, datePickerProps))
+  });
+}), 'date-picker');
+var YearPicker = withFormMode( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var datePickerProps = useDatePickerProps(props);
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: YearPickerTheme,
+    children: /*#__PURE__*/_jsx(AntdDateYearPicker, _objectSpread({
+      ref: ref
+    }, datePickerProps))
+  });
+}), 'date-picker-year-picker');
+var MonthPicker = withFormMode( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var datePickerProps = useDatePickerProps(props);
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: DatePickerTheme,
+    children: /*#__PURE__*/_jsx(AntdDateMonthPicker, _objectSpread({
+      ref: ref
+    }, datePickerProps))
+  });
+}), 'date-picker-month-picker');
+var WeekPicker = withFormMode( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var datePickerProps = useDatePickerProps(props);
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: DatePickerTheme,
+    children: /*#__PURE__*/_jsx(AntdDateWeekPicker, _objectSpread({
+      ref: ref
+    }, datePickerProps))
+  });
+}), 'date-picker-week-picker');
+var QuarterPicker = withFormMode( /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var datePickerProps = useDatePickerProps(props);
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: DatePickerTheme,
+    children: /*#__PURE__*/_jsx(AntdDateQuarterPicker, _objectSpread({
+      ref: ref
+    }, datePickerProps))
+  });
+}), 'date-picker-quarter-picker');
+
+// 区间选择器
+var RangePicker = withFormMode( /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$separator = _ref.separator,
+    separator = _ref$separator === void 0 ? '-' : _ref$separator,
+    props = _objectWithoutProperties(_ref, _excluded2);
+  var datePickerProps = useDatePickerProps(props);
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: DatePickerTheme,
+    children: /*#__PURE__*/_jsx(AntdDateRangePicker, _objectSpread({
+      ref: ref,
+      separator: separator
+    }, datePickerProps))
+  });
+}), 'date-picker-range-picker');
+QuarterPicker.displayName = 'QuarterPicker';
+WeekPicker.displayName = 'WeekPicker';
+MonthPicker.displayName = 'MonthPicker';
+YearPicker.displayName = 'YearPicker';
+RangePicker.displayName = 'RangePicker';
+DatePicker.displayName = 'DatePicker';
+DatePicker.RangePicker = RangePicker;
+DatePicker.YearPicker = YearPicker;
+DatePicker.MonthPicker = MonthPicker;
+DatePicker.WeekPicker = WeekPicker;
+DatePicker.QuarterPicker = QuarterPicker;
+export default DatePicker;

package/lib/esm/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DatePicker } from './date-picker';
+export type { DatePickerProps } from './date-picker';

package/lib/esm/date-picker/index.js

@@ -0,0 +1 @@
+export { default as DatePicker } from "./date-picker";

package/lib/esm/date-picker/style.less

@@ -0,0 +1,221 @@
+@import '../style/theme-vars.css';
+
+// 日期/时间选择器基础样式
+.slimfit-picker-common() {
+  border-color: var(--color-line-100) !important;
+
+  .ant-picker-suffix .anticon {
+    color: var(--color-neutral-800);
+  }
+
+  &.ant-picker-disabled {
+    background-color: var(--color-fill-200) !important;
+
+    .ant-picker-suffix .anticon {
+      color: var(--color-neutral-400);
+    }
+  }
+}
+
+// 时间选择器弹出面板基础样式
+.slimfit-time-picker-popup-common() {
+  .ant-picker-time-panel-cell-selected {
+    .ant-picker-time-panel-cell-inner {
+      color: var(--color-fi-600) !important;
+      background-color: var(--color-fi-100) !important;
+    }
+  }
+
+  .ant-picker-time-panel-cell-inner {
+    border-radius: 0px !important;
+  }
+
+  .ant-picker-content {
+    --slimfit-picker-panel-column-width: 305px;
+  }
+
+  .ant-picker-content:has(.ant-picker-time-panel-column:nth-of-type(2)) {
+    --slimfit-picker-panel-column-width: 157px;
+  }
+
+  .ant-picker-content:has(.ant-picker-time-panel-column:nth-of-type(3)) {
+    --slimfit-picker-panel-column-width: 105px;
+  }
+
+  .ant-picker-content {
+    padding: 0 6px;
+    .ant-picker-time-panel-column {
+      width: var(--slimfit-picker-panel-column-width);
+      border-inline: none;
+
+      .ant-picker-time-panel-cell-inner {
+        width: calc(var(--slimfit-picker-panel-column-width) - 12px) !important;
+        padding-inline: 0 !important;
+        text-align: center;
+      }
+    }
+  }
+
+  .ant-picker-time-panel-column {
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-fill-400) transparent;
+  }
+}
+
+// 日期/时间选择器弹出面板基础样式
+.slimfit-picker-popup-common() {
+  .ant-picker-header-view > button:not(:first-child) {
+    margin-inline-start: 8px;
+  }
+
+  .ant-picker-header-view {
+    font-size: 14px;
+    color: var(--color-neutral-950);
+  }
+
+  .ant-picker-range-arrow {
+    display: none !important;
+  }
+
+  // 日期 + 时间选择，修改其中的时间选择器样式
+  .ant-picker-time-panel {
+    .slimfit-time-picker-popup-common();
+  }
+
+  .ant-picker-panel-container {
+    box-shadow: 0px 2px 8px 0px var(--color-line-100);
+  }
+
+  .ant-picker-footer .ant-picker-ranges {
+    font-size: 12px;
+
+    > li {
+      line-height: 32px;
+      padding-block: 12px;
+    }
+
+    .ant-picker-ok {
+      line-height: 0;
+
+      .ant-btn {
+        height: 32px;
+        min-width: 88px;
+        padding: 0 20px;
+        border: none;
+        box-shadow: none;
+
+        &[disabled] {
+          color: var(--color-neutral-0);
+          background-color: var(--color-fi-300);
+        }
+      }
+    }
+
+    .ant-picker-now-btn {
+      display: inline-block;
+      height: 32px;
+      padding: 0 20px;
+
+      &:hover {
+        background-color: var(--color-fi-100);
+        color: var(--ant-color-link);
+      }
+    }
+  }
+}
+
+// DatePicker 基础样式
+.slimfit-date-picker {
+  .slimfit-picker-common();
+
+  min-width: 314px;
+
+  .ant-picker-active-bar {
+    display: none;
+  }
+
+  .ant-picker-range-separator {
+    padding: 0 12px;
+  }
+
+  // range单个禁用情况
+  &.ant-picker-range:not(.ant-picker-disabled)
+    .ant-picker-input
+    input[disabled] {
+    color: var(--color-neutral-400);
+  }
+}
+
+// DatePicker 弹出面板样式
+.slimfit-date-picker-popup {
+  .slimfit-picker-popup-common();
+
+  .ant-picker-body {
+    font-size: 14px;
+  }
+
+  .ant-picker-cell-today {
+    .ant-picker-cell-inner::before {
+      width: 0;
+      height: 0;
+      border: 2px solid var(--color-red-600) !important;
+      top: 1px !important;
+      left: 25px !important;
+    }
+  }
+
+  .ant-picker-decade-panel .ant-picker-cell-inner {
+    border-radius: 4px !important;
+  }
+
+  .ant-picker-month-panel,
+  .ant-picker-quarter-panel,
+  .ant-picker-year-panel,
+  .ant-picker-week-panel {
+    .ant-picker-cell::before {
+      height: 36px;
+    }
+
+    .ant-picker-cell-inner {
+      height: 36px;
+      width: 36px;
+      line-height: 36px;
+      padding: 0;
+    }
+  }
+
+  .ant-picker-month-panel,
+  .ant-picker-year-panel {
+    .ant-picker-cell-disabled::before {
+      background: none;
+    }
+  }
+
+  .ant-picker-year-panel .ant-picker-body {
+    padding-top: 24px;
+    padding-bottom: 24px;
+  }
+
+  .ant-picker-cell-range-start,
+  .ant-picker-cell-range-end {
+    .ant-picker-cell-inner {
+      border-radius: 50% !important;
+    }
+  }
+
+  .ant-picker-cell-range-start,
+  .ant-picker-cell-range-end,
+  .ant-picker-cell-in-range {
+    &::before {
+      background-color: var(--color-fi-100) !important;
+    }
+  }
+
+  .ant-picker-week-panel-row-range-hover .ant-picker-cell::before {
+    background-color: var(--color-fi-100) !important;
+  }
+}

package/lib/esm/descriptions/descriptions.d.ts

@@ -0,0 +1,16 @@
+import { type DescriptionsProps as AntdDescriptionsProps } from 'antd';
+import type { DescriptionsItemType as AntdDescriptionsItemType } from 'antd/es/descriptions';
+import React from 'react';
+import './style.less';
+export interface DescriptionsItemProps extends Omit<AntdDescriptionsItemType, 'children'> {
+    children?: React.ReactNode;
+    hide?: boolean;
+}
+export interface DescriptionsProps extends Omit<AntdDescriptionsProps, 'items'> {
+    items?: DescriptionsItemProps[];
+}
+export declare const Descriptions: {
+    ({ items, title, bordered, column, layout, className, style, ...props }: DescriptionsProps): import("react/jsx-runtime").JSX.Element;
+    Item: React.FC<import("antd/es/descriptions/Item").DescriptionsItemProps>;
+};
+export default Descriptions;

package/lib/esm/descriptions/descriptions.js

@@ -0,0 +1,50 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["items", "title", "bordered", "column", "layout", "className", "style"];
+import { Descriptions as AntdDescriptions } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import "./style.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Descriptions = function Descriptions(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    title = _ref.title,
+    _ref$bordered = _ref.bordered,
+    bordered = _ref$bordered === void 0 ? false : _ref$bordered,
+    _ref$column = _ref.column,
+    column = _ref$column === void 0 ? 3 : _ref$column,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var visibleItems = React.useMemo(function () {
+    return items.filter(function (item) {
+      return !item.hide;
+    });
+  }, [items]);
+  var antdItems = React.useMemo(function () {
+    return visibleItems.map(function (item) {
+      var _item$children;
+      return {
+        label: item.label,
+        children: (_item$children = item.children) !== null && _item$children !== void 0 ? _item$children : '-',
+        span: item.span,
+        style: item.style,
+        className: item.className
+      };
+    });
+  }, [visibleItems]);
+  return /*#__PURE__*/_jsx(AntdDescriptions, _objectSpread({
+    className: classNames('slimfit-descriptions', className),
+    title: title,
+    bordered: bordered,
+    column: column,
+    layout: layout,
+    items: antdItems,
+    style: style
+  }, props));
+};
+Descriptions.Item = AntdDescriptions.Item;
+export default Descriptions;

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

@@ -0,0 +1,2 @@
+export { Descriptions } from './descriptions';
+export type { DescriptionsItemProps, DescriptionsProps } from './descriptions';

package/lib/esm/descriptions/index.js

@@ -0,0 +1 @@
+export { Descriptions } from "./descriptions";

package/lib/esm/descriptions/style.less

@@ -0,0 +1,61 @@
+@import '../style/theme-vars.css';
+
+.slimfit-descriptions {
+  // 全局字体大小和行高
+  font-size: 12px !important;
+
+  .ant-descriptions-item-label,
+  .ant-descriptions-item-content {
+    font-size: 12px !important;
+    line-height: 20px;
+  }
+
+  // 无边框布局
+  &:not(.ant-descriptions-bordered) {
+    // 清除默认 padding
+    .ant-descriptions-row > th,
+    .ant-descriptions-row > td {
+      padding-top: 0 !important;
+      padding-left: 0 !important;
+    }
+
+    // 水平布局 - 项与项之间垂直距离 24px
+    .ant-descriptions-row:not(:last-child) > td {
+      padding-bottom: 24px !important;
+    }
+
+    // content 和最后一列的元素右侧无间距
+    .ant-descriptions-item-content,
+    .ant-descriptions-row > td:last-child {
+      padding-right: 0 !important;
+    }
+
+    // 垂直布局特征：label行（奇数行，全是th），content行（偶数行，全是td）
+    // label行（奇数行，全是th）- label 到 content 垂直距离 4px
+    .ant-descriptions-row:nth-child(odd) > th {
+      padding: 0 !important;
+      padding-bottom: 4px !important;
+
+      // 列与列之间水平距离 24px
+      &:not(:last-child) {
+        padding-right: 24px !important;
+      }
+    }
+
+    // content行（偶数行，全是td）- 组与组之间垂直距离 24px
+    .ant-descriptions-row:nth-child(even) > td {
+      padding: 0 !important;
+      padding-bottom: 24px !important;
+
+      // 列与列之间水平距离 24px
+      &:not(:last-child) {
+        padding-right: 24px !important;
+      }
+    }
+
+    // 最后一组 content 行底部无间距
+    .ant-descriptions-row:nth-child(even):last-child > td {
+      padding-bottom: 0 !important;
+    }
+  }
+}

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

@@ -0,0 +1,20 @@
+import { type DrawerProps as AntdDrawerProps } from 'antd';
+import React from 'react';
+import './style.less';
+export type DrawerSize = 'small' | 'default' | 'large' | 'extraLarge';
+export type DrawerPlacement = 'top' | 'right' | 'bottom' | 'left';
+export interface DrawerProps extends Omit<AntdDrawerProps, 'size'> {
+    size?: DrawerSize;
+    onBack?: () => void;
+    showFooter?: boolean;
+    okText?: string;
+    cancelText?: string;
+    onOk?: () => void;
+    showNavigation?: boolean;
+    onPrev?: () => void;
+    onNext?: () => void;
+    prevDisabled?: boolean;
+    nextDisabled?: boolean;
+}
+declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDivElement>>;
+export default Drawer;