oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-waterfall/oxy-waterfall.vue

@@ -0,0 +1,218 @@
+<template>
+  <view :class="`oxy-waterfall ${customClass}`" :style="waterfallStyle">
+    <scroll-view
+      class="oxy-waterfall__wrapper"
+      :scroll-y="true"
+      :refresher-enabled="refresherEnabled"
+      :refresher-triggered="triggered"
+      @scroll="handleScroll"
+      @scrolltolower="handleScrolltolower"
+      @refresherrefresh="handleRefresherrefresh"
+    >
+      <view class="oxy-waterfall__container" :style="`${containerStyle}`">
+        <view v-for="(column, index) in columns" :key="index" class="oxy-waterfall__column" :style="index ? `${columnStyle}` : ''">
+          <oxy-waterfall-item
+            v-for="(item, cindex) in column"
+            :key="item[idKey]"
+            :col-index="index"
+            :custom-style="cindex ? `${itemStyle}` : ''"
+            :report-height-time="item.reportHeightTime"
+            @height="reportHeight"
+          >
+            <slot name="item" :item="item" :col-index="index" :item-index="cindex"></slot>
+          </oxy-waterfall-item>
+        </view>
+      </view>
+      <slot name="bottom">
+        <oxy-loadmore
+          v-if="loadmoreState"
+          :state="loadmoreState"
+          :loading-text="loadingText"
+          :finished-text="finishedText"
+          :error-text="errorText"
+          :loading-props="loadingProps"
+          @reload="onReload"
+        />
+      </slot>
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-waterfall',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import type { ScrollViewOnRefresherrefreshEvent, ScrollViewOnScrollEvent } from '@uni-helper/uni-app-types/index'
+import { objToStyle, isDef, withDefaultUnit } from '../common/util'
+import { computed, ref, watch, nextTick } from 'vue'
+import { waterfallProps } from './types'
+
+const emit = defineEmits(['scroll', 'scroll-to-lower', 'refresh', 'reload'])
+
+const props = defineProps(waterfallProps)
+
+const columns = ref<any>([])
+const loadedIndex = ref(0)
+const columnHeights = ref<any>([])
+
+watch(
+  () => props.data,
+  () => {
+    loadColumn()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.triggered,
+  (val) => {
+    if (val) {
+      loadedIndex.value = 0
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+function loadColumn() {
+  if (!loadedIndex.value || !columns.value.length) {
+    clearColumn()
+    columns.value = Array(props.columnCount)
+      .fill(null)
+      .map(() => [])
+    columnHeights.value = Array(props.columnCount)
+      .fill(null)
+      .map(() => 0)
+  }
+  nextTick(() => {
+    addRenderData()
+  })
+}
+
+function addRenderData() {
+  if (loadedIndex.value > props.data.length - 1) return
+  const current = props.data[loadedIndex.value]
+  pushRender(current)
+  loadedIndex.value += 1
+}
+
+function pushRender(data: Record<string, any>) {
+  const columnIndex = findSmallColIndex()
+  columns.value[columnIndex].push({
+    ...data,
+    reportHeightTime: Date.now()
+  })
+}
+
+function findSmallColIndex() {
+  let col = 0
+  let size = columnHeights.value[col]
+  columnHeights.value.forEach((item: number, index: number) => {
+    if (item < size) {
+      col = index
+      size = item
+    }
+  })
+  return col
+}
+
+function reportHeight(params: any) {
+  const { colIndex, height, reportHeightTimeChange } = params
+  columnHeights.value[colIndex] += height
+
+  if (reportHeightTimeChange) {
+    return
+  }
+
+  addRenderData()
+}
+
+// 更新
+const update = (params: any) => {
+  const { colIndex, itemIndex, data = {}, reportHeight = false } = params
+  const item = columns.value[colIndex][itemIndex]
+  Object.keys(data).forEach((k) => {
+    item[k] = data[k]
+  })
+  // 当需要重新上报高度时，更新渲染时间
+  if (reportHeight) {
+    item.reportHeightTime = Date.now()
+  }
+}
+
+function clearColumn() {
+  loadedIndex.value = 0
+  columns.value = []
+  columnHeights.value = []
+}
+
+const waterfallStyle = computed(() => {
+  const style: Record<string, any> = {}
+  if (isDef(props.height)) {
+    style['height'] = withDefaultUnit(props.height)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const containerStyle = computed(() => {
+  const style: Record<string, any> = {}
+  if (props.leftGap) {
+    style['padding-left'] = withDefaultUnit(props.leftGap)
+  }
+  if (props.rightGap) {
+    style['padding-right'] = withDefaultUnit(props.rightGap)
+  }
+  return objToStyle(style)
+})
+
+const columnStyle = computed(() => {
+  const style: Record<string, any> = {}
+  if (props.columnGap) {
+    style['margin-left'] = withDefaultUnit(props.columnGap)
+  }
+  return objToStyle(style)
+})
+
+const itemStyle = computed(() => {
+  const style: Record<string, any> = {}
+  if (props.columnGap) {
+    style['margin-top'] = withDefaultUnit(props.columnGap)
+  }
+  return objToStyle(style)
+})
+
+const handleScroll = (event: ScrollViewOnScrollEvent) => {
+  emit('scroll', event)
+}
+
+const handleScrolltolower = () => {
+  emit('scroll-to-lower')
+}
+
+const handleRefresherrefresh = (e: ScrollViewOnRefresherrefreshEvent) => {
+  emit('refresh', e)
+}
+
+const onReload = () => {
+  emit('reload')
+}
+
+defineExpose({
+  update
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-waterfall/types.ts

@@ -0,0 +1,90 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeRequiredProp, makeStringProp, makeNumberProp, numericProp, makeBooleanProp } from '../common/props'
+import { type LoadMoreState } from '../oxy-loadmore/types'
+import { type LoadingProps } from '../oxy-loading/types'
+
+export const waterfallProps = {
+  ...baseProps,
+
+  /**
+   * 瀑布流数据
+   * 类型：array
+   */
+  data: makeRequiredProp(Array<Record<string, any>>),
+
+  /**
+   * 数据的唯一标识
+   * 类型：string
+   * 默认值：'id'
+   */
+  idKey: makeStringProp('id'),
+
+  /**
+   * 容器的高度，number 类型按 `rpx` 语义处理
+   */
+  height: numericProp,
+
+  /**
+   * 瀑布流的列数
+   * 类型：number
+   * 默认值：2
+   */
+  columnCount: makeNumberProp(2),
+
+  /**
+   * 列与列的间隙
+   * 类型：number（number 类型按 `rpx` 语义处理）
+   * 默认值：40
+   */
+  columnGap: makeNumberProp(40),
+
+  /**
+   * 左边和列表的间隙
+   * 类型：number（number 类型按 `rpx` 语义处理）
+   * 默认值：0
+   */
+  leftGap: makeNumberProp(0),
+
+  /**
+   * 右边和列表的间隙
+   * 类型：number（number 类型按 `rpx` 语义处理）
+   * 默认值：0
+   */
+  rightGap: makeNumberProp(0),
+
+  /**
+   * 开启下拉刷新
+   * 类型：boolean
+   * 默认值：false
+   */
+  refresherEnabled: makeBooleanProp(false),
+
+  /**
+   * 下拉刷新状态
+   * 类型：boolean
+   * 默认值：false
+   */
+  triggered: makeBooleanProp(false),
+
+  loadmoreState: String as PropType<LoadMoreState | ''>,
+
+  /**
+   * 加载提示文案
+   */
+  loadingText: String,
+  /**
+   * 全部加载完的提示文案
+   */
+  finishedText: String,
+  /**
+   * 加载失败的提示文案
+   */
+  errorText: String,
+  /**
+   * 加载中loading组件的属性
+   * 参考loading组件
+   */
+  loadingProps: Object as PropType<Partial<LoadingProps>>
+}
+
+export type WaterfallProps = ExtractPropTypes<typeof waterfallProps>

package/components/oxy-waterfall-item/index.scss

@@ -0,0 +1,8 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(waterfall-item) {
+  width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,89 @@
+<template>
+  <view :class="`oxy-waterfall-item ${customClass}`" :style="customStyle">
+    <slot name="default"></slot>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-waterfall-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { ref, getCurrentInstance, watch, onMounted } from 'vue'
+import { waterfallItemProps } from './types'
+
+const emit = defineEmits(['height'])
+
+const props = defineProps(waterfallItemProps)
+const instance = getCurrentInstance()
+
+const displayHeight = ref(0)
+
+watch(
+  () => props.reportHeightTime,
+  (newValue, oldValue) => {
+    if (newValue !== oldValue) {
+      postHeight({
+        reportHeightTimeChange: true
+      })
+    }
+  }
+)
+
+const wait = (time = 100) => {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve()
+    }, time)
+  })
+}
+
+async function postHeight(params: any) {
+  const { reportHeightTimeChange = false } = params
+  // 添加一个异步的宏任务，部分低性能的移动设备会因为渲染问题导致上报的高度存在错误问题
+  await wait(10)
+  // 当前高度
+  const currentHeight = await getHeight()
+  // 上报高度
+  let height = currentHeight - displayHeight.value
+  // 上报高度为0时，取消上报。防止用户调用 update 函数时错误的reportHeight参数情况
+  if (height === 0) {
+    return
+  }
+  emit('height', {
+    colIndex: props.colIndex,
+    height,
+    reportHeightTimeChange
+  })
+  // 缓存渲染高度
+  displayHeight.value = currentHeight
+}
+
+function getHeight(): Promise<number> {
+  const query = uni.createSelectorQuery().in(instance)
+  return new Promise((resolve, reject) => {
+    query
+      .select('.oxy-waterfall-item')
+      .boundingClientRect((data) => {
+        const nodeHieght = (data as UniApp.NodeInfo).height
+        // 节点高度
+        const height = nodeHieght ? Math.floor(nodeHieght) : 0
+        resolve(height)
+      })
+      .exec()
+  })
+}
+
+onMounted(() => {
+  postHeight({})
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-waterfall-item/types.ts

@@ -0,0 +1,16 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeNumberProp, numericProp } from '../common/props'
+
+export const waterfallItemProps = {
+  ...baseProps,
+  /**
+   * 列索引
+   */
+  colIndex: makeNumberProp(0),
+  /**
+   * 上报时间
+   */
+  reportHeightTime: numericProp
+}
+
+export type WaterfallItemProps = ExtractPropTypes<typeof waterfallItemProps>

package/components/oxy-watermark/oxy-watermark.vue

@@ -3,7 +3,7 @@
     <canvas
       v-if="!canvasOffScreenable && showCanvas"
       type="2d"
-      :style="{ height: canvasHeight + 'px', width: canvasWidth + 'px', visibility: 'hidden' }"
+      :style="{ height: unitConvert(canvasHeight, 0, { output: 'px' }), width: unitConvert(canvasWidth, 0, { output: 'px' }), visibility: 'hidden' }"
       :canvas-id="canvasId"
       :id="canvasId"
     />
@@ -23,7 +23,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch, nextTick, type CSSProperties } from 'vue'
-import { addUnit, buildUrlWithParams, isBase64Image, objToStyle, uuid } from '../common/util'
+import { buildUrlWithParams, isBase64Image, objToStyle, unitConvert, unitConvertWithDefault, uuid } from '../common/util'
 import { watermarkProps } from './types'
 
 const props = defineProps(watermarkProps)
@@ -40,9 +40,18 @@ const canvasId = ref<string>(`water${uuid()}`) // canvas 组件的唯一标识
 const waterMarkUrl = ref<string>('') // canvas生成base64水印
 const canvasOffScreenable = ref<boolean>(uni.canIUse('createOffscreenCanvas') && Boolean(uni.createOffscreenCanvas)) // 是否可以使用离屏canvas
 const pixelRatio = ref<number>(uni.getSystemInfoSync().pixelRatio) // 像素比
-const canvasHeight = ref<number>((props.height + props.gutterY) * pixelRatio.value) // canvas画布高度
-const canvasWidth = ref<number>((props.width + props.gutterX) * pixelRatio.value) // canvas画布宽度
+const toNumber = (value: number | string | null | undefined) => unitConvertWithDefault(value, { defaultUnit: 'rpx' })
+const watermarkWidth = computed(() => toNumber(props.width))
+const watermarkHeight = computed(() => toNumber(props.height))
+const gutterX = computed(() => toNumber(props.gutterX))
+const gutterY = computed(() => toNumber(props.gutterY))
+const imageHeight = computed(() => toNumber(props.imageHeight))
+const imageWidth = computed(() => toNumber(props.imageWidth))
+const fontSize = computed(() => toNumber(props.size))
+const canvasHeight = ref<number>((watermarkHeight.value + gutterY.value) * pixelRatio.value) // canvas画布高度
+const canvasWidth = ref<number>((watermarkWidth.value + gutterX.value) * pixelRatio.value) // canvas画布宽度
 const showCanvas = ref<boolean>(true) // 是否展示canvas
+const toPx = (value: string | number | null | undefined) => unitConvert(value, 0, { output: 'px' })
 
 /**
  * 水印css类
@@ -61,7 +70,7 @@ const rootClass = computed(() => {
 const rootStyle = computed(() => {
   const style: CSSProperties = {
     opacity: props.opacity,
-    backgroundSize: addUnit(props.width + props.gutterX)
+    backgroundSize: unitConvert(watermarkWidth.value + gutterX.value, 0, { output: 'px' })
   }
   if (waterMarkUrl.value) {
     style['backgroundImage'] = `url('${waterMarkUrl.value}')`
@@ -75,8 +84,8 @@ onMounted(() => {
 
 function doReset() {
   showCanvas.value = true
-  canvasHeight.value = (props.height + props.gutterY) * pixelRatio.value
-  canvasWidth.value = (props.width + props.gutterX) * pixelRatio.value
+  canvasHeight.value = (watermarkHeight.value + gutterY.value) * pixelRatio.value
+  canvasWidth.value = (watermarkWidth.value + gutterX.value) * pixelRatio.value
   nextTick(() => {
     doInit()
   })
@@ -87,10 +96,23 @@ function doInit() {
   // h5使用document.createElement创建canvas，不用展示canvas标签
   showCanvas.value = false
   // #endif
-  const { width, height, color, size, fontStyle, fontWeight, fontFamily, content, rotate, gutterX, gutterY, image, imageHeight, imageWidth } = props
-
   // 创建水印
-  createWaterMark(width, height, color, size, fontStyle, fontWeight, fontFamily, content, rotate, gutterX, gutterY, image, imageHeight, imageWidth)
+  createWaterMark(
+    watermarkWidth.value,
+    watermarkHeight.value,
+    props.color,
+    fontSize.value,
+    props.fontStyle,
+    props.fontWeight,
+    props.fontFamily,
+    props.content,
+    props.rotate,
+    gutterX.value,
+    gutterY.value,
+    props.image,
+    imageHeight.value,
+    imageWidth.value
+  )
 }
 
 /**
@@ -289,8 +311,8 @@ function createH5Canvas(
 ) {
   const canvas = document.createElement('canvas')
   const ctx = canvas.getContext('2d')
-  canvas.setAttribute('width', `${canvasWidth}px`)
-  canvas.setAttribute('height', `${canvasHeight}px`)
+  canvas.setAttribute('width', toPx(canvasWidth))
+  canvas.setAttribute('height', toPx(canvasHeight))
   if (ctx) {
     if (image) {
       const img = new Image()
@@ -334,7 +356,7 @@ function drawTextOffScreen(
   ctx.textAlign = 'center'
   ctx.translate(contentWidth / 2, contentWidth / 2)
   ctx.rotate((Math.PI / 180) * rotate)
-  ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px/${contentHeight}px ${fontFamily}`
+  ctx.font = `${fontStyle} normal ${fontWeight} ${toPx(fontSize)}/${toPx(contentHeight)} ${fontFamily}`
   ctx.fillStyle = color
   ctx.fillText(content, 0, 0)
   ctx.restore()

package/components/oxy-watermark/types.ts

@@ -12,29 +12,29 @@ export const watermarkProps = {
    */
   image: makeStringProp(''),
   /**
-   * 图片高度
+   * 图片高度，支持 number / string（如 `200rpx`、`100px`），number 与纯数字字符串按 rpx 处理
    */
-  imageHeight: makeNumberProp(100),
+  imageHeight: makeNumericProp(200),
   /**
-   * 图片高度
+   * 图片宽度，支持 number / string（如 `200rpx`、`100px`），number 与纯数字字符串按 rpx 处理
    */
-  imageWidth: makeNumberProp(100),
+  imageWidth: makeNumericProp(200),
   /**
-   * X轴间距，单位px
+   * X轴间距，支持 number / string（如 `20rpx`、`10px`），number 与纯数字字符串按 rpx 处理
    */
-  gutterX: makeNumberProp(0),
+  gutterX: makeNumericProp(0),
   /**
-   * Y轴间距，单位px
+   * Y轴间距，支持 number / string（如 `20rpx`、`10px`），number 与纯数字字符串按 rpx 处理
    */
-  gutterY: makeNumberProp(0),
+  gutterY: makeNumericProp(0),
   /**
-   * canvas画布宽度，单位px
+   * canvas画布宽度，支持 number / string（如 `200rpx`、`100px`），number 与纯数字字符串按 rpx 处理
    */
-  width: makeNumberProp(100),
+  width: makeNumericProp(200),
   /**
-   * canvas画布高度，单位px
+   * canvas画布高度，支持 number / string（如 `200rpx`、`100px`），number 与纯数字字符串按 rpx 处理
    */
-  height: makeNumberProp(100),
+  height: makeNumericProp(200),
   /**
    * 是否为全屏水印
    */
@@ -44,9 +44,9 @@ export const watermarkProps = {
    */
   color: makeStringProp('#8c8c8c'),
   /**
-   * 水印字体大小，单位px
+   * 水印字体大小，支持 number / string（如 `28rpx`、`14px`），number 与纯数字字符串按 rpx 处理
    */
-  size: makeNumberProp(14),
+  size: makeNumericProp(28),
   /**
    * 水印字体样式（仅微信和h5支持），可能的值：normal、italic、oblique
    */

package/global.d.ts

@@ -27,6 +27,7 @@ declare module 'vue' {
     OxyIcon: typeof import('./components/oxy-icon/oxy-icon.vue')['default']
     OxyImg: typeof import('./components/oxy-img/oxy-img.vue')['default']
     OxyImgCropper: typeof import('./components/oxy-img-cropper/oxy-img-cropper.vue')['default']
+    OxyImgLazy: typeof import('./components/oxy-img-lazy/oxy-img-lazy.vue')['default']
     OxyInput: typeof import('./components/oxy-input/oxy-input.vue')['default']
     OxyInputNumber: typeof import('./components/oxy-input-number/oxy-input-number.vue')['default']
     OxyLoading: typeof import('./components/oxy-loading/oxy-loading.vue')['default']
@@ -98,6 +99,14 @@ declare module 'vue' {
     OxyFloatingPanel: typeof import('./components/oxy-floating-panel/oxy-floating-panel.vue')['default']
     OxySignature: typeof import('./components/oxy-signature/oxy-signature.vue')['default']
     OxyRootPortal: typeof import('./components/oxy-root-portal/oxy-root-portal.vue')['default']
+    OxyStreamRender: typeof import('./components/oxy-stream-render/oxy-stream-render.vue')['default']
+    OxyWaterfall: typeof import('./components/oxy-waterfall/oxy-waterfall.vue')['default']
+    OxyWaterfallItem: typeof import('./components/oxy-waterfall/oxy-waterfall-item.vue')['default']
+    OxyDateStrip: typeof import('./components/oxy-date-strip/oxy-date-strip.vue')['default']
+    OxyDateStripItem: typeof import('./components/oxy-date-strip-item/oxy-date-strip-item.vue')['default']
+    OxySelect: typeof import('./components/oxy-select/oxy-select.vue')['default']
+    OxyVerificationCode: typeof import('./components/oxy-verification-code/oxy-verification-code.vue')['default']
+    OxyLongPressMenu: typeof import('./components/oxy-long-press-menu/oxy-long-press-menu.vue')['default']
   }
 }
 

package/index.ts

@@ -1,5 +1,8 @@
 export { useToast } from './components/oxy-toast'
 export { useMessage } from './components/oxy-message-box'
+export { useGlobalLoading } from './components/composables/useGlobalLoading'
+export { useGlobalMessage } from './components/composables/useGlobalMessage'
+export { useGlobalToast } from './components/composables/useGlobalToast'
 export * from './components/composables'
 export * from './components/oxy-notify'
 

package/locale/lang/ar-SA.ts

@@ -130,5 +130,8 @@ export default {
     clearText: 'مسح',
     revokeText: 'تراجع',
     restoreText: 'استعادة'
+  },
+  guidance: {
+    skip: 'تخطي'
   }
 }

package/locale/lang/en-US.ts

@@ -130,5 +130,34 @@ export default {
     clearText: 'Clear',
     revokeText: 'Undo',
     restoreText: 'Restore'
+  },
+  richText: {
+    insertEmoji: 'Insert Emoji',
+    insertTemplate: 'Insert Template',
+    insertLink: 'Insert Link',
+    emoji: 'Emoji',
+    template: 'Template',
+    largeTitle: 'Large Title',
+    mediumTitle: 'Medium Title',
+    smallTitle: 'Small Title',
+    localSelect: 'Local Select',
+    remoteLink: 'Remote Link',
+    imageLink: 'Image Link',
+    videoLink: 'Video Link',
+    audioLink: 'Audio Link',
+    linkAddress: 'Link Address',
+    linkText: 'Link Text',
+    linkTextPlaceholder: 'Please enter the link display text',
+    linkAddressPlaceholder: 'Please enter the link address',
+    uploading: 'Uploading',
+    insertTable: 'Insert Table',
+    row: 'Row',
+    column: 'Column',
+    clearConfirm: 'Are you sure to clear the content?',
+    confirm: 'Confirm',
+    cancel: 'Cancel'
+  },
+  guidance: {
+    skip: 'Skip'
   }
 }