@elementplus-kit/uikit 1.6.0 → 1.7.0

package/components/button/index.ts

@@ -0,0 +1,4 @@
+import Button from "./src/index";
+export * from "./src/index";
+export { Button };
+export default Button;

package/components/button/src/constants.ts

@@ -0,0 +1,50 @@
+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

@@ -0,0 +1,264 @@
+import { defineComponent, h, PropType } from "vue";
+import {
+  ElButton,
+  ElDropdown,
+  ElDropdownMenu,
+  ElDropdownItem,
+  buttonProps,
+} from "element-plus";
+
+import "../style/index.scss";
+import { typeActiveMap } from "./constants.ts";
+import { has, isBoolean, isFunction, isArray } from "lodash-es";
+import { tr } from "element-plus/es/locales.mjs";
+export default defineComponent({
+  props: {
+    params: {
+      // 用于验证自定义函数的外部数据
+      type: Object,
+      default: () => ({}),
+    },
+    btnOptions: {
+      type: Array,
+      default: () => [],
+    },
+    // 权限验证函数
+    permit: {
+      type: Function,
+    },
+    size: {
+      type: String as PropType<"large" | "default" | "small">,
+      default: undefined,
+    },
+    plain: {
+      type: Boolean,
+      default: undefined,
+    },
+    text: {
+      type: Boolean,
+      default: undefined,
+    },
+    link: {
+      type: Boolean,
+      default: undefined,
+    },
+    // 折叠
+    fold: {
+      type: Boolean,
+      default: false,
+    },
+    // 折叠数量
+    foldNum: {
+      type: Number,
+      default: 0,
+    },
+    // // 权限函数
+    // hasRole: {
+    //   type: Function,
+    //   default: () => true
+    // },
+  },
+  emits: ["btnAction"],
+  setup(props, { emit, slots, attrs, expose }) {
+    // console.log('slots', slots);
+    // console.log('attrs', attrs);
+
+    // 解析按钮属性
+    const getAttrs = (item) => {
+      let defaultAttrs = {
+        size: props.size,
+        plain: props.plain,
+        text: props.text,
+        link: props.link,
+        class: `c-btn-alias-${item.alias || ""}`,
+      };
+
+      // 默认按钮类型 用样式控制?
+      // if (item?.alias && typeActiveMap[item.alias]) {
+      //   defaultAttrs = {
+      //     ...typeActiveMap[item.alias],
+      //     ...defaultAttrs,
+      //   };
+      // }
+
+      // 过滤掉非elbutton属性
+      const filterAttrsList = ["label", "alias", "permit", "vIf", "disable"];
+
+      Object.keys(item).map((key) => {
+        if (!filterAttrsList.includes(key)) {
+          defaultAttrs[key] = item[key];
+        }
+      });
+
+      // 处理禁用
+      if (isBoolean(item.disable)) {
+        defaultAttrs.disabled = item.disable;
+      }
+      if (
+        isFunction(item.disable) &&
+        item.disable(props.params) !== undefined
+      ) {
+        defaultAttrs.disabled = item.disable(props.params);
+      }
+      return defaultAttrs;
+    };
+    // 解析下拉菜单属性
+    const getDropdownAttrs = (item) => {
+      const obj = getAttrs(item);
+      const defaultAttrs = {
+        splitButton: true,
+      };
+      // 过滤下拉菜单属性
+      const l = [
+        "type",
+        "size",
+        "splitButton",
+        "disabled",
+        "placement",
+        "effect",
+        "trigger",
+      ];
+      l.forEach((key) => {
+        if (obj[key] !== undefined) {
+          defaultAttrs[key] = obj[key];
+        }
+      });
+      return defaultAttrs;
+    };
+    // 过滤权限与 vIf
+    const filterOptions = () => {
+      const list = [];
+      // 过滤权限
+      props.btnOptions.map((item) => {
+        if (
+          isArray(item.permit) &&
+          item.permit.length > 0 &&
+          isFunction(props.permit)
+        ) {
+          if (props.permit(item.permit)) {
+            list.push(item);
+          }
+        } else {
+          list.push(item);
+        }
+      });
+      const list2 = [];
+      // 过滤 vIf
+      list.map((item) => {
+        if (
+          has(item, "vIf") &&
+          isFunction(item.vIf) &&
+          item.vIf(props.params) !== undefined
+        ) {
+          if (item.vIf(props.params)) {
+            list2.push(item);
+          }
+        } else {
+          list2.push(item);
+        }
+      });
+      return list2;
+    };
+    // 按钮单个生成函数
+    const createBtn = (item) => {
+      return h(
+        ElButton,
+        {
+          ...getAttrs(item),
+          onClick: () => {
+            emit("btnAction", item.alias, props.params);
+          },
+        },
+        {
+          default: () => item?.label,
+        }
+      );
+    };
+    // 下拉菜单生成函数
+    const createDropdown = (finalList) => {
+      const dropdownList = []; // 不折叠的按钮
+      const dropdownMain = []; // 下拉占位
+      const dropdownItemList = []; // 折叠的按钮
+
+      finalList.map((itm, idx) => {
+        if (idx < props.foldNum) {
+          dropdownList.push(itm);
+        } else if (idx === props.foldNum) {
+          dropdownMain.push(itm);
+        } else {
+          dropdownItemList.push(itm);
+        }
+      });
+      // 处理只有一个下拉按钮的情况
+      if (dropdownMain.length > 0 && dropdownItemList.length === 0) {
+        dropdownList.push(dropdownMain[0]);
+      }
+
+      // 最终渲染的vdom
+      let renderVdom = [];
+      // 展示按钮vdom
+      const butsVdom = dropdownList.map((item) => {
+        return createBtn(item);
+      });
+
+      // 合并参数
+      if (butsVdom.length > 0) {
+        renderVdom = renderVdom.concat(butsVdom);
+      }
+
+      if (dropdownMain.length > 0 && dropdownItemList.length > 0) {
+        // 下拉菜单vdom
+        const dropdownVdom = h(
+          ElDropdown,
+          {
+            ...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);
+            },
+          },
+          {
+            default: () => {
+              return dropdownMain[0].label;
+            },
+            dropdown: () => {
+              return dropdownItemList.map((item) => {
+                return h(
+                  ElDropdownItem,
+                  {
+                    command: item.alias,
+                  },
+                  {
+                    default: () => item?.label,
+                  }
+                );
+              });
+            },
+          }
+        );
+        renderVdom = renderVdom.concat(dropdownVdom);
+      }
+      return renderVdom;
+    };
+
+    const render = () => {
+      const finalList = filterOptions(); // 最终列表
+      // 是否折叠 折叠
+      if (props.fold) {
+        return createDropdown(finalList);
+      } else {
+        // 不折叠
+        return finalList.map((item) => {
+          return createBtn(item);
+        });
+      }
+    };
+    return () => render();
+  },
+});

