@farris/cli 2.0.0-beta.7 → 2.0.0-beta.8

package/templates/lib/components/common/src/style/mixins/border-radius.scss

@@ -0,0 +1,13 @@
+@mixin borderRadius($size, $position: '') {
+  @if ($position == 'top') {
+    border-radius: 0 0 $size $size;
+  } @else if($position == 'bottom') {
+    border-radius: $size $size 0 0;
+  } @else if($position == 'left') {
+    border-radius: 0 $size $size 0;
+  } @else if($position == 'right') {
+    border-radius: $size 0 0 $size;
+  } @else {
+    border-radius: $size
+  }
+}

package/templates/lib/components/common/src/style/mixins/ellipsis.scss

@@ -0,0 +1,15 @@
+@mixin multi-ellipsis($lines) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: $lines;
+
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/templates/lib/components/common/src/style/mixins/hairline.scss

@@ -0,0 +1,113 @@
+@mixin scale-hairline-common($color, $top, $right, $bottom, $left) {
+  content: '';
+  position: absolute;
+  background-color: $color;
+  display: block;
+  z-index: 1;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}
+
+@mixin hairline(
+  $direction,
+  $color: #ddd,
+  $radius: 0,
+  $type: solid,
+) {
+  @if ($direction == 'top') {
+    border-top: 1px $type $color;
+    position: relative;
+    border-top: none;
+    &::before {
+      @include scale-hairline-common($color, 0, auto, auto, 0);
+      width: 100%;
+      height: 1px;
+      transform-origin: 50% 50%;
+      transform: scaleY(0.5);
+    }
+  } @else if ($direction == 'bottom') {
+    border-bottom: 1px $type $color;
+    position: relative;
+    border-bottom: none;
+    &::after {
+      @include scale-hairline-common($color, auto, auto, 0, 0);
+      width: 100%;
+      height: 1px;
+      transform-origin: 50% 100%;
+      transform: scaleY(0.5);
+    }
+  } @else if ($direction == 'left') {
+    border-left: 1px $type $color;
+    position: relative;
+    border-left: none;
+    &::before {
+      @include scale-hairline-common($color, 0, auto, auto, 0);
+      width: 1px;
+      height: 100%;
+      transform-origin: 100% 50%;
+      transform: scaleX(0.5);
+    }
+  } @else if ($direction == 'right') {
+    border-right: 1px $type $color;
+    position: relative;
+    border-right: none;
+    &::after {
+      @include scale-hairline-common($color, 0, 0, auto, auto);
+      width: 1px;
+      height: 100%;
+      background: $color;
+      transform-origin: 100% 50%;
+      transform: scaleX(0.5);
+    }
+  } @else if ($direction == 'all') {
+    border: 1px $type $color;
+    border-radius: $radius;
+    position: relative;
+    border: none;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 200%;
+      height: 200%;
+      border: 1px $type $color;
+      border-radius: $radius * 2;
+      transform-origin: 0 0;
+      transform: scale(0.5);
+      box-sizing: border-box;
+      pointer-events: none;
+    }
+  }
+}
+
+@mixin hairline-remove($position) {
+  @if $position == 'left' {
+    border-left: 0;
+    &:before {
+      display: none !important;
+    }
+  } @else if $position == 'right' {
+    border-right: 0;
+    &:after {
+      display: none !important;
+    }
+  } @else if $position == 'top' {
+    border-top: 0;
+    &:before {
+      display: none !important;
+    }
+  } @else if $position == 'bottom' {
+    border-bottom: 0;
+    &:after {
+      display: none !important;
+    }
+  } @else if $position == 'all' {
+    border: 0;
+    &:before {
+      display: none !important;
+    }
+  }
+}

package/templates/lib/components/common/src/style/mixins/index.scss

@@ -0,0 +1,6 @@
+@forward 'bem';
+@forward 'border-radius';
+@forward 'ellipsis';
+@forward 'hairline';
+@forward 'safe-area';
+@forward 'margin';

package/templates/lib/components/common/src/style/mixins/margin.scss

@@ -0,0 +1,10 @@
+@mixin not-first-child-margin($size, $position: '') {
+  &:not(:first-child) {
+    #{'margin-' + $position}: $size;
+  }
+}
+@mixin not-last-child-margin($size, $position: '') {
+  &:not(:last-child) {
+    #{'margin-' + $position}: $size;
+  }
+}

package/templates/lib/components/common/src/style/mixins/safe-area.scss

