artalk 2.1.3 → 2.1.4

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 (36) hide show
  1. package/dist/Artalk.css +1 -1
  2. package/dist/Artalk.es.js +285 -323
  3. package/dist/Artalk.iife.js +1 -1
  4. package/dist/Artalk.js +1 -1
  5. package/package.json +6 -9
  6. package/src/api/index.ts +2 -3
  7. package/src/artalk.ts +2 -2
  8. package/src/components/action-btn.ts +1 -1
  9. package/src/components/comment.ts +88 -3
  10. package/src/components/editor-plugs/emoticons-plug.less +21 -11
  11. package/src/components/editor-plugs/emoticons-plug.ts +18 -18
  12. package/src/components/editor-plugs/preview-plug.less +1 -1
  13. package/src/components/editor.ts +15 -20
  14. package/src/components/html/comment.html +6 -13
  15. package/src/components/html/editor.html +8 -9
  16. package/src/components/html/list.html +1 -1
  17. package/src/components/list-lite.ts +203 -299
  18. package/src/components/list.ts +11 -9
  19. package/src/components/pagination.ts +2 -2
  20. package/src/components/read-more-btn.ts +27 -4
  21. package/src/components/sidebar-views/comments-view.ts +4 -5
  22. package/src/defaults.ts +1 -1
  23. package/src/lib/utils.ts +2 -1
  24. package/src/style/_color.less +19 -23
  25. package/src/style/_extend.less +3 -3
  26. package/src/style/_variables.less +0 -24
  27. package/src/style/comment.less +191 -197
  28. package/src/style/editor.less +69 -94
  29. package/src/style/item-text-editor.less +2 -2
  30. package/src/style/list.less +13 -13
  31. package/src/style/main.less +31 -31
  32. package/src/style/page-list.less +4 -4
  33. package/src/style/pagination.less +6 -6
  34. package/src/style/sidebar.less +35 -35
  35. package/src/style/site-list.less +13 -13
  36. package/types/artalk-data.d.ts +2 -2
package/src/style/sidebar.less CHANGED
@@ -9,7 +9,7 @@
9
9
  right: 0;
10
10
  width: @width;
11
11
  height: 100%;
12
- background: @color-bg;
12
+ background: var(--at-color-bg);
13
13
  transition: transform 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
14
14
  transform: translate(@width, 0px);
15
15
 
@@ -28,7 +28,7 @@
28
28
  display: flex;
29
29
  flex-direction: row;
30
30
  align-items: center;
31
- border-bottom: 1px solid @color-border;
31
+ border-bottom: 1px solid var(--at-color-border);
32
32
 
33
33
  .atk-avatar {
34
34
  display: flex;
@@ -42,11 +42,11 @@
42
42
  height: @height;
43
43
  width: @header-height - 30px;
44
44
  border-radius: 2px;
45
- background: @color-meta;
45
+ background: var(--at-color-meta);
46
46
  text-align: center;
47
47
  line-height: @height;
48
48
  font-size: 13px;
49
- color: @color-bg;
49
+ color: var(--at-color-bg);
50
50
  }
51
51
 
