@elementplus-kit/uikit 1.6.0 → 1.8.0

package/components/search/src/index.tsx

@@ -0,0 +1,306 @@
+import {
+  ref,
+  defineComponent,
+  onMounted,
+  onUnmounted,
+  type PropType,
+  type ExtractPropTypes,
+} from "vue";
+
+import { CForm, CDrawer } from "@elementplus-kit/uikit";
+import { ArrowUpBold } from "@element-plus/icons-vue";
+import "../style/index.scss";
+
+import { FormOptions } from "../../form/src/type.ts";
+
+export type SearchAttrs = ExtractPropTypes<typeof searchAttrs>;
+
+const searchAttrs = {
+  modelValue: {
+    type: Object,
+    default: {},
+  },
+  formOptions: {
+    type: Array as PropType<FormOptions>,
+    default: () => [],
+  },
+  isDrawer: {
+    type: Boolean,
+    default: false,
+  },
+}
+export default defineComponent({
+  props: searchAttrs,
+  emits: ["update:modelValue", "search", "reset", "close"],
+
+  setup(props: SearchAttrs, { emit, slots, attrs, expose }) {
+    // 自己的 slot
+    const slotsList = ["btn-left", "btn-right"];
+    // 解析 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;
+    };
+
+    // 搜索
+    const handleSearch = () => {
+      emit("search");
+      showSearchForm.value = false;
+      document.removeEventListener("click", handleClickOutside); // 销毁点击事件
+    };
+    // 重置
+    const handleReset = () => {
+      emit("reset");
+    };
+    // 关闭
+    const handleClose = () => {
+      showSearchForm.value = false;
+      document.removeEventListener("click", handleClickOutside); // 销毁点击事件
+      emit("close");
+    };
+    // 点击元素外关闭
+    const dropdownRef = ref<HTMLElement | null>(null); // 下拉表单的 ref
+
+    // 点击外部关闭函数
+    const handleClickOutside = (event: MouseEvent) => {
+      // 如果下拉表单可见，且点击事件不在下拉表单内部
+      if (
+        showSearchForm.value &&
+        dropdownRef.value &&
+        !dropdownRef.value?.$el?.contains(event.target)
+      ) {
+        showSearchForm.value = false; // 关闭下拉表单
+        document.removeEventListener("click", handleClickOutside); // 销毁点击事件
+      }
+    };
+    // 显示隐藏折叠搜索表单
+    const showSearchForm = ref(false);
+    const handleShow = () => {
+      if (showSearchForm.value) {
+        showSearchForm.value = false;
+        document.removeEventListener("click", handleClickOutside); // 销毁点击事件
+      } else {
+        showSearchForm.value = true;
+        setTimeout(() => {
+          document.addEventListener("click", handleClickOutside); // 注册点击事件
+        }, 0);
+      }
+    };
+
+    const showCount = ref(6); // 显示个数
+    const simpleRef = ref<HTMLDivElement>(null);
+    const simpleFormRef = ref<HTMLDivElement>(null);
+    const simpleFormContainerRef = ref<HTMLDivElement>(null);
+    const simpleBtnRef = ref<HTMLDivElement>(null);
+    const cFormRef = ref<HTMLDivElement>(null);
+
+    // 设置节流
+    let timer: any = null;
+    const searchResize = () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(() => {
+        calcSunResize();
+      }, 200);
+    };
+    // 计算显示个数
+    const calcSunResize = () => {
+      if (simpleFormContainerRef.value) {
+        // 寻找cForm 先写死 后期做成动态寻找
+        const cFormDom = simpleFormContainerRef.value.children[0];
+        const cFormW = simpleFormRef.value.offsetWidth;
+        // 收集子元素宽度并保存到数组中
+
+        let maxW = 0;
+        showCount.value = cFormDom?.children?.length;
+        Array.from(cFormDom.children).map((child, index) => {
+          child.style.display = "inline-flex"; // 行内布局时的默认值 如果表单换了默认值要动态变化 暂时不考虑
+          if (maxW > cFormW) {
+            child.style.display = "none";
+            return;
+          }
+
+          const computedStyles = window.getComputedStyle(child); // 获取元素 css 样式
+          const mg = computedStyles.marginRight; // 获取元素 margin-right 样式值 有单位
+          const mgValue = parseFloat(mg); // 转换为数值
+          const w = child.offsetWidth + mgValue;
+          maxW = maxW + w;
+          if (maxW > cFormW) {
+            child.style.display = "none";
+            showCount.value = index;
+            maxW = 100000;
+          }
+        });
+      }
+    };
+    // 监听表单宽度变化
+    const formWidth = ref(0);
+    const jt = () => {
+      // 获取需要监听的元素
+      const targetElement = simpleFormRef.value.children[0];
+      // 创建 ResizeObserver 实例
+      const resizeObserver = new ResizeObserver((entries) => {
+        const clearW = 25; // input clear 按钮 22 按 25 算
+        for (const entry of entries) {
+          // 获取元素最新的宽度（contentBox 是内容区尺寸，也可改用 borderBox/devicePixelContentBox）
+          const newWidth = entry.contentRect.width;
+          // 变化了才执行
+          if (newWidth !== formWidth.value) {
+            if (formWidth.value === 0) {
+              // 初始化赋值
+              formWidth.value = newWidth;
+              searchResize();
+            } else if (newWidth < formWidth.value - clearW) {
+              // 过滤抖动
+              formWidth.value = newWidth;
+              searchResize();
+            } else if (newWidth > formWidth.value + clearW) {
+              // 过滤抖动
+              searchResize();
+              formWidth.value = newWidth;
+            }
+          }
+        }
+      });
+
+      // 开始监听目标元素
+      resizeObserver.observe(targetElement);
+    };
+    onMounted(() => {
+      // jt函数会触发一次初始化
+      jt();
+      // 注册页面大小函数
+      window.addEventListener("resize", searchResize);
+    });
+    // 销毁
+    onUnmounted(() => {
+      window.removeEventListener("resize", searchResize);
+      document.removeEventListener("click", handleClickOutside); // 销毁点击事件
+    });
+
+    return () => {
+      return (
+        <div className="c-search">
+          <div className="c-search-simple" ref={simpleRef}>
+            <div className="c-search-simple-form" ref={simpleFormRef}>
+              <div
+                className="c-simple-form-container"
+                ref={simpleFormContainerRef}
+              >
+                <CForm
+                  ref={(el) => (cFormRef.value = el)}
+                  {...getEvent()}
+                  inline
+                  model={props.modelValue}
+                  formOptions={props.formOptions}
+                >
+                  {getSlot()}
+                </CForm>
+              </div>
+            </div>
+            <div className="c-search-simple-btn" ref={simpleBtnRef}>
+              {slots["arrow-left"]?.()}
+              {showCount.value < props.formOptions?.length && (
+                <div
+                  className={`c-search-simple-icon ${
+                    showSearchForm.value ? "icon-rotate" : ""
+                  }`}
+                  onClick={handleShow}
+                >
+                  <el-icon className="el-icon c-search-icon">
+                    <ArrowUpBold />
+                  </el-icon>
+                </div>
+              )}
+              {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>
+
+          {/* 下拉悬浮 */}
+          {!props.isDrawer && showSearchForm.value && (
+            <transition name="search-form-transition">
+              <el-card
+                ref={dropdownRef}
+                className="c-search-form el-card is-always-shadow"
+              >
+                <CForm
+                  {...getEvent()}
+                  inline
+                  model={props.modelValue}
+                  formOptions={props.formOptions.filter(
+                    (item, index) => index >= showCount.value,
+                  )}
+                  ref="formRef"
+                >
+                  {getSlot()}
+                </CForm>
+                <div style="text-align: right;">
+                  <el-button type="primary" onClick={handleSearch}>
+                    搜索
+                  </el-button>
+                  <el-button type="primary" onClick={handleClose}>
+                    关闭
+                  </el-button>
+                </div>
+              </el-card>
+            </transition>
+          )}
+
+          {props.isDrawer && (
+            <CDrawer title="搜索" v-model={showSearchForm.value} size="660px">
+              <CForm
+                {...getEvent()}
+                col={12}
+                model={props.modelValue}
+                formOptions={props.formOptions.filter(
+                  (item, index) => index >= showCount.value,
+                )}
+                ref="formRef"
+              >
+                {getSlot()}
+              </CForm>
+              <div style="text-align: right;">
+                <el-button type="primary" onClick={handleSearch}>
+                  搜索
+                </el-button>
+                <el-button type="primary" onClick={handleClose}>
+                  关闭
+                </el-button>
+              </div>
+            </CDrawer>
+          )}
+        </div>
+      );
+    };
+  },
+});

