@bagelink/vue 0.0.168 → 0.0.172

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 (29) hide show
  1. package/dist/components/DataPreview.vue.d.ts +3 -19
  2. package/dist/components/DataPreview.vue.d.ts.map +1 -1
  3. package/dist/components/FormSchema.vue.d.ts +3 -19
  4. package/dist/components/FormSchema.vue.d.ts.map +1 -1
  5. package/dist/components/PersonPreview.vue.d.ts +1 -1
  6. package/dist/components/PersonPreview.vue.d.ts.map +1 -1
  7. package/dist/components/formkit/FileUploader.vue.d.ts +5 -0
  8. package/dist/components/formkit/FileUploader.vue.d.ts.map +1 -1
  9. package/dist/components/formkit/index.d.ts +10 -8
  10. package/dist/components/formkit/index.d.ts.map +1 -1
  11. package/dist/components/index.d.ts +0 -1
  12. package/dist/components/index.d.ts.map +1 -1
  13. package/dist/index.cjs +221 -363
  14. package/dist/index.d.ts +1 -1
  15. package/dist/index.d.ts.map +1 -1
  16. package/dist/index.mjs +221 -363
  17. package/dist/plugins/bagel.d.ts +3 -0
  18. package/dist/plugins/bagel.d.ts.map +1 -1
  19. package/dist/style.css +140 -273
  20. package/package.json +1 -1
  21. package/src/components/DataPreview.vue +5 -6
  22. package/src/components/FormSchema.vue +7 -10
  23. package/src/components/PersonPreview.vue +147 -123
  24. package/src/components/formkit/FileUploader.vue +267 -254
  25. package/src/components/formkit/index.ts +10 -10
  26. package/src/components/index.ts +0 -1
  27. package/src/index.ts +1 -1
  28. package/src/plugins/bagel.ts +17 -1
  29. package/src/components/FileUploader.vue +0 -353
package/src/components/PersonPreview.vue CHANGED
@@ -1,175 +1,199 @@
1
1
  <template>
2
- <div @click="onClick" class="person-card" v-if="person">
3
- <div class="person-card-edit flex gap-2" v-if="!onClick">
4
- <Btn
5
- round
6
- thin
7
- icon.end="arrow_outward"
8
- value="Profile"
9
- v-if="!$route.path.match('/search')"
10
- is="router-link"
11
- :to="`/search/${person.id}`"
12
- />
13
- <Btn thin flat @click="showEditForm" icon="edit" />
14
- </div>
15
- <div class="person-card-icon-wrap">
16
- <p class="person-card-icon">
17
- {{ initials(person.first_name, person.last_name) }}
18
- </p>
19
- <p class="person-card-name txt20">
20
- {{ person.first_name }} {{ person.last_name }}
21
- </p>
22
- </div>
23
-
24
- <div class="person-card-details-wrap">
25
- <div class="person-card-details" v-if="person.phone?.length">
26
- <MaterialIcon icon="phone" />
27
- <p v-for="phone in person.phone" :key="phone.id">
28
- {{ phone.phone }}
29
- </p>
30
- </div>
31
- <div class="person-card-details" v-if="person.email?.length">
32
- <MaterialIcon icon="email" />
33
- <p v-for="email in person.email" :key="email.id">
34
- {{ email.email }}
35
- </p>
36
- </div>
37
- <div
38
- class="person-card-details badge"
39
- v-if="person.date_of_birth || person.gender"
40
- >
41
- <MaterialIcon icon="badge" />
42
- <p v-if="person.date_of_birth">
43
- {{ person.date_of_birth }}
44
- </p>
45
- <p v-if="person.gender">
46
- {{ person.gender }}
47
- </p>
48
- </div>
49
- </div>
50
- </div>
2
+ <div
3
+ @click="onClick"
4
+ class="person-card"
5
+ v-if="person"
6
+ >
7
+ <div
8
+ class="person-card-edit flex gap-2"
9
+ v-if="!onClick"
10
+ >
11
+ <Btn
12
+ round
13
+ thin
14
+ icon.end="arrow_outward"
15
+ value="Profile"
16
+ v-if="!$route.path.match('/search')"
17
+ is="router-link"
18
+ :to="`/search/${person.id}`"
19
+ />
20
+ <Btn
21
+ thin
22
+ flat
23
+ @click="showEditForm"
24
+ icon="edit"
25
+ />
26
+ </div>
27
+ <div class="person-card-icon-wrap">
28
+ <p class="person-card-icon">
29
+ {{ initials(person.first_name, person.last_name) }}
30
+ </p>
31
+ <p class="person-card-name txt20">
32
+ {{ person.first_name }} {{ person.last_name }}
33
+ </p>
34
+ </div>
35
+
36
+ <div class="person-card-details-wrap">
37
+ <div
38
+ class="person-card-details"
39
+ v-if="person.phone?.length"
40
+ >
41
+ <MaterialIcon icon="phone" />
42
+ <p
43
+ v-for="phone in person.phone"
44
+ :key="phone.id"
45
+ >
46
+ {{ phone.phone }}
47
+ </p>
48
+ </div>
49
+ <div
50
+ class="person-card-details"
51
+ v-if="person.email?.length"
52
+ >
53
+ <MaterialIcon icon="email" />
54
+ <p
55
+ v-for="email in person.email"
56
+ :key="email.id"
57
+ >
58
+ {{ email.email }}
59
+ </p>
60
+ </div>
61
+ <div
62
+ class="person-card-details badge"
63
+ v-if="person.date_of_birth || person.gender"
64
+ >
65
+ <MaterialIcon icon="badge" />
66
+ <p v-if="person.date_of_birth">
67
+ {{ person.date_of_birth }}
68
+ </p>
69
+ <p v-if="person.gender">
70
+ {{ person.gender }}
71
+ </p>
72
+ </div>
73
+ </div>
74
+ </div>
51
75
  </template>
