2025/2/8第一次更新

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

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

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

@@ -0,0 +1,97 @@
+import { computed, toRef } from 'vue'
+import {
+  useComponentColor,
+  useComponentSize,
+  useNamespace,
+} from '../../../../hooks'
+import { formatDomSizeValue } from '../../../../utils'
+
+import type { CSSProperties } from 'vue'
+import type { LoadmoreProps } from '../loadmore'
+
+export const useLoadmoreCustomStyle = (props: LoadmoreProps) => {
+  const ns = useNamespace('loadmore')
+
+  // 解析颜色
+  const [textColorClass, textColorStyle] = useComponentColor(
+    toRef(props, 'color'),
+    'text'
+  )
+  const [bgColorClass, bgColorStyle] = useComponentColor(
+    toRef(props, 'color'),
+    'bg'
+  )
+
+  // 解析尺寸
+  const { sizeType } = useComponentSize(props.size)
+
+  // loadmore对应的类
+  const loadmoreClass = computed<string>(() => {
+    const cls: string[] = [ns.b()]
+
+    // 设置当前加载的模式
+    cls.push(ns.is(props.status))
+
+    // 是否有设置加载图标
+    if (props.loadingIcon) cls.push(ns.is('loading-icon'))
+
+    // 设置颜色
+    if (textColorClass.value) cls.push(textColorClass.value)
+
+    // 设置尺寸
+    if (props.size && sizeType.value === 'inner') cls.push(ns.m(props.size))
+
+    return cls.join(' ')
+  })
+  // loadmore样式
+  const loadmoreStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    // 设置颜色
+    if (!textColorClass.value) {
+      style.color = textColorStyle.value || 'var(--tn-text-color-primary)'
+    }
+
+    // 设置尺寸
+    if (props.size && sizeType.value === 'custom') {
+      style.fontSize = formatDomSizeValue(props.size)
+    }
+
+    return style
+  })
+
+  // dot点内容对应的类
+  const dotClass = computed<string>(() => {
+    const cls: string[] = [ns.e('dot')]
+
+    // 设置背景颜色
+    if (bgColorClass.value) cls.push(bgColorClass.value)
+
+    return cls.join(' ')
+  })
+  // dot点内容的样式
+  const dotStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    // 设置背景颜色
+    if (!bgColorClass.value) {
+      style.backgroundColor =
+        bgColorStyle.value || 'var(--tn-text-color-primary)'
+    }
+
+    // 设置尺寸
+    if (props.size && sizeType.value === 'custom') {
+      style.width = style.height = formatDomSizeValue(props.size)
+    }
+
+    return style
+  })
+
+  return {
+    ns,
+    loadmoreClass,
+    loadmoreStyle,
+    dotClass,
+    dotStyle,
+  }
+}

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

@@ -0,0 +1,3 @@
+import type Loadmore from './loadmore.vue'
+
+export type TnLoadmoreInstance = InstanceType<typeof Loadmore>

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

@@ -0,0 +1,83 @@
+import { buildProps, definePropType } from '../../../utils'
+import { loadingModes } from '../../loading'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const loadmoreStatus = [
+  'loadmore',
+  'loading',
+  'nomore',
+  'empty',
+] as const
+
+export type LoadmoreText = {
+  loadmore?: string
+  loading?: string
+  nomore?: string
+  empty?: string
+}
+
+export const loadmoreProps = buildProps({
+  /**
+   * @description 加载状态
+   */
+  status: {
+    type: String,
+    values: loadmoreStatus,
+    default: 'loadmore',
+  },
+  /**
+   * @description 尺寸大小，支持`sm`, `md`, `lg` 以及传入指定的尺寸大小
+   */
+  size: String,
+  /**
+   * @description 颜色，以tn开头将使用图鸟内置的颜色
+   */
+  color: String,
+  /**
+   * @description 加载文案
+   */
+  text: {
+    type: definePropType<LoadmoreText>(Object),
+    default: () => ({
+      loadmore: '加载更多',
+      loading: '加载中...',
+      nomore: '没有更多了',
+      empty: '暂无数据',
+    }),
+  },
+  /**
+   * @description 是否显示加载图标
+   */
+  loadingIcon: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @description 加载图标类型
+   */
+  loadingIconMode: {
+    type: String,
+    values: loadingModes,
+    default: 'circle',
+  },
+  /**
+   * @description 是否显示加载文案，如果不显示，在加载状态下，只显示加载图标，在加载完成状态下，不显示任何内容，在没有数据时显示一个点
+   */
+  loadingText: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+export const loadmoreEmits = {
+  /**
+   * @description 点击事件
+   */
+  click: () => true,
+}
+
+export type LoadmoreProps = ExtractPropTypes<typeof loadmoreProps>
+export type LoadmoreEmits = typeof loadmoreEmits
+
+export type LoadmoreStatus = (typeof loadmoreStatus)[number]

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

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import TnLoading from '../../loading/src/loading.vue'
+import { isEmptyVariableInDefault } from '../../../utils'
+import { loadmoreEmits, loadmoreProps } from './loadmore'
+import { useLoadmoreCustomStyle } from './composables'
+
+const props = defineProps(loadmoreProps)
+const emits = defineEmits(loadmoreEmits)
+
+const { ns, loadmoreClass, loadmoreStyle, dotClass, dotStyle } =
+  useLoadmoreCustomStyle(props)
+
+// loadmore点击事件
+const loadMoreClickEvent = () => {
+  emits('click')
+}
+</script>
+
+<template>
+  <view
+    :class="[loadmoreClass]"
+    :style="loadmoreStyle"
+    @tap.stop="loadMoreClickEvent"
+  >
+    <view :class="[ns.e('content')]">
+      <!-- 加载图标 -->
+      <TnLoading
+        v-if="status === 'loading' && loadingIcon"
+        show
+        animation
+        :mode="loadingIconMode"
+        :size="size"
+        :color="isEmptyVariableInDefault(color, 'tn-gray')"
+      />
+      <view v-if="loadingText" :class="[ns.e('text')]">
+        <!-- 加载更多文案 -->
+        <text
+          v-if="status === 'loadmore' && text?.loadmore"
+          :class="[ns.em('text', 'loadmore')]"
+        >
+          {{ text.loadmore }}
+        </text>
+        <!-- 加载文案 -->
+        <text
+          v-if="status === 'loading' && text?.loading"
+          :class="[ns.em('text', 'loading')]"
+        >
+          {{ text.loading }}
+        </text>
+        <!-- 加载完成文案 -->
+        <text
+          v-if="status === 'nomore' && text?.nomore"
+          :class="[ns.em('text', 'nomore')]"
+        >
+          {{ text.nomore }}
+        </text>
+        <!-- 数据为空 -->
+        <text
+          v-if="status === 'empty' && text?.empty"
+          :class="[ns.em('text', 'empty')]"
+        >
+          {{ text.empty }}
+        </text>
+      </view>
+
+      <!-- 显示点替代内容 -->
+      <view
+        v-if="
+          (!loadingText && status !== 'loading') ||
+          (status === 'loading' && !loadingIcon && !loadingText)
+        "
+        :class="[dotClass]"
+        :style="dotStyle"
+      />
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../theme-chalk/src/loadmore.scss';
+</style>