1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.default = exports.avatarProps = void 0;
|
9 |
|
10 | var _vue = require("vue");
|
11 |
|
12 | var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
13 |
|
14 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
15 |
|
16 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
17 |
|
18 | var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
19 |
|
20 | var _type = require("../_util/type");
|
21 |
|
22 | var _propsUtil = require("../_util/props-util");
|
23 |
|
24 | var _vueTypes = _interopRequireDefault(require("../_util/vue-types"));
|
25 |
|
26 | var _useBreakpoint = _interopRequireDefault(require("../_util/hooks/useBreakpoint"));
|
27 |
|
28 | var _responsiveObserve = require("../_util/responsiveObserve");
|
29 |
|
30 | var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
|
31 |
|
32 | var _vcResizeObserver = _interopRequireDefault(require("../vc-resize-observer"));
|
33 |
|
34 | var _useSize = require("../_util/hooks/useSize");
|
35 |
|
36 | var _eagerComputed = _interopRequireDefault(require("../_util/eagerComputed"));
|
37 |
|
38 | var avatarProps = function avatarProps() {
|
39 | return {
|
40 | prefixCls: _vueTypes.default.string,
|
41 | shape: _vueTypes.default.oneOf((0, _type.tuple)('circle', 'square')).def('circle'),
|
42 | size: {
|
43 | type: [Number, String, Object],
|
44 | default: function _default() {
|
45 | return 'default';
|
46 | }
|
47 | },
|
48 | src: _vueTypes.default.string,
|
49 |
|
50 |
|
51 | srcset: _vueTypes.default.string,
|
52 | icon: _vueTypes.default.any,
|
53 | alt: _vueTypes.default.string,
|
54 | gap: _vueTypes.default.number,
|
55 | draggable: _vueTypes.default.bool,
|
56 | crossOrigin: String,
|
57 | loadError: {
|
58 | type: Function
|
59 | }
|
60 | };
|
61 | };
|
62 |
|
63 | exports.avatarProps = avatarProps;
|
64 | var Avatar = (0, _vue.defineComponent)({
|
65 | name: 'AAvatar',
|
66 | inheritAttrs: false,
|
67 | props: avatarProps(),
|
68 | slots: ['icon'],
|
69 | setup: function setup(props, _ref) {
|
70 | var slots = _ref.slots,
|
71 | attrs = _ref.attrs;
|
72 | var isImgExist = (0, _vue.ref)(true);
|
73 | var isMounted = (0, _vue.ref)(false);
|
74 | var scale = (0, _vue.ref)(1);
|
75 | var avatarChildrenRef = (0, _vue.ref)(null);
|
76 | var avatarNodeRef = (0, _vue.ref)(null);
|
77 |
|
78 | var _useConfigInject = (0, _useConfigInject2.default)('avatar', props),
|
79 | prefixCls = _useConfigInject.prefixCls;
|
80 |
|
81 | var groupSize = (0, _useSize.useInjectSize)();
|
82 | var size = (0, _vue.computed)(function () {
|
83 | return props.size === 'default' ? groupSize.value : props.size;
|
84 | });
|
85 | var screens = (0, _useBreakpoint.default)();
|
86 | var responsiveSize = (0, _eagerComputed.default)(function () {
|
87 | if ((0, _typeof2.default)(props.size) !== 'object') {
|
88 | return undefined;
|
89 | }
|
90 |
|
91 | var currentBreakpoint = _responsiveObserve.responsiveArray.find(function (screen) {
|
92 | return screens.value[screen];
|
93 | });
|
94 |
|
95 | var currentSize = props.size[currentBreakpoint];
|
96 | return currentSize;
|
97 | });
|
98 |
|
99 | var responsiveSizeStyle = function responsiveSizeStyle(hasIcon) {
|
100 | if (responsiveSize.value) {
|
101 | return {
|
102 | width: "".concat(responsiveSize.value, "px"),
|
103 | height: "".concat(responsiveSize.value, "px"),
|
104 | lineHeight: "".concat(responsiveSize.value, "px"),
|
105 | fontSize: "".concat(hasIcon ? responsiveSize.value / 2 : 18, "px")
|
106 | };
|
107 | }
|
108 |
|
109 | return {};
|
110 | };
|
111 |
|
112 | var setScaleParam = function setScaleParam() {
|
113 | if (!avatarChildrenRef.value || !avatarNodeRef.value) {
|
114 | return;
|
115 | }
|
116 |
|
117 | var childrenWidth = avatarChildrenRef.value.offsetWidth;
|
118 |
|
119 | var nodeWidth = avatarNodeRef.value.offsetWidth;
|
120 |
|
121 | if (childrenWidth !== 0 && nodeWidth !== 0) {
|
122 | var _props$gap = props.gap,
|
123 | gap = _props$gap === void 0 ? 4 : _props$gap;
|
124 |
|
125 | if (gap * 2 < nodeWidth) {
|
126 | scale.value = nodeWidth - gap * 2 < childrenWidth ? (nodeWidth - gap * 2) / childrenWidth : 1;
|
127 | }
|
128 | }
|
129 | };
|
130 |
|
131 | var handleImgLoadError = function handleImgLoadError() {
|
132 | var loadError = props.loadError;
|
133 | var errorFlag = loadError === null || loadError === void 0 ? void 0 : loadError();
|
134 |
|
135 | if (errorFlag !== false) {
|
136 | isImgExist.value = false;
|
137 | }
|
138 | };
|
139 |
|
140 | (0, _vue.watch)(function () {
|
141 | return props.src;
|
142 | }, function () {
|
143 | (0, _vue.nextTick)(function () {
|
144 | isImgExist.value = true;
|
145 | scale.value = 1;
|
146 | });
|
147 | });
|
148 | (0, _vue.watch)(function () {
|
149 | return props.gap;
|
150 | }, function () {
|
151 | (0, _vue.nextTick)(function () {
|
152 | setScaleParam();
|
153 | });
|
154 | });
|
155 | (0, _vue.onMounted)(function () {
|
156 | (0, _vue.nextTick)(function () {
|
157 | setScaleParam();
|
158 | isMounted.value = true;
|
159 | });
|
160 | });
|
161 | return function () {
|
162 | var _classString;
|
163 |
|
164 | var _a;
|
165 |
|
166 | var shape = props.shape,
|
167 | src = props.src,
|
168 | alt = props.alt,
|
169 | srcset = props.srcset,
|
170 | draggable = props.draggable,
|
171 | crossOrigin = props.crossOrigin;
|
172 | var icon = (0, _propsUtil.getPropsSlot)(slots, props, 'icon');
|
173 | var pre = prefixCls.value;
|
174 | var classString = (_classString = {}, (0, _defineProperty2.default)(_classString, "".concat(attrs.class), !!attrs.class), (0, _defineProperty2.default)(_classString, pre, true), (0, _defineProperty2.default)(_classString, "".concat(pre, "-lg"), size.value === 'large'), (0, _defineProperty2.default)(_classString, "".concat(pre, "-sm"), size.value === 'small'), (0, _defineProperty2.default)(_classString, "".concat(pre, "-").concat(shape), shape), (0, _defineProperty2.default)(_classString, "".concat(pre, "-image"), src && isImgExist.value), (0, _defineProperty2.default)(_classString, "".concat(pre, "-icon"), icon), _classString);
|
175 | var sizeStyle = typeof size.value === 'number' ? {
|
176 | width: "".concat(size.value, "px"),
|
177 | height: "".concat(size.value, "px"),
|
178 | lineHeight: "".concat(size.value, "px"),
|
179 | fontSize: icon ? "".concat(size.value / 2, "px") : '18px'
|
180 | } : {};
|
181 | var children = (_a = slots.default) === null || _a === void 0 ? void 0 : _a.call(slots);
|
182 | var childrenToRender;
|
183 |
|
184 | if (src && isImgExist.value) {
|
185 | childrenToRender = (0, _vue.createVNode)("img", {
|
186 | "draggable": draggable,
|
187 | "src": src,
|
188 | "srcset": srcset,
|
189 | "onError": handleImgLoadError,
|
190 | "alt": alt,
|
191 | "crossorigin": crossOrigin
|
192 | }, null);
|
193 | } else if (icon) {
|
194 | childrenToRender = icon;
|
195 | } else if (isMounted.value || scale.value !== 1) {
|
196 | var transformString = "scale(".concat(scale.value, ") translateX(-50%)");
|
197 | var childrenStyle = {
|
198 | msTransform: transformString,
|
199 | WebkitTransform: transformString,
|
200 | transform: transformString
|
201 | };
|
202 | var sizeChildrenStyle = typeof size.value === 'number' ? {
|
203 | lineHeight: "".concat(size.value, "px")
|
204 | } : {};
|
205 | childrenToRender = (0, _vue.createVNode)(_vcResizeObserver.default, {
|
206 | "onResize": setScaleParam
|
207 | }, {
|
208 | default: function _default() {
|
209 | return [(0, _vue.createVNode)("span", {
|
210 | "class": "".concat(pre, "-string"),
|
211 | "ref": avatarChildrenRef,
|
212 | "style": (0, _extends2.default)((0, _extends2.default)({}, sizeChildrenStyle), childrenStyle)
|
213 | }, [children])];
|
214 | }
|
215 | });
|
216 | } else {
|
217 | childrenToRender = (0, _vue.createVNode)("span", {
|
218 | "class": "".concat(pre, "-string"),
|
219 | "ref": avatarChildrenRef,
|
220 | "style": {
|
221 | opacity: 0
|
222 | }
|
223 | }, [children]);
|
224 | }
|
225 |
|
226 | return (0, _vue.createVNode)("span", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, attrs), {}, {
|
227 | "ref": avatarNodeRef,
|
228 | "class": classString,
|
229 | "style": (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, sizeStyle), responsiveSizeStyle(!!icon)), attrs.style)
|
230 | }), [childrenToRender]);
|
231 | };
|
232 | }
|
233 | });
|
234 | var _default2 = Avatar;
|
235 | exports.default = _default2; |
\ | No newline at end of file |