@infineon/infineon-vue-datatable 0.0.0

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

@@ -0,0 +1,195 @@
+<script>
+import { createApp, defineComponent, h } from 'vue';
+import { watchSize, setupResizeAndScrollEventListeners, find } from '../utils';
+import Menu from './Menu.vue';
+
+const PortalTarget = {
+  name: 'vue-treeselect--portal-target',
+  inject: ['instance'],
+
+  watch: {
+    'instance.menu.isOpen': {
+      handler(newValue) {
+        if (newValue) {
+          this.setupHandlers();
+        } else {
+          this.removeHandlers();
+        }
+      },
+    },
+
+    'instance.menu.placement': {
+      handler(newValue) {
+        this.updateMenuContainerOffset();
+      },
+    },
+
+  },
+
+  created() {
+    this.controlResizeAndScrollEventListeners = null;
+    this.controlSizeWatcher = null;
+  },
+
+  mounted() {
+    const { instance } = this;
+
+    if (instance.menu.isOpen) this.setupHandlers();
+  },
+
+  methods: {
+    setupHandlers() {
+      this.updateWidth();
+      this.updateMenuContainerOffset();
+      this.setupControlResizeAndScrollEventListeners();
+      this.setupControlSizeWatcher();
+    },
+
+    removeHandlers() {
+      this.removeControlResizeAndScrollEventListeners();
+      this.removeControlSizeWatcher();
+    },
+
+    setupControlResizeAndScrollEventListeners() {
+      const { instance } = this;
+      const $control = instance.getControl();
+
+      // istanbul ignore next
+      if (this.controlResizeAndScrollEventListeners) return;
+
+      this.controlResizeAndScrollEventListeners = {
+        remove: setupResizeAndScrollEventListeners($control, this.updateMenuContainerOffset),
+      };
+    },
+
+    setupControlSizeWatcher() {
+      const { instance } = this;
+      const $control = instance.getControl();
+
+      // istanbul ignore next
+      if (this.controlSizeWatcher) return;
+
+      this.controlSizeWatcher = {
+        remove: watchSize($control, () => {
+          this.updateWidth();
+          this.updateMenuContainerOffset();
+        }),
+      };
+    },
+
+    removeControlResizeAndScrollEventListeners() {
+      if (!this.controlResizeAndScrollEventListeners) return;
+
+      this.controlResizeAndScrollEventListeners.remove();
+      this.controlResizeAndScrollEventListeners = null;
+    },
+
+    removeControlSizeWatcher() {
+      if (!this.controlSizeWatcher) return;
+
+      this.controlSizeWatcher.remove();
+      this.controlSizeWatcher = null;
+    },
+
+    updateWidth() {
+      const { instance } = this;
+      const $portalTarget = this.$el;
+      const $control = instance.getControl();
+      const controlRect = $control.getBoundingClientRect();
+
+      $portalTarget.style.width = `${controlRect.width}px`;
+    },
+
+    updateMenuContainerOffset() {
+      const { instance } = this;
+      const $control = instance.getControl();
+      const $portalTarget = this.$el;
+      const controlRect = $control.getBoundingClientRect();
+      const portalTargetRect = $portalTarget.getBoundingClientRect();
+      const offsetY = instance.menu.placement === 'bottom' ? controlRect.height : 0;
+      const left = `${Math.round(controlRect.left - portalTargetRect.left)}px`;
+      const top = `${Math.round(controlRect.top - portalTargetRect.top + offsetY)}px`;
+      const menuContainerStyle = this.$refs.menu.$refs['menu-container'].style;
+      const transformVariations = ['transform', 'webkitTransform', 'MozTransform', 'msTransform'];
+      const transform = find(transformVariations, (t) => t in document.body.style);
+
+      // IE9 doesn't support `translate3d()`.
+      menuContainerStyle[transform] = `translate(${left}, ${top})`;
+    },
+  },
+
+  render() {
+    const { instance } = this;
+    const portalTargetClass = ['vue-treeselect__portal-target', instance.wrapperClass];
+    const portalTargetStyle = { zIndex: instance.zIndex };
+
+    return (
+      h('div', {
+        class: portalTargetClass,
+        style: portalTargetStyle,
+        'data-instance-id': instance.getInstanceId(),
+      }, [
+        h(Menu, { ref: 'menu' }),
+      ])
+    );
+  },
+
+  unmounted() {
+    this.removeHandlers();
+  },
+};
+
+let placeholder;
+// eslint-disable-next-line vue/one-component-per-file
+export default {
+  inject: ['instance'],
+  created() {
+    this.portalTarget = null;
+  },
+
+  mounted() {
+    this.setup();
+  },
+
+  unmounted() {
+    this.teardown();
+  },
+
+  methods: {
+    setup() {
+      const el = document.createElement('div');
+      document.body.appendChild(el);
+      // eslint-disable-next-line vue/one-component-per-file
+      this.portalTarget = createApp({
+        parent: this,
+        ...PortalTarget,
+      });
+      this.portalTarget.provide('instance', this.instance);
+      this.portalTarget.mount(el);
+      // this.portalTarget = new Vue({
+      //   el,
+      //   parent: this,
+      //   ...PortalTarget,
+      // })
+    },
+
+    teardown() {
+      // eslint-disable-next-line no-underscore-dangle
+      document.body.removeChild(this.portalTarget._instance.vnode.el.parentElement);
+      // eslint-disable-next-line no-underscore-dangle
+      this.portalTarget._instance.vnode.el.parentElement.innerHTML = '';
+      this.portalTarget = null;
+    },
+  },
+
+  render() {
+    if (!placeholder) {
+      placeholder = (
+        h('div', { class: 'vue-treeselect__menu-placeholder' })
+      );
+    }
+
+    return placeholder;
+  },
+};
+</script>

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

