2025/2/8第一次更新

node_modules/@tuniao/tnui-vue3-uniapp/components/switch-tab/index.ts

@@ -0,0 +1,8 @@
+import { withNoopInstall } from '../../utils'
+import SwitchTab from './src/switch-tab.vue'
+
+export const TnSwitchTab = withNoopInstall(SwitchTab)
+export default TnSwitchTab
+
+export * from './src/switch-tab'
+export type { TnSwitchTabInstance } from './src/instance'

node_modules/@tuniao/tnui-vue3-uniapp/components/switch-tab/src/composables/index.ts

@@ -0,0 +1,2 @@
+export * from './switch-tab-custom'
+export * from './use-switch-tab'

node_modules/@tuniao/tnui-vue3-uniapp/components/switch-tab/src/composables/switch-tab-custom.ts

@@ -0,0 +1,117 @@
+import { computed, toRef } from 'vue'
+import { useComponentColor, useNamespace } from '../../../../hooks'
+
+import type { CSSProperties } from 'vue'
+import type { SwitchTabProps } from '../switch-tab'
+
+export type tabClass = (index: number) => string
+export type tabStyle = (index: number) => CSSProperties
+
+export const useSwitchTabCustomStyle = (props: SwitchTabProps) => {
+  const ns = useNamespace('switch-tab')
+
+  // 解析颜色
+  const [inactiveBgColorClass, inactiveBgColorStyle] = useComponentColor(
+    toRef(props, 'inactiveBgColor'),
+    'bg'
+  )
+  const [activeBgColorClass, activeBgColorStyle] = useComponentColor(
+    toRef(props, 'activeBgColor'),
+    'bg'
+  )
+  const [inactiveTextColorClass, inactiveTextColorStyle] = useComponentColor(
+    toRef(props, 'inactiveTextColor'),
+    'text'
+  )
+  const [activeTextColorClass, activeTextColorStyle] = useComponentColor(
+    toRef(props, 'activeTextColor'),
+    'text'
+  )
+
+  // 切换选项卡的类
+  const switchTabClass = computed(() => {
+    const cls: string[] = [ns.b()]
+
+    if (activeBgColorClass.value) cls.push(activeBgColorClass.value)
+
+    return cls.join(' ')
+  })
+  // 切换选项卡的样式
+  const switchTabStyle = computed(() => {
+    const style: CSSProperties = {}
+
+    if (!activeBgColorClass.value) {
+      style.backgroundColor =
+        activeBgColorStyle.value || 'var(--tn-color-white)'
+    }
+
+    return style
+  })
+
+  // 标签的类
+  const tabClass = computed<tabClass>(() => {
+    return (index: number) => {
+      const cls: string[] = [
+        ns.e('tab'),
+        ns.is('active', index === props.modelValue),
+      ]
+
+      if (index === props.modelValue) {
+        if (activeBgColorClass.value) cls.push(activeBgColorClass.value)
+        if (activeTextColorClass.value) cls.push(activeTextColorClass.value)
+      } else {
+        if (inactiveBgColorClass.value) cls.push(inactiveBgColorClass.value)
+        if (inactiveTextColorClass.value) cls.push(inactiveTextColorClass.value)
+      }
+
+      return cls.join(' ')
+    }
+  })
+  // 标签的样式
+  const tabStyle = computed<tabStyle>(() => {
+    return (index: number) => {
+      const style: CSSProperties = {}
+
+      if (index === props.modelValue) {
+        if (!activeBgColorClass.value) {
+          style.backgroundColor =
+            activeBgColorStyle.value || 'var(--tn-color-white)'
+        }
+        if (activeTextColorStyle.value) {
+          style.color = activeTextColorStyle.value
+        } else if (!activeTextColorClass.value && !activeBgColorClass.value) {
+          style.color = 'var(--tn-text-color-primary)'
+        }
+      } else {
+        if (!inactiveBgColorClass.value) {
+          style.backgroundColor =
+            inactiveBgColorStyle.value || 'var(--tn-color-primary-light-7)'
+        }
+        if (inactiveTextColorStyle.value) {
+          style.color = inactiveTextColorStyle.value
+        } else if (
+          !inactiveTextColorClass.value &&
+          !inactiveBgColorClass.value
+        ) {
+          style.color = 'var(--tn-text-color-primary)'
+        }
+        if (index === props.modelValue - 1) {
+          style.borderBottomRightRadius = '30rpx'
+        }
+        if (index === props.modelValue + 1) {
+          style.borderBottomLeftRadius = '30rpx'
+        }
+      }
+
+      return style
+    }
+  })
+
+  return {
+    ns,
+    tabClass,
+    tabStyle,
+    switchTabClass,
+    switchTabStyle,
+  }
+}

