@ebfe/vant-kit 0.0.1 → 0.0.2

package/lib/field-multi-picker/index.ts

@@ -0,0 +1,139 @@
+// @ts-nocheck
+import './index-sfc.css';
+import { defineComponent as _defineComponent } from 'vue';
+import MultiPicker, { TConfirmEventPayload, TMultiPickerProps } from '../multi-picker/index.vue';
+import { Field as VanField } from 'vant';
+import { isNullOrUndefined } from '@ebfe/utils';
+import { useWrapperRef } from '@ebfe/vhooks';
+import type { FieldProps } from 'vant';
+import { computed, ref, watch } from 'vue';
+
+const __default__ = {
+  name: 'FieldMultiPicker',
+};
+
+const __vue_sfc__ = /*@__PURE__*/ _defineComponent({
+  ...__default__,
+  props: {
+    modelValue: { type: Array, required: true },
+    options: { type: Array, required: true },
+    fieldNames: { type: Object, required: false },
+    title: { type: String, required: false },
+    tipTxt: { type: String, required: false },
+    showSearch: { type: Boolean, required: false },
+    searchDelay: { type: Number, required: false },
+    fieldProps: { type: Object, required: true },
+  },
+  emits: ['search', 'toggleCheckbox', 'confirm', 'update:modelValue'],
+  setup(__props: any, { expose: __expose, emit: __emit }) {
+    const Props = __props;
+
+    const computedFieldProps = computed(() => {
+      const defaultProps: typeof Props.fieldProps = {
+        inputAlign: 'right',
+        errorMessageAlign: 'right',
+      };
+      return Object.assign(Props?.fieldProps ?? {}, defaultProps);
+    });
+
+    const isViewMode = computed(
+      () => computedFieldProps.value?.readonly || computedFieldProps.value?.disabled || false
+    );
+    const isLink = computed(() => {
+      if (isNullOrUndefined(computedFieldProps.value?.isLink)) {
+        return !isViewMode.value;
+      } else {
+        return computedFieldProps.value?.isLink;
+      }
+    });
+
+    const Emitter = __emit;
+
+    const [modelFieldValue, setModelFieldValue] = useWrapperRef<any>(Props.modelValue ?? []);
+    watch(() => Props.modelValue, setModelFieldValue, { immediate: true });
+    const updateModelFieldValue = (newValue: any[] = []) => {
+      setModelFieldValue(newValue);
+      // console.log('updateModelFieldValue');
+      Emitter('update:modelValue', newValue);
+    };
+
+    const MultiPickerRef = ref<InstanceType<typeof MultiPicker>>();
+    __expose({
+      getOptionsIdMapData() {
+        return MultiPickerRef.value?.getOptionsIdMapData?.();
+      },
+    });
+
+    const __returned__ = {
+      Props,
+      computedFieldProps,
+      isViewMode,
+      isLink,
+      Emitter,
+      modelFieldValue,
+      setModelFieldValue,
+      updateModelFieldValue,
+      MultiPickerRef,
+      MultiPicker,
+      get VanField() {
+        return VanField;
+      },
+    };
+    Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+    return __returned__;
+  },
+});
+import {
+  mergeProps as _mergeProps,
+  createVNode as _createVNode,
+  withCtx as _withCtx,
+  openBlock as _openBlock,
+  createBlock as _createBlock,
+} from 'vue';
+
+function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
+  return (
+    _openBlock(),
+    _createBlock(
+      $setup['MultiPicker'],
+      _mergeProps({ ref: 'MultiPickerRef' }, $setup.Props, {
+        'show-search': $props.showSearch,
+        modelValue: $setup.modelFieldValue,
+        'onUpdate:modelValue': [
+          _cache[0] || (_cache[0] = ($event) => ($setup.modelFieldValue = $event)),
+          _cache[1] || (_cache[1] = (...args) => $setup.updateModelFieldValue(...args)),
+        ],
+        onSearch: _cache[2] || (_cache[2] = (...args) => $setup.Emitter('search', ...args)),
+        onToggleCheckbox: _cache[3] || (_cache[3] = (...args) => $setup.Emitter('toggleCheckbox', ...args)),
+        onConfirm: _cache[4] || (_cache[4] = (...args) => $setup.Emitter('confirm', ...args)),
+      }),
+      {
+        trigger: _withCtx(({ triggerPopupShow, showValue }) => [
+          _createVNode(
+            $setup['VanField'],
+            _mergeProps($setup.computedFieldProps, {
+              'is-link': $setup.isLink,
+              readonly: '',
+              modelValue: showValue!,
+              'onUpdate:modelValue': ($event) => (showValue! = $event),
+              onClick: () => {
+                if ($setup.isViewMode) return;
+                triggerPopupShow();
+              },
+            }),
+            null,
+            16 /* FULL_PROPS */,
+            ['is-link', 'modelValue', 'onUpdate:modelValue', 'onClick']
+          ),
+        ]),
+        _: 1 /* STABLE */,
+      },
+      16 /* FULL_PROPS */,
+      ['show-search', 'modelValue']
+    )
+  );
+}
+__vue_sfc__.render = __vue_render__;
+
+__vue_sfc__.__scopeId = 'data-v-780fee58';
+export default __vue_sfc__;

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

