papayaui 0.2.3 → 0.2.4

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/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/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/package.json

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