oxy-uni-ui 1.0.1

package/components/oxy-tag/oxy-tag.vue

@@ -0,0 +1,148 @@
+<template>
+  <view :class="rootClass" :style="rootStyle" @click="handleClick">
+    <view v-if="useIconSlot" class="oxy-tag__icon">
+      <slot name="icon" />
+    </view>
+    <oxy-icon v-else-if="icon" :name="icon" custom-class="oxy-tag__icon" />
+    <view class="oxy-tag__text" :style="textStyle">
+      <slot />
+    </view>
+    <view class="oxy-tag__close" v-if="closable && round" @click.stop="handleClose">
+      <oxy-icon name="error-fill" />
+    </view>
+    <input
+      v-if="dynamicInput && dynamic"
+      class="oxy-tag__add-text"
+      :placeholder="translate('placeholder')"
+      type="text"
+      :focus="true"
+      v-model="dynamicValue"
+      @blur="handleBlur"
+      @confirm="handleConfirm"
+    />
+    <view v-else-if="dynamic" class="oxy-tag__text" :style="textStyle" @click.stop="handleAdd">
+      <slot name="add" v-if="$slots.add"></slot>
+      <template v-else>
+        <oxy-icon name="add" custom-class="oxy-tag__add oxy-tag__icon" />
+        <text>{{ translate('add') }}</text>
+      </template>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-tag',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { objToStyle } from '../common/util'
+import { computed, ref, watch } from 'vue'
+import { useTranslate } from '../composables/useTranslate'
+import { tagProps } from './types'
+
+const props = defineProps(tagProps)
+const emit = defineEmits(['click', 'close', 'confirm'])
+
+const { translate } = useTranslate('tag')
+
+const tagClass = ref<string>('')
+const dynamicValue = ref<string>('')
+const dynamicInput = ref<boolean>(false)
+
+watch(
+  [() => props.useIconSlot, () => props.icon, () => props.plain, () => props.dynamic, () => props.round, () => props.mark],
+  () => {
+    computeTagClass()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.type,
+  (newValue) => {
+    if (!newValue) return
+    // type: 'primary', 'danger', 'warning', 'success'
+    const type = ['primary', 'danger', 'warning', 'success', 'default']
+    if (type.indexOf(newValue) === -1) console.error(`type must be one of ${type.toString()}`)
+    computeTagClass()
+  },
+  { immediate: true }
+)
+
+watch(
+  () => dynamicInput.value,
+  () => {
+    computeTagClass()
+  },
+  { immediate: true }
+)
+
+const rootClass = computed(() => {
+  return `oxy-tag ${props.customClass} ${tagClass.value}`
+})
+
+const rootStyle = computed(() => {
+  const rootStyle: Record<string, any> = {}
+  if (!props.plain && props.bgColor) {
+    rootStyle['background'] = props.bgColor
+  }
+  if (props.bgColor) {
+    rootStyle['border-color'] = props.bgColor
+  }
+  return `${objToStyle(rootStyle)}${props.customStyle}`
+})
+
+const textStyle = computed(() => {
+  const textStyle: Record<string, any> = {}
+  if (props.color) {
+    textStyle['color'] = props.color
+  }
+  return objToStyle(textStyle)
+})
+
+function computeTagClass() {
+  const { type, plain, round, mark, dynamic, icon, useIconSlot } = props
+  let tagClassList: string[] = []
+  type && tagClassList.push(`is-${type}`)
+  plain && tagClassList.push('is-plain')
+  round && tagClassList.push('is-round')
+  mark && tagClassList.push('is-mark')
+  dynamic && tagClassList.push('is-dynamic')
+  dynamicInput.value && tagClassList.push('is-dynamic-input')
+  if (icon || useIconSlot) tagClassList.push('is-icon')
+  tagClass.value = tagClassList.join(' ')
+}
+
+function handleClick(event: any) {
+  emit('click', event)
+}
+function handleClose(event: any) {
+  emit('close', event)
+}
+function handleAdd() {
+  dynamicInput.value = true
+  dynamicValue.value = ''
+}
+function handleBlur() {
+  setDynamicInput()
+}
+function handleConfirm(event: any) {
+  setDynamicInput()
+  emit('confirm', {
+    value: event.detail.value
+  })
+}
+function setDynamicInput() {
+  dynamicInput.value = false
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-tag/types.ts

@@ -0,0 +1,81 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger'
+
+export const tagProps = {
+  ...baseProps,
+
+  /**
+   * 是否开启图标插槽
+   * 类型：boolean
+   * 默认值：false
+   */
+  useIconSlot: makeBooleanProp(false),
+
+  /**
+   * 标签类型
+   * 类型：string
+   * 可选值：'default' / 'primary' / 'danger' / 'warning' / 'success'
+   * 默认值：'default'
+   */
+  type: makeStringProp<TagType>('default'),
+
+  /**
+   * 左侧图标
+   * 类型：string
+   * 默认值：空字符串
+   */
+  icon: makeStringProp(''),
+
+  /**
+   * 是否可关闭（只对圆角类型支持）
+   * 类型：boolean
+   * 默认值：false
+   */
+  closable: makeBooleanProp(false),
+
+  /**
+   * 幽灵类型
+   * 类型：boolean
+   * 默认值：false
+   */
+  plain: makeBooleanProp(false),
+
+  /**
+   * 是否为新增标签
+   * 类型：boolean
+   * 默认值：false
+   */
+  dynamic: makeBooleanProp(false),
+
+  /**
+   * 文字颜色
+   * 类型：string
+   * 默认值：空字符串
+   */
+  color: makeStringProp(''),
+
+  /**
+   * 背景色和边框色
+   * 类型：string
+   * 默认值：空字符串
+   */
+  bgColor: makeStringProp(''),
+
+  /**
+   * 圆角类型
+   * 类型：boolean
+   * 默认值：false
+   */
+  round: makeBooleanProp(false),
+
+  /**
+   * 标记类型
+   * 类型：boolean
+   * 默认值：false
+   */
+  mark: makeBooleanProp(false)
+}
+
+export type TagProps = ExtractPropTypes<typeof tagProps>

package/components/oxy-text/index.scss

@@ -0,0 +1,37 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+
+
+@include b(text) {
+
+  @include when(bold) {
+    font-weight: bold;
+  }
+
+  @for $i from 1 through 5 {
+    &.is-lines-#{$i} {
+      @include multiEllipsis($i);
+    }
+  }
+
+  @include when(default) {
+    color: $-text-info-color;
+  }
+
+  @include when(primary) {
+    color: $-text-primary-color;
+  }
+
+  @include when(error) {
+    color: $-text-error-color;
+  }
+
+  @include when(warning) {
+    color: $-text-warning-color;
+  }
+
+  @include when(success) {
+    color: $-text-success-color;
+  }
+}

package/components/oxy-text/oxy-text.vue

@@ -0,0 +1,139 @@
+<template>
+  <text @click="handleClick" :class="rootClass" :style="rootStyle">
+    <slot v-if="$slots.prefix || prefix" name="prefix">{{ prefix }}</slot>
+    <text>{{ formattedText }}</text>
+    <slot v-if="$slots.suffix || suffix" name="suffix">{{ suffix }}</slot>
+  </text>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-text',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { isDef, objToStyle } from '../common/util'
+import { textProps } from './types'
+import dayjs from '../../dayjs'
+
+// 获取组件的 props 和 emit 函数
+const props = defineProps(textProps)
+const emit = defineEmits(['click'])
+
+// 存储文本类名的响应式变量
+const textClass = ref<string>('')
+
+// 监听 props 变化，合并 watch 逻辑
+watch(
+  () => ({
+    type: props.type,
+    text: props.text,
+    mode: props.mode,
+    color: props.color,
+    bold: props.bold,
+    lines: props.lines,
+    format: props.format
+  }),
+  ({ type }) => {
+    // 验证 type 属性
+    const types = ['primary', 'error', 'warning', 'success', 'default']
+    if (type && !types.includes(type)) {
+      console.error(`type must be one of ${types.toString()}`)
+    }
+    computeTextClass()
+  },
+  { deep: true, immediate: true }
+)
+
+// 计算根元素的类名
+const rootClass = computed(() => {
+  return `oxy-text ${props.customClass} ${textClass.value}`
+})
+
+// 计算根元素的样式
+const rootStyle = computed(() => {
+  const rootStyle: Record<string, any> = {}
+  if (props.color) {
+    rootStyle['color'] = props.color
+  }
+  if (props.size) {
+    rootStyle['font-size'] = `${props.size}`
+  }
+  if (props.lineHeight) {
+    rootStyle['line-height'] = `${props.lineHeight}`
+  }
+  if (props.decoration) {
+    rootStyle['text-decoration'] = `${props.decoration}`
+  }
+  return `${objToStyle(rootStyle)}${props.customStyle}`
+})
+
+// 计算文本类名的函数
+function computeTextClass() {
+  const { type, color, bold, lines } = props
+  const textClassList: string[] = []
+  if (!color) {
+    textClassList.push(`is-${type}`)
+  }
+  if (isDef(lines)) {
+    textClassList.push(`is-lines-${lines}`)
+  }
+  bold && textClassList.push('is-bold')
+  textClass.value = textClassList.join(' ')
+}
+
+// 格式化文本的函数
+function formatText(text: string, format: boolean, mode: string): string {
+  if (format) {
+    if (mode === 'phone') {
+      return text.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
+    } else if (mode === 'name') {
+      return text.replace(/^(.).*(.)$/, '$1**$2')
+    } else {
+      throw new Error('mode must be one of phone or name for encryption')
+    }
+  }
+  return text
+}
+
+// 格式化数字的函数
+function formatNumber(num: number | string): string {
+  num = Number(num).toFixed(2)
+  const x = num.split('.')
+  let x1 = x[0]
+  const x2 = x.length > 1 ? '.' + x[1] : ''
+  const rgx = /(\d+)(\d{3})/
+  while (rgx.test(x1)) {
+    x1 = x1.replace(rgx, '$1,$2')
+  }
+  return x1 + x2
+}
+
+// 计算格式化后的文本
+const formattedText = computed(() => {
+  const { text, mode, format } = props
+  if (mode === 'date') {
+    return dayjs(Number(text)).format('YYYY-MM-DD')
+  }
+  if (mode === 'price') {
+    return formatNumber(text)
+  }
+  return formatText(`${text}`, format, mode)
+})
+
+// 处理点击事件
+function handleClick(event: Event) {
+  emit('click', event)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-text/types.ts

@@ -0,0 +1,98 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export type TextType = 'default' | 'primary' | 'success' | 'warning' | 'error'
+
+export const textProps = {
+  ...baseProps,
+  /**
+   * 主题类型
+   * 类型：string
+   * 可选值：'default' /'primary' / 'error' / 'warning' / 'success'
+   * 默认值：'default'
+   */
+  type: makeStringProp<TextType>('default'),
+  /**
+   * 文字
+   * 类型：string | number
+   * 默认值：'空字符串'
+   */
+  text: makeNumericProp(''),
+  /**
+   * 字体大小
+   * 类型：string
+   * 默认值：'空字符串'
+   */
+  size: makeStringProp(''),
+  /**
+   * 文本处理的匹配模式
+   * 可选值：'text-普通文本' / 'date - 日期' / 'phone - 手机号' / 'name - 姓名' / 'price - 金额'
+   * 类型：string
+   * 默认值：'text'
+   */
+  mode: makeStringProp('text'),
+  /**
+   * 文字装饰，下划线，中划线等
+   * 可选值：'underline/line-through/overline'
+   * 类型：string
+   * 默认值：'none'
+   */
+  decoration: makeStringProp('none'),
+
+  /**
+   * mode=phone时，点击文本是否拨打电话
+   * 类型：boolean
+   * 默认值：false
+   */
+  call: makeBooleanProp(false),
+  /**
+   * 是否粗体，默认normal
+   * 类型：boolean
+   * 默认值：false
+   */
+  bold: makeBooleanProp(false),
+  /**
+   * 是否脱敏,当mode为phone和name时生效
+   * 类型：boolean
+   * 默认值：false
+   */
+  format: makeBooleanProp(false),
+  /**
+   * 文本颜色
+   * 类型：string
+   * 默认值：''
+   */
+  color: makeStringProp(''),
+  /**
+   * 前置插槽
+   * 类型：string
+   * 默认值：''
+   */
+  prefix: String,
+  /**
+   * 后置插槽
+   * 类型：string
+   * 默认值：''
+   */
+  suffix: String,
+  /**
+   * 文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为5。
+   */
+  lines: Number,
+  /**
+   * 文本行高
+   * 类型：string
+   * 默认值：''
+   */
+  lineHeight: makeStringProp(''),
+  /**
+   * 自定义根节点样式
+   */
+  customStyle: makeStringProp(''),
+  /**
+   * 自定义根节点样式类
+   */
+  customClass: makeStringProp('')
+}
+
+export type TextProps = ExtractPropTypes<typeof textProps>