oxy-uni-ui 1.2.3 → 2.1.0

package/components/oxy-tag/index.scss

@@ -1,30 +1,53 @@
 @import '../common/abstracts/variable';
 @import '../common/abstracts/mixin';
 
-@mixin tag-type-style ($normalColor, $normalBg) {
+.oxy-theme-dark {
+  @include b(tag) {
+    @include when(default) {
+      background: $-dark-background4;
+      color: $-dark-color3;
+
+      @include when(plain) {
+        background: transparent;
+        border-color: $-dark-background7;
+      }
+
+      @include when(round) {
+        color: $-dark-color3;
+        border-color: $-dark-background7;
+      }
+    }
+
+    @include when(dynamic-input) {
+      border-color: $-dark-background7;
+    }
+  }
+}
+
+@mixin tag-type-style($normalColor, $normalBg) {
   background: $normalBg;
 
   @include when(plain) {
     background: transparent;
     color: $normalColor;
-    border: 1px solid $normalColor;
-    padding: 0 4px;
+    border-color: $normalColor;
+    padding: 12rpx 20rpx;
   }
+
   @include when(round) {
-    line-height: 1.2;
-    font-size: $-tag-fs;
-    padding: 4px 11px;
+    padding: 12rpx 24rpx;
     background: transparent;
     color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color);
-    border: 1px solid if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
+    border-color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
     border-radius: $-tag-round-radius;
   }
+
   @include when(mark) {
-    padding: 1px 6px;
+    padding: 12rpx 20rpx;
     border-radius: $-tag-mark-radius;
 
     @include when(plain) {
-      padding: 0 6px;
+      padding: 8rpx 20rpx;
     }
   }
   @include when(active) {
@@ -32,15 +55,24 @@
     border-color: $-tag-primary-color;
   }
 }
+
 @include b(tag) {
-  font-size: $-tag-small-fs;
-  display: inline-block;
+  position: relative;
+  font-size: $-tag-fs;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  box-sizing: border-box;
   color: $-tag-color;
-  padding: 0 3px;
-  border-radius: 2px;
-  transition: opacity .3s;
+  padding: 12rpx 20rpx;
+  min-height: 64rpx;
+  border: 1px solid transparent;
+  border-radius: $-tag-radius;
+  transition: opacity .2s, color .2s, border-color .2s, background-color .2s;
   vertical-align: middle;
-  line-height: initial;
+  line-height: 1.4;
+  white-space: nowrap;
 
   @include when(default) {
     @include tag-type-style($-tag-info-color, $-tag-info-bg);
@@ -58,58 +90,101 @@
     @include tag-type-style($-tag-success-color, $-tag-success-bg);
   }
   @include when(icon) {
-    font-size: $-tag-fs;
-    line-height: 1.2;
-    padding: 2px 5px;
+    padding: 12rpx 20rpx;
   }
+
   @include when(dynamic) {
     box-sizing: border-box;
-    width: 88px;
-    transition: .3s;
+    width: auto;
+    min-width: 176rpx;
+    justify-content: center;
+    transition: color .3s, border-color .3s, background-color .3s;
+
+    .oxy-tag__text {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: inherit;
+
+      :deep(text) {
+        display: inline-block;
+        line-height: inherit;
+      }
+    }
 
     &:active {
       color: $-tag-primary-color;
       border-color: $-tag-primary-color;
     }
   }
+
   @include when(dynamic-input) {
     border-color: $-tag-primary-color;
+    justify-content: flex-start;
   }
+
   @include edeep(icon) {
-    display: inline-block;
-    margin-right: 4px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12rpx;
     font-size: $-tag-fs;
-    line-height: 1.2;
-    vertical-align: baseline;
+    line-height: 1;
+    vertical-align: middle;
   }
+
   @include e(text) {
     display: inline-block;
-    vertical-align: text-top;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    vertical-align: middle;
   }
+
   @include e(add-text) {
-    width: 60px;
-    height: 14px;
-    min-height: 14px;
+    width: 100%;
+    min-width: 0;
+    height: 56rpx;
+    min-height: 56rpx;
     display: inline-block;
     font-size: $-tag-fs;
+    line-height: 56rpx;
     vertical-align: middle;
+    color: inherit;
     padding: 0;
+    border: none;
+    background: transparent;
+    text-align: left;
+
+    &::placeholder {
+      color: $-font-gray-3;
+    }
   }
+
   @include e(close) {
-    display: inline-block;
-    margin-left: 24px;
-    margin-right: -4px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 16rpx;
+    margin-right: 0;
     font-size: $-tag-close-size;
-    height: 14px;
-    line-height: 1.1;
-    vertical-align: text-bottom;
+    width: $-tag-close-size;
+    height: $-tag-close-size;
+    line-height: 1;
+    vertical-align: middle;
     color: $-tag-close-color;
+    opacity: 0.7;
+    transition: opacity .2s, color .2s;
 
     &:active {
+      opacity: 1;
       color: $-tag-close-active-color;
     }
   }
+
   @include edeep(add) {
-    vertical-align: bottom;
+    vertical-align: middle;
+    line-height: 1;
   }
-}
+}

