@elementplus-kit/uikit 1.5.0 → 1.7.0

package/components/form/src/FormItem.ts

@@ -1,4 +1,4 @@
-import { defineComponent, ref, h, toRefs, inject, type PropType } from "vue";
+import { defineComponent, h, toRefs, inject, type PropType } from "vue";
 import {
   ElFormItem,
   ElInput,
@@ -110,7 +110,8 @@ export default defineComponent({
       if (isFunction(attrs.value?.disabled)) {
         disabled = attrs.value.disabled(props.mergeParams);
       }
-      if (isBoolean(attrs.value?.disabled)) { // 在 attrs 后面结构, 也要处理直接赋值的情况，不然会覆盖
+      if (isBoolean(attrs.value?.disabled)) {
+        // 在 attrs 后面结构, 也要处理直接赋值的情况，不然会覆盖
         disabled = attrs.value.disabled;
       }
       // 全部只读

package/components/form/src/index.ts

@@ -9,10 +9,10 @@ import {
   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 { ElForm, ElRow, ElCol } from "element-plus";
+// import zhCn from "element-plus/es/locale/lang/zh-cn";
 import CFormItem from "./FormItem.ts";
-import { has, isArray, isBoolean, isFunction, isNumber } from "lodash-es";
+import { has, isFunction } from "lodash-es";
 import { getEmits } from "./constants"; // 获取所有的事件
 import "../style/index.scss";
 const propsAttrs = {
@@ -179,24 +179,15 @@ export default defineComponent({
     // 渲染表单
     const renderForm = () => {
       return h(
-        ElConfigProvider,
+        ElForm,
         {
-          locale: zhCn,
+          ref: cFormFnRef,
+          ...$attrs,
+          model: model.value,
+          class: allReadonly.value ? "isReadonly c-form" : "c-form", // 放在 $attrs 后面可自动合并 放在 $attrs 前面会被 $attrs.class 覆盖， h函数渲染的是标签就会覆盖 是组件就会合并不用管顺序
         },
         {
-          default: () =>
-            h(
-              ElForm,
-              {
-                ref: cFormFnRef,
-                ...$attrs,
-                model: model.value,
-                class: allReadonly.value ? "isReadonly c-form" : "c-form", // 放在 $attrs 后面可自动合并 放在 $attrs 前面会被 $attrs.class 覆盖， h函数渲染的是标签就会覆盖 是组件就会合并不用管顺序
-              },
-              {
-                default: () => renderRow(),
-              }
-            ),
+          default: () => renderRow(),
         }
       );
     };

package/components/search/src/index.tsx

@@ -23,7 +23,7 @@ export default defineComponent({
 
   setup(props, { emit, slots, attrs, expose }) {
     // 自己的 slot
-    const slotsList = ["active", "btn-left", "btn-right"];
+    const slotsList = ["btn-left", "btn-right"];
     // 解析 attrs 中的事件
     const getEvent = () => {
       let formObj: any = {};
@@ -204,7 +204,7 @@ export default defineComponent({
               </div>
             </div>
             <div className="c-search-simple-btn" ref={simpleBtnRef}>
-              {slots["btn-left"]?.()}
+              {slots["arrow-left"]?.()}
               {showCount.value < props.formOptions?.length && (
                 <div
                   className={`c-search-simple-icon ${showSearchForm.value ? "icon-rotate" : ""
@@ -216,13 +216,21 @@ export default defineComponent({
                   </el-icon>
                 </div>
               )}
-              <el-button type="primary" onClick={handleSearch}>
-                搜索
-              </el-button>
-              <el-button type="primary" onClick={handleReset}>
-                重置
-              </el-button>
-              {slots["btn-right"]?.()}
+              {slots["search-btn"]
+                ? slots["search-btn"]()
+                : (
+                  <>
+                    {slots["btn-left"]?.()}
+                    <el-button type="primary" onClick={handleSearch}>
+                      搜索
+                    </el-button>
+                    <el-button type="primary" onClick={handleReset}>
+                      重置
+                    </el-button>
+                    {slots["btn-right"]?.()}
+                  </>
+                )
+              }
             </div>
           </div>
 

package/package.json

@@ -1,17 +1,24 @@
 {
   "name": "@elementplus-kit/uikit",
-  "version": "1.5.0",
+  "version": "1.7.0",
   "description": "",
   "main": "./components/index.ts",
   "peerDependencies": {
-    "element-plus": "^2.0.0",
-    "vue": "^3.0.0"
+    "@element-plus/icons-vue": "*",
+    "element-plus": "*",
+    "lodash-es": "*",
+    "vue": "*"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue-jsx": "^5.0.1",
+    "vite": "^7.1.3"
+  },
   "scripts": {
-    "build": "build",
+    "build": "vite build",
     "pub": "npx standard-version && npm publish"
   }
 }

package/vite.config.ts

@@ -1,8 +1,8 @@
-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'
+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: [
@@ -14,13 +14,17 @@ export default defineConfig({
     // }),
   ],
   build: {
+    // 指定打包输出目录名称，替换成你想要的名字
+    outDir: "dist",
     lib: {
-      entry: 'components/index.ts',
-      name: 'ElementPlusKit',
-      fileName: 'index',
+      entry: "components/index.ts",
+      name: "ElementPlusKit",
+      fileName: "index",
+      // fileName: (format) => `my-utils.${format}.js`,
     },
     rollupOptions: {
-      external: ['vue', 'element-plus'],
+      external: ["vue", "element-plus", "lodash-es", "@element-plus/icons-vue"],
     },
+    emptyOutDir: true,
   },
-})
+});

package/aaaindex.ts

@@ -1,55 +0,0 @@
-// // 引入封装好的组件
-// // import kButton from "./k-button/index.vue";
-// // 将来如果有其它组件,都可以写到这个数组里
-// // const coms = [kButton];
-
-// // 批量组件注册
-// const install = function (Vue, options) {
-//   console.log("🚀 ~ install ~ Vue:", Vue);
-//   console.log("插件安装了 ", options);
-
-//   coms.forEach((com) => {
-//     console.log("🚀 ~ install ~ com:", com);
-//     Vue.component("k-button", com);
-//   });
-// };
-
-// import { capitalize } from "lodash-es";
-
-// // import { prefix as basePrefix } from "./config.ts";
-// // 将来如果有其它组件,都可以写到这个数组里
-// // const coms = [CForm, CTable, CTable2, CPagination, CDialog, CDrawer, CSearch];
-
-// // 批量组件注册
-// const install = function (app, options = {}) {
-//   // 获取自定义前缀，默认使用组件原名称
-//   // let { prefix = "" } = options;
-//   // prefix = capitalize(prefix) || basePrefix;
-//   // // 循环注册
-//   // coms.forEach((item) => {
-//   //   // 组件可能直接是组件对象，或者有com属性
-//   //   const component = item.com || item;
-//   //   const componentName = component.name || item.name;
-//   //   if (componentName) {
-//   //     // 生成注册名称：前缀 + 组件名
-//   //     const registerName = prefix
-//   //       ? `${prefix}${componentName.replace(/^[A-Z]/, (char) =>
-//   //           char.toLowerCase()
-//   //         )}`
-//   //       : componentName;
-//   //     // 注册组件
-//   //     app.component(registerName, component);
-//   //   }
-//   // });
-// };
-
-// // 创建插件对象，包含install方法
-// const plugin = {
-//   install,
-// };
-
-// // 导出插件
-// // export default plugin; // 这个方法以后再使用的时候可以被use调用
-// // 为什么导出为install? 安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。
-// // 如果插件是一个函数，它会被作为install 方法。install 方法调用时，会将 Vue 作为参数传入。
-// export default install; // 这个方法以后再使用的时候可以被use调用