@bagelink/vue 0.0.941 → 0.0.947

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 (12) hide show
  1. package/dist/components/TableSchema.vue.d.ts.map +1 -1
  2. package/dist/components/form/inputs/FileUpload.vue.d.ts +2 -0
  3. package/dist/components/form/inputs/FileUpload.vue.d.ts.map +1 -1
  4. package/dist/components/form/inputs/SignaturePad.vue.d.ts.map +1 -1
  5. package/dist/index.cjs +61 -44
  6. package/dist/index.mjs +61 -44
  7. package/dist/style.css +227 -226
  8. package/package.json +5 -5
  9. package/src/components/TableSchema.vue +9 -2
  10. package/src/components/form/inputs/FileUpload.vue +13 -10
  11. package/src/components/form/inputs/SignaturePad.vue +0 -10
  12. package/src/styles/inputs.css +149 -144
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.941",
4
+ "version": "0.0.947",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
@@ -51,7 +51,7 @@
51
51
  "./vite.config.ts"
52
52
  ],
53
53
  "devDependencies": {
54
- "@types/leaflet": "^1.9.14",
54
+ "@types/leaflet": "^1.9.15",
55
55
  "@types/signature_pad": "^2.3.6",
56
56
  "@vue-macros/reactivity-transform": "^1.1.3",
57
57
  "vue": "^3.5.13"
@@ -116,11 +116,11 @@
116
116
  "@tiptap/vue-3": "^2.10.3",
117
117
  "@vuepic/vue-datepicker": "^8.8.1",
118
118
  "@vueuse/core": "^12.0.0",
119
- "axios": "^1.7.8",
119
+ "axios": "^1.7.9",
120
120
  "floating-vue": "^5.2.2",
121
- "libphonenumber-js": "1.11.15",
121
+ "libphonenumber-js": "1.11.16",
122
122
  "signature_pad": "^5.0.4",
123
- "type-fest": "^4.29.0"
123
+ "type-fest": "^4.30.0"
124
124
  },
125
125
  "scripts": {
126
126
  "dev": "tsx watch src/index.ts",
package/src/components/TableSchema.vue CHANGED
@@ -198,12 +198,19 @@ async function registerLastItemObserver() {
198
198
  if (entry.isIntersecting && computedData.value.length) {
199
199
  void onLastItemVisible?.()
200
200
  }
201
- })
202
- }
201
+ }, { threshold: 0.5 }) }
203
202
 
204
203
  onMounted(() => {
205
204
  void registerLastItemObserver()
206
205
  })
206
+
207
+ watch(
208
+ () => loading.value,
209
+ (newLoadingVal, oldLoadingVal) => {
210
+ if (newLoadingVal === oldLoadingVal) return
211
+ if (!newLoadingVal) registerLastItemObserver()
212
+ }
213
+ )
207
214
  </script>
208
215
 
209
216
  <template>
package/src/components/form/inputs/FileUpload.vue CHANGED
@@ -19,6 +19,7 @@ const props = defineProps<{
19
19
  oval?: boolean
20
20
  theme?: 'dropzone' | 'basic'
21
21
  accept?: string
22
+ required?: boolean
22
23
  }>()
23
24
 
24
25
  const emit = defineEmits(['update:modelValue', 'addFileStart'])
