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

package/components/wd-cell/index.scss

@@ -0,0 +1,244 @@
+@use '../../styles/variable.scss' as *;
+@use '../../styles/mixin/mixin.scss' as *;
+
+// 单元格背景色
+$cell-bg: var(--wot-cell-bg, $filled-oppo) !default;
+// 单元格激活态背景色
+$cell-bg-active: var(--wot-cell-bg-active, $filled-bottom) !default;
+// 标题文字颜色
+$cell-title-color: var(--wot-cell-title-color, $text-main) !default;
+// 标签文字颜色
+$cell-label-color: var(--wot-cell-label-color, $text-auxiliary) !default;
+// 值文字颜色
+$cell-value-color: var(--wot-cell-value-color, $text-secondary) !default;
+// 图标颜色
+$cell-icon-color: var(--wot-cell-icon-color, $icon-secondary) !default;
+// 主题色
+$cell-theme-color: var(--wot-cell-theme-color, $primary-6) !default;
+// 箭头颜色
+$cell-arrow-color: var(--wot-cell-arrow-color, $icon-auxiliary) !default;
+// 边框颜色
+$cell-border-color: var(--wot-cell-border-color, $border-main) !default;
+// 清除图标颜色
+$cell-clear-color: var(--wot-cell-clear-color, $icon-disabled) !default;
+// 点击态背景色
+$cell-tap-bg: var(--wot-cell-tap-bg, $primary-1) !default;
+// 必填标记颜色
+$cell-required-color: var(--wot-cell-required-color, $danger-main) !default;
+// 占位符颜色
+$cell-placeholder-color: var(--wot-cell-placeholder-color, $text-placeholder) !default;
+// 箭头图标尺寸
+$cell-arrow-size: var(--wot-cell-arrow-size, $n-20) !default;
+// 图标尺寸
+$cell-icon-size: var(--wot-cell-icon-size, $n-20) !default;
+// 标题字号
+$cell-title-font-size: var(--wot-cell-title-font-size, $typography-body-size-main) !default;
+// 标题行高
+$cell-title-line-height: var(--wot-cell-title-line-height, $typography-body-line--height-size-main) !default;
+// 标签字号
+$cell-label-font-size: var(--wot-cell-label-font-size, $typography-body-size-main) !default;
+// 标签行高
+$cell-label-line-height: var(--wot-cell-label-line-height, $typography-body-line--height-size-main) !default;
+// 值字号
+$cell-value-font-size: var(--wot-cell-value-font-size, $typography-body-size-main) !default;
+// 值行高
+$cell-value-line-height: var(--wot-cell-value-line-height, $typography-body-line--height-size-main) !default;
+// 大尺寸值字号
+$cell-value-font-size-large: var(--wot-cell-value-font-size-large, $typography-body-size-extra-large) !default;
+// 大尺寸值行高
+$cell-value-line-height-large: var(--wot-cell-value-line-height-large, $typography-body-line--height-size-extra-large) !default;
+// 大尺寸标题字号
+$cell-title-font-size-large: var(--wot-cell-title-font-size-large, $typography-body-size-extra-large) !default;
+// 大尺寸标题行高
+$cell-title-line-height-large: var(--wot-cell-title-line-height-large, $typography-body-line--height-size-extra-large) !default;
+// 大尺寸标签字号
+$cell-label-font-size-large: var(--wot-cell-label-font-size-large, $typography-body-size-extra-large) !default;
+// 大尺寸标签行高
+$cell-label-line-height-large: var(--wot-cell-label-line-height-large, $typography-body-line--height-size-extra-large) !default;
+// 必填标记字号
+$cell-required-font-size: var(--wot-cell-required-font-size, $typography-body-size-main) !default;
+// 必填标记行高
+$cell-required-line-height: var(--wot-cell-required-line-height, $typography-body-line--height-size-main) !default;
+// 占位符字号
+$cell-placeholder-font-size: var(--wot-cell-placeholder-font-size, $typography-body-size-main) !default;
+// 占位符行高
+$cell-placeholder-line-height: var(--wot-cell-placeholder-line-height, $typography-body-line--height-size-main) !default;
+// 单元格内边距
+$cell-padding: var(--wot-cell-padding, $padding-loose) !default;
+// 大尺寸单元格内边距
+$cell-padding-large: var(--wot-cell-padding-large, $padding-extra-loose) !default;
+// 纵向布局右侧顶部内边距
+$cell-vertical-padding-top: var(--wot-cell-vertical-padding-top, $padding-extra-loose) !default;
+// 必填标记外边距
+$cell-required-margin: var(--wot-cell-required-margin, $padding-super-tight) !default;
+// 前缀图标右侧间距
+$cell-icon-spacing-right: var(--wot-cell-icon-spacing-right, $spacing-super-tight) !default;
+// 水平布局左右区域间距
+$cell-margin-horizontal: var(--wot-cell-margin-horizontal, $spacing-loose) !default;
+// 箭头左侧间距
+$cell-arrow-margin-left: var(--wot-cell-arrow-margin-left, $spacing-tight) !default;
+// 标签顶部间距
+$cell-label-margin-top: var(--wot-cell-label-margin-top, $spacing-super-tight) !default;
+
+@include b(cell) {
+  position: relative;
+  padding: $cell-padding;
+  background: $cell-bg;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
+  box-sizing: border-box;
+  width: 100%;
+
+  @include when(border) {
+    @include halfPixelBorder('top',$cell-padding,$cell-border-color);
+  }
+
+  @include e(wrapper) {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    @include m(vertical) {
+      display: block;
+
+      .wd-cell__right {
+        margin-top: $cell-vertical-padding-top;
+      }
+
+      .wd-cell__value {
+        text-align: left;
+      }
+
+      .wd-cell__left {
+        margin-right: 0;
+      }
+    }
+  }
+
+  @include e(left) {
+    position: relative;
+    flex: 1;
+    display: flex;
+    text-align: left;
+    font-size: $cell-title-font-size;
+    line-height: $cell-title-line-height;
+    box-sizing: border-box;
+  }
+
+  @include e(right) {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+  }
+
+  @include e(title) {
+    font-size: $cell-title-font-size;
+    line-height: $cell-title-line-height;
+    color: $cell-title-color;
+  }
+
+  @include e(required) {
+    font-size: $cell-required-font-size;
+    line-height: $cell-required-line-height;
+    color: $cell-required-color;
+    margin-left: $cell-required-margin;
+
+    @include m(left) {
+      margin-left: 0;
+      margin-right: $cell-required-margin;
+    }
+  }
+
+  @include e(label) {
+    margin-top: $cell-label-margin-top;
+    font-size: $cell-label-font-size;
+    line-height: $cell-label-line-height;
+    color: $cell-label-color;
+  }
+
+  @include edeep(prefix) {
+    display: block;
+    position: relative;
+    margin-right: $cell-icon-spacing-right;
+    font-size: $cell-icon-size;
+    color: $cell-icon-color;
+  }
+
+  @include e(body){
+    display: flex;
+    min-width: 0;
+  }
+
+  @include e(value) {
+    position: relative;
+    flex: 1;
+    font-size: $cell-value-font-size;
+    line-height: $cell-value-line-height;
+    color: $cell-value-color;
+    vertical-align: middle;
+    word-break: break-all;
+    
+    @include m(left) {
+      text-align: left;
+    }
+    
+    @include m(right) {
+      text-align: right;
+    }
+
+    @include m(center) {
+      text-align: center;
+    }
+    
+    @include m(ellipsis) {
+      @include lineEllipsis;
+      min-width: 0;
+    }
+  }
+
+  @include e(placeholder) {
+    color: $cell-placeholder-color;
+    font-size: $cell-placeholder-font-size;
+    line-height: $cell-placeholder-line-height;
+  }
+
+  @include edeep(arrow-right) {
+    display: block;
+    margin-left: $cell-arrow-margin-left;
+    font-size: $cell-arrow-size;
+    color: $cell-arrow-color;
+  }
+
+  @include edeep(suffix) {
+    display: block;
+    margin-left: $cell-arrow-margin-left;
+    font-size: $cell-icon-size;
+    color: $cell-icon-color;
+  }
+
+
+  @include when(link) {
+    -webkit-tap-highlight-color: $cell-bg-active;
+  }
+
+  @include when(hover) {
+    background: $cell-bg-active;
+  }
+
+  @include when(large) {
+    --wot-cell-padding: #{$cell-padding-large};
+    --wot-cell-title-font-size: #{$cell-title-font-size-large};
+    --wot-cell-title-line-height: #{$cell-title-line-height-large};
+    --wot-cell-label-font-size: #{$cell-label-font-size-large};
+    --wot-cell-label-line-height: #{$cell-label-line-height-large};
+    --wot-cell-value-font-size: #{$cell-value-font-size-large};
+    --wot-cell-value-line-height: #{$cell-value-line-height-large};
+  }
+
+  @include when(center) {
+    .wd-cell__wrapper {
+      align-items: center;
+    }
+  }
+}