package/components/button/style/index.scss

@@ -0,0 +1,3 @@
+.el-button + .el-dropdown {
+  margin-left: 10px;
+}

package/components/config.ts

@@ -0,0 +1,4 @@
+// 组件配置
+// 组件名称前缀 组件标识 class 前缀
+import { capitalize } from "lodash-es";
+export const prefix = capitalize("C"); // 首字母大写 其他字母小写

package/components/dialog/index.ts

@@ -0,0 +1,6 @@
+import Dialog from "./src/index";
+export * from "./src/index";
+// 把变量 Dialog 导出为 CDialog
+// export { Dialog, Dialog as CDialog };
+export { Dialog };
+export default Dialog;

package/components/dialog/src/constants.ts

@@ -0,0 +1,3 @@
+export const defaultAttrs = {
+  destroyOnClose: true,
+};

package/components/dialog/src/index.ts

@@ -0,0 +1,54 @@
+import {
+  defineComponent,
+  ref,
+  h,
+  computed,
+  toRefs,
+  type ExtractPropTypes,
+} from "vue";
+import { ElDialog } from "element-plus";
+import { defaultAttrs } from "./constants.ts";
+import { prefix } from "../../config.ts";
+const propsAttrs = {};
+
+export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+
+export default defineComponent({
+  name: `${prefix}Dialog`,
+  // props: propsAttrs,
+  // emits: eventList,
+
+  // attrs, emit会继承, slots需要设置
+  setup(props: PropsAttrs, { attrs, emit, slots, expose }) {
+    // const dialogRef = ref();
+
+    // 暴露方法
+    // expose({
+    //   dialogRef,
+    // });
+
+    // 属性处理
+    const getAttrs = () => {
+      const obj = {
+        ...defaultAttrs, // 设置默认值
+      };
+      return obj;
+    };
+
+    // 渲染组件
+    const render = () => {
+      return h(
+        ElDialog,
+        {
+          // ref: dialogRef,
+          ...getAttrs(),
+          class: "c-dialog",
+        },
+        slots
+      );
+    };
+
+    // 返回渲染函数
+    return () => render();
+  },
+});

