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

package/components/wd-drop-menu-item/wd-drop-menu-item.vue

@@ -0,0 +1,205 @@
+<template>
+  <view v-if="showWrapper" :class="`wd-drop-item ${customClass}`" :style="`z-index: ${zIndex}; ${positionStyle};${customStyle}`">
+    <wd-popup
+      v-model="showPop"
+      :z-index="zIndex"
+      :duration="duration"
+      :position="position"
+      :custom-style="`max-height: ${popupHeight ? popupHeight : '80%'}; ${customPopupStyle}`"
+      :custom-class="`${customPopupClass} wd-drop-item__popup`"
+      :modal="false"
+      :close-on-click-modal="false"
+      :root-portal="rootPortal"
+      @before-enter="beforeEnter"
+      @after-enter="afterEnter"
+      @before-leave="beforeLeave"
+      @after-leave="afterLeave"
+    >
+      <slot>
+        <scroll-view :style="popupHeight ? { height: popupHeight } : ''" scroll-y scroll-with-animation :show-scrollbar="true">
+          <view
+            v-for="(item, index) in options"
+            :key="index"
+            @click="choose(index)"
+            :class="`wd-drop-item__option ${(item[valueKey] !== '' ? item[valueKey] : item) === modelValue ? 'is-active' : ''}`"
+          >
+            <view class="wd-drop-item__title">
+              <text class="wd-drop-item__title-text">{{ item[labelKey] ? item[labelKey] : item }}</text>
+              <text v-if="item[tipKey]" class="wd-drop-item__tip">{{ item[tipKey] }}</text>
+            </view>
+            <wd-icon v-if="(item[valueKey] !== '' ? item[valueKey] : item) === modelValue" :name="iconName" custom-class="wd-drop-item__icon" />
+          </view>
+        </scroll-view>
+      </slot>
+    </wd-popup>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-drop-menu-item',
+  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 wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import { pushToQueue, removeFromQueue } from '../../common/clickoutside'
+import { type Queue, queueKey } from '../../composables/useQueue'
+import type { PopupType } from '../wd-popup/types'
+import { useParent } from '../../composables/useParent'
+import { DROP_MENU_KEY } from '../wd-drop-menu/types'
+import { isDef } from '../../common/util'
+import { callInterceptor } from '../../common/interceptor'
+import { dorpMenuItemProps, type DropMenuItemExpose } from './types'
+
+const props = defineProps(dorpMenuItemProps)
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string | number): void
+  (e: 'change', event: { value: string | number; selectedItem: Record<string, any> }): void
+  (e: 'open'): void
+  (e: 'opened'): void
+  (e: 'close'): void
+  (e: 'closed'): void
+}>()
+
+const queue = inject<Queue | null>(queueKey, null)
+const showWrapper = ref<boolean>(false)
+const showPop = ref<boolean>(false)
+const position = ref<PopupType>()
+const zIndex = ref<number>(12)
+const duration = ref<number>(0)
+
+const { parent: dropMenu } = useParent(DROP_MENU_KEY)
+
+const { proxy } = getCurrentInstance() as any
+
+const positionStyle = computed(() => {
+  let style: string = ''
+  if (showWrapper.value && dropMenu.value) {
+    style =
+      dropMenu.value.props.direction === 'down'
+        ? `top: calc(var(--window-top) + ${dropMenu.value.offset.value}px); bottom: 0;`
+        : `top: 0; bottom: calc(var(--window-bottom) + ${dropMenu.value.offset.value}px)`
+  } else {
+    style = ''
+  }
+  return style
+})
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (isDef(newValue) && typeof newValue !== 'number' && typeof newValue !== 'string') {
+      console.error('[wot-design] warning(wd-drop-menu-item): the type of value should be a number or a string.')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function getShowPop() {
+  return showPop.value
+}
+// 模拟单选操作 默认根据 value 选中操作
+function choose(index: number) {
+  if (props.disabled) return
+  const { valueKey } = props
+  const item = props.options[index]
+  const newValue = item[valueKey] !== undefined ? item[valueKey] : item
+  emit('update:modelValue', newValue)
+  emit('change', {
+    value: newValue,
+    selectedItem: item
+  })
+  close()
+}
+// 外部关闭弹出框
+function close() {
+  if (!showPop.value) {
+    return
+  }
+  callInterceptor(props.beforeToggle, {
+    args: [{ status: false }],
+    done: handleClose
+  })
+}
+
+function handleClose() {
+  if (showPop.value) {
+    showPop.value = false
+  }
+}
+
+function open() {
+  if (showPop.value) {
+    return
+  }
+  callInterceptor(props.beforeToggle, {
+    args: [{ status: true }],
+    done: handleOpen
+  })
+}
+
+function handleOpen() {
+  showWrapper.value = true
+  showPop.value = true
+  if (dropMenu.value) {
+    duration.value = Number(dropMenu.value.props.duration)
+    position.value = dropMenu.value.props.direction === 'down' ? 'top' : 'bottom'
+  }
+}
+
+function toggle() {
+  if (showPop.value) {
+    close()
+  } else {
+    open()
+  }
+}
+
+function afterLeave() {
+  showWrapper.value = false
+  emit('closed')
+}
+function beforeEnter() {
+  emit('open')
+}
+function afterEnter() {
+  emit('opened')
+}
+function beforeLeave() {
+  emit('close')
+}
+
+defineExpose<DropMenuItemExpose>({ getShowPop, open, close, toggle })
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-empty/index.scss

@@ -0,0 +1,46 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 图标颜色
+$empty-icon-color: var(--wot-empty-icon-color, $icon-disabled) !default;
+// 文案字号
+$empty-text-font-size: var(--wot-empty-text-font-size, $typography-body-size-extra-large) !default;
+// 文案行高
+$empty-text-line-height: var(--wot-empty-text-line-height, $typography-body-line--height-size-extra-large) !default;
+// 文案字重
+$empty-text-font-weight: var(--wot-empty-text-font-weight, $typography-body-font-weight-strong) !default;
+// 文案颜色
+$empty-text-color: var(--wot-empty-text-color, $text-main) !default;
+// 文案顶部间距
+$empty-text-margin-top: var(--wot-empty-text-margin-top, $spacing-loose) !default;
+// 图标尺寸
+$empty-icon-size: var(--wot-empty-icon-size, $n-98) !default;
+// 组件底部内边距
+$empty-padding-bottom: var(--wot-empty-padding-bottom, $spacing-ultra-loose) !default;
+
+@include b(empty) {
+  width: 100%;
+  margin: 0 auto;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: $empty-padding-bottom;
+
+  @include edeep(icon) {
+    margin: 0 auto;
+    width: $empty-icon-size;
+    height: $empty-icon-size;
+    font-size: $empty-icon-size;
+    color: $empty-icon-color;
+  }
+  @include e(text) {
+    margin-top: $empty-text-margin-top;
+    font-size: $empty-text-font-size;
+    line-height: $empty-text-line-height;
+    font-weight: $empty-text-font-weight;
+    color: $empty-text-color;
+    text-align: center;
+    word-break: break-all;
+  }
+}

package/components/wd-empty/types.ts

@@ -0,0 +1,37 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 13:49:00
+ * @LastEditTime: 2026-03-19 17:28:17
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-ui/src/uni_modules/wot-ui/components/wd-empty/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeStringProp } from '../../common/props'
+
+export const emptyProps = {
+  ...baseProps,
+
+  /**
+   * 缺省图片类型，支持传入图片 URL。
+   * 类型: string
+   * 可选值: 图标名或URL
+   * 默认值: empty
+   */
+  icon: makeStringProp('empty'),
+  /**
+   * 图片大小，默认单位为 `px`。
+   * 类型: string 或 number
+   * 默认值: 空字符串
+   */
+  iconSize: [String, Number],
+  /**
+   * 提示文案。
+   * 类型: string
+   * 默认值: 空字符串
+   */
+  tip: makeStringProp('')
+}
+
+export type EmptyProps = ExtractPropTypes<typeof emptyProps>

