@tdesign/uniapp 0.0.1-alpha.1 → 0.7.0

package/dist/common/functional/mixin.js

@@ -0,0 +1,51 @@
+function formatPropKey(key) {
+  return key.replace(/^(\w)/, (a, b) => `data${b.toUpperCase()}`);
+}
+
+
+function getPropsWatch(props) {
+  const watchProps = Object.keys(props).reduce((acc, item) => {
+    acc[item] = {
+      handler(val) {
+        this[formatPropKey(item)] = val;
+      },
+    };
+    return acc;
+  }, {});
+  return watchProps;
+}
+
+
+function getPropsData(context, props) {
+  const propsData = Object.keys(props).reduce((acc, item) => {
+    acc[formatPropKey(item)] = context[item];
+    return acc;
+  }, {});
+  return propsData;
+}
+
+
+function setPropsToData(data) {
+  Object.keys(data).forEach((key) => {
+    this[formatPropKey(key)] = data[key];
+  });
+}
+
+
+export function getFunctionalMixin(dialogProps) {
+  return {
+    data() {
+      return {
+        ...getPropsData(this, dialogProps),
+      };
+    },
+    watch: {
+      ...getPropsWatch(dialogProps),
+    },
+    methods: {
+      setData(data) {
+        setPropsToData.call(this, data);
+      },
+    },
+  };
+}

package/dist/common/relation/index.js

@@ -0,0 +1,6 @@
+export { RELATION_MAP } from './parent-map';
+
+export {
+  ChildrenMixin,
+  ParentMixin,
+} from './relation';

package/dist/common/relation/parent-map.js

@@ -0,0 +1,26 @@
+export const RELATION_MAP = {
+  CollapsePanel: 'Collapse',
+  TabPanel: 'Tabs',
+
+  StepItem: 'Steps',
+  TabBarItem: 'TabBar',
+  SideBarItem: 'SideBar',
+  GridItem: 'Grid',
+  DropdownItem: 'DropdownMenu',
+
+  Radio: 'RadioGroup',
+  Checkbox: 'CheckboxGroup',
+  Cell: 'CellGroup',
+  Avatar: 'AvatarGroup',
+  PickerItem: 'Picker',
+
+  IndexesAnchor: 'Indexes',
+  SwiperNav: 'Swiper',
+
+  Col: 'Row',
+  BackTop: 'PullDownRefresh',
+
+  FormItem: 'Form',
+
+  FormKey: 'FormKey',
+};

package/dist/common/relation/relation.js

