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

package/components/wd-text/types.ts

@@ -0,0 +1,107 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumericProp, makeStringProp } from '../../common/props'
+
+/**
+ * 主题类型
+ */
+export type TextType = 'default' | 'primary' | 'success' | 'warning' | 'error'
+
+/**
+ * 文本处理模式
+ */
+export type TextMode = 'text' | 'date' | 'phone' | 'name' | 'price'
+
+/**
+ * 文本装饰类型
+ */
+export type TextDecoration = 'none' | 'underline' | 'line-through' | 'overline'
+
+export const textProps = {
+  ...baseProps,
+  /**
+   * 主题类型
+   * 类型: TextType
+   * 可选值: 'default' | 'primary' | 'success' | 'warning' | 'error'
+   * 默认值: default
+   */
+  type: makeStringProp<TextType>('default'),
+  /**
+   * 文字内容
+   * 类型: string | number
+   */
+  text: makeNumericProp(''),
+  /**
+   * 字体大小
+   * 类型: string
+   */
+  size: makeStringProp(''),
+  /**
+   * 文本处理的匹配模式
+   * 类型: TextMode
+   * 可选值: 'text' | 'date' | 'phone' | 'name' | 'price'
+   * 默认值: text
+   */
+  mode: makeStringProp<TextMode>('text'),
+  /**
+   * 文字装饰，下划线、中划线等
+   * 类型: TextDecoration
+   * 可选值: 'none' | 'underline' | 'line-through' | 'overline'
+   * 默认值: none
+   */
+  decoration: makeStringProp<TextDecoration>('none'),
+  /**
+   * mode为phone时，点击文本是否拨打电话
+   * 类型: boolean
+   * 默认值: false
+   */
+  call: makeBooleanProp(false),
+  /**
+   * 是否粗体
+   * 类型: boolean
+   * 默认值: false
+   */
+  bold: makeBooleanProp(false),
+  /**
+   * 是否脱敏，当mode为phone和name时生效
+   * 类型: boolean
+   * 默认值: false
+   */
+  format: makeBooleanProp(false),
+  /**
+   * 文本颜色
+   * 类型: string
+   */
+  color: makeStringProp(''),
+  /**
+   * 前缀内容
+   * 类型: string
+   */
+  prefix: String,
+  /**
+   * 后缀内容
+   * 类型: string
+   */
+  suffix: String,
+  /**
+   * 文本显示的行数，超出此行数将显示省略号，最大值为5
+   * 类型: number
+   */
+  lines: Number,
+  /**
+   * 文本行高
+   * 类型: string
+   */
+  lineHeight: makeStringProp(''),
+  /**
+   * 自定义根节点样式
+   * 类型: string
+   */
+  customStyle: makeStringProp(''),
+  /**
+   * 自定义根节点样式类
+   * 类型: string
+   */
+  customClass: makeStringProp('')
+}
+
+export type TextProps = ExtractPropTypes<typeof textProps>

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

