papayaui 0.2.2 → 0.2.3

package/README.md

@@ -4,6 +4,7 @@
 
 - 💪 Vue 3 Composition API
 - 🔥 Written in TypeScript
+- 🧀 [Document](https://jiangwei58.github.io/papayaui)
 
 ## 准备工作
 
@@ -83,8 +84,6 @@ pnpm install async-validator dayjs
     // ...
     "types": ["papayaui/global"]
   },
-  // 防止组件props类型识别错误
-  "include": ["node_modules/papayaui/components/*/*.vue"]
 }
 ```
 

package/components/circle/circle.scss

@@ -0,0 +1,19 @@
+@import '../../styles/vars.scss';
+
+.#{$prefix}-circle {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+
+  &__text {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    color: _var(circle-text-color, _var(color-black));
+    font-weight: _var(circle-font-weight, 500);
+    font-size: _var(circle-font-size, 14px);
+    line-height: _var(circle-text-line-height, 20px);
+    transform: translateY(-50%);
+  }
+}

package/components/circle/circle.vue

@@ -0,0 +1,163 @@
+<template>
+  <view :class="ns.b()">
+    <canvas
+      :id="id"
+      :canvas-id="id"
+      type="2d"
+      :style="{
+        width: getUnitValue(size, 'px'),
+        height: getUnitValue(size, 'px'),
+      }"
+    />
+    <view v-if="!text" :class="ns.e('text')">
+      <slot></slot>
+    </view>
+    <cover-view v-else :class="ns.e('text')">{{ text }}</cover-view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { getCurrentInstance, onMounted, watch } from 'vue'
+import { useNamespace } from '../../core'
+import { getUnitValue } from '../../utils'
+import { circleProps } from './props'
+
+const ns = useNamespace('circle')
+
+const props = defineProps(circleProps)
+
+const instance = getCurrentInstance()
+const id = ns.e('canvas') + Date.now()
+
+const BEGIN_ANGLE = -Math.PI / 2
+const PERIMETER = 2 * Math.PI
+const STEP = 1
+
+let context: CanvasRenderingContext2D | null = null
+let currentValue = 0
+
+onMounted(() => {
+  // #ifdef H5
+  initH5()
+  // #endif
+  // #ifndef H5
+  initMP()
+  // #endif
+})
+
+watch(
+  () => props.modelValue,
+  () => {
+    if (context) {
+      renderCircle(context)
+    }
+  },
+)
+
+const initMP = () => {
+  const ratio = uni.getSystemInfoSync().pixelRatio
+  const query = uni.createSelectorQuery()
+  query
+    .in(instance)
+    .select('#' + id)
+    .node(() => {})
+    .exec((res) => {
+      const canvas = res[0].node as HTMLCanvasElement
+      const canvasSize = props.size * ratio
+      canvas.width = canvasSize
+      canvas.height = canvasSize
+      context = canvas.getContext('2d')
+      if (!context) return
+
+      context.scale(ratio, ratio)
+      renderCircle(context)
+    })
+}
+
+const initH5 = () => {
+  const ratio = window.devicePixelRatio
+  const canvasSize = props.size * ratio
+  const canvas = document.querySelector(`#${id} canvas`) as HTMLCanvasElement
+  canvas.width = canvasSize
+  canvas.height = canvasSize
+  context = canvas.getContext('2d')
+  if (!context) return
+
+  context.scale(ratio, ratio)
+  renderCircle(context)
+}
+
+const renderCircle = (ctx: CanvasRenderingContext2D) => {
+  if (props.speed <= 0 || props.speed > 1000) {
+    drawCircle(ctx, props.modelValue)
+    return
+  }
+
+  let interval: number | null
+  currentValue = currentValue ?? 0
+  const run = () => {
+    interval = setTimeout(() => {
+      if (currentValue === props.modelValue) {
+        stop()
+        return
+      }
+      if (Math.abs(currentValue - props.modelValue) < STEP) {
+        currentValue = props.modelValue
+      } else if (currentValue < props.modelValue) {
+        currentValue += STEP
+      } else {
+        currentValue -= STEP
+      }
+      drawCircle(ctx, currentValue)
+      run()
+    }, 1000 / props.speed) as unknown as number | null
+  }
+
+  const stop = () => {
+    if (interval) {
+      clearTimeout(interval)
+      interval = null
+    }
+  }
+
+  stop()
+  run()
+}
+
+const drawLayerCircle = (ctx: CanvasRenderingContext2D) => {
+  drawCanvas(ctx, BEGIN_ANGLE, PERIMETER, props.layerColor)
+}
+
+const drawCircle = (ctx: CanvasRenderingContext2D, value: number) => {
+  const progress = PERIMETER * (value / 100)
+  const endAngle = props.clockwise ? BEGIN_ANGLE + progress : 3 * Math.PI - (BEGIN_ANGLE + progress)
+  ctx.clearRect(0, 0, props.size, props.size)
+  drawLayerCircle(ctx)
+  if (value !== 0) {
+    drawCanvas(ctx, BEGIN_ANGLE, endAngle, props.color, props.clockwise)
+  }
+}
+
+const drawCanvas = (
+  ctx: CanvasRenderingContext2D,
+  sRadian: number,
+  eRadian: number,
+  color: string,
+  clockwise = true,
+) => {
+  const position = props.size / 2
+  const lineWidth = Number(props.strokeWidth)
+  const radius = position - lineWidth / 2
+
+  ctx.beginPath()
+  ctx.lineCap = 'round'
+  ctx.strokeStyle = color
+  ctx.lineWidth = lineWidth
+  ctx.arc(position, position, radius, sRadian, eRadian, !clockwise)
+  ctx.stroke()
+}
+</script>
+
+<style lang="scss" scoped>
+@import './circle.scss';
+</style>