@@ -0,0 +1,94 @@
+# FieldSinglePicker
+
+### 介绍
+
+基于 SinglePicker 以及 vant 的 field 组件进行二次封装，方便处理表单中的单项选择需求场景。
+
+- 支持传入所有 SinglePicker props（类型 TSinglePickerProps）
+- 支持传入所有的 [vant field props](https://vant-ui.github.io/vant/#/zh-CN/field#props)
+
+**主要功能描述**
+
+- 集成 SinglePicker 所有功能
+
+**对开发者的解脱**
+
+- 符合 ui 设计
+- 默认场景下 van-field 绑定值就是展示值，FieldSinglePicker 内部将绑定值与展示值表单真正需要收集的值分隔开。
+
+## 代码演示
+
+### 基础用法
+
+```html
+<template>
+  modelValue: {{ pickerValue }}
+  <FieldSinglePicker
+    v-model="pickerValue"
+    :field-props="{
+      name: 'declarationType',
+      label: '单选',
+      placeholder: '请选择',
+      required: true,
+      rules: [{ required: true, message: '请选择' }],
+    }"
+    :picker-props="{
+      title: '基础用法',
+      columns: columns,
+      columnsFieldNames: columnsFieldNames,
+    }"
+  >
+    <template #columns-top>
+      <div class="desc">这就是基础组件 - SinglePicker</div>
+    </template>
+  </FieldSinglePicker>
+</template>
+
+<script setup lang="ts">
+  import { useWrapperRef } from '@ebfe/vhooks';
+  import FieldSinglePicker from '../index.vue';
+
+  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">
+  .desc {
+    font-size: 12px;
+    text-align: center;
+  }
+</style>
+```
+
+## API
+
+### Props
+
+继承 TSinglePickerProps 的同时
+
+| 参数       | 说明               | 类型             | 默认值 |
+| ---------- | ------------------ | ---------------- | ------ |
+| fieldProps | 当前选中项对应的值 | vant field props | -      |
+
+### Events
+
+继承 SinglePicker
+
+| 事件名 | 说明 | 回调参数 |
+| :----- | :--- | :------- |
+| -      | -    | -        |
+
+### Slots
+
+继承 SinglePicker
+
+| 名称 | 说明 | 参数 |
+| :--- | :--- | :--- |
+| -    | -    | -    |

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

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

package/lib/field-single-picker/index.ts

@@ -0,0 +1,158 @@
+// @ts-nocheck
+import './index-sfc.css';
+import { defineComponent as _defineComponent } from 'vue';
+import SinglePicker, { TSinglePickerProps, TConfirmDisabledOptionPayload } from '../single-picker/index.vue';
+import { Field as VanField } from 'vant';
+import { isNullOrUndefined } from '@ebfe/utils';
+import { useWrapperRef } from '@ebfe/vhooks';
+import type { FieldProps } from 'vant';
+import { computed, watch } from 'vue';
+
+const __default__ = {
+  name: 'FieldSinglePicker',
+};
+
+const __vue_sfc__ = /*@__PURE__*/ _defineComponent({
+  ...__default__,
+  props: {
+    showSearch: { type: Boolean, required: false, default: false },
+    searchDelay: { type: Number, required: false },
+    modelValue: { type: null, required: true },
+    pickerProps: { type: Object, required: true },
+    fieldProps: { type: Object, required: true },
+  },
+  emits: ['search', 'confirm', 'confirmDisabledOption', 'update:modelValue'],
+  setup(__props: any, { expose: __expose, emit: __emit }) {
+    const Props = __props;
+
+    const computedFieldProps = computed(() => {
+      const defaultProps: typeof Props.fieldProps = {
+        inputAlign: 'right',
+        errorMessageAlign: 'right',
+      };
+      return Object.assign(Props?.fieldProps ?? {}, defaultProps);
+    });
+
+    const isViewMode = computed(
+      () => computedFieldProps.value?.readonly || computedFieldProps.value?.disabled || false
+    );
+    const isLink = computed(() => {
+      if (isNullOrUndefined(computedFieldProps.value?.isLink)) {
+        return !isViewMode.value;
+      } else {
+        return computedFieldProps.value?.isLink;
+      }
+    });
+
+    const Emitter = __emit;
+
+    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);
+    };
+
+    __expose({});
+
+    const __returned__ = {
+      Props,
+      computedFieldProps,
+      isViewMode,
+      isLink,
+      Emitter,
+      modelFieldValue,
+      setModelFieldValue,
+      updateModelFieldValue,
+      SinglePicker,
+      get VanField() {
+        return VanField;
+      },
+    };
+    Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
+    return __returned__;
+  },
+});
+import {
+  createCommentVNode as _createCommentVNode,
+  mergeProps as _mergeProps,
+  renderSlot as _renderSlot,
+  createVNode as _createVNode,
+  withCtx as _withCtx,
+  renderList as _renderList,
+  createSlots as _createSlots,
+  openBlock as _openBlock,
+  createBlock as _createBlock,
+} from 'vue';
+
+function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
+  return (
+    _openBlock(),
+    _createBlock(
+      $setup['SinglePicker'],
+      {
+        modelValue: $setup.modelFieldValue,
+        'onUpdate:modelValue': [
+          _cache[1] || (_cache[1] = ($event) => ($setup.modelFieldValue = $event)),
+          _cache[2] || (_cache[2] = (...args) => $setup.updateModelFieldValue(...args)),
+        ],
+        'picker-props': $props.pickerProps,
+        'show-search': $props.showSearch,
+        onSearch: _cache[3] || (_cache[3] = (...args) => $setup.Emitter('search', ...args)),
+        onConfirm: _cache[4] || (_cache[4] = (...args) => $setup.Emitter('confirm', ...args)),
+        onConfirmDisabledOption:
+          _cache[5] || (_cache[5] = (...args) => $setup.Emitter('confirmDisabledOption', ...args)),
+      },
+      _createSlots(
+        {
+          trigger: _withCtx(({ triggerPopupShow, showValue }) => [
+            _createVNode(
+              $setup['VanField'],
+              _mergeProps({ class: 'hidden' }, $setup.computedFieldProps, {
+                modelValue: $setup.modelFieldValue,
+                'onUpdate:modelValue': _cache[0] || (_cache[0] = ($event) => ($setup.modelFieldValue = $event)),
+                'is-link': $setup.isLink,
+              }),
+              null,
+              16 /* FULL_PROPS */,
+              ['modelValue', 'is-link']
+            ),
+            _createVNode(
+              $setup['VanField'],
+              _mergeProps($setup.computedFieldProps, {
+                'is-link': $setup.isLink,
+                readonly: '',
+                name: undefined,
+                modelValue: showValue!,
+                'onUpdate:modelValue': ($event) => (showValue! = $event),
+                onClick: () => {
+                  if ($setup.isViewMode) return;
+                  triggerPopupShow();
+                },
+              }),
+              null,
+              16 /* FULL_PROPS */,
+              ['is-link', 'modelValue', 'onUpdate:modelValue', 'onClick']
+            ),
+          ]),
+          _: 2 /* DYNAMIC */,
+        },
+        [
+          _renderList(_ctx.$slots, (_slot, name) => {
+            return {
+              name: name,
+              fn: _withCtx((slotData) => [_renderSlot(_ctx.$slots, name, _mergeProps(slotData, { key: name }))]),
+            };
+          }),
+        ]
+      ),
+      1032 /* PROPS, DYNAMIC_SLOTS */,
+      ['modelValue', 'picker-props', 'show-search']
+    )
+  );
+}
+__vue_sfc__.render = __vue_render__;
+
+__vue_sfc__.__scopeId = 'data-v-308c2b1b';
+export default __vue_sfc__;

