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

package/components/wd-button/wd-button.vue

@@ -0,0 +1,210 @@
+<template>
+  <button
+    :id="buttonId"
+    :hover-class="`${disabled || loading ? '' : 'wd-button--active'}`"
+    :style="customStyle"
+    :class="[
+      'wd-button',
+      'is-' + type,
+      'is-' + size,
+      isIcon ? 'is-icon' : '',
+      round ? 'is-round' : '',
+      hairline ? 'is-hairline' : '',
+      variant !== 'base' ? 'is-' + variant : '',
+      disabled ? 'is-disabled' : '',
+      block ? 'is-block' : '',
+      loading ? 'is-loading' : '',
+      customClass
+    ]"
+    :hover-start-time="hoverStartTime"
+    :hover-stay-time="hoverStayTime"
+    :open-type="openTypeValue"
+    :send-message-title="sendMessageTitle"
+    :send-message-path="sendMessagePath"
+    :send-message-img="sendMessageImg"
+    :app-parameter="appParameter"
+    :show-message-card="showMessageCard"
+    :session-from="sessionFrom"
+    :lang="lang"
+    :hover-stop-propagation="hoverStopPropagation"
+    :scope="scope"
+    @click="handleClick"
+    @getAuthorize="handleGetAuthorize"
+    @getuserinfo="handleGetUserInfo"
+    @contact="handleContact"
+    @getphonenumber="handleGetPhoneNumber"
+    @getrealtimephonenumber="handleGetRealtimePhoneNumber"
+    @error="handleError"
+    @launchapp="handleLaunchApp"
+    @opensetting="handleOpenSetting"
+    @chooseavatar="handleChooseAvatar"
+    @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
+  >
+    <view class="wd-button__content">
+      <wd-loading v-if="loading" v-bind="customLoadingProps"></wd-loading>
+      <wd-icon v-else-if="icon" custom-class="wd-button__icon" :name="icon" :classPrefix="classPrefix"></wd-icon>
+      <view class="wd-button__text" v-if="$slots.default || text">
+        <slot>{{ text }}</slot>
+      </view>
+    </view>
+  </button>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-button',
+  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 { buttonProps } from './types'
+import { isDef, omitBy, isUndefined } from '../../common/util'
+import { type LoadingProps } from '../wd-loading/types'
+
+const slots = useSlots()
+
+const props = defineProps(buttonProps)
+const emit = defineEmits<{
+  (e: 'click', event: any): void
+  (e: 'getuserinfo', event: any): void
+  (e: 'contact', event: any): void
+  (e: 'getphonenumber', event: any): void
+  (e: 'getrealtimephonenumber', event: any): void
+  (e: 'error', event: any): void
+  (e: 'launchapp', event: any): void
+  (e: 'opensetting', event: any): void
+  (e: 'chooseavatar', event: any): void
+  (e: 'agreeprivacyauthorization', event: any): void
+}>()
+
+/**
+ * 加载配置项
+ */
+const customLoadingProps = computed(() => {
+  const loadingProps: Partial<LoadingProps> = isDef(props.loadingProps) ? omitBy(props.loadingProps, isUndefined) : {}
+  loadingProps.customSpinnerClass = `${isDef(loadingProps.customSpinnerClass) ? loadingProps.customSpinnerClass : ''} wd-button__loading`
+  loadingProps.inheritColor = isDef(loadingProps.inheritColor) ? loadingProps.inheritColor : true
+  return loadingProps
+})
+
+/**
+ * 开放能力类型
+ */
+const openTypeValue = computed(() => {
+  return props.disabled || props.loading ? undefined : props.openType
+})
+
+/**
+ * 是否仅展示图标
+ */
+const isIcon = computed(() => {
+  return !slots.default && !props.text && props.icon
+})
+
+/**
+ * 处理点击事件
+ * @param event
+ */
+function handleClick(event: any) {
+  if (!props.disabled && !props.loading) {
+    emit('click', event)
+  }
+}
+
+/**
+ * 支付宝小程序授权
+ * @param event
+ */
+function handleGetAuthorize(event: any) {
+  if (props.scope === 'phoneNumber') {
+    handleGetPhoneNumber(event)
+  } else if (props.scope === 'userInfo') {
+    handleGetUserInfo(event)
+  }
+}
+
+/**
+ * 获取用户信息回调
+ * @param event
+ */
+function handleGetUserInfo(event: any) {
+  emit('getuserinfo', event)
+}
+
+/**
+ * 客服会话回调
+ * @param event
+ */
+function handleContact(event: any) {
+  emit('contact', event)
+}
+
+/**
+ * 获取手机号回调
+ * @param event
+ */
+function handleGetPhoneNumber(event: any) {
+  emit('getphonenumber', event)
+}
+
+/**
+ * 获取实时手机号回调
+ * @param event
+ */
+function handleGetRealtimePhoneNumber(event: any) {
+  emit('getrealtimephonenumber', event)
+}
+
+/**
+ * 当使用开放能力发生错误时回调
+ * @param event
+ */
+function handleError(event: any) {
+  emit('error', event)
+}
+
+/**
+ * 打开 APP 成功的回调
+ * @param event
+ */
+function handleLaunchApp(event: any) {
+  emit('launchapp', event)
+}
+
+/**
+ * 在打开授权设置页后回调
+ * @param event
+ */
+function handleOpenSetting(event: any) {
+  emit('opensetting', event)
+}
+
+/**
+ * 获取头像回调
+ * @param event
+ */
+function handleChooseAvatar(event: any) {
+  emit('chooseavatar', event)
+}
+
+/**
+ * 隐私协议授权回调
+ * @param event
+ */
+function handleAgreePrivacyAuthorization(event: any) {
+  emit('agreeprivacyauthorization', event)
+}
+</script>
+
+<style lang="scss">
+@use './index.scss';
+</style>