node_modules/@tuniao/tnui-vue3-uniapp/components/switch-tab/src/composables/use-switch-tab.ts

@@ -0,0 +1,21 @@
+import { nextTick } from 'vue'
+import type { SetupContext } from 'vue'
+import type { SwitchTabEmits, SwitchTabProps } from '../switch-tab'
+
+export const useSwitchTab = (
+  props: SwitchTabProps,
+  emits: SetupContext<SwitchTabEmits>['emit']
+) => {
+  // 点击切换标签
+  const tabClickEvent = (index: number) => {
+    if (props.disabled) return
+    emits('update:modelValue', index)
+    nextTick(() => {
+      emits('change', index)
+    })
+  }
+
+  return {
+    tabClickEvent,
+  }
+}

node_modules/@tuniao/tnui-vue3-uniapp/components/switch-tab/src/instance.ts

@@ -0,0 +1,3 @@
+import type SwitchTab from './switch-tab.vue'
+
+export type TnSwitchTabInstance = InstanceType<typeof SwitchTab>

node_modules/@tuniao/tnui-vue3-uniapp/components/switch-tab/src/switch-tab.ts

@@ -0,0 +1,49 @@
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '../../../constants'
+import { buildProps, definePropType, isNumber } from '../../../utils'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const switchTabProps = buildProps({
+  /**
+   * @description 当前激活的标签索引
+   */
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * @description 标签列表
+   */
+  tabs: {
+    type: definePropType<string[]>(Array),
+    default: () => [],
+  },
+  /**
+   * @description 是否禁用
+   */
+  disabled: Boolean,
+  /**
+   * @description 未选中时标签的背景颜色，以tn开头使用图鸟内置的颜色
+   */
+  inactiveBgColor: String,
+  /**
+   * @description 选中时标签的背景颜色，以tn开头使用图鸟内置的颜色
+   */
+  activeBgColor: String,
+  /**
+   * @description 未选中时标签的字体颜色，以tn开头使用图鸟内置的颜色
+   */
+  inactiveTextColor: String,
+  /**
+   * @description 选中时标签的字体颜色，以tn开头使用图鸟内置的颜色
+   */
+  activeTextColor: String,
+})
+
+export const switchTabEmits = {
+  [UPDATE_MODEL_EVENT]: (value: number) => isNumber(value),
+  [CHANGE_EVENT]: (value: number) => isNumber(value),
+}
+
+export type SwitchTabProps = ExtractPropTypes<typeof switchTabProps>
+export type SwitchTabEmits = typeof switchTabEmits

node_modules/@tuniao/tnui-vue3-uniapp/components/switch-tab/src/switch-tab.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { switchTabEmits, switchTabProps } from './switch-tab'
+import { useSwitchTab, useSwitchTabCustomStyle } from './composables'
+
+const props = defineProps(switchTabProps)
+const emits = defineEmits(switchTabEmits)
+
+const { tabClickEvent } = useSwitchTab(props, emits)
+const { ns, tabClass, tabStyle, switchTabClass, switchTabStyle } =
+  useSwitchTabCustomStyle(props)
+</script>
+
+<template>
+  <view :class="[switchTabClass]" :style="switchTabStyle">
+    <!-- 标签栏 -->
+    <view :class="[ns.e('tabs')]">
+      <view
+        v-for="(tabItem, tabIndex) in tabs"
+        :key="tabIndex"
+        :class="[tabClass(tabIndex)]"
+        :style="tabStyle(tabIndex)"
+        @tap.stop="tabClickEvent(tabIndex)"
+      >
+        <view class="tab-item bg" />
+        <view class="tab-item text">{{ tabItem }}</view>
+      </view>
+    </view>
+    <!-- 内容区域 -->
+    <view :class="[ns.e('content')]">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../theme-chalk/src/switch-tab.scss';
+</style>