@tplc/wot 1.0.7 → 1.0.9

package/components/wd-tab/types.ts

@@ -1,5 +1,6 @@
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeBooleanProp, numericProp } from '../common/props'
+import type { BadgeProps } from '../wd-badge/types'
 
 export const tabProps = {
   ...baseProps,
@@ -15,6 +16,15 @@ export const tabProps = {
    *  是否禁用，无法点击
    */
   disabled: makeBooleanProp(false),
+  /**
+   * 是否懒加载，切换到该tab时才加载内容
+   * @default true
+   */
+  lazy: makeBooleanProp(true),
+  /**
+   * 徽标属性，透传给 Badge 组件
+   */
+  badgeProps: Object as PropType<Partial<BadgeProps>>,
 }
 
 export type TabProps = ExtractPropTypes<typeof tabProps>

package/components/wd-tab/wd-tab.vue

@@ -1,6 +1,10 @@
 <template>
   <view :class="`wd-tab ${customClass}`" :style="customStyle">
-    <view v-if="painted" class="wd-tab__body" :style="isShow ? '' : 'display: none;'">
+    <view
+      :class="['wd-tab__body', { 'wd-tab__body--inactive': !active }]"
+      v-if="shouldBeRender"
+      :style="tabBodyStyle"
+    >
       <slot />
     </view>
   </view>
@@ -16,29 +20,44 @@ export default {
 }
 </script>
 <script lang="ts" setup>
-import { getCurrentInstance, ref, watch, computed } from 'vue'
-import { isDef, isNumber, isString } from '../common/util'
+import { getCurrentInstance, ref, watch, type CSSProperties } from 'vue'
+import { isDef, isNumber, isString, objToStyle } from '../common/util'
 import { useParent } from '../composables/useParent'
 import { TABS_KEY } from '../wd-tabs/types'
+import { computed } from 'vue'
 import { tabProps } from './types'
 
 const props = defineProps(tabProps)
 
-const painted = ref<boolean>(false) // 初始状态tab不会渲染，必须通过tabs来设置painted使tab渲染
-const isShow = ref<boolean>(false)
 const { proxy } = getCurrentInstance() as any
 const { parent: tabs, index } = useParent(TABS_KEY)
 
 // 激活项下标
-const activeIndex = computed(() => {
-  return isDef(tabs) ? tabs.state.activeIndex : 0
+const active = computed(() => {
+  return isDef(tabs) ? tabs.state.activeIndex === index.value : false
+})
+
+const painted = ref<boolean>(active.value) // 初始状态tab不会渲染，必须通过tabs来设置painted使tab渲染
+
+const tabBodyStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (!active.value && (!isDef(tabs) || !(tabs as any).props.animated)) {
+    style.display = 'none'
+  }
+  return objToStyle(style)
+})
+
+const shouldBeRender = computed(() => !props.lazy || painted.value || active.value)
+
+watch(active, (val) => {
+  if (val) painted.value = true
 })
 
 watch(
   () => props.name,
   (newValue) => {
     if (isDef(newValue) && !isNumber(newValue) && !isString(newValue)) {
-      console.error('[wot design] error(wd-tab): the type of name should be number or string')
+      console.error('[wot ui] error(wd-tab): the type of name should be number or string')
       return
     }
     if (tabs) {
@@ -51,18 +70,6 @@ watch(
   },
 )
 
-watch(
-  () => activeIndex.value,
-  (newValue) => {
-    if (newValue === index.value) {
-      setShow(true, true)
-    } else {
-      setShow(painted.value, false)
-    }
-  },
-  { deep: true, immediate: true },
-)
-
 /**
  * @description 检测tab绑定的name是否和其它tab的name冲突
  * @param {Object} self 自身
@@ -79,22 +86,7 @@ function checkName(self: any) {
       }
     })
 }
-
-/**
- * 设置子组件展示
- * @param setPainted
- * @param setIsShow
- */
-function setShow(setPainted: boolean, setIsShow: boolean) {
-  painted.value = setPainted
-  isShow.value = setIsShow
-}
-
-defineExpose({
-  setShow,
-  painted,
-})
 </script>
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-tabbar/index.scss

@@ -8,21 +8,22 @@
 }
 
 @include b(tabbar) {
-  position: relative;
   display: flex;
-  flex-wrap: nowrap;
   align-items: center;
-  height: $-tabbar-height;
+  flex-wrap: nowrap;
+  position: relative;
   background: $-color-white;
+  height: $-tabbar-height;
 
   @include e(placeholder) {
+    box-sizing: content-box;
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }
 
   @include m(round) {
-    margin-right: 32rpx;
     margin-left: 32rpx;
+    margin-right: 32rpx;
     border-radius: 999px;
     box-shadow: $-tabbar-box-shadow;
 
@@ -32,16 +33,20 @@
         bottom: env(safe-area-inset-bottom);
       }
     }
+
   }
 
   @include m(default) {
+
     @include when(fixed) {
       @include when(safe) {
+        box-sizing: content-box;
         padding-bottom: constant(safe-area-inset-bottom);
         padding-bottom: env(safe-area-inset-bottom);
       }
     }
 
+
     @include when(border) {
       @include halfPixelBorder('top');
     }
@@ -49,9 +54,9 @@
 
   @include when(fixed) {
     position: fixed;
-    right: 0;
-    bottom: 0;
     left: 0;
+    bottom: 0;
+    right: 0;
     z-index: 500;
   }
-}
+}