package/components/dialog/style/index.scss

@@ -0,0 +1,18 @@
+/* Bounce Animation */
+.dialog-bounce-enter-active,
+.dialog-bounce-leave-active,
+.dialog-bounce-enter-active .el-dialog,
+.dialog-bounce-leave-active .el-dialog {
+  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.dialog-bounce-enter-from,
+.dialog-bounce-leave-to {
+  opacity: 0;
+}
+
+.dialog-bounce-enter-from .el-dialog,
+.dialog-bounce-leave-to .el-dialog {
+  transform: scale(0.3) translateY(-50px);
+  opacity: 0;
+}

package/components/dictLabel/index.ts

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

package/components/dictLabel/src/index.vue

@@ -0,0 +1,21 @@
+<template>
+    {{ label }}
+</template>
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+const props = defineProps({
+    options: {
+        type: Array,
+        default: () => []
+    },
+    value: {
+        type: String as PropType<any>,
+        default: ''
+    },
+})
+const label = computed(() => {
+    // 处理value为数字的情况 后端字典都是字符串
+    const item = props.options?.find((item) => item.value == props.value.toString());
+    return item?.label || props.value;
+});
+</script>

package/components/drawer/index.ts

@@ -0,0 +1,4 @@
+import Drawer from "./src/index";
+export * from "./src/index";
+export { Drawer };
+export default Drawer;

package/components/drawer/src/constants.ts

@@ -0,0 +1,3 @@
+export const defaultAttrs = {
+  destroyOnClose: true,
+};

package/components/drawer/src/index.ts

@@ -0,0 +1,53 @@
+import {
+  defineComponent,
+  ref,
+  h,
+  computed,
+  toRefs,
+  type ExtractPropTypes,
+} from "vue";
+import { ElDrawer } from "element-plus";
+import { defaultAttrs } from "./constants.ts";
+
+const propsAttrs = {};
+
+export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+
+export default defineComponent({
+  // props: propsAttrs,
+  // emits: eventList,
+
+  // attrs, emit会继承, slots需要设置
+  setup(props: PropsAttrs, { attrs, emit, slots, expose }) {
+    // const drawerRef = ref();
+
+    // 暴露方法
+    // expose({
+    //   drawerRef,
+    // });
+
+    // 属性处理
+    const getAttrs = () => {
+      const obj = {
+        ...defaultAttrs, // 设置默认值
+      };
+      return obj;
+    };
+
+    // 渲染组件
+    const render = () => {
+      return h(
+        ElDrawer,
+        {
+          // ref: drawerRef,
+          ...getAttrs(),
+          class: "c-drawer",
+        },
+        slots
+      );
+    };
+
+    // 返回渲染函数
+    return () => render();
+  },
+});

package/components/drawer/style/index.scss

@@ -0,0 +1,18 @@
+// /* Bounce Animation */
+// .dialog-bounce-enter-active,
+// .dialog-bounce-leave-active,
+// .dialog-bounce-enter-active .el-dialog,
+// .dialog-bounce-leave-active .el-dialog {
+//   transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+// }
+
+// .dialog-bounce-enter-from,
+// .dialog-bounce-leave-to {
+//   opacity: 0;
+// }
+
+// .dialog-bounce-enter-from .el-dialog,
+// .dialog-bounce-leave-to .el-dialog {
+//   transform: scale(0.3) translateY(-50px);
+//   opacity: 0;
+// }

package/components/form/index.ts

@@ -0,0 +1,4 @@
+import Form from "./src/index";
+export * from "./src/index";
+export { Form };
+export default Form;