@autobest-ui/components 1.2.1 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobest-ui/components",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "private": false,
   "description": "components common ui for React",
   "main": "lib/index.js",
@@ -46,5 +46,5 @@
     "react": ">=16.8.6",
     "react-transition-group": ">=4.2.2"
   },
-  "gitHead": "9ef0ab40c3bde68444141113da9e648963b88b83"
+  "gitHead": "5350d0e451afedca23971bd5469c6f7320145fae"
 }

package/esm/accordion/__stories__/style.css

@@ -1 +0,0 @@
-.demo-accordion{margin:.5rem auto;width:5rem;display:flex;justify-content:center;flex-direction:column}.accordion-demo-wrap{width:3rem}.accordion-demo-text{height:.3rem}.accordion-demo-title{display:block;padding:.1rem 0;background-color:#b0b0b0;color:#f7f7f7;cursor:pointer}.accordion-demo-a-content>li{padding:.1rem 0;border-top:dotted 1px grey}.accordion-demo-a-content>li:first-child{border:none;cursor:pointer}.accordion-demo-a-content>li>a{color:#333}.accordion-demo-d-content{padding-left:.1rem}.accordion-demo-d-content .ab-collapse{padding-left:.2rem}.accordion-demo-d-title{background-color:grey;display:block;padding:.1rem 0;color:#f7f7f7;cursor:pointer}

package/esm/accordion/__stories__/style.scss

@@ -1,59 +0,0 @@
-$namespace: accordion-demo;
-
-.demo-accordion {
-  margin: .5rem auto;
-  width: 5rem;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-}
-
-.#{$namespace} {
-  &-wrap {
-    width: 3rem;
-  }
-
-  &-text {
-    height: .3rem;
-  }
-
-  &-title {
-    display: block;
-    padding: .1rem 0;
-    background-color: #b0b0b0;
-    color: #f7f7f7;
-    cursor: pointer;
-  }
-
-  &-a-content {
-    > li {
-      padding: .1rem 0;
-      border-top: dotted 1px #808080;
-
-      &:first-child {
-        border: none;
-        cursor: pointer;
-      }
-
-      > a {
-        color: #333;
-      }
-    }
-  }
-
-  &-d-content {
-    padding-left: .1rem;
-
-    .ab-collapse {
-      padding-left: .2rem;
-    }
-  }
-
-  &-d-title {
-    background-color: #808080;
-    display: block;
-    padding: .1rem 0;
-    color: #f7f7f7;
-    cursor: pointer;
-  }
-}

package/esm/affix/__stories__/style.css

