@ebfe/vant-kit 0.0.1 → 0.0.2

package/es/single-picker/README.md

@@ -0,0 +1,239 @@
+# 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 '../index.vue';
+  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 '../index.vue';
+  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(
+          '你可以自定义后续操作,回调函数参数类型 TConfirmDisabledOptionPayload',
+        )
+    "
+  >
+    <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 '../index.vue';
+  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 TConfirmDisabledOptionPayload = { option: any; closePopup: () => void; } |
+
+### Slots
+
+| 名称    | 说明   | 参数                                                                           |
+| :------ | :----- | :----------------------------------------------------------------------------- |
+| trigger | 触发器 | `{ trigger-popup-show: () => void; show-value: string; selected-option: any }` |

package/es/single-picker/index-sfc.less

@@ -1,4 +1,4 @@
 @import 'vant/lib/index.css';
-[data-v-f2b42cbe] .van-search {
+[data-v-03e3b57e] .van-search {
   width: 250px;
 }

package/es/single-picker/index.ts

@@ -0,0 +1,253 @@
+// @ts-nocheck
+import './index-sfc.css';
+import { defineComponent as _defineComponent } from 'vue';
+import type { PickerColumn, PickerOption, PickerProps } from 'vant';
+import { computed, watch } from 'vue';
+import { debounce } from 'lodash';
+import { Popup as VanPopup, Picker as VanPicker, Search as VanSearch } from 'vant';
+import { useWrapperRef } from '@ebfe/vhooks';
+import { array2Single } from '@ebfe/utils';
+
+const __default__ = {
+  name: 'SinglePicker',
+};
+
+export type TSinglePickerProps = {
+  showSearch?: boolean;
+  searchDelay?: number;
+  modelValue: any;
+  pickerProps: Partial<PickerProps>;
+};
+
+export type TConfirmDisabledOptionPayload = {
+  option: any;
+  closePopup: () => void;
+};
+
+const __vue_sfc__ = /*@__PURE__*/ _defineComponent({
+  ...__default__,
+  props: {
+    showSearch: { type: Boolean, required: false, default: false },
+    searchDelay: { type: Number, required: false, default: 300 },
+    modelValue: { type: null, required: true },
+    pickerProps: { type: Object, required: true },
+  },
+  emits: ['search', 'confirm', 'confirmDisabledOption', 'update:modelValue'],
+  setup(__props: any, { expose: __expose, emit: __emit }) {
+    const Props = __props;
+
+    const columnsFieldNames = computed(() =>
+      Object.assign({ text: 'label', value: 'value' }, Props?.pickerProps?.columnsFieldNames ?? {})
+    );
+    const computedPickerProps = computed(() =>
+      Object.assign(Props?.pickerProps ?? {}, {
+        columnsFieldNames: columnsFieldNames.value,
+      })
+    );
+
+    const Emitter = __emit;
+
+    const [popupShow, setPopupShow] = useWrapperRef<boolean>(false);
+    const triggerPopupShow = () => {
+      setPopupShow(true);
+    };
+
+    const [modelFieldValue, setModelFieldValue] = useWrapperRef<any>(Props.modelValue);
+    watch(() => Props.modelValue, setModelFieldValue, { immediate: true });
+    const updateModelFieldValue = (newValue) => {
+      setModelFieldValue(newValue);
+      // console.log('updateModelFieldValue');
+      Emitter('update:modelValue', newValue);
+    };
+
+    /**
+     * idMapData 缓存
+     */
+    const [columnsIdMapDataCache, setColumnsIdMapDataCache] = useWrapperRef<{
+      string: (PickerOption | PickerColumn)[];
+    }>({} as any);
+    const patchColumnsIdMapDataCache = (columns: (PickerOption | PickerColumn)[]) => {
+      const newColumns = { ...(columnsIdMapDataCache.value ?? {}) };
+      columns.forEach((item) => {
+        const id = item[columnsFieldNames.value.value];
+        newColumns[id] = item;
+      });
+      setColumnsIdMapDataCache({ ...newColumns });
+    };
+    watch(
+      () => computedPickerProps.value?.columns,
+      (columns) => {
+        patchColumnsIdMapDataCache(columns! ?? []);
+      },
+      { immediate: true }
+    );
+
+    /**
+     * selectedOption
+     */
+    const [selectedOption, setSelectedOption] = useWrapperRef<string>('');
+    watch(
+      [modelFieldValue, columnsIdMapDataCache],
+      ([newValue, columnsIdMapData]) => {
+        setSelectedOption(columnsIdMapData?.[newValue]);
+      },
+      { immediate: true }
+    );
+    const showValue = computed(() => {
+      return selectedOption.value?.[columnsFieldNames.value.text];
+    });
+
+    /**
+     * 兼容搜索模式
+     *  如果触发筛选后 columns 不存在，直接点击确认，则依旧选中上次选择的值(selectedValues 能够正确取到，而 selectedOptions 不行)
+     */
+    const onConfirmPicker = (confirmInfo) => {
+      const { selectedOptions, selectedValues } = confirmInfo;
+      let option;
+      if (computedPickerProps.value?.columns?.length) {
+        option = array2Single(selectedOptions);
+      } else {
+        const selectedValue = array2Single(selectedValues);
+        option = columnsIdMapDataCache.value?.[selectedValue];
+      }
+      if (option.disabled) {
+        Emitter('confirmDisabledOption', {
+          option,
+          closePopup: () => setPopupShow(false),
+        });
+        return;
+      }
+      Emitter('confirm', option);
+      const newValue = option?.[columnsFieldNames.value.value];
+      updateModelFieldValue(newValue);
+      setPopupShow(false);
+    };
+
+    const [keywords, _] = useWrapperRef<string | undefined>(undefined);
+
+    const onSearch = debounce((keywords: string) => {
+      Emitter('search', keywords);
+    }, Props.searchDelay);
+
+    __expose({});
+
+    const __returned__ = {
+      Props,
+      columnsFieldNames,
+      computedPickerProps,
+      Emitter,
+      popupShow,
+      setPopupShow,
+      triggerPopupShow,
+      modelFieldValue,
+      setModelFieldValue,
+      updateModelFieldValue,
+      columnsIdMapDataCache,
+      setColumnsIdMapDataCache,
+      patchColumnsIdMapDataCache,
+      selectedOption,
+      setSelectedOption,
+      showValue,
+      onConfirmPicker,
+      keywords,
+      _,
+      onSearch,
+      get VanPopup() {
+        return VanPopup;
+      },
+      get VanPicker() {
+        return VanPicker;
+      },
+      get VanSearch() {
+        return VanSearch;
+      },
+    };
+    Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+    return __returned__;
+  },
+});
+import {
+  renderSlot as _renderSlot,
+  createCommentVNode as _createCommentVNode,
+  mergeProps as _mergeProps,
+  createVNode as _createVNode,
+  withCtx as _withCtx,
+  renderList as _renderList,
+  createSlots as _createSlots,
+  openBlock as _openBlock,
+  createElementBlock as _createElementBlock,
+} from 'vue';
+
+const _hoisted_1 = { class: 'single-picker' };
+
+function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
+  return (
+    _openBlock(),
+    _createElementBlock('div', _hoisted_1, [
+      _renderSlot(_ctx.$slots, 'trigger', {
+        triggerPopupShow: $setup.triggerPopupShow,
+        showValue: $setup.showValue,
+        selectedOption: $setup.selectedOption,
+      }),
+      _createVNode(
+        $setup['VanPopup'],
+        {
+          show: $setup.popupShow,
+          'onUpdate:show': _cache[3] || (_cache[3] = ($event) => ($setup.popupShow = $event)),
+          position: 'bottom',
+          round: '',
+        },
+        {
+          default: _withCtx(() => [
+            _createVNode(
+              $setup['VanPicker'],
+              _mergeProps($setup.computedPickerProps, {
+                onConfirm: _cache[1] || (_cache[1] = (value) => $setup.onConfirmPicker(value)),
+                onCancel: _cache[2] || (_cache[2] = ($event) => $setup.setPopupShow(false)),
+              }),
+              _createSlots({ _: 2 /* DYNAMIC */ }, [
+                _renderList(_ctx.$slots, (_slot, name) => {
+                  return {
+                    name: name,
+                    fn: _withCtx((slotData) => [_renderSlot(_ctx.$slots, name, _mergeProps(slotData, { key: name }))]),
+                  };
+                }),
+                $props.showSearch
+                  ? {
+                      name: 'title',
+                      fn: _withCtx(() => [
+                        _createVNode(
+                          $setup['VanSearch'],
+                          {
+                            shape: 'round',
+                            placeholder: '请输入搜索关键词',
+                            modelValue: $setup.keywords,
+                            'onUpdate:modelValue': [
+                              _cache[0] || (_cache[0] = ($event) => ($setup.keywords = $event)),
+                              $setup.onSearch,
+                            ],
+                          },
+                          null,
+                          8 /* PROPS */,
+                          ['modelValue', 'onUpdate:modelValue']
+                        ),
+                      ]),
+                      key: '0',
+                    }
+                  : undefined,
+              ]),
+              1040 /* FULL_PROPS, DYNAMIC_SLOTS */
+            ),
+          ]),
+          _: 3 /* FORWARDED */,
+        },
+        8 /* PROPS */,
+        ['show']
+      ),
+    ])
+  );
+}
+__vue_sfc__.render = __vue_render__;
+
+__vue_sfc__.__scopeId = 'data-v-03e3b57e';
+export default __vue_sfc__;

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

@@ -0,0 +1,97 @@
+# 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>
+  <span @click="getIdMapData">modelValue: {{ pickerValue }}</span>
+  <FieldMultiPicker
+    ref="FieldMultiPickerRef"
+    v-model="pickerValue"
+    :options="options"
+    :field-names="fieldNames"
+    title="基础用法"
+    tip-txt="这就是基础组件 - MultiPicke"
+    :field-props="{
+      name: 'fieldName',
+      label: '多选',
+      placeholder: '请选择',
+      required: true,
+      rules: [{ required: true, message: '请选择' }],
+    }"
+  />
+</template>
+
+<script setup lang="ts">
+  import { useWrapperRef } from '@ebfe/vhooks';
+  import FieldMultiPicker from '../index.vue';
+  import { ref } from 'vue';
+
+  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 = () => {
+    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
+
+| 名称 | 说明 | 参数 |
+| :--- | :--- | :--- |
+| -    | -    | -    |

package/lib/field-multi-picker/index-sfc.less

@@ -0,0 +1,3 @@
+.hidden[data-v-780fee58] {
+  display: none;
+}