papayaui 0.2.0 → 0.2.2

package/components/badge/badge.scss

@@ -2,22 +2,30 @@
 .#{$prefix}-badge {
   position: relative;
   display: inline-block;
+
   &__content {
     position: relative;
     display: flex;
     flex-direction: row;
-    line-height: 11px;
+    line-height: _var(badge-font-size, 11px);
     text-align: center;
-    font-size: 11px;
+    font-size: _var(badge-font-size, 11px);
     color: #fff;
-    padding: 2px 5px;
+    padding: _var(badge-padding, 2px 5px);
     border-radius: 100px;
+    background-color: _var(badge-color, _var(color-danger));
   }
+
   &--dot &__content {
     padding: 0;
     width: 8px;
     height: 8px;
   }
+
+  &--border &__content {
+    border: _var(badge-border-width, 1px) solid _var(badge-border-color, #fff);
+  }
+
   &--fixed &__content {
     position: absolute;
     transform: translate(50%, -50%);

package/components/badge/badge.vue

@@ -1,14 +1,19 @@
 <template>
-  <view :class="[ns.b(), ns.is('dot', dot), ns.is('fixed', !!$slots.default)]">
+  <view
+    :class="[ns.b(), ns.is('dot', dot), ns.is('border', border), ns.is('fixed', !!$slots.default)]"
+  >
     <slot></slot>
     <view
       v-if="visible"
       :class="ns.e('content')"
-      :style="{
-        backgroundColor: color,
-        top: getUnitValue(offset[1].toString()),
-        right: getUnitValue(offset[0].toString()),
-      }"
+      :style="
+        ns.style({
+          backgroundColor: color,
+          top: getUnitValue(offset[1].toString()),
+          right: getUnitValue(offset[0].toString()),
+          borderColor,
+        })
+      "
     >
       <slot v-if="$slots.content" name="content"></slot>
       <text v-else>{{ value }}</text>

package/components/badge/demo.vue

@@ -14,6 +14,9 @@
   <DocDemoBlock title="自定义位置" card>
     <Demo5 />
   </DocDemoBlock>
+  <DocDemoBlock title="边框" card>
+    <Demo7 />
+  </DocDemoBlock>
   <DocDemoBlock title="独立展示" card>
     <Demo6 />
   </DocDemoBlock>
@@ -28,6 +31,7 @@ import Demo3 from '../../demos/badge/demo-3.vue'
 import Demo4 from '../../demos/badge/demo-4.vue'
 import Demo5 from '../../demos/badge/demo-5.vue'
 import Demo6 from '../../demos/badge/demo-6.vue'
+import Demo7 from '../../demos/badge/demo-7.vue'
 </script>
 
 <style lang="scss">
@@ -35,12 +39,11 @@ import Demo6 from '../../demos/badge/demo-6.vue'
   :deep(.pa-badge) {
     margin-right: 42px;
   }
-
-  &-block {
-    width: 40px;
-    height: 40px;
-    background-color: rgb(238, 238, 238);
-    border-radius: 3px;
-  }
+}
+:deep(.demo-badge-block) {
+  width: 40px;
+  height: 40px;
+  background-color: rgb(238, 238, 238);
+  border-radius: 3px;
 }
 </style>

package/components/badge/props.ts

@@ -1,5 +1,4 @@
 import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
-import { defaultNamespace } from '../../core/useNamespace'
 
 export const badgeProps = {
   /**
@@ -9,10 +8,7 @@ export const badgeProps = {
   /**
    * 徽标背景颜色
    */
-  color: {
-    type: [String, Number] as PropType<CSSProperties['color']>,
-    default: `var(--${defaultNamespace}-color-danger)`,
-  },
+  color: [String, Number] as PropType<CSSProperties['color']>,
   /**
    * 是否展示为小点
    */
@@ -39,6 +35,14 @@ export const badgeProps = {
     type: Boolean,
     default: true,
   },
+  /**
+   * 是否显示边框
+   */
+  border: Boolean,
+  /**
+   * 边框颜色
+   */
+  borderColor: [String, Number] as PropType<CSSProperties['color']>,
 }
 
 export type BadgeProps = ExtractPropTypes<typeof badgeProps>

package/components/bottom-popup/bottom-popup.vue

@@ -9,8 +9,9 @@
     :bg-color="bgColor"
     :closeable="closeable"
     :round="round"
