oxy-uni-ui 1.0.1

package/components/oxy-circle/index.scss

@@ -0,0 +1,18 @@
+@import "../common/abstracts/variable.scss";
+@import "../common/abstracts/_mixin.scss";
+
+@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%);
+    color: $-circle-text-color;
+  }
+}

package/components/oxy-circle/oxy-circle.vue

@@ -0,0 +1,296 @@
+<template>
+  <view :class="`oxy-circle ${customClass}`" :style="customStyle">
+    <!-- #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="oxy-circle__text">
+      <!-- 自定义提示内容 -->
+      <slot></slot>
+    </view>
+
+    <text v-else class="oxy-circle__text">
+      {{ text }}
+    </text>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-circle',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue'
+import { addUnit, isObj, objToStyle, uuid } 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>(`oxy-circle${uuid()}`) // canvasId
+let ctx: UniApp.CanvasContext | null = null
+
+// 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 = uni.getSystemInfoSync().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" scoped>
+@import './index.scss';
+</style>

package/components/oxy-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(100),
+  /**
+   * 进度条颜色，传入对象格式可以定义渐变色
+   */
+  color: {
+    type: [String, Object] as PropType<string | Record<string, string>>,
+    default: '#4d80f0'
+  },
+  /**
+   * 轨道颜色
+   */
+  layerColor: makeStringProp('#EBEEF5'),
+  /**
+   * 填充颜色
+   */
+  fill: String,
+  /**
+   * 动画速度（单位为 rate/s）
+   */
+  speed: makeNumberProp(50),
+  /**
+   * 文字
+   */
+  text: String,
+  /**
+   * 进度条宽度 单位px
+   */
+  strokeWidth: makeNumberProp(10),
+  /**
+   * 进度条端点的形状，可选值为 "butt" | "round" | "square"
+   */
+  strokeLinecap: makeStringProp<StrokeLinecapType>('round'),
+  /**
+   * 是否顺时针增加
+   */
+  clockwise: makeBooleanProp(true)
+}
+
+export type CircleProps = ExtractPropTypes<typeof circleProps>

package/components/oxy-col/index.scss

@@ -0,0 +1,19 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+$i: 1;
+
+@include b(col) {
+  float: left;
+  box-sizing: border-box;
+}
+
+@while $i <= 24 {
+  .oxy-col__#{$i} {
+    width: calc(100% / 24 * $i);
+  }
+  .oxy-col__offset-#{$i} {
+    margin-left: calc(100% / 24 * $i);
+  }
+  $i: $i + 1;
+}

package/components/oxy-col/oxy-col.vue

