eoss-mobiles 0.1.13

package/packages/theme-chalk/src/index.scss

@@ -0,0 +1,38 @@
+@import "./base.scss";
+@import "./loading.scss";
+@import "./button.scss";
+@import "./button-group.scss";
+@import "./selector.scss";
+@import "./field.scss";
+@import "./radio.scss";
+@import "./picker.scss";
+@import "./cell.scss";
+@import "./circle.scss";
+@import "./switch.scss";
+@import "./uploader.scss";
+@import "./grid.scss";
+@import "./grid-item.scss";
+@import "./empty.scss";
+@import "./date.scss";
+@import "./search.scss";
+@import "./tabs.scss";
+@import "./tab.scss";
+@import "./table.scss";
+@import "./table-column.scss";
+@import "./tag.scss";
+@import "./nav-bar.scss";
+@import "./list.scss";
+@import "./flow.scss";
+@import "./popover.scss";
+@import "./checkbox.scss";
+@import "./calendar.scss";
+@import "./count-down.scss";
+@import "./form.scss";
+@import "./skeleton.scss";
+@import "./cascader.scss";
+@import "./image-preview.scss";
+@import "./rate.scss";
+@import "./action-sheet.scss";
+@import "./popup.scss";
+@import "./stepper.scss";
+@import "./pagination.scss";

package/packages/theme-chalk/src/mixins/color.scss

@@ -0,0 +1,117 @@
+// 根据颜色获取对应的hsv，在tinycolor中首先进行了归一化处理，这里没有
+// 返回的结果h是0~360，代表的是色相的角度， sv的范围0-1
+@function rbgToHsv($color) {
+  $red: red($color);
+  $green: green($color);
+  $blue: blue($color);
+  $max: max($red, $green, $blue);
+  $min: min($red, $green, $blue);
+  $diff: $max - $min;
+  $h: 0;
+  @if $max == $min {
+    $h: 0;
+  } @else if $max == $red {
+    $h: 60 * ($green - $blue) / $diff + if($green >= $blue, 0, 360);
+  } @else if $max == $green {
+    $h: 60 * ($blue - $red) / $diff + 120;
+  } @else if $max == $blue {
+    $h: 60 * ($red - $green) / $diff + 240;
+  }
+  $s: if($max == 0, 0, $diff / $max);
+  $v: $max / 255;
+  @return $h, $s, $v;
+}
+// hsv转化成rgb，借鉴了tinycolor的做法，避免通过$th的值判断来获取对应的rgb的取值
+// $t1~4的计算目前不清楚为什么这样做
+// @function hsvTorgb($h, $s, $v) {
+//   $th: floor($h / 60);
+//   $t1: $h / 60 - $th;
+//   $t2: $v * (1 - $s);
+//   $t3: $v * (1 - $t1 * $s);
+//   $t4: $v * (1 - (1 - $t1) * $s);
+//   $i: $th % 6 + 1;
+//   $r: nth(($v, $t3, $t2, $t2, $t4, $v), $i);
+//   $g: nth(($t4, $v, $v, $t3, $t2, $t2), $i);
+//   $b: nth(($t2, $t2, $t4, $v, $v, $t3), $i);
+//   @return rgb(round($r * 255), round($g * 255), round($b * 255));
+// }
+// 求一个数的n次幂
+@function pow($number, $n) {
+  $ret: 1;
+  @if $n >= 0 {
+    @for $i from 1 through $n {
+      $ret: $ret * $number;
+    }
+  } @else {
+    @for $i from $n to 0 {
+      $ret: $ret / $number;
+    }
+  }
+  @return $ret;
+}
+// 浮点数保留小数位
+@function toFixed($float, $digits: 2) {
+  $pow: pow(10, $digits);
+  @return round($float * $pow) / $pow;
+}
+//转换色相
+@function getHue($h, $i, $isLight) {
+  $hue: null;
+  @if $h >= 60 and $h <= 240 {
+    $hue: if($isLight, $h - $hueStep * $i, $h + $hueStep * $i);
+  } @else {
+    $hue: if($isLight, $h + $hueStep * $i, $h - $hueStep * $i);
+  }
+  $hue: ($hue + 360) % 360;
+  @return round($hue);
+}
+// 转换饱和度
+@function getSaturation($s, $i, $isLight) {
+  $saturation: null;
+  @if $isLight {
+    $saturation: $s - $saturationStep1 * $i;
+  } @else if $i == $darkColorCount {
+    $saturation: $s + $saturationStep1;
+  } @else {
+    $saturation: $s + $saturationStep2 * $i;
+  }
+  $saturation: min($saturation, 1);
+
+  @if $isLight and $i == $lightColorCount and $saturation > 0.1 {
+    $saturation: 0.1;
+  }
+  $saturation: max($saturation, 0.06);
+  @return toFixed($saturation, 2);
+}
+// 转换明度
+@function getValue($v, $i, $isLight) {
+  $value: min(
+    if($isLight, $v + $brightnessStep1 * $i, $v - $brightnessStep2 * $i),
+    1
+  );
+  @return toFixed($value, 2);
+}
+$hueStep: 2;
+$saturationStep1: 0.16;
+$saturationStep2: 0.05;
+$brightnessStep1: 0.05;
+$brightnessStep2: 0.15;
+$lightColorCount: 5;
+$darkColorCount: 4;
+
+// 根据颜色和对应的色板位置，计算出对应的色板颜色
+@function getColor($color, $index) {
+  $isLight: if($index <= 6, true, false);
+  $hsv: rbgToHsv($color);
+  //这里将i转换成以主色为中心，两侧的i值逐渐增大
+  $i: if(
+    $isLight,
+    $lightColorCount + 1 - $index,
+    $index - $lightColorCount - 1
+  );
+  @return hsvTorgb(
+    getHue(nth($hsv, 1), $i, $isLight),
+    getSaturation(nth($hsv, 2), $i, $isLight),
+    getValue(nth($hsv, 3), $i, $isLight)
+  );
+}

