@tplc/wot 1.0.6 → 1.0.8

package/components/wd-radio/wd-radio.vue

@@ -1,30 +1,23 @@
 <template>
   <view
-    :class="`wd-radio ${innerCell ? 'is-cell-radio' : ''} ${innerCell && innerShape == 'button' ? 'is-button-radio' : ''} ${
-      innerSize ? 'is-' + innerSize : ''
-    } ${innerInline ? 'is-inline' : ''} ${isChecked ? 'is-checked' : ''} ${innerShape !== 'check' ? 'is-' + innerShape : ''} ${
-      innerDisabled ? 'is-disabled' : ''
-    } ${customClass}`"
+    :class="`wd-radio ${cellValue ? 'is-cell-radio' : ''} ${cellValue && shapeValue == 'button' ? 'is-button-radio' : ''} ${
+      sizeValue ? 'is-' + sizeValue : ''
+    } ${inlineValue ? 'is-inline' : ''} ${isChecked ? 'is-checked' : ''} ${shapeValue !== 'check' ? 'is-' + shapeValue : ''} ${
+      disabledValue ? 'is-disabled' : ''
+    } icon-placement-${iconPlacement} ${customClass}`"
     :style="customStyle"
     @click="handleClick"
   >
     <view
       class="wd-radio__label"
       :style="`${maxWidth ? 'max-width:' + maxWidth : ''};  ${
-        isChecked && innerShape === 'button' && !innerDisabled ? 'color :' + innerCheckedColor : ''
+        isChecked && shapeValue === 'button' && !disabledValue ? 'color :' + checkedColorValue : ''
       }`"
     >
       <slot></slot>
     </view>
-    <view
-      class="wd-radio__shape"
-      :style="isChecked && !disabled ? 'color: ' + innerCheckedColor : ''"
-    >
-      <wd-icon
-        v-if="innerShape === 'check'"
-        :style="isChecked && !disabled ? 'color: ' + innerCheckedColor : ''"
-        name="check"
-      ></wd-icon>
+    <view class="wd-radio__shape" :style="isChecked && !disabledValue ? 'color: ' + checkedColorValue : ''">
+      <wd-icon v-if="shapeValue === 'check'" :style="isChecked && !disabledValue ? 'color: ' + checkedColorValue : ''" name="check"></wd-icon>
     </view>
   </view>
 </template>
@@ -34,15 +27,17 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 <script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
 import { computed, watch } from 'vue'
 import { useParent } from '../composables/useParent'
 import { RADIO_GROUP_KEY } from '../wd-radio-group/types'
-import { radioProps } from './types'
+import { radioProps, type RadioIconPlacement } from './types'
+import { getPropByPath, isDef } from '../common/util'
 
 const props = defineProps(radioProps)
 
@@ -56,59 +51,47 @@ const isChecked = computed(() => {
   }
 })
 
-const innerShape = computed(() => {
-  if (!props.shape && radioGroup && radioGroup.props.shape) {
-    return radioGroup.props.shape
-  } else {
-    return props.shape
-  }
+const shapeValue = computed(() => {
+  return props.shape || getPropByPath(radioGroup, 'props.shape')
 })
 
-const innerCheckedColor = computed(() => {
-  if (!props.checkedColor && radioGroup && radioGroup.props.checkedColor) {
-    return radioGroup.props.checkedColor
-  } else {
-    return props.checkedColor
-  }
+const checkedColorValue = computed(() => {
+  return props.checkedColor || getPropByPath(radioGroup, 'props.checkedColor')
 })
 
-const innerDisabled = computed(() => {
-  if (
-    (props.disabled === null || props.disabled === undefined) &&
-    radioGroup &&
-    radioGroup.props.disabled
-  ) {
-    return radioGroup.props.disabled
-  } else {
+const disabledValue = computed(() => {
+  if (isDef(props.disabled)) {
     return props.disabled
+  } else {
+    return getPropByPath(radioGroup, 'props.disabled')
   }
 })
 
-const innerInline = computed(() => {
-  if (
-    (props.inline === null || props.inline === undefined) &&
-    radioGroup &&
-    radioGroup.props.inline
-  ) {
-    return radioGroup.props.inline
-  } else {
+const inlineValue = computed(() => {
+  if (isDef(props.inline)) {
     return props.inline
+  } else {
+    return getPropByPath(radioGroup, 'props.inline')
   }
 })
 
-const innerSize = computed(() => {
-  if (!props.size && radioGroup && radioGroup.props.size) {
-    return radioGroup.props.size
+const sizeValue = computed(() => {
+  return props.size || getPropByPath(radioGroup, 'props.size')
+})
+
+const cellValue = computed(() => {
+  if (isDef(props.cell)) {
+    return props.cell
   } else {
-    return props.size
+    return getPropByPath(radioGroup, 'props.cell')
   }
 })
 
-const innerCell = computed(() => {
-  if ((props.cell === null || props.cell === undefined) && radioGroup && radioGroup.props.cell) {
-    return radioGroup.props.cell
+const iconPlacement = computed<RadioIconPlacement>(() => {
+  if (isDef(props.iconPlacement)) {
+    return props.iconPlacement
   } else {
-    return props.cell
+    return getPropByPath(radioGroup, 'props.iconPlacement')
   }
 })
 
@@ -116,9 +99,8 @@ watch(
   () => props.shape,
   (newValue) => {
     const type = ['check', 'dot', 'button']
-    if (!newValue || type.indexOf(newValue) === -1)
-      console.error(`shape must be one of ${type.toString()}`)
-  },
+    if (!newValue || type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
+  }
 )
 
 /**
@@ -126,11 +108,11 @@ watch(
  */
 function handleClick() {
   const { value } = props
-  if (!innerDisabled.value && radioGroup && value !== null && value !== undefined) {
+  if (!disabledValue.value && radioGroup && isDef(value)) {
     radioGroup.updateValue(value)
   }
 }
 </script>
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

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

@@ -1,5 +1,5 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 .wot-theme-dark {
   @include b(radio-group) {
@@ -8,16 +8,16 @@
 }
 
 @include b(radio-group) {
-  font-size: 0;
   background-color: $-radio-bg;
+  font-size: 0;
 
   // 上下20px 左右15px 内部间隔12px
   @include when(button) {
-    box-sizing: border-box;
     width: 100%;
     height: 100%;
-    height: auto;
     padding: 8px 3px 20px 15px;
+    box-sizing: border-box;
     overflow: hidden;
+    height: auto;
   }
 }

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

@@ -1,5 +1,5 @@
 import { type InjectionKey } from 'vue'
-import type { RadioShape } from '../wd-radio/types'
+import type { RadioShape, RadioIconPlacement } from '../wd-radio/types'
 import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
 
 export type RadioGroupProvide = {
@@ -11,6 +11,7 @@ export type RadioGroupProvide = {
     cell?: boolean
     size?: string
     inline?: boolean
+    iconPlacement?: RadioIconPlacement
   }
   updateValue: (value: string | number | boolean) => void
 }
@@ -33,4 +34,6 @@ export const radioGroupProps = {
   size: makeStringProp(''),
   /** 同行展示，默认为 false */
   inline: makeBooleanProp(false),
+  /** 图标位置，默认为 left */
+  iconPlacement: makeStringProp<RadioIconPlacement>('auto')
 }

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

@@ -1,8 +1,5 @@
 <template>
-  <view
-    :class="`wd-radio-group  ${customClass} ${cell && shape === 'button' ? 'is-button' : ''}`"
-    :style="customStyle"
-  >
+  <view :class="`wd-radio-group  ${customClass} ${cell && shape === 'button' ? 'is-button' : ''}`" :style="customStyle">
     <slot />
   </view>
 </template>
@@ -12,8 +9,8 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
@@ -36,7 +33,7 @@ watch(
     const type = ['check', 'dot', 'button']
     if (type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
   },
-  { deep: true, immediate: true },
+  { deep: true, immediate: true }
 )
 
 /**
@@ -45,10 +42,10 @@ watch(
 function updateValue(value: string | number | boolean) {
   emit('update:modelValue', value)
   emit('change', {
-    value,
+    value
   })
 }
 </script>
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-rate/index.scss

@@ -22,4 +22,4 @@
     overflow: hidden;
     width: 50%;
   }
-}
+}

package/components/wd-rate/types.ts

@@ -18,7 +18,7 @@ export const rateProps = {
    */
   modelValue: {
     type: [String, Number, null] as PropType<string | number | null>,
-    default: null,
+    default: null
   },
 
   /**
@@ -56,7 +56,7 @@ export const rateProps = {
    */
   activeColor: {
     type: [String, Array] as PropType<string | Array<string>>,
-    default: 'linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)',
+    default: 'linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)'
   },
 
   /**
@@ -85,9 +85,7 @@ export const rateProps = {
    * 类型: string
    * 默认值: 'linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%)'
    */
-  disabledColor: makeStringProp(
-    'linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%)',
-  ),
+  disabledColor: makeStringProp('linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%)'),
 
   /**
    * 是否允许半选
@@ -95,4 +93,11 @@ export const rateProps = {
    * 默认值: false
    */
   allowHalf: makeBooleanProp(false),
+
+  /**
+   * 当 clearable 属性设置为 true，再次点击相同的值时，可以将值重置为 0。
+   * 类型: boolean
+   * 默认值: false
+   */
+  clearable: makeBooleanProp(false)
 }

package/components/wd-rate/wd-rate.vue

@@ -12,9 +12,9 @@
         :name="isActive(rate) ? activeIcon : icon"
         :size="size"
         :custom-style="rate === '100%' ? iconActiveStyle : iconStyle"
-        @click="changeRate(index, false)"
+        @click="handleClick(index, false)"
       />
-      <view v-if="props.allowHalf" class="wd-rate__item-half" @click.stop="changeRate(index, true)">
+      <view v-if="props.allowHalf" class="wd-rate__item-half" @click.stop="handleClick(index, true)">
         <wd-icon
           custom-class="wd-rate__item-star"
           :name="isActive(rate) ? activeIcon : icon"
@@ -32,8 +32,8 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 <script lang="ts" setup>
@@ -67,8 +67,8 @@ watch(
   },
   {
     immediate: true,
-    deep: true,
-  },
+    deep: true
+  }
 )
 
 watch(
@@ -78,8 +78,8 @@ watch(
   },
   {
     immediate: true,
-    deep: true,
-  },
+    deep: true
+  }
 )
 
 // 当前选项是否为激活状态
@@ -95,7 +95,7 @@ function computeRateList() {
   // value和num都准备好才能计算
   if (modelValue === null || !num) return
   if (typeof modelValue !== 'number') {
-    console.error('[Wot Design] error(wd-rate): the value of wd-rate should be a number')
+    console.error('[wot ui] error(wd-rate): the value of wd-rate should be a number')
     return
   }
   const tempRateList: string[] = []
@@ -119,22 +119,39 @@ function computeActiveValue() {
   const { activeColor, modelValue, num } = props
   let tempActiveValue: string = ''
   if (Array.isArray(activeColor) && activeColor.length) {
-    tempActiveValue =
-      Number(modelValue) <= num * 0.6 || !activeColor[1] ? activeColor[0] : activeColor[1]
+    tempActiveValue = Number(modelValue) <= num * 0.6 || !activeColor[1] ? activeColor[0] : activeColor[1]
   } else {
     tempActiveValue = activeColor as string
   }
   activeValue.value = tempActiveValue
 }
+
+/**
+ * @description 处理点击事件
+ * @param index 点击的索引
+ * @param isHalf 是否为半星
+ */
+function handleClick(index: number, isHalf: boolean) {
+  const { readonly, disabled, clearable, allowHalf, modelValue } = props
+  if (readonly || disabled) return
+  let value = isHalf ? index + 0.5 : index + 1
+  // 点击清空逻辑：当点击的值与当前modelValue相等且等于最小值时允许清空
+  if (clearable) {
+    const minValue = allowHalf ? 0.5 : 1
+    if (value === modelValue && value === minValue) {
+      value = 0
+    }
+  }
+  updateValue(value)
+}
+
 /**
- * @description 点击icon触发组件的change事件
+ * @description 设置评分值并触发事件
  */
-function changeRate(index: number, isHalf: boolean) {
-  if (props.readonly || props.disabled) return
-  const value = isHalf ? index + 0.5 : index + 1
+function updateValue(value: number) {
   emit('update:modelValue', value)
   emit('change', {
-    value,
+    value
   })
 }
 
@@ -150,7 +167,8 @@ async function onTouchMove(event: TouchEvent) {
     const isHalf = props.allowHalf && clientX - target.left! < itemWidth / 2
     const value = isHalf ? targetIndex + 0.5 : targetIndex + 1
     if (value >= 0.5) {
-      changeRate(targetIndex, isHalf)
+      const value = isHalf ? targetIndex + 0.5 : targetIndex + 1
+      updateValue(value)
     }
   }
 }

package/components/wd-resize/index.scss

@@ -2,6 +2,7 @@
 @import '../common/abstracts/mixin';
 
 @include b(resize) {
+
   @include e(container) {
     position: absolute;
     min-width: 1px;
@@ -11,9 +12,9 @@
   @include e(wrapper) {
     position: absolute;
     top: 0;
-    right: 0;
     bottom: 0;
     left: 0;
+    right: 0;
     z-index: -9999;
     overflow: hidden;
     visibility: hidden;

package/components/wd-resize/types.ts

@@ -2,5 +2,5 @@ import { baseProps, makeStringProp } from '../common/props'
 
 export const resizeProps = {
   ...baseProps,
-  customContainerClass: makeStringProp(''),
+  customContainerClass: makeStringProp('')
 }

package/components/wd-resize/wd-resize.vue

@@ -13,10 +13,7 @@
         :scroll-left="expandScrollLeft"
         @scroll="onScrollHandler"
       >
-        <view
-          class="wd-resize__wrapper--placeholder"
-          style="height: 100000px; width: 100000px"
-        ></view>
+        <view class="wd-resize__wrapper--placeholder" style="height: 100000px; width: 100000px"></view>
       </scroll-view>
       <!--监听插槽变小-->
       <scroll-view
@@ -39,8 +36,8 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
@@ -63,9 +60,9 @@ const scrollEventCount = ref<number>(0)
 const rootStyle = computed(() => {
   const style: Record<string, string | number> = {
     width: addUnit(width.value),
-    height: addUnit(height.value),
+    height: addUnit(height.value)
   }
-  return `${objToStyle(style)};${props.customStyle}`
+  return `${objToStyle(style)}${props.customStyle}`
 })
 let onScrollHandler = () => {}
 const { proxy } = getCurrentInstance() as any
@@ -74,11 +71,7 @@ const resizeId = ref<string>(`resize${uuid()}`)
 
 onMounted(() => {
   // 初始化数据获取
-  const query = uni
-    .createSelectorQuery()
-    .in(proxy)
-    .select(`#${resizeId.value}`)
-    .boundingClientRect()
+  const query = uni.createSelectorQuery().in(proxy).select(`#${resizeId.value}`).boundingClientRect()
   query.exec(([res]) => {
     // 闭包记录容器高度
     let lastHeight = res.height
@@ -88,11 +81,7 @@ onMounted(() => {
     width.value = lastWidth
     // 监听滚动事件
     onScrollHandler = () => {
-      const query = uni
-        .createSelectorQuery()
-        .in(proxy)
-        .select(`#${resizeId.value}`)
-        .boundingClientRect()
+      const query = uni.createSelectorQuery().in(proxy).select(`#${resizeId.value}`).boundingClientRect()
       query.exec(([res]) => {
         // 前两次滚动事件被触发，说明 created 的修改已渲染，通知用户代码当前容器大小
         if (scrollEventCount.value++ === 0) {
@@ -130,15 +119,15 @@ onMounted(() => {
         }
         // 滚动条拉到底部（如果使用 nextTick 效果更佳）
         scrollToBottom({
-          lastWidth,
-          lastHeight,
+          lastWidth: lastWidth,
+          lastHeight: lastHeight
         })
       })
     }
     // 滚动条拉到底部（如果使用 nextTick 效果更佳）
     scrollToBottom({
-      lastWidth,
-      lastHeight,
+      lastWidth: lastWidth,
+      lastHeight: lastHeight
     })
   })
 })

package/components/wd-root-portal/wd-root-portal.vue

@@ -0,0 +1,50 @@
+<template>
+  <!-- #ifdef H5 -->
+  <!-- H5端使用 teleport -->
+  <teleport to="body">
+    <!-- #endif -->
+    <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+    <!-- #ifndef MP-DINGTALK -->
+    <!-- 小程序使用 root-portal -->
+    <root-portal>
+      <!-- #endif -->
+      <!-- #endif -->
+      <slot />
+      <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+      <!-- #ifndef MP-DINGTALK -->
+    </root-portal>
+    <!-- #endif -->
+    <!-- #endif -->
+    <!-- #ifdef H5 -->
+  </teleport>
+  <!-- #endif -->
+</template>
+<script>
+export default {
+  name: 'wd-root-portal',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup></script>
+
+<!-- #ifdef APP-PLUS -->
+<script module="render" lang="renderjs">
+export default {
+  mounted() {
+    if (this.$ownerInstance.$el) {
+      (document.querySelector('uni-app') || document.body).appendChild(this.$ownerInstance.$el)
+    }
+  },
+  beforeDestroy() {
+    // 清理，将元素移回原位置
+    if (this.$ownerInstance.$el) {
+      (document.querySelector('uni-app') || document.body).removeChild(this.$ownerInstance.$el)
+    }
+  }
+}
+</script>
+<!-- #endif -->

package/components/wd-row/index.scss

@@ -5,6 +5,6 @@
   &::after {
     display: table;
     clear: both;
-    content: '';
+    content: "";
   }
 }

package/components/wd-row/types.ts

@@ -12,5 +12,5 @@ export const rowProps = {
   /**
    * 列元素之间的间距（单位为px）
    */
-  gutter: makeNumberProp(0),
+  gutter: makeNumberProp(0)
 }

package/components/wd-row/wd-row.vue

@@ -1,5 +1,5 @@
 <template>
-  <view :class="`wd-row ${customClass}`" :style="style">
+  <view :class="`wd-row ${customClass}`" :style="rowStyle">
     <!-- 每一行 -->
     <slot />
   </view>
@@ -10,54 +10,33 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { computed, type CSSProperties } from 'vue'
 import { useChildren } from '../composables/useChildren'
 import { ROW_KEY, rowProps } from './types'
+import { addUnit, objToStyle } from '../common/util'
 
 const props = defineProps(rowProps)
 const { linkChildren } = useChildren(ROW_KEY)
 
 linkChildren({ props })
 
-const style = ref<string>('')
-
-watch(
-  () => props.gutter,
-  () => {
-    setGutter()
-  },
-  {
-    deep: true,
-    immediate: true,
-  },
-)
-
-function setGutter() {
+const rowStyle = computed(() => {
+  const style: CSSProperties = {}
   const { gutter } = props
   if (gutter < 0) {
-    console.error(
-      '[wot design] warning(wd-row): attribute gutter must be greater than or equal to 0',
-    )
+    console.error('[wot ui] warning(wd-row): attribute gutter must be greater than or equal to 0')
+  } else if (gutter) {
+    style.marginLeft = addUnit(gutter / 2)
+    style.marginRight = addUnit(gutter / 2)
   }
-  const margin = `${gutter / 2}px`
-  const gutterStyle = gutter ? `margin-left: -${margin}; margin-right: -${margin};` : ''
-  style.value = `${gutterStyle}${props.customStyle}`
-}
+  return `${objToStyle(style)}${props.customStyle}`
+})
 </script>
 <style lang="scss" scoped>
-@import '../common/abstracts/variable';
-@import '../common/abstracts/mixin';
-
-@include b(row) {
-  &::after {
-    display: table;
-    clear: both;
-    content: '';
-  }
-}
+@import './index.scss';
 </style>