solid_litequeen 0.19.3 → 0.20.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.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/app/assets/config/solid_litequeen_manifest.js +1 -0
- data/app/assets/stylesheets/solid_litequeen/tailwind.css +2 -0
- data/app/assets/tailwind/solid_litequeen/application.css +5 -0
- data/app/assets/tailwind/solid_litequeen/engine.css +267 -0
- data/app/javascript/solid_litequeen/controllers/command_palette_controller.js +5 -6
- data/app/javascript/solid_litequeen/controllers/table_relations_controller.js +17 -18
- data/app/javascript/solid_litequeen/vendor/dagre.min.js +3809 -0
- data/app/javascript/solid_litequeen/vendor/floating-ui-core.js +1 -0
- data/app/javascript/solid_litequeen/vendor/floating-ui-dom.js +1 -0
- data/app/javascript/solid_litequeen/vendor/joint.js +39629 -0
- data/app/views/layouts/solid_litequeen/application.html.erb +54 -67
- data/app/views/solid_litequeen/_command-palette.html.erb +46 -83
- data/app/views/solid_litequeen/_database-selector.html.erb +24 -26
- data/app/views/solid_litequeen/databases/_foreign-key-data.html.erb +31 -36
- data/app/views/solid_litequeen/databases/_table-data-context-dialog.html.erb +76 -22
- data/app/views/solid_litequeen/databases/_table-relationships-dialog.html.erb +43 -9
- data/app/views/solid_litequeen/databases/index.html.erb +67 -33
- data/app/views/solid_litequeen/databases/show.html.erb +49 -49
- data/app/views/solid_litequeen/databases/table_rows.html.erb +300 -232
- data/config/importmap.rb +0 -2
- data/lib/solid_litequeen/version.rb +1 -1
- metadata +22 -1
|
@@ -1,80 +1,67 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html class="text-base-content bg-base-100">
|
|
3
|
-
<head>
|
|
4
|
-
<title>Solid litequeen</title>
|
|
5
|
-
<%= csrf_meta_tags %>
|
|
6
|
-
<%= csp_meta_tag %>
|
|
7
2
|
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
|
|
3
|
+
<html lang="en" class="h-full">
|
|
4
|
+
<head>
|
|
5
|
+
<title>Solid litequeen</title>
|
|
6
|
+
<%= csrf_meta_tags %>
|
|
7
|
+
<%= csp_meta_tag %>
|
|
11
8
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<script src="https://cdn.jsdelivr.net/npm/@joint/core@4.0.1/dist/joint.js"></script>
|
|
17
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.min.js"></script>
|
|
18
|
-
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/core@1.7.2"></script>
|
|
19
|
-
<script src="https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.2"></script>
|
|
20
|
-
<style type="text/tailwindcss">
|
|
21
|
-
/* @plugin "@tailwindcss/forms"; */
|
|
22
|
-
|
|
23
|
-
/* @utility text-muted{
|
|
24
|
-
@apply text-base-content/60;
|
|
25
|
-
} */
|
|
9
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
10
|
+
<meta name="turbo-refresh-method" content="morph">
|
|
11
|
+
<meta name="turbo-refresh-scroll" content="preserve">
|
|
12
|
+
<meta name="view-transition" content="same-origin">
|
|
26
13
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
filter: invert(32%) sepia(65%) saturate(6380%) hue-rotate(219deg) brightness(98%) contrast(102%);
|
|
30
|
-
}
|
|
14
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
15
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
31
16
|
|
|
17
|
+
<link
|
|
18
|
+
rel="stylesheet"
|
|
19
|
+
href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap"
|
|
20
|
+
>
|
|
32
21
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
22
|
+
<%= stylesheet_link_tag "solid_litequeen/tailwind", "data-turbo-track": "reload" %>
|
|
23
|
+
<%= stylesheet_link_tag "solid_litequeen/application", media: "all", "data-turbo-track": "reload" %>
|
|
24
|
+
<%= javascript_include_tag "solid_litequeen/vendor/joint", "data-turbo-track": "reload" %>
|
|
25
|
+
<%= javascript_include_tag "solid_litequeen/vendor/dagre.min", "data-turbo-track": "reload" %>
|
|
26
|
+
<%= javascript_include_tag "solid_litequeen/vendor/floating-ui-core", "data-turbo-track": "reload" %>
|
|
27
|
+
<%= javascript_include_tag "solid_litequeen/vendor/floating-ui-dom", "data-turbo-track": "reload" %>
|
|
28
|
+
<%= javascript_importmap_tags "application", importmap: SolidLitequeen.importmap %>
|
|
36
29
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
30
|
+
<%= yield :head %>
|
|
31
|
+
</head>
|
|
40
32
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
33
|
+
<body class="min-h-screen antialiased">
|
|
34
|
+
<div class="mx-auto flex min-h-screen w-full max-w-6xl flex-col px-6 pb-12">
|
|
35
|
+
<header class="mt-8 flex flex-wrap items-center justify-between gap-4">
|
|
36
|
+
<div class="flex items-center gap-4">
|
|
37
|
+
<div
|
|
38
|
+
class="
|
|
39
|
+
flex h-11 w-11 items-center justify-center rounded-2xl
|
|
40
|
+
bg-[linear-gradient(135deg,var(--accent),var(--accent-warm))]
|
|
41
|
+
shadow-[0_18px_30px_-22px_var(--shadow-strong)]
|
|
42
|
+
"
|
|
43
|
+
>
|
|
44
|
+
<%= image_tag "solid_litequeen/icons/database.svg", class: "size-5 icon-on-accent" %>
|
|
45
|
+
</div>
|
|
44
46
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
<div>
|
|
48
|
+
<p class="text-xs uppercase tracking-[0.35em] text-faint">
|
|
49
|
+
Solid Litequeen
|
|
50
|
+
</p>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
49
53
|
|
|
54
|
+
<div class="flex flex-wrap items-center gap-3">
|
|
55
|
+
<%= render "solid_litequeen/database-selector" %>
|
|
56
|
+
<%= render "solid_litequeen/command-palette" %>
|
|
57
|
+
</div>
|
|
58
|
+
</header>
|
|
50
59
|
|
|
51
|
-
|
|
52
|
-
</style>
|
|
60
|
+
<main class="mt-8 flex-1"><%= yield %></main>
|
|
53
61
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</
|
|
59
|
-
<script>
|
|
60
|
-
const setTheme = () => {
|
|
61
|
-
const storedTheme = localStorage.getItem('theme');
|
|
62
|
-
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
63
|
-
document.documentElement.setAttribute('data-theme', storedTheme || (prefersDark ? 'sunset' : 'light'));
|
|
64
|
-
};
|
|
65
|
-
setTheme();
|
|
66
|
-
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', setTheme);
|
|
67
|
-
</script>
|
|
68
|
-
<body class="">
|
|
69
|
-
<header class="container flex items-center justify-between mx-auto mt-4 mb-8">
|
|
70
|
-
<%= render "solid_litequeen/database-selector" %>
|
|
71
|
-
|
|
72
|
-
<%= render "solid_litequeen/command-palette" %>
|
|
73
|
-
</header>
|
|
74
|
-
<%= yield %>
|
|
75
|
-
|
|
76
|
-
<footer class="container mx-auto mt-8 mb-4 text-center text-base-content/60 text-xs">
|
|
77
|
-
<p>Solid litequeen v<%= SolidLitequeen::VERSION %></p>
|
|
78
|
-
</footer>
|
|
79
|
-
</body>
|
|
62
|
+
<footer class="mt-12 text-center text-xs text-faint">
|
|
63
|
+
<p>Solid litequeen v<%= SolidLitequeen::VERSION %></p>
|
|
64
|
+
</footer>
|
|
65
|
+
</div>
|
|
66
|
+
</body>
|
|
80
67
|
</html>
|
|
@@ -1,91 +1,54 @@
|
|
|
1
|
-
<
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
@keyframes dialogExit {
|
|
20
|
-
from {
|
|
21
|
-
opacity: 1;
|
|
22
|
-
transform: scale(1);
|
|
23
|
-
}
|
|
24
|
-
to {
|
|
25
|
-
opacity: 0;
|
|
26
|
-
transform: scale(0.95);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
1
|
+
<section
|
|
2
|
+
data-controller="command-palette"
|
|
3
|
+
data-command_palette_data_path="<%= command_palette_data_path %>"
|
|
4
|
+
data-database_svg_img_path="<%= image_path("solid_litequeen/icons/database.svg") %>"
|
|
5
|
+
data-table_svg_img_path="<%= image_path("solid_litequeen/icons/table.svg") %>"
|
|
6
|
+
>
|
|
7
|
+
<button
|
|
8
|
+
id="commandPaletteTrigger"
|
|
9
|
+
class="group inline-flex items-center gap-3 rounded-full border border-[var(--border)] bg-[var(--surface)] px-4 py-2 text-sm font-medium text-[var(--text)] shadow-sm transition hover:-translate-y-0.5 hover:shadow-md"
|
|
10
|
+
>
|
|
11
|
+
<svg class="h-4 w-4 text-faint" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
12
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
13
|
+
</svg>
|
|
14
|
+
<span class="text-muted">Search databases and tables...</span>
|
|
15
|
+
<kbd class="slq-kbd ml-auto">
|
|
16
|
+
<span class="text-xs">⌘</span>K
|
|
17
|
+
</kbd>
|
|
18
|
+
</button>
|
|
29
19
|
|
|
30
|
-
|
|
20
|
+
<div id="commandPaletteModal" class="fixed inset-0 z-50 hidden">
|
|
21
|
+
<div class="fixed inset-0 slq-backdrop"></div>
|
|
31
22
|
|
|
32
|
-
<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
data-table_svg_img_path="<%= image_path("solid_litequeen/icons/table.svg") %>"
|
|
37
|
-
|
|
38
|
-
>
|
|
39
|
-
<!-- Command Palette Trigger -->
|
|
40
|
-
<button id="commandPaletteTrigger" class="flex items-center gap-2 px-3 py-2 text-sm bg-base-200 border border-base-content/20 hover:bg-base-100 rounded-md transition-colors">
|
|
41
|
-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
23
|
+
<div class="fixed inset-0 flex items-start justify-center pt-[12vh]">
|
|
24
|
+
<div id="commandPaletteDialog" class="slq-dialog slq-dialog-enter w-full max-w-2xl overflow-hidden mx-4">
|
|
25
|
+
<div class="flex items-center gap-3 border-b border-[var(--border)] px-4">
|
|
26
|
+
<svg class="h-4 w-4 text-faint" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
42
27
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
<!-- Backdrop -->
|
|
53
|
-
<div class="fixed inset-0 backdrop-blur "></div>
|
|
54
|
-
|
|
55
|
-
<!-- Dialog -->
|
|
56
|
-
<div class="fixed inset-0 flex items-start justify-center pt-[10vh]">
|
|
57
|
-
<div id="commandPaletteDialog" class="bg-base-200 border border-base-content/20 rounded-lg shadow-xl w-full max-w-2xl mx-4 dialog-enter">
|
|
58
|
-
<!-- Search Input -->
|
|
59
|
-
<div class="flex items-center border-b border-base-content/30 px-3">
|
|
60
|
-
<svg class="mr-2 h-4 w-4 shrink-0 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
61
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
62
|
-
</svg>
|
|
63
|
-
<input
|
|
64
|
-
id="commandPaletteInput"
|
|
65
|
-
type="text"
|
|
66
|
-
placeholder="Search databases and tables..."
|
|
67
|
-
class="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none border-0 focus:ring-0"
|
|
68
|
-
autocomplete="off"
|
|
69
|
-
/>
|
|
70
|
-
</div>
|
|
28
|
+
</svg>
|
|
29
|
+
<input
|
|
30
|
+
id="commandPaletteInput"
|
|
31
|
+
type="text"
|
|
32
|
+
placeholder="Search databases and tables..."
|
|
33
|
+
class="h-12 w-full bg-transparent text-sm text-[var(--text)] placeholder:text-faint focus:outline-none"
|
|
34
|
+
autocomplete="off"
|
|
35
|
+
/>
|
|
36
|
+
</div>
|
|
71
37
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
</div>
|
|
38
|
+
<div id="commandPaletteResults" class="max-h-[420px] overflow-y-auto">
|
|
39
|
+
<div id="noResults" class="py-8 text-center text-sm text-faint hidden">
|
|
40
|
+
No databases or tables found.
|
|
41
|
+
</div>
|
|
42
|
+
<div id="resultsList" class="p-2"></div>
|
|
43
|
+
</div>
|
|
79
44
|
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
45
|
+
<div class="border-t border-[var(--border)] px-4 py-3 text-xs text-faint">
|
|
46
|
+
<div class="flex items-center justify-between">
|
|
47
|
+
<span>Use ↑↓ to navigate, Enter to select, Esc to close</span>
|
|
48
|
+
<span id="resultsCount">0 results</span>
|
|
49
|
+
</div>
|
|
88
50
|
</div>
|
|
51
|
+
</div>
|
|
89
52
|
</div>
|
|
90
|
-
|
|
53
|
+
</div>
|
|
91
54
|
</section>
|
|
@@ -1,29 +1,27 @@
|
|
|
1
|
+
<% if controller.controller_name == "databases" && action_name.in?([ "show", "table_rows" ]) %>
|
|
2
|
+
<div class="flex items-center gap-2 rounded-full border border-[var(--border)] bg-[var(--surface)] px-3 py-2 shadow-sm">
|
|
3
|
+
<span class="text-[10px] font-semibold uppercase tracking-[0.2em] text-faint">DB</span>
|
|
4
|
+
<select
|
|
5
|
+
id="database-select"
|
|
6
|
+
class="min-w-[14rem] bg-transparent text-sm font-medium text-[var(--text)] focus:outline-none"
|
|
7
|
+
>
|
|
8
|
+
<option value="">Select a database...</option>
|
|
9
|
+
<% available_databases.each do |db| %>
|
|
10
|
+
<option value="<%= Base64.urlsafe_encode64(db.database) %>" <%= 'selected' if defined?(@database_id) && @database_id == Base64.urlsafe_encode64(db.database) %>>
|
|
11
|
+
<%= db.database %>
|
|
12
|
+
</option>
|
|
13
|
+
<% end %>
|
|
14
|
+
</select>
|
|
15
|
+
</div>
|
|
1
16
|
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<option value="<%= Base64.urlsafe_encode64(db.database) %>" <%= 'selected' if defined?(@database_id) && @database_id == Base64.urlsafe_encode64(db.database) %>>
|
|
9
|
-
<%= db.database %>
|
|
10
|
-
</option>
|
|
11
|
-
<% end %>
|
|
12
|
-
</select>
|
|
13
|
-
|
|
14
|
-
<script>
|
|
15
|
-
document.getElementById('database-select').addEventListener('change', function() {
|
|
16
|
-
if(!this.value){
|
|
17
|
-
Turbo.visit('<%= URI(database_path("")).path %>');
|
|
18
|
-
return
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
Turbo.visit('<%= URI(database_path("")).path %>' + this.value);
|
|
22
|
-
|
|
23
|
-
});
|
|
24
|
-
</script>
|
|
25
|
-
</div>
|
|
17
|
+
<script>
|
|
18
|
+
document.getElementById("database-select").addEventListener("change", function() {
|
|
19
|
+
if (!this.value) {
|
|
20
|
+
Turbo.visit("<%= URI(database_path("")).path %>");
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
26
23
|
|
|
27
|
-
|
|
24
|
+
Turbo.visit("<%= URI(database_path("")).path %>" + this.value);
|
|
25
|
+
});
|
|
26
|
+
</script>
|
|
28
27
|
<% end %>
|
|
29
|
-
|
|
@@ -1,38 +1,33 @@
|
|
|
1
|
-
<turbo-frame id="foreign-key-data-frame"
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
<span
|
|
7
|
-
<span class="
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
<div class="mx-auto my-4 p-4 max-w-[90%]">
|
|
12
|
-
<table class="min-w-full border border-base-content/20">
|
|
13
|
-
<thead class="bg-base-300 border-b border-base-content/20">
|
|
14
|
-
<tr>
|
|
15
|
-
<th class="px-6 py-3 text-left text-xs font-medium dark:font-bold text-base-content/80 uppercase tracking-wider">
|
|
16
|
-
Column Name
|
|
17
|
-
</th>
|
|
18
|
-
<th class="px-6 py-3 text-left text-xs font-medium dark:font-bold text-base-content/80 uppercase tracking-wider">
|
|
19
|
-
Value
|
|
20
|
-
</th>
|
|
21
|
-
</tr>
|
|
22
|
-
</thead>
|
|
23
|
-
<tbody class="bg-base-200 ">
|
|
24
|
-
<% @result.rows.each do |row| %>
|
|
25
|
-
<% @result.columns.zip(row).each do |column, value| %>
|
|
26
|
-
<tr class="border-b border-base-content/10 last:border-none hover:bg-base-100">
|
|
27
|
-
<td class="px-6 py-4 whitespace-nowrap text-sm text-base-content font-semibold"><%= column %></td>
|
|
28
|
-
<td class="px-6 py-4 whitespace-nowrap text-sm text-base-content/80 in-aria-busy:blur"><%= value&.truncate(80) %></td>
|
|
29
|
-
</tr>
|
|
30
|
-
<% end %>
|
|
31
|
-
<% end %>
|
|
32
|
-
|
|
33
|
-
</tbody>
|
|
34
|
-
</table>
|
|
1
|
+
<turbo-frame id="foreign-key-data-frame">
|
|
2
|
+
<div class="space-y-4 px-6 pb-6">
|
|
3
|
+
<div class="text-center">
|
|
4
|
+
<p class="text-xs uppercase tracking-[0.35em] text-faint">Foreign key</p>
|
|
5
|
+
<h1 class="mt-2 text-lg font-display font-semibold text-[var(--text)]">
|
|
6
|
+
<span class="text-muted"><%= @table_name %></span>
|
|
7
|
+
<span class="text-faint">></span>
|
|
8
|
+
<span><%= @target_table %></span>
|
|
9
|
+
</h1>
|
|
35
10
|
</div>
|
|
36
11
|
|
|
37
|
-
|
|
38
|
-
|
|
12
|
+
<div class="surface-card overflow-hidden">
|
|
13
|
+
<table class="w-full text-sm">
|
|
14
|
+
<thead class="bg-[var(--surface-strong)] text-xs uppercase tracking-[0.2em] text-faint">
|
|
15
|
+
<tr>
|
|
16
|
+
<th class="px-6 py-3 text-left">Column Name</th>
|
|
17
|
+
<th class="px-6 py-3 text-left">Value</th>
|
|
18
|
+
</tr>
|
|
19
|
+
</thead>
|
|
20
|
+
<tbody class="divide-y divide-[var(--border)]">
|
|
21
|
+
<% @result.rows.each do |row| %>
|
|
22
|
+
<% @result.columns.zip(row).each do |column, value| %>
|
|
23
|
+
<tr class="transition hover:bg-[var(--surface-muted)]">
|
|
24
|
+
<td class="px-6 py-4 whitespace-nowrap font-medium text-[var(--text)]"><%= column %></td>
|
|
25
|
+
<td class="px-6 py-4 whitespace-nowrap text-muted in-aria-busy:blur"><%= value&.truncate(80) %></td>
|
|
26
|
+
</tr>
|
|
27
|
+
<% end %>
|
|
28
|
+
<% end %>
|
|
29
|
+
</tbody>
|
|
30
|
+
</table>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
</turbo-frame>
|
|
@@ -14,28 +14,82 @@
|
|
|
14
14
|
end
|
|
15
15
|
%>
|
|
16
16
|
|
|
17
|
-
<dialog
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
17
|
+
<dialog
|
|
18
|
+
id="<%= dialog_id %>"
|
|
19
|
+
data-controller="dialog"
|
|
20
|
+
class="
|
|
21
|
+
slq-dialog m-auto w-[800px] max-w-[94vw] overscroll-y-contain
|
|
22
|
+
overflow-hidden
|
|
23
|
+
"
|
|
24
|
+
>
|
|
25
|
+
<div
|
|
26
|
+
class="
|
|
27
|
+
flex items-center justify-between border-b border-[var(--border)] px-6
|
|
28
|
+
py-4
|
|
29
|
+
"
|
|
30
|
+
>
|
|
31
|
+
<div>
|
|
32
|
+
<p class="text-xs uppercase tracking-[0.35em] text-faint">Value</p>
|
|
23
33
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<button title="Copy" data-action="clipboard#copy" class="absolute top-2 right-2 hover:cursor-pointer">
|
|
29
|
-
<%= image_tag "solid_litequeen/icons/copy-clipboard.svg", class: "in-data-copied:hidden size-5 dark:filter-white opacity-50" %>
|
|
30
|
-
<span class="hidden in-data-copied:block">Copied!</span>
|
|
31
|
-
</button>
|
|
32
|
-
|
|
33
|
-
<% if is_json %>
|
|
34
|
-
<pre data-clipboard-target="source" class="text-wrap overflow-auto w-full h-[inherit] p-2"><%= JSON.pretty_generate(parsed_json) %></pre>
|
|
35
|
-
<% else %>
|
|
36
|
-
<p data-clipboard-target="source" class="text-wrap overflow-auto w-[inherit] h-[inherit] p-2">
|
|
37
|
-
<%= data %>
|
|
38
|
-
</p>
|
|
39
|
-
<% end %>
|
|
34
|
+
<h1 class="mt-1 font-display text-lg font-semibold text-[var(--text)]">
|
|
35
|
+
<%= column_name %>
|
|
36
|
+
</h1>
|
|
40
37
|
</div>
|
|
38
|
+
|
|
39
|
+
<button
|
|
40
|
+
data-action="click->dialog#close"
|
|
41
|
+
class="
|
|
42
|
+
cursor-pointer rounded-full p-2 outline-none transition
|
|
43
|
+
hover:-translate-y-0.5 hover:shadow-md
|
|
44
|
+
"
|
|
45
|
+
>
|
|
46
|
+
<%= image_tag "solid_litequeen/icons/x.svg", class: "size-5 icon-muted" %>
|
|
47
|
+
</button>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div
|
|
51
|
+
data-controller="clipboard"
|
|
52
|
+
class="
|
|
53
|
+
relative m-6 h-80 max-h-80 overflow-hidden rounded-2xl border
|
|
54
|
+
border-[var(--border)] bg-[var(--surface-muted)]
|
|
55
|
+
"
|
|
56
|
+
>
|
|
57
|
+
<button
|
|
58
|
+
title="Copy"
|
|
59
|
+
data-action="clipboard#copy"
|
|
60
|
+
class="
|
|
61
|
+
absolute right-3 top-3 inline-flex items-center gap-2 rounded-full
|
|
62
|
+
border border-[var(--border)] bg-[var(--surface)] px-3 py-1 text-xs
|
|
63
|
+
font-semibold text-[var(--text-muted)] shadow-sm transition
|
|
64
|
+
hover:-translate-y-0.5 hover:shadow-md
|
|
65
|
+
"
|
|
66
|
+
>
|
|
67
|
+
<%= image_tag "solid_litequeen/icons/copy-clipboard.svg", class: "in-data-copied:hidden size-4 icon-muted" %>
|
|
68
|
+
<span class="in-data-copied:hidden">Copy</span>
|
|
69
|
+
|
|
70
|
+
<span class="hidden in-data-copied:block text-[var(--accent)]">
|
|
71
|
+
Copied
|
|
72
|
+
</span>
|
|
73
|
+
</button>
|
|
74
|
+
|
|
75
|
+
<% if is_json %>
|
|
76
|
+
<pre
|
|
77
|
+
data-clipboard-target="source"
|
|
78
|
+
class="
|
|
79
|
+
h-full overflow-auto p-4 text-xs font-mono leading-relaxed
|
|
80
|
+
text-[var(--text)]
|
|
81
|
+
"
|
|
82
|
+
><%= JSON.pretty_generate(parsed_json) %></pre>
|
|
83
|
+
<% else %>
|
|
84
|
+
<p
|
|
85
|
+
data-clipboard-target="source"
|
|
86
|
+
class="
|
|
87
|
+
h-full overflow-auto p-4 text-sm leading-relaxed
|
|
88
|
+
text-[var(--text)]
|
|
89
|
+
"
|
|
90
|
+
>
|
|
91
|
+
<%= data %>
|
|
92
|
+
</p>
|
|
93
|
+
<% end %>
|
|
94
|
+
</div>
|
|
41
95
|
</dialog>
|
|
@@ -1,13 +1,47 @@
|
|
|
1
|
+
<dialog
|
|
2
|
+
id="table_relationships"
|
|
3
|
+
data-controller="dialog table-relations"
|
|
4
|
+
data-relations="<%= @table_relations.to_json %>"
|
|
5
|
+
class="
|
|
6
|
+
slq-dialog m-auto h-[80vh] w-[1000px] overscroll-y-contain max-w-[96vw]
|
|
7
|
+
overflow-hidden
|
|
8
|
+
"
|
|
9
|
+
>
|
|
10
|
+
<div class="flex h-full flex-col">
|
|
11
|
+
<div
|
|
12
|
+
class="
|
|
13
|
+
flex items-center justify-between border-b border-[var(--border)]
|
|
14
|
+
px-6 py-4
|
|
15
|
+
"
|
|
16
|
+
>
|
|
17
|
+
<div>
|
|
18
|
+
<p class="text-xs uppercase tracking-[0.35em] text-faint">Diagram</p>
|
|
1
19
|
|
|
2
|
-
<
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
20
|
+
<h1 class="mt-1 font-display text-lg font-semibold text-[var(--text)]">
|
|
21
|
+
Table Relationships
|
|
22
|
+
</h1>
|
|
23
|
+
</div>
|
|
24
|
+
|
|
25
|
+
<button
|
|
26
|
+
data-action="click->dialog#close"
|
|
27
|
+
class="
|
|
28
|
+
cursor-pointer rounded-full p-2 outline-none transition
|
|
29
|
+
hover:-translate-y-0.5 hover:shadow-md
|
|
30
|
+
"
|
|
31
|
+
>
|
|
32
|
+
<%= image_tag "solid_litequeen/icons/x.svg", class: "size-5 icon-muted" %>
|
|
33
|
+
</button>
|
|
7
34
|
</div>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
35
|
+
|
|
36
|
+
<div class="flex-1 min-h-0 p-6">
|
|
37
|
+
<div
|
|
38
|
+
class="
|
|
39
|
+
surface-soft h-full w-full min-h-0 min-w-0 overflow-auto
|
|
40
|
+
overscroll-contain
|
|
41
|
+
"
|
|
42
|
+
>
|
|
43
|
+
<div id="paper" class="h-full w-full"></div>
|
|
44
|
+
</div>
|
|
12
45
|
</div>
|
|
46
|
+
</div>
|
|
13
47
|
</dialog>
|