package/components/wd-calendar/index.scss

@@ -0,0 +1,97 @@
+@use '../../styles/mixin/mixin.scss'as *;
+@use '../../styles/variable.scss'as *;
+
+$calendar-bg: var(--wot-calendar-bg, $filled-oppo) !default; // 日历弹层背景色
+$calendar-tabs-width: var(--wot-calendar-tabs-width, 100%) !default; // Tabs 宽度
+$calendar-tabs-padding: var(--wot-calendar-tabs-padding, $padding-zero $padding-extra-loose) !default; // Tabs 内边距
+$calendar-shortcuts-padding: var(--wot-calendar-shortcuts-padding, $padding-extra-tight $padding-zero) !default; // 快捷选项内边距
+$calendar-tag-spacing-right: var(--wot-calendar-tag-spacing-right, $spacing-extra-loose) !default; // 标签右间距
+$calendar-range-padding: var(--wot-calendar-range-padding, $padding-zero $padding-loose $padding-extra-loose) !default; // 范围标签内边距 
+$calendar-range-font-size: var(--wot-calendar-range-font-size, $typography-body-size-main) !default; // 范围标签字号
+$calendar-range-item-font-size: var(--wot-calendar-range-item-font-size, $typography-body-size-extra-large) !default; // 范围标签项字号
+$calendar-range-item-font-weight: var(--wot-calendar-range-item-font-weight, $font-weight-medium) !default; // 范围标签项字重
+$calendar-range-item-line-height: var(--wot-calendar-range-item-line-height, $typography-body-line--height-size-extra-large) !default; // 范围标签项行高
+$calendar-range-item-padding: var(--wot-calendar-range-item-padding, $spacing-loose $spacing-zero) !default; // 范围标签项内边距
+$calendar-range-item-color: var(--wot-calendar-range-item-color, $primary-6) !default; // 范围标签项颜色
+$calendar-range-item-color-placeholder: var(--wot-calendar-range-item-color-placeholder, $text-placeholder) !default; // 占位符颜色
+$calendar-range-item-line-color: var(--wot-calendar-range-item-line-color, $primary-6) !default; // 范围标签项下划线颜色
+$calendar-range-item-line-color-placeholder: var(--wot-calendar-range-item-line-color-placeholder, $border-main) !default; // 范围标签项下划线占位符颜色
+$calendar-range-separator-margin: var(--wot-calendar-range-separator-margin, $spacing-zero $spacing-tight) !default; // 分隔符水平间距
+$calendar-range-separator-color: var(--wot-calendar-range-separator-color, $text-auxiliary) !default; // 分隔符颜色
+$calendar-range-separator-width: var(--wot-calendar-range-separator-width, $n-8) !default; // 分隔符宽度
+$calendar-range-separator-height: var(--wot-calendar-range-separator-height, $stroke-main) !default; // 分隔符高度
+$calendar-confirm-padding: var(--wot-calendar-confirm-padding, $padding-tight $padding-loose) !default; // 确认区域内边距
+$calendar-confirm-border-color: var(--wot-calendar-confirm-border-color, $border-light) !default; // 确认区域上边框颜色
+
+@include b(calendar) {
+
+  @include e(header) {
+    position: relative;
+    overflow: hidden;
+  }
+
+  @include edeep(popup) {
+    background: $calendar-bg;
+  }
+
+  @include e(tabs) {
+    box-sizing: border-box;
+    width: $calendar-tabs-width;
+    padding: $calendar-tabs-padding;
+  }
+
+  @include e(shortcuts) {
+    padding: $calendar-shortcuts-padding;
+    text-align: center;
+  }
+
+  @include edeep(tag) {
+    margin-right: $calendar-tag-spacing-right;
+    @include when(last-tag) {
+      margin-right: 0;
+    }
+  }
+  @include e(range) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: $calendar-range-font-size;
+    padding: $calendar-range-padding;
+  }
+
+  @include e(range-item) {
+    flex: 1;
+    color: $calendar-range-item-color;
+    font-size: $calendar-range-item-font-size;
+    font-weight: $calendar-range-item-font-weight;
+    line-height: $calendar-range-item-line-height;
+    padding: $calendar-range-item-padding;
+    text-align: center;
+    @include pixelBorder(bottom, 0, $calendar-range-item-line-color);
+
+    @include when(placeholder) {
+      color: $calendar-range-item-color-placeholder;
+      @include pixelBorder(bottom, 0, $calendar-range-item-line-color-placeholder);
+
+    }
+  }
+
+  @include e(range-separator) {
+    width: $calendar-range-separator-width;
+    height: $calendar-range-separator-height;
+    position: relative;
+    margin: $calendar-range-separator-margin;
+    background: $calendar-range-separator-color;
+  }
+
+  @include e(confirm) {
+    display: flex;
+    align-items: center;
+    padding: $calendar-confirm-padding;
+    @include pixelBorder(top, 0, $calendar-confirm-border-color);
+  }
+
+  @include e(confirm-btn-wrapper) {
+    flex-grow: 1;
+  }
+}

