@bagelink/vue 0.0.190 → 0.0.192

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 (30) hide show
  1. package/dist/components/Btn.vue.d.ts +11 -7
  2. package/dist/components/Btn.vue.d.ts.map +1 -1
  3. package/dist/components/ListView.vue.d.ts.map +1 -1
  4. package/dist/components/form/inputs/DatePicker.vue.d.ts +4 -4
  5. package/dist/components/form/inputs/DatePicker.vue.d.ts.map +1 -1
  6. package/dist/components/form/inputs/RadioPillsInput.vue.d.ts +31 -0
  7. package/dist/components/form/inputs/RadioPillsInput.vue.d.ts.map +1 -0
  8. package/dist/components/form/inputs/TextInput.vue.d.ts +5 -0
  9. package/dist/components/form/inputs/TextInput.vue.d.ts.map +1 -1
  10. package/dist/components/form/inputs/index.d.ts +1 -0
  11. package/dist/components/form/inputs/index.d.ts.map +1 -1
  12. package/dist/components/formkit/AddressArray.vue.d.ts.map +1 -1
  13. package/dist/components/formkit/BankDetailsArray.vue.d.ts.map +1 -1
  14. package/dist/components/formkit/ContactArrayFormKit.vue.d.ts.map +1 -1
  15. package/dist/index.cjs +13033 -3563
  16. package/dist/index.mjs +13034 -3564
  17. package/dist/style.css +479 -350
  18. package/package.json +1 -1
  19. package/src/components/Btn.vue +165 -146
  20. package/src/components/ListView.vue +0 -1
  21. package/src/components/PersonPreview.vue +1 -1
  22. package/src/components/form/inputs/DatePicker.vue +96 -80
  23. package/src/components/form/inputs/RadioPillsInput.vue +89 -0
  24. package/src/components/form/inputs/TextInput.vue +53 -11
  25. package/src/components/form/inputs/index.ts +1 -0
  26. package/src/components/formkit/AddressArray.vue +173 -150
  27. package/src/components/formkit/BankDetailsArray.vue +197 -174
  28. package/src/components/formkit/ContactArrayFormKit.vue +140 -123
  29. package/src/styles/layout.css +83 -0
  30. package/src/styles/theme.css +45 -16
package/src/components/formkit/BankDetailsArray.vue CHANGED
@@ -1,124 +1,148 @@
1
1
  <template>
