@wot-ui/ui 1.0.0 → 2.0.0-alpha.3

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

@@ -0,0 +1,212 @@
+<template>
+  <view :class="rootClass" :style="customStyle">
+    <view class="wd-textarea__body">
+      <textarea
+        :class="`wd-textarea__inner ${customTextareaClass}`"
+        v-model="inputValue"
+        :show-count="false"
+        :placeholder="placeholderValue"
+        :disabled="disabled || readonly"
+        :enable-native="enableNative"
+        :maxlength="maxlength"
+        :focus="focused"
+        :auto-focus="autoFocus"
+        :placeholder-style="placeholderStyle"
+        :placeholder-class="inputPlaceholderClass"
+        :auto-height="autoHeight"
+        :cursor-spacing="cursorSpacing"
+        :fixed="fixed"
+        :cursor="cursor"
+        :show-confirm-bar="showConfirmBar"
+        :selection-start="selectionStart"
+        :selection-end="selectionEnd"
+        :adjust-position="adjustPosition"
+        :hold-keyboard="holdKeyboard"
+        :confirm-type="confirmType"
+        :confirm-hold="confirmHold"
+        :disable-default-padding="disableDefaultPadding"
+        :ignoreCompositionEvent="ignoreCompositionEvent"
+        :inputmode="inputmode"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @confirm="handleConfirm"
+        @linechange="handleLineChange"
+        @keyboardheightchange="handleKeyboardheightchange"
+      />
+      <view v-if="props.readonly" class="wd-textarea__readonly-mask" />
+      <wd-icon v-if="showClear" custom-class="wd-textarea__clear" name="close-circle" @click="handleClear" />
+    </view>
+    <view v-if="showWordCount" class="wd-textarea__count">{{ currentLength }}/{{ maxlength }}</view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-textarea',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { isDef, pause } from '../../common/util'
+import { useParent } from '../../composables/useParent'
+import { useTranslate } from '../../composables/useTranslate'
+import { textareaProps } from './types'
+import { FORM_ITEM_VALIDATE_KEY } from '../wd-form-item/types'
+
+const { translate } = useTranslate('textarea')
+
+const props = defineProps(textareaProps)
+const emit = defineEmits(['update:modelValue', 'clear', 'blur', 'focus', 'input', 'keyboardheightchange', 'confirm', 'linechange', 'click'])
+const { parent: formItemValidate } = useParent(FORM_ITEM_VALIDATE_KEY)
+
+const placeholderValue = computed(() => {
+  return isDef(props.placeholder) ? props.placeholder : translate('placeholder')
+})
+
+const clearing = ref<boolean>(false)
+const focused = ref<boolean>(false) // 控制聚焦
+const focusing = ref<boolean>(false) // 当前是否激活状态
+const inputValue = ref<string>('') // 输入框的值
+
+watch(
+  () => props.focus,
+  (newValue) => {
+    focused.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    inputValue.value = isDef(newValue) ? String(newValue) : ''
+  },
+  { immediate: true, deep: true }
+)
+
+/**
+ * 展示清空按钮
+ */
+const showClear = computed(() => {
+  const { disabled, readonly, clearable, clearTrigger } = props
+  if (clearable && !readonly && !disabled && inputValue.value && (clearTrigger === 'always' || (props.clearTrigger === 'focus' && focusing.value))) {
+    return true
+  } else {
+    return false
+  }
+})
+
+/**
+ * 展示字数统计
+ */
+const showWordCount = computed(() => {
+  const { disabled, readonly, maxlength, showWordLimit } = props
+  return Boolean(!disabled && !readonly && isDef(maxlength) && maxlength > -1 && showWordLimit)
+})
+
+// 当前文本域文字长度
+const currentLength = computed(() => {
+  /**
+   * 使用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.error ? 'is-error' : ''} ${props.disabled ? 'is-disabled' : ''} ${props.autoHeight ? 'is-auto-height' : ''} ${
+    isCompact.value ? 'is-compact' : ''
+  } ${props.customClass}`
+})
+
+const isCompact = computed(() => {
+  return isDef(props.compact) ? props.compact : isDef(formItemValidate.value)
+})
+
+const inputPlaceholderClass = computed(() => {
+  return `wd-textarea__placeholder  ${props.placeholderClass}`
+})
+
+onBeforeMount(() => {
+  initState()
+})
+
+// 状态初始化
+function initState() {
+  inputValue.value = formatValue(inputValue.value)
+  emit('update:modelValue', inputValue.value)
+}
+
+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}`
+}
+
+async function handleClear() {
+  focusing.value = false
+  inputValue.value = ''
+  if (props.focusWhenClear) {
+    clearing.value = true
+    focused.value = false
+  }
+  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执行完毕
+  await pause(150)
+
+  if (clearing.value) {
+    clearing.value = false
+    return
+  }
+
+  focusing.value = false
+  emit('blur', {
+    value: inputValue.value,
+    cursor: detail.cursor ? detail.cursor : null
+  })
+  await formItemValidate.value?.validateByTrigger('blur')
+}
+function handleFocus({ detail }: any) {
+  focusing.value = true
+  emit('focus', detail)
+}
+function handleInput({ detail }: any) {
+  inputValue.value = formatValue(inputValue.value as string)
+  emit('update:modelValue', inputValue.value)
+  emit('input', detail)
+}
+function handleKeyboardheightchange({ detail }: any) {
+  emit('keyboardheightchange', detail)
+}
+function handleConfirm({ detail }: any) {
+  emit('confirm', detail)
+}
+function handleLineChange({ detail }: any) {
+  emit('linechange', detail)
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-toast/index.scss

@@ -0,0 +1,92 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// ==================== Toast 组件变量 ====================
+
+// 文字颜色
+$toast-color: var(--wot-toast-color, $text-white) !default;
+// 内边距
+$toast-padding: var(--wot-toast-padding, $padding-extra-loose) !default;
+// 最大宽度
+$toast-max-width: var(--wot-toast-max-width, 300px) !default;
+// 圆角大小
+$toast-border-radius: var(--wot-toast-border-radius, $radius-large) !default;
+// 背景色
+$toast-bg: var(--wot-toast-bg, $opacfilled-tooltip-toast-cover) !default;
+// 字号
+$toast-font-size: var(--wot-toast-font-size, $typography-body-size-extra-large) !default;
+// 行高
+$toast-line-height: var(--wot-toast-line-height, $typography-body-line--height-size-extra-large) !default;
+// 图标大小
+$toast-icon-size: var(--wot-toast-icon-size, $n-24) !default;
+// 消息内容左边距
+$toast-msg-margin-left: var(--wot-toast-msg-margin-left, $spacing-tight) !default;
+// 图标下边距
+$toast-icon-margin-bottom: var(--wot-toast-icon-margin-bottom, $spacing-extra-tight) !default;
+// loading 状态下的 padding
+$toast-loading-padding: var(--wot-toast-loading-padding, $padding-main) !default;
+// loading 动画的 margin-bottom
+$toast-loading-margin-bottom: var(--wot-toast-loading-margin-bottom, $spacing-extra-loose) !default;
+
+// ==================== Toast 组件样式 ====================
+
+@include b(toast) {
+  display: inline-block;
+  max-width: $toast-max-width;
+  padding: $toast-padding;
+  background: $toast-bg;
+  border-radius: $toast-border-radius;
+  color: $toast-color;
+  transition: all 0.2s;
+  font-size: $toast-font-size;
+  box-sizing: border-box;
+
+  @include when(vertical) {
+    flex-direction: column;
+  }
+
+  @include e(msg) {
+    font-size: $toast-font-size;
+    word-break: break-all;
+    line-height: $toast-line-height;
+    text-align: left;
+  }
+
+  @include edeep(icon) {
+    font-size: $toast-icon-size;
+    line-height: $toast-icon-size;
+    @include when(vertical) {
+      margin-bottom: $toast-icon-margin-bottom;
+    }
+  }
+  @include e(loading) {
+    margin-bottom: $toast-loading-margin-bottom;
+    display: inline-block;
+  }
+  @include m(top) {
+    transform: translate3d(0, -40vh, 0);
+  }
+  @include m(middle-top) {
+    transform: translate3d(0%, -18.8vh, 0);
+  }
+  @include m(middle) {
+    transform: translate3d(0, -50%, 0);
+  }
+  @include m(bottom) {
+    transform: translate3d(0, 40vh, 0);
+  }
+  @include m(with-icon) {
+    display: inline-flex;
+    align-items: center;
+    @include me(msg) {
+      margin-left: $toast-msg-margin-left;
+      @include when(vertical) {
+        margin-left: 0;
+      }
+    }
+  }
+  @include m(loading) {
+    min-width: auto;
+    padding: $toast-loading-padding;
+  }
+}

package/components/wd-toast/index.ts

@@ -0,0 +1,97 @@
+import { inject, provide, ref } from 'vue'
+import type { Toast, ToastOptions } from './types'
+import { deepMerge } from '../../common/util'
+
+/**
+ * useToast 用到的key
+ */
+const toastDefaultOptionKey = '__TOAST_OPTION__'
+
+// 默认模板
+export const defaultOptions: ToastOptions = {
+  duration: 2000,
+  show: false
+}
+
+const None = Symbol('None')
+
+// 使用map存储定时器，避免先前的定时器覆盖后续的定时器
+// 如果同一个 selector 多次调用 toast，则会清除之前的定时器，重新计时
+const toastTimerMap = new Map<string, ReturnType<typeof setTimeout>>()
+
+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)
+  }
+
+  const createMethod = (toastOptions: ToastOptions) => {
+    return (options: ToastOptions | string) => {
+      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
+    toastOption.value = deepMerge(options, {
+      show: true
+    }) as ToastOptions
+    // 开始渲染，并在 duration ms之后执行清除
+    const prevTimer = toastTimerMap.get(toastOptionKey)
+    if (prevTimer) {
+      clearTimeout(prevTimer)
+      toastTimerMap.delete(toastOptionKey)
+    }
+    if (options.duration && options.duration > 0) {
+      const nextTimer = setTimeout(() => {
+        toastTimerMap.delete(toastOptionKey)
+        close()
+      }, options.duration)
+      toastTimerMap.set(toastOptionKey, nextTimer)
+    }
+  }
+
+  const loading = createMethod({
+    iconName: 'loading',
+    duration: 0,
+    cover: true
+  })
+  const success = createMethod({
+    iconName: 'success',
+    duration: 1500
+  })
+  const error = createMethod({ iconName: 'error' })
+  const warning = createMethod({ iconName: 'warning' })
+  const info = createMethod({ iconName: 'info' })
+
+  const close = () => {
+    const timer = toastTimerMap.get(toastOptionKey)
+    if (timer) {
+      clearTimeout(timer)
+      toastTimerMap.delete(toastOptionKey)
+    }
+    toastOption.value = { show: false }
+  }
+  return {
+    show,
+    loading,
+    success,
+    error,
+    warning,
+    info,
+    close
+  }
+}
+
+export const getToastOptionKey = (selector: string) => {
+  return selector ? `${toastDefaultOptionKey}${selector}` : toastDefaultOptionKey
+}
+
+export const toastIcon = {
+  success: 'check-circle',
+  warning: 'exclamation-circle',
+  info: 'info-circle',
+  error: 'close-circle'
+}

