@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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/vue-components/v3/form-fields/SingleStepFormArray.vue +39 -34
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "2.5.8",
3
+ "version": "2.5.10",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/vue-components/v3/form-fields/SingleStepFormArray.vue 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(true);
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="isFormHidden = !isFormHidden"
114
+ @click="collapseForm()"
106
115
  />
107
116
  <div class="buttons pb-5">
108
117
  <!-- save button start -->
109
- <button
110
- class="button ac-button is-small is-primary is-light"
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
- class="button ac-button is-small is-danger is-light"
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="isFormHidden = !isFormHidden"
158
+ @click="collapseForm()"
151
159
  />
152
- <button
153
- v-if="!disabled && !isCreateDisabled"
154
- class="button ac-button is-primary is-light is-outlined"
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="!disabled && isEditable"
198
- class="button ac-button has-text-primary is-small"
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="!disabled"
208
- title="Delete"
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
- class="button ac-button is-small"
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
- class="button ac-button is-small is-outlined is-light is-primary"
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
- class="button ac-button is-small is-outlined is-light is-danger"
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>