bge-ui 1.3.6 → 1.3.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.
Files changed (5) hide show
  1. package/dist/index.js +2 -2
  2. package/dist/style.css +29 -5
  3. package/package.json +1 -1
  4. package/src/tabs/index.vue +31 -3
  5. package/src/tabs/tab-pane.vue +17 -4
package/dist/index.js CHANGED
@@ -6280,7 +6280,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
6280
6280
  props: {
6281
6281
  type: {
6282
6282
  default: "bordered",
6283
- value: ["bordered", "pills"]
6283
+ value: ["bordered", "pills", "pills-elevated"]
6284
6284
  },
6285
6285
  modelValue: {
6286
6286
  type: String,
@@ -6288,7 +6288,7 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
6288
6288
  },
6289
6289
  size: {
6290
6290
  default: "default",
6291
- value: ["default", "large"]
6291
+ value: ["default", "large", "mini"]
6292
6292
  }
6293
6293
  },
6294
6294
  emits: ["update:modelValue"],
package/dist/style.css CHANGED
@@ -902,11 +902,27 @@ to {
902
902
  }
903
903
  .bge-input .bge-input__prefix .bge-input__prefix-inner {
904
904
  padding-right: 8px;
905
- }.bge-tabs.bge-tabs__bordered .bge-tabs__panes, .bge-tabs.bge-tabs__pills .bge-tabs__panes {
905
+ }.bge-tabs.bge-tabs__bordered .bge-tabs__panes, .bge-tabs.bge-tabs__pills .bge-tabs__panes, .bge-tabs.bge-tabs__pills-elevated .bge-tabs__panes {
906
906
  display: flex;
907
907
  align-items: flex-start;
908
908
  position: relative;
909
909
  }
910
+ .bge-tabs.bge-tabs__pills-elevated {
911
+ background: var(--bg-opacity);
912
+ border-radius: var(--radius-small, 4px);
913
+ }
914
+ .bge-tabs.bge-tabs__pills-elevated .bge-tabs__panes .bge-tab__pane {
915
+ padding: 6px 12px;
916
+ font-size: 14px;
917
+ font-weight: 500;
918
+ line-height: 24px;
919
+ }
920
+ .bge-tabs.bge-tabs__pills-elevated.bge-tabs__mini .bge-tabs__panes .bge-tab__pane {
921
+ padding: 2px 12px;
922
+ font-size: 12px;
923
+ font-weight: 500;
924
+ line-height: 20px;
925
+ }
910
926
  .bge-tabs.bge-tabs__default .bge-tabs__panes {
911
927
  font-size: 14px;
912
928
  font-weight: 500;
@@ -951,10 +967,6 @@ to {
951
967
  color: var(--tc-tertiary, #53677A);
952
968
  cursor: pointer;
953
969
  text-align: center;
954
- font-size: 14px;
955
- font-style: normal;
956
- font-weight: 500;
957
- line-height: 24px;
958
970
  }
959
971
  .bge-tabs__pills .bge-tab__pane:last-child {
960
972
  margin-right: 0;
@@ -967,6 +979,18 @@ to {
967
979
  color: var(--persistent-black, #000);
968
980
  background: var(--btn-primary, #FFFF38);
969
981
  }
982
+ .bge-tabs__pills-elevated .bge-tab__pane {
983
+ color: var(--tc-tertiary);
984
+ cursor: pointer;
985
+ }
986
+ .bge-tabs__pills-elevated .bge-tab__pane:hover {
987
+ color: var(--tc-title);
988
+ }
989
+ .bge-tabs__pills-elevated .bge-tab__pane.active {
990
+ color: var(--tc-title);
991
+ background: var(--bg-fusion);
992
+ border-radius: var(--radius-small, 4px);
993
+ }
970
994
  .bge-tabs__bordered {
971
995
  position: relative;
972
996
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bge-ui",
3
- "version": "1.3.6",
3
+ "version": "1.3.8",
4
4
  "description": "",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
package/src/tabs/index.vue CHANGED
@@ -15,7 +15,7 @@ defineOptions({
15
15
  const props = defineProps({
16
16
  type: {
17
17
  default: 'bordered',
18
- value: ['bordered', 'pills']
18
+ value: ['bordered', 'pills', 'pills-elevated']
19
19
  },
20
20
  modelValue: {
21
21
  type: String,
@@ -23,7 +23,7 @@ const props = defineProps({
23
23
  },
24
24
  size: {
25
25
  default: 'default',
26
- value: ['default', 'large']
26
+ value: ['default', 'large', 'mini']
27
27
  }
28
28
  })
29
29
 
@@ -92,13 +92,41 @@ onMounted(() => {
92
92
  .bge-tabs {
93
93
 
94
94
  &.bge-tabs__bordered,
95
- &.bge-tabs__pills {
95
+ &.bge-tabs__pills,
96
+ &.bge-tabs__pills-elevated {
96
97
  .bge-tabs__panes {
97
98
  display: flex;
98
99
  align-items: flex-start;
99
100
  position: relative;
100
101
  }
101
102
  }
103
+ &.bge-tabs__pills-elevated {
104
+ background: var(--bg-opacity);
105
+ border-radius: var(--radius-small, 4px);
106
+
107
+ .bge-tabs__panes {
108
+ .bge-tab__pane {
109
+ padding: 6px 12px;
110
+ font-size: 14px;
111
+ font-weight: 500;
112
+ line-height: 24px;
113
+ }
114
+ }
115
+
116
+
117
+ &.bge-tabs__mini {
118
+ .bge-tabs__panes {
119
+ .bge-tab__pane {
120
+ padding: 2px 12px;
121
+ font-size: 12px;
122
+ font-weight: 500;
123
+ line-height: 20px;
124
+ }
125
+ }
126
+ }
127
+ }
128
+
129
+
102
130
 
103
131
 
104
132
 
package/src/tabs/tab-pane.vue CHANGED
@@ -46,10 +46,6 @@ onMounted(() => {
46
46
  color: var(--tc-tertiary, #53677A);
47
47
  cursor: pointer;
48
48
  text-align: center;
49
- font-size: 14px;
50
- font-style: normal;
51
- font-weight: 500;
52
- line-height: 24px;
53
49
 
54
50
  &:last-child {
55
51
  margin-right: 0;
@@ -67,6 +63,23 @@ onMounted(() => {
67
63
  }
68
64
  }
69
65
 
66
+ .bge-tabs__pills-elevated {
67
+ .bge-tab__pane {
68
+ color: var(--tc-tertiary);
69
+ cursor: pointer;
70
+
71
+ &:hover {
72
+ color: var(--tc-title);
73
+ }
74
+
75
+ &.active {
76
+ color: var(--tc-title);
77
+ background: var(--bg-fusion);
78
+ border-radius: var(--radius-small, 4px);
79
+ }
80
+ }
81
+ }
82
+
70
83
  .bge-tabs__bordered {
71
84
  position: relative;
72
85