divhunt 2.0.5 → 2.0.9

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 (159) hide show
  1. package/addons/core/commands/back/functions/expose.js +14 -0
  2. package/addons/core/commands/back/functions/find.js +1 -1
  3. package/addons/core/commands/back/functions/grpc/client.js +1 -1
  4. package/addons/core/commands/back/functions/grpc/server.js +1 -1
  5. package/addons/core/commands/back/functions/hide.js +14 -0
  6. package/addons/core/commands/back/functions/http/server.js +1 -1
  7. package/addons/core/commands/back/items/{many.js → self/many.js} +2 -4
  8. package/addons/core/commands/back/items/{one.js → self/one.js} +2 -4
  9. package/addons/core/commands/back/items/{run.js → self/run.js} +3 -7
  10. package/addons/core/commands/core/functions/run.js +13 -0
  11. package/addons/core/commands/{back → core}/item/functions/run.js +1 -1
  12. package/addons/core/commands/core/load.js +25 -0
  13. package/addons/core/commands/front/directives/run.js +84 -0
  14. package/addons/core/commands/front/directives/submit.js +150 -0
  15. package/addons/core/commands/front/functions/api.js +30 -0
  16. package/addons/render/assets/back/functions/import.js +1 -1
  17. package/examples/basic-front/back/assets.js +11 -0
  18. package/examples/basic-front/back/index.js +13 -0
  19. package/examples/basic-front/back/items/commands/html.js +14 -0
  20. package/examples/basic-front/back/items/commands/test.js +19 -0
  21. package/examples/basic-front/back/items/html/fonts.js +12 -0
  22. package/examples/basic-front/front/pages/home.js +16 -0
  23. package/examples/basic-front/front/styles/main.css +31 -0
  24. package/examples/basic-front/front/test.js +7 -0
  25. package/examples/basic-front/package.json +7 -0
  26. package/lib/src/divhunt.js +2 -0
  27. package/lib/src/mixins/form.js +67 -0
  28. package/package.json +3 -3
  29. package/test/front/test.js +31 -0
  30. package/test.js +52 -0
  31. package/addons/core/commands/LICENSE.txt +0 -40
  32. package/addons/core/commands/README.md +0 -294
  33. package/addons/core/commands/back/load.js +0 -18
  34. package/addons/core/commands/front/#register/addon.js +0 -9
  35. package/addons/core/commands/front/functions/find.js +0 -22
  36. package/addons/core/commands/front/item/functions/run.js +0 -96
  37. package/addons/core/commands/front/items/elements/table/table.css +0 -18
  38. package/addons/core/commands/front/items/elements/table/table.js +0 -254
  39. package/addons/render/elements/front/items/self/base/menu/menu.js +0 -96
  40. package/addons/render/elements/front/items/self/base/menu/styles/base.css +0 -116
  41. package/addons/render/elements/front/items/self/base/menu/styles/sizes.css +0 -27
  42. package/addons/render/elements/front/items/self/base/menu/styles/variants.css +0 -99
  43. package/addons/render/elements/front/items/self/base/tag/tag.css +0 -199
  44. package/addons/render/elements/front/items/self/base/tag/tag.js +0 -37
  45. package/addons/render/elements/front/items/self/cards/basic/basic.js +0 -89
  46. package/addons/render/elements/front/items/self/cards/basic/styles/base.css +0 -66
  47. package/addons/render/elements/front/items/self/cards/basic/styles/sizes.css +0 -32
  48. package/addons/render/elements/front/items/self/cards/basic/styles/variants.css +0 -99
  49. package/addons/render/elements/front/items/self/cards/list/list.js +0 -108
  50. package/addons/render/elements/front/items/self/cards/list/styles/base.css +0 -96
  51. package/addons/render/elements/front/items/self/cards/list/styles/sizes.css +0 -32
  52. package/addons/render/elements/front/items/self/cards/list/styles/variants.css +0 -99
  53. package/addons/render/elements/front/items/self/cards/media/media.js +0 -116
  54. package/addons/render/elements/front/items/self/cards/media/styles/base.css +0 -126
  55. package/addons/render/elements/front/items/self/cards/media/styles/sizes.css +0 -49
  56. package/addons/render/elements/front/items/self/cards/media/styles/variants.css +0 -74
  57. package/addons/render/elements/front/items/self/cards/profile/profile.js +0 -95
  58. package/addons/render/elements/front/items/self/cards/profile/styles/base.css +0 -142
  59. package/addons/render/elements/front/items/self/cards/profile/styles/sizes.css +0 -43
  60. package/addons/render/elements/front/items/self/cards/profile/styles/variants.css +0 -131
  61. package/addons/render/elements/front/items/self/cards/stat/stat.js +0 -117
  62. package/addons/render/elements/front/items/self/cards/stat/styles/base.css +0 -97
  63. package/addons/render/elements/front/items/self/cards/stat/styles/sizes.css +0 -49
  64. package/addons/render/elements/front/items/self/cards/stat/styles/variants.css +0 -124
  65. package/addons/render/elements/front/items/self/content/html/html.css +0 -93
  66. package/addons/render/elements/front/items/self/content/html/html.js +0 -40
  67. package/addons/render/elements/front/items/self/content/markdown/markdown.css +0 -200
  68. package/addons/render/elements/front/items/self/content/markdown/markdown.js +0 -120
  69. package/addons/render/elements/front/items/self/data/comments/comments.css +0 -253
  70. package/addons/render/elements/front/items/self/data/comments/comments.js +0 -134
  71. package/addons/render/elements/front/items/self/data/files/files.css +0 -116
  72. package/addons/render/elements/front/items/self/data/files/files.js +0 -85
  73. package/addons/render/elements/front/items/self/data/folders/folders.css +0 -104
  74. package/addons/render/elements/front/items/self/data/folders/folders.js +0 -73
  75. package/addons/render/elements/front/items/self/data/inbox/inbox.css +0 -225
  76. package/addons/render/elements/front/items/self/data/inbox/inbox.js +0 -111
  77. package/addons/render/elements/front/items/self/data/logs/logs.css +0 -133
  78. package/addons/render/elements/front/items/self/data/logs/logs.js +0 -65
  79. package/addons/render/elements/front/items/self/data/plans/plans.css +0 -231
  80. package/addons/render/elements/front/items/self/data/plans/plans.js +0 -104
  81. package/addons/render/elements/front/items/self/data/properties/properties.css +0 -108
  82. package/addons/render/elements/front/items/self/data/properties/properties.js +0 -156
  83. package/addons/render/elements/front/items/self/data/table/table.css +0 -153
  84. package/addons/render/elements/front/items/self/data/table/table.js +0 -106
  85. package/addons/render/elements/front/items/self/data/timeline/timeline.css +0 -127
  86. package/addons/render/elements/front/items/self/data/timeline/timeline.js +0 -57
  87. package/addons/render/elements/front/items/self/feedback/alert/alert.css +0 -258
  88. package/addons/render/elements/front/items/self/feedback/alert/alert.js +0 -67
  89. package/addons/render/elements/front/items/self/feedback/confirm/confirm.css +0 -229
  90. package/addons/render/elements/front/items/self/feedback/confirm/confirm.js +0 -81
  91. package/addons/render/elements/front/items/self/feedback/loader/loader.css +0 -203
  92. package/addons/render/elements/front/items/self/feedback/loader/loader.js +0 -25
  93. package/addons/render/elements/front/items/self/feedback/progress/progress.css +0 -136
  94. package/addons/render/elements/front/items/self/feedback/progress/progress.js +0 -40
  95. package/addons/render/elements/front/items/self/form/button/button.js +0 -105
  96. package/addons/render/elements/front/items/self/form/button/styles/base.css +0 -176
  97. package/addons/render/elements/front/items/self/form/button/styles/sizes.css +0 -78
  98. package/addons/render/elements/front/items/self/form/button/styles/variants.css +0 -421
  99. package/addons/render/elements/front/items/self/form/checkbox/checkbox.js +0 -57
  100. package/addons/render/elements/front/items/self/form/checkbox/styles/base.css +0 -52
  101. package/addons/render/elements/front/items/self/form/checkbox/styles/sizes.css +0 -39
  102. package/addons/render/elements/front/items/self/form/checkbox/styles/variants.css +0 -121
  103. package/addons/render/elements/front/items/self/form/field/field.css +0 -96
  104. package/addons/render/elements/front/items/self/form/field/field.js +0 -39
  105. package/addons/render/elements/front/items/self/form/input/input.css +0 -111
  106. package/addons/render/elements/front/items/self/form/input/input.js +0 -78
  107. package/addons/render/elements/front/items/self/form/input/styles/base.css +0 -26
  108. package/addons/render/elements/front/items/self/form/input/styles/sizes.css +0 -15
  109. package/addons/render/elements/front/items/self/form/input/styles/variants.css +0 -98
  110. package/addons/render/elements/front/items/self/form/radio/radio.js +0 -57
  111. package/addons/render/elements/front/items/self/form/radio/styles/base.css +0 -48
  112. package/addons/render/elements/front/items/self/form/radio/styles/sizes.css +0 -36
  113. package/addons/render/elements/front/items/self/form/radio/styles/variants.css +0 -121
  114. package/addons/render/elements/front/items/self/form/rating/rating.css +0 -95
  115. package/addons/render/elements/front/items/self/form/rating/rating.js +0 -88
  116. package/addons/render/elements/front/items/self/form/section/section.css +0 -107
  117. package/addons/render/elements/front/items/self/form/section/section.js +0 -39
  118. package/addons/render/elements/front/items/self/form/slider/slider.css +0 -244
  119. package/addons/render/elements/front/items/self/form/slider/slider.js +0 -69
  120. package/addons/render/elements/front/items/self/form/textarea/textarea.css +0 -117
  121. package/addons/render/elements/front/items/self/form/textarea/textarea.js +0 -69
  122. package/addons/render/elements/front/items/self/layout/empty/empty.css +0 -154
  123. package/addons/render/elements/front/items/self/layout/empty/empty.js +0 -43
  124. package/addons/render/elements/front/items/self/layout/heading/heading.css +0 -117
  125. package/addons/render/elements/front/items/self/layout/heading/heading.js +0 -47
  126. package/addons/render/elements/front/items/self/layout/hero/hero.js +0 -88
  127. package/addons/render/elements/front/items/self/layout/hero/styles/base.css +0 -81
  128. package/addons/render/elements/front/items/self/layout/hero/styles/sizes.css +0 -24
  129. package/addons/render/elements/front/items/self/layout/hero/styles/variants.css +0 -98
  130. package/addons/render/elements/front/items/self/navigation/breadcrumb/addon/_class/addon.js +0 -9
  131. package/addons/render/elements/front/items/self/navigation/breadcrumb/addon/functions/get.js +0 -22
  132. package/addons/render/elements/front/items/self/navigation/breadcrumb/breadcrumb.css +0 -13
  133. package/addons/render/elements/front/items/self/navigation/breadcrumb/breadcrumb.js +0 -51
  134. package/addons/render/elements/front/items/self/navigation/footer/addon/_class/addon.js +0 -11
  135. package/addons/render/elements/front/items/self/navigation/footer/addon/functions/columns.js +0 -11
  136. package/addons/render/elements/front/items/self/navigation/footer/addon/functions/get.js +0 -34
  137. package/addons/render/elements/front/items/self/navigation/footer/footer.css +0 -283
  138. package/addons/render/elements/front/items/self/navigation/footer/footer.js +0 -139
  139. package/addons/render/elements/front/items/self/navigation/navbar/addon/_class/addon.js +0 -13
  140. package/addons/render/elements/front/items/self/navigation/navbar/addon/functions/active.js +0 -7
  141. package/addons/render/elements/front/items/self/navigation/navbar/addon/functions/get.js +0 -31
  142. package/addons/render/elements/front/items/self/navigation/navbar/navbar.css +0 -140
  143. package/addons/render/elements/front/items/self/navigation/navbar/navbar.js +0 -118
  144. package/addons/render/elements/front/items/self/navigation/pagination/pagination.css +0 -160
  145. package/addons/render/elements/front/items/self/navigation/pagination/pagination.js +0 -131
  146. package/addons/render/elements/front/items/self/navigation/sidebar/addon/_class/addon.js +0 -12
  147. package/addons/render/elements/front/items/self/navigation/sidebar/addon/functions/active.js +0 -7
  148. package/addons/render/elements/front/items/self/navigation/sidebar/addon/functions/get.js +0 -35
  149. package/addons/render/elements/front/items/self/navigation/sidebar/addon/functions/groups.js +0 -10
  150. package/addons/render/elements/front/items/self/navigation/sidebar/sidebar.css +0 -278
  151. package/addons/render/elements/front/items/self/navigation/sidebar/sidebar.js +0 -85
  152. package/addons/render/elements/front/items/self/navigation/stepper/stepper.css +0 -202
  153. package/addons/render/elements/front/items/self/navigation/stepper/stepper.js +0 -82
  154. package/addons/render/elements/front/items/self/navigation/tabs/addon.js +0 -32
  155. package/addons/render/elements/front/items/self/navigation/tabs/tabs.css +0 -239
  156. package/addons/render/elements/front/items/self/navigation/tabs/tabs.js +0 -76
  157. package/addons/render/elements/front/items/self/preview/html/html.css +0 -377
  158. package/addons/render/elements/front/items/self/preview/html/html.js +0 -107
  159. /package/addons/core/commands/{back → core}/addon.js +0 -0
