cnhis-design-vue 3.1.31-beta.9 → 3.1.32-beta.0

package/es/components/recommend-search/src/components/RecommendSelect.vue.js

@@ -1,26 +1,34 @@
-import { defineComponent, ref, computed, openBlock, createElementBlock, createVNode, mergeProps, unref, isRef, withCtx, createElementVNode, Fragment, renderList, toDisplayString, renderSlot } from 'vue';
+import { defineComponent, ref, computed, openBlock, createElementBlock, createVNode, mergeProps, unref, isRef, withCtx, createElementVNode, normalizeProps, guardReactiveProps, Fragment, renderList, normalizeClass, toDisplayString, createBlock, createCommentVNode, renderSlot } from 'vue';
+import { Checkmark } from '@vicons/ionicons5';
 import { useMemoize, useVModel, useVirtualList } from '@vueuse/core';
 import { isObject } from 'lodash-es';
-import RecommendMenu from './RecommendMenu.vue.js';
 import BaseSearch from './BaseSearch.vue.js';
+import { NIcon } from 'naive-ui';
 import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.js';
 
 const _hoisted_1 = { class: "recommend-search" };
 const _hoisted_2 = ["onClick"];
-const _hoisted_3 = /* @__PURE__ */ createElementVNode("section", { class: "recommend-search__empty" }, "\u6682\u65E0\u6570\u636E", -1);
+const _hoisted_3 = ["title"];
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("section", { class: "recommend-search__empty" }, "\u6682\u65E0\u6570\u636E", -1);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "RecommendSelect",
   props: {
-    value: null,
-    labelKey: { default: "label" },
-    valueKey: { default: "value" },
-    options: { default: () => [] },
-    commonList: { default: () => [] },
-    recentList: { default: () => [] }
+    value: { type: [String, Number] },
+    labelKey: { type: String, default: "label" },
+    valueKey: { type: String, default: "value" },
+    placeholder: { type: String, default: "\u8BF7\u9009\u62E9" },
+    editPlaceholder: { type: String, default: "\u8BF7\u8F93\u5165\u5173\u952E\u5B57\u8FDB\u884C\u641C\u7D22" },
+    options: { type: Array, default: () => [] },
+    commonList: { type: Array, default: () => [] },
+    recentList: { type: Array, default: () => [] }
   },
-  emits: ["update:value", "search", "delete", "choose"],
+  emits: ["update:value", "search", "delete", "choose", "clear", "openMenu", "closeMenu"],
   setup(__props, { emit: emits }) {
     const props = __props;
+    const showRef = ref(false);
+    const displayPlaceholder = computed(() => {
+      return showRef.value ? props.editPlaceholder : props.placeholder;
+    });
     const currentOption = ref();
     const jsonParse = useMemoize(
       (value) => {
@@ -32,90 +40,112 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       },
       { getKey: (value) => value }
     );
-    function getValue(item) {
-      const option = jsonParse(item.itemObj);
-      return isObject(option) ? option[props.valueKey] : null;
+    function getRecommendOption(item) {
+      return jsonParse(item.itemObj);
     }
+    const commonOptions = computed(() => props.commonList.map(getRecommendOption));
+    const recentOptions = computed(() => props.recentList.map(getRecommendOption));
+    const optionWithoutRecommend = computed(() => {
+      return props.options.filter((option) => {
+        return commonOptions.value.every(notInList) && recentOptions.value.every(notInList);
+        function notInList(item) {
+          return item[props.valueKey] !== option[props.valueKey];
+        }
+      });
+    });
     function getDisplayValue(item) {
-      if (isObject(item)) {
-        const option = jsonParse(item.itemObj);
-        return isObject(option) ? option[props.labelKey] : "";
-      }
       let result = "";
-      [...props.options, currentOption.value].find((option) => {
-        if (!option)
+      [...parsedOptions.value, currentOption.value].find((option) => {
+        if (!isObject(option) || option[props.valueKey] !== item)
           return;
-        const value = jsonParse(option.itemObj);
-        if (isObject(value) && value[props.valueKey] === item) {
-          result = value[props.labelKey];
-          return true;
-        }
+        result = option[props.labelKey];
+        return true;
       });
       return result;
     }
     const baseSearchRef = ref();
     const valueRef = useVModel(props, "value", emits);
     const parsedOptions = computed(() => {
-      return props.options.filter((option) => {
-        return props.commonList.every(notInList) && props.recentList.every(notInList);
-        function notInList(item) {
-          return item.itemObj !== option.itemObj;
-        }
-      });
+      return [...commonOptions.value, ...recentOptions.value, ...optionWithoutRecommend.value];
     });
-    function search(value) {
+    function search(value = "") {
       emits("search", value);
     }
+    function onOpenMenu() {
+      search();
+      emits("openMenu");
+    }
+    function onCloseMenu() {
+      emits("closeMenu");
+    }
     function onClear() {
       valueRef.value = null;
+      emits("clear");
+    }
+    function emitChoose(value) {
+      emits("choose", { value, option: { ...currentOption.value } });
     }
-    function onChoose({ value }) {
+    function onChooseOption(option) {
       var _a;
-      valueRef.value = getValue(value);
+      if (!isObject(option))
+        return;
+      valueRef.value = option[props.valueKey];
       (_a = baseSearchRef.value) == null ? void 0 : _a.closeMenu();
-      currentOption.value = value;
-      emits("choose", valueRef.value);
+      currentOption.value = option;
+      emitChoose(option[props.valueKey]);
     }
-    const { list, wrapperProps, containerProps } = useVirtualList(parsedOptions, { itemHeight: 32, overscan: 3 });
+    const { list, wrapperProps, containerProps } = useVirtualList(parsedOptions, { itemHeight: 32, overscan: 5 });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("section", _hoisted_1, [
         createVNode(BaseSearch, mergeProps({
           ref_key: "baseSearchRef",
           ref: baseSearchRef,
           value: unref(valueRef),
-          "onUpdate:value": _cache[1] || (_cache[1] = ($event) => isRef(valueRef) ? valueRef.value = $event : null),
+          "onUpdate:value": _cache[0] || (_cache[0] = ($event) => isRef(valueRef) ? valueRef.value = $event : null),
+          show: showRef.value,
+          "onUpdate:show": _cache[1] || (_cache[1] = ($event) => showRef.value = $event),
           "display-value": getDisplayValue(unref(valueRef)),
+          placeholder: unref(displayPlaceholder),
+          onOpenMenu,
+          onCloseMenu,
           onSearch: search,
           onClear
         }, _ctx.$attrs), {
           menu: withCtx(() => [
-            createVNode(RecommendMenu, {
-              "get-display-value": getDisplayValue,
-              "common-list": __props.commonList,
-              "recent-list": __props.recentList,
-              onDelete: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("delete", $event)),
-              onChoose
-            }, null, 8, ["common-list", "recent-list"]),
             unref(parsedOptions).length ? (openBlock(), createElementBlock("section", mergeProps({
               key: 0,
               class: "recommend-search__optionContainer",
               style: { "height": "256px" }
             }, unref(containerProps)), [
-              createElementVNode("section", mergeProps({ class: "recommend-search__optionWrapper" }, unref(wrapperProps)), [
+              createElementVNode("section", normalizeProps(guardReactiveProps(unref(wrapperProps))), [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (option) => {
                   return openBlock(), createElementBlock("div", {
-                    onClick: ($event) => onChoose({ value: option.data }),
-                    key: option.data.itemObj,
-                    class: "recommend-search__option"
-                  }, toDisplayString(getDisplayValue(option.data)), 9, _hoisted_2);
+                    onClick: ($event) => onChooseOption(option.data),
+                    key: option.data[__props.valueKey],
+                    class: normalizeClass([
+                      "recommend-search__option",
+                      {
+                        "is-active": option.data[__props.valueKey] === unref(valueRef)
+                      }
+                    ])
+                  }, [
+                    createElementVNode("div", {
+                      class: "recommend-search__optionText",
+                      title: option.data.itemObj
+                    }, toDisplayString(option.data[__props.labelKey]), 9, _hoisted_3),
+                    option.data[__props.valueKey] === unref(valueRef) ? (openBlock(), createBlock(unref(NIcon), {
+                      key: 0,
+                      component: unref(Checkmark)
+                    }, null, 8, ["component"])) : createCommentVNode("v-if", true)
+                  ], 10, _hoisted_2);
                 }), 128))
               ], 16)
             ], 16)) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [
-              _hoisted_3
+              _hoisted_4
             ])
           ]),
           _: 3
-        }, 16, ["value", "display-value"])
+        }, 16, ["value", "show", "display-value", "placeholder"])
       ]);
     };
   }

