oxy-uni-ui 1.0.1 → 1.1.0

package/components/oxy-drop-menu/index.scss

@@ -4,6 +4,7 @@
 .oxy-theme-dark {
   @include b(drop-menu) {
     color: $-dark-color;
+
     @include e(list) {
       background-color: $-dark-background2;
     }
@@ -27,6 +28,7 @@
     text-align: center;
     background-color: #fff;
   }
+
   @include e(item) {
     flex: 1;
     min-width: 0;
@@ -40,11 +42,13 @@
       .oxy-drop-menu__item-title::after {
         opacity: 1;
       }
+
       :deep(.oxy-drop-menu__arrow) {
         transform: rotate(-180deg);
         transform-origin: center center;
       }
     }
+
     @include when(disabled) {
       color: $-drop-menu-disabled-color;
     }

package/components/oxy-drop-menu/oxy-drop-menu.vue

@@ -18,7 +18,7 @@
           v-for="(child, index) in children"
           :key="index"
           @click="toggle(child)"
-          :class="`oxy-drop-menu__item ${child.disabled ? 'is-disabled' : ''} ${child.$.exposed!.getShowPop() ? 'is-active' : ''}`"
+          :class="`oxy-drop-menu__item ${child.disabled ? 'is-disabled' : ''} ${child.$.exposed?.getShowPop() ? 'is-active' : ''}`"
         >
           <view class="oxy-drop-menu__item-title">
             <view class="oxy-drop-menu__item-title-text">{{ getDisplayTitle(child) }}</view>
@@ -60,6 +60,8 @@ const windowHeight = ref<number>(0)
 const modalStyle = computed(() => {
   return props.direction === 'down'
     ? `top: calc(var(--window-top) + ${offset.value}px); bottom: 0;`
+    : props.direction === 'bottom'
+    ? 'top: var(--window-top); bottom: 0;'
     : `top: 0; bottom: calc(var(--window-bottom) + ${offset.value}px)`
 })
 
@@ -95,7 +97,7 @@ linkChildren({ props, fold, offset })
 watch(
   () => props.direction,
   (newValue) => {
-    if (!['up', 'down'].includes(newValue)) {
+    if (!['up', 'down', 'bottom'].includes(newValue)) {
       // eslint-disable-next-line quotes
       console.error("[Oxy ui] warning(oxy-drop-menu): direction must be 'up' or 'down'")
     }
@@ -142,7 +144,7 @@ function fold(child: any) {
   getRect(`#${dropMenuId.value}`, false, proxy).then((rect) => {
     if (!rect) return
     const { top, bottom } = rect
-    if (props.direction === 'down') {
+    if (props.direction === 'down' || props.direction === 'bottom') {
       offset.value = Number(bottom)
     } else {
       offset.value = windowHeight.value - Number(top)

package/components/oxy-drop-menu/types.ts

@@ -1,7 +1,7 @@
 import { type ExtractPropTypes, type InjectionKey, type Ref } from 'vue'
 import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
 
-export type DropDirection = 'up' | 'down'
+export type DropDirection = 'up' | 'down' | 'bottom'
 
 export type DropMenuProvide = {
   props: Partial<DropMenuProps>

package/components/oxy-drop-menu-item/index.scss

@@ -20,8 +20,8 @@
   color: $-drop-menu-item-color;
   width: 100%;
   z-index: 101;
-  
-  @include e(popup){
+
+  @include e(popup) {
     position: absolute;
     max-height: 80%;
   }
@@ -40,7 +40,7 @@
     }
   }
 
-  @include e(title){
+  @include e(title) {
     display: block;
   }
 
@@ -51,7 +51,7 @@
     margin-left: 2px;
   }
 
-  @include edeep(icon){
+  @include edeep(icon) {
     display: block;
     font-size: $-drop-menu-option-check-size;
   }

package/components/oxy-drop-menu-item/oxy-drop-menu-item.vue

@@ -91,6 +91,8 @@ const positionStyle = computed(() => {
     style =
       dropMenu.props.direction === 'down'
         ? `top: calc(var(--window-top) + ${dropMenu.offset.value}px); bottom: 0;`
+        : dropMenu.props.direction === 'bottom'
+        ? 'top: calc(var(--window-top); bottom: 0;'
         : `top: 0; bottom: calc(var(--window-bottom) + ${dropMenu.offset.value}px)`
   } else {
     style = ''

package/components/oxy-file-list/index.scss

@@ -0,0 +1,83 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(file-list) {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -8px;
+  @include e(item) {
+    position: relative;
+    width: calc(33.33% - 16px);
+    height: $-file-list-height;
+    margin: 0 8px 32px;
+  }
+  @include e(content) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    border: 1px solid $-color-border;
+    border-radius: 8px;
+  }
+  @include e(picture) {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+  }
+  @include e(icon) {
+    width: 32px;
+    height: 32px;
+  }
+  @include e(name) {
+    display: block;
+    width: 100%;
+    font-size: $-upload-file-fs;
+    color: $-upload-file-color;
+    padding: 0 4px;
+    text-align: center;
+    margin-top: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  :deep(.oxy-tooltip) {
+    width: 100%;
+    .oxy-tooltip__inner {
+      width: fit-content;
+      white-space: pre-wrap;
+      word-break: break-all;
+    }
+  }
+  &.oxy-file-list__list {
+    display: block;
+    margin: 0;
+    .oxy-file-list__list--item {
+      width: 100%;
+      background: #f8f9ff;
+      padding: 8px 12px;
+      border-radius: 4px;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .oxy-file-list__icon {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+      }
+      .oxy-file-list__name {
+        flex: 1;
+        text-align: left;
+        margin: 0;
+        padding: 0;
+      }
+      & + .oxy-file-list__list--item {
+        margin-top: 8px;
+      }
+    }
+  }
+}

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,4 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+@include b(list) {
+}

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

@@ -0,0 +1,125 @@
+<template>
+  <view :class="['oxy-list', customClass]" :style="customStyle">
+    <oxy-virtual-scroll
+      ref="virtualScrollRef"
+      :is-virtual="virtual"
+      :data="data"
+      :height="height"
+      :item-height="itemHeight"
+      :id-key="idKey"
+      :show-back-to-top="showBackToTop"
+      :back-to-top-threshold="backToTopThreshold"
+      :refresher-triggered="triggered"
+      v-bind="{ ...defaultscrollConfig, ...scrollConfig }"
+      @scroll-to-upper="onScrollToUpper"
+      @scroll-to-lower="onScrollToLower"
+      @scroll="onScroll"
+      @refresherrefresh="onRefresh"
+      @refresherrestore="onRestore"
+      @refresherabort="onAbort"
+    >
+      <template #item="{ item }">
+        <slot name="item" :item="item"></slot>
+      </template>
+      <template #bottom>
+        <oxy-loadmore
+          v-if="loadmoreState"
+          :state="loadmoreState"
+          :loading-text="loadingText"
+          :finished-text="finishedText"
+          :error-text="errorText"
+          :loading-props="loadingProps"
+          @reload="onReload"
+        />
+      </template>
+    </oxy-virtual-scroll>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-list',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { type ListExpose, listProps } from './types'
+import type {
+  ScrollViewOnRefresherabortEvent,
+  ScrollViewOnRefresherrefreshEvent,
+  ScrollViewOnRefresherrestoreEvent,
+  ScrollViewOnScrollEvent
+} from '@uni-helper/uni-app-types/index'
+import type { VirtualScrollInstance } from '../oxy-virtual-scroll/types'
+
+const props = defineProps(listProps)
+
+const emit = defineEmits(['scroll-to-lower', 'reload', 'scroll-to-upper', 'scroll', 'refresh', 'restore', 'abort'])
+const virtualScrollRef = ref<VirtualScrollInstance | null>(null)
+
+const defaultscrollConfig = {
+  refresherEnabled: true,
+  refresherThreshold: 60,
+  scrollWithAnimation: false
+}
+
+const onScrollToLower = async () => {
+  emit('scroll-to-lower')
+}
+const onScrollToUpper = async () => {
+  emit('scroll-to-upper')
+}
+const onReload = async () => {
+  emit('reload')
+}
+const onScroll = async (event: ScrollViewOnScrollEvent) => {
+  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 = () => {
+  virtualScrollRef.value?.scrollToTop()
+}
+const scrollToBottom = () => {
+  virtualScrollRef.value?.scrollToBottom()
+}
+const scrollToPosition = (position: number | string) => {
+  virtualScrollRef.value?.scrollToPosition(position)
+}
+const scrollToElement = (item: any) => {
+  virtualScrollRef.value?.scrollToElement(item)
+}
+const scrollToElementById = (id: string | number) => {
+  virtualScrollRef.value?.scrollToElementById(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,50 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { makeBooleanProp } 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>>,
+  triggered: makeBooleanProp(false),
+  scrollConfig: {
+    type: Object as PropType<ScrollConfig>,
+    default: () => ({})
+  }
+}
+export type ScrollConfig = {
+  refresherEnabled: boolean
+  refresherThreshold: number
+  refresherBackground: string
+  animation: boolean
+  [key: string]: any
+}
+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
 })