@bagelink/vue 1.2.115 → 1.2.119

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 (16) hide show
  1. package/dist/components/ImportData.vue.d.ts.map +1 -1
  2. package/dist/components/form/inputs/CodeEditor/CodeTypes.d.ts +12 -3
  3. package/dist/components/form/inputs/CodeEditor/CodeTypes.d.ts.map +1 -1
  4. package/dist/components/form/inputs/CodeEditor/Index.vue.d.ts +2 -16
  5. package/dist/components/form/inputs/CodeEditor/Index.vue.d.ts.map +1 -1
  6. package/dist/components/form/inputs/CodeEditor/useHighlight.d.ts +31 -0
  7. package/dist/components/form/inputs/CodeEditor/useHighlight.d.ts.map +1 -0
  8. package/dist/index.cjs +221 -176
  9. package/dist/index.mjs +221 -176
  10. package/dist/style.css +159 -148
  11. package/package.json +1 -1
  12. package/src/components/ImportData.vue +96 -71
  13. package/src/components/form/inputs/CodeEditor/CodeTypes.ts +14 -8
  14. package/src/components/form/inputs/CodeEditor/Index.vue +11 -66
  15. package/src/components/form/inputs/CodeEditor/useHighlight.ts +76 -0
  16. package/src/styles/inputs.css +148 -137
package/src/styles/inputs.css CHANGED
@@ -1,228 +1,239 @@
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
8
  .bagel-input-error input,
9
9
  .bagel-input-error button,
10
10
  .bagel-input-error textarea {
11
- outline: 1px solid var(--bgl-red);
11
+ outline: 1px solid var(--bgl-red);
12
12
  }
13
13
 
14
14
  .bagel-input {
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);
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);
22
22
  }
23
23
 
24
24
  .bagel-input::-webkit-input-placeholder .bagel-input label {
25
- display: block;
26
- font-size: var(--label-font-size);
27
- margin-bottom: 2px;
28
- line-height: 1.3;
25
+ display: block;
26
+ font-size: var(--label-font-size);
27
+ margin-bottom: 2px;
28
+ line-height: 1.3;
29
29
  }
30
30
 
31
31
  .bagel-input::-moz-placeholder .bagel-input label {
32
- display: block;
33
- font-size: var(--label-font-size);
34
- margin-bottom: 2px;
35
- line-height: 1.3;
32
+ display: block;
33
+ font-size: var(--label-font-size);
34
+ margin-bottom: 2px;
35
+ line-height: 1.3;
36
36
  }
37
37
 
38
38
  .bagel-input:-ms-input-placeholder .bagel-input label {
39
- display: block;
40
- font-size: var(--label-font-size);
41
- margin-bottom: 2px;
42
- line-height: 1.3;
39
+ display: block;
40
+ font-size: var(--label-font-size);
41
+ margin-bottom: 2px;
42
+ line-height: 1.3;
43
43
  }
44
44
 
45
45
  .bagel-input::-ms-input-placeholder .bagel-input label {
46
- display: block;
47
- font-size: var(--label-font-size);
48
- margin-bottom: 2px;
49
- line-height: 1.3;
46
+ display: block;
47
+ font-size: var(--label-font-size);
48
+ margin-bottom: 2px;
49
+ line-height: 1.3;
50
50
  }
51
51
 
52
52
  .bagel-input::placeholder .bagel-input label {
53
- display: block;
54
- font-size: var(--label-font-size);
55
- margin-bottom: 2px;
56
- line-height: 1.3;
53
+ display: block;
54
+ font-size: var(--label-font-size);
55
+ margin-bottom: 2px;
56
+ line-height: 1.3;
57
57
  }
58
58
 
59
59
  .bagel-input::-webkit-input-placeholder {
60
- color: var(--placeholder-color);
60
+ color: var(--placeholder-color);
61
61
  }
62
62
 
63
63
  .bagel-input::-moz-placeholder {
64
- color: var(--placeholder-color);
64
+ color: var(--placeholder-color);
65
65
  }
66
66
 
67
67
  .bagel-input:-ms-input-placeholder {
68
- color: var(--placeholder-color);
68
+ color: var(--placeholder-color);
69
69
  }
