@elementplus-kit/uikit 1.4.0 → 1.6.0

package/components/form/src/index.ts

@@ -1,207 +0,0 @@
-import {
-  defineComponent,
-  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 CFormItem from "./FormItem.ts";
-import { has, isArray, isBoolean, isFunction, isNumber } 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(
-        ElConfigProvider,
-        {
-          locale: zhCn,
-        },
-        {
-          default: () =>
-            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

@@ -1,39 +0,0 @@
-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

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

package/components/form/style/index.scss

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

package/components/pagination/index.ts

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

package/components/pagination/src/constants.ts

@@ -1,5 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

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

package/components/search/src/index.tsx

@@ -1,276 +0,0 @@
-import { ref, defineComponent, onMounted, onUnmounted, nextTick } 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 = ["active", "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
-    // 判断点击事件是否在 targetElement 外部
-    const isClickOutside = (event, targetElement) => {
-      console.log("🚀 ~ isClickOutside ~ targetElement:", targetElement);
-      return !targetElement.contains(event.target);
-    };
-    // 点击外部关闭函数
-    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 simpleBtnRef = ref<HTMLDivElement>(null);
-    const cFormRef = ref<HTMLDivElement>(null);
-    const calcFlg = ref(false); // 计算宽度后再显示表单
-    const childW = ref([]);
-
-    // 设置节流
-    let timer: any = null;
-    const searchResize = () => {
-      if (timer) {
-        clearTimeout(timer);
-      }
-      timer = setTimeout(() => {
-        calcSunResize();
-      }, 200);
-    };
-
-    // 初次计算显示个数
-    const calcSunInit = () => {
-      if (simpleFormRef.value) {
-        // 寻找cForm 先写死 后期做成动态寻找
-        const cFormDom = simpleFormRef.value.children[0];
-        const cFormW = cFormDom.offsetWidth;
-        // 收集子元素宽度并保存到数组中
-        const cW = [];
-        // const marginR = [];
-        Array.from(cFormDom.children).map((child) => {
-          const computedStyles = window.getComputedStyle(child); // 获取元素 css 样式
-          const mg = computedStyles.marginRight; // 获取元素 margin-right 样式值 有单位
-          const mgValue = parseFloat(mg); // 转换为数值
-          // marginR.push(mgValue);
-          cW.push(child.offsetWidth + mgValue); // 把mg加上 mg 一般不会变 为了避免多次计算
-        });
-        childW.value = cW; // 储存子元素宽度
-        childW.value.reduce((pre, cur, index) => {
-          if (pre > cFormW) {
-            return 10000; // 终止累加
-          }
-          if (pre + cur > cFormW) {
-            showCount.value = index;
-            return pre + cur;
-          }
-          return pre + cur;
-        }, 0);
-      }
-    };
-    // 变化时计算显示个数
-    const calcSunResize = () => {
-      if (simpleFormRef.value) {
-        // 寻找cForm 先写死 后期做成动态寻找
-        const cFormDom = simpleFormRef.value.children[0];
-        const cFormW = cFormDom.offsetWidth;
-        childW.value.reduce((pre, cur, index) => {
-          if (pre > cFormW) {
-            return 10000; // 终止累加
-          }
-          if (pre + cur > cFormW) {
-            showCount.value = index;
-            return pre + cur;
-          }
-          return pre + cur;
-        }, 0);
-      }
-    };
-
-    onMounted(() => {
-      // 初始化执行一次
-      calcSunInit();
-      // 注册页面大小函数
-      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}>
-              <CForm
-                ref={(el) => (cFormRef.value = el)}
-                {...getEvent()}
-                inline
-                model={props.modelValue}
-                formOptions={props.formOptions?.filter(
-                  (item, index) => index < showCount.value
-                )}
-              >
-                {getSlot()}
-              </CForm>
-            </div>
-            <div className="c-search-simple-btn" ref={simpleBtnRef}>
-              {slots["btn-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>
-              )}
-              <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/style/index.scss

@@ -1,101 +0,0 @@
-.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-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;
-  }
-}