@elementplus-kit/uikit 1.6.0 → 1.8.0

package/components/form/src/index.ts

@@ -0,0 +1,198 @@
+import {
+  defineComponent,
+  ref,
+  h,
+  computed,
+  toRefs,
+  getCurrentInstance,
+  provide,
+  type ExtractPropTypes,
+  type PropType,
+} from "vue";
+import { ElForm, ElRow, ElCol } from "element-plus";
+// import zhCn from "element-plus/es/locale/lang/zh-cn";
+import CFormItem from "./FormItem.ts";
+import { has, isFunction } from "lodash-es";
+import { getEmits } from "./constants"; // 获取所有的事件
+import "../style/index.scss";
+const formAttrs = {
+  // 表单数据
+  model: { type: Object, default: () => ({}) },
+  // 表单项
+  formOptions: { type: Array, default: () => [] },
+  // 只读
+  readonly: { type: Boolean, default: false },
+  // row 间距
+  gutter: {
+    // tode 类型错误警告
+    type: (Number as PropType<number>) || (String as PropType<string>),
+    default: undefined,
+  },
+  // row 列数
+  col: { type: Number, default: undefined },
+  // 额外业务全局参数
+  params: { type: Object, default: () => ({}) },
+};
+
+export type FormAttrs = ExtractPropTypes<typeof formAttrs>;
+
+export default defineComponent({
+  props: formAttrs,
+  emits: [...getEmits()],
+  setup(props: FormAttrs, { attrs: $attrs, emit, slots, expose }) {
+    provide("formContext", {
+      formSlots: slots,
+      events: (eProp, ...args: any) => {
+        // 按钮 reset 事件
+        // if (e == 'reset') {
+        //   formRef.value?.resetFields()
+        // }
+        emit(eProp, ...args);
+      },
+    });
+
+    // 各个表单组件的 ref
+    const optionsRef = ref<any>({});
+
+    // 暴露方法
+    expose({
+      optionsRef,
+    });
+
+    // 解构props
+    const { model, formOptions, readonly, gutter, col } = toRefs(props);
+
+    // 暴露elForm组件上的方法
+    const vm = getCurrentInstance(); // 获取虚拟DOM实例
+    const cFormFnRef = (el) => {
+      if (!el) return;
+      vm.exposed = el; // 设置暴露对象
+      vm.exposeProxy = el; // 设置代理暴露对象
+    };
+
+    // 全部只读
+    const allReadonly = computed(() => readonly.value);
+
+    // 是否 row 布局 || ['', 0].includes(gutter.value)
+    const isLayout = computed(
+      () =>
+        ["", 0].includes(gutter?.value) ||
+        col?.value ||
+        formOptions?.value.some((item) => has(item, "col"))
+    );
+
+    // 渲染 row
+    const renderRow = () => {
+      const formItemVdom = renderFormItem();
+      if (isLayout.value) {
+        return h(
+          ElRow,
+          {
+            class: "c-row",
+            // gutter: gutter.value === 0 || gutter.value ? gutter.value : 10,
+            gutter: gutter.value || 20,
+            ...$attrs,
+          },
+          {
+            default: () => formItemVdom,
+          }
+        );
+      } else {
+        return formItemVdom;
+      }
+    };
+    // 合并 formData 和 params
+    const mergeParams = computed(() => {
+      return { formData: model.value, params: props.params };
+    });
+    // 渲染表单项
+    const renderFormItem = () => {
+      // 过滤权限
+      const list = [];
+
+      formOptions.value.map((item) => {
+        // 处理 vIf true 显示 false 隐藏
+        if (
+          isFunction(item?.vIf) &&
+          item.vIf(mergeParams.value) !== undefined
+        ) {
+          if (item.vIf(mergeParams.value)) {
+            list.push(item);
+          }
+        } else {
+          list.push(item);
+        }
+      });
+      return list.map((item) => {
+        // const { label, prop, type, required, col, formItem, attrs } = item
+        // const { label, prop, type, required, col, formItem, attrs, ...args } = item
+        const rFormItem = () => {
+          return h(CFormItem, {
+            class: "c-form-itme",
+            model: model.value,
+            allReadonly,
+            mergeParams: mergeParams.value,
+            ...item,
+            optionsRef: optionsRef.value,
+          });
+        };
+        if (isLayout.value) {
+          // 是否有 col 插槽
+          let colSlot = undefined;
+          let colSlotName = `col.${item.prop}`;
+          // 手动开启 col 插槽
+          if (item?.colSlot) {
+            if (has(slots, colSlotName)) {
+              colSlot = slots[colSlotName];
+            } else {
+              colSlot = () => "col插槽模板未定义";
+            }
+          } else {
+            // 自动开启 col 插槽
+            if (has(slots, colSlotName)) {
+              colSlot = slots[colSlotName];
+            }
+          }
+
+          return h(
+            ElCol,
+            {
+              class: "c-col",
+              span: has(item, "col")
+                ? item.col
+                : col?.value
+                ? col?.value
+                : isLayout.value
+                ? 8
+                : undefined,
+            },
+            {
+              default: () => (colSlot ? colSlot() : rFormItem()),
+            }
+          );
+        } else {
+          return rFormItem();
+        }
+      });
+    };
+
+    // 渲染表单
+    const renderForm = () => {
+      return h(
+        ElForm,
+        {
+          ref: cFormFnRef,
+          ...$attrs,
+          model: model.value,
+          class: allReadonly.value ? "isReadonly c-form" : "c-form", // 放在 $attrs 后面可自动合并 放在 $attrs 前面会被 $attrs.class 覆盖， h函数渲染的是标签就会覆盖 是组件就会合并不用管顺序
+        },
+        {
+          default: () => renderRow(),
+        }
+      );
+    };
+
+    // 返回渲染函数
+    return () => renderForm();
+  },
+});

