123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- exports.__esModule = true;
- exports.default = void 0;
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
- var _utils = require("../utils");
- var _constant = require("../utils/constant");
- var _router = require("../utils/router");
- var _relation = require("../mixins/relation");
- var _info = _interopRequireDefault(require("../info"));
- var _icon = _interopRequireDefault(require("../icon"));
- // Utils
- // Mixins
- // Components
- var _createNamespace = (0, _utils.createNamespace)('grid-item'),
- createComponent = _createNamespace[0],
- bem = _createNamespace[1];
- var _default = createComponent({
- mixins: [(0, _relation.ChildrenMixin)('vanGrid')],
- props: (0, _extends2.default)({}, _router.routeProps, {
- dot: Boolean,
- text: String,
- icon: String,
- iconPrefix: String,
- // @deprecated
- info: [Number, String],
- badge: [Number, String]
- }),
- computed: {
- style: function style() {
- var _this$parent = this.parent,
- square = _this$parent.square,
- gutter = _this$parent.gutter,
- columnNum = _this$parent.columnNum;
- var percent = 100 / columnNum + "%";
- var style = {
- flexBasis: percent
- };
- if (square) {
- style.paddingTop = percent;
- } else if (gutter) {
- var gutterValue = (0, _utils.addUnit)(gutter);
- style.paddingRight = gutterValue;
- if (this.index >= columnNum) {
- style.marginTop = gutterValue;
- }
- }
- return style;
- },
- contentStyle: function contentStyle() {
- var _this$parent2 = this.parent,
- square = _this$parent2.square,
- gutter = _this$parent2.gutter;
- if (square && gutter) {
- var gutterValue = (0, _utils.addUnit)(gutter);
- return {
- right: gutterValue,
- bottom: gutterValue,
- height: 'auto'
- };
- }
- }
- },
- methods: {
- onClick: function onClick(event) {
- this.$emit('click', event);
- (0, _router.route)(this.$router, this);
- },
- genIcon: function genIcon() {
- var _this$badge;
- var h = this.$createElement;
- var iconSlot = this.slots('icon');
- var info = (_this$badge = this.badge) != null ? _this$badge : this.info;
- if (process.env.NODE_ENV === 'development' && this.info) {
- console.warn('[Vant] GridItem: "info" prop is deprecated, use "badge" prop instead.');
- }
- if (iconSlot) {
- return h("div", {
- "class": bem('icon-wrapper')
- }, [iconSlot, h(_info.default, {
- "attrs": {
- "dot": this.dot,
- "info": info
- }
- })]);
- }
- if (this.icon) {
- return h(_icon.default, {
- "attrs": {
- "name": this.icon,
- "dot": this.dot,
- "badge": info,
- "size": this.parent.iconSize,
- "classPrefix": this.iconPrefix
- },
- "class": bem('icon')
- });
- }
- },
- getText: function getText() {
- var h = this.$createElement;
- var textSlot = this.slots('text');
- if (textSlot) {
- return textSlot;
- }
- if (this.text) {
- return h("span", {
- "class": bem('text')
- }, [this.text]);
- }
- },
- genContent: function genContent() {
- var slot = this.slots();
- if (slot) {
- return slot;
- }
- return [this.genIcon(), this.getText()];
- }
- },
- render: function render() {
- var _ref;
- var h = arguments[0];
- var _this$parent3 = this.parent,
- center = _this$parent3.center,
- border = _this$parent3.border,
- square = _this$parent3.square,
- gutter = _this$parent3.gutter,
- direction = _this$parent3.direction,
- clickable = _this$parent3.clickable;
- return h("div", {
- "class": [bem({
- square: square
- })],
- "style": this.style
- }, [h("div", {
- "style": this.contentStyle,
- "attrs": {
- "role": clickable ? 'button' : null,
- "tabindex": clickable ? 0 : null
- },
- "class": [bem('content', [direction, {
- center: center,
- square: square,
- clickable: clickable,
- surround: border && gutter
- }]), (_ref = {}, _ref[_constant.BORDER] = border, _ref)],
- "on": {
- "click": this.onClick
- }
- }, [this.genContent()])]);
- }
- });
- exports.default = _default;
|