package/components/wd-calendar/types.ts

@@ -0,0 +1,221 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../../common/props'
+import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../wd-calendar-view/types'
+
+const now = new Date()
+const defaultMinDate = new Date(now.getFullYear(), now.getMonth() - 6, now.getDate()).getTime()
+const defaultMaxDate = new Date(now.getFullYear(), now.getMonth() + 6, now.getDate(), 23, 59, 59).getTime()
+
+export const calendarProps = {
+  ...baseProps,
+  /**
+   * 选中值，为 13 位时间戳或时间戳数组
+   * 类型: number | number[] | null
+   * 默认值: null
+   */
+  modelValue: makeRequiredProp([Number, Array, null] as PropType<number | number[] | null>),
+  /**
+   * 日期类型
+   * 类型: CalendarType
+   * 可选值: 'date' | 'dates' | 'datetime' | 'week' | 'month' | 'daterange' | 'datetimerange' | 'weekrange' | 'monthrange'
+   * 默认值: 'date'
+   */
+  type: makeStringProp<CalendarType>('date'),
+  /**
+   * 最小日期，为 13 位时间戳
+   * 类型: number
+   * 默认值: 当前日期 - 6个月
+   */
+  minDate: makeNumberProp(defaultMinDate),
+  /**
+   * 最大日期，为 13 位时间戳
+   * 类型: number
+   * 默认值: 当前日期 + 6个月
+   */
+  maxDate: makeNumberProp(defaultMaxDate),
+  /**
+   * 周起始天
+   * 类型: number
+   * 默认值: 0
+   */
+  firstDayOfWeek: makeNumberProp(0),
+  /**
+   * 日期格式化函数
+   * 类型: CalendarFormatter
+   */
+  formatter: Function as PropType<CalendarFormatter>,
+  /**
+   * type 为范围选择时有效，最大日期范围
+   * 类型: number
+   */
+  maxRange: Number,
+  /**
+   * type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
+   * 类型: string
+   */
+  rangePrompt: String,
+  /**
+   * type 为范围选择时有效，是否允许选择同一天
+   * 类型: boolean
+   * 默认值: false
+   */
+  allowSameDay: makeBooleanProp(false),
+  /**
+   * 选中日期所使用的当日内具体时刻
+   * 类型: string | string[]
+   */
+  defaultTime: {
+    type: [String, Array] as PropType<string | string[]>
+  },
+  /**
+   * type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
+   * 类型: CalendarTimeFilter
+   */
+  timeFilter: Function as PropType<CalendarTimeFilter>,
+  /**
+   * type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideSecond: makeBooleanProp(false),
+  /**
+   * 弹出层标题
+   * 类型: string
+   */
+  title: String,
+  /**
+   * 点击遮罩是否关闭
+   * 类型: boolean
+   * 默认值: true
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 弹框层级
+   * 类型: number
+   * 默认值: 15
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * 是否显示确定按钮
+   * 类型: boolean
+   * 默认值: true
+   */
+  showConfirm: makeBooleanProp(true),
+  /**
+   * 确定按钮文字
+   * 类型: string
+   */
+  confirmText: String,
+  /**
+   * 自定义范围选择类型的面板内部回显，返回一个字符串
+   * 类型: CalendarInnerDisplayFormat
+   */
+  innerDisplayFormat: Function as PropType<CalendarInnerDisplayFormat>,
+  /**
+   * 是否超出隐藏
+   * 类型: boolean
+   * 默认值: false
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * 是否显示类型切换功能
+   * 类型: boolean
+   * 默认值: false
+   */
+  showTypeSwitch: makeBooleanProp(false),
+  /**
+   * 快捷选项，为对象数组，其中对象的 text 必传
+   * 类型: Record<string, any>[]
+   */
+  shortcuts: makeArrayProp<Record<string, any>>(),
+  /**
+   * 快捷操作点击回调
+   * 类型: CalendarOnShortcutsClick
+   */
+  onShortcutsClick: Function as PropType<CalendarOnShortcutsClick>,
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   * 类型: boolean
+   * 默认值: true
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 确定前校验函数，接收目标 value，返回 false 可阻止确认，支持返回 Promise<boolean>
+   * 类型: CalendarBeforeConfirm
+   */
+  beforeConfirm: Function as PropType<CalendarBeforeConfirm>,
+  /**
+   * 自定义视图类名
+   * 类型: string
+   */
+  customViewClass: makeStringProp(''),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   * 类型: boolean
+   * 默认值: false
+   */
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   * 类型: boolean
+   * 默认值: false
+   */
+  rootPortal: makeBooleanProp(false),
+  /**
+   * 控制弹窗显示
+   * 类型: boolean
+   * 默认值: false
+   */
+  visible: makeBooleanProp(false),
+  /**
+   * 可滚动面板的高度
+   * 类型: number
+   * 默认值: 316
+   */
+  panelHeight: makeNumberProp(316),
+  /**
+   * 是否展示面板标题，自动计算当前滚动的日期月份
+   * 类型: boolean
+   * 默认值: true
+   */
+  showPanelTitle: makeBooleanProp(true),
+  /**
+   * 切换模式
+   * 类型: 'none' | 'month' | 'year-month'
+   * 可选值: none 平铺展示所有月份/年份，不展示切换按钮 | month 支持按月切换，展示上个月/下个月按钮 | year-month 支持按年切换，也支持按月切换，展示上一年/下一年，上个月/下个月按钮
+   * 默认值: 'none'
+   */
+  switchMode: makeStringProp<'none' | 'month' | 'year-month'>('none'),
+  /**
+   * 弹框动画持续时间
+   * 类型: number
+   * 默认值: 200
+   */
+  duration: makeNumberProp(200)
+}
+
+export type CalendarInnerDisplayFormat = (value: number, rangeType: 'start' | 'end', type: CalendarType) => string
+
+export type CalendarBeforeConfirm = (value: number | number[] | null) => boolean | Promise<boolean>
+
+export type CalendarOnShortcutsClickOption = {
+  item: Record<string, any>
+  index: number
+}
+
+export type CalendarOnShortcutsClick = (option: CalendarOnShortcutsClickOption) => number | number[]
+
+export type CalendarExpose = {
+  /**
+   * 关闭时间选择器弹窗
+   */
+  close: () => void
+  /**
+   * 打开时间选择器弹窗
+   */
+  open: () => void
+}
+
+export type CalendarProps = ExtractPropTypes<typeof calendarProps>
+
+export type CalendarInstance = ComponentPublicInstance<CalendarProps, CalendarExpose>