@@ -0,0 +1,9 @@
+@mixin safeArea($styleName) {
+  @if($styleName){
+    #{$styleName}: 0;
+    @supports ((bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom))) and (-webkit-overflow-scrolling: touch) {
+      #{$styleName}: constant(safe-area-inset-bottom);
+      #{$styleName}: env(safe-area-inset-bottom);
+    }
+  }
+}

package/templates/lib/components/common/src/style/variables.scss

@@ -0,0 +1,113 @@
+:root {
+  // Color Palette
+  --fm-black: #000;
+  --fm-white: #fff;
+  --fm-gray-1: #f2f3f5;
+  --fm-gray-2: #eee;
+  --fm-gray-3: #ddd;
+  --fm-gray-4: #ccc;
+  --fm-gray-5: #999;
+  --fm-gray-6: #666;
+  --fm-gray-7: #333;
+  --fm-red: #F24645;
+  --fm-red-light: #f9e8e8;
+  --fm-blue: #3A90FF;
+  --fm-blue-2: #65a7ff;
+  --fm-blue-light: #ecf2fe;
+  --fm-green: #5CC171;
+  --fm-green-2: #5AC1C3;
+  --fm-green-light: #e9f5ed;
+  --fm-orange: #FF9800;
+  --fm-orange-2: #FA6400;
+  --fm-orange-3: #FFB400;
+  --fm-orange-light: #faf0e1;
+
+  // Component Colors
+  --fm-primary-color: var(--fm-blue);
+  --fm-success-color: var(--fm-green);
+  --fm-danger-color: var(--fm-red);
+  --fm-warning-color: var(--fm-orange);
+  --fm-submit-color: var(--fm-green-2);
+  --fm-primary-color-light: var(--fm-blue-light);
+  --fm-success-color-light: var(--fm-green-light);
+  --fm-danger-color-light: var(--fm-red-light);
+  --fm-warning-color-light: var(--fm-orange-light);
+  --fm-text-color: var(--fm-gray-7);
+  --fm-text-color-light: var(--fm-gray-5);
+  --fm-active-color: var(--fm-gray-1);
+  --fm-disabled-color: var(--fm-gray-4);
+  --fm-readonly-color: var(--fm-gray-6);
+  --fm-active-opacity: 0.7;
+  --fm-readonly-opacity: 0.6;
+  --fm-disabled-opacity: 0.5;
+  --fm-background: var(--fm-gray-1);
+  --fm-background-white: var(--fm-white);
+  --fm-box-shadow-color: var(--fm-gray-1); 
+
+  // Padding
+  --fm-padding-base: 4px;
+  --fm-padding-xs: 8px;
+  --fm-padding-sm: 12px;
+  --fm-padding-md: 16px;
+  --fm-padding-lg: 24px;
+  --fm-padding-xl: 32px;
+  --fm-padding-horizontal-xs: 0 var(--fm-padding-xs);
+  --fm-padding-horizontal-sm: 0 var(--fm-padding-sm);
+  --fm-padding-horizontal-md: 0 var(--fm-padding-md);
+  --fm-padding-horizontal-lg: 0 var(--fm-padding-lg);
+
+  // Margin
+  --fm-margin-base: 4px;
+  --fm-margin-xs: 8px;
+  --fm-margin-sm: 12px;
+  --fm-margin-md: 16px;
+  --fm-margin-lg: 24px;
+  --fm-margin-xl: 32px;
+  --fm-margin-horizontal-xs: 0 var(--fm-margin-xs);
+  --fm-margin-horizontal-sm: 0 var(--fm-margin-sm);
+  --fm-margin-horizontal-md: 0 var(--fm-margin-md);
+  --fm-margin-horizontal-lg: 0 var(--fm-margin-lg);
+
+  // Font
+  --fm-font-bold-light: 500;
+  --fm-font-bold: 600;
+  --fm-font-size: 16px;
+  --fm-line-height: 1.2;
+
+  --fm-font-size-xs: 10px;
+  --fm-font-size-sm: 12px;
+  --fm-font-size-md: 14px;
+  --fm-font-size-lg: 16px;
+
+  // Gradient Colors
+  --fm-gradient-blue: linear-gradient(-45deg,var(--fm-blue-2) 0%, var(--fm-blue) 100%);
+  --fm-gradient-orange:  linear-gradient(-45deg,var(--fm-orange) 0%, var(--fm-orange-2) 100%);
+  
+  /* stylelint-disable */
+  --fm-base-font: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+    Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui',
+    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  --fm-price-font: avenir-heavy, 'PingFang SC', helvetica neue, arial,
+    sans-serif;
+  /* stylelint-enable */
+
+  // Animation
+  --fm-duration-base: 0.3s;
+  --fm-duration-fast: 0.2s;
+  --fm-ease-out: ease-out;
+  --fm-ease-in: ease-in;
+
+  // Border
+  --fm-noborder: none;
+  --fm-radius-sm: 2px;
+  --fm-radius-md: 4px;
+  --fm-radius-lg: 8px;
+  --fm-radius-max: 999px;
+
+  --fm-zindex-1: 9;
+  --fm-zindex-2: 10;
+  --fm-zindex-3: 99;
+  --fm-zindex-4: 100;
+  --fm-zindex-5: 999;
+  --fm-zindex-6: 1000;
+}

