papayaui 0.2.2 → 0.2.4

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/cell/cell.scss

@@ -24,6 +24,13 @@
     margin-right: _var(cell-icon-left-margin-left, 4px);
   }
 
+  &__label {
+    margin-top: 4px;
+    color: _var(cell-label-color, _var(color-black-3));
+    font-size: _var(cell-label-font-size, 12px);
+    line-height: _var(cell-label-line-height, 18px);
+  }
+
   &__value {
     position: relative;
     overflow: hidden;

package/components/cell/cell.vue

@@ -17,7 +17,10 @@
       :style="{ flex: titleWidth ? `0 ${getUnitValue(titleWidth)}` : '1' }"
     >
       <slot v-if="$slots.title" name="title" />
-      <text v-else>{{ title }}</text>
+      <template v-else>
+        <text>{{ title }}</text>
+        <view v-if="label" :class="ns.e('label')">{{ label }}</view>
+      </template>
     </view>
     <view :class="[ns.e('value'), valueClass]">
       <slot v-if="$slots.default" />

package/components/cell/props.ts

@@ -14,6 +14,10 @@ export const cellProps = {
     type: [String, Number, Boolean],
     default: '',
   },
+  /**
+   * 标题下方的描述信息
+   */
+  label: String,
   /**
    * 标题宽度
    */

package/components/checkbox-btns/checkbox-btns.scss

@@ -3,14 +3,16 @@
   &-button {
     font-size: _var(checkbox-btns-font-size, 14px);
     color: _var(checkbox-btns-color, _var(color-black));
+    background-color: _var(checkbox-btns-background, _var(color-gray));
+    border-color: _var(checkbox-btns-border-color, _var(color-gray));
     padding: _var(checkbox-btns-padding, 7px 4px);
     border-width: _var(checkbox-btns-border-width, 2rpx);
     border-style: solid;
     text-align: center;
     &.active {
-      color: _var(color-primary);
-      background-color: rgba(0, 156, 93, 0.1) !important;
-      border-color: _var(color-primary) !important;
+      color: _var(checkbox-btns-active-color, _var(color-primary));
+      background-color: _var(checkbox-btns-active-background, rgba(0, 156, 93, 0.1)) !important;
+      border-color: _var(checkbox-btns-active-border-color, _var(color-primary)) !important;
     }
   }
 }

package/components/checkbox-btns/checkbox-btns.vue

@@ -13,11 +13,13 @@
           active: typeof modelValue !== 'undefined' ? isSelected(item[valueKey]) : false,
         },
       ]"
-      :style="{
-        backgroundColor: bgColor,
-        borderColor: bgColor,
-        borderRadius: getUnitValue(typeof round === 'boolean' ? (round ? '100' : '0') : round),
-      }"
+      :style="
+        ns.style({
+          backgroundColor: bgColor,
+          borderColor: bgColor,
+          borderRadius: getUnitValue(typeof round === 'boolean' ? (round ? '100' : '0') : round),
+        })
+      "
       @tap="onSelect(item, index)"
     >
       <slot v-if="$slots.default" :item="item" :index="index" />

package/components/checkbox-btns/props.ts

