@fjyueke/bify-mcp 1.0.0

package/metaData/components/sticky/api.md

@@ -0,0 +1,16 @@
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| position | 吸附位置，可选值为 `bottom` | _string_ | `top` |
+| offsetTop | 吸顶时与顶部的距离，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `0` |
+| offsetBottom | 吸底时与底部的距离，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `0` |
+| container | 容器对应的 HTML 节点 | _Element_ | - |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| onChange | 当吸顶状态改变时触发 | _fixed: boolean_ |

package/metaData/components/sticky/doc.md

@@ -0,0 +1,87 @@
+# Sticky 粘性布局
+
+### 介绍
+
+Sticky 组件与 CSS 中 `position: sticky` 属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。
+
+### 引入
+
+```tsx
+import { Sticky } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+将内容包裹在 `Sticky` 组件内即可。
+
+```tsx
+<Sticky>
+  <Button color="primary">吸底距离</Button>
+</Sticky>
+```
+
+### 吸顶距离
+
+通过 `offsetTop` 属性可以设置组件在吸顶时与顶部的距离。
+
+```tsx
+<Sticky offsetTop={100}>
+  <Button color="primary">吸顶距离</Button>
+</Sticky>
+```
+
+### 指定容器
+
+通过 `container` 属性可以指定组件的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会固定在容器的底部。
+
+```tsx
+function StickyWithContainer() {
+  const container = useRef()
+  return (
+    <View ref={container}>
+      <Sticky container={container}>
+        <Button color="warning">指定容器</Button>
+      </Sticky>
+    </View>
+  )
+}
+```
+
+### 吸底距离
+
+将 `position` 设置为 `bottom` 可以让组件吸附在底部。通过 `offsetBottom` 属性可以设置组件在吸底时与底部的距离。
+
+```tsx
+<Sticky position="bottom" offsetBottom={50}>
+  <Button color="primary">吸底距离</Button>
+</Sticky>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| position | 吸附位置，可选值为 `bottom` | _string_ | `top` |
+| offsetTop | 吸顶时与顶部的距离，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `0` |
+| offsetBottom | 吸底时与底部的距离，支持 `px` `vw` `vh` `rem` 单位，默认 `px` | _number \| string_ | `0` |
+| container | 容器对应的 HTML 节点 | _Element_ | - |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| onChange | 当吸顶状态改变时触发 | _fixed: boolean_ |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称               | 默认值  | 描述  |
+|------------------|------|-----|
+| --sticky-z-index | _99_ | -   |

package/metaData/components/sticky/example/index.tsx

@@ -0,0 +1,62 @@
+import { Button, Sticky } from "@fjyueke/bify-core"
+import { View } from "@tarojs/components"
+import { useRef } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicSticky() {
+  return (
+    <Block title="基础用法">
+      <Sticky>
+        <Button color="primary">基础用法</Button>
+      </Sticky>
+    </Block>
+  )
+}
+
+function OffsetSticky() {
+  return (
+    <Block title="吸顶距离" className="sticky-demo__offset-sticky">
+      <Sticky offsetTop={50}>
+        <Button color="primary">吸顶距离</Button>
+      </Sticky>
+    </Block>
+  )
+}
+
+function StickyWithContainer() {
+  const container = useRef()
+  return (
+    <Block title="指定容器">
+      <View className="sticky-demo__container-sticky" ref={container}>
+        <Sticky container={container}>
+          <Button color="warning">指定容器</Button>
+        </Sticky>
+      </View>
+    </Block>
+  )
+}
+
+function BottomSticky() {
+  return (
+    <Block title="吸底距离" className="sticky-demo__bottom-sticky">
+      <View className="sticky-demo__bottom-sticky__padding" />
+      <Sticky position="bottom" offsetBottom={50}>
+        <Button color="primary">吸底距离</Button>
+      </Sticky>
+      <View className="sticky-demo__bottom-sticky__padding" />
+    </Block>
+  )
+}
+
+export default function StickyDemo() {
+  return (
+    <Page title="Sticky 粘性布局" className="sticky-demo">
+      <BasicSticky />
+      <OffsetSticky />
+      <StickyWithContainer />
+      <BottomSticky />
+    </Page>
+  )
+}

package/metaData/components/swipe-cell/api.md

