@appscode/design-system 2.2.22 → 2.2.23
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
|
@@ -25,9 +25,7 @@ withDefaults(defineProps<prop>(), {
|
|
|
25
25
|
showStar: false,
|
|
26
26
|
});
|
|
27
27
|
|
|
28
|
-
const AcInputText = defineAsyncComponent(
|
|
29
|
-
() => import("@appscode/design-system/vue-components/v3/form-fields/AcSingleInput.vue")
|
|
30
|
-
);
|
|
28
|
+
const AcInputText = defineAsyncComponent(() => import("./AcSingleInput.vue"));
|
|
31
29
|
|
|
32
30
|
const model = defineModel({ type: String });
|
|
33
31
|
const isLabelHoisted = ref(false);
|
|
@@ -42,6 +42,7 @@
|
|
|
42
42
|
:allow-empty="false"
|
|
43
43
|
:show-labels="false"
|
|
44
44
|
:close-on-select="true"
|
|
45
|
+
:open-direction="openDirection"
|
|
45
46
|
data-testid="simple-select-box"
|
|
46
47
|
@open="openDropDown"
|
|
47
48
|
@close="closeDropDown"
|
|
@@ -77,6 +78,7 @@ interface Props {
|
|
|
77
78
|
showStar: boolean;
|
|
78
79
|
wrapperDivCustomClass: string;
|
|
79
80
|
multiselectCustomClass: string;
|
|
81
|
+
openDirection: "top" | "bottom";
|
|
80
82
|
}
|
|
81
83
|
|
|
82
84
|
const props = withDefaults(defineProps<Props>(), {
|
|
@@ -95,6 +97,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
95
97
|
isLoaderActive: false,
|
|
96
98
|
noResultText: "",
|
|
97
99
|
showStar: false,
|
|
100
|
+
openDirection: "bottom",
|
|
98
101
|
});
|
|
99
102
|
|
|
100
103
|
const emit = defineEmits(["select", "remove", "refresh-btn-click"]);
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
interface Props {
|
|
3
|
+
label: string;
|
|
4
|
+
customClass: string;
|
|
5
|
+
isCollapsible: boolean;
|
|
6
|
+
isRequired: boolean;
|
|
7
|
+
errors: Array<string>;
|
|
8
|
+
isFormHidden: boolean;
|
|
9
|
+
}
|
|
10
|
+
withDefaults(defineProps<Props>(), {
|
|
11
|
+
label: "",
|
|
12
|
+
customClass: "",
|
|
13
|
+
isCollapsible: true,
|
|
14
|
+
isRequired: false,
|
|
15
|
+
errors: () => [],
|
|
16
|
+
isFormHidden: true,
|
|
17
|
+
});
|
|
18
|
+
defineEmits(["click"]);
|
|
19
|
+
|
|
20
|
+
function formatErrors(err: Array<string>) {
|
|
21
|
+
return err.join("\n");
|
|
22
|
+
}
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<template>
|
|
26
|
+
<div class="nested-header mb-5" @click="$emit('click', $event)">
|
|
27
|
+
<h6 class="is-flex is-align-items-center is-normal" :class="customClass">
|
|
28
|
+
<span v-if="isCollapsible" class="collaps-icon mr-5">
|
|
29
|
+
<i class="fa" :class="[isFormHidden ? 'fa-plus' : 'fa-minus']" aria-hidden="true" />
|
|
30
|
+
</span>
|
|
31
|
+
{{ label }}
|
|
32
|
+
<b v-if="isRequired" class="ml-5 has-text-danger"> * </b>
|
|
33
|
+
<span
|
|
34
|
+
v-show="errors.length"
|
|
35
|
+
class="has-text-danger has-text-weight-normal is-italic ml-5 is-size-6"
|
|
36
|
+
:title="formatErrors(errors)"
|
|
37
|
+
>
|
|
38
|
+
<i class="fa fa-exclamation-triangle" aria-hidden="true" />
|
|
39
|
+
{{ errors.length === 1 ? errors[0] : `Error in ${errors.length} fields` }}
|
|
40
|
+
</span>
|
|
41
|
+
</h6>
|
|
42
|
+
</div>
|
|
43
|
+
</template>
|
|
@@ -0,0 +1,284 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { defineAsyncComponent, ref } from "vue";
|
|
3
|
+
import type { AcTableCol, AcTableRow } from "../../types/table";
|
|
4
|
+
import FluentSave28Regular from "~icons/fluent/save-28-regular";
|
|
5
|
+
import HeroiconsXMark20Solid from "~icons/heroicons/x-mark-20-solid";
|
|
6
|
+
import HeroiconsPlus from "~icons/heroicons/plus";
|
|
7
|
+
import HeroiconsPencilSquare from "~icons/heroicons/pencil-square";
|
|
8
|
+
import HeroiconsTrash from "~icons/heroicons/trash";
|
|
9
|
+
import HeroiconsChevronDownSolid from "~icons/heroicons/chevron-down-solid";
|
|
10
|
+
import HeroiconsChevronUpSolid from "~icons/heroicons/chevron-up-solid";
|
|
11
|
+
|
|
12
|
+
interface Props {
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
isCreateDisabled?: boolean;
|
|
15
|
+
label: string;
|
|
16
|
+
isCollapsible?: boolean;
|
|
17
|
+
isRequired?: boolean;
|
|
18
|
+
errors?: Array<string>;
|
|
19
|
+
tableHeaders: Array<AcTableCol>;
|
|
20
|
+
isExpandable?: boolean;
|
|
21
|
+
isEditable?: boolean;
|
|
22
|
+
saveEditedItem?: Function;
|
|
23
|
+
clearAllFields?: Function;
|
|
24
|
+
updateEditFields?: Function;
|
|
25
|
+
saveNewItem?: Function;
|
|
26
|
+
onDeleteItem: Function;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const prop = withDefaults(defineProps<Props>(), {
|
|
30
|
+
disabled: false,
|
|
31
|
+
isCreateDisabled: false,
|
|
32
|
+
label: "",
|
|
33
|
+
isCollapsible: true,
|
|
34
|
+
isRequired: false,
|
|
35
|
+
errors: () => [],
|
|
36
|
+
isExpandable: false,
|
|
37
|
+
isEditable: true,
|
|
38
|
+
saveNewItem: () => () => ({}),
|
|
39
|
+
clearAllFields: () => () => ({}),
|
|
40
|
+
updateEditFields: () => () => ({}),
|
|
41
|
+
saveEditedItem: () => () => ({}),
|
|
42
|
+
onDeleteItem: () => () => ({}),
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
const Accordion = defineAsyncComponent(() => import("./Accordion.vue"));
|
|
46
|
+
|
|
47
|
+
const expandableFieldIndex = ref(-1);
|
|
48
|
+
const editFieldIndex = ref(-1);
|
|
49
|
+
const isFormHidden = ref(true);
|
|
50
|
+
const isSavingNewElement = ref(false);
|
|
51
|
+
const dataForTable = defineModel<Array<AcTableRow>>({ required: true });
|
|
52
|
+
|
|
53
|
+
function onAddClick() {
|
|
54
|
+
isSavingNewElement.value = true;
|
|
55
|
+
isFormHidden.value = false;
|
|
56
|
+
prop.clearAllFields();
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
function onSaveItem() {
|
|
60
|
+
prop.saveNewItem();
|
|
61
|
+
resetAllData();
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
function onSaveEditedItem(row: number) {
|
|
65
|
+
prop.saveEditedItem(row);
|
|
66
|
+
resetAllData();
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
function resetAllData() {
|
|
70
|
+
expandableFieldIndex.value = -1;
|
|
71
|
+
editFieldIndex.value = -1;
|
|
72
|
+
isSavingNewElement.value = false;
|
|
73
|
+
prop.clearAllFields();
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
function onEditClick(row: number) {
|
|
77
|
+
prop.updateEditFields(row);
|
|
78
|
+
editFieldIndex.value = row;
|
|
79
|
+
expandableFieldIndex.value = -1;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
function onDetailsClick(row: number) {
|
|
83
|
+
if (expandableFieldIndex.value === row) expandableFieldIndex.value = -1;
|
|
84
|
+
else expandableFieldIndex.value = row;
|
|
85
|
+
editFieldIndex.value = -1;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
function readableTime(utcTime: string) {
|
|
89
|
+
return new Date(utcTime).toLocaleString();
|
|
90
|
+
}
|
|
91
|
+
</script>
|
|
92
|
+
|
|
93
|
+
<template>
|
|
94
|
+
<div :class="{ 'ac-nested-elements': label }">
|
|
95
|
+
<!-- Add New Form Start -->
|
|
96
|
+
<template v-if="isSavingNewElement">
|
|
97
|
+
<div class="is-flex is-aligned-item-center is-justify-content-space-between">
|
|
98
|
+
<accordion
|
|
99
|
+
:label="`New ${label}`"
|
|
100
|
+
:isCollapsible="isCollapsible"
|
|
101
|
+
:isRequired="isRequired"
|
|
102
|
+
:errors="errors"
|
|
103
|
+
:isFormHidden="isFormHidden"
|
|
104
|
+
@click="isFormHidden = !isFormHidden"
|
|
105
|
+
/>
|
|
106
|
+
<div class="buttons pb-5">
|
|
107
|
+
<!-- save button start -->
|
|
108
|
+
<button
|
|
109
|
+
class="button ac-button is-small is-primary is-light"
|
|
110
|
+
:disabled="disabled ? true : false"
|
|
111
|
+
data-testid="single-step-form-array-item-save-button"
|
|
112
|
+
title="Save"
|
|
113
|
+
@click.prevent="onSaveItem()"
|
|
114
|
+
>
|
|
115
|
+
<span class="icon"><FluentSave28Regular /></span>
|
|
116
|
+
</button>
|
|
117
|
+
<!-- save button end -->
|
|
118
|
+
<!-- CLOSE button start -->
|
|
119
|
+
<button
|
|
120
|
+
class="button ac-button is-small is-danger is-light"
|
|
121
|
+
data-testid="single-step-form-array-item-close-button"
|
|
122
|
+
@click.prevent="resetAllData()"
|
|
123
|
+
>
|
|
124
|
+
<span class="icon"><HeroiconsXMark20Solid /></span>
|
|
125
|
+
</button>
|
|
126
|
+
<!-- CLOSE button end -->
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
<div
|
|
130
|
+
class="nested-body"
|
|
131
|
+
:class="{
|
|
132
|
+
'is-hidden': isFormHidden,
|
|
133
|
+
}"
|
|
134
|
+
>
|
|
135
|
+
<slot name="create-form" />
|
|
136
|
+
</div>
|
|
137
|
+
</template>
|
|
138
|
+
<!-- Add New Form End -->
|
|
139
|
+
|
|
140
|
+
<!-- Label and Add New Button Start -->
|
|
141
|
+
<template v-else>
|
|
142
|
+
<div class="is-flex is-aligned-item-center is-justify-content-space-between">
|
|
143
|
+
<accordion
|
|
144
|
+
:label="label"
|
|
145
|
+
:isCollapsible="isCollapsible"
|
|
146
|
+
:isRequired="isRequired"
|
|
147
|
+
:errors="errors"
|
|
148
|
+
:isFormHidden="isFormHidden"
|
|
149
|
+
@click="isFormHidden = !isFormHidden"
|
|
150
|
+
/>
|
|
151
|
+
<button
|
|
152
|
+
v-if="!disabled && !isCreateDisabled"
|
|
153
|
+
class="button ac-button is-primary is-light is-outlined"
|
|
154
|
+
data-testid="single-step-form-array-item-create-button"
|
|
155
|
+
@click.prevent="onAddClick()"
|
|
156
|
+
>
|
|
157
|
+
<span class="icon"><HeroiconsPlus /> </span><span>Add New</span>
|
|
158
|
+
</button>
|
|
159
|
+
</div>
|
|
160
|
+
<!-- Label and Add New Button End -->
|
|
161
|
+
|
|
162
|
+
<!-- Data Table and Edit Form Start -->
|
|
163
|
+
<div
|
|
164
|
+
:class="{
|
|
165
|
+
'nested-body': label,
|
|
166
|
+
'is-hidden': isFormHidden,
|
|
167
|
+
}"
|
|
168
|
+
>
|
|
169
|
+
<!-- existing element start -->
|
|
170
|
+
|
|
171
|
+
<div v-if="dataForTable.length" class="ac-table-container table-container my-4">
|
|
172
|
+
<table class="table ac-table ac-striped is-fullwidth" data-testid="ac-table">
|
|
173
|
+
<thead>
|
|
174
|
+
<tr>
|
|
175
|
+
<th v-for="(item, idx) in tableHeaders" :key="idx + item.name">
|
|
176
|
+
{{ item.name }}
|
|
177
|
+
</th>
|
|
178
|
+
<th class="has-text-right">Actions</th>
|
|
179
|
+
</tr>
|
|
180
|
+
</thead>
|
|
181
|
+
<tbody>
|
|
182
|
+
<template v-for="(itemRow, idxRow) in dataForTable" :key="idxRow">
|
|
183
|
+
<tr data-testid="ac-table-row">
|
|
184
|
+
<td v-for="(itemColumn, idx) in itemRow.cells" :key="itemColumn.data as string + idx">
|
|
185
|
+
<template v-if="tableHeaders[idx].type === 'date'">
|
|
186
|
+
{{ readableTime(itemColumn.data as string) }}
|
|
187
|
+
</template>
|
|
188
|
+
<template v-else>
|
|
189
|
+
{{ itemColumn.data }}
|
|
190
|
+
</template>
|
|
191
|
+
</td>
|
|
192
|
+
<!-- Action Buttons Start -->
|
|
193
|
+
<td>
|
|
194
|
+
<div class="buttons is-justify-content-flex-end">
|
|
195
|
+
<button
|
|
196
|
+
v-if="!disabled && isEditable"
|
|
197
|
+
class="button ac-button has-text-primary is-small"
|
|
198
|
+
title="Edit"
|
|
199
|
+
data-testid="single-step-form-array-item-edit-button"
|
|
200
|
+
@click.prevent="onEditClick(idxRow)"
|
|
201
|
+
>
|
|
202
|
+
<span class="icon"> <HeroiconsPencilSquare /> </span>
|
|
203
|
+
</button>
|
|
204
|
+
|
|
205
|
+
<button
|
|
206
|
+
v-if="!disabled"
|
|
207
|
+
title="Delete"
|
|
208
|
+
class="button ac-button has-text-danger is-small"
|
|
209
|
+
data-testid="single-step-form-array-item-delete-button"
|
|
210
|
+
@click.prevent="onDeleteItem(idxRow)"
|
|
211
|
+
>
|
|
212
|
+
<span class="icon"> <HeroiconsTrash /> </span>
|
|
213
|
+
</button>
|
|
214
|
+
|
|
215
|
+
<button
|
|
216
|
+
v-if="isExpandable"
|
|
217
|
+
class="button ac-button is-small"
|
|
218
|
+
title="Expand"
|
|
219
|
+
data-testid="single-step-form-array-item-show-details-button"
|
|
220
|
+
@click.prevent="onDetailsClick(idxRow)"
|
|
221
|
+
>
|
|
222
|
+
<span v-if="expandableFieldIndex === idxRow" class="icon"><HeroiconsChevronUpSolid /></span>
|
|
223
|
+
|
|
224
|
+
<span v-else class="icon"><HeroiconsChevronDownSolid /></span>
|
|
225
|
+
</button>
|
|
226
|
+
</div>
|
|
227
|
+
</td>
|
|
228
|
+
<!-- Action Button End -->
|
|
229
|
+
</tr>
|
|
230
|
+
<!-- Edit Form Start -->
|
|
231
|
+
<tr v-if="editFieldIndex === idxRow" style="background-color: #f8f8f8">
|
|
232
|
+
<td :colspan="itemRow.cells.length + 1">
|
|
233
|
+
<!-- nested elements start -->
|
|
234
|
+
<div class="mt-15 mb-15 is-flex is-aligned-item-center is-justify-content-space-between">
|
|
235
|
+
<accordion :label="`Edit ${label}`" :is-collapsible="false" />
|
|
236
|
+
<div class="buttons pb-5">
|
|
237
|
+
<!-- save button start -->
|
|
238
|
+
<button
|
|
239
|
+
class="button ac-button is-small is-outlined is-light is-primary"
|
|
240
|
+
:disabled="disabled ? true : false"
|
|
241
|
+
data-testid="single-step-form-array-item-save-button"
|
|
242
|
+
@click.prevent="onSaveEditedItem(idxRow)"
|
|
243
|
+
>
|
|
244
|
+
<span class="icon"> <FluentSave28Regular /> </span>
|
|
245
|
+
</button>
|
|
246
|
+
<!-- save button end -->
|
|
247
|
+
<!-- close button start -->
|
|
248
|
+
<button
|
|
249
|
+
class="button ac-button is-small is-outlined is-light is-danger"
|
|
250
|
+
data-testid="single-step-form-array-item-close-button"
|
|
251
|
+
@click.prevent="resetAllData()"
|
|
252
|
+
>
|
|
253
|
+
<span class="icon"> <HeroiconsXMark20Solid /> </span>
|
|
254
|
+
</button>
|
|
255
|
+
<!-- close button end -->
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
<div class="">
|
|
259
|
+
<slot name="edit-form" />
|
|
260
|
+
</div>
|
|
261
|
+
</td>
|
|
262
|
+
</tr>
|
|
263
|
+
<!-- Edit Form End -->
|
|
264
|
+
|
|
265
|
+
<!-- Show Details Table Start -->
|
|
266
|
+
<tr v-if="expandableFieldIndex === idxRow" style="background-color: #f8f8f8">
|
|
267
|
+
<td :colspan="itemRow.cells.length + 1">
|
|
268
|
+
<slot name="row-details" />
|
|
269
|
+
</td>
|
|
270
|
+
</tr>
|
|
271
|
+
<!-- Show Details Table End -->
|
|
272
|
+
</template>
|
|
273
|
+
</tbody>
|
|
274
|
+
</table>
|
|
275
|
+
</div>
|
|
276
|
+
<div v-else class="label-action is-flex is-flex-wrap-wrap mb-5">
|
|
277
|
+
<strong> No Item Found. </strong>
|
|
278
|
+
</div>
|
|
279
|
+
<!-- existing element end -->
|
|
280
|
+
</div>
|
|
281
|
+
<!-- Data Table and Edit Form End -->
|
|
282
|
+
</template>
|
|
283
|
+
</div>
|
|
284
|
+
</template>
|