@@ -56,10 +56,7 @@ export const checkboxButtonsProps = {
   /**
    * 背景色
    */
-  bgColor: {
-    type: String,
-    default: '#F2F3F5',
-  },
+  bgColor: String,
   /**
    * 圆角大小, 值为true时半圆角
    */

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/field/props.ts

@@ -112,7 +112,7 @@ export const fieldProps = {
 export const fieldEmits = {
   'update:modelValue': (value: string) => isString(value),
   input: (value: string) => isString(value),
-  blur: (value: FocusEvent) => isObject(value),
+  blur: (value: unknown) => isObject(value),
   confirm: (value: EventDetail<{ value: string }>) => isObject(value),
   clear: () => true,
   'click-input': (value: Event) => isObject(value),

package/components/form-item/form-item.vue

@@ -4,9 +4,17 @@
     :title="label"
     :error-message="errorMessage"
     v-bind="$props"
+    :label="desc"
     @click="emit('click')"
   />
-  <Cell v-else :title="label" :error-message="errorMessage" v-bind="$props" @click="emit('click')">
+  <Cell
+    v-else
+    :title="label"
+    :error-message="errorMessage"
+    v-bind="$props"
+    :label="desc"
+    @click="emit('click')"
+  >
     <slot />
   </Cell>
 </template>

package/components/form-item/props.ts

@@ -4,7 +4,7 @@ import { pick } from '../../utils'
 import { cellProps } from '../cell'
 
 export const formItemProps = {
-  ...pick(cellProps, ['suffix']),
+  ...pick(cellProps, ['titleWidth', 'suffix']),
   /**
    * 校验对应的字段名
    */
@@ -13,6 +13,10 @@ export const formItemProps = {
    * 标签名
    */
   label: String,
+  /**
+   * 描述信息
+   */
+  desc: String,
   /**
    * 校验规则
    */

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/components/menu/menu.scss

@@ -1,15 +1,15 @@
 @import '../../styles/vars.scss';
 
 .#{$prefix}-menu {
-  $barHeight: 48px;
+  $barHeight: _var(menu-height, 48px);
 
   position: relative;
   &__bar {
     position: relative;
     display: flex;
     height: $barHeight;
-    background-color: #fff;
-    box-shadow: 0 2px 12px rgb(100 101 102 / 12%);
+    background-color: _var(menu-background, #fff);
+    box-shadow: _var(menu-shadow, 0 2px 12px rgb(100 101 102 / 12%));
   }
 
   &__item {
@@ -25,10 +25,10 @@
     position: relative;
     box-sizing: border-box;
     max-width: 100%;
-    padding: 0 8px;
-    color: _var(color-black);
-    font-size: 15px;
-    line-height: 22px;
+    padding: _var(menu-title-padding, 0 8px);
+    color: _var(menu-title-color, _var(color-black));
+    font-size: _var(menu-title-font-size, 15px);
+    line-height: _var(menu-title-line-height, 22px);
 
     &::after {
       position: absolute;
@@ -60,4 +60,4 @@
       border-color: transparent transparent currentColor currentColor;
     }
   }
-}
+}

package/components/menu-item/menu-item.vue

@@ -14,6 +14,7 @@
         :key="item.value"
         :class="ns.is('active', isSelected(item.value))"
         :title="item.text"
+        :value="item.valueText"
         clickable
         @click="onChange(item)"
       >

package/components/menu-item/props.ts

@@ -43,6 +43,8 @@ export interface MenuItemOption {
   text: string
   /** 标识符 */
   value: MenuItemOptionValue
+  /** 右侧文字 */
+  valueText?: string
 }
 
 export type MenuItemOptionValue = number | string

package/components/search/props.ts

@@ -51,6 +51,7 @@ export const searchEmits = {
   'update:modelValue': (value: string) => isString(value),
   change: (value: string) => isString(value),
   confirm: (value: EventDetail<{ value: string }>) => isObject(value),
+  blur: (value: unknown) => isObject(value),
   clear: () => true,
   'click-input': () => true,
 }

package/components/search/search.scss

@@ -1,18 +1,23 @@
 @import '../../styles/vars.scss';
 .#{$prefix}-search {
-  @include _setVar(field-input-color, _var(color-black));
-  @include _setVar(cell-bg-color, transparent);
-  @include _setVar(cell-title-color, _var(color-black-3));
-  @include _setVar(cell-padding-x, 8px);
-  @include _setVar(cell-padding-y, 8px);
   padding: _var(search-padding, 10px 12px);
   background-color: _var(search-bg-color, #fff);
-  &-input {
+
+  &__content {
     flex: 1;
     background-color: _var(search-input-bg-color, _var(color-gray));
-    border-radius: 3px;
+    border-radius: _var(search-input-radius, 3px);
   }
-  &--round &-input {
+
+  &__input {
+    @include _setVar(field-input-color, _var(search-input-color, _var(color-black)));
+    @include _setVar(cell-bg-color, transparent);
+    @include _setVar(cell-title-color, _var(search-icon-color, _var(color-black-3)));
+    @include _setVar(cell-padding-x, _var(search-input-padding-x, 8px));
+    @include _setVar(cell-padding-y, _var(search-input-padding-y, 5px));
+  }
+
+  &--round &__content {
     border-radius: 100px;
   }
 }

package/components/search/search.vue

@@ -6,12 +6,13 @@
   >
     <slot name="before" />
     <view
-      :class="ns.b('input')"
+      :class="ns.e('content')"
       class="flex items-center"
       :style="ns.style({ backgroundColor: inputBackground })"
     >
       <slot name="prefix" />
       <Field
+        :class="ns.e('input')"
         class="flex-1"
         :model-value="modelValue"
         icon="search"
@@ -23,6 +24,7 @@
         :clearable="clearable"
         @update:model-value="onUpdate"
         @confirm="emit('confirm', $event)"
+        @blur="emit('blur', $event)"
         @clear="emit('clear')"
         @click-input="emit('click-input')"
       />

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.4",
   "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) {