@@ -0,0 +1,213 @@
+// #ifdef H5
+// import { sortChildren } from '../../common/dom/vnodes-h5';
+// #endif
+// #ifndef H5
+// import { sortMPChildren } from '../../common/dom/vnodes-mp';
+// #endif
+
+function findNearListParent(children = [], name) {
+  let temp;
+  for (const item of children) {
+    // console.log('__nodeId__', item, item.$options.name, parentRelationKey, thisRelationKey);
+    const parentRelationKey = item.$props && item.$props.relationKey;
+    const thisRelationKey = this.$props && this.$props.relationKey;
+    if (item.$options.name === name && parentRelationKey === thisRelationKey) {
+      temp = item;
+    }
+    if (item === this && temp) {
+      // console.log('item === this', item);
+      return temp;
+    }
+    const foundInChildren = findNearListParent.call(this, item.$children, name);
+    if (foundInChildren) {
+      return foundInChildren;
+    }
+  }
+
+  return temp;
+}
+
+
+function getParentInToutiao(name) {
+  let parent = this.$parent;
+  if (!parent) {
+    const pages = getCurrentPages();
+    parent = pages[pages.length - 1]?.$vm;
+  }
+
+  if (parent && !parent.$parent) {
+    const children = parent.$children;
+    if (!children || !children.length) return;
+    const result = findNearListParent.call(this, children, name);
+    // const result2 = children.find(item => item.$options.name === name);
+    // console.log('result2', result2, result2.__nodeId__);
+    // console.log('result', result, result.__nodeId__);
+    return result;
+  }
+}
+
+
+function getParent(name = '') {
+  const found = getParentInToutiao.call(this, name);
+  if (found) {
+    return found;
+  }
+
+  let parent = this.$parent;
+
+  if (!parent) {
+    return;
+  }
+
+  let parentName = parent.$options.name;
+  while (parentName !== name) {
+    parent = parent.$parent;
+    if (!parent) return false;
+    parentName = parent.$options.name;
+  }
+  return parent;
+}
+
+
+export function ChildrenMixin(parent, options = {}) {
+  const indexKey = options.indexKey || 'index';
+
+  return {
+    inject: {
+      // #ifndef MP-TOUTIAO
+      [parent]: {
+        default: null,
+      },
+      // #endif
+    },
+    data() {
+      return {
+        // #ifdef MP-TOUTIAO
+        [parent]: null,
+        // #endif
+      };
+    },
+    computed: {
+      // 会造成循环引用
+      // parent() {
+      //   if (this.disableBindRelation) {
+      //     return null;
+      //   }
+
+      //   return this[parent];
+      // },
+
+      [indexKey]() {
+        const that = this;
+
+        that.bindRelation();
+
+        if (that[parent]) {
+          return that[parent].children.indexOf(this);
+        }
+
+        return null;
+      },
+    },
+
+    watch: {
+      disableBindRelation(val) {
+        const that = this;
+        if (!val) {
+          that.bindRelation();
+        }
+      },
+    },
+
+    created() {
+      // 循环引用调试代码
+      // this[parent].children.push(this);
+      // #ifndef H5
+      const that = this;
+      that.bindRelation();
+      // #endif
+    },
+
+
+    mounted() {
+      // #ifdef H5
+      const that = this;
+      that.bindRelation();
+      // #endif
+    },
+
+    // #ifdef VUE2
+    beforeDestroy() {
+      const that = this;
+      that.onBeforeMount();
+    },
+    // #endif
+
+    // #ifdef VUE3
+    beforeUnmount() {
+      const that = this;
+      that.onBeforeMount();
+    },
+    // #endif
+
+    methods: {
+      bindRelation() {
+        // #ifdef MP-TOUTIAO
+        const parentComponentName = `T${parent}`;
+        this[parent] = getParent.call(this, parentComponentName);
+        // #endif
+        if (!this[parent] || (this[parent].children && this[parent].children.indexOf(this) !== -1)) {
+          return;
+        }
+
+        const children = [...(this[parent].children || []), this];
+
+
+        // #ifdef H5
+        try {
+          // sortChildren(children, this[parent]);
+        } catch (err) {
+          console.log('err', err);
+        }
+        // #endif
+
+        // #ifndef H5
+        // sortMPChildren(children);
+        // #endif
+
+        this[parent].children = children;
+        this.innerAfterLinked?.(this);
+        this[parent].innerAfterLinked?.(this);
+
+        // console.log('bindRelation.children', children);
+      },
+      onBeforeMount() {
+        const that = this;
+        if (that[parent]) {
+          that[parent].children = that[parent].children.filter(item => item !== that);
+          this[parent].innerAfterUnLinked?.(this);
+          this.innerAfterUnLinked?.(this);
+
+          that?.destroyCallback?.();
+        }
+      },
+    },
+  };
+}
+
+export function ParentMixin(parent) {
+  return {
+    provide() {
+      return {
+        [parent]: this,
+      };
+    },
+
+    data() {
+      return {
+        // 会造成循环引用
+        // children: [],
+      };
+    },
+  };
+}

package/dist/common/route.js

@@ -0,0 +1,13 @@
+export function goBackOrGoHome(home = '/pages/home/home') {
+  const pages = getCurrentPages();
+
+  if (pages.length > 1) {
+    uni.navigateBack();
+  } else {
+    uni.navigateTo({
+      url: home,
+    });
+  }
+}
+
+export default goBackOrGoHome;

package/dist/common/runtime/index.js

@@ -0,0 +1,5 @@
+export function initTDesign() {
+  return {
+  };
+}
+

package/dist/common/runtime/wxs-polyfill.js

