2025/2/8第一次更新

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

@@ -0,0 +1,110 @@
+import { computed, toRef } from 'vue'
+import {
+  useComponentColor,
+  useComponentSize,
+  useNamespace,
+} from '../../../../hooks'
+import { formatDomSizeValue } from '../../../../utils'
+
+import type { CSSProperties } from 'vue'
+import type { FooterProps } from '../footer'
+import type { FooterNavigatorItem } from '../types'
+
+type FooterNavigatorClassType = (item: FooterNavigatorItem) => string
+type FooterNavigatorStyleType = (item: FooterNavigatorItem) => CSSProperties
+
+export const useFooterCustomStyle = (props: FooterProps) => {
+  const ns = useNamespace('footer')
+
+  // 解析颜色
+  const [textColorClass, textColorStyle] = useComponentColor(
+    toRef(props, 'textColor'),
+    'text'
+  )
+  // 解析尺寸
+  const { sizeType } = useComponentSize(props.size)
+
+  // 页脚的类
+  const footerClass = computed<string>(() => {
+    const cls: string[] = [ns.b()]
+
+    // 设置尺寸
+    if (props.size && sizeType.value === 'inner') cls.push(ns.m(props.size))
+
+    // 是否固定在底部
+    if (props.fixed) {
+      cls.push(ns.e('fixed'), ns.em('fixed', props.fixedMode))
+      if (props.safeAreaInsetBottom) {
+        cls.push('tn-u-safe-area')
+      }
+    }
+
+    return cls.join(' ')
+  })
+  // 页脚的样式
+  const footerStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    if (props.offsetBottom)
+      style.bottom = formatDomSizeValue(props.offsetBottom)
+
+    if (props.size && sizeType.value === 'custom') {
+      style.fontSize = formatDomSizeValue(props.size)
+    }
+
+    return style
+  })
+
+  // 页脚内容的类
+  const contentClass = computed<string>(() => {
+    const cls: string[] = [ns.e('content')]
+
+    // 设置颜色
+    if (textColorClass.value) cls.push(textColorClass.value)
+
+    return cls.join(' ')
+  })
+  // 页脚内容的样式
+  const contentStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    // 设置颜色
+    if (!textColorClass.value)
+      style.color = textColorStyle.value || 'var(--tn-text-color-secondary)'
+
+    return style
+  })
+
+  // 页脚导航的类
+  const navigatorClass = computed<FooterNavigatorClassType>(() => {
+    return (item: FooterNavigatorItem) => {
+      const cls: string[] = [ns.e('navigator')]
+
+      if (item.color.class) cls.push(item.color.class)
+
+      return cls.join(' ')
+    }
+  })
+  // 页脚导航的样式
+  const navigatorStyle = computed<FooterNavigatorStyleType>(() => {
+    return (item: FooterNavigatorItem) => {
+      const style: CSSProperties = {}
+
+      // 设置颜色
+      if (!item.color.class)
+        style.color = item.color.style || 'var(--tn-color-primary)'
+
+      return style
+    }
+  })
+
+  return {
+    ns,
+    footerClass,
+    footerStyle,
+    contentClass,
+    contentStyle,
+    navigatorClass,
+    navigatorStyle,
+  }
+}

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

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

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

@@ -0,0 +1,49 @@
+import { computed, ref } from 'vue'
+import { useComponentColor } from '../../../../hooks'
+import { isEmptyDoubleVariableInDefault } from '../../../../utils'
+
+import type { SetupContext } from 'vue'
+import type { FooterEmits, FooterProps } from '../footer'
+import type { FooterNavigatorData, FooterNavigatorItem } from '../types'
+
+export const useFooter = (
+  props: FooterProps,
+  emits: SetupContext<FooterEmits>['emit']
+) => {
+  // 导航数据
+  const navigatorData = computed<FooterNavigatorData>(() => {
+    return props.navigator.map((nav) => {
+      const textColor = ref(
+        isEmptyDoubleVariableInDefault(nav.textColor, props.navigatorTextColor)
+      )
+      const [textColorClass, textColorStyle] = useComponentColor(
+        textColor,
+        'text'
+      )
+      return {
+        title: nav.title || '',
+        url: nav?.url || '',
+        color: {
+          class: textColorClass.value,
+          style: textColorStyle.value,
+        },
+      }
+    })
+  })
+
+  // 页脚点击事件
+  const footerClickEvent = () => {
+    emits('click')
+  }
+
+  // 页脚导航点击事件
+  const navigatorClickEvent = (item: FooterNavigatorItem) => {
+    emits('navigatorClick', item)
+  }
+
+  return {
+    navigatorData,
+    footerClickEvent,
+    navigatorClickEvent,
+  }
+}

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

