@tplc/wot 1.0.7 → 1.0.8

package/components/wd-text/types.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes } from 'vue'
-import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+import { baseProps, makeBooleanProp, makeNumericProp, makeStringProp } from '../common/props'
 
 export type TextType = 'default' | 'primary' | 'success' | 'warning' | 'error'
 
@@ -14,10 +14,10 @@ export const textProps = {
   type: makeStringProp<TextType>('default'),
   /**
    * 文字
-   * 类型：string
+   * 类型：string | number
    * 默认值：'空字符串'
    */
-  text: makeStringProp(''),
+  text: makeNumericProp(''),
   /**
    * 字体大小
    * 类型：string
@@ -92,7 +92,7 @@ export const textProps = {
   /**
    * 自定义根节点样式类
    */
-  customClass: makeStringProp(''),
+  customClass: makeStringProp('')
 }
 
 export type TextProps = ExtractPropTypes<typeof textProps>

package/components/wd-text/wd-text.vue

@@ -12,8 +12,8 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
@@ -21,7 +21,7 @@ export default {
 import { computed, ref, watch } from 'vue'
 import { isDef, objToStyle } from '../common/util'
 import { textProps } from './types'
-import { dayjs } from '../common/dayjs'
+import dayjs from '../../dayjs'
 
 // 获取组件的 props 和 emit 函数
 const props = defineProps(textProps)
@@ -39,16 +39,17 @@ watch(
     color: props.color,
     bold: props.bold,
     lines: props.lines,
-    format: props.format,
+    format: props.format
   }),
   ({ type }) => {
     // 验证 type 属性
-    if (type && !['primary', 'error', 'warning', 'success', 'default'].includes(type)) {
-      console.error(`type must be one of ${type.toString()}`)
+    const types = ['primary', 'error', 'warning', 'success', 'default']
+    if (type && !types.includes(type)) {
+      console.error(`type must be one of ${types.toString()}`)
     }
     computeTextClass()
   },
-  { deep: true, immediate: true },
+  { deep: true, immediate: true }
 )
 
 // 计算根元素的类名
