feat(ui): add slides component

package.json

@@ -44,6 +44,7 @@
  "regenerator-runtime": "^0.13.9",
  "rfs": "^9.0.6",
  "rxjs": "^7.5.5",
+ "swiper": "^8.3.1",
  "tslib": "^2.4.0"
  },
  "devDependencies": {

packages/site/src/app/styles/_app.scss

@@ -334,3 +334,14 @@ h3 {
  color: var(--d-color-primary-lighter);
  }
 }
+
+.app-demo-slide {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ /* stylelint-disable-next-line declaration-property-value-allowed-list */
+ color: #fff;
+ background: rgb(54 77 121);
+}

packages/ui/src/components/_base-input/BaseInput.tsx

@@ -13,15 +13,22 @@ export interface DBaseInputProps extends React.InputHTMLAttributes<any> {
 }
 
 function BaseInput(props: DBaseInputProps, ref: React.ForwardedRef<any>): JSX.Element | null {
- const { dFormControl, dTag = 'input', dFor = true, ...restProps } = props;
+ const {
+ dFormControl,
+ dTag = 'input',
+ dFor = true,
+
+ id,
+ ...restProps
+ } = props;
 
  //#region Context
  const dPrefix = usePrefixConfig();
  const formContext = useContext(DFormContext);
  //#endregion
 
  const uniqueId = useId();
- const id = `${dPrefix}base-input-${uniqueId}`;
+ const _id = id ?? `${dPrefix}base-input-${uniqueId}`;
 
  const supportForm = formContext && dFormControl;
 
@@ -36,7 +43,7 @@ function BaseInput(props: DBaseInputProps, ref: React.ForwardedRef<any>): JSX.El
  ...restProps,
  ...attrs,
  ref: ref,
- id: props.id ?? id,
+ id: _id,
  'aria-describedby': [props['aria-describedby'], dFormControl?.inputAttrs?.['aria-describedby']]
  .filter((describedby) => isString(describedby))
  .join(' '),

packages/ui/src/components/index.ts

@@ -82,6 +82,9 @@ export { DSeparator } from './separator';
 export type { DSliderProps } from './slider';
 export { DSlider } from './slider';
 
+export type { DSlidesProps, DSlideProps } from './slides';
+export { DSlides, DSlide } from './slides';
+
 export type { DSwitchProps } from './switch';
 export { DSwitch } from './switch';
 

packages/ui/src/components/slides/README.md

@@ -0,0 +1,21 @@
+---
+group: Data Display
+title: Slides
+---
+
+## API
+
+### DTagProps
+
+Extend `React.HTMLAttributes<HTMLDivElement>`.
+
+<!-- prettier-ignore-start -->
+| Property | Description | Type | Default | 
+| --- | --- | --- | --- | 
+| dType | Set tag type | 'primary' \| 'fill' \| 'outline' | 'primary' |
+| dTheme | Set tag theme | 'primary' \| 'success' \| 'warning' \| 'danger' | - |
+| dColor | Custom tag color | string | - |
+| dSize | Set tag size | 'smaller' \| 'larger' | - |
+| dClosable | Whether the tag can be closed | boolean | false |
+| onClose | Callback when the close button is clicked | React.MouseEventHandler\<HTMLSpanElement\> | - |
+<!-- prettier-ignore-end -->

packages/ui/src/components/slides/README.zh-Hant.md

@@ -0,0 +1,20 @@
+---
+title: 走马灯
+---
+
+## API
+
+### DTagProps
+
+继承 `React.HTMLAttributes<HTMLDivElement>`。
+
+<!-- prettier-ignore-start -->
+| 参数 | 说明 | 类型 | 默认值 | 
+| --- | --- | --- | --- | 
+| dType | 设置标签形态 | 'primary' \| 'fill' \| 'outline' | 'primary' |
+| dTheme | 设置标签主题 | 'primary' \| 'success' \| 'warning' \| 'danger' | - |
+| dColor | 自定义标签颜色 | string | - |
+| dSize | 设置标签尺寸 | 'smaller' \| 'larger' | - |
+| dClosable | 标签是否可关闭 | boolean | false |
+| onClose | 点击关闭按钮的回调 | React.MouseEventHandler\<HTMLSpanElement\> | - |
+<!-- prettier-ignore-end -->

packages/ui/src/components/slides/Slide.tsx

@@ -0,0 +1,12 @@
+import type { SwiperSlideProps } from 'swiper/react';
+
+import { useComponentConfig } from '../../hooks';
+import { registerComponentMate } from '../../utils';
+
+export type DSlideProps = SwiperSlideProps;
+
+const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DSlide' });
+export function DSlide(props: DSlideProps): JSX.Element | null {
+ useComponentConfig(COMPONENT_NAME, props);
+ return null;
+}

packages/ui/src/components/slides/Slides.tsx

@@ -0,0 +1,136 @@
+import type { SwiperProps, SwiperSlideProps } from 'swiper/react';
+
+import { isUndefined } from 'lodash';
+import React from 'react';
+import {
+ A11y,
+ Autoplay,
+ Controller,
+ EffectCoverflow,
+ EffectCube,
+ EffectFade,
+ EffectFlip,
+ EffectCreative,
+ EffectCards,
+ HashNavigation,
+ History,
+ Keyboard,
+ Lazy,
+ Mousewheel,
+ Navigation,
+ Pagination,
+ Parallax,
+ Scrollbar,
+ Thumbs,
+ Virtual,
+ Zoom,
+ FreeMode,
+ Grid,
+ Manipulation,
+} from 'swiper';
+import 'swiper/css/bundle';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import { useComponentConfig, usePrefixConfig } from '../../hooks';
+import { LeftOutlined, RightOutlined } from '../../icons';
+import { getClassName, registerComponentMate } from '../../utils';
+
+export type DSlidesProps = SwiperProps;
+
+const { COMPONENT_NAME } = registerComponentMate({ COMPONENT_NAME: 'DSlides' });
+export function DSlides(props: DSlidesProps): JSX.Element | null {
+ const {
+ children,
+
+ navigation: _navigation,
+ pagination: _pagination,
+ direction = 'horizontal',
+
+ className,
+ ...restProps
+ } = useComponentConfig(COMPONENT_NAME, props);
+
+ //#region Context
+ const dPrefix = usePrefixConfig();
+ //#endregion
+
+ const navigation = (() => {
+ const configs = {
+ nextEl: '.swiper-button-next',
+ prevEl: '.swiper-button-prev',
+ };
+ if (_navigation === true || isUndefined(_navigation)) {
+ return configs;
+ }
+ if (_navigation !== false) {
+ return Object.assign(configs, _navigation);
+ }
+ return _navigation;
+ })();
+
+ const pagination = (() => {
+ const configs = {
+ clickable: true,
+ };
+ if (_pagination === true || isUndefined(_pagination)) {
+ return configs;
+ }
+ if (_pagination !== false) {
+ return Object.assign(configs, _pagination);
+ }
+ return _pagination;
+ })();
+
+ return (
+ <Swiper
+ {...restProps}
+ className={getClassName(className, `${dPrefix}slides`, {
+ [`${dPrefix}slides--vertical`]: direction === 'vertical',
+ })}
+ direction={direction}
+ modules={[
+ A11y,
+ Autoplay,
+ Controller,
+ EffectCoverflow,
+ EffectCube,
+ EffectFade,
+ EffectFlip,
+ EffectCreative,
+ EffectCards,
+ HashNavigation,
+ History,
+ Keyboard,
+ Lazy,
+ Mousewheel,
+ Navigation,
+ Pagination,
+ Parallax,
+ Scrollbar,
+ Thumbs,
+ Virtual,
+ Zoom,
+ FreeMode,
+ Grid,
+ Manipulation,
+ ]}
+ navigation={navigation}
+ pagination={pagination}
+ >
+ {React.Children.map(children, (child) =>
+ React.isValidElement(child)
+ ? React.createElement(SwiperSlide, {
+ ...(child.props as SwiperSlideProps),
+ className: getClassName((child.props as SwiperSlideProps).className, `${dPrefix}slide`),
+ })
+ : child
+ )}
+ <button className="swiper-button-prev">
+ <LeftOutlined />
+ </button>
+ <button className="swiper-button-next">
+ <RightOutlined />
+ </button>
+ </Swiper>
+ );
+}

packages/ui/src/components/slides/demos/1.Basic.md

@@ -0,0 +1,36 @@
+---
+title:
+ en-US: Basic
+ zh-Hant: 基本
+---
+
+# en-US
+
+The simplest usage.
+
+# zh-Hant
+
+最简单的用法。
+
+```tsx
+import { DSlides, DSlide } from '@react-devui/ui';
+
+export default function Demo() {
+ return (
+ <DSlides style={{ height: 200 }}>
+ <DSlide>
+ <div className="app-demo-slide">Slide 1</div>
+ </DSlide>
+ <DSlide>
+ <div className="app-demo-slide">Slide 2</div>
+ </DSlide>
+ <DSlide>
+ <div className="app-demo-slide">Slide 3</div>
+ </DSlide>
+ <DSlide>
+ <div className="app-demo-slide">Slide 4</div>
+ </DSlide>
+ </DSlides>
+ );
+}
+```

packages/ui/src/components/slides/demos/2.Swiper.md

@@ -0,0 +1,37 @@
+---
+title:
+ en-US: Reference Swiper
+ zh-Hant: 参考 Swiper
+---
+
+# en-US
+
+For more usage, refer to [Swiper](https://swiperjs.com/react).
+
+# zh-Hant
+
+更多用法参考 [Swiper](https://swiperjs.com/react)。
+
+```tsx
+import { DSlides, DSlide } from '@react-devui/ui';
+
+export default function Demo() {
+ return (
+ <DSlides
+ style={{ height: 200 }}
+ direction={'vertical'}
+ pagination={{
+ dynamicBullets: true,
+ }}
+ >
+ {Array(8)
+ .fill(0)
+ .map((n, i) => (
+ <DSlide key={i}>
+ <div className="app-demo-slide">Slide {i}</div>
+ </DSlide>
+ ))}
+ </DSlides>
+ );
+}
+```

packages/ui/src/components/slides/index.ts

@@ -0,0 +1,2 @@
+export * from './Slides';
+export * from './Slide';

packages/ui/src/hooks/d-config/contex.ts

@@ -39,6 +39,8 @@ import type {
  DSelectProps,
  DSeparatorProps,
  DSliderProps,
+ DSlidesProps,
+ DSlideProps,
  DSwitchProps,
  DTabsProps,
  DTagProps,
@@ -101,6 +103,8 @@ export type DComponentConfig = {
  DSelect: DSelectProps<any, any>;
  DSeparator: DSeparatorProps;
  DSlider: DSliderProps;
+ DSlides: DSlidesProps;
+ DSlide: DSlideProps;
  DSwitch: DSwitchProps;
  DTabs: DTabsProps<any, any>;
  DTag: DTagProps;

packages/ui/src/styles/_components.scss

@@ -31,6 +31,7 @@
 @import 'components/select';
 @import 'components/separator';
 @import 'components/slider';
+@import 'components/slides';
 @import 'components/switch';
 @import 'components/tabs';
 @import 'components/tag';

packages/ui/src/styles/_variables.scss

@@ -89,6 +89,7 @@ $colors: (
  /** component **/
  --#{$variable-prefix}mask-background-color: rgb(0 0 0 / 20%);
  --#{$variable-prefix}avatar-background-color: #bdbdbd;
+ --#{$variable-prefix}slides-navigation-background-color-hover: rgb(245 245 245);
  --#{$variable-prefix}switch-background-color: #d4d6d9;
  --#{$variable-prefix}tabs-slider-background-color: hsl(0deg 0% 97%);
  --#{$variable-prefix}tag-background-color: hsl(0deg 0% 94%);