package/components/wd-cell/types.ts

@@ -0,0 +1,205 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp, makeNumericProp, numericProp } from '../../common/props'
+
+/**
+ * 必填星号位置
+ * 可选值: 'start' | 'end'
+ */
+export type CellAsteriskPosition = 'start' | 'end'
+
+/**
+ * 单元格布局方式
+ * 可选值: 'horizontal' | 'vertical'
+ */
+export type CellLayout = 'horizontal' | 'vertical'
+
+/**
+ * 右侧内容对齐方式
+ * 可选值: 'left' | 'right' | 'center'
+ */
+export type CellValueAlign = 'left' | 'right' | 'center'
+
+/**
+ * 箭头方向
+ * 可选值: 'left' | 'up' | 'down' | 'right'
+ */
+export type CellArrowDirection = 'left' | 'up' | 'down' | 'right'
+
+/**
+ * 单元格大小
+ * 可选值: 'large'
+ */
+export type CellSize = 'large'
+
+export const cellProps = {
+  ...baseProps,
+  /**
+   * 左侧标题
+   * 类型: string
+   */
+  title: String,
+  /**
+   * 右侧内容
+   * 类型: string | number
+   * 默认值: ''
+   */
+  value: makeNumericProp(''),
+  /**
+   * 占位符，仅在 value 为空时显示
+   * 类型: string
+   */
+  placeholder: String,
+  /**
+   * 前置图标类名
+   * 类型: string
+   */
+  prefixIcon: String,
+  /**
+   * 后置图标类名
+   * 类型: string
+   */
+  suffixIcon: String,
+  /**
+   * 图标大小
+   * 类型: string | number
+   */
+  iconSize: numericProp,
+  /**
+   * 图标类名前缀，用于使用自定义图标
+   * 类型: string
+   */
+  iconPrefix: String,
+  /**
+   * 标题下方的描述信息
+   * 类型: string
+   */
+  label: String,
+  /**
+   * 点击后跳转的链接地址
+   * 类型: string
+   */
+  to: String,
+  /**
+   * 跳转时是否替换当前页面历史
+   * 类型: boolean
+   * 默认值: false
+   */
+  replace: makeBooleanProp(false),
+  /**
+   * 是否开启点击反馈
+   * 类型: boolean
+   * 默认值: false
+   */
+  clickable: makeBooleanProp(false),
+  /**
+   * 是否展示右侧箭头并开启点击反馈
+   * 类型: boolean
+   * 默认值: false
+   */
+  isLink: makeBooleanProp(false),
+  /**
+   * 单元格大小
+   * 类型: CellSize
+   * 可选值: 'large'
+   */
+  size: String as PropType<CellSize>,
+  /**
+   * 是否显示内边框
+   * 类型: boolean
+   * 默认值: 继承自 CellGroup
+   */
+  border: makeBooleanProp(void 0),
+  /**
+   * 左侧标题宽度
+   * 类型: string | number
+   */
+  titleWidth: numericProp,
+  /**
+   * 是否垂直居中
+   * 类型: boolean
+   * 默认值: 继承自 CellGroup
+   */
+  center: makeBooleanProp(void 0),
+  /**
+   * 是否显示表单必填星号
+   * 类型: boolean
+   * 默认值: false
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 单元格布局方式
+   * 类型: CellLayout
+   * 可选值: 'horizontal' | 'vertical'
+   */
+  layout: String as PropType<CellLayout>,
+  /**
+   * 右侧内容对齐方式
+   * 类型: CellValueAlign
+   * 可选值: 'left' | 'right' | 'center'
+   */
+  valueAlign: String as PropType<CellValueAlign>,
+  /**
+   * 是否超出隐藏显示省略号
+   * 类型: boolean
+   * 默认值: false
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * 是否启用 title 插槽
+   * 类型: boolean
+   * 默认值: true
+   */
+  useTitleSlot: makeBooleanProp(true),
+  /**
+   * 必填星号位置
+   * 类型: CellAsteriskPosition
+   * 可选值: 'start' | 'end'
+   * 默认值: 'start'
+   */
+  asteriskPosition: makeStringProp<CellAsteriskPosition>('start'),
+  /**
+   * 是否隐藏必填星号
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideAsterisk: makeBooleanProp(false),
+  /**
+   * 箭头方向，仅在 isLink 为 true 时生效
+   * 类型: CellArrowDirection
+   * 可选值: 'left' | 'up' | 'down' | 'right'
+   * 默认值: 'right'
+   */
+  arrowDirection: makeStringProp<CellArrowDirection>('right'),
+  /**
+   * 前置图标自定义样式类
+   * 类型: string
+   * 默认值: ''
+   */
+  customPrefixClass: makeStringProp(''),
+  /**
+   * 后置图标自定义样式类
+   * 类型: string
+   * 默认值: ''
+   */
+  customSuffixClass: makeStringProp(''),
+  /**
+   * label 插槽的自定义样式类
+   * 类型: string
+   * 默认值: ''
+   */
+  customLabelClass: makeStringProp(''),
+  /**
+   * value 插槽的自定义样式类
+   * 类型: string
+   * 默认值: ''
+   */
+  customValueClass: makeStringProp(''),
+  /**
+   * title 插槽的自定义样式类
+   * 类型: string
+   * 默认值: ''
+   */
+  customTitleClass: makeStringProp('')
+}
+
+export type CellProps = ExtractPropTypes<typeof cellProps>