@@ -1,142 +0,0 @@
1
- .e-56553afe > .holder
2
- {
3
- display: flex;
4
- flex-direction: column;
5
- align-items: center;
6
- text-align: center;
7
- border-radius: var(--dh-radius-m);
8
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
9
- }
10
-
11
- .e-56553afe > .holder:hover
12
- {
13
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
14
- }
15
-
16
- .e-56553afe > .holder > .header
17
- {
18
- display: flex;
19
- flex-direction: column;
20
- align-items: center;
21
- gap: var(--dh-spacing-s);
22
- }
23
-
24
- .e-56553afe > .holder > .header > .avatar
25
- {
26
- position: relative;
27
- flex-shrink: 0;
28
- display: flex;
29
- align-items: center;
30
- justify-content: center;
31
- border-radius: 50%;
32
- background: var(--dh-bg-3);
33
- color: var(--dh-text-2);
34
- font-weight: 600;
35
- overflow: hidden;
36
- border: 1px solid var(--dh-bg-4-border);
37
- }
38
-
39
- .e-56553afe > .holder > .header > .avatar > img
40
- {
41
- width: 100%;
42
- height: 100%;
43
- object-fit: cover;
44
- }
45
-
46
- .e-56553afe > .holder > .header > .avatar::after
47
- {
48
- content: '';
49
- position: absolute;
50
- bottom: 2px;
51
- right: 2px;
52
- width: 12px;
53
- height: 12px;
54
- border-radius: 50%;
55
- border: 2px solid var(--dh-bg-2);
56
- display: none;
57
- }
58
-
59
- .e-56553afe > .holder > .header > .avatar[status="online"]::after
60
- {
61
- display: block;
62
- background: var(--dh-green);
63
- }
64
-
65
- .e-56553afe > .holder > .header > .avatar[status="offline"]::after
66
- {
67
- display: block;
68
- background: var(--dh-text-2);
69
- }
70
-
71
- .e-56553afe > .holder > .header > .avatar[status="away"]::after
72
- {
73
- display: block;
74
- background: var(--dh-orange);
75
- }
76
-
77
- .e-56553afe > .holder > .header > .avatar[status="busy"]::after
78
- {
79
- display: block;
80
- background: var(--dh-red);
81
- }
82
-
83
- .e-56553afe > .holder > .content
84
- {
85
- display: flex;
86
- flex-direction: column;
87
- gap: var(--dh-spacing-x);
88
- }
89
-
90
- .e-56553afe > .holder > .content > strong
91
- {
92
- font-size: 14px;
93
- font-weight: 600;
94
- color: var(--dh-text-1);
95
- }
96
-
97
- .e-56553afe > .holder > .content > span
98
- {
99
- font-size: 12px;
100
- font-weight: 500;
101
- color: var(--dh-text-2);
102
- opacity: 0.7;
103
- }
104
-
105
- .e-56553afe > .holder > .stats
106
- {
107
- display: flex;
108
- justify-content: center;
109
- gap: var(--dh-spacing-l);
110
- padding-top: var(--dh-spacing-s);
111
- border-top: 1px solid var(--dh-bg-3-border);
112
- opacity: 0.5;
113
- width: 100%;
114
- }
115
-
116
- .e-56553afe > .holder > .stats > .stat
117
- {
118
- display: flex;
119
- flex-direction: column;
120
- align-items: center;
121
- gap: var(--dh-spacing-x);
122
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
123
- }
124
-
125
- .e-56553afe > .holder > .stats > .stat:hover
126
- {
127
- transform: scale(1.05);
128
- }
129
-
130
- .e-56553afe > .holder > .stats > .stat > strong
131
- {
132
- font-size: var(--dh-size-m);
133
- font-weight: 600;
134
- color: var(--dh-text-1);
135
- }
136
-
137
- .e-56553afe > .holder > .stats > .stat > span
138
- {
139
- font-size: var(--dh-size-s);
140
- font-weight: 500;
141
- color: var(--dh-text-2);
142
- }
@@ -1,43 +0,0 @@
1
- .e-56553afe > .holder[variant*="size-s"]
2
- {
3
- padding: var(--dh-spacing-s);
4
- gap: var(--dh-spacing-s);
5
- }
6
-
7
- .e-56553afe > .holder[variant*="size-s"] > .header > .avatar
8
- {
9
- width: var(--dh-height-l);
10
- height: var(--dh-height-l);
11
- font-size: var(--dh-size-m);
12
- }
13
-
14
- .e-56553afe > .holder[variant*="size-m"]
15
- {
16
- padding: var(--dh-spacing-m);
17
- gap: var(--dh-spacing-m);
18
- }
19
-
20
- .e-56553afe > .holder[variant*="size-m"] > .header > .avatar
21
- {
22
- width: 64px;
23
- height: 64px;
24
- font-size: var(--dh-size-l);
25
- }
26
-
27
- .e-56553afe > .holder[variant*="size-l"]
28
- {
29
- padding: var(--dh-spacing-l);
30
- gap: var(--dh-spacing-l);
31
- }
32
-
33
- .e-56553afe > .holder[variant*="size-l"] > .header > .avatar
34
- {
35
- width: 80px;
36
- height: 80px;
37
- font-size: 24px;
38
- }
39
-
40
- .e-56553afe > .holder[variant*="size-l"] > .content > strong
41
- {
42
- font-size: var(--dh-size-l);
43
- }
@@ -1,131 +0,0 @@
1
- .e-56553afe > .holder[variant*="horizontal"]
2
- {
3
- flex-direction: row;
4
- text-align: left;
5
- }
6
-
7
- .e-56553afe > .holder[variant*="horizontal"] > .header
8
- {
9
- flex-direction: row;
10
- }
11
-
12
- .e-56553afe > .holder[variant*="horizontal"] > .content
13
- {
14
- flex: 1;
15
- min-width: 0;
16
- }
17
-
18
- .e-56553afe > .holder[variant*="horizontal"] > .stats
19
- {
20
- flex-direction: column;
21
- width: auto;
22
- padding-top: 0;
23
- padding-left: var(--dh-spacing-m);
24
- border-top: none;
25
- border-left: 1px solid var(--dh-bg-3-border);
26
- }
27
-
28
- .e-56553afe > .holder[variant*="bg-1"]
29
- {
30
- background: var(--dh-bg-1);
31
- }
32
-
33
- .e-56553afe > .holder[variant*="bg-2"]
34
- {
35
- background: var(--dh-bg-2);
36
- }
37
-
38
- .e-56553afe > .holder[variant*="bg-3"]
39
- {
40
- background: var(--dh-bg-3);
41
- }
42
-
43
- .e-56553afe > .holder[variant*="bg-4"]
44
- {
45
- background: var(--dh-bg-4);
46
- }
47
-
48
- .e-56553afe > .holder[variant*="bg-1"]:hover
49
- {
50
- background: var(--dh-bg-1-hover);
51
- }
52
-
53
- .e-56553afe > .holder[variant*="bg-2"]:hover
54
- {
55
- background: var(--dh-bg-2-hover);
56
- }
57
-
58
- .e-56553afe > .holder[variant*="bg-3"]:hover
59
- {
60
- background: var(--dh-bg-3-hover);
61
- }
62
-
63
- .e-56553afe > .holder[variant*="bg-4"]:hover
64
- {
65
- background: var(--dh-bg-4-hover);
66
- }
67
-
68
- .e-56553afe > .holder[variant*="border"]
69
- {
70
- border: 1px solid var(--dh-bg-3-border);
71
- }
72
-
73
- .e-56553afe > .holder[variant*="brand"]
74
- {
75
- border-color: var(--dh-brand-border);
76
- background: var(--dh-brand-opacity);
77
- }
78
-
79
- .e-56553afe > .holder[variant*="brand"] > .header > .avatar
80
- {
81
- background: var(--dh-brand);
82
- color: var(--dh-text-1);
83
- }
84
-
85
- .e-56553afe > .holder[variant*="blue"]
86
- {
87
- border-color: var(--dh-blue-border);
88
- background: var(--dh-blue-opacity);
89
- }
90
-
91
- .e-56553afe > .holder[variant*="blue"] > .header > .avatar
92
- {
93
- background: var(--dh-blue);
94
- color: var(--dh-text-1);
95
- }
96
-
97
- .e-56553afe > .holder[variant*="red"]
98
- {
99
- border-color: var(--dh-red-border);
100
- background: var(--dh-red-opacity);
101
- }
102
-
103
- .e-56553afe > .holder[variant*="red"] > .header > .avatar
104
- {
105
- background: var(--dh-red);
106
- color: var(--dh-text-1);
107
- }
108
-
109
- .e-56553afe > .holder[variant*="orange"]
110
- {
111
- border-color: var(--dh-orange-border);
112
- background: var(--dh-orange-opacity);
113
- }
114
-
115
- .e-56553afe > .holder[variant*="orange"] > .header > .avatar
116
- {
117
- background: var(--dh-orange);
118
- color: var(--dh-text-1);
119
- }
120
-
121
- .e-56553afe > .holder[variant*="green"]
122
- {
123
- border-color: var(--dh-green-border);
124
- background: var(--dh-green-opacity);
125
- }
126
-
127
- .e-56553afe > .holder[variant*="green"] > .header > .avatar
128
- {
129
- background: var(--dh-green);
130
- color: var(--dh-text-1);
131
- }
@@ -1,117 +0,0 @@
1
- import elements from '#elements/load.js';
2
-
3
- elements.ItemAdd({
4
- id: 'card-stat',
5
- icon: 'analytics',
6
- name: 'Card Stat',
7
- description: 'Metric card with value, trend indicator, comparison, and sparkline visualization.',
8
- category: 'Cards',
9
- author: 'Divhunt',
10
- config: {
11
- icon: {
12
- type: 'string',
13
- value: 'trending_up'
14
- },
15
- value: {
16
- type: 'string',
17
- value: '$12,847'
18
- },
19
- label: {
20
- type: 'string',
21
- value: 'Total Revenue'
22
- },
23
- subtitle: {
24
- type: 'string',
25
- value: 'Last 30 days'
26
- },
27
- change: {
28
- type: 'string',
29
- value: '+23.5%'
30
- },
31
- trend: {
32
- type: 'string',
33
- value: 'up',
34
- options: ['', 'up', 'down']
35
- },
36
- comparison: {
37
- type: 'object',
38
- value: {
39
- value: '$9,432',
40
- label: 'vs last month'
41
- },
42
- config: {
43
- value: { type: 'string', value: '' },
44
- label: { type: 'string', value: '' }
45
- }
46
- },
47
- sparkline: {
48
- type: 'array',
49
- value: [30, 45, 35, 50, 40, 60, 55, 70, 65, 80, 75, 90],
50
- each: {
51
- type: 'number'
52
- }
53
- },
54
- variant: {
55
- type: 'array',
56
- value: ['bg-2', 'border', 'size-m'],
57
- options: ['border', 'bg-1', 'bg-2', 'bg-3', 'bg-4', 'brand', 'blue', 'red', 'orange', 'green', 'size-s', 'size-m', 'size-l']
58
- },
59
- onClick: {
60
- type: 'function'
61
- }
62
- },
63
- render: function()
64
- {
65
- this.handleClick = () =>
66
- {
67
- if (this.onClick)
68
- {
69
- this.onClick();
70
- }
71
- };
72
-
73
- this.getSparklinePath = () =>
74
- {
75
- if (!this.sparkline || !this.sparkline.length) return '';
76
-
77
- const width = 80;
78
- const height = 24;
79
- const max = Math.max(...this.sparkline);
80
- const min = Math.min(...this.sparkline);
81
- const range = max - min || 1;
82
- const step = width / (this.sparkline.length - 1);
83
-
84
- const points = this.sparkline.map((val, i) =>
85
- {
86
- const x = i * step;
87
- const y = height - ((val - min) / range) * height;
88
- return `${x},${y}`;
89
- });
90
-
91
- return `M${points.join(' L')}`;
92
- };
93
-
94
- return `
95
- <div class="holder" :variant="variant.join(' ')" dh-click="handleClick">
96
- <div class="header">
97
- <i dh-if="icon">{{ icon }}</i>
98
- <e-tag dh-if="change" :text="change" :variant="[trend === 'up' ? 'green' : trend === 'down' ? 'red' : 'bg-3', 'size-s']"></e-tag>
99
- </div>
100
- <div class="content">
101
- <strong>{{ value }}</strong>
102
- <span dh-if="label">{{ label }}</span>
103
- <small dh-if="subtitle">{{ subtitle }}</small>
104
- </div>
105
- <div dh-if="comparison?.value || sparkline.length" class="footer">
106
- <div dh-if="comparison?.value" class="comparison">
107
- <strong>{{ comparison.value }}</strong>
108
- <span dh-if="comparison.label">{{ comparison.label }}</span>
109
- </div>
110
- <svg dh-if="sparkline.length" class="sparkline" viewBox="0 0 80 24" preserveAspectRatio="none">
111
- <path :d="getSparklinePath()" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
112
- </svg>
113
- </div>
114
- </div>
115
- `;
116
- }
117
- });
@@ -1,97 +0,0 @@
1
- .e-5239ce65 > .holder
2
- {
3
- display: flex;
4
- flex-direction: column;
5
- border-radius: var(--dh-radius-m);
6
- transition: all 0.2s;
7
- }
8
-
9
- .e-5239ce65 > .holder:hover
10
- {
11
- transform: translateY(-2px);
12
- }
13
-
14
- .e-5239ce65 > .holder > .header
15
- {
16
- display: flex;
17
- align-items: center;
18
- justify-content: space-between;
19
- }
20
-
21
- .e-5239ce65 > .holder > .header > i
22
- {
23
- font-size: var(--dh-size-l);
24
- color: var(--dh-text-2);
25
- transition: all 0.2s;
26
- }
27
-
28
- .e-5239ce65 > .holder:hover > .header > i
29
- {
30
- color: var(--dh-text-1);
31
- }
32
-
33
- .e-5239ce65 > .holder > .content
34
- {
35
- display: flex;
36
- flex-direction: column;
37
- gap: var(--dh-spacing-x);
38
- }
39
-
40
- .e-5239ce65 > .holder > .content > strong
41
- {
42
- font-size: var(--dh-size-l);
43
- font-weight: 600;
44
- color: var(--dh-text-1);
45
- line-height: 1.2;
46
- }
47
-
48
- .e-5239ce65 > .holder > .content > span
49
- {
50
- font-size: var(--dh-size-m);
51
- font-weight: 500;
52
- color: var(--dh-text-1);
53
- }
54
-
55
- .e-5239ce65 > .holder > .content > small
56
- {
57
- font-size: var(--dh-size-s);
58
- color: var(--dh-text-2);
59
- }
60
-
61
- .e-5239ce65 > .holder > .footer
62
- {
63
- display: flex;
64
- align-items: center;
65
- justify-content: space-between;
66
- gap: var(--dh-spacing-m);
67
- padding-top: var(--dh-spacing-s);
68
- border-top: 1px solid var(--dh-bg-3-border);
69
- }
70
-
71
- .e-5239ce65 > .holder > .footer > .comparison
72
- {
73
- display: flex;
74
- align-items: center;
75
- gap: var(--dh-spacing-s);
76
- }
77
-
78
- .e-5239ce65 > .holder > .footer > .comparison > strong
79
- {
80
- font-size: var(--dh-size-s);
81
- font-weight: 500;
82
- color: var(--dh-text-1);
83
- }
84
-
85
- .e-5239ce65 > .holder > .footer > .comparison > span
86
- {
87
- font-size: var(--dh-size-s);
88
- color: var(--dh-text-2);
89
- }
90
-
91
- .e-5239ce65 > .holder > .footer > .sparkline
92
- {
93
- width: 80px;
94
- height: 24px;
95
- color: var(--dh-brand);
96
- flex-shrink: 0;
97
- }
@@ -1,49 +0,0 @@
1
- .e-5239ce65 > .holder[variant*="size-s"]
2
- {
3
- padding: var(--dh-spacing-s);
4
- gap: var(--dh-spacing-s);
5
- }
6
-
7
- .e-5239ce65 > .holder[variant*="size-s"] > .header > i
8
- {
9
- font-size: var(--dh-size-m);
10
- }
11
-
12
- .e-5239ce65 > .holder[variant*="size-s"] > .content > strong
13
- {
14
- font-size: var(--dh-size-m);
15
- }
16
-
17
- .e-5239ce65 > .holder[variant*="size-s"] > .footer > .sparkline
18
- {
19
- width: 60px;
20
- height: 18px;
21
- }
22
-
23
- .e-5239ce65 > .holder[variant*="size-m"]
24
- {
25
- padding: var(--dh-spacing-m);
26
- gap: var(--dh-spacing-m);
27
- }
28
-
29
- .e-5239ce65 > .holder[variant*="size-l"]
30
- {
31
- padding: var(--dh-spacing-l);
32
- gap: var(--dh-spacing-l);
33
- }
34
-
35
- .e-5239ce65 > .holder[variant*="size-l"] > .header > i
36
- {
37
- font-size: 28px;
38
- }
39
-
40
- .e-5239ce65 > .holder[variant*="size-l"] > .content > strong
41
- {
42
- font-size: 32px;
43
- }
44
-
45
- .e-5239ce65 > .holder[variant*="size-l"] > .footer > .sparkline
46
- {
47
- width: 100px;
48
- height: 32px;
49
- }
@@ -1,124 +0,0 @@
1
- .e-5239ce65 > .holder[variant*="bg-1"]
2
- {
3
- background: var(--dh-bg-1);
4
- }
5
-
6
- .e-5239ce65 > .holder[variant*="bg-2"]
7
- {
8
- background: var(--dh-bg-2);
9
- }
10
-
11
- .e-5239ce65 > .holder[variant*="bg-3"]
12
- {
13
- background: var(--dh-bg-3);
14
- }
15
-
16
- .e-5239ce65 > .holder[variant*="bg-4"]
17
- {
18
- background: var(--dh-bg-4);
19
- }
20
-
21
- .e-5239ce65 > .holder[variant*="bg-1"]:hover
22
- {
23
- background: var(--dh-bg-1-hover);
24
- }
25
-
26
- .e-5239ce65 > .holder[variant*="bg-2"]:hover
27
- {
28
- background: var(--dh-bg-2-hover);
29
- }
30
-
31
- .e-5239ce65 > .holder[variant*="bg-3"]:hover
32
- {
33
- background: var(--dh-bg-3-hover);
34
- }
35
-
36
- .e-5239ce65 > .holder[variant*="bg-4"]:hover
37
- {
38
- background: var(--dh-bg-4-hover);
39
- }
40
-
41
- .e-5239ce65 > .holder[variant*="border"]
42
- {
43
- border: 1px solid var(--dh-bg-3-border);
44
- }
45
-
46
- .e-5239ce65 > .holder[variant*="brand"]
47
- {
48
- border-color: var(--dh-brand-border);
49
- background: var(--dh-brand-opacity);
50
- }
51
-
52
- .e-5239ce65 > .holder[variant*="brand"] > .header > i
53
- {
54
- color: var(--dh-brand);
55
- }
56
-
57
- .e-5239ce65 > .holder[variant*="brand"] > .footer > .sparkline
58
- {
59
- color: var(--dh-brand);
60
- }
61
-
62
- .e-5239ce65 > .holder[variant*="blue"]
63
- {
64
- border-color: var(--dh-blue-border);
65
- background: var(--dh-blue-opacity);
66
- }
67
-
68
- .e-5239ce65 > .holder[variant*="blue"] > .header > i
69
- {
70
- color: var(--dh-blue);
71
- }
72
-
73
- .e-5239ce65 > .holder[variant*="blue"] > .footer > .sparkline
74
- {
75
- color: var(--dh-blue);
76
- }
77
-
78
- .e-5239ce65 > .holder[variant*="red"]
79
- {
80
- border-color: var(--dh-red-border);
81
- background: var(--dh-red-opacity);
82
- }
83
-
84
- .e-5239ce65 > .holder[variant*="red"] > .header > i
85
- {
86
- color: var(--dh-red);
87
- }
88
-
89
- .e-5239ce65 > .holder[variant*="red"] > .footer > .sparkline
90
- {
91
- color: var(--dh-red);
92
- }
93
-
94
- .e-5239ce65 > .holder[variant*="orange"]
95
- {
96
- border-color: var(--dh-orange-border);
97
- background: var(--dh-orange-opacity);
98
- }
99
-
100
- .e-5239ce65 > .holder[variant*="orange"] > .header > i
101
- {
102
- color: var(--dh-orange);
103
- }
104
-
105
- .e-5239ce65 > .holder[variant*="orange"] > .footer > .sparkline
106
- {
107
- color: var(--dh-orange);
108
- }
109
-
110
- .e-5239ce65 > .holder[variant*="green"]
111
- {
112
- border-color: var(--dh-green-border);
113
- background: var(--dh-green-opacity);
114
- }
115
-
116
- .e-5239ce65 > .holder[variant*="green"] > .header > i
117
- {
118
- color: var(--dh-green);
119
- }
120
-
121
- .e-5239ce65 > .holder[variant*="green"] > .footer > .sparkline
122
- {
123
- color: var(--dh-green);
124
- }