vue-stack-tabs 0.1.38 → 0.1.40

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 (11) hide show
  1. package/dist/src/lib/hooks/useTabpanel.d.ts +1 -0
  2. package/dist/vue-stack-tabs.es.js +761 -756
  3. package/dist/vue-stack-tabs.umd.js +2 -2
  4. package/package.json +1 -1
  5. package/src/lib/StackTabs.vue +4 -1
  6. package/src/lib/assets/style/common/mixins.scss +4 -4
  7. package/src/lib/assets/style/common/var.scss +29 -28
  8. package/src/lib/assets/style/icon.scss +1 -1
  9. package/src/lib/assets/style/index.scss +4 -4
  10. package/src/lib/assets/style/stackTab.scss +64 -64
  11. package/src/lib/hooks/useTabpanel.tsx +6 -1
package/src/lib/assets/style/stackTab.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  @use 'sass:math';
2
- @import './common/var';
3
- @import './common/mixins';
2
+ @use 'common/var' as *;
3
+ @use 'common/mixins';
4
4
 
5
5
  .stack-tab {
6
6
  display: flex;
7
7
  min-height: 300px;
8
- background-color: $--stack-tab-background-color-base;
8
+ background-color: $stack-tab-background-color-base;
9
9
  flex-direction: column;
10
10
  grid-gap: 5px;
11
11
 
@@ -30,29 +30,29 @@
30
30
  //蒙版按钮
31
31
  &__mask-button {
32
32
  height: 100%;
33
- width: $--stack-tab-button-size;
34
- background-color: $--stack-tab-text-color;
33
+ width: $stack-tab-button-size;
34
+ background-color: $stack-tab-text-color;
35
35
  margin: 0 5px;
36
- transition: $--stack-tab__trans;
36
+ transition: $stack-tab__trans;
37
37
 
38
38
  .stack-tab__header-button[disabled] & {
39
39
  cursor: not-allowed;
40
- background-color: $--stack-tab-color-disabled;
40
+ background-color: $stack-tab-color-disabled;
41
41
  transition: none;
42
42
  //pointer-events: none;
43
43
  }
44
44
  &:hover {
45
- background-color: $--stack-tab-color-primary;
45
+ background-color: $stack-tab-color-primary;
46
46
  }
47
47
 
48
48
  &:active {
49
49
  // cursor: pointer;
50
- background-color: $--stack-tab-color-primary-activate;
50
+ background-color: $stack-tab-color-primary-activate;
51
51
  }
52
52
  }
53
53
  &__button {
54
- height: $--stack-tab-button-size;
55
- width: $--stack-tab-button-size;
54
+ height: $stack-tab-button-size;
55
+ width: $stack-tab-button-size;
56
56
  margin: 0 5px;
57
57
  }
58
58
 
@@ -60,25 +60,25 @@
60
60
  position: relative;
61
61
  display: flex;
62
62
  width: 100%;
63
- height: $--stack-tab-head-height;
64
- border-bottom: 1px solid $--stack-tab-border-color;
63
+ height: $stack-tab-head-height;
64
+ border-bottom: 1px solid $stack-tab-border-color;
65
65
  box-sizing: border-box;
66
66
  //user-select: none;
67
67
 
68
68
  //tab header上面的按钮
69
69
  &-button {
70
70
  z-index: 2;
71
- height: $--stack-tab-head-height;
71
+ height: $stack-tab-head-height;
72
72
  width: fit-content;
73
73
  overflow: hidden;
74
- background-color: $--stack-tab-background-color-base;
74
+ background-color: $stack-tab-background-color-base;
75
75
  cursor: pointer;
76
76
  display: flex;
77
77
  align-items: center;
78
78
 
79
79
  //按钮禁用样式
80
80
  &[disabled] {
81
- background-color: $--stack-tab-background-color-inactive;
81
+ background-color: $stack-tab-background-color-inactive;
82
82
  box-shadow: none;
83
83
  cursor: not-allowed;
84
84
  }
@@ -88,7 +88,7 @@
88
88
  &__scroll {
89
89
  position: relative;
90
90
  flex: 1 1 0;
91
- height: $--stack-tab-head-height;
91
+ height: $stack-tab-head-height;
92
92
  overflow: hidden;
93
93
 
94
94
  &-container {
@@ -109,11 +109,11 @@
109
109
  bottom: 0;
110
110
  left: 0;
111
111
  /*z-index: 2;*/
112
- height: $--stack-tab-scroll-height;
112
+ height: $stack-tab-scroll-height;
113
113
  background-color: rgb(0 0 0 / 10%);
114
- border-radius: $--stack-tab-scroll-border-radius;
114
+ border-radius: $stack-tab-scroll-border-radius;
115
115
  opacity: 0;
116
- transition: $--stack-tab__trans;
116
+ transition: $stack-tab__trans;
117
117
 
118
118
  .stack-tab__scroll:hover &,
119
119
  &.is-dragging {
@@ -127,7 +127,7 @@
127
127
  height: 100%;
128
128
  background-color: rgba(0, 0, 0, 0.1);
129
129
 
130
- border-radius: $--stack-tab-scroll-border-radius;
130
+ border-radius: $stack-tab-scroll-border-radius;
131
131
  transition: background-color 0.3s ease-in-out;
132
132
 
133
133
  &:hover {
@@ -139,7 +139,7 @@
139
139
 
140
140
  .stack-tab__scrollbar.is-dragging &,
141
141
  &:hover {
142
- background-color: $--stack-tab-color-primary !important;
142
+ background-color: $stack-tab-color-primary !important;
143
143
  }
144
144
  }
145
145
 
@@ -163,15 +163,15 @@
163
163
  &__item {
164
164
  position: relative;
165
165
  display: flex;
166
- padding: 0 $--stack-tab-padding;
167
- font-size: $--stack-tab-font-size;
168
- color: $--stack-tab-text-color;
166
+ padding: 0 $stack-tab-padding;
167
+ font-size: $stack-tab-font-size;
168
+ color: $stack-tab-text-color;
169
169
  cursor: pointer;
170
- background-color: $--stack-tab-background-color-inactive;
171
- border: $--stack-tab-border;
170
+ background-color: $stack-tab-background-color-inactive;
171
+ border: $stack-tab-border;
172
172
  border-left: none;
173
173
  border-radius: 8px 8px 0 0;
174
- transition: $--stack-tab__trans;
174
+ transition: $stack-tab__trans;
175
175
  user-select: none;
176
176
  flex: none;
177
177
  align-items: center;
@@ -180,7 +180,7 @@
180
180
  margin-top: 5px;
181
181
 
182
182
  &:first-child {
183
- border-left: $--stack-tab-border;
183
+ border-left: $stack-tab-border;
184
184
  }
185
185
 
186
186
  /*
@@ -195,23 +195,23 @@
195
195
  */
196
196
  &.is-active {
197
197
  z-index: 1;
198
- background-color: $--stack-tab-background-color-base;
198
+ background-color: $stack-tab-background-color-base;
199
199
  border-bottom-color: #fff;
200
- box-shadow: $--stack-tab-shadow-left, $--stack-tab-shadow-right;
200
+ box-shadow: $stack-tab-shadow-left, $stack-tab-shadow-right;
201
201
  margin-top: unset;
202
202
  }
203
203
 
204
204
  &:hover,
205
205
  &.is-active {
206
- color: $--stack-tab-color-primary;
206
+ color: $stack-tab-color-primary;
207
207
 
208
208
  &.is-icon {
209
209
  padding: 0
210
- ($--stack-tab-padding - math.div($--stack-tab-button-size + $--stack-tab-icon-margin, 2));
210
+ ($stack-tab-padding - math.div($stack-tab-button-size + $stack-tab-icon-margin, 2));
211
211
 
212
212
  .stack-tab__item-button {
213
- width: $--stack-tab-button-size;
214
- margin-left: $--stack-tab-icon-margin;
213
+ width: $stack-tab-button-size;
214
+ margin-left: $stack-tab-icon-margin;
215
215
  }
216
216
  }
217
217
  }
@@ -245,18 +245,18 @@
245
245
  &-button {
246
246
  height: 100%;
247
247
  width: 0;
248
- background-color: $--stack-tab-text-color;
249
- transition: $--stack-tab__trans;
248
+ background-color: $stack-tab-text-color;
249
+ transition: $stack-tab__trans;
250
250
 
251
251
  &:hover {
252
- background-color: $--stack-tab-color-primary;
252
+ background-color: $stack-tab-color-primary;
253
253
  }
254
254
 
255
255
  &:active {
256
256
  /*
257
257
  cursor: pointer;
258
258
  */
259
- background-color: $--stack-tab-color-primary-activate;
259
+ background-color: $stack-tab-color-primary-activate;
260
260
  }
261
261
  }
262
262
  }
@@ -278,17 +278,17 @@
278
278
  line-height: 0.4rem;
279
279
  color: #fff;
280
280
  text-align: center;
281
- border: 1px solid $--stack-tab-background-color-base;
281
+ border: 1px solid $stack-tab-background-color-base;
282
282
  border-radius: 0.5rem;
283
283
  transform: translateX(100%) translateY(-50%);
284
284
  box-sizing: border-box;
285
285
 
286
286
  &.default {
287
- background: $--stack-tab-color-danger;
287
+ background: $stack-tab-color-danger;
288
288
  }
289
289
 
290
290
  &.primary {
291
- background: $--stack-tab-color-primary;
291
+ background: $stack-tab-color-primary;
292
292
  }
293
293
  }
294
294
  }
@@ -312,11 +312,11 @@
312
312
  z-index: 999;
313
313
  min-width: 120px;
314
314
  padding: 8px;
315
- font-size: $--stack-tab-font-size;
315
+ font-size: $stack-tab-font-size;
316
316
  background: #fff;
317
- border: $--stack-tab-border;
317
+ border: $stack-tab-border;
318
318
  border-radius: 10px 0;
319
- box-shadow: $--stack-tab-shadow-context-menu;
319
+ box-shadow: $stack-tab-shadow-context-menu;
320
320
  transform-origin: left top;
321
321
  transition: all 0.25s ease-in;
322
322
 
@@ -326,7 +326,7 @@
326
326
  align-items: center;
327
327
  padding: 0 10px;
328
328
  line-height: 30px;
329
- color: $--stack-tab-text-color;
329
+ color: $stack-tab-text-color;
330
330
  cursor: pointer;
331
331
  border-radius: 10px 0;
332
332
  transition: all 0.2s ease-in-out;
@@ -334,46 +334,46 @@
334
334
 
335
335
  &:hover,
336
336
  &:active {
337
- color: $--stack-tab-color-white;
338
- background-color: $--stack-tab-color-primary;
337
+ color: $stack-tab-color-white;
338
+ background-color: $stack-tab-color-primary;
339
339
 
340
340
  .svg-mask {
341
- background-color: $--stack-tab-color-white;
341
+ background-color: $stack-tab-color-white;
342
342
  }
343
343
  }
344
344
 
345
345
  &[disabled] {
346
- color: $--stack-tab-color-disabled;
346
+ color: $stack-tab-color-disabled;
347
347
  pointer-events: none;
348
348
  cursor: default;
349
349
  background: none;
350
350
 
351
351
  .svg-mask {
352
- background-color: $--stack-tab-color-disabled;
352
+ background-color: $stack-tab-color-disabled;
353
353
  }
354
354
  }
355
355
  }
356
356
 
357
357
  &-icon {
358
- width: $--stack-tab-font-size;
359
- height: $--stack-tab-font-size;
358
+ width: $stack-tab-font-size;
359
+ height: $stack-tab-font-size;
360
360
  transition: all 0.2s ease-in-out;
361
361
 
362
362
  &.svg-mask {
363
- width: $--stack-tab-font-size;
364
- height: $--stack-tab-font-size;
365
- background-color: $--stack-tab-text-color;
363
+ width: $stack-tab-font-size;
364
+ height: $stack-tab-font-size;
365
+ background-color: $stack-tab-text-color;
366
366
  }
367
367
  }
368
368
  }
369
369
  }
