2025/2/8第一次更新

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

@@ -0,0 +1,8 @@
+import { withNoopInstall } from '../../utils'
+import Notify from './src/notify.vue'
+
+export const TnNotify = withNoopInstall(Notify)
+export default TnNotify
+
+export * from './src/notify'
+export type { TnNotifyInstance } from './src/instance'

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

@@ -0,0 +1,2 @@
+export * from './notify-custom'
+export * from './use-notify'

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

@@ -0,0 +1,71 @@
+import { computed, toRef } from 'vue'
+import { useComponentColor, useNamespace } from '../../../../hooks'
+import { formatDomSizeValue, isEmptyVariableInDefault } from '../../../../utils'
+
+import type { CSSProperties, Ref } from 'vue'
+import type { NotifyOptions, NotifyProps } from '../notify'
+
+export const useNotifyCustomStyle = (
+  props: NotifyProps,
+  options: Ref<NotifyOptions>,
+  isActive: Ref<boolean>
+) => {
+  const ns = useNamespace('notify')
+
+  // 解析颜色
+  const [bgColorClass, bgColorStyle] = useComponentColor(
+    toRef(options.value, 'bgColor'),
+    'bg'
+  )
+  const [textColorClass, textColorStyle] = useComponentColor(
+    toRef(options.value, 'textColor'),
+    'text'
+  )
+
+  // notify对应的类
+  const notifyClass = computed<string>(() => {
+    const cls: string[] = [ns.b()]
+
+    // 设置类型和颜色
+    if (options.value.type) cls.push(`tn-type-${options.value.type}_bg`)
+    if (bgColorClass.value) cls.push(bgColorClass.value)
+    if (textColorClass.value) cls.push(textColorClass.value)
+
+    // 设置弹出位置
+    cls.push(ns.m(isEmptyVariableInDefault(options?.value.position, 'top')))
+
+    if (isActive.value) cls.push(ns.is('active'))
+
+    return cls.join(' ')
+  })
+  // notify对应的样式
+  const notifyStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    if (bgColorStyle.value) style.backgroundColor = bgColorStyle.value
+
+    if (textColorStyle.value) {
+      style.color = textColorStyle.value
+    } else if (
+      !bgColorClass.value &&
+      !textColorClass.value &&
+      !options.value.type
+    ) {
+      style.color = 'var(--tn-color-white)'
+    }
+
+    // 如果当前是顶部弹出，则设置顶部距离
+    if (options.value.position === 'top' && props.offsetTop) {
+      style.top = formatDomSizeValue(props.offsetTop, 'px')
+    }
+
+    if (props.zIndex) style.zIndex = props.zIndex
+
+    return style
+  })
+
+  return {
+    notifyClass,
+    notifyStyle,
+  }
+}

node_modules/@tuniao/tnui-vue3-uniapp/components/notify/src/composables/use-notify.ts

@@ -0,0 +1,49 @@
+import { ref } from 'vue'
+
+import type { NotifyOptions } from '../notify'
+
+export const useNotify = () => {
+  // notify的默认配置项
+  const defaultOptions: NotifyOptions = {
+    msg: '',
+    type: 'primary',
+    position: 'top',
+    bgColor: '',
+    textColor: '',
+    duration: 3000,
+  }
+  // notify的配置项
+  const options = ref<NotifyOptions>({
+    msg: '',
+    type: 'primary',
+    position: '',
+    bgColor: '',
+    textColor: '',
+    duration: 3000,
+  })
+
+  // 显示notify
+  const isActive = ref(false)
+
+  // 弹出notify通知
+  const showNotify = (_options: NotifyOptions) => {
+    Object.assign(options.value, defaultOptions, _options)
+    isActive.value = true
+    autoCloseNotify()
+  }
+
+  // 自动关闭弹框
+  let autoCloseTimer: ReturnType<typeof setTimeout> | null = null
+  const autoCloseNotify = () => {
+    if (autoCloseTimer) clearTimeout(autoCloseTimer)
+    autoCloseTimer = setTimeout(() => {
+      isActive.value = false
+    }, options.value.duration)
+  }
+
+  return {
+    options,
+    isActive,
+    showNotify,
+  }
+}

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

@@ -0,0 +1,3 @@
+import type Notify from './notify.vue'
+
+export type TnNotifyInstance = InstanceType<typeof Notify>

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

@@ -0,0 +1,57 @@
+import { ZIndex } from '../../../constants'
+import { buildProps } from '../../../utils'
+
+import type { ExtractPropTypes } from 'vue'
+import type { ComponentType } from '../../../constants'
+
+export const notifyShowPosition = ['', 'top', 'center', 'bottom'] as const
+export type NotifyShowPosition = (typeof notifyShowPosition)[number]
+
+/**
+ * @description notify options配置项
+ */
+export interface NotifyOptions {
+  /**
+   * @description 消息内容
+   */
+  msg: string
+  /**
+   * @description 消息类型
+   */
+  type?: Omit<ComponentType, ''>
+  /**
+   * @description 通知的位置
+   */
+  position?: NotifyShowPosition
+  /**
+   * @description 背景颜色
+   */
+  bgColor?: string
+  /**
+   * @description 文字颜色
+   */
+  textColor?: string
+  /**
+   * @description 自动关闭时间
+   */
+  duration?: number
+}
+
+export const notifyProps = buildProps({
+  /**
+   * @description 距离顶部的距离，防止使用了自定义顶部导航栏后，notify 被遮挡，单位为 px
+   */
+  offsetTop: {
+    type: Number,
+    default: 0,
+  },
+  /**
+   * @description ZIndex
+   */
+  zIndex: {
+    type: Number,
+    default: ZIndex.notify,
+  },
+})
+
+export type NotifyProps = ExtractPropTypes<typeof notifyProps>

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

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { notifyProps } from './notify'
+import { useNotify, useNotifyCustomStyle } from './composables'
+
+const props = defineProps(notifyProps)
+
+const { options, isActive, showNotify } = useNotify()
+const { notifyClass, notifyStyle } = useNotifyCustomStyle(
+  props,
+  options,
+  isActive
+)
+
+defineExpose({
+  /**
+   * @description: 显示通知
+   */
+  show: showNotify,
+})
+</script>
+
+<template>
+  <view :class="[notifyClass]" :style="notifyStyle">
+    {{ options.msg }}
+  </view>
+</template>
+
+<style lang="scss" scoped>
+@import '../../../theme-chalk/src/notify.scss';
+</style>