@elementplus-kit/uikit 1.6.0 → 1.8.0

package/components/table/src/index.ts

@@ -0,0 +1,251 @@
+import {
+  defineComponent,
+  h,
+  getCurrentInstance,
+  type ExtractPropTypes,
+} from "vue";
+import { ElTable, ElTableColumn } from "element-plus";
+import TableDictLabel from "./tableDictLabel.vue";
+import {
+  defaultAttrs,
+  tableSlots,
+  tablecolumnSlots,
+  selectionColumn,
+  indexColumn,
+} from "./constants.ts";
+import { isArray, isObject, isFunction } from "lodash-es";
+const tableAttrs = {
+  module: {
+    type: Object,
+    default: () => {},
+  },
+  params: {
+    // 额外业务全局参数
+    type: Object,
+    default: () => {},
+  },
+  // isRadio: { // 是否为单选框
+  //   type: Boolean,
+  //   default: false,
+  // },
+  // isCheckbox: { // 是否为复选框
+  //   type: Boolean,
+  //   default: false,
+  // },
+  columns: {
+    // 列数据
+    type: Array,
+    default: () => [],
+  },
+  showSelection: {
+    // 是否显示选择列
+    type: Boolean,
+    default: false,
+  },
+  showIndex: {
+    // 是否显示索引列
+    type: Boolean,
+    default: false,
+  },
+};
+
+// 类型处理
+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) => {
+      if (!el) return;
+      vm.exposed = el; // 设置暴露对象
+      vm.exposeProxy = el; // 设置代理暴露对象
+    };
+
+    // 暴露方法
+    // expose({
+    //   // 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 = [];
+      // 处理多选与序号列
+      if (props.showSelection) {
+        list.push(
+          h(ElTableColumn, {
+            type: "selection",
+            width: 50,
+            align: "center",
+          })
+        );
+      }
+      if (props.showIndex) {
+        list.push(
+          h(ElTableColumn, {
+            label: "序号",
+            type: "index",
+            width: 60,
+            align: "center",
+          })
+        );
+      }
+
+      // 列递归渲染
+      const rColumn = (columns, list) => {
+        columns.map((item) => {
+          const { children, ...p } = item;
+          // 处理 vIf true 显示 false 隐藏
+          if (
+            isFunction(item.vIf) &&
+            item.vIf(props.params) !== undefined &&
+            !item.vIf(props.params)
+          ) {
+            return;
+          }
+
+          // 处理多级表头
+          const listSub = [];
+          if (children?.length) {
+            rColumn(children, listSub);
+          }
+
+          // 处理插槽
+          const itemSlot = {};
+          // column 自带插槽
+          tablecolumnSlots.map((name) => {
+            const slotName = `${item.prop}.${name}`;
+            if (slots[slotName]) {
+              itemSlot[name] = slots[slotName];
+            }
+          });
+
+          // column 列插槽
+          if (slots[item.prop]) {
+            itemSlot["default"] = slots[item.prop];
+          } else if (isFunction(item.render)) {
+            // column render 渲染函数
+            itemSlot["default"] = item.render;
+          } else if (isArray(item.options)) {
+            // column 字典数组
+            itemSlot["default"] = (scope: any) =>
+              h(TableDictLabel, {
+                options: item.options,
+                value: scope.row[item.prop],
+              });
+          }
+
+          // 赋值 有插槽
+          if (Object.keys(itemSlot).length) {
+            const getColumnContent = () => {
+              let content = undefined;
+              if (listSub.length) {
+                content = { ...itemSlot, default: () => listSub };
+              } else {
+                content = { ...itemSlot };
+              }
+              return content;
+            };
+            list.push(
+              h(
+                ElTableColumn,
+                { ...p, class: "c-table-column" },
+                getColumnContent()
+              )
+            );
+          } else {
+            const getColumnContent = () => {
+              let content = undefined;
+              if (listSub.length) {
+                content = { default: () => listSub };
+              }
+              return content;
+            };
+            // 无插槽
+            list.push(
+              h(
+                ElTableColumn,
+                { ...p, class: "c-table-column" },
+                getColumnContent()
+              )
+            );
+          }
+        });
+      };
+      rColumn(props.columns, list);
+      return list;
+    };
+
+    // 插槽处理
+    const getSlots = () => {
+      const obj = {};
+      tableSlots.map((name) => {
+        if (slots[name]) {
+          obj[name] = slots[name];
+        }
+      });
+      return obj;
+    };
+    // 渲染表格组件
+    const renderTable = () => {
+      // getColumnList();
+      // console.log("props", props);
+      // console.log("attrs", attrs);
+      // 先拼接好子数据不然会重复执行多次
+      const columnList = renderTableColumn();
+      return h(
+        ElTable,
+        {
+          ref: cTableFnRef,
+          ...attrs,
+          class: "c-table",
+        },
+        {
+          default: () => columnList,
+          ...getSlots(),
+        }
+      );
+    };
+
+    // 返回渲染函数
+    return () => renderTable();
+  },
+});

