@sheinx/shineout-style 3.0.0-alpha.1

package/esm/upload/upload.js

@@ -0,0 +1,331 @@
+"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 uploadStyle = {
+  wrapper: {
+    display: 'block'
+  },
+  wrapperImage: {
+    display: 'flex',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+    gap: '8px'
+  },
+  wrapperDisabled: {
+    '& $imageHandler': {
+      cursor: 'not-allowed',
+      opacity: 0.5
+    }
+  },
+  handler: {
+    display: 'inline-block',
+    cursor: 'pointer',
+    boxSizing: 'border-box',
+    '$wrapperDrop:not($wrapperDisabled) &': {
+      width: '100%',
+      borderRadius: _theme.default.uploadImageBorderRadius,
+      border: "1px dashed ".concat(_theme.default.uploadImageHandlerBorderColor),
+      backgroundColor: _theme.default.uploadImageHandlerBackgroundColor,
+      color: _theme.default.uploadImageHandlerFontColor,
+      '&:hover': {
+        borderColor: _theme.default.uploadImageHandlerHoverBorderColor,
+        color: _theme.default.uploadImageHandlerHoverFontColor
+      }
+    }
+  },
+  result: {
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: _theme.default.uploadResultMarginY,
+    gap: _theme.default.uploadResultGap
+  },
+  icon: {
+    width: _theme.default.uploadResultIconSize,
+    height: _theme.default.uploadResultIconSize,
+    color: _theme.default.uploadResultIconColor,
+    display: 'flex',
+    alignItems: 'center',
+    '$resultError $resultText &': {
+      color: _theme.default.uploadResultErrorFontColor
+    },
+    '$resultDeleted $resultText &': {
+      color: _theme.default.uploadResultDeletedFontColor
+    }
+  },
+  iconHover: {
+    position: 'relative',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: '-5px',
+      left: '-5px',
+      right: '-5px',
+      bottom: '-5px',
+      borderRadius: '50%',
+      display: 'none',
+      backgroundColor: _theme.default.uploadResultIconHoverBackgroundColor
+    },
+    '& svg': {
+      position: 'relative'
+    },
+    '&:hover': {
+      '&::before': {
+        display: 'block'
+      }
+    }
+  },
+  resultError: {},
+  resultSuccess: {},
+  resultUploading: {},
+  resultDeleted: {},
+  resultStatusIcon: {
+    '$resultSuccess &': {
+      color: _theme.default.uploadResultSuccessIconColor
+    }
+  },
+  resultTextFooter: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: _theme.default.uploadResultGap,
+    color: _theme.default.uploadResultUploadingIconColor
+  },
+  resultText: {
+    display: 'flex',
+    alignItems: 'center',
+    minWidth: '0',
+    flex: 1,
+    gap: _theme.default.uploadResultGap,
+    fontSize: _theme.default.uploadResultFontSize,
+    color: _theme.default.uploadResultFontColor,
+    lineHeight: _theme.default.lineHeightDynamic,
+    padding: "".concat(_theme.default.uploadResultPaddingY, " ").concat(_theme.default.uploadResultPaddingX),
+    backgroundColor: _theme.default.uploadResultBackgroundColor,
+    borderRadius: _theme.default.uploadResultBorderRadius,
+    '$resultError &': {
+      color: _theme.default.uploadResultErrorFontColor
+    },
+    '$resultDeleted &': {
+      textDecoration: 'line-through',
+      color: _theme.default.uploadResultDeletedFontColor
+    }
+  },
+  resultTextBody: {
+    flex: 1,
+    minWidth: '0'
+  },
+  resultClose: {
+    cursor: 'pointer'
+  },
+  imageHandler: {
+    boxSizing: 'border-box',
+    display: 'inline-flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: _theme.default.uploadImageBorderRadius,
+    border: "1px dashed ".concat(_theme.default.uploadImageHandlerBorderColor),
+    backgroundColor: _theme.default.uploadImageHandlerBackgroundColor,
+    color: _theme.default.uploadImageHandlerFontColor,
+    '$wrapper:not($wrapperDisabled) &:hover': {
+      borderColor: _theme.default.uploadImageHandlerHoverBorderColor,
+      color: _theme.default.uploadImageHandlerHoverFontColor
+    }
+  },
+  imageHandlerIcon: {
+    display: 'flex',
+    alignItems: 'center',
+    '& > svg': {
+      width: 30,
+      height: 30
+    }
+  },
+  imageResult: {
+    border: "1px solid ".concat(_theme.default.uploadImageHandlerBorderColor),
+    boxSizing: 'border-box',
+    borderRadius: _theme.default.uploadImageBorderRadius,
+    position: 'relative',
+    '$resultError&': {
+      borderStyle: 'dashed',
+      borderColor: _theme.default.uploadImageHandlerErrorBorderColor,
+      color: _theme.default.uploadImageHandlerErrorFontColor
+    }
+  },
+  imageBg: {
+    '$wrapper &': {
+      position: 'absolute',
+      borderRadius: 'inherit',
+      zIndex: 0,
+      top: '0',
+      right: '0',
+      bottom: '0',
+      left: '0',
+      backgroundSize: 'cover',
+      border: 'none'
+    },
+    '$wrapper $resultDeleted &': {
+      filter: 'grayscale(100%)',
+      opacity: '0.6'
+    }
+  },
+  imageResultMask: {
+    position: 'absolute',
+    borderRadius: 'inherit',
+    boxSizing: 'border-box',
+    zIndex: 0,
+    right: '0',
+    bottom: '0',
+    width: '100%',
+    height: '100%',
+    backgroundColor: _theme.default.uploadImageResultMaskBackgroundColor,
+    opacity: 0,
+    transition: 'opacity 0.3s',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '$resultError &': {
+      display: 'none'
+    },
+    '&:hover': {
+      opacity: 1
+    }
+  },
+  imageResultMaskOperator: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    width: '100%',
+    '& $icon': {
+      color: _theme.default.uploadImageResultMaskIconColor,
+      width: _theme.default.uploadImageResultMaskIconSize,
+      height: _theme.default.uploadImageResultMaskIconSize,
+      cursor: 'pointer'
+    }
+  },
+  imageResultLoading: {
+    boxSizing: 'border-box',
+    width: _theme.default.uploadImageResultMaskIconSize,
+    height: _theme.default.uploadImageResultMaskIconSize,
+    borderColor: _theme.default.uploadImageResultMaskIconColor,
+    borderTopColor: 'transparent'
+  },
+  imageResultMaskInfo: {
+    lineHeight: _theme.default.lineHeightDynamic,
+    color: _theme.default.uploadImageResultMaskIconColor
+  },
+  imageResultTopBtn: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    transform: 'translate(50%, -50%)',
+    color: _theme.default.uploadImageResultBtnCloseColor,
+    cursor: 'pointer',
+    '$resultDeleted &': {
+      color: _theme.default.uploadImageResultBtnRecoverColor
+    }
+  },
+  imageResultMaskShow: {
+    opacity: 1
+  },
+  customImageBtn: {
+    '$resultSuccess &': {
+      display: 'none'
+    },
+    '$resultSuccess:hover &': {
+      display: 'block'
+    }
+  },
+  imageResultTip: {
+    position: 'absolute',
+    top: '100%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    padding: '2px 8px',
+    width: 'max-content',
+    minWidth: '120px',
+    maxWidth: '240px',
+    zIndex: '1000',
+    marginTop: '8px',
+    borderRadius: '4px',
+    boxShadow: '0 0 0 1px rgba(255,77,80,.1), 0 2px 8px rgba(0,0,0,.15)',
+    backgroundColor: _theme.default.uploadImageResultTipBackgroundColor,
+    fontSize: _theme.default.uploadImageResultTipFontSize,
+    fontColor: _theme.default.uploadImageResultErrorFontColor,
+    '&::before': {
+      position: 'absolute',
+      bottom: '100%',
+      left: '50%',
+      width: '6px',
+      height: '6px',
+      border: '1px solid rgba(255,77,80,.1)',
+      borderWidth: '1px 0 0 1px',
+      background: 'inherit',
+      content: '" "',
+      transform: 'rotate(45deg) translateY(3px)'
+    }
+  },
+  dropItem: {
+    ':not(wrapperDisabled) &[data-soui-dragover="true"]': {
+      '& $handler, & $imageHandler, & $imageResult': {
+        borderColor: _theme.default.uploadImageHandlerHoverBorderColor,
+        borderStyle: 'dashed',
+        color: _theme.default.uploadImageHandlerHoverFontColor
+      }
+    }
+  },
+  button: {
+    position: 'relative',
+    overflow: 'hidden',
+    '& > span': {
+      position: 'relative',
+      zIndex: '1'
+    }
+  },
+  buttonUploading: {
+    '&&': {
+      color: _theme.default.buttonSecondaryOutlineFontColor
+    }
+  },
+  buttonCover: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    background: '#fff'
+  },
+  buttonBg: {
+    overflow: 'hidden',
+    zIndex: '2',
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    transition: 'right .2s ease-in-out',
+    color: '#fff',
+    whiteSpace: 'nowrap',
+    paddingLeft: 'inherit',
+    background: 'inherit',
+    '& > span': {
+      display: 'flex',
+      padding: 'inherit',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      width: '100%',
+      alignItems: 'center'
+    }
+  },
+  buttonBgSpin: {
+    display: 'inline-block',
+    marginRight: '8px'
+  }
+};
+var _default = uploadStyle;
+exports.default = _default;