package/components/oxy-text/index.scss

@@ -34,4 +34,8 @@
   @include when(success) {
     color: $-text-success-color;
   }
-}
+
+  @include e(btn) {
+    color: $-text-primary-color;
+  }
+}

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

@@ -1,8 +1,16 @@
 <template>
-  <text @click="handleClick" :class="rootClass" :style="rootStyle">
+  <oxy-tooltip v-if="props.tooltip && isTextOverflow" :content="formattedText">
+    <text @click="handleClick" :class="`${rootClass} is-lines-${props.lines}`" :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>
+  </oxy-tooltip>
+  <text v-else :id="textId" @click="handleClick" :class="rootClass" :style="rootStyle">
     <slot v-if="$slots.prefix || prefix" name="prefix">{{ prefix }}</slot>
-    <text>{{ formattedText }}</text>
+    <text>{{ props.toggleExpand && isTextOverflow && !expanded ? realText : formattedText }}</text>
     <slot v-if="$slots.suffix || suffix" name="suffix">{{ suffix }}</slot>
+    <text v-if="props.toggleExpand && isTextOverflow" class="oxy-text__btn" @click.stop="handleToggle">{{ expanded ? '收起' : '展开' }}</text>
   </text>
 </template>
 
@@ -18,15 +26,24 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
-import { isDef, objToStyle } from '../common/util'
+import { computed, ref, watch, nextTick, getCurrentInstance } from 'vue'
+import { isDef, objToStyle, uuid, getRect } from '../common/util'
 import { textProps } from './types'
 import dayjs from '../../dayjs'
+import OxyTooltip from '../oxy-tooltip/oxy-tooltip.vue'
 
 // 获取组件的 props 和 emit 函数
 const props = defineProps(textProps)
 const emit = defineEmits(['click'])
 
+const { proxy } = getCurrentInstance() as any
+const textId = ref<string>(`oxy-text${uuid()}`)
+const expanded = ref<boolean>(false)
+const isTextOverflow = ref<boolean>(false)
+const realText = ref<string>('')
+const offset = ref<number>(0)
+const showTooltip = ref<boolean>(false)
+
 // 存储文本类名的响应式变量
 const textClass = ref<string>('')
 
