oxy-uni-ui 1.0.1

package/components/oxy-slider/oxy-slider.vue

@@ -0,0 +1,356 @@
+<template>
+  <view :class="rootClass" :style="customStyle">
+    <!-- #ifdef MP-DINGTALK -->
+    <view style="flex: 1" :class="rootClass">
+      <!-- #endif -->
+      <view :class="`oxy-slider__label-min ${customMinClass}`" v-if="!hideMinMax">{{ minProp }}</view>
+      <view class="oxy-slider__bar-wrapper" :style="wrapperStyle" :id="sliderBarWrapperId">
+        <view class="oxy-slider__bar" :style="barStyle">
+          <template v-if="isRange">
+            <!-- 左边滑块 -->
+            <view
+              class="oxy-slider__button-wrapper oxy-slider__button-wrapper--left"
+              :style="sliderButtonStyle"
+              @touchstart="(event) => onSliderTouchStart(event, 0)"
+              @touchmove="onSliderTouchMove"
+              @touchend="onSliderTouchEnd"
+              @touchcancel="onSliderTouchEnd"
+            >
+              <view class="oxy-slider__label" v-if="!hideLabel">{{ firstValue }}</view>
+              <view class="oxy-slider__button" />
+            </view>
+            <!-- 右边滑块 -->
+            <view
+              class="oxy-slider__button-wrapper oxy-slider__button-wrapper--right"
+              :style="sliderButtonStyle"
+              @touchstart="(event) => onSliderTouchStart(event, 1)"
+              @touchmove="onSliderTouchMove"
+              @touchend="onSliderTouchEnd"
+              @touchcancel="onSliderTouchEnd"
+            >
+              <view class="oxy-slider__label" v-if="!hideLabel">{{ secondValue }}</view>
+              <view class="oxy-slider__button" />
+            </view>
+          </template>
+          <view
+            v-else
+            class="oxy-slider__button-wrapper"
+            :style="sliderButtonStyle"
+            @touchstart="(event) => onSliderTouchStart(event, 0)"
+            @touchmove="onSliderTouchMove"
+            @touchend="onSliderTouchEnd"
+            @touchcancel="onSliderTouchEnd"
+          >
+            <view class="oxy-slider__label" v-if="!hideLabel">{{ firstValue }}</view>
+            <view class="oxy-slider__button" />
+          </view>
+        </view>
+      </view>
+      <view :class="`oxy-slider__label-max ${customMaxClass}`" v-if="!hideMinMax">
+        {{ maxProp }}
+      </view>
+      <!-- #ifdef MP-DINGTALK -->
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-slider',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, type CSSProperties, getCurrentInstance, onMounted, ref, watch } from 'vue'
+import { deepClone, getRect, isArray, isDef, isEqual, objToStyle, uuid } from '../common/util'
+import { useTouch } from '../composables/useTouch'
+import { sliderProps, type SliderExpose, type SliderEmits, type SliderDragEvent, type SliderValue } from './types'
+
+const props = defineProps(sliderProps)
+const emit = defineEmits<SliderEmits>()
+
+// ----------- 基础状态 -----------
+const sliderBarWrapperId = ref<string>(`sliderBarWrapperId${uuid()}`)
+const touch = useTouch()
+const touchIndex = ref<number>(0)
+const { proxy } = getCurrentInstance() as any
+
+// ----------- 轨道尺寸状态 -----------
+const trackWidth = ref<number>(0)
+const trackLeft = ref<number>(0)
+
+// ----------- 值相关状态 -----------
+/**
+ * 最小值 - 直接使用props，减少状态同步
+ */
+const minProp = computed(() => props.min)
+
+/**
+ * 最大值 - 直接使用props，减少状态同步
+ */
+const maxProp = computed(() => props.max)
+
+/**
+ * 步长值 - 直接使用props，减少状态同步
+ */
+const stepProp = computed(() => {
+  if (props.step <= 0) {
+    console.warn('[Oxy ui] warning(oxy-slider): step must be greater than 0')
+    return 1
+  }
+  return props.step
+})
+
+const startValue = ref<SliderValue>(0)
+const modelValue = ref<SliderValue>(getInitValue())
+
+// ----------- 计算属性 -----------
+
+/**
+ * 是否为双滑块模式
+ */
+const isRange = computed(() => isArray(modelValue.value))
+
+/**
+ * 计算滑块的取值范围大小
+ */
+const scope = computed(() => maxProp.value - minProp.value)
+
+/**
+ * 获取左侧滑块的值
+ */
+const firstValue = computed(() => (isRange.value ? (modelValue.value as number[])[0] : (modelValue.value as number)))
+
+/**
+ * 获取右侧滑块的值（仅双滑块模式有效）
+ */
+const secondValue = computed(() => (isRange.value ? (modelValue.value as number[])[1] : 0))
+
+/**
+ * 根类名计算
+ */
+const rootClass = computed(() => {
+  return `oxy-slider ${!props.hideLabel ? 'oxy-slider__has-label' : ''} ${props.disabled ? 'oxy-slider--disabled' : ''} ${props.customClass}`
+})
+
+/**
+ * 滑块按钮样式
+ */
+const sliderButtonStyle = computed(() => {
+  return objToStyle({
+    visibility: !props.disabled ? 'visible' : 'hidden'
+  })
+})
+
+/**
+ * 轨道包装器样式
+ */
+const wrapperStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.inactiveColor) {
+    style.background = props.inactiveColor
+  }
+  return objToStyle(style)
+})
+
+/**
+ * 进度条样式计算
+ */
+const barStyle = computed(() => {
+  const style: CSSProperties = {}
+
+  if (scope.value === 0) return objToStyle(style)
+
+  if (isRange.value) {
+    // 双滑块模式
+    const [left, right] = normalizeRangeValues(modelValue.value as number[])
+    style.width = `${((right - left) * 100) / scope.value}%`
+    style.left = `${((left - minProp.value) * 100) / scope.value}%`
+  } else {
+    // 单滑块模式
+    style.width = `${(((modelValue.value as number) - minProp.value) * 100) / scope.value}%`
+    style.left = '0'
+  }
+
+  // 添加自定义颜色
+  if (props.activeColor) {
+    style.background = props.activeColor
+  }
+
+  return objToStyle(style)
+})
+
+// ----------- 监听器 -----------
+/**
+ * 监听 modelValue 属性变化
+ */
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!isEqual(newValue, modelValue.value)) {
+      modelValue.value = getInitValue()
+    }
+  },
+  { deep: true }
+)
+
+/**
+ * 向上发射模型值变化
+ */
+watch(modelValue, (newVal) => {
+  emit('update:modelValue', newVal)
+})
+
+// ----------- 生命周期钩子 -----------
+onMounted(() => {
+  initSlider()
+})
+
+// ----------- 工具方法 -----------
+/**
+ * 检查组件是否处于禁用状态
+ */
+function isDisabled(): boolean {
+  return props.disabled
+}
+
+/**
+ * 限制值在指定范围内
+ */
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max)
+}
+
+// ----------- 核心方法 -----------
+/**
+ * 初始化滑块宽度
+ */
+function initSlider() {
+  getRect(`#${sliderBarWrapperId.value}`, false, proxy).then((data) => {
+    trackWidth.value = Number(data.width)
+    trackLeft.value = Number(data.left)
+  })
+}
+
+/**
+ * 获取初始值
+ */
+function getInitValue(): SliderValue {
+  if (isArray(props.modelValue)) {
+    return normalizeRangeValues(props.modelValue as number[])
+  } else {
+    return clamp(props.modelValue as number, minProp.value, maxProp.value)
+  }
+}
+
+/**
+ * 处理双滑块模式下的值，确保值有效
+ */
+function normalizeRangeValues(value: number[]): [number, number] {
+  // 检查输入是否为有效的双滑块数组
+  if (!Array.isArray(value) || value.length < 2) {
+    console.warn('[Oxy ui] warning(oxy-slider): range value should be an array with at least 2 elements')
+    return [minProp.value, maxProp.value]
+  }
+
+  const left = clamp(value[0], minProp.value, maxProp.value)
+  const right = clamp(value[1], minProp.value, maxProp.value)
+
+  return left > right ? [right, left] : [left, right]
+}
+
+/**
+ * 将值对齐到最近的步长倍数
+ */
+function snapValueToStep(value: number): number {
+  // 确保值在范围内
+  value = clamp(value, minProp.value, maxProp.value)
+
+  // 计算最接近的步长倍数
+  const steps = Math.round((value - minProp.value) / stepProp.value)
+
+  // 计算最终值并处理精度问题
+  return parseFloat((minProp.value + steps * stepProp.value).toFixed(10))
+}
+
+/**
+ * 统一更新滑块值的函数
+ */
+function updateValue(value: SliderValue) {
+  let newValue: SliderValue = deepClone(value)
+
+  if (isArray(value)) {
+    newValue = normalizeRangeValues(value as number[]).map((v) => snapValueToStep(v)) as [number, number]
+  } else {
+    newValue = snapValueToStep(value as number)
+  }
+
+  if (!isEqual(newValue, modelValue.value)) {
+    modelValue.value = newValue
+  }
+}
+
+// ----------- 事件处理 -----------
+/**
+ * 滑块触摸开始事件处理
+ */
+function onSliderTouchStart(event: any, index: number) {
+  if (isDisabled()) return
+
+  touchIndex.value = index
+  touch.touchStart(event)
+
+  // 保存触摸开始时的滑块值
+  startValue.value = deepClone(modelValue.value)
+
+  // 触发拖动开始事件
+  emit('dragstart', { value: modelValue.value })
+}
+
+/**
+ * 滑块触摸移动事件处理
+ */
+function onSliderTouchMove(event: any) {
+  if (isDisabled()) return
+
+  // 更新触摸状态
+  touch.touchMove(event)
+
+  // 计算滑动距离对应的值变化
+  const diff = (touch.deltaX.value / trackWidth.value) * scope.value
+  let newValue = deepClone(startValue.value)
+
+  if (isArray(newValue)) {
+    ;(newValue as number[])[touchIndex.value] += diff
+  } else {
+    newValue = (newValue as number) + diff
+  }
+
+  updateValue(newValue)
+
+  // 触发拖动事件
+  emit('dragmove', { value: modelValue.value })
+}
+
+/**
+ * 滑块触摸结束事件处理
+ */
+function onSliderTouchEnd() {
+  if (isDisabled()) return
+
+  emit('dragend', { value: modelValue.value })
+}
+
+defineExpose<SliderExpose>({
+  initSlider
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-slider/types.ts

@@ -0,0 +1,138 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+/**
+ * 滑块值类型 - 单滑块为数字，双滑块为数组
+ */
+export type SliderValue = number | number[]
+
+export const sliderProps = {
+  ...baseProps,
+
+  /**
+   * 自定义最小值的样式类名
+   * 类型: string
+   * 默认值: ''
+   */
+  customMinClass: makeStringProp(''),
+
+  /**
+   * 自定义最大值的样式类名
+   * 类型: string
+   * 默认值: ''
+   */
+  customMaxClass: makeStringProp(''),
+
+  /**
+   * 是否隐藏左右的最大最小值
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideMinMax: makeBooleanProp(false),
+
+  /**
+   * 是否隐藏当前滑块值
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideLabel: makeBooleanProp(false),
+
+  /**
+   * 是否禁用滑块
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 进度条未激活的背景颜色
+   * 类型: string
+   * 默认值: '#e5e5e5'
+   */
+  inactiveColor: makeStringProp('#e5e5e5'),
+
+  /**
+   * 进度条激活的背景颜色
+   * 类型: string
+   * 默认值: ''
+   */
+  activeColor: makeStringProp(''),
+
+  /**
+   * 滑块的最大值
+   * 类型: number
+   * 默认值: 100
+   */
+  max: makeNumberProp(100),
+
+  /**
+   * 滑块的最小值
+   * 类型: number
+   * 默认值: 0
+   */
+  min: makeNumberProp(0),
+
+  /**
+   * 滑块的步进值
+   * 类型: number
+   * 默认值: 1
+   */
+  step: makeNumberProp(1),
+
+  /**
+   * 滑块的值，如果为数组，则为双向滑块
+   * 类型: number | number[]
+   * 默认值: 0
+   */
+  modelValue: {
+    type: [Number, Array] as PropType<SliderValue>,
+    default: 0
+  }
+}
+
+/**
+ * 滑块拖动事件参数
+ */
+export interface SliderDragEvent {
+  /**
+   * 当前滑块的值
+   * 单滑块模式为数字，双滑块模式为数组
+   */
+  value: SliderValue
+}
+
+/**
+ * 滑块组件事件类型定义
+ */
+export type SliderEmits = {
+  /**
+   * 开始拖动滑块时触发
+   */
+  dragstart: [event: SliderDragEvent]
+
+  /**
+   * 拖动滑块过程中触发
+   */
+  dragmove: [event: SliderDragEvent]
+
+  /**
+   * 结束拖动滑块时触发
+   */
+  dragend: [event: SliderDragEvent]
+
+  /**
+   * 更新滑块值时触发，用于v-model绑定
+   */
+  'update:modelValue': [value: SliderValue]
+}
+
+export type SliderExpose = {
+  /**
+   * 初始化slider宽度
+   */
+  initSlider: () => void
+}
+
+export type SliderProps = ExtractPropTypes<typeof sliderProps>
+
+export type SliderInstance = ComponentPublicInstance<SliderProps, SliderExpose>

package/components/oxy-sort-button/index.scss

@@ -0,0 +1,89 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(sort-button) {
+    @include e(wrapper) {
+      color: $-dark-color;
+    }
+  }
+
+}
+
+@include b(sort-button) {
+  display: inline-block;
+  height: $-sort-button-height;
+  line-height: $-sort-button-height;
+
+  @include m(line) {
+    .oxy-sort-button__left {
+      &::after {
+        position: absolute;
+        content: '';
+        width: 19px;
+        height: 3px;
+        bottom: 6px;
+        left: 50%;
+        transform: translate(-50%, 0);
+        background: $-sort-button-line-color;
+        border-radius: calc($-sort-button-line-height / 2);
+        transition: opacity .15s;
+        opacity: 0;
+      }
+
+      &.is-active::after {
+        opacity: 1;
+      }
+    }
+  }
+
+  @include e(wrapper) {
+    font-size: $-sort-button-fs;
+    color: $-sort-button-color;
+    word-break: break-all;
+    white-space: nowrap;
+  }
+
+  @include e(left) {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+
+    @include when(active) {
+      font-weight: $-fw-medium;
+
+      .oxy-sort-button__right {
+        justify-content: center;
+      }
+
+    }
+  }
+
+  @include e(right) {
+    display: inline-block;
+    min-width: 14px;
+    margin-left: 2px;
+    vertical-align: middle;
+    line-height: 1.1;
+
+    @include when(active) {
+
+      :deep(.oxy-sort-button__icon-up),
+      :deep(.oxy-sort-button__icon-down) {
+        transform: scale(calc((10 / 14)));
+      }
+    }
+  }
+
+  @include edeep(icon-up) {
+    display: block !important;
+    line-height: 1.1;
+    transform: scale(calc((10 / 14))) translate(0, 7px);
+  }
+
+  @include edeep(icon-down) {
+    display: block !important;
+    line-height: 1.1;
+    transform: scale(calc((10 / 14))) translate(0, -7px);
+  }
+}

package/components/oxy-sort-button/oxy-sort-button.vue

@@ -0,0 +1,69 @@
+<template>
+  <view :class="`oxy-sort-button ${line ? 'oxy-sort-button--line' : ''} ${customClass}`" :style="customStyle" @click="handleClick">
+    <view class="oxy-sort-button__wrapper">
+      <view :class="`oxy-sort-button__left ${modelValue !== 0 ? 'is-active' : ''}`">
+        {{ title }}
+      </view>
+      <view :class="`oxy-sort-button__right ${modelValue !== 0 ? 'is-active' : ''}`">
+        <oxy-icon v-if="modelValue !== 1" name="arrow-up" custom-class="oxy-sort-button__icon-up" />
+        <oxy-icon v-if="modelValue !== -1" name="arrow-down" custom-class="oxy-sort-button__icon-down" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-sort-button',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { sortButtonProps } from './types'
+
+const props = defineProps(sortButtonProps)
+
+const emit = defineEmits(['change', 'update:modelValue'])
+
+function handleClick() {
+  let { modelValue: value, allowReset, descFirst } = props
+  if (descFirst) {
+    if (value === 0) {
+      value = -1
+    } else if (value === -1) {
+      value = 1
+    } else if (value === 1) {
+      if (allowReset) {
+        value = 0
+      } else {
+        value = -1
+      }
+    }
+  } else {
+    if (value === 0) {
+      value = 1
+    } else if (value === 1) {
+      value = -1
+    } else if (value === -1) {
+      if (allowReset) {
+        value = 0
+      } else {
+        value = 1
+      }
+    }
+  }
+  emit('update:modelValue', value)
+  emit('change', {
+    value
+  })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-sort-button/types.ts

@@ -0,0 +1,43 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export const sortButtonProps = {
+  ...baseProps,
+  /**
+   * 选中的箭头方向，1表示升序，0表示重置状态，-1表示降序。
+   * 类型: number
+   * 可选值: -1, 0, 1
+   * 默认值: 0或-1（根据具体实现可能有所不同）
+   */
+  modelValue: makeNumberProp(0),
+
+  /**
+   * 排序按钮展示的文案。
+   * 类型: string
+   * 默认值: ''
+   */
+  title: makeStringProp(''),
+
+  /**
+   * 当展示双箭头时，是否允许手动重置按钮。
+   * 类型: boolean
+   * 默认值: false
+   */
+  allowReset: makeBooleanProp(false),
+
+  /**
+   * 是否优先切换为降序，如果不开启则默认优先切换为升序。
+   * 类型: boolean
+   * 默认值: false
+   */
+  descFirst: makeBooleanProp(false),
+
+  /**
+   * 是否展示下划线，当只有一个排序按钮时，通常不展示下划线。
+   * 类型: boolean
+   * 默认值: true
+   */
+  line: makeBooleanProp(true)
+}
+
+export type SortButtonProps = ExtractPropTypes<typeof sortButtonProps>