2025/2/8第一次更新

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

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

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

@@ -0,0 +1,101 @@
+import { computed, toRef, watch } from 'vue'
+import { useComponentColor, useNamespace } from '../../../../hooks'
+
+import type { CSSProperties, Ref } from 'vue'
+import type { ModalBtnStyle } from '../modal'
+
+type OperationBtnComputedClass = (type: 'cancel' | 'confirm') => string
+type OperationBtnComputedStyle = (type: 'cancel' | 'confirm') => CSSProperties
+
+export const useModalCustomStyle = (
+  cancelBtnStyle: Ref<ModalBtnStyle>,
+  confirmBtnStyle: Ref<ModalBtnStyle>
+) => {
+  const ns = useNamespace('modal')
+
+  // 解析按钮的颜色
+  const [cancelBtnBgClass, cancelBtnBgStyle, updateCancelBtnBg] =
+    useComponentColor(toRef(cancelBtnStyle.value, 'bgColor'), 'bg')
+  const [cancelBtnColorClass, cancelBtnColorStyle, updateCancelBtnColor] =
+    useComponentColor(toRef(cancelBtnStyle.value, 'color'), 'text')
+  const [confirmBtnBgClass, confirmBtnBgStyle, updateConfirmBtnBg] =
+    useComponentColor(toRef(confirmBtnStyle.value, 'bgColor'), 'bg')
+  const [confirmBtnColorClass, confirmBtnColorStyle, updateConfirmBtnColor] =
+    useComponentColor(toRef(confirmBtnStyle.value, 'color'), 'text')
+
+  watch(
+    () => confirmBtnStyle,
+    (value) => {
+      updateConfirmBtnBg(value.value.bgColor)
+      updateConfirmBtnColor(value.value.color)
+    },
+    {
+      deep: true,
+    }
+  )
+  watch(
+    () => cancelBtnStyle,
+    (value) => {
+      updateCancelBtnBg(value.value.bgColor)
+      updateCancelBtnColor(value.value.color)
+    },
+    {
+      deep: true,
+    }
+  )
+
+  // 操作按钮所属类
+  const operationBtnClass = computed<OperationBtnComputedClass>(() => {
+    return (type: 'cancel' | 'confirm') => {
+      const cls: string[] = [
+        ns.e('operation-btn'),
+        ns.em('operation-btn', type),
+      ]
+
+      if (type === 'cancel') {
+        if (cancelBtnBgClass.value) cls.push(cancelBtnBgClass.value)
+        if (cancelBtnColorClass.value) cls.push(cancelBtnColorClass.value)
+      }
+      if (type === 'confirm') {
+        if (confirmBtnBgClass.value) cls.push(confirmBtnBgClass.value)
+        if (confirmBtnColorClass.value) cls.push(confirmBtnColorClass.value)
+      }
+
+      return cls.join(' ')
+    }
+  })
+
+  // 操作按钮的样式
+  const operationBtnStyle = computed<OperationBtnComputedStyle>(() => {
+    return (type: 'cancel' | 'confirm') => {
+      const style: CSSProperties = {}
+
+      if (type === 'cancel') {
+        if (cancelBtnBgStyle.value)
+          style.backgroundColor = cancelBtnBgStyle.value
+        if (cancelBtnColorStyle.value) {
+          style.color = cancelBtnColorStyle.value
+        } else if (!cancelBtnBgClass.value && !cancelBtnColorClass.value) {
+          style.color = 'var(--tn-color-danger)'
+        }
+      }
+      if (type === 'confirm') {
+        if (confirmBtnBgStyle.value)
+          style.backgroundColor = confirmBtnBgStyle.value
+        if (confirmBtnColorStyle.value) {
+          style.color = confirmBtnColorStyle.value
+        } else if (!confirmBtnBgClass.value && !confirmBtnColorClass.value) {
+          style.color = 'var(--tn-color-primary)'
+        }
+      }
+
+      return style
+    }
+  })
+
+  return {
+    ns,
+    operationBtnClass,
+    operationBtnStyle,
+  }
+}

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