70
70
 
71
71
  .bagel-input::-ms-input-placeholder {
72
- color: var(--placeholder-color);
72
+ color: var(--placeholder-color);
73
73
  }
74
74
 
75
75
  .bagel-input::placeholder {
76
- color: var(--placeholder-color);
76
+ color: var(--placeholder-color);
77
77
  }
78
78
 
79
79
  .bagel-input label {
80
- color: var(--label-color);
80
+ color: var(--label-color);
81
81
  }
82
82
 
83
83
  .bagel-input input,
84
84
  .bagel-input select,
85
85
  .custom-select .input {
86
- height: var(--input-height);
87
- font-size: var(--input-font-size);
86
+ height: var(--input-height);
87
+ font-size: var(--input-font-size);
88
88
  }
89
89
 
90
90
  .bagel-input input,
91
91
  .bagel-input textarea,
92
92
  .bagel-input select,
93
93
  .custom-select .input {
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%;
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%;
101
101
  }
102
102
 
103
103
  .bagel-input input::-webkit-input-placeholder,
104
104
  .bagel-input textarea::-webkit-input-placeholder,
105
105
  .bagel-input select::-webkit-input-placeholder,
106
106
  .custom-select .input::-webkit-input-placeholder {
107
- color: var(--placeholder-color);
107
+ color: var(--placeholder-color);
108
108
  }
109
109
 
110
110
  .bagel-input input::-moz-placeholder,
111
111
  .bagel-input textarea::-moz-placeholder,
112
112
  .bagel-input select::-moz-placeholder,
113
113
  .custom-select .input::-moz-placeholder {
114
- color: var(--placeholder-color);
114
+ color: var(--placeholder-color);
115
115
  }
116
116
 
117
117
  .bagel-input input:-ms-input-placeholder,
118
118
  .bagel-input textarea:-ms-input-placeholder,
119
119
  .bagel-input select:-ms-input-placeholder,
120
120
  .custom-select .input:-ms-input-placeholder {
121
- color: var(--placeholder-color);
121
+ color: var(--placeholder-color);
122
122
  }
123
123
 
124
124
  .bagel-input input::-ms-input-placeholder,
125
125
  .bagel-input textarea::-ms-input-placeholder,
126
126
  .bagel-input select::-ms-input-placeholder,
127
127
  .custom-select .input::-ms-input-placeholder {
128
- color: var(--placeholder-color);
128
+ color: var(--placeholder-color);
129
129
  }
130
130
 
131
131
  .bagel-input input::placeholder,
132
132
  .bagel-input textarea::placeholder,
133
133
  .bagel-input select::placeholder,
134
134
  .custom-select .input::placeholder {
135
- color: var(--placeholder-color);
135
+ color: var(--placeholder-color);
136
136
  }
137
137
 
138
138
  .bagel-input.search-wrap {
139
- display: flex;
140
- flex-direction: row;
141
- align-items: center;
139
+ display: flex;
140
+ flex-direction: row;
141
+ align-items: center;
142
142
  }
143
143
 
144
144
  .bagel-input.search-wrap input {
145
- -webkit-padding-end: 2rem;
146
- padding-inline-end: 2rem;
145
+ -webkit-padding-end: 2rem;
146
+ padding-inline-end: 2rem;
147
147
  }
148
148
 
149
149
  .bagel-input.search-wrap .bgl_icon-font {
150
- -webkit-margin-start: -1.75rem;
151
- margin-inline-start: -1.75rem;
150
+ -webkit-margin-start: -1.75rem;
151
+ margin-inline-start: -1.75rem;
152
152
  }
153
153
 
154
154
  .bagel-input select {
155
- height: var(--input-height);
155
+ height: var(--input-height);
156
156
  }
157
157
 
158
158
  .bagel-input textarea {
159
- resize: vertical;
160
- min-height: calc(var(--input-height) * 3);
161
- line-height: 1.5;
159
+ resize: vertical;
160
+ min-height: calc(var(--input-height) * 3);
161
+ line-height: 1.5;
162
162
  }
163
163
 
