quar 1.4.0 → 1.4.2

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 (25) hide show
  1. package/.changeset/README.md +8 -0
  2. package/.changeset/config.json +11 -0
  3. package/.github/workflows/publish.yaml +50 -0
  4. package/CHANGELOG.md +13 -0
  5. package/LICENSE +21 -21
  6. package/README.md +96 -95
  7. package/dummy_models/posts.model.js +52 -52
  8. package/dummy_models/user.model.js +44 -44
  9. package/package.json +10 -3
  10. package/public/scripts/insertTab.js +155 -155
  11. package/public/scripts/keyboardCommands.js +15 -15
  12. package/public/scripts/main.js +364 -364
  13. package/public/scripts/popup.js +25 -25
  14. package/public/styles/insertTab.css +73 -73
  15. package/public/styles/popup.css +70 -70
  16. package/public/styles/sidebar.css +33 -33
  17. package/public/styles/style.css +306 -306
  18. package/public/styles/variables.css +8 -8
  19. package/server.js +241 -241
  20. package/utils/loadModels.js +26 -26
  21. package/views/base.zare +16 -16
  22. package/views/components/insertTab.zare +7 -7
  23. package/views/components/popup.zare +11 -11
  24. package/views/components/sidebar.zare +11 -11
  25. package/views/pages/index.zare +48 -48