@@ -1 +0,0 @@
-.affix-demo{height:200vh;overflow:auto;width:1000px;max-width:100%;margin:auto}.affix-demo .affix-wrap{height:500px;width:100%;background-color:#d1d5db}

package/esm/affix/__stories__/style.scss

@@ -1,13 +0,0 @@
-.affix-demo {
-  height: 200vh;
-  overflow: auto;
-  width: 1000px;
-  max-width: 100%;
-  margin: auto;
-
-  .affix-wrap {
-    height: 500px;
-    width: 100%;
-    background-color: #D1D5DB;
-  }
-}

package/esm/carousel/__stories__/style.css

@@ -1 +0,0 @@
-.demo-carousel{margin:auto;position:relative}.demo-carousel p{display:flex;align-items:center;justify-content:center;font-size:32px;margin:0;color:#f3f4f6;height:225px;border-radius:3px}.ab-carousel{position:relative}.button-next,.button-prev{position:absolute;box-sizing:border-box;cursor:pointer;font-size:32px;top:50%;margin-top:-15px;width:30px;height:30px;color:#f3f4f6}.button-prev{left:5px;top:50%}.button-next{right:5px;top:50%}

package/esm/carousel/__stories__/style.scss

@@ -1,41 +0,0 @@
-.demo-carousel {
-  margin: auto;
-  position: relative;
-
-  p {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 32px;
-    margin: 0;
-    color: #F3F4F6;
-    height: 225px;
-    border-radius: 3px;
-  }
-}
-
-.ab-carousel {
-  position: relative;
-}
-
-.button-prev, .button-next {
-  position: absolute;
-  box-sizing: border-box;
-  cursor: pointer;
-  font-size: 32px;
-  top: 50%;
-  margin-top: -15px;
-  width: 30px;
-  height: 30px;
-  color: #F3F4F6;
-}
-
-.button-prev {
-  left: 5px;
-  top: 50%;
-}
-
-.button-next {
-  right: 5px;
-  top: 50%;
-}

package/esm/collapse/__stories__/style.css

@@ -1 +0,0 @@
-.demo-collapse{min-height:200px;padding:.2rem}.title-wrap{width:1rem;height:.4rem;background-color:#3b82f6;color:#f3f4f6}.title-wrap>strong{display:block;width:1rem;height:.2rem;background-color:#10b981;cursor:pointer}

package/esm/collapse/__stories__/style.scss

@@ -1,19 +0,0 @@
-.demo-collapse{
-  min-height: 200px;
-  padding: 0.2rem;
-}
-
-.title-wrap {
-  width: 1rem;
-  height: .4rem;
-  background-color: #3B82F6;
-  color: #F3F4F6;
-
-  > strong {
-    display: block;
-    width: 1rem;
-    height: .2rem;
-    background-color: #10B981;
-    cursor: pointer;
-  }
-}

package/esm/guide/__stories__/style.css

@@ -1 +0,0 @@
-.guide-demo .input{width:3rem}.guide-demo .btn{display:block;margin-top:.2rem;width:.8rem;height:.3rem;font-size:.16rem;text-align:center}

package/esm/guide/__stories__/style.scss

@@ -1,14 +0,0 @@
-.guide-demo {
-  .input {
-    width: 3rem;
-  }
-
-  .btn {
-    display: block;
-    margin-top: .2rem;
-    width: .8rem;
-    height: .3rem;
-    font-size: .16rem;
-    text-align: center;
-  }
-}

package/esm/icon/__stories__/iconNames.d.ts

@@ -1,2 +0,0 @@
-declare const _default: string[];
-export default _default;

package/esm/icon/__stories__/iconNames.js

@@ -1 +0,0 @@
-export default ['about_us_catalog', 'about_us_delivery', 'about_us_oem', 'about_us_price', 'about_us_privacy', 'about_us_warranty', 'account', 'account_setting', 'angle', 'arrow', 'arrow_rect_right', 'audio', 'bed', 'calendar', 'caret', 'cargo', 'carriers', 'cart', 'cart_fill', 'chat', 'chat_fill', 'check_mark', 'chevron', 'close', 'contact_us', 'contact_us_fill', 'dashboard', 'delete', 'delivery', 'delivery_circle', 'delivery_white', 'driver', 'discontinued', 'edit', 'electronics', 'ellipsis', 'empty', 'exclamation_circle_blue', 'exclamation_circle_brown', 'exclamation_circle_red', 'exclamation_triangle_white', 'exclamation_triangle_yellow', 'exclamation_triangle_yellow_o', 'exterior', 'filter', 'five_stars', 'help', 'help_center_account', 'help_center_account_circle', 'help_center_chat', 'help_center_clock', 'help_center_email', 'help_center_ordering', 'help_center_orders_payment_circle', 'help_center_part_question', 'help_center_part_question_circle', 'help_center_payment', 'help_center_phone', 'help_center_prices', 'help_center_product', 'help_center_refund', 'help_center_returns', 'help_center_returns_refunds_circle', 'help_center_shipping', 'help_center_shipping_circle', 'help_center_webshop', 'hook', 'hook_circle', 'hook_circle_blue', 'hook_circle_green', 'interior', 'lifestyle', 'lighting', 'login', 'logo', 'logout', 'maximize', 'menu', 'menu_fill', 'merchandise', 'minimize', 'minus', 'minus_square_o', 'my_account_account_setting', 'my_account_dashboard', 'my_account_order_history', 'my_vehicle', 'nismo', 'order', 'order_history', 'pdf', 'performance', 'phone', 'phone_fill', 'play_btn', 'plus', 'plus_square_o', 'prices', 'prices_circle', 'prices_white', 'roof', 'safety', 'search', 'search_plus', 'security', 'search_minus', 'select_vehicle_tip', 'service', 'service_circle', 'service_white', 'six_dot', 'sort', 'tip', 'trailering', 'trd', 'truck', 'under', 'user', 'view_by_grid', 'view_by_list', 'wheels', 'word'];

package/esm/icon/__stories__/style.css

@@ -1 +0,0 @@
-.demo-icon-list{padding:.2rem .1rem;font-size:.12rem;display:flex;width:100%;flex-wrap:wrap}.demo-icon-list>li{padding:.1rem;border:1px solid #e0e0e0;margin:.05rem;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#f3f4f6;min-width:1.2rem;min-height:1.5rem}.demo-icon-list>li svg{max-width:.5rem;height:.5rem}.demo-icon-list>li p{padding:0 5px;text-align:center;width:1rem;word-break:break-all}.demo-icon-list>li:hover{background-color:#e5e7eb}.demo-icon-list .demo-icon-name{padding-top:.15rem}

package/esm/icon/__stories__/style.scss

@@ -1,40 +0,0 @@
-.demo-icon-list{
-  padding: .2rem .1rem;
-  font-size: .12rem;
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-
-  & > li {
-    padding: .1rem;
-    border: 1px solid #E0E0E0;
-    margin: .05rem;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-color: #F3F4F6;
-    min-width: 1.2rem;
-    min-height: 1.5rem;
-
-    svg {
-      max-width: .5rem;
-      height: .5rem;
-    }
-
-    p {
-      padding: 0 5px;
-      text-align: center;
-      width: 1rem;
-      word-break: break-all;
-    }
-
-    &:hover{
-      background-color: #E5E7EB;
-    }
-  }
-
-  .demo-icon-name{
-    padding-top: .15rem;
-  }
-}

package/esm/icon/index.d.ts

@@ -1,43 +0,0 @@
-import React from 'react';
-export interface IconProps {
-    /**
-     * 图标名字
-     */
-    name: string;
-    /**
-     * 静态资源基础链接，这块是自定义资源使用的
-     */
-    assetBaseUrl?: string;
-    /**
-     * 图标组件外部嵌套的标签名
-     */
-    wrapper?: 'span' | 'div';
-    /**
-     *  图标宽度, 单位： rem
-     */
-    width?: number;
-    /**
-     * 图标高度, 单位： rem
-     */
-    height?: number;
-    /**
-     * 图标颜色值， svg 需要支持，如果已经有颜色，这个属性没有效果
-     */
-    color?: string;
-    /**
-     * 图标变换， 值是 css 的transform
-     */
-    transform?: string;
-    className?: string;
-    /**
-     * 图标点击的回调函数
-     */
-    onClick?: () => void;
-    onMouseDown?: () => void;
-    onTouchStart?: () => void;
-    onTouchEnd?: () => void;
-    onMouseEnter?: () => void;
-    onMouseLeave?: () => void;
-}
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLElement>>>;
-export default _default;

package/esm/icon/index.js

@@ -1,94 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import ReactSVG from 'react-svg';
-import UseConfig from '../use-config';
-var cls = 'ab-icon';
-var Icon = React.forwardRef(function (props, ref) {
-  var name = props.name,
-      assetBaseUrl = props.assetBaseUrl,
-      _a = props.wrapper,
-      wrapper = _a === void 0 ? 'span' : _a,
-      className = props.className,
-      color = props.color,
-      width = props.width,
-      height = props.height,
-      transform = props.transform,
-      onClick = props.onClick,
-      onMouseDown = props.onMouseDown,
-      onTouchStart = props.onTouchStart,
-      onTouchEnd = props.onTouchEnd,
-      onMouseEnter = props.onMouseEnter,
-      onMouseLeave = props.onMouseLeave;
-  var baseUrl = assetBaseUrl || UseConfig.assetCommonUiUrl;
-  var spanStyle = {};
-
-  if (width) {
-    spanStyle.width = width + "rem";
-    spanStyle.minWidth = width + "rem";
-    spanStyle.maxWidth = width + "rem";
-  }
-
-  if (height) {
-    spanStyle.height = height + "rem";
-    spanStyle.minHeight = height + "rem";
-    spanStyle.maxHeight = height + "rem";
-  } // transform 从 svgStyle 迁移到 spanStyle， 解决渲染时，重新创建后，动画不能执行的问题
-
-
-  if (transform) {
-    spanStyle.transform = transform;
-  }
-
-  var onIconClick = function onIconClick(ev) {
-    // 阻止冒泡
-    if (ev && onClick) {
-      ev.stopPropagation();
-      ev.preventDefault();
-
-      if (ev.nativeEvent && ev.nativeEvent.stopImmediatePropagation) {
-        ev.nativeEvent.stopImmediatePropagation();
-      }
-
-      onClick();
-    }
-  };
-
-  var beforeInjection = function beforeInjection(svg) {
-    // 设置svg样式
-    var svgStyle = '';
-
-    if (color) {
-      svgStyle = "fill: " + color + "; color: " + color + ";";
-    }
-
-    if (width) {
-      svgStyle += "width: " + width + "rem;";
-    }
-
-    if (height) {
-      svgStyle += "height: " + height + "rem;";
-    }
-
-    if (svgStyle === '') {
-      return;
-    }
-
-    svg.setAttribute('style', svgStyle);
-  };
-
-  return React.createElement(ReactSVG, {
-    ref: ref,
-    style: spanStyle,
-    beforeInjection: beforeInjection,
-    src: baseUrl + "/svg/" + name + ".svg",
-    wrapper: wrapper,
-    className: classNames(cls, className),
-    onClick: onIconClick,
-    onMouseDown: onMouseDown,
-    onTouchStart: onTouchStart,
-    onTouchEnd: onTouchEnd,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  });
-});
-export default React.memo(Icon);

package/esm/icon/style/index.css

@@ -1 +0,0 @@
-.ab-icon,.ab-icon div,.ab-icon span,.ab-icon svg{display:block}

package/esm/icon/style/index.d.ts

@@ -1 +0,0 @@
-export {};

package/esm/icon/style/index.js

@@ -1,5 +0,0 @@
-import { canUseDOM } from '@autobest-ui/utils';
-
-if (canUseDOM) {
-  require('./index.scss');
-}

package/esm/icon/style/index.scss

@@ -1,7 +0,0 @@
-$namespace: ab-icon;
-
-.#{$namespace}{
-  &, span, div, svg{
-    display: block;
-  }
-}

package/esm/lazy-image/__stories__/style.css

@@ -1 +0,0 @@
-.lazy-image-demo{margin-top:200vh}.lazy-image-demo img{display:block;width:400px;margin:.2rem}

package/esm/lazy-image/__stories__/style.scss

@@ -1,9 +0,0 @@
-.lazy-image-demo {
-  margin-top: 200vh;
-
-  img {
-    display: block;
-    width: 400px;
-    margin: .2rem;
-  }
-}

package/esm/loading-container/__stories__/style.css

@@ -1 +0,0 @@
-.loading-container-demo{margin:1rem;width:2rem;height:2rem;background:#b0b0b0}

package/esm/loading-container/__stories__/style.scss

@@ -1,6 +0,0 @@
-.loading-container-demo {
-  margin: 1rem;
-  width: 2rem;
-  height: 2rem;
-  background: #b0b0b0;
-}

package/esm/move/__stories__/style.css

@@ -1 +0,0 @@
-.demo-move{margin:.2rem auto;width:500px;height:500px;border:5px solid #ccc}

package/esm/move/__stories__/style.scss

@@ -1,6 +0,0 @@
-.demo-move{
-  margin: 0.2rem auto;
-  width: 500px;
-  height: 500px;
-  border: 5px solid #ccc;
-}

package/esm/popover/__stories__/style.css

@@ -1 +0,0 @@
-.popover-demo{padding:80px 60px;width:465px;height:400px;margin:auto;position:relative}.popover-demo button{width:100px;display:inline-block}.popover-demo-tip{height:60px;width:100px}

package/esm/popover/__stories__/style.scss

@@ -1,16 +0,0 @@
-.popover-demo{
-  padding: 80px 60px;
-  width: 465px;
-  height: 400px;
-  margin: auto;
-  position: relative;
-
-  button {
-    width: 100px;
-    display: inline-block;
-  }
-}
-.popover-demo-tip {
-  height: 60px;
-  width: 100px;
-}

package/esm/select/__stories__/style.css

@@ -1 +0,0 @@
-.select-demo{margin:10px auto;width:200px}.select-demo .select-group{width:1rem}

package/esm/select/__stories__/style.scss

@@ -1,8 +0,0 @@
-.select-demo{
-  margin: 10px auto;
-  width: 200px;
-
-  .select-group {
-    width: 1rem;
-  }
-}

package/esm/skeleton/__stories__/style.css

@@ -1 +0,0 @@
-.skeleton-demo{padding:.2rem}

package/esm/skeleton/__stories__/style.scss

@@ -1,3 +0,0 @@
-.skeleton-demo {
-  padding: .2rem;
-}

package/esm/table/__stories__/style.css

@@ -1 +0,0 @@
-.table-demo thead{background-color:#2b5797;color:#fff}.table-demo tbody tr.ab-table-expand-row{background-color:#fafafa}.table-demo tbody tr:hover{background-color:#f3f3f3}.table-demo td,.table-demo th{padding:.16rem;border-bottom:1px solid #d0d0d0}.table-demo td.ab-table-checkbox,.table-demo th.ab-table-checkbox{padding:.16rem 0}.table-demo .merged-cell{border-left:1px solid #d0d0d0;border-right:1px solid #d0d0d0}.table-demo-expanded{font-size:.2rem}

package/esm/table/__stories__/style.scss

@@ -1,34 +0,0 @@
-.table-demo {
-  thead {
-    background-color: #2b5797;
-    color: #fff;
-  }
-
-  tbody tr {
-    &.ab-table-expand-row {
-      background-color: #fafafa;
-    }
-
-    &:hover {
-      background-color: #f3f3f3;
-    }
-  }
-
-  th, td {
-    padding: .16rem;
-    border-bottom: 1px solid #D0D0D0;
-
-    &.ab-table-checkbox {
-      padding: .16rem 0;
-    }
-  }
-
-  .merged-cell {
-    border-left: 1px solid #D0D0D0;
-    border-right: 1px solid #D0D0D0;
-  }
-}
-
-.table-demo-expanded {
-  font-size: .2rem;
-}

package/esm/tabs/__stories__/style.css

@@ -1 +0,0 @@
-.tabs-demo{width:500px;margin:20px auto}.tabs-demo .ab-tabs-item{padding:2px 6px}

package/esm/tabs/__stories__/style.scss

@@ -1,8 +0,0 @@
-.tabs-demo {
-  width: 500px;
-  margin: 20px auto;
-
-  .ab-tabs-item {
-    padding: 2px 6px;
-  }
-}

package/lib/accordion/__stories__/style.css

@@ -1 +0,0 @@
-.demo-accordion{margin:.5rem auto;width:5rem;display:flex;justify-content:center;flex-direction:column}.accordion-demo-wrap{width:3rem}.accordion-demo-text{height:.3rem}.accordion-demo-title{display:block;padding:.1rem 0;background-color:#b0b0b0;color:#f7f7f7;cursor:pointer}.accordion-demo-a-content>li{padding:.1rem 0;border-top:dotted 1px grey}.accordion-demo-a-content>li:first-child{border:none;cursor:pointer}.accordion-demo-a-content>li>a{color:#333}.accordion-demo-d-content{padding-left:.1rem}.accordion-demo-d-content .ab-collapse{padding-left:.2rem}.accordion-demo-d-title{background-color:grey;display:block;padding:.1rem 0;color:#f7f7f7;cursor:pointer}

package/lib/accordion/__stories__/style.scss

@@ -1,59 +0,0 @@
-$namespace: accordion-demo;
-
-.demo-accordion {
-  margin: .5rem auto;
-  width: 5rem;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-}
-
-.#{$namespace} {
-  &-wrap {
-    width: 3rem;
-  }
-
-  &-text {
-    height: .3rem;
-  }
-
-  &-title {
-    display: block;
-    padding: .1rem 0;
-    background-color: #b0b0b0;
-    color: #f7f7f7;
-    cursor: pointer;
-  }
-
-  &-a-content {
-    > li {
-      padding: .1rem 0;
-      border-top: dotted 1px #808080;
-
-      &:first-child {
-        border: none;
-        cursor: pointer;
-      }
-
-      > a {
-        color: #333;
-      }
-    }
-  }
-
-  &-d-content {
-    padding-left: .1rem;
-
-    .ab-collapse {
-      padding-left: .2rem;
-    }
-  }
-
-  &-d-title {
-    background-color: #808080;
-    display: block;
-    padding: .1rem 0;
-    color: #f7f7f7;
-    cursor: pointer;
-  }
-}

package/lib/affix/__stories__/style.css

@@ -1 +0,0 @@
-.affix-demo{height:200vh;overflow:auto;width:1000px;max-width:100%;margin:auto}.affix-demo .affix-wrap{height:500px;width:100%;background-color:#d1d5db}

package/lib/affix/__stories__/style.scss

@@ -1,13 +0,0 @@
-.affix-demo {
-  height: 200vh;
-  overflow: auto;
-  width: 1000px;
-  max-width: 100%;
-  margin: auto;
-
-  .affix-wrap {
-    height: 500px;
-    width: 100%;
-    background-color: #D1D5DB;
-  }
-}

package/lib/carousel/__stories__/style.css

@@ -1 +0,0 @@
-.demo-carousel{margin:auto;position:relative}.demo-carousel p{display:flex;align-items:center;justify-content:center;font-size:32px;margin:0;color:#f3f4f6;height:225px;border-radius:3px}.ab-carousel{position:relative}.button-next,.button-prev{position:absolute;box-sizing:border-box;cursor:pointer;font-size:32px;top:50%;margin-top:-15px;width:30px;height:30px;color:#f3f4f6}.button-prev{left:5px;top:50%}.button-next{right:5px;top:50%}

package/lib/carousel/__stories__/style.scss

@@ -1,41 +0,0 @@
-.demo-carousel {
-  margin: auto;
-  position: relative;
-
-  p {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 32px;
-    margin: 0;
-    color: #F3F4F6;
-    height: 225px;
-    border-radius: 3px;
-  }
-}
-
-.ab-carousel {
-  position: relative;
-}
-
-.button-prev, .button-next {
-  position: absolute;
-  box-sizing: border-box;
-  cursor: pointer;
-  font-size: 32px;
-  top: 50%;
-  margin-top: -15px;
-  width: 30px;
-  height: 30px;
-  color: #F3F4F6;
-}
-
-.button-prev {
-  left: 5px;
-  top: 50%;
-}
-
-.button-next {
-  right: 5px;
-  top: 50%;
-}

package/lib/collapse/__stories__/style.css

@@ -1 +0,0 @@
-.demo-collapse{min-height:200px;padding:.2rem}.title-wrap{width:1rem;height:.4rem;background-color:#3b82f6;color:#f3f4f6}.title-wrap>strong{display:block;width:1rem;height:.2rem;background-color:#10b981;cursor:pointer}