164
164
  .bagel-input.wider input {
165
- min-width: 320px;
165
+ min-width: 320px;
166
166
  }
167
167
 
168
168
  .bagel-input input[type='radio'] {
169
- padding: 0;
170
- width: -webkit-fit-content;
171
- width: -moz-fit-content;
172
- width: fit-content;
169
+ padding: 0;
170
+ width: -webkit-fit-content;
171
+ width: -moz-fit-content;
172
+ width: fit-content;
173
173
  }
174
174
 
175
175
  .bagel-input:focus-within label {
176
- color: var(--bgl-primary);
176
+ color: var(--bgl-primary);
177
177
  }
178
178
 
179
179
  .bagel-input select.no-edit,
180
180
  .bagel-input input.no-edit,
181
181
  .bagel-input textarea.no-edit,
182
182
  .bagel-input .switch.no-edit {
183
- pointer-events: none;
184
- outline: none;
185
- opacity: 0.7;
183
+ pointer-events: none;
184
+ outline: none;
185
+ opacity: 0.7;
186
186
  }
187
187
 
188
188
  .bagel-input label.active {
189
- color: var(--bgl-primary);
189
+ color: var(--bgl-primary);
190
190
  }
191
191
 
192
192
  .inline-80 {
193
- display: inline-block;
194
- width: 80%;
193
+ display: inline-block;
194
+ width: 80%;
195
195
  }
196
196
 
197
197
  .inline-20 {
198
- display: inline-block;
199
- width: 20%;
198
+ display: inline-block;
199
+ width: 20%;
200
200
  }
201
201
 
202
202
  .inline-10 {
203
- display: inline-block;
204
- width: 20%;
203
+ display: inline-block;
204
+ width: 20%;
205
205
  }
206
206
 
207
207
  .inline-50 {
208
- display: inline-block;
209
- width: 49%;
210
- margin: 0 0.5%;
208
+ display: inline-block;
209
+ width: 49%;
210
+ margin: 0 0.5%;
211
211
  }
212
212
 
213
213
  .custom-select .input {
214
- height: var(--input-height);
215
- font-size: var(--input-font-size);
214
+ height: var(--input-height);
215
+ font-size: var(--input-font-size);
216
216
  }
217
217
 
218
218
  .custom-select .input {
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%;
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%;
226
+ }
227
+
228
+ .input-height {
229
+ height: var(--input-height);
230
+ }
231
+
232
+ .input-size {
233
+ height: var(--input-height);
234
+ min-width: calc(var(--input-height) * 3);
235
+ margin-bottom: 0.5rem;
236
+ padding: 0.7rem;
226
237
  }
227
238
 
