@sheinx/shineout-style 3.0.0-alpha.1

package/cjs/button/button.js

@@ -0,0 +1,416 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.concat.js");
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// Dashed 用 Outline 的样式
+
+var button = function button(type, styles) {
+  return {
+    color: _theme.default["button".concat(type).concat(styles, "FontColor")],
+    backgroundColor: _theme.default["button".concat(type).concat(styles, "BackgroundColor")],
+    borderColor: _theme.default["button".concat(type).concat(styles, "BorderColor")],
+    '&:hover': {
+      color: _theme.default["button".concat(type).concat(styles, "HoverFontColor")],
+      backgroundColor: _theme.default["button".concat(type).concat(styles, "HoverBackgroundColor")],
+      borderColor: _theme.default["button".concat(type).concat(styles, "HoverBorderColor")]
+    },
+    '&:active': {
+      color: _theme.default["button".concat(type).concat(styles, "ActiveFontColor")],
+      backgroundColor: _theme.default["button".concat(type).concat(styles, "ActiveBackgroundColor")],
+      borderColor: _theme.default["button".concat(type).concat(styles, "ActiveBorderColor")]
+    },
+    '&:disabled': {
+      color: _theme.default["button".concat(type).concat(styles, "DisabledFontColor")],
+      backgroundColor: _theme.default["button".concat(type).concat(styles, "DisabledBackgroundColor")],
+      borderColor: _theme.default["button".concat(type).concat(styles, "DisabledBorderColor")]
+    },
+    // a 标签无 disabled 状态
+    '&$disabled': {
+      color: _theme.default["button".concat(type).concat(styles, "DisabledFontColor")],
+      backgroundColor: _theme.default["button".concat(type).concat(styles, "DisabledBackgroundColor")],
+      borderColor: _theme.default["button".concat(type).concat(styles, "DisabledBorderColor")]
+    }
+  };
+};
+var beforeLine = function beforeLine() {
+  return {
+    '&::before': {
+      position: 'absolute',
+      content: '" "',
+      height: '50%',
+      top: 'calc(25% + 1px)',
+      left: -1,
+      width: 1,
+      background: '#FFF'
+    },
+    '&:not($disabled):hover': {
+      '&::before': {
+        background: 'transparent'
+      },
+      '& + $button,& + * $button': {
+        '&::before': {
+          background: 'transparent'
+        }
+      }
+    }
+  };
+};
+var outlineBeforeLine = function outlineBeforeLine(type, styles) {
+  return {
+    '&::before': {
+      position: 'absolute',
+      content: '" "',
+      height: '50%',
+      top: 'calc(25% + 1px)',
+      left: -1,
+      width: 1,
+      background: _theme.default["button".concat(type).concat(styles, "BorderColor")]
+    },
+    '&:not(:disabled):hover': {
+      // before
+      '&::before': {
+        height: 'calc(100% + 2px)',
+        top: -1,
+        left: -1,
+        width: 1,
+        bottom: -1,
+        background: _theme.default["button".concat(type).concat(styles, "HoverBorderColor")]
+      },
+      '& + $button,& + * $button': {
+        '&::before': {
+          height: 'calc(100% + 2px)',
+          top: -1,
+          left: -1,
+          width: 1,
+          bottom: -1,
+          background: _theme.default["button".concat(type).concat(styles, "HoverBorderColor")]
+        }
+      },
+      // active
+      '&:active': {
+        '&::before': {
+          background: _theme.default["button".concat(type).concat(styles, "ActiveBorderColor")]
+        },
+        '& + $button,& + * $button': {
+          '&::before': {
+            background: _theme.default["button".concat(type).concat(styles, "ActiveBorderColor")]
+          }
+        }
+      }
+    },
+    '&$primary,&$success,&$warning,&$danger,$secondary': {
+      '&::before': {
+        height: 'calc(100% + 2px)',
+        top: -1,
+        left: -1,
+        width: 1,
+        bottom: -1,
+        background: "".concat(_theme.default["button".concat(type).concat(styles, "BorderColor")])
+      },
+      '& + :not(&)': {
+        '&::before': {
+          height: 'calc(100% + 2px)',
+          top: -1,
+          left: -1,
+          width: 1,
+          bottom: -1,
+          background: _theme.default["button".concat(type).concat(styles, "BorderColor")]
+        }
+      },
+      '&:disabled': {
+        '&::before': {
+          background: _theme.default["button".concat(type).concat(styles, "DisabledBorderColor")]
+        },
+        '& + :not(&)': {
+          '&::before': {
+            background: _theme.default["button".concat(type).concat(styles, "DisabledBorderColor")]
+          }
+        }
+      }
+    }
+  };
+};
+var textBeforeLine = function textBeforeLine() {
+  return {
+    '&::before': {
+      transition: 'all 0.3s',
+      position: 'absolute',
+      content: '" "',
+      height: '50%',
+      top: 'calc(25% + 1px)',
+      left: -1,
+      width: 1,
+      background: '#E8EBF0'
+    },
+    '&:not($disabled):hover': {
+      '&::before': {
+        background: 'transparent'
+      },
+      '& + $button,& + * $button': {
+        '&::before': {
+          background: 'transparent'
+        }
+      }
+    }
+  };
+};
+var loading = function loading(type, styles) {
+  var buttonStyle = button(type, styles);
+  return {
+    '&$loading': _objectSpread({}, buttonStyle['&$disabled'])
+  };
+};
+var ButtonStyle = {
+  button: {
+    outline: 'none',
+    fontWeight: 400,
+    cursor: 'pointer',
+    userSelect: 'none',
+    // textAlign: 'center',
+    whiteSpace: 'nowrap',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundImage: 'none',
+    verticalAlign: 'middle',
+    border: '1px solid transparent',
+    fontSize: _theme.default.buttonFontSize,
+    borderRadius: _theme.default.buttonBorderRadius,
+    lineHeight: _theme.default.lineHeightDynamic,
+    padding: "".concat(_theme.default.buttonPaddingY, " ").concat(_theme.default.buttonPaddingX),
+    transition: 'all 0.15s ease-in-out',
+    fontFamily: 'inherit',
+    height: _theme.default.buttonHeight,
+    '& + &': {
+      marginLeft: _theme.default.buttonNearlyMargin
+    },
+    '[class*="button-group"] > & + &': {
+      margin: 0
+    },
+    '&:active': {
+      animationDelay: '0s',
+      backgroundImage: 'none',
+      animationDuration: '0.4s',
+      animationFillMode: 'none',
+      animationIterationCount: '1',
+      animationDirection: 'normal',
+      animationPlayState: 'running',
+      animationTimingFunction: 'ease-out'
+    }
+  },
+  small: {
+    height: _theme.default.buttonSmallHeight,
+    fontSize: _theme.default.buttonSmallFontSize,
+    padding: "".concat(_theme.default.buttonSmallPaddingY, " ").concat(_theme.default.buttonSmallPaddingX),
+    '&$circle,&$square': {
+      width: "28px",
+      height: "28px"
+    }
+  },
+  large: {
+    height: _theme.default.buttonLargeHeight,
+    fontSize: _theme.default.buttonLargeFontSize,
+    padding: "".concat(_theme.default.buttonLargePaddingY, " ").concat(_theme.default.buttonLargePaddingX),
+    '&$circle,&$square': {
+      width: "40px",
+      height: "40px"
+    }
+  },
+  default: _objectSpread({}, button('Secondary', '')),
+  primary: _objectSpread({}, button('Primary', '')),
+  secondary: _objectSpread({}, button('Secondary', '')),
+  danger: _objectSpread({}, button('Danger', '')),
+  warning: _objectSpread({}, button('Warning', '')),
+  success: _objectSpread({}, button('Success', '')),
+  link: {},
+  outline: {
+    '&$default': _objectSpread({}, button('Secondary', 'Outline')),
+    '&$primary': _objectSpread({}, button('Primary', 'Outline')),
+    '&$success': _objectSpread({}, button('Success', 'Outline')),
+    '&$danger': _objectSpread({}, button('Danger', 'Outline')),
+    '&$warning': _objectSpread({}, button('Warning', 'Outline')),
+    '&$secondary': _objectSpread({}, button('Secondary', 'Outline'))
+  },
+  dashed: {
+    '&$default': _objectSpread({}, button('Secondary', 'Outline')),
+    '&$primary': _objectSpread({}, button('Primary', 'Outline')),
+    '&$success': _objectSpread({}, button('Success', 'Outline')),
+    '&$danger': _objectSpread({}, button('Danger', 'Outline')),
+    '&$warning': _objectSpread({}, button('Warning', 'Outline')),
+    '&$secondary': _objectSpread({}, button('Secondary', 'Outline')),
+    borderStyle: 'dashed'
+  },
+  text: {
+    '&$default': _objectSpread(_objectSpread({}, button('Secondary', 'Text')), {}, {
+      backgroundColor: 'transparent'
+    }),
+    '&$primary': _objectSpread({}, button('Primary', 'Text')),
+    '&$success': _objectSpread({}, button('Success', 'Text')),
+    '&$danger': _objectSpread({}, button('Danger', 'Text')),
+    '&$warning': _objectSpread({}, button('Warning', 'Text')),
+    '&$secondary': _objectSpread({}, button('Secondary', 'Text'))
+  },
+  href: {
+    textDecoration: 'none',
+    boxSizing: 'border-box',
+    color: 'red',
+    '$primary&': {
+      color: 'blue'
+    },
+    '$disabled&': {
+      color: 'blue'
+    },
+    '&$danger': _objectSpread({}, button('Danger', ''))
+  },
+  round: {
+    borderRadius: _theme.default.buttonRoundBorderRadius
+  },
+  circle: {
+    width: "32px",
+    height: "32px",
+    borderRadius: _theme.default.buttonCircleBorderRadius
+  },
+  square: {
+    width: "32px",
+    height: "32px",
+    borderRadius: _theme.default.buttonSquareBorderRadius,
+    '& $spin': {
+      margin: 0
+    }
+  },
+  disabled: {
+    cursor: 'not-allowed'
+  },
+  loading: {
+    cursor: 'not-allowed',
+    '&$default': _objectSpread({}, loading('Secondary', '')),
+    '&$primary': _objectSpread({}, loading('Primary', '')),
+    '&$success': _objectSpread({}, loading('Success', '')),
+    '&$danger': _objectSpread({}, loading('Danger', '')),
+    '&$warning': _objectSpread({}, loading('Warning', '')),
+    '&$secondary': _objectSpread({}, loading('Secondary', ''))
+  },
+  groupItem: {},
+  group: {
+    // 2.x 之前非 inline-block
+    display: 'inline-block',
+    // 第一个元素下的所有 button 标签的元素
+    '& > :first-child$button,& > :first-child $button': {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+      borderRight: 'none',
+      '&::before': {
+        display: 'none'
+      }
+    },
+    // 最后一个元素下的所有 button 标签的元素
+    '& > :last-child$button,& > :last-child $button': {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      borderLeft: 'none'
+    },
+    '& > :not(:first-child):not(:last-child)$button,& > :not(:first-child):not(:last-child) $button': {
+      borderRadius: 0,
+      borderLeft: 'none',
+      borderRight: 'none'
+    },
+    // 填充型 button
+    '& $button:not($outline):not($dashed):not($text)': {
+      position: 'relative',
+      '&::before': {
+        transition: 'all 0.3s'
+      },
+      // secondary 比较特殊，单独拎出来写覆盖掉 &::before
+      '&$secondary': _objectSpread(_objectSpread({}, beforeLine()), {}, {
+        '&::before': {
+          position: 'absolute',
+          content: '" "',
+          height: '50%',
+          top: 'calc(25% + 1px)',
+          left: -1,
+          width: 1,
+          background: '#E8EBF0'
+        },
+        '& + :not(&),& + * $button:not(&)': {
+          '&::before': {
+            background: 'transparent'
+          }
+        },
+        '& + $groupItem $button:not(&)': {
+          '&::before': {
+            background: 'transparent'
+          }
+        }
+      }),
+      // primary, success, warning, danger 分割线样式
+      '&$primary,&$success,&$warning,&$danger': _objectSpread({}, beforeLine()),
+      // priamry success warning danger secondary 两两之间如果不是紧挨着，则去除中间的分割线
+      '&$primary,&$success,&$warning,&$danger,$secondary': {
+        '& + :not(&),& + * $button:not(&)': {
+          '&::before': {
+            background: 'transparent'
+          }
+        },
+        '& + $button:not(&)': {
+          '&::before': {
+            background: 'transparent'
+          }
+        }
+      }
+    },
+    // outline 型 button
+    '& $outline': {
+      position: 'relative',
+      '&::before': {
+        transition: 'all 0.3s'
+      },
+      // secondary 比较特殊，单独拎出来写覆盖掉 &::before
+      '&$secondary': _objectSpread(_objectSpread({}, outlineBeforeLine('Secondary', 'Outline')), {}, {
+        '&::before': {
+          position: 'absolute',
+          content: '" "',
+          height: '50%',
+          top: 'calc(25% + 1px)',
+          left: -1,
+          width: 1,
+          background: '#E8EBF0' // Neutral-border-1
+        }
+      }),
+
+      '&$primary': _objectSpread({}, outlineBeforeLine('Primary', 'Outline')),
+      '&$success': _objectSpread({}, outlineBeforeLine('Success', 'Outline')),
+      '&$warning': _objectSpread({}, outlineBeforeLine('Warning', 'Outline')),
+      '&$danger': _objectSpread({}, outlineBeforeLine('Danger', 'Outline'))
+    },
+    // text 型 button
+    '& $text': _objectSpread({
+      position: 'relative'
+    }, textBeforeLine()),
+    // dashed 型 button
+    '&$dashed': {
+      position: 'relative',
+      borderStyle: 'none'
+    }
+  },
+  spin: {
+    display: 'inline-block',
+    marginRight: _theme.default.buttonSpinMargin,
+    '& div': {
+      borderColor: 'inherit',
+      borderTopColor: 'transparent'
+    }
+  }
+};
+var _default = ButtonStyle;
+exports.default = _default;

