@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

package/components/wd-checkbox-group/types.ts

@@ -0,0 +1,93 @@
+import { type ExtractPropTypes, type InjectionKey, type PropType, type ComponentPublicInstance } from 'vue'
+import type { CheckboxDirection, CheckboxPlacement, CheckboxType } from '../wd-checkbox/types'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+
+export type CheckboxGroupToggleAllOptions =
+  | boolean
+  | {
+      checked?: boolean
+      skipDisabled?: boolean
+    }
+
+export type RequiredModelValue = {
+  modelValue: Array<string | number | boolean>
+}
+
+export type checkboxGroupProvide = {
+  props: Partial<Omit<CheckboxGroupProps, 'modelValue'>> & RequiredModelValue
+  changeSelectState: (value: string | number | boolean) => void
+}
+
+export const CHECKBOX_GROUP_KEY: InjectionKey<checkboxGroupProvide> = Symbol('wd-checkbox-group')
+
+export const checkboxGroupProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   * 默认值: []
+   */
+  modelValue: {
+    type: Array as PropType<Array<string | number | boolean>>,
+    default: () => []
+  },
+  /**
+   * 单选框形状
+   * 可选值: circle | square | button | dot
+   * 默认值: circle
+   */
+  type: makeStringProp<CheckboxType>('circle'),
+  /**
+   * 选中的颜色
+   */
+  checkedColor: String,
+  /**
+   * 未选中时的颜色
+   */
+  uncheckedColor: String,
+  /**
+   * 禁用
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 只读
+   * 默认值: false
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 最小选中的数量
+   * 默认值: 0
+   */
+  min: makeNumberProp(0),
+  /**
+   * 最大选中的数量
+   * 0 为无限数量
+   * 默认值: 0
+   */
+  max: makeNumberProp(0),
+  /**
+   * 设置大小
+   * 可选值: large
+   */
+  size: String,
+  /**
+   * 文本位置
+   * 可选值: left | right
+   * 默认值: left
+   */
+  placement: makeStringProp<CheckboxPlacement>('left'),
+  /**
+   * 布局方向
+   * 可选值: horizontal | vertical
+   * 默认值: vertical
+   */
+  direction: makeStringProp<CheckboxDirection>('vertical')
+}
+
+export type CheckboxGroupProps = ExtractPropTypes<typeof checkboxGroupProps>
+
+export type CheckboxGroupExpose = {
+  toggleAll: (options?: CheckboxGroupToggleAllOptions) => void
+}
+
+export type CheckboxGroupInstance = ComponentPublicInstance<CheckboxGroupProps, CheckboxGroupExpose>

package/components/wd-checkbox-group/wd-checkbox-group.vue