package/packages/theme-chalk/src/mixins/mixins.scss

@@ -0,0 +1,25 @@
+@mixin mp($type, $name, $num) {
+  $B: 'es-' + $type + '-' + $name + '-' + $num !global;
+  @if $name == false {
+    $B: 'es-' + $type + '-' + $num !global;
+  }
+  .#{$B} {
+    @if $name == false {
+      #{$type}: #{$num}px;
+    } @else {
+      #{$type}-#{$name}: #{$num}px;
+    }
+  }
+}
+@mixin flex($num) {
+  $B: 'es-flex' + '-' + $num !global;
+  .#{$B} {
+    flex: $num;
+  }
+}
+@mixin gutter($type, $num) {
+  $B: 'es-gutter' + '-' + $type + '-' + $num !global;
+  .#{$B} + .#{$B} {
+    margin-#{$type}: #{$num}px;
+  }
+}

package/packages/theme-chalk/src/navbar.scss

@@ -0,0 +1,6 @@
+@import './common/var.scss';
+.em-nav-bar{
+  .van-nav-bar .van-icon,.van-nav-bar__text{
+    color: $--color-primary;
+  }
+}

package/packages/theme-chalk/src/pagination.scss

@@ -0,0 +1,10 @@
+@import './common/var.scss';
+.em-pagination{
+  .van-pagination__item{
+    color: $--color-primary;
+  }
+}
+  .van-pagination__item--active,.van-pagination__item:active{
+    background-color:$--color-primary ;
+    color:#fff !important
+  }

package/packages/theme-chalk/src/picker.scss

@@ -0,0 +1,27 @@
+@import 'common/var.scss';
+.em-picker{
+  .van-tag{
+    padding: 5px;
+  }
+  .em-list .van-cell{
+    text-align: left;
+  }
+  .check-picker{
+    .van-picker__columns{
+      display: none !important;
+    }
+    .em-picker__columns{
+      height: 264px;
+      overflow: auto;
+      overflow-x: hidden;
+    }
+    .van-checkbox__icon--checked .van-icon{
+      border: 1px solid $--color-primary;
+      background:$--color-primary ;
+    }
+    .van-checkbox{
+      float: right;
+    }
+  }
+  
+}

package/packages/theme-chalk/src/radio.scss

@@ -0,0 +1,7 @@
+@import './common/var.scss';
+.em-radio-group{
+  .van-radio__icon--checked .van-icon{
+    border: 1px solid $--color-primary;
+    background:$--color-primary ;
+  }
+}

package/packages/theme-chalk/src/selector.scss