package/cjs/button/index.d.ts

@@ -0,0 +1,4 @@
+import buttonStyle from './button';
+declare const useButtonStyle: (data?: undefined) => import("jss").Classes<"button" | "link" | "small" | "outline" | "circle" | "text" | "round" | "dashed" | "default" | "large" | "disabled" | "square" | "success" | "warning" | "danger" | "loading" | "primary" | "secondary" | "href" | "group" | "groupItem" | "spin">;
+export { buttonStyle, useButtonStyle };
+export default useButtonStyle;

package/cjs/button/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "buttonStyle", {
+  enumerable: true,
+  get: function get() {
+    return _button.default;
+  }
+});
+exports.useButtonStyle = exports.default = void 0;
+var _jssStyle = require("../jss-style");
+var _button = _interopRequireDefault(require("./button"));
+var useButtonStyle = (0, _jssStyle.styled)(_button.default, 'button');
+exports.useButtonStyle = useButtonStyle;
+var _default = useButtonStyle;
+exports.default = _default;

package/cjs/carousel/carousel.d.ts

@@ -0,0 +1,35 @@
+import { JsStyles } from '../jss-style';
+export interface CarouselClasses {
+    wrapper?: string;
+    animationSlide?: string;
+    animationFade?: string;
+    animationSlideY?: string;
+    directionForward?: string;
+    directionBackward?: string;
+    directionStop?: string;
+    slider?: string;
+    item?: string;
+    itemCurrent?: string;
+    itemPre?: string;
+    arrowWrapper?: string;
+    arrowHover?: string;
+    arrowItem?: string;
+    arrowLeft?: string;
+    arrowRight?: string;
+    indicatorWrapper?: string;
+    indicatorCenter?: string;
+    indicatorLeft?: string;
+    indicatorRight?: string;
+    indicatorOuter?: string;
+    indicatorTypeCircle?: string;
+    indicatorTypeNumber?: string;
+    indicatorTypeLine?: string;
+    indicatorTypeSlider?: string;
+    indicatorArrow?: string;
+    indicatorNumber?: string;
+    indicator?: string;
+    indicatorActive?: string;
+}
+export declare type CarouselClassType = keyof CarouselClasses;
+declare const carouselStyle: JsStyles<CarouselClassType>;
+export default carouselStyle;