@tplc/wot 0.0.1

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

@@ -0,0 +1,104 @@
+<template>
+  <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' : ''
+      }`"
+      :style="rootStyle"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-tabbar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+<script lang="ts" setup>
+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'
+import { TABBAR_KEY, tabbarProps } from './types'
+
+const props = defineProps(tabbarProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const height = ref<number | string>('') // 占位高度
+const { proxy } = getCurrentInstance() as any
+
+const { linkChildren } = useChildren(TABBAR_KEY)
+
+linkChildren({
+  props,
+  setChange,
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.zIndex)) {
+    style['z-index'] = props.zIndex
+  }
+  return `${objToStyle(style)};${props.customStyle}`
+})
+
+watch(
+  [() => props.fixed, () => props.placeholder],
+  () => {
+    setPlaceholderHeight()
+  },
+  { deep: true, immediate: false },
+)
+
+onMounted(() => {
+  if (props.fixed && props.placeholder) {
+    nextTick(() => {
+      setPlaceholderHeight()
+    })
+  }
+})
+
+/**
+ * 子项状态变更
+ * @param child 子项
+ */
+function setChange(child: TabbarItem) {
+  const active = child.name
+  emit('update:modelValue', active)
+  emit('change', {
+    value: active,
+  })
+}
+
+function setPlaceholderHeight() {
+  if (!props.fixed || !props.placeholder) {
+    return
+  }
+
+  getRect('.wd-tabbar', false, proxy).then((res) => {
+    height.value = Number(res.height)
+  })
+}
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

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

@@ -0,0 +1,52 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(tabbar-item) {
+    @include e(body) {
+      :deep() {
+        @include when(inactive) {
+          color: $-dark-color-gray;
+        }
+      }
+    }
+  }
+}
+
+@include b(tabbar-item) {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+  text-decoration: none;
+
+  @include e(body) {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0;
+    line-height: 1;
+
+    :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;
+  }
+
+  @include edeep(body-icon) {
+    font-size: $-tabbar-item-icon-size;
+  }
+}

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

@@ -0,0 +1,51 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeNumberProp, numericProp } from '../common/props'
+import type { BadgeProps } from '../wd-badge/types'
+
+/**
+ * 折叠面板子项
+ */
+export interface TabbarItem {
+  // 唯一标识
+  name: string | number
+}
+
+export const tabbarItemProps = {
+  ...baseProps,
+  /**
+   * 标签页的标题
+   */
+  title: String,
+  /**
+   * 唯一标识符
+   */
+  name: numericProp,
+  /**
+   * 图标
+   */
+  icon: String,
+  /**
+   * 徽标显示值
+   */
+  value: {
+    type: [Number, String, null] as PropType<number | string | null>,
+    default: null,
+  },
+  /**
+   * 是否点状徽标
+   */
+  isDot: {
+    type: Boolean,
+    default: undefined,
+  },
+  /**
+   * 徽标最大值
+   */
+  max: Number,
+  /**
+   * 徽标属性，透传给 Badge 组件
+   */
+  badgeProps: Object as PropType<BadgeProps>,
+}
+
+export type TabbarItemProps = ExtractPropTypes<typeof tabbarItemProps>

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

@@ -0,0 +1,101 @@
+<template>
+  <view :class="`wd-tabbar-item ${customClass}`" :style="customStyle" @click="handleClick">
+    <wd-badge v-bind="customBadgeProps">
+      <view class="wd-tabbar-item__body">
+        <slot name="icon" :active="active"></slot>
+        <template v-if="!$slots.icon && icon">
+          <wd-icon
+            :name="icon"
+            :custom-style="textStyle"
+            :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'}`"
+        >
+          {{ title }}
+        </text>
+      </view>
+    </wd-badge>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-tabbar-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+}
+</script>
+<script lang="ts" setup>
+import { type CSSProperties, computed } from 'vue'
+import { deepAssign, isDef, isUndefined, objToStyle, omitBy } from '../common/util'
+import { useParent } from '../composables/useParent'
+import { TABBAR_KEY } from '../wd-tabbar/types'
+import { tabbarItemProps } from './types'
+import type { BadgeProps } from '../wd-badge/types'
+
+const props = defineProps(tabbarItemProps)
+
+const { parent: tabbar, index } = useParent(TABBAR_KEY)
+
+const customBadgeProps = computed(() => {
+  const badgeProps: Partial<BadgeProps> = deepAssign(
+    isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
+    omitBy(
+      {
+        max: props.max,
+        isDot: props.isDot,
+        modelValue: props.value,
+      },
+      isUndefined,
+    ),
+  )
+  if (!isDef(badgeProps.max)) {
+    badgeProps.max = 99
+  }
+  return badgeProps
+})
+
+const textStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (tabbar) {
+    if (active.value && tabbar.props.activeColor) {
+      style.color = tabbar.props.activeColor
+    }
+    if (!active.value && tabbar.props.inactiveColor) {
+      style.color = tabbar.props.inactiveColor
+    }
+  }
+
+  return `${objToStyle(style)}`
+})
+
+const active = computed(() => {
+  const name = isDef(props.name) ? props.name : index.value
+  if (tabbar) {
+    if (tabbar.props.modelValue === name) {
+      return true
+    } else {
+      return false
+    }
+  } else {
+    return false
+  }
+})
+
+/**
+ * 点击tabbar选项
+ */
+function handleClick() {
+  const name: string | number = isDef(props.name) ? props.name : index.value
+  tabbar && tabbar.setChange({ name })
+}
+</script>
+<style lang="scss" scoped>
+@import './index';
+</style>