@@ -0,0 +1,19 @@
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultOpen | 默认是否打开滑动单元格，可选值：`left` `right` `outside`  | _string_ | - |
+| open | 是否打开滑动单元格，可选值：`left` `right` `outside`  | _string_ | - |
+| beforeClose | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(args) => boolean \| Promise\<boolean\>_ | - |
+| disabled | 是否禁用滑动 | _boolean_ | `false` |
+| stopPropagation | 是否阻止滑动事件冒泡 | _boolean_ | `false` |
+| catchMove | 是否捕获触摸移动事件 | _boolean_ | `false` |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| onOpen | 打开时触发 | _position: 'left' \| 'right'_ |
+| onClose | 关闭时触发 | _position: 'left' \| 'right' \| 'cell' \| 'outside'_ |

package/metaData/components/swipe-cell/doc.md

@@ -0,0 +1,105 @@
+# SwipeCell 滑动单元格
+
+### 介绍
+
+可以左右滑动来展示操作按钮的单元格组件。
+
+### 引入
+
+```tsx
+import { SwipeCell } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+`SwipeCell` 组件提供了 `SwipeCell.Actions` 组件，用于定义两侧滑动区域的内容。
+
+```tsx
+<SwipeCell>
+  <SwipeCell.Actions side="left">
+    <Button variant="contained" shape="square" color="primary">选择</Button>
+  </SwipeCell.Actions>
+  <Cell bordered={false} title="单元格">
+    内容
+  </Cell>
+  <SwipeCell.Actions side="right">
+    <Button variant="contained" shape="square" color="danger">删除</Button>
+    <Button variant="contained" shape="square" color="primary">收藏</Button>
+  </SwipeCell.Actions>
+</SwipeCell>
+```
+
+### 自定义内容
+
+`SwipeCell` 可以嵌套任意内容，比如嵌套一个商品卡片。
+
+```tsx
+<SwipeCell className="custom-swipe-cell">
+  <View className="custom-card">
+    <Image className="custom-card__thumb" src="https://img01.yzcdn.cn/vant/ipad.jpeg" />
+    <View className="custom-card__content">
+      <View className="custom-card__title">商品标题</View>
+    </View>
+  </View>
+  <SwipeCell.Actions side="right">
+    <Button variant="contained" shape="square" color="danger">
+      删除
+    </Button>
+    <Button variant="contained" shape="square" color="primary">
+      收藏
+    </Button>
+  </SwipeCell.Actions>
+</SwipeCell>
+```
+
+```scss
+.custom-swipe-cell {
+
+  .taroify-swipe-cell__actions {
+    .taroify-button {
+      height: 100%;
+    }
+  }
+
+  .custom-card {
+    background: #fff;
+    position: relative;
+    box-sizing: border-box;
+    padding: 8px * 2 16px * 2;
+    color: #323233;
+    font-size: 12px;
+    display: flex;
+
+    &__thumb {
+      position: relative;
+      flex: none;
+      width: 88px * 2;
+      height: 88px * 2;
+      margin-right: 8px * 2;
+    }
+  }
+}
+
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultOpen | 默认是否打开滑动单元格，可选值：`left` `right` `outside`  | _string_ | - |
+| open | 是否打开滑动单元格，可选值：`left` `right` `outside`  | _string_ | - |
+| beforeClose | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(args) => boolean \| Promise\<boolean\>_ | - |
+| disabled | 是否禁用滑动 | _boolean_ | `false` |
+| stopPropagation | 是否阻止滑动事件冒泡 | _boolean_ | `false` |
+| catchMove | 是否捕获触摸移动事件 | _boolean_ | `false` |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| onOpen | 打开时触发 | _position: 'left' \| 'right'_ |
+| onClose | 关闭时触发 | _position: 'left' \| 'right' \| 'cell' \| 'outside'_ |

package/metaData/components/swipe-cell/example/index.tsx

