@elementplus-kit/uikit 1.9.0 → 1.11.0

package/components/button/src/constants.ts

@@ -1,50 +0,0 @@
-export const typeActiveMap = {
-  reset: {
-    name: "重置",
-    type: "info",
-  },
-  search: {
-    name: "查询",
-    type: "primary",
-  },
-  submit: {
-    name: "提交",
-    type: "primary",
-  },
-  save: {
-    name: "保存",
-    type: "primary",
-  },
-  create: {
-    name: "新增",
-    type: "primary",
-  },
-  delete: {
-    name: "删除",
-    type: "danger",
-  },
-  edit: {
-    name: "编辑",
-    type: "primary",
-  },
-  view: {
-    name: "查看",
-    type: "primary",
-  },
-  publish: {
-    name: "发布",
-    type: "primary",
-  },
-  import: {
-    name: "导入",
-    type: "primary",
-  },
-  export: {
-    name: "导出",
-    type: "primary",
-  },
-  exportAll: {
-    name: "导出全部",
-    type: "primary",
-  },
-};

package/components/button/src/index.ts

@@ -1,17 +1,11 @@
 import { defineComponent, h, type PropType, type ExtractPropTypes } from "vue";
-import {
-  ElButton,
-  ElDropdown,
-  ElDropdownMenu,
-  ElDropdownItem,
-  buttonProps,
-} from "element-plus";
+import { ElButton, ElDropdown, ElDropdownItem } from "element-plus";
 
 import "../style/index.scss";
-import { has, isBoolean, isFunction, isArray } from "lodash-es";
-import { typeActiveMap } from "./constants.ts";
+import { has, isBoolean, isFunction, isArray, isNumber } from "lodash-es";
 
 import { type BtnOptions } from "./type.ts";
