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

package/components/wd-action-sheet/index.scss

@@ -0,0 +1,232 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 底部弹层背景色
+$action-sheet-bg: var(--wot-action-sheet-bg, $filled-oppo) !default;
+// 底部弹层圆角
+$action-sheet-radius: var(--wot-action-sheet-radius, $radius-large) !default;
+// 操作项背景色
+$action-sheet-action-bg: var(--wot-action-sheet-action-bg, $filled-oppo) !default;
+// 操作项字体大小
+$action-sheet-action-font-size: var(--wot-action-sheet-action-font-size, $typography-title-size-main) !default;
+// 操作项行高
+$action-sheet-action-line-height: var(--wot-action-sheet-action-line-height, $typography-title-line--height-size-main) !default;
+// 操作项文字颜色
+$action-sheet-action-color: var(--wot-action-sheet-action-color, $text-main) !default;
+// 操作项内边距
+$action-sheet-action-padding: var(--wot-action-sheet-action-padding, $padding-extra-loose $padding-loose) !default;
+// 取消按钮与操作项的间隔背景色
+$action-sheet-gap-bg: var(--wot-action-sheet-gap-bg, $filled-bottom) !default;
+// 取消按钮背景色
+$action-sheet-cancel-bg: var(--wot-action-sheet-cancel-bg, $filled-oppo) !default;
+// 取消按钮字体大小
+$action-sheet-cancel-font-size: var(--wot-action-sheet-cancel-font-size, $typography-title-size-main) !default;
+// 取消按钮行高
+$action-sheet-cancel-line-height: var(--wot-action-sheet-cancel-line-height, $typography-title-line--height-size-main) !default;
+// 取消按钮文字颜色
+$action-sheet-cancel-color: var(--wot-action-sheet-cancel-color, $text-main) !default;
+// 取消按钮内边距
+$action-sheet-cancel-padding: var(--wot-action-sheet-cancel-padding, $padding-extra-loose $padding-loose) !default;
+// 取消按钮顶部外边距
+$action-sheet-gap-height: var(--wot-action-sheet-gap-height, $spacing-tight) !default;
+// 描述文本字体大小
+$action-sheet-description-font-size: var(--wot-action-sheet-description-font-size, $typography-body-size-main) !default;
+// 描述文本行高
+$action-sheet-description-line-height: var(--wot-action-sheet-description-line-height, $typography-body-line--height-size-main) !default;
+// 描述文本颜色
+$action-sheet-description-color: var(--wot-action-sheet-description-color, $text-auxiliary) !default;
+// 描述文本顶部外边距
+$action-sheet-description-margin-top: var(--wot-action-sheet-description-margin-top, $spacing-tight) !default;
+// 面板区域背景色
+$action-sheet-panel-bg: var(--wot-action-sheet-panel-bg, $filled-oppo) !default;
+// 面板容器内边距
+$action-sheet-panels-wrap-padding: var(--wot-action-sheet-panels-wrap-padding, $padding-main $padding-zero) !default;
+// 面板列表内边距
+$action-sheet-panels-padding: var(--wot-action-sheet-panels-padding, $padding-zero $padding-main) !default;
+// 单个面板宽度
+$action-sheet-panel-width: var(--wot-action-sheet-panel-width, $n-88) !default;
+// 单个面板内边距
+$action-sheet-panel-padding: var(--wot-action-sheet-panel-padding, $padding-main $padding-zero) !default;
+// 面板图片尺寸
+$action-sheet-panel-img-size: var(--wot-action-sheet-panel-img-size, $n-24) !default;
+// 面板图片外边距
+$action-sheet-panel-img-spacing: var(--wot-action-sheet-panel-img-spacing, $spacing-zero auto $spacing-tight) !default;
+// 面板图片圆角
+$action-sheet-panel-img-radius: var(--wot-action-sheet-panel-img-radius, $radius-main) !default;
+// 面板标题字体大小
+$action-sheet-panel-title-font-size: var(--wot-action-sheet-panel-title-font-size, $typography-label-size-main) !default;
+// 面板标题行高
+$action-sheet-panel-title-line-height: var(--wot-action-sheet-panel-title-line-height, $typography-label-line--height-size-main) !default;
+// 面板标题颜色
+$action-sheet-panel-title-color: var(--wot-action-sheet-panel-title-color, $text-auxiliary) !default;
+// 标题背景色
+$action-sheet-title-bg: var(--wot-action-sheet-title-bg, $filled-oppo) !default;
+// 标题文字颜色
+$action-sheet-title-color: var(--wot-action-sheet-title-color, $text-main) !default;
+// 标题区域高度
+$action-sheet-title-height: var(--wot-action-sheet-title-height, $n-56) !default;
+// 标题字体大小
+$action-sheet-title-font-size: var(--wot-action-sheet-title-font-size, $typography-title-size-main) !default;
+// 标题行高
+$action-sheet-title-line-height: var(--wot-action-sheet-title-line-height, $typography-title-line--height-size-main) !default;
+// 标题字重
+$action-sheet-title-font-weight: var(--wot-action-sheet-title-font-weight, $font-weight-medium) !default;
+// 关闭图标右侧偏移
+$action-sheet-close-right: var(--wot-action-sheet-close-right, $spacing-loose) !default;
+// 关闭图标颜色
+$action-sheet-close-color: var(--wot-action-sheet-close-color, $icon-secondary) !default;
+// 关闭图标尺寸
+$action-sheet-close-font-size: var(--wot-action-sheet-close-font-size, $n-24) !default;
+// 激活态背景色
+$action-sheet-active-bg: var(--wot-action-sheet-active-bg, $filled-content) !default;
+// 禁用态文字颜色
+$action-sheet-disabled-color: var(--wot-action-sheet-disabled-color, $text-disabled) !default;
+// 加载图标尺寸
+$action-sheet-loading-size: var(--wot-action-sheet-loading-size, $n-20) !default;
+
+@include b(action-sheet-wrapper) {
+  @include edeep(popup) {
+    border-radius: $action-sheet-radius $action-sheet-radius 0 0;
+  }
+}
+
+@include b(action-sheet) {
+  background: $action-sheet-bg;
+  border-radius: $action-sheet-radius $action-sheet-radius 0 0;
+  overflow: hidden;
+
+  @include e(actions) {
+    max-height: 50vh;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  @include e(action) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: $action-sheet-action-font-size;
+    line-height: $action-sheet-action-line-height;
+    color: $action-sheet-action-color;
+    background: $action-sheet-action-bg;
+    padding: $action-sheet-action-padding;
+    box-sizing: border-box;
+    
+    @include when(border){
+      @include pixelBorder;
+    }
+
+    &:not(&--disabled):not(&--loading):active {
+      background: $action-sheet-active-bg;
+    }
+
+    @include m(disabled) {
+      color: $action-sheet-disabled-color;
+      cursor: not-allowed;
+    }
+
+    @include m(loading) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: initial;
+    }
+  }
+
+  @include edeep(action-loading) {
+    width: $action-sheet-loading-size;
+    height: $action-sheet-loading-size;
+  }
+
+  @include e(description) {
+    margin-top: $action-sheet-description-margin-top;
+    font-size: $action-sheet-description-font-size;
+    line-height: $action-sheet-description-line-height;
+    color: $action-sheet-description-color;
+  }
+
+  @include e(gap) {
+    height: $action-sheet-gap-height;
+    background: $action-sheet-gap-bg;
+  }
+
+  @include e(cancel) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    background: $action-sheet-cancel-bg;
+    color: $action-sheet-cancel-color;
+    font-size: $action-sheet-cancel-font-size;
+    line-height: $action-sheet-cancel-line-height;
+    padding: $action-sheet-cancel-padding;
+
+    &:active {
+      background: $action-sheet-active-bg;
+    }
+  }
+
+  @include e(title) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $action-sheet-title-color;
+    height: $action-sheet-title-height;
+    font-size: $action-sheet-title-font-size;
+    font-weight: $action-sheet-title-font-weight;
+    line-height: $action-sheet-title-line-height;
+  }
+
+  @include edeep(close) {
+    position: absolute;
+    top: 50%;
+    right: $action-sheet-close-right;
+    color: $action-sheet-close-color;
+    font-size: $action-sheet-close-font-size;
+    transform: translateY(-50%);
+  }
+
+
+  @include e(panels-wrap) {
+    padding: $action-sheet-panels-wrap-padding;
+    background: $action-sheet-panel-bg;
+  }
+
+  @include e(panels) {
+    padding: $action-sheet-panels-padding;
+  }
+
+
+  @include e(panels-content) {
+    display: flex;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  @include e(panel) {
+    width: $action-sheet-panel-width;
+    flex: 0 0 auto;
+    padding: $action-sheet-panel-padding;
+  }
+
+  @include edeep(panel-img) {
+    display: block;
+    font-size: $action-sheet-panel-img-size;
+    width: $action-sheet-panel-img-size;
+    height: $action-sheet-panel-img-size;
+    margin: $action-sheet-panel-img-spacing;
+    border-radius: $action-sheet-panel-img-radius;
+  }
+
+  @include e(panel-title) {
+    font-size: $action-sheet-panel-title-font-size;
+    line-height: $action-sheet-panel-title-line-height;
+    color: $action-sheet-panel-title-color;
+    text-align: center;
+
+    @include lineEllipsis;
+  }
+}

