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

package/components/wd-notify/wd-notify.vue

@@ -0,0 +1,162 @@
+<template>
+  <wd-popup
+    v-model="state.visible"
+    :custom-style="popupStyle"
+    :position="state.position"
+    :z-index="state.zIndex"
+    :modal="false"
+    :root-portal="state.rootPortal"
+    @leave="onClosed"
+    @enter="onOpened"
+  >
+    <view
+      :class="[
+        'wd-notify',
+        `wd-notify--${state.type}`,
+        `wd-notify--${state.position}`,
+        state.variant === 'floating' ? 'wd-notify--floating' : '',
+        customClass
+      ]"
+      :style="rootStyle"
+      @click="onClick"
+    >
+      <slot name="prefix">
+        <wd-icon v-if="iconName" :name="iconName" custom-class="wd-notify__prefix"></wd-icon>
+      </slot>
+      <view class="wd-notify__content">
+        <slot>
+          <text>{{ state.message }}</text>
+        </slot>
+      </view>
+      <slot name="close" v-if="state.closable">
+        <wd-icon name="close" custom-class="wd-notify__close" @click="handleClose"></wd-icon>
+      </slot>
+    </view>
+  </wd-popup>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-notify',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdPopup from '../wd-popup/wd-popup.vue'
+import { inject, computed, watch, ref, type CSSProperties } from 'vue'
+import { notifyProps, type NotifyProps } from './types'
+import { getNotifyOptionKey } from '.'
+import { addUnit, isFunction, objToStyle } from '../../common/util'
+
+const props = defineProps(notifyProps)
+const emits = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'click', event: MouseEvent): void
+  (e: 'closed'): void
+  (e: 'opened'): void
+}>()
+const state = inject(getNotifyOptionKey(props.selector), ref<NotifyProps>(props))
+
+/**
+ * 根据消息类型获取对应的图标
+ */
+const iconName = computed(() => {
+  const { type } = state.value
+  switch (type) {
+    case 'success':
+      return 'check-circle-fill'
+    case 'warning':
+      return 'exclamation-circle-fill'
+    case 'danger':
+      return 'close-circle-fill'
+    default:
+      return 'info-circle-fill'
+  }
+})
+
+/**
+ * 计算通知的自定义样式
+ */
+const popupStyle = computed(() => {
+  const { safeHeight, position, variant } = state.value
+  const styles: CSSProperties = {
+    overflow: 'unset',
+    background: 'transparent'
+  }
+  switch (position) {
+    case 'top':
+      styles['top'] = `calc(var(--window-top) + ${addUnit(safeHeight || 0)})`
+      break
+    case 'bottom':
+      styles['bottom'] = 'var(--window-bottom)'
+      break
+    default:
+      break
+  }
+  if (variant === 'floating') {
+    styles['left'] = '12px'
+    styles['right'] = '12px'
+    styles['width'] = 'auto'
+  }
+  return objToStyle(styles)
+})
+
+const rootStyle = computed(() => {
+  const { customStyle } = props
+  const style: CSSProperties = {}
+  if (state.value.color) {
+    style.color = state.value.color
+  }
+  if (state.value.background) {
+    style.background = state.value.background
+  }
+  return `${objToStyle(style)};${customStyle}`
+})
+
+/**
+ * 处理点击事件
+ * @param {MouseEvent} event 鼠标事件
+ */
+const onClick = (event: MouseEvent) => {
+  if (isFunction(state.value.onClick)) return state.value.onClick(event)
+  emits('click', event)
+}
+/**
+ * 处理关闭动画结束事件
+ */
+const onClosed = () => {
+  if (isFunction(state.value.onClosed)) return state.value.onClosed()
+  emits('closed')
+}
+/**
+ * 处理打开动画结束事件
+ */
+const onOpened = () => {
+  if (isFunction(state.value.onOpened)) return state.value.onOpened()
+  emits('opened')
+}
+/**
+ * 点击关闭按钮处理
+ */
+const handleClose = () => {
+  state.value.visible = false
+}
+
+watch(
+  () => state.value.visible,
+  (visible) => {
+    emits('update:visible', visible as boolean)
+  },
+  { deep: true }
+)
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-overlay/index.scss

@@ -0,0 +1,14 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 遮罩层背景色
+$overlay-bg: var(--wot-overlay-bg, $opac-7_55) !default;
+
+@include b(overlay) {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: $overlay-bg;
+}

package/components/wd-overlay/types.ts

