bge-ui 1.2.2 → 1.2.4

package/dist/style.css

@@ -1432,11 +1432,13 @@ to {
 .bge-radio__inner:hover .border {
   fill: var(--tc-theme);
 }.bge-slider {
-  width: 100%;
-  height: 32px;
   display: flex;
   align-items: center;
   cursor: pointer;
+  padding: 7px 16px;
+}
+.bge-slider.mark {
+  margin-bottom: 32px;
 }
 .bge-slider .bge-slider__runway {
   background: var(--bg-slider, #2E3842);
@@ -1458,7 +1460,7 @@ to {
   width: 14px;
   position: absolute;
   z-index: 100;
-  top: -7px;
+  top: -6px;
   transform: translateX(-50%);
   background-color: transparent;
   text-align: center;
@@ -1467,6 +1469,9 @@ to {
   -ms-user-select: none;
   user-select: none;
   line-height: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .bge-slider .bge-slider__runway .slider-button-wrapper .slider-button {
   background: var(--bg-slider-selected, #4F5C71);
@@ -1503,6 +1508,19 @@ to {
   border-radius: 100%;
   transform: translateX(-50%);
 }
+.bge-slider .bge-slider__runway .bge-slider__stop .bge-slider__scale {
+  position: absolute;
+  left: -4px;
+  top: 15px;
+  color: var(--tc-tertiary);
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: 500;
+}
+.bge-slider .bge-slider__runway .bge-slider__stop:last-child .bge-slider__scale {
+  left: unset;
+  right: -4px;
+}
 .bge-slider .bge-slider__runway .bge-slider__stops.bge-slider__stop-0 .bge-slider__stop:nth-child(-n+1) {
   background: var(--bg-slider-selected, #4F5C71);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bge-ui",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",

package/src/slider/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bge-slider" @mouseleave="onDragEnd" @click="onSliderClick">
+  <div class="bge-slider" :class="{mark: Object.values(marks)[0]}" @mouseleave="onDragEnd" @click="onSliderClick">
     <div ref="slider" class="bge-slider__runway" >
       <div class="ui-slider__bar" :style="state.sliderBarStyle"></div>
       <div class="slider-button-wrapper" :style="state.sliderButtonStyle"
@@ -16,7 +16,9 @@
         <div v-else class="slider-button" @mouseover="state.hovering = true" @mouseleave="state.hovering = false"></div>
       </div>
       <div :class="`bge-slider__stops bge-slider__stop-${state.stopValue}`">
-        <div v-for="(mark, key) in marks" :key="key" class="bge-slider__stop" :style="`left: ${key}%;`"></div>
+        <div v-for="(mark, key) in marks" :key="key" class="bge-slider__stop" :style="`left: ${key}%;`">
+          <div class="bge-slider__scale">{{ mark }}</div>
+        </div>
       </div>
     </div>
   </div>
@@ -166,11 +168,14 @@ watch(() => props.modelValue, (val: number) => {
 </script>
 <style lang="scss">
 .bge-slider {
-  width: 100%;
-  height: 32px;
   display: flex;
   align-items: center;
   cursor: pointer;
+  padding: 7px 16px;
+
+  &.mark {
+    margin-bottom: 32px;
+  }
 
   .bge-slider__runway {
     background: var(--bg-slider, #2E3842);
@@ -193,7 +198,7 @@ watch(() => props.modelValue, (val: number) => {
       width: 14px;
       position: absolute;
       z-index: 100;
-      top: -7px;
+      top: -6px;
       transform: translateX(-50%);
       background-color: transparent;
       text-align: center;
@@ -202,6 +207,9 @@ watch(() => props.modelValue, (val: number) => {
       -ms-user-select: none;
       user-select: none;
       line-height: normal;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       .slider-button {
         // border: solid 4px rgba(255, 214, 51, 0.16);
@@ -242,6 +250,23 @@ watch(() => props.modelValue, (val: number) => {
       position: absolute;
       border-radius: 100%;
       transform: translateX(-50%);
+
+      .bge-slider__scale {
+        position: absolute;
+        left: -4px;
+        top: 15px;
+        color: var(--tc-tertiary);
+        font-size: 14px;
+        line-height: 24px;
+        font-weight: 500;
+      }
+      
+      &:last-child {
+        .bge-slider__scale {
+          left: unset;
+          right: -4px;
+        }
+      }
     }
 
     .bge-slider__stops {