quasar-ui-danx 0.4.94 → 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.
Files changed (37) hide show
  1. package/dist/danx.es.js +24432 -22819
  2. package/dist/danx.es.js.map +1 -1
  3. package/dist/danx.umd.js +130 -119
  4. package/dist/danx.umd.js.map +1 -1
  5. package/dist/style.css +1 -1
  6. package/package.json +1 -1
  7. package/src/components/Utility/Buttons/ActionButton.vue +11 -3
  8. package/src/components/Utility/Code/CodeViewer.vue +219 -0
  9. package/src/components/Utility/Code/CodeViewerCollapsed.vue +34 -0
  10. package/src/components/Utility/Code/CodeViewerFooter.vue +53 -0
  11. package/src/components/Utility/Code/LanguageBadge.vue +122 -0
  12. package/src/components/Utility/Code/MarkdownContent.vue +251 -0
  13. package/src/components/Utility/Code/index.ts +5 -0
  14. package/src/components/Utility/Dialogs/FullscreenCarouselDialog.vue +134 -38
  15. package/src/components/Utility/Files/CarouselHeader.vue +24 -0
  16. package/src/components/Utility/Files/FileMetadataDialog.vue +69 -0
  17. package/src/components/Utility/Files/FilePreview.vue +124 -162
  18. package/src/components/Utility/Files/index.ts +1 -0
  19. package/src/components/Utility/index.ts +1 -0
  20. package/src/composables/index.ts +5 -0
  21. package/src/composables/useCodeFormat.ts +199 -0
  22. package/src/composables/useCodeViewerCollapse.ts +125 -0
  23. package/src/composables/useCodeViewerEditor.ts +420 -0
  24. package/src/composables/useFilePreview.ts +119 -0
  25. package/src/composables/useTranscodeLoader.ts +68 -0
  26. package/src/helpers/filePreviewHelpers.ts +31 -0
  27. package/src/helpers/formats/highlightSyntax.ts +327 -0
  28. package/src/helpers/formats/index.ts +3 -1
  29. package/src/helpers/formats/renderMarkdown.ts +338 -0
  30. package/src/helpers/objectStore.ts +10 -2
  31. package/src/styles/danx.scss +3 -0
  32. package/src/styles/themes/danx/code.scss +158 -0
  33. package/src/styles/themes/danx/index.scss +2 -0
  34. package/src/styles/themes/danx/markdown.scss +145 -0
  35. package/src/styles/themes/danx/scrollbar.scss +125 -0
  36. package/src/svg/GoogleDocsIcon.vue +88 -0
  37. package/src/svg/index.ts +1 -0
