@elementplus-kit/uikit 1.7.0 → 1.8.0

package/components/search/src/index.tsx

@@ -1,27 +1,39 @@
-import { ref, defineComponent, onMounted, onUnmounted, nextTick, watch } from "vue";
+import {
+  ref,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  type PropType,
+  type ExtractPropTypes,
+} from "vue";
 
 import { CForm, CDrawer } from "@elementplus-kit/uikit";
 import { ArrowUpBold } from "@element-plus/icons-vue";
 import "../style/index.scss";
 
-export default defineComponent({
-  props: {
-    modelValue: {
-      type: Object,
-      default: {},
-    },
-    formOptions: {
-      type: Array,
-      default: () => [],
-    },
-    isDrawer: {
-      type: Boolean,
-      default: false,
-    },
+import { FormOptions } from "../../form/src/type.ts";
+
+export type SearchAttrs = ExtractPropTypes<typeof searchAttrs>;
+
+const searchAttrs = {
+  modelValue: {
+    type: Object,
+    default: {},
   },
+  formOptions: {
+    type: Array as PropType<FormOptions>,
+    default: () => [],
+  },
+  isDrawer: {
+    type: Boolean,
+    default: false,
+  },
+}
+export default defineComponent({
+  props: searchAttrs,
   emits: ["update:modelValue", "search", "reset", "close"],
 
-  setup(props, { emit, slots, attrs, expose }) {
+  setup(props: SearchAttrs, { emit, slots, attrs, expose }) {
     // 自己的 slot
     const slotsList = ["btn-left", "btn-right"];
     // 解析 attrs 中的事件
@@ -207,8 +219,9 @@ export default defineComponent({
               {slots["arrow-left"]?.()}
               {showCount.value < props.formOptions?.length && (
                 <div
-                  className={`c-search-simple-icon ${showSearchForm.value ? "icon-rotate" : ""
-                    }`}
+                  className={`c-search-simple-icon ${
+                    showSearchForm.value ? "icon-rotate" : ""
+                  }`}
                   onClick={handleShow}
                 >
                   <el-icon className="el-icon c-search-icon">
@@ -216,21 +229,20 @@ export default defineComponent({
                   </el-icon>
                 </div>
               )}
-              {slots["search-btn"]
-                ? slots["search-btn"]()
-                : (
-                  <>
-                    {slots["btn-left"]?.()}
-                    <el-button type="primary" onClick={handleSearch}>
-                      搜索
-                    </el-button>
-                    <el-button type="primary" onClick={handleReset}>
-                      重置
-                    </el-button>
-                    {slots["btn-right"]?.()}
-                  </>
-                )
-              }
+              {slots["search-btn"] ? (
+                slots["search-btn"]()
+              ) : (
+                <>
+                  {slots["btn-left"]?.()}
+                  <el-button type="primary" onClick={handleSearch}>
+                    搜索
+                  </el-button>
+                  <el-button type="primary" onClick={handleReset}>
+                    重置
+                  </el-button>
+                  {slots["btn-right"]?.()}
+                </>
+              )}
             </div>
           </div>
 
@@ -246,7 +258,7 @@ export default defineComponent({
                   inline
                   model={props.modelValue}
                   formOptions={props.formOptions.filter(
-                    (item, index) => index >= showCount.value
+                    (item, index) => index >= showCount.value,
                   )}
                   ref="formRef"
                 >
@@ -271,7 +283,7 @@ export default defineComponent({
                 col={12}
                 model={props.modelValue}
                 formOptions={props.formOptions.filter(
-                  (item, index) => index >= showCount.value
+                  (item, index) => index >= showCount.value,
                 )}
                 ref="formRef"
               >

package/components/search/src/type.ts

@@ -0,0 +1,2 @@
+export type { SearchAttrs as SearchProps } from "./index.tsx";
+export default "./index.tsx";

package/components/table/index.ts

@@ -1,4 +1,2 @@
-import Table from "./src/index";
-export * from "./src/index";
-export { Table };
-export default Table;
+export * from "./src/type.ts";
+export default "./src/index.ts";

package/components/table/src/index.ts

@@ -14,7 +14,7 @@ import {
   indexColumn,
 } from "./constants.ts";
 import { isArray, isObject, isFunction } from "lodash-es";
-const propsAttrs = {
+const tableAttrs = {
   module: {
     type: Object,
     default: () => {},
@@ -49,14 +49,15 @@ const propsAttrs = {
   },
 };
 
-export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+// 类型处理
+export type TableAttrs = ExtractPropTypes<typeof tableAttrs>;
 
 export default defineComponent({
-  props: propsAttrs,
+  props: tableAttrs,
   // emits: eventList,
 
   // attrs, emit会继承, slots需要设置
-  setup(props: PropsAttrs, { attrs, emit, slots, expose }) {
+  setup(props: TableAttrs, { attrs, emit, slots, expose }) {
     // 暴露elTable组件上的方法
     const vm = getCurrentInstance(); // 获取虚拟DOM实例
     const cTableFnRef = (el) => {

package/components/table/src/type.ts

@@ -0,0 +1,19 @@
+import { type ExtractPropTypes } from "vue";
+import type { TableColumnCtx } from "element-plus";
+import elTableDefaults from "element-plus/es/components/table/src/table/defaults";
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never; // 展开类型工具
+
+import { type TableAttrs } from "./index.ts";
+
+// 表格属性
+type ElTableProps = ExtractPropTypes<typeof elTableDefaults>;
+export type TableProps = Expand<Partial<TableAttrs>> &
+  Expand<Partial<ElTableProps>>;
+
+// 表格项属性
+export type TableColumnProps = {
+  vIf?: (params: any) => boolean;
+  render?: (scope: any) => any;
+  options?: Array<{ label: string; value: any }>;
+  children?: Array<TableColumnProps>;
+} & Expand<Partial<TableColumnCtx>>;

package/dist/index.css

@@ -0,0 +1 @@
+@charset "UTF-8";.c-form.el-form--inline .el-select{--el-select-width: 220px}.search-btn{margin-right:20px;margin-left:auto}.c-search{position:relative;height:50px}.c-search .c-search-simple{display:flex;justify-content:space-between}.c-search .c-search-simple-form{flex:1;overflow:auto;scrollbar-width:none}.c-search .c-simple-form-container{display:inline-block}.c-search .c-simple-form-container>.c-form{white-space:nowrap}.c-search .c-search-simple-btn{display:flex;margin-left:auto}.c-search .c-search-simple-icon{display:flex;justify-content:center;align-items:center;cursor:pointer;height:32px;width:32px;margin-right:10px;border-radius:4px;background-color:#409eff;transition:all .2s}.c-search .c-search-simple-icon:hover{background-color:#79bbff}.c-search .c-search-simple-icon:active{background-color:#337ecc}.c-search .c-search-icon{color:#fff;transition:all .2s}.c-search .icon-rotate{background-color:#337ecc}.c-search .icon-rotate .c-search-icon{transform:rotate(180deg)}.c-search .c-search-form{width:100%;position:absolute;top:50px;left:0;overflow:hidden;z-index:10;background-color:#fff}.search-form-transition-enter-active,.search-form-transition-leave-active{transition:all .3s ease;overflow:hidden;max-height:500px}.search-form-transition-enter-from,.search-form-transition-leave-to{max-height:0;opacity:0;padding-top:0;padding-bottom:0}.el-button+.el-dropdown{margin-left:10px}