@sheinx/shineout-style 3.0.0-alpha.1

package/esm/rate/rate.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+// const animation = {
+//   '@keyframes scale': {
+//     '0%': {
+//       transform: 'scale(1)',
+//     },
+//     '80%': {
+//       transform: 'scale(1.4)',
+//       opacity: 0.8,
+//     },
+//     '81%': {
+//       transform: 'scale(1.2)',
+//     },
+//     '100%': {
+//       transform: 'scale3d(1.2)',
+//     },
+//   },
+// }
+
+var rateStyle = {
+  // ...animation,
+  wrapper: {
+    display: 'inline-block'
+  },
+  inner: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  item: {
+    '&:not(:first-child)': {
+      marginLeft: _theme.default.rateGap
+    },
+    position: 'relative',
+    display: 'flex',
+    boxSizing: 'border-box',
+    alignItems: 'center',
+    width: _theme.default.rateSize,
+    fontSize: _theme.default.rateSize,
+    lineHeight: 1,
+    '&:not($itemDisabled):hover': {
+      cursor: 'pointer',
+      transform: 'scale(1.2)'
+    },
+    transition: 'transform .2s cubic-bezier(.34,.69,.1,1)'
+  },
+  itemBg: {
+    display: 'flex',
+    alignContent: 'center',
+    width: '100%',
+    height: '100%',
+    transition: 'none',
+    color: _theme.default.rateBackgroundColor
+  },
+  itemFront: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    opacity: 0,
+    color: _theme.default.rateForntBackgroundColor
+  },
+  itemHalf: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    overflow: 'hidden',
+    width: '50%',
+    opacity: 0,
+    color: _theme.default.rateForntBackgroundColor,
+    '& > svg': {
+      width: '1em',
+      height: '1em'
+    }
+  },
+  itemChecked: {
+    '& $itemFront': {
+      opacity: 1
+    },
+    '& $itemBg': {
+      opacity: 0
+    }
+  },
+  itemCheckedHalf: {
+    '& $itemHalf': {
+      opacity: 1
+    }
+  },
+  text: {
+    fontSize: _theme.default.rateFontSize,
+    color: _theme.default.rateFontColor,
+    paddingLeft: 10
+  },
+  itemDisabled: {},
+  itemAnimation: {
+    // animation: '$scale 0.2s ease-out',
+  }
+};
+var _default = rateStyle;
+exports.default = _default;

package/esm/select/index.d.ts

@@ -0,0 +1,5 @@
+import selectStyle, { SelectClasses } from './select';
+declare const useSelectStyle: (data?: undefined) => import("jss").Classes<keyof SelectClasses>;
+export type { SelectClasses };
+export { selectStyle, useSelectStyle };
+export default useSelectStyle;

package/esm/select/index.js

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

package/esm/select/select.d.ts

@@ -0,0 +1,42 @@
+import { JsStyles } from '../jss-style';
+export declare type SelectClasses = {
+    wrapper: string;
+    wrapperDisabled: string;
+    wrapperSmall: string;
+    wrapperLarge: string;
+    wrapperFocus: string;
+    wrapperError: string;
+    wrapperNoBorder: string;
+    wrapperUnderline: string;
+    wrapperInnerTitle: string;
+    wrapperInnerTitleTop: string;
+    wrapperInnerTitleBottom: string;
+    wrapperPaddingBox: string;
+    resultWrapper: string;
+    result: string;
+    resultAlignRight: string;
+    resultAlignLeft: string;
+    resultAlignCenter: string;
+    resultText: string;
+    resultTextActive: string;
+    resultTextDisabled: string;
+    resultTextWrapper: string;
+    resultTextPadding: string;
+    placeholder: string;
+    pickerWrapper: string;
+    ellipsis: string;
+    multiple: string;
+    checkedIcon: string;
+    list: string;
+    virtualList: string;
+    option: string;
+    optionInner: string;
+    optionHover: string;
+    optionActive: string;
+    optionDisabled: string;
+    optionGroup: string;
+    optionGroupTitle: string;
+};
+export declare type SelectClassType = keyof SelectClasses;
+declare const selectStyle: JsStyles<SelectClassType>;
+export default selectStyle;