370
370
 
371
371
  .stack-tab__shadow-left {
372
- box-shadow: $--stack-tab-shadow-left;
372
+ box-shadow: $stack-tab-shadow-left;
373
373
  }
374
374
 
375
375
  .stack-tab__shadow-right {
376
- box-shadow: $--stack-tab-shadow-right;
376
+ box-shadow: $stack-tab-shadow-right;
377
377
  }
378
378
 
379
379
  /**
@@ -381,15 +381,15 @@
381
381
  */
382
382
  .stack-tab__shadow-inset {
383
383
  &-left::after {
384
- @include insetShadow();
385
- box-shadow: $--stack-tab-shadow-left-inset;
384
+ @include mixins.insetShadow();
385
+ box-shadow: $stack-tab-shadow-left-inset;
386
386
  }
387
387
  &-right::after {
388
- @include insetShadow();
389
- box-shadow: $--stack-tab-shadow-right-inset;
388
+ @include mixins.insetShadow();
389
+ box-shadow: $stack-tab-shadow-right-inset;
390
390
  }
391
391
  &-all::after {
392
- @include insetShadow();
393
- box-shadow: $--stack-tab-shadow-left-inset, $--stack-tab-shadow-right-inset;
392
+ @include mixins.insetShadow();
393
+ box-shadow: $stack-tab-shadow-left-inset, $stack-tab-shadow-right-inset;
394
394
  }
395
395
  }
package/src/lib/hooks/useTabpanel.tsx CHANGED
@@ -621,6 +621,10 @@ export default () => {
621
621
  // window.sessionStorage.setItem('tabItems', JSON.stringify(currentItems?.values()))
622
622
  window.sessionStorage.setItem(SESSION_TAB_NAME, JSON.stringify(tab))
623
623
  }
624
+ const clearSession = () => {
625
+ // window.sessionStorage.setItem('tabItems', JSON.stringify(currentItems?.values()))
626
+ window.sessionStorage.removeItem(SESSION_TAB_NAME)
627
+ }
624
628
  const reset = () => {
625
629
  pageShown.value = false
626
630
  destroy()
@@ -680,6 +684,7 @@ export default () => {
680
684
  refreshTab,
681
685
  refreshAllTabs,
682
686
  addPageScroller,
683
- setGlobalScroll
687
+ setGlobalScroll,
688
+ clearSession
684
689
  }
685
690
  }