@jetlinks-web/components 3.0.0-rc → 3.0.0

package/lib/Search/Search.js

@@ -1,112 +1,73 @@
 /* Analyzed bindings: {
-  "columns": "props",
-  "type": "props",
-  "column": "props",
-  "style": "props",
-  "class": "props",
-  "labelWidth": "props",
-  "resetText": "props",
-  "submitText": "props",
-  "align": "props",
-  "JColumnsProps": "setup-maybe-ref",
-  "SearchItemData": "setup-maybe-ref",
-  "SearchProps": "setup-maybe-ref",
-  "Terms": "setup-maybe-ref",
-  "Button": "setup-maybe-ref",
-  "Row": "setup-maybe-ref",
-  "Col": "setup-maybe-ref",
-  "Form": "setup-maybe-ref",
-  "FormItemRest": "setup-maybe-ref",
-  "set": "setup-maybe-ref",
   "reactive": "setup-const",
   "ref": "setup-const",
-  "provide": "setup-const",
-  "watch": "setup-const",
   "computed": "setup-const",
   "inject": "setup-const",
-  "termsParamsFormat": "setup-maybe-ref",
-  "SearchItem": "setup-const",
-  "optionsMapKey": "setup-maybe-ref",
-  "SearchConfig": "setup-maybe-ref",
+  "useAttrs": "setup-const",
+  "searchProps": "setup-maybe-ref",
   "useLocaleReceiver": "setup-maybe-ref",
+  "Button": "setup-maybe-ref",
+  "Col": "setup-maybe-ref",
+  "Form": "setup-maybe-ref",
+  "FormItemRest": "setup-maybe-ref",
+  "Row": "setup-maybe-ref",
+  "SearchConfig": "setup-maybe-ref",
+  "Item": "setup-const",
+  "useHandleColumns": "setup-maybe-ref",
+  "useOptionMapContent": "setup-maybe-ref",
+  "termsParamsFormat": "setup-maybe-ref",
+  "useSearchStyle": "setup-maybe-ref",
   "props": "setup-reactive-const",
-  "contextLocale": "setup-maybe-ref",
-  "columnOptionMap": "setup-ref",
   "emit": "setup-const",
+  "contextLocale": "setup-maybe-ref",
+  "attrs": "setup-maybe-ref",
+  "columnsOptionMap": "setup-ref",
   "terms": "setup-reactive-const",
-  "searchItems": "setup-ref",
   "context": "setup-maybe-ref",
+  "initValues": "setup-maybe-ref",
+  "columnsMap": "setup-maybe-ref",
+  "prefixCls": "setup-ref",
+  "wrapSSR": "setup-maybe-ref",
+  "hashId": "setup-maybe-ref",
   "footerStyles": "setup-ref",
-  "itemValueChange": "setup-const",
-  "handleItems": "setup-const",
   "searchSubmit": "setup-const",
-  "resetNumber": "setup-ref",
-  "reset": "setup-const"
+  "reset": "setup-const",
+  "handleDefaultValues": "setup-const"
 } */
 import { defineComponent as _defineComponent } from 'vue';
-import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createVNode as _createVNode, unref as _unref, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
+import { unref as _unref, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createVNode as _createVNode, withCtx as _withCtx, createBlock as _createBlock, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass } from "vue";
 const _hoisted_1 = { class: "JSearch-content simple" };
 const _hoisted_2 = { class: "JSearch-items" };
