papayaui 0.2.3 → 0.2.5

package/components/cascader/cascader.vue

@@ -18,7 +18,7 @@
     @closed="emit('closed')"
   >
     <view :class="ns.b('content')">
-      <Search v-if="showSearch" v-model="searchText" :class="ns.b('search')" />
+      <Search v-if="showSearch" v-model="searchText" v-bind="searchProps" :class="ns.b('search')" />
       <view v-if="show" :class="ns.b('tab')">
         <Tabs v-model="tabActive" :tabs="tabList" label-key="name" scrollable shrink />
       </view>

package/components/cascader/props.ts

@@ -3,6 +3,7 @@ import type { TreeNode, UseTreeFieldNames } from '../../core/useTree'
 import { defaultFieldNames } from '../../core/useTree'
 import { isArray, isObject } from '../../utils'
 import { bottomPopupEmits, bottomPopupProps } from '../bottom-popup/props'
+import type { SearchProps } from '../search'
 
 export interface CascaderNode<T = any> {
   props: T
@@ -50,6 +51,13 @@ export const cascaderProps = {
    * 是否显示搜索
    */
   showSearch: Boolean,
+  /**
+   * 搜索框的props
+   */
+  searchProps: {
+    type: Object as PropType<Partial<SearchProps>>,
+    default: () => ({}),
+  },
   /**
    * 动态获取下一级节点数据
    */

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,13 +17,16 @@
       :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]">
+    <view :class="[ns.e('value'), valueClass]" :style="{ textAlign: valueAlign }">
       <slot v-if="$slots.default" />
       <text v-else :selectable="selectable" :user-select="selectable">{{ value }}</text>
 
-      <view v-if="errorMessage" :class="ns.e('error-message')" :style="{ textAlign: valueAlign }">
+      <view v-if="errorMessage" :class="ns.e('error-message')">
         {{ errorMessage }}
       </view>
     </view>

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/picker-popup/picker-popup.vue

@@ -20,9 +20,11 @@
     @confirm="onOk"
   >
     <view :class="ns.e('content')">
+      <slot name="before" />
       <Search
         v-if="showSearch"
         v-model="searchText"
+        v-bind="searchProps"
         :class="ns.e('search')"
         @change="debounceSearchChange"
       />
@@ -56,7 +58,7 @@
         <ButtonComponent
           v-if="showView.create"
           :class="ns.e('create-button')"
-          :type="props.multiple ? 'default' : 'primary'"
+          :type="showView.confirm ? 'default' : 'primary'"
           ellipsis
           block
           @click="onCreate"
@@ -138,7 +140,7 @@ const filterOptions = computed(() => {
 
 const showView = computed(() => {
   const create = props.allowCreate && !!searchText.value
-  const confirm = props.multiple
+  const confirm = props.multiple || props.showConfirm
   return {
     footer: create || confirm,
     create,
@@ -225,7 +227,7 @@ const onCreate = async () => {
 }
 
 const onSelect = async (value: OptionValue) => {
-  if (_onSelect(value) && !multiple.value) {
+  if (_onSelect(value) && !showView.value.confirm) {
     onOk()
   }
 }

package/components/picker-popup/props.ts

@@ -2,6 +2,7 @@ import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
 import type { UseListProps } from '../../core/useList'
 import { isArray, isNumber, isObject, isString } from '../../utils'
 import { bottomPopupEmits, bottomPopupProps } from '../bottom-popup/props'
+import type { SearchProps } from '../search'
 
 export type Option = any
 export type OptionValue = number | string
@@ -37,6 +38,13 @@ export const pickerPopupProps = {
    * 是否显示搜索
    */
   showSearch: Boolean,
+  /**
+   * 搜索框的props
+   */
+  searchProps: {
+    type: Object as PropType<Partial<SearchProps>>,
+    default: () => ({}),
+  },
   /**
    * 是否多选
    */
@@ -84,6 +92,10 @@ export const pickerPopupProps = {
    * 确定后是否重置数据
    */
   resetAfterConfirm: Boolean,
+  /**
+   * 是否显示确认按钮，多选时强制开启
+   */
+  showConfirm: Boolean,
   /**
    * 是否允许用户创建新条目，需配合 showSearch 使用
    */

package/components/popup/popup.scss

@@ -3,7 +3,7 @@
   &__content {
     position: relative;
     max-width: _var(popup-max-width, 100%);
-    background-color: #fff;
+    background-color: _var(popup-background, #fff);
     border-radius: _var(popup-radius, 0);
   }
 

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

@@ -33,7 +33,7 @@
   }
 
   &--auto-height {
-    line-height: _var(textarea-line-height, _var(textarea-font-size));
+    line-height: _var(textarea-line-height, _var(textarea-font-size, 14px));
   }
 
   &--disabled {

package/demos/cell/demo-1.vue

@@ -1,3 +1,4 @@
 <template>
   <pa-cell title="单元格" value="内容" />
+  <pa-cell title="单元格" label="描述信息" value="内容" />
 </template>

package/demos/cell/demo-2.vue

@@ -1,6 +1,6 @@
 <template>
   <pa-cell-group inset>
     <pa-cell title="单元格" value="内容" />
-    <pa-cell title="单元格" value="内容" />
+    <pa-cell title="单元格" label="描述信息" value="内容" />
   </pa-cell-group>
 </template>

package/demos/cell/demo-7.vue

@@ -4,4 +4,5 @@
     value="内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容"
     center
   />
+  <pa-cell title="单元格" label="描述信息" value="内容" center />
 </template>

package/package.json

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