@mongoosejs/studio 0.0.59 → 0.0.60
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.
- package/frontend/public/app.js +7 -7
- package/frontend/public/tw.css +36 -18
- package/frontend/src/models/models.css +6 -3
- package/frontend/src/models/models.html +38 -37
- package/package.json +1 -1
- package/test.html +57 -0
package/frontend/public/app.js
CHANGED
|
@@ -1883,19 +1883,19 @@ exports.githubLogin = function githubLogin() {
|
|
|
1883
1883
|
};
|
|
1884
1884
|
|
|
1885
1885
|
exports.getWorkspaceTeam = function getWorkspaceTeam() {
|
|
1886
|
-
return client.post('/getWorkspaceTeam', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-
|
|
1886
|
+
return client.post('/getWorkspaceTeam', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]},{"userId":"67a91f3e5db099be8bd0f5c5","roles":["member"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-09T21:35:14.905Z","__v":1,"name":"Zevo DEV","subscriptionTier":"pro"}._id }).then(res => res.data);
|
|
1887
1887
|
};
|
|
1888
1888
|
|
|
1889
1889
|
exports.inviteToWorkspace = function inviteToWorkspace(params) {
|
|
1890
|
-
return client.post('/inviteToWorkspace', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-
|
|
1890
|
+
return client.post('/inviteToWorkspace', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]},{"userId":"67a91f3e5db099be8bd0f5c5","roles":["member"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-09T21:35:14.905Z","__v":1,"name":"Zevo DEV","subscriptionTier":"pro"}._id, ...params }).then(res => res.data);
|
|
1891
1891
|
};
|
|
1892
1892
|
|
|
1893
1893
|
exports.github = function github(code) {
|
|
1894
|
-
return client.post('/github', { code, workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-
|
|
1894
|
+
return client.post('/github', { code, workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]},{"userId":"67a91f3e5db099be8bd0f5c5","roles":["member"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-09T21:35:14.905Z","__v":1,"name":"Zevo DEV","subscriptionTier":"pro"}._id }).then(res => res.data);
|
|
1895
1895
|
};
|
|
1896
1896
|
|
|
1897
1897
|
exports.me = function me() {
|
|
1898
|
-
return client.post('/me', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-
|
|
1898
|
+
return client.post('/me', { workspaceId: {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]},{"userId":"67a91f3e5db099be8bd0f5c5","roles":["member"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-09T21:35:14.905Z","__v":1,"name":"Zevo DEV","subscriptionTier":"pro"}._id }).then(res => res.data);
|
|
1899
1899
|
};
|
|
1900
1900
|
|
|
1901
1901
|
exports.hasAPIKey = client.hasAPIKey;
|
|
@@ -2042,7 +2042,7 @@ module.exports = app => app.component('splash', {
|
|
|
2042
2042
|
data: () => ({ error: null }),
|
|
2043
2043
|
computed: {
|
|
2044
2044
|
workspaceName() {
|
|
2045
|
-
return {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-
|
|
2045
|
+
return {"_id":"67a5366c745bb0e6735950dc","ownerId":"679ba73e4cc3ddc28f6ef6af","baseUrl":"https://web.zevo.io","members":[{"userId":"679ba73e4cc3ddc28f6ef6af","roles":["owner"]},{"userId":"67a91f3e5db099be8bd0f5c5","roles":["member"]}],"createdAt":"2025-02-06T22:23:40.903Z","updatedAt":"2025-02-09T21:35:14.905Z","__v":1,"name":"Zevo DEV","subscriptionTier":"pro"}.name;
|
|
2046
2046
|
}
|
|
2047
2047
|
},
|
|
2048
2048
|
async mounted() {
|
|
@@ -3228,7 +3228,7 @@ module.exports = "<transition name=\"modal\">\n <div class=\"modal-mask\">\n
|
|
|
3228
3228
|
/***/ ((module) => {
|
|
3229
3229
|
|
|
3230
3230
|
"use strict";
|
|
3231
|
-
module.exports = ".models {\n position: relative;\n display: flex;\n flex-direction: row;\n min-height: calc(100% - 56px);\n}\n\n.models button.gray {\n color: black;\n background-color: #eee;\n}\n\n.models .model-selector {\n background-color: #eee;\n flex-grow: 0;\n padding: 15px;\n padding-top: 0px;\n}\n\n.models h1 {\n margin-top: 0px;\n}\n\n.models .documents {\n flex-grow: 1;\n overflow: scroll;\n max-height: calc(100vh - 56px);\n}\n\n.models .documents table {\n /* max-width: -moz-fit-content;\n max-width: fit-content; */\n width: 100%;\n table-layout: auto;\n font-size: small;\n padding: 0;\n margin-right: 1em;\n white-space: nowrap;\n z-index: -1;\n border-collapse: collapse;\n line-height: 1.5em;\n}\n\n.models .documents table th {\n position: sticky;\n top:
|
|
3231
|
+
module.exports = ".models {\n position: relative;\n display: flex;\n flex-direction: row;\n min-height: calc(100% - 56px);\n}\n\n.models button.gray {\n color: black;\n background-color: #eee;\n}\n\n.models .model-selector {\n background-color: #eee;\n flex-grow: 0;\n padding: 15px;\n padding-top: 0px;\n}\n\n.models h1 {\n margin-top: 0px;\n}\n\n.models .documents {\n flex-grow: 1;\n overflow: scroll;\n max-height: calc(100vh - 56px);\n}\n\n.models .documents table {\n /* max-width: -moz-fit-content;\n max-width: fit-content; */\n width: 100%;\n table-layout: auto;\n font-size: small;\n padding: 0;\n margin-right: 1em;\n white-space: nowrap;\n z-index: -1;\n border-collapse: collapse;\n line-height: 1.5em;\n}\n\n.models .documents table th {\n position: sticky;\n top: 42px;\n background-color: white;\n z-index: 1;\n}\n\n.models .documents table th:after {\n content: \"\";\n position: absolute;\n left: 0;\n width: 100%;\n bottom: -1px;\n border-bottom: thin solid rgba(0, 0, 0, 0.12);\n}\n\n.models .documents table tr {\n color: black;\n border-spacing: 0px 0px;\n background-color: white;\n cursor: pointer;\n}\n\n.models .documents table tr:nth-child(even) {\n background-color: #f5f5f5;\n}\n\n.models .documents table tr:hover {\n background-color: #a7b9ff;\n}\n\n.models .documents table th,\ntd {\n border-bottom: thin solid rgba(0, 0, 0, 0.12);\n text-align: left;\n padding: 0 16px;\n height: 48px;\n}\n\n.models textarea {\n font-size: 1.2em;\n}\n\n.models .path-type {\n color: rgba(0, 0, 0, 0.36);\n font-size: 0.8em;\n}\n\n.models .documents-menu {\n position: fixed;\n background-color: white;\n z-index: 1;\n padding: 4px;\n display: flex;\n width: calc(100vw - 12rem);\n}\n\n.models .documents-menu .search-input {\n flex-grow: 1;\n align-items: center;\n}\n\n.models .search-input input {\n padding: 0.25em 0.5em;\n font-size: 1.1em;\n border: 1px solid #ddd;\n border-radius: 3px;\n width: calc(100% - 1em);\n}\n\n.models .sort-arrow {\n padding-left: 10px;\n padding-right: 10px;\n}\n\n.models .loader {\n width: 100%;\n text-align: center;\n}\n\n.models .loader img {\n height: 4em;\n}\n\n.models .documents .buttons {\n display: inline-flex;\n justify-content: space-around;\n align-items: center;\n}\n";
|
|
3232
3232
|
|
|
3233
3233
|
/***/ }),
|
|
3234
3234
|
|
|
@@ -3239,7 +3239,7 @@ module.exports = ".models {\n position: relative;\n display: flex;\n flex-dir
|
|
|
3239
3239
|
/***/ ((module) => {
|
|
3240
3240
|
|
|
3241
3241
|
"use strict";
|
|
3242
|
-
module.exports = "<div class=\"models\">\n <div>\n <div class=\"flex grow flex-col gap-y-5 overflow-
|
|
3242
|
+
module.exports = "<div class=\"models\">\n <div>\n <div class=\"flex grow flex-col gap-y-5 overflow-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)] w-48\">\n <div class=\"flex font-bold font-xl mt-4 pl-2\">\n Models\n </div>\n <nav class=\"flex flex-1 flex-col\">\n <ul role=\"list\" class=\"flex flex-1 flex-col gap-y-7\">\n <li>\n <ul role=\"list\">\n <li v-for=\"model in models\">\n <router-link\n :to=\"'/model/' + model\"\n class=\"block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700\"\n :class=\"model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'\">\n {{model}}\n </router-link>\n </li>\n </ul>\n </li>\n </ul>\n </nav>\n </div>\n\n </div>\n <div class=\"documents\" ref=\"documentsList\">\n <div class=\"relative h-[42px]\">\n <div class=\"documents-menu\">\n <div class=\"flex flex-row items-center w-full gap-2\">\n <form @submit.prevent=\"search\" class=\"flex-grow m-0\">\n <input class=\"w-full rounded-md p-1 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none\" type=\"text\" placeholder=\"Filter or text\" v-model=\"searchText\" />\n </form>\n <div>\n <span v-if=\"status === 'loading'\">Loading ...</span>\n <span v-if=\"status === 'loaded'\">{{numDocuments === 1 ? numDocuments+ ' document' : numDocuments + ' documents'}}</span>\n </div>\n <button\n @click=\"shouldShowExportModal = true\"\n type=\"button\"\n class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n Export\n </button>\n <button\n @click=\"shouldShowCreateModal = true;\"\n type=\"button\"\n class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n Create\n </button>\n <button\n @click=\"shouldShowFieldModal = true\"\n type=\"button\"\n class=\"rounded bg-ultramarine-600 px-2 py-2 text-sm font-semibold text-white shadow-sm hover:bg-ultramarine-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ultramarine-600\">\n Fields\n </button>\n <span class=\"isolate inline-flex rounded-md shadow-sm\">\n <button\n @click=\"outputType = 'table'\"\n type=\"button\"\n class=\"relative inline-flex items-center rounded-none rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n :class=\"outputType === 'table' ? 'bg-gray-200' : 'bg-white'\">\n <img class=\"h-5 w-5\" src=\"images/table.svg\">\n </button>\n <button\n @click=\"outputType = 'json'\"\n type=\"button\"\n class=\"relative -ml-px inline-flex items-center rounded-none rounded-r-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10\"\n :class=\"outputType === 'json' ? 'bg-gray-200' : 'bg-white'\">\n <img class=\"h-5 w-5\" src=\"images/json.svg\">\n </button>\n </span>\n </div>\n </div>\n </div>\n <div class=\"documents-container relative\">\n <table v-if=\"outputType === 'table'\">\n <thead>\n <th v-for=\"path in filteredPaths\">\n {{path.path}}\n <span class=\"path-type\">\n ({{(path.instance || 'unknown')}})\n </span>\n <span class=\"sort-arrow\" @click=\"sortDocs(1, path.path)\">{{sortBy[path.path] == 1 ? 'X' : '↑'}}</span>\n <span class=\"sort-arrow\" @click=\"sortDocs(-1, path.path)\">{{sortBy[path.path] == -1 ? 'X' : '↓'}}</span>\n </th>\n </thead>\n <tbody>\n <tr v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n <td v-for=\"schemaPath in filteredPaths\">\n <component\n :is=\"getComponentForPath(schemaPath)\"\n :value=\"getValueForPath(document, schemaPath.path)\"\n :allude=\"getReferenceModel(schemaPath)\">\n </component>\n </td>\n </tr>\n </tbody>\n </table>\n <div v-if=\"outputType === 'json'\">\n <div v-for=\"document in documents\" @click=\"$router.push('/model/' + currentModel + '/document/' + document._id)\" :key=\"document._id\">\n <list-json :value=\"filterDocument(document)\">\n </list-json>\n </div>\n </div>\n <div v-if=\"status === 'loading'\" class=\"loader\">\n <img src=\"images/loader.gif\">\n </div>\n </div>\n <modal v-if=\"shouldShowExportModal\">\n <template v-slot:body>\n <div class=\"modal-exit\" @click=\"shouldShowExportModal = false\">×</div>\n <export-query-results\n :schemaPaths=\"schemaPaths\"\n :filter=\"filter\"\n :currentModel=\"currentModel\"\n @done=\"shouldShowExportModal = false\">\n </export-query-results>\n </template>\n </modal>\n <modal v-if=\"shouldShowFieldModal\">\n <template v-slot:body>\n <div class=\"modal-exit\" @click=\"shouldShowFieldModal = false; selectedPaths = [...filteredPaths];\">×</div>\n <div v-for=\"(path, index) in schemaPaths\" :key=\"index\" style=\"margin-bottom: 0.5em\">\n <input type=\"checkbox\" :id=\"'path.path'+index\" @change=\"addOrRemove(path)\" :value=\"path.path\" :checked=\"isSelected(path.path)\" />\n <label :for=\"'path' + index\">{{path.path}}</label>\n </div>\n <div style=\"margin-top: 1em\">\n <button type=\"submit\" @click=\"filterDocuments()\" style=\"color: black;margin-right: 0.5em\">Filter Selection</button>\n <button type=\"submit\" @click=\"deselectAll()\" class=\"gray\" style=\"margin-right: 0.5em\">Deselect All</button>\n <button type=\"submit\" @click=\"resetDocuments()\" class=\"gray\">Cancel</button>\n\n </div>\n </template>\n </modal>\n <modal v-if=\"shouldShowCreateModal\">\n <template v-slot:body>\n <div class=\"modal-exit\" @click=\"shouldShowCreateModal = false;\">×</div>\n <create-document :currentModel=\"currentModel\" :paths=\"schemaPaths\" @close=\"closeCreationModal\"></create-document>\n </template>\n </modal>\n </div>\n</div>\n";
|
|
3243
3243
|
|
|
3244
3244
|
/***/ }),
|
|
3245
3245
|
|
package/frontend/public/tw.css
CHANGED
|
@@ -797,6 +797,10 @@ video {
|
|
|
797
797
|
height: 300px;
|
|
798
798
|
}
|
|
799
799
|
|
|
800
|
+
.h-\[42px\] {
|
|
801
|
+
height: 42px;
|
|
802
|
+
}
|
|
803
|
+
|
|
800
804
|
.h-\[calc\(100vh-55px\)\] {
|
|
801
805
|
height: calc(100vh - 55px);
|
|
802
806
|
}
|
|
@@ -829,6 +833,10 @@ video {
|
|
|
829
833
|
width: 100%;
|
|
830
834
|
}
|
|
831
835
|
|
|
836
|
+
.w-72 {
|
|
837
|
+
width: 18rem;
|
|
838
|
+
}
|
|
839
|
+
|
|
832
840
|
.min-w-0 {
|
|
833
841
|
min-width: 0px;
|
|
834
842
|
}
|
|
@@ -1140,11 +1148,6 @@ video {
|
|
|
1140
1148
|
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
|
|
1141
1149
|
}
|
|
1142
1150
|
|
|
1143
|
-
.bg-green-50 {
|
|
1144
|
-
--tw-bg-opacity: 1;
|
|
1145
|
-
background-color: rgb(240 253 244 / var(--tw-bg-opacity));
|
|
1146
|
-
}
|
|
1147
|
-
|
|
1148
1151
|
.bg-green-600 {
|
|
1149
1152
|
--tw-bg-opacity: 1;
|
|
1150
1153
|
background-color: rgb(22 163 74 / var(--tw-bg-opacity));
|
|
@@ -1438,11 +1441,6 @@ video {
|
|
|
1438
1441
|
color: rgb(17 24 39 / var(--tw-text-opacity));
|
|
1439
1442
|
}
|
|
1440
1443
|
|
|
1441
|
-
.text-green-700 {
|
|
1442
|
-
--tw-text-opacity: 1;
|
|
1443
|
-
color: rgb(21 128 61 / var(--tw-text-opacity));
|
|
1444
|
-
}
|
|
1445
|
-
|
|
1446
1444
|
.text-red-400 {
|
|
1447
1445
|
--tw-text-opacity: 1;
|
|
1448
1446
|
color: rgb(248 113 113 / var(--tw-text-opacity));
|
|
@@ -1529,18 +1527,14 @@ video {
|
|
|
1529
1527
|
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
|
|
1530
1528
|
}
|
|
1531
1529
|
|
|
1532
|
-
.ring-gray-900\/5 {
|
|
1533
|
-
--tw-ring-color: rgb(17 24 39 / 0.05);
|
|
1534
|
-
}
|
|
1535
|
-
|
|
1536
|
-
.ring-green-600\/20 {
|
|
1537
|
-
--tw-ring-color: rgb(22 163 74 / 0.2);
|
|
1538
|
-
}
|
|
1539
|
-
|
|
1540
1530
|
.ring-gray-600\/20 {
|
|
1541
1531
|
--tw-ring-color: rgb(75 85 99 / 0.2);
|
|
1542
1532
|
}
|
|
1543
1533
|
|
|
1534
|
+
.ring-gray-900\/5 {
|
|
1535
|
+
--tw-ring-color: rgb(17 24 39 / 0.05);
|
|
1536
|
+
}
|
|
1537
|
+
|
|
1544
1538
|
.filter {
|
|
1545
1539
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
1546
1540
|
}
|
|
@@ -1687,6 +1681,10 @@ video {
|
|
|
1687
1681
|
outline-color: #1823ff;
|
|
1688
1682
|
}
|
|
1689
1683
|
|
|
1684
|
+
.focus\:outline-ultramarine-50:focus {
|
|
1685
|
+
outline-color: #f1f5ff;
|
|
1686
|
+
}
|
|
1687
|
+
|
|
1690
1688
|
.focus\:ring-0:focus {
|
|
1691
1689
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1692
1690
|
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
@@ -1699,6 +1697,12 @@ video {
|
|
|
1699
1697
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
1700
1698
|
}
|
|
1701
1699
|
|
|
1700
|
+
.focus\:ring-1:focus {
|
|
1701
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1702
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
1703
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
1704
|
+
}
|
|
1705
|
+
|
|
1702
1706
|
.focus\:ring-blue-500:focus {
|
|
1703
1707
|
--tw-ring-opacity: 1;
|
|
1704
1708
|
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
|
|
@@ -1729,10 +1733,24 @@ video {
|
|
|
1729
1733
|
--tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
|
|
1730
1734
|
}
|
|
1731
1735
|
|
|
1736
|
+
.focus\:ring-ultramarine-50:focus {
|
|
1737
|
+
--tw-ring-opacity: 1;
|
|
1738
|
+
--tw-ring-color: rgb(241 245 255 / var(--tw-ring-opacity));
|
|
1739
|
+
}
|
|
1740
|
+
|
|
1741
|
+
.focus\:ring-ultramarine-200:focus {
|
|
1742
|
+
--tw-ring-opacity: 1;
|
|
1743
|
+
--tw-ring-color: rgb(206 218 255 / var(--tw-ring-opacity));
|
|
1744
|
+
}
|
|
1745
|
+
|
|
1732
1746
|
.focus\:ring-offset-2:focus {
|
|
1733
1747
|
--tw-ring-offset-width: 2px;
|
|
1734
1748
|
}
|
|
1735
1749
|
|
|
1750
|
+
.focus\:ring-offset-0:focus {
|
|
1751
|
+
--tw-ring-offset-width: 0px;
|
|
1752
|
+
}
|
|
1753
|
+
|
|
1736
1754
|
.focus\:ring-offset-gray-800:focus {
|
|
1737
1755
|
--tw-ring-offset-color: #1f2937;
|
|
1738
1756
|
}
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
|
|
44
44
|
.models .documents table th {
|
|
45
45
|
position: sticky;
|
|
46
|
-
top:
|
|
46
|
+
top: 42px;
|
|
47
47
|
background-color: white;
|
|
48
48
|
z-index: 1;
|
|
49
49
|
}
|
|
@@ -90,9 +90,12 @@ td {
|
|
|
90
90
|
}
|
|
91
91
|
|
|
92
92
|
.models .documents-menu {
|
|
93
|
+
position: fixed;
|
|
94
|
+
background-color: white;
|
|
95
|
+
z-index: 1;
|
|
96
|
+
padding: 4px;
|
|
93
97
|
display: flex;
|
|
94
|
-
|
|
95
|
-
width: calc(100vw - 220px);
|
|
98
|
+
width: calc(100vw - 12rem);
|
|
96
99
|
}
|
|
97
100
|
|
|
98
101
|
.models .documents-menu .search-input {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div class="models">
|
|
2
2
|
<div>
|
|
3
|
-
<div class="flex grow flex-col gap-y-5 overflow-
|
|
3
|
+
<div class="flex grow flex-col gap-y-5 overflow-auto border-r border-gray-200 bg-white px-2 h-[calc(100vh-55px)] w-48">
|
|
4
4
|
<div class="flex font-bold font-xl mt-4 pl-2">
|
|
5
5
|
Models
|
|
6
6
|
</div>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<li v-for="model in models">
|
|
12
12
|
<router-link
|
|
13
13
|
:to="'/model/' + model"
|
|
14
|
-
class="block rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700"
|
|
14
|
+
class="block truncate rounded-md py-2 pr-2 pl-2 text-sm font-semibold text-gray-700"
|
|
15
15
|
:class="model === currentModel ? 'bg-ultramarine-100 font-bold' : 'hover:bg-ultramarine-100'">
|
|
16
16
|
{{model}}
|
|
17
17
|
</router-link>
|
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
|
|
25
25
|
</div>
|
|
26
26
|
<div class="documents" ref="documentsList">
|
|
27
|
-
<div>
|
|
27
|
+
<div class="relative h-[42px]">
|
|
28
28
|
<div class="documents-menu">
|
|
29
29
|
<div class="flex flex-row items-center w-full gap-2">
|
|
30
30
|
<form @submit.prevent="search" class="flex-grow m-0">
|
|
31
|
-
<input class="w-full rounded-md p-1 outline-gray-300 text-lg" type="text" placeholder="Filter or text" v-model="searchText" />
|
|
31
|
+
<input class="w-full rounded-md p-1 outline-gray-300 text-lg focus:ring-1 focus:ring-ultramarine-200 focus:ring-offset-0 focus:outline-none" type="text" placeholder="Filter or text" v-model="searchText" />
|
|
32
32
|
</form>
|
|
33
33
|
<div>
|
|
34
34
|
<span v-if="status === 'loading'">Loading ...</span>
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
</div>
|
|
72
72
|
</div>
|
|
73
73
|
</div>
|
|
74
|
-
<div class="documents-container">
|
|
74
|
+
<div class="documents-container relative">
|
|
75
75
|
<table v-if="outputType === 'table'">
|
|
76
76
|
<thead>
|
|
77
77
|
<th v-for="path in filteredPaths">
|
|
@@ -105,37 +105,38 @@
|
|
|
105
105
|
<img src="images/loader.gif">
|
|
106
106
|
</div>
|
|
107
107
|
</div>
|
|
108
|
-
<modal v-if="shouldShowExportModal">
|
|
109
|
-
<template v-slot:body>
|
|
110
|
-
<div class="modal-exit" @click="shouldShowExportModal = false">×</div>
|
|
111
|
-
<export-query-results
|
|
112
|
-
:schemaPaths="schemaPaths"
|
|
113
|
-
:filter="filter"
|
|
114
|
-
:currentModel="currentModel"
|
|
115
|
-
@done="shouldShowExportModal = false">
|
|
116
|
-
</export-query-results>
|
|
117
|
-
</template>
|
|
118
|
-
</modal>
|
|
119
|
-
<modal v-if="shouldShowFieldModal">
|
|
120
|
-
<template v-slot:body>
|
|
121
|
-
<div class="modal-exit" @click="shouldShowFieldModal = false; selectedPaths = [...filteredPaths];">×</div>
|
|
122
|
-
<div v-for="(path, index) in schemaPaths" :key="index" style="margin-bottom: 0.5em">
|
|
123
|
-
<input type="checkbox" :id="'path.path'+index" @change="addOrRemove(path)" :value="path.path" :checked="isSelected(path.path)" />
|
|
124
|
-
<label :for="'path' + index">{{path.path}}</label>
|
|
125
|
-
</div>
|
|
126
|
-
<div style="margin-top: 1em">
|
|
127
|
-
<button type="submit" @click="filterDocuments()" style="color: black;margin-right: 0.5em">Filter Selection</button>
|
|
128
|
-
<button type="submit" @click="deselectAll()" class="gray" style="margin-right: 0.5em">Deselect All</button>
|
|
129
|
-
<button type="submit" @click="resetDocuments()" class="gray">Cancel</button>
|
|
130
|
-
|
|
131
|
-
</div>
|
|
132
|
-
</template>
|
|
133
|
-
</modal>
|
|
134
|
-
<modal v-if="shouldShowCreateModal">
|
|
135
|
-
<template v-slot:body>
|
|
136
|
-
<div class="modal-exit" @click="shouldShowCreateModal = false;">×</div>
|
|
137
|
-
<create-document :currentModel="currentModel" :paths="schemaPaths" @close="closeCreationModal"></create-document>
|
|
138
|
-
</template>
|
|
139
|
-
</modal>
|
|
140
108
|
</div>
|
|
109
|
+
|
|
110
|
+
<modal v-if="shouldShowExportModal">
|
|
111
|
+
<template v-slot:body>
|
|
112
|
+
<div class="modal-exit" @click="shouldShowExportModal = false">×</div>
|
|
113
|
+
<export-query-results
|
|
114
|
+
:schemaPaths="schemaPaths"
|
|
115
|
+
:filter="filter"
|
|
116
|
+
:currentModel="currentModel"
|
|
117
|
+
@done="shouldShowExportModal = false">
|
|
118
|
+
</export-query-results>
|
|
119
|
+
</template>
|
|
120
|
+
</modal>
|
|
121
|
+
<modal v-if="shouldShowFieldModal">
|
|
122
|
+
<template v-slot:body>
|
|
123
|
+
<div class="modal-exit" @click="shouldShowFieldModal = false; selectedPaths = [...filteredPaths];">×</div>
|
|
124
|
+
<div v-for="(path, index) in schemaPaths" :key="index" style="margin-bottom: 0.5em">
|
|
125
|
+
<input type="checkbox" :id="'path.path'+index" @change="addOrRemove(path)" :value="path.path" :checked="isSelected(path.path)" />
|
|
126
|
+
<label :for="'path' + index">{{path.path}}</label>
|
|
127
|
+
</div>
|
|
128
|
+
<div style="margin-top: 1em">
|
|
129
|
+
<button type="submit" @click="filterDocuments()" style="color: black;margin-right: 0.5em">Filter Selection</button>
|
|
130
|
+
<button type="submit" @click="deselectAll()" class="gray" style="margin-right: 0.5em">Deselect All</button>
|
|
131
|
+
<button type="submit" @click="resetDocuments()" class="gray">Cancel</button>
|
|
132
|
+
|
|
133
|
+
</div>
|
|
134
|
+
</template>
|
|
135
|
+
</modal>
|
|
136
|
+
<modal v-if="shouldShowCreateModal">
|
|
137
|
+
<template v-slot:body>
|
|
138
|
+
<div class="modal-exit" @click="shouldShowCreateModal = false;">×</div>
|
|
139
|
+
<create-document :currentModel="currentModel" :paths="schemaPaths" @close="closeCreationModal"></create-document>
|
|
140
|
+
</template>
|
|
141
|
+
</modal>
|
|
141
142
|
</div>
|
package/package.json
CHANGED
package/test.html
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Fixed Navbars with Scrollable Table</title>
|
|
7
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
8
|
+
</head>
|
|
9
|
+
<body class="h-screen flex flex-col">
|
|
10
|
+
|
|
11
|
+
<!-- Top-Level Navbar (Fixed) -->
|
|
12
|
+
<nav class="bg-blue-600 text-white p-4 fixed top-0 left-0 right-0 z-20">
|
|
13
|
+
Top-Level Navbar
|
|
14
|
+
</nav>
|
|
15
|
+
|
|
16
|
+
<!-- Side Navbar (Fixed) -->
|
|
17
|
+
<aside class="bg-gray-800 text-white w-64 p-4 fixed top-16 left-0 bottom-0 z-10">
|
|
18
|
+
Side Navbar
|
|
19
|
+
</aside>
|
|
20
|
+
|
|
21
|
+
<!-- Stacked Navigation Bar (Fixed Below Top Navbar) -->
|
|
22
|
+
<nav class="bg-gray-300 p-4 fixed top-16 left-64 right-0 z-20">
|
|
23
|
+
Stacked Navigation Bar
|
|
24
|
+
</nav>
|
|
25
|
+
|
|
26
|
+
<!-- Scrollable Table Container -->
|
|
27
|
+
<div class="flex-grow overflow-auto p-4 pl-64 pt-32 bg-gray-50" style="height: calc(100vh - 8rem);">
|
|
28
|
+
<div class="overflow-auto border border-gray-300" style="max-height: calc(100vh - 12rem);">
|
|
29
|
+
<table class="min-w-max border border-gray-300">
|
|
30
|
+
<thead class="bg-gray-300 sticky top-0 z-10">
|
|
31
|
+
<tr>
|
|
32
|
+
<!-- Generate many columns -->
|
|
33
|
+
<script>
|
|
34
|
+
for (let j = 0; j < 20; j++) {
|
|
35
|
+
document.write(`<th class="border p-2 whitespace-nowrap">Header ${j + 1}</th>`);
|
|
36
|
+
}
|
|
37
|
+
</script>
|
|
38
|
+
</tr>
|
|
39
|
+
</thead>
|
|
40
|
+
<tbody>
|
|
41
|
+
<!-- Generate many rows -->
|
|
42
|
+
<script>
|
|
43
|
+
for (let i = 0; i < 100; i++) {
|
|
44
|
+
document.write(`<tr class="border">`);
|
|
45
|
+
for (let j = 0; j < 20; j++) {
|
|
46
|
+
document.write(`<td class="border p-2 whitespace-nowrap">Row ${i + 1} Col ${j + 1}</td>`);
|
|
47
|
+
}
|
|
48
|
+
document.write(`</tr>`);
|
|
49
|
+
}
|
|
50
|
+
</script>
|
|
51
|
+
</tbody>
|
|
52
|
+
</table>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
|
|
56
|
+
</body>
|
|
57
|
+
</html>
|