@@ -39,7 +56,9 @@ watch(
     color: props.color,
     bold: props.bold,
     lines: props.lines,
-    format: props.format
+    format: props.format,
+    toggleExpand: props.toggleExpand,
+    tooltip: props.tooltip
   }),
   ({ type }) => {
     // 验证 type 属性
@@ -77,12 +96,12 @@ const rootStyle = computed(() => {
 
 // 计算文本类名的函数
 function computeTextClass() {
-  const { type, color, bold, lines } = props
+  const { type, color, bold, lines, toggleExpand, tooltip } = props
   const textClassList: string[] = []
   if (!color) {
     textClassList.push(`is-${type}`)
   }
-  if (isDef(lines)) {
+  if (isDef(lines) && !toggleExpand && !tooltip) {
     textClassList.push(`is-lines-${lines}`)
   }
   bold && textClassList.push('is-bold')
@@ -128,6 +147,56 @@ const formattedText = computed(() => {
   return formatText(`${text}`, format, mode)
 })
 
+watch(
+  formattedText,
+  (value) => {
+    nextTick(() => {
+      if (props.toggleExpand || props.tooltip) {
+        realText.value = value
+        offset.value = realText.value.length
+        const view = uni.createSelectorQuery().in(proxy).select(`#${textId.value}`)
+        view
+          .fields({ computedStyle: ['fontSize', 'lineHeight'] }, (res: any) => {
+            getRect(`#${textId.value}`, true, proxy)
+              .then((rects: any) => {
+                if (res && Array.isArray(rects) && rects.length && props.lines) {
+                  const lines = rects[0].height / Number.parseFloat(res.lineHeight.replace('px', ''))
+                  isTextOverflow.value = lines > props.lines
+                  if (props.toggleExpand && isTextOverflow.value) {
+                    const size = Math.floor(rects[0].width / Number.parseFloat(res.fontSize.replace('px', '')))
+                    // 中英文字符长度区分
+                    const length = size * props.lines - 4
+                    let realOffset = 0
+                    let realLength = 0
+                    for (let i = 0; i < offset.value; i++) {
+                      if (realText.value.charCodeAt(i) > 127) {
+                        realLength += 1
+                      } else {
+                        realLength += 0.5
+                      }
+                      realOffset++
+                      if (realLength >= length) {
+                        offset.value = realOffset
+                        break
+                      }
+                    }
+                    realText.value = `${value.substring(0, offset.value)}...`
+                  }
+                }
+              })
+              .catch(() => {})
+          })
+          .exec()
+      }
+    })
+  },
+  { deep: true, immediate: true }
+)
+
+function handleToggle() {
+  expanded.value = !expanded.value
+}
+
 // 处理点击事件
 function handleClick(event: Event) {
   emit('click', event)

package/components/oxy-text/types.ts

@@ -79,6 +79,18 @@ export const textProps = {
    * 文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为5。
    */
   lines: Number,
+  /**
+   * 文本超出，展开收起显示全部
+   * 类型：boolean
+   * 默认值：false
+   */
+  toggleExpand: makeBooleanProp(false),
+  /**
+   * 文本超出，tooltip显示全部
+   * 类型：boolean
+   * 默认值：false
+   */
+  tooltip: makeBooleanProp(false),
   /**
    * 文本行高
    * 类型：string

package/components/oxy-textarea/index.scss

@@ -144,11 +144,11 @@
     box-sizing: border-box;
 
     @include when(show-limit) {
-      padding-bottom: 36px;
+      padding-bottom: 72rpx;
     }
 
     @include when(suffix) {
-      padding-right: calc($-textarea-icon-size + 8px);
+      padding-right: calc($-textarea-icon-size + 16rpx);
     }
   }
 
@@ -164,7 +164,7 @@
     border: none;
     box-sizing: border-box;
     word-break: break-word;
-    min-height: 24px;
+    min-height: 56rpx;
 
     &::-webkit-input-placeholder {
       color: $-input-placeholder-color;
@@ -198,12 +198,12 @@
 
   @include e(count) {
     position: absolute;
-    bottom: 8px;
+    bottom: 16rpx;
     right: 0;
     font-size: $-textarea-count-fs;
     color: $-textarea-count-color;
     background: $-textarea-bg;
-    line-height: 20px;
+    line-height: 48rpx;
     display: inline-flex;
   }
 
@@ -258,7 +258,7 @@
 
   @include when(auto-height) {
     &:not(.is-cell) {
-      padding: 5px 0;
+      padding: 16rpx 0;
     }
 
     &::after {

package/components/oxy-toast/oxy-toast.vue

@@ -31,8 +31,10 @@
         :class-prefix="classPrefix"
         :name="iconClass"
       ></oxy-icon>
-      <!--文本-->
-      <view v-if="msg" class="oxy-toast__msg">{{ msg }}</view>
+      <!--文本/插槽内容-->
+      <view v-if="hasContent" class="oxy-toast__msg">
+        <slot>{{ msg }}</slot>
+      </view>
     </view>
   </oxy-transition>
 </template>
@@ -54,13 +56,14 @@ import OxyLoading from '../oxy-loading/oxy-loading.vue'
 import OxyOverlay from '../oxy-overlay/oxy-overlay.vue'
 import OxyTransition from '../oxy-transition/oxy-transition.vue'
 
-import { computed, inject, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
+import { computed, inject, onBeforeMount, ref, useSlots, watch, type CSSProperties } from 'vue'
 import base64 from '../common/base64'
 import { defaultOptions, getToastOptionKey, toastIcon } from '.'
 import { toastProps, type ToastDirection, type ToastLoadingType, type ToastOptions, type ToastProps } from './types'
-import { addUnit, isDef, isFunction, objToStyle } from '../common/util'
+import { withDefaultUnit, isDef, isFunction, objToStyle } from '../common/util'
 
 const props = defineProps(toastProps)
+const slots = useSlots()
 const iconName = ref<string>('') // 图标类型
 const msg = ref<string>('') // 消息内容
 const position = ref<string>('middle')
@@ -124,10 +127,19 @@ const transitionStyle = computed(() => {
   return objToStyle(style)
 })
 
+const hasCustomContent = computed(() => {
+  const slotNodes = slots.default?.()
+  return !!slotNodes?.length
+})
+
+const hasContent = computed(() => {
+  return !!msg.value || hasCustomContent.value
+})
+
 const rootClass = computed(() => {
   return `oxy-toast ${props.customClass} oxy-toast--${position.value} ${
-    (iconName.value !== 'loading' || msg.value) && (iconName.value || iconClass.value) ? 'oxy-toast--with-icon' : ''
-  } ${iconName.value === 'loading' && !msg.value ? 'oxy-toast--loading' : ''} ${direction.value === 'vertical' ? 'is-vertical' : ''}`
+    (iconName.value !== 'loading' || hasContent.value) && (iconName.value || iconClass.value) ? 'oxy-toast--with-icon' : ''
+  } ${iconName.value === 'loading' && !hasContent.value ? 'oxy-toast--loading' : ''} ${direction.value === 'vertical' ? 'is-vertical' : ''}`
 })
 
 const svgStyle = computed(() => {
@@ -184,8 +196,12 @@ function mergeOptionsWithProps(option: ToastOptions, props: ToastProps) {
   zIndex.value = isDef(option.zIndex!) ? option.zIndex! : props.zIndex
   loadingType.value = isDef(option.loadingType!) ? option.loadingType! : props.loadingType
   loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : props.loadingColor
-  iconSize.value = isDef(option.iconSize) ? addUnit(option.iconSize) : isDef(props.iconSize) ? addUnit(props.iconSize) : undefined
-  loadingSize.value = isDef(option.loadingSize) ? addUnit(option.loadingSize) : isDef(props.loadingSize) ? addUnit(props.loadingSize) : undefined
+  iconSize.value = isDef(option.iconSize) ? withDefaultUnit(option.iconSize) : isDef(props.iconSize) ? withDefaultUnit(props.iconSize) : undefined
+  loadingSize.value = isDef(option.loadingSize)
+    ? withDefaultUnit(option.loadingSize)
+    : isDef(props.loadingSize)
+    ? withDefaultUnit(props.loadingSize)
+    : undefined
   cover.value = isDef(option.cover!) ? option.cover! : props.cover
   classPrefix.value = isDef(option.classPrefix) ? option.classPrefix : props.classPrefix
   direction.value = isDef(option.direction) ? option.direction : props.direction

package/components/oxy-tooltip/index.scss

@@ -22,15 +22,15 @@
 
   @include edeep(pos) {
     position: absolute;
-    min-width: 138px;
-    min-height: 36px;
+    min-width: 276rpx;
+    min-height: 72rpx;
     font-size: $-tooltip-fs;
     backdrop-filter: blur($-tooltip-blur);
     background-clip: padding-box;
     border-radius: $-tooltip-radius;
     background: $-tooltip-bg;
     color: $-tooltip-color;
-    text-align: center;
+    // text-align: center;
     box-sizing: border-box;
     z-index: $-tooltip-z-index;
   }
@@ -49,18 +49,18 @@
 
   @include e(inner) {
     padding: $-tooltip-padding;
-    white-space: nowrap;
+    // white-space: nowrap;
     line-height: $-tooltip-line-height;
   }
 
   @include edeep(close-icon) {
-    font-size: 12px;
+    font-size: calc(2 * #{$-tooltip-close-size});
     position: absolute;
-    right: -8px;
-    top: -10px;
+    right: -16rpx;
+    top: -20rpx;
     transform: scale(0.5);
-    padding: 10px;
+    padding: 20rpx;
   }
 
   @include triangleArrow($-tooltip-arrow-size, $-tooltip-bg);
-}
+}

package/components/oxy-tree/index.scss

@@ -26,15 +26,18 @@
   .oxy-tree__search{
     display: flex;
     :deep(.oxy-button){
-      min-width: 60px;
+      min-width: 120rpx;
     }
     :deep(.oxy-tree__search-input) {
       flex: 1;
       background-color: $-tree-search-input-color;
-      padding: 6px 12px;
-      border-radius: 4px;
-      margin-bottom: 8px;
-      margin-right: 12px;
+      padding: 16rpx 24rpx;
+      border-radius: $-tree-search-input-radius;
+      margin-bottom: 20rpx;
+      margin-right: 24rpx;
+      .oxy-input__icon{
+        background: transparent;
+      }
     }
   }
 
@@ -43,18 +46,20 @@
 
 .oxy-tree-node-content {
   display: flex;
-  width: fit-content;
   width: 100%;
-  white-space: nowrap;
   align-items: center;
+  box-sizing: border-box;
+  padding-right: $-tree-node-padding-right;
+  border-radius: $-tree-node-radius;
+  color: $-color-secondary;
+  font-size: $-tree-node-font-size;
+  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
 
-  &.expanded {
-    :deep(.oxy-tree-node-icon) {
-      transform: rotate(0deg);
+  &.is-leaf {
+    .oxy-tree-node-toggle {
+      pointer-events: none;
     }
-  }
 
-  &.is-leaf {
     :deep(.oxy-tree-node-icon) {
       opacity: 0;
     }
@@ -63,14 +68,31 @@
   &.is-current {
     background-color: $-tree-node-current-bg;
     color: $-tree-node-current-color;
+    font-weight: $-fw-medium;
+
+    :deep(.oxy-tree-node-icon) {
+      color: $-tree-node-icon-active-color;
+    }
+  }
+
+  &.checked {
+    :deep(.oxy-tree-node-icon) {
+      color: $-tree-node-icon-active-color;
+    }
   }
 
   &.is-disabled {
     color: $-tree-node-disabled-color;
+    opacity: $-tree-disabled-opacity;
+
+    :deep(.oxy-tree-node-icon) {
+      color: $-tree-node-disabled-color;
+    }
   }
 
   :deep(.oxy-checkbox) {
-    margin-right: 6px;
+    margin-right: $-size-side-padding-small;
+    flex-shrink: 0;
 
     .oxy-checkbox__label {
       display: none;
@@ -90,10 +112,24 @@
   }
 
   :deep(.oxy-tree-node-icon) {
-    transform: rotate(-90deg);
+    color: $-tree-node-icon-color;
+    font-size: $-tree-node-icon-size;
+    transition: none;
+  }
+
+  .oxy-tree-node-toggle {
+    width: $-tree-node-icon-box-size;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: $-tree-node-icon-gap;
+    flex-shrink: 0;
   }
 
   .oxy-tree-node {
     flex: 1;
+    min-width: 0;
+    @include lineEllipsis;
   }
-}
+}