@fjyueke/bify-mcp 1.0.0

package/metaData/components/rolling-text/example/index.tsx

@@ -0,0 +1,150 @@
+import { useRef } from "react";
+import { View } from "@tarojs/components"
+import { RollingText, Button } from "@fjyueke/bify-core"
+import type { RollingTextRef } from "@fjyueke/bify-core/rolling-text"
+import Page from "../../../components/page"
+import Block from "../../../components/block"
+import "./index.scss"
+
+
+function BasicRollingText() {
+  const ref = useRef<RollingTextRef>()
+
+  const onClick = () => {
+    ref.current?.start();
+  }
+
+  return (
+    <View>
+      <RollingText ref={ref} targetNum={123} autoStart={false} />
+      <View className="rolling-text-btn">
+        <Button color="primary" onClick={onClick}>向下翻滚</Button>
+      </View>
+    </View>
+  )
+}
+
+function SetDirectionRollingText() {
+  const ref = useRef<RollingTextRef>()
+
+  const onClick = () => {
+    ref.current?.start();
+  }
+
+  return (
+    <View>
+      <RollingText ref={ref} targetNum={432} autoStart={false} direction="up" />
+      <View className="rolling-text-btn">
+        <Button color="primary" onClick={onClick}>向上翻滚</Button>
+      </View>
+    </View>
+  )
+}
+
+function StopOrderRollingText() {
+  const ref = useRef<RollingTextRef>()
+
+  const onClick = () => {
+    ref.current?.start();
+  }
+
+  return (
+    <View>
+      <RollingText ref={ref} targetNum={54321} autoStart={false} stopOrder="rtl" />
+      <View className="rolling-text-btn">
+        <Button color="primary" onClick={onClick}>从个位停止</Button>
+      </View>
+    </View>
+  )
+}
+
+const textList = [
+  "aaaaa",
+  "bbbbb",
+  "ccccc",
+  "ddddd",
+  "eeeee",
+  "fffff",
+  "ggggg",
+]
+
+function TextListRollingText() {
+  const ref = useRef<RollingTextRef>()
+
+  const onClick = () => {
+    ref.current?.start();
+  }
+
+  return (
+    <View>
+      <RollingText ref={ref} textList={textList} duration={1} autoStart={false} />
+      <View className="rolling-text-btn">
+        <Button color="primary" onClick={onClick}>开始</Button>
+      </View>
+    </View>
+  )
+}
+
+function CustomerRollingText() {
+  const ref = useRef<RollingTextRef>()
+
+  const onClick = () => {
+    ref.current?.start();
+  }
+
+  return (
+    <View>
+      <RollingText ref={ref} className="my-rolling-text" height={54} startNum={12345} targetNum={54321} autoStart={false} />
+      <View className="rolling-text-btn">
+        <Button color="primary" onClick={onClick}>开始</Button>
+      </View>
+    </View>
+  )
+}
+
+function HandRollingText() {
+  const ref = useRef<RollingTextRef>()
+
+  const start = () => {
+    ref.current?.start();
+  }
+
+  const reset = () => {
+    ref.current?.reset();
+  }
+
+  return (
+    <View>
+      <RollingText ref={ref} className="my-rolling-text" height={54} startNum={0} targetNum={54321} autoStart={false} />
+      <View className="rolling-text-btn">
+        <Button color="primary" onClick={start}>开始</Button>
+        <Button color="primary" className="rolling-text-right" onClick={reset}>重置</Button>
+      </View>
+    </View>
+  )
+}
+
+export default function RollingTextDemo() {
+  return (
+    <Page title="RollingText 翻滚文本动效" className="rolling-text">
+      <Block title="基础用法">
+        <BasicRollingText />
+      </Block>
+      <Block title="设置翻滚方向">
+        <SetDirectionRollingText />
+      </Block>
+      <Block title="设置各数位停止顺序">
+        <StopOrderRollingText />
+      </Block>
+      <Block title="翻转非数字内容">
+        <TextListRollingText />
+      </Block>
+      <Block title="自定义样式">
+        <CustomerRollingText />
+      </Block>
+      <Block title="手动控制">
+        <HandRollingText />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/safe-area/api.md

@@ -0,0 +1,8 @@
+## API
+
+### SafeArea Props
+
+| 参数          | 说明                                  | 类型      | 默认值  |
+| ------------- | ------------------------------------- | --------- | ------- |
+| position      | 安全区的位置，可选值为 `top` `bottom` | _string_  | -       |
+| nativeSafeTop <br>`v0.5.1-alpha.0` | 是否启用顶部安全区域原生属性          | _boolean_ | `false` |

package/metaData/components/safe-area/doc.md

@@ -0,0 +1,30 @@
+# SafeArea 安全区
+
+### 介绍
+
+用于将其内容放置在视口的安全区域中。
+
+### 引入
+
+```tsx
+import { SafeArea } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+<SafeArea position="top" />
+<View>{lorem.generateParagraphs(10)}</View>
+<SafeArea position="bottom" />
+```
+
+## API
+
+### SafeArea Props
+
+| 参数          | 说明                                  | 类型      | 默认值  |
+| ------------- | ------------------------------------- | --------- | ------- |
+| position      | 安全区的位置，可选值为 `top` `bottom` | _string_  | -       |
+| nativeSafeTop <br>`v0.5.1-alpha.0` | 是否启用顶部安全区域原生属性          | _boolean_ | `false` |

package/metaData/components/safe-area/example/index.tsx

@@ -0,0 +1,16 @@
+import { SafeArea } from "@fjyueke/bify-core"
+import { View } from "@tarojs/components"
+import Page from "../../../components/page"
+import lorem from "../../../utils/lorem"
+
+import "./index.scss"
+
+export default function SafeAreaDemo() {
+  return (
+    <Page title="SafeArea 安全区域" className="safe-area-demo">
+      <SafeArea position="top" />
+      <View>{lorem.generateParagraphs(10)}</View>
+      <SafeArea position="bottom" />
+    </Page>
+  )
+}

package/metaData/components/search/api.md

@@ -0,0 +1,35 @@
+## API
+
+### Props
+
+| 参数                              | 说明                                                                                          | 类型                                                                                  | 默认值       |
+| --------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------------ |
+| label                             | 搜索框左侧文本                                                                                | _string_                                                                              | -            |
+| shape                             | 搜索框形状，可选值为 `square` `rounded`                                                       | _string_                                                                              | -            |
+| maxlength                         | 输入的最大字符数                                                                              | _number \| string_                                                                    | -            |
+| placeholder                       | 占位提示文字                                                                                  | _string_                                                                              | -            |
+| autoFocus                         | 自动聚焦，iOS 系统不支持该属性                                                                | _boolean_                                                                             | `false`      |
+| focus                             | 获取焦点                                                                                      | _boolean_                                                                             | `false`      |
+| disabled                          | 是否禁用输入框                                                                                | _boolean_                                                                             | `false`      |
+| readonly                          | 是否将输入框设为只读状态，只读状态下无法输入内容                                              | _boolean_                                                                             | `false`      |
+| icon                              | 输入框左侧图标                                                                                | _ReactNode_                                                                           | `<Search />` |
+| rightIcon                         | 输入框右侧图标                                                                                | _ReactNode_                                                                           | -            |
+| action                            | 是否在搜索框右侧显示取消按钮                                                                  | _boolean \| ReactNode_                                                                | `false`      |
+| inputAlign                        | 输入框内容对齐方式，可选值为 `center` `right`                                                 | _string_                                                                              | `left`       |
+| inputColor                        | 输入框内容颜色，可选值为 `primary` `info` `success` `warning` `danger`                        | _string_                                                                              | -            |
+| clearable                         | 是否启用清除图标，点击清除图标后会清空输入框                                                  | _boolean_                                                                             | `true`       |
+| clearIcon                         | 清除图标                                                                                      | _string_                                                                              | `<Clear />`  |
+| clearTrigger                      | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_                                                                              | `focus`      |
+| feedback                          | 提示文案，为空时不展示                                                                        | _string \| [FormFeedbackProps](/components/form/#formfeedback-props) \| ReactElement_ | -            |
+| enableNative <br>`v0.4.0-alpha.0` | 使用原生键盘（仅支付宝小程序）                                                                | _boolean_                                                                             | `true`       |
+
+### Events
+
+| 事件名   | 说明                 | 回调参数                                                 |
+| -------- | -------------------- | -------------------------------------------------------- |
+| onSearch | 确定搜索时触发       | _event: BaseEventOrig<InputProps.inputValueEventDetail>_ |
+| onChange | 输入框内容变化时触发 | _event: BaseEventOrig<InputProps.inputEventDetail>_      |
+| onFocus  | 输入框获得焦点时触发 | _event: BaseEventOrig<InputProps.inputForceEventDetail>_ |
+| onBlur   | 输入框失去焦点时触发 | _event: BaseEventOrig<InputProps.inputForceEventDetail>_ |
+| onClear  | 点击清除按钮后触发   | _event: event: ITouchEvent_                              |
+| onCancel | 点击取消按钮时触发   | _event: event: ITouchEvent_                              |

package/metaData/components/search/doc.md

@@ -0,0 +1,185 @@
+# Search 搜索
+
+### 介绍
+
+用于搜索场景的输入框组件。
+
+### 引入
+
+```tsx
+import { Search } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+`value` 用于控制搜索框中的文字，`onChange` 可以获得改变的值。
+
+```tsx
+function BasicSearch() {
+  const [value, setValue] = useState("")
+  return (
+    <Search
+      value={value}
+      placeholder="请输入搜索关键词"
+      onChange={(e) => setValue(e.detail.value)}
+    />
+  )
+}
+```
+
+### 事件监听
+
+Search 组件提供了 `onSearch` 和 `onCancel` 事件，`onSearch` 事件在点击键盘上的搜索/回车按钮后触发，`onCancel` 事件在点击搜索框右侧取消按钮时触发。
+
+```tsx
+function SearchWithEvents() {
+  const [value, setValue] = useState("")
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Toast open={open} onClose={() => setOpen(false)}>
+        取消
+      </Toast>
+      <Search
+        value={value}
+        placeholder="请输入搜索关键词"
+        action
+        onChange={(e) => setValue(e.detail.value)}
+        onCancel={() => setOpen(true)}
+      />
+    </>
+  )
+}
+```
+
+### 搜索框内容对齐
+
+通过 `inputAlign` 属性设置搜索框内容的对齐方式，可选值为 `center`、`right`。
+
+```tsx
+function InputCenterSearch() {
+  const [value, setValue] = useState("")
+  return (
+    <Search
+      value={value}
+      placeholder="请输入搜索关键词"
+      inputAlign="center"
+      onChange={(e) => setValue(e.detail.value)}
+    />
+  )
+}
+```
+
+### 禁用搜索框
+
+通过 `disabled` 属性禁用搜索框。
+
+```tsx
+<Search disabled placeholder="请输入搜索关键词" />
+```
+
+### 自定义背景色
+
+通过 `className` 属性可以设置搜索框外部的背景色，通过 `shape="rounded"` 属性设置搜索框的形状。
+
+```tsx
+<Search className="background" shape="rounded" disabled placeholder="请输入搜索关键词" />
+```
+
+```scss
+.background {
+  --search-background-color: #4fc08d;
+}
+```
+
+### 自定义按钮
+
+使用 `action` 插槽可以自定义右侧按钮的内容。使用插槽后，`cancel` 事件将不再触发。
+
+```tsx
+function CustomSearch() {
+  const [value, setValue] = useState("")
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Toast open={open} onClose={() => setOpen(false)}>
+        搜索
+      </Toast>
+      <Search
+        value={value}
+        label="地址"
+        placeholder="请输入搜索关键词"
+        action={<View onClick={() => setOpen(true)}>搜索</View>}
+        onChange={(e) => setValue(e.detail.value)}
+      />
+    </>
+  )
+}
+```
+
+## API
+
+### Props
+
+| 参数                              | 说明                                                                                          | 类型                                                                                  | 默认值       |
+| --------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ------------ |
+| label                             | 搜索框左侧文本                                                                                | _string_                                                                              | -            |
+| shape                             | 搜索框形状，可选值为 `square` `rounded`                                                       | _string_                                                                              | -            |
+| maxlength                         | 输入的最大字符数                                                                              | _number \| string_                                                                    | -            |
+| placeholder                       | 占位提示文字                                                                                  | _string_                                                                              | -            |
+| autoFocus                         | 自动聚焦，iOS 系统不支持该属性                                                                | _boolean_                                                                             | `false`      |
+| focus                             | 获取焦点                                                                                      | _boolean_                                                                             | `false`      |
+| disabled                          | 是否禁用输入框                                                                                | _boolean_                                                                             | `false`      |
+| readonly                          | 是否将输入框设为只读状态，只读状态下无法输入内容                                              | _boolean_                                                                             | `false`      |
+| icon                              | 输入框左侧图标                                                                                | _ReactNode_                                                                           | `<Search />` |
+| rightIcon                         | 输入框右侧图标                                                                                | _ReactNode_                                                                           | -            |
+| action                            | 是否在搜索框右侧显示取消按钮                                                                  | _boolean \| ReactNode_                                                                | `false`      |
+| inputAlign                        | 输入框内容对齐方式，可选值为 `center` `right`                                                 | _string_                                                                              | `left`       |
+| inputColor                        | 输入框内容颜色，可选值为 `primary` `info` `success` `warning` `danger`                        | _string_                                                                              | -            |
+| clearable                         | 是否启用清除图标，点击清除图标后会清空输入框                                                  | _boolean_                                                                             | `true`       |
+| clearIcon                         | 清除图标                                                                                      | _string_                                                                              | `<Clear />`  |
+| clearTrigger                      | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_                                                                              | `focus`      |
+| feedback                          | 提示文案，为空时不展示                                                                        | _string \| [FormFeedbackProps](/components/form/#formfeedback-props) \| ReactElement_ | -            |
+| enableNative <br>`v0.4.0-alpha.0` | 使用原生键盘（仅支付宝小程序）                                                                | _boolean_                                                                             | `true`       |
+
+### Events
+
+| 事件名   | 说明                 | 回调参数                                                 |
+| -------- | -------------------- | -------------------------------------------------------- |
+| onSearch | 确定搜索时触发       | _event: BaseEventOrig<InputProps.inputValueEventDetail>_ |
+| onChange | 输入框内容变化时触发 | _event: BaseEventOrig<InputProps.inputEventDetail>_      |
+| onFocus  | 输入框获得焦点时触发 | _event: BaseEventOrig<InputProps.inputForceEventDetail>_ |
+| onBlur   | 输入框失去焦点时触发 | _event: BaseEventOrig<InputProps.inputForceEventDetail>_ |
+| onClear  | 点击清除按钮后触发   | _event: event: ITouchEvent_                              |
+| onCancel | 点击取消按钮时触发   | _event: event: ITouchEvent_                              |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                    | 默认值                                    | 描述 |
+| --------------------------------------- | ----------------------------------------- | ---- |
+| --search-padding                        | _10px \* $hd var(--padding-sm)_           | -    |
+| --search-background-color               | _var(--white)_                            | -    |
+| --search-content-padding-left           | _var(--padding-sm)_                       | -    |
+| --search-content-background-color       | _var(--gray-1)_                           | -    |
+| --search-content-border-radius          | _var(--border-radius-sm)_                 | -    |
+| --search-content-square-border-radius   | _0_                                       | -    |
+| --search-content-rounded-border-radius  | _var(--border-radius-max)_                | -    |
+| --search-input-height                   | _34px \* $hd_                             | -    |
+| --search-label-padding                  | _0 5px \* $hd_                            | -    |
+| --search-label-color                    | _var(--text-color)_                       | -    |
+| --search-label-font-size                | _var(--font-size-md)_                     | -    |
+| --search-label-line-height              | _var(--search-input-height)_              | -    |
+| --search-field-padding                  | _5px * $hd var(--padding-xs) 5px * $hd 0_ | -    |
+| --search-left-icon-color                | _var(--gray-6)_                           | -    |
+| --search-action-padding                 | _0 var(--padding-xs)_                     | -    |
+| --search-action-color                   | _var(--text-color)_                       | -    |
+| --search-action-line-height             | _var(--search-input-height)_              | -    |
+| --search-action-font-size               | _var(--font-size-md)_                     | -    |
+| --search-action-active-background-color | _var(--active-color)_                     | -    |

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

@@ -0,0 +1,101 @@
+import { Search, Toast } from "@fjyueke/bify-core"
+import { View } from "@tarojs/components"
+import { useState } from "react"
+import Block from "../../../components/block"
+import Page from "../../../components/page"
+import "./index.scss"
+
+function BasicSearch() {
+  const [value, setValue] = useState("")
+  return (
+    <Search
+      value={value}
+      placeholder="请输入搜索关键词"
+      onChange={(e) => setValue(e.detail.value)}
+    />
+  )
+}
+
+function SearchWithEvents() {
+  const [value, setValue] = useState("")
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Toast open={open} onClose={() => setOpen(false)}>
+        取消
+      </Toast>
+      <Search
+        value={value}
+        placeholder="请输入搜索关键词"
+        action
+        onChange={(e) => setValue(e.detail.value)}
+        onCancel={() => setOpen(true)}
+      />
+    </>
+  )
+}
+
+function InputCenterSearch() {
+  const [value, setValue] = useState("")
+  return (
+    <Search
+      value={value}
+      placeholder="请输入搜索关键词"
+      inputAlign="center"
+      onChange={(e) => setValue(e.detail.value)}
+    />
+  )
+}
+
+function DisabledSearch() {
+  return <Search disabled placeholder="请输入搜索关键词" />
+}
+
+function BackgroundSearch() {
+  return <Search className="background" shape="rounded" placeholder="请输入搜索关键词" />
+}
+
+function CustomSearch() {
+  const [value, setValue] = useState("")
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Toast open={open} onClose={() => setOpen(false)}>
+        搜索
+      </Toast>
+      <Search
+        value={value}
+        label="地址"
+        placeholder="请输入搜索关键词"
+        action={<View onClick={() => setOpen(true)}>搜索</View>}
+        onChange={(e) => setValue(e.detail.value)}
+      />
+    </>
+  )
+}
+
+export default function SearchDemo() {
+  return (
+    <Page title="Search 搜索" className="search-demo">
+      <Block title="基础用法">
+        <BasicSearch />
+      </Block>
+      <Block title="事件监听">
+        <SearchWithEvents />
+      </Block>
+      <Block title="搜索框内容对齐">
+        <InputCenterSearch />
+      </Block>
+      <Block title="禁用搜索框">
+        <DisabledSearch />
+      </Block>
+      <Block title="自定义背景色">
+        <BackgroundSearch />
+      </Block>
+      <Block title="自定义按钮">
+        <CustomSearch />
+      </Block>
+    </Page>
+  )
+}

package/metaData/components/share-sheet/api.md

@@ -0,0 +1,48 @@
+## API
+
+### ShareSheet Props
+
+| 参数          | 说明         | 类型              | 默认值     |
+|-------------|------------|-----------------|---------|
+| defaultOpen | 默认是否显示动作面板 | _boolean_       | `false` |
+| open        | 是否显示动作面板   | _boolean_       | `false` |
+| className   | 样式类名       | _string_        | -       |
+| style       | 样式对象       | _CSSProperties_ | -       |
+| rounded     | 是否为圆角      | _string_        | -       |
+
+### ShareSheet.Backdrop Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| className | 样式类名 | _string_        | - |
+| style     | 样式对象 | _CSSProperties_ | - |
+| duration  | 动画时长，单位毫秒 | _number \| string_ | `300` |
+| closeable | 点击是否可以关闭  | _boolean_ | `true` |
+
+### ShareSheet.Header Props
+
+| 参数        | 说明   | 类型              | 默认值 |
+|-----------|------|-----------------|-----|
+| className | 样式类名 | _string_        | -   |
+| style     | 样式对象 | _CSSProperties_ | -   |
+| title     | 标题   | _string_        | -   |
+| children  | 描述信息 | _string_        | -   |
+
+### ShareSheet.Option Props
+
+|     参数     | 说明 | 类型 | 默认值 |
+| ----------- | --- | --- | --- |
+| className   | 分享选项类名 | _string_ | - |
+| name        | 分享渠道名称 | _string_ | - |
+| value       | 选项值  | _string_        | - |
+| description | 分享选项描述 | _string_ | - |
+| icon        | 图标，可选值为 `wechat` `weibo` `qq` `link` `qrcode` `poster`<br/>`weapp-qrcode` `wechat-moments`，支持传入 Image 组件 | _string_ | - |
+| openType    | 微信开放能力，可选值为 `contact` `contactShare` `share`<br/>`getRealnameAuthInfo` `getAuthorize` `getPhoneNumber`<br/>`getUserInfo` `lifestyle` `launchApp` `openSetting` `feedback` | _string_ | - |
+
+### Events
+
+| 事件名      | 说明        | 回调参数                            |
+|----------|-----------|---------------------------------|
+| onSelect | 点击分享选项时触发 | _event: ShareSheet.OptionEvent_ |
+| onCancel | 点击取消按钮时触发 | -                               |
+| onClose  | 关闭面板时触发   | -                               |