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

package/components/wd-form/types.ts

@@ -0,0 +1,133 @@
+import { type ComponentPublicInstance, type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeRequiredProp, numericProp } from '../../common/props'
+import type { CellLayout, CellSize, CellValueAlign, CellAsteriskPosition } from '../wd-cell/types'
+
+export type FormSchemaIssue = {
+  path: Array<string | number>
+  message: string
+}
+
+export type FormSchema = {
+  validate: (model: Record<string, any>) => FormSchemaIssue[] | Promise<FormSchemaIssue[]>
+  isRequired?: (path: string) => boolean | undefined
+}
+
+export const FORM_VALIDATE_EVENTS = ['change', 'blur', 'submit'] as const
+
+export type FormValidateEvent = (typeof FORM_VALIDATE_EVENTS)[number]
+
+export type FormValidateTrigger = FormValidateEvent
+
+export type ErrorMessage = {
+  prop: string
+  message: string
+}
+
+export const formProps = {
+  ...baseProps,
+  /**
+   * 表单数据对象
+   */
+  model: makeRequiredProp(Object as PropType<Record<string, any>>),
+  /**
+   * 表单验证规则
+   */
+  schema: Object as PropType<FormSchema>,
+  /**
+   * 校验触发时机
+   */
+  validateTrigger: {
+    type: [String, Array] as PropType<FormValidateTrigger | FormValidateTrigger[]>,
+    default: 'submit'
+  },
+  /**
+   * 是否在输入时重置表单校验信息
+   */
+  resetOnChange: makeBooleanProp(true),
+  /**
+   * 错误提示类型
+   */
+  errorType: {
+    type: String as PropType<'toast' | 'message' | 'none'>,
+    default: 'message'
+  },
+  // ========== 公共配置属性（可被 form-item 继承）==========
+  /**
+   * 是否展示边框线
+   * 类型: boolean
+   * 默认值: false
+   */
+  border: makeBooleanProp(false),
+  /**
+   * 是否使内容垂直居中
+   * 类型: boolean
+   * 默认值: false
+   */
+  center: makeBooleanProp(false),
+  /**
+   * 单元格大小，可选值: 'large'
+   * 类型: CellSize
+   */
+  size: String as PropType<CellSize>,
+  /**
+   * 左侧标题宽度
+   * 类型: string | number
+   */
+  titleWidth: numericProp,
+  /**
+   * 单元格布局方式
+   * 类型: CellLayout
+   * 可选值: 'horizontal' | 'vertical'
+   */
+  layout: String as PropType<CellLayout>,
+  /**
+   * 右侧内容对齐方式
+   * 类型: CellValueAlign
+   * 可选值: 'left' | 'right' | 'center'
+   */
+  valueAlign: String as PropType<CellValueAlign>,
+  /**
+   * 必填星号位置
+   * 类型: CellAsteriskPosition
+   * 可选值: 'start' | 'end'
+   */
+  asteriskPosition: String as PropType<CellAsteriskPosition>,
+  /**
+   * 是否隐藏必填星号
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideAsterisk: makeBooleanProp(false),
+  /**
+   * 是否超出隐藏显示省略号
+   * 类型: boolean
+   * 默认值: false
+   */
+  ellipsis: makeBooleanProp(false)
+}
+export type FormProps = ExtractPropTypes<typeof formProps>
+
+export type FormExpose = {
+  /**
+   * 表单校验
+   * @param prop 指定校验字段
+   */
+  validate: (prop?: string | Array<string>) => Promise<{
+    valid: boolean
+    errors: ErrorMessage[]
+  }>
+  /**
+   * 重置表单项的验证提示
+   */
+  reset: () => void
+}
+
+export type FormProvide = {
+  props: Partial<FormProps>
+  errorMessages?: Record<string, string>
+  validate?: (prop?: string | string[]) => Promise<{ valid: boolean; errors: ErrorMessage[] }>
+}
+
+export const FORM_KEY: InjectionKey<FormProvide> = Symbol('wd-form')
+
+export type FormInstance = ComponentPublicInstance<FormProps, FormExpose>