@@ -0,0 +1,148 @@
+<template>
+  <view :class="`wd-checkbox-group ${customClass}`" :style="customStyle">
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-checkbox-group',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { watch } from 'vue'
+import { checkNumRange, deepClone, isBoolean } from '../../common/util'
+import { useChildren } from '../../composables/useChildren'
+import { CHECKBOX_GROUP_KEY, checkboxGroupProps, type CheckboxGroupExpose, type CheckboxGroupToggleAllOptions } from './types'
+
+const props = defineProps(checkboxGroupProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const { linkChildren, children } = useChildren(CHECKBOX_GROUP_KEY)
+
+linkChildren({ props, changeSelectState })
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    // 传入的value数组中包括重复的元素，这种情况非法。
+    if (new Set(newValue).size !== newValue.length) {
+      // eslint-disable-next-line quotes
+      console.error("checkboxGroup's bound value includes same value")
+    }
+    if (newValue.length < props.min) {
+      // eslint-disable-next-line quotes
+      console.error("checkboxGroup's bound value's length can't be less than min")
+    }
+    if (props.max !== 0 && newValue.length > props.max) {
+      // eslint-disable-next-line quotes
+      console.error("checkboxGroup's bound value's length can't be large than max")
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.type,
+  (newValue) => {
+    const type = ['circle', 'square', 'button', 'dot']
+    if (type.indexOf(newValue) === -1) console.error(`type must be one of ${type.toString()}`)
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.min,
+  (newValue) => {
+    checkNumRange(newValue, 'min')
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.max,
+  (newValue) => {
+    checkNumRange(newValue, 'max')
+  },
+  { deep: true, immediate: true }
+)
+
+/**
+ * @description 子节点通知父节点修改子节点选中状态
+ * @param {any} value 子组件的标识符
+ */
+function changeSelectState(value: string | number | boolean) {
+  const temp: (string | number | boolean)[] = deepClone(props.modelValue)
+  const index = temp.indexOf(value)
+  if (index > -1) {
+    // 已经选中，则从 value 列表中删除子节点的标识符。
+    temp.splice(index, 1)
+  } else {
+    // 之前未选中，则现在把加子节点的标识符加到 value 列表中。
+    if (props.max !== 0 && temp.length >= props.max) {
+      // Limit reached
+      return
+    }
+    temp.push(value)
+  }
+  emit('update:modelValue', temp)
+
+  emit('change', {
+    value: temp
+  })
+}
+
+/**
+ * @description 切换所有复选框，传 true 为选中，false 为取消选中，不传参为取反
+ * @param options
+ */
+const toggleAll = (options: CheckboxGroupToggleAllOptions = {}) => {
+  const { modelValue } = props
+  let checked: boolean | undefined
+  let skipDisabled = false
+
+  if (isBoolean(options)) {
+    checked = options
+  } else {
+    checked = options.checked
+    skipDisabled = options.skipDisabled || false
+  }
+
+  const newModelValue: (string | number | boolean)[] = []
+
+  children.forEach((child: any) => {
+    if (skipDisabled && child.disabled) {
+      if (modelValue.includes(child.name)) {
+        newModelValue.push(child.name)
+      }
+    } else {
+      const isCurrentChecked = modelValue.includes(child.name)
+      const target = checked === undefined ? !isCurrentChecked : checked
+
+      if (target) {
+        newModelValue.push(child.name)
+      }
+    }
+  })
+
+  emit('update:modelValue', newModelValue)
+  emit('change', {
+    value: newModelValue
+  })
+}
+
+defineExpose<CheckboxGroupExpose>({
+  toggleAll
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-circle/index.scss

@@ -0,0 +1,28 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 圆环文字颜色
+$circle-text-color: var(--wot-circle-text-color, currentColor) !default;
+// 圆环文字字号
+$circle-text-font-size: var(--wot-circle-text-size, $typography-title-size-large) !default;
+// 圆环文字行高
+$circle-text-line-height: var(--wot-circle-text-line-height, $typography-title-line--height-size-large) !default;
+
+
+@include b(circle) {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+
+  @include e(text) {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    transform: translateY(-50%);
+    font-size: $circle-text-font-size;
+    line-height: $circle-text-line-height;
+    color: $circle-text-color;
+  }
+}

package/components/wd-circle/types.ts

@@ -0,0 +1,54 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+
+// 进度条端点的形状，可选值为 "butt" | "round" | "square"
+export type StrokeLinecapType = 'butt' | 'round' | 'square'
+
+export const circleProps = {
+  ...baseProps,
+  /**
+   * 当前进度
+   */
+  modelValue: makeNumberProp(0),
+  /**
+   * 圆环直径，默认单位为 px
+   */
+  size: makeNumberProp(120),
+  /**
+   * 进度条颜色，传入对象格式可以定义渐变色
+   */
+  color: {
+    type: [String, Object] as PropType<string | Record<string, string>>,
+    default: '#1C64FD'
+  },
+  /**
+   * 轨道颜色
+   */
+  layerColor: makeStringProp('#F2F3F5'),
+  /**
+   * 填充颜色
+   */
+  fill: String,
+  /**
+   * 动画速度（单位为 rate/s）
+   */
+  speed: makeNumberProp(50),
+  /**
+   * 文字
+   */
+  text: String,
+  /**
+   * 进度条宽度 单位px
+   */
+  strokeWidth: makeNumberProp(18),
+  /**
+   * 进度条端点的形状，可选值为 "butt" | "round" | "square"
+   */
+  strokeLinecap: makeStringProp<StrokeLinecapType>('round'),
+  /**
+   * 是否顺时针增加
+   */
+  clockwise: makeBooleanProp(true)
+}
+
+export type CircleProps = ExtractPropTypes<typeof circleProps>

package/components/wd-circle/wd-circle.vue

@@ -0,0 +1,306 @@
+<template>
+  <view :class="`wd-circle ${customClass}`" :style="rootStyle">
+    <!-- #ifdef MP-WEIXIN -->
+    <canvas :style="canvasStyle" :id="canvasId" :canvas-id="canvasId" type="2d"></canvas>
+    <!-- #endif -->
+    <!-- #ifndef MP-WEIXIN -->
+    <canvas :width="canvasSize" :height="canvasSize" :style="canvasStyle" :id="canvasId" :canvas-id="canvasId"></canvas>
+    <!-- #endif -->
+
+    <view v-if="!text" class="wd-circle__text">
+      <!-- 自定义提示内容 -->
+      <slot></slot>
+    </view>
+
+    <text v-else class="wd-circle__text">
+      {{ text }}
+    </text>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-circle',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, type CSSProperties, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue'
+import { addUnit, isObj, objToStyle, uuid, getSystemInfo } from '../../common/util'
+import { circleProps } from './types'
+// #ifdef MP-WEIXIN
+import { canvas2dAdapter } from '../../common/canvasHelper'
+// #endif
+
+// 大于等于0且小于等于100
+function format(rate: number) {
+  return Math.min(Math.max(rate, 0), 100)
+}
+// 结束角度
+const PERIMETER = 2 * Math.PI
+// 开始角度
+const BEGIN_ANGLE = -Math.PI / 2
+const STEP = 1
+
+const props = defineProps(circleProps)
+const { proxy } = getCurrentInstance() as any
+
+const progressColor = ref<string | CanvasGradient>('') // 进度条颜色
+
+const currentValue = ref<number>(0) // 当前值
+const interval = ref<any>(null) // 定时器
+const pixelRatio = ref<number>(1) // 像素比
+const canvasId = ref<string>(`wd-circle${uuid()}`) // canvasId
+let ctx: UniApp.CanvasContext | null = null
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    color: isObj(props.color) ? 'var(--wot-text-main)' : props.color
+  }
+
+  return `${objToStyle(style)};${props.customStyle}`
+})
+
+// canvas渲染大小
+const canvasSize = computed(() => {
+  let size = props.size
+  // #ifdef MP-ALIPAY
+  size = size * pixelRatio.value
+  // #endif
+
+  return size
+})
+
+// 进度条宽度
+const sWidth = computed(() => {
+  let sWidth = props.strokeWidth
+  // #ifdef MP-ALIPAY
+  sWidth = sWidth * pixelRatio.value
+  // #endif
+  return sWidth
+})
+
+// Circle 样式
+const canvasStyle = computed(() => {
+  const style = {
+    width: addUnit(props.size),
+    height: addUnit(props.size)
+  }
+  return `${objToStyle(style)}`
+})
+
+// 监听目标数值变化
+watch(
+  () => props.modelValue,
+  () => {
+    reRender()
+  },
+  { immediate: true }
+)
+
+// 监听Circle大小变化
+watch(
+  () => props.size,
+  () => {
+    let timer = setTimeout(() => {
+      drawCircle(currentValue.value)
+      clearTimeout(timer)
+    }, 50)
+  },
+  { immediate: false }
+)
+
+// 监听进度条颜色变化
+watch(
+  () => props.color,
+  () => {
+    drawCircle(currentValue.value)
+  },
+  { immediate: false, deep: true }
+)
+
+onBeforeMount(() => {
+  pixelRatio.value = getSystemInfo().pixelRatio
+})
+
+onMounted(() => {
+  currentValue.value = props.modelValue
+  drawCircle(currentValue.value)
+})
+
+onUnmounted(() => {
+  clearTimeInterval()
+})
+
+/**
+ * 获取canvas上下文
+ */
+function getContext() {
+  return new Promise<UniApp.CanvasContext>((resolve) => {
+    if (ctx) {
+      return resolve(ctx)
+    }
+    // #ifndef MP-WEIXIN
+    ctx = uni.createCanvasContext(canvasId.value, proxy)
+    resolve(ctx)
+    // #endif
+    // #ifdef MP-WEIXIN
+    uni
+      .createSelectorQuery()
+      .in(proxy)
+      .select(`#${canvasId.value}`)
+      .node((res) => {
+        if (res && res.node) {
+          const canvas = res.node
+          ctx = canvas2dAdapter(canvas.getContext('2d') as CanvasRenderingContext2D)
+          canvas.width = props.size * pixelRatio.value
+          canvas.height = props.size * pixelRatio.value
+          ctx.scale(pixelRatio.value, pixelRatio.value)
+          resolve(ctx)
+        }
+      })
+      .exec()
+    // #endif
+  })
+}
+
+/**
+ * 设置canvas
+ */
+function presetCanvas(context: any, strokeStyle: string | CanvasGradient, beginAngle: number, endAngle: number, fill?: string) {
+  let width = sWidth.value
+  const position = canvasSize.value / 2
+  if (!fill) {
+    width = width / 2
+  }
+  const radius = position - width / 2
+  context.strokeStyle = strokeStyle
+  context.setStrokeStyle(strokeStyle)
+  context.setLineWidth(width)
+  context.setLineCap(props.strokeLinecap)
+
+  context.beginPath()
+  context.arc(position, position, radius, beginAngle, endAngle, !props.clockwise)
+  context.stroke()
+  if (fill) {
+    context.setLineWidth(width)
+    context.setFillStyle(fill)
+    context.fill()
+  }
+}
+/**
+ * 渲染管道
+ */
+function renderLayerCircle(context: UniApp.CanvasContext) {
+  presetCanvas(context, props.layerColor, 0, PERIMETER, props.fill)
+}
+
+/**
+ * 渲染进度条
+ */
+function renderHoverCircle(context: UniApp.CanvasContext, formatValue: number) {
+  // 结束角度
+  const progress = PERIMETER * (formatValue / 100)
+  const endAngle = props.clockwise ? BEGIN_ANGLE + progress : 3 * Math.PI - (BEGIN_ANGLE + progress)
+
+  // 设置进度条颜色
+  if (isObj(props.color)) {
+    const LinearColor = context.createLinearGradient(canvasSize.value, 0, 0, 0)
+    Object.keys(props.color)
+      .sort((a, b) => parseFloat(a) - parseFloat(b))
+      .map((key) => LinearColor.addColorStop(parseFloat(key) / 100, (props.color as Record<string, any>)[key]))
+    progressColor.value = LinearColor
+  } else {
+    progressColor.value = props.color
+  }
+  presetCanvas(context, progressColor.value, BEGIN_ANGLE, endAngle)
+}
+
+/**
+ * 渲染圆点
+ * 进度值为0时渲染一个圆点
+ */
+function renderDot(context: UniApp.CanvasContext) {
+  const strokeWidth = sWidth.value // 管道宽度=小圆点直径
+  const position = canvasSize.value / 2 // 坐标
+  // 设置进度条颜色
+  if (isObj(props.color)) {
+    const LinearColor = context.createLinearGradient(canvasSize.value, 0, 0, 0)
+    Object.keys(props.color)
+      .sort((a, b) => parseFloat(a) - parseFloat(b))
+      .map((key) => LinearColor.addColorStop(parseFloat(key) / 100, (props.color as Record<string, any>)[key]))
+    progressColor.value = LinearColor
+  } else {
+    progressColor.value = props.color
+  }
+  context.beginPath()
+  context.arc(position, strokeWidth / 4, strokeWidth / 4, 0, PERIMETER)
+  context.setFillStyle(progressColor.value)
+  context.fill()
+}
+
+/**
+ * 画圆
+ */
+function drawCircle(currentValue: number) {
+  getContext().then((context) => {
+    context.clearRect(0, 0, canvasSize.value, canvasSize.value)
+    renderLayerCircle(context)
+
+    const formatValue = format(currentValue)
+    if (formatValue !== 0) {
+      renderHoverCircle(context, formatValue)
+    } else {
+      renderDot(context)
+    }
+    context.draw()
+  })
+}
+
+/**
+ * Circle组件渲染
+ * 当前进度值变化时重新渲染Circle组件
+ */
+function reRender() {
+  // 动画通过定时器渲染
+  if (props.speed <= 0 || props.speed > 1000) {
+    drawCircle(props.modelValue)
+    return
+  }
+  clearTimeInterval()
+  currentValue.value = currentValue.value || 0
+  const run = () => {
+    interval.value = setTimeout(() => {
+      if (currentValue.value !== props.modelValue) {
+        if (Math.abs(currentValue.value - props.modelValue) < STEP) {
+          currentValue.value = props.modelValue
+        } else if (currentValue.value < props.modelValue) {
+          currentValue.value += STEP
+        } else {
+          currentValue.value -= STEP
+        }
+        drawCircle(currentValue.value)
+        run()
+      } else {
+        clearTimeInterval()
+      }
+    }, 1000 / props.speed)
+  }
+  run()
+}
+/**
+ * 清除定时器
+ */
+function clearTimeInterval() {
+  interval.value && clearTimeout(interval.value)
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-col/index.scss

@@ -0,0 +1,5 @@
+@use '../../styles/mixin/mixin.scss' as *;
+
+@include b(col) {
+  box-sizing: border-box;
+}

package/components/wd-col/types.ts

@@ -0,0 +1,16 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeNumberProp } from '../../common/props'
+
+export const colProps = {
+  ...baseProps,
+  /**
+   * 列元素宽度（栅格占据的列数，共 24 列）
+   */
+  span: makeNumberProp(24),
+  /**
+   * 列元素偏移距离（栅格左侧的间隔列数）
+   */
+  offset: makeNumberProp(0)
+}
+
+export type ColProps = ExtractPropTypes<typeof colProps>