@tplc/wot 1.0.6 → 1.0.8

package/components/wd-textarea/wd-textarea.vue

@@ -1,31 +1,26 @@
 <template>
   <view :class="rootClass" :style="customStyle">
-    <view v-if="label || useLabelSlot" :class="labelClass" :style="labelStyle">
-      <view v-if="prefixIcon || usePrefixSlot" class="wd-textarea__prefix">
-        <wd-icon
-          v-if="prefixIcon && !usePrefixSlot"
-          custom-class="wd-textarea__icon"
-          :name="prefixIcon"
-          @click="onClickPrefixIcon"
-        />
+    <view v-if="label || $slots.label" class="wd-textarea__label" :style="labelStyle">
+      <text v-if="isRequired && markerSide === 'before'" class="wd-textarea__required wd-textarea__required--left">*</text>
+      <view v-if="prefixIcon || $slots.prefix" class="wd-textarea__prefix">
+        <wd-icon v-if="prefixIcon && !$slots.prefix" custom-class="wd-textarea__icon" :name="prefixIcon" @click="onClickPrefixIcon" />
         <slot v-else name="prefix"></slot>
       </view>
       <view class="wd-textarea__label-inner">
-        <text v-if="label">{{ label }}</text>
-        <slot v-else name="label"></slot>
+        <text v-if="label && !$slots.label">{{ label }}</text>
+        <slot v-else-if="$slots.label" name="label"></slot>
       </view>
+      <text v-if="isRequired && markerSide === 'after'" class="wd-textarea__required">*</text>
     </view>
 
     <!-- 文本域 -->
-    <view
-      :class="`wd-textarea__value ${showClear ? 'is-suffix' : ''} ${customTextareaContainerClass} ${showWordCount ? 'is-show-limit' : ''}`"
-    >
+    <view :class="`wd-textarea__value ${showClear ? 'is-suffix' : ''} ${customTextareaContainerClass} ${showWordCount ? 'is-show-limit' : ''}`">
       <textarea
         :class="`wd-textarea__inner ${customTextareaClass}`"
         v-model="inputValue"
         :show-count="false"
         :placeholder="placeholderValue"
-        :disabled="disabled"
+        :disabled="disabled || readonly"
         :maxlength="maxlength"
         :focus="focused"
         :auto-focus="autoFocus"
@@ -43,6 +38,8 @@
         :confirm-type="confirmType"
         :confirm-hold="confirmHold"
         :disable-default-padding="disableDefaultPadding"
+        :ignoreCompositionEvent="ignoreCompositionEvent"
+        :inputmode="inputmode"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
@@ -52,14 +49,9 @@
       />
       <view v-if="errorMessage" class="wd-textarea__error-message">{{ errorMessage }}</view>
 
-      <view v-if="readonly" class="wd-textarea__readonly-mask" />
+      <view v-if="props.readonly" class="wd-textarea__readonly-mask" />
       <view class="wd-textarea__suffix">
-        <wd-icon
-          v-if="showClear"
-          custom-class="wd-textarea__clear"
-          name="error-fill"
-          @click="handleClear"
-        />
+        <wd-icon v-if="showClear" custom-class="wd-textarea__clear" name="error-fill" @click="handleClear" />
         <view v-if="showWordCount" class="wd-textarea__count">
           <text :class="countClass">
             {{ currentLength }}
@@ -77,27 +69,32 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
-import { computed, onBeforeMount, ref, watch } from 'vue'
-import { objToStyle, requestAnimationFrame, isDef, pause } from '../common/util'
+import { computed, onBeforeMount, ref, watch, useSlots, type Slots } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { objToStyle, isDef, pause } from '../common/util'
 import { useCell } from '../composables/useCell'
 import { FORM_KEY, type FormItemRule } from '../wd-form/types'
 import { useParent } from '../composables/useParent'
 import { useTranslate } from '../composables/useTranslate'
 import { textareaProps } from './types'
 