package/templates/lib/components/common/src/utils/index.ts

@@ -0,0 +1,15 @@
+export * from './src/dom/event';
+export * from './src/common';
+export * from './src/hook';
+export * from './src/number';
+export * from './src/resove-asset';
+export * from './src/throttle';
+export * from './src/transition';
+export * from './src/type';
+export * from './src/date';
+export * from './src/string';
+export * from './src/use-appearance';
+export * from './src/query-filter';
+export * from './src/with-install';
+export * from './src/with-register';
+export * from './src/with-register-designer';

package/templates/lib/components/common/src/utils/src/common.ts

@@ -0,0 +1,83 @@
+import { isDef, isNumeric, isObject } from './type';
+
+export function noop() { }
+
+export function addUnit(value: string | number) {
+  if (!isDef(value)) {
+    return undefined;
+  }
+  value = String(value);
+  return isNumeric(value) ? `${value}px` : value;
+}
+
+export const escapeHtml = (str: string) => {
+  if (str === null || str === undefined || str === '') {
+    return '';
+  }
+  return str
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+    .replace(/\//g, '&#x2F;');
+};
+
+export const unescapeHtml = (str: string) => {
+  if (str === null || str === undefined || str === '') {
+    return '';
+  }
+  return str
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&#x2F;/g, '/');
+};
+
+export const getValue = (field: string, data: any, safe = false) => {
+  if (!data) {
+    return '';
+  }
+  let resultVal = '';
+  if (field.indexOf('.') === -1) {
+    resultVal = data[field];
+  } else {
+    resultVal = field.split('.').reduce((obj, key) => {
+      if (obj) {
+        return obj[key];
+      }
+      return null;
+    }, data);
+  }
+
+  if (safe) {
+    return escapeHtml(resultVal);
+  }
+  return resultVal;
+};
+
+export const setValue = (obj: Record<string, any>, field: string, val: any) => {
+  if(!obj || !field){
+    return;
+  }
+  if (field.indexOf('.') > 0) {
+    const fieldMap = field.split('.');
+    const target = fieldMap.slice(0, -1).reduce((record, fieldItem) => {
+      if(!isObject(record[fieldItem])) {
+        record[fieldItem] = {};
+      }
+      return record[fieldItem];
+    }, obj);
+
+    if (target) {
+      const targetField = fieldMap.pop();
+      if (targetField) {
+        target[targetField] = val;
+      }
+    }
+  } else {
+    obj[field] = val;
+  }
+};

package/templates/lib/components/common/src/utils/src/date.ts

@@ -0,0 +1,134 @@
+import { isArray, isString } from './type';
+
+export const getDateRecord = (target: Date) => {
+  const year = target.getFullYear();
+  const month = target.getMonth() + 1;
+  const day = target.getDate();
+  const hours = target.getHours();
+  const minutes = target.getMinutes();
+  const seconds = target.getSeconds();
+
+  return {
+    year,
+    month,
+    day,
+    hours,
+    minutes,
+    seconds
+  };
+};
+
+export const getTimeRecord = (value: string | number[]) => {
+  const [hours, minutes, seconds] = isString(value)
+    ? value.split(':').map((item) => Number(item))
+    : isArray(value)
+      ? value
+      : [0, 0, 0];
+
+  return {
+    hours,
+    minutes,
+    seconds
+  };
+};
+
+export const isLeap = (year: number) => {
+  return year % 400 === 0 || (year % 100 !== 0 && year % 4 === 0);
+};
+
+export const formatTime = (
+  value: { hours: number; minutes: number; seconds: number },
+  format: string
+) => {
+  const { hours, minutes, seconds } = value;
+  return format
+    .replace('HH', String(hours).padStart(2, '0'))
+    .replace('mm', String(minutes).padStart(2, '0'))
+    .replace('ss', String(seconds).padStart(2, '0'));
+};
+
+export const parseTime = (value: string) => {
+  const timeRegex = /^(\d{2}):(\d{2}):(\d{2})$/;
+  const match = value.match(timeRegex);
+
+  if (!match) {
+    throw new Error('Invalid time format');
+  }
+
+  const [_, hours, minutes, seconds] = match;
+
+  return new Date(0, 0, 0, parseInt(hours, 10), parseInt(minutes, 10), parseInt(seconds, 10));
+};
+
+export const formatDate = (value: Date, format: string) => {
+  const { year, month, day, hours, minutes, seconds } = getDateRecord(value);
+  return format
+    .replace('YYYY', String(year))
+    .replace('MM', String(month).padStart(2, '0'))
+    .replace('DD', String(day).padStart(2, '0'))
+    .replace('HH', String(hours).padStart(2, '0'))
+    .replace('mm', String(minutes).padStart(2, '0'))
+    .replace('ss', String(seconds).padStart(2, '0'));
+};
+
+export const parseDate = (value: string, format: string) => {
+  const [dateValue, timeValue] = value.split(' ');
+  const [dateFormat, timeFormat] = format.split(' ');
+
+  const dateRegex = /年|月|日|-|\//g;
+
+  const formatParts = dateFormat.replace(dateRegex, '-').split('-');
+  const formatMap = formatParts.reduce((map, part, index) => {
+    map[part] = index;
+    return map;
+  }, {} as Record<string, number>);
+
+  const dateValueParts = dateValue
+    .replace(dateRegex, '-')
+    .split('-')
+    .map((item) => Number(item));
+
+  const year = dateValueParts[formatMap.YYYY];
+  const month = dateValueParts[formatMap.MM] ? dateValueParts[formatMap.MM] - 1 : 0;
+  const day = dateValueParts[formatMap.DD] || 1;
+
+  const { hours, minutes, seconds } = getTimeRecord(timeValue);
+
+  // 创建Date对象
+  const parsedDate = new Date(year, month, day, hours, minutes, seconds);
+
+  // 检查是否有效日期
+  if (isNaN(parsedDate as any)) {
+    throw new Error('Invalid date format');
+  }
+
+  return parsedDate;
+};
+
+export const compareDate = (firstDate: Date, secondDate: Date) => {
+  return firstDate.getTime() - secondDate.getTime();
+};
+
+export const isEqualDate = (firstDate: Date, secondDate: Date) => {
+  const {
+    year: firstDateYear,
+    month: firstDateMonth,
+    day: firstDateDay
+  } = getDateRecord(firstDate);
+  const {
+    year: secondDateYear,
+    month: secondDateMonth,
+    day: secondDateDay
+  } = getDateRecord(secondDate);
+
+  return (
+    compareDate(
+      new Date(firstDateYear, firstDateMonth, firstDateDay),
+      new Date(secondDateYear, secondDateMonth, secondDateDay)
+    ) === 0
+  );
+};
+
+export const isEqualDateTime = (firstDate: Date, secondDate: Date) => {
+  return compareDate(firstDate, secondDate) === 0;
+};

package/templates/lib/components/common/src/utils/src/dom/event.ts

@@ -0,0 +1,37 @@
+export function stopPropagation(event: Event) {
+  event.stopPropagation();
+}
+
+export function preventDefault(event: Event, isStopPropagation?: boolean) {
+  /* istanbul ignore else */
+  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    event.preventDefault();
+  }
+
+  if (isStopPropagation) {
+    stopPropagation(event);
+  }
+}
+
+export function trigger(target: Element, type: string) {
+  const inputEvent = document.createEvent('HTMLEvents');
+  inputEvent.initEvent(type, true, true);
+  target.dispatchEvent(inputEvent);
+}
+
+// ios event没有path属性
+export const initNodePath = (event: Event) => {
+  const path: any[] = [];
+  let currentElem: any = event.target;
+  while (currentElem) {
+    path.push(currentElem);
+    currentElem = currentElem.parentElement;
+  }
+  if (path.indexOf(window) === -1 && path.indexOf(document) === -1) {
+    path.push(document);
+  }
+  if (path.indexOf(window) === -1) {
+    path.push(window);
+  }
+  return path;
+};

