@neatui/vue 2.11.0 → 2.12.0

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,
           },

package/src/components/form/date.ts

@@ -0,0 +1,321 @@
+import { isDate, isDateString, isNumber, isString } from './type';
+import { numfill } from './number';
+
+interface UpdateParam {
+  y?: number;
+  m?: number;
+  d?: number;
+  h?: number;
+  n?: number;
+  s?: number;
+}
+
+interface CalendarParam {
+  group?: boolean;
+  value?: Array<string>;
+}
+
+export default class IDate {
+  source: any = '';
+  attr: any;
+  lang: any;
+  date: any;
+  time: any;
+  year: any;
+  month: any;
+  days: number;
+  valid: boolean;
+  constructor(lang: any = 'zh') {
+    this.lang = lang;
+    this.days = 0;
+    this.valid = false;
+  }
+  // 生成日期
+  create(obj?: any, opts: any = {}) {
+    const zone = opts.zone || '';
+
+    // 统一预处理：如果是字符串就先把-替换成/，解决iOS兼容性
+    if (isString(obj)) {
+      obj = obj.replace(/-/g, '/');
+
+      // 明确格式处理
+      if (opts.format) {
+        const [a1, a2, a3] = obj.split(/[-/]/).map((i: any) => i.length);
+        const [b1, b2, b3] = opts.format?.split(/[-/]/).map((i: any) => i.length);
+        if (a1 === b1 && a2 === b2 && a3 === b3) {
+          obj = `${a1 || '01'}/${a2 || '01'}/${a3 || '01'}`;
+        } else {
+          console.warn(`${obj} is not a valid date`);
+        }
+      }
+    }
+
+    // 不合法日期是否应该抛出错误？
+    if (!isDate(obj) && !isDateString(obj)) {
+      console.log(53, obj);
+      console.warn(`${obj} is not a valid date`);
+    } else {
+      this.valid = true;
+    }
+
+    function utc(obj: any) {
+      if (!isString(obj)) {
+        return new Date();
+      }
+      const parts = obj.split(/[-/]/).map(Number);
+      const [year, month, day] = parts;
+      return new Date(Date.UTC(year, month - 1, day));
+    }
+
+    // 如果是10位时间戳
+    if (isNumber(obj)) {
+      const _len = obj?.toString()?.length;
+      if (_len === 10) {
+        obj = obj * 1000;
+      } else if (_len === 11) {
+        obj = obj * 100;
+      } else if (_len === 12) {
+        obj = obj * 10;
+      }
+    }
+    // 判断是否有入参
+    if (obj === undefined) {
+      obj = new Date();
+    }
+    // 判断是否是日期
+    if (obj) {
+      this.source = obj;
+      const date = isDate(obj) ? obj : isDateString(obj) ? (isString(obj) ? (zone === 'utc' ? utc(obj) : new Date(obj)) : new Date(obj)) : new Date();
+
+      this.date = date;
+      const cnWeek = ['日', '一', '二', '三', '四', '五', '六'];
+      this.time = date.getTime();
+
+      this.attr = {
+        time: date.getTime(),
+        year: date.getFullYear(),
+        YYYY: date.getFullYear(),
+        yyyy: date.getFullYear(),
+        YY: `${date.getFullYear()}`.slice(-2),
+        yy: `${date.getFullYear()}`.slice(-2),
+        Y: date.getFullYear(),
+        y: date.getFullYear(),
+        month: date.getMonth() + 1,
+        MM: numfill(date.getMonth() + 1),
+        M: date.getMonth() + 1,
+        DD: numfill(date.getDate()),
+        dd: numfill(date.getDate()),
+        D: date.getDate(),
+        date: date.getDate(),
+        d: date.getDate(),
+        H: date.getHours(),
+        h: date.getHours() > 12 ? date.getHours() - 12 : date.getHours(),
+        HH: numfill(date.getHours()),
+        hh: numfill(date.getHours()),
+        mm: numfill(date.getMinutes()),
+        m: date.getMinutes(),
+        ss: numfill(date.getSeconds()),
+        s: date.getSeconds(),
+        w: date.getDay(),
+        W: cnWeek[date.getDay()],
+      };
+      // 本月天数
+      this.days = new Date(this.attr.y, this.attr.M, 0).getDate();
+    }
+    return this;
+  }
+
+  // 日期格式
+  format(format = 'YYYY-MM-DD') {
+    if (this.date) {
+      return format.replace(/(YYYY|yyyy|YY|yy|MM|M|DD|dd|D|d|HH|hh|H|h|mm|m|ss|s|w)/g, (_: any, key: any) => this.attr[key]);
+    } else {
+      return this.source;
+    }
+  }
+
+  // 时间更新
+  update(obj: UpdateParam) {
+    if (this.date) {
+      const { y = 0, m = 0, d = 0, h = 0, n = 0, s = 0 }: any = obj || {};
+      if (y) {
+        this.date.setFullYear(this.date.getFullYear() + y);
+      }
+      if (m) {
+        this.date.setMonth(this.date.getMonth() + m);
+      }
+      if (d) {
+        this.date.setDate(this.date.getDate() + d);
+      }
+      if (h) {
+        this.date.setHours(this.date.getHours() + h);
+      }
+      if (n) {
+        this.date.setMinutes(this.date.getMinutes() + n);
+      }
+      if (s) {
+        this.date.setSeconds(this.date.getSeconds() + s);
+      }
+      this.create(this.date);
+    }
+    return this;
+  }
+
+  // 人性化
+  humanized(words: any = {}) {
+    if (this.date) {
+      const now = new Date();
+      const diff = now.getTime() - this.date.getTime();
+      const minute = 60 * 1000;
+      const hour = 60 * minute;
+      const day = 24 * hour;
+      const week = 7 * day;
+      const month = 30 * day;
+      const year = 365 * day;
+
+      const {
+        NOW = 'Just now',
+        MIN = ' minute ago',
+        HRS = ' hour ago',
+        DAY = ' day ago',
+        WKS = ' week ago',
+        MON = ' month ago',
+        YRS = ' year ago',
+        MINS = ' minutes ago',
+        HRSS = ' hours ago',
+        DAYS = ' days ago',
+        WKSS = ' weeks ago',
+        MONS = ' months ago',
+        YRSS = ' years ago',
+      }: any = words || {};
+
+      if (diff < minute) {
+        return NOW;
+      } else if (diff < hour) {
+        const minutes = Math.floor(diff / minute);
+        return `${minutes}${minutes > 1 ? MINS : MIN}`;
+      } else if (diff < day) {
+        const hours = Math.floor(diff / hour);
+        return `${hours}${hours > 1 ? HRSS : HRS}`;
+      } else if (diff < week) {
+        const days = Math.floor(diff / day);
+        return `${days}${days > 1 ? DAYS : DAY}`;
+      } else if (diff < month) {
+        const weeks = Math.floor(diff / week);
+        return `${weeks}${weeks > 1 ? WKSS : WKS}`;
+      } else if (diff < year) {
+        const months = Math.floor(diff / month);
+        return `${months}${months > 1 ? MONS : MON}`;
+      } else {
+        const years = Math.floor(diff / year);
+        return `${years}${years > 1 ? YRSS : YRS}`;
+      }
+    } else {
+      return this.source;
+    }
+  }
+
+  // 日历
+  calendar(param: CalendarParam = {}) {
+    if (!this.date) {
+      this.create(new Date());
+    }
+    const { group = false, value = [] }: any = param;
+    const values: any = value
+      .filter((day: any) => {
+        return day && isDateString(day);
+      })
+      .sort((a: any, b: any) => {
+        return idate(a).time - idate(b).time;
+      })
+      .map((day: any) => idate(day).format('YYYY-MM-DD'));
+
+    // 年
+    const y: any = this.date?.getFullYear();
+    // 月
+    const m: any = this.date?.getMonth() + 1;
+    // 本月第一天星期几
+    const w = new Date(y, m - 1, 1).getDay();
+    // 当前月份一共几天
+    const days = new Date(y, m, 0).getDate();
+
+    // 当前
+    const curr = new Date();
+    const curr_y = curr.getFullYear();
+    const curr_m = curr.getMonth() + 1;
+    const curr_d = curr.getDate();
+
+    // 上月
+    const last = new Date(y, m - 1, 0);
+    const last_y = last.getFullYear();
+    const last_m = last.getMonth() + 1;
+    let prevdays = last.getDate();
+
+    // 下月
+    const next = new Date(y, m + 1, 0);
+    const next_y = next.getFullYear();
+    const next_m = next.getMonth() + 1;
+    const _calendar: any = [];
+
+    // 上月的日期
+    for (let i = 0; i < w; i++) {
+      _calendar.unshift({
+        date: `${last_y}-${numfill(last_m)}-${numfill(prevdays)}`,
+        day: prevdays,
+        isLastMonth: true,
+      });
+      prevdays = prevdays - 1;
+    }
+
+    // 本月的日期
+    for (let d = 1; d <= days; d++) {
+      _calendar.push({
+        date: `${y}-${numfill(m)}-${numfill(d)}`,
+        day: d,
+        today: curr_y === y && curr_m === m && curr_d === d,
+        isCurrMonth: true,
+      });
+    }
+
+    // 下月的日期
+    for (let i = 1; _calendar.length < 42; i++) {
+      const _i = i;
+      _calendar.push({
+        date: `${next_y}-${numfill(next_m)}-${numfill(_i)}`,
+        day: _i,
+        isNextMonth: true,
+      });
+    }
+
+    let calendar = _calendar.map((item: any) => {
+      const _idx = values.indexOf(idate(item.date).format('YYYY-MM-DD'));
+      // 判断是否在选
+      if (_idx !== -1) {
+        if (item.isCurrMonth) {
+          item.selected = true;
+        }
+        if (_idx === 0) {
+          item.sta = true;
+        }
+        if (_idx === values.length - 1) {
+          item.end = true;
+        }
+      }
+      // 判断是否在范围内
+      if (values.length > 1) {
+        if (item.isCurrMonth && idate(item.date).time >= idate(values[0]).time && idate(item.date).time <= idate(values[values.length - 1]).time) {
+          item.range = true;
+        }
+      }
+      return item;
+    });
+    // 是否按周分组
+    if (group) {
+      calendar = Array.from({ length: Math.ceil(_calendar.length / 7) }, (_v, index) => _calendar.slice(index * 7, index * 7 + 7));
+    }
+
+    return calendar;
+  }
+}
+
+export const idate = (obj?: any) => new IDate().create(obj);

package/src/components/form/index.ts

@@ -1,7 +1,7 @@
 import Input from './Input@v3.vue';
 import InputRange from './InputRange.vue';
 import Switch from './Switch.vue';
-import TextArea from './TextArea.vue';
+import Textarea from './Textarea@v2.vue';
 
 import Checkbox from './Checkbox.vue';
 import Select from './Select@v3.vue';
@@ -32,7 +32,7 @@ export {
   Input,
   InputRange,
   Switch,
-  TextArea,
+  Textarea,
   Checkbox,
   Select,
   SelectList,

package/src/components/form/number.ts

@@ -0,0 +1,3 @@
+export const numfill = (num: String | Number = '') => {
+  return  Number(num) < 10 ? `0${num}` : num;
+};