package/components/wd-form/wd-form.vue

@@ -0,0 +1,121 @@
+<template>
+  <view :class="`wd-form ${customClass}`" :style="customStyle">
+    <slot></slot>
+    <wd-toast v-if="props.errorType === 'toast'" selector="wd-form-toast" />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-form',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdToast from '../wd-toast/wd-toast.vue'
+import { reactive, watch } from 'vue'
+import { isArray, isDef } from '../../common/util'
+import { useChildren } from '../../composables/useChildren'
+import { useToast } from '../wd-toast'
+import { FORM_KEY, type ErrorMessage, formProps, type FormExpose, type FormSchemaIssue } from './types'
+
+const { show: showToast } = useToast('wd-form-toast')
+const props = defineProps(formProps)
+
+const { children, linkChildren } = useChildren(FORM_KEY)
+let errorMessages = reactive<Record<string, string>>({})
+
+linkChildren({ props, errorMessages, validate })
+
+watch(
+  () => props.model,
+  () => {
+    if (props.resetOnChange) {
+      clearMessage()
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+/**
+ * 表单校验
+ * @param prop 指定校验字段或字段数组
+ */
+async function validate(prop?: string | string[]): Promise<{ valid: boolean; errors: ErrorMessage[] }> {
+  const propsToValidate = isArray(prop) ? prop : isDef(prop) ? [prop] : []
+  const rawIssues: FormSchemaIssue[] = props.schema ? await Promise.resolve(props.schema.validate(props.model)) : []
+  const errors = rawIssues
+    .filter((issue) => issue.path && issue.path.length > 0 && issue.message)
+    .map((issue) => ({
+      prop: issue.path.map((item) => String(item)).join('.'),
+      message: issue.message
+    }))
+  const filteredErrors =
+    propsToValidate.length > 0
+      ? errors.filter((error) =>
+          propsToValidate.some((target) => error.prop === target || error.prop.startsWith(`${target}.`) || target.startsWith(`${error.prop}.`))
+        )
+      : errors
+  const valid = filteredErrors.length === 0
+
+  showMessage(filteredErrors)
+
+  if (valid) {
+    if (propsToValidate.length) {
+      propsToValidate.forEach(clearMessage)
+    } else {
+      clearMessage()
+    }
+  }
+
+  return {
+    valid,
+    errors: filteredErrors
+  }
+}
+
+function showMessage(errors: ErrorMessage[]) {
+  const childrenProps = children.map((e) => e.prop).filter(Boolean)
+  const messages = errors.filter((error) => error.message && childrenProps.includes(error.prop))
+  if (messages.length) {
+    messages.sort((a, b) => {
+      return childrenProps.indexOf(a.prop) - childrenProps.indexOf(b.prop)
+    })
+    if (props.errorType === 'toast') {
+      showToast(messages[0].message)
+    } else if (props.errorType === 'message') {
+      messages.forEach((error) => {
+        errorMessages[error.prop] = error.message
+      })
+    }
+  }
+}
+
+function clearMessage(prop?: string) {
+  if (prop) {
+    errorMessages[prop] = ''
+  } else {
+    Object.keys(errorMessages).forEach((key) => {
+      errorMessages[key] = ''
+    })
+  }
+}
+
+/**
+ * 重置表单项的验证提示
+ */
+function reset() {
+  clearMessage()
+}
+
+defineExpose<FormExpose>({ validate, reset })
+</script>
+
+<style lang="scss" scoped></style>

package/components/wd-form-item/index.scss

@@ -0,0 +1,26 @@
+@use '../../styles/variable.scss' as *;
+@use '../../styles/mixin/mixin.scss' as *;
+
+// 错误提示文字颜色
+$form-item-error-message-color: var(--wot-form-item-error-message-color, $danger-main) !default;
+// 错误提示文字字号
+$form-item-error-message-font-size: var(--wot-form-item-error-message-font-size, $typography-label-size-main) !default;
+// 错误提示文字行高
+$form-item-error-message-line-height: var(--wot-form-item-error-message-line-height, $typography-label-line--height-size-small) !default;
+// 错误提示顶部外边距
+$form-item-error-message-margin-top: var(--wot-form-item-error-message-margin-top, $spacing-super-tight) !default;
+// 占位符文字颜色
+$form-item-placeholder-color: var(--wot-form-item-placeholder-color, $text-placeholder) !default;
+
+@include b(form-item) {
+  @include e(placeholder) {
+    color: $form-item-placeholder-color;
+  }
+
+  @include e(error-message) {
+    color: $form-item-error-message-color;
+    font-size: $form-item-error-message-font-size;
+    line-height: $form-item-error-message-line-height;
+    margin-top: $form-item-error-message-margin-top;
+  }
+}

package/components/wd-form-item/types.ts

@@ -0,0 +1,134 @@
+import type { ExtractPropTypes, InjectionKey, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp, numericProp } from '../../common/props'
+import { type CellValueAlign, type CellAsteriskPosition, type CellLayout, type CellSize } from '../wd-cell/types'
+import type { FormValidateEvent, FormValidateTrigger } from '../wd-form/types'
+
+export type FormItemValidateProvide = {
+  prop?: string
+  shouldTrigger: (event: FormValidateEvent) => boolean
+  validateByTrigger: (event: FormValidateEvent) => Promise<void>
+}
+
+export const FORM_ITEM_VALIDATE_KEY: InjectionKey<FormItemValidateProvide> = Symbol('wd-form-item-validate')
+
+export const formItemProps = {
+  ...baseProps,
+  /**
+   * 表单域 model 字段名
+   */
+  prop: String,
+  /**
+   * 标题
+   */
+  title: String,
+  /**
+   * 右侧展示值，用于配合 placeholder 判断是否显示占位文字
+   * 类型: string | number
+   */
+  value: numericProp,
+  /**
+   * 值为空时显示的占位文字，需与 value 配合使用
+   * 类型: string
+   */
+  placeholder: String,
+  /**
+   * 前置图标类名
+   */
+  prefixIcon: String,
+  /**
+   * 图标大小
+   */
+  iconSize: numericProp,
+  /**
+   * 类名前缀，用于使用自定义图标
+   */
+  iconPrefix: String,
+  /**
+   * 描述信息
+   */
+  label: String,
+  /**
+   * 是否开启点击反馈
+   */
+  clickable: makeBooleanProp(false),
+  /**
+   * 是否展示右侧箭头并开启点击反馈
+   */
+  isLink: makeBooleanProp(false),
+  // ========== 可继承属性（使用 undefined 默认值）==========
+  /**
+   * 设置单元格大小，可选值：large
+   * 类型: CellSize
+   */
+  size: String as PropType<CellSize>,
+  /**
+   * 是否展示边框线
+   * 类型: boolean
+   */
+  border: makeBooleanProp(void 0),
+  /**
+   * 设置左侧标题宽度
+   * 类型: string | number
+   */
+  titleWidth: numericProp,
+  /**
+   * 是否使内容垂直居中
+   * 类型: boolean
+   */
+  center: makeBooleanProp(void 0),
+  /**
+   * 是否必填
+   * 类型: boolean
+   */
+  required: makeBooleanProp(void 0),
+  /**
+   * 校验触发时机
+   */
+  validateTrigger: [String, Array] as PropType<FormValidateTrigger | FormValidateTrigger[]>,
+  /**
+   * 表单布局方式
+   * 类型: CellLayout
+   * 可选值: 'horizontal' | 'vertical'
+   */
+  layout: String as PropType<CellLayout>,
+  /**
+   * value 文字对齐方式
+   * 类型: CellValueAlign
+   * 可选值: 'left' | 'right' | 'center'
+   */
+  valueAlign: String as PropType<CellValueAlign>,
+  /**
+   * 是否超出隐藏，显示省略号
+   * 类型: boolean
+   */
+  ellipsis: makeBooleanProp(void 0),
+  /**
+   * 必填星号位置
+   * 类型: CellAsteriskPosition
+   * 可选值: 'start' | 'end'
+   */
+  asteriskPosition: String as PropType<CellAsteriskPosition>,
+  /**
+   * 是否隐藏必填星号
+   * 类型: boolean
+   */
+  hideAsterisk: makeBooleanProp(void 0),
+  /**
+   * 前置图标自定义样式类
+   */
+  customPrefixClass: makeStringProp(''),
+  /**
+   * label 使用 slot 时的自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  /**
+   * value 使用 slot 时的自定义样式
+   */
+  customValueClass: makeStringProp(''),
+  /**
+   * title 使用 slot 时的自定义样式
+   */
+  customTitleClass: makeStringProp('')
+}
+
+export type FormItemProps = ExtractPropTypes<typeof formItemProps>

package/components/wd-form-item/wd-form-item.vue

@@ -0,0 +1,182 @@
+<template>
+  <wd-cell
+    :custom-class="`wd-form-item ${customClass}`"
+    :custom-style="customStyle"
+    :use-title-slot="!!$slots.title"
+    :title="title"
+    :title-width="formItemTitleWidth"
+    :prefix-icon="prefixIcon"
+    :icon-size="iconSize"
+    :icon-prefix="iconPrefix"
+    :required="isRequired"
+    :size="formItemSize"
+    :value-align="formItemValueAlign"
+    :center="formItemCenter"
+    :ellipsis="formItemEllipsis"
+    :clickable="clickable"
+    :is-link="isLink"
+    :asterisk-position="formItemAsteriskPosition"
+    :border="formItemBorder"
+    :hide-asterisk="formItemHideAsterisk"
+    :layout="formItemLayout"
+    :custom-prefix-class="customPrefixClass"
+    :custom-label-class="customLabelClass"
+    :custom-title-class="customTitleClass"
+    :custom-value-class="customValueClass"
+    @click="emit('click')"
+  >
+    <template #title v-if="$slots.title">
+      <slot name="title"></slot>
+    </template>
+
+    <slot>
+      <text v-if="showPlaceholder" class="wd-form-item__placeholder">{{ placeholder }}</text>
+      <text v-else-if="isDef(value)">{{ value }}</text>
+    </slot>
+    <view v-if="errorMessage" class="wd-form-item__error-message">{{ errorMessage }}</view>
+  </wd-cell>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-form-item',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue'
+import { useChildren } from '../../composables/useChildren'
+import { useParent } from '../../composables/useParent'
+import WdCell from '../wd-cell/wd-cell.vue'
+import { FORM_KEY, FORM_VALIDATE_EVENTS, type FormValidateEvent, type FormValidateTrigger } from '../wd-form/types'
+import { FORM_ITEM_VALIDATE_KEY, formItemProps } from './types'
+import { getPropByPath, isDef } from '../../common/util'
+
+const props = defineProps(formItemProps)
+
+const { parent: form, index } = useParent(FORM_KEY)
+const { linkChildren } = useChildren(FORM_ITEM_VALIDATE_KEY)
+
+const emit = defineEmits(['click'])
+
+function normalizeValidateTrigger(trigger?: FormValidateTrigger | FormValidateTrigger[]): FormValidateEvent[] {
+  const triggerList = Array.isArray(trigger) ? trigger : trigger ? [trigger] : []
+  return triggerList.filter((item): item is FormValidateEvent => {
+    return FORM_VALIDATE_EVENTS.includes(item as FormValidateEvent)
+  })
+}
+
+const validateTriggerSet = computed(() => {
+  const formTrigger = form.value?.props.validateTrigger
+  const currentTrigger = isDef(props.validateTrigger) ? props.validateTrigger : formTrigger
+  return new Set(normalizeValidateTrigger(currentTrigger))
+})
+
+function shouldTrigger(event: FormValidateEvent): boolean {
+  return validateTriggerSet.value.has(event)
+}
+
+async function validateByTrigger(event: FormValidateEvent): Promise<void> {
+  if (!props.prop || !shouldTrigger(event)) {
+    return
+  }
+  await form.value?.validate?.(props.prop)
+}
+
+const propValue = computed(() => {
+  if (!props.prop) {
+    return undefined
+  }
+  return getPropByPath(form.value?.props.model, props.prop)
+})
+
+watch(
+  () => propValue.value,
+  async () => {
+    await validateByTrigger('change')
+  },
+  {
+    deep: true
+  }
+)
+
+linkChildren({
+  prop: props.prop,
+  shouldTrigger,
+  validateByTrigger
+})
+
+const errorMessage = computed(() => {
+  if (form.value && props.prop && form.value.errorMessages && form.value.errorMessages[props.prop]) {
+    return form.value.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+const formItemBorder = computed(() => {
+  if (isDef(props.border)) {
+    return props.border
+  }
+  if (index.value > 0 && form.value && form.value.props.border) {
+    return true
+  }
+  return false
+})
+
+const formItemCenter = computed(() => {
+  return isDef(props.center) ? props.center : form.value?.props.center
+})
+
+const formItemSize = computed(() => {
+  return isDef(props.size) ? props.size : form.value?.props.size
+})
+
+const formItemTitleWidth = computed(() => {
+  return isDef(props.titleWidth) ? props.titleWidth : form.value?.props.titleWidth || '98px'
+})
+
+const formItemLayout = computed(() => {
+  return isDef(props.layout) ? props.layout : form.value?.props.layout || 'horizontal'
+})
+
+const formItemValueAlign = computed(() => {
+  return isDef(props.valueAlign) ? props.valueAlign : form.value?.props.valueAlign || 'left'
+})
+
+const formItemEllipsis = computed(() => {
+  return isDef(props.ellipsis) ? props.ellipsis : form.value?.props.ellipsis
+})
+
+const formItemAsteriskPosition = computed(() => {
+  return isDef(props.asteriskPosition) ? props.asteriskPosition : form.value?.props.asteriskPosition || 'start'
+})
+
+const formItemHideAsterisk = computed(() => {
+  return isDef(props.hideAsterisk) ? props.hideAsterisk : form.value?.props.hideAsterisk
+})
+
+const showPlaceholder = computed(() => {
+  return Boolean(props.placeholder && (props.value === '' || props.value === undefined || props.value === null))
+})
+
+const isRequired = computed(() => {
+  if (props.required === true) {
+    return true
+  }
+  if (!props.prop || !form.value?.props.schema?.isRequired) {
+    return false
+  }
+  return !!form.value.props.schema.isRequired(props.prop)
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-gap/index.scss

@@ -0,0 +1,9 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+@include b(gap) {
+  @include m(safe) {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}

package/components/wd-gap/types.ts

@@ -0,0 +1,26 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumericProp, makeStringProp } from '../../common/props'
+
+export const gapProps = {
+  ...baseProps,
+  /**
+   * 背景颜色
+   * 类型: string
+   * 默认值: 'transparent'
+   */
+  bgColor: makeStringProp('transparent'),
+  /**
+   * 是否开启底部安全区适配
+   * 类型: boolean
+   * 默认值: false
+   */
+  safeAreaBottom: makeBooleanProp(false),
+  /**
+   * 间隔槽高度，支持传入数值（单位px）或字符串（如 '20rpx'）
+   * 类型: string | number
+   * 默认值: 14
+   */
+  height: makeNumericProp(14)
+}
+
+export type GapProps = ExtractPropTypes<typeof gapProps>

package/components/wd-gap/wd-gap.vue

@@ -0,0 +1,38 @@
+<template>
+  <view :class="`wd-gap ${safeAreaBottom ? 'wd-gap--safe' : ''} ${customClass}`" :style="rootStyle"></view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-gap',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { type CSSProperties, computed } from 'vue'
+import { addUnit, isDef, objToStyle } from '../../common/util'
+import { gapProps } from './types'
+
+const props = defineProps(gapProps)
+
+const rootStyle = computed(() => {
+  const rootStyle: CSSProperties = {}
+  if (isDef(props.bgColor)) {
+    rootStyle['background'] = props.bgColor
+  }
+  if (isDef(props.height)) {
+    rootStyle['height'] = addUnit(props.height)
+  }
+  return `${objToStyle(rootStyle)}${props.customStyle}`
+})
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-grid/index.scss

@@ -0,0 +1,11 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+@include b(grid) {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  height: auto;
+}