package/components/circle/demo.vue

@@ -0,0 +1,21 @@
+<template>
+  <DocDemoBlock title="基础用法" card>
+    <Demo1 />
+  </DocDemoBlock>
+  <DocDemoBlock title="样式定制" card>
+    <Demo2 />
+  </DocDemoBlock>
+</template>
+
+<script setup lang="ts">
+import DocDemoBlock from '../../doc/doc-demo-block.vue'
+import Demo1 from '../../demos/circle/demo-1.vue'
+import Demo2 from '../../demos/circle/demo-2.vue'
+</script>
+
+<style lang="scss" scoped></style>
+<style lang="scss">
+page {
+  background-color: var(--pa-color-gray);
+}
+</style>

package/components/circle/index.ts

@@ -0,0 +1,4 @@
+import type Circle from './circle.vue'
+
+export type CircleInstance = InstanceType<typeof Circle>
+export * from './props'

package/components/circle/props.ts

@@ -0,0 +1,59 @@
+import type { ExtractPropTypes } from 'vue'
+
+export const circleProps = {
+  /**
+   * 目标进度
+   */
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * 圆环直径，单位px
+   */
+  size: {
+    type: Number,
+    default: 100,
+  },
+  /**
+   * 进度条颜色
+   */
+  color: {
+    type: String,
+    default: '#009c5d',
+  },
+  /**
+   * 轨道颜色
+   */
+  layerColor: {
+    type: String,
+    default: '#fff',
+  },
+  /**
+   * 文字
+   */
+  text: String,
+  /**
+   * 进度条宽度，单位px
+   */
+  strokeWidth: {
+    type: [Number, String],
+    default: 4,
+  },
+  /**
+   * 是否顺时针
+   */
+  clockwise: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 动画速度（单位为 value/s）
+   */
+  speed: {
+    type: Number,
+    default: 50,
+  },
+}
+
+export type CircleProps = ExtractPropTypes<typeof circleProps>

package/components/index.ts

@@ -8,6 +8,7 @@ export * from './cell-group'
 export * from './checkbox'
 export * from './checkbox-btns'
 export * from './checkbox-group'
+export * from './circle'
 export * from './collapse'
 export * from './collapse-item'
 export * from './container'

package/demos/circle/demo-1.vue

@@ -0,0 +1,3 @@
+<template>
+  <pa-circle :model-value="80" />
+</template>

package/demos/circle/demo-2.vue

@@ -0,0 +1,35 @@
+<template>
+  <view>
+    <pa-circle :model-value="progress" stroke-width="8" text="设置宽度" />
+    <pa-circle :model-value="progress" color="#ff2b2b" text="设置颜色" />
+    <pa-circle :model-value="progress" :clockwise="false" text="逆时针" />
+    <pa-circle :model-value="progress" :size="150" text="设置大小" />
+  </view>
+  <view class="mt-15">
+    <pa-button type="primary" @click="add">增加</pa-button>
+    <pa-button type="danger" class="ml-15" @click="subtract">减少</pa-button>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const STEP = 10
+const progress = ref(80)
+
+const add = () => {
+  if (progress.value >= 100) return
+  progress.value += STEP
+}
+
+const subtract = () => {
+  if (progress.value <= 0) return
+  progress.value -= STEP
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.pa-circle) {
+  margin-right: 15px;
+}
+</style>

package/global.d.ts

