@antify/ui 2.3.0 → 2.4.0
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.
- package/dist/components/AntProgress.vue +49 -0
- package/dist/components/__stories/AntProgress.stories.d.ts +7 -0
- package/dist/components/__stories/AntProgress.stories.js +259 -0
- package/dist/components/__stories/AntProgress.stories.mjs +263 -0
- package/dist/components/inputs/AntImageInput.vue +11 -12
- package/dist/components/inputs/__stories/AntImageInput.stories.js +22 -8
- package/dist/components/inputs/__stories/AntImageInput.stories.mjs +24 -8
- package/package.json +1 -1
|
@@ -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
|
+
};
|
|
@@ -34,7 +34,7 @@ defineOptions({
|
|
|
34
34
|
});
|
|
35
35
|
|
|
36
36
|
const props = withDefaults(defineProps<{
|
|
37
|
-
|
|
37
|
+
src: string | null;
|
|
38
38
|
loading?: boolean;
|
|
39
39
|
label?: string;
|
|
40
40
|
placeholder?: string;
|
|
@@ -56,10 +56,10 @@ const props = withDefaults(defineProps<{
|
|
|
56
56
|
loading: false,
|
|
57
57
|
});
|
|
58
58
|
const emit = defineEmits([
|
|
59
|
-
'update:modelValue',
|
|
60
59
|
'validate',
|
|
60
|
+
'upload',
|
|
61
|
+
'remove',
|
|
61
62
|
]);
|
|
62
|
-
const _modelValue = useVModel(props, 'modelValue', emit);
|
|
63
63
|
const descriptionFontSize = computed(() => {
|
|
64
64
|
if (props.size === Size.xs2 || props.size === Size.xs) {
|
|
65
65
|
return Size.xs;
|
|
@@ -76,12 +76,9 @@ const openFileDialog = () => {
|
|
|
76
76
|
const handleFileChange = (event: Event) => {
|
|
77
77
|
const target = event.target as HTMLInputElement;
|
|
78
78
|
const file = target.files?.[0];
|
|
79
|
+
|
|
79
80
|
if (file) {
|
|
80
|
-
|
|
81
|
-
reader.onload = () => {
|
|
82
|
-
emit('update:modelValue', reader.result as string);
|
|
83
|
-
};
|
|
84
|
-
reader.readAsDataURL(file);
|
|
81
|
+
emit('upload', file as File);
|
|
85
82
|
}
|
|
86
83
|
};
|
|
87
84
|
|
|
@@ -107,8 +104,8 @@ onMounted(() => {
|
|
|
107
104
|
<div>
|
|
108
105
|
<div class="h-[70px] w-[70px] bg-gray-100 rounded-full overflow-hidden flex items-center justify-center relative">
|
|
109
106
|
<img
|
|
110
|
-
v-if="
|
|
111
|
-
:src="
|
|
107
|
+
v-if="src && !skeleton"
|
|
108
|
+
:src="src"
|
|
112
109
|
alt="Image"
|
|
113
110
|
class="h-full w-full object-cover"
|
|
114
111
|
>
|
|
@@ -159,12 +156,14 @@ onMounted(() => {
|
|
|
159
156
|
</span>
|
|
160
157
|
|
|
161
158
|
<AntButton
|
|
162
|
-
v-if="
|
|
159
|
+
v-if="src"
|
|
163
160
|
:size="Size.lg"
|
|
164
161
|
:icon-left="faMultiply"
|
|
165
162
|
:skeleton="skeleton"
|
|
166
163
|
:disabled="disabled"
|
|
167
|
-
@click.prevent="() =>
|
|
164
|
+
@click.prevent="() => {
|
|
165
|
+
emit('remove');
|
|
166
|
+
}"
|
|
168
167
|
>
|
|
169
168
|
<template #tooltip-content>
|
|
170
169
|
Remove image
|
|
@@ -10,6 +10,7 @@ var _enums = require("../../../enums");
|
|
|
10
10
|
var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
|
|
11
11
|
var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
|
|
12
12
|
var _vue = require("vue");
|
|
13
|
+
var _addonActions = require("@storybook/addon-actions");
|
|
13
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
14
15
|
const meta = {
|
|
15
16
|
title: "Inputs/Image Input",
|
|
@@ -20,7 +21,7 @@ const meta = {
|
|
|
20
21
|
}
|
|
21
22
|
},
|
|
22
23
|
argTypes: {
|
|
23
|
-
|
|
24
|
+
src: {
|
|
24
25
|
table: {
|
|
25
26
|
type: {
|
|
26
27
|
summary: "string|null"
|
|
@@ -55,18 +56,31 @@ const Docs = exports.Docs = {
|
|
|
55
56
|
AntImageInput: _AntImageInput.default
|
|
56
57
|
},
|
|
57
58
|
setup() {
|
|
59
|
+
function upload(value) {
|
|
60
|
+
console.info("Action upload:", value);
|
|
61
|
+
(0, _addonActions.action)("upload")(value);
|
|
62
|
+
args.loading = true;
|
|
63
|
+
setTimeout(() => args.loading = false, 2e3);
|
|
64
|
+
}
|
|
65
|
+
function remove() {
|
|
66
|
+
(0, _addonActions.action)("remove")();
|
|
67
|
+
}
|
|
58
68
|
return {
|
|
59
|
-
args
|
|
69
|
+
args,
|
|
70
|
+
upload,
|
|
71
|
+
remove
|
|
60
72
|
};
|
|
61
73
|
},
|
|
62
74
|
template: `
|
|
63
75
|
<AntImageInput
|
|
64
76
|
v-bind="args"
|
|
65
|
-
|
|
77
|
+
:src="args.src"
|
|
78
|
+
@upload="upload"
|
|
79
|
+
@remove="remove"
|
|
66
80
|
/>`
|
|
67
81
|
}),
|
|
68
82
|
args: {
|
|
69
|
-
|
|
83
|
+
src: "/avatar.jpg",
|
|
70
84
|
label: "Label",
|
|
71
85
|
description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
|
|
72
86
|
}
|
|
@@ -75,7 +89,7 @@ const Empty = exports.Empty = {
|
|
|
75
89
|
render: Docs.render,
|
|
76
90
|
args: {
|
|
77
91
|
...Docs.args,
|
|
78
|
-
|
|
92
|
+
src: null
|
|
79
93
|
}
|
|
80
94
|
};
|
|
81
95
|
const Skeleton = exports.Skeleton = {
|
|
@@ -117,19 +131,19 @@ const Summary = exports.Summary = {
|
|
|
117
131
|
<AntFormGroup>
|
|
118
132
|
<AntFormGroupLabel>Default</AntFormGroupLabel>
|
|
119
133
|
<AntImageInput
|
|
120
|
-
|
|
134
|
+
:src="valuedModelValue"
|
|
121
135
|
label="Label"
|
|
122
136
|
description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
|
|
123
137
|
/>
|
|
124
138
|
<AntFormGroupLabel>Empty</AntFormGroupLabel>
|
|
125
139
|
<AntImageInput
|
|
126
|
-
|
|
140
|
+
:src="emptyModelValue"
|
|
127
141
|
label="Label"
|
|
128
142
|
description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
|
|
129
143
|
/>
|
|
130
144
|
<AntFormGroupLabel>Disabled</AntFormGroupLabel>
|
|
131
145
|
<AntImageInput
|
|
132
|
-
|
|
146
|
+
:src="valuedModelValue"
|
|
133
147
|
label="Label"
|
|
134
148
|
description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
|
|
135
149
|
/>
|
|
@@ -10,6 +10,9 @@ import AntFormGroup from "../../forms/AntFormGroup.vue";
|
|
|
10
10
|
import {
|
|
11
11
|
ref
|
|
12
12
|
} from "vue";
|
|
13
|
+
import {
|
|
14
|
+
action
|
|
15
|
+
} from "@storybook/addon-actions";
|
|
13
16
|
const meta = {
|
|
14
17
|
title: "Inputs/Image Input",
|
|
15
18
|
component: AntImageInput,
|
|
@@ -19,7 +22,7 @@ const meta = {
|
|
|
19
22
|
}
|
|
20
23
|
},
|
|
21
24
|
argTypes: {
|
|
22
|
-
|
|
25
|
+
src: {
|
|
23
26
|
table: {
|
|
24
27
|
type: {
|
|
25
28
|
summary: "string|null"
|
|
@@ -54,18 +57,31 @@ export const Docs = {
|
|
|
54
57
|
AntImageInput
|
|
55
58
|
},
|
|
56
59
|
setup() {
|
|
60
|
+
function upload(value) {
|
|
61
|
+
console.info("Action upload:", value);
|
|
62
|
+
action("upload")(value);
|
|
63
|
+
args.loading = true;
|
|
64
|
+
setTimeout(() => args.loading = false, 2e3);
|
|
65
|
+
}
|
|
66
|
+
function remove() {
|
|
67
|
+
action("remove")();
|
|
68
|
+
}
|
|
57
69
|
return {
|
|
58
|
-
args
|
|
70
|
+
args,
|
|
71
|
+
upload,
|
|
72
|
+
remove
|
|
59
73
|
};
|
|
60
74
|
},
|
|
61
75
|
template: `
|
|
62
76
|
<AntImageInput
|
|
63
77
|
v-bind="args"
|
|
64
|
-
|
|
78
|
+
:src="args.src"
|
|
79
|
+
@upload="upload"
|
|
80
|
+
@remove="remove"
|
|
65
81
|
/>`
|
|
66
82
|
}),
|
|
67
83
|
args: {
|
|
68
|
-
|
|
84
|
+
src: "/avatar.jpg",
|
|
69
85
|
label: "Label",
|
|
70
86
|
description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
|
|
71
87
|
}
|
|
@@ -74,7 +90,7 @@ export const Empty = {
|
|
|
74
90
|
render: Docs.render,
|
|
75
91
|
args: {
|
|
76
92
|
...Docs.args,
|
|
77
|
-
|
|
93
|
+
src: null
|
|
78
94
|
}
|
|
79
95
|
};
|
|
80
96
|
export const Skeleton = {
|
|
@@ -116,19 +132,19 @@ export const Summary = {
|
|
|
116
132
|
<AntFormGroup>
|
|
117
133
|
<AntFormGroupLabel>Default</AntFormGroupLabel>
|
|
118
134
|
<AntImageInput
|
|
119
|
-
|
|
135
|
+
:src="valuedModelValue"
|
|
120
136
|
label="Label"
|
|
121
137
|
description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
|
|
122
138
|
/>
|
|
123
139
|
<AntFormGroupLabel>Empty</AntFormGroupLabel>
|
|
124
140
|
<AntImageInput
|
|
125
|
-
|
|
141
|
+
:src="emptyModelValue"
|
|
126
142
|
label="Label"
|
|
127
143
|
description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
|
|
128
144
|
/>
|
|
129
145
|
<AntFormGroupLabel>Disabled</AntFormGroupLabel>
|
|
130
146
|
<AntImageInput
|
|
131
|
-
|
|
147
|
+
:src="valuedModelValue"
|
|
132
148
|
label="Label"
|
|
133
149
|
description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
|
|
134
150
|
/>
|