@cmstops/pro-compo 3.9.0 → 3.9.1-harbin.0

package/es/appCenter/style/index.less

@@ -1,120 +1,120 @@
-.reference-btn {
-  padding: 12px 16px;
-  color: #5f5f5f;
-  border: none;
-  border-radius: 4px;
-}
-
-.apps-box-popover {
-  position: relative;
-  max-height: 600px;
-  padding: 10px;
-  overflow-y: scroll;
-}
-
-.app-title {
-  padding: 0 15px;
-  font-weight: bold;
-  font-size: 16px;
-}
-
-.ul-list {
-  width: 435px !important;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  text-align: center;
-  list-style: none;
-
-  .li_item {
-    position: relative;
-    float: left;
-    width: 85px;
-    height: 90px;
-    // margin-left: 16px;
-    margin: 13px 0;
-    text-align: center;
-
-    .icon-logo {
-      .svg-icon {
-        width: 4em;
-        height: 3.5em;
-      }
-    }
-
-    &:hover {
-      // transition: ease-out 0.2s;
-      // transform: scale(1.1);
-      background: rgba(0, 0, 0, 0.05);
-      border-radius: 4px;
-      cursor: pointer;
-
-      .icon-gengduo {
-        display: block;
-      }
-    }
-
-    .wrap_icon {
-      display: inline-block;
-      width: 70px;
-      margin-top: 6px;
-
-      .wrap_ {
-        .icon-logo {
-          width: 70px;
-          height: 50px;
-          margin-bottom: 4px;
-
-          img {
-            width: 50px;
-            max-width: 100%;
-            height: 50px;
-            max-height: 100%;
-            border-radius: 50%;
-          }
-        }
-
-        .shortcut-logo {
-          line-height: 77px;
-
-          img {
-            width: 35px;
-            height: 35px;
-          }
-        }
-
-        .icon_title {
-          width: 73px;
-          height: 20px;
-          overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-        }
-      }
-
-      .quick-add {
-        .icon-logo {
-          width: 40px;
-          height: 40px;
-          margin: 5px auto 9px;
-          text-align: center;
-          background-color: rgba(0, 0, 0, 0.12);
-          border-radius: 50%;
-
-          i {
-            color: rgba(0, 0, 0, 0.85);
-            font-size: 14px;
-            line-height: 40px;
-          }
-        }
-      }
-    }
-
-    .icon-gengduo {
-      position: absolute;
-      top: 2px;
-      right: 4px;
-      display: none;
-    }
-  }
-}
+.reference-btn {
+  padding: 12px 16px;
+  color: #5f5f5f;
+  border: none;
+  border-radius: 4px;
+}
+
+.apps-box-popover {
+  position: relative;
+  max-height: 600px;
+  padding: 10px;
+  overflow-y: scroll;
+}
+
+.app-title {
+  padding: 0 15px;
+  font-weight: bold;
+  font-size: 16px;
+}
+
+.ul-list {
+  width: 435px !important;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  text-align: center;
+  list-style: none;
+
+  .li_item {
+    position: relative;
+    float: left;
+    width: 85px;
+    height: 90px;
+    // margin-left: 16px;
+    margin: 13px 0;
+    text-align: center;
+
+    .icon-logo {
+      .svg-icon {
+        width: 4em;
+        height: 3.5em;
+      }
+    }
+
+    &:hover {
+      // transition: ease-out 0.2s;
+      // transform: scale(1.1);
+      background: rgba(0, 0, 0, 0.05);
+      border-radius: 4px;
+      cursor: pointer;
+
+      .icon-gengduo {
+        display: block;
+      }
+    }
+
+    .wrap_icon {
+      display: inline-block;
+      width: 70px;
+      margin-top: 6px;
+
+      .wrap_ {
+        .icon-logo {
+          width: 70px;
+          height: 50px;
+          margin-bottom: 4px;
+
+          img {
+            width: 50px;
+            max-width: 100%;
+            height: 50px;
+            max-height: 100%;
+            border-radius: 50%;
+          }
+        }
+
+        .shortcut-logo {
+          line-height: 77px;
+
+          img {
+            width: 35px;
+            height: 35px;
+          }
+        }
+
+        .icon_title {
+          width: 73px;
+          height: 20px;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .quick-add {
+        .icon-logo {
+          width: 40px;
+          height: 40px;
+          margin: 5px auto 9px;
+          text-align: center;
+          background-color: rgba(0, 0, 0, 0.12);
+          border-radius: 50%;
+
+          i {
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 14px;
+            line-height: 40px;
+          }
+        }
+      }
+    }
+
+    .icon-gengduo {
+      position: absolute;
+      top: 2px;
+      right: 4px;
+      display: none;
+    }
+  }
+}

package/es/baseFilter/component.js

@@ -1,5 +1,5 @@
-import { defineComponent, ref, computed, watch, nextTick, toRaw, openBlock, createElementBlock, Fragment, createElementVNode, withModifiers, createVNode, withCtx, renderList, createBlock, unref, normalizeStyle, createCommentVNode, renderSlot } from "vue";
-import { InputSearch, Select, Option, RangePicker } from "@arco-design/web-vue";
+import { defineComponent, ref, computed, watch, nextTick, toRaw, openBlock, createElementBlock, Fragment, createElementVNode, withModifiers, createVNode, withCtx, renderList, createBlock, renderSlot, unref, createTextVNode, toDisplayString, normalizeStyle, createCommentVNode } from "vue";
+import { InputGroup, Select, Option, Input, InputSearch, RangePicker, RadioGroup, Radio } from "@arco-design/web-vue";
 import _sfc_main$2 from "./components/filterItem.js";
 import _sfc_main$1 from "./components/FilterGroup.js";
 const _sfc_main = defineComponent({
@@ -37,9 +37,11 @@ const _sfc_main = defineComponent({
       });
       return _columns;
     });
-    const getOptions = (item) => {
-      return item.options ? item.options : [];
-    };
+    const getOptions = computed(() => {
+      return (item) => {
+        return item.options ? item.options : [];
+      };
+    });
     const hasValue = computed(() => {
       return (key) => {
         var _a, _b;
@@ -76,7 +78,10 @@ const _sfc_main = defineComponent({
           _form[column.range] = rangeTemp[column.range];
         } else if (column.component === "select") {
           _form[column.key] = column.defaultValue || null;
-        } else {
+        } else if (column.component === "input-group") {
+          _form[column.selectKey] = column.selectDefaultValue || "";
+          _form[column.inputKey] = column.inputDefaultValue || "";
+        } else if (column.component) {
           _form[column.key] = column.defaultValue || "";
         }
       });
@@ -178,17 +183,48 @@ const _sfc_main = defineComponent({
                 active: hasValue.value(item.key)
               }, {
                 default: withCtx(() => [
-                  item.component === "input" ? (openBlock(), createBlock(unref(InputSearch), {
-                    key: 0,
+                  item.slot ? renderSlot(_ctx.$slots, item.slot, { key: 0 }) : item.component === "input-group" ? (openBlock(), createBlock(unref(InputGroup), { key: 1 }, {
+                    default: withCtx(() => [
+                      createVNode(unref(Select), {
+                        modelValue: form.value[item.selectKey],
+                        "onUpdate:modelValue": ($event) => form.value[item.selectKey] = $event,
+                        "default-active-first-option": "",
+                        style: { "width": "100px" }
+                      }, {
+                        default: withCtx(() => [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(item.selectOptions, (option, idx) => {
+                            return openBlock(), createBlock(unref(Option), {
+                              key: idx,
+                              value: option.value
+                            }, {
+                              default: withCtx(() => [
+                                createTextVNode(toDisplayString(option.label), 1)
+                              ]),
+                              _: 2
+                            }, 1032, ["value"]);
+                          }), 128))
+                        ]),
+                        _: 2
+                      }, 1032, ["modelValue", "onUpdate:modelValue"]),
+                      createVNode(unref(Input), {
+                        modelValue: form.value[item.inputKey],
+                        "onUpdate:modelValue": ($event) => form.value[item.inputKey] = $event,
+                        placeholder: item.placeholder ? item.placeholder : `\u8BF7\u8F93\u5165${item.inputLabel}`,
+                        style: { "width": "180px" }
+                      }, null, 8, ["modelValue", "onUpdate:modelValue", "placeholder"])
+                    ]),
+                    _: 2
+                  }, 1024)) : item.component === "input" ? (openBlock(), createBlock(unref(InputSearch), {
+                    key: 2,
                     modelValue: form.value[item.key],
                     "onUpdate:modelValue": ($event) => form.value[item.key] = $event,
                     style: normalizeStyle({ width: styleWidth(columnsMap.value[item.key]) }),
                     "allow-clear": "",
                     size: "medium",
-                    placeholder: `\u8BF7\u8F93\u5165${item.label}`
+                    placeholder: item.placeholder ? item.placeholder : `\u8BF7\u8F93\u5165${item.label}`
                   }, null, 8, ["modelValue", "onUpdate:modelValue", "style", "placeholder"])) : createCommentVNode("v-if", true),
                   item.component === "select" ? (openBlock(), createBlock(unref(Select), {
-                    key: 1,
+                    key: 3,
                     modelValue: form.value[item.key],
                     "onUpdate:modelValue": ($event) => form.value[item.key] = $event,
                     "popup-container": "#base-filter-popup-container",
@@ -196,13 +232,13 @@ const _sfc_main = defineComponent({
                     "allow-search": item.allowSearch,
                     "default-active-first-option": false,
                     style: normalizeStyle({ width: styleWidth(columnsMap.value[item.key]) }),
-                    placeholder: `\u8BF7\u9009\u62E9${item.label}`,
+                    placeholder: item.placeholder ? item.placeholder : `\u8BF7\u9009\u62E9${item.label}`,
                     onSearch: ($event) => handleSelectSearch($event, item),
                     onPopupVisibleChange: ($event) => handleSelectPopupChange($event, item),
                     onChange: ($event) => handleSelectChange($event, item)
                   }, {
                     default: withCtx(() => [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(getOptions(item), (opt) => {
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(getOptions.value(item), (opt) => {
                         return openBlock(), createBlock(unref(Option), {
                           key: opt.value,
                           label: opt.label,
@@ -213,7 +249,7 @@ const _sfc_main = defineComponent({
                     _: 2
                   }, 1032, ["modelValue", "onUpdate:modelValue", "allow-search", "style", "placeholder", "onSearch", "onPopupVisibleChange", "onChange"])) : createCommentVNode("v-if", true),
                   item.component === "range-picker" ? (openBlock(), createBlock(unref(RangePicker), {
-                    key: 2,
+                    key: 4,
                     modelValue: form.value[item.key].range,
                     "onUpdate:modelValue": ($event) => form.value[item.key].range = $event,
                     style: normalizeStyle({ width: styleWidth(form.value[item.key]) }),
@@ -224,7 +260,28 @@ const _sfc_main = defineComponent({
                     "popup-container": "#base-filter-popup-container",
                     onClick: _cache[1] || (_cache[1] = withModifiers(() => {
                     }, ["stop"]))
-                  }, null, 8, ["modelValue", "onUpdate:modelValue", "style"])) : createCommentVNode("v-if", true)
+                  }, null, 8, ["modelValue", "onUpdate:modelValue", "style"])) : createCommentVNode("v-if", true),
+                  item.component === "radio" ? (openBlock(), createBlock(unref(RadioGroup), {
+                    key: 5,
+                    modelValue: form.value[item.key],
+                    "onUpdate:modelValue": ($event) => form.value[item.key] = $event,
+                    type: "button"
+                  }, {
+                    default: withCtx(() => [
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(item.options || [], (option, idx) => {
+                        return openBlock(), createBlock(unref(Radio), {
+                          key: idx,
+                          value: option.value
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(option.label), 1)
+                          ]),
+                          _: 2
+                        }, 1032, ["value"]);
+                      }), 128))
+                    ]),
+                    _: 2
+                  }, 1032, ["modelValue", "onUpdate:modelValue"])) : createCommentVNode("v-if", true)
                 ]),
                 _: 2
               }, 1032, ["active"]);

package/es/baseFilter/components/FilterGroup.js

@@ -115,7 +115,7 @@ const _sfc_main = defineComponent({
             }, {
               default: withCtx(() => [
                 createElementVNode("span", _hoisted_3, [
-                  _cache[1] || (_cache[1] = createTextVNode(" \u66F4\u591A\u7B5B\u9009 ")),
+                  _cache[1] || (_cache[1] = createTextVNode(" \u66F4\u591A\u7B5B\u9009 ", -1)),
                   createVNode(unref(IconCaretDown))
                 ])
               ]),

package/es/baseFilter/style/filterGroup.less

@@ -1,53 +1,53 @@
-// FilterGroup 内部样式
-.filter-view-container {
-  display: flex;
-  // gap: 10px;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  margin-bottom: 10px;
-  font-size: 14px;
-
-  .more-btn {
-    .right-prefix {
-      display: flex;
-      gap: 10px;
-      align-items: center;
-    }
-
-    .filter-pannel {
-      z-index: 1002;
-      display: flex;
-      gap: 10px;
-      padding: 10px;
-      background-color: white;
-      border-radius: 6px;
-      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-    }
-  }
-
-  .filter-content {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    justify-content: space-between;
-
-    .left {
-      display: flex;
-      flex: 1;
-      gap: 10px;
-      width: 100px;
-      overflow: hidden;
-      background-color: #fff;
-    }
-
-    .right {
-      display: flex;
-      flex-wrap: nowrap;
-      align-items: center;
-      height: 100%;
-      padding-left: 20px;
-      background: white;
-    }
-  }
-}
+// FilterGroup 内部样式
+.filter-view-container {
+  display: flex;
+  // gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 10px;
+  font-size: 14px;
+
+  .more-btn {
+    .right-prefix {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+
+    .filter-pannel {
+      z-index: 1002;
+      display: flex;
+      gap: 10px;
+      padding: 10px;
+      background-color: white;
+      border-radius: 6px;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .filter-content {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+
+    .left {
+      display: flex;
+      flex: 1;
+      gap: 10px;
+      width: 100px;
+      overflow: hidden;
+      background-color: #fff;
+    }
+
+    .right {
+      display: flex;
+      flex-wrap: nowrap;
+      align-items: center;
+      height: 100%;
+      padding-left: 20px;
+      background: white;
+    }
+  }
+}

package/es/baseFilter/style/index.less

@@ -1,45 +1,45 @@
-@import './filterGroup.less';
-
-.base-filter-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .left {
-    display: flex;
-    align-items: center;
-
-    .form-ul {
-      display: flex;
-      align-items: center;
-    }
-
-    .filter-item-view {
-      margin-right: 1rem;
-
-      &.value {
-        .arco-picker,
-        .arco-picker-input-active input,
-        .arco-input-search,
-        .arco-select-view-single,
-        .arco-icon-hover,
-        .arco-icon-hover::before {
-          background-color: rgb(var(--primary-1));
-        }
-
-        .arco-picker input,
-        .arco-input-search,
-        .arco-select-view-single,
-        .arco-select-view-suffix,
-        .arco-picker-separator,
-        .arco-picker-suffix-icon,
-        .arco-icon-hover {
-          color: rgb(var(--primary-6));
-        }
-      }
-    }
-  }
-
-  .right {
-  }
-}
+@import './filterGroup.less';
+
+.base-filter-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .left {
+    display: flex;
+    align-items: center;
+
+    .form-ul {
+      display: flex;
+      align-items: center;
+    }
+
+    .filter-item-view {
+      margin-right: 1rem;
+
+      &.value {
+        .arco-picker,
+        .arco-picker-input-active input,
+        .arco-input-search,
+        .arco-select-view-single,
+        .arco-icon-hover,
+        .arco-icon-hover::before {
+          background-color: rgb(var(--primary-1));
+        }
+
+        .arco-picker input,
+        .arco-input-search,
+        .arco-select-view-single,
+        .arco-select-view-suffix,
+        .arco-picker-separator,
+        .arco-picker-suffix-icon,
+        .arco-icon-hover {
+          color: rgb(var(--primary-6));
+        }
+      }
+    }
+  }
+
+  .right {
+  }
+}

package/es/colorPalette/style/index.less

@@ -1,44 +1,44 @@
-@radio-button-size: 32px;
-
-.color-palette-container {
-  .color-radio-group {
-    overflow: hidden;
-
-    .arco-radio-button {
-      position: relative;
-      width: @radio-button-size;
-      height: @radio-button-size;
-      padding: 0;
-      overflow: hidden !important;
-      font-size: 0 !important;
-      background: transparent !important;
-      border-width: 0 !important;
-      box-shadow: none !important;
-
-      &.arco-radio-checked {
-        &::after {
-          position: absolute;
-          top: 7px;
-          left: 12px;
-          box-sizing: content-box;
-          width: 5px;
-          height: 11px;
-          border: 2px solid #fff;
-          border-top: 0;
-          border-left: 0;
-          transform: rotate(45deg) scaleY(1);
-          transform-origin: center;
-          transition: transform 0.15s ease-in 0.05s;
-          content: '';
-        }
-      }
-    }
-  }
-
-  .color-picker-input {
-    width: @radio-button-size;
-    height: @radio-button-size;
-    padding: 0 2px;
-    border: none;
-  }
-}
+@radio-button-size: 32px;
+
+.color-palette-container {
+  .color-radio-group {
+    overflow: hidden;
+
+    .arco-radio-button {
+      position: relative;
+      width: @radio-button-size;
+      height: @radio-button-size;
+      padding: 0;
+      overflow: hidden !important;
+      font-size: 0 !important;
+      background: transparent !important;
+      border-width: 0 !important;
+      box-shadow: none !important;
+
+      &.arco-radio-checked {
+        &::after {
+          position: absolute;
+          top: 7px;
+          left: 12px;
+          box-sizing: content-box;
+          width: 5px;
+          height: 11px;
+          border: 2px solid #fff;
+          border-top: 0;
+          border-left: 0;
+          transform: rotate(45deg) scaleY(1);
+          transform-origin: center;
+          transition: transform 0.15s ease-in 0.05s;
+          content: '';
+        }
+      }
+    }
+  }
+
+  .color-picker-input {
+    width: @radio-button-size;
+    height: @radio-button-size;
+    padding: 0 2px;
+    border: none;
+  }
+}