package/components/wd-empty/wd-empty.vue

@@ -0,0 +1,47 @@
+<template>
+  <view :class="`wd-empty  ${customClass}`" :style="customStyle">
+    <slot name="image">
+      <wd-icon :name="icon" custom-class="wd-empty__icon" :custom-style="iconStyle"></wd-icon>
+    </slot>
+    <view v-if="tip" class="wd-empty__text">{{ tip }}</view>
+    <slot name="bottom" />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-empty',
+  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, type CSSProperties } from 'vue'
+import { addUnit, objToStyle } from '../../common/util'
+import { emptyProps } from './types'
+
+const props = defineProps(emptyProps)
+
+/**
+ * 图标样式
+ */
+const iconStyle = computed(() => {
+  let style: CSSProperties = {}
+  if (props.iconSize) {
+    style['font-size'] = addUnit(props.iconSize)
+    style['width'] = addUnit(props.iconSize)
+    style['height'] = addUnit(props.iconSize)
+  }
+  return `${objToStyle(style)}`
+})
+</script>
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-fab/index.scss

@@ -0,0 +1,124 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+// 浮动按钮触发器宽度
+$fab-trigger-width: var(--wot-fab-trigger-width, $n-60) !default;
+// 浮动按钮触发器高度
+$fab-trigger-height: var(--wot-fab-trigger-height, $n-60) !default;
+// 动作列表主轴内边距
+$fab-actions-padding: var(--wot-fab-actions-padding, $padding-extra-loose) !default;
+// 浮动按钮层级
+$fab-z-index: var(--wot-fab-z-index, 99) !default;
+// 动作按钮展开/收起动画偏移距离
+$fab-transition-offset: var(--wot-fab-transition-offset, $n-40) !default;
+// 浮动按钮触发器图标大小
+$fab-trigger-icon-size: var(--wot-fab-trigger-icon-size, $n-32) !default;
+
+@include b(fab) {
+  position: fixed;
+  z-index: $fab-z-index;
+
+  @include edeep(trigger) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $fab-trigger-width;
+    height: $fab-trigger-height;
+
+    .wd-button__icon {
+      font-size: $fab-trigger-icon-size;
+    }
+  }
+
+  :deep() {
+    @include e(actions) {
+      position: absolute;
+      z-index: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: $fab-actions-padding 0;
+
+      @include m(left, right) {
+        height: 100%;
+        top: 0;
+        padding: 0 $fab-actions-padding;
+      }
+
+      @include m(left) {
+        flex-direction: row-reverse;
+        right: 100%;
+      }
+
+      @include m(right) {
+        flex-direction: row;
+        left: 100%;
+      }
+
+      @include m(top, bottom) {
+        width: 100%;
+        left: 0;
+      }
+
+      @include m(top) {
+        flex-direction: column-reverse;
+        bottom: 100%;
+      }
+
+      @include m(bottom) {
+        flex-direction: column;
+        top: 100%;
+      }
+    }
+
+    // 动画
+    @include e(transition-enter-active, transition-leave-active) {
+      transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    }
+
+
+    @include e(transition-enter) {
+      @include m(top) {
+        opacity: 0;
+        transform: translateY($fab-transition-offset);
+      }
+
+      @include m(bottom) {
+        opacity: 0;
+        transform: translateY(calc(-1 * $fab-transition-offset));
+      }
+
+      @include m(left) {
+        opacity: 0;
+        transform: translateX($fab-transition-offset);
+      }
+
+      @include m(right) {
+        opacity: 0;
+        transform: translateX(calc(-1 * $fab-transition-offset));
+      }
+    }
+
+    @include e(transition-leave-to) {
+      @include m(top) {
+        opacity: 0;
+        transform: translateY($fab-transition-offset);
+      }
+
+      @include m(bottom) {
+        opacity: 0;
+        transform: translateY(calc(-1 * $fab-transition-offset));
+      }
+
+      @include m(left) {
+        opacity: 0;
+        transform: translateX($fab-transition-offset);
+      }
+
+      @include m(right) {
+        opacity: 0;
+        transform: translateX(calc(-1 * $fab-transition-offset));
+      }
+    }
+  }
+}

