@ebfe/vantkit-doc 0.0.1 → 0.0.2

package/es/coloring-avatar/README.md

@@ -0,0 +1,110 @@
+# 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/es/date-picker/README.md

@@ -0,0 +1,248 @@
+# 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` |