sqlite-hub 0.5.0 → 0.6.0

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 (36) hide show
  1. package/README.md +2 -2
  2. package/changelog.md +8 -0
  3. package/frontend/assets/mockups/connections.png +0 -0
  4. package/frontend/assets/mockups/data.png +0 -0
  5. package/frontend/assets/mockups/data_row_editor.png +0 -0
  6. package/frontend/assets/mockups/home.png +0 -0
  7. package/frontend/assets/mockups/sql_editor.png +0 -0
  8. package/frontend/assets/mockups/sql_editor_querydetail.png +0 -0
  9. package/frontend/assets/mockups/structure.png +0 -0
  10. package/frontend/assets/mockups/structure_inspector.png +0 -0
  11. package/frontend/js/api.js +15 -0
  12. package/frontend/js/app.js +279 -8
  13. package/frontend/js/components/queryEditor.js +2 -2
  14. package/frontend/js/components/sidebar.js +1 -0
  15. package/frontend/js/components/tableDesignerEditor.js +356 -0
  16. package/frontend/js/components/tableDesignerSidebar.js +126 -0
  17. package/frontend/js/components/tableDesignerSqlPreview.js +40 -0
  18. package/frontend/js/router.js +10 -0
  19. package/frontend/js/store.js +296 -1
  20. package/frontend/js/utils/tableDesigner.js +1192 -0
  21. package/frontend/js/views/data.js +253 -263
  22. package/frontend/js/views/tableDesigner.js +37 -0
  23. package/frontend/styles/base.css +87 -73
  24. package/frontend/styles/components.css +798 -251
  25. package/frontend/styles/views.css +40 -0
  26. package/package.json +1 -1
  27. package/server/routes/tableDesigner.js +60 -0
  28. package/server/server.js +4 -0
  29. package/server/services/sqlite/tableDesigner/changeAnalysis.js +295 -0
  30. package/server/services/sqlite/tableDesigner/schemaMapping.js +233 -0
  31. package/server/services/sqlite/tableDesigner/sql.js +63 -0
  32. package/server/services/sqlite/tableDesigner/validation.js +245 -0
  33. package/server/services/sqlite/tableDesignerService.js +181 -0
  34. package/frontend/assets/mockups/data_edit.png +0 -0
  35. package/frontend/assets/mockups/graph_visualize.png +0 -0
  36. package/frontend/assets/mockups/overview.png +0 -0
package/frontend/js/views/tableDesigner.js ADDED
@@ -0,0 +1,37 @@
1
+ import { renderTableDesignerEditor } from "../components/tableDesignerEditor.js";
2
+ import { renderTableDesignerSidebar } from "../components/tableDesignerSidebar.js";
3
+ import { renderTableDesignerSqlPreview } from "../components/tableDesignerSqlPreview.js";
4
+ import { escapeHtml } from "../utils/format.js";
5
+
6
+ function renderRouteError(error) {
7
+ if (!error) {
8
+ return "";
9
+ }
10
+
11
+ return `
12
+ <div class="table-designer-route-error">
13
+ <div class="table-designer-route-error__code">${escapeHtml(error.code)}</div>
14
+ <div class="table-designer-route-error__text">${escapeHtml(error.message)}</div>
15
+ </div>
16
+ `;
17
+ }
18
+
19
+ export function renderTableDesignerView(state) {
20
+ return {
21
+ main: `
22
+ <section class="view-surface table-designer-view">
23
+ ${renderTableDesignerSidebar(state)}
24
+ <div class="table-designer-workspace">
25
+ ${renderRouteError(state.tableDesigner.error)}
26
+ <div class="table-designer-workspace__top">
27
+ ${renderTableDesignerEditor(state)}
28
+ </div>
29
+ <div class="table-designer-workspace__bottom">
30
+ ${renderTableDesignerSqlPreview(state.tableDesigner.draft)}
31
+ </div>
32
+ </div>
33
+ </section>
34
+ `,
35
+ panel: "",
36
+ };
37
+ }
package/frontend/styles/base.css CHANGED
@@ -1,103 +1,110 @@
1
1
  *,
