@tplc/wot 1.0.6 → 1.0.8

package/components/wd-table/wd-table.vue

@@ -1,68 +1,109 @@
 <template>
   <view :class="`wd-table ${border ? 'is-border' : ''} ${customClass}`" :style="tableStyle">
-    <scroll-view
-      :enable-flex="true"
-      :throttle="false"
-      :scrollLeft="reactiveState.scrollLeft"
-      :scroll-x="true"
-      class="wd-table__header"
-      @scroll="scroll"
-      v-if="showHeader"
-    >
-      <view
-        id="table-header"
-        class="wd-table__content"
-        :style="realWidthStyle"
-        style="position: sticky; top: 0; z-index: 2"
+    <template v-if="fixedHeader">
+      <scroll-view
+        :enable-flex="true"
+        :throttle="false"
+        :scrollLeft="state.scrollLeft"
+        :scroll-x="true"
+        class="wd-table__header"
+        @scroll="scroll"
+        v-if="showHeader"
       >
-        <view
-          :class="`wd-table__cell ${border ? 'is-border' : ''} ${column.fixed ? 'is-fixed' : ''} ${stripe ? 'is-stripe' : ''} is-${column.align} ${
-            getIsLastFixed(column) && reactiveState.scrollLeft ? 'is-shadow' : ''
-          }`"
-          :style="getCellStyle(index)"
-          v-for="(column, index) in children"
-          :key="index"
-        >
-          <wd-sort-button
-            v-model="column.$.exposed!.sortDirection.value"
-            allow-reset
-            :line="false"
-            :title="column.label"
-            @change="(data: any) => handleSortChange(data.value, index)"
-            v-if="column.sortable"
-          />
-          <text v-else :class="`wd-table__value ${ellipsis ? 'is-ellipsis' : ''}`">
-            {{ column.label }}
-          </text>
+        <view id="table-header" class="wd-table__content wd-table__content--header" :style="realWidthStyle">
+          <view
+            :class="`wd-table__cell ${border ? 'is-border' : ''} ${column.fixed ? 'is-fixed' : ''} ${stripe ? 'is-stripe' : ''} is-${column.align} ${
+              getIsLastFixed(column) && state.scrollLeft ? 'is-shadow' : ''
+            }`"
+            :style="getCellStyle(index)"
+            v-for="(column, index) in children"
+            :key="index"
+          >
+            <wd-sort-button
+              v-model="column.$.exposed!.sortDirection.value"
+              allow-reset
+              :line="false"
+              :title="column.label"
+              @change="({ value }) => handleSortChange(value, index)"
+              v-if="column.sortable"
+            />
+            <text v-else :class="`wd-table__value ${ellipsis ? 'is-ellipsis' : ''}`">{{ column.label }}</text>
+          </view>
         </view>
-      </view>
-    </scroll-view>
-    <scroll-view
-      class="wd-table__body"
-      :style="bodyStyle"
-      :enable-flex="true"
-      :throttle="false"
-      :scroll-x="true"
-      @scroll="scroll"
-      :scrollLeft="reactiveState.scrollLeft"
-    >
-      <view id="table-body" class="wd-table__content" :style="realWidthStyle">
-        <wd-table-col
-          v-if="index !== false"
-          :prop="indexColumn.prop"
-          :label="indexColumn.label"
-          :width="indexColumn.width"
-          :sortable="indexColumn.sortable"
-          :fixed="indexColumn.fixed"
-          :align="indexColumn.align"
-        >
-          <template #value="{ index }">
-            <text>{{ index + 1 }}</text>
-          </template>
-        </wd-table-col>
-        <slot></slot>
-      </view>
-    </scroll-view>
+      </scroll-view>
+      <scroll-view
+        class="wd-table__body"
+        :style="bodyStyle"
+        :enable-flex="true"
+        :throttle="false"
+        :scroll-x="true"
+        @scroll="scroll"
+        :scrollLeft="state.scrollLeft"
+      >
+        <view id="table-body" class="wd-table__content" :style="realWidthStyle">
+          <wd-table-col
+            v-if="index !== false"
+            :prop="indexColumn.prop"
+            :label="indexColumn.label"
+            :width="indexColumn.width"
+            :sortable="indexColumn.sortable"
+            :fixed="indexColumn.fixed"
+            :align="indexColumn.align"
+          >
+            <template #value="{ index }">
+              <text>{{ index + 1 }}</text>
+            </template>
+          </wd-table-col>
+          <slot></slot>
+        </view>
+      </scroll-view>
+    </template>
+    <!-- 非固定表头时使用单个scroll-view -->
+    <template v-else>
+      <scroll-view class="wd-table__wrapper" :enable-flex="true" :throttle="false" :scroll-x="true" @scroll="scroll" :scrollLeft="state.scrollLeft">
+        <view class="wd-table__inner" :style="realWidthStyle">
+          <!-- 表头部分 -->
+          <view v-if="showHeader" class="wd-table__header-row">
+            <view
+              v-for="(column, index) in children"
+              :key="index"
+              :class="`wd-table__cell ${border ? 'is-border' : ''} ${column.fixed ? 'is-fixed' : ''} ${stripe ? 'is-stripe' : ''} is-${
+                column.align
+              } ${getIsLastFixed(column) && state.scrollLeft ? 'is-shadow' : ''}`"
+              :style="getCellStyle(index)"
+            >
+              <wd-sort-button
+                v-if="column.sortable"
+                v-model="column.$.exposed!.sortDirection.value"
+                allow-reset
+                :line="false"
+                :title="column.label"
+                @change="({ value }) => handleSortChange(value, index)"
+              />
+              <text v-else :class="`wd-table__value ${ellipsis ? 'is-ellipsis' : ''}`">{{ column.label }}</text>
+            </view>
+          </view>
+
+          <!-- 表格内容部分 -->
+          <view class="wd-table__content" :style="bodyStyle">
+            <wd-table-col
+              v-if="index !== false"
+              :prop="indexColumn.prop"
+              :label="indexColumn.label"
+              :width="indexColumn.width"
+              :sortable="indexColumn.sortable"
+              :fixed="indexColumn.fixed"
+              :align="indexColumn.align"
+            >
+              <template #value="{ index }">
+                <text>{{ index + 1 }}</text>
+              </template>
+            </wd-table-col>
+            <slot></slot>
+          </view>
+        </view>
+      </scroll-view>
+    </template>
   </view>
 </template>
 
@@ -72,20 +113,17 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 
 <script lang="ts" setup>
+import wdTableCol from '../wd-table-col/wd-table-col.vue'
+import wdSortButton from '../wd-sort-button/wd-sort-button.vue'
 import { type CSSProperties, computed, reactive, ref } from 'vue'
 import { addUnit, debounce, isDef, isObj, objToStyle, uuid } from '../common/util'
-import type {
-  SortDirection,
-  TableColumn,
-  TableColumnInstance,
-  TableColumnProps,
-} from '../wd-table-col/types'
+import type { SortDirection, TableColumn, TableColumnInstance, TableColumnProps } from '../wd-table-col/types'
 import { TABLE_KEY, tableProps, type TableProvide } from './types'
 import WdTableCol from '../wd-table-col/wd-table-col.vue'
 import { useTranslate } from '../composables/useTranslate'
@@ -96,17 +134,13 @@ const { translate } = useTranslate('tableCol')
 const props = defineProps(tableProps)
 const emit = defineEmits(['sort-method', 'row-click'])
 
-const reactiveState = reactive<TableProvide>({
-  props,
-  scrollLeft: 0,
-  rowClick,
-  getIsLastFixed,
-  getFixedStyle,
+const state = reactive({
+  scrollLeft: 0
 })
 
 const { linkChildren, children } = useChildren<TableColumnInstance, TableProvide>(TABLE_KEY)
 
-linkChildren(reactiveState)
+linkChildren({ props, state, rowClick, getIsLastFixed, getFixedStyle })
 
 const indexUUID = uuid()
 const indexColumn = ref<TableColumnProps>({
@@ -116,7 +150,7 @@ const indexColumn = ref<TableColumnProps>({
   sortable: false,
   fixed: false,
   align: 'left',
-  ...(isObj(props.index) ? props.index : {}),
+  ...(isObj(props.index) ? props.index : {})
 })
 
 const scroll = debounce(handleScroll, 100, { leading: false }) // 滚动事件
@@ -129,29 +163,27 @@ const tableStyle = computed(() => {
   if (isDef(props.height)) {
     style['max-height'] = addUnit(props.height)
   }
-  return `${objToStyle(style)};${props.customStyle}`
+  return `${objToStyle(style)}${props.customStyle}`
 })
 
 const realWidthStyle = computed(() => {
   const style: CSSProperties = {
-    display: 'flex',
+    display: 'flex'
   }
   let width: string | number = ''
   children.forEach((child) => {
     width = width ? `${width} + ${addUnit(child.width)}` : addUnit(child.width)
   })
-  style.width = `calc(${width})`
+  style['width'] = `calc(${width})`
   return objToStyle(style)
 })
 
 const bodyStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(props.height)) {
-    style.height = isDef(props.rowHeight)
-      ? `calc(${props.data.length} * ${addUnit(props.rowHeight)})`
-      : `calc(${props.data.length} * 50px)`
+    style['height'] = isDef(props.rowHeight) ? `calc(${props.data.length} * ${addUnit(props.rowHeight)})` : `calc(${props.data.length} * 50px)`
   }
-  return `${objToStyle(style)};`
+  return `${objToStyle(style)}`
 })
 
 /**
@@ -177,7 +209,7 @@ function getIsLastFixed(column: { fixed: boolean; prop: string }) {
 function getCellStyle(columnIndex: number) {
   let style: CSSProperties = {}
   if (isDef(children[columnIndex].width)) {
-    style.width = addUnit(children[columnIndex].width)
+    style['width'] = addUnit(children[columnIndex].width)
   }
   if (children[columnIndex].fixed) {
     style = getFixedStyle(columnIndex, style)
@@ -197,9 +229,9 @@ function getFixedStyle(columnIndex: number, style: CSSProperties) {
         left = left ? `${left} + ${addUnit(column.width)}` : addUnit(column.width)
       }
     })
-    style.left = `calc(${left})`
+    style['left'] = `calc(${left})`
   } else {
-    style.left = 0
+    style['left'] = 0
   }
   return style
 }
@@ -212,7 +244,7 @@ function getFixedStyle(columnIndex: number, style: CSSProperties) {
 function handleSortChange(value: SortDirection, index: number) {
   children[index].$.exposed!.sortDirection.value = value
   children.forEach((col, i) => {
-    if (index !== i) {
+    if (index != i) {
       col.$.exposed!.sortDirection.value = 0
     }
   })
@@ -230,7 +262,7 @@ function handleSortChange(value: SortDirection, index: number) {
     // 列的排序方向
     sortDirection: value,
     // 是否i固定列
-    fixed: children[index].fixed,
+    fixed: children[index].fixed
   }
   emit('sort-method', column)
 }
@@ -239,10 +271,7 @@ function handleSortChange(value: SortDirection, index: number) {
  * 滚动事件
  */
 function handleScroll(event: any) {
-  if (!props.showHeader) {
-    return
-  }
-  reactiveState.scrollLeft = event.detail.scrollLeft
+  state.scrollLeft = event.detail.scrollLeft
 }
 
 function rowClick(index: number) {
@@ -251,5 +280,5 @@ function rowClick(index: number) {
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-table-col/index.scss

@@ -13,6 +13,7 @@
   }
 }
 
+
 @include b(table-col) {
   .wd-table__cell {
     width: 100%;
@@ -20,18 +21,19 @@
 
   @include m(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%);
     }
   }
@@ -41,4 +43,4 @@
       border-bottom: none;
     }
   }
-}
+}

package/components/wd-table-col/types.ts

@@ -46,7 +46,7 @@ export const tableColumnProps = {
   /**
    * 列的对齐方式，可选值left,center,right
    */
-  align: makeStringProp<AlignType>('left'),
+  align: makeStringProp<AlignType>('left')
 }
 
 export type TableColumnProps = ExtractPropTypes<typeof tableColumnProps>

package/components/wd-table-col/wd-table-col.vue

@@ -1,6 +1,6 @@
 <template>
   <view
-    :class="`wd-table-col ${fixed ? 'wd-table-col--fixed' : ''} ${isLastFixed && isDef(table) && table.scrollLeft ? 'is-shadow' : ''}`"
+    :class="`wd-table-col ${fixed ? 'wd-table-col--fixed' : ''} ${isLastFixed && isDef(table) && table.state.scrollLeft ? 'is-shadow' : ''}`"
     :style="columnStyle"
   >
     <view
@@ -22,12 +22,12 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 <script lang="ts" setup>
-import { type CSSProperties, computed, ref, watch } from 'vue'
+import { type CSSProperties, computed, ref } from 'vue'
 import { addUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util'
 import { tableColumnProps, type SortDirection } from './types'
 import { useParent } from '../composables/useParent'
@@ -87,7 +87,7 @@ const isLastFixed = computed(() => {
 const columnStyle = computed(() => {
   let style: CSSProperties = {}
   if (isDef(props.width)) {
-    style.width = addUnit(props.width)
+    style['width'] = addUnit(props.width)
   }
   if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
     style = table.getFixedStyle(columnIndex.value, style)
@@ -100,9 +100,9 @@ const columnStyle = computed(() => {
  */
 const cellStyle = computed(() => {
   let style: CSSProperties = {}
-  const rowHeight: string | number = isDef(table) ? table.props.rowHeight : '80rpx' // 自定义行高
+  const rowHeight: string | number = isDef(table) && isDef(table.props) ? table.props.rowHeight : 50 // 自定义行高
   if (isDef(rowHeight)) {
-    style.height = addUnit(rowHeight)
+    style['height'] = addUnit(rowHeight)
   }
   if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
     style = table.getFixedStyle(columnIndex.value, style)
@@ -112,11 +112,11 @@ const cellStyle = computed(() => {
 
 // 列数据
 const column = computed(() => {
-  if (!isDef(table)) {
+  if (!isDef(table) || !isDef(table.props) || !isDef(table.props.data) || !Array.isArray(table.props.data)) {
     return []
   }
 
-  const column: any[] = table.props.data.map((item: any) => {
+  const column: any[] = table.props.data.map((item) => {
     return item[props.prop]
   })
   return column
@@ -135,15 +135,15 @@ function handleRowClick(index: number) {
 
 // 行数据
 function getScope(index: number) {
-  if (!isDef(table)) {
+  if (!isDef(table) || !isDef(table.props) || !isDef(table.props.data) || !Array.isArray(table.props.data)) {
     return {}
   }
   return table.props.data[index] || {}
 }
 
-defineExpose({ sortDirection })
+defineExpose({ sortDirection: sortDirection })
 </script>
 
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-tag/index.scss

@@ -1,21 +1,21 @@
 @import '../common/abstracts/variable';
 @import '../common/abstracts/mixin';
 
-@mixin tag-type-style($normalColor, $normalBg) {
+@mixin tag-type-style ($normalColor, $normalBg) {
   background: $normalBg;
 
   @include when(plain) {
-    padding: 0 4px;
-    color: $normalColor;
     background: transparent;
+    color: $normalColor;
     border: 1px solid $normalColor;
+    padding: 0 4px;
   }
   @include when(round) {
-    padding: 4px 11px;
-    font-size: $-tag-fs;
     line-height: 1.2;
-    color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color);
+    font-size: $-tag-fs;
+    padding: 4px 11px;
     background: transparent;
+    color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color);
     border: 1px solid if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
     border-radius: $-tag-round-radius;
   }
@@ -33,14 +33,14 @@
   }
 }
 @include b(tag) {
-  display: inline-block;
-  padding: 0 3px;
   font-size: $-tag-small-fs;
-  line-height: initial;
+  display: inline-block;
   color: $-tag-color;
-  vertical-align: middle;
+  padding: 0 3px;
   border-radius: 2px;
-  transition: opacity 0.3s;
+  transition: opacity .3s;
+  vertical-align: middle;
+  line-height: initial;
 
   @include when(default) {
     @include tag-type-style($-tag-info-color, $-tag-info-bg);
@@ -58,14 +58,14 @@
     @include tag-type-style($-tag-success-color, $-tag-success-bg);
   }
   @include when(icon) {
-    padding: 2px 5px;
     font-size: $-tag-fs;
     line-height: 1.2;
+    padding: 2px 5px;
   }
   @include when(dynamic) {
     box-sizing: border-box;
     width: 88px;
-    transition: 0.3s;
+    transition: .3s;
 
     &:active {
       color: $-tag-primary-color;
@@ -87,23 +87,23 @@
     vertical-align: text-top;
   }
   @include e(add-text) {
-    display: inline-block;
     width: 60px;
     height: 14px;
     min-height: 14px;
-    padding: 0;
+    display: inline-block;
     font-size: $-tag-fs;
     vertical-align: middle;
+    padding: 0;
   }
   @include e(close) {
     display: inline-block;
-    height: 14px;
-    margin-right: -4px;
     margin-left: 24px;
+    margin-right: -4px;
     font-size: $-tag-close-size;
+    height: 14px;
     line-height: 1.1;
-    color: $-tag-close-color;
     vertical-align: text-bottom;
+    color: $-tag-close-color;
 
     &:active {
       color: $-tag-close-active-color;
@@ -112,4 +112,4 @@
   @include edeep(add) {
     vertical-align: bottom;
   }
-}
+}

package/components/wd-tag/types.ts

@@ -75,7 +75,7 @@ export const tagProps = {
    * 类型：boolean
    * 默认值：false
    */
-  mark: makeBooleanProp(false),
+  mark: makeBooleanProp(false)
 }
 
 export type TagProps = ExtractPropTypes<typeof tagProps>

package/components/wd-tag/wd-tag.vue

@@ -15,7 +15,7 @@
       class="wd-tag__add-text"
       :placeholder="translate('placeholder')"
       type="text"
-      focus="true"
+      :focus="true"
       v-model="dynamicValue"
       @blur="handleBlur"
       @confirm="handleConfirm"
@@ -36,11 +36,12 @@ export default {
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared',
-  },
+    styleIsolation: 'shared'
+  }
 }
 </script>
 <script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
 import { objToStyle } from '../common/util'
 import { computed, ref, watch } from 'vue'
 import { useTranslate } from '../composables/useTranslate'
@@ -56,18 +57,11 @@ const dynamicValue = ref<string>('')
 const dynamicInput = ref<boolean>(false)
 
 watch(
-  [
-    () => props.useIconSlot,
-    () => props.icon,
-    () => props.plain,
-    () => props.dynamic,
-    () => props.round,
-    () => props.mark,
-  ],
+  [() => props.useIconSlot, () => props.icon, () => props.plain, () => props.dynamic, () => props.round, () => props.mark],
   () => {
     computeTagClass()
   },
-  { deep: true, immediate: true },
+  { deep: true, immediate: true }
 )
 
 watch(
@@ -79,7 +73,7 @@ watch(
     if (type.indexOf(newValue) === -1) console.error(`type must be one of ${type.toString()}`)
     computeTagClass()
   },
-  { deep: true, immediate: true },
+  { immediate: true }
 )
 
 watch(
@@ -87,7 +81,7 @@ watch(
   () => {
     computeTagClass()
   },
-  { deep: true, immediate: true },
+  { immediate: true }
 )
 
 const rootClass = computed(() => {
@@ -97,25 +91,25 @@ const rootClass = computed(() => {
 const rootStyle = computed(() => {
   const rootStyle: Record<string, any> = {}
   if (!props.plain && props.bgColor) {
-    rootStyle.background = props.bgColor
+    rootStyle['background'] = props.bgColor
   }
   if (props.bgColor) {
     rootStyle['border-color'] = props.bgColor
   }
-  return `${objToStyle(rootStyle)};${props.customStyle}`
+  return `${objToStyle(rootStyle)}${props.customStyle}`
 })
 
 const textStyle = computed(() => {
   const textStyle: Record<string, any> = {}
   if (props.color) {
-    textStyle.color = props.color
+    textStyle['color'] = props.color
   }
   return objToStyle(textStyle)
 })
 
 function computeTagClass() {
   const { type, plain, round, mark, dynamic, icon, useIconSlot } = props
-  const tagClassList: string[] = []
+  let tagClassList: string[] = []
   type && tagClassList.push(`is-${type}`)
   plain && tagClassList.push('is-plain')
   round && tagClassList.push('is-round')
@@ -142,7 +136,7 @@ function handleBlur() {
 function handleConfirm(event: any) {
   setDynamicInput()
   emit('confirm', {
-    value: event.detail.value,
+    value: event.detail.value
   })
 }
 function setDynamicInput() {
@@ -150,5 +144,5 @@ function setDynamicInput() {
 }
 </script>
 <style lang="scss" scoped>
-@import './index';
+@import './index.scss';
 </style>

package/components/wd-text/index.scss

@@ -1,7 +1,10 @@
 @import '../common/abstracts/variable';
 @import '../common/abstracts/mixin';
 
+
+
 @include b(text) {
+
   @include when(bold) {
     font-weight: bold;
   }
@@ -31,4 +34,4 @@
   @include when(success) {
     color: $-text-success-color;
   }
-}
+}