oxy-uni-ui 1.0.1 → 1.2.0

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

@@ -0,0 +1,213 @@
+<template>
+  <view :class="['oxy-file-list', { 'oxy-file-list__list': props.type === 'list' }, customClass]">
+    <block v-if="props.type === 'list'">
+      <view v-for="(file, index) in props.data" :key="index" class="oxy-file-list__list--item" @click="onPreview(file)">
+        <image :src="getUploadImage(file)" mode="aspectFill" class="oxy-file-list__icon" />
+        <text class="oxy-file-list__name">{{ file.name }}</text>
+      </view>
+    </block>
+    <block v-else>
+      <view v-for="(file, index) in props.data" :key="index" class="oxy-file-list__item">
+        <view class="oxy-file-list__content">
+          <image v-if="isImage(file)" :src="file.url" mode="aspectFill" class="oxy-file-list__picture" @click="onPreview(file)" />
+          <image v-else :src="getUploadImage(file)" mode="aspectFill" class="oxy-file-list__icon" @click="onPreview(file)" />
+        </view>
+        <oxy-tooltip placement="top" :content="file.name">
+          <text class="oxy-file-list__name">{{ file.name }}</text>
+        </oxy-tooltip>
+      </view>
+    </block>
+  </view>
+  <oxy-video-preview ref="videoPreview"></oxy-video-preview>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-file-list',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import ImgPdf from '../oxy-upload/images/pdf.png'
+import ImgWord from '../oxy-upload/images/word.png'
+import ImgAudio from '../oxy-upload/images/audio.png'
+import ImgVideo from '../oxy-upload/images/video.png'
+import ImgPic from '../oxy-upload/images/pic.png'
+import ImgOther from '../oxy-upload/images/other.png'
+import OxyVideoPreview from '../oxy-video-preview/oxy-video-preview.vue'
+import { ref } from 'vue'
+import { isImageUrl, isVideoUrl, isAudioUrl, isPdfUrl, isDocUrl } from '../common/util'
+import { type FileListItem, fileListProps } from './types'
+import type { VideoPreviewInstance } from '../oxy-video-preview/types'
+
+const imgs: AnyObject = {
+  pdf: ImgPdf,
+  word: ImgWord,
+  audio: ImgAudio,
+  video: ImgVideo,
+  pic: ImgPic,
+  other: ImgOther
+}
+
+const props = defineProps(fileListProps)
+
+const videoPreview = ref<VideoPreviewInstance>()
+/**
+ * 预览图片
+ * @param file
+ */
+function handlePreviewImage(file: FileListItem) {
+  const { onPreviewFail } = props
+  uni.previewImage({
+    urls: [file.url],
+    current: 0,
+    fail() {
+      if (onPreviewFail) {
+        onPreviewFail({
+          file
+        })
+      } else {
+        uni.showToast({ title: '预览图片失败', icon: 'none' })
+      }
+    }
+  })
+}
+
+/**
+ * 预览视频
+ * @param file
+ */
+function handlePreviewVieo(file: FileListItem) {
+  const { onPreviewFail } = props
+  // #ifdef MP-WEIXIN
+  uni.previewMedia({
+    current: 0,
+    sources: [
+      {
+        url: file.url,
+        type: 'video',
+        poster: file.thumb
+      }
+    ],
+    fail() {
+      if (onPreviewFail) {
+        onPreviewFail({
+          file
+        })
+      } else {
+        uni.showToast({ title: '预览视频失败', icon: 'none' })
+      }
+    }
+  })
+  // #endif
+  // #ifndef MP-WEIXIN
+  videoPreview.value?.open({ url: file.url, poster: file.thumb, title: file.name })
+  // #endif
+}
+
+/**
+ * 预览文件
+ * @param file
+ */
+function handlePreviewFile(file: FileListItem) {
+  uni.openDocument({
+    filePath: file.url,
+    showMenu: true
+  })
+}
+
+function onPreviewImage(file: FileListItem) {
+  const { beforePreview } = props
+  if (beforePreview) {
+    beforePreview({
+      file,
+      resolve: (isPass: boolean) => {
+        isPass && handlePreviewImage(file)
+      }
+    })
+  } else {
+    handlePreviewImage(file)
+  }
+}
+
+function onPreviewVideo(file: FileListItem) {
+  const { beforePreview } = props
+  if (beforePreview) {
+    beforePreview({
+      file,
+      resolve: (isPass: boolean) => {
+        isPass && handlePreviewVieo(file)
+      }
+    })
+  } else {
+    handlePreviewVieo(file)
+  }
+}
+
+function onPreviewFile(file: FileListItem) {
+  const { beforePreview } = props
+  if (beforePreview) {
+    beforePreview({
+      file,
+      resolve: (isPass: boolean) => {
+        isPass && handlePreviewFile(file)
+      }
+    })
+  } else {
+    handlePreviewFile(file)
+  }
+}
+
+function onPreview(file: FileListItem) {
+  if (isImage(file)) {
+    onPreviewImage(file)
+  } else if (isVideo(file)) {
+    onPreviewVideo(file)
+  } else {
+    onPreviewFile(file)
+  }
+}
+
+function isVideo(file: FileListItem) {
+  return (file.name && isVideoUrl(file.name)) || isVideoUrl(file.url)
+}
+
+function isImage(file: FileListItem) {
+  return (file.name && isImageUrl(file.name)) || isImageUrl(file.url)
+}
+
+function isAudio(file: FileListItem) {
+  return (file.name && isAudioUrl(file.name)) || isAudioUrl(file.url)
+}
+
+function isPdf(file: FileListItem) {
+  return (file.name && isPdfUrl(file.name)) || isPdfUrl(file.url)
+}
+
+function isDoc(file: FileListItem) {
+  return (file.name && isDocUrl(file.name)) || isDocUrl(file.url)
+}
+
+function getUploadImage(file: FileListItem) {
+  if (isPdf(file)) {
+    return imgs.pdf
+  } else if (isDoc(file)) {
+    return imgs.word
+  } else if (isAudio(file)) {
+    return imgs.audio
+  } else if (isVideo(file)) {
+    return imgs.video
+  } else if (isImage(file)) {
+    return imgs.pic
+  } else {
+    return imgs.other
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-file-list/types.ts

@@ -0,0 +1,54 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeStringProp } from '../common/props'
+
+export type FileListItem = {
+  [key: string]: any
+  // 文件名称
+  name?: string
+  // 文件地址
+  url: string
+}
+
+export type FileListType = 'card' | 'list'
+
+export type FileListBeforePreviewOption = {
+  file: FileListItem
+  resolve: (isPass: boolean) => void
+}
+export type FileListBeforePreview = (option: FileListBeforePreviewOption) => void
+
+export type FileListOnPreviewFailOption = {
+  file: FileListItem
+}
+export type FileListOnPreviewFail = (option: FileListOnPreviewFailOption) => void
+
+export const fileListProps = {
+  ...baseProps,
+
+  /**
+   * 文件列表
+   * 类型：array
+   * 默认值：[]
+   */
+  data: makeArrayProp<FileListItem>(),
+  /**
+   * 文件列表类型
+   * 类型：string
+   * 默认值：'card'
+   */
+  type: makeStringProp<FileListType>('list'),
+  /**
+   * 文件预览前的钩子，参数为预览的文件，若返回false或者返回Promise且被reject，则停止预览。
+   * 类型：function({file,resolve})
+   * 默认值：-
+   */
+  beforePreview: Function as PropType<FileListBeforePreview>,
+  /**
+   * 预览失败执行操作
+   * 类型：function({file})
+   * 默认值：-
+   */
+  onPreviewFail: Function as PropType<FileListOnPreviewFail>
+}
+
+export type CornerProps = ExtractPropTypes<typeof fileListProps>

package/components/oxy-list/index.scss

@@ -0,0 +1,5 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+@import './../oxy-virtual-scroll/index.scss';
+
+@include b(list) {}

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

@@ -0,0 +1,206 @@
+<template>
+  <view :class="['oxy-list', 'oxy-virtual-scroll', customClass]" :style="customStyle">
+    <!-- 滚动内容区域 -->
+    <scroll-view
+      v-if="data.length"
+      :style="{ height: height }"
+      class="oxy-virtual-scroll__view"
+      :scroll-y="true"
+      :scroll-x="scrollX"
+      :upper-threshold="upperThreshold"
+      :lower-threshold="lowerThreshold"
+      :scroll-top="scrollTop"
+      :scroll-left="scrollLeft"
+      :scroll-with-animation="scrollWithAnimation"
+      :enable-back-to-top="enableBackToTop"
+      :show-scrollbar="showScrollbar"
+      :refresher-enabled="refresherEnabled"
+      :refresher-threshold="refresherThreshold"
+      :refresher-default-style="refresherDefaultStyle"
+      :refresher-background="refresherBackground"
+      :refresher-triggered="triggered"
+      :enable-flex="enableFlex"
+      :scroll-anchoring="scrollAnchoring"
+      @scroll="handleScroll"
+      @scrolltoupper="onScrollToUpper"
+      @scrolltolower="onScrollToLower"
+      @refresherrefresh="onRefresh"
+      @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 v-for="(item, index) in virtualData" :key="index">
+            <slot name="item" :item="item" :index="startIndex + index"></slot>
+          </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>
+        </view>
+      </view>
+    </scroll-view>
+
+    <view v-else>
+      <oxy-status-tip image="content" :tip="emptyText" />
+    </view>
+
+    <!-- 回到顶部按钮 -->
+    <view v-if="showBackToTop && showBackTopBtn" class="oxy-virtual-scroll__back-top" @click="scrollToTop">
+      <oxy-icon name="backtop" color="#fff" size="20px"></oxy-icon>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-list',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, toRefs } from 'vue'
+import { type ListExpose, listProps } from './types'
+import type {
+  ScrollViewOnRefresherabortEvent,
+  ScrollViewOnRefresherrefreshEvent,
+  ScrollViewOnRefresherrestoreEvent,
+  ScrollViewOnScrollEvent
+} from '@uni-helper/uni-app-types/index'
+import { useVirtualScroll } from '../composables/useVirtualScroll'
+
+const props = defineProps(listProps)
+
+const emit = defineEmits(['scroll-to-lower', 'reload', 'scroll-to-upper', 'scroll', 'refresh', 'restore', 'abort'])
+
+const defaultscrollConfig = {
+  refresherEnabled: false,
+  refresherThreshold: 60,
+  scrollWithAnimation: false
+} as const
+
+// 解构props用于组合式函数
+const {
+  data,
+  virtual,
+  height,
+  itemHeight,
+  idKey,
+  showBackToTop,
+  backToTopThreshold,
+  scrollY,
+  scrollX,
+  upperThreshold,
+  lowerThreshold,
+  scrollLeft,
+  scrollWithAnimation,
+  enableBackToTop,
+  showScrollbar,
+  refresherEnabled,
+  refresherThreshold,
+  refresherDefaultStyle,
+  refresherBackground,
+  triggered,
+  enableFlex,
+  scrollAnchoring
+} = toRefs(props)
+
+// 使用虚拟滚动组合式函数
+const {
+  scrollTop,
+  showBackTopBtn,
+  virtualData,
+  startIndex,
+  virtualOffsetY,
+  totalHeight,
+  displayData,
+  initScrollData,
+  initScrollEngine,
+  updateVisibleData,
+  scrollToTop: virtualScrollToTop,
+  scrollToBottom: virtualScrollToBottom,
+  scrollToPosition: virtualScrollToPosition,
+  scrollToElement: virtualScrollToElement,
+  scrollToElementById: virtualScrollToElementById,
+  onScroll: handleVirtualScroll
+} = useVirtualScroll({
+  data,
+  virtual,
+  height,
+  itemHeight,
+  idKey,
+  backToTopThreshold
+})
+
+const onScrollToLower = async () => {
+  emit('scroll-to-lower')
+}
+const onScrollToUpper = async () => {
+  emit('scroll-to-upper')
+}
+const onReload = async () => {
+  emit('reload')
+}
+
+// 滚动事件处理
+const handleScroll = async (event: ScrollViewOnScrollEvent) => {
+  handleVirtualScroll(event.detail.scrollTop)
+  emit('scroll', event)
+}
+
+// 下拉刷新
+const onRefresh = (e: ScrollViewOnRefresherrefreshEvent) => {
+  emit('refresh', e)
+}
+
+// 下拉刷新被复位
+const onRestore = (e: ScrollViewOnRefresherrestoreEvent) => {
+  emit('restore', e)
+}
+
+// 下拉刷新被中止
+const onAbort = (e: ScrollViewOnRefresherabortEvent) => {
+  emit('abort', e)
+}
+
+// 滚动方法
+const scrollToTop = () => {
+  virtualScrollToTop()
+}
+const scrollToBottom = () => {
+  virtualScrollToBottom()
+}
+const scrollToPosition = (position: number | string) => {
+  virtualScrollToPosition(position)
+}
+const scrollToElement = (item: any) => {
+  virtualScrollToElement(item)
+}
+const scrollToElementById = (id: string | number) => {
+  virtualScrollToElementById(id)
+}
+
+defineExpose<ListExpose>({
+  scrollToTop,
+  scrollToBottom,
+  scrollToPosition,
+  scrollToElement,
+  scrollToElementById
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-list/types.ts

@@ -0,0 +1,38 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import { type LoadMoreState } from '../oxy-loadmore/types'
+import { type LoadingProps } from '../oxy-loading/types'
+import { virtualScrollProps } from '../oxy-virtual-scroll/types'
+
+export const listProps = {
+  ...virtualScrollProps,
+
+  loadmoreState: String as PropType<LoadMoreState>,
+
+  /**
+   * 加载提示文案
+   */
+  loadingText: String,
+  /**
+   * 全部加载完的提示文案
+   */
+  finishedText: String,
+  /**
+   * 加载失败的提示文案
+   */
+  errorText: String,
+  /**
+   * 加载中loading组件的属性
+   * 参考loading组件
+   */
+  loadingProps: Object as PropType<Partial<LoadingProps>>
+}
+export type ListExpose = {
+  scrollToTop: () => void
+  scrollToBottom: () => void
+  scrollToPosition: (position: number | string) => void
+  scrollToElement: (item: any) => void
+  scrollToElementById: (id: string | number) => void
+}
+export type ListProps = ExtractPropTypes<typeof listProps>
+export type ListInstance = ComponentPublicInstance<ListProps, ListExpose>

package/components/oxy-slider/index.scss

@@ -25,7 +25,7 @@
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
-  height: calc($-slider-handle-radius * 3);
+  // height: calc($-slider-handle-radius * 3);
 
   @include e(label-min, label-max) {
     font-size: $-slider-fs;
@@ -95,4 +95,4 @@
       color: $-slider-disabled-color;
     }
   }
-}
+}

