oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-keyboard/types.ts

@@ -33,6 +33,11 @@ export const keyboardProps = {
    * 层级
    */
   zIndex: makeNumberProp(100),
+  /**
+   * 弹层最大宽度，支持 `rpx`、`px`、`%` 等单位；
+   * `%` 在弹层打开时按屏幕宽度换算为 `rpx`
+   */
+  popupMaxWidth: makeStringProp('1200rpx'),
   /**
    * 最大长度
    */

package/components/oxy-link/index.scss

@@ -0,0 +1,57 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(link) {
+  display: inline-block;
+  @include e(medium) {
+    font-size: $-link-font-size-medium;
+  }
+
+  @include e(small) {
+    font-size: $-link-font-size-small;
+  }
+
+  @include e(large) {
+    font-size: $-link-font-size-large;
+  }
+
+  @include e(icon) {
+    display: inline-block;
+  }
+
+  @include when(underline) {
+    text-decoration: underline;
+  }
+
+  @include when(default) {
+    color: $-link-info-color;
+  }
+
+  @include when(primary) {
+    color: $-link-primary-color;
+  }
+
+  @include when(error) {
+    color: $-link-error-color;
+  }
+
+  @include when(warning) {
+    color: $-link-warning-color;
+  }
+
+  @include when(success) {
+    color: $-link-success-color;
+  }
+
+  @include when(disabled) {
+    opacity: .6;
+  }
+
+  &__prefix-icon:not(:empty) + &__content:not(:empty) {
+	    padding-left: 8rpx;
+	}
+
+	&__content:not(:empty) + &__suffix-icon:not(:empty) {
+	    padding-left: 8rpx;
+	}
+}

package/components/oxy-link/oxy-link.vue

@@ -0,0 +1,130 @@
+<template>
+  <navigator
+    :class="rootClass"
+    :style="rootStyle"
+    :url="!disabled ? navigatorProps?.['url'] || url : ''"
+    :target="navigatorProps?.['target']"
+    :open-type="navigatorProps?.['openType'] || openType"
+    :delta="navigatorProps?.['delta']"
+    :app-id="navigatorProps?.['appId']"
+    :path="navigatorProps?.['path']"
+    :extra-data="navigatorProps?.['extraData']"
+    :version="navigatorProps?.['version']"
+    :short-link="navigatorProps?.['shortLink']"
+    :hover-class="hover && !disabled ? 'oxy-link__hover' : ''"
+    :hover-stop-propagation="navigatorProps?.['hoverStopPropagation']"
+    :hover-start-time="navigatorProps?.['hoverStartTime']"
+    :hover-stay-time="navigatorProps?.['hoverStayTime']"
+    @click="handleClick"
+  >
+    <slot name="prefix-icon">
+      <view class="oxy-link__icon oxy-link__prefix-icon" v-if="prefixIcon">
+        <oxy-icon :size="fontSize" :color="color" :name="prefixIcon"></oxy-icon>
+      </view>
+    </slot>
+    <text class="oxy-link__content" ref="textRef">
+      <slot>{{ content }}</slot>
+    </text>
+    <slot name="suffix-icon">
+      <view class="oxy-link__icon oxy-link__suffix-icon" v-if="suffixIcon">
+        <oxy-icon :size="fontSize" :color="color" :name="suffixIcon"></oxy-icon>
+      </view>
+    </slot>
+  </navigator>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-link',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { objToStyle } from '../common/util'
+import { linkProps } from './types'
+
+// 获取组件的 props 和 emit 函数
+const props = defineProps(linkProps)
+const emit = defineEmits(['click', 'success', 'fail', 'complete'])
+
+// 存储超链接类名的响应式变量
+const linkClass = ref<string>('')
+const fontSize = computed<string>(() => {
+  if (!['small', 'medium', 'large'].includes(props.size)) {
+    return props.size
+  }
+  return ''
+})
+
+// 监听 props 变化，合并 watch 逻辑
+watch(
+  () => ({
+    size: props.size,
+    type: props.type,
+    disabled: props.disabled,
+    underline: props.underline
+  }),
+  ({ type }) => {
+    // 验证 type 属性
+    const types = ['primary', 'danger', 'warning', 'success', 'default']
+    if (type && !types.includes(type)) {
+      console.error(`type must be one of ${types.toString()}`)
+    }
+    computeLinkClass()
+  },
+  { deep: true, immediate: true }
+)
+
+// 计算根元素的类名
+const rootClass = computed(() => {
+  return `oxy-link ${props.customClass} ${linkClass.value}`
+})
+
+// 计算根元素的样式
+const rootStyle = computed(() => {
+  const rootStyle: Record<string, any> = {}
+  if (props.color) {
+    rootStyle['color'] = props.color
+  }
+  if (fontSize.value) {
+    rootStyle['font-size'] = fontSize.value
+  }
+  return `${objToStyle(rootStyle)}${props.customStyle}`
+})
+
+// 计算超链接类名的函数
+function computeLinkClass() {
+  const { size, type, disabled, underline } = props
+  const linkClassList: string[] = []
+  size && linkClassList.push(`oxy-link__${size}`)
+  type && linkClassList.push(`is-${type}`)
+  disabled && linkClassList.push('is-disabled')
+  underline && linkClassList.push('is-underline')
+  linkClass.value = linkClassList.join(' ')
+}
+
+function handleClick(event: Event) {
+  if (!props.url && props.href) {
+    // #ifdef APP-PLUS
+    plus.runtime.openURL(props.href)
+    // #endif
+    // #ifdef H5
+    window.open(props.href)
+    // #endif
+    // #ifdef MP
+    uni.setClipboardData({ data: props.href })
+    // #endif
+  }
+  emit('click', event)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-link/types.ts

@@ -0,0 +1,81 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type OpenType = 'navigate' | 'redirect' | 'switchTab' | 'reLaunch' | 'navigateBack' | 'exit'
+export type LinkType = 'default' | 'primary' | 'error' | 'warning' | 'success'
+export type SizeEnum = 'small' | 'medium' | 'large'
+
+export const linkProps = {
+  ...baseProps,
+  /**
+   * 应用内跳转的链接
+   */
+  url: makeStringProp(''),
+  /**
+   * 应用外跳转的链接
+   */
+  href: makeStringProp(''),
+  /**
+   * 跳转方式
+   */
+  openType: makeStringProp<OpenType>('navigate'),
+  /**
+   * 链接内容
+   * 类型：string
+   */
+  content: makeStringProp(''),
+  /**
+   * 是否禁用
+   * 类型：boolean
+   * 默认值：false
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否开启点击反馈
+   * 类型：boolean
+   * 默认值：false
+   */
+  hover: makeBooleanProp(false),
+  /**
+   * 是否显示链接下划线
+   * 类型：boolean
+   * 默认值：false
+   */
+  underline: makeBooleanProp(false),
+  /**
+   * 主题类型
+   * 类型：string
+   * 可选值：'default' /'primary' / 'error' / 'warning' / 'success'
+   * 默认值：'default'
+   */
+  type: makeStringProp<LinkType>('default'),
+  /**
+   * 字体大小
+   * 类型：string
+   * 默认值：'空字符串'
+   */
+  size: makeStringProp<SizeEnum>('medium'),
+  /**
+   * 文本颜色
+   * 类型：string
+   * 默认值：''
+   */
+  color: makeStringProp(''),
+  /**
+   * 前置图标
+   */
+  prefixIcon: makeStringProp(''),
+  /**
+   * 后置图标
+   */
+  suffixIcon: makeStringProp(''),
+  /**
+   * 与 navigator 原生组件属性保持一致，具体使用参考：[微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)。使用时请将形如 `open-type` 风格的属性名改为 `openType` 风格
+   */
+  navigatorProps: {
+    type: Object,
+    default: null
+  }
+}
+
+export type LinkProps = ExtractPropTypes<typeof linkProps>

package/components/oxy-list/index.scss

@@ -2,4 +2,10 @@
 @import './../common/abstracts/variable.scss';
 @import './../oxy-virtual-scroll/index.scss';
 
-@include b(list) {}
+@include b(list) {
+  :deep(.oxy-loadmore) {
+    .oxy-divider {
+      margin: 0
+    }
+  }
+}

package/components/oxy-list/oxy-list.vue

@@ -28,8 +28,8 @@
       @refresherrestore="onRestore"
       @refresherabort="onAbort"
     >
-      <view class="oxy-virtual-scroll__container" :style="{ height: totalHeight + 'px' }">
-        <view class="oxy-virtual-scroll__items" :style="{ transform: `translateY(${virtualOffsetY}px)` }">
+      <view class="oxy-virtual-scroll__container" :style="{ height: unitConvert(totalHeight, 0, { output: 'px' }) }">
+        <view class="oxy-virtual-scroll__items" :style="{ transform: `translateY(${unitConvert(virtualOffsetY, 0, { output: 'px' })})` }">
           <view v-for="(item, index) in virtualData" :key="index">
             <slot name="item" :item="item" :index="startIndex + index"></slot>
           </view>
@@ -54,7 +54,7 @@
 
     <!-- 回到顶部按钮 -->
     <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
-      <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
+      <oxy-icon name="backtop" color="#fff" size="40rpx"></oxy-icon>
     </view>
   </view>
 </template>
@@ -80,6 +80,7 @@ import type {
   ScrollViewOnScrollEvent
 } from '@uni-helper/uni-app-types/index'
 import { useVirtualScroll } from '../composables/useVirtualScroll'
+import { unitConvert } from '../common/util'
 
 const props = defineProps(listProps)
 

package/components/oxy-list/types.ts

@@ -7,7 +7,7 @@ import { virtualScrollProps } from '../oxy-virtual-scroll/types'
 export const listProps = {
   ...virtualScrollProps,
 
-  loadmoreState: String as PropType<LoadMoreState>,
+  loadmoreState: String as PropType<LoadMoreState | ''>,
 
   /**
    * 加载提示文案

package/components/oxy-loading/oxy-loading.vue

@@ -19,7 +19,7 @@ export default {
 <script lang="ts" setup>
 import { computed, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
 import base64 from '../common/base64'
-import { gradient, context, objToStyle, addUnit, isDef } from '../common/util'
+import { withDefaultUnit, gradient, context, objToStyle, isDef } from '../common/util'
 import { loadingProps } from './types'
 
 const svgDefineId = context.id++
@@ -44,7 +44,11 @@ const iconSize = ref<string | number | null>(null)
 watch(
   () => props.size,
   (newVal) => {
-    iconSize.value = addUnit(newVal)
+    if (!isDef(newVal) || newVal === '') {
+      iconSize.value = null
+      return
+    }
+    iconSize.value = withDefaultUnit(newVal)
   },
   {
     deep: true,
@@ -66,8 +70,8 @@ watch(
 const rootStyle = computed(() => {
   const style: CSSProperties = {}
   if (isDef(iconSize.value)) {
-    style.height = addUnit(iconSize.value)
-    style.width = addUnit(iconSize.value)
+    style.height = iconSize.value
+    style.width = iconSize.value
   }
   return `${objToStyle(style)} ${props.customStyle}`
 })

package/components/oxy-loading/types.ts

@@ -14,7 +14,7 @@ export const loadingProps = {
    */
   color: makeStringProp('#4D80F0'),
   /**
-   * 设置加载指示器大小
+   * 设置加载指示器大小，number 类型按 `rpx` 语义处理
    */
   size: makeNumericProp('')
 }

package/components/oxy-loadmore/index.scss

@@ -15,7 +15,7 @@
 
   @include edeep(loading) {
     display: inline-block;
-    margin-right: 8px;
+    margin-right: 16rpx;
     vertical-align:  middle;
     width: $-loadmore-loading-size;
     height: $-loadmore-loading-size;
@@ -26,7 +26,7 @@
     vertical-align: middle;
 
     @include when(light) {
-      margin: 0 6px;
+      margin: 0 12rpx;
       color: $-loadmore-error-color;
     }
   }
@@ -36,4 +36,4 @@
     vertical-align: middle;
     font-size: $-loadmore-refresh-fs;
   }
-}
+}