2
- <div class="bagel-input">
3
- <div class="mt-1">
4
- <div
5
- class="bglform-contact mb-3"
6
- v-for="(bank_account, i) in val"
7
- :key="i"
8
- >
9
- <div class="bglform-contact-confirm" v-if="deleteCandidate === i">
10
- <p class="txt14">
11
- {{ formPlaceholders?.sure }}
12
- </p>
13
- <Btn thin color="red" @click="deleteContact(bank_account.id)">
14
- {{ formPlaceholders?.delete }}
15
- </Btn>
16
- <Btn thin @click="deleteCandidate = -1">
17
- {{ formPlaceholders?.cancel }}
18
- </Btn>
19
- </div>
20
- <Checkbox
21
- v-model="bank_account.primary"
22
- @update:model-value="($event) => primaryHandler(i, $event)"
23
- />
24
- <input
25
- class="bglform-contact-label"
26
- v-model="bank_account.label"
27
- type="text"
28
- :placeholder="formPlaceholders?.label"
29
- />
30
- <div class="bglform-contact-address">
31
- <input
32
- v-model="bank_account.bank_name"
33
- :placeholder="formPlaceholders?.bankName"
34
- type="text"
35
- required
36
- />
37
- <div class="bglform-contact-address-flex">
38
- <input
39
- v-model="bank_account.branch"
40
- :placeholder="formPlaceholders?.bankBranch"
41
- type="text"
42
- required
43
- />
44
- <input
45
- v-model="bank_account.account_number"
46
- :placeholder="formPlaceholders?.bankAccount"
47
- type="text"
48
- required
49
- />
50
- </div>
51
- <div class="grid gap-2">
52
- <input
53
- v-model="bank_account.bank_account_holder"
54
- :placeholder="formPlaceholders?.bankAccountHolder"
55
- type="text"
56
- required
57
- />
58
- <input
59
- v-model="bank_account.bank_account_holder_id"
60
- :placeholder="formPlaceholders?.bankAccountHolderID"
61
- type="text"
62
- />
63
- <input v-model="bank_account.iban" placeholder="IBAN" type="text" />
64
- <input
65
- v-model="bank_account.swift"
66
- placeholder="SWIFT"
67
- type="text"
68
- />
69
- <input
70
- v-model="bank_account.bank_address"
71
- :placeholder="formPlaceholders?.bankAddress"
72
- type="text"
73
- />
74
- </div>
75
- </div>
76
- <div class="bglform-address-del">
77
- <Btn thin @click="deleteCandidate = i" icon="delete" color="gray" />
78
- </div>
79
- </div>
80
- <Btn class="add-btn" color="blue" flat thin @click="val.push({})">
81
- {{ formPlaceholders?.add }} {{ context?.label }}
82
- </Btn>
83
- </div>
84
- </div>
2
+ <div class="bagel-input">
3
+ <div class="mt-1">
4
+ <div
5
+ class="bglform-contact mb-3"
6
+ v-for="(bank_account, i) in val"
7
+ :key="i"
8
+ >
9
+ <div
10
+ class="bglform-contact-confirm"
11
+ v-if="deleteCandidate === i"
12
+ >
13
+ <p class="txt14">
14
+ {{ formPlaceholders?.sure }}
15
+ </p>
16
+ <Btn
17
+ thin
18
+ color="red"
19
+ @click="deleteContact(bank_account.id)"
20
+ >
21
+ {{ formPlaceholders?.delete }}
22
+ </Btn>
23
+ <Btn
24
+ thin
25
+ @click="deleteCandidate = -1"
26
+ >
27
+ {{ formPlaceholders?.cancel }}
28
+ </Btn>
29
+ </div>
30
+ <Checkbox
31
+ v-model="bank_account.primary"
32
+ @update:model-value="($event) => primaryHandler(i, $event)"
33
+ />
34
+ <input
35
+ class="bglform-contact-label"
36
+ v-model="bank_account.label"
37
+ type="text"
38
+ :placeholder="formPlaceholders?.label"
39
+ >
40
+ <div class="bglform-contact-address">
41
+ <input
42
+ v-model="bank_account.bank_name"
43
+ :placeholder="formPlaceholders?.bankName"
44
+ type="text"
45
+ required
46
+ >
47
+ <div class="bglform-contact-address-flex">
48
+ <input
49
+ v-model="bank_account.branch"
50
+ :placeholder="formPlaceholders?.bankBranch"
51
+ type="text"
52
+ required
53
+ >
54
+ <input
55
+ v-model="bank_account.account_number"
56
+ :placeholder="formPlaceholders?.bankAccount"
57
+ type="text"
58
+ required
59
+ >
60
+ </div>
61
+ <div class="grid gap-2">
62
+ <input
63
+ v-model="bank_account.bank_account_holder"
64
+ :placeholder="formPlaceholders?.bankAccountHolder"
65
+ type="text"
66
+ required
67
+ >
68
+ <input
69
+ v-model="bank_account.bank_account_holder_id"
70
+ :placeholder="formPlaceholders?.bankAccountHolderID"
71
+ type="text"
72
+ >
73
+ <input
74
+ v-model="bank_account.iban"
75
+ placeholder="IBAN"
76
+ type="text"
77
+ >
78
+ <input
79
+ v-model="bank_account.swift"
80
+ placeholder="SWIFT"
81
+ type="text"
82
+ >
83
+ <input
84
+ v-model="bank_account.bank_address"
85
+ :placeholder="formPlaceholders?.bankAddress"
86
+ type="text"
87
+ >
88
+ </div>
89
+ </div>
90
+ <div class="bglform-address-del">
91
+ <Btn
92
+ thin
93
+ @click="deleteCandidate = i"
94
+ icon="delete"
95
+ color="gray"
96
+ />
97
+ </div>
98
+ </div>
99
+ <Btn
100
+ class="add-btn"
101
+ flat
102
+ thin
103
+ @click="val.push({})"
104
+ >
105
+ {{ formPlaceholders?.add }} {{ context?.label }}
106
+ </Btn>
107
+ </div>
108
+ </div>
85
109
  </template>
