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

package/components/wd-root-portal/wd-root-portal.vue

@@ -0,0 +1,77 @@
+<template>
+  <!-- #ifdef H5 -->
+  <!-- H5端使用 teleport -->
+  <teleport to="body">
+    <!-- #endif -->
+    <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+    <!-- #ifndef MP-DINGTALK -->
+    <!-- 小程序使用 root-portal -->
+    <root-portal>
+      <!-- #endif -->
+      <!-- #endif -->
+      <view :class="themeClass" :style="configProviderStyle" class="wd-root-portal">
+        <slot />
+      </view>
+      <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+      <!-- #ifndef MP-DINGTALK -->
+    </root-portal>
+    <!-- #endif -->
+    <!-- #endif -->
+    <!-- #ifdef H5 -->
+  </teleport>
+  <!-- #endif -->
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-root-portal',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+import { useParent } from '../../composables/useParent'
+import { USE_CONFIG_PROVIDER_KEY } from '../../composables/useConfigProvider'
+import { CONFIG_PROVIDER_KEY, type ConfigProviderProvide } from '../wd-config-provider/types'
+import { baseProps } from '../../common/props'
+
+const props = defineProps({
+  ...baseProps
+})
+
+const None = Symbol('None')
+const hooksProvider = inject<ConfigProviderProvide | typeof None>(USE_CONFIG_PROVIDER_KEY, None)
+const { parent: configProvider } = useParent(CONFIG_PROVIDER_KEY)
+
+const configProviderStyle = computed(() => {
+  return hooksProvider !== None ? hooksProvider.themeStyle.value || '' : configProvider.value?.themeStyle.value || ''
+})
+
+const themeClass = computed(() => {
+  const theme = hooksProvider !== None ? hooksProvider.theme?.value : configProvider.value?.theme?.value
+  return theme ? `wot-theme-${theme}` : 'wot-theme-light'
+})
+</script>
+
+<!-- #ifdef APP-PLUS -->
+<script module="render" lang="renderjs">
+export default {
+  mounted() {
+    if (this.$ownerInstance.$el) {
+      (document.querySelector('uni-app') || document.body).appendChild(this.$ownerInstance.$el)
+    }
+  },
+  beforeDestroy() {
+    // 清理，将元素移回原位置
+    if (this.$ownerInstance.$el) {
+      (document.querySelector('uni-app') || document.body).removeChild(this.$ownerInstance.$el)
+    }
+  }
+}
+</script>
+<!-- #endif -->

package/components/wd-row/index.scss

@@ -0,0 +1,6 @@
+@use '../../styles/mixin/mixin.scss' as *;
+
+@include b(row) {
+  display: flex;
+  flex-wrap: wrap;
+}

package/components/wd-row/types.ts

@@ -0,0 +1,36 @@
+import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeNumberProp, makeStringProp } from '../../common/props'
+
+/**
+ * 水平对齐方式
+ */
+export type RowJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'
+
+/**
+ * 垂直对齐方式
+ */
+export type RowAlign = 'top' | 'middle' | 'bottom'
+
+export type RowProvide = {
+  props: { gutter?: number }
+}
+
+export const ROW_KEY: InjectionKey<RowProvide> = Symbol('wd-row')
+
+export const rowProps = {
+  ...baseProps,
+  /**
+   * 列元素之间的间距（单位为 px）
+   */
+  gutter: makeNumberProp(0),
+  /**
+   * 主轴对齐方式
+   */
+  justify: makeStringProp<RowJustify>('start'),
+  /**
+   * 交叉轴对齐方式
+   */
+  align: makeStringProp<RowAlign>('top')
+}
+
+export type RowProps = ExtractPropTypes<typeof rowProps>

package/components/wd-row/wd-row.vue