@@ -0,0 +1,16 @@
+function getRegExp() {
+  const args = Array.prototype.slice.call(arguments);
+  args.unshift(RegExp);
+  return new (Function.prototype.bind.apply(RegExp, args))();
+}
+
+/**
+ * wxs getDate
+ */
+function getDate() {
+  const args = Array.prototype.slice.call(arguments);
+  args.unshift(Date);
+  return new (Function.prototype.bind.apply(Date, args))();
+}
+
+export { getDate, getRegExp };

package/dist/common/shared/calendar/index.js

@@ -0,0 +1,128 @@
+import { getDateRect, isSameDate, getMonthDateRect, isValidDate, getDate } from '../date';
+
+export default class TCalendar {
+  constructor(options = {}) {
+    this.type = 'single';
+    Object.assign(this, options);
+    if (!this.minDate) this.minDate = getDate();
+    if (!this.maxDate) this.maxDate = getDate(6);
+  }
+
+  getTrimValue() {
+    const { value, type } = this;
+    const format = (val) => {
+      if (val instanceof Date) return val;
+      if (typeof val === 'number') return new Date(val);
+      return new Date();
+    };
+    if (type === 'single' && isValidDate(value)) return format(value);
+    if (type === 'multiple' || type === 'range') {
+      if (Array.isArray(value)) {
+        const isValid = value.every(item => isValidDate(item));
+        return isValid ? value.map(item => format(item)) : [];
+      }
+      return [];
+    }
+  }
+
+  getDays(weekdays) {
+    const ans = [];
+    let i = this.firstDayOfWeek % 7;
+    while (ans.length < 7) {
+      ans.push(weekdays[i]);
+      i = (i + 1) % 7;
+    }
+    return ans;
+  }
+
+  getMonths() {
+    const ans = [];
+    const selectedDate = this.getTrimValue();
+    const { minDate, maxDate, type, allowSameDay, format } = this;
+    const minDateRect = getDateRect(minDate);
+    let { year: minYear, month: minMonth } = minDateRect;
+    const { time: minTime } = minDateRect;
+    const { year: maxYear, month: maxMonth, time: maxTime } = getDateRect(maxDate);
+    const calcType = (year, month, date) => {
+      const curDate = new Date(year, month, date, 23, 59, 59);
+
+      if (type === 'single' && selectedDate) {
+        if (isSameDate({ year, month, date }, selectedDate)) return 'selected';
+      }
+      if (type === 'multiple' && selectedDate) {
+        const hit = selectedDate.some(item => isSameDate({ year, month, date }, item));
+        if (hit) {
+          return 'selected';
+        }
+      }
+      if (type === 'range' && selectedDate) {
+        if (Array.isArray(selectedDate)) {
+          const [startDate, endDate] = selectedDate;
+          const compareWithStart = startDate && isSameDate({ year, month, date }, startDate);
+          const compareWithEnd = endDate && isSameDate({ year, month, date }, endDate);
+
+          if (compareWithStart && compareWithEnd && allowSameDay) return 'start-end';
+          if (compareWithStart) return 'start';
+          if (compareWithEnd) return 'end';
+          if (startDate && endDate && curDate.getTime() > startDate.getTime() && curDate.getTime() < endDate.getTime()) return 'centre';
+        }
+      }
+
+      const minCurDate = new Date(year, month, date, 0, 0, 0);
+      if (curDate.getTime() < minTime || minCurDate.getTime() > maxTime) {
+        return 'disabled';
+      }
+      return '';
+    };
+
+    while (minYear < maxYear || (minYear === maxYear && minMonth <= maxMonth)) {
+      const target = getMonthDateRect(new Date(minYear, minMonth, 1));
+      const months = [];
+      for (let i = 1; i <= 31; i += 1) {
+        if (i > target.lastDate) break;
+        const dateObj = {
+          date: new Date(minYear, minMonth, i),
+          day: i,
+          type: calcType(minYear, minMonth, i),
+        };
+        months.push(format ? format(dateObj) : dateObj);
+      }
+      ans.push({
+        year: minYear,
+        month: minMonth,
+        months,
+        weekdayOfFirstDay: target.weekdayOfFirstDay,
+      });
+      const curDate = getDateRect(new Date(minYear, minMonth + 1, 1));
+      minYear = curDate.year;
+      minMonth = curDate.month;
+    }
+
+    return ans;
+  }
+
+  select({ cellType, year, month, date }) {
+    const { type } = this;
+    const selectedDate = this.getTrimValue();
+    if (cellType === 'disabled') return;
+    const selected = new Date(year, month, date);
+    this.value = selected;
+    if (type === 'range' && Array.isArray(selectedDate)) {
+      if (selectedDate.length === 1 && selected >= selectedDate[0]) {
+        this.value = [selectedDate[0], selected];
+      } else {
+        this.value = [selected];
+      }
+    } else if (type === 'multiple' && Array.isArray(selectedDate)) {
+      const newVal = [...selectedDate];
+      const index = selectedDate.findIndex(item => isSameDate(item, selected));
+      if (index > -1) {
+        newVal.splice(index, 1);
+      } else {
+        newVal.push(selected);
+      }
+      this.value = newVal;
+    }
+    return this.value;
+  }
+}