52
76
 
53
77
  <script lang="ts" setup>
54
- import type { FormKitSchemaDefinition } from "@formkit/core";
55
- import type { Person } from "@bagelink/vue";
56
- import { initials, Btn, MaterialIcon } from "@bagelink/vue";
57
- import { useBagel, useModal } from "..";
78
+ import type { FormKitSchemaDefinition } from '@formkit/core';
79
+ import type { Person } from '@bagelink/vue';
80
+ import { initials, Btn, MaterialIcon } from '@bagelink/vue';
81
+ import { useBagel, useModal } from '..';
58
82
 
59
83
  // const toast = useToast(); // TODO: use toast
60
84
  const bagel = useBagel();
61
85
  const { modalForm } = useModal();
62
86
 
63
87
  const props = defineProps<{
64
- person: Person;
65
- // eslint-disable-next-line no-unused-vars
66
- onClick?: (event: MouseEvent) => void;
67
- personSchema: () => FormKitSchemaDefinition;
88
+ person: Person;
89
+ // eslint-disable-next-line no-unused-vars
90
+ onClick?: (event: MouseEvent) => void;
91
+ personSchema: () => FormKitSchemaDefinition;
68
92
  }>();
69
93
 
70
94
  const showEditForm = async () => {
71
- const { first_name, last_name } = props.person;
72
- modalForm({
73
- side: true,
74
- title: `${first_name} ${last_name}`,
75
- schema: props.personSchema(),
76
- modelValue: props.person,
77
- onSubmit: (newPerson) => bagel.put("/person", newPerson),
78
- // .then(() => toast.success(i18nT('updatedSuccessfully'))),
79
- });
95
+ const { first_name, last_name } = props.person;
96
+ modalForm({
97
+ side: true,
98
+ title: `${first_name} ${last_name}`,
99
+ schema: props.personSchema(),
100
+ modelValue: props.person,
101
+ onSubmit: (newPerson) => bagel.put('/person', newPerson),
102
+ // .then(() => toast.success(i18nT('updatedSuccessfully'))),
103
+ });
80
104
  };
81
105
  </script>
82
106
  <style>
83
107
  .person-card {
84
- border: 1.1px solid var(--border-color);
85
- /* background: var(--input-bg); */
86
- border-radius: var(--card-border-radius);
87
- padding: 1rem;
88
- margin-bottom: 0.5rem;
89
- font-size: 1rem;
90
- position: relative;
108
+ border: 1.1px solid var(--border-color);
109
+ /* background: var(--input-bg); */
110
+ border-radius: var(--card-border-radius);
111
+ padding: 1rem;
112
+ margin-bottom: 0.5rem;
113
+ font-size: 1rem;
114
+ position: relative;
91
115
  }
