@tplc/wot 1.0.7 → 1.0.9

package/components/wd-notify/wd-notify.vue

@@ -6,32 +6,31 @@
     :z-index="state.zIndex"
     :duration="250"
     :modal="false"
+    :root-portal="state.rootPortal"
     @leave="onClosed"
     @enter="onOpened"
   >
-    <view
-      class="wd-notify"
-      :class="[`wd-notify--${state.type}`]"
-      :style="{ color: state.color, background: state.background }"
-      @click="onClick"
-    >
+    <view class="wd-notify" :class="[`wd-notify--${state.type}`]" :style="{ color: state.color, background: state.background }" @click="onClick">
       <slot>{{ state.message }}</slot>
     </view>
   </wd-popup>
 </template>
 <script lang="ts">
 export default {
-  // #ifdef H5
   name: 'wd-notify',
-  // #endif
-  options: { virtualHost: true, addGlobalClass: true, styleIsolation: 'shared' },
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
-import { inject, computed, watch } from 'vue'
+import wdPopup from '../wd-popup/wd-popup.vue'
+import { inject, computed, watch, ref } from 'vue'
 import { notifyProps, type NotifyProps } from './types'
-import { getNotifyOptionKey } from '../wd-notify'
+import { getNotifyOptionKey } from '.'
 import { addUnit, isFunction } from '../common/util'
 
 const props = defineProps(notifyProps)
@@ -41,10 +40,10 @@ const emits = defineEmits<{
   (e: 'closed'): void
   (e: 'opened'): void
 }>()
-const state = inject<NotifyProps>(getNotifyOptionKey(props.selector), props)
+const state = inject(getNotifyOptionKey(props.selector), ref<NotifyProps>(props))
 
 const customStyle = computed(() => {
-  const { safeHeight, position } = state
+  const { safeHeight, position } = state.value
   let customStyle: string = ''
   switch (position) {
     case 'top':
@@ -60,24 +59,27 @@ const customStyle = computed(() => {
 })
 
 const onClick = (event: MouseEvent) => {
-  if (isFunction(state.onClick)) return state.onClick(event)
+  if (isFunction(state.value.onClick)) return state.value.onClick(event)
   emits('click', event)
 }
 const onClosed = () => {
-  if (isFunction(state.onClosed)) return state.onClosed()
+  if (isFunction(state.value.onClosed)) return state.value.onClosed()
   emits('closed')
 }
 const onOpened = () => {
-  if (isFunction(state.onOpened)) return state.onOpened()
+  if (isFunction(state.value.onOpened)) return state.value.onOpened()
   emits('opened')
 }
 
 watch(
-  () => state.visible,
-  (visible) => emits('update:visible', visible as boolean),
+  () => state.value.visible,
+  (visible) => {
+    emits('update:visible', visible as boolean)
+  },
+  { deep: true }
 )
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-number-keyboard/index.scss

@@ -1,11 +1,11 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 .wot-theme-dark {
   @include b(number-keyboard) {
     background: $-dark-background5;
 
-    @include e(header) {
+    @include e(header){
       color: $-dark-color;
     }
   }
@@ -13,9 +13,9 @@
 
 @include b(number-keyboard) {
   width: 100%;
+  background: $-number-keyboard-background;
   color: $-color-black;
   user-select: none;
-  background: $-number-keyboard-background;
 
   @include m(with-title) {
     border-radius: 20px 20px 0 0;
@@ -23,14 +23,14 @@
 
   @include e(header) {
     position: relative;
-    box-sizing: content-box;
     display: flex;
     align-items: center;
     justify-content: center;
+    box-sizing: content-box;
     height: $-number-keyboard-title-height;
     padding-top: 6px;
-    font-size: $-number-keyboard-title-font-size;
     color: $-number-keyboard-title-color;
+    font-size: $-number-keyboard-title-font-size;
   }
 
   @include e(title) {
@@ -56,17 +56,17 @@
 
   @include e(close) {
     position: absolute;
-    right: 0;
     display: flex;
     align-items: center;
+    right: 0;
     height: 100%;
     padding: $-number-keyboard-close-padding;
-    font-size: $-number-keyboard-close-font-size;
     color: $-number-keyboard-close-color;
+    font-size: $-number-keyboard-close-font-size;
     background-color: transparent;
     border: none;
-    @include m(hover) {
-      opacity: 0.6;
+    @include m(hover){
+      opacity: 0.6; 
     }
   }
 

package/components/wd-number-keyboard/key/index.scss

@@ -1,10 +1,10 @@
-@import './../../common/abstracts/_mixin';
-@import './../../common/abstracts/variable';
+@import "./../../common/abstracts/_mixin.scss";
+@import "./../../common/abstracts/variable.scss";
 
 .wot-theme-dark {
   @include b(key) {
-    color: $-dark-color;
     background: $-dark-background2;
+    color: $-dark-color;
 
     &:active {
       background-color: $-dark-background4;
@@ -13,14 +13,15 @@
     @include m(active) {
       background-color: $-dark-background4;
     }
+
   }
 }
 
 .wd-key-wrapper {
   position: relative;
-  box-sizing: border-box;
   flex: 1;
   flex-basis: 33%;
+  box-sizing: border-box;
   padding: 0 6px 6px 0;
 
   @include m(wider) {
@@ -76,4 +77,5 @@
   @include edeep(icon) {
     font-size: $-number-keyboard-icon-size;
   }
-}
+
+}

package/components/wd-number-keyboard/key/index.vue

@@ -1,10 +1,5 @@
 <template>
-  <view
-    :class="`wd-key-wrapper ${wider ? 'wd-key-wrapper--wider' : ''}`"
-    @touchstart="onTouchStart"
-    @touchmove="onTouchMove"
-    @touchend="onTouchEnd"
-  >
+  <view :class="`wd-key-wrapper ${wider ? 'wd-key-wrapper--wider' : ''}`" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
     <view :class="keyClass">
       <wd-loading custom-class="wd-key__loading-icon" v-if="props.loading" />
       <template v-if="type === 'delete'">
@@ -29,12 +24,14 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
+import wdLoading from '../../wd-loading/wd-loading.vue'
+import wdIcon from '../../wd-icon/wd-icon.vue'
 import { computed, ref } from 'vue'
 import { useTouch } from '../../composables/useTouch'
 import { keyProps } from './types'
@@ -72,5 +69,5 @@ function onTouchEnd() {
 </script>
 
 <style lang="scss">
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-number-keyboard/key/types.ts

@@ -7,5 +7,5 @@ export const keyProps = {
   text: makeNumericProp(''),
   wider: makeBooleanProp(false),
   large: makeBooleanProp(false),
-  loading: makeBooleanProp(false),
+  loading: makeBooleanProp(false)
 }

package/components/wd-number-keyboard/types.ts

@@ -76,4 +76,8 @@ export const numberKeyboardProps = {
    * 额外按键
    */
   extraKey: [String, Array] as PropType<string | Array<string>>,
+  /**
+   * 是否从页面中脱离出来，用于解决各种 fixed 失效问题 (H5: teleport, APP: renderjs, 小程序: root-portal)
+   */
+  rootPortal: makeBooleanProp(false)
 }

package/components/wd-number-keyboard/wd-number-keyboard.vue

@@ -7,48 +7,25 @@
     :modal-style="modal ? '' : 'opacity: 0;'"
     :modal="hideOnClickOutside"
     :lockScroll="lockScroll"
+    :root-portal="rootPortal"
     @click-modal="handleClose"
   >
     <view :class="`wd-number-keyboard ${customClass}`" :style="customStyle">
-      <view class="wd-number-keyboard__header" v-if="showTitle">
-        <slot name="title">
+      <view class="wd-number-keyboard__header" v-if="showHeader">
+        <slot name="title" v-if="showTitle">
           <text class="wd-number-keyboard__title">{{ title }}</text>
         </slot>
-        <view
-          class="wd-number-keyboard__close"
-          hover-class="wd-number-keyboard__close--hover"
-          v-if="showClose"
-          @click="handleClose"
-        >
+        <view class="wd-number-keyboard__close" hover-class="wd-number-keyboard__close--hover" v-if="showClose" @click="handleClose">
           <text>{{ closeText }}</text>
         </view>
       </view>
       <view class="wd-number-keyboard__body">
         <view class="wd-number-keyboard__keys">
-          <wd-key
-            v-for="key in keys"
-            :key="key.text"
-            :text="key.text"
-            :type="key.type"
-            :wider="key.wider"
-            @press="handlePress"
-          ></wd-key>
+          <wd-key v-for="key in keys" :key="key.text" :text="key.text" :type="key.type" :wider="key.wider" @press="handlePress"></wd-key>
         </view>
         <view class="wd-number-keyboard__sidebar" v-if="mode === 'custom'">
-          <wd-key
-            v-if="showDeleteKey"
-            large
-            :text="deleteText"
-            type="delete"
-            @press="handlePress"
-          ></wd-key>
-          <wd-key
-            large
-            :text="closeText"
-            type="close"
-            :loading="closeButtonLoading"
-            @press="handlePress"
-          ></wd-key>
+          <wd-key v-if="showDeleteKey" large :text="deleteText" type="delete" @press="handlePress"></wd-key>
+          <wd-key large :text="closeText" type="close" :loading="closeButtonLoading" @press="handlePress"></wd-key>
         </view>
       </view>
     </view>
@@ -60,26 +37,27 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
+import wdPopup from '../wd-popup/wd-popup.vue'
+import { computed, ref, useSlots, watch } from 'vue'
 import WdKey from './key/index.vue'
 import { numberKeyboardProps, type Key } from './types'
 import type { NumberKeyType } from './key/types'
 
 const props = defineProps(numberKeyboardProps)
 const emit = defineEmits(['update:visible', 'input', 'close', 'delete', 'update:modelValue'])
-
+const slots = useSlots()
 const show = ref(props.visible)
 watch(
   () => props.visible,
   (newValue) => {
     show.value = newValue
-  },
+  }
 )
 
 const keys = computed(() => (props.mode === 'custom' ? genCustomKeys() : genDefaultKeys()))
@@ -89,7 +67,11 @@ const showClose = computed(() => {
 })
 
 const showTitle = computed(() => {
-  return props.title || showClose.value
+  return !!props.title || !!slots.title
+})
+
+const showHeader = computed(() => {
+  return showTitle.value || showClose.value
 })
 
 /**
@@ -123,8 +105,8 @@ function genDefaultKeys(): Key[] {
     {
       // 根据条件是否显示删除键的文本和类型
       text: props.showDeleteKey ? props.deleteText : '',
-      type: props.showDeleteKey ? 'delete' : '',
-    },
+      type: props.showDeleteKey ? 'delete' : ''
+    }
   ]
 }
 
@@ -136,11 +118,7 @@ function genCustomKeys(): Key[] {
     keys.push({ text: 0, wider: true }, { text: extraKeys[0], type: 'extra' })
   } else if (extraKeys.length === 2) {
     // 如果有两个额外按键，则添加两个额外按键和一个数字0
-    keys.push(
-      { text: extraKeys[0], type: 'extra' },
-      { text: 0 },
-      { text: extraKeys[1], type: 'extra' },
-    )
+    keys.push({ text: extraKeys[0], type: 'extra' }, { text: 0 }, { text: extraKeys[1], type: 'extra' })
   }
 
   return keys
@@ -169,5 +147,5 @@ const handlePress = (text: string, type: NumberKeyType) => {
 </script>
 
 <style lang="scss">
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-overlay/index.scss

@@ -1,5 +1,5 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 .wot-theme-dark {
   @include b(overlay) {
@@ -9,9 +9,9 @@
 
 @include b(overlay) {
   position: fixed;
+  left: 0;
   top: 0;
   right: 0;
   bottom: 0;
-  left: 0;
   background: $-overlay-bg;
 }

package/components/wd-overlay/types.ts

@@ -12,7 +12,7 @@ export const overlayProps = {
    */
   duration: {
     type: [Object, Number, Boolean] as PropType<Record<string, number> | number | boolean>,
-    default: 300,
+    default: 300
   },
   /**
    * 是否锁定滚动
@@ -21,5 +21,5 @@ export const overlayProps = {
   /**
    * 层级
    */
-  zIndex: makeNumberProp(10),
+  zIndex: makeNumberProp(10)
 }

package/components/wd-overlay/wd-overlay.vue

@@ -5,8 +5,8 @@
     custom-class="wd-overlay"
     :duration="duration"
     :custom-style="`z-index: ${zIndex}; ${customStyle}`"
+    :disable-touch-move="lockScroll"
     @click="handleClick"
-    @touchmove.stop.prevent="lockScroll ? noop : ''"
   >
     <slot></slot>
   </wd-transition>
@@ -23,33 +23,25 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { inject, watch } from 'vue'
-import useLockScroll from '../composables/useLockScroll'
+import wdTransition from '../wd-transition/wd-transition.vue'
 import { overlayProps } from './types'
+// #ifdef H5
+import { useLockScroll } from '../composables/useLockScroll'
+// #endif
 
 const props = defineProps(overlayProps)
 
 const emit = defineEmits(['click'])
-const popupProvide = inject('wd-popup', {
-  value: false,
-})
-watch(
-  () => props.show,
-  (val) => {
-    popupProvide.value = val
-  },
-)
+
 function handleClick() {
   emit('click')
 }
 
-function noop() {}
-
 // #ifdef H5
 useLockScroll(() => props.show && props.lockScroll)
 // #endif
 </script>
 
 <style lang="scss">
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-pagination/index.scss

@@ -1,5 +1,5 @@
-@import './../common/abstracts/_mixin';
-@import './../common/abstracts/variable';
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
 
 .wot-theme-dark {
   @include b(pager) {
@@ -20,38 +20,38 @@
 
   @include e(content) {
     display: flex;
-    align-items: center;
     justify-content: flex-start;
+    align-items: center;
     padding: $-pagination-content-padding;
   }
   @include e(message) {
-    padding: $-pagination-message-padding;
-    font-size: $-pagination-message-fs;
-    color: $-pagination-message-color;
     text-align: center;
+    color:$-pagination-message-color;
+    font-size: $-pagination-message-fs;
+    padding: $-pagination-message-padding;
   }
   @include edeep(nav) {
     min-width: $-pagination-nav-width;
-    @include m(active) {
-      color: rgba(0, 0, 0, 0.65);
+    @include m(active){
+      color: rgba(0,0,0,0.65)      
     }
-    @include m(disabled) {
-      color: rgba(0, 0, 0, 0.15);
+    @include m(disabled){
+      color: rgba(0,0,0,0.15)      
     }
   }
-  @include e(size) {
+  @include e(size){
     flex: 1;
-    font-size: $-pagination-nav-content-fs;
     text-align: center;
+    font-size: $-pagination-nav-content-fs;
   }
-  @include e(separator) {
+  @include e(separator){
     padding: $-pagination-nav-sepatator-padding;
   }
-  @include edeep(left) {
-    display: inline-block;
+  @include edeep(left){
     transform: rotate(180deg) translateY(1px);
+    display: inline-block;
   }
-  @include e(current) {
+  @include e(current){
     color: $-pagination-nav-current-color;
   }
-}
+}

package/components/wd-pagination/types.ts

@@ -37,5 +37,5 @@ export const paginationProps = {
   /**
    * 总页数只有一页时是否隐藏
    */
-  hideIfOnePage: makeBooleanProp(true),
+  hideIfOnePage: makeBooleanProp(true)
 }

package/components/wd-pagination/wd-pagination.vue

@@ -1,18 +1,7 @@
 <template>
-  <view
-    :class="`wd-pager ${customClass}`"
-    :style="customStyle"
-    v-if="!(hideIfOnePage && totalPageNum === 1)"
-  >
+  <view :class="`wd-pager ${customClass}`" :style="customStyle" v-if="!(hideIfOnePage && totalPageNum === 1)">
     <view class="wd-pager__content">
-      <wd-button
-        :plain="modelValue > 1"
-        type="info"
-        size="small"
-        :disabled="modelValue <= 1"
-        custom-class="wd-pager__nav"
-        @click="sub"
-      >
+      <wd-button :plain="modelValue > 1" type="info" size="small" :disabled="modelValue <= 1" custom-class="wd-pager__nav" @click="sub">
         <text v-if="!showIcon">{{ prevText || translate('prev') }}</text>
         <wd-icon
           v-else
@@ -55,12 +44,14 @@ export default {
   options: {
     virtualHost: true,
     addGlobalClass: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdButton from '../wd-button/wd-button.vue'
 import { ref, watch } from 'vue'
 import { useTranslate } from '../composables/useTranslate'
 import { paginationProps } from './types'
@@ -79,7 +70,7 @@ watch(
       totalPageNum.value = newValue
     }
   },
-  { immediate: true, deep: true },
+  { immediate: true, deep: true }
 )
 
 watch(
@@ -87,7 +78,7 @@ watch(
   () => {
     updateTotalPage()
   },
-  { immediate: true, deep: true },
+  { immediate: true, deep: true }
 )
 
 function add() {
@@ -110,12 +101,10 @@ function sub() {
 
 function updateTotalPage() {
   const { total, pageSize } = props
-  if (total) {
-    totalPageNum.value = Math.ceil(total / pageSize)
-  }
+  totalPageNum.value = Math.ceil(total / pageSize)
 }
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-password-input/index.scss

@@ -1,5 +1,5 @@
-@import '../common/abstracts/variable';
-@import '../common/abstracts/mixin';
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
 
 .wot-theme-dark {
   @include b(password-input) {
@@ -49,9 +49,9 @@
     align-items: center;
     justify-content: center;
     height: 100%;
+    color: $-password-input-text-color;
     font-size: $-password-input-font-size;
     line-height: 1.2;
-    color: $-password-input-text-color;
     background: $-password-input-background;
 
     @include when(border) {
@@ -79,10 +79,10 @@
     left: 50%;
     width: $-password-input-dot-size;
     height: $-password-input-dot-size;
-    visibility: hidden;
     background: $-password-input-dot-color;
     border-radius: 100%;
     transform: translate(-50%, -50%);
+    visibility: hidden;
   }
 
   @include e(cursor) {
@@ -99,12 +99,13 @@
   @include e(info) {
     margin-top: $-password-input-margin;
     font-size: $-password-input-info-font-size;
-    color: $-password-input-info-color;
     text-align: center;
+    color: $-password-input-info-color;
 
     @include when(error) {
       color: $-password-input-error-info-color;
     }
+
   }
 }
 
@@ -120,4 +121,4 @@
   100% {
     opacity: 0;
   }
-}
+}

package/components/wd-password-input/types.ts

@@ -7,13 +7,7 @@
  * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-password-input\types.ts
  * 记得注释
  */
-import {
-  baseProps,
-  makeBooleanProp,
-  makeNumberProp,
-  makeNumericProp,
-  makeStringProp,
-} from '../common/props'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
 
 export const passwordInputProps = {
   ...baseProps,
@@ -44,5 +38,5 @@ export const passwordInputProps = {
   /**
    * 是否已聚焦，聚焦时会显示光标
    */
-  focused: makeBooleanProp(true),
+  focused: makeBooleanProp(true)
 }