123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- exports.__esModule = true;
- exports.default = void 0;
- var _utils = require("../utils");
- var _event = require("../utils/dom/event");
- var _portal = require("../mixins/portal");
- var _relation = require("../mixins/relation");
- var _cell = _interopRequireDefault(require("../cell"));
- var _icon = _interopRequireDefault(require("../icon"));
- var _popup = _interopRequireDefault(require("../popup"));
- // Utils
- // Mixins
- // Components
- var _createNamespace = (0, _utils.createNamespace)('dropdown-item'),
- createComponent = _createNamespace[0],
- bem = _createNamespace[1];
- var _default2 = createComponent({
- mixins: [(0, _portal.PortalMixin)({
- ref: 'wrapper'
- }), (0, _relation.ChildrenMixin)('vanDropdownMenu')],
- props: {
- value: null,
- title: String,
- disabled: Boolean,
- titleClass: String,
- options: {
- type: Array,
- default: function _default() {
- return [];
- }
- },
- lazyRender: {
- type: Boolean,
- default: true
- }
- },
- data: function data() {
- return {
- transition: true,
- showPopup: false,
- showWrapper: false
- };
- },
- computed: {
- displayTitle: function displayTitle() {
- var _this = this;
- if (this.title) {
- return this.title;
- }
- var match = this.options.filter(function (option) {
- return option.value === _this.value;
- });
- return match.length ? match[0].text : '';
- }
- },
- watch: {
- showPopup: function showPopup(val) {
- this.bindScroll(val);
- }
- },
- beforeCreate: function beforeCreate() {
- var _this2 = this;
- var createEmitter = function createEmitter(eventName) {
- return function () {
- return _this2.$emit(eventName);
- };
- };
- this.onOpen = createEmitter('open');
- this.onClose = createEmitter('close');
- this.onOpened = createEmitter('opened');
- },
- methods: {
- // @exposed-api
- toggle: function toggle(show, options) {
- if (show === void 0) {
- show = !this.showPopup;
- }
- if (options === void 0) {
- options = {};
- }
- if (show === this.showPopup) {
- return;
- }
- this.transition = !options.immediate;
- this.showPopup = show;
- if (show) {
- this.parent.updateOffset();
- this.showWrapper = true;
- }
- },
- bindScroll: function bindScroll(bind) {
- var scroller = this.parent.scroller;
- var action = bind ? _event.on : _event.off;
- action(scroller, 'scroll', this.onScroll, true);
- },
- onScroll: function onScroll() {
- this.parent.updateOffset();
- },
- onClickWrapper: function onClickWrapper(event) {
- // prevent being identified as clicking outside and closed when use get-contaienr
- if (this.getContainer) {
- event.stopPropagation();
- }
- }
- },
- render: function render() {
- var _this3 = this;
- var h = arguments[0];
- var _this$parent = this.parent,
- zIndex = _this$parent.zIndex,
- offset = _this$parent.offset,
- overlay = _this$parent.overlay,
- duration = _this$parent.duration,
- direction = _this$parent.direction,
- activeColor = _this$parent.activeColor,
- closeOnClickOverlay = _this$parent.closeOnClickOverlay;
- var Options = this.options.map(function (option) {
- var active = option.value === _this3.value;
- return h(_cell.default, {
- "attrs": {
- "clickable": true,
- "icon": option.icon,
- "title": option.text
- },
- "key": option.value,
- "class": bem('option', {
- active: active
- }),
- "style": {
- color: active ? activeColor : ''
- },
- "on": {
- "click": function click() {
- _this3.showPopup = false;
- if (option.value !== _this3.value) {
- _this3.$emit('input', option.value);
- _this3.$emit('change', option.value);
- }
- }
- }
- }, [active && h(_icon.default, {
- "class": bem('icon'),
- "attrs": {
- "color": activeColor,
- "name": "success"
- }
- })]);
- });
- var style = {
- zIndex: zIndex
- };
- if (direction === 'down') {
- style.top = offset + "px";
- } else {
- style.bottom = offset + "px";
- }
- return h("div", [h("div", {
- "directives": [{
- name: "show",
- value: this.showWrapper
- }],
- "ref": "wrapper",
- "style": style,
- "class": bem([direction]),
- "on": {
- "click": this.onClickWrapper
- }
- }, [h(_popup.default, {
- "attrs": {
- "overlay": overlay,
- "position": direction === 'down' ? 'top' : 'bottom',
- "duration": this.transition ? duration : 0,
- "lazyRender": this.lazyRender,
- "overlayStyle": {
- position: 'absolute'
- },
- "closeOnClickOverlay": closeOnClickOverlay
- },
- "class": bem('content'),
- "on": {
- "open": this.onOpen,
- "close": this.onClose,
- "opened": this.onOpened,
- "closed": function closed() {
- _this3.showWrapper = false;
- _this3.$emit('closed');
- }
- },
- "model": {
- value: _this3.showPopup,
- callback: function callback($$v) {
- _this3.showPopup = $$v;
- }
- }
- }, [Options, this.slots('default')])])]);
- }
- });
- exports.default = _default2;
|