@@ -0,0 +1,49 @@
+<template>
+  <view :class="['oxy-col', span && 'oxy-col__' + span, offset && 'oxy-col__offset-' + offset, customClass]" :style="rootStyle">
+    <!-- 每一列 -->
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-col',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue'
+import { useParent } from '../composables/useParent'
+import { ROW_KEY } from '../oxy-row/types'
+import { colProps } from './types'
+import { isDef } from '../common/util'
+
+const props = defineProps(colProps)
+const { parent: row } = useParent(ROW_KEY)
+
+const rootStyle = computed(() => {
+  const gutter = isDef(row) ? row.props.gutter || 0 : 0
+  const padding = `${gutter / 2}px`
+  const style = gutter > 0 ? `padding-left: ${padding}; padding-right: ${padding};background-clip: content-box;` : ''
+  return `${style}${props.customStyle}`
+})
+
+watch([() => props.span, () => props.offset], () => {
+  check()
+})
+
+function check() {
+  const { span, offset } = props
+  if (span < 0 || offset < 0) {
+    console.error('[oxy-design] warning(oxy-col): attribute span/offset must be greater than or equal to 0')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-col/types.ts

@@ -0,0 +1,15 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeNumberProp } from '../common/props'
+
+export const colProps = {
+  ...baseProps,
+  /**
+   * 列元素宽度
+   */
+  span: makeNumberProp(24),
+  /**
+   * 列元素偏移距离
+   */
+  offset: makeNumberProp(0)
+}
+export type ColProps = ExtractPropTypes<typeof colProps>

package/components/oxy-col-picker/index.scss

@@ -0,0 +1,168 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-theme-dark {
+  @include b(col-picker) {
+    @include e(list-item) {
+      @include when(disabled) {
+        color: $-dark-color3;
+      }
+    }
+
+    @include e(list-item-tip) {
+      color: $-dark-color-gray;
+    }
+
+    :deep(.oxy-col-picker__arrow) {
+      color: $-dark-color;
+    }
+
+    @include e(list) {
+      color: $-dark-color;
+    }
+
+    @include e(selected) {
+      color: $-dark-color;
+    }
+
+    :deep(.oxy-col-picker__cell--placeholder) {
+      .oxy-cell__value {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+@include b(col-picker) {
+  @include edeep(cell) {
+    @include when(disabled) {
+      .oxy-cell__value {
+        color: $-input-disabled-color;
+        cursor: not-allowed;
+      }
+    }
+    @include when(error) {
+      .oxy-cell__value {
+        color: $-input-error-color;
+      }
+      .oxy-col-picker__arrow {
+        color: $-input-error-color;
+      }
+    }
+    @include when(large) {
+      .oxy-col-picker__arrow {
+        font-size: $-cell-icon-size-large;
+      }
+    }
+
+    @include m(placeholder) {
+      .oxy-cell__value {
+        color: $-input-placeholder-color;
+      }
+    }
+  
+  }
+  
+  @include edeep(arrow) {
+    display: block;
+    font-size: $-cell-icon-size;
+    color: $-cell-arrow-color;
+    line-height: $-cell-line-height;
+  }
+
+  @include e(selected) {
+    height: $-col-picker-selected-height;
+    font-size: $-col-picker-selected-fs;
+    color: $-col-picker-selected-color;
+    overflow: hidden;
+  }
+  
+  @include e(selected-container){
+    position: relative;
+    display: flex;
+    user-select: none;
+  }
+  
+  @include e(selected-item) {
+    flex: 0 0 auto;
+    height: $-col-picker-selected-height;
+    line-height: $-col-picker-selected-height;
+    padding: $-col-picker-selected-padding;
+
+    @include when(selected) {
+      font-weight: $-col-picker-selected-fw;
+    }
+  }
+  
+  @include e(selected-line) {
+    position: absolute;
+    bottom: 5px;
+    width: $-col-picker-line-width;
+    left: 0;
+    height: $-col-picker-line-height;
+    background: $-col-picker-line-color;
+    z-index: 1;
+    border-radius: calc($-col-picker-line-height / 2);
+    box-shadow: $-col-picker-line-box-shadow;
+  }
+  
+  @include e(list-container){
+    position: relative;
+  }
+  
+  @include e(list) {
+    height: $-col-picker-list-height;
+    padding-bottom: $-col-picker-list-padding-bottom;
+    box-sizing: border-box;
+    overflow: auto;
+    color: $-col-picker-list-color;
+    font-size: $-col-picker-list-fs;
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  @include e(list-item) {
+    display: flex;
+    padding: $-col-picker-list-item-padding;
+    align-items: flex-start;
+
+    @include when(selected) {
+      color: $-col-picker-list-color-checked;
+
+      :deep(.oxy-col-picker__checked) {
+        opacity: 1;
+      }
+    }
+    @include when(disabled) {
+      color: $-col-picker-list-color-disabled;
+    }
+  }
+  
+  @include e(list-item-label) {
+    line-height: 1.285;
+  }
+  
+  @include e(list-item-tip) {
+    margin-top: 2px;
+    font-size: $-col-picker-list-fs-tip;
+    color: $-col-picker-list-color-tip;
+  }
+  
+  @include edeep(checked) {
+    display: block;
+    margin-left: 4px;
+    font-size: $-col-picker-list-checked-icon-size;
+    color: $-col-picker-list-color-checked;
+    opacity: 0;
+  }
+  
+  @include e(loading) {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    align-items: center;
+    justify-content: center;
+  }
+}