package/components/search/src/type.ts

@@ -0,0 +1,2 @@
+export type { SearchAttrs as SearchProps } from "./index.tsx";
+export default "./index.tsx";

package/components/search/style/index.scss

@@ -0,0 +1,104 @@
+.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-form {
+    flex: 1; // 占满剩余空间
+    overflow: auto; // 开启滚动条
+    // 滚动条宽度
+    scrollbar-width: none; // 隐藏滚动条
+  }
+  .c-simple-form-container {
+    display: inline-block;
+    > .c-form {
+      white-space: nowrap; // 防止表单内容换行
+    }
+  }
+  .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 {
+    // 添加鼠标悬停效果
+    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;
+  }
+}

package/components/table/index.ts

@@ -0,0 +1,2 @@
+export * from "./src/type.ts";
+export default "./src/index.ts";

package/components/table/src/TableColumn.ts

@@ -0,0 +1,116 @@
+import {
+  defineComponent,
+  h,
+  getCurrentInstance,
+  type ExtractPropTypes,
+} from "vue";
+import { ElTableColumn } from "element-plus";
+import {
+  defaultAttrs,
+  tableSlots,
+  tablecolumnSlots,
+  selectionColumn,
+  indexColumn,
+} from "./constants.ts";
+import { isArray, isObject } from "lodash-es";
+const propsAttrs = {
+  module: {
+    // 公共参数用于业务判断
+    type: Object,
+    default: () => {},
+  },
+  // isRadio: { // 是否为单选框
+  //   type: Boolean,
+  //   default: false,
+  // },
+  // isCheckbox: { // 是否为复选框
+  //   type: Boolean,
+  //   default: false,
+  // },
+  columnsItem: {
+    // 列数据
+    type: Array,
+    default: () => [],
+  },
+  showSelection: {
+    // 是否显示选择列
+    type: Boolean,
+    default: false,
+  },
+  showIndex: {
+    // 是否显示索引列
+    type: Boolean,
+    default: false,
+  },
+  prop: {
+    // 列数据prop
+    type: String,
+    default: undefined,
+  },
+  // 字典 暂不实现
+  dictType: { type: String, default: undefined },
+  // 字典选项
+  options: { type: Array, default: () => [] },
+};
+
+export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+
+export default defineComponent({
+  props: propsAttrs,
+  // emits: eventList,
+
+  // attrs, emit会继承, slots需要设置
+  setup(props: PropsAttrs, { attrs, emit, slots, expose }) {
+    const { tableSlots, events } = inject("tableContext");
+
+    // 属性处理
+    const getAttrs = () => {
+      const obj = {
+        ...defaultAttrs, // 设置默认值
+      };
+      return obj;
+    };
+    // 事件处理
+    const getEvents = () => {
+      const obj = {
+        ...defaultAttrs, // 设置默认值
+      };
+      return obj;
+    };
+    // 插槽处理
+    const getSlots = () => {
+      // 处理插槽
+      const obj = {};
+      // column 自带插槽
+      tablecolumnSlots.map((name) => {
+        const slotName = `${prop}.${name}`;
+        if (tableSlots[slotName]) {
+          obj[name] = tableSlots[slotName];
+        }
+      });
+      // column 列业务插槽
+      if (tableSlots[prop]) {
+        obj["default"] = tableSlots[prop];
+      }
+      return obj;
+    };
+
+    // 渲染表格列
+    const renderTableColumn = () => {
+      return h(
+        ElTableColumn,
+        {
+          ...attrs,
+          class: "c-table-column",
+        },
+        {
+          //   default: () => renderTableColumn(),
+          //   ...getSlots(),
+        }
+      );
+    };
+
+    // 返回渲染函数
+    return () => renderTableColumn();
+  },
+});

package/components/table/src/constants.ts

@@ -0,0 +1,42 @@
+export const defaultAttrs = {
+  // destroyOnClose: true,
+};
+export const tableEvents = [
+  "select",
+  "select-all",
+  "selection-change",
+  "cell-mouse-enter",
+  "cell-mouse-leave",
+  "cell-click",
+  "cell-dblclick",
+  "cell-contextmenu",
+  "row-click",
+  "row-contextmenu",
+  "row-dblclick",
+  "header-click",
+  "header-contextmenu",
+  "sort-change",
+  "filter-change",
+  "current-change",
+  "header-dragend",
+  "expand-change",
+  "scroll",
+];
+
+export const tableSlots = ["default", "append", "empty"];
+export const tablecolumnSlots = ["default", "header", "filter-icon", "expand"];
+
+export const selectionColumn = {
+  type: "selection",
+  width: 50,
+  align: "center",
+};
+export const indexColumn = {
+  type: "index",
+  width: 50,
+  align: "center",
+};
+export const actionColumn = {
+  prop: "action",
+  align: "center",
+};