package/components/oxy-swiper/index.scss

@@ -17,7 +17,6 @@
     padding: $-swiper-item-padding;
 
     @include m(slot) {
-      // 问题来自 https://github.com/dcloudio/uni-app/issues/4629，支付宝小程序不支持属性选择器
       /* #ifdef MP */
       :deep() {
         /* #ifdef MP-WEIXIN */
@@ -50,4 +49,4 @@
     color: $-swiper-item-text-color;
     font-size: $-swiper-item-text-fs;
   }
-}
+}

package/components/oxy-textarea/oxy-textarea.vue

@@ -179,10 +179,6 @@ const isRequired = computed(() => {
 
 // 当前文本域文字长度
 const currentLength = computed(() => {
-  /**
-   * 使用Array.from处理多码元字符以获取正确的长度
-   * @link https://github.com/Moonofweisheng/oxy-uni-ui/issues/933
-   */
   return Array.from(String(formatValue(props.modelValue))).length
 })
 

package/components/oxy-tree/components/tree-node-content.vue

@@ -0,0 +1,72 @@
+<template>
+  <view class="oxy-tree-node-content" :style="getNodeStyle()" :class="computedClass" @click="handleNodeClick">
+    <oxy-icon @click.stop="toggleExpand" name="fill-arrow-down" class="oxy-tree-node-icon" size="22px"></oxy-icon>
+    <oxy-checkbox
+      v-if="treeProps?.showCheckbox"
+      :modelValue="node.checked"
+      :disabled="node.disabled"
+      :indeterminate="node.immediate"
+      shape="square"
+    ></oxy-checkbox>
+    <view class="oxy-tree-node">
+      <slot :node="node" :data="node.data">
+        {{ node.label }}
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-tree-node-content'
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, toRefs, type Ref } from 'vue'
+import type { TextProps, TreeNode } from '../types'
+import { inject } from 'vue'
+// 获取组件的 props 和 emit 函数
+const emit = defineEmits<{
+  (e: 'click', node: TreeNode): void
+  (e: 'toggle-expand', node: TreeNode, flag: boolean): void
+  (e: 'toggle-checked', node: TreeNode, flag: boolean, isClick: boolean): void
+}>()
+
+const props = defineProps<{
+  node: TreeNode
+}>()
+const treeProps = inject<TextProps>('treeProps')
+const currentNode = inject<Ref<TreeNode | undefined>>('currentNode')
+
+function getNodeStyle() {
+  return {
+    paddingLeft: `${(props.node.level - 1) * (treeProps?.indent || 16)}px`
+  }
+}
+
+function toggleExpand() {
+  emit('toggle-expand', props.node, !props.node.expanded)
+}
+
+const computedClass = computed(() => {
+  const currentValue = currentNode?.value
+  return {
+    expanded: props.node.expanded,
+    checked: props.node.checked,
+    'is-leaf': props.node.isLeaf,
+    immediate: props.node.immediate,
+    'is-current': currentValue === props.node,
+    'is-disabled': props.node.disabled
+  }
+})
+
+const handleNodeClick = () => {
+  emit('click', props.node)
+  emit('toggle-checked', props.node, !props.node.checked, true)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../index.scss';
+</style>