@infineon/infineon-vue-datatable 0.0.0

package/src/plugins/treeView/src/components/HiddenFields.vue

@@ -0,0 +1,40 @@
+<script>
+import { defineComponent, h } from 'vue';
+import { isNaN } from '../utils';
+
+function stringifyValue(value) {
+  if (typeof value === 'string') return value;
+  // istanbul ignore else
+  if (value != null && !isNaN(value)) return JSON.stringify(value);
+  // istanbul ignore next
+  return '';
+}
+
+export default defineComponent({
+  functional: true,
+  inject: ['instance'],
+
+  render(context) {
+    const { instance } = context;
+
+    if (!instance.name || instance.disabled || !instance.hasValue) return null;
+
+    let stringifiedValues = instance.internalValue.map(stringifyValue);
+
+    if (instance.multiple && instance.joinValues) {
+      stringifiedValues = [
+        stringifiedValues.join(instance.delimiter),
+      ];
+    }
+
+    return stringifiedValues.map((stringifiedValue, i) => (
+      h('input', {
+        type: 'hidden',
+        name: instance.name,
+        value: stringifiedValue,
+        key: `hidden-field-${i}`,
+      })
+    ));
+  },
+});
+</script>

package/src/plugins/treeView/src/components/Input.vue

@@ -0,0 +1,298 @@
+<script>
+import { defineComponent, h } from 'vue';
+import { debounce, deepExtend, includes } from '../utils';
+import { MIN_INPUT_WIDTH, KEY_CODES, INPUT_DEBOUNCE_DELAY } from '../constants';
+
+const keysThatRequireMenuBeingOpen = [
+  KEY_CODES.ENTER,
+  KEY_CODES.END,
+  KEY_CODES.HOME,
+  KEY_CODES.ARROW_LEFT,
+  KEY_CODES.ARROW_UP,
+  KEY_CODES.ARROW_RIGHT,
+  KEY_CODES.ARROW_DOWN,
+];
+
+export default {
+  inject: ['instance'],
+
+  data: () => ({
+    inputWidth: MIN_INPUT_WIDTH,
+    value: '',
+  }),
+
+  computed: {
+    needAutoSize() {
+      const { instance } = this;
+
+      return (
+        instance.searchable
+          && !instance.disabled
+          && instance.multiple
+      );
+    },
+
+    inputStyle() {
+      return {
+        width: this.needAutoSize ? `${this.inputWidth}px` : null,
+      };
+    },
+  },
+
+  watch: {
+    // eslint-disable-next-line func-names
+    'instance.trigger.searchQuery': function (newValue) {
+      this.value = newValue;
+    },
+
+    value() {
+      // istanbul ignore else
+      if (this.needAutoSize) this.$nextTick(this.updateInputWidth);
+    },
+  },
+
+  created() {
+    this.debouncedCallback = debounce(
+      this.updateSearchQuery,
+      INPUT_DEBOUNCE_DELAY,
+      { leading: true, trailing: true },
+    );
+  },
+
+  methods: {
+    clear() {
+      this.onInput({
+        target: { value: '' },
+      });
+    },
+
+    focus() {
+      const { instance } = this;
+
+      if (!instance.disabled) {
+        return this.$refs.input && this.$refs.input.focus();
+      }
+      return true;
+    },
+
+    blur() {
+      return this.$refs.input && this.$refs.input.blur();
+    },
+
+    onFocus() {
+      const { instance } = this;
+
+      instance.trigger.isFocused = true;
+      // istanbul ignore else
+      if (instance.openOnFocus) instance.openMenu();
+    },
+
+    onBlur() {
+      const { instance } = this;
+      const menu = instance.getMenu();
+
+      // #15
+      // istanbul ignore next
+      if (menu && document.activeElement === menu) {
+        return this.focus();
+      }
+
+      instance.trigger.isFocused = false;
+      instance.closeMenu();
+      return true;
+    },
+
+    onInput(evt) {
+      const { value } = evt.target;
+
+      this.value = value;
+
+      if (value) {
+        this.debouncedCallback();
+      } else {
+        this.debouncedCallback.cancel();
+        this.updateSearchQuery();
+      }
+    },
+
+    // 用 keyUp 事件存在一个问题，删除输入框最后一个字符也会导致取消选中最后一项
+    onKeyDown(evt) {
+      const { instance } = this;
+      // https://css-tricks.com/snippets/javascript/javascript-keycodes/
+      // https://stackoverflow.com/questions/4471582/javascript-keycode-vs-which
+      const key = 'which' in evt ? evt.which : /* istanbul ignore next */ evt.keyCode;
+
+      if (evt.ctrlKey || evt.shiftKey || evt.altKey || evt.metaKey) { return; }
+
+      if (!instance.menu.isOpen && includes(keysThatRequireMenuBeingOpen, key)) {
+        evt.preventDefault();
+        // eslint-disable-next-line consistent-return
+        return instance.openMenu();
+      }
+
+      switch (key) {
+        case KEY_CODES.BACKSPACE: {
+          if (instance.backspaceRemoves && !this.value.length) {
+            instance.removeLastValue();
+          }
+          break;
+        }
+        case KEY_CODES.ENTER: {
+          evt.preventDefault();
+          if (instance.menu.current === null) return;
+          const current = instance.getNode(instance.menu.current);
+          if (current.isBranch && instance.disableBranchNodes) return;
+          instance.select(current);
+          break;
+        }
+        case KEY_CODES.ESCAPE: {
+          if (this.value.length) {
+            this.clear();
+          } else if (instance.menu.isOpen) {
+            instance.closeMenu();
+          }
+          break;
+        }
+        case KEY_CODES.END: {
+          evt.preventDefault();
+          instance.highlightLastOption();
+          break;
+        }
+        case KEY_CODES.HOME: {
+          evt.preventDefault();
+          instance.highlightFirstOption();
+          break;
+        }
+        case KEY_CODES.ARROW_LEFT: {
+          const current = instance.getNode(instance.menu.current);
+          if (current.isBranch && instance.shouldExpand(current)) {
+            evt.preventDefault();
+            instance.toggleExpanded(current);
+          } else if (!current.isRootNode
+           && (current.isLeaf || (current.isBranch && !(instance.shouldExpand(current))))) {
+            evt.preventDefault();
+            instance.setCurrentHighlightedOption(current.parentNode);
+          }
+          break;
+        }
+        case KEY_CODES.ARROW_UP: {
+          evt.preventDefault();
+          instance.highlightPrevOption();
+          break;
+        }
+        case KEY_CODES.ARROW_RIGHT: {
+          const current = instance.getNode(instance.menu.current);
+          if (current.isBranch && !instance.shouldExpand(current)) {
+            evt.preventDefault();
+            instance.toggleExpanded(current);
+          }
+          break;
+        }
+        case KEY_CODES.ARROW_DOWN: {
+          evt.preventDefault();
+          instance.highlightNextOption();
+          break;
+        }
+        case KEY_CODES.DELETE: {
+          if (instance.deleteRemoves && !this.value.length) {
+            instance.removeLastValue();
+          }
+          break;
+        }
+        default: {
+          // istanbul ignore else
+          instance.openMenu();
+        }
+      }
+    },
+
+    onMouseDown(evt) {
+      // istanbul ignore next
+      if (this.value.length) {
+        // Prevent it from bubbling to the top level and triggering `preventDefault()`
+        // to make the textbox unselectable
+        evt.stopPropagation();
+      }
+    },
+
+    renderInputContainer() {
+      const { instance } = this;
+      const props = {};
+      const children = [];
+
+      if (instance.searchable && !instance.disabled) {
+        children.push(this.renderInput());
+        if (this.needAutoSize) children.push(this.renderSizer());
+      }
+
+      if (!instance.searchable) {
+        deepExtend(props, {
+          on: {
+            focus: this.onFocus,
+            blur: this.onBlur,
+            keydown: this.onKeyDown,
+          },
+          ref: 'input',
+        });
+      }
+
+      if (!instance.searchable && !instance.disabled) {
+        deepExtend(props, {
+          attrs: {
+            tabIndex: instance.tabIndex,
+          },
+        });
+      }
+
+      return (
+        h('div', { class: 'vue-treeselect__input-container', ...props }, children)
+      );
+    },
+
+    renderInput() {
+      const { instance } = this;
+
+      return (
+        h('input', {
+          ref: 'input',
+          class: 'vue-treeselect__input',
+          type: 'text',
+          autocomplete: 'off',
+          tabIndex: instance.tabIndex,
+          required: instance.required && !instance.hasValue,
+          value: this.value,
+          style: this.inputStyle,
+          onFocus: this.onFocus,
+          onInput: this.onInput,
+          onBlur: this.onBlur,
+          onKeydown: this.onKeyDown,
+          onMousedown: this.onMouseDown,
+        })
+      );
+    },
+
+    renderSizer() {
+      return (
+        h('div', { ref: 'sizer', class: 'vue-treeselect__sizer' }, [this.value])
+      );
+    },
+
+    updateInputWidth() {
+      this.inputWidth = Math.max(
+        MIN_INPUT_WIDTH,
+        this.$refs.sizer.scrollWidth + 15,
+      );
+    },
+
+    updateSearchQuery() {
+      const { instance } = this;
+
+      instance.trigger.searchQuery = this.value;
+    },
+  },
+
+  render() {
+    return this.renderInputContainer();
+  },
+};
+</script>