package/templates/lib/components/common/src/utils/src/hook.ts

@@ -0,0 +1,18 @@
+import { nextTick, onMounted, onActivated } from 'vue';
+
+export function onMountedOrActivated(hook: () => any) {
+  let mounted: boolean;
+
+  onMounted(() => {
+    hook();
+    nextTick(() => {
+      mounted = true;
+    });
+  });
+
+  onActivated(() => {
+    if (mounted) {
+      hook();
+    }
+  });
+}

package/templates/lib/components/common/src/utils/src/number.ts

@@ -0,0 +1,26 @@
+import { trimExtraChar } from './string';
+import { isDef } from './type';
+
+export function formatToNumber(value: string, allowDot: boolean) {
+  value = isDef(value) ? value : '';
+  let regExp = /[^-0-9]/g;
+  value = trimExtraChar(value, '-', /-/g);
+  if (allowDot) {
+    value = trimExtraChar(value, '.', /\./g);
+    regExp = /[^-0-9.]/g;
+  } else {
+    value = value.split('.')[0];
+  }
+  return value.replace(regExp, '');
+}
+
+export function parseFloat(value: string | number, precision = 0) {
+  return Number.parseFloat(value ? String(value) : '0').toFixed(precision);
+}
+
+export function range(num: number, min: number, max: number): number {
+  return Math.min(Math.max(num, min), max);
+}
+export function random(min: number, max: number) {
+  return Math.round(Math.random() * (max - min) + min);
+}