@@ -0,0 +1,218 @@
+@import './common/var.scss';
+@import './fonts/iconfont.scss';
+@import './tree.scss';
+.em-selector {
+  .selector-field {
+    .hide-label{
+      .van-field__label{
+        display: none;
+      }
+    }
+    .select-list {
+      display: flex;
+      overflow-x: auto;
+      flex-wrap: wrap;
+      flex: 1;
+      .item {
+        height: 29px;
+        padding: 0px 8px;
+        border-radius: 15px;
+        display: flex;
+        align-items: center;
+        border: 1px solid $--color-primary;
+        font-size: 14px;
+        display: flex;
+        font-size: 14px;
+        font-weight: 400;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        color: $--color-primary;
+        margin-top: 2px;
+        margin-right: 2px;
+        .delte {
+          margin-left: 9px;
+          display: flex;
+          align-items: center;
+          img {
+            width: 15px;
+            height: 15px;
+          }
+        }
+      }
+    }
+  }
+  .selector-checkList{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .em-select-tree-content {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    background-color: #fafafa;
+    z-index: 999;
+    display: flex;
+    flex-direction: column;
+    .head{
+      img{
+        margin-right: 10px;
+      }
+    }
+    .em-selector-nav-bar {
+      .van-nav-bar {
+        background: $--color-primary !important;
+        position: unset !important;
+      }
+      .van-nav-bar__title,
+      .van-nav-bar__text,
+      .van-icon {
+        color: #fff;
+      }
+      .van-hairline--bottom::after {
+        border: none;
+      }
+    }
+    .select-list {
+      display: flex;
+      overflow-x: auto;
+      flex-wrap: wrap;
+      flex: 1;
+      .item {
+        height: 29px;
+        padding: 0px 8px;
+        border-radius: 15px;
+        display: flex;
+        align-items: center;
+        border: 1px solid $--color-primary;
+        font-size: 14px;
+        display: flex;
+        font-size: 14px;
+        font-weight: 400;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        color: $--color-primary;
+        margin-top: 2px;
+        margin-right: 2px;
+        .delte {
+          margin-left: 9px;
+          display: flex;
+          align-items: center;
+          img {
+            width: 15px;
+            height: 15px;
+          }
+        }
+      }
+    }
+    .em-search-box {
+      // height: 80px;
+      padding: 10px;
+      background: $--color-primary;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+      justify-content: center;
+      .van-search {
+        padding: 0px;
+        width: 100%;
+        max-height: 40px;
+        border-radius: 4px;
+      }
+
+      .van-cell {
+        padding: 8px 8px 8px 0px !important;
+        display: flex !important;
+      }
+      .van-cell__value--alone {
+        font-size: 16px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #999999;
+      }
+      .van-icon-search {
+        font-size: 18px;
+        color: #999999;
+        font-weight: 600;
+      }
+      .van-field__control {
+        padding: 0px !important;
+        border: none !important;
+      }
+      .van-search__content {
+        max-height: 40px;
+      }
+    }
+    .em-tree-box {
+      // height: calc(100% - 173px);
+      flex: 1;
+      overflow-y: auto;
+    }
+    .em-btn-group {
+      // position: fixed;
+      padding: 9px 11px 9px 11px;
+      background-color: #fff;
+      display: flex;
+      justify-content: space-between;
+      // bottom: 12px;
+      // bottom: 0px;
+      width: 100%;
+      box-shadow: 0px 0px 12px 0px rgba(75, 12, 9, 0.06);
+      .select-list {
+        max-height: 95px;
+        overflow: auto;
+        width: 40%;
+        .name {
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+      .btn {
+        width: 154px;
+        height: 40px;
+        background: $--color-primary;
+        border-radius: 20px;
+        text-align: center;
+        line-height: 40px;
+        font-size: 18px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        flex-shrink: 0;
+      }
+      .select-list {
+        display: flex;
+        flex-wrap: wrap;
+        .item {
+          height: 29px;
+          padding: 0px 8px;
+          border-radius: 15px;
+          display: flex;
+          align-items: center;
+          border: 1px solid $--color-primary;
+          font-size: 14px;
+          display: flex;
+          font-size: 14px;
+          font-weight: 400;
+          color: $--color-primary;
+          margin-right: 8px;
+          margin-bottom: 3px;
+          .delte {
+            margin-left: 9px;
+            display: flex;
+            align-items: center;
+            img {
+              width: 15px;
+              height: 15px;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/packages/theme-chalk/src/stepper.scss

@@ -0,0 +1,10 @@
+@import './common/var.scss';
+.em-stepper{
+  .van-stepper--round .van-stepper__minus{
+    color:  $--color-primary;
+    border-color:  $--color-primary;
+  }
+  .van-stepper--round .van-stepper__plus{
+    background-color:  $--color-primary;
+  }
+}

package/packages/theme-chalk/src/switch.scss

@@ -0,0 +1,6 @@
+@import './common/var.scss';
+.em-switch{
+  .van-switch--on{
+    background: $--color-primary;
+  }
+}

package/packages/theme-chalk/src/table.scss

@@ -0,0 +1,42 @@
+@import './common/var.scss';
+.em-table.el-table {
+  .cell {
+    position: relative;
+  }
+  .em-table-input,
+  .em-picker .em-input,
+  .em-date .em-input,.em-selector .em-input{
+    border-radius: 3px;
+    border: 1px solid #d9d9d9;
+    .van-cell {
+      background-color: unset;
+    }
+    .van-field__error-message {
+      position: absolute;
+      bottom: -14px;
+    }
+  }
+
+  .el-table .em-row {
+    background: $--color-primary-light-2;
+  }
+  .em-table-header {
+    color: #fff;
+    background: $--color-primary;
+  }
+  .el-table .el-table__header-wrapper .is-center,
+  .el-table th.is-center {
+    background: $--color-primary;
+    color: #fff;
+  }
+  // .el-table  th{
+  //  background: red;
+  //  }
+  th {
+    background: unset;
+  }
+  .van-switch__node {
+    width: 0.9em;
+    height: 0.9em;
+  }
+}

package/packages/theme-chalk/src/tabs.scss

@@ -0,0 +1,21 @@
+@import './common/var.scss';
+.em-tabs {
+  .van-tabs__line {
+    background: $--color-primary;
+  }
+  
+  .van-tabs__nav--card {
+      border-color:  $--color-primary;
+      .van-tab {
+      color: $--color-primary;
+      border-right: 1px solid $--color-primary;
+    }
+    .van-tab:last-child{
+      border: none;
+    }
+    .van-tab--active{
+      color: #fff;
+      background:  $--color-primary;
+    }
+  }
+}

package/packages/theme-chalk/src/tag.scss

@@ -0,0 +1,13 @@
+@import './common/var.scss';
+.em-tag{
+  display: inline-block;
+  margin: 2px 5px;
+  
+  .van-tag--primary{
+    background: $--color-primary;
+  }
+  .van-tag--primary.van-tag--plain{
+    background:transparent;
+    color: $--color-primary
+  }
+}

package/packages/theme-chalk/src/theme.scss

@@ -0,0 +1,2 @@
+// @import "./common/var.scss"
+// @button-primary-background-color:$--color-primary

package/packages/theme-chalk/src/tree.scss

@@ -0,0 +1,115 @@
+@import './common/var.scss';
+.em-tree {
+  .em-tree-item {
+    background-color: #fff;
+    height: 56px;
+    overflow: hidden;
+    position: relative;
+    font-size: 15px;
+    font-family: PingFang SC;
+    font-weight: 400;
+    color: #333333;
+
+    &:last-child {
+      border: 0;
+    }
+
+    .title {
+      // padding: 8px 30px;
+      // font-size: 14px;
+      // height: 40px;
+      height: 56px;
+      display: flex;
+      align-items: center;
+      padding-left: 13px;
+      padding-right: 10px;
+      font-size: 15px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #333333;
+      justify-content: space-between;
+      position: relative;
+      // border-bottom: 1px solid #eeeeee;
+      .text {
+        display: flex;
+        align-items: center;
+        line-height: 16px;
+        width: calc(100% - 60px);
+        .label {
+          width: 4px;
+          height: 16px;
+          background: $--color-primary;
+          border-radius: 2px;
+          margin-right: 9px;
+        }
+      }
+      .right {
+        font-size: 14px;
+        right: 10px;
+        color: #999999;
+      }
+
+      .icon-quan {
+        color: #c8c9cc;
+        font-size: 17px;
+      }
+      .select-icon {
+        position: absolute;
+        top: 50%;
+        right: 48px;
+        transform: translate(0px, -50%);
+      }
+      .icon-gou {
+        color: $--color-primary;
+        font-size: 18px;
+      }
+    }
+
+    &.active {
+      height: auto;
+      min-height: 41px;
+      & > div > .em-tree {
+        padding-left: 15px;
+      }
+
+      /* &::after{
+					content: '';
+					position: absolute;
+					height: 1px;
+					width: 100%;
+					top: 30px;
+					left: 0;
+					background-color:#ddd;
+				} */
+      & > div > .title {
+        border: none;
+        & > .right {
+          transform: rotate(90deg);
+          // top: 15px;
+        }
+      }
+    }
+
+    .check-box {
+      padding-right: 10px;
+      .head {
+        img {
+          width: 30px;
+          height: 30px;
+        }
+      }
+      .icon-quan {
+        color: #c8c9cc;
+        font-size: 17px;
+      }
+
+      .icon-gou {
+        color: $--color-primary;
+        font-size: 18px;
+      }
+      .title {
+        border: none;
+      }
+    }
+  }
+}