package/public/styles/style.css CHANGED
@@ -1,307 +1,307 @@
1
- @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
2
-
3
- * {
4
- margin: 0;
5
- padding: 0;
6
- box-sizing: border-box;
7
- }
8
-
9
- body {
10
- font-family: 'Inter', sans-serif;
11
- font-size: 14px;
12
- display: flex;
13
- background: var(--bg-color);
14
- color: #E0E0E0;
15
- }
16
-
17
- .model-wrapper {
18
- padding: 10px;
19
- }
20
-
21
- .model {
22
- cursor: pointer;
23
- display: flex;
24
- align-items: center;
25
- justify-content: space-between;
26
- padding: 5px;
27
- margin: 5px 0;
28
- border-radius: 5px;
29
- color: #E0E0E0;
30
-
31
- &:hover {
32
- background: #2E3A59;
33
- }
34
- }
35
-
36
- .model span {
37
- color: var(--muted-color);
38
- }
39
-
40
- .main {
41
- margin-left: auto;
42
- height: 100vh;
43
- width: 85vw;
44
- display: flex;
45
- flex-direction: column;
46
- }
47
-
48
- .tabs {
49
- display: flex;
50
- border-bottom: 1px solid var(--muted-color);
51
- background: #1e2124;
52
- }
53
-
54
- .tab {
55
- padding: 5px 10px;
56
- display: flex;
57
- align-items: center;
58
- color: var(--muted-color);
59
- border-left: 1px solid var(--muted-color);
60
- border-right: 1px solid var(--muted-color);
61
- position: relative;
62
- margin: 1px 0;
63
- cursor: pointer;
64
- transition: color 0.2s ease-in-out;
65
-
66
- &:hover {
67
- color: white;
68
- }
69
- }
70
-
71
-
72
- .tab.active {
73
- color: white;
74
- background-color: #2E3A59;
75
- }
76
-
77
- .tab .close {
78
- cursor: pointer;
79
- font-weight: bold;
80
- padding: 0 5px;
81
- }
82
-
83
- .operations {
84
- display: flex;
85
- background: #1e2124;
86
- align-items: center;
87
- padding: 8px 5px;
88
- gap: 10px;
89
- }
90
-
91
- .operations .btn {
92
- background: var(--muted-color);
93
- color: #E0E0E0;
94
- border: none;
95
- padding: 4px 8px;
96
- border-radius: 5px;
97
- cursor: pointer;
98
- transition: background 0.1s ease-in-out;
99
-
100
- &:hover {
101
- background: #2E3A59;
102
- }
103
- }
104
-
105
- .operations .btn:disabled {
106
- background-color: #3a3f4b;
107
- color: #888;
108
- cursor: not-allowed;
109
- }
110
-
111
- .operations .limit-wrapper,
112
- .count-wrapper,
113
- .page-wrapper {
114
- display: flex;
115
- align-items: center;
116
- padding: 2px 5px;
117
- gap: 5px;
118
- border-radius: 5px;
119
- background-color: var(--muted-color);
120
- cursor: pointer;
121
-
122
- &:hover {
123
- background: #2E3A59;
124
- }
125
- }
126
-
127
- .operations .limit-wrapper:hover #limit {
128
- background: #2E3A59;
129
- }
130
-
131
- .operations .text {
132
- padding: 2px 5px;
133
- width: 100%;
134
- height: 100%;
135
- font-size: 12px;
136
- }
137
-
138
- .operations .limit-div,
139
- .count-div,
140
- .page-div {
141
- width: fit-content;
142
- border-left: 2px solid #424549;
143
- height: 100%;
144
- color: #E0E0E0;
145
- }
146
-
147
- .operations .count-div,
148
- .page-div {
149
- padding: 2px 5px;
150
- font-size: 12px;
151
- }
152
-
153
- .operations .limit-wrapper #limit {
154
- background-color: var(--muted-color);
155
- border: none;
156
- color: #E0E0E0;
157
- padding: 2px 5px;
158
- width: fit-content;
159
- height: 100%;
160
- font-size: 12px;
161
-
162
- &:hover {
163
- background: #2E3A59;
164
- }
165
- }
166
-
167
- .content {
168
- padding: 10px;
169
- flex: 1;
170
- border-top: 1px solid var(--muted-color);
171
- background: #23272a;
172
- overflow-y: scroll;
173
- -ms-overflow-style: none;
174
- scrollbar-width: none;
175
- }
176
-
177
- .content::-webkit-scrollbar {
178
- display: none;
179
- }
180
-
181
- .hidden {
182
- display: none;
183
- }
184
-
185
- summary::marker {
186
- color: var(--muted-color);
187
- font-size: 10px;
188
- margin-right: 10px;
189
- }
190
-
191
- .document {
192
- padding: 10px;
193
- border: 1px solid var(--muted-color);
194
- background: #1e2124;
195
- border-radius: 10px;
196
- margin-top: 10px;
197
- }
198
-
199
- .field {
200
- padding: 5px 20px;
201
-
202
- }
203
-
204
- .field .string {
205
- color: var(--green-color);
206
- }
207
-
208
- .field .string::after {
209
- content: '"';
210
- color: var(--green-color);
211
- }
212
-
213
- .field .string::before {
214
- content: '"';
215
- color: var(--green-color);
216
- }
217
-
218
- .field .number {
219
- color: var(--blue-color);
220
- }
221
-
222
- .field .ObjectId {
223
- color: var(--red-color);
224
- }
225
-
226
- .field .ObjectId::after {
227
- content: ' )';
228
- color: var(--red-color);
229
- }
230
-
231
- .field .ObjectId::before {
232
- content: 'ObjectId( ';
233
- color: var(--red-color);
234
- }
235
-
236
- .json-data {
237
- width: 100%;
238
- height: auto;
239
- margin-top: 10px;
240
- background: #1e2124;
241
- border: none;
242
- color: #E0E0E0;
243
- padding: 10px;
244
- border-radius: 10px;
245
- resize: none;
246
- }
247
-
248
- .document-actions {
249
- display: flex;
250
- justify-content: space-between;
251
- padding: 10px;
252
- }
253
-
254
- .document-actions .updateDocument {
255
- background: transparent;
256
- color: #E0E0E0;
257
- border: none;
258
- padding: 5px 10px;
259
- border: 1px solid var(--muted-color);
260
- border-radius: 5px;
261
- transition: background 0.1s ease-in-out;
262
- cursor: pointer;
263
-
264
- &:hover {
265
- background: var(--green-color);
266
- color: var(--bg-color);
267
- }
268
- }
269
-
270
- .document-actions .deleteDocument {
271
- background: transparent;
272
- color: #E0E0E0;
273
- border: none;
274
- padding: 5px 10px;
275
- border: 1px solid var(--muted-color);
276
- border-radius: 5px;
277
- transition: background 0.1s ease-in-out;
278
- cursor: pointer;
279
-
280
- &:hover {
281
- background: var(--red-color);
282
- color: var(--bg-color);
283
- }
284
- }
285
-
286
- .top-container {
287
- display: flex;
288
- justify-content: left;
289
- width: 100%;
290
- padding: 0 10px;
291
- }
292
-
293
- .top-container .editDocument {
294
- background: transparent;
295
- color: #E0E0E0;
296
- border: none;
297
- padding: 5px 10px;
298
- border: 1px solid var(--muted-color);
299
- border-radius: 5px;
300
- transition: background 0.1s ease-in-out;
301
- cursor: pointer;
302
-
303
- &:hover {
304
- background: var(--blue-color);
305
- color: var(--bg-color);
306
- }
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
2
+
3
+ * {
4
+ margin: 0;
5
+ padding: 0;
6
+ box-sizing: border-box;
7
+ }
8
+
9
+ body {
10
+ font-family: 'Inter', sans-serif;
11
+ font-size: 14px;
12
+ display: flex;
13
+ background: var(--bg-color);
14
+ color: #E0E0E0;
15
+ }
16
+
17
+ .model-wrapper {
18
+ padding: 10px;
19
+ }
20
+
21
+ .model {
22
+ cursor: pointer;
23
+ display: flex;
24
+ align-items: center;
25
+ justify-content: space-between;
26
+ padding: 5px;
27
+ margin: 5px 0;
28
+ border-radius: 5px;
29
+ color: #E0E0E0;
30
+
31
+ &:hover {
32
+ background: #2E3A59;
33
+ }
34
+ }
35
+
36
+ .model span {
37
+ color: var(--muted-color);
38
+ }
39
+
40
+ .main {
41
+ margin-left: auto;
42
+ height: 100vh;
43
+ width: 85vw;
44
+ display: flex;
45
+ flex-direction: column;
46
+ }
47
+
48
+ .tabs {
49
+ display: flex;
50
+ border-bottom: 1px solid var(--muted-color);
51
+ background: #1e2124;
52
+ }
53
+
54
+ .tab {
55
+ padding: 5px 10px;
56
+ display: flex;
57
+ align-items: center;
58
+ color: var(--muted-color);
59
+ border-left: 1px solid var(--muted-color);
60
+ border-right: 1px solid var(--muted-color);
61
+ position: relative;
62
+ margin: 1px 0;
63
+ cursor: pointer;
64
+ transition: color 0.2s ease-in-out;
65
+
66
+ &:hover {
67
+ color: white;
68
+ }
69
+ }
70
+
71
+
72
+ .tab.active {
73
+ color: white;
74
+ background-color: #2E3A59;
75
+ }
76
+
77
+ .tab .close {
78
+ cursor: pointer;
79
+ font-weight: bold;
80
+ padding: 0 5px;
81
+ }
82
+
83
+ .operations {
84
+ display: flex;
85
+ background: #1e2124;
86
+ align-items: center;
87
+ padding: 8px 5px;
88
+ gap: 10px;
89
+ }
90
+
91
+ .operations .btn {
92
+ background: var(--muted-color);
93
+ color: #E0E0E0;
94
+ border: none;
95
+ padding: 4px 8px;
96
+ border-radius: 5px;
97
+ cursor: pointer;
98
+ transition: background 0.1s ease-in-out;
99
+
100
+ &:hover {
101
+ background: #2E3A59;
102
+ }
103
+ }
104
+
105
+ .operations .btn:disabled {
106
+ background-color: #3a3f4b;
107
+ color: #888;
108
+ cursor: not-allowed;
109
+ }
110
+
111
+ .operations .limit-wrapper,
112
+ .count-wrapper,
113
+ .page-wrapper {
114
+ display: flex;
115
+ align-items: center;
116
+ padding: 2px 5px;
117
+ gap: 5px;
118
+ border-radius: 5px;
119
+ background-color: var(--muted-color);
120
+ cursor: pointer;
121
+
122
+ &:hover {
123
+ background: #2E3A59;
124
+ }
125
+ }
126
+
127
+ .operations .limit-wrapper:hover #limit {
128
+ background: #2E3A59;
129
+ }
130
+
131
+ .operations .text {
132
+ padding: 2px 5px;
133
+ width: 100%;
134
+ height: 100%;
135
+ font-size: 12px;
136
+ }
137
+
138
+ .operations .limit-div,
139
+ .count-div,
140
+ .page-div {
141
+ width: fit-content;
142
+ border-left: 2px solid #424549;
143
+ height: 100%;
144
+ color: #E0E0E0;
145
+ }
146
+
147
+ .operations .count-div,
148
+ .page-div {
149
+ padding: 2px 5px;
150
+ font-size: 12px;
151
+ }
152
+
153
+ .operations .limit-wrapper #limit {
154
+ background-color: var(--muted-color);
155
+ border: none;
156
+ color: #E0E0E0;
157
+ padding: 2px 5px;
158
+ width: fit-content;
159
+ height: 100%;
160
+ font-size: 12px;
161
+
162
+ &:hover {
163
+ background: #2E3A59;
164
+ }
165
+ }
166
+
167
+ .content {
168
+ padding: 10px;
169
+ flex: 1;
170
+ border-top: 1px solid var(--muted-color);
171
+ background: #23272a;
172
+ overflow-y: scroll;
173
+ -ms-overflow-style: none;
174
+ scrollbar-width: none;
175
+ }
176
+
177
+ .content::-webkit-scrollbar {
178
+ display: none;
179
+ }
180
+
181
+ .hidden {
182
+ display: none;
183
+ }
184
+
185
+ summary::marker {
186
+ color: var(--muted-color);
187
+ font-size: 10px;
188
+ margin-right: 10px;
189
+ }
190
+
191
+ .document {
192
+ padding: 10px;
193
+ border: 1px solid var(--muted-color);
194
+ background: #1e2124;
195
+ border-radius: 10px;
196
+ margin-top: 10px;
197
+ }
198
+
199
+ .field {
200
+ padding: 5px 20px;
201
+
202
+ }
203
+
204
+ .field .string {
205
+ color: var(--green-color);
206
+ }
207
+
208
+ .field .string::after {
209
+ content: '"';
210
+ color: var(--green-color);
211
+ }
212
+
213
+ .field .string::before {
214
+ content: '"';
215
+ color: var(--green-color);
216
+ }
217
+
218
+ .field .number {
219
+ color: var(--blue-color);
220
+ }
221
+
222
+ .field .ObjectId {
223
+ color: var(--red-color);
224
+ }
225
+
226
+ .field .ObjectId::after {
227
+ content: ' )';
228
+ color: var(--red-color);
229
+ }
230
+
231
+ .field .ObjectId::before {
232
+ content: 'ObjectId( ';
233
+ color: var(--red-color);
234
+ }
235
+
236
+ .json-data {
237
+ width: 100%;
238
+ height: auto;
239
+ margin-top: 10px;
240
+ background: #1e2124;
241
+ border: none;
242
+ color: #E0E0E0;
243
+ padding: 10px;
244
+ border-radius: 10px;
245
+ resize: none;
246
+ }
247
+
248
+ .document-actions {
249
+ display: flex;
250
+ justify-content: space-between;
251
+ padding: 10px;
252
+ }
253
+
254
+ .document-actions .updateDocument {
255
+ background: transparent;
256
+ color: #E0E0E0;
257
+ border: none;
258
+ padding: 5px 10px;
259
+ border: 1px solid var(--muted-color);
260
+ border-radius: 5px;
261
+ transition: background 0.1s ease-in-out;
262
+ cursor: pointer;
263
+
264
+ &:hover {
265
+ background: var(--green-color);
266
+ color: var(--bg-color);
267
+ }
268
+ }
269
+
270
+ .document-actions .deleteDocument {
271
+ background: transparent;
272
+ color: #E0E0E0;
273
+ border: none;
274
+ padding: 5px 10px;
275
+ border: 1px solid var(--muted-color);
276
+ border-radius: 5px;
277
+ transition: background 0.1s ease-in-out;
278
+ cursor: pointer;
279
+
280
+ &:hover {
281
+ background: var(--red-color);
282
+ color: var(--bg-color);
283
+ }
284
+ }
285
+
286
+ .top-container {
287
+ display: flex;
288
+ justify-content: left;
289
+ width: 100%;
290
+ padding: 0 10px;
291
+ }
292
+
293
+ .top-container .editDocument {
294
+ background: transparent;
295
+ color: #E0E0E0;
296
+ border: none;
297
+ padding: 5px 10px;
298
+ border: 1px solid var(--muted-color);
299
+ border-radius: 5px;
300
+ transition: background 0.1s ease-in-out;
301
+ cursor: pointer;
302
+
303
+ &:hover {
304
+ background: var(--blue-color);
305
+ color: var(--bg-color);
306
+ }
307
307
  }
package/public/styles/variables.css CHANGED
@@ -1,9 +1,9 @@
1
- :root{
2
- --bg-color: #171f2a;
3
- --text-color: #fff;
4
- --muted-color: #555A6B;
5
- --blue-color: #4FC3F7;
6
- --green-color: #00ffaa;
7
- --red-color: #FF5370;
8
- --yellow-color: #FFEB3B;
1
+ :root{
2
+ --bg-color: #171f2a;
3
+ --text-color: #fff;
4
+ --muted-color: #555A6B;
5
+ --blue-color: #4FC3F7;
6
+ --green-color: #00ffaa;
7
+ --red-color: #FF5370;
8
+ --yellow-color: #FFEB3B;
9
9
  }