+interface TextareaSlots extends Slots {
+  prefix?: () => any
+  label?: () => any
+}
+
 const { translate } = useTranslate('textarea')
 
 const props = defineProps(textareaProps)
 const emit = defineEmits([
   'update:modelValue',
   'clear',
-  'change',
   'blur',
   'focus',
   'input',
@@ -105,8 +102,9 @@ const emit = defineEmits([
   'confirm',
   'linechange',
   'clickprefixicon',
-  'click',
+  'click'
 ])
+const slots = useSlots() as TextareaSlots
 
 const placeholderValue = computed(() => {
   return isDef(props.placeholder) ? props.placeholder : translate('placeholder')
@@ -115,7 +113,7 @@ const placeholderValue = computed(() => {
 const clearing = ref<boolean>(false)
 const focused = ref<boolean>(false) // 控制聚焦
 const focusing = ref<boolean>(false) // 当前是否激活状态
-const inputValue = ref<string | number>('') // 输入框的值
+const inputValue = ref<string>('') // 输入框的值
 const cell = useCell()
 
 watch(
@@ -123,7 +121,7 @@ watch(
   (newValue) => {
     focused.value = newValue
   },
-  { immediate: true, deep: true },
+  { immediate: true, deep: true }
 )
 
 watch(
@@ -131,7 +129,7 @@ watch(
   (newValue) => {
     inputValue.value = isDef(newValue) ? String(newValue) : ''
   },
-  { immediate: true, deep: true },
+  { immediate: true, deep: true }
 )
 
 const { parent: form } = useParent(FORM_KEY)
@@ -141,13 +139,7 @@ const { parent: form } = useParent(FORM_KEY)
  */
 const showClear = computed(() => {
   const { disabled, readonly, clearable, clearTrigger } = props
-  if (
-    clearable &&
-    !readonly &&
-    !disabled &&
-    inputValue.value &&
-    (clearTrigger === 'always' || (props.clearTrigger === 'focus' && focusing.value))
-  ) {
+  if (clearable && !readonly && !disabled && inputValue.value && (clearTrigger === 'always' || (props.clearTrigger === 'focus' && focusing.value))) {
     return true
   } else {
     return false
@@ -177,11 +169,7 @@ const isRequired = computed(() => {
   if (form && form.props.rules) {
     const rules = form.props.rules
     for (const key in rules) {
-      if (
-        Object.prototype.hasOwnProperty.call(rules, key) &&
-        key === props.prop &&
-        Array.isArray(rules[key])
-      ) {
+      if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
         formRequired = rules[key].some((rule: FormItemRule) => rule.required)
       }
     }
@@ -191,19 +179,23 @@ const isRequired = computed(() => {
 
 // 当前文本域文字长度
 const currentLength = computed(() => {
-  return String(props.modelValue || '').length
+  /**
+   * 使用Array.from处理多码元字符以获取正确的长度
+   * @link https://github.com/Moonofweisheng/wot-design-uni/issues/933
+   */
+  return Array.from(String(formatValue(props.modelValue))).length
 })
 
 const rootClass = computed(() => {
-  return `wd-textarea   ${props.label || props.useLabelSlot ? 'is-cell' : ''} ${props.center ? 'is-center' : ''} ${
-    cell.border.value ? 'is-border' : ''
-  } ${props.size ? 'is-' + props.size : ''} ${props.error ? 'is-error' : ''} ${props.disabled ? 'is-disabled' : ''} ${
-    props.autoHeight ? 'is-auto-height' : ''
-  } ${currentLength.value > 0 ? 'is-not-empty' : ''}  ${props.noBorder ? 'is-no-border' : ''} ${props.customClass}`
+  return `wd-textarea   ${props.label || slots.label ? 'is-cell' : ''} ${props.center ? 'is-center' : ''} ${cell.border.value ? 'is-border' : ''} ${
+    props.size ? 'is-' + props.size : ''
+  } ${props.error ? 'is-error' : ''} ${props.disabled ? 'is-disabled' : ''} ${props.autoHeight ? 'is-auto-height' : ''} ${
+    currentLength.value > 0 ? 'is-not-empty' : ''
+  }  ${props.noBorder ? 'is-no-border' : ''} ${props.customClass}`
 })
 
 const labelClass = computed(() => {
-  return `wd-textarea__label ${props.customLabelClass} ${isRequired.value ? 'is-required' : ''}`
+  return `wd-textarea__label ${props.customLabelClass}`
 })
 
 const inputPlaceholderClass = computed(() => {
@@ -218,7 +210,7 @@ const labelStyle = computed(() => {
   return props.labelWidth
     ? objToStyle({
         'min-width': props.labelWidth,
-        'max-width': props.labelWidth,
+        'max-width': props.labelWidth
       })
     : ''
 })
@@ -234,31 +226,28 @@ function initState() {
 }
 
 function formatValue(value: string | number) {
+  if (value === null || value === undefined) return ''
   const { maxlength, showWordLimit } = props
   if (showWordLimit && maxlength !== -1 && String(value).length > maxlength) {
     return value.toString().substring(0, maxlength)
   }
-  return value
+  return `${value}`
 }
 
-function handleClear() {
-  clearing.value = true
+async function handleClear() {
   focusing.value = false
   inputValue.value = ''
   if (props.focusWhenClear) {
+    clearing.value = true
     focused.value = false
   }
-  requestAnimationFrame(() => {
-    if (props.focusWhenClear) {
-      focused.value = true
-      focusing.value = true
-    }
-    emit('change', {
-      value: '',
-    })
-    emit('update:modelValue', inputValue.value)
-    emit('clear')
-  })
+  await pause()
+  if (props.focusWhenClear) {
+    focused.value = true
+    focusing.value = true
+  }
+  emit('update:modelValue', inputValue.value)
+  emit('clear')
 }
 async function handleBlur({ detail }: any) {
   // 等待150毫秒，clear执行完毕
@@ -272,7 +261,7 @@ async function handleBlur({ detail }: any) {
   focusing.value = false
   emit('blur', {
     value: inputValue.value,
-    cursor: detail.cursor ? detail.cursor : null,
+    cursor: detail.cursor ? detail.cursor : null
   })
 }
 function handleFocus({ detail }: any) {
@@ -299,5 +288,9 @@ function onClickPrefixIcon() {
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
+</style>
+
+<style lang="scss">
+@import './placeholder.scss';
 </style>

package/components/wd-toast/index.scss

@@ -1,63 +1,76 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 @include b(toast) {
-  box-sizing: border-box;
   display: inline-block;
   max-width: $-toast-max-width;
   padding: $-toast-padding;
-  font-size: $-toast-fs;
-  color: #fff;
   background-color: $-toast-bg;
   border-radius: $-toast-radius;
-  box-shadow: $-toast-box-shadow;
+  color: $-toast-color;
   transition: all 0.2s;
+  font-size: $-toast-fs;
+  box-sizing: border-box;
+  box-shadow: $-toast-box-shadow;
+
+  @include when(vertical) {
+    flex-direction: column;
+  }
 
   @include e(msg) {
-    font-family: 'San Francisco', Rotobo, arial, 'PingFang SC', 'Noto SansCJK', 'Microsoft Yahei',
-      sans-serif;
     font-size: $-toast-fs;
-    line-height: 20px;
+    word-break: break-all;
+    line-height: $-toast-line-height;
     text-align: left;
+    font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif;
   }
+  
   @include edeep(icon) {
     display: inline-block;
-    margin-right: $-toast-icon-margin-right;
     font-size: $-toast-icon-size;
+    @include when(vertical) {
+      margin-bottom: $-toast-icon-margin-bottom;
+    }
   }
-  @include e(iconWrap) {
+  @include e(iconWrap){
     font-size: 0;
     line-height: 0;
     vertical-align: middle;
   }
-  @include e(iconBox) {
+  @include e(iconBox){
     display: block;
     width: 100%;
     height: 100%;
   }
-  @include e(iconSvg) {
+  @include e(iconSvg){
     width: $-toast-icon-size;
     height: $-toast-icon-size;
-    background-repeat: no-repeat;
     background-size: cover;
+    background-repeat: no-repeat;
   }
   @include e(loading) {
+    margin-bottom: $-toast-loading-margin-bottom;
     display: inline-block;
-    margin-bottom: 16px;
   }
   @include m(top) {
     transform: translate3d(0, -40vh, 0);
   }
-  @include m(middle) {
-    transform: translate3d(0%, -4vh, 0);
+  @include m(middle-top){
+    transform: translate3d(0%,-18.8vh,0);
   }
   @include m(bottom) {
     transform: translate3d(0, 40vh, 0);
   }
   @include m(with-icon) {
+    min-width: $-toast-with-icon-min-width;
     display: inline-flex;
     align-items: center;
-    min-width: $-toast-with-icon-min-width;
+    @include me(msg) {
+      margin-left: $-toast-msg-margin-left;
+      @include when(vertical) {
+        margin-left: 0;
+      }
+    }
   }
   @include m(loading) {
     min-width: auto;

package/components/wd-toast/index.ts

@@ -1,60 +1,39 @@
-/*
- * @Author: weisheng
- * @Date: 2024-03-29 13:29:57
- * @LastEditTime: 2024-07-18 23:16:16
- * @LastEditors: weisheng
- * @Description:
- * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-toast/index.ts
- * 记得注释
- */
-import { provide, ref } from 'vue'
+import { inject, provide, ref } from 'vue'
 import type { Toast, ToastOptions } from './types'
 import { deepMerge } from '../common/util'
 
 /**
  * useToast 用到的key
- *
- * @internal
  */
-export const toastDefaultOptionKey = '__TOAST_OPTION__'
+const toastDefaultOptionKey = '__TOAST_OPTION__'
 
 // 默认模板
 export const defaultOptions: ToastOptions = {
-  msg: '',
   duration: 2000,
-  loadingType: 'outline',
-  loadingColor: '#4D80F0',
-  iconColor: '#4D80F0',
-  position: 'middle',
-  show: false,
-  zIndex: 100,
+  show: false
 }
 
+const None = Symbol('None')
+
 export function useToast(selector: string = ''): Toast {
+  const toastOptionKey = getToastOptionKey(selector)
+  const toastOption = inject(toastOptionKey, ref<ToastOptions | typeof None>(None)) // toast选项
+  if (toastOption.value === None) {
+    toastOption.value = defaultOptions
+    provide(toastOptionKey, toastOption)
+  }
   let timer: ReturnType<typeof setTimeout> | null = null
-  const toastOption = ref<ToastOptions>(defaultOptions) // Toast选项
-  const toastOptionKey = selector ? toastDefaultOptionKey + selector : toastDefaultOptionKey
-  provide(toastOptionKey, toastOption)
 
   const createMethod = (toastOptions: ToastOptions) => {
-    // 优先级：options->toastOptions->defaultOptions
     return (options: ToastOptions | string) => {
-      return show(
-        deepMerge(
-          toastOptions,
-          typeof options === 'string' ? { msg: options } : options,
-        ) as ToastOptions,
-      )
+      return show(deepMerge(toastOptions, typeof options === 'string' ? { msg: options } : options) as ToastOptions)
     }
   }
 
   const show = (option: ToastOptions | string) => {
-    const options = deepMerge(
-      defaultOptions,
-      typeof option === 'string' ? { msg: option } : option,
-    ) as ToastOptions
+    const options = deepMerge(defaultOptions, typeof option === 'string' ? { msg: option } : option) as ToastOptions
     toastOption.value = deepMerge(options, {
-      show: true,
+      show: true
     }) as ToastOptions
     // 开始渲染，并在 duration ms之后执行清除
     timer && clearTimeout(timer)
@@ -69,11 +48,11 @@ export function useToast(selector: string = ''): Toast {
   const loading = createMethod({
     iconName: 'loading',
     duration: 0,
-    cover: true,
+    cover: true
   })
   const success = createMethod({
     iconName: 'success',
-    duration: 1500,
+    duration: 1500
   })
   const error = createMethod({ iconName: 'error' })
   const warning = createMethod({ iconName: 'warning' })
@@ -89,21 +68,25 @@ export function useToast(selector: string = ''): Toast {
     error,
     warning,
     info,
-    close,
+    close
   }
 }
 
+export const getToastOptionKey = (selector: string) => {
+  return selector ? `${toastDefaultOptionKey}${selector}` : toastDefaultOptionKey
+}
+
 export const toastIcon = {
   success() {
-    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>成功</title><desc>Created with Sketch.</desc><defs><filter x="-63.2%" y="-80.0%" width="226.3%" height="260.0%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.122733141   0 0 0 0 0.710852582   0 0 0 0 0.514812768  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><rect id="path-2" x="3.4176226" y="5.81442199" width="3" height="8.5" rx="1.5"></rect><linearGradient x1="50%" y1="0.126649064%" x2="50%" y2="100%" id="linearGradient-4"><stop stop-color="#ACFFBD" stop-opacity="0.208123907" offset="0%"></stop><stop stop-color="#10B87C" offset="100%"></stop></linearGradient></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-388.000000, -538.000000)"><g id="成功" transform="translate(388.000000, 538.000000)"><circle id="Oval" fill="#34D19D" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#34D19D" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(11.500000, 14.000000)"><mask id="mask-3" fill="white"><use xlink:href="#path-2"></use></mask><use id="Rectangle-Copy-24" fill="#C4FFEB" transform="translate(4.917623, 10.064422) rotate(-45.000000) translate(-4.917623, -10.064422) " xlink:href="#path-2"></use><rect id="Rectangle" fill="url(#linearGradient-4)" mask="url(#mask-3)" transform="translate(6.215869, 11.372277) rotate(-45.000000) translate(-6.215869, -11.372277) " x="4.71586891" y="9.52269089" width="3" height="3.69917136"></rect><rect id="Rectangle" fill="#FFFFFF" transform="translate(11.636236, 7.232744) scale(1, -1) rotate(-45.000000) translate(-11.636236, -7.232744) " x="10.1362361" y="-1.02185365" width="3" height="16.5091951" rx="1.5"></rect></g></g></g></g></svg>'
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#34D19D" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#34D19D"/><path d="M19 24l4 4 8-8" stroke="#FFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>'
   },
   warning() {
-    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>警告</title><desc>Created with Sketch.</desc> <defs> <filter x="-240.0%" y="-60.0%" width="580.0%" height="220.0%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.824756567   0 0 0 0 0.450356612   0 0 0 0 0.168550194  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-580.000000, -538.000000)"> <g id="警告" transform="translate(580.000000, 538.000000)"><circle id="Oval" fill="#F0883A" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#F0883A" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 10.800000)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(2.492935, 7.171583) scale(1, -1) rotate(-360.000000) translate(-2.492935, -7.171583) " x="0.992934699" y="0.955464537" width="3" height="12.4322365" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#FFDEC5" transform="translate(2.508751, 17.202636) scale(1, -1) rotate(-360.000000) translate(-2.508751, -17.202636) " x="1.00875134" y="15.200563" width="3" height="4.00414639" rx="1.5"></rect></g></g></g></g></svg>'
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#F0883A" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#F0883A"/><rect x="22.5" y="14" width="3" height="12" fill="#FFF" rx="1.5"/><circle cx="24" cy="30" r="2" fill="#FFF"/></svg>'
   },
   info() {
-    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>常规</title><desc>Created with Sketch.</desc><defs><filter x="-300.0%" y="-57.1%" width="700.0%" height="214.3%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.362700096   0 0 0 0 0.409035039   0 0 0 0 0.520238904  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-772.000000, -538.000000)"><g id="常规" transform="translate(772.000000, 538.000000)"><circle id="Oval" fill="#909CB7" opacity="0.4" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#909CB7" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 9.800000)"><g id="编组-2" transform="translate(2.492935, 10.204709) rotate(-180.000000) translate(-2.492935, -10.204709) translate(0.992935, 0.204709)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(1.500000, 7.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -7.000000) " x="0" y="0" width="3" height="14" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#EEEEEE" transform="translate(1.500000, 18.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -18.000000) " x="0" y="16" width="3" height="4" rx="1.5"></rect></g></g></g></g></g></svg>'
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#909CB7" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#909CB7"/><circle cx="24" cy="18" r="2" fill="#FFF"/><rect x="22.5" y="22" width="3" height="12" fill="#FFF" rx="1.5"/></svg>'
   },
   error() {
-    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>toast</title><desc>Created with Sketch.</desc><defs><linearGradient x1="99.6229896%" y1="50.3770104%" x2="0.377010363%" y2="50.3770104%" id="linearGradient-1"><stop stop-color="#FFDFDF" offset="0%"></stop><stop stop-color="#F9BEBE" offset="100%"></stop></linearGradient><linearGradient x1="0.377010363%" y1="50.3770104%" x2="99.6229896%" y2="50.3770104%" id="linearGradient-2"><stop stop-color="#FFDFDF" offset="0%"></stop><stop stop-color="#F9BEBE" offset="100%"></stop></linearGradient></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-196.000000, -538.000000)"> <g id="toast" transform="translate(196.000000, 538.000000)"><circle id="Oval" fill="#FA4350" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#FA4350" opacity="0.900000036" cx="21" cy="21" r="16"></circle><rect id="矩形" fill="#FFDFDF" transform="translate(21.071068, 21.071068) rotate(-225.000000) translate(-21.071068, -21.071068) " x="12.5710678" y="19.5710678" width="17" height="3" rx="1.5"></rect><rect id="矩形" fill="url(#linearGradient-1)" transform="translate(19.303301, 22.838835) rotate(-225.000000) translate(-19.303301, -22.838835) " x="17.3033009" y="21.3388348" width="4" height="3"></rect><rect id="矩形" fill="url(#linearGradient-2)" transform="translate(22.838835, 19.303301) rotate(-225.000000) translate(-22.838835, -19.303301) " x="20.8388348" y="17.8033009" width="4" height="3"></rect><rect id="矩形" fill="#FFFFFF" transform="translate(21.071068, 21.071068) rotate(-315.000000) translate(-21.071068, -21.071068) " x="12.5710678" y="19.5710678" width="17" height="3" rx="1.5"></rect></g></g></g></svg>'
-  },
+    return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 44 44" width="48" height="48"><circle cx="24" cy="26" r="22" fill="#000" opacity=".1"/><circle cx="24" cy="24" r="20" fill="#fa4350" opacity=".4"/><circle cx="24" cy="24" r="16" fill="#fa4350"/><path d="M18 18l12 12M30 18L18 30" stroke="#FFF" stroke-width="2.5" stroke-linecap="round"/></svg>'
+  }
 }

package/components/wd-toast/types.ts

@@ -1,25 +1,28 @@
 /*
  * @Author: weisheng
  * @Date: 2023-06-19 12:47:57
- * @LastEditTime: 2024-07-18 22:18:07
+ * @LastEditTime: 2025-02-16 15:52:17
  * @LastEditors: weisheng
  * @Description:
  * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-toast/types.ts
  * 记得注释
  */
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeStringProp } from '../common/props'
 import type { LoadingType } from '../wd-loading/types'
 
 export type ToastIconType = 'success' | 'error' | 'warning' | 'loading' | 'info' // 图标类型
 
-export type ToastPositionType = 'top' | 'middle' | 'bottom' // 提示信息框的位置类型
+export type ToastPositionType = 'top' | 'middle-top' | 'middle' | 'bottom' // 提示信息框的位置类型
+
+export type ToastDirection = 'vertical' | 'horizontal' // 提示信息框的排列方向
 
 export type ToastLoadingType = LoadingType // 提示信息加载状态类型
 
 export type ToastOptions = {
   msg?: string
   duration?: number
+  direction?: ToastDirection
   iconName?: ToastIconType
   iconSize?: number
   loadingType?: ToastLoadingType
@@ -70,7 +73,118 @@ export interface Toast {
 
 export const toastProps = {
   ...baseProps,
+  /**
+   * 选择器
+   * @type {string}
+   * @default ''
+   */
   selector: makeStringProp(''),
+  /**
+   * 提示信息
+   * @type {string}
+   * @default ''
+   */
+  msg: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 排列方向
+   * @type {'vertical' | 'horizontal'}
+   * @default 'horizontal'
+   */
+  direction: makeStringProp<ToastDirection>('horizontal'),
+  /**
+   * 图标名称
+   * @type {'success' | 'error' | 'warning' | 'loading' | 'info'}
+   * @default ''
+   */
+  iconName: {
+    type: String as PropType<ToastIconType>,
+    default: ''
+  },
+  /**
+   * 图标大小
+   * @type {number}
+   */
+  iconSize: Number,
+  /**
+   * 加载类型
+   * @type {'outline' | 'ring'}
+   * @default 'outline'
+   */
+  loadingType: makeStringProp<ToastLoadingType>('outline'),
+  /**
+   * 加载颜色
+   * @type {string}
+   * @default '#4D80F0'
+   */
+  loadingColor: {
+    type: String,
+    default: '#4D80F0'
+  },
+  /**
+   * 加载大小
+   * @type {number}
+   */
+  loadingSize: Number,
+  /**
+   * 图标颜色
+   * @type {string}
+   */
+  iconColor: String,
+  /**
+   * 位置
+   * @type {'top' | 'middle-top' | 'middle' | 'bottom'}
+   * @default 'middle-top'
+   */
+  position: makeStringProp<ToastPositionType>('middle-top'),
+  /**
+   * 层级
+   * @type {number}
+   * @default 100
+   */
+  zIndex: {
+    type: Number,
+    default: 100
+  },
+  /**
+   * 是否存在遮罩层
+   * @type {boolean}
+   * @default false
+   */
+  cover: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 图标类名
+   * @type {string}
+   * @default ''
+   */
+  iconClass: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 类名前缀
+   * @type {string}
+   * @default 'wd-icon'
+   */
+  classPrefix: {
+    type: String,
+    default: 'wd-icon'
+  },
+  /**
+   * 完全展示后的回调函数
+   * @type {Function}
+   */
+  opened: Function as PropType<() => void>,
+  /**
+   * 完全关闭时的回调函数
+   * @type {Function}
+   */
+  closed: Function as PropType<() => void>
 }
 
 export type ToastProps = ExtractPropTypes<typeof toastProps>