@tplc/wot 0.0.1

package/components/wd-slider/wd-slider.vue

@@ -0,0 +1,377 @@
+<template>
+  <view :class="rootClass" :style="customStyle" :id="sliderId">
+    <!-- #ifdef MP-DINGTALK -->
+    <view :id="sliderId" style="flex: 1" :class="rootClass">
+      <!-- #endif -->
+      <view :class="`wd-slider__label-min ${customMinClass}`" v-if="!hideMinMax">
+        {{ minValue }}
+      </view>
+      <view class="wd-slider__bar-wrapper" :style="barWrapperStyle">
+        <view class="wd-slider__bar" :style="barCustomStyle"></view>
+        <!-- 左边 -->
+        <view
+          class="wd-slider__button-wrapper"
+          :style="buttonLeftStyle"
+          @touchstart="onTouchStart"
+          @touchmove="onTouchMove"
+          @touchend="onTouchEnd"
+          @touchcancel="onTouchEnd"
+        >
+          <view class="wd-slider__label" v-if="!hideLabel">{{ leftNewValue }}</view>
+          <view class="wd-slider__button" />
+        </view>
+        <!-- 右边 -->
+        <view
+          v-if="showRight"
+          class="wd-slider__button-wrapper"
+          :style="buttonRightStyle"
+          @touchstart="onTouchStartRight"
+          @touchmove="onTouchMoveRight"
+          @touchend="onTouchEndRight"
+          @touchcancel="onTouchEndRight"
+        >
+          <view class="wd-slider__label" v-if="!hideLabel">{{ rightNewValue }}</view>
+          <view class="wd-slider__button" />
+        </view>
+      </view>
+      <view :class="`wd-slider__label-max ${customMaxClass}`" v-if="!hideMinMax">
+        {{ maxValue }}
+      </view>
+      <!-- #ifdef MP-DINGTALK -->
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-slider',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue'
+import { getRect, isArray, isDef, isNumber, uuid } from '../common/util'
+import { useTouch } from '../composables/useTouch'
+import { sliderProps, type SliderExpose } from './types'
+
+const props = defineProps(sliderProps)
+const emit = defineEmits(['dragstart', 'dragmove', 'dragend', 'update:modelValue'])
+
+// 存放右滑轮中的所有属性
+const rightSlider = {
+  startValue: 0,
+  deltaX: 0,
+  newValue: 0,
+}
+const sliderId = ref<string>(`sliderId${uuid()}`)
+
+const touchLeft = useTouch()
+const touchRight = useTouch()
+
+const showRight = ref<boolean>(false)
+const barStyle = ref<string>('')
+const leftNewValue = ref<number>(0)
+const rightNewValue = ref<number>(0)
+const rightBarPercent = ref<number>(0)
+const leftBarPercent = ref<number>(0)
+const trackWidth = ref<number>(0)
+const trackLeft = ref<number>(0)
+const startValue = ref<number>(0)
+const currentValue = ref<number | number[]>(0)
+const newValue = ref<number>(0)
+
+const maxValue = ref<number>(100) // 最大值
+const minValue = ref<number>(0) // 最小值
+const stepValue = ref<number>(1) // 步长
+
+watch(
+  () => props.max,
+  (newValue) => {
+    if (newValue <= props.min) {
+      maxValue.value = props.min // 交换最大值和最小值
+      minValue.value = newValue
+      console.warn('[wot design] warning(wd-slider): max value must be greater than min value')
+    } else {
+      maxValue.value = newValue // 更新最大值
+    }
+    calcBarPercent()
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.min,
+  (newValue) => {
+    if (newValue >= props.max) {
+      minValue.value = props.max // 交换最小值和最大值
+      maxValue.value = newValue
+      console.warn('[wot design] warning(wd-slider): min value must be less than max value')
+    } else {
+      minValue.value = newValue // 更新最小值
+    }
+    calcBarPercent()
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.step,
+  (newValue) => {
+    if (newValue < 1) {
+      stepValue.value = 1
+      console.warn('[wot design] warning(wd-slider): step must be greater than 0')
+    } else {
+      stepValue.value = Math.floor(newValue)
+    }
+  },
+  { immediate: true },
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    // 类型校验，支持所有值(除null、undefined。undefined建议统一写成void (0)防止全局undefined被覆盖)
+    if (newValue === null || newValue === undefined) {
+      emit('update:modelValue', currentValue.value)
+      console.warn('[wot design] warning(wd-slider): value can nott be null or undefined')
+    } else if (isArray(newValue) && newValue.length !== 2) {
+      console.warn('[wot design] warning(wd-slider): value must be dyadic array')
+    } else if (!isNumber(newValue) && !isArray(newValue)) {
+      emit('update:modelValue', currentValue.value)
+      console.warn('[wot design] warning(wd-slider): value must be dyadic array Or Number')
+    }
+    // 动态传值后修改
+    if (isArray(newValue)) {
+      if (currentValue.value && isArray(currentValue.value) && equal(newValue, currentValue.value))
+        return
+      currentValue.value = newValue
+      showRight.value = true
+      if (leftBarPercent.value <= rightBarPercent.value) {
+        leftBarSlider(newValue[0])
+        rightBarSlider(newValue[1])
+      } else {
+        leftBarSlider(newValue[1])
+        rightBarSlider(newValue[0])
+      }
+    } else {
+      if (newValue === currentValue.value) return
+      currentValue.value = newValue
+      leftBarSlider(newValue)
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+const { proxy } = getCurrentInstance() as any
+
+const rootClass = computed(() => {
+  const rootClass = `wd-slider ${!props.hideLabel ? 'wd-slider__has-label' : ''} ${props.disabled ? 'wd-slider--disabled' : ''} ${props.customClass}`
+  return rootClass
+})
+
+const barWrapperStyle = computed(() => {
+  const barWrapperStyle = `${props.inactiveColor ? 'background:' + props.inactiveColor : ''}`
+  return barWrapperStyle
+})
+
+const barCustomStyle = computed(() => {
+  const barWrapperStyle = `${barStyle.value};${props.activeColor ? 'background:' + props.activeColor : ''}`
+  return barWrapperStyle
+})
+
+const buttonLeftStyle = computed(() => {
+  const buttonLeftStyle = `left: ${leftBarPercent.value}%; visibility: ${!props.disabled ? 'show' : 'hidden'};`
+  return buttonLeftStyle
+})
+
+const buttonRightStyle = computed(() => {
+  const buttonRightStyle = `left: ${rightBarPercent.value}%; visibility: ${!props.disabled ? 'show' : 'hidden'}`
+  return buttonRightStyle
+})
+
+onMounted(() => {
+  initSlider()
+})
+
+/**
+ * 初始化slider宽度
+ */
+function initSlider() {
+  getRect(`#${sliderId.value}`, false, proxy).then((data) => {
+    // trackWidth: 轨道全长
+    trackWidth.value = Number(data.width)
+    // trackLeft: 轨道距离左侧的距离
+    trackLeft.value = Number(data.left)
+  })
+}
+
+function onTouchStart(event: any) {
+  const { disabled, modelValue } = props
+  if (disabled) return
+  touchLeft.touchStart(event)
+  startValue.value = !isArray(modelValue)
+    ? format(modelValue)
+    : leftBarPercent.value < rightBarPercent.value
+      ? format(modelValue[0])
+      : format(modelValue[1])
+  emit('dragstart', {
+    value: currentValue.value,
+  })
+}
+function onTouchMove(event: any) {
+  const { disabled } = props
+  if (disabled) return
+  touchLeft.touchMove(event)
+  // 移动间距 deltaX 就是向左(-)向右(+)
+  const diff = (touchLeft.deltaX.value / trackWidth.value) * (maxValue.value - minValue.value)
+  newValue.value = startValue.value + diff
+
+  // 左滑轮滑动控制
+  leftBarSlider(newValue.value)
+  emit('dragmove', {
+    value: currentValue.value,
+  })
+}
+function onTouchEnd() {
+  if (props.disabled) return
+  emit('dragend', {
+    value: currentValue.value,
+  })
+}
+// 右边滑轮滑动状态监听
+function onTouchStartRight(event: any) {
+  if (props.disabled) return
+  const { modelValue } = props
+  // 右滑轮移动时数据绑定
+  touchRight.touchStart(event)
+  // 记录开始数据值
+  rightSlider.startValue =
+    leftBarPercent.value < rightBarPercent.value
+      ? format((modelValue as number[])[1])
+      : format((modelValue as number[])[0])
+  emit('dragstart', {
+    value: currentValue.value,
+  })
+}
+function onTouchMoveRight(event: any) {
+  if (props.disabled) return
+  touchRight.touchMove(event)
+  // 移动间距 deltaX 就是向左向右
+  const diff = (touchRight.deltaX.value / trackWidth.value) * (maxValue.value - minValue.value)
+  rightSlider.newValue = format(rightSlider.startValue + diff)
+  // 右滑轮滑动控制
+  rightBarSlider(rightSlider.newValue)
+  emit('dragmove', {
+    value: currentValue.value,
+  })
+}
+function onTouchEndRight() {
+  if (props.disabled) return
+  emit('dragend', {
+    value: currentValue.value,
+  })
+}
+/**
+ * 控制右侧滑轮滑动， value校验
+ * @param {Number} value 当前滑轮绑定值
+ */
+function rightBarSlider(value: number) {
+  value = format(value)
+  rightNewValue.value = value
+  emit('update:modelValue', [
+    Math.min(leftNewValue.value, rightNewValue.value),
+    Math.max(leftNewValue.value, rightNewValue.value),
+  ])
+  rightBarPercent.value = formatPercent(value)
+  styleControl()
+}
+/**
+ * 控制左滑轮滑动，更新渲染数据，对 value 进行校验取整
+ * @param {Number} value 当前滑轮绑定值
+ */
+function leftBarSlider(value: number) {
+  value = format(value)
+
+  // 把 value 转换成百分比
+  const percent = formatPercent(value)
+  if (!showRight.value) {
+    emit('update:modelValue', value)
+    leftNewValue.value = value
+    leftBarPercent.value = percent
+    barStyle.value = `width: ${percent}%; `
+  } else {
+    leftNewValue.value = value
+    leftBarPercent.value = percent
+    emit('update:modelValue', [
+      Math.min(leftNewValue.value, rightNewValue.value),
+      Math.max(leftNewValue.value, rightNewValue.value),
+    ])
+    styleControl()
+  }
+}
+// 样式控制
+function styleControl() {
+  // 左右滑轮距离左边最短为当前激活条所处位置
+  const barLeft =
+    leftBarPercent.value < rightBarPercent.value
+      ? [leftBarPercent.value, rightBarPercent.value]
+      : [rightBarPercent.value, leftBarPercent.value]
+  // 通过左右滑轮的间距控制 激活条宽度 barLeft[1] - barLeft[0]
+  const barStyleTemp = `width: ${barLeft[1] - barLeft[0]}%;  left: ${barLeft[0]}%`
+  currentValue.value =
+    leftNewValue.value < rightNewValue.value
+      ? [leftNewValue.value, rightNewValue.value]
+      : [rightNewValue.value, leftNewValue.value]
+  barStyle.value = barStyleTemp
+}
+
+function equal(arr1: number[], arr2: number[]) {
+  if (!isDef(arr1) || !isDef(arr2)) {
+    return false
+  }
+  let i = 0
+  arr1.forEach((item, index) => {
+    item === arr2[index] && i++
+  })
+  return i === 2
+}
+function format(value: number) {
+  const formatValue =
+    Math.round(Math.max(minValue.value, Math.min(value, maxValue.value)) / stepValue.value) *
+    stepValue.value
+  return formatValue
+}
+
+// 计算占比
+function formatPercent(value: number) {
+  const percentage = ((value - minValue.value) / (maxValue.value - minValue.value)) * 100
+  return percentage
+}
+// 计算滑块位置和进度长度
+function calcBarPercent() {
+  const { modelValue } = props
+  let value = !isArray(modelValue)
+    ? format(modelValue)
+    : leftBarPercent.value < rightBarPercent.value
+      ? format(modelValue[0])
+      : format(modelValue[1])
+  value = format(value)
+  // 把 value 转换成百分比
+  const percent = formatPercent(value)
+  leftBarPercent.value = percent
+  barStyle.value = `width: ${percent}%; `
+}
+
+defineExpose<SliderExpose>({
+  initSlider,
+})
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

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

@@ -0,0 +1,86 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-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) {
+    .wd-sort-button__left {
+      &::after {
+        position: absolute;
+        bottom: 6px;
+        left: 50%;
+        width: 19px;
+        height: 3px;
+        content: '';
+        background: $-sort-button-line-color;
+        border-radius: calc($-sort-button-line-height / 2);
+        opacity: 0;
+        transition: opacity 0.15s;
+        transform: translate(-50%, 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;
+
+      .wd-sort-button__right {
+        justify-content: center;
+      }
+    }
+  }
+
+  @include e(right) {
+    display: inline-block;
+    min-width: 14px;
+    margin-left: 2px;
+    line-height: 1.1;
+    vertical-align: middle;
+
+    @include when(active) {
+      :deep(.wd-sort-button__icon-up),
+      :deep(.wd-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/wd-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>

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

@@ -0,0 +1,76 @@
+<template>
+  <view
+    :class="`wd-sort-button ${line ? 'wd-sort-button--line' : ''} ${customClass}`"
+    :style="customStyle"
+    @click="handleClick"
+  >
+    <view class="wd-sort-button__wrapper">
+      <view :class="`wd-sort-button__left ${modelValue !== 0 ? 'is-active' : ''}`">
+        {{ title }}
+      </view>
+      <view :class="`wd-sort-button__right ${modelValue !== 0 ? 'is-active' : ''}`">
+        <wd-icon v-if="modelValue !== 1" name="arrow-up" custom-class="wd-sort-button__icon-up" />
+        <wd-icon
+          v-if="modelValue !== -1"
+          name="arrow-down"
+          custom-class="wd-sort-button__icon-down"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sort-button',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+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';
+</style>

package/components/wd-status-tip/index.scss

@@ -0,0 +1,37 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  background-color: $-dark-background2;
+  @include b(status-tip) {
+    @include e(text) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(status-tip) {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: $-statustip-padding;
+  margin: 0 auto;
+  font-size: $-statustip-fs;
+  color: $-statustip-color;
+
+  @include edeep(image) {
+    width: 160px;
+    height: 160px;
+    margin: 0 auto;
+  }
+  @include e(text) {
+    margin: 20px auto 0;
+    font-size: $-statustip-fs;
+    line-height: $-statustip-line-height;
+    color: $-statustip-color;
+    text-align: center;
+    word-break: break-all;
+  }
+}

package/components/wd-status-tip/types.ts

@@ -0,0 +1,59 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 13:49:00
+ * @LastEditTime: 2024-04-07 13:32:22
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+import type { ImageMode } from '../wd-img/types'
+
+export type ImageSize = {
+  /**
+   * 宽度
+   */
+  width: number | string
+  /**
+   * 高度
+   */
+  height: number | string
+}
+
+export const statusTipProps = {
+  ...baseProps,
+
+  /**
+   * 缺省图片类型，支持传入图片 URL。
+   * 类型: string
+   * 可选值: search, network, content, collect, comment, halo, message
+   * 默认值: network
+   */
+  image: makeStringProp('network'),
+
+  /**
+   * 图片大小，默认单位为 `px`。
+   * 类型: string 或 number 或 ImageSize
+   * 默认值: 空字符串
+   */
+  imageSize: {
+    type: [String, Number, Object] as PropType<string | number | ImageSize>,
+    default: '',
+  },
+  /**
+   * 提示文案。
+   * 类型: string
+   * 默认值: 空字符串
+   */
+  tip: makeStringProp(''),
+  /**
+   * 图片裁剪、缩放的模式
+   * 类型：string
+   * 默认值：'aspectFill'
+   */
+  imageMode: makeStringProp<ImageMode>('aspectFill'),
+}
+
+export type StatusTipProps = ExtractPropTypes<typeof statusTipProps>