package/src/styles/themes/danx/scrollbar.scss ADDED
@@ -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
+ }
package/src/svg/GoogleDocsIcon.vue ADDED
@@ -0,0 +1,88 @@
1
+ <template>
2
+ <svg
3
+ viewBox="0 0 47 65"
4
+ xmlns="http://www.w3.org/2000/svg"
5
+ preserveAspectRatio="xMidYMid meet"
6
+ >
7
+ <defs>
8
+ <linearGradient
9
+ id="gdoc-gradient"
10
+ x1="50%"
11
+ y1="8.59%"
12
+ x2="50%"
13
+ y2="100%"
14
+ >
15
+ <stop
16
+ stop-color="#1A237E"
17
+ stop-opacity="0.2"
18
+ offset="0%"
19
+ />
20
+ <stop
21
+ stop-color="#1A237E"
22
+ stop-opacity="0.02"
23
+ offset="100%"
24
+ />
25
+ </linearGradient>
26
+ <radialGradient
27
+ id="gdoc-radial"
28
+ cx="3.17%"
29
+ cy="2.72%"
30
+ r="161.25%"
31
+ >
32
+ <stop
33
+ stop-color="#FFFFFF"
34
+ stop-opacity="0.1"
35
+ offset="0%"
36
+ />
37
+ <stop
38
+ stop-color="#FFFFFF"
39
+ stop-opacity="0"
40
+ offset="100%"
41
+ />
42
+ </radialGradient>
43
+ </defs>
44
+ <!-- Main document shape -->
45
+ <path
46
+ d="M29.375,0 L4.406,0 C1.983,0 0,1.994 0,4.432 L0,60.568 C0,63.006 1.983,65 4.406,65 L42.594,65 C45.017,65 47,63.006 47,60.568 L47,17.727 L36.719,10.341 L29.375,0 Z"
47
+ fill="#4285F4"
48
+ />
49
+ <!-- Corner fold shadow -->
50
+ <polygon
51
+ fill="url(#gdoc-gradient)"
52
+ points="30.664 16.431 47 32.858 47 17.727"
53
+ />
54
+ <!-- Text lines -->
55
+ <path
56
+ d="M11.75,47.273 L35.25,47.273 L35.25,44.318 L11.75,44.318 L11.75,47.273 Z M11.75,53.182 L29.375,53.182 L29.375,50.227 L11.75,50.227 L11.75,53.182 Z M11.75,32.5 L11.75,35.455 L35.25,35.455 L35.25,32.5 L11.75,32.5 Z M11.75,41.364 L35.25,41.364 L35.25,38.409 L11.75,38.409 L11.75,41.364 Z"
57
+ fill="#F1F1F1"
58
+ />
59
+ <!-- Corner fold -->
60
+ <path
61
+ d="M29.375,0 L29.375,13.295 C29.375,15.744 31.347,17.727 33.781,17.727 L47,17.727 L29.375,0 Z"
62
+ fill="#A1C2FA"
63
+ />
64
+ <!-- Top highlight -->
65
+ <path
66
+ d="M4.406,0 C1.983,0 0,1.994 0,4.432 L0,4.801 C0,2.364 1.983,0.369 4.406,0.369 L29.375,0.369 L29.375,0 L4.406,0 Z"
67
+ fill="#FFFFFF"
68
+ fill-opacity="0.2"
69
+ />
70
+ <!-- Bottom shadow -->
71
+ <path
72
+ d="M42.594,64.631 L4.406,64.631 C1.983,64.631 0,62.636 0,60.199 L0,60.568 C0,63.006 1.983,65 4.406,65 L42.594,65 C45.017,65 47,63.006 47,60.568 L47,60.199 C47,62.636 45.017,64.631 42.594,64.631 Z"
73
+ fill="#1A237E"
74
+ fill-opacity="0.2"
75
+ />
76
+ <!-- Fold edge shadow -->
77
+ <path
78
+ d="M33.781,17.727 C31.347,17.727 29.375,15.744 29.375,13.295 L29.375,13.665 C29.375,16.113 31.347,18.097 33.781,18.097 L47,18.097 L47,17.727 L33.781,17.727 Z"
79
+ fill="#1A237E"
80
+ fill-opacity="0.1"
81
+ />
82
+ <!-- Overlay gradient -->
83
+ <path
84
+ d="M29.375,0 L4.406,0 C1.983,0 0,1.994 0,4.432 L0,60.568 C0,63.006 1.983,65 4.406,65 L42.594,65 C45.017,65 47,63.006 47,60.568 L47,17.727 L29.375,0 Z"
85
+ fill="url(#gdoc-radial)"
86
+ />
87
+ </svg>
88
+ </template>
package/src/svg/index.ts CHANGED
@@ -2,6 +2,7 @@ export { default as CaretDownIcon } from "./CaretDownIcon.svg";
2
2
  export { default as DragHandleDotsIcon } from "./DragHandleDotsIcon.svg";
3
3
  export { default as DragHandleIcon } from "./DragHandleIcon.svg";
4
4
  export { default as FilterIcon } from "./FilterIcon.svg";
5
+ export { default as GoogleDocsIcon } from "./GoogleDocsIcon.vue";
5
6
  export { default as ImageIcon } from "./ImageIcon.svg";
6
7
  export { default as PdfIcon } from "./PdfIcon.svg";
7
8
  export { default as PercentIcon } from "./PercentIcon.svg";