@ebfe/vantkit-doc 0.0.2 → 0.0.3

package/es/single-picker/README.md

@@ -1,239 +0,0 @@
-# SinglePicker
-
-### 介绍
-
-主要基于 vant 的 popup、picker 组件进行二次封装，方便处理单项选择的需求场景。
-
-- 支持传入所有 [picker props](https://vant-ui.github.io/vant/#/zh-CN/picker#props)
-- 支持暴露所有 [picker slots](https://vant-ui.github.io/vant/#/zh-CN/picker#slots)
-
-**主要功能描述**
-
-- 支持自定义触发器
-- 支持开启搜索功能
-- 禁用选项逻辑增强
-
-**对开发者的解脱**
-
-- 符合 ui 设计
-- 打开收起逻辑的编写
-- 对所选项的 `真实值`、`展示值` 的处理
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <SinglePicker
-    v-model="pickerValue"
-    :picker-props="{
-      title: '基础用法',
-      columns: columns,
-      columnsFieldNames: columnsFieldNames,
-    }"
-  >
-    <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>
-  </SinglePicker>
-</template>
-
-<script setup lang="ts">
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { SinglePicker } from '@ebfe/vant-kit';
-  import { Button as VanButton } from 'vant';
-
-  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">
-  .trigger-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-</style>
-```
-
-### 开启搜索功能
-
-- 传入 show-earch 展示搜索框
-- 侦听 search 事件处理搜索逻辑
-
-> 💫 对交互细节的优化：如果在输入关键字进行搜索后，新的数据源为空，此时点击确定，更新的值依旧为最近一次选中的选项。
-
-```html
-<template>
-  <SinglePicker
-    v-model="pickerValue"
-    :picker-props="{
-      columns: columns,
-      columnsFieldNames: columnsFieldNames,
-    }"
-    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>
-
-    <template #title>Ashun</template>
-  </SinglePicker>
-</template>
-
-<script setup lang="ts">
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { SinglePicker } from '@ebfe/vant-kit';
-  import { Button as VanButton } from 'vant';
-  import { checkStrIsEmpty } from '@ebfe/utils';
-
-  const columnsDataSource = [
-    { name: '选项1', value: '1' },
-    { name: '选项2', value: '2' },
-  ];
-  const [columns, setColumns] = useWrapperRef(columnsDataSource);
-  const columnsFieldNames = {
-    text: 'name',
-    value: 'value',
-  };
-  const [pickerValue, _setPickerValue] = useWrapperRef<string | undefined>(undefined);
-
-  const onSearch = (keywords: string) => {
-    if (checkStrIsEmpty(keywords)) {
-      setColumns(columnsDataSource);
-    } else {
-      setColumns(
-        columnsDataSource.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>
-```
-
-### 禁用选项逻辑增强
-
-```html
-<template>
-  <SinglePicker
-    v-model="pickerValue"
-    :picker-props="{
-      title,
-      columns: columns,
-      columnsFieldNames: columnsFieldNames,
-    }"
-    @confirm-disabled-option="
-      ({}) =>
-        showToast(
-          '你可以自定义后续操作,回调函数参数类型 TSPConfirmDisabledOptionPayload',
-        )
-    "
-  >
-    <template #trigger="{ triggerPopupShow, showValue }">
-      <div class="trigger-box">
-        <span>
-          <van-button @click="showPartialDisableOptions(triggerPopupShow)"> 部分选项禁用 </van-button>
-          <van-button @click="showAllDisableOptions(triggerPopupShow)"> 全部选项禁用 </van-button>
-        </span>
-        <p>show value: {{ showValue }}</p>
-        <p>modelValue: {{ pickerValue }}</p>
-      </div>
-    </template>
-  </SinglePicker>
-</template>
-
-<script setup lang="ts">
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { SinglePicker } from '@ebfe/vant-kit';
-  import { showToast, Button as VanButton } from 'vant';
-
-  const partialDisableCols = [
-    { name: '选项1', value: '1' },
-    { name: '选项2(禁用)', value: '2', disabled: true },
-    { name: '选项3', value: '3' },
-  ];
-  const allDisableCols = [
-    { name: '选项1(禁用)', value: '1(禁用)', disabled: true },
-    { name: '选项2(禁用)', value: '2(禁用)', disabled: true },
-    { name: '选项3(禁用)', value: '3(禁用)', disabled: true },
-  ];
-  const [columns, setColumns] = useWrapperRef(partialDisableCols);
-  const columnsFieldNames = {
-    text: 'name',
-    value: 'value',
-  };
-  const [pickerValue, _setPickerValue] = useWrapperRef<string | undefined>(undefined);
-
-  const [title, setTitle] = useWrapperRef<string>('');
-  const showPartialDisableOptions = (triggerPopupShow) => {
-    setTitle('部分选项禁用');
-    setColumns(partialDisableCols);
-    triggerPopupShow();
-  };
-  const showAllDisableOptions = (triggerPopupShow) => {
-    setTitle('全部选项禁用');
-    setColumns(allDisableCols);
-    triggerPopupShow();
-  };
-</script>
-
-<style scoped lang="less">
-  .trigger-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-</style>
-```
-
-## API
-
-### Props
-
-| 参数         | 说明                                                                            | 类型                 | 默认值 |
-| ------------ | ------------------------------------------------------------------------------- | -------------------- | ------ |
-| v-model      | 当前选中项对应的值                                                              | string \| undefinerd | -      |
-| picker-props | [vant Picker 组件的 props](https://vant-ui.github.io/vant/#/zh-CN/picker#props) |                      |        |
-| show-search  | 是否显示搜索框                                                                  | boolean              | false  |
-| search-delay | 搜索防抖时间(ms)                                                                | number               | 300    |
-
-### Events
-
-| 事件名                | 说明                           | 回调参数                                                                        |
-| :-------------------- | :----------------------------- | :------------------------------------------------------------------------------ |
-| confirm               | 点击 picker 确认后触发的事件   | option (选中项的全部数据)                                                       |
-| search                | 在搜索框输入时，触发的搜索事件 | keywords                                                                        |
-| confirmDisabledOption | 选中禁用项时，触发的事件       | type TSPConfirmDisabledOptionPayload = { option: any; closePopup: () => void; } |
-
-### Slots
-
-| 名称    | 说明   | 参数                                                                           |
-| :------ | :----- | :----------------------------------------------------------------------------- |
-| trigger | 触发器 | `{ trigger-popup-show: () => void; show-value: string; selected-option: any }` |

package/lib/coloring-avatar/README.md

@@ -1,110 +0,0 @@
-# ColoringAvatar
-
-### 介绍
-
-着色头像
-
-**主要功能描述**
-
-- 内置中英文名称取值逻辑
-- 内置渐变随机色
-- 支持自定义
-  - 头像着色
-  - 文字大小
-  - 头像尺寸
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <demo-block title="中文名">
-    <section>
-      <span class="desc">展示后两个字符 (李钟硕)</span>
-      <ColoringAvatar name="李钟硕" />
-    </section>
-  </demo-block>
-  <demo-block title="英文名">
-    <section>
-      <span class="desc">展示第一个字符 (IU)</span>
-      <ColoringAvatar name="IU" />
-    </section>
-  </demo-block>
-  <demo-block title="自定义颜色">
-    <section>
-      <ColoringAvatar name="Ashun" :bg-attr="bgAttr" />
-      <van-space>
-        <van-button
-          size="small"
-          type="primary"
-          v-for="item in changeBgAttrList"
-          :key="item.value"
-          :color="item.value"
-          @click="setBgAttr(item.value)"
-        >
-          {{ item.desc }}
-        </van-button>
-      </van-space>
-    </section>
-  </demo-block>
-  <demo-block title="自定义文字大小">
-    <section>
-      <ColoringAvatar name="Ashun" :font-size="24" />
-    </section>
-  </demo-block>
-</template>
-
-<script setup lang="ts">
-  import { ColoringAvatar } from '@ebfe/vant-kit';
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { Space as VanSpace, Button as VanButton } from 'vant';
-
-  const changeBgAttrList = [
-    {
-      desc: '黑色',
-      value: 'black',
-    },
-    {
-      desc: '紫色',
-      value: '#8e44ad',
-    },
-    {
-      desc: '粉色',
-      value: 'pink',
-    },
-    {
-      desc: '土豪金',
-      value: 'linear-gradient(90deg, #b35b1d, #d97b2e, #d97b2e, #ffb86b, #d97b2e, #d97b2e, #b35b1d)',
-    },
-  ];
-  const [bgAttr, setBgAttr] = useWrapperRef(changeBgAttrList[3].value);
-</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
-
-| 参数     | 说明         | 类型   | 默认值 |
-| -------- | ------------ | ------ | ------ |
-| size     | 头像尺寸(px) | number | 36     |
-| fontSize | 文字大小(px) | number | 14     |
-| bgAttr   | 背景色属性   | string | -      |

package/lib/date-picker/README.md

@@ -1,248 +0,0 @@
-# DatePicker
-
-### 介绍
-
-主要基于 vant 的 popup、date-picker 组件进行二次封装，方便处理时间选择的需求场景。
-
-- 支持传入所有 [date-picker props](https://vant-ui.github.io/vant/#/zh-CN/date-picker#props)
-- 支持暴露所有 [date-picker slots](https://vant-ui.github.io/vant/#/zh-CN/date-picker#slots)
-
-**主要功能描述**
-
-- 支持自定义触发器
-- 支持自定义展示值
-- 支持更改 picker 打开时默认选中的值（modelValue 有值，则以modelValue 为准）
-
-**对开发者的解脱**
-
-- 符合 ui 设计
-  - 默认处理选项的 formatter
-- 打开收起逻辑的编写
-- 对所选项 `真实值`、`展示值` 的隔离和处理
-
-## 代码演示
-
-### 基础用法
-
-```html
-<template>
-  <DatePicker v-model="modelValue" :picker-props="{ title: '基础用法' }">
-    <template #trigger="{ triggerPopupShow, showValue }">
-      <div class="trigger-box">
-        <p>value:{{ modelValue }}</p>
-        <p>showValue:{{ showValue }}</p>
-        <van-button @click="triggerPopupShow"> trigger </van-button>
-      </div>
-    </template>
-  </DatePicker>
-</template>
-
-<script setup lang="ts">
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { DatePicker } from '@ebfe/vant-kit';
-  import { Button as VanButton } from 'vant';
-
-  const [modelValue] = useWrapperRef('');
-</script>
-
-<style scoped lang="less">
-  .trigger-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-</style>
-```
-
-### 格式化展示值
-
-```html
-<template>
-  <DatePicker
-    v-model="modelValue"
-    :show-value-formatter="(date) => dayjs(date).format('YY年MM月DD日')"
-    :picker-props="{ title: '格式化展示值' }"
-    @confirm="
-      (p) => {
-        showToast(`dayjs(date).format('YY年MM月DD日'))`);
-        console.log(p);
-      }
-    "
-  >
-    <template #trigger="{ triggerPopupShow, showValue }">
-      <div class="trigger-box">
-        <p>value:{{ modelValue }}</p>
-        <p>showValue:{{ showValue }}</p>
-        <van-button type="primary" @click="triggerPopupShow"> trigger </van-button>
-      </div>
-    </template>
-  </DatePicker>
-</template>
-
-<script setup lang="ts">
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { DatePicker } from '@ebfe/vant-kit';
-  import { Button as VanButton, showToast } from 'vant';
-  import dayjs from 'dayjs';
-
-  const [modelValue] = useWrapperRef('2030-03-04');
-</script>
-
-<style scoped lang="less">
-  .trigger-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-</style>
-```
-
-### 自定义 picker 打开时默认选中的值
-
-modelValue 有值，则以 modelValue 为准
-
-```html
-<template>
-  <DatePicker ref="DatePickerRef" v-model="modelValue" :picker-props="{ title: '设置 picker 默认选中项' }">
-    <template #trigger="{ triggerPopupShow, pickerRealtimeOptions, showValue }">
-      <div class="trigger-box">
-        <p>value:{{ modelValue }}</p>
-        <p>showValue:{{ showValue }}</p>
-        <p>picker 实时选中值:{{ pickerRealtimeOptions }}</p>
-        <p>(modelValue 有值，则以 modelValue 为准)</p>
-        <van-space>
-          <van-button type="primary" @click="triggerPopupShow"> trigger </van-button>
-          <van-button type="warning" @click="() => DatePickerRef?.setPickerRealtimeDate('2035-05-06')">
-            2035-05-06
-          </van-button>
-        </van-space>
-      </div>
-    </template>
-  </DatePicker>
-</template>
-
-<script setup lang="ts">
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { DatePicker } from '@ebfe/vant-kit';
-  import { ref } from 'vue';
-  import { Button as VanButton, Space as VanSpace } from 'vant';
-
-  const [modelValue] = useWrapperRef('2030-03-04');
-  const DatePickerRef = ref<InstanceType<typeof DatePicker>>();
-</script>
-
-<style scoped lang="less">
-  .trigger-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-</style>
-```
-
-### 支持所有 date-picker props
-
-例如设置 columnsType 为: 月日
-
-```html
-<template>
-  <DatePicker v-model="modelValue" :picker-props="{ title: '基础用法', columnsType: ['month', 'day'] }">
-    <template #trigger="{ triggerPopupShow, showValue }">
-      <div class="trigger-box">
-        <p>value:{{ modelValue }}</p>
-        <p>showValue:{{ showValue }}</p>
-        <van-button @click="triggerPopupShow"> trigger </van-button>
-      </div>
-    </template>
-  </DatePicker>
-</template>
-
-<script setup lang="ts">
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { DatePicker } from '@ebfe/vant-kit';
-  import { Button as VanButton } from 'vant';
-
-  const [modelValue] = useWrapperRef('');
-</script>
-
-<style scoped lang="less">
-  .trigger-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-</style>
-```
-
-### 支持所有 date-picker slots
-
-例如设置 columns-top
-
-```html
-<template>
-  <DatePicker v-model="modelValue" :picker-props="{ title: '基础用法' }">
-    <template #trigger="{ triggerPopupShow }">
-      <div class="trigger-box">
-        <van-button @click="triggerPopupShow"> trigger </van-button>
-      </div>
-    </template>
-    <template #columns-top>
-      <div class="columns-top-bar">
-        <span>这里是 columns-top 插槽内容</span>
-      </div>
-    </template>
-  </DatePicker>
-</template>
-
-<script setup lang="ts">
-  import { useWrapperRef } from '@ebfe/vhooks';
-  import { DatePicker } from '@ebfe/vant-kit';
-  import { Button as VanButton } from 'vant';
-
-  const [modelValue] = useWrapperRef('');
-</script>
-
-<style scoped lang="less">
-  .trigger-box {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-  .columns-top-bar {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-</style>
-```
-
-## API
-
-### Props
-
-TDatePickerProps
-
-| 参数               | 说明                                                                          | 类型                                           | 默认值 |
-| ------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------- | ------ |
-| modelValue         | 值                                                                            | string                                         | -      |
-| pickerProps        | [date-picker props](https://vant-ui.github.io/vant/#/zh-CN/date-picker#props) | `Partial<DatePickerProps>`                     | -      |
-| showValueFormatter | 自定义展示值                                                                  | `showValueFormatter?: (date?: Date) => string` | -      |
-
-### Slots
-
-支持暴露所有 [date-picker slots](https://vant-ui.github.io/vant/#/zh-CN/date-picker#slots)
-
-| 插槽名  | 说明   | 参数                                                    |
-| ------- | ------ | ------------------------------------------------------- |
-| trigger | 触发器 | `{ triggerPopupShow, showValue, pickerRealtimeOptions}` |
-
-### 方法
-
-| 方法名                | 说明                                                                   | 类型                         |
-| :-------------------- | :--------------------------------------------------------------------- | :--------------------------- |
-| setPickerRealtimeDate | 设置 picker 打开时默认选中的值（modelValue 有值，则以modelValue 为准） | `(newValue: string) => void` |