@ebfe/vant-kit 0.0.3 → 0.0.5

package/lib/multi-picker/index.ts

@@ -1,399 +0,0 @@
-// @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__;

package/lib/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 '../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/lib/single-picker/index-sfc.less

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