@@ -0,0 +1,60 @@
+<script>
+import { defineComponent, h } from 'vue';
+import MultiValueItem from './MultiValueItem.vue';
+import Input from './Input.vue';
+import Placeholder from './Placeholder.vue';
+
+export default {
+  inject: ['instance'],
+
+  methods: {
+    renderMultiValueItems() {
+      const { instance } = this;
+
+      return instance.internalValue
+        .slice(0, instance.limit)
+        .map(instance.getNode)
+        .map((node) => (
+          h(MultiValueItem, { key: `multi-value-item-${node.id}`, node })));
+    },
+
+    renderExceedLimitTip() {
+      const { instance } = this;
+      const count = instance.internalValue.length - instance.limit;
+
+      if (count <= 0) return null;
+
+      return (
+        h('div', { class: 'vue-treeselect__limit-tip vue-treeselect-helper-zoom-effect-off', key: 'exceed-limit-tip' }, [
+          h('span', { class: 'vue-treeselect__limit-tip-text' }, [instance.limitText(count)]),
+        ])
+      );
+    },
+  },
+
+  render() {
+    const { renderValueContainer } = this.$parent;
+    // const transitionGroupProps = {
+    //   props: {
+    //     tag: 'div',
+    //     name: 'vue-treeselect__multi-value-item--transition',
+    //     appear: true,
+    //   },
+    // }
+
+    return renderValueContainer(
+      h('transition-group', {
+        class: 'vue-treeselect__multi-value',
+        tag: 'div',
+        name: 'vue-treeselect__multi-value-item--transition',
+        appear: true,
+      }, [
+        this.renderMultiValueItems(),
+        this.renderExceedLimitTip(),
+        h(Placeholder, { key: 'placeholder' }),
+        h(Input, { ref: 'input', key: 'input' }),
+      ]),
+    );
+  },
+};
+</script>

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

