@elementplus-kit/uikit 1.6.0 → 1.7.0

package/components/form/src/index.ts

@@ -0,0 +1,198 @@
+import {
+  defineComponent,
+  ref,
+  h,
+  computed,
+  toRefs,
+  getCurrentInstance,
+  provide,
+  type ExtractPropTypes,
+  type PropType,
+} from "vue";
+import { ElForm, ElRow, ElCol } from "element-plus";
+// import zhCn from "element-plus/es/locale/lang/zh-cn";
+import CFormItem from "./FormItem.ts";
+import { has, isFunction } from "lodash-es";
+import { getEmits } from "./constants"; // 获取所有的事件
+import "../style/index.scss";
+const propsAttrs = {
+  // 表单数据
+  model: { type: Object, default: () => ({}) },
+  // 表单项
+  formOptions: { type: Array, default: () => [] },
+  // 只读
+  readonly: { type: Boolean, default: false },
+  // row 间距
+  gutter: {
+    // tode 类型错误警告
+    type: (Number as PropType<number>) || (String as PropType<string>),
+    default: undefined,
+  },
+  // row 列数
+  col: { type: Number, default: undefined },
+  // 额外业务全局参数
+  params: { type: Object, default: () => ({}) },
+};
+
+export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+
+export default defineComponent({
+  props: propsAttrs,
+  emits: [...getEmits()],
+  setup(props: PropsAttrs, { attrs: $attrs, emit, slots, expose }) {
+    provide("formContext", {
+      formSlots: slots,
+      events: (eProp, ...args: any) => {
+        // 按钮 reset 事件
+        // if (e == 'reset') {
+        //   formRef.value?.resetFields()
+        // }
+        emit(eProp, ...args);
+      },
+    });
+
+    // 各个表单组件的 ref
+    const optionsRef = ref<any>({});
+
+    // 暴露方法
+    expose({
+      optionsRef,
+    });
+
+    // 解构props
+    const { model, formOptions, readonly, gutter, col } = toRefs(props);
+
+    // 暴露elForm组件上的方法
+    const vm = getCurrentInstance(); // 获取虚拟DOM实例
+    const cFormFnRef = (el) => {
+      if (!el) return;
+      vm.exposed = el; // 设置暴露对象
+      vm.exposeProxy = el; // 设置代理暴露对象
+    };
+
+    // 全部只读
+    const allReadonly = computed(() => readonly.value);
+
+    // 是否 row 布局 || ['', 0].includes(gutter.value)
+    const isLayout = computed(
+      () =>
+        ["", 0].includes(gutter?.value) ||
+        col?.value ||
+        formOptions?.value.some((item) => has(item, "col"))
+    );
+
+    // 渲染 row
+    const renderRow = () => {
+      const formItemVdom = renderFormItem();
+      if (isLayout.value) {
+        return h(
+          ElRow,
+          {
+            class: "c-row",
+            // gutter: gutter.value === 0 || gutter.value ? gutter.value : 10,
+            gutter: gutter.value || 20,
+            ...$attrs,
+          },
+          {
+            default: () => formItemVdom,
+          }
+        );
+      } else {
+        return formItemVdom;
+      }
+    };
+    // 合并 formData 和 params
+    const mergeParams = computed(() => {
+      return { formData: model.value, params: props.params };
+    });
+    // 渲染表单项
+    const renderFormItem = () => {
+      // 过滤权限
+      const list = [];
+
+      formOptions.value.map((item) => {
+        // 处理 vIf true 显示 false 隐藏
+        if (
+          isFunction(item?.vIf) &&
+          item.vIf(mergeParams.value) !== undefined
+        ) {
+          if (item.vIf(mergeParams.value)) {
+            list.push(item);
+          }
+        } else {
+          list.push(item);
+        }
+      });
+      return list.map((item) => {
+        // const { label, prop, type, required, col, formItem, attrs } = item
+        // const { label, prop, type, required, col, formItem, attrs, ...args } = item
+        const rFormItem = () => {
+          return h(CFormItem, {
+            class: "c-form-itme",
+            model: model.value,
+            allReadonly,
+            mergeParams: mergeParams.value,
+            ...item,
+            optionsRef: optionsRef.value,
+          });
+        };
+        if (isLayout.value) {
+          // 是否有 col 插槽
+          let colSlot = undefined;
+          let colSlotName = `col.${item.prop}`;
+          // 手动开启 col 插槽
+          if (item?.colSlot) {
+            if (has(slots, colSlotName)) {
+              colSlot = slots[colSlotName];
+            } else {
+              colSlot = () => "col插槽模板未定义";
+            }
+          } else {
+            // 自动开启 col 插槽
+            if (has(slots, colSlotName)) {
+              colSlot = slots[colSlotName];
+            }
+          }
+
+          return h(
+            ElCol,
+            {
+              class: "c-col",
+              span: has(item, "col")
+                ? item.col
+                : col?.value
+                ? col?.value
+                : isLayout.value
+                ? 8
+                : undefined,
+            },
+            {
+              default: () => (colSlot ? colSlot() : rFormItem()),
+            }
+          );
+        } else {
+          return rFormItem();
+        }
+      });
+    };
+
+    // 渲染表单
+    const renderForm = () => {
+      return h(
+        ElForm,
+        {
+          ref: cFormFnRef,
+          ...$attrs,
+          model: model.value,
+          class: allReadonly.value ? "isReadonly c-form" : "c-form", // 放在 $attrs 后面可自动合并 放在 $attrs 前面会被 $attrs.class 覆盖， h函数渲染的是标签就会覆盖 是组件就会合并不用管顺序
+        },
+        {
+          default: () => renderRow(),
+        }
+      );
+    };
+
+    // 返回渲染函数
+    return () => renderForm();
+  },
+});

