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

package/components/wd-segmented/index.scss

@@ -0,0 +1,155 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 组件背景色
+$segmented-bg: var(--wot-segmented-bg, $filled-content) !default;
+// 组件边框宽度
+$segmented-border-width: var(--wot-segmented-border-width, $stroke-main) !default;
+// 组件内边距
+$segmented-padding: var(--wot-segmented-padding, $padding-super-tight) !default;
+// 组件圆角
+$segmented-radius: var(--wot-segmented-radius, $radius-main) !default;
+// 选项文字颜色
+$segmented-item-color: var(--wot-segmented-item-color, $text-secondary) !default;
+// 选项文字字号
+$segmented-item-font-size: var(--wot-segmented-item-font-size, $typography-body-size-extra-large) !default;
+// 选项文字行高
+$segmented-item-line-height: var(--wot-segmented-item-line-height, $typography-body-line--height-size-extra-large) !default;
+// 选项内边距
+$segmented-item-padding: var(--wot-segmented-item-padding, $padding-ultra-tight $padding-loose) !default;
+// 选项文字字重
+$segmented-item-font-weight: var(--wot-segmented-item-font-weight, $font-weight-regular) !default;
+// 选项激活字重
+$segmented-item-font-weight-active: var(--wot-segmented-item-font-weight-active, $font-weight-medium) !default;
+// 选项激活背景色
+$segmented-item-bg-active: var(--wot-segmented-item-bg-active, $filled-oppo) !default;
+// 选项激活文字颜色
+$segmented-item-color-active: var(--wot-segmented-item-color-active, $primary-6) !default;
+// 选项禁用透明度
+$segmented-item-disabled-opacity: var(--wot-segmented-item-disabled-opacity, $opacity-disabled) !default;
+// 轮廓模式边框颜色
+$segmented-outline-border-color: var(--wot-segmented-outline-border-color, $border-main) !default;
+// 轮廓模式圆角
+$segmented-outline-radius: var(--wot-segmented-outline-radius, $radius-zero) !default;
+// 轮廓模式背景色
+$segmented-outline-bg: var(--wot-segmented-outline-bg, $filled-zero) !default;
+// 轮廓模式内边距
+$segmented-outline-padding: var(--wot-segmented-outline-padding, $padding-zero) !default;
+// 轮廓模式选项内边距
+$segmented-outline-item-padding: var(--wot-segmented-outline-item-padding, $padding-extra-tight $padding-extra-loose) !default;
+// 轮廓模式选项文字颜色
+$segmented-outline-item-color: var(--wot-segmented-outline-item-color, $text-secondary) !default;
+// 轮廓模式选项激活背景色
+$segmented-outline-item-bg-active: var(--wot-segmented-outline-item-bg-active, $primary-6) !default;
+// 轮廓模式选项激活文字颜色
+$segmented-outline-item-color-active: var(--wot-segmented-outline-item-color-active, $text-white) !default;
+// 轮廓模式选项禁用文字颜色
+$segmented-outline-item-disabled-color: var(--wot-segmented-outline-item-disabled-color, $text-disabled) !default;
+// 轮廓模式选项激活禁用背景色
+$segmented-outline-item-bg-active-disabled: var(--wot-segmented-outline-item-bg-active-disabled, $filled-content) !default;
+
+@include b(segmented) {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-items: flex-start;
+  width: 100%;
+  padding: $segmented-padding;
+  background-color: $segmented-bg;
+  border-radius: $segmented-radius;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  @include e(item) {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    min-width: 0;
+    padding: $segmented-item-padding;
+    font-size: $segmented-item-font-size;
+    line-height: $segmented-item-line-height;
+    font-weight: $segmented-item-font-weight;
+    color: $segmented-item-color;
+    text-align: center;
+    border-radius: $segmented-radius;
+
+    @include when(active) {
+      font-weight: $segmented-item-font-weight-active;
+      color: $segmented-item-color-active;
+    }
+
+    @include when(disabled) {
+      cursor: no-drop;
+      opacity: $segmented-item-disabled-opacity;
+    }
+  }
+
+  @include e(slider) {
+    position: absolute;
+    top: $segmented-padding;
+    left: $segmented-padding;
+    height: calc(100% - #{$segmented-padding} * 2);
+    background: $segmented-item-bg-active;
+    border-radius: $segmented-radius;
+  }
+
+  @include m(outline) {
+    position: relative;
+    background: $segmented-outline-bg;
+    padding: $segmented-outline-padding;
+
+    @include me(item) {
+      color: $segmented-outline-item-color;
+      padding: $segmented-outline-item-padding;
+      border-radius: $segmented-outline-radius;
+      opacity: 1;
+
+      @include when(active) {
+        color: $segmented-outline-item-color-active;
+        background: $segmented-outline-item-bg-active;
+        border: none;
+
+        &.is-disabled {
+          background: $segmented-outline-item-bg-active-disabled;
+        }
+      }
+
+      @include when(disabled) {
+        color: $segmented-outline-item-disabled-color;
+      }
+    }
+
+    .wd-segmented__item+.wd-segmented__item {
+      border-left: $segmented-border-width solid $segmented-outline-border-color;
+    }
+
+    @include me(slider) {
+      display: none;
+    }
+
+    &::before {
+      position: absolute;
+      display: block;
+      content: " ";
+      pointer-events: none;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      box-sizing: border-box;
+      border: $segmented-border-width solid $segmented-outline-border-color;
+      border-radius: $segmented-radius;
+      transform: none;
+      z-index: 2;
+    }
+  }
+
+  @include e(item-label) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}

package/components/wd-segmented/types.ts

@@ -0,0 +1,81 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../../common/props'
+
+/**
+ * 分段器主题类型
+ */
+export type SegmentedTheme = 'card' | 'outline'
+
+/**
+ * 分段器选项接口
+ */
+export interface SegmentedOption {
+  /** 选项值 */
+  value: string | number
+  /** 是否禁用该选项 */
+  disabled?: boolean
+  /** 自定义数据，可用于插槽渲染 */
+  payload?: any
+}
+
+export const segmentedProps = {
+  ...baseProps,
+
+  /**
+   * 当前选中的值
+   * 类型: string | number
+   * 必需: 是
+   */
+  value: makeRequiredProp([String, Number]),
+
+  /**
+   * 是否禁用分段器
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 数据集合
+   * 类型: string[] | number[] | SegmentedOption[]
+   * 必需: 是
+   * 默认值: []
+   */
+  options: {
+    type: Array as PropType<string[] | number[] | SegmentedOption[]>,
+    required: true,
+    default: () => []
+  },
+
+  /**
+   * 分段器主题样式
+   * 类型: string
+   * 可选值: 'card' | 'outline'
+   * 默认值: 'card'
+   */
+  theme: makeStringProp('card'),
+
+  /**
+   * 切换选项时是否触发振动反馈
+   * 类型: boolean
+   * 默认值: false
+   */
+  vibrateShort: makeBooleanProp(false)
+}
+
+/**
+ * 分段器组件暴露的方法
+ */
+export type SegmentedExpose = {
+  /**
+   * 更新滑块偏移量和样式
+   * @param animation 是否启用过渡动画，默认为 true
+   */
+  updateActiveStyle: (animation?: boolean) => void
+}
+
+/** 分段器组件 Props 类型 */
+export type SegmentedProps = ExtractPropTypes<typeof segmentedProps>
+
+/** 分段器组件实例类型 */
+export type SegmentedInstance = ComponentPublicInstance<SegmentedProps, SegmentedExpose>

package/components/wd-segmented/wd-segmented.vue

@@ -0,0 +1,169 @@
+<template>
+  <view :class="`wd-segmented ${theme ? `wd-segmented--${theme}` : ''} ${customClass}`" :style="customStyle">
+    <view
+      :class="`wd-segmented__item ${state.activeIndex === index ? 'is-active' : ''} ${
+        disabled || (isObj(option) ? option.disabled : false) ? 'is-disabled' : ''
+      }`"
+      @click="handleClick(option, index)"
+      v-for="(option, index) in options"
+      :key="index"
+    >
+      <view class="wd-segmented__item-label">
+        <slot name="label" v-if="$slots.label" :option="isObj(option) ? option : { value: option }"></slot>
+        <template v-else>
+          {{ isObj(option) ? option.value : option }}
+        </template>
+      </view>
+    </view>
+    <view :class="`wd-segmented__slider ${activeDisabled ? 'is-disabled' : ''}`" :style="state.activeStyle" v-if="theme === 'card'"></view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-segmented',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, onMounted, reactive, watch } from 'vue'
+import { getRect, isObj, objToStyle, addUnit, pause, isEqual } from '../../common/util'
+import type { CSSProperties } from 'vue'
+import { segmentedProps, type SegmentedExpose, type SegmentedOption } from './types'
+/** 分段器选项元素的选择器 */
+const $item = '.wd-segmented__item'
+
+const props = defineProps(segmentedProps)
+const emit = defineEmits(['update:value', 'change', 'click'])
+
+/**
+ * 组件内部状态
+ */
+const state = reactive({
+  /** 当前选中项的索引 */
+  activeIndex: 0,
+  /** 滑块的样式字符串 */
+  activeStyle: ''
+})
+
+/**
+ * 当前激活项是否处于禁用状态
+ * 检查全局禁用或第一个选项的禁用状态
+ */
+const activeDisabled = computed(() => {
+  return props.disabled || (props.options[0] && isObj(props.options[0]) ? props.options[0].disabled : false)
+})
+
+watch(
+  () => props.value,
+  () => {
+    updateCurrentIndex()
+    updateActiveStyle()
+    if (props.vibrateShort) {
+      uni.vibrateShort({})
+    }
+  },
+  {
+    immediate: false
+  }
+)
+
+const { proxy } = getCurrentInstance() as any
+
+onMounted(async () => {
+  updateCurrentIndex()
+  await pause()
+  updateActiveStyle(false)
+})
+
+/**
+ * 更新滑块的位置和样式
+ * 仅在 card 主题下执行,outline 主题下滑块隐藏无需更新
+ * @param {boolean} animation 是否启用过渡动画,默认为 true
+ */
+function updateActiveStyle(animation: boolean = true) {
+  // outline 模式下滑块隐藏，无需计算样式
+  if (props.theme === 'outline') {
+    return
+  }
+
+  getRect($item, true, proxy).then((rects) => {
+    const rect = rects[state.activeIndex]
+    const style: CSSProperties = {
+      position: 'absolute',
+      width: addUnit(rect.width!),
+      'z-index': 0
+    }
+    const left = rects.slice(0, state.activeIndex).reduce((prev, curr) => prev + Number(curr.width), 0)
+    if (left) {
+      style.transform = `translateX(${left}px)`
+    }
+    if (animation) {
+      style.transition = 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)'
+    }
+    state.activeStyle = objToStyle(style)
+  })
+}
+
+/**
+ * 更新选中值并触发相应事件
+ * @param {string | number} newValue 新的选中值
+ * @param {string | number | SegmentedOption} option 对应的选项数据
+ */
+function updateValue(newValue: string | number, option: string | number | SegmentedOption) {
+  if (!isEqual(newValue, props.value)) {
+    emit('update:value', newValue)
+    emit('change', isObj(option) ? option : { value: newValue })
+  }
+}
+
+/**
+ * 根据当前值更新激活项的索引
+ * 如果未找到匹配项,则默认选中第一项
+ */
+function updateCurrentIndex() {
+  const index = props.options.findIndex((option: string | number | SegmentedOption) => {
+    const value = isObj(option) ? option.value : option
+    return isEqual(value, props.value)
+  })
+  if (index >= 0) {
+    state.activeIndex = index
+  } else {
+    const value = isObj(props.options[0]) ? props.options[0].value : props.options[0]
+    updateValue(value, props.options[0])
+  }
+}
+
+/**
+ * 处理选项点击事件
+ * @param {string | number | SegmentedOption} option 被点击的选项
+ * @param {number} index 选项索引
+ */
+function handleClick(option: string | number | SegmentedOption, index: number) {
+  const disabled = props.disabled || (isObj(option) ? option.disabled : false)
+  if (disabled) {
+    return
+  }
+  const value = isObj(option) ? option.value : option
+
+  state.activeIndex = index
+  updateActiveStyle()
+  updateValue(value, option)
+  emit('click', isObj(option) ? option : { value })
+}
+
+defineExpose<SegmentedExpose>({
+  updateActiveStyle
+})
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-select-picker/index.scss

@@ -0,0 +1,72 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 选择器背景色
+$select-picker-bg: var(--wot-select-picker-bg, $filled-oppo) !default;
+// loading 状态下透明度
+$select-picker-loading-opacity: var(--wot-select-picker-loading-opacity, $opacity-disabled) !default;
+// loading 图标尺寸
+$select-picker-loading-icon-size: var(--wot-select-picker-loading-icon-size, $n-48) !default;  
+// 内容区水平内边距
+$select-picker-wrapper-padding-horizontal: var(--wot-select-picker-wrapper-padding-horizontal, $padding-main) !default;
+// 内容区最大高度
+$select-picker-wrapper-max-height: var(--wot-select-picker-wrapper-max-height, $n-375) !default;
+// 选中态文字颜色
+$select-picker-text-active-color: var(--wot-select-picker-text-active-color, $primary-6) !default;
+// 底部内边距
+$select-picker-footer-padding: var(--wot-select-picker-footer-padding, $padding-tight $padding-loose) !default;
+// 确认区域上边框颜色
+$select-picker-footer-border-color: var(--wot-select-picker-footer-border-color, $border-light) !default;
+
+@include b(select-picker) {
+  @include e(loading) {
+    position: absolute;
+    display: flex;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+  }
+
+  @include edeep(loading-icon){
+    opacity: 1;
+    font-size: $select-picker-loading-icon-size;
+  }
+
+  @include edeep(popup) {
+    background: $select-picker-bg;
+  }
+
+  @include e(wrapper) {
+    padding: 0 $select-picker-wrapper-padding-horizontal;
+    position: relative;
+    height: $select-picker-wrapper-max-height;
+    box-sizing: border-box;
+    overflow: auto;
+
+    @include when(loading) {
+      overflow: hidden;
+      .wd-select-picker__checkbox,
+      .wd-select-picker__radio{
+        opacity: $select-picker-loading-opacity;
+      }
+    }
+  }
+  @include e(text-active) {
+    color: $select-picker-text-active-color;
+  }
+
+  @include edeep(radio-label,checkbox-label) {
+    @include lineEllipsis;
+  } 
+
+  @include e(footer) {
+    display: flex;
+    align-items: center;
+    padding: $select-picker-footer-padding;
+    @include pixelBorder(top, 0, $select-picker-footer-border-color);
+  }
+}

package/components/wd-select-picker/types.ts

@@ -0,0 +1,72 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../../common/props'
+
+export type SelectPickerType = 'checkbox' | 'radio'
+
+export const selectPickerProps = {
+  ...baseProps,
+  /** 弹出层标题 */
+  title: String,
+  /** 选中的颜色（单/复选框） */
+  checkedColor: String,
+  /** 最小选中的数量（仅在复选框类型下生效，`type`类型为`checkbox`） */
+  min: makeNumberProp(0),
+  /** 最大选中的数量，0 为无限数量，默认为 0（仅在复选框类型下生效，`type`类型为`checkbox`） */
+  max: makeNumberProp(0),
+  /** 设置 picker 内部的选项组尺寸大小 （单/复选框） */
+  selectSize: String,
+  /** 加载中 */
+  loading: makeBooleanProp(false),
+  /** 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 */
+  loadingColor: makeStringProp('#4D80F0'),
+  /** 点击遮罩是否关闭 */
+  closeOnClickModal: makeBooleanProp(true),
+  /** 选中项，`type`类型为`checkbox`时，类型为 array；`type`为`radio` 时 ，类型为 number / boolean / string */
+  modelValue: makeRequiredProp([String, Number, Boolean, Array] as PropType<string | number | boolean | (string | number | boolean)[]>),
+  /** 选择器数据，一维数组 */
+  columns: makeArrayProp<Record<string, any>>(),
+  /** 单复选选择器类型 */
+  type: makeStringProp<SelectPickerType>('checkbox'),
+  /** 选项对象中，value 对应的 key */
+  valueKey: makeStringProp('value'),
+  /** 选项对象中，展示的文本对应的 key */
+  labelKey: makeStringProp('label'),
+  /** 确认按钮文案 */
+  confirmButtonText: String,
+  /** 确定前校验函数，接收 (value) 参数，返回 boolean 或 Promise<boolean> */
+  beforeConfirm: Function as PropType<SelectPickerBeforeConfirm>,
+  /** 弹窗层级 */
+  zIndex: makeNumberProp(15),
+  /** 弹出面板是否设置底部安全距离（iphone X 类型的机型） */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /** 可搜索（目前只支持本地搜索） */
+  filterable: makeBooleanProp(false),
+  /** 搜索框占位符 */
+  filterPlaceholder: String,
+  /** 重新打开是否滚动到选中项 */
+  scrollIntoView: makeBooleanProp(true),
+  /** 自定义内容样式类 */
+  customContentClass: makeStringProp(''),
+  /** 是否显示确认按钮（radio类型生效），默认值为：true */
+  showConfirm: makeBooleanProp(true),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 控制弹窗显示
+   */
+  visible: makeBooleanProp(false)
+}
+export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps>
+
+export type SelectPickerBeforeConfirm = (value: string | number | boolean | (string | number | boolean)[]) => boolean | Promise<boolean>
+
+export type SelectPickerExpose = {
+  // 打开picker弹框
+  open: () => void
+  // 关闭picker弹框
+  close: () => void
+}
+
+export type SelectPickerInstance = ComponentPublicInstance<SelectPickerExpose, SelectPickerProps>