package/components/table/src/tableDictLabel.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/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/components/table2/index.ts

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

package/components/table2/src/config.ts

@@ -0,0 +1,5 @@
+export const TABLE_CONFIG = {
+  OPERATION_COL_LABEL: '操作',
+  OPERATION_SLOT_NAME: 'custom',
+  CHILDREN_SLOT_KEY: 'children'
+}

package/components/table2/src/index.ts

@@ -0,0 +1,12 @@
+import { defineComponent } from "vue";
+import render from "./render.ts";
+
+export default defineComponent({
+  props: ["schema", "data"],
+  emits: [],
+  setup(props: any, { attrs, emit, slots, expose }) {
+    return () => {
+      return render(props.schema, props.data, emit, slots);
+    };
+  },
+});

package/components/table2/src/render.ts

@@ -0,0 +1,136 @@
+import { h } from "vue";
+import { ElTable, ElTableColumn } from "element-plus";
+import _ from "lodash-es";
+import { TABLE_CONFIG } from "./config.ts";
+
+function render(schema: any, data: any, emit: any, slots: any) {
+  const renderSlots = {
+    default: () => {
+      return buildSlots(schema, slots);
+    },
+  };
+  return h(ElTable, { data, class: "c-table" }, renderSlots);
+}
+
+function buildSlots(schema: any, slots: any) {
+  const children: any[] = [];
+  // 渲染表格列子组件
+  if (_.isObject(schema)) {
+    let columnsKeys = Object.keys(schema);
+    columnsKeys.forEach((columnKey) => {
+      let colSchema = schema[columnKey];
+      let colSlots = slots[columnKey];
+      // 如果有列表头插槽
+      if (slots[`${columnKey}.header`]) {
+        let props = buildColumnProps(columnKey, colSchema);
+        let headerSlot = {
+          header: (scope: any) => {
+            // 调用插槽函数才能传参
+            return slots[`${columnKey}.header`](scope);
+          },
+        };
+        if (slots[columnKey]) {
+          headerSlot.default = (scope: any) => {
+            return [slots[columnKey](scope)];
+          };
+        }
+        children.push(h(ElTableColumn, props, headerSlot));
+      } else {
+        children.push(buildColumns(columnKey, colSchema, colSlots, slots));
+      }
+    });
+  }
+
+  // 额外插槽处理
+  // 增加插槽式操作栏 判断是否有操作列名称的插槽
+  if (slots[TABLE_CONFIG.OPERATION_SLOT_NAME]) {
+    // 如果有列表头插槽
+    let scopeProp = { label: TABLE_CONFIG.OPERATION_COL_LABEL };
+
+    if (slots[`${TABLE_CONFIG.OPERATION_SLOT_NAME}.header`]) {
+      let headerSlot = {
+        header: (scope: any) => {
+          // 调用插槽函数才能传参
+          return slots[`${TABLE_CONFIG.OPERATION_SLOT_NAME}.header`](scope);
+        },
+        default: (scope: any) => {
+          return [slots[TABLE_CONFIG.OPERATION_SLOT_NAME](scope)];
+        },
+      };
+      children.push(h(ElTableColumn, scopeProp, headerSlot));
+    } else {
+      let scopeSlots = {
+        default: (scope: any) => {
+          return [slots[TABLE_CONFIG.OPERATION_SLOT_NAME](scope)];
+        },
+      };
+      children.push(h(ElTableColumn, scopeProp, scopeSlots));
+    }
+  }
+  return children;
+}
+
+function buildColumns(
+  columnKey: any,
+  option: any,
+  slots: any,
+  globalSlots: any
+) {
+  // 组装props
+  let props = buildColumnProps(columnKey, option);
+  // 过滤出 children 多级表头配置 消除vue警告
+  delete props[TABLE_CONFIG.CHILDREN_SLOT_KEY];
+
+  let renderSlotsArr = [];
+  // 多级表头组合
+  if (
+    option[TABLE_CONFIG.CHILDREN_SLOT_KEY] &&
+    _.isObject(option[TABLE_CONFIG.CHILDREN_SLOT_KEY])
+  ) {
+    let scopeOption = option[TABLE_CONFIG.CHILDREN_SLOT_KEY];
+    if (_.isObject(scopeOption)) {
+      let columnsKeys = Object.keys(scopeOption);
+      columnsKeys.forEach((columnKey) => {
+        let colSchema = scopeOption[columnKey];
+        let colSlots = globalSlots[columnKey];
+        renderSlotsArr.push(
+          buildColumns(columnKey, colSchema, colSlots, globalSlots)
+        );
+      });
+    }
+  }
+
+  let renderSlots = () => [];
+
+  if (slots) {
+    renderSlots = {
+      default: (scope) => {
+        return [...renderSlotsArr, slots(scope)];
+      },
+    };
+  } else {
+    renderSlots = {
+      default: () => {
+        return [...renderSlotsArr];
+      },
+    };
+  }
+
+  return h(ElTableColumn, props, renderSlots);
+}
+
+function buildColumnProps(key: string, option: any) {
+  if (_.isString(option)) {
+    return {
+      prop: key,
+      label: option,
+    };
+  } else if (_.isObject(option)) {
+    return {
+      prop: key,
+      ...option,
+    };
+  }
+}
+
+export default render;

