divhunt 2.0.4 → 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 (125) hide show
  1. package/addons/render/assets/back/functions/import.js +44 -0
  2. package/addons/render/assets/back/load.js +2 -0
  3. package/package.json +3 -3
  4. package/addons/render/elements/front/items/self/base/menu/menu.js +0 -96
  5. package/addons/render/elements/front/items/self/base/menu/styles/base.css +0 -116
  6. package/addons/render/elements/front/items/self/base/menu/styles/sizes.css +0 -27
  7. package/addons/render/elements/front/items/self/base/menu/styles/variants.css +0 -99
  8. package/addons/render/elements/front/items/self/base/tag/tag.css +0 -199
  9. package/addons/render/elements/front/items/self/base/tag/tag.js +0 -37
  10. package/addons/render/elements/front/items/self/cards/basic/basic.js +0 -89
  11. package/addons/render/elements/front/items/self/cards/basic/styles/base.css +0 -66
  12. package/addons/render/elements/front/items/self/cards/basic/styles/sizes.css +0 -32
  13. package/addons/render/elements/front/items/self/cards/basic/styles/variants.css +0 -99
  14. package/addons/render/elements/front/items/self/cards/list/list.js +0 -108
  15. package/addons/render/elements/front/items/self/cards/list/styles/base.css +0 -96
  16. package/addons/render/elements/front/items/self/cards/list/styles/sizes.css +0 -32
  17. package/addons/render/elements/front/items/self/cards/list/styles/variants.css +0 -99
  18. package/addons/render/elements/front/items/self/cards/media/media.js +0 -116
  19. package/addons/render/elements/front/items/self/cards/media/styles/base.css +0 -126
  20. package/addons/render/elements/front/items/self/cards/media/styles/sizes.css +0 -49
  21. package/addons/render/elements/front/items/self/cards/media/styles/variants.css +0 -74
  22. package/addons/render/elements/front/items/self/cards/profile/profile.js +0 -95
  23. package/addons/render/elements/front/items/self/cards/profile/styles/base.css +0 -142
  24. package/addons/render/elements/front/items/self/cards/profile/styles/sizes.css +0 -43
  25. package/addons/render/elements/front/items/self/cards/profile/styles/variants.css +0 -131
  26. package/addons/render/elements/front/items/self/cards/stat/stat.js +0 -117
  27. package/addons/render/elements/front/items/self/cards/stat/styles/base.css +0 -97
  28. package/addons/render/elements/front/items/self/cards/stat/styles/sizes.css +0 -49
  29. package/addons/render/elements/front/items/self/cards/stat/styles/variants.css +0 -124
  30. package/addons/render/elements/front/items/self/content/html/html.css +0 -93
  31. package/addons/render/elements/front/items/self/content/html/html.js +0 -40
  32. package/addons/render/elements/front/items/self/content/markdown/markdown.css +0 -200
  33. package/addons/render/elements/front/items/self/content/markdown/markdown.js +0 -120
  34. package/addons/render/elements/front/items/self/data/comments/comments.css +0 -253
  35. package/addons/render/elements/front/items/self/data/comments/comments.js +0 -134
  36. package/addons/render/elements/front/items/self/data/files/files.css +0 -116
  37. package/addons/render/elements/front/items/self/data/files/files.js +0 -85
  38. package/addons/render/elements/front/items/self/data/folders/folders.css +0 -104
  39. package/addons/render/elements/front/items/self/data/folders/folders.js +0 -73
  40. package/addons/render/elements/front/items/self/data/inbox/inbox.css +0 -225
  41. package/addons/render/elements/front/items/self/data/inbox/inbox.js +0 -111
  42. package/addons/render/elements/front/items/self/data/logs/logs.css +0 -133
  43. package/addons/render/elements/front/items/self/data/logs/logs.js +0 -65
  44. package/addons/render/elements/front/items/self/data/plans/plans.css +0 -231
  45. package/addons/render/elements/front/items/self/data/plans/plans.js +0 -104
  46. package/addons/render/elements/front/items/self/data/properties/properties.css +0 -108
  47. package/addons/render/elements/front/items/self/data/properties/properties.js +0 -156
  48. package/addons/render/elements/front/items/self/data/table/table.css +0 -153
  49. package/addons/render/elements/front/items/self/data/table/table.js +0 -106
  50. package/addons/render/elements/front/items/self/data/timeline/timeline.css +0 -127
  51. package/addons/render/elements/front/items/self/data/timeline/timeline.js +0 -57
  52. package/addons/render/elements/front/items/self/feedback/alert/alert.css +0 -258
  53. package/addons/render/elements/front/items/self/feedback/alert/alert.js +0 -67
  54. package/addons/render/elements/front/items/self/feedback/confirm/confirm.css +0 -229
  55. package/addons/render/elements/front/items/self/feedback/confirm/confirm.js +0 -81
  56. package/addons/render/elements/front/items/self/feedback/loader/loader.css +0 -203
  57. package/addons/render/elements/front/items/self/feedback/loader/loader.js +0 -25
  58. package/addons/render/elements/front/items/self/feedback/progress/progress.css +0 -136
  59. package/addons/render/elements/front/items/self/feedback/progress/progress.js +0 -40
  60. package/addons/render/elements/front/items/self/form/button/button.js +0 -105
  61. package/addons/render/elements/front/items/self/form/button/styles/base.css +0 -176
  62. package/addons/render/elements/front/items/self/form/button/styles/sizes.css +0 -78
  63. package/addons/render/elements/front/items/self/form/button/styles/variants.css +0 -421
  64. package/addons/render/elements/front/items/self/form/checkbox/checkbox.js +0 -57
  65. package/addons/render/elements/front/items/self/form/checkbox/styles/base.css +0 -52
  66. package/addons/render/elements/front/items/self/form/checkbox/styles/sizes.css +0 -39
  67. package/addons/render/elements/front/items/self/form/checkbox/styles/variants.css +0 -121
  68. package/addons/render/elements/front/items/self/form/field/field.css +0 -96
  69. package/addons/render/elements/front/items/self/form/field/field.js +0 -39
  70. package/addons/render/elements/front/items/self/form/input/input.css +0 -111
  71. package/addons/render/elements/front/items/self/form/input/input.js +0 -78
  72. package/addons/render/elements/front/items/self/form/input/styles/base.css +0 -26
  73. package/addons/render/elements/front/items/self/form/input/styles/sizes.css +0 -15
  74. package/addons/render/elements/front/items/self/form/input/styles/variants.css +0 -98
  75. package/addons/render/elements/front/items/self/form/radio/radio.js +0 -57
  76. package/addons/render/elements/front/items/self/form/radio/styles/base.css +0 -48
  77. package/addons/render/elements/front/items/self/form/radio/styles/sizes.css +0 -36
  78. package/addons/render/elements/front/items/self/form/radio/styles/variants.css +0 -121
  79. package/addons/render/elements/front/items/self/form/rating/rating.css +0 -95
  80. package/addons/render/elements/front/items/self/form/rating/rating.js +0 -88
  81. package/addons/render/elements/front/items/self/form/section/section.css +0 -107
  82. package/addons/render/elements/front/items/self/form/section/section.js +0 -39
  83. package/addons/render/elements/front/items/self/form/slider/slider.css +0 -244
  84. package/addons/render/elements/front/items/self/form/slider/slider.js +0 -69
  85. package/addons/render/elements/front/items/self/form/textarea/textarea.css +0 -117
  86. package/addons/render/elements/front/items/self/form/textarea/textarea.js +0 -69
  87. package/addons/render/elements/front/items/self/layout/empty/empty.css +0 -154
  88. package/addons/render/elements/front/items/self/layout/empty/empty.js +0 -43
  89. package/addons/render/elements/front/items/self/layout/heading/heading.css +0 -117
  90. package/addons/render/elements/front/items/self/layout/heading/heading.js +0 -47
  91. package/addons/render/elements/front/items/self/layout/hero/hero.js +0 -88
  92. package/addons/render/elements/front/items/self/layout/hero/styles/base.css +0 -81
  93. package/addons/render/elements/front/items/self/layout/hero/styles/sizes.css +0 -24
  94. package/addons/render/elements/front/items/self/layout/hero/styles/variants.css +0 -98
  95. package/addons/render/elements/front/items/self/navigation/breadcrumb/addon/_class/addon.js +0 -9
  96. package/addons/render/elements/front/items/self/navigation/breadcrumb/addon/functions/get.js +0 -22
  97. package/addons/render/elements/front/items/self/navigation/breadcrumb/breadcrumb.css +0 -13
  98. package/addons/render/elements/front/items/self/navigation/breadcrumb/breadcrumb.js +0 -51
  99. package/addons/render/elements/front/items/self/navigation/footer/addon/_class/addon.js +0 -11
  100. package/addons/render/elements/front/items/self/navigation/footer/addon/functions/columns.js +0 -11
  101. package/addons/render/elements/front/items/self/navigation/footer/addon/functions/get.js +0 -34
  102. package/addons/render/elements/front/items/self/navigation/footer/footer.css +0 -283
  103. package/addons/render/elements/front/items/self/navigation/footer/footer.js +0 -139
  104. package/addons/render/elements/front/items/self/navigation/navbar/addon/_class/addon.js +0 -13
  105. package/addons/render/elements/front/items/self/navigation/navbar/addon/functions/active.js +0 -7
  106. package/addons/render/elements/front/items/self/navigation/navbar/addon/functions/get.js +0 -31
  107. package/addons/render/elements/front/items/self/navigation/navbar/navbar.css +0 -140
  108. package/addons/render/elements/front/items/self/navigation/navbar/navbar.js +0 -118
  109. package/addons/render/elements/front/items/self/navigation/pagination/pagination.css +0 -160
  110. package/addons/render/elements/front/items/self/navigation/pagination/pagination.js +0 -131
  111. package/addons/render/elements/front/items/self/navigation/sidebar/addon/_class/addon.js +0 -12
  112. package/addons/render/elements/front/items/self/navigation/sidebar/addon/functions/active.js +0 -7
  113. package/addons/render/elements/front/items/self/navigation/sidebar/addon/functions/get.js +0 -35
  114. package/addons/render/elements/front/items/self/navigation/sidebar/addon/functions/groups.js +0 -10
  115. package/addons/render/elements/front/items/self/navigation/sidebar/sidebar.css +0 -278
  116. package/addons/render/elements/front/items/self/navigation/sidebar/sidebar.js +0 -85
  117. package/addons/render/elements/front/items/self/navigation/stepper/stepper.css +0 -202
  118. package/addons/render/elements/front/items/self/navigation/stepper/stepper.js +0 -82
  119. package/addons/render/elements/front/items/self/navigation/tabs/addon.js +0 -32
  120. package/addons/render/elements/front/items/self/navigation/tabs/tabs.css +0 -239
  121. package/addons/render/elements/front/items/self/navigation/tabs/tabs.js +0 -76
  122. package/addons/render/elements/front/items/self/preview/html/html.css +0 -377
  123. package/addons/render/elements/front/items/self/preview/html/html.js +0 -107
  124. package/lib/LICENSE.txt +0 -40
  125. /package/lib/{load.back.js → load.js} +0 -0
