divhunt 2.0.5 → 2.0.6

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 (121) hide show
  1. package/package.json +1 -1
  2. package/addons/render/elements/front/items/self/base/menu/menu.js +0 -96
  3. package/addons/render/elements/front/items/self/base/menu/styles/base.css +0 -116
  4. package/addons/render/elements/front/items/self/base/menu/styles/sizes.css +0 -27
  5. package/addons/render/elements/front/items/self/base/menu/styles/variants.css +0 -99
  6. package/addons/render/elements/front/items/self/base/tag/tag.css +0 -199
  7. package/addons/render/elements/front/items/self/base/tag/tag.js +0 -37
  8. package/addons/render/elements/front/items/self/cards/basic/basic.js +0 -89
  9. package/addons/render/elements/front/items/self/cards/basic/styles/base.css +0 -66
  10. package/addons/render/elements/front/items/self/cards/basic/styles/sizes.css +0 -32
  11. package/addons/render/elements/front/items/self/cards/basic/styles/variants.css +0 -99
  12. package/addons/render/elements/front/items/self/cards/list/list.js +0 -108
  13. package/addons/render/elements/front/items/self/cards/list/styles/base.css +0 -96
  14. package/addons/render/elements/front/items/self/cards/list/styles/sizes.css +0 -32
  15. package/addons/render/elements/front/items/self/cards/list/styles/variants.css +0 -99
  16. package/addons/render/elements/front/items/self/cards/media/media.js +0 -116
  17. package/addons/render/elements/front/items/self/cards/media/styles/base.css +0 -126
  18. package/addons/render/elements/front/items/self/cards/media/styles/sizes.css +0 -49
  19. package/addons/render/elements/front/items/self/cards/media/styles/variants.css +0 -74
  20. package/addons/render/elements/front/items/self/cards/profile/profile.js +0 -95
  21. package/addons/render/elements/front/items/self/cards/profile/styles/base.css +0 -142
  22. package/addons/render/elements/front/items/self/cards/profile/styles/sizes.css +0 -43
  23. package/addons/render/elements/front/items/self/cards/profile/styles/variants.css +0 -131
  24. package/addons/render/elements/front/items/self/cards/stat/stat.js +0 -117
  25. package/addons/render/elements/front/items/self/cards/stat/styles/base.css +0 -97
  26. package/addons/render/elements/front/items/self/cards/stat/styles/sizes.css +0 -49
  27. package/addons/render/elements/front/items/self/cards/stat/styles/variants.css +0 -124
  28. package/addons/render/elements/front/items/self/content/html/html.css +0 -93
  29. package/addons/render/elements/front/items/self/content/html/html.js +0 -40
  30. package/addons/render/elements/front/items/self/content/markdown/markdown.css +0 -200
  31. package/addons/render/elements/front/items/self/content/markdown/markdown.js +0 -120
  32. package/addons/render/elements/front/items/self/data/comments/comments.css +0 -253
  33. package/addons/render/elements/front/items/self/data/comments/comments.js +0 -134
  34. package/addons/render/elements/front/items/self/data/files/files.css +0 -116
  35. package/addons/render/elements/front/items/self/data/files/files.js +0 -85
  36. package/addons/render/elements/front/items/self/data/folders/folders.css +0 -104
  37. package/addons/render/elements/front/items/self/data/folders/folders.js +0 -73
  38. package/addons/render/elements/front/items/self/data/inbox/inbox.css +0 -225
  39. package/addons/render/elements/front/items/self/data/inbox/inbox.js +0 -111
  40. package/addons/render/elements/front/items/self/data/logs/logs.css +0 -133
  41. package/addons/render/elements/front/items/self/data/logs/logs.js +0 -65
  42. package/addons/render/elements/front/items/self/data/plans/plans.css +0 -231
  43. package/addons/render/elements/front/items/self/data/plans/plans.js +0 -104
  44. package/addons/render/elements/front/items/self/data/properties/properties.css +0 -108
  45. package/addons/render/elements/front/items/self/data/properties/properties.js +0 -156
  46. package/addons/render/elements/front/items/self/data/table/table.css +0 -153
  47. package/addons/render/elements/front/items/self/data/table/table.js +0 -106
  48. package/addons/render/elements/front/items/self/data/timeline/timeline.css +0 -127
  49. package/addons/render/elements/front/items/self/data/timeline/timeline.js +0 -57
  50. package/addons/render/elements/front/items/self/feedback/alert/alert.css +0 -258
  51. package/addons/render/elements/front/items/self/feedback/alert/alert.js +0 -67
  52. package/addons/render/elements/front/items/self/feedback/confirm/confirm.css +0 -229
  53. package/addons/render/elements/front/items/self/feedback/confirm/confirm.js +0 -81
  54. package/addons/render/elements/front/items/self/feedback/loader/loader.css +0 -203
  55. package/addons/render/elements/front/items/self/feedback/loader/loader.js +0 -25
  56. package/addons/render/elements/front/items/self/feedback/progress/progress.css +0 -136
  57. package/addons/render/elements/front/items/self/feedback/progress/progress.js +0 -40
  58. package/addons/render/elements/front/items/self/form/button/button.js +0 -105
  59. package/addons/render/elements/front/items/self/form/button/styles/base.css +0 -176
  60. package/addons/render/elements/front/items/self/form/button/styles/sizes.css +0 -78
  61. package/addons/render/elements/front/items/self/form/button/styles/variants.css +0 -421
  62. package/addons/render/elements/front/items/self/form/checkbox/checkbox.js +0 -57
  63. package/addons/render/elements/front/items/self/form/checkbox/styles/base.css +0 -52
  64. package/addons/render/elements/front/items/self/form/checkbox/styles/sizes.css +0 -39
  65. package/addons/render/elements/front/items/self/form/checkbox/styles/variants.css +0 -121
  66. package/addons/render/elements/front/items/self/form/field/field.css +0 -96
  67. package/addons/render/elements/front/items/self/form/field/field.js +0 -39
  68. package/addons/render/elements/front/items/self/form/input/input.css +0 -111
  69. package/addons/render/elements/front/items/self/form/input/input.js +0 -78
  70. package/addons/render/elements/front/items/self/form/input/styles/base.css +0 -26
  71. package/addons/render/elements/front/items/self/form/input/styles/sizes.css +0 -15
  72. package/addons/render/elements/front/items/self/form/input/styles/variants.css +0 -98
  73. package/addons/render/elements/front/items/self/form/radio/radio.js +0 -57
  74. package/addons/render/elements/front/items/self/form/radio/styles/base.css +0 -48
  75. package/addons/render/elements/front/items/self/form/radio/styles/sizes.css +0 -36
  76. package/addons/render/elements/front/items/self/form/radio/styles/variants.css +0 -121
  77. package/addons/render/elements/front/items/self/form/rating/rating.css +0 -95
  78. package/addons/render/elements/front/items/self/form/rating/rating.js +0 -88
  79. package/addons/render/elements/front/items/self/form/section/section.css +0 -107
  80. package/addons/render/elements/front/items/self/form/section/section.js +0 -39
  81. package/addons/render/elements/front/items/self/form/slider/slider.css +0 -244
  82. package/addons/render/elements/front/items/self/form/slider/slider.js +0 -69
  83. package/addons/render/elements/front/items/self/form/textarea/textarea.css +0 -117
  84. package/addons/render/elements/front/items/self/form/textarea/textarea.js +0 -69
  85. package/addons/render/elements/front/items/self/layout/empty/empty.css +0 -154
  86. package/addons/render/elements/front/items/self/layout/empty/empty.js +0 -43
  87. package/addons/render/elements/front/items/self/layout/heading/heading.css +0 -117
  88. package/addons/render/elements/front/items/self/layout/heading/heading.js +0 -47
  89. package/addons/render/elements/front/items/self/layout/hero/hero.js +0 -88
  90. package/addons/render/elements/front/items/self/layout/hero/styles/base.css +0 -81
  91. package/addons/render/elements/front/items/self/layout/hero/styles/sizes.css +0 -24
  92. package/addons/render/elements/front/items/self/layout/hero/styles/variants.css +0 -98
  93. package/addons/render/elements/front/items/self/navigation/breadcrumb/addon/_class/addon.js +0 -9
  94. package/addons/render/elements/front/items/self/navigation/breadcrumb/addon/functions/get.js +0 -22
  95. package/addons/render/elements/front/items/self/navigation/breadcrumb/breadcrumb.css +0 -13
  96. package/addons/render/elements/front/items/self/navigation/breadcrumb/breadcrumb.js +0 -51
  97. package/addons/render/elements/front/items/self/navigation/footer/addon/_class/addon.js +0 -11
  98. package/addons/render/elements/front/items/self/navigation/footer/addon/functions/columns.js +0 -11
  99. package/addons/render/elements/front/items/self/navigation/footer/addon/functions/get.js +0 -34
  100. package/addons/render/elements/front/items/self/navigation/footer/footer.css +0 -283
  101. package/addons/render/elements/front/items/self/navigation/footer/footer.js +0 -139
  102. package/addons/render/elements/front/items/self/navigation/navbar/addon/_class/addon.js +0 -13
  103. package/addons/render/elements/front/items/self/navigation/navbar/addon/functions/active.js +0 -7
  104. package/addons/render/elements/front/items/self/navigation/navbar/addon/functions/get.js +0 -31
  105. package/addons/render/elements/front/items/self/navigation/navbar/navbar.css +0 -140
  106. package/addons/render/elements/front/items/self/navigation/navbar/navbar.js +0 -118
  107. package/addons/render/elements/front/items/self/navigation/pagination/pagination.css +0 -160
  108. package/addons/render/elements/front/items/self/navigation/pagination/pagination.js +0 -131
  109. package/addons/render/elements/front/items/self/navigation/sidebar/addon/_class/addon.js +0 -12
  110. package/addons/render/elements/front/items/self/navigation/sidebar/addon/functions/active.js +0 -7
  111. package/addons/render/elements/front/items/self/navigation/sidebar/addon/functions/get.js +0 -35
  112. package/addons/render/elements/front/items/self/navigation/sidebar/addon/functions/groups.js +0 -10
  113. package/addons/render/elements/front/items/self/navigation/sidebar/sidebar.css +0 -278
  114. package/addons/render/elements/front/items/self/navigation/sidebar/sidebar.js +0 -85
  115. package/addons/render/elements/front/items/self/navigation/stepper/stepper.css +0 -202
  116. package/addons/render/elements/front/items/self/navigation/stepper/stepper.js +0 -82
  117. package/addons/render/elements/front/items/self/navigation/tabs/addon.js +0 -32
  118. package/addons/render/elements/front/items/self/navigation/tabs/tabs.css +0 -239
  119. package/addons/render/elements/front/items/self/navigation/tabs/tabs.js +0 -76
  120. package/addons/render/elements/front/items/self/preview/html/html.css +0 -377
  121. package/addons/render/elements/front/items/self/preview/html/html.js +0 -107