package/components/table2/src/types.ts

@@ -0,0 +1,39 @@
+export interface FormItemListItem {
+  type: string
+  label?: string
+  prop: string
+  required?: Boolean
+  vIf?: boolean | ((item: FormItemListItem) => boolean)
+  dictType?: string
+  options?: Array<Object>
+  col?: Number
+  formItem?: Object
+  attrs?: Object
+}
+
+export interface FormItemList {
+  module: Object
+  formOpsions: FormItemListItem[]
+  readonly: boolean
+}
+
+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'

package/components//346/250/241/346/235/277/index.tsx

@@ -0,0 +1,57 @@
+import {
+  ref,
+  computed,
+  defineComponent,
+} from "vue";
+
+// import { CForm, CDrawer } from "@elementplus-kit/uikit";
+// import '../style/index.scss';
+
+export default defineComponent({
+  props: {
+    // modelValue: {
+    //   type: Object,
+    //   default: {}
+    // },
+    // formOptions: {
+    //   type: Array,
+    //   default: () => []
+    // },
+    // isDrawer: {
+    //   type: Boolean,
+    //   default: false
+    // },
+  },
+  // emits: ['update:modelValue', 'search', 'reset', 'close'],
+
+  setup(props, { emit, slots, attrs, expose }) {
+    // 自己的 slot
+    // const slotsList = ["active", "btn-left", "btn-right"];
+    // console.log('slots', slots);
+    // console.log('attrs', attrs);
+    // 解析 attrs 中的事件
+    // const getEvent = () => {
+    //   let formObj: any = {};
+    //   Object.keys(attrs)?.forEach((name) => {
+    //     if (name.indexOf("on") === 0) {
+    //       formObj[name] = attrs[name];
+    //     }
+    //   })
+    //   return formObj
+    // };
+
+    // 解析插槽
+    // const getSlot = () => {
+    //   let formObj = {};
+    //   Object.keys(slots).forEach((key) => {
+    //     if (!slotsList.includes(key)) {
+    //       formObj[key] = slots[key];
+    //     }
+    //   });
+    //   return formObj
+    // };
+    return () => (
+      <div className="xxxxxxx">xxxxxxx</div>
+    )
+  },
+})