2
2
  *::before,
3
3
  *::after {
4
- box-sizing: border-box;
4
+ box-sizing: border-box;
5
5
  }
6
6
 
7
7
  html,
8
8
  body {
9
- height: 100%;
10
- margin: 0;
9
+ height: 100%;
10
+ margin: 0;
11
11
  }
12
12
 
13
13
  body {
14
- background: var(--color-background);
15
- color: var(--color-on-surface);
16
- font-family: var(--font-family-body);
14
+ background: var(--color-background);
15
+ color: var(--color-on-surface);
16
+ font-family: var(--font-family-body);
17
17
  }
18
18
 
19
19
  button,
20
20
  input,
21
21
  select,
22
22
  textarea {
23
- color: inherit;
24
- font: inherit;
23
+ color: inherit;
24
+ font: inherit;
25
25
  }
26
26
 
27
27
  button {
28
- cursor: pointer;
28
+ cursor: pointer;
29
29
  }
30
30
 
31
31
  a {
32
- color: inherit;
33
- text-decoration: none;
32
+ color: inherit;
33
+ text-decoration: none;
34
34
  }
35
35
 
36
36
  img {
37
- display: block;
38
- max-width: 100%;
37
+ display: block;
38
+ max-width: 100%;
39
39
  }
40
40
 
41
41
  [hidden] {
42
- display: none !important;
42
+ display: none !important;
43
43
  }
44
44
 
45
45
  .font-headline {
46
- font-family: var(--font-family-headline);
46
+ font-family: var(--font-family-headline);
47
47
  }
48
48
 
49
49
  .font-body {
50
- font-family: var(--font-family-body);
50
+ font-family: var(--font-family-body);
51
51
  }
52
52
 
53
53
  .font-mono {
54
- font-family: var(--font-family-mono);
54
+ font-family: var(--font-family-mono);
55
+ overflow: hidden;
56
+ white-space: nowrap;
57
+ text-overflow: ellipsis;
55
58
  }
56
59
 
57
60
  .material-symbols-outlined {
58
- display: inline-block;
59
- font-size: var(--font-size-icon);
60
- font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
61
- letter-spacing: normal;
62
- line-height: 1;
63
- text-transform: none;
64
- white-space: nowrap;
65
- word-wrap: normal;
66
- direction: ltr;
67
- vertical-align: middle;
61
+ display: inline-block;
62
+ font-size: var(--font-size-icon);
63
+ font-variation-settings:
64
+ 'FILL' 0,
65
+ 'wght' 400,
66
+ 'GRAD' 0,
67
+ 'opsz' 24;
68
+ letter-spacing: normal;
69
+ line-height: 1;
70
+ text-transform: none;
71
+ white-space: nowrap;
72
+ word-wrap: normal;
73
+ direction: ltr;
74
+ vertical-align: middle;
68
75
  }
69
76
 
70
77
  .no-scrollbar {
71
- -ms-overflow-style: none;
72
- scrollbar-width: none;
78
+ -ms-overflow-style: none;
79
+ scrollbar-width: none;
73
80
  }
74
81
 
75
82
  .no-scrollbar::-webkit-scrollbar {
76
- display: none;
77
- height: 0;
78
- width: 0;
83
+ display: none;
84
+ height: 0;
85
+ width: 0;
79
86
  }
80
87
 
81
88
  .custom-scrollbar {
82
- scrollbar-color: var(--color-surface-highest) var(--color-surface-lowest);
83
- scrollbar-width: thin;
89
+ scrollbar-color: var(--color-surface-highest) var(--color-surface-lowest);
90
+ scrollbar-width: thin;
84
91
  }
85
92
 
86
93
  .custom-scrollbar::-webkit-scrollbar {
87
- height: var(--scrollbar-size);
88
- width: var(--scrollbar-size);
94
+ height: var(--scrollbar-size);
95
+ width: var(--scrollbar-size);
89
96
  }
90
97
 
