@tplc/wot 0.0.1

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

@@ -0,0 +1,255 @@
+<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"
+      >
+        <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>
+      </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>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-table',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+
+<script lang="ts" setup>
+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 { TABLE_KEY, tableProps, type TableProvide } from './types'
+import WdTableCol from '../wd-table-col/wd-table-col.vue'
+import { useTranslate } from '../composables/useTranslate'
+import { useChildren } from '../composables/useChildren'
+
+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 { linkChildren, children } = useChildren<TableColumnInstance, TableProvide>(TABLE_KEY)
+
+linkChildren(reactiveState)
+
+const indexUUID = uuid()
+const indexColumn = ref<TableColumnProps>({
+  prop: indexUUID,
+  label: translate('indexLabel'),
+  width: '100rpx',
+  sortable: false,
+  fixed: false,
+  align: 'left',
+  ...(isObj(props.index) ? props.index : {}),
+})
+
+const scroll = debounce(handleScroll, 100, { leading: false }) // 滚动事件
+
+/**
+ * 容器样式
+ */
+const tableStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.height)) {
+    style['max-height'] = addUnit(props.height)
+  }
+  return `${objToStyle(style)};${props.customStyle}`
+})
+
+const realWidthStyle = computed(() => {
+  const style: CSSProperties = {
+    display: 'flex',
+  }
+  let width: string | number = ''
+  children.forEach((child) => {
+    width = width ? `${width} + ${addUnit(child.width)}` : addUnit(child.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)`
+  }
+  return `${objToStyle(style)};`
+})
+
+/**
+ * 是否最后一个固定元素
+ * @param column 列数据
+ */
+function getIsLastFixed(column: { fixed: boolean; prop: string }) {
+  let isLastFixed: boolean = false
+  if (column.fixed && isDef(children)) {
+    const columns = children.filter((child) => {
+      return child.fixed
+    })
+    if (columns.length && columns[columns.length - 1].prop === column.prop) {
+      isLastFixed = true
+    }
+  }
+  return isLastFixed
+}
+
+/**
+ * 表头单元格样式
+ */
+function getCellStyle(columnIndex: number) {
+  let style: CSSProperties = {}
+  if (isDef(children[columnIndex].width)) {
+    style.width = addUnit(children[columnIndex].width)
+  }
+  if (children[columnIndex].fixed) {
+    style = getFixedStyle(columnIndex, style)
+  }
+  return objToStyle(style)
+}
+
+/**
+ * 获取固定列样式
+ * @param columnIndex
+ */
+function getFixedStyle(columnIndex: number, style: CSSProperties) {
+  if (columnIndex > 0) {
+    let left: string | number = ''
+    children.forEach((column, index) => {
+      if (index < columnIndex) {
+        left = left ? `${left} + ${addUnit(column.width)}` : addUnit(column.width)
+      }
+    })
+    style.left = `calc(${left})`
+  } else {
+    style.left = 0
+  }
+  return style
+}
+
+/**
+ * 排序
+ * @param value
+ * @param index
+ */
+function handleSortChange(value: SortDirection, index: number) {
+  children[index].$.exposed!.sortDirection.value = value
+  children.forEach((col, i) => {
+    if (index !== i) {
+      col.$.exposed!.sortDirection.value = 0
+    }
+  })
+  const column: TableColumn = {
+    // 列对应字段
+    prop: children[index].prop,
+    // 列对应字段标题
+    label: children[index].label,
+    // 列宽度
+    width: children[index].width,
+    // 是否开启列排序
+    sortable: children[index].sortable,
+    // 列的对齐方式，可选值left,center,right
+    align: children[index].align,
+    // 列的排序方向
+    sortDirection: value,
+    // 是否i固定列
+    fixed: children[index].fixed,
+  }
+  emit('sort-method', column)
+}
+
+/**
+ * 滚动事件
+ */
+function handleScroll(event: any) {
+  if (!props.showHeader) {
+    return
+  }
+  reactiveState.scrollLeft = event.detail.scrollLeft
+}
+
+function rowClick(index: number) {
+  emit('row-click', { rowIndex: index })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>

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

@@ -0,0 +1,44 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@import '../wd-table/index';
+
+.wot-theme-dark {
+  @include b(table-col) {
+    @include when(shadow) {
+      &::after {
+        background: linear-gradient(270deg, rgba(17, 17, 17, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+      }
+    }
+  }
+}
+
+@include b(table-col) {
+  .wd-table__cell {
+    width: 100%;
+  }
+
+  @include m(fixed) {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+  }
+
+  @include when(shadow) {
+    &::after {
+      position: absolute;
+      top: 0;
+      right: -30rpx;
+      width: 30rpx;
+      height: 100%;
+      content: ' ';
+      background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
+    }
+  }
+
+  .wd-table__cell:last-child {
+    @include when(border) {
+      border-bottom: none;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { makeBooleanProp, makeNumericProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type AlignType = 'left' | 'center' | 'right' // 列的对齐方式
+
+export type SortDirection = 0 | 1 | -1 // 列的排序方向
+
+export interface TableColumn {
+  // 列对应字段
+  prop: string
+  // 列对应字段标题
+  label: string
+  // 列宽度
+  width: string | number
+  // 是否开启列排序
+  sortable?: boolean
+  // 列的对齐方式，可选值left,center,right
+  align?: AlignType
+  // 列的排序方向
+  sortDirection: SortDirection
+  // 是否i固定列
+  fixed?: boolean
+}
+
+export const tableColumnProps = {
+  /**
+   * 列对应字段
+   */
+  prop: makeRequiredProp(String),
+  /**
+   * 列对应字段标题
+   */
+  label: makeRequiredProp(String),
+  /**
+   * 列宽度，单位px
+   */
+  width: makeNumericProp(100),
+  /**
+   * 是否开启列排序
+   */
+  sortable: makeBooleanProp(false),
+  /**
+   * 是否固定本列
+   */
+  fixed: makeBooleanProp(false),
+  /**
+   * 列的对齐方式，可选值left,center,right
+   */
+  align: makeStringProp<AlignType>('left'),
+}
+
+export type TableColumnProps = ExtractPropTypes<typeof tableColumnProps>
+
+export type TableColumnInstance = ComponentPublicInstance<TableColumnProps>

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

@@ -0,0 +1,149 @@
+<template>
+  <view
+    :class="`wd-table-col ${fixed ? 'wd-table-col--fixed' : ''} ${isLastFixed && isDef(table) && table.scrollLeft ? 'is-shadow' : ''}`"
+    :style="columnStyle"
+  >
+    <view
+      :class="`wd-table__cell ${stripe && isOdd(index) ? 'is-stripe' : ''} ${border ? 'is-border' : ''} is-${align}`"
+      v-for="(row, index) in column"
+      :key="index"
+      :style="cellStyle"
+      @click="handleRowClick(index)"
+    >
+      <slot name="value" v-if="$slots.value" :row="getScope(index)" :index="index"></slot>
+      <text :class="`wd-table__value ${ellipsis ? 'is-ellipsis' : ''}`" v-else>{{ row }}</text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-table-col',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+<script lang="ts" setup>
+import { type CSSProperties, computed, ref, watch } from 'vue'
+import { addUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util'
+import { tableColumnProps, type SortDirection } from './types'
+import { useParent } from '../composables/useParent'
+import { TABLE_KEY } from '../wd-table/types'
+
+const props = defineProps(tableColumnProps)
+
+const { parent: table, index: columnIndex } = useParent(TABLE_KEY)
+
+const sortDirection = ref<SortDirection>(0) // 排序方向
+
+// 是否开启斑马纹
+const stripe = computed(() => {
+  if (isDef(table)) {
+    return table.props.stripe
+  } else {
+    return false
+  }
+})
+
+/**
+ * 是否有边框
+ */
+const border = computed(() => {
+  if (isDef(table)) {
+    return table.props.border
+  } else {
+    return false
+  }
+})
+
+/**
+ * 是否超出省略
+ */
+const ellipsis = computed(() => {
+  if (isDef(table)) {
+    return table.props.ellipsis
+  } else {
+    return false
+  }
+})
+
+/**
+ * 是否最后一个固定元素
+ */
+const isLastFixed = computed(() => {
+  let isLastFixed: boolean = false
+  if (props.fixed && isDef(table)) {
+    isLastFixed = table.getIsLastFixed(props)
+  }
+  return isLastFixed
+})
+
+/**
+ * 列样式
+ */
+const columnStyle = computed(() => {
+  let style: CSSProperties = {}
+  if (isDef(props.width)) {
+    style.width = addUnit(props.width)
+  }
+  if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
+    style = table.getFixedStyle(columnIndex.value, style)
+  }
+  return style
+})
+
+/**
+ * 单元格样式
+ */
+const cellStyle = computed(() => {
+  let style: CSSProperties = {}
+  const rowHeight: string | number = isDef(table) ? table.props.rowHeight : '80rpx' // 自定义行高
+  if (isDef(rowHeight)) {
+    style.height = addUnit(rowHeight)
+  }
+  if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
+    style = table.getFixedStyle(columnIndex.value, style)
+  }
+  return objToStyle(style)
+})
+
+// 列数据
+const column = computed(() => {
+  if (!isDef(table)) {
+    return []
+  }
+
+  const column: any[] = table.props.data.map((item) => {
+    return item[props.prop]
+  })
+  return column
+})
+
+/**
+ * 行点击事件
+ * @param index 行下标
+ */
+function handleRowClick(index: number) {
+  if (!isDef(table)) {
+    return
+  }
+  isFunction(table.rowClick) && table.rowClick(index)
+}
+
+// 行数据
+function getScope(index: number) {
+  if (!isDef(table)) {
+    return {}
+  }
+  return table.props.data[index] || {}
+}
+
+defineExpose({ sortDirection })
+</script>
+
+<style lang="scss" scoped>
+@import './index';
+</style>