@timus-networks/theme 2.4.6 → 2.4.8

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.
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@timus-networks/theme",
3
3
  "configKey": "themeOptions",
4
- "version": "2.4.6",
4
+ "version": "2.4.8",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "0.8.4",
7
7
  "unbuild": "2.0.0"
package/dist/module.mjs CHANGED
@@ -12,7 +12,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
12
12
  const __dirname = __cjs_path__.dirname(__filename);
13
13
  const require = __cjs_mod__.createRequire(import.meta.url);
14
14
  const name = "@timus-networks/theme";
15
- const version = "2.4.6";
15
+ const version = "2.4.8";
16
16
  const description = "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.";
17
17
  const type = "module";
18
18
  const exports = {
@@ -18,10 +18,17 @@
18
18
  </template>
19
19
  </el-popover>
20
20
 
21
- <el-popover placement="bottom" title="Title" :width="200" trigger="click" content="this is content, this is content, this is content">
21
+ <el-popover placement="bottom" trigger="click" popper-class="custom-popover">
22
22
  <template #reference>
23
- <el-button>Click to activate</el-button>
23
+ <el-button type="primary">popover</el-button>
24
24
  </template>
25
+ <div class="table-filter-box" style="padding: 10px">
26
+ <el-select v-model="model" style="width: 200px" :teleported="false">
27
+ <el-option label="item1" value="item1" />
28
+ <el-option label="item2" value="item2" />
29
+ <el-option label="item3" value="item3" />
30
+ </el-select>
31
+ </div>
25
32
  </el-popover>
26
33
 
27
34
  <el-popover ref="popoverRef" placement="right" title="Title" :width="200" trigger="focus" content="this is content, this is content, this is content">
@@ -97,6 +104,8 @@
97
104
  const onClickOutside = () => {
98
105
  unref(popoverRef).popperRef?.delayHide?.();
99
106
  };
107
+ const sizes = ['default', 'large', 'medium', 'small', 'mini'];
108
+ const model = ref('');
100
109
  const snippets = {
101
110
  basic: `
102
111
  <el-popover placement="top-start" title="Title" :width="200" trigger="hover" content="this is content, this is content, this is content">
@@ -21,6 +21,18 @@
21
21
  <el-table-column property="city" label="City" show-overflow-tooltip />
22
22
  <el-table-column property="zip" label="Zip" show-overflow-tooltip />
23
23
  <el-table-column property="address" label="Address" width="140" show-overflow-tooltip />
24
+ <el-table-column min-width="37" fixed="right">
25
+ <el-dropdown>
26
+ <el-icon class="more-icon"><el-icon-more-filled /></el-icon>
27
+ <template #dropdown>
28
+ <el-dropdown-menu data-testid="pages-customers-index-yisqvkendj">
29
+ <el-dropdown-item value="1"> Action 01 </el-dropdown-item>
30
+ <el-dropdown-item value="2"> Action 02 </el-dropdown-item>
31
+ <el-dropdown-item value="3"> Action 03 </el-dropdown-item>
32
+ </el-dropdown-menu>
33
+ </template>
34
+ </el-dropdown>
35
+ </el-table-column>
24
36
  </el-table>
25
37
  </div>
26
38
  <template #footer>
@@ -379,7 +379,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
379
379
  --el-overlay-color: rgba(0, 0, 0, 0.8);
380
380
  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
381
381
  --el-overlay-color-lighter: #69b64f;
382
- --el-mask-color: rgba(255, 255, 255, 0.9);
382
+ --el-mask-color: rgba(255, 255, 255, 0.8);
383
383
  --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
384
384
  --el-border-width: 1px;
385
385
  --el-border-style: solid;
@@ -276,7 +276,7 @@ $overlay-color: map.merge(
276
276
  $mask-color: () !default;
277
277
  $mask-color: map.merge(
278
278
  (
279
- '': rgba(255, 255, 255, 0.9),
279
+ '': rgba(255, 255, 255, 0.8),
280
280
  'extra-light': rgba(255, 255, 255, 0.3),
281
281
  ),
282
282
  $mask-color
@@ -1004,6 +1004,7 @@ $pagination: map.merge(
1004
1004
  'button-color': getCssVar('color-neutral-light-4'),
1005
1005
  'button-width': 32px,
1006
1006
  'button-height': 30px,
1007
+ 'select-height': 20px,
1007
1008
  'button-disabled-color': getCssVar('text-color-placeholder'),
1008
1009
  'button-disabled-bg-color': getCssVar('fill-color', 'blank'),
1009
1010
  'button-bg-color': getCssVar('fill-color'),
@@ -379,7 +379,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
379
379
  --el-overlay-color: rgba(0, 0, 0, 0.8);
380
380
  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
381
381
  --el-overlay-color-lighter: #69b64f;
382
- --el-mask-color: rgba(255, 255, 255, 0.9);
382
+ --el-mask-color: rgba(255, 255, 255, 0.8);
383
383
  --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
384
384
  --el-border-width: 1px;
385
385
  --el-border-style: solid;
@@ -9932,11 +9932,12 @@ heights > $common-component-size
9932
9932
  z-index: 2000;
9933
9933
  background-color: var(--el-mask-color);
9934
9934
  margin: 0;
9935
- top: 0;
9936
- right: 0;
9937
- bottom: 0;
9938
- left: 0;
9935
+ top: -1px;
9936
+ right: -1px;
9937
+ bottom: -1px;
9938
+ left: -1px;
9939
9939
  transition: opacity var(--el-transition-duration);
9940
+ border-radius: 0;
9940
9941
  }
9941
9942
  .el-loading-mask.is-fullscreen {
9942
9943
  position: fixed;
@@ -10956,6 +10957,7 @@ heights > $common-component-size
10956
10957
  --el-pagination-button-color: var(--el-color-neutral-light-4);
10957
10958
  --el-pagination-button-width: 32px;
10958
10959
  --el-pagination-button-height: 30px;
10960
+ --el-pagination-select-height: 20px;
10959
10961
  --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
10960
10962
  --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
10961
10963
  --el-pagination-button-bg-color: var(--el-fill-color);
@@ -10974,6 +10976,7 @@ heights > $common-component-size
10974
10976
  --el-pagination-button-color: var(--el-color-neutral-light-4);
10975
10977
  --el-pagination-button-width: 32px;
10976
10978
  --el-pagination-button-height: 30px;
10979
+ --el-pagination-select-height: 20px;
10977
10980
  --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
10978
10981
  --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
10979
10982
  --el-pagination-button-bg-color: var(--el-fill-color);
@@ -11002,6 +11005,7 @@ heights > $common-component-size
11002
11005
  width: 128px;
11003
11006
  }
11004
11007
  .el-pagination .el-select .el-select__wrapper {
11008
+ height: var(--el-pagination-select-height);
11005
11009
  min-height: var(--el-pagination-button-height);
11006
11010
  }
11007
11011
  .el-pagination button {
@@ -11271,6 +11275,7 @@ heights > $common-component-size
11271
11275
  box-shadow: var(--el-box-shadow-light);
11272
11276
  overflow-wrap: break-word;
11273
11277
  box-sizing: border-box;
11278
+ width: auto !important;
11274
11279
  }
11275
11280
  .el-popover.el-popper--plain {
11276
11281
  padding: var(--el-popover-padding-large);
@@ -12108,13 +12113,13 @@ heights > $common-component-size
12108
12113
 
12109
12114
  .el-scrollbar__bar {
12110
12115
  position: absolute;
12111
- right: 2px;
12112
- bottom: 2px;
12116
+ right: 0;
12117
+ bottom: 0;
12113
12118
  z-index: 1;
12114
12119
  border-radius: 4px;
12115
12120
  }
12116
12121
  .el-scrollbar__bar.is-vertical {
12117
- width: 6px;
12122
+ width: 4px;
12118
12123
  top: 2px;
12119
12124
  }
12120
12125
  .el-scrollbar__bar.is-vertical > div {
@@ -12122,7 +12127,7 @@ heights > $common-component-size
12122
12127
  }
12123
12128
 
12124
12129
  .el-scrollbar__bar.is-horizontal {
12125
- height: 6px;
12130
+ height: 4px;
12126
12131
  left: 2px;
12127
12132
  }
12128
12133
  .el-scrollbar__bar.is-horizontal > div {
@@ -13807,6 +13812,18 @@ heights > $common-component-size
13807
13812
  font-size: var(--el-table-font-size);
13808
13813
  line-height: 16px;
13809
13814
  }
13815
+ .el-table .cell .more-icon {
13816
+ display: flex;
13817
+ align-items: center;
13818
+ justify-content: center;
13819
+ color: var(--el-color-neutral-light-3);
13820
+ width: 24px;
13821
+ height: 24px;
13822
+ }
13823
+ .el-table .cell .more-icon svg {
13824
+ width: 24px;
13825
+ height: 20px;
13826
+ }
13810
13827
  .el-table--large {
13811
13828
  font-size: var(--el-font-size-base);
13812
13829
  }
@@ -13843,10 +13860,13 @@ heights > $common-component-size
13843
13860
  .el-table tr input[type=checkbox] {
13844
13861
  margin: 0;
13845
13862
  }
13846
- .el-table tr:not(:last-of-type) th.el-table__cell.is-leaf,
13847
- .el-table tr:not(:last-of-type) td.el-table__cell {
13863
+ .el-table th.el-table__cell.is-leaf,
13864
+ .el-table td.el-table__cell {
13848
13865
  border-bottom: var(--el-table-border);
13849
13866
  }
13867
+ .el-table tr:last-of-type td.el-table__cell {
13868
+ border-bottom: 1px solid transparent;
13869
+ }
13850
13870
  .el-table th.el-table__cell.is-sortable {
13851
13871
  cursor: pointer;
13852
13872
  }
@@ -318,11 +318,12 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
318
318
  z-index: 2000;
319
319
  background-color: var(--el-mask-color);
320
320
  margin: 0;
321
- top: 0;
322
- right: 0;
323
- bottom: 0;
324
- left: 0;
321
+ top: -1px;
322
+ right: -1px;
323
+ bottom: -1px;
324
+ left: -1px;
325
325
  transition: opacity var(--el-transition-duration);
326
+ border-radius: 0;
326
327
  }
327
328
  .el-loading-mask.is-fullscreen {
328
329
  position: fixed;
@@ -21,11 +21,12 @@
21
21
  z-index: 2000;
22
22
  background-color: getCssVar('mask-color');
23
23
  margin: 0;
24
- top: 0;
25
- right: 0;
26
- bottom: 0;
27
- left: 0;
24
+ top: -1px;
25
+ right: -1px;
26
+ bottom: -1px;
27
+ left: -1px;
28
28
  transition: opacity getCssVar('transition-duration');
29
+ border-radius: 0;
29
30
 
30
31
  @include when(fullscreen) {
31
32
  position: fixed;
@@ -308,6 +308,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
308
308
  --el-pagination-button-color: var(--el-color-neutral-light-4);
309
309
  --el-pagination-button-width: 32px;
310
310
  --el-pagination-button-height: 30px;
311
+ --el-pagination-select-height: 20px;
311
312
  --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
312
313
  --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
313
314
  --el-pagination-button-bg-color: var(--el-fill-color);
@@ -326,6 +327,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
326
327
  --el-pagination-button-color: var(--el-color-neutral-light-4);
327
328
  --el-pagination-button-width: 32px;
328
329
  --el-pagination-button-height: 30px;
330
+ --el-pagination-select-height: 20px;
329
331
  --el-pagination-button-disabled-color: var(--el-text-color-placeholder);
330
332
  --el-pagination-button-disabled-bg-color: var(--el-fill-color-blank);
331
333
  --el-pagination-button-bg-color: var(--el-fill-color);
@@ -354,6 +356,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
354
356
  width: 128px;
355
357
  }
356
358
  .el-pagination .el-select .el-select__wrapper {
359
+ height: var(--el-pagination-select-height);
357
360
  min-height: var(--el-pagination-button-height);
358
361
  }
359
362
  .el-pagination button {
@@ -76,6 +76,7 @@
76
76
  width: 128px;
77
77
 
78
78
  .#{$namespace}-select__wrapper {
79
+ height: getCssVar('pagination-select-height');
79
80
  min-height: getCssVar('pagination-button-height');
80
81
  }
81
82
  }
@@ -324,6 +324,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
324
324
  box-shadow: var(--el-box-shadow-light);
325
325
  overflow-wrap: break-word;
326
326
  box-sizing: border-box;
327
+ width: auto !important;
327
328
  }
328
329
  .el-popover.el-popper--plain {
329
330
  padding: var(--el-popover-padding-large);
@@ -18,6 +18,7 @@
18
18
  box-shadow: getCssVar('box-shadow-light');
19
19
  overflow-wrap: break-word;
20
20
  box-sizing: border-box;
21
+ width: auto !important;
21
22
 
22
23
  @include m(plain) {
23
24
  padding: getCssVar('popover-padding-large');
@@ -341,13 +341,13 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
341
341
 
342
342
  .el-scrollbar__bar {
343
343
  position: absolute;
344
- right: 2px;
345
- bottom: 2px;
344
+ right: 0;
345
+ bottom: 0;
346
346
  z-index: 1;
347
347
  border-radius: 4px;
348
348
  }
349
349
  .el-scrollbar__bar.is-vertical {
350
- width: 6px;
350
+ width: 4px;
351
351
  top: 2px;
352
352
  }
353
353
  .el-scrollbar__bar.is-vertical > div {
@@ -355,7 +355,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
355
355
  }
356
356
 
357
357
  .el-scrollbar__bar.is-horizontal {
358
- height: 6px;
358
+ height: 4px;
359
359
  left: 2px;
360
360
  }
361
361
  .el-scrollbar__bar.is-horizontal > div {
@@ -44,13 +44,13 @@
44
44
 
45
45
  @include e(bar) {
46
46
  position: absolute;
47
- right: 2px;
48
- bottom: 2px;
47
+ right: 0;
48
+ bottom: 0;
49
49
  z-index: 1;
50
50
  border-radius: 4px;
51
51
 
52
52
  @include when(vertical) {
53
- width: 6px;
53
+ width: 4px;
54
54
  top: 2px;
55
55
 
56
56
  > div {
@@ -59,7 +59,7 @@
59
59
  }
60
60
 
61
61
  @include when(horizontal) {
62
- height: 6px;
62
+ height: 4px;
63
63
  left: 2px;
64
64
 
65
65
  > div {
@@ -488,6 +488,18 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
488
488
  font-size: var(--el-table-font-size);
489
489
  line-height: 16px;
490
490
  }
491
+ .el-table .cell .more-icon {
492
+ display: flex;
493
+ align-items: center;
494
+ justify-content: center;
495
+ color: var(--el-color-neutral-light-3);
496
+ width: 24px;
497
+ height: 24px;
498
+ }
499
+ .el-table .cell .more-icon svg {
500
+ width: 24px;
501
+ height: 20px;
502
+ }
491
503
  .el-table--large {
492
504
  font-size: var(--el-font-size-base);
493
505
  }
@@ -524,10 +536,13 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
524
536
  .el-table tr input[type=checkbox] {
525
537
  margin: 0;
526
538
  }
527
- .el-table tr:not(:last-of-type) th.el-table__cell.is-leaf,
528
- .el-table tr:not(:last-of-type) td.el-table__cell {
539
+ .el-table th.el-table__cell.is-leaf,
540
+ .el-table td.el-table__cell {
529
541
  border-bottom: var(--el-table-border);
530
542
  }
543
+ .el-table tr:last-of-type td.el-table__cell {
544
+ border-bottom: 1px solid transparent;
545
+ }
531
546
  .el-table th.el-table__cell.is-sortable {
532
547
  cursor: pointer;
533
548
  }
@@ -203,6 +203,7 @@
203
203
  &:last-of-type {
204
204
  .cell {
205
205
  padding-right: 0;
206
+ // padding-left: 0;
206
207
  }
207
208
  }
208
209
  }
@@ -225,6 +226,21 @@
225
226
  font-size: getCssVar('table-font-size');
226
227
  line-height: 16px;
227
228
  }
229
+
230
+ .more-icon {
231
+ display: flex;
232
+ align-items: center;
233
+ justify-content: center;
234
+ color: var(--el-color-neutral-light-3);
235
+ width: 24px;
236
+ height: 24px;
237
+ // margin-left: 4px;
238
+
239
+ svg {
240
+ width: 24px;
241
+ height: 20px;
242
+ }
243
+ }
228
244
  }
229
245
 
230
246
  @each $size in (large, default, small) {
@@ -249,10 +265,14 @@
249
265
  }
250
266
  }
251
267
 
252
- tr:not(:last-of-type) {
253
- th.#{$namespace}-table__cell.is-leaf,
268
+ th.#{$namespace}-table__cell.is-leaf,
269
+ td.#{$namespace}-table__cell {
270
+ border-bottom: getCssVar('table-border');
271
+ }
272
+
273
+ tr:last-of-type {
254
274
  td.#{$namespace}-table__cell {
255
- border-bottom: getCssVar('table-border');
275
+ border-bottom: 1px solid transparent;
256
276
  }
257
277
  }
258
278
 
@@ -379,7 +379,7 @@ Bununla selectorun içerisine variable ekleyebiliyorsun
379
379
  --el-overlay-color: rgba(0, 0, 0, 0.8);
380
380
  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
381
381
  --el-overlay-color-lighter: #69b64f;
382
- --el-mask-color: rgba(255, 255, 255, 0.9);
382
+ --el-mask-color: rgba(255, 255, 255, 0.8);
383
383
  --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
384
384
  --el-border-width: 1px;
385
385
  --el-border-style: solid;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@timus-networks/theme",
3
- "version": "2.4.6",
3
+ "version": "2.4.8",
4
4
  "description": "A comprehensive Nuxt.js module providing a tailored theme experience with integrated TailwindCSS support for applications.",
5
5
  "type": "module",
6
6
  "exports": {