@@ -60,7 +61,7 @@ const rootClass = computed(() => {
 const rootStyle = computed(() => {
   const rootStyle: Record<string, any> = {}
   if (props.color) {
-    rootStyle.color = props.color
+    rootStyle['color'] = props.color
   }
   if (props.size) {
     rootStyle['font-size'] = `${props.size}`
@@ -71,7 +72,7 @@ const rootStyle = computed(() => {
   if (props.decoration) {
     rootStyle['text-decoration'] = `${props.decoration}`
   }
-  return `${objToStyle(rootStyle)};${props.customStyle}`
+  return `${objToStyle(rootStyle)}${props.customStyle}`
 })
 
 // 计算文本类名的函数
@@ -124,7 +125,7 @@ const formattedText = computed(() => {
   if (mode === 'price') {
     return formatNumber(text)
   }
-  return formatText(text, format, mode)
+  return formatText(`${text}`, format, mode)
 })
 
 // 处理点击事件
@@ -134,5 +135,5 @@ function handleClick(event: Event) {
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-textarea/index.scss

@@ -1,5 +1,5 @@
-@import '../common/abstracts/variable';
-@import '../common/abstracts/mixin';
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
 
 .wot-theme-dark {
   @include b(textarea) {
@@ -29,6 +29,7 @@
       }
     }
 
+    // 你的自定义样式：placeholder 暗黑模式
     @include e(placeholder) {
       color: $-dark-color3;
     }
@@ -52,17 +53,19 @@
       background-color: $-dark-background2;
 
       @include when(border) {
-        @include halfPixelBorder('top', $-textarea-cell-padding, $-dark-border-color);
+        @include halfPixelBorder("top", $-textarea-cell-padding, $-dark-border-color);
       }
     }
 
     @include when(disabled) {
+
       .wd-textarea__inner {
         color: $-dark-color-gray;
         background: transparent;
       }
     }
 
+
     @include e(label) {
       color: $-dark-color;
     }
@@ -71,54 +74,56 @@
 
 @include b(textarea) {
   position: relative;
-  padding: $-textarea-cell-padding $-textarea-padding;
+  -webkit-tap-highlight-color: transparent;
   text-align: left;
   background: $-textarea-bg;
-  -webkit-tap-highlight-color: transparent;
+  padding: $-textarea-cell-padding $-textarea-padding;
 
   &::after {
     position: absolute;
-    right: 0;
+    display: none;
+    content: "";
     bottom: 0;
     left: 0;
-    display: none;
+    right: 0;
     height: 1px;
-    content: '';
     background: $-textarea-border-color;
-    transition: background-color 0.2s ease-in-out;
     transform: scaleY(0.5);
+    transition: background-color 0.2s ease-in-out;
   }
 
+
+
   @include e(label) {
     position: relative;
-    box-sizing: border-box;
     display: flex;
-    flex-shrink: 0;
     width: $-input-cell-label-width;
+    color: $-cell-title-color;
     margin-right: $-cell-padding;
+    box-sizing: border-box;
     font-size: $-textarea-fs;
-    color: $-cell-title-color;
+    flex-shrink: 0;
+
 
-    @include when(required) {
-      .wd-input__label-inner {
-        position: relative;
-        &::after {
-          position: absolute;
-          top: 2px;
-          right: -24rpx;
-          font-size: $-cell-required-size;
-          line-height: 1.1;
-          color: $-cell-required-color;
-          content: '*';
-        }
-      }
-    }
   }
 
   @include e(label-inner) {
     display: inline-block;
-    font-size: $-textarea-fs;
     line-height: $-cell-line-height;
+    font-size: $-textarea-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(prefix) {
@@ -138,10 +143,10 @@
 
   @include e(value) {
     position: relative;
-    box-sizing: border-box;
     padding: 0;
     font-size: 0;
     background: $-textarea-bg;
+    box-sizing: border-box;
 
     @include when(show-limit) {
       padding-bottom: 36px;
@@ -152,18 +157,19 @@
     }
   }
 
+
   @include e(inner) {
-    box-sizing: border-box;
-    width: 100%;
-    min-height: 24px;
     padding: 0;
+    width: 100%;
     font-size: $-textarea-fs;
     line-height: $-cell-line-height;
     color: $-textarea-color;
-    word-break: break-word;
+    outline: none;
     background: none;
     border: none;
-    outline: none;
+    box-sizing: border-box;
+    word-break: break-word;
+    min-height: 24px;
 
     &::-webkit-input-placeholder {
       color: $-input-placeholder-color;
@@ -172,10 +178,10 @@
 
   @include e(suffix) {
     position: absolute;
-    top: 0;
+    z-index: 1;
     right: 0;
+    top: 0;
     bottom: 0;
-    z-index: 1;
   }
 
   @include edeep(icon) {
@@ -188,21 +194,22 @@
   @include edeep(clear) {
     margin-left: $-textarea-icon-margin;
     font-size: $-textarea-icon-size;
-    line-height: $-cell-line-height;
     color: $-textarea-clear-color;
     vertical-align: middle;
     background: $-textarea-bg;
+    line-height: $-cell-line-height;
   }
 
+
   @include e(count) {
     position: absolute;
-    right: 0;
     bottom: 8px;
-    display: inline-flex;
+    right: 0;
     font-size: $-textarea-count-fs;
-    line-height: 20px;
     color: $-textarea-count-color;
     background: $-textarea-bg;
+    line-height: 20px;
+    display: inline-flex;
   }
 
   @include e(count-current) {
@@ -213,6 +220,7 @@
     }
   }
 
+  // 你的自定义样式：placeholder
   @include e(placeholder) {
     color: $-input-placeholder-color;
 
@@ -231,9 +239,9 @@
   }
 
   @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;
   }
@@ -247,6 +255,7 @@
   }
 
   @include when(disabled) {
+
     .wd-textarea__inner {
       color: $-input-disabled-color;
       background: transparent;
@@ -254,6 +263,7 @@
   }
 
   @include when(error) {
+
     .wd-textarea__inner {
       color: $-input-error-color;
       background: transparent;
@@ -313,7 +323,7 @@
     }
 
     @include when(border) {
-      @include halfPixelBorder('top', $-textarea-cell-padding);
+      @include halfPixelBorder("top", $-textarea-cell-padding);
     }
   }
 

package/components/wd-textarea/types.ts

@@ -1,14 +1,7 @@
-import type { ExtractPropTypes } from 'vue'
-import {
-  baseProps,
-  makeArrayProp,
-  makeBooleanProp,
-  makeNumberProp,
-  makeNumericProp,
-  makeStringProp,
-} from '../common/props'
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
 import type { FormItemRule } from '../wd-form/types'
-import type { InputClearTrigger } from '../wd-input/types'
+import type { InputClearTrigger, InputMode } from '../wd-input/types'
 
 export type ConfirmType = 'send' | 'search' | 'next' | 'go' | 'done'
 
@@ -120,7 +113,7 @@ export const textareaProps = {
    * 默认值：'done'
    * 可选值有'done', 'go', 'next', 'search', 'send'
    */
-  confirmType: makeStringProp<ConfirmType | null>(null),
+  confirmType: String as PropType<ConfirmType>,
 
   /**
    * * 点击键盘右下角按钮时是否保持键盘不收起。
@@ -198,41 +191,23 @@ export const textareaProps = {
    * 类型：string
    */
   prefixIcon: String,
-
-  /**
-   * * 是否使用前置图标插槽。
-   * 类型：boolean
-   * 默认值：false
-   */
-  usePrefixSlot: makeBooleanProp(false),
-
   /**
    * * 是否显示字数限制，需要同时设置maxlength。
    * 类型：boolean
    * 默认值：false
    */
   showWordLimit: makeBooleanProp(false),
-
   /**
-   * * 设置左侧标题。
+   * 设置左侧标题。
    * 类型：string
    */
   label: String,
 
   /**
-   * * 设置左侧标题宽度。
+   * 设置左侧标题宽度。
    * 类型：string
-   * 默认值：'33%'
    */
-  labelWidth: makeStringProp('33%'),
-
-  /**
-   * * 是否使用label插槽。
-   * 类型：boolean
-   * 默认值：false
-   */
-  useLabelSlot: makeBooleanProp(false),
-
+  labelWidth: makeStringProp(''),
   /**
    * * 设置输入框大小。
    * 类型：string
@@ -283,16 +258,31 @@ export const textareaProps = {
    * 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示
    * 类型: "focus" | "always"
    * 默认值: "always"
-   * 最低版本: $LOWEST_VERSION$
    */
   clearTrigger: makeStringProp<InputClearTrigger>('always'),
   /**
    * 是否在点击清除按钮时聚焦输入框
    * 类型: boolean
    * 默认值: true
-   * 最低版本: $LOWEST_VERSION$
    */
   focusWhenClear: makeBooleanProp(true),
+  /**
+   * 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件
+   * 类型: boolean
+   * 默认值: true
+   */
+  ignoreCompositionEvent: makeBooleanProp(true),
+  /**
+   * 它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的web和app-vue平台中可使用本属性。
+   * 类型: InputMode
+   * 可选值: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | "password"
+   * 默认值: "text"
+   */
+  inputmode: makeStringProp<InputMode>('text'),
+  /**
+   * 必填标记位置，可选值：before（标签前）、after（标签后）
+   */
+  markerSide: makeStringProp<'before' | 'after'>('before')
 }
 
 export type TextareaProps = ExtractPropTypes<typeof textareaProps>