@@ -0,0 +1,42 @@
+/*
+ * @Author: weisheng
+ * @Date: 2025-05-08 22:54:27
+ * @LastEditTime: 2026-01-19 16:46:33
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-overlay/types.ts
+ * 记得注释
+ */
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp } from '../../common/props'
+
+export const overlayProps = {
+  ...baseProps,
+  /**
+   * 是否展示遮罩层
+   * 类型: boolean
+   * 默认值: false
+   */
+  show: makeBooleanProp(false),
+  /**
+   * 动画时长，单位毫秒
+   * 类型: Record<string, number> | number | boolean
+   * 默认值: 300
+   */
+  duration: {
+    type: [Object, Number, Boolean] as PropType<Record<string, number> | number | boolean>,
+    default: 300
+  },
+  /**
+   * 是否锁定滚动
+   * 类型: boolean
+   * 默认值: true
+   */
+  lockScroll: makeBooleanProp(true),
+  /**
+   * 层级
+   * 类型: number
+   * 默认值: 10
+   */
+  zIndex: makeNumberProp(10)
+}

package/components/wd-overlay/wd-overlay.vue

@@ -0,0 +1,55 @@
+<template>
+  <wd-transition
+    :show="show"
+    name="fade"
+    :custom-class="`wd-overlay ${customClass}`"
+    :duration="duration"
+    :custom-style="`z-index: ${zIndex}; ${customStyle}`"
+    :disable-touch-move="lockScroll"
+    @before-enter="emit('before-enter')"
+    @enter="emit('enter')"
+    @after-enter="emit('after-enter')"
+    @before-leave="emit('before-leave')"
+    @leave="emit('leave')"
+    @after-leave="emit('after-leave')"
+    @click="handleClick"
+  >
+    <slot></slot>
+  </wd-transition>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-overlay',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdTransition from '../wd-transition/wd-transition.vue'
+import { overlayProps } from './types'
+// #ifdef H5
+import { useLockScroll } from '../../composables/useLockScroll'
+// #endif
+
+const props = defineProps(overlayProps)
+
+const emit = defineEmits(['click', 'before-enter', 'enter', 'after-enter', 'before-leave', 'leave', 'after-leave'])
+
+function handleClick() {
+  emit('click')
+}
+
+// #ifdef H5
+useLockScroll(() => props.show && props.lockScroll)
+// #endif
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-pagination/index.scss