package/components/wd-tabbar/types.ts

@@ -1,20 +1,5 @@
-/*
- * @Author: weisheng
- * @Date: 2024-03-15 20:40:34
- * @LastEditTime: 2024-03-18 15:38:37
- * @LastEditors: weisheng
- * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-tabbar\types.ts
- * 记得注释
- */
 import { type ExtractPropTypes, type InjectionKey } from 'vue'
-import {
-  baseProps,
-  makeBooleanProp,
-  makeNumberProp,
-  makeNumericProp,
-  makeStringProp,
-} from '../common/props'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
 import type { TabbarItem } from '../wd-tabbar-item/types'
 
 type TabbarShape = 'default' | 'round'
@@ -60,7 +45,7 @@ export const tabbarProps = {
    */
   bordered: makeBooleanProp(true),
   /**
-   * 是否设置底部安全距禿（iPhone X 类型的机型）
+   * 是否设置底部安全距离（iPhone X 类型的机型）
    */
   safeAreaInsetBottom: makeBooleanProp(false),
   /**
@@ -82,7 +67,7 @@ export const tabbarProps = {
   /**
    * 自定义组件的层级
    */
-  zIndex: makeNumberProp(99),
+  zIndex: makeNumberProp(99)
 }
 
 export type TabbarProps = ExtractPropTypes<typeof tabbarProps>

package/components/wd-tabbar/wd-tabbar.vue

@@ -1,10 +1,5 @@
 <template>
-  <view
-    :class="{
-      'wd-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round',
-    }"
-    :style="{ height: addUnit(height) }"
-  >
+  <view :class="{ 'wd-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round' }" :style="{ height: addUnit(height) }">
     <view
       :class="`wd-tabbar wd-tabbar--${shape} ${customClass} ${fixed ? 'is-fixed' : ''} ${safeAreaInsetBottom ? 'is-safe' : ''} ${
         bordered ? 'is-border' : ''
@@ -21,20 +16,12 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 <script lang="ts" setup>
-import {
-  getCurrentInstance,
-  onMounted,
-  ref,
-  watch,
-  nextTick,
-  computed,
-  type CSSProperties,
-} from 'vue'
+import { getCurrentInstance, onMounted, ref, watch, nextTick, computed, type CSSProperties } from 'vue'
 import type { TabbarItem } from '../wd-tabbar-item/types'
 import { addUnit, getRect, isDef, objToStyle } from '../common/util'
 import { useChildren } from '../composables/useChildren'
