@elementplus-kit/uikit 1.7.0 → 1.8.0

package/components/button/index.ts

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

package/components/button/src/index.ts

@@ -1,4 +1,4 @@
-import { defineComponent, h, PropType } from "vue";
+import { defineComponent, h, type PropType, type ExtractPropTypes } from "vue";
 import {
   ElButton,
   ElDropdown,
@@ -8,58 +8,63 @@ import {
 } 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
-    // },
+import { typeActiveMap } from "./constants.ts";
+
+import { type BtnOptions } from "./type.ts";
+const buttonAttrs = {
+  params: {
+    // 用于验证自定义函数的外部数据
+    type: Object,
+    default: () => ({}),
+  },
+  // 权限验证函数
+  permit: {
+    type: Function,
+  },
+  // 折叠
+  fold: {
+    type: Boolean,
+    default: false,
+  },
+  // 折叠数量
+  foldNum: {
+    type: Number,
+    default: 0,
+  },
+  btnOptions: {
+    type: Array as PropType<BtnOptions[]>,
+    default: () => [],
+  },
+  // 按钮常用全局属性
+  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,
+  },
+
+  // // 权限函数
+  // hasRole: {
+  //   type: Function,
+  //   default: () => true
+  // },
+};
+export type ButtonAttrs = ExtractPropTypes<typeof buttonAttrs>;
+export default defineComponent({
+  props: buttonAttrs,
   emits: ["btnAction"],
-  setup(props, { emit, slots, attrs, expose }) {
+  setup(props: ButtonAttrs, { emit, slots, attrs, expose }) {
     // console.log('slots', slots);
     // console.log('attrs', attrs);
 
@@ -171,7 +176,7 @@ export default defineComponent({
         },
         {
           default: () => item?.label,
-        }
+        },
       );
     };
     // 下拉菜单生成函数
@@ -236,11 +241,11 @@ export default defineComponent({
                   },
                   {
                     default: () => item?.label,
-                  }
+                  },
                 );
               });
             },
-          }
+          },
         );
         renderVdom = renderVdom.concat(dropdownVdom);
       }

package/components/button/src/type.ts

@@ -0,0 +1,15 @@
+import type { ButtonProps as ElButtonProps } from "element-plus";
+import { type ButtonAttrs } from "./index.ts";
+type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never; // 展开类型工具
+
+export type ButtonProps = Expand<Partial<ButtonAttrs>>;
+
+export type BtnOptions = Expand<
+  {
+    label: string;
+    alias: string;
+    permit?: string[];
+    vIf?: (params: any) => boolean;
+    disable?: boolean | ((params: any) => boolean);
+  } & Partial<ElButtonProps>
+>;

package/components/dialog/index.ts

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

package/components/dialog/src/index.ts

