oxy-uni-ui 1.2.0 → 1.2.3

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, addUnit } 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'] = addUnit(props.height)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const containerStyle = computed(() => {
+  const style: Record<string, any> = {}
+  if (props.leftGap) {
+    style['padding-left'] = addUnit(props.leftGap)
+  }
+  if (props.rightGap) {
+    style['padding-right'] = addUnit(props.rightGap)
+  }
+  return objToStyle(style)
+})
+
+const columnStyle = computed(() => {
+  const style: Record<string, any> = {}
+  if (props.columnGap) {
+    style['margin-left'] = addUnit(props.columnGap)
+  }
+  return objToStyle(style)
+})
+
+const itemStyle = computed(() => {
+  const style: Record<string, any> = {}
+  if (props.columnGap) {
+    style['margin-top'] = addUnit(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'),
+
+  /**
+   * 容器的高度
+   */
+  height: numericProp,
+
+  /**
+   * 瀑布流的列数
+   * 类型：number
+   * 默认值：2
+   */
+  columnCount: makeNumberProp(2),
+
+  /**
+   * 列与列的间隙
+   * 类型：number
+   * 默认值：20
+   */
+  columnGap: makeNumberProp(20),
+
+  /**
+   * 左边和列表的间隙
+   * 类型：number
+   * 默认值：0
+   */
+  leftGap: makeNumberProp(0),
+
+  /**
+   * 右边和列表的间隙
+   * 类型：number
+   * 默认值：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/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,12 @@ 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']
   }
 }
 

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/en-US.ts

@@ -130,5 +130,31 @@ 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'
   }
 }

package/locale/lang/zh-CN.ts

@@ -134,5 +134,31 @@ export default {
     clearText: '清空',
     revokeText: '撤销',
     restoreText: '恢复'
+  },
+  richText: {
+    insertEmoji: '插入表情',
+    insertTemplate: '插入模板',
+    insertLink: '插入链接',
+    emoji: '表情',
+    template: '模板',
+    largeTitle: '大标题',
+    mediumTitle: '中标题',
+    smallTitle: '小标题',
+    localSelect: '本地选取',
+    remoteLink: '远程链接',
+    imageLink: '图片链接',
+    videoLink: '视频链接',
+    audioLink: '音频链接',
+    linkAddress: '链接地址',
+    linkText: '链接文本',
+    linkTextPlaceholder: '请输入链接显示的文本',
+    linkAddressPlaceholder: '请输入链接地址',
+    uploading: '上传中',
+    insertTable: '插入表格',
+    row: '行',
+    column: '列',
+    clearConfirm: '确定清空内容吗？',
+    confirm: '确认',
+    cancel: '取消'
   }
 }

package/package.json

@@ -1 +1 @@
-{"id":"oxy-uni-ui","name":"oxy-uni-ui","displayName":"oxy-uni-ui 基于vue3+Typescript的高颜值组件库","version":"1.2.0","license":"MIT","description":"一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。","keywords":["oxy-uni-ui","国际化","组件库","vue3","暗黑模式"],"main":"index.ts","engines":{"HBuilderX":"^3.8.7"},"dcloudext":{"type":"component-vue","sale":{"regular":{"price":"0.00"},"sourcecode":{"price":"0.00"}},"contact":{"qq":""},"declaration":{"ads":"无","data":"插件不采集任何数据","permissions":"无"},"npmurl":"https://www.npmjs.com/package/oxy-uni-ui"},"vetur":{"tags":"tags.json","attributes":"attributes.json"},"web-types":"web-types.json","uni_modules":{"dependencies":[],"encrypt":[],"platforms":{"cloud":{"tcb":"y","aliyun":"y","alipay":"n"},"client":{"Vue":{"vue2":"n","vue3":"y"},"App":{"app-vue":"y","app-nvue":"n","app-uvue":"n"},"H5-mobile":{"Safari":"y","Android Browser":"y","微信浏览器(Android)":"y","QQ浏览器(Android)":"y"},"H5-pc":{"Chrome":"y","IE":"u","Edge":"y","Firefox":"y","Safari":"y"},"小程序":{"微信":"y","阿里":"y","百度":"u","字节跳动":"u","QQ":"y","钉钉":"y","快手":"u","飞书":"u","京东":"u"},"快应用":{"华为":"u","联盟":"u"}}}},"peerDependencies":{"vue":">=3.2.47"}}
+{"id":"oxy-uni-ui","name":"oxy-uni-ui","displayName":"oxy-uni-ui 基于vue3+Typescript的高颜值组件库","version":"1.2.3","license":"MIT","description":"一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。","keywords":["oxy-uni-ui","国际化","组件库","vue3","暗黑模式"],"main":"index.ts","engines":{"HBuilderX":"^3.8.7"},"dcloudext":{"type":"component-vue","sale":{"regular":{"price":"0.00"},"sourcecode":{"price":"0.00"}},"contact":{"qq":""},"declaration":{"ads":"无","data":"插件不采集任何数据","permissions":"无"},"npmurl":"https://www.npmjs.com/package/oxy-uni-ui"},"vetur":{"tags":"tags.json","attributes":"attributes.json"},"web-types":"web-types.json","uni_modules":{"dependencies":[],"encrypt":[],"platforms":{"cloud":{"tcb":"y","aliyun":"y","alipay":"n"},"client":{"Vue":{"vue2":"n","vue3":"y"},"App":{"app-vue":"y","app-nvue":"n","app-uvue":"n"},"H5-mobile":{"Safari":"y","Android Browser":"y","微信浏览器(Android)":"y","QQ浏览器(Android)":"y"},"H5-pc":{"Chrome":"y","IE":"u","Edge":"y","Firefox":"y","Safari":"y"},"小程序":{"微信":"y","阿里":"y","百度":"u","字节跳动":"u","QQ":"y","钉钉":"y","快手":"u","飞书":"u","京东":"u"},"快应用":{"华为":"u","联盟":"u"}}}},"peerDependencies":{"vue":">=3.2.47"}}