papayaui 0.2.13 → 0.2.15

package/components/calendar/calendar-wrapper.vue

@@ -151,9 +151,13 @@ const scrollToMonth = async () => {
     scrollTop.value = 0
     await nextTick()
   }
-  const start = Array.isArray(defaultDate.value) ? defaultDate.value[0] : defaultDate.value
+  const first = Array.isArray(defaultDate.value) ? defaultDate.value[0] : defaultDate.value
+  let firstDate = dayjs(first)
+  if (!firstDate.isValid()) {
+    firstDate = months.value[0].date
+  }
   months.value.forEach((item, index) => {
-    if (item.date.diff(dayjs(start).startOf('month')) === 0) {
+    if (item.date.diff(firstDate.startOf('month')) === 0) {
       monthCurrent.value = index
       scrollTop.value = monthTops.value[index]
     }

package/components/cascader/cascader.vue

@@ -47,7 +47,7 @@
         <view v-if="loading" :class="ns.e('loading')">
           <loadmore :status="LoadStatusEnum.LOADING" />
         </view>
-        <view v-if="!currentData.length && !loading" :class="ns.e('empty')">无数据</view>
+        <view v-if="!currentData.length && !loading" :class="ns.e('empty')">{{ emptyText }}</view>
         <SafeBottom v-if="safeAreaInsetBottom && !localState.hasConfirm" />
       </scroll-view>
       <SearchView
@@ -56,6 +56,7 @@
         :options="treeData"
         :field-names="_fieldNames"
         :search-text="searchText"
+        :empty-text="emptyText"
         :lazy-search="lazySearch"
         :is-selected="isSelected"
         :safe-area-inset-bottom="safeAreaInsetBottom && !localState.hasConfirm"

package/components/cascader/props.ts

@@ -81,6 +81,13 @@ export const cascaderProps = {
     type: String,
     default: '重置',
   },
+  /**
+   * 数据为空时的提示文案
+   */
+  emptyText: {
+    type: String,
+    default: '无数据',
+  },
   /**
    * 确定后是否重置数据
    */
@@ -130,6 +137,10 @@ export const cascaderSearchViewProps = {
     type: String,
     required: true,
   },
+  emptyText: {
+    type: String,
+    required: true,
+  },
   lazySearch: Function as PropType<
     (searchText: string) => CascaderOption[] | Promise<CascaderOption[]>
   >,

package/components/cascader/search-view.vue

@@ -10,7 +10,7 @@
     <view v-if="loading" :class="ns.e('loading')">
       <loadmore :status="LoadStatusEnum.LOADING" />
     </view>
-    <view v-if="!searchData.length && !loading" :class="ns.e('empty')">无数据</view>
+    <view v-if="!searchData.length && !loading" :class="ns.e('empty')">{{ emptyText }}</view>
     <SafeBottom v-if="safeAreaInsetBottom" />
   </scroll-view>
 </template>

package/components/picker-popup/picker-popup.vue

@@ -44,7 +44,7 @@
         <LoadMore
           v-if="!filterOptions.length || !!pagination"
           :status="loadStatus"
-          :config="{ nomore: isEmpty ? '无数据' : '没有更多了' }"
+          :config="{ nomore: isEmpty ? emptyText : '没有更多了' }"
           :full-page="isEmpty"
           :show-text="!onlyOnePage"
           @next="onScrollNext"

package/components/picker-popup/props.ts

@@ -88,6 +88,13 @@ export const pickerPopupProps = {
     type: String,
     default: '确定',
   },
+  /**
+   * 数据为空时的提示文案
+   */
+  emptyText: {
+    type: String,
+    default: '无数据',
+  },
   /**
    * 确定后是否重置数据
    */

package/components/popup/popup.vue

@@ -10,7 +10,7 @@
     :show="visible"
     :duration="duration"
     :mode="animateMode"
-    :custom-class="`${ns.b()} ${customClass}`"
+    :custom-class="`${ns.b()} ${customClass ?? ''}`"
     :custom-style="transitionStyle"
     @click="onContentClick"
     @before-enter="onBeforeEnter"

package/components/transition/transition.vue

@@ -113,7 +113,128 @@ export default defineComponent({
   },
 })
 </script>
-<script module="wxs" lang="wxs" src="./transition.wxs"></script>
+<script module="wxs" lang="wxs">
+function getClassNames(name) {
+  return {
+    enter: name + '-enter ' + name + '-enter-active',
+    'enter-to': name + '-enter-to ' + name + '-enter-active',
+    leave: name + '-leave ' + name + '-leave-active',
+    'leave-to': name + '-leave-to ' + name + '-leave-active',
+  }
+}
+
+function onOptionsChange(newValue, _oldValue, _ownInstance, instance) {
+  if (typeof newValue === 'undefined') return
+  var state = instance.getState()
+  state.mainClass = newValue.mainClass
+  state.prefix = newValue.prefix
+  state.mode = newValue.mode
+  state.duration = newValue.duration
+}
+
+function onShowChange(newValue, _oldValue, ownInstance, instance) {
+  if (typeof newValue === 'undefined') return
+  var state = instance.getState()
+  var classNames = getClassNames(state.prefix + '-' + state.mode)
+  classNames.hide = state.mainClass + '-hide'
+
+  if (newValue) {
+    enter(ownInstance, instance, classNames)
+  } else {
+    leave(ownInstance, instance, classNames)
+  }
+}
+
+function compatible(instance) {
+  // #ifdef H5
+  instance.setStyle = function (style) {
+    Object.keys(style).forEach((key) => {
+      this.$el.style[key] = style[key]
+    })
+  }
+  instance.addClass = function (className) {
+    this.$el.classList.add(...className.split(' '))
+  }
+  instance.removeClass = function (className) {
+    this.$el.classList.remove(...className.split(' '))
+  }
+  // #endif
+}
+
+function enter(ownInstance, instance, classNames) {
+  compatible(instance)
+  var state = instance.getState()
+  var clearClassNames = [classNames.hide, classNames.leave, classNames['leave-to']]
+  clearClassNames.forEach(function (className) {
+    instance.removeClass(className)
+  })
+  // 进入前
+  state._status = 'enter'
+  ownInstance.callMethod('beforeEnter')
+  instance.setStyle({
+    'transition-duration': '0ms',
+  })
+  // 进入动画
+  ownInstance.callMethod('enter')
+  instance.addClass(classNames.enter)
+
+  instance.requestAnimationFrame(function () {
+    instance.removeClass(classNames.enter)
+    instance.setStyle({
+      'transition-duration': state.duration + 'ms',
+    })
+    // 进入动画中
+    instance.addClass(classNames['enter-to'])
+    state.transitionEnded = false
+
+    instance.setTimeout(function () {
+      if (state._status !== 'enter') return
+      // 进入动画完成
+      instance.removeClass(classNames['enter-to'])
+      ownInstance.callMethod('afterEnter')
+    }, state.duration)
+  })
+}
+
+function leave(ownInstance, instance, classNames) {
+  var state = instance.getState()
+  var clearClassNames = [classNames.enter, classNames['enter-to']]
+  clearClassNames.forEach(function (className) {
+    instance.removeClass(className)
+  })
+  // 离开前
+  state._status = 'leave'
+  ownInstance.callMethod('beforeLeave')
+
+  instance.requestAnimationFrame(function () {
+    // 离开动画
+    ownInstance.callMethod('leave')
+    instance.addClass(classNames.leave)
+
+    instance.requestAnimationFrame(function () {
+      instance.removeClass(classNames.leave)
+      // 离开动画中
+      instance.addClass(classNames['leave-to'])
+      state.transitionEnded = false
+
+      instance.setTimeout(function () {
+        if (state._status !== 'leave') return
+        if (state.transitionEnded) return
+        state.transitionEnded = true
+        // 离开动画完成
+        instance.removeClass(classNames['leave-to'])
+        instance.addClass(classNames.hide)
+        ownInstance.callMethod('afterLeave')
+      }, state.duration)
+    })
+  })
+}
+
+module.exports = {
+  onOptionsChange: onOptionsChange,
+  onShowChange: onShowChange,
+}
+</script>
 
 <style lang="scss">
 @import './transition.scss';

package/components/uploader/demo.vue

@@ -27,6 +27,10 @@
     <Demo7 />
   </DocDemoBlock>
 
+  <DocDemoBlock title="其他文件类型" card>
+    <Demo8 />
+  </DocDemoBlock>
+
   <pa-safe-bottom />
 </template>
 
@@ -38,6 +42,7 @@ import Demo4 from '../../demos/uploader/demo-4.vue'
 import Demo5 from '../../demos/uploader/demo-5.vue'
 import Demo6 from '../../demos/uploader/demo-6.vue'
 import Demo7 from '../../demos/uploader/demo-7.vue'
+import Demo8 from '../../demos/uploader/demo-8.vue'
 import DocDemoBlock from '../../doc/doc-demo-block.vue'
 </script>
 

package/components/uploader/props.ts

@@ -1,10 +1,12 @@
 import type { ExtractPropTypes, PropType } from 'vue'
 import { isArray, isNumber, isObject } from '../../utils'
 
+export type FileMediaType = 'image' | 'video'
+export type FileOtherType = 'word' | 'excel' | 'ppt' | 'pdf' | 'markdown' | 'zip' | 'file'
 export type FileItem = {
   name?: string
   url: string
-  type?: 'image' | 'video'
+  type?: FileMediaType | FileOtherType
   status?: 'ready' | 'uploading' | 'success' | 'error'
   deletable?: boolean
   thumbUrl?: string

package/components/uploader/uploader.scss

@@ -24,6 +24,43 @@
       overflow: hidden;
     }
 
+    &-type-word,
+    &-type-excel,
+    &-type-ppt,
+    &-type-pdf,
+    &-type-markdown,
+    &-type-zip,
+    &-type-file {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background-color: #f7f8fa;
+      font-size: _var(uploader-preview-file-size, 36px);
+      color: _var(uploader-preview-file-color, _var(color-black-3));
+      text {
+        font-size: _var(uploader-preview-file-text-size, 14px);
+      }
+    }
+    &-type-word {
+      color: #285898;
+    }
+    &-type-excel {
+      color: #15723b;
+    }
+    &-type-ppt {
+      color: #cd3f2b;
+    }
+    &-type-pdf {
+      color: #b40009;
+    }
+    &-type-markdown {
+      color: #6188bd;
+    }
+    &-type-zip {
+      color: #f2bb3c;
+    }
+
     &-delete {
       position: absolute;
       top: 0;

package/components/uploader/uploader.vue

@@ -4,14 +4,22 @@
       <slot v-if="$slots.default" />
       <template v-else>
         <view v-for="(file, index) in fileList" :key="index" :class="ns.e('preview')">
-          <view :class="ns.e('preview-image')" :style="sizeStyle">
+          <view
+            :class="[ns.e('preview-image'), ns.e(`preview-type-${file.type ?? 'image'}`)]"
+            :style="sizeStyle"
+          >
             <ImageComponent
+              v-if="!file.type || file.type === 'image' || file.type === 'video'"
               :src="file.thumbUrl ?? file.url"
               width="100%"
               height="100%"
               mode="aspectFill"
               @click="onPreview(file, index)"
             />
+            <template v-else>
+              <IconComponent :name="(file.type !== 'file' ? `file-` : '') + file.type" />
+              <text>{{ file.type }}</text>
+            </template>
           </view>
           <view
             v-if="deletable && file.deletable !== false"
@@ -42,7 +50,7 @@ import useNamespace from '../../core/useNamespace'
 import { getUnitValue } from '../../utils'
 import IconComponent from '../icon/icon.vue'
 import ImageComponent from '../image/image.vue'
-import type { FileItem } from './props'
+import type { FileItem, FileMediaType } from './props'
 import { uploaderProps, uploaderEmits } from './props'
 
 const ns = useNamespace('uploader')
@@ -129,26 +137,27 @@ const afterRead = (fileList: FileItem[]) => {
 }
 
 const onPreview = (file: FileItem, index: number) => {
-  if (!props.previewFullImage) return
-  // #ifdef MP
-  uni.previewMedia({
-    sources: props.fileList,
-    current: index,
-    fail: () => {
-      // 前面的API可能存在兼容问题，失败时使用降级方法
-      uni.previewImage({
-        urls: props.fileList.map((file) => file.url),
-        current: index,
-      })
-    },
-  })
-  // #endif
-  // #ifndef MP
-  uni.previewImage({
-    urls: props.fileList.map((file) => file.url),
-    current: index,
-  })
-  // #endif
+  if (props.previewFullImage && ['image', 'video'].includes(file.type ?? 'image')) {
+    // #ifdef MP
+    uni.previewMedia({
+      sources: props.fileList.map((file) => ({ url: file.url, type: file.type as FileMediaType })),
+      current: index,
+      fail: () => {
+        // 前面的API可能存在兼容问题，失败时使用降级方法
+        uni.previewImage({
+          urls: props.fileList.map((file) => file.url),
+          current: index,
+        })
+      },
+    })
+    // #endif
+    // #ifndef MP
+    uni.previewImage({
+      urls: props.fileList.map((file) => file.url),
+      current: index,
+    })
+    // #endif
+  }
   emit('click-preview', file, index)
 }
 

package/demos/uploader/demo-8.vue

@@ -0,0 +1,39 @@
+<template>
+  <pa-uploader v-model:file-list="fileList" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { FileItem } from '../..'
+
+const fileList = ref<FileItem[]>([
+  {
+    url: '',
+    type: 'word',
+  },
+  {
+    url: '',
+    type: 'excel',
+  },
+  {
+    url: '',
+    type: 'ppt',
+  },
+  {
+    url: '',
+    type: 'pdf',
+  },
+  {
+    url: '',
+    type: 'markdown',
+  },
+  {
+    url: '',
+    type: 'zip',
+  },
+  {
+    url: '',
+    type: 'file',
+  },
+])
+</script>

package/fonts/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "pa-icon"; /* Project id 3668565 */
-  src: url('iconfont.woff2?t=1692684761658') format('woff2'),
-       url('iconfont.woff?t=1692684761658') format('woff'),
-       url('iconfont.ttf?t=1692684761658') format('truetype');
+  src: url('iconfont.woff2?t=1715567017689') format('woff2'),
+       url('iconfont.woff?t=1715567017689') format('woff'),
+       url('iconfont.ttf?t=1715567017689') format('truetype');
 }
 
 .pa-icon {
@@ -13,6 +13,38 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.pa-icon-refresh:before {
+  content: "\e6a4";
+}
+
+.pa-icon-file-excel:before {
+  content: "\e7b8";
+}
+
+.pa-icon-file-pdf:before {
+  content: "\e7ba";
+}
+
+.pa-icon-file-markdown:before {
+  content: "\e7bb";
+}
+
+.pa-icon-file-ppt:before {
+  content: "\e7bc";
+}
+
+.pa-icon-file-word:before {
+  content: "\e7bd";
+}
+
+.pa-icon-file:before {
+  content: "\e7be";
+}
+
+.pa-icon-file-zip:before {
+  content: "\e7bf";
+}
+
 .pa-icon-order:before {
   content: "\e66d";
 }