@meve/ui/es/dropdown/index.js

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Popover from '../popover';
import Ripple from '../ripple';
import Icon from '../icon';
import { createNamespace } from '../utils/create';
import { isArray, isFunction, isNumber, isString } from '../utils/shared';
import { props } from './props';






var _createNamespace = createNamespace('dropdown'),
    namespace = _createNamespace.namespace,
    createComponent = _createNamespace.createComponent;

var DropdownPlugin = createComponent({
  props: props,
  directives: {
    Ripple: Ripple
  },
  methods: {
    handleCellClick: function handleCellClick(event, option) {
      if (option.disabled || isArray(option[this.childrenField])) {
        return;
      } // Disable propagation to popover because the popover will trigger the reopening


      event.stopPropagation();
      this.$emit('select', option);
      this.$refs.popover.close();
    },
    renderIcon: function renderIcon(option) {
      var h = this.$createElement;
      var icon = option[this.iconField];

      if (isFunction(icon)) {
        return icon(this.$createElement);
      }

      if (isString(icon)) {
        return h(Icon, {
          "attrs": {
            "dropdown-cover": true,
            "name": icon
          },
          "class": namespace('__icon')
        });
      }
    },
    renderLabel: function renderLabel(option) {
      var h = this.$createElement;
      var label = option[this.labelField];

      if (isFunction(label)) {
        return label(this.$createElement);
      }

      if (isString(label) || isNumber(label)) {
        return h("div", {
          "class": namespace('__label')
        }, [label]);
      }
    },
    renderCell: function renderCell(option) {
      var _this = this;

      var h = this.$createElement;
      var disabled = option.disabled;
      var children = option[this.childrenField];
      var key = option[this.keyField];
      return h("div", {
        "key": key,
        "class": [namespace('__cell'), namespace("--" + this.size), disabled ? namespace('--disabled') : null],
        "directives": [{
          name: "ripple",
          value: {
            disabled: disabled
          }
        }],
        "on": _extends({}, {
          "click": function click($event) {
            for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
              attrs[_key - 1] = arguments[_key];
            }

            (function (event) {
              return _this.handleCellClick(event, option);
            }).apply(void 0, [$event].concat(attrs));
          }
        })
      }, [this.renderIcon(option), this.renderLabel(option), isArray(children) && h(Icon, {
        "attrs": {
          "dropdown-cover": true,
          "name": "arrow-right"
        },
        "class": namespace('__arrow')
      })]);
    },
    renderChildren: function renderChildren(children) {
      var h = this.$createElement;
      return h("div", {
        "class": namespace('__wrapper')
      }, [this.renderOptions(children)]);
    },
    renderOptions: function renderOptions(options) {
      var _this2 = this;

      var h = this.$createElement;
      return options.map(function (option) {
        return isArray(option[_this2.childrenField]) ? h(Popover, {
          "attrs": {
            "disabled": option.disabled,
            "x": 4,
            "trigger": "click",
            "placement": "right-start",
            "defaultStyle": false
          },
          "key": option[_this2.keyField],
          "scopedSlots": {
            trigger: function trigger() {
              return _this2.renderCell(option);
            }
          }
        }, [_this2.renderChildren(option[_this2.childrenField])]) : _this2.renderCell(option);
      });
    }
  },
  render: function render() {
    var _this3 = this;

    var h = arguments[0];
    var options = this.options,
        disabled = this.disabled,
        renderOptions = this.renderOptions;
    return h("div", {
      "class": namespace()
    }, [h(Popover, {
      "ref": "popover",
      "attrs": {
        "y": 4,
        "disabled": disabled,
        "trigger": "click",
        "defaultStyle": false
      },
      "scopedSlots": {
        trigger: function trigger() {
          return _this3.slots();
        }
      },
      "on": _extends({}, {
        "open": function open($event) {
          for (var _len2 = arguments.length, attrs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
            attrs[_key2 - 1] = arguments[_key2];
          }

          (function () {
            return _this3.$emit('open');
          }).apply(void 0, [$event].concat(attrs));
        },
        "opened": function opened($event) {
          for (var _len3 = arguments.length, attrs = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
            attrs[_key3 - 1] = arguments[_key3];
          }

          (function () {
            return _this3.$emit('opened');
          }).apply(void 0, [$event].concat(attrs));
        },
        "close": function close($event) {
          for (var _len4 = arguments.length, attrs = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
            attrs[_key4 - 1] = arguments[_key4];
          }

          (function () {
            return _this3.$emit('close');
          }).apply(void 0, [$event].concat(attrs));
        },
        "closed": function closed($event) {
          for (var _len5 = arguments.length, attrs = new Array(_len5 > 1 ? _len5 - 1 : 0), _key5 = 1; _key5 < _len5; _key5++) {
            attrs[_key5 - 1] = arguments[_key5];
          }

          (function () {
            return _this3.$emit('closed');
          }).apply(void 0, [$event].concat(attrs));
        }
      })
    }, [h("div", {
      "class": namespace('__wrapper')
    }, [renderOptions(options)])])]);
  }
});
export var _DropdownComponent = DropdownPlugin;
export default DropdownPlugin;