@@ -0,0 +1,88 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2025-12-18 14:30:46
+ * @LastEditTime: 2026-02-10 22:19:29
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-row/wd-row.vue
+ * 记得注释
+-->
+<template>
+  <view :class="rootClass" :style="rootStyle">
+    <!-- 每一行 -->
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-row',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+import { useChildren } from '../../composables/useChildren'
+import { ROW_KEY, rowProps } from './types'
+import { addUnit, objToStyle } from '../../common/util'
+
+const props = defineProps(rowProps)
+const { linkChildren } = useChildren(ROW_KEY)
+
+linkChildren({ props })
+
+/**
+ * justify 值映射到 CSS flex justify-content
+ */
+const justifyMap: Record<string, string> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  'space-between': 'space-between',
+  'space-around': 'space-around',
+  'space-evenly': 'space-evenly'
+}
+
+/**
+ * align 值映射到 CSS flex align-items
+ */
+const alignMap: Record<string, string> = {
+  top: 'flex-start',
+  middle: 'center',
+  bottom: 'flex-end'
+}
+
+const rootClass = computed(() => {
+  return `wd-row ${props.customClass}`
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  const { gutter, justify, align } = props
+
+  if (gutter < 0) {
+    console.error('[wot ui] warning(wd-row): attribute gutter must be greater than or equal to 0')
+  } else if (gutter) {
+    style.marginLeft = addUnit(-gutter / 2)
+    style.marginRight = addUnit(-gutter / 2)
+  }
+
+  if (justify && justify !== 'start') {
+    style.justifyContent = justifyMap[justify] || justify
+  }
+
+  if (align && align !== 'top') {
+    style.alignItems = alignMap[align] || align
+  }
+
+  return `${objToStyle(style)}${props.customStyle}`
+})
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-search/index.scss

