element-ui-pro-components-test 1.5.0

package/src/components/custom-render/index.vue

@@ -0,0 +1,16 @@
+<script>
+  export default {
+    name: 'CustomRender',
+    props: {
+      render: {
+        type: Function,
+        required: true
+      }
+    },
+    render: function(h) {
+      return <Fragment>
+        {this.render()}
+      </Fragment>
+    }
+  }
+</script>

package/src/components/pro-form-item/index.vue

@@ -0,0 +1,129 @@
+<template>
+  <el-form-item
+    v-bind="normalizedFormItem"
+  >
+    <template v-if="formItem.renderLabel" #label>
+      <!-- 自定义 label -->
+      <!-- start -->
+      <CustomRender :render="formItem.renderLabel" />
+      <!-- end -->
+    </template>
+    <!-- 自定义渲染 -->
+    <!-- start -->
+    <CustomRender 
+      v-if="formItem.renderField"
+      :render="() => formItem.renderField({ form, formItem })" 
+    />
+    <slot 
+      v-else-if="formItem.valueType === 'slot'" 
+      :name="formItem.prop"
+    ></slot>
+    <!-- end -->
+    <!-- 元素渲染 -->
+    <!-- start -->
+    <component
+      v-else
+      :is="`el-${formItem.valueType}`"
+      v-model="form[formItem.prop]"
+      v-bind="formItem.fieldProps"
+      v-on="formItem.fieldEvents"
+    >
+      <!-- Select -->
+      <!-- start -->
+      <template v-if="formItem.valueType === 'select'">
+        <!-- Option Group -->
+        <!-- start -->
+        <template v-if="isOptionGroup">
+          <el-option-group
+            v-for="group in formItem.options"
+            v-bind="group"
+            :key="group.label"
+          >
+            <el-option 
+              v-for="option in group.options"
+              v-bind="option"
+              :key="option.value"
+            ></el-option>
+          </el-option-group>
+        </template>
+        <!-- end -->
+        <!-- Option -->
+        <!-- start -->
+        <template v-else>
+          <el-option 
+            v-for="option in formItem.options"
+            v-bind="option"
+            :key="option.value"
+          ></el-option>
+        </template>
+        <!-- end -->
+      </template>
+      <!-- end -->
+      <template v-else-if="groups.includes(formItem.valueType)">
+        <component
+          :is="selection[formItem.valueType]"
+          v-for="option in formItem.options"
+          :label="option.value"
+          :key="option.value"
+        >
+          {{ option.label }}
+        </component>
+      </template>
+    </component>
+    <!-- end -->
+  </el-form-item>
+</template>
+
+<script>
+  import CustomRender from '../custom-render'
+
+  export default {
+    name: 'ProFormItem',
+    components: {
+      CustomRender,
+    },
+    props: {
+      // formItem 项
+      formItem: {
+        type: Object,
+        required: true
+      },
+      // 表单数据
+      form: {
+        type: Object,
+        required: true
+      },
+    },
+    computed: {
+      // 过滤 el-form-item 的属性
+      normalizedFormItem() {
+        const {
+          renderLabel,
+          valueType,
+          renderField,
+          fieldProps, 
+          fieldEvents, 
+          options,
+          valueEnum, 
+          optionLoader, 
+          initialValue, 
+          colProps,
+          ...keys
+        } = this.formItem
+        return keys 
+      },
+      isOptionGroup() {
+        return this.formItem.options?.[0]?.options
+      }
+    },
+    data() {
+      return {
+        groups: ['radio-group', 'checkbox-group'], // valueType
+        selection: { // 选项组对应的组件
+          'radio-group': 'el-radio',
+          'checkbox-group': 'el-checkbox'
+        }
+      }
+    },
+  }
+</script>

package/src/index.js

@@ -0,0 +1,57 @@
+// 导入所有组件
+import ProForm from 'element-ui-pro-components/packages/pro-form'
+import DialogForm from 'element-ui-pro-components/packages/dialog-form'
+import ProTable from 'element-ui-pro-components/packages/pro-table'
+import EditableProTable from 'element-ui-pro-components/packages/editable-pro-table'
+import locale from 'element-ui-pro-components/src/locale'
+
+// 组件列表
+const components = [
+  ProForm,
+  DialogForm,
+  ProTable,
+  EditableProTable
+]
+
+// ✅ 1. 全局 install 方法 - 支持 Vue.use(ElementUIProComponents)
+const install = function(Vue, opts = {}) {
+  // 检查是否已安装
+  if (install.installed) {
+    return
+  }
+
+  locale.use(opts.locale)
+  locale.i18n(opts.i18n)
+  
+  // 遍历注册所有组件
+  components.forEach(component => {
+    Vue.component(component.name, component)
+  })
+  
+  // 标记已安装
+  install.installed = true
+}
+
+// ✅ 2. 自动安装（当通过 script 标签引入时）
+if (typeof window !== 'undefined' && window.Vue) {
+  install(window.Vue)
+}
+
+// ✅ 3. 导出组件和 install 方法
+export default {
+  install,
+  locale: locale.use,
+  i18n: locale.i18n,
+  ProForm,
+  DialogForm,
+  ProTable,
+  EditableProTable
+}
+
+// ✅ 4. 同时也支持按需引入
+export {
+  ProForm,
+  DialogForm,
+  ProTable,
+  EditableProTable
+}