92
116
 
93
117
  .person-card p {
94
- margin: 0;
118
+ margin: 0;
95
119
  }
96
120
 
97
121
  .person-card-details {
98
- font-size: 14px;
99
- margin-bottom: 2px;
100
- line-height: 1.3;
101
- display: flex;
122
+ font-size: 14px;
123
+ margin-bottom: 2px;
124
+ line-height: 1.3;
125
+ display: flex;
102
126
  }
103
127
 
104
128
  .person-card-details p {
105
- color: var(--input-color);
106
- opacity: 0.6;
129
+ color: var(--input-color);
130
+ opacity: 0.6;
107
131
  }
108
132
 
109
133
  .person-card-details.badge p {
110
- opacity: 1;
134
+ opacity: 1;
111
135
  }
112
136
 
113
137
  .person-card-details p:nth-child(2) {
114
- opacity: 1;
115
- padding-inline-end: 0.5rem;
138
+ opacity: 1;
139
+ padding-inline-end: 0.5rem;
116
140
  }
117
141
 
118
142
  .person-card-details .icon-font {
119
- color: var(--bgl-primary);
120
- padding-inline-end: 0.25rem;
143
+ color: var(--bgl-primary);
144
+ padding-inline-end: 0.25rem;
121
145
  }
122
146
 
123
147
  .person-card-edit {
124
- position: absolute;
125
- inset-inline-end: 1rem;
148
+ position: absolute;
149
+ inset-inline-end: 1rem;
126
150
  }
127
151
 
128
152
  .person-card-details-wrap {
129
- display: flex;
130
- gap: 0.5rem;
131
- flex-wrap: wrap;
153
+ display: flex;
154
+ gap: 0.5rem;
155
+ flex-wrap: wrap;
132
156
  }
133
157
 
134
158
  .person-card-icon {
135
- background: var(--bgl-gray);
136
- height: 30px;
137
- width: 30px;
138
- border-radius: 100%;
139
- text-transform: uppercase;
140
- display: flex;
141
- justify-content: center;
142
- align-items: center;
143
- color: white;
144
- font-size: 12px;
159
+ background: var(--bgl-gray);
160
+ height: 30px;
161
+ width: 30px;
162
+ border-radius: 100%;
163
+ text-transform: uppercase;
164
+ display: flex;
165
+ justify-content: center;
166
+ align-items: center;
167
+ color: white;
168
+ font-size: 12px;
145
169
  }
146
170
 
147
171
  .person-card-icon-wrap {
148
- display: flex;
149
- gap: 0.5rem;
150
- align-items: center;
151
- padding-bottom: 0.75rem;
172
+ display: flex;
173
+ gap: 0.5rem;
174
+ align-items: center;
175
+ padding-bottom: 0.75rem;
152
176
  }
153
177
 
154
178
  @media screen and (max-width: 910px) {
155
- .person-card-icon-wrap {
156
- padding-bottom: 0.5rem;
157
- }
158
-
159
- .person-card {
160
- padding: 0.75rem;
161
- position: relative;
162
- }
163
-
164
- .person-card-edit {
165
- /* position: relative; */
166
- inset-inline-end: 0.5rem;
167
- margin-bottom: 1rem;
168
- justify-content: flex-end;
169
- }
170
-
171
- .person-card-name {
172
- max-width: calc(100% - 170px);
173
- }
179
+ .person-card-icon-wrap {
180
+ padding-bottom: 0.5rem;
181
+ }
182
+
183
+ .person-card {
184
+ padding: 0.75rem;
185
+ position: relative;
186
+ }
187
+
188
+ .person-card-edit {
189
+ /* position: relative; */
190
+ inset-inline-end: 0.5rem;
191
+ margin-bottom: 1rem;
192
+ justify-content: flex-end;
193
+ }
194
+
195
+ .person-card-name {
196
+ max-width: calc(100% - 170px);
197
+ }
174
198
  }
175
199
  </style>