quasar-ui-danx 0.4.95 → 0.4.99
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/dist/danx.es.js +24452 -22880
- package/dist/danx.es.js.map +1 -1
- package/dist/danx.umd.js +133 -122
- package/dist/danx.umd.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/Utility/Buttons/ActionButton.vue +11 -3
- package/src/components/Utility/Code/CodeViewer.vue +219 -0
- package/src/components/Utility/Code/CodeViewerCollapsed.vue +34 -0
- package/src/components/Utility/Code/CodeViewerFooter.vue +53 -0
- package/src/components/Utility/Code/LanguageBadge.vue +122 -0
- package/src/components/Utility/Code/MarkdownContent.vue +251 -0
- package/src/components/Utility/Code/index.ts +5 -0
- package/src/components/Utility/Dialogs/FullscreenCarouselDialog.vue +134 -38
- package/src/components/Utility/Files/CarouselHeader.vue +24 -0
- package/src/components/Utility/Files/FileMetadataDialog.vue +69 -0
- package/src/components/Utility/Files/FilePreview.vue +118 -166
- package/src/components/Utility/Files/index.ts +1 -0
- package/src/components/Utility/index.ts +1 -0
- package/src/composables/index.ts +5 -0
- package/src/composables/useCodeFormat.ts +199 -0
- package/src/composables/useCodeViewerCollapse.ts +125 -0
- package/src/composables/useCodeViewerEditor.ts +420 -0
- package/src/composables/useFilePreview.ts +119 -0
- package/src/composables/useTranscodeLoader.ts +68 -0
- package/src/helpers/formats/highlightSyntax.ts +327 -0
- package/src/helpers/formats/index.ts +3 -1
- package/src/helpers/formats/renderMarkdown.ts +338 -0
- package/src/styles/danx.scss +3 -0
- package/src/styles/themes/danx/code.scss +158 -0
- package/src/styles/themes/danx/index.scss +2 -0
- package/src/styles/themes/danx/markdown.scss +145 -0
- package/src/styles/themes/danx/scrollbar.scss +125 -0
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
// Code Viewer Theme
|
|
2
|
+
// Dark theme with syntax highlighting for JSON/YAML
|
|
3
|
+
|
|
4
|
+
.dx-code-viewer {
|
|
5
|
+
width: 100%;
|
|
6
|
+
height: 100%;
|
|
7
|
+
|
|
8
|
+
// ==========================================
|
|
9
|
+
// Collapsible mode
|
|
10
|
+
// ==========================================
|
|
11
|
+
&.is-collapsed {
|
|
12
|
+
height: auto;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Collapsed view - inline preview
|
|
16
|
+
.code-collapsed {
|
|
17
|
+
background-color: #1e1e1e;
|
|
18
|
+
border-radius: 0.375rem;
|
|
19
|
+
padding: 0.5rem 0.75rem;
|
|
20
|
+
font-family: 'Consolas', 'Monaco', 'Menlo', 'Ubuntu Mono', 'source-code-pro', monospace;
|
|
21
|
+
font-size: 0.875rem;
|
|
22
|
+
transition: background-color 0.15s ease;
|
|
23
|
+
|
|
24
|
+
&:hover {
|
|
25
|
+
background-color: #252526;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.code-collapsed-preview {
|
|
29
|
+
color: #d4d4d4;
|
|
30
|
+
white-space: nowrap;
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
text-overflow: ellipsis;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Collapse toggle button in expanded view
|
|
37
|
+
.collapse-toggle {
|
|
38
|
+
transition: color 0.15s ease;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// Clickable header area to collapse when expanded
|
|
42
|
+
.collapse-header {
|
|
43
|
+
position: absolute;
|
|
44
|
+
top: 0;
|
|
45
|
+
left: 0;
|
|
46
|
+
right: 0;
|
|
47
|
+
height: 1.5rem;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
z-index: 5;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// Code content area - the main display
|
|
53
|
+
.code-content {
|
|
54
|
+
// When collapsible, add padding for the collapse toggle button
|
|
55
|
+
&.is-collapsible {
|
|
56
|
+
padding-top: 1rem;
|
|
57
|
+
padding-left: 1rem;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
background-color: #1e1e1e;
|
|
61
|
+
color: #d4d4d4;
|
|
62
|
+
width: 100%;
|
|
63
|
+
min-height: 0;
|
|
64
|
+
font-family: 'Consolas', 'Monaco', 'Menlo', 'Ubuntu Mono', 'source-code-pro', monospace;
|
|
65
|
+
font-size: 0.875rem;
|
|
66
|
+
line-height: 1.6;
|
|
67
|
+
border-radius: 0.375rem 0.375rem 0 0;
|
|
68
|
+
padding: 1rem;
|
|
69
|
+
overflow: auto;
|
|
70
|
+
margin: 0;
|
|
71
|
+
box-sizing: border-box;
|
|
72
|
+
|
|
73
|
+
code {
|
|
74
|
+
white-space: pre-wrap;
|
|
75
|
+
word-break: break-word;
|
|
76
|
+
background: transparent;
|
|
77
|
+
color: inherit;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// Footer area
|
|
82
|
+
.code-footer {
|
|
83
|
+
background-color: #252526;
|
|
84
|
+
border-radius: 0 0 0.375rem 0.375rem;
|
|
85
|
+
padding: 0.25rem 0.5rem;
|
|
86
|
+
transition: background-color 0.2s ease;
|
|
87
|
+
|
|
88
|
+
&.has-error {
|
|
89
|
+
background-color: #5a1d1d;
|
|
90
|
+
border-top: 1px solid #be1100;
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Language badge
|
|
95
|
+
.language-badge {
|
|
96
|
+
background-color: #333333;
|
|
97
|
+
color: #808080;
|
|
98
|
+
padding: 0.25rem 0.5rem;
|
|
99
|
+
font-size: 0.7em;
|
|
100
|
+
text-transform: uppercase;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
// ==========================================
|
|
104
|
+
// Syntax highlighting classes
|
|
105
|
+
// ==========================================
|
|
106
|
+
|
|
107
|
+
// Keys (property names) - Light blue
|
|
108
|
+
.syntax-key {
|
|
109
|
+
color: #9cdcfe;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// Strings - Soft green
|
|
113
|
+
.syntax-string {
|
|
114
|
+
color: #9ae6b4;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// Numbers - Orange/salmon
|
|
118
|
+
.syntax-number {
|
|
119
|
+
color: #ce9178;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// Booleans - Blue
|
|
123
|
+
.syntax-boolean {
|
|
124
|
+
color: #569cd6;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
// Null - Blue
|
|
128
|
+
.syntax-null {
|
|
129
|
+
color: #569cd6;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// Punctuation - Gray
|
|
133
|
+
.syntax-punctuation {
|
|
134
|
+
color: #808080;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
// ==========================================
|
|
139
|
+
// Editable mode (contenteditable)
|
|
140
|
+
// ==========================================
|
|
141
|
+
.code-content.is-editable {
|
|
142
|
+
cursor: text;
|
|
143
|
+
outline: none;
|
|
144
|
+
border: 2px solid transparent;
|
|
145
|
+
transition: border-color 0.2s ease;
|
|
146
|
+
|
|
147
|
+
&:focus {
|
|
148
|
+
border-color: rgba(86, 156, 214, 0.6);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
&:hover:not(:focus) {
|
|
152
|
+
border-color: rgba(86, 156, 214, 0.3);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// Caret color
|
|
156
|
+
caret-color: #d4d4d4;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
// Markdown Content Theme
|
|
2
|
+
// Styles for rendered markdown content
|
|
3
|
+
|
|
4
|
+
.dx-markdown-content {
|
|
5
|
+
// Base styling
|
|
6
|
+
line-height: 1.6;
|
|
7
|
+
color: inherit;
|
|
8
|
+
|
|
9
|
+
// Headings
|
|
10
|
+
h1, h2, h3, h4, h5, h6 {
|
|
11
|
+
margin-top: 1.5em;
|
|
12
|
+
margin-bottom: 0.5em;
|
|
13
|
+
font-weight: 600;
|
|
14
|
+
line-height: 1.25;
|
|
15
|
+
|
|
16
|
+
&:first-child {
|
|
17
|
+
margin-top: 0;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
h1 { font-size: 2em; }
|
|
22
|
+
h2 { font-size: 1.5em; }
|
|
23
|
+
h3 { font-size: 1.25em; }
|
|
24
|
+
h4 { font-size: 1em; }
|
|
25
|
+
h5 { font-size: 0.875em; }
|
|
26
|
+
h6 { font-size: 0.85em; }
|
|
27
|
+
|
|
28
|
+
// Paragraphs
|
|
29
|
+
p {
|
|
30
|
+
margin: 1em 0;
|
|
31
|
+
|
|
32
|
+
&:first-child { margin-top: 0; }
|
|
33
|
+
&:last-child { margin-bottom: 0; }
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
// Inline code
|
|
37
|
+
code {
|
|
38
|
+
background: rgba(255, 255, 255, 0.1);
|
|
39
|
+
padding: 0.2em 0.4em;
|
|
40
|
+
border-radius: 3px;
|
|
41
|
+
font-size: 0.9em;
|
|
42
|
+
font-family: 'Fira Code', 'Monaco', monospace;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
// Code blocks
|
|
46
|
+
pre {
|
|
47
|
+
background: rgba(0, 0, 0, 0.3);
|
|
48
|
+
padding: 1em;
|
|
49
|
+
border-radius: 6px;
|
|
50
|
+
overflow-x: auto;
|
|
51
|
+
margin: 1em 0;
|
|
52
|
+
|
|
53
|
+
code {
|
|
54
|
+
background: transparent;
|
|
55
|
+
padding: 0;
|
|
56
|
+
font-size: 0.875em;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// Blockquotes
|
|
61
|
+
blockquote {
|
|
62
|
+
border-left: 4px solid rgba(255, 255, 255, 0.3);
|
|
63
|
+
margin: 1em 0;
|
|
64
|
+
padding: 0.5em 1em;
|
|
65
|
+
color: rgba(255, 255, 255, 0.7);
|
|
66
|
+
|
|
67
|
+
p:first-child { margin-top: 0; }
|
|
68
|
+
p:last-child { margin-bottom: 0; }
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Lists
|
|
72
|
+
ul, ol {
|
|
73
|
+
margin: 1em 0;
|
|
74
|
+
padding-left: 2em;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
li {
|
|
78
|
+
margin: 0.25em 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
ul {
|
|
82
|
+
list-style-type: disc;
|
|
83
|
+
|
|
84
|
+
ul {
|
|
85
|
+
list-style-type: circle;
|
|
86
|
+
|
|
87
|
+
ul {
|
|
88
|
+
list-style-type: square;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
ol {
|
|
94
|
+
list-style-type: decimal;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// Links
|
|
98
|
+
a {
|
|
99
|
+
color: #60a5fa; // blue-400
|
|
100
|
+
text-decoration: none;
|
|
101
|
+
|
|
102
|
+
&:hover {
|
|
103
|
+
text-decoration: underline;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// Images
|
|
108
|
+
img {
|
|
109
|
+
max-width: 100%;
|
|
110
|
+
height: auto;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// Horizontal rules
|
|
114
|
+
hr {
|
|
115
|
+
border: none;
|
|
116
|
+
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
|
117
|
+
margin: 2em 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// Bold and italic
|
|
121
|
+
strong { font-weight: 600; }
|
|
122
|
+
em { font-style: italic; }
|
|
123
|
+
|
|
124
|
+
// Tables
|
|
125
|
+
table {
|
|
126
|
+
border-collapse: collapse;
|
|
127
|
+
width: 100%;
|
|
128
|
+
margin: 1em 0;
|
|
129
|
+
|
|
130
|
+
th, td {
|
|
131
|
+
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
132
|
+
padding: 0.5em 1em;
|
|
133
|
+
text-align: left;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
th {
|
|
137
|
+
background: rgba(255, 255, 255, 0.1);
|
|
138
|
+
font-weight: 600;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
tr:nth-child(even) {
|
|
142
|
+
background: rgba(255, 255, 255, 0.05);
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
// Custom Scrollbar Styles
|
|
2
|
+
// Thin, overlay scrollbar that fades based on hover state
|
|
3
|
+
// Usage: Apply .dx-scrollbar class to any scrollable container
|
|
4
|
+
|
|
5
|
+
// Scrollbar dimensions
|
|
6
|
+
$scrollbar-width: 4px;
|
|
7
|
+
$scrollbar-width-hover: 8px;
|
|
8
|
+
$scrollbar-track-color: transparent;
|
|
9
|
+
$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
|
|
10
|
+
$scrollbar-thumb-hover-color: rgba(255, 255, 255, 0.9);
|
|
11
|
+
$scrollbar-transition: all 0.3s ease;
|
|
12
|
+
|
|
13
|
+
// Mixin for scrollbar styles (reusable)
|
|
14
|
+
@mixin dx-scrollbar-base {
|
|
15
|
+
// Firefox
|
|
16
|
+
scrollbar-width: thin;
|
|
17
|
+
scrollbar-color: transparent transparent;
|
|
18
|
+
transition: scrollbar-color 0.3s ease;
|
|
19
|
+
|
|
20
|
+
// Webkit (Chrome, Safari, Edge)
|
|
21
|
+
&::-webkit-scrollbar {
|
|
22
|
+
width: $scrollbar-width;
|
|
23
|
+
height: $scrollbar-width;
|
|
24
|
+
transition: $scrollbar-transition;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&::-webkit-scrollbar-track {
|
|
28
|
+
background: $scrollbar-track-color;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&::-webkit-scrollbar-thumb {
|
|
32
|
+
background: transparent;
|
|
33
|
+
border-radius: $scrollbar-width-hover;
|
|
34
|
+
transition: $scrollbar-transition;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&::-webkit-scrollbar-corner {
|
|
38
|
+
background: transparent;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Main scrollbar class (light - for dark backgrounds)
|
|
43
|
+
.dx-scrollbar {
|
|
44
|
+
@include dx-scrollbar-base;
|
|
45
|
+
|
|
46
|
+
// Container hovered or focused - show scrollbar at 0.2 opacity
|
|
47
|
+
&:hover,
|
|
48
|
+
&:focus,
|
|
49
|
+
&:focus-within {
|
|
50
|
+
scrollbar-color: $scrollbar-thumb-color transparent;
|
|
51
|
+
|
|
52
|
+
&::-webkit-scrollbar-thumb {
|
|
53
|
+
background: $scrollbar-thumb-color;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Scrollbar directly hovered - full opacity and wider
|
|
58
|
+
&:hover::-webkit-scrollbar,
|
|
59
|
+
&:focus::-webkit-scrollbar,
|
|
60
|
+
&:focus-within::-webkit-scrollbar {
|
|
61
|
+
width: $scrollbar-width;
|
|
62
|
+
height: $scrollbar-width;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
&:hover::-webkit-scrollbar-thumb:hover {
|
|
66
|
+
background: $scrollbar-thumb-hover-color;
|
|
67
|
+
width: $scrollbar-width-hover;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// Make scrollbar wider on hover
|
|
71
|
+
&::-webkit-scrollbar:hover {
|
|
72
|
+
width: $scrollbar-width-hover;
|
|
73
|
+
height: $scrollbar-width-hover;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// Active/dragging state
|
|
77
|
+
&::-webkit-scrollbar-thumb:active {
|
|
78
|
+
background: $scrollbar-thumb-hover-color;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// Dark variant (for light backgrounds)
|
|
83
|
+
.dx-scrollbar-dark {
|
|
84
|
+
@include dx-scrollbar-base;
|
|
85
|
+
|
|
86
|
+
&:hover,
|
|
87
|
+
&:focus,
|
|
88
|
+
&:focus-within {
|
|
89
|
+
scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
|
|
90
|
+
|
|
91
|
+
&::-webkit-scrollbar-thumb {
|
|
92
|
+
background: rgba(0, 0, 0, 0.2);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&:hover::-webkit-scrollbar,
|
|
97
|
+
&:focus::-webkit-scrollbar,
|
|
98
|
+
&:focus-within::-webkit-scrollbar {
|
|
99
|
+
width: $scrollbar-width;
|
|
100
|
+
height: $scrollbar-width;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&:hover::-webkit-scrollbar-thumb:hover {
|
|
104
|
+
background: rgba(0, 0, 0, 0.7);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&::-webkit-scrollbar:hover {
|
|
108
|
+
width: $scrollbar-width-hover;
|
|
109
|
+
height: $scrollbar-width-hover;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
&::-webkit-scrollbar-thumb:active {
|
|
113
|
+
background: rgba(0, 0, 0, 0.7);
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// Utility to hide scrollbar completely but keep scrolling
|
|
118
|
+
.dx-scrollbar-hidden {
|
|
119
|
+
scrollbar-width: none;
|
|
120
|
+
-ms-overflow-style: none;
|
|
121
|
+
|
|
122
|
+
&::-webkit-scrollbar {
|
|
123
|
+
display: none;
|
|
124
|
+
}
|
|
125
|
+
}
|