oxy-uni-ui 1.0.1

package/components/oxy-tabbar/oxy-tabbar.vue

@@ -0,0 +1,91 @@
+<template>
+  <view :class="{ 'oxy-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round' }" :style="{ height: addUnit(height) }">
+    <view
+      :class="`oxy-tabbar oxy-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: 'oxy-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 '../oxy-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) {
+  let active = child.name
+  emit('update:modelValue', active)
+  emit('change', {
+    value: active
+  })
+}
+
+function setPlaceholderHeight() {
+  if (!props.fixed || !props.placeholder) {
+    return
+  }
+
+  getRect('.oxy-tabbar', false, proxy).then((res) => {
+    height.value = Number(res.height)
+  })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-tabbar/types.ts

@@ -0,0 +1,73 @@
+import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+import type { TabbarItem } from '../oxy-tabbar-item/types'
+
+type TabbarShape = 'default' | 'round'
+
+export type TabbarProvide = {
+  props: {
+    // 选中标签的索引值或者名称
+    modelValue?: number | string
+    // 是否固定在底部
+    fixed?: boolean
+    // 是否设置底部安全距离（iphone X 类型的机型）
+    safeAreaInsetBottom?: boolean
+    // 是否显示顶部边框
+    bordered?: boolean
+    // 标签栏的形状。可选项：default/round
+    shape?: TabbarShape
+    // 激活标签的颜色
+    activeColor?: string
+    // 未激活标签的颜色
+    inactiveColor?: string
+    // 固定在底部时，是否在标签位置生成一个等高的占位元素
+    placeholder?: boolean
+    // 自定义组件的层级
+    zIndex?: number
+  }
+  setChange: (child: TabbarItem) => void
+}
+
+export const TABBAR_KEY: InjectionKey<TabbarProvide> = Symbol('oxy-tabbar')
+
+export const tabbarProps = {
+  ...baseProps,
+  /**
+   * 选中标签的索引值或者名称
+   */
+  modelValue: makeNumericProp(0),
+  /**
+   * 是否固定在底部
+   */
+  fixed: makeBooleanProp(false),
+  /**
+   * 是否显示顶部边框
+   */
+  bordered: makeBooleanProp(true),
+  /**
+   * 是否设置底部安全距离（iPhone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(false),
+  /**
+   * 标签栏的形状。可选项：default/round
+   */
+  shape: makeStringProp<TabbarShape>('default'),
+  /**
+   * 激活标签的颜色
+   */
+  activeColor: String,
+  /**
+   * 未激活标签的颜色
+   */
+  inactiveColor: String,
+  /**
+   * 固定在底部时，是否在标签位置生成一个等高的占位元素
+   */
+  placeholder: makeBooleanProp(false),
+  /**
+   * 自定义组件的层级
+   */
+  zIndex: makeNumberProp(99)
+}
+
+export type TabbarProps = ExtractPropTypes<typeof tabbarProps>

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

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

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

@@ -0,0 +1,99 @@
+<template>
+  <view :class="`oxy-tabbar-item ${customClass}`" :style="customStyle" @click="handleClick">
+    <oxy-badge v-bind="customBadgeProps">
+      <view class="oxy-tabbar-item__body">
+        <slot name="icon" :active="active"></slot>
+        <template v-if="!$slots.icon && icon">
+          <oxy-icon
+            :name="icon"
+            :custom-style="textStyle"
+            :custom-class="`oxy-tabbar-item__body-icon ${active ? 'is-active' : 'is-inactive'}`"
+          ></oxy-icon>
+        </template>
+        <text v-if="title" :style="textStyle" :class="`oxy-tabbar-item__body-title ${active ? 'is-active' : 'is-inactive'}`">
+          {{ title }}
+        </text>
+      </view>
+    </oxy-badge>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-tabbar-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import OxyBadge from '../oxy-badge/oxy-badge.vue'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { type CSSProperties, computed } from 'vue'
+import { deepAssign, isDef, isUndefined, objToStyle, omitBy } from '../common/util'
+import { useParent } from '../composables/useParent'
+import { TABBAR_KEY } from '../oxy-tabbar/types'
+import { tabbarItemProps } from './types'
+import type { BadgeProps } from '../oxy-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.scss';
+</style>

package/components/oxy-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 '../oxy-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/oxy-table/index.scss

@@ -0,0 +1,163 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.oxy-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() {
+    .oxy-table-col:last-child {
+      .oxy-table__cell {
+        @include when(border) {
+          border-right: none;
+        }
+      }
+    }
+  }
+
+  @include e(header) {
+    width: 100%;
+    height: 50px;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    display: flex;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  @include e(body) {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  @include e(content) {
+    display: flex;
+
+    @include m(header) {
+      position: sticky;
+      top: 0;
+      z-index: 2
+    }
+  }
+
+  @include e(cell) {
+    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;
+    --oxy-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;
+      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%);
+      }
+    }
+
+    @include when(left) {
+      justify-content: flex-start;
+    }
+
+    @include when(center) {
+      justify-content: center;
+    }
+
+    @include when(right) {
+      justify-content: flex-end;
+    }
+  }
+
+  @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);
+    }
+  }
+}