@neatui/nuxt 0.1.0 → 1.0.0

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,8 +1,9 @@
 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';
 import SelectList from './SelectList.vue';
 import SelectTags from './SelectTags.vue';
@@ -17,8 +18,8 @@ import PageSelect from './PageSelect.vue';
 import SelectTree from './SelectTree/SelectTree@v1.vue';
 
 // import DateView from './DateView.vue';
-import DateView from './DateView@v2.vue';
-// import DateView from './DateView@v3.vue';
+// import DateView from './DateView@v2.vue';
+import DateView from './DateView@v3.vue';
 import DateRangeView from './DateRangeView@v3.vue';
 import DatePicker from './DatePicker.vue';
 import TimePicker from './TimePicker.vue';
@@ -31,7 +32,8 @@ export {
   Input,
   InputRange,
   Switch,
-  TextArea,
+  Textarea,
+  Checkbox,
   Select,
   SelectList,
   SelectTags,
@@ -52,7 +54,7 @@ export {
   DateRangePicker,
   ImgUpload,
   Upload,
-  Cascader
+  Cascader,
 };
 
 // 单选

package/src/components/form/number.ts

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

package/src/components/form/type.ts

@@ -0,0 +1,224 @@
+/**
+ * 对象类型相关判断
+ * @module type
+ */
+
+/**
+ * 获取指定对象的类型
+ * @param  {type} obj 	对象
+ * @return {string}     对象类型值
+ */
+export function getType(obj: any): string {
+  return Object.prototype.toString.call(obj);
+}
+
+/**
+ * 判断是否是function
+ * @param  {object}  obj 对象
+ * @return {Boolean}
+ */
+export function isFunction(obj: any): boolean {
+  return typeof obj === 'function';
+}
+
+/**
+ * 判断是否是Object
+ * @param  {object}  obj 对象
+ * @return {Boolean}
+ */
+export function isObject(obj: any): boolean {
+  return '[object Object]' === getType(obj);
+}
+
+/**
+ * 判断是否是array
+ * @param  {object}  obj 对象
+ * @return {Boolean}
+ */
+export function isArray(obj: any): boolean {
+  return '[object Array]' === getType(obj);
+}
+
+/**
+ * 判断是否是undefined
+ * @param  {object}  obj 对象
+ * @return {Boolean}
+ */
+export function isUndefined(obj: any): boolean {
+  return '[object Undefined]' === getType(obj);
+}
+
+/**
+ * 判断是否是null
+ * @param  {object}  obj 对象
+ * @return {Boolean}
+ */
+export function isNull(obj: any): boolean {
+  return '[object Null]' === getType(obj);
+}
+
+/**
+ * 判断是否是字符串
+ * @param  {object}  obj 对象
+ * @return {Boolean}
+ */
+export function isString(obj: any): boolean {
+  return typeof obj === 'string';
+}
+
+/**
+ * 判断是否是布尔类型
+ * @param  {object}  obj 对象
+ * @return {Boolean}
+ */
+export function isBoolean(obj: any): boolean {
+  return typeof obj === 'boolean';
+}
+
+/**
+ * 判断是否是一个数字
+ * @param  {number}  num 数字
+ * @return {Boolean}
+ */
+export function isNumber(num: any): boolean {
+  return '[object Number]' === getType(num) && !isNaN(num);
+}
+
+/**
+ * 判断是否是一个日期
+ * @param  {object}  obj 对象
+ * @return {Boolean}
+ */
+export function isDate(obj: any): boolean {
+  return '[object Date]' === getType(obj);
+}
+
+/**
+ * 判断是否是一个日期字符串
+ * @param  {string}  str 字符
+ * @return {Boolean}
+ */
+export function isDateString(str: any): boolean {
+  try {
+    return new Date(str?.replace(/-/g, '/')).toString() !== 'Invalid Date';
+  } catch (err) {
+    return false;
+  }
+}
+
+/**
+ * 判断是否是一个DOM节点
+ * @param  {object}  obj 对象
+ * @return {Boolean}
+ */
+export function isElement(obj: any): boolean {
+  return /\[object\sHTML\w*Element\]/.test(getType(obj)) || getType(obj) === '[object HTMLDocument]';
+}
+
+/**
+ * 判断是否是一个DOM节点列表
+ * @param  {object}  obj 对象
+ * @return {Boolean}
+ */
+export function isNodeList(obj: any): boolean {
+  return getType(obj) === '[object NodeList]';
+}
+
+/**
+ * 判断是否为空
+ * @param  {object}  obj 对象
+ * @return {Boolean}
+ */
+export function isEmpty(obj: any): boolean {
+  if (isArray(obj)) {
+    return obj.length === 0;
+  } else if (isObject(obj)) {
+    return Object.keys(obj).length === 0;
+  } else {
+    return isUndefined(obj) || isNull(obj) || obj === '';
+  }
+}
+
+/**
+ * 判断是否为Base64字符串
+ * @param  {string}  obj 对象
+ * @return {Boolean}
+ */
+export function isBase64(obj: any): boolean {
+  return isString(obj) && /data:\w*\/\w*;base64,/.test(obj);
+}
+
+/**
+ * 判断是否为Blob对象
+ * @param  {object}  obj 对象
+ * @return {Boolean}
+ */
+export function isBlob(obj: any): boolean {
+  return obj instanceof Blob;
+}
+
+/**
+ * 判断是不是JSON字符串
+ * @param  {object}  obj 任意类型
+ * @return {Boolean}
+ */
+export function isJsonString(obj: any): boolean {
+  try {
+    JSON.parse(obj);
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * 判断是不是数组字符串
+ * @param  {object}  obj 任意类型
+ * @return {Boolean}
+ */
+export function isArrayString(obj: any): boolean {
+  try {
+    const a = JSON.parse(obj);
+    return isArray(a);
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * 判断是不是对象字符串
+ * @param  {object}  obj 任意类型
+ * @return {Boolean}
+ */
+export function isObjectString(obj: any): boolean {
+  try {
+    const o = JSON.parse(obj);
+    return isObject(o);
+  } catch (e) {
+    return false;
+  }
+}
+
+/**
+ * 判断是不是经过编码的字符串
+ * @param  {object}  str 字符串
+ * @return {Boolean}
+ */
+export const isEncoded = (str: any) => {
+  try {
+    return str !== decodeURIComponent(str);
+  } catch (_e) {
+    // 如果解码失败，说明字符串未被正确编码
+    return false;
+  }
+};
+
+/**
+ * 检查对象是否拥有指定的自身属性（不检查原型链）
+ * @param obj 要检查的对象
+ * @param key 属性名
+ * @returns {boolean} 如果对象自身包含该属性则返回 true，否则返回 false
+ */
+export const hasOwnProp = (obj: unknown, key: PropertyKey): boolean => {
+  return obj != null && Object.prototype.hasOwnProperty.call(obj, key);
+};

package/src/components/icon/OrderIcon.vue

@@ -0,0 +1,113 @@
+<template>
+  <span class="pr full" ui-flex="row cm">
+    <span :ui-order="`@b ${status}`" :style="{ width: size + '%', height: size + '%' }">
+      <i></i>
+      <b></b>
+      <u></u>
+    </span>
+  </span>
+</template>
+<script setup lang="ts">
+  // 类型
+  interface Props {
+    status?: number;
+    size?: number;
+  }
+  withDefaults(defineProps<Props>(), {
+    status: 0,
+    size: 100,
+  });
+</script>
+<style lang="scss">
+  [ui-order~='@b'] {
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+
+    i,
+    b,
+    u {
+      position: absolute;
+      display: block;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+    }
+
+    i {
+      opacity: 0;
+
+      &::before,
+      &::after {
+        display: block;
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+      }
+
+      &::before {
+        background:
+          linear-gradient(45deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 28.7% 95% / 30% 35%,
+          linear-gradient(-45deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 71.3% 95% / 30% 35%;
+        transform: translateY(-50%);
+      }
+
+      &::after {
+        background:
+          linear-gradient(135deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 28.5% 10% / 30% 35%,
+          linear-gradient(-135deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 71.3% 10% / 30% 35%;
+        transform: translateY(50%);
+      }
+    }
+
+    b {
+      background:
+        linear-gradient(45deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 28.7% 95% / 30% 35%,
+        linear-gradient(-45deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 71.3% 95% / 30% 35%,
+        linear-gradient(90deg, transparent 35%, currentColor 40%, currentColor 60%, transparent 65%) no-repeat 50% 45% / 33% 70%;
+      transform: translateY(-110%);
+    }
+
+    u {
+      background:
+        linear-gradient(135deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 28.5% 10% / 30% 35%,
+        linear-gradient(-135deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 71.3% 10% / 30% 35%,
+        linear-gradient(90deg, transparent 35%, currentColor 40%, currentColor 60%, transparent 65%) no-repeat 50% 45% / 33% 70%;
+      transform: translateY(110%);
+    }
+
+    &[ui-order~='0'] i {
+      opacity: 0.3;
+
+      &::before {
+        background:
+          linear-gradient(45deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 28.7% 95% / 30% 35%,
+          linear-gradient(-45deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 71.3% 95% / 30% 35%;
+        transform: translateY(0%);
+        transition: all 0.2s cubic-bezier(0.65, 0, 0.35, 1);
+      }
+
+      &::after {
+        background:
+          linear-gradient(135deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 28.5% 15% / 30% 35%,
+          linear-gradient(-135deg, transparent 48%, currentColor 53%, currentColor 67%, transparent 72%) no-repeat 71.3% 15% / 30% 35%;
+        transform: translateY(0%);
+        transition: all 0.2s cubic-bezier(0.65, 0, 0.35, 1);
+      }
+    }
+
+    &[ui-order~='1'] u {
+      transform: translateY(5%);
+      transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
+    }
+
+    &[ui-order~='2'] b {
+      transform: translateY(0%);
+      transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
+    }
+  }
+</style>