@neatui/vue 2.17.2 → 2.17.5

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

@@ -1,275 +0,0 @@
-<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/date.ts

@@ -1,321 +0,0 @@
-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);