https://mxat.ru/local/templates/mxat.site/assets/vendors/@alterast…/dist/ui/icon-button/icon-button.js

1document.addEventListener('alpine:init', () => {
2	Alpine.data(
3		'XIconButton',
4		(props = {}) => ({
5			disabled: false,
6			focusRing: true,
7			loading: false,
8			ripple: true,
9			selected: false,
10			toggle: false,
11			...props,
12
13			get isDisabled() {
14				return this.loading || !!this.group?.disabled || this.disabled;
15			},
16
17			get isLink() {
18				return (
19					this.$root.tagName.toLowerCase() === 'a' ||
20					this.$root.hasAttribute('href')
21				);
22			},
23
24			get isSelected() {
25				return !!this.group?.isSelected || this.selected;
26			},
27
28			xIconButtonBind: {
29				'x-focus-ring'() {
30					return !this.isDisabled && this.focusRing ? this.focusRing : false;
31				},
32
33				'x-modelable': 'selected',
34
35				'x-ripple'() {
36					return !this.isDisabled && this.ripple ? this.ripple : false;
37				},
38
39				'x-scope': 'XIconButton',
40
41				':aria-pressed'() {
42					return this.toggle ? this.isSelected : null;
43				},
44
45				':class'() {
46					return {
47						'x-icon-button--disabled': this.isDisabled,
48						'x-icon-button--loading': this.loading,
49						'x-icon-button--selected': this.isSelected,
50					};
51				},
52
53				':disabled'() {
54					return !this.isLink && this.isDisabled;
55				},
56
57				':tabindex'() {
58					return this.isLink && this.loading ? -1 : null;
59				},
60			},
61		}),
62	);
63});