@appscode/design-system 2.5.9 → 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 +30 -31
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "2.5.9",
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;
@@ -28,6 +30,7 @@ interface Props {
28
30
  }
29
31
 
30
32
  const prop = withDefaults(defineProps<Props>(), {
33
+ isButtonsDisabled: false,
31
34
  disabled: false,
32
35
  isCreateDisabled: false,
33
36
  label: "",
@@ -112,24 +115,23 @@ function collapseForm() {
112
115
  />
113
116
  <div class="buttons pb-5">
114
117
  <!-- save button start -->
115
- <button
116
- class="button ac-button is-small is-primary is-light"
118
+ <ac-button
119
+ modifier-classes="is-small is-primary is-light"
117
120
  :disabled="disabled ? true : false"
118
121
  data-testid="single-step-form-array-item-save-button"
119
- title="Save"
120
122
  @click.prevent="onSaveItem()"
121
123
  >
122
124
  <span class="icon"><FluentSave28Regular /></span>
123
- </button>
125
+ </ac-button>
124
126
  <!-- save button end -->
125
127
  <!-- CLOSE button start -->
126
- <button
127
- class="button ac-button is-small is-danger is-light"
128
+ <ac-button
129
+ modifier-classes="is-small is-light is-danger"
128
130
  data-testid="single-step-form-array-item-close-button"
129
131
  @click.prevent="resetAllData()"
130
132
  >
131
133
  <span class="icon"><HeroiconsXMark20Solid /></span>
132
- </button>
134
+ </ac-button>
133
135
  <!-- CLOSE button end -->
134
136
  </div>
135
137
  </div>
@@ -155,14 +157,14 @@ function collapseForm() {
155
157
  :isFormHidden="isFormHidden"
156
158
  @click="collapseForm()"
157
159
  />
158
- <button
159
- v-if="!disabled && !isCreateDisabled"
160
- 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"
161
163
  data-testid="single-step-form-array-item-create-button"
162
164
  @click.prevent="onAddClick()"
163
165
  >
164
166
  <span class="icon"><HeroiconsPlus /> </span><span>Add New</span>
165
- </button>
167
+ </ac-button>
166
168
  </div>
167
169
  <!-- Label and Add New Button End -->
168
170
 
@@ -199,37 +201,34 @@ function collapseForm() {
199
201
  <!-- Action Buttons Start -->
200
202
  <td>
201
203
  <div class="buttons is-justify-content-flex-end">
202
- <button
203
- v-if="!disabled && isEditable"
204
- class="button ac-button has-text-primary is-small"
205
- title="Edit"
204
+ <ac-button
205
+ v-if="!isButtonsDisabled && isEditable"
206
+ modifier-classes="is-small is-light is-primary"
206
207
  data-testid="single-step-form-array-item-edit-button"
207
208
  @click.prevent="onEditClick(idxRow)"
208
209
  >
209
210
  <span class="icon"> <HeroiconsPencilSquare /> </span>
210
- </button>
211
+ </ac-button>
211
212
 
212
- <button
213
- v-if="!disabled"
214
- title="Delete"
215
- 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"
216
216
  data-testid="single-step-form-array-item-delete-button"
217
217
  @click.prevent="onDeleteItem(idxRow)"
218
218
  >
219
219
  <span class="icon"> <HeroiconsTrash /> </span>
220
- </button>
220
+ </ac-button>
221
221
 
222
- <button
222
+ <ac-button
223
223
  v-if="isExpandable"
224
- class="button ac-button is-small"
225
- title="Expand"
224
+ modifier-classes="is-small is-light"
226
225
  data-testid="single-step-form-array-item-show-details-button"
227
226
  @click.prevent="onDetailsClick(idxRow)"
228
227
  >
229
228
  <span v-if="expandableFieldIndex === idxRow" class="icon"><HeroiconsChevronUpSolid /></span>
230
229
 
231
230
  <span v-else class="icon"><HeroiconsChevronDownSolid /></span>
232
- </button>
231
+ </ac-button>
233
232
  </div>
234
233
  </td>
235
234
  <!-- Action Button End -->
@@ -242,23 +241,23 @@ function collapseForm() {
242
241
  <accordion :label="`Edit ${label}`" :is-collapsible="false" />
243
242
  <div class="buttons pb-5">
244
243
  <!-- save button start -->
245
- <button
246
- class="button ac-button is-small is-outlined is-light is-primary"
244
+ <ac-button
245
+ modifier-classes="is-small is-primary is-light"
247
246
  :disabled="disabled ? true : false"
248
247
  data-testid="single-step-form-array-item-save-button"
249
248
  @click.prevent="onSaveEditedItem(idxRow)"
250
249
  >
251
250
  <span class="icon"> <FluentSave28Regular /> </span>
252
- </button>
251
+ </ac-button>
253
252
  <!-- save button end -->
254
253
  <!-- close button start -->
255
- <button
256
- class="button ac-button is-small is-outlined is-light is-danger"
254
+ <ac-button
255
+ modifier-classes="is-small is-danger is-light"
257
256
  data-testid="single-step-form-array-item-close-button"
258
257
  @click.prevent="resetAllData()"
259
258
  >
260
259
  <span class="icon"> <HeroiconsXMark20Solid /> </span>
261
- </button>
260
+ </ac-button>
262
261
  <!-- close button end -->
263
262
  </div>
264
263
  </div>