package/es/components/recommend-search/style/index.css

@@ -1 +1 @@
-.recommend-search__menuRecommendList{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.recommend-search__menuRecommendList .n-tag{cursor:pointer}.recommend-search__recentRecommend{margin-bottom:8px}.recommend-search__recentRecommend>header{color:rgba(0,0,0,.4)}.recommend-search__commonRecommend{margin-bottom:8px}.recommend-search__commonRecommend>header{color:rgba(0,0,0,.4)}.recommend-search__option{align-items:center;border-radius:4px;cursor:pointer;display:flex;height:32px;padding:0 8px}.recommend-search__option:hover{background:rgba(0,0,0,.03)}.recommend-search__optionContainer{border:1px solid rgba(0,0,0,.1);border-radius:4px}.recommend-search__empty{align-items:center;color:rgba(0,0,0,.3);display:flex;height:100px;justify-content:center}
+.recommend-search__menu{min-height:100px}.recommend-search__menuRecommendList{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.recommend-search__menuRecommendList .n-tag{cursor:pointer}.recommend-search__recentRecommend{margin-bottom:8px}.recommend-search__recentRecommend>header{align-items:center;color:rgba(0,0,0,.4);display:flex;justify-content:space-between}.recommend-search__recentRecommend>header .n-icon:hover{color:rgba(0,0,0,.6);cursor:pointer}.recommend-search__commonRecommend{margin-bottom:8px}.recommend-search__commonRecommend>header{align-items:center;color:rgba(0,0,0,.4);display:flex;justify-content:space-between}.recommend-search__commonRecommend>header .n-icon:hover{color:rgba(0,0,0,.6);cursor:pointer}.recommend-search__option{align-items:center;border-radius:4px;cursor:pointer;display:flex;height:32px;justify-content:space-between;padding:0 8px}.recommend-search__optionText{max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recommend-search__option.is-active{color:var(--n-color)!important}.recommend-search__option.is-active .n-icon{font-size:20px}.recommend-search__option:hover{background:rgba(0,0,0,.03)}.recommend-search__optionContainer{margin:-8px -10px}.recommend-search__empty{align-items:center;color:rgba(0,0,0,.3);display:flex;height:100px;justify-content:center}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cnhis-design-vue",
-	"version": "3.1.31-beta.9",
+	"version": "3.1.32-beta.0",
 	"license": "ISC",
 	"module": "./es/components/index.js",
 	"main": "./es/components/index.js",
@@ -61,5 +61,5 @@
 		"iOS 7",
 		"last 3 iOS versions"
 	],
-	"gitHead": "6cedf15777e13fda86e997af70df605a7944c061"
+	"gitHead": "36839bf96f266bbc5a99b6c16eae8a8e80c80f87"
 }