@@ -50,7 +37,7 @@ const { linkChildren } = useChildren(TABBAR_KEY)
 
 linkChildren({
   props,
-  setChange,
+  setChange
 })
 
 const rootStyle = computed(() => {
@@ -58,7 +45,7 @@ const rootStyle = computed(() => {
   if (isDef(props.zIndex)) {
     style['z-index'] = props.zIndex
   }
-  return `${objToStyle(style)};${props.customStyle}`
+  return `${objToStyle(style)}${props.customStyle}`
 })
 
 watch(
@@ -66,7 +53,7 @@ watch(
   () => {
     setPlaceholderHeight()
   },
-  { deep: true, immediate: false },
+  { deep: true, immediate: false }
 )
 
 onMounted(() => {
@@ -82,10 +69,10 @@ onMounted(() => {
  * @param child 子项
  */
 function setChange(child: TabbarItem) {
-  const active = child.name
+  let active = child.name
   emit('update:modelValue', active)
   emit('change', {
-    value: active,
+    value: active
   })
 }
 
@@ -100,5 +87,5 @@ function setPlaceholderHeight() {
 }
 </script>
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-tabbar-item/index.scss

@@ -4,7 +4,7 @@
 .wot-theme-dark {
   @include b(tabbar-item) {
     @include e(body) {
-      :deep() {
+      :deep(){
         @include when(inactive) {
           color: $-dark-color-gray;
         }
@@ -13,34 +13,36 @@
   }
 }
 
+
 @include b(tabbar-item) {
-  display: flex;
   flex: 1;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
   text-align: center;
   text-decoration: none;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
   @include e(body) {
-    position: relative;
     display: flex;
-    flex-direction: column;
     align-items: center;
-    padding: 0;
+    flex-direction: column;
     line-height: 1;
-
-    :deep() {
+    padding: 0;
+    position: relative;
+    
+    :deep(){
       @include when(active) {
         color: $-tabbar-active-color;
       }
-
+  
       @include when(inactive) {
         color: $-tabbar-inactive-color;
       }
     }
   }
 
+
   @include e(body-title) {
     font-size: $-tabbar-item-title-font-size;
     line-height: $-tabbar-item-title-line-height;
@@ -49,4 +51,5 @@
   @include edeep(body-icon) {
     font-size: $-tabbar-item-icon-size;
   }
-}
+  
+}

package/components/wd-tabbar-item/types.ts

@@ -29,14 +29,14 @@ export const tabbarItemProps = {
    */
   value: {
     type: [Number, String, null] as PropType<number | string | null>,
-    default: null,
+    default: null
   },
   /**
    * 是否点状徽标
    */
   isDot: {
     type: Boolean,
-    default: undefined,
+    default: undefined
   },
   /**
    * 徽标最大值
@@ -45,7 +45,7 @@ export const tabbarItemProps = {
   /**
    * 徽标属性，透传给 Badge 组件
    */
-  badgeProps: Object as PropType<BadgeProps>,
+  badgeProps: Object as PropType<BadgeProps>
 }
 
 export type TabbarItemProps = ExtractPropTypes<typeof tabbarItemProps>

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

@@ -10,11 +10,7 @@
             :custom-class="`wd-tabbar-item__body-icon ${active ? 'is-active' : 'is-inactive'}`"
           ></wd-icon>
         </template>
-        <text
-          v-if="title"
-          :style="textStyle"
-          :class="`wd-tabbar-item__body-title ${active ? 'is-active' : 'is-inactive'}`"
-        >
+        <text v-if="title" :style="textStyle" :class="`wd-tabbar-item__body-title ${active ? 'is-active' : 'is-inactive'}`">
           {{ title }}
         </text>
       </view>
@@ -27,11 +23,13 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 <script lang="ts" setup>
+import wdBadge from '../wd-badge/wd-badge.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
 import { type CSSProperties, computed } from 'vue'
 import { deepAssign, isDef, isUndefined, objToStyle, omitBy } from '../common/util'
 import { useParent } from '../composables/useParent'
@@ -50,10 +48,10 @@ const customBadgeProps = computed(() => {
       {
         max: props.max,
         isDot: props.isDot,
-        modelValue: props.value,
+        modelValue: props.value
       },
-      isUndefined,
-    ),
+      isUndefined
+    )
   )
   if (!isDef(badgeProps.max)) {
     badgeProps.max = 99
@@ -65,10 +63,10 @@ const textStyle = computed(() => {
   const style: CSSProperties = {}
   if (tabbar) {
     if (active.value && tabbar.props.activeColor) {
-      style.color = tabbar.props.activeColor
+      style['color'] = tabbar.props.activeColor
     }
     if (!active.value && tabbar.props.inactiveColor) {
-      style.color = tabbar.props.inactiveColor
+      style['color'] = tabbar.props.inactiveColor
     }
   }
 
@@ -97,5 +95,5 @@ function handleClick() {
 }
 </script>
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-table/index.scss

@@ -31,6 +31,8 @@
   }
 }
 
+
+
 @include b(table) {
   position: relative;
   width: 100%;
@@ -52,35 +54,41 @@
   }
 
   @include e(header) {
+    width: 100%;
+    height: 50px;
     position: sticky;
     top: 0;
     z-index: 2;
     display: flex;
-    width: 100%;
-    height: 50px;
     overflow-x: auto;
     white-space: nowrap;
   }
 
   @include e(body) {
-    box-sizing: border-box;
     width: 100%;
+    box-sizing: border-box;
   }
 
   @include e(content) {
     display: flex;
+
+    @include m(header) {
+      position: sticky;
+      top: 0;
+      z-index: 2
+    }
   }
 
   @include e(cell) {
-    box-sizing: border-box;
     display: flex;
     align-items: center;
+    box-sizing: border-box;
+    background: $-table-bg;
     width: 100px;
     min-height: 50px;
     padding: 8px 10px;
     font-size: $-table-font-size;
     color: $-table-color;
-    background: $-table-bg;
     --wot-sort-button-height: 30px;
 
     @include when(border) {
@@ -94,18 +102,19 @@
 
     @include when(fixed) {
       position: sticky;
-      left: 0;
       z-index: 1;
+      left: 0;
     }
 
     @include when(shadow) {
       &::after {
+        content: ' ';
         position: absolute;
-        top: 0;
+        height: 100%;
         right: -30rpx;
+        top: 0;
         width: 30rpx;
         height: 100%;
-        content: ' ';
         background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
       }
     }
@@ -123,10 +132,32 @@
     }
   }
 
+  @include e(wrapper) {
+    width: 100%;
+    overflow: auto;
+  }
+
+  @include e(inner) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include e(header-row) {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  @include e(body) {
+    display: flex;
+    width: 100%;
+  }
+
   @include e(value) {
+    white-space: normal;
     @include when(ellipsis) {
       word-break: break-all;
       @include multiEllipsis(2);
     }
   }
-}
+}

package/components/wd-table/types.ts

@@ -1,21 +1,16 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-15 11:36:12
- * @LastEditTime: 2024-07-18 19:02:32
+ * @LastEditTime: 2024-12-08 23:22:26
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-table\types.ts
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-table/types.ts
  * 记得注释
  */
-import type { CSSProperties, ExtractPropTypes, PropType } from 'vue'
-import {
-  baseProps,
-  makeBooleanProp,
-  makeNumberProp,
-  makeRequiredProp,
-  makeStringProp,
-} from '../common/props'
+import type { CSSProperties, ExtractPropTypes, InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeNumericProp, makeRequiredProp, numericProp } from '../common/props'
 import type { TableColumnProps } from '../wd-table-col/types'
+import type { PropType } from 'vue'
 
 export const tableProps = {
   ...baseProps,
@@ -34,11 +29,11 @@ export const tableProps = {
   /**
    * Table 的高度
    */
-  height: makeStringProp('80vh'),
+  height: numericProp,
   /**
    * 行高
    */
-  rowHeight: makeNumberProp(50),
+  rowHeight: makeNumericProp(50),
   /**
    * 是否显示表头
    */
@@ -52,18 +47,21 @@ export const tableProps = {
    */
   index: {
     type: [Object, Boolean] as PropType<boolean | Omit<Partial<TableColumnProps>, 'prop'>>,
-    default: false,
+    default: false
   },
+  fixedHeader: makeBooleanProp(true)
 }
 
 export type TableProps = ExtractPropTypes<typeof tableProps>
 
 export type TableProvide = {
   props: Omit<TableProps, 'index' | 'customStyle' | 'customClass'>
-  scrollLeft: number
+  state: {
+    scrollLeft: number
+  }
   rowClick: (index: number) => void
   getIsLastFixed: (column: { fixed: boolean; prop: string }) => boolean
   getFixedStyle: (index: number, style: CSSProperties) => CSSProperties
 }
 
-export const TABLE_KEY: symbol = Symbol('wd-table')
+export const TABLE_KEY: InjectionKey<TableProvide> = Symbol('wd-table')