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

Argon design system components library

import _extends from "@babel/runtime/helpers/esm/extends";
import Ripple from '../ripple';
import { createNamespace } from '../utils/create';
import { props } from './props';
import { createChildrenMixin } from '../utils/mixins/relation';




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

var OptionPlugin = createComponent({
  mixins: [createChildrenMixin('select', {
    parentKey: 'select',
    childrenKey: 'options'
  })],
  directives: {
    Ripple: Ripple
  },
  props: props,
  computed: {
    selected: function selected() {
      var _this$value, _this$select, _this$select2;

      var value = (_this$value = this.value) != null ? _this$value : this.label;
      var selectValue = (_this$select = this.select) == null ? void 0 : _this$select.value;
      return (_this$select2 = this.select) != null && _this$select2.multiple ? selectValue.includes(value) : selectValue === value;
    }
  },
  methods: {
    handleMouseenter: function handleMouseenter() {
      var _this$select3;

      if (this.disabled) {
        return;
      }

      (_this$select3 = this.select) == null ? void 0 : _this$select3.onOptionEnter(this);
    },
    handleClick: function handleClick() {
      var _this$select4;

      if (this.disabled) {
        return;
      }

      (_this$select4 = this.select) == null ? void 0 : _this$select4.onOptionSelect(this);
    },
    renderLabel: function renderLabel() {
      if (this.hasSlots()) {
        return this.slots();
      }

      return this.label;
    }
  },
  render: function render() {
    var h = arguments[0];
    var index = this.index,
        selected = this.selected,
        handleMouseenter = this.handleMouseenter,
        disabled = this.disabled,
        handleClick = this.handleClick,
        select = this.select;
    return h("div", {
      "class": [namespace(), namespace("--" + (select == null ? void 0 : select.size)), disabled ? namespace('--disabled') : null, index === (select == null ? void 0 : select.keyboardActiveIndex) ? namespace('--key-active') : null, selected ? namespace('--selected') : null],
      "directives": [{
        name: "ripple",
        value: {
          disabled: disabled
        }
      }],
      "on": _extends({}, {
        "mouseenter": function mouseenter($event) {
          for (var _len = arguments.length, attrs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
            attrs[_key - 1] = arguments[_key];
          }

          handleMouseenter.apply(void 0, [$event].concat(attrs));
        },
        "click": function click($event) {
          for (var _len2 = arguments.length, attrs = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
            attrs[_key2 - 1] = arguments[_key2];
          }

          handleClick.apply(void 0, [$event].concat(attrs));
        }
      })
    }, [this.renderLabel()]);
  }
});
export var _OptionComponent = OptionPlugin;
export default OptionPlugin;