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