package/components/wd-action-sheet/types.ts

@@ -0,0 +1,155 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+
+/**
+ * 动作面板选项
+ */
+export type Action = {
+  /**
+   * 选项显示文本
+   * 示例: '删除', '分享到群'
+   */
+  name: string
+  /**
+   * 附加描述信息（可选），在二级描述场景展示
+   * 示例: '将图片保存到本地'
+   */
+  description?: string
+  /**
+   * 文本颜色，例如 '#ff0000' 或 'var(--wot-danger)'
+   */
+  color?: string
+  /**
+   * 是否禁用该选项
+   * 默认: false
+   */
+  disabled?: boolean
+  /**
+   * 是否显示加载态（优先展示 loading，而非文字）
+   */
+  loading?: boolean
+  /**
+   * 未尽字段
+   */
+  [key: string]: any
+}
+
+/**
+ * 宫格面板选项
+ */
+export type Panel = {
+  /**
+   * 图标标识，支持以下用法：
+   * - 传入内置图标名（例如 'user', 'share-internal'）
+   * - 传入图片 URL（例如 'https://...'）
+   * 组件将根据值自动判断并渲染 Icon 组件或图片元素。
+   */
+  icon: string
+  /**
+   * 标题文本，显示在图标下方
+   */
+  title: string
+}
+
+/**
+ * 单行宫格（即一组 Panel）
+ */
+export type PanelRow = Panel[]
+
+/**
+ * 支持的 panels 类型：可以是单行 Panel 数组，也可以是多行（二级数组）
+ * 示例:
+ * ```ts
+ * // 单行
+ * panels: [{ icon: 'user', title: '好友' }, { icon: 'qrcode', title: '二维码' }]
+ * // 多行
+ * panels: [[{ icon: 'user', title: '好友' }], [{ icon: 'save', title: '保存' }]]
+ * ```
+ */
+export type Panels = Array<Panel | PanelRow>
+
+export const actionSheetProps = {
+  ...baseProps,
+  /**
+   * title 头部样式类
+   * 类型: string
+   * 默认值: ''
+   */
+  customTitleClass: makeStringProp(''),
+  /**
+   * 设置菜单显示隐藏
+   * 类型: boolean
+   * 默认值: false
+   */
+  modelValue: makeBooleanProp(false),
+  /**
+   * 菜单选项
+   * 类型: Action[]
+   * 默认值: []
+   */
+  actions: makeArrayProp<Action>(),
+  /**
+   * 自定义宫格面板项。
+   * - 可传入单行数组: `Panel[]`（会渲染为一行宫格）
+   * - 可传入二维数组: `Panel[][]`（会按行渲染多行宫格）
+   * 类型: Array<Panel | Panel[]>
+   * 默认值: []
+   */
+  panels: makeArrayProp<Panel | Panel[]>(),
+  /**
+   * 标题
+   * 类型: string
+   * 默认值: ''
+   */
+  title: String,
+  /**
+   * 取消按钮文案
+   * 类型: string
+   * 默认值: ''
+   */
+  cancelText: String,
+  /**
+   * 点击选项后是否关闭菜单
+   * 类型: boolean
+   * 默认值: true
+   */
+  closeOnClickAction: makeBooleanProp(true),
+  /**
+   * 点击遮罩是否关闭
+   * 类型: boolean
+   * 默认值: true
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 弹框动画持续时间
+   * 类型: number
+   * 默认值: 200
+   */
+  duration: makeNumberProp(200),
+  /**
+   * 菜单层级
+   * 类型: number
+   * 默认值: 10
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * 弹层内容懒渲染，触发展示时才渲染内容
+   * 类型: boolean
+   * 默认值: true
+   */
+  lazyRender: makeBooleanProp(true),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   * 类型: boolean
+   * 默认值: true
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   * 类型: boolean
+   * 默认值: false
+   */
+  rootPortal: makeBooleanProp(false)
+}
+
+export type ActionSheetProps = ExtractPropTypes<typeof actionSheetProps>

