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

package/components/wd-button/types.ts

@@ -0,0 +1,213 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../../common/props'
+import { type LoadingProps } from '../wd-loading/types'
+
+/**
+ * 按钮类型
+ * 可选值: 'primary' | 'success' | 'info' | 'warning' | 'danger'
+ */
+export type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'danger'
+/**
+ * 按钮变体
+ * 可选值: 'base' | 'plain' | 'dashed' | 'soft' | 'text'
+ */
+export type ButtonVariant = 'base' | 'plain' | 'dashed' | 'soft' | 'text'
+/**
+ * 按钮尺寸
+ * 可选值: 'mini' | 'small' | 'medium' | 'large'
+ */
+export type ButtonSize = 'mini' | 'small' | 'medium' | 'large'
+/**
+ * 语言
+ * 可选值: 'zh_CN' | 'zh_TW' | 'en'
+ */
+export type ButtonLang = 'zh_CN' | 'zh_TW' | 'en'
+
+/**
+ * 开放能力类型
+ */
+export type ButtonOpenType =
+  | 'feedback'
+  | 'share'
+  | 'getUserInfo'
+  | 'contact'
+  | 'getPhoneNumber'
+  | 'getRealtimePhoneNumber'
+  | 'launchApp'
+  | 'openSetting'
+  | 'chooseAvatar'
+  | 'getAuthorize'
+  | 'lifestyle'
+  | 'contactShare'
+  | 'openGroupProfile'
+  | 'openGuildProfile'
+  | 'openPublicProfile'
+  | 'shareMessageToFriend'
+  | 'addFriend'
+  | 'addColorSign'
+  | 'addGroupApp'
+  | 'addToFavorites'
+  | 'chooseAddress'
+  | 'chooseInvoiceTitle'
+  | 'login'
+  | 'subscribe'
+  | 'favorite'
+  | 'watchLater'
+  | 'openProfile'
+  | 'agreePrivacyAuthorization'
+
+/**
+ * 支付宝小程序授权范围
+ * 可选值: 'phoneNumber' | 'userInfo'
+ */
+export type ButtonScope = 'phoneNumber' | 'userInfo'
+
+/**
+ * 按钮属性定义
+ */
+export const buttonProps = {
+  ...baseProps,
+  /**
+   * 圆角按钮
+   * 默认值: false
+   */
+  round: makeBooleanProp(false),
+  /**
+   * 禁用按钮
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否细边框
+   * 默认值: false
+   */
+  hairline: makeBooleanProp(false),
+  /**
+   * 块状按钮
+   * 默认值: false
+   */
+  block: makeBooleanProp(false),
+  /**
+   * 按钮类型
+   * 类型: ButtonType
+   * 可选值: 'primary' | 'success' | 'info' | 'warning' | 'danger'
+   * 默认值: 'primary'
+   */
+  type: makeStringProp<ButtonType>('primary'),
+  /**
+   * 按钮尺寸
+   * 类型: ButtonSize
+   * 可选值: 'mini' | 'small' | 'medium' | 'large'
+   * 默认值: 'medium'
+   */
+  size: makeStringProp<ButtonSize>('medium'),
+  /**
+   * 图标类名
+   */
+  icon: String,
+  /**
+   * 类名前缀，用于使用自定义图标，用法参考 Icon 组件
+   * 默认值: 'wd-icon'
+   */
+  classPrefix: makeStringProp('wd-icon'),
+  /**
+   * CSS 图标，用法参考 Icon 组件
+   * 类型: boolean | string
+   * 默认值: false
+   */
+  cssIcon: {
+    type: [Boolean, String],
+    default: false
+  },
+  /**
+   * 加载中按钮
+   * 默认值: false
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载图标颜色
+   */
+  loadingColor: String,
+  /**
+   * 开放能力
+   * 类型: ButtonOpenType
+   */
+  openType: String as PropType<ButtonOpenType>,
+  /**
+   * 指定是否阻止本节点的祖先节点出现点击态
+   * 默认值: false
+   */
+  hoverStopPropagation: Boolean,
+  /**
+   * 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文
+   * 类型: ButtonLang
+   * 可选值: 'zh_CN' | 'zh_TW' | 'en'
+   */
+  lang: String as PropType<ButtonLang>,
+  /**
+   * 会话来源，open-type="contact"时有效
+   */
+  sessionFrom: String,
+  /**
+   * 会话内消息卡片标题，open-type="contact"时有效
+   */
+  sendMessageTitle: String,
+  /**
+   * 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+   */
+  sendMessagePath: String,
+  /**
+   * 会话内消息卡片图片，open-type="contact"时有效
+   */
+  sendMessageImg: String,
+  /**
+   * 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+   */
+  appParameter: String,
+  /**
+   * 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
+   * 默认值: false
+   */
+  showMessageCard: Boolean,
+  /**
+   * 按钮的唯一标识，可用于设置隐私同意授权按钮的id
+   */
+  buttonId: String,
+  /**
+   * 支付宝小程序，当 open-type 为 getAuthorize 时有效
+   * 类型: ButtonScope
+   * 可选值: 'phoneNumber' | 'userInfo'
+   */
+  scope: String as PropType<ButtonScope>,
+  /**
+   * 加载配置项
+   * 类型: Partial<LoadingProps>
+   */
+  loadingProps: Object as PropType<Partial<LoadingProps>>,
+  /**
+   * 点击按钮后，等待多少毫秒后出现点击态，单位毫秒
+   * 默认值: 20
+   */
+  hoverStartTime: makeNumberProp(20),
+  /**
+   * 手指松开后，等待多少毫秒后移除点击态，单位毫秒
+   * 默认值: 70
+   */
+  hoverStayTime: makeNumberProp(70),
+  /**
+   * 按钮文本
+   */
+  text: String,
+  /**
+   * 按钮变体
+   * 类型: ButtonVariant
+   * 可选值: 'base' | 'plain' | 'dashed' | 'soft' | 'text'
+   * 默认值: 'base'
+   */
+  variant: makeStringProp<ButtonVariant>('base')
+}
+
+/**
+ * 按钮组件属性
+ */
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>

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 || cssIcon" custom-class="wd-button__icon" :name="icon" :class-prefix="classPrefix" :css-icon="cssIcon"></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 || props.cssIcon)
+})
+
+/**
+ * 处理点击事件
+ * @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;
+  }
+}