@@ -0,0 +1,171 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 组件整体内边距
+$search-padding: var(--wot-search-padding, $padding-tight $padding-loose) !default;
+// 输入框圆角
+$search-input-radius: var(--wot-search-input-radius, $radius-radius-full) !default;
+// 输入框高度
+$search-input-height: var(--wot-search-input-height, $n-36) !default;
+// 输入框内边距
+$search-field-padding: var(--wot-search-field-padding, $padding-zero $padding-loose) !default;
+// 输入框左侧搜索图标向右间距
+$search-left-icon-margin-right: var(--wot-search-left-icon-margin-right, $spacing-super-tight) !default;
+// 输入框背景色 (filled)
+$search-input-bg: var(--wot-search-input-bg, $filled-bottom) !default;
+// 组件容器背景色 (filled)
+$search-bg: var(--wot-search-bg, $filled-oppo) !default;
+// 组件覆盖层背景色 (filled)
+$search-cover-bg: var(--wot-search-cover-bg, $filled-bottom) !default;
+// light 模式容器背景色
+$search-light-bg: var(--wot-search-light-bg, $filled-bottom) !default;
+// light 模式内容块背景色
+$search-light-block-bg: var(--wot-search-light-block-bg, $filled-oppo) !default;
+// light 模式覆盖层背景色
+$search-light-cover-bg: var(--wot-search-light-cover-bg, $filled-oppo) !default;
+// plain 模式容器背景色
+$search-plain-bg: var(--wot-search-plain-bg, $filled-oppo) !default;
+// plain 模式内容块背景色
+$search-plain-block-bg: var(--wot-search-plain-block-bg, $filled-oppo) !default;
+// plain 模式内容块边框
+$search-plain-block-border-color: var(--wot-search-plain-block-border-color, $border-light) !default;
+// plain 模式覆盖层背景色
+$search-plain-cover-bg: var(--wot-search-plain-cover-bg, $filled-oppo) !default;
+// block 向右间距
+$search-block-margin-right: var(--wot-search-block-margin-right, $spacing-extra-tight) !default;
+// 输入框字号
+$search-input-font-size: var(--wot-search-input-font-size, $typography-body-size-main) !default;
+// 输入框文字颜色
+$search-input-color: var(--wot-search-input-color, $text-main) !default;
+// 输入框文字行高
+$search-input-line-height: var(--wot-search-input-line-height, $typography-body-line--height-size-main) !default;
+// 搜索图标颜色
+$search-icon-color: var(--wot-search-icon-color, $icon-secondary) !default;
+// 搜索图标大小
+$search-icon-size: var(--wot-search-icon-size, $typography-title-size-main) !default;
+// 清除图标大小
+$search-clear-icon-size: var(--wot-search-clear-icon-size, $n-20) !default;
+// 清除图标颜色
+$search-clear-icon-color: var(--wot-search-clear-icon-color, $icon-disabled) !default;
+// 清除图标向右间距
+$search-clear-icon-margin-left: var(--wot-search-clear-icon-margin-left, $spacing-super-tight) !default;
+// 占位符颜色
+$search-placeholder-color: var(--wot-search-placeholder-color, $text-placeholder) !default;
+// 占位符字号
+$search-placeholder-font-size: var(--wot-search-placeholder-font-size, $typography-body-size-main) !default;
+// 占位符行高
+$search-placeholder-line-height: var(--wot-search-placeholder-line-height, $typography-body-line--height-size-main) !default;
+// 取消按钮字号
+$search-cancel-font-size: var(--wot-search-cancel-font-size, $typography-body-size-main) !default;
+// 取消按钮行高
+$search-cancel-line-height: var(--wot-search-cancel-line-height, $typography-body-line--height-size-main) !default;
+// 取消按钮颜色
+$search-cancel-color: var(--wot-search-cancel-color, $primary-6) !default;
+
+@include b(search) {
+  display: flex;
+  padding: $search-padding;
+  align-items: center;
+  background: $search-bg;
+
+  @include e(block) {
+    flex: 1;
+    background-color: $search-input-bg;
+    border-radius: $search-input-radius;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    box-sizing: border-box;
+    margin-right: $search-block-margin-right;
+  }
+  @include e(field) {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+    padding: $search-field-padding;
+  }
+  @include e(input) {
+    flex: 1;
+    height: $search-input-height;
+    font-size: $search-input-font-size;
+    line-height: $search-input-line-height;
+    color: $search-input-color;
+    box-sizing: border-box;
+    border: none;
+    background: transparent;
+    -webkit-appearance: none;
+    outline: none;
+    z-index: 0;
+
+    @include lineEllipsis;
+
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+    }
+  }
+  @include e(cover) {
+    width: 100%;
+    height: $search-input-height;
+    background-color: $search-cover-bg;
+    line-height: $search-input-height;
+    font-size: $search-input-font-size;
+    border-radius: $search-input-radius;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  @include edeep(search-icon) {
+    margin-right: $search-left-icon-margin-right;
+    color: $search-icon-color;
+    font-size: $search-icon-size;
+  }
+  @include edeep(search-left-icon) {
+    margin-right: $search-left-icon-margin-right;
+    font-size: $search-icon-size;
+    color: $search-icon-color;
+  }
+  @include e(placeholder-txt) {
+    color: $search-placeholder-color;
+    font-size: $search-placeholder-font-size;
+    line-height: $search-placeholder-line-height;
+  }
+  @include edeep(clear-icon) {
+    font-size: $search-clear-icon-size;
+    color: $search-clear-icon-color;
+    margin-left: $search-clear-icon-margin-left;
+  }
+  @include e(cancel) {
+    line-height: $search-cancel-line-height;
+    font-size: $search-cancel-font-size;
+    color: $search-cancel-color;
+  }
+  @include when(light) {
+    background: $search-light-bg;
+
+    .wd-search__block {
+      background: $search-light-block-bg;
+    }
+
+    .wd-search__cover {
+      background: $search-light-cover-bg;
+    }
+  }
+  @include when(plain) {
+    background: $search-plain-bg;
+
+    .wd-search__block {
+      background: $search-plain-block-bg;
+      @include pixelBorderSurround($search-plain-block-border-color)
+    }
+
+    .wd-search__cover {
+      background: $search-plain-cover-bg;
+    }
+  }
+  @include when(without-cancel) {
+    // padding-right: $search-side-padding;
+  }
+}

