oxy-uni-ui 2.1.1 → 2.1.3

package/components/oxy-grid-item/oxy-grid-item.vue

@@ -24,7 +24,9 @@
 export default {
   name: 'oxy-grid-item',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -53,8 +55,8 @@ const border = ref<boolean>(true)
 const { parent: grid } = useParent(GRID_KEY)
 
 const childCount = computed(() => {
-  if (isDef(grid) && isDef(grid.children)) {
-    return grid.children.length
+  if (isDef(grid.value) && isDef(grid.value.children)) {
+    return grid.value.children.length
   } else {
     return 0
   }
@@ -79,13 +81,13 @@ const customBadgeProps = computed(() => {
 watch(
   () => childCount.value,
   () => {
-    if (!grid) return
-    const width = grid.props.column ? 100 / grid.props.column + '%' : 100 / (childCount.value || 1) + '%'
-    const gutterSize = grid.props.gutter ? withDefaultUnit(grid.props.gutter) : ''
+    if (!grid.value) return
+    const width = grid.value.props.column ? 100 / grid.value.props.column + '%' : 100 / (childCount.value || 1) + '%'
+    const gutterSize = grid.value.props.gutter ? withDefaultUnit(grid.value.props.gutter) : ''
     // 单独定义间隔
     const gutterStyle = gutterSize ? `padding:${gutterSize} ${gutterSize} 0 0; background-color: transparent;` : ''
     // 单独定义正方形
-    const squareStyle = grid.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
+    const squareStyle = grid.value.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
     style.value = `width: ${width}; ${squareStyle || gutterStyle}`
   },
   {
@@ -99,28 +101,28 @@ onMounted(() => {
 })
 
 function init() {
-  if (!grid) return
-  const children = grid.children
-  const width = grid.props.column ? 100 / grid.props.column + '%' : 100 / children.length + '%'
-  const gutterSize = grid.props.gutter ? withDefaultUnit(grid.props.gutter) : ''
+  if (!grid.value) return
+  const children = grid.value.children
+  const width = grid.value.props.column ? 100 / grid.value.props.column + '%' : 100 / children.length + '%'
+  const gutterSize = grid.value.props.gutter ? withDefaultUnit(grid.value.props.gutter) : ''
   // 单独定义间隔
   const gutterStyle = gutterSize ? `padding:${gutterSize} ${gutterSize} 0 0; background-color: transparent;` : ''
   // 单独定义正方形
-  const squareStyle = grid.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
+  const squareStyle = grid.value.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
   // 间隔+正方形
   gutterContentStyle.value =
-    gutterSize && grid.props.square
-      ? `right: ${gutterSize}; bottom:${gutterSize};height: auto; background-color: ${grid.props.bgColor}`
-      : `background-color: ${grid.props.bgColor}`
+    gutterSize && grid.value.props.square
+      ? `right: ${gutterSize}; bottom:${gutterSize};height: auto; background-color: ${grid.value.props.bgColor}`
+      : `background-color: ${grid.value.props.bgColor}`
 
-  border.value = Boolean(grid.props.border)
-  square.value = Boolean(grid.props.square)
-  gutter.value = Number(grid.props.gutter)
+  border.value = Boolean(grid.value.props.border)
+  square.value = Boolean(grid.value.props.square)
+  gutter.value = Number(grid.value.props.gutter)
   style.value = `width: ${width}; ${squareStyle || gutterStyle}`
 }
 
 function click() {
-  if (grid && !grid.props.clickable) return
+  if (grid.value && !grid.value.props.clickable) return
   const { url, linkType } = props
   emit('itemclick')
   if (url) {
@@ -160,8 +162,8 @@ function setiIemClass(classes: string) {
 }
 
 const hoverClass = computed(() => {
-  if (grid?.props.clickable) {
-    return grid.props.hoverClass ? grid.props.hoverClass : 'oxy-grid-item__content--hover'
+  if (grid.value?.props.clickable) {
+    return grid.value.props.hoverClass ? grid.value.props.hoverClass : 'oxy-grid-item__content--hover'
   }
   return 'none'
 })

package/components/oxy-guidance/index.scss

@@ -2,11 +2,11 @@
 @import '../common/abstracts/mixin';
 
 @include b(guide){
-  z-index: 1001;
+  z-index: $-guide-content-z-index;
   @include e(box) {
     position: absolute;
-    z-index: 10001;
-    transition: all 0.2s;
+    z-index: $-guide-tip-z-index;
+    transition: all $-transition-duration-base;
 
     &::before {
       content: '';
@@ -18,7 +18,7 @@
       position: absolute;
       top: -8rpx;
       left: -8rpx;
-      padding: 8rpx;
+      padding: $-spacing-8;
     }
 
     @include e(arrow) {
@@ -28,7 +28,7 @@
       position: absolute;
       top: 144rpx;
       left: 45%;
-      z-index: 10000;
+      z-index: $-guide-arrow-z-index;
       transform: rotate(45deg);
     }
 
@@ -38,8 +38,8 @@
       color: $-guide-tip-color;
       position: absolute;
       top: 152rpx;
-      z-index: 10001;
-      padding: 16rpx 20rpx;
+      z-index: $-guide-tip-z-index;
+      padding: $-spacing-16 $-spacing-20;
       font-size: $-fs-content;
       border-radius: $-guide-tip-radius;
       text-align: justify;
@@ -49,7 +49,7 @@
         justify-content: space-between;
         align-items: center;
         padding-right: 0;
-        margin-top: 20rpx;
+        margin-top: $-spacing-20;
 
         @include e(next) {
           background: $-guide-tip-action-bg;
@@ -70,6 +70,6 @@
     top: 0;
     width: 100%;
     height: 100%;
-    z-index: 1000;
+    z-index: $-guide-model-z-index;
   }
 }

package/components/oxy-guidance/oxy-guidance.vue

@@ -1,10 +1,10 @@
 <template>
   <view :class="['oxy-guide', customClass]" v-if="showGuide" :style="customStyle" @touchmove.stop.prevent>
     <view class="oxy-guide__box" :style="guideStyle">
-      <view ref="tips" class="oxy-guide__box__tips" :style="tipPosition">
+      <view class="oxy-guide__box__tips" :style="tipPosition">
         <view class="text">{{ guideInfo.tips }}</view>
         <view class="oxy-guide__box__tips__tool-btn">
-          <text class="oxy-guide__box__tips__tool-btn-skip" @click="skip">跳过</text>
+          <text class="oxy-guide__box__tips__tool-btn-skip" @click="skip">{{ translate('skip') }}</text>
           <view class="oxy-guide__box__tips__tool-btn__next" @click="next">{{ guideInfo.next }}</view>
         </view>
       </view>
@@ -19,7 +19,9 @@
 export default {
   name: 'oxy-guidance',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }
@@ -27,12 +29,14 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, getCurrentInstance, nextTick, onMounted, ref } from 'vue'
 import { unitConvert } from '../common/util'
 import { guidanceProps, type guideListType } from './types'
+import { useTranslate } from '../composables/useTranslate'
 import NodeInfo = UniNamespace.NodeInfo
 
 const props = defineProps(guidanceProps)
+const { translate } = useTranslate('guidance')
 
 const stepName = ref('step') //该提示步骤的名称，用于不在重复展示
 
@@ -114,9 +118,13 @@ function next() {
   }
 }
 
-const tips = ref()
-
 // 展示新手提示
+/**
+ * 展示新手提示。根据目标元素 rect 计算引导框位置、箭头方向和提示框定位。
+ * 若提示框超出屏幕底部，自动翻转方向（箭头在上/提示框在上）。
+ * @param data - 目标元素的 boundingClientRect
+ * @param scrollTop - 当前页面滚动距离
+ */
 function viewTips(data: any, scrollTop: number) {
   if (data) {
     // 如果dom宽度大于或者等于窗口宽度,需要重新调整dom展示宽度
@@ -128,13 +136,7 @@ function viewTips(data: any, scrollTop: number) {
     if (data.left == 0) {
       data.left = 10
     }
-    let domRW = systemInfo.value.windowWidth - data.left
-    let left = 0
-    tipWidth.value = tips.value.$el.clientWidth
-    // 如果dom距离右边没有tips的宽度大的话,就要让tips向左偏移
-    if (domRW < tipWidth.value) {
-      left = domRW - tipWidth.value
-    }
+    const domRW = systemInfo.value.windowWidth - data.left
     // 步骤条展示的高度需要加上屏幕滚动的高度
     data.top += scrollTop
     // 根据实际情况需要滚动到展示区域
@@ -142,17 +144,21 @@ function viewTips(data: any, scrollTop: number) {
       scrollTop: data.top > 44 ? data.top - 44 : 0,
       duration: 100
     })
-    let obj = Object.assign(guideList.value[index.value], data)
+    const obj = Object.assign(guideList.value[index.value], data)
     // 设置三角形高度
-    let arrowTopHeight = data.height + 9
+    const arrowTopHeight = data.height + 9
     //如果dom在屏幕底部的话，重新调整提示框和三角形的定位
-    let newHeight = systemInfo.value.windowHeight - data.bottom
+    const newHeight = systemInfo.value.windowHeight - data.bottom
     uni
       .createSelectorQuery()
       .in(proxy)
       .select('.oxy-guide__box__tips')
       .boundingClientRect((res) => {
-        if (newHeight > ((res as NodeInfo).height ?? 0) + 5) {
+        const tipsRect = res as NodeInfo | null
+        tipWidth.value = tipsRect?.width ?? 0
+        // 如果dom距离右边没有tips的宽度大的话,就要让tips向左偏移
+        const left = domRW < tipWidth.value ? domRW - tipWidth.value : 0
+        if (newHeight > (tipsRect?.height ?? 0) + 5) {
           // 设置提示框定位
           arrowTop.value = `top: ${toPx(arrowTopHeight)};`
           tipPosition.value = `top: ${toPx(arrowTopHeight + 5)};${

package/components/oxy-icon/oxy-icon.vue

@@ -8,7 +8,9 @@
 export default {
   name: 'oxy-icon',
   options: {
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     addGlobalClass: true,
     styleIsolation: 'shared'
   }

package/components/oxy-icon/types.ts

@@ -1,3 +1,4 @@
+import type { ExtractPropTypes } from 'vue'
 import { baseProps, makeRequiredProp, makeStringProp, numericProp } from '../common/props'
 
 export const iconProps = {
@@ -19,3 +20,5 @@ export const iconProps = {
    */
   classPrefix: makeStringProp('oxy-icon')
 }
+
+export type IconProps = ExtractPropTypes<typeof iconProps>

package/components/oxy-image-preview/index.scss

@@ -0,0 +1,75 @@
+@import '../common/abstracts/variable.scss';
+@import '../common/abstracts/_mixin.scss';
+
+@include b(image-preview) {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  background: $-image-preview-bg;
+
+  @include e(close) {
+    position: absolute;
+    z-index: $-image-preview-close-z-index;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    @include m(top-right) {
+      top: $-image-preview-close-margin;
+      right: $-image-preview-close-margin;
+    }
+
+    @include m(top-left) {
+      top: $-image-preview-close-margin;
+      left: $-image-preview-close-margin;
+    }
+  }
+
+  @include edeep(close-icon) {
+    font-size: $-image-preview-close-size;
+    line-height: $-image-preview-close-size;
+    color: $-image-preview-close-color;
+  }
+
+  @include e(index) {
+    position: absolute;
+    top: $-image-preview-index-margin;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: $-image-preview-index-z-index;
+    color: $-image-preview-index-color;
+    font-size: $-image-preview-index-font-size;
+    line-height: $-image-preview-index-line-height;
+    font-weight: $-image-preview-index-font-weight;
+  }
+
+  @include e(swiper) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(swiper-item) {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+
+    :deep() {
+      .oxy-swiper__item {
+        width: 100%;
+        height: 100%;
+        padding: 0;
+      }
+    }
+  }
+
+  @include e(image) {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    transform-origin: center center;
+    will-change: transform;
+  }
+}

package/components/oxy-image-preview/index.ts

@@ -0,0 +1,56 @@
+import { inject, provide, ref } from 'vue'
+import type { ImagePreview, ImagePreviewOptions } from './types'
+import { deepMerge, isArray } from '../common/util'
+
+const imagePreviewDefaultOptionKey = '__IMAGE_PREVIEW_OPTION__'
+
+export const defaultOptions: ImagePreviewOptions = {
+  images: [],
+  startPosition: 0,
+  showIndex: true,
+  loop: true,
+  closeable: true,
+  closeIcon: 'close',
+  closeIconPosition: 'top-right',
+  closeOnClick: true,
+  showMenuByLongpress: true,
+  show: false,
+  zIndex: 1000
+}
+
+const None = Symbol('None')
+
+export function useImagePreview(selector: string = ''): ImagePreview {
+  const imagePreviewOptionKey = getImagePreviewOptionKey(selector)
+  const imagePreviewOption = inject(imagePreviewOptionKey, ref<ImagePreviewOptions | typeof None>(None))
+
+  if (imagePreviewOption.value === None) {
+    imagePreviewOption.value = defaultOptions
+    provide(imagePreviewOptionKey, imagePreviewOption)
+  }
+
+  const open = (options: ImagePreviewOptions | string[]) => {
+    let mergedOptions: ImagePreviewOptions
+
+    if (isArray(options)) {
+      mergedOptions = deepMerge(defaultOptions, { images: options }) as ImagePreviewOptions
+    } else {
+      mergedOptions = deepMerge(defaultOptions, options) as ImagePreviewOptions
+    }
+
+    imagePreviewOption.value = deepMerge(mergedOptions, { show: true }) as ImagePreviewOptions
+  }
+
+  const close = () => {
+    imagePreviewOption.value = { show: false } as ImagePreviewOptions
+  }
+
+  return {
+    previewImage: open,
+    closeImagePreview: close
+  }
+}
+
+export const getImagePreviewOptionKey = (selector: string) => {
+  return selector ? `${imagePreviewDefaultOptionKey}${selector}` : imagePreviewDefaultOptionKey
+}

package/components/oxy-image-preview/oxy-image-preview.vue

@@ -0,0 +1,221 @@
+<template>
+  <oxy-overlay
+    :show="state.show"
+    :z-index="options.zIndex"
+    :lock-scroll="true"
+    :custom-class="`oxy-image-preview ${props.customClass}`"
+    :custom-style="props.customStyle"
+    @enter="handleEnter"
+    @after-leave="handleAfterLeave"
+  >
+    <slot name="close" :close="close">
+      <view v-if="options.closeable" :class="`oxy-image-preview__close oxy-image-preview__close--${options.closeIconPosition}`" @click.stop="close">
+        <oxy-icon :name="options.closeIcon" custom-class="oxy-image-preview__close-icon" />
+      </view>
+    </slot>
+
+    <oxy-swiper
+      v-if="state.visible"
+      custom-class="oxy-image-preview__swiper"
+      custom-item-class="oxy-image-preview__swiper-item"
+      :list="state.images"
+      v-model:current="state.currentIndex"
+      :autoplay="false"
+      :loop="options.loop"
+      image-mode="aspectFit"
+      height="100%"
+      @change="handleSwiperChange"
+    >
+      <template #default="{ item, index }">
+        <image
+          :src="getImageUrl(item)"
+          class="oxy-image-preview__image"
+          mode="aspectFit"
+          :show-menu-by-longpress="options.showMenuByLongpress"
+          @click="handleImageClick(index)"
+          @longpress="handleLongPress(item)"
+        />
+      </template>
+      <template #indicator="{ total, current }">
+        <slot name="indicator" :total="total" :current="current">
+          <view v-if="options.showIndex && total > 1" class="oxy-image-preview__index">{{ current + 1 }} / {{ total }}</view>
+        </slot>
+      </template>
+    </oxy-swiper>
+
+    <slot :current="state.currentIndex" :total="state.images.length" :images="state.images" :close="close"></slot>
+  </oxy-overlay>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-image-preview',
+  options: {
+    addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
+    virtualHost: true,
+    // #endif
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, inject, reactive, ref, watch } from 'vue'
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import OxyOverlay from '../oxy-overlay/oxy-overlay.vue'
+import OxySwiper from '../oxy-swiper/oxy-swiper.vue'
+import { imagePreviewProps, type ImagePreviewExpose, type ImagePreviewOptions } from './types'
+import { defaultOptions, getImagePreviewOptionKey } from './index'
+import { isArray, isDef, isFunction, isString } from '../common/util'
+import type { SwiperList } from '../oxy-swiper/types'
+
+const props = defineProps(imagePreviewProps)
+
+const emit = defineEmits<{
+  open: []
+  close: []
+  click: [{ index: number }]
+  change: [{ index: number }]
+  'long-press': [{ image: string }]
+}>()
+
+const state = reactive({
+  show: false,
+  visible: false,
+  currentIndex: 0,
+  images: [] as string[]
+})
+
+const imagePreviewOptionKey = getImagePreviewOptionKey(props.selector)
+const imagePreviewOption = inject(imagePreviewOptionKey, ref<ImagePreviewOptions>(defaultOptions))
+
+const options = computed(() => ({
+  showIndex: isDef(imagePreviewOption.value.showIndex) ? imagePreviewOption.value.showIndex : props.showIndex,
+  loop: isDef(imagePreviewOption.value.loop) ? imagePreviewOption.value.loop : props.loop,
+  closeable: isDef(imagePreviewOption.value.closeable) ? imagePreviewOption.value.closeable : props.closeable,
+  closeIcon: isDef(imagePreviewOption.value.closeIcon) ? imagePreviewOption.value.closeIcon : props.closeIcon,
+  closeIconPosition: isDef(imagePreviewOption.value.closeIconPosition) ? imagePreviewOption.value.closeIconPosition : props.closeIconPosition,
+  closeOnClick: isDef(imagePreviewOption.value.closeOnClick) ? imagePreviewOption.value.closeOnClick : props.closeOnClick,
+  showMenuByLongpress: isDef(imagePreviewOption.value.showMenuByLongpress) ? imagePreviewOption.value.showMenuByLongpress : props.showMenuByLongpress,
+  zIndex: isDef(imagePreviewOption.value.zIndex) ? imagePreviewOption.value.zIndex! : props.zIndex,
+  onOpen: imagePreviewOption.value.onOpen || props.onOpen || null,
+  onClose: imagePreviewOption.value.onClose || props.onClose || null,
+  onChange: imagePreviewOption.value.onChange || props.onChange || null,
+  onLongPress: imagePreviewOption.value.onLongPress || props.onLongPress || null
+}))
+
+watch(
+  () => imagePreviewOption.value,
+  (newVal: ImagePreviewOptions) => {
+    reset(newVal)
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => state.show,
+  (newVal, oldVal) => {
+    if (newVal && !oldVal) {
+      emit('open')
+      if (isFunction(options.value.onOpen)) {
+        options.value.onOpen()
+      }
+    } else if (!newVal && oldVal) {
+      emit('close')
+      if (isFunction(options.value.onClose)) {
+        options.value.onClose()
+      }
+    }
+  }
+)
+
+function reset(option: ImagePreviewOptions) {
+  state.show = isDef(option.show) ? option.show! : false
+
+  if (state.show) {
+    state.images = isDef(option.images) ? option.images! : props.images || []
+    state.currentIndex = normalizeIndex(isDef(option.startPosition) ? option.startPosition! : props.startPosition)
+  }
+}
+
+function normalizeIndex(index: number) {
+  const total = state.images.length
+  if (!total) return 0
+  if (options.value.loop) {
+    return (index + total) % total
+  }
+  return Math.min(Math.max(index, 0), total - 1)
+}
+
+function handleEnter() {
+  state.visible = true
+}
+
+function handleAfterLeave() {
+  state.visible = false
+  state.images = []
+  state.currentIndex = 0
+}
+
+function open(opts?: ImagePreviewOptions | string[]) {
+  if (opts) {
+    if (isArray(opts)) {
+      state.images = opts
+      state.currentIndex = normalizeIndex(props.startPosition)
+    } else {
+      state.images = isDef(opts.images) ? opts.images! : props.images || []
+      state.currentIndex = normalizeIndex(isDef(opts.startPosition) ? opts.startPosition! : props.startPosition)
+    }
+  } else {
+    state.images = props.images || []
+    state.currentIndex = normalizeIndex(props.startPosition)
+  }
+  state.show = true
+}
+
+function close() {
+  state.show = false
+}
+
+function setActive(index: number) {
+  state.currentIndex = normalizeIndex(index)
+}
+
+function handleSwiperChange({ current }: { current: number }) {
+  state.currentIndex = current
+  emit('change', { index: current })
+  if (isFunction(options.value.onChange)) {
+    options.value.onChange(current)
+  }
+}
+
+function handleImageClick(index: number) {
+  emit('click', { index })
+  if (options.value.closeOnClick) {
+    close()
+  }
+}
+
+function handleLongPress(image: string | SwiperList) {
+  const url = getImageUrl(image)
+  emit('long-press', { image: url })
+  if (isFunction(options.value.onLongPress)) {
+    options.value.onLongPress(url)
+  }
+}
+
+function getImageUrl(image: string | SwiperList) {
+  return isString(image) ? image : image.value || ''
+}
+
+defineExpose<ImagePreviewExpose>({
+  open,
+  close,
+  setActive
+})
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>