91
98
  .custom-scrollbar::-webkit-scrollbar-track {
92
- background: var(--color-surface-lowest);
99
+ background: var(--color-surface-lowest);
93
100
  }
94
101
 
95
102
  .custom-scrollbar::-webkit-scrollbar-thumb {
96
- background: var(--color-surface-highest);
103
+ background: var(--color-surface-highest);
97
104
  }
98
105
 
99
106
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
100
- background: var(--color-primary-container);
107
+ background: var(--color-primary-container);
101
108
  }
102
109
 
103
110
  .clipped-btn,
@@ -105,72 +112,79 @@ img {
105
112
  .custom-clip,
106
113
  .clip-button,
107
114
  .clip-corner {
108
- clip-path: var(--clip-path);
115
+ clip-path: var(--clip-path);
109
116
  }
110
117
 
111
118
  .sql-keyword {
112
- color: var(--color-primary-container);
119
+ color: var(--color-primary-container);
113
120
  }
114
121
 
115
122
  .sql-string {
116
- color: var(--color-on-surface);
123
+ color: var(--color-on-surface);
117
124
  }
118
125
 
119
126
  .sql-comment {
120
- color: var(--color-outline-variant);
127
+ color: var(--color-outline-variant);
121
128
  }
122
129
 
123
130
  .sql-value {
124
- color: var(--color-on-surface-variant);
131
+ color: var(--color-on-surface-variant);
125
132
  }
126
133
 
127
134
  .query-editor-layer {
128
- min-height: 140px;
135
+ display: grid;
136
+ min-height: 140px;
137
+ overflow: hidden;
129
138
  }
130
139
 
131
140
  .query-editor-highlight,
132
141
  .query-editor-input {
133
- font: inherit;
134
- line-height: inherit;
135
- margin: 0;
136
- padding: 0;
137
- tab-size: 2;
138
- white-space: pre-wrap;
139
- word-break: break-word;
142
+ display: block;
143
+ font: inherit;
144
+ grid-area: 1 / 1;
145
+ line-height: inherit;
146
+ margin: 0;
147
+ min-height: 100%;
148
+ padding: 0;
149
+ tab-size: 2;
150
+ white-space: pre-wrap;
151
+ width: 100%;
152
+ word-break: normal;
153
+ overflow-wrap: anywhere;
140
154
  }
141
155
 
142
156
  .query-editor-highlight {
143
- color: var(--color-on-surface);
144
- inset: 0;
145
- overflow: hidden;
146
- pointer-events: none;
147
- position: absolute;
157
+ color: var(--color-on-surface);
158
+ overflow: hidden;
159
+ pointer-events: none;
148
160
  }
149
161
 
150
162
  .query-editor-input {
151
- -webkit-text-fill-color: transparent;
152
- background: transparent;
153
- caret-color: var(--color-on-surface);
154
- color: transparent;
155
- overflow: auto;
163
+ -webkit-appearance: none;
164
+ -webkit-text-fill-color: transparent;
165
+ appearance: none;
166
+ background: transparent;
167
+ caret-color: var(--color-on-surface);
168
+ color: transparent;
169
+ overflow: auto;
156
170
  }
157
171
 
158
172
  .query-editor-input::placeholder {
159
- color: transparent;
173
+ color: transparent;
160
174
  }
161
175
 
162
176
  .cursor-blink {
163
- animation: cursor-blink var(--duration-cursor-blink) step-end infinite;
164
- border-right: 2px solid var(--color-primary-container);
177
+ animation: cursor-blink var(--duration-cursor-blink) step-end infinite;
178
+ border-right: 2px solid var(--color-primary-container);
165
179
  }
166
180
 
167
181
  @keyframes cursor-blink {
168
- from,
169
- to {
170
- border-color: transparent;
171
- }
172
-
173
- 50% {
174
- border-color: var(--color-primary-container);
175
- }
182
+ from,
183
+ to {
184
+ border-color: transparent;
185
+ }
186
+
187
+ 50% {
188
+ border-color: var(--color-primary-container);
189
+ }
176
190
  }