@@ -0,0 +1,91 @@
+import { buildProps, definePropType } from '../../../utils'
+
+import type { ExtractPropTypes } from 'vue'
+
+export interface FooterNavigator {
+  /**
+   * @description 导航标题
+   */
+  title: string
+  /**
+   * @description 导航链接
+   */
+  url?: string
+  /**
+   * @description 导航连接字体颜色，以tn开头使用图鸟内置的颜色
+   */
+  textColor?: string
+}
+
+export type FooterNavigatorData = FooterNavigator[]
+
+export const footerFixedMode = ['page', 'container'] as const
+
+export const footerProps = buildProps({
+  /**
+   * @description 页脚内容
+   */
+  content: String,
+  /**
+   * @description 页脚导航信息
+   */
+  navigator: {
+    type: definePropType<FooterNavigatorData>(Array),
+    default: () => [],
+  },
+  /**
+   * @description 内容字体颜色，以tn开头使用图鸟内置的颜色
+   */
+  textColor: String,
+  /**
+   * @description 页脚字体尺寸大小，内置了 `sm` 、 `lg` 、 `xl` 三种尺寸，可以传递指定的尺寸设置
+   */
+  size: String,
+  /**
+   * @description 导航信息字体颜色，以tn开头使用图鸟内置的颜色
+   */
+  navigatorTextColor: String,
+  /**
+   * @description 页脚距离底部的距离，默认单位 rpx
+   */
+  offsetBottom: String,
+  /**
+   * @description 是否固定在底部
+   */
+  fixed: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @description 固定在底部的方式，`page`  固定在页面底部，`container`  固定在容器底部
+   */
+  fixedMode: {
+    type: String,
+    values: footerFixedMode,
+    default: 'container',
+  },
+  /**
+   * @description 是否开启底部安全边距
+   */
+  safeAreaInsetBottom: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+export const footerEmits = {
+  /**
+   * @description 点击页脚内容
+   */
+  click: () => true,
+  /**
+   * @description 点击页脚导航
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  navigatorClick: (navigator: FooterNavigator) => true,
+}
+
+export type FooterProps = ExtractPropTypes<typeof footerProps>
+export type FooterEmits = typeof footerEmits
+
+export type FooterFixedMode = (typeof footerFixedMode)[number]

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

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { footerEmits, footerProps } from './footer'
+import { useFooter, useFooterCustomStyle } from './composables'
+
+const props = defineProps(footerProps)
+const emits = defineEmits(footerEmits)
+
+const { navigatorData, footerClickEvent, navigatorClickEvent } = useFooter(
+  props,
+  emits
+)
+const {
+  ns,
+  footerClass,
+  footerStyle,
+  contentClass,
+  contentStyle,
+  navigatorClass,
+  navigatorStyle,
+} = useFooterCustomStyle(props)
+</script>
+
+<template>
+  <view
+    :class="[footerClass]"
+    :style="footerStyle"
+    @tap.stop="footerClickEvent"
+  >
+    <!-- 导航内容 -->
+    <view v-if="navigatorData.length" :class="[ns.e('navigators')]">
+      <view
+        v-for="(item, index) in navigatorData"
+        :key="index"
+        :class="[navigatorClass(item)]"
+        :style="navigatorStyle(item)"
+        @tap.stop="navigatorClickEvent(item)"
+      >
+        {{ item.title }}
+      </view>
+    </view>
+
+    <!-- 页脚内容 -->
+    <view v-if="content" :class="[contentClass]" :style="contentStyle">
+      {{ content }}
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../theme-chalk/src/footer.scss';
+</style>

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

@@ -0,0 +1,3 @@
+import type Footer from './footer.vue'
+
+export type TnFooterInstance = InstanceType<typeof Footer>

node_modules/@tuniao/tnui-vue3-uniapp/components/footer/src/types.ts

@@ -0,0 +1,12 @@
+export interface FooterNavigatorItem {
+  title: string
+  url: string
+  color: FooterNavigatorColor
+}
+
+export interface FooterNavigatorColor {
+  class: string
+  style: string
+}
+
+export type FooterNavigatorData = FooterNavigatorItem[]