package/components/oxy-long-press-menu/index.scss

@@ -0,0 +1,93 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+@include b(long-press-menu) {
+  position: relative;
+  display: inline-block; /* 让容器适应内容宽度 */
+  user-select: none;
+  -webkit-user-select: none;
+
+  @include e(trigger) {
+    position: relative;
+    transition: background-color 0.2s;
+    border-radius: $-long-press-menu-radius;
+    /* 默认为 inline-block，减少空白占据 */
+    display: inline-block;
+    width: 100%;
+
+    @include when(active) {
+      background-color: rgba(0, 0, 0, 0.05); /* 长按时的高亮背景 */
+    }
+  }
+
+  @include e(mask) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 998;
+    background-color: transparent; /* 透明遮罩，点击关闭 */
+  }
+
+  @include e(popover) {
+    position: fixed;
+    z-index: $-long-press-menu-z-index;
+    background-color: $-long-press-menu-bg;
+    border-radius: $-long-press-menu-radius;
+    padding: $-long-press-menu-padding;
+    min-width: 200rpx;
+  }
+
+  @include e(content) {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+  }
+
+  @include e(item) {
+    padding: $-long-press-menu-item-padding;
+    position: relative;
+    &:not(:last-child)::after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 24rpx;
+      bottom: 24rpx;
+      width: 1px;
+      background-color: rgba(255, 255, 255, 0.2);
+    }
+  }
+
+  @include e(text) {
+    color: $-long-press-menu-color;
+    font-size: $-long-press-menu-fs;
+    white-space: nowrap;
+  }
+
+  @include e(arrow) {
+    left: 24rpx;
+  }
+  @include triangleArrow($-long-press-menu-arrow-size, $-long-press-menu-bg);
+
+  @include when(selectable) {
+    /* 移除 user-select，改为控制 trigger */
+    .oxy-long-press-menu__trigger {
+      user-select: text;
+      -webkit-user-select: text;
+      -webkit-touch-callout: none; /* 禁用系统默认长按菜单 */
+      cursor: text;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+}