https://www.ronc.ru/local/templates/ronc.site/app/vendors/@alterastro/[email protected]/dist/components/chip/chip.js

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