@elementplus-kit/uikit 1.0.0 → 1.0.2

package/aaaindex.ts

@@ -0,0 +1,55 @@
+// // 引入封装好的组件
+// // 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调用

package/components/config.ts

@@ -0,0 +1,4 @@
+// 组件配置
+// 组件名称前缀 组件标识 class 前缀
+import { capitalize } from "lodash-es";
+export const prefix = capitalize("C"); // 首字母大写 其他字母小写

package/components/dialog/index.ts

@@ -1,5 +1,6 @@
 import Dialog from "./src/index";
-// import './style/index.scss'
-
-export const CDialog = Dialog;
-export default { com: Dialog, name: "CDialog" };
+export * from "./src/index";
+// 把变量 Dialog 导出为 CDialog
+// export { Dialog, Dialog as CDialog };
+export { Dialog };
+export default Dialog;

package/components/dialog/src/index.ts

@@ -1,12 +1,20 @@
-import { ref, h, computed, toRefs, type ExtractPropTypes } from "vue";
+import {
+  defineComponent,
+  ref,
+  h,
+  computed,
+  toRefs,
+  type ExtractPropTypes,
+} from "vue";
 import { ElDialog } from "element-plus";
 import { defaultAttrs } from "./constants.ts";
-
+import { prefix } from "../../config.ts";
 const propsAttrs = {};
 
 export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
 
-export default {
+export default defineComponent({
+  name: `${prefix}Dialog`,
   // props: propsAttrs,
   // emits: eventList,
 
@@ -43,4 +51,4 @@ export default {
     // 返回渲染函数
     return () => render();
   },
-};
+});

package/components/drawer/index.ts

@@ -1,5 +1,4 @@
 import Drawer from "./src/index";
-// import './style/index.scss'
-
-export const CDrawer = Drawer;
-export default { com: Drawer, name: "CDrawer" };
+export * from "./src/index";
+export { Drawer };
+export default Drawer;

package/components/drawer/src/index.ts

@@ -1,4 +1,11 @@
-import { ref, h, computed, toRefs, type ExtractPropTypes } from "vue";
+import {
+  defineComponent,
+  ref,
+  h,
+  computed,
+  toRefs,
+  type ExtractPropTypes,
+} from "vue";
 import { ElDrawer } from "element-plus";
 import { defaultAttrs } from "./constants.ts";
 
@@ -6,7 +13,7 @@ const propsAttrs = {};
 
 export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
 
-export default {
+export default defineComponent({
   // props: propsAttrs,
   // emits: eventList,
 
@@ -43,4 +50,4 @@ export default {
     // 返回渲染函数
     return () => render();
   },
-};
+});

package/components/form/index.ts

@@ -1,8 +1,4 @@
-import Form, { type PropsAttrs } from './src/index'
-import type { FormItemListItem } from './src/types'
-// import './style/index.scss'
-
-export const CForm = Form
-export default { com: Form, name: "CForm" };
-
-export type { PropsAttrs, FormItemListItem }
+import Form from "./src/index";
+export * from "./src/index";
+export { Form };
+export default Form;

package/components/form/src/FormItem.ts