@@ -1,111 +0,0 @@
1
- import elements from '#elements/load.js';
2
-
3
- elements.ItemAdd({
4
- id: 'inbox',
5
- icon: 'inbox',
6
- name: 'Inbox',
7
- description: 'Message inbox with sender/recipient info and reply textarea.',
8
- category: 'Data',
9
- author: 'Divhunt',
10
- config: {
11
- subject: {
12
- type: 'string',
13
- value: 'Project Requirements Discussion'
14
- },
15
- recipient: {
16
- type: 'string',
17
- value: 'John Smith'
18
- },
19
- messages: {
20
- type: 'array',
21
- value: [
22
- {
23
- sender: 'John Smith',
24
- avatar: '',
25
- time: '10:30 AM',
26
- message: 'Hey, I wanted to discuss the new project requirements with you. Do you have time this afternoon?',
27
- isMe: false
28
- },
29
- {
30
- sender: 'Me',
31
- avatar: '',
32
- time: '10:32 AM',
33
- message: 'Sure! I am free after 3 PM. Should we schedule a quick call?',
34
- isMe: true
35
- },
36
- {
37
- sender: 'John Smith',
38
- avatar: '',
39
- time: '10:35 AM',
40
- message: 'Perfect! I will send you a calendar invite. Thanks!',
41
- isMe: false
42
- }
43
- ]
44
- },
45
- placeholder: {
46
- type: 'string',
47
- value: 'Type your message...'
48
- },
49
- variant: {
50
- type: 'array',
51
- value: ['border', 'compact'],
52
- options: ['border', 'bg-1', 'bg-2', 'bg-3', 'compact']
53
- }
54
- },
55
- render: function()
56
- {
57
- return `
58
- <div class="holder" :variant="variant.join(' ')">
59
- <div class="header">
60
- <div class="info">
61
- <h3 class="subject">{{ subject }}</h3>
62
- <div class="meta">
63
- <span class="label">To:</span>
64
- <span class="value">{{ recipient }}</span>
65
- </div>
66
- </div>
67
- <div class="actions">
68
- <e-button :variant="['outline', 'size-s']">
69
- <i class="icon">archive</i>
70
- </e-button>
71
- <e-button :variant="['outline', 'size-s']">
72
- <i class="icon">delete</i>
73
- </e-button>
74
- </div>
75
- </div>
76
- <div class="messages">
77
- <div dh-for="msg in messages" class="message" :sender="msg.isMe ? 'me' : 'them'">
78
- <div class="avatar">
79
- <i dh-if="!msg.avatar" class="icon">person</i>
80
- <img dh-if="msg.avatar" :src="msg.avatar" alt="Avatar">
81
- </div>
82
- <div class="content">
83
- <div class="msg-header">
84
- <span class="sender">{{ msg.sender }}</span>
85
- <span class="time">{{ msg.time }}</span>
86
- </div>
87
- <div class="bubble">{{ msg.message }}</div>
88
- </div>
89
- </div>
90
- </div>
91
- <div class="composer">
92
- <e-textarea :placeholder="placeholder" :variant="['border']" rows="3"></e-textarea>
93
- <div class="composer-actions">
94
- <div class="left">
95
- <e-button :variant="['ghost', 'size-s']">
96
- <i class="icon">attach_file</i>
97
- </e-button>
98
- <e-button :variant="['ghost', 'size-s']">
99
- <i class="icon">image</i>
100
- </e-button>
101
- </div>
102
- <e-button :variant="['brand']">
103
- <i class="icon">send</i>
104
- Send
105
- </e-button>
106
- </div>
107
- </div>
108
- </div>
109
- `;
110
- }
111
- });
@@ -1,133 +0,0 @@
1
- /* Base */
2
- .e-4ded73b > .holder
3
- {
4
- display: flex;
5
- flex-direction: column;
6
- background: var(--dh-bg-1);
7
- border-radius: var(--dh-radius-m);
8
- overflow: auto;
9
- font-family: 'Courier New', monospace;
10
- font-size: var(--dh-size-s);
11
- }
12
-
13
- .e-4ded73b > .holder > .log-entry
14
- {
15
- display: flex;
16
- align-items: center;
17
- gap: var(--dh-spacing-m);
18
- padding: var(--dh-spacing-s) var(--dh-spacing-m);
19
- border-bottom: 1px solid var(--dh-bg-2);
20
- transition: background 0.1s ease;
21
- }
22
-
23
- .e-4ded73b > .holder > .log-entry:hover
24
- {
25
- background: var(--dh-bg-2);
26
- }
27
-
28
- .e-4ded73b > .holder > .log-entry:last-child
29
- {
30
- border-bottom: none;
31
- }
32
-
33
- .e-4ded73b > .holder > .log-entry > .timestamp
34
- {
35
- color: var(--dh-text-2);
36
- font-size: 11px;
37
- min-width: 60px;
38
- opacity: 0.7;
39
- }
40
-
41
- .e-4ded73b > .holder > .log-entry > .icon
42
- {
43
- font-size: 16px;
44
- flex-shrink: 0;
45
- }
46
-
47
- .e-4ded73b > .holder > .log-entry > .message
48
- {
49
- color: var(--dh-text-1);
50
- flex: 1;
51
- word-break: break-word;
52
- }
53
-
54
- /* Log Types */
55
- .e-4ded73b > .holder > .log-entry[type="info"] > .icon
56
- {
57
- color: var(--dh-blue);
58
- }
59
-
60
- .e-4ded73b > .holder > .log-entry[type="success"] > .icon
61
- {
62
- color: var(--dh-green);
63
- }
64
-
65
- .e-4ded73b > .holder > .log-entry[type="warning"] > .icon
66
- {
67
- color: var(--dh-orange);
68
- }
69
-
70
- .e-4ded73b > .holder > .log-entry[type="error"] > .icon
71
- {
72
- color: var(--dh-red);
73
- }
74
-
75
- .e-4ded73b > .holder > .log-entry[type="error"] > .message
76
- {
77
- color: var(--dh-red);
78
- }
79
-
80
- /* Variants - Dark */
81
- .e-4ded73b > .holder[variant*="dark"]
82
- {
83
- background: var(--dh-bg-1);
84
- }
85
-
86
- .e-4ded73b > .holder[variant*="dark"] > .log-entry
87
- {
88
- border-bottom-color: var(--dh-bg-2);
89
- }
90
-
91
- .e-4ded73b > .holder[variant*="dark"] > .log-entry:hover
92
- {
93
- background: var(--dh-bg-2);
94
- }
95
-
96
- /* Variants - Light */
97
- .e-4ded73b > .holder[variant*="light"]
98
- {
99
- background: var(--dh-bg-3);
100
- }
101
-
102
- .e-4ded73b > .holder[variant*="light"] > .log-entry
103
- {
104
- border-bottom-color: var(--dh-bg-4);
105
- }
106
-
107
- .e-4ded73b > .holder[variant*="light"] > .log-entry:hover
108
- {
109
- background: var(--dh-bg-4);
110
- }
111
-
112
- /* Variants - Compact */
113
- .e-4ded73b > .holder[variant*="compact"] > .log-entry
114
- {
115
- padding: var(--dh-spacing-x) var(--dh-spacing-s);
116
- gap: var(--dh-spacing-s);
117
- }
118
-
119
- .e-4ded73b > .holder[variant*="compact"] > .log-entry > .timestamp
120
- {
121
- min-width: 50px;
122
- }
123
-
124
- .e-4ded73b > .holder[variant*="compact"] > .log-entry > .icon
125
- {
126
- font-size: 14px;
127
- }
128
-
129
- /* Variants - Border */
130
- .e-4ded73b > .holder[variant*="border"]
131
- {
132
- border: 1px solid var(--dh-bg-4);
133
- }
@@ -1,65 +0,0 @@
1
- import elements from '#elements/load.js';
2
-
3
- elements.ItemAdd({
4
- id: 'logs',
5
- icon: 'terminal',
6
- name: 'Logs',
7
- description: 'Console-style log viewer with syntax highlighting and filtering.',
8
- category: 'Data',
9
- author: 'Divhunt',
10
- config: {
11
- logs: {
12
- type: 'array',
13
- value: [
14
- {
15
- type: 'info',
16
- timestamp: '10:23:45',
17
- message: 'Server started on port 3000'
18
- },
19
- {
20
- type: 'success',
21
- timestamp: '10:23:46',
22
- message: 'Database connection established'
23
- },
24
- {
25
- type: 'warning',
26
- timestamp: '10:24:12',
27
- message: 'API rate limit approaching threshold'
28
- },
29
- {
30
- type: 'error',
31
- timestamp: '10:25:33',
32
- message: 'Failed to connect to external service'
33
- }
34
- ]
35
- },
36
- variant: {
37
- type: 'array',
38
- value: ['light', 'border'],
39
- options: ['dark', 'light', 'compact', 'border']
40
- }
41
- },
42
- render: function()
43
- {
44
- this.getIcon = (type) =>
45
- {
46
- const icons = {
47
- info: 'info',
48
- success: 'check_circle',
49
- warning: 'warning',
50
- error: 'error'
51
- };
52
- return icons[type] || 'circle';
53
- };
54
-
55
- return `
56
- <div class="holder" :variant="variant.join(' ')">
57
- <div dh-for="log in logs" class="log-entry" :type="log.type">
58
- <span class="timestamp">{{ log.timestamp }}</span>
59
- <i class="icon">{{ getIcon(log.type) }}</i>
60
- <span class="message">{{ log.message }}</span>
61
- </div>
62
- </div>
63
- `;
64
- }
65
- });
@@ -1,231 +0,0 @@
1
- /* Base */
2
- .e-693ada14 > .holder
3
- {
4
- display: grid;
5
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
6
- gap: var(--dh-spacing-l);
7
- }
8
-
9
- .e-693ada14 > .holder > .plan
10
- {
11
- display: flex;
12
- flex-direction: column;
13
- gap: var(--dh-spacing-l);
14
- padding: var(--dh-spacing-l);
15
- background: var(--dh-bg-2);
16
- border-radius: var(--dh-radius-l);
17
- position: relative;
18
- transition: all 0.2s ease;
19
- }
20
-
21
- .e-693ada14 > .holder > .plan:hover
22
- {
23
- transform: translateY(-4px);
24
- }
25
-
26
- .e-693ada14 > .holder > .plan > .badge
27
- {
28
- position: absolute;
29
- top: var(--dh-spacing-m);
30
- right: var(--dh-spacing-m);
31
- padding: var(--dh-spacing-x) var(--dh-spacing-s);
32
- background: var(--dh-brand);
33
- color: white;
34
- font-size: 11px;
35
- font-weight: 600;
36
- border-radius: var(--dh-radius-s);
37
- text-transform: uppercase;
38
- }
39
-
40
- .e-693ada14 > .holder > .plan > .header
41
- {
42
- display: flex;
43
- flex-direction: column;
44
- gap: var(--dh-spacing-x);
45
- }
46
-
47
- .e-693ada14 > .holder > .plan > .header > .name
48
- {
49
- font-size: var(--dh-size-l);
50
- font-weight: 600;
51
- color: var(--dh-text-1);
52
- margin: 0;
53
- }
54
-
55
- .e-693ada14 > .holder > .plan > .header > .description
56
- {
57
- font-size: var(--dh-size-s);
58
- color: var(--dh-text-2);
59
- }
60
-
61
- .e-693ada14 > .holder > .plan > .pricing
62
- {
63
- display: flex;
64
- flex-direction: column;
65
- gap: var(--dh-spacing-x);
66
- }
67
-
68
- .e-693ada14 > .holder > .plan > .pricing > .price-wrapper
69
- {
70
- display: flex;
71
- align-items: baseline;
72
- gap: var(--dh-spacing-s);
73
- }
74
-
75
- .e-693ada14 > .holder > .plan > .pricing > .price-wrapper > .old-price
76
- {
77
- font-size: 24px;
78
- font-weight: 600;
79
- color: var(--dh-text-2);
80
- text-decoration: line-through;
81
- opacity: 0.6;
82
- }
83
-
84
- .e-693ada14 > .holder > .plan > .pricing > .price-wrapper > .price
85
- {
86
- font-size: 48px;
87
- font-weight: 700;
88
- color: var(--dh-text-1);
89
- }
90
-
91
- .e-693ada14 > .holder > .plan > .pricing > .price-wrapper > .period
92
- {
93
- font-size: var(--dh-size-m);
94
- color: var(--dh-text-2);
95
- }
96
-
97
- .e-693ada14 > .holder > .plan > .pricing > .discount
98
- {
99
- font-size: var(--dh-size-s);
100
- font-weight: 600;
101
- color: var(--dh-green);
102
- padding: var(--dh-spacing-x) var(--dh-spacing-s);
103
- background: var(--dh-green);
104
- background: rgba(76, 175, 80, 0.15);
105
- border-radius: var(--dh-radius-s);
106
- width: fit-content;
107
- }
108
-
109
- .e-693ada14 > .holder > .plan > .features
110
- {
111
- display: flex;
112
- flex-direction: column;
113
- gap: var(--dh-spacing-m);
114
- flex: 1;
115
- }
116
-
117
- .e-693ada14 > .holder > .plan > .features > .feature
118
- {
119
- display: flex;
120
- align-items: center;
121
- gap: var(--dh-spacing-s);
122
- }
123
-
124
- .e-693ada14 > .holder > .plan > .features > .feature > .icon
125
- {
126
- font-size: 20px;
127
- flex-shrink: 0;
128
- }
129
-
130
- .e-693ada14 > .holder > .plan > .features > .feature[included="true"] > .icon
131
- {
132
- color: var(--dh-green);
133
- }
134
-
135
- .e-693ada14 > .holder > .plan > .features > .feature[included="false"] > .icon
136
- {
137
- color: var(--dh-text-2);
138
- opacity: 0.5;
139
- }
140
-
141
- .e-693ada14 > .holder > .plan > .features > .feature > .text
142
- {
143
- color: var(--dh-text-1);
144
- font-size: var(--dh-size-m);
145
- }
146
-
147
- .e-693ada14 > .holder > .plan > .features > .feature[included="false"] > .text
148
- {
149
- color: var(--dh-text-2);
150
- opacity: 0.7;
151
- }
152
-
153
- .e-693ada14 > .holder > .plan[highlighted="true"]
154
- {
155
- border: 2px solid var(--dh-brand);
156
- box-shadow: 0 0 0 4px var(--dh-brand-opacity);
157
- }
158
-
159
- /* Variants - Border */
160
- .e-693ada14 > .holder[variant*="border"] > .plan
161
- {
162
- border: 1px solid var(--dh-bg-2-border);
163
- }
164
-
165
- /* Variants - Background */
166
- .e-693ada14 > .holder[variant*="bg-1"] > .plan
167
- {
168
- background: var(--dh-bg-1);
169
- border: 1px solid var(--dh-bg-1-border);
170
- }
171
-
172
- .e-693ada14 > .holder[variant*="bg-2"] > .plan
173
- {
174
- background: var(--dh-bg-2);
175
- border: 1px solid var(--dh-bg-2-border);
176
- }
177
-
178
- .e-693ada14 > .holder[variant*="bg-3"] > .plan
179
- {
180
- background: var(--dh-bg-3);
181
- border: 1px solid var(--dh-bg-3-border);
182
- }
183
-
184
- /* Variants - Sizes */
185
- .e-693ada14 > .holder[variant*="size-s"] > .plan
186
- {
187
- padding: var(--dh-spacing-m);
188
- gap: var(--dh-spacing-m);
189
- }
190
-
191
- .e-693ada14 > .holder[variant*="size-s"] > .plan > .pricing > .price-wrapper > .old-price
192
- {
193
- font-size: 18px;
194
- }
195
-
196
- .e-693ada14 > .holder[variant*="size-s"] > .plan > .pricing > .price-wrapper > .price
197
- {
198
- font-size: 36px;
199
- }
200
-
201
- .e-693ada14 > .holder[variant*="size-m"] > .plan
202
- {
203
- padding: var(--dh-spacing-l);
204
- gap: var(--dh-spacing-l);
205
- }
206
-
207
- .e-693ada14 > .holder[variant*="size-m"] > .plan > .pricing > .price-wrapper > .old-price
208
- {
209
- font-size: 24px;
210
- }
211
-
212
- .e-693ada14 > .holder[variant*="size-m"] > .plan > .pricing > .price-wrapper > .price
213
- {
214
- font-size: 48px;
215
- }
216
-
217
- .e-693ada14 > .holder[variant*="size-l"] > .plan
218
- {
219
- padding: calc(var(--dh-spacing-l) * 1.5);
220
- gap: calc(var(--dh-spacing-l) * 1.5);
221
- }
222
-
223
- .e-693ada14 > .holder[variant*="size-l"] > .plan > .pricing > .price-wrapper > .old-price
224
- {
225
- font-size: 32px;
226
- }
227
-
228
- .e-693ada14 > .holder[variant*="size-l"] > .plan > .pricing > .price-wrapper > .price
229
- {
230
- font-size: 64px;
231
- }
@@ -1,104 +0,0 @@
1
- import elements from '#elements/load.js';
2
-
3
- elements.ItemAdd({
4
- id: 'plans',
5
- icon: 'credit_card',
6
- name: 'Plans',
7
- description: 'Pricing plan cards with features and call-to-action.',
8
- category: 'Data',
9
- author: 'Divhunt',
10
- config: {
11
- plans: {
12
- type: 'array',
13
- value: [
14
- {
15
- name: 'Starter',
16
- price: '$9',
17
- oldPrice: '',
18
- period: 'month',
19
- description: 'Perfect for individuals',
20
- discount: '',
21
- features: [
22
- { text: '5 Projects', included: true },
23
- { text: '10GB Storage', included: true },
24
- { text: 'Basic Support', included: true },
25
- { text: 'Advanced Analytics', included: false },
26
- { text: 'Custom Domain', included: false }
27
- ],
28
- button: 'Get Started',
29
- highlighted: false
30
- },
31
- {
32
- name: 'Pro',
33
- price: '$29',
34
- oldPrice: '$36',
35
- period: 'month',
36
- description: 'Best for professionals',
37
- discount: 'Save 20%',
38
- features: [
39
- { text: 'Unlimited Projects', included: true },
40
- { text: '100GB Storage', included: true },
41
- { text: 'Priority Support', included: true },
42
- { text: 'Advanced Analytics', included: true },
43
- { text: 'Custom Domain', included: false }
44
- ],
45
- button: 'Get Started',
46
- highlighted: true
47
- },
48
- {
49
- name: 'Enterprise',
50
- price: '$99',
51
- oldPrice: '',
52
- period: 'month',
53
- description: 'For large teams',
54
- discount: '',
55
- features: [
56
- { text: 'Unlimited Projects', included: true },
57
- { text: 'Unlimited Storage', included: true },
58
- { text: '24/7 Support', included: true },
59
- { text: 'Advanced Analytics', included: true },
60
- { text: 'Custom Domain', included: true }
61
- ],
62
- button: 'Contact Sales',
63
- highlighted: false
64
- }
65
- ]
66
- },
67
- variant: {
68
- type: 'array',
69
- value: ['border'],
70
- options: ['border', 'bg-1', 'bg-2', 'bg-3', 'size-s', 'size-m', 'size-l']
71
- }
72
- },
73
- render: function()
74
- {
75
- return `
76
- <div class="holder" :variant="variant.join(' ')">
77
- <div dh-for="plan in plans" class="plan" :highlighted="plan.highlighted">
78
- <div dh-if="plan.highlighted" class="badge">Popular</div>
79
- <div class="header">
80
- <h3 class="name">{{ plan.name }}</h3>
81
- <div class="description">{{ plan.description }}</div>
82
- </div>
83
- <div class="pricing">
84
- <div class="price-wrapper">
85
- <span dh-if="plan.oldPrice" class="old-price">{{ plan.oldPrice }}</span>
86
- <span class="price">{{ plan.price }}</span>
87
- <span class="period">/{{ plan.period }}</span>
88
- </div>
89
- <div dh-if="plan.discount" class="discount">{{ plan.discount }}</div>
90
- </div>
91
- <div class="features">
92
- <div dh-for="feature in plan.features" class="feature" :included="feature.included">
93
- <i class="icon">{{ feature.included ? 'check_circle' : 'cancel' }}</i>
94
- <span class="text">{{ feature.text }}</span>
95
- </div>
96
- </div>
97
- <e-button :variant="plan.highlighted ? ['brand', 'block'] : ['outline', 'block']">
98
- {{ plan.button }}
99
- </e-button>
100
- </div>
101
- </div>
102
- `;
103
- }
104
- });