package/components/form/src/types.ts

@@ -0,0 +1,39 @@
+export interface FormItemListItem {
+  type: string
+  label?: string
+  prop: string
+  required?: Boolean
+  vIf?: boolean | ((item: FormItemListItem) => boolean)
+  dictType?: string
+  options?: Array<Object>
+  col?: Number
+  formItem?: Object
+  attrs?: Object
+}
+
+export interface FormItemList {
+  module: Object
+  formOpsions: FormItemListItem[]
+  readonly: boolean
+}
+
+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'

package/components/form/src/utils.ts

@@ -0,0 +1,4 @@
+// 字符串转大驼峰
+export const formatEventName = (name: string) => {
+  return name.replace(/(?:^|-)(\w)/g, (_, c) => c.toUpperCase())
+}

package/components/form/style/index.scss

@@ -0,0 +1,5 @@
+.c-form.el-form--inline {
+  .el-select {
+    --el-select-width: 220px;
+  }
+}

package/components/pagination/index.ts

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

package/components/pagination/src/constants.ts

@@ -0,0 +1,5 @@
+export const defaultAttrs = {
+  // small: false,
+  pageSizes: [10, 20, 50, 100, 200, 500],
+  layout: "total, sizes, prev, pager, next, jumper",
+};

package/components/pagination/src/index.ts

@@ -0,0 +1,50 @@
+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";
+
+const propsAttrs = {};
+
+export type PropsAttrs = ExtractPropTypes<typeof propsAttrs>;
+
+export default defineComponent({
+  // props: propsAttrs,
+  // emits: eventList,
+
+  // attrs, emit会继承, slots需要设置
+  setup(props: PropsAttrs, { attrs, emit, slots, expose }) {
+    // const pageRef = ref();
+
+    // 暴露方法
+    // expose({
+    //   pageRef,
+    // });
+
+    // 属性处理
+    const getAttrs = () => {
+      const obj = {
+        ...defaultAttrs, // 设置默认值
+        // ...attrs, // 当前传入覆盖默认值 第一层标签就是组件可以不用传入
+      };
+      return obj;
+    };
+    // 渲染表单
+    const render = () => {
+      return h(ElPagination, {
+        // ref: pageRef,
+        ...getAttrs(),
+        class: "c-pagination",
+      });
+    };
+
+    // 返回渲染函数
+    return () => render();
+  },
+});

package/components/search/index.ts

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

package/components/search/src/index.tsx

@@ -0,0 +1,294 @@
+import { ref, defineComponent, onMounted, onUnmounted, nextTick, watch } from "vue";
+
+import { CForm, CDrawer } from "@elementplus-kit/uikit";
+import { ArrowUpBold } from "@element-plus/icons-vue";
+import "../style/index.scss";
+
+export default defineComponent({
+  props: {
+    modelValue: {
+      type: Object,
+      default: {},
+    },
+    formOptions: {
+      type: Array,
+      default: () => [],
+    },
+    isDrawer: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ["update:modelValue", "search", "reset", "close"],
+
+  setup(props, { 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>
+      );
+    };
+  },
+});