228
239
  /* [dir='rtl'] .bagel-input input[type='email'],
@@ -236,22 +247,22 @@ select {
236
247
  .bagel-input textarea:focus-visible,
237
248
  .bagel-input button:focus-visible,
238
249
  .bgl_btn:focus-visible {
239
- outline-color: var(--bgl-primary-tint);
240
- box-shadow: inset 0 0 10px #00000012;
250
+ outline-color: var(--bgl-primary-tint);
251
+ box-shadow: inset 0 0 10px #00000012;
241
252
  }
242
253
 
243
254
  .bagel-input input:focus,
244
255
  .bagel-input select:focus,
245
256
  .bagel-input textarea:focus {
246
- outline-color: rgba(0, 0, 0, 0.05);
247
- box-shadow: inset 0 0 8px #00000018;
248
- outline-color: var(--input-bg);
257
+ outline-color: rgba(0, 0, 0, 0.05);
258
+ box-shadow: inset 0 0 8px #00000018;
259
+ outline-color: var(--input-bg);
249
260
  }
250
261
 
251
262
  .bagel-input .bgl_btn:focus,
252
263
  .bagel-input button:focus {
253
- outline-color: rgba(0, 0, 0, 0.05);
254
- outline-color: var(--input-bg);
264
+ outline-color: rgba(0, 0, 0, 0.05);
265
+ outline-color: var(--input-bg);
255
266
  }
256
267
 
257
268
  .bagel-input.light-input input,
@@ -259,84 +270,84 @@ select {
259
270
  .bagel-input.light-input select,
260
271
  .custom-select.light-input .input,
261
272
  .light-input .selectinput-btn {
262
- background: var(--bgl-popup-bg) !important;
263
- box-shadow:
264
- 0 1px 5px 0 rgba(0, 0, 0, 0.1),
265
- 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
266
- outline: 1px solid var(--border-color) !important;
273
+ background: var(--bgl-popup-bg) !important;
274
+ box-shadow:
275
+ 0 1px 5px 0 rgba(0, 0, 0, 0.1),
276
+ 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
277
+ outline: 1px solid var(--border-color) !important;
267
278
  }
268
279
 
269
280
  .input.active.light-input,
270
281
  .bagel-input.light-input input:focus-visible,
271
282
  .bagel-input.light-input select:focus-visible,
272
283
  .bagel-input.light-input textarea:focus-visible {
273
- box-shadow: inset 0 0 2px var(--bgl-popup-text) !important;
284
+ box-shadow: inset 0 0 2px var(--bgl-popup-text) !important;
274
285
  }
275
286
 
276
287
  .bagel-input input[type='number']-webkit-inner-spin-button,
277
288
  .bagel-input input[type='number']::-webkit-outer-spin-button {
278
- -webkit-appearance: none;
289
+ -webkit-appearance: none;
279
290
  }
280
291
 
281
292
  .label-count-0 label {
282
- display: none;
293
+ display: none;
283
294
  }
284
295
 
285
296
  .label-count-0 button.bgl_btn.bgl_flatBtn {
286
- margin-right: 5px;
297
+ margin-right: 5px;
287
298
  }
288
299
 
289
300
  .label-count-0 button.bgl_btn.bgl_flatBtn:hover {
290
- background: var(--bgl-hover-filter);
301
+ background: var(--bgl-hover-filter);
291
302
  }
292
303
 
293
304
  .bagel-input input[type='color'] {
294
- padding: 0.025rem 0.05rem;
295
- display: block;
296
- width: var(--input-height);
297
- min-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;
305
+ padding: 0.025rem 0.05rem;
306
+ display: block;
307
+ width: var(--input-height);
308
+ min-width: var(--input-height);
309
+ height: var(--input-height);
310
+ border: none;
311
+ -webkit-appearance: none;
312
+ -moz-appearance: none;
313
+ appearance: none;
314
+ cursor: pointer;
304
315
  }
305
316
 
306
317
  .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;
318
+ border-radius: var(--input-border-radius);
319
+ border: none;
320
+ -webkit-transition: box-shadow 200ms ease;
321
+ transition: box-shadow 200ms ease;
311
322
  }
312
323
 
313
324
  .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;
325
+ border-radius: var(--input-border-radius);
326
+ border: none;
327
+ -moz-transition: box-shadow 200ms ease;
328
+ transition: box-shadow 200ms ease;
318
329
  }
319
330
 
320
331
  .bagel-input input[type='color']::-webkit-color-swatch:hover {
321
- box-shadow: inset 0 0 10px #00000050;
332
+ box-shadow: inset 0 0 10px #00000050;
322
333
  }
323
334
 
324
335
  .bagel-input input[type='color']::-moz-color-swatch:hover {
325
- box-shadow: inset 0 0 10px #00000050;
336
+ box-shadow: inset 0 0 10px #00000050;
326
337
  }
327
338
 
328
339
  @media screen and (max-width: 910px) {
329
- .bagel-input.wider input {
330
- min-width: 120px;
331
- }
340
+ .bagel-input.wider input {
341
+ min-width: 120px;
342
+ }
332
343
  }
333
344
 
334
345
  .pixel {
335
- width: 0 !important;
336
- height: 0 !important;
337
- overflow: hidden !important;
338
- outline: none !important;
339
- position: absolute !important;
340
- bottom: 0 !important;
341
- left: 50% !important;
342
- }
346
+ width: 0 !important;
347
+ height: 0 !important;
348
+ overflow: hidden !important;
349
+ outline: none !important;
350
+ position: absolute !important;
351
+ bottom: 0 !important;
352
+ left: 50% !important;
353
+ }