-    :close-on-click-overlay="maskCloseAble"
+    :close-on-click-overlay="closeOnClickOverlay ?? maskCloseAble"
     :safe-area-inset-bottom="false"
+    :duration="duration"
     @update:show="emit('update:show', !!$event)"
     @open="emit('open')"
     @opened="emit('opened')"

package/components/bottom-popup/props.ts

@@ -3,7 +3,15 @@ import { pick } from '../../utils'
 import { popupEmits, popupProps } from '../popup/props'
 
 export const bottomPopupProps = {
-  ...pick(popupProps, ['show', 'zIndex', 'overlay', 'bgColor', 'safeAreaInsetBottom']),
+  ...pick(popupProps, [
+    'show',
+    'zIndex',
+    'overlay',
+    'bgColor',
+    'safeAreaInsetBottom',
+    'closeOnClickOverlay',
+    'duration',
+  ]),
   /**
    * 标题
    */
@@ -31,6 +39,7 @@ export const bottomPopupProps = {
   },
   /**
    * 是否可以点击空白处关闭
+   * @deprecated 即将移除，统一使用 `closeOnClickOverlay`属性
    */
   maskCloseAble: popupProps.closeOnClickOverlay,
 }

package/components/cascader/cascader.vue

@@ -3,7 +3,14 @@
     :show="show"
     :title="title"
     :height="height"
+    :round="round"
+    :z-index="zIndex"
+    :overlay="overlay"
+    :bg-color="bgColor"
+    :closeable="closeable"
+    :close-on-click-overlay="closeOnClickOverlay"
     :safe-area-inset-bottom="false"
+    :duration="duration"
     @update:show="emit('update:show', $event as boolean)"
     @open="emit('open')"
     @opened="emit('opened')"

package/components/cascader/props.ts

@@ -1,7 +1,7 @@
-import type { ExtractPropTypes, CSSProperties, PropType } from 'vue'
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
 import type { TreeNode, UseTreeFieldNames } from '../../core/useTree'
 import { defaultFieldNames } from '../../core/useTree'
-import { isArray, isObject, pick } from '../../utils'
+import { isArray, isObject } from '../../utils'
 import { bottomPopupEmits, bottomPopupProps } from '../bottom-popup/props'
 
 export interface CascaderNode<T = any> {
@@ -13,7 +13,7 @@ export type CascaderOption = any
 export type CascaderValue = any
 
 export const cascaderProps = {
-  ...pick(bottomPopupProps, ['show', 'height', 'title', 'safeAreaInsetBottom']),
+  ...bottomPopupProps,
   /**
    * 值
    */

package/components/picker-popup/picker-popup.vue

@@ -4,7 +4,14 @@
     :show="show"
     :title="title"
     :height="height"
+    :round="round"
+    :z-index="zIndex"
+    :overlay="overlay"
+    :bg-color="bgColor"
+    :closeable="closeable"
+    :close-on-click-overlay="closeOnClickOverlay"
     :safe-area-inset-bottom="false"
+    :duration="duration"
     @update:show="emit('update:show', $event as boolean)"
     @open="emit('open')"
     @opened="emit('opened')"

package/components/picker-popup/props.ts

@@ -1,13 +1,13 @@
-import type { ExtractPropTypes, CSSProperties, PropType } from 'vue'
+import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
 import type { UseListProps } from '../../core/useList'
-import { isArray, isNumber, isObject, isString, pick } from '../../utils'
+import { isArray, isNumber, isObject, isString } from '../../utils'
 import { bottomPopupEmits, bottomPopupProps } from '../bottom-popup/props'
 
 export type Option = any
 export type OptionValue = number | string
 
 export const pickerPopupProps = {
-  ...pick(bottomPopupProps, ['show', 'height', 'title', 'safeAreaInsetBottom']),
+  ...bottomPopupProps,
   /**
    * 选择的值
    */

package/demos/badge/demo-7.vue

@@ -0,0 +1,10 @@
+<template>
+  <view class="demo-badge">
+    <pa-badge content="6" border>
+      <view class="demo-badge-block"></view>
+    </pa-badge>
+    <pa-badge content="99" border border-color="#000">
+      <view class="demo-badge-block"></view>
+    </pa-badge>
+  </view>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "papayaui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "适用于uniapp的ui扩展库",
   "packageManager": "pnpm@8.6.0",
   "dependencies": {