@ebfe/vantkit-doc 0.0.2 → 0.0.4

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

@@ -1,101 +0,0 @@
-# FieldDatePicker
-
-### 介绍
-
-基于 DatePicker 以及 vant 的 field 组件进行二次封装，方便处理表单中的时间选择需求场景。
-
-- 支持传入所有 DatePicker props（类型 TDatePickerProps）
-- 支持传入所有的 [vant field props](https://vant-ui.github.io/vant/#/zh-CN/field#props)
-
-**主要功能描述**
-
-- 集成 DatePicker 所有功能
-
-**对开发者的解脱**
-
-- 符合 ui 设计
-- 默认场景下 van-field 绑定值就是展示值，FieldDatePicker 内部将绑定值与展示值表单真正需要收集的值分隔开。
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <van-form ref="FormRef" :validate-trigger="['onBlur', 'onChange', 'onSubmit']">
-    <p>modelValue:{{ modelValue }}</p>
-    <FieldDatePicker
-      ref="FieldDatePickerRef"
-      v-model="modelValue"
-      :field-props="{
-        name: 'dateField',
-        label: 'FieldDatePicker',
-        labelWidth: '12.5rem',
-        readonly: false,
-        required: true,
-        rules: [{ required: true, message: '请选择' }],
-      }"
-      :show-value-formatter="(date) => date?.toLocaleDateString()"
-      :picker-props="{ title: '选择' }"
-    >
-      <template #columns-top>Ashutefannao</template>
-    </FieldDatePicker>
-
-    <van-field
-      v-model="testFieldModelValue"
-      name="testField"
-      label="testField"
-      :rules="[{ required: true, message: '请选择' }]"
-    ></van-field>
-  </van-form>
-  <van-button
-    type="primary"
-    @click="
-      () => {
-        FormRef?.validate?.().finally(() => {
-          console.log(FormRef?.getValues?.());
-        });
-      }
-    "
-  >
-    验证
-  </van-button>
-</template>
-
-<script lang="ts" setup>
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { ref } from 'vue';
-  import { FieldDatePicker } from '@ebfe/vant-kit';
-  import { Form as VanForm, Field as VanField, Button as VanButton, FormInstance } from 'vant';
-
-  const FormRef = ref<FormInstance>();
-
-  const [modelValue] = useWrapperRef('');
-  const FieldDatePickerRef = ref<InstanceType<typeof FieldDatePicker>>();
-
-  const [testFieldModelValue] = useWrapperRef('');
-</script>
-
-<style scoped lang="less">
-  .trigger-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-</style>
-```
-
-## API
-
-### Props
-
-TDatePickerProps & [FieldProps](https://vant-ui.github.io/vant/#/zh-CN/field#props)
-
-### Slots
-
-支持暴露所有 DatePicker Slots
-
-### 方法
-
-支持暴露所有 DatePicker 方法

package/es/field-date-range-picker/README.md

@@ -1,134 +0,0 @@
-# FieldDatePicker
-
-### 介绍
-
-基于 DateRangePicker 以及 vant 的 field 组件进行二次封装，方便处理表单中的时间范围选择需求场景。
-
-- 支持传入所有 DateRangePicker props（类型 TDateRangePickerProps）
-- 支持传入所有的 [vant field props](https://vant-ui.github.io/vant/#/zh-CN/field#props)
-
-**主要功能描述**
-
-- 集成 DateRangePicker 所有功能
-
-**对开发者的解脱**
-
-- 符合 ui 设计
-- 重复逻辑抽离
-
-> 与普通二开表单组件不同，value 涉及多值，而 vant field value 只能是字符串，因此这里帮给表单的值就是 showValue
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <van-form ref="FormRef">
-    <p>modelValue:{{ modelValue }}</p>
-    <FieldDateRangePicker
-      ref="FieldDateRangePickerRef"
-      v-model="modelValue"
-      :field-props="{
-        name: 'dateField',
-        label: 'FieldDateRangePicker',
-        labelWidth: '9.5rem',
-        readonly: false,
-        required: true,
-        rules: [{ required: true, message: '请选择' }],
-      }"
-      :show-value-formatter="
-        ({ startDate, endDate }) =>
-          startDate &&
-          endDate &&
-          `${startDate?.toLocaleDateString()} 〰 ${endDate?.toLocaleDateString()}`
-      "
-      :before-confirm="
-        (values) => {
-          const [start, end] = values;
-          if (start == dayjs().format('YYYY-MM-DD') && start === end) {
-            return true;
-          }
-          showFailToast('请选择当前日期');
-          return false;
-        }
-      "
-    >
-      <template #confirm> ➡ </template>
-    </FieldDateRangePicker>
-
-    <van-field
-      v-model="testFieldModelValue"
-      name="testField"
-      label="testField"
-      :rules="[{ required: true, message: '请选择' }]"
-    ></van-field>
-  </van-form>
-  <van-space>
-    <van-button
-      type="primary"
-      @click="
-        () => {
-          FormRef?.validate?.().finally(() => {
-            console.log(FormRef?.getValues?.());
-          });
-        }
-      "
-    >
-      验证表单
-    </van-button>
-    <van-button type="primary" @click="setPickerRealtimeDate"> 切换默认选中时间为当前日期 </van-button>
-  </van-space>
-</template>
-
-<script lang="ts" setup>
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { ref } from 'vue';
-  import { FieldDateRangePicker } from '@ebfe/vant-kit';
-  import {
-    Form as VanForm,
-    Field as VanField,
-    Button as VanButton,
-    Space as VanSpace,
-    FormInstance,
-    showFailToast,
-  } from 'vant';
-  import dayjs from 'dayjs';
-  const FormRef = ref<FormInstance>();
-
-  const [modelValue] = useWrapperRef<[string, string]>(['', '']);
-  const FieldDateRangePickerRef = ref<InstanceType<typeof FieldDateRangePicker>>();
-
-  const setPickerRealtimeDate = () => {
-    FieldDateRangePickerRef.value?.setPickerRealtimeDate?.({
-      start: dayjs().format('YYYY-MM-DD'),
-      end: dayjs().format('YYYY-MM-DD'),
-    });
-  };
-
-  const [testFieldModelValue] = useWrapperRef('');
-</script>
-
-<style scoped lang="less">
-  .trigger-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-</style>
-```
-
-## API
-
-### Props
-
-TDateRangePickerProps & [FieldProps](https://vant-ui.github.io/vant/#/zh-CN/field#props)
-
-### Slots
-
-支持暴露所有 DateRangePicker Slots
-
-### 方法
-
-支持暴露所有 DateRangePicker 方法

package/es/field-mask-txt/README.md

@@ -1,281 +0,0 @@
-# FieldMaskTxt
-
-### 介绍
-
-将脱敏逻辑嵌入表单组件中，将开发者从脱敏相关的具体实现逻辑中解脱出来。
-
-- 包含数据回显、编辑、兜底处理
-- 如果存在上下步表单，基于后端的数据源(加密且脱敏)进行编辑后，再最后一步进行预览时，数据已经变成用户最新输入的(加密未脱敏)数据，此时组件会自行进行脱敏。点击小眼睛也可正常转化未脱敏状态。
-  - 这种情况其实已经被‘兜底处理’包含了，只要数据源不符合约定的(加密且脱敏)逻辑，前端尽力兜底
-
-**主要功能描述**
-
-- 脱敏逻辑嵌入表单组件
-  - 自动处理数据源(加密数据)的解密逻辑
-  - 表单展示值与真正需要收集的值自动分隔开
-- 针对不同项目、业务场景，支持自定义：
-  - 加解密方法
-  - 脱敏占位符号
-  - 脱敏展示的策略
-    - 内部已经支持部分策略（身份证、手机号、邮箱、银行卡号），可自由配置。
-    - 也支持完全自定义
-- 支持根据脱敏状态，定制不同的表单验证规则
-- 支持对真实收集值的 field 组件定制 props
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <demo-block title="基础用法">
-    <van-form ref="FormRef" :validate-trigger="['onBlur', 'onChange']">
-      <section>
-        <span class="desc">设置初始值: 加密且脱敏</span>
-        <van-field label="明文" placeholder="请输入" v-model="dataSourcePlainTxt" />
-        <van-field disabled label="密文" v-model="dataSourceCipherTxt" placeholder="输入明文, 制造密文" />
-        <p>modelValue:</p>
-        {{ filedValue }}
-        <FieldMaskTxt
-          :preset="commonPreset"
-          mask-id="maskId"
-          v-model="filedValue"
-          :field-props="{
-            name: 'testField',
-            label: '测试字段',
-            required: true,
-            rules: [{ required: true, message: '请输入' }],
-          }"
-        />
-      </section>
-      <van-button round block type="primary" @click="handleSubmit"> 提交 </van-button>
-    </van-form>
-  </demo-block>
-</template>
-
-<script setup lang="ts">
-  import { FieldMaskTxt, TMaskTxtProps } from '@ebfe/vant-kit';
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { Form as VanForm, Field as VanField, Button as VanButton, FormInstance } from 'vant';
-  import { getAesCryptoTool } from '@ebfe/utils';
-  import { computed, ref, watch } from 'vue';
-
-  const { AES_Encrypt, AES_Dencrypt } = getAesCryptoTool({
-    key: '12345678',
-  });
-
-  /**
-   * 制造数据源
-   */
-  const [dataSourcePlainTxt] = useWrapperRef('12345678');
-  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);
-      });
-    },
-  };
-
-  /**
-   * 表单逻辑
-   */
-  const [filedValue, setFiledValue] = useWrapperRef(dataSourceCipherTxt.value);
-  watch(dataSourceCipherTxt, setFiledValue);
-
-  const FormRef = ref<FormInstance>();
-  const handleSubmit = () => {
-    FormRef.value?.validate().then(() => {
-      // eslint-disable-next-line no-console
-      console.log('getValues', FormRef.value?.getValues?.());
-    });
-  };
-</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>
-```
-
-### 根据脱敏状态定制 rules
-
-props.genFieldRules
-
-> 初始状态(脱敏)
->
-> - 数据被脱敏，不知道数据源真正是什么样子的，因此不需要验证
->
-> 编辑状态(未脱敏)
->
-> - genFieldRules 生成的 rules，默认会分别传入用于展示、用于收集数据的 filed 组件中。
-> - 用于收集数据的 filed 组件，值是加密后的，不能通过校验，因此可以配置 real-field-props 控制真实收集数据的 filed 组件 props
-
-```html
-<template>
-  <demo-block title="根据脱敏状态定制 rules">
-    <van-form ref="FormRef" :validate-trigger="['onBlur', 'onChange']">
-      <section>
-        <span class="desc">设置初始值: 加密且脱敏</span>
-        <van-field label="明文" placeholder="请输入" v-model="dataSourcePlainTxt" />
-        <van-field disabled label="密文" v-model="dataSourceCipherTxt" placeholder="输入明文, 制造密文" />
-        <p>modelValue:</p>
-        {{ filedValue }}
-        <FieldMaskTxt
-          :preset="commonPreset"
-          mask-id="maskId"
-          v-model="filedValue"
-          :field-props="{
-            name: 'testField',
-            label: '测试字段',
-            required: true,
-            rules: [{ required: true }],
-          }"
-          :gen-field-rules="genFieldRules"
-          :real-field-props="{
-            rules: [],
-          }"
-        />
-      </section>
-      <van-button round block type="primary" @click="handleSubmit"> 提交 </van-button>
-    </van-form>
-  </demo-block>
-</template>
-
-<script setup lang="ts">
-  import { FieldMaskTxt, TMaskTxtProps } from '@ebfe/vant-kit';
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { Form as VanForm, Field as VanField, Button as VanButton, FormInstance } from 'vant';
-  import { getAesCryptoTool, IdRule } from '@ebfe/utils';
-  import { computed, ref, watch } from 'vue';
-
-  const { AES_Encrypt, AES_Dencrypt } = getAesCryptoTool({
-    key: '12345678',
-  });
-
-  /**
-   * 制造数据源
-   */
-  const [dataSourcePlainTxt] = useWrapperRef('130999199909099999');
-  const dataSourceCipherTxt = computed(() => commonPreset.encrypt?.(dataSourcePlainTxt.value) as string);
-  const commonPreset: TMaskTxtProps['preset'] = {
-    decrypt: AES_Dencrypt,
-    encrypt: AES_Encrypt,
-    maskType: 'id',
-    fetchPlaintext: async (_maskId) => {
-      return new Promise<string>((resolve) => {
-        setTimeout(() => {
-          // eslint-disable-next-line no-console
-          console.log('模拟接口调用');
-          resolve(dataSourceCipherTxt.value!);
-        }, 1000);
-      });
-    },
-  };
-
-  /**
-   * 表单逻辑
-   */
-  const [filedValue, setFiledValue] = useWrapperRef(dataSourceCipherTxt.value);
-  watch(dataSourceCipherTxt, setFiledValue);
-
-  const genFieldRules = ({ isPlaintextVisible }) => {
-    return [
-      {
-        required: true,
-        message: isPlaintextVisible && IdRule?.message,
-        validator:
-          isPlaintextVisible &&
-          ((value) => {
-            return IdRule.pattern.test(value);
-          }),
-      },
-    ];
-  };
-
-  const FormRef = ref<FormInstance>();
-  const handleSubmit = () => {
-    FormRef.value?.validate().then(() => {
-      // eslint-disable-next-line no-console
-      console.log('getValues', FormRef.value?.getValues?.());
-    });
-  };
-</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>
-```
-
-## API
-
-### Props
-
-```
-TFieldMaskTxtProps
-```
-
-| 参数           | 说明                                     | 类型                                                          | 默认值 |
-| :------------- | :--------------------------------------- | :------------------------------------------------------------ | :----- |
-| preset         | 一些预设                                 | `Omit<IUseMaskedFieldOptions, 'maskId'`                       | -      |
-| maskId         | 数据标识,来源于后端，也需传递给后端      | string                                                        | -      |
-| modelValue     | 表单真实收集的值                         | string                                                        | -      |
-| fieldProps     | 用于展示、真实收集值的表单组件公用 props | `Partial<Omit<FieldProps, 'modelValue'>>`                     | -      |
-| genFieldRules  | 根据脱敏状态生成表单验证规则             | `(p: { isPlaintextVisible: boolean }) => FieldProps['rules']` | -      |
-| realFieldProps | 用于真实收集值的表单组件 props           | `Partial<Omit<FieldProps, 'modelValue'>>`                     |        |
-| loading        | 用于只读、回显数据场景下的异步 loading   | boolean                                                       | false  |
-
-```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';
-```

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

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