2025/2/8第一次更新

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

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

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

@@ -0,0 +1,124 @@
+import { computed, toRef } from 'vue'
+import { useComponentColor, useNamespace } from '../../../../hooks'
+
+import type { CSSProperties } from 'vue'
+import type { SearchBoxProps } from '../search-box'
+
+export const useSearchBoxCustomStyle = (props: SearchBoxProps) => {
+  const ns = useNamespace('search-box')
+
+  // 解析颜色
+  const [textColorClass, textColorStyle] = useComponentColor(
+    toRef(props, 'textColor'),
+    'text'
+  )
+  const [borderColorClass, borderColorStyle] = useComponentColor(
+    toRef(props, 'borderColor'),
+    'border'
+  )
+  const [placeholderColorClass, placeholderColorStyle] = useComponentColor(
+    toRef(props, 'placeholderColor'),
+    'text'
+  )
+  const [searchButtonTextColorClass, searchButtonTextColorStyle] =
+    useComponentColor(toRef(props, 'searchButtonTextColor'), 'text')
+  const [searchButtonBgColorClass, searchButtonBgColorStyle] =
+    useComponentColor(toRef(props, 'searchButtonBgColor'), 'bg')
+
+  // 搜索框的类
+  const searchBoxClass = computed<string>(() => {
+    const cls: string[] = [
+      ns.b(),
+      ns.m(props.shape),
+      ns.is('no-search-btn', !props.searchButton),
+      ns.is('disabled', props.disabled),
+    ]
+
+    if (props.border) {
+      cls.push(ns.m('border'))
+      if (borderColorClass.value) cls.push(borderColorClass.value)
+    }
+    if (props.size) cls.push(ns.m(props.size))
+
+    if (textColorClass.value) cls.push(textColorClass.value)
+
+    return cls.join(' ')
+  })
+  // 搜索框的样式
+  const searchBoxStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    if (!textColorClass.value)
+      style.color = textColorStyle.value || 'var(--tn-text-color-primary)'
+
+    if (props.border) {
+      if (!borderColorClass.value) {
+        style.borderColor = borderColorStyle.value || 'var(--tn-color-gray)'
+      }
+    }
+
+    return style
+  })
+
+  // 搜索框占位文字的类
+  const placeholderClass = computed<string>(() => {
+    const cls: string[] = [
+      ns.e('placeholder'),
+      ns.em('placeholder', props.textAlign),
+    ]
+
+    if (placeholderColorClass.value) cls.push(placeholderColorClass.value)
+
+    return cls.join(' ')
+  })
+  // 搜索框占位文字的样式
+  const placeholderStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    if (!placeholderColorClass.value)
+      style.color =
+        placeholderColorStyle.value || 'var(--tn-text-color-secondary)'
+
+    return style
+  })
+
+  // 搜索按钮的类
+  const searchButtonClass = computed<string>(() => {
+    const cls: string[] = [ns.e('search-button')]
+
+    if (searchButtonBgColorClass.value) cls.push(searchButtonBgColorClass.value)
+    if (searchButtonTextColorClass.value)
+      cls.push(searchButtonTextColorClass.value)
+
+    return cls.join(' ')
+  })
+  // 搜索按钮的样式
+  const searchButtonStyle = computed<CSSProperties>(() => {
+    const style: CSSProperties = {}
+
+    if (!searchButtonBgColorClass.value)
+      style.backgroundColor =
+        searchButtonBgColorStyle.value || 'var(--tn-color-primary)'
+
+    if (searchButtonTextColorStyle.value) {
+      style.color = searchButtonTextColorStyle.value
+    } else if (
+      !searchButtonBgColorClass.value &&
+      !searchButtonTextColorClass.value
+    ) {
+      style.color = 'var(--tn-color-white)'
+    }
+
+    return style
+  })
+
+  return {
+    ns,
+    searchBoxClass,
+    searchBoxStyle,
+    placeholderClass,
+    placeholderStyle,
+    searchButtonClass,
+    searchButtonStyle,
+  }
+}

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

@@ -0,0 +1,96 @@
+import { nextTick, ref, watch } from 'vue'
+import { debounce, throttle } from '../../../../libs/lodash'
+import { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '../../../../constants'
+
+import type { SetupContext } from 'vue'
+import type { SearchBoxEmits, SearchBoxProps } from '../search-box'
+
+export const useSearchBox = (
+  props: SearchBoxProps,
+  emits: SetupContext<SearchBoxEmits>['emit']
+) => {
+  // 是否显示placeholder
+  const showPlaceholder = ref<boolean>(!props.modelValue)
+
+  // 输入框的值
+  const inputValue = ref<string>(props.modelValue)
+  watch(
+    () => props.modelValue,
+    (val) => {
+      if (props.modelValue === inputValue.value) return
+      inputValue.value = val
+      showPlaceholder.value = !val
+    }
+  )
+  // 输入框聚焦
+  const inputFocus = ref<boolean>(false)
+  if (props.focus) {
+    showPlaceholder.value = false
+    nextTick(() => {
+      inputFocus.value = true
+    })
+  }
+
+  // searchBox点击事件
+  const searchBoxClickEvent = () => {
+    emits('click')
+    if (props.disabled) return
+    showPlaceholder.value = false
+    inputFocus.value = true
+  }
+
+  // 输入框获取焦点事件
+  const inputFocusEvent = () => {
+    emits('focus')
+  }
+
+  // 输入框失去焦点事件
+  const inputBlurEvent = () => {
+    showPlaceholder.value = !inputValue.value
+    inputFocus.value = false
+    emits('blur')
+  }
+
+  // 输入框输入事件
+  const inputHandle = () => {
+    emits(UPDATE_MODEL_EVENT, inputValue.value)
+
+    nextTick(() => {
+      emits(CHANGE_EVENT, inputValue.value)
+      emits('input', inputValue.value)
+    })
+  }
+  const inputValueEvent = props.throllte
+    ? throttle(inputHandle, props.throllteTime)
+    : inputHandle
+
+  // 清除按钮点击事件
+  const clearClickEvent = () => {
+    inputValue.value = ''
+    emits(UPDATE_MODEL_EVENT, '')
+
+    nextTick(() => {
+      inputFocus.value = true
+      emits(CHANGE_EVENT, '')
+      emits('clear')
+    })
+  }
+
+  // 点击search按钮事件
+  const searchBtnClickEvent = debounce(() => {
+    if (props.disabled) return
+    emits('search', inputValue.value)
+  }, 250)
+
+  return {
+    showPlaceholder,
+    inputValue,
+    inputFocus,
+    searchBoxClickEvent,
+    inputFocusEvent,
+    inputBlurEvent,
+    inputValueEvent,
+    clearClickEvent,
+    searchBtnClickEvent,
+  }
+}