2025/2/8第一次更新

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

@@ -0,0 +1 @@
+export * from './title-custom'

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

@@ -0,0 +1,115 @@
+import { computed, toRef } from 'vue'
+import {
+  useComponentColor,
+  useComponentSize,
+  useNamespace,
+} from '../../../../hooks'
+import { formatDomSizeValue } from '../../../../utils'
+
+import type { CSSProperties } from 'vue'
+import type { TitleProps } from '../title'
+
+export const useTitleCustomStyle = (props: TitleProps) => {
+  const ns = useNamespace('title')
+
+  // 解析颜色
+  const [titleTextColorClass, titleTextColorStyle] = useComponentColor(
+    toRef(props, 'color'),
+    'text'
+  )
+  const [titleBgColorClass, titleBgColorStyle] = useComponentColor(
+    toRef(props, 'color'),
+    'bg'
+  )
+  const [assistTextColorClass, assistTextColorStyle] = useComponentColor(
+    toRef(props, 'assistColor'),
+    'text'
+  )
+  const [assistBgColorClass, assistBgColorStyle] = useComponentColor(
+    toRef(props, 'assistColor'),
+    'bg'
+  )
+
+  // 解析尺寸
+  const { sizeType } = useComponentSize(props.size)
+
+  // title对应的类
+  const titleClass = computed<string>(() => {
+    const cls: string[] = [ns.e('title'), ns.em('title', props.mode)]
+
+    // 设置颜色
+    if (props.mode === 'transparent') {
+      cls.push('tn-text-transparent')
+      if (titleBgColorClass.value) cls.push(titleBgColorClass.value)
+    } else {
+      if (titleTextColorClass.value) cls.push(titleTextColorClass.value)
+    }
+
+    // 设置尺寸
+    if (props.size && sizeType.value === 'inner')
+      cls.push(ns.em('title', props.size))
+
+    return cls.join(' ')
+  })
+  // title对应的样式
+  const titleStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    // 设置颜色
+    if (props.mode === 'transparent') {
+      if (!titleBgColorClass.value)
+        style.backgroundColor =
+          titleBgColorStyle.value || 'var(--tn-color-primary)'
+    } else {
+      if (!titleTextColorClass.value)
+        style.color =
+          titleTextColorStyle.value || 'var(--tn-text-color-primary)'
+    }
+
+    // 设置尺寸
+    if (props.size && sizeType.value === 'custom')
+      style.fontSize = formatDomSizeValue(props.size)
+
+    // 设置对齐方式
+    if (props.align) style.textAlign = props.align
+
+    return style
+  })
+
+  // assist颜色对应的类
+  const assistColorClass = computed<string>(() => {
+    const cls: string[] = []
+
+    if (props.mode === 'subTitle') {
+      if (assistTextColorClass.value) cls.push(assistTextColorClass.value)
+    } else {
+      if (assistBgColorClass.value) cls.push(assistBgColorClass.value)
+    }
+
+    return cls.join(' ')
+  })
+  // assist颜色对应的样式
+  const assistColorStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    if (props.mode === 'subTitle') {
+      if (!assistTextColorClass.value)
+        style.color =
+          assistTextColorStyle.value || 'var(--tn-color-primary-light-7)'
+    } else {
+      if (!assistBgColorClass.value)
+        style.backgroundColor =
+          assistBgColorStyle.value || 'var(--tn-color-primary)'
+    }
+
+    return style
+  })
+
+  return {
+    ns,
+    titleClass,
+    titleStyle,
+    assistColorClass,
+    assistColorStyle,
+  }
+}

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

@@ -0,0 +1,3 @@
+import type Title from './title.vue'
+
+export type TnTitleInstance = InstanceType<typeof Title>

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

@@ -0,0 +1,65 @@
+import { buildProps } from '../../../utils'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const titleModes = [
+  'normal',
+  'vLine',
+  'dot',
+  'hLine',
+  'subTitle',
+  'transparent',
+] as const
+
+export const titleAlign = ['left', 'center', 'right'] as const
+
+export const titleProps = buildProps({
+  /**
+   * @description 标题内容
+   */
+  title: String,
+  /**
+   * @description 子标题内容，设置 mode 为 subTitle 时生效
+   */
+  subTitle: String,
+  /**
+   * @description 标题模式
+   */
+  mode: {
+    type: String,
+    values: titleModes,
+    default: 'normal',
+  },
+  /**
+   * @description 标题大小，内置`sm`、`lg`、`xl`，同时也可以传递指定的尺寸
+   */
+  size: String,
+  /**
+   * @description 标题对齐方式
+   */
+  align: {
+    type: String,
+    values: titleAlign,
+    default: 'left',
+  },
+  /**
+   * @description 标题颜色，以tn开头则使用图鸟内置的颜色
+   */
+  color: String,
+  /**
+   * @description 辅助元素颜色，以tn开头则使用图鸟内置的颜色
+   */
+  assistColor: String,
+})
+
+export const titleEmits = {
+  /**
+   * @description 点击事件
+   */
+  click: () => true,
+}
+
+export type TitleProps = ExtractPropTypes<typeof titleProps>
+export type TitleEmits = typeof titleEmits
+
+export type TitleMode = (typeof titleModes)[number]

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

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { titleEmits, titleProps } from './title'
+import { useTitleCustomStyle } from './composables'
+
+const props = defineProps(titleProps)
+const emits = defineEmits(titleEmits)
+
+const { ns, titleClass, titleStyle, assistColorClass, assistColorStyle } =
+  useTitleCustomStyle(props)
+
+// 标题点击事件
+const titleClickEvent = () => {
+  emits('click')
+}
+</script>
+
+<template>
+  <view :class="[ns.b()]" @tap.stop="titleClickEvent">
+    <!-- 内容 -->
+    <view class="tn-text-ellipsis-1" :class="[titleClass]" :style="titleStyle">
+      <slot>
+        <view class="content tn-text-ellipsis-1">
+          {{ title }}
+        </view>
+      </slot>
+      <!-- 辅助元素 -->
+      <view
+        v-if="mode !== 'normal' && mode !== 'transparent'"
+        :class="[ns.e(mode), assistColorClass]"
+        :style="assistColorStyle"
+      >
+        <template v-if="mode === 'subTitle' && subTitle">
+          {{ subTitle }}
+        </template>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../theme-chalk/src/title.scss';
+</style>