@penggy/element-ui 2.4.11 → 2.4.12

package/packages/cascader/src/menu.vue

@@ -1,376 +1,376 @@
-<script>
-  import { isDef } from 'element-ui/src/utils/shared';
-  import scrollIntoView from 'element-ui/src/utils/scroll-into-view';
-  import { generateId } from 'element-ui/src/utils/util';
-
-  const copyArray = (arr, props) => {
-    if (!arr || !Array.isArray(arr) || !props) return arr;
-    const result = [];
-    const configurableProps = ['__IS__FLAT__OPTIONS', 'label', 'value', 'disabled'];
-    const childrenProp = props.children || 'children';
-    arr.forEach(item => {
-      const itemCopy = {};
-      configurableProps.forEach(prop => {
-        let name = props[prop];
-        let value = item[name];
-        if (value === undefined) {
-          name = prop;
-          value = item[name];
-        }
-        if (value !== undefined) itemCopy[name] = value;
-      });
-      if (Array.isArray(item[childrenProp])) {
-        itemCopy[childrenProp] = copyArray(item[childrenProp], props);
-      }
-      result.push(itemCopy);
-    });
-    return result;
-  };
-
-  export default {
-    name: 'ElCascaderMenu',
-
-    data() {
-      return {
-        inputWidth: 0,
-        options: [],
-        props: {},
-        visible: false,
-        activeValue: [],
-        value: [],
-        expandTrigger: 'click',
-        changeOnSelect: false,
-        popperClass: '',
-        hoverTimer: 0,
-        clicking: false,
-        id: generateId()
-      };
-    },
-
-    watch: {
-      visible(value) {
-        if (value) {
-          this.activeValue = this.value;
-        }
-      },
-      value: {
-        immediate: true,
-        handler(value) {
-          this.activeValue = value;
-        }
-      }
-    },
-
-    computed: {
-      activeOptions: {
-        cache: false,
-        get() {
-          const activeValue = this.activeValue;
-          const configurableProps = ['label', 'value', 'children', 'disabled'];
-
-          const formatOptions = options => {
-            options.forEach(option => {
-              if (option.__IS__FLAT__OPTIONS) return;
-              configurableProps.forEach(prop => {
-                const value = option[this.props[prop] || prop];
-                if (value !== undefined) option[prop] = value;
-              });
-              if (Array.isArray(option.children)) {
-                formatOptions(option.children);
-              }
-            });
-          };
-
-          const loadActiveOptions = (options, activeOptions = []) => {
-            const level = activeOptions.length;
-            activeOptions[level] = options;
-            let active = activeValue[level];
-            if (isDef(active)) {
-              options = options.filter(option => option.value === active)[0];
-              if (options && options.children) {
-                loadActiveOptions(options.children, activeOptions);
-              }
-            }
-            return activeOptions;
-          };
-
-          const optionsCopy = copyArray(this.options, this.props);
-          formatOptions(optionsCopy);
-          return loadActiveOptions(optionsCopy);
-        }
-      }
-    },
-
-    methods: {
-      select(item, menuIndex) {
-        if (item.__IS__FLAT__OPTIONS) {
-          this.activeValue = item.value;
-        } else if (menuIndex) {
-          this.activeValue.splice(menuIndex, this.activeValue.length - 1, item.value);
-        } else {
-          this.activeValue = [item.value];
-        }
-        this.$emit('pick', this.activeValue.slice());
-      },
-      handleMenuLeave() {
-        this.$emit('menuLeave');
-      },
-      activeItem(item, menuIndex) {
-        const len = this.activeOptions.length;
-        this.activeValue.splice(menuIndex, len, item.value);
-        this.activeOptions.splice(menuIndex + 1, len, item.children);
-        if (this.changeOnSelect) {
-          this.$emit('pick', this.activeValue.slice(), false);
-        } else {
-          this.$emit('activeItemChange', this.activeValue);
-        }
-      },
-      scrollMenu(menu) {
-        scrollIntoView(menu, menu.getElementsByClassName('is-active')[0]);
-      },
-      handleMenuEnter() {
-        this.$nextTick(() => this.$refs.menus.forEach(menu => this.scrollMenu(menu)));
-      }
-    },
-
-    render(h) {
-      const {
-        activeValue,
-        activeOptions,
-        visible,
-        expandTrigger,
-        popperClass,
-        hoverThreshold
-      } = this;
-      let itemId = null;
-      let itemIndex = 0;
-
-      let hoverMenuRefs = {};
-      const hoverMenuHandler = e => {
-        const activeMenu = hoverMenuRefs.activeMenu;
-        if (!activeMenu) return;
-        const offsetX = e.offsetX;
-        const width = activeMenu.offsetWidth;
-        const height = activeMenu.offsetHeight;
-
-        if (e.target === hoverMenuRefs.activeItem) {
-          clearTimeout(this.hoverTimer);
-          const {activeItem} = hoverMenuRefs;
-          const offsetY_top = activeItem.offsetTop;
-          const offsetY_Bottom = offsetY_top + activeItem.offsetHeight;
-
-          hoverMenuRefs.hoverZone.innerHTML = `
-            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_top} L${width} 0 V${offsetY_top} Z" />
-            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_Bottom} L${width} ${height} V${offsetY_Bottom} Z" />
-          `;
-        } else {
-          if (!this.hoverTimer) {
-            this.hoverTimer = setTimeout(() => {
-              hoverMenuRefs.hoverZone.innerHTML = '';
-            }, hoverThreshold);
-          }
-        }
-      };
-
-      const menus = this._l(activeOptions, (menu, menuIndex) => {
-        let isFlat = false;
-        const menuId = `menu-${this.id}-${ menuIndex}`;
-        const ownsId = `menu-${this.id}-${ menuIndex + 1 }`;
-        const items = this._l(menu, item => {
-          const events = {
-            on: {}
-          };
-
-          if (item.__IS__FLAT__OPTIONS) isFlat = true;
-
-          if (!item.disabled) {
-            // keydown up/down/left/right/enter
-            events.on.keydown = (ev) => {
-              const keyCode = ev.keyCode;
-              if ([37, 38, 39, 40, 13, 9, 27].indexOf(keyCode) < 0) {
-                return;
-              }
-              const currentEle = ev.target;
-              const parentEle = this.$refs.menus[menuIndex];
-              const menuItemList = parentEle.querySelectorAll("[tabindex='-1']");
-              const currentIndex = Array.prototype.indexOf.call(menuItemList, currentEle); // 当前索引
-              let nextIndex, nextMenu;
-              if ([38, 40].indexOf(keyCode) > -1) {
-                if (keyCode === 38) { // up键
-                  nextIndex = currentIndex !== 0 ? (currentIndex - 1) : currentIndex;
-                } else if (keyCode === 40) { // down
-                  nextIndex = currentIndex !== (menuItemList.length - 1) ? currentIndex + 1 : currentIndex;
-                }
-                menuItemList[nextIndex].focus();
-              } else if (keyCode === 37) { // left键
-                if (menuIndex !== 0) {
-                  const previousMenu = this.$refs.menus[menuIndex - 1];
-                  previousMenu.querySelector('[aria-expanded=true]').focus();
-                }
-              } else if (keyCode === 39) { // right
-                if (item.children) {
-                  // 有子menu 选择子menu的第一个menuitem
-                  nextMenu = this.$refs.menus[menuIndex + 1];
-                  nextMenu.querySelectorAll("[tabindex='-1']")[0].focus();
-                }
-              } else if (keyCode === 13) {
-                if (!item.children) {
-                  const id = currentEle.getAttribute('id');
-                  parentEle.setAttribute('aria-activedescendant', id);
-                  this.select(item, menuIndex);
-                  this.$nextTick(() => this.scrollMenu(this.$refs.menus[menuIndex]));
-                }
-              } else if (keyCode === 9 || keyCode === 27) { // esc tab
-                this.$emit('closeInside');
-              }
-            };
-            if (item.children) {
-              let triggerEvent = {
-                click: 'click',
-                hover: 'mouseenter'
-              }[expandTrigger];
-              const triggerHandler = () => {
-                if (this.visible) {
-                  this.activeItem(item, menuIndex);
-                  this.$nextTick(() => {
-                    // adjust self and next level
-                    this.scrollMenu(this.$refs.menus[menuIndex]);
-                    this.scrollMenu(this.$refs.menus[menuIndex + 1]);
-                  });
-                }
-              };
-              events.on[triggerEvent] = triggerHandler;
-              if (triggerEvent === 'mouseenter' && this.changeOnSelect) {
-                events.on.click = () => {
-                  if (this.activeValue.indexOf(item.value) !== -1) {
-                    this.$emit('closeInside', true);
-                  }
-                };
-              }
-              events.on['mousedown'] = () => {
-                this.clicking = true;
-              };
-              events.on['focus'] = () => { // focus 选中
-                if (this.clicking) {
-                  this.clicking = false;
-                  return;
-                }
-                triggerHandler();
-              };
-            } else {
-              events.on.click = () => {
-                this.select(item, menuIndex);
-                this.$nextTick(() => this.scrollMenu(this.$refs.menus[menuIndex]));
-              };
-            }
-          }
-          if (!item.disabled && !item.children) { // no children set id
-            itemId = `${menuId}-${itemIndex}`;
-            itemIndex++;
-          }
-          return (
-            <li
-              class={{
-                'el-cascader-menu__item': true,
-                'el-cascader-menu__item--extensible': item.children,
-                'is-active': item.value === activeValue[menuIndex],
-                'is-disabled': item.disabled
-              }}
-              ref={item.value === activeValue[menuIndex] ? 'activeItem' : null}
-              {...events}
-              tabindex= { item.disabled ? null : -1 }
-              role="menuitem"
-              aria-haspopup={ !!item.children }
-              aria-expanded={ item.value === activeValue[menuIndex] }
-              id = { itemId }
-              aria-owns = { !item.children ? null : ownsId }
-            >
-              {item.label}
-            </li>
-          );
-        });
-        let menuStyle = {};
-        if (isFlat) {
-          menuStyle.minWidth = this.inputWidth + 'px';
-        }
-
-        const isHoveredMenu = expandTrigger === 'hover' && activeValue.length - 1 === menuIndex;
-        const hoverMenuEvent = {
-          on: {
-          }
-        };
-
-        if (isHoveredMenu) {
-          hoverMenuEvent.on.mousemove = hoverMenuHandler;
-          menuStyle.position = 'relative';
-        }
-
-        return (
-          <ul
-            class={{
-              'el-cascader-menu': true,
-              'el-cascader-menu--flexible': isFlat
-            }}
-            {...hoverMenuEvent}
-            style={menuStyle}
-            refInFor
-            ref="menus"
-            role="menu"
-            id = { menuId }
-          >
-            {items}
-            {
-              isHoveredMenu
-                ? (<svg
-                  ref="hoverZone"
-                  style={{
-                    position: 'absolute',
-                    top: 0,
-                    height: '100%',
-                    width: '100%',
-                    left: 0,
-                    pointerEvents: 'none'
-                  }}
-                ></svg>) : null
-            }
-          </ul>
-        );
-      });
-
-      if (expandTrigger === 'hover') {
-        this.$nextTick(() => {
-          const activeItem = this.$refs.activeItem;
-
-          if (activeItem) {
-            const activeMenu = activeItem.parentElement;
-            const hoverZone = this.$refs.hoverZone;
-
-            hoverMenuRefs = {
-              activeMenu,
-              activeItem,
-              hoverZone
-            };
-          } else {
-            hoverMenuRefs = {};
-          }
-        });
-      }
-
-      return (
-        <transition name="el-zoom-in-top" on-before-enter={this.handleMenuEnter} on-after-leave={this.handleMenuLeave}>
-          <div
-            v-show={visible}
-            class={[
-              'el-cascader-menus el-popper',
-              popperClass
-            ]}
-            ref="wrapper"
-          >
-            <div x-arrow class="popper__arrow"></div>
-            {menus}
-          </div>
-        </transition>
-      );
-    }
-  };
-</script>
+<script>
+  import { isDef } from '@penggy/element-ui/src/utils/shared';
+  import scrollIntoView from '@penggy/element-ui/src/utils/scroll-into-view';
+  import { generateId } from '@penggy/element-ui/src/utils/util';
+
+  const copyArray = (arr, props) => {
+    if (!arr || !Array.isArray(arr) || !props) return arr;
+    const result = [];
+    const configurableProps = ['__IS__FLAT__OPTIONS', 'label', 'value', 'disabled'];
+    const childrenProp = props.children || 'children';
+    arr.forEach(item => {
+      const itemCopy = {};
+      configurableProps.forEach(prop => {
+        let name = props[prop];
+        let value = item[name];
+        if (value === undefined) {
+          name = prop;
+          value = item[name];
+        }
+        if (value !== undefined) itemCopy[name] = value;
+      });
+      if (Array.isArray(item[childrenProp])) {
+        itemCopy[childrenProp] = copyArray(item[childrenProp], props);
+      }
+      result.push(itemCopy);
+    });
+    return result;
+  };
+
+  export default {
+    name: 'ElCascaderMenu',
+
+    data() {
+      return {
+        inputWidth: 0,
+        options: [],
+        props: {},
+        visible: false,
+        activeValue: [],
+        value: [],
+        expandTrigger: 'click',
+        changeOnSelect: false,
+        popperClass: '',
+        hoverTimer: 0,
+        clicking: false,
+        id: generateId()
+      };
+    },
+
+    watch: {
+      visible(value) {
+        if (value) {
+          this.activeValue = this.value;
+        }
+      },
+      value: {
+        immediate: true,
+        handler(value) {
+          this.activeValue = value;
+        }
+      }
+    },
+
+    computed: {
+      activeOptions: {
+        cache: false,
+        get() {
+          const activeValue = this.activeValue;
+          const configurableProps = ['label', 'value', 'children', 'disabled'];
+
+          const formatOptions = options => {
+            options.forEach(option => {
+              if (option.__IS__FLAT__OPTIONS) return;
+              configurableProps.forEach(prop => {
+                const value = option[this.props[prop] || prop];
+                if (value !== undefined) option[prop] = value;
+              });
+              if (Array.isArray(option.children)) {
+                formatOptions(option.children);
+              }
+            });
+          };
+
+          const loadActiveOptions = (options, activeOptions = []) => {
+            const level = activeOptions.length;
+            activeOptions[level] = options;
+            let active = activeValue[level];
+            if (isDef(active)) {
+              options = options.filter(option => option.value === active)[0];
+              if (options && options.children) {
+                loadActiveOptions(options.children, activeOptions);
+              }
+            }
+            return activeOptions;
+          };
+
+          const optionsCopy = copyArray(this.options, this.props);
+          formatOptions(optionsCopy);
+          return loadActiveOptions(optionsCopy);
+        }
+      }
+    },
+
+    methods: {
+      select(item, menuIndex) {
+        if (item.__IS__FLAT__OPTIONS) {
+          this.activeValue = item.value;
+        } else if (menuIndex) {
+          this.activeValue.splice(menuIndex, this.activeValue.length - 1, item.value);
+        } else {
+          this.activeValue = [item.value];
+        }
+        this.$emit('pick', this.activeValue.slice());
+      },
+      handleMenuLeave() {
+        this.$emit('menuLeave');
+      },
+      activeItem(item, menuIndex) {
+        const len = this.activeOptions.length;
+        this.activeValue.splice(menuIndex, len, item.value);
+        this.activeOptions.splice(menuIndex + 1, len, item.children);
+        if (this.changeOnSelect) {
+          this.$emit('pick', this.activeValue.slice(), false);
+        } else {
+          this.$emit('activeItemChange', this.activeValue);
+        }
+      },
+      scrollMenu(menu) {
+        scrollIntoView(menu, menu.getElementsByClassName('is-active')[0]);
+      },
+      handleMenuEnter() {
+        this.$nextTick(() => this.$refs.menus.forEach(menu => this.scrollMenu(menu)));
+      }
+    },
+
+    render(h) {
+      const {
+        activeValue,
+        activeOptions,
+        visible,
+        expandTrigger,
+        popperClass,
+        hoverThreshold
+      } = this;
+      let itemId = null;
+      let itemIndex = 0;
+
+      let hoverMenuRefs = {};
+      const hoverMenuHandler = e => {
+        const activeMenu = hoverMenuRefs.activeMenu;
+        if (!activeMenu) return;
+        const offsetX = e.offsetX;
+        const width = activeMenu.offsetWidth;
+        const height = activeMenu.offsetHeight;
+
+        if (e.target === hoverMenuRefs.activeItem) {
+          clearTimeout(this.hoverTimer);
+          const {activeItem} = hoverMenuRefs;
+          const offsetY_top = activeItem.offsetTop;
+          const offsetY_Bottom = offsetY_top + activeItem.offsetHeight;
+
+          hoverMenuRefs.hoverZone.innerHTML = `
+            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_top} L${width} 0 V${offsetY_top} Z" />
+            <path style="pointer-events: auto;" fill="transparent" d="M${offsetX} ${offsetY_Bottom} L${width} ${height} V${offsetY_Bottom} Z" />
+          `;
+        } else {
+          if (!this.hoverTimer) {
+            this.hoverTimer = setTimeout(() => {
+              hoverMenuRefs.hoverZone.innerHTML = '';
+            }, hoverThreshold);
+          }
+        }
+      };
+
+      const menus = this._l(activeOptions, (menu, menuIndex) => {
+        let isFlat = false;
+        const menuId = `menu-${this.id}-${ menuIndex}`;
+        const ownsId = `menu-${this.id}-${ menuIndex + 1 }`;
+        const items = this._l(menu, item => {
+          const events = {
+            on: {}
+          };
+
+          if (item.__IS__FLAT__OPTIONS) isFlat = true;
+
+          if (!item.disabled) {
+            // keydown up/down/left/right/enter
+            events.on.keydown = (ev) => {
+              const keyCode = ev.keyCode;
+              if ([37, 38, 39, 40, 13, 9, 27].indexOf(keyCode) < 0) {
+                return;
+              }
+              const currentEle = ev.target;
+              const parentEle = this.$refs.menus[menuIndex];
+              const menuItemList = parentEle.querySelectorAll("[tabindex='-1']");
+              const currentIndex = Array.prototype.indexOf.call(menuItemList, currentEle); // 当前索引
+              let nextIndex, nextMenu;
+              if ([38, 40].indexOf(keyCode) > -1) {
+                if (keyCode === 38) { // up键
+                  nextIndex = currentIndex !== 0 ? (currentIndex - 1) : currentIndex;
+                } else if (keyCode === 40) { // down
+                  nextIndex = currentIndex !== (menuItemList.length - 1) ? currentIndex + 1 : currentIndex;
+                }
+                menuItemList[nextIndex].focus();
+              } else if (keyCode === 37) { // left键
+                if (menuIndex !== 0) {
+                  const previousMenu = this.$refs.menus[menuIndex - 1];
+                  previousMenu.querySelector('[aria-expanded=true]').focus();
+                }
+              } else if (keyCode === 39) { // right
+                if (item.children) {
+                  // 有子menu 选择子menu的第一个menuitem
+                  nextMenu = this.$refs.menus[menuIndex + 1];
+                  nextMenu.querySelectorAll("[tabindex='-1']")[0].focus();
+                }
+              } else if (keyCode === 13) {
+                if (!item.children) {
+                  const id = currentEle.getAttribute('id');
+                  parentEle.setAttribute('aria-activedescendant', id);
+                  this.select(item, menuIndex);
+                  this.$nextTick(() => this.scrollMenu(this.$refs.menus[menuIndex]));
+                }
+              } else if (keyCode === 9 || keyCode === 27) { // esc tab
+                this.$emit('closeInside');
+              }
+            };
+            if (item.children) {
+              let triggerEvent = {
+                click: 'click',
+                hover: 'mouseenter'
+              }[expandTrigger];
+              const triggerHandler = () => {
+                if (this.visible) {
+                  this.activeItem(item, menuIndex);
+                  this.$nextTick(() => {
+                    // adjust self and next level
+                    this.scrollMenu(this.$refs.menus[menuIndex]);
+                    this.scrollMenu(this.$refs.menus[menuIndex + 1]);
+                  });
+                }
+              };
+              events.on[triggerEvent] = triggerHandler;
+              if (triggerEvent === 'mouseenter' && this.changeOnSelect) {
+                events.on.click = () => {
+                  if (this.activeValue.indexOf(item.value) !== -1) {
+                    this.$emit('closeInside', true);
+                  }
+                };
+              }
+              events.on['mousedown'] = () => {
+                this.clicking = true;
+              };
+              events.on['focus'] = () => { // focus 选中
+                if (this.clicking) {
+                  this.clicking = false;
+                  return;
+                }
+                triggerHandler();
+              };
+            } else {
+              events.on.click = () => {
+                this.select(item, menuIndex);
+                this.$nextTick(() => this.scrollMenu(this.$refs.menus[menuIndex]));
+              };
+            }
+          }
+          if (!item.disabled && !item.children) { // no children set id
+            itemId = `${menuId}-${itemIndex}`;
+            itemIndex++;
+          }
+          return (
+            <li
+              class={{
+                'el-cascader-menu__item': true,
+                'el-cascader-menu__item--extensible': item.children,
+                'is-active': item.value === activeValue[menuIndex],
+                'is-disabled': item.disabled
+              }}
+              ref={item.value === activeValue[menuIndex] ? 'activeItem' : null}
+              {...events}
+              tabindex= { item.disabled ? null : -1 }
+              role="menuitem"
+              aria-haspopup={ !!item.children }
+              aria-expanded={ item.value === activeValue[menuIndex] }
+              id = { itemId }
+              aria-owns = { !item.children ? null : ownsId }
+            >
+              {item.label}
+            </li>
+          );
+        });
+        let menuStyle = {};
+        if (isFlat) {
+          menuStyle.minWidth = this.inputWidth + 'px';
+        }
+
+        const isHoveredMenu = expandTrigger === 'hover' && activeValue.length - 1 === menuIndex;
+        const hoverMenuEvent = {
+          on: {
+          }
+        };
+
+        if (isHoveredMenu) {
+          hoverMenuEvent.on.mousemove = hoverMenuHandler;
+          menuStyle.position = 'relative';
+        }
+
+        return (
+          <ul
+            class={{
+              'el-cascader-menu': true,
+              'el-cascader-menu--flexible': isFlat
+            }}
+            {...hoverMenuEvent}
+            style={menuStyle}
+            refInFor
+            ref="menus"
+            role="menu"
+            id = { menuId }
+          >
+            {items}
+            {
+              isHoveredMenu
+                ? (<svg
+                  ref="hoverZone"
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    height: '100%',
+                    width: '100%',
+                    left: 0,
+                    pointerEvents: 'none'
+                  }}
+                ></svg>) : null
+            }
+          </ul>
+        );
+      });
+
+      if (expandTrigger === 'hover') {
+        this.$nextTick(() => {
+          const activeItem = this.$refs.activeItem;
+
+          if (activeItem) {
+            const activeMenu = activeItem.parentElement;
+            const hoverZone = this.$refs.hoverZone;
+
+            hoverMenuRefs = {
+              activeMenu,
+              activeItem,
+              hoverZone
+            };
+          } else {
+            hoverMenuRefs = {};
+          }
+        });
+      }
+
+      return (
+        <transition name="el-zoom-in-top" on-before-enter={this.handleMenuEnter} on-after-leave={this.handleMenuLeave}>
+          <div
+            v-show={visible}
+            class={[
+              'el-cascader-menus el-popper',
+              popperClass
+            ]}
+            ref="wrapper"
+          >
+            <div x-arrow class="popper__arrow"></div>
+            {menus}
+          </div>
+        </transition>
+      );
+    }
+  };
+</script>