@fesjs/fes-design/es/dropdown/dropdown.js

fes-design for PC

import { defineComponent, computed, watch, unref, createVNode } from 'vue';
import { isFunction } from 'lodash-es';
import CheckOutlined from '../icon/CheckOutlined';
import getPrefixCls from '../_util/getPrefixCls';
import { useNormalModel } from '../_util/use/useModel';
import { useTheme } from '../_theme/useTheme';
import Popper from '../popper/popper';
import Scrollbar from '../scrollbar/scrollbar.js';
import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '../_util/constants';
import { dropdownProps } from './props';

const prefixCls = getPrefixCls('dropdown');
var dropdown = defineComponent({
  name: 'FDropdown',
  props: dropdownProps,
  emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT, 'click', 'visibleChange', 'update:visible', 'scroll'],
  setup(props, _ref) {
    let {
      slots,
      emit
    } = _ref;
    useTheme();
    const [currentValue, updateCurrentValue] = useNormalModel(props, emit);
    const [visible, updateVisible] = useNormalModel(props, emit, {
      prop: 'visible'
    });
    const hasIcon = computed(() => props.options.some(option => option.icon));
    const handleClick = (option, event) => {
      event.stopPropagation();
      if (option.disabled) {
        return;
      }
      const value = option[props.valueField];
      updateCurrentValue(value);
      updateVisible(false);
      emit('click', value);
    };
    watch(currentValue, () => {
      emit(CHANGE_EVENT, unref(currentValue));
    });
    watch(visible, () => {
      emit('visibleChange', visible.value);
    });
    const renderOptions = () => createVNode(Scrollbar, {
      "onScroll": event => {
        emit('scroll', event);
      },
      "containerClass": [`${prefixCls}-option-wrapper`, hasIcon.value ? 'has-icon' : '']
    }, {
      default: () => [props.options.map(option => {
        var _option$icon;
        const value = option[props.valueField];
        const label = option[props.labelField];
        const isSelected = props.showSelectedOption && currentValue.value === value;
        const optionClassList = [`${prefixCls}-option`, option.disabled && 'is-disabled', isSelected && 'is-selected'].filter(Boolean);
        return createVNode("div", {
          "class": optionClassList,
          "onClick": event => {
            handleClick(option, event);
          }
        }, [option.icon && createVNode("span", {
          "class": `${prefixCls}-option-icon`
        }, [(_option$icon = option.icon) === null || _option$icon === void 0 ? void 0 : _option$icon.call(option)]), createVNode("span", {
          "class": `${prefixCls}-option-label`
        }, [isFunction(label) ? label(option) : label]), props.showSelectedOption && createVNode("span", {
          "class": `${prefixCls}-option-selected-wrapper`
        }, [createVNode(CheckOutlined, {
          "class": `${prefixCls}-option-selected-icon`
        }, null)])]);
      })]
    });
    return () => createVNode(Popper, {
      "modelValue": visible.value,
      "onUpdate:modelValue": $event => visible.value = $event,
      "trigger": props.trigger,
      "placement": props.placement,
      "popperClass": [`${prefixCls}-popper`, props.popperClass],
      "appendToContainer": props.appendToContainer,
      "getContainer": props.getContainer,
      "offset": props.offset,
      "disabled": props.disabled,
      "arrow": props.arrow
    }, {
      default: renderOptions,
      trigger: slots.default
    });
  }
});

export { dropdown as default };