86
110
 
87
111
  <script setup lang="ts">
88
- import { watch } from "vue";
112
+ import { watch } from 'vue';
89
113
  // import type { BagelField } from '@bagelink/vue';
90
114
 
91
- import { Btn, useBagel } from "@bagelink/vue";
92
- import Checkbox from "../form/inputs/Checkbox.vue";
115
+ import { Btn, useBagel } from '@bagelink/vue';
116
+ import Checkbox from '../form/inputs/Checkbox.vue';
93
117
 
94
118
  export interface BankDetailsContext {
95
- label?: string;
96
- id?: string;
97
- value: any[];
98
- node: Record<string, any>;
99
- attrs: {
100
- formPlaceholders?: {
101
- sure?: string;
102
- delete?: string;
103
- cancel?: string;
104
- label?: string;
105
- bankName?: string;
106
- bankBranch?: string;
107
- bankAccount?: string;
108
- bankAccountHolder?: string;
109
- bankAccountHolderID?: string;
110
- bankAddress?: string;
111
- add?: string;
112
- };
113
- };
119
+ label?: string;
120
+ id?: string;
121
+ value: any[];
122
+ node: Record<string, any>;
123
+ attrs: {
124
+ formPlaceholders?: {
125
+ sure?: string;
126
+ delete?: string;
127
+ cancel?: string;
128
+ label?: string;
129
+ bankName?: string;
130
+ bankBranch?: string;
131
+ bankAccount?: string;
132
+ bankAccountHolder?: string;
133
+ bankAccountHolderID?: string;
134
+ bankAddress?: string;
135
+ add?: string;
136
+ };
137
+ };
114
138
  }
115
139
  const bagel = useBagel();
116
140
 
117
141
  const props = defineProps<{
118
- context: BankDetailsContext;
142
+ context: BankDetailsContext;
119
143
  }>();
120
144
  const formPlaceholders = $computed(
121
- () => props.context?.attrs?.formPlaceholders
145
+ () => props.context?.attrs?.formPlaceholders,
122
146
  );
123
147
 
124
148
  let val = $ref<any[]>([]);
@@ -126,125 +150,124 @@ let val = $ref<any[]>([]);
126
150
  let deleteCandidate = $ref<number>(-1);
127
151
 
128
152
  const del = (i: number) => {
129
- val.splice(i, 1);
153
+ val.splice(i, 1);
130
154
  };
131
155
 
132
156
  const deleteContact = async (id: string) => {
133
- await bagel.delete(`/person/contact/${id}`);
134
- const index = val.findIndex((v) => v.id === id);
135
- deleteCandidate = -1;
136
- del(index);
157
+ await bagel.delete(`/person/contact/${id}`);
158
+ const index = val.findIndex((v) => v.id === id);
159
+ deleteCandidate = -1;
160
+ del(index);
137
161
  };
138
162
 
139
163
  const primaryHandler = (i: number, isPrimary: boolean) => {
140
- if (!isPrimary) return;
141
- val?.forEach((contact, index) => {
142
- if (index !== i) contact.primary = false;
143
- });
164
+ if (!isPrimary) return;
165
+ val?.forEach((contact, index) => {
166
+ if (index !== i) contact.primary = false;
167
+ });
144
168
  };
145
169
 
146
170
  watch(
147
- () => props.context?.value,
148
- () => {
149
- val = props.context?.value;
150
- },
151
- { immediate: true }
171
+ () => props.context?.value,
172
+ () => {
173
+ val = props.context?.value;
174
+ },
175
+ { immediate: true },
152
176
  );
153
177
 
154
178
  watch(
155
- () => val,
156
- () => {
157
- props.context?.node.input(val);
158
- }
179
+ () => val,
180
+ () => {
181
+ props.context?.node.input(val);
182
+ },
159
183
  );
160
184
  </script>
161
185
 
162
186
  <style>