@@ -10,6 +10,7 @@ declare module '@vue/runtime-core' {
     PaCheckbox: typeof import('papayaui/components/checkbox/checkbox.vue')['default']
     PaCheckboxBtns: typeof import('papayaui/components/checkbox-btns/checkbox-btns.vue')['default']
     PaCheckboxGroup: typeof import('papayaui/components/checkbox-group/checkbox-group.vue')['default']
+    PaCircle: typeof import('papayaui/components/circle/circle.vue')['default']
     PaCollapse: typeof import('papayaui/components/collapse/collapse.vue')['default']
     PaCollapseItem: typeof import('papayaui/components/collapse-item/collapse-item.vue')['default']
     PaContainer: typeof import('papayaui/components/container/container.vue')['default']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "papayaui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "适用于uniapp的ui扩展库",
   "packageManager": "pnpm@8.6.0",
   "dependencies": {
@@ -18,7 +18,7 @@
   "bugs": {
     "url": "https://github.com/jiangwei58/papayaui/issues"
   },
-  "homepage": "https://github.com/jiangwei58/papayaui",
+  "homepage": "https://jiangwei58.github.io/papayaui",
   "author": "jiangw",
   "license": "MIT",
   "main": "index.ts",

package/styles/layout_border.scss

@@ -60,9 +60,15 @@
 // 定义圆角
 @for $i from 3 through 35 {
   .rounded-#{$i} {
-    border-radius: #{$i}rpx;
+    border-radius: $i + $pixelUnit;
   }
 }
+.rounded-none {
+  border-radius: 0;
+}
+.rounded-full {
+  border-radius: 9999px;
+}
 
 // 盒子模型
 .box-border {

package/styles/layout_font.scss

@@ -1,14 +1,14 @@
-// 定义字体(rpx单位)
+// 定义字体大小
 @for $i from 20 through 65 {
   .text-#{$i} {
-    font-size: #{$i}rpx;
+    font-size: $i + $pixelUnit;
   }
 }
 
 // 定义字体行高
 @for $i from 10 through 65 {
   .leading-#{$i} {
-    line-height: #{$i}rpx;
+    line-height: $i + $pixelUnit;
   }
 }
 

package/styles/layout_grid.scss

@@ -62,13 +62,13 @@
   // 只要双数和能被5除尽的数
   @if $i % 2 == 0 or $i % 5 == 0 {
     .gap-#{$i} {
-      gap: $i + rpx;
+      gap: $i + $pixelUnit;
     }
     .gap-x-#{$i} {
-      column-gap: $i + rpx;
+      column-gap: $i + $pixelUnit;
     }
     .gap-y-#{$i} {
-      row-gap: $i + rpx;
+      row-gap: $i + $pixelUnit;
     }
   }
 }

package/styles/layout_margin.scss

@@ -3,37 +3,37 @@
   // 只要双数和能被5除尽的数
   @if $i % 2 == 0 or $i % 5 == 0 {
     .m-#{$i} {
-      margin: $i + rpx !important;
+      margin: $i + $pixelUnit !important;
     }
 
     .p-#{$i} {
-      padding: $i + rpx !important;
+      padding: $i + $pixelUnit !important;
     }
 
     .mx-#{$i} {
-      margin-left: $i + rpx;
-      margin-right: $i + rpx;
+      margin-left: $i + $pixelUnit;
+      margin-right: $i + $pixelUnit;
     }
     .my-#{$i} {
-      margin-top: $i + rpx;
-      margin-bottom: $i + rpx;
+      margin-top: $i + $pixelUnit;
+      margin-bottom: $i + $pixelUnit;
     }
     .px-#{$i} {
-      padding-left: $i + rpx;
-      padding-right: $i + rpx;
+      padding-left: $i + $pixelUnit;
+      padding-right: $i + $pixelUnit;
     }
     .py-#{$i} {
-      padding-top: $i + rpx;
-      padding-bottom: $i + rpx;
+      padding-top: $i + $pixelUnit;
+      padding-bottom: $i + $pixelUnit;
     }
 
     @each $short, $long in l left, t top, r right, b bottom {
       .m#{$short}-#{$i} {
-        margin-#{$long}: $i + rpx !important;
+        margin-#{$long}: $i + $pixelUnit !important;
       }
 
       .p#{$short}-#{$i} {
-        padding-#{$long}: $i + rpx !important;
+        padding-#{$long}: $i + $pixelUnit !important;
       }
     }
   }

package/styles/vars.scss

@@ -1,4 +1,5 @@
-$prefix: pa;
+$prefix: pa !default;
+$pixelUnit: rpx !default;
 
 @function _var($varName, $default: null) {
   @if ($default == null) {