2025/2/8第一次更新

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

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

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

@@ -0,0 +1,99 @@
+import { computed, toRef } from 'vue'
+import { useComponentColor, useNamespace } from '../../../../hooks'
+import { formatDomSizeValue, isEmpty } from '../../../../utils'
+
+import type { CSSProperties } from 'vue'
+import type { ListProps } from '../list-item'
+
+export const useListCustomStyle = (props: ListProps) => {
+  const ns = useNamespace('list-item')
+
+  // 解析颜色
+  const [bgColorClass, bgColorStyle] = useComponentColor(
+    toRef(props, 'bgColor'),
+    'bg'
+  )
+  const [textColorClass, textColorStyle] = useComponentColor(
+    toRef(props, 'textColor'),
+    'text'
+  )
+  const [rightIconColorClass, rightIconColorStyle] = useComponentColor(
+    toRef(props, 'rightIconColor'),
+    'text'
+  )
+
+  // list对应的类
+  const listClass = computed<string>(() => {
+    const cls: string[] = [ns.b()]
+
+    // 设置颜色
+    if (bgColorClass.value) cls.push(bgColorClass.value)
+    if (textColorClass.value) cls.push(textColorClass.value)
+
+    // 设置圆角
+    if (props.radius) cls.push(ns.m('radius'))
+
+    // 自定义类
+    if (props.customClass) cls.push(props.customClass)
+
+    return cls.join(' ')
+  })
+  // list对应的样式
+  const listStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    // 设置宽高
+    if (props.width) style.width = formatDomSizeValue(props.width)
+    if (props.height) style.height = formatDomSizeValue(props.height)
+
+    // 设置颜色
+    if (!bgColorClass.value) {
+      style.backgroundColor = bgColorStyle.value || 'var(--tn-color-white)'
+      if (!textColorClass.value) {
+        style.color = 'var(--tn-text-color-primary)'
+      }
+    }
+    if (textColorStyle.value) {
+      style.color = textColorStyle.value
+    }
+
+    // 设置字体大小
+    if (props.fontSize) style.fontSize = formatDomSizeValue(props.fontSize)
+
+    // 设置自定义样式
+    if (!isEmpty(props.customStyle)) {
+      Object.assign(style, props.customStyle)
+    }
+
+    return style
+  })
+
+  // 右图标对应的类
+  const rightIconClass = computed<string>(() => {
+    const cls: string[] = [ns.e('right-icon')]
+
+    // 设置颜色
+    if (rightIconColorClass.value) cls.push(rightIconColorClass.value)
+
+    return cls.join(' ')
+  })
+  // 右图标对应的样式
+  const rightIconStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    // 设置颜色
+    if (!rightIconColorClass.value) {
+      style.color = rightIconColorStyle.value || 'var(--tn-color-gray)'
+    }
+
+    return style
+  })
+
+  return {
+    ns,
+    listClass,
+    listStyle,
+    rightIconClass,
+    rightIconStyle,
+  }
+}

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

@@ -0,0 +1,3 @@
+import type List from './list-item.vue'
+
+export type TnListItemInstance = InstanceType<typeof List>

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

@@ -0,0 +1,76 @@
+import { buildProps } from '../../../utils'
+import { useComponentCustomStyleProp } from '../../base/composables/use-component-common-props'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const listProps = buildProps({
+  /**
+   * @description 列表宽度
+   */
+  width: {
+    type: String,
+  },
+  /**
+   * @description 列表高度
+   */
+  height: {
+    type: String,
+  },
+  /**
+   * @description 列表文字大小
+   */
+  fontSize: String,
+  /**
+   * @description 背景颜色，以tn开头则使用图鸟内置的颜色
+   */
+  bgColor: String,
+  /**
+   * @description 文字颜色，以tn开头则使用图鸟内置的颜色
+   */
+  textColor: String,
+  /**
+   * @description 显示右侧图标的名称，不填写则不显示
+   */
+  rightIcon: String,
+  /**
+   * @description 显示右侧图标的颜色，以tn开头则使用图鸟内置的颜色
+   */
+  rightIconColor: String,
+  /**
+   * @description 是否显示圆角
+   */
+  radius: Boolean,
+  /**
+   * @description 是否显示底部边框
+   */
+  bottomBorder: Boolean,
+  /**
+   * @description 底部边框是否有缩进
+   */
+  bottomBorderIndent: Boolean,
+  /**
+   * @description 点击时加载的类名
+   */
+  hoverClass: {
+    type: String,
+    default: '',
+  },
+  /**
+   * @description 自定义样式
+   */
+  customStyle: useComponentCustomStyleProp,
+  /**
+   * @description 自定义类
+   */
+  customClass: String,
+})
+
+export const listEmits = {
+  /**
+   * @description 点击事件
+   */
+  click: () => true,
+}
+
+export type ListProps = ExtractPropTypes<typeof listProps>
+export type ListEmits = typeof listEmits

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

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import TnIcon from '../../icon/src/icon.vue'
+import { listEmits, listProps } from './list-item'
+import { useListCustomStyle } from './composables'
+
+const props = defineProps(listProps)
+const emits = defineEmits(listEmits)
+
+const { ns, listClass, listStyle, rightIconClass, rightIconStyle } =
+  useListCustomStyle(props)
+
+// list点击事件
+const listClickEvent = () => {
+  emits('click')
+}
+</script>
+
+<template>
+  <view
+    :class="[listClass]"
+    :style="listStyle"
+    :hover-class="hoverClass"
+    :hover-stay-time="150"
+    @tap.stop="listClickEvent"
+  >
+    <!-- 内容 -->
+    <view class="tn-text-ellipsis-1" :class="[ns.e('content')]">
+      <slot />
+    </view>
+
+    <!-- 右图标 -->
+    <view v-if="rightIcon" :class="rightIconClass" :style="rightIconStyle">
+      <TnIcon :name="rightIcon" />
+    </view>
+
+    <!-- 底部边框 -->
+    <view
+      v-if="bottomBorder"
+      :class="[ns.e('bottom-border'), ns.is('indent', bottomBorderIndent)]"
+    />
+  </view>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../theme-chalk/src/list.scss';
+</style>