2025/2/8第一次更新

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

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

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

@@ -0,0 +1,91 @@
+import { computed } from 'vue'
+import { useNamespace } from '../../../../hooks'
+import { formatDomSizeValue } from '../../../../utils'
+import { useProgressProps } from '../../../base/composables/use-progress-props'
+
+import type { CSSProperties } from 'vue'
+import type { LineProgressProps } from '../line-progress'
+
+export const useLineProgressCustomStyle = (props: LineProgressProps) => {
+  const ns = useNamespace('line-progress')
+
+  const {
+    percent,
+    activeColorClass,
+    activeColorStyle,
+    inactiveColorClass,
+    inactiveColorStyle,
+  } = useProgressProps(props)
+
+  // 进度条所对应的类
+  const progressClass = computed<string>(() => {
+    const cls: string[] = [ns.b()]
+
+    // 设置进度条颜色
+    if (inactiveColorClass.value) cls.push(inactiveColorClass.value)
+
+    return cls.join(' ')
+  })
+
+  // 进度条所对应的样式
+  const progressStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    // 设置进度条颜色
+    if (!inactiveColorClass.value)
+      style.backgroundColor =
+        inactiveColorStyle.value || 'var(--tn-color-gray-disabled)'
+
+    // 设置进度条高度
+    if (props.height) {
+      style.height = formatDomSizeValue(props.height)
+      // 设置文字的大小
+      style.fontSize = style.height
+    }
+
+    return style
+  })
+
+  // 已激活进度条所对应的类
+  const activeProgressClass = computed<string>(() => {
+    const cls: string[] = [ns.e('active')]
+
+    // 设置进度条颜色
+    if (activeColorClass.value) cls.push(activeColorClass.value)
+
+    // 是否显示波纹
+    if (props.stripe) {
+      cls.push(ns.em('active', 'stripe'))
+      // 波纹是否运动
+      if (props.stripeAnimated) cls.push(ns.em('active', 'stripe--animation'))
+    }
+
+    return cls.join(' ')
+  })
+
+  // 已激活进度条所对应的样式
+  const activeProgressStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    // 根据进度设置进度条宽度
+    if (percent.value) style.width = `${percent.value}%`
+
+    // 动画执行时间
+    if (props.duration) style.transitionDuration = `${props.duration}ms`
+
+    // 设置进度条颜色
+    if (!activeColorClass.value)
+      style.backgroundColor =
+        activeColorStyle.value || 'var(--tn-color-primary)'
+
+    return style
+  })
+
+  return {
+    ns,
+    progressClass,
+    progressStyle,
+    activeProgressClass,
+    activeProgressStyle,
+  }
+}

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

@@ -0,0 +1,3 @@
+import type LineProgress from './line-progress.vue'
+
+export type TnLineProgressInstance = InstanceType<typeof LineProgress>

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

@@ -0,0 +1,28 @@
+import { buildProps } from '../../../utils'
+import { propgressBaseProps } from '../../base/common-props/progress'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const lineProgressProps = buildProps({
+  ...propgressBaseProps,
+  /**
+   * @description 进度条高度
+   */
+  height: {
+    type: [String, Number],
+    default: 20,
+  },
+  /**
+   * @description 是否显示条纹
+   */
+  stripe: Boolean,
+  /**
+   * @description 条纹是否有动画
+   */
+  stripeAnimated: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+export type LineProgressProps = ExtractPropTypes<typeof lineProgressProps>

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

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { lineProgressProps } from './line-progress'
+import { useLineProgressCustomStyle } from './composables'
+
+const props = defineProps(lineProgressProps)
+const {
+  ns,
+  progressClass,
+  progressStyle,
+  activeProgressClass,
+  activeProgressStyle,
+} = useLineProgressCustomStyle(props)
+</script>
+
+<template>
+  <view :class="[progressClass]" :style="progressStyle">
+    <!-- 进度 -->
+    <view :class="[activeProgressClass]" :style="activeProgressStyle">
+      <view
+        v-if="showPercent || $slots.default"
+        class="tn-text-ellipsis-1"
+        :class="[ns.e('percent-value')]"
+      >
+        <slot> {{ percent }}% </slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../theme-chalk/src/line-progress.scss';
+</style>