52
52
  .atk-site-logo {
@@ -61,7 +61,7 @@
61
61
 
62
62
  .atk-item {
63
63
  position: relative;
64
- color: @color-sub;
64
+ color: var(--at-color-sub);
65
65
  font-size: 20px;
66
66
  // cursor: pointer;
67
67
  user-select: none;
@@ -71,7 +71,7 @@
71
71
  }
72
72
 
73
73
  &.atk-active {
74
- color: @color-font;
74
+ color: var(--at-color-font);
75
75
 
76
76
  &:after {
77
77
  content: ' ';
@@ -80,7 +80,7 @@
80
80
  left: 0;
81
81
  width: 100%;
82
82
  height: 6px;
83
- background: @color-main;
83
+ background: var(--at-color-main);
84
84
  opacity: .4;
85
85
  }
86
86
  }
@@ -108,14 +108,14 @@
108
108
  .atk-sidebar-nav {
109
109
  display: flex;
110
110
  flex-direction: row;
111
- border-bottom: 1px solid @color-border;
111
+ border-bottom: 1px solid var(--at-color-border);
112
112
  height: @nav-height + 1px;
113
113
 
114
114
  .akt-curt-view-btn {
115
115
  display: flex;
116
116
  align-items: center;
117
117
  padding: 0 20px;
118
- border-right: 1px solid @color-border;
118
+ border-right: 1px solid var(--at-color-border);
119
119
  cursor: pointer;
120
120
  user-select: none;
121
121
  height: @nav-height;
@@ -123,7 +123,7 @@
123
123
  white-space: nowrap;
124
124
 
125
125
  &:hover {
126
- background: @color-bg-grey;
126
+ background: var(--at-color-bg-grey);
127
127
  }
128
128
 
129
129
  .atk-icon {
@@ -135,7 +135,7 @@
135
135
  width: 14px;
136
136
  height: 1px;
137
137
  margin: 0 auto 4px;
138
- background: @color-deep;
138
+ background: var(--at-color-deep);
139
139
  transform-origin: 20px;
140
140
 
141
141
  &:last-child {
@@ -185,18 +185,18 @@
185
185
  .atk-tab-item {
186
186
  line-height: @nav-height;
187
187
  height: @nav-height;
188
- color: @color-sub;
188
+ color: var(--at-color-sub);
189
189
  cursor: pointer;
190
190
  user-select: none;
191
191
  padding: 0 20px;
192
192
  white-space: nowrap;
193
193
 
194
194
  &:hover {
195
- background: @color-bg-grey;
195
+ background: var(--at-color-bg-grey);
196
196
  }
197
197
 
198
198
  &.atk-active {
199
- color: @color-deep;
199
+ color: var(--at-color-deep);
200
200
  }
201
201
  }
202
202
  }
@@ -211,11 +211,11 @@
211
211
  top: 70px;
212
212
  transform: translateX(-50%);
213
213
  pointer-events: all;
214
- background: @color-bg;
214
+ background: var(--at-color-bg);
215
215
  width: 80%;
216
216
  max-height: 40%;
217
217
  margin: 0 auto;
218
- border: 1px solid @color-border;
218
+ border: 1px solid var(--at-color-border);
219
219
  border-radius: 4px;
220
220
  overflow-y: auto;
221
221
 
@@ -236,22 +236,22 @@
236
236
  width: 20px;
237
237
  height: 20px;
238
238
  line-height: 20px;
239
- background: @color-meta;
239
+ background: var(--at-color-meta);
240
240
  margin: 10px;
241
241
  border-radius: 3px;
242
242
  text-align: center;
243
- color: @color-bg;
243
+ color: var(--at-color-bg);
244
244
  font-size: 12px;
245
245
  }
246
246
 
247
247
  .atk-site-name {
248
- color: @color-font;
248
+ color: var(--at-color-font);
249
249
  font-size: 17px;
250
250
  margin-left: 7px;
251
251
  }
252
252
 
253
253
  &.atk-active, &:hover {
254
- background: @color-bg-grey;
254
+ background: var(--at-color-bg-grey);
255
255
  }
256
256
  }
257
257
  }
@@ -269,7 +269,7 @@
269
269
  right: 0;
270
270
  top: 0;
271
271
  font-size: 35px;
272
- color: @color-meta;
272
+ color: var(--at-color-meta);
273
273
  pointer-events: none;
274
274
  height: 100%;
275
275
  display: flex;
@@ -286,7 +286,7 @@
286
286
  .atk-label {
287
287
  font-size: 16px;
288
288
  margin-bottom: 12px;
289
- color: @color-font;
289
+ color: var(--at-color-font);
290
290
  }
291
291
 
292
292
  .atk-desc {
@@ -295,7 +295,7 @@
295
295
  margin-left: 15px;
296
296
  margin-bottom: 20px;
297
297
  display: block;
298
- color: @color-meta;
298
+ color: var(--at-color-meta);
299
299
 
300
300
  a {
301
301
  opacity: 0.8;
@@ -308,20 +308,20 @@
308
308
  padding: 0 10px;
309
309
  margin: 0;
310
310
  border: none;
311
- border-bottom: 2px solid @color-border;
311
+ border-bottom: 2px solid var(--at-color-border);
312
312
  outline: none;
313
313
  width: 100%;
314
314
  margin-bottom: 25px;
315
- background: @color-bg;
315
+ background: var(--at-color-bg);
316
316
 
317
317
  &:focus {
318
- border-bottom-color: @color-bg-light;
318
+ border-bottom-color: var(--at-color-bg-light);
319
319
  }
320
320
 
321
321
  &[type="file"] {
322
322
  border-radius: 2px;
323
323
  background: transparent;
324
- border-bottom: 2px solid @color-border;
324
+ border-bottom: 2px solid var(--at-color-border);
325
325
  cursor: pointer;
326
326
  position: relative;
327
327
  padding: 0 15px;
@@ -343,22 +343,22 @@
343
343
  padding: 5px 10px;
344
344
  width: 100%;
345
345
  border: none;
346
- border-bottom: 2px solid @color-border;
346
+ border-bottom: 2px solid var(--at-color-border);
347
347
  margin-bottom: 25px;
348
348
  -webkit-appearance: none;
349
349
  border-radius: 0;
350
- background: @color-bg;
350
+ background: var(--at-color-bg);
351
351
  }
352
352
 
353
353
  button {
354
354
  &:hover {
355
- background: @color-bg-light;
355
+ background: var(--at-color-bg-light);
356
356
  }
357
357
 
358
358
  text-align: center;
359
- color: @color-light;
359
+ color: var(--at-color-light);
360
360
  background: transparent;
361
- border: 2px solid @color-bg-light;
361
+ border: 2px solid var(--at-color-bg-light);
362
362
  line-height: @form-height;
363
363
  letter-spacing: 2em;
364
364
  text-indent: 2em; // center
@@ -381,7 +381,7 @@
381
381
  padding: 5px 33px;
382
382
  cursor: pointer;
383
383
  user-select: none;
384
- border-right: 1px solid @color-border;
384
+ border-right: 1px solid var(--at-color-border);
385
385
  border-left: 1px solid transparent;
386
386
  &:hover {
387
387
  background: #f4f4f4;
@@ -409,8 +409,8 @@
409
409
  width: 100%;
410
410
  bottom: 0;
411
411
  left: 0;
412
- background: @color-bg;
413
- border-top: 1px solid @color-border;
412
+ background: var(--at-color-bg);
413
+ border-top: 1px solid var(--at-color-border);
414
414
  }
415
415
 
416
416
  .atk-list-read-more {
package/src/style/site-list.less CHANGED
@@ -25,7 +25,7 @@
25
25
  border-radius: 2px;
26
26
 
27
27
  &:hover {
28
- background: @color-bg-grey;
28
+ background: var(--at-color-bg-grey);
29
29
  }
30
30
  }
31
31
  }
@@ -58,7 +58,7 @@
58
58
  height: 65px;
59
59
  width: 65px;
60
60
  line-height: 65px;
61
- background: @color-quote;
61
+ background: #687a86;
62
62
  color: #fff;
63
63
  border-radius: 4px;
64
64
  }
@@ -66,25 +66,25 @@
66
66
  .atk-site-name {
67
67
  text-align: center;
68
68
  font-size: 15px;
69
- color: @color-sub;
69
+ color: var(--at-color-sub);
70
70
  padding: 0 17px;
71
71
  word-break: break-word;
72
72
  }
73
73
 
74
74
  &.atk-active {
75
- background-color: @color-bg-grey;
76
- border: 1px solid @color-border;
75
+ background-color: var(--at-color-bg-grey);
76
+ border: 1px solid var(--at-color-border);
77
77
  margin-top: -1px;
78
78
  border-radius: 0 0 4px 4px;
79
79
 
80
80
  .atk-site-name {
81
- color: @color-deep;
81
+ color: var(--at-color-deep);
82
82
  }
83
83
  }
84
84
 
85
85
  &:hover {
86
86
  .atk-site-name {
87
- color: @color-font;
87
+ color: var(--at-color-font);
88
88
  }
89
89
  }
90
90
  }
@@ -94,8 +94,8 @@
94
94
  position: relative;
95
95
  min-height: 120px;
96
96
  width: 100%;
97
- border-top: 1px solid @color-border;
98
- border-bottom: 1px solid @color-border;
97
+ border-top: 1px solid var(--at-color-border);
98
+ border-bottom: 1px solid var(--at-color-border);
99
99
  margin-bottom: -10px;
100
100
 
101
101
  .atk-header {
@@ -117,7 +117,7 @@
117
117
  position: absolute;
118
118
  width: 100%;
119
119
  height: 6px;
120
- background: @color-main;
120
+ background: var(--at-color-main);
121
121
  opacity: .4;
122
122
  left: 0;
123
123
  bottom: 6px;
@@ -132,8 +132,8 @@
132
132
  min-height: 23px;
133
133
 
134
134
  .atk-url-item {
135
- background: @color-bg-grey;
136
- color: @color-font;
135
+ background: var(--at-color-bg-grey);
136
+ color: var(--at-color-font);
137
137
  border-radius: 2px;
138
138
  padding: 0 8px;
139
139
  font-size: 13px;
@@ -156,7 +156,7 @@
156
156
  cursor: pointer;
157
157
 
158
158
  &:hover i {
159
- background-color: @color-red;
159
+ background-color: var(--at-color-red);
160
160
  }
161
161
  }
162
162
  }
package/types/artalk-data.d.ts CHANGED
@@ -64,8 +64,8 @@ export interface ListData {
64
64
  /** 评论数据 */
65
65
  comments: CommentData[]
66
66
 
67
- /** 父级评论总数 */
68
- total_parents: number
67
+ /** 根评论总数 */
68
+ total_roots: number
69
69
 
70
70
  /** 评论总数（包括所有子评论） */
71
71
  total: number