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

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

@@ -0,0 +1,118 @@
+<template>
+  <view
+    @click="handleClick"
+    :class="`wd-sidebar-item ${active ? 'wd-sidebar-item--active' : ''} ${prefix ? 'wd-sidebar-item--prefix' : ''}  ${
+      suffix ? 'wd-sidebar-item--suffix' : ''
+    } ${disabled ? 'wd-sidebar-item--disabled' : ''} ${customClass}`"
+    :style="customStyle"
+  >
+    <slot name="icon"></slot>
+    <template v-if="!$slots.icon && icon">
+      <wd-icon custom-class="wd-sidebar-item__icon" :name="icon"></wd-icon>
+    </template>
+    <wd-badge v-bind="customBadgeProps" custom-class="wd-sidebar-item__badge">
+      {{ label }}
+    </wd-badge>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sidebar-item',
+  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 wdBadge from '../wd-badge/wd-badge.vue'
+import { computed } from 'vue'
+import { useParent } from '../../composables/useParent'
+import { SIDEBAR_KEY } from '../wd-sidebar/types'
+import { sidebarItemProps } from './types'
+import type { BadgeProps } from '../wd-badge/types'
+import { deepAssign, isDef, isUndefined, omitBy } from '../../common/util'
+
+const props = defineProps(sidebarItemProps)
+
+const { parent: sidebar } = useParent(SIDEBAR_KEY)
+
+const customBadgeProps = computed(() => {
+  const badgeProps: Partial<BadgeProps> = deepAssign(
+    isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
+    omitBy(
+      {
+        max: props.max,
+        isDot: props.isDot,
+        value: props.badge
+      },
+      isUndefined
+    )
+  )
+  if (!isDef(badgeProps.max)) {
+    badgeProps.max = 99
+  }
+  return badgeProps
+})
+
+const active = computed(() => {
+  let active: boolean = false
+  if (sidebar.value && sidebar.value.props.modelValue === props.value) {
+    active = true
+  }
+  return active
+})
+
+const prefix = computed(() => {
+  let prefix: boolean = false
+  if (sidebar.value) {
+    let activeIndex: number = sidebar.value.children.findIndex((c: any) => {
+      return c.value === sidebar.value!.props.modelValue
+    })
+
+    let currentIndex: number = sidebar.value.children.findIndex((c: any) => {
+      return c.value === props.value
+    })
+
+    if (currentIndex === activeIndex - 1) {
+      prefix = true
+    }
+  }
+  return prefix
+})
+
+const suffix = computed(() => {
+  let suffix: boolean = false
+  if (sidebar.value) {
+    let activeIndex: number = sidebar.value.children.findIndex((c: any) => {
+      return c.value === sidebar.value!.props.modelValue
+    })
+
+    let currentIndex: number = sidebar.value.children.findIndex((c: any) => {
+      return c.value === props.value
+    })
+
+    if (currentIndex === activeIndex + 1) {
+      suffix = true
+    }
+  }
+  return suffix
+})
+
+function handleClick() {
+  if (props.disabled) {
+    return
+  }
+  sidebar.value && sidebar.value.setChange(props.value, props.label)
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-signature/index.scss

@@ -0,0 +1,42 @@
+@use '../../styles/mixin/mixin.scss' as *;
+@use '../../styles/variable.scss' as *;
+
+// 签名区域背景色
+$signature-bg: var(--wot-signature-bg, $filled-oppo) !default;
+// 签名区域圆角
+$signature-radius: var(--wot-signature-radius, $radius-main) !default;
+// 签名区域边框
+$signature-border: var(--wot-signature-border, $stroke-main solid $border-main) !default;
+// 底部操作区上间距
+$signature-footer-margin-top: var(--wot-signature-footer-margin-top, $spacing-tight) !default;
+// 底部按钮左间距
+$signature-button-margin-left: var(--wot-signature-button-margin-left, $spacing-tight) !default;
+
+@include b(signature) {
+  @include e(content) {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    overflow: hidden;
+    background: $signature-bg;
+    border-radius: $signature-radius;
+    border: $signature-border;
+  }
+
+  @include e(content-canvas) {
+    width: 100%;
+  }
+
+
+  @include e(footer) {
+    margin-top: $signature-footer-margin-top;
+    justify-content: flex-end;
+    display: flex;
+  }
+
+  @include edeep(button) {
+    &:not(:first-child) {
+      margin-left: $signature-button-margin-left;
+    }
+  }
+}

package/components/wd-signature/types.ts

@@ -0,0 +1,295 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, numericProp } from '../../common/props'
+
+export const signatureProps = {
+  ...baseProps,
+
+  /**
+   * 签名笔颜色
+   * 类型: string
+   * 默认值: '#000'
+   */
+  penColor: {
+    type: String,
+    default: '#000'
+  },
+
+  /**
+   * 签名笔宽度
+   * 类型: number
+   * 默认值: 3
+   */
+  lineWidth: {
+    type: Number,
+    default: 3
+  },
+
+  /**
+   * 保存按钮的文本
+   * 类型: string
+   * 默认值: 内置翻译 '确定'
+   */
+  confirmText: String,
+
+  /**
+   * 清除按钮的文本
+   * 类型: string
+   * 默认值: 内置翻译 '清除'
+   */
+  clearText: String,
+
+  /**
+   * 撤回按钮的文本
+   * 类型: string
+   * 默认值: 内置翻译 '撤回'
+   */
+  revokeText: String,
+
+  /**
+   * 恢复按钮的文本
+   * 类型: string
+   * 默认值: 内置翻译 '恢复'
+   */
+  restoreText: String,
+  /**
+   * 导出图片的类型
+   * 类型: 'png' | 'jpg'
+   * 可选值: 'png' | 'jpg'
+   * 默认值: 'png'
+   */
+  fileType: {
+    type: String as PropType<'png' | 'jpg'>,
+    default: 'png'
+  },
+
+  /**
+   * 导出图片的质量
+   * 类型: number
+   * 可选值: 0 ~ 1
+   * 默认值: 1
+   */
+  quality: {
+    type: Number,
+    default: 1
+  },
+
+  /**
+   * 导出图片的缩放比例
+   * 类型: number
+   * 默认值: 1
+   */
+  exportScale: {
+    type: Number,
+    default: 1
+  },
+
+  /**
+   * 是否禁用签名板
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+
+  /**
+   * 画布高度
+   * 类型: string | number
+   * 默认值: -
+   */
+  height: numericProp,
+
+  /**
+   * 画布宽度
+   * 类型: string | number
+   * 默认值: -
+   */
+  width: numericProp,
+
+  /**
+   * 画板背景色
+   * 类型: string
+   * 默认值: -
+   */
+  backgroundColor: String,
+
+  /**
+   * 是否禁用画布滚动
+   * 类型: boolean
+   * 默认值: true
+   */
+  disableScroll: {
+    type: Boolean,
+    default: true
+  },
+
+  /**
+   * 是否开启历史记录
+   * 类型: boolean
+   * 默认值: false
+   */
+  enableHistory: {
+    type: Boolean,
+    default: false
+  },
+
+  /**
+   * 撤回和恢复的步长
+   * 类型: number
+   * 默认值: 1
+   */
+  step: {
+    type: Number,
+    default: 1
+  },
+
+  /**
+   * 撤销按钮文本
+   * 类型: string
+   * 默认值: 内置翻译 '撤销'
+   */
+  undoText: String,
+
+  /**
+   * 恢复按钮文本
+   * 类型: string
+   * 默认值: 内置翻译 '恢复'
+   */
+  redoText: String,
+
+  /**
+   * 是否开启压感模式
+   * 类型: boolean
+   * 默认值: false
+   */
+  pressure: {
+    type: Boolean,
+    default: false
+  },
+
+  /**
+   * 压感模式下的最大笔触宽度
+   * 类型: number
+   * 默认值: 6
+   */
+  maxWidth: {
+    type: Number,
+    default: 6
+  },
+
+  /**
+   * 压感模式下的最小笔触宽度
+   * 类型: number
+   * 默认值: 2
+   */
+  minWidth: {
+    type: Number,
+    default: 2
+  },
+
+  /**
+   * 最小速度阈值
+   * 类型: number
+   * 默认值: 1.5
+   */
+  minSpeed: {
+    type: Number,
+    default: 1.5
+  }
+}
+
+/**
+ * 签名结果
+ */
+export type SignatureResult = {
+  /** 生成图片的临时路径 */
+  tempFilePath: string
+  /** 是否成功生成图片 */
+  success: boolean
+  /** 生成图片的宽度 */
+  width: number
+  /** 生成图片的高度 */
+  height: number
+}
+
+/**
+ * 签名线条
+ */
+export interface Line {
+  /** 线条轨迹点序列 */
+  points: Point[]
+  /** 线条颜色 */
+  color: string
+  /** 线条宽度 */
+  width: number
+  /** 线条背景色 */
+  backgroundColor?: string
+  /** 是否为压感笔迹 */
+  isPressure?: boolean
+}
+
+/**
+ * 签名点位坐标
+ */
+export interface Point {
+  /** X 轴坐标 */
+  x: number
+  /** Y 轴坐标 */
+  y: number
+  /** 时间戳 (ms) */
+  t: number
+  /** 移动速度 (px/ms) */
+  speed?: number
+  /** 与前一点距离 (px) */
+  distance?: number
+  /** 当前点线宽 */
+  lineWidth?: number
+  /** 贝塞尔控制点 lastX1 */
+  lastX1?: number
+  /** 贝塞尔控制点 lastY1 */
+  lastY1?: number
+  /** 贝塞尔控制点 lastX2 */
+  lastX2?: number
+  /** 贝塞尔控制点 lastY2 */
+  lastY2?: number
+  /** 是否为线条起点 */
+  isFirstPoint?: boolean
+}
+
+/**
+ * 签名组件暴露的方法
+ */
+export type SignatureExpose = {
+  /**
+   * 初始化签名板
+   * @param forceUpdate 是否强制重新获取 dom 节点计算尺寸，默认 false
+   */
+  init: (forceUpdate?: boolean) => void
+  /**
+   * 清空签名内容
+   */
+  clear: () => void
+  /**
+   * 确认签名，生成图片临时路径并触发 'confirm' 事件
+   */
+  confirm: () => void
+  /**
+   * 恢复一次撤销的操作 (需启用历史记录)
+   */
+  restore: () => void
+  /**
+   * 撤销一次签笔记录 (需启用历史记录)
+   */
+  revoke: () => void
+}
+
+/**
+ * 签名组件 Props
+ */
+export type SignatureProps = ExtractPropTypes<typeof signatureProps>
+
+/**
+ * 签名组件实例
+ */
+export type SignatureInstance = ComponentPublicInstance<SignatureProps, SignatureExpose>