@ebfe/vant-kit 0.0.1 → 0.0.2

package/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebfe/vant-kit",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "A project that includes common components from the H5 project (dependent on vant) and some utility functions",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -13,6 +13,7 @@
   "publishConfig": {
     "access": "public"
   },
+  "license": "MIT",
   "author": "astfn",
   "peerDependencies": {
     "vue": "^3.3.4"
@@ -23,8 +24,7 @@
     "@vant/cli": "^7.0.0",
     "sass": "^1.49.7",
     "unplugin-dts": "1.0.0-beta.0",
-    "vue": "^3.3.4",
-    "@ebfe/tsconfig": "0.0.1"
+    "vue": "^3.3.4"
   },
   "eslintConfig": {
     "root": true,

package/es/demo-button/index-sfc.css

@@ -1,9 +0,0 @@
-.demo-button[data-v-5ccde05a] {
-  min-width: 120px;
-  color: #fff;
-  font-size: 16px;
-  line-height: 36px;
-  background-color: var(--5ccde05a-computedBgColor);
-  border: none;
-  border-radius: 30px;
-}

package/es/demo-button/index-sfc.less

@@ -1,9 +0,0 @@
-.demo-button[data-v-5ccde05a] {
-  min-width: 120px;
-  color: #fff;
-  font-size: 16px;
-  line-height: 36px;
-  background-color: var(--5ccde05a-computedBgColor);
-  border: none;
-  border-radius: 30px;
-}

package/es/demo-button/index.d.ts

@@ -1,44 +0,0 @@
-import './index-sfc.css';
-declare const __vue_sfc__: import('vue').DefineComponent<
-  import('vue').ExtractPropTypes<{
-    bgColor: {
-      type: StringConstructor;
-      required: false;
-      default: string;
-    };
-  }>,
-  {
-    Props: any;
-    computedBgColor: import('vue').ComputedRef<any>;
-  },
-  {},
-  {},
-  {},
-  import('vue').ComponentOptionsMixin,
-  import('vue').ComponentOptionsMixin,
-  {},
-  string,
-  import('vue').PublicProps,
-  Readonly<
-    import('vue').ExtractPropTypes<{
-      bgColor: {
-        type: StringConstructor;
-        required: false;
-        default: string;
-      };
-    }>
-  > &
-    Readonly<{}>,
-  {
-    bgColor: string;
-  },
-  {},
-  {},
-  {},
-  string,
-  import('vue').ComponentProvideOptions,
-  true,
-  {},
-  any
->;
-export default __vue_sfc__;

package/es/demo-button/index.js

@@ -1,52 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) =>
-  key in obj
-    ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value })
-    : (obj[key] = value);
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import './index-sfc.css';
-import { useCssVars as _useCssVars, defineComponent as _defineComponent } from 'vue';
-import { computed } from 'vue';
-const __default__ = {
-  name: 'DemoButton',
-};
-const __vue_sfc__ = /* @__PURE__ */ _defineComponent(
-  __spreadProps(__spreadValues({}, __default__), {
-    props: {
-      bgColor: { type: String, required: false, default: '#f44' },
-    },
-    setup(__props, { expose: __expose }) {
-      __expose();
-      _useCssVars((_ctx) => ({
-        '5ccde05a-computedBgColor': computedBgColor.value,
-      }));
-      const Props = __props;
-      const computedBgColor = computed(() => Props.bgColor);
-      const __returned__ = { Props, computedBgColor };
-      Object.defineProperty(__returned__, '__isScriptSetup', { enumerable: false, value: true });
-      return __returned__;
-    },
-  })
-);
-import { renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from 'vue';
-const _hoisted_1 = { class: 'demo-button' };
-function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
-  return (_openBlock(), _createElementBlock('button', _hoisted_1, [_renderSlot(_ctx.$slots, 'default')]));
-}
-__vue_sfc__.render = __vue_render__;
-__vue_sfc__.__scopeId = 'data-v-5ccde05a';
-var stdin_default = __vue_sfc__;
-export { stdin_default as default };

package/es/index.d.ts

@@ -1,10 +0,0 @@
-declare namespace _default {
-  export { install };
-  export { version };
-}
-export default _default;
-export function install(app: any): void;
-export const version: '0.0.0';
-import DemoButton from './demo-button';
-import SinglePicker from './single-picker';
-export { DemoButton, SinglePicker };

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

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