package/components//346/250/241/346/235/277/ttt.ts

@@ -0,0 +1,66 @@
+import {
+  ref,
+  h,
+  computed,
+  toRefs,
+  getCurrentInstance,
+  provide,
+  defineComponent,
+  type ExtractPropTypes,
+  type PropType,
+} from 'vue'
+import { ElConfigProvider, ElForm, ElRow, ElCol } from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import { get, has, isArray, isBoolean, isFunction, isNumber } from 'lodash-es'
+
+
+const propsAttrs = {
+  // 表单数据
+  model: { type: Object, default: () => ({}) },
+  // 表单项
+  formOptions: { type: Array, default: () => [] },
+}
+
+export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>
+
+export default defineComponent({
+  props: propsAttrs,
+  emits: [...getEmits()],
+  setup(props: PropsAttrs, { attrs: $attrs, emit, slots, expose }) {
+
+    // 暴露方法
+    expose({
+      optionsRef,
+    })
+
+    // 解构props
+    const { model, formOptions, readonly, gutter, col } = toRefs(props)
+
+    // 渲染表单
+    const renderForm = () => {
+      return h(
+        ElConfigProvider,
+        {
+          locale: zhCn,
+        },
+        {
+          default: () =>
+            h(
+              ElForm,
+              {
+                ref: cFormFnRef,
+                ...$attrs,
+                class: allReadonly.value ? 'isReadonly c-form' : 'c-form', // 放在 $attrs 后面可自动合并 放在 $attrs 前面会被 $attrs.class 覆盖， h函数渲染的是标签就会覆盖 是组件就会合并不用管顺序
+              },
+              {
+                default: () => renderRow(),
+              },
+            ),
+        },
+      )
+    }
+
+    // 返回渲染函数
+    return () => renderForm()
+  },
+})

package/components//346/250/241/346/235/277/ttt.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="xxx">
+    
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, useAttrs, useSlots, defineModel } from 'vue'
+import { ArrowUpBold } from '@element-plus/icons-vue'
+const props = defineProps({
+  formOptions: {
+    type: Array,
+    default: () => []
+  },
+})
+const emit = defineEmits(['search', 'reset', 'close'])
+
+</script>
+<style scoped lang="scss"></style>

package/index.ts

@@ -0,0 +1,2 @@
+//  import c from './components/index.ts'
+// export default c

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@elementplus-kit/uikit",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "",
   "main": "./components/index.ts",
-  "files": [
-    "dist/"
-  ],
   "peerDependencies": {
     "@element-plus/icons-vue": "*",
     "element-plus": "*",

package/vite.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+// import dts from 'vite-plugin-dts'
+// import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueJsx(),
+    // dts({
+    //   rollupTypes: false,
+    //   tsconfigPath: './tsconfig.json',
+    // }),
+  ],
+  build: {
+    // 指定打包输出目录名称，替换成你想要的名字
+    outDir: "dist",
+    lib: {
+      entry: "components/index.ts",
+      name: "ElementPlusKit",
+      fileName: "index",
+      // fileName: (format) => `my-utils.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["vue", "element-plus", "lodash-es", "@element-plus/icons-vue"],
+    },
+    emptyOutDir: true,
+  },
+});