@antify/ui 2.3.0 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import {
|
|
3
|
+
computed,
|
|
4
|
+
} from 'vue';
|
|
5
|
+
import {
|
|
6
|
+
State,
|
|
7
|
+
} from '../enums/State.enum';
|
|
8
|
+
|
|
9
|
+
const props = withDefaults(defineProps<{
|
|
10
|
+
/**
|
|
11
|
+
* Represent the value in percentage
|
|
12
|
+
* Should be a number from 0 to 100
|
|
13
|
+
*/
|
|
14
|
+
progress: number | null;
|
|
15
|
+
/**
|
|
16
|
+
* Takes string with height and the unit e.g. '16px' or '1rem'
|
|
17
|
+
*/
|
|
18
|
+
height: string;
|
|
19
|
+
/**
|
|
20
|
+
* Takes tailwind class for background color e.g. 'bg-primary-500'
|
|
21
|
+
*/
|
|
22
|
+
color?: string;
|
|
23
|
+
}>(),{
|
|
24
|
+
color: 'bg-primary-500',
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
const progressWidth = computed(() => {
|
|
28
|
+
if (!props.progress || props.progress <= 0) {
|
|
29
|
+
return '0%';
|
|
30
|
+
} else if (props.progress && props.progress <= 100) {
|
|
31
|
+
return `${props.progress}%`;
|
|
32
|
+
} else {
|
|
33
|
+
return '100%';
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
</script>
|
|
37
|
+
|
|
38
|
+
<template>
|
|
39
|
+
<div
|
|
40
|
+
class="relative bg-base-100 w-full rounded-md"
|
|
41
|
+
:style="{ height: height }"
|
|
42
|
+
>
|
|
43
|
+
<div
|
|
44
|
+
class="absolute rounded-md"
|
|
45
|
+
:class="color"
|
|
46
|
+
:style="{ width: progressWidth, height: height }"
|
|
47
|
+
/>
|
|
48
|
+
</div>
|
|
49
|
+
</template>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import AntProgress from '../AntProgress.vue';
|
|
2
|
+
import { type Meta, type StoryObj } from '@storybook/vue3';
|
|
3
|
+
declare const meta: Meta<typeof AntProgress>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof AntProgress>;
|
|
6
|
+
export declare const Docs: Story;
|
|
7
|
+
export declare const Summary: Story;
|
|
@@ -0,0 +1,259 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
module.exports = exports.Summary = exports.Docs = void 0;
|
|
7
|
+
var _AntProgress = _interopRequireDefault(require("../AntProgress.vue"));
|
|
8
|
+
var _AntButton = _interopRequireDefault(require("../buttons/AntButton.vue"));
|
|
9
|
+
var _Size = require("../../enums/Size.enum");
|
|
10
|
+
var _vue = require("vue");
|
|
11
|
+
var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
const meta = {
|
|
14
|
+
title: "Components/Progress",
|
|
15
|
+
component: _AntProgress.default,
|
|
16
|
+
parameters: {
|
|
17
|
+
controls: {
|
|
18
|
+
sort: "requiredFirst"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
argTypes: {
|
|
22
|
+
color: {
|
|
23
|
+
control: {
|
|
24
|
+
type: "text"
|
|
25
|
+
},
|
|
26
|
+
description: 'Use tailwind class to change background color e.g. "bg-primary-500"'
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
module.exports = meta;
|
|
31
|
+
const Docs = exports.Docs = {
|
|
32
|
+
render: args => ({
|
|
33
|
+
components: {
|
|
34
|
+
AntProgress: _AntProgress.default,
|
|
35
|
+
AntButton: _AntButton.default
|
|
36
|
+
},
|
|
37
|
+
setup() {
|
|
38
|
+
const progress = (0, _vue.ref)(0);
|
|
39
|
+
const increase = () => {
|
|
40
|
+
if (progress.value === 100) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
progress.value += 10;
|
|
44
|
+
};
|
|
45
|
+
const decrease = () => {
|
|
46
|
+
if (progress.value === null || progress.value === 0) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
progress.value -= 10;
|
|
50
|
+
};
|
|
51
|
+
const onClickStart = () => {
|
|
52
|
+
progress.value = 0;
|
|
53
|
+
const interval = setInterval(() => {
|
|
54
|
+
if (progress.value < 100) {
|
|
55
|
+
progress.value += 5;
|
|
56
|
+
} else {
|
|
57
|
+
clearInterval(interval);
|
|
58
|
+
}
|
|
59
|
+
}, 100);
|
|
60
|
+
};
|
|
61
|
+
return {
|
|
62
|
+
args,
|
|
63
|
+
faPlus: _freeSolidSvgIcons.faPlus,
|
|
64
|
+
faMinus: _freeSolidSvgIcons.faMinus,
|
|
65
|
+
Size: _Size.Size,
|
|
66
|
+
progress,
|
|
67
|
+
decrease,
|
|
68
|
+
increase,
|
|
69
|
+
onClickStart
|
|
70
|
+
};
|
|
71
|
+
},
|
|
72
|
+
template: `
|
|
73
|
+
<div class="dashed p-2 flex h-[50vh] flex-col gap-2.5">
|
|
74
|
+
<AntProgress v-bind="args" :progress="progress"/>
|
|
75
|
+
|
|
76
|
+
<div class="flex gap-2.5 items-center">
|
|
77
|
+
<AntButton
|
|
78
|
+
:icon-left="faMinus"
|
|
79
|
+
:size="Size.md"
|
|
80
|
+
:disabled="progress <= 0"
|
|
81
|
+
@click="decrease"
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
<div>
|
|
85
|
+
{{progress}}%
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<AntButton
|
|
89
|
+
:icon-left="faPlus"
|
|
90
|
+
:size="Size.md"
|
|
91
|
+
:disabled="progress >= 100"
|
|
92
|
+
@click="increase"
|
|
93
|
+
/>
|
|
94
|
+
|
|
95
|
+
<AntButton
|
|
96
|
+
:size="Size.md"
|
|
97
|
+
@click="onClickStart"
|
|
98
|
+
>
|
|
99
|
+
Start
|
|
100
|
+
</AntButton>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
`
|
|
104
|
+
}),
|
|
105
|
+
args: {
|
|
106
|
+
height: "8px"
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
const Summary = exports.Summary = {
|
|
110
|
+
parameters: {
|
|
111
|
+
chromatic: {
|
|
112
|
+
disableSnapshot: false
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
render: args => ({
|
|
116
|
+
components: {
|
|
117
|
+
AntProgress: _AntProgress.default,
|
|
118
|
+
AntButton: _AntButton.default
|
|
119
|
+
},
|
|
120
|
+
setup() {
|
|
121
|
+
const progress1 = (0, _vue.ref)(50);
|
|
122
|
+
const progress2 = (0, _vue.ref)(50);
|
|
123
|
+
const progress3 = (0, _vue.ref)(50);
|
|
124
|
+
const progress = [progress1, progress2, progress3];
|
|
125
|
+
const increase = number => {
|
|
126
|
+
const progressItem = progress[number - 1];
|
|
127
|
+
if (progressItem.value < 100) {
|
|
128
|
+
progressItem.value += 10;
|
|
129
|
+
}
|
|
130
|
+
};
|
|
131
|
+
const decrease = number => {
|
|
132
|
+
const progressItem = progress[number - 1];
|
|
133
|
+
if (progressItem.value < 100) {
|
|
134
|
+
progressItem.value -= 10;
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
const onClickStart = number => {
|
|
138
|
+
const progressItem = progress[number - 1];
|
|
139
|
+
progressItem.value = 0;
|
|
140
|
+
const interval = setInterval(() => {
|
|
141
|
+
if (progressItem.value < 100) {
|
|
142
|
+
progressItem.value += 5;
|
|
143
|
+
} else {
|
|
144
|
+
clearInterval(interval);
|
|
145
|
+
}
|
|
146
|
+
}, 100);
|
|
147
|
+
};
|
|
148
|
+
return {
|
|
149
|
+
args,
|
|
150
|
+
faPlus: _freeSolidSvgIcons.faPlus,
|
|
151
|
+
faMinus: _freeSolidSvgIcons.faMinus,
|
|
152
|
+
Size: _Size.Size,
|
|
153
|
+
progress1,
|
|
154
|
+
progress2,
|
|
155
|
+
progress3,
|
|
156
|
+
decrease,
|
|
157
|
+
increase,
|
|
158
|
+
onClickStart
|
|
159
|
+
};
|
|
160
|
+
},
|
|
161
|
+
template: `
|
|
162
|
+
<div class="flex flex-col gap-2.5">
|
|
163
|
+
<div class="flex flex-col gap-2.5">
|
|
164
|
+
<AntProgress v-bind="args" :progress="progress1" height="8px"/>
|
|
165
|
+
|
|
166
|
+
<div class="flex gap-2.5 items-center">
|
|
167
|
+
<AntButton
|
|
168
|
+
:icon-left="faMinus"
|
|
169
|
+
:size="Size.md"
|
|
170
|
+
:disabled="progress1 <= 0"
|
|
171
|
+
@click="decrease(1)"
|
|
172
|
+
/>
|
|
173
|
+
|
|
174
|
+
<div>
|
|
175
|
+
{{progress1}}%
|
|
176
|
+
</div>
|
|
177
|
+
|
|
178
|
+
<AntButton
|
|
179
|
+
:icon-left="faPlus"
|
|
180
|
+
:size="Size.md"
|
|
181
|
+
:disabled="progress1 >= 100"
|
|
182
|
+
@click="increase(1)"
|
|
183
|
+
/>
|
|
184
|
+
|
|
185
|
+
<AntButton
|
|
186
|
+
:size="Size.md"
|
|
187
|
+
@click="onClickStart(1)"
|
|
188
|
+
>
|
|
189
|
+
Start
|
|
190
|
+
</AntButton>
|
|
191
|
+
</div>
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
<div class="flex flex-col gap-2.5">
|
|
195
|
+
<AntProgress v-bind="args" :progress="progress2" height="12px" color="bg-secondary-500"/>
|
|
196
|
+
|
|
197
|
+
<div class="flex gap-2.5 items-center">
|
|
198
|
+
<AntButton
|
|
199
|
+
:icon-left="faMinus"
|
|
200
|
+
:size="Size.md"
|
|
201
|
+
:disabled="progress2 <= 0"
|
|
202
|
+
@click="decrease(2)"
|
|
203
|
+
/>
|
|
204
|
+
|
|
205
|
+
<div>
|
|
206
|
+
{{progress2}}%
|
|
207
|
+
</div>
|
|
208
|
+
|
|
209
|
+
<AntButton
|
|
210
|
+
:icon-left="faPlus"
|
|
211
|
+
:size="Size.md"
|
|
212
|
+
:disabled="progress2 >= 100"
|
|
213
|
+
@click="increase(2)"
|
|
214
|
+
/>
|
|
215
|
+
|
|
216
|
+
<AntButton
|
|
217
|
+
:size="Size.md"
|
|
218
|
+
@click="onClickStart(2)"
|
|
219
|
+
>
|
|
220
|
+
Start
|
|
221
|
+
</AntButton>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
|
|
225
|
+
<div class="flex flex-col gap-2.5">
|
|
226
|
+
<AntProgress v-bind="args" :progress="progress3" height="18px" color="bg-amber-500"/>
|
|
227
|
+
|
|
228
|
+
<div class="flex gap-2.5 items-center">
|
|
229
|
+
<AntButton
|
|
230
|
+
:icon-left="faMinus"
|
|
231
|
+
:size="Size.md"
|
|
232
|
+
:disabled="progress3 <= 0"
|
|
233
|
+
@click="decrease(3)"
|
|
234
|
+
/>
|
|
235
|
+
|
|
236
|
+
<div>
|
|
237
|
+
{{progress3}}%
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
<AntButton
|
|
241
|
+
:icon-left="faPlus"
|
|
242
|
+
:size="Size.md"
|
|
243
|
+
:disabled="progress3 >= 100"
|
|
244
|
+
@click="increase(3)"
|
|
245
|
+
/>
|
|
246
|
+
|
|
247
|
+
<AntButton
|
|
248
|
+
:size="Size.md"
|
|
249
|
+
@click="onClickStart(3)"
|
|
250
|
+
>
|
|
251
|
+
Start
|
|
252
|
+
</AntButton>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
`
|
|
257
|
+
}),
|
|
258
|
+
args: {}
|
|
259
|
+
};
|
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
import AntProgress from "../AntProgress.vue";
|
|
2
|
+
import AntButton from "../buttons/AntButton.vue";
|
|
3
|
+
import {
|
|
4
|
+
Size
|
|
5
|
+
} from "../../enums/Size.enum.mjs";
|
|
6
|
+
import {
|
|
7
|
+
ref
|
|
8
|
+
} from "vue";
|
|
9
|
+
import {
|
|
10
|
+
faMinus,
|
|
11
|
+
faPlus
|
|
12
|
+
} from "@fortawesome/free-solid-svg-icons";
|
|
13
|
+
const meta = {
|
|
14
|
+
title: "Components/Progress",
|
|
15
|
+
component: AntProgress,
|
|
16
|
+
parameters: {
|
|
17
|
+
controls: {
|
|
18
|
+
sort: "requiredFirst"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
argTypes: {
|
|
22
|
+
color: {
|
|
23
|
+
control: {
|
|
24
|
+
type: "text"
|
|
25
|
+
},
|
|
26
|
+
description: 'Use tailwind class to change background color e.g. "bg-primary-500"'
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
export default meta;
|
|
31
|
+
export const Docs = {
|
|
32
|
+
render: (args) => ({
|
|
33
|
+
components: {
|
|
34
|
+
AntProgress,
|
|
35
|
+
AntButton
|
|
36
|
+
},
|
|
37
|
+
setup() {
|
|
38
|
+
const progress = ref(0);
|
|
39
|
+
const increase = () => {
|
|
40
|
+
if (progress.value === 100) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
progress.value += 10;
|
|
44
|
+
};
|
|
45
|
+
const decrease = () => {
|
|
46
|
+
if (progress.value === null || progress.value === 0) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
progress.value -= 10;
|
|
50
|
+
};
|
|
51
|
+
const onClickStart = () => {
|
|
52
|
+
progress.value = 0;
|
|
53
|
+
const interval = setInterval(() => {
|
|
54
|
+
if (progress.value < 100) {
|
|
55
|
+
progress.value += 5;
|
|
56
|
+
} else {
|
|
57
|
+
clearInterval(interval);
|
|
58
|
+
}
|
|
59
|
+
}, 100);
|
|
60
|
+
};
|
|
61
|
+
return {
|
|
62
|
+
args,
|
|
63
|
+
faPlus,
|
|
64
|
+
faMinus,
|
|
65
|
+
Size,
|
|
66
|
+
progress,
|
|
67
|
+
decrease,
|
|
68
|
+
increase,
|
|
69
|
+
onClickStart
|
|
70
|
+
};
|
|
71
|
+
},
|
|
72
|
+
template: `
|
|
73
|
+
<div class="dashed p-2 flex h-[50vh] flex-col gap-2.5">
|
|
74
|
+
<AntProgress v-bind="args" :progress="progress"/>
|
|
75
|
+
|
|
76
|
+
<div class="flex gap-2.5 items-center">
|
|
77
|
+
<AntButton
|
|
78
|
+
:icon-left="faMinus"
|
|
79
|
+
:size="Size.md"
|
|
80
|
+
:disabled="progress <= 0"
|
|
81
|
+
@click="decrease"
|
|
82
|
+
/>
|
|
83
|
+
|
|
84
|
+
<div>
|
|
85
|
+
{{progress}}%
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<AntButton
|
|
89
|
+
:icon-left="faPlus"
|
|
90
|
+
:size="Size.md"
|
|
91
|
+
:disabled="progress >= 100"
|
|
92
|
+
@click="increase"
|
|
93
|
+
/>
|
|
94
|
+
|
|
95
|
+
<AntButton
|
|
96
|
+
:size="Size.md"
|
|
97
|
+
@click="onClickStart"
|
|
98
|
+
>
|
|
99
|
+
Start
|
|
100
|
+
</AntButton>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
`
|
|
104
|
+
}),
|
|
105
|
+
args: {
|
|
106
|
+
height: "8px"
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
export const Summary = {
|
|
110
|
+
parameters: {
|
|
111
|
+
chromatic: {
|
|
112
|
+
disableSnapshot: false
|
|
113
|
+
}
|
|
114
|
+
},
|
|
115
|
+
render: (args) => ({
|
|
116
|
+
components: {
|
|
117
|
+
AntProgress,
|
|
118
|
+
AntButton
|
|
119
|
+
},
|
|
120
|
+
setup() {
|
|
121
|
+
const progress1 = ref(50);
|
|
122
|
+
const progress2 = ref(50);
|
|
123
|
+
const progress3 = ref(50);
|
|
124
|
+
const progress = [
|
|
125
|
+
progress1,
|
|
126
|
+
progress2,
|
|
127
|
+
progress3
|
|
128
|
+
];
|
|
129
|
+
const increase = (number) => {
|
|
130
|
+
const progressItem = progress[number - 1];
|
|
131
|
+
if (progressItem.value < 100) {
|
|
132
|
+
progressItem.value += 10;
|
|
133
|
+
}
|
|
134
|
+
};
|
|
135
|
+
const decrease = (number) => {
|
|
136
|
+
const progressItem = progress[number - 1];
|
|
137
|
+
if (progressItem.value < 100) {
|
|
138
|
+
progressItem.value -= 10;
|
|
139
|
+
}
|
|
140
|
+
};
|
|
141
|
+
const onClickStart = (number) => {
|
|
142
|
+
const progressItem = progress[number - 1];
|
|
143
|
+
progressItem.value = 0;
|
|
144
|
+
const interval = setInterval(() => {
|
|
145
|
+
if (progressItem.value < 100) {
|
|
146
|
+
progressItem.value += 5;
|
|
147
|
+
} else {
|
|
148
|
+
clearInterval(interval);
|
|
149
|
+
}
|
|
150
|
+
}, 100);
|
|
151
|
+
};
|
|
152
|
+
return {
|
|
153
|
+
args,
|
|
154
|
+
faPlus,
|
|
155
|
+
faMinus,
|
|
156
|
+
Size,
|
|
157
|
+
progress1,
|
|
158
|
+
progress2,
|
|
159
|
+
progress3,
|
|
160
|
+
decrease,
|
|
161
|
+
increase,
|
|
162
|
+
onClickStart
|
|
163
|
+
};
|
|
164
|
+
},
|
|
165
|
+
template: `
|
|
166
|
+
<div class="flex flex-col gap-2.5">
|
|
167
|
+
<div class="flex flex-col gap-2.5">
|
|
168
|
+
<AntProgress v-bind="args" :progress="progress1" height="8px"/>
|
|
169
|
+
|
|
170
|
+
<div class="flex gap-2.5 items-center">
|
|
171
|
+
<AntButton
|
|
172
|
+
:icon-left="faMinus"
|
|
173
|
+
:size="Size.md"
|
|
174
|
+
:disabled="progress1 <= 0"
|
|
175
|
+
@click="decrease(1)"
|
|
176
|
+
/>
|
|
177
|
+
|
|
178
|
+
<div>
|
|
179
|
+
{{progress1}}%
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<AntButton
|
|
183
|
+
:icon-left="faPlus"
|
|
184
|
+
:size="Size.md"
|
|
185
|
+
:disabled="progress1 >= 100"
|
|
186
|
+
@click="increase(1)"
|
|
187
|
+
/>
|
|
188
|
+
|
|
189
|
+
<AntButton
|
|
190
|
+
:size="Size.md"
|
|
191
|
+
@click="onClickStart(1)"
|
|
192
|
+
>
|
|
193
|
+
Start
|
|
194
|
+
</AntButton>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<div class="flex flex-col gap-2.5">
|
|
199
|
+
<AntProgress v-bind="args" :progress="progress2" height="12px" color="bg-secondary-500"/>
|
|
200
|
+
|
|
201
|
+
<div class="flex gap-2.5 items-center">
|
|
202
|
+
<AntButton
|
|
203
|
+
:icon-left="faMinus"
|
|
204
|
+
:size="Size.md"
|
|
205
|
+
:disabled="progress2 <= 0"
|
|
206
|
+
@click="decrease(2)"
|
|
207
|
+
/>
|
|
208
|
+
|
|
209
|
+
<div>
|
|
210
|
+
{{progress2}}%
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
<AntButton
|
|
214
|
+
:icon-left="faPlus"
|
|
215
|
+
:size="Size.md"
|
|
216
|
+
:disabled="progress2 >= 100"
|
|
217
|
+
@click="increase(2)"
|
|
218
|
+
/>
|
|
219
|
+
|
|
220
|
+
<AntButton
|
|
221
|
+
:size="Size.md"
|
|
222
|
+
@click="onClickStart(2)"
|
|
223
|
+
>
|
|
224
|
+
Start
|
|
225
|
+
</AntButton>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
<div class="flex flex-col gap-2.5">
|
|
230
|
+
<AntProgress v-bind="args" :progress="progress3" height="18px" color="bg-amber-500"/>
|
|
231
|
+
|
|
232
|
+
<div class="flex gap-2.5 items-center">
|
|
233
|
+
<AntButton
|
|
234
|
+
:icon-left="faMinus"
|
|
235
|
+
:size="Size.md"
|
|
236
|
+
:disabled="progress3 <= 0"
|
|
237
|
+
@click="decrease(3)"
|
|
238
|
+
/>
|
|
239
|
+
|
|
240
|
+
<div>
|
|
241
|
+
{{progress3}}%
|
|
242
|
+
</div>
|
|
243
|
+
|
|
244
|
+
<AntButton
|
|
245
|
+
:icon-left="faPlus"
|
|
246
|
+
:size="Size.md"
|
|
247
|
+
:disabled="progress3 >= 100"
|
|
248
|
+
@click="increase(3)"
|
|
249
|
+
/>
|
|
250
|
+
|
|
251
|
+
<AntButton
|
|
252
|
+
:size="Size.md"
|
|
253
|
+
@click="onClickStart(3)"
|
|
254
|
+
>
|
|
255
|
+
Start
|
|
256
|
+
</AntButton>
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
`
|
|
261
|
+
}),
|
|
262
|
+
args: {}
|
|
263
|
+
};
|