package/esm/select/select.js

@@ -0,0 +1,218 @@
+"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;
+require("core-js/modules/es.array.concat.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+var _inputBorder = _interopRequireDefault(require("../input/input-border"));
+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; }
+var inputBorderToken = {
+  lineHeight: _theme.default.lineHeightDynamic,
+  borderRadius: _theme.default.selectBorderRadius,
+  fontSize: _theme.default.selectFontSize,
+  smallFontSize: _theme.default.selectSmallFontSize,
+  largeFontSize: _theme.default.selectLargeFontSize,
+  paddingY: _theme.default.selectPaddingY,
+  smallPaddingY: _theme.default.selectSmallPaddingY,
+  largePaddingY: _theme.default.selectLargePaddingY,
+  paddingX: _theme.default.selectPaddingX,
+  smallPaddingX: _theme.default.selectSmallPaddingX,
+  largePaddingX: _theme.default.selectLargePaddingX,
+  borderColor: _theme.default.selectBorderColor,
+  focusBorderColor: _theme.default.selectFocusBorderColor,
+  hoverBorderColor: _theme.default.selectHoverBorderColor,
+  disabledBorderColor: _theme.default.selectDisabledBorderColor,
+  errorBorderColor: _theme.default.selectErrorBorderColor,
+  fontColor: _theme.default.selectFontColor,
+  disabledFontColor: _theme.default.selectDisabledFontColor,
+  backgroundColor: _theme.default.selectBackgroundColor,
+  disabledBackgroundColor: _theme.default.selectDisabledBackgroundColor,
+  focusShadow: _theme.default.selectFocusShadow,
+  errorFocusShadow: _theme.default.selectErrorFocusShadow,
+  innerTitlePaddingY: _theme.default.inputInnerPaddingY,
+  innerTitlePaddingX: _theme.default.inputInnerPaddingX,
+  smallInnerTitlePaddingY: _theme.default.inputInnerSmallPaddingY,
+  smallInnerTitlePaddingX: _theme.default.inputInnerSmallPaddingX,
+  largeInnerTitlePaddingY: _theme.default.inputInnerLargePaddingY,
+  largeInnerTitlePaddingX: _theme.default.inputInnerLargePaddingX
+};
+var inputBorder = (0, _inputBorder.default)('wrapper', inputBorderToken);
+var wrapper = inputBorder.wrapper,
+  wrapperDisabled = inputBorder.wrapperDisabled,
+  resetWrapper = (0, _objectWithoutProperties2.default)(inputBorder, ["wrapper", "wrapperDisabled"]);
+var selectStyle = _objectSpread(_objectSpread({
+  wrapper: _objectSpread({
+    display: 'inline-block',
+    position: 'relative',
+    width: _theme.default.datePickerDateWidth
+  }, wrapper),
+  wrapperDisabled: _objectSpread(_objectSpread({}, wrapperDisabled), {}, {
+    '& $icon': {
+      color: _theme.default.datePickerDisabledFontColor
+    }
+  })
+}, resetWrapper), {}, {
+  resultWrapper: {
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+    position: 'relative',
+    outline: 'none',
+    '&:hover': {
+      '& $clear': {
+        display: 'inline-flex'
+      },
+      '& $clear + $icon': {
+        display: 'none'
+      }
+    }
+  },
+  result: {
+    display: 'flex',
+    flex: '1',
+    minWidth: 0,
+    alignItems: 'center',
+    lineHeight: _theme.default.lineHeightDynamic
+  },
+  resultTextWrapper: {
+    display: 'flex',
+    flex: '1',
+    minWidth: 0,
+    textAlign: 'left'
+  },
+  resultAlignLeft: {
+    '& $resultTextWrapper': {
+      textAlign: 'left'
+    }
+  },
+  resultAlignRight: {
+    '& $resultTextWrapper': {
+      textAlign: 'right'
+    }
+  },
+  resultAlignCenter: {
+    '& $resultTextWrapper': {
+      textAlign: 'center'
+    }
+  },
+  resultText: {
+    lineHeight: _theme.default.lineHeightDynamic,
+    position: 'relative',
+    flex: '1',
+    minWidth: 0,
+    '&::before': {
+      content: '""',
+      display: 'inline-block'
+    }
+  },
+  resultTextPadding: {
+    position: 'absolute',
+    padding: "0 ".concat(_theme.default.datePickerResultTextPaddingX),
+    left: "calc(-1 * ".concat(_theme.default.datePickerResultTextPaddingX, ")"),
+    right: "calc(-1 * ".concat(_theme.default.datePickerResultTextPaddingX, ")"),
+    top: '0',
+    bottom: '0',
+    borderRadius: _theme.default.datePickerResultTextBorderRadius,
+    '& > input': {
+      color: 'inherit',
+      padding: '0',
+      border: '0',
+      outline: '0',
+      fontSize: 'inherit',
+      lineHeight: _theme.default.lineHeightDynamic,
+      backgroundColor: 'transparent',
+      width: '100%',
+      '&::placeholder': {
+        color: _theme.default.datePickerPlaceholderColor
+      }
+    }
+  },
+  resultTextActive: {
+    '& $resultTextPadding': {
+      backgroundColor: _theme.default.datePickerResultTextActiveBackgroundColor
+    }
+  },
+  resultTextDisabled: {
+    color: _theme.default.datePickerDisabledFontColor,
+    cursor: 'not-allowed'
+  },
+  placeholder: {
+    color: _theme.default.datePickerPlaceholderColor
+  },
+  pickerWrapper: {
+    position: 'absolute',
+    backgroundColor: _theme.default.selectPanelBackgroundColor,
+    boxShadow: _theme.default.selectPanelShadow,
+    borderRadius: _theme.default.selectPanelRadius
+  },
+  ellipsis: {
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  multiple: {
+    '& $optionInner': {
+      paddingRight: _theme.default.selectOptionInnerPaddingRight
+    }
+  },
+  checkedIcon: {
+    right: 8,
+    top: 9,
+    position: 'absolute',
+    display: 'inline-flex',
+    width: _theme.default.selectFontSize,
+    fontSize: _theme.default.selectFontSize
+  },
+  list: {
+    paddingTop: 3,
+    paddingBottom: 3
+  },
+  virtualList: {
+    margin: 0,
+    padding: 0
+  },
+  option: {
+    listStyle: 'none',
+    fontSize: _theme.default.selectFontSize,
+    lineHeight: _theme.default.lineHeightDynamic,
+    padding: "".concat(_theme.default.selectOptionPaddingY, " ").concat(_theme.default.selectOptionPaddingX),
+    // not disabled
+    '&:not($optionDisabled)': {
+      cursor: 'pointer'
+    },
+    // hover
+    '&:hover': {
+      '& $optionInner': {
+        backgroundColor: _theme.default.selectOptionHoverBackgroundColor
+      }
+    }
+  },
+  optionInner: {
+    position: 'relative',
+    padding: "".concat(_theme.default.selectOptionInnerPaddingY, " ").concat(_theme.default.selectOptionInnerPaddingX),
+    borderRadius: _theme.default.selectOptionInnerBorderRadius
+  },
+  optionHover: {},
+  optionActive: {
+    color: _theme.default.selectOptionActiveColor,
+    backgroundColor: _theme.default.selectOptionActiveBackgroundColor
+  },
+  optionDisabled: {
+    color: _theme.default.selectOptionDisabledColor,
+    backgroundColor: _theme.default.selectOptionDisabledBackgroundColor
+  },
+  optionGroup: {},
+  optionGroupTitle: {}
+});
+var _default = selectStyle;
+exports.default = _default;

package/esm/slider/index.d.ts

@@ -0,0 +1,4 @@
+import sliderStyle from './slider';
+declare const useSliderStyle: (data?: undefined) => import("jss").Classes<keyof import("./slider").SliderClasses>;
+export { sliderStyle, useSliderStyle };
+export default useSliderStyle;

package/esm/slider/index.js

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

package/esm/slider/slider.d.ts

@@ -0,0 +1,23 @@
+import { JsStyles } from '../jss-style';
+export declare type SliderClasses = {
+    wrapper: string;
+    track: string;
+    trackInner: string;
+    indicator: string;
+    indicatorStart: string;
+    indicatorEnd: string;
+    scaleWrapper: string;
+    scale: string;
+    label: string;
+    indicatorActive: string;
+    startValue: string;
+    valueHover: string;
+    endValue: string;
+    autoHide: string;
+    disabled: string;
+    vertical: string;
+    value: string;
+};
+export declare type SliderClassType = keyof SliderClasses;
+declare const sliderStyle: JsStyles<SliderClassType>;
+export default sliderStyle;

package/esm/slider/slider.js

@@ -0,0 +1,228 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+var sliderStyle = {
+  wrapper: {
+    display: 'block',
+    padding: "20px 10px",
+    fontSize: _theme.default.sliderFontSize,
+    position: 'relative',
+    zIndex: 0
+  },
+  autoHide: {
+    '&:not(:hover)': {
+      '& $startValue, & $endValue, & $scaleWrapper': {
+        visibility: 'hidden'
+      }
+    }
+  },
+  disabled: {},
+  vertical: {
+    display: 'inline-flex',
+    padding: "10px 70px 10px 20px"
+  },
+  track: {
+    borderRadius: '100px',
+    height: _theme.default.sliderTrackSize,
+    boxSizing: 'border-box',
+    backgroundColor: _theme.default.sliderTrackBackgroundColor,
+    position: 'relative',
+    '$vertical &': {
+      width: _theme.default.sliderTrackSize,
+      height: '100%'
+    }
+  },
+  trackInner: {
+    position: 'absolute',
+    borderRadius: 'inherit',
+    top: '0',
+    left: '0',
+    right: '100%',
+    height: '100%',
+    backgroundColor: _theme.default.sliderTrackActiveBackgroundColor,
+    '$vertical &': {
+      width: '100%',
+      height: 'unset',
+      left: 0,
+      bottom: '100%'
+    },
+    '$disabled &': {
+      backgroundColor: _theme.default.sliderTrackDisabledBackgroundColor
+    }
+  },
+  indicator: {
+    position: 'absolute',
+    zIndex: 100,
+    width: _theme.default.sliderIndicatorSize,
+    height: _theme.default.sliderIndicatorSize,
+    backgroundColor: _theme.default.sliderIndicatorBackgroundColor,
+    borderRadius: '50%',
+    borderWidth: _theme.default.sliderIndicatorBorderSize,
+    boxSizing: 'border-box',
+    borderStyle: 'solid',
+    borderColor: _theme.default.sliderIndicatorBorderColor,
+    cursor: 'pointer',
+    '&:hover': {
+      backgroundColor: _theme.default.sliderIndicatorActiveBackgroundColor
+    },
+    '$disabled &': {
+      backgroundColor: _theme.default.sliderIndicatorDisabledBackgroundColor,
+      borderColor: _theme.default.sliderIndicatorDisabledBorderColor,
+      cursor: 'not-allowed'
+    }
+  },
+  indicatorActive: {
+    zIndex: 101,
+    backgroundColor: _theme.default.sliderIndicatorActiveBackgroundColor
+  },
+  indicatorStart: {
+    '$wrapper:not($vertical) &': {
+      left: 0,
+      top: '50%',
+      transform: 'translate(-50%, -50%)'
+    },
+    '$vertical &': {
+      left: '50%',
+      top: 0,
+      transform: 'translate(-50%, -50%)'
+    }
+  },
+  indicatorEnd: {
+    '$wrapper:not($vertical) &': {
+      right: 0,
+      top: '50%',
+      transform: 'translate(50%, -50%)'
+    },
+    '$vertical &': {
+      left: '50%',
+      bottom: 0,
+      transform: 'translate(-50%, 50%)'
+    }
+  },
+  value: {
+    position: 'absolute',
+    userSelect: 'none',
+    lineHeight: 1,
+    zIndex: 100,
+    backgroundColor: _theme.default.sliderValueBackgroundColor,
+    '$indicatorActive  + &': {
+      zIndex: 101
+    }
+  },
+  startValue: {
+    '$wrapper:not($vertical) &': {
+      left: 0,
+      bottom: '100%',
+      transform: 'translate(-50%, -10px)'
+    },
+    '$vertical &': {
+      top: 0,
+      left: '100%',
+      transform: 'translate(10px, -50%)',
+      padding: '1px 4px'
+    }
+  },
+  valueHover: {
+    backgroundColor: _theme.default.sliderValueHoverBakgroundColor,
+    color: _theme.default.sliderValueHoverFontColor,
+    padding: "".concat(_theme.default.sliderValueHoverPaddingY, " ").concat(_theme.default.sliderValueHoverPaddingX),
+    lineHeight: _theme.default.lineHeightDynamic,
+    borderRadius: _theme.default.sliderValueHoverRadius,
+    opacity: 0,
+    transition: 'opacity 0.2s',
+    // 下方三角
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      top: '100%',
+      left: '50%',
+      transform: 'translate(-50%, 0)',
+      width: 0,
+      height: 0,
+      borderStyle: 'solid',
+      borderWidth: '4px',
+      borderColor: "".concat(_theme.default.sliderValueHoverBakgroundColor, " transparent transparent transparent")
+    },
+    '$vertical &': {
+      '&::after': {
+        top: '50%',
+        right: '100%',
+        left: 'unset',
+        transform: 'translate(0, -50%)',
+        borderColor: "transparent ".concat(_theme.default.sliderValueHoverBakgroundColor, " transparent transparent ")
+      }
+    },
+    '$indicator:hover + &, $indicatorActive  + &': {
+      opacity: 1
+    }
+  },
+  endValue: {
+    '$wrapper:not($vertical) &': {
+      right: 0,
+      bottom: '100%',
+      transform: 'translate(50%, -10px)'
+    },
+    '$vertical &': {
+      bottom: 0,
+      left: '100%',
+      transform: 'translate(10px, 50%)',
+      padding: '1px 4px'
+    }
+  },
+  scaleWrapper: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    '$vertical &': {
+      flexDirection: 'column'
+    }
+  },
+  scale: {
+    position: 'relative',
+    '&::before': {
+      content: '""',
+      display: 'block',
+      backgroundColor: '#ccc'
+    },
+    '$wrapper:not($vertical) &': {
+      marginTop: _theme.default.sliderScaleMarginY,
+      width: 0,
+      '&::before': {
+        width: '1px',
+        height: _theme.default.sliderScaleLineSize,
+        transform: 'translateX(-50%)'
+      }
+    },
+    '$vertical &': {
+      marginLeft: _theme.default.sliderScaleMarginY,
+      height: 0,
+      '&::before': {
+        height: '1px',
+        width: _theme.default.sliderScaleLineSize,
+        transform: 'translateY(-50%)'
+      }
+    }
+  },
+  label: {
+    position: 'absolute',
+    fontSize: _theme.default.sliderScaleFontSize,
+    userSelect: 'none',
+    '$wrapper:not($vertical) &': {
+      transform: 'translate(-50%)',
+      lineHeight: _theme.default.lineHeightDynamic
+    },
+    '$vertical &': {
+      top: 0,
+      left: '100%',
+      lineHeight: 1,
+      transform: 'translate(4px, -50%)'
+    }
+  }
+};
+var _default = sliderStyle;
+exports.default = _default;