163
187
  .bglform-contact-confirm {
164
- position: absolute;
165
- background: rgba(255, 255, 255, 0.5);
166
- height: 100%;
167
- width: 100%;
168
- display: flex;
169
- align-items: center;
170
- justify-content: center;
171
- gap: 0.5rem;
172
- backdrop-filter: blur(1px);
188
+ position: absolute;
189
+ background: rgba(255, 255, 255, 0.5);
190
+ height: 100%;
191
+ width: 100%;
192
+ display: flex;
193
+ align-items: center;
194
+ justify-content: center;
195
+ gap: 0.5rem;
196
+ backdrop-filter: blur(1px);
173
197
  }
174
198
  </style>
175
199
  <style scoped>
176
200
  .bglform-contact {
177
- display: flex;
178
- gap: 0.5rem;
179
- max-width: 700px;
180
- position: relative;
201
+ display: flex;
202
+ gap: 0.5rem;
203
+ max-width: 700px;
204
+ position: relative;
181
205
  }
182
206
 
183
207
  .bglform-contact-label {
184
- flex-basis: 140px;
208
+ flex-basis: 140px;
185
209
  }
186
210
 
187
211
  .bglform-contact-address {
188
- display: flex;
189
- flex-direction: column;
190
- gap: 0.5rem;
212
+ display: flex;
213
+ flex-direction: column;
214
+ gap: 0.5rem;
191
215
  }
192
216
 
193
217
  .bglform-contact input[type="checkbox"] {
194
- width: 30px;
195
- min-width: 0;
218
+ width: 30px;
219
+ min-width: 0;
196
220
  }
197
221
 
198
222
  .light.thin.btn-txt.btn {
199
- padding-left: calc(var(--btn-padding) / 4);
200
- padding-right: calc(var(--btn-padding) / 4);
223
+ padding-left: calc(var(--btn-padding) / 4);
224
+ padding-right: calc(var(--btn-padding) / 4);
201
225
  }
202
226
 
203
227
  .bglform-address-del {
204
- margin-top: 6px;
228
+ margin-top: 6px;
205
229
  }
206
230
 
207
231
  .bglform-contact-address-flex {
208
- display: flex;
209
- gap: 0.5rem;
232
+ display: flex;
233
+ gap: 0.5rem;
210
234
  }
211
235
 
212
236
  .add-btn {
213
- display: flex;
214
- gap: 0.5rem;
215
- align-items: center;
216
- margin-inline-start: 1rem;
237
+ display: flex;
238
+ gap: 0.5rem;
239
+ align-items: center;
240
+ margin-inline-start: 1rem;
217
241
  }
218
242
 
219
243
  .add-btn:active {
220
- background: none !important;
244
+ background: none !important;
221
245
  }
222
246
 
223
247
  .add-btn::before {
224
- content: "+";
225
- font-size: 10px;
226
- background: var(--bgl-blue-light);
227
- border-radius: 100%;
228
- height: 14px;
229
- width: 14px;
230
- display: flex;
231
- align-items: center;
232
- justify-content: center;
233
- color: var(--bgl-primary);
248
+ content: "+";
249
+ font-size: 10px;
250
+ background: var(--bgl-blue-light);
251
+ border-radius: 100%;
252
+ height: 14px;
253
+ width: 14px;
254
+ display: flex;
255
+ align-items: center;
256
+ justify-content: center;
257
+ color: var(--bgl-primary);
234
258
  }
235
259
 
236
260
  .add-btn:hover::before {
237
- background: var(--bgl-primary);
238
- color: var(--bgl-white);
261
+ background: var(--bgl-primary);
262
+ color: var(--bgl-white);
239
263
  }
240
264
 
241
265
  @media screen and (max-width: 910px) {
242
- .bglform-contact-address-flex {
243
- flex-wrap: wrap;
244
- }
266
+ .bglform-contact-address-flex {
267
+ flex-wrap: wrap;
268
+ }
245
269
 
246
- .bglform-contact-label {
247
- min-width: 0;
248
- }
249
- }
250
- </style>
270
+ .bglform-contact-label {
271
+ min-width: 0;
272
+ }
273
+ }</style>