@@ -9,9 +9,9 @@ import {
 import { ElDialog } from "element-plus";
 import { defaultAttrs } from "./constants.ts";
 import { prefix } from "../../config.ts";
-const propsAttrs = {};
+const dialogAttrs = {};
 
-export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+export type DialogAttrs = ExtractPropTypes<typeof dialogAttrs>;
 
 export default defineComponent({
   name: `${prefix}Dialog`,
@@ -19,7 +19,7 @@ export default defineComponent({
   // emits: eventList,
 
   // attrs, emit会继承, slots需要设置
-  setup(props: PropsAttrs, { attrs, emit, slots, expose }) {
+  setup(props: DialogAttrs, { attrs, emit, slots, expose }) {
     // const dialogRef = ref();
 
     // 暴露方法

package/components/dialog/src/type.ts

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

package/components/dictLabel/src/type.ts

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

package/components/drawer/index.ts

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

package/components/drawer/src/index.ts

@@ -9,16 +9,16 @@ import {
 import { ElDrawer } from "element-plus";
 import { defaultAttrs } from "./constants.ts";
 
-const propsAttrs = {};
+const drawerAttrs = {};
 
-export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+export type DrawerAttrs = ExtractPropTypes<typeof drawerAttrs>;
 
 export default defineComponent({
   // props: propsAttrs,
   // emits: eventList,
 
   // attrs, emit会继承, slots需要设置
-  setup(props: PropsAttrs, { attrs, emit, slots, expose }) {
+  setup(props: DrawerAttrs, { attrs, emit, slots, expose }) {
     // const drawerRef = ref();
 
     // 暴露方法

package/components/drawer/src/type.ts

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

package/components/form/index.ts

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

package/components/form/src/FormItem.ts

@@ -1,4 +1,11 @@
-import { defineComponent, h, toRefs, inject, type PropType } from "vue";
+import {
+  defineComponent,
+  h,
+  toRefs,
+  inject,
+  type PropType,
+  type ExtractPropTypes,
+} from "vue";
 import {
   ElFormItem,
   ElInput,
@@ -22,12 +29,12 @@ import {
   ElSwitch,
   ElText,
 } from "element-plus";
-
+import { type FormItemProps } from "element-plus";
 import { isFunction, isBoolean } from "lodash-es";
 import { formTypeCfg } from "./constants";
 import { formatEventName } from "./utils";
 
-const propsAttrs = {
+const formItemAttrs = {
   model: { type: Object, default: () => {} },
   // 表单名称
   label: { type: String, default: "" },
@@ -41,7 +48,7 @@ const propsAttrs = {
   // allReadonly: { type: Boolean<PropType<Boolean | Object>>, default: false },
   allReadonly: { type: Object, default: null }, // todo 上面传的类型是null报警告
   // formItem 属性
-  formItem: { type: Object, default: () => {} },
+  formItem: { type: Object as PropType<FormItemProps>, default: () => {} },
   // 表单类型属性
   attrs: { type: Object, default: () => {} },
   // 字典
@@ -52,10 +59,11 @@ const propsAttrs = {
   optionsRef: { type: Object, default: () => {} },
   mergeParams: { type: Object, default: () => {} },
 };
+export type FormItemAttrs = ExtractPropTypes<typeof formItemAttrs>;
 
 export default defineComponent({
-  props: propsAttrs,
-  setup(props, { attrs: $attrs, emit, slots, expose }) {
+  props: formItemAttrs,
+  setup(props: FormItemAttrs, { attrs: $attrs, emit, slots, expose }) {
     // 事件插槽透传
     const { formSlots, events } = inject("formContext");
 
@@ -156,7 +164,7 @@ export default defineComponent({
             ...handleAttrs(),
             ...handleEvents(),
           },
-          { ...handleSlots() }
+          { ...handleSlots() },
         );
       },
       textarea: () => {
@@ -173,7 +181,7 @@ export default defineComponent({
             ...handleAttrs(),
             ...handleEvents(),
           },
-          { ...handleSlots() }
+          { ...handleSlots() },
         );
       },
       select: () => {
@@ -193,7 +201,7 @@ export default defineComponent({
                 key: item.value,
               });
             });
-          }
+          },
         );
       },
       "select-v2": () => {
@@ -213,7 +221,7 @@ export default defineComponent({
             ...handleAttrs(),
             ...handleEvents(),
           },
-          { ...handleSlots() }
+          { ...handleSlots() },
         );
       },
       "tree-select": () => {
@@ -225,7 +233,7 @@ export default defineComponent({
             ...handleAttrs(),
             ...handleEvents(),
           },
-          { ...handleSlots() }
+          { ...handleSlots() },
         );
       },
       radio: () => {
@@ -247,7 +255,7 @@ export default defineComponent({
               });
               return v;
             },
-          }
+          },
         );
       },
       checkbox: () => {
@@ -269,7 +277,7 @@ export default defineComponent({
               });
               return v;
             },
-          }
+          },
         );
       },
       "time-select": () => {
@@ -294,7 +302,7 @@ export default defineComponent({
             ...handleAttrs(),
             ...handleEvents(),
           },
-          { ...handleSlots() }
+          { ...handleSlots() },
         );
       },
       "time-picker": () => {
@@ -329,7 +337,7 @@ export default defineComponent({
             ...handleAttrs(),
             ...handleEvents(),
           },
-          { ...handleSlots() }
+          { ...handleSlots() },
         );
       },
       text: () => {
@@ -389,7 +397,7 @@ export default defineComponent({
         },
         {
           default: () => renderTypeVdom,
-        }
+        },
       );
     };
     // 返回表单类型

package/components/form/src/index.ts

@@ -15,7 +15,7 @@ import CFormItem from "./FormItem.ts";
 import { has, isFunction } from "lodash-es";
 import { getEmits } from "./constants"; // 获取所有的事件
 import "../style/index.scss";
-const propsAttrs = {
+const formAttrs = {
   // 表单数据
   model: { type: Object, default: () => ({}) },
   // 表单项
@@ -34,12 +34,12 @@ const propsAttrs = {
   params: { type: Object, default: () => ({}) },
 };
 
-export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+export type FormAttrs = ExtractPropTypes<typeof formAttrs>;
 
 export default defineComponent({
-  props: propsAttrs,
+  props: formAttrs,
   emits: [...getEmits()],
-  setup(props: PropsAttrs, { attrs: $attrs, emit, slots, expose }) {
+  setup(props: FormAttrs, { attrs: $attrs, emit, slots, expose }) {
     provide("formContext", {
       formSlots: slots,
       events: (eProp, ...args: any) => {

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/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

@@ -1,4 +1,2 @@
-import Pagination from "./src/index";
-export * from "./src/index";
-export { Pagination };
-export default Pagination;
+export * from "./src/type.ts";
+export default "./src/index.ts";

package/components/pagination/src/index.ts

@@ -10,16 +10,16 @@ import { ElPagination } from "element-plus";
 import { get, has, isArray, isBoolean, isFunction, isNumber } from "lodash-es";
 import { defaultAttrs } from "./constants.ts";
 
-const propsAttrs = {};
+const paginationAttrs = {};
 
-export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+export type PaginationAttrs = ExtractPropTypes<typeof paginationAttrs>;
 
 export default defineComponent({
-  // props: propsAttrs,
+  // props: paginationAttrs,
   // emits: eventList,
 
   // attrs, emit会继承, slots需要设置
-  setup(props: PropsAttrs, { attrs, emit, slots, expose }) {
+  setup(props: PaginationAttrs, { attrs, emit, slots, expose }) {
     // const pageRef = ref();
 
     // 暴露方法

package/components/pagination/src/type.ts

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

package/components/search/index.ts

@@ -1,4 +1,2 @@
-import Search from "./src/index.tsx";
-export * from "./src/index.tsx";
-export { Search };
-export default Search;
+export * from "./src/type.ts";
+export default "./src/index.tsx";