package/components/wd-toast/types.ts

@@ -0,0 +1,190 @@
+/*
+ * @Author: weisheng
+ * @Date: 2023-06-19 12:47:57
+ * @LastEditTime: 2026-01-22 23:52:18
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-toast/types.ts
+ * 记得注释
+ */
+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-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
+  loadingColor?: string
+  loadingSize?: number
+  iconColor?: string
+  position?: ToastPositionType
+  show?: boolean
+  zIndex?: number
+  /**
+   * 是否存在遮罩层
+   */
+  cover?: boolean
+  /**
+   * 图标类名
+   */
+  iconClass?: string
+  /**
+   * 类名前缀，用于使用自定义图标
+   */
+  classPrefix?: string
+  /**
+   * 完全展示后的回调函数
+   */
+  opened?: () => void
+  /**
+   * 完全关闭时的回调函数
+   */
+  closed?: () => void
+}
+
+export interface Toast {
+  // 打开Toast
+  show(toastOptions: ToastOptions | string): void
+  // 成功提示
+  success(toastOptions: ToastOptions | string): void
+  // 关闭提示
+  error(toastOptions: ToastOptions | string): void
+  // 常规提示
+  info(toastOptions: ToastOptions | string): void
+  // 警告提示
+  warning(toastOptions: ToastOptions | string): void
+  // 加载提示
+  loading(toastOptions: ToastOptions | string): void
+  // 关闭Toast
+  close(): void
+}
+
+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 {'circular' | 'spinner' | 'dots'}
+   * @default 'circular'
+   */
+  loadingType: makeStringProp<ToastLoadingType>('circular'),
+  /**
+   * 加载颜色
+   * @type {string}
+   * @default '#ffffff'
+   */
+  loadingColor: {
+    type: String,
+    default: '#ffffff'
+  },
+  /**
+   * 加载大小
+   * @type {number}
+   */
+  loadingSize: Number,
+  /**
+   * 图标颜色
+   * @type {string}
+   */
+  iconColor: String,
+  /**
+   * 位置
+   * @type {'top' | 'middle-top' | 'middle' | 'bottom'}
+   * @default 'middle'
+   */
+  position: makeStringProp<ToastPositionType>('middle'),
+  /**
+   * 层级
+   * @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>