+import { isString } from "element-plus/es/utils/types.mjs";
 const buttonAttrs = {
   params: {
     // 用于验证自定义函数的外部数据
@@ -22,15 +16,10 @@ const buttonAttrs = {
   permit: {
     type: Function,
   },
-  // 折叠
+  // 折叠与数量
   fold: {
-    type: Boolean,
-    default: false,
-  },
-  // 折叠数量
-  foldNum: {
-    type: Number,
-    default: 0,
+    type: [Number, String, Boolean, undefined],
+    default: undefined,
   },
   btnOptions: {
     type: Array as PropType<BtnOptions[]>,
@@ -184,11 +173,22 @@ export default defineComponent({
       const dropdownList = []; // 不折叠的按钮
       const dropdownMain = []; // 下拉占位
       const dropdownItemList = []; // 折叠的按钮
-
+      let foldSun = 1;
+      if (!isBoolean(props.fold)) {
+        const s = props.fold * 1;
+        console.log("🚀 ~ createDropdown ~ s:", s);
+        if (s) {
+          if (isNumber(s)) {
+            foldSun = props.fold;
+          } else {
+            console.error("fold 类型错误");
+          }
+        }
+      }
       finalList.map((itm, idx) => {
-        if (idx < props.foldNum) {
+        if (idx < foldSun - 1) {
           dropdownList.push(itm);
-        } else if (idx === props.foldNum) {
+        } else if (idx === foldSun - 1) {
           dropdownMain.push(itm);
         } else {
           dropdownItemList.push(itm);
@@ -255,7 +255,16 @@ export default defineComponent({
     const render = () => {
       const finalList = filterOptions(); // 最终列表
       // 是否折叠 折叠
-      if (props.fold) {
+      console.log("🚀 ~ render ~ props:", props);
+      let isFold = false;
+      if (isBoolean(props.fold)) {
+        isFold = props.fold;
+      } else if (isNumber(props.fold)) {
+        isFold = true;
+      } else if (isString(props.fold)) {
+        isFold = true;
+      }
+      if (isFold) {
         return createDropdown(finalList);
       } else {
         // 不折叠

package/components/button/src/type.ts

@@ -8,6 +8,8 @@ export type BtnOptions = Expand<
   {
     label: string;
     alias: string;
+    type: string;
+    icon?: any;
     permit?: string[];
     vIf?: (params: any) => boolean;
     disable?: boolean | ((params: any) => boolean);

package/components/dialog/src/index.ts

@@ -1,9 +1,6 @@
 import {
   defineComponent,
-  ref,
   h,
-  computed,
-  toRefs,
   type ExtractPropTypes,
 } from "vue";
 import { ElDialog } from "element-plus";
@@ -15,18 +12,9 @@ export type DialogAttrs = ExtractPropTypes<typeof dialogAttrs>;
 
 export default defineComponent({
   name: `${prefix}Dialog`,
-  // props: propsAttrs,
-  // emits: eventList,
 
   // attrs, emit会继承, slots需要设置
   setup(props: DialogAttrs, { attrs, emit, slots, expose }) {
-    // const dialogRef = ref();
-
-    // 暴露方法
-    // expose({
-    //   dialogRef,
-    // });
-
     // 属性处理
     const getAttrs = () => {
       const obj = {
@@ -40,11 +28,10 @@ export default defineComponent({
       return h(
         ElDialog,
         {
-          // ref: dialogRef,
           ...getAttrs(),
           class: "c-dialog",
         },
-        slots
+        slots,
       );
     };
 

package/components/dictLabel/index.ts

@@ -1,4 +1 @@
-import DictLabel from "./src/index.vue";
-export * from "./src/index.vue";
-export { DictLabel };
-export default DictLabel;
+export { default as CDictLabel } from "./src/index.vue";

package/components/dictLabel/src/index.vue

@@ -2,20 +2,30 @@
     {{ label }}
 </template>
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed, type PropType } from 'vue'
 const props = defineProps({
+    // 字典选项
     options: {
-        type: Array,
+        type: Array as PropType<{ value: string; label: string }[]>,
         default: () => []
     },
+    // 字典值
     value: {
-        type: String as PropType<any>,
         default: ''
     },
+    // 是否将value转换为字符串进行匹配
+    stringify: {
+        type: Boolean,
+        default: false
+    }
 })
 const label = computed(() => {
-    // 处理value为数字的情况 后端字典都是字符串
-    const item = props.options?.find((item) => item.value == props.value.toString());
-    return item?.label || props.value;
-});
+    const item = props.options?.find((item) => {
+        if (!props.stringify) {
+            return item.value === props.value
+        }
+        return item.value === props.value?.toString()
+    })
+    return item?.label || props.value
+})
 </script>

package/components/drawer/src/index.ts

@@ -14,18 +14,8 @@ const drawerAttrs = {};
 export type DrawerAttrs = ExtractPropTypes<typeof drawerAttrs>;
 
 export default defineComponent({
-  // props: propsAttrs,
-  // emits: eventList,
-
   // attrs, emit会继承, slots需要设置
   setup(props: DrawerAttrs, { attrs, emit, slots, expose }) {
-    // const drawerRef = ref();
-
-    // 暴露方法
-    // expose({
-    //   drawerRef,
-    // });
-
     // 属性处理
     const getAttrs = () => {
       const obj = {
@@ -39,11 +29,10 @@ export default defineComponent({
       return h(
         ElDrawer,
         {
-          // ref: drawerRef,
           ...getAttrs(),
           class: "c-drawer",
         },
-        slots
+        slots,
       );
     };
 

package/components/form/src/FormItem.ts

@@ -192,15 +192,17 @@ export default defineComponent({
             ...handleAttrs(),
             ...handleEvents(),
           },
-          () => {
-            return options?.value?.map((item) => {
-              return h(ElOption, {
-                ...item,
-                label: item.label,
-                value: item.value,
-                key: item.value,
+          {
+            default: () => {
+              return options?.value?.map((item) => {
+                return h(ElOption, {
+                  ...item,
+                  label: item.label,
+                  value: item.value,
+                  key: item.value,
+                });
               });
-            });
+            },
           },
         );
       },

package/components/form/src/index.ts

@@ -63,8 +63,8 @@ export default defineComponent({
     const { model, formOptions, readonly, gutter, col } = toRefs(props);
 
     // 暴露elForm组件上的方法
-    const vm = getCurrentInstance(); // 获取虚拟DOM实例
-    const cFormFnRef = (el) => {
+    const vm: any = getCurrentInstance(); // 获取虚拟DOM实例
+    const cFormFnRef = (el: any) => {
       if (!el) return;
       vm.exposed = el; // 设置暴露对象
       vm.exposeProxy = el; // 设置代理暴露对象
@@ -78,7 +78,7 @@ export default defineComponent({
       () =>
         ["", 0].includes(gutter?.value) ||
         col?.value ||
-        formOptions?.value.some((item) => has(item, "col"))
+        formOptions?.value.some((item) => has(item, "col")),
     );
 
     // 渲染 row
@@ -95,7 +95,7 @@ export default defineComponent({
           },
           {
             default: () => formItemVdom,
-          }
+          },
         );
       } else {
         return formItemVdom;
@@ -161,14 +161,14 @@ export default defineComponent({
               span: has(item, "col")
                 ? item.col
                 : col?.value
-                ? col?.value
-                : isLayout.value
-                ? 8
-                : undefined,
+                  ? col?.value
+                  : isLayout.value
+                    ? 8
+                    : undefined,
             },
             {
               default: () => (colSlot ? colSlot() : rFormItem()),
-            }
+            },
           );
         } else {
           return rFormItem();
@@ -188,7 +188,7 @@ export default defineComponent({
         },
         {
           default: () => renderRow(),
-        }
+        },
       );
     };
 

package/components/form/src/utils.ts

@@ -1,4 +1,4 @@
-// 字符串转大驼峰
-export const formatEventName = (name: string) => {
-  return name.replace(/(?:^|-)(\w)/g, (_, c) => c.toUpperCase())
-}
+// 字符串转大驼峰
+export const formatEventName = (name: string) => {
+  return name.replace(/(?:^|-)(\w)/g, (_, c) => c.toUpperCase());
+};

package/components/index.ts

@@ -1,7 +1,8 @@
-export * from "./table/index.ts";
-export * from "./form/index.ts";
-export * from "./pagination/index.ts";
-export * from "./dialog/index.ts";
-export * from "./drawer/index.ts";
-export * from "./search/index.ts";
-export * from "./button/index.ts";
+export * from "./table/index.ts"; // 表格
+export * from "./form/index.ts"; // 表单
+export * from "./pagination/index.ts"; // 分页
+export * from "./dialog/index.ts"; // 弹窗
+export * from "./drawer/index.ts"; // 抽屉
+export * from "./search/index.ts"; // 搜索
+export * from "./button/index.ts"; // 按钮
+export * from "./dictLabel/index.ts"; // 字典标签

package/components/pagination/src/index.ts

@@ -15,18 +15,8 @@ const paginationAttrs = {};
 export type PaginationAttrs = ExtractPropTypes<typeof paginationAttrs>;
 
 export default defineComponent({
-  // props: paginationAttrs,
-  // emits: eventList,
-
   // attrs, emit会继承, slots需要设置
   setup(props: PaginationAttrs, { attrs, emit, slots, expose }) {
-    // const pageRef = ref();
-
-    // 暴露方法
-    // expose({
-    //   pageRef,
-    // });
-
     // 属性处理
     const getAttrs = () => {
       const obj = {
@@ -38,7 +28,6 @@ export default defineComponent({
     // 渲染表单
     const render = () => {
       return h(ElPagination, {
-        // ref: pageRef,
         ...getAttrs(),
         class: "c-pagination",
       });

package/components/search/src/index.tsx

@@ -197,6 +197,7 @@ export default defineComponent({
 
     return () => {
       return (
+        // c-search 使用中需要设置动态宽度
         <div className="c-search">
           <div className="c-search-simple" ref={simpleRef}>
             <div className="c-search-simple-form" ref={simpleFormRef}>

package/components/search/src/type.ts

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

package/components/table/src/TableColumn.ts

@@ -1,7 +1,6 @@
 import {
   defineComponent,
   h,
-  getCurrentInstance,
   type ExtractPropTypes,
 } from "vue";
 import { ElTableColumn } from "element-plus";

package/components/table/src/index.ts

@@ -5,7 +5,7 @@ import {
   type ExtractPropTypes,
 } from "vue";
 import { ElTable, ElTableColumn } from "element-plus";
-import TableDictLabel from "./tableDictLabel.vue";
+import { CDictLabel } from "@elementplus-kit/uikit";
 import {
   defaultAttrs,
   tableSlots,
@@ -54,13 +54,12 @@ export type TableAttrs = ExtractPropTypes<typeof tableAttrs>;
 
 export default defineComponent({
   props: tableAttrs,
-  // emits: eventList,
 
   // attrs, emit会继承, slots需要设置
   setup(props: TableAttrs, { attrs, emit, slots, expose }) {
     // 暴露elTable组件上的方法
-    const vm = getCurrentInstance(); // 获取虚拟DOM实例
-    const cTableFnRef = (el) => {
+    const vm: any = getCurrentInstance(); // 获取虚拟DOM实例
+    const cTableFnRef = (el: any) => {
       if (!el) return;
       vm.exposed = el; // 设置暴露对象
       vm.exposeProxy = el; // 设置代理暴露对象
@@ -71,40 +70,6 @@ export default defineComponent({
     //   // tableRef,
     // });
 
-    // // 属性处理
-    // const getAttrs = () => {
-    //   const obj = {
-    //     ...defaultAttrs, // 设置默认值
-    //   };
-    //   return obj;
-    // };
-    // // 事件处理
-    // const getEvents = () => {
-    //   const obj = {
-    //     ...defaultAttrs, // 设置默认值
-    //   };
-    //   return obj;
-    // };
-
-    // // 处理列数据-数组
-    // const getArrayColumn = () => {
-    //   // 递归处理数据
-    //   const list = [];
-
-    //   const columnsRecursion = (columns, list) => {
-    //     columns?.map((item) => {
-    //       const { children, ...p } = item;
-    //       // 递归处理子列
-    //       if (isArray(item.children)) {
-    //         item.children = c(item.children, list);
-    //       }
-    //       list.push(p);
-    //     });
-    //   };
-    //   columnsRecursion(props.columns, list);
-    //   return list;
-    // };
-
     // 渲染表格列
     const renderTableColumn = () => {
       const list = [];
@@ -115,7 +80,7 @@ export default defineComponent({
             type: "selection",
             width: 50,
             align: "center",
-          })
+          }),
         );
       }
       if (props.showIndex) {
@@ -125,7 +90,7 @@ export default defineComponent({
             type: "index",
             width: 60,
             align: "center",
-          })
+          }),
         );
       }
 
@@ -167,9 +132,10 @@ export default defineComponent({
           } else if (isArray(item.options)) {
             // column 字典数组
             itemSlot["default"] = (scope: any) =>
-              h(TableDictLabel, {
+              h(CDictLabel, {
                 options: item.options,
                 value: scope.row[item.prop],
+                stringify: true, // value 转换为字符串
               });
           }
 
@@ -188,8 +154,8 @@ export default defineComponent({
               h(
                 ElTableColumn,
                 { ...p, class: "c-table-column" },
-                getColumnContent()
-              )
+                getColumnContent(),
+              ),
             );
           } else {
             const getColumnContent = () => {
@@ -204,8 +170,8 @@ export default defineComponent({
               h(
                 ElTableColumn,
                 { ...p, class: "c-table-column" },
-                getColumnContent()
-              )
+                getColumnContent(),
+              ),
             );
           }
         });
@@ -216,7 +182,7 @@ export default defineComponent({
 
     // 插槽处理
     const getSlots = () => {
-      const obj = {};
+      const obj: any = {};
       tableSlots.map((name) => {
         if (slots[name]) {
           obj[name] = slots[name];
@@ -226,9 +192,6 @@ export default defineComponent({
     };
     // 渲染表格组件
     const renderTable = () => {
-      // getColumnList();
-      // console.log("props", props);
-      // console.log("attrs", attrs);
       // 先拼接好子数据不然会重复执行多次
       const columnList = renderTableColumn();
       return h(
@@ -241,7 +204,7 @@ export default defineComponent({
         {
           default: () => columnList,
           ...getSlots(),
-        }
+        },
       );
     };
 

package/components/table/src/tableDictLabel.vue

@@ -2,14 +2,13 @@
     {{ label }}
 </template>
 <script setup lang="ts">
-import { computed, PropType } from 'vue'
+import { computed, type PropType } from 'vue'
 const props = defineProps({
     options: {
-        type: Array,
+        type: Array as PropType<{ value: string; label: string }[]>,
         default: () => []
     },
     value: {
-        type: String as PropType<any>,
         default: ''
     },
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementplus-kit/uikit",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "",
   "main": "./components/index.ts",
   "peerDependencies": {

package/components/importText/index.ts

@@ -1,2 +0,0 @@
-export type textType2 = "1" | "2" | "3";
-export type textType3 = "2" | "3" | "4";

package/components/importText/src/index.ts

@@ -1 +0,0 @@
-import { TableProps, TableColumnProps } from "@elementplus-kit/uikit";

package/components/importText/src/type.ts

@@ -1,3 +0,0 @@
-type textType1 = "a" | "b" | "c";
-export type textType2 = "1" | "2" | "3";
-export type textType3 = "2" | "3" | "4";