package/src/plugins/treeView/src/components/Menu.vue

@@ -0,0 +1,314 @@
+<script>
+import { defineComponent, h } from 'vue';
+import { MENU_BUFFER } from '../constants';
+import { watchSize, setupResizeAndScrollEventListeners } from '../utils';
+import Option from './Option.vue';
+import Tip from './Tip.vue';
+
+const directionMap = {
+  top: 'top',
+  bottom: 'bottom',
+  above: 'top',
+  below: 'bottom',
+};
+
+export default {
+  inject: ['instance'],
+
+  computed: {
+    menuStyle() {
+      const { instance } = this;
+
+      return {
+        maxHeight: `${instance.maxHeight}px`,
+      };
+    },
+
+    menuContainerStyle() {
+      const { instance } = this;
+
+      return {
+        zIndex: instance.appendToBody ? null : instance.zIndex,
+      };
+    },
+  },
+
+  watch: {
+    // eslint-disable-next-line func-names
+    'instance.menu.isOpen': function (newValue) {
+      if (newValue) {
+        // In case `openMenu()` is just called and the menu is not rendered yet.
+        this.$nextTick(this.onMenuOpen);
+      } else {
+        this.onMenuClose();
+      }
+    },
+  },
+
+  created() {
+    this.menuSizeWatcher = null;
+    this.menuResizeAndScrollEventListeners = null;
+  },
+
+  mounted() {
+    const { instance } = this;
+
+    if (instance.menu.isOpen) this.$nextTick(this.onMenuOpen);
+  },
+
+  unmounted() {
+    this.onMenuClose();
+  },
+
+  methods: {
+    renderMenu() {
+      const { instance } = this;
+
+      if (!instance.menu.isOpen) return null;
+
+      return h('div', {
+        ref: 'menu',
+        class: 'vue-treeselect__menu',
+        onMousedown: instance.handleMouseDown,
+        style: this.menuStyle,
+      },
+      [
+        this.renderBeforeList(),
+        // eslint-disable-next-line no-nested-ternary
+        instance.async
+          ? this.renderAsyncSearchMenuInner()
+          : instance.localSearch.active
+            ? this.renderLocalSearchMenuInner()
+            : this.renderNormalMenuInner(),
+        this.renderAfterList(),
+      ]);
+    },
+
+    renderBeforeList() {
+      const { instance } = this;
+      const beforeListRenderer = instance.$slots['before-list'];
+
+      return beforeListRenderer
+        ? beforeListRenderer()
+        : null;
+    },
+
+    renderAfterList() {
+      const { instance } = this;
+      const afterListRenderer = instance.$slots['after-list'];
+
+      return afterListRenderer
+        ? afterListRenderer()
+        : null;
+    },
+
+    renderNormalMenuInner() {
+      const { instance } = this;
+
+      if (instance.rootOptionsStates.isLoading) {
+        return this.renderLoadingOptionsTip();
+      } if (instance.rootOptionsStates.loadingError) {
+        return this.renderLoadingRootOptionsErrorTip();
+      } if (instance.rootOptionsStates.isLoaded && instance.forest.normalizedOptions.length === 0) {
+        return this.renderNoAvailableOptionsTip();
+      }
+      return this.renderOptionList();
+    },
+
+    renderLocalSearchMenuInner() {
+      const { instance } = this;
+
+      if (instance.rootOptionsStates.isLoading) {
+        return this.renderLoadingOptionsTip();
+      } if (instance.rootOptionsStates.loadingError) {
+        return this.renderLoadingRootOptionsErrorTip();
+      } if (instance.rootOptionsStates.isLoaded && instance.forest.normalizedOptions.length === 0) {
+        return this.renderNoAvailableOptionsTip();
+      } if (instance.localSearch.noResults) {
+        return this.renderNoResultsTip();
+      }
+      return this.renderOptionList();
+    },
+
+    renderAsyncSearchMenuInner() {
+      const { instance } = this;
+      const entry = instance.getRemoteSearchEntry;
+      const shouldShowSearchPromptTip = instance.trigger.searchQuery === '' && !instance.defaultOptions;
+      const shouldShowNoResultsTip = shouldShowSearchPromptTip
+        ? false
+        : entry.isLoaded && entry.options.length === 0;
+
+      if (shouldShowSearchPromptTip) {
+        return this.renderSearchPromptTip();
+      } if (entry.isLoading) {
+        return this.renderLoadingOptionsTip();
+      } if (entry.loadingError) {
+        return this.renderAsyncSearchLoadingErrorTip();
+      } if (shouldShowNoResultsTip) {
+        return this.renderNoResultsTip();
+      }
+      return this.renderOptionList();
+    },
+
+    renderOptionList() {
+      const { instance } = this;
+
+      return (
+        h('div', { class: 'vue-treeselect__list' },
+          instance.forest.normalizedOptions.map((rootNode) => (
+            h(Option, { node: rootNode, key: rootNode.id })
+          )))
+      );
+    },
+
+    renderSearchPromptTip() {
+      const { instance } = this;
+
+      return (
+        h(Tip, { type: 'search-prompt', icon: 'warning' }, () => instance.searchPromptText)
+      );
+    },
+
+    renderLoadingOptionsTip() {
+      const { instance } = this;
+
+      return (
+        h(Tip, { type: 'loading', icon: 'loader' }, () => [instance.loadingText])
+      );
+    },
+
+    renderLoadingRootOptionsErrorTip() {
+      const { instance } = this;
+
+      return (
+        h(Tip, { type: 'error', icon: 'error' }, () => [
+          instance.rootOptionsStates.loadingError,
+          h('a', {
+            class: 'vue-treeselect__retry',
+            onClick: instance.loadRootOptions,
+            title: instance.retryTitle,
+          }, [instance.retryText]),
+        ])
+      );
+    },
+
+    renderAsyncSearchLoadingErrorTip() {
+      const { instance } = this;
+      const entry = instance.getRemoteSearchEntry;
+
+      return (
+        h(Tip, { type: 'error', icon: 'error' }, () => [
+          instance.rootOptionsStates.loadingError,
+          h('a', {
+            class: 'vue-treeselect__retry',
+            onClick: instance.handleRemoteSearch,
+            title: instance.retryTitle,
+          }, [instance.retryText]),
+        ])
+      );
+    },
+
+    renderNoAvailableOptionsTip() {
+      const { instance } = this;
+
+      return (
+        h(Tip, { type: 'no-options', icon: 'warning' }, () => [instance.searchPromptText])
+      );
+    },
+
+    renderNoResultsTip() {
+      const { instance } = this;
+      return (
+        h(Tip, { type: 'no-results', icon: 'warning' }, () => [instance.noResultsText])
+      );
+    },
+
+    onMenuOpen() {
+      this.adjustMenuOpenDirection();
+      this.setupMenuSizeWatcher();
+      this.setupMenuResizeAndScrollEventListeners();
+    },
+
+    onMenuClose() {
+      this.removeMenuSizeWatcher();
+      this.removeMenuResizeAndScrollEventListeners();
+    },
+
+    adjustMenuOpenDirection() {
+      const { instance } = this;
+      if (!instance.menu.isOpen) return;
+
+      const $menu = instance.getMenu();
+      const $control = instance.getControl();
+      const menuRect = $menu.getBoundingClientRect();
+      const controlRect = $control.getBoundingClientRect();
+      const menuHeight = menuRect.height;
+      const viewportHeight = window.innerHeight;
+      const spaceAbove = controlRect.top;
+      const spaceBelow = window.innerHeight - controlRect.bottom;
+      const isControlInViewport = (
+        (controlRect.top >= 0 && controlRect.top <= viewportHeight)
+          || (controlRect.top < 0 && controlRect.bottom > 0)
+      );
+      const hasEnoughSpaceBelow = spaceBelow > menuHeight + MENU_BUFFER;
+      const hasEnoughSpaceAbove = spaceAbove > menuHeight + MENU_BUFFER;
+
+      if (!isControlInViewport) {
+        instance.closeMenu();
+      } else if (instance.openDirection !== 'auto') {
+        instance.menu.placement = directionMap[instance.openDirection];
+      } else if (hasEnoughSpaceBelow || !hasEnoughSpaceAbove) {
+        instance.menu.placement = 'bottom';
+      } else {
+        instance.menu.placement = 'top';
+      }
+    },
+
+    setupMenuSizeWatcher() {
+      const { instance } = this;
+      const $menu = instance.getMenu();
+
+      // istanbul ignore next
+      if (this.menuSizeWatcher) return;
+
+      this.menuSizeWatcher = {
+        remove: watchSize($menu, this.adjustMenuOpenDirection),
+      };
+    },
+
+    setupMenuResizeAndScrollEventListeners() {
+      const { instance } = this;
+      const $control = instance.getControl();
+
+      // istanbul ignore next
+      if (this.menuResizeAndScrollEventListeners) return;
+
+      this.menuResizeAndScrollEventListeners = {
+        remove: setupResizeAndScrollEventListeners($control, this.adjustMenuOpenDirection),
+      };
+    },
+
+    removeMenuSizeWatcher() {
+      if (!this.menuSizeWatcher) return;
+
+      this.menuSizeWatcher.remove();
+      this.menuSizeWatcher = null;
+    },
+
+    removeMenuResizeAndScrollEventListeners() {
+      if (!this.menuResizeAndScrollEventListeners) return;
+
+      this.menuResizeAndScrollEventListeners.remove();
+      this.menuResizeAndScrollEventListeners = null;
+    },
+  },
+
+  render() {
+    return (
+      h('div', { ref: 'menu-container', class: 'vue-treeselect__menu-container', style: this.menuContainerStyle }, [
+        h('transition', { name: 'vue-treeselect__menu--transition' }, this.renderMenu()),
+      ])
+    );
+  },
+};
+</script>