package/components/wd-search/types.ts

@@ -0,0 +1,107 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-09-01 15:42:04
+ * @LastEditTime: 2026-03-11 15:14:39
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-search/types.ts
+ * 记得注释
+ */
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../../common/props'
+
+export type SearchVariant = 'filled' | 'plain' | 'light'
+
+export const searchProps = {
+  ...baseProps,
+
+  /**
+   * 自定义输入框类名
+   * 类型: string
+   * 默认值: ''
+   */
+  customInputClass: makeStringProp(''),
+
+  /**
+   * 输入框内容，双向绑定
+   * 类型: string
+   * 默认值: ''
+   */
+  modelValue: makeStringProp(''),
+
+  /**
+   * 搜索框占位文本
+   * 类型: string
+   */
+  placeholder: String,
+
+  /**
+   * 搜索框右侧文本
+   * 类型: string
+   */
+  cancelTxt: String,
+
+  /**
+   * 搜索框变体
+   * 类型: string
+   * 可选值: 'filled' | 'plain' | 'light'
+   * 默认值: 'plain'
+   */
+  variant: makeStringProp<SearchVariant>('plain'),
+
+  /**
+   * 是否隐藏右侧文本
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideCancel: makeBooleanProp(false),
+
+  /**
+   * 是否禁用搜索框
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 原生属性，设置最大长度。-1 表示无限制
+   * 类型: string | number
+   * 默认值: -1
+   */
+  maxlength: makeNumberProp(-1),
+
+  /**
+   * placeholder 居左边
+   * 类型: boolean
+   * 默认值: false
+   */
+  placeholderLeft: makeBooleanProp(false),
+
+  /**
+   * 是否自动聚焦
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.63
+   */
+  focus: makeBooleanProp(false),
+
+  /**
+   * 是否在点击清除按钮时聚焦输入框
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.63
+   */
+  focusWhenClear: makeBooleanProp(false),
+
+  /**
+   * 原生属性，指定 placeholder 的样式，目前仅支持color,font-size和font-weight
+   * 类型: string
+   */
+  placeholderStyle: String,
+
+  /**
+   * 原生属性，指定 placeholder 的样式类
+   * 类型: string
+   * 默认值: ''
+   */
+  placeholderClass: makeStringProp('')
+}

package/components/wd-search/wd-search.vue