package/src/locale/index.js

@@ -0,0 +1,47 @@
+import Vue from 'vue'
+import defaultLang from './lang/zh-CN'
+
+let lang = defaultLang
+let i18nHandler = function() {
+  const vueI18n = Object.getPrototypeOf(this || Vue).$t
+  if (typeof vueI18n === 'function') {
+    return vueI18n.apply(this, arguments)
+  }
+}
+
+export const t = function(path) {  // 去掉 options 参数
+  // 优先使用自定义 handler
+  if (i18nHandler) {
+    const value = i18nHandler(path)
+    if (value !== null && value !== undefined) {
+      return value
+    }
+  }
+
+  // 用自己的语言包
+  const array = path.split('.')
+  let current = lang
+
+  for (let i = 0; i < array.length; i++) {
+    const property = array[i]
+    const value = current[property]
+    
+    if (i === array.length - 1) {
+      return value || path
+    }
+    
+    if (!value) return path
+    current = value
+  }
+  return path
+}
+
+export const use = function(l) {
+  lang = l || lang
+}
+
+export const i18n = function(fn) {
+  i18nHandler = fn
+}
+
+export default { use, t, i18n }

package/src/locale/lang/en.js

@@ -0,0 +1,46 @@
+export default {
+  elProComponents: {
+    placeholder: {
+      input: 'Please enter',
+      select: 'Please select',
+      selectTime: 'Select time',
+      selectDate: 'Select date'
+    },
+    proForm: {
+      reset: 'Reset',
+      submit: 'Submit'
+    },
+    dialogForm: {
+      cancel: 'Cancel',
+      confirm: 'Confirm'
+    },
+    proTable: {
+      expand: 'Expand',
+      collapse: 'Collapse',
+      search: 'Search',
+      reset: 'Reset',
+    },
+    tableToolBar: {
+      columnSetting: 'Settings',
+      reset: 'Reset',
+      columnDisplay: 'Column Display',
+      leftPin: 'Pin to left',
+      rightPin: 'Pin to right',
+      noPin: 'Unpinned',
+      leftFixedTitle: 'Fixed the left',
+      rightFixedTitle: 'Fixed the right',
+      noFixedTitle: 'Not Fixed',
+    },
+    editableProTable: {
+      add: 'add a row of data',
+      onlyAddOneLine: 'Only one line can be added',
+      save: 'Save',
+      delete: 'Delete',
+      cancel: 'Cancel',
+      deleteThisLine: 'Delete this line?',
+      confirmButtonText: 'Yes',
+      cancelButtonText: 'No',
+      onlyOneLineEditor: 'Only one line can be edited',
+    }
+  }
+}

package/src/locale/lang/zh-CN.js

@@ -0,0 +1,46 @@
+export default {
+  elProComponents: {
+    placeholder: {
+      input: '请输入',
+      select: '请选择',
+      selectTime: '选择时间',
+      selectDate: '选择日期'
+    },
+    proForm: {
+      reset: '重置',
+      submit: '提交'
+    },
+    dialogForm: {
+      cancel: '取消',
+      confirm: '确定'
+    },
+    proTable: {
+      expand: '展开',
+      collapse: '收起',
+      search: '查询',
+      reset: '重置',
+    },
+    tableToolBar: {
+      columnSetting: '列设置',
+      reset: '重置',
+      columnDisplay: '列展示',
+      leftPin: '固定在列首',
+      rightPin: '固定在列尾',
+      noPin: '不固定',
+      leftFixedTitle: '固定在左侧',
+      rightFixedTitle: '固定在右侧',
+      noFixedTitle: '不固定',
+    },
+    editableProTable: {
+      add: '添加一行数据',
+      onlyAddOneLine: '只能新增一行',
+      save: '保存',
+      delete: '删除',
+      cancel: '取消',
+      deleteThisLine: '删除此项？',      
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      onlyOneLineEditor: '只能同时编辑一行',
+    }
+  }
+}

package/src/utils/breakpoints.js