@@ -1,120 +0,0 @@
1
- import elements from '#elements/load.js';
2
-
3
- const parseMarkdown = function(md)
4
- {
5
- if (!md) return '';
6
-
7
- let html = md;
8
-
9
- // Escape HTML
10
- html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
11
-
12
- // Code blocks (``` ```)
13
- html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (match, lang, code) =>
14
- {
15
- return `<pre class="code-block" data-lang="${lang}"><code>${code.trim()}</code></pre>`;
16
- });
17
-
18
- // Inline code (`)
19
- html = html.replace(/`([^`]+)`/g, '<code class="code-inline">$1</code>');
20
-
21
- // Headings
22
- html = html.replace(/^######\s+(.+)$/gm, '<h6>$1</h6>');
23
- html = html.replace(/^#####\s+(.+)$/gm, '<h5>$1</h5>');
24
- html = html.replace(/^####\s+(.+)$/gm, '<h4>$1</h4>');
25
- html = html.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
26
- html = html.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
27
- html = html.replace(/^#\s+(.+)$/gm, '<h1>$1</h1>');
28
-
29
- // Blockquotes
30
- html = html.replace(/^>\s+(.+)$/gm, '<blockquote>$1</blockquote>');
31
-
32
- // Horizontal rule
33
- html = html.replace(/^---$/gm, '<hr>');
34
- html = html.replace(/^\*\*\*$/gm, '<hr>');
35
-
36
- // Bold
37
- html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
38
- html = html.replace(/__([^_]+)__/g, '<strong>$1</strong>');
39
-
40
- // Italic
41
- html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
42
- html = html.replace(/_([^_]+)_/g, '<em>$1</em>');
43
-
44
- // Links
45
- html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
46
-
47
- // Images
48
- html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
49
-
50
- // Unordered lists
51
- html = html.replace(/^[\*\-]\s+(.+)$/gm, '<li>$1</li>');
52
- html = html.replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>');
53
-
54
- // Ordered lists
55
- html = html.replace(/^\d+\.\s+(.+)$/gm, '<li>$1</li>');
56
-
57
- // Tables
58
- html = html.replace(/^\|(.+)\|$/gm, (match, content) =>
59
- {
60
- const cells = content.split('|').map(cell => cell.trim());
61
- if (cells.every(cell => /^[\-:]+$/.test(cell)))
62
- {
63
- return '<!-- table separator -->';
64
- }
65
- const cellTags = cells.map(cell => `<td>${cell}</td>`).join('');
66
- return `<tr>${cellTags}</tr>`;
67
- });
68
- html = html.replace(/(<tr>.*<\/tr>\n?)+/g, '<table>$&</table>');
69
- html = html.replace(/<!-- table separator -->\n?/g, '');
70
-
71
- // Paragraphs - wrap remaining text blocks
72
- html = html.split('\n\n').map(block =>
73
- {
74
- block = block.trim();
75
- if (!block) return '';
76
- if (block.startsWith('<h') ||
77
- block.startsWith('<ul') ||
78
- block.startsWith('<ol') ||
79
- block.startsWith('<blockquote') ||
80
- block.startsWith('<pre') ||
81
- block.startsWith('<table') ||
82
- block.startsWith('<hr'))
83
- {
84
- return block;
85
- }
86
- return `<p>${block.replace(/\n/g, '<br>')}</p>`;
87
- }).join('\n');
88
-
89
- return html;
90
- };
91
-
92
- elements.ItemAdd({
93
- id: 'markdown',
94
- icon: 'article',
95
- name: 'Markdown',
96
- description: 'Renders markdown content as styled HTML. Supports headings, paragraphs, lists, code blocks, blockquotes, tables, and links.',
97
- category: 'Content',
98
- author: 'Divhunt',
99
- config: {
100
- content: {
101
- type: 'string',
102
- value: ''
103
- },
104
- variant: {
105
- type: 'array',
106
- value: ['size-m'],
107
- options: ['size-s', 'size-m', 'size-l', 'prose']
108
- }
109
- },
110
- render: function()
111
- {
112
- this.parsedContent = parseMarkdown(this.content);
113
-
114
- return `
115
- <div class="holder" :variant="variant.join(' ')">
116
- <div dh-html="parsedContent"></div>
117
- </div>
118
- `;
119
- },
120
- });
@@ -1,253 +0,0 @@
1
- /* Base */
2
- .e-2452c60a> .holder
3
- {
4
- display: flex;
5
- flex-direction: column;
6
- background: var(--dh-bg-1);
7
- border-radius: var(--dh-radius-l);
8
- overflow: hidden;
9
- }
10
-
11
- .e-2452c60a> .holder > .comment-wrapper
12
- {
13
- display: flex;
14
- flex-direction: column;
15
- border-bottom: 1px solid var(--dh-bg-2-border);
16
- }
17
-
18
- .e-2452c60a> .holder > .comment-wrapper:last-child
19
- {
20
- border-bottom: none;
21
- }
22
-
23
- .e-2452c60a> .holder > .comment-wrapper > .comment
24
- {
25
- display: flex;
26
- gap: var(--dh-spacing-m);
27
- padding: var(--dh-spacing-l);
28
- }
29
-
30
- .e-2452c60a> .holder > .comment-wrapper > .comment > .avatar
31
- {
32
- width: 40px;
33
- height: 40px;
34
- border-radius: 50%;
35
- background: var(--dh-bg-3);
36
- display: flex;
37
- align-items: center;
38
- justify-content: center;
39
- flex-shrink: 0;
40
- }
41
-
42
- .e-2452c60a> .holder > .comment-wrapper > .comment > .avatar > .icon
43
- {
44
- font-size: 24px;
45
- color: var(--dh-text-2);
46
- }
47
-
48
- .e-2452c60a> .holder > .comment-wrapper > .comment > .avatar > img
49
- {
50
- width: 100%;
51
- height: 100%;
52
- object-fit: cover;
53
- border-radius: 50%;
54
- }
55
-
56
- .e-2452c60a> .holder > .comment-wrapper > .comment > .content
57
- {
58
- display: flex;
59
- flex-direction: column;
60
- gap: var(--dh-spacing-s);
61
- flex: 1;
62
- }
63
-
64
- .e-2452c60a> .holder > .comment-wrapper > .comment > .content > .header
65
- {
66
- display: flex;
67
- align-items: center;
68
- gap: var(--dh-spacing-s);
69
- }
70
-
71
- .e-2452c60a> .holder > .comment-wrapper > .comment > .content > .header > .author
72
- {
73
- font-weight: 600;
74
- color: var(--dh-text-1);
75
- font-size: var(--dh-size-m);
76
- }
77
-
78
- .e-2452c60a> .holder > .comment-wrapper > .comment > .content > .header > .time
79
- {
80
- font-size: var(--dh-size-s);
81
- color: var(--dh-text-2);
82
- }
83
-
84
- .e-2452c60a> .holder > .comment-wrapper > .comment > .content > .text
85
- {
86
- color: var(--dh-text-1);
87
- font-size: var(--dh-size-m);
88
- line-height: 1.6;
89
- }
90
-
91
- .e-2452c60a> .holder > .comment-wrapper > .comment > .content > .actions
92
- {
93
- display: flex;
94
- align-items: center;
95
- gap: var(--dh-spacing-m);
96
- margin-top: var(--dh-spacing-x);
97
- }
98
-
99
- .e-2452c60a> .holder > .comment-wrapper > .comment > .content > .actions > .action
100
- {
101
- display: flex;
102
- align-items: center;
103
- gap: var(--dh-spacing-x);
104
- padding: var(--dh-spacing-x) var(--dh-spacing-s);
105
- border-radius: var(--dh-radius-s);
106
- color: var(--dh-text-2);
107
- font-size: var(--dh-size-s);
108
- cursor: pointer;
109
- transition: all 0.2s ease;
110
- }
111
-
112
- .e-2452c60a> .holder > .comment-wrapper > .comment > .content > .actions > .action:hover
113
- {
114
- background: var(--dh-bg-2);
115
- color: var(--dh-brand);
116
- }
117
-
118
- .e-2452c60a> .holder > .comment-wrapper > .comment > .content > .actions > .action > .icon
119
- {
120
- font-size: 18px;
121
- }
122
-
123
- /* Replies */
124
- .e-2452c60a> .holder > .comment-wrapper > .replies
125
- {
126
- display: flex;
127
- flex-direction: column;
128
- gap: var(--dh-spacing-m);
129
- padding: var(--dh-spacing-m) var(--dh-spacing-l) var(--dh-spacing-l) calc(var(--dh-spacing-l) + 40px + var(--dh-spacing-m));
130
- background: var(--dh-bg-2);
131
- }
132
-
133
- .e-2452c60a> .holder > .comment-wrapper > .replies > .reply
134
- {
135
- display: flex;
136
- gap: var(--dh-spacing-m);
137
- }
138
-
139
- .e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .avatar
140
- {
141
- width: 32px;
142
- height: 32px;
143
- border-radius: 50%;
144
- background: var(--dh-bg-3);
145
- display: flex;
146
- align-items: center;
147
- justify-content: center;
148
- flex-shrink: 0;
149
- }
150
-
151
- .e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .avatar > .icon
152
- {
153
- font-size: 18px;
154
- color: var(--dh-text-2);
155
- }
156
-
157
- .e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .avatar > img
158
- {
159
- width: 100%;
160
- height: 100%;
161
- object-fit: cover;
162
- border-radius: 50%;
163
- }
164
-
165
- .e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content
166
- {
167
- display: flex;
168
- flex-direction: column;
169
- gap: var(--dh-spacing-x);
170
- flex: 1;
171
- }
172
-
173
- .e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .header
174
- {
175
- display: flex;
176
- align-items: center;
177
- gap: var(--dh-spacing-x);
178
- }
179
-
180
- .e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .header > .author
181
- {
182
- font-weight: 600;
183
- color: var(--dh-text-1);
184
- font-size: var(--dh-size-s);
185
- }
186
-
187
- .e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .header > .time
188
- {
189
- font-size: 12px;
190
- color: var(--dh-text-2);
191
- }
192
-
193
- .e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .text
194
- {
195
- color: var(--dh-text-1);
196
- font-size: var(--dh-size-s);
197
- line-height: 1.6;
198
- }
199
-
200
- .e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .actions
201
- {
202
- display: flex;
203
- align-items: center;
204
- gap: var(--dh-spacing-m);
205
- margin-top: var(--dh-spacing-x);
206
- }
207
-
208
- .e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .actions > .action
209
- {
210
- display: flex;
211
- align-items: center;
212
- gap: var(--dh-spacing-x);
213
- padding: var(--dh-spacing-x) var(--dh-spacing-s);
214
- border-radius: var(--dh-radius-s);
215
- color: var(--dh-text-2);
216
- font-size: 12px;
217
- cursor: pointer;
218
- transition: all 0.2s ease;
219
- }
220
-
221
- .e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .actions > .action:hover
222
- {
223
- background: var(--dh-bg-3);
224
- color: var(--dh-brand);
225
- }
226
-
227
- .e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .actions > .action > .icon
228
- {
229
- font-size: 16px;
230
- }
231
-
232
- /* Variants - Border */
233
- .e-2452c60a> .holder[variant*="border"]
234
- {
235
- border: 1px solid var(--dh-bg-2-border);
236
- }
237
-
238
- /* Variants - Background */
239
- .e-2452c60a> .holder[variant*="bg-1"] { background: var(--dh-bg-1); }
240
- .e-2452c60a> .holder[variant*="bg-2"] { background: var(--dh-bg-2); }
241
- .e-2452c60a> .holder[variant*="bg-3"] { background: var(--dh-bg-3); }
242
-
243
- /* Variants - Compact */
244
- .e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment { padding: var(--dh-spacing-m); gap: var(--dh-spacing-s); }
245
- .e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment > .avatar { width: 32px; height: 32px; }
246
- .e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment > .avatar > .icon { font-size: 18px; }
247
- .e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment > .content > .header > .author,
248
- .e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment > .content > .text { font-size: var(--dh-size-s); }
249
- .e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment > .content > .actions > .action { padding: var(--dh-spacing-x); }
250
- .e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment > .content > .actions > .action > .icon { font-size: 16px; }
251
- .e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .replies { padding: var(--dh-spacing-s) var(--dh-spacing-m) var(--dh-spacing-m) calc(var(--dh-spacing-m) + 32px + var(--dh-spacing-s)); }
252
- .e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .replies > .reply > .avatar { width: 28px; height: 28px; }
253
- .e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .replies > .reply > .avatar > .icon { font-size: 16px; }
@@ -1,134 +0,0 @@
1
- import elements from '#elements/load.js';
2
-
3
- elements.ItemAdd({
4
- id: 'comments',
5
- icon: 'comment',
6
- name: 'Comments',
7
- description: 'Comment thread with replies, likes, and timestamps.',
8
- category: 'Data',
9
- author: 'Divhunt',
10
- config: {
11
- comments: {
12
- type: 'array',
13
- value: [
14
- {
15
- author: 'Sarah Johnson',
16
- avatar: '',
17
- time: '2 hours ago',
18
- text: 'This looks great! I really like the new design direction. The colors are much more vibrant.',
19
- likes: 12,
20
- replies: [
21
- {
22
- author: 'John Doe',
23
- avatar: '',
24
- time: '1 hour ago',
25
- text: 'I agree! The color palette is perfect.',
26
- likes: 5
27
- },
28
- {
29
- author: 'Jane Smith',
30
- avatar: '',
31
- time: '30 minutes ago',
32
- text: 'Thanks for the feedback everyone!',
33
- likes: 3
34
- }
35
- ]
36
- },
37
- {
38
- author: 'Mike Chen',
39
- avatar: '',
40
- time: '5 hours ago',
41
- text: 'Can we adjust the spacing on mobile? It feels a bit cramped on smaller screens.',
42
- likes: 8,
43
- replies: [
44
- {
45
- author: 'Sarah Johnson',
46
- avatar: '',
47
- time: '4 hours ago',
48
- text: 'Good point, I will look into that.',
49
- likes: 4
50
- }
51
- ]
52
- },
53
- {
54
- author: 'Emma Davis',
55
- avatar: '',
56
- time: '1 day ago',
57
- text: 'Great work team! This is exactly what we needed. Looking forward to the next iteration.',
58
- likes: 24,
59
- replies: []
60
- }
61
- ]
62
- },
63
- variant: {
64
- type: 'array',
65
- value: ['border'],
66
- options: ['border', 'bg-1', 'bg-2', 'bg-3', 'compact']
67
- }
68
- },
69
- render: function()
70
- {
71
- this.state = this.state || {};
72
- this.state.expandedComments = this.state.expandedComments || {};
73
-
74
- this.toggleReplies = (commentId) =>
75
- {
76
- this.state.expandedComments[commentId] = !this.state.expandedComments[commentId];
77
- this.Update();
78
- };
79
-
80
- return `
81
- <div class="holder" :variant="variant.join(' ')">
82
- <div dh-for="comment in comments" class="comment-wrapper">
83
- <div class="comment">
84
- <div class="avatar">
85
- <i dh-if="!comment.avatar" class="icon">person</i>
86
- <img dh-if="comment.avatar" :src="comment.avatar" alt="Avatar">
87
- </div>
88
- <div class="content">
89
- <div class="header">
90
- <span class="author">{{ comment.author }}</span>
91
- <span class="time">{{ comment.time }}</span>
92
- </div>
93
- <div class="text">{{ comment.text }}</div>
94
- <div class="actions">
95
- <div class="action">
96
- <i class="icon">thumb_up</i>
97
- <span>{{ comment.likes }}</span>
98
- </div>
99
- <div class="action" dh-if="comment.replies.length > 0" dh-click="toggleReplies(comment.author + comment.time)">
100
- <i class="icon">{{ state.expandedComments[comment.author + comment.time] ? 'expand_less' : 'expand_more' }}</i>
101
- <span>{{ comment.replies.length }} {{ comment.replies.length === 1 ? 'reply' : 'replies' }}</span>
102
- </div>
103
- <div class="action">
104
- <i class="icon">more_horiz</i>
105
- </div>
106
- </div>
107
- </div>
108
- </div>
109
- <div dh-if="state.expandedComments[comment.author + comment.time] && comment.replies.length > 0" class="replies">
110
- <div dh-for="reply in comment.replies" class="reply">
111
- <div class="avatar">
112
- <i dh-if="!reply.avatar" class="icon">person</i>
113
- <img dh-if="reply.avatar" :src="reply.avatar" alt="Avatar">
114
- </div>
115
- <div class="content">
116
- <div class="header">
117
- <span class="author">{{ reply.author }}</span>
118
- <span class="time">{{ reply.time }}</span>
119
- </div>
120
- <div class="text">{{ reply.text }}</div>
121
- <div class="actions">
122
- <div class="action">
123
- <i class="icon">thumb_up</i>
124
- <span>{{ reply.likes }}</span>
125
- </div>
126
- </div>
127
- </div>
128
- </div>
129
- </div>
130
- </div>
131
- </div>
132
- `;
133
- }
134
- });
@@ -1,116 +0,0 @@
1
- /* Base */
2
- .e-68acba21 > .holder
3
- {
4
- display: flex;
5
- flex-direction: column;
6
- background: var(--dh-bg-1);
7
- border-radius: var(--dh-radius-l);
8
- overflow: hidden;
9
- }
10
-
11
- .e-68acba21 > .holder > .file
12
- {
13
- display: flex;
14
- align-items: center;
15
- gap: var(--dh-spacing-m);
16
- padding: var(--dh-spacing-m);
17
- border-bottom: 1px solid var(--dh-bg-2-border);
18
- transition: background 0.2s ease;
19
- cursor: pointer;
20
- }
21
-
22
- .e-68acba21 > .holder > .file:last-child
23
- {
24
- border-bottom: none;
25
- }
26
-
27
- .e-68acba21 > .holder > .file:hover
28
- {
29
- background: var(--dh-bg-2);
30
- }
31
-
32
- .e-68acba21 > .holder > .file > .icon-wrapper
33
- {
34
- width: 48px;
35
- height: 48px;
36
- border-radius: var(--dh-radius-m);
37
- background: var(--dh-bg-2);
38
- display: flex;
39
- align-items: center;
40
- justify-content: center;
41
- flex-shrink: 0;
42
- }
43
-
44
- .e-68acba21 > .holder > .file > .icon-wrapper > .icon
45
- {
46
- font-size: 24px;
47
- color: var(--dh-brand);
48
- }
49
-
50
- .e-68acba21 > .holder > .file > .info
51
- {
52
- display: flex;
53
- flex-direction: column;
54
- gap: var(--dh-spacing-x);
55
- flex: 1;
56
- min-width: 0;
57
- }
58
-
59
- .e-68acba21 > .holder > .file > .info > .name
60
- {
61
- font-weight: 600;
62
- color: var(--dh-text-1);
63
- font-size: var(--dh-size-m);
64
- white-space: nowrap;
65
- overflow: hidden;
66
- text-overflow: ellipsis;
67
- }
68
-
69
- .e-68acba21 > .holder > .file > .info > .meta
70
- {
71
- display: flex;
72
- align-items: center;
73
- gap: var(--dh-spacing-x);
74
- font-size: var(--dh-size-s);
75
- color: var(--dh-text-2);
76
- }
77
-
78
- .e-68acba21 > .holder > .file > .info > .meta > .separator
79
- {
80
- opacity: 0.5;
81
- }
82
-
83
- .e-68acba21 > .holder > .file > .actions
84
- {
85
- display: flex;
86
- gap: var(--dh-spacing-x);
87
- opacity: 0;
88
- transition: opacity 0.2s ease;
89
- }
90
-
91
- .e-68acba21 > .holder > .file:hover > .actions
92
- {
93
- opacity: 1;
94
- }
95
-
96
- /* Variants - Border */
97
- .e-68acba21 > .holder[variant*="border"] { border: 1px solid var(--dh-bg-2-border); }
98
-
99
- /* Variants - Background */
100
- .e-68acba21 > .holder[variant*="bg-1"] { background: var(--dh-bg-1); }
101
- .e-68acba21 > .holder[variant*="bg-2"] { background: var(--dh-bg-2); }
102
- .e-68acba21 > .holder[variant*="bg-3"] { background: var(--dh-bg-3); }
103
-
104
- /* Variants - Compact */
105
- .e-68acba21 > .holder[variant*="compact"] > .file { padding: var(--dh-spacing-s) var(--dh-spacing-m); gap: var(--dh-spacing-s); }
106
- .e-68acba21 > .holder[variant*="compact"] > .file > .icon-wrapper { width: 36px; height: 36px; }
107
- .e-68acba21 > .holder[variant*="compact"] > .file > .icon-wrapper > .icon { font-size: 20px; }
108
- .e-68acba21 > .holder[variant*="compact"] > .file > .info > .name { font-size: var(--dh-size-s); }
109
-
110
- /* Variants - Grid */
111
- .e-68acba21 > .holder[variant*="grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--dh-spacing-m); padding: var(--dh-spacing-m); }
112
- .e-68acba21 > .holder[variant*="grid"] > .file { flex-direction: column; align-items: center; text-align: center; padding: var(--dh-spacing-l); border: 1px solid var(--dh-bg-2-border); border-radius: var(--dh-radius-m); background: var(--dh-bg-2); }
113
- .e-68acba21 > .holder[variant*="grid"] > .file > .icon-wrapper { width: 64px; height: 64px; }
114
- .e-68acba21 > .holder[variant*="grid"] > .file > .icon-wrapper > .icon { font-size: 32px; }
115
- .e-68acba21 > .holder[variant*="grid"] > .file > .info { align-items: center; text-align: center; }
116
- .e-68acba21 > .holder[variant*="grid"] > .file > .actions { margin-top: var(--dh-spacing-s); }
@@ -1,85 +0,0 @@
1
- import elements from '#elements/load.js';
2
-
3
- elements.ItemAdd({
4
- id: 'files',
5
- icon: 'description',
6
- name: 'Files',
7
- description: 'File list with icons, sizes, and actions.',
8
- category: 'Data',
9
- author: 'Divhunt',
10
- config: {
11
- files: {
12
- type: 'array',
13
- value: [
14
- {
15
- name: 'Project Proposal.pdf',
16
- type: 'pdf',
17
- size: '2.4 MB',
18
- modified: '2 hours ago',
19
- icon: 'picture_as_pdf'
20
- },
21
- {
22
- name: 'Design Mockups.fig',
23
- type: 'figma',
24
- size: '8.1 MB',
25
- modified: 'Yesterday',
26
- icon: 'palette'
27
- },
28
- {
29
- name: 'Budget Spreadsheet.xlsx',
30
- type: 'excel',
31
- size: '156 KB',
32
- modified: '3 days ago',
33
- icon: 'table_chart'
34
- },
35
- {
36
- name: 'Meeting Notes.docx',
37
- type: 'word',
38
- size: '45 KB',
39
- modified: '1 week ago',
40
- icon: 'description'
41
- },
42
- {
43
- name: 'Presentation.pptx',
44
- type: 'powerpoint',
45
- size: '12.3 MB',
46
- modified: '2 weeks ago',
47
- icon: 'slideshow'
48
- }
49
- ]
50
- },
51
- variant: {
52
- type: 'array',
53
- value: ['border'],
54
- options: ['border', 'bg-1', 'bg-2', 'bg-3', 'compact', 'grid']
55
- }
56
- },
57
- render: function()
58
- {
59
- return `
60
- <div class="holder" :variant="variant.join(' ')">
61
- <div dh-for="file in files" class="file">
62
- <div class="icon-wrapper">
63
- <i class="icon">{{ file.icon }}</i>
64
- </div>
65
- <div class="info">
66
- <div class="name">{{ file.name }}</div>
67
- <div class="meta">
68
- <span class="size">{{ file.size }}</span>
69
- <span class="separator">•</span>
70
- <span class="modified">{{ file.modified }}</span>
71
- </div>
72
- </div>
73
- <div class="actions">
74
- <e-button :variant="['ghost', 'size-s']">
75
- <i class="icon">download</i>
76
- </e-button>
77
- <e-button :variant="['ghost', 'size-s']">
78
- <i class="icon">more_vert</i>
79
- </e-button>
80
- </div>
81
- </div>
82
- </div>
83
- `;
84
- }
85
- });