package/templates/lib/components/common/src/utils/src/query-filter.ts

@@ -0,0 +1,40 @@
+
+export enum FilterCompareType {
+  Equal = 0,
+  NotEqual = 1,
+  Greater = 2,
+  GreaterOrEqual = 3,
+  Less = 4,
+  LessOrEqual = 5,
+  Like = 6,
+  LikeStartWith = 7,
+  LikeEndWith = 8,
+  NotLike = 9,
+  NotLikeStartWith = 10,
+  NotLikeEndWith = 11,
+  Is = 12,
+  IsNot = 13,
+  In = 14,
+  NotIn = 15,
+}
+
+export enum FilterRelation {
+  Empty,
+  And,
+  Or,
+}
+
+export enum FilterExpressType {
+  Value = 0,
+  Expression = 1,
+}
+
+export interface FilterCondition {
+  FilterField: string
+  Compare: FilterCompareType
+  Value: string
+  Relation: FilterRelation
+  Expresstype: FilterExpressType
+  Lbracket: string
+  Rbracket: string
+}

package/templates/lib/components/common/src/utils/src/resove-asset.ts

@@ -0,0 +1,33 @@
+const getKebabCase = (str: string) => {
+  return str.replace(/[A-Z]/g, function (i) {
+    return "-" + i.toLowerCase();
+  });
+};
+const getCamelCase = (str: string) => {
+  return str.replace(/-([a-z])/g, function (all, i) {
+    return i.toUpperCase();
+  });
+};
+
+const hasOwn = (v: object, s: string)=> Object.prototype.hasOwnProperty.call(v, s);
+
+export function resolveAsset (
+  assets: Record<string, any>,
+  id: string
+): any {
+  /* istanbul ignore if */
+  if (typeof id !== 'string') {
+    return;
+  }
+  // check local registration variations first
+  if (hasOwn(assets, id)) {return assets[id];}
+  const camelizedId = getKebabCase(id);
+  if (hasOwn(assets, camelizedId)) {return assets[camelizedId];}
+  const PascalCaseId = getCamelCase(camelizedId);
+  if (hasOwn(assets, PascalCaseId)) {return assets[PascalCaseId];}
+
+  // fallback to prototype chain
+  const res = assets[id] || assets[camelizedId] || assets[PascalCaseId];
+  
+  return res;
+}

package/templates/lib/components/common/src/utils/src/string.ts

@@ -0,0 +1,18 @@
+export function trimExtraChar(value: string, char: string, regExp: RegExp) {
+  const index = value.indexOf(char);
+
+  if (index === -1) {
+    return value;
+  }
+
+  if (char === '-' && index !== 0) {
+    return value.slice(0, index);
+  }
+
+  return value.slice(0, index + 1) + value.slice(index).replace(regExp, '');
+};
+
+export function camelToKebabCase(camelStr: string) {
+  // 首字母转小写，其余每个大写字母前加下划线并转小写
+  return camelStr.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}