@@ -0,0 +1,148 @@
+import { ref } from 'vue'
+import {
+  isBoolean,
+  isEmptyVariableInDefault,
+  isPromise,
+} from '../../../../utils'
+
+import type { ModalOptions } from '../modal'
+
+export const useModal = () => {
+  const openModal = ref(false)
+
+  // 弹框标题
+  const title = ref<Required<ModalOptions>['title']>('')
+
+  // 弹框内容
+  const content = ref<Required<ModalOptions>['content']>('')
+
+  // 是否显示取消按钮
+  const showCancel = ref<Required<ModalOptions>['showCancel']>(false)
+
+  // 取消按钮的文字
+  const cancelText = ref<Required<ModalOptions>['cancelText']>('')
+
+  // 取消按钮的样式
+  const cancelStyle = ref<Required<ModalOptions>['cancelStyle']>({})
+
+  // 确认按钮的文字
+  const confirmText = ref<Required<ModalOptions>['confirmText']>('')
+
+  // 确认按钮的样式
+  const confirmStyle = ref<Required<ModalOptions>['confirmStyle']>({})
+
+  // 是否显示遮罩
+  const mask = ref<Required<ModalOptions>['mask']>(true)
+
+  // 是否允许点击遮罩关闭
+  const maskClosable = ref<Required<ModalOptions>['maskClosable']>(false)
+
+  // 点击取消按钮触发的回调函数
+  const cancelFunc = ref<ModalOptions['cancel']>(undefined)
+
+  // 点击确认按钮触发的回调函数
+  const confirmFunc = ref<ModalOptions['confirm']>(undefined)
+
+  // 打开弹窗
+  const showModal = (options: ModalOptions) => {
+    openModal.value = true
+
+    title.value = isEmptyVariableInDefault(options.title, '')
+    content.value = options.content
+
+    showCancel.value = isEmptyVariableInDefault(options?.showCancel, false)
+    cancelText.value = isEmptyVariableInDefault(options?.cancelText, '取 消')
+    cancelStyle.value = isEmptyVariableInDefault(options?.cancelStyle, {})
+    confirmText.value = isEmptyVariableInDefault(options?.confirmText, '确 认')
+    confirmStyle.value = isEmptyVariableInDefault(options?.confirmStyle, {})
+    mask.value = isEmptyVariableInDefault(options?.mask, true)
+    maskClosable.value = isEmptyVariableInDefault(options?.maskClosable, false)
+    cancelFunc.value = options?.cancel
+    confirmFunc.value = options?.confirm
+  }
+
+  // 关闭弹窗
+  const closeModal = () => {
+    openModal.value = false
+  }
+
+  // 点击取消按钮
+  const clickCancel = () => {
+    if (!cancelFunc.value) {
+      closeModal()
+      return
+    }
+
+    const func = cancelFunc.value()
+
+    const isPromiseOrBool = [isPromise(func), isBoolean(func)].includes(true)
+
+    if (!isPromiseOrBool) {
+      // 传递的是普通函数
+      closeModal()
+      return
+    }
+
+    if (isPromise(func)) {
+      func
+        .then((res) => {
+          if (res) closeModal()
+        })
+        .catch((err) => {
+          // eslint-disable-next-line no-console
+          console.warn(`[TnModal] some error occured: ${err}`)
+        })
+    } else if (func) {
+      closeModal()
+    }
+  }
+
+  // 点击确认按钮
+  const clickConfirm = () => {
+    if (!confirmFunc.value) {
+      closeModal()
+      return
+    }
+
+    const func = confirmFunc.value()
+
+    const isPromiseOrBool = [isPromise(func), isBoolean(func)].includes(true)
+
+    if (!isPromiseOrBool) {
+      // 传递的是普通函数
+      closeModal()
+      return
+    }
+
+    if (isPromise(func)) {
+      func
+        .then((res) => {
+          if (res) closeModal()
+        })
+        .catch((err) => {
+          // eslint-disable-next-line no-console
+          console.warn(`[TnModal] some error occured: ${err}`)
+        })
+    } else if (func) {
+      closeModal()
+    }
+  }
+
+  return {
+    openModal,
+    showModal,
+    title,
+    content,
+    showCancel,
+    cancelText,
+    cancelStyle,
+    confirmText,
+    confirmStyle,
+    mask,
+    maskClosable,
+    cancelFunc,
+    confirmFunc,
+    clickCancel,
+    clickConfirm,
+  }
+}