@@ -0,0 +1,141 @@
+<template>
+  <text @click="handleClick" :class="rootClass" :style="rootStyle">
+    <slot v-if="$slots.prefix || prefix" name="prefix">{{ prefix }}</slot>
+    <text>{{ formattedText }}</text>
+    <slot v-if="$slots.suffix || suffix" name="suffix">{{ suffix }}</slot>
+  </text>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-text',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { isDef, objToStyle } from '../../common/util'
+import { textProps } from './types'
+import { formatDate } from '../../common/formatDate'
+
+// 获取组件的 props 和 emit 函数
+const props = defineProps(textProps)
+const emit = defineEmits(['click'])
+
+// 存储文本类名的响应式变量
+const textClass = ref<string>('')
+
+// 监听 props 变化，合并 watch 逻辑
+watch(
+  () => ({
+    type: props.type,
+    text: props.text,
+    mode: props.mode,
+    color: props.color,
+    bold: props.bold,
+    lines: props.lines,
+    format: props.format
+  }),
+  ({ type }) => {
+    // 验证 type 属性
+    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 }
+)
+
+// 计算根元素的类名
+const rootClass = computed(() => {
+  return `wd-text ${props.customClass} ${textClass.value}`
+})
+
+// 计算根元素的样式
+const rootStyle = computed(() => {
+  const rootStyle: Record<string, any> = {}
+  if (props.color) {
+    rootStyle['color'] = props.color
+  }
+  if (props.size) {
+    rootStyle['font-size'] = `${props.size}`
+  }
+  if (props.lineHeight) {
+    rootStyle['line-height'] = `${props.lineHeight}`
+  }
+  if (props.decoration) {
+    rootStyle['text-decoration'] = `${props.decoration}`
+  }
+  return `${objToStyle(rootStyle)}${props.customStyle}`
+})
+
+// 计算文本类名的函数
+function computeTextClass() {
+  const { type, color, bold, lines } = props
+  const textClassList: string[] = []
+  if (!color) {
+    textClassList.push(`is-${type}`)
+  }
+  if (isDef(lines)) {
+    textClassList.push(`is-lines-${lines}`)
+  }
+  bold && textClassList.push('is-bold')
+  textClass.value = textClassList.join(' ')
+}
+
+// 格式化文本的函数
+function formatText(text: string, format: boolean, mode: string): string {
+  if (format) {
+    if (mode === 'phone') {
+      return text.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
+    } else if (mode === 'name') {
+      return text.replace(/^(.).*(.)$/, '$1**$2')
+    } else {
+      throw new Error('mode must be one of phone or name for encryption')
+    }
+  }
+  return text
+}
+
+// 格式化数字的函数
+function formatNumber(num: number | string): string {
+  num = Number(num).toFixed(2)
+  const x = num.split('.')
+  let x1 = x[0]
+  const x2 = x.length > 1 ? '.' + x[1] : ''
+  const rgx = /(\d+)(\d{3})/
+  while (rgx.test(x1)) {
+    x1 = x1.replace(rgx, '$1,$2')
+  }
+  return x1 + x2
+}
+
+// 计算格式化后的文本
+const formattedText = computed(() => {
+  const { text, mode, format } = props
+  if (mode === 'date') {
+    return formatDate(Number(text), 'YYYY-MM-DD')
+  }
+  if (mode === 'price') {
+    return formatNumber(text)
+  }
+  return formatText(`${text}`, format, mode)
+})
+
+// 处理点击事件
+function handleClick(event: Event) {
+  emit('click', event)
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-textarea/index.scss

@@ -0,0 +1,112 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 文本域内边距
+$textarea-padding: var(--wot-textarea-padding, $padding-loose $padding-loose) !default;
+// 文本域背景色
+$textarea-bg: var(--wot-textarea-bg, $filled-oppo) !default;
+// 文本域最小高度
+$textarea-inner-min-height: var(--wot-textarea-inner-min-height, $n-20) !default;
+// 文本域字号
+$textarea-inner-font-size: var(--wot-textarea-inner-font-size, $typography-body-size-main) !default;
+// 文本域行高
+$textarea-inner-line-height: var(--wot-textarea-inner-line-height, $typography-body-line--height-size-main) !default;
+// 文本域文字颜色
+$textarea-inner-color: var(--wot-textarea-inner-color, $text-main) !default;
+// 占位符颜色
+$textarea-inner-placeholder-color: var(--wot-textarea-inner-placeholder-color, $text-placeholder) !default;
+// 禁用态颜色
+$textarea-disabled-color: var(--wot-textarea-disabled-color, $text-disabled) !default;
+// 图标颜色
+$textarea-icon-color: var(--wot-textarea-icon-color, $icon-secondary) !default;
+// 图标字号
+$textarea-icon-font-size: var(--wot-textarea-icon-font-size, $n-18) !default;
+// 图标间距
+$textarea-icon-margin: var(--wot-textarea-icon-margin, $spacing-tight) !default;
+// 字数统计颜色
+$textarea-count-color: var(--wot-textarea-count-color, $text-auxiliary) !default;
+// 字数统计字号
+$textarea-count-font-size: var(--wot-textarea-count-font-size, $typography-body-size-main) !default;
+// 字数统计行高
+$textarea-count-line-height: var(--wot-textarea-count-line-height, $typography-body-line--height-size-main) !default;
+// 错误颜色
+$textarea-error-color: var(--wot-textarea-error-color, $danger-main) !default;
+
+@include b(textarea) {
+  -webkit-tap-highlight-color: transparent;
+  text-align: left;
+  background: $textarea-bg;
+  padding: $textarea-padding;
+
+  @include e(placeholder) {
+    color: $textarea-inner-placeholder-color;
+    line-height: $textarea-inner-line-height;
+  }
+
+  @include e(body) {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  @include e(inner) {
+    flex: 1;
+    width: 100%;
+    min-height: $textarea-inner-min-height;
+    line-height: $textarea-inner-line-height;
+    font-size: $textarea-inner-font-size;
+    color: $textarea-inner-color;
+    outline: none;
+    background: none;
+    border: none;
+    padding: 0;
+    box-sizing: border-box;
+    word-break: break-word;
+
+    &::-webkit-input-placeholder {
+      color: $textarea-inner-placeholder-color;
+      line-height: $textarea-inner-line-height;
+    }
+  }
+
+  @include edeep(clear) {
+    margin-left: $textarea-icon-margin;
+    font-size: $textarea-icon-font-size;
+    color: $textarea-icon-color;
+  }
+
+  @include e(count) {
+    text-align: right;
+    font-size: $textarea-count-font-size;
+    color: $textarea-count-color;
+    line-height: $textarea-count-line-height;
+  }
+
+  @include e(readonly-mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include when(disabled) {
+    .wd-textarea__inner,
+    .wd-textarea__placeholder {
+      color: $textarea-disabled-color;
+    }
+  }
+
+  @include when(error) {
+    .wd-textarea__inner {
+      color: $textarea-error-color;
+    }
+  }
+
+  @include when(compact) {
+    padding: 0;
+    background: transparent;
+  }
+}

package/components/wd-textarea/types.ts

@@ -0,0 +1,151 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../../common/props'
+import type { InputClearTrigger, InputMode } from '../wd-input/types'
+
+export type ConfirmType = 'send' | 'search' | 'next' | 'go' | 'done'
+
+export const textareaProps = {
+  ...baseProps,
+  /**
+   * 自定义文本域容器class名称
+   */
+  customTextareaContainerClass: makeStringProp(''),
+  /**
+   * 自定义文本域class名称
+   */
+  customTextareaClass: makeStringProp(''),
+  // 原生属性
+  /**
+   * 绑定值
+   */
+  modelValue: makeNumericProp(''),
+  /**
+   * 占位文本
+   */
+  placeholder: String,
+  /**
+   * 指定placeholder的样式
+   */
+  placeholderStyle: String,
+  /**
+   * 指定placeholder的样式类
+   */
+  placeholderClass: makeStringProp(''),
+  /**
+   * 禁用输入框
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 最大输入长度，设置为-1表示不限制最大长度
+   */
+  maxlength: makeNumberProp(-1),
+  /**
+   * 自动聚焦并拉起键盘
+   */
+  autoFocus: makeBooleanProp(false),
+  /**
+   * 获取焦点
+   */
+  focus: makeBooleanProp(false),
+  /**
+   * 是否自动增高输入框高度
+   */
+  autoHeight: makeBooleanProp(false),
+  /**
+   * 如果textarea处于position:fixed区域，需要设置此属性为true
+   */
+  fixed: makeBooleanProp(false),
+  /**
+   * 指定光标与键盘的距离
+   */
+  cursorSpacing: makeNumberProp(0),
+  /**
+   * 指定focus时的光标位置
+   */
+  cursor: makeNumberProp(-1),
+  /**
+   * 设置键盘右下角按钮的文字
+   */
+  confirmType: String as import('vue').PropType<ConfirmType>,
+  /**
+   * 点击键盘右下角按钮时是否保持键盘不收起
+   */
+  confirmHold: makeBooleanProp(false),
+  /**
+   * 是否显示键盘上方带有"完成"按钮那一栏
+   */
+  showConfirmBar: makeBooleanProp(true),
+  /**
+   * 光标起始位置，自动聚集时有效，需与selection-end搭配使用
+   */
+  selectionStart: makeNumberProp(-1),
+  /**
+   * 光标结束位置，自动聚集时有效，需与selection-start搭配使用
+   */
+  selectionEnd: makeNumberProp(-1),
+  /**
+   * 键盘弹起时是否自动上推页面
+   */
+  adjustPosition: makeBooleanProp(true),
+  /**
+   * 是否去掉iOS下的默认内边距
+   */
+  disableDefaultPadding: makeBooleanProp(false),
+  /**
+   * focus状态下点击页面时是否不收起键盘
+   */
+  holdKeyboard: makeBooleanProp(false),
+  // 非原生属性
+  /**
+   * 显示为密码框
+   */
+  showPassword: makeBooleanProp(false),
+  /**
+   * 是否显示清空按钮
+   */
+  clearable: makeBooleanProp(false),
+  /**
+   * 输入框只读状态
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 前置图标，icon组件中的图标类名
+   */
+  prefixIcon: String,
+  /**
+   * 是否显示字数限制，需要同时设置maxlength
+   */
+  showWordLimit: makeBooleanProp(false),
+  /**
+   * 设置输入框错误状态（红色）
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示
+   */
+  clearTrigger: makeStringProp<InputClearTrigger>('always'),
+  /**
+   * 是否在点击清除按钮时聚焦输入框
+   */
+  focusWhenClear: makeBooleanProp(true),
+  /**
+   * 是否忽略组件内对文本合成系统事件的处理
+   */
+  ignoreCompositionEvent: makeBooleanProp(true),
+  /**
+   * 提供数据类型提示
+   */
+  inputmode: makeStringProp<InputMode>('text'),
+  /**
+   * 支付宝小程序，避免 textarea 弹出键盘后出现内容上移
+   */
+  enableNative: makeBooleanProp(true),
+  /**
+   * 紧凑模式，移除内边距和背景色，在结合 cell 或 form-item 使用时建议开启
+   * 类型: boolean
+   * 默认值: -
+   */
+  compact: makeBooleanProp(void 0)
+}
+
+export type TextareaProps = ExtractPropTypes<typeof textareaProps>