package/components/wd-cell/wd-cell.vue

@@ -0,0 +1,172 @@
+<template>
+  <view
+    :class="['wd-cell', isBorder ? 'is-border' : '', cellSize ? 'is-' + cellSize : '', isCenter ? 'is-center' : '', customClass]"
+    :style="customStyle"
+    :hover-class="isLink || clickable ? 'is-hover' : 'none'"
+    :hover-stay-time="70"
+    @click="onClick"
+  >
+    <view :class="`wd-cell__wrapper wd-cell__wrapper--${cellLayout}`">
+      <view
+        v-if="showLeft"
+        class="wd-cell__left"
+        :style="cellTitleWidth ? 'min-width:' + addUnit(cellTitleWidth) + ';max-width:' + addUnit(cellTitleWidth) + ';' : ''"
+      >
+        <text v-if="required && !hideAsterisk && asteriskPosition === 'start'" class="wd-cell__required wd-cell__required--left">*</text>
+        <!--前置图标-->
+        <slot name="prefix">
+          <wd-icon
+            v-if="prefixIcon"
+            :name="prefixIcon"
+            :size="iconSize"
+            :class-prefix="iconPrefix"
+            :custom-class="`wd-cell__prefix ${customPrefixClass}`"
+          ></wd-icon>
+        </slot>
+
+        <view class="wd-cell__title">
+          <!--title BEGIN-->
+          <slot v-if="useTitleSlot && $slots.title" name="title"></slot>
+          <text v-else-if="title" :class="customTitleClass">{{ title }}</text>
+
+          <!--title END-->
+
+          <!--label BEGIN-->
+          <slot name="label">
+            <view v-if="label" :class="`wd-cell__label ${customLabelClass}`">{{ label }}</view>
+          </slot>
+          <!--label END-->
+        </view>
+        <text v-if="required && !hideAsterisk && asteriskPosition === 'end'" class="wd-cell__required">*</text>
+      </view>
+      <!--right content BEGIN-->
+      <view class="wd-cell__right">
+        <view class="wd-cell__body">
+          <!--文案内容-->
+          <view
+            :class="`wd-cell__value ${customValueClass} wd-cell__value--${cellValueAlign} ${ellipsis ? 'wd-cell__value--ellipsis' : ''} ${
+              showPlaceholder ? 'wd-cell__placeholder' : ''
+            }`"
+          >
+            <slot>
+              {{ showPlaceholder ? placeholder : value }}
+            </slot>
+          </view>
+          <!--后置图标/箭头-->
+          <wd-icon v-if="isLink" custom-class="wd-cell__arrow-right" :name="arrowDirection" :class-prefix="iconPrefix" />
+          <slot v-else name="suffix">
+            <wd-icon
+              v-if="suffixIcon"
+              :name="suffixIcon"
+              :size="iconSize"
+              :class-prefix="iconPrefix"
+              :custom-class="`wd-cell__suffix ${customSuffixClass}`"
+            ></wd-icon>
+          </slot>
+        </view>
+      </view>
+      <!--right content END-->
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-cell',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, useSlots } from 'vue'
+import { useCell } from '../../composables/useCell'
+
+import { cellProps } from './types'
+import { addUnit, isDef } from '../../common/util'
+
+const props = defineProps(cellProps)
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+// 获取插槽
+const slots = useSlots()
+
+const cell = useCell()
+
+const isBorder = computed(() => {
+  return Boolean(isDef(props.border) ? props.border : cell.border.value)
+})
+
+// 支持 cell-group 公共配置，子组件属性优先
+const isCenter = computed(() => {
+  return isDef(props.center) ? props.center : cell.center?.value
+})
+
+// 支持 cell-group 公共配置，子组件属性优先
+const cellSize = computed(() => {
+  return isDef(props.size) ? props.size : cell.size?.value
+})
+
+// 支持 cell-group 公共配置，子组件属性优先
+const cellTitleWidth = computed(() => {
+  return isDef(props.titleWidth) ? props.titleWidth : cell.titleWidth?.value
+})
+
+// 支持 cell-group 公共配置，子组件属性优先
+const cellLayout = computed(() => {
+  return isDef(props.layout) ? props.layout : cell.layout?.value || 'horizontal'
+})
+
+// 支持 cell-group 公共配置，子组件属性优先
+const cellValueAlign = computed(() => {
+  return isDef(props.valueAlign) ? props.valueAlign : cell.valueAlign?.value || 'right'
+})
+
+// 是否展示左侧部分
+const showLeft = computed(() => {
+  // 插槽优先级高于props
+  // 有prefix插槽或prefixIcon属性
+  const hasPrefix = slots.prefix || props.prefixIcon
+  // 有title插槽或title属性
+  const hasTitle = (slots.title && props.useTitleSlot) || props.title
+  // 有label插槽或label属性
+  const hasLabel = slots.label || props.label
+
+  return hasPrefix || hasTitle || hasLabel
+})
+
+const showPlaceholder = computed(() => {
+  return Boolean(props.placeholder && (props.value === '' || props.value === undefined || props.value === null) && !slots.default)
+})
+
+/**
+ * 点击单元格时触发
+ * 处理点击事件和页面跳转
+ */
+function onClick() {
+  const url = props.to
+
+  if (props.clickable || props.isLink) {
+    emit('click')
+  }
+  if (url && props.isLink) {
+    if (props.replace) {
+      uni.redirectTo({ url })
+    } else {
+      uni.navigateTo({ url })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-cell-group/index.scss

@@ -0,0 +1,53 @@
+@use '../../styles/variable.scss' as *;
+@use '../../styles/mixin/mixin.scss' as *;
+
+// 单元格组背景色
+$cell-group-bg: var(--wot-cell-group-bg, $filled-oppo) !default;
+// 标题区域内边距
+$cell-group-padding: var(--wot-cell-group-padding, $padding-loose) !default;
+// 标题文字字重
+$cell-group-font-weight: var(--wot-cell-group-font-weight, $font-weight-medium) !default;
+// 标题文字颜色
+$cell-group-title-color: var(--wot-cell-group-title-color, $text-main) !default;
+// 右侧辅助文字颜色
+$cell-group-value-color: var(--wot-cell-group-value-color, $text-secondary) !default;
+// 右侧辅助文字字号
+$cell-group-value-font-size: var(--wot-cell-group-value-font-size, $typography-body-size-main) !default;
+// 标题文字字号
+$cell-group-title-font-size: var(--wot-cell-group-title-font-size, $typography-body-size-main) !default;
+// 插入模式圆角
+$cell-group-insert-radius: var(--wot-cell-group-insert-radius, $radius-large) !default;
+// 插入模式外边距
+$cell-group-insert-margin: var(--wot-cell-group-insert-margin, $spacing-zero $spacing-extra-loose) !default;
+
+@include b(cell-group) {
+  background: $cell-group-bg;
+
+  @include when(border) {
+    .wd-cell-group__title {
+      @include halfPixelBorder;
+    }
+  }
+  @include e(title) {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    padding: $cell-group-padding;
+    background: $cell-group-bg;
+    font-size: $cell-group-title-font-size;
+    color: $cell-group-title-color;
+    font-weight: $cell-group-font-weight;
+  }
+  @include e(right) {
+    color: $cell-group-value-color;
+    font-size: $cell-group-value-font-size;
+  }
+  @include e(body) {
+    background: $cell-group-bg;
+  }
+  @include m(insert) {
+    border-radius: $cell-group-insert-radius;
+    overflow: hidden;
+    margin: $cell-group-insert-margin;
+  }
+}