@ebfe/vant-kit 0.0.1 → 0.0.2

package/es/multi-picker/README.md

@@ -0,0 +1,183 @@
+# 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 '../index.vue';
+  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 '../index.vue';
+  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[] }` |

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

@@ -0,0 +1,20 @@
+@import 'vant/lib/index.css';
+[data-v-d088a892] .van-search {
+  width: 250px;
+}
+.multi-picker-main[data-v-d088a892] {
+  min-height: 200px;
+  max-height: 60vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+.multi-picker-main .multi-picker-tip[data-v-d088a892] {
+  padding: 10px 16px;
+  text-align: center;
+  font-size: 13px;
+  color: #666666;
+}
+.multi-picker-main .multi-picker-cell-group[data-v-d088a892] {
+  overflow-y: auto;
+}

package/es/multi-picker/index.ts

@@ -0,0 +1,399 @@
+// @ts-nocheck
+import './index-sfc.css';
+import { defineComponent as _defineComponent } from 'vue';
+import { computed, watch } from 'vue';
+import { debounce } from 'lodash';
+import {
+  Popup as VanPopup,
+  CheckboxGroup as VanCheckboxGroup,
+  CellGroup as VanCellGroup,
+  Cell as VanCell,
+  Checkbox as VanCheckbox,
+  Search as VanSearch,
+} from 'vant';
+import { useWrapperRef } from '@ebfe/vhooks';
+
+import { ref } from 'vue';
+
+const __default__ = {
+  name: 'MultiPicker',
+};
+
+type IdMapData = {
+  [key in string]: any;
+};
+
+type TFieldNames = {
+  label: string;
+  value: string;
+};
+
+export type TMultiPickerProps = {
+  // ids
+  modelValue: any[];
+  // 选项列表
+  options: any[];
+  // 字段别名
+  fieldNames?: TFieldNames;
+  // title
+  title?: string;
+  // 提示信息
+  tipTxt?: string;
+  // 搜索功能
+  showSearch?: boolean;
+  searchDelay?: number;
+};
+
+export type TConfirmEventPayload = { values: any[]; options: any[] };
+
+const __vue_sfc__ = /*@__PURE__*/ _defineComponent({
+  ...__default__,
+  props: {
+    modelValue: { type: Array, required: true },
+    options: { type: Array, required: true },
+    fieldNames: { type: Object, required: false, default: undefined },
+    title: { type: String, required: false, default: undefined },
+    tipTxt: { type: String, required: false, default: undefined },
+    showSearch: { type: Boolean, required: false, default: false },
+    searchDelay: { type: Number, required: false, default: 300 },
+  },
+  emits: ['search', 'toggleCheckbox', 'confirm', 'update:modelValue'],
+  setup(__props: any, { expose: __expose, emit: __emit }) {
+    const Props = __props;
+
+    const computedFieldNames = computed(() =>
+      Object.assign({ label: 'label', value: 'value' }, Props?.fieldNames ?? {})
+    );
+
+    const Emitter = __emit;
+
+    const [popupShow, setPopupShow] = useWrapperRef<boolean>(false);
+    // 用于展示的选项值
+    const [showValue, setShowValue] = useWrapperRef<string>('');
+    // checkbox实时绑定的选项值
+    const [checkboxModelValue, setCheckboxModelValue] = useWrapperRef<any[]>([]);
+    watch(
+      Props.modelValue,
+      (newValue) => {
+        setCheckboxModelValue(newValue);
+      },
+      { immediate: true }
+    );
+
+    /**
+     * value 映射的选项信息
+     */
+    const genIdMapOptionData = (options: any[]): IdMapData => {
+      const res = {} as IdMapData;
+      options?.forEach?.((item) => {
+        res[item[computedFieldNames.value.value]] = item;
+      });
+      // console.log('genIdMapOptionData', res);
+      return res;
+    };
+
+    const [optionsIdMapData, _setOptionsIdMapData] = useWrapperRef<IdMapData>(genIdMapOptionData(Props.options));
+    const patchIdMapOptionData = (newOptions) => {
+      newOptions?.forEach?.((item) => {
+        optionsIdMapData[item[computedFieldNames.value.value]] = item;
+      });
+    };
+    watch(() => Props.options, patchIdMapOptionData, { immediate: true });
+
+    const [selectedOptions, setSelectedOptions] = useWrapperRef<any[]>([]);
+    const handleUpdateModelValue = (values: any[]) => {
+      Emitter('update:modelValue', values);
+      setSelectedOptions(values?.map?.((v) => optionsIdMapData.value?.[v]));
+    };
+
+    /**
+     * 根据 modelValue 回显 showModelValue
+     */
+    const updateShowModelValueByModelValue = () => {
+      setShowValue(
+        Props.modelValue
+          ?.map?.((item) => optionsIdMapData.value?.[item]?.[computedFieldNames.value?.label])
+          ?.join?.('、')
+      );
+    };
+    watch(
+      [optionsIdMapData, () => Props.modelValue],
+      () => {
+        updateShowModelValueByModelValue();
+      },
+      { immediate: true }
+    );
+
+    /**
+     * 打开 popup
+     */
+    const triggerPopupShow = () => {
+      setPopupShow(true);
+    };
+
+    /**
+     * 点击取消
+     */
+    const handleCancel = () => {
+      setPopupShow(false);
+      // checkbox选中状态回滚
+      setCheckboxModelValue(Props.modelValue);
+    };
+
+    /**
+     * checkbox
+     */
+    const checkboxRefs = ref([]);
+    const toggle = (item: any, index: number) => {
+      if (item?.disabled) return;
+      (checkboxRefs.value?.[index] as any)?.toggle?.();
+      Emitter('toggleCheckbox', checkboxModelValue.value);
+    };
+
+    /**
+     * 确认选择
+     */
+    const onConfirm = () => {
+      const newValue = checkboxModelValue.value;
+      handleUpdateModelValue(newValue);
+      Emitter('confirm', { values: newValue, options: selectedOptions.value });
+      setPopupShow(false);
+    };
+
+    /**
+     * 搜索功能
+     */
+    const [keywords, _] = useWrapperRef<string | undefined>(undefined);
+
+    const onSearch = debounce((keywords: string) => {
+      Emitter('search', keywords);
+    }, Props.searchDelay);
+
+    __expose({
+      getOptionsIdMapData() {
+        return optionsIdMapData.value;
+      },
+    });
+
+    const __returned__ = {
+      Props,
+      computedFieldNames,
+      Emitter,
+      popupShow,
+      setPopupShow,
+      showValue,
+      setShowValue,
+      checkboxModelValue,
+      setCheckboxModelValue,
+      genIdMapOptionData,
+      optionsIdMapData,
+      _setOptionsIdMapData,
+      patchIdMapOptionData,
+      selectedOptions,
+      setSelectedOptions,
+      handleUpdateModelValue,
+      updateShowModelValueByModelValue,
+      triggerPopupShow,
+      handleCancel,
+      checkboxRefs,
+      toggle,
+      onConfirm,
+      keywords,
+      _,
+      onSearch,
+      get VanPopup() {
+        return VanPopup;
+      },
+      get VanCheckboxGroup() {
+        return VanCheckboxGroup;
+      },
+      get VanCellGroup() {
+        return VanCellGroup;
+      },
+      get VanCell() {
+        return VanCell;
+      },
+      get VanCheckbox() {
+        return VanCheckbox;
+      },
+      get VanSearch() {
+        return VanSearch;
+      },
+    };
+    Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+    return __returned__;
+  },
+});
+import {
+  renderSlot as _renderSlot,
+  normalizeClass as _normalizeClass,
+  createElementVNode as _createElementVNode,
+  createVNode as _createVNode,
+  openBlock as _openBlock,
+  createElementBlock as _createElementBlock,
+  createCommentVNode as _createCommentVNode,
+  toDisplayString as _toDisplayString,
+  renderList as _renderList,
+  Fragment as _Fragment,
+  withModifiers as _withModifiers,
+  withCtx as _withCtx,
+  createBlock as _createBlock,
+} from 'vue';
+
+const _hoisted_1 = { class: 'multi-picker' };
+const _hoisted_2 = { class: 'multi-picker-header van-picker__toolbar' };
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = { class: 'van-picker__title van-ellipsis' };
+const _hoisted_5 = { class: 'multi-picker-main' };
+const _hoisted_6 = {
+  key: 0,
+  class: 'multi-picker-tip',
+};
+
+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,
+        selectedOptions: $setup.selectedOptions,
+      }),
+      _createVNode(
+        $setup['VanPopup'],
+        {
+          show: $setup.popupShow,
+          'onUpdate:show': _cache[2] || (_cache[2] = ($event) => ($setup.popupShow = $event)),
+          onClickOverlay: $setup.handleCancel,
+          position: 'bottom',
+          round: '',
+        },
+        {
+          default: _withCtx(() => [
+            _createVNode(
+              $setup['VanCheckboxGroup'],
+              {
+                modelValue: $setup.checkboxModelValue,
+                'onUpdate:modelValue': _cache[1] || (_cache[1] = ($event) => ($setup.checkboxModelValue = $event)),
+              },
+              {
+                default: _withCtx(() => [
+                  _createElementVNode('div', _hoisted_2, [
+                    _createElementVNode(
+                      'button',
+                      {
+                        class: _normalizeClass(['van-picker__cancel', 'van-haptics-feedback']),
+                        onClick: $setup.handleCancel,
+                      },
+                      '取消'
+                    ),
+                    $props.showSearch
+                      ? (_openBlock(),
+                        _createElementBlock('div', _hoisted_3, [
+                          _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']
+                          ),
+                        ]))
+                      : _renderSlot(_ctx.$slots, 'title', { key: 1 }, () => [
+                          _createElementVNode('div', _hoisted_4, _toDisplayString($props.title), 1 /* TEXT */),
+                        ]),
+                    _createElementVNode(
+                      'button',
+                      {
+                        class: _normalizeClass(['van-picker__confirm', 'van-haptics-feedback']),
+                        onClick: $setup.onConfirm,
+                      },
+                      '确定'
+                    ),
+                  ]),
+                  _createElementVNode('div', _hoisted_5, [
+                    $props.tipTxt
+                      ? (_openBlock(),
+                        _createElementBlock('div', _hoisted_6, _toDisplayString($props.tipTxt), 1 /* TEXT */))
+                      : _createCommentVNode('v-if', true),
+                    _createVNode(
+                      $setup['VanCellGroup'],
+                      {
+                        class: 'multi-picker-cell-group',
+                        inset: '',
+                      },
+                      {
+                        default: _withCtx(() => [
+                          (_openBlock(true),
+                          _createElementBlock(
+                            _Fragment,
+                            null,
+                            _renderList($props.options, (item, index) => {
+                              return (
+                                _openBlock(),
+                                _createBlock(
+                                  $setup['VanCell'],
+                                  {
+                                    clickable: '',
+                                    key: item?.[$setup.computedFieldNames.value],
+                                    title: item?.[$setup.computedFieldNames.label],
+                                    onClick: ($event) => $setup.toggle(item, index),
+                                  },
+                                  {
+                                    'right-icon': _withCtx(() => [
+                                      _createVNode(
+                                        $setup['VanCheckbox'],
+                                        {
+                                          name: item?.[$setup.computedFieldNames.value],
+                                          disabled: item?.disabled,
+                                          ref_for: true,
+                                          ref: (el) => {
+                                            ($setup.checkboxRefs as any)[index] = el;
+                                          },
+                                          onClick: _withModifiers(($event) => $setup.toggle(item, index), ['stop']),
+                                        },
+                                        null,
+                                        8 /* PROPS */,
+                                        ['name', 'disabled', 'onClick']
+                                      ),
+                                    ]),
+                                    _: 2 /* DYNAMIC */,
+                                  },
+                                  1032 /* PROPS, DYNAMIC_SLOTS */,
+                                  ['title', 'onClick']
+                                )
+                              );
+                            }),
+                            128 /* KEYED_FRAGMENT */
+                          )),
+                        ]),
+                        _: 1 /* STABLE */,
+                      }
+                    ),
+                  ]),
+                ]),
+                _: 3 /* FORWARDED */,
+              },
+              8 /* PROPS */,
+              ['modelValue']
+            ),
+          ]),
+          _: 3 /* FORWARDED */,
+        },
+        8 /* PROPS */,
+        ['show']
+      ),
+    ])
+  );
+}
+__vue_sfc__.render = __vue_render__;
+
+__vue_sfc__.__scopeId = 'data-v-d088a892';
+export default __vue_sfc__;