@elementplus-kit/uikit 1.0.3 → 1.0.4

package/components/button/src/index.ts

@@ -11,18 +11,29 @@ export default defineComponent({
       type: Object,
       default: () => ({}),
     },
-    // modelValue: {
-    //   type: Object,
-    //   default: {}
-    // },
-    buttonOptions: {
+    btnOptions: {
       type: Array,
       default: () => [],
     },
     // 权限函数
     hasPermission: {
       type: Function,
-      default: () => true,
+    },
+    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: {
@@ -30,33 +41,62 @@ export default defineComponent({
     //   default: () => true
     // },
   },
-
+  emits: ["btnAction"],
   setup(props, { emit, slots, attrs, expose }) {
-    // const slotsList = ["active", "btn-left", "btn-right"];
     // console.log('slots', slots);
     // console.log('attrs', attrs);
 
-    // 解析插槽
+    // 解析属性
     const getAttrs = (item) => {
-      let defaultAttrs = {};
-      // const { alias, hasPermission, vIf, ...p } = item;
+      let defaultAttrs = {
+        size: props.size,
+        plain: props.plain,
+        text: props.text,
+        link: props.link,
+        class: `c-alias-${item.alias || ""}`,
+      };
+
       if (item?.alias && typeActiveMap[item.alias]) {
-        defaultAttrs = typeActiveMap[item.alias];
+        defaultAttrs = {
+          ...typeActiveMap[item.alias],
+          ...defaultAttrs,
+        };
       }
+
       // 过滤掉非elbutton属性
-      defaultAttrs = {
-        ...defaultAttrs,
-        ...item,
-      };
+      const filterAttrsList = [
+        "label",
+        "alias",
+        "permission",
+        "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)) {
+        defaultAttrs.disabled = item.disable(props.params);
+      }
       return defaultAttrs;
     };
+
     const render = () => {
-      console.log("render 执行");
-      // 过滤权限
       let list = [];
-      props.buttonOptions.map((item) => {
-        if (has(item, "permission") && isArray(item.permission)) {
-          if (props.hasPermission && props.hasPermission(item.permission)) {
+      // 过滤权限
+      props.btnOptions.map((item) => {
+        if (
+          isArray(item.permission) &&
+          item.permission.length > 0 &&
+          isFunction(props.hasPermission)
+        ) {
+          if (props.hasPermission(item.permission)) {
             list.push(item);
           }
         } else {
@@ -65,25 +105,34 @@ export default defineComponent({
       });
 
       const listR = [];
+      // 过滤 vIf
       list.map((item) => {
-        // if (has(item, "vIf")) {
-          if (has(item, "vIf") && isFunction(item.vIf) && item.vIf(props.params) !== undefined) {
-            console.log('aaaaaaaaaa', item.vIf(props.params));
-            if (item.vIf(props.params)) {
-              listR.push(item);
-            }
-          } else {
+        if (
+          has(item, "vIf") &&
+          isFunction(item.vIf) &&
+          item.vIf(props.params) !== undefined
+        ) {
+          if (item.vIf(props.params)) {
             listR.push(item);
           }
-        // } else {
-        //   listR.push(item);
-        // }
+        } else {
+          listR.push(item);
+        }
       });
-      console.log("🚀 ~ render ~ listR:", listR);
+
       return listR.map((item) => {
-        return h(ElButton, getAttrs(item), {
-          default: () => item?.name,
-        });
+        return h(
+          ElButton,
+          {
+            ...getAttrs(item),
+            onClick: () => {
+              emit("btnAction", item.alias, props.params);
+            },
+          },
+          {
+            default: () => item?.label,
+          }
+        );
       });
     };
     return () => render();

package/components/form/src/FormItem.ts

@@ -23,7 +23,7 @@ import {
   ElText,
 } from "element-plus";
 
-import { isFunction, has } from "lodash-es";
+import { isFunction, isBoolean } from "lodash-es";
 import { formTypeCfg } from "./constants";
 import { formatEventName } from "./utils";
 
@@ -106,9 +106,12 @@ export default defineComponent({
     // 获取禁用状态
     const getDisabled = () => {
       let disabled = false;
-      if (has(attrs.value, "disabled") && isFunction(attrs.value.disabled)) {
+      if (isFunction(attrs.value?.disabled)) {
         disabled = attrs.value.disabled(model.value);
       }
+      if (isBoolean(attrs.value?.disabled)) { // 在 attrs 后面结构, 也要处理直接赋值的情况，不然会覆盖
+        disabled = attrs.value.disabled;
+      }
       // 全部只读
       if (allReadonly.value) {
         disabled = true;
@@ -137,14 +140,6 @@ export default defineComponent({
       return typeAttrs;
     };
 
-    // 获取事件和属性
-    const getEventsAndAttrs = () => {
-      return {
-        ...handleEvents(),
-        ...handleAttrs(),
-      };
-    };
-
     // 设置元素 Ref
     const setElRef = (vEl: any, value: string) => {
       props.optionsRef[`${value}Ref`] = vEl;
@@ -353,31 +348,6 @@ export default defineComponent({
     };
 
     const renderType = () => {
-      // // 有下拉
-      // if (['cascader', 'select-v2', 'tree-select'].includes(type)) {
-      //   defailtAttrs.options = options.value
-      // }
-      // if (['tree-select'].includes(type)) {
-      //   defailtAttrs.data = options.value
-      // }
-
-      // // 只读转禁用
-      // if ([''].includes(type)) {
-      // }
-      // if (['condition'].includes(type)) {
-      //   return getType(type.value)
-      // } else {
-      //   return h(getType(type.value), {
-      //     modelValue: model.value[prop.value],
-      //     'onUpdate:modelValue': (val) => (model.value[prop.value] = val),
-      //     ...attrs.value,
-      //   })
-      // }
-      // return h(ElInput, {
-      //   vModel: model.value[prop.value],
-      //   ...attrs,
-      // })
-
       // 自动启动插槽
       if (formSlots[prop.value]) {
         return getFormType["slot"]();
@@ -397,16 +367,9 @@ export default defineComponent({
       // 非插槽类型
       return getFormType[type.value]();
     };
-    // 处理事件
-    const getAttribute = () => {
-      return {};
-    };
-    // 处理属性
-    const getEvents = () => {
-      return {};
-    };
 
     const render = () => {
+      const renderTypeVdom = renderType();
       return h(
         ElFormItem,
         {
@@ -424,7 +387,7 @@ export default defineComponent({
           ...formItem.value,
         },
         {
-          default: () => renderType(),
+          default: () => renderTypeVdom,
         }
       );
     };

package/components/form/src/index.ts

@@ -60,7 +60,7 @@ export default defineComponent({
     });
 
     // 解构props
-    const { model, formOptions, readonly, gutter, col } = toRefs(props);
+    const { model, formOptions, readonly, gutter, col} = toRefs(props);
 
     // 暴露elForm组件上的方法
     const vm = getCurrentInstance(); // 获取虚拟DOM实例
@@ -151,7 +151,7 @@ export default defineComponent({
             {
               class: "c-col",
               span: has(item, "col")
-                ? col
+                ? item.col
                 : col?.value
                 ? col?.value
                 : isLayout.value
@@ -170,6 +170,7 @@ export default defineComponent({
 
     // 渲染表单
     const renderForm = () => {
+      console.log('$attrs', $attrs);
       return h(
         ElConfigProvider,
         {
@@ -182,6 +183,7 @@ export default defineComponent({
               {
                 ref: cFormFnRef,
                 ...$attrs,
+                model: model.value,
                 class: allReadonly.value ? "isReadonly c-form" : "c-form", // 放在 $attrs 后面可自动合并 放在 $attrs 前面会被 $attrs.class 覆盖， h函数渲染的是标签就会覆盖 是组件就会合并不用管顺序
               },
               {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementplus-kit/uikit",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "",
   "main": "./components/index.ts",
   "peerDependencies": {

package/vite.config.ts

@@ -0,0 +1,26 @@
+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: {
+    lib: {
+      entry: 'components/index.ts',
+      name: 'ElementPlusKit',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['vue', 'element-plus'],
+    },
+  },
+})