-import { Button, Row, Col, Form, FormItemRest, } from 'ant-design-vue';
-import { set } from 'lodash-es';
-import { reactive, ref, provide, watch, computed, inject } from 'vue';
-import { termsParamsFormat } from './util';
-import SearchItem from './Item.js';
-import { optionsMapKey } from './setting';
-import { SearchConfig } from '../utils/constants';
-import { useLocaleReceiver } from "../LocaleReciver/index";
+import { reactive, ref, computed, inject, useAttrs } from 'vue';
+import { searchProps } from "./setting";
+import { useLocaleReceiver } from "../LocaleReciver";
+import { Button, Col, Form, FormItemRest, Row } from "ant-design-vue";
+import { SearchConfig } from "../utils/constants";
+import Item from './Item.js';
+import { useHandleColumns, useOptionMapContent } from "./hooks";
+import { termsParamsFormat } from "./util";
+import useSearchStyle from './style';
 const __sfc_main__ = _defineComponent({
     ...{
         name: 'JSearch',
+        inheritAttrs: false
     },
     props: {
-        columns: {
-            type: Array,
-            default: () => [],
-            required: true,
-        },
-        type: {
-            type: String,
-            default: 'terms',
-            required: true,
-        },
-        column: {
-            type: Number,
-            default: 4,
-        },
-        style: {
-            type: [String, Object],
-            default: undefined,
-        },
-        class: {
-            type: String,
-            default: '',
-        },
-        labelWidth: {
-            type: Number,
-            default: 40,
-        },
-        resetText: {
-            type: String,
-        },
-        submitText: {
-            type: String,
-        },
-        align: {
-            type: String,
-            default: 'value'
-        }
+        ...searchProps()
     },
-    emits: ["search"],
+    emits: ['search'],
     setup(__props, { expose: __expose, emit: __emit }) {
         const props = __props;
-        const [contextLocale] = useLocaleReceiver('Search');
-        const columnOptionMap = ref(new Map());
         const emit = __emit;
-        // 当前查询条件
-        const terms = reactive({ terms: [] });
-        const searchItems = ref([]); // 当前查询条件列表
+        const [contextLocale] = useLocaleReceiver('Search');
+        const attrs = useAttrs();
+        const columnsOptionMap = ref({}); // 存储每个columnItem的option
+        const terms = reactive({ terms: [] }); // 当前查询条件
         const context = inject(SearchConfig, { align: props.align });
+        const { initValues, columnsMap } = useHandleColumns(props, terms);
+        const prefixCls = computed(() => 'JSearch');
+        const [wrapSSR, hashId] = useSearchStyle(prefixCls);
+        useOptionMapContent(columnsOptionMap);
         const footerStyles = computed(() => {
             const align = context.align || props.align;
             if (align === 'value') {
@@ -114,76 +75,25 @@ const __sfc_main__ = _defineComponent({
             }
             return {};
         });
-        provide(optionsMapKey, columnOptionMap);
-        const itemValueChange = (value, index) => {
-            set(terms.terms, [index], value);
-        };
-        const handleItems = (reset = false) => {
-            searchItems.value = [];
-            terms.terms = [];
-            columnOptionMap.value.clear();
-            let hasSearch = false;
-            props.columns.forEach((item, index) => {
-                if (item.search && Object.keys(item.search).length) {
-                    columnOptionMap.value.set(item.dataIndex, item.search);
-                    // 默认值
-                    const { search } = item;
-                    let defaultTerms = null;
-                    // 包含defaultValue 或者 defaultOnceValue
-                    if (search.defaultValue !== undefined ||
-                        search.defaultTermType ||
-                        search.defaultOnceValue) {
-                        const _value = search.defaultValue || reset
-                            ? search.defaultValue
-                            : search.defaultOnceValue;
-                        defaultTerms = {
-                            type: 'and',
-                            value: _value,
-                            termType: search.defaultTermType || 'like',
-                            column: item.dataIndex,
-                        };
-                    }
-                    if (search.defaultValue !== undefined ||
-                        search.defaultOnceValue !== undefined) {
-                        hasSearch = true;
-                    }
-                    terms.terms.push(defaultTerms);
-                    searchItems.value.push({
-                        ...item.search,
-                        sortIndex: item.search.first ? 0 : index + 1,
-                        title: item.title,
-                        column: item.dataIndex,
-                    });
-                }
-            });
-            if (hasSearch) {
-                searchSubmit();
-            }
-        };
-        /**
-         * 提交
-         */
         const searchSubmit = () => {
-            emit('search', termsParamsFormat(terms.terms, columnOptionMap.value, 'low', props.type));
+            emit('search', termsParamsFormat(terms, columnsMap.value, 'low', props.type));
         };
-        /**
-         * 重置查询
-         */
-        const resetNumber = ref(1);
         const reset = () => {
-            resetNumber.value += 1;
-            handleItems(true);
-            if (props.type == 'object') {
-                emit('search', {});
-            }
-            else if (props.type == 'terms') {
-                emit('search', []);
-            }
+            initValues();
+        };
+        const handleDefaultValues = (value) => {
+            const isObject = Object.prototype.toString.call(value) === '[object Object]';
+            let _params = isObject ? Object.keys(value).map((key) => ({ column: key, value: value[key], termType: 'eq' })) : [...value];
+            terms.terms.forEach((item) => {
+                const paramsItem = _params.find(paramsItem => paramsItem.column === item.column);
+                if (paramsItem) {
+                    item.value = paramsItem.value;
+                }
+            });
+            emit('search', termsParamsFormat(terms, columnsMap.value));
         };
-        watch(() => props.columns, () => {
-            handleItems();
-        }, { immediate: true, deep: true });
         __expose({
+            setValues: handleDefaultValues,
             reset
         });
         return (_ctx, _cache) => {
@@ -193,36 +103,35 @@ const __sfc_main__ = _defineComponent({
             }, {
                 default: _withCtx(() => [
                     _createElementVNode("div", {
-                        class: _normalizeClass(['JSearch-warp', props.class]),
-                        style: _normalizeStyle(__props.style)
+                        class: _normalizeClass(["JSearch-warp", [_unref(attrs).class, _unref(hashId)]]),
+                        style: _normalizeStyle(_unref(attrs).style)
                     }, [
                         _createElementVNode("div", _hoisted_1, [
                             _createElementVNode("div", _hoisted_2, [
                                 _createVNode(_unref(Row), { gutter: [16, 16] }, {
                                     default: _withCtx(() => [
-                                        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(searchItems.value, (item, index) => {
+                                        (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(terms.terms, (item, index) => {
                                             return (_openBlock(), _createBlock(_unref(Col), {
-                                                key: index + '_' + item.column,
-                                                span: item.span || 24 / __props.column
+                                                span: item._span || 24 / _ctx.column
                                             }, {
                                                 default: _withCtx(() => [
-                                                    _createVNode(SearchItem, {
-                                                        "only-value": true,
-                                                        expand: false,
-                                                        index: index + 1,
-                                                        columns: searchItems.value,
-                                                        "component-props": item.componentProps,
-                                                        "terms-item": terms.terms[index],
-                                                        reset: resetNumber.value,
-                                                        "label-width": __props.labelWidth,
-                                                        onChange: (v) => itemValueChange(v, index)
-                                                    }, null, 8 /* PROPS */, ["index", "columns", "component-props", "terms-item", "reset", "label-width", "onChange"])
+                                                    _createVNode(Item, {
+                                                        value: item.value,
+                                                        "onUpdate:value": ($event) => ((item.value) = $event),
+                                                        termType: item.termType,
+                                                        "onUpdate:termType": ($event) => ((item.termType) = $event),
+                                                        column: item.column,
+                                                        "onUpdate:column": ($event) => ((item.column) = $event),
+                                                        type: item.type,
+                                                        "onUpdate:type": ($event) => ((item.type) = $event),
+                                                        labelWidth: _ctx.labelWidth
+                                                    }, null, 8 /* PROPS */, ["value", "onUpdate:value", "termType", "onUpdate:termType", "column", "onUpdate:column", "type", "onUpdate:type", "labelWidth"])
                                                 ]),
                                                 _: 2 /* DYNAMIC */
                                             }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["span"]));
-                                        }), 128 /* KEYED_FRAGMENT */)),
+                                        }), 256 /* UNKEYED_FRAGMENT */)),
                                         _createVNode(_unref(Col), {
-                                            span: 24 / __props.column
+                                            span: 24 / _ctx.column
                                         }, {
                                             default: _withCtx(() => [
                                                 _renderSlot(_ctx.$slots, "footerRender", {
@@ -233,12 +142,9 @@ const __sfc_main__ = _defineComponent({
                                                         class: "JSearch-footer--btns",
                                                         style: _normalizeStyle(footerStyles.value)
                                                     }, [
-                                                        _createVNode(_unref(Button), {
-                                                            type: "stroke",
-                                                            onClick: reset
-                                                        }, {
+                                                        _createVNode(_unref(Button), { onClick: reset }, {
                                                             default: _withCtx(() => [
-                                                                _createTextVNode(_toDisplayString(__props.resetText || _unref(contextLocale).search.reset), 1 /* TEXT */)
+                                                                _createTextVNode(_toDisplayString(_ctx.resetText || _unref(contextLocale).search.reset), 1 /* TEXT */)
                                                             ]),
                                                             _: 1 /* STABLE */
                                                         }),
@@ -249,7 +155,7 @@ const __sfc_main__ = _defineComponent({
                                                                     type: "primary"
                                                                 }, {
                                                                     default: _withCtx(() => [
-                                                                        _createTextVNode(_toDisplayString(__props.submitText || _unref(contextLocale).search.search), 1 /* TEXT */)
+                                                                        _createTextVNode(_toDisplayString(_ctx.submitText || _unref(contextLocale).search.search), 1 /* TEXT */)
                                                                     ]),
                                                                     _: 1 /* STABLE */
                                                                 })

package/lib/Search/hooks/index.js

@@ -1,11 +1,27 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  useOptionMapContent: true,
+  useOptionMap: true,
+  useColumnsMapContent: true,
+  useColumnsMap: true,
+  useDefaultValue: true,
+  useHandleColumns: true
+};
+exports.useOptionMapContent = exports.useOptionMap = exports.useHandleColumns = exports.useDefaultValue = exports.useColumnsMapContent = exports.useColumnsMap = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _createForOfIteratorHelper2 = _interopRequireDefault(require("@babel/runtime/helpers/createForOfIteratorHelper"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _vue = require("vue");
+var _util = require("../util");
 var _useSearchItems = require("./useSearchItems");
 Object.keys(_useSearchItems).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _useSearchItems[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -13,4 +29,117 @@ Object.keys(_useSearchItems).forEach(function (key) {
       return _useSearchItems[key];
     }
   });
-});
+});
+var _useRouteQuery = require("./useRouteQuery");
+Object.keys(_useRouteQuery).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useRouteQuery[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useRouteQuery[key];
+    }
+  });
+});
+var optionMapKey = Symbol('optionMapKey');
+var columnsMapKey = Symbol('columnMapKey');
+var columnsValues = Symbol('columnsValues');
+var useOptionMapContent = exports.useOptionMapContent = function useOptionMapContent(optionsMap) {
+  (0, _vue.provide)(optionMapKey, optionsMap);
+};
+var useOptionMap = exports.useOptionMap = function useOptionMap() {
+  return (0, _vue.inject)(optionMapKey);
+};
+var useColumnsMapContent = exports.useColumnsMapContent = function useColumnsMapContent(columnsMap) {
+  (0, _vue.provide)(columnsMapKey, columnsMap);
+};
+var useColumnsMap = exports.useColumnsMap = function useColumnsMap() {
+  return (0, _vue.inject)(columnsMapKey);
+};
+var useDefaultValue = exports.useDefaultValue = function useDefaultValue() {
+  return (0, _vue.inject)(columnsValues);
+};
+var useHandleColumns = exports.useHandleColumns = function useHandleColumns(props, terms) {
+  var columnsMap = (0, _vue.ref)({}); // 存储每个column
+  var defaultCacheValues = (0, _vue.ref)({});
+  useColumnsMapContent(columnsMap);
+  /**
+   * 处理search.first为true的排序
+   * @param arr
+   */
+  var moveFirstElementsToFront = function moveFirstElementsToFront(arr) {
+    // 提取所有 first: true 的元素
+    var firstElements = arr.filter(function (item) {
+      return item.search.first === true;
+    });
+    // 提取剩余的元素
+    var otherElements = arr.filter(function (item) {
+      return item.search.first !== true;
+    });
+    // 合并并返回
+    return [].concat((0, _toConsumableArray2.default)(firstElements), (0, _toConsumableArray2.default)(otherElements));
+  };
+  /**
+   * 处理默认值
+   * @param arr
+   */
+  var handleDefaultValue = function handleDefaultValue(arr) {
+    var _iterator = (0, _createForOfIteratorHelper2.default)(arr),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+        var search = item.search;
+        var _data = {
+          defaultValue: undefined,
+          defaultTermType: undefined
+        };
+        _data.defaultValue = search.defaultValue;
+        _data.defaultTermType = search.defaultTermType;
+        defaultCacheValues.value[item.dataIndex] = _data;
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    (0, _vue.provide)(columnsValues, defaultCacheValues);
+  };
+  var initValues = function initValues() {
+    var arr = Object.values(columnsMap.value);
+    if (props.mode === 'advanced') {
+      //  设置第一位
+      terms.terms = [(0, _util.getItemDefaultValue)(arr[0], defaultCacheValues.value)];
+    } else {
+      terms.terms = arr.map(function (item) {
+        return (0, _util.getItemDefaultValue)(item, defaultCacheValues.value);
+      });
+    }
+  };
+  var handleColumns = function handleColumns(columns) {
+    var columnsSearch = columns.filter(function (item) {
+      return item.hasOwnProperty('search') && Object.keys(item.search).length;
+    });
+    // 排序
+    var columnsSort = moveFirstElementsToFront(columnsSearch);
+    columnsSort.forEach(function (item, index) {
+      columnsMap.value[item.dataIndex] = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+        _sort_index: index
+      });
+    });
+    handleDefaultValue(columnsSort);
+    if (terms.terms.length === 0) {
+      // 高级模式处理数据
+      initValues();
+    }
+  };
+  (0, _vue.watchEffect)(function () {
+    handleColumns(props.columns);
+  });
+  return {
+    initValues: initValues,
+    columnsMap: columnsMap,
+    defaultCacheValues: defaultCacheValues
+  };
+};

package/lib/Search/hooks/useRouteQuery.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRouteQuery = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _vue = require("vue");
+var _vueRouter = require("vue-router");
+var _queue = new WeakMap();
+var useRouteQuery = exports.useRouteQuery = function useRouteQuery(name) {
+  var router = (0, _vueRouter.useRouter)();
+  var route = (0, _vueRouter.useRoute)();
+  var transformGet = function transformGet(value) {
+    return value;
+  };
+  var transformSet = function transformSet(value) {
+    return value;
+  };
+  if (!_queue.has(router)) _queue.set(router, new Map());
+  var _queriesQueue = _queue.get(router);
+  var query = route.query[name];
+  var _trigger;
+  var proxy = (0, _vue.customRef)(function (track, trigger) {
+    _trigger = trigger;
+    return {
+      get: function get() {
+        track();
+        return transformGet(query !== undefined ? query : undefined);
+      },
+      set: function set(v) {
+        v = transformSet(v);
+        if (query === v) return;
+        query = v === undefined ? undefined : v;
+        _queriesQueue.set(name, v === undefined ? undefined : v);
+        trigger();
+        (0, _vue.nextTick)(function () {
+          if (_queriesQueue.size === 0) return;
+          var newQueries = Object.fromEntries(_queriesQueue.entries());
+          _queriesQueue.clear();
+          var params = route.params,
+            query = route.query,
+            hash = route.hash;
+          router.replace({
+            params: params,
+            query: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, query), newQueries),
+            hash: hash
+          });
+        });
+      }
+    };
+  });
+  (0, _vue.watch)(function () {
+    return route.query[name];
+  }, function (v) {
+    if (query === transformGet(v)) return;
+    query = v;
+    _trigger();
+  }, {
+    flush: 'sync'
+  });
+  return proxy;
+};