@tplc/wot 1.0.7 → 1.0.9

package/components/wd-button/index.scss

@@ -1,11 +1,12 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
 
 .wot-theme-dark {
   @include b(button) {
     @include when(info) {
-      color: $-dark-color3;
       background: $-dark-background4;
+      color: $-dark-color3;
     }
 
     @include when(plain) {
@@ -34,24 +35,27 @@
         color: $-dark-color-gray;
         background: transparent;
       }
+
     }
   }
 }
 
 @include b(button) {
+  margin-left: initial;
+  margin-right: initial;
   position: relative;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: normal;
-  color: $-button-normal-color;
+  display: inline-block;
+  outline: none;
   -webkit-appearance: none;
-  user-select: none;
   background: transparent;
+  box-sizing: border-box;
   border: none;
-  outline: none;
+  border-radius: 0;
+  color: $-button-normal-color;
   transition: opacity 0.2s;
+  user-select: none;
+  font-weight: normal;
+
 
   &::before {
     position: absolute;
@@ -59,17 +63,26 @@
     left: 50%;
     width: 100%;
     height: 100%;
-    content: ' ';
     background: $-color-black;
     border: inherit;
     border-color: $-color-black;
     border-radius: inherit;
-    opacity: 0;
     transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
   }
 
+
   &::after {
     border: none;
+    border-radius: 0;
+  }
+
+  @include e(content) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
   }
 
   @include m(active) {
@@ -91,43 +104,43 @@
   @include e(loading-svg) {
     width: 100%;
     height: 100%;
-    background-repeat: no-repeat;
     background-size: cover;
+    background-repeat: no-repeat;
   }
 
   @include when(loading) {}
 
   @include when(primary) {
-    color: $-button-primary-color;
     background: $-button-primary-bg-color;
+    color: $-button-primary-color;
   }
 
   @include when(success) {
-    color: $-button-success-color;
     background: $-button-success-bg-color;
+    color: $-button-success-color;
   }
 
   @include when(info) {
-    color: $-button-info-color;
     background: $-button-info-bg-color;
+    color: $-button-info-color;
   }
 
   @include when(warning) {
-    color: $-button-warning-color;
     background: $-button-warning-bg-color;
+    color: $-button-warning-color;
   }
 
   @include when(error) {
-    color: $-button-error-color;
     background: $-button-error-bg-color;
+    color: $-button-error-color;
   }
 
   @include when(small) {
     height: $-button-small-height;
     padding: $-button-small-padding;
+    border-radius: $-button-small-radius;
     font-size: $-button-small-fs;
     font-weight: normal;
-    border-radius: $-button-small-radius;
 
     .wd-button__loading {
       width: $-button-small-loading;
@@ -138,31 +151,12 @@
   @include when(medium) {
     height: $-button-medium-height;
     padding: $-button-medium-padding;
-    font-size: $-button-medium-fs;
     border-radius: $-button-medium-radius;
+    font-size: $-button-medium-fs;
+    min-width: 120px;
 
-    @include when(primary) {
-      box-shadow: $-button-medium-box-shadow-size $-button-primary-box-shadow-color;
-    }
-
-    @include when(success) {
-      box-shadow: $-button-medium-box-shadow-size $-button-success-box-shadow-color;
-    }
-
-    @include when(warning) {
-      box-shadow: $-button-medium-box-shadow-size $-button-warning-box-shadow-color;
-    }
-
-    @include when(error) {
-      box-shadow: $-button-medium-box-shadow-size $-button-error-box-shadow-color;
-    }
-
-    @include when(plain) {
-      box-shadow: none;
-    }
 
     @include when(round) {
-      min-width: 120px;
 
       @include when(icon) {
         min-width: 0;
@@ -170,8 +164,8 @@
       }
 
       @include when(text) {
-        min-width: 0;
         border-radius: 0;
+        min-width: 0;
       }
     }
 
@@ -184,46 +178,28 @@
   @include when(large) {
     height: $-button-large-height;
     padding: $-button-large-padding;
-    font-size: $-button-large-fs;
     border-radius: $-button-large-radius;
+    font-size: $-button-large-fs;
 
     &::after {
       border-radius: $-button-large-radius;
     }
 
-    &:not(.is-plain) {
-      @include when(primary) {
-        box-shadow: $-button-large-box-shadow-size $-button-primary-box-shadow-color;
-      }
-
-      @include when(success) {
-        box-shadow: $-button-large-box-shadow-size $-button-success-box-shadow-color;
-      }
-
-      @include when(warning) {
-        box-shadow: $-button-large-box-shadow-size $-button-warning-box-shadow-color;
-      }
-
-      @include when(error) {
-        box-shadow: $-button-large-box-shadow-size $-button-error-box-shadow-color;
-      }
-    }
-
     .wd-button__loading {
       width: $-button-large-loading;
       height: $-button-large-loading;
     }
   }
 
+
   @include when(round) {
-    overflow: hidden;
     border-radius: 999px;
   }
 
   @include when(text) {
+    color: $-button-primary-bg-color;
     min-width: 0;
     padding: 4px 0;
-    color: $-button-primary-bg-color;
 
     &::after {
       display: none;
@@ -235,6 +211,7 @@
       &:active::before {
         display: none;
       }
+
     }
 
     @include when(disabled) {
@@ -245,55 +222,80 @@
 
   @include when(plain) {
     background: $-button-plain-bg-color;
+    border: 1px solid currentColor;
 
     @include when(primary) {
       color: $-button-primary-bg-color;
-      border: 1px solid $-button-primary-bg-color;
     }
 
     @include when(success) {
       color: $-button-success-bg-color;
-      border: 1px solid $-button-success-bg-color;
     }
 
     @include when(info) {
       color: $-button-info-plain-normal-color;
-      border: 1px solid $-button-info-plain-border-color;
+      border-color: $-button-info-plain-border-color;
     }
 
     @include when(warning) {
       color: $-button-warning-bg-color;
-      border: 1px solid $-button-warning-bg-color;
     }
 
     @include when(error) {
       color: $-button-error-bg-color;
-      border: 1px solid $-button-error-bg-color;
     }
   }
 
   @include when(hairline) {
+    border-width: 0;
+
     &.is-plain {
-      border-width: 0;
-      border-radius: 0;
       @include halfPixelBorderSurround();
 
+      &::before {
+        border-radius: inherit;
+      }
+
       &::after {
         border-color: inherit;
       }
+
+      &.is-round {
+        &::after {
+          border-radius: inherit !important;
+        }
+      }
+
+      &.is-large {
+        &::after {
+          border-radius: calc(2 * $-button-large-radius);
+        }
+      }
+
+      &.is-medium {
+        &::after {
+          border-radius: calc(2 * $-button-medium-radius);
+        }
+      }
+
+      &.is-small {
+        &::after {
+          border-radius: calc(2 * $-button-small-radius);
+        }
+      }
     }
   }
 
   @include when(block) {
-    display: flex;
+    display: block;
   }
 
   @include when(icon) {
     width: $-button-icon-size;
     height: $-button-icon-size;
     padding: 0;
-    color: $-button-icon-color;
     border-radius: 50%;
+    color: $-button-icon-color;
 
     &::after {
       display: none;
@@ -317,17 +319,11 @@
   }
 
   @include e(text) {
-    white-space: nowrap;
     user-select: none;
+    white-space: nowrap;
   }
 }
 
-// 微信2.8.0以上版本加了较高层级的默认样式，需要重置掉
-.wd-button {
-  width: auto;
-  min-height: auto;
-}
-
 @keyframes wd-rotate {
   from {
     transform: rotate(0deg);
@@ -336,4 +332,4 @@
   to {
     transform: rotate(360deg);
   }
-}
+}

package/components/wd-button/types.ts

@@ -1,25 +1,50 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-15 11:36:12
- * @LastEditTime: 2024-07-23 11:38:09
+ * @LastEditTime: 2024-11-04 21:33:52
  * @LastEditors: weisheng
  * @Description:
  * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-button\types.ts
  * 记得注释
  */
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
 
-export type ButtonType =
-  | 'primary'
-  | 'success'
-  | 'info'
-  | 'warning'
-  | 'error'
-  | 'default'
-  | 'text'
-  | 'icon'
+export type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'text' | 'icon'
 export type ButtonSize = 'small' | 'medium' | 'large'
+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'
+
+export type ButtonScope = 'phoneNumber' | 'userInfo'
 
 export const buttonProps = {
   ...baseProps,
@@ -70,7 +95,7 @@ export const buttonProps = {
   /**
    * 开放能力
    */
-  openType: String,
+  openType: String as PropType<ButtonOpenType>,
   /**
    * 指定是否阻止本节点的祖先节点出现点击态
    */
@@ -78,7 +103,7 @@ export const buttonProps = {
   /**
    * 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文
    */
-  lang: String,
+  lang: String as PropType<ButtonLang>,
   /**
    * 会话来源，open-type="contact"时有效
    */
@@ -107,6 +132,11 @@ export const buttonProps = {
    * 按钮的唯一标识，可用于设置隐私同意授权按钮的id
    */
   buttonId: String,
+  /**
+   * 支付宝小程序，当 open-type 为 getAuthorize 时有效。
+   * 可选值：'phoneNumber' | 'userInfo'
+   */
+  scope: String as PropType<ButtonScope>
 }
 
 export type ButtonProps = ExtractPropTypes<typeof buttonProps>

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

@@ -7,17 +7,17 @@
       'wd-button',
       'is-' + type,
       'is-' + size,
-      plain ? 'is-plain' : '',
-      disabled ? 'is-disabled' : '',
       round ? 'is-round' : '',
       hairline ? 'is-hairline' : '',
+      plain ? 'is-plain' : '',
+      disabled ? 'is-disabled' : '',
       block ? 'is-block' : '',
       loading ? 'is-loading' : '',
-      customClass,
+      customClass
     ]"
     :hover-start-time="hoverStartTime"
     :hover-stay-time="hoverStayTime"
-    :open-type="disabled || loading ? '' : openType"
+    :open-type="disabled || loading ? undefined : openType"
     :send-message-title="sendMessageTitle"
     :send-message-path="sendMessagePath"
     :send-message-img="sendMessageImg"
@@ -26,26 +26,26 @@
     :session-from="sessionFrom"
     :lang="lang"
     :hover-stop-propagation="hoverStopPropagation"
+    :scope="scope"
     @click="handleClick"
+    @getAuthorize="handleGetAuthorize"
     @getuserinfo="handleGetuserinfo"
     @contact="handleConcat"
     @getphonenumber="handleGetphonenumber"
+    @getrealtimephonenumber="handleGetrealtimephonenumber"
     @error="handleError"
     @launchapp="handleLaunchapp"
     @opensetting="handleOpensetting"
     @chooseavatar="handleChooseavatar"
     @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
   >
-    <view v-if="loading" class="wd-button__loading">
-      <view class="wd-button__loading-svg" :style="loadingStyle"></view>
+    <view class="wd-button__content">
+      <view v-if="loading" class="wd-button__loading">
+        <view class="wd-button__loading-svg" :style="loadingStyle"></view>
+      </view>
+      <wd-icon v-else-if="icon" custom-class="wd-button__icon" :name="icon" :classPrefix="classPrefix"></wd-icon>
+      <view class="wd-button__text"><slot /></view>
     </view>
-    <wd-icon
-      v-else-if="icon"
-      custom-class="wd-button__icon"
-      :name="icon"
-      :classPrefix="classPrefix"
-    ></wd-icon>
-    <view class="wd-button__text"><slot /></view>
   </button>
 </template>
 
@@ -55,14 +55,15 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
-import { debounce } from '../common/util'
-import { computed, watch, ref } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, watch } from 'vue'
+import { ref } from 'vue'
 import base64 from '../common/base64'
 import { buttonProps } from './types'
 
@@ -81,11 +82,12 @@ const emit = defineEmits([
   'getuserinfo',
   'contact',
   'getphonenumber',
+  'getrealtimephonenumber',
   'error',
   'launchapp',
   'opensetting',
   'chooseavatar',
-  'agreeprivacyauthorization',
+  'agreeprivacyauthorization'
 ])
 
 const hoverStartTime = ref<number>(20)
@@ -101,13 +103,26 @@ watch(
   () => {
     buildLoadingSvg()
   },
-  { deep: true, immediate: true },
+  { deep: true, immediate: true }
 )
-const handleClick = debounce((event: any) => {
+
+function handleClick(event: any) {
   if (!props.disabled && !props.loading) {
     emit('click', event)
   }
-}, 200)
+}
+
+/**
+ * 支付宝小程序授权
+ * @param event
+ */
+function handleGetAuthorize(event: any) {
+  if (props.scope === 'phoneNumber') {
+    handleGetphonenumber(event)
+  } else if (props.scope === 'userInfo') {
+    handleGetuserinfo(event)
+  }
+}
 
 function handleGetuserinfo(event: any) {
   emit('getuserinfo', event.detail)
@@ -121,6 +136,10 @@ function handleGetphonenumber(event: any) {
   emit('getphonenumber', event.detail)
 }
 
+function handleGetrealtimephonenumber(event: any) {
+  emit('getrealtimephonenumber', event.detail)
+}
+
 function handleError(event: any) {
   emit('error', event.detail)
 }
@@ -172,5 +191,5 @@ function buildLoadingSvg() {
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>