package/components/wd-table/index.scss

@@ -0,0 +1,132 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(table) {
+    background: $-dark-background;
+
+    @include when(border) {
+      border: 1px solid $-dark-border-color;
+    }
+
+    @include e(cell) {
+      color: $-dark-color;
+      background: $-dark-background2;
+
+      @include when(stripe) {
+        background: $-dark-background4;
+      }
+
+      @include when(border) {
+        border-right: 1px solid $-dark-border-color;
+        border-bottom: 1px solid $-dark-border-color;
+      }
+
+      @include when(shadow) {
+        &::after {
+          background: linear-gradient(270deg, rgba(17, 17, 17, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+        }
+      }
+    }
+  }
+}
+
+@include b(table) {
+  position: relative;
+  width: 100%;
+  overflow: auto;
+  background: $-table-bg;
+
+  @include when(border) {
+    border: 1px solid $-table-border-color;
+  }
+
+  :deep() {
+    .wd-table-col:last-child {
+      .wd-table__cell {
+        @include when(border) {
+          border-right: none;
+        }
+      }
+    }
+  }
+
+  @include e(header) {
+    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%;
+  }
+
+  @include e(content) {
+    display: flex;
+  }
+
+  @include e(cell) {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    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) {
+      border-right: 1px solid $-table-border-color;
+      border-bottom: 1px solid $-table-border-color;
+    }
+
+    @include when(stripe) {
+      background: $-table-stripe-bg;
+    }
+
+    @include when(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%);
+      }
+    }
+
+    @include when(left) {
+      justify-content: flex-start;
+    }
+
+    @include when(center) {
+      justify-content: center;
+    }
+
+    @include when(right) {
+      justify-content: flex-end;
+    }
+  }
+
+  @include e(value) {
+    @include when(ellipsis) {
+      word-break: break-all;
+      @include multiEllipsis(2);
+    }
+  }
+}

package/components/wd-table/types.ts

@@ -0,0 +1,69 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 11:36:12
+ * @LastEditTime: 2024-07-18 19:02:32
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-table\types.ts
+ * 记得注释
+ */
+import type { CSSProperties, ExtractPropTypes } from 'vue'
+import {
+  baseProps,
+  makeBooleanProp,
+  makeNumberProp,
+  makeRequiredProp,
+  makeStringProp,
+} from '../common/props'
+import type { TableColumnProps } from '../wd-table-col/types'
+
+export const tableProps = {
+  ...baseProps,
+  /**
+   * 显示的数据
+   */
+  data: makeRequiredProp(Array<Record<string, any>>),
+  /**
+   * 是否带有边框
+   */
+  border: makeBooleanProp(true),
+  /**
+   * 是否为斑马纹 table
+   */
+  stripe: makeBooleanProp(true),
+  /**
+   * Table 的高度
+   */
+  height: makeStringProp('80vh'),
+  /**
+   * 行高
+   */
+  rowHeight: makeNumberProp(50),
+  /**
+   * 是否显示表头
+   */
+  showHeader: makeBooleanProp(true),
+  /**
+   * 是否超出2行隐藏
+   */
+  ellipsis: makeBooleanProp(true),
+  /**
+   * 是否显示索引列
+   */
+  index: {
+    type: [Object, Boolean] as PropType<boolean | Omit<Partial<TableColumnProps>, 'prop'>>,
+    default: false,
+  },
+}
+
+export type TableProps = ExtractPropTypes<typeof tableProps>
+
+export type TableProvide = {
+  props: Omit<TableProps, 'index' | 'customStyle' | 'customClass'>
+  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')