@@ -0,0 +1,61 @@
+// 断点配置
+const BREAKPOINTS = {
+  xs: 0,     // < 768px
+  sm: 768,   // ≥ 768px
+  md: 992,   // ≥ 992px  
+  lg: 1200,  // ≥ 1200px
+  xl: 1920   // ≥ 1920px
+}
+
+// Grid cols 份数
+export const GRID_COLUMNS = 24
+
+// 断点所占的份数
+// 覆盖关系：默认 (span) < xs < sm < md < lg < xl
+// 特殊情况：未指定默认（span）则显示 24 列
+export const defaultColConfig = {
+  xs: 24, // <768px
+  sm: 24, // >=768px
+  md: 12, // >=992px
+  lg: 8, // ≥1200px
+  xl: 6, // ≥1920px
+}
+
+// 断点优先级（从大到小）
+export const BREAKPOINT_ORDER = ['xl', 'lg', 'md', 'sm', 'xs']
+
+/**
+ * 根据当前宽度获取对应的断点
+ * @param {number} width - 当前宽度
+ * @returns {string} - 断点名称
+ */
+const getCurrentBreakpoint = (width) => {
+  if (width >= BREAKPOINTS.xl) return 'xl'
+  if (width >= BREAKPOINTS.lg) return 'lg'
+  if (width >= BREAKPOINTS.md) return 'md'
+  if (width >= BREAKPOINTS.sm) return 'sm'
+  return 'xs'
+}
+
+/**
+ * 动态计算当前应占的份数
+ * @param {Object} config - 配置对象 {span, xs, sm, md, lg, xl}
+ * @returns {number} - 应占的份数
+ */
+export const calculateCurrentSpan = (config) => {
+  const breakpoint = getCurrentBreakpoint(window.innerWidth)
+  
+  // 按优先级获取配置值
+  const breakpoints = BREAKPOINT_ORDER
+  const currentIndex = breakpoints.indexOf(breakpoint)
+  
+  // 按断点优先级查找
+  for (let i = currentIndex; i < breakpoints.length; i++) {
+    const bp = breakpoints[i]
+    if (config[bp]) {
+      return config[bp]
+    }
+  }
+
+  return config.span || GRID_COLUMNS
+}

package/src/utils/debounce.js

@@ -0,0 +1,22 @@
+export const debounce = (func, delay = 150) => {
+  let timeout
+  const debounced = (...args) => {
+    if (timeout) {
+      clearTimeout(timeout)
+    }
+
+    timeout = setTimeout(() => {
+      func.apply(this, args)
+    }, delay)
+  }
+
+  // 添加取消方法
+  debounced.cancel = function() {
+    if (timeout) {
+      clearTimeout(timeout);
+      timeout = null;
+    }
+  }
+
+  return debounced
+}

package/src/utils/form.js

@@ -0,0 +1,94 @@
+import { t } from 'element-ui-pro-components/src/locale'
+
+/**
+ * @desc 获取表单元素默认的 placeholder
+ * @param {String} valueType 表单元素类型
+ */
+function getDefaultPlaceholder(valueType) {
+  switch (valueType) {
+    case 'input':
+      return t('elProComponents.placeholder.input')
+    case 'select':
+    case 'cascader':
+      return t('elProComponents.placeholder.select')
+    case 'time-picker':
+      return t('elProComponents.placeholder.selectTime')
+    case 'date-picker':
+      return t('elProComponents.placeholder.selectDate')
+    default:
+      return ''
+  }
+}
+
+/**
+ * @desc 设置 placeholder
+ * @param {Object} fieldProps 表单元素属性
+ * @param {String} valueType 表单元素类型
+ */
+export function setPlaceholder(fieldProps, valueType) {
+  fieldProps.placeholder = fieldProps.placeholder ?? getDefaultPlaceholder(valueType)
+}
+
+/**
+ * @desc 设置 select options
+ * @param {Object} item 表单项
+ * @param {String} item.valueType 表单类型
+ * @param {Array} item.options 下拉列表
+ * @param {String} item.prop 字段属性值
+ * @param {Function} item.optionLoader 异步获取下拉数据
+ * @param {Object} cachedOptions 下拉数据
+ */
+export function setSelectOptions(item, cachedOptions) {
+  const { valueType, prop, options, valueEnum, optionLoader } = item
+  if (valueType !== 'select') {
+    return
+  }
+
+  // 如果已有 options，保持不变
+  if (options?.length > 0) {
+    return
+  }
+
+  // 有 valueEnum，自动转换
+  if (valueEnum) {
+    if (valueEnum instanceof Map) {
+      item.options = Array.from(valueEnum, ([key, value]) => ({ label: value, value: key }))
+    } else {
+      item.options = Object.entries(valueEnum)
+        .map(([key, value]) => ({ label: value, value: key }))
+    }
+
+    return
+  }
+  
+  // 设置 options：优先使用缓存
+  item.options = optionLoader && cachedOptions[prop]
+    ? cachedOptions[prop]
+    : []
+}
+
+/**
+ * @desc 设置 select options
+ * @param {Object} fieldProps 表单元素属性
+ * @param {Object} item 表单项
+ * @param {String} item.valueType 表单类型
+ * @param {String} item.prop 字段属性值
+ * @param {Function} item.optionLoader 异步获取下拉数据
+ * @param {Object} cachedOptions 下拉数据
+ */
+export function setCascaderOptions(fieldProps, item, cachedOptions) {
+  const { valueType, prop, optionLoader } = item
+  if (valueType !== 'cascader') {
+    return
+  }
+
+  // 如果已有 options，保持不变
+  if (fieldProps.options?.length > 0) {
+    return
+  }
+  
+  // 设置 options：优先使用缓存
+  if (optionLoader && cachedOptions[prop]) {
+    fieldProps.options = cachedOptions[prop]
+  }
+}