@@ -1,4 +1,4 @@
-import { ref, h, toRefs, inject, type PropType } from "vue";
+import { defineComponent, ref, h, toRefs, inject, type PropType } from "vue";
 import {
   ElFormItem,
   ElInput,
@@ -52,7 +52,7 @@ const propsAttrs = {
   optionsRef: { type: Object, default: () => {} },
 };
 
-export default {
+export default defineComponent({
   props: propsAttrs,
   setup(props, { attrs: $attrs, emit, slots, expose }) {
     // 事件插槽透传
@@ -431,4 +431,4 @@ export default {
     // 返回表单类型
     return () => render();
   },
-};
+});

package/components/form/src/index.ts

@@ -1,4 +1,5 @@
 import {
+  defineComponent,
   ref,
   h,
   computed,
@@ -33,7 +34,7 @@ const propsAttrs = {
 
 export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
 
-export default {
+export default defineComponent({
   props: propsAttrs,
   emits: [...getEmits()],
   setup(props: PropsAttrs, { attrs: $attrs, emit, slots, expose }) {
@@ -179,4 +180,4 @@ export default {
     // 返回渲染函数
     return () => renderForm();
   },
-};
+});

package/components/index.ts

@@ -0,0 +1,41 @@
+// 表单
+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;
+
+// 表格2
+import Table2 from "./table2/index.ts";
+export * from "./table2/index.ts";
+export const CTable2 = Table2;
+
+// 分页
+import Pagination from "./pagination/index.ts";
+export * from "./pagination/index.ts";
+export const CPagination = Pagination;
+
+// 弹窗
+import Dialog from "./dialog/index.ts";
+export * from "./dialog/index.ts";
+export const CDialog = Dialog;
+
+// 抽屉
+import Drawer from "./drawer/index.ts";
+export * from "./drawer/index.ts";
+export const CDrawer = Drawer;
+
+// 搜索
+// import Search from "./search/index.ts";
+// export * from "./search/index.ts";
+// export const CSearch = Search;
+import Search from "./search/index.ts";
+export * from "./search/index.ts";
+export const CSearch = Search;
+// 测试单个引入-----------------------------
+// export * from "./dialog/index.ts"; // 弹窗
+// export * from "./drawer/index.ts"; // 抽屉
+// 测试单个引入-----------------------------

package/components/pagination/index.ts

@@ -1,5 +1,4 @@
-import Pagination from './src/index'
-// import './style/index.scss'
-
-export const CPagination = Pagination
-export default { com: Pagination, name: "CPagination" };
+import Pagination from "./src/index";
+export * from "./src/index";
+export { Pagination };
+export default Pagination;

package/components/pagination/src/index.ts

@@ -1,4 +1,11 @@
-import { ref, h, computed, toRefs, type ExtractPropTypes } from "vue";
+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";
@@ -7,7 +14,7 @@ const propsAttrs = {};
 
 export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
 
-export default {
+export default defineComponent({
   // props: propsAttrs,
   // emits: eventList,
 
@@ -40,4 +47,4 @@ export default {
     // 返回渲染函数
     return () => render();
   },
-};
+});

package/components/search/index.ts

@@ -1,56 +1,4 @@
-import {
-  ref,
-  h,
-  computed,
-  toRefs,
-  getCurrentInstance,
-  provide,
-  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";
-import { CForm } from "@elementplus-kit/uikit";
-const propsAttrs = {
-  // 表单数据
-  model: { type: Object, default: () => ({}) },
-  // 表单项
-  formOptions: { type: Array, default: () => [] },
-};
-
-export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
-
-export default {
-  props: propsAttrs,
-  emits: [...getEmits()],
-  setup(props: PropsAttrs, { attrs: $attrs, emit, slots, expose }) {
-    const searchRef = ref();
-
-    // 暴露方法
-    expose({
-      optionsRef,
-    });
-
-    // 解构props
-    const { model, formOptions, readonly, gutter, col } = toRefs(props);
-
-    // 渲染表单
-    const renderForm = () => {
-      return h(
-        "div",
-        {
-          ref: searchRef,
-          ...$attrs,
-          class: 'c-search'
-        },
-        {
-          'div',
-        }
-      );
-    };
-
-    // 返回渲染函数
-    return () => renderForm();
-  },
-};
+import Search from "./src/index.tsx";
+export * from "./src/index.tsx";
+export { Search };
+export default Search;

package/components/search/src/index-/346/272/220.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="c-search">
+    <div class="c-search-simple">
+      <div class="c-search-simple-form">
+        <c-form v-bind="getEvent(), getSlot('form')" inline :model="formData"
+          :formOptions="props.formOptions.filter((item, index) => index < showCount)" ref="formRef">
+          <template #[`c-search-button`]>
+            <slot name="active"></slot>
+          </template>
+        </c-form>
+      </div>
+      <div class="c-search-simple-btn">
+        <slot name="btn-left" />
+        <div class="c-search-simple-icon" @click="handleShow" v-if="showCount < props.formOptions.length"
+          :class="{ 'icon-rotate': showSearchForm }">
+          <el-icon class="c-search-icon">
+            <ArrowUpBold />
+          </el-icon>
+        </div>
+        <el-button type="primary" @click="handleSearch">搜索</el-button>
+        <el-button type="primary" @click="handleReset">重置</el-button>
+        <slot name="btn-right" />
+      </div>
+    </div>
+    <!-- 下拉悬浮 -->
+    <transition name="search-form-transition">
+      <el-card class="c-search-form" v-if="showSearchForm && props.isDrawer">
+        <c-form v-bind="getEvent(), getSlot('form')"" inline :model="formData"
+          :formOptions="props.formOptions.filter((item, index) => index >= showCount)" ref="formRef">
+        </c-form>
+        <div style="text-align: right;">
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button type="primary" @click="handleClose">关闭</el-button>
+        </div>
+      </el-card>
+    </transition>
+    <c-drawer v-if="!props.isDrawer" title="搜索" v-model="showSearchForm" size="660px">
+      <c-form v-bind="getEvent(), getSlot('form')" :col="12" :model="formData"
+        :formOptions="props.formOptions.filter((item, index) => index >= showCount)" ref="formRef">
+      </c-form>
+      <div style="text-align: right;">
+        <el-button type="primary" @click="handleSearch">搜索</el-button>
+        <el-button type="primary" @click="handleClose">关闭</el-button>
+      </div>
+    </c-drawer>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, useAttrs, useSlots, defineModel } from 'vue'
+import { CForm, CDrawer } from '@elementplus-kit/uikit'
+import { ArrowUpBold } from '@element-plus/icons-vue'
+const props = defineProps({
+  formOptions: {
+    type: Array,
+    default: () => []
+  },
+  formItemButton: {
+    type: Object,
+    default: () => ({
+      label: '',
+      prop: 'c-button',
+    })
+  },
+  isDrawer: {
+    type: Boolean,
+    default: true
+  },
+  showCount: { // 显示简洁栏的个数
+    type: Number,
+    default: 3
+  }
+})
+const emit = defineEmits(['search', 'reset', 'close'])
+
+const formData = defineModel()
+const attr = useAttrs()
+const slots = useSlots()
+
+// 自己的 slot 
+const slotsMap = ['active']
+// 解析 attr 中的事件
+const getEvent = (name: string) => {
+  let obj = {}
+  Object.keys(attr).forEach(key => {
+    if (key.startsWith('on')) {
+      obj[key] = attr[key]
+    }
+  })
+  return obj
+}
+
+// 解析插槽 
+const getSlot = (type: 'form' | 'search') => {
+  let searchObj: any = {}
+  let formObj: any = {}
+  Object.keys(slots).forEach(key => {
+    if (slotsMap.includes(key)) {
+      searchObj[key] = slots[key]
+    } else {
+      formObj[key] = slots[key]
+    }
+  })
+  return type === 'search' ? formObj : searchObj
+}
+
+const handleSearch = () => {
+  emit('search')
+  showSearchForm.value = false
+}
+
+const handleReset = () => {
+  emit('reset')
+}
+
+const handleClose = () => {
+  showSearchForm.value = false
+  emit('close')
+}
+const showCountC = computed(() => {
+  return props.showCount
+})
+
+const showCount = ref(3) // 显示个数
+const showSearchForm = ref(false) // 显示搜索表单
+const handleShow = () => {
+  showSearchForm.value = !showSearchForm.value
+}
+
+// const formOptionsSimple = computed(() => {
+//   // 取3为简洁栏
+//   const l = props.formOptions?.slice(0, 3)
+//   l.push(props.formItemButton)
+//   formOptionsHidden.value = props.formOptions?.slice(3)
+//   return l
+// })
+
+// // const formOptionsSimple = ref([]) // 简洁栏
+// // const formOptionsHidden = ref([]) // 隐藏栏
+
+// 窗口大小变化时，调整搜索表单的宽度
+// const handleResize = () => {
+//   if (window.innerWidth <= 768) {
+//     formOptions.value.forEach(item => {
+//       item.col = {
+//         span: 24
+//       }
+//     })
+//   } else {
+//     formOptions.value.forEach(item => {
+//       item.col = {
+//         span: 8
+//       }
+//     })
+//   }
+// }
+// window.addEventListener('resize', handleResize)
+</script>
+<style scoped lang="scss">
+.search-btn {
+  margin-right: 20px;
+  margin-left: auto;
+}
+
+.c-search {
+  position: relative;
+  height: 50px;
+
+  .c-search-simple {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .c-search-simple-btn {
+    display: flex;
+    margin-left: auto;
+  }
+
+  .c-search-simple-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    height: 32px;
+    width: 32px;
+    margin-right: 10px;
+    border-radius: 4px;
+    background-color: #409eff;
+    transition: all 0.2s;
+
+    &:hover {
+      background-color: rgb(121, 187, 255);
+    }
+
+    &:active {
+      background-color: rgb(51, 126, 204);
+    }
+  }
+
+  .c-search-icon {
+    // 添加鼠标悬停效果
+    display: inline-block;
+    color: #fff;
+    transition: all 0.2s;
+
+  }
+
+  .icon-rotate {
+    background-color: rgb(51, 126, 204);
+
+    .c-search-icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  .c-search-form {
+    width: 100%;
+    position: absolute;
+    top: 50px;
+    left: 0;
+    overflow: hidden;
+    z-index: 10;
+    background-color: #fff;
+  }
+}
+
+/* 下拉动画效果 */
+.search-form-transition {
+
+  &-enter-active,
+  &-leave-active {
+    transition: all 0.3s ease;
+    /* 动画过渡时间和缓动函数 */
+    overflow: hidden;
+    max-height: 500px;
+    /* 确保足够大的最大高度以容纳内容 */
+  }
+
+  &-enter-from {
+    max-height: 0;
+    /* 入场开始时高度为0 */
+    opacity: 0;
+    /* 可以添加透明度效果增强视觉体验 */
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &-leave-to {
+    max-height: 0;
+    /* 出场结束时高度为0 */
+    opacity: 0;
+    /* 可以添加透明度效果增强视觉体验 */
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+</style>