@tplc/wot 1.0.6 → 1.0.8

package/components/wd-collapse-item/index.scss

@@ -5,6 +5,7 @@
   @include b(collapse-item) {
     @include halfPixelBorder('top', 0, $-dark-border-color);
 
+
     @include e(title) {
       color: $-dark-color;
     }
@@ -24,24 +25,34 @@
   }
 }
 
+
 @include b(collapse-item) {
   position: relative;
   @include halfPixelBorder('top');
 
+
   @include e(header) {
     position: relative;
     display: flex;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
     padding: $-collapse-header-padding;
     overflow: hidden;
     user-select: none;
+
+    @include when(expanded) {
+      @include halfPixelBorder('bottom');
+    }
+
+    @include when(custom) {
+      display: block;
+    }
   }
 
   @include e(title) {
-    font-size: $-collapse-title-fs;
-    font-weight: $-fw-medium;
     color: $-collapse-title-color;
+    font-weight: $-fw-medium;
+    font-size: $-collapse-title-fs;
   }
 
   @include edeep(arrow) {
@@ -62,10 +73,10 @@
   }
 
   @include e(body) {
-    padding: $-collapse-body-padding;
+    color: $-collapse-body-color;
     font-size: $-collapse-body-fs;
+    padding: $-collapse-body-padding;
     line-height: 1.43;
-    color: $-collapse-body-color;
   }
 
   @include when(disabled) {

package/components/wd-collapse-item/types.ts

@@ -1,10 +1,18 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
 
-export type CollapseItemBeforeExpand = (name: string) => void
+export type CollapseItemBeforeExpand = (name: string) => boolean | Promise<unknown>
 
 export const collapseItemProps = {
   ...baseProps,
+  /**
+   * 自定义折叠栏内容容器样式类名
+   */
+  customBodyClass: makeStringProp(''),
+  /**
+   * 自定义折叠栏内容容器样式
+   */
+  customBodyStyle: makeStringProp(''),
   /**
    * 折叠栏的标题, 可通过 slot 传递自定义内容
    */
@@ -20,7 +28,7 @@ export const collapseItemProps = {
   /**
    * 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise
    */
-  beforeExpend: Function as PropType<CollapseItemBeforeExpand>,
+  beforeExpend: Function as PropType<CollapseItemBeforeExpand>
 }
 
 export type CollapseItemProps = ExtractPropTypes<typeof collapseItemProps>
@@ -31,6 +39,10 @@ export type CollapseItemExpose = {
    * @returns boolean
    */
   getExpanded: () => boolean
+  /**
+   * 更新展开状态
+   */
+  updateExpand: () => Promise<void>
 }
 
 export type CollapseItemInstance = ComponentPublicInstance<CollapseItemProps, CollapseItemExpose>

package/components/wd-collapse-item/wd-collapse-item.vue

@@ -1,26 +1,18 @@
 <template>
-  <view
-    :class="`wd-collapse-item ${disabled ? 'is-disabled' : ''} is-border ${customClass}`"
-    :style="customStyle"
-  >
+  <view :class="`wd-collapse-item ${disabled ? 'is-disabled' : ''} is-border ${customClass}`" :style="customStyle">
     <view
-      :class="`wd-collapse-item__header  ${isFirst ? 'wd-collapse-item__header-first' : ''}`"
+      :class="`wd-collapse-item__header ${expanded ? 'is-expanded' : ''} ${isFirst ? 'wd-collapse-item__header-first' : ''} ${
+        $slots.title ? 'is-custom' : ''
+      }`"
       @click="handleClick"
     >
       <slot name="title" :expanded="expanded" :disabled="disabled" :isFirst="isFirst">
         <text class="wd-collapse-item__title">{{ title }}</text>
-        <wd-icon
-          name="arrow-down"
-          :custom-class="`wd-collapse-item__arrow ${expanded ? 'is-retract' : ''}`"
-        />
+        <wd-icon name="arrow-down" :custom-class="`wd-collapse-item__arrow ${expanded ? 'is-retract' : ''}`" />
       </slot>
     </view>
-    <view
-      class="wd-collapse-item__wrapper"
-      :style="contentStyle"
-      @transitionend="handleTransitionEnd"
-    >
-      <view class="wd-collapse-item__body" :id="collapseId">
+    <view class="wd-collapse-item__wrapper" :style="contentStyle" @transitionend="handleTransitionEnd">
+      <view class="wd-collapse-item__body" :class="customBodyClass" :style="customBodyStyle" :id="collapseId">
         <slot />
       </view>
     </view>
@@ -32,23 +24,15 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
 import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties } from 'vue'
-import {
-  addUnit,
-  getRect,
-  isArray,
-  isDef,
-  isPromise,
-  objToStyle,
-  requestAnimationFrame,
-  uuid,
-} from '../common/util'
+import { addUnit, getRect, isArray, isDef, isPromise, isString, objToStyle, pause, uuid } from '../common/util'
 import { useParent } from '../composables/useParent'
 import { COLLAPSE_KEY } from '../wd-collapse/types'
 import { collapseItemProps, type CollapseItemExpose } from './types'
@@ -87,54 +71,50 @@ const contentStyle = computed(() => {
   return objToStyle(style)
 })
 
-const selected = computed(() => {
-  if (collapse) {
-    return collapse.props.modelValue
-  } else {
-    return []
-  }
+/**
+ * 是否选中
+ */
+const isSelected = computed(() => {
+  const modelValue = collapse ? collapse?.props.modelValue || [] : []
+  const { name } = props
+  return (isString(modelValue) && modelValue === name) || (isArray(modelValue) && modelValue.indexOf(name as string) >= 0)
 })
 
 watch(
-  () => selected.value,
-  () => {
-    if (!inited.value) {
-      return
-    }
-    updateExpend()
-  },
-  {
-    deep: true,
-    immediate: true,
-  },
+  () => isSelected.value,
+  (newVal) => {
+    updateExpand(newVal)
+  }
 )
 
 onMounted(() => {
-  updateExpend()
+  updateExpand(isSelected.value)
 })
 
-function updateExpend() {
-  return getRect(`#${collapseId.value}`, false, proxy).then((rect) => {
+async function updateExpand(useBeforeExpand: boolean = true) {
+  try {
+    if (useBeforeExpand) {
+      await handleBeforeExpand()
+    }
+    initRect()
+  } catch (error) {
+    /* empty */
+  }
+}
+
+function initRect() {
+  getRect(`#${collapseId.value}`, false, proxy).then(async (rect) => {
     const { height: rectHeight } = rect
     height.value = isDef(rectHeight) ? Number(rectHeight) : ''
-    const name = props.name
-    requestAnimationFrame(() => {
-      if (isDef(selected.value)) {
-        if (
-          (typeof selected.value === 'string' && selected.value === name) ||
-          (isArray(selected.value) && selected.value.indexOf(name as string) >= 0)
-        ) {
-          expanded.value = true
-        } else {
-          expanded.value = false
-        }
-      } else {
-        expanded.value = false
-      }
-      if (!inited.value) {
-        inited.value = true
-      }
-    })
+    await pause()
+    if (isSelected.value) {
+      expanded.value = true
+    } else {
+      expanded.value = false
+    }
+    if (!inited.value) {
+      inited.value = true
+    }
   })
 }
 
@@ -145,36 +125,45 @@ function handleTransitionEnd() {
 }
 
 // 点击子项
-function handleClick() {
+async function handleClick() {
   if (props.disabled) return
-  const name = props.name
-  const nexexpanded = !expanded.value // 执行后展开状态
-  if (nexexpanded) {
-    if (props.beforeExpend) {
-      const response: any = props.beforeExpend(name)
+  try {
+    await updateExpand()
+    const { name } = props
+    collapse && collapse.toggle(name, !expanded.value)
+  } catch (error) {
+    /* empty */
+  }
+}
+
+/**
+ * 展开前钩子
+ */
+function handleBeforeExpand() {
+  return new Promise<void>((resolve, reject) => {
+    const { name } = props
+    const nextexpanded = !expanded.value
+    if (nextexpanded && props.beforeExpend) {
+      const response = props.beforeExpend(name)
       if (!response) {
-        return
+        reject()
       }
       if (isPromise(response)) {
-        response.then(() => {
-          collapse && collapse.toggle(name, !expanded.value)
-        })
+        response.then(() => resolve()).catch(reject)
       } else {
-        collapse && collapse.toggle(name, !expanded.value)
+        resolve()
       }
     } else {
-      collapse && collapse.toggle(name, !expanded.value)
+      resolve()
     }
-  } else {
-    collapse && collapse.toggle(name, !expanded.value)
-  }
+  })
 }
 
 function getExpanded() {
   return expanded.value
 }
 
-defineExpose<CollapseItemExpose>({ getExpanded })
+defineExpose<CollapseItemExpose>({ getExpanded, updateExpand })
 </script>
 
 <style lang="scss" scoped>

package/components/wd-config-provider/types.ts

@@ -14,8 +14,8 @@ export const configProviderProps = {
    */
   themeVars: {
     type: Object as PropType<ConfigProviderThemeVars>,
-    default: () => ({}),
-  },
+    default: () => ({})
+  }
 }
 
 export type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>
@@ -125,74 +125,55 @@ export type badgeThemeVars = {
 
 export type buttonThemeVars = {
   buttonDisabledOpacity?: string
-
   buttonSmallHeight?: string
   buttonSmallPadding?: string
   buttonSmallFs?: string
   buttonSmallRadius?: string
   buttonSmallLoading?: string
-
   buttonMediumHeight?: string
   buttonMediumPadding?: string
   buttonMediumFs?: string
   buttonMediumRadius?: string
   buttonMediumLoading?: string
   buttonMediumBoxShadowSize?: string
-
   buttonLargeHeight?: string
   buttonLargePadding?: string
   buttonLargeFs?: string
   buttonLargeRadius?: string
   buttonLargeLoading?: string
   buttonLargeBoxShadowSize?: string
-
   buttonIconFs?: string
   buttonIconSize?: string
   buttonIconColor?: string
   buttonIconDisabledColor?: string
-
   buttonNormalColor?: string
   buttonNormalDisabledColor?: string
-
   buttonPlainBgColor?: string
-
   buttonPrimaryColor?: string
   buttonPrimaryBgColor?: string
-  buttonPrimaryBoxShadowColor?: string
-
   buttonSuccessColor?: string
   buttonSuccessBgColor?: string
-  buttonSuccessBoxShadowColor?: string
-
   buttonInfoColor?: string
   buttonInfoBgColor?: string
   buttonInfoPlainBorderColor?: string
   buttonInfoPlainNormalColor?: string
-
   buttonWarningColor?: string
   buttonWarningBgColor?: string
-  buttonWarningBoxShadowColor?: string
-
   buttonErrorColor?: string
   buttonErrorBgColor?: string
-  buttonErrorBoxShadowColor?: string
-
   buttonTextHoverOpacity?: string
 }
 
 export type cellThemeVars = {
   cellPadding?: string
   cellLineHeight?: string
-
   cellGroupTitleFs?: string
   cellGroupPadding?: string
   cellGroupTitleColor?: string
   cellGroupValueFs?: string
   cellGroupValueColor?: string
-
   cellWrapperPadding?: string
   cellWrapperPaddingLarge?: string
-
   cellWrapperPaddingWithLabel?: string
   cellIconRight?: string
   cellIconSize?: string
@@ -201,17 +182,18 @@ export type cellThemeVars = {
   cellLabelFs?: string
   cellLabelColor?: string
   cellValueFs?: string
+  cellValueFsLarge?: string
   cellValueColor?: string
   cellArrowSize?: string
   cellArrowColor?: string
+  cellClearColor?: string
   cellTapBg?: string
-
   cellTitleFsLarge?: string
   cellLabelFsLarge?: string
   cellIconSizeLarge?: string
-
   cellRequiredColor?: string
   cellRequiredSize?: string
+  cellRequiredMargin?: string
   cellVerticalTop?: string
 }
 
@@ -229,10 +211,12 @@ export type calendarThemeVars = {
   calendarDayHeight?: string
   calendarMonthWidth?: string
   calendarActiveColor?: string
+  calendarSelectedColor?: string
   calendarDisabledColor?: string
   calendarRangeColor?: string
   calendarActiveBorder?: string
   calendarInfoFs?: string
+  calendarItemMarginBottom?: string
 }
 
 export type checkboxThemeVars = {
@@ -246,16 +230,13 @@ export type checkboxThemeVars = {
   checkboxLabelFs?: string
   checkboxLabelColor?: string
   checkboxCheckedColor?: string
-
   checkboxDisabledColor?: string
   checkboxDisabledLabelColor?: string
   checkboxDisabledCheckColor?: string
   checkboxDisabledCheckBg?: string
   checkboxSquareRadius?: string
-
   checkboxLargeSize?: string
   checkboxLargeLabelFs?: string
-
   checkboxButtonHeight?: string
   checkboxButtonMinWidth?: string
   checkboxButtonRadius?: string
@@ -282,9 +263,18 @@ export type collapseThemeVars = {
 
 export type dividerThemeVars = {
   dividerPadding?: string
+  dividerMargin?: string
   dividerColor?: string
   dividerLineColor?: string
+  dividerLineHeight?: string
   dividerFs?: string
+  dividerContentLeftWidth?: string
+  dividerContentLeftMargin?: string
+  dividerContentRightMargin?: string
+  dividerContentRightWidth?: string
+  dividerVerticalHeight?: string
+  dividerVerticalContentMargin?: string
+  dividerVerticalLineWidth?: string
 }
 
 export type dropMenuThemeVars = {
@@ -292,7 +282,6 @@ export type dropMenuThemeVars = {
   dropMenuColor?: string
   dropMenuFs?: string
   dropMenuArrowFs?: string
-
   dropMenuSidePadding?: string
   dropMenuDisabledColor?: string
   dropMenuItemHeight?: string
@@ -335,7 +324,6 @@ export type inputThemeVars = {
   inputCountColor?: string
   inputCountCurrentColor?: string
   inputBg?: string
-
   inputCellBg?: string
   inputCellBorderColor?: string
   inputCellPadding?: string
@@ -447,16 +435,13 @@ export type pickerThemeVars = {
   pickerColumnSelectBg?: string
   pickerLoadingButtonColor?: string
   pickerColumnPadding?: string
-
   pickerColumnDisabledColor?: string
   pickerMask?: string
   pickerLoadingBg?: string
   pickerRegionSeparatorColor?: string
   pickerCellArrowSizeLarge?: string
-
   pickerRegionColor?: string
   pickerRegionBgActiveColor?: string
-
   pickerRegionFs?: string
 }
 
@@ -497,9 +482,8 @@ export type progressThemeVars = {
   progressBg?: string
   progressDangerColor?: string
   progressSuccessColor?: string
+  progressWarningColor?: string
   progressColor?: string
-  progressLinearSuccessColor?: string
-  progressLinearDangerColor?: string
   progressHeight?: string
   progressLabelColor?: string
   progressLabelFs?: string
@@ -516,10 +500,8 @@ export type radioThemeVars = {
   radioCheckedColor?: string
   radioDisabledColor?: string
   radioDisabledLabelColor?: string
-
   radioLargeSize?: string
   radioLargeLabelFs?: string
-
   radioButtonHeight?: string
   radioButtonMinWidth?: string
   radioButtonMaxWidth?: string
@@ -528,7 +510,6 @@ export type radioThemeVars = {
   radioButtonFs?: string
   radioButtonBorder?: string
   radioButtonDisabledBorder?: string
-
   radioDotSize?: string
   radioDotLargeSize?: string
   radioDotCheckedBg?: string
@@ -650,15 +631,19 @@ export type tagThemeVars = {
 }
 
 export type toastThemeVars = {
+  toastColor?: string
   toastPadding?: string
   toastMaxWidth?: string
   toastRadius?: string
   toastBg?: string
   toastFs?: string
+  toastLineHeight?: string
   toastWithIconMinWidth?: string
   toastIconSize?: string
   toastIconMarginRight?: string
+  toastIconMarginBottom?: string
   toastLoadingPadding?: string
+  toastLoadingMarginBottom?: string
   toastBoxShadow?: string
 }
 
@@ -698,6 +683,8 @@ export type gridItemThemeVars = {
   gridItemBg?: string
   gridItemPadding?: string
   gridItemBorderColor?: string
+  gridItemHoverBg?: string
+  gridItemHoverBgDark?: string
 }
 
 export type statustipThemeVars = {
@@ -783,20 +770,19 @@ export type circleThemeVars = {
 export type swiperThemeVars = {
   swiperRadius?: string
   swiperItemPadding?: string
+  swiperItemTextColor?: string
+  swiperItemTextFs?: string
 }
 
 export type swiperNavThemeVars = {
-  // dot & dots-bar
   swiperNavDotColor?: string
   swiperNavDotActiveColor?: string
   swiperNavDotSize?: string
   swiperNavDotsBarActiveWidth?: string
-  // fraction
   swiperNavFractionColor?: string
   swiperNavFractionBgColor?: string
   swiperNavFractionHeight?: string
   swiperNavFractionFontSize?: string
-  // button
   swiperNavBtnColor?: string
   swiperNavBtnBgColor?: string
   swiperNavBtnSize?: string
@@ -886,6 +872,26 @@ export type countDownThemeVars = {
   countDownLineHeight?: string
 }
 
+export type keyboardThemeVars = {
+  keyboardKeyHeight?: string
+  keyboardKeyFontSize?: string
+  keyboardKeyBackground?: string
+  keyboardKeyBorderRadius?: string
+  keyboardDeleteFontSize?: string
+  keyboardKeyActiveColor?: string
+  keyboardButtonTextColor?: string
+  keyboardButtonBackground?: string
+  keyboardButtonActiveOpacity?: string
+  keyboardBackground?: string
+  keyboardTitleHeight?: string
+  keyboardTitleColor?: string
+  keyboardTitleFontSize?: string
+  keyboardClosePadding?: string
+  keyboardCloseColor?: string
+  keyboardCloseFontSize?: string
+  keyboardIconSize?: string
+}
+
 export type numberKeyboardThemeVars = {
   numberKeyboardKeyHeight?: string
   numberKeyboardKeyFontSize?: string
@@ -959,6 +965,26 @@ export type imgCropperThemeVars = {
   imgCropperIconColor?: string
 }
 
+export type floatingPanelThemeVars = {
+  floatingPanelBg?: string
+  floatingPanelRadius?: string
+  floatingPanelZIndex?: string
+  floatingPanelHeaderHeight?: string
+  floatingPanelBarWidth?: string
+  floatingPanelBarHeight?: string
+  floatingPanelBarBg?: string
+  floatingPanelBarRadius?: string
+  floatingPanelContentBg?: string
+}
+
+export type signatureThemeVars = {
+  signatureBg?: string
+  signatureRadius?: string
+  signatureBorder?: string
+  signatureFooterMarginTop?: string
+  signatureButtonMarginLeft?: string
+}
+
 export type ConfigProviderThemeVars = baseThemeVars &
   actionSheetThemeVars &
   badgeThemeVars &
@@ -1013,6 +1039,7 @@ export type ConfigProviderThemeVars = baseThemeVars &
   sidebarItemThemeVars &
   fabThemeVars &
   countDownThemeVars &
+  keyboardThemeVars &
   numberKeyboardThemeVars &
   passwodInputThemeVars &
   formItemThemeVars &
@@ -1020,4 +1047,6 @@ export type ConfigProviderThemeVars = baseThemeVars &
   indexBarThemeVars &
   textThemeVars &
   videoPreviewThemeVars &
-  imgCropperThemeVars
+  imgCropperThemeVars &
+  floatingPanelThemeVars &
+  signatureThemeVars

package/components/wd-config-provider/wd-config-provider.vue

@@ -1,10 +1,10 @@
 <!--
  * @Author: weisheng
  * @Date: 2023-06-13 11:34:35
- * @LastEditTime: 2024-03-15 17:00:16
+ * @LastEditTime: 2025-04-28 22:26:25
  * @LastEditors: weisheng
  * @Description: 
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-config-provider\wd-config-provider.vue
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-config-provider/wd-config-provider.vue
  * 记得注释
 -->
 <template>
@@ -19,8 +19,8 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
@@ -37,7 +37,7 @@ const themeClass = computed(() => {
 
 const themeStyle = computed(() => {
   const styleObj = mapThemeVarsToCSSVars(props.themeVars)
-  return styleObj ? `${objToStyle(styleObj)};${props.customStyle}` : props.customStyle
+  return styleObj ? `${objToStyle(styleObj)}${props.customStyle}` : props.customStyle
 })
 
 const kebabCase = (str: string): string => {
@@ -46,20 +46,20 @@ const kebabCase = (str: string): string => {
 }
 const colorRgb = (str: string) => {
   if (!str) return
-  let sColor = str.toLowerCase()
-  // 十六进制颜色值的正则表达式
-  const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+  var sColor = str.toLowerCase()
+  //十六进制颜色值的正则表达式
+  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
   // 如果是16进制颜色
   if (sColor && reg.test(sColor)) {
     if (sColor.length === 4) {
-      let sColorNew = '#'
+      var sColorNew = '#'
       for (let i = 1; i < 4; i += 1) {
         sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
       }
       sColor = sColorNew
     }
-    // 处理六位的颜色值
-    const sColorChange: number[] = []
+    //处理六位的颜色值
+    var sColorChange: number[] = []
     for (let i = 1; i < 7; i += 2) {
       sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
     }