@@ -0,0 +1,62 @@
+import { Button, Cell, Image, SwipeCell } from "@fjyueke/bify-core"
+import { View } from "@tarojs/components"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicSwipeCell() {
+  return (
+    <SwipeCell>
+      <SwipeCell.Actions side="left">
+        <Button variant="contained" shape="square" color="primary">
+          选择
+        </Button>
+      </SwipeCell.Actions>
+      <Cell bordered={false} title="单元格">
+        内容
+      </Cell>
+      <SwipeCell.Actions side="right">
+        <Button variant="contained" shape="square" color="danger">
+          删除
+        </Button>
+        <Button variant="contained" shape="square" color="primary">
+          收藏
+        </Button>
+      </SwipeCell.Actions>
+    </SwipeCell>
+  )
+}
+
+function SwipeCellWithCustomContent() {
+  return (
+    <SwipeCell className="custom-swipe-cell">
+      <View className="custom-card">
+        <Image className="custom-card__thumb" src="https://img01.yzcdn.cn/vant/ipad.jpeg" />
+        <View className="custom-card__content">
+          <View className="custom-card__title">商品标题</View>
+        </View>
+      </View>
+      <SwipeCell.Actions side="right">
+        <Button variant="contained" shape="square" color="danger">
+          删除
+        </Button>
+        <Button variant="contained" shape="square" color="primary">
+          收藏
+        </Button>
+      </SwipeCell.Actions>
+    </SwipeCell>
+  )
+}
+
+export default function SwipeCellDemo() {
+  return (
+    <Page title="SwipeCell 滑动单元格" className="swipe-cell-demo">
+      <Block title="基础用法">
+        <BasicSwipeCell />
+      </Block>
+      <Block title="自定义内容">
+        <SwipeCellWithCustomContent />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/swiper/api.md

@@ -0,0 +1,22 @@
+## API
+
+### Swiper Props
+
+| 参数             | 说明                     | 类型               | 默认值    |
+| ---------------- | ------------------------ | ------------------ | --------- |
+| defaultValue     | 默认位置索引值           | _number_ | `0`       |
+| value            | 位置索引值           | _number_ | `0`       |
+| autoplay         | 自动轮播间隔，单位为 ms  | _number_ | -         |
+| duration         | 动画时长，单位为 ms      | _number_ | `500`     |
+| width            | 滑块宽度，单位为 `px`    | _number_ | `auto`    |
+| height           | 滑块高度，单位为 `px`    | _number_ | `auto`    |
+| direction        | 轮播方向，可选值为 `vertical` | _string_     | `horizontal`   |
+| touchable        | 是否可以通过手势滑动     | _boolean_          | `true`    |
+| lazyRender       | 是否延迟渲染未展示的轮播 | _boolean_          | `false`   |
+| stopPropagation  | 是否阻止滑动事件冒泡     | _boolean_          | `true`    |
+
+### Swiper Events
+
+| 事件名 | 说明                 | 回调参数            |
+| ------ | -------------------- | ------------------- |
+| onChange | 每一页轮播结束后触发 | _(index: number)_ |

package/metaData/components/swiper/doc.md

@@ -0,0 +1,228 @@
+# Swiper 轮播
+
+### 介绍
+
+用于循环播放一组图片或内容。
+
+### 引入
+
+```tsx
+import { Swiper } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+每个 Swipe.Item 代表一张轮播卡片，可以通过 `autoplay` 属性设置自动轮播的间隔。
+
+```tsx
+function BasicSwiper() {
+  return (
+    <Swiper className="basic-swiper" autoplay={4000}>
+      <Swiper.Indicator />
+      <Swiper.Item>1</Swiper.Item>
+      <Swiper.Item>2</Swiper.Item>
+      <Swiper.Item>3</Swiper.Item>
+      <Swiper.Item>4</Swiper.Item>
+    </Swiper>
+  )
+}
+```
+
+```scss
+.basic-swiper {
+  .taroify-swiper-item {
+    color: #fff;
+    font-size: 20px * 2;
+    background: #39a9ed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+```
+
+### 懒加载
+
+当 Swiper 中含有图片时，可以通过 `lazyRender` 属性来开启懒加载模式。在懒加载模式下，只会渲染当前页和下一页。
+
+```tsx
+function ImageSwiper() {
+  return (
+    <Swiper className="image-swiper" lazyRender autoplay={4000}>
+      <Swiper.Indicator />
+      <Swiper.Item>
+        <Image className="image" src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
+      </Swiper.Item>
+      <Swiper.Item>
+        <Image className="image" src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
+      </Swiper.Item>
+      <Swiper.Item>
+        <Image className="image" src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
+      </Swiper.Item>
+      <Swiper.Item>
+        <Image className="image" src="https://img01.yzcdn.cn/vant/apple-4.jpg" />
+      </Swiper.Item>
+    </Swiper>
+  )
+}
+```
+
+```scss
+.image-swiper {
+  .image {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    height: 240px * 2;
+    padding: 30px * 2 60px * 2;
+    background: #fff;
+    pointer-events: none;
+  }
+}
+```
+
+### 监听 change 事件
+
+在每一页轮播结束后，会触发 `change` 事件。
+
+```tsx
+function SwiperWithOnChange() {
+  return (
+    <>
+      <Toast id="toast" />
+      <Swiper
+        className="onchange-swiper"
+        onChange={(value) => Toast.open(`当前 Swipe 索引：${value}`)}
+      >
+        <Swiper.Indicator />
+        <Swiper.Item>1</Swiper.Item>
+        <Swiper.Item>2</Swiper.Item>
+        <Swiper.Item>3</Swiper.Item>
+        <Swiper.Item>4</Swiper.Item>
+      </Swiper>
+    </>
+  )
+}
+```
+
+### 纵向滚动
+
+设置 `vertical` 属性后滑块会纵向排列，此时需要指定滑块容器的高度。
+
+```tsx
+<Swiper className="vertical-swiper" direction="vertical">
+  <Swiper.Item>1</Swiper.Item>
+  <Swiper.Item>2</Swiper.Item>
+  <Swiper.Item>3</Swiper.Item>
+  <Swiper.Item>4</Swiper.Item>
+</Swiper>
+```
+
+```scss
+.vertical-swiper {
+  .taroify-swiper-item {
+    color: #fff;
+    font-size: 20px * 2;
+    background: #39a9ed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+```
+
+### 自定义滑块大小
+
+滑块默认宽度为 `100%`，可以通过 `width` 属性设置单个滑块的宽度。纵向滚动模式下，可以通过 `height` 属性设置单个滑块的高度。
+
+```tsx
+function SwiperWithCustomWidth() {
+  return (
+    <Swiper loop={false} width={300}>
+      <Swiper.Indicator />
+      <Swiper.Item>1</Swiper.Item>
+      <Swiper.Item>2</Swiper.Item>
+      <Swiper.Item>3</Swiper.Item>
+      <Swiper.Item>4</Swiper.Item>
+    </Swiper>
+  )
+}
+```
+
+> 目前不支持在循环滚动模式下自定义滑块大小，因此需要将 loop 设置为 false。
+>
+
+### 自定义指示器
+
+通过 `Swiper.Indicator` 组件可以自定义指示器的样式。
+
+```tsx
+function SwiperWithCustomIndicator() {
+  const [value, setValue] = useState(0)
+
+  return (
+    <Swiper autoplay={4000} onChange={setValue}>
+      <Swiper.Item>1</Swiper.Item>
+      <Swiper.Item>2</Swiper.Item>
+      <Swiper.Item>3</Swiper.Item>
+      <Swiper.Item>4</Swiper.Item>
+      <Swiper.Indicator className="custom-indicator">{value + 1}/4</Swiper.Indicator>
+    </Swiper>
+  )
+}
+```
+
+```scss
+.custom-indicator {
+  position: absolute;
+  right: 5px * 2;
+  bottom: 5px * 2;
+  padding: 2px * 2 5px * 2;
+  font-size: 12px * 2;
+  color: #ffffff;
+  background: rgba(0, 0, 0, 0.1)_ | - |
+}
+```
+
+## API
+
+### Swiper Props
+
+| 参数             | 说明                     | 类型               | 默认值    |
+| ---------------- | ------------------------ | ------------------ | --------- |
+| defaultValue     | 默认位置索引值           | _number_ | `0`       |
+| value            | 位置索引值           | _number_ | `0`       |
+| autoplay         | 自动轮播间隔，单位为 ms  | _number_ | -         |
+| duration         | 动画时长，单位为 ms      | _number_ | `500`     |
+| width            | 滑块宽度，单位为 `px`    | _number_ | `auto`    |
+| height           | 滑块高度，单位为 `px`    | _number_ | `auto`    |
+| direction        | 轮播方向，可选值为 `vertical` | _string_     | `horizontal`   |
+| touchable        | 是否可以通过手势滑动     | _boolean_          | `true`    |
+| lazyRender       | 是否延迟渲染未展示的轮播 | _boolean_          | `false`   |
+| stopPropagation  | 是否阻止滑动事件冒泡     | _boolean_          | `true`    |
+
+### Swiper Events
+
+| 事件名 | 说明                 | 回调参数            |
+| ------ | -------------------- | ------------------- |
+| onChange | 每一页轮播结束后触发 | _(index: number)_ |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                         | 默认值                              | 描述  |
+|--------------------------------------------|----------------------------------|-----|
+| --swiper-indicators-margin                 | _var(--padding-sm)_              | -   |
+| --swiper-indicator-size                    | _6px * $hd_                      | -   |
+| --swiper-indicator-width                   | _var(--swiper-indicator-size)_   | -   |
+| --swiper-indicator-height                  | _var(--swiper-indicator-size)_   | -   |
+| --swiper-indicator-opacity                 | _0.3_                            | -   |
+| --swiper-indicator-background-color        | _var(--border-color)_            | -   |
+| --swiper-indicator-transition-duration     | _var(--animation-duration-fast)_ | -   |
+| --swiper-indicator-active-opacity          | _1_                              | -   |
+| --swiper-indicator-active-background-color | _var(--blue)_                    | -   |