@@ -0,0 +1,49 @@
+<script>
+import { defineComponent, h } from 'vue';
+import { onLeftClick } from '../utils';
+import DeleteIcon from './icons/Delete.vue';
+
+export default {
+  inject: ['instance'],
+
+  props: {
+    node: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  methods: {
+    handleMouseDown: onLeftClick(function handleMouseDown() {
+      const { instance, node } = this;
+
+      // Deselect this node.
+      instance.select(node);
+    }),
+  },
+
+  render() {
+    const { instance, node } = this;
+    const itemClass = {
+      'vue-treeselect__multi-value-item': true,
+      'vue-treeselect__multi-value-item-disabled': node.isDisabled,
+      'vue-treeselect__multi-value-item-new': node.isNew,
+    };
+    const customValueLabelRenderer = instance.$slots['value-label'];
+    const labelRenderer = customValueLabelRenderer
+      ? customValueLabelRenderer({ node }) : node.label || node.id;
+
+    return (
+      h('div', { class: 'vue-treeselect__multi-value-item-container' }, [
+        h('div', { class: itemClass, onMousedown: this.handleMouseDown }, [
+          h('span', { class: 'vue-treeselect__multi-value-label' },
+            labelRenderer),
+          h('span', { class: 'vue-treeselect__icon vue-treeselect__value-remove' }, [
+            h(DeleteIcon),
+          ]),
+        ]),
+      ])
+    );
+  },
+};
+</script>

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

@@ -0,0 +1,302 @@
+<script>
+import { defineComponent, h } from 'vue';
+import { UNCHECKED, INDETERMINATE, CHECKED } from '../constants';
+import { onLeftClick } from '../utils';
+import Tip from './Tip.vue';
+import ArrowIcon from './icons/Arrow.vue';
+
+let arrowPlaceholder; let checkMark; let
+  minusMark;
+
+const Option = {
+  name: 'vue-treeselect--option',
+  inject: ['instance'],
+
+  props: {
+    node: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  computed: {
+    shouldExpand() {
+      const { instance, node } = this;
+
+      return node.isBranch && instance.shouldExpand(node);
+    },
+
+    shouldShow() {
+      const { instance, node } = this;
+      return instance.shouldShowOptionInMenu(node);
+    },
+  },
+
+  methods: {
+    renderOption() {
+      const { instance, node } = this;
+      const optionClass = {
+        'vue-treeselect__option': true,
+        'vue-treeselect__option--disabled': node.isDisabled,
+        'vue-treeselect__option--selected': instance.isSelected(node),
+        'vue-treeselect__option--highlight': node.isHighlighted,
+        'vue-treeselect__option--matched': instance.localSearch.active && node.isMatched,
+        'vue-treeselect__option--hide': !this.shouldShow,
+      };
+
+      const t = (
+        h('div', {
+          class: optionClass,
+          onMouseenter: this.handleMouseEnterOption,
+          dataId: node.id,
+        }, [
+          this.renderArrow(),
+          this.renderCheckboxContainer([
+            this.renderCheckbox(),
+          ]), this.renderLabelContainer([
+            this.renderLabel(),
+          ])])
+      );
+      return t;
+    },
+
+    renderSubOptionsList() {
+      if (!this.shouldExpand) return null;
+
+      return (
+        h('div', { class: 'vue-treeselect__list' }, [
+          ...this.renderSubOptions(),
+          this.renderNoChildrenTip(),
+          this.renderLoadingChildrenTip(),
+          this.renderLoadingChildrenErrorTip(),
+        ])
+      );
+    },
+
+    renderArrow() {
+      const { instance, node } = this;
+
+      if (instance.shouldFlattenOptions && this.shouldShow) return null;
+      if (node.isBranch) {
+        const arrowClass = {
+          'vue-treeselect__option-arrow': true,
+          'vue-treeselect__option-arrow--rotated': this.shouldExpand,
+        };
+
+        return (
+          h('div', { class: 'vue-treeselect__option-arrow-container', onMousedown: this.handleMouseDownOnArrow },
+            [
+              h('transition', { name: 'vue-treeselect__option-arrow--prepare', appear: true }, [
+                h(ArrowIcon, { class: arrowClass })]),
+            ])
+        );
+      }
+
+      // For leaf nodes, we render a placeholder to keep its label aligned to
+      // branch nodes. Unless there is no branch nodes at all (a normal
+      // non-tree select).
+      if (/* node.isLeaf && */instance.hasBranchNodes) {
+        if (!arrowPlaceholder) {
+          arrowPlaceholder = (
+            h('div', { class: 'vue-treeselect__option-arrow-placeholder' }, [])
+          );
+        }
+
+        return arrowPlaceholder;
+      }
+
+      return null;
+    },
+
+    renderLabelContainer(children) {
+      return (
+        h('div', {
+          class: 'vue-treeselect__label-container',
+          onMousedown: this.handleMouseDownOnLabelContainer,
+        }, children)
+      );
+    },
+
+    renderCheckboxContainer(children) {
+      const { instance, node } = this;
+
+      if (instance.single) return null;
+      if (instance.disableBranchNodes && node.isBranch) return null;
+
+      return (
+        h('div', {
+          class: 'vue-treeselect__checkbox-container',
+          onMousedown: this.handleMouseDownOnLabelContainer,
+        }, children)
+      );
+    },
+
+    renderCheckbox() {
+      const { instance, node } = this;
+      const checkedState = instance.forest.checkedStateMap[node.id];
+      const checkboxClass = {
+        'vue-treeselect__checkbox': true,
+        'vue-treeselect__checkbox--checked': checkedState === CHECKED,
+        'vue-treeselect__checkbox--indeterminate': checkedState === INDETERMINATE,
+        'vue-treeselect__checkbox--unchecked': checkedState === UNCHECKED,
+        'vue-treeselect__checkbox--disabled': node.isDisabled,
+      };
+
+      if (!checkMark) {
+        checkMark = (
+          h('span', { class: 'vue-treeselect__check-mark' })
+        );
+      }
+      if (!minusMark) {
+        minusMark = (
+          h('span', { class: 'vue-treeselect__minus-mark' })
+        );
+      }
+
+      return (
+        h('span', { class: checkboxClass }, [
+          checkMark,
+          minusMark])
+      );
+    },
+
+    renderLabel() {
+      const { instance, node } = this;
+      const shouldShowCount = (
+        node.isBranch && (instance.localSearch.active
+          ? instance.showCountOnSearchComputed
+          : instance.showCount
+        )
+      );
+      // eslint-disable-next-line no-nested-ternary
+      const count = shouldShowCount
+        ? instance.localSearch.active
+          ? instance.localSearch.countMap[node.id][instance.showCountOf]
+          : node.count[instance.showCountOf]
+        : NaN;
+      const labelClassName = 'vue-treeselect__label';
+      const countClassName = 'vue-treeselect__count';
+      const customLabelRenderer = instance.$slots['option-label'];
+
+      if (customLabelRenderer) {
+        return customLabelRenderer({
+          node,
+          shouldShowCount,
+          count,
+          labelClassName,
+          countClassName,
+        });
+      }
+      return (
+        h('label', { class: labelClassName }, [
+          node.label,
+          (shouldShowCount && (
+            h('span', { class: countClassName }, [count])
+          )),
+        ])
+      );
+    },
+
+    renderSubOptions() {
+      const { node } = this;
+
+      if (!node.childrenStates.isLoaded) return null;
+
+      return node.children.map((childNode) => (
+        h(Option, { node: childNode, key: childNode.id })
+      ));
+    },
+
+    renderNoChildrenTip() {
+      const { instance, node } = this;
+
+      if (!node.childrenStates.isLoaded || node.children.length) return null;
+
+      return (
+        h(Tip, { type: 'no-children', icon: 'warning' }, () => instance.noChildrenText)
+      );
+    },
+
+    renderLoadingChildrenTip() {
+      const { instance, node } = this;
+
+      if (!node.childrenStates.isLoading) return null;
+
+      return (
+        h(Tip, { type: 'loading', icon: 'loader' }, () => [instance.noChildrenText])
+      );
+    },
+
+    renderLoadingChildrenErrorTip() {
+      const { instance, node } = this;
+
+      if (!node.childrenStates.loadingError) return null;
+
+      return (
+        h(Tip, { type: 'error', icon: 'error' }, () => [
+          node.childrenStates.loadingError,
+          h('a', { class: 'vue-treeselect__retry', title: instance.retryTitle, onMousedown: this.handleMouseDownOnRetry }, [
+            instance.retryText]),
+        ])
+      );
+    },
+
+    handleMouseEnterOption(evt) {
+      const { instance, node } = this;
+
+      // Equivalent to `self` modifier.
+      // istanbul ignore next
+      if (evt.target !== evt.currentTarget) return;
+
+      instance.setCurrentHighlightedOption(node, false);
+    },
+
+    handleMouseDownOnArrow: onLeftClick(function handleMouseDownOnOptionArrow() {
+      const { instance, node } = this;
+      instance.toggleExpanded(node);
+    }),
+
+    handleMouseDownOnLabelContainer: onLeftClick(function handleMouseDownOnLabelContainer() {
+      const { instance, node } = this;
+
+      if (node.isBranch && instance.disableBranchNodes) {
+        instance.toggleExpanded(node);
+      } else {
+        instance.select(node);
+      }
+    }),
+
+    handleMouseDownOnRetry: onLeftClick(function handleMouseDownOnRetry() {
+      const { instance, node } = this;
+      instance.loadChildrenOptions(node);
+    }),
+  },
+
+  render() {
+    const { node } = this;
+    const indentLevel = this.instance.shouldFlattenOptions ? 0 : node.level;
+    const listItemClass = {
+      'vue-treeselect__list-item': true,
+      [`vue-treeselect__indent-level-${indentLevel}`]: true,
+    };
+
+    const childs = [this.renderOption()];
+
+    if (node.isBranch) {
+      childs.push(h('transition', {
+        name: 'vue-treeselect__list--transition',
+      }, [
+        this.renderSubOptionsList(),
+      ]));
+    }
+
+    return (
+      h('div', { class: listItemClass },
+        childs)
+    );
+  },
+};
+
+// eslint-disable-next-line vue/require-direct-export
+export default Option;
+</script>

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

@@ -0,0 +1,20 @@
+<script>
+import { defineComponent, h } from 'vue';
+
+export default {
+  inject: ['instance'],
+
+  render() {
+    const { instance } = this;
+    const placeholderClass = {
+      'vue-treeselect__placeholder': true,
+      'vue-treeselect-helper-zoom-effect-off': true,
+      'vue-treeselect-helper-hide': instance.hasValue || instance.trigger.searchQuery,
+    };
+
+    return (
+      h('div', { class: placeholderClass }, instance.placeholder)
+    );
+  },
+};
+</script>

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

@@ -0,0 +1,32 @@
+<script>
+import { h } from 'vue';
+import Input from './Input.vue';
+import Placeholder from './Placeholder.vue';
+
+export default {
+  inject: ['instance'],
+  methods: {
+    renderSingleValueLabel() {
+      const { instance } = this;
+      const node = instance.selectedNodes[0];
+
+      const customValueLabelRenderer = instance.$slots['value-label'];
+      return customValueLabelRenderer
+        ? customValueLabelRenderer({ node })
+        : node.label;
+    },
+  },
+  render() {
+    const { instance, $parent: { renderValueContainer } } = this;
+    const shouldShowValue = instance.hasValue && !instance.trigger.searchQuery;
+
+    return renderValueContainer([
+      shouldShowValue && (
+        h('div', { class: 'vue-treeselect__single-value' }, [this.renderSingleValueLabel()])
+      ),
+      h(Placeholder),
+      h(Input, { ref: 'input' }),
+    ]);
+  },
+};
+</script>

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

@@ -0,0 +1,40 @@
+<script>
+import { defineComponent, h } from 'vue';
+
+export default defineComponent({
+  functional: true,
+
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+  },
+
+  render() {
+    const { type, icon } = this;
+
+    return (
+      h('div', {
+        class: `vue-treeselect__tip vue-treeselect__${type}-tip`,
+      }, [
+        h('div', {
+          class: 'vue-treeselect__icon-container',
+        }, [
+          h('span', { class: `vue-treeselect__icon-${icon}` }),
+        ]),
+
+        h('span', {
+          class: `vue-treeselect__tip-text vue-treeselect__${type}-tip-text`,
+        }, [
+          this.$slots.default(),
+        ]),
+      ])
+    );
+  },
+});
+</script>