@elementplus-kit/uikit 1.10.0 → 1.12.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[]>,
@@ -113,12 +102,16 @@ export default defineComponent({
       const defaultAttrs = {
         splitButton: true,
       };
+      // 禁用时有下拉不禁用
+      // if(item.disabled && dropdownItemList.length > 0) {
+      //   defaultAttrs.class = `is-disabled-down ${item.class}`
+      // }
       // 过滤下拉菜单属性
       const l = [
         "type",
         "size",
         "splitButton",
-        "disabled",
+        // "disabled",
         "placement",
         "effect",
         "trigger",
@@ -184,11 +177,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);
@@ -218,29 +222,19 @@ export default defineComponent({
           {
             ...getDropdownAttrs(dropdownMain[0]),
             class: "c-btn-dropdown",
-            buttonProps: getAttrs(dropdownMain[0]),
-            splitButton: true,
-            // splitButton: dropdownItemList.length > 0,
-            onClick: () => {
-              emit("btnAction", dropdownMain[0].alias, props.params);
-            },
-            onCommand: (command: string) => {
-              emit("btnAction", command, props.params);
-            },
+            popperClass: "c-btn-dropdown-popper",
           },
           {
-            default: () => {
-              return dropdownMain[0].label;
-            },
+            default: () => createBtn(dropdownMain[0]),
             dropdown: () => {
               return dropdownItemList.map((item) => {
                 return h(
                   ElDropdownItem,
                   {
-                    command: item.alias,
+                    // command: item.alias,
                   },
                   {
-                    default: () => item?.label,
+                    default: () => createBtn(item),
                   },
                 );
               });
@@ -255,14 +249,34 @@ export default defineComponent({
     const render = () => {
       const finalList = filterOptions(); // 最终列表
       // 是否折叠 折叠
-      if (props.fold) {
-        return createDropdown(finalList);
-      } else {
-        // 不折叠
-        return finalList.map((item) => {
-          return createBtn(item);
-        });
+      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;
       }
+
+      return h(
+        "div",
+        {
+          class: "c-button",
+        },
+        {
+          default: () => {
+            if (isFold) {
+              return createDropdown(finalList);
+            } else {
+              // 不折叠
+              return finalList.map((item) => {
+                return createBtn(item);
+              });
+            }
+          },
+        },
+      );
     };
     return () => render();
   },

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/button/style/index.scss

@@ -1,3 +1,44 @@
-.el-button + .el-dropdown {
-  margin-left: 10px;
+.c-button {
+  display: inline-block;
+  .el-button + .el-dropdown {
+    margin-left: 10px;
+  }
+  > .el-button + .el-button {
+    margin-left: 10px;
+  }
+  .c-btn-dropdown {
+    .el-button-group {
+      > .el-button:nth-child(1) {
+        // 格式第一个按钮
+        padding: 0;
+        border: none;
+        background-color: transparent;
+        .el-button {
+          border-bottom-right-radius: 0;
+          border-top-right-radius: 0;
+        }
+      }
+    }
+    // 按钮聚焦外轮廓阴影
+    .el-button:focus-visible {
+      outline: none;
+    }
+  }
+}
+// 下拉悬浮窗
+.c-btn-dropdown-popper {
+  .el-dropdown-menu__item {
+    padding: 0;
+  }
+  .el-button {
+    width: 100%;
+    border: none;
+    border-radius: 0;
+  }
+  .el-dropdown-menu__item + .el-dropdown-menu__item {
+    margin-top: 1px;
+  }
+}
+.c-btn-dropdown-popper.is-light {
+  border: none;
 }

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/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/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,8 +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 "./dictLabel/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

@@ -15,10 +15,6 @@ import {
 } from "./constants.ts";
 import { isArray, isObject, isFunction } from "lodash-es";
 const tableAttrs = {
-  module: {
-    type: Object,
-    default: () => {},
-  },
   params: {
     // 额外业务全局参数
     type: Object,
@@ -54,13 +50,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 +66,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 = [];
@@ -217,7 +178,7 @@ export default defineComponent({
 
     // 插槽处理
     const getSlots = () => {
-      const obj = {};
+      const obj: any = {};
       tableSlots.map((name) => {
         if (slots[name]) {
           obj[name] = slots[name];
@@ -227,9 +188,6 @@ export default defineComponent({
     };
     // 渲染表格组件
     const renderTable = () => {
-      // getColumnList();
-      // console.log("props", props);
-      // console.log("attrs", attrs);
       // 先拼接好子数据不然会重复执行多次
       const columnList = renderTableColumn();
       return h(

package/components/table/src/type.ts

@@ -12,6 +12,8 @@ export type TableProps = Expand<Partial<TableAttrs>> &
 
 // 表格项属性
 export type TableColumnProps = {
+  label: string;
+  prop?: string | undefined;
   vIf?: (params: any) => boolean;
   render?: (scope: any) => any;
   options?: Array<{ label: string; value: any }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementplus-kit/uikit",
-  "version": "1.10.0",
+  "version": "1.12.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";