2025/2/8第一次更新

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

@@ -0,0 +1,8 @@
+import { withNoopInstall } from '../../utils'
+import Empty from './src/empty.vue'
+
+export const TnEmpty = withNoopInstall(Empty)
+export default TnEmpty
+
+export * from './src/empty'
+export type { TnEmptyInstance } from './src/instance'

node_modules/@tuniao/tnui-vue3-uniapp/components/empty/libs/default.ts

@@ -0,0 +1,18 @@
+import type { EmptyMode } from '../src/empty'
+
+export const emptyDefaultTips: Record<EmptyMode, string> = {
+  cart: '购物车为空',
+  page: '页面不存在',
+  search: '搜索结果为空',
+  address: '地址为空',
+  network: '网络不通',
+  order: '订单为空',
+  coupon: '优惠券为空',
+  favor: '暂无收藏',
+  permission: '无权限',
+  history: '历史记录为空',
+  message: '暂无消息',
+  list: '列表为空',
+  data: '暂无数据',
+  comment: '暂无评论',
+}

node_modules/@tuniao/tnui-vue3-uniapp/components/empty/libs/index.ts

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

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

@@ -0,0 +1,79 @@
+import { computed, toRef } from 'vue'
+import {
+  useComponentColor,
+  useComponentSize,
+  useNamespace,
+} from '../../../../hooks'
+import { formatDomSizeValue } from '../../../../utils'
+
+import type { CSSProperties, Ref } from 'vue'
+import type { EmptyProps } from '../empty'
+
+type TextIconStyleType = (type: 'icon' | 'tips') => CSSProperties
+
+export const useEmptyCustomStyle = (
+  props: EmptyProps,
+  customIconContent: Ref<boolean>,
+  customTipsContent: Ref<boolean>
+) => {
+  const ns = useNamespace('empty')
+
+  // 解析颜色
+  const [textColorClass, textColorStyle] = useComponentColor(
+    toRef(props, 'color'),
+    'text'
+  )
+
+  const { sizeType } = useComponentSize(props.size)
+
+  // empty对应的类
+  const emptyClass = computed<string>(() => {
+    const cls: string[] = [ns.b()]
+
+    // 设置背景颜色
+    if (textColorClass.value) cls.push(textColorClass.value)
+
+    // 设置尺寸
+    if (props.size && sizeType.value === 'inner') cls.push(ns.m(props.size))
+
+    return cls.join(' ')
+  })
+  // empty对应的样式
+  const emptyStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    // 设置背景颜色
+    if (!textColorClass.value) {
+      style.color = textColorStyle.value || 'var(--tn-color-gray-disbaled)'
+    }
+
+    return style
+  })
+
+  // 设置icon和text的样式
+  const iconTextStyle = computed<TextIconStyleType>(() => {
+    return (type: 'icon' | 'tips') => {
+      const style: CSSProperties = {}
+
+      // 设置用户自定义尺寸
+      if (props.size && sizeType.value === 'custom') {
+        if (type === 'icon' && !customIconContent.value) {
+          style.fontSize = formatDomSizeValue(props.size)
+          style.width = style.height = formatDomSizeValue(props.size)
+        }
+        if (type === 'tips' && !customTipsContent.value) {
+          style.fontSize = `calc(${formatDomSizeValue(props.size)} * 0.35)`
+        }
+      }
+
+      return style
+    }
+  })
+
+  return {
+    ns,
+    emptyClass,
+    emptyStyle,
+    iconTextStyle,
+  }
+}

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

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

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

@@ -0,0 +1,50 @@
+import { buildProps } from '../../../utils'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const emptyMode = [
+  'cart',
+  'page',
+  'search',
+  'address',
+  'network',
+  'order',
+  'coupon',
+  'favor',
+  'permission',
+  'history',
+  'message',
+  'list',
+  'data',
+  'comment',
+] as const
+
+export const emptyProps = buildProps({
+  /**
+   * @description 空白提示类型
+   */
+  mode: {
+    type: String,
+    values: emptyMode,
+    required: true,
+  },
+  /**
+   * @description 内容颜色，以tn开头使用图鸟内置的颜色
+   */
+  color: String,
+  /**
+   * @description 内容尺寸，可以传递尺寸或者`sm` `lg` `xl`
+   */
+  size: String,
+  /**
+   * @description 是否显示提示
+   */
+  showTips: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+export type EmptyProps = ExtractPropTypes<typeof emptyProps>
+
+export type EmptyMode = (typeof emptyMode)[number]

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

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { computed, useSlots } from 'vue'
+import TnIcon from '../../icon/src/icon.vue'
+import { emptyDefaultTips } from '../libs'
+import { emptyProps } from './empty'
+import { useEmptyCustomStyle } from './composables'
+
+const props = defineProps(emptyProps)
+
+const slots = useSlots()
+// 判断是否自定义icon或者tips的插槽
+const customIconContent = computed<boolean>(() => !!slots?.icon)
+const customTipsContent = computed<boolean>(() => !!slots?.tips)
+
+const { ns, emptyClass, emptyStyle, iconTextStyle } = useEmptyCustomStyle(
+  props,
+  customIconContent,
+  customTipsContent
+)
+
+// 根据类型获取默认提示
+const emptyTips = computed<string>(() =>
+  props.mode ? emptyDefaultTips[props.mode] : ''
+)
+</script>
+
+<template>
+  <view :class="[emptyClass]" :style="emptyStyle">
+    <!-- 图标 -->
+    <view
+      :class="[ns.e('icon'), ns.is('custom', customIconContent)]"
+      :style="iconTextStyle('icon')"
+    >
+      <slot name="icon">
+        <TnIcon :name="`empty-${mode}`" />
+      </slot>
+    </view>
+    <!-- 提示文字 -->
+    <view
+      v-if="showTips || $slots.tips"
+      :class="[ns.e('tips'), ns.is('custom', customTipsContent)]"
+      :style="iconTextStyle('tips')"
+    >
+      <slot name="tips">
+        {{ emptyTips }}
+      </slot>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../theme-chalk/src/empty.scss';
+</style>

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

@@ -0,0 +1,3 @@
+import type Empty from './empty.vue'
+
+export type TnEmptyInstance = InstanceType<typeof Empty>