package/esm/virtual-scroll/index.d.ts

@@ -0,0 +1,4 @@
+import virtualScrollStyle from './virtual-scroll';
+declare const useVirtualScrollStyle: (data?: undefined) => import("jss").Classes<"footer" | "iframe" | "container" | "scroll" | "bar" | "virtual" | "scrolled">;
+export { virtualScrollStyle, useVirtualScrollStyle };
+export default useVirtualScrollStyle;

package/esm/virtual-scroll/index.js

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

package/esm/virtual-scroll/virtual-scroll.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+declare type VirtualClass = 'scroll' | 'virtual' | 'iframe' | 'container' | 'footer' | 'bar' | 'scrolled';
+declare const VirtualScrollStyle: JsStyles<VirtualClass>;
+export default VirtualScrollStyle;

package/esm/virtual-scroll/virtual-scroll.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var VirtualScrollStyle = {
+  scroll: {
+    position: 'relative',
+    overflow: 'hidden',
+    height: '100%',
+    boxSizing: 'border-box'
+  },
+  scrolled: {},
+  virtual: {},
+  iframe: {
+    position: 'absolute',
+    zIndex: -1,
+    top: 0,
+    left: 0,
+    right: 0,
+    // bottom: 0,
+    border: 'none',
+    width: '100%',
+    height: '100%'
+  },
+  container: {
+    height: '100%'
+  },
+  footer: {},
+  bar: {
+    width: 1,
+    visibility: 'hidden'
+  }
+};
+var _default = VirtualScrollStyle;
+exports.default = _default;

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@sheinx/shineout-style",
+  "version": "3.0.0-alpha.1",
+  "description": "",
+  "keywords": [],
+  "license": "ISC",
+  "author": "",
+  "sideEffects": false,
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "typings": "./dist/cjs/index.d.ts",
+  "dependencies": {
+    "jss": "10.9.2",
+    "react-jss": "10.9.2",
+    "@sheinx/theme": "3.0.0-alpha.1"
+  }
+}