@neatui/vue 2.10.0 → 2.12.0

package/src/components/form/Textarea@v2.vue

@@ -0,0 +1,275 @@
+<template>
+  <div
+    :ui-form="`${theme} sz:${sz} ${state.error.co} type:textarea ${block ? ' :block' : ''} ${disabled ? 'disabled' : ''} ${readonly ? 'readonly' : ''}`"
+    @click="emits('click', $event)"
+  >
+    <div :ui-form-tips="state.error.ontips">{{ state.error.tips }}</div>
+    <div ui-form-prefix="">
+      <template v-for="(item, idx) in prefix" :key="idx">
+        <div v-if="isObject(item)" v-bind="item.attrs" v-on="event(item, props.modelValue)">
+          <div v-html="isFunction(item.value) ? item.value(props.modelValue) : item.value"></div>
+        </div>
+        <div v-else v-html="isFunction(item) ? item(props.modelValue) : item"></div>
+      </template>
+      <slot name="prefix"></slot>
+    </div>
+    <slot>
+      <textarea
+        ref="el"
+        :title="props.modelValue"
+        :value="props.modelValue"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :rows="rows"
+        ui-scroll=":y"
+        dir="auto"
+        @focus="emits('focus', $event, state)"
+        @input="input($event)"
+        @change="emits('change', $event, state)"
+        @blur="blur($event)"
+      ></textarea>
+    </slot>
+    <div ui-form-suffix="">
+      <i ui-form-clean="" v-if="clearable && props.modelValue && !readonly && !disabled" @click.stop="clear"></i>
+      <slot name="suffix"></slot>
+      <template v-for="(item, idx) in suffix" :key="idx">
+        <div v-if="isObject(item)" v-bind="item.attrs" v-on="event(item, props.modelValue)">
+          <div v-html="isFunction(item.value) ? item.value(props.modelValue) : item.value"></div>
+        </div>
+        <div v-else v-html="isFunction(item) ? item(props.modelValue) : item"></div>
+      </template>
+    </div>
+    <i v-if="verify && state.interacted" :ui-form-verify="state.error.verify"></i>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, watch, ref, nextTick, onMounted } from 'vue';
+  import { isObject, isFunction } from '@fekit/utils';
+
+  const emits = defineEmits(['update:modelValue', 'click', 'blur', 'focus', 'change', 'input', 'clear']);
+
+  /**
+   * 入参说明
+   *
+   * modelValue     值
+   * theme          主题
+   * sz             尺寸
+   * co             颜色
+   * block          撑满
+   * ready          准备就绪
+   * tips           提示文案
+   * placeholder    内容占位
+   * maxlength      最大长度
+   * minlength      最小长度
+   * disabled       是否禁用
+   * readonly       是否只读
+   * clearable      是否显示清除按钮
+   * rules          校验规则
+   * verify         是否是示校验图标 2=tips 3=text 4=icon 5=tips+text 6=text+icon 7=text+icon
+   * prefix         前缀内容
+   * suffix         后缀内容
+   * interacted     用户是否交互
+   * autoHeight     是否自动调整高度
+   * rows           初始行数
+   */
+
+  // 类型
+  interface Props {
+    modelValue?: string | number;
+    placeholder?: string;
+    rules?: Array<object>;
+    theme?: string;
+    sz?: '' | 'xs' | 's' | 'm' | 'l' | 'xl';
+    co?: string;
+    block?: boolean;
+    ready?: boolean;
+    tips?: string;
+    maxlength?: null | number;
+    minlength?: null | number;
+    disabled?: boolean;
+    readonly?: boolean;
+    clearable?: boolean;
+    verify?: boolean;
+    prefix?: Array<any>;
+    suffix?: Array<any>;
+    interacted?: boolean;
+    autoHeight?: boolean;
+    rows?: number;
+  }
+  const props: any = withDefaults(defineProps<Props>(), {
+    modelValue: '',
+    placeholder: '',
+    rules: () => [],
+    theme: '@a',
+    sz: '',
+    co: '',
+    block: true,
+    ready: false,
+    tips: '',
+    maxlength: null,
+    minlength: null,
+    disabled: false,
+    readonly: false,
+    clearable: true,
+    verify: false,
+    prefix: () => [],
+    suffix: () => [],
+    interacted: false,
+    // textarea 特有属性默认值
+    autoHeight: false,
+    rows: 3,
+  });
+
+  const state: any = reactive({
+    // 用户是否交互
+    interacted: false,
+    // 值
+    value: props.modelValue,
+    // 错误
+    error: {},
+  });
+
+  // textarea 元素引用
+  const el: any = ref(null);
+
+  // 自动高度功能
+  const fAutoHeight = () => {
+    nextTick(() => {
+      if (props.autoHeight && el.value) {
+        el.value.style.height = 'auto';
+        el.value.style.height = el.value.scrollHeight + 1 + 'px';
+      }
+    });
+  };
+
+  // 外部传入交互标识，主要用于外部没有输入但点击了提交
+  watch(
+    () => props.interacted,
+    (interacted: any) => {
+      if (interacted) {
+        state.interacted = interacted;
+      }
+    },
+    { deep: true, immediate: true },
+  );
+
+  // 校验
+  watch(
+    [() => state.interacted, () => props.modelValue],
+    async () => {
+      if (state.interacted) {
+        // 提示文案
+        let tips = '';
+        // 错误类型
+        let type = '';
+        // 验证结果
+        let verify = '';
+
+        if (props.modelValue) {
+          // 有值
+          let hasError = false;
+          // 遍历校验规则
+          for (const rule of props.rules) {
+            if (rule && rule.validator) {
+              const yes = !(await rule.validator(props.modelValue));
+              if (yes) {
+                tips = rule.msg;
+                type = rule.type;
+                hasError = true;
+                break;
+              }
+            }
+          }
+          verify = hasError ? 'no' : 'ok';
+        } else {
+          // 无值
+          let hasError = false;
+          // 遍历校验规则
+          for (const rule of props.rules) {
+            if (rule) {
+              tips = rule.msg;
+              type = rule.type;
+              if (rule.required) {
+                hasError = true;
+                break;
+              }
+            }
+          }
+          verify = hasError ? 'no' : '';
+        }
+        if (verify !== 'no' && props.tips) {
+          tips = props.tips;
+        }
+        // 是否显示提示
+        const ontips = (verify === 'no' && tips) || props.tips ? 'show' : '';
+        // 状态颜色
+        const co = verify === 'no' ? 'co:' + type : props.co ? 'co:' + props.co : '';
+        state.error = { tips, ontips, verify, co };
+      } else {
+        state.error = { tips: props.tips, ontips: props.tips ? 'show' : '', verify: '', co: '' };
+      }
+    },
+    { deep: true, immediate: true },
+  );
+
+  // 清空
+  function clear() {
+    emits('update:modelValue', null);
+    emits('clear');
+  }
+  // 输入
+  const input = (e: any) => {
+    // 用户交互
+    if (!state.interacted) {
+      setTimeout(() => {
+        state.interacted = true;
+      }, 50);
+    }
+
+    // 长度限制
+    const value = e?.target?.value || '';
+    if (props.maxlength && value.length > props.maxlength) {
+      e.target.value = props.modelValue;
+      return false;
+    }
+    // 输入事件
+    emits('input', e, state);
+    emits('update:modelValue', value || null);
+
+    // 自动高度
+    fAutoHeight();
+  };
+  // 失焦
+  const blur = (e: any) => {
+    if (!state.interacted) {
+      setTimeout(() => {
+        state.interacted = true;
+      }, 50);
+    }
+    emits('blur', e, state);
+  };
+
+  // 事件处理
+  const event: any = (item: any, data: any): object => {
+    const _event: any = {};
+    if (isObject(item.event)) {
+      for (const key in item.event) {
+        const fun = item.event[key];
+        if (isFunction(fun)) {
+          _event[key] = (...args: any) => {
+            return fun({ data }, ...args);
+          };
+        }
+      }
+    }
+    return { ..._event };
+  };
+
+  // 组件挂载后初始化自动高度
+  onMounted(() => {
+    // 自动高度
+    fAutoHeight();
+  });
+</script>