package/lib/index.js

@@ -1,49 +1,13 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all) __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if ((from && typeof from === 'object') || typeof from === 'function') {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, {
-          get: () => from[key],
-          enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable,
-        });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (
-  (target = mod != null ? __create(__getProtoOf(mod)) : {}),
-  __copyProps(
-    // If the importer is in node compatibility mode or this is not an ESM
-    // file that has been converted to a CommonJS file using a Babel-
-    // compatible transform (i.e. "__esModule" has not been set), then set
-    // "default" to the CommonJS "module.exports" for node compatibility.
-    isNodeMode || !mod || !mod.__esModule ? __defProp(target, 'default', { value: mod, enumerable: true }) : target,
-    mod
-  )
-);
-var __toCommonJS = (mod) => __copyProps(__defProp({}, '__esModule', { value: true }), mod);
-var stdin_exports = {};
-__export(stdin_exports, {
-  DemoButton: () => import_demo_button.default,
-  SinglePicker: () => import_single_picker.default,
-  default: () => stdin_default,
-  install: () => install,
-  version: () => version,
-});
-module.exports = __toCommonJS(stdin_exports);
-var import_demo_button = __toESM(require('./demo-button'));
-var import_single_picker = __toESM(require('./single-picker'));
-const version = '0.0.0';
+import FieldMultiPicker from './field-multi-picker';
+import FieldSinglePicker from './field-single-picker';
+import MultiPicker from './multi-picker';
+import SinglePicker from './single-picker';
+
+const version = '0.0.1';
+
 function install(app) {
-  const components = [import_demo_button.default, import_single_picker.default];
+  const components = [FieldMultiPicker, FieldSinglePicker, MultiPicker, SinglePicker];
+
   components.forEach((item) => {
     if (item.install) {
       app.use(item);
@@ -52,7 +16,10 @@ function install(app) {
     }
   });
 }
-var stdin_default = {
+
+export { install, version, FieldMultiPicker, FieldSinglePicker, MultiPicker, SinglePicker };
+
+export default {
   install,
   version,
 };

package/lib/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/lib/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;
+}