@farris/cli 2.0.2 → 2.0.3

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

@@ -0,0 +1,150 @@
+@keyframes fm-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fm-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.fm-fade {
+  &-enter-active {
+    animation: 0.3s fm-fade-in both ease-out;
+  }
+
+  &-leave-active {
+    animation: 0.3s fm-fade-out both ease-in;
+  }
+}
+
+.fm-slide-up {
+  &-enter-from,
+  &-leave-to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.fm-slide-down {
+  &-enter-from,
+  &-leave-to {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.fm-slide-left {
+  &-enter-from,
+  &-leave-to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+.fm-slide-right {
+  &-enter-from,
+  &-leave-to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.fm-slide-up-enter-active,
+.fm-slide-down-enter-active,
+.fm-slide-left-enter-active,
+.fm-slide-right-enter-active {
+  transition-timing-function: ease-out;
+}
+.fm-slide-up-leave-active,
+.fm-slide-down-leave-active,
+.fm-slide-left-leave-active,
+.fm-slide-right-leave-active {
+  transition-timing-function: ease-in;
+}
+
+.fm-slide-in-enter-active,
+.fm-slide-in-leave-active,
+.fm-slide-out-enter-active,
+.fm-slide-out-leave-active {
+  will-change: transform;
+  transition: all 0.3s;
+  height: 100%;
+  width: 100%;
+  top: 0px;
+  position: absolute;
+  backface-visibility: hidden;
+  perspective: 1000;
+}
+
+.fm-slide-in-leave-to,
+.fm-slide-out-enter-from {
+  transform: translateX(-100%);
+  opacity: 0;
+}
+.fm-slide-in-enter-from,
+.fm-slide-out-leave-to {
+  transform: translateX(100%);
+  opacity: 0;
+}
+
+@keyframes fm-drop-down-in {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fm-drop-down-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+.fm-drop-down {
+  &-enter-active {
+    animation: 0.3s fm-drop-down-in both ease-out;
+  }
+  &-leave-active {
+    animation: 0.3s fm-drop-down-out both ease-in;
+  }
+}
+@keyframes fm-circular {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0
+  }
+
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -40
+  }
+
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -120
+  }
+}
+@keyframes fm-rotate {
+  from {
+    -webkit-transform: rotate(0);
+    transform: rotate(0)
+  }
+
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg)
+  }
+}

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

@@ -0,0 +1,63 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+  scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+  font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
+    "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
+    "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
+    "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
+    SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}

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

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'farrisMobile';
+  font-style: normal;
+  font-weight: normal;
+  src: url(./fonts/farris-mobile-icon.ttf) format('truetype');
+}

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

@@ -0,0 +1,4 @@
+// @import './base';
+// @import './icon';
+// @import './variables';
+// @import './animation';

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

@@ -0,0 +1,204 @@
+/*  
+基于 BEM（Block Element Modifier）命名规范的 SCSS 混合（mixins）和辅助函数，用于生成符合 BEM 规范的 CSS 类名
+*/
+
+// 命名空间前缀，所有类名都会以 fm- 开头
+$namespace: 'fm';
+// 元素分隔符，用于连接 Block 和 Element，例如 fm-block__element
+$element-separator: '__';
+//修饰符分隔符，用于连接 Block/Element 和 Modifier，例如 fm-block--modifier
+$modifier-separator :'--';
+//状态前缀，用于标识组件的状态，例如 is-active
+$state-prefix: 'is-';
+
+/**
+  功能：将传入的选择器转换为字符串形式，并去掉首尾的引号。
+  用途：在后续函数中用于解析选择器内容。
+*/
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+  @return $selector;
+}
+
+/*
+  功能：检查选择器是否包含修饰符分隔符 --。
+  用途：判断是否需要特殊处理修饰符规则
+*/
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, $modifier-separator) {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+/*
+  功能：检查选择器是否包含状态前缀 .is-。
+  用途：判断是否需要处理状态相关的规则。
+*/
+@function containWhenFlag($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, '.' + $state-prefix) {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+/*
+  功能：检查选择器是否包含伪类（如 :hover、:active 等）。
+  用途：判断是否需要处理伪类规则。
+*/
+@function containPseudoClass($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+/*
+  功能：综合判断选择器是否包含修饰符、状态或伪类。
+  用途：决定是否需要特殊嵌套规则。
+*/
+@function hitAllSpecialNestRule($selector) {
+
+  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
+}
+
+/*
+  功能：生成 Block 的基础类名。
+  用法：
+    输入： @include b(button) { color: red; }
+    输出：.fm-button { color: red; }
+*/
+@mixin b($block) {
+
+  $B: #{$namespace + '-' + $block} !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+/*
+  功能：生成 Element 的类名。
+  用法：
+    输入： 
+      @include b(button) {
+        @include e(text) {
+          font-size: 14px;
+        }
+      }
+    输出：
+      .fm-button__text {
+        font-size: 14px;
+      }
+    
+*/
+@mixin e($element, $inheritParent: false) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: "";
+  $insertSelector: "";
+
+  @each $unit in $element {
+    @if $inheritParent {
+      $currentSelector: #{$currentSelector + $selector + $element-separator + $unit + ","};
+    } @else {
+      $currentSelector: #{$currentSelector + "." + $B + $element-separator + $insertSelector + $unit + ","};
+    }
+  }
+
+  @if hitAllSpecialNestRule($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  }
+
+  @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+/*
+  功能：生成 Modifier 的类名。
+  用法：
+    输入： 
+      @include b(button) {
+        @include m(disabled) {
+          opacity: 0.5;
+        }
+      }
+    输出：
+      .fm-button--disabled {
+        opacity: 0.5;
+      }
+    
+*/
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: "";
+
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+/*
+  功能：生成根节点上的 Modifier 类名。
+  用法：
+    输入： 
+      @include b(button) {
+        @include e(text) {
+          @include root-m(disabled) {
+            pointer-events: none;
+          }
+        }
+      }
+      
+    输出：
+      .fm-button--disabled {
+        pointer-events: none;
+      }
+*/
+@mixin root-m($modifier) {
+  $selector: #{"." + $B};
+  $currentSelector: "";
+
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector +  & + $selector + $modifier-separator + $unit + ","};
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}

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);
+    }
+  }
+}