@ebfe/vantkit-doc 0.0.2 → 0.0.4

package/es/field-single-picker/README.md

@@ -1,107 +0,0 @@
-# FieldSinglePicker
-
-### 介绍
-
-基于 SinglePicker 以及 vant 的 field 组件进行二次封装，方便处理表单中的单项选择需求场景。
-
-- 支持传入所有 SinglePicker props（类型 TSinglePickerProps）
-- 支持传入所有的 [vant field props](https://vant-ui.github.io/vant/#/zh-CN/field#props)
-
-**主要功能描述**
-
-- 集成 SinglePicker 所有功能
-
-**对开发者的解脱**
-
-- 符合 ui 设计
-- 默认场景下 van-field 绑定值就是展示值，FieldSinglePicker 内部将绑定值与展示值表单真正需要收集的值分隔开。
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <van-form ref="FormRef">
-    modelValue: {{ pickerValue }}
-    <FieldSinglePicker
-      v-model="pickerValue"
-      :field-props="{
-        name: 'singlePicker',
-        label: '单选',
-        placeholder: '请选择',
-        required: true,
-        rules: [{ required: true, message: '请选择' }],
-      }"
-      :picker-props="{
-        title: '基础用法',
-        columns: columns,
-        columnsFieldNames: columnsFieldNames,
-      }"
-    >
-      <template #columns-top>
-        <div class="desc">这就是基础组件 - SinglePicker</div>
-      </template>
-    </FieldSinglePicker>
-    <van-button round block type="primary" @click="handleSubmit"> 提交 </van-button>
-  </van-form>
-</template>
-
-<script setup lang="ts">
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { FieldSinglePicker } from '@ebfe/vant-kit';
-  import { Form as VanForm, Button as VanButton, FormInstance } from 'vant';
-  import { ref } from 'vue';
-
-  const FormRef = ref<FormInstance>();
-  const handleSubmit = () => {
-    FormRef.value?.validate().then(() => {
-      // eslint-disable-next-line no-console
-      console.log('submit', FormRef.value?.getValues?.());
-    });
-  };
-
-  const columns = [
-    { name: '选项1', value: '1' },
-    { name: '选项2', value: '2' },
-  ];
-  const columnsFieldNames = {
-    text: 'name',
-    value: 'value',
-  };
-  const [pickerValue, _setPickerValue] = useWrapperRef<string | undefined>(undefined);
-</script>
-
-<style scoped lang="less">
-  .desc {
-    font-size: 12px;
-    text-align: center;
-  }
-</style>
-```
-
-## API
-
-### Props
-
-继承 TSinglePickerProps 的同时
-
-| 参数       | 说明               | 类型             | 默认值 |
-| ---------- | ------------------ | ---------------- | ------ |
-| fieldProps | 当前选中项对应的值 | vant field props | -      |
-
-### Events
-
-继承 SinglePicker
-
-| 事件名 | 说明 | 回调参数 |
-| :----- | :--- | :------- |
-| -      | -    | -        |
-
-### Slots
-
-继承 SinglePicker
-
-| 名称 | 说明 | 参数 |
-| :--- | :--- | :--- |
-| -    | -    | -    |

package/es/mask-txt/README.md

@@ -1,214 +0,0 @@
-# MaskTxt
-
-### 介绍
-
-脱敏文本组件
-
-**主要功能描述**
-
-- 自动处理数据源(加密数据)的解密逻辑
-- 针对不同项目、业务场景，支持自定义：
-  - 加解密方法
-  - 脱敏占位符号
-  - 脱敏展示的策略
-    - 内部已经支持部分策略（身份证、手机号、邮箱、银行卡号），可自由配置。
-    - 也支持完全自定义
-- 针对 ui，支持自定义：
-  - 默认展示的图标大小
-  - 完全自定义展示逻辑
-
-**对开发者的解脱**
-
-- 默认的 ui、交互处理
-- 当数据源不符合与后端约定的格式，组件内部兜底加解密的展示。
-
-## 代码演示
-
-### 基础用法
-
-必要配置项：
-
-- preset 预设，一般在一个项目中是通用的
-  - encrypt 加密方法
-  - decrypt 解密方法
-  - fetchPlaintext 获取未脱敏数据的异步方法
-- maskId 数据标识
-- mask-txt 数据源(加密且脱敏)
-
-> 内部兜底逻辑：
->
-> - 如果数据源符合要求（加密且脱敏 - 根据是否包含脱敏占位符号来判断），则走调用接口的逻辑。
-> - 反之，不符合要求，走前端兜底策略
-> - 例如再右侧示例中输入 12345678 和 123\*_678 的展示效果是一致的，只不过当数据源本身包含脱敏占位符(默认为 _)时，点击小眼睛会走调用接口逻辑，界面可以观察到 loading 效果。
-
-```html
-<template>
-  <demo-block title="基础用法">
-    <section>
-      <span class="desc">设置初始值: 加密且脱敏</span>
-      <van-field label="明文" placeholder="请输入" v-model="dataSourcePlainTxt" />
-      <van-field disabled label="密文" v-model="dataSourceCipherTxt" placeholder="输入明文, 制造密文" />
-      <mask-txt :preset="commonPreset" mask-id="maskId" :mask-txt="dataSourceCipherTxt" />
-    </section>
-  </demo-block>
-</template>
-
-<script setup lang="ts">
-  import { MaskTxt, TMaskTxtProps } from '@ebfe/vant-kit';
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { Field as VanField } from 'vant';
-  import { getAesCryptoTool } from '@ebfe/utils';
-  import { computed } from 'vue';
-
-  const { AES_Encrypt, AES_Dencrypt } = getAesCryptoTool({
-    key: '12345678',
-  });
-
-  /**
-   * 制造数据源
-   */
-  const [dataSourcePlainTxt] = useWrapperRef('');
-  const dataSourceCipherTxt = computed(() => commonPreset.encrypt?.(dataSourcePlainTxt.value) as string);
-
-  const commonPreset: TMaskTxtProps['preset'] = {
-    decrypt: AES_Dencrypt,
-    encrypt: AES_Encrypt,
-    fetchPlaintext: async (_maskId) => {
-      return new Promise<string>((resolve) => {
-        setTimeout(() => {
-          // eslint-disable-next-line no-console
-          console.log('模拟接口调用');
-          resolve(dataSourceCipherTxt.value!);
-        }, 1000);
-      });
-    },
-  };
-</script>
-
-<style scoped lang="less">
-  section {
-    padding: 0px 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 12px;
-
-    .desc {
-      font-size: 12px;
-      align-self: flex-start;
-      color: #aaa;
-    }
-  }
-</style>
-```
-
-### 自定义脱敏占位符号
-
-preset.placeholder
-
-```ts
-const commonPreset: TMaskTxtProps['preset'] = {
-  ……
-  placeholder: '$'
-};
-```
-
-### 自带一些内置脱敏策略
-
-preset.maskType
-
-`TMaskTxtProps['preset']['maskType']`
-
-### 自定义脱敏策略
-
-preset.maskStrategy
-
-`TMaskTxtProps['preset']['maskStrategy']`
-
-```ts
-const commonPreset: TMaskTxtProps['preset'] = {
-  ……
-  placeholder: '😀',
-  maskStrategy(str) {
-    try {
-      return `👉${str.replace(/./g, '😀')}👈`;
-    } catch (_) {
-      _;
-      return '';
-    }
-  },
-};
-```
-
-### 更改默认展示的图标大小
-
-```html
-<mask-txt …… icon-size="30" />
-```
-
-### 完全自定义展示逻辑
-
-- 插槽支持暴露完善的 api
-
-```html
-<mask-txt :preset="commonPreset" mask-id="maskId" :mask-txt="dataSourceCipherTxt">
-  <template
-    #default="{
-        showValue,
-        loading,
-        isPlaintextVisible,
-        toggleVisibility,
-      }"
-  >
-    <van-button @click="toggleVisibility">
-      <span style="color: red">{{ showValue }}</span>
-      <van-icon v-if="!loading" :size="16" :name="isPlaintextVisible ? 'eye' : 'browsing-history'" />
-      <van-loading v-else :size="16" type="spinner" />
-    </van-button>
-  </template>
-</mask-txt>
-```
-
-## API
-
-### Props
-
-`TMaskTxtProps`
-
-| 参数     | 说明                                | 类型                                   | 默认值       |
-| -------- | ----------------------------------- | -------------------------------------- | ------------ | ---------------- | --- |
-| maskId   | 数据标识,来源于后端，也需传递给后端 | string                                 | -            |
-| maskTxt  | 数据源（默认期望加密且脱敏）        | string                                 | -            |
-| iconSize | 默认所展示的图标大小                | string \| number                       | 16           |
-| preset   | 一些预设                            | `Omit<IUseMaskedFieldOptions, 'maskId' | 'modelValue' | 'onValueUpdate'` | -   |
-
-```ts
-interface IUseMaskedFieldOptions {
-  modelValue: ComputedRef<string>;
-  maskId: ComputedRef<string>;
-  fetchPlaintext: (maskId: string) => Promise<string>;
-  decrypt: (cipher: string) => string;
-  encrypt?: (plain: string) => string;
-  placeholder?: string;
-  /**
-   * 自定义脱敏函数（最高优先级）
-   * 若提供，则忽略 maskType 和 placeholder
-   */
-  maskStrategy?: (str: string) => string;
-  /**
-   * 使用内置脱敏策略（中优先级）
-   * 若未提供 maskStrategy，则使用此策略
-   */
-  maskType?: TMaskType;
-  onValueUpdate?: (value: string) => void;
-}
-
-type TMaskType = 'id' | 'phone' | 'bankCard' | 'email';
-```
-
-### slots
-
-| 名称    | 说明               | 参数                                                              |
-| :------ | :----------------- | :---------------------------------------------------------------- |
-| default | 控制组件的展示效果 | `{ show-value, loading, is-plaintext-visible, toggle-visibility}` |

package/es/multi-picker/README.md

@@ -1,183 +0,0 @@
-# MultiPicker
-
-### 介绍
-
-主要基于 vant 的 Popup、CheckboxGroup 等组件进行二次封装，方便处理多项选择的需求场景。
-
-**主要功能描述**
-
-- 支持自定义触发器
-- 支持开启搜索功能
-- 自定义文本提示信息
-
-**对开发者的解脱**
-
-- 符合 ui 设计
-- 打开收起逻辑的编写
-- 对所选项的 `真实值`、`展示值` 的处理
-- 基于上次选中的结果进行编辑后，点击取消，回滚上次选中的状态
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <MultiPicker
-    v-model="pickerValue"
-    :options="options"
-    :field-names="fieldNames"
-    title="基础用法"
-    tip-txt="💫这是一段提示文本: 你可以根据业务需要自行定制展示的内容"
-  >
-    <template #trigger="{ triggerPopupShow, showValue }">
-      <div class="trigger-box">
-        <van-button type="primary" @click="triggerPopupShow"> 点击打开多选-选择器🤪 </van-button>
-        <p>show value: {{ showValue }}</p>
-        <p>modelValue: {{ pickerValue }}</p>
-      </div>
-    </template>
-  </MultiPicker>
-</template>
-
-<script setup lang="ts">
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { MultiPicker } from '@ebfe/vant-kit';
-  import { Button as VanButton } from 'vant';
-
-  const options = [
-    { name: '选项1', value: '1' },
-    { name: '选项2', value: '2', disabled: true },
-    { name: '选项3', value: '3' },
-  ];
-  const fieldNames = {
-    label: 'name',
-    value: 'value',
-  };
-  const [pickerValue, _setPickerValue] = useWrapperRef<string[]>([]);
-</script>
-
-<style scoped lang="less">
-  .trigger-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-</style>
-```
-
-### 开启搜索功能
-
-- 传入 show-earch 展示搜索框
-- 侦听 search 事件处理搜索逻辑
-
-> 💫 对交互细节的优化：如果在输入关键字进行搜索后，新的数据源为空，此时点击确定，更新的值依旧为最近一次选中的选项。
-
-```html
-<template>
-  <MultiPicker
-    v-model="pickerValue"
-    :options="options"
-    :field-names="fieldNames"
-    title="基础用法"
-    tip-txt="💫开启了搜索功能"
-    show-search
-    @search="onSearch"
-  >
-    <template #trigger="{ triggerPopupShow, showValue }">
-      <div class="trigger-box">
-        <van-button type="primary" @click="triggerPopupShow"> 带搜索框🔍 </van-button>
-        <p>show value: {{ showValue }}</p>
-        <p>modelValue: {{ pickerValue }}</p>
-      </div>
-    </template>
-  </MultiPicker>
-</template>
-
-<script setup lang="ts">
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { MultiPicker } from '@ebfe/vant-kit';
-  import { Button as VanButton } from 'vant';
-  import { checkStrIsEmpty } from '@ebfe/utils';
-
-  const optionsDataSource = [
-    { name: '选项1', value: '1' },
-    { name: '选项2', value: '2', disabled: true },
-    { name: '选项3', value: '3' },
-    { name: '选项4', value: '4', disabled: true },
-    { name: '选项5', value: '5' },
-    { name: '选项6', value: '6' },
-    { name: '选项7', value: '7', disabled: true },
-    { name: '选项8', value: '8' },
-    { name: '选项9', value: '9' },
-    { name: '选项10', value: '10' },
-    { name: '选项11', value: '11', disabled: true },
-    { name: '选项12', value: '12' },
-    { name: '选项13', value: '13', disabled: true },
-    { name: '选项14', value: '14' },
-    { name: '选项15', value: '15' },
-    { name: '选项16', value: '16', disabled: true },
-    { name: '选项17', value: '17' },
-    { name: '选项18', value: '18' },
-    { name: '选项19', value: '19' },
-    { name: '选项20', value: '20' },
-  ];
-  const [options, setOptions] = useWrapperRef(optionsDataSource);
-
-  const fieldNames = {
-    label: 'name',
-    value: 'value',
-  };
-  const [pickerValue, _setPickerValue] = useWrapperRef<string[]>([]);
-
-  const onSearch = (keywords: string) => {
-    if (checkStrIsEmpty(keywords)) {
-      setOptions(optionsDataSource);
-    } else {
-      setOptions(
-        optionsDataSource.filter((item) => item.name.toLocaleLowerCase().includes(keywords.toLocaleLowerCase()))
-      );
-    }
-  };
-</script>
-
-<style scoped lang="less">
-  .trigger-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-</style>
-```
-
-## API
-
-### Props
-
-TMultiPickerProps
-
-| 参数         | 说明               | 类型                                                                                   | 默认值                             |
-| ------------ | ------------------ | -------------------------------------------------------------------------------------- | ---------------------------------- |
-| v-model      | 当前选中项对应的值 | string[]                                                                               | -                                  |
-| options      | 选项               | Array<{ label: string; value: string; disabled?: boolean }> (label、value支持属性别名) | -                                  |
-| fieldNames   | 字段别名           | { label?: string; value?: string; }                                                    | { label: 'label', value: 'value' } |
-| title        | 标题               | string                                                                                 | -                                  |
-| tipTxt       | 文本提示信息       | string                                                                                 | -                                  |
-| show-search  | 是否显示搜索框     | boolean                                                                                | false                              |
-| search-delay | 搜索防抖时间(ms)   | number                                                                                 | 300                                |
-
-### Events
-
-| 事件名         | 说明                           | 回调参数                                                 |
-| :------------- | :----------------------------- | :------------------------------------------------------- |
-| confirm        | 点击确认后触发的事件           | TConfirmEventPayload = { values: any[]; options: any[] } |
-| search         | 在搜索框输入时，触发的搜索事件 | keywords                                                 |
-| toggleCheckbox | 触发选中、取消选中时的事件     | values                                                   |
-
-### Slots
-
-| 名称    | 说明   | 参数                                                                              |
-| :------ | :----- | :-------------------------------------------------------------------------------- |
-| trigger | 触发器 | `{ trigger-popup-show: () => void; show-value: string; selected-options: any[] }` |