@appscode/design-system 2.5.8 → 2.5.10
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/package.json
CHANGED
|
@@ -8,8 +8,10 @@ import HeroiconsPencilSquare from "~icons/heroicons/pencil-square";
|
|
|
8
8
|
import HeroiconsTrash from "~icons/heroicons/trash";
|
|
9
9
|
import HeroiconsChevronDownSolid from "~icons/heroicons/chevron-down-solid";
|
|
10
10
|
import HeroiconsChevronUpSolid from "~icons/heroicons/chevron-up-solid";
|
|
11
|
+
import AcButton from "../button/Button.vue";
|
|
11
12
|
|
|
12
13
|
interface Props {
|
|
14
|
+
isButtonsDisabled?: boolean;
|
|
13
15
|
disabled?: boolean;
|
|
14
16
|
isCreateDisabled?: boolean;
|
|
15
17
|
label: string;
|
|
@@ -24,9 +26,11 @@ interface Props {
|
|
|
24
26
|
updateEditFields?: Function;
|
|
25
27
|
saveNewItem?: Function;
|
|
26
28
|
onDeleteItem: Function;
|
|
29
|
+
initiallyHidden?: boolean;
|
|
27
30
|
}
|
|
28
31
|
|
|
29
32
|
const prop = withDefaults(defineProps<Props>(), {
|
|
33
|
+
isButtonsDisabled: false,
|
|
30
34
|
disabled: false,
|
|
31
35
|
isCreateDisabled: false,
|
|
32
36
|
label: "",
|
|
@@ -40,13 +44,14 @@ const prop = withDefaults(defineProps<Props>(), {
|
|
|
40
44
|
updateEditFields: () => () => ({}),
|
|
41
45
|
saveEditedItem: () => () => ({}),
|
|
42
46
|
onDeleteItem: () => () => ({}),
|
|
47
|
+
initiallyHidden: false,
|
|
43
48
|
});
|
|
44
49
|
|
|
45
50
|
const Accordion = defineAsyncComponent(() => import("./Accordion.vue"));
|
|
46
51
|
|
|
47
52
|
const expandableFieldIndex = ref(-1);
|
|
48
53
|
const editFieldIndex = ref(-1);
|
|
49
|
-
const isFormHidden = ref(
|
|
54
|
+
const isFormHidden = ref(prop.initiallyHidden);
|
|
50
55
|
const isSavingNewElement = ref(false);
|
|
51
56
|
const dataForTable = defineModel<Array<AcTableRow>>({ required: true });
|
|
52
57
|
|
|
@@ -89,6 +94,10 @@ function readableTime(utcTime: unknown) {
|
|
|
89
94
|
if (typeof utcTime === "string") return new Date(utcTime).toLocaleString();
|
|
90
95
|
else return utcTime;
|
|
91
96
|
}
|
|
97
|
+
|
|
98
|
+
function collapseForm() {
|
|
99
|
+
if (prop.isCollapsible) isFormHidden.value = !isFormHidden.value;
|
|
100
|
+
}
|
|
92
101
|
</script>
|
|
93
102
|
|
|
94
103
|
<template>
|
|
@@ -102,28 +111,27 @@ function readableTime(utcTime: unknown) {
|
|
|
102
111
|
:isRequired="isRequired"
|
|
103
112
|
:errors="errors"
|
|
104
113
|
:isFormHidden="isFormHidden"
|
|
105
|
-
@click="
|
|
114
|
+
@click="collapseForm()"
|
|
106
115
|
/>
|
|
107
116
|
<div class="buttons pb-5">
|
|
108
117
|
<!-- save button start -->
|
|
109
|
-
<button
|
|
110
|
-
|
|
118
|
+
<ac-button
|
|
119
|
+
modifier-classes="is-small is-primary is-light"
|
|
111
120
|
:disabled="disabled ? true : false"
|
|
112
121
|
data-testid="single-step-form-array-item-save-button"
|
|
113
|
-
title="Save"
|
|
114
122
|
@click.prevent="onSaveItem()"
|
|
115
123
|
>
|
|
116
124
|
<span class="icon"><FluentSave28Regular /></span>
|
|
117
|
-
</button>
|
|
125
|
+
</ac-button>
|
|
118
126
|
<!-- save button end -->
|
|
119
127
|
<!-- CLOSE button start -->
|
|
120
|
-
<button
|
|
121
|
-
|
|
128
|
+
<ac-button
|
|
129
|
+
modifier-classes="is-small is-light is-danger"
|
|
122
130
|
data-testid="single-step-form-array-item-close-button"
|
|
123
131
|
@click.prevent="resetAllData()"
|
|
124
132
|
>
|
|
125
133
|
<span class="icon"><HeroiconsXMark20Solid /></span>
|
|
126
|
-
</button>
|
|
134
|
+
</ac-button>
|
|
127
135
|
<!-- CLOSE button end -->
|
|
128
136
|
</div>
|
|
129
137
|
</div>
|
|
@@ -147,16 +155,16 @@ function readableTime(utcTime: unknown) {
|
|
|
147
155
|
:isRequired="isRequired"
|
|
148
156
|
:errors="errors"
|
|
149
157
|
:isFormHidden="isFormHidden"
|
|
150
|
-
@click="
|
|
158
|
+
@click="collapseForm()"
|
|
151
159
|
/>
|
|
152
|
-
<button
|
|
153
|
-
v-if="!
|
|
154
|
-
|
|
160
|
+
<ac-button
|
|
161
|
+
v-if="!isButtonsDisabled && !isCreateDisabled"
|
|
162
|
+
modifier-classes="is-primary is-light is-outlined"
|
|
155
163
|
data-testid="single-step-form-array-item-create-button"
|
|
156
164
|
@click.prevent="onAddClick()"
|
|
157
165
|
>
|
|
158
166
|
<span class="icon"><HeroiconsPlus /> </span><span>Add New</span>
|
|
159
|
-
</button>
|
|
167
|
+
</ac-button>
|
|
160
168
|
</div>
|
|
161
169
|
<!-- Label and Add New Button End -->
|
|
162
170
|
|
|
@@ -193,37 +201,34 @@ function readableTime(utcTime: unknown) {
|
|
|
193
201
|
<!-- Action Buttons Start -->
|
|
194
202
|
<td>
|
|
195
203
|
<div class="buttons is-justify-content-flex-end">
|
|
196
|
-
<button
|
|
197
|
-
v-if="!
|
|
198
|
-
|
|
199
|
-
title="Edit"
|
|
204
|
+
<ac-button
|
|
205
|
+
v-if="!isButtonsDisabled && isEditable"
|
|
206
|
+
modifier-classes="is-small is-light is-primary"
|
|
200
207
|
data-testid="single-step-form-array-item-edit-button"
|
|
201
208
|
@click.prevent="onEditClick(idxRow)"
|
|
202
209
|
>
|
|
203
210
|
<span class="icon"> <HeroiconsPencilSquare /> </span>
|
|
204
|
-
</button>
|
|
211
|
+
</ac-button>
|
|
205
212
|
|
|
206
|
-
<button
|
|
207
|
-
v-if="!
|
|
208
|
-
|
|
209
|
-
class="button ac-button has-text-danger is-small"
|
|
213
|
+
<ac-button
|
|
214
|
+
v-if="!isButtonsDisabled"
|
|
215
|
+
modifier-classes="is-small is-light is-danger"
|
|
210
216
|
data-testid="single-step-form-array-item-delete-button"
|
|
211
217
|
@click.prevent="onDeleteItem(idxRow)"
|
|
212
218
|
>
|
|
213
219
|
<span class="icon"> <HeroiconsTrash /> </span>
|
|
214
|
-
</button>
|
|
220
|
+
</ac-button>
|
|
215
221
|
|
|
216
|
-
<button
|
|
222
|
+
<ac-button
|
|
217
223
|
v-if="isExpandable"
|
|
218
|
-
|
|
219
|
-
title="Expand"
|
|
224
|
+
modifier-classes="is-small is-light"
|
|
220
225
|
data-testid="single-step-form-array-item-show-details-button"
|
|
221
226
|
@click.prevent="onDetailsClick(idxRow)"
|
|
222
227
|
>
|
|
223
228
|
<span v-if="expandableFieldIndex === idxRow" class="icon"><HeroiconsChevronUpSolid /></span>
|
|
224
229
|
|
|
225
230
|
<span v-else class="icon"><HeroiconsChevronDownSolid /></span>
|
|
226
|
-
</button>
|
|
231
|
+
</ac-button>
|
|
227
232
|
</div>
|
|
228
233
|
</td>
|
|
229
234
|
<!-- Action Button End -->
|
|
@@ -236,23 +241,23 @@ function readableTime(utcTime: unknown) {
|
|
|
236
241
|
<accordion :label="`Edit ${label}`" :is-collapsible="false" />
|
|
237
242
|
<div class="buttons pb-5">
|
|
238
243
|
<!-- save button start -->
|
|
239
|
-
<button
|
|
240
|
-
|
|
244
|
+
<ac-button
|
|
245
|
+
modifier-classes="is-small is-primary is-light"
|
|
241
246
|
:disabled="disabled ? true : false"
|
|
242
247
|
data-testid="single-step-form-array-item-save-button"
|
|
243
248
|
@click.prevent="onSaveEditedItem(idxRow)"
|
|
244
249
|
>
|
|
245
250
|
<span class="icon"> <FluentSave28Regular /> </span>
|
|
246
|
-
</button>
|
|
251
|
+
</ac-button>
|
|
247
252
|
<!-- save button end -->
|
|
248
253
|
<!-- close button start -->
|
|
249
|
-
<button
|
|
250
|
-
|
|
254
|
+
<ac-button
|
|
255
|
+
modifier-classes="is-small is-danger is-light"
|
|
251
256
|
data-testid="single-step-form-array-item-close-button"
|
|
252
257
|
@click.prevent="resetAllData()"
|
|
253
258
|
>
|
|
254
259
|
<span class="icon"> <HeroiconsXMark20Solid /> </span>
|
|
255
|
-
</button>
|
|
260
|
+
</ac-button>
|
|
256
261
|
<!-- close button end -->
|
|
257
262
|
</div>
|
|
258
263
|
</div>
|