oxy-uni-ui 1.0.1

package/components/oxy-table/oxy-table.vue

@@ -0,0 +1,283 @@
+<template>
+  <view :class="`oxy-table ${border ? 'is-border' : ''} ${customClass}`" :style="tableStyle">
+    <template v-if="fixedHeader">
+      <scroll-view
+        :enable-flex="true"
+        :throttle="false"
+        :scrollLeft="state.scrollLeft"
+        :scroll-x="true"
+        class="oxy-table__header"
+        @scroll="scroll"
+        v-if="showHeader"
+      >
+        <view id="table-header" class="oxy-table__content oxy-table__content--header" :style="realWidthStyle">
+          <view
+            :class="`oxy-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"
+          >
+            <oxy-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="`oxy-table__value ${ellipsis ? 'is-ellipsis' : ''}`">{{ column.label }}</text>
+          </view>
+        </view>
+      </scroll-view>
+      <scroll-view
+        class="oxy-table__body"
+        :style="bodyStyle"
+        :enable-flex="true"
+        :throttle="false"
+        :scroll-x="true"
+        @scroll="scroll"
+        :scrollLeft="state.scrollLeft"
+      >
+        <view id="table-body" class="oxy-table__content" :style="realWidthStyle">
+          <oxy-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>
+          </oxy-table-col>
+          <slot></slot>
+        </view>
+      </scroll-view>
+    </template>
+    <!-- 非固定表头时使用单个scroll-view -->
+    <template v-else>
+      <scroll-view class="oxy-table__wrapper" :enable-flex="true" :throttle="false" :scroll-x="true" @scroll="scroll" :scrollLeft="state.scrollLeft">
+        <view class="oxy-table__inner" :style="realWidthStyle">
+          <!-- 表头部分 -->
+          <view v-if="showHeader" class="oxy-table__header-row">
+            <view
+              v-for="(column, index) in children"
+              :key="index"
+              :class="`oxy-table__cell ${border ? 'is-border' : ''} ${column.fixed ? 'is-fixed' : ''} ${stripe ? 'is-stripe' : ''} is-${
+                column.align
+              } ${getIsLastFixed(column) && state.scrollLeft ? 'is-shadow' : ''}`"
+              :style="getCellStyle(index)"
+            >
+              <oxy-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="`oxy-table__value ${ellipsis ? 'is-ellipsis' : ''}`">{{ column.label }}</text>
+            </view>
+          </view>
+
+          <!-- 表格内容部分 -->
+          <view class="oxy-table__content" :style="bodyStyle">
+            <oxy-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>
+            </oxy-table-col>
+            <slot></slot>
+          </view>
+        </view>
+      </scroll-view>
+    </template>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-table',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyTableCol from '../oxy-table-col/oxy-table-col.vue'
+import OxySortButton from '../oxy-sort-button/oxy-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 '../oxy-table-col/types'
+import { TABLE_KEY, tableProps, type TableProvide } from './types'
+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 state = reactive({
+  scrollLeft: 0
+})
+
+const { linkChildren, children } = useChildren<TableColumnInstance, TableProvide>(TABLE_KEY)
+
+linkChildren({ props, state, rowClick, getIsLastFixed, getFixedStyle })
+
+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) {
+  state.scrollLeft = event.detail.scrollLeft
+}
+
+function rowClick(index: number) {
+  emit('row-click', { rowIndex: index })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-table/types.ts

@@ -0,0 +1,58 @@
+import type { CSSProperties, ExtractPropTypes, InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeNumericProp, makeRequiredProp, numericProp } from '../common/props'
+import type { TableColumnProps } from '../oxy-table-col/types'
+import type { PropType } from 'vue'
+
+export const tableProps = {
+  ...baseProps,
+  /**
+   * 显示的数据
+   */
+  data: makeRequiredProp(Array<Record<string, any>>),
+  /**
+   * 是否带有边框
+   */
+  border: makeBooleanProp(true),
+  /**
+   * 是否为斑马纹 table
+   */
+  stripe: makeBooleanProp(true),
+  /**
+   * Table 的高度
+   */
+  height: numericProp,
+  /**
+   * 行高
+   */
+  rowHeight: makeNumericProp(50),
+  /**
+   * 是否显示表头
+   */
+  showHeader: makeBooleanProp(true),
+  /**
+   * 是否超出2行隐藏
+   */
+  ellipsis: makeBooleanProp(true),
+  /**
+   * 是否显示索引列
+   */
+  index: {
+    type: [Object, Boolean] as PropType<boolean | Omit<Partial<TableColumnProps>, 'prop'>>,
+    default: false
+  },
+  fixedHeader: makeBooleanProp(true)
+}
+
+export type TableProps = ExtractPropTypes<typeof tableProps>
+
+export type TableProvide = {
+  props: Omit<TableProps, 'index' | 'customStyle' | 'customClass'>
+  state: {
+    scrollLeft: number
+  }
+  rowClick: (index: number) => void
+  getIsLastFixed: (column: { fixed: boolean; prop: string }) => boolean
+  getFixedStyle: (index: number, style: CSSProperties) => CSSProperties
+}
+
+export const TABLE_KEY: InjectionKey<TableProvide> = Symbol('oxy-table')

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

@@ -0,0 +1,46 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@import '../oxy-table/index';
+
+.oxy-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) {
+  .oxy-table__cell {
+    width: 100%;
+  }
+
+  @include m(fixed) {
+    position: sticky;
+    z-index: 1;
+    left: 0;
+  }
+
+  @include when(shadow) {
+    &::after {
+      content: ' ';
+      position: absolute;
+      height: 100%;
+      right: -30rpx;
+      top: 0;
+      width: 30rpx;
+      height: 100%;
+      background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
+    }
+  }
+
+  .oxy-table__cell:last-child {
+    @include when(border) {
+      border-bottom: none;
+    }
+  }
+}

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

@@ -0,0 +1,149 @@
+<template>
+  <view
+    :class="`oxy-table-col ${fixed ? 'oxy-table-col--fixed' : ''} ${isLastFixed && isDef(table) && table.state.scrollLeft ? 'is-shadow' : ''}`"
+    :style="columnStyle"
+  >
+    <view
+      :class="`oxy-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="`oxy-table__value ${ellipsis ? 'is-ellipsis' : ''}`" v-else>{{ row }}</text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-table-col',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+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'
+import { TABLE_KEY } from '../oxy-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) && isDef(table.props) ? table.props.rowHeight : 50 // 自定义行高
+  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) || !isDef(table.props) || !isDef(table.props.data) || !Array.isArray(table.props.data)) {
+    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) || !isDef(table.props) || !isDef(table.props.data) || !Array.isArray(table.props.data)) {
+    return {}
+  }
+  return table.props.data[index] || {}
+}
+
+defineExpose({ sortDirection: sortDirection })
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-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>