@@ -0,0 +1,71 @@
+@use '../../styles/variable.scss' as *;
+@use '../../styles/mixin/_mixin.scss' as *;
+
+// 分页背景色
+$pagination-bg: var(--wot-pagination-bg, $filled-oppo) !default;
+// 分页内边距
+$pagination-padding: var(--wot-pagination-padding, $padding-loose) !default;
+// 分页图标尺寸
+$pagination-icon-size: var(--wot-pagination-icon-size, $n-16) !default;
+// 辅助文案颜色
+$pagination-message-color: var(--wot-pagination-message-color, $text-secondary) !default;
+// 辅助文案字号
+$pagination-message-font-size: var(--wot-pagination-message-font-size, $typography-body-size-main) !default;
+// 辅助文案行高
+$pagination-message-line-height: var(--wot-pagination-message-line-height, $typography-body-line--height-size-main) !default;
+// 辅助文案顶部间距
+$pagination-message-margin-top: var(--wot-pagination-message-margin-top, $spacing-super-tight) !default;
+// 翻页按钮最小宽度
+$pagination-nav-width: var(--wot-pagination-nav-width, $n-64) !default;
+// 页码字号
+$pagination-size-font-size: var(--wot-pagination-size-font-size, $typography-title-size-main) !default;
+// 页码行高
+$pagination-size-line-height: var(--wot-pagination-size-line-height, $typography-title-line--height-size-main) !default;
+// 页码颜色
+$pagination-size-color: var(--wot-pagination-size-color, $text-main) !default;
+// 当前页码颜色
+$pagination-size-current-color: var(--wot-pagination-size-current-color, $primary-6) !default;
+// 分隔符外边距
+$pagination-size-separator-margin: var(--wot-pagination-size-separator-margin, $spacing-zero $spacing-super-tight) !default;
+
+@include b(pagination) {
+  user-select: none;
+  background-color: $pagination-bg;
+  padding: $pagination-padding;
+
+  @include edeep(icon) {
+    font-size: $pagination-icon-size;
+    line-height: $pagination-icon-size;
+  }
+
+  @include e(content) {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  @include e(message) {
+    text-align: center;
+    color: $pagination-message-color;
+    font-size: $pagination-message-font-size;
+    line-height: $pagination-message-line-height;
+    margin-top: $pagination-message-margin-top;
+  }
+  @include edeep(nav) {
+    min-width: $pagination-nav-width;
+  }
+  @include e(size) {
+    flex: 1;
+    text-align: center;
+    font-size: $pagination-size-font-size;
+    line-height: $pagination-size-line-height;
+    color: $pagination-size-color;
+  }
+
+  @include e(separator) {
+    margin: $pagination-size-separator-margin;
+  }
+
+  @include e(current) {
+    color: $pagination-size-current-color;
+  }
+}

package/components/wd-pagination/types.ts

@@ -0,0 +1,69 @@
+import { type PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp } from '../../common/props'
+import { type ButtonVariant } from '../wd-button/types'
+
+export const paginationProps = {
+  ...baseProps,
+  /**
+   * 当前页
+   * 类型: number
+   * 默认值: 必填
+   */
+  modelValue: makeRequiredProp(Number),
+  /**
+   * 总页数，如果有total，则优先使用total计算页数
+   * 类型: number
+   * 默认值: 1
+   */
+  totalPage: makeNumberProp(1),
+  /**
+   * 是否展示分页为Icon图标
+   * 类型: boolean
+   * 默认值: false
+   */
+  showIcon: makeBooleanProp(false),
+  /**
+   * 按钮的variant
+   * 类型: ButtonVariant
+   * 可选值: 'base' | 'plain' | 'dashed' | 'text'
+   * 默认值: 'text'
+   */
+  buttonVariant: {
+    type: String as PropType<ButtonVariant>,
+    default: 'text'
+  },
+  /**
+   * 是否展示总条数
+   * 类型: boolean
+   * 默认值: false
+   */
+  showMessage: makeBooleanProp(false),
+  /**
+   * 总条数
+   * 类型: number
+   * 默认值: 0
+   */
+  total: makeNumberProp(0),
+  /**
+   * 每页条数
+   * 类型: number
+   * 默认值: 10
+   */
+  pageSize: makeNumberProp(10),
+  /**
+   * 上一页文本
+   * 类型: string
+   */
+  prevText: String,
+  /**
+   * 下一页文本
+   * 类型: string
+   */
+  nextText: String,
+  /**
+   * 总页数只有一页时是否隐藏
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideIfOnePage: makeBooleanProp(false)
+}

package/components/wd-pagination/wd-pagination.vue

@@ -0,0 +1,118 @@
+<template>
+  <view :class="`wd-pagination ${customClass}`" :style="customStyle" v-if="!(hideIfOnePage && totalPageNum === 1)">
+    <view class="wd-pagination__content">
+      <slot name="prev" :modelValue="modelValue" :totalPageNum="totalPageNum" :total="total" :pageSize="pageSize">
+        <wd-button
+          :plain="modelValue > 1"
+          type="info"
+          :variant="buttonVariant"
+          size="small"
+          :disabled="modelValue <= 1"
+          :custom-class="`wd-pagination__nav`"
+          :icon="showIcon ? 'left' : ''"
+          :text="showIcon ? '' : prevText || translate('prev')"
+          @click="sub"
+        ></wd-button>
+      </slot>
+      <slot name="size" :modelValue="modelValue" :totalPageNum="totalPageNum" :total="total" :pageSize="pageSize">
+        <view class="wd-pagination__size">
+          <text class="wd-pagination__current">{{ modelValue }}</text>
+          <text class="wd-pagination__separator">/</text>
+          <text class="wd-pagination__total">{{ totalPageNum }}</text>
+        </view>
+      </slot>
+      <slot name="next" :modelValue="modelValue" :totalPageNum="totalPageNum" :total="total" :pageSize="pageSize">
+        <wd-button
+          :plain="modelValue < totalPageNum"
+          type="primary"
+          :variant="buttonVariant"
+          size="small"
+          :disabled="modelValue >= totalPageNum"
+          :custom-class="`wd-pagination__nav`"
+          :icon="showIcon ? 'right' : ''"
+          :text="showIcon ? '' : nextText || translate('next')"
+          @click="add"
+        ></wd-button>
+      </slot>
+    </view>
+    <slot name="message" :modelValue="modelValue" :totalPageNum="totalPageNum" :total="total" :pageSize="pageSize" v-if="showMessage">
+      <view class="wd-pagination__message">
+        <text>{{ translate('page', modelValue) }}，</text>
+        <text v-if="total">{{ translate('total', total) }}，</text>
+        <text>{{ translate('size', pageSize) }}</text>
+      </view>
+    </slot>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-pagination',
+  options: {
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdButton from '../wd-button/wd-button.vue'
+import { ref, watch } from 'vue'
+import { useTranslate } from '../../composables/useTranslate'
+import { paginationProps } from './types'
+
+const { translate } = useTranslate('pagination')
+
+const props = defineProps(paginationProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const totalPageNum = ref<number>(0) // 总页数
+
+watch(
+  () => props.totalPage,
+  (newValue) => {
+    if (!totalPageNum.value && newValue) {
+      totalPageNum.value = newValue
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => props.total,
+  () => {
+    updateTotalPage()
+  },
+  { immediate: true, deep: true }
+)
+
+function add() {
+  const { modelValue } = props
+  if (modelValue > totalPageNum.value - 1) {
+    return
+  }
+  emit('change', { value: modelValue + 1 })
+  emit('update:modelValue', modelValue + 1)
+}
+
+function sub() {
+  const { modelValue } = props
+  if (modelValue < 2) {
+    return
+  }
+  emit('change', { value: modelValue - 1 })
+  emit('update:modelValue', modelValue - 1)
+}
+
+function updateTotalPage() {
+  const { total, pageSize } = props
+  totalPageNum.value = Math.ceil(total / pageSize)
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-password-input/index.scss

@@ -0,0 +1,134 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 输入区域高度
+$password-input-height: var(--wot-password-input-height, $n-50) !default;
+// 组件外边距
+$password-input-margin: var(--wot-password-input-margin, $n-16) !default;
+// 输入字号
+$password-input-font-size: var(--wot-password-input-font-size, $typography-title-size-large) !default;
+// 输入行高
+$password-input-line-height: var(--wot-password-input-line-height, $typography-title-line--height-size-large) !default;
+// 输入格圆角
+$password-input-radius: var(--wot-password-input-radius, $n-6) !default;
+// 输入格背景色
+$password-input-bg: var(--wot-password-input-bg, $filled-oppo) !default;
+// 提示信息颜色
+$password-input-info-color: var(--wot-password-input-info-color, $text-auxiliary) !default;
+// 提示信息字号
+$password-input-info-font-size: var(--wot-password-input-info-font-size, $typography-body-size-main) !default;
+// 边框颜色
+$password-input-border-color: var(--wot-password-input-border-color, $border-main) !default;
+// 边框宽度
+$password-input-border-width: var(--wot-password-input-border-width, $stroke-main) !default;
+// 错误提示颜色
+$password-input-error-info-color: var(--wot-password-input-error-info-color, $danger-main) !default;
+// 密码点尺寸
+$password-input-dot-size: var(--wot-password-input-dot-size, $n-10) !default;
+// 密码点颜色
+$password-input-dot-color: var(--wot-password-input-dot-color, $text-main) !default;
+// 密码点圆角
+$password-input-dot-radius: var(--wot-password-input-dot-radius, $radius-radius-full) !default;
+// 输入文本颜色
+$password-input-text-color: var(--wot-password-input-text-color, $text-main) !default;
+// 光标颜色
+$password-input-cursor-color: var(--wot-password-input-cursor-color, $text-main) !default;
+// 光标宽度
+$password-input-cursor-width: var(--wot-password-input-cursor-width, $n-1) !default;
+// 光标高度
+$password-input-cursor-height: var(--wot-password-input-cursor-height, 40%) !default;
+// 光标闪烁周期
+$password-input-cursor-duration: var(--wot-password-input-cursor-duration, 1s) !default;
+
+@include b(password-input) {
+  position: relative;
+  margin: 0 $password-input-margin;
+  user-select: none;
+
+  @include e(security) {
+    display: flex;
+    width: 100%;
+    height: $password-input-height;
+    cursor: pointer;
+  }
+
+  @include e(item) {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: $password-input-text-color;
+    font-size: $password-input-font-size;
+    line-height: $password-input-line-height;
+    background: $password-input-bg;
+
+    @include when(border) {
+      border: $password-input-border-width solid $password-input-border-color;
+
+      &:not(:last-child) {
+        border-right: none;
+      }
+
+      &:first-child {
+        border-top-left-radius: $password-input-radius;
+        border-bottom-left-radius: $password-input-radius;
+      }
+
+      &:last-child {
+        border-top-right-radius: $password-input-radius;
+        border-bottom-right-radius: $password-input-radius;
+      }
+    }
+  }
+
+  @include e(mask) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $password-input-dot-size;
+    height: $password-input-dot-size;
+    background: $password-input-dot-color;
+    border-radius: $password-input-dot-radius;
+    transform: translate(-50%, -50%);
+    visibility: hidden;
+  }
+
+  @include e(cursor) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $password-input-cursor-width;
+    height: $password-input-cursor-height;
+    background: $password-input-cursor-color;
+    transform: translate(-50%, -50%);
+    animation: $password-input-cursor-duration cursor-flicker infinite;
+  }
+
+  @include e(info) {
+    margin-top: $password-input-margin;
+    font-size: $password-input-info-font-size;
+    text-align: center;
+    color: $password-input-info-color;
+
+    @include when(error) {
+      color: $password-input-error-info-color;
+    }
+
+  }
+}
+
+@keyframes cursor-flicker {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}