package/src/components/form/TimeView.vue

@@ -19,8 +19,8 @@
             <div
               ui-flex="col cm"
               class="r-sm b-solid bk-none b-xs"
-              :class="`${item.isToday ? 'bk-main-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
-                state.selected && state.selected === item.date ? 'active bg-main-ls co-fore' : 'hover-bg-weak'
+              :class="`${item.isToday ? 'bk-main-o-ls' : item.isLastMonth || item.isNextMonth ? 'co-note' : item.isHoliday ? 'co-risk' : ''} ${
+                state.selected && state.selected === item.date ? 'active bg-main-o-ls co-fore' : 'hover-bg-weak'
               }`"
             >
               <span>{{ item.day }}</span>
@@ -107,40 +107,40 @@
     // 提示文案
     tips: {
       type: String,
-      default: ''
+      default: '',
     },
     // 提示文案
     placeholder: {
       type: String,
-      default: ''
+      default: '',
     },
     // 格式
     format: {
       type: String,
-      default: ''
+      default: '',
     },
     // 值
     value: {
       type: [String, Number],
-      default: ''
+      default: '',
     },
     // 值
     modelValue: { type: [String, Number], default: '' },
     // 节假日
     holiday: {
       type: Object,
-      default: () => ({})
+      default: () => ({}),
     },
     // 校验规则
     rules: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     // 是否是示校验图标
     verify: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   });
 
   // 内部数据
@@ -185,7 +185,7 @@
         calendar.unshift({
           date: `${last_y}-${numfill(last_m)}-${prevdays}`,
           day: prevdays,
-          isLastMonth: 1
+          isLastMonth: 1,
         });
         prevdays = prevdays - 1;
       }
@@ -196,7 +196,7 @@
           day: _i,
           isToday: curr_y === y && curr_m === m && curr_d === i,
           isHoliday: props.holiday[`${y}-${numfill(m)}-${_i}`]?.name ? 1 : 0,
-          holiday: props.holiday[`${y}-${numfill(m)}-${_i}`]?.name
+          holiday: props.holiday[`${y}-${numfill(m)}-${_i}`]?.name,
         });
       }
       for (let i = 1; calendar.length < 42; i++) {
@@ -204,14 +204,14 @@
         calendar.push({
           date: `${next_y}-${numfill(next_m)}-${_i}`,
           day: _i,
-          isNextMonth: 1
+          isNextMonth: 1,
         });
       }
       return { days: calendar, y, m, d };
     }),
     value: computed(() => {
       return props.format ? idate(state.selected || props.value).format(props.format) : state.selected || props.value;
-    })
+    }),
   });
   const { curr = {} }: any = toRefs(state);
 

package/src/components/form/Upload.vue

@@ -15,6 +15,7 @@
 
           <!-- 文件预览 -->
           <img v-if="file.type === 'image'" class="r-ss" :src="getImageUrl(file)" alt="" />
+          <video v-else-if="file.type === 'video'" class="full r-ss" :src="getImageUrl(file)" controls muted></video>
           <template v-else-if="file.type === 'pdf'">
             <svg t="1705645350800" class="w-ss h-ss" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1913">
               <path
@@ -158,9 +159,9 @@
     </div>
 
     <!-- 上传按钮 -->
-    <div v-if="showUploadButton" ui-flex="col cm">
+    <template v-if="showUploadButton">
       <slot name="btn">
-        <label class="pr" ui-form="@a type:upload tips:hover" :style="`width: ${isNumber(width) ? width + 'em' : width}`">
+        <label class="pr flex-block" ui-form="@a type:upload tips:hover" :style="`width: ${isNumber(width) ? width + 'em' : width}`" v-bind="itemAttrs">
           <div class="w-full pr" :style="`box-sizing: content-box; padding-top: ${ratio}%`">
             <div ui-flex="row cm" :class="`pa ot-no ol-no full upload n-sl bg-fore b-solid bk-case b-xs r-sm ${uploadClass}`" :style="uploadStyle">
               <div v-if="tips" ui-form-tips>
@@ -179,7 +180,7 @@
           </div>
         </label>
       </slot>
-    </div>
+    </template>
   </div>
 </template>
 <script setup lang="ts">
@@ -281,10 +282,43 @@
       return 'html';
     } else if (file.type.startsWith('image/') && file.type !== 'image/vnd.adobe.photoshop') {
       return 'image';
+    } else if (file.type.startsWith('video/')) {
+      return 'video';
     }
     return 'file';
   };
 
+  // 从URL判断文件类型
+  const getFileTypeFromUrl = (url: string): string => {
+    const extension = url.split('.').pop()?.toLowerCase() || '';
+
+    // 图片格式
+    if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico'].includes(extension)) {
+      return 'image';
+    }
+
+    // 视频格式
+    if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv', 'm4v', '3gp'].includes(extension)) {
+      return 'video';
+    }
+
+    // 文档格式
+    if (['pdf'].includes(extension)) {
+      return 'pdf';
+    }
+    if (['doc', 'docx'].includes(extension)) {
+      return 'docx';
+    }
+    if (['xls', 'xlsx'].includes(extension)) {
+      return 'xlsx';
+    }
+    if (['ppt', 'pptx'].includes(extension)) {
+      return 'pptx';
+    }
+
+    return 'file';
+  };
+
   // 验证文件
   const validateFile = (file: File): string | null => {
     // 检查文件大小
@@ -483,7 +517,12 @@
 
       const formData = new FormData();
       formData.append('file', processedFile);
-      const result = await props.upload(formData);
+
+      // 获取文件扩展名
+      const fileExtension = file.name.split('.').pop()?.toLowerCase() || '';
+
+      // 通过修改upload函数调用来传递扩展名
+      const result = await props.upload(formData, fileExtension);
 
       // 更新文件状态
       const fileIndex = state.files.findIndex((f) => f.path === uploadFile.path);
@@ -531,10 +570,11 @@
       if (newValue && Array.isArray(newValue)) {
         state.files = newValue.map((item) => {
           if (typeof item === 'string') {
-            // 如果是字符串URL
+            // 如果是字符串URL，尝试从URL判断类型
+            const urlType = getFileTypeFromUrl(item);
             return {
               name: 'file',
-              type: 'image',
+              type: urlType,
               path: item,
               status: 'end' as const,
               result: item,
@@ -551,10 +591,11 @@
           }
         });
       } else if (newValue && typeof newValue === 'string') {
+        const urlType = getFileTypeFromUrl(newValue);
         state.files = [
           {
             name: 'file',
-            type: 'image',
+            type: urlType,
             path: newValue,
             status: 'end',
             result: newValue,
@@ -562,11 +603,13 @@
         ];
       } else if (newValue && typeof newValue === 'object') {
         const objValue = newValue as any;
+        const objPath = objValue.url || objValue.path || '';
+        const objType = objValue.type || (objPath ? getFileTypeFromUrl(objPath) : 'file');
         state.files = [
           {
             name: objValue.name || 'file',
-            type: objValue.type || 'file',
-            path: objValue.url || objValue.path || '',
+            type: objType,
+            path: objPath,
             status: 'end',
             result: newValue,
           },