@@ -93,13 +94,17 @@ watch(
93
94
 
94
95
  const theme = props.theme || 'dropzone'
95
96
 
96
- watch(() => props.modelValue, () => {
97
- const newModelValue: FSValue = props.modelValue || []
98
- const currentValue = [file_bindkeys].flat()
99
- const newValue = [newModelValue].flat()
100
- const isSame = currentValue.every(id => newValue.includes(id)) && newValue.every(id => currentValue.includes(id)) && currentValue.length === newValue.length
97
+ function compareLists(a: any, b: any) {
98
+ return [a]
99
+ .flat()
100
+ .every((id: any) => [b].flat().includes(id)) && [b].flat().every(id => [a].flat().includes(id))
101
+ }
102
+
103
+ watch(() => props.modelValue, (newVal: FSValue = []) => {
104
+ console.log(newVal)
105
+ const isSame = compareLists(file_bindkeys, newVal)
101
106
  if (!isSame) {
102
- file_bindkeys = newModelValue
107
+ file_bindkeys = newVal
103
108
  for (const fle of storageFiles) {
104
109
  const index = [file_bindkeys].flat().findIndex(key => fle[bindKey] === key)
105
110
  if (index === -1) storageFiles.splice(index, 1)
@@ -114,9 +119,7 @@ function updateModelValue() {
114
119
  } else {
115
120
  idValue = (storageFiles[0][bindKey] as string) || ''
116
121
  }
117
- const isSame = [idValue]
118
- .flat()
119
- .every(id => [file_bindkeys].flat().includes(id)) && [file_bindkeys].flat().every(id => [idValue].flat().includes(id))
122
+ const isSame = compareLists(file_bindkeys, idValue)
120
123
  if (!isSame) {
121
124
  file_bindkeys = idValue
122
125
  emit('update:modelValue', file_bindkeys)
@@ -201,7 +204,7 @@ function drop(e: DragEvent) {
201
204
  <label>
202
205
  {{ label }}
203
206
  </label>
204
-
207
+ <input v-if="required" placeholder="required" type="text" required class="pixel">
205
208
  <Card
206
209
  v-if="theme === 'basic'" outline class="flex p-05 gap-1" @dragover="dragover"
207
210
  @drop="drop"
package/src/components/form/inputs/SignaturePad.vue CHANGED
@@ -164,16 +164,6 @@ defineExpose({
164
164
  height: 100%;
165
165
  }
166
166
 
167
- .pixel {
168
- width: 0;
169
- height: 0;
170
- overflow: hidden;
171
- outline: none;
172
- position: absolute;
173
- bottom: 0;
174
- left: 50%;
175
- }
176
-
177
167
  .bgl_input.signature-pad {
178
168
  background: var(--input-bg);
179
169
  border: none;
package/src/styles/inputs.css CHANGED
@@ -1,240 +1,234 @@
1
1
  input,
2
2
  textarea,
3
3
  select {
4
- font-family: inherit;
5
- width: 100%;
4
+ font-family: inherit;
5
+ width: 100%;
6
6
  }
7
7
 
8
-
9
8
  .bagel-input-error input,
10
9
  .bagel-input-error button,
11
10
  .bagel-input-error textarea {
12
- outline: 1px solid var(--bgl-red);
11
+ outline: 1px solid var(--bgl-red);
13
12
  }
14
13
 
15
14
  .bagel-input {
16
- position: relative;
17
- display: flex;
18
- flex-direction: column;
19
- text-align: start;
20
- margin-bottom: 0.5rem;
21
- width: 100%;
22
- color: var(--bgl-text-color);
15
+ position: relative;
16
+ display: flex;
17
+ flex-direction: column;
18
+ text-align: start;
19
+ margin-bottom: 0.5rem;
20
+ width: 100%;
21
+ color: var(--bgl-text-color);
23
22
  }
24
23
 
25
24
  .bagel-input::-webkit-input-placeholder .bagel-input label {
26
- display: block;
27
- font-size: var(--label-font-size);
28
- margin-bottom: 2px;
29
- line-height: 1.3;
25
+ display: block;
26
+ font-size: var(--label-font-size);
27
+ margin-bottom: 2px;
28
+ line-height: 1.3;
30
29
  }
31
30
 
32
31
  .bagel-input::-moz-placeholder .bagel-input label {
33
- display: block;
34
- font-size: var(--label-font-size);
35
- margin-bottom: 2px;
36
- line-height: 1.3;
32
+ display: block;
33
+ font-size: var(--label-font-size);
34
+ margin-bottom: 2px;
35
+ line-height: 1.3;
37
36
  }
38
37
 
39
38
  .bagel-input:-ms-input-placeholder .bagel-input label {
40
- display: block;
41
- font-size: var(--label-font-size);
42
- margin-bottom: 2px;
43
- line-height: 1.3;
39
+ display: block;
40
+ font-size: var(--label-font-size);
41
+ margin-bottom: 2px;
42
+ line-height: 1.3;
44
43
  }
45
44
 
46
45
  .bagel-input::-ms-input-placeholder .bagel-input label {
47
- display: block;
48
- font-size: var(--label-font-size);
49
- margin-bottom: 2px;
50
- line-height: 1.3;
46
+ display: block;
47
+ font-size: var(--label-font-size);
48
+ margin-bottom: 2px;
49
+ line-height: 1.3;
51
50
  }
52
51
 
53
52
  .bagel-input::placeholder .bagel-input label {
54
- display: block;
55
- font-size: var(--label-font-size);
56
- margin-bottom: 2px;
57
- line-height: 1.3;
53
+ display: block;
54
+ font-size: var(--label-font-size);
55
+ margin-bottom: 2px;
56
+ line-height: 1.3;
58
57
  }
59
58
 
60
59
  .bagel-input::-webkit-input-placeholder {
61
- color: var(--placeholder-color);
60
+ color: var(--placeholder-color);
62
61
  }
63
62
 
64
63
  .bagel-input::-moz-placeholder {
65
- color: var(--placeholder-color);
64
+ color: var(--placeholder-color);
66
65
  }
67
66
 
68
67
  .bagel-input:-ms-input-placeholder {
69
- color: var(--placeholder-color);
68
+ color: var(--placeholder-color);
70
69
  }
71
70
 
72
71
  .bagel-input::-ms-input-placeholder {
73
- color: var(--placeholder-color);
72
+ color: var(--placeholder-color);
74
73
  }
75
74
 
76
75
  .bagel-input::placeholder {
77
- color: var(--placeholder-color);
76
+ color: var(--placeholder-color);
78
77
  }
79
78
 
80
79
  .bagel-input label {
81
- color: var(--label-color);
80
+ color: var(--label-color);
82
81
  }
83
82
 
84
83
  .bagel-input input,
85
84
  .bagel-input select,
86
85
  .custom-select .input {
87
- height: var(--input-height);
88
- font-size: var(--input-font-size);
86
+ height: var(--input-height);
87
+ font-size: var(--input-font-size);
89
88
  }
90
89
 
91
90
  .bagel-input input,
92
91
  .bagel-input textarea,
93
92
  .bagel-input select,
94
93
  .custom-select .input {
95
- background: var(--input-bg);
96
- border: none;
97
- padding: 0.7rem;
98
- border-radius: var(--input-border-radius);
99
- color: var(--input-color);
100
- min-width: calc(var(--input-height) * 3);
101
- width: 100%;
94
+ background: var(--input-bg);
95
+ border: none;
96
+ padding: 0.7rem;
97
+ border-radius: var(--input-border-radius);
98
+ color: var(--input-color);
99
+ min-width: calc(var(--input-height) * 3);
100
+ width: 100%;
102
101
  }
103
102
 
104
-
105
103
  .bagel-input input::-webkit-input-placeholder,
106
104
  .bagel-input textarea::-webkit-input-placeholder,
107
105
  .bagel-input select::-webkit-input-placeholder,
108
106
  .custom-select .input::-webkit-input-placeholder {
109
- color: var(--placeholder-color);
107
+ color: var(--placeholder-color);
110
108
  }
111
109
 
112
-
113
110
  .bagel-input input::-moz-placeholder,
114
111
  .bagel-input textarea::-moz-placeholder,
115
112
  .bagel-input select::-moz-placeholder,
116
113
  .custom-select .input::-moz-placeholder {
117
- color: var(--placeholder-color);
114
+ color: var(--placeholder-color);
118
115
  }
119
116
 
120
-
121
117
  .bagel-input input:-ms-input-placeholder,
122
118
  .bagel-input textarea:-ms-input-placeholder,
123
119
  .bagel-input select:-ms-input-placeholder,
124
120
  .custom-select .input:-ms-input-placeholder {
125
- color: var(--placeholder-color);
121
+ color: var(--placeholder-color);
126
122
  }
127
123
 
128
-
129
124
  .bagel-input input::-ms-input-placeholder,
130
125
  .bagel-input textarea::-ms-input-placeholder,
131
126
  .bagel-input select::-ms-input-placeholder,
132
127
  .custom-select .input::-ms-input-placeholder {
133
- color: var(--placeholder-color);
128
+ color: var(--placeholder-color);
134
129
  }
135
130
 
136
-
137
131
  .bagel-input input::placeholder,
138
132
  .bagel-input textarea::placeholder,
139
133
  .bagel-input select::placeholder,
140
134
  .custom-select .input::placeholder {
141
- color: var(--placeholder-color);
135
+ color: var(--placeholder-color);
142
136
  }
143
137
 
144
138
  .bagel-input.search-wrap {
145
- display: flex;
146
- flex-direction: row;
147
- align-items: center;
139
+ display: flex;
140
+ flex-direction: row;
141
+ align-items: center;
148
142
  }
149
143
 
150
144
  .bagel-input.search-wrap input {
151
- -webkit-padding-end: 2rem;
152
- padding-inline-end: 2rem;
145
+ -webkit-padding-end: 2rem;
146
+ padding-inline-end: 2rem;
153
147
  }
154
148
 
155
149
  .bagel-input.search-wrap .bgl_icon-font {
156
- -webkit-margin-start: -1.75rem;
157
- margin-inline-start: -1.75rem;
150
+ -webkit-margin-start: -1.75rem;
151
+ margin-inline-start: -1.75rem;
158
152
  }
159
153
 
160
154
  .bagel-input select {
161
- height: var(--input-height);
155
+ height: var(--input-height);
162
156
  }
163
157
 
164
158
  .bagel-input textarea {
165
- resize: vertical;
166
- min-height: calc(var(--input-height) * 3);
167
- line-height: 1.5;
159
+ resize: vertical;
160
+ min-height: calc(var(--input-height) * 3);
161
+ line-height: 1.5;
168
162
  }
169
163
 
170
164
  .bagel-input.wider input {
171
- min-width: 320px;
165
+ min-width: 320px;
172
166
  }
173
167
 
174
- .bagel-input input[type="radio"] {
175
- padding: 0;
176
- width: -webkit-fit-content;
177
- width: -moz-fit-content;
178
- width: fit-content;
168
+ .bagel-input input[type='radio'] {
169
+ padding: 0;
170
+ width: -webkit-fit-content;
171
+ width: -moz-fit-content;
172
+ width: fit-content;
179
173
  }
180
174
 
181
175
  .bagel-input:focus-within label {
182
- color: var(--bgl-primary);
176
+ color: var(--bgl-primary);
183
177
  }
184
178
 
185
179
  .bagel-input select.no-edit,
186
180
  .bagel-input input.no-edit,
187
181
  .bagel-input textarea.no-edit,
188
182
  .bagel-input .switch.no-edit {
189
- pointer-events: none;
190
- outline: none;
191
- opacity: .7;
183
+ pointer-events: none;
184
+ outline: none;
185
+ opacity: 0.7;
192
186
  }
193
187
 
194
188
  .bagel-input label.active {
195
- color: var(--bgl-primary);
189
+ color: var(--bgl-primary);
196
190
  }
197
191
 
198
192
  .inline-80 {
199
- display: inline-block;
200
- width: 80%;
193
+ display: inline-block;
194
+ width: 80%;
201
195
  }
202
196
 
203
197
  .inline-20 {
204
- display: inline-block;
205
- width: 20%;
198
+ display: inline-block;
199
+ width: 20%;
206
200
  }
207
201
 
208
202
  .inline-10 {
209
- display: inline-block;
210
- width: 20%;
203
+ display: inline-block;
204
+ width: 20%;
211
205
  }
212
206
 
213
207
  .inline-50 {
214
- display: inline-block;
215
- width: 49%;
216
- margin: 0 0.5%;
208
+ display: inline-block;
209
+ width: 49%;
210
+ margin: 0 0.5%;
217
211
  }
218
212
 
219
213
  .custom-select .input {
220
- height: var(--input-height);
221
- font-size: var(--input-font-size);
214
+ height: var(--input-height);
215
+ font-size: var(--input-font-size);
222
216
  }
223
217
 
224
218
  .custom-select .input {
225
- background: var(--input-bg);
226
- border: none;
227
- padding: 0.7rem;
228
- border-radius: var(--input-border-radius);
229
- color: var(--input-color);
230
- min-width: calc(var(--input-height) * 3);
231
- width: 100%;
219
+ background: var(--input-bg);
220
+ border: none;
221
+ padding: 0.7rem;
222
+ border-radius: var(--input-border-radius);
223
+ color: var(--input-color);
224
+ min-width: calc(var(--input-height) * 3);
225
+ width: 100%;
232
226
  }
233
227
 
234
- [dir='rtl'] .bagel-input input[type="email"],
235
- [dir='rtl'] .tel-input input[type="tel"] {
236
- direction: ltr;
237
- text-align: right;
228
+ [dir='rtl'] .bagel-input input[type='email'],
229
+ [dir='rtl'] .tel-input input[type='tel'] {
230
+ direction: ltr;
231
+ text-align: right;
238
232
  }
239
233
 
240
234
  .input.active .bagel-input input:focus-visible,
@@ -242,8 +236,8 @@ select {
242
236
  .bagel-input textarea:focus-visible,
243
237
  .bagel-input button:focus-visible,
244
238
  .bgl_btn:focus-visible {
245
- outline-color: var(--bgl-primary-tint);
246
- box-shadow: inset 0 0 10px #00000012;
239
+ outline-color: var(--bgl-primary-tint);
240
+ box-shadow: inset 0 0 10px #00000012;
247
241
  }
248
242
 
249
243
  .bagel-input input:focus,
@@ -251,10 +245,9 @@ select {
251
245
  .bagel-input textarea:focus,
252
246
  .bagel-input .bgl_btn:focus,
253
247
  .bagel-input button:focus {
254
- outline-color: rgba(0, 0, 0, 0.05);
255
- box-shadow: inset 0 0 10px #00000021;
256
- outline-color: var(--input-bg);
257
-
248
+ outline-color: rgba(0, 0, 0, 0.05);
249
+ box-shadow: inset 0 0 10px #00000021;
250
+ outline-color: var(--input-bg);
258
251
  }
259
252
 
260
253
  .bagel-input.light-input input,
@@ -262,71 +255,83 @@ select {
262
255
  .bagel-input.light-input select,
263
256
  .custom-select.light-input .input,
264
257
  .light-input .selectinput-btn {
265
- background: var(--bgl-popup-bg) !important;
266
- box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
267
- outline: 1px solid var(--border-color) !important;
258
+ background: var(--bgl-popup-bg) !important;
259
+ box-shadow:
260
+ 0 1px 5px 0 rgba(0, 0, 0, 0.1),
261
+ 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
262
+ outline: 1px solid var(--border-color) !important;
268
263
  }
269
264
 
270
265
  .input.active.light-input,
271
266
  .bagel-input.light-input input:focus-visible,
272
267
  .bagel-input.light-input select:focus-visible,
273
268
  .bagel-input.light-input textarea:focus-visible {
274
- box-shadow: inset 0 0 2px var(--bgl-popup-text) !important;
269
+ box-shadow: inset 0 0 2px var(--bgl-popup-text) !important;
275
270
  }
276
271
 
277
- .bagel-input input[type="number"]-webkit-inner-spin-button,
278
- .bagel-input input[type="number"]::-webkit-outer-spin-button {
279
- -webkit-appearance: none;
272
+ .bagel-input input[type='number']-webkit-inner-spin-button,
273
+ .bagel-input input[type='number']::-webkit-outer-spin-button {
274
+ -webkit-appearance: none;
280
275
  }
281
276
 
282
277
  .label-count-0 label {
283
- display: none;
278
+ display: none;
284
279
  }
285
280
 
286
281
  .label-count-0 button.bgl_btn.bgl_flatBtn {
287
- margin-right: 5px;
282
+ margin-right: 5px;
288
283
  }
289
284
 
290
285
  .label-count-0 button.bgl_btn.bgl_flatBtn:hover {
291
- background: var(--bgl-hover-filter);
286
+ background: var(--bgl-hover-filter);
292
287
  }
293
288
 
294
- .bagel-input input[type="color"] {
295
- padding: 0.025rem 0.05rem;
296
- display: block;
297
- width: var(--input-height);
298
- height: var(--input-height);
299
- border: none;
300
- -webkit-appearance: none;
301
- -moz-appearance: none;
302
- appearance: none;
303
- cursor: pointer;
289
+ .bagel-input input[type='color'] {
290
+ padding: 0.025rem 0.05rem;
291
+ display: block;
292
+ width: var(--input-height);
293
+ height: var(--input-height);
294
+ border: none;
295
+ -webkit-appearance: none;
296
+ -moz-appearance: none;
297
+ appearance: none;
298
+ cursor: pointer;
304
299
  }
305
300
 
306
- .bagel-input input[type="color"]::-webkit-color-swatch {
307
- border-radius: var(--input-border-radius);
308
- border: none;
309
- -webkit-transition: box-shadow 200ms ease;
310
- transition: box-shadow 200ms ease;
301
+ .bagel-input input[type='color']::-webkit-color-swatch {
302
+ border-radius: var(--input-border-radius);
303
+ border: none;
304
+ -webkit-transition: box-shadow 200ms ease;
305
+ transition: box-shadow 200ms ease;
311
306
  }
312
307
 
313
- .bagel-input input[type="color"]::-moz-color-swatch {
314
- border-radius: var(--input-border-radius);
315
- border: none;
316
- -moz-transition: box-shadow 200ms ease;
317
- transition: box-shadow 200ms ease;
308
+ .bagel-input input[type='color']::-moz-color-swatch {
309
+ border-radius: var(--input-border-radius);
310
+ border: none;
311
+ -moz-transition: box-shadow 200ms ease;
312
+ transition: box-shadow 200ms ease;
318
313
  }
319
314
 
320
- .bagel-input input[type="color"]::-webkit-color-swatch:hover {
321
- box-shadow: inset 0 0 10px #00000050;
315
+ .bagel-input input[type='color']::-webkit-color-swatch:hover {
316
+ box-shadow: inset 0 0 10px #00000050;
322
317
  }
323
318
 
324
- .bagel-input input[type="color"]::-moz-color-swatch:hover {
325
- box-shadow: inset 0 0 10px #00000050;
319
+ .bagel-input input[type='color']::-moz-color-swatch:hover {
320
+ box-shadow: inset 0 0 10px #00000050;
326
321
  }
327
322
 
328
323
  @media screen and (max-width: 910px) {
329
- .bagel-input.wider input {
330
- min-width: 120px;
331
- }
332
- }
324
+ .bagel-input.wider input {
325
+ min-width: 120px;
326
+ }
327
+ }
328
+
329
+ .pixel {
330
+ width: 0;
331
+ height: 0;
332
+ overflow: hidden;
333
+ outline: none;
334
+ position: absolute;
335
+ bottom: 0;
336
+ left: 50%;
337
+ }