package/components/wd-action-sheet/wd-action-sheet.vue

@@ -0,0 +1,176 @@
+<template>
+  <view class="wd-action-sheet-wrapper">
+    <wd-popup
+      custom-class="wd-action-sheet-wrapper__popup"
+      :custom-style="`${(actions && actions.length) || (panels && panels.length) ? 'background: transparent;' : ''}`"
+      v-model="showPopup"
+      :duration="duration"
+      position="bottom"
+      :close-on-click-modal="closeOnClickModal"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :lazy-render="lazyRender"
+      :root-portal="rootPortal"
+      round
+      @close="close"
+      @enter="emit('enter')"
+      @after-enter="emit('after-enter')"
+      @leave="emit('leave')"
+      @after-leave="emit('after-leave')"
+      @click-modal="handleClickModal"
+      :z-index="zIndex"
+    >
+      <view
+        :class="`wd-action-sheet ${customClass}`"
+        :style="`${(actions && actions.length) || (panels && panels.length) ? ' ' : ''} ${customStyle}`"
+      >
+        <view v-if="title" :class="`wd-action-sheet__title ${customTitleClass}`">
+          {{ title }}
+          <slot name="close" :close="close">
+            <wd-icon custom-class="wd-action-sheet__close" name="close" @click="close" />
+          </slot>
+        </view>
+
+        <slot>
+          <view class="wd-action-sheet__actions" v-if="actions && actions.length">
+            <view
+              v-for="(action, rowIndex) in actions"
+              :key="rowIndex"
+              :class="`wd-action-sheet__action ${title ? '' : 'is-border'} ${action.disabled ? 'wd-action-sheet__action--disabled' : ''}  ${
+                action.loading ? 'wd-action-sheet__action--loading' : ''
+              }`"
+              :style="`color: ${action.color}`"
+              @click="select(rowIndex, 'action')"
+            >
+              <wd-loading custom-class="`wd-action-sheet__action-loading" v-if="action.loading" />
+              <view v-else class="wd-action-sheet__name">{{ action.name }}</view>
+              <view v-if="!action.loading && action.description" class="wd-action-sheet__description">{{ action.description }}</view>
+            </view>
+          </view>
+          <view v-if="isArray(formatPanels) && formatPanels.length" class="wd-action-sheet__panels-wrap">
+            <view v-for="(panel, rowIndex) in formatPanels" :key="rowIndex" class="wd-action-sheet__panels">
+              <view class="wd-action-sheet__panels-content">
+                <view v-for="(col, colIndex) in panel" :key="colIndex" class="wd-action-sheet__panel" @click="select(rowIndex, 'panels', colIndex)">
+                  <wd-icon custom-class="wd-action-sheet__panel-img" :name="col.icon" />
+                  <view class="wd-action-sheet__panel-title">{{ col.title }}</view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </slot>
+        <view v-if="cancelText" class="wd-action-sheet__gap"></view>
+        <view v-if="cancelText" class="wd-action-sheet__cancel" @click="handleCancel">{{ cancelText }}</view>
+      </view>
+    </wd-popup>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-action-sheet',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdPopup from '../wd-popup/wd-popup.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
+import { watch, ref } from 'vue'
+import { actionSheetProps, type Panel } from './types'
+import { isArray } from '../../common/util'
+
+const props = defineProps(actionSheetProps)
+const emit = defineEmits(['select', 'click-modal', 'cancel', 'leave', 'after-leave', 'close', 'enter', 'after-enter', 'update:modelValue'])
+
+const formatPanels = ref<Array<Panel[]>>([])
+
+const showPopup = ref<boolean>(false)
+
+watch(() => props.panels, computedValue, { deep: true, immediate: true })
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    showPopup.value = newValue
+  },
+  { deep: true, immediate: true }
+)
+
+/**
+ * 判断 panels 是否为一维数组
+ */
+function isPanelArray() {
+  return props.panels.length && !isArray(props.panels[0])
+}
+
+/**
+ * 计算面板数据
+ */
+function computedValue() {
+  formatPanels.value = isPanelArray() ? [props.panels as Panel[]] : (props.panels as Panel[][])
+}
+
+/**
+ * 点击选项
+ * @param rowIndex 行索引
+ * @param type 类型
+ * @param colIndex 列索引
+ */
+function select(rowIndex: number, type: 'action' | 'panels', colIndex?: number) {
+  if (type === 'action') {
+    if (props.actions[rowIndex].disabled || props.actions[rowIndex].loading) {
+      return
+    }
+    emit('select', {
+      item: props.actions[rowIndex],
+      index: rowIndex
+    })
+  } else if (isPanelArray()) {
+    emit('select', {
+      item: props.panels[Number(colIndex)],
+      index: colIndex
+    })
+  } else {
+    emit('select', {
+      item: (props.panels as Panel[][])[rowIndex][Number(colIndex)],
+      rowIndex,
+      colIndex
+    })
+  }
+  if (props.closeOnClickAction) {
+    emit('update:modelValue', false)
+  }
+}
+
+/**
+ * 点击遮罩层
+ */
+function handleClickModal() {
+  emit('click-modal')
+}
+
+/**
+ * 点击取消按钮
+ */
+function handleCancel() {
+  emit('cancel')
+  emit('update:modelValue', false)
+}
+
+/**
+ * 关闭动作面板
+ */
+function close() {
+  emit('update:modelValue', false)
+  emit('close')
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>