@@ -0,0 +1,198 @@
+<template>
+  <view :class="rootClass" :style="customStyle">
+    <view class="wd-search__block" @click="handleClick">
+      <slot name="prefix"></slot>
+      <view class="wd-search__field">
+        <view v-if="!placeholderLeft" :style="coverStyle" class="wd-search__cover" @click="closeCover">
+          <wd-icon name="search-line" custom-class="wd-search__search-icon"></wd-icon>
+          <text :class="`wd-search__placeholder-txt ${placeholderClass}`">{{ placeholder || translate('search') }}</text>
+        </view>
+        <wd-icon v-if="showInput || inputValue || placeholderLeft" name="search-line" custom-class="wd-search__search-left-icon"></wd-icon>
+        <input
+          v-if="showInput || inputValue || placeholderLeft"
+          :placeholder="placeholder || translate('search')"
+          :placeholder-class="`wd-search__placeholder-txt ${placeholderClass}`"
+          :placeholder-style="placeholderStyle"
+          confirm-type="search"
+          v-model="inputValue"
+          :class="['wd-search__input', customInputClass]"
+          @focus="handleFocus"
+          @input="handleInput"
+          @blur="handleBlur"
+          @confirm="handleConfirm"
+          :disabled="disabled"
+          :maxlength="maxlength"
+          :focus="isFocused"
+        />
+        <wd-icon v-if="inputValue" custom-class="wd-search__clear-icon" name="close-circle-fill" @click="handleClear" />
+        <slot name="input-suffix"></slot>
+      </view>
+    </view>
+
+    <slot v-if="!hideCancel" name="suffix">
+      <view class="wd-search__cancel" @click="handleCancel">
+        {{ cancelTxt || translate('cancel') }}
+      </view>
+    </slot>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-search',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { type CSSProperties, computed, onMounted, ref, watch } from 'vue'
+import { objToStyle, pause } from '../../common/util'
+import { useTranslate } from '../../composables/useTranslate'
+import { searchProps } from './types'
+
+const props = defineProps(searchProps)
+const emit = defineEmits(['update:modelValue', 'change', 'clear', 'search', 'focus', 'blur', 'cancel', 'click'])
+
+const { translate } = useTranslate('search')
+
+const isFocused = ref<boolean>(false) // 是否聚焦中
+const showInput = ref<boolean>(false) // 是否显示输入框 用于实现聚焦的hack
+const inputValue = ref<string>('') // 输入框的值
+const showPlaceHolder = ref<boolean>(true)
+const clearing = ref<boolean>(false)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    inputValue.value = newValue
+    if (newValue) {
+      showInput.value = true
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.focus,
+  (newValue) => {
+    if (newValue) {
+      if (props.disabled) return
+      closeCover()
+    }
+  }
+)
+
+onMounted(() => {
+  if (props.focus) {
+    closeCover()
+  }
+})
+
+const rootClass = computed(() => {
+  const isLight = props.variant === 'light'
+  const isPlain = props.variant === 'plain'
+  return `wd-search ${isLight ? 'is-light' : ''} ${isPlain ? 'is-plain' : ''} ${props.hideCancel ? 'is-without-cancel' : ''} ${props.customClass}`
+})
+
+const coverStyle = computed(() => {
+  const coverStyle: CSSProperties = {
+    display: inputValue.value === '' && showPlaceHolder.value ? 'flex' : 'none'
+  }
+
+  return objToStyle(coverStyle)
+})
+
+async function hackFocus(focus: boolean) {
+  showInput.value = focus
+  await pause()
+  isFocused.value = focus
+}
+
+async function closeCover() {
+  if (props.disabled) return
+  await pause(100)
+  showPlaceHolder.value = false
+  hackFocus(true)
+}
+
+function handleInput(event: any) {
+  inputValue.value = event.detail.value
+  emit('update:modelValue', event.detail.value)
+  emit('change', {
+    value: event.detail.value
+  })
+}
+
+async function handleClear() {
+  inputValue.value = ''
+  if (props.focusWhenClear) {
+    clearing.value = true
+    isFocused.value = false
+  }
+  await pause()
+  if (props.focusWhenClear) {
+    showPlaceHolder.value = false
+    hackFocus(true)
+  } else {
+    showPlaceHolder.value = true
+    hackFocus(false)
+  }
+  emit('change', {
+    value: ''
+  })
+  emit('update:modelValue', '')
+  emit('clear')
+}
+
+function handleConfirm({ detail: { value } }: any) {
+  // 组件触发search事件
+  emit('search', {
+    value
+  })
+}
+
+function handleFocus() {
+  showPlaceHolder.value = false
+  emit('focus', {
+    value: inputValue.value
+  })
+}
+
+async function handleBlur() {
+  // 等待150毫秒，clear执行完毕
+  await pause(150)
+  if (clearing.value) {
+    clearing.value = false
+    return
+  }
+  // 组件触发blur事件
+  showPlaceHolder.value = !inputValue.value
+  showInput.value = !showPlaceHolder.value
+  isFocused.value = false
+  emit('blur', {
+    value: inputValue.value
+  })
+}
+
+function handleCancel() {
+  emit('cancel', {
+    value: inputValue.value
+  })
+}
+
+function handleClick() {
+  if (props.disabled) {
+    emit('click')
+  }
+}
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>