1 | import { defineComponent } from 'vue';
|
2 | import ILoader from '../ILoader/index.vue';
|
3 | import { LinkableMixin, sizePropValidator, colorVariantClass, defaultPropValue } from '../../mixins/index.mjs';
|
4 | /**
|
5 | * Slot for default button content
|
6 | * @name default
|
7 | * @kind slot
|
8 | */
|
9 | /**
|
10 | * Slot for button loading state
|
11 | * @name loading
|
12 | * @kind slot
|
13 | */
|
14 | const componentName = 'IButton';
|
15 | export default defineComponent({
|
16 | name: componentName,
|
17 | components: {
|
18 | ILoader
|
19 | },
|
20 | mixins: [
|
21 | LinkableMixin
|
22 | ],
|
23 | inject: {
|
24 | buttonGroup: {
|
25 | default: () => ({})
|
26 | },
|
27 | form: {
|
28 | default: () => ({})
|
29 | },
|
30 | formGroup: {
|
31 | default: () => ({})
|
32 | }
|
33 | },
|
34 | props: {
|
35 | /**
|
36 | * The active state of the button
|
37 | * @type Boolean
|
38 | * @default false
|
39 | * @name active
|
40 | */
|
41 | active: {
|
42 | type: Boolean,
|
43 | default: false
|
44 | },
|
45 | /**
|
46 | * Display the button as a block, spanning the full container width
|
47 | * @type Boolean
|
48 | * @default false
|
49 | * @name block
|
50 | */
|
51 | block: {
|
52 | type: Boolean,
|
53 | default: false
|
54 | },
|
55 | /**
|
56 | * Display the button as a circle
|
57 | * @type Boolean
|
58 | * @default false
|
59 | * @name circle
|
60 | */
|
61 | circle: {
|
62 | type: Boolean,
|
63 | default: false
|
64 | },
|
65 | /**
|
66 | * The color variant of the button
|
67 | * @type primary | success | light | dark | info | success | warning | danger | facebook | google | twitter | github
|
68 | * @default light
|
69 | * @name color
|
70 | */
|
71 | color: {
|
72 | type: String,
|
73 | default: defaultPropValue(componentName, 'color')
|
74 | },
|
75 | /**
|
76 | * The disabled state of the button
|
77 | * @type Boolean
|
78 | * @default false
|
79 | * @name disabled
|
80 | */
|
81 | disabled: {
|
82 | type: Boolean,
|
83 | default: false
|
84 | },
|
85 | /**
|
86 | * Display the button as a link
|
87 | * @type Boolean
|
88 | * @default false
|
89 | * @name link
|
90 | */
|
91 | link: {
|
92 | type: Boolean,
|
93 | default: false
|
94 | },
|
95 | /**
|
96 | * The loading state of the button
|
97 | * @type Boolean
|
98 | * @default false
|
99 | * @name loading
|
100 | */
|
101 | loading: {
|
102 | type: Boolean,
|
103 | default: false
|
104 | },
|
105 | /**
|
106 | * Display the button as an outline button
|
107 | * @type Boolean
|
108 | * @default false
|
109 | * @name outline
|
110 | */
|
111 | outline: {
|
112 | type: Boolean,
|
113 | default: false
|
114 | },
|
115 | /**
|
116 | * Set the HTML tag to be used for rendering the button
|
117 | * @type String
|
118 | * @default button
|
119 | * @name tag
|
120 | */
|
121 | tag: {
|
122 | type: String,
|
123 | default: 'button'
|
124 | },
|
125 | /**
|
126 | * The tabindex of the button
|
127 | * @type Number | String
|
128 | * @default 0
|
129 | * @name tabindex
|
130 | */
|
131 | tabindex: {
|
132 | type: [Number, String],
|
133 | default: 0
|
134 | },
|
135 | /**
|
136 | * The size variant of the button
|
137 | * @type sm | md | lg
|
138 | * @default md
|
139 | * @name size
|
140 | */
|
141 | size: {
|
142 | type: String,
|
143 | default: defaultPropValue(componentName, 'size'),
|
144 | validator: sizePropValidator
|
145 | }
|
146 | },
|
147 | computed: {
|
148 | ariaBusy() {
|
149 | if (this.role !== 'button') {
|
150 | return null;
|
151 | }
|
152 | return this.loading ? 'true' : 'false';
|
153 | },
|
154 | ariaDisabled() {
|
155 | if (this.role !== 'button') {
|
156 | return null;
|
157 | }
|
158 | return this.disabled ? 'true' : 'false';
|
159 | },
|
160 | ariaPressed() {
|
161 | if (this.role !== 'button') {
|
162 | return null;
|
163 | }
|
164 | return this.active ? 'true' : 'false';
|
165 | },
|
166 | classes() {
|
167 | return {
|
168 | ...colorVariantClass(this),
|
169 | [`-${this.size}`]: Boolean(this.size),
|
170 | '-active': this.active,
|
171 | '-block': this.block,
|
172 | '-circle': this.circle,
|
173 | '-disabled': this.isDisabled,
|
174 | '-link': this.link,
|
175 | '-outline': this.outline
|
176 | };
|
177 | },
|
178 | isDisabled() {
|
179 | return this.disabled || this.buttonGroup.disabled || this.form.disabled || this.formGroup.disabled;
|
180 | },
|
181 | role() {
|
182 | return this.$attrs.to || this.$attrs.href ? 'link' : 'button';
|
183 | },
|
184 | tabIndex() {
|
185 | return this.isDisabled ? -1 : this.tabindex;
|
186 | }
|
187 | }
|
188 | });
|
189 | //# sourceMappingURL=script.mjs.map |
\ | No newline at end of file |