package/dist/common/shared/calendar/type.ts

@@ -0,0 +1,14 @@
+export type TCalendarValue = number | Date;
+
+export type TDateType = 'selected' | 'disabled' | 'start-end' | 'start' | 'centre' | 'end' | '';
+
+export type TCalendarType = 'single' | 'multiple' | 'range';
+
+export interface TDate {
+  date: Date;
+  day: number;
+  type: TDateType;
+  className?: string;
+  prefix?: string;
+  suffix?: string;
+}

package/dist/common/shared/color-picker/cmyk.js

@@ -0,0 +1,78 @@
+/**
+ * rgb 转 cmyk
+ * @param red
+ * @param green
+ * @param blue
+ * @returns
+ */
+export const rgb2cmyk = (red, green, blue) => {
+  let computedC = 0;
+  let computedM = 0;
+  let computedY = 0;
+  let computedK = 0;
+  const r = parseInt(`${red}`.replace(/\s/g, ''), 10);
+  const g = parseInt(`${green}`.replace(/\s/g, ''), 10);
+  const b = parseInt(`${blue}`.replace(/\s/g, ''), 10);
+  if (r === 0 && g === 0 && b === 0) {
+    computedK = 1;
+    return [0, 0, 0, 1];
+  }
+  computedC = 1 - r / 255;
+  computedM = 1 - g / 255;
+  computedY = 1 - b / 255;
+  const minCMY = Math.min(computedC, Math.min(computedM, computedY));
+  computedC = (computedC - minCMY) / (1 - minCMY);
+  computedM = (computedM - minCMY) / (1 - minCMY);
+  computedY = (computedY - minCMY) / (1 - minCMY);
+  computedK = minCMY;
+  return [computedC, computedM, computedY, computedK];
+};
+/**
+ * cmyk 转 rgb
+ * @param cyan
+ * @param magenta
+ * @param yellow
+ * @param black
+ * @returns
+ */
+export const cmyk2rgb = (cyan, magenta, yellow, black) => {
+  let c = cyan / 100;
+  let m = magenta / 100;
+  let y = yellow / 100;
+  const k = black / 100;
+  c = c * (1 - k) + k;
+  m = m * (1 - k) + k;
+  y = y * (1 - k) + k;
+  let r = 1 - c;
+  let g = 1 - m;
+  let b = 1 - y;
+  r = Math.round(255 * r);
+  g = Math.round(255 * g);
+  b = Math.round(255 * b);
+  return {
+    r,
+    g,
+    b,
+  };
+};
+const REG_CMYK_STRING = /cmyk\((\d+%?),(\d+%?),(\d+%?),(\d+%?)\)/;
+const toNumber = str => Math.max(0, Math.min(255, parseInt(str, 10)));
+/**
+ * 输入色转rgb
+ * @param input
+ * @returns
+ */
+export const cmykInputToColor = (input) => {
+  if (/cmyk/i.test(input)) {
+    const str = input.replace(/\s/g, '');
+    const match = str.match(REG_CMYK_STRING);
+    const c = toNumber(match[1]);
+    const m = toNumber(match[2]);
+    const y = toNumber(match[3]);
+    const k = toNumber(match[4]);
+    const { r, g, b } = cmyk2rgb(c, m, y, k);
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+  return input;
+};
+