bge-ui 1.2.0 → 1.2.1

package/dist/slider/index.vue.d.ts

@@ -0,0 +1,51 @@
+declare const _default: import("vue").DefineComponent<{
+    marks: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showToolTip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formatTooltip: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    input: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+    blur: (...args: any[]) => void;
+    focus: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    marks: {
+        type: ObjectConstructor;
+        default: () => void;
+    };
+    modelValue: {
+        type: NumberConstructor;
+        default: number;
+    };
+    showToolTip: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    formatTooltip: {
+        type: FunctionConstructor;
+        default: undefined;
+    };
+}>> & {
+    onFocus?: ((...args: any[]) => any) | undefined;
+    onBlur?: ((...args: any[]) => any) | undefined;
+    onInput?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    modelValue: number;
+    showToolTip: boolean;
+    marks: Record<string, any>;
+    formatTooltip: Function;
+}, {}>;
+export default _default;

package/dist/style.css

@@ -764,6 +764,8 @@ to {
   margin-top: 4px;
 }.bge-input {
   position: relative;
+  --bg-input: var(--bg-opacity);
+  --bg-input-hover: var(--bg-opacity-hover);
 }
 .bge-input .bge-input__wrapper {
   height: 40px;
@@ -1428,4 +1430,110 @@ to {
 }
 .bge-radio__inner:hover .border {
   fill: var(--tc-theme);
+}.bge-slider {
+  width: 100%;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.bge-slider .bge-slider__runway {
+  background: var(--bg-slider, #2E3842);
+  height: 2px;
+  width: 100%;
+  border-radius: var(--radius-small);
+  position: relative;
+  vertical-align: middle;
+}
+.bge-slider .bge-slider__runway .ui-slider__bar {
+  height: 2px;
+  background: var(--bg-slider-selected, #4F5C71);
+  border-top-left-radius: 3px;
+  border-bottom-left-radius: 3px;
+  position: absolute;
+}
+.bge-slider .bge-slider__runway .slider-button-wrapper {
+  height: 16px;
+  width: 16px;
+  position: absolute;
+  z-index: 100;
+  top: -15px;
+  transform: translateX(-50%);
+  background-color: transparent;
+  text-align: center;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  line-height: normal;
+}
+.bge-slider .bge-slider__runway .slider-button-wrapper .slider-button {
+  background: var(--bg-slider-selected, #4F5C71);
+  position: relative;
+  top: 6px;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  transition: 0.2s;
+  user-select: none;
+  vertical-align: middle;
+  display: inline-block;
+}
+.bge-slider .bge-slider__runway .slider-button-wrapper .slider-button:hover {
+  transform: scale(1.2);
+  cursor: grab;
+}
+.bge-slider .bge-slider__runway .slider-button-wrapper .slider-button::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  transform: translate(3px, 3px);
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--bg-secondary);
+}
+.bge-slider .bge-slider__runway .bge-slider__stop {
+  background: var(--bg-slider, #2E3842);
+  height: 8px;
+  width: 8px;
+  top: -3px;
+  position: absolute;
+  border-radius: 100%;
+  transform: translateX(-50%);
+}
+.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);
+}
+.bge-slider .bge-slider__runway .bge-slider__stops.bge-slider__stop-1 .bge-slider__stop:nth-child(-n+2) {
+  background: var(--bg-slider-selected, #4F5C71);
+}
+.bge-slider .bge-slider__runway .bge-slider__stops.bge-slider__stop-2 .bge-slider__stop:nth-child(-n+3) {
+  background: var(--bg-slider-selected, #4F5C71);
+}
+.bge-slider .bge-slider__runway .bge-slider__stops.bge-slider__stop-3 .bge-slider__stop:nth-child(-n+4) {
+  background: var(--bg-slider-selected, #4F5C71);
+}
+.bge-slider .bge-slider__runway .bge-slider__stops.bge-slider__stop-4 .bge-slider__stop:nth-child(-n+5) {
+  background: var(--bg-slider-selected, #4F5C71);
+}
+.bge-slider .bge-slider__runway .bge-slider__stops.bge-slider__stop-5 .bge-slider__stop:nth-child(-n+6) {
+  background: var(--bg-slider-selected, #4F5C71);
+}
+.bge-slider .bge-slider__runway .bge-slider__stops.bge-slider__stop-6 .bge-slider__stop:nth-child(-n+7) {
+  background: var(--bg-slider-selected, #4F5C71);
+}
+.bge-slider .bge-slider__runway .bge-slider__stops.bge-slider__stop-7 .bge-slider__stop:nth-child(-n+8) {
+  background: var(--bg-slider-selected, #4F5C71);
+}
+.bge-slider .bge-slider__runway .bge-slider__stops.bge-slider__stop-8 .bge-slider__stop:nth-child(-n+9) {
+  background: var(--bg-slider-selected, #4F5C71);
+}
+.bge-slider .bge-slider__runway .bge-slider__stops.bge-slider__stop-9 .bge-slider__stop:nth-child(-n+10) {
+  background: var(--bg-slider-selected, #4F5C71);
+}
+.bge-slider .bge-slider__runway .bge-slider__stops.bge-slider__stop-10 .bge-slider__stop:nth-child(-n+11) {
+  background: var(--bg-slider-selected, #4F5C71);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bge-ui",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "",
   "type": "module",
   "main": "./src/index.ts",
@@ -26,7 +26,8 @@
     "sass": "^1.69.5",
     "tsx": "^4.6.2",
     "vite-plugin-dts": "^3.6.4",
-    "vue": "^3.3.9"
+    "vue": "^3.3.9",
+    "bignumber.js": "^9.1.2"
   },
   "devDependencies": {
     "@types/node": "^20.10.1"

package/src/index.ts

@@ -12,6 +12,7 @@ import UiMessage from "./message/method.ts"
 import UiDialog from "./dialog/index.vue"
 import UiCheckbox from "./checkBox/index.vue"
 import UiRadio from "./radio/index.vue"
+import UiSlider from "./slider/index.vue"
 
 const components: any = {
   UiButton,
@@ -24,7 +25,8 @@ const components: any = {
   UiTooltip,
   UiDialog,
   UiCheckbox,
-  UiRadio
+  UiRadio,
+  UiSlider
 }
 
 export * from './icons/index.ts'
@@ -41,7 +43,8 @@ export {
   UiDialog,
   UiMessage,
   UiCheckbox,
-  UiRadio
+  UiRadio,
+  UiSlider
 }
 
 export default {

package/src/input/index.vue

@@ -113,6 +113,9 @@ function handelClear() {
 .bge-input {
   position: relative;
 
+  --bg-input: var(--bg-opacity);
+  --bg-input-hover: var(--bg-opacity-hover);
+
   .bge-input__wrapper {
     height: 40px;
     padding: var(--layout-x-0, 0px) var(--layout-x-4, 16px);

package/src/slider/index.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="bge-slider" @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"
+           @touchstart="onButtonDown"
+           @mousedown="onButtonDown"
+      >
+        <ui-tooltip v-if="showToolTip" ref="tooltip" placement="top" size="mini" >
+          <template #content>
+            {{ formatTooltip ? formatTooltip(modelValue) : `${modelValue}%` }}
+          </template>
+          <div class="slider-button" @mouseover="state.hovering = true" @mouseleave="state.hovering = false"></div>
+        </ui-tooltip>
+
+        <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>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, watch } from 'vue'
+import UiTooltip from '../tooltip/index.vue'
+import BigNumber from 'bignumber.js'
+
+const props = defineProps({
+  marks: {
+    type: Object,
+    default: () => {}
+  },
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  showToolTip: {
+    type: Boolean,
+    default: true
+  },
+  formatTooltip: {
+    type: Function,
+    default: undefined
+  }
+})
+const emit = defineEmits(['input', 'focus', 'blur', 'update:modelValue'])
+const state = reactive({
+  hovering: false,
+  dragging: false,
+  isClick: false,
+  sliderOffsetLeft: 0,
+  sliderSize: 0,
+  sliderBarStyle: '',
+  sliderButtonStyle: '',
+  currentX: 0,
+  currentY: 0,
+  startPosition: 0,
+  newPosition: 0,
+  stopValue: 0,
+  newValue: 0
+})
+
+function onDragStart (event: any) {
+  emit('focus')
+  state.dragging = true
+  state.hovering = true
+  state.isClick = true
+  if (event.type === 'touchstart') {
+    event.clientY = event.touches[0].clientY
+    event.clientX = event.touches[0].clientX
+  }
+  state.sliderSize = slider.value.clientWidth
+  state.sliderOffsetLeft = slider.value.getBoundingClientRect().left
+  state.newPosition = state.startPosition
+}
+
+function onButtonDown (event: any) {
+  event.preventDefault()
+  onDragStart(event)
+  window.addEventListener('mousemove', onDragging)
+  window.addEventListener('touchmove', onDragging)
+  window.addEventListener('mouseup', onDragEnd)
+  window.addEventListener('touchend', onDragEnd)
+  window.addEventListener('contextmenu', onDragEnd)
+}
+
+function onDragEnd() {
+  if (state.dragging) {
+    /*
+      * 防止在 mouseup 后立即触发 click，导致滑块有几率产生一小段位移
+      * 不使用 preventDefault 是因为 mouseup 和 click 没有注册在同一个 DOM 上
+      */
+    setTimeout(() => {
+      state.dragging = false
+      state.hovering = false
+    }, 0)
+    window.removeEventListener('mousemove', onDragging)
+    window.removeEventListener('touchmove', onDragging)
+    window.removeEventListener('mouseup', onDragEnd)
+    window.removeEventListener('touchend', onDragEnd)
+    window.removeEventListener('contextmenu', onDragEnd)
+    emit('blur')
+  }
+}
+
+function onDragging(event: any) {
+  if (state.dragging) {
+    state.isClick = false
+    if (event.type === 'touchmove') {
+      event.clientY = event.touches[0].clientY
+      event.clientX = event.touches[0].clientX
+    }
+    let percent = ((event.clientX - state.sliderOffsetLeft) / state.sliderSize * 100)
+    percent = percent > 100 ? 100 : percent
+    percent = percent < 0 ? 0 : percent
+    setPosition(percent)
+  }
+}
+
+const slider = ref()
+
+function onSliderClick (event: any) {
+  if (state.dragging) {
+    return false
+  }
+  emit('focus')
+  state.sliderSize = slider.value.clientWidth
+  state.sliderOffsetLeft = slider.value.getBoundingClientRect().left
+  let percent = ((event.clientX - state.sliderOffsetLeft) / state.sliderSize * 100)
+
+  percent = percent > 100 ? 100 : percent
+  percent = percent < 0 ? 0 : percent
+  // 下边五行代码 要改到业务代码中
+  percent = new BigNumber(new BigNumber(percent).toFixed(0)).toNumber()
+  const maybePercent = new BigNumber(new BigNumber(percent).div(25).toFixed(0)).multipliedBy(25).toNumber()
+  const diffPercent = new BigNumber(maybePercent).minus(percent).abs().div(100).toNumber()
+  const isChange = diffPercent <= 0.03
+  percent = isChange ? maybePercent : percent
+  setPosition(percent)
+  setTimeout(() => emit('blur'))
+}
+
+const tooltip = ref()
+
+function setPosition (percent: any) {
+  state.sliderBarStyle = `width: ${percent}%`
+  state.sliderButtonStyle = `left: ${percent}%`
+  state.stopValue = Number((percent / 100 * (Object.values(props.marks).length - 1)).toFixed())
+  state.newValue = Number(percent.toFixed())
+  emit('input', state.newValue)
+  emit('update:modelValue', state.newValue)
+  setTimeout(() => {
+    tooltip.value && tooltip.value.popper.value.update()
+  }, 50)
+}
+
+watch(() => props.modelValue, (val: number) => {
+  let percent = val
+  percent = percent > 100 ? 100 : percent
+  percent = percent < 0 ? 0 : percent
+  setPosition(percent)
+}, {
+  immediate: true
+})
+</script>
+<style lang="scss">
+.bge-slider {
+  width: 100%;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  .bge-slider__runway {
+    background: var(--bg-slider, #2E3842);
+    height: 2px;
+    width: 100%;
+    border-radius: var(--radius-small);
+    position: relative;
+    vertical-align: middle;
+
+    .ui-slider__bar {
+      height: 2px;
+      background: var(--bg-slider-selected, #4F5C71);
+      border-top-left-radius: 3px;
+      border-bottom-left-radius: 3px;
+      position: absolute;
+    }
+
+    .slider-button-wrapper {
+      height: 16px;
+      width: 16px;
+      position: absolute;
+      z-index: 100;
+      top: -15px;
+      transform: translateX(-50%);
+      background-color: transparent;
+      text-align: center;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      user-select: none;
+      line-height: normal;
+
+      .slider-button {
+        // border: solid 4px rgba(255, 214, 51, 0.16);
+        background: var(--bg-slider-selected, #4F5C71);
+        position: relative;
+        top: 6px;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        transition: 0.2s;
+        user-select: none;
+        vertical-align: middle;
+        display: inline-block;
+
+        &:hover {
+          transform: scale(1.2);
+          cursor: grab;
+        }
+
+        &::before {
+          content: "";
+          position: absolute;
+          left: 0;
+          top: 0;
+          transform: translate(3px, 3px);
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: var(--bg-secondary);
+        }
+      }
+    }
+
+    .bge-slider__stop {
+      background: var(--bg-slider, #2E3842);
+      height: 8px;
+      width: 8px;
+      top: -3px;
+      position: absolute;
+      border-radius: 100%;
+      transform: translateX(-50%);
+    }
+
+    .bge-slider__stops {
+      @for $i from 0 through 10 {
+        &.bge-slider__stop-#{$i} {
+          .bge-slider__stop {
+            &:nth-child(-n + #{$i+1}) {
+              background: var(--bg-slider-selected, #4F5C71);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>