@tplc/wot 1.0.7 → 1.0.8

package/components/wd-cell/index.scss

@@ -1,13 +1,13 @@
-@import '../common/abstracts/variable';
-@import '../common/abstracts/_mixin';
+@import '../common/abstracts/variable.scss';
+@import '../common/abstracts/_mixin.scss';
 
 .wot-theme-dark {
   @include b(cell) {
-    color: $-dark-color;
     background-color: $-dark-background2;
+    color: $-dark-color;
 
     @include e(value) {
-      color: $-dark-color3;
+      color: $-dark-color;
     }
 
     @include e(label) {
@@ -33,11 +33,14 @@
 @include b(cell) {
   position: relative;
   padding-left: $-cell-padding;
-  line-height: $-cell-line-height;
-  color: $-cell-title-color;
-  text-decoration: none;
   background-color: $-color-white;
+  text-decoration: none;
+  color: $-cell-title-color;
+  line-height: $-cell-line-height;
   -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+  width: 100%;
+  overflow: hidden;
 
   @include when(border) {
     .wd-cell__wrapper {
@@ -48,9 +51,10 @@
   @include e(wrapper) {
     position: relative;
     display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
     padding: $-cell-wrapper-padding $-cell-padding $-cell-wrapper-padding 0;
+    justify-content: space-between;
+    align-items: flex-start;
+    overflow: hidden;
 
     @include when(vertical) {
       display: block;
@@ -75,58 +79,53 @@
 
   @include e(left) {
     position: relative;
-    box-sizing: border-box;
-    display: flex;
     flex: 1;
-    margin-right: $-cell-padding;
-    font-size: $-cell-title-fs;
+    display: flex;
     text-align: left;
-
-    @include when(required) {
-      .wd-cell__title-inner {
-        position: relative;
-        width: fit-content;
-        &::after {
-          position: absolute;
-          top: 0;
-          right: -24rpx;
-          font-size: $-cell-required-size;
-          color: $-cell-required-color;
-          content: '*';
-        }
-      }
-    }
+    font-size: $-cell-title-fs;
+    box-sizing: border-box;
+    margin-right: $-cell-padding;
   }
 
   @include e(right) {
     position: relative;
     flex: 1;
+    min-width: 0;
   }
 
   @include e(title) {
-    flex: 1;
-    width: 100%;
     font-size: $-cell-title-fs;
   }
 
+  @include e(required) {
+    font-size: $-cell-required-size;
+    color: $-cell-required-color;
+    margin-left: $-cell-required-margin;
+
+    @include m(left) {
+      margin-left: 0;
+      margin-right: $-cell-required-margin;
+    }
+  }
+
   @include e(label) {
     margin-top: 2px;
     font-size: $-cell-label-fs;
     color: $-cell-label-color;
-    @include lineEllipsis;
   }
 
   @include edeep(icon) {
-    position: relative;
     display: block;
-    height: $-cell-line-height;
+    position: relative;
     margin-right: $-cell-icon-right;
     font-size: $-cell-icon-size;
+    height: $-cell-line-height;
     line-height: $-cell-line-height;
   }
 
-  @include e(body) {
+  @include e(body){
     display: flex;
+    min-width: 0;
   }
 
   @include e(value) {
@@ -134,24 +133,36 @@
     flex: 1;
     font-size: $-cell-value-fs;
     color: $-cell-value-color;
-    text-align: right;
     vertical-align: middle;
+    
+    @include m(left) {
+      text-align: left;
+    }
+    
+    @include m(right) {
+      text-align: right;
+    }
+    
+    @include m(ellipsis) {
+      @include lineEllipsis;
+      min-width: 0;
+    }
   }
 
   @include edeep(arrow-right) {
     display: block;
-    width: $-cell-arrow-size;
-    height: $-cell-line-height;
     margin-left: 8px;
+    width: $-cell-arrow-size;
     font-size: $-cell-arrow-size;
-    line-height: $-cell-line-height;
     color: $-cell-arrow-color;
+    height: $-cell-line-height;
+    line-height: $-cell-line-height;
   }
 
-  @include e(error-message) {
+  @include e(error-message){
+    color: $-form-item-error-message-color;
     font-size: $-form-item-error-message-font-size;
     line-height: $-form-item-error-message-line-height;
-    color: $-form-item-error-message-color;
     text-align: left;
     vertical-align: middle;
   }
@@ -178,6 +189,10 @@
       font-size: $-cell-label-fs-large;
     }
 
+    .wd-cell__value {
+      font-size: $-cell-value-fs-large;
+    }
+
     :deep(.wd-cell__icon) {
       font-size: $-cell-icon-size-large;
     }
@@ -188,4 +203,4 @@
       align-items: center;
     }
   }
-}
+}

package/components/wd-cell/types.ts

@@ -1,11 +1,5 @@
 import type { ExtractPropTypes } from 'vue'
-import {
-  baseProps,
-  makeArrayProp,
-  makeBooleanProp,
-  makeStringProp,
-  makeNumericProp,
-} from '../common/props'
+import { baseProps, makeArrayProp, makeBooleanProp, makeStringProp, makeNumericProp, numericProp } from '../common/props'
 
 import { type FormItemRule } from '../wd-form/types'
 
@@ -23,6 +17,10 @@ export const cellProps = {
    * 图标类名
    */
   icon: String,
+  /**
+   * 图标大小
+   */
+  iconSize: numericProp,
   /**
    * 描述信息
    */
@@ -50,7 +48,7 @@ export const cellProps = {
   /**
    * 是否展示边框线
    */
-  border: Boolean,
+  border: makeBooleanProp(void 0),
   /**
    * 设置左侧标题宽度
    */
@@ -91,6 +89,23 @@ export const cellProps = {
    * title 使用 slot 时的自定义样式
    */
   customTitleClass: makeStringProp(''),
+  /**
+   * value 文字对齐方式，可选值：left、right、center
+   */
+  valueAlign: makeStringProp<'left' | 'right'>('right'),
+  /**
+   * 是否超出隐藏，显示省略号
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * 是否启用title插槽，默认启用，用来解决插槽传递时v-slot和v-if冲突问题。
+   * 问题见：https://github.com/dcloudio/uni-app/issues/4847
+   */
+  useTitleSlot: makeBooleanProp(true),
+  /**
+   * 必填标记位置，可选值：before（标签前）、after（标签后）
+   */
+  markerSide: makeStringProp<'before' | 'after'>('before')
 }
 
 export type CellProps = ExtractPropTypes<typeof cellProps>

package/components/wd-cell/wd-cell.vue

@@ -8,42 +8,55 @@
       customClass,
     ]"
     :style="customStyle"
-    hover-stay-time="70"
+    :hover-stay-time="70"
     @click="onClick"
   >
+    <!-- 你的修改：去掉 hover-class -->
     <!-- :hover-class="isLink || clickable ? 'is-hover' : 'none'" -->
     <view :class="['wd-cell__wrapper', vertical ? 'is-vertical' : '']">
       <view
-        :class="['wd-cell__left', isRequired ? 'is-required' : '']"
+        v-if="showLeft"
+        class="wd-cell__left"
         :style="titleWidth ? 'min-width:' + titleWidth + ';max-width:' + titleWidth + ';' : ''"
       >
+        <text
+          v-if="isRequired && markerSide === 'before'"
+          class="wd-cell__required wd-cell__required--left"
+        >
+          *
+        </text>
         <!--左侧icon部位-->
-        <wd-icon
-          v-if="icon"
-          :name="icon"
-          :custom-class="`wd-cell__icon  ${customIconClass}`"
-        ></wd-icon>
-        <slot v-else name="icon" />
+        <slot name="icon">
+          <wd-icon
+            v-if="icon"
+            :name="icon"
+            :size="iconSize"
+            :custom-class="`wd-cell__icon  ${customIconClass}`"
+          ></wd-icon>
+        </slot>
 
         <view class="wd-cell__title">
           <!--title BEGIN-->
-          <view v-if="title" :class="customTitleClass">
-            <view class="wd-cell__title-inner">{{ title }}</view>
-          </view>
-          <slot v-else name="title"></slot>
+          <slot v-if="useTitleSlot && $slots.title" name="title"></slot>
+          <text v-else-if="title" :class="customTitleClass">{{ title }}</text>
+
           <!--title END-->
 
           <!--label BEGIN-->
-          <view v-if="label" :class="`wd-cell__label ${customLabelClass}`">{{ label }}</view>
-          <slot v-else name="label" />
+          <slot name="label">
+            <view v-if="label" :class="`wd-cell__label ${customLabelClass}`">{{ label }}</view>
+          </slot>
           <!--label END-->
         </view>
+        <text v-if="isRequired && markerSide === 'after'" class="wd-cell__required">*</text>
       </view>
       <!--right content BEGIN-->
       <view class="wd-cell__right">
         <view class="wd-cell__body">
           <!--文案内容-->
-          <view :class="`wd-cell__value ${customValueClass}`">
+          <view
+            :class="`wd-cell__value ${customValueClass} wd-cell__value--${valueAlign} ${ellipsis ? 'wd-cell__value--ellipsis' : ''}`"
+          >
             <slot>{{ value }}</slot>
           </view>
           <!--箭头-->
@@ -69,7 +82,8 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, useSlots } from 'vue'
 import { useCell } from '../composables/useCell'
 import { useParent } from '../composables/useParent'
 import { FORM_KEY } from '../wd-form/types'
@@ -79,10 +93,13 @@ import { isDef } from '../common/util'
 const props = defineProps(cellProps)
 const emit = defineEmits(['click'])
 
+// 获取插槽
+const slots = useSlots()
+
 const cell = useCell()
 
 const isBorder = computed(() => {
-  return isDef(cell.border.value) ? cell.border.value : props.border
+  return Boolean(isDef(props.border) ? props.border : cell.border.value)
 })
 
 const { parent: form } = useParent(FORM_KEY)
@@ -113,6 +130,19 @@ const isRequired = computed(() => {
   return props.required || props.rules.some((rule) => rule.required) || formRequired
 })
 
+// 是否展示左侧部分
+const showLeft = computed(() => {
+  // 插槽优先级高于props
+  // 有icon插槽或icon属性
+  const hasIcon = slots.icon || props.icon
+  // 有title插槽或title属性
+  const hasTitle = (slots.title && props.useTitleSlot) || props.title
+  // 有label插槽或label属性
+  const hasLabel = slots.label || props.label
+
+  return hasIcon || hasTitle || hasLabel
+})
+
 /**
  * @description 点击cell的handle
  */
@@ -133,5 +163,5 @@ function onClick() {
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-cell-group/index.scss

@@ -1,5 +1,5 @@
-@import '../common/abstracts/variable';
-@import '../common/abstracts/_mixin';
+@import '../common/abstracts/variable.scss';
+@import '../common/abstracts/_mixin.scss';
 
 .wot-theme-dark {
   @include b(cell-group) {
@@ -12,8 +12,8 @@
     }
 
     @include e(title) {
-      color: $-dark-color;
       background: $-dark-background2;
+      color: $-dark-color;
     }
 
     @include e(right) {
@@ -23,6 +23,7 @@
     @include e(body) {
       background: $-dark-background2;
     }
+
   }
 }
 
@@ -39,17 +40,17 @@
     display: flex;
     justify-content: space-between;
     padding: $-cell-group-padding;
+    background: $-color-white;
     font-size: $-cell-group-title-fs;
+    color: $-cell-group-title-color;
     font-weight: $-fw-medium;
     line-height: 1.43;
-    color: $-cell-group-title-color;
-    background: $-color-white;
   }
   @include e(right) {
-    font-size: $-cell-group-value-fs;
     color: $-cell-group-value-color;
+    font-size: $-cell-group-value-fs;
   }
   @include e(body) {
     background: $-color-white;
   }
-}
+}

package/components/wd-cell-group/types.ts

@@ -35,7 +35,7 @@ export const cellGroupProps = {
   /**
    * 是否展示边框线
    */
-  border: makeBooleanProp(false),
+  border: makeBooleanProp(false)
 }
 
 export type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>

package/components/wd-cell-group/wd-cell-group.vue

@@ -3,12 +3,12 @@
     <view v-if="title || value || useSlot" class="wd-cell-group__title">
       <!--左侧标题-->
       <view class="wd-cell-group__left">
-        <text v-if="title">{{ title }}</text>
+        <text v-if="!$slots.title">{{ title }}</text>
         <slot v-else name="title"></slot>
       </view>
       <!--右侧标题-->
       <view class="wd-cell-group__right">
-        <text v-if="value">{{ value }}</text>
+        <text v-if="!$slots.value">{{ value }}</text>
         <slot v-else name="value"></slot>
       </view>
     </view>
@@ -24,8 +24,8 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
@@ -41,5 +41,5 @@ linkChildren({ props })
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-checkbox/index.scss

@@ -1,12 +1,12 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 .wot-theme-dark {
   @include b(checkbox) {
     @include e(shape) {
-      color: $-checkbox-check-color;
       background: transparent;
       border-color: $-checkbox-border-color;
+      color: $-checkbox-check-color;
     }
 
     @include e(label) {
@@ -15,8 +15,8 @@
 
     @include when(disabled) {
       .wd-checkbox__shape {
-        background: $-dark-background4;
         border-color: $-dark-color-gray;
+        background: $-dark-background4;
       }
 
       .wd-checkbox__label {
@@ -38,17 +38,18 @@
       }
 
       @include when(button) {
+
         .wd-checkbox__label {
-          color: $-dark-color-gray;
-          background: #3a3a3c;
           border-color: #c8c9cc;
+          background: #3a3a3c;
+          color: $-dark-color-gray;
         }
 
         @include when(checked) {
           .wd-checkbox__label {
-            color: #c8c9cc;
-            background: #3a3a3c;
             border-color: #c8c9cc;
+            background: #3a3a3c;
+            color: #c8c9cc;
           }
         }
       }
@@ -65,6 +66,7 @@
         }
       }
     }
+
   }
 }
 
@@ -81,16 +83,16 @@
 
   @include e(shape) {
     position: relative;
-    box-sizing: border-box;
     display: inline-block;
     width: $-checkbox-size;
     height: $-checkbox-size;
-    color: $-checkbox-check-color;
-    vertical-align: middle;
-    background: $-checkbox-bg;
     border: 2px solid $-checkbox-border-color;
     border-radius: 50%;
+    color: $-checkbox-check-color;
+    background: $-checkbox-bg;
+    vertical-align: middle;
     transition: background 0.2s;
+    box-sizing: border-box;
 
     @include when(square) {
       border-radius: $-checkbox-square-radius;
@@ -107,15 +109,15 @@
 
   @include edeep(btn-check) {
     display: inline-block;
-    margin-right: 4px;
     font-size: $-checkbox-icon-size;
+    margin-right: 4px;
     vertical-align: middle;
   }
 
   @include e(txt) {
     display: inline-block;
-    line-height: 20px;
     vertical-align: middle;
+    line-height: 20px;
     @include lineEllipsis;
   }
 
@@ -123,14 +125,14 @@
     position: relative;
     display: inline-block;
     margin-left: $-checkbox-label-margin;
+    vertical-align: middle;
     font-size: $-checkbox-label-fs;
     color: $-checkbox-label-color;
-    vertical-align: middle;
   }
 
   @include edeep(check) {
-    font-size: $-checkbox-icon-size;
     color: $-checkbox-check-color;
+    font-size: $-checkbox-icon-size;
     opacity: 0;
     transition: opacity 0.2s;
   }
@@ -143,20 +145,20 @@
     }
 
     :deep(.wd-checkbox__check) {
+      opacity: 1;
       position: absolute;
-      top: 50%;
       left: 50%;
-      opacity: 1;
+      top: 50%;
       transform: translate(-50%, -50%);
     }
   }
 
   @include when(button) {
     display: inline-block;
-    margin-right: $-checkbox-margin;
     margin-bottom: 0;
-    font-size: $-checkbox-button-font-size;
+    margin-right: $-checkbox-margin;
     vertical-align: top;
+    font-size: $-checkbox-button-font-size;
 
     @include when(last-child) {
       margin-right: 0;
@@ -166,27 +168,25 @@
       width: 0;
       height: 0;
       overflow: hidden;
-      border: none;
       opacity: 0;
+      border: none;
     }
 
     .wd-checkbox__label {
-      box-sizing: border-box;
       display: inline-flex;
       flex-direction: row;
-      align-items: center;
       justify-content: center;
+      align-items: center;
       min-width: $-checkbox-button-min-width;
       height: $-checkbox-button-height;
-      padding: 5px 15px;
-      margin-left: 0;
       font-size: $-checkbox-button-font-size;
-      background-color: $-checkbox-button-bg;
+      margin-left: 0;
+      padding: 5px 15px;
       border: 1px solid $-checkbox-button-border;
+      background-color: $-checkbox-button-bg;
       border-radius: $-checkbox-button-radius;
-      transition:
-        color 0.2s,
-        border 0.2s;
+      transition: color 0.2s, border 0.2s;
+      box-sizing: border-box;
     }
 
     @include when(checked) {
@@ -201,8 +201,8 @@
 
   @include when(inline) {
     display: inline-block;
-    margin-right: $-checkbox-margin;
     margin-bottom: 0;
+    margin-right: $-checkbox-margin;
 
     @include when(last-child) {
       margin-right: 0;
@@ -211,8 +211,8 @@
 
   @include when(disabled) {
     .wd-checkbox__shape {
-      background: $-checkbox-disabled-check-bg;
       border-color: $-checkbox-border-color;
+      background: $-checkbox-disabled-check-bg;
     }
 
     .wd-checkbox__label {
@@ -231,9 +231,9 @@
 
     @include when(button) {
       .wd-checkbox__label {
-        color: $-checkbox-disabled-label-color;
         background: $-checkbox-disabled-color;
         border-color: $-checkbox-button-border;
+        color: $-checkbox-disabled-label-color;
       }
 
       @include when(checked) {
@@ -255,19 +255,19 @@
   }
 
   @include when(button-box) {
-    box-sizing: border-box;
     display: inline-flex;
     width: 33.3333%;
     padding: 12px 12px 0 0;
+    box-sizing: border-box;
 
     .wd-checkbox__label {
       width: 100%;
     }
 
     &:last-child::after {
+      content: "";
       display: table;
       clear: both;
-      content: '';
     }
   }
 
@@ -282,4 +282,4 @@
       font-size: $-checkbox-large-label-fs;
     }
   }
-}
+}