[Element Reborn] Announce our fork of element repo

[CarterLi]

Element Reborns

This PR is NOT for merging, but for tracking our contributions.

ELEMENT IS DEAD. LONG LIVE ELEMENT

Integration instruction

NPM repo: https://www.npmjs.com/element-ui-eoi

$ npm remove element-ui
$ npm i element-ui-eoi

// vue.config.js
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'element-ui': 'element-ui-eoi',
      },
    },
  },
};

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "element-ui": ["node_modules/element-ui-eoi"],
      "element-ui/*": ["node_modules/element-ui-eoi/*"]
    }
  }
}

The modification may or may not introduce unknown issues. USE IT AT YOUR OWN RISK!

What's changed:

1. date-picker
   1. Hide clear button inside the popover too if :clearable="false" is specified
      设置:clearable="false"的时候同时隐藏下拉框中的清空按钮。这个清空按钮炒鸡恶心，会把value至null，引起无端TypeError。建议各位都设置成不允许清空
2. input-number
   1. Keep the input empty if this.value === null instead of resetting this.value to minValue ( The main reason that I decided to fork element )
      当this.value === null时保持输入框为空，而不是重置为最小值。这个bug更恶心，对于某些可空的数据，你上传的时候是undefined，保存进数据库变成null，返回给前端的时候就是null，显示到页面上就变成了最小值，无法避免。
   2. Fix step-strictly doc typo [Input Number]: fix step-strictly docs typo #18705
      修复文档step-strictly属性取值错误
   3. Fix: docs size description
      修复size属性文档
   4. Recalculate value when precision changed InputNumber: recalculate value when precision changed (#13748) #13749
      当precision属性变化的时候重新计算值
   5. Refactor to use unidirectional data flow, removes duplicate input event emit
      重构组件逻辑，使用单项数据流。移除重复的input事件
   6. add prop default-value, to specify the behavior when input is cleared
      添加default-value属性，用以指定当用户清空输入框后保留的默认值
3. transfer
   1. Fix styles of el-transfer-panel__item
      修复el-transfer-panel__item样式。当transfer放在form里面的时候第一条数据下面会出现蜜汁边距，line-height的锅。
   2. Add stack-button and flexable prop
      添加 stack-button 和 flexable 属性。原来transfer的样式都是内部固定好的，大小风格都无法调整
4. link
   1. Add :to property support ( like router-link )
      添加:to属性。不直接用router-link的原因是el-link可以被disabled。注意请不要把disabled简单实现为pointer-events: none
   2. Support type="native", icon-right and inherit-fs
      添加type="native", icon-right and inherit-fs属性支持
   3. Simplify styles and DOM structure
      简化样式和dom结构
5. button
   1. Support icon-right
      添加icon-right属性支持
   2. Simplify DOM structure
      简化dom结构
6. form
   1. Make disabled form can have enabled components
      允许在disabled的表单下有enabled组件。通过在组件上显式设置:disabled="false"来启用组件
7. form-item
   1. Support required="validation message"
      支持required="验证信息提示"使用方式，一种简单的必填验证
8. dialog
   1. Add movable property, to make the dialog draggable
      添加movable属性，允许用户拖动对话框
9. table
   1. Fix select-all checkbox position
      修复“全选”复选框蜜汁位置偏移。又一个css优先级的坑
   2. Fix memory leak Table: fix serious memory leak when using "row-key" property #18115
      修复内存泄漏
   3. Don't resize if the column is not resizable table列禁止拖拽，不触发mouseDown事件 #18179
      当某一列不允许改变大小时不要触发resize
   4. Don't check select-all checkbox if there are no data available table: fix checkbox still can be selected when there is no data #18083
      当表格中没有数据时不允许选择“全选”框
   5. Show usage of show-overflow-tooltip in example
      在示例中显示show-overflow-tooltip的使用。原本是放在多选里面的（不知道为什么），而且里面文字长度根本触发不了overflow
   6. Fix handling hoverRow with nested tables fix [el-table] el-table-column 'hover-row' class error when expend co… #17381
      修复hoverRow与嵌套表格的兼容性，比如展开详情是个新表格。
   7. Fix finding parent table when destroying
      正确查找el-table-column的父级
   8. Don't use computed property with $refs
      不要在计算属性中返回$refs的值，因为$refs根本就不是响应式的，永远不会触发更新
   9. Reschedule layout when setting data
      设置data后重新计算布局（footer的坑）
   10. Fix TypeScript definition
       修复ts类型定义
   11. Prop formatter accepts object and string value
       允许formatter属性接受对象（将当前单元格值作为对象的key取值）和字符串（将当前单元格的值作为指定过滤器的值）。后端管理界面80%的表格有updateTime或createTime，40%的表格有status或其他枚举值。前者你可以定义一个全局过滤器比如formatDate，后者你可以直接在data里面放个对象（或者也定义成全局的过滤器）。这个功能可以减掉不少重复代码，你会喜欢的。
   12. Fix displaying boolean values ( can be a breaking change )
       修复显示布尔值。原本默认布尔值不会显示在表格里
   13. Allow customizing filter icon
       添加 filter-icon 属性，用以指定过滤图标的类名（而非一个固定的下箭头）
10. image
    1. Set preview :initial-index to 0 if src is not in previewSrcList fix: The first list is displayed by default when there is no src in the previewSrcList #18871
       如果src不在previewSrcList列表里，显示第一个图片。不知道各位试过element官方文档的image示例没有，图片预览功能点出来空白一片
    2. Fix ESC won't close preview for the second time Image: fix Esc can never close the preview at the second time #1… #19027
       修复第二次打开图片预览不能用ESC键关闭（因为在第一次关闭预览时事件已经被清除了）
    3. Fix undesired overflow: scroll style Image: don't show image-viewer when preview is false #18967
       修复没有previewSrcList时点击图片会给body添加overflow: scroll的bug。我至少搜索到四五个issue是说这个问题的。。。
    4. Fix a race condition if src changes too frequently Image: fix a race condition if src changes too frequently #18837
       修复图片改变太快时事件触发混乱的问题
    5. Add close-on-click-modal prop image: 增加 close-on-click-modal props 控制点击mask 关闭预览图的功能 #18947
       添加close-on-click-modal属性，点击遮罩层关闭预览（一个静态的图片预览功能就不要让用户点叉了，关键那个叉还不好看）
11. popconfirm
    1. Fix event name and also add doc
       修复事件名称，别的地方事件名都是on加中划线，不知这里为何成了驼峰。
    2. Fix title style
       修复title的边距
12. input
    1. Support clearable for [type=textarea]
       textarea支持清空属性
    2. Remove useless code [Input]: delete useless judgment #18159
       删除无用代码
13. popper
    1. Use external popper.js package instead of out of date local copy Popper: update vue-popper #11778
       使用外部包依赖而不是过时的本地的popper.js拷贝
14. select
    1. Fix clicking the arrow won't collapse the selection list when filterable
       修复filterable时点击下箭头不能关闭下拉列表的bug
    2. Fix remote search issue. Remote search text is cleared when blurred, but the filter is still effective
       修复远程过滤问题。当搜索框失去焦点时搜索文字会被清空，但是过滤效果还在
    3. Add label-key prop
       添加label-key属性，绑定对象时有用
    4. Add placement prop
       添加placement属性，有用时就有用
    5. remove cachedOptions, which can cause memleak
       删除cachedOptions，这个属性的作用是当用户选择了某项但是那一项被从选项列表中移除时，能保留用户选择的值。这个属性只在绑定对象时有效果，在添加label-key之后就没用了
    6. small code refactor
       小代码重构
    7. Add option-max-width prop
       添加option-max-width属性以限制下拉框的最大宽度。当绑定从后端获取的用户输入的值时有用（测试会给你提bug的）
15. auto-complete
    1. Fix ref arrow is missing when type=textarea Autocomplete: fix autocomplete-suggestions issue when type is textarea(#15013) #18478
       修复主控件是textarea时箭头丢失的问题
    2. Add @change event Autocomplete: add change event #17913
       添加change事件
    3. Don't prevent when suggestions are not visible AutoComplete: enable keyup&keydown when there is no suggestions #17472
       当下拉框隐藏时不要 preventDefault，也是主控件是textarea时有用
    4. Allow fetchSuggestions returns a promise or an array
       允许fetchSuggestions返回promise或直接返回数组。这都0202年了是时候放弃callback了
    5. Use tab for selection like enter
       tab键和enter一样可以选择一项
16. slider
    1. Add input-controls-position prop
       添加input-controls-position属性。原本slider自带的那个数字输入框，上下按钮的位置固定在两边不能改的
    2. (Almost) rewritten, make it a controlled component, and better code splitting
       （几乎）完全重写，现在slider是一个受控组件，更好的拆分代码
    3. Fix unnecessary input event triggering on mounted
       移除不必要的 input 事件
17. drawer
    1. Fix the focus issue when open the drawer
       修复打开抽屉时乱指焦点的问题
    2. Fix size description in doc
       修复size属性文档描述
    3. Add focus-first prop to let users control the default behavior
       添加focus-first属性，可以让用户控制是否自动设置焦点
18. badge
    1. Fix class name on default type
       修复在不设置type属性时class上出现undefined
    2. Add prop use-kw
       添加属性 use-kw，作用见文档
19. switch
    1. Make it a controlled component
       修改实现为受控组件，代码清理
20. message
    1. Fix possible text overflow clips
       修复在某些特殊情况下文本不会自动折行，而会被截断
21. cascader
    1. Add option-max-width prop; expose cascader-menu-height var
       添加option-max-width属性（类似el-select），暴露SCSS的cascader-menu-height变量（控制下拉框默认高度）
22. checkbox, radio
    1. Use provide/inject instead of tracking parents manually
       使用provide/inject获取父级group组件实例，简化实现
23. pagination
    1. Use functional components; fix doc style
       使用函数式组件实现，修复文档样式
24. global
    1. Overall dependencies upgrades. Notably async-validator, now it has full support for Promise.
       更新依赖至尽可能新的版本。值得注意的是async-validator，新版有完整的Promise支持，不用写callback了（0202年问题系列）
    2. Kill utils/types, which is full of shit.
       

       element/src/utils/types.js

       Line 15 in 6ec5f8e

       return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';

       
       这是什么鬼代码？干掉
    3. Make sure most of vue instance in UTs is correctly destroyed
       保证大部分（除了table）在UT里面创建的组件被正确销毁。原本在UT里创建的Vue实例好多都没有删，都绑定在页面上。不同UT之间会互相干扰。
       修这个问题时确实发现了UT里面的bug。。。
    4. Refactor / optimise src/utils/*, add type comments
       代码清理，简化逻辑，添加类型注释
    5. Correctly compute aria-disabled values [Input Number] Correctly compute inputNumberDisabled when false #18439
       全局修复aria-disabled属性计算。(this.elForm || {}).disabled 是 undefined，绑定到页面上就是"undefined"。这个字符串的 "undefined" 对于 aria-disabled 是个非法的值
    6. Make most layout components functional
       修改大多数布局组件（el-container、el-header、el-footer、el-aside）为函数式组件
    7. The internal component el-scrollbar will use native ::-webkit-scrollbar pseudo element to customize the scrollbar style when available (Chrome like browsers), which generally improves performance. The draw back is that there is no transition on style changing.
       内部组件el-scrollbar会在支持的浏览器中使用::-webkit-scrollbar伪元素给原生滚动条加样式，以提升性能。

More features / bug fixes will be added later

A small trick for modifying default property values

Element exposes very few global configuations other than size and zIndex. It can be troublesome to set the same desired property values on every component usage.

For example you want to set controls-position of input-number to right by default. Following code does the trick:

// main.js
import { InputNumber } from 'element-ui';
InputNumber.props.controlsPosition.default = 'right';

---

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow Element's contributing guide (中文 | English | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer relative issues for you PR.

[goldingdamien]

Please can you provide further information.
Should developers be using element-ui-eoi instead? And if so why?

[CarterLi]

Please can you provide further information.
Should developers be using element-ui-eoi instead? And if so why?

As I have described, this fork mainly focuses on bugfixes, and provides a few usage enhancements. But I don't think it will create more features, nor will it support Vue 3.

If you are about to start a new project, I'd suggest that you use other alive projects like ant-design-vue. If you have old projects that uses element-ui to maintain, and encountered some issues/bugs, you can try our fork.

We have been using our fork in production code, and it worked very well. As long as we still need to maintain our old projects, we will maintain our element-ui fork.

[zazzaz]

Welcome to 🎉🎉🎉 Element Plus - A Vue.js 3.0 UI library 🎉🎉🎉

element-plus/element-plus#147

[iamkun]

off topic

[JinPengGeng]

@iamkun @CarterLi
现在的状态是已经marge到官方仓库了吗？直接使用2.15.1 是不是已经包含这些 bug fix了？我应该怎么选择使用哪个仓库

Is the status now marge to the official warehouse? Does using 2.15.1 directly already include these bug fixes? How should I choose which warehouse to use?

[CarterLi]

@JinPengGeng 没有合并。官方2.15.1只包含了很少量的修复，我们的fork还包含了不少功能扩展，除了PR中提到的还有drawer拖拽改变大小支持等等，你可以选择性使用。

注意我们公司内部已经转向 Vue3+antdv2，Element的fork已经不是主要维护对象。当然有bug还是会修的

[JinPengGeng]

@CarterLi 好的，谢谢