package/components/wd-fab/types.ts

@@ -0,0 +1,119 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+import type { PropType } from 'vue'
+
+/**
+ * 浮动按钮类型
+ */
+export type FabType = 'primary' | 'success' | 'info' | 'warning' | 'danger'
+
+/**
+ * 浮动按钮位置
+ */
+export type FabPosition = 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'left-center' | 'right-center' | 'top-center' | 'bottom-center'
+
+/**
+ * 浮动按钮菜单弹出方向
+ */
+export type FabDirection = 'top' | 'right' | 'bottom' | 'left'
+
+/**
+ * 浮动按钮边界间距配置
+ */
+export type FabGap = Partial<Record<FabDirection, number>>
+export const fabProps = {
+  ...baseProps,
+  /**
+   * 是否激活展开菜单
+   * 类型: boolean
+   * 默认值: false
+   */
+  active: makeBooleanProp(false),
+  /**
+   * 按钮类型
+   * 类型: FabType
+   * 可选值: 'primary' | 'success' | 'info' | 'warning' | 'danger'
+   * 默认值: 'primary'
+   */
+  type: makeStringProp<FabType>('primary'),
+  /**
+   * 悬浮按钮位置
+   * 类型: FabPosition
+   * 可选值: 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'left-center' | 'right-center' | 'top-center' | 'bottom-center'
+   * 默认值: 'right-bottom'
+   */
+  position: makeStringProp<FabPosition>('right-bottom'),
+  /**
+   * 菜单弹出方向
+   * 类型: FabDirection
+   * 可选值: 'top' | 'right' | 'bottom' | 'left'
+   * 默认值: 'top'
+   */
+  direction: makeStringProp<FabDirection>('top'),
+  /**
+   * 是否禁用
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 未展开时的图标名称
+   * 类型: string
+   * 默认值: 'plus'
+   */
+  inactiveIcon: makeStringProp('plus'),
+  /**
+   * 展开时的图标名称
+   * 类型: string
+   * 默认值: 'close'
+   */
+  activeIcon: makeStringProp('close'),
+  /**
+   * 自定义 z-index 层级
+   * 类型: number
+   * 默认值: 99
+   */
+  zIndex: makeNumberProp(99),
+  /**
+   * 是否可拖动
+   * 类型: boolean
+   * 默认值: false
+   */
+  draggable: makeBooleanProp(false),
+  /**
+   * 距离屏幕边界的间距，可分别设置上下左右
+   * 类型: FabGap
+   * 默认值: { top: 16, right: 16, bottom: 16, left: 16 }
+   */
+  gap: {
+    type: Object as PropType<FabGap>,
+    default: () => ({})
+  },
+  /**
+   * 点击时是否展开菜单
+   * 类型: boolean
+   * 默认值: true
+   */
+  expandable: makeBooleanProp(true)
+}
+
+export type FabProps = ExtractPropTypes<typeof fabProps>
+
+/**
+ * Fab 组件暴露的方法
+ */
+export type FabExpose = {
+  /**
+   * 展开菜单
+   */
+  open: () => void
+  /**
+   * 收起菜单
+   */
+  close: () => void
+}
+
+/**
+ * Fab 组件实例类型
+ */
+export type FabInstance = ComponentPublicInstance<FabProps, FabExpose>