package/components/form/src/type.ts

@@ -0,0 +1,68 @@
+import { type ExtractPropTypes } from "vue";
+import { formProps, type FormItemProps as ElFormItemProps } from "element-plus";
+import { type FormAttrs } from "./index.ts";
+
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
+
+// 表单类型
+export type FormType =
+  | "input"
+  | "textarea"
+  | "input-number"
+  | "select"
+  | "select-v2"
+  | "cascader"
+  | "tree-select"
+  | "radio"
+  | "checkbox"
+  | "time-select"
+  | "date-picker"
+  | "time-picker"
+  | "rate"
+  | "color-picker"
+  | "slider"
+  | "switch"
+  | "text"
+  | "html"
+  | "slot";
+
+// 表单属性
+type ElFormProps = ExtractPropTypes<typeof formProps>;
+export type FormProps = Expand<Partial<FormAttrs>> &
+  Expand<Partial<ElFormProps>>;
+
+// 跟FormItem组件不同步，不用组件props生成
+export type FormOptions = Array<{
+  type:
+    | "input"
+    | "textarea"
+    | "input-number"
+    | "select"
+    | "select-v2"
+    | "cascader"
+    | "tree-select"
+    | "radio"
+    | "checkbox"
+    | "time-select"
+    | "date-picker"
+    | "time-picker"
+    | "rate"
+    | "color-picker"
+    | "slider"
+    | "switch"
+    | "text"
+    | "html"
+    | "slot";
+  label?: string;
+  prop: string;
+  required?: boolean;
+  vIf?: boolean | (() => boolean);
+  dictType?: string;
+  options?: Array<{
+    label: string;
+    value: string | number | boolean;
+  }>;
+  col?: Number;
+  formItem?: { disabled?: boolean | (() => boolean) } & ElFormItemProps;
+  attrs?: Object;
+}>;

package/components/form/src/utils.ts

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

package/components/form/style/index.scss

@@ -0,0 +1,5 @@
+.c-form.el-form--inline {
+  .el-select {
+    --el-select-width: 220px;
+  }
+}

package/components/importText/index.ts

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

package/components/importText/src/index.ts

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

package/components/importText/src/type.ts

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

package/components/index.ts

@@ -1,45 +1,24 @@
-// 表单
-import Form from "./form/index.ts";
-export * from "./form/index.ts";
-export const CForm = Form;
 
-// 表格
-import Table from "./table/index.ts";
 export * from "./table/index.ts";
-export const CTable = Table;
+export { default as CTable } from "./table/index.ts";
 
-// 表格2
-import Table2 from "./table2/index.ts";
-export * from "./table2/index.ts";
-export const CTable2 = Table2;
+export * from "./form/index.ts";
+export { default as CForm } from "./form/index.ts";
 
-// 分页
-import Pagination from "./pagination/index.ts";
 export * from "./pagination/index.ts";
-export const CPagination = Pagination;
+export { default as CPagination } from "./pagination/index.ts";
 
-// 弹窗
-import Dialog from "./dialog/index.ts";
+export { default as CDialog } from "./dialog/index.ts";
 export * from "./dialog/index.ts";
-export const CDialog = Dialog;
 
-// 抽屉
-import Drawer from "./drawer/index.ts";
+export { default as CDrawer } from "./drawer/index.ts";
 export * from "./drawer/index.ts";
-export const CDrawer = Drawer;
 
-// 搜索
-import Search from "./search/index.ts";
+export { default as CSearch } from "./search/index.ts";
 export * from "./search/index.ts";
-export const CSearch = Search;
 
-// 按钮
-import Button from "./button/index.ts";
+export { default as CButton } from "./button/index.ts";
 export * from "./button/index.ts";
-export const CButton = Button;
-
 
-// 测试单个引入-----------------------------
-// export * from "./dialog/index.ts"; // 弹窗
-// export * from "./drawer/index.ts"; // 抽屉
-// 测试单个引入-----------------------------
+// export { default as Table2 } from "./table2/index.ts";
+// export * from "./table2/index.ts";

package/components/pagination/index.ts

@@ -0,0 +1,2 @@
+export * from "./src/type.ts";
+export default "./src/index.ts";

package/components/pagination/src/constants.ts

@@ -0,0 +1,5 @@
+export const defaultAttrs = {
+  // small: false,
+  pageSizes: [10, 20, 50, 100, 200, 500],
+  layout: "total, sizes, prev, pager, next, jumper",
+};

package/components/pagination/src/index.ts

@@ -0,0 +1,50 @@
+import {
+  defineComponent,
+  ref,
+  h,
+  computed,
+  toRefs,
+  type ExtractPropTypes,
+} from "vue";
+import { ElPagination } from "element-plus";
+import { get, has, isArray, isBoolean, isFunction, isNumber } from "lodash-es";
+import { defaultAttrs } from "./constants.ts";
+
+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 = {
+        ...defaultAttrs, // 设置默认值
+        // ...attrs, // 当前传入覆盖默认值 第一层标签就是组件可以不用传入
+      };
+      return obj;
+    };
+    // 渲染表单
+    const render = () => {
+      return h(ElPagination, {
+        // ref: pageRef,
+        ...getAttrs(),
+        class: "c-pagination",
+      });
+    };
+
+    // 返回渲染函数
+    return () => render();
+  },
+});

package/components/pagination/src/type.ts

@@ -0,0 +1 @@
+export type {}

package/components/search/index.ts

@@ -0,0 +1,2 @@
+export * from "./src/type.ts";
+export default "./src/index.tsx";