ct-component-plus 2.2.2 → 2.2.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ct-component-plus",
   "private": false,
-  "version": "2.2.2",
+  "version": "2.2.3",
   "type": "module",
   "main": "packages/components/index.js",
   "files": [

package/packages/components/search-box/index.js

@@ -6,6 +6,7 @@ import CtDatePicker from '../date-picker';
 import CtCascader from '../cascader';
 import CtYearSelect from '../year-select';
 import CtRadio from '../radio';
+import CtPagingSelect from '../paging-select';
 
 export const searchComponents = {
   CtInput,
@@ -13,7 +14,8 @@ export const searchComponents = {
   CtDatePicker,
   CtCascader,
   CtYearSelect,
-  CtRadio
+  CtRadio,
+  CtPagingSelect,
 }
 
 /* istanbul ignore next */

package/packages/components/search-box/src/search-box.vue

@@ -2,48 +2,29 @@
   <div :class="[ns.b()]">
     <div :class="[ns.e('container')]">
       <div :class="[ns.e('list')]">
-        <div
-          v-for="(item, index) in searchList"
-          :class="[
-            ns.e('item'),
-            ...getComponentClass(item),
-            ns.is('outer-border', outerBorder),
-          ]"
-          :key="item.param || index"
-          :style="{ ...getComponentStyle(item) }"
-          @click="clickItem(item)"
-        >
+        <div v-for="(item, index) in searchList" :class="[
+          ns.e('item'),
+          ...getComponentClass(item),
+          ns.is('outer-border', outerBorder),
+        ]" :key="item.param || index" :style="{ ...getComponentStyle(item) }" @click="clickItem(item)">
           <slot v-bind="getComponentSlotScope(item)">
             <slot name="item-before" v-bind="getComponentSlotScope(item)">
             </slot>
-            <span
-              :class="[
-                ns.e('item-label'),
-                ns.is('required', item.required),
-                ns.is('outer-border', outerBorder),
-              ]"
-            >
-              <el-tooltip
-                :disabled="judgeIsHideLabelTooltip(item)"
-                class="box-item"
-                effect="dark"
-                :content="item.label"
-                placement="bottom"
-              >
+            <span :class="[
+              ns.e('item-label'),
+              ns.is('required', item.required),
+              ns.is('outer-border', outerBorder),
+            ]">
+              <el-tooltip :disabled="judgeIsHideLabelTooltip(item)" class="box-item" effect="dark" :content="item.label"
+                placement="bottom">
                 <span>{{ item.label }}</span>
               </el-tooltip>
               <span :class="[ns.is('required')]" v-if="!outerBorder">：</span>
             </span>
             <div :class="[ns.e('item-component')]">
-              <slot
-                :name="item.componentName || item.param"
-                v-bind="getComponentSlotScope(item)"
-              >
-                <component
-                  :is="getComponent(item.type)"
-                  v-model="searchParamsCurrent[item.param]"
-                  v-bind="getComponentProps(item)"
-                >
+              <slot :name="item.componentName || item.param" v-bind="getComponentSlotScope(item)">
+                <component :is="getComponent(item.type)" v-model="searchParamsCurrent[item.param]"
+                  v-bind="getComponentProps(item)">
                 </component>
               </slot>
             </div>
@@ -52,9 +33,7 @@
         </div>
         <div :class="[ns.e('buttons')]">
           <slot name="solt-search">
-            <ct-button type="border-plain" @click="resetData" v-if="haveReset"
-              >重置</ct-button
-            >
+            <ct-button type="border-plain" @click="resetData" v-if="haveReset">重置</ct-button>
             <ct-button type="border" @click="doSearch">{{
               searchBtnName
             }}</ct-button>
@@ -117,7 +96,15 @@ const getComponentStyle = (item) => {
   return style;
 };
 const componentAll = computed(() => {
-  const { CtInput, CtSelect, CtDatePicker, CtCascader, CtYearSelect, CtRadio } =
+  const {
+    CtInput,
+    CtSelect,
+    CtDatePicker,
+    CtCascader,
+    CtYearSelect,
+    CtRadio,
+    CtPagingSelect,
+  } =
     searchComponents;
   const componentMap = {
     0: CtInput,
@@ -127,6 +114,7 @@ const componentAll = computed(() => {
     12: CtYearSelect,
     13: "div",
     20: CtRadio,
+    22: CtPagingSelect,
     ...userDefinedSearchComponent,
   };
   return componentMap;
@@ -193,34 +181,36 @@ defineExpose({
   buriedParams,
   doSearch,
 });
-onMounted(() => {});
+onMounted(() => { });
 </script>
 <style lang="less">
 .ct-search-box {
   --ct-search-box-item-margin-right: 16px;
   --ct-search-box-item-margin-top: 14px;
+
   .el-input {
     --ct-input-default-width: auto;
   }
+
   &__list {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     margin-right: calc(-1 * var(--ct-search-box-item-margin-right));
     margin-top: calc(-1 * var(--ct-search-box-item-margin-top));
-    > * {
+
+    >* {
       margin-right: var(--ct-search-box-item-margin-right);
       margin-top: var(--ct-search-box-item-margin-top);
     }
   }
+
   &__item {
     display: flex;
     align-items: center;
-    width: calc(
-      (100% - v-bind(rowNumber) * var(--ct-search-box-item-margin-right)) /
-        v-bind(rowNumber)
-    );
+    width: calc((100% - v-bind(rowNumber) * var(--ct-search-box-item-margin-right)) / v-bind(rowNumber));
     --ct-search-box-item-component-width: 100%;
+
     &.is-outer-border {
       --ct-font-size: 13px;
       --el-font-size-base: var(--ct-font-size, 13px);
@@ -231,45 +221,55 @@ onMounted(() => {});
       padding-left: 14px;
       box-shadow: 0 0 0 1px var(--ct-search-box-border-color);
       border-radius: var(--ct-border-radius);
+
       &:hover {
         --ct-search-box-border-color: var(--ct-color-grey-sub);
       }
+
       &:focus-within {
         --ct-search-box-border-color: var(--ct-color-primary);
       }
+
       .el-input__wrapper,
       .el-select__wrapper,
       .ct-year-select__wrapper {
-        --el-select-input-focus-border-color: var(
-          --ct-search-box-inner-border-color
-        );
+        --el-select-input-focus-border-color: var(--ct-search-box-inner-border-color);
         box-shadow: 0 0 0 1px var(--ct-search-box-inner-border-color) !important;
       }
     }
+
     .ct-radio {
       padding: 0 var(--ct-component-inner-padding);
+
       .el-radio {
         margin-right: 12px;
+
         &:last-child {
           margin-right: 0;
         }
       }
     }
+
     &-label {
       line-height: 1;
+
       &.is-outer-border {
         color: var(--ct-color-grey-sub);
       }
     }
+
     &-component {
       flex: 1;
-      > * {
+
+      >* {
         width: var(--ct-search-box